@charset "utf-8";

@font-face {font-family: "MYuenHK";
  src: url("./fonts/MYuenHK-Medium.eot");
  src: url("./fonts/MYuenHK-Medium.eot?#iefix") format("embedded-opentype"),
  url("./fonts/MYuenHK-Medium.woff2") format("woff2"),
  url("./fonts/MYuenHK-Medium.woff") format("woff"),
  url("./fonts/MYuenHK-Medium.ttf") format("truetype"),
  url("./fonts/MYuenHK-Medium.svg#MYuenHK") format("svg");}

@font-face {font-family: "MYuenHK-Light";
  src: url("./fonts/MYuenHK-Light.eot");
  src: url("./fonts/MYuenHK-Light.eot?#iefix") format("embedded-opentype"),
  url("./fonts/MYuenHK-Light.woff2") format("woff2"),
  url("./fonts/MYuenHK-Light.woff") format("woff"),
  url("./fonts/MYuenHK-Light.ttf") format("truetype"),
  url("./fonts/MYuenHK-Light.svg#MYuenHK") format("svg");}

@font-face {font-family: "MYuenHK-SemiBold";
  src: url("./fonts/MYuenHK-SemiBold.eot");
  src: url("./fonts/MYuenHK-SemiBold.eot?#iefix") format("embedded-opentype"),
  url("./fonts/MYuenHK-SemiBold.woff2") format("woff2"),
  url("./fonts/MYuenHK-SemiBold.woff") format("woff"),
  url("./fonts/MYuenHK-SemiBold.ttf") format("truetype"),
  url("./fonts/MYuenHK-SemiBold.svg#MYuenHK") format("svg");}

@font-face {font-family: "MYuenHK-Xbold";
  src: url("./fonts/MYuenHK-Xbold.eot");
  src: url("./fonts/MYuenHK-Xbold.eot?#iefix") format("embedded-opentype"),
  url("./fonts/MYuenHK-Xbold.woff2") format("woff2"),
  url("./fonts/MYuenHK-Xbold.woff") format("woff"),
  url("./fonts/MYuenHK-Xbold.ttf") format("truetype"),
  url("./fonts/MYuenHK-Xbold.svg#MYuenHK") format("svg");}

body { font-family:'MYuenHK-Light',Arial; color: #838382;
  font-size: 1rem;
  /*letter-spacing: .0312rem;*/
}

/*
.container{width:100%;max-width: 1440px;}
@media (min-width: 1440px){
  .container{width: 1440px;}
}
*/

header { position: fixed; top: 0; z-index: 99999; width: 100%; background:rgba(255,255,255,0.7);padding: 15px 0;}
@media(min-width: 992px){
  header{padding: 20px 0;}
}
.header-inner { position: relative; display: flex; align-items: center; }

.ward{padding: 0 15px;}
@media (min-width: 768px){
  .ward{padding: 0 30px;}
}
@media (min-width: 1200px){
  .ward{padding: 0 50px;}
}
@media (min-width: 1400px){
  .ward{max-width: 1280px;margin: 0 auto;}
}



.mx-auto { display: block; }

