/*
 * uigg 3.1 (build 20260629)
 * Project: https://ui.gg
 * Author: https://www.mixice.com
 * Github: https://github.com/mixice/uigg
 * license: MIT
 */

/* import */
@import url('ico/ico.css');

/* basic */
:where(html, body, div, span, object, iframe, frame, h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code, tt, hr, del, dfn, em, img, ins, kbd, samp, item, cont, alia, hint,
big, small, strong, sub, sup, var, b, a, s, u, x, o, z, d, h, m, y, q, p, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, summary,
button, input, select, textarea, optgroup, time, mark, audio, video, marquee, images, add,
menu, menu-cont, menu-group, menu-list, name, name-logo, name-search,
tab, tab-list, tab-cont, tab-group, drop, drop-cont, drop-list, choice, choice-list,
chat, chat-title, chat-sider, chat-cont, chat-list, chat-message, chat-tool, chat-control, chat-tip,
pop, pop-main, pop-title, pop-cont, pop-solve, pop-choice, pop-sider,
swiper, swiper-wrapper, swiper-slide, swiper-arrow, swiper-prev, swiper-next, swiper-dot,
alert, alert-main, alert-cont, alert-solve, hop, hop-cont, fold, fold-group, fold-title, fold-cont,
countdown, tip, page, music, space, rate, scaler, notify, empty, step, crumb, reminder, n, notice) {margin: 0;padding: 0;border: 0;outline: 0;background: transparent center no-repeat;background-size: contain;box-sizing: border-box;font-family: uigg;border-color: var(--eee);border-style: solid;-webkit-tap-highlight-color: transparent;border-radius: 0;}
:where(article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary,
menu, menu-cont, menu-group, menu-list, name, name-logo, name-search, tab, tab-list, tab-cont, tab-group,
drop, drop-cont, drop-list, choice, choice-list, chat, chat-title, chat-sider, chat-cont, chat-list, chat-message, chat-tool, chat-control, chat-tip,
pop, pop-main, pop-title, pop-cont, pop-solve, pop-choice, pop-sider, alert, alert-main, alert-cont, alert-solve,
swiper, swiper-wrapper, swiper-slide, swiper-arrow, swiper-prev, swiper-next, swiper-dot,
hop, hop-cont, fold, fold-group, fold-title, fold-cont, countdown, tip, page, music, space, rate, scaler, notify, empty,
step, crumb, reminder, n, notice, item, cont, alia, hint, images, add) {display: block;}
.transition,.btn,a {transition-duration: .3s;}
html,body {height: 100%;}
:where(html, body, .avatar, .upload-group, swiper-slide) {background-size: cover;}
:where(html, body, input, select, textarea, button) {font-size: 14px;}
:where(html) {-webkit-font-smoothing: antialiased;}
:where(body, a) {color: var(--333);}
:where(a, a:hover, b, i, em, cite) {text-decoration: none;font-style: normal;}
:where(a, x, o, s, button, .btn, .smooth, .return, .mono-click, drop, fold-title) {cursor: pointer;}
:where(p) {margin: 0;line-height: 1.8;text-align: justify;}
:where(ul, li) {list-style: none;}
:where(ul) {overflow: hidden;}
:where(hr) {border-top-width: 1px;}
:where(z) {display: inline-block;}
:where(u) {flex: 1;min-width: 0;}

::selection {background-color: var(--333);color: var(--ccc);text-shadow: none;}
::-webkit-scrollbar {background-color: transparent;width: 10px;}
::-webkit-scrollbar-thumb {background-color: var(--000-1);}

@media(max-width:640px){
	:where(html, body, input, select, textarea, button) {font-size: .18rem;}
	::-webkit-scrollbar {width: .03rem;}
    body::-webkit-scrollbar {width: 0;}
}

/* frame */
.main,
.mobile {width: 100%;margin: auto;position: relative;}
.main {max-width: 1300px;padding: 0 10px;}
.mobile {max-width: 640px;min-height: 100%;}
.only-web {display: block;}
.only-mob {display: none;}
[cover],.cover {object-fit: cover;background-size: cover;width: 100%;height: 100%;}
[contain],.contain {object-fit: contain;background-size: contain;width: 100%;height: 100%;}
[center],.center {display: flex !important;justify-content: center;align-items: center;}
[center] > .ico,.center > .ico {margin: auto 0;}
.flex {display: flex;}
.flex-auto {flex: 1;min-width: 0;}
.flex-off {flex: none !important;}
.flex-column {display: flex;flex-direction: column;}
.clear {clear: both;}
.hide {display: none;}
.show {display: block;}
[hide] {display: none !important;}
[show] {display: block !important;}
.single {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;flex: 1;min-width: 0;}
.float-left {float: left !important;}
.float-right {float: right !important;}
.block {width: 100%;overflow: hidden;position: relative;}
.wide {width: 100% !important;flex: 1;}
.wide-10 {width: 10% !important;}
.wide-20 {width: 20% !important;}
.wide-30 {width: 30% !important;}
.wide-40 {width: 40% !important;}
.wide-50 {width: 50% !important;}
.wide-60 {width: 60% !important;}
.wide-70 {width: 70% !important;}
.wide-80 {width: 80% !important;}
.wide-90 {width: 90% !important;}
.full {width: 100% !important;height: 100% !important;}
.full-device {width: 100vw !important;height: 100vh !important;}
.fullscreen:after {content: '\e9f7';}
:fullscreen .fullscreen:after,.fullscreen.active:after {content: '\e9f8';}
.transparent {opacity: 0;}
.absolute,.absolute-1,.absolute-2,.absolute-3,.absolute-4,.absolute-5,.absolute-6,.absolute-7,.absolute-8,.absolute-9 {position: absolute;margin: auto;}
.fixed,.fixed-1,.fixed-2,.fixed-3,.fixed-4,.fixed-5,.fixed-6,.fixed-7,.fixed-8,.fixed-9 {position: fixed;margin: auto;}
.absolute-1,.absolute-2,.absolute-4,.absolute-5,.absolute-7,.absolute-8,.fixed-1,.fixed-2,.fixed-4,.fixed-5,.fixed-7,.fixed-8 {left: 0;}
.absolute-2,.absolute-3,.absolute-5,.absolute-6,.absolute-8,.absolute-9,.fixed-2,.fixed-3,.fixed-5,.fixed-6,.fixed-8,.fixed-9 {right: 0;}
.absolute-1,.absolute-2,.absolute-3,.absolute-4,.absolute-5,.absolute-6,.fixed-1,.fixed-2,.fixed-3,.fixed-4,.fixed-5,.fixed-6 {top: 0;}
.absolute-4,.absolute-5,.absolute-6,.absolute-7,.absolute-8,.absolute-9,.fixed-4,.fixed-5,.fixed-6,.fixed-7,.fixed-8,.fixed-9 {bottom: 0;}

@media(max-width:640px){
	.main {padding: 0 .1rem;}
    .only-web {display: none;}
    .only-mob {display: block;}
}

/* special */
.corner,
.shadow {position: relative;}
.corner::after,
.shadow::after {content: '';position: absolute;margin: auto;}
.corner::after {width: 0;height: 0;border: 0 transparent solid;}
.shadow::after {width: calc(100% - 20px);height: 10px;left: 0;right: 0;bottom: -5px;background-color: var(--color);filter: blur(8px);}
.adrift {filter: drop-shadow(0 10px 10px var(--color));}
.avatar {border-radius: 100%;display: block;overflow: hidden;
    img {object-fit: cover;width: 100%;height: 100%;}
}
[uigg="emot"] s {width: 50px;height: 50px;display: inline-block;background-size: 90%;vertical-align: middle;
    &:hover {background-color: var(--eee);}
}
img[uigg="color"] {content-visibility: hidden;}

@media(max-width:640px){
	.shadow::after {width: calc(100% - .2rem);height: .1rem;bottom: -.05rem;filter: blur(.1rem);}
    .adrift {filter: drop-shadow(0 .1rem .1rem var(--color));}
    [uigg="emot"] s {width: .6rem;height: .6rem;}
}

