:root {
    --orange: #D05E34;
    --grey: #666666;
    --green: #0EB67E;
    --paddingY: 80px;
}
html{height:100%; font-size:14px}
body{height:100%;font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; padding-top: 60px}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; margin:0; padding:0;}
*:focus{outline:0;}
.clearfix{ zoom:1 }
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
[hidden]{display:none;}
body{
    background-color: #fafafa;
}
.hidden{overflow: hidden}

input,textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input:before, input:after,textarea:before, textarea:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box;}
button,input[type="button"],input[type="reset"],input[type="submit"],input[type="text"] { -webkit-appearance:none;}/*重置ios滤镜*/
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor: pointer; }
pre{display:block;padding:9.5px;margin:10px 0;font-size:13px;line-height:1.42857143;color:#333;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}
pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
a{text-decoration:none; color:#333;}
img{vertical-align: middle}

.layout-main{flex:auto}
.layout-col{flex:1}
.layout-width{width: 0}

.layout-scrollable{overflow:auto!important;-webkit-overflow-scrolling:touch}

::-moz-selection{background:#FF6C60;color:#fff;}
::-webkit-scrollbar{width:5px;height:5px; background-color:rgba(226, 224, 224,.2);}
::-webkit-scrollbar:hover{}
::-webkit-scrollbar-thumb{min-height:10px;min-width:20px;background:rgba(118, 131, 143,.4)}
::-webkit-scrollbar-thumb:hover{min-height:5px;min-width:5px; background:rgba(118, 131, 143, .4)}
::-webkit-scrollbar-thumb:active{background:rgba(118, 131, 143, .4)}
.scrollbar-none::-webkit-scrollbar{width: 0px}

textarea[noresize]{resize:none}
[role=button]{cursor: pointer}
.hidden{display:none!important;}
.inline{display:inline !important;}
.block{display:block !important;}
.inline-block{display:inline-block !important;}
.display-flex{display: flex !important;}
.vertical-top{vertical-align:top !important;}
.vertical-bottom{vertical-align:bottom !important;}
.vertical-middle{vertical-align:middle !important;}
.static{position:static;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.bold{font-weight:bold;}

.pull-left{float:left!important;}
.pull-right{float:right!important;}
.pull-center{margin:0 auto!important;}
.text-left{text-align:left!important;}
.text-right{text-align:right!important;}
.text-center{text-align:center!important;}
.text-justify{text-align:justify;text-justify:inter-ideograph}
.text-truncate{overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.text-clamp{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.flex-row{flex-direction:row!important}
.flex-column{flex-direction:column!important}
.flex-row-reverse{flex-direction:row-reverse!important}
.flex-column-reverse{flex-direction:column-reverse!important}
.flex-wrap{flex-wrap:wrap!important}
.flex-nowrap{flex-wrap:nowrap!important}
.flex-wrap-reverse{flex-wrap:wrap-reverse!important}
.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}
.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}
.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}
.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}
.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}
.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}
.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}
.align-items-center{-ms-flex-align:center!important;align-items:center!important}
.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}
.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}
.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}
.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}
.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}
.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}
.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}
.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}
.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}
.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}
.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}
.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}
.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}
.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}
.overflow-hidden {overflow: hidden !important;}
.overflow-auto {overflow: auto !important; }
.overflow-visible {overflow: visible !important;}
.overflow-scroll {overflow: scroll !important;}

.bg-white{background-color:#fff!important}
.bg-transparent{background-color:transparent!important}
.bg-gradient{background-image:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0))!important}

.container{
    margin: 0 auto; padding:0 20px;
}

