body, html { height: 100%; -webkit-tap-highlight-color: transparent }
body { font-family: system-ui,-apple-system,Helvetica Neue,sans-serif }
ul { list-style: none }
.page, body { background-color: var(--weui-BG-0) }
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; opacity: 0; z-index: 1 }
.page.js_show { opacity: 1 }
.page.actionsheet, .page.article, .page.dialog, .page.form, .page.loadmore, .page.msg, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.picker, .page.progress, .page.steps, .page.steps_horizonal, .page.steps_vertical, .page.toast, .page.top-tips { background-color: var(--weui-BG-2) }
.link { color: var(--weui-LINK) }
.container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /*overflow: hidden; */color: var(--weui-FG-0) }
.page { outline: 0 }
.page__hd { padding: 40px }
.page__bd_spacing { padding: 0 16px }
.page__ft { padding-top: 40px; padding-bottom: 32px; padding-bottom: calc(32px + constant(safe-area-inset-bottom)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); text-align: center }
.page__ft img { height: 19px }
.wx-root[data-weui-theme=dark] .page__ft img, body[data-weui-theme=dark] .page__ft img { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }

@media (prefers-color-scheme:dark) {
    .wx-root:not([data-weui-theme=light]) .page__ft img, body:not([data-weui-theme=light]) .page__ft img { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }
}

.page__ft.j_bottom { position: absolute; bottom: 0; left: 0; right: 0 }
.page__ft .weui-footer { display: none; padding: 16px 0 0 }
.page__ft .weui-footer__text { margin-bottom: 8px }
.page__ft .weui-footer__text:last-child { margin-bottom: 0 }
.page__ft .weui-footer__text__meta { margin: 0 6px }
.page__ft a.weui-footer__text__meta { color: rgba(0,0,0,.2) }
.wx-root[data-weui-theme=dark] .page__ft a.weui-footer__text__meta, body[data-weui-theme=dark] .page__ft a.weui-footer__text__meta { color: hsla(0,0%,100%,.2) }

@media (prefers-color-scheme:dark) {
    .wx-root:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta, body:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta { color: hsla(0,0%,100%,.2) }
}

.page__ft a.weui-footer__text__meta:active { opacity: .5 }
.page__ft .gongan_meta { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; vertical-align: bottom; -webkit-box-align: center; -webkit-align-items: center; align-items: center }
.page__ft .gongan_meta img { margin-right: 2px; width: 18px; height: 18px }
.page__title { text-align: left; font-size: 20px; font-weight: 400 }
.page__desc { margin-top: 4px; color: var(--weui-FG-1); text-align: left; font-size: 14px }
.page.footer .page__ft, .page.gallery .page__ft, .page.navbar .page__ft, .page.tabbar .page__ft, .page[class*=button_] .page__ft, .page[class*=form_] .page__ft, .page[class*=msg_] .page__ft { display: none }
.weui-cell_example:before { left: 52px }
.page.home .page__intro-icon { margin-top: -.2em; margin-left: 5px; width: 16px; height: 16px; vertical-align: middle }
.page.home .page__title { font-size: 0; margin-bottom: 15px }
.wx-root[data-weui-theme=dark] .page.home .page__title, body[data-weui-theme=dark] .page.home .page__title { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }

@media (prefers-color-scheme:dark) {
    .wx-root:not([data-weui-theme=light]) .page.home .page__title, body:not([data-weui-theme=light]) .page.home .page__title { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }
}

.page.home .page__bd img { width: 30px; height: 30px }
.wx-root[data-weui-theme=dark] .page.home .page__bd img, body[data-weui-theme=dark] .page.home .page__bd img { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }

@media (prefers-color-scheme:dark) {
    .wx-root:not([data-weui-theme=light]) .page.home .page__bd img, body:not([data-weui-theme=light]) .page.home .page__bd img { -webkit-filter: invert(100) hue-rotate(180deg); filter: invert(100) hue-rotate(180deg) }
}

