@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Noto+Sans+TC&display=swap');
html{font-size: 16px;}
/*html *{font-size: 1rem;}*/
body{
	font-size: 1rem;
	margin: 0;
	padding: 0;
	font-family: 'arial', 'Noto Sans TC', 'Noto Sans SC', sans-serif;
	color: #333;
}
.preload{
	position: fixed;
	background: #FFF center center no-repeat;
	/*background-image: url(../images/loading.svg), url(../images/logo-icon.png);*/
	background-image: url(../images/loading.svg);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
.process{
	position: fixed;
	background: rgba(256, 256, 256, 0.8) center center no-repeat;
	/*background-image: url(../images/loading.svg), url(../images/logo-icon.png);*/
	background-image: url(../images/loading.svg);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
}
/*
*{transition: all .50s linear;}
*:hover{transition: all .50s linear;}
*/
a{
	text-decoration: none !important;
	outline: none;
	color: #555555;
}
a:hover{ color: #222222; }

img{max-width: 100%;}
input, select, textarea{outline: none;}

/*=[hover effect]==============================*/
/*
*:hover, *:focus , * {
	transition: all .20s linear
}
*/
#pageWrapper{
	position:relative;
	margin: 0 auto;
	box-sizing: border-box;
	background-image: linear-gradient(to bottom, #FFF, #DDD);
}
#pageWrapper.fixed{
	height: 100vh;
	overflow: hidden;
}
.wrapper{
	position: relative;
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}
.wrapper2{
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

/*=[header]=========*/
header{
	background: #FFF;
}
header .wrapper{
	position: static;
	overflow: visible;
}
header .topbar{
	position: relative;
	padding: 30px 0;
}
header .topbar .logo{
	display: inline-block;
	width: 160px;
}
header .topbar .nav_icon{
	position: absolute;
	top: 15px;
	right: 0;
	z-index: 10;
	color: #333;
	display:none;
}
header .topbar .top-nav{
	text-align: right;
}
header .topbar .top-nav ul{
	display: inline-block;
	padding-left: 10px;
	margin: 10px 0;
}
header .topbar .top-nav li{
	display: inline-block;
	margin-right: 10px;
	line-height: 1.1rem;
}
header .topbar .top-nav a{
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.1rem;
	padding-right: 12px;
	color: #000;
}
header .topbar .top-nav li:last-child a{
	padding-right: 0;
}
header .topbar .top-nav a img{
	width: 22px;
}
header .topbar .top-nav form{
	display: inline-block;
}
header .topbar .top-nav .search-text{
	width: 300px;
	padding: 10px;
	border-radius: 15px;
	margin: 0;
	background: #E5E5E5;
}
header .topbar .lang.current{
	color: #de6a12;
}
header .mainnav{
	border-top: 1px #DDD solid;
}
header .mainnav ul{
	text-align: center;
	margin: 0;
	padding: 0;
}
header .mainnav ul li{
	display: inline-block;
	padding: 0 10px;
}
header .mainnav ul li a{
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.2rem;
	padding: 20px 10px;
	box-sizing: border-box;
	color: #999;
}
header .mainnav ul li a:hover{
	color: #555;
}
header .mainnav ul li a.current{
	color: #555;
	border-top: 2px #333 solid;
}

/*=[section]=========*/
.section-title{
	position: relative;
	width: 96%;
	margin: 40px auto;
	padding: 20px 0;
	border-bottom: 1px #000 solid;
	text-align: center;
}
.section-title.no-line{
	border-bottom: none;
}
.section-title .txt{
	color: #333333;
	font-size: 2rem;
	font-weight: 500;
	line-height: 2rem;
	letter-spacing: 10px;
}

/*=[.owl-carousel]=========*/
.owl-carousel .owl-dots{
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 0;
  z-index: 20;
  text-align: center;
  box-sizing: border-box;
}
.owl-carousel.no-dots .owl-dots{
	display: none;
}
.owl-carousel .owl-dot{
  display: inline-block;
}
.owl-carousel .owl-dot span{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  background: #555;
}
.owl-carousel .owl-dot.active span{
  background: #FFF;
}
.owl-carousel .owl-nav {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 51px;
	margin: auto;
	z-index: 20;
}
.owl-carousel .owl-nav .owl-prev{
	position: absolute;
	top: 0;
	left: -30px;
	width: 23px;
	height: 51px;
	background: url(../images/btn_owl_prev.png) center center no-repeat;
}
.owl-carousel .owl-nav .owl-next{
	position: absolute;
	top: 0;
	right: -30px;
	width: 23px;
	height: 51px;
	background: url(../images/btn_owl_next.png) center center no-repeat;
}

.banner-img{
	width: 100%;
}


/*=page index=======*/
.index .section1 .item{
	position: relative;
	padding: 20px 0;
	border-bottom: 1px #333 solid;
}
.index .section1 .img-zoom{
  width: 92%;
}
.index .section1 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	margin: 10px 0;
}
.index .section1 .item-txt{
	max-width: 640px;
}
.index .section1 a.btn-more{
	position: absolute;
	right: 0;
	bottom: 10px;
	z-index: 1;
	color: #4D4D4D;
}

.index .section2{
	padding: 60px 0;
}
.index .section2 .wrapper{
	overflow: visible;
}
.index .section2 .item{
	overflow: hidden;
	border: 1px #333 solid;
	border-radius: 20px;
}
.index .section2 .item-pic{
	position: relative;
}

.index .section2 .info-wrap{
	padding: 20px;
}
.index .section2 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.4rem;
	margin: 0 0 10px;
}
.index .section2 .item-subtitle{
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0 0 10px;
}
.index .section2 .item-txt{
	font-size: 1rem;
	margin: 30px 0 0;
}
.index .section2 .time{
	float: right;
}

