@charset "utf-8";
/* CSS Document */
body {
	max-width: 100%; overflow-x: hidden;
	background: #fff;
	color:#333; font: 18px/36px "Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif; }
body , h1 , h2 , h3 , h4 , h5 , h6 , hr , p , blockquote , dl , dt , dd , ul , ol , li ,
pre , form , fieldset , legend , button , input , select, textarea ,
th, td { margin: 0; padding: 0; }
img { border: none; max-width: 100%; }
a { color: #333; text-decoration: none; }
a:hover { color: #e4393c; text-decoration: none; }
a , area { blr: expression(this.onFocus=this.blur()); }
ul , ol , li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; max-width: 100%; }
input , :focus { outline: 0; }
input[type="button"] , input[type="submit"] , input[type="reset"],select { -webkit-appearance: none; font-family:"Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif ; }
input { font-family:"Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif ; }
input::focus-inner { padding: 0; border: 0; }
input[type="text"] { box-shadow: 0 0 0 500px #fff inset;}

.fl { float: left; } .fr { float: right; }
.clearfix:after { display: block; content: ''; clear: both; } .clearfix { zoom: 1;}
.clear { height: 0; width: 100%; overflow: hidden; font-size: 1px; line-height: 0; visibility: hidden; }
.Width { width: 1170px; margin: 0 auto; }
.hide , .onlymob { display: none; }

/* 通用头部 */
.ht_top {
	position: relative; width: 100%; overflow: hidden; z-index: 1;
	background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;
	line-height: 41px;
}
.ht_top .zt_top { width: 1200px; height: 41px; margin: 0 auto; }
.ht_top h1 { float: left; }
.ht_top h1 a {
	float: left; width: 131px; height: 40px; overflow: hidden;
	background: url(https://www.huatu.com/z/topfooter/images/logo.gif) no-repeat;
	font-size: 12px; text-indent: -100em;
}
.ht_top .topnav { float: right; color: #333; font-size: 12px; }
.ht_top .topnav a { padding: 0 8px; }
.ht_top .topnav a:hover { color: #e4393c; text-decoration: underline; }

.banner { 
	position: relative; height:660px; padding-top:75px; margin-bottom: 50px; box-sizing: border-box; overflow: hidden;
	background: url(../images/banner01.jpg) no-repeat bottom;
}
.banner h3 {
	background-size: contain;
	display: block;
	height: 89px;
	overflow: hidden;
	font-size: 2em;
	width: 13em;
	line-height: 89px;
	background: linear-gradient(90deg,  #85d1c5,  #dda1e1);
	box-shadow: 0px 17px 13px 0px  rgba(242,68,61,0.22);
	border-radius: 90px;
	color: rgb(255, 255, 255);
	font-weight: bold;
	text-shadow: 3px 3px 16px rgba(0, 0, 0, 0.29);
	margin: 0 auto;
	text-align: center;
}
.banner h2 { 
	margin:25px auto 35px;
	color: #fff; font-size: 145px; line-height:150px; text-align: center;
	text-shadow: 0 5px 13px rgba(190, 36, 5, .8);
}
.banner03 {
	height:272px;
	background: url(../images/banner03.png) no-repeat center;
	background-size:contain;
}
.banner04 {
	position: absolute; left:50%; bottom:0; pointer-events: none;
	width:1186px; height:363px; margin-left: -1000px;
	background: url(../images/banner04.png) no-repeat left bottom;
	background-size:contain;
}
.banner05 {
	position: absolute; left:50%; bottom:0; pointer-events: none;
	width:464px; height:442px; margin-left: 536px;
	background: url(../images/banner05.png) no-repeat right bottom;
	background-size:contain;
}

.title {
	height: 54px; margin-bottom: 20px;
	background:url(../images/pic01.png) no-repeat top;
	color: #f0452d; font-size:48px; line-height: 54px; text-align: center;
}
.title span {
	color: #f83e05;
	background: -webkit-linear-gradient( 90deg, #feae01 , #f83e05);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title02 {
	margin-bottom: 35px;
	color: #f95404; font-size: 28px; line-height: 30px; text-align: center;
}

.box01 li {
	position: relative;
	width: 580px;
	height: 377px;
	z-index: 1;
	background: #fff;
	box-shadow: 0 20px 27px 8px  rgba(41, 41, 41, .1);
	margin-top: 10px;
}
.box01 h4 {
	height: 60px; margin-bottom: 15px;
	background: #f35134;
	color: #fff; font-size: 26px; line-height: 60px; text-align: center;
}
.box01 .tit {
	width: 270px; margin: 0 15px;
	text-align: center;
}
.box01 .pic {
	display: block;
	width: 225px;
	height: 230px;
	margin: 0 auto;
	transition:transform .8s ease-out;
}
.box01 .pic:hover {
	transform: scale(1.03);
}
.box01 .pic img {
	display: block; width: 100%; height: 100%;
}
.box01 .price {
	margin-top: 10px;
	font-size: 20px; line-height: 24px; white-space: nowrap;
}
.box01 .price em {
	display: inline-block; padding:0 10px; vertical-align: top;
	background: url(../images/pic03.png) no-repeat center;
	background-size:100% 80%;
	font-style: normal;
}
.box01 .price span {
	color:#f35134; font-weight: 800;
}
.box01 .price b {
	font-size: 28px;
}
.box01 .des {
	float:left; width: 240px;
}
.box01 h5 {
	color: #f0452d; font-size: 24px; line-height:40px;
}
.box01 .des p {
	font-size: 22px; line-height: 33px;
}
.box01 .des p span {
	color: #f35134;
}
.box01 .btn {
	display: block; width:200px; height:54px; margin-top:10px; cursor: pointer;
	background:#f12d1f; border-radius:10px;
	background: linear-gradient( 4deg, #ff753d, #f12d1f, #f12d1f , #ff753d ) no-repeat top;
	background-size:auto 300%;
	box-shadow: 0 5px 13px 3px rgba(66, 66, 66, .2);
	color:#fff; font-size:24px; line-height:54px; text-align: center;
	transition:all .3s;
}
.box01 .btn:hover { 
	background-position:center 100%;
	animation: tada .8s;
}

.box02 {
	margin: 30px auto 55px;
}
.box02 li {
	position: relative; float: left; width: 262px; height: 300px; margin-right: 40px; margin-bottom: 30px; z-index: 1;
	background: #fff; box-shadow: 0 20px 27px 8px rgba(41, 41, 41, .1);
}
.box02 li:nth-child(4n) {
	margin-right: 0;
}
.box02 .pic {
	display: block; width:100%; height:225px; padding-top: 10px; box-sizing: border-box; overflow: hidden;
	border-bottom:1px solid #e9e9e9;
}

.box02 .pic img {
	display: block;
	width: 200px;
	height:205px;
	margin: 0 auto;
	transition:transform .8s ease-out;
}
.box02 .pic:hover img {
	transform: scale(1.03);
}
.box02 h5 {
	padding:0 15px;
	color: #f35134; font-size: 22px; line-height: 40px;
}
.box02 p {
	padding:0 15px;
	font-size: 16px; line-height: 25px; white-space: nowrap;
}
.bg03 {
	position: relative;
	padding: 60px 0 10px;
	background: url(../images/bg04.jpg) no-repeat center;
	background-size:cover;
	margin-bottom: 80px;
}
.bg03 .title {
	background-image:url(../images/pic02.png);
	color:#fff;
}
.bg03 .title span {
	color: #fff;
	background: -webkit-linear-gradient( 90deg, #fff , #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bg03 .title02 {
	color: #fff;
}
.icon01 {
	position: absolute; left:50%; top:-912px; pointer-events: none;
	width:147px; height:346px; margin-left:863px;
	background: url(../images/bg01.png) no-repeat left;
	background-size:cover;
	animation:float01 3s ease-in-out infinite alternate;
}
.icon02 {
	position: absolute; left:50%; top:-1098px; pointer-events: none;
	width:158px; height:154px; margin-left: -895px;
	background: url(../images/bg02.png) no-repeat center;
	background-size:contain;
	animation:float01 2s ease-in-out infinite alternate;
}
.icon03 {
	position: absolute; left:50%; top:-432px; pointer-events: none;
	width:138px; height:313px; margin-left: -1000px;
	background: url(../images/bg03.png) no-repeat right;
	background-size:cover;
	animation:float01 3s ease-in-out infinite alternate;
}
@keyframes float01 {
	0% { transform: translateY(0); }
	100% { transform: translateY(-8%); }
}

/* 通用底部 */
.footer { 
	clear: both; position: relative; padding:30px 0;
	background:#333;
	text-align: center;
}
.footer p { position: relative; z-index: 2; color:#fff; font-size: 16px; line-height: 30px; }
.footer p span { padding: 0 5px; }
.footer p a { color:#fff; }
.footer iframe{height:300px;}
@media only all and (max-width:1200px) {
	.onlymob { display: block; }
	html { font-size: 20px; }
	body { 
		width: 18.75rem;
		font-size: .7rem; line-height: 1.2rem;
	}
	html , body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
	.Width { width: 17.5rem; }

	/* 隐藏元素 */
	.ht_top .topnav a:nth-child(n+2),
	.footer p,
	.pc , .onlypc { display: none; }

	/* 通用头部 */
	.ht_top { height: 2.5rem; background-size: auto 100%; line-height: 2.5rem; }
	.ht_top h1 a {
		height: 2.5rem; width: 7.5rem;
		background: url(https://www.huatu.com/images/2015css/images/mob_logo.png) no-repeat center / contain; }
	.ht_top .topnav { font-size: .8rem; text-indent: -1000rem; }
	.ht_top .topnav a { padding: 0 0 0 0.3rem; text-indent: 0; float: right; word-break: keep-all; }

	.banner { height:8.5rem; padding-top:1rem; margin-bottom:1.5rem; background-image:url(../images/banner01m.jpg); background-size:cover;}
	.banner h3 {height:1.35rem;font-size: 1.2em;line-height: 1.7em;}
	.banner h2 { 
		margin:.35rem auto .5rem;
		font-size:1.85rem; line-height:2rem;
		text-shadow: 0 .15rem .5rem rgba(190, 36, 5, .8);
	}
	.banner03 { height:3.25rem; }
	.banner04 { width:11.2rem; height:3.43rem; margin-left: -9.375rem; }
	.banner05 { width:3.94rem; height:3.75rem; margin-left:5.435rem; }
	
	.title {
		height:1.4rem; margin-bottom:.5rem;
		background-size: contain; 
		font-size:1.2rem; line-height:1.4rem;
	}
	.title02 { margin-bottom:1rem; font-size:.7rem; line-height:1rem; }
	
	.box01 li { float:none; width:100%; height:auto; padding-bottom: .5rem; margin-bottom: .5rem; box-shadow: 0 .1rem .5rem .15rem rgba(41, 41, 41, .15); }
	.box01 h4 { height:1.8rem; margin-bottom:.5rem; font-size:.8rem; line-height: 1.8rem; }
	.box01 .tit { width:8rem; margin: 0 .5rem; }
	.box01 .pic { width:6rem; height:6.9rem; }
	.box01 .price { margin-top: .5rem; font-size:.65rem; line-height:1rem; }
	.box01 .price em { padding:0 .25rem }
	.box01 .price b { font-size:.85rem; }
	.box01 .des { width:8rem; }
	.box01 h5 { font-size:.75rem; line-height:1.2rem; }
	.box01 .des p { font-size:.65rem; line-height:1rem; }
	.box01 .btn {
		width: 6rem;
		height:1.8rem;
		margin-top:.5rem;
		border-radius:.25rem;
		box-shadow: 0 .15rem .5rem 0 rgba(66, 66, 66, .2);
		font-size:.8rem;
		line-height:1.8rem;
		margin-left: 1.5em;
	}
	
	.box02 { margin:1rem auto 2rem; }
	.box02 li { width:8.5rem; height:11rem; margin-right:.5rem; margin-bottom: .5rem; box-shadow: 0 .1rem .5rem .15rem rgba(41, 41, 41, .1); }
	.box02 li:nth-child(2n) { margin-right: 0; }
	.box02 .pic { height:7rem; padding-top:.5rem; border-bottom-width: .05rem; }
	.box02 .pic img {width: 6rem;height:6rem;}
	.box02 h5 { padding:0 .5rem; font-size: .8rem; line-height:1.4rem; }
	.box02 p { padding:0 .5rem; font-size: .75rem; line-height:1rem; white-space: normal; }
	
	.bg03 {padding:2rem 0 .1rem;margin-bottom: 20px;}
	.icon01 { top:-42rem; width:1.7rem; height:4rem; margin-left:7.7rem; }
	.icon02 { top:-29.5rem; width:2rem; height:2rem; margin-left: -9.25rem; }
	.icon03 { top:-6.5rem; width:2.2rem; height:5rem; margin-left: -9.375rem; }
	
	
	/* 通用底部 */
	.footer { position: relative; height:2rem; padding:0; overflow: hidden; }
	.footer:before {
		display: block; content: "华图教育集团版权所有";
		position: absolute; left: 0; top: 0;
		width: 100%; height: 2rem; overflow: hidden;
		color: #fff; font-size: .7rem; line-height: 2rem; text-align: center; } 
}