header{
    position: absolute; left: 0; right: 0; top: 0; background: #FFFFFF;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
    height: 60px; display: flex; align-items: center;
    padding:0 80px; font-size: 14px; z-index: 9;
}
header .logo{
    font-size: 20px;
    font-weight: 600;
}
header .header-main{
    flex: 1; display: flex; justify-content: space-between; padding-left: 50px; align-items: center;
}
header .location{
    position: relative; padding-right: 15px;text-align: right; height: 30px; line-height: 30px; overflow: hidden;
}
header .location:after{
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #000;
    position: absolute; top:50%; right: 0; transform: translateY(-50%);
}
.location-city{
    position: absolute; width: 360px; border-radius: 16px;
}
.location-city>.mask{
    height: 25px;
}
.location-city>.city-wrap{
    background: #fff; box-shadow: 0 6px 32px -2px rgba(0, 0, 0, 0.1); border-radius: 16px; display: flex; flex: 1;
}
.location-city .letter{
    width: 60px; border-right: 1px solid #E8E8E8; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 12px 0;
}
.location-city .letter>li{
    display: block; text-align: center; width: 24px; height: 24px; line-height: 24px;  border-radius: 16px; font-size: 14px; margin: 3px 0; cursor: pointer;
}
.location-city .letter>li.on{
    background: #0EB67E; color: #fff;
}
.location-city .city-group{
    margin:13px 0; flex: 1; min-width: 0; overflow: auto; max-height: 805px
}
.location-city .bar-title{
    padding:0 10px;  height: 32px; line-height: 32px; background: #F5F5F5; font-size: 14px; color: #ACAAAA;
    border-radius: 0 10px 10px 0; position: sticky; top: 0; text-align: left;
}
.location-city .city-list{
    display: flex; padding:5px 8px; flex-wrap: wrap;
}
.location-city .city{
    padding:0 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 32px; line-height: 32px; text-align: center; font-size: 14px; flex-shrink: 0;
}
header .location:hover{
    overflow: visible;
}
header .search-wrap{
    border:1px solid var(--green); border-radius: 20px; height: 40px; display: flex;
    align-items: center;
}
header .search-wrap .input{
    height: 40px; width: 460px; border: 0 none; border-radius: 50%; padding:0 20px 0 40px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6886 14.2443L12.6708 11.2277C13.5798 10.0175 14.0706 8.54439 14.0689 7.03077C14.0689 3.14769 10.9182 0 7.03261 0C3.14954 0.00184616 0 3.14892 0 7.03262C0 10.9157 3.14892 14.0634 7.03446 14.0634C8.79815 14.0634 10.4049 13.4105 11.6394 12.3403L14.6148 15.3163C14.6851 15.3871 14.7688 15.4433 14.8609 15.4816C14.9531 15.52 15.0519 15.5397 15.1517 15.5397C15.2515 15.5397 15.3503 15.52 15.4425 15.4816C15.5346 15.4433 15.6183 15.3871 15.6886 15.3163C15.984 15.0191 15.984 14.5391 15.6886 14.2443ZM7.03446 12.5489C3.99015 12.5489 1.51262 10.0751 1.51262 7.03077C1.51262 3.98646 3.99015 1.51446 7.03446 1.51446C10.0788 1.51446 12.5563 3.99015 12.5563 7.03262C12.5563 10.0751 10.0788 12.5489 7.03446 12.5489Z' fill='black'/%3E%3C/svg%3E") no-repeat 15px center;
}
header .search-wrap .submit{
    width: 88px; text-align: center; border: 0; background: var(--green); color: #fff; height: 40px;
    border-radius: 0 20px 20px 0;
}
header .download-login,header .download-app{
    display: flex; align-items: center; position: relative;
}
header .download-app{
    display: inline-flex;
}
header .download-app .qrcode-view{
    width: 210px; background: #FFF; box-shadow: 0 6px 32px -2px rgba(0, 0, 0, 0.1); border-radius: 16px; position: absolute;
    top: 50px; left: 50%; transform: translateX(-50%); text-align: center; padding: 15px; font-size: 16px; font-weight: 500; display: none;
}
header .download-app .qrcode-view>.logo-app{
    color: var(--green); margin:5px 0;
}
header .download-app:hover .qrcode-view{
    display: block;
}
header .login{
    height: 40px; line-height: 40px;  width: 76px; text-align: center; border-radius: 20px; border: 1px solid var(--green); color: var(--green);
}
header .logout{
    border: 1px solid #FF7B51;; color: #FF7B51;
}
header .space{
    padding:0 10px; color: #E8E8E8;
}
main{
    margin: 35px auto; padding:0 60px 0 10px; display: flex; min-width: 1520px;
}
aside{
    width: 120px; margin-right: 60px;
}
aside>.sticky-aside{
    position: sticky; top: 0;
}
aside li, aside a{
    height: 46px; display: block; border-radius: 10px;
}
aside li:hover{
   background: #BFF4E5;
}
aside li.on svg path, aside li.on svg rect{
    fill: #fff;
}
aside li.on svg path[stroke]{
    stroke: #fff;
    fill: transparent;
}
aside li.on{
    background: var(--green); color: #fff;
}
aside a{
  padding: 12px 16px; font-size: 16px; color: inherit; display: flex; align-items: center;
}
aside a svg{
    margin-right: 5px;
}
aside hr{
    height:1px; border: 0; border-top: 1px solid #E8E8E8; margin:10px 0;
}
aside .title{
    height: 20px; margin:12px 0 12px 12px; color: #777; font-size: 14px;
}
footer{
    padding:0 var(--paddingY); color: #808080; margin-top:35px; padding-bottom: 35px; text-align: center;
}
footer a{
    color: #808080;
}

