@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: jf-openhuninn;
  src: url(jf-openhuninn-1.1.ttf);
}


/**********************************/

*{
	margin:0;
	padding:0;	
	font-family: jf-openhuninn, 'Cabin', sans-serif;
	color: #444444;
}


/*header*/
header{
	width:100%;
	background: rgba(255, 255, 255, 1);
	box-sizing: border-box;
	margin: auto; /*中心置中*/
	
	/*position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2000;*/
}

.h_box{
	margin: auto;
}

.h_box img{
	float: left;
	padding-top: .5%;
	padding-bottom: .5%;
	padding-left: 3%;
}

.h_box img:hover{
	cursor: pointer;
}


/*nav*/
nav{
	float: left;
	z-index: 10000;
	padding-left: 3%;
}

nav ul{
	list-style: none;
}

nav li{
	position:relative;
	display: inline-block;
	
	width: 15vh;
	margin-top: 15%;
	line-height:2em;
	text-align:center;
}

nav a{
	font-size:18px;
	text-decoration:none;
	color: #444444;
	transition: .5s;
}

nav a:hover{
	color: #F28322;
	cursor: pointer;
}

.shopping{
	position:relative;
	float: right;
	margin: 4% 5% 0% 0%;
}

.shopping img{
	
	padding-right: 10%;
	width: 50px;
}

.nav_box{
	display: none;
	clear: both;
	position:absolute;

	height: 100vh;
	width:95%;
	border-radius: 30px;
  	background-color: #fff;

	margin:2%;
	padding-top: 5%;
	text-align: center;
	
	z-index: 1000;
	
}

.nav_box a{
	text-decoration: none;
	color: #444444;
	line-height: 40px;
	font-size: 18px;
	transition: .5s;
}

.nav_box a:hover{
	color: #F28322;
}

.nav_box_logo img{
	float:left;
	margin: 1%;
}

.exit{
	float: right;
	margin: 5%;
}

.exit img{
	width: 45px;
}

.exit:hover{
	cursor: pointer;
}

.nav_box_shopping img{
	width: 50px;
}

.menu{
	position:absolute;
	right:12%;
	top:8%;
	width:30px;
	height:30px;
	display:block;
	font-size: 35px;
}

.menu img{
	width: 45px;
}

.menu:hover{
	cursor:pointer;
}


/*body*/
body{
	overflow-x: hidden;
}

.banner{
    padding: 5%;	
}

.banner img{
	width: 100%;
}

.more img{
	float: right;
	margin-top: -18%;
	margin-right: 8%;
	width: 20%;

	transition: .3s;
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
}

.more_phone img{
	float: right;
	margin-top: -32%;
	margin-right: 1%;
	width: 60%;

	transition: .3s;
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
}

.more img:hover, .more_phone img:hover{
	-webkit-transform: scale(1.1, 1.1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1.1, 1.1); /*IE 9*/
	transform: scale(1.1, 1.1); /*Standard Syntax*/
}

.customer_service img, .customer_service_t_l img{
	right:0;
	position:absolute;
	width: 5%;
	z-index: 1000;
	margin-top: -2.5%;
	margin-right: 5%;
	transition: .3s;
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
}

.customer_service_t_l img{
	margin-top: -6%;
}

.customer_service img:hover, .customer_service_t_l img:hover{
	-webkit-transform: scale(1.1, 1.1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1.1, 1.1); /*IE 9*/
	transform: scale(1.1, 1.1); /*Standard Syntax*/
}

article{
	float:left;
	width:100%;
	box-sizing: border-box;
}

article .picbox, article .desbox{
	float: left;
	/*特殊容器內的設定要先做relative，否則會以瀏覽器為框架去移動*/
	position: relative;
	box-sizing: border-box;
}

article .desbox{
	/*圖片會撐滿容器，文字會卡在邊框 => 想要讓文字聚集一點*/
	padding: 60px;
	line-height: 2em;
	/*justify : 讓文字較寬、文字左右切齊*/
	text-align: justify;
}

.picbox img{
	width: 100%;
}

article span{
	color:#025373;
    font-weight: 800;
}

.teacher{
	padding-bottom: 10%;
}

.teacher_pc{
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 3%;
	margin-bottom:5%;
}

.teacher_pc span{
	font-size: 60px;
	color:#025373;
}

.teacher_pc p{
	position: absolute;
	font-size: 24px;
	z-index: 2;
}

.teacher_pc .bg_pic img{
	margin-top: -5%;
	margin-left: -10%;
}

.teacher_phone .teacher_title{
	z-index: 2;
	text-align: center;
	margin-top: 10%;
	margin-bottom: 10%;
}

.teacher_phone .teacher_title span{
	font-size: 54px;
	color:#025373;
}