.page.home .page__bd li { margin: 8px 0; background-color: var(--weui-BG-2); overflow: hidden; border-radius: 2px; cursor: pointer }
.page.home .page__bd li.js_show .weui-flex { opacity: .5 }
.page.home .page__bd li.js_show .page__category { height: auto }
.page.home .page__bd li.js_show .page__category-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) }
.page.home .page__bd li:first-child { margin-top: 0 }
.page.home .page__category { height: 0; overflow: hidden }
.page.home .page__category-content { opacity: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .3s; transition: .3s }
.page.home .weui-flex { padding: 20px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-transition: .3s; transition: .3s }
.page.home .weui-cells { margin-top: 0 }
.page.home .weui-cells:after, .page.home .weui-cells:before { display: none }
.page.home .weui-cell { padding-left: 20px; padding-right: 20px }
.page.home .weui-cell:before { left: 20px; right: 20px }
.page.steps_horizonal .weui-steps, .page.steps_vertical .weui-steps { margin: 40px auto 80px; max-width: 50% }
.page.badge .demo_badge_tips { vertical-align: middle; font-size: 17px }
.page.badge .demo_badge_tips + .weui-badge { margin-left: 5px; margin-right: 5px }
.page.badge .demo_badge_cells .weui-cell__hd { position: relative; margin-right: 10px }
.page.badge .demo_badge_cells .weui-cell__hd img { width: 50px; display: block }
.page.badge .demo_badge_cells .weui-cell__hd .weui-badge { position: absolute; top: -.4em; right: -.4em }
.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title { vertical-align: middle }
.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title + .weui-badge { margin-left: 5px }
.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc { display: block; font-size: 13px; color: #888 }
.page.form .page__bd { padding-bottom: 30px }
.page.form .weui-label { width: 3.14em }
.page.form_page .weui-label { width: 4.2em }
.page.form_primary .weui-cell_select-before .weui-select, .page.form_primary .weui-label, .page.form_select .weui-cell_select-before .weui-select, .page.form_select .weui-label, .page.form_select_primary .weui-cell_select-before .weui-select, .page.form_select_primary .weui-label { width: 3.14em }
[class*=" form_"].page, [class^=form_].page { padding: 0 }
.page.form_input_status .weui-label, .page.form_vcode .weui-label { width: 3.14em }
.page.button, .page.button_default { background-color: var(--weui-BG-0) }
.page.button .weui-btn_mini, .page.button_default .weui-btn_mini { vertical-align: middle; margin: 0 12px }
.page.button .page__bd, .page.button_default .page__bd { padding: 0 }
.page.button .button-sp-area, .page.button_default .button-sp-area { margin: 15px auto; padding: 15px; text-align: center }
.page.button .button-sp-area.cell, .page.button_default .button-sp-area.cell { padding: 15px 0 }
.page.button_bottom_fixed { background-color: var(--weui-BG-2) }
.page.button_bottom_fixed .weui-bottom-fixed-opr-demo { padding: 32px 32px 0 }
.page.cell .page__bd { padding-bottom: 30px }
.page.dialog .page__bd { padding: 0 15px }
.page.panel .page__bd { padding-bottom: 20px }
.page.panel .weui-cell_example .weui-cell__hd img { width: 20px; height: 20px; display: block; margin-right: 16px }
.page.icons, .page.icons-svg { text-align: center }
.page.icons-svg .page__bd, .page.icons .page__bd { padding: 0 40px; text-align: left }
.page.icons-svg .icon-box, .page.icons .icon-box { margin-bottom: 25px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center }
.page.icons-svg .icon-box i, .page.icons .icon-box i { margin-right: 18px }
.page.icons-svg .icon-box__ctn, .page.icons .icon-box__ctn { -webkit-flex-shrink: 100; flex-shrink: 100 }
.page.icons-svg .icon-box__title, .page.icons .icon-box__title { font-weight: 400 }
.page.icons-svg .icon-box__desc, .page.icons .icon-box__desc { margin-top: 6px; font-size: 12px; color: #888 }
.page.icons-svg .icon_sp_area, .page.icons .icon_sp_area { margin-top: 10px; text-align: left }
.page.icons-svg .icon_sp_area i:before, .page.icons .icon_sp_area i:before { margin-bottom: 5px }
.page.flex .placeholder { margin: 5px; padding: 0 10px; background-color: var(--weui-BG-1); height: 2.3em; line-height: 2.3; text-align: center; color: var(--weui-FG-1) }
.page.layers { overflow-x: hidden; -webkit-perspective: 1000px; perspective: 1000px }

@media only screen and (max-width:320px) {
    .page.layers .page__hd { padding-left: 20px; padding-right: 20px }
}

.page.layers .page__bd { position: relative }
.page.layers .page__desc { min-height: 4.8em }
.page.layers .layers__layer { position: absolute; left: 50%; width: 150px; height: 266px; margin-left: -75px; box-sizing: border-box; -webkit-transition: .5s; transition: .5s; background: url(images/layers/transparent.gif) no-repeat 50%; background-size: contain; font-size: 14px; color: var(--weui-WHITE) }
.page.layers .layers__layer span { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; -webkit-transition: .5s; transition: .5s }
.page.layers .layers__layer:last-child span { color: #aaa }
.page.layers .layers__layer.j_hide { opacity: 0 }
.page.layers .layers__layer.j_pic span { color: transparent }

@media only screen and (min-width:375px) and (min-height:603px) {
    .page.layers .layers__layer { width: 180px; height: 320px; margin-left: -90px }
}

@media only screen and (min-width:414px) and (min-height:640px) {
    .page.layers .layers__layer { width: 200px; height: 355px; margin-left: -100px }
}

.page.layers .layers__layer_popout { border: 1px solid hsla(0,0%,80%,.5); z-index: 4 }
.page.layers .layers__layer_popout.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px) }

@media only screen and (max-width:320px) {
    .page.layers .layers__layer_popout.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px) }
}