.index .section3{
	padding: 0 0 60px;
}
.index .section3 .item{
	background: rgba(256, 256, 256, 0.6);
	padding: 60px;
}
.index .section3 .item-pic{
	border: 10px #FFF solid;
	box-shadow: 15px 15px 1px #CCC;
}
.index .section3 .item-title{
	font-size: 2rem;
	margin: 0 0 20px;
}
.index .section3 .item-info{
	padding: 40px;
}
.index .section3 .item-txt{
	font-size: 1.2rem;
}
.index .section3 .owl-carousel3{
	padding-bottom: 40px;
}
.index .section3 .owl-carousel3 .owl-dots{
	bottom: 0;
}

/*=page about=======*/
.about .section1 .wrapper{
	max-width: 1200px;
}
.about .section1 .item{
	margin-bottom: 40px;
}
.about .section1 .item-title{
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 4px;
}
.about .section1 .item-pic{
	max-width: 200px;
}
.about .section1 .item-txt{
	font-size: 1.2rem;
	line-height: 2rem;
}
.about .section2{
	padding: 60px 0 60px;
}
.about .section2 .owl-carousel3{
	padding-bottom: 40px;
}
.about .section2 .owl-carousel3 .owl-dots{
	bottom: 0;
}

/*=page news=======*/
.news .section1{
	background: #EDEDED;
}
.news .section1 .content-txt{
	color: #333;
	font-size: 1.6rem;
	line-height: 2.8rem;
	padding: 60px 0;
}
.news .section1 .item{
	position: relative;
	padding: 20px 0;
	border-bottom: 1px #333 solid;
}
.news .section1 .img-zoom{
  width: 92%;
}
.news .section1 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	margin: 10px 0 10px;
}
.news .section1 .item-txt{
	max-width: 640px;
}
.news .section1 a.btn-more{
	position: absolute;
	right: 0;
	bottom: 10px;
	z-index: 1;
	color: #4D4D4D;
}

