/* 
    变量命名规则
    --分类-属性_布局（尽量与样式名一致）__扩展__扩展__扩展
    --bg-color_layout_header__active

    前缀
    .hby-theme_     主题（输出到 #vue-container）
    .hby-device_    终端（输出到 #vue-container）
    .hby-widget_    组件
    .hby-pop_       弹层
    .hby-layout_    布局
*/


@import url('./widget.css?v=4');
@import url('./pop.css?v=4');
@import url('./layout.css?v=4');


/* all */
@media only screen {
    /* root */
    :root {
        /* display */
            /* device */
            --display_device__p: block;
            --display_device__p-inline: inline;
            --display_device__m: none;
            /* layout_profile */
            --position_layout_profile__item__title: absolute;
            --top_layout_profile__item__title: 50%;
            --transform_layout_profile__item__title: translate(0,-50%);
            --position_layout_profile__item__opt: absolute;
            --top_layout_profile__item__opt: 50%;
            --transform_layout_profile__item__opt: translate(0,-50%);
            --text-align_layout_profile__item__opt: center;


        /* margin */
            /* widget_opt */
            --margin-l_widget_opt__header__li: 15px;
            /* cf-layout_page */
            --margin-tb_cf-layout_page: 15px;
            --margin_cf-layout_page__content-outer: 30px 20px;
            --margin-tb_cf-layout_page__content__p: 5px;
            /* layout_login */
            --margin-l_layout_login__content__item__qrcode: 0;
            /* layout_main */
            --margin-tb_layout_main: 30px;
            /* layout_index-route */
            --margin_layout_index-route__ul: 20px;
            --margin_layout_index-route__li__inner: 10px;
            /* layout_profile */
            --margin-t_layout_profile__item__content: 0;
            --margin-t_layout_profile__item__content__tight: 0;
            --margin-t_layout_profile__item__opt:0;
            /* layout_note */
            --margin-tb_layout_note__item: 15px;
            --margin-lr_layout_note__item: 10px;
            --margin-lr_layout_note__item__not-pic: 20px;


        /* padding */
            /* widget_input */
            --padding_widget_input: 15px;
            /* widget_btn */
            --padding_widget_btn: 15px;
            --padding_widget_btn__inline: 15px 40px;
            --padding_widget_btn__size__m: 10px 15px;
            --padding_widget_btn__size__s: 8px 12px;
            --padding_widget_btn__size__xs: 6px 8px;
            /* widget_pretty-btn */
            --padding-tb_widget_pretty-btn: 15px;
            --padding-lr_widget_pretty-btn: 20px;
            --padding-tb_widget_pretty-btn__tight: var(--padding-tb_widget_pretty-btn);
            --padding-lr_widget_pretty-btn__tight: var(--padding-lr_widget_pretty-btn);
            /* widget_opt */
            --padding-lr_widget_opt__header__li: 15px;
            --padding-lr_widget_opt__nav__li: 15px;
            /* cf-layout_page */
            --padding_cf-layout_page__header: 15px;
            --padding-l_cf-layout_page__content__p__h123: 24px;
            --padding-tb_cf-layout_page__content__block: 5px;
            --padding-lr_cf-layout_page__content__block: 8px;
            /* layout_profile */
            --padding-tb_layout_profile: 40px;
            --padding-tb_layout_profile__tight: 20px;
            --padding-lr_layout_profile: 25%;
            --padding-l_layout_profile__item__title: 15px;
            /* layout_note */
            --padding-tb_layout_note: 20px;
        
        
        /* wh */
            /* common */
            --wh-max-width_common: 980px;
            /* layout_login */
            --wh-width_layout_login: 320px;
            /* layout_header */
            --wh-height_layout_header: 50px;
            --wh_layout_header__logo: 32px;
            /* layout_nav */
            --wh-height_layout_nav: 51px;
            /* layout_topic */
            --wh-height_layout_topic: 150px;
            /* layout_wrapper */
            --wh-min-height_layout_wrapper: calc(100vh - var(--wh-height_layout_header) - var(--wh-height_layout_footer));
            --wh-min-height_layout_wrapper__topic: calc(100vh - var(--wh-height_layout_header) - var(--wh-height_layout_topic) - var(--wh-height_layout_footer));
            --wh-min-height_layout_wrapper__nav: calc(100vh - var(--wh-height_layout_header) - var(--wh-height_layout_nav) - var(--wh-height_layout_footer));
            --wh-min-height_layout_wrapper__nav__only-p: var(--wh-min-height_layout_wrapper__nav);
            --wh-min-height_layout_wrapper__page__nav: var(--wh-min-height_layout_wrapper__nav);
            --wh-min-height_layout_wrapper__search-nav: calc(100vh - var(--wh-height_layout_header) - 101px - var(--wh-height_layout_footer));
            /* layout_index-route */
            --wh-max-width_layout_index-route: 900px;
            --wh-width_layout_index-route__li: 33.3%;
            --wh-width_layout_index-route__li__col2__only-m: 33.3%;
            --wh-width_layout_index-route__li__col4: 25%;
            /* layout_profile */
            --wh-width_layout_profile__item__title: 30%;
            --wh-width_layout_profile__item__opt: 30%;
            --wh-width_layout_profile__pay-list__li: 50%;
            /* layout_calc */
            --wh-width_layout_calc: 440px;
            --wh-min-height_layout_calc: 600px;
            --wh-max-height_layout_calc: 740px;
            --wh_layout_calc__keyboard__key__gap: 16px;
            --wh_layout_calc__keyboard__key: calc(var(--wh-width_layout_calc) / 4 - var(--wh_layout_calc__keyboard__key__gap) / 4);
            /* layout_note */
            --wh-width_layout_note: 720px;
            /* layout_footer */
            --wh-height_layout_footer: 44px;
        
        
        /* font */
            --font-size__default: 17px;
            --font-line-height__default: 1.5;
            /* widget_input */
            --font-size_widget_input: 17px;
            /* widget_btn */
            --font-size_widget_btn: 17px;
            --font-size_widget_btn__size__m: 16px;
            --font-size_widget_btn__size__s: 15px;
            --font-size_widget_btn__size__xs: 12px;
            /* widget_pretty-btn */
            --font-size_widget_pretty-btn__main: 20px;
            --font-size_widget_pretty-btn__sub: 14px;
            --font-size_widget_pretty-btn__main__tight: 20px;
            --font-size_widget_pretty-btn__i__tight: 20px;
            /* widget_opt */
            --font-size_widget_opt__nav__li: 15px;
            /* widget_select */
            --font-size_widget_select: 17px;
            /* cf-layout_page */
            --font-size_cf-layout_page__header: 22px;
            --font-size_cf-layout_page__block: 17px;
            --font-size_cf-layout_page__block__h1: 22px;
            --font-size_cf-layout_page__block__h2: 20px;
            --font-size_cf-layout_page__block__h3: 17px;
            --font-line-height_cf-layout_page__block: 24px;
            --font-line-height_cf-layout_page__block__h1: 34px;
            --font-line-height_cf-layout_page__block__h2: 30px;
            --font-line-height_cf-layout_page__block__h3: 24px;
            /* layout_nav */
            --font-size_layout_nav__t: 17px;
        
        
        /* border */
            /* widget_input */
            --border-radius_widget_input: 6px;
            /* widget_btn */
            --border-radius_widget_btn: 6px;
            /* widget_pretty-btn */
            --border-radius_widget_pretty-btn: 12px;
            /* widget_select */
            --border-radius_widget_select: 12px;
            /* layout_profile */
            --border-radius_layout_profile__pay-list__inner: 12px;
            /* layout_calc */
            --border-radius_layout_calc: 6px;
    }


    /* .hby-theme_default */
    .hby-theme_default {
        /* color */
            --color-common__primary: rgba(207,86,89,1);
            --color-common__gray: #8e8e93;
            --color-common__gray__l2: #aeaeb2;
            --color-common__gray__l3: #c7c7cc;
            --color-common__gray__l4: #d1d1d6;
            --color-common__gray__l5: #e5e5ea;
            --color-common__gray__l6: #f2f2f7;
            --color-common__red: #ff3b30;
            --color-common__red__l: rgba(255,59,48,.9);
            --color-common__red__h: rgba(255,59,48,.8);
            --color-common__red__a: var(--color-common__red);
            --color-common__blue: #007aff;
            --color-common__blue__l1: rgba(0,122,255,.1);
            --color-common__blue__l: rgba(0,122,255,.9);
            --color-common__blue__h: rgba(0,122,255,.8);
            --color-common__blue__a: var(--color-common__blue);
            --color-common__orange: #ff9f0a;
            --color-common__green: #34c759;
            --color-common__green__l1: rgba(52,199,89,.1);
            --color-common__yellow: #fc0;
            --color-common__brown: #a2845e;
        /* font */
            --font-color__default: #1d1d1f;
            --font-color__regular: #333;
            --font-color__sub: #6e6e73;
            --font-color__placeholder: #adb5bd;
            --font-color__wechat: #07c160;
            --font-color__alipay: #00a0ea;
            /* widget_btn */
            --font-color_widget_btn: var(--font-color__regular);
            --font-color_widget_btn__blue: #fff;
            --font-color_widget_btn__red: #fff;
            --font-color_widget_btn__light-gray: #586b95;
            /* widget_crumb */
            --font-color_widget_crumb: #fff;
            /* layout_header */
            --font-color_layout_header: var(--font-color__default);


        /* border */
            /* common */
            --border-color_common: #e5e5e5;
            /* widget_pretty-btn */
            --border-color_widget_pretty-btn: hsla(240,6%,83%,.63);


        /* bg */
            /* common */
            --bg-color_common__hover: #ebebf0;
            --bg-color_common__active: #e6e6eb;
            /* body */
            --bg-color_body: #fff;
            /* widget_btn */
            --bg-color_widget_btn__default: #e8e8ed;
            --bg-color_widget_btn__default__hover: #ebebf0;
            --bg-color_widget_btn__default__active: #e6e6eb;
            --bg-color_widget_btn__blue: var(--color-common__blue__l);
            --bg-color_widget_btn__blue__hover: var(--color-common__blue__h);
            --bg-color_widget_btn__blue__active: var(--color-common__blue__a);
            --bg-color_widget_btn__red: var(--color-common__red__l);
            --bg-color_widget_btn__red__hover: var(--color-common__red__h);
            --bg-color_widget_btn__red__active: var(--color-common__red__a);
            --bg-color_widget_btn__light-gray: rgba(247,247,247,1);
            --bg-color_widget_btn__light-gray__hover: rgba(247,247,247,.8);
            --bg-color_widget_btn__light-gray__active: rgba(247,247,247,1);
            /* widget_pretty-btn */
            --bg-gradient_widget_pretty-btn: linear-gradient(120deg,#fff 45%,#f5f5f5);
            /* widget_opt */
            --bg-color_widget_opt__nav__li__hover: rgba(0,0,0,.05);
            --bg-color_widget_opt__nav__li__active: rgba(0,0,0,.07);
            /* widget_select */
            --bg-color_widget_select: rgba(255,255,255,.8);
            /* cf-layout_page */
            --bg-color_cf-layout_page__header: #f3f3f3;
            /* layout_login */
            --bg-color_layout_login: #fff;
            --bg-gradient_layout_login__switch__before__line: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
            /* layout_header */
            --bg-color_layout_header: #f3f3f3;
            /* layout_wrapper */
            --bg-color_layout_wrapper: #fff;
            /* layout_nav */
            --bg-color_layout_nav: hsla(0,0%,100%,.65);
            /* layout_topic */
            --bg-gradient_layout_topic: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
        

        /* shadow */
            /* widget_input */
            --shadow_widget_input: inset 0 0.25rem 0.125rem 0 rgb(0 0 0 / 5%);
            --shadow_widget_input__hover: inset 0 1px 1px rgb(0 0 0 / 1%), 0 0 8px rgb(34 139 230 / 50%);
            --shadow_widget_input__focus: 0 0 0 3px rgb(0 125 250 / 60%);
            /* widget_pretty-btn */
            --shadow_widget_pretty-btn: drop-shadow(0 10px 10px rgba(76,76,109,.07059));
            /* widget_select */
            --shadow_widget_select__hover: inset 0 1px 1px rgb(0 0 0 / 1%), 0 0 8px rgb(34 139 230 / 50%);
            --shadow_widget_select__focus: 0 0 0 3px rgb(0 125 250 / 60%);
            --shadow_widget_select__option: inset 0 1px 1px rgb(0 0 0 / 1%), 0 0 8px rgb(214 214 214 / 50%);
            /* layout_topic */
            --text-shadow_layout_topic__motto: 0 0 10px rgba(0,0,0,1);
            --text-shadow_layout_topic__crumb: 0 0 10px rgba(0,0,0,1);
            /* layout_calc */
            --shadow_layout_calc: 0 0 10px rgba(0,0,0,.5);


        /* filter */
            /* widget_select */
            --filter_widget_select: saturate(1.8) blur(20px);
            /* layout_header */
            --filter_layout_header: saturate(1.8) blur(20px);
            /* layout_nav */
            --filter_layout_nav: saturate(1.8) blur(20px);
    }
}


/* .hby-device_mobile */
@media only screen and (max-width: 700px) {
    /* root */
    :root {
        /* display */
            /* device */
            --display_device__p: none;
            --display_device__p-inline: none;
            --display_device__m: block;
            /* layout_login */
            --margin-l_layout_login__content__item__qrcode: -10px;
            /* layout_profile */
            --position_layout_profile__item__title: static;
            --top_layout_profile__item__title: auto;
            --transform_layout_profile__item__title: none;
            --position_layout_profile__item__opt: static;
            --top_layout_profile__item__opt: auto;
            --transform_layout_profile__item__opt: none;
            --text-align_layout_profile__item__opt: inherit;


        /* margin */
            /* cf-layout_page */
            --margin-tb_cf-layout_page: 8px;
            --margin_cf-layout_page__content-outer: 15px 10px;
            /* layout_main */
            --margin-tb_layout_main: 0;
            /* layout_index-route */
            --margin_layout_index-route__ul: 10px;
            --margin_layout_index-route__li__inner: 5px;
            /* layout_profile */
            --margin-t_layout_profile__item__content: 15px;
            --margin-t_layout_profile__item__content__tight: 10px;
            --margin-t_layout_profile__item__opt: 15px;
        
        
        /* padding */
            /* widget_pretty-btn */
            --padding-tb_widget_pretty-btn__tight: 10px;
            --padding-lr_widget_pretty-btn__tight: 0;
            /* cf-layout_page */
            --padding-tb_cf-layout_page__content__block: 3px;
            --padding-lr_cf-layout_page__content__block: 4px;
            /* layout_profile */
            --padding-tb_layout_profile: 30px;
            --padding-tb_layout_profile__tight: 20px;
            --padding-lr_layout_profile: 20px;
            --padding-l_layout_profile__item__title: 0;


        /* wh */
            /* common */
            --wh-max-width_common: 100%;
            /* layout_login */
            --wh-width_layout_login: 280px;
            /* layout_wrapper */
            --wh-min-height_layout_wrapper__nav__only-p: var(--wh-min-height_layout_wrapper);
            --wh-min-height_layout_wrapper__page__nav: calc(var(--wh-min-height_layout_wrapper__nav) + var(--wh-height_layout_nav));
            /* layout_index-route */
            --wh-max-width_layout_index-route: auto;
            --wh-width_layout_index-route__li: 100%;
            --wh-width_layout_index-route__li__col2__only-m: 50%;
            /* layout_profile */
            --wh-width_layout_profile__item__title: auto;
            --wh-width_layout_profile__item__opt: auto;
            --wh-width_layout_profile__pay-list__li: 50%;
            /* layout_calc */
            --wh-width_layout_calc: 100%;
            --wh-min-height_layout_calc: 100vh;
            --wh-max-height_layout_calc: 100vh;
            --wh_layout_calc__keyboard__key: calc(25vw - var(--wh_layout_calc__keyboard__key__gap) / 4);
            /* layout_note */
            --wh-width_layout_note: 100vw;
            /* layout_footer */
            --wh-height_layout_footer: 0px;
        
        
        /* font */
            /* widget_pretty-btn */
            --font-size_widget_pretty-btn__main__tight: 15px;
            --font-size_widget_pretty-btn__i__tight: 17px;
            /* cf-layout_page */
            --font-size_cf-layout_page__header: 17px;
            --font-size_cf-layout_page__block: 16px;
            --font-size_cf-layout_page__block__h1: 20px;
            --font-size_cf-layout_page__block__h2: 18px;
            --font-size_cf-layout_page__block__h3: 16px;
            --font-line-height_cf-layout_page__block: 22px;
            --font-line-height_cf-layout_page__block__h1: 28px;
            --font-line-height_cf-layout_page__block__h2: 26px;
            --font-line-height_cf-layout_page__block__h3: 22px;
        
        
        /* border */
            /* layout_calc */
            --border-radius_layout_calc: 0;
    }


    /* .hby-theme_default */
    .hby-theme_default {
        /* bg */
            /* layout_wrapper */
            --bg-color_layout_wrapper: #f3f3f3;
            /* cf-layout_page */
            --bg-color_cf-layout_page__header: #fff;
    }
}


body, html {margin:0; padding:0; width:100%; font-size:var(--font-size__default); line-height:var(--font-line-height__default); color:var(--font-color__default); font-family:'zh quote', -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-variant-numeric:tabular-nums; font-variant-ligatures:no-common-ligatures; background:var(--bg-color_body); overscroll-behavior:none; /*text-size-adjust:100% !important; -webkit-text-size-adjust:100% !important;*/}
h1,h2,h3,h4,h5,h6,p,ul,ol,input,textarea,img {margin:0; padding:0; list-style:none; outline:none; border:0; font-family:'zh quote', -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
a {color:var(--color-common__blue); text-decoration:none; transition:all .1s ease-in-out;}
a:hover {border-bottom:1px dotted var(--color-common__blue);}
a:active {border:none;}
input::-webkit-input-placeholder {color:var(--font-color__placeholder);}
* {-webkit-tap-highlight-color:transparent;}


@font-face {font-family:'icon'; src:url(/static/fonts/icon-light.woff2?2) format("woff2"), url(/static/fonts/icon-light.ttf?2) format("truetype");}
@font-face {font-family:'icon-solid'; src:url(/static/fonts/icon-solid.woff2) format("woff2"), url(/static/fonts/icon-solid.ttf) format("truetype");}
@font-face {font-family:'icon-brands'; src:url(/static/fonts/icon-brands.woff2) format("woff2"), url(/static/fonts/icon-brands.ttf) format("truetype");}
/* https://www.paratype.com/fonts/pt/golos-ui */
@font-face {font-family:'golos'; src:url(Golos-UI_Medium.woff2) format("woff2"), url(Golos-UI_Medium.ttf) format("truetype");;}
@font-face {font-family:'golos-regular'; src:url(Golos-UI_Regular.woff2) format("woff2"), url(Golos-UI_Regular.ttf) format("truetype");;}
@font-face {font-family:'bebas'; src:url(/static/fonts/bebas-neue-cyrillic.ttf) format("truetype");}
@font-face {font-family: 'zh quote'; src:local("PingFang SC Regular"), local("SimSun"); unicode-range:U+2018, U+2019, U+201c, U+201d;}


[v-cloak] {
    display: none !important;
}