body{
	padding: 0px;
	margin: 0px;
	color: #333b3e;
	line-height: 1.5em;
	font-family: 'Arial Rounded MT Bold', 'OpenSans',"Microsoft Yahei","Microsoft Jhenghei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;
	background-color: #274d6a;
}
*{
	box-sizing: border-box;
}
ul, li, p{
	padding: 0px;
	margin: 0px;
}
li{
	list-style: none;
}
@font-face {
  font-family: 'Arial Rounded MT Bold';
  src: local('Arial Rounded MT Bold'), url('../font/Arial_Rounded_MT.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: local('OpenSans'),
  url('../font/OpenSans-Regular.WOFF') format('woff'),
  url('../font/OpenSans-Regular.ttf') format('truetype');
}


.btn_default{
	background-color: #e60044;
	display: inline-block;
	border-radius: 20px;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
	padding: 5px 20px;
	text-decoration: none;
}
.btn_default:hover, .btn_default:active{
	background-color: #d70c19;
}
.btn_default.disable{
	background-color: #ccc;
}
.btn_default.disable:hover, .btn_default.disable:active{
	background-color: #ccc;
}


/* all layout */
header.top{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	width: 100%;
	/* background-color: rgba(0, 0, 0, .4); */
	text-align: right;
	padding: 15px;
}
.logo{
	position: absolute;
	left: 50%;
	width: 140px;
	height: 45px;
	margin-left: -70px;
	top: 13%;
	text-align: center;
	z-index: 120; /* 20161230 add */
}
.logo img{
	width: 140px;
}
.btn_audio{
	display: inline-block;
	margin-left: 5px;
}
.btn_audio a{
	display: inline-block;
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center center;
}
a.btn_audio_play{
	background-image: url('../images/ico_music_off.png');
	background-size: 26px 26px;
	position: relative;
}
a.btn_audio_off{
	display: none;
	background-image: url('../images/ico_music_play.png');
	background-size: 26px 26px;
}
.hand{
	background-image: url('../images/element/hand.png');
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
	position: absolute;
}
.btn_lang{
	display: inline-block;
	margin-left: 5px;
	position: relative;
}
.ico_lang{
	display: inline-block;
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center center;
}
.lang_list{
	position: absolute;
	top: auto;
	left: 0px;
	display: none;
	margin-top: 6px;
}
.ico_en{
	background-image: url('../images/ico_en.png');
	background-size: 26px 26px;
}
.ico_cn{
	background-image: url('../images/ico_cn.png');
	background-size: 26px 26px;
}
.ico_tw{
	background-image: url('../images/ico_tw.png');
	background-size: 26px 26px;
}
.white .btn_audio_play{
	background-image: url('../images/ico_music_off_w.png');
}
.white .btn_audio_off{
	background-image: url('../images/ico_music_play_w.png');
}
.white .ico_en{
	background-image: url('../images/ico_en_w.png');
}
.white .ico_cn{
	background-image: url('../images/ico_cn_w.png');
}
.white .ico_tw{
	background-image: url('../images/ico_tw_w.png');
}


/* background */
.login{
	background: url('../images/bg_login.png') repeat-x center center;
	background-size: auto 100%;
}
.page1, .landing{
	background: url('../images/bg_page1.png') repeat-x center center;
	background-size: auto 100%;
}
.page2{
	background: url('../images/bg_page2.png') repeat-x center center;
	background-size: auto 100%;
}
.page3{
	background: url('../images/bg_page3.png') repeat-x center center;
	background-size: auto 100%;
}
.page4{
	background: url('../images/bg_page4.png') repeat-x center center;
	background-size: auto 100%;
}
.page5{
	background: url('../images/bg_page5.png') repeat-x center center;
	background-size: auto 100%;
}
.page6{
	background: url('../images/bg_page6.png') repeat-x center center;
	background-size: auto 100%;
}
.page7{
	background: url('../images/bg_page7.png') repeat-x center center;
	background-size: auto 100%;
}
.page8{
	background: url('../images/bg_page8.png') repeat-x center center;
	background-size: auto 100%;
}

/* login */
.login_pic{
	width: 100%;
	height: 100%;
}
.login_photo{
	position: absolute;
	left: 50%;
	top: 28%;
	width: 240px;
	margin-left: -120px;
	z-index: 100;
}
.login_photo img{
	width: 100%;
}

.stars{
	position: absolute;
	z-index: 99;
	left: 50%;
	margin-left: -200px;
	top: 0px;
	width: 400px;
	height: 400px;
}
/* 20161230 add */
@media (min-height: 1px) and (max-height: 580px){
	.login_pic{
		-webkit-transform: scale(0.7, 0.7);
		-moz-transform: scale(0.7, 0.7);
		-ms-transform: scale(0.7, 0.7);
		-o-transform: scale(0.7, 0.7);
		transform: scale(0.7, 0.7);
	}
	.stars{
		top: -20%;
	}
}/* end 20161230 add */
.star{
	position: absolute;
	left: 50%;
	top: 80%;
	background: url('../images/element/star.png') no-repeat;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	opacity: 0;
}
.light{
	position: absolute;
	left: 50%;
	top: 80%;
	background: url('../images/element/light.png') no-repeat;
	background-size: 38px 38px;
	width: 38px;
	height: 38px;
	opacity: 0;
}
.login_form{
	position: absolute;
	left: 50%;
	top: 62%;
	width: 74%;
	margin-left: -37%;
	z-index: 101; /* 20161230 add */
}
@media (max-width: 600px){
	.login_form{
		width: 80%;
		margin-left: -40%;
	}
}
/* 20161230 add */
@media (min-height: 1px) and (max-height: 580px){
	.login_form{
		top: 55%;
	}
}/* end 20161230 add */
.input{
	width: 100%;
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.3);
	outline: none;
	border-radius: 20px;
	padding: 5px 20px;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 12px;
	font-family: 'Arial Rounded MT Bold', 'Open Sans',"Microsoft Yahei","Microsoft Jhenghei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;
}
.input:focus{
	border-color: #e60044;
}
.input::-webkit-input-placeholder{
	color: rgba(0, 0, 0, 0.5);
}
.input::-moz-input-placeholder{
	color: rgba(0, 0, 0, 0.5);
}
.input[placeholder]{
	font-size: 14px;
}
.login_form .btn_default{
	width: 100%;
	text-align: center;
}
.login_msg{
	text-align: center;
	font-size: 12px;
	display: block;
	margin-top: 10px;
}
.login_msg a{
	color: #333b3e;
}
.login_msg a:hover{
	color: #d70c19;
}