a{text-decoration: none;color:#838382;}
a:hover,a:focus {text-decoration: none !important;}
a,input,button {outline: none!important;}
.editor {overflow: hidden;}
.editor img {display: inline-block;max-width: 100%!important;height: auto!important;}
.editor iframe {max-width: 100%;}
.editor table {max-width: 100%!important;}

/*logo*/
.logo { width: auto; height: 40px; margin: 10px 0; }
@media(min-width: 768px) {
  .logo { height: 60px; }
}
@media(min-width: 1400px) {
  .logo { height: 70px; }
}
.header-right { min-height: 20px; flex-grow: 1; display:flex;justify-content: flex-end;align-items: center; }

.box-logo { width: 30%; }
.header-right { width: 70%; }
@media(min-width: 768px) {
  .box-logo { width: 30%; }
  .header-right { width: 70%; }
}
@media(min-width: 992px) {
  .box-logo { width: 10%; }
  .header-right { width: 90%; }
}
@media(min-width: 1400px) {
  .box-logo { width: 10%; }
  .header-right { width: 90%; }
}


/*lang*/
.lang { color: #252525; display: flex; position: relative;}
.lang span{background: #fff;display:flex;border-radius: 1rem;overflow: hidden;}
.lang span a{padding: 5px 10px;}
.lang .active{}
.lang a:hover{color:#ff3833}
.lang-submenu{background: #fff;position:absolute;top: 35px;left: -32px;display: none;z-index: 9999;}
.lang-submenu li{padding: 3px 10px;min-width: 80px;text-align: center;border-bottom: 1px solid #efefef;}
/*.lang:hover .lang-submenu{display: block;}*/
@media(min-width: 768px){
  .lang-submenu{top: 38px;left: -30px;}
}
@media(min-width: 992px){
  .lang{margin: 0 18px;}
}
@media(min-width: 1600px){
  .lang-submenu{top: 40px;}
}
.top-menu-icon{display: flex;align-items: center;margin-left: 5px;}
.top-menu-icon a{padding:0 20px;border-left: 1px solid #808080;min-height: 22px;display: flex;align-items: center;}
@media(max-width: 991.98px){
  .top-menu-icon a{padding:0 10px;border:0;}
  .top-menu-icon .icon-04{display: none;}
}
.top-menu-icon img{width: 20px;}
/*search*/
.search-icon{margin-left: 15px;}
.search-icon:hover{color:#ff3833}
.search-icon-input{
  width: 100%;
  position: absolute;
  top:50px;
  left: 0;
  background: #efefef;
  padding: 10px 0px;
  text-align: center;
  z-index: 999;
}
.search-icon-input input{border:0;border-radius: 5px;padding: 5px;min-width: 50%;padding: 5px 15px;}
@media(min-width: 992px){
  .search-icon-input{top: 68px;}
  .top-menu-icon{margin-left: 10px;}
  .top-menu-icon a{padding: 0 20px;}
}
@media(min-width: 1280px){
  .top-menu-icon{margin-left: 15px;}
  .top-menu-icon a{padding: 0 35px;}
}

/*nav*/
.box-menu { float: right;display: flex;}

.box-menu li {position: relative;font-family:'MYuenHK-SemiBold',Arial;}
.box-menu > ul > li { padding: 0 5px; }
.box-menu > ul > li:last-child { }
.box-menu > ul > li > a { font-size:16px;color: #86b300; display: block; padding: 8px 22px; }
@media(min-width: 992px) {
  .box-menu > ul > li { padding: 0; }
  /*.box-menu > ul > li > a { padding: 8px 16px 8px 22px;  margin:15px 0; }*/
  /*.box-menu > ul > li > a { padding: 8px 20px 8px 26px;  margin:15px 0; }*/
  .box-menu > ul > li > a { padding: 8px 23px 8px 23px;  margin:15px 0; }
}
@media(min-width: 1280px) {
  .box-menu > ul > li { padding: 0 5px; }
  /*.box-menu > ul > li > a { padding: 8px 22px; }*/
  /*.box-menu > ul > li > a { padding: 8px 30px; }*/
  .box-menu > ul > li > a { padding: 8px 28px 8px 28px }
}
.box-menu > ul > li.dropdown:after {
  /* border: 8px solid transparent;
  border-top: 8px solid #c7c7c7; */
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  content: '';
  left:50%;
  margin-left:-4px;
}
.box-menu > ul > li:last-child > a {  }
.box-menu > ul { margin-bottom: 0; }
.box-menu > ul > li {text-align:center;float:left;position: relative;/* transition:all 0.6s;-moz-transition:all 0.6s;-webkit-transition:all 0.6s; */}
.box-menu > ul > li.active, .box-menu > ul > li.selected, .box-menu > ul > li:hover {  }
.box-menu > ul > li > a > span { color: #838382;/*font-weight: bold;*/}
@media(min-width: 1200px) {
  .box-menu > ul > li > a > span {  }
}
.box-menu > ul > li.active > a, .box-menu > ul > li.selected > a, .box-menu > ul > li:hover > a {color: #ff3833;background: url(../images/menu-icon.png) left no-repeat;background-size: 20px;}
@media(min-width: 1280px) {
  .box-menu > ul > li.active > a, .box-menu > ul > li.selected > a, .box-menu > ul > li:hover > a {color: #ff3833;background: url(../images/menu-icon.png) 4px center no-repeat;background-size: 20px;}
}
.box-menu > ul > li.active > a > span, .box-menu > ul > li.selected > a > span, .box-menu > ul > li:hover > a > span { color: #ff3833;}
.box-menu > ul > li > ul { position: absolute; top: 90%; padding-top: 20px; left: -5px; z-index: 99999; background-color: #fff; padding: 0 10px;
  opacity: 0;
  pointer-events: none;
  filter: alpha(opacity=0);
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
@media(min-width: 1600px) {
  .box-menu > ul > li > ul { left: 5px; }
}
.box-menu > ul > li > a > span:hover > ul { opacity: 1; }
.box-menu > ul > li ul li { text-align: left; padding: 8px 10px; border-bottom: solid 1px #efefef; }
.box-menu > ul > li ul li:last-child { border-bottom: none; }
.box-menu > ul > li ul li a { min-width: 140px; white-space: nowrap; color: #252525; }
.box-menu > ul > li ul li:last-child a { border-bottom: none; }
.box-menu > ul > li ul li a:hover, .box-menu > ul > li ul li a.active{ color: #003ca2; }
.box-menu > ul > li.selected > ul {/* display: block; */
  opacity: 1;
  filter: alpha(opacity=100);
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}


/* mobile menu */
/*.st-container{height: 100% !important;overflow:hidden;}
.st-menu-open .st-pusher::after{z-index: 9999;}
.st-menu ul.menu-mobile-content > li a{box-shadow: none;padding: 10px 15px;}
.st-menu ul li a { color: #838382; }

.mobile-menu-btn { float:right; }
@media(min-width: 576px) {
.mobile-menu-btn { margin-left: 15px; }
}

.menu-mobile {  }
.menu-mobile .menu-mobile-title {position: relative;height: 36px;}
.menu-mobile .button-close-menu{position: absolute;right:8px;top:8px;color:#fff;cursor: pointer;}
.menu-mobile .button-close-menu:hover {color:#292929;}
.menu-mobile .button-close-menu i {font-size: 20px;color: #838382;}
.menu-mobile .mobile-more {display: inline-block;width: 18px;height: 18px;position: absolute;top:20px;right:8px;font-size: 18px;color:#fff;cursor: pointer;text-align: center;
  -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.menu-mobile ul li.mobile-sub-open > .mobile-more {transform:rotate(180deg);}
.menu-mobile .mobile-more i{font-size: 18px;}
.menu-mobile .menu-mobile-content > li .dropdown-menu {position: static;}
.menu-mobile .mobile-dropdown-menu {margin-left:0!important;padding:0;display: none;}
.menu-mobile .mobile-sub-open > .mobile-dropdown-menu {display: block;}
.menu-mobile .mobile-dropdown-menu a {padding-left: 30px;text-decoration: none;}
.menu-mobile .mobile-dropdown-menu ul a{padding-left:50px;}
.menu-mobile .mobile-dropdown-menu ul ul a{padding-left:70px;}
.menu-mobile a:link, .menu-mobile a:visited, .menu-mobile a:hover, .menu-mobile a:active {text-decoration: none;}
.menu-mobile ul li li, .menu-mobile .see-all, .menu-mobile ul ul ul ul > li { background: #002c75; }
.menu-mobile ul li:hover, .menu-mobile ul li.mobile-sub-open {
  background: rgba(0,0,0,0.1);
  box-shadow: inset 0 -1px rgba(0,0,0,0);
  color: #fff;
}
 .menu-mobile ul li li:hover,.menu-mobile ul li li:visited,.menu-mobile ul li li:active, .menu-mobile .see-all:hover {
  background: #6c9045;
  box-shadow: inset 0 -1px rgba(0,0,0,0);
  color: #fff;
}
.menu-mobile ul ul ul > li {
  background: #6c9045;
}


.btn-ud {
  color: #fff!important;
  background:none;
  padding: 5px;
  border-radius: 5px;
}
.btn-ud .fa{color: #838382;font-size: 18px;}
.btn-ud:focus,
.btn-ud.focus {
  color: #fff;
  background-color: #fff;}
.btn-ud:hover {
  color: #fff;
  background-color: #fff;
}
.btn-ud:active,
.btn-ud.active,
.open > .dropdown-toggle.btn-ud {
  color: #fff;
  background-color: #fff;
}
.btn-ud:active:hover,
.btn-ud.active:hover,
.open > .dropdown-toggle.btn-ud:hover,
.btn-ud:active:focus,
.btn-ud.active:focus,
.open > .dropdown-toggle.btn-ud:focus,
.btn-ud:active.focus,
.btn-ud.active.focus,
.open > .dropdown-toggle.btn-ud.focus {
  color: #fff;
  background:none;
}
.btn-ud:active,
.btn-ud.active,
.open > .dropdown-toggle.btn-ud {
  background-image: none;
}
.btn-ud.disabled,
.btn-ud[disabled],
fieldset[disabled] .btn-ud,
.btn-ud.disabled:hover,
.btn-ud[disabled]:hover,
fieldset[disabled] .btn-ud:hover,
.btn-ud.disabled:focus,
.btn-ud[disabled]:focus,
fieldset[disabled] .btn-ud:focus,
.btn-ud.disabled.focus,
.btn-ud[disabled].focus,
fieldset[disabled] .btn-ud.focus,
.btn-ud.disabled:active,
.btn-ud[disabled]:active,
fieldset[disabled] .btn-ud:active,
.btn-ud.disabled.active,
.btn-ud[disabled].active,
fieldset[disabled] .btn-ud.active {
  background-color: #d17100;
}
*/
/*home-leftmenu*/
.home-leftmenu{
  position: fixed;
  top: 0;right:-100%;
  z-index: 999999;
  background: rgba(255,255,255,0.8);
  padding: 0 50px 50px;
  transition: 0.5s;
  border-radius: 0 0 0 30px;
  width:100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family:'MYuenHK-SemiBold',Arial;
}
@media(min-width: 768px){
  .home-leftmenu{width: 320px;}
}
.home-leftmenu-close{position: absolute;top:15px;right:15px;width: 25px;}
.home-leftmenu ul{width: 100%;border-top:1px solid #838382;border-bottom:1px solid #838382;padding: 15px 0;}
.home-leftmenu ul li{padding: 8px 0;}
.home-leftmenu ul li a:hover, .home-leftmenu ul li.active a{
  color: #ff3833;
}
.home-leftmenu.in{right:0;}
.home-leftmenu .inner-leftmenu{background: #fff;}
.home-leftmenu:before{
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  right: -100%;
  z-index: -1;
}
.home-leftmenu-lang{
  background: #838382 url(../images/top-icon-01-2.png) 15px  no-repeat;
  color: #fff;
  padding: 8px 15px;
  text-align: center;
  border-radius: 30px;
  display: inline-block;
  width: 100%;
  margin: 15px 0;
}
.home-leftmenu-lang a{color: #fff;}
.home-leftmenu-search{background: #838382 url(../images/top-icon-02-2.png) 15px  no-repeat;padding-left: 45px;overflow: hidden}
.home-leftmenu-search input{background: #838382;border:0;color: #fff;max-width: 160px;}

/*main-all*/
.main-all {  }


/*slideshow*/
.swiper-container { max-width: 1920px; margin: auto;position: relative;}
/*.swiper-container img{
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
  }*/
.swiper-pagination-bullet { position: relative;height: 12px; width: 12px;border-radius: 50%; background:none;border:1px solid #838382; outline: none; opacity: 1;}
.swiper-pagination-bullet-active:before {content: "";background-color: #ff3833;width: 100%;height:100%;position: absolute;top: 1px;left:1px;border-radius: 50%;z-index: -1; }
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
  content: ' ';
}
/*.swiper-button-prev { background: url(../images/new-left-s.png) center no-repeat; }
.swiper-button-next { background: url(../images/new-right-s.png) center no-repeat; }*/

@media(min-width: 768px) {
  .swiper-pagination-bullet { height: 15px; width: 15px;}
  .swiper-button-prev { background: url(../images/home-prev.png) center no-repeat; }
  .swiper-button-next { background: url(../images/home-next.png) center no-repeat; }
}
.swiper-button-next, .swiper-button-prev { outline: none; color: #fff; top: 55%; transition: all 0.8s; height: 30px; width: 30px; }
@media(min-width: 768px) {
  .swiper-button-next, .swiper-button-prev { top: 55%; display: block; opacity: 1; height: 60px; width: 60px; }
}
.swiper-button-prev {  }
.swiper-button-next {  }
@media(min-width: 1200px) {
  .swiper-button-prev { left: 30px; }
  .swiper-button-next { right: 30px; }
}
.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { opacity: 1; transition: all 0.8s; }
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; }
@media(min-width: 768px) {
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; }
}
@media(min-width: 1400px) {
  .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; }
}
/*.swiper-slide { position: relative; height: 440px; }
@media(min-width: 768px) {
.swiper-slide { height: 520px; }
}
@media(min-width: 1200px) {
.swiper-slide { height: 620px; }
}
@media(min-width: 1400px) {
.swiper-slide { height: 720px; }
}
@media(min-width: 1600px) {
.swiper-slide { height: 810px; }
}*/
.slideshow-1 { background: url(../images/slideshow1.png) center no-repeat; background-size: cover; }
.slideshow-2 { background: url(../images/slideshow2.jpg) center no-repeat; background-size: cover; }
.slideshow-3 { background: url(../images/slideshow3.jpg) center no-repeat; background-size: cover; }
.slideshow-4 { background: url(../images/slideshow4.jpg) center no-repeat; background-size: cover; }
.slideshow-text { color: #fff; padding: 5% 0 0; text-shadow: 0 0 5px #000; }


.swiper-slide{position: relative;}
.swiper-slide-bottom{
  position: absolute;
  /*top:12%;*/
  /*right: 12.6%;*/
  z-index: 9999;
  /*width: 24vw;*/
}
@media(min-width: 1921px) {
  .swiper-slide-bottom {
    /*right: 8%;*/
  }
}
@media(min-width: 2200px) {
  .swiper-slide-bottom {
    /*right: 6%;*/
  }
}

.swiper-slide-text{
  color: #fff;
  padding: 1rem;
  font-weight: bold;
  text-align: center;
}
.swiper-slide-text-tit{
  font-size: 30px;
}
.swiper-slide-text-sec{
  font-size: 24px;
}

/*.swiper-slide-active .swiper-slide-text{
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}*/
/*@media(max-width: 991.98px){
  .swiper-slide-text img{height: auto!important;}
}
@media(min-width: 420px){
  .swiper-slide-text{
    max-width: 140px;
    padding: 1rem;
  }
}
@media(min-width: 576px){
  .swiper-slide-text{
    max-width: 200px;
    padding: 1rem 2rem;
  }
}
@media(min-width: 992px) {
  .swiper-slide-text {
    max-width: 290px
  }
}
@media(min-width: 1280px) {
  .swiper-slide-text {
    max-width: 320px
  }
}
.swiper-slide-text-tit{
  font-size: 52px;
  line-height: 52px;
}
.swiper-slide-text-sec{
  font-size: 36px;
  line-height: 36px;
}*/
/*
@media(min-width: 1400px){
  .swiper-slide-text{max-width: 360px;padding: 2rem;}
  .swiper-slide-text-tit{
    font-size: 60px;
    line-height: 60px;
  }
  .swiper-slide-text-sec{
    font-size: 42px;
    line-height: 42px;
  }
}
@media(min-width: 1600px){
  .swiper-slide-text{max-width: 450px;padding: 2rem;}
}
*/

/*home-top-form*/
.home-top-form{position: relative;top: 3%;right: 0;z-index: 9999;}
.home-top-form-list{background: rgba(0,60,162,0.7);margin-bottom: 1rem;position: relative;min-height:48px;}
.home-top-form-list a{color: #fff;display: inline-block;}
.home-top-form-list .div1{padding:10px 12px;background: #fbac35;position: absolute;left: -52px;border-radius: 2rem 0 0 2rem;}
.home-top-form-list .div1 img{width: 28px;}
.home-top-form-list .div2{padding:12px 1rem;}
.home-top-form-list .div-form{padding: 1rem;}
.home-top-form-list .div-form-tit{color: #fbac35;font-weight: bold;}
.home-top-form-list .div-form-sec{font-size: 12px;margin-bottom: 1rem;}
.div-form-input input{width: 100%;border:0;padding: 5px;margin-bottom: 1rem;font-size: 14px;color: #666;}
.div-form-button{border:0;background: #fbac35;width: 100%;padding: 5px;}
@media(max-width: 767.98px){
  .home-top-form{left:15%;width: 85%;background: #fff;}
}
@media(min-width: 768px){
  .home-top-form{position: absolute;top: 3%;}
  .home-top-form-box{position: relative;}
  .hide1{position: absolute;right: 0;top:0;}
  .hide1 .div2{min-width: 200px;}
  .hide2{position: absolute;right: 0;top:58px;}
  .hide2 .div2{min-width: 320px;}
  .hide3{position: absolute;right: 0;top:275px;}
  .hide3 .div2{min-width: 200px;}
  .home-top-form .in{transition: 0.5s;margin-right: -200px;}
  .home-top-form .in2{transition: 0.5s;margin-right: -320px;}
  .home-top-form .in3{transition: 0.5s;margin-right: -200px;/*top:118px;*/}
  .home-top-form-list .div1{padding:10px 12px;background: #fbac35;position: absolute;left: -52px;border-radius: 2rem 0 0 2rem;}
  .hide2 .div2{max-width: 320px;}
}


@media(min-width: 992px){
  .home-top-form{position: absolute;top: 5%;}
}
@media(min-width: 1600px){
  .home-top-form{position: absolute;top: 8%;}
}


/*all-item-padding*/
.all-item-padding { padding: 30px 0; }
.inner-item-padding{ padding: 30px 0;}
.all-mt{margin-top: 30px;}
@media(min-width: 768px) {
  .all-item-padding { padding: 50px 0; }
  .inner-item-padding{ padding: 40px 0;}
  .all-mt{margin-top: 50px;}
}
@media(min-width: 1400px) {
  .all-item-padding { padding: 80px 0; }
  .inner-item-padding{ padding:50px 0;}
  .all-mt{margin-top: 80px;}
}


/*title*/
.home-title { font-size: 18px; color: #333333;margin-bottom: 30px;letter-spacing: 7px;font-family:'MYuenHK-Xbold',Arial;}
.home-title span{display: inline-block;padding-bottom: 1rem;position:relative;z-index: 1;}
.home-title2 span{color: #fff;}
.home-title span:before{
  content: "";
  width: 12px;
  height: 12px;
  background: #003ca2;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  bottom:-6px;
  z-index: 3;
}
.home-title2 span:before{
  background: #fbac35;
}
.home-title span:after{
  content: "";
  background: #fbac35;
  min-width: 100px;
  max-width: 270px;
  height: 1px;
  position: absolute;
  left: 0;
  right:0;
  bottom: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}
.home-title2 span:after{
  background: #fff;
}
.home-sectitle{color: #838382;max-width: 600px;margin: 0 auto;margin-bottom: 30px;letter-spacing: 3px;line-height: 28px;position: relative;}
.home-title2 .span-title:before{
  left: 0;
  right:0;
  margin:0 auto;
}
@media(min-width: 768px) {
  .home-title { font-size: 24px;}
}


/*home-more*/
.home-more {margin-top:30px;}
.home-more .button{
  position:relative;
  color: #fff;
  display: inline-flex;
  align-items: center;
  text-align:center;
  font-style: normal;
  border:3px solid #fff;
  overflow: hidden;
  z-index: 1;
  font-weight: bold;
}
.home-more .button:before{
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.1);
  position: absolute;
  left: -100%;
  top: 0;
  transition: 0.5s;
  z-index: -1;
}
.home-more .button span{display: inline-block;}
.home-more .button .span-btn1{border-right: 3px solid #fff;padding: 5px 15px;min-width:100px;text-align: center;}
.home-more .button .span-btn2{padding: 5px;}
.home-more .button .span-btn2 img{width: 25px;}
.home-more .button:hover.button:before{left: 0;}
@media(min-width: 1200px){
  .home-more .button{font-size: 18px;}
}
.home-btn{margin-top: 50px;}
.home-btn img{height: 40px;}
.inner-btn a{margin: 0 50px;display: inline-block;}
@media(max-width: 767.98px){
  .home-btn{margin-top: 30px;}
  .inner-btn a{margin: 0 30px;}
  .inner-btn a:first-child{margin-bottom:15px;}
}
.animateBtn{
  /*animation: scaleUp 2.5s ease-in-out infinite;*/
  /*-webkit-animation: scaleUp 2.5s ease-in-out infinite;*/
  position: relative;
}
@keyframes scaleUp{
  0%{
    transform: scale(1);
    top: 0px;
  }
  25%{
    transform: scale(1.15);
    top: -8px;
  }
  50%{
    transform: scale(1);
    top: 0px;
  }
  75%{
    transform: scale(1.15);
    top: -8px;
  }
  100%{
    transform: scale(1);
    top: 0px;
  }
}


/*home-about*/
.home-about{
  background: url(../images/study-bg.png) bottom no-repeat;
  background-size: 100%;
  position: relative;
}
.home-about-study-leaf{position: absolute;right: 0;top: 0px;z-index: 9999;}
.home-about-study-leaf img{width: 100px;}
.home-about-study img{width: 60px}
.home-about-study-l{position: absolute;left: -10px;top: -40px;}
.home-about-study-r{position: absolute;right: 20px;bottom: 0px;}

@media(min-width: 768px){
  .home-about-study-leaf{position: absolute;right: 9%;top: -40px;}
  .home-about-study-leaf img{width: 150px;}
  .home-about-study img{width: 80px}
  .home-about-study-l{position: absolute;left: -60px;top: -70px;}
  .home-about-study-r{position: absolute;right: -40px;bottom: -50px;}
}
@media(min-width: 1400px){
  .home-about-study-leaf{position: absolute;right: 9%;top: -40px;}
  .home-about-study-leaf img{width: 220px;}
}

/*home-class*/
.slick-slide{outline: none;}
.home-class-slide{margin-bottom: 60px !important;}
@media(min-width: 768px){
  .home-class-slide{margin-bottom: 80px !important;}
}
.home-class-slide .slick-prev, .about-consultant-list .slick-prev{
  background: url(../images/home-class-left.png) center no-repeat;
  background-size: cover;
  left: -30px;
  z-index: 99;
  height: 56px;
}
.home-class-slide .slick-next, .about-consultant-list .slick-next{
  background: url(../images/home-class-right.png) center no-repeat;
  background-size: cover;
  right: -30px;
  z-index: 99;
  height: 56px;
  width: 21px;
}
.home-class-slide .slick-prev:before,.home-class-slide .slick-next:before{
  display: none;
}
.about-consultant-list .slick-prev:before,.about-consultant-list .slick-next:before{
  display: none;
}
.home-class-slide .slick-dots li button{position: relative;background: none;border:1px solid #838382;border-radius: 50%;padding: 0 !important;width: 15px;height: 15px;z-index: 0;}
.home-class-slide .slick-dots li button:before{content: "";width: 100%;height:100%;border-radius: 50%;position: absolute;z-index: -2;left: 1px;top:1px;}
.home-class-slide .slick-dots .slick-active button:before{color: #ff3833;background: #ff3833;}
.home-class{
  background: #f7f7f7 url(../images/home-class-bg.png) bottom no-repeat;
  background-size: 100%;
  position: relative;
}
.home-class-icon01 {position: absolute;left: 0;top: 50px;}
.home-class-icon01 img{height: 60px;}
.home-class-icon02 {position: absolute;right:0;}
.home-class-icon02 img{height: 100px;}
.home-class-icon03 {position: absolute;right:0;bottom:0px;}
.home-class-icon03 img{height: 100px;}
@media(min-width: 768px){
  .home-class-icon01 {position: absolute;left: 0;}
  .home-class-icon01 img{height: 80px;}
  .home-class-icon02 {position: absolute;right: 5%;top: -10%;}
  .home-class-icon02 img{height: 160px;}
  .home-class-icon03 {position: absolute;right:20%;bottom:-100px;}
  .home-class-icon03 img{height: 200px;}
}
@media(min-width: 1400px){
  .home-class-icon01 {position: absolute;left: 8%;}
  .home-class-icon01 img{height: 100px;}
  .home-class-icon02 {position: absolute;right: 12%;top: -13%;}
  .home-class-icon02 img{height: 250px;}
}
.class-list{margin-bottom:30px;padding-top: 15px;}
.class-list-img{position: relative;}
.class-list-img img{border-radius: 50%;width: 100%;transition: 0.5s;}
.class-list-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/class-01-border.png) center no-repeat;
  background-size:cover;
}
/*.class-list-img:hover img{
  opacity: 0.7;
}*/

.class-list .class-list-img:before{
  left: -15px;
  top: 15px;
  background: url(../images/class-01-border.png) center no-repeat;
  background-size:cover;
}
.class-list .img-01:before{
  left: -15px;
  top: 15px;
  background: url(../images/class-01-border.png) center no-repeat;
  background-size:cover;
}
.class-list .img-02:before{
  left: 10px;
  top:-15px;
  background: url(../images/class-02-border.png) center no-repeat;
  background-size:cover;
}
.class-list .img-03:before{
  left: 20px;
  top:0;
  background: url(../images/class-03-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-01:before{
  left: -15px;
  top: 15px;
  background: url(../images/inner-class-01-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-02:before{
  left: 10px;
  top:-15px;
  background: url(../images/inner-class-02-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-03:before{
  left: 20px;
  top:0;
  background: url(../images/inner-class-03-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-04:before{
  left: -15px;
  top:-10px;
  background: url(../images/class-03-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-05:before{
  left: 10px;
  top:-15px;
  background: url(../images/class-03-border.png) center no-repeat;
  background-size:cover;
}
.inner-class-list .img-06:before{
  left: 0px;
  top:-15px;
  background: url(../images/class-03-border.png) center no-repeat;
  background-size:cover;
}
.class-list .img-01{margin-bottom:30px;}
.class-list .img-02{margin-bottom:30px;}
@media(min-width: 768px){
  .class-list .img-01{margin-top: 20px;margin-bottom:0px;}
  .class-list .img-02{margin-top: 80px;margin-bottom:0px;}
}
@media(min-width: 1200px){
  .class-list .img-02{margin-top: 100px;}
}

/*home-children*/
.home-children{
  position:relative;
}
.home-children-icon01{position:absolute;left: 10px;top: 5%}
.home-children-icon01 img{width: 200px;}
.home-children-icon02{position:absolute;right: 10%;top: 10%}
.home-children-icon02 img{width: 130px;}
.children-list-top{margin: 30px auto 10px;}
/*.children-list-box:hover .children-list-img img{opacity: 0.7;transition: 0.5s;}*/
@media(max-width: 767.98px){
  .children-list{margin: 0 30px;}
}
.children-list-top-img img{
  height: 45px;
  margin-bottom: 15px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.children-list-box:hover .children-list-top-img img{
  filter: grayscale(0);
  filter: gray;
}

.children-list-top-image {
  position: relative;
  width: 115px;
  height: 45px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 15px;
}

.children-list-top-image img {
  width: 115px;
  height: 45px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.children-list-box:hover .children-list-top-image img{
  filter: grayscale(0);
  filter: gray;
}
.children-list-top-image .text {
  width: 115px;
  height: 45px;
  line-height: 36px;
  text-align: center;
  color:#9c9c9c;
  position: absolute;
  left:0;
  top:0;
}
.children-list-box:hover, .children-list-box:hover .children-list-top-tit, .children-list-box:hover .children-list-top-image .text  {
  color:#ff8802;
}


.children-list-top-tit{text-align: center;color: #838382;letter-spacing: 3px;font-family:'MYuenHK-SemiBold',Arial;}
.children-list-top:hover .children-list-top-tit{color:#ff8802;}
.children-list-img{position: relative;}
.children-list-img{margin: 10px;}
.children-list-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/children-01-border.png) center no-repeat;
  background-size:cover;
}
.children-list-img .hover-more {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  /*line-height: 400%;*/
  background: rgba(0,0,0,0.6);
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
  /*padding-top: 56%;*/
  font-weight: bold;
  border-radius: 8%;
  font-size:1.1rem;
}
.children-list-box:hover .hover-more{
  opacity: 1;
}
.children-list .img-01:before{
  left: -20px;
  top: -10px;
  background: url(../images/children-01-border.png) center no-repeat;
  background-size:cover;
}
.children-list .img-02:before{
  left: 15px;
  top:20px;
  background: url(../images/children-02-border.png) center no-repeat;
  background-size:cover;
}
.children-list .img-03:before{
  left: 20px;
  top:-15px;
  background: url(../images/children-03-border.png) center no-repeat;
  background-size:cover;
}

/*home-people*/
.home-people{
  background: #f7f7f7 url(../images/home-people-bg.png) bottom no-repeat;
  background-size: 100%;
  position:relative;
}
.people-list{overflow: hidden;}
.people-list li{width: 31%;float: left;margin: 1%;position: relative;}
.people-list-tit{
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
}
.people-list-tit span {
  color: #fff;
}
.people-list li:hover .people-list-tit, .people-list .item:hover .people-list-tit{opacity: 1;}
.people-list-img{position: relative;margin: 10px;}
.people-list-img img{border-radius: 50%;}
.people-list-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/people-01-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-01:before{
  left: 15px;
  top: -5px;
  background: url(../images/people-01-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-02:before{
  left: 10px;
  top: 0;
  background: url(../images/people-02-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-03:before{
  left: 5px;
  top: -15px;
  background: url(../images/people-03-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-04:before{
  left: -15px;
  top: -5px;
  background: url(../images/people-04-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-05:before{
  left: 0px;
  top: 15px;
  background: url(../images/people-05-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-06:before{
  left: -5px;
  top: -15px;
  background: url(../images/people-06-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-07:before{
  left: 0px;
  top: 10px;
  background: url(../images/people-07-border.png) center no-repeat;
  background-size:cover;
}
.people-list .img-08:before{
  left: 15px;
  top: 0px;
  background: url(../images/people-08-border.png) center no-repeat;
  background-size:cover;
}
.home-people-icon01{position:absolute;left: 3%;top: 40px;}
.home-people-icon01 img{height: 40px;}
.home-people-icon02{position:absolute;right: 5%;top: -8%;}
.home-people-icon02 img{height: 60px;}
@media(min-width: 768px){
  .people-list li{width: 23%;}
  .home-people-icon02{position:absolute;right: 8%;top: -8%;}
  .home-people-icon02 img{height: 160px;}
}
@media(min-width: 1400px){
  .home-people-icon01{position:absolute;left: 10%;top: 60px;}
  .home-people-icon01 img{height: 60px;}
  .home-people-icon02{position:absolute;right: 10%;top: -10%;}
  .home-people-icon02 img{height: 220px;}
}

/*back-to-top*/
#back-to-top { position: fixed; right: 15px; bottom: 48px; z-index: 999;background: url(../images/gotop-icon.png) center no-repeat;background-size: cover;width: 50px;height: 50px;text-align: center;}
#back-to-top i {
  line-height: 46px;
}
@media(min-width: 768px) {
  #back-to-top { right: 3%; bottom: 50px; }
}
#back-to-top a { color: #fff; }


/*footer*/
footer { position: relative; padding: 15px 0;}
.footer-menu{border-bottom: 1px solid #808080;border-top: 1px solid #808080;padding:50px 0 35px;margin-bottom: 15px;font-size: 16px;}
.footer-menu-li ul{margin-bottom: 0;overflow: hidden;}
.footer-menu-li ul li{font-weight: 600;margin-bottom: 5px;}


.footer-menu-li .li-submenu ul:last-child{margin-right:0;}
.footer-menu-li ul li ul li{font-weight: normal;}
.footer-menu a,.footer-icon-r a{margin-right: 15px;display: inline-block;}
.footer-menu a:last-child,.footer-icon-r a:last-child{margin-right: 0;}
.footer-menu a:hover,.footer-icon-r a:hover{color: #ff6362;}
.footer-icon{padding:15px 0 50px;}
.footer-icon-l img{width: 30px;margin-right: 15px;}

.footer-fix-icon{position: fixed;right: 12%;bottom:50px;z-index: 9999;}
.footer-fix-icon a{display: inline-block;margin-right: 10px;}
.footer-fix-icon a img{height: 50px;}
.footer-fix-icon a:last-child{margin-right: 0;}
.footer-icon-r {margin-top:4px;}
@media(max-width: 991.98px){
  .footer-icon-r{text-align: left !important;margin-top: 10px;}
  .footer-fix-icon{bottom: 50px;}
  .footer-fix-icon a img{height: 40px;}
  #back-to-top {
    width: 42px;
    height: 42px;
  }
  #back-to-top i {
    line-height: 38px;
  }
  .li-submenu{display: none;}
}
@media(min-width: 992px){
  .footer-menu{display: flex;justify-content: center;}
  .footer-menu-li .li-submenu{display: flex;}
  .footer-menu-li{margin-right: 50px;}
  .footer-menu-li .li-submenu ul{margin-right: 50px;}
}
@media(min-width: 1200px){
  .footer-menu-li{margin-right: 80px;}
  .footer-menu-li .li-submenu ul{margin-right: 80px;}
}
@media(min-width: 1400px){
  .footer-fix-icon{right: 15%;}
}
@media(max-width: 767px){
  .footer-fix-icon{right: 20%;}
}


/*inner style*/
.inner-banner img{width: 100%;}
.inner-class{
  background: #fff;
  position:relative;
}
.inner-class .class-list{margin-bottom: 0;}
@media(min-width: 768px){
  .inner-class .class-list .img-02{margin: 5%;margin-top: 150px;}
  .inner-class .class-list .img-03{margin: 10%;margin-left: -5%;}
  .inner-class .class-list .img-04{margin-top: 4%;}
  /*.inner-class .class-list .img-05{margin: 8%;margin-top: -8%;}*/
  .inner-class .class-list .img-05{margin: 4%; margin-top: -2%;}
  .inner-class .class-list .img-06{margin: 8%; margin-top: 14%;}
}
.inner-top-box{
  position: relative;
}
.inner-class-icon01{
  position:absolute;
  width: 80%;
  top: 10px;
  left:0;
  right: 0;
  margin:0 auto;
  text-align:center;
}
.inner-class-icon02{
  position:absolute;
  width: 80%;
  bottom: 10px;
  left:0;
  right: 0;
  margin:0 auto;
}
.inner-class-icon02 img{height: 60px;}
@media(min-width: 768px){
  .inner-class-icon02 img{height: 80px;}
}
@media(min-width: 1400px){
  .inner-class-icon02 img{height: 100px;}
}
.inner-bottom-box{background: #f7f7f7;position:relative;margin-left:auto;margin-right: auto;}
/*.inner-box-in{padding: 0 3%;}*/
.inner-bottom-list{margin:0 3%;}
.inner-bottom-list-li{margin:0 12px;}
.inner-bottom-list-li img{border-radius: 40px;}
.inner-bottom-box .slick-prev{
  background: url(../images/inner-bottom-left.png) center no-repeat;
  background-size: cover;
  left: -30px;
  z-index: 99;
  height: 56px;
}
.inner-bottom-box .slick-next{
  background: url(../images/inner-bottom-right.png) center no-repeat;
  background-size: cover;
  right: -30px;
  z-index: 99;
  height: 56px;
  width: 21px
}
.inner-bottom-box .slick-prev:before,.inner-bottom-box .slick-next:before{
  display: none;
}
.inner-bottom-box-icon01{
  position:absolute;
  top:-20%;
  left:0;
  right: 0;
  width: 70%;
  margin:0 auto;
  text-align:center;
}
.inner-bottom-box-icon02{
  position:absolute;
  left:5%;
  bottom:-15%;
}
.inner-bottom-box-icon02 img{width: 150px;}


/*inner product-inner*/
.borderBox img{width: 100%;}
.inner-box-in .slider-for{padding:0 20px;margin-bottom: 30px;}
.inner-box-in .slider-for img{width: 100%;}
.inner-box-in .slider-for .borderBox {border-radius: 50%;margin-bottom: 10px;position:relative;margin:15px;}
.inner-box-in .slider-for .borderBox:before{
  content:"";
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/inner-class-in-icon01.png);
  background-size: cover;
  position:absolute;
  left:-15px;
  top:15px;
}
.inner-box-in .slider-nav{margin:0 15%;}
.inner-box-in .slick-prev{
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/home-class-left.png);
  background-size: cover;
  height: 46px;
}
.inner-box-in .slick-next{
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/home-class-right.png);
  background-size: cover;
  height: 48px;
  width: 18px;
}
.inner-box-in .slick-prev:before,.inner-box-in .slick-next:before{
  display: none;
}
.inner-box-in .slider-nav .slick-current .borderBox{position:relative;}
.inner-box-in .slider-nav .slick-current .borderBox:before{
  content:"";
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/inner-class-in-icon01-2.png);
  background-size: cover;
  position:absolute;
  left:0;
  top:0;
}
@media(max-width: 767.98px){
  .inner-listing-product{margin-top: 30px;}
  /*.swiper-wrapper{margin-top: 30px;}*/
}
.inner-box-in .slick-slide{padding: 0 5px;outline: none;}
@media(min-width:768px){
  .inner-box-in .slick-slide{margin: 0 2px;padding: 0;}
  .inner-box-in .slick-slide:last-child{
    margin-right:0px;
  }
}
@media(min-width: 1024px){
  .inner-box-in .productCat{padding-right: 50px;}
}
@media(min-width: 1200px){
  .inner-box-in .slider-for .borderBox{margin-right: 5px;}
}
.inner-box-in .slider-nav .borderBox { padding: 5px; border-radius: 5px;}
.borderBox img{width: 100%;}
.inner-listing-product .slider-nav .slick-current .borderBox{border: 1px solid #19bbb7;border-radius: 5px;}
.productCat .productName{margin-top:20px;display: flex;align-items: center;}
.productCat .productName span{
  /*font-weight: bold;*/
  font-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/inner-class-titbg.png);
  background-size: cover;
  padding: 10px 44px;
  color: #fff;
  display: inline-block;
}
.productCat .productName-icon img{width: 40px;margin-left: 8px;margin-right:8px;}
.productCat .productSec{font-size: 14px;margin: 15px 0 4px 0;color: #ff3833;}
.productCat .productThird{/*max-width: 430px;*/letter-spacing: 5px;padding-left:22px;}
.catBox{margin-top: 30px;}
.catBox ul li{position: relative;padding-left: 15px;margin: 10px 0;}
.catBox ul li:before{
  content: "";
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 10px;
}
.catBox-img{margin-top:30px; }
/*@media(max-width: 767.98px){
  .productCat{margin-top: 30px;}
}*/
.productCat .productSec {
  letter-spacing: 2px;
}
@media(min-width: 768px){
  .productCat .productName{font-size: 24px;}
  .productCat .productSec{font-size: 18px;}
  .productCat .productThird{padding-left:27px;}
}
@media(min-width: 1024px){
  .catBox-img{margin-top:50px; }
  .catBox-img img{width: 80%;}
}

.inner-class-in-btn{padding: 15px;display: flex;max-width: 430px;}
.inner-class-in-btn a{margin:15px;display:inline-block;width: 30%;}

.inner-class-in-icon00{position: absolute;left: 0;top: 0;right: 0;text-align: center;}
.inner-class-in-icon00 img{width: 90%;}
.inner-class-in-icon02{position: absolute;left: 5%;top: -20%;}
.inner-class-in-icon02 img{height: 60px;}
@media(min-width: 768px){
  .inner-class-in-icon02 img{height: 100px;}
}
@media(min-width: 768px){
  .inner-class-in-icon02 img{height: 180px;}
}

/*.other-textbook {
  max-width: 800px;
  margin-left:auto;
  margin-right:auto;
}*/

.other-textbook2 {
  max-width: 860px;
  margin-left:auto;
  margin-right:auto;
}
.other-textbook .title{
  text-align: center;
  margin-top:10px;
}
/*.animateBtn img {
  position: relative;
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
}

.animateBtn:hover img {
  top:-5px;
}*/
.animateBtn {
  display: inline-block;
  width: 213px;
  height: 40px;
  max-width: 213px!important;
}
.animateBtn:hover img{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;animation: tada 1s .2s ease both;}


/*** 首頁用戶分享 ***/
.box-home-user-share {
  position: relative;
  height: 33vw;
  max-height: 480px;
}

@media(min-width: 1280px) and (max-width: 1439px) {
  .box-home-user-share {
    height: 480px;
  }
}

@media(min-width: 992px) and (max-width: 1279px) {
  .box-home-user-share {
    height: 430px;
  }
}
@media(min-width: 768px) and (max-width: 991px) {
  .box-home-user-share {
    height: 310px;
  }
}
@media(min-width: 576px) and (max-width: 767px) {
  .box-home-user-share {
    height: 220px;
  }
}
.box-home-user-share .item img {
  max-width: 100%;
}
.box-home-user-share .item {
  max-width: 30%;
  position: absolute;
}
.box-home-user-share .item.item-01 {
  max-width: 26.3%;
  left:0;
  top:0;
}
.box-home-user-share .item.item-02 {
  max-width: 14.59%;
  left: 30.5%;
  top: 6%;
}
.box-home-user-share .item.item-03 {
  max-width: 22.52%;
  left: 47.8%;
  top: 18%;
}
.box-home-user-share .item.item-04 {
  max-width: 29.9%;
  right: 0;
  top: 0;
}
.box-home-user-share .item.item-05 {
  max-width: 17.4%;
  left: 4.4%;
  top: 41%;
}
.box-home-user-share .item.item-06 {
  max-width: 21.92%;
  left: 25.5%;
  top: 54%;
}
.box-home-user-share .item.item-07 {
  max-width: 29%;
  right: 0;
  top: 58%;
}

@media(max-width: 767px) {
  .box-home-user-share {
    height: 94vw;
  }
  .box-home-user-share .item.item-01 {
    max-width: 49%;
    left:0;
    top:0;
  }
  .box-home-user-share .item.item-02 {
    max-width: 31%;
    left: 31.8%;
    top: 25%;
  }
  .box-home-user-share .item.item-03 {
    max-width: 37%;
    left:64%;
    top: 33%;
  }
  .box-home-user-share .item.item-04 {
    max-width: 49%;
    right: 0;
    top: 0;
  }
  .box-home-user-share .item.item-05 {
    max-width: 30%;
    left: 0;
    top: 30%;
  }
  .box-home-user-share .item.item-06 {
    max-width: 46%;
    left: 2%;
    top: 72%;
  }
  .box-home-user-share .item.item-07 {
    max-width: 51%;
    right: 0;
    top: 67%;
  }
}

.box-home-user-share .item.hover-style-1:hover img{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;}

.box-home-user-share .item.hover-style-2 img .box-home-user-share .item.hover-style-3 img {
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
}
.box-home-user-share .item.hover-style-2:hover img {
  margin-top:-8px;
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
}

.box-home-user-share .item.hover-style-3:hover img {
  transform: scale(1.05);
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
}

.class-list .class-list-img {
  position: relative;
}

.class-list .class-list-img .hover-more{
  position: absolute;
  display: block;
  bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  width: 100%;
  height: 100%;
  /*line-height: 400%;*/
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
  /*padding-top:56%;*/
  font-weight:bold;
  font-size:1.1rem;
}

.class-list .class-list-img:hover .hover-more{
  opacity: 1;
}

.footer-menu-li .title > a{
  /*font-size:16px!important;*/
}

@media(min-width: 1400px) {
  .main-all {padding-top:130px;}
}
@media(min-width: 992px) and(max-width: 1399px) {
  .main-all {padding-top:120px;}
}
@media(min-width: 768px) and (max-width: 991px) {
  .main-all {padding-top:110px;}
}
@media(max-width: 767px) {
  .main-all {padding-top:115px;}
}
.footer-menu-li {
  font-family:'MYuenHK-SemiBold',Arial;
}
.semi-bold {
  font-family:'MYuenHK-SemiBold',Arial;
}
.xbold {
  font-family:'MYuenHK-Xbold',Arial;
}
.footer-menu-li .li-submenu {
  font-size:14px!important;
  font-family:'MYuenHK-Light',Arial;
}



/*** 用家分享 start ***/
#body-share, #body-faq, #body-contact{
   background-repeat: no-repeat;
   background-image: url(../images/share-bg.png);
   background-size: cover;
   background-position: center 80px;
 }

@media(min-width: 1440px) {
  #body-share, #body-faq, #body-contact{
    background-size: 1440px;
  }
}

.share-title {
  font-size: 2.8rem;
  text-align: center;
  color:#ff80c2;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  width: 320px;
  /*white-space: nowrap;*/
}
.share-title:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 51px;
  background: url("../images/q-mark-left.png") no-repeat center center;
  background-size: 100%;
  left:-9%;
  top:-30px;
}
.share-title:after {
  content: '';
  position: absolute;
  width: 60px;
  height: 51px;
  background: url("../images/q-mark-right.png") no-repeat center center;
  background-size: 100%;
  right:-6%;
  top:-25px;
}

.share-filter img {
  max-width: 280px;
}

@media(max-width: 575px) {
  .share-title {
    font-size: 2rem;
    width: 200px;
  }
  .share-title:before {
    width: 40px;
    height: 34px;
    left:-16%;
    top:-25px;
  }
  .share-title:after {
    width: 40px;
    height: 34px;
    right:-11%;
    top:-25px;
  }
  .share-filter .item{
    margin: 10px 0;
    text-align: center;
  }
  .box-dropdown {
    margin:0 auto;
  }
}

@media(min-width: 576px) {
  .share-filter .item:first-child .box-dropdown {
    float: right;
    margin-right:12%;
  }
  .share-filter .item:last-child .box-dropdown, .share-filter .item:last-child .button-image-wrapper {
    margin-left:12%;
  }
}


.box-dropdown {
  position: relative;
  width: 213px;
  /*margin:0 auto;*/
}
.box-dropdown .dropdown-button{
  font-size: 1.1rem;
  letter-spacing: 1px;
  display: inline-block;
  width: 213px;
  height: 40px;
  line-height: 33px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("../images/share-btn-1.png");
  text-align: center;
}
.box-dropdown .dropdown-content {
  position: absolute;
  width: 74%;
  top:100%;
  left:13%;
  z-index: 993;
  border:2px solid #ff8502;
  border-top:0;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 0 0 14px 14px;
  opacity: 0;
  pointer-events: none;
  filter: alpha(opacity=0);
  /*-webkit-transform: translateY(10px);*/
  /*-moz-transform: translateY(10px);*/
  /*transform: translateY(10px);*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  text-align: center;
}
.box-dropdown.active .dropdown-content {
  opacity: 1;
  filter: alpha(opacity=100);
  pointer-events: auto;
  /*-webkit-transform: translateY(0px);*/
  /*-moz-transform: translateY(0px);*/
  /*transform: translateY(0px);*/
}

.box-dropdown .dropdown-search-icon {
  max-height: 26px;
  position: relative;
  top:-1px;
}

.dropdown-content li {
  margin: 8px 0;
  padding: 0 0 12px 0;
  position: relative;
}
.dropdown-content li:last-child:after {
  background:none!important;
}
.dropdown-content li:after {
  content: '';
  width: 26px;
  height: 3px;
  background: url("../images/bg-line.png?v=1.0.1") repeat-x center;
  position: absolute;
  left:50%;
  margin-left:-13px;
  bottom: 0;
}
.dropdown-content li.active {
  font-family:'MYuenHK-SemiBold',Arial;
}
.box-dropdown .dropdown-button img {
  max-width: 28px;
}
.box-dropdown.dropdown-style-1 {
  color:#ff8502;
}
.box-dropdown.dropdown-style-1 a{
  color:#ff8502;
}
.box-dropdown.dropdown-style-2 {
  color:#ff3833;
}
.box-dropdown.dropdown-style-2 a{
  color:#ff3833;
}

.box-dropdown.dropdown-style-2 .dropdown-button {
  background-image: url("../images/share-btn-2.png?v=1.0.1");
}
.box-dropdown.dropdown-style-2 .dropdown-content li:after {
  background: url("../images/bg-line2.png?v=1.0.2") repeat-x center;
}
.box-dropdown.dropdown-style-2 .dropdown-content {
  border:2px solid #ff3833;
  border-top: none;
}
.box-dropdown.dropdown-style-1 .dropdown-content li.active, .box-dropdown.dropdown-style-1 .dropdown-content li.active a {
  color:#ff3833;
}
.box-dropdown.dropdown-style-2 .dropdown-content li.active, .box-dropdown.dropdown-style-2 .dropdown-content li.active a {
  color:#ff8502;
}

.box-dropdown.dropdown-style-3 .dropdown-content li:after {
  background: url("../images/bg-line3.png?v=1.0.2") repeat-x center;
}

.box-dropdown.dropdown-style-3 {
  color:#ab8abf;
}
.box-dropdown.dropdown-style-3 a{
  color:#ab8abf;
}
.box-dropdown.dropdown-style-3 .input-group-text, .box-dropdown.dropdown-style-3 .form-control{
  border: 1px solid #ab8abf;
}


.box-dropdown.dropdown-style-3 .dropdown-button {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("../images/share-btn-3.png");
}

.box-dropdown.dropdown-style-3 .dropdown-content {
  border:2px solid #ab8abf;
  border-top: none;
}

.box-dropdown.dropdown-style-3 .dropdown-content li.active, .box-dropdown.dropdown-style-3 .dropdown-content li.active a {
  color:#ff3833;
}


.box-dropdown.dropdown-style-4 .dropdown-button {
  background-image: url("../images/dropdown-blue-bg.png?v=1.0.2");
}
.box-dropdown.dropdown-style-4 .dropdown-content li:after {
  background: url("../images/bg-line4.png?v=1.0.2") repeat-x center;
}
.box-dropdown.dropdown-style-4 {
  color:#2793bf;
}
.box-dropdown.dropdown-style-4 a{
  color:#2793bf;
}
.box-dropdown.dropdown-style-4 .input-group-text, .box-dropdown.dropdown-style-4 .form-control{
  border: 1px solid #2793bf;
}

.box-dropdown.dropdown-style-4 .dropdown-content {
  border:2px solid #2793bf;
  border-top: none;
}

.box-dropdown.dropdown-style-4 .dropdown-content li.active, .box-dropdown.dropdown-style-4 .dropdown-content li.active a {
  color:#b631ae;
}

.box-dropdown.dropdown-style-5 .dropdown-button {
  background-image: url("../images/dropdown-purple-bg.png?v=1.0.1");
}
.box-dropdown.dropdown-style-5 .dropdown-content li:after {
  background: url("../images/bg-line4.png?v=1.0.2") repeat-x center;
}
.box-dropdown.dropdown-style-5 {
  color:#b631ae;
}
.box-dropdown.dropdown-style-5 a{
  color:#b631ae;
}
.box-dropdown.dropdown-style-5 .input-group-text, .box-dropdown.dropdown-style-5 .form-control{
  border: 1px solid #b631ae;
}

.box-dropdown.dropdown-style-5 .dropdown-content {
  border:2px solid #b631ae;
  border-top: none;
}

.box-dropdown.dropdown-style-5 .dropdown-content li.active, .box-dropdown.dropdown-style-5 .dropdown-content li.active a {
  color:#b631ae;
}


.box-share {
  padding-bottom: 7rem;
}
.share-list .item {
  margin: 2rem 0;
}
.share-list .item .inner {
  padding: 0 2rem;
}
.share-list .item .item-info {
  position: relative;
  cursor: pointer;
}

.share-list .hover-more {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 100%;
  line-height: 400%;
  background: rgba(0,0,0,0.6);
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
  padding-top: 56%;
  font-weight: bold;
  border-radius: 8%;
}

.share-list .item-info:hover .hover-more {
  opacity: 1;
}
.share-list .item-info img {
  border-radius: 26px;
}

.share-list .item .item-info:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.share-list .item.item-01 .item-info:before{
  background-image: url("../images/share-boder-01.png");
  left: 22px;
  top: -5px;
}
.share-list .item.item-02 .item-info:before{
  background-image: url("../images/share-boder-02.png");
  left: 22px;
  top: 15px;
}
.share-list .item.item-03 .item-info:before{
  background-image: url("../images/share-boder-03.png");
  left: 22px;
  top: 15px;
}
.share-list .item.item-04 .item-info:before{
  background-image: url("../images/share-boder-04.png");
  left: 14px;
  top: -8px;
}
.share-list .item.item-05 .item-info:before{
  background-image: url("../images/share-boder-05.png");
  left: -20px;
  top: 14px;
}
.share-list .item.item-06 .item-info:before{
  background-image: url("../images/share-boder-06.png");
  left: 16px;
  top: -12px;
}
/*
.box-share-list {
  padding-bottom: 3rem;
}
 */
.box-share-list .box-share {
  position: relative;
}
.share-list {
  /*padding-bottom: 50px;*/
}
.box-share .swiper-container-horizontal>.swiper-pagination-bullets, .box-share .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0;
}


.box-share .swiper-button-prev {
  width: 36px;
  height: 91px;
  background: url(../images/home-class-left.png) center no-repeat;
  background-size: cover;
  left: 8%;
  top:43%;
}
.box-share .swiper-button-prev.swiper-button-disabled {
  display: none;
}
.box-share .swiper-button-next {
  width: 36px;
  height: 91px;
  background: url(../images/home-class-right.png) center no-repeat;
  background-size: cover;
  right: 8%;
  top:43%;
}
.box-share .swiper-button-next.swiper-button-disabled {
  display: none;
}
.box-share .swiper-pagination {
  text-align: center;
}
.box-share .swiper-pagination-bullet {
  margin-left:4px!important;
  margin-right:4px!important;
}

.box-share-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box-share-detail .image {
  width: 38%;
}
.box-share-detail .image-inner {
  padding:1rem;
}
.box-share-detail .info {
  width: 62%;
  padding-left:4%
}
.box-share-detail .info.no-image-info {
  width: 100%;
  padding-left:0;
}

.share-detail-title {
  font-size: 1.8rem;color:#ff80c2;letter-spacing: 2px;
  margin: 25px 0;
}
@media(max-width: 767px) {
  .box-share-detail {
    display: block;
  }
  .box-share-detail .image {
    width: 100%;
  }
  .box-share-detail .info {
    width: 100%;
  }
}
.box-share-detail .share-detail-img {
  position: relative;
}
.box-share-detail .share-detail-img img {
  border-radius: 32px;
}
.box-share-detail .share-detail-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.box-share-detail .share-detail-img::before{
  background-image: url("../images/share-big-border.png");
  left: -8px;
  top: 6px;
}
.button-share {
  max-width: 80px;
  display: inline-block;
  text-align: right;
}
.box-share-detail .description p {
  margin-bottom:1.2rem;
}



/*** 用家分享 end ***/



/** popup style start **/
.popup-content {
  background-color: #fff;
  margin: 40px auto;
  border-radius: 40px;
  min-height: 200px;
  position: relative;
  max-width: 1080px;
}
.popup-content.popup-information-content {
  max-width: 1000px;
}
.popup-content .mfp-close {
  width: 50px;
  height:50px;
  background-image: url("../images/popup-close.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-indent: -9999px;
  left:-65px!important;
  opacity: 1!important;
}
@media(max-width: 1279px) {
  .popup-content .mfp-close {
    width: 36px;
    height:36px;
    left:0!important;
    top:-50px;
  }
}
@media(max-width: 768px) {
  .popup-content .mfp-close {
    width: 30px;
    height:30px;
    left:0!important;
    top:-35px;
  }
}
.popup-content .mfp-close:hover {
  opacity: .8!important;
}

.popup-content .popup-inner {
  padding: 2rem 4%;
}


.popup-content.popup-alert {
  max-width: 340px;
  border-radius: 20px;
  min-height: 160px;
  text-align: center;
}

.popup-content.popup-alert .mfp-close {
  width: 40px;
  height: 40px;
  left:-50px!important;
}


.popup-content.popup-open {
  max-width: 600px;
  border-radius: 30px;
  text-align: center;
}

/** popup style end **/




/** form style start **/

#form-page{
  background-repeat: no-repeat;
  background-image: url(../images/form-bg-bottom.png);
  background-size: 100%;
  background-position: center bottom;
}

.form-title {
  font-size: 1.9rem;
  text-align: center;
  color:#7b3bb8;
  letter-spacing: 6px;
  position: relative;
  margin:0 auto;
  width: 300px;
  /*white-space: nowrap;*/
}
.form-title:before {
  content: '';
  position: absolute;
  width: 35px;
  height: 74px;
  background: url("../images/form-title-bg-left.png") no-repeat center center;
  background-size: 100%;
  left:-16%;
  top:-20px;
}
.form-title:after {
  content: '';
  position: absolute;
  width: 35px;
  height: 74px;
  background: url("../images/form-title-bg-right.png") no-repeat center center;
  background-size: 100%;
  right:-14%;
  top:-17px;
}

@media(min-width: 768px) and (max-width: 991px) {
  .form-title {
    font-size: 1.5rem;
    width: 250px;
    /*white-space: nowrap;*/
  }
  .form-title:before {
    width: 30px;
    height: 64px;
    left:-12%;
    top:-18px;
  }
  .form-title:after {
    width: 30px;
    height: 64px;
    right:-12%;
    top:-15px;
  }
}

@media(max-width: 767px) {
  .form-title {
    font-size: 1.6rem;
    width: 260px;
  }
  .form-title:before {
    width: 30px;
    height: 64px;
    left:-12%;
    top:-18px;
  }
  .form-title:after {
    width: 30px;
    height: 64px;
    right:-12%;
    top:-15px;
  }
}

.form-style .radio {
  position: relative;
  line-height: 25px;
  display:flex;
}

.form-style .radio input[type="radio"], .form-style .radio input[type="checkbox"] {
  width: 18px;
  height: 18px;
  opacity: 0;
}

.form-style .radio label {
  position: inherit;
  left: 5px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #999;
}

.form-style .checkbox label, .form-style .radio label {
  min-height: 20px;
}


.form-style .radio input:checked+label {
  background-color: #973b9e;
  border: 1px solid #973b9e;
}

.form-style .radio input:checked+label::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 10px;
  top: 7px;
  left: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg)
}
.form-style .checkbox label, .form-style .radio label {
  padding-left:0;
}

.form-style .agree-radio {
  width:30px;
  margin-top: 3px;
}

@media (max-width:800px){
  .form-style .input-month { margin-bottom:20px; }
  .form-style .agree-radio {
    width:36px;
  }
  .form-style .agree-radio2 { width:30px; }
}

@media (max-width:400px){
  .form-style .radio-left {
    /*padding-left:3.8px;*/
  }
  .form-style .radio-left { margin-left:-3px; }
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}

.form-control {
  border:1px solid #878787;
  border-radius: .5rem;
  height: calc(1.5em + 1rem + 2px);
}

.tooltip-inner {
  background-color: #ff3833;
  color:#fff;
  border-radius: 5px;
  font-family:'MYuenHK-Xbold',Arial;
  font-size:1.1rem;
  padding-top: 6px;
  padding-bottom: 6px;
  letter-spacing: 2px;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{border-top-color:#ff3833}


.tooltip-blue .tooltip-inner {
  background-color: #2896c1;
}
.tooltip-blue .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-blue .bs-tooltip-top .arrow::before{border-top-color:#2896c1}


.tooltip-purple .tooltip-inner {
  background-color: #9158b3;
}
.tooltip-purple .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-purple .bs-tooltip-top .arrow::before{border-top-color:#9158b3}

.tooltip-golden .tooltip-inner {
  background-color: #d2ad2f;
}
.tooltip-golden .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-golden .bs-tooltip-top .arrow::before{border-top-color:#d2ad2f}

.tooltip-pink .tooltip-inner {
  background-color: #e4708f;
}
.tooltip-pink .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-pink .bs-tooltip-top .arrow::before{border-top-color:#e4708f}

.tooltip-red .tooltip-inner {
  background-color: #e52c3e;
}
.tooltip-red .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-red .bs-tooltip-top .arrow::before{border-top-color:#e52c3e}


.tooltip-green .tooltip-inner {
  background-color: #00ac2c;
}

.tooltip-green .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-green .bs-tooltip-top .arrow::before{border-top-color:#00ac2c}


.tooltip-green2 .tooltip-inner {
  background-color: #2cb574;
}

.tooltip-green2 .bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip-green2 .bs-tooltip-top .arrow::before{border-top-color:#2cb574}

.top-banner {
  position: relative;
}
.top-banner .animateBtn {
  display: inline-block;
  position: absolute;
  top:40%;
  right:26.2%;
}

.top-banner .animateBtn img {
  width: 14vw;
}

.slide-text {
  color:#838382;
}

.btn.btn-confirm {
  width: 213px;
  height: 40px;
  line-height: 18px;
  background: url("../images/confirm-button.png?v=1.0.1") no-repeat center;
  background-size: 100%;
  text-align: center;
  font-family: MYuenHK-Xbold;
  color: #838382;
  padding: .125rem .75rem .375rem;
  letter-spacing: 8px;
}

.my-hr {
  border-top: 1px solid rgba(0,0,0,.4);
}

.form-img {
  margin-top: 4rem;
  margin-bottom: 1rem;
  margin-right: .75rem;
}
@media(min-width: 768px) {
  .form-img {
    text-align: right;
  }
  .form-img img {
    width: 40vw;
    max-width: 100%;
  }
}
@media(min-width: 768px) and (max-width: 1439px) {
  .form-img img {
    width: 37vw;
  }
}


.form-imgs .item{
  position: relative;
  width: 50%;
  margin-top:15px;
  margin-bottom:15px;
}
.form-imgs .item img{border-radius: 50%;width: 100%;transition: 0.5s;}
.form-imgs .item:before{
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  width: 100%;
  height: 100%;
  background-image: url(../images/form-border-01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

.form-imgs .item.item-01 {
  width: 57%;
  margin-left:10%;
  margin-top: 7rem;
}

.form-imgs .item.item-02 {
  width: 48%;
  margin-left:40%;
  margin-top:6rem;
}

.form-imgs .item.item-02:before{
  background-image: url(../images/form-border-02.png);
  left: 14px;
  top: 0;
}

.form-imgs .item.item-03 {
  width: 44%;
  margin-left:20%;
  margin-top:6rem;
}

.form-imgs .item.item-03:before{
  background-image: url(../images/form-border-02.png);
  left: -5px;
  top: -14px;
}


span.required {
  color:#ff3833;
}

.form-style .form-group {
  margin-bottom: 1.2rem;
}

.box-get-from {
  padding-bottom: 100px;
}

.form-page-bg {
  background-repeat: no-repeat;
  background-image: url(../images/form-bg-top.png);
  background-size: 100%;
  background-position: center 70px;
}

@media(min-width: 1440px) {
  .form-page-bg {
    background-size: 1440px 625px;
  }
  #form-page{
    background-size: 1440px 958px;
  }
}

.box-empty {
  text-align: center;
  min-height: 200px;
  padding-top: 100px;
}

.swiper-pagination {
  width: 100%;
}



.box-faq .item {
  width: 100%;
  font-size: 14px;
  /*border: 1px solid #dfdfdf;*/
  /*border-radius: 6px;*/
  /*box-shadow: 0 2px 15px 0 rgba(0,0,0,0.05);*/
  background-color: #FFFFFF;
  margin-bottom: 20px;
  position: relative;
}

.box-faq .item .title {
  display: block;
  height:44px;
  font-size: 16px;
  font-weight: bold;
  color:#333;
  background: url("../images/faq-item-bg.png") repeat-x top center;
  background-size: 6.2px;
  position: relative;
  margin-left:27px;
  margin-right:27px;
  text-align: left  ;
}
.box-faq .item .title span {
    width: 100%;
    height: 34px;
    overflow: hidden;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    color:#ff80c2;
}
.box-faq .item .title:before {
  content:'';
  height: 44px;
  width: 27px;
  position: absolute;
  left:-27px;
  top:0;
  background: url("../images/faq-item-left.png") repeat-x top center;
  background-size: 27px;
}
.box-faq .item .title:after {
  content:'';
  height: 44px;
  width: 27px;
  position: absolute;
  right:-27px;
  top:0;
  background: url("../images/faq-item-right.png") repeat-x top center;
  background-size: 27.3px;
}

.box-faq .item img {
    max-width: 22px;
    position: absolute;
    right:15px;
    top:12px;
    cursor: pointer;
}

@media (max-width: 575px) {
  .box-faq .item .title {
    height: 58px;
    font-size: 14px;
    line-height: 18px;
    background-size: 7.3px;
  }
  .other-button.text-left {
    text-align: center!important;
  }


    .box-faq .item .title span {
        height: 41px;
        display: flex;
        /*justify-content: center;*/
        align-items: center;
    }
    .box-faq .item .title:before {
        content:'';
        height: 58px;
        width: 32px;
        position: absolute;
        left:-32px;
        top:0;
        background: url("../images/faq-item-left.png") repeat-x top center;
        background-size: 32px;
    }
    .box-faq .item .title:after {
        content:'';
        height: 58px;
        width: 32px;
        position: absolute;
        right:-32px;
        top:0;
        background: url("../images/faq-item-right.png") repeat-x top center;
        background-size: 32.4px;
    }
}

.box-faq .item.active .title {
  /*background-image: url("../images/faq-arrow-up.png");*/
}

.box-faq .item .desc {
  display: none;
  box-shadow: 0 2px 15px 0 rgba(0,0,0,0.05);
  background-color: #FFFFFF;
  padding: 15px;
  width: 95%;
  margin-left:auto;
  margin-right:auto;
  border:2px solid #fb81c1;
  border-top:none;
  margin-top:-2px;
  border-radius: 0 0 10px 10px;

}
@media (max-width: 575px) {
  .box-faq .item .desc {
    max-width: 92%;
    margin-top:-8px;
  }
}

.box-faq .item .inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.box-faq .item .answer {
  width: 40px;
  font-size: 16px;
  color: #ff80c2;
  font-weight: bold;
}


/* add by 亮 */
.main-disk-content{
  /*background-image:url("../images/disk-bg.png");*/
  /*background-repeat:no-repeat;*/
  /*background-attachment:  fixed;*/
}
.search-bar{
  text-align: center;
}
.search-bar img{
  margin-bottom: 20px;
}
.main-disk-content > h3{
  margin-bottom: 30px;
  margin-top: 50px;
}
.main-disk-content .search-bar {
  margin-bottom: 30px;
}
.main-disk-content .disk-listting a img{
  margin-left: 5px;
}
.main-disk-content .disk-listting a{
  color: #ac8cc0;
  font-size: 16px;
}
.main-disk-content .disk-listting{
  text-align: center;
  margin-bottom: 35px;
  position: relative;
}
.disk-circle-image {
  position: absolute;
  top: 5px;
  margin-left: 5px;
}

.disk-circle-image01{
  position: absolute;
  top: 5px;
  margin-left: 5px;
}
.disk-circle-image02,.disk-circle-image06{
  position: absolute;
  top: -8px;
  margin-left: -6px;
}
.disk-circle-image03,.disk-circle-image08,.disk-circle-image10,.disk-circle-image12,.disk-circle-image14{
  position: absolute;
  top: 0px;
  margin-left: -5px;
}
.disk-circle-image04,.disk-circle-image07,.disk-circle-image09,.disk-circle-image11,.disk-circle-image13,.disk-circle-image14{
  position: absolute;
  top: -10px;
  margin-left: 10px;
}
.disk-circle-image05{
  position: absolute;
  top: 5px;
  margin-left: 10px;
}
.disk-circle-image15{
  position: absolute;
  top: 2px;
  margin-left: -4px;
}
.disk-circle-image16,.disk-circle-image21{
  position: absolute;
  top: -10px;
  margin-left: 10px;
}
.disk-circle-image17,.disk-circle-image19{
  position: absolute;
  top: 0px;
  margin-left: 10px;
}
.disk-circle-image18 {
  position: absolute;
  top:-6px;
  margin-left: 9px;
}
.disk-circle-image20 {
  position: absolute;
  top:-2px;
  margin-left: -2px;
}
.disk-circle-image22,.disk-circle-image24 {
  position: absolute;
  top:5px;
  margin-left: 10px;
}
.disk-circle-image23 {
  position: absolute;
  top:-10px;
  margin-left: 15px;
}
.disk-circle-image25 {
  position: absolute;
  top:5px;
  margin-left: -10px;
}
.disk-circle-image26 {
  position: absolute;
  top:3px;
  margin-left: 8px;
}
.disk-circle-image27 {
  position: absolute;
  top:-20px;
  margin-left: 10px;
}
.main-disk-content .disk-listting .disk-image {
  margin-bottom: 15px;
}
/*
.main-disk-content .disk-listting .disk-image:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../images/circle.png') center no-repeat;
  background-size: cover;
}*/
.disk-listting-top,.disk-listting-bottom{
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

@media (min-width: 1024px)  {
  .disk-listting-top .disk-listting{
    width: 25%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .disk-listting-top .disk-listting{
    width: 33.333%;
  }
}
.disk-image > a > img {
  position: relative;
  z-index: 9;
}
.disk-image > img{
  z-index: 0;
}

.disk-content .disk-image img {
  max-width: 180px;
  border-radius: 100%;
}
/*
.disk-content .disk-image{
  max-width: 180px;
}

.disk-content .disk-listting{
  position: relative;
}

.disk-content .disk-listting .disk-image:before {
  content: "";
  position: absolute;
  top: 5px;
  left: -5px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("../images/circle.png");
}*/



.audio-title {
  font-size: 2.8rem;
  text-align: center;
  color:#ab8abf;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  width: 320px;
  /*white-space: nowrap;*/
}
.audio-title:before {
  content: '';
  position: absolute;
  width: 74px;
  height: 74px;
  background: url("../images/audio-title-left.png") no-repeat center center;
  background-size: 100%;
  left:-14%;
  top:-10px;
}
.audio-title:after {
  content: '';
  position: absolute;
  width: 74px;
  height: 74px;
  background: url("../images/audio-title-right.png") no-repeat center center;
  background-size: 100%;
  right:-12%;
  top:-10px;
}


@media(max-width: 575px) {
  .audio-title {
    font-size: 2rem;
    width: 200px;
  }
  .audio-title:before {
    width: 40px;
    height: 40px;
    left:-16%;
    top:0px;
  }
  .audio-title:after {
    width: 40px;
    height: 34px;
    right:-11%;
    top:0;
  }
  .audio-title .item{
    margin: 10px 0;
  }
}


.button-image {
  display: inline-block;
  width: 213px;
  height:40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  font-family:'MYuenHK-Xbold',Arial;
  padding-top:5px;
  vertical-align: middle;
  letter-spacing: 1px;
  text-align: center;
}
.button-image.button-middle-image {
  width: 150px;
}

@media(max-width: 575px) {
  .button-image.button-middle-image {
    width: 130px;
  }
}

.button-image span {
  display: inline-block;
  padding-right:26px;
  position: relative;
}
.button-image.button-middle-image span {
  display: inline-block;
  padding-left:24px;
  position: relative;
}
.button-image span:after {
  content:'';
  position: absolute;
  right:-1px;
  top:0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 24px;
  height:24px;
}
.button-image.button-middle-image span:after {
  content:'';
  position: absolute;
  left:6px;
  right:auto;
  top:2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 11px;
  height:18px;
}
.button-image.button-middle-image.button-middle-image-right span:after {
  content:'';
  position: absolute;
  left:auto;
  right:6px;
  top:2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 11px;
  height:18px;
  transform:rotate(-180deg);
  -ms-transform:rotate(-180deg);
  -moz-transform:rotate(-180deg);
  -webkit-transform:rotate(-180deg);
  -o-transform:rotate(-180deg);
}

.button-image:hover, .btn:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;animation: tada 1s .2s ease both;}
.button-image img {
  width: 25px;
  height: auto;
  vertical-align: middle;
  position: relative;
  top:-1px;
}

.button-image.button-image-01 {
  color:#ff3833;
  background-image: url("../images/button-bg-01.png");
}
.button-image.button-image-01 span:after {
  background-image: url("../images/button-search-icon-01.png?v=1.0.1");
}

.button-image.button-image-02 {
  color:#ff8802;
  background-image: url("../images/button-bg-02.png");
}
.button-image.button-image-02 span:after {
  background-image: url("../images/button-search-icon-02.png?v=1.0.1");
}

.button-image.button-image-03 {
  color:#ff5c58;
  background-image: url("../images/button-bg-03.png");
}
.button-image.button-image-03 span:after {
  background-image: url("../images/button-search-icon-03.png?v=1.0.1");
}

.button-image.button-image-04 {
  color:#ff82c5;
  background-image: url("../images/button-bg-04.png");
}
.button-image.button-image-04 span:after {
  background-image: url("../images/button-search-icon-04.png?v=1.0.1");
}

.button-image.button-image-05 {
  color:#0043a6;
  background-image: url("../images/button-bg-05.png");
}
.button-image.button-image-05 span:after {
  background-image: url("../images/button-search-icon-05.png?v=1.0.1");
}


.button-image.button-image-06 {
  color:#5986e4;
  background-image: url("../images/button-bg-06.png");
}
.button-image.button-image-06 span:after {
  background-image: url("../images/button-search-icon-06.png?v=1.0.1");
}

.button-image.button-image-07 {
  color:#2793bf;
  background-image: url("../images/button-bg-07.png");
}
.button-image.button-image-07 span:after {
  background-image: url("../images/button-search-icon-07.png?v=1.0.1");
}


.button-middle-image.button-image-01 {
  color:#2793bf;
  background-image: url("../images/button-blue-middle-button.png");
}
.button-middle-image.button-image-01 span:after {
  background-image: url("../images/arrow-blue.png?v=1.0.1");
}

.button-middle-image.button-image-02 {
  color:#b631ad;
  background-image: url("../images/button-purple-middle-button.png");
}
.button-middle-image.button-image-02 span:after {
  background: none;
}

.button-image.button-image-09 {
  color:#0043a6;
  background-image: url("../images/button-bg-05.png");
}
.button-image.button-image-09 span:after {
  background-image: url("../images/button-search-icon-09.png?v=1.0.1");
}



.swiper-slide-img {
  position: absolute;
  /*width: 57vw;*/
  /*max-width: 960px;*/
}

.inner-bottom-list-li div{
  position: relative;
}

.inner-bottom-list-li .title {
  display: block;
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  margin-top:0;
  background-color: rgba(0, 0, 0, 0.6);
  padding-top:40%;
  color:#fff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
}
.inner-bottom-list-li:hover .title{
  opacity: 1;
}

@media(min-width: 768px) and (max-width: 991px) {
  .inner-bottom-list-li img, .inner-bottom-list-li .title {
    border-radius: 24px;
  }
}
@media(max-width: 767px) {
  .inner-bottom-list-li img, .inner-bottom-list-li .title {
    border-radius: 20px;
  }
}


.disk-listting .disk-image a:hover img {
  -webkit-animation: swing 1s .2s ease both;
  -moz-animation: swing 1s .2s ease both;
  animation: swing 1s .2s ease both;
}

#audio-page{
  background-repeat: no-repeat;
  background-image: url(../images/disk-bg.png);
  background-size: 100%;
  background-position: center top;
}

@media(min-width: 1440px) {

  #audio-page{
    background-size: 1440px 2079px;
  }
}

.box-form-terms {
  font-size:12px;
}

.swiper-slide-text {
  color:#838382;
  font-family:'MYuenHK-SemiBold',Arial;
  letter-spacing: 2px;
}
.swiper-slide-text .slide-title {
  font-family:'MYuenHK-Xbold',Arial;
  font-size: 1.725rem;
  color:#ff3833;
}

.swiper-slide-text .slide-content {
  font-size: 1rem;
  letter-spacing: 3px;
  line-height: 1.875rem;
  max-height: 180px;
  overflow: hidden;
}

.slide-content .button-image {
  position: absolute;
  left:0;
}

.clearfix {
  float:none;
  clear:both;
}


@media(min-width: 1280px) and (max-width: 1439px) {
  .swiper-slide-text .slide-title {
    font-size: 1.525rem;
  }
  .swiper-slide-text .slide-content {
    font-size: 0.9rem;
    line-height: 1.675rem;
  }
}

@media(min-width: 992px) and (max-width: 1279px) {
  .swiper-slide-text .slide-title {
    font-size: 1.325rem;
  }
  .swiper-slide-text .slide-content {
    font-size: 0.625rem;
    line-height: 1.375rem;
  }
}

@media(min-width: 768px) and (max-width: 991px) {
  .swiper-slide-text .slide-title {
    font-size: 1.125rem;
  }
  .swiper-slide-text .slide-content {
    font-size: 0.525rem;
    line-height: 1.075rem;
  }
}

@media(max-width: 767px) {
  .swiper-slide-text .slide-title {
    font-size: 0.725rem;
  }
  .swiper-slide-text .slide-content {
    font-size: 0.525rem;
    line-height: 1.075rem;
  }
}

.swiper-slide-text .animateBtn img, .swiper-slide-text .animateBtn {
  width: 15vw;
  height: auto!important;
}


.radio-style.horizontal .item:not(:last-child) {
  margin-right: 1.5625rem;
}
.radio-style.horizontal .item{
  display: inline-block;
  position: relative;
}
.radio-style .item input[type="radio"]{
  opacity: 0;
  position: absolute;
}
.radio-style .item input[type="radio"]{
  opacity: 0;
  position: absolute;
}

.radio-style label {
  padding-left: 24px;
}
.radio-style label:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #999;
  left:0;
  top:2px;
}

.radio-style input[type="radio"]:checked ~ label:before {
  background-image: url("../images/radio-checked.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #fff;
  border: none;
}

select, .form-style select {
  height: calc(1.5em + 1.3rem + 2px);
  margin: 0 0 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #878787;
  border-radius: .5rem;
  background-color: #fefefe;
  font-family: inherit;
  font-size: .8rem;
  font-weight: normal;
  line-height: 1.47;
  color: #0a0a0a;
  background-image: url(../images/select-default-arrow.png);
  background-origin: content-box;
  background-position: right -1rem center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 1.5rem;
  -webkit-transition: border-color 0.25s ease-in-out,-webkit-box-shadow 0.5s;
  transition: border-color 0.25s ease-in-out,-webkit-box-shadow 0.5s;
  transition: box-shadow 0.5s,border-color 0.25s ease-in-out;
  transition: box-shadow 0.5s,border-color 0.25s ease-in-out,-webkit-box-shadow 0.5s;
}

.form-control:focus {
  border-color: #973b9e;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.button-image-style {
  display: inline-block;
  width: 213px;
  height: 40px;
}

.swiper-slide {
  background-color: #fff;
}

.has-error .form-control {
  border-color: #e3503e;
  -webkit-box-shadow: none;
  box-shadow: none;
}






.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 3;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

.my-pagination {text-align: center;font-family:'MYuenHK-Xbold',Arial;}
.my-pagination .pagination li a, .my-pagination .pagination li span {border-radius: 0;padding: 0;width: 43px;height:40px;margin:0 8px;text-align: center;line-height: 34px;border:none;color:#f2b2cd;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-bg.png");
  background-color:transparent;
  padding-left:3px;
  font-size:1.175rem;
}
.my-pagination .pagination>li>a:focus, .my-pagination .pagination>li>a:hover, .my-pagination .pagination>li>span:focus, .my-pagination .pagination>li>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-bg-hover.png");
  color:#fff;
}
.my-pagination .pagination>.active>a,.my-pagination .pagination>.active>a:focus, .my-pagination .pagination>.active>a:hover, .my-pagination .pagination>.active>span, .my-pagination .pagination>.active>span:focus, .my-pagination .pagination>.active>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-bg-hover.png");
  color:#fff;
}

.my-pagination .first, .my-pagination .prev, .my-pagination .next, .my-pagination .last {
  display: none;
}

.pagination-cyan-blue .pagination li a, .pagination-cyan-blue .pagination li span {
  background-image: url("../images/pagination-item-cyan-blue﹣bg.png");
  color:#009fa0;
}

.pagination-cyan-blue .pagination>li>a:focus, .pagination-cyan-blue .pagination>li>a:hover, .pagination-cyan-blue .pagination>li>span:focus, .pagination-cyan-blue .pagination>li>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-cyan-blue-bg-hover.png");
  color:#fff;
}
.pagination-cyan-blue .pagination>.active>a,.pagination-cyan-blue .pagination>.active>a:focus, .pagination-cyan-blue .pagination>.active>a:hover, .pagination-cyan-blue .pagination>.active>span, .pagination-cyan-blue .pagination>.active>span:focus, .pagination-cyan-blue .pagination>.active>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-cyan-blue-bg-hover.png");
  color:#fff;
}



.pagination-blue .pagination li a, .pagination-blue .pagination li span {
  background-image: url("../images/pagination-item-blue-bg.png");
  color:#2793bf;
}

.pagination-blue .pagination>li>a:focus, .pagination-blue .pagination>li>a:hover, .pagination-blue .pagination>li>span:focus, .pagination-blue .pagination>li>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-bg-blue-hover.png");
  color:#fff;
}
.pagination-blue .pagination>.active>a,.pagination-blue .pagination>.active>a:focus, .pagination-blue .pagination>.active>a:hover, .pagination-blue .pagination>.active>span, .pagination-blue .pagination>.active>span:focus, .pagination-blue .pagination>.active>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-bg-blue-hover.png");
  color:#fff;
}

.pagination-purple .pagination li a, .pagination-purple .pagination li span {
  background-image: url("../images/pagination-item-purple-bg.png");
  color:#b631ae;
}

.pagination-purple .pagination>li>a:focus, .pagination-purple .pagination>li>a:hover, .pagination-purple .pagination>li>span:focus, .pagination-purple .pagination>li>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-purple-bg.png");
  color:#fff;
}
.pagination-purple .pagination>.active>a,.pagination-purple .pagination>.active>a:focus, .pagination-purple .pagination>.active>a:hover, .pagination-purple .pagination>.active>span, .pagination-purple .pagination>.active>span:focus, .pagination-purple .pagination>.active>span:hover {
  border:none;
  background-color:transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/pagination-item-purple-bg-hover.png");
  color:#fff;
}






/***** learn page start ****/
.box-learn {
  padding-top: 5rem;
  padding-bottom: 4rem;
}
.box-learn.no-pb {
  padding-bottom: 0rem;
}

.learn-desc {
  letter-spacing: 2px;
  color:#ff8002;
  font-size:1.2rem;
}

.learn-page {
  background-repeat: no-repeat;
  background-image: url(../images/learn-bg.png);
  background-size: 100%;
  background-position: center 20px;
}

.learn-page-inner {
  background-repeat: no-repeat;
  background-image: url(../images/learn-bg-bottom.png);
  background-size: 100%;
  background-position: center 52%;
}
.learn-accessories {
  /*background-color: #f7f7f7;*/
  background: linear-gradient(#ffffff 14%,#f7f7f7 0%);
  position: relative;
}
.learn-accessories .learn-accessories-inner {
  /*height: 120%;*/
  /*margin-top: -10%;*/
  background-repeat: no-repeat;
  background-image: url(../images/learn-bg-bottom2.png);
  background-size: 100%;
  background-position: center bottom;
  padding: 2rem 0;
  position: relative;
  bottom: -20px;
}

.learn-accessories .inner-bottom-box {
  background: none;
}

.learn-content {
  padding-top:.4rem;
}
@media(min-width: 1440px) {
  .learn-page {
    background-size: 1440px;
  }
  .learn-page-inner, .learn-accessories .learn-accessories-inner {
    background-size: 1440px;
  }
}
.learn-list {
  position: relative;
}
.learn-bg-small{
  width: 38%;
  max-width: 550px;
  position: absolute;
  z-index: 9999;
  left:50%;
  margin-left:-21%;
  top: 5rem;
  background-size: 100%;
  pointer-events: none;
}

.learn-bg-right{
  width: 14%;
  max-width: 202px;
  position: absolute;
  z-index: 9999;
  right:6%;
  margin-left:-21%;
  top: 1rem;
  background-size: 100%;
  pointer-events: none;
}

@media(min-width: 1920px) {
  .learn-bg-right {
    right:15%;
  }
}


@media(min-width: 2560px) {
  .learn-bg-right {
    right:22%;
  }
}

.top-banner-hover {
  position: absolute;
  width: 100%;
  left:0;
  top:0;
  color:#fff;
}

.top-banner-hover .box-title {
  margin-top:24%;
  margin-right:6%;
  letter-spacing: 5px;
}
.top-banner-hover .box-title .title {
  font-size:1.6rem;
}
.top-banner-hover .box-title .sub-title {
  font-size:2.8rem;
}
@media(max-width: 767px) {
  .top-banner-hover .box-title {
    /*margin-top:20%;*/
  }
  .top-banner-hover .box-title .title {
    font-size:1.2rem;
  }
  .top-banner-hover .box-title .sub-title {
    font-size:1.8rem;
  }
}

.learn-accessories .learn-bg-small {
  margin-top:-4.2rem;
}

.learn-title {
  font-size: 2rem;
  color:#ff8002;
  letter-spacing: 3px;
  margin-bottom: 1.2rem;
}

/***** learn page end ****/


/***** support page end ****/

.support-page {
  background-repeat: no-repeat;
  background-image: url(../images/support-bg.png);
  background-size: 103%;
  background-position: center 20px;

}
.support-page .container {
  position: relative;
}
.support-bg-02{
  width: 12%;
  max-width: 550px;
  position: absolute;
  z-index: 9999;
  left:-8%;
  top: -1.4rem;
  background-size: 100%;
  pointer-events: none;
}
.support-bg-03{
  width: 16%;
  max-width: 200px;
  position: absolute;
  z-index: 9999;
  right:2%;
  top: -12rem;
  background-size: 100%;
  pointer-events: none;
}


.box-support-bottom {
  /*background: linear-gradient(#f2f2f2 52%,#ffffff 0%);*/
  position: relative;
}

.box-support-bottom-inner {
/*  background-repeat: no-repeat;
  background-position: center 6rem;
  background-size: 100%;
  background-image: url("../images/support-bg-bottom.png");*/
}

@media(min-width: 1680px) {
  .support-page {
    background-size: 1680px;
  }
}
.support-page .list-title {
  font-family:'MYuenHK-Xbold',Arial;
  font-size:1.8rem;
  text-align: center;
  color:#0043a6;
  margin-bottom: 1rem;
  letter-spacing: 4px;
}

.support-page .list-desc{
  letter-spacing: 2px;
  margin: 1rem 0 1.4rem 0;
  line-height: 1.7rem;
  font-size:17px;
  text-align: center;
}

.support-page .list-remark{
    margin-top:2.375rem;
    line-height: 1.7rem;
    font-size:17px;
    text-align: center;
}

.box-support-1 {
  /*padding-top: 2.2rem;*/
  /*padding-bottom: 6rem;*/
}
.box-support-1 .item {
  margin-top:1rem;
  margin-bottom:1rem;
}
.box-support-1 .item .inner {
  padding: 0 1.2rem;
}
.box-support-1 .item .image {
  position: relative;
}

.box-support-1 .item .image:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.box-support-1 .item.item-01 .image:before{
  background-image: url("../images/support-border-01.png");
  left: -15px;
  top: -10px;
}
.box-support-1 .item.item-02 .image:before{
  background-image: url("../images/support-border-01.png");
  left: 12px;
  top: 8px;
}
.box-support-1 .item.item-03 .image:before{
  background-image: url("../images/support-border-01.png");
  left: 12px;
  top: -10px;
}
.box-support-1 .item.item-04 .image:before{
  background-image: url("../images/support-border-01.png");
  left: 12px;
  top: 0px;
}
.box-support-1 .item.item-05 .image:before{
  background-image: url("../images/support-border-01.png");
  left: -12px;
  top: 3px;
}
.box-support-1 .item.item-06 .image:before{
  background-image: url("../images/support-border-01.png");
  left: -12px;
  top: -8px;
}

.box-support-1 .item .info {
  padding-top:1rem;
  text-align: center;
}
.box-support-1 .item .name {
  padding-top:1rem;
  text-align: center;
  font-size:1.1rem;
  color:#0043a6;
  letter-spacing: 2px;
}
.box-support-1 .item .desc {
  letter-spacing: 1px;
  margin-top: 0.7rem;
  font-size:15px;
}
.box-support-1 .step{
  display: inline-block;
  width:43px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url(../images/support-step-bg.png);
  background-size: cover;
  font-family:'MYuenHK-Xbold',Arial;
  font-size:1.2rem;
  color:#0043a6;
  line-height: 34px;
  padding-left:4px;
  margin-right: 0.5rem;
  position: relative;
  /*top:-3px;*/
}

.box-support-2 {
  padding-top:4rem;
  padding-bottom:3rem;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url("../images/support-bg-2.png");
  background-color:#f0f0f0;
}

.max-bg-size {
  background-size: 100%;
}
@media(min-width: 1680px) {
  .max-bg-size {
    background-size: 1680px;
  }
}

.box-support-2 .list-content {
  max-width: 1040px;
  margin-left:auto;
  margin-right:auto;
}

.box-support-2 .item {
  margin-top: 2rem;
}

.box-support-2 .f-inner {
  margin-left:1rem;
  margin-right:1rem;
}
.box-support-2 .item .inner {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  padding-left:5%;
  padding-right:5%;
}

.box-support-2 .item .inner2 {
  position: relative;
  top:-2rem;
}
.box-support-2 .item img {
  width: 84%;
  max-width: 380px;
}

.box-support-2 .item-01 .inner {
  background-image:url("../images/support-eng-border-01.png");
}

.box-support-2 .item-02 .inner {
  background-image:url("../images/support-eng-border-02.png");
}

.box-support-2 .item .info {
  padding-top:0.8rem;
  text-align: center;
  min-height: 100px;
}
.box-support-2 .item .name {
  font-size:1.2rem;
  color:#0043a6;
  letter-spacing: 2px;
  margin-bottom: .4rem;
}
.box-support-2 .item .desc {
  letter-spacing: 1px;
  min-height: 120px;
  font-size:15px;
}

.box-support-3 {
  /*padding-top:6rem;*/
  /*padding-bottom:2rem;*/
  background-position: center 22%;
  background-repeat: no-repeat;
  background-image: url("../images/support-bg-3.png");
}

.support-icon-01{
  width: 16%;
  max-width: 200px;
  position: absolute;
  z-index: 9999;
  left:15%;
  top: -9.5rem;
  background-size: 100%;
  pointer-events: none;
}

.support-icon-02{
  width: 16%;
  max-width: 160px;
  position: absolute;
  z-index: 9999;
  right:20%;
  top: -10rem;
  background-size: 100%;
  pointer-events: none;
}

.support-icon-03{
  width: 20%;
  max-width: 200px;
  position: absolute;
  z-index: 9999;
  right:-15%;
  top: -70%;
  background-size: 100%;
  pointer-events: none;
}


.box-support-3 .item {
  padding-left:0.4rem;
  padding-right:0.4rem;
  padding-top:1.2rem;
  padding-bottom:1.2rem;
}

.box-support-3 .item .info {
  padding-top:0.8rem;
  text-align: center;
  min-height: 100px;
}

.box-support-3 .item .name {
  font-size:1.2rem;
  color:#0043a6;
  letter-spacing: 2px;
  margin-bottom: .4rem;
}
.box-support-3 .item .desc {
  letter-spacing: 1px;
  min-height: 120px;
  font-size:15px;
}
.support-event {
  /*padding-top:1rem;*/
}

.support-event .item .image {
  position: relative;
  max-width: 90%;
  margin-left:auto;
  margin-right:auto;
}
.support-event .item .image:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/support-event-border-01.png");
  left: -15px;
  top: 12px;
}

.support-event .item .hover-more {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 100%;
  line-height: 400%;
  background: rgba(0,0,0,0.6);
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
  padding-top: 56%;
  font-weight: bold;
  border-radius: 8%;
}

.support-event .item:hover .hover-more {
  opacity: 1;
}

.support-event .item.item-02 .image:before{
  background-image: url("../images/support-event-border-01.png");
  left: -10px;
  top: -10px;
}

.support-event .item.item-03 .image:before{
  background-image: url("../images/support-event-border-01.png");
  left: 10px;
  top: 8px;
}

.support-event .slick-prev{
  background: url(../images/support-arrow-left.png) center no-repeat;
  background-size: cover;
  left: -30px;
  z-index: 99;
  height: 60px;
  top:34%;
  width: 22px;
}
.support-event .slick-next{
  background: url(../images/support-arrow-right.png) center no-repeat;
  background-size: cover;
  right: -30px;
  z-index: 99;
  height: 60px;
  top:34%;
  width: 24px;
}

.box-iframe iframe{
  border-radius: 30px;
  max-width: 100%;
}

.contact-title {
  text-align: center;
  font-size: 2rem;
  color: #ff8002;
  letter-spacing: 3px;
}

.box-contact-form .learn-accessories-inner {
  bottom: -60px;
}

.box-contact-form .contact-title {
  margin: 2rem 0;
}

.box-contact-form .contact-form {
  max-width: 800px;
  margin: 0 auto;
}

.box-contact-form {
  padding-bottom: 2rem;
  padding-top: 2rem;
}



.box-audio-detail .image {
  width: 42%;
}
.box-audio-detail .image-inner {
  padding:1rem;
}
.box-audio-detail .info {
  width: 58%;
  padding-left:4%
}
.box-audio-detail .audio-detail-img {
  position: relative;
}
.box-audio-detail .audio-detail-img img {
  border-radius: 100%;
}
.box-audio-detail .audio-detail-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

.audio-detail-title {
  color:#ff3330;
}

.box-audio-detail .audio-detail-img::before{
  background-image: url("../images/border-circle-red.png");
  left: 12px;
  top: 12px;
}




.box-accessories-detail .image {
  width: 42%;
}
.box-accessories-detail .image-inner {
  padding:1rem;
}
.box-accessories-detail .info {
  width: 58%;
  padding-left:4%
}
.box-accessories-detail .accessories-detail-img {
  position: relative;
}
.box-accessories-detail .accessories-detail-img img {
  border-radius: 100%;
}
.box-accessories-detail .accessories-detail-img:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

.accessories-detail-title {
  color:#ff7fad;
}

.box-accessories-detail .accessories-detail-img::before{
  background-image: url("../images/border-circle-pink.png");
  left: 12px;
  top: -12px;
}



.social-contact a {
  margin-right:0.375rem;
  cursor: pointer;
  display: inline-block;
}
.social-contact img {
  max-width: 54px!important;
  height:auto;
}

.share-buttons a{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  font-family:'MYuenHK-Xbold',Arial;
  text-align: center;
  font-size:1rem;
  color: #fff;
  margin-left:0.2rem;
}
.share-buttons a.whatsapp{
  background-image: url("../images/share-whatsapp-icon.png");
}
.share-buttons a.ig{
  background-image: url("../images/share-ig-icon.png");
}
.share-buttons a.facebook{
  background-image: url("../images/share-facebook-icon.png");
}
.share-buttons a.share{
  background-image: url("../images/share-button.png");
}



.box-social-share {
  color: #fff;
  border: none;
  border-radius: 100%;
  outline: none;
  box-shadow: none;
  -wekkit-box-shadow: none;
  text-align: center;
  margin-top: 4rem;
}

.box-social-share .item, .box-social-share .share-button-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  line-height: 48px;
  border-radius: 100%;
  -webkit-transition: all .375s;
  transition: all .375s;
  z-index: 9998;
}
.box-social-share .share-button-toggle {
  z-index: 9999;
}
.box-social-share .item a {
  width: 100%;
  height: 100%;
}

.box-social-share .item a, .box-social-share .share-button-toggle {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 48px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  font-size: 1.125em;
  background-repeat: no-repeat;
  background-position: center;
  background-size:100%;
}
.box-social-share .item.wechat a {
  width: 54px;
}
.box-social-share .share-button-toggle {
  background-image: url("../images/share-button.png");
}

.box-social-share .item {
  -webkit-transform: translate3d(0,0,0) scale(.9,.9);
  transform:         translate3d(0,0,0) scale(.9,.9);
  opacity: 0;
}

.box-social-share .item.facebook a {
  background-image: url("../images/share-facebook-icon.png");
}
.box-social-share .item.whatsapp a {
  background-image: url("../images/share-whatsapp-icon.png");
}
/*.box-social-share .item.ig a {
  background-image: url("../images/share-ig-icon.png");
}*/
.box-social-share .item.copy a {
  background-image: url("../images/share-copy-icon.png");
}
.box-social-share .item.wechat a {
  background-image: url("../images/share-wechat-icon.png");
}

.box-social-share.scale-on .item {
  opacity: 1;
}
/*.box-social-share.scale-on .item.whatsapp {
  -webkit-transform: translateX(-236px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-236px) translateY(0) scale(1.0,1.0);
}*/
.box-social-share.scale-on .item.whatsapp {
  -webkit-transform: translateX(-116px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-116px) translateY(0) scale(1.0,1.0);
}

/*.box-social-share.scale-on .item.wechat {
  -webkit-transform: translateX(-178px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-178px) translateY(0) scale(1.0,1.0);
}*/
/*.box-social-share.scale-on .item.ig {
  -webkit-transform: translateX(-116px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-116px) translateY(0) scale(1.0,1.0);
}*/
.box-social-share.scale-on .item.copy {
  -webkit-transform: translateX(-172px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-172px) translateY(0) scale(1.0,1.0);
}

.box-social-share.scale-on .item.facebook {
  -webkit-transform: translateX(-58px) translateY(0) scale(1.0,1.0);
  transform:         translateX(-58px) translateY(0) scale(1.0,1.0);
}

.box-social-share.social-share-style2 .share-button-toggle {
  background-image: url("../images/consultant-share-button.png");
}

.box-social-share.social-share-style2 .item, .box-social-share.social-share-style2 .share-button-toggle {
  left: 0;
}

.box-social-share.social-share-style2.scale-on .item.whatsapp {
  -webkit-transform: translateX(116px) translateY(0) scale(1.0,1.0);
  transform:         translateX(116px) translateY(0) scale(1.0,1.0);
}
.box-social-share.social-share-style2.scale-on .item.copy {
  -webkit-transform: translateX(174px) translateY(0) scale(1.0,1.0);
  transform:         translateX(174px) translateY(0) scale(1.0,1.0);
}

.box-social-share.social-share-style2.scale-on .item.facebook {
  -webkit-transform: translateX(58px) translateY(0) scale(1.0,1.0);
  transform:         translateX(58px) translateY(0) scale(1.0,1.0);
}



.mobile-textbook-banner-title {
  font-size:1.2rem;
  line-height: 1.8rem;
  letter-spacing: 3px;
}

.mobile-textbook-banner-title {
  display: inline-block;
  text-align: center;
  position: relative;
}

.mobile-textbook-banner-title .qm-left {
  display: inline-block;
  width: 38px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  left:-10px;
  top:-1px;
  position: relative;
}

.mobile-textbook-banner-title .qm-right {
  display: inline-block;
  width: 38px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  right:-9px;
  top:0px;
  position: relative;
}


.textbook-blue-style .productCat .productName span{
  background-image: url(../images/textbook-title-blue-bg.png);
}
.textbook-blue-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-blue-bg.png);
  left:10px;
  top:-18px;
}
.textbook-blue-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-blue-bg.png);
}
.textbook-blue-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-blue-left.png);
}
.textbook-blue-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-blue-right.png);
}

.textbook-blue-style .mobile-textbook-banner-title {
  color:#2892bd;
}

.textbook-blue-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-blue-left.png");
}
.textbook-blue-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-blue-right.png");
}


.textbook-golden-style .productCat .productName span{
  background-image: url(../images/textbook-title-golden-bg.png);
}
.textbook-golden-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-golden-bg.png);
  left:1rem;
  top:0;
}
.textbook-golden-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-golden-bg.png);
}
.textbook-golden-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-golden-left.png);
}
.textbook-golden-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-golden-right.png);
}

.textbook-golden-style .mobile-textbook-banner-title {
  color:#d2ad2f;
}

.textbook-golden-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-golden-left.png");
}
.textbook-golden-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-golden-right.png");
}


.textbook-pink-style .productCat .productName span{
  background-image: url(../images/textbook-title-pink-bg.png);
}
.textbook-pink-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-pink-bg.png);
  left:-1rem;
  top:-1.1rem;
}
.textbook-pink-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-pink-bg.png);
}
.textbook-pink-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-pink-left.png);
}
.textbook-pink-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-pink-right.png);
}

.textbook-pink-style .mobile-textbook-banner-title {
   color:#e4708f;
 }

.textbook-pink-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-pink-left.png");
}
.textbook-pink-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-pink-right.png");
}


.textbook-green2-style .productCat .productName span{
  background-image: url(../images/textbook-title-green2-bg.png);
}
.textbook-green2-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-green2-bg.png);
  left:0rem;
  top:-0.725rem;
}
.textbook-green2-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-green2-bg.png);
}
.textbook-green2-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-green2-left.png);
}
.textbook-green2-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-green2-right.png);
}

.textbook-green2-style .mobile-textbook-banner-title {
  color: #2cb574;
}

.textbook-green2-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-green2-left.png");
}
.textbook-green2-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-green2-right.png");
}


.textbook-purple-style .productCat .productName span{
  background-image: url(../images/textbook-title-purple-bg.png);
}
.textbook-purple-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-purple-bg.png);
  left:-1rem;
  top:-1.1rem;
}
.textbook-purple-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-purple-bg.png);
}
.textbook-purple-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-purple-left.png);
}
.textbook-purple-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-purple-right.png);
}

