<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@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:738px; padding-top:65px; margin-bottom: 50px; box-sizing: border-box; overflow: hidden;
	background: url(../images/banner01.jpg) no-repeat bottom;
}
.banner h2 { 
	height:253px; overflow: hidden; text-indent: -9999em; visibility: hidden;
	background:url(../images/banner02.png) no-repeat center;
	background-size: contain;
}
.banner h3 { 
	width: 542px; height: 80px; margin:40px auto 0;
	background: #a875f9; border-radius: 80px;
	color: #fff; font-size:50px; font-weight: 400; line-height:80px; text-align: center;
}

.title {
	height: 54px; margin-bottom:10px;
	background:url(../images/pic01.png) no-repeat top;
	color: #05f8cb; font-size:38px; line-height: 54px; text-align: center;
}
.title span {
	color: #05f8cb;
	background: -webkit-linear-gradient( 90deg, #02dffc , #05f8cb);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title02 {
	margin-bottom: 35px;
	color: #04f9e2; font-size: 28px; line-height: 30px; text-align: center;
}

.box01 li,
.box03 .hot {
	position: relative; width: 580px; height: 377px; z-index: 1;
	background: #fff; box-shadow: 0 20px 27px 8px  rgba(41, 41, 41, .1);
}
.box01 li {
	margin-bottom: 30px;
}
.box01 h4,
.box03 .hot h4 {
	height: 60px; margin-bottom: 15px;
	background: #34f3c0; 
	color: #fff; font-size: 26px; font-weight: 400; line-height: 60px; text-align: center;
}
.box01 h4 a,
.box03 .hot h4 a {
	color:#fff;
}
.box01 .tit,
.box03 .hot .tit {
	width: 270px; margin: 0 15px;
	text-align: center;
}
.box01 .pic ,
.box03 .hot .pic {
	display: block; width: 200px; height: 230px; margin: 0 auto;
	transition:transform .8s ease-out;
}
.box01 .pic:hover ,
.box03 .hot .pic:hover {
	transform: scale(1.03);
}
.box01 .pic img ,
.box03 .hot .pic img {
	display: block; width: 100%; height: 100%;
}
.box01 .price ,
.box03 .hot .price {
	margin-top: 10px;
	font-size: 20px; line-height: 24px; white-space: nowrap;
}
.box01 .price span,
.box03 .hot .price span {
	color:#f35134; font-weight: 800;
}
.box01 .price b ,
.box03 .hot .price b {
	font-size: 28px;
}
.box01 .des,
.box03 .hot .des {
	float:left; width: 240px;
}
.box01 h5,
.box03 .hot h5 {
	color: #f0452d; font-size: 24px; line-height:40px;
}
.box01 .des p,
.box03 .hot .des p {
	font-size: 22px; line-height: 33px;
}
.box01 .des p span ,
.box03 .hot .des p span {
	color: #f35134;
}
.box01 .btn ,
.box03 .hot .btn {
	display: block; width:200px; height:54px; margin-top:10px; cursor: pointer;
	background:#23f3af; border-radius:10px;
	background: linear-gradient( 4deg, #37fcd8, #23f3af, #23f3af, #37fcd8  ) 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 , 
.box03 .hot .btn:hover { 
	background-position:center 100%;
	animation: tada .8s;
}

.box02 ,
.box03 {
	margin-bottom: 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: 170px; 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;
}

.box03 .normal {
	position: relative; float: left; width: 262px; height: 377px; margin-left:33px; margin-bottom: 30px; z-index: 1;
	background: #fff; box-shadow: 0 20px 27px 8px rgba(41, 41, 41, .1);
}

.box03 .normal .pic {
	display: block; width:100%; height:280px; padding-top:30px; box-sizing: border-box; overflow: hidden;
	border-bottom:1px solid #e9e9e9;
}

.box03 .normal .pic img {
	display: block; width: 170px; height:205px;  margin: 0 auto;
	transition:transform .8s ease-out;
}
.box03 .normal .pic:hover img {
	transform: scale(1.03);
}
.box03 .normal h5 {
	padding:0 15px;
	color: #f35134; font-size: 22px; line-height: 40px;
}
.box03 .normal p {
	padding:0 15px;
	font-size: 16px; line-height: 25px; white-space: nowrap;
}

.bg03 {
	position: relative; padding:60px 0 10px; margin-bottom: 50px;
	background: url(../images/bg04.jpg) no-repeat center;
	background-size:cover;
}
.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;
}
.bg03 .box01 h4,
.bg03 .box03 .hot h4 {
	background: #ff5732;
}
.bg03 .box01 .btn ,
.bg03 .box03 .hot .btn {
	background:#f54027;
	background: linear-gradient( 4deg,  #fd6b39,#f54027, #f54027, #fd6b39 ) no-repeat top;
	background-size:auto 300%;
}
.bg03 .box01 .btn:hover,
.bg03 .box03 .hot .btn:hover { 
	background-position:center 100%;
	animation: tada .8s;
}

.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,
.icon04 {
	position: absolute; left:50%; top:-90%; 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;
}
.icon04 {
	top:auto; bottom:-250px; margin-left:-830px; 
}
.icon05 {
	position: absolute; left:50%; bottom:-60%; pointer-events: none;
	width:172px; height:331px; margin-left: 845px;
	background: url(../images/bg05.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; }

@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:12.125rem; padding-top:1.25rem; margin-bottom:1.5rem; background-image:url(../images/banner01m.jpg); background-size:cover;}
	.banner h2 { height:3.625rem; }
	.banner h3 { 
		width:8rem; height:1.2rem; margin-top:.65rem;
		border-radius:1.2rem;
		font-size:.7rem; line-height:1.2rem;
	}
	
	.title {
		height:1.5rem; margin-bottom:.25rem;
		background-size: contain; 
		font-size:1rem; line-height:1.5rem;
	}
	.title02 { margin-bottom:1rem; font-size:.7rem; line-height:1rem; }
	
	.box01 li,
	.box03 .hot { 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,
	.box03 .hot h4 { height:1.8rem; margin-bottom:.5rem; font-size:.8rem; line-height: 1.8rem; }
	.box01 .tit,
	.box03 .hot .tit { width:8rem; margin: 0 .5rem; }
	.box01 .pic,
	.box03 .hot .pic { width:6rem; height:6.9rem; }
	.box01 .price,
	.box03 .hot .price { margin-top: .5rem; font-size:.65rem; line-height:1rem; }
	.box01 .price b,
	.box03 .hot .price b { font-size:.85rem; }
	.box01 .des,
	.box03 .hot .des { width:8rem; }
	.box01 h5,
	.box03 .hot h5 { font-size:.75rem; line-height:1.2rem; }
	.box01 .des p,
	.box03 .hot .des p { font-size:.65rem; line-height:1rem; }
	.box01 .btn,
	.box03 .hot .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,
	.box03 { 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:5rem; 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; }
	
	.box03 .normal { width:8.5rem; height:11rem; margin-left:.5rem; margin-bottom: .5rem; box-shadow: 0 .1rem .5rem .15rem rgba(41, 41, 41, .1); }
	.box03 .normal:nth-child(2n-2) { margin-left: 0; }
	.box03 .normal .pic { height:7rem; padding-top:.5rem; border-bottom-width: .05rem; }
	.box03 .normal .pic img { width:5rem; height:6rem; }
	.box03 .normal h5 { padding:0 .5rem; font-size: .8rem; line-height:1.4rem; }
	.box03 .normal p { padding:0 .5rem; font-size: .75rem; line-height:1rem; white-space: normal; }
	
	.icon01 { top:-42rem; width:1.7rem; height:4rem; margin-left:7.7rem; }
	.icon02,
	.icon04 { top:-29.5rem; width:2rem; height:2rem; margin-left: -9.25rem; }
	.icon03 { top:-6.5rem; width:2.2rem; height:5rem; margin-left: -9.375rem; }
	.icon04 { top:auto; bottom:-7rem; margin-left:-9.25rem; }
	.icon05 { bottom:-60%; width:2.2rem; height:4.3rem; margin-left:7rem; }
	
	/* 通用底部 */
	.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; } 
}
</pre></body></html>