/* popup */
.popup{
	position: fixed;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 1100;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	transition: display 300ms ease-in;
}
.popup_window{
	padding: 5%;
	color: #00223a;
	width: 80%;
	min-height: 20%;
	background-color: #fff;
	margin: 50% auto 0px;
	border-radius: 10px;
	text-align: center;
}
.popup_window .btn_default{
	width: 80%;
	margin-top: 20px;
}
.popup_wechat{
	padding: 80px 140px 0px 40px;
	text-align: center;
	background: url('../images/pic_share.png') no-repeat right top;
	background-size: 110px 180px;
	color: #fff;
	height: 180px;
}
.popup_msg{
	background-image: url('../images/element/popup_bg.png');
	background-position: center center;
	background-size: auto 65px;
	height: 65px;
	padding-top: 5px;
	line-height: 55px; /* 20161229 add */
	color: #333;
	position: relative;
}
/* 20161229 add */
.en .popup_msg{
	line-height: inherit;
}/* end 20161229 */
.popup_msg:before{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/element/popup_bg_f.png');
	background-size: 18px 65px;
	height: 65px;
	width: 18px;
	left: -18px;
	top: 0px;
	background-position: center left;
}
.popup_msg:after{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/element/popup_bg_b.png');
	background-size: 34px 65px;
	height: 65px;
	width: 34px;
	right: -34px;
	top: 0px;
	background-position: center right;
}
.popup_btn{
	position: absolute;
	bottom: 20px;
	width: 80%;
	margin: 0px 10%;
	text-align: center;
}
.popup_btn .btn_default{
	width: 100%;
}
.popup_H{
	z-index: 9999;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}