.textbook-purple-style .mobile-textbook-banner-title {
  color:#9158b3;
}

.textbook-purple-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-purple-left.png");
}
.textbook-purple-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-purple-right.png");
}

.textbook-red-style .productCat .productName span{
  background-image: url(../images/textbook-title-red-bg.png);
}
.textbook-red-style .inner-box-in .slider-for .borderBox:before {
  background-image: url(../images/textbook-big-image-red-bg.png);
  left:-1rem;
  top:1rem;
}
.textbook-red-style .inner-box-in .slider-nav .slick-current .borderBox:before {
  background-image: url(../images/textbook-small-image-red-bg.png);
}
.textbook-red-style .inner-box-in .slick-prev {
  background-image: url(../images/textbook-arrow-red-left.png);
}
.textbook-red-style .inner-box-in .slick-next {
  background-image: url(../images/textbook-arrow-red-right.png);
}

.textbook-red-style .mobile-textbook-banner-title {
  color:#e52c3e;
}

.textbook-red-style .mobile-textbook-banner-title .qm-left {
  background-image: url("../images/textbook-title-red-left.png");
}
.textbook-red-style .mobile-textbook-banner-title .qm-right {
  background-image: url("../images/textbook-title-red-right.png");
}


.children-list-top .children-list-top-tit {
  min-height: 54px;
  font-size:1.2rem;
}