.login-container{
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.2); z-index: 101; display: flex; align-items: center; justify-content: center;
}
.login-wrapper{
    background: #fff; width: 440px; border-radius: 16px; padding:30px 35px; position: relative;
}
.login-wrapper>.close{
    position: absolute; width: 24px; height: 24px; right: 15px; top: 15px; text-align: center;
    color: #fff; border-radius: 50%; background: url("../images/remove.svg") no-repeat center center rgba(0,0,0,.4);
}
.login-wrapper .login-tab{
    font-size: 20px; font-weight: 500; display: flex; align-items: center;
}
.login-wrapper .login-tab>a{
    color: #ACAAAA; height: 28px; padding-right: 15px;position: relative;
}
.login-wrapper .login-tab>a:after{
    position: absolute; width: 1px; height: 18px; top: 5px; content: ' '; right: 0; border-right: 1px solid #ddd;
}
.login-wrapper .login-tab>a:last-child:after{
    border-color: transparent;
}
.login-wrapper .login-tab>a+a{
    padding-left: 15px;
}
.login-wrapper .login-tab>a.on{
    color: #333;
}
.login-wrapper .reset-password-msg{
    font-size: 20px;
}
.login-wrapper .reset-password-msg>p{
    color: #777; font-size: 14px; line-height: 24px; margin-top: 5px;
}
.login-form .login-field{
    display: flex; align-items: center; margin:16px 0 0 0;
}
.login-form .login-field>.input{
    padding: 8px 16px; height: 44px; border: 1px solid #E8E8E8; border-radius: 30px; font-size: 14px;
}
.login-form .login-field:last-child{
    margin-bottom: 0;
}
.login-form .input-action{
    height: 44px; border: 1px solid var(--green);  border-radius: 30px; padding:0 15px; color: var(--green); background: #fff;
    margin-left: 10px; width: 140px;
}
.login-form .input-action.forget-password{
    border-color: transparent; padding:0 30px; width: auto; margin:0; color: #333;
}
.login-form .submit-button{
    height: 44px; border: 1px solid var(--green); background: var(--green); font-weight: 600; font-size: 16px; color: #fff; border-radius: 30px;
}
.login-wrapper .login-message{
    font-size: 14px; height: 20px; line-height: 20px; color: #FF9B52; text-align: center; margin: 8px 0;
}
.login-wrapper .login-message-resetpassowrd{
    font-size: 14px; height: 20px; line-height: 20px; color: #FF9B52; text-align: center; margin: 8px 0;
}
.auth-login-with{
    text-align: center;
}
.auth-login-with .auth-way{
    height: 20px; line-height: 20px; position: relative; display: flex; justify-items: center; color: #ACAAAA; justify-content: center;
}
.auth-login-with .auth-way:after{
    position: absolute; left: 0; right: 0; top: 50%; content: ' '; border-top: 1px solid #DCDCDC;
}
.auth-login-with .auth-way>p{
    padding:0 10px; font-size: 14px; background: #fff; position: relative; z-index: 1;
}
.auth-login-with .auth-way-list{
    display: flex; margin:15px 0; justify-content: center;
}
.auth-login-with .auth-way-list>.icon{
    width: 26px; height: 26px; background-repeat: no-repeat; margin:0 3px;
}
.auth-login-with .auth-way-list>.login-trill{
    background-image: url("../images/login-trill.svg");
}
.auth-login-with .auth-way-list>.login-qq{
    background-image: url("../images/login-qq.svg");
}
.auth-login-with .auth-way-list>.login-wechat{
    background-image: url("../images/login-wechat.svg");
}
.login-wrapper .login-protocol{
    height: 20px; line-height: 20px; color: #ACAAAA;  font-size: 12px;
}
.login-wrapper .login-protocol>a{
    color: var(--green);
}

.toast{
    top: 50%; left: 50%; position: fixed; transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.7);
    border-radius: 5px; color: #fff; text-align: center; padding: 15px; z-index: 200;
    -webkit-animation-duration: 500ms; animation-duration: 500ms;
    -webkit-animation-name: toastZoomIn; animation-name: toastZoomIn; font-size: 14px;
}

@keyframes ball-scale {
    0% {
        transform: scale(0.1); opacity: 1;
    }
    100% {
        transform: scale(1); opacity: 0;
    }
}