.popup_H .alert{
	text-align: center;
	-webkit-flex: 1;
    		flex: 1;
    background: url('../images/popup_H_bg.png') no-repeat top center;
    background-size: 148px auto;
    padding-top: 90px;
    color: #fff;
}

/* loading */
.loading{
	position: absolute;
	width: 130px;
	margin-left: -65px;
	left: 50%;
	top: 30%;
}
.loading_pic{
	width: 107px;
	height: 172px;
	margin: 0px auto;
}
.loading_pic img{
	width: 100%;
}
.loading_text{
	display:block;
	text-align: center;
	margin-top: -25px;
	font-size: 14px;
}
.loading_bar{
	margin-top: 10px;
	background: url('../images/element/loading_bar.png') no-repeat;
	background-size: 130px 12px;
	width: 130px;
	height: 12px;
	border-radius: 20px;
	padding: 1px;
}
.loading_rate{
	background: url('../images/element/loading.png') repeat-x;
	background-size: 9.5px 10px;
	height: 10px;
	border-radius: 5px;
}


/* landing */
.landing_pic{
	width: 235px;
	position: absolute;
	top: 4%;
	left: 50%;
	margin-left: -117.5px;
}
.landing_pic img{
	width: 100%;
}
.lading_title{
	position: absolute;
	top: 130px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	height: 32px;
	line-height: 32px;
	width: 100%;
	text-align: center;
	font-weight: 600;
	color: #f07a2b;
}
.landing_form{
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 37%;
	width: 74%;
	margin-left: -37%;
}
.radio{
	margin-bottom: 12px;
}
.radio .label{
	padding: 0px 20px;
}
.radio input{
	display: none;
}
.radio input ~ label{
	background-image: url('../images/radio.png');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	padding-left: 24px;
	margin-left: 10px;
}
.radio input:checked ~ label{
	background-image: url('../images/radio_check.png');
	background-size: 18px 18px;
}
.checkbox{
}
.checkbox{
	display: none;
}
.checkbox ~ label{
	background-image: url('../images/checkbox.png');
	background-position: 0px 3px;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	padding-left: 24px;
	font-size: 14px;
	margin-bottom: 12px;
	display: inline-block;
}
.checkbox:checked ~ label{
	background-image: url('../images/checkbox_check.png');
	background-size: 18px 18px;
}
.landing_form .btn_default{
	width: 100%;
	text-align: center;
}
.select{
	width: 100%;
	background-color: transparent;
	border: 1px solid rgba(0, 0, 0, 0.3);
	outline: none;
	border-radius: 20px;
	padding: 7px 18px;
	font-size: 14px;
	line-height: 18px;
	box-sizing: border-box;
	margin-bottom: 12px;
	font-family: 'Arial Rounded MT Bold', 'Open Sans',"Microsoft Yahei","Microsoft Jhenghei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;
	background: url('../images/ico_arrow.png') no-repeat 94% center;
	background-size: 12px 12px;
}
/*IE 10 */
.select::-ms-expand{
    display: none;
}
.select{
    /* Chrome */
    -webkit-appearance: none;
    /* Firefox */
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ' '; /* space */
}

/* index */
.page_paragraph{
	position: absolute;
	width: 100%;
	padding: 0px 8%;
	text-align: left;
	font-size: 14.5px;
}
.text_main{
	display: inline-block;
	font-size: 24px;
}
.text_main sup{
	font-size: 0.5em;
}
.class_name{
	color: #ffe266;
}
.btn_next{
	position: absolute;
	left: 50%;
	margin-left: -17.5px;
	bottom: 4%;
	background: url('../images/btn_next.png') no-repeat;
	background-size: 35px 35px;
	width: 35px;
	height: 35px;
	z-index: 99;
}