.buttons-style-1 {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content:center;
  margin-top: 4rem;
}

.buttons-style-1 .button-image {
  margin:0 4%
}

@media (max-width: 991px) {
  .buttons-style-1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content:center;
  }

  .buttons-style-1 .button-image {
    margin: 10px auto;

  }
}

.about-about {
  background-repeat: no-repeat;
  background-position: center -20px;
  background-size: 100%;
  background-image: url("../images/about-about-bg.png");
  padding:6.8rem 1rem 3rem 1rem;
}
.about-idea {
  background-repeat: no-repeat;
  background-position: center 8rem;
  background-size: 100%;
  background-image: url("../images/about-idea-bg.png");
  padding:3rem 1rem 3rem 1rem;
}

.about-idea .about-idea-content {
  margin-top:3rem;
  display: flex;
  flex-direction: row;
}

.about-idea .main-img {
  width: 23%;
}
.about-idea .lists {
  width: 77%;
  position: relative;
}
.about-idea .list .item {
  position: absolute;
  left:0;
  top:0;
}
.about-idea .list .small-img {
  width: 100%;
  max-width: 800px;
}
.about-idea .list .item-05 {
  left:39%;
  top:3.5%;
  margin-right:1%
}
.about-idea .list .item-04 {
  left:30%;
  top:22.8%;
  margin-right:13%
}
.about-idea .list .item-03 {
  left:22%;
  top:40.5%;
  margin-right:21.2%
}
.about-idea .list .item-02 {
  left:14%;
  top:61%;
  margin-right:29%
}
.about-idea .list .item-01 {
  left:6%;
  top:79.6%;
  margin-right:36%
}

