:root{
    --wrap-min:320px;
    --wrap-max:1600px;
    --color-text:#222;
    --color-hover:#F00;
    --color-primary:#F60;
    --color-background:#FFF;
    --font-size:15px;
    --font-height:1.5;
    --font-family:-apple-system,"Helvetica Neue","Helvetica","Arial","Microsoft YaHei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    --space-size:1rem;
    --radius-size:3px;
    --style-face:rgba(255,255,255,0.9);
    --style-input:rgba(255,255,255,0.5);
    --style-light:rgba(125,125,125,0.08);
    --style-normal:rgba(125,125,125,0.15);
    --style-dark:rgba(125,125,125,0.35);
    --style-deep:rgba(125,125,125,0.5);
    --style-trans:rgba(0,0,0,0);
}
@media screen and (max-width:1920px){
    :root{--wrap-max:1600px;--font-size:14px;}
}
@media screen and (max-width:1680px){
    :root{--wrap-max:1500px;--font-size:14px;}
}
@media screen and (max-width:1600px){
    :root{--wrap-max:1400px;--font-size:13px;}
}
@media screen and (max-width:1440px){
    :root{--wrap-max:1300px;--font-size:13px;}
}
@media screen and (max-width:1366px){
    :root{--wrap-max:1200px;--font-size:12px;}
}
@media screen and (max-width:768px){
    :root{--wrap-max:768px;--font-size:15px;--space-size:0.5rem;}
}
*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
html,body{
    font-size:var(--font-size);
    font-family:var(--font-family);
    line-height:var(--font-height);
    color:var(--color-text);
    background-color:var(--style-face);
    min-width:var(--wrap-min);
    margin:0px auto;
    padding:0px;
    position:relative;
}
body{
    overflow-x:hidden;
}
a{
    color:var(--color-text);
    text-decoration:none;
    cursor:pointer;
    position:relative;
}
a:hover{
    color:var(--color-hover);
    text-decoration:none;
}
h1{
    font-size:1.6rem;
    font-weight:normal;
}
p{
    padding:0.5rem 0;
    margin:0;
}
hr{
    margin:1rem 0;
    background-color:var(--style-normal);
    height:1px;
    border:0;
}
img{
    vertical-align:middle;
    height:auto;
    max-width:100%;
    max-height:100%;
    border:0;
}
label{
    cursor:pointer;
}
ol,ul,li{
    list-style:none;
    padding:0px;
    margin:0px;
}
dl[class]>dt,dl[class]>dd,dt[class],dd[class]{
    vertical-align:top;
    padding:0.5rem 0;
    margin:0;
}
input, textarea, button, select{
    font-size:1em;
    font-family:var(--font-family);
    vertical-align:middle;
    line-height:1em;
    background-color:var(--style-input);
    min-height:32px;
    max-width:100%;
    padding:0.5rem;
    border:1px solid var(--style-normal);
    border-radius:0px;
    box-shadow:none;
    outline:0;
    display:inline-block;
}
input:focus, textarea:focus, button:focus, select:focus{
    border:1px solid var(--style-dark);
}
textarea{
    padding:0.5rem;
}
input[type="file"], input[type="number"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], select{
    padding:0.3rem;
}
input[type="radio"], input[type="checkbox"]{
    border:0;
    padding:0;
    margin:0;
    min-height:unset;
}
input[type="color"]{
    padding:0 0.2rem;
}
input[type=number].tc{
    text-align:center;
    -moz-appearance:textfield;
}
input[type=number].tc::-webkit-inner-spin-button,input[type=number].tc::-webkit-outer-spin-button{ 
    -webkit-appearance:none;
    margin:0;
}
.button, button, input[type="button"], input[type="submit"], input[type="reset"]{
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-height:32px;
    line-height:32px;
    background-color:var(--style-normal);
    padding:0 var(--space-size);
    border:0;
    border-radius:0;
    background-clip:padding-box;
    cursor:pointer;
    display:inline-block;
}
.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover{
    text-decoration:none;
    background-color:var(--style-dark);
}
.button:focus, button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus{
    border:0;
}
.inicon{
    position:relative;
}
.inicon>input,.inicon>select,.inicon>textarea{
    padding-left:2rem;
}
.inicon>i{
    position:absolute;
    top:calc(50% - .5rem);
    left:.5rem;
}
.badge{
    font-size:12px;
    line-height:1em;
    font-weight:normal;
    font-style:normal;
    text-align:center;
    vertical-align:middle;
    background-color:#CCC;
    min-width:1em;
    min-height:1em;
    border-radius:1em;
    padding:0.15em 0.4em;
    display:inline-block;
    opacity:.8;
}
.badge.float{
    white-space:nowrap;
    position:absolute;
    top:-1em;
    right:-1em;
    bottom:unset;
    z-index:unset;
}
.red{
    color:#FFF;
    background-color:#ff3b30;
} .red:hover, .red.active{
    color:#FFF;
    background-color:#fc5f57;
}
.green{
    color:#FFF;
    background-color:#4cd964;
} .green:hover, .green.active{
    color:#FFF;
    background-color:#6ddd81;
}
.brown{
    color:#FFF;
    background-color:#a5673f;
} .brown:hover, .brown.active{
    color:#FFF;
    background-color:#b3754c;
}
.blue{
    color:#FFF;
    background-color:#007aff;
} .blue:hover, .blue.active{
    color:#FFF;
    background-color:#3091fd;
}
.pink{
    color:#FFF;
    background-color:#ff2d55;
} .pink:hover, .pink.active{
    color:#FFF;
    background-color:#fc5475;
}
.yellow{
    color:#FFF;
    background-color:#ffcc00;
} .yellow:hover, .yellow.active{
    color:#FFF;
    background-color:#fcd331;
}
.orange{
    color:#FFF;
    background-color:#ff9500;
} .orange:hover, .orange.active{
    color:#FFF;
    background-color:#fca731;
}
.white{
    color:#000;
    background-color:#ffffff;
} .white:hover, .white.active{
    color:#000;
    background-color:#f5f5f5;
}
.gray{
    color:#FFF;
    background-color:#999;
} .gray:hover, .gray.active{
    color:#FFF;
    background-color:#888;
}
.black{
    color:#FFF;
    background-color:#000;
} .black:hover, .black.active{
    color:#FFF;
    background-color:#222;
}
.trans{
    background-color:var(--style-trans);
} .trans:hover, .trans.active{
    background-color:var(--style-trans);
}
.mini{
    font-size:0.7em;
}
.tiny{
    font-size:0.8em;
}
.small{
    font-size:0.9em;
}
.medium{
    font-size:1em;
}
.large{
    font-size:1.1em;
}
.big{
    font-size:1.2em;
}
.huge{
    font-size:1.4em;
}
.massive{
    font-size:1.6em;
}
.radius{
    border-radius:var(--radius-size) !important;
}
.shadow{
    box-shadow:0 0 0.5em 0.1em var(--style-light) !important;
}
.flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.vcl{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.vcr{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.vcc{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.vcsa{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.m{
    margin:var(--space-size) !important;
}
.ml{
    margin-left:var(--space-size) !important;
}
.mr{
    margin-right:var(--space-size) !important;
}
.mt{
    margin-top:var(--space-size) !important;
}
.mb{
    margin-bottom:var(--space-size) !important;
}
.mx{
    margin-left:var(--space-size) !important;
    margin-right:var(--space-size) !important;
}
.my{
    margin-top:var(--space-size) !important;
    margin-bottom:var(--space-size) !important;
}
.mu{
    margin:unset !important;
}
.p{
    padding:var(--space-size) !important;
}
.pl{
    padding-left:var(--space-size) !important;
}
.pr{
    padding-right:var(--space-size) !important;
}
.pt{
    padding-top:var(--space-size) !important;
}
.pb{
    padding-bottom:var(--space-size) !important;
}
.px{
    padding-left:var(--space-size) !important;
    padding-right:var(--space-size) !important;
}
.py{
    padding-top:var(--space-size) !important;
    padding-bottom:var(--space-size) !important;
}
.pu{
    padding:unset !important;
}
.b{
    border:solid 1px var(--style-normal) !important;
}
.bl{
    border-left:solid 1px var(--style-normal) !important;
}
.br{
    border-right:solid 1px var(--style-normal) !important;
}
.bt{
    border-top:solid 1px var(--style-normal) !important;
}
.bb{
    border-bottom:solid 1px var(--style-normal) !important;
}
.bx{
    border-left:solid 1px var(--style-normal) !important;
    border-right:solid 1px var(--style-normal) !important;
}
.by{
    border-top:solid 1px var(--style-normal) !important;
    border-bottom:solid 1px var(--style-normal) !important;
}
.bu,.bu:hover,.bu:focus{
    border:unset !important;
}
.bg{
    background-color:var(--color-background) !important;
}
.nowrap{
    white-space:nowrap;
}
.to{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
}
.tl{
    text-align:left !important;
}
.tr{
    text-align:right !important;
}
.tc{
    text-align:center !important;
}
.vt{
	vertical-align:top !important;
}
.vb{
	vertical-align:bottom !important;
}
.bold{
    font-weight:bold;
}
.none{
    display:none;
}
.inline{
    display:inline-block;
}
.block{
    display:block;
}
.arrow:after{
    opacity:0.5;
    content:">";
    float:right;
}
.left{
    float:left;
}
.right{
    float:right;
}
.clear{
    zoom:1;
}
.clear:after{
    content:"";
    height:0;
    clear:both;
    display:block;
}
.float{
    position:fixed;
    right:calc(var(--space-size) / 2);
    bottom:calc(var(--space-size) / 2);
    z-index:20;
}
.float.left{
    left:calc(var(--space-size) / 2);
    right:unset;
}
.float>a{
    margin:calc(var(--space-size) / 2);
    cursor:pointer;
    display:block;
    width:32px;
    height:32px;
    line-height:32px;
    font-size:16px;
    color:#fff;
    text-align:center;
    border-radius:100%;
    background-color:var(--style-deep);
    transform:translate3d(0,0,0);
    transition-duration:300ms;
    transition-property:all;
    transition-timing-function:cubic-bezier(0.7,1,0.7,1);
    opacity:0.8;
}
.float>a:hover,.float>a.active{
    opacity:1;
}
.pager{
    text-align:right;
}
.pager>ul{
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    border:1px solid var(--style-dark);
    border-radius:var(--radius-size);
    margin:var(--space-size) 0;
    padding:0;
    display:inline-block;
}
.pager>ul>li{
    text-align:center;
    min-width:2.5rem;
    line-height:2.5rem;
    border-right:1px solid var(--style-dark);
    margin:0;
    padding:0;
    display:inline-block;
}
.pager>ul>li:last-child{
    border-right:none;
}
.pager>ul>li>a{
    text-align:center;
    text-decoration:none;
    padding:0 0.5rem;
    display:block;
    background-color:var(--style-input);
}
.pager>ul>li>a:hover{
    background-color:var(--style-normal);
}
.pager>ul>li.active>a{
    background-color:var(--style-normal);
    cursor:default;
}
.pager>ul>li.total>a{
    padding:0 0.8rem;
    cursor:default;
}
.mask{
    background-color:rgba(0,0,0,0.25);
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:10000;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
    opacity:0;
}
.dialog{
    background-color:#fff;
    box-shadow:0 0 0.5em 0.1em var(--style-light);
    border-radius:var(--radius-size);
    position:absolute;
    z-index:1;
}
.dialog>.dialog-head{
    font-size:1.2rem;
    padding:10px;
    border-bottom:solid 1px var(--style-light);
    justify-content:space-between;
    align-items:center;
    display:flex;
}
.dialog>.dialog-head>.dialog-title{
    font-size:1em;
    font-weight:normal;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
    margin:0;
}
.dialog>.dialog-head>.dialog-menu{
    font-size:1.1rem;
    white-space:nowrap;
    margin:0;
}
.dialog>.dialog-body{
    padding:10px;
    width:100%;
    height:100%;
}

.head,.main,.foot{
    position:relative;
}
.head .reversed,.head .fanbai{
    display:none;
}
.head.through .default,.head.through .moren{
    display:none;
}
.wrap{
    min-width:var(--wrap-min);
	max-width:var(--wrap-max);
	margin:0 auto;
    zoom:1;
} .mobile .wrap{
    padding:0 .5rem;
}
.wrap:after{
    content:"";
    height:0;
    clear:both;
    display:block;
}
.wrap .wrap{
    min-width:100%;
    max-width:100%;
    padding:0;
}

.rows{
    position: relative;
}
.rows:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:.96;
}
.rows .wrap{
    height:100%;
    position:relative;
}
.rows .cols{
    height:100%;
    vertical-align:top;
    display:inline-block;
    position:relative;
}

.nav{
    text-transform: capitalize;
}
.nav ul,.nav li{
    list-style:none;
    margin:0;
    padding:0;
}
.nav~.fun{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
}
.nav~.fun>.frm{
    position:relative;
}
.nav~.fun>.frm>i{
    cursor:pointer;
    position:absolute;
    top:calc(50% - .5rem);
    right:.6rem;
}
.nav~.fun>.frm>[type=search]{
    width:100%;
    padding:.5rem 1.5rem .5rem .5rem;
}
.nav~.fun.sale>.frm>i{
    right:unset;
    left:.6rem;
}
.nav~.fun.sale>.frm>[type=search]{
    padding:.5rem .5rem .5rem 2rem;
}
.nav~.fun>.usr{
    margin-left:5px;
}
.nav~.fun>.usr>a{
    font-size:1.6rem;
    text-align:center;
    padding:0 5px;
    display:inline-block;
    position:relative;
}
.nav~.fun>.usr>a:hover{
    opacity:.8;
}
.nav~.fun>.usr>a>.badge{
    position:absolute;
    top:-.5rem;
    right:-.5rem;
}
.nav~.btn{
    text-align:right;
    display:none;
}
.nav~.btn>a{
    font-size:18px;
    text-align:center;
    display:inline-block;
    position:relative;
}
.nav~.btn>a>.badge{
    position:absolute;
    top:-.6rem;
    right:-.6rem;
}
.nav~.btn>a.close>.badge{
    display:none;
}

.hdown{
    min-height:100%;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    position:relative;
}
.hdown .nav{
    height:100%;
}
.hdown .nav>ul{
    height:100%;
    display:flex;
}
.hdown .nav>ul>li{
    height:100%;
    flex:auto;
    position:relative;
}
.hdown .nav>ul>li>a{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hdown .nav ul>li{
    position:relative;
}
.hdown .nav ul>li>ul{
    display:none;
    min-width:100%;
    max-width:35em;
    position:absolute;
    top:100%;
    z-index:30;
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
}
.hdown .nav ul>li>ul>li>ul{
    top:0;
    left:100%;
}
.hdown .nav ul>li:hover>ul{
    display:block;
}
.hdown .nav ul>li>ul>li>a{
    line-height:1.3;
    padding:0.5rem 1.5rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display:block;
}
.hdown .nav ul>li>ul>li:first-child>a{
    padding-top:1.5rem;
}
.hdown .nav ul>li>ul>li:last-child>a{
    padding-bottom:1.5rem;
}

.hup{
    min-height:100%;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    position:relative;
}
.hup .nav{
    height:100%;
}
.hup .nav>ul{
    height:100%;
    display:flex;
}
.hup .nav>ul>li{
    height:100%;
    flex:auto;
    position:relative;
}
.hup .nav>ul>li>a{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hup .nav ul>li{
    position:relative;
}
.hup .nav ul>li>ul{
    display:none;
    min-width:100%;
    max-width:35em;
    position:absolute;
    bottom:100%;
    z-index:30;
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
}
.hup .nav ul>li>ul>li>ul{
    bottom:0;
    left:100%;
    height:fit-content;
}
.hup .nav ul>li:hover>ul{
    display:block;
}
.hup .nav ul>li>ul>li>a{
    line-height:1.3;
    padding:0.5rem 1.5rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display:block;
}
.hup .nav ul>li>ul>li:first-child>a{
    padding-top:1.5rem;
}
.hup .nav ul>li>ul>li:last-child>a{
    padding-bottom:1.5rem;
}

.vright .fun{
    margin:1rem 0;
}
.vright .nav ul>li{
    margin-bottom:1px;
    position:relative;
}
.vright .nav ul>li:last-child{
    margin-bottom:0;
}
.vright .nav ul>li>a{
    line-height:1.5;
    padding:1rem 1.5rem;
    display:block;
}
.vright .nav ul>li>ul{
    display:none;
    min-width:100%;
    position:absolute;
    top:0px;
    left:100%;
    z-index:30;
}
.vright .nav ul>li:hover>ul{
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
    display:block;
}
.vright .nav ul>li>ul[data-show]{
    backdrop-filter:none;
    background-color:unset;
    display:inherit;
    position:static;
}
.vright .nav ul>li>ul:not([data-hide])>li{
    padding-left:1rem;
}
.vright .nav.nav-center ul>li>ul:not([data-hide])>li{
    padding-left:.5rem;
    padding-right:.5rem;
}
.vright .nav.nav-right ul>li>ul:not([data-hide])>li{
    padding-left:0;
    padding-right:1rem;
}

.vleft .fun{
    margin:1rem 0;
}
.vleft .nav ul>li{
    margin-bottom:1px;
    position:relative;
}
.vleft .nav ul>li:last-child{
    margin-bottom:0;
}
.vleft .nav ul>li>a{
    line-height:1.5;
    padding:1rem 1.5rem;
    display:block;
}
.vleft .nav ul>li>ul{
    display:none;
    min-width:100%;
    position:absolute;
    top:0px;
    right:100%;
    z-index:30;
}
.vleft .nav ul>li:hover>ul{
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
    display:block;
}
.vleft .nav ul>li>ul[data-show]{
    backdrop-filter:none;
    background-color:unset;
    display:inherit;
    position:static;
}
.vleft .nav ul>li>ul:not([data-hide])>li{
    padding-left:1rem;
}
.vleft .nav.nav-center ul>li>ul:not([data-hide])>li{
    padding-left:.5rem;
    padding-right:.5rem;
}
.vleft .nav.nav-right ul>li>ul:not([data-hide])>li{
    padding-left:0;
    padding-right:1rem;
}

.navpop{
    position:fixed;
    top:0px;
    right:0px;
    z-index:200;
    width:61.8%;
    height:100%;
    padding:5rem 1.5rem;
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
    box-shadow:0 0 1rem 1rem var(--style-normal);
    display:block;
}
.navpop .btn{
    position:absolute;
    top:1.5rem;
    right:1.5rem;
}
.navpop .fun{
    width:calc(100% - 3rem);
    position:absolute;
    bottom:1.5rem;
    right:1.5rem;
}
.navpop .nav{
    height:100%;
    overflow-y:auto;
}
.navpop .nav ul>li{
    margin-bottom:1px;
}
.navpop .nav ul>li:last-child{
    margin-bottom:0;
}
.navpop .nav ul>li>a{
    line-height:1.5;
    padding:1rem 1.5rem;
    display:block;
}
.navpop .nav ul>li>ul{
    display:none;
}
.navpop .nav ul>li>ul[data-show]{
    display:inherit;
    position:static;
}
.navpop .nav ul>li>ul>li{
    padding-left:1rem;
}
.navpop .nav.nav-center ul>li>ul>li{
    padding-left:.5rem;
    padding-right:.5rem;
}
.navpop .nav.nav-right ul>li>ul>li{
    padding-left:0;
    padding-right:1rem;
}

.local{
    text-transform:capitalize;
    margin:1rem 0;
}
.local>ol{
    padding:0;
    margin:0;
    list-style:none;
    display:inline-block;
}
.local>ol>li{
    display:inline-block;
}
.local>ol>li:not(:last-child)::after{
    content:" › ";
    font-size:1.2rem;
    font-family:Verdana;
    text-align:center;
    padding:0 0.5rem;
    display:inline-block;
    opacity:.5;
}

.grid{
    list-style:none;
    margin:0;
    padding:0;
}
.grid>li{
    list-style:none;
    margin:0;
    vertical-align:top;
    display:inline-block;
    position:relative;
}
.grid>li>article{
    text-align:center;
    margin:var(--space-size);
}
.grid>li.tl>article{
    text-align:left;
}
.grid>li.tr>article{
    text-align:right;
}
.grid>li.tc>article{
    text-align:center;
}
.grid>li>article figure{
    margin:0;
    position:relative;
}
.grid>li>article img{
    width:100%;
    object-fit:cover;
}
.grid>li>article h1{
    font-size:var(--font-size);
    font-weight:normal;
    line-height:1.5em;
    max-height:4.5em;
    text-overflow:ellipsis;
    overflow:hidden;
    margin:.5em 0;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.grid>li>article h3{
    font-size:var(--font-size);
    font-weight:normal;
    line-height:1.5em;
    margin:.5em 0;
}
.grid>li>article em{
    color:var(--color-primary);
    font-style:normal;
}
.grid>li>article em>b{
    font-size:1.3rem;
}
.grid>li>article del{
    font-style:normal;
    font-weight:normal;
}

.grid.list.archive>li>article{
    text-align:left;
    margin:0;
    padding:1rem;
    border-bottom:1px solid var(--style-normal);
    display:flex;
    justify-content:space-between;
}
.grid.list.archive>li>article h1{
    margin:0;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display:inline-block;
}
.grid.list.archive>li>article time{
    white-space:nowrap;
    padding-left:1rem;
}

.data #photo{
    display:grid;
    grid-template-columns:1fr auto;
}
.data #zoom{
    width:100%;
    padding-bottom:calc(var(--space-size) / 2);
}
.data #zoom>li{
    text-align:center;
}
.data #zoom>li:not(:first-child){
    display:none;
}
.data #thumb{
    padding-bottom:calc(var(--space-size) / 2);
}
.data #thumb img{
    width:80px;
    height:80px;
    object-fit:cover;
}
.data #thumb>li{
    width:80px;
    margin:0 0 calc(var(--space-size) / 2) calc(var(--space-size) / 2);
    cursor:pointer;
}
.data #thumb>li>a>img{
    border:2px solid var(--style-normal);
    opacity:.8;
}
.data #thumb>li>a:hover>img, .data #thumb>li>a.active>img{
    border:2px solid var(--style-deep);
    opacity:1;
}
.mobile .data #photo{display:block;}
.mobile .data #thumb{width:100%;white-space:nowrap;overflow-x:auto;}
.mobile .data #thumb>li{margin:0 calc(var(--space-size) / 2) calc(var(--space-size) / 2) 0;display:inline-block;}
.data .body{
    overflow-wrap:break-word;
    overflow-x:auto;
    padding:1rem 0;
}
.data .name{
    font-size:2rem;
    font-weight:normal;
    line-height:1.2;
    margin:0;
}
.mobile .data .name{font-size:1.6rem;}
.data .subname{
    font-size:1.2rem;
    font-weight:normal;
    line-height:1.2;
    margin:.5rem 0 0 0;
    opacity:.8;
}
.mobile .data .subname{font-size:1rem;}
.data .tips{
    margin:1rem 0 0 0;
    opacity:.8;
}
.data .info{
    margin:1rem 0 0 0;
    overflow-wrap:break-word;
}
.data .tag{
    text-transform:capitalize;
    margin:.5rem 0 0 0;
    opacity:.8;
}
.data .tag>li{
    vertical-align:top;
    padding:.5rem 1rem .5rem 0;
    margin:0;
    display:inline-block;
}
.data .spu{
    margin:.5rem 0 0 0;
}
.data .spu>li{
    vertical-align:top;
    padding:.5rem 0;
    margin:0;
    display:inline-block;
}
.data .spu>li>dt,.data .spu>li>dd{
    padding:.5rem 0 0 0;
    margin:0;
}
.data .sale{
    margin:.5rem 0 0 0;
}
.data .sale>.price{
    color:var(--color-primary);
    margin:1rem 0 0 0;
}
.data .sale>.price .unit{
    font-size:1.6em;
    font-weight:bold;
    margin-right:.5rem;
}
.data .sale>.sku{
    margin:.5rem 0 0 0;
    padding:0;
}
.data .sale>.sku li{
    list-style:none;
    margin:0;
    padding:.5rem 0 0 0;
}
.data .sale>.sku [data-sku]{
    line-height:32px;
    min-width:4rem;
    padding:0 1rem;
    margin:0 .5rem .5rem 0;
    text-align:center;
    white-space:nowrap;
    display:inline-block;
    border:1px solid var(--style-normal);
    background-color:var(--style-input);
    cursor:pointer;
}
.data .sale>.sku [data-sku]:last-child{
    margin:0 0 .5rem 0;
}
.data .sale>.sku [data-sku]:hover,.data .sale>.sku [data-sku].active{
    color:var(--color-text);
    border:1px solid var(--color-primary);
    background-color:var(--style-normal);
}
.data .sale>.qty{
    margin:.5rem 0 0 0;
    padding:0;
}
.data .sale>.btn{
    margin:1rem 0 0 0;
}
.data .sale>.btn>button{
    padding:.5rem 2rem;
    margin:0 .5rem 0 0;
}
.data .sale>.btn>button:last-child{
    margin:0;
}