/* color */
:root {
    --color : var(--sapphire);

    --fff: #fff;
    --f7: #f7f7f7;
    --eee: #eee;
    --ddd: #ddd;
    --ccc: #ccc;
    --bbb: #bbb;
    --999: #999;
    --666: #666;
    --333: #333;
    --222: #222;
    --111: #111;
    --000: #000;

    --brown: #8d1313;
    --red: #ff3b52;
    --pink: #ff3ea6;
    --purple: #d844d8;
    --sapphire: #6c62f9;
    --blue: #2e6efd;
    --cyan: #0df0f0;
    --green: #47DCA1;
    --lime: #af0;
    --yellow: #fe0;
    --orange: #fb0;
    --tomato: #f60;

    --fff-1: color-mix(in srgb, white 10%, transparent);
    --fff-2: color-mix(in srgb, white 20%, transparent);
    --fff-3: color-mix(in srgb, white 30%, transparent);
    --fff-4: color-mix(in srgb, white 40%, transparent);
    --fff-5: color-mix(in srgb, white 50%, transparent);
    --fff-6: color-mix(in srgb, white 60%, transparent);
    --fff-7: color-mix(in srgb, white 70%, transparent);
    --fff-8: color-mix(in srgb, white 80%, transparent);
    --fff-9: color-mix(in srgb, white 90%, transparent);

    --000-1: color-mix(in srgb, black 10%, transparent);
    --000-2: color-mix(in srgb, black 20%, transparent);
    --000-3: color-mix(in srgb, black 30%, transparent);
    --000-4: color-mix(in srgb, black 40%, transparent);
    --000-5: color-mix(in srgb, black 50%, transparent);
    --000-6: color-mix(in srgb, black 60%, transparent);
    --000-7: color-mix(in srgb, black 70%, transparent);
    --000-8: color-mix(in srgb, black 80%, transparent);
    --000-9: color-mix(in srgb, black 90%, transparent);
}

.co-white {color: var(--white) !important;}
.co-fff {color: var(--fff) !important;}
.co-f7 {color: var(--f7) !important;}
.co-eee {color: var(--eee) !important;}
.co-ddd {color: var(--ddd) !important;}
.co-ccc {color: var(--ccc) !important;}
.co-bbb {color: var(--bbb) !important;}
.co-999 {color: var(--999) !important;}
.co-666 {color: var(--666) !important;}
.co-333 {color: var(--333) !important;}
.co-222 {color: var(--222) !important;}
.co-111 {color: var(--111) !important;}
.co-000 {color: var(--000) !important;}
.co-black {color: var(--black) !important;}
.co-brown {color: var(--brown) !important;}
.co-red {color: var(--red) !important;}
.co-pink {color: var(--pink) !important;}
.co-purple {color: var(--purple) !important;}
.co-sapphire {color: var(--sapphire) !important;}
.co-blue {color: var(--blue) !important;}
.co-cyan {color: var(--cyan) !important;}
.co-green {color: var(--green) !important;}
.co-lime {color: var(--lime) !important;}
.co-yellow {color: var(--yellow) !important;}
.co-orange {color: var(--orange) !important;}
.co-tomato {color: var(--tomato) !important;}
.co-color {color: var(--color)!important;}

.bg-white {background-color: var(--white) !important;}
.bg-fff {background-color: var(--fff) !important;}
.bg-f7 {background-color: var(--f7) !important;}
.bg-eee {background-color: var(--eee) !important;}
.bg-ddd {background-color: var(--ddd) !important;}
.bg-ccc {background-color: var(--ccc) !important;}
.bg-bbb {background-color: var(--bbb) !important;}
.bg-999 {background-color: var(--999) !important;}
.bg-666 {background-color: var(--666) !important;}
.bg-333 {background-color: var(--333) !important;}
.bg-222 {background-color: var(--222) !important;}
.bg-111 {background-color: var(--111) !important;}
.bg-000 {background-color: var(--000) !important;}
.bg-black {background-color: var(--black) !important;}
.bg-brown {background-color: var(--brown) !important;}
.bg-red {background-color: var(--red) !important;}
.bg-pink {background-color: var(--pink) !important;}
.bg-purple {background-color: var(--purple) !important;}
.bg-sapphire {background-color: var(--sapphire) !important;}
.bg-blue {background-color: var(--blue) !important;}
.bg-cyan {background-color: var(--cyan) !important;}
.bg-green {background-color: var(--green) !important;}
.bg-lime {background-color: var(--lime) !important;}
.bg-yellow {background-color: var(--yellow) !important;}
.bg-orange {background-color: var(--orange) !important;}
.bg-tomato {background-color: var(--tomato) !important;}
.bg-color {background-color: var(--color)!important;}
.bg-wheel {background-image: conic-gradient(at 50% 50%,var(--red) 0%,var(--pink) 10%,var(--purple) 20%,var(--sapphire) 30%,var(--blue) 40%,var(--cyan) 50%,var(--green) 60%,var(--lime) 70%,var(--yellow) 80%,var(--orange) 90%,var(--red) 100%);}

.mono,.mono-click {filter: grayscale(100%);}
.mono-click {}
.mono-click:hover {filter: grayscale(0%);}
.mix-abrazine {backdrop-filter: blur(10px);}
.mix-hue {mix-blend-mode: hue;}
.mix-multiply {mix-blend-mode: multiply;}
.mix-screen {mix-blend-mode: screen;}
.mix-luminosity {mix-blend-mode: luminosity;}
.mix-difference {mix-blend-mode: difference;}

@media(max-width:640px){
    .mix-abrazine {backdrop-filter: blur(.1rem);}
}

/* anime */
.anime-rotate,
.anime-beat-x,.anime-beat-y,.anime-beat-z,.anime-beat-r,
.anime-fade-in,.anime-fade-in-down,.anime-fade-in-left,.anime-fade-in-right,.anime-fade-in-up,
.anime-fade-out,.anime-fade-out-down,.anime-fade-out-left,.anime-fade-out-right,.anime-fade-out-up,
.anime-bounce-in,.anime-bounce-in-down,.anime-bounce-in-left,.anime-bounce-in-right,.anime-bounce-in-up,
.anime-bounce-out,.anime-bounce-out-down,.anime-bounce-out-left,.anime-bounce-out-right,.anime-bounce-out-up,
.anime-flip-in-x,.anime-flip-in-y,.anime-flip-out-x,.anime-flip-out-y,
.anime-zoom-in,.anime-zoom-out,.anime-zoom-in-enlarge,.anime-zoom-out-enlarge {animation-duration: .6s;animation-fill-mode: both;}
.anime-spasm {animation-duration: .3s;animation-name: anime-spasm;}
.anime-bounce-in,.anime-bounce-in-down,.anime-bounce-in-left,.anime-bounce-in-right,.anime-bounce-in-up {animation-timing-function: cubic-bezier(.215, .61, .355, 1);animation-duration: 1s;}
.anime-shrink-in,.anime-shrink-out,.anime-shrink-in-enlarge,.anime-shrink-out-enlarge {animation-duration: 2s;animation-fill-mode: both;}
.anime-flip-in-x,.anime-flip-in-y,.anime-flip-out-x,.anime-flip-out-y {backface-visibility: visible;}