.about-idea .list-hover {
}
.about-idea .list-hover .item {
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
  pointer-events: none;
}
.about-idea .list-hover .item.active {
  opacity: 1;
  pointer-events: visible;
}
.about-idea .list-hover .big-img {
  width: 100%;
  max-width: 800px;
}
.about-idea .list-hover .item-05 {
  left:30%;
  top:-4.5%;
  margin-right:0%;
}
.about-idea .list-hover .item-04 {
  left:24%;
  top:6%;
  margin-right:4%
}
.about-idea .list-hover .item-03 {
  left:18%;
  top:16.8%;
  margin-right:13%
}
.about-idea .list-hover .item-02 {
  left:12%;
  top:36%;
  margin-right:18%
}
.about-idea .list-hover .item-01 {
  left:5%;
  top:43.2%;
  margin-right:24%
}

.about-textbook {
  background-color: #f7f7f7;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  background-image: url("../images/about-textbook-bg.png");
  padding:3rem 0;
}

.about-page .about-title {
    text-align: center;
    font-size:1.8rem;
    letter-spacing: 4px;
    color:#ff3833;
    margin:1rem 0;
}
.about-page .about-desc {
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.8rem;
}

.about-buttons {
  margin-top: 2rem;
}

.top-banner .animateBtn{
  width: auto;
  height: auto;
  /*max-width: 213px!important;*/
}