.teacher_phone .teacher_title p{
	font-size: 24px;
	margin-top: -5%;
}

.teacher img{/*bg*/
	position: absolute;
	z-index: 1;
	padding-top: 7%;
}

.box{
	box-sizing: border-box;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	z-index: 10;
	overflow: hidden;	
	box-shadow: 2px 5px 10px rgba(24, 25, 26, 0.8);
	border-radius: 15px;
	margin: 1%;
	position: relative;
	transition: .3s;
}

.imgbox{
	width: 100%;
}

.box .imgbox img{	
	/*
	width: 160%;
	margin-left: -20%;
	margin-top:-15%;
	*/
	
	
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
	
	transition: transform .5s;
	-webkit-transition: transform .5s;
	
	transition-timing-function: ease-in-out;
	-webkit-transition-timeing-function: ease-in-out; /*Safari*/
}

.teacher_pc .box .imgbox img{	
	/*
	width: 150%;
	height: auto;
	margin-left: -20%;
	top: 5%;
	*/
}

.box:hover .imgbox img{
	-webkit-transform: scale(1.1, 1.1); /*Safari*/
	-ms-transform: scale(1.1, 1.1); /*IE 9*/
	transform: scale(1.1, 1.1); /*Standard Syntax*/
}

.head{
	padding: 400px 20px 20px 0px;
}

.teacher_pc .head{
	padding: 350px 40px 40px 40px;
}

.head h3{
	font-size: 22px;
}

.teacher_pc .head h3{
	font-size: 24px;
}

.head span{
	clear: both;
	float: right;
	font-size: 14px;
	color: #36D8CF;
	line-height: 40px;
	font-weight: 200;
	padding-left: 40px;
}

.head p{
	float: left;
	padding: 0;
	font-size: 18px;
}

.teacher_pc .head p{
	font-size: 18px;
}

.teacher_phone .teacher_title{
	padding-top: 10%;
	padding-bottom: 10%;
}

.teacher_phone .teacher_swiper{
	margin: 12%;
}

.teacher_phone .box .imgbox img{	
	/*
	width: 185%;
	height: auto;
	margin-left: -40%;
	*/
	
	height: 80%;
	width: 200%;
	margin-top: -15%;
	margin-left: -10%;
}

.teacher_phone .bg_pic img{
	float: left;
	position: absolute;
	margin-top: -85%;
	margin-left: -30%;
	width: 120%;
	height: auto;
	z-index: -1;
}

/*note*/
.note{
	width: 80%;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 5%;
}

.phone_subject{
	/*
	margin-top: 8%;
	margin-bottom: 8%;
	*/
	
	clear: both;
	padding-right: 10%;
}

.note h2{
	color: #025373;
	font-size: 40px;
	padding-top: 5%;
	padding-left: 5%;
}

.note_phone h2{
	color: #025373;
	font-size: 40px;
	text-align: center;
}

.note h3{
	font-size: 20px;
	padding-top: 5%;
	padding-left: 5%;
}

.note_phone h3{
	font-size: 20px;
	text-align: center;
	margin-top: 5%;
}

.subject_list{
	margin-top: -10%;
	margin-left: -15%;
	padding-left: 40%;
}

.subject{
	/*box-sizing: border-box;*/
	display: inline;
	text-align: center;
	line-height: 3em;
	font-size: 18px;
	transition: .3s;	

	padding-top: 20px;
	padding-left: 10%;

	margin-right: 0%;
}

.subject:hover{
	color: #F28322;
	cursor: pointer;
}

.note_phone .subject_list{
	margin-top: 12%;
	margin-left: -55%;
	text-align: center;
}

.note img{
	height: auto;
	padding-top: 5%;
	padding-bottom: 5%;
}

.note img:hover{
	cursor: default;
}

.note p{
	display: block;
	margin-top: 2%;
	margin-left: 15%;
	margin-right: 15%;
	padding-bottom: 2%;
	font-size: 24px;
	line-height: 1.5em;
}

.note span{
	display: block;
	padding-top: 3%;
	font-size: 16px;	
}

.note_phone p{
	text-align: center;
	font-size: 20px;
}

.note_phone span{
	text-align: center;
	font-size: 14px;
	margin-top: 3%;
}

/*add to cart*/
.buy{
	padding-top: 2%;
	margin-left: 20%;
}

.buy img{
	transition: .3s;
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
}

.buy img:hover{
	cursor: pointer;
	-webkit-transform: scale(1.1, 1.1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1.1, 1.1); /*IE 9*/
	transform: scale(1.1, 1.1); /*Standard Syntax*/
}


/*swiper*/
:root{
    --swiper-pagination-color: #36D8CF;
	--swiper-navigation-color: rgba(255,255,255,0);
}

.swiper {
	width: 80%;
	height: 100%;
}