.product-wrap{
    display: flex; flex-wrap: wrap;  margin:0 -8px;
}
.product-item{
    background: #FFFFFF; border-radius: 16px; text-align: center; overflow: hidden; padding-bottom: 10px;
}
.product-item>.ask-price{
    height: 40px; line-height: 30px; width: 120px; border-radius: 20px; margin: 5px 0;
    padding: 5px 24px; display: inline-block; border: 1px solid var(--green); color: var(--green);
}
.product-item>.photo{
    height: 240px; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.product-item>.photo>img{
    object-fit: cover; max-width: 100%;
}
.product-item>.name{
    font-size: 18px; line-height: 24px; height: 24px; margin:10px 0; padding:0 10px;
}
.product-item>.price{
    font-size: 18px; color: #FF7B51; margin:10px 0;
}
.product-item>.info{
    margin:5px 0; font-size: 14px; color: #777;
}
.product-wrap .product-item{
    width: calc(25% - 16px); margin: 8px;
}
.sort-group{
    height: 32px; border-radius: 10px; display: flex;
}
.sort-group>.item{
    height: 32px; border:1px solid #DCDCDC;display: inline-flex; background-color: #fff; font-size: 14px; color: #777; padding: 5px 13px; border-radius: 10px; margin-left: -1px; font-size: 14px;
}
.sort-group>.item.on{
    background-color: var(--green); color: #fff; border-color: var(--green);
}
.sort-group>.item:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.sort-group>.item:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.go-top{
    width: 48px; height: 48px; background:url("../images/gotop.png") 0 0 no-repeat; position: fixed; right: 0; bottom: 145px;
    z-index: 100; cursor: pointer;
}
.loading-more{
    margin-top:30px; color: #777; text-align: center;
}
.title-bar{
    height: 76px; background: #FFFFFF; border-radius: 16px; padding:14px; display: flex; align-items: center;
}
.title-bar>.title-category{

}
.title-bar>.title-category>a{
    height: 48px; line-height: 48px; padding:10px 16px; font-size: 20px; color: #777; position: relative;
}
.title-bar>.has-border>a:after{
    content: ' '; height: 4px; background: var(--green); position: absolute; left: 16px; right: 16px; bottom: -16px; display: none;
}
.title-bar>.has-border>a:hover,.title-bar>.has-border>a.hover{
    color: #1F2129; font-weight: 600;
}
.title-bar>.has-border>a:hover:after,.title-bar>.has-border>a.hover:after{
    display: block;
}
.ui-select{padding:8px 35px 8px 16px;width:100%;min-width:162px;height:38px;line-height:20px;background:#fff;border:1px solid #e8e8e8;border-radius:20px;cursor:pointer;position:relative;font-size:14px}
.ui-select>.title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.ui-select:after{content:' ';border-right:1px solid #acaaaa;border-bottom:1px solid #acaaaa;position:absolute;height:9px;width:9px;top:10px;right:15px;transform:rotate(45deg)}
.ui-select>.ui-sub-wrap{position:absolute;top:100%;right:0;width:100%;display:none;z-index: 9}
.ui-select>.ui-sub-wrap.large{width: 262px}
.ui-select>.ui-sub-wrap:before{height:8px;content:' ';display:block}
.ui-select .ui-sub-body{max-height:848px;background:#fff;border:1px solid #e8e8e8;box-shadow:0 6px 32px -2px rgba(0,0,0,.1);border-radius:10px}
.ui-select .ui-sub-body.has-padding-top{padding-top:10px}
.ui-select .ui-sub-body>.title{padding:0 16px;height:48px;line-height:48px;border-bottom:1px solid #e8e8e8;font-size:20px;font-weight:600}
.ui-select .ui-sub-body{display:flex;flex-direction:column}
.ui-select .ui-sub-body .scroll-wrapper{flex:1;overflow:auto}
.ui-select .ui-sub-body .scroll-list{padding:0 14px}
.ui-select .ui-sub-body .scroll-list>.bar{height:38px;line-height:38px;font-size:16px;color:#acaaaa}
.ui-select .ui-sub-body .select-list>a{height:37px;line-height:37px;background:#f5f5f5;border-radius:20px;display:block;padding:0 14px;margin-bottom:10px;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.ui-select .ui-sub-body .select-list>a:hover{background:#bff4e5}
.ui-select .ui-sub-body .select-list>a.on{background:var(--green);color:#fff}
.ui-select .brand-wrapper{flex:1;overflow:hidden;display:flex}
.ui-select .brand-wrapper .letter{width:48px;text-align:center;display:flex;flex-direction:column;align-items:center;padding:4px 0}
.ui-select .brand-wrapper .letter>li{display:block;text-align:center;width:24px;height:24px;line-height:24px;border-radius:16px;font-size:14px;margin:1px 0;cursor:pointer}
.ui-select .brand-wrapper .letter>li:hover{background:#bff4e5}
.ui-select .brand-wrapper .letter>li.on{background:#0eb67e;color:#fff}
.ui-select .brand-wrapper .scroll-wrapper>.scroll-list{padding-left:5px}
.ui-select:hover .ui-sub-wrap{ display: block; }