.about-textbook-bg-small{
  width: 24%;
  max-width:240px;
  position: absolute;
  z-index: 9999;
  left:-10%;
  top: -6rem;
  background-size: 100%;
  pointer-events: none;
}

.about-textbook-bg-right{
  width: 24%;
  max-width: 250px;
  position: absolute;
  z-index: 9999;
  right:-6%;
  margin-left:-21%;
  top: -6rem;
  background-size: 100%;
  pointer-events: none;
}
.about-textbook-list {
  margin:1.5rem 0 1rem 0;
}
/*@media(min-width: 768px) {*/
  .about-textbook-list {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content:center;
  }
  .about-textbook-list .item{
    width: 16.666%;
  }
  .about-textbook-list .item.item-01 {
    width: 18%;
  }
  .about-textbook-list .item.item-03 {
    width: 15%;
  }
  .about-textbook-list .item.item-04 {
    width: 15%;
  }
  .about-textbook-list .item.item-02 .inner {
    margin-top: 7.5rem;
    margin-left: 4px;
  }
  .about-textbook-list .item.item-03 .inner {
    margin-top: 1.5rem;
  }
  .about-textbook-list .item.item-04 .inner {
    margin-top: 8.5rem;
  }
  .about-textbook-list .item.item-05 .inner {
    margin-top: 0.8rem;
  }
  .about-textbook-list .item.item-06 .inner {
    margin-top: 7rem;
  }

  .about-textbook-list .item-05 .inner {
    margin-left:-0.4rem;
  }
/*}*/

.about-textbook-list .item .inner{
  position: relative;
}

.about-textbook-list .item .hover-more{
  position: absolute;
  display: block;
  bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  width: 100%;
  height: 100%;
  /*line-height: 400%;*/
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
  color: #fff;
  text-align: center;
  /*padding-top:45%;*/
  font-weight:bold;
  font-size:1.1rem;
}

.about-textbook-list .item .inner:hover .hover-more{
  opacity: 1;
}

.about-textbook-list .inner:before{
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  width: 100%;
  height: 100%;
  background-image: url(../images/about-textbook-border.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.about-textbook-list .item-02 .inner:before {
  transform:rotate(-140deg);
  -ms-transform:rotate(-140deg);
  -moz-transform:rotate(-140deg);
  -webkit-transform:rotate(-140deg);
  -o-transform:rotate(-140deg);
  left: 13px;
  top: -12px;
}

.about-textbook-list .item-03 .inner:before {
  transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  left: 13px;
  top: 0;
}

.about-textbook-list .item-04 .inner:before {
  transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  left: 10px;
  top: 4px;
}

.about-textbook-list .item-05 .inner:before {
  transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  left: 10px;
  top: 4px;
}

.about-consultant {
  padding-top:3rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  background-image: url("../images/about-consultant-bg.png");
}

@media(min-width: 1680px) {
  .about-consultant {
    background-size: 1680px;
  }
}

.about-consultant-list .item.slick-slide {
  padding-top:1rem;
  padding-bottom:1rem;
}
.about-consultant-content {
  padding-bottom: 3rem;
}

.about-consultant-list.people-list {
  overflow: visible;
}

.about-banner {
  position: relative;
}

.about-banner-bubble {
  position: absolute;
  width: 53.7%;
  left:0.5%;
  bottom: 23.5%;
}
.about-banner-bubble img{
  width: 100%;
}


.box-news {
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url("../images/media-bg.png");
  background-size: 100%;
}



.news-title {
  font-size: 2.8rem;
  text-align: center;
  color:#009fa0;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  margin-bottom: 5rem;
  /*white-space: nowrap;*/
}
.news-title:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 57px;
  margin-left:-70px;
  background: url("../images/media-title-bg-1.png") no-repeat center center;
  background-size: 100%;
  left:50%;
  top:-60px;
}
.news-title:after {
  content: '';
  position: absolute;
  width: 140px;
  height: 68px;
  margin-left:-70px;
  background: url("../images/media-title-bg-2.png") no-repeat center center;
  background-size: 100%;
  left:50%;
  bottom:-74px;
}

.box-news-list {
  padding: 0.4rem 0;
}

.news-list .item {
  margin: 1rem 0;
}

.news-list .item, .news-list .item a {
  color:#009fa0;
  letter-spacing: 2px;
}
.news-list .item .title {
  position: absolute;
  left:0;
  top:0;
  padding-top:20%;
  width: 100%;
  font-size:1.2rem;
  color:#009fa0;
  padding:21% 10% 10% 10%;
}
.news-list .item .date {
  font-size:1rem;
  margin: 2px 0;
}
.news-list .item .link {
  font-size:1.2rem;
}
.news-list .item .link-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/media-link-icon.png") no-repeat center;
  background-size: 100%;
  position: relative;
  top:3px;
}

.news-list .news-item-popup {
  position: absolute;
  left:-10%;
  top:-1.5rem;
  width: 120%;
  z-index: 9998;
  opacity: 0;
  /*pointer-events: none;*/
}

.news-list .news-item-popup a{
  display: block;
}

.news-list .item:hover .news-item-popup{
  opacity: 1;
  /*pointer-events: none;*/
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.news-list .item-popup-inner {
  position: relative;
}

.news-list .item-popup-inner .image {
  position: absolute;
  left:0;
  top:0;
  z-index: 9999;
}

.news-list .item-popup-inner .image img {
  width: 80%!important;
  margin: 10% auto;
}

.box-news {
  padding-top:3rem;
}


.slideshow-container {
  max-width: 1680px;
  margin-left:auto;
  margin-right:auto;
}

@media(min-width: 768px) {
  .box-textbook-detail .inner-top-box {
    background: url(../images/inner-class-in-bg01.png) bottom no-repeat;background-size: 100%;
  }
}

.letter-spacing-1 {
  letter-spacing: 1px;
}

.letter-spacing-2 {
  letter-spacing: 2px;
}

.letter-spacing-3 {
  letter-spacing: 3px;
}

.letter-spacing-4 {
  letter-spacing: 4px;
}

.letter-spacing-5 {
  letter-spacing: 5px;
}

.box-textbook-detail .slider-for .slick-slide{
  padding:.6rem;
}

.share-link {
  color:#ff80c2!important;
}

.share-filter {
  margin: 1.5rem 0;
}
.audio-filter {
  margin-top:2rem;
  margin-bottom:2rem;
}

#share-list {
  margin-top:-0.5rem;
}

.common-padding-tb {
  padding-top:3rem;
  padding-bottom:3rem;
}

.box-share-info-detail {
    min-height: 400px;
}

.news-list#page-1 .item:first-child .inner:before {
  content: '';
  position: absolute;
  left:1.225rem;
  top:1.175rem;
  width: 54px;
  height: 20px;
  background: url(../images/new-icon.png) center no-repeat;
  background-size: 100%;
}
@media(min-width: 768px) and (max-width: 992px) {
  .news-list .item:first-child .inner:before {
    width: 44px;
    height: 17px;
  }
}

.button-mobile-image:hover, .button-mobile-image:focus, .button-mobile-image:active{
  color:#838382!important;
}


.box-pc-slick .slick-prev{
  background: url(../images/home-class-left.png) center no-repeat;
  background-size: 100%;
  left: -30px;
  z-index: 99;
  height: 56px;
  width: 21px;
}
.box-pc-slick .slick-next{
  background: url(../images/home-class-right.png) center no-repeat;
  background-size: 100%;
  right: -30px;
  z-index: 99;
  height: 56px;
  width: 21px;
}
.box-pc-slick .slick-prev:before,.box-pc-slick .slick-next:before{
  display: none;
}
.box-share-images .item {
  padding:15px;
}

.purple {
  color:purple;
}

.orange {
  color:#ff7f01;
}

.box-support-1 .image img {
  border-radius: 100%;
}、
.box-support-2 .image img {
  border-radius: 30px;
}
.box-support-3 .image img {
  border-radius: 26px;
}

.about-idea .list .item img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.about-idea .list .item:hover img {
  opacity: 0.7;
}



.consultant-popup-content {
  max-width: 900px;
}

.consultant-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.consultant-wrapper .name {
  color:#ff5b58;
}
.consultant-wrapper .position {
  font-size:18px;
  letter-spacing: 1px;
}
.consultant-wrapper .image {
  width: 40%;
}
.consultant-wrapper .image-inner {
  padding:1rem;
}
.consultant-wrapper .info {
  width: 60%;
  padding-left:2%;
  padding-right:2%;
}
.consultant-wrapper .info.no-image-info {
  width: 100%;
  padding-left:0;
}

.consultant-wrapper .consultant-img {
  position: relative;
}
.consultant-wrapper .consultant-img img {
  border-radius: 100%;
}

.consultant-wrapper .description {
  position: relative;
  padding-left:45px;
  padding-right:45px;
  text-align: justify;
}
.consultant-wrapper .description:before {
  content: '';
  position: absolute;
  left:2px;
  top:-14px;
  width: 34px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size:100%;
  background-image: url("../images/study-left.png");
}
.consultant-wrapper .description:after {
  content: '';
  position: absolute;
  right:2px;
  bottom:-14px;
  width: 34px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: center;
  background-size:100%;
  background-image: url("../images/study-right.png");
}

