@charset "utf-8";
/* CSS Document */
html { font-size: 20px; }
body {
	max-width: 100%; overflow-x: hidden;
	background: #fff;
	color:#333; font: .7rem/1.2rem "Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif;
}
html , body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
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 { -webkit-appearance: none; font-family:"Hiragino Sans GB", "MicroSoft YaHei", Arial, sans-serif ; }
input::focus-inner { padding: 0; border: 0; }

.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: 17rem; margin: 0 auto; }
.hide , .onlymob { display: none; }

.main {
	width:18.75rem;height: 85rem; margin: 0 auto; overflow: hidden;
	background: url(../images/bg.jpg) top center no-repeat;
	background-size: 100%;
}

/* 通用头部 */
.ht_top {
	position: relative; width: 100%; height: 2.5rem; overflow: hidden; z-index: 2;
	background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;
	background-size: auto 100%;
	line-height: 2.5rem;
}
.ht_top h1 {
	float: left;
}
.ht_top h1 a {
	float: left; width: 7.5rem; height: 2.5rem; overflow: hidden;
	background: url(https://www.huatu.com/images/2015css/images/mob_logo.png) no-repeat center / contain;
	text-indent: -100em;
}
.ht_top .topnav {
	float: right; color: #333; font-size: .8rem;
}
.ht_top .topnav a {
	padding: 0 0 0 0.3rem;
}
.ht_top .topnav a:hover {
	color: #e4393c; text-decoration: underline;
}

.banner { 
	position: relative;
	height: 11rem;
	background-size: 100%;
	text-align: center;
}
.banner .logo {
	position: absolute; left: .5rem; top: .5rem;
	width:3.325rem; height:.75rem; overflow: hidden;
	background:url(../images/logo.png) no-repeat;
	background-size: contain;
}
.banner .logo a {
	display: block; width: 100%; height: 100%; text-indent: -9999em;
}
.banner h3 { 
	position: absolute; left:0; top:2.2rem;
	width:100%;
	color: #fff; font-size: 1.15rem; font-weight: 400; line-height:1.2rem; text-align: center;
}
.banner h2 { 
	position: absolute; left:0; top:4.35rem;
	width:100%;
	height: 5rem;
	font-size: 0; text-align: center;
	background: url(../images/banner_title.png) top center no-repeat;
	background-size: 85%;
}
.banner p { 
	position: absolute; left:0; top:9rem;
	width:100%;
	height: 5rem;
	font-size: 0; text-align: center;
	background: url(../images/p_title.png) top center no-repeat;
	background-size: 60%;
}

.box01 {
	height: 22rem;
	position: relative;
	padding: .8rem 1rem .5rem;
	margin: 0 auto;
	margin-bottom: 0.7rem;
	margin-top: 15px;
	box-sizing: border-box;
	z-index: 1;
	background: url(../images/box_bg.png) top center no-repeat;
	background-size: 100%;
}


.box01 .textList {
	width: 97%;
	margin: 0 auto;
	margin-top: 1rem;
	margin-top:30%;
}
.box01 .textList li {
	width: 100%;
	height: 1.6rem;
	margin: -3.6% 0rem 42.9%;
	box-sizing: border-box;
}
.box01 .textList li:first-child {
	background: url(../images/gf_btn.png) top center no-repeat;
	background-size: 40%;
    padding-left: 0px;
    border-left-width: 20px;
}
.box01 .textList li:nth-child(2) {
	background: url(../images/gf_btn.png) top center no-repeat;
	background-size: 40%;
    padding-left: 0px;
    border-left-width: 20px;
}
.box01 .textList li:nth-child(3) {
	background: url(../images/gf_btn.png) top center no-repeat;
	background-size: 40%;
    padding-left: 0px;
    border-left-width: 20px;
}


.box01 .btn {
	width: 11rem;
	height: 1.6rem;
	background: #ff8600;
	border-radius: .5rem;
	cursor: pointer;
	color: #fff;
	margin: 0 auto;
	margin-top: 1.2rem;
	text-align: center;
	line-height: 1.6rem;
}
.box01 .btn:hover {
	background: #fbb401;
}

.box02 {
	height: 22rem;
	position: relative;
	padding: .8rem 1rem .5rem;
	margin: 0 auto;
	margin-bottom: 0.7rem;
	margin-top: 28%;
	box-sizing: border-box;
	z-index: 1;
	background: url(../images/box_bg2.png) top center no-repeat;
	background-size: 100%;
}

.box02 .textList {
	width: 97%;
	margin: 0 auto;
	margin-top: 1rem;
}
.box02 .textList li {
	width: 100%;
	height: 1.6rem;
	margin: 107.5% 0rem 40%;
	box-sizing: border-box;
}
.box02 .textList li:first-child {
	background: url(../images/gf_btn2.png) top center no-repeat;
	background-size: 40%;
    padding-left: 0px;
    border-left-width: 20px;
}


.box03 {
	height: 22rem;
	position: relative;
	padding: .8rem 1rem .5rem;
	margin: 0 auto;
	margin-bottom: 0.7rem;
	margin-top: 15%;
	box-sizing: border-box;
	z-index: 1;
	background: url(../images/box_bg3.png) top center no-repeat;
	background-size: 100%;
}

.code-box {
	padding: 0 .5rem;
}

.code-box ul li {
	width: 4rem;
	height: 1.9rem;
	margin: 0px 1rem .6rem 0.75rem;
	border-radius: 0.3rem;
	line-height: 1.9rem;
	font-size: 0.9rem;
	letter-spacing: .1rem;
}

.code-box ul li:nth-child(4),
.code-box ul li:nth-child(8)
.code-box ul li:nth-child(12){
	margin-left: .75rem;
	margin-right: 1rem;
}


.code-box ul li {
	float: left;
	width: 35%;
	height: 20%;
	background-image: linear-gradient(90deg, #FF9900 0%, #FFCC33 100%);
	border-radius: 12px;
	text-align: center;
	line-height: 150%;
	font-size: 22px;
	/* font-weight: bold; */
	letter-spacing: 5px;
}
.code-box ul li:hover{
	background-image: linear-gradient(90deg,  #FF9900 0%, #FFCC33 100%);
}

.code-box ul li a {
	color: #ffffff;
	display: block;
}





/* 通用底部 */
.footer { 
	height:2rem;
	background: #333;
	color:#fff; font-size: .7rem; line-height: 2rem; text-align: center;
}