@charset "utf-8";
/* CSS Document */
html {max-width: 1920px; margin: 0 auto;}
body {font-size: 14px; position: relative; color: #616161; max-width: 1920px; font-family: 'IBM Plex Sans Thai';
margin: 0 auto;overflow-x: hidden;}
div {font-family: 'IBM Plex Sans Thai';}
p {font-size: 16px; font-family: 'IBM Plex Sans Thai'; color: #616161;font-weight: 400;}
*, *:before, *:after {box-sizing: border-box;}
*:before, *:after {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
img {max-width: 100%;}
ul,ol {font-family: 'IBM Plex Sans Thai';}
a * {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
a, div a, p a {color: #616161; text-decoration: none!important;outline: none;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
a:hover, div a:hover, p a:hover {color: #007CC2;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
header {position: fixed;z-index: 999;top: 0;left: 50%; width: 100%;max-width:1920px; transform: translate(-50%, 0) !important;
  text-transform: uppercase;background: #fff;}
h1 {margin-bottom: 0;font-family: 'IBM Plex Sans Thai'; font-size: 30px;}
.section-box-inner h1 {display: none;} 
h2 {font-size: 30px;font-family: 'IBM Plex Sans Thai';}
h3, h4 {font-size: 25px;font-family: 'IBM Plex Sans Thai';}
img {height: auto;}
.clear {clear: both;}
.header-wrap {padding: 15px 0 5px 0;}
.content-wrap {width:90%; margin: 0 auto; max-width: 1600px;position: relative;overflow: hidden;z-index: 2;}
#mainmenu-button-mb {display: none!important;}
#mainmenu-button,#mainmenu-button-mb {color: #0EAEEA; padding: 0; position: relative;
	cursor: pointer;transition: all linear .3s;z-index: 999;float: right;margin-top: 12px;}
.wrap-menu-btn {position: relative;display: inline-block;width: 55px;vertical-align: middle;
padding: 10px 0 10px 25px;border-left: 1px solid #D2D2D2;}
#line-1, #line-2, #line-3 {height: 2px;margin: 2px 0 5px 0;transition: all linear .3s;
	display: block;background: #616161; width: 30px}
#line-2.active {opacity: 0;}
#line-1.active {-webkit-transform: translate(0px,7px) rotate(45deg);transform: translate(0px,7px) rotate(45deg);width: 30px;}
#line-3.active {-webkit-transform: translate(0px, -7px) rotate(-45deg);transform: translate(0px, -7px) rotate(-45deg);}
#main-menulist * {transition:visibility 0s}
#main-menulist {padding: 0;color: #fff;position: relative;}
#main-menulist ul {/*overflow: hidden;*/list-style: none;width: 109%;display: flex;justify-content: flex-start;margin: 0;
	flex-wrap: wrap;padding-left: 0;}
#main-menulist ul li {font-size: 16px;font-family: 'IBM Plex Sans Thai';position: relative;color: #6A6A6A; font-weight: 500;padding: 0 20px 0 0;}
#main-menulist ul li a {color:#656565;font-size: 16px;text-transform: uppercase;font-weight: 400;}
#main-menulist ul li a.height {padding-bottom: 30px;}
.line-title-menu {width: 24px;background: #007CC2; margin: 10px 0;display: block;height: 2px;}
#main-menulist ul li img {vertical-align: top; max-width: 27px}
#main-menulist ul ul {height: auto;padding: 5px 0;background:none}
#main-menulist ul li li {font-size: 15px;line-height: 23px;font-weight: 400;width: 100% !important;
	margin: 0 0 10px 0; text-transform: none; padding: 0}
#featured-menu {display: inline-block; width: 20%;}
#main-menulist ul li li a {color: #6A6A6A}
#main-menulist ul li a:hover {color:#007CC2;}
#main-menulist ul li .dropdown-content {opacity: 0;visibility: hidden;position: absolute;top: 70px;left: -15px;z-index: 10;padding-top: 3px;-webkit-transition: all 0.5s;transition: all 0.5s;}
#main-menulist ul li .dropdown-content ul {display: block;background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;;padding: 15px 15px;}
#main-menulist ul li .dropdown-content ul li {display: block;margin: 0;}
#main-menulist ul li .dropdown-content ul li a {display: block;line-height: 2.2rem;color: #8D8D8D;white-space: nowrap;}
#main-menulist ul li .dropdown-content ul li:hover a {opacity: 1;color: #007CC2;}
#main-menulist ul li:hover > .dropdown-content {opacity: 1;visibility: visible;top: 55px;}
.wrap-content-menu {display: inline-block; width: 100%;vertical-align: top;padding: 0 35px;}
#main-menulist-all {display: none;}
.menumain-active {color: #0088d5 !important;}
.menu-top {display: inline-block;float: right;text-align: right;position: relative;z-index: 999;}
.btn-menuicon {display: inline-block;vertical-align: middle;}
.btn-menuicon-list {text-align: center; display: inline-block;padding: 10px 25px;border-left: 1px solid #D2D2D2;margin-top: 10px;vertical-align: top;}
.btn-menuicon a {text-align: center;display: inline-block;font-size: 16px;}
.btn-menuicon a span {padding-left: 15px;}
.switchlang {display: inline-block;vertical-align: top;padding: 10px 0;margin: 10px 0;border-left: 1px solid #D2D2D2;}
.switchlang span {vertical-align: middle; display: inline-block;color: #000000;padding: 0 15px;}
.icontop-right svg .a {fill:#007CC2;stroke:#007CC2;stroke-width:0.3px;}
.btn-menuicon a:hover {color: #007CC2;}
.wrap-menumain {display: inline-block; position: relative;vertical-align: middle;content: "";}
.logo-box {text-align: center;display: inline-block;vertical-align: middle;}
.head-search {display: inline-block; padding-left: 15px;vertical-align: middle; position: relative;width: 450px;}
input.searchinput {border-radius: 50px;font-family: 'IBM Plex Sans Thai';padding: .375rem 35px .375rem 10px!important;}
.btn-searchtop {position: absolute;right: 5px;top: 5px;background: unset;border: unset;}
#banner-main .owl-nav.disabled + .owl-dots {z-index: 99;position: absolute;bottom: 25px;left: 50%;transform: translate(-50%, 0);}
#banner-main .owl-dot span {border: 1px solid rgba(0, 0, 0, 0.22); background: rgba(0, 0, 0, 0.22);width: 50px;height: 6px;margin: 5px 10px;}
#banner-main .owl-dot.active span, #banner-main .owl-dot:hover span {background: #0088D5; border: 1px solid #0088D5;}
footer {background: #fff;padding: 50px 0 15px 0;position: relative;z-index: 2;}
.nolink {color: #6A6A6A!important; cursor: auto;}
.footer-wrap {position: relative;}
.copyright-box {background: #fff;padding:40px 0 0 0;text-align: left;font-size: 15px;color: #A5A5A5;width: 80%;margin: 0 auto;}
.copyright-box p,.copyright-box p a {color: #A5A5A5;}
.copyright-box p a:hover  {color: #0088D5 !important;}
.gototop {display: none;text-align: center;}
.gototop svg .a{fill:none;stroke:#707070;}
.gototop span {display: block;font-size: 17px;}
#scrollTop {position:fixed;right:20px;bottom:30px;cursor:pointer;width:61px;background-color:#fff;height: 61px;
    display:none;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:100%; text-align: center;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.gototop a {display: block; padding: 5px 10px}
#scrollTop:hover {background-color: #007CC2;}
#scrollTop:hover span {color: #fff;}
#scrollTop:hover svg .a{stroke:#fff;}
.banner-mb {display: none!important;}
.txt-center {text-align: center;}
.scrollBg {background: rgba(255, 255, 255, 0.7); -webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
a svg * {-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;}
.scrollBg .header-wrap {background: rgba(255, 255, 255, 0.85);box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;}
.scrollBg .logo-main img {vertical-align: top;height: auto;}
.scrollBg .switchlang,.scrollBg #mainmenu-button {margin: 0;}
.scrollBg .logo-box {width: 55px;}
.scrollBg .btn-menuicon-list {padding: 8px 20px;margin-top: 0;}
.scrollBg .menu-top {padding-top: 2px;}
.scrollBg .header-wrap {padding-bottom: 7px;}
.scrollBg .menu-highlight-wrap {padding-top: 0;}
.scrollBg .menu-highlight li {font-size: 16px;}
.scrollBg .wrap-menumain {padding-top: 0;}
.menu-muti {margin-top: 30px;}

.searchbox-wrap {position: relative;color: #007CC2;border-left: none!important;}
#searchbox-head {position: relative;width: 330px;}
#searchbox-head input[type="text"] {
  height: 30px;
  font-size: 17px;
  display: inline-block;
  font-weight: 300;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

#searchbox-head input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

#searchbox-head input[type="text"]:focus {
  width: 65%;
  z-index: 1;
  border-bottom: 1px solid #D2D2D2;
  cursor: text;
  margin-right: 40px;
}
#searchbox-head input[type="submit"] {
  width: 90px;
  display: inline-block;
  float: right;
  background: url(../images/icon/search-icn.svg) center left 5px no-repeat;
  text-indent: -10000px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  cursor: pointer;
  transition: opacity .4s ease;
  background-size: 20px;
}

#searchbox-head input[type="submit"]:hover {
  opacity: 0.8;
}
#searchbox-head label {position: absolute;right: 0;top: 0;font-size: 16px;color: #616161;}
#searchbox-head:hover label,#searchbox-head:focus label {color: #007CC2;}
.wrapboxsearch-head {display: flex;flex-wrap: nowrap;align-items: center;}


/*cookie*/
.cookie-menu {padding: 35px 0}
.cookie-menu-box {display: block;border-radius: 10px;overflow: hidden;}
.cookie-menu-box a {display: block;cursor: pointer;padding: 10px; background: #EFEFEF;font-size: 18px; color: #29348F;text-align: center;}
.cookie-menu-box a:hover {background:#656565;color: #fff;}
.cookie-active a {background:#656565!important;color: #fff!important;}
.cookie-menu-mobile {display: none;}
.cookie-btn {margin-top: 10px;background: #656565;text-align: center;width: 130px;display: inline-block;color: #fff;padding: 5px 0;font-size: 16px;border-radius: 10px;}
.cookie-btn a, .cookie-btn a:hover {color: #fff!important;}
.cookie-btn:hover {background: #29348F;}
.alert-cookie { text-align: left; position:fixed; bottom:0; width:100%; right:0; background:rgba(0,0,0,0.65);padding: 15px 7% 20px 7%; box-shadow:4px 1px 10px #000; z-index:999}
.cookiehead {display: block; margin: 0; vertical-align: middle; color: #fff;font-size: 20px}
.alert-cookie p { margin:5px 0 0 0; padding:0; display: inline-block; color: #dedede; vertical-align: middle;font-size: 17px;line-height: 20px}
.alert-cookie p a{color: #fff;text-decoration: underline;}
.alert-cookie p a:hover {color: #656565}
.btn-cookies { margin: 35px 0 0 20px; text-align: center; display: inline-block; color: #dedede;}
.cookie-l {width: 88%;float: left;}
.cookie-r {width: 11%;float: left;text-align: right;}
.btn-cookies a { position: relative; letter-spacing: 1px; margin: 0 10px; 
  display: inline-block; border: none; padding: 5px 20px; 
  background-color: #fff; text-transform: uppercase; vertical-align: middle;
-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out; overflow: hidden;}
.btn-cookies a:hover { background:#666; color:#fff;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;}
.btn-cookies a.accept { position: relative; letter-spacing: 1px; margin: 0 10px 15px 10px; 
  display: inline-block; color: #fff; background:#c08f2c; border: 2px solid #c08f2c; padding: 10px 8px; 
   vertical-align: middle;border-radius: 5px;text-decoration: none;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out; overflow: hidden;}
.btn-cookies a.accept:hover { color: #fff; background:#c08f2c; border: 2px solid #c08f2c;-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;}
.close { background: #ccc; width: 25px; height: 22px; color: #fff; float: right;
display: block; border-radius: 100%; padding-top: 3px; text-align: center; font-size: 14px!important}
.close:hover { background: #c08f2c;color: #fff }
.cookies-btn-top {margin-top: 25px;text-align: center;}
/*policy*/
.policy-wrap ol {list-style: none; padding-left: 20px;margin: 0 0 20px 0}
.policy-wrap ol ol {margin: 10px 0}
.policy-wrap ol li {padding-bottom: 5px;}

.menuindex-item {text-align: center;}
.menuindex-item a {display: block;padding: 50px 25px;}
.menuindex-icon {display: block;min-height: 125px;}
.menuindex-icon svg {fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}
.mnindex-bookclub svg .a {stroke:#10959f;}
.mnindex-art svg .a{stroke:#d49142;}
.mnindex-family svg .a{stroke:#f7c8ee;}
.mnindex-leaning svg .a{stroke:#bfd83f;}
.menuindex-item {border-right: 1px solid #E9E9E9;}
.menuindex-item::last-child {border-left: none!important;}
.menuindex-txt {font-size: 20px;font-weight: 500;color: #616161;}
.menuindex-item a:hover .menuindex-txt {color: #fff;}
.mnindex-bookclub:hover {background:#10959f;}
.mnindex-art:hover {background:#d49142;}
.mnindex-family:hover {background:#f7c8ee;}
.mnindex-leaning:hover {background:#bfd83f;}
.mnindex-bookclub:hover svg .a,.mnindex-art:hover svg .a,.mnindex-family:hover svg .a,.mnindex-leaning:hover svg .a {stroke: #fff!important;}
.section-wrap {padding: 50px 0 60px 0;position: relative;}
.title-main {font-size: 33px;color: #616161;font-weight: 600;text-align: center; line-height: 45px;display: block;position: relative;}
.short-brief {font-size: 30px;font-weight: 500;color: #616161;padding: 0 0 50px 0;}
.section-wrap-inner {padding: 35px 0 70px 0;}
.section-index-promotion {background: #fff;}
.section-index-activities {background: #F3F9FE;}
.section-index-intereststory {background: #fff;}
.content-notfull {width: 85%;margin: 0 auto;}
.list-item-title {padding: 15px 0 0 0;font-size: 16px;font-weight: 500;height: 60px;line-height: 1.5;display: -webkit-box;
-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.list-item-date {padding-right: 10px;font-size: 14px;color: #9C9C9C;}
.list-item-rating {padding-right: 10px;font-size: 14px;color: #9C9C9C;}
.list-item-review {font-size: 14px;color: #9C9C9C;}
.list-item-date img,.list-item-rating img,.list-item-review img {margin-right: 6px;}
.list-item-date span,.list-item-rating span,.list-item-review span {vertical-align: middle;}
.list-item-type {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-between;}
.list-item-type li {display: inline-block;}
.list-item-type li a {font-size: 14px;color: #616161;}
.list-item-type li a img {margin-right: 10px;}
.list-item-wrap {margin: 35px 0 0 0;}
.list-item-cover {position: relative;margin: 0 auto;text-align: center;overflow: hidden;background: #fff;}
.list-item-cover:after {z-index: 2;opacity: 0;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;background: url(../images/icon/view-detail.svg) no-repeat center rgba(0, 123, 194, 0.65);}
.list-item-cover img {width: 100%;/*height: 100%;*/max-width: 100%;}
.list-item-box a:hover .list-item-cover:after {opacity: 1;}
.list-item-type-book a:hover {color: #10959f;}
.list-item-type-art a:hover {color: #d49142;}
.list-item-type-kids a:hover {color: #f7c8ee;}
.list-item-type-learning a:hover {color: #bfd83f;}
.btn-view-all {display: block;text-align: center;padding: 25px 0 0 0;}
.btn-view-all a {display: inline-block;font-size: 16px;font-weight: 500;color: #000000;}
.btn-view-all img {margin-left: 10px;}
.btn-view-all a:hover {padding-left: 20px;}
.section-index-podcast {background: url(../images/bg-portcast.svg) no-repeat bottom center;}
.main-section-inner .section-index-podcast {background-size: cover;}
.txt-white {color: #fff!important;}
.podcast-b2s-logo {background: #fff;height: 100%;border-radius: 10px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.podcast-play-wrap {background: #fff;height: 100%;border-radius: 10px;overflow: hidden;padding: 20px;display: flex;align-items: center;}
.podcast-wrapper {padding-top: 35px;}
.podcast-list-item-box * {color: #fff;font-size: 16px;}
.podcast-list-item-wrap {padding-top: 35px;display: flex;width: 102%;flex-wrap: wrap;}
.podcast-list-item-box {display: inline-block;width: 20%;padding-right: 35px;}
.podcast-list-item-date {text-align: right;font-size: 14px;}
.podcast-list-item-by {font-size: 14px;}
.podcast-list-item-cover {margin-bottom: 15px;overflow: hidden;position: relative;}
.podcast-list-item-title {padding-top: 10px;font-weight: 500;line-height: 1.5;height: 56px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
overflow: hidden;}
.podcast-list-item-cover:after {opacity: 0;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;background: url(../images/icon/play.svg) no-repeat center rgba(7, 165, 176, 0.65);}
.podcast-list-item-box a:hover .podcast-list-item-cover:after {opacity: 1;}
.subtitle-view-wrap {margin-top: 35px !important;margin-bottom: -20px;}
.subtitle-view {font-size: 30px;color: #0088D5;font-weight: 500;}
.view-on-title {font-size: 16px;text-align: right;font-weight: 500;color: #000000;display: inline-block;}
.view-on-title span {padding-right: 10px;}
.txt-right {text-align: right!important;}
.box-cover-cate-index {position: relative;overflow: hidden;background: url(../images/bg-ecate.jpg) no-repeat left bottom #FFEFE0;min-height: 590px;}
.box-cover-sign-index {position: relative;overflow: hidden;background: url(../images/bg-signin-index.jpg) no-repeat left bottom #3BB19E;min-height: 590px;}
.cate-title-main {font-size: 60px;color: #FF7A7A;font-weight: 500;text-transform: uppercase;line-height: 50px;text-shadow: -1px 2px 3px rgba(150, 150, 150, 0.6);}
.sign-title-main {font-size: 60px;color: #fff;font-weight: 500;text-transform: uppercase;line-height: 50px;text-shadow: -1px 2px 3px rgba(150, 150, 150, 0.6);}
.cate-title-main span,.sign-title-main span {display: block;font-size: 40px;}
.box-cover-cate-index-txt,.box-cover-sign-index-txt {text-align: center;}
.btn-cate-click a {border: 6px solid #FF7A7A;border-radius: 100%;width: 157px;height: 157px;text-align: center;display: inline-block;background: #fff;
  margin: 15px auto 0 auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;display: flex;font-size: 50px;color: #FF7A7A;
  font-weight: 500;align-items: center;justify-content: center;}
.btn-sign-click a {border: 6px solid #3BB19E;border-radius: 100%;width: 157px;height: 157px;text-align: center;display: inline-block;background: #fff;
  margin: 15px auto 0 auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;display: flex;font-size: 50px;color: #59E0CB;
  font-weight: 500;align-items: center;justify-content: center;}
.box-cover-cate-index-txt {position: absolute;right: 7%;top: 12%;}
.box-cover-sign-index-txt {position: absolute;right: 9%;top: 25%;}
.btn-cate-click a:hover {border: 6px solid #fff;background: #FF7A7A;color: #fff;}
.btn-sign-click a:hover {border: 6px solid #fff;background: #59E0CB;color: #fff;}
.tab-partner {position: relative;}
.tab-partner ul {list-style: none;padding: 0 5%;margin: 0;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.tab-partner ul li {display: inline-block;width: 20%;padding: 0 10px 10px 10px;}
.tab-partner ul li a {display: flex;align-items: center;justify-content: center;padding: 0;position: relative;overflow: hidden;
  border-radius: 15px;box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;}
.tab-partner ul li a:after {position: absolute;content: "";top: 0;left: 0;width: 100%;height: 100%;
  background: url(../images/icon/arrow-link.svg) no-repeat center rgba(0, 123, 194, 0.75);opacity: 0;background-size: 20px;}
.tab-partner ul li a:hover:after {opacity: 1;}

.book-color {color: #10959F!important;}
.art-color {color: #E78E24!important;}
.kids-color {color: #F7C8EE!important;}
.learn-color {color: #BFD83F!important;}
.default-color {color: #0088D5!important;}

.footer-menuwrap {display: flex;flex-wrap: nowrap;}
.menu-footer-cate-wrap {display: inline-block;width: 25%;list-style: none;padding: 0;margin: 0;}
.menu-footer-cate-wrap li a {font-size: 20px;font-weight: 500;}
.menu-footer-cate-wrap ol {list-style: none;padding: 10px 0 0 0;margin: 0;}
.menu-footer-cate-wrap ol li a {font-size: 14px;font-weight: 400;color: #555555;margin: 10px 0;display: block;}
.menu-footer-data {width: 12%!important;}

.menu-footer-book a:hover {color: #10959F;}
.menu-footer-art a:hover {color: #E78E24;}
.menu-footer-kids a:hover {color: #F7C8EE;}
.menu-footer-learn a:hover {color: #BFD83F;}
.menu-footer-data a:hover {color: #0088D5;}
.footer-social {text-align: center;padding: 35px 0;}
.footer-social a {margin: 0 5px;display: inline-block;}
.footer-social a img {image-rendering: -webkit-optimize-contrast;width: 42px;height: 42px;}
.subscript-box-wrap {text-align: left;width: 100%;padding: 0 0 35px 0;}
.subscript-head {font-size: 20px;color: #616161;font-weight: 500;padding-bottom: 10px;line-height: 30px;}
.subscript-box-form input {background-color: #fff!important; border-radius: 50px;border: 1px solid #C9C9C9;font-size: 14px;font-weight: 300;}
.btn-subscript {background: #0088D5; border-radius: 50px; padding: 3px 30px;text-align: center;border: 1px solid #0088D5; color: #fff;margin-left: 0;}
.object-bg {position: absolute;}
.object-bg-1 {bottom:-20% ;left: 5%;z-index: 1;}
.object-bg-2 {top: -5%;right: 15%;}
.object-bg-3 {top: -15%;right: 5%;}
.object-bg-4 {top: -35%;left: 5%;}
.search-btn-mobile {display: none;}
.section-banner {position: relative;padding-top: 91px;}
.tab-partner img {width: 100px;height: auto;}
#main-menulist-all {height: 100vh;position: absolute;top: 0;left: 0;width: 100%;background: url(../images/bg-menu.jpg) no-repeat bottom right #F3F9FE;padding: 120px 0 0 0;}
.menu-wrapmain-drop {position: relative;}
.wrap-content-menu-drop {width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;}
.menu-drop {display: inline-block;}
.box-mainmenu {width: 25%;padding: 35px 8% 100px 8%;}
.box-interestmenu {width: 50%;border-left: 1px solid #E9E9E9;border-right: 1px solid #E9E9E9;padding: 35px 0 100px 10%;}
.box-informenu {width: 25%;padding: 35px 8% 100px 8%;}
.menu-drop ul {list-style: none;padding: 0;margin: 0;}
.menu-main-label {font-size: 25px;padding-bottom: 35px;color: #0088D5;font-weight: 500;display: block;}
.menu-main-label-footer {font-size: 20px;padding-bottom: 25px;color: #0088D5;font-weight: 500;display: block;}
.box-interestmenu ul ul {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
.menu-drop ul li {display: block;margin-bottom: 20px;}
.menu-drop ul li a{font-size: 20px;color: #555555;}
.footer-menu-no-sub li a {font-size: 20px!important;padding-bottom: 10px!important;color: #0088D5!important;font-weight: 500;}
.menu-drop ul li a:hover {color: #0088D5;}
.dropdown-interest-btn {position: fixed;bottom: 0;right: 5%;z-index: 9999;}
.select-interest-filter {cursor: pointer;padding: 15px 20px;border-radius: 15px 15px 0 0;z-index: 9999;position: relative;border: none;font-family: 'IBM Plex Sans Thai';
  background: #0088D5;border-radius: ;color: #fff;font-size: 20px;font-weight: 500;box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;}
.select-interest-filter span {padding: 0 25px 0 20px;}
.dropdown-menuinterest {background-color: #fff;width: 100%;height: auto;position: absolute;display: none;z-index: 9997;bottom: 65px;
  border-radius: 10px;padding: 0;margin: 0;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;overflow: auto;max-height: 610px;}
.dropdown-menuinterest li {list-style: none;}
.dropdown-menuinterest li a {padding: 7px 25px;display: block;font-size: 16px;}
.dropdown-menuinterest li a:hover {background: #B2DCFF;}
.hitter{width:500px;height:500px;display:none;}
.wrap-content-menu-dropfooter {width: 100%;margin: 0 auto;display: flex;flex-wrap: wrap;padding: 0 0 25px 0;}
.menu-drop-footer {display: block;width: 100%;}
.box-mainmenu-footer {width: 22%;}
.box-interestmenu-footer {width: 56%;border-left: 1px solid #E9E9E9;border-right: 1px solid #E9E9E9;padding-left:10%;}
.box-informenu-footer {width: 22%;padding: 0 0 0 10%;}
.menu-drop-footer ul {list-style: none;padding: 0;margin: 0;width: 33%;float: left;}
.menu-drop-footer ul li {display: block;margin-bottom: 20px;}
.menu-drop-footer ul li a{font-size: 16px;color: #555555;}
.menu-drop-footer ul li a:hover {color: #0088D5;}
.footer-bottom-bar {width: 85%;margin: 0 auto;}
button:focus {outline: none !important;}
#new-footer .subscript-box-wrap {padding: 0;}
#new-footer .box-informenu-footer,#new-footer .box-mainmenu-footer {width: 45%;}
#new-footer .tab-partner img {width: 70px;image-rendering: -webkit-optimize-contrast;}
#new-footer .tab-partner ul li {width: 17%;}
#new-footer .tab-partner ul li a {padding: 0;}
#new-footer {width: 90%;}
.supscript-right {border-left: 1px solid #E9E9E9;}
#menu-index-pc .box-mainmenu {width: 100%;text-align: center;padding: 35px 5% 35px 5%;}
#menu-index-pc .box-informenu {width: 100%;text-align: center;padding: 35px 8% 35px 8%;}
#menu-index-pc .menu-drop ul ul {padding: 0;width: 25%;float: left;}
#menu-index-pc .menu-drop ul li li {display: block;margin-bottom: 35px;padding: 0 30px;}
.firt-column-menu {padding-top: 50px!important;}
.member-menu-dropdown {position: relative;}
.member-menu-dropdown-list {visibility: hidden;opacity: 0;position: absolute;top: 0;max-height: 0;overflow: hidden;
  -webkit-transition: max-height 0.8s;-moz-transition: max-height 0.8s;transition: max-height 0.8s;left: 0;width: 190px;padding-top: 15px;}
.member-menu-dropdown:hover .member-menu-dropdown-list {visibility: visible;opacity: 1;max-height: 200px;}
header .content-wrap {overflow: unset;max-width: 1800px;}
.login-list-menu {border: none!important;text-align: left!important;padding: 15px 20px;margin: 0;
width: 100%;}
.login-list-menu svg {width: 16px;}
.member-menu-dropdown-list-wrap {background: rgba(255, 255, 255, 0.85);margin-top: 50px;box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;}
.menu-no-sub li{margin: 0!important;padding-bottom: 40px!important;}
.menu-no-sub li a {font-size: 25px!important;color: #0088D5!important;font-weight: 500;display: block;}
.menu-with-sub {border-left: 1px solid #E9E9E9;}
#menu-index-pc .has-sub {display: flex;height: 100vh;}
#menu-index-pc .menu-drop ul ul {padding-top: 7%;}
#menu-index-mb {display: none!important;}
.list-item-property-wrap {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-bottom: 30px;}
.scrollBg .header-wrap .member-menu-dropdown-list-wrap {background: rgba(255, 255, 255, 0.95);}
.switchlang-mb {display: none!important;}
.footer-mb {display: none!important;}
.ecate-box-index {position: relative;overflow: hidden;}
.ecate-box-index a {display: block;}
.ecate-box-index a:after {opacity: 0;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;background: url(../images/icon/view-detail.svg) no-repeat center rgba(0, 123, 194, 0.65);}
.ecate-box-index a:hover:after {opacity: 1;}
.main-section-inner {background: url(../images/bg-main-inner.svg) no-repeat top left #F3F9FE;padding: 115px 0 50px 0;}
.title-main-inner {font-size: 34px;color: #616161;padding-bottom: 20px;margin: 0;font-weight: 600;}
#navwrap {font-size: 14px;text-align: right; padding: 0 0 30px 0;}
#navwrap a {display: inline-block; color: #8B8B8B;}
#navwrap a:hover {color: #0088D5;}
#navwrap span {color: #8B8B8B;padding: 0 5px;vertical-align: middle;}
.navdefault {font-size: 14px!important; display: inline-block; margin: 0;color: #8B8B8B!important;}
.article-property-wrap {display: flex;flex-wrap: wrap;justify-content: start;align-items: center;width:100%}
.article-date {padding-right: 25px;font-size: 15px;color: #616161;}
.article-rating {padding-right: 25px;font-size: 15px;color: #616161;}
.article-review {font-size: 15px;color: #616161;}
.article-date img,.article-rating img,.article-review img {margin-right: 6px;}
.article-date span,.article-rating span,.article-review span {vertical-align: middle;display: inline-block;}
.article-inner-wrap {position: relative; }
.article-inner-wrap-detail img {margin: 25px auto 35px auto;display: block;}
.article-inner-wrap-detail h2, .article-inner-wrap-detail h2 * {font-size: 23px!important;color: #0088D5!important;font-weight: 500!important;padding-top: 15px;}
.article-inner-wrap-detail h3, .article-inner-wrap-detail h3 * {font-size: 20px!important;color: #0088D5!important;font-weight: 500!important;padding-top: 15px;}
.article-inner-wrap-detail p,.article-inner-wrap-detail p *,.faq-inner-wrap p,.article-inner-wrap-detail h4,
.article-inner-wrap-detail h4 *,.article-inner-wrap-detail ol li,.article-inner-wrap-detail ul li {font-size: 16px!important;color: #616161!important;font-weight: 400!important;
  font-family: 'IBM Plex Sans Thai'!important;line-height: 1.8;}
.article-inner-wrap-detail p b,.article-inner-wrap-detail p strong {font-weight: 600!important;}
.article-inner-wrap-detail p b u, .article-inner-wrap-detail p u b{font-weight: 600!important;}
.article-inner-wrap-detail p a,.faq-inner-wrap p a {color: #0088D5;text-decoration: underline!important;}
.share-article {padding: 25px 0;}
.share-face-btn {display: inline-block;background: #3B5998; color: #fff!important;font-size: 16px;padding: 10px 40px;text-align: center;border-radius: 50px;}
.join-event-btn {display: inline-block;background: #FFA200; color: #fff!important;font-size: 16px;padding: 10px 40px;text-align: center;border-radius: 50px;}
.share-face-btn span, .join-event-btn span, .cert-btn span {padding-left: 10px;vertical-align: middle;display: inline-block;}
.share-face-btn:hover, .join-event-btn:hover {background: #0088D5;}
.tag-wrap {padding: 15px 0 0 0;}
.tag-wrap label {font-size: 16px;color: #7A7A7A;font-weight: 500;display: inline-block;padding-right: 5px;}
.tag-list {display: inline-block;}
.tag-list ul {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.tag-list ul li {display: inline-block;font-size: 16px;color: #7A7A7A;padding-right: 5px;}
.comment-box-wrap {width: 100%;border-top: 1px solid #707070;padding: 35px 0;margin-top: 35px;}
.comment-title {font-size: 25px;font-weight: 500;color: #000000;padding-bottom: 15px;}
.comment-box-wrap .label-comment {font-size: 16px;color: #616161;font-weight: 500;padding-bottom: 10px;display: block;}
.browsfile-box {margin-bottom: 10px;width: 50%!important;border-radius: 50px!important;}
.browsfile-box-edit {margin-bottom: 10px;width: 100%!important;border-radius: 50px!important;}
.comment-box-wrap textarea {border-radius: 15px;}
.btn-form {margin-top: 25px;color: #fff;text-align: center;border: none;padding: 10px;width: 110px;text-transform: uppercase;
  font-size: 16px;border-radius: 50px;}
.btn-submit {background: #0088D5;}
.form-remark {font-size: 16px;color: #FF5D5D;font-weight: 500;}
.form-group-comment {margin-bottom: 25px;}
/*star rating*/
.rate-wrap {display: flex;padding: 0 0 25px 0;}
.label-rate {display: inline-block!important;padding: 5px 15px 0 0!important;}
.rating-css {display: inline-block;}
.rating-css div {color: #FFA200;font-size: 25px;font-family: sans-serif;font-weight: 400;text-transform: uppercase;line-height: normal;}
.label-star {padding-right: 15px;}
.label-star,.star-icon {display: inline-block;vertical-align: middle;}
.rating-css input {display: none;}
.rating-css input + label {font-size: 22px;text-shadow: 1px 1px 0 #ffe400;cursor: pointer;}
.rating-css input:checked + label ~ label {color: #838383;}
.rating-css label:active {transform: scale(0.8);transition: 0.3s ease;}
.wrapper-dropdown {position: relative;margin: 0 auto 10px auto;padding: 10px 20px 7px 20px;cursor: pointer;outline: none;
  text-transform: uppercase;font-family: 'IBM Plex Sans Thai';font-size: 16px;color: #8B8B8B;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  font-weight: 500;width: 350px;border-radius: 50px;border: 1px solid #ced4da;}
.wrapper-dropdown:after {position: absolute;display: block;content: '';width: 10px;height: 10px;top: 50%;right: 25px;
  margin-top: -3px;border-bottom: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg) translateY(-50%);
  transition: all .4s ease-in-out;transform-origin: 50% 0;}
.wrapper-dropdown .dropd {text-align: center;z-index: 9;position: absolute;display: block;top: 100%;left: 0;right: 0;
  min-width: 100%;margin: 15px 0;padding: 0;border: 1px solid #cccccc;box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .07);background: #fff;transition: all .4s ease-in-out;opacity: 0;
  visibility: hidden;pointer-events: none;transform: translateY(-15px);height: 500px;overflow: auto;}
.wrapper-dropdown .dropd li {display: block;text-decoration: none;width:100%;padding: 10px;text-align: left;
  font-size: 16px;color: #000000;line-height: 20px;font-weight: normal;-webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.wrapper-dropdown .dropd li a {display: block;}
.wrapper-dropdown .dropd li i  {margin-right: 5px;color: inherit;vertical-align: middle;}
.wrapper-dropdown .dropd li:hover a {color: #000;}
.wrapper-dropdown .dropd li:hover {background: #ccc;}
.wrapper-dropdown.active:after {margin-top: 3px;transform: rotate(-135deg) translateY(-50%);}
.wrapper-dropdown.active .dropd {opacity: 1;visibility: visible;pointer-events: all;transform: translateY(0);}
.wrapper-dropdown.active .dropd::before {position: absolute;display: block;content: '';bottom: 100%;right: 22px;
 width: 12px;height: 12px;margin-bottom: -4px;border-top: 1px solid #b5b5b5;border-left: 1px solid #b5b5b5;
 transform: rotate(45deg);transition: all .4s ease-in-out;}
.no-opacity .wrapper-dropdown .dropd, .no-pointerevents .wrapper-dropdown .dropd {display: none;pointer-events: auto;}
.no-opacity .wrapper-dropdown.active .dropd, .no-pointerevents .wrapper-dropdown.active .dropd {display: block;}
.activities-menu-wrap {list-style: none;padding: 20px 0;margin: 0;text-align: center;}
.activities-menu-wrap li {display: inline-block;padding: 0 15px;}
.activities-menu-wrap li a span {vertical-align: middle;display: inline-block;padding-left: 10px;font-size: 18px;font-weight: 500;color: #565656;}
.activities-menu-wrap li a svg {display: inline-block;vertical-align: middle;}
.activities-menu-wrap li a svg .a {fill:#565656;}
.activities-menu-wrap li a:hover svg .a {fill:#0088d5;}
.activities-menu-wrap li a:hover span {color:#0088d5;}
.activities-menu-active svg .a {fill:#0088d5!important;}
.activities-menu-active span {color:#0088d5!important;}
.calendar-firstmenu {border-right: 1px solid #C8C8C8;}
#calendar {background: #fff;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;margin: 15px 0 35px 0;}
#calendar * {font-family: 'IBM Plex Sans Thai'!important;}
#calendar .fc-button-primary {border-radius: 50px;;color: #0088D5;background-color: #fff !important;border-color: #0088D5 !important;border-right-color: rgb(0, 136, 213);}
#calendar .fc-toolbar.fc-header-toolbar {padding: 1.5em;margin-bottom: 0!important;}
#calendar .fc-toolbar h2 {font-size: 25px;color: #565656;font-weight: 500;text-align: center;}
#calendar th.fc-day-header {padding: 10px!important;}
#calendar .btn-primary {border-radius: 50px;color: #0088D5;background-color: #fff!important;border-color: #0088D5!important;}
#calendar .fc-prev-button {border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;border-right: 1px solid #0088D5!important;}
#calendar .fc-next-button {border-top-left-radius: 0!important;border-bottom-left-radius: 0!important;}
#calendar .fc-today-button,.fc-button-primary:disabled {color: #fff;background-color: #0088D5!important;border-color: #0088D5!important;border-radius: 50px!important;}
#calendar .fc-next-button:hover,#calendar .fc-prev-button:hover {background-color: #0088D5!important;color: #fff!important;}
#calendar td.fc-day {padding: 10px!important;}
#calendar .fc-content .fc-title {color: #686868!important;font-size: 14px!important;
  background: url(../images/icon/calendar-list-bullet.svg) no-repeat left top 6px; padding-left: 17px;}
.calendar-detail-list li a {font-size: 16px;}
#calendar .fc-event-container a:hover .fc-content .fc-title {color:#0088D5!important;cursor: pointer;}
#calendar .fc-content-skeleton td {padding: 0 10px !important;}
#calendar .fc-header-toolbar .fc-left,#calendar .fc-header-toolbar .fc-right {width: 50%;text-align: right;}
#calendar .fc-row table,#calendar .fc-head-container,#calendar .table-bordered {border-color: #ddd;}

.filter-search-wrap select {margin-top: 5px;border-radius: 50px;color: #8B8B8B;
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;}
.filter-search-wrap input {margin: 5px 0;border-radius: 50px !important;color: #8B8B8B;}
.gj-datepicker [role="right-icon"] {position: absolute;right: 10px;background: unset;border: none;}
.gj-datepicker-bootstrap [role="right-icon"] button {border: none!important;}
.filter-search-wrap {background: #fff;padding: 20px;}
.filter-search-wrap .col-md-3 {width: 22.5%;}
.filter-search-wrap .col-2 {width: 10%;}
.filter-search-wrap .btn-form-blue {margin-bottom: 5px;}
.activities-list-wraper .list-item-box,.clip-list-wraper-section .list-item-box,
.articles-list-wraper-section .list-item-box  {padding-bottom: 35px;}
.page-list-wrap {text-align: center;margin: 0 auto;}
.page-list {display: inline-block;}
.page-list svg .a{fill:none;stroke:#0088d5;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}
.page-list a {margin: 0 10px;text-align: center;display: block;color: #000;font-size: 16px;font-weight: 500;}
.page-prev a,.page-next a {padding: 5px 15px;}
.page-list a:hover {color: #0088d5;}
.page-prev a:hover svg .a,.page-next a:hover svg .a {fill:none;stroke:#fff;}
/*.page-prev a:hover,.page-next a:hover {background: #0088d5;border-radius: 50px;}*/
.page-active a {color: #0088d5!important;}
#banner-main-knowledge .owl-nav.disabled + .owl-dots {z-index: 99;position: absolute;bottom: 5px;left: 50%;transform: translate(-50%, 0);}
#banner-main-knowledge .owl-dot span {border: 1px solid rgba(0, 0, 0, 0.22); background: rgba(0, 0, 0, 0.22);width: 50px;height: 6px;margin: 5px 10px;}
#banner-main-knowledge .owl-dot.active span, #banner-main-knowledge .owl-dot:hover span {background: #0088D5; border: 1px solid #0088D5;}
.section-banner-inner {position: relative;padding-top: 20px;}
.section-banner-inner-card {position: relative;margin-top: 25px;}
.knowledge-wrap-bg {background-color: #fff!important;padding-bottom: 0!important;}
.articles-list-wraper-section {background: #F3F9FE;padding: 50px 0 60px 0;}
.clip-list-wraper-section {background: #fff;padding: 50px 0 60px 0;}
.subtitle-view-inner {font-size: 34px;color: #616161;padding-bottom: 0;margin: 0;font-weight: 600;text-align: center;}
.articles-list-wraper-section .btn-view-all,.clip-list-wraper-section .btn-view-all {padding-top: 0;}
.article-box-L {min-height: 900px;}
/*.article-box-R {width: 30%;float: left;}*/
.sidebar-fix-style .content-wrap {overflow: unset;}
.sidebar-section {position: absolute;height: 100%;width: 100%;}
.sidebar-item {position: absolute;top: 0;left: 0;width: 100%;}
.has-2-items {position: relative;margin-bottom: 200px;}
.has-2-items .sidebar-item {height: 90%;}
.make-me-sticky {position: -webkit-sticky;position: sticky;top: 0;}
.box-content-menu {padding-top: 35px;}
.sticky-blog .box-content-menu {padding-top: 95px;}
.titlemain-pagemenu {font-size: 25px;font-weight: 500;padding-bottom: 10px;}
.blog-lastest-list {padding-bottom: 15px;}
.blog-lastest {padding-left: 25px;}
.btn-view-all-stick {display: block;text-align: left;padding: 0;}
.btn-view-all-stick a {display: inline-block;font-size: 16px;font-weight: 500;color: #000000;}
.btn-view-all-stick img {margin-left: 10px;}
.btn-view-all-stick a:hover {padding-left: 20px;}
.video-box {padding: 25px 0 35px 0;}
.blog-lastest-txt {font-size: 16px;font-weight: 500;line-height: 1.2;}
.login-section-wrap {min-height: 100vh;padding-top: 90px;}
.login-section-wrap .section-inner-wrap {padding: 20px 0 85px 0;
  background: url(../images/member/login-bg-new.jpg) no-repeat fixed top 70px center;background-size: cover;}
/*.login-section-wrap .section-inner-wrap {padding: 20px 0 145px 0;
  background: url(../images/member/login-bg.jpg) no-repeat fixed top 90px right;min-height: 90vh;}*/
.login-nav .navdefault {color: #fff!important;}
#navwrap.login-nav a {color: #fff;}
.box-login {background: rgba(255, 255, 255, 0.7);padding: 60px;margin: 60px 0 0 0;width: 500px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.form-login-wrap input.form-control {position: relative;border-radius: 50px;}
.form-login-wrap label {padding: 15px 0 5px 0;font-size: 16px;font-weight: 500;color: #616161;}
.box-relative {position: relative;}
.show-hide-pw {position: absolute;right: 20px;top: 7px;opacity: 0.4;}
.btn-login {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 10px;margin-top: 25px;}
.btn-login-facebook {width: 100%;display: block;background: #3B5998;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 10px;margin-top: 20px;}
.btn-login:hover ,.btn-login-facebook:hover {background: #00A3FF}
.btn-login-gmail {font-size: 16px;font-weight: 400;text-align: center;margin-top: 25px;}
.btn-login-gmail span {padding-left: 5px;display: inline-block;vertical-align: middle;}
.login-regis-fogot {text-align: center;margin-top: 25px;}
.login-regis-fogot a {margin: 0 10px;font-weight: 500;}
.label-or {margin-top: 25px;font-size: 16px;color: #000000;text-align: center;}
.box-register {background: rgba(255, 255, 255, 0.95);padding: 60px;width: 100%;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.box-register-login {background: rgba(255, 255, 255, 0.95);padding: 60px;width: 100%;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.register-box-wrap {margin: 20px 0;position: relative;}
.btn-form-blue {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 10px;}
.btn-form-blue:hover {background: #00A3FF}
.select-form {margin-top: 5px;border-radius: 50px!important;color: #8B8B8B!important;
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;}
.remark-form {color: #FF5D5D;font-weight: 500;padding: 15px 0 10px 0;}
.consent-txt {font-weight: 500;}
.policy-form-check label {padding-top: 0!important;font-weight: 500;}
.consent-txt a {color: #0088D5;text-decoration: underline!important;}
.consent-txt a:hover{color: #00A3FF;}
.btn-form-submit {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 25px;margin: 15px 0 20px 0;min-width: ;}
.btn-form-submit:hover {background: #00A3FF}
.label-or-regis {text-align: center;font-size: 30px;font-weight: 600;color: #616161;}
.form-interest-wrap {padding-top: 25px;}
.form-interest-wrap .form-check {margin-bottom: 15px;}
.txt-blue {color: #0088D5!important;}
.regis-subtitle {font-size: 25px;color: #616161;}
.regis-thank-txt {font-size: 20px;}
.btn-default {display: inline-block;text-align: center;}
.btn-default a {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 25px;}
.btn-default a:hover {background: #00A3FF;}
.boxwrap-shadow {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.box-member {padding: 25px;background: #fff;}
.box-hello-member {padding: 15px;}
.badge-member-name {font-size: 20px;font-weight: 500;color: #000000;display: block;}
.badge-member-status {font-size: 20px;font-weight: 500;color: #000000;display: block;line-height: 25px;padding-left: 10px;}
.badge-member-status span {font-size: 25px;color: #976400;display: block;}
.member-data-wrap {padding-bottom: 15px;width: 90%;margin: 0 auto;}
.sub-member-title {font-size: 20px;color: #000000;font-weight: 500;}
.box-member-points-status {font-size: 20px;color: #0088D4;font-weight: 500;text-align: right;}
/*.member-data-L {width: 25%!important;}
.member-data-C {width: 25%!important;}
.member-data-R {width: 50%!important;}*/
.box-member-edit {background: rgba(255, 255, 255, 0.95);padding: 60px;width: 100%;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;margin-top: 35px;}
.btn-close-back {position: absolute;right: 0;top: 50px;z-index: 3;}
.btn-close-back a svg .a {fill:none;stroke:#707070;stroke-width:2px;}
.btn-close-back a:hover svg .a {stroke:#0088D5;}
.form-interest-wrap label {padding: 0!important;}
label.labelhead-checkbox {padding: 0 0 15px 0!important;}
.unsubscript-box {text-align: right;}
.unsubscript-box a {margin: 0;font-weight: 500;font-size: 16px;}
.unsubscript-box a span {padding: 10px;}
.box-profile {position: relative;padding-top: 35px;}
.profile-image-wrap {padding-right: 35px;}
.profile-image-box {border: 15px solid #fff;margin-bottom: 20px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;width: 400px;height: 400px;
overflow: hidden;max-width: 100%;max-height: 100%;}
.box-badge-profile {padding-bottom: 25px;border-bottom: 1px solid #ccc;margin-bottom: 25px;}
.box-profile-detail,.box-profile-detail-edit {padding-bottom: 15px;}
.subtitle-blue {font-size: 23px!important;color: #0088D5!important;font-weight: 500!important;padding-bottom: 20px;}
.box-profile-detail p,.box-profile-detail p *,.box-profile-detail ul li,.box-profile-detail ul li * {font-size: 16px!important;color: #505050;}
.box-profile-detail p a {color: #0088D5;text-decoration: underline!important;}
.box-profile-detail ul {margin: 0;list-style-type: none;padding: 0;margin-top: -10px;}
.box-profile-detail ul > li {padding-left: 15px;}
.box-profile-detail ul > li:before {content: "-";margin-left: -10px;padding-right: 5px;}
.label-badge {font-size: 16px;color: #959595;font-weight: 500;text-align: right;width: 100%;padding-top: 5px;}
.label-badge img {padding-right: 5px;}
.bar-complete {color: #0088D4!important;}
.progress-bar-badge .progress {border-radius: 50px;height: 20px;}
.progress-bar-badge .progress-bar {background-color: #0088D4;border-radius: 50px;}
.progress-bar-badge {padding: 15px 0 30px 0 !important;}
.benefit-wrap {padding: 20px 0 0 0;}
.benefit-detail {margin: 0;list-style-type: none;padding: 0;}
.benefit-detail > li {padding-left: 15px;}
.benefit-detail > li:before {content: "-";margin-left: -10px;padding-right: 5px;}
.score-redemption-circle {border: 7px solid #CFCFCF;width: 132px;height: 132px;text-align: center;display: flex;flex-wrap: wrap;
  align-items: center;justify-content: center;border-radius: 100%;margin: 15px auto;}
.score-redemption-txt {font-size: 25px;color: #959595;font-weight: 500;line-height: 25px;}
.score-redemption-txt span {display: block;}
.score-redemption-box {height: 100%;}
.member-detail-short {padding-top: 25px;}
.member-profile-image-box {border: 5px solid #fff;margin: 0;height: 228px;overflow: hidden;}
.member-profile-interest-box {padding: 20px;height: 228px;overflow: auto;}
.member-profile-interest-head {font-size: 20px;font-weight: 500;color: #000000;}
.join-activities-list-row {position: relative;border-bottom: 1px solid #CFCFCF;padding: 0 0 20px 0;margin-bottom: 15px;}
.box-member-join-activities {padding-top: 10px;}
.join-activities-list-row .row {padding-top: 10px!important;}
.btn-end-activities {position: absolute;right: 10px;bottom: 20px;}
.btn-end-activities a {width: 100%;display: block;background: #0088D5;color: #fff !important;font-size: 16px;
    font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px;}
.btn-join  {right: 110px;}
.btn-cancel-join a { background: #ec7f23}
.btn-gray a {background: #555 !important; cursor: default;}
.btn-confirm a {background:#0088D5 !important; cursor: default;}
.note-editable, .note-toolbar {background: #fff !important}
.btn-end-activities a:hover {background: #00A3FF;}
.badge-member-hello {font-size: 25px;font-weight: 500;color: #000000;display: block;line-height: 30px;}
.badge-member-hello span {color: #0088D5;}
.edemption-point-expire {padding-bottom: 15px;color: #000000;font-weight: 500;}
.podcast-wrapper-inner {padding-top: 20px;}
.podcast-list-item-box-inner * {font-size: 16px;}
.podcast-list-item-box-inner {display: inline-block;width: 20%;padding: 0 35px 25px 0;}
.podcast-list-item-box-inner a:hover .podcast-list-item-cover:after {opacity: 1;}
.subtitle-inner {font-size: 30px;font-weight: 500;color: #616161;margin: 0;}
.podcast-relate-box {padding-top: 50px;}
.podcast-section-inner {background: url(../images/bg-main-inner.svg) no-repeat top left,url(../images/podcast/podcst-bg.svg) no-repeat bottom center;padding: 115px 0 50px 0;background-color: #F3F9FE;}
.box-share-story {padding: 35px 0;}
.share-brief {background: #fff;padding: 25px 25px 15px 25px;}
.share-brief img {margin-bottom: 25px;}
.form-share-story-wrap .form-check {margin-bottom: 15px;}
.form-share-story-wrap label {padding: 0}
.form-share-story {padding-left: 50px;}
textarea {border-radius: 12px!important;}
.btn-bluegreen {background: #17A2B8;}
.search-book-wrap {position: relative;}
.box-sear-boox-main {display: flex;flex-wrap: wrap;justify-content: center;padding-top: 15px;}
.btn-review {display: inline-block;padding-right: 15px;}
.btn-review a {display: block;background: #17A2B8;text-align: center;color: #fff!important;padding: 7px 35px;border-radius: 50px;height: 41px;}
.btn-review a span {padding-left: 5px;display: inline-block;vertical-align: middle;}
.btn-review a:hover {background: #00A3FF;}
.list-item-title-review {padding: 15px 0 0 0;font-size: 16px;font-weight: 500;margin: 0 0 5px 0; min-height: 55px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
overflow: hidden;}
.list-item-review-by {font-size: 16px;font-weight: 500;padding-bottom: 8px;}
.review-book-section-wrap .list-item-box  {padding: 0 0 35px 0;}
#book-review .width-between {width:22% !important;}
.review-book-section-wrap {width: 100%;}
.form-control {padding: 3px 10px!important;}
.menu-book-review .nav-link {color: #000000;background-color: unset!important;border: none;padding: 5px 10px 5px 0;margin-right: 10px;font-size: 20px;}
.menu-book-review .nav-pills .nav-link.active, .menu-book-review .nav-pills .show > .nav-link {color: #0088D5;background-color: unset!important;}
.bookreview-detail-txt {background: rgba(255, 255, 255, 0.95);padding: 35px;width: 100%;height: 100%;margin-left: 35px;}
.bookreview-detail-wrap {padding: 10px 0 35px 0;}
.review-title {font-size: 20px;color: #0088D5;font-weight: 500;display: block;}
.review-title-review {font-size: 25px;color: #0088D5;font-weight: 500;display: block;}
.bookreview-detail-txt p,.bookreview-detail-review p {margin-bottom: 25px;}
.cardgame-detail-review p {margin-bottom: 25px;line-height: 1.5;}
.cardgame-detail-review ul {list-style: decimal;padding-bottom: 25px;}
.cardgame-detail-review ul li {font-size: 16px;font-family: 'IBM Plex Sans Thai';color: #616161;font-weight: 400;margin-bottom: 5px;}
.draft-review-list {padding: 0 0 25px 15px;background: url(../images/icon/list-bullet.svg) no-repeat top 6px left;border-bottom: 1px solid #ddd;margin-top: 25px;}
.draft-review-list h2 {font-size: 18px;font-weight: 400;color: #565656;margin: 0;}
.draft-review-list-wrap {padding-top: 10px;}
.map-search-box {padding-top: 25px;}
.btn-form-search {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 5px 25px;}
.btn-form-search:hover {background: #00A3FF}
.map-api-wrap {padding-top: 35px;}
.box-map-list {height: 450px;overflow: auto;background: #fff;padding: 0 25px;margin-right: 25px;}
.map-detail {display: flex;flex-wrap: nowrap;justify-content: start;align-items: start;padding-top: 10px;}
.map-detail img {margin-right: 10px;}
.map-list-title {font-size: 20px;font-weight: 500;color: #000000;}
.map-list-row {padding: 20px 0;border-bottom: 1px solid #E5E5E5;}
.box-map-form-img {margin-right: 25px;}
.policy-wrap {padding-top: 15px;}
.policy-title {font-size: 20px;color: #000;font-weight: 500;padding: 20px 0 10px 0;}
.table-cookie {background: #fff;}
.table-cookie table th {font-weight: 500;padding: 15px;}
.table-cookie table td {padding: 15px;}
.policy-wrap p, .policy-wrap ul li {color: #505050;font-size: 16px;}
.policy-wrap ol {list-style-type: none;counter-reset: item;margin-left: 0;padding: 0;}
.policy-wrap ol > li {color: #0088D5;font-size: 18px;display: table;counter-increment: item;margin-bottom: 0.6em;font-weight: 500;}
.policy-wrap ol > li::before {content: counters(item, ".") ". ";display: table-cell;padding-right: 0.6em;}
.policy-wrap li ol > li::before {content: counters(item, ".") " ";}
.search-page-head {background: rgba(0, 136, 214, 0.2);margin-top: -22px;padding: 22px 0 50px 0;;}
.search-page-search-box input {margin: 5px 0;border-radius: 50px !important;color: #8B8B8B;}
.search-page-wrap {padding: 50px 0 35px 0;}
.search-result-list {padding: 20px 0;border-bottom: 1px solid #D2D7DB;}
.search-result-title {font-size: 18px;font-weight: 500;color: #505050;}
.search-tag-wrap label {font-size: 16px;color: #7A7A7A;font-weight: 500;display: inline-block;padding-right: 5px;}
.search-tag-list {display: inline-block;}
.search-tag-list ul {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.search-tag-list ul li {display: inline-block;font-size: 16px;color: #7A7A7A;padding-right: 5px;}
.search-result-list a:hover .search-result-title {color: #007CC2!important;}
.faq-list-wrap {width: 60%;margin: 0 auto;padding: 15px 0;}
.faq-arrow svg .a {fill:none;stroke:#C1C1C1;stroke-width:2px;}
.faq-list a:hover .faq-arrow svg .a {stroke:#0088d4;}
.faq-question {font-size: 25px;margin: 0;}
.faq-list {margin-bottom: 20px;}
.faq-list a {display: flex;flex-wrap: wrap;align-items: center;background: #fff;padding: 25px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.faq-icon, .faq-title, .faq-arrow {display: inline-block;}
.faq-icon {width: 9%;}
.faq-title {width: 76%;}
.faq-arrow {width: 15%;text-align: right;}
.faq-list a:hover .faq-arrow {margin-left: -15px;}
.faq-detail-box-head {margin-top: 15px;display: flex;flex-wrap: wrap;align-items: center;background: #fff;padding: 25px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.faq-icon-inner {width: 70px;}
.faq-title-inner {width: 90%;}
.faq-title h2 {font-size: 25px;margin: 0;}
.faq-inner-wrap {padding: 35px 0 25px 0;}
.faq-inner-wrap img {margin-bottom: 35px;}
.faq-inner-wrap p img {vertical-align: middle;margin: 0 10px;padding: 0!important;}
.sub-title-redem {font-size: 20px;font-weight: 500;color: #000000;}
.sub-title-redem.margin-top-tag {margin-top: 45px;}
.redemtion-list-wraper .list-item-box {padding-bottom: 35px;}
.redemtion-point {font-size: 16px;font-weight: 600;color: #0088D5;}
.redemtion-detail-txt {background: rgba(255, 255, 255, 0.95);padding: 35px;width: 100%;height: 100%;margin-left: 15px;}
.redemtion-detail-wrap {padding: 25px 0;}
.redem-point-inner {font-size: 30px;font-weight: 600;color: #0088D5;/*padding-bottom: 15px;*/}
.redemtion-term ul {list-style: disc;font-size: 16px;color: #505050;}
.redem-confirm-box-wrap {background: #fff;}
.redem-confirm-box-address {padding: 25px;border-bottom: 1px solid #E5E5E5;}
.redem-confirm-data {color: #777777;font-size: 16px;}
.redem-confirm-data label {margin-bottom: 15px;padding-left: 10px;}
.redem-confirm-data span {padding-right: 10px;}
.redemtion-product-name {font-weight: 500;color: #616161;padding-bottom: 10px;font-size: 16px;}
.redemtion-product-point {font-weight: 500;color: #0088D5;font-size: 16px;}
.redem-total {text-align: right;font-size: 16px;font-weight: 500;color: #505050;padding: 25px;}
.redem-total span {color: #0088D5;padding-left: 25px;}
.calendar-detail-location {display: block;padding-top: 5px;}
.calendar-detail-location img {margin-right: 5px;}
#calendarmodal .modal-title {width: 100%;}
#calendarmodal .modal-header{border: none;padding: 35px 0 5px 0;}
.calendar-detail-list-box {border-bottom: 1px solid #dee2e6;padding: 15px 0;}
#calendarmodal .modal-footer {border: none;}
.calendar-detail-list-box a {background: url(../images/icon/calendar-point-green.svg) no-repeat left top 5px;padding-left: 20px;display: block;}
#calendarmodal .modal-dialog {width: 800px;max-width: 90%!important;margin: 0 auto;}
#calendarmodal .modal-body {padding: 25px;}
.box-member-profile {padding: 35px;}
.member-badge-box {display: flex;align-items: center;}
.member-topfan-bg {background: #BBE6FF;height: 100%;}
.member-friend-bg {background: #FFFFFF;height: 100%;}
.member-lover-bg {background: #F9FFD8;height: 100%;}
.member-bestfriend-bg {background: #FFF3E5;height: 100%;}
.member-topfan-bg .member-profile-interest-box {background: #A1DAFB;}
.member-friend-bg .member-profile-interest-box {background: #F5F5F5;}
.member-lover-bg .member-profile-interest-box {background: #ECF5BD;}
.member-bestfriend-bg .member-profile-interest-box {background: #FFE7CB;}
.badge-status-logo {width: 55px;}
.btn-member-profile {width: 49%;display: inline-block;text-align: center;padding-top: 10px;}
.btn-member-profile a {width: 100%;display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 25px;}
.btn-member-profile a:hover {background: #00A3FF;}
.member-interest-head span {padding-left: 10px;}
a.btn-bluegreen {background: #17A2B8;}
.member-interest-box {margin-top: 30px;padding: 30px 0 15px 0; border-top: 1px solid #FFFFFF;}
.member-interest-head span {padding-left: 10px;font-size: 20px;font-weight: 500;color: member-interest-head;}
.member-interest-list {list-style-type: none;padding-left: 15px;margin: 15px 0 0 0;column-count: 3;
font-weight: 300;column-gap: 40px;}
.member-interest-list li:before {content: '-';position: absolute;margin-left: -15px;}
.member-interest-list li {font-size: 16px;color: #646464;position: relative;}
.w-100 {width: 100%;}
.box-member-e-card {background-size: cover;padding: 25px 25px 70px 25px;height: 100%;}
.e-card-logo {text-align: center;}
.e-card-head {text-align: center;color: #5E5E5E;font-size: 20px;font-weight: 500;}
.e-card-qr {text-align: center;padding: 30px 0 5px 0;}
.e-card-name {font-size: 20px;font-weight: 500;color: #58595b;text-align: center;}
.e-card-detail {font-weight: 500;color: #949598;font-size: 18px;line-height: 25px;}
.e-card-detail .row {padding-top: 0;}
.box-member-points-detail {background: url(../images/member/point-detail-bg.jpg) no-repeat bottom right #fff;
  background-size: contain;}
.box-member-ativities-join {background: url(../images/member/activities-joined-bg.jpg) no-repeat bottom right #fff;
  background-size: contain;}
.member-view-detail-txt {width: 65%;text-align: center;padding: 43px 0;}
.member-view-detail-title-main {font-size: 25px;font-weight: 500;color: #000000;}
.member-view-detail-title-sub {font-size: 40px;font-weight: 500;color: #0088D5;line-height: 50px;}
.btn-member-view-detail {display: block;text-align: center;padding-top: 10px;margin: 0 auto;width: 200px;}
.btn-member-view-detail a {display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;
border-radius: 50px;padding: 7px 25px;}
.btn-member-view-detail a:hover {background: #00A3FF;}
.point-activities-box {background: #fff;padding: 31px 0;text-align: center;margin-bottom: 10px;}
.point-activities-icn,.point-activities-cate,.point-activities-count {display: block;width: 100%;}
.point-activities-icn {padding-bottom: 10px;min-height: 65px;}
.point-activities-cate {font-size: 20px;color: #646464;}
.point-activities-count {font-size: 20px;color: #00A3FF;}
.redemtion-list-wraper .list-item-title {min-height: 53px;}
.bor-radius {border-radius: 50px!important;}
.redem-detail-img {height: 100%;}
.member-club-logo {margin-top: 25px;display: block;}
.member-profile-interest-btn {margin-top: 33px;display: flex;flex-wrap: nowrap;justify-content: space-between;}
.member-detail-short .col-sm-4 {width: 30%;}
.member-detail-short .col-sm-8 {width: 70%;}
.member-data-wrap .member-data-L {width: 73%;}
.member-data-wrap .member-data-R {width: 27%;}
.club-status-box {padding: 35px 0 15px 0;}
.club-status-wrap {display: flex;flex-wrap: wrap;align-items: center;}
.club-status-logo {display: inline-block;}
.club-status-txt {display: inline-block;padding-left: 5px;}
.club-status-title {font-weight: 600;color: #4B4B4B;font-size: 16px;line-height: 20px;}
.club-status-point {font-size: 15px;color: #7D7D7D;font-weight: 500;line-height: 20px;}
.club-logo-st-active {display: none;}
/*.club-st-active .club-status-title {color: #BFD83F!important;}*/
.club-st-active .club-logo-st-namal {display: none!important;}
.club-st-active .club-logo-st-active {display: block!important;}
.btn-more-activities {display: block;text-align: center;margin-top: 35px;}
.btn-more-activities a {display: inline-block;text-align: center;color: #000000;font-weight: 500;}
.btn-more-activities a img {display: block;margin: 10px auto 0 auto;}
.show-mb {display: none;}
.pop-getpoint-detail h2 {font-size: 25px;font-weight: 500;margin: 0;line-height: 35px;}
#getpoint-detail {width: 50%;padding: 0;}
.pop-getpoint-detail-table {overflow-x: hidden;background: #fff;padding: 25px 35px;font-size: 17px;}
.pop-getpoint-detail-table .row {padding-bottom: 15px;}
.pop-getpoint-detail-table .col-3 {text-align: right;font-weight: 500;color: #505050;}
.pop-getpoint-detail-table .row .row {padding: 5px 0 0 0!important;}
.pop-getpoint-detail-table b {font-weight: 500;color: #505050;}
.box-profile .subtitle-blue {padding-bottom: 5px;}
.box-profile .profile-image-box img {width: 100%;}
.box-short-introduce  {display: none;}
.point-activities-wrapper {padding-top: 35px;}
.point-activities-wrapper .col-lg-7 {width: 55%;}
.point-activities-wrapper .col-lg-5 {width: 45%;}
#clubstatus-point1.club-st-active .club-status-title {color: #888888!important;}
#clubstatus-point2.club-st-active .club-status-title {color: #D49142!important;}
#clubstatus-point3.club-st-active .club-status-title {color: #BFD83F!important;}
#clubstatus-point4.club-st-active .club-status-title {color: #0088D5!important;}
.swal2-popup {padding: 35px 25px!important;}
.box-levels {
    margin-top: 13px;
    margin-bottom: 13px;

}

.box-levels span {
    font-size: 20px;
    color: #565656 !important;
    font-family: 'IBM Plex Sans Thai';
    font-weight: 500;
}

.levels-circle {
    color: #085588;
    font-size: 22px;
    line-height: 25px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 8px;
}
.levels-circle i {margin-right: 7px;}
.remark-levels {list-style: none;padding: 0 0 15px 0;display: flex;flex-wrap: wrap;align-items: center;}
.remark-levels li {padding: 0 25px 0 0;font-size: 18px;}
.remark-levels li i {margin-right: 5px;color: #085588 !important;}
.remark-levels li span {display: inline-block;vertical-align: middle;}
.card-item-cover {position: relative;margin: 0 auto;text-align: center;overflow: hidden;background: #fff;}
.card-item-cover:after {z-index: 2;opacity: 0;position: absolute;width: 100%;height: 100%;content: "";
  top: 0;left: 0;background: url(../images/icon/view-detail.svg) no-repeat center rgba(0, 123, 194, 0.65);}
.list-item-box a:hover .card-item-cover:after {opacity: 1;}
.cardgame-detail-review a {color: #007bff;}
.cardgame-detail-review a:hover {color: #0056b3;}
.cardgame-list-wraper-section {background: #f3f9fe!important;padding: 50px 0 35px 0;}
.card-game-quiz-head {font-size: 25px;color: #0088D5;font-weight: 500;display: block;margin-bottom: 15px;}
.btn-quiz {width: auto!important;color: #fff!important;}
.btn-quiz img {width: 20px;margin-right: 5px;}
.btn-quiz:hover {background-color: #00A3FF;border-color: #00A3FF;box-shadow: 0px 5px 10px rgba(0, 136, 213, 0.6);}
.form-game {margin-top: 10px;}
.emoji-action {display: block;margin-bottom: 25px;}
.game-point {font-size: 30px;color: #555555;margin-bottom: 15px;font-weight: 500;}
.game-action-box {padding: 70px 0 50px 0;}
.btn-game {color: #fff!important;padding: 8px 50px;background: #0088D5;text-transform: uppercase;font-size: 16px;border-radius: 50px;text-align: center;border: none;display: inline-block;}
.btn-game:hover {background-color: #00A3FF;border-color: #00A3FF;box-shadow: 0px 5px 10px rgba(0, 136, 213, 0.6);}
.remark-again {font-size: 25px;color: #EE7E22;display: block;margin-bottom: 30px;}
.section-campaign {padding: 30px 0 0 0;}
.campaign-wrap-detail h2,.campaign-wrap-detail h2 *,.campaign-wrap-detail h3,.campaign-wrap-detail h3 * {
  font-size: 20px !important;color: #0088D5 !important;font-weight: 500 !important;display: block;}
.campaign-wrap-detail p,.campaign-wrap-detail p * {font-size: 16px !important;color: #616161 !important;font-weight: 400 !important;font-family: 'IBM Plex Sans Thai' !important;
line-height: 1.8;}
.campaign-list {padding: 50px 0 0 0;}
.campaign-list-item-cover {position: relative;margin: 0 auto;text-align: center;height: 226px;overflow: hidden;}
.campaign-list-item-cover:after {z-index: 2;opacity: 0;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;background: url(../images/icon/view-detail.svg) no-repeat center rgba(0, 123, 194, 0.65);}
.campaign-list-item-cover img {position: absolute;left: 50%;top: 50%;right: 50%;bottom: 50%;z-index: 1;width: auto;
  height: 100%;max-width: 100%;-o-object-fit: cover;object-fit: cover;transform: translate(-50%, -50%)}
.list-item-box a:hover .campaign-list-item-cover:after {opacity: 1;}
.campaign-book-name {padding: 10px 0 0 0;font-size: 16px;font-weight: 500;line-height: 1.3;min-height: 55px;overflow: hidden;    text-align: left;}
.campaign-book-price-wrap {display: flex;align-items: center;justify-content: start;}
.campaign-book-price-wrap p {margin-bottom: 5px;}
.campaign-book-price-detail {display: flex;align-items: center;}
.campaign-book-price {color: #0088d5;font-size: 14px;}
.campaign-book-price-dis {color: #aaa;text-decoration: line-through;text-overflow: ellipsis;font-size: 16px;padding-left: 5px;}
.campaign-book-price-discount {color: #FF0000;font-size: 16px;padding-left: 5px;}
.box-qty {
    display: flex;
    justify-content: start;
    align-items: center;
}
/* +/- quantity */
.number-input input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.number-input {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.number-input button {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}
.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    height: 2px;
    transform: translate(-50%, -50%);
}
.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
    text-align: center;
}
.number-input.number-input {
    border: 1px solid #ced4da;
    width: 10rem;
    border-radius: .25rem;
}
.number-input.number-input button {
    width: 10.6rem;
    height: .7rem;
    outline: none;
}
.number-input.number-input button:before,
.number-input.number-input button:after {
    width: .7rem;
    background-color: #495057;
}

.number-input.number-input input[type=number] {
    max-width: 4rem;
    padding: 0 1.5rem;
    border: 1px solid #ced4da;
    border-width: 0 1px;
    font-size: 1rem;
    height: 1.7rem;
    color: #495057;
}
.campaign-list-add {padding-top: 20px;text-align: left;}
.popup-book-detail-head {font-size: 16px !important;color: #0088D5 !important;font-weight: 500 !important;display: block;margin: 0;}
.popup-book-detail-nofix,.popup-book-detail-nofix * {font-size: 16px !important;color: #616161 !important;font-weight: 400 !important;font-family: 'IBM Plex Sans Thai' !important;
line-height: 1.8;}
.popup-book-detail-fix {list-style: none;padding: 20px 0 0 0;margin: 0;}
.popup-book-detail-fix li {font-size: 16px !important;color: #616161 !important;font-weight: 400 !important;
font-family: 'IBM Plex Sans Thai' !important;line-height: 1.8;}
#campaign-list-detail .modal-dialog {max-width: 700px;}
.campaign-review {display: flex;justify-content: start;align-items: center;}
.campaign-review a {color: #707070;padding-right: 12px;}
.campaign-review a span {vertical-align: middle;font-size: 14px;padding-left: 5px;}
.campaign-icn-cart {padding-left: 12px;}
.border-left {border-left: 1px solid #dee2e6 !important;}
.campaign-list .list-item-box {margin-bottom: 35px;}
.campaign-sub-title,h2.campaign-sub-title {font-size: 25px!important;color: #0088D5;font-weight: 500;display: block;}
.open-button {
  background-color: #0088d5;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 30px;
  right: 95px;
  width: 280px;
  z-index: 3;
  -webkit-appearance: button;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
.cart-popup {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 95px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  background: #fff;
  width: 325px;
  overflow: auto !important;
}
#formCart {
  max-width: 320px;
  padding: 10px;
  background-color: white;
  position: relative;
}
.campaign-cart-list {border: 0px solid #aaa;height: 415px;overflow-x: hidden;overflow-y: auto;margin-top: 15px;
}
.btn-form-popup {
  position: fixed;
  bottom: 27px;
  background: #fff;
  display: list-item;
  width: 310px;
  list-style: none;
  padding-right: 15px;
  border-top: 1px solid #ccc;
}
#formCart .btnn {
  background-color: #b3af34;
  display: inline-block;
  color: white;
  text-align: center;
  vertical-align: middle;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
  border-radius: 3.3rem;
  bottom: 0;
}
#formCart .btn {
  background-color: #0088D5;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
  border-radius: 3.3rem;
}
#formCart .cancel {
  background-color: red;
}
.campaign-cart-list-wrap {
  padding: 0 0 15px 0;
  margin: 0;
  border-bottom: 1px solid #D1D1D1;
  margin-bottom: 15px;
  border-bottom: 1px solid #D1D1D1;
  position: relative;
}
.campaign-cart-list-wrap .row {
  padding: 0;
  margin: 0;
  margin: 0 15px 0 0;
  list-style: none;
}
.campaign-cart-list-wrap:last-child {border-bottom: unset!important;}
.cart-price * {font-size: 14px!important;}
.form-close {
  width: 15px !important;
  position: absolute;
  right: 0px;
  top: 0;
}
.box-gallery-comment ul {
  padding: 0;
  margin: 35px 0;
  column-count: 7;
column-gap: 10px;
}
.box-gallery-comment ul li {
  padding: 5px 0;
  margin: 0;
  list-style: none;
  display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
.container-gallery {
  position: relative;
}
.overlay-gallery {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  border-radius: 5px;
  background: url(../images/icon/search.png) no-repeat center rgba(33, 37, 41, 0.6509803921568628);
  background-size: 30px;
}
.text-gallery {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 30px;
}
.container-gallery:hover .overlay-gallery {
  opacity: 1;
}
.border-top-gallery {
  border-top: 1px solid #ccc;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.name-user {
  font-size: 25px;
  color: #7E7E7E;
}
.ratingControl {
    position: relative;
    height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*    transform: scale(0.3);*/
    width: 124px;
    float: right;
}
.ratingControl input {
    visibility: hidden;
}
.text-rating {
  margin-right: 15px;
  font-size: 25px;
  color: #FFC107;
  margin-top: -8px;
}

/* Stars Rating */
.ratingControl-stars {
    position: absolute;
    top: 0;
    width: 27px;
    height: 65px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EEmpty%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23D5D5D5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");
    /*    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FEC844%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");*/
    background-size: auto 21px;
    background-repeat: no-repeat;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.ratingControl-stars:hover,
.ratingControl-stars:hover~.ratingControl-stars,
input:checked~.ratingControl-stars {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FEC844%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");
}
.ratingControl-stars:active,
.ratingControl-stars:active~.ratingControl-stars,
input:checked~.ratingControl-stars:active {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%20%E2%80%93%20Light%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FFE39C%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");
}
.ratingControl-stars--05 {
    left: 0px;
}
.ratingControl-stars--1 {
    left: 0px;
}
.ratingControl-stars--15 {
    left: 25px;
}
.ratingControl-stars--2 {
    left: 25px;
}
.ratingControl-stars--25 {
    left: 50px;
}
.ratingControl-stars--3 {
    left: 50px;
}
.ratingControl-stars--35 {
    left: 75px;
}
.ratingControl-stars--4 {
    left: 75px;
}
.ratingControl-stars--45 {
    left: 100px;
}
.ratingControl-stars--5 {
    left: 100px;
}
.ratingControl-stars--half {
    width: 11px;
}
/* Stars Rating */

/* Heart Rating */
.ratingControl-heart {
  position: absolute;
  top: 0;
  width: 27px;
  height: 65px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.537' height='13.567' viewBox='0 0 14.537 13.567'%3E%3Cpath id='heart-none-color' d='M7.268,13.567C3.36,10.858,1.311,8.394.47,6.331-1.782.8,4.65-1.839,7.268,1.424c2.618-3.263,9.05-.62,6.8,4.908C13.226,8.394,11.176,10.858,7.268,13.567Z' fill='%23d5d5d5'/%3E%3C/svg%3E%0A");
  /*    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FEC844%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");*/
  background-size: auto 21px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.ratingControl-heart:hover,
.ratingControl-heart:hover~.ratingControl-heart,
input:checked~.ratingControl-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.537' height='13.567' viewBox='0 0 14.537 13.567'%3E%3Cpath id='heart-color' d='M7.268,13.567C3.36,10.858,1.311,8.394.47,6.331-1.782.8,4.65-1.839,7.268,1.424c2.618-3.263,9.05-.62,6.8,4.908C13.226,8.394,11.176,10.858,7.268,13.567Z' fill='%23d90f0f'/%3E%3C/svg%3E%0A");
}
.ratingControl-heart:active,
.ratingControl-heart:active~.ratingControl-heart,
input:checked~.ratingControl-heart:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.537' height='13.567' viewBox='0 0 14.537 13.567'%3E%3Cpath id='heart-none-color' d='M7.268,13.567C3.36,10.858,1.311,8.394.47,6.331-1.782.8,4.65-1.839,7.268,1.424c2.618-3.263,9.05-.62,6.8,4.908C13.226,8.394,11.176,10.858,7.268,13.567Z' fill='%23d5d5d5'/%3E%3C/svg%3E%0A");
}
.ratingControl-heart--05 {
  left: 0px;
}
.ratingControl-heart--1 {
  left: 0px;
}
.ratingControl-heart--15 {
  left: 25px;
}
.ratingControl-heart--2 {
  left: 25px;
}
.ratingControl-heart--25 {
  left: 50px;
}
.ratingControl-heart--3 {
  left: 50px;
}
.ratingControl-heart--35 {
  left: 75px;
}
.ratingControl-heart--4 {
  left: 75px;
}
.ratingControl-heart--45 {
  left: 100px;
}
.ratingControl-heart--5 {
  left: 100px;
}
.ratingControl-heart--half {
  width: 11px;
}
.flex-ratingheart {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-ratingheart .push-top {
  margin-top: 4px;
}
.txt-rating {
  font-size: 20px;	
  color: #0088D5;
  margin-left: 10px;
}
/* Heart Rating */


.day-user {
  font-size: 20px;
  color: #7E7E7E;
}
.icon-like, .icon-like-active {
  float: left;
  font-size: 20px;
  margin-top: 3px;
  margin-right: 10px;
}
.icon-like {
  color: #A8A8A8;
}
.text-like-comment {
  font-size: 20px;
  color: #A8A8A8;
  margin: 0;
}
.float-right {float: right;}
.size-user {
  width: 80px;
  float: left;
  margin-right: 20px;
  margin-top: -7px;
}
.fa-chevron-left::before {
  content: "\2039"!important;
}
.fa-chevron-right::before {
  content: "\203A"!important;
}
.Campaign-form-data .col-lg-2 {width: 12.5%;}
.campaign-data-form-tax {
  padding: 15px 25px 35px 25px;
  border-bottom: 1px solid #E5E5E5;
}
.select-address-cart {padding: 15px 0 0 0 !important;}
.select-address-cart label {color: #777777;font-size: 16px;}
.table-cart-head {padding-bottom: 15px;border-bottom: 1px solid #ddd;}
.table-cart-list-row {padding: 15px 0;border-bottom: 1px solid #ddd;}
.label-table-mobile {display: none;}
.table-cart-list-row {color: #777777;font-size: 16px;}
.cart-list-name {font-weight: 500;color: #616161;padding-bottom: 10px;font-size: 16px;}
.campaign-cart-total {text-align: right;padding-top: 20px;}
.campaign-cart-total span {width: 150px;display: inline-block;}
.catalog-cover {height: auto!important;}
.catalog-cover img {position: relative;}
.main-section-inner .podcast-list-item-box {margin-bottom: 30px;}
.popup-comment-login {display: none;width: 35%;}
.link-login-comment {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;font-size: 20px;width: 100%;}
.link-login-comment a {margin: 0 20px;}
.headpopup-log {font-size: 30px;color: #616161;padding-bottom: 20px;margin: 0;font-weight: 500;text-align: center; color: #0088D5;}
.img-attfile {position: relative;width: 228px;height: 228px;overflow: hidden;margin-top: 25px;}
.review-book-section-wrap .list-item-cover {height: 390px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; -moz-box-shadow:  rgba(149, 157, 165, 0.2) 0px 8px 24px; box-shadow:  rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.btn-review-bar {display: block;padding-right: 0;}
.btn-review-bar a {height: auto;}
.filter-review-bar .col-lg-2 {width: 23%;}
.article-inner-wrap-detail iframe {width:100%;height: 600px;}
.iframe-vote-vertical{max-width:100% !important; width: 600px!important; height: 1100px!important; margin: 0 auto; display: block;}
.swal2-popup .swal2-title {font-size: 25px!important;}
.unoverx {overflow: unset!important;z-index: 4;}
.tagfooter-list {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.tagfooter-list li {display: inline-block;margin-right: 5px;margin-bottom: 5px;}
.tagfooter-list li a {display: block;padding: 5px 7px;text-align: center;font-size: 16px;color: #7A7A7A;border-radius: 50px;
border: 1px solid #ced4da;}
.tagfooter-list li a:hover {background: #0088D5;color: #fff;}
.footer-tag .menu-main-label-footer {padding-bottom: 20px;}
.footer-tag {padding: 50px 0 0 0;background: #fff;}
.footertag-label-footer {padding: 5px 7px;text-align: center;font-size: 16px;color: #7A7A7A;border-radius: 50px;border: 1px solid #ced4da;background: #0088D5;color: #fff;}
.footertag-label-footer img {margin-right: 5px;width: 20px;}
.point-detail-highlight {font-size: 25px;}
.link-blue {color: #0088D5;}
.link-blue:hover {color: #00A3FF;}
.shadow-img{box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;display:block;}

/* poppular vote */
#poppular-vote .list-item-title{height:unset}
#poppular-vote h3.list-item-title{margin-bottom:0;text-align:center;}
#poppular-vote h4.list-item-title{padding-bottom:35px;padding-top:0;text-align:center;}
#poppular-vote .mt-5{margin-top:50px!important}
#poppular-vote .mb-5{margin-bottom:50px!important}
#poppular-vote img{height:auto}

/* campaign-vote */
#campaign-vote .list-item-title{height:unset}
#campaign-vote h3.list-item-title{min-height:75px;margin-bottom:0;text-align:center;}
#campaign-vote h4.list-item-title{padding-top:0;text-align:center;}
#campaign-vote .mt-5{margin-top:50px!important}
#campaign-vote .mb-5{margin-bottom:50px!important}
#campaign-vote img.vote {max-width: 100%;width: 38px;height: auto;}
#campaign-vote img.score {max-width: 100%;width: 33px;height: auto;}
#campaign-vote .list-item-vote, #campaign-vote .list-item-score {font-size: 18px;padding-right: 10px;color: #9C9C9C;}
#campaign-vote .list-item-vote a span:hover {color:#007CC2!important;}
#campaign-vote .list-item-vote img,  #campaign-vote .list-item-score img {margin-right: 6px;}
#campaign-vote img.vote-succeed {max-width: 100%;width: 25px;height: auto;}
#campaign-vote .list-item-vote a span.color-gray {color:#9C9C9C;}
#campaign-vote .list-item-vote a span.color-green {color:#7ED23E;}
#campaign-vote .list-item-vote a span.color-green:hover {color:#7ED23E!important;}
#campaign-vote .list-item-vote a.ver-align-sub {vertical-align: sub;}
#alert-vote h2 {font-size: 1.9rem;color:  #616161;text-align: center;line-height: 1.5;}
#alert-vote .img {text-align: center;margin-bottom: 25px;}
#alert-vote .img img {width: 65px;}
#alert-vote .btn {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
#alert-vote .btn .btn-vote {width: 100px; max-width: 100%;display: block;background: #0088D5; color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px 2px 25px;margin-top: 15px;}
#alert-vote .btn .btn-vote + .btn-vote { margin-left: 10px;background: #17A2B8;}
#alert-vote .btn .btn-vote:hover { background: #00A3FF;}
#campaign-vote .list-item-vote:hover a span {color: #007CC2!important;}

/* E-Card */
#newyear-card .box-white {background: rgba(255, 255, 255, 0.95);padding: 60px; width: 100%;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
#newyear-card h2 {margin-top: 50px;}
#newyear-card h3, #newyear-card-index h3 {font-size: 30px;color: #0088D5;margin: 15px 0;}
#newyear-card form h3 {font-size: 20px;color: #0088D5;margin: 15px 0;}
#newyear-card .select-img, #newyear-card-index .select-img, #newyear-card .select-template {position: relative;overflow: hidden;}
#newyear-card .select-template {margin-bottom: 40px;}
#newyear-card .select-img, #newyear-card-index .select-img {margin-bottom: 15px;}
#newyear-card .select-img img, #newyear-card-index .select-img img, #newyear-card .select-template img {width:100%;-webkit-transition: all 0.5s;transition: all 0.5s;}
#newyear-card .select-img:hover img, #newyear-card-index .select-img:hover img, #newyear-card .select-template:hover img {-webkit-transform: scale(1.05);transform: scale(1.05);}
#newyear-card .select-img:hover:after, #newyear-card-index .select-img:hover:after, #newyear-card .select-template:hover:after {opacity: 1;border: 4px solid #0088D5;transition: unset;}
#newyear-card .select-img img:hover, #newyear-card-index .select-img img:hover, #newyear-card .select-template img:hover {-webkit-transform: scale(1.05);transform: scale(1.05);}
#newyear-card .select-img:after, #newyear-card-index .select-img:after, #newyear-card .select-template:after {opacity: 0;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;transition: unset;}
#newyear-card .select-img.active:after, #newyear-card-index .select-img.active:after, #newyear-card .select-template.active:after  {opacity: 1;position: absolute;width: 100%;height: 100%;content: "";top: 0;left: 0;border: 4px solid #0088D5;}
#newyear-card .select-img.active img, #newyear-card-index .select-img.active img, #newyear-card .select-template.active img {-webkit-transform: scale(1.05);transform: scale(1.05);}
#newyear-card .box-white .row + .row {margin-top: 30px;}
#newyear-card label {color: #616161;font-weight: 500;padding: 15px 0 5px 0;}
#newyear-card .box-list {margin-top: 25px;}
#newyear-card .box-list + .box-list {margin-top: 20px;padding-top: 60px;border-top: 1px solid #d7d7d7;}
#newyear-card .name p, #newyear-card-index .name p {font-size: 18px!important;font-weight: 500;margin-bottom: 0;min-height: 81px;}
#newyear-card .name p.height-unset {min-height: unset;margin-bottom: 60px;}
#newyear-card .view-all {margin-top: 60px;}
#newyear-card .view-all img {width: 100%;height: auto;}
#newyear-card .view-all a:hover {opacity: 0.7;}
#newyear-card .flex-vote, #newyear-card-index .flex-vote {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-top:16px;margin-bottom: 60px;}
#newyear-card .progress-bar-container, #newyear-card-index .progress-bar-container {width: 80%;height: 20px;position: relative;border-radius: 35px;overflow: hidden;background-color: #e9ecef;}
#newyear-card .progress-bar-container .progress-bar-child, #newyear-card-index .progress-bar-container .progress-bar-child {width: 100%;height: 100%;}
#newyear-card .progress-bar-container .progress-bar-child.progress, #newyear-card-index .progress-bar-container .progress-bar-child.progress {color: white;text-align: right;line-height: 23px;font-size: 35px;animation-direction: reverse;border-radius: 35px;background: rgb(0,136,213);background: linear-gradient(90deg, rgba(0,136,213,1) 0%, rgba(0,255,218,1) 100%);}
#newyear-card .progress-bar-container .progress-bar-child .text-num, #newyear-card-index .progress-bar-container .progress-bar-child .text-num {width: 100%;font-size: 15px;font-weight: 600;padding: 0 10px;}
#newyear-card .flex-vote img, #newyear-card-index .flex-vote img {width: 22px;height: auto;}
#newyear-card .progress-bar, #newyear-card-index .progress-bar {width: 100%;}
#newyear-card .shrinker, #newyear-card-index .shrinker {background-color: #e9ecef;position: absolute;top: 0;right: 0;width: 100%;}
#newyear-card .timelapse, #newyear-card-index .timelapse {animation-name: timelapse;animation-fill-mode: forwards;animation-duration: 2s;animation-timing-function: cubic-bezier(.86, .05, .4, .96);}
@keyframes timelapse {0% {width: 100%;}100% {width: 0%;}}



#card-member .content-wrap {max-width: 473px}
#card-member .group ,#card-artist .group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-bottom: 20px;}
#card-member .btn-download ,#card-artist .btn-download {display: block;background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px;margin: 15px 0 20px 0;width:125px;}
#card-member .btn-download:hover ,#card-artist .btn-download:hover {background: #00A3FF;}
#card-member .btn-download.width-250 {width:250px;}
#card-member .share-social ,#card-artist .share-social {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
#card-member .share-social .text ,#card-artist .share-social .text {font-size: 20px; margin-right: 15px;}
#card-member .share-social .social + .social ,#card-artist .share-social .social + .social {margin: 6px 0 0 8px;} 
#card-member .share-social .circle-fb ,#card-artist .share-social .circle-fb {width: 30px;height: 30px;background: #3a559f;text-align: center;line-height: 43px;font-size: 35px;margin: 0;border-radius: 50%;position: relative;overflow: hidden;z-index: 1;display: inline-block;vertical-align: middle;}
#card-member .share-social .circle-fb img ,#card-artist .share-social .circle-fb img {position: relative;transition: .5s;z-index: 3;margin-top: -12px;width: 11px;height: auto;}
#card-member .congrat h1 {font-size: 25px;margin-bottom: 0;text-align:center;}
#card-member .congrat {display: block;border-bottom: 1px solid #d7d7d7;margin: 20px 0;padding-bottom: 20px;}
#card-member .btn-download.bg-green ,#card-artist .btn-download.bg-green {background: #17A2B8;}
#card-member .btn-download.bg-green:hover ,#card-artist .btn-download.bg-green:hover {background: #00A3FF;}

#card-artist .content-wrap {max-width: 1000px;}
#card-artist .relative {position: relative;height: auto;}
#card-artist .tmpl img.center {display: block;margin: 0 auto;max-width: 100%;}
#card-artist .tmpl .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl .name-artist {position: absolute;right: 230px;top: 87px;}
#card-artist .tmpl .name-artist h2 {font-size: 33px;color: #0088D5;font-family: 'Itim', cursive !important;}
#card-artist .tmpl .img-artist {position: absolute;right: 89px;top: 18px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl .img-artist img {width: 100%;height: auto;}
#card-artist .tmpl .name-member {position: absolute;right: 184px;top: 332px;}
#card-artist .tmpl .name-member h2 {font-size: 33px;color: #c5841a;font-family: 'Itim', cursive;}
#card-artist .tmpl .img-member {position: absolute;bottom: 91px;right: 286px;width: 115px;height: 115px;overflow: hidden;}
#card-artist .tmpl .img-member img {width: 100%;height: auto;}

/* artist01 */
#card-artist .tmpl-artist-01 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-01 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 29% !important;text-align: center;}
#card-artist .tmpl-artist-01 .name-member h2 {font-size: 33px;color: #0e7f10;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-01 .img-member {position: absolute;right: 37px;top: 10px;overflow: hidden; width: 85px;height: 113px;}
#card-artist .tmpl-artist-01 .img-member img {width: 100%;height: auto;}

/* artist02 */
#card-artist .tmpl-artist-02 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-02 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 36%;text-align: center;}
#card-artist .tmpl-artist-02 .name-member h2 {font-size: 33px;color: #f35389;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-02 .img-member {position: absolute;right: 45px;top: 18px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-02 .img-member img {width: 100%;height: auto;}

/* artist03 */
#card-artist .tmpl-artist-03 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-03 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 30%;text-align: center;}
#card-artist .tmpl-artist-03 .name-member h2 {font-size: 33px;color: #ef5ca2;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-03 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-03 .img-member img {width: 100%;height: auto;}

/* artist04 */
#card-artist .tmpl-artist-04 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-04 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 41%;text-align: center;}
#card-artist .tmpl-artist-04 .name-member h2 {font-size: 33px;color: #cd5748;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-04 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-04 .img-member img {width: 100%;height: auto;}


/* artist05 */
#card-artist .tmpl-artist-05 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-05 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 36%;text-align: center;}
#card-artist .tmpl-artist-05 .name-member h2 {font-size: 33px;color: #f9231f;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-05 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-05 .img-member img {width: 100%;height: auto;}

/* artist06 */
#card-artist .tmpl-artist-06 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-06 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 36%;text-align: center;}
#card-artist .tmpl-artist-06 .name-member h2 {font-size: 33px;color: #f58280;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-06 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-06 .img-member img {width: 100%;height: auto;}

/* artist07 */
#card-artist .tmpl-artist-07 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-07 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 35%;text-align: center;}
#card-artist .tmpl-artist-07 .name-member h2 {font-size: 33px;color: #54a9f7;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-07 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-07 .img-member img {width: 100%;height: auto;}

/* artist08 */
#card-artist .tmpl-artist-08 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-artist .tmpl-artist-08 .name-member {position: absolute;transform: translate(50%, -50%);right: 25%;top: 31%;text-align: center;}
#card-artist .tmpl-artist-08 .name-member h2 {font-size: 33px;color: #d76934;font-family: 'Itim', cursive;}
#card-artist .tmpl-artist-08 .img-member {position: absolute;right: 45px;top: 9px;overflow: hidden; width: 113px;height: 113px;}
#card-artist .tmpl-artist-08 .img-member img {width: 100%;height: auto;}

#card-preview .content-wrap {max-width: 473px;}
#card-preview .content-pd {padding: 40px;}
#card-preview .relative {position: relative;height:auto;}
#card-preview .bg {-webkit-background-size: 100% !important;-moz-background-size: 100% !important;-o-background-size: 100% !important;background-size: 100% !important;}
#card-preview .col20 {width: 20%;}
#card-preview .col20 + .col20 {margin-left: 15px;}

/* Template 1 */
#card-preview .tmpl-01 .text {position: absolute;left: 83px;top: 166px;width: 338px;padding: 20px;}
#card-preview .tmpl-01 .text p {font-size: 23px !important;color: #c5841a;height: 200px !important;margin: 0;text-align: unset;overflow: hidden !important;font-family: 'Itim', cursive!important;}
#card-preview .tmpl-01 .name-artist {position: absolute;left: 20px;top: 45px;}
#card-preview .tmpl-01 .name-artist h2 {font-size: 33px !important;color:#000;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-01 .img-artist {position: absolute;right: 107px;top: 16px;overflow: hidden !important;width: 115px;height: 115px !important;}
#card-preview .tmpl-01 .img-artist img {width: 100%;height: auto !important;}
#card-preview .tmpl-01 .name-member {position: absolute;right: 72px;top: unset;bottom: 150px;}
#card-preview .tmpl-01 .name-member h2 {font-size: 33px !important;color: #000;font-family: 'Itim', cursive!important;}
#card-preview .tmpl-01 .img-member {position: absolute;bottom: 21px;right:33px;width: 115px;height:116px !important; overflow: hidden !important;}
#card-preview .tmpl-01 .img-member img {width: 100%;height: auto !important;}
#card-preview .tmpl-01 img.center {display: block;margin: 0 auto;max-width: 100%;}

/* Template 2 */
#card-preview .tmpl-02 .text {position: absolute;left: 56px;top: 172px;padding: 0 15px;width: 360px;}
#card-preview .tmpl-02 .text p {font-size: 23px !important;line-height: 37px;height: 219px !important;overflow: hidden!important;color: #d91266;margin: 0;text-align: unset;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-02 .name-artist {position: absolute;left: 13px;top: 50px;}
#card-preview .tmpl-02 .name-artist h2 {font-size: 27px !important;color: #000;font-family: 'Itim', cursive;}
#card-preview .tmpl-02 .img-artist {position: absolute;width: 115px;height: 115px !important; right: 162px;top: 16px;overflow: hidden!important;}
#card-preview .tmpl-02 .img-artist img {width: 100%;height: auto !important;}
#card-preview .tmpl-02 .name-member {position: absolute;bottom: 213px;left: 35px;}
#card-preview .tmpl-02 .name-member h2 {font-size: 33px !important;color: #000;font-family: 'Itim', cursive;}
#card-preview .tmpl-02 .img-member {position: absolute;width: 117px;height: 117px !important; top: unset;left: 29px;bottom: 91px;overflow: hidden!important;}
#card-preview .tmpl-02 .img-member img {width: 100%;height: auto !important;}
#card-preview .tmpl-02 img.center {display: block;margin: 0 auto;max-width: 100%;}

/* Template 3 */
#card-preview .tmpl-03 .text {position: absolute;left: 58px;top: 192px;padding: 12px;width: 359px;}
#card-preview .tmpl-03 .text p {font-size: 23px !important;color: #645d01;line-height: 35px;overflow: hidden !important;height: 208px !important;margin: 0;text-align: unset;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-03 .name-artist {position: absolute;left: 33px;top: 70px;}
#card-preview .tmpl-03 .name-artist h2 {font-size: 33px !important;color: #8a2323;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-03 .img-artist {position: absolute;top: 16px;height: 115px !important; right: 98px;width: 115px;overflow: hidden !important;}
#card-preview .tmpl-03 .img-artist img {width: 100%;height: auto !important;}
#card-preview .tmpl-03 .name-member {position: absolute;left: 32px;bottom:163px;}
#card-preview .tmpl-03 .name-member h2 {font-size: 33px !important;color: #8a2323;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-03 .img-member {position: absolute;width: 114px; height: 121px !important;left: 39px;bottom: 37px;overflow: hidden !important;}
#card-preview .tmpl-03 .img-member img {width: 100%;height: auto !important;}
#card-preview .tmpl-03 img.center {display: block;margin: 0 auto;max-width: 100%;}

/* Template 4 */
#card-preview .tmpl-04 .text {position: absolute;left: 40px;top: 276px;width: 399px;padding: 0 15px;}
#card-preview .tmpl-04 .text p {font-size: 23px !important;color: #fff;height: 207px !important;margin: 0;overflow: hidden !important;text-align: unset;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-04 .name-artist {position: absolute;top: 16px;right: 29px;}
#card-preview .tmpl-04 .name-artist h2 {font-size: 33px !important;color: #000;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-04 .img-artist {position: absolute;top: 98px;top: 70px;right: 55px;width: 131px;height: 129px!important;overflow: hidden !important;}
#card-preview .tmpl-04 .img-artist img {max-width: 100%;height: auto !important;}
#card-preview .tmpl-04 .name-member {position: absolute;left: 26px;bottom: 130px;}
#card-preview .tmpl-04 .name-member h2 {font-size: 33px !important;color: #000;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-04 .img-member {position: absolute;left: 35px;bottom: 1px;top: unset;width: 115px;height: 126px !important;   overflow: hidden !important;}
#card-preview .tmpl-04 .img-member img {width: 100%;height: auto !important;}
#card-preview .tmpl-04 img.center {display: block;margin: 0 auto;max-width: 100%;}

/* Template 5 */
#card-preview .tmpl-05 img.center {display: block;margin: 0 auto;max-width: 100%;}
#card-preview .tmpl-05 .text {position: absolute;left: 64px;top: 220px;padding: 0 10px;width: 350px;}
#card-preview .tmpl-05 .text p {font-size: 23px !important;color: #443e14;margin: 0;line-height: 35px;text-align: unset;overflow: hidden !important;height: 214px !important;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-05 .name-artist {position: absolute;left: 40px;top:70px;}
#card-preview .tmpl-05 .name-artist h2 {font-size: 33px !important;color: #8a2323; font-family: 'Itim', cursive !important;}
#card-preview .tmpl-05 .img-artist {position: absolute;right: 76px; top: 30px;width: 134px;height: 134px !important;overflow: hidden !important;}
#card-preview .tmpl-05 .img-artist img {max-width: 100%;height: auto !important;}
#card-preview .tmpl-05 .name-member {position: absolute;right: 78px;bottom: 159px;}
#card-preview .tmpl-05 .name-member h2 {font-size: 33px !important;color: #8a2323;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-05 .img-member {position: absolute;right: 39px;bottom: 14px;width: 131px;height: 139px !important;overflow: hidden !important;}
#card-preview .tmpl-05 .img-member img {width: 100%;height: auto !important;}

/* Template 6 */
#card-preview .tmpl-06 img.center {display: block;margin: 0 auto;max-width: 100%;}
#card-preview .tmpl-06 .text {position: absolute;left: 60px;top: 212px;padding: 0 10px;width: 356px;}
#card-preview .tmpl-06 .text p {font-size: 23px !important;color: #fff;margin: 0;line-height: 35px;text-align: unset;overflow: hidden !important;height: 210px !important;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-06 .name-artist {position: absolute;left: 40px;top:81px;}
#card-preview .tmpl-06 .name-artist h2 {font-size: 33px !important;color: #000; font-family: 'Itim', cursive !important;}
#card-preview .tmpl-06 .img-artist {position: absolute;right: 78px;top: 41px;width: 130px;height: 129px !important;overflow: hidden !important;}
#card-preview .tmpl-06 .img-artist img {max-width: 100%;height: auto !important;}
#card-preview .tmpl-06 .name-member {position: absolute;left: 62px;bottom: 192px;}
#card-preview .tmpl-06 .name-member h2 {font-size: 33px !important;color: #000;font-family: 'Itim', cursive !important;}
#card-preview .tmpl-06 .img-member {position: absolute;left: 24px;bottom: 41px;width: 130px;height: 142px !important;overflow: hidden !important;}
#card-preview .tmpl-06 .img-member img {width: 100%;height: auto !important;}

.d-show-460{display:none}
.btn-banner-regis {width: 100%;display: flex;justify-content: center;padding: 35px 0 50px 0;}
.btn-default-regis {display: inline-block;text-align: center;width: 385px;}
.btn-default-regis a {width: 100%;display: block;background: #000;color: #fff!important;font-size: 22px;font-weight: 500;text-align: center;border: none;
border-radius: 50px;padding: 7px 25px;}
.btn-default-regis a:hover {background: #0088d5;}
.teamnamelist-box input {width: 94%;display: inline-block;}
.teamnamelist-box .delete-listname {width: 5%;display: inline-block; text-align: right;vertical-align: middle;}
span.text-red {color: #ff0000;}
.vote-close {text-align: center;}
.vote-close h1 {font-size: 70px;color: #0088D5;font-weight: 600}
.vote-close h2 {color:#000;font-size: 40px;margin-bottom: 40px;font-weight: 600}
.vote-close img {margin-bottom: 15px;}
img.img-close {width: 100%;}
.vote-close .btn-back {background: #0088D5;color: #fff!important;font-size: 25px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 5px 25px;}
.vote-close .btn-back:hover {background: #00A3FF;}

#mycoupon .tabs__buttons--container {display: flex;}
#mycoupon .tabs__tab-btn {color: #00A3FF;background: none;border: none;padding: 1rem 2rem;cursor: pointer;font-size: 20px;font-weight: 500;border-bottom: solid 3px #00A3FF;}
#mycoupon .tabs__tab-btn--not-selected {color: #ABABAB;border-bottom-color: #eeeeee;}
#mycoupon .tabs__tab--hide {display: none;}
#mycoupon. tabs__tab--show {	display: block;}
#mycoupon .tabs__tab {animation: tabApear 0.6s;}
#mycoupon .flex-width {display: flex;flex-wrap: wrap;}
#mycoupon .col-width {width:50%;margin: 25px 0;}
#mycoupon .flex-width + .flex-width {margin-top: 50px;}
#mycoupon .flex-width .col-width:nth-child(even) {padding-left: 15px;}
#mycoupon .flex-width .col-width:nth-child(odd) {padding-right: 15px;}
#mycoupon .flex-width .col-width .flex .content {width:100%;}
#mycoupon .flex-width .col-width .flex .content .text h3 {font-size:18px;line-height: 1.5;} 
#mycoupon .flex-width .width100 {width: 100%;margin-top:50px;}
#mycoupon .flex-width .width100 h2 {font-size: 20px;color:#00A3FF;}
#mycoupon .expire img {	filter: grayscale(100%) brightness(2);}
#mycoupon .btn-receive {display: inline-block;margin-top: 15px;}
#mycoupon .btn-receive a {background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none; border-radius: 50px;padding: 7px 25px;}
#mycoupon .btn-receive a:hover { background: #00A3FF;}
#mycoupon .num-code {color: #fff;font-weight: 600;border-radius: 8px;background: #0088d5;padding: 5px 15px 2px 15px;}
#mycoupon .col-width img.expire {filter: grayscale(100%) brightness(2);}
#mycoupon img.fancybox__image  {filter: grayscale(100%) brightness(2);}

#The1modal h2 {font-size: 22px;margin-bottom: 0;}
#The1modal p {font-size: 16px !important;}
#The1modal .box-btn-top {margin: 20px 0;}
#The1modal .box-btn-top a.btn-register-the1 {background: #0088D5;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px;}
#The1modal .box-btn-top button.btn-cancel-the1  {background: #17A2B8;color: #fff!important;font-size: 16px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px;margin-left: 10px;}
#The1modal .box-btn-top a.btn-register-the1:hover ,#The1modal .box-btn-top button.btn-cancel-the1:hover {background: #00A3FF;}
#The1modal .modal-header .close-the1 {padding: 1rem;margin: -1rem -1rem -1rem auto;}
#The1modal button.close-the1 {padding: 0;background-color: transparent;border: 0;-webkit-appearance: none;}
#The1modal button.close-the1 {float: right;font-size: 1.5rem;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;opacity: .5;}

a:hover .hover-opacity {opacity: 0.8;}

.flex-center-404 {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
#not-found {padding: 335px 0 400px;height: 80vh;}
#not-found .btn-404 a {width: 100%;max-width: 150px;display: block;background: #0088D5;color: #fff !important;font-size: 16px;font-weight: 400;text-align: center;border: none;border-radius: 50px;padding: 7px 25px;margin: 0 auto;}
#not-found .btn-404 a:hover {background: #00A3FF;}
#not-found .btn-404 {margin-top: 25px;}
#not-found h1 {padding-bottom: 15px;}
#not-found p {text-align: center;font-size: 18px;}
#not-found br.show430 {display: none;}

#book-review .highlight {background: #b8e5ff96;padding-top: 30px;margin-top: 50px;}
#book-review .bg-all-book {background: url(../images/bg-main-inner.svg) no-repeat top left #F3F9FE;padding: 50px 0 50px 0;}
.section-index-bookreview {background: #b8e5ff96}
.about-wrap {padding-top: 15px;}
.about-wrap a {color: #0088D5;}

.point-redem-filter {margin-top: 35px;}
.banner-redem {margin-bottom: 35px;}
.status-redem {position: absolute;top: 10px;left: 10px;}
.status-redem .pick-up-redem {background: #17A2B8;color: #fff;font-size: 12px;border-radius: 6px;padding: 3px 10px;}
.status-redem .delivery-redem {background: #ee7e22;color: #fff;font-size: 12px;border-radius: 6px;padding: 3px 10px;}
.status-redem.detail {left:35px;top:35px;}
.status-redem.scan {left:30px;top:0}

.cert-btn {display: inline-block;background: #17A2B8;color: #fff !important;font-size: 16px;padding: 10px 35px;text-align: center;border-radius: 50px;}
.cert-btn:hover {background: #00A3FF;}
.cert-btn img {width:22px;height:auto;}
.cert-btn.padding-top-bottom {padding-top:7px;padding-bottom:7px;margin-top:8px;}
.mr-auto {margin-right:auto;}
.flex-group-btn-three {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.invite-regis {margin-top: 20px;}
.invite-regis a {background: #ee7e22;color: #fff;border-radius: 50px;padding: 7px 25px;display: inline-block;text-align: center;}
.invite-regis a:hover {color: #fff;background: #00A3FF;}
.invite-regis a br {display: none;}

@media only screen and (max-width: 1800px) {
.club-status-box .col-3 {padding-right: 5px;padding-left: 5px;}
}


@media only screen and (max-width: 1600px) {
p {font-size: 16px!important;}
.wrap-menumain {width: 45%;}
.menu-top {width: 48%;}
.btn-menuicon-list {padding: 10px 15px;}
.box-cover-cate-index,.box-cover-sign-index {background-size: contain;min-height: 490px;}
.tab-partner img {width: 90;}
#searchbox-head {position: relative;width: 300px;}
.menu-main-label,.menu-no-sub li a {font-size: 20px!important}
.menu-drop ul li a {font-size: 16px;}
.content-notfull {width: 95%;}
.footer-menu-no-sub li a,.menu-main-label-footer {font-size: 18px!important;}
.menu-drop-footer ul li a {font-size: 14px;}
#alert-vote .img img {width: 50px;}
#alert-vote h2 {font-size: 1.6rem;}
img.img-close {width: 750px;display: block;margin: 0 auto;;}
.vote-close img {width: 80px;}
.vote-close h1 {font-size: 55px;}
.vote-close h2 {font-size: 35px;}
.vote-close .btn-back {font-size: 20px;}
#not-found {padding: 235px 0 300px;}
#main-menulist ul {width:120%;}
.wrap-content-menu {width:120%;}
#main-menulist ul li a {font-size: 15px;}
#searchbox-head input[type="text"], #searchbox-head label, .btn-menuicon a {font-size: 15px;}
}

@media only screen and (max-width: 1536px) {
.logo-box {width: 60px;}
.scrollBg .btn-menuicon-list,.scrollBg .switchlang {padding: 8px 15px;}
.box-cover-cate-index, .box-cover-sign-index {min-height: 460px;}
.cate-title-main,.sign-title-main {font-size: 40px;line-height: 40px;}
.cate-title-main span, .sign-title-main span {font-size: 30px;}
.btn-cate-click a,.btn-sign-click a {width: 140px;height: 140px;font-size: 40px;}
.box-mainmenu {padding: 35px 5% 100px 5%;}
.box-interestmenu {padding: 35px 0 100px 10%;}
.box-informenu {padding: 35px 5% 100px 8%}
#main-menulist-all {padding: 70px 0 0 0;}
.box-member-e-card {padding: 25px 20px 70px 20px;}
.club-status-logo {width: 28%;}
.benefit-wrap {padding: 25px 0 0 0;}
.profile-image-box {width: 360px;height: 360px;}
#not-found {padding: 135px 0 200px;}
.btn-menuicon-list {padding: 5px 15px;}
.switchlang {padding-top:5px;}
.wrap-menu-btn {padding-top: 5px;}
}


@media only screen and (max-width: 1366px) {
p {font-size: 14px !important;}
.wrap-content-menu {padding: 0 20px;}
#main-menulist ul li a, .btn-menuicon a, #searchbox-head label,.btn-view-all a,
.view-on-title,.menu-drop ul li a,.menu-drop-footer ul li a {font-size: 14px;}
.menu-top {width: 58%;}
#searchbox-head input[type="text"] {font-size: 13px;}
.btn-menuicon-list svg {width: 17px;}
.btn-menuicon a span {padding: 0 10px;}
#scrollTop {width: 50px;height: 50px;}
.gototop span {font-size: 13px;margin-top: -3px;}
.menuindex-txt {font-size: 16px;}
.title-main {font-size: 23px;}
.menu-footer-cate-wrap ol li a,.subscript-box-form input,
.btn-subscript {font-size: 12px;}
.list-item-date,.list-item-type li a,.copyright-box p,.list-item-rating,.list-item-review,.podcast-list-item-date,
.podcast-list-item-by,.tag-list ul li,.form-remark,.search-tag-list ul li,.remark-form {font-size: 13px;}
.content-notfull {width: 100%;}
.subtitle-view {font-size: 20px;}
.box-cover-cate-index, .box-cover-sign-index {min-height: 380px;}
.menu-footer-cate-wrap li a {font-size: 17px;}
.btn-cate-click a, .btn-sign-click a {width: 100px;height: 100px;font-size: 27px;}
#searchbox-head {width: 250px;}
#searchbox-head input[type="submit"] {width: 65px;}
#main-menulist-all {padding: 100px 0 0 0;}
.menu-main-label,.subscript-head,.menu-no-sub li a {font-size: 18px!important;}
.menu-drop {padding-top: 20px;}
.menu-drop ul li,.menu-drop-footer ul li {margin-bottom: 10px;}
#menu-index-pc .box-mainmenu {padding: 0 5% 35px 5%;}
.wrap-content-menu-dropfooter {padding: 0 0 20px 0;}
.btn-menuicon-list {padding: 5px 15px;}
.switchlang {padding: 5px 0;}
#searchbox-head label {top: 3px;}
.member-menu-dropdown-list-wrap {margin-top: 35px;}
.scrollBg .btn-menuicon-list {padding: 5px 15px;}
.scrollBg .switchlang {padding: 5px 0;}
.wrap-menu-btn {padding: 5px 0 5px 25px;}
.scrollBg .wrap-menu-btn {padding: 7px 0 5px 25px;}
.section-wrap {padding: 70px 0;}
.footer-menu-no-sub li a, .menu-main-label-footer {font-size: 16px !important;}
.footer-social {padding: 35px 0!important;}
.section-banner {padding-top: 75px;}
.box-login {padding: 35px;margin: 30px 0 0 0;}
.box-register {padding: 35px;}
.form-login-wrap input.form-control {padding: 5px;}
.member-data-wrap {width: 100%;}
.pop-getpoint-detail-table,.point-activities-cate {font-size: 16px;}
#campaign-vote .list-item-vote, #campaign-vote .list-item-score {font-size: 16px;}
img.img-close {width: 600px;}
.vote-close img {width: 65px;}
.vote-close h1 {font-size: 45px;}
.vote-close h2 {font-size: 25px;}
.vote-close .btn-back {font-size: 18px;}
#newyear-card .box-white {padding: 35px;}
#main-menulist ul li a.height {padding-bottom: 22px;}
#main-menulist ul li:hover > .dropdown-content {top: 50px;}
.wrap-menumain {width: 45%;}
.menu-top {width: 48%;}
.login-section-wrap {padding-top: 80px;}
}

@media only screen and (max-width: 1280px) {
.member-detail-short .col-sm-4 {width: 32%;}
.member-detail-short .col-sm-8 {width: 68%;}
.club-status-txt {width: 100%;}
.club-status-box {padding: 15px 0 15px 0;}
.progress-bar-badge {padding: 15px 0 15px 0 !important;}
.e-card-detail .gx-2 {padding: 0;}
.profile-image-box {height: 315px;}
#alert-vote h2 {font-size: 1.5rem;}
img.img-close {width: 515px;}
#main-menulist ul li .dropdown-content ul li a {line-height: 2rem;}
}

@media only screen and (max-width: 1138px) {
#mainmenu-wrap-main {display: none;}
#mainmenu-button {display: block!important;color: #0EAEEA; padding: 0; border-radius: 100px;width: 55px;margin-top: 10px;position: relative;cursor: pointer;transition: all linear .3s;z-index: 999;}
#mainmenu-button-mb {color: #0EAEEA; padding: 0; border-radius: 100px;width: 95px;position: relative;cursor: pointer;transition: all linear .3s;z-index: 999;}
#mainmenu-button span,#mainmenu-button-mb span {vertical-align: top;display: inline-block;padding-left: 5px;}
#main-menulist {display: none;}
#main-menulist-all {display: block;max-width: 100%;width: 100%;padding: 35px 0 20px 0;color:#fff;display: none;position: fixed; overflow: hidden;
	z-index: -1;overflow-y: auto;top: 71px;left: 0;height: 100vh;background: #F3F9FE; border-top: 1px solid #ccc;}
#main-menulist-all ul {padding: 0 0 145px 0; display: block;list-style: none;}
.content-wrap {width: 93%;position: relative;overflow: hidden;}
.fadeIn, .fadeInUp, .fadeInDown, .bounceInUp, .bounceIn, .bounceInDown, .slideIn, .slideInUp, .slideInDown, .slideInRight, .slideInLeft, .fadeInRight,
[data-aos="fade-right"], [data-aos="fade"], [data-aos="fade-left"], [data-aos="fade-up"] {
  animation-name: none !important;animation-duration: unset!important;transform: unset!important;transition-duration: unset!important;
  transition-timing-function: unset!important;transition-property: unset!important;opacity: 1!important;transform: unset!important;}
#line-1, #line-2, #line-3 {height: 3px;}
#line-3.active {-webkit-transform: translate(0px, -9px) rotate(-45deg);transform: translate(0px, -9px) rotate(-45deg);}
.scrollBg .logo-box {padding: 5px 0 0 0;}
.scrollBg  #main-menulist-all {top: 50px;}
.scrollBg .wrap-menumain {padding-top: 0;}
.scrollBg .header-wrap {padding-bottom: 5px;}
.wrap-menumain {width: 5%;float: right;}
.menu-top {width: 80%;}
.object-bg-1,.object-bg-2,.object-bg-3,.object-bg-4 {display: none;}
.podcast-list-item-date {text-align: left;}
.header-wrap {background: #fff;}
.box-interestmenu {padding: 35px 0 100px 6%;}
#menu-index-pc ul {padding: 0 0 35px 0!important;}
#menu-index-pc ul ul {padding: 0!important;}
#menu-index-pc .box-informenu {width: 49%;}
#menu-index-pc .menu-drop ul li li {border-right: none;padding: 0;}
#main-menulist-all ul li li a {padding: 0 0 10px 0;}
.title-main,.title-main-inner,.subtitle-view-inner {font-size: 25px;}
#menu-index-pc .menu-drop ul ul {padding-top: 7% !important;}
.menu-no-sub li {padding-bottom: 25px !important;}
.list-item-date {width: 100%;padding: 0 0 5px 0;}
.list-item-property-wrap {justify-content: start;}
.list-item-rating {padding-right: 20px;}
#new-footer {width: 95%;}
#navwrap {text-align: left;}
.sidebar-item {position: relative;top: unset;left: unset}
.make-me-sticky {position: relative;top: unset;}
.has-2-items .sidebar-item {height: unset;}
.sticky-blog .box-content-menu {padding-top: unset;}
.has-2-items {margin-bottom: unset;}
.blog-lastest {padding-left: 0;}
.blog-lastest-list-wrap {display: flex;flex-wrap: wrap;}
.blog-lastest-list {width: 25%;float: left;padding: 0 20px 20px 0;}
.btn-view-all-stick {text-align: center;width: 100%;}
.blog-lastest-txt {padding-top: 10px;}
.box-login {margin: 0;}
.register-box-wrap {margin: 0;}
.box-register-login {margin-top: 35px;}
.bookreview-detail-txt {margin-left: 0;}
.review-title-review {font-size: 20px;}
.member-view-detail-title-sub {font-size: 30px;}
.box-member-profile {padding: 25px;}
.member-detail-short .col-sm-4 {width: 30%;}
.member-detail-short .col-sm-8 {width: 70%;}
.member-profile-interest-box,.member-profile-image-box {height: 285px;}
.club-status-logo {width: 35%;}
.club-status-wrap {display: block;}
.club-status-txt {display: block;padding: 5px 0 0 0;}
.box-member {height: 100%;}
#getpoint-detail {width: 75%;}
.point-activities-box {padding: 40px 0;}
.member-profile-interest-box {height: 255px;}
.login-section-wrap {padding-top: 72px;}
.profile-image-box {height: 270px;}
.article-box-L {min-height: unset;}
#banner-main .owl-dot span {width: 30px;}
#banner-main .owl-nav.disabled + .owl-dots {bottom: 10px;width: 80%;}
.btn-banner-regis {bottom: 4%;}
#campaign-vote .list-item-property-wrap {justify-content: space-between;}
}
@media only screen and (max-width: 1180px) {
  .review-book-section-wrap .list-item-cover {height: 350px;}
  #book-review .width-between {
    width: 23% !important;
  }
}
@media only screen and (max-width: 1080px) {
  #not-found {padding: 125px 0 190px;}
}

@media only screen and (max-width: 1024px) {
  #newyear-card .name p, #newyear-card-index .name p {min-height:60px;}
}

@media only screen and (max-width: 990px) {#card-artist .tmpl-artist-01 .name-member h2
  #campaign-vote .list-item-property-wrap {padding-bottom: 0;}
  #campaign-vote .list-item-property-wrap .list-item-date {width: auto;margin-right: auto;}
  #book-review .width-between {width: 50% !important;}
  .review-title {font-size:18px;margin-bottom: 5px;}
  .bookreview-detail-txt p {margin-bottom: 20px;}
  .review-book-section-wrap .list-item-cover {height: 580px;}
  .filter-review-bar .col-lg-2 {margin-top: 10px;}
}

@media only screen and (max-width: 980px) {
  .bookreview-detail-img {box-shadow: unset !important;}
}
@media only screen and (max-width: 960px) {
  .btn-review-bar a {padding: 7px 10px;}
}


@media only screen and (max-width: 840px) {
.scrollBg .header-wrap {padding-bottom: 0;}
body {position: relative;}
header {left: 0;transform: unset!important;}
.scrollBg .logo-box {padding: 10px 0;}
.scrollBg .menu-top {padding-top: 12px;}
#searchbox-head label,.login-menu span,.regis-menu span {display: none;}
.login-list-menu span {display: inline-block!important;}
.btn-menuicon-list {border: none;}
.switchlang {border: none;margin: 10px 0;}
#searchbox-head input[type="submit"] {width: 45px;}
.searchbox-wrap { padding: 10px 0 !important;}
.switchlang {margin: 0;}
.switchlang span {font-size: 20px;}
.btn-menuicon-list {margin-top: 0;}
.wrap-menumain {width: 10%;}
.wrap-menu-btn {border: none;padding: 0 0 10px 25px;}
.menuindex-icon svg {width: 60px;}
.menuindex-icon {min-height: 75px;}
.menuindex-item a {padding: 30px 10px;}
#banner-main .owl-dot span {width: 30px;height: 4px;margin: 5px 4px;}
.section-wrap {padding: 50px 0;}
.content-notfull {width: 100%;}
.list-item-box {padding-bottom: 35px;}
.btn-view-all {padding: 15px 0 0 0;}
.podcast-list-item-wrap {width: 107%;}
.podcast-list-item-box,.podcast-list-item-box-inner {width: 50%;padding: 0 25px 20px 0;}
.subtitle-view-wrap {margin-top: 25px !important;}
.box-cover-cate-index, .box-cover-sign-index {background-size: cover;}
.tab-partner ul li a {padding: 15px 0;}
.footer-menuwrap {flex-wrap: wrap;}
.menu-footer-cate-wrap {width: 33%;}
.scrollBg .logo-box {padding: 0;}
.scrollBg .menu-top,.scrollBg .wrap-menumain {padding-top: 0;}
.scrollBg .btn-menuicon-list {padding: 10px 15px;}
.podcast-viewall {padding: 35px 0;}
.scrollBg .header-wrap {background: rgba(255, 255, 255, 1);box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;}
#main-menulist-all ul li {text-align: left;width: 100%;margin: 0;padding: 0;line-height: initial; position: relative;}
#main-menulist-all ul li a {font-weight: 500;padding: 10px 3% 10px 0;margin: 0; display: block;color: #616161;font-size: 16px;color: #0088D5;}
#main-menulist-all .submenu-button-mb {position: absolute;z-index: 99;right: 0;top: 0;display: block;height: 33px;width: 100%;cursor: pointer;}
#main-menulist-all .submenu-button-mb:before {position: absolute;top: 7px;right: 0;display: block;
  background: url(../images/icon/arrow-menu-up.svg) no-repeat right center;content: '';width: 100%;height: 15px;background-size: 14px}
#main-menulist-all {background: #fff;}
#main-menulist-all ul ul {position: relative !important;display: none;margin: 0 0 15px 0;padding: 0 20px;padding: 0 15px;background: #F3F9FE;border-radius: 6px;}
.submenu-opened:before {background: url(../images/icon/arrow-menu-down.svg) no-repeat right center!important;background-size: 14px!important;}
#main-menulist-all ul li li a {text-transform: none;display: inline-block;color: #656565;padding: 5px 0;border-bottom: unset !important;font-weight: 400;font-size: 14px;}
#main-menulist-all ul li a:hover {color: #007CC2}
#mainmenu-button-mb {width: auto;margin: 0;    padding: 12px 0 0 0;}
.menu-drop {width: 100%;padding: 0 !important;border: none;}
#main-menulist-all {padding: 30px 4%;height: 91vh;}
#main-menulist-all ul {padding: 0;}
.menu-main-label {padding: 0;}
#main-menulist-all ul li li {border-bottom: 1px solid #eee;padding: 10px 0 !important;}
header {z-index: 999;}
.dropdown-interest-btn {z-index: 1000;bottom: unset;left: 0;top: 70px;right: unset;width: 100%;}
.select-interest-filter img {width: 20px;}
.select-interest-filter {font-size: 16px;padding: 15px 20px;border-radius: unset;width: 100%;text-align: left;box-shadow: unset;}
.arrow-interest {float: right;width: 16px!important;padding-top: 12px;}
.select-interest-filter span {display: inline-block;vertical-align: middle;}
.dropdown-interest-btn-wrap {position: relative;}
.dropdown-menuinterest {border-radius: unset;top: 54px;bottom: unset;max-height: 85vh;overflow: auto;padding:10px 0 60px 0;}
.scrollBg .logo-box {width: 60px;}
.scrollBg .header-wrap {padding: 15px 0 5px 0;}
footer {padding: 0 0 15px 0;}
.subscript-box-wrap {text-align: center;}
.footer-social {padding: 10px 0 50px 0;}
.footer-bottom-bar {width: 100%;}
.tab-partner ul li {width: 10%;}
.tab-partner ul li a {padding: 0;}
.copyright-box {text-align: center;}
.subscript-head {font-size: 20px;}
.menu-main-label {font-size: 18px;}
.box-interestmenu {display: none!important;}
.scrollBg #main-menulist-all {top: 71px;}
#menu-index-pc .menu-drop ul ul {padding-top: 10px !important;-webkit-column-count: 1;-moz-column-count: 1;
    column-count: 1;column-rule: unset;width: 100%;margin: 0;}
#menu-index-pc .menu-drop ul li li {margin-bottom: 5px;}
#mainmenu-button {display: none!important;}
#mainmenu-button-mb {display: block!important;}
#menu-index-pc {display: none!important;}
#menu-index-mb {display: block!important;}
.member-menu-dropdown-list {width: 160px;left: -50px;}
.switchlang {display: none!important;}
.switchlang-mb {display: block!important;padding-top: 25px;}
.switchlang-mb a {font-weight: 500;background: #0088D5;color: #fff;padding: 7px 20px;border-radius: 3px;}
.btn-menuicon-list {padding: 11px 15px;}
.scrollBg .wrap-menu-btn {padding: 0 0 10px 25px;}
.member-menu-dropdown-list-wrap {margin-top: 45px;}
.list-item-property-wrap {padding-top: 0;}
.title-main,.title-main-inner,.subtitle-view-inner {font-size: 30px;}
.subtitle-view {font-size: 25px;}
.section-index-podcast {background-size: cover;}
.footer-pc {display: none!important;}
.footer-mb {display: block!important; margin-bottom: 35px;}
#new-footer {width: 100%;}
#accordionmenufooter .accordion-button {color: #656565!important;background-color: #F3F9FE!important;border: none!important;border-radius: unset!important;border-bottom: 1px solid #ddd!important;}
.accordion-button:focus {border-color: unset!important;box-shadow: unset!important;}
#accordionmenufooter ul {list-style: none;padding: 0;margin: 0;}
#accordionmenufooter ul li {padding: 10px 0;}
.search-btn-mobile img {width: 17px;}
.member-menu-dropdown-list-wrap {background: #fff;}
.login-list-menu {padding: 10px 20px!important;}
.list-item-title,.podcast-list-item-title,.list-item-title-review,.list-item-review-by {font-size: 15px;line-height: 23px;}
.main-section-inner,.podcast-section-inner {padding: 90px 0 50px 0;}
.blog-lastest-list {width: 50%;padding: 0 25px 25px 0;}
.blog-lastest-img img {width: 100%;}
.blog-lastest-list-wrap {width: 103%;}
.faq-list-wrap {width: 100%;}
.filter-search-wrap {padding: 15px;}
.map-search-box {padding-top: 15px;}
.box-map-list {margin-right: 0;margin-bottom: 20px;}
.map-api-wrap {padding-top: 20px;}
.box-map-form-img {display: none;}
.subscript-box-form input {padding: 7px !important;}
.box-register {padding: 25px 20px;}
.box-register-login {padding: 25px;}
.box-share-story {padding: 0;}
.form-share-story {padding: 35px 0 0 0;}
.member-interest-box {margin-top: 20px;padding: 20px 0 0 0;}
.benefit-wrap {padding: 34px 0 10px 0;}
.progress-bar-badge {padding: 15px 0 35px 0 !important;}
.box-member-edit {padding: 25px 20px;margin-top: 0;}
.form-interest-wrap .form-check {margin-bottom: 10px;}
.box-profile {padding-top: 0;}
.profile-image-box {height: 250px;width: 250px !important;margin: 0 auto 20px auto;}
.profile-image-wrap {padding-right: 0;}
.btn-close-back {top: 0;}
.redemtion-detail-txt {margin: 15px 0 0 0;}
.bookreview-detail-img {text-align: center;}
.redemtion-detail-wrap {margin-bottom: 25px;}
.redemtion-detail-txt {margin: 15px 0 0 0;padding: 25px 25px 15px 25px;}
.point-activities-box {padding: 40px 0;}
.box-member-join-activities {padding-top: 0;}
#navwrap {width: 90%;}
.member-detail-short .col-sm-4,.member-detail-short .col-sm-8 {width: 100%;}
.member-profile-image-box {width: 30%;float: left;}
.member-club-logo {margin-top: 20px;width: 50%;float: left;padding-left: 20px;}
.member-data-wrap .member-data-L {width: 60%;}
.member-data-wrap .member-data-R {width: 40%;}
.member-profile-interest-box {height: 165px;margin-top: 15px;}
.member-detail-short {padding-top: 15px;}
.member-interest-list li {font-size: 14px;}
.member-interest-list {margin: 10px 0 0 0;column-count: 2;column-gap: normal;}
.member-profile-interest-btn {margin-top: 20px;}
.box-member-points-wrapper,.box-member-points-total-wrapper {width: 100%!important;}
.club-status-box {padding: 25px 0 0 0;}
.progress-bar-badge {padding: 25px 0 30px 0 !important;}
.benefit-wrap {padding: 0;}
.point-activities-wrapper .col-lg-7,.point-activities-wrapper .col-lg-5 {width: 100%;}
.pop-getpoint-detail {margin-top: 25px;}
.point-activities-wrapper {padding-top: 25px;}
.box-member-e-card {height: 100%;}
.filter-search-wrap .col-md-3 {width: 25%;}
.filter-search-wrap .col-2 {width: 15%;margin-top: 10px;}
.Campaign-form-data .col-lg-2 {
  width: 25%;
}
.login-section-wrap .section-inner-wrap {background-position: top 70px center;}
#navwrap.login-nav a,.login-nav .navdefault {color: #000 !important;}
.btn-subscript {padding: 7px 0;width: 100%;}
#new-footer .subscript-box-wrap {padding: 0 5%;}
.campaign-list .list-item-box {
    margin-bottom: 0;
}
.member-profile-image-box {height: 120px;}
.br-hide-mb {display: none;}
.filter-review-bar .col-lg-2 {width: auto;}
.footer-tag {padding: 35px 2%;}
.footer-tag {border-bottom: 1px solid #ddd !important;}
#banner-main .owl-item img {height: auto!important;}
#poppular-vote .list-item-box{padding-bottom:0}
#campaign-vote .list-item-box{padding-bottom:0}
.btn-default-regis a {font-size: 16px;}
.btn-default-regis {width: 290px;}
.teamnamelist-box input {width: 93%;}
#newyear-card .box-white {padding: 25px 20px;}
#newyear-card-index h3 {font-size: 25px;}
.status-redem.detail {left: 26px;top: 26px;}
}

@media only screen and (max-width:820px) {
.vote-close h1 {font-size: 35px;}
.vote-close img {width: 55px;}
#newyear-card .progress-bar-container .progress-bar-child.progress, #newyear-card-index .progress-bar-container .progress-bar-child.progress {line-height: 20px;;}
#newyear-card .progress-bar-container .progress-bar-child .text-num, #newyear-card-index .progress-bar-container .progress-bar-child .text-num {font-size: 13px;}
#newyear-card .progress-bar-container, #newyear-card-index .progress-bar-container {height: 18px;}
#newyear-card .flex-vote img, #newyear-card-index .flex-vote img {width: 18px;}
#newyear-card .name p, #newyear-card-index .name p {font-size: 16px!important;}
#mycoupon .col-width {width:100%;}
#mycoupon .flex-width .col-width:nth-child(even) {padding-left: 0;}
#mycoupon .flex-width .col-width:nth-child(odd) {padding-right: 0;}
#not-found {height: auto;padding: 125px 0 130px;}
.btn-review-bar a {padding: 7px 35px;}
}

@media only screen and (max-width: 768px) {
.member-profile-interest-btn {display: block;}
.member-profile-interest-btn {margin-top: 15px;}
.btn-member-profile {width: 100%;}
.member-profile-interest-box {height: 130px;}
#getpoint-detail {width: 90%;}
#newyear-card .select-template {margin-bottom: 40px;}
#newyear-card .box-white .row + .row {margin-top: 15px;}
}

@media only screen and (max-width:736px) {
img.img-close {margin-top: 70px;}
#newyear-card .name p, #newyear-card-index .name p {min-height: unset;}
.filter-search-wrap label {padding-top: 10px;}
.filter-search-wrap {padding: 15px 15px 25px 15px;}
}

@media only screen and (max-width: 686px) {
.member-data-wrap .member-data-R {width: 45%;}
.member-data-wrap .member-data-L {width: 55%;}
.card-game-quiz-head {margin-top: 20px;}
}

@media only screen and (max-width: 640px) {
  #mycoupon .flex-width .col-width .flex .img {width:40%;}
  .review-book-section-wrap .list-item-cover {height: 350px;}
  .status-redem .pick-up-redem, .status-redem .delivery-redem {font-size: 11px;}
  .status-redem.scan {left: 20px;}
  .flex-group-btn-three .col-auto {margin-top:20px;}
}

@media only screen and (max-width: 576px) {
.wrap-menu-btn,.scrollBg .wrap-menu-btn {padding: 0 0 0 15px;}
.menu-top {width: 77%;}
#searchbox-head {width: 180px;}
.podcast-b2s-logo-wrap {margin-bottom: 15px;}
.podcast-b2s-logo img {width: 30%;}
.tab-partner ul li a::after {background-size: 25px;}
.menu-footer-cate-wrap { width: 50%!important;padding-bottom: 25px;}
#menu-index-pc .box-mainmenu,#menu-index-pc .box-informenu {width: 100%;}
.article-inner-wrap-detail h2, .article-inner-wrap-detail h2 *,
.article-inner-wrap-detail h3, .article-inner-wrap-detail h3 * {font-size: 20px !important;}
.main-section-inner,.podcast-section-inner {background: #F3F9FE;}
.filter-search-wrap label {padding-top: 10px;}
#banner-main-knowledge .owl-dot span {width: 25px;height: 6px;margin: 5px 5px;}
#calendar .fc-content-skeleton td {padding: 0 !important;}
.box-login {width: 100%;}
.member-profile-image-box {width: 50%;text-align: center;margin: 15px auto;}
.box-member-e-card {padding: 25px 25px 75px 25px;width: 316px;margin: 0 auto;}
.unsubscript-box {text-align: left;}
.redem-confirm-data label {margin: 15px 0 5px 0;}
.box-member-points-status {text-align: left;}
.member-club-logo {margin-top: 20px;width: 65%;padding-left: 11px;}
.member-profile-image-box {width: 35%;margin: 0;}
.member-profile-interest-head {font-size: 16px;}
.member-data-wrap .member-data-L {width: 100%;}
.member-data-wrap .member-data-R {width: 100%;}
.member-profile-image-box {width: 30%;}
.club-status-title {font-size: 14px;line-height: 18px;}
.show-mb {display: block;}
.club-status-box .col-3 {padding: 0 5px;}
.club-status-point {font-size: 12px;line-height: 15px;}
.club-status-txt {text-align: center;}
.club-status-logo {width: 60%;margin: 0 auto;display: block;}
.club-status-box {padding: 15px 0 0 0;}
.e-card-detail .col-5 {text-align: left;}
.filter-search-wrap .col-md-3,.filter-search-wrap .col-2 {width: 100%;}
.Campaign-form-data .col-lg-2 {
  width: 100%;
}
.table-cart-head {display: none;}
.label-table-mobile {display: block;font-weight: bold;}
.cart-list-name {padding-top: 15px;}
.table-cart-list-row .txt-right {text-align: left!important;}
.campaign-cart-total span {
  width: 110px;}
.btn-end-activities {
  position: relative;
  right: unset;
  bottom: unset;
  display: inline-block;
  margin-top: 12px;
}
.game-point,.remark-again {
  font-size: 22px;}
.levels-circle {display: block;margin: 0;}
.box-levels span {
  font-size: 18px;}
.box-gallery-comment ul {column-count: 3;}
.campaign-list-item-cover {height: 160px;}
.campaign-list {
    padding: 30px 0 0 0;
}
.campaign-book-name {margin-bottom: 5px;}
.list-item-title {min-height: 60px;height: 60px;}
.podcast-list-item-title {min-height: 53px;height: 53px;}
.member-profile-image-box {height: 145px;}
#calendar .fc-left {width: 0!important;}
.review-book-section-wrap .list-item-cover {height: 350px;max-height: unset;}
.review-book-section-wrap .list-item-box {padding: 0 0 34px 0;}
.filter-review-bar .col-lg-2 {width: 100%;}
.swal2-popup .swal2-title {
  font-size: 22px !important;
}
.footer-tag {padding: 35px 5%;}
.catalog-cover {max-height: unset !important;}
#poppular-vote .list-item-title{min-height:unset}
#campaign-vote .list-item-title{min-height:unset}
.btn-default-regis {
  width: auto;
}
.iframe-vote-vertical {height: 945px!important;}
#newyear-card .box-list + .box-list {padding-top: 30px;}
.filter-search-wrap .col-2 {margin-top: 20px;}
.filter-review-bar .col-lg-2 {margin-top: 5px;}
}

@media only screen and (max-width:568px) {
  #newyear-card h3 {font-size: 23px;}
  .status-redem.scan {left: 0;top: 30px;}
}
@media only screen and (max-width:480px) {
  #poppular-vote .mt-5{margin-top:20px!important}
  #campaign-vote .mt-5{margin-top:20px!important}
  .iframe-vote-vertical {height: 798px!important;}
  #alert-vote h2 {font-size: 1.3rem;}
  #campaign-vote .list-item-property-wrap {display: block;}
  #campaign-vote .list-item-vote {margin-bottom:10px;}
  #card-member .share-social .text {font-size: 18px;}
  #card-member .congrat h1 {font-size: 20px;}
  #mycoupon .flex-width .col-width .flex .content .text h3 {font-size: 16px;}
  #mycoupon .flex-width .col-width .flex .img {width: 55%;}
  .review-title {font-size: 16px;}
  .review-title-review {font-size: 16px;}
  .status-redem.scan {left: 15px;}
}

@media only screen and (max-width: 460px) {
.banner-mb, .img-mobile{display: block!important;}
.banner-mb img {vertical-align: top;}
.banner-pc, .img-pc {display: none!important;}
.btn-menuicon-list {padding: 10px 10px;}
.menu-top {width: 66%;}
#searchbox-head {width: 150px;}
#searchbox-head input[type="text"]:focus {width: 80%;}
.btn-menuicon a span {padding: 0 10px;}
#searchbox-head input[type="text"] {padding-right: 5px;}
#searchbox-head {display: none;}
.search-btn-mobile {display: inline-block;padding: 0 10px;}
.scrollBg .btn-menuicon-list {padding: 10px 10px;}
.menuindex-icon svg {width: 40px;}
.menuindex-icon {min-height: 55px;}
.menuindex-txt {font-size: 14px;}
.menuindex-item a {padding: 16px 10px;}
.list-item-cover::after {background-size: 35px;}
.box-cover-cate-index, .box-cover-sign-index {background-size: contain;min-height: 250px;}
.cate-title-main, .sign-title-main {font-size: 25px;line-height: 25px;}
.cate-title-main span, .sign-title-main span {font-size: 18px;}
.btn-cate-click a {width: 70px;height: 70px;font-size: 18px;border: 3px solid #FF7A7A;margin: 3px auto 0 auto;}
.btn-sign-click a{width: 70px;height: 70px;font-size: 18px;border: 3px solid #3BB19E;margin: 3px auto 0 auto;}
.btn-sign-click a:hover,.btn-cate-click a:hover {border: 3px solid #fff;}
.tab-partner ul {flex-wrap: wrap;}
.tab-partner ul li {width: 20%;}
.tab-partner img {width: 65px;}
.member-menu-dropdown-list {width: 180px;left: -70px;}
.title-main,.title-main-inner,.subtitle-view-inner {font-size: 28px;}
.subtitle-view {font-size: 23px;}
.podcast-b2s-logo {padding: 20px 0;}
.section-wrap,.articles-list-wraper-section,.clip-list-wraper-section,.section-campaign {padding: 30px 0 35px 0;}
.btn-view-all {padding: 0;}
#scrollTop {right: 10px;}
.section-banner {padding-top: 70px;}
.article-inner-wrap-detail img {margin: 15px 0;}
.browsfile-box {width: 100% !important;}
p {font-size: 16px !important;}
#navwrap,.navdefault {font-size: 12px!important;}
#banner-main .owl-nav.disabled + .owl-dots {bottom: 0;}
.blog-lastest-list-wrap {width: 107%;}
#calendar .fc-toolbar.fc-header-toolbar {padding: 5px;}
#calendar .fc-toolbar h2 {font-size: 20px;}
.podcast-wrapper,.podcast-wrapper-inner {padding-top: 10px;}
.list-item-wrap {margin: 15px 0 0 0;}
.subtitle-view-wrap {margin-top: 15px !important;}
.list-item-box,.activities-list-wraper .list-item-box, .clip-list-wraper-section .list-item-box, .articles-list-wraper-section .list-item-box {padding-bottom: 20px;}
.filter-search-wrap select,.filter-search-wrap input {height: 38px;}
.activities-list-wraper .list-item-wrap {margin: 25px 0 0 0;}
.wrapper-dropdown {width: 100%;}
.box-sear-boox-main {padding-top: 5px;}
.btn-review {display: block;padding-right: 0;width: 100%;}
.search-book-wrap {width: 100%;margin: 15px 0;}
.policy-wrap {padding-top: 0;}
.faq-title h2 {font-size: 18px;padding-left: 10px;}
.faq-arrow svg {width: 100%;}
.faq-arrow {width: 9%;}
.faq-title {width: 82%;}
.faq-title-inner {width: 85%;padding-left: 10px;}
.faq-question {font-size: 20px;margin: 0;}
.faq-icon-inner {width: 40px;}
.faq-detail-box-head,.faq-list a {padding: 15px;}
.regis-subtitle {font-size: 18px;}
.titlemain-pagemenu {font-size: 20px;padding-bottom: 0;}
.search-page-wrap {padding: 35px 0;}
.search-page-head {padding: 22px 0 35px 0;}
.box-member-points-status {text-align: left;padding-bottom: 10px;}
.member-view-detail-title-main {font-size: 20px;}
.member-view-detail-title-sub {font-size: 25px;line-height: 30px;}
.unsubscript-box a {font-size: 14px;display: block;}
.member-club-logo {margin-top: 15px;width: 53%;}
#getpoint-detail {width: 95%;}
.pop-getpoint-detail-table .col-10 {padding-left: 10px;}
.pop-getpoint-detail h2 {font-size: 18px;line-height: 23px;}
.pop-getpoint-detail-table {font-size: 14px;padding: 25px;}
.box-member-e-card {padding: 25px 25px 95px 25px;width: 100%;}
.open-button,.cart-popup {right: 70px;}
.remark-levels li {font-size: 16px;}
.campaign-list-item-cover {height: 120px;}
.member-profile-image-box {height: 100px;}
.review-book-section-wrap .list-item-cover {height: 260px;}
.article-inner-wrap-detail iframe {height: 250px;}
.d-none-460{display:none}
.d-show-460{display:block}
.btn-banner-regis {padding: 15px 5% 35px 5%;position: relative;left: unset;bottom: unset;transform: unset;width: 100%;display: block;}
.btn-banner-regis .col-auto {width: 100%;margin-top: 10px;}
.btn-default-regis {width: 100%;}

}

@media only screen and (max-width:430px) {
	#mycoupon .col-width {width: 100%;}
	#mycoupon .flex-coupon {display: block;}
	#mycoupon .flex-coupon .col-width:nth-child(odd) {padding-right: 0;}
	#mycoupon .flex-coupon .col-width:nth-child(even) {padding-left: 0;}
  #mycoupon .flex-width .col-width .flex .content .text p {font-size: 14px !important}
  #mycoupon .btn-receive a {font-size: 14px;}
  #not-found br.show430 {display: block;}
  .flex-group-btn-three .col-auto a {display: block;}
  .flex-group-btn-three .col-auto {width: 100%;}
  .invite-regis a br {display: block;}
}

@media only screen and (max-width: 425px) {
  .iframe-vote-vertical {height: 705px!important;}
}

@media only screen and (max-width: 395px) {
.menu-top {width: 75%;}
.share-face-btn, .join-event-btn {padding: 8px 20px;}
.iframe-vote-vertical {height: 650px!important;}
}

@media only screen and (max-width: 380px) {
.activities-menu-wrap li {padding: 0 10px;}
}

@media only screen and (max-width: 375px) {
.box-cover-cate-index, .box-cover-sign-index {min-height: 220px;}
.menu-top {width: 75%;}
.list-item-date, .list-item-type li a, .copyright-box p, .list-item-rating, .list-item-review,
.podcast-list-item-date, .podcast-list-item-by {font-size: 12px;}
.member-view-detail-txt {width: 100%;text-align: center;padding: 25px 0 110px 0;}
.member-profile-image-box {width: 40%;}
.member-club-logo {margin-top: 25px;width: 60%;padding-left: 10px;}
.remark-levels li {padding: 0 12px 0 0;}
.campaign-list-item-cover {height: 100px;}
.member-profile-image-box {height: 120px;}
.review-book-section-wrap .list-item-cover {height: 215px;}
#campaign-vote img.vote-succeed {width:23px;}
#campaign-vote img.score{width:28px;}
#card-member .congrat {display: block;text-align: center;margin-top: 15px;padding-bottom: 35px;}
#card-member .btn-download.bg-green {margin: 0 auto;margin-top: 8px;}
#mycoupon .tabs__tab-btn {font-size: 18px;}
}	

@media only screen and (max-width: 360px) {
.activities-menu-wrap li {padding: 0 5px;}
.club-status-box .col-3 {padding: 0;}
.btn-default a {padding: 7px 15px;}
.remark-levels li {padding: 0 9px 0 0;}
}