@charset "utf-8";
/* CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", "微軟正黑體", "Helvetica", "Arial", sans-serif !important;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.content0,
.content1,
.content2,
.content3,
.content4,
.content5,
.content6,
.content7,
.content8,
.content9 {
  position: relative;
  width: 100%;
  height: 0;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  margin: 0 auto;
  background-color: #FFF;
}

.content0 {
  padding-bottom: 41.23%;
  background-image: url(../images/bg_00.jpg);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.text {
  height: 0;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.text_00 {
  display: none;
}

.sign_up_btn_m {
  display: none;
}

.sign_up_btn {
  position: absolute;
  top: 82.6%;
  width: 17.63%;
  height: 0;
  padding-bottom: 3.81%;
  display: flex;
  cursor: pointer;
}

.sign_up_btn::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  padding-bottom: 18.7%;
  border-radius: 45px;
  background-color: #A4A4A4;
  border: 5px solid #A4A4A4;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.80);
  display: block;
  transition: all .3s ease;
}

.sign_up_btn:hover::before {
  border: 5px solid #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0);
}

.sign_up {
  position: relative;
  margin-left: 7.21%;
  width: 68.51%;
  height: 0;
  padding-bottom: 21.63%;
  background-image: url(../images/sign_up.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.enter {
  position: relative;
  margin-left: 3.61%;
  width: 11.06%;
  height: 0;
  padding-bottom: 21.63%;
  background-image: url(../images/enter.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all .3s linear;
}

.sign_up_btn:hover .enter {
  margin-left: 7.21%;
}

.hand {
  position: absolute;
  top: 22.2%;
  right: 10.17%;
  width: 25.55%;
  height: 0;
  padding-bottom: 32.88%;
  background-image: url(../images/hand.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 2;
  animation-name: rollup;
  animation-duration: 1s;
  transform-origin: bottom right;
  animation-fill-mode: forwards;
}

@keyframes rollup {
  0% {
    transform: rotate(-90deg);
  }
	50%{
		transform: rotate(4deg);
	}
	75%{
		transform: rotate(-2deg);
	}			
	80%{
		transform: rotate(2deg);
	}			
	95%{
		transform: rotate(-1deg);
	}			
  100% {
    transform: rotate(0deg);
  }
}

.circle_spread_01 {
  position: absolute;
  top: 31.6%;
  right: 26.82%;
  width: 8.47%;
  height: 0;
  padding-bottom: 3.39%;
  background-image: url(../images/circle_spread.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  animation-name: elongateleft;
  animation-duration: 1s;
  transform-origin: center right;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes elongateleft {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
	50%{
		transform: scaleX(1.04);
	}
	75%{
		transform: scaleX(0.99);
	}
	80%{
		transform: scaleX(1.02);
	}
	95%{
		transform: scaleX(0.99);
	}			
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.circle_spread_02 {
  position: absolute;
  top: 72.6%;
  right: 9.19%;
  width: 8.47%;
  height: 0;
  padding-bottom: 3.39%;
  background-image: url(../images/circle_spread.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  animation-name: elongateright;
  animation-duration: 1s;
  transform-origin: center left;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes elongateright {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
	50%{
		transform: scaleX(1.04);
	}
	75%{
		transform: scaleX(0.99);
	}
	80%{
		transform: scaleX(1.02);
	}
	95%{
		transform: scaleX(0.99);
	}			
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.round {
  position: absolute;
  top: 31.6%;
  right: 36.57%;
  width: 3.39%;
  height: 0;
  padding-bottom: 3.39%;
  background-image: url(../images/round.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: showup;
  animation-duration: 1s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.circle_purple {
  position: absolute;
  top: 31.6%;
  right: 41.23%;
  width: 3.39%;
  height: 0;
  padding-bottom: 3.39%;
  background-image: url(../images/circle_purple.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: showup;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.circle_orange {
  position: absolute;
  top: 72.6%;
  right: 4.53%;
  width: 3.39%;
  height: 0;
  padding-bottom: 3.39%;
  background-image: url(../images/circle_orange.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: showup;
  animation-duration: 0.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.maru {
  position: absolute;
  height: 0;
  border-radius: 50%;
}

.maru_lp_I, .maru_lp_II, .maru_lp_III {
  display: none;
}

.content1 {
  padding-bottom: 46.31%;
	background-image: url(../images/bg_01.jpg);
}

.countdown {
  position: absolute;
  top: 8%;
  left: 60.3%;
  width: 8.4%;
  text-align: center;
}

.countdown h3 {
  color: #000;
}

.content2 {
  padding-bottom: 37.63%;
	background-image: url(../images/bg_02.png);
  display: flex;
  justify-content: center;
}

.content2 .sign_up_btn {
  top: 71.5%;
}

.content3 {
  padding-bottom: 94.07%;
	background-image: url(../images/bg_03.png);
  display: flex;
  flex-direction: column;
}

.courses {
  margin-top: 29.5%;
}

.course_box {
  position: relative;
  width: 100%;
  margin-bottom: 4.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.course_number {
  width: 9.96%;
  height: 0;
  padding-bottom: 6.82%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.number_01 {
  background-image: url(../images/03_01.png);
}

.number_02 {
  background-image: url(../images/03_02.png);
}

.number_03 {
  background-image: url(../images/03_03.png);
}

.number_04 {
  background-image: url(../images/03_04.png);
}

.number_05 {
  background-image: url(../images/03_05.png);
}

.course {
  width: 46.19%;
  height: 0;
  padding-bottom: 9.24%;
  margin-top: -6.8%;
  background-size: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
}

.course_01 {
  background-image: url(../images/course01.png);
}

.course_02 {
  background-image: url(../images/course02.png);
}

.course_03 {
  background-image: url(../images/course03.png);
}

.course_04 {
  background-image: url(../images/course04.png);
}

.course_05 {
  background-image: url(../images/course05.png);
}

.stretch {
  animation-name: stretch;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes stretch {
  0% {
    transform: scaleX(0.03);
    opacity: 1;
  }
  25% {
    transform: scaleX(0.03);
    opacity: 1;
  }
  95% {
    transform: scaleX(1.03);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.content4 {
  padding-bottom: 69.96%;
	background-image: url(../images/bg_04.png);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.speaker {
  height: 0;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  visibility: hidden;
}

.speaker01 {
  margin-top: 20.89%;
  width: 56.44%;
  padding-bottom: 19.58%;
	background-image: url(../images/speaker01.png);
}

.speaker02 {
  margin-top: 2.16%;
  width: 56.31%;
  padding-bottom: 19.32%;
	background-image: url(../images/speaker02.png);
}

.title {
  width: 100%;
  height: 0;
  padding-bottom: 21.19%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.title_05 {
	background-image: url(../images/title_05.jpg);
}

.content5 {
  padding-bottom: 79.75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.text_05 {
  margin-top: 7.08%;
  width: 47.5%;
  padding-bottom: 24.96%;
	background-image: url(../images/text_05.png);
}

.carousel {
  margin-top: 2.5%;
  width: 87.67%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 1;
}

.carouselbox {
  width: 20.98%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.screen {
  width: 93.78%;
  height: 0;
  padding-bottom: 184.33%;
}

.plan {
  width: 100%;
  height: 0;
  padding-bottom: 18.89%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.plan1 {
	background-image: url(../images/05_01.png);
}

.plan2 {
	background-image: url(../images/05_02.png);
}

.plan3 {
	background-image: url(../images/05_03.png);
}

.plan4 {
	background-image: url(../images/05_04.png);
}

.maru_lb_I {
  top: 10%;
  left: -19%;
  width: 37.97%;
  padding-bottom: 37.97%;
  background-color: #33BBE3;
  animation: 1.5s linear infinite normal none running floating;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%);
  }
}

.maru_lb_II {
  top: -11%;
  left: 78%;
  width: 33.56%;
  padding-bottom: 33.56%;
  background-color: #C0F1FF;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 0.5s;
}

.maru_lb_III {
  top: 26%;
  left: 87%;
  width: 22.84%;
  padding-bottom: 22.84%;
  background-color: #33BBE3;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 1s;
}

.title_06 {
	background-image: url(../images/title_06.jpg);
}

.content6 {
  padding-bottom: 77.12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.text_06 {
  margin-top: 7.08%;
  width: 54.92%;
  padding-bottom: 36.86%;
	background-image: url(../images/text_06.png);
}

.maacbox {
  margin-top: 3.64%;
  width: 53.9%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.maacbox_m {
  display: none;
}

.maaclist {
  width: 51.89%;
}

.maactext {
  width: 100%;
  height: 0;
  padding-bottom: 28.43%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.text01g {
	background-image: url(../images/06_01.png);
}

.text01 {
	background-image: url(../images/06_01-.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.text01.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.text02g {
	background-image: url(../images/06_02.png);
}

.text02 {
	background-image: url(../images/06_02-.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.text02.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.text03g {
	background-image: url(../images/06_03.png);
}

.text03 {
	background-image: url(../images/06_03-.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.text03.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.maacimg {
  width: 38.99%;
}

.maacpic {
  position: absolute;
  width: 100%;
  height: 0;
  padding-bottom: 113.71%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.pic01 {
  background-image: url(../images/06_01_img.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.pic01.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.pic02 {
  background-image: url(../images/06_02_img.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.pic02.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.pic03 {
  background-image: url(../images/06_03_img.png);
  opacity: 0;
  transition: all 0.2s linear;
}

.pic03.on {
  opacity: 1;
  transition: all 0.2s linear;
}

.maru_b_I {
  top: 19%;
  left: -24%;
  width: 37.97%;
  padding-bottom: 37.97%;
  background-color: #4587F1;
  animation: 1.5s linear infinite normal none running floating;
}

.maru_b_II {
  top: -7%;
  left: 78%;
  width: 33.56%;
  padding-bottom: 33.56%;
  background-color: #C2DAFF;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 0.5s;
}

.maru_b_III {
  top: 31%;
  left: 87%;
  width: 22.84%;
  padding-bottom: 22.84%;
  background-color: #4587F1;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 1s;
}

.content7 {
  padding-bottom: 67.75%;
  background-image: url(../images/bg_07.png);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.clientBox {
  margin-top: 24.49%;
  text-align: center;
  display: flex;
  width: 100%;
  max-width: 1400px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
  align-items: stretch;
}

.clientBox div {
  width: 25%;
  padding: 2% 4%;
  color: #000;
  display: flex;
  flex-direction: column;
  border-left: 1px solid;
}

.clientBox div:last-child {
  border-right: 1px solid;
}

.clientBox div::before {
  color: #000;
  width: 1px;
  content: " ";
  display: block;
}

.clientBox div input {
  width: 95%;
  pointer-events: none;
  border: none;
  margin: auto;
  display: inline-block;
  background: transparent;
  text-align: center;
  font-size: clamp(3.2rem, 3.5vw, 4rem);
  line-height: clamp(3.5rem, 3.7vw, 4.2rem);
  word-break: keep-all;
}

.clientBox div span {
  width: 100%;
  display: block;
  margin: auto;
}

.clientBox h3 {
  position: relative;
  font-size: 64px;
  font-size: min(max(4vw, 2.4rem), 68px);
  line-height: min(max(4.5vw, 2rem), 72px);
  font-weight: 700;
  margin-bottom: 5%;
}

.iconbox {
  position: relative;
  width: 100%;
  margin-top: 3.56%;
}

.iconup, .icondown {
  width: 154.19%;
  display: flex;
}

.iconup {
  display: flex;
  flex-direction: row;
  animation: 100s linear 0s infinite normal none running animation-toleft;
}

@keyframes animation-toleft {
  100% {
    transform: translateX(-100%);
  }
}

.icondown {
  display: flex;
  flex-direction: row-reverse;
  animation: 100s linear 0s infinite normal none running animation-toright;
}

@keyframes animation-toright {
  100% {
    transform: translateX(100%);
  }
}

.icon {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 7.71%;
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

.content8 {
  padding-bottom: 63.18%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text_08 {
  margin-top: 5.3%;
  width: 24.53%;
  padding-bottom: 5.97%;
	background-image: url(../images/text_08.png);
}

.sbbtnbox {
  margin-top: 2.54%;
  width: 27.92%;
  padding: 0.72% 0;
  border-radius: 30px;
  background-color: #EBEBEB;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftbtn, .rightbtn {
  width: 46.13%;
  height: 0;
  padding-bottom: 10.93%;
  border-radius: 20px;
  background-color: #EBEBEB;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.leftbtn.on, .rightbtn.on {
  display: flex!important;
  background-color: #00A5D6;
}

.bluesb, .yellowsb {
  width: 47.04%;
  height: 0;
  padding-bottom: 23.68%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.bluesb {
	background-image: url(../images/btn_08_01.png);
}

.bluesb.on {
	background-image: url(../images/btn_08_01-.png);
}

.yellowsb {
	background-image: url(../images/btn_08_02.png);
}

.yellowsb.on {
	background-image: url(../images/btn_08_02-.png);
}

.sbbox {
  width: 100%;
  margin-top: 1.86%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sbblue, .sbyellow {
  height: 0;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.sbblue {
  width: 70.34%;
  padding-bottom: 37.16%;
	background-image: url(../images/img_08_01.png);
}

.sbyellow {
  width: 70.34%;
  padding-bottom: 37.16%;
	background-image: url(../images/img_08_02.png);
  display: none;
}

.content9 {
  padding-bottom: 54.36%;
  background-color: #5D38BF;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.inputbox {
  margin-top: 6.27%;
  width: 68.22%;
  height: 0;
  padding-bottom: 42.12%;
  background-image: url(../images/bg_09.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
}

.inputbarbox {
  position: absolute;
  width: 47.5%;
  top: 25.9%;
  left: 12%;
}

.inputbar {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 11.4%;
}

.bar1 {
  margin-bottom: 4.5%;
}

.bar2 {
  margin-bottom: 4%;
}

.bar3 {
  margin-bottom: 4.4%;
}

.iptxt {
  position: relative;
  width: 100%;
  border: 0;
  font-size: 30px;
  font-size: min(max(2vw, 1.875rem), 30px);
  margin-top: 2.9%;
}

::placeholder {
  /* CSS 3 標準 */
  color: #d2d2d2;
}
::-webkit-input-placeholder {
  /* Chrome, Safari */
  color: #d2d2d2;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #d2d2d2;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #d2d2d2;
  opacity: 1;
}