/* page1 section 0 */
.page1_title{
	position: absolute;
	width: 80%;
	top: 30%;
	margin: 0px 10%;
	text-align: center;
}
.page1_title p{
	margin-bottom: 8px;
}
.page1_title p:nth-child(2){
	margin-bottom: 5px;
}
.en .page1_title{
	top: 27%;
}
.page1_pic{
	position: absolute;
	top: 42%;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	height: 200px;
	background-color: #fff;
	border-radius: 100px;
	padding: 8px;
}
.page1_pic .userphoto{
	width: 184px;
	height: 184px;
	border-radius: 100px;
	overflow: hidden;
}
.page1_pic .userphoto img{
	width: 100%;
	height: 100%;
}
@media (min-height: 1px) and (max-height:600px){
	.page1_pic{
		top: 45%;
		width: 150px;
		height: 150px;
		margin-left: -75px;
		padding: 5px;
	}
	.page1_pic .userphoto{
		width: 140px;
		height: 140px;
	}
} 
/* page2 section 1 */
.ani_mushroom-1{
	background: url('../images/element/mushroom-1.png') no-repeat right top;
	background-size: 48.5px 49.5px;
	position: absolute;
	top: 68%;
	left: 50%;
	width: 60px;
	height: 90px;
	margin-left: 105px;
}
.ani_mushroom-2{
	background: url('../images/element/mushroom-2.png') no-repeat;
	background-size: 52px 50.5px;
	position: absolute;
	top: 67.7%;
	left: 50%;
	width: 64px;
	height: 100px;
	margin-left: 75px;
}
.page2_text{
	top: 21%;
	color: #fdffff;
}
.page2_text p{
	margin-bottom: 10px;
}
.page2_text .text_main{
	color: #fff;
}
.page2_pic{
	position: absolute;
	left: 50%;
	top: 59%;
	margin-left: -105px;
	width: 210px;
}
.page2_pic img{
	width: 100%;
}
/* page3 section 2 */
.page3_load{
	background: url('../images/element/page3_load.png') no-repeat;
	background-size: 501px 165px;
	position: absolute;
	z-index: 10;
	width: 501px;
	height: 165px;
	bottom: 0px;
	left: 50%;
	margin-left: -250.5px;
}
.ani_planet_b{
	background: url('../images/element/planet_b.png') no-repeat;
	background-size: 80px 80px;
	position: absolute;
	z-index: 9;
	width: 80px;
	height: 80px;
	/* bottom: 17%; */
	bottom: -10%;
	left: 50%;
	margin-left: -215px;
	display: none;
}
.ani_planet_w{
	background: url('../images/element/planet_w.png') no-repeat;
	background-size: 20px 20px;
	position: absolute;
	z-index: 9;
	width: 20px;
	height: 20px;
	/* bottom: 33%; */
	bottom: -10%;
	left: 50%;
	margin-left: 35px;
	display: none;
}
.ani_planet_y{
	background: url('../images/element/planet_y.png') no-repeat;
	background-size: 64px 40px;
	position: absolute;
	z-index: 9;
	width: 64px;
	height: 40px;
	/* bottom: 40%; */
	bottom: -10%;
	left: 50%;
	margin-left: 105px;
	display: none;
}
.ani_rocket{
	background: url('../images/element/rocket_fire.png') no-repeat;
	background-size: 53px 57.5px;
	z-index: 9;
	position: absolute;
	width: 53px;
	height: 57.5px;
	left: 66.5%;
	top: 14%;
}
.ani_rocket img{
	width: 100%;
}
.page3_text{
	top: 25%;
	color: #fdffff;
}
.page3_text p{
	margin-bottom: 10px;
}
.page3_text .text_main{
	color: #fff;
}
.page3_pic{
	position: absolute;
	z-index: 11;
	left: 50%;
	bottom: 9%;
	margin-left: -122.5px;
	width: 265px;
	height: 150px;
}
.page3_ani1{
	position: absolute;
	width: 85px;
	height: 150px;
	bottom: 0px;
	left: 0px;
}
.animal-1{
	background: url('../images/element/animal-1.png') no-repeat;
	background-size: 70px 75px;
	width: 70px;
	height: 75px;
	position: absolute;
	left: 4px;
	bottom: 2px;
}
.book-1{
	background: url('../images/element/book-1.png') no-repeat;
	background-size: 85px 76px;
	position: absolute;
	width: 85px;
	height: 76px;
	bottom: 0px;
	left: 0px;
}
.page3_ani1:hover .animal-1{
	bottom: 34px;
	transition: bottom 300ms ease-out;
}
.page3_ani2{
	position: absolute;
	width: 90px;
	height: 150px;
	bottom: 0px;
	left: 85px;
}
.animal-2{
	background: url('../images/element/animal-2.png') no-repeat;
	background-size: 81px 89px;
	width: 81px;
	height: 89px;
	position: absolute;
	left: 3px;
	bottom: 9px;
}
.book-2{
	background: url('../images/element/book-2.png') no-repeat;
	background-size: 90px 76px;
	position: absolute;
	width: 90px;
	height: 76px;
	bottom: 0px;
	left: 0px;
}
.page3_ani2:hover .animal-2{
	bottom: 40px;
	transition: bottom 300ms ease-out;
}
.page3_ani3{
	position: absolute;
	width: 90px;
	height: 150px;
	bottom: 0px;
	right: 0px;
}
.animal-3{
	background: url('../images/element/animal-3.png') no-repeat;
	background-size: 78px 94.5px;
	width: 78px;
	height: 94.5px;
	position: absolute;
	right: -2px;
	bottom: 2px;
}
.book-3{
	background: url('../images/element/book-3.png') no-repeat;
	background-size: 90px 76px;
	position: absolute;
	width: 90px;
	height: 76px;
	bottom: 0px;
	left: 0px;
}
.page3_ani3:hover .animal-3{
	bottom: 50px;
	transition: bottom 300ms ease-out;
}
.page3 .btn_next{
	background-image: url('../images/btn_next_g.png');
}
/* page4 section 3 */
.page4_text{
	top: 16%;
	color: rgba(51, 59, 62, 0.8);
}
.page4_text p{
	margin-bottom: 8px;
}
.page4_text .text_main{
	color: #0082a2;
	font-size: 20px;
	line-height: 1.5em;
	vertical-align: middle;
}
.page4 .class_name{
	color: #0082a2;
}
.page4_pic{
	background: url('../images/pic_page4-1.png') no-repeat;
	background-size: 100% auto;
	position: absolute;
	left: 50%;
	top: 57%;
	margin-left: -161.5px;
	width: 323px;
	height: 184px;
	transition: background-image 300ms ease-in-out;
}
.page4_pic.active{
	background-image: url('../images/pic_page4-2.png');
	transition: background-image 300ms ease-in-out;
}
.ani_surprised{
	background: url('../images/element/surprised.png') no-repeat;
	background-size: 100% 100%;
	position: absolute;
	right: 10px;
	top: 30px;
	width: 45px;
	height: 45px;
}
@media (max-height: 600px){
	.page4_text p{
		margin-bottom: 5px;
	}
	.page4_text .text_main{
		font-size: 18px;
	}
	.page4_pic{
		width: 260px;
		height: 148px;
		margin-left: -130px;
	}
	.ani_surprised{
		right: 5px;
		top: 30px;
		width: 35px;
		height: 35px;
	}
}
.page4 .btn_next{
	background-image: url('../images/btn_next_g.png');
}
/* page5 section 4 */
.page5_text{
	top: 12%;
	color: #fdffff;
}
.page5_text p{
	margin-bottom: 8px;
}
.page5_text .text_main{
	color: #fff;
}
.page5_pic{
	margin-top: 20px;
	text-align: center;
}
.page5_pic img{
	width: 100%;
}
.page5 .class_name{
	color: #333;
}
.teacher_content{
	position: absolute;
	width: 100%;
	top: 0px;
	left: 100%;
	padding-top: 10px;
}
.teacher1_name{
	text-align: center;
	font-size: 20px;
	line-height: 1.5em;
	/* padding: 5px; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.page5 .teacher1_name{
	font-size: 20px;
}
.teacher1_photo{
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 50%;
	border: 8px solid #f7f8f8;
	margin: 0px auto;
}
.page5 .teacher1_photo{
	width: 186px;
	height: 186px;
}
@media (max-height: 600px){
	.page6_text p{
		margin-bottom: 5px;
	}
	.teacher1_name{
		font-size: 16px;
		line-height: 1.5em;
		padding: 5px;
	}
	.teacher1_photo{
		width: 100px;
		height: 100px;
		border-width: 5px;
	}
}
.teacher1_photo img{
	width: 100%;
	height: 100%;
}
.teacher_fav{
	margin-top: 20px;
	background-color: #efefef;
	padding:0px 2%;
	border-radius: 0px 0px 5px 5px;
}
.teacher_fav_list{
}
.teacher_fav_list:after{
	content: "";
	display: table;
	clear: both;
}
.teacher_fav_list li{
	width: 31%;
	margin: 0px 1%;
	float: left;
}
.teacher_fav_tag{
	background-color: #efefef;
	display: inline-block;
	position: relative;
	top: -12px;
	left: 15px;
	font-size: 12px;
	color: #898989;
	padding: 0px 10px;
	border-radius: 20px;
}
.teacher_fav_photo{
	width: 69px;
	height: 69px;
	border: 3px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	margin: -5px auto 0px;
}
.teacher_fav_photo img{
	width: 100%;
}
.teacher_fav_name{
	text-align: center;
	font-size: 10px;
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.teacher_video{
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	background: #fff;
	border-radius: 5px;
	padding-top: 10px;
}
.teacher_title{
	text-align: center;
	font-size: 20px;
	line-height: 1.5em;
	height: 1.5em;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.video{
	width: 90%;
	margin: 0px 5%;
}
.video_detail{
	width: 80%;
	margin: 10px 10%;
	font-size: 14px;
	color: #246365;
}
.teacher_photo{
	margin: 0px auto;
	width: 168px;
	height: 168px;
	overflow: hidden;
	border-radius: 50%;
	border: 8px solid #fff;
	position: relative;
	z-index: 9;
}
@media (max-height: 600px){
	.page5_text{
		top: 10%;
	}
	.page5_text p{
		margin-bottom: 5px;
	}
	.teacher_photo{
		width: 120px;
		height: 120px;
		border-width: 5px;
	}
}
.teacher_name{
	position: relative;
	z-index: 10;
	top: -28px;
	display: inline-block;
	text-align: center;
	background-color: #fff;
	border-radius: 10px;
	padding: 0px 10px;
	font-size: 20px;
	color: rgba(0, 0, 0, .7);
	width: auto;
	margin: 0px auto;
}
/* page6 section 5 */
.page6_text{
	top: 10%;
	color: #fdffff;
}
.page6_text p{
	margin-bottom: 7px;
}
.page6_text .text_main{
	color: #FFF;
}
.en .page6 .class_name{
	margin-top: 12px;
}
.teachers_box{
	position: absolute;
	width: 100%;
	top: 40%;
	height: 324px;
}
@media (min-height: 1px) and (max-height: 500px){
	.teachers_box{
		-webkit-transform: scale(0.8, 0.8);
		-moz-transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-o-transform: scale(0.8, 0.8);
		transform: scale(0.8, 0.8);
	}
}
.teachers{
	position: absolute;
	width: 84%;
	height: 324px;
	left: 0px;
	top: 0px;
	margin: 0px 8%;
	/* background-color: #fff; */
	border-radius: 5px;
	overflow: hidden;
	color: #246365;
}
.page5 .teachers_box, .page5 .teachers{
	height: 260px;
}
@media (min-height: 1px) and (max-height: 600px){
	.page6_text{
		top: 6%;
	}
	.teachers_box{
		top: 42%;
		height: 268px;
	}
	.teachers{
		height: 268px;
	}
	.page5 .teachers_box, .page5 .teachers{
		height: 230px;
	}
	.teacher_fav_photo{
		width: 40px;
		height: 40px;
	}
}
/* 20161231 add */
@media (min-width: 600px ){
	.teachers, .teachers_box{
		height: 400px;
	}
	.page5 .teachers_box, .page5 .teachers{
		height: 400px;
	}
	.page5 .teacher1{
		margin-top: 100px;
	}
}/* end 20161231 add */
.teacher1{

}
.page6 .teacher_content{
	background-color: #fff;
	border-radius: 5px;
}
.btn_arrow_right{
	background: url('../images/btn_arrow_right.png') no-repeat;
	background-size: 50px 50px;
	position: absolute;
	right: 0px;
	top: 50%;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	z-index: 10;
}
.btn_arrow_left{
	background: url('../images/btn_arrow_left.png') no-repeat;
	background-size: 50px 50px;
	position: absolute;
	left: 0px;
	top: 50%;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	z-index: 10;
	display: none;
}


/* page7 section 6 */
.water{
	background-image: url('../images/element/water.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	right: 50%;
	margin-right: -50%;
	z-index: 8;
}
.page7_chart{
	background: url('../images/chart_bg.png') no-repeat center center;
	background-size: 230px 230px;
	height: 360px;
	width: 100%;
	position: absolute;
	left: 50%;
	margin-left: -50%;
	top: 24%;
}
@media (max-height: 600px){
	.page7_chart{
		top: 20%;
	}
}
.page7_title{
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 50%;
	top: 190px;
	text-align: center;
	color: #fff;
	font-size: 16px;
}
.chart_list{

}
.chart_pie{
	position: absolute;
	width: 60px;
	height: 60px;
	left: 50%;
	margin-left: -30px;
	text-align: center;
}
.chart_pie.chart1{
	-webkit-transform: translate(0px, 40px);
	-ms-transform: translate(0px, 40px);
	-o-transform: translate(0px, 40px);
	transform: translate(0px, 40px);
}
.chart_pie.chart2{
	-webkit-transform: translate(115px, 130px);
	-ms-transform: translate(115px, 130px);
	-o-transform: translate(115px, 130px);
	transform: translate(115px, 130px);
}
.chart_pie.chart3{
	-webkit-transform: translate(70px, 260px);
	-ms-transform: translate(70px, 260px);
	-o-transform: translate(70px, 260px);
	transform: translate(70px, 260px);
}
.chart_pie.chart4{
	-webkit-transform: translate(-70px, 260px);
	-ms-transform: translate(-70px, 260px);
	-o-transform: translate(-70px, 260px);
	transform: translate(-70px, 260px);
}
.chart_pie.chart5{
	-webkit-transform: translate(-115px, 130px);
	-ms-transform: translate(-115px, 130px);
	-o-transform: translate(-115px, 130px);
	transform: translate(-115px, 130px);
}
.chart_point{
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 26px;
	color: #d70c19;
}
.chart_point.point_0{
	background: url('../images/chart/chart0.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_1{
	background: url('../images/chart/chart1.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_2{
	background: url('../images/chart/chart2.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_3{
	background: url('../images/chart/chart3.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_4{
	background: url('../images/chart/chart4.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_5{
	background: url('../images/chart/chart5.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_6{
	background: url('../images/chart/chart6.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_7{
	background: url('../images/chart/chart7.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_8{
	background: url('../images/chart/chart8.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_9{
	background: url('../images/chart/chart9.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_10{
	background: url('../images/chart/chart10.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_11{
	background: url('../images/chart/chart11.png') no-repeat;
	background-size: 60px 60px;
}
.chart_point.point_12{
	background: url('../images/chart/chart12.png') no-repeat;
	background-size: 60px 60px;
}
.chart_tooltip{
	background-color: #fff;
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: #f0a635;
	border-radius: 20px;
	padding: 0px 10px;
	left: 50%;
	white-space: nowrap;
}
@media (min-height: 1px) and (max-height: 600px){
	.page7_chart{
		transform:scale(0.9, 0.9);
	}
}
.chart_tooltip.tooltip_up{
	top: -30px;
}
.chart_tooltip.tooltip_up:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width:  5px 3px 0 3px;
	border-color: #ffffff transparent transparent transparent;
	position: absolute;
	bottom: -5px;
	margin-left: -2px;
	left: 50%;
}
.chart_tooltip.tooltip_down{
	top: 90px;
}
@media (max-height: 600px){
	.chart_tooltip.tooltip_up{
		top: -20px;
	}
	.chart_tooltip.tooltip_down{
		top: 80px;
	}
}
.chart_tooltip.tooltip_down:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 3px 5px 3px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	top: -5px;
	margin-left: -2px;
	left: 50%;
}
/* page8 section 7 */
.page8_info{
	position: absolute;
	width: 310px;
	top: 8%;
	left: 50%;
	z-index: 10;
	margin-left: -155px;
	color: #fff;
}
.bg_page8_front{
	background: url('../images/bg_page8_front.png') repeat-x center center;
	background-size: auto 100%;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	right: 50%;
	margin-right: -50%;
	z-index: 9;
}
.page8_title{
	background: url('../images/page8_bg_title.png') no-repeat;
	background-size: 310px 100px;
	width: 310px;
	height: 100px;
	position: relative;
	z-index: 2;
}
.page8_title .user_title{
	padding-top: 18px;
	text-align: center;
	font-size: 24px;
	color: #920783;
}
.user_subtitle{
	text-align: center;
	color: #f39800;
	font-size: 14px;
	margin-top: -10px;
}
.page8_title .page8_tag{
	text-align: center;
	margin-top: 10px;
}
.page8_info_detail{
	position: relative;
	z-index: 1;
	margin: 0px auto;
	width: 264px;
	background: url('../images/page8_bg_info.png') no-repeat center center #00488d;
	background-size: 50% 50%;
	border-radius: 5px;
	font-size: 12px;
	margin-top: -49px;
	padding: 49px 15px 20px;
}
.page8_info_detail .text_main{
	font-size: 15px;
}
.animals{
	background-image: url('../images/element/animals.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 50% 120px;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	right: 50%;
	margin-right: -50%;
	z-index: 8;
}
.animals.animate{
	background-position: 50% 50%;
	transition: background-position 1s ease-out;
}
.spotlight{
	position: absolute;
	z-index: 7;
	top: 30%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-left: -200px;
	background: url('../images/element/spotlight.png') no-repeat;
	background-size: 100% 100%;
}
.page8_pic{
	position: absolute;
	z-index: 11;
	top: 40%;
	width: 300px;
	left: 50%;
	margin-left: -150px;
}
@media (max-height: 600px){
	.page8_pic{
		width: 250px;
		margin-left: -125px;
		top: 50%;
	}
}
.page8_pic img{
	width: 100%;
}
.page8_btn{
	position: absolute;
	left: 50%;
	z-index: 20;
	margin-left: -50%;
	text-align: center;
	top: 86%;
	width: 100%;
}
.page8_btn p{
	color: rgba(51, 59, 62, 0.8);
	font-size: 12px;
}