/**
    全局公用样式表 
*/
@charset "utf-8";

html {color: #000;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,figure,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;padding:0;list-style: none;-webkit-tap-highlight-color:transparent}
body {font-family: "Microsoft YaHei,STHeiti Light,Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial";
    background-color:#fff;position: relative;min-width:320px;max-width:640px;margin:0 auto;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,textarea,select,code,kbd,pre,samp {font-size:100%;    background-color: #fff;}
input,button,select{border:none;outline: none; /*-webkit-appearance: none;appearance: none;-moz-appearance: none;*/}/*去除iphone默认input样式*/
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;appearance: none}
html{height:100%;}
table{ border-collapse: collapse; border-spacing: 0; border: 0 none;}
html,body,button,input,select,textarea {font: 14px/1.5 Microsoft YaHei,arial,STHeiti Light,\5b8b\4f53;color: #333}
em,i,cite{font-style:normal;font-weight:500}
a{text-decoration:none;-webkit-tap-highlight-color:rgb(0,0,0,0);outline:none;color:#000;}
a.active{background:#dcdcdc;border-color:#e5e5e5}
img{  border: 0 none;vertical-align: middle;max-width: 100%;}
a:visited{color:#000}
.wrap{width:100%;min-height:100%;margin:0;padding:0;}
.clearfix:after,.clearfix:before{content: " ";display: table}
.clearfix:after{clear:both;}
.hide{display: none;}
/* --------------------logo加载动画效果-------------------*/
@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotating {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg)
    }
}
/* --------------------logo加载动画效果-------------------*/

/*---------------------适配屏幕宽度---------------------*/

@media screen and (max-width:320px) {
	html,body,button,input,select,textarea {
		font-size: 12px
	}
}

@media screen and (min-width:320px) {
    html,body,button,input,select,textarea {
        font-size: 12px
    }
}

@media screen and (min-width:380px) {
	html,body,button,input,select,textarea {
		font-size: 14px
	}
}

@media screen and (min-width:420px) {
	html,body,button,input,select,textarea {
		font-size: 16px
	}
}

@media screen and (min-width:450px) {
	html,body,button,input,select,textarea {
		font-size: 17px
	}
}

@media screen and (min-width:480px) {
	html,body,button,input,select,textarea {
		font-size: 18px
	}
}

@media screen and (min-width:540px) {
	html,body,button,input,select,textarea {
		font-size: 20.25px
	}
}

@media screen and (min-width:600px) {
	html,body,button,input,select,textarea {
		font-size: 21px
	}
}

@media screen and (min-width:640px) {
	html,body,button,input,select,textarea {
		font-size: 22px
	}
}
/*---------------------适配屏幕宽度---------------------*/
/*左浮动*/
.fl{float: left;}
/*右浮动*/
.fr{float: right;}
/*弹窗*/
.alert_tit{padding:10px 20px;text-align:left; color:#5d5d5d; font-weight:normal; background-color:#f7f7f7; font-size:1rem;border-top-left-radius: 4px;border-top-right-radius: 4px;-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px;}
.alert_text{min-height:20px; line-height: 20px; padding:10px 20px; display: -webkit-box;display: inline-block;-webkit-box-pack: center;-webkit-box-align: center;-webkit-box-orient: vertical}
.alert_text_con{min-height:20px;  max-height:100px; overflow:hidden; white-space:normal; word-break:break-all;}
.alert .btn_cont{border-spacing: 8px; padding:1px 0 8px; width: 92%;margin: 0 auto;}
.btn_yes, .btn_no{display: inline-block;width: 50%; font-size: 14px; line-height:18px; height: auto; padding: 7px 12px;}
.btn_yes:hover, .btn_no:hover{color:#fff;}

.b_dred{background-color:#42a035; border-color:#42a035; color:#fff;}
.b_white{background-color:#f9f9f9; border-color:#eee; color:#888;}
.btn_cont{display:table; width:100%; border-collapse:separate ; border-spacing:10px;}
.btn{ display: table-cell; font-size:16px; line-height:1.2;height:20px; vertical-align:middle; text-align:center;border-radius:4px; -webkit-border-radius:4px;}
.r3{border-radius:3px; -webkit-border-radius:3px;}

.bg_white{background-color:#fff;}
.close{display:inline-block; line-height:1; text-align:center; background-color:rgba(0,0,0,.2);}
.close.touch, .close:active{background-color:rgba(0,0,0,.8);}
.rAll{border-radius: 640px;-webkit-border-radius: 640px;}

.relative{position:relative;}
.fix_cont, .fix_top, .fix_bottom, .fix_all{position:fixed; overflow:hidden; z-index:1210;}
.fix_all{top:0px; bottom:0px; right:0px; left:0px; height:100%;  min-width: 320px;max-width: 640px;margin: 0 auto;}
.fix_top{top:0px; right:0px; left:0px; } .fix_bottom{bottom:0px; right:0px; left:0px; }
.absolute_cont, .absolute_t, .absolute_b, .absolute_all{position:absolute;}
.absolute_all {top:0px; bottom:0px; left:0px; right:0px; width:100%; height:100%;}
.absolute_t {top:0px; left:0px; right:0px;} .absolute_b {bottom:0px; left:0px; right:0px;}

.diy_pop_cont{ margin:20% 30px;}
.diy_pop_cont_foot{position:absolute;bottom:0;width:100%; }
.diy_pop_tit{padding: 12px 8px 10px;line-height: 1}
.diy_pop_tit .tit{border-left: 3px solid #92ce92; padding-left: 6px;}
.diy_pop_tit .close{padding:2px 5px; margin: -6px -2px 0 0; color: #fff;}
.diy_pop_div{padding:12px 16px;}
.diy_pop_div p{margin:4px 0 1em 0em; color: #888;}
/**渐入的css动画**/
@-webkit-keyframes fshow{ 0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fhide{ 0% {opacity:1;}
    100% {opacity:0;}
}
.fadeAnim{
    -webkit-animation-duration:.12s;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-fill-mode:forwards;
}
.fadeAnim.shown{-webkit-animation-name: fshow;}
.fadeAnim.hidden{-webkit-animation-name: fhide;}

/*跳出动画*/
@keyframes jshow {0%{transform: scale(1); opacity:0;}
    50% {transform: scale(0.6); opacity: 0.8;}
    80%,100% {}
}
@-webkit-keyframes jshow {0%{transform: scale(1); opacity:0;}
    50% { -webkit-transform: scale(0.6); opacity: 0.8;}
    80%,100% {}
}

@keyframes jhide {0%{}
    48% {-webkit-transform: scale(1.1); opacity: 0.8;}
    100% {-webkit-transform: scale(0); opacity: 0;}
}
@-webkit-keyframes jhide {0%{}
    48% {-webkit-transform: scale(1.1); opacity: 0.8;}
    100% {-webkit-transform: scale(0); opacity: 0;}
}
.popAnim{
    -webkit-animation-duration:0.32s;
    -webkit-animation-timing-function:cubic-bezier(0.250, 0.100, 0.250, 1.000);
    -webkit-animation-fill-mode:forwards;
}
.popAnim.shown{animation-name:jshow;-webkit-animation-name: jshow;}
.popAnim.hidden{animation-name:jhide;-webkit-animation-name: jhide;}

.popEase{

    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.popEase.shown{transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);}
.popEase.hidden{transform: translate3d(0,100%,0);-webkit-transform: translate3d(0,100%,0);}



/*边框公用样式开始*/
.no_border{border:none!important;}

.total_border{position: relative;   border:none;}
.total_border:after{content: ''; position: absolute;   top: 0; left: 0; z-index: 9; border: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}

.total_br{position: relative;   border:none;}
.total_br:after{content: ''; position: absolute;  border-radius: 8px; -webkit-border-radius: 8px; top: 0; left: 0; z-index: 9; border: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}

.bor_t{position: relative;   border:none;}
.bor_t:after{content: '';   position: absolute;   top: 0; left: 0;  z-index: 9; border-top: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}

.bor_l{position: relative;   border:none;}
.bor_l:after{content: '';   position: absolute;   top: 0; left: 0;  z-index: 9; border-left: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}

.bor_r{position: relative;   border:none;}
.bor_r:after{content: '';   position: absolute;   top: 0; left: 0;  z-index: 9; border-right: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}

.bor_b{position: relative;   border:none;}
.bor_b:after{content: '';   position: absolute;   top: 0; left: 0;  z-index: 9; border-bottom: 1px solid #99d799; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%;    height: 200%;   -webkit-transform: scale(0.5);  transform: scale(0.5);  -webkit-transform-origin: left top; transform-origin: left top;}


/*边框公用样式结束*/
/*箭头开始*/
.arrow_r{display: inline-block; width: 10px;  height: 10px;  overflow: hidden;margin-left:0.8rem;}
.arrow_r:before {content: '';display: block; width: 6px; height: 6px; border-left: 1px solid #bbb;border-top: 1px solid #bbb;margin: 2px 0 0 -2px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg);-ms-transform: rotate(135deg); -o-transform: rotate(135deg);transform: rotate(135deg);}
.arrow_l{display: inline-block; width: 10px;  height: 10px;  overflow: hidden;margin-left:0.8rem;}
.arrow_l:before {content: '';display: block; width: 6px; height: 6px; border-left: 1px solid #fff;border-top: 1px solid #fff;margin: 2px 0 0 -2px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg);-ms-transform: rotate(135deg); -o-transform: rotate(135deg);transform: rotate(135deg);}
.arrow_t{display: inline-block; width: 13px;  height: 10px;  overflow: hidden;margin-left:0.5rem;}
.arrow_t:before {content: '';display: block; width: 6px; height: 6px; border-left: 1px solid #bebebe;border-top: 1px solid #bebebe;margin-top:4px; margin-left: 1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);-ms-transform: rotate(45deg); -o-transform: rotate(45deg);transform: rotate(45deg);}
.arrow_d{display: inline-block; width: 9px;  height: 10px;  overflow: hidden;margin-left:0.8rem;}
.arrow_d:before {content: '';display: block; width: 7px; height: 6px; border-left: 1px solid #bebebe;border-top: 1px solid #bebebe; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg);-ms-transform: rotate(225deg); -o-transform: rotate(225deg);transform: rotate(225deg);}
/*箭头结束*/

/*三角形*/
.triangle-right{width: 0;height: 0;border-top: 4px solid transparent;border-left: 6px solid #f25454;border-bottom: 4px solid transparent;}
.triangle-left { width: 0;height: 0; border-top: 4px solid transparent; border-right: 6px solid #f25454; border-bottom: 4px solid transparent;}
.triangle-down {width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid #f25454;}
.triangle-up { width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 6px solid #f25454;}
.triangle-topright {width: 0;height: 0; border-top: 6px solid #f25454; border-left: 6px solid transparent;}
.triangle-topleft {width: 0;height: 0;border-top: 6px solid #f25454;border-right: 6px solid transparent;}
.triangle-bottomleft {width: 0; height: 0;border-bottom: 6px solid #f25454; border-right: 6px solid transparent;}
.triangle-bottomright {width: 0; height: 0;border-bottom: 6px solid #f25454;border-left: 6px solid transparent;}
/*三角形*/


/*脚部样式*/
.foot-topbox{height: 4rem;}
.foot-con{height: 4rem;position: fixed; bottom: 0;left: 0; z-index:999; width: 100%; background:#f0f0f0; }
.foot-con ul{overflow: hidden;max-width: 640px; margin:0 auto;background:#fff; border-top:1px solid #e5e5e5;}
.foot-con ul li{text-align: center;width: 25%;float: left; position: relative;}
.foot-con ul li i{display: inline-block; font-size: 1.9rem;width: 100%; height: 2rem;color:#686868;}
.foot-con ul li span{display: inline-block; width: 100%; text-align:center; line-height: 1.5rem; font-size: 1rem; color:#686868;}
.foot-con ul li b{width:1.5rem; height:1.5rem; line-height: 1.5rem; display: inline-block; border-radius: 50%; position: absolute; top:0.1rem; left: 55%; background:#f00; color: #fff; font-weight: normal;}
.foot-con ul li.active i,.foot-con ul li.active span{color:#f23030;}
.foot-con ul li a{display: block;}
/*弹窗样式*/
.prompt-box{position:fixed;top:0;left:0;z-index:1201;width: 100%;height: 100%;overflow: hidden; text-align: center; opacity:0;}
.prompt{padding: 12px 15px 10px; display:inline-block; line-height: 22px; margin: 0 auto;border-radius:4px;text-align:center;box-shadow:0 0 4px #999;background:rgba(0,0,0,.65);font-size:14px;color:#fff;max-width: 600px; }
/*头部公共样式*/
.heard-box{height: 3rem;}
.heard-con{position: fixed; width: 100%;height: 3rem; z-index: 9;}
.heard{position: relative;height: 3rem; line-height: 3rem; border-bottom:1px solid #bfbfbf; max-width: 640px;background: #fff -webkit-linear-gradient(#e8e8e8,#ffffff); background:  #fff -o-linear-gradient(#e8e8e8,#ffffff); background:  #fff -moz-linear-gradient(#e8e8e8,#ffffff); background: #fff  linear-gradient(#e8e8e8,#ffffff); }
.heard-back{width: 10%; display: inline-block; position: absolute; left: 0; top:0; text-align: center; }
.heard-back a {display:block;}
.heard-back a i{font-size: 2rem; line-height: 3rem; color: #393939;}
.heard-menu{width: 10%; display: inline-block; position: absolute; right: 0; top:0; text-align: center; }
.heard-menu a {display:block;}
.heard-menu a i{font-size: 1.7rem; line-height: 3rem; color: #393939;}
.heard-menu.active a i{color: #f00;}
.heard h2{text-align: center; font-size: 1.3rem;}
.menu-list{position: fixed; top:3rem; right: 0;  display: none; z-index: 999;height: 3rem; width: 100%;}
.menu-list-box{max-width: 640px; margin:0 auto; width: 100%; height: auto; position: relative;}
.menu-list-box ul{position: absolute;  top:0; right: 0;background: #fff; border:1px solid #f3f3f3;} 
.menu-list-box ul li{margin:0.5rem 1rem;width: 8rem; color:#393939;border-bottom:1px solid #f3f3f3; line-height: 3rem; height: 3rem;}
/*.menu-list ul li:last-child{border-bottom:0px solid #f3f3f3;}*/
.menu-list-box ul li a{display: block;}
.menu-list-box ul li a i{font-size: 1.5rem; margin-right: 0.5rem; color: #393939;}
.menu-list-box ul li a span{display: inline-block; font-size: 1.2rem; color:#393939;}
.menu-list-box ul li.active a i{color: #f00;}
.menu-list-box ul li.active a span{color: #f00;}
/*商品列表公共样式*/
.goods-list{ background: #fff;}
.goods-list ul {}
.goods-list ul li{ position: relative; }
.goods-list ul li a{overflow: hidden; display: block; padding:0.5rem; display: -webkit-box;}
.goods-left{text-align: center; display: inline-block;width: 8rem;}
.goods-left img{max-height: 8rem; max-width: 8rem;width: auto;}
.goods-right{-webkit-box-flex: 1;box-flex: 1;border-bottom:1px solid #bfbfbf;height: 9rem;  margin-left: 1rem;}
.goods-right h4{text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; color: #232326; font-size: 1.1rem;overflow: hidden; line-height: 1.5rem; height:3rem; font-weight: bold;}
.goods-right p{color:#808080; font-size: 1rem; line-height: 1.4rem;}
.goods-right p.old-price{text-decoration: line-through;}
.goods-right p i{color:#808080; font-style: normal; margin-left:1rem;}
.goods-right p span{color:#f00;}
.goods-cart{position: absolute; bottom:1rem; right: 1rem; border: 1px solid #bfbfbf; border-radius: 4px; width: 2.2rem; height: 2.2rem; line-height: 2.2rem; display: inline-block; text-align: center;}
.goods-cart i{font-size: 1.6rem; color: #686868;}
.goods-filter {height: 3rem;}
.goods-filter-box{height: 3rem;}
.goods-filter-con{position:fixed; left: 0; top:3rem; z-index: 9;width: 100%;background: #f0f0f0;}
.goods-filter-con ul{display: flex;display: -webkit-box;  max-width: 640px; margin: 0 auto;border-bottom: 1px solid #bfbfbf;}
.goods-filter-con ul li{width:25%; flex: 1;-webkit-box-flex: 1; line-height: 3rem; height: 3rem; text-align: center; font-size: 1.1rem; color: #393939;}
.goods-filter-con ul li i{font-size: 1.7rem;color: #393939;vertical-align: middle;}
.goods-filter-con ul li.active span{color: #f00;}
.goods-filter-con ul li.active i{color: #f00;}