@import "//at.alicdn.com/t/font_1299990_caw5th4zlhu.css";
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
html, body {padding: 0;height: 100%;font-weight: 400;font-family: sans-serif,'STHeiti','Microsoft YaHei',Helvetica,Arial; color: #333;
    font-display: optional;margin: 0 auto;max-width:640px;font-size: 0.24rem;background-color:#f0f0f0;  }
a{text-decoration:none;outline: none;color: #333}
a:focus{outline:none}a:hover{text-decoration:none}
a:active{text-decoration:none;}
ul, ol, dl{margin:0;padding:0;list-style:none}
.center {  display: flex;  align-items: center;  justify-content: center;  }
.bg_w{background-color: white}
.pd15{padding: 15px}
.pdzy15{padding:0 15px}
.hei44{height: 44px}
.fw600{font-weight: 600}
.font10{font-size: 10px}
.font12{font-size: 12px}
.font14{font-size: 14px}
.font16{font-size: 16px}
.font18{font-size: 18px}
.color66{color: #666;}
.color99{color: #999;}
.mgto10{margin-top: 10px}
.mgri10{margin-right: 10px}
.h_center {  display: flex;  align-items: center;  }
.t_center {  display: flex;  align-items: flex-start;  }
.w_center {  display: flex;  justify-content: center;  }
.jc_sb {justify-content: space-between  }
.jc_sa {justify-content: space-around  }
.f_grow {flex-grow: 1;  }
.line{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;  }
/* 遮罩层 */
.ui_banner{width:90%;position:fixed;left:50%;top:50%;border-radius:10px;z-index:99;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.ui_mask{background:rgba(0,0,0,0.6);position:fixed;width:100%;height:100%;left:0;top:0;z-index:1}
.posre{position: relative;}
.botom{border-bottom: 1px solid #EFEFF4}
.xian{position: relative;}
.xian:after{content: '';display: block;position: absolute;bottom: 0;width: 95%;right:0;height: 1px;background-color: #f4f4f4;}
/**/
.foot {
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    max-width: 640px;
    border-top: 1px solid #f7f7f7;
    z-index:1;
}

.foot li {
    height: 100%;
}

.foot li a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
}

.foot li a img {
    display: block;
    width: 30px;
    height: 30px;
}

.foot li a p {
    font-size: 12px;
    width: 100%;
    text-align: center;

}

p.actives {
    color: #FF5757;
}

.swiper-container {
    width: 100%;
    height: 187px;
    background-color: white;
}
.swiper-slide img{
    width: 90%;
    height: 90%;
    display: block;
    margin: 10px auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow:0px 3px 5px 0px rgba(0,0,0,0.9);
}
.nav{
    background-color: white;
}
.nav_item{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    height: 80px;
    flex: 1;
    font-size: 15px;
}
.nav_item img{
    width: 38px;
    height: 38px;
}
.head{
    padding: 9px 15px;
    background-color: white;
    overflow: hidden;
}

.search_box{
    background-color: #EFEFF4;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 4px;
}
.search_box input{
    border: none;
    background-color: #EFEFF4;
}

.news_box{
    border-radius: 8px;
    box-shadow:0px 3px 5px 0px #CB8686;
    padding: 15px;
}
.news_box img{
    width: 39px;
    height: 43px;
    display: block;
}
.s_xian{
    width: 1px;
    height: 50px;
    background-color: #EFEFF4;
    margin: 0 10px;
}
.news_list{
    height: 60px;
    overflow: hidden;
    font-size: 16px;
}
.news_list .swiper-wrapper .swiper-slide{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
}
.news_list .swiper-wrapper .swiper-slide  div{
    overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;

}
.number_list{
    background-color: white;
    flex-wrap:wrap;
}
.number_list li{
    width: 49.8%;
    border-bottom: 1px solid #EFEFF4;
    border-right: 1px solid #EFEFF4;
    position: relative;
}
.number_list_item .tjhm_icon{
    width: 33px;
    height: 38px;
    position: absolute;
    top:0;
    right: 12px;
}
.number_list li:nth-child(2n){
    border-right: none;
}
.number_list_item .operator{
    font-size:12px ;
    padding: 5px 15px;
}
.number_list_item .number{
    font-size:18px ;
    padding: 5px 15px;
}
.number_list_item .number text{
    color:#0B6AE2
}

.number_list_item .price{
    color:#D51010;
    font-weight: 600;
    padding: 5px 15px;
    font-size: 15px;
}
.number_list_item .price text{
    font-size: 12px;
    color:#999
}
.mask_box{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
.mask_ui{
    background:rgba(0,0,0,0.9);position:absolute;width:100%;height:100%;left:0;top:0;z-index:1
}
.mask_ope{
    z-index: 2;
    position: absolute;
    color: white;
    width: 100%;
    height: 100%;

}
/*.mask_ope .number{*/
    /*padding: 5px 30px;*/
/*}*/
.mask_ope .btn{
    width: 60px;
    height: 35px;
    border-radius: 4px;
    font-size: 18px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn1{
    background-color: #EF3F46;
}
.btn2{
    background-color: #999999;
}
.opt_box{
    margin-top: 10px;
}
.removes .mask_box{
    display: block;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0.5; /*初始状态 透明度为0*/
    }
    50% {
        opacity:0.8; /*中间状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.mask_box{-webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/}



/*screen*/
/* screening */
.screening{
    width: 100%;
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 4;
    max-width: 640px;
    margin: auto;
}
div.screening>ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: solid 1px #d3d3d3;
    overflow: hidden;
}
div.screening>ul>li{
    float: left;
    width: 24.8%;
    text-align: center;
    line-height: 44px;
    background: url(../images/sjx.png) no-repeat 88% center;
    background-size: 22px;
    font-size: 15px;
}
.screen_opt_cur{
    background: url(../images/cur.png) no-repeat 83% center!important;
    background-size: 22px!important;
    color: #333;
    font-weight: 600;
}
.grade-eject, .Brand-eject, .Sort-eject ,.screen-eject{
    position: fixed;
    /*top: -65%;*/
    width: 100%;
    height: 65%;
    z-index: 1;
    -webkit-transition-duration: 0.4s;
    display: none;
    font-size: 14px;
    max-width: 640px;
}
.grade-w-roll {
    /*top: 135px*/
    display: block;
}


.grade-eject>ul,.screen-eject>ul,.Sort-eject>ul,.Brand-eject>ul{
    margin: 0;
    padding: 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    -webkit-transition-duration: 0.4s;
}

.grade-eject>ul>li,.screen-eject>ul>li,.Sort-eject>ul>li,.Brand-eject>ul>li{
    line-height:45px;
    font-size:14px;

    border-bottom: solid 1px #eee;
}
.grade-eject>ul>li{
    padding-left: 15px;
    color: #999;
}
.grade-eject>ul.grade-w{
    background: #ddd;
    position: absolute;
    z-index: 1;
}
.grade-eject>ul.grade-t{
    background: #eee;
    position: absolute;
    z-index: 2;
    left: 100%;
}
.grade-eject>ul.grade-t>li{
    border-bottom: solid 1px #fff;
}
.grade-eject>ul.grade-s{
    background: #fff;
    position: absolute;
    z-index: 3;
    left: 100%;
    list-style-type: none;
}
.grade-eject>ul.grade-s>li{
    border-bottom: solid 1px #eee;
    margin-left: 1rem;
    padding: 0;
}

.grade-w-roll::after{
    position: fixed;
    content: "";
    width: 100%;
    height: 81.6%;
    display: block;
    background: rgba(0,0,0,0.2);
    bottom: 0;
    max-width: 640px;
}
/*Sort-eject*/
.Sort-Sort,.Brand-Sort{
    background: #fff;
    position: absolute;
    z-index: 3;
    left: 0;
    list-style-type: none;
}
.Sort-Sort>li,.Brand-Sort>li{
    border-bottom: solid 1px #eee;
    padding: 0;
    text-align: center;
    color: #999;
}

.Sort-height,.Brand-height{
    height: 185px;
}
.screen_box{
    overflow: auto;
    height: 100%;
    width: 100%;
    -webkit-transition-duration: 0.4s;
    background-color: white;
    position: relative;
    z-index: 3;
    max-width: 640px;
}

.no_contain{
    flex-wrap: wrap;
}
.no_contain>li{
    width: 79px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EFEFF4;
    font-size: 14px;
    border-radius: 4px;
    color: #666;
    margin-top: 12px;
}
.src_cur{
    background-color: #FF5757!important;
    color: white!important;
}
.screen_btn{
    position: absolute;
    bottom: 0;
    height: 68px;
    width: 100%;
    border-top: 1px solid #EFEFF4;
}
.screen_btn .btn{
    width: 150px;
    height: 44px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: #FF5757;
    font-size: 14px;
}
.screen_btn .btn1{
    background-color: #EFEFF4;
    color: #999;
}
.screen_cur{
    color: #333!important;
    font-weight: 600;
    position: relative;
}
.screen_cur:before{
    position: absolute;
    display: block;
    content: '';
    right: 12px;
    top: 8px;
    width: 8px;
    height: 16px;
    border-color: #FF5757;
    border-style: solid;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.gradet_cur{
    color: #333!important;
    font-weight: 600;
    position: relative;
}
.gradet_cur:before{
    position: absolute;
    display: block;
    content: '';
    right: 40%;
    top: 8px;
    width: 8px;
    height: 16px;
    border-color: #FF5757;
    border-style: solid;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
/**/
.Customer_service{display: none}
.gb_btn{position: absolute;right:0;width:40px;height:40px;top:40%;}
.look_btn{height:49px;
    background:rgba(254,139,92,1) linear-gradient(90deg,rgba(254,139,92,1) 0%,rgba(251,144,166,1) 100%);
    box-shadow:0px 6px 13px -2px rgba(190,73,17,0.28);font-size: 18px;color:white;border-radius:25px}
.look_btn:active { color: white; }
/**/
.option_box{
    position: fixed;bottom:61px;
    width: 100%;background-color: white;
    overflow: hidden;
    left:0;border-radius: 8px 8px 0 0;
    display: none;
}

@keyframes collect_box{
    from {
        height: 0px;
        bottom:61px;
    }
    to {
        height: 400px;
        bottom:61px;
    }
}
@keyframes navigation_box{
    from {
        height: 0px;
        bottom:61px;
    }
    to {
        height: 124px;
        bottom:61px;
    }
}
.collect_item{
    position: relative;
}
.collect_item:after{
    content: '';
    position: absolute;
    width: 90%;
    height: 1px;
    background-color: #EFEFF4;
    left:0;
    right:0;
    margin: auto;
    top:0;
}
.collect_list{
    max-height: 360px;
    overflow-y: auto
}
.c_item{
    flex: 1;
}
.c_item .btn{
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: white;
    padding: 7px 8px;
}
.c_item .btn1{
    background-color: #999999;
}
.c_item .btn2{
    background-color: #FF5757;
}