@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: 1200px; 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:700px; padding-top:95px; box-sizing: border-box; overflow: hidden;
	background: url(../images/banner01.png) no-repeat bottom;
}
.banner h3 { 
	height: 90px; overflow: hidden; text-indent: -9999em; visibility: hidden;
	background:url(../images/banner06.png) no-repeat center;
	background-size: contain;
}
.banner h2 { 
	margin: 40px auto 35px;
	color: #fff;  line-height:130px; text-align: center;
	font-size:104px;
	text-shadow:0px 5px 13px rgba(47,80,19,0.82);
}
.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;
}

.md_box{
	background: #507828;
}
.md_list li{
	float: left;
	width: 25%;
	line-height: 100px;
	text-align: center;
	font-size: 24px;
}
.md_list li:hover{
	background: #56872d;
}
.md_list li a{
	display: block;
	width: 100%;
	color: #fff;
}

.title {
	height: 80px; margin-bottom: 40px;
	color:rgba(240,69,45,1); font-size:48px; line-height: 80px; text-align: center;
}
.title::before,
.title::after{
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 45px;
	height: 80px;
	background-image: url("../images/title_before.png");
	background-size: 100%;
	margin: 0 10px;
}
.title::after{
	background-image: url("../images/title_after.png");
}
.title span {
	color:rgba(240,69,45,1);
	background:linear-gradient(-182deg,rgba(118,193,54,1) 0%, rgba(62,91,38,1) 61.9384765625%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
#box1,#box2,#box3,#box4{
	box-sizing: border-box;
	padding: 40px 0;
}
.title02 {
	margin-bottom: 35px;
	color: #f95404; font-size: 28px; line-height: 30px; text-align: center;
}

.box01 li {
	position: relative; width: 580px; height: 490px; z-index: 1;
	background: #fff; box-shadow: 0 20px 27px 8px  rgba(41, 41, 41, .1);
	margin-bottom: 35px;
}
.box01 h4 {
	height: 60px; margin-bottom: 15px;
	background: #618a3d;
	color: #fff; font-size: 26px; line-height: 60px; text-align: center;
}
.box01 .tit {
	width: 200px; margin: 0 15px;
	text-align: center;
}
.box01 .pic {
	display: block; width: 150px; height: 230px; margin: 20% auto;
	transition:transform .8s ease-out;
}
.box01 .pic:hover {
	transform: scale(1.03);
}
.box01 .pic img {
	display: block; width: 100%; height: 100%;
}
.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 del{
	margin-right: 10px;
}
.box01 .price span {
	color:#FF0000; font-size: 22px;
}
.box01 .price b {
	color:#FF0000; font-size: 36px; font-weight: normal;
}
.book_qr_box{}
.book_qr_box h5,
.book_qr_box img{
	display: inline-block;
	vertical-align: middle;
}
.book_qr_box img{
	width: 90px;
	margin-left: 10px;
}
.box01 .des {
	float:left; width: 335px;
	height: 310px;
}
.box01 h5 {
	color: #618a3d; font-size: 22px; line-height: 35px;
	font-weight: normal;
}
.box01 .des p {
	font-size: 15px; line-height: 25px;
	color: #333;
}
.box01 .des p span {
	color: #f35134;
}
.bottom_price{
	box-sizing: border-box;
	padding: 20px 40px;
	border-top: 1px dashed #3E5B26;
	margin-top: 20px;
}
.box01 .price {
	float: left;
	font-size: 20px; line-height: 40px; white-space: nowrap;
}
.box01 .btn {
	float: right;
	display: block; width:140px; height:40px; cursor: pointer;
	 border-radius:20px;
	color:#fff; font-size:24px; line-height:40px; text-align: center;
	transition:all .3s;
	background:linear-gradient(-40deg,rgba(96,148,53,1),rgba(62,91,38,1));
	box-shadow:0px 5px 13px 3px rgba(66,66,66,0.21);
}
.box2_btn{
	display: block; width:140px; height:40px; cursor: pointer;
	border-radius:20px;
	color:#fff; font-size:24px; line-height:40px; text-align: center;
	transition:all .3s;
	background:linear-gradient(-40deg,rgba(96,148,53,1),rgba(62,91,38,1));
	box-shadow:0px 5px 13px 3px rgba(66,66,66,0.21);
	margin: 0 auto;
}
.box01 .btn:hover { 
	background-position:center 100%;
	animation: tada .8s;
}

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

.box02 .pic img {
	display: block; height:195px;  margin: 0 auto;
	transition:transform .8s ease-out;
}
.box02 .pic:hover img {
	transform: scale(1.03);
}
.box02 h5 {
	padding:0 20px; font-weight: normal;
	color: #FF0000; font-size: 24px; line-height: 40px;
}
.box02 p {
	padding:0 20px;
	margin-bottom: 10px;
	font-size: 16px;
	color: #333;
	line-height: 30px; text-align: justify;
}
.bg03 {
	position: relative; padding:60px 0 10px;
	/*background: url(../images/bg04.jpg) no-repeat center;*/
	/*background-size:cover;*/
}
.bg03 .title {
	/*background-image:url(../images/pic02.png);*/
	/*color:#fff;*/
}
.bg03 .title span {
	spancolor: #fff;
	background: -webkit-linear-gradient( 90deg, #fff , #fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bg03 .title02 {
	color: #fff;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:-898px; 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; }


.window_mask{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(0,0,0,.7);
}
.buy_box{
	width: 660px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
	box-sizing: border-box;
	padding: 40px 0;
	border-radius: 20px;
	border: 1px solid #618a3d;
}
.close{
	display: block;
	position: absolute;
	right: -15px;
	top: -15px;
	cursor: pointer;
}
.fixed_text{
	line-height: 30px;
	color: #618a3d;
	font-size: 18px;
	box-sizing: border-box;
	padding: 0 50px;
	margin-bottom: 35px;
	text-align: justify;
}
.fixed_list li{
	float: left;
	width: 120px;
	margin: 0 48px;
	text-align: center;
}
.fixed_list li img{
	display: block;
	margin-bottom: 15px;
}
.fixed_list li p{
	line-height: 25px;
	font-size: 16px;
	color: #333;
}
.yhj_box{
	margin: 40px auto 0;
	box-sizing: border-box;
	border: 2px solid #6a8847;
	padding: 20px 60px;
}
.yhj_box p{
	line-height: 35px;
	font-size: 16px;
	color: #333;
}
.yhj_box p span{
	color: #6a8847;
}
.yhj_list{
	margin: 15px auto;
	width: 744px;
}
.yhj_list li{
	float: left;
	background-image: url("../images/yhj_bg.png");
	background-size: 100%;
	width: 218px;
	margin: 0 15px;
	height: 108px;
	box-sizing: border-box;
	text-align: center;
	padding-top: 15px;
	padding-left: 35px;
	box-shadow: 0 0 16px rgba(89,118,52,.5);
	border-radius: 5px;
}
.yhj_list li a{
	display: block;
	color: #fff;
}
.yhj_list li h5{
	line-height: 50px;
	font-size: 40px;
	color: #fff;
}
.yhj_list li p{
	line-height: 30px;
	font-size: 18px;
	color: #fff;
}


@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:9.5rem; padding-top: 1rem; margin-bottom:0; background-size: auto 100%;}
	.banner h3 { height:1.35rem; }
	.banner h2 { 
		margin:.35rem auto .5rem;
		font-size:1.5rem; line-height:2rem;
	}
	.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:2rem; margin-bottom:.5rem;
		background-size: contain; 
		font-size:1.2rem; line-height:1.4rem;
	}
	.title02 { margin-bottom:1rem; font-size:.7rem; line-height:1rem; }
	#box1, #box2, #box3, #box4{
		padding: 1rem 0;
	}
	.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:100%; margin: 0; }
	.box01 .pic { width:6rem; height:6.9rem; margin: 0 auto; }
	.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: 100%; box-sizing: border-box; padding: 0 1rem;
		height: auto; }
	.box01 h5 { font-size:.85rem; line-height:1.4rem; }
	.box01 .des p { font-size:.65rem; line-height:1rem; }
	.box01 .btn {
		width:8rem; 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;
	}
	
	.box02 { margin:1rem auto 2rem; }
	.box02 li { width:8.5rem; height:12.5rem; 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:5rem; height:6rem; }
	.box02 h5 { padding:0 .5rem; font-size: .75rem; line-height:1.4rem; }
	.box02 p { padding:0 .1rem; line-height:1.2rem; font-size: .6rem }
	
	.bg03 { padding:2rem 0 .1rem; }
	.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; }


	.md_list li{
		float: left;
		width: 50%;
		line-height: 1.5rem;
		font-size: .7rem;
	}

	.title::before,
	.title::after{
		width: 1rem;
		height: 2rem;
		margin: 0 .2rem;
		background-repeat: no-repeat;
	}
	.bottom_price{
		padding: .5rem;
		margin-top: .5rem;
	}
	.box01 .price {
		font-size: .7rem; line-height: 1.5rem; white-space: nowrap;
	}
	.box01 .btn {
		width: 5rem; height:1.5rem;
		border-radius: .75rem;
		font-size:.7rem; line-height:1.5rem;
	}
	.box2_btn{
		width: 5rem; height:1.5rem;
		border-radius: .75rem;
		font-size:.7rem; line-height:1.5rem;
	}
	.buy_box{
		width: 90%;
		padding: 1rem 0;
		border-radius: .5rem;
	}
	.close{
		right: -.8rem;
		top: -.8rem;
		width: 1.6rem;
	}
	.fixed_text{
		line-height: 1.2rem;
		font-size: .7rem;
		padding: 0 1rem;
		margin-bottom: .5rem;
	}
	.fixed_list li{
		width: 31.3%;
		margin: 0 1%;
	}
	.fixed_list li img{
		width: 80%;
		margin: 0 auto .5rem;
	}
	.fixed_list li p{
		line-height: 1.2rem;
		font-size: .7rem;
	}

	.yhj_box{
		margin: 1rem auto 0;
		padding: .5rem;
	}
	.yhj_box p{
		line-height: 1.3rem;
		font-size: .7rem;
		text-align: justify;
	}
	.yhj_list{
		margin: .3rem auto;
		width: 100%;
	}
	.yhj_list li{
		width: 49%;
		margin: .2rem .5%;
		height: 4rem;
		padding-top: .5rem;
		padding-left: 1.2rem;
	}
	.yhj_list li:nth-last-child(1){
		margin: .2rem 25.5%;
	}
	.yhj_list li h5{
		line-height: 1.5rem;
		font-size: 1rem;
	}
	.yhj_list li p{
		line-height: 1rem;
		font-size: .65rem;
		text-align: center;
	}
}