@charset "utf-8";

.haopingbanner{ width:100%; height:450px; background:url(../images/haopingbanner.jpg) center top no-repeat}
.classes-wrap{overflow: hidden; border-bottom:1px #ddd solid;}
.haopinglv{ width:630px; margin:0 auto 30px; height:120px;}
.haopinglvfl{ float:left; width:120px; height:120px;}
.haopinglvfr{ float:left; width:calc(100% - 120px); padding-top:20px;}
.haopinglvfr ul li{ float:left; border:1px #ddd solid; padding:1px 10px; color:#333; margin-right:10px; margin-bottom:20px;}
.haopinglvfr ul li:nth-child(5n+1){ clear:left;}
.haopinglvfr ul li:hover{ background:#0066cc; color:#fff; border:1px #0066cc solid; cursor:pointer;}
.content{width: 1200px;margin: 0 auto;position: relative;}
.content:after{content: '';clear: both;height: 0;display: block;}
.clearfix:after{content: " ";display: table;clear: both;width: 100%;}
.classes-wrap .classes-item{width: 100%;float: left;cursor: pointer;padding: 81px 0 58px;position: relative;z-index: 1;overflow: hidden;}
.classes-wrap .classes-item.active:after{display: block;}
.classes-wrap .classes-item:after{content: " ";position: absolute;z-index: 2;background: url(../images/helpcenter_sprites.png) no-repeat -56px -235px;width: 36px;height: 18px;bottom: 0;left: 50%;margin-left: -18px;display: none;}
.classes-wrap .classes-item .icon{width: 126px;height: 60px;display: block;margin: 0 auto;}
.classes-wrap .classes-item.active .text{color: #000;font-weight: 700;}
.classes-wrap .classes-item .text{font-size: 16px;color: #535353;display: block;text-align: center;font-weight: 400;margin-top: 15px;}
.classes-wrap .classes-item .icon.icon-login{ background:url(../images/haopingtab1.png) center center no-repeat;}
.classes-wrap .classes-item:hover .icon.icon-login,
.classes-wrap .classes-item.active .icon.icon-login{ background:url(../images/haopingtabactive1.png) center center no-repeat;}
.classes-wrap .classes-item .icon.icon-config{ background:url(../images/haopingtab2.png) center center no-repeat;}
.classes-wrap .classes-item:hover .icon.icon-config,
.classes-wrap .classes-item.active .icon.icon-config{ background:url(../images/haopingtabactive2.png) center center no-repeat;}
.classes-wrap .classes-item .icon.icon-award{ background:url(../images/haopingtab3.png) center center no-repeat;}
.classes-wrap .classes-item:hover .icon.icon-award,
.classes-wrap .classes-item.active .icon.icon-award{ background:url(../images/haopingtabactive3.png) center center no-repeat;}


/*内容*/
.list-wrap{background: #fff;padding: 50px 0;box-sizing: border-box;display: none;}
.list-wrap.active{display: block;}
.list-wrap .list-title{margin-bottom: 20px;    font-size: 30px;color: #333;text-align: center;font-weight: normal;line-height: 50px;}
.list-wrap .list-title .icon-question{width: 26px;height: 29px;display: inline-block;vertical-align: -8px;margin-right: 10px;background: url(../images/helpcenter_sprites.png) no-repeat -10px -235px;}
.list-wrap .list-content .list-item{display: block;float:left;width: 18.6%;margin: 10px 8px;position: relative;z-index: 1;background: #f6f6f6;text-align: center;padding: 10px 0;border-radius: 4px;}
.list-wrap .list-content .list-item img{ max-width:100%;}
.list-wrap .list-content .list-item p{font-size:14px;font-weight:normal;text-align:center;color: #555;line-height: 24px;height: 54px;padding-top: 15px;}
.list-wrap .list-content .list-item a{text-decoration: none;color: #535353;}
.list-wrap .list-content .list-item a:hover{color: #4381fd;}
.list-wrap .list-content .list-item a:before{content: " ";background: #b2b2b2;width: 4px;height: 4px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;position: absolute;z-index: 1;top: 42px;left: 0;}
.pagination{margin-top: 45px;text-align: right;display: block;width: 100%;}
.pagination__item{padding: 8px 10.5px;margin: 0 4px;box-sizing: border-box;display: inline-block;border: 1px solid #dadada;border-radius: 4px;font-size: 12px;color: #535353;background: #fff;cursor: pointer;}
.pagination__item:hover{background-color: #b1b1b1;border-color: #999;color: #fff;}
.pagination__item.is-active{background-color: #4381fd;border-color: #4381fd;color: #fff;cursor: default;}


.zhenshi {width: 100%;height: 950px;background-color: #f8f8f8;}
.zhenshi .zhenshititle {font-size: 32px;color: #333;text-align: center;padding-top: 20px;font-weight: normal;line-height: 110px;}
.zhenshi .iphone-bg {width: 346px;height: 746px;background: url(../images/zs-img1.png) no-repeat;position: absolute;left: 50%;z-index: 2;margin-left: -173px;}
.zhenshi .swiper-container {margin-top: 82px;height: 540px;}
.zhenshi .ftitle {font-size: 32px;color: #333;text-align: center;font-weight: normal;margin-top: 190px;}

.haopingfoot{ width:100%;}
.haopingfoot img{ max-width:100%;}

.haopingimglist{ width:100%;}
.haopingimglist .ftitle {font-size: 32px;color: #333;text-align: center;font-weight: normal;margin-top: 60px;margin-bottom: 60px;}

.haopingimglistn{ width:1200px; margin:0 auto;}
.haopingimglistn ul li{ float:left; width:13.7%; margin:0.5% 0.25%;}
.haopingimglistn ul li h3{ width:100%;}
.haopingimglistn ul li img{ width:100%;}
.haopingimglistn ul li p{ font-size:14px; color:#333; text-align:center; line-height:30px;}

.hp_shipin{display: table;margin-bottom: 20px; width:100%;}
.list-item1{display: block;float:left;width: 576px;margin:0 1% 1%;position: relative;z-index: 1;height: 320px;background: #f0f0f0;text-align: center;padding: 10px 0;border-radius: 4px;}
.list-item1 p{font-size: 14px;font-weight: normal;text-align: center;color: #333;line-height: 25px;height: 50px;}