/*=page shop=======*/
.shop .section2{

}
.shop .section2 .wrapper{
	overflow: visible;
}
.shop .section2 .item{
	padding: 10px;
}
.shop .section2 .item-wrap{
	overflow: hidden;
	border: 1px #333 solid;
	border-radius: 20px;
}
.shop .section2 .item-pic{
	position: relative;
}
.shop .section2 .info-wrap{
	padding: 20px;
}
.shop .section2 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.4rem;
	margin: 0 0 10px;
}
.shop .section2 .item-subtitle{
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0 0 10px;
}
.shop .section2 .item-txt{
	font-size: 1rem;
	margin: 30px 0 0;
}
.shop .section2 .item-price{
	font-size: 1.3rem;
	font-weight: 600;
	color: #FF0000;
}
.shop .section2 .btn-shop{
	display: inline-block;
	margin-top: 40px;
}
.shop .section3{
	padding: 60px 0;
}
.shop .section3 .owl-carousel3{
	padding-bottom: 40px;
}
.shop .section3 .owl-carousel3 .owl-dots{
	bottom: 0;
}

/*=page course=======*/
.course .section2{

}
.course .section2 .wrapper{
	overflow: visible;
	padding-bottom: 60px;
}
.course .section2 .item{
	padding: 10px;
}
.course .section2 .item-wrap{
	overflow: hidden;
}
.course .section2 .item-pic{
	position: relative;
}
.course .section2 .info-wrap{
	padding: 20px;
	text-align: center;
	background: #FFF;
}
.course .section2 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.4rem;
	margin: 0 0 10px;
}
.course .section2 .item-subtitle{
	font-size: 1.2rem;
	font-weight: normal;
	margin: 0;
	text-decoration: line-through;
}
.course .section2 .item-subtitle2{
	font-size: 1.3rem;
	font-weight: normal;
	margin: 0 0 10px;
	color: #C00;
}

/*=page steps=======*/
.steps .section1{
	padding: 0 0 60px;
}
.steps .item-title{
	font-size: 2rem;
	text-align: center;
	color: #333333;
}
.steps .step{
	padding: 20px 40px;
	min-height: 200px;
}
.steps .step h4{
	font-weight: 400;
	color: #333333;
	margin: 10px 0;
}

/*=page teacher=======*/
.teacher .section1{
	padding: 0 0 60px;
	background: #DEDEDE;
}
.teacher .section1 .category{
	padding: 0;
	margin: 0;
	list-style: none;
}
.teacher .section1 .category li{
	font-size: 1.2rem;
	margin-bottom: 20px;
}
.teacher .section1 .category li a.current{
	color: #369;
}
.teacher .section1 .item{
	position: relative;
	padding: 0 20px 20px;
}
.teacher .section1 .item-heading{
	margin: 0;
	padding: 0 20px;
}
.teacher .section1 .item-title2{
	position: absolute;
	top: 30px;
	left: 20px;
	background-image: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0));
	color: #333;
	padding: 10px 30px 10px 10px;
	z-index: 1;
}
.teacher .section1 .main-pic{
	width: 95%;
	max-width: 95%;
}
.teacher .section2{
	padding: 60px 0;
	background: #DEDEDE;
}
.teacher .section2 .wrapper{
	overflow: visible;
}
.teacher .section2 .item{
	padding: 10px;
}
.teacher .section2 .item-wrap{
	overflow: hidden;
	border: 1px #333 solid;
	border-radius: 20px;
}
.teacher .section2 .item-pic{
	position: relative;
}
.teacher .section2 .info-wrap{
	padding: 20px;
}
.teacher .section2 .item-title{
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.4rem;
	margin: 0 0 10px;
}
.teacher .section2 .item-subtitle{
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0 0 10px;
}
.teacher .section2 .item-txt{
	font-size: 1rem;
	margin: 30px 0 0;
}
.teacher .section2 .time{
	float: right;
}

.teacher .item-subtitle{
	margin-top: 40px;
	font-size: 1.6rem;
}
.teacher .item-title{
	margin: 20px 0 20px 60px;
	font-size: 2.2rem;
}
.teacher .item-title span{
	display: inline-block;
	margin-left: 10px;
	font-size: 1.6rem;
}
.teacher .item-des{
	font-size: 1.2rem;
	line-height: 2.2rem;
}

