﻿
/***
   +----------------------------------------------------------------------
   | WFPHP Micromall [ WE ARE THE BEST. 2020-05-17 ]
   +----------------------------------------------------------------------
   | Copyright (c) 2009-2019 WForder.Com All Rights Reserved.
   +----------------------------------------------------------------------
   | Licensed ( http://www.wforder.com/about/?id=3 )
   +----------------------------------------------------------------------
   | Author: WENFEI <183712356@qq.com>
   +----------------------------------------------------------------------
***/
*{margin:0;padding:0;}
body{margin:0 auto;min-width:320px;max-width:760px;width:100%;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:16px;color:#333;text-align:left;}
em{font-style:normal;}
h1{padding:15px 0;font-size:28px;font-weight:400;text-align:center;}
h2{padding:0 10px;height:36px;line-height:36px;font-size:14px;font-weight:700;color:#4C4C4C;border-left:5px solid;border-color:#C00;background:#F2F2F2;}
h3 {font-size: 22px;color: #cc0000;padding-bottom: 8px;}
img{max-width: 100%;height: auto;border: 0;}
.redtxt{font-size: 20px;color: #CC0000;margin-left: 0px;font-weight: bold;}

/********** Layui **********/
.layui-form{font-size:14px;}
.layui-icon{vertical-align:bottom;vertical-align:middle\9;}
.layui-form-text .layui-form-label{padding-left:26px;}
.layui-form-label{width:70px;padding:9px 15px 9px 0px;}
.layui-input-block{margin-left:85px;}
.layui-carousel img{width:100%;}

/********** Public **********/
a.r:link,a.r:visited,.red{color:#F00;}
a.g:link,a.g:visited,.green{color:#090;}
a.b:link,a.b:visited,.blue{color:#09F;}
a.o:link,a.o:visited,.orange{color:#F60;}
.h50{height:50px;}
.h90{height:90px;}
.wrapper,.h50,.search,.goodscat,.divide strong,.toolbar{background:#FFF;}
.subbtn,.procontent,.comment,.comment li,h2{margin-bottom:10px;}
.wrapper{padding:0 10px;}
.logo{text-align:center}
.logo img{max-width:230px;height:auto;display:inline-block}
.search{position:fixed;left:50%;top:0;z-index:999;transform:translate(-50%,0);max-width:760px;width:100%;height:50px;}
.search form{position:relative;height:20px;margin:5px;padding:10px 5px;background:#F2F2F2;}
.search input{float:left;width:100%;height:20px;line-height:20px;background:#F2F2F2;border:none;}
.search button{position:absolute;top:10px;right:0;width:40px;height:20px;background:#F2F2F2;border:none;cursor:pointer;}
.search .layui-icon{font-size:20px;line-height:20px;color:#999;text-align:center;vertical-align:middle;}
.divide{position:relative;z-index:100;margin:20px 0 0;}
.divide strong{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:160px;height:25px;text-align:center;}
.toolbar{position:fixed;right:0;bottom:0;z-index:101;width:100%;height:50px;box-shadow:0px -1px 8px #CCC;}
.toolbar li{float:left;width:25%;height:36px;padding:7px 0;font-size:14px;text-align:center;}
.toolbar li a.current{color:#F03;}
.i-kefu{font-size:20px;}
.i-ser{margin-right:5px;font-size:22px;color:#CCC;}
.i-goto{margin-right:8px;font-size:28px;color:#090;}
.i-suc{margin-right:8px;font-size:48px;color:#090;vertical-align:middle;}
.i-alipay{margin-right:8px;font-size:48px;color:#00AAEE;vertical-align:middle;}
.i-wxpay{margin-right:8px;font-size:48px;color:#1AAD19;vertical-align:middle;}
.i-scan{margin-right:8px;font-size:22px;color:#1AAD19;vertical-align:middle;}

/********** Index **********/
.recpro,.goodslist{height:auto;overflow:hidden;padding-bottom:15px;}
.recpro dl,.goodslist dl{float:left;width:19%;height:auto;padding:10px 3%;}
.recpro dt,.goodslist dt{position:relative;width:100%;height:0;padding-bottom:100%;background:url('../image/loading.gif') center no-repeat;}
.recpro dt img,.goodslist dt img{position:absolute;width:100%;height:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.recpro dd.proname,.goodslist dd.proname{display:block;height:20px;padding-top:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.recpro dd.price,.goodslist dd.price{font-size:16px;font-weight:700;color:#F50;}
.recpro dd.price em,.goodslist dd.price em{margin-right:3px;}
.goodslist dd.price span{float:right;font-weight:400;font-size:13px;color:#777;}
.goodslist dl{width:44%;}

/********** GoodsList **********/
.goodscat{position:fixed;left:50%;top:50px;z-index:999;transform:translate(-50%,0);max-width:750px;width:100%;}
.empty{height:200px;padding-top:100px;font-size:20px;color:#DDD;text-align:center;}

/********** GoodsInfo goodsImg **********/
.proimg{margin-bottom:5px;}
.proimg img,.procontent img{max-width:100%;height:auto;}
.procontent p{line-height:2;margin-bottom:24px;text-align:justify;overflow-wrap:break-word;font-size:18px}

/********** GoodsInfo countDown **********/
.pricediv{height:50px;background:#F2F2F2;}
.saleprice{float:left;width:65%;height:50px;background:#C00;}
.saleprice strong{float:left;height:50px;margin:0 20px;font-size:30px;line-height:50px;color:#FF0;}
.saleprice strong em{margin-right:5px;font-size:18px;}
.saleprice span{display:block;float:left;height:32px;padding:9px 0;}
.saleprice span p{height:16px;color:#FFF;line-height:16px;}
.countdown{float:left;width:35%;height:40px;padding:5px 0;text-align:center;}
.countdown p{height:20px;line-height:20px;}

/********** GoodsInfo Title **********/
.title{padding:10px;font-size:20px;color:#000;line-height:1.8em;}
.service{height:36px;color:#666;}
.service li{float:left;width:25%;height:45px;font-size:14px;line-height:45px;text-align:center;}
.subbtn button{width:100%;height:45px;font-size:16px;}

/********** GoodsInfo Comment **********/
.comment{height:340px;overflow:hidden;}
.comment li{height:82px;padding:10px 15px;overflow:hidden;background:#FAFAFA;border:1px solid #F2F2F2;}
.comment li dt{height:20px;line-height:20px;margin-bottom:6px;}
.comment li dt span.a{float:left;padding:0 10px;color:#FFF;background:#F96;}
.comment li dt span.b{float:left;padding:0 10px;color:#FFF;background:#FC6;}
.comment li dt span.c{float:right;padding:0 10px;color:#FFF;background:#DDD;}
.comment li dd{margin-bottom:5px;line-height:1.5em;}
.comment li dd.b{color:#F90;}
.cmntbtn,.orderbtn{width:100%;}
.orderbtn{height:45px;font-size:16px;}

/********** GoodsInfo Order **********/
.frame li{display:inline-block;_zoom:1;*display:inline;margin:3px 5px 5px 0;}
.frame li a{display:inline-block;width:auto;height:auto;border:1px solid #E6E6E6;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.frame li a.txta{padding:3px 8px;}
.frame li a.imga{padding:3px;}
.frame li a.cur-pack,.frame li a.cur-size{border:2px solid #F90;color:#F40;padding:2px 7px;}
.frame li a.cur-color{border:2px solid #F90;color:#F40;padding:2px;}
.frame li img{width:75px;height:75px;margin-bottom:5px;}
.payment{display:flex;flex-direction:row;flex-wrap:wrap;}
.payment li{width:130px;height:44px;margin:0 8px 8px 0;}
.payment li a{display:block;width:120px;height:36px;padding:4px;border:1px solid #E6E6E6;}
.payment li a.cur-pay{border:2px solid #F90;padding:3px;}
.total{padding-top:7px;}
.total > a{display:block;float:left;width:26px;height:26px;font-size:16px;text-align:center;background:#F2F2F2;border:1px solid #E6E6E6;cursor:pointer;}
.total > a.dec{border-top-left-radius:4px;border-bottom-left-radius:4px;}
.total > a.lnc{border-top-right-radius:4px;border-bottom-right-radius:4px;}
.total input.total-input{float:left;width:50px;height:28px;padding:0;line-height:28px;text-align:center;border-width:1px 0;border-radius:0;}
.price{padding-top:5px;}
.price strong{height:26px;font:28px/26px Tahoma;font-weight:600;color:#F40;}
.price strong em.rmb{font:20px arial;font-weight:400;margin-right:5px;}
.price strong em.showinfo{margin-left:8px;color:#F00;vertical-align:middle;}
.layui-form-item .captcha-item{width:120px;margin-right:12px;display:inline-block;vertical-align:middle;}
.layui-form-item .layui-form-label + .captcha-item{margin-left:0;}
.layui-form-item #smscode{display:inline-block;vertical-align:middle;margin-top:0;}
.captcha-img img{vertical-align:middle;border:1px solid #E6E6E6;}

/********** GoodsInfo Area **********/
.city-picker-input{opacity:0!important;top:-9999px;left:-9999px;position:absolute;}
.city-picker-span{position:relative;display:block;outline:0;line-height:38px;cursor:pointer;}
.city-picker-span > .placeholder{color:#666;}
.city-picker-span > .arrow{position:absolute;top:50%;right:8px;width:10px;margin-top:-3px;height:5px;background:url('../image/arrow.png') -10px -25px no-repeat;}
.city-picker-span.open > .arrow{background-position:-10px -10px;}
.city-picker-span > .citytit > span{color:#333;border-radius:2px;}
.city-picker-span > .citytit > span:hover{background-color:#f1f8ff;}
.city-picker-dropdown{width:100%;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:999999;display:none;margin-bottom:20px;}
.city-select-wrap{border:1px solid #E6E6E6;border-top:0;}
.city-select-tab{border-bottom:1px solid #E6E6E6;background:#f5f5f5;font-size:13px;}
.city-select-tab > a{display:inline-block;padding:8px 22px;border-left:1px solid #E6E6E6;border-bottom:1px solid transparent;color:#4D4D4D;text-align:center;outline:0;text-decoration:none;cursor:pointer;font-size:14px;margin-bottom:-1px;}
.city-select-tab > a.active{background:#fff;border-bottom:1px solid #fff;color:#46A4FF;}
.city-select-tab > a:first-child{border-left:none;}
.city-select-tab > a:last-child.active{border-right:1px solid #E6E6E6;}
.city-select-content{width:100%;min-height:10px;background-color:#fff;padding:10px 15px;box-sizing:border-box;}
.city-select{font-size:13px;}
.city-select dl{line-height:2;clear:both;padding:3px 0;margin:0;}
.city-select dt{position:absolute;width:2.5em;font-weight:500;text-align:right;line-height:2;}
.city-select dd{margin-left:0;line-height:2;}
.city-select.province dd{margin-left:3em;}
.city-select a{display:inline-block;padding:0 10px;outline:0;text-decoration:none;white-space:nowrap;margin-right:2px;text-decoration:none;color:#333;cursor:pointer;}
.city-select a:hover,.city-select a:focus{background-color:#f1f8ff;border-radius:2px;color:#46A4FF;}
.city-select a.active{background-color:#46A4FF;color:#fff;border-radius:2px;}

/********** GoodsInfo Shipped **********/
.shipped{height:161px;overflow:hidden;}
.shipped ul{height:152px;overflow:hidden;}
.shipped li{height:20px;line-height:20px;margin-bottom:6px;padding:5px 10px;overflow:hidden;background:#FAFAFA;border:1px solid #F2F2F2;}
.shipped li span.a{float:right;padding:0 8px;color:#FFF;background:#6C6;}
.shipped li span.b{float:left;padding:0 8px;color:#FFF;background:#CCC;}
.shipped li span.c{float:left;padding:0 8px;font-family:Arial;}
.shipped li span.d{display:block;width:auto;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.shipped li span.d span{margin-left:5px;color:#999;}

/********** Orderbar **********/
.orderbar{position:fixed;left:50%;bottom:0;transform:translate(-50%,0);width:100%;height:50px;background:#F2F2F2;box-shadow:0px -1px 8px #CCC;}
.orderbar li{float:left;height:36px;padding:7px 0;font-size:14px;text-align:center;}
.orderbar li.a{width:30%;}
.orderbar li.b{width:18%;}
.orderbar li.c{width:35%;line-height:36px;background:#F93;}
.orderbar li.d{width:70%;line-height:36px;background:#F63;}
.orderbar li a{display:block;}
.orderbar li.c a,.orderbar li.d a{color:#FFF;}

/********** Gotop **********/
.gotop{display:none;position:fixed;right:10px;bottom:110px;z-index:999;width:36px;height:auto;overflow:hidden;}
.gotop a{display:block;width:36px;height:36px;}
.gotop i{font-size:36px;color:#999;}

/********** KefuLayer **********/
.kefulay{display:none;padding:15px;text-align:center;}
.kefulay p{font-size:14px;line-height:1.8em;}
.kefulay p img{margin-bottom:10px;padding:4px;border:1px solid #E6E6E6;}
.kefulay p em{font-family:Tahoma;font-weight:700;}

/********** GoodsInfo Copyright **********/
.copyright{padding:15px 0;line-height:2em;text-align:center;border-top:1px solid #F2F2F2;}

/********** Pay **********/
.paycode p{text-align:center;}
.paycode p.p{font-size:26px;font-weight:600;}
.paycode p.c{padding:20px 0;color:#F00;}
.paycode p.c img{max-width:270px;padding:3px;border:1px solid #E6E6E6;}
.paycode p.s{margin-bottom:20px;font-size:14px;color:#44B549;}
.paycode p.m{margin-bottom:30px;color:#999;}

/********** Return **********/
.return{padding-top:15px;border-top:1px solid #F2F2F2;}
.return ul{width:90%;height:auto;overflow:hidden;margin:0 auto;}
.return li{width:100%;height:auto;overflow:hidden;margin-bottom:5px;font-size:14px;line-height:1.7em;}
.return li span.l{float:left;width:30%;color:#999;text-align:right;margin-right:5%;}
.return li span.r{float:left;width:65%;color:#333;}
.return li span.r p{margin-bottom:8px;}
.return li span.r p span{margin-right:6px;padding:0 5px;color:#FFF;background:#CCC;}
.noresult{padding:60px 0;text-align:center;}

/********** Media **********/
@media screen and (max-width:450px){
    .saleprice strong{margin:0 10px;font-size:26px;}
    
    /* 验证码输入框移动端优化 */
    .layui-form-item .captcha-item{width:90px !important;}
    .layui-form-item #smscode{font-size:14px;padding:0 12px;}
}
@media screen and (max-width:375px){
    .saleprice strong{margin:0 5px;font-size:20px;}
    .city-picker-span{height:60px;line-height:1.6em;padding-right:20px;padding-top:7px;}
    .payment li{flex:auto;margin:0 0 10px 0;padding:0;}
    
    /* 验证码输入框小屏优化 */
    .layui-form-item .captcha-item{width:80px !important;}
    .layui-form-item #smscode{font-size:13px;padding:0 10px;}
}

/* 移动端通用优化 */
@media screen and (max-width:760px){
    /* 订单成功页按钮居中 */
    .success-btn{text-align:center;padding:0 15px;}
    .success-btn .layui-btn{max-width:400px;margin-left:auto;margin-right:auto;display:block;}
    
    /* 查询页面按钮居中 */
    .query-btn{text-align:center !important;}
    .query-btn .layui-btn{margin:10px auto !important;max-width:300px;display:block;}
    
    /* 表单优化 */
    .layui-form-item{margin-bottom:15px;}
    .layui-form-label{width:80px;font-size:14px;}
    .layui-input-block{margin-left:95px;}
}

/* 订单页面按钮优化 */
.success-btn{
    margin:20px 0;
}
.success-btn .layui-btn{
    background:#009688 !important;
    color:#fff !important;
    border:none;
    height:42px;
    line-height:42px;
    padding:0 20px;
    text-align:center;
}
.success-btn .layui-btn-primary{
    background:#fff !important;
    color:#009688 !important;
    border:1px solid #009688 !important;
}

/* 小屏幕按钮垂直排列 */
@media screen and (max-width:400px){
    .success-btn{
        flex-direction:column !important;
    }
    .success-btn .layui-btn{
        max-width:100% !important;
    }
}

.query-btn .layui-btn{
    background:#009688 !important;
    color:#fff !important;
    border:none;
    height:42px;
    line-height:42px;
}

/* 订单状态按钮优化 */
.order-status{
    height:auto !important;
    line-height:1.5 !important;
    padding:4px 10px !important;
}

/*/////////////////////////// WFPHPCMSCSSEND ///////////////////////////*/