@charset "utf-8";
/*reset*/
*{box-sizing:border-box;}
body{min-width: 320px; background-color: #fff; font:14px/1.5 "Microsoft YaHei", "微软雅黑", "Open Sans", Arial, "Hiragino Sans GB", "STHeiti", "WenQuanYi Micro Hei";}
body,div,h1,h2,h3,h4,h5,h6,form,input,p,th,td,img,ul,li,em,dl,dt,dd,ol{padding:0;margin:0; font-weight:normal;}
body em{font-style:normal;}
body i{font-style:normal;}
body a{text-decoration:none;color: inherit;}
body a:hover{ text-decoration:none;}
table{ border-collapse: collapse;border-spacing: 0;}
img{border:0;}
ul,li{ list-style:none}
html{background:#fff;}
input,textarea{outline: none;}
/* float */
.fn-left,.fn-right {display:inline;}
.fn-left {float:left;}
.fn-right {float:right;}
.fn-clear{*zoom: 1;}
.fn-clear:before,.fn-clear:after{display:block;line-height:0;height:0;content:"";}
.fn-clear:after{clear:both;}
.fn-hide{display: none;}

.layout{width: 1200px; margin: 0 auto;}
.header{height: 74px;padding:9px 0; }
.logo{width: 56px; height: 56px; background: url(imgs/logo.png) no-repeat; text-indent: -99em;}
.header>img{display: block;margin-left: 10px;margin-top:17px;}
.banner{position: relative; height: 550px;margin-bottom: 50px; background: url(imgs/banner.jpg) no-repeat center;}
.code-blk{position: absolute;right: 50%;bottom: 20px; margin-right: -430px; width: 320px; height: 170px;padding: 8px; background: rgba(255,255,255,.3); border:2px solid rgba(157,181,209,.3);border-radius: 2px;}
.code-blk>.inner{width: 100%; height: 100%; border-radius: 2px;}
.code-blk img{padding: 1px;background-color: #fff;}
.code-blk p{width: 150px; height: 100%;padding: 15px 0; background-color: #fff;color: #c5d1a3;font-size: 20px; line-height: 38px; text-align: center;}
.main>h2{position: relative;padding-bottom: 10px; color: #2c2b2a; font-size: 30px; text-align: center;}
.main>h2>i{position: absolute; bottom: 0;left: 50%; width: 36px; height: 2px;margin-left: -18px; background-color: #a1c338; }
.points-list{margin: 50px 0;color: #818381; font-size: 18px;line-height: 2; text-align: center;}
.points-list>li{float: left; width: 33.33%;}
.points-list>li>h3{color: #2c2b2a;}
.more{display: block;margin: 80px auto 60px; width: 245px;height: 45px;border: 1px solid #d8d5d4; color: #818381; line-height: 43px; text-align: center;}
.more>img{vertical-align: middle;}
.footer{height: 130px; background-color: #f8f9f9;border-top: 1px solid #f3f2f2;color: #595959; line-height: 130px; text-align: center;}

@media screen and (max-width:840px){
	html{background-color: #f9f9f9;}
	.layout{width: 100%;}
	.header{height: 40px;padding: 5px 10px;}
	.logo{width: 30px; height: 30px; background-size: 100%;}
	.header>img{height: 14px;margin: 8px 5px;}
	.banner{height: 130px;margin-bottom:20px; background-size: auto 100%;}
	.code-blk{right: 5px; bottom: 10px; height: 80px; width: 150px; margin-right: 0; padding: 2px;}
	.code-blk img{display: block;height: 100%;}
	.code-blk p{width: 69px;padding: 8px 0;font-size: 12px; line-height: 1.5;}
	.main>h2{font-size: 16px;}
	.points-list{margin:10px 0; font-size: 14px;line-height: 1.5;text-align: left;}
	.points-list>li{position: relative; float: none;width: 100%;padding:10px 10px 10px 60px;border-bottom: 1px solid #e5e5e5;}
	.points-list>li:last-child{border-bottom: none;}
	.points-list>li>img{position: absolute; top:10px;left: 10px;height: 40px; }
	.points-list>li h3{font-size: 14px;}
	.points-list>li p{font-size: 12px;}
	.more{width: 180px; margin: 20px auto; font-size: 12px;height: 30px;line-height: 28px;}
	.more>img{height: 50%;}
	.footer{height: auto; padding: 30px 20px; font-size: 12px; line-height: 1.5;}
}

@media screen and (min-width:470px) and (max-width:840px){
	.banner{background-size: 100% 100%;}
}