@charset "gb2312";
/* CSS Document */
body {
	max-width: 100%; overflow-x: hidden; overflow-y: scroll;
	background: #6cdfae url(../images/pic00.jpg) no-repeat bottom;
	color: #333; font: 18px/32px "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: #1d181b; 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; }
input::focus-inner { padding: 0; border: 0; }

::selection {background: #D03333;color: white;text-shadow: none;}
::-webkit-scrollbar-track-piece{width:10px;background-color:#f2f2f2}
::-webkit-scrollbar{width:10px;height:6px}
::-webkit-scrollbar-thumb{height:50px;background-color:rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:hover{background:#707070;}

.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 { width: 100%;background: #fafafa url(http://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;line-height: 41px;overflow: hidden;}
.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;text-indent: -100em;background: url(http://www.huatu.com/z/topfooter/images/logo.gif) no-repeat; font-size:12px;}
.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 */
.banner { 
	position: relative; height:780px; overflow: hidden;
	background:url(../images/pic05.jpg) no-repeat top;
}
.banner .bg01 {
	position: absolute; left:50%; top:0; pointer-events: none;
	width:401px; height:331px; margin-left:-980px;
	background: url(../images/pic03.png) no-repeat center / contain;
}
.banner .bg02 {
	position: absolute; left:50%; top:0; pointer-events: none;
	width:428px; height:348px; margin-left:580px;
	background: url(../images/pic04.png) no-repeat center / contain;
}
.banner h3 {
	padding:80px 0 10px;
	color: #5bb686; font-size: 44px; font-weight: 400; line-height:50px; text-align: center;
}
.banner h2 {
	height:120px; text-indent: -9999em; overflow: hidden;
	background:url(../images/pic01.png) no-repeat center / contain;
}

.banner p {
	width:640px; height:84px; margin:25px auto 0;
	border:3px solid #f7cf5d; border-radius: 84px;
	color: #ea991f; font-size: 38px; line-height:84px; text-align: center;
}
.miantit {
	height:60px; text-indent: -9999em; overflow: hidden;
	background:url(../images/pic11.png) no-repeat center;
}
.box01 {
	padding:45px; margin:35px auto 75px; box-sizing: border-box;
	background: #fff; border-radius:20px;
	box-shadow: 0 0 50px rgba(57, 178, 135, .15);
}
.list-div {
	position: relative; width:600px; margin:0 auto 25px; }
.list-div input,
.list-div select {
	display: block; width:100%; height:70px; box-sizing: border-box;
	background: #fff; border:1px solid #e4e4e4; border-radius: 10px;
	outline: none;
	font-size:24px; line-height:70px; text-indent: .5em; }
.list-div select { 
	width:290px;
	background: #fff url(../images/icon01.png) no-repeat 260px center; }
.yuyue option {
	width:100%; }
#PhoneCode { float:left; width:360px; }
#fs {
	float:right; width:220px; cursor: pointer;
	background: #32c1ab; border:none;
	color: transparent; font-size:26px; text-align: center; text-indent: 0;
	text-shadow: 0 0 0 #fff;
	transition: all .2s; }
#fs:hover { background: #20cdb2;  }
.yuyueBtn {
  display:block; width:460px; height:74px; margin:35px auto 0; cursor: pointer;
  background: #f8dc57; border-radius: 20px; border:none;
  box-shadow: 0 0 24px 0 rgba(245,207,69,1) inset ;
  font-size:38px; font-weight: 800; line-height: 74px; text-align: center;
}
.yuyueBtn:hover { background: #f5d047; }

.miantit02 { background-image:url(../images/pic21.png); }
.box02 {
	padding:0 40px 0 55px; margin:35px auto 75px; box-sizing: border-box;
	background: #fff; border-radius:20px;
	box-shadow: 0 0 50px rgba(57, 178, 135, .15);
	font-size:20px; line-height: 36px;
}
.box02 .info { width:450px; }
.box02 h4 {
	padding-top:65px;
	color:#3f9076; font-size:36px; font-weight: 400; line-height: 40px; text-align: center;
}
.box02 h6 {
	margin:10px auto 25px;
	font-size:20px; font-weight: 400; line-height:30px; text-align: center;
}
.box02 .info h4 { margin-bottom:55px; }
.box02 .info p span { font-weight: 800; }
.box02 .gift {
	width:590px; padding:0 40px 50px; box-sizing: border-box;
	border-left:1px solid #c6eede;
}
.code {
	width:150px; height: 150px; padding:5px; margin:10px auto 0;
	background: #fba816;
	background: linear-gradient( 0, #fba816, #fed973);
	box-shadow: 0 5px 27px rgba(238, 236, 236, .75);
}
.code img { display: block; width:100%; height: 100%; }

.miantit03 { background-image:url(../images/pic31.png); }
.miantitmin {
	margin-top:15px;
	color:#fff; font-size: 24px; font-weight: 400; line-height:30px; text-align: center;
}
.box03 {
  position: relative; padding-bottom:60px; margin:35px auto 75px;
	background: #fff;  border-radius:20px;
	box-shadow: 0 0 50px rgba(0, 0, 0, .075);
}
.box03 .tabTit {
  position: relative;
	height:80px; margin-bottom:60px;
	background:#72f2bb; border-radius: 20px 20px 0 0;
}
.box03 .tabTit span {
	position: relative; top:0; display:block; float:left; width:8.33%; height:66px; cursor: pointer;
	color:#fff; font-size: 30px; font-weight: 400; line-height: 80px; text-align: center; 
	transition: top .2s;
}
.box03 .tabTit span.on {
	height:96px; top:-8px; line-height:96px;
	background: #fba10d; border-radius: 4px;
	background: linear-gradient( 0, #fcc826, #fba10d);
}
.box03 table { 
	position: relative; width:1118px; margin:0 auto;
	background: #fefadd;
}
.box03 tr:first-child {
	background: #fba10d;
	background: linear-gradient( 90deg, #fba00c, #fcca27);
}
.box03 th {
	width:16.6%; height:80px;
	border:1px solid #facd89; 
	color:#fff; font-size:26px; font-weight: 400; text-align: center;
}
.box03 td {
	padding:25px 0;
	border:1px solid #facd89; 
	color:#000; font-size: 26px; text-align: center;
}
	
.box03 td a {
	display:block; width: 135px; height:42px; margin:0 auto;
	background: #eda43c; border-radius: 42px;
	background:linear-gradient( 90deg, #eda43c, #e97433 , #e97433 ,#eda43c ) repeat left / 300% 200%;
	color:#fff; font-size:20px; line-height: 42px; text-align: center;
	transition:all .2s ease-out;
}
.box03 td a:hover { background-position:100% 95%; }
.box03 td img { 
	width:140px; height: 140px; padding:5px;
	background: #fff;
}

.miantit04 { background-image:url(../images/pic41.png); }
.box04 {
	position: relative; padding:20px; margin:35px auto 100px; box-sizing: border-box;
	background: #fff;border-radius:20px;
	box-shadow: 0 0 50px rgba(57, 178, 135, .15);
}
.box04 .icon {
	position:absolute; width:27px; height: 27px; pointer-events: none;
	background:url(../images/icon02.png) no-repeat center / contain; 
}
.box04 .icon01 {
	left:110px; top:65px;
	animation:star .68s infinite alternate;
}
.box04 .icon02 {
	left:735px; top:12px;
	animation:star .68s .5s infinite alternate;
}
.box04 .icon03 {
	left:495px; bottom:12px;
	animation:star .6s infinite alternate;
}
.box04 .icon04 {
	right:90px; bottom:12px;
	animation:star .75s .3s infinite alternate;
}

@keyframes star {
  0% { opacity: 1; }
  100% { opacity: .3; }
}

.box04 ul {
	padding:30px 110px; box-sizing: border-box;
	background: #fdfae0; border-radius:20px;
}
.box04 li {
	float:left; width:50%;
	background: #fdfae0; border-radius:20px;
	font-size:20px; text-align: center;
}
.box04 .code { width:160px; height: 160px; }

/* 通用底部 */
.footer {
	clear: both; position: relative; padding: 30px 0 120px;
	text-align: center; }
.footer p {
	position: relative; z-index: 2;
	color: #fff; font-size: 14px; line-height: 26px; }
.footer p a { color: #fff; font-size: 14px; }
.footer p span { padding: 0 5px; }

@media only all and (min-width:1920px) {
	body { background-size:100% 683px; }
	.banner { background-size:100% 100%; }
	.banner .bg01 { left:0; margin-left:0; }
	.banner .bg02 { left:auto; right:0; margin-left:0; }
}
@media only all and (max-width:1200px) {
	.onlymob { display: block; }
	html { font-size: 20px; }
	body { 
		width: 18.75rem;
		background-size:100% auto;
		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; }
	
	/* banner */
	.banner { height:14rem; background-size:36rem auto; }
	.banner .bg01 { width:7rem; height:6rem; top:-.5rem; margin-left:-11rem; }
	.banner .bg02 { width:7rem; height:6rem; top:-.5rem; margin-left:4rem; }
	.banner h3 { padding:2rem 0 .5rem; font-size:.8rem; line-height:1rem; }
	.banner h2 { height:2rem; }
	.banner p {
		width:10rem; height:1.6rem; margin-top:.5rem;
		border-width:.075rem; border-radius:1.6rem;
		font-size:.6rem; line-height:1.6rem;
	}
	.miantit { height:1.5rem; background-size:contain; }
	.box01 { padding:1rem; margin:1.5rem auto 2.5rem; border-radius:.5rem; }
	.list-div { width:12rem; margin-bottom:.5rem; }
	.list-div input,
	.list-div select {
		height:1.8rem; border-radius: .3rem;
		font-size:.7rem; line-height:1.8rem; }
	.list-div select { width:5.75rem; background-size:.35rem; background-position: 5rem center;}
	#PhoneCode { width:5.75rem; }
	#fs { width:5.75rem; font-size:.7rem; }
	.yuyueBtn {
	  width:8.375rem; height:1.8rem; margin-top:1rem; 
	  border-radius:.3rem;
	  font-size:.8rem; line-height:1.8rem; }

	.box02 {
		padding:0; margin:1.5rem auto 2.5rem; border-radius:.5rem;
		font-size:.75rem; line-height:1.2rem;
	}
	.box02 .info { float:none; width:15.5rem; padding:0 1rem; margin:0 auto 1rem; }
	.box02 h4 { padding-top:1.5rem; font-size:1.2rem; line-height:1.5rem; }
	.box02 h6 { margin:0 auto 1rem; font-size:.8rem; line-height:1.5rem; }
	.box02 .info h4 { margin-bottom:1rem; }
	.box02 .gift {
		float:none; width:100%; padding:0 1rem 1rem;
		border-top:1px solid #c6eede; border-left:none; }
	.code { width:6rem; height: 6rem; padding:.25rem; margin-top:.5rem; }

	.miantitmin { margin-top:0; font-size:.8rem; line-height:1.4rem;}
	.box03 { padding-bottom:1rem; margin:1.5rem auto 2.5rem; border-radius:.5rem; }
	.box03 .tabTit {
		height:2.8rem; margin-bottom:1rem;
		border-radius:.5rem .5rem 0 0; }
	.box03 .tabTit span {
		width:.65rem; height:1.6rem; padding:.4rem .4rem; 
		font-size:.66rem; line-height:.8rem; }
	.box03 .tabTit span:nth-child(10) { height:2.4rem; padding:.2rem .4rem; }
	.box03 .tabTit span.on,
	.box03 .tabTit span:hover {
		height:1.6rem; padding:.8rem .4rem; top:-.2rem; line-height: .8rem;
		border-radius:.25rem; }
	.box03 .tabTit span:nth-child(10).on,
	.box03 .tabTit span:nth-child(10):hover { height:2.4rem; padding:.4rem;  }
	.box03 table { width:17rem; }
	.box03 th,
	.box03 td { height:1.6rem; padding:.25rem; font-size:.6rem; }
	.box03 th:nth-child(6),
	.box03 td:nth-child(6) { display:none; }
	.box03 td a {
		width:3rem; height:1.6rem;
		border-radius:1.6rem;
		font-size:.6rem; line-height: 1.6rem; }
		
	.box04 { padding:.5rem; margin:1.5rem auto 2rem; border-radius:.5rem; }
	.box04 .icon { width:.5rem; height:.5rem; }
	.box04 .icon01 { left:1.1rem; top:1.2rem; }
	.box04 .icon02 { left:9rem; top:.25rem; }
	.box04 .icon03 { left:4rem; bottom:.25rem; }
	.box04 .icon04 { right:1.5rem; bottom:.4rem; }
	.box04 ul { padding:.5rem; border-radius:.5rem; }
	.box04 li { border-radius:.5rem; font-size:.6rem; }
	.box04 .code { width:5rem; height:5rem; margin-top:.35rem; }
	
	/* 通用底部 */
	.footer { position: relative; height: 2.4rem; padding: 0; overflow: hidden; }
	.footer:before {
		display: block; content: "华图教育集团版权所有";
		position: absolute; left: 0; top: 0;
		width: 100%; height: 2.4rem; overflow: hidden;
		color: #fff; font-size: .7rem; line-height: 2.4rem; text-align: center; }
}