.swiper_banner{
	clear: both;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.swiper-slide .swiper-slide_ver{
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.phone_subject .swiper-slide img{
	height: 200px;
	padding-right: 12px;
	object-fit: cover;
}

.swiper_banner img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-prev{
	padding-left: 8%;
}

.pc_swiper_comment .swiper-button-prev img, .pc_swiper_comment .swiper-button-next img{
	width: 50px;
	transition: .3s;
}

.swiper-button-prev img, .swiper-button-next img{
	width: 50px;
	transition: .3s;
}

.swiper-button-prev img:hover, .swiper-button-next img:hover{
	cursor: pointer;
	width: 60px;
}

.pc_swiper_comment .swiper-button-prev img:hover, .pc_swiper_comment .swiper-button-next img:hover{
	cursor: pointer;
	width: 60px;
}

.phone_swiper_comment .swiper-button-prev img, .phone_swiper_comment .swiper-button-next img{
	width: 30px;
	transition: .3s;
}

.phone_swiper_comment .swiper-button-prev img:hover, .phone_swiper_comment .swiper-button-next img:hover{
	cursor: pointer;
	width: 40px;
}

.teacher_phone .swiper-button-next, .teacher_phone .swiper-button-prev{
	position: absolute;
	z-index: 10;
}

.teacher_phone .swiper-button-next img{
	width: 60px;
	right: 0;
}

.teacher_phone .swiper-button-prev img{
	width: 60px;
	z-index: 20;
}

.teacher_pc .swiper-slide{
	padding-right: 5%;

}

.teacher_pc .swiper-button-next img{
	position: absolute;
	right: -10px;
	width: 250%;

	transition: .3s;
	-webkit-transform: scale(1, 1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1, 1); /*IE 9*/
	transform: scale(1, 1); /*Standard Syntax*/
}

.teacher_pc .swiper-button-next img:hover{
	cursor: pointer;
	-webkit-transform: scale(1.1, 1.1); /*Safari*/ /*x, y*/
	-ms-transform: scale(1.1, 1.1); /*IE 9*/
	transform: scale(1.1, 1.1); /*Standard Syntax*/
}


/*學生回饋*/
.student_title{
	text-align: center;
}

.student_title p{
	font-size: 20px;
	line-height: 2em;
}

.student_title span{
	font-size: 54px;
	color:#025373;
}

.student_title_pc p{
	font-size: 20px;
	line-height: 2em;
	padding-left: 1%;
	text-align: center;
}

.student_title_pc span{
	font-size: 60px;
	color:#025373;
	padding-left: 25%;
	text-align: center;
}

.pc_swiper_comment{
	margin-right: 8%;
	margin-left: 8%;
}

.pc_swiper_comment .student{
	margin: 10%;
}

.phone_swiper_comment{
	margin: 1%;
}

.student span{
	position: absolute;
	display: block;

	font-size: 12px;
	padding-top: 10%;
	padding-right:12%;
	padding-left: 48%;
	padding-bottom: 20%;

	line-height:1.5em;
	text-align: left;
}

.student img{
	float: left;
	margin: 8% 14% 14% 16%;
	width: 30%;
	height: 30%;
	border-radius: 50%;
}

.student p{
	float: left;
	position: absolute;
	font-size: 16px;
	line-height: 1.5em;
	
	padding-left: 21%;
	padding-top: 40%;
	
}

.student_pc{
	width: 100%;
	padding-bottom: 8%;
	box-sizing: border-box;
}

.student_pc p{
	float: left;
	position: absolute;
	padding-left: 16%;
	padding-bottom: 10%;
	margin-top: 15%;
	font-size: 20px;
	line-height: 2em;
}

.student_pc span{
	position: absolute;
	display: block;

	font-size: 16px;
	padding-top: 20%;
	padding-right:12%;
	padding-left: 45%;
	padding-bottom: 20%;

	line-height:2em;
	text-align: left;
}

.student_pc img{
	float: left;
	margin: 12%;
	margin-top: 20%;
	width: 130px;
	height: 130px;
	border-radius: 50%;
}


/*垂直swiper*/
.mySwiper_vs .swiper-button-next, .mySwiper_vt .swiper-button-next{
	margin-top: 27%;
	left:50%;
}

.mySwiper_vs .swiper-button-prev, .mySwiper_vt .swiper-button-prev{
	margin-top: -33%;
	left:44%;
}

.mySwiper_vs, .mySwiper_vt{
	height: 60vh;
}


.content{
	width:100%;
	box-sizing:border-box;
	text-align:center;
	padding-bottom: 5%;
	padding-top: 35%;
}

.content img{
	width: 100%;
	padding: 5%;
}

/*lesson*/
.lesson_title{
	margin-top: 8%;
	margin-bottom: 5%;
	background-color: #F28322;
	padding:3%;
	opacity:.8;
}

.lesson_title h5{
	font-size: 40px;
	color: #fff;
}

.lesson_title p{
	font-size: 28px;
	color: #fff;
}

.lesson_box{
	padding: 15%;
}

.lesson_box:hover{
	background-color: #36D8CF;
	opacity: .8;
	border-radius: 20px;
	cursor: pointer;
}

.content video{
	width: 100%;
}

.lesson p{
	font-size: 28px;
	color: #025373;
	font-weight: 800;
	margin-top: 10%;
}

.lesson span{
	font-size: 16px;
	font-weight: 100;
}


/*teacher intro*/
.teacherintro_title{
	margin-top: 8%;
	background-color: #44C6C6;
	padding:3%;
	opacity:.8;
}

.teacherintro_title h5{
	font-size: 40px;
	color: #fff;
}

.teacherintro_title p{
	font-size: 28px;
	color: #fff;
}

.teacherintro_box{
	padding: 20%;
	transition: 1s;
}

.teacherintro_box img{
	width: 100%;
	border-radius: 50%;
}

.teacherintro p{
	font-size: 28px;
	font-weight: 800;
	color: #025373;
}

.teacherintro span{
	font-size: 16px;
	font-weight:100;
}

.button-48 {
  appearance: none;
  background-color: #FFFFFF;
  border-width: 0;
  box-sizing: border-box;
  color: #444;
  cursor: pointer;
  display: inline-block;
  /*font-family: Clarkson,Helvetica,sans-serif;*/
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1em;
  margin: 0;
  opacity: 1;
  outline: 0;
  padding: 1.5em 2.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: geometricprecision;
  text-transform: uppercase;
  transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  white-space: nowrap;
}

.button-48 a{
	text-decoration: none;
}

.button-48:before {
  animation: opacityFallbackOut .5s step-end forwards;
  backface-visibility: hidden;
  background-color: #EBEBEB;
  clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
  width: 100%;
}

.button-48:hover:before {
  animation: opacityFallbackIn 0s step-start forwards;
  clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.button-48:after {
  background-color: #FFFFFF;
}

.button-48 span {
  z-index: 1;
  position: relative;
}

/*display or not*/
.pc{
	display: none;
}

.desktop_home_swiper{
	display: none;
}

.banner_pc{
	display:none;
}

.teacher_pc{
	display:none;
}


/*footer*/
footer{
	clear: both; /*避免中間有奇怪的格式沒有清除*/
	padding: 30px 0px 0px 20px;
	text-align: center;
	background-color: #165478;
	color: #fff;
	font-size: 20px;
}

footer p{
	color: #fff;
}

footer a{
	padding: 0;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	font-family: jf-openhuninn, 'Cabin', sans-serif;
	line-height: 2em;
	transition: .3s;
}

footer a:hover{
	color: #F28322;
}

footer img{
	width: 180px;
}

.social a{
	display: inline;
}

.social img{
	width: 20%;
}

.social_phone img{
	width: 15%;
}

.social img:hover, .social_phone img:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transition: transform 0.35s;
	-webkit-transition: transform 0.35s;
	transition-timing-function: ease-in-out;/*開始為慢速 結束為慢速*/
	-webkit-transition-timing-function: ease-in-out;/* Safari */
}


/*for tablets*/
@media only screen and (min-width: 768px) {
	
	
}

/*for desktops*/
@media only screen and (min-width: 1200px) {
	.pc{
		display: block;
	}

	.desktop_home_swiper{
		display:block;
	}

	.menu{
		display: none;
	}

	.nav_box{
		display: none;
	}

	.banner_pc{
		display:block;
	}

	.teacher_pc{
		display:block;
	}

	.phone{
		display: none;
	}

    .phone_home_swiper{
        display: none;
    }

	.banner_phone{
		display: none;
	}

	.teacher_phone{
		display: none;
	}	

	.banner{
		padding: 5%;
	}

	.student_title span{
		font-size: 60px;
	}
	
	.student_title p{
		font-size: 20px;
		margin-right: 8%;
	}

	.student span{
		font-size: 16px;
		padding-top: 10%;
		padding-right: 5%;
		padding-left: 40%;
	}

	.buy{
		float:right;
		padding-top: 2%;
		padding-right: 8%;
		margin-left:0;
	}
	
	.social img{
		margin-top: 150px;
	}

	.content{
		padding-top: 2%;
	}

	.lesson_title h5, .teacherintro_title h5{
		font-size: 54px;
	}
	
	.lesson_title p, .teacherintro_title p{
		font-size: 36px;
	}

	.subject{
		display: inline-block;
		line-height: 1.5em;
		font-size: 18px;
		margin-right: 10%;
	}

}