.anime-rotate {animation-name: anime-rotate;animation-timing-function: linear;}
.anime-beat-x {animation-name: anime-beat-x;}
.anime-beat-y {animation-name: anime-beat-y;}
.anime-beat-z {animation-name: anime-beat-z;}
.anime-beat-r {animation-name: anime-beat-r;animation-timing-function: linear;}
.anime-fade-in {animation-name: anime-fade-in;}
.anime-fade-in-down {animation-name: anime-fade-in-down;}
.anime-fade-in-left {animation-name: anime-fade-in-left;}
.anime-fade-in-right {animation-name: anime-fade-in-right;}
.anime-fade-in-up {animation-name: anime-fade-in-up;}
.anime-fade-out {animation-name: anime-fade-out;}
.anime-fade-out-down {animation-name: anime-fade-out-down;}
.anime-fade-out-left {animation-name: anime-fade-out-left;}
.anime-fade-out-right {animation-name: anime-fade-out-right;}
.anime-fade-out-up {animation-name: anime-fade-out-up;}
.anime-bounce-in {animation-name: anime-bounce-in;}
.anime-bounce-in-down {animation-name: anime-bounce-in-down;}
.anime-bounce-in-left {animation-name: anime-bounce-in-left;}
.anime-bounce-in-right {animation-name: anime-bounce-in-right;}
.anime-bounce-in-up {animation-name: anime-bounce-in-up;}
.anime-bounce-out {animation-name: anime-bounce-out;}
.anime-bounce-out-down {animation-name: anime-bounce-out-down;}
.anime-bounce-out-left {animation-name: anime-bounce-out-left;}
.anime-bounce-out-right {animation-name: anime-bounce-out-right;}
.anime-bounce-out-up {animation-name: anime-bounce-out-up;}
.anime-flip-in-x {animation-name: anime-flip-in-x;}
.anime-flip-in-y {animation-name: anime-flip-in-y;}
.anime-flip-out-x {animation-name: anime-flip-out-x;}
.anime-flip-out-y {animation-name: anime-flip-out-y;}
.anime-zoom-in {animation-name: anime-zoom-in;}
.anime-zoom-out {animation-name: anime-zoom-out;}
.anime-zoom-in-enlarge {animation-name: anime-zoom-in-enlarge;}
.anime-zoom-out-enlarge {animation-name: anime-zoom-out-enlarge;}
.anime-shrink-in {animation-name: anime-shrink-in;}
.anime-shrink-out {animation-name: anime-shrink-out;}
.anime-shrink-in-enlarge {animation-name: anime-shrink-in-enlarge;}
.anime-shrink-out-enlarge {animation-name: anime-shrink-out-enlarge;}

.infinite {animation-iteration-count: infinite;}
.alternate {animation-direction: alternate;}
.reverse {animation-direction: reverse;}

@keyframes anime-spasm {0% {transform: translate(0,0);}10% {transform: translate(5px,0);}20% {transform: translate(0,0);}30% {transform: translate(-5px,0);}40% {transform: translate(0,5px);}50% {transform: translate(0,0);}60% {transform: translate(0,-5px);}70% {transform: translate(0,0);}80% {transform: translate(5px,5px);}90% {transform: translate(0,0);}100% {transform: translate(-5px,-5px);}}
@keyframes anime-rotate {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}
@keyframes anime-beat-x {0% {transform: translateX(0);}50% {transform: translateX(20px);}100% {transform: translateX(0);}}
@keyframes anime-beat-y {0% {transform: translateY(0);}50% {transform: translateY(20px);}100% {transform: translateY(0);}}
@keyframes anime-beat-z {0% {transform: scale(1);}50% {transform: scale(1.05);}100% {transform: scale(1);}}
@keyframes anime-beat-r {0% {transform: rotate(0);}25% {transform: rotate(3deg);}75% {transform: rotate(-3deg);}100% {transform: rotate(0);}}
@keyframes anime-fade-in {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes anime-fade-in-down {0% {opacity: 0;transform: translateY(-100%);}100% {opacity: 1;transform: translateY(0);}}
@keyframes anime-fade-in-left {0% {opacity: 0;transform: translateX(-100%);}100% {opacity: 1;transform: translateX(0);}}
@keyframes anime-fade-in-right {0% {opacity: 0;transform: translateX(100%);}100% {opacity: 1;transform: translateX(0);}}
@keyframes anime-fade-in-up {0% {opacity: 0;transform: translateY(100%);}100% {opacity: 1;transform: translateY(0);}}
@keyframes anime-fade-out {0% {opacity: 1;}100% {opacity: 0;}}
@keyframes anime-fade-out-down {0% {opacity: 1;}100% {opacity: 0;transform: translateY(100%);}}
@keyframes anime-fade-out-left {0% {opacity: 1;}100% {opacity: 0;transform: translateX(-100%);}}
@keyframes anime-fade-out-right {0% {opacity: 1;}100% {opacity: 0;transform: translateX(100%);}}
@keyframes anime-fade-out-up {0% {opacity: 1;}100% {opacity: 0;transform: translateY(-100%);}}
@keyframes anime-bounce-in {0% {opacity: 0;transform: scale(.3);}20% {transform: scale(1.1);}40% {transform: scale(.9);}60% {opacity: 1;transform: scale(1.03);}80% {transform: scale(.97);}100% {opacity: 1;transform: scale(1);}}
@keyframes anime-bounce-in-down {0% {opacity: 0;transform: translateY(-1000px);}60% {opacity: 1;transform: translateY(25px);}75% {transform: translateY(-10px);}90% {transform: translateY(5px);}100% {transform: translate(0);}}
@keyframes anime-bounce-in-left {0% {opacity: 0;transform: translateX(-1000px);}60% {opacity: 1;transform: translateX(25px);}75% {transform: translateX(-10px);}90% {transform: translateX(5px);}100% {transform: translate(0);}}
@keyframes anime-bounce-in-right {0% {opacity: 0;transform: translateX(3000px);}60% {opacity: 1;transform: translateX(-25px);}75% {transform: translateX(10px);}90% {transform: translateX(-5px);}100% {transform: translate(0);}}
@keyframes anime-bounce-in-up {0% {opacity: 0;transform: translateY(3000px);}60% {opacity: 1;transform: translateY(-20px);}75% {transform: translateY(10px);}90% {transform: translateY(-5px);}100% {transform: translate(0);}}
@keyframes anime-bounce-out {20% {transform: scale(.9);}50% {opacity: 1;transform: scale(1.1);}100% {opacity: 0;transform: scale(.3);}}
@keyframes anime-bounce-out-down {20% {transform: translateY(10px);}50% {opacity: 1;transform: translateY(-20px);}100% {opacity: 0;transform: translateY(1000px);}}
@keyframes anime-bounce-out-left {20% {opacity: 1;transform: translateX(20px);}100% {opacity: 0;transform: translateX(-1000px);}}
@keyframes anime-bounce-out-right {20% {opacity: 1;transform: translateX(-20px);}100% {opacity: 0;transform: translateX(1000px);}}
@keyframes anime-bounce-out-up {20% {transform: translateY(-10px);}50% {opacity: 1;transform: translateY(20px);}100% {opacity: 0;transform: translateY(-1000px);}}
@keyframes anime-flip-in-x {0% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg);opacity: 0;}100% {transform: perspective(400px);opacity: 1;}}
@keyframes anime-flip-in-y {0% {transform: perspective(400px) rotate3d(0, 1, 0, 90deg);opacity: 0;}100% {transform: perspective(400px);opacity: 1;}}
@keyframes anime-flip-out-x {0% {transform: perspective(400px);opacity: 1;}100% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg);opacity: 0;}}
@keyframes anime-flip-out-y {0% {transform: perspective(400px);opacity: 1;}100% {transform: perspective(400px) rotate3d(0, 1, 0, 90deg);opacity: 0;}}
@keyframes anime-zoom-in {0% {opacity: 0;transform: scale(0.3);}100% {opacity: 1;}}
@keyframes anime-zoom-out {0% {opacity: 1;}100% {opacity: 0;transform: scale(0.3);}}
@keyframes anime-zoom-in-enlarge {0% {opacity: 0;transform: scale(3);}100% {opacity: 1;}}
@keyframes anime-zoom-out-enlarge {0% {opacity: 1;}100% {opacity: 0;transform: scale(3);}}
@keyframes anime-shrink-in {0% {opacity: 0;filter: blur(20px);}100% {opacity: 1;filter: blur(0);}}
@keyframes anime-shrink-out {0% {opacity: 1;filter: blur(0);}100% {opacity: 0;filter: blur(20px);}}
@keyframes anime-shrink-in-enlarge {0% {opacity: 0;transform: scale(5);filter: blur(10px);}100% {opacity: 1;transform: scale(1);filter: blur(0);}}
@keyframes anime-shrink-out-enlarge {0% {opacity: 1;transform: scale(1);filter: blur(0);}100% {opacity: 0;transform: scale(5);filter: blur(10px);}}

/* media */
img {max-width: 100%;height: auto;vertical-align: middle;}
audio,canvas,video {display: inline-block;}
audio:not([controls]) {display: none;height: 0;}
video {object-fit: fill;}
canvas {user-select: none;}

a[title="到百度地图查看此区域"],
.BMap_cpyCtrl,
.anchorBL {display: none;}
.BMap_Marker {transform: scale(2);}

@media(max-width:640px){
    img {width: 100%;}
}