.page.layers .layers__layer_popout.j_pic { border-color: transparent; background-image: url(images/layers/popout.png) }
.page.layers .layers__layer_mask { background-color: rgba(0,0,0,.5); z-index: 3 }
.page.layers .layers__layer_mask.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px) }

@media only screen and (max-width:320px) {
    .page.layers .layers__layer_mask.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px) }
}

.page.layers .layers__layer_navigation { background-color: rgba(40,187,102,.5); z-index: 2 }
.page.layers .layers__layer_navigation.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) }

@media only screen and (max-width:320px) {
    .page.layers .layers__layer_navigation.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px) }
}

.page.layers .layers__layer_navigation.j_pic { background-color: transparent; background-image: url(images/layers/navigation.png) }
.page.layers .layers__layer_content { background-color: var(--weui-BG-2); z-index: 1 }
.page.layers .layers__layer_content.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px) }

@media only screen and (max-width:320px) {
    .page.layers .layers__layer_content.j_transform { -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) }
}

.page.layers .layers__layer_content.j_pic { background-image: url(images/layers/content.png) }
.page.searchbar .searchbar-result { display: none; margin-top: 0; font-size: 14px }
.page.searchbar .searchbar-result .weui-cell__bd { padding: 2px 0 2px 20px; color: var(--weui-FG-1) }
.page.gallery { overflow: hidden }
.page.navbar .weui-tab__panel, .page.tabbar .weui-tab__panel { padding: 32px }
.weui-half-screen-dialog { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; -webkit-transform: translateY(100%); transform: translateY(100%) }
.weui-half-screen-dialog_show { -webkit-transform: translateY(0); transform: translateY(0) }
.loading_demo { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; margin: 10px 40px }
.loading_demo .weui-loading, .loading_demo .weui-mask-loading, .loading_demo .weui-primary-loading { margin: 0 5px }

@-webkit-keyframes slideIn {
    0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 }
    to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 }
}

@keyframes slideIn {
    0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 }
    to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 }
}

@-webkit-keyframes slideOut {
    0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 }
    to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 }
}

@keyframes slideOut {
    0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 }
    to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0 }
}

.page.slideIn { -webkit-animation: slideIn .2s forwards; animation: slideIn .2s forwards }
.page.slideOut { -webkit-animation: slideOut .2s forwards; animation: slideOut .2s forwards }
.page_logo_wrp { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center }
.page_logo_wrp > a { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; vertical-align: bottom }
@supports (top:constant(safe-area-inset-top)) {
    .page { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) }
    .page.navbar, .page.tabbar { padding-left: 0; padding-right: 0 }
    .weui-tab__panel { padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right) }
}
@supports (top:env(safe-area-inset-top)) {
    .page { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) }
    .page.article, .page.msg_success, .page.msg_text, .page.msg_text_primary, .page.msg_warn, .page.navbar, .page.tabbar { padding: 0 }
}

@media (min-device-width:768px) {
    .page__ft { padding-bottom: 48px }
    .page__ft .weui-footer { display: block }
}