.consultant-wrapper .consultant-img:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/border-circle-red.png");
  left: 12px;
  top: -12px;
  transform:rotate(-190deg);
  -ms-transform:rotate(-190deg);
  -moz-transform:rotate(-190deg);
  -webkit-transform:rotate(-190deg);
  -o-transform:rotate(-190deg);
}
/*.popup-inner-info-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}*/

.popup-inner-info-wrapper {
  padding-top:2rem;
}

@media(max-width: 767px) {
  .popup-inner-info-wrapper {
    padding-top:0.375rem;
  }

  .consultant-wrapper {
    display: block;
  }
  .consultant-wrapper .image {
    width: 100%;
  }
  .consultant-wrapper .info {
    width: 100%;
    margin-top:-.5rem!important;
  }
  .consultant-wrapper .image-inner {
    max-width: 82%;
    margin-left:auto;
    margin-right:auto;
    padding:1rem;
  }
}

.consultant-share-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.consultant-share-wrapper .name {
  color:#2793bf;
  font-size:22px;
  letter-spacing: 2px;
}
.consultant-share-wrapper .position {
  font-size:17px;
}
.consultant-share-wrapper .image {
  width: 38%;
}
.consultant-share-wrapper .image-inner {
  padding:2rem;
}
.consultant-share-wrapper .info {
  width: 62%;
  padding-left:4%
}
@media(max-width: 767px) {
  .consultant-share-wrapper .info {
    padding-left:0;
  }
}
.consultant-share-wrapper .info.no-image-info {
  width: 100%;
  padding-left:0;
}

.consultant-share-wrapper .consultant-img {
  position: relative;
}
.consultant-share-wrapper .consultant-img img {
  border-radius: 100%;
}


.consultant-share-wrapper .consultant-img:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-image: url("../images/border-circle-blue.png");
  left: 12px;
  top: -12px;
}

.consultant-share-wrapper .description {
  position: relative;
  font-size:14px;
  line-height: 1.8;
}

.consultant-share-wrapper .popup-inner-info-wrapper {
  padding-top:1.725rem;
}


.consultant-share-wrapper .info .title {
  font-size: 28px;
  color:#2793bf;
  letter-spacing: 2px;
}


.faq-title {
  font-size: 2.8rem;
  text-align: center;
  color:#ff80c2;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  width: 320px;
  /*white-space: nowrap;*/
}
.faq-title:before {
  content: '';
  position: absolute;
  width: 67px;
  height: 98px;
  background: url("../images/faq-left.png") no-repeat center center;
  background-size: 100%;
  left:-10%;
  top:-30px;
}
.faq-title:after {
  content: '';
  position: absolute;
  width: 66px;
  height: 100px;
  background: url("../images/faq-right.png") no-repeat center center;
  background-size: 100%;
  right:-7%;
  top:-27px;
}

@media(max-width: 575px) {
  .faq-title {
    font-size: 2rem;
    width: 200px;
  }
  .faq-title:before {
    width: 39px;
    height: 60px;
    left:-17%;
    top:-17px;
  }
  .faq-title:after {
    width: 39px;
    height: 60px;
    right:-12%;
    top:-15px;
  }
}



@media(max-width: 767px) {
  .consultant-share-wrapper .popup-inner-info-wrapper {
    padding-top:0.375rem;
  }

  .consultant-share-wrapper {
    display: block;
  }
  .consultant-share-wrapper .image {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .consultant-share-wrapper .image-inner {
    padding:.5rem;
    width: 36%;
    margin-right:10px;
  }
  .consultant-share-wrapper .consultant-info {
    width: 64%;
  }
  .consultant-share-wrapper .consultant-img:before {
    left:5px;
    top:-5px;
  }
  .consultant-share-wrapper .info {
    width: 100%;
  }
  .consultant-share-wrapper .name {
    margin-top:1rem;
    font-size:20px;
  }
  .consultant-share-wrapper .position {
    font-size:14px;
    line-height: 22px;
  }
  .consultant-share-wrapper .info {
    margin-top:5px!important;
  }
  .consultant-share-wrapper .info .title {
    font-size:22px;
  }
  .consultant-wrapper .name {
    font-size: 1.725rem;
  }
}


.box-consultant-share-list .share-list .item.item-01 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: -15px;
  top: -7px;
}
.box-consultant-share-list .share-list .item.item-02 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: 22px;
  top: 15px;
}
.box-consultant-share-list .share-list .item.item-03 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: 22px;
  top: 15px;
}
.box-consultant-share-list .share-list .item.item-04 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: 14px;
  top: -8px;
}
.box-consultant-share-list .share-list .item.item-05 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: -20px;
  top: 14px;
}
.box-consultant-share-list .share-list .item.item-06 .item-info:before{
  background-image: url("../images/consultant-share-line.png");
  left: 16px;
  top: -12px;
}

.box-consultant-share-list .share-list .hover-more {
  padding-top: 36%;
}

.box-consultant-share-list .share-list .item {
  margin:2rem 0 0.2rem 0;
}

.my-pagination.pagination-blue {
  margin-top:.725rem;
}

.box-consultant-share-list .title {
  text-align: left;
  margin-top: 0.675rem;
}
.box-consultant-share-list .title a {
  color: #2793bf;
  letter-spacing: 2px;
  text-align: center;
  font-size: 18px;
  line-height: 22px;
}

.box-consultant-share-list .buttons {
  margin-top: 1.8rem;
}


.consultant-share-title {
  font-size: 2.8rem;
  text-align: center;
  color:#2793bf;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  width: 320px;
  /*white-space: nowrap;*/
}
.consultant-share-title:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 80px;
  background: url("../images/consultant-title-left.png") no-repeat center center;
  background-size: 100%;
  left:-5%;
  top:-16px;
}
.consultant-share-title:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 80px;
  background: url("../images/consultant-title-right.png") no-repeat center center;
  background-size: 100%;
  right:-3%;
  top:-16px;
}

@media(max-width: 575px) {
  .consultant-share-title {
    font-size: 2rem;
    width: 200px;
  }
  .consultant-share-title:before {
    width: 31px;
    height: 50px;
    left:-11%;
    top:-10px;
  }
  .consultant-share-title:after {
    width: 31px;
    height: 50px;
    right:-7%;
    top:-10px;
  }
}

#body-consultant_share{
  background-repeat: no-repeat;
  background-image: url(../images/consultant-share-bg.png);
  background-size: cover;
  background-position: center 120px;
}

@media(min-width: 1440px) {
  #body-consultant_share{
    background-size: 1440px;
  }
}


@media(max-width: 768px) {
  #body-consultant_share{
    background-image: url(../images/consultant-share-mobile-bg.png);
  }
}




#body-events{
  background-repeat: no-repeat;
  background-image: url(../images/events-bg.png);
  background-size: 100%;
  background-position: center 120px;
}


#body-events.events-body-latest{
  background-repeat: no-repeat;
  background-image: url(../images/events-bg2.png);
  background-size: 100%;
  background-position: center 120px;
}

@media(min-width: 1440px) {
  #body-events{
    /*background-size: 1440px;*/
  }
}


@media(max-width: 768px) {
  #body-events, #body-events.events-body-latest{
    background-image: url(../images/consultant-share-mobile-bg.png);
  }
}


.box-events {
  padding-bottom: 2rem;
}

.box-events-list .share-list .item .item-info:before{
  background-image: url("../images/events-border-01.png");
}

.box-events-list .share-list .item.item-01 .item-info:before{
  left: -15px;
  top: -7px;
}
.box-events-list .share-list .item.item-02 .item-info:before{
  left: 22px;
  top: 15px;
}
.box-events-list .share-list .item.item-03 .item-info:before{
  left: 22px;
  top: 15px;
}
.box-events-list .share-list .item.item-04 .item-info:before{
  left: 14px;
  top: -8px;
}
.box-events-list .share-list .item.item-05 .item-info:before{
  left: -20px;
  top: 14px;
}
.box-events-list .share-list .item.item-06 .item-info:before{
  left: 16px;
  top: -12px;
}

.box-events-list .share-list .hover-more {
  padding-top: 36%;
}

.box-events-list .share-list .item {
  margin:2rem 0 0.2rem 0;
}

.box-events-list .info {
  padding:1.175rem 0;
}
.box-events-list .title-date {
  min-height: 72px;
}
.box-events-list .title {
  line-height: 22px;
  margin-top:6px;
}
.box-events-list .title a {
  color: #b631ae;
  letter-spacing: 1px;
  text-align: center;
  font-size: 18px;
}
.box-events-list .date {
  margin-top:5px;
  font-size:14px;
}
.box-events-list .buttons {
  margin-top:10px;
}
.box-events-list .past-buttons {
  margin-bottom:10px;
}


.events-title {
  font-size: 2.8rem;
  text-align: center;
  color:#b631ae;
  letter-spacing: 10px;
  position: relative;
  margin:0 auto;
  width: 320px;
  /*white-space: nowrap;*/
}
.events-title:before {
  content: '';
  position: absolute;
  width: 78px;
  height: 96px;
  background: url("../images/events-title-left.png") no-repeat center center;
  background-size: 100%;
  left:-12%;
  top:-25px;
}
.events-title:after {
  content: '';
  position: absolute;
  width: 78px;
  height: 96px;
  background: url("../images/events-title-right.png") no-repeat center center;
  background-size: 100%;
  right:-8%;
  top:-25px;
}

@media(max-width: 575px) {
  .events-title {
    font-size: 2rem;
    width: 200px;
  }
  .events-title:before {
    width: 46px;
    height: 70px;
    left:-16%;
    top:-18px;
  }
  .events-title:after {
    width: 46px;
    height: 70px;
    right:-12%;
    top:-16px;
  }
}

.events-popup-content {
  max-width: 780px;
}

.events-popup-content .popup-inner {
  padding:2rem 6%;
}

.events-wrapper .title {
  font-size:30px;
  color:#b631ad;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.events-wrapper .buttons {
  margin-top:1.725rem;
}



/***** mobile style ****/
.box-mobile-slick.people-list {
  overflow: visible;
}
.box-mobile-consultant {
  padding:0 1.375rem;
}

.box-mobile-consultant .item.slick-slide {
  padding-top:1rem;
  padding-bottom:1rem;
}

.box-mobile-home-learn {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.box-mobile-home-learn .box-mobile-slick {

}
.box-mobile-home-learn .box-mobile-slick .slick-prev{
  background: url(../images/arrow-yellow-left.png) center no-repeat;
  background-size: cover;
  left: -1.5rem;
  top:65%;
  z-index: 99;
  width: 14px;
  height: 42px;
}
.box-mobile-home-learn .box-mobile-slick .slick-next{
  background: url(../images/arrow-yellow-right.png) center no-repeat;
  background-size: cover;
  right: -1.5rem;
  z-index: 99;
  width: 16px;
  top:65%;
  height: 43px;
}

.box-mobile-home-textbook .class-list{
  padding-left:2.3rem;
  padding-right:2.3rem;
}
.mobile-slideshow .swiper-slide {
  text-align: center;
}
.mobile-slideshow .swiper-slide img{
  max-width: 88%;
  margin:0 auto;
  /*background-color: #fff;*/
}

.button-mobile-image {
  display: inline-block;
  width: 100%;
  max-width: 160px;
  min-height:50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image:url("../images/button-mobile-bg-01.png");
  font-family:'MYuenHK-Xbold',Arial;
  padding-top:10%;
  vertical-align: middle;
  letter-spacing: 1px;
  text-align: center;
  color:#ff3833;
  font-size: 0.875rem;
}

.box-mobile-home-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  justify-content:center;
  margin-bottom: 0.2rem;
}

.box-mobile-home-buttons {
  margin-left:-1%;
  margin-right:-1%;
}
.box-mobile-home-buttons > div {
  width: 33.333%;
  padding:0 1%;
}



.mobile-consultant-bg-02{
  width: 24%;
  max-width: 100px;
  position: absolute;
  left:8%;
  bottom: -2.6rem;
  background-size: 100%;
  pointer-events: none;
}
.mobile-consultant-bg-03{
  width: 14%;
  max-width: 80px;
  position: absolute;
  left:8%;
  top: -6rem;
  background-size: 100%;
  pointer-events: none;
}

.mobile-textbook-bg-02{
  width: 20%;
  max-width: 100px;
  position: absolute;
  left:8%;
  bottom: -3.6rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}
.mobile-textbook-bg-03{
  width: 18%;
  max-width: 80px;
  position: absolute;
  right:6%;
  bottom: -3rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}

.mobile-textbook-page-bg-02{
  width: 30%;
  max-width: 100px;
  position: absolute;
  left:-5%;
  top: -3.6rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 0;
}
.mobile-textbook-page-bg-03{
  width: 26%;
  max-width: 100px;
  position: absolute;
  right:-6%;
  bottom: -5rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}

.mobile-textbook-detail-page-bg-02{
  width: 34%;
  max-width: 100px;
  position: absolute;
  right:6%;
  bottom: -2.8rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}

.mobile-textbook-detail-page-bg-03{
  width: 21%;
  max-width: 80px;
  position: absolute;
  left:3%;
  bottom: -3.2rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
  transform:rotate(-20deg);
  -ms-transform:rotate(-20deg);
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  -o-transform:rotate(-20deg);
}


.mobile-learn-detail-page-bg-02{
  width: 24%;
  max-width: 100px;
  position: absolute;
  right:2%;
  bottom: -4.6rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}
.mobile-learn-detail-page-bg-03{
  width: 22%;
  max-width: 100px;
  position: absolute;
  left:3%;
  bottom: -6rem;
  background-size: 100%;
  pointer-events: none;
  z-index: 99;
}

.mobile-top-banner .info .title {
  letter-spacing: 3px;
  font-size:1.3rem;
  color:#ff3833;
  margin:1rem 0 0.3rem 0;
}
.mobile-top-banner .info .desc {
  letter-spacing: 2px;
  /*font-size:1rem;*/
  line-height: 1.6rem;
  font-weight: bold;
}

.learn-mobile-title {
  font-size:1.5rem;
  color:#ff8002;
}


.cat-item-wrapper span, .cat-item-wrapper a{
  font-family: 'MYuenHK-SemiBold',Arial;
  font-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/textbook-title-red-bg.png);
  background-size: cover;
  padding:7px 30px;
  color: #fff;
  display: inline-block;
  white-space:nowrap;

}
.cat-item-wrapper.cat-item-blue span, .cat-item-wrapper.cat-item-blue a{
  background-image: url(../images/textbook-title-blue-bg.png);
}
.cat-item-wrapper.cat-item-purple span, .cat-item-wrapper.cat-item-purple a{
  background-image: url(../images/textbook-title-purple-bg.png);
}
.cat-item-wrapper.cat-item-pink span, .cat-item-wrapper.cat-item-pink a{
  background-image: url(../images/textbook-title-pink-bg.png);
}
.cat-item-wrapper.cat-item-green span, .cat-item-wrapper.cat-item-green a{
  background-image: url(../images/textbook-title-green-bg.png);
}
.cat-item-wrapper.cat-item-green-blue span, .cat-item-wrapper.cat-item-green-blue a{
  background-image: url(../images/textbook-title-green-blue-bg.png);
}
.cat-item-wrapper.cat-item-dark-blue span, .cat-item-wrapper.cat-item-dark-blue a{
  background-image: url(../images/textbook-title-dark-blue-bg.png);
}

.list-cat-item .cat-item-wrapper span, .list-cat-item .cat-item-wrapper a {
  padding:3px 17px;
}

.span-view-more {
  margin-top: 10px;
  display: inline-block;
  font-size:1.1rem;
}


@media(max-width: 767px) {
  .cat-item-wrapper span, .cat-item-wrapper a{
    padding:3px 17px;
  }
  .span-view-more {
    display: none;
  }
}

.mobile-textbook-banner-desc p {
  /*margin-top:8px;*/
}