.filter .active{
    font-weight:bold;
}
.filter [data-define=less]::before{
    content:'Less than ';
}
.filter [data-define=more]::before{
    content:'More than ';
}
.filter [data-define=clean]::after{
    content:'Clean';
}
[lang*=zh] .filter [data-define=less]::before{
    content:'';
}
[lang*=zh] .filter [data-define=less]::after{
    content:'以下';
}
[lang*=zh] .filter [data-define=more]::before{
    content:'';
}
[lang*=zh] .filter [data-define=more]::after{
    content:'以上';
}
[lang*=zh] .filter [data-define=clean]::after{
    content:'清除';
}
.desktop .filter{
    border:1px solid var(--style-normal);
    border-radius:var(--radius-size);
    margin:var(--space-size) 0;
    padding:calc(var(--space-size) / 2) 0;
}
.desktop .filter>li{
    border-bottom:1px dashed var(--style-normal);
    padding:calc(var(--space-size) / 2) var(--space-size);
    display:grid;
    grid-template-columns:auto 1fr;
}
.desktop .filter>li:last-child{
    border-bottom:none;
}
.desktop .filter>li>em{
    display:inline-block;
    width:8em;
    font-weight:normal;
    font-style:normal;
    opacity:.6;
}
.desktop .filter>li>nav>ul{
    display:inline-block;
}
.desktop .filter>li>nav>ul>li{
    display:inline-block;
    padding:0 var(--space-size);
}
.mobile .filter{
    display:flex;
    height:55px;
    background-color:var(--style-face);
}
.mobile .filter>li{
    height:100%;
    flex:auto;
    position:relative;
}
.mobile .filter>li>em{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:normal;
    font-style:normal;
}
.mobile .filter>li>nav{
    min-width:100%;
    max-width:35em;
    display:none;
    position:absolute;
    top:100%;
    z-index:30;
    backdrop-filter:blur(3px);
    background-color:var(--style-face);
    padding:0.5rem;
}
.mobile .filter>li:hover>nav{
    display:block;
}
.mobile .filter>li>nav>ul>li>a{
    line-height:1.3;
    padding:0.5rem 1.5rem;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    display:block;
}

.card{
    border:1px solid var(--style-normal);
    background-color:var(--style-input);
    padding:var(--space-size);
}
.rows .title{
    padding:1rem 0;
    margin:0 0 1rem 0;
}
.rows .title>.name{
    font-size:2rem;
    font-weight:normal;
    line-height:1.2;
    margin:0;
}
.mobile .rows .title>.name{font-size:1.6rem;}
.rows .title>.subname{
    font-size:1.2rem;
    font-weight:normal;
    line-height:1.2;
    margin:.5rem 0 0 0;
    opacity:.8;
}
.mobile .rows .title>.subname{font-size:1rem;}
.rows .more{
    padding:1rem 0;
}
.rows .more>.btn{
    padding:.5em 2em;
    display:inline-block;
}
.rows .more>.btn:hover{
    opacity:.8;
}
@media screen and (min-width:768px){[data-visible="mobile"],.cols[data-desktop^="-"]{display:none}}
@media screen and (max-width:768px){[data-visible="desktop"],.cols[data-mobile^="-"]{display:none}}