/*=[footer]=========*/
footer{

}
footer .footer-banner{
	width: 100%;
}
footer .wrapper{
	padding: 20px 80px;
}
footer .btns{
	text-align: right;
}
#scrollup{
	position: fixed;
	right: 20px;
  bottom: 20px;
	z-index:20;
	display: none;
	width: 48px;
	height: 48px;
	background: url(../images/btn-totop.jpg) center center no-repeat;
	cursor:pointer;
}


/*=[common]=========*/
label{
	font-size: 16px;
	color: #000;
}
input, textarea, select{
	color: #666;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	border: none;
	border-radius: 0;
	resize: none;
}
input.bg, select.bg, textarea.bg{
	background-color: #EFEFEF;
}
input.border, select.border, textarea.border{
	border: 1px #DCDDDD solid;
}

input[type=radio],input[type=checkbox]{
	width: initial;
	margin-bottom: 0;
}
input[type=submit],input[type=button]{
	color: #FFF;
	border: none;
	background: #2E454C;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px;
}
input[type=submit]:hover, input[type=button]:hover{
	background: #425D72;
}
input[type=reset]{
	color: #999;
	border: 1px #CCC solid;
	background: #FFF;
	cursor: pointer;
}
input[type=reset]:hover{
	background: #CCC;
}
select{
	appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none;
	background: url(../images/select-arrow.png) right center no-repeat;
	background-size: auto 100%; 
}

.mobile{display: none !important;}

.cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0, 0.7);
	z-index: 10;
	display: none;
}
.cover2{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0, 0.7);
	z-index: 10;
}
.alert-box{
	position: fixed;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	z-index: 20;
	padding: 0 15px;
	border-radius: 20px;
	background: #FFF;
}
.alert-box .btn-close{
	position: absolute;
	top: 10px;
	right: 20px;
	z-index: 1;
	font-size: 20px;
	color: #777;
	cursor: pointer;
}