.confirmbtn {
  position: absolute;
  top: 80%;
  left: 23.6%;
  width: 21.74%;
  height: 0;
  padding-bottom: 5.5%;
  display: flex;
}

.confirmbtn::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  padding-bottom: 22%;
  border-radius: 45px;
  background-color: #A4A4A4;
  border: 5px solid #A4A4A4;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.80);
  display: block;
  transition: all .3s ease;
}

.confirmbtn:hover::before {
  border: 5px solid #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0);
}

.confirm {
  position: relative;
  margin-left: 14%;
  width: 53.71%;
  height: 0;
  padding-bottom: 26%;
  background-image: url(../images/confirm.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.confirmbtn .enter {
  position: relative;
  margin-left: 3.61%;
  width: 13.14%;
  height: 0;
  padding-bottom: 26%;
  background-image: url(../images/enter.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all .3s linear;
}
.confirmbtn:hover .enter {
  margin-left: 7.21%;
}

.qrcode {
  position: absolute;
  top: 25.72%;
  right: 4.97%;
  width: 21.74%;
  height: 0;
  padding-bottom: 21.74%;
  background-image: url(../images/qr_ioi_2.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.contact_us {
  position: absolute;
  bottom: 10.8%;
  right: 4.97%;
  width: 21.74%;
  height: 0;
  padding-bottom: 5.65%;
  background-image: url(../images/contact_us.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  opacity: 100;
  transition: all 0.5s linear;
}
.mask.on {
  opacity: 1;
  transition: all 0.5s linear;
  pointer-events: auto;
  display: block;
}

.error {
  position: relative;
  display: block;
  width: 31.38%;
  height: 0;
  padding-bottom: 20.07%;
  background-image: url(../images/error.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  margin: 15% auto;
  display: flex;
  justify-content: center;
}

.errorbtn {
  position: absolute;
  width: 90.8%;
  height: 0;
  padding-bottom: 14.8%;
  background-image: url(../images/error_btn.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  margin: 39% auto 0 auto;
  cursor: pointer;
}

.maru_p_I {
  top: -26%;
  left: -18%;
  width: 39.92%;
  padding-bottom: 39.92%;
  background-color: #7858CE;
  animation: 1.5s linear infinite normal none running floating;
}

.maru_p_II {
  top: -19%;
  left: 80%;
  width: 25.25%;
  padding-bottom: 25.25%;
  background-color: #7858CE;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 0.5s;
}

.maru_p_III {
  top: 56%;
  left: 69%;
  width: 39.92%;
  padding-bottom: 39.92%;
  background-color: #7858CE;
  animation: 1.5s linear infinite normal none running floating;
  animation-delay: 1s;
}

#giftbtn {
  position: fixed;
  bottom: 13.14%;
  right: 2.12%;
  width: 3.39%;
  height: 0;
  padding-bottom: 3.39%;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 5;
}

.gift {
  width: 48.75%;
  height: 0;
  padding-bottom: 100%;
  background-image: url(../images/gift.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

#giftbox {
  position: fixed;
  bottom: 13.14%;
  right: 2.12%;
  width: 16.95%;
  height: 0;
  padding-bottom: 12.71%;
  background-image: url(../images/banner.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 2px 12px rgba(0, 0, 0, 0.25));
  z-index: 5;
}

.closebtn {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 10%;
  height: 0;
  padding-bottom: 10%;
  background-image: url(../images/close.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.expand_up {
	animation-name: expand-up;
	animation-duration: 0.5s;
	transform-origin: bottom right;
	animation-fill-mode: forwards;
}

@keyframes expand-up {
	0% {
		transform: scale(0);
    opacity: 0;
	}
	100% {
		transform: scale(1);
    opacity: 1;
	}
}

.expand_down {
	animation-name: expand-down;
	animation-duration: 0.5s;
	transform-origin: bottom right;
	animation-fill-mode: forwards;
}

@keyframes expand-down {
	0% {
		transform: scale(1);
    opacity: 1;
	}
	100% {
		transform: scale(0);
    opacity: 0;
	}
}

#totop {
  position: fixed;
  bottom: 4.24%;
  right: 2.12%;
  width: 3.39%;
  height: 0;
  padding-bottom: 3.39%;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  justify-content: center;
  z-index: 5;
}

.top {
  width: 35%;
  height: 0;
  padding-bottom: 100%;
  background-image: url(../images/to_top.png);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* loader */
#navloader {
  width: 100%;
  height: auto;
  position: fixed;
  z-index: 55;
}
#footerloader {
  width: 100%;
  position: relative;
  display: contents;
}

@media screen and (max-width: 1400px) {
.countdown {
  width: 10%;
  top: 7%;
  left: 59.9%;
}

.clientBox {
  width: 83.14%;
}

.inputbar {
  padding-bottom: 11.6%;
}

.bar1 {
  margin-bottom: 4.1%;
}

.bar2 {
  margin-bottom: 4.1%;
}

.bar3 {
  margin-bottom: 4%;
}

.iptxt {
  margin-top: 2.5%;
  font-size: 20px;
  font-size: min(max(2vw, 1.875rem), 20px);
}

}

@media screen and (max-width: 960px) {
  .content0 {
    padding-bottom: 182.56%;
    background-image: none;
    background-color: #5D38BF;
  }

  .text_00 {
    display: block;
    margin-top: 25%;
    width: 79.23%;
    padding-bottom: 82.82%;
    background-image: url(../images/text_00.png);
    z-index: 1;
  }

  .sign_up_btn_m {
    display: block;
    position: absolute;
    top: 45%;
    width: 49.74%;
    height: 0;
    padding-bottom: 16.92%;
    background-image: url(../images/sign_up_btn.png);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .sign_up_btn {
    display: none;
  }

  .hand {
    top: 61%;
    right: 18%;
    width: 56%;
    padding-bottom: 92%;
  }

  .circle_spread_01, .circle_spread_02, .round, .circle_purple, .circle_orange {
    display: none;
  }

  .maru_lp_I {
    display: block;
    top: -17%;
    left: -34%;
    width: 85.13%;
    padding-bottom: 85.13%;
    background-color: #7858CE;
    animation: 1.5s linear infinite normal none running floating;
  }

  .maru_lp_II {
    display: block;
    top: 84%;
    left: -22%;
    width: 51.03%;
    padding-bottom: 51.03%;
    background-color: #7858CE;
    animation: 1.5s linear infinite normal none running floating;
    animation-delay: 0.5s;  
  }
  
  .maru_lp_III {
    display: block;
    top: 68%;
    left: 56%;
    width: 93.59%;
    padding-bottom: 93.59%;
    background-color: #7858CE;
    animation: 1.5s linear infinite normal none running floating;
    animation-delay: 1s;
  }

  .content1 {
    padding-bottom: 348.46%;
    background-image: url(../images/bg_01_m.jpg);
  }

  .countdown {
    top: 8.7%;
    left: 40%;
    width: 20%;
  }

  .countdown h3 {
    color: #000;
    font-size: 64px;
    font-size: min(max(8.5vw, 4rem), 64px);
  }

  .content2 {
    padding-bottom: 115.13%;
    background-image: url(../images/bg_02_m.png);
  }

  .content2 .sign_up_btn_m {
    top: 71.5%;
  }

  .content3 {
    padding-bottom: 246.15%;
    background-image: url(../images/bg_03_m.png);
  }

  .courses {
    margin-top: 72%;
  }

  .course_box {
    margin-bottom: 10.7%;
  }

  .course_number {
    width: 26.41%;
    padding-bottom: 18.21%;
  }

  .course {
    width: 91.28%;
    padding-bottom: 24.87%;
    margin-top: -18.2%;
  }

  .course_01 {
    background-image: url(../images/course01_m.png);
  }

  .course_02 {
    background-image: url(../images/course02_m.png);
  }

  .course_03 {
    background-image: url(../images/course03_m.png);
  }

  .course_04 {
    background-image: url(../images/course04_m.png);
  }

  .course_05 {
    background-image: url(../images/course05_m.png);
  }

  .content4 {
    padding-bottom: 291.79%;
    background-image: url(../images/bg_04_m.png);
  }

  .speaker01 {
    margin-top: 43%;
    width: 82.05%;
    padding-bottom: 116.92%;
    background-image: url(../images/speaker01_m.png);
  }

  .speaker02 {
    margin-top: 8%;
    width: 82.05%;
    padding-bottom: 110%;
    background-image: url(../images/speaker02_m.png);
  }

  .title_05 {
    padding-bottom: 97.44%;
    background-image: url(../images/title_05_m.jpg);
  }

  .content5 {
    padding-bottom: 312.82%;
  }

  .text_05 {
    margin-top: 15%;
    width: 69.49%;
    padding-bottom: 91.28%;
    background-image: url(../images/text_05_m.png);
    z-index: 1;
  }

  .carousel {
    margin-top: 6.3%;
    width: 88.1%;
    flex-wrap: wrap;
  }

  .carouselbox {
    width: 48%;
    display: flex;
  }

  .mtop {
    margin-top: 7%;
  }

  .plan {
    padding-bottom: 24.24%;
    margin-top: 7%;
  }
  
  .plan1 {
    background-image: url(../images/05_01_m.png);
  }
  
  .plan2 {
    background-image: url(../images/05_02_m.png);
  }
  
  .plan3 {
    background-image: url(../images/05_03_m.png);
  }
  
  .plan4 {
    background-image: url(../images/05_04_m.png);
  }

  .maru_lb_I {
    top: 17%;
    left: -51%;
    width: 81.28%;
    padding-bottom: 81.28%;
  }

  .maru_lb_II {
    top: -7%;
    left: 59%;
    width: 78.21%;
    padding-bottom: 78.21%;
  }

  .maru_lb_III {
    top: 14%;
    left: 80%;
    width: 53.33%;
    padding-bottom: 53.33%;
  }

  .title_06 {
    padding-bottom: 101.03%;
    background-image: url(../images/title_06_m.jpg);
  }

  .content6 {
    padding-bottom: 202.05%;
  }

  .text_06 {
    margin-top: 15%;
    width: 86.67%;
    padding-bottom: 75.9%;
    background-image: url(../images/text_06_m.png);
  }

  .maacbox {
    display: none;
  }

  .maacbox_m {
    display: block;
    width: 100%;
    margin-top: 5%;
  }

  .maacslide {
    width: 100%;
  }

  .maacslide img {
    width: 75%;
    margin: 0 auto;
  }

  .maru_b_I, .maru_b_II, .maru_b_III {
    display: none;
  }

  .content7 {
    padding-bottom: 173.08%;
    background-image: url(../images/bg_07_m.png);
  }

  .clientBox {
    margin-top: 47%;
    width: 90%;
  }
  
  .clientBox div {
    width: 50%;
    padding: 8% 4%;
    border-left: none;
  }

  .clientBox div:last-child {
    border-right: none;
  }

  .clientBox div span {
    margin-top: 6%;
    font-size: min(max(3.9vw, 1.875rem), 30px);
    margin-top: 14%;
  }

  .clientBox h3 {
    margin-top: 6%;
    font-size: 64px;
    font-size: min(max(8.5vw, 4rem), 64px);
  }

  .iconbox {
    margin-top: 6.5%;
  }

  .iconup, .icondown {
    width: 401%;
    margin-bottom: 1%;
  }

  .content8 {
    height: auto;
    padding-bottom: 12.82%;
  }

  .text_08 {
    margin-top: 15%;
    width: 60.77%;
    padding-bottom: 20%;
    background-image: url(../images/text_08_m.png);
  }

  .sbbtnbox {
    margin-top: 14%;
    width: 85%;
    padding: 2% 0;
  }

  .sbbox {
    margin-top: 4%;
  }

  .sbblue {
    width: 90%;
    padding-bottom: 235%;
    background-image: url(../images/img_08_01_m.png);
  }
  
  .sbyellow {
    width: 90%;
    padding-bottom: 280%;
    background-image: url(../images/img_08_02_m.png);
    display: none;
  }

  .content9 {
    padding-bottom: 255.9%;
  }
  
  .inputbox {
    margin-top: 12%;
    width: 86.15%;
    padding-bottom: 231.79%;
    background-image: url(../images/bg_09_m.png);
  }

  .inputbarbox {
    width: 70%;
    top: 11.8%;
    left: 18%;
  }

  .inputbar {
    padding-bottom: 17.8%;
  }

  .bar1 {
    margin-bottom: 6.9%;
  }

  .bar2 {
    margin-bottom: 6.9%;
  }

  .bar3 {
    margin-bottom: 6.9%;
  }

  .iptxt {
    font-size: 30px;
    font-size: min(max(2vw, 1.875rem), 30px);
    margin-top: 5.6%;
  }

  .confirmbtn {
    top: 43.4%;
    left: 25%;
    width: 50%;
  }

  .qrcode {
    top: 62%;
    right: 24.4%;
    width: 50.89%;
    padding-bottom: 50.89%;
  }

  .contact_us {
    bottom: 5.9%;
    right: 24.8%;
    width: 50%;
    padding-bottom: 13%;
  }

  .error {
    width: 75%;
    padding-bottom: 45%;
    margin: 45% auto;
  }

  .maru_p_I {
    top: -17%;
    left: -77%;
    width: 97.95%;
    padding-bottom: 97.95%;
    background-color: #7858CE;
  }

  .maru_p_II {
    top: -13%;
    left: 77%;
    width: 60.77%;
    padding-bottom: 60.77%;
    background-color: #7858CE;
  }

  .maru_p_III {
    top: 76%;
    left: 47%;
    width: 97.95%;
    padding-bottom: 97.95%;
    background-color: #7858CE;
  }

  #giftbtn {
    bottom: 17.95%;
    right: 5.12%;
    width: 12.82%;
    padding-bottom: 12.82%;
  }

  #giftbox {
    bottom: 17.95%;
    right: 5.12%;
    width: 66.67%;
    padding-bottom: 50%;
  }

  .closebtn {
    top: 4%;
  }

  #totop {
    bottom: 5.13%;
    right: 5.13%;
    width: 12.82%;
    padding-bottom: 12.82%;
  }
}

@media screen and (max-width: 480px) {
  .countdown {
    top: 8.1%;
  }

  .countdown h3 {
    font-size: 28px;
    font-size: min(max(8.75vw, 1.75rem), 37px);
  }
  .slick-prev {
    left: 5px !important; 
  }

  .slick-next {
    right: 5px !important;
  }

  .slick-prev:before, .slick-next:before {
    font-size: 20px !important;
  }

  .slick-dots li button:before
{
    font-size: 40px !important;
    line-height: 40px !important;
}

.slick-dots {
  bottom: -15px !important;
}

.slick-dots li {
  margin: 0 0px !important;
}

.clientBox h3 {
  font-size: 38px;
}

.clientBox div {
  padding: 7% 4% 4% 4%;
}

.clientBox div span {
  font-size: 12px;
  font-size: min(max(3.9vw, 1rem), 12px);
  margin-top: 4%;
}

.iptxt {
  font-size: 17px;
  font-size: min(max(2vw, 1.875rem), 17px);
  margin-top: 4.8%;
  }

#giftbtn {
  bottom: 15.38%;
}

#giftbox {
  bottom: 15.38%;
}
}