/*common*/
/* 版心 1200 px, 版心内边框 20 */
html, body {
font-family: Helvetica, "Pingfang SC", "Microsoft YaHei", STHeiti, Verdana, Arial, Tahoma, sans-serif;
font-size: 1rem;
background: #fff;
}
*{
margin: 0 auto;
text-align: center;
}
a, img {
text-decoration: none;
border:0px;
display: block;
color:#000;
transition: color .3s;
}
li{list-style:none;list-style-type:none;}
.display-none{
display:none;
}
.button-primary {
color: #fff;
text-indent: 4px;
cursor: pointer;
border-radius: 21px;
background: #2DC84D;
letter-spacing: 3px;
margin-top: 40px;
height: 42px;
line-height: 42px;
width: 140px;
font-size: 16px;
transition: background .5s;
}
.button-primary:hover{
background: #2DCF4E;
}
.button-primary.orange {
background: #ff9900;
}
.button-primary.orange:hover{
background: #fd9702;
}
.button-primary.space{
border-radius: 10px;
height: 38px;
line-height: 38px;
width: 130px;
font-size: 16px;
background: none;
color: #bbb;
border:1px solid #bbb;
transition: color .5s;
}
.button-primary.space:hover{
color: #ccc;
border:1px solid #ccc;
}
.width-full {
width:100%;
}
/*header*/
.header{
/*position:fixed;*/
background:#fff;
width:100%;
height:70px;
min-width:1200px;
opacity:.8;
filter:alpha(opacity=80);/* IE 4-9 */
z-index:2;
}
.header a{
color:#000;
}
.header a:hover{
color:#00aa13;
}
.nav{
width:1200px;
height:auto;
}
.logo-box{
float:left;
width:145px;
height:100%;
}
.logo{
margin-top:19px;
width:145px;
height:31px;
background:url(logo.png) no-repeat;
}
#nav-toggle{
margin-top:20px;
margin-right:20px;
cursor: pointer;
width: 70px;
height: 55px;
float: right;
overflow: hidden;
display: none;
}
#nav-toggle-one,#nav-toggle-two,#nav-toggle-three{
background: #fff;
width: 65px;
height: 10px;
border-radius: 5px;
}
.nav-list{
color:#000;
float:left;
margin-left:150px;
}
.nav-cell{
cursor:pointer;
float:left;
font-size:14px;
font-size:0.875rem;
margin-top:25px;
margin-left:100px;
width:auto;
height:25px;
}
.nav-cell.active{
color: #00aa13;
}
.nav-user{
float:right;
}
.nav-user .nav-cell{
margin-left:30px;
}
.user-console{
display:none;
}
.nav-cell.reg {
color: #fff;
margin-top:21px;
background: #00aa13;
width:80px;
height:25px;
line-height: 25px;
font-size:14px;
font-size:0.825rem;
}
.nav-cell.reg:hover {
color: #ffffee;
}
.header-padding{
padding-top:70px;
}
/*banner*/
.banner-box{
width:100%;
min-width:1200px;
height:359px;
clear: both;
}
.banner, .swiper-slide{
background-repeat:no-repeat;
background-position:center;
height:100%;
}
.swiper-txt{
margin-top: 175px;
letter-spacing: 1px;
width: 370px;
font-size: 14px;
}
.swiper-txt.two{
color: #000;
}
.mid-pic-top{
margin-top:45px;
}
.mid-pic{
height:600px;
}
.row-white{
margin-top:30px;
width:100%;
min-width:1200px;
height:auto;
clear: both;
}
.row-gray{
margin-top:60px;
padding-top: 20px;
padding-bottom:60px;
background: #f8f8f8; /*fafafa*/
width:100%;
min-width:1200px;
height:auto;
clear: both;
}
.row-title{
color:#444444;
font-size:30px;
font-size:1.875rem;
padding-top:35px;
margin-bottom:40px;
letter-spacing: 1px;
}
.row-title-gray{
color:#777;
}
.no-padding-top{
padding-top: 0;
}
.row-title-price{
color:#00aa13;
font-size:30px;
font-size:1.875rem;
}
.row-subtitle{
color:#595959;
font-size:14px;
font-size:0.875rem;
}
.row-three-title{
color:#696969;
margin-top:40px;
margin-bottom:25px;
}
.row-shop-list{
overflow: hidden;
width:900px;
height:auto;
}
.row-shop-cell{
float:left;
width:25%;
height:auto;
}
.icon-right{
display: inline-block;
float: left;
background:url(icon-right.png) no-repeat;
width:22px;
height:30px;
}
.row-cell-detail{
float: left;
color: #999;
font-size: 14px;
height: 30px;
font-size: 0.875rem;
}
.row-made-list{
overflow: hidden;
margin-top:50px;
margin-bottom:100px;
width:1200px;
}
.row-made-cell{
float:left;
width:50%;
}
.row-made-img{
}
.item-list{
margin-top:60px;
width:1200px;
overflow: hidden;
}
.item-cell{
float:left;
width:33.33%;
height:auto;
}
.item-img{
max-height:100%;
max-width:100%;
}
.item-subject{
margin:30px 0px 30px 0px;
font-size:16px;
font-size:1rem;
width:100%;
}
.item-content{
color:#656565;
font-size:14px;
font-size:0.875rem;
line-height:30px;
}
.bottom{
background-color: #4e494a;
background-repeat:no-repeat;
background-position:center;
background-image: url('bottom.png');
color:#bbb;
font-size: 14px;
margin-top: 60px;
height:286px;
}
.bottom-title{
padding-top: 60px;
padding-bottom: 20px;
letter-spacing: 2px;
font-size:30px;
}
.bottom-button{
width:370px;
}
.bottom-button-left{
margin-right: 100px;
}
.footer{
color:#bbb;
background: #2c2c2c;
letter-spacing: 0.6px;
width:100%;
min-width:1200px;
height:auto;
clear:both;
font-size:14px;
font-size:0.875rem;
}
.footer a{
color:#999;
}
.footer a:hover{
color:#bbb;
}
.footer-box{
width:1180px;
padding: 0px 10px 0px 10px;
height:auto;
position: relative;
}
.partner{
padding-top: 30px;
text-align: left;
}
.partner-logo{
height:100px;
}
.partner-img{
float:left;
margin:25px 58px;
width:120px;
height:50px;
}
.footer-mid{
height:150px;
margin-top: 20px;
}
.footer-nav{
float:left;
width:20%;
font-size:14px;
font-size:.825rem;
border-bottom:1px solifloat: left;d #292929;
height:125px;
line-height:35px;
}
.about-icon{
float:left;
margin-top: 5px;
width:23px;
height: 30px;
}
.about-txt{
float: left;
width: 200px;
text-align: left;
height: 35px;
margin-left: 8px;
line-height: 35px;
}
.tel{
background:url(about-icon01.png) no-repeat;
}
.qq{
background:url(about-icon02.png) no-repeat;
}
.cs{
width: 23px;
height: 30px;
background:url(about-icon03.png) no-repeat;
}
.footer-nav-cell{
text-align: left;
}
.footer-qrcode{
float:left;
width:auto;
margin-top:16px;
height:125px;
line-height:35px;
font-size:14px;
font-size:.825rem;
}
.qrcode-img{
background: #fff;
margin-left:85px;
margin-top:16px;
width:105px;
height:105px;
}
.qrcode-cs{
margin-left:80px;
}
.qrcode-text{
margin-top:15px;
margin-left:85px;
width:110px;
font-size:13px;
font-size:0.825rem;
}
.copyright{
color:#666;
font-size:12px;
font-size:0.75rem;
height:75px;
line-height:75px;
text-align: left;
}
.copyright a{
color:#666;
display:inline;
}
.copyright a:hover{
color:#666;
}
/* swiper 轮播 */
.swiper-pc{
display:block;
}
.pagination {
position: absolute;
width:100%;
bottom:20px;
}
.swiper-pagination-switch {
display: inline-block;
border-radius: 3px;
margin-right: 5px;
opacity: 0.8;
cursor: pointer;
border: 1px solid #999;
background: #ededed;
opacity: .3;
margin: 0 8px;
height: 3px;
width: 50px;
transition: width .2s;
}
.swiper-active-switch {
background: #ffffff;
border: 1px solid #efefef;
opacity: .9;
width: 60px;
}
.swiper-dynamic-links {
}
.swiper-dynamic-links a {
display: inline-block;
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
margin: 5px;
font-size: 12px;
text-decoration: none;
color: #333;
background: #eee;
}
/*侧边客服*/
.body-right{
position: fixed;
right: -88px;
bottom: 200px;
z-index: 99;
opacity: 1;
transition: all 0.5s ease-in-out;
border-radius: 2px 0 0 2px;
}
.body-right-cs{
padding:5px;
border: 1px solid #eee;
background: #fff;
text-indent: 0px;
letter-spacing: 2px;
width: 88px;
height: auto;
line-height: 22px;
font-size: 14px;
}
.body-right-img{
width: 88px;
height: 88px;
}
/*侧边客服内容*/
.right-cs-content{
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100%;
background: #fff;
z-index: 999;
transition: all 0.5s ease-in-out;
opacity: .9;
filter: alpha(opacity=90);
border: 1 solid #e5e5e5;
box-shadow: 0 1px 10px 0 rgba(0,0,0,.07);
}
.right-cs-open{
right: 0;
}
.right-cs-close{
font-size: 30px;
color: #aaa;
cursor: pointer;
float: right;
width: 60px;
height: 60px;
line-height: 60px;
}
.right-cs-qrcode-cs{
margin-top: 120px;
width: auto;
height: 125px;
line-height: 35px;
font-size: 14px;
font-size: .825rem;
}
.right-cs-content .qrcode-img {
margin-left: auto;
border: 1px solid #999;
}
.right-cs-content .qrcode-text{
margin-left: auto;
}
.right-cs-qrcode-oa{
margin-top: 50px;
}
.right-cs-work{
color: #696969;
margin-top: 40px;
margin-bottom: 25px;
width:100%;
}
.right-cs-tel{
color: #696969;
margin-bottom: 25px;
width:100%;
font-size: 28px;
}
.right-cs-qq{
letter-spacing: 1px;
}
/*用于矫正参数的css*/
.color-fff {
color: #fff;
}
.color-ccc {
color: #ccc;
}
.float-left{
float: left;
}
.margin-top-10{
margin-top:10px;
}
.margin-left-100{
margin-left: 100px;
}
.margin-top-20{
margin-top:20px;
}
.margin-bottom-20{
margin-bottom:20px;
}
.margin-top-120{
margin-top:120px;
}
.margin-top-140{
margin-top:140px;
}
.swiper-m{
display:none;
}