@charset "utf-8";
/* 初始化 */
::-moz-selection {background:#666;color:#fff;}
::selection {background: #666;color: #fff}
html,body{ width:100%; margin:0px; padding:0px; height:100%;}
html{ -webkit-text-size-adjust:none;}
body{ font: 14px/200% "微软雅黑", Arial, Helvetica; text-align:center; background-color:#fff;}
ul{ list-style:none; padding:0px; margin:0px;}
li{ padding:0px; margin:0px; border:0px;}
img{ border:0px; padding:0px; margin:0px;}
a{ text-decoration:none; color: inherit;}
input,select,button{ font-family: "微软雅黑";}
p{ margin:0; padding:0; line-height:1.8em;}
form{ padding:0; margin:0;}
.ret{ width:100%; height:100%; position:relative;}


/* 主框架 */
.g-flexview{ width:100%; max-width: 100%; position: relative; height: auto; min-height: 100vh;}
.m-navbar{ height: auto;}
.m-navbar::after{ display: none;}
.m-tabbar::after{ display: none;}
.g-scrollview{ overflow: initial; margin: 0;}
.g-scrollview:after{ display: none;}
.main{ width: 1440px; position: relative; text-align:left; margin:0 auto;}
.main-flex{ width: 1440px; position: relative; text-align:left; margin:0 auto; display: flex;}

.empty-tips{ width: 100%; line-height: 1.5em; padding: 100px 0; text-align: center;}

.m-cell-title{ padding: 12px; font-size: 14px;}
.m-cell::after{ display: none;}
.m-cell .cell-left{ font-size: 14px;}
.m-cell .cell-input{ font-size: 14px;}

.btn{ border-radius: 0; min-width: 110px; height: 40px; line-height: 40px; font-size: 14px; padding: 0 20px; cursor: pointer; transition: all .3s;}
.btn.plain{ background-color: #fff; border: 2px solid #000; line-height: 36px;}
.btn.round{ border-radius: 100px;}
.btn-primary{ background-color: #000;}
.btn-primary:hover{ background-color: #333;}
.btn-lg{ height: 46px; line-height: 46px;}
.btn-sm{ min-width: 80px; height: 26px; line-height: 26px; font-size: 12px; padding: 0 8px;}
.btn-hollow:after{ border: 4px solid #000; border-radius: 0;}
.btn-hollow:hover{ background-color: #000; color: #fff;}
.btn-block{ width: 100%; height: 46px; line-height: 46px; margin-top: 0; margin-bottom: 16px;}
.btn.disabled{ background-color: #ccc; color: #999;}

/* 顶部 */
header.m-navbar{ width:100%; height: 60px; position:relative; display:block; background-color: #f8f8f8;}
header.m-navbar.white{ background-color: #fff;}
header .logo{ width: auto; height: 60px; display: block;}
header .menu{ flex: 1; padding: 0 15px; display: flex; justify-content: flex-start;}
header .menu a{ width: 86px; height: 100%; padding: 15px 0; text-align: center; line-height: 30px; color: #333;}
header .menu a.active{ color: #000; font-weight: bold;}
header .menu a:hover{ animation: hover-ani .3s;}
@keyframes hover-ani {
  0%{ transform: translateY(0px);}
  50%{ transform: translateY(-3px);}
  100%{ transform: translateY(0px);}
}
header .lang{ height: 100%; padding: 12px; display: flex; line-height: 36px; color: #999;}
header .lang a{ width: 70px; text-align: center;}
header .lang a.active{ color: #000; font-weight: bold;}
header .lang span:before{content: '/';}
header .lang a:hover{ animation: hover-ani .3s;}
header .login{ padding: 12px 0; display: flex; text-align: center;}
header .login a{ width: 36px; height: 36px; line-height: 36px; font-size: 18px; position: relative; display: block; transform: translateY(0);}
header .login a.btn-user:before{ font-family: 'iconfont'; content: "\e617";}
header .login a.btn-cart:before{ font-family: 'iconfont'; content: "\e652";}
header .login a.btn-cart.adding{ animation-name: add-cart-ani; animation-duration: .2s;}
@keyframes add-cart-ani{
  0%{ transform: translateX(0);}
  50%{ transform: translateX(5px);}
  100%{ transform: translateX(0);}
}
header .login a:hover{ animation: hover-ani .3s;}
header .login .badge{ position: absolute; right: 0; top: 0px; font-size: 12px;}

.product-to-cart{ width: 40px; height: 40px; border-radius: 5px; position: fixed;}

/* 底部 */
footer{ width: 100%; height: 340px; background-color: #181a1e; text-align: center; padding-top: 40px;}
footer .logo{ width: 140px; height: 60px; display: block; margin: 0 auto;}
.footer-contact{ width: 100%; height: 122px; display: flex; padding: 0 70px; margin: 40px auto 26px auto;}
.footer-contact .item{ width: 100%; margin: 0 15px; height: 100%; display: flex; padding-right: 26px; background-color: #131418; border-radius: 5px; padding: 32px;}
.footer-contact .item .iconfont{ width: 44px; height: 44px; background-color: #2b2c30; color: #FFF; border-radius: 100px; text-align: center;}
.footer-contact .item .iconfont:before{ line-height: 44px; font-size: 22px;}
.footer-contact .item .info{ padding-left: 24px; flex: 1; height: 100%; position: relative; line-height: 32px;}
.footer-contact .item .info .title{ width: 100%; height: 32px; font-size: 26px; color: #fff; font-weight: bold;}
.footer-contact .item .info .desc{ width: 100%; height: 32px; font-size: 16px; color: #ddd;}
.copyright{ width: 100%; text-align: center; line-height: 32px; height: 32px; overflow: hidden; color: #bbb;}
.copyright a:hover{ color: #fff; text-decoration: underline;}

/* common */
.pageNum{ width:100%; text-align:center; line-height:40px; padding:20px 0;}
.pageNum a{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; min-width:40px; height:40px; padding:0 8px; color:#ccc; background-color:#eee; margin:0 6px 12px 6px; font-size:14px;-webkit-transition:all .2s linear;transition:all .2s linear;}
.pageNum a:hover{ color:#181a1e;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);box-shadow:0 5px 10px rgba(0,0,0,0.1);-webkit-transform:translate3d(0, -1px, 0);transform:translate3d(0, -1px, 0);}
.pageNum a.cur{ background-color:#333; color:#fff; border:1px solid #333;}

.banner{ width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: #f8f8f8; text-align: center; font-size: 45px; color: #333; font-weight: bold; text-indent: 4px; letter-spacing: 4px;}
.banner-product:before{ content: 'SHOPPING';}
.banner-news:before{ content: 'NEWS';}
.banner-store:before{ content: 'DEALER';}
.banner-about:before{ content: 'ABOUT US';}

.filter-box{ width: 100%; background-color: #f8f8f8; justify-content: space-between; padding: 34px 0; position: sticky; top: 0; z-index: 10; transition: padding .3s;}
.filter-box.sticky{ padding: 16px 0 10px 0;}
.filter-box .filter{ flex: 1; display: flex; justify-content: flex-start;}

.filter-box .selector{ width: 200px; height:38px; margin-left:10px; position:relative; display:block;cursor:pointer}
.filter-box .selector .text{ width: 100%; height: 100%; position: relative; display: block; background: url(../images/select-arrow.png) right center/auto 100% no-repeat; padding-left: 11px; padding-right: 36px; color:#666; font-size:14px; line-height:38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.filter-box .selector .text:hover{ animation: hover-ani .3s;}
.filter-box .selector ul{ position: absolute; top: 0; left: 0; width: 100%; background-color: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 0 10px rgba(50,50,50,.2); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all .3s;}
.filter-box .selector.open ul{ visibility: visible; opacity: 1; transform: translateY(0);}
.filter-box .selector li{ cursor:pointer; width: 100%; height:38px; position:relative; display:block; padding-left:11px; padding-right:36px; color:#666; font-size:14px; line-height:38px; overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis; transition: all .3s;}
.filter-box .selector li:hover{ background-color:#666; color:#fff}
.filter-box .selector li.active{ background-color:#333; color:#fff}

.filter-box .filter .line{ width: 1px; height: 24px; position: relative; top: 4px; background-color: #ddd; margin: 0 16px;}

.search-input{ width: 332px; height: 100%; border: 1px solid #000; padding: 0 4px; display: flex; position: relative; display: flex;}
.search-input:before{ width: 30px; height: 100%; display: block; font-family: iconfont; content: "\e65a"; color: #000; font-size: 18px; text-align: center;}
.search-input input{ flex: 1; background: none; border: 0; display: block;}
.search-input .btn-clear{ display: none;}
.search-input .btn-clear:before{ content: '×'; padding: 0 4px;}

.main-nav{ width: 100%; background-color: #f8f8f8; display: flex; justify-content: center; text-align: center; color: #000; padding-left: 20px; box-sizing: border-box; position: relative;}
.main-nav a{ display: block; padding: 15px 25px; line-height: 30px; font-size: 16px; text-indent: 1px; letter-spacing: 1px; position: relative;}
.main-nav a:hover{ animation: hover-ani .3s;}
.main-nav .nav-active{ width: 37px; height: 6px; position: absolute; left: 0; bottom: 9px; background: url(../images/main-nav-active.png) center center/100% 100%; transition: transform .6s; will-change: transform; transform: translateX(50vw); display: none;}
.main-nav .space{ width: 20px; height: 60px; line-height: 60px; display: block; transition: left .2s;}
.main-nav .space:before{ content: '/';}

.path-bar{ width: 100%; font-size: 16px; line-height: 2em; padding: 34px 0; color: #000; text-align: left;}
.path-bar a{ color: #999; padding: 0 4px;}
.path-bar a:hover{ color: #000;}
.path-bar span{ color: #000; padding: 0 4px;}
.path-bar span.space{ color: #999; }
.path-bar span.space:before{ content: '/';}

/* home */
.swiper-home{
  --swiper-pagination-bullet-inactive-color: #bfab8e;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
  user-select:none;
}
.swiper-home{ width: 100%; height: calc(100vw/1920*800); margin-bottom: 44px;}
.swiper-home .swiper-slide{ width: 100%; height: 100%; background-size: cover;}

.home-about-box{ width: 100%; height: 640px; margin: 48px auto; position: relative; background-color: #f8f8f8; display: flex;}
.home-about-img{ width: calc(100vw/1920*740); height: 100%; background-position: right center; background-size: auto 100%; background-repeat: no-repeat;}
.home-about-info{ flex: 1; padding-left: 76px; padding-top: 80px; color: #333; text-align: left;}
.home-about-1{ line-height: 36px; font-size: 14px;}
.home-about-1:before{ content: 'ABOUT US';}
.home-about-2{ line-height: 62px; font-size: 50px; font-weight: bold; margin-bottom: 22px;}
.home-about-3{ width: 100%; max-width: 692px; line-height: 28px; height: 84px; overflow: hidden; margin-bottom: 16px; color: #666; font-size: 12px;}
.data-box{ max-width: 560px; width: 100%; display: flex;}
.data-item{ width: 100%; padding-right: 20px;}
.data-item .title{ width: 100%; height: 60px; margin-bottom: 7px; line-height: 30px; overflow: hidden; font-size: 18px; color: #000;}
.data-item .desc{ width: 100%; height: 168px; line-height: 24px; overflow: hidden; color: #000; font-size: 12px; color: #666;}
.btn-more{ width: 104px; height: 32px; border: 1px solid #e6e6e6; background-color: #fff; line-height: 30px; text-align: center; color: #000; font-size: 10px; display: block; position: relative; overflow: hidden;}
.btn-more:before{ width: 0; height: 100%; background-color: #e6e6e6; position: absolute; left: 0; top: 0; display: block; content: ''; transition: all .3s; opacity: 0;}
.btn-more:hover:before{ width: 100%; opacity: 1;}
.btn-more:after{ content: 'More'; position: relative;}

.home-news-list{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 32px 0;}
.home-news-list .item{ width: 460px; height: 356px; margin: 0 10px; position: relative;}
.home-news-list .item .img{ width: 100%; height: 196px; display: block; margin-bottom: 24px; position: relative; overflow: hidden; transition: all .6s ease;}
.home-news-list .item .img img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all 1.2s ease;}
.home-news-list .item:hover{ z-index: 1;}
.home-news-list .item:hover .img{ transform: scale(1.05)}
.home-news-list .item:hover .img img{ transform: scale(1.1)}
.home-news-list .item .title{ width: 100%; height: 48px; line-height: 24px; color: #333; font-size: 16px; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.home-news-list .item .posttime{ width: 100%; height: 56px; line-height: 56px; color: #000; font-size: 10px; position: relative;}

.partner-box{ width: 100%; height: 210px; margin-bottom: 90px;}
.swiper-partner{
  --swiper-pagination-bullet-inactive-color: #bfab8e;
  --swiper-pagination-color: #999;
  --swiper-pagination-bullet-inactive-opacity: 1;
}
.swiper-partner{ width: 100%; height: 100%; margin-bottom: 44px;}
.swiper-partner .swiper-slide{ width: 100%; height: 148px; background-size: cover; background-color: #f8f8f8; border-radius: 5px;}

.home-map-box{ width: 100%; height: 350px; display: flex; background-color: #ebc42a;}
.home-map-box .l{ width: 50%; height: 100%; display: flex; justify-content: flex-end;}
.home-map-box .contact-info{ width: 100%; max-width: 720px; min-width: 500px; height: 100%; padding: 94px 30px 0 30px; color: #000; text-align: left;}
.home-map-box .contact-info .title{ width: 100%; line-height: 60px; margin-bottom: 16px; font-size: 30px; font-weight: bold;}
.home-map-box .contact-info .desc{ width: 100%; line-height: 40px; font-size: 16px;}
.home-map-box .r{ width: 50%; height: 100%; overflow: hidden; position: relative;}
.home-map-box .r #map{ width: 100%; height: 500px; background-color: #f3f3f3; position: relative; top: -75px;}

/* product */
.product-list{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 32px 0;}
.product-list .item{ width: 340px; height: 468px; margin: 0 10px 15px 10px; position: relative; transition: all .6s ease;}
.product-list .item .img{ width: 340px; height: 340px; display: block; box-sizing: border-box; border: 2px solid #ddd; position: relative; transition: all .6s ease; transform-origin: center center; overflow: hidden;}
.product-list .item .img img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all 1.2s ease;}
.product-list .item:hover .img{ transform: scale(1.05)}
.product-list .item:hover .img img{ transform: scale(1.1)}
.product-list .item .info{ width: 100%; padding: 16px 7px 0 7px; text-align: left; position: relative;}
.product-list .item .info .title{ width: 100%; height: 58px; padding: 5px 0; line-height: 24px; font-size: 18px; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.product-list .item .info .price{ width: 100%; height: 24px; line-height: 24px; font-size: 16px; color: #ab4a35;}
.product-list .item .info .price:before{ content: '¥';}
.product-list .item .info .brand{ width: 100%; height: 20px; line-height: 20px; font-size: 12px; color: #999; position: relative;}
.product-list .item .info .brand:after{ width: 22px; height: 100%; font-size: 20px; font-family: 'iconfont'; content: "\eb8a"; text-align: center; position: absolute; right: 0; top: 0; transition: all .6s; opacity: 0; transform: translateX(-8px);}
.product-list .item:hover .info .brand:after{ transform: translateX(0); opacity: 1;}

.product-main{ width: 1180px; margin: 0 auto; padding-top: 6px;}
.product-detail{ width: 100%; display: flex; padding: 8px 0;}
.swiper-thumbs{ width: 110px; height: 500px; margin: 0 24px 0 6px;}
.swiper-thumbs .swiper-slide{ width: 110px; height: 110px; background-size: cover; box-sizing: border-box;}
.swiper-thumbs .swiper-slide-thumb-active{ border: 1px solid #0e1123;}

.swiper-imgs{ width: 500px; position: relative; margin: 0;}
.swiper-imgs .swiper-slide{ width: 500px; height: 500px; background-size: cover;}

.product-info{ flex: 1; padding: 24px 0 0 48px; text-align: left;}
.product-info .title{ width: 100%; line-height: 24px; font-size: 20px; color: #000;}
.product-info .price{ width: 100%; line-height: 24px; font-size: 20px; color: #c00200; margin: 16px 0;}
.product-info .price:before{ content: '¥';}
.product-info .preview{ width: 100%; line-height: 32px; color: #666; font-size: 14px; padding-bottom: 24px;}

.product-info .selector{ width:100%; margin-bottom:10px; position:relative; display:block; text-align:left; display: flex;}
.product-info .selector .textLeft{ width:50px; line-height:40px; height:40px; color:#000; font-size:14px;}
.product-info .selector .textRight{ flex: 1; position:relative; display:block; }
.product-info .selector .textRight ul{ width: 100%; display: flex; flex-wrap: wrap;}
.product-info .selector .textRight li{ border: 2px solid #f1f1f1; margin-right: 6px; margin-bottom: 6px; position: relative; display: block; cursor: pointer; line-height: 38px; width: 59px; text-align: center; color: #666; background-color: #f1f1f1; border-radius: 100px;}
.product-info .selector .textRight li:hover{ border: 2px solid #0e1123; color: #0e1123;}
.product-info .selector .textRight li.cur{ border: 2px solid #0e1123; color: #0e1123;}
.product-info .selector .textRight li.cur .overlay{ display: block}
.product-info .selector .textRight li.oss{ border: 2px dashed #ccc; cursor: no-drop; color: #ccc; display: none;}
.product-info .selector .amount{ border: 1px solid #ddd; height: 46px; position: relative; display: block; display: flex; justify-content: flex-start; background-color: #fff; margin-right: 20px;}
.product-info .selector .amount .btn{ width: 44px; height: 44px; text-align:center; line-height: 44px; color:#000; font-size:20px; font-weight:bold; cursor:pointer; min-width: auto; padding: 0;}
.product-info .selector .amount .input{ width: 44px; height: 44px; border:0; line-height: 44px; text-align:center; font-size:12px; color:#000; float:left; cursor:pointer; }
.product-info .selector .amount .text{ height:30px; float:left; color:#666; font-size:14px; line-height:30px; margin-left:10px;}
.product-info .selector .btn-hollow{ margin-right: 20px;}

.product-info .contact{ width: 100%; font-size: 14px; line-height: 2.5em; color: #999; padding-top: 20px;}
.product-info .contact span{ color: #000;}
.product-info .contact a:hover{ color: #000;}

.product-content{ width: 100%; text-align: left;}
.product-content .tabs{ width: 100%; line-height: 56px; border-bottom: 1px solid #ddd; display: flex; justify-content: flex-start;}
.product-content .tabs .tab{ min-width: 72px; height: 100%; margin-right: 20px; color: #999; text-align: center; cursor: pointer;}
.product-content .tabs .tab.active{ color: #000; font-weight: bold;}
.product-content .tabs .tab.active:after{ width: 100%; bottom: 0; height: 2px; background-color: #000; display: block; content: '';}
.product-content .tabs-content{ padding: 30px 8px; width: 100%;}
.product-content .tabs-content .content{ display: none;}
.product-content .tabs-content .content:first-child{ display: block;}

.amountControl{ display:inline-block; width:96px; text-align:center; font-size:18px; line-height:32px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.amountControl div{ width:32px; height:32px; float:left; background-color:#ccc; color:#fff; cursor:pointer;}
.amountControl input.amount{ width:32px; height:32px; line-height:24px; background-color:#fff; border:0; text-align:center; font-size:14px; outline:none; float:left; display:block; padding:0; margin:0;}

/* news */
.news-list{ width: 100%; padding: 32px 0; display: flex; flex-wrap: wrap;}
.news-list .item{ width: 694px; height: 456px; margin: 0 13px 60px 13px; position: relative;}
.news-list .item .img{ width: 100%; height: 296px; display: block; margin-bottom: 24px; position: relative; overflow: hidden; transition: all .6s ease;}
.news-list .item .img img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: all 1.2s ease;}
.news-list .item:hover{ z-index: 1;}
.news-list .item:hover .img{ transform: scale(1.05)}
.news-list .item:hover .img img{ transform: scale(1.1)}
.news-list .item .title{ width: 100%; height: 48px; line-height: 24px; color: #333; font-size: 16px; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news-list .item .posttime{ width: 100%; height: 56px; line-height: 56px; color: #000; font-size: 10px; position: relative;}

.news-detail{ width: 760px; margin: 0 auto 46px auto; padding-top: 20px; padding-bottom: 80px; text-align: left;}
.news-info{ width: 100%; padding-top: 24px; padding-bottom: 34px; position: relative;}
.news-info:after{ width: 64px; height: 2px; background-color: #ddd; display: block; content: ''; position: absolute; left: 0; bottom: 0;}
.news-info .title{ width: 100%; line-height: 36px; font-size: 26px; margin-bottom: 12px; color: #333;}
.news-info .posttime{ width: 100%; line-height: 28px; font-size: 14px; color: #999;}
.content{ width: 100%; min-height: 400px;}
.content img{ max-width: 100%;}
.news-ctrl{ width: 60px; position: fixed; bottom: 60px; left: 50%; margin-left: 432px; z-index: 10;}
.news-ctrl .ctrl{ width: 60px; height: 60px; line-height: 56px; margin-top: 16px; border: 2px solid #ddd; border-radius: 100px; color: #000; background-color: #fff; cursor: pointer;}
.news-ctrl .ctrl:before{ font-family: 'iconfont'; font-size: 26px;}
.news-ctrl .back-to-list:before{ content: "\e639";}
.news-ctrl .back-to-top:before{ content: "\e64a";}
 
/* store */
.store-search-bg{ width: 100%; padding: 8px 0; background-color: #f8f8f8; display: flex; justify-content: center;} 
.store-list{ width: 100%; padding: 20px 170px; min-height: 500px; box-sizing: border-box;}
.store-list .item{ width: 100%; padding: 14px 18px; border-bottom: 2px solid #f2f2f2;}
.store-list .item .keywords{ display: none;}
.store-list .item .province{ width: 100%; line-height: 40px; margin: 18px 0; color: #000; font-size: 22px; font-weight: bold;}
.store-item{ width: 100%; margin-bottom: 26px; display: flex; visibility: visible; opacity: 1; overflow: hidden; text-align: left;}
.store-item.hide{ visibility: hidden; opacity: 0; height: 0; margin: 0;}
.store-item .info{ flex: 1; padding-right: 40px;}
.store-item .info .row{ width: 100%; line-height: 26px; font-size: 14px; color: #999;}
.store-item .info .row span{ color: #333; padding-right: 12px;}
.store-item .btn-in{ width: 232px; display: flex; justify-content: space-between; padding-top: 6px;}
.store-item .term{ display: none;}
.store-item .imgs{ display: none;}

.dialog-bg{ width:100%; height:100%; position:fixed; top:0; left:0; background-color: rgba(0,0,0,.9); z-index:99; visibility: hidden;}
.dialog-bg.show{ visibility: visible; animation-name: fadeIn; animation-duration: 200ms;}

.dialog{ width: 1000px; height: 100%; padding: 30px; background-color: #fff; position: fixed; left: 50%; margin-left: -500px; top: 20px; height: auto; z-index: 100; visibility: hidden;}
.dialog.show{ visibility: visible; animation-name: fadeIn; animation-duration: 200ms;}
.dialog .btn{ transition: none;}

.dialog-map{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; margin: 0; padding: 0;}
.baidu-map{ width: 100%; height: 100%;}
.btn-dialog-close{ position: fixed; left: 18px; top: 22px; text-indent: 2px; letter-spacing: 2px;}
.btn-dialog-close:before{ width: 42px; height: 42px; margin-right: 8px; font-family: 'iconfont'; content: '\e63e';}

.dialog-cert{ top: 0; height: 100%; padding: 20px 0; background: none;}
.dialog-cert .tips{ display: none;}
.poster-output{ width: auto; height: 100%; display: block; margin: 0 auto; position: relative; margin-bottom: 20px;}

.canvas{ width: 3508px; height: 4961px; overflow: hidden; position: fixed; left: 0; top: -5000px;}
.poster{ width: 100%; height: 100%; position: relative; line-height: 80px; color: #000; font-size: 50px; text-align: left;}
.poster .cert{ width: 100%; height: 100%rem; position: absolute; left: 0; top: 0;}
.poster .storename{ position: absolute; left: 1183px; top: 1721px;}
.poster .address{ position: absolute; left: 1285px; top: 1942px;}
.poster .address.sm{ font-size: 40px;}
.poster .authcode{ position: absolute; left: 1252px; top: 2954px;}
.poster .y{ height: 149px; position: absolute; left: 2210px; top: 2954px;}
.poster .m{ height: 62px; position: absolute; left: 2394px; top: 2954px;}
.poster .d{ height: 62px; position: absolute; left: 2502px; top: 2954px;}
.authbrand-list{ width: 1854px; position: absolute; left: 50%; margin-left: -927px; top: 3330px; display: flex; justify-content: center; flex-wrap: wrap;}
.authbrand-list .item{ width: auto; padding: 0 60px; height: 180px;}
.authbrand-list .item img{ width: auto; height: 100%;}

.dialog-output .cell-input{ text-align: right; position: absolute; right: 0; top: 0;}
.dialog-output .cell-left{ font-weight: bold; color: #000;}

.authbrand-selector{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 20px;}
.authbrand-selector .item{ width: auto; padding: 0 10px; margin: 10px; height: 90px; position: relative;}
.authbrand-selector .item img{ width: auto; height: 100%;}
.authbrand-selector .item.active:after{ width: 100%; height: 100%; border: 4px solid #000; display: block; content: ''; position: absolute; left: 0; top: 0;}

.cert-ctrl{ position: fixed; left: 50%; margin-left: 500px; top: 20px;}
.cert-ctrl .ctrl{ width: 60px; height: 60px; line-height: 60px; display: block; background-color: #fff; border-radius: 100px; text-align: center; color: #000; margin-bottom: 12px;}
.cert-ctrl .ctrl:before{ font-family: 'iconfont'; font-size: 24px;}
.cert-ctrl .poster-download:before{ content: '\e603';}
.cert-ctrl .dialog-close:before{ content: '\e644';}

/* about */
.about-content{ padding: 40px; width: 100%; min-height: 600px;}
.about-content img{ max-width: 100%;}

/* team */
.team-box{ width: 100%; position: relative;}
.team-box:before{ width: 100%; height: 360px; background-color: #ebc42a; display: block; content: ''; position: absolute; left: 0; top: 0;}
.team-box .main{ padding: 0 40px;}
.swiper-team{ width: 100%; position: relative; margin-bottom: 40px; user-select:none;}
.team-main{ width: 100%; display: flex; flex-wrap: wrap; position: relative; padding-bottom: 20px;}
.team-main .info{ width: 45%;}
.team-main .img{ width: 55%;}
.team-main img{ width: 100%; height: auto;}
.swiper-team .swiper-button-prev{ width: 32px; height: 32px; color: #000; background-color: #fff; border: 1px solid #ccc; border-radius: 100px; left: 6px; top: 400px; margin: 0; transition: all .3s;}
.swiper-team .swiper-button-prev:after{ font-size: 14px;}
.swiper-team .swiper-button-prev:hover{ background-color: #000; color: #fff; border-color: #000;}
.swiper-team .swiper-button-next{ width: 32px; height: 32px; color: #000; background-color: #fff; border: 1px solid #ccc; border-radius: 100px; left: 56px; top: 400px; margin: 0; transition: all .3s;}
.swiper-team .swiper-button-next:after{ font-size: 14px;}
.swiper-team .swiper-button-next:hover{ background-color: #000; color: #fff; border-color: #000;}

/* contact */
.contact-wrap{ width: 826px; margin: 0 auto; padding: 52px 0; text-align: left;}
.contact-info{ width: 100%; color: #000;}
.contact-info .title{ width: 100%; line-height: 64px; font-size: 35px;}
.contact-info .desc{ width: 100%; padding: 12px 0 26px 0; font-size: 16px; line-height: 28px;}
.contact-map{ width: 100%; height: 258px; position: relative; overflow: hidden;}
.contact-map #map{ width: 100%; height: 358px; position: relative; top: -50px;}
.contact-wrap .tips{ width: 100%; font-size: 14px; color: #999; line-height: 1.4em; padding: 20px 0;}

.contact-form{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px; color: #000;}
.contact-form .form-cell{ width: 406px; padding-bottom: 8px; position: relative;}
.contact-form .form-cell.block{ width: 100%;}
.contact-form .form-cell label{ width: 100%; display: block; line-height: 38px;}
.contact-form .form-cell input{ width: 100%; height: 42px; border: 1px solid #000; padding: 0 8px;}
.contact-form .form-cell textarea{ width: 100%; height: auto; min-height: 120px; border: 1px solid #000; padding: 4px 8px;}
.contact-form .form-cell .codeimg{ position: absolute; right: 11px; top: 48px;}
.contact-wrap .btn-submit{ width: 274px; height: 54px;}
.contact-form .form-cell input:focus,.contact-form .form-cell textarea:focus{ animation: input-ani 1.6s infinite;}
@keyframes input-ani{
  0%{ box-shadow: 0 0 5px rgba(0,0,0,.0);}
  50%{ box-shadow: 0 0 5px rgba(0,0,0,.6);}
  100%{ box-shadow: 0 0 5px rgba(0,0,0,.0);}
}

/* login */
.login-field{ width: 100%; height: 900px; position: relative; display: block; background: center center/cover no-repeat fixed;}
.login-field .main{ display: flex; justify-content: flex-end;}
.login-wrap{ width: 382px; padding: 16px 26px; background-color:#fff; margin-top:80px; margin-bottom:40px; position: fixed; box-shadow: 0 0 20px rgba(50,50,50,.2);}
.login-wrap .topic{ width:100%; height:44px; line-height:44px; position:relative; font-family:微软雅黑; font-size:27px; color:#000;}
.login-wrap .link{ position:absolute; top:16px; right:0; line-height:20px; font-size:14px; color:#666; font-family:宋体;}
.login-wrap .link a{ color:#000;}
.login-wrap .link a:hover{ text-decoration:underline;}

.login-form{ padding-top: .2rem;}
.login-form .cell-item{ padding: 0; background-color: #f2f2f2; margin-bottom: 16px; padding: 0 12px; height: 42px;}
.login-form .cell-input{ height: 100%; font-size: 14px;}
.login-form .cell-input:-webkit-autofill{ box-shadow: 0 0 0 1000px #f2f2f2 inset !important;}
.login-form .cell-right{ width: 100%; height: 100%; min-height: auto; padding-right: 0;}
.login-form .cell-item::after{ display: none;}
.login-form::after{ display: none;}

.login-wrap .codeimg{ position:absolute; top:10px; right:10px; cursor:pointer;}
.login-wrap .forget{ width:100%; height:32px; padding-top:10px; color:#666; font-size:14px;}
.login-wrap .forget .l{ float:left;}
.login-wrap .forget .r{ float:right;}
.login-wrap .forget a{ color:#000;}
.login-wrap .forget a:hover{ text-decoration:underline;}
.login-wrap.infoIn{ float:left; margin:0 auto;}
.login-wrap.subIn{ float:left; margin-left:60px}
.login-wrap.centerIn{ float:none; margin:0 auto; width:560px}
.wx-bind{ width: 118px; height: 24px; background-image: url(../images/wx-bind.png); display: block;}

/* member */
.member-header{ width: 100%; background-color: #fff; padding: 30px 0;}

.userinfo{ text-align:left; background-color: #fff; color: #333; font-size: 12px; width: 500px;}
.userinfo .account{ font-size: 16px; font-weight: bold;}
.userinfo .rights{ text-align: left;}
.userinfo .rights span{ color: #c00;}
.member-header .submenu{ flex: 1; padding-left: 50px; display: flex; justify-content: flex-end;}
.member-header .submenu a{ width: 124px; height: 40px; line-height: 38px; border: 1px solid #ddd; display: flex; margin-left: 14px; transition: all .3s;}
.member-header .submenu a .iconfont{ width: 38px; height: 38px; text-align: center; display: inline-block; vertical-align: top; margin-right: 8px;}
.member-header .submenu a:hover{ border-color: #aaa; background-color: #f2f2f2;}

.member-body{ width: 100%; background-color: #f8f8f8; min-height: 600px; padding: 30px 0;}

.member-form{ width: 500px; margin: 0 auto;}

/* order */
.order-list{ width: 1100px; background-color: #fff; margin: 0 auto; padding: 30px;}
.order-list th{ height: 42px; text-align:center; line-height: 42px; color:#000; font-size:12px; font-weight:normal}
.order-list .item{ width: 100%; position:relative; border: 2px solid #f8f8f8; border-radius: 4px;}
.order-list .item .tt{ color:#999; font-size: 14px; line-height: 42px; padding: 0 12px; background-color: #f8f8f8;}
.order-list .item .tt span{ padding-right:30px;}
.order-list .item .tt strong{ color: #000; font-weight: normal;}
.order-list .item table{ width: 100%; position:relative; display:block;}
.order-list .item table tr{ position:relative; display:block; width: 100%; border-bottom: 2px solid #f8f8f8;}
.order-list .item table td{ position:relative;}
.order-list .item .product-img{ width:80px; height:80px; display:block; position:relative;}
.order-list .item .text{ height:96px; line-height:96px; text-align:center; color:#3A3A3A; font-size:14px; overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
.order-list .item .text a:hover{ color:#B8080D}
.order-list .item .cate{ height:96px;text-align:center; color:#3A3A3A; font-size:14px; overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}

.order-list .order-footer{ width: 100%; line-height: 40px; position:relative; display:block; display: flex; padding: 10px 12px 30px 12px;}
.order-list .order-footer .pz{ width: 50%; height: 40px; font-size: 16px; text-align: left; color:#000; line-height:40px;}
.order-list .order-footer .pz span{ color:#c30;}
.order-list .order-footer .btn-in{ width: 50%; display: flex; justify-content: flex-end;}
.order-list .order-footer .btn-in .btn{ margin-left: 12px;}


/* 付款提示框 */
.payWaitBg{ width:100%; height:100%; background-color:#fff; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; position:fixed; top:0; left:0; display:none;}
.payWait{ width:500px; height:100px; padding:40px 20px; position:fixed; top:50%; left:50%; margin-left:-200px; margin-top:-100px; background-color:#fff; text-align:left; border:4px solid #111; font-size:14px; line-height:1.8em; border-radius:10px; box-shadow:0 0 20px #111; text-align:center; display:none;}
.payWait .ret{ width:100%; height:100%; position:relative;}
.payWait .btnIn{ width:100%; position:absolute; bottom:0; left:0; text-align:center;}
.payWait .btn{ padding:8px 16px; height:24px; line-height:24px; border:1px solid #999; background-color:#fff;}
.payWait .btn:active{ background-color:#999; color:#fff;}
.payWait .btn.btn-warning{ background-color:#F4D720; border:1px solid #e3c610;}
.payWait .btn.btn-warning:active{ background-color:#e3c610;}