.popup-slick-wrapper .slick-dots li {
  width: 15px;
  height: 15px;
}
.popup-slick-wrapper .slick-dots li button{position: relative;background: none;border:1px solid #838382;border-radius: 50%;padding: 0 !important;width: 15px;height: 15px;z-index: 0;}
.popup-slick-wrapper .slick-dots li button:before{content: "";width: 100%;height:100%;border-radius: 50%;position: absolute;z-index: -2;left: 1px;top:1px;}
.popup-slick-wrapper .slick-dots .slick-active button:before{color: #ff3833;background: #b631ae;}

@media(max-width: 767px) {
  .control-wrapper {
    text-align: center!important;
  }
  .people-list-tit {
    font-size:13px;
  }
  .span-view-more {
    margin-top:5px;
  }
  .box-mobile-slick .slick-prev{
    background: url(../images/home-class-left.png) center no-repeat;
    background-size: 100%;
    left: -1.375rem;
    z-index: 99;
    height: 42px;
    width: 15px;
  }
  .box-mobile-slick .slick-next{
    background: url(../images/home-class-right.png) center no-repeat;
    background-size: 100%;
    right: -1.375rem;
    z-index: 99;
    height: 46px;
    width: 17px;
  }
  .box-mobile-slick .slick-prev:before,.box-mobile-slick .slick-next:before{
    display: none;
  }

  .events-popup-content .box-mobile-slick .slick-prev {
    left: -0.925rem;
  }

  .events-popup-content .box-mobile-slick .slick-next {
    right: -0.925rem;
  }

  .events-wrapper .title {
    font-size:24px;
  }

  body {
    /*font-size: .9375rem;*/
    font-size: 15px;
    font-family:'MYuenHK-Xbold',Arial;
    line-height: 1.6rem;
  }
  .home-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .home-about-study-leaf {
    top:auto;
    bottom: -1.5rem;
    right:3rem;
  }
  .home-about-study-leaf img {
    width: 70px;
  }

  .mobile-slideshow-container .swiper-pagination {
    /*bottom: 0px;*/
    /*top:-10px;*/
    /*z-index: 9999;*/
    margin-top:8px;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px;
  }

  .mobile-home-page {
    background-size: 100%;
    background-position: center 7rem;
    background-repeat: no-repeat;
    background-image: url("../images/home-page-mobile-bg.png");
  }

  .mobile-slideshow .swiper-slide {
    background-color: transparent;
  }

  .home-class {
    background: #f7f7f7 url(../images/home-textbook-mobile-bg.png) center 3rem no-repeat;
    background-size: 100%;
  }

  .home-class.inner-class {
    background: #ffffff url(../images/textbook-mobile-bg.png) center 8rem no-repeat;
    background-size: 100%;
  }

  .box-textbook-list .inner-top-box, .inner-bottom-box{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .home-children {
    background:#ffffff url(../images/home-learn-mobile-bg.png) center bottom no-repeat;
    background-size: 100%;
  }

  .home-people {
    background: #f7f7f7 url(../images/home-consultant-mobile-bg.png) right bottom no-repeat;
    background-size: 30%;
    position: relative;
  }

  .mobile-textbook-arrow {
    width: 96%!important;
  }

  .inner-class .class-list .img-02 {
    position: relative;
    left:10%;
  }

  .inner-class .class-list .img-04 {
    position: relative;
    left:10%;
  }


  .box-mobile-textbook-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
    justify-content:center;
  }

  .box-mobile-textbook-buttons a{
    width: 50%;
    margin:0 5px;
  }

  .button-image {
    width: 100%;
    max-width: 213px;
    min-height: 40px;
    background-size: 100%;
    font-size:0.875rem;
    white-space:nowrap;
  }

  .box-textbook-detail {
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url("../images/textbook-detail-mobile-bg.png");
  }

  .learn-detail-page {
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url("../images/learn-detail-mobile-bg.png");
  }

  .learn-accessories .learn-accessories-inner {
    background-image: url(../images/learn-bg-mobile-bottom2.png);
  }

  .box-learn {
    padding-top:2rem;
    background-image: url(../images/learn-mobile-bg.png);
    background-position: center 20px;
  }
  .learn-page-inner {
    background-image: none;
  }

  .buttons-style-1 {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content:center;
    margin-top: 4rem;
    flex-wrap: wrap;
  }

  .buttons-style-1 a {
    width: 47%;
    margin-left: 1.5%!important;
    margin-right:1.5%!important;
  }

  .buttons-style-1 .button-image {
    margin: 4px auto;
  }

  .button-image span:after {
    width: 18px;
    height: 18px;
    top:2px;
    right:0;
  }

  .button-image {
    width: 180px;
    height:34px;
    /*padding-top: 6px;*/
    line-height: 24px;
  }

  .class-list-img:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/class-01-border.png) center no-repeat;
    background-size: cover;
    transform:rotate(160deg);
    -ms-transform:rotate(160deg);
    -moz-transform:rotate(160deg);
    -webkit-transform:rotate(160deg);
    -o-transform:rotate(160deg);
  }

  .class-list .img-02:before {
    left: 12px;
    top: 0;
    background: url(../images/class-02-border.png) center no-repeat;
    background-size: cover;
  }

  .class-list .img-03:before {
    left: 10px;
    top: 8px;
    background: url(../images/class-03-border.png) center no-repeat;
    background-size: cover;
    transform:rotate(80deg);
    -ms-transform:rotate(80deg);
    -moz-transform:rotate(80deg);
    -webkit-transform:rotate(80deg);
    -o-transform:rotate(80deg);
  }

  .class-list .img-04:before {
    left: -8px;
    top: 5px;
    background: url(../images/class-03-border.png) center no-repeat;
    background-size: cover;
    transform:rotate(80deg);
    -ms-transform:rotate(80deg);
    -moz-transform:rotate(80deg);
    -webkit-transform:rotate(80deg);
    -o-transform:rotate(80deg);
  }

  .inner-bottom-box .slick-prev {
    left: -1.375rem;
    height: 42px;
    width: 15px;
  }
  .inner-bottom-box .slick-next {
    right: -1.375rem;
    height: 43px;
    width: 16px;
  }

  .footer-icon-r {
    margin-top: 1.3rem;
    font-family:'MYuenHK-Xbold',Arial;
  }
  .footer-icon-r a {
    margin-right: 0.6rem;
  }

  .box-accessories-detail .image, .box-accessories-detail .info, .box-audio-detail .image, .box-audio-detail .info {
    width: 100%;
  }

  .box-accessories-detail .info {
    padding-left:0;
  }

  .inner-class .class-list .class-list-img {
    margin-bottom: 2rem;
  }

  .accessories-detail-title, .audio-detail-title {
    font-size:1.375rem;
  }

  .box-dropdown {
    width: 100%;
    max-width: 160px;
  }
  .box-dropdown .dropdown-button {
    width: 100%;
    max-width: 160px;
    background-size: 100%!important;
    font-size: 1.08rem;
    background-image: url("../images/button-bg-short-01.png");
  }

  .box-dropdown.dropdown-style-1 .dropdown-button {
    background-image: url("../images/button-bg-short-02.png");
  }
  .box-dropdown.dropdown-style-2 .dropdown-button {
    background-image: url("../images/button-bg-short-01.png");
  }
  .box-dropdown.dropdown-style-3 .dropdown-button {
    background-image: url("../images/button-bg-short-03.png");
  }

  .box-dropdown.dropdown-style-4 .dropdown-button {
    background-image: url("../images/dropdown-blue-bg-short.png");
  }

  .box-dropdown .dropdown-button img {
    max-width: 22px;
  }

  .mobile-row {
    margin-left:-6px;
    margin-right:-6px;
  }

  .mobile-row .col-6 {
    padding-left:6px;
    padding-right:6px;
  }

  .disk-listting-top .disk-listting{
    width: 50%;
    padding-left:3%;
    padding-right:3%;
  }

  .disk-content .disk-image img {
    max-width: 100%;
  }

  .disk-circle-image {
    width: 88%;
  }

  .form-control {
    height: calc(1.5em + 1rem + 4px);
  }

  select, .form-style select{
    calc(1.5em + 1rem + 6px)
  }

  .support-page {
    background-image: none;
  }

  .box-support-2 .list-item .item {
    margin-top:1.5rem;
    margin-bottom:1.5rem;
  }

  .box-support-3 .list-item {
    padding-left:2rem;
    padding-right:2rem;
  }

  .support-page .list-title, .about-page .about-title, .home-title, .learn-title, .mobile-top-banner .info .title, .mobile-common-title, .contact-title {
    font-size: 1.375rem;
    letter-spacing: 3px;
  }

  .top-banner-title-support {
    color:#0043a6!important;
  }

  .top-banner-title-support.sub-title {
    /*color:#0043a6!important;*/
    /*font-size: 1rem!important;*/
    margin-top: 0rem!important;
  }

  .audio-title {
    margin-top:1.5rem!important;
  }

  .about-textbook-list {
    /*padding-left: 2rem;*/
    /*padding-right: 2rem;*/
  }

/*  .about-textbook-list .item {
    position: relative;
    margin-top:1.5rem;
    margin-bottom:1.5rem;
  }
  .about-textbook-list .item-01, .about-textbook-list .item-03, .about-textbook-list .item-05 {
    left:-8%
  }
  .about-textbook-list .item-02, .about-textbook-list .item-04 {
    right:-8%
  }*/

  .about-about {
    padding: 3.8rem 0 2rem 0;
  }

  /*.about-mobile-description, .about-mobile-description p, .about-mobile-description span, .about-mobile-description div {font-size:1rem!important;}*/

  .about-consultant-content {
    padding-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .buttons-style-1 {
    margin-left:-1.5%;
    margin-right:-1.5%;
  }

  .about-textbook-list .inner:before{
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 100%;
    height: 100%;
    background-image: url(../images/about-textbook-border.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .about-textbook-list .item-02 .inner:before {
    left: 6px;
    top: -4px;
  }

  .about-textbook-list .item-03 .inner:before {
    left: 6px;
    top: 0;
  }

  .about-textbook-list .item-04 .inner:before {
    left: 5px;
    top: 2px;
  }

  .about-textbook-list .item-05 .inner:before {
    left: 5px;
    top: 2px;
  }

  .mobile-slick-padding {
    padding-left:1.375rem;
    padding-right:1.375rem;
  }

  .about-textbook-list .item .inner {
  }
  .about-textbook-list .item.item-02 .inner {
    margin-top: 4rem;
    margin-left: 4px;
  }
  .about-textbook-list .item.item-03 .inner {
    margin-top: 1rem;
  }
  .about-textbook-list .item.item-04 .inner {
    margin-top: 4.5rem;
  }
  .about-textbook-list .item.item-05 .inner {
    margin-top: 1rem;
  }

  .about-about {
    background-image:url("../images/about-about-bg-mobile.png");
    background-position: center 1rem;
  }

  .about-textbook {
    background-image:url("../images/about-textbook-mobile-bg.png");
    background-position: center 30%;
  }
  .about-idea {
    background-image:url("../images/about-idea-mobile-bg.png");
    background-position: right 10%;
  }

  .box-about-banner-mobile {
    padding:2rem 0;
    background-image:url("../images/about-banner-bg-mobile.png");
    background-position: center 1rem;
    background-repeat:no-repeat;
    background-size:100%;
    background-color: #f7f7f7;

  }
  .box-about-banner-mobile .desc{
    line-height: 1.6rem;
  }

  .about-idea {
    padding-left:0;
    padding-right:0;
  }

  .about-idea .main-img {
    width: 30%;
  }
  .about-idea .lists {
    width: 70%;
  }

  .about-idea .list .item-05 {
    left:3%;
    top:2.8%;
    margin-right:1%
  }
  .about-idea .list .item-04 {
    left:3%;
    top:22%;
    margin-right:3%
  }
  .about-idea .list .item-03 {
    left:3%;
    top:39.3%;
    margin-right:4%
  }
  .about-idea .list .item-02 {
    left:2%;
    top:60%;
    margin-right:2%
  }
  .about-idea .list .item-01 {
    left:3%;
    top:78.8%;
    margin-right:5%
  }

  .about-idea-mobile .box-about-idea-mobile-popup {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    z-index: 997;
    opacity: 0;
    pointer-events: none;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
  }

  .about-idea-mobile .box-about-idea-mobile-popup.active {
    opacity: 1;
    pointer-events: auto;
  }

  .about-idea-mobile .about-idea-mobile-popup {
    position: absolute;
    left:7%;
    top:15.5%;
    width: 86%;
    z-index: 998;
  }

  .common-padding-tb {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .common-margin-tb-1 {
    margin-top:1rem;
    margin-bottom:1rem;
  }

  .about-idea-mobile-close {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(../images/popup-close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    left:-1.1rem;
    top:-0.2rem;
    z-index: 999;
  }

  .box-textbook-detail {
    padding-top:0rem!important;
  }
  .inner-box-in .slider-for {
    padding: 0;
    margin-bottom: 0.125rem!important;
  }
  .inner-box-in .slider-nav {
    margin:0 10%;
  }

  .inner-box-in .slick-slide {
    padding: 0 2px;
  }

  .mobile-about-textbook-bg-02{
    width: 36%;
    max-width: 100px;
    position: absolute;
    right:6%;
    top: -4rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .mobile-about-textbook-bg-03{
    width: 21%;
    max-width: 80px;
    position: absolute;
    left:3%;
    top: -4.6rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .mobile-about-textbook-bg-04{
    width: 22%;
    max-width: 80px;
    position: absolute;
    left:6%;
    bottom: -3.5rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .mobile-about-textbook-bg-05{
    width: 12%;
    max-width: 70px;
    position: absolute;
    right:3%;
    bottom: -3.3rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .mobile-about-idea-bg-03{
    width: 32%;
    max-width: 90px;
    position: absolute;
    left:6%;
    top: -4.8rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .mobile-about-idea-bg-04{
    width: 14%;
    max-width: 80px;
    position: absolute;
    right:10%;
    top: -5.6rem;
    background-size: 100%;
    pointer-events: none;
    z-index: 99;
  }

  .about-consultant {
    background-image: none;
  }

  .mobile-slideshow-container{
    padding-top: 1rem;
  }

  .people-list .img-01:before{
    left: 6px;
    top: -3px;
  }
  .people-list .img-02:before{
    left: 5px;
    top: 0;
  }
  .people-list .img-03:before{
    left: 3px;
    top: -6px;
  }
  .people-list .img-04:before{
    left: -6px;
    top: -3px;
  }
  .people-list .img-05:before{
    left: 0px;
    top: 7px;
  }
  .people-list .img-06:before{
    left: -3px;
    top: -7px;
  }
  .people-list .img-07:before{
    left: 0px;
    top: 5px;
  }
  .people-list .img-08:before{
    left: 6px;
    top: 0px;
  }

  .all-item-padding {
    padding: 2rem 0;
  }

  .home-about {
    margin-top:1rem;
  }

  .animateBtn {
    width: 180px;
    height: 34px;
  }

  .news-title {
    font-size:2rem;
  }

  .news-title:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 41px;
    margin-left: -50px;
    background: url(../images/media-title-bg-1.png) no-repeat center center;
    background-size: 100%;
    left: 50%;
    top: -45px;
  }

  .news-title:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 48px;
    margin-left: -50px;
    background: url(../images/media-title-bg-2.png) no-repeat center center;
    background-size: 100%;
    left: 50%;
    bottom: -56px;
  }

  .box-news {
    /*background-image: none;*/
  }

  .news-list .news-item-popup {
    left: -5%;
    top: -1.2rem;
    width: 110%;
  }
  .home-about-study-l {
    left: 0.325rem;
  }
  .home-about-study-r {
    right: 1.325rem;
    bottom: -0.725rem;
  }
  .home-about-study img {
    width: 40px;
  }

  header {
    padding:0.375rem 0;
  }

/*  .box-mobile-home-buttons {
    position: fixed;
    left:0;
    top:70px;
    width: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 95;
  }*/

  .logo {
    margin-top:5px;
    margin-bottom:5px;
  }

  .top-menu-icon a {
    padding:0;
  }

  .inner-bottom-list {
    margin: 0;
  }

  .box-mobile-textbook-buttons {
    margin-left:-4px;
    margin-right:-4px;
  }
  .box-mobile-textbook-buttons > div {
    margin: 0 4px;
  }

  .inner-box-in .slider-nav {
    margin:0 1.5rem;
  }

  .inner-bottom-list-li {
    margin:0 6px;
  }

  .news-list#page-1 .item:first-child .inner:before {
    left:11%;
    width: 36px;
    height: 14px;
  }

  .news-item-bg {
    width: 90%;
  }
  .news-list .item .title {
    left:5%;
    width: 90%;
    font-size: 1.075rem;
    color: #009fa0;
    padding: 18.5% 10% 10% 10%;
    text-align: center;
  }

  .inner-bottom-box .box-mobile-slick .slick-prev {
    background: url(../images/inner-bottom-left.png) center no-repeat;
    background-size: cover;
  }
  .inner-bottom-box .box-mobile-slick .slick-next {
    background: url(../images/inner-bottom-right.png) center no-repeat;
    background-size: cover;
  }

  .container, .ward {
    padding-left:20px;
    padding-right:20px;
  }

  .support-page .list-desc, .support-page .list-remark {
    font-size: 15px;
    line-height: 1.6rem;
  }

  .productCat .productName span {
    font-size: 16px;
    padding: 6px 27px;
  }
  .productCat .productName-icon img {
    width:32px;
  }

  .about-page .about-desc {
    line-height: 1.6rem;
  }

  .box-social-share .item, .box-social-share .share-button-toggle {
    width: 46px;
    height: 46px;
    line-height: 44px;
  }

  .box-social-share .item a, .box-social-share .share-button-toggle {
    width: 46px;
    height: 46px;
    line-height: 44px;
  }
  .box-social-share .item.wechat a {
    width: 50px;
  }

/*  .box-social-share.scale-on .item.whatsapp {
    -webkit-transform: translateX(-220px) translateY(0) scale(1.0,1.0);
    transform:         translateX(-220px) translateY(0) scale(1.0,1.0);
  }*/

/*  .box-social-share.scale-on .item.wechat {
    -webkit-transform: translateX(-166px) translateY(0) scale(1.0,1.0);
    transform:         translateX(-166px) translateY(0) scale(1.0,1.0);
  }*/

  .box-social-share.scale-on .item.whatsapp {
    -webkit-transform: translateX(-108px) translateY(0) scale(1.0,1.0);
    transform:         translateX(-108px) translateY(0) scale(1.0,1.0);
  }

  .box-social-share.scale-on .item.copy {
    -webkit-transform: translateX(-166px) translateY(0) scale(1.0,1.0);
    transform:         translateX(-166px) translateY(0) scale(1.0,1.0);
  }

  .box-social-share.scale-on .item.facebook {
    -webkit-transform: translateX(-54px) translateY(0) scale(1.0,1.0);
    transform:         translateX(-54px) translateY(0) scale(1.0,1.0);
  }

  @media(max-width: 767px) {
    .box-social-share.mobile-box-social-share .item, .box-social-share.mobile-box-social-share .share-button-toggle {
      width: 38px;
      height: 38px;
      line-height: 36px;
    }

    .box-social-share.mobile-box-social-share .item a, .box-social-share.mobile-box-social-share .share-button-toggle {
      width: 38px;
      height: 38px;
      line-height: 36px;
    }
    .box-social-share.mobile-box-social-share .item.wechat a {
      width: 42px;
    }

    .box-social-share.mobile-box-social-share .item a, .box-social-share.mobile-box-social-share .share-button-toggle {
      font-size:.825rem;
    }

    .box-social-share.mobile-box-social-share.scale-on .item.whatsapp {
      -webkit-transform: translateX(-88px) translateY(0) scale(1.0,1.0);
      transform:         translateX(-88px) translateY(0) scale(1.0,1.0);
    }

    .box-social-share.mobile-box-social-share.scale-on .item.copy {
      -webkit-transform: translateX(-132px) translateY(0) scale(1.0,1.0);
      transform:         translateX(-132px) translateY(0) scale(1.0,1.0);
    }

    .box-social-share.mobile-box-social-share.scale-on .item.facebook {
      -webkit-transform: translateX(-44px) translateY(0) scale(1.0,1.0);
      transform:         translateX(-44px) translateY(0) scale(1.0,1.0);
    }
    .box-social-share.mobile-box-social-share {
      margin-top:2.5rem;
    }
    .events-wrapper .buttons {
      margin-top: .875rem;
    }

    .button-middle-image.button-middle-image2 {
      max-width: 120px;
      margin-top:-3px;
    }
  }

  .social-contact img {
    max-width: 46px!important;
  }

  .learn-desc {
    font-size:15px;
    margin-top:3px;
  }

  .footer-menu-li, .home-leftmenu, .children-list-top-tit, .children-list-top-tit {
    font-family:'MYuenHK-Xbold',Arial;
  }

  .button-image span {
    padding-right:22px;
  }

  .box-mobile-home-learn .children-list-img {
    margin-bottom: 20px;
  }

    .box-contact-form {
        padding-top: 1.5rem;
    }

    .box-contact-form .contact-title {
        margin: 1.5rem 0;
    }

    .contact-description {
      margin-top:2rem!important;
    }

  .box-dropdown .dropdown-content {
    margin-top:-3px;
  }

  .audio-filter .box-dropdown {
    margin-bottom: 10px;
  }

}




/**** cookies policy start ****/
.cookie-policy-wrapper {
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, .9);
  position: fixed;
  left:2%;
  bottom: 40px;
  z-index: 999999;
  width: 96%;
  color:#fff;
  border-radius: 10px;
}

.cookie-policy-wrapper .button-cookie-policy {
  text-align: center;
}
.cookie-policy-wrapper .editor {
  margin-top:5px;
}
.cookie-policy-wrapper .editor p {
  margin-bottom: 5px;
}
@media(min-width: 768px) {
  .cookie-policy-wrapper .container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
  }
  .cookie-policy-wrapper .text {
    width: 88%;
  }
}
/**** cookies policy end ****/

/**** notice start ****/
.notice-wrapper {
  padding: .625rem;
  background-color: #f7c2ce;
  left:2%;
  width: 100%;
  margin-top:-0.375rem;
  font-family:'MYuenHK-SemiBold',Arial;
  text-align: center;
  color:#333;
}
.notice-wrapper .button-cookie-policy {
  text-align: center;
}
.notice-wrapper .editor {
  margin-top:5px;
  text-align: center;
}
.notice-wrapper .editor p {
  margin-bottom: 5px;
}
@media(min-width: 768px) {
  .notice-wrapper {
    margin-top:-20px;
  }

}

.btn-close {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url(../images/popup-close.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-indent: -9999px;
  right: 2%;
  top:12px;
}
/**** cookies policy end ****/

.btn.btn-agree {
  width: 74px;
  height: 40px;
  line-height: 18px;
  background: url(../images/button-agree.png?v=1.0.1) no-repeat center;
  background-size: 100%;
  text-align: center;
  font-family: MYuenHK-Xbold;
  color: #838382;
  padding: .125rem .275rem .375rem .725rem;
  letter-spacing: 4px;
}

.audio-popup-content {
  max-width: 860px;
  margin-left:auto;
  margin-right:auto;
}

.audio-popup-content iframe, .audio-popup-content video  {
  width: 100%!important;
  height: 30vw;
}

@media (max-width: 767px) {
  .audio-popup-content iframe, .audio-popup-content video  {
    height: 50vw;
  }
}


.row-center {
  /*align-items:center;*/
  justify-content:center;
}

.yfContent {
  height:1px!important;
  overflow:auto;
  background:0 0;
  line-height:30px
}
.yfContent::-webkit-scrollbar {
  width:15px;
  background-color:#fff
}
.yfContent::-webkit-scrollbar-track {
  background-color:#fff
}
.yfContent::-webkit-scrollbar-thumb {
  background-color:#fff
}
.yfContent::-webkit-scrollbar-button {
  background-color:#fff
}
.yfContent::-webkit-scrollbar-corner {
  background-color:#fff
}
.yfContent * {
  position:relative!important
}
.yfContent *:first-child {
  padding-top:30px
}