/* ico */
.ico {}
.ico-load,
.ico-ringdot {animation: anime-rotate 5s infinite linear;}

@media(max-width:640px){
    .ico {font-size: .3rem;}
}

/* load */
load {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999;background-color: white;
    &::after {width: 60px;height: 60px;border-radius: 100%;border: 3px var(--999) solid;content: '';position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;animation: anime-zoom-in 1s infinite alternate;filter: opacity(.3);}
}

@media(max-width:640px){
    load::after {width: .7rem;height: .7rem;}
}

/* top */
.top {opacity: 0;z-index: 1;
    &.btn {position: fixed;right: 0;bottom: 0;margin: 30px;width: 50px;font-size: 24px;font-weight: normal;padding: 0;
        &:hover {transform: translateY(-5px);}
    }
}

@media(max-width:640px){
    .top.btn {width: .7rem;height: .7rem;margin: .2rem;font-size: .32rem;
        &:hover {transform: translateY(0);}
    }
}

/* font */
@font-face {font-family: uigg;src: local('PingFang SC'),local('Microsoft Yahei');}
@font-face {font-family: yahei;src: local('Microsoft Yahei');}
@font-face {font-family: jhenghei;src: local('Microsoft JhengHei');}

.font-uigg {font-family: uigg;}
.font-yahei {font-family: yahei;}
.font-jhenghei {font-family: jhenghei;}
.font-nsimsun {font-family: nsimsun;}
.font-kaiti {font-family: kaiti;}
.font-lisu {font-family: lisu;}
.font-youyuan {font-family: youyuan;}
.font-fangsong {font-family: fangsong;}
.font-xingkai {font-family: STXingkai;}
.font-xinwei {font-family: STXinwei;}
.font-arial {font-family: arial;}
.font-tahoma {font-family: tahoma;}

h1,h2,h3,h4,h5,h6 {font-weight: bold;text-transform: capitalize;}
h1 {font-size: 26px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

@media(max-width:640px){
	h1 {font-size: .32rem;}
	h2 {font-size: .28rem;}
	h3 {font-size: .26rem;}
	h4 {font-size: .24rem;}
	h5 {font-size: .22rem;}
	h6 {font-size: .18rem;}
}

/* pop */
pop,
pop > x {width: 100%;height: 100%;left: 0;top: 0;}
pop {position: fixed;background-color: var(--000-8);z-index: 3;display: none;
    > x {position: absolute;}
    &[right] pop-sider {right: 0;}
    &[top] pop-choice {bottom: auto;top: 0;}
    pop-title {background-color: white;border-bottom-width: 1px;overflow: hidden;display: flex;align-items: center;
        h3 {line-height: 50px;padding: 0 20px;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 16px;}
        .ico {line-height: 50px;width: 50px;height: 50px;}
        .close:after {content: '\e826';}
    }
    pop-cont {background-color: white;display: block;overflow: auto;padding: 20px;max-height: 70vh;}
    pop-main {width: 90%;max-width: 720px;overflow: hidden;position: relative;z-index: 1;}
    pop-solve {display: flex;
        .btn {width: 100%;border-radius: 0;box-shadow: none;
            &:hover {transform: translate(0);}
        }
    }
    pop-choice,
    pop-sider {overflow: hidden;position: absolute;z-index: 1;}
    pop-choice {bottom: 0;width: 100%;}
    pop-sider {top: 0;width: 300px;height: 100%;display: flex;flex-direction: column;
        pop-cont {flex: 1;max-height: 100%;}
    }
}

@media(max-width:640px){
    pop-title {
        h3 {line-height: .7rem;padding: 0 .2rem;font-size: .24rem;}
        .ico {line-height: .7rem;width: .7rem;height: .7rem;}
    }
    pop-cont {padding: .2rem;}
    pop-sider {width: 5rem;}
}

/* tip */
tip {position: fixed;top: 50%;left: 50%;z-index: 999;padding: 5px 10px;line-height: 24px;border-radius: 5px;box-shadow: 0 3px 6px var(--000-1);background-color: var(--color);color: white;
    > * {padding: 3px;}
    &.green {background-color: var(--green);color: white;}
    &.red { background-color: var(--red);color: white;}
    &.orange {background-color: var(--orange);color: white;}
    &.white {background-color: white;color: var(--333);}
    &.black {background-color: var(--000);color: white;}
}

@media(max-width:640px){
    tip {padding: .05rem .1rem;line-height: .3rem;
        > * {padding: .05rem;}
    }
}

/* btn */
.btn {position: relative;background-color: var(--color);color: white;border-radius: 3px;text-transform: capitalize;display: inline-flex;align-items: center;justify-content: center;text-align: center;padding: 0 20px;height: 50px;line-height: 50px;user-select: none;
    .ico {margin: 5px;
        &:first-child {margin-left: -5px;}
        &:last-child {margin-right: -5px;}
    }
    &:hover {transform: translateY(5px);}
    &[disabled] {filter: grayscale(100%);pointer-events: none;}
}
.btn-flex {display: flex;justify-content: center;align-items: center;
    .btn {flex: 1;
        &:not(:last-child) {margin-right: 20px;}
    }
}
.btn-empty {background: none !important;border: 2px solid;color: var(--color);
    .ico {color: inherit;}
}
.btn-submit {padding: 0 50px;margin: 20px 0;}

@media(max-width:640px){
    .btn {height: .8rem;line-height: .8rem;padding: 0 .2rem;border-radius: .05rem;
        &:hover {transform: translateY(0);}
        .ico {margin: .05rem;font-size: .24rem;
            &:first-child {margin-left: -.05rem;}
            &:last-child {margin-right: -.05rem;}
        }
    }
    .btn-flex .btn:not(:last-child) {margin-right: .2rem;}
    .btn-submit {padding: 0 .5rem;margin: .2rem 0;}
}

/* nav */
nav {width: 100%;position: fixed;left: 0;bottom: 0;right: 0;margin: auto;z-index: 3;background-color: white;filter: drop-shadow(0 0 6px var(--000-1));max-width: 640px;display: flex;overflow: inherit;
    li {width: 100%;padding: 8px;position: relative;z-index: 1;
        a {display: block;padding: 8px 0;position: relative;border-radius: 5px;}
        .ico {display: block;margin: 0 auto 5px;font-size: 32px;}
        span {display: block;text-align: center;line-height: 100%;text-transform: capitalize;}
    }
    &[uigg] {background-color: transparent;
        svg {position: absolute;left: 0;right: 0;bottom: 0;margin: auto;width: 100%;height: .8rem;}
        li.midel {
            span {display: none;}
            .ico {width: 90px;height: 90px;border-radius: 100%;background-color: var(--color);display: flex;align-items: center;color: white;margin-top: -50px;box-shadow: 0 5px 10px var(--color);font-size: 36px;}
        }
    }
}
space {height: 150px;display: none;}

@media(max-width:640px){
    nav li {padding: .08rem;
        a {padding: .08rem 0;}
        .ico {margin: 0 auto .02rem;font-size: .32rem;}
        span {font-size: .18rem;}
    }
    nav[uigg] li.midel .ico {width: .9rem;height: .9rem;margin-top: -.5rem;box-shadow: 0 .05rem .1rem var(--color);font-size: .36rem;}
    space {height: 1.4rem;display: block;}
}

/* menu */
menu {text-transform: capitalize;
    x.ico {display: none;float: right;
        &:after {content: '\e961';}
    }
    menu-cont {text-align: center;
        li {cursor: pointer;position: relative;display: inline-block;
            &:hover menu-group {display: block;}
            a {display: block;user-select: none;}
            menu-group {position: absolute;left: 0;display: none;width: 100%;background-color: white;box-shadow: 0 3px 6px var(--000-1);overflow: hidden;
                a {line-height: 40px;}
                menu-list h6 {line-height: 50px;}
            }
        }
    }
}

@media(max-width:640px){
    menu {
        x.ico {display: block;width: .8rem;height: .8rem;line-height: .8rem;font-size: .42rem;}
        menu-cont {position: absolute;left:0;top: .8rem;background-color: var(--000-9);width: 100vw;display: none;
            li {width: 100%;height: auto;display: block;overflow: hidden;
                &:not(:last-child) {border-bottom: 1px var(--333) solid;}
                &:hover menu-group {display: none;}
                a {color: white;line-height: .7rem;}
                menu-group {width: 100%;background-color: var(--333);padding: 0;position: static;}
                menu-list h6 {color: white;line-height: .7rem;}
            }
        }
    }
}

/* title */
.title {text-align: center;
    h3,
    em {display: inline-block;vertical-align: middle;}
    span {display: block;}
}
.title-flex {display: flex;
    h3 {flex: 1;min-width: 0;padding: 0 10px;}
}

@media(max-width:640px){
    .title-flex h3 {padding: 0 .1rem;}
}

/* toggle */
.parent {}
o {font-family: ico !important;font-size: 24px;font-style: normal;font-weight: normal;text-decoration: none;text-align: center;vertical-align: middle;justify-content: center;margin: auto 0;line-height: 1;text-transform: none;display: inline-block;direction: ltr;letter-spacing: normal;word-wrap: normal;white-space: nowrap;color: var(--color);
    &.radio:after {content: '\e9ce';} &.radio.active:after {content: '\e9c6';}
    &.radio-done:after {content: '\e9ce';} &.radio-done.active:after {content: '\e9c5';}
    &.checkbox:after {content: '\e7da';} &.checkbox.active:after {content: '\e7dc';}
    &.checkbox-done:after {content: '\e7da';} &.checkbox-done.active:after {content: '\e7d7';}
    &.checkbox-cancel:after {content: '\e7da';} &.checkbox-cancel.active:after {content: '\e7d8';}
    &.checkbox-all {}
    &.favorite:after {content: '\e917';} &.favorite.active:after {content: '\e90b';}
    &.star:after {content: '\ea62';} &.star.active:after {content: '\ea65';}
    &.visibility:after {content: '\eb5a';} &.visibility.active:after {content: '\eb5d';}
    &.password:after {content: '\eb5a';} &.password.active:after {content: '\ebc6';}
    &.mic:after {content: '\e97b';} &.mic.active:after {content: '\e971';}
    &.volume:after {content: '\eb5b';} &.volume.active:after {content: '\eb60';}
    &.muzak:after {content: '\e98c';} &.muzak.active:after {content: '\e990';}
    &.phonecard:after {content: '\e9ab';} &.phonecard.active:after {content: '\e9a8';}
    &.cinema:after {content: '\e7c2';} &.cinema.active:after {content: '\eb20';}
    &.camera:after {content: '\e7be';} &.camera.active:after {content: '\e7c0';}
    &.aim:after {content: '\e70f';} &.aim.active:after {content: '\e707';}
    &.semaphore:after {content: '\e9fe';} &.semaphore.active:after {content: '\ea01';}
    &.suitcase:after {content: '\eb07';} &.suitcase.active:after {content: '\eb01';}
    &.light:after {content: '\e938';} &.light.active:after {content: '\e93a';}
    &.devicerotate:after {content: '\e733';} &.devicerotate.active:after {content: '\e731';}
    &.thumbtack:after {content: '\eb2f';} &.thumbtack.active:after {content: '\e7cb';}
    &.bell:after {content: '\e786';} &.bell.active:after {content: '\e788';}
    &.place:after {content: '\e9b1';} &.place.active:after {content: '\e9b2';}
    &.link:after {content: '\e8d8';} &.link.active:after {content: '\eb87';}
    &.blur:after {content: '\ec25';} &.blur.active:after {content: '\ec1a';}
    &.thumb-up:after {content: '\eb2d';} &.thumb-up.active:after {content: '\eb85';}
    &.thumb-down:after {content: '\eb28';} &.thumb-down.active:after {content: '\eb8a';}
    &.toggle:after {content: '\ecf7';} &.toggle.active:after {content: '\eb35';}
}

@media(max-width:640px){
    o {font-size: .36rem;margin: 0;}
}

/* form */
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="range"],
input[type="range"]::-webkit-slider-thumb,
input[type="search"]::-webkit-search-cancel-button,
select,
textarea,
progress,
::-webkit-outer-spin-button,
::-webkit-inner-spin-button {-webkit-appearance: none;appearance: none;}
::-webkit-input-placeholder {color: var(--ccc);text-transform: capitalize;}