.line{border-top:1px #DDD solid;}

.tableBorder{
	border-collapse: collapse;
    width:100%;
    border-collapse: collapse;
}
.tableBorder th{
	padding: 20px 10px;
	border-bottom: 1px #CCC solid;
	text-align:left;
}
.tableBorder td{
	padding: 20px 10px;
	border-bottom: 1px #CCC solid;
	text-align:left;
}

.btn{
	display: inline-block;
	padding: 18px;
	min-width: 200px;
	box-sizing: border-box;
	text-align: center;
	line-height: 14px;
	color: #FFF;
	background: #2E454C;
	border: none;
	transition: background-color .5s;
}
.btn:hover{
	color: #FFF;
	background: #425D72;
}
.btn-block{
	width: 100%;
	display: block;
}
.btn-half{
	width: 48%;
	min-width: 0;
}
.btn-pay{
	color: #FFF;
	background: #60B760;
}
.btn-fb-login{
	color: #FFF;
	background: #3b5998;
}
.pages{
	margin: 60px 0;
	text-align: center;
}
.pages a{
	display: inline-block;
	color: #B5B5B6;
	margin: 0 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.2rem;
}
.pages a.current, .pages a:hover{
	color: #000; 
}

.tabs{
	margin: 30px 0 10px;
	font-size: 1.2rem;
}
.tabs .tab{
	display: inline-block;
	margin: 0 10px;
}
.tabs .tab.current{
	color: #369;
}
.tabs .tab.border{
	display: inline-block;
	margin: 0 10px;
	padding: 3px 10px;
	border: 1px #666 solid;
}
.tabs .tab.border.current{
	color: #FFF;
	background: #666;
}
.tab-content{
	border: 1px #333 solid;
	padding: 30px;
	line-height: 2rem;
	display: none;
}
.tab-content.current{
  display: block;
}

.breadcrumb{

}

.btn-play{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 80px;
	height: 80px;
	z-index: 1;
	background: url(../images/icon-play.png) center center;
	background-size: cover;
	transition: all 0.3s ease;
}
.btn-play:hover{
	width: 90px;
	height: 90px;
}

.img-zoom{
  width: 100%;
  overflow: hidden;
}
.img-zoom img{
  transition: all 0.3s ease;
}
.img-zoom:hover img{
  transform: scale(1.1);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}



@media screen and (max-width: 1000px) {
	.pad{ display: none !important;}
	.mobile-block{display: block !important;}
	.wrapper{padding: 0 20px;}
}

@media screen and (max-width: 767px) {
	.desktop{ display: none !important;}
	.mobile{ display: block !important;}

	header .topbar{
		padding: 10px 0;
	}
	header .top-nav{
		display: none;
	}
	header .mainnav{
		position: fixed;
    top: 0;
    left: -300px;
    z-index: 1000;
    width: 300px;
    height: 100vh;
    background: #333;
    border: none;
    padding: 10px;
    box-sizing: border-box;
    transition: left 1s;
    overflow: hidden;
    text-align: left;
	}
	header .mainnav.open{
      left: 0;
  }
	header .mainnav ul{
		margin-top: 20px;
		text-align: left;
	}
	header .mainnav ul li{
		display: block;
		padding: 0 10px;
		border-bottom: 1px #666 solid;
	}
	header .mainnav ul li a{
		display: block;
		color: #FFF;
	}
	header .mainnav ul li a:hover{
		color: #999;
	}
	header .mainnav ul li a.current{
		color: #999;
		border-top: none;
	}
	header .mainnav ul li.lang{
		text-align: center;
	}
	header .mainnav ul li.lang a{
		display: inline-block;
	}
	header .mainnav ul li.lang a.current{
		color: #de6a12;
	}
	header .mainnav .btn-closenav{
		float: right;
		color: #FFF;
	}
	header .topbar .nav_icon{display:block;}

	footer .wrapper{
		padding: 20px;
	}
  footer .btns{
    margin: 20px 0;
		text-align: center;
	}

	.alert-box{
		width: 90%;
	}

	.owl-carousel .owl-dot span{
	  width: 8px;
	  height: 8px;
	}
	.owl-carousel .owl-nav .owl-prev{
		left: 10px;
	}
	.owl-carousel .owl-nav .owl-next{
		right: 10px;
	}

	.section-title{
		margin: 0 auto;
	}
	.section-title .txt{
		font-size: 1.4rem;
		line-height: 1.4rem;
	}

	.index .section1 .item{
		padding: 20px 0 40px;
	}
	.index .section3 .item-pic{
		border: 10px #FFF solid;
		box-shadow: 5px 5px 1px #CCC;
	}
	.index .section3 .item-title{
		font-size: 1.4rem;
		margin: 0 0 20px;
	}
	.index .section3 .item-info{
		padding: 10px;
	}
	.index .section3{
		padding: 0 0 20px;
	}
	.index .section3 .item{
		background: rgba(256, 256, 256, 0.6);
		padding: 20px;
	}
	.about .section1 .item-txt{
		font-size: 1rem;
		line-height: 1.6rem;
	}
	.about .section2{
		padding: 20px 0;
	}

	.news .section1 .item{
		padding: 20px 0 40px;
	}
	.news .section1 .content-txt{
		font-size: 1.1rem;
		line-height: 1.8rem;
		padding: 40px 0;
	}
	.shop .section3{
		padding: 20px 0;
	}
	.shop .section2 .btn-shop{
		width: 80%;
		display: block;
		margin: 20px auto 0;
	}

	.steps .step{
		padding: 20px;
	}

	.teacher .category li{
		display: inline-block;
		font-size: 1.2rem;
		margin: 10px;
	}
	.teacher .scroll-wrap{
		overflow-x: auto;
		white-space: nowrap;
	}
	.teacher .scroll-wrap::-webkit-scrollbar {
		color: #333;
		height: 4px;
	}
	.teacher .item-heading{
		text-align: center;
	}

	.tabs .tab.border{
		margin: 0 0 5px;
		padding: 3px 5px;
	}
}