progress {height: 4px;--progress-color: var(--color);color: var(--color);}
::-webkit-progress-bar {background-color: var(--f7);height: 4px;}
::-webkit-progress-value {background-color: var(--progress-color);}
progress[circle] {--progress-value: 0%;--progress-size: 100px;--progress-width: 4px;width: var(--progress-size);height: var(--progress-size);border-radius: 100%;background: conic-gradient(var(--progress-color) var(--progress-value),var(--f7) 0);mask: radial-gradient(farthest-side,transparent calc(100% - var(--progress-width) - 1px),#000 calc(100% - var(--progress-width)));
    &::-webkit-progress-bar,
    &::-webkit-progress-value {background: transparent;}
}

input[type="range"],
input[type="file"],
input[type="color"] {padding: 0;background: none !important;border: 0;}
input[type="range"]::-webkit-slider-runnable-track {height: 4px;background: linear-gradient(to right,var(--color) 0%,var(--color) var(--value, 0%),var(--f7) var(--value, 0%),var(--f7) 100%);}
input[type="range"]::-webkit-slider-thumb {width: 24px;height: 24px;background-color: var(--color);border-radius: 100%;margin-top: -10px;box-shadow: 0 3px 6px var(--color);}
input[type="file"]::-webkit-file-upload-button {background-color: var(--color);border: 0;cursor: pointer;height: 50px;color: white;border-radius: 3px;text-transform: capitalize;padding: 0 20px;}
input[type="color"] {width: 50px;height: 50px;
    &::-webkit-color-swatch-wrapper {padding: 0;}
    &::-webkit-color-swatch {border: none;border-radius: 2px;}
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"] {
    &::-webkit-calendar-picker-indicator {opacity: 0;}
    &::before {position: absolute;right: 13px;top: 0;font-family: ico !important;font-size: 24px;line-height: 50px;}
}
input[type="date"]::before {content: '\e7b2';}
input[type="datetime-local"]::before {content: '\e7bc';}
input[type="time"]::before {content: '\eb32';}
input[type="week"]::before {content: '\e7b7';}
input[type="month"]::before {content: '\e7bb';}

:where(choice, select, textarea,
input:not([type="range"],[type="file"],[type="color"])) {border: 1px var(--eee) solid;width: 100%;height: 50px;}
choice.active,
select:focus,
input:not([readonly]):focus,
textarea:not([readonly]):focus {border-color: var(--color);}
choice,
.select,
input,
.input {position: relative;}
.select::after,
choice::after,
.input i,
.input o {position: absolute;right: 13px;top: 0;font-family: ico !important;font-size: 24px;line-height: 50px;}
.select::after,
choice::after {content: '\e70a';pointer-events: none;color: var(--color);}
.input input,
select {padding: 0 50px 0 10px;}
.input {width: 100%;}
input {padding: 0 10px;}
input::before {color: var(--color);}
textarea {padding: 10px;line-height: 1.6;min-height: 120px;resize: none;}

.bloomer {padding: 10px;color: white;text-align: center;border-radius: 3px;background-color: var(--red);display: none;}

choice {cursor: pointer;
    x {position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;display: none;}
    a {padding: 0 10px;width: 100%;height: 50px;display: flex;align-items: center;text-transform: capitalize;}
    &.active {
        x,
        choice-list {display: block;}
    }
    choice-list {position: absolute;left: 0;top: 100%;background-color: white;box-shadow: 0 3px 6px var(--000-1);width: 100%;z-index: 1;display: none;
        a {
            &:not(:last-child) {border-bottom: 1px var(--eee) solid;}
            &:hover {background-color: var(--color);color: white;}
        }
    }
}

.form {
    item {display: flex;align-items: center;width: 100%;padding: 5px;min-height: 50px;
        alia {width: 120px;text-transform: capitalize;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-right: 10px;}
        cont {display: contents;min-width: 0;
            & > *:not(.tox), .parent > * {margin: 0 5px;}
            & > *:first-child, .parent > *:first-child {margin-left: 0;}
            & > *:last-child, .parent > *:last-child {margin-right: 0;}
            .code {width: 140px;height: 50px;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 3px;
                img {width: 100%;height: 100%;}
            }
        }
        hint {padding: 0 10px;color: var(--ccc);}
        &.error {
            input,
            choice,
            select {border-color: var(--red);}
            o,
            hint,
            ::after,
            ::before {color: var(--red);}
        }
    }
}

.filter {margin-bottom: 20px;display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    item {
        alia {width: auto;}
        choice,
        input,
        .select {flex: 1;}
    }
}

images {flex: 1;min-width: 0;max-width: max-content;flex-wrap: wrap;overflow: hidden;
    & > * {width: 100px;aspect-ratio: 1 / 1;margin: 0 10px 10px 0;color: var(--ddd);font-size: 24px;cursor: pointer;float: left;}
    add {font-family: ico !important;border: 1px var(--eee) solid;display: flex;align-items: center;justify-content: center;
        &:after {content: '\e75b';}
    }
    li {position: relative;overflow: hidden;
        img {display: block;}
        n {background-color: var(--red);width: 30px;height: 30px;border-radius: 0 0 0 30px;padding: 0 0 5px 5px;font-family: ico !important;
            &:after {content: '\e826';}
        }
    }
}

@media(max-width:640px){
    progress,
    ::-webkit-progress-bar,
    input[type="range"]::-webkit-slider-runnable-track {height: .04rem;}
    progress[circle] {--progress-size: 1rem;--progress-width: .04rem;}
    input[type="range"]::-webkit-slider-thumb {width: .36rem;height: .36rem;margin-top: -.16rem;box-shadow: 0 .03rem .06rem var(--color);}
    input[type="file"]::-webkit-file-upload-button {height: .7rem;border-radius: .05rem;padding: 0 .2rem;}
    input[type="color"] {width: .7rem;height: .7rem;
        &::-webkit-color-swatch {border: none;border-radius: .05rem;}
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="week"],
    input[type="month"] {
        &::before {right: .15rem;font-size: .3rem;line-height: .7rem;}
    }

    :where(choice, select, textarea,
    input:not([type="range"],[type="file"],[type="color"])) {height: .7rem;}
    .select::after,
    choice::after,
    .input i,
    .input o {right: .15rem;font-size: .3rem;line-height: .7rem;}
    .input input,
    select {padding: 0 .7rem 0 .1rem;}
    input {padding: 0 .1rem;}
    textarea {padding: .1rem;min-height: 1.2rem;}

    .bloomer {padding: .1rem;border-radius: .05rem;}

    choice {
        a {padding: 0 .1rem;height: .7rem;}
        choice-list {box-shadow: 0 .03rem .06rem var(--000-1);}
    }

    .form {
        item {display: block;padding: .1rem 0;min-height: .7rem;
            alia {width: 100%;padding: 0 0 .1rem;}
            cont {display: flex;align-items: center;min-height: .7rem;
                & > *:not(.tox), .parent > * {margin: 0 .05rem;}
                & > *:first-child, .parent > *:first-child {margin-left: 0;}
                & > *:last-child, .parent > *:last-child {margin-right: 0;}
                .code {width: 1.8rem;height: .7rem;border-radius: .05rem;}
                scaler a.btn {flex: none;}
                .btn:not(.code,.ico),
                .input, input:not([type="color"]),
                .select, select,
                .textarea, progress,
                scaler, choice, images {flex: 1;}
            }
            hint {padding: .1rem 0 0;}
        }
    }

    .filter {margin-bottom: .2rem;grid-template-columns: 1fr;}

    images {display: grid;grid-template-columns: repeat(4,1fr);grid-gap: .1rem;max-width: 100%;
        & > * {width: auto;min-width: 1rem;margin: 0;font-size: .32rem;}
        li n {width: .4rem;height: .4rem;border-radius: 0 0 0 .4rem;padding: 0 0 .05rem .08rem;}
    }
}

/* page */
page {
    .ico,
    * {height: 50px;border-radius: 2px;text-align: center;margin: 2px;line-height: 50px;}
    &,
    ul {display: flex;align-items: center;justify-content: center;}
    ul {
        a,
        span,
        input {font-size: 16px;}
        margin: 0;overflow: inherit;
        a {display: block;}
    }
    a,
    button {background-color: var(--f7);width: 50px;user-select: none;}
    span {padding: 0 10px;}
    input {border-width: 1px;width: 80px;padding: 0;}
    a {
        &:hover,
        &.active,
        button:hover {background-color: var(--color);color: white;}
        &[disabled] {pointer-events:none;color: var(--ccc);}
    }
}

@media(max-width:640px){
    page {
        .ico,
        * {height: .7rem;border-radius: .02rem;margin: .02rem;line-height: .7rem;}
        ul {
            a,
            span,
            input {font-size: .22rem;}
            display: none;
        }
        a,
        button {width: .7rem;}
        a:not(.ico) {display: none;}
        span {padding: 0 .1rem;}
        input {width: .7rem;}
    }
}

/* tab */
tab {
    tab-list {overflow: hidden;
        li {display: block;float: left;text-align: center;
            a {display: block;font-weight: bold;padding: 0 20px;}
        }
    }
    tab-group {display: none;
        &.active {display: block;}
    }
}

@media(max-width:640px){
    tab-list li a {padding: 0 .2rem;}
}

/* table */
table {width: 100%;border-collapse: collapse;
    th, td {border: 1px solid var(--ccc);padding: 10px;}
}
.table {overflow: hidden;width: 100%;border-spacing:0;
    th,
    td {vertical-align: middle;text-align: center;height: 50px;padding: 0 10px;background-color: white;border: 0;}
    th {text-transform: capitalize;position: sticky;left: 0;border-right: 1px var(--000-1) solid;z-index: 1;}
    thead {
        th,
        td {font-weight: bold;text-transform: capitalize;border-bottom: 2px var(--color) solid;}
    }
    tbody {
        tr {
            &:nth-child(2n) th,
            &:nth-child(2n) td {background-color: var(--f7);}
            &:hover {background-color: var(--eee);}
        }
    }
    tfoot tr:first-child {
        th,
        td {border-top: 1px var(--color) solid;}
    }
}

@media(max-width:640px){
    .table {overflow: auto;max-width: 15rem;
        th,
        td {height: .7rem;padding: .1rem;}
        tbody tr:hover {background-color: transparent;}
    }
}

/* swiper */
swiper {display: block;overflow: hidden;position: relative;touch-action: pan-y;height: 100%;max-height: 100vh;
    swiper-wrapper {display: flex;height: 100%;
        swiper-slide {flex-shrink: 0;width: calc(100%/var(--swiper-view,1));height: 100%;background-size: cover;position: relative;}
    }
    swiper-arrow {pointer-events:none;}
    swiper-prev.ico,
    swiper-next.ico {position: absolute;z-index: 1;top: 50%;font-size: 48px;color: var(--color);transform: translateY(-50%);cursor: pointer;pointer-events: auto;}
    swiper-prev {left: 20px;}
    swiper-next {right: 20px;}
    swiper-dot {position: absolute;z-index: 1;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;
        i {width: 10px;height: 10px;border-radius: 100%;background: var(--color);cursor: pointer;opacity: .3;
            &.active {opacity: 1;}
        }
    }
    &[vertical] {touch-action: pan-x;
        swiper-wrapper {flex-direction: column;height: 100%;min-height: 0;
            swiper-slide {width: 100%;height: calc(100%/var(--swiper-view,1));}
        }
        swiper-prev,
        swiper-next {left: 50%;right: auto;transform: translateX(-50%);}
        swiper-prev {top: 20px;}
        swiper-next {bottom: 20px;top: auto;}
        swiper-dot {top: 50%;transform: translateY(-50%);flex-direction: column;right: 20px;left: auto;bottom: auto;}
    }
    &[thumb] {
        swiper-slide {opacity: .8;transition-duration: .3s;cursor: pointer;
            &.active {opacity: 1;}
        }
    }
    &[fade] {
        swiper-wrapper {display: block;position: relative;height: 100%;
            swiper-slide {position: absolute;inset: 0;width: 100%;opacity: 0;pointer-events: none;transition: opacity .3s;z-index: 0;&.view {opacity: 1;pointer-events: auto;z-index: 1;}}
        }
    }
}

@media(max-width:640px){
    swiper {
        swiper-prev,
        swiper-next {font-size: .48rem;}
        swiper-prev {left: .2rem;}
        swiper-next {right: .2rem;}
        swiper-dot {bottom: .2rem;gap: .1rem;
            i {width: .1rem;height: .1rem;}
        }
        &[vertical] {
            swiper-prev {top: .2rem;}
            swiper-next {bottom: .2rem;}
            swiper-dot {right: .2rem;}
        }
    }
}

/* name */
name,
name h2,
name-logo,
name-search {display: flex;align-items: center;justify-content: center;}
name {height: 80px;position: relative;z-index: 1;box-shadow: 0 0 6px var(--000-1);background-color: white;z-index: 2;
    h2,
    h3 {flex: 1;min-width: 0;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 26px;}
    h2 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
    h3 {text-align: left;border-left: 1px var(--eee) solid;padding: 0 20px;}
    .ico {font-size: 36px;width: 80px;position: relative;z-index: 1;}
    hop {height: 100%;
        > .ico {height: 100%;line-height: 80px;}
    }
    name-logo,
    name-search {flex: 1;min-width: 0;text-align: center;}
    name-logo {position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 15px;
        img {height: 100%;width: auto;}
        h1 {text-transform: uppercase;font-size: 30px;padding-left: 10px;}
    }
    name-search {position: relative;margin: 10px 0;background-color: var(--000-1);border-radius: 30px;
        input {text-align: inherit;font-size: 24px;border: 0;padding: 0 80px 0 0;
            &::-webkit-input-placeholder {color: var(--000-2);}
        }
    }
}

@media(max-width:640px){
    name {height: .8rem;
        h2,
        h3 {font-size: .26rem;}
        h3 {margin: .2rem 0;padding: 0 .25rem;}
        .ico {font-size: .42rem;width: .8rem;}
        hop > .ico {line-height: .8rem;}
    }
    name-logo {padding: .15rem;
        h1 {font-size: .32rem;padding-left: .1rem;}
    }
    name-search {margin: .1rem 0;border-radius: .3rem;
        input {font-size: .24rem;height: .6rem;padding: 0 .8rem 0 0;}
    }
}

/* scaler */
scaler {display: flex;
    a.btn {width: 50px;padding: 0;
        &:hover {transform: translateY(0);}
    }
    input {flex: 1;min-width: 0;text-align: center;margin: 0 5px;}
}

@media(max-width:640px){
    scaler {
        a.btn {width: .7rem;height: .7rem;}
        input {margin: 0 .1rem;}
    }
}

/* list */
.list {overflow: hidden;
    li:not(:last-child) {border-bottom-width: 1px;}
}

/* countdown */
countdown s {text-decoration: none;}

/* music */
music {
    &:after {content: '\e98c';}
    &[pause] {animation: none;
        &:after {content: '\e990';}
    }
    animation: muzak 10s infinite linear;border-radius: 100%;z-index: 999;width: 50px;height: 50px;position: fixed;top: 0;background-color: var(--000-7);color: white;
    &.ico {line-height: 50px;margin: 30px;}
}
@keyframes muzak {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

@media(max-width:640px){
    music {width: .8rem;height: .8rem;
        &.ico {line-height: .8rem;font-size: .48rem;margin: .3rem;}
    }
}

/* drop */
drop {width: 100%;height: 50px;line-height: 50px;position: relative;background-color: var(--f7);
    x {position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;}
    i.ico {position: absolute;top: 0;right: 0;line-height: 50px;width: 50px;color: var(--color);}
    > i.ico {transform: rotate(90deg);}
    ul {overflow: visible;}
    li {position: relative;
        &:not(:last-child) {border-bottom-width: 1px;}
        drop-list {right: -100%;top: 0;left: auto;
            x {display: none;}
        }
        &:hover {
            > a {color: white;background-color: var(--color);}
            > drop-list {display: block;}
            > i {color: white;}
        }
    }
    a {padding: 0 20px;display: block;user-select: none;}
    &.active {
        > drop-list {display: block;z-index: 1;}
        > i {transform: rotate(-90deg);}
    }
}
drop-cont {width: 100%;height: 100%;overflow: hidden;position: relative;}
drop-list {display: none;position: absolute;top: 50px;left: 0;background-color: white;width: 100%;box-shadow: 0 3px 6px var(--000-1);}

@media(max-width:640px){
    drop {height: .7rem;line-height: .7rem;
        i.ico {line-height: .7rem;width: .7rem;}
        a {padding: 0 .2rem;}
    }
    drop-list {top: .7rem;}
}

/* rate */
rate {
    i {color: var(--orange);cursor: pointer;transition-duration: .3s;
        &:hover {transform: scale(1.2);}
        &::before {content:'\ea62';}
        &.active::before {content:'\ea65';}
    }
    &[heart] i {
        &::before {content:'\e917';}
        &.active::before {content:'\e90b';}
    }
    &[thumb] i {
        &::before {content:'\eb2d';}
        &.active::before {content:'\eb85';}
    }
    &[circle] i {
        &::before {content:'\ea31';}
        &.active::before {content:'\ec52';}
    }
}

/* notify */
notify {position: fixed;top: 0;right: 0;margin: 0 10px;z-index: 999;
    &.bottom {top: auto;bottom: 0;}
    li {width: 300px;padding: 30px 20px 20px;border-radius: 5px;background-color: white;box-shadow: 0 3px 6px var(--000-1);position: relative;margin: 10px 0;transition: .3s;
        x.ico {position: absolute;top: 0;right: 0;margin:  5px;}
    }
}

@media(max-width:640px){
    notify {margin: 0 .1rem;
        li {width: 4rem;padding: .4rem .15rem .15rem;border-radius: .08rem;margin: .1rem 0;
            x.ico {margin: .05rem;}
        }
    }
}

/* empty */
empty {display: flex;align-items: center;justify-content: center;padding: 10px;
    &.default {font-size: 30px;color: var(--000-1);text-transform: uppercase;
        &:after {content: attr(data-empty);}
    }
    * {margin: 10px;text-transform: capitalize;}
    .ico {display: block;font-size: 72px;margin: inherit;}
    div {text-align: center;}
}

@media(max-width:640px){
    empty {padding: .2rem;
        &.default {font-size: .36rem;}
        * {margin: .1rem;}
        .ico {font-size: .8rem;}
    }
}

/* hop */
hop {position: relative;
    x {width: 100%;height: 100vh;position: fixed;top: 0;left: 0;display: none;}
    a {height: 50px;line-height: 50px;display: block;text-align: center;user-select: none;}
    &[right] hop-cont {right: 0;}
    hop-cont {position: absolute;box-shadow: 0 3px 6px var(--000-1);border-radius: 5px;display: none;
        a {background-color: white;border-bottom-width: 1px;text-transform: capitalize;white-space: nowrap;padding: 0 20px;
            &:first-child {border-radius: 5px 5px 0 0;}
            &:last-child {border-radius: 0 0 5px 5px;border: 0;}
            &:hover {background-color: var(--color);color: white;}
        }
    }
}

@media(max-width:640px){
    hop a {height: .7rem;line-height: .7rem;min-width: .7rem;}
    hop-cont {border-radius: .05rem;
        a {padding: 0 .2rem;
            &:first-child {border-radius: .1rem .1rem 0 0;}
            &:last-child {border-radius: 0 0 .1rem .1rem;}
        }
    }
}

/* fold */
fold {
    fold-title {border-bottom-width: 1px;display: flex;align-items: center;padding: 10px;
        h5 {line-height: 30px;}
        .ico {width: 40px;margin: inherit;}
    }
    fold-cont {display: none;padding: 10px;}
    fold-group.active {
        fold-title s {transform: rotate(180deg);}
        fold-cont {display: block;}
    }
}

@media(max-width:640px){
    fold-title {padding: .1rem;
        h5 {line-height: .35rem;}
        .ico {width: .5rem;}
    }
    fold-cont {padding: .1rem;}
}

/* step */
step {width: 100%;display: flex;overflow: inherit;counter-reset: step;position: relative;
    &::before {border: var(--eee) solid;border-width: 1px 0 0 0;position: absolute;left: 0;top: 0;content: '';width: 100%;margin: 30px 0 0;}
    li {flex: 1;min-width: 0;text-align: center;font-size: 16px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;counter-increment: step;
        &::before {content: counter(step);width: 60px;height: 60px;background-color: white;border-radius: 100%;display: flex;align-items: center;justify-content: center;border: 2px solid;color: var(--color);font-size: 24px;margin: 0 auto 10px;position: relative;}
        &.active::before {background-color: var(--color);color: white;border-color: var(--color);}
    }
    &[column] {display: block;
        &::before {border-width: 0 0 0 1px;margin: 0 0 0 30px;height: 100%;width: 0;}
        li {display: flex;align-items: center;text-align: left;white-space: inherit;overflow: inherit;margin: 20px 0;
            &::before {margin: auto 20px auto 0;}
        }
    }
}

@media(max-width:640px){
    step {
        &::before {margin: .3rem 0 0;}
        li {font-size: .2rem;
            &::before {width: .6rem;height: .6rem;font-size: .24rem;margin: 0 auto .1rem;}
        }
        &[column] {
            &::before {margin: 0 0 0 .3rem;}
            li {margin: .2rem 0;
                &::before {margin: auto .2rem auto 0;}
            }
        }
    }
}

/* crumb */
crumb {display: flex;align-items: center;width: 100%;white-space: nowrap;overflow: hidden;text-transform: capitalize;
    li {display: flex;align-items: center;
        i.ico {font-size: 20px;}
        a {padding: 0 5px;
            &:hover {color: var(--color);}
        }
    }
}

@media(max-width:640px){
    crumb li i.ico {font-size: .3rem;}
    crumb li a {padding: 0 .05rem;}
}

/* clue */
[clue] {position: relative;cursor: help;--wide: calc(100% + 5px);
    &:hover::after {content: attr(clue);position: absolute;bottom: var(--wide);left: 50%;transform: translateX(-50%);background-color: var(--color);color: white;padding: 10px 15px;border-radius: 5px;z-index: 3;font-size: 14px;font-weight: normal;max-width: min(300px, calc(100vw - 20px));width: max-content;}
    &[bottom]:hover::after {bottom: auto;top: var(--wide);}
    &[right]:hover::after {bottom: auto;top: 50%;left: var(--wide);transform: translate(0,-50%);}
    &[left]:hover::after {bottom: auto;top: 50%;left: auto;right: var(--wide);transform: translate(0,-50%);}
}

@media(max-width:640px){
    [clue] {--wide: calc(100% + .05rem);
        &:hover::after{padding: .1rem .15rem;border-radius: .05rem;font-size: .16rem;max-width: min(3rem, calc(100vw - .2rem));}
    }
}

/* reminder */
reminder {padding: 10px;border-width: 1px;background-color: var(--f7);margin: 20px 0;border-radius: 5px;
    > * {padding: 5px;}
}

@media(max-width:640px){
    reminder {padding: .1rem;margin: .2rem 0;border-radius: .05rem;
        > * {padding: .05rem;}
    }
}

/* tinymce */
.tox-tinymce {border-width: 1px !important;border-radius: 0 !important;flex: 1;min-width: 0;}
.tox:not(.tox-tinymce-inline) .tox-editor-header {box-shadow: none !important;border-bottom: 1px var(--eee) solid !important;}
.tox-simple + .tox-tinymce .tox-statusbar {display: none;}
.tox-editor-dock-fadeout {opacity: 1 !important;visibility: visible !important;}
.tox-selectimage input[type="file"] {font-size: 14px;&::-webkit-file-upload-button {height: 32px;}}
.tox-dialog {padding: 8px 5px !important;border-radius: 5px !important;box-shadow: 0 0 10px var(--000-1) !important;}
.tox-dialog__header {padding-right: 5px !important;}
.tox-dialog__title {font-weight: bold !important;font-size: 16px !important;}
.tox-dialog__body-nav-item {padding: 5px !important;border: 0 !important;border-radius: 3px;}
.tox-dialog__body-nav-item:focus,
.tox-dialog__body-nav-item--active {color: white !important;background-color: var(--color) !important;}
.tox-dialog__footer-end .tox-button {background-color: var(--color) !important;border: 0 !important;}
.tox .tox-tbtn:hover,
.tox .tox-tbtn:active,
.tox .tox-tbtn:focus,
.tox .tox-collection--list .tox-collection__item--active {background: var(--eee) !important;}
.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {color: inherit !important;}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-split-button:focus {background: var(--ddd) !important;}
.tox .tox-button {border-radius: 3px !important;font-weight: normal !important;}
.tox .tox-button--secondary,
.tox .tox-button--icon {background-color: transparent !important;border-width: 1px !important;}
.tox .tox-edit-area::before {border: 0 !important;}
.tox .tox-tbtn:focus::after,
.tox .tox-button::before,
.tox .tox-split-button:hover {box-shadow: none !important;}
.tox .tox-tooltip__body {font-weight: normal !important;border-radius: 3px !important;background-color: var(--333) !important;color: var(--ccc) !important;padding-bottom: 5px !important;}
.tox-listbox--select,
.tox-textarea,
.tox-textfield {border-radius: 0 !important;border: 1px var(--eee) solid !important;}
.tox-listbox--select:focus,
.tox-textarea:focus,
.tox-textfield:focus {border: 1px var(--eee) solid !important;box-shadow: none !important;}
.tox-textarea-wrap:focus-within {border: 0 !important;box-shadow: none !important;border-radius: 0 !important;}
.tox-collection__item,
.tox-listbox__select-label {font-size: 14px !important;}

/* horn */
:has(> n) {position: relative;}
n {position: absolute;top: 0;right: 0;border-radius: 0 0 0 100px;background-color: var(--color);color: white;padding: 10px 10px 10px 20px;
    &.ico {padding: 5px 5px 10px 10px;cursor: pointer;color: white;}
    &[left] {border-radius: 0 0 100px 0;right: auto;left: 0;padding: 10px 20px 10px 10px;
        &.ico {padding: 5px 10px 10px 5px;}
    }
}

@media(max-width:640px){
    n {padding: .1rem .1rem .1rem .2rem;border-radius: 0 0 0 1rem;
        &.ico {padding: .05rem .05rem .1rem .1rem;}
        &[left] {border-radius: 0 0 1rem 0;right: auto;left: 0;padding: .1rem .2rem .1rem .1rem;
            &.ico {padding: .05rem .1rem .1rem .05rem;}
        }
    }
}

/* article */
article {
    > * {margin: 10px 0;}
    .btn {display: inline-block;}
    ul {padding-left: 20px;
        li {list-style: disc;line-height: 2;}
    }
}

@media(max-width:640px){
    article {
        > * {margin: .1rem 0;}
        ul {padding-left: .3rem;}
    }
}

/* alert */
alert {position: fixed;width: 100%;height: 100%;top:0;left: 0;z-index: 3;background-color: var(--000-2);
    alert-main {max-width: 500px;width: 90%;background-color: white;border-radius: 10px;margin: 100px auto;padding: 20px;
        input {border: 1px var(--eee) solid;text-align: center;margin-bottom: 20px;}
        alert-cont {padding: 30px 20px;text-align: center;}
        alert-solve {display: flex;align-items: center;justify-content: center;
            .btn {margin: 10px;min-width: 100px;}
        }
    }
}

@media(max-width:640px){
    alert-main {border-radius: .1rem;margin: 1rem auto;padding: .2rem;
        input {margin-bottom: .2rem;}
        alert-cont {padding: .3rem .2rem;}
        alert-solve .btn {margin: .1rem;min-width: 1.2rem;font-size: .18rem;height: .6rem;}
    }
}

/* notice */
notice {display: flex;align-items: center;overflow: hidden;
    .ico {margin: auto 10px auto 0;}
    &:hover aside {animation-play-state: paused;}
    notice-cont {flex: 1;overflow: hidden;
        aside {display: inline-block;padding-left: 100%;white-space: nowrap;animation: scroll 15s linear infinite;
            > * {padding: 0 10px;}
        }
    }
}

@media(max-width:640px){
    notice {
        .ico {margin: auto .1rem auto 0;}
        notice-cont aside > * {padding: 0 .1rem;}
    }
}

@keyframes scroll {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
}