@charset "utf-8";
@font-face {
    font-family: font1;
    font-display: swap;
    src: url("/buffhub/fonts/PingFangRegular.ttf");
}
/* 游戏评分字体 */
@font-face {
    font-family: Heavy;
    font-display: swap;
    src: url("/buffhub/fonts/PingFangRegular.ttf");
}
:root {
    --CPT-THM-R: 30;
    --CPT-THM-G: 144;
    --CPT-THM-B: 255;
    --CPT-THM-H: 210;
    --CPT-THM-S: 100%;
    --CPT-THM-L: 56%;
    --CPT-THM: rgb(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B));
    --CPT-THM-A0: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/0%);
    --CPT-THM-A5: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/5%);
    --CPT-THM-A10: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/10%);
    --CPT-THM-A25: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/25%);
    --CPT-THM-A50: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/50%);
    --CPT-THM-A75: rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/75%);
    --CPT-FF: var(--CPT-FF-CUSTOMISE, ""),  -apple-system, font1, "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --CPT-FS: 1em;
    --CPT-FW: 400;
    --CPT-FW-B: 600;
    --CPT-FW-700: 700;
    --CPT-FW-EB: 800;
    --CPT-FW-Bold: 900;
    --CPT-LH: 1.5;
    --CPT-US: 3em;
    --CPT-BDC: rgba(0 0 0/10%);
    --CPT-BDW: 1px;
    --CPT-BDR: calc(var(--CPT-FS) / 2);
    --CPT-COLOR: rgba(0 0 0/100%);
    --CPT-COLOR-A5: rgba(0 0 0/5%);
    --CPT-COLOR-A10: rgba(0 0 0/10%);
    --CPT-COLOR-A25: rgba(0 0 0/25%);
    --CPT-COLOR-A50: rgba(0 0 0/50%);
    --CPT-COLOR-A75: rgba(0 0 0/75%);
    --CPT-BGC: #fff;
    --search-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTggMzYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJtMTAuMiA5IDMgMy0xLjIgMS4yLTMtMy0zIDNMNC44IDEybDMtMy0zLTNMNiA0LjhsMyAzIDMtM0wxMy4yIDZ6Ii8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGwtb3BhY2l0eT0iLjUiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB5PSIxOCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
    --select-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTggMzYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMy41LDYuNmw1LjUsNmw1LjUtNkgzLjV6Ii8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGwtb3BhY2l0eT0iLjUiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB5PSIxOCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
    --checkbox-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzYgMzYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNNy4yIDEzLjMgMy41IDkuN2wxLjMtMS4zIDIuMyAyLjMgNi02TDE0LjUgNnoiLz48cGF0aCBpZD0iYiIgZD0ibTEwLjIgOSAzIDMtMS4yIDEuMi0zLTMtMyAzTDQuOCAxMmwzLTMtMy0zTDYgNC44bDMgMyAzLTNMMTMuMiA2eiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNhIiBmaWxsPSIjZmZmIi8+PHVzZSB4bGluazpocmVmPSIjYSIgeT0iMTgiIGZpbGwtb3BhY2l0eT0iLjUiLz48dXNlIHhsaW5rOmhyZWY9IiNiIiB4PSIxOCIgZmlsbD0iI2ZmZiIvPjx1c2UgeGxpbms6aHJlZj0iI2IiIHg9IjE4IiB5PSIxOCIgZmlsbC1vcGFjaXR5PSIuNSIvPjwvc3ZnPg==");
    --radio-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzYgMzYiPjxkZWZzPjxjaXJjbGUgaWQ9ImEiIGN4PSI5IiBjeT0iOSIgcj0iNCIvPjxwYXRoIGlkPSJiIiBkPSJtMTAuMiA5IDMgMy0xLjIgMS4yLTMtMy0zIDNMNC44IDEybDMtMy0zLTNMNiA0LjhsMyAzIDMtM0wxMy4yIDZ6Ii8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGw9IiNmZmYiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB5PSIxOCIgZmlsbC1vcGFjaXR5PSIuNSIvPjx1c2UgeGxpbms6aHJlZj0iI2IiIHg9IjE4IiBmaWxsPSIjZmZmIi8+PHVzZSB4bGluazpocmVmPSIjYiIgeD0iMTgiIHk9IjE4IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PC9zdmc+");
    --switcher-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTggMzYiPjxkZWZzPjxjaXJjbGUgaWQ9ImEiIGN4PSI5IiBjeT0iOSIgcj0iNS41IiBmaWxsPSIjZmZmIi8+PHBhdGggaWQ9ImIiIGZpbGw9IiNmZmYiIGQ9Ik05LDMuNUM2LDMuNSwzLjUsNiwzLjUsOWMwLDMsMi41LDUuNSw1LjUsNS41UzE0LjUsMTIsMTQuNSw5QzE0LjUsNiwxMiwzLjUsOSwzLjV6TTEyLjUsMTBoLTdWOGg3VjEweiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PHVzZSB4bGluazpocmVmPSIjYiIgeT0iMTgiLz48L3N2Zz4=");
    /* 边框颜色 */
    --border-Color: #F5F5F5;
    /* 主题色 */
    --theme-color: #EE7115;
    /* 白色 */
    --white: #FFFFFF;
    /* 主题字体颜色 */
    --color:#000000;
    /* 没有选择的颜色 */
    --deputy-color: #90949A;
    /* 文本底色 */
    --background-color:#F4F7F9;
    /* 字体大小 */
    --font-18: 18px;
    --font-22: 22px;
    --font-24: 24px;
    --font-40: 40px;
    /* 斜体 */
    --font-Italic: Italic;

}

[class*="cpt-"] {
    font-size: var(--CPT-FS);
    font-family: var(--CPT-FF);
    font-weight: var(--CPT-FW);
    line-height: var(--CPT-LH);
    color: var(--CPT-COLOR);
    background: var(--CPT-BGC);
    accent-color: var(--CPT-THM);
    position: relative;
    box-sizing: border-box
}

[class*="cpt-"]:not(.cpt-checkbox,.cpt-radio,.cpt-switcher):focus-within {
    --border-color: var(--CPT-THM);
    --shadow-focus-color: var(--CPT-THM-A50);
    --background-focus-color: var(--CPT-THM-A10)
}

[class*="cpt-"] > input:not([type="checkbox"],[type="radio"]), [class*="cpt-"] > select:not([multiple]), [class*="cpt-"] > textarea {
    font-size: var(--CPT-FS);
    font-family: var(--CPT-FF);
    font-weight: var(--CPT-FW-B);
    color: var(--CPT-COLOR);
    background: unset;
    height: var(--CPT-US);
    line-height: var(--CPT-LH);
    margin: unset;
    padding-block: unset;
    padding-inline: calc(var(--CPT-US) / 2);
    box-sizing: border-box;
    border: unset;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color ease 999999s 999999s
}

[class*="cpt-"] > input[type="number"] {
    text-align: center;
    -moz-appearance: textfield
}

[class*="cpt-"] > input[type="number"]::-webkit-outer-spin-button, [class*="cpt-"] > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none
}

[class*="cpt-"] > input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: block;
    width: calc(var(--CPT-FS) * 1.25);
    height: calc(var(--CPT-FS) * 1.25);
    border-radius: 100%;
    background-color: var(--CPT-COLOR-A10);
    background-image: var(--search-background-image);
    background-size: 100% 200%;
    background-position-x: 0;
    background-position-y: calc(var(--search-cancel-button-background-position-y, 0) * 100%);
    background-repeat: no-repeat;
    opacity: 1;
    overflow: hidden;
    cursor: pointer
}

[class*="cpt-"] > input::-webkit-input-placeholder, [class*="cpt-"] > textarea::-webkit-input-placeholder {
    font-weight: var(--CPT-FW);
    color: var(--CPT-COLOR-A25)
}

[class*="cpt-"] > input::-moz-placeholder, [class*="cpt-"] > textarea::-moz-placeholder {
    font-weight: var(--CPT-FW);
    color: var(--CPT-COLOR-A25);
    opacity: 1
}

[class*="cpt-"] > input:-webkit-autofill, [class*="cpt-"] > textarea:-webkit-autofill, [class*="cpt-"] > select:-webkit-autofill {
    -webkit-transition: background-color ease 999999s 999999s;
    transition: background-color ease 999999s 999999s
}

[class*="cpt-"] > input:-internal-autofill-selected, [class*="cpt-"] > input:-webkit-autofill, [class*="cpt-"] > input:autofill, [class*="cpt-"] > textarea:-internal-autofill-selected, [class*="cpt-"] > textarea:-webkit-autofill, [class*="cpt-"] > textarea:autofill, [class*="cpt-"] > select:-internal-autofill-selected, [class*="cpt-"] > select:-webkit-autofill, [class*="cpt-"] > select:autofill {
    -webkit-transition: background-color ease 999999s 999999s;
    transition: background-color ease 999999s 999999s
}

[class*="cpt-"]:has(select[disabled],input:not([type="checkbox"],[type="radio"],[type="range"]):is([readonly],[disabled])) {
    background-image: linear-gradient(var(--CPT-COLOR-A5), var(--CPT-COLOR-A5))
}

[class*="cpt-"] > input:not([type="checkbox"],[type="radio"]):is([readonly],[disabled]), [class*="cpt-"] > select[disabled] {
    color: var(--CPT-COLOR-A50);
    cursor: not-allowed;
    opacity: unset
}

[class*="cpt-"]:has(textarea:is([readonly],[disabled])) {
    background-image: linear-gradient(var(--CPT-COLOR-A5), var(--CPT-COLOR-A5))
}

[class*="cpt-"] > textarea:is([readonly],[disabled]) {
    color: var(--CPT-COLOR-A50);
    cursor: not-allowed
}

[class*="cpt-"] > textarea, [class*="cpt-"] > .dropdown {
    scroll-behavior: smooth;
    scrollbar-color: var(--CPT-COLOR-A25) transparent;
    scrollbar-width: thin
}

[class*="cpt-"] > textarea::-webkit-scrollbar, [class*="cpt-"] > .dropdown::-webkit-scrollbar {
    height: .5em;
    width: .5em;
    overflow: visible
}

[class*="cpt-"] > textarea::-webkit-scrollbar-thumb, [class*="cpt-"] > .dropdown::-webkit-scrollbar-thumb {
    background-color: var(--CPT-COLOR-A25);
    background-clip: padding-box;
    min-height: 2em
}

[class*="cpt-"] > textarea::-webkit-scrollbar-corner, [class*="cpt-"] > .dropdown::-webkit-scrollbar-corner {
    background: none
}

[class*="cpt-"] > textarea::-webkit-scrollbar-button, [class*="cpt-"] > .dropdown::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none
}

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../iconfont/MaterialIconsx.woff2") format("woff2")
}

:root {
    --IconFF1: "Material Icons";
    --IconFF: var(--IconFF1)
}

[icon]::before, [icon-only]::before, [icon-after]::after {
    font-family: var(--IconFF);
    font-weight: normal;
    font-style: normal;
    speak: none;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

@font-face {
    font-family: "Brand Icons";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../iconfont/brand-iconsx.woff2") format("woff2")
}

[icon-brand]::before {
    content: var(--icon, attr(icon-brand));
    font-family: "Brand Icons";
    font-weight: normal;
    font-style: normal;
    speak: none;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

[color="black"], .black {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%
}

[color="silver"], .silver {
    --r: 192;
    --g: 192;
    --b: 192;
    --h: 0;
    --s: 0%;
    --l: 75.29%
}

[color="gray"], .gray, [color="grey"], .grey {
    --r: 128;
    --g: 128;
    --b: 128;
    --h: 0;
    --s: 0%;
    --l: 50.2%
}

[color="white"], .white {
    --r: 255;
    --g: 255;
    --b: 255;
    --h: 0;
    --s: 0%;
    --l: 100%
}

[color="maroon"], .maroon {
    --r: 128;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 25.1%
}

[color="red"], .red {
    --r: 255;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 50%
}

[color="purple"], .purple {
    --r: 128;
    --g: 0;
    --b: 128;
    --h: 300;
    --s: 100%;
    --l: 25.1%
}

[color="fuchsia"], .fuchsia, [color="magenta"], .magenta {
    --r: 255;
    --g: 0;
    --b: 255;
    --h: 300;
    --s: 100%;
    --l: 50%
}

[color="green"], .green {
    --r: 0;
    --g: 128;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 25.1%
}

[color="lime"], .lime {
    --r: 0;
    --g: 255;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 50%
}

[color="olive"], .olive {
    --r: 128;
    --g: 128;
    --b: 0;
    --h: 60;
    --s: 100%;
    --l: 25.1%
}

[color="yellow"], .yellow {
    --r: 255;
    --g: 255;
    --b: 0;
    --h: 60;
    --s: 100%;
    --l: 50%
}

[color="navy"], .navy {
    --r: 0;
    --g: 0;
    --b: 128;
    --h: 240;
    --s: 100%;
    --l: 25.1%
}

[color="blue"], .blue {
    --r: 0;
    --g: 0;
    --b: 255;
    --h: 240;
    --s: 100%;
    --l: 50%
}

[color="teal"], .teal {
    --r: 0;
    --g: 128;
    --b: 128;
    --h: 180;
    --s: 100%;
    --l: 25.1%
}

[color="aqua"], .aqua, [color="cyan"], .cyan {
    --r: 0;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 50%
}

[color="orange"], .orange {
    --r: 255;
    --g: 165;
    --b: 0;
    --h: 38.82;
    --s: 100%;
    --l: 50%
}

[color="aliceblue"], .aliceblue {
    --r: 240;
    --g: 248;
    --b: 255;
    --h: 208;
    --s: 100%;
    --l: 97.06%
}

[color="antiquewhite"], .antiquewhite {
    --r: 250;
    --g: 235;
    --b: 215;
    --h: 34.29;
    --s: 77.78%;
    --l: 91.18%
}

[color="aquamarine"], .aquamarine {
    --r: 127;
    --g: 255;
    --b: 212;
    --h: 159.84;
    --s: 100%;
    --l: 74.9%
}

[color="azure"], .azure {
    --r: 240;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 97.06%
}

[color="beige"], .beige {
    --r: 245;
    --g: 245;
    --b: 220;
    --h: 60;
    --s: 55.56%;
    --l: 91.18%
}

[color="bisque"], .bisque {
    --r: 255;
    --g: 228;
    --b: 196;
    --h: 32.54;
    --s: 100%;
    --l: 88.43%
}

[color="blanchedalmond"], .blanchedalmond {
    --r: 255;
    --g: 235;
    --b: 205;
    --h: 36;
    --s: 100%;
    --l: 90.2%
}

[color="blueviolet"], .blueviolet {
    --r: 138;
    --g: 43;
    --b: 226;
    --h: 271.15;
    --s: 75.93%;
    --l: 52.75%
}

[color="brown"], .brown {
    --r: 165;
    --g: 42;
    --b: 42;
    --h: 0;
    --s: 59.42%;
    --l: 40.59%
}

[color="burlywood"], .burlywood {
    --r: 222;
    --g: 184;
    --b: 135;
    --h: 33.79;
    --s: 56.86%;
    --l: 70%
}

[color="cadetblue"], .cadetblue {
    --r: 95;
    --g: 158;
    --b: 160;
    --h: 181.85;
    --s: 25.49%;
    --l: 50%
}

[color="chartreuse"], .chartreuse {
    --r: 127;
    --g: 255;
    --b: 0;
    --h: 90.12;
    --s: 100%;
    --l: 50%
}

[color="chocolate"], .chocolate {
    --r: 210;
    --g: 105;
    --b: 30;
    --h: 25;
    --s: 75%;
    --l: 47.06%
}

[color="coral"], .coral {
    --r: 255;
    --g: 127;
    --b: 80;
    --h: 16.11;
    --s: 100%;
    --l: 65.69%
}

[color="cornflowerblue"], .cornflowerblue {
    --r: 100;
    --g: 149;
    --b: 237;
    --h: 218.54;
    --s: 79.19%;
    --l: 66.08%
}

[color="cornsilk"], .cornsilk {
    --r: 255;
    --g: 248;
    --b: 220;
    --h: 48;
    --s: 100%;
    --l: 93.14%
}

[color="crimson"], .crimson {
    --r: 220;
    --g: 20;
    --b: 60;
    --h: 348;
    --s: 83.33%;
    --l: 47.06%
}

[color="darkblue"], .darkblue {
    --r: 0;
    --g: 0;
    --b: 139;
    --h: 240;
    --s: 100%;
    --l: 27.25%
}

[color="darkcyan"], .darkcyan {
    --r: 0;
    --g: 139;
    --b: 139;
    --h: 180;
    --s: 100%;
    --l: 27.25%
}

[color="darkgoldenrod"], .darkgoldenrod {
    --r: 184;
    --g: 134;
    --b: 11;
    --h: 42.66;
    --s: 88.72%;
    --l: 38.24%
}

[color="darkgray"], .darkgray, [color="darkgrey"], .darkgrey {
    --r: 169;
    --g: 169;
    --b: 169;
    --h: 0;
    --s: 0%;
    --l: 66.27%
}

[color="darkgreen"], .darkgreen {
    --r: 0;
    --g: 100;
    --b: 0;
    --h: 120;
    --s: 100%;
    --l: 19.61%
}

[color="darkkhaki"], .darkkhaki {
    --r: 189;
    --g: 183;
    --b: 107;
    --h: 55.61;
    --s: 38.32%;
    --l: 58.04%
}

[color="darkmagenta"], .darkmagenta {
    --r: 139;
    --g: 0;
    --b: 139;
    --h: 300;
    --s: 100%;
    --l: 27.25%
}

[color="darkolivegreen"], .darkolivegreen {
    --r: 85;
    --g: 107;
    --b: 47;
    --h: 82;
    --s: 38.96%;
    --l: 30.2%
}

[color="darkorange"], .darkorange {
    --r: 255;
    --g: 140;
    --b: 0;
    --h: 32.94;
    --s: 100%;
    --l: 50%
}

[color="darkorchid"], .darkorchid {
    --r: 153;
    --g: 50;
    --b: 204;
    --h: 280.13;
    --s: 60.63%;
    --l: 49.8%
}

[color="darkred"], .darkred {
    --r: 139;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 100%;
    --l: 27.25%
}

[color="darksalmon"], .darksalmon {
    --r: 233;
    --g: 150;
    --b: 122;
    --h: 15.14;
    --s: 71.61%;
    --l: 69.61%
}

[color="darkseagreen"], .darkseagreen {
    --r: 143;
    --g: 188;
    --b: 143;
    --h: 120;
    --s: 25.14%;
    --l: 64.9%
}

[color="darkslateblue"], .darkslateblue {
    --r: 72;
    --g: 61;
    --b: 139;
    --h: 248.46;
    --s: 39%;
    --l: 39.22%
}

[color="darkslategray"], .darkslategray, [color="darkslategrey"], .darkslategrey {
    --r: 47;
    --g: 79;
    --b: 79;
    --h: 180;
    --s: 25.4%;
    --l: 24.71%
}

[color="darkturquoise"], .darkturquoise {
    --r: 0;
    --g: 206;
    --b: 209;
    --h: 180.86;
    --s: 100%;
    --l: 40.98%
}

[color="darkviolet"], .darkviolet {
    --r: 148;
    --g: 0;
    --b: 211;
    --h: 282.09;
    --s: 100%;
    --l: 41.37%
}

[color="deeppink"], .deeppink {
    --r: 255;
    --g: 20;
    --b: 147;
    --h: 327.57;
    --s: 100%;
    --l: 53.92%
}

[color="deepskyblue"], .deepskyblue {
    --r: 0;
    --g: 191;
    --b: 255;
    --h: 195.06;
    --s: 100%;
    --l: 50%
}

[color="dimgray"], .dimgray, [color="dimgrey"], .dimgrey {
    --r: 105;
    --g: 105;
    --b: 105;
    --h: 0;
    --s: 0%;
    --l: 41.18%
}

[color="dodgerblue"], .dodgerblue {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 209.6;
    --s: 100%;
    --l: 55.88%
}

[color="firebrick"], .firebrick {
    --r: 178;
    --g: 34;
    --b: 34;
    --h: 0;
    --s: 67.92%;
    --l: 41.57%
}

[color="floralwhite"], .floralwhite {
    --r: 255;
    --g: 250;
    --b: 240;
    --h: 40;
    --s: 100%;
    --l: 97.06%
}

[color="forestgreen"], .forestgreen {
    --r: 34;
    --g: 139;
    --b: 34;
    --h: 120;
    --s: 60.69%;
    --l: 33.92%
}

[color="gainsboro"], .gainsboro {
    --r: 220;
    --g: 220;
    --b: 220;
    --h: 0;
    --s: 0%;
    --l: 86.27%
}

[color="ghostwhite"], .ghostwhite {
    --r: 248;
    --g: 248;
    --b: 255;
    --h: 240;
    --s: 100%;
    --l: 98.63%
}

[color="gold"], .gold {
    --r: 255;
    --g: 215;
    --b: 0;
    --h: 50.59;
    --s: 100%;
    --l: 50%
}

[color="goldenrod"], .goldenrod {
    --r: 218;
    --g: 165;
    --b: 32;
    --h: 42.9;
    --s: 74.4%;
    --l: 49.02%
}

[color="greenyellow"], .greenyellow {
    --r: 173;
    --g: 255;
    --b: 47;
    --h: 83.65;
    --s: 100%;
    --l: 59.22%
}

[color="honeydew"], .honeydew {
    --r: 240;
    --g: 255;
    --b: 240;
    --h: 120;
    --s: 100%;
    --l: 97.06%
}

[color="hotpink"], .hotpink {
    --r: 255;
    --g: 105;
    --b: 180;
    --h: 330;
    --s: 100%;
    --l: 70.59%
}

[color="indianred"], .indianred {
    --r: 205;
    --g: 92;
    --b: 92;
    --h: 0;
    --s: 53.05%;
    --l: 58.24%
}

[color="indigo"], .indigo {
    --r: 75;
    --g: 0;
    --b: 130;
    --h: 274.62;
    --s: 100%;
    --l: 25.49%
}

[color="ivory"], .ivory {
    --r: 255;
    --g: 255;
    --b: 240;
    --h: 60;
    --s: 100%;
    --l: 97.06%
}

[color="khaki"], .khaki {
    --r: 240;
    --g: 230;
    --b: 140;
    --h: 54;
    --s: 76.92%;
    --l: 74.51%
}

[color="lavender"], .lavender {
    --r: 230;
    --g: 230;
    --b: 250;
    --h: 240;
    --s: 66.67%;
    --l: 94.12%
}

[color="lavenderblush"], .lavenderblush {
    --r: 255;
    --g: 240;
    --b: 245;
    --h: 340;
    --s: 100%;
    --l: 97.06%
}

[color="lawngreen"], .lawngreen {
    --r: 124;
    --g: 252;
    --b: 0;
    --h: 90.48;
    --s: 100%;
    --l: 49.41%
}

[color="lemonchiffon"], .lemonchiffon {
    --r: 255;
    --g: 250;
    --b: 205;
    --h: 54;
    --s: 100%;
    --l: 90.2%
}

[color="lightblue"], .lightblue {
    --r: 173;
    --g: 216;
    --b: 230;
    --h: 194.74;
    --s: 53.27%;
    --l: 79.02%
}

[color="lightcoral"], .lightcoral {
    --r: 240;
    --g: 128;
    --b: 128;
    --h: 0;
    --s: 78.87%;
    --l: 72.16%
}

[color="lightcyan"], .lightcyan {
    --r: 224;
    --g: 255;
    --b: 255;
    --h: 180;
    --s: 100%;
    --l: 93.92%
}

[color="lightgoldenrodyellow"], .lightgoldenrodyellow {
    --r: 250;
    --g: 250;
    --b: 210;
    --h: 60;
    --s: 80%;
    --l: 90.2%
}

[color="lightgray"], .lightgray, [color="lightgrey"], .lightgrey {
    --r: 211;
    --g: 211;
    --b: 211;
    --h: 0;
    --s: 0%;
    --l: 82.75%
}

[color="lightgreen"], .lightgreen {
    --r: 144;
    --g: 238;
    --b: 144;
    --h: 120;
    --s: 73.44%;
    --l: 74.9%
}

[color="lightpink"], .lightpink {
    --r: 255;
    --g: 182;
    --b: 193;
    --h: 350.96;
    --s: 100%;
    --l: 85.69%
}

[color="lightsalmon"], .lightsalmon {
    --r: 255;
    --g: 160;
    --b: 122;
    --h: 17.14;
    --s: 100%;
    --l: 73.92%
}

[color="lightseagreen"], .lightseagreen {
    --r: 32;
    --g: 178;
    --b: 170;
    --h: 176.71;
    --s: 69.52%;
    --l: 41.18%
}

[color="lightskyblue"], .lightskyblue {
    --r: 135;
    --g: 206;
    --b: 250;
    --h: 202.96;
    --s: 92%;
    --l: 75.49%
}

[color="lightslategray"], .lightslategray, [color="lightslategrey"], .lightslategrey {
    --r: 119;
    --g: 136;
    --b: 153;
    --h: 210;
    --s: 14.29%;
    --l: 53.33%
}

[color="lightsteelblue"], .lightsteelblue {
    --r: 176;
    --g: 196;
    --b: 222;
    --h: 213.91;
    --s: 41.07%;
    --l: 78.04%
}

[color="lightyellow"], .lightyellow {
    --r: 255;
    --g: 255;
    --b: 224;
    --h: 60;
    --s: 100%;
    --l: 93.92%
}

[color="limegreen"], .limegreen {
    --r: 50;
    --g: 205;
    --b: 50;
    --h: 120;
    --s: 60.78%;
    --l: 50%
}

[color="linen"], .linen {
    --r: 250;
    --g: 240;
    --b: 230;
    --h: 30;
    --s: 66.67%;
    --l: 94.12%
}

[color="mediumaquamarine"], .mediumaquamarine {
    --r: 102;
    --g: 205;
    --b: 170;
    --h: 159.61;
    --s: 50.74%;
    --l: 60.2%
}

[color="mediumblue"], .mediumblue {
    --r: 0;
    --g: 0;
    --b: 205;
    --h: 240;
    --s: 100%;
    --l: 40.2%
}

[color="mediumorchid"], .mediumorchid {
    --r: 186;
    --g: 85;
    --b: 211;
    --h: 288.1;
    --s: 58.88%;
    --l: 58.04%
}

[color="mediumpurple"], .mediumpurple {
    --r: 147;
    --g: 112;
    --b: 219;
    --h: 259.63;
    --s: 59.78%;
    --l: 64.9%
}

[color="mediumseagreen"], .mediumseagreen {
    --r: 60;
    --g: 179;
    --b: 113;
    --h: 146.72;
    --s: 49.79%;
    --l: 46.86%
}

[color="mediumslateblue"], .mediumslateblue {
    --r: 123;
    --g: 104;
    --b: 238;
    --h: 248.51;
    --s: 79.76%;
    --l: 67.06%
}

[color="mediumspringgreen"], .mediumspringgreen {
    --r: 0;
    --g: 250;
    --b: 154;
    --h: 156.96;
    --s: 100%;
    --l: 49.02%
}

[color="mediumturquoise"], .mediumturquoise {
    --r: 72;
    --g: 209;
    --b: 204;
    --h: 177.81;
    --s: 59.83%;
    --l: 55.1%
}

[color="mediumvioletred"], .mediumvioletred {
    --r: 199;
    --g: 21;
    --b: 133;
    --h: 322.25;
    --s: 80.91%;
    --l: 43.14%
}

[color="midnightblue"], .midnightblue {
    --r: 25;
    --g: 25;
    --b: 112;
    --h: 240;
    --s: 63.5%;
    --l: 26.86%
}

[color="mintcream"], .mintcream {
    --r: 245;
    --g: 255;
    --b: 250;
    --h: 150;
    --s: 100%;
    --l: 98.04%
}

[color="mistyrose"], .mistyrose {
    --r: 255;
    --g: 228;
    --b: 225;
    --h: 6;
    --s: 100%;
    --l: 94.12%
}

[color="moccasin"], .moccasin {
    --r: 255;
    --g: 228;
    --b: 181;
    --h: 38.11;
    --s: 100%;
    --l: 85.49%
}

[color="navajowhite"], .navajowhite {
    --r: 255;
    --g: 222;
    --b: 173;
    --h: 35.85;
    --s: 100%;
    --l: 83.92%
}

[color="oldlace"], .oldlace {
    --r: 253;
    --g: 245;
    --b: 230;
    --h: 39.13;
    --s: 85.19%;
    --l: 94.71%
}

[color="olivedrab"], .olivedrab {
    --r: 107;
    --g: 142;
    --b: 35;
    --h: 79.63;
    --s: 60.45%;
    --l: 34.71%
}

[color="orangered"], .orangered {
    --r: 255;
    --g: 69;
    --b: 0;
    --h: 16.24;
    --s: 100%;
    --l: 50%
}

[color="orchid"], .orchid {
    --r: 218;
    --g: 112;
    --b: 214;
    --h: 302.26;
    --s: 58.89%;
    --l: 64.71%
}

[color="palegoldenrod"], .palegoldenrod {
    --r: 238;
    --g: 232;
    --b: 170;
    --h: 54.71;
    --s: 66.67%;
    --l: 80%
}

[color="palegreen"], .palegreen {
    --r: 152;
    --g: 251;
    --b: 152;
    --h: 120;
    --s: 92.52%;
    --l: 79.02%
}

[color="paleturquoise"], .paleturquoise {
    --r: 175;
    --g: 238;
    --b: 238;
    --h: 180;
    --s: 64.95%;
    --l: 80.98%
}

[color="palevioletred"], .palevioletred {
    --r: 219;
    --g: 112;
    --b: 147;
    --h: 340.37;
    --s: 59.78%;
    --l: 64.9%
}

[color="papayawhip"], .papayawhip {
    --r: 255;
    --g: 239;
    --b: 213;
    --h: 37.14;
    --s: 100%;
    --l: 91.76%
}

[color="peachpuff"], .peachpuff {
    --r: 255;
    --g: 218;
    --b: 185;
    --h: 28.29;
    --s: 100%;
    --l: 86.27%
}

[color="peru"], .peru {
    --r: 205;
    --g: 133;
    --b: 63;
    --h: 29.58;
    --s: 58.68%;
    --l: 52.55%
}

[color="pink"], .pink {
    --r: 255;
    --g: 192;
    --b: 203;
    --h: 349.52;
    --s: 100%;
    --l: 87.65%
}

[color="plum"], .plum {
    --r: 221;
    --g: 160;
    --b: 221;
    --h: 300;
    --s: 47.29%;
    --l: 74.71%
}

[color="powderblue"], .powderblue {
    --r: 176;
    --g: 224;
    --b: 230;
    --h: 186.67;
    --s: 51.92%;
    --l: 79.61%
}

[color="rosybrown"], .rosybrown {
    --r: 188;
    --g: 143;
    --b: 143;
    --h: 0;
    --s: 25.14%;
    --l: 64.9%
}

[color="royalblue"], .royalblue {
    --r: 65;
    --g: 105;
    --b: 225;
    --h: 225;
    --s: 72.73%;
    --l: 56.86%
}

[color="saddlebrown"], .saddlebrown {
    --r: 139;
    --g: 69;
    --b: 19;
    --h: 25;
    --s: 75.95%;
    --l: 30.98%
}

[color="salmon"], .salmon {
    --r: 250;
    --g: 128;
    --b: 114;
    --h: 6.18;
    --s: 93.15%;
    --l: 71.37%
}

[color="sandybrown"], .sandybrown {
    --r: 244;
    --g: 164;
    --b: 96;
    --h: 27.57;
    --s: 87.06%;
    --l: 66.67%
}

[color="seagreen"], .seagreen {
    --r: 46;
    --g: 139;
    --b: 87;
    --h: 146.45;
    --s: 50.27%;
    --l: 36.27%
}

[color="seashell"], .seashell {
    --r: 255;
    --g: 245;
    --b: 238;
    --h: 24.71;
    --s: 100%;
    --l: 96.67%
}

[color="sienna"], .sienna {
    --r: 160;
    --g: 82;
    --b: 45;
    --h: 19.3;
    --s: 56.1%;
    --l: 40.2%
}

[color="skyblue"], .skyblue {
    --r: 135;
    --g: 206;
    --b: 235;
    --h: 197.4;
    --s: 71.43%;
    --l: 72.55%
}

[color="slateblue"], .slateblue {
    --r: 106;
    --g: 90;
    --b: 205;
    --h: 248.35;
    --s: 53.49%;
    --l: 57.84%
}

[color="slategray"], .slategray, [color="slategrey"], .slategrey {
    --r: 112;
    --g: 128;
    --b: 144;
    --h: 210;
    --s: 12.6%;
    --l: 50.2%
}

[color="snow"], .snow {
    --r: 255;
    --g: 250;
    --b: 250;
    --h: 0;
    --s: 100%;
    --l: 99.02%
}

[color="springgreen"], .springgreen {
    --r: 0;
    --g: 255;
    --b: 127;
    --h: 149.88;
    --s: 100%;
    --l: 50%
}

[color="steelblue"], .steelblue {
    --r: 70;
    --g: 130;
    --b: 180;
    --h: 207.27;
    --s: 44%;
    --l: 49.02%
}

[color="tan"], .tan {
    --r: 210;
    --g: 180;
    --b: 140;
    --h: 34.29;
    --s: 43.75%;
    --l: 68.63%
}

[color="thistle"], .thistle {
    --r: 216;
    --g: 191;
    --b: 216;
    --h: 300;
    --s: 24.27%;
    --l: 79.8%
}

[color="tomato"], .tomato {
    --r: 255;
    --g: 99;
    --b: 71;
    --h: 9.13;
    --s: 100%;
    --l: 63.92%
}

[color="turquoise"], .turquoise {
    --r: 64;
    --g: 224;
    --b: 208;
    --h: 174;
    --s: 72.07%;
    --l: 56.47%
}

[color="violet"], .violet {
    --r: 238;
    --g: 130;
    --b: 238;
    --h: 300;
    --s: 76.06%;
    --l: 72.16%
}

[color="wheat"], .wheat {
    --r: 245;
    --g: 222;
    --b: 179;
    --h: 39.09;
    --s: 76.74%;
    --l: 83.14%
}

[color="whitesmoke"], .whitesmoke {
    --r: 245;
    --g: 245;
    --b: 245;
    --h: 0;
    --s: 0%;
    --l: 96.08%
}

[color="yellowgreen"], .yellowgreen {
    --r: 154;
    --g: 205;
    --b: 50;
    --h: 79.74;
    --s: 60.78%;
    --l: 50%
}

[color="rebeccapurple"], .rebeccapurple {
    --r: 102;
    --g: 51;
    --b: 153;
    --h: 270;
    --s: 50%;
    --l: 40%
}

[color="kleinblue"], .kleinblue {
    --r: 0;
    --g: 47;
    --b: 167;
    --h: 223.11;
    --s: 100%;
    --l: 32.75%
}

[color='alipay'], .alipay {
    --r: 22;
    --g: 119;
    --b: 254;
    --h: 214.91;
    --s: 99.15%;
    --l: 54.12%
}

[color='android'], .android {
    --r: 52;
    --g: 168;
    --b: 83;
    --h: 136.03;
    --s: 52.73%;
    --l: 43.14%
}

[color='apple'], .apple, [color='blackberry'], .blackberry, [color='firefox'], .firefox, [color='github'], .github, [color='ie'], .ie, [color='instagram'], .instagram, [color='microsoft'], .microsoft, [color='spotify'], .spotify, [color='steam'], .steam, [color='tiktok'], .tiktok, [color='xcom'], .xcom {
    --r: 0;
    --g: 0;
    --b: 0;
    --h: 0;
    --s: 0%;
    --l: 0%
}

[color='chrome'], .chrome {
    --r: 26;
    --g: 115;
    --b: 232;
    --h: 214.08;
    --s: 81.75%;
    --l: 50.59%
}

[color='discord'], .discord {
    --r: 88;
    --g: 101;
    --b: 242;
    --h: 234.94;
    --s: 85.56%;
    --l: 64.71%
}

[color='edge'], .edge {
    --r: 0;
    --g: 103;
    --b: 184;
    --h: 206.41;
    --s: 100%;
    --l: 36.08%
}

[color='facebook'], .facebook {
    --r: 8;
    --g: 102;
    --b: 255;
    --h: 217.17;
    --s: 100%;
    --l: 51.57%
}

[color='google'], .google {
    --r: 66;
    --g: 133;
    --b: 244;
    --h: 217.42;
    --s: 89%;
    --l: 60.78%
}

[color='googleplay'], .googleplay {
    --r: 104;
    --g: 159;
    --b: 56;
    --h: 92.04;
    --s: 47.91%;
    --l: 42.16%
}

[color='hangouts'], .hangouts {
    --r: 28;
    --g: 164;
    --b: 99;
    --h: 151.32;
    --s: 70.83%;
    --l: 37.65%
}

[color='hitpoints'], .hitpoints {
    --r: 102;
    --g: 51;
    --b: 153;
    --h: 270;
    --s: 50%;
    --l: 40%
}

[color='huawei'], .huawei {
    --r: 207;
    --g: 10;
    --b: 44;
    --h: 349.64;
    --s: 90.78%;
    --l: 42.55%
}

[color='kaleoz'], .kaleoz, [color='qq'], .qq {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 209.6;
    --s: 100%;
    --l: 55.88%
}

[color='kchat'], .kchat {
    --r: 30;
    --g: 144;
    --b: 255;
    --h: 0;
    --s: 0%;
    --l: 0%
}

[color='line'], .line {
    --r: 34;
    --g: 186;
    --b: 79;
    --h: 137.76;
    --s: 69.09%;
    --l: 43.14%
}

[color='linkedin'], .linkedin {
    --r: 10;
    --g: 102;
    --b: 194;
    --h: 210;
    --s: 90.2%;
    --l: 40%
}

[color='messenger'], .messenger {
    --r: 0;
    --g: 132;
    --b: 255;
    --h: 208.94;
    --s: 100%;
    --l: 50%
}

[color='mi'], .mi {
    --r: 255;
    --g: 106;
    --b: 0;
    --h: 24.94;
    --s: 100%;
    --l: 50%
}

[color='paypal'], .paypal {
    --r: 0;
    --g: 112;
    --b: 186;
    --h: 203.87;
    --s: 100%;
    --l: 36.47%
}

[color='pinterest'], .pinterest {
    --r: 230;
    --g: 0;
    --b: 35;
    --h: 350.87;
    --s: 100%;
    --l: 45.1%
}

[color='playstation'], .playstation {
    --r: 0;
    --g: 114;
    --b: 206;
    --h: 206.8;
    --s: 100%;
    --l: 40.39%
}

[color='safari'], .safari {
    --r: 0;
    --g: 112;
    --b: 201;
    --h: 206.57;
    --s: 100%;
    --l: 39.41%
}

[color='seagm'], .seagm {
    --r: 255;
    --g: 69;
    --b: 0;
    --h: 16.24;
    --s: 100%;
    --l: 50%
}

[color='seagmpay'], .seagmpay {
    --r: 249;
    --g: 0;
    --b: 26;
    --h: 353.73;
    --s: 100%;
    --l: 48.82%
}

[color='skype'], .skype {
    --r: 0;
    --g: 120;
    --b: 202;
    --h: 204.36;
    --s: 100%;
    --l: 39.61%
}

[color='telegram'], .telegram {
    --r: 0;
    --g: 136;
    --b: 204;
    --h: 200;
    --s: 100%;
    --l: 40%
}

[color='twitch'], .twitch {
    --r: 119;
    --g: 44;
    --b: 232;
    --h: 263.94;
    --s: 80.34%;
    --l: 54.12%
}

[color='twitter'], .twitter {
    --r: 29;
    --g: 161;
    --b: 242;
    --h: 202.82;
    --s: 89.12%;
    --l: 53.14%
}

[color='vk'], .vk {
    --r: 74;
    --g: 118;
    --b: 168;
    --h: 211.91;
    --s: 38.84%;
    --l: 47.45%
}

[color='wechat'], .wechat, [color='wechatpay'], .wechatpay {
    --r: 26;
    --g: 173;
    --b: 25;
    --h: 119.59;
    --s: 74.75%;
    --l: 38.82%
}

[color='weibo'], .weibo {
    --r: 230;
    --g: 23;
    --b: 45;
    --h: 353.62;
    --s: 81.82%;
    --l: 49.61%
}

[color='whatsapp'], .whatsapp {
    --r: 37;
    --g: 211;
    --b: 102;
    --h: 142.41;
    --s: 70.16%;
    --l: 48.63%
}

[color='windows'], .windows {
    --r: 2;
    --g: 121;
    --b: 217;
    --h: 206.79;
    --s: 98.17%;
    --l: 42.94%
}

[color='xbox'], .xbox {
    --r: 16;
    --g: 124;
    --b: 16;
    --h: 120;
    --s: 77.14%;
    --l: 27.45%
}

[color='youtube'], .youtube {
    --r: 230;
    --g: 33;
    --b: 23;
    --h: 2.9;
    --s: 81.82%;
    --l: 49.61%
}

[color='snapchat'], .snapchat {
    --r: 255;
    --g: 252;
    --b: 0;
    --h: 59.29;
    --s: 100%;
    --l: 50%
}

[color='zalo'], .zalo {
    --r: 0;
    --g: 104;
    --b: 255;
    --h: 215.53;
    --s: 100%;
    --l: 50%
}

.btw {
    display: inline-block;
    vertical-align: top;
    font-size: var(--font-size, var(--CPT-FS));
    font-family: var(--font-family, var(--CPT-FF));
    font-weight: var(--font-weight, var(--CPT-FW-B));
    color: var(--color, #000);
    background-color: var(--background-color, #fff);
    border-radius: var(--border-radius, var(--CPT-BDR));
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-color, transparent) 0 0 .5em;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    --icon-size: calc(var(--CPT-FS) * 2);
    --transition: transform 300ms, opacity 300ms, background-color 300ms, color 300ms, box-shadow 300ms
}

.btw > span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap, 1em);
    line-height: var(--line-height, 2);
    padding-block: var(--padding-block, calc((var(--CPT-US) - var(--line-height, 2) * var(--CPT-FS)) / 2));
    padding-inline: var(--padding-inline, calc(var(--CPT-US) / 2));
    overflow: hidden;
    white-space: nowrap
}

button.btw {
    padding: unset;
    border: unset
}

.btw > span[icon]::before, .btw > span[icon-brand]::before, .btw > span[icon-only]::before {
    font-size: var(--icon-size);
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.btw > span[icon]::before {
    content: var(--icon, attr(icon));
    flex: none;
    order: var(--icon-order, -1)
}

.btw > span[icon-only] {
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    margin: calc((var(--CPT-US) - var(--icon-size)) / 2)
}

.btw > span[icon-only]::before {
    content: var(--icon, attr(icon-only))
}

.btw > span[icon-brand]::before {
    content: var(--icon, attr(icon-brand));
    flex: none;
    order: var(--icon-order, -1)
}

.btw input, .btw button {
    all: unset;
    position: absolute;
    inset: 100%;
    color: transparent;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.btw:hover, .btw:focus, .btw:focus-within {
    text-decoration: none;
    outline: none;
    --shadow-color: var(--CPT-BDC)
}

.btw:active {
    transform: scale(.95);
    opacity: .8;
    --shadow-color: transparent
}

[color], .btw[color] {
    --threshold: 0.6;
    --background-color: rgba(var(--r, 255) var(--g, 255) var(--b, 255) / var(--background-alpha, 1));
    --red: calc(var(--r) * 0.2126);
    --green: calc(var(--g) * 0.7152);
    --blue: calc(var(--b) * 0.0722);
    --sum: calc(var(--red) + var(--green) + var(--blue));
    --lightness: calc(var(--sum) / 255);
    --lightness-trend: clamp(0%, calc((var(--lightness) - var(--threshold)) * -999999%), 100%);
    --color: hsl(0 0% var(--lightness-trend)/var(--color-alpha, 1));
    --border-alpha: clamp(0%, calc((var(--lightness) - var(--threshold)) * 999999%), 10%);
    --border-color: hsl(0 0% var(--lightness-trend)/var(--border-alpha, 10%))
}

.btw[color]:hover, .btw[color]:focus, .btw[color]:focus-within {
    --shadow-color: rgba(var(--r) var(--g) var(--b)/50%)
}

.btw[color]:active {
    --shadow-color: transparent
}

[color="theme"], .btw[color="theme"] {
    --r: var(--CPT-THM-R);
    --g: var(--CPT-THM-G);
    --b: var(--CPT-THM-B);
    --h: var(--CPT-THM-H);
    --s: var(--CPT-THM-S);
    --l: var(--CPT-THM-L)
}

.btw[color="outline"] {
    --background-color: transparent;
    --border-color: var(--CPT-COLOR-A25);
    --shadow-color: transparent !important;
    --color: currentColor
}

.btw[color="transparent"] {
    --background-color: transparent;
    --border-color: transparent;
    --shadow-color: transparent !important;
    --color: CurrentColor;
    --padding-inline: var(--padding-block, calc((var(--CPT-US) - var(--line-height, 2) * var(--CPT-FS)) / 2))
}

.btw.disabled, .btw.btwloading {
    cursor: not-allowed;
    pointer-events: none;
    --shadow-color: transparent !important;
    opacity: .5
}

.btw.btwloading > span::before {
    content: '';
    display: block;
    font-size: var(--icon-size);
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background: currentColor;
    opacity: 0;
    animation: btwloadingdot 750ms ease-out infinite
}

@keyframes btwloadingdot {
    0% {
        transform: scale(.25)
    }
    30% {
        opacity: 1
    }
    100% {
        transform: scale(.75)
    }
}

.cpt-text {
    display: flex;
    align-items: center;
    height: var(--CPT-US);
    overflow: hidden;
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 var(--CPT-US) inset;
    transition: box-shadow 300ms
}

.cpt-text > input {
    flex: auto;
    width: 100%;
    min-width: var(--CPT-US)
}

.cpt-text > span {
    flex: none;
    color: var(--label-color, currentColor);
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-text > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-text > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-text > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-text > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-search {
    display: flex;
    align-items: center;
    height: var(--CPT-US);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 var(--CPT-US) inset;
    transition: box-shadow 300ms
}

.cpt-search > input {
    flex: auto;
    width: 100%;
    min-width: var(--CPT-US)
}

.cpt-search > span {
    flex: none;
    color: var(--label-color, currentColor);
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-search > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-search > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-search > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-search > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-search > .btw {
    flex: none;
    transform: none
}

.cpt-search > .dropdown {
    display: none;
    position: absolute;
    inset-block-start: var(--inset-block-start, 100%);
    inset-block-end: var(--inset-block-end, unset);
    inset-inline: 0;
    z-index: 1;
    margin-block: var(--CPT-FS);
    min-width: 100%;
    min-height: var(--CPT-US);
    max-height: calc(var(--CPT-US) * 6 + var(--CPT-BDW) * 5);
    overflow: hidden;
    overflow-y: auto;
    background: var(--CPT-BGC);
    border-radius: var(--CPT-BDR);
    box-shadow: var(--CPT-BDC) 0 0 0 var(--CPT-BDW) inset, rgb(0 0 0 / 5%) 0 .5em 1em;
    box-sizing: border-box
}

.cpt-search > .dropdown:hover, .cpt-search > .dropdown:focus-within, .cpt-search > .dropdown.show {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--CPT-BDW)
}

.cpt-search > .dropdown > .result {
    flex: none;
    display: block;
    padding-block: calc((var(--CPT-US) - var(--CPT-LH) * 1em) / 2);
    padding-inline: calc(var(--CPT-US) / 2);
    color: currentColor;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none
}

.cpt-search > .dropdown > .result:hover {
    background: var(--CPT-THM-A10)
}

.cpt-search > .dropdown > .result ~ .result {
    box-shadow: var(--CPT-COLOR-A5) 0 -1px 0
}

.cpt-search > .dropdown.loading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-search > .dropdown.loading > .result {
    display: none
}

.cpt-search > .dropdown.loading::before {
    content: 'Loading...';
    display: block;
    color: var(--CPT-COLOR-A25)
}

.cpt-search > .dropdown.loading::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background: var(--CPT-THM);
    opacity: 0;
    animation: loadingdot .75s 0s ease-out infinite
}

@keyframes loadingdot {
    0% {
        transform: scale(.25)
    }
    30% {
        opacity: 1
    }
    100% {
        transform: scale(1)
    }
}

.cpt-quantity {
    display: flex;
    align-items: center;
    height: var(--CPT-US);
    overflow: hidden;
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 var(--CPT-US) inset;
    transition: box-shadow 300ms
}

.cpt-quantity > input[type="number"] {
    flex: auto;
    width: 100%;
    min-width: var(--CPT-US);
    text-align: center;
    padding-inline: unset
}

.cpt-quantity > span {
    flex: none;
    color: var(--label-color, currentColor);
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-quantity > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-quantity > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em))
}

.cpt-quantity > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-quantity > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em))
}

.cpt-quantity > .btw {
    flex: none
}

.cpt-quantity > .btw.minus {
    order: -99
}

.cpt-quantity > .btw.plus {
    order: 99
}

.cpt-quantity > .btw.disabled {
    opacity: .25;
    cursor: not-allowed
}

.cpt-select {
    display: flex;
    align-items: center;
    height: var(--CPT-US);
    overflow: hidden;
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 var(--CPT-US) inset;
    transition: box-shadow 300ms;
    --select-arrow-size: var(--CPT-FS)
}

.cpt-select::after {
    content: "";
    display: block;
    width: var(--select-arrow-size);
    height: var(--select-arrow-size);
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 1;
    margin-block: auto;
    margin-inline-end: calc(var(--CPT-US) / 1.5 / 2 - var(--select-arrow-size) / 2);
    background-image: var(--select-background-image);
    background-position-x: calc(var(--select-arrow-background-position-x, 0) * var(--select-arrow-size));
    background-position-y: calc(var(--select-arrow-background-position-y, 0) * var(--select-arrow-size));
    background-repeat: no-repeat;
    background-size: 90% 200%;
    pointer-events: none
}

.cpt-select > select:-moz-focusring {
    color: transparent;
    text-shadow: var(--CPT-COLOR) 0 0 0
}

.cpt-select > select {
    flex: auto;
    width: 100%;
    min-width: var(--CPT-US);
    padding-inline-end: calc(var(--CPT-US) / 1.5) !important
}

.cpt-select > span {
    flex: none;
    color: var(--label-color, currentColor);
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-select > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-select > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-select > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-select > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-combine {
    display: flex;
    align-items: center;
    height: var(--CPT-US);
    overflow: hidden;
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 var(--CPT-US) inset;
    transition: box-shadow 300ms
}

.cpt-combine > [class*="cpt-"] {
    flex: auto;
    border-radius: unset;
    background: none !important;
    --border-color: transparent !important;
    --shadow-focus-color: transparent !important;
    --background-focus-color: transparent !important
}

.cpt-combine > .btw {
    flex: none;
    transform: none
}

.cpt-combine > span {
    flex: none;
    color: var(--label-color, currentColor);
    padding-inline: calc(var(--CPT-US) / 2)
}

.cpt-combine > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-combine > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-combine > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-combine > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em));
    color: var(--icon-color, inherit);
    opacity: var(--icon-opacity, 1)
}

.cpt-textarea {
    display: flex;
    flex-direction: column;
    min-height: var(--CPT-US);
    overflow: hidden;
    border-radius: var(--CPT-BDR);
    box-shadow: var(--border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset, var(--shadow-focus-color, transparent) 0 0 .5em, var(--background-focus-color, transparent) 0 0 0 9999em inset;
    transition: box-shadow 300ms
}

.cpt-textarea > textarea {
    flex: auto;
    display: block;
    width: 100%;
    height: var(--textarea-height, calc(var(--CPT-US) * 2));
    min-height: var(--CPT-US);
    max-height: calc(var(--CPT-LH) * 1em * 10);
    padding-block: calc((var(--CPT-US) - var(--CPT-LH) * var(--CPT-FS)) / 2);
    padding-inline: calc(var(--CPT-US) / 2);
    box-sizing: border-box;
    resize: vertical;
    transition: max-height 300ms
}

.cpt-textarea > span {
    flex: none;
    color: var(--label-color, currentColor);
    margin-inline: calc(var(--CPT-US) / 2);
    padding-block: calc((var(--CPT-US) - var(--CPT-LH) * var(--CPT-FS)) / 2);
    box-shadow: var(--CPT-COLOR-A5) 0 -1px 0 inset
}

.cpt-textarea > textarea ~ span {
    box-shadow: var(--CPT-COLOR-A5) 0 1px 0 inset
}

.cpt-textarea .word-count {
    display: flex;
    gap: calc(var(--CPT-US) / 2)
}

.cpt-textarea .word-count::after {
    content: attr(data-word-count);
    margin-inline-start: auto
}

.cpt-textarea.flexible > textarea:not(:focus) {
    height: var(--CPT-US);
    resize: none;
    overflow: hidden;
    white-space: nowrap
}

.cpt-textarea.autoheight > textarea {
    height: calc(var(--h, 0) * 1px);
    resize: none
}

.cpt-checkbox {
    display: block;
    background: unset;
    -webkit-tap-highlight-color: transparent;
    --ckeckbox-size: calc(var(--CPT-LH) * 1em)
}

.cpt-checkbox > input[type="checkbox"] {
    all: unset;
    position: absolute;
    inset: 100%;
    color: transparent;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-checkbox > input[type="checkbox"] + span {
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: var(--font-weight, var(--CPT-FW-B));
    cursor: pointer;
    color: var(--CPT-COLOR)
}

.cpt-checkbox > input[type="checkbox"] + span::before {
    content: "";
    display: block;
    flex: none;
    align-self: start;
    order: var(--ckeckbox-order, -1);
    width: var(--ckeckbox-size);
    height: var(--ckeckbox-size);
    background-color: var(--checkbox-background-color, var(--CPT-BGC));
    background-image: var(--checkbox-background-image);
    background-size: 200% 200%;
    background-position-x: calc(var(--checkbox-background-position-x, 1) * var(--ckeckbox-size));
    background-position-y: calc(var(--checkbox-background-position-y, 1) * var(--ckeckbox-size));
    background-repeat: no-repeat;
    border-radius: var(--checkbox-border-radius, min(var(--CPT-BDR), 25%));
    box-shadow: var(--checkbox-border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset;
    overflow: hidden;
    transition: box-shadow 300ms, background-color 300ms
}

.cpt-checkbox > input[type="checkbox"]:focus + span {
    --checkbox-border-color: var(--CPT-THM)
}

.cpt-checkbox > input[type="checkbox"]:checked + span {
    --checkbox-border-color: var(--CPT-THM);
    --checkbox-background-color: var(--CPT-THM);
    --checkbox-background-position-x: 0;
    --checkbox-background-position-y: 0
}

.cpt-checkbox > input[type="checkbox"]:disabled + span {
    cursor: not-allowed;
    --checkbox-border-color: unset;
    --checkbox-background-color: var(--CPT-COLOR-A10);
    --checkbox-background-position-x: -1;
    --checkbox-background-position-y: -1
}

.cpt-checkbox > input[type="checkbox"]:checked:disabled + span {
    --checkbox-background-position-x: 0;
    --checkbox-background-position-y: -1
}

.cpt-radio {
    display: block;
    background: unset;
    -webkit-tap-highlight-color: transparent;
    --radio-size: calc(var(--CPT-LH) * 1em)
}

.cpt-radio > input[type="radio"] {
    all: unset;
    position: absolute;
    inset: 100%;
    color: transparent;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-radio > input[type="radio"] + span {
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: var(--font-weight, var(--CPT-FW-B));
    cursor: pointer;
    color: var(--CPT-COLOR)
}

.cpt-radio > input[type="radio"] + span::before {
    content: "";
    display: block;
    flex: none;
    align-self: start;
    order: var(--radio-order, -1);
    width: var(--radio-size);
    height: var(--radio-size);
    background-color: var(--radio-background-color, var(--CPT-BGC));
    background-image: var(--radio-background-image);
    background-size: 200% 200%;
    background-position-x: calc(var(--radio-background-position-x, 1) * var(--radio-size));
    background-position-y: calc(var(--radio-background-position-y, 1) * var(--radio-size));
    background-repeat: no-repeat;
    border-radius: var(--radio-border-radius, 100%);
    box-shadow: var(--radio-border-color, var(--CPT-BDC)) 0 0 0 var(--CPT-BDW) inset;
    overflow: hidden;
    transition: box-shadow 300ms, background-color 300ms
}

.cpt-radio > input[type="radio"]:focus + span {
    --radio-border-color: var(--CPT-THM)
}

.cpt-radio > input[type="radio"]:checked + span {
    --radio-border-color: var(--CPT-THM);
    --radio-background-color: var(--CPT-THM);
    --radio-background-position-x: 0;
    --radio-background-position-y: 0
}

.cpt-radio > input[type="radio"]:disabled + span {
    cursor: not-allowed;
    --radio-border-color: unset;
    --radio-background-color: var(--CPT-COLOR-A10);
    --radio-background-position-x: -1;
    --radio-background-position-y: -1
}

.cpt-radio > input[type="radio"]:checked:disabled + span {
    --radio-background-position-x: 0;
    --radio-background-position-y: -1
}

.cpt-switcher {
    display: block;
    background: unset;
    -webkit-tap-highlight-color: transparent;
    --switcher-size: calc(var(--CPT-LH) * 1em)
}

.cpt-switcher > input[type="checkbox"] {
    all: unset;
    position: absolute;
    inset: 100%;
    color: transparent;
    background: transparent;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-switcher > input[type="checkbox"] + span {
    display: flex;
    align-items: center;
    gap: 1em;
    font-weight: var(--CPT-FW-B);
    cursor: pointer;
    color: var(--CPT-COLOR)
}

.cpt-switcher > input[type="checkbox"] + span::after {
    content: "";
    display: block;
    flex: none;
    align-self: start;
    order: var(--switcher-order, 9);
    margin-inline-start: auto;
    width: calc(var(--switcher-size) * 2);
    height: var(--switcher-size);
    background-color: var(--switcher-background-color, var(--CPT-COLOR-A10));
    background-image: var(--switcher-background-image);
    background-size: var(--switcher-size) calc(var(--switcher-size) * 2);
    background-position-x: var(--switcher-background-position-x, 0);
    background-position-y: var(--switcher-background-position-y, 0);
    background-repeat: no-repeat;
    border-radius: var(--switcher-size);
    box-shadow: var(--switcher-border-color, var(--CPT-COLOR-A10)) 0 0 0 var(--CPT-BDW) inset;
    overflow: hidden;
    transition: box-shadow 300ms, background-position-x 300ms, background-color 300ms
}

.cpt-switcher > input[type="checkbox"]:focus + span {
    --switcher-border-color: var(--CPT-THM)
}

.cpt-switcher > input[type="checkbox"]:checked + span {
    --switcher-border-color: transparent;
    --switcher-background-color: var(--CPT-THM);
    --switcher-background-position-x: 100%
}

.cpt-switcher > input[type="checkbox"]:disabled + span {
    cursor: not-allowed;
    --switcher-background-color: var(--CPT-COLOR-A25);
    --switcher-background-position-y: 100%
}

.cpt-switcher > input[type="checkbox"]:checked:disabled + span {
    --switcher-background-color: var(--CPT-THM-A50)
}

.cpt-range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    min-height: calc(var(--CPT-LH) * 1em);
    background: unset;
    --range-track-height: .5em;
    --range-thumb-size: 1.5em
}

.cpt-range > input[type="range"] {
    flex: auto;
    order: 999;
    width: 100%;
    height: unset;
    padding: unset;
    margin: unset;
    outline: unset;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-range > input[type="range"]::-webkit-slider-container {
}

.cpt-range > input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--range-track-height);
    background-color: var(--range-track-background-color, var(--CPT-THM-A25));
    border-radius: var(--CPT-BDR);
    border: unset;
    cursor: pointer
}

.cpt-range > input[type="range"]::-moz-range-track {
    width: 100%;
    height: var(--range-track-height);
    background-color: var(--range-track-background-color, var(--CPT-THM-A25));
    border-radius: var(--CPT-BDR);
    border: unset;
    cursor: pointer
}

.cpt-range > input[type="range"]::-webkit-slider-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-block-start: calc((var(--range-thumb-size) - var(--range-track-height)) / -2);
    background-color: var(--range-thumb-background--color, var(--CPT-THM));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzYgMzYiPjxkZWZzPjxjaXJjbGUgaWQ9ImEiIGN4PSI5IiBjeT0iOSIgcj0iNCIvPjxwYXRoIGlkPSJiIiBkPSJtMTAuMiA5IDMgMy0xLjIgMS4yLTMtMy0zIDNMNC44IDEybDMtMy0zLTNMNiA0LjhsMyAzIDMtM0wxMy4yIDZ6Ii8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGw9IiNmZmYiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB5PSIxOCIgZmlsbC1vcGFjaXR5PSIuNSIvPjx1c2UgeGxpbms6aHJlZj0iI2IiIHg9IjE4IiBmaWxsPSIjZmZmIi8+PHVzZSB4bGluazpocmVmPSIjYiIgeD0iMTgiIHk9IjE4IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PC9zdmc+");
    background-size: 200% 200%;
    background-position-x: calc(var(--range-thumb-background-position-x, 0) * var(--range-thumb-size));
    background-position-y: calc(var(--range-thumb-background-position-y, 0) * var(--range-thumb-size));
    background-repeat: no-repeat;
    border-radius: 100%;
    border: unset;
    box-shadow: var(--range-thumb-border-color, transparent) 0 0 0 var(--CPT-BDW) inset;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-range > input[type="range"]::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-block-start: calc((var(--range-thumb-size) - var(--range-track-height)) / -2);
    background-color: var(--range-thumb-background--color, var(--CPT-THM));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzYgMzYiPjxkZWZzPjxjaXJjbGUgaWQ9ImEiIGN4PSI5IiBjeT0iOSIgcj0iNCIvPjxwYXRoIGlkPSJiIiBkPSJtMTAuMiA5IDMgMy0xLjIgMS4yLTMtMy0zIDNMNC44IDEybDMtMy0zLTNMNiA0LjhsMyAzIDMtM0wxMy4yIDZ6Ii8+PC9kZWZzPjx1c2UgeGxpbms6aHJlZj0iI2EiIGZpbGw9IiNmZmYiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB5PSIxOCIgZmlsbC1vcGFjaXR5PSIuNSIvPjx1c2UgeGxpbms6aHJlZj0iI2IiIHg9IjE4IiBmaWxsPSIjZmZmIi8+PHVzZSB4bGluazpocmVmPSIjYiIgeD0iMTgiIHk9IjE4IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PC9zdmc+");
    background-size: 200% 200%;
    background-position-x: calc(var(--range-thumb-background-position-x, 0) * var(--range-thumb-size));
    background-position-y: calc(var(--range-thumb-background-position-y, 0) * var(--range-thumb-size));
    background-repeat: no-repeat;
    border-radius: 100%;
    border: unset;
    box-shadow: var(--range-thumb-border-color, transparent) 0 0 0 var(--CPT-BDW) inset;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cpt-range > input[type="range"]:focus {
}

.cpt-range > input[type="range"]:focus::-webkit-slider-runnable-track {
    --range-track-background-color: var(--CPT-THM)
}

.cpt-range > input[type="range"]:focus::-moz-range-track {
    --range-track-background-color: var(--CPT-THM)
}

.cpt-range > input[type="range"]:disabled {
    --range-thumb-background--color: white;
    --range-thumb-background-position-x: -1;
    --range-thumb-background-position-y: -1
}

.cpt-range > input[type="range"]:disabled::-webkit-slider-runnable-track {
    cursor: not-allowed;
    --range-track-background-color: var(--CPT-COLOR-A10)
}

.cpt-range > input[type="range"]:disabled::-moz-range-track {
    cursor: not-allowed;
    --range-track-background-color: var(--CPT-COLOR-A10)
}

.cpt-range > input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    --range-thumb-border-color: var(--CPT-BDC)
}

.cpt-range > input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
    --range-thumb-border-color: var(--CPT-BDC)
}

.cpt-range > span {
    flex: none;
    color: var(--label-color, currentColor)
}

.cpt-range > span[icon] {
    display: flex;
    align-items: center;
    gap: 1em
}

.cpt-range > span[icon]::before {
    content: attr(icon);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em))
}

.cpt-range > span[icon-only] {
    width: var(--icon-size, calc(var(--CPT-LH) * 1em));
    height: var(--icon-size, calc(var(--CPT-LH) * 1em));
    overflow: hidden
}

.cpt-range > span[icon-only]::before {
    content: attr(icon-only);
    font-size: var(--icon-size, calc(var(--CPT-LH) * 1em))
}

.cpt-range[data-value]:not([data-value=""])::after {
    flex: none;
    content: attr(data-value);
    display: block;
    min-width: calc(var(--CPT-FS) * var(--CPT-LH));
    text-align: center
}
@charset "UTF-8";
/*html{}*/
/*body{font:var(--SiteFW) var(--SiteFS)/1.5 var(--SiteFF2);margin:unset;background-color:var(--body-background-color,hsl(0 0% 97%));color:var(--body-text-color,rgba(0 0 0/75%));-webkit-font-smoothing:antialiased;word-break:break-word;-webkit-tap-highlight-color:transparent;}*/
/*input,textarea,select{font-size:1em;color:#555;font-family:var(--SiteFF2);font-weight:var(--SiteFW);}*/
/*h1,h2,h3,h4,h5,h6,ul,ol{margin:0;}*/
/*h1,h2,h3{font-family:var(--SiteFF);font-weight:var(--SiteFW-EB);}*/
/*h1{font-size:var(--SiteFS-XXXL);}*/
/*h2{font-size:var(--SiteFS-XXL);}*/
/*h3{font-size:var(--SiteFS-XL);}*/
/*ul,ol,menu{padding-inline-start:0;}*/
/*li{list-style-type:none;}*/
/*form,dl,dd,menu{margin:0;}*/
/*a img{border:none;}*/
/*a{color:var(--SiteTHM);text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none;}*/
/*b{font-weight:var(--SiteFW-B);}*/
/*code{font-family:var(--SiteFF3);font-weight:var(--SiteFW-B);}*/
/*@font-face { font-family:font1; src: url("/buffhub/fonts/Inter-Regular.ttf");}*/
/*@font-face { font-family:font2; src: url("/buffhub/fonts/Inter-Bold.ttf");}*/

/*!*fonts*!*/
/*!*Manrope*!*/
/*!* cyrillic-ext *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-cyrillic-ext-d84d715714.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}*/
/*!* cyrillic *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-cyrillic-4f8626e318.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}*/
/*!* greek *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-greek-6c7142c441.woff2") format("woff2");unicode-range:U+0370-03FF;}*/
/*!* vietnamese *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-vietnamese-54718ab248.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}*/
/*!* latin-ext *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-latin-ext-3942629d96.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}*/
/*!* latin *!*/
/*@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/manrope/v15/manrope-8951283ba1.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}*/

/*!* Noto Sans Arabic *!*/
/*@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/notosansarabic/v18/notosansarabic-e0a507374e.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC,U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}*/

/*!* Roboto Mono *!*/
/*!* cyrillic-ext *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-cyrillic-ext-6224b6cfd0.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}*/
/*!* cyrillic *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-cyrillic-502ed7d7f7.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}*/
/*!* greek *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-greek-6ccf916683.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}*/
/*!* vietnamese *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-vietnamese-a656d88aad.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}*/
/*!* latin-ext *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-latin-ext-34948aa905.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}*/
/*!* latin *!*/
/*@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:100 700;font-display:swap;src:url("../fonts/robotomono/v23/robotomono-17e694a0b8.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}*/

/*variables*/
:root{
	--CPT-THM-R: 255;
	--CPT-THM-G: 69;
	--CPT-THM-B: 0;
	--CPT-THM-H: 16;
	--CPT-THM-S: 100%;
	--CPT-THM-L: 50%;

	--CPT-US: 3.5em;
	--CPT-BDW: 2px;

	--SiteFS: 12px;
	--SiteFS-S: .833334em;
	--SiteFS-L: 1.166667em;
	--SiteFS-XL: 1.333334em;
	--SiteFS-XXL: 1.5em;
	--SiteFS-XXXL: 2em;

	--SiteFW: 400;
	--SiteFW-B: 600;
	--SiteFW-EB: 800;

	--IconFF: var(--IconFF1);

	--SiteTHM:var(--CPT-THM);
	--SiteTHM-A0:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/0);
	--SiteTHM-A5:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/5%);
	--SiteTHM-A10:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/10%);
	--SiteTHM-A25:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/25%);
	--SiteTHM-A50:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/50%);
	--SiteTHM-A75:rgba(var(--CPT-THM-R) var(--CPT-THM-G) var(--CPT-THM-B)/75%);

	--color-warning-r: 186;
	--color-warning-g: 85;
	--color-warning-b: 211;
	--color-warning-h: 288.1;
	--color-warning-s: 58.88%;
	--color-warning-l: 58.04%;
	--text-color-warning: rgb(var(--color-warning-r) var(--color-warning-g) var(--color-warning-b));
	--background-color-warning: color-mix(in srgb,var(--text-color-warning),transparent 90%);

	--color-alert-r: 255;
	--color-alert-g: 0;
	--color-alert-b: 0;
	--color-alert-h: 0;
	--color-alert-s: 100%;
	--color-alert-l: 50%;
	--text-color-alert: rgb(var(--color-alert-r) var(--color-alert-g) var(--color-alert-b));
	--background-color-alert: color-mix(in srgb,var(--text-color-alert),transparent 90%);

	--color-complete-r: 34;
	--color-complete-g: 139;
	--color-complete-b: 34;
	--color-complete-h: 120;
	--color-complete-s: 60.69%;
	--color-complete-l: 33.92%;
	--text-color-complete: rgb(var(--color-complete-r) var(--color-complete-g) var(--color-complete-b));
	--background-color-complete: color-mix(in srgb,var(--text-color-complete),transparent 90%);

	--color-promotion-r: 34;
	--color-promotion-g: 139;
	--color-promotion-b: 34;
	--color-promotion-h: 120;
	--color-promotion-s: 60.69%;
	--color-promotion-l: 33.92%;
	--text-color-promotion: rgb(var(--color-promotion-r) var(--color-promotion-g) var(--color-promotion-b));
	--background-color-promotion: color-mix(in srgb,var(--text-color-promotion),transparent 90%);
}

/*全局字体变量*/
:root{
	/*标题字体*/
	--font-family-heading: -apple-system, font2,  "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*普通字体*/
	--font-family-content: -apple-system, font1, "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*特殊用途*/
	--font-family-code: -apple-system, font1, "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/*标题字体*/
	--SiteFF:var(--font-family-heading, '');
	/*普通字体*/
	--SiteFF2:var(--font-family-content, '');
	/*特殊用途*/
	--SiteFF3:var(--font-family-code, '');
}

body{
	--VWX:calc(var(--VW) * 1px);
	--VHX:calc(var(--VH) * 1px);
	--VWidth:var(--VWX,100vw);
	--VHeight:var(--VHX,100vh);
}
/* 图片禁止拖拽 */
img {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}
@supports (width: 100dvw) {
	body {
		--VWidth:min(100dvw,var(--VWX,100vw));
		--VHeight:min(100dvh,var(--VHX,100vh));
	}
}
/** old is 120em */
body{--MaxContentWidth:105em;--spacing:2em;}
@media only screen and (max-width:1440px){
	body{--MaxContentWidth: 106.666667em;}
}
@media only screen and (max-width:1280px){
	body{--MaxContentWidth: 83.333334em;}
}
@media only screen and (max-width:1000px){
	body{--MaxContentWidth: 100%;--spacing:1.5em;}
}


/*component reset*/
.btw{--icon-size:1.5em;}
.btw[color]:hover,
.btw[color]:focus,
.btw[color]:focus-within{--shadow-color:transparent;}
.btw[color="outline"]{--border-color:var(--body-text-color-a10,rgba(0 0 0/10%));}
.btw.btwloading>span::before{content:'' !important;border-radius:unset;opacity:unset;animation:unset;background:url('../../images/loading-701269f903.svg') no-repeat center/contain;filter:invert(var(--lightness-trend,var(--brightness-filter,0)));}
[color="warning"],.warning{--r:var(--color-warning-r);--g:var(--color-warning-g);--b:var(--color-warning-b);--h:var(--color-warning-h);--s:var(--color-warning-s);--l:var(--color-warning-l);}
[color="alert"],.alert{--r:var(--color-alert-r);--g:var(--color-alert-g);--b:var(--color-alert-b);--h:var(--color-alert-h);--s:var(--color-alert-s);--l:var(--color-alert-l);}
[color="complete"],.complete{--r:var(--color-complete-r);--g:var(--color-complete-g);--b:var(--color-complete-b);--h:var(--color-complete-h);--s:var(--color-complete-s);--l:var(--color-complete-l);}
[color="promotion"],.promotion{--r:var(--color-promotion-r);--g:var(--color-promotion-g);--b:var(--color-promotion-b);--h:var(--color-promotion-h);--s:var(--color-promotion-s);--l:var(--color-promotion-l);}

[class*="cpt-"]{--label-color:var(--CPT-COLOR-A50);}
[class*="cpt-"]:focus-within{--shadow-focus-color:transparent !important;}

.cpt-text>span:has(+input),
.cpt-search>span:has(+input),
.cpt-select>span:has(+select){padding-inline-end:unset;}
.cpt-text>input+span,
.cpt-search>input+span{padding-inline-start:unset;}

.cpt-select option{color:var(--body-text-color);background:var(--background-color-L1);}

.cpt-checkbox{--checkbox-border-color:var(--CPT-COLOR-A10);}
.cpt-radio{--radio-border-color:var(--CPT-COLOR-A10);}
.cpt-switcher{width:-moz-fit-content;width:fit-content;}

.cpt-textarea span[data-word-count]{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:var(--SiteFS-S);color:var(--body-text-color-a50,rgba(0 0 0/50%));}
.cpt-textarea span[data-word-count]::after{content:attr(data-word-count);}


/*rtl*/
[lang*="ar"]{
	direction:rtl;
	--inline-start:right;
	--inline-end:left;

	--translate-reverse:-1;
	--angle-reverse:-1;

	/*标题字体*/
	--font-family-heading: -apple-system, font2,  "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*普通字体*/
	--font-family-content: -apple-system, font1, "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;

	--CPT-FF: -apple-system, font1, "Nunito Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[lang*="ar"] [icon="sort"]::before,
[lang*="ar"] [icon="search"]::before,
[lang*="ar"] [icon-only="search"]::before,
[lang*="ar"] [icon-only="logout"]::before,
[lang*="ar"] [icon="navigate_before"]::before,
[lang*="ar"] [icon-only="navigate_before"]::before,
[lang*="ar"] [icon="navigate_next"]::before,
[lang*="ar"] [icon-only="navigate_next"]::before,
[lang*="ar"] [icon="chevron_left"]::before,
[lang*="ar"] [icon-only="chevron_left"]::before,
[lang*="ar"] [icon="chevron_right"]::before,
[lang*="ar"] [icon-only="chevron_right"]::before,
[lang*="ar"] [icon="arrow_back"]::before,
[lang*="ar"] [icon-only="arrow_back"]::before,
[lang*="ar"] [icon="arrow_forward"]::before,
[lang*="ar"] [icon-only="arrow_forward"]::before,
[lang*="ar"] [icon="arrow_circle_left"]::before,
[lang*="ar"] [icon-only="arrow_circle_left"]::before,
[lang*="ar"] [icon="arrow_circle_right"]::before,
[lang*="ar"] [icon-only="arrow_circle_right"]::before,
[lang*="ar"] [icon="send"]::before,
[lang*="ar"] [icon-only="send"]::before,
[lang*="ar"] [icon="logout"]::before,
[lang*="ar"] [icon-only="logout"]::before{transform:scaleX(-1);}


/*layout*/
body{display:flex;flex-direction:column;justify-content:start;min-width:320px;min-height:var(--VHeight);}
#content{flex:auto;}
#content>.inner{width:min(var(--MaxContentWidth),100%);margin-inline:auto;padding-inline:var(--spacing);box-sizing:border-box;}

/* theme */
[data-hue] {
	--r: var(--d-r,255);
	--g: var(--d-g,255);
	--b: var(--d-b,255);
	--h: var(--d-h,0);
	--s: var(--d-s,0%);
	--l: var(--d-l,100%);
	--threshold: .6;
	--background-color: rgba(var(--r) var(--g) var(--b) / var(--background-alpha,1));
	--red: calc(var(--r) * .2126);
	--green: calc(var(--g) * .7152);
	--blue: calc(var(--b) * .0722);
	--sum: calc(var(--red) + var(--green) + var(--blue));
	--lightness: calc(var(--sum) / 255);
	--lightness-trend: clamp(0%,calc((var(--lightness) - var(--threshold)) * -100% * infinity),100%);
	--color: hsl(0 0% var(--lightness-trend));
	--color-img-bdc: hsl(0 0% var(--lightness-trend)/10%);
	--color-img-bgc: hsl(0 0% var(--lightness-trend)/10%);
	--offset-h1: calc(var(--h) + 10);
	--offset-h2: calc(var(--h) - 10);
	--offset-s1: calc(var(--s) * .9);
	--offset-s2: calc(var(--s) * .9);
	--offset-l1: max(calc(var(--l) - 10%),20%);
	--offset-l2: min(calc(var(--l) + 10%),80%);
}
@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}@keyframes bounce{0%,100%,20%,53%,80%{transition-timing-function:cubic-bezier(0.215,.61,.355,1);transform:translate3d(0,0,0)}40%,43%{transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transform:translate3d(0,-30px,0)}70%{transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}100%{transform:scale3d(1,1,1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,100%{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes swing{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}100%{transform:rotate3d(0,0,1,0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{transform:scale3d(1,1,1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{transform:none}}.wobble{animation-name:wobble}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}.bounceIn{animation-name:bounceIn;animation-duration:.75s}@keyframes bounceInDown{0%,100%,60%,75%,90%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}100%{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,100%,60%,75%,90%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}100%{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,100%,60%,75%,90%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,100%,60%,75%,90%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}100%{transform:translate3d(0,0,0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut;animation-duration:.75s}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}100%{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}100%{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}100%{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}100%{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}100%{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}100%{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}100%{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}100%{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}100%{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}100%{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}100%{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotate3d(0,1,0,-360deg);animation-timing-function:ease-out}40%{transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}100%{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotate3d(1,0,0,90deg);transition-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);transition-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{transform:perspective(400px)}}.flipInX{backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotate3d(0,1,0,90deg);transition-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);transition-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{transform:perspective(400px)}}.flipInY{backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{animation-name:flipOutX;animation-duration:.75s;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{backface-visibility:visible!important;animation-name:flipOutY;animation-duration:.75s}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}100%{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}100%{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}100%{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}100%{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}100%{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}100%{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}100%{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}100%{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}100%{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}100%{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}100%{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}100%{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}100%{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}100%{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translateY(-100%);visibility:visible}100%{transform:translateY(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translateX(-100%);visibility:visible}100%{transform:translateX(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translateX(100%);visibility:visible}100%{transform:translateX(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translateY(100%);visibility:visible}100%{transform:translateY(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateY(0)}100%{visibility:hidden;transform:translateY(100%)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateX(0)}100%{visibility:hidden;transform:translateX(-100%)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateX(0)}100%{visibility:hidden;transform:translateX(100%)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateY(0)}100%{visibility:hidden;transform:translateY(-100%)}}.slideOutUp{animation-name:slideOutUp}

@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translateX(25%)}to{opacity:1;transform:translateX(0)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes ripple{0%{transform:scale(0) translateY(-45%) translateX(13%)}to{transform:scale(1) translateY(-45%) translateX(13%)}}.notyf{position:fixed;top:0;left:0;height:100%;width:100%;color:#fff;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;pointer-events:none;box-sizing:border-box;padding:20px}.notyf__icon--error,.notyf__icon--success{height:21px;width:21px;background:#fff;border-radius:50%;display:block;margin:0 auto;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px;left:9px;height:12px;top:5px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;display:block;position:absolute;width:3px;border-radius:3px}.notyf__icon--success:after{height:6px;transform:rotate(-45deg);top:9px;left:6px}.notyf__icon--success:before{height:11px;transform:rotate(45deg);top:5px;left:10px}.notyf__toast{display:block;overflow:hidden;pointer-events:auto;animation:notyf-fadeinup .3s ease-in forwards;box-shadow:0 3px 7px 0 rgba(0,0,0,.25);position:relative;padding:0 15px;border-radius:2px;max-width:300px;transform:translateY(25%);box-sizing:border-box;flex-shrink:0}.notyf__toast--disappear{transform:translateY(0);animation:notyf-fadeoutdown .3s forwards;animation-delay:.25s}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{animation:notyf-fadeoutdown .3s forwards;opacity:1;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{animation:notyf-fadeoutright .3s forwards;opacity:1;transform:translateX(0)}.notyf__toast--disappear .notyf__message{animation-delay:.05s}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{height:400px;width:400px;position:absolute;transform-origin:bottom right;right:0;top:0;border-radius:50%;transform:scale(0) translateY(-51%) translateX(13%);z-index:5;animation:ripple .4s ease-out forwards}.notyf__wrapper{display:flex;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;border-radius:3px;position:relative;z-index:10}.notyf__icon{width:22px;text-align:center;font-size:1.3em;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.3s;margin-right:13px}.notyf__dismiss{position:absolute;top:0;right:0;height:100%;width:26px;margin-right:-15px;animation:notyf-fadeinleft .3s forwards;animation-delay:.35s;opacity:0}.notyf__dismiss-btn{background-color:rgba(0,0,0,.25);border:none;cursor:pointer;transition:opacity .2s ease,background-color .2s ease;outline:none;opacity:.35;height:100%;width:100%}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;height:12px;width:2px;border-radius:3px;position:absolute;left:calc(50% - 1px);top:calc(50% - 5px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:rgba(0,0,0,.15)}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;position:relative;opacity:0;animation:notyf-fadeinup .3s forwards;animation-delay:.25s;line-height:1.5em}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{height:600px;width:600px;animation-duration:.5s}.notyf__toast{max-width:none;border-radius:0;box-shadow:0 -2px 7px 0 rgba(0,0,0,.13);width:100%}.notyf__dismiss{width:56px}}
/* 购物车弹窗样式 */
.pop-up-windowa {position: fixed;width: 415px;background: #f5f5f5;top: 67px;right:-415px; padding: 0 25px;overflow: auto;z-index: 100;border-radius: 15px;}
.pop-top h2{font-weight: 700;font-size: 26px;color: #272525;padding: 27px 0 31px 0; }
.pop-top .cart-empty{display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #9b9b9b;padding: 24px 0 32px;gap: 14px;}
.pop-top .cart-empty img{width: 360px;max-width: 70%;height: auto;display: block;}
.pop-top .cart-empty span{font-size: 14px;line-height: 1.4;max-width: 240px;color: #000000;}
.popbox{background: #fff;border-radius: 8px; overflow: hidden; margin-bottom: 10px;}

.inline-link-grid {
  display: inline-grid;
  grid-auto-flow: column;  /* 列自动排列 */
  align-items: center;
  gap: 8px;
  color: #0F0F0F;
  font-weight: bold;
}
.cart-t{ padding: 18px 0 0;}
.cart-t h3{font-weight: bold;font-size: 14px;color: #0F0F0F;display: flex;gap:8px;padding-left: 10px;align-items: center;}
.my_protocol_a .input_agreement_protocol { -moz-appearance: none; appearance: none; -webkit-appearance: none;  outline: none;  display: none;  }
.my_protocol_a .input_agreement_protocol+span {cursor:pointer;width: 20px;height: 20px;border:1px solid #d8d8d8;display: inline-block;position: relative;border-radius:50%; vertical-align:middle; }
.my_protocol_a .input_agreement_protocol:checked+span {background-image: url(../images/pic62.png); background-size:100% 100%;}
.pay-text h2{font-weight: bold;font-size: 14px; line-height: 1.4;color: #1A1A1A; margin-top: 5px;}
.cart-top{padding: 0 10px;}
.cart-top li{padding: 20px 0; border-bottom: 1px solid #eee;}
.cartbox{display: flex;justify-content: space-between;align-items: flex-start;}
.carta-left{width: 105px; display: flex;justify-content: space-between;}
.carta-left img{width: 75px;border-radius: 6px;-o-object-fit: cover;object-fit: cover;aspect-ratio: 16 / 16;}
.carta-right{width: calc(100% - 125px);}
.carta-right h3{font-weight: bold;color: #1A1A1A;font-size: 12px;line-height: 14px;}
.carta-right p{font-size: 12px;color: #4B4B4B;margin:8px 0;}
.carta-price{display: flex;justify-content: space-between;align-items: center; padding-right: 15px;}
.carta-right h4{font-size: 12px;color:#FF0000;}
.product-total{font-weight: 700;color: #FF0000;}
.quantity-control_a{display: flex;justify-content: space-between;width: 93px;}
.decrease-btn{
    width: 21px;height:20px;border: 1px solid #dadada;border-radius: 4px;background: #fff;font-size: 16px;color: #000;cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.increase-btn{
    width: 21px;height:20px;border: 1px solid #dadada;border-radius: 4px;background: #fff;font-size: 16px;color: #000;cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity-input{width: calc(100% - 44px);border-radius: 4px; height: 20px;text-align: center; line-height: 20px;background: #f1f2f7;}
.cart-top li:last-child {border-bottom: none;}
.cart-bottom {display: flex; padding: 10px 40px;background: #fff2ec;justify-content: space-between;align-items: center;}
.cart-bottom h3 span{font-size: 16px;color: #000;}
.Total-Price{font-weight: bold;display: inline-block; color:#FF0000;font-size: 16px;margin: 0 6px;}
.total-discount{color: #646464;font-size: 10px;text-decoration: line-through;}
.Checkout-buttom{width: 110px;height: 35px;background: #ff5e16;border-radius: 18px;color: #fff;font-weight: bold;cursor: pointer;border: none;}
.summary-botton{color: #FF5E17;font-size: 14px;display: flex;gap:5px;margin-top: 5px;align-items: center;}

.win-bg{position: fixed;width: 100%;height: calc(100% - 67px);background: rgba(0,0,0,.7);top: 67px;left: 0;z-index: 100;display: none;}

.transitionPoint{
    width: 10px;
    height: 10px;
    background: red;
    position: fixed;
    z-index: 1999;
    border-radius: 50%;
}

.pop-up-windowa .pop-top{
    height: auto;
}

@media (max-width: 950px){
    .pop-top .cart-empty{padding: .95rem 0 0 0;gap: .2rem;}
    .pop-top .cart-empty img{width: 3.6rem;max-width: 60%;}
    .pop-top .cart-empty span{font-size: .2rem;}
}

.carta-right .title-flex{
    display: flex;
    gap: 30px;
    align-items: center;
    h3 {
        flex: 1;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    img{
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        cursor: pointer;
    }
}
@media (max-width: 950px){
    .carta-right .title-flex  img {
        width: .32rem;
        height: .32rem;
    }
}

#cart-buy-layout-uid{
    position: fixed;
    width: 400px;
    top: 50%;
    left: 50%;
    background: #FFF;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 30px;
    .title{
        color: #000;
        font-size: 18px;
        line-height: 18px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    ul{
        list-style: none;
        li {
            padding-bottom: 28px;
        }
    }
    .uid{
        .input_1{width: 100%;height: 40px;background:url(../images/uidpic.svg) no-repeat 12px center #eeeeee;background-size:16px auto;border-radius: 17px; padding: 0 15px 0 37px;line-height: 40px;font-size: 12px;}
        p {
            font-size: 12px;
            color: #332E2E;
            margin-bottom: 4px;
        }
    }
    #cart-buy-layout-uid-bottom{
        display: flex;
        justify-content: center;
        gap: 20px;
        .button{
            width: 100px;
            height: 30px;
            border-radius: 5px;
            line-height: 30px;
            color: #FFF;
            font-size: 14px;
            background: #ff5e16;
            text-align: center;
            cursor: pointer;
        }
    }
}
@charset "utf-8";
/* CSS Document */
*,*:before,*:after {  scrollbar-width: none; /* 先写Firefox，避免样式冲突（可选） */
  -ms-overflow-style: none; /* 2. 兼容 IE 和 旧版 Edge */ box-sizing: border-box; }
body{ margin:0px; padding:0px; font-size:12px;color:#898989;background:#FFF;font-family: var(--SiteFF2);}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;font-family: var(--SiteFF2);}
input,textarea,span,button,select,option,label { border: none; outline: none; background: none; font-family: var(--SiteFF2); touch-action: manipulation;}
ul,li{ list-style:none}
img{border:0px; padding:0px; display: block;}
a{ color:#5c5c5c; text-decoration:none}

/* @font-face { font-family:font1; src: url("/buffhub/fonts/Inter-Regular.ttf");} */
/* @font-face { font-family:font2; src: url("/buffhub/fonts/Inter-Bold.ttf");} */

h2,h3,h4,b,strong { font-weight: normal; }
em,i { font-style: normal; }
.clear{ zoom: 1; }
.clear:after { content: ''; display: block; clear: both; }
.fl { float:left}
.fr { float:right}

/*Language pop-up window*/
.language-modal{position: fixed; width: 100%;height: 100%; left: 0;top: 0;z-index: 100;display: none;}
.language-modal-bg{position:fixed; width: 100%;height: 100%; left: 0;top: 0;background: rgba(0,0,0,.7);z-index: 100;}
.language{width: 430px;top: 100px; position: fixed;z-index: 101;left:50%; top:50%; transform:translate(-50%,-50%);}
.languagebox{border-radius: 8px; background: #fff;box-shadow:0 0 10px rgba(0, 0, 0, .1); padding: 0 25px 25px 25px;}
.language-title{padding: 30px 0 40px;}
.language-title p{font-weight: 700;font-size: 18px;color: #2C2C2C;}
.language-title p img{display: inline-block;vertical-align: middle; margin: -3px 5px 0 0;}
.language-content li{padding-bottom: 35px;}
.language-content p{font-weight: 700;font-size: 16px;color: #2C2C2C;margin-bottom: 10px;}
.select-choice{width: 100%; height: 42px;border-radius: 5px; padding: 0 20px;background: #efeff1;border: none;outline:none;}

.Save-buttom{display: block;width: 100%;border-radius: 5px; height: 42px;background: #222127;border: none;cursor: pointer;color: #fff;font-weight: 700;font-size: 16px;}
.Cancel-buttom{display: block;width: 100%;border-radius: 5px; height: 42px;background: #f4f4f4;border: none;cursor: pointer;color: #222127;font-weight: 700;font-size: 16px; margin-top: 10px;}

/*Login pop-up window*/
.pop-up-bg{position:fixed; width: 100%;height: 100%; left: 0;top: 0;background: rgba(0,0,0,.7);z-index: 101;display: none;}
.login-pop{
  position: fixed;
  width: 581px; 
  z-index: 10001;
  border-radius: 6px; 
  background: #fff;
  left:50%; top:50%; 
  transform:translate(-50%,-50%);
  overflow: hidden;
  display: none;
  padding-bottom: 48px;
}
.login-pop .login_title{font-weight: bold;font-size: 22px;color: #3C3C3C; padding: 40px 45px;display: block;}
.login-pop .loginTitle{
   width: 100%;
   margin-bottom: 40px;
}
.login-content li{padding-bottom: 10px;}
.input_b{width: 100%;height: 50px; padding-left: 60px; border: 1px solid #dedede; line-height: 48px;background: #fff;width: 100%;border-radius: 4px;background: url(../images/pic38.png) no-repeat 22px center;}
.input_c{width: 100%;height: 50px; padding-left: 60px; border: 1px solid #dedede; line-height: 48px;background: #fff;width: 100%;border-radius: 4px;background: url(../images/pic39.png) no-repeat 22px center;}
.log-buttoom{cursor: pointer; width: 100%;color: #fff;font-size: 16px;border: none;height: 50px;margin-top: 10px;border-radius: 4px;background: #ff5e16;}
.login-content{
  padding: 0 36px;
  position: relative;
}
/* 登录弹窗内提示文案美化 */
.login-message{font-size: 13px;line-height: 1.4;text-align: center;color: #666;line-height: 30px;}
.login-message.success{color: #0F5132;background: #D1E7DD;border-radius: 999px;}
.login-message.error{color: #842029;background: #F8D7DA;border-radius: 999px;}
/* 浏览器自动填充时保持邮箱图标与样式 */
.input_b:-webkit-autofill{
  box-shadow: 0 0 0 30px #fff inset;
  -webkit-text-fill-color: #000;
  background-color: #fff !important;
  background-image: url("/buffhub/images/pic38.png") !important;
  background-repeat: no-repeat !important;
  background-position: 22px center !important;
}
/* 验证码 6 位小方框样式 */
.login-pop-code-row{display: flex;justify-content: space-between;gap: 8px;margin: 4px 0 0;}
.login-pop-code-box{width: 40px;height: 44px;border-radius: 8px;border: 1px solid #dedede;text-align: center;font-size: 20px;line-height: 44px;}
.login-pop-code-box:focus{outline: none;border-color: #ff5e16;box-shadow: 0 0 0 1px rgba(255,94,22,0.2);} 
/* 登录弹窗加载动画覆盖层 */
.login-pop-loading{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(255,255,255,0.85);display: none;align-items: center;justify-content: center;flex-direction: column;z-index: 10002;}
.login-pop-loading .loading-spinner{width: 32px;height: 32px;border-radius: 50%;border: 3px solid #ffd6bf;border-top-color: #ff5e16;animation: login-pop-spin 0.8s linear infinite;margin-bottom: 8px;}
.login-pop-loading .loading-text{font-size: 14px;color: #555;}
@keyframes login-pop-spin{to{transform: rotate(360deg);}}

.Login-Selection h3{text-align: center; padding: 25px 0;text-align: center; color: #777777;font-size: 16px;}

.Login-Selection ul{
  display: flex;
  justify-content: center;
  gap:8px;
  padding: 42px 0;
}
.Login-Selection ul .login-item{display: inline-flex;align-items: center;justify-content: center;border-radius: 50%;overflow: hidden;}
.Login-Selection ul .login-item img{width: 36px;height: 36px;-o-object-fit: contain;object-fit: contain;}
.Login-Instructions h4{font-size:12px;color: #777777; margin: 30px 0;text-align: center;line-height: 1.5;}
.Login-Instructions h4 a{color: #37A1F6;}
.Login-Instructions h4 a:hover{text-decoration: underline;}
.Login-Instructions .login-policy-text{
  font-size:12px;
  color: #777777; 
  text-align: center;
  line-height: 15px;
  display: block;
}
.Login-Instructions .login-policy-text a{color: #37A1F6;}
.Login-Instructions .login-policy-text a:hover{text-decoration: underline;}
.Login-Instructions span{font-size:12px;color: #777777; margin: 30px 0;text-align: center;line-height: 1.5;}
.Login-Instructions span a{color: #37A1F6;}
.Login-Instructions span a:hover{text-decoration: underline;}
.Login-Instructions ul{background: #f9f9f9;padding: 35px 70px;display: flex;justify-content: space-between; position: relative;}
.Login-Instructions ul:before{position: absolute;content: "";background: url(../images/a125.png); width: 20px;height: 42px; left: 50px;top: 50%;transform: translateY(-50%);background-size: 100% 100%;}
.Login-Instructions ul:after{position: absolute;content: "";background: url(../images/a126.png); width: 20px;height: 42px; right: 50px;top: 50%;transform: translateY(-50%);background-size: 100% 100%;}
.Login-Instructions li{text-align: center;}
.Login-Instructions h3{font-weight: bold;font-size: 18px;color: #525252;}
/* .Login-Instructions span{font-weight: bold;font-size: 18px;color: #525252;} */
.Login-Instructions p{font-size: 12px;color: #777777; margin-top: 15px;}
.five-stars{background: url(../images/pic48.png);width: 17px;height: 16px;display: inline-block;background-size: 100% 100%;vertical-align: middle; margin: -3px 5px 0 0;}
.close-bottom{position: absolute;cursor: pointer;background: url(../images/a127.png);width: 19px;height: 19px;background-size: 100% 100%;top:40px;right: 40px;z-index: 10;}
.logqh{padding: 0 50px;}
.logqh li{padding-bottom: 15px;}
/*breadcrumb*/
.main-content {width: 1300px; margin: 0 auto;max-width: 94%;}
.breadcrumb{padding: 19px 0;display: flex;gap:5px; font-size: 14px;line-height: 1;color: #626262;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.breadcrumb h4{font-size: 14px;display: flex;align-items: center;}
.breadcrumb h2,h3{font-size: 14px;}
.breadcrumb a{color: #626262;transition: all .5s;}
.breadcrumb h2.cur a{font-weight: 700;color: #000103;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.breadcrumb a:hover{font-weight: 700;color: #000103;}
.breadcrumb img{display: inline-block;vertical-align: middle;margin-right: 8px;}

/*pagination*/
.pagination ul{display: flex;justify-content: center;align-items: center;gap:8px;flex-wrap: nowrap;white-space: nowrap;}
.pagination li{display: inline-flex;align-items: center;}
.pagination a{line-height: 39px;width: 39px;display: inline-flex;align-items: center;justify-content: center;color: #0F0F0F;font-size: 14px;text-align: center;background: #efeff1;border-radius: 50%;flex-shrink: 0;}
.pagination .ellipsis{display: inline-flex;align-items: center;justify-content: center;line-height: 39px;color: #0F0F0F;width: 39px;text-align: center;border-radius: 50%;background: #efeff1;flex-shrink: 0;}
.pagination .prev{line-height: 39px;width: auto;background: none; padding-right: 15px;flex-shrink: 0;}
.prev b{display: inline-block;background: url(../images/a38.png);width: 8px;height: 13px;background-size: 100% 100%;vertical-align: middle; margin: -3px 10px 0 0;}
.pagination .next{line-height: 39px;width: 39px;width: auto;background: none; padding-left: 15px;flex-shrink: 0;}
.next b{display: inline-block;background: url(../images/a39.png);width: 8px;height: 13px;background-size: 100% 100%;vertical-align: middle; margin: -3px 0 0 10px;}
.pagination a.active{background: #2c2d32;color: #fff;}
.pagination a.on:hover{background: #2c2d32;color: #fff;}

.pop-up-windowa {position: fixed;width: 415px;background: #f5f5f5;top: 67px;right:-415px; padding: 0 25px;z-index: 1001;border-radius: 15px;height: calc(100vh - 67px);}
.pop-top{overflow: auto;height: calc(100vh - 180px);}
.pop-top h2{font-weight: 700;font-size: 26px;color: #272525;padding: 27px 0 31px 0; }
.popbox{background: #fff;border-radius: 8px; overflow: hidden; margin-bottom: 10px;}
.cart-t{ padding: 18px 0 0;}
.cart-t h3{font-weight: bold;font-size: 14px;color: #0F0F0F;display: flex;gap:8px;padding-left: 10px;align-items: center;}
.my_protocol_a .input_agreement_protocol { -moz-appearance: none; appearance: none; -webkit-appearance: none;  outline: none;  display: none;  }
.my_protocol_a .input_agreement_protocol+span {cursor:pointer;width: 20px;height: 20px;border:1px solid #d8d8d8;display: inline-block;position: relative;border-radius:50%; vertical-align:middle; }
.my_protocol_a .input_agreement_protocol:checked+span {background-image: url(../images/pic62.png); background-size:100% 100%;}
.pay-text h2{font-weight: bold;font-size: 14px; line-height: 1.4;color: #1A1A1A; margin-top: 5px;}
.cart-top{padding: 0 10px; margin-top: 20px; }
.cart-top li{padding: 0 0 20px 0; border-bottom: 1px solid #eee;margin-top: 20px;}
.cartbox{display: flex;justify-content: space-between;align-items: flex-start;}
.carta-left{width: 105px; display: flex;justify-content: space-between;}
.carta-left img{width: 75px;border-radius: 6px;-o-object-fit: cover;object-fit: cover;aspect-ratio: 16 / 16;}
.carta-right{width: calc(100% - 125px);}
.carta-right h3{font-weight: bold;color: #1A1A1A;font-size: 14px;line-height: 16px;}
.carta-right p{font-size: 12px;color: #4B4B4B;margin:8px 0;}
.carta-price{display: flex;justify-content: space-between;align-items: center; padding-right: 15px;}
.carta-right h4{font-size: 14px;color:#FF0000;}
.product-total{font-weight: 700;color: #FF0000;}
.quantity-control_a{display: flex;justify-content: space-between;width: 93px;}
.decrease-btn{width: 21px;height:20px;border: 1px solid #dadada;border-radius: 4px;background: #fff;font-size: 16px;color: #000; touch-action: manipulation;}
.increase-btn{width: 21px;height:20px;border: 1px solid #dadada;border-radius: 4px;background: #fff;font-size: 16px;color: #000; touch-action: manipulation;}
.quantity-input{width: calc(100% - 44px);border-radius: 4px; height: 20px;text-align: center; line-height: 20px;background: #f1f2f7;}
.cart-top li:last-child {border-bottom: none;}
.cart-top li:first-child{
  margin-top: 0;
}
.cart-bottom {display: flex; padding: 10px 40px;background: #fff2ec;justify-content: space-between;align-items: center;}
.cart-bottom h3 span{font-size: 16px;color: #000;}
.Total-Price{font-weight: bold;display: inline-block; color:#FF0000;font-size: 16px;margin: 0 6px 0 0;}
.total-discount{color: #646464;font-size: 10px;text-decoration: line-through;}
.Checkout-buttom{width: 110px;height: 35px;background: #ff5e16;border-radius: 18px;color: #fff;font-weight: bold;cursor: pointer;border: none;}
.summary-botton{color: #FF5E17;font-size: 14px;display: flex;gap:5px;margin-top: 5px;align-items: center;}

.win-bg{position: fixed;width: 100%;height: calc(100% - 67px);background: rgba(0,0,0,.7);top: 67px;left: 0;z-index: 100;display: none;}
.member{width: 415px;border-radius: 10px;top: 80px;position: fixed;z-index: 1005;background: #fff;right: -415px;padding: 30px 15px 15px 15px;box-shadow:0 0 10px rgba(0, 0, 0, .1);  }
.go-right{position: absolute;background: url(../images/pic153.png);width: 20px;height: 12px;background-size: 100% 100%;cursor: pointer; right: 50px;top: 80px;}
.member-button{width: 46px; position: relative;background: none;border: none;cursor: pointer;}
.user-profile{display: flex;justify-content: space-between;align-items: center;}
.avatar-large {width:76px;height: 76px;margin: 0 0 0 10px;}
.avatar-large img{width: 100%;aspect-ratio: 16 / 16; border-radius: 50%;}
.vipbox{width: calc(100% - 98px);}
.user-id { font-size: 18px; margin-bottom: 8px;font-weight: bold;color: #312E2C;}
.vip-badge {display: inline-block;width: 72px;}
.vip-badge img{width: 100%;}
.points-right{width: calc(100% - 290px);}
.balance-info { margin:25px 0 0;border-bottom: 1px solid #eee; padding-bottom: 15px;display: flex;}
.balance-info .balance-item:nth-child(3) {
    display: none;
}
.balance-item {text-align: center;width:50;}
.balance-amount{display: flex;justify-content: center;align-items: flex-start;margin-top: 20px;font-size: 18px; font-weight: bold;color: #333;margin-bottom: 12px;height: 27px;}
.sidebar-left{width: 271px;background: #fff; padding:33px 10px 0 10px;box-shadow: 0px 3px 6px 0px rgba(51, 169, 255, 0.0627);border-radius: 6px;}
.user-profile{display: flex;justify-content: space-between;align-items: center;}
.user-id { font-size: 18px; margin-bottom: 8px;font-weight: bold;color: #312E2C;}
.vip-badge {display: inline-block;}

.points-right{width: calc(100% - 290px);}
.balance-info { margin:5px 0 0;border-bottom: 1px solid #eee; padding-bottom: 15px;display: flex;}
.balance-item {text-align: center;width: 50%;}
.balance-label { font-size: 16px;color:#312E2C;}
.personal-menu {padding:15px 0 10px 0;}
.menu-link { display: flex; align-items: center;gap: 15px; color: #1D1D1D;text-decoration: none;padding: 10px; border-radius: 4px;transition: background-color 0.3s;font-size: 18px;position: relative; position: relative;transition: all .5s;line-height: 36px;}
.menu-link:before{position: absolute;content: "";width: 3px;height: 0; top: 50%;transform: translateY(-50%);left: 0;background: #ff0000;transition: all .5s;}
.balance-amount img{display: inline-block;vertical-align: middle; margin: -3px 8px 0 0;width: 27px;}
.menu-link:hover {font-weight: bold;background: #FFF2ED;}
.menu-link:hover:before{height: 100%;}
.menu-icon {width: 25px;height: 20px; display: flex;align-items: center; justify-content: center;}
.menu-item b{width: 30px; line-height: 30px;background: #ff0000;text-align: center;font-size: 14px;color: #fff; position: absolute;right: 15px;top: 50%;transform: translateY(-50%);border-radius: 50%;}
.menu-item.cur a{font-weight: bold;background: #FFF2ED; }
.menu-item.cur a:before{height: 100%;}

@media (max-width: 950px){
  .sidebar-left{display: none;}
  .close-bottom{top: .3rem; right: .3rem;width: .3rem;height: .3rem;background-size: 100% 100%;}
  .language{width: 90%; right: auto;left:50%; top:50%; transform:translate(-50%,-50%); z-index: 1001;}
  .languagebox{padding: 0 .3rem .45rem .3rem;}
  .language-title{padding: .45rem 0 .25rem;}
  .language-title p{font-size: .32rem;}
  .language-title p img{width: .35rem;}
  .language-content li{padding-bottom: .2rem;}
  .language-content p{padding: .2em 0;font-size: .24rem;}

  .login-pop{
    position: fixed; 
    width: 100%;
    border-radius: 0; 
    top: auto; 
    transform: translate(0, 0); 
    bottom: -120%;
    display: block;
    overflow: hidden;
    padding-bottom: 1.12rem;
    left: 0;
    right: 0;
  }
  .login-pop .loginTitle{
    margin-bottom: .52rem;
  }
  .Login-Instructions ul{display: none;}
  .login-sj{padding: .4rem .3rem .8rem .3rem; background-image: linear-gradient(#d9d2f8, #f9e1db);}
  .login-sj img{width: .85rem;}
  .login-sj h3{font-weight: bold;font-size: .28rem;line-height: 1.4;color: #000;margin-top: .1rem;}
  .login_bottom{background: #fff; padding: .25rem .3rem 0 .3rem;border-radius: .2rem .2rem 0 0; position: relative;z-index: 10;top: -.2rem;}
  .logqh{padding: 0;}
  .logqh p{font-weight: bold;font-size: .28rem;color: #333; padding: .2rem 0;}
  .Login-Selection{background: #fff;}
  .Login-Selection ul{overflow: auto;gap: .15rem;padding: .54rem 0;}
  .Login-Selection ul .login-item img{
    width: .46rem;
    height: .46rem;
  }
  .login-pop .login_title{padding: .35rem .35rem;font-size: .36rem;}
  .login-content{padding: 0 .35rem;}
  .login-content li{padding-bottom: .12rem;}
  .input_b,.input_c{height: .9rem;line-height: .9rem;padding-left: .9rem;font-size: .3rem;background-position: .28rem center;background-size: .32rem auto;}
  .log-buttoom{
    height: .78rem;
    line-height: .76rem;
    font-size: .32rem;
    margin-top: .12rem;
  }
  .Login-Selection h3{font-size: .32rem;padding: .25rem 0;}
  .Login-Selection ul img{width: .8rem;height: .8rem;}
  .login-message{font-size: .26rem;}
  .Login-Selection img{width: .5rem;}
  .Login-Instructions{background: #fff;}
  .Login-Instructions h4{padding: .2rem .3rem; margin: 0;}
  .Login-Instructions .login-policy-text{
    padding: 0 .35rem;
    font-size: .2rem;
  }
  .Login-Instructions span{
    font-size: .2rem;
  }
  .Login-Instructions span{ margin: 0;}
  .Tourist-button{margin: 0 .3rem; text-align: center;display: block;border-radius: .4rem;line-height: .8rem;background: #222127;font-size: .3rem;color: #F4DBBF;}
  .input_b{
    height: .78rem;
    line-height: .76rem;
  }
  .win-bg{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,.7);z-index: 99;}
  .pop-up-windowa{ width:100%; background: #ffff;top: auto;right: auto;z-index: 1005; border-radius: .2rem .2rem 0 0; height: calc(100vh - 3rem);left: 50%;transform: translateX(-50%);bottom: -120%; padding: 0 .3rem 1.5rem .3rem;}
  .pop-top h2{display: none;}
  .pop-top{height:calc(100vh - 4rem);}

  .member {width: 90%; border-radius: .2rem;top: auto;background: none;  right: auto; padding:0;box-shadow: 0 0 10px rgba(0, 0, 0, 0);left:50%; top:50%; transform:translate(-50%,-50%);display: none;}
  .member-top{border-radius: .2rem;background: #fff; padding: 0 .3rem .3rem .3rem;}
  .avatar-large{margin-top: -.5rem;width: 1.05rem;}
  .avatar-large img{border: 2px solid #fff;}
  .vipbox{width: calc(100% - 1.3rem);display: flex;justify-content: space-between;align-items: center;}
  .user-profile{align-items: flex-start;}
  .user-id{font-size: .26rem;}
  .vip-badge{width: 1.1rem;}
  .balance-info{margin:-.5rem 0 0 0; padding: 0;border: none;gap:.1rem;}
  .balance-item{width: calc(33.33% - .2rem/3);}
  .balance-amount{padding: 0;margin: 0;font-size: .3rem;}
  .balance-amount img{margin:-2px .1rem 0 0;width: .4rem;}
  .balance-label{font-size: .24rem;margin-top: .1rem;}
  .balance-item h2{font-size: .3rem;color: #000;font-weight: bold;}
  .balance-item p{font-size: .24rem;margin-top: .15rem;}
  .need{background: #fff;border-radius: .2rem; padding: .3rem 0;margin-top: .25rem;}
  .need ul{display: flex;justify-content: space-between;align-items: center;}
  .need li{width: 25%;}
  .need p{font-size: .24rem;color: #333; margin-top: .1rem;text-align: center;}
  .need img{margin: 0 auto;width: .6rem;}
  .go-right{right: .3rem;top: .9rem;}
  .Program-Rules {width: 90%; padding: .5rem .3rem;}
}

@keyframes bottomPayMethod-marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

#bottomPayMethod{
  overflow: hidden;
}

#bottomPayMethod .bottomPayMethod-track{
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: bottomPayMethod-marquee 20s linear infinite;
  will-change: transform;
}

#bottomPayMethod:hover .bottomPayMethod-track{
  animation-play-state: paused;
}
/*
@media (prefers-reduced-motion: reduce){
  #bottomPayMethod .bottomPayMethod-track{
    animation: none;
  }
} */


/* Custom Select Styles */
.custom-select {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #eee;
  /* border: 1px solid #e5e5e5; */
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: all .5s;
  position: relative;
  z-index: 10;
}

/* .custom-select__trigger:hover {
    border-color: #FF5E17;
    box-shadow: 0 0 15px rgba(255, 94, 23, .1);
} */

.custom-select__arrow {
  width: 16px;
  height: 16px;
  color: #666;
  transition: all .2s;
}
.custom-select__arrow.active{
  transform: rotate(180deg);
}

/* .custom-select__trigger.open .custom-select__arrow {
    transform: rotate(180deg);
    color: #FF5E17;
} */

.custom-select__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  /* border: 1px solid #e5e5e5; */
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 9;
  transition: all .3s;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-select__option {
  padding: 12px 16px;
  cursor: pointer;
  transition: all .3s;
  border-bottom: 1px solid #f5f5f5;
}

.custom-select__option:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.custom-select__option:hover {
  background: #f9f9f9;
  color: #FF5E17;
}

.custom-select__option--selected {
  background: rgba(255, 94, 23, .1);
  color: #FF5E17;
  font-weight: 500;
}

/* Custom scrollbar */
.custom-select__options::-webkit-scrollbar {
  width: 6px;
}

.custom-select__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.custom-select__options::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.custom-select__options::-webkit-scrollbar-thumb:hover {
  background: #FF5E17;
}

/* Responsive design */
@media (max-width: 950px) {
  .custom-select__trigger {
     padding:.24rem .32rem;
     font-size: .24rem;
  }

  .custom-select__option {
    padding: 10px 14px;
    font-size: 14px;
  }

    .breadcrumb{
      display: flex;
      align-items: center;
      height: .78rem;
      padding: 0 0 0 .32rem;
      background: #F4F7F9;
    }
    .breadcrumb img{
      display: none;
    }
    .breadcrumb h2,h3,h4{ 
      font-size: 0.24rem;
    }
}

@charset "utf-8";
#chat-widget-container {
    z-index: 98 !important;
}
.header {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 98;
}

.headertop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.header-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 92%;
    padding: 20px 0;
}

.header-container-home {
    display: none;
}

.headerLeft {
    display: flex;
    gap: 56px;
    align-items: center;
}

.logo {
    width: 189px;
}

.logo img {
    width: 100%;
    margin-left: -95px;
}

.Gametup {
    margin: 0 auto 10px;
}

.Gametup ul {
    display: flex;
    gap: 24px;
}

.Gametup a {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #000000;
    gap: 12px;
    padding-right: 12px;
    position: relative;
    z-index: 2;
}

.Gametup a img {
    width: 40px;
    height: 40px;
    z-index: 2;
}
.Gametup a div{
    z-index: 2;
    text-align: center;
    white-space: nowrap;
}
.Gametup a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: #EBF1FD;
    transition: width 0.4s ease;
    z-index: 1;
    border-radius: 4px;
    border: 1px solid rgba(55, 118, 218, 0.5)
}
.Gametup ul li:nth-child(2) a::before{
    background-color: #FDF7E5;
    border-color: rgba(255, 200, 57, 0.5);
}
.Gametup ul li:nth-child(3) a::before{
    background-color: #E8FAED;
    border-color: rgba(32, 186, 93, 0.5);
}
.Gametup ul li:nth-child(4) a::before{
    background-color: #EFEFFD;
    border-color: rgba(94, 91, 206, 0.5);
}
.Gametup ul li:nth-child(5) a::before{
    background-color: #FEECEB;
    border-color: rgba(225, 59, 64, 0.5);
}
.Gametup a:hover::before {
    width: 100%;
}

.Gametup li.cur a {
    box-shadow: 0px 3px 6px 0px rgba(51, 169, 255, 0.1);
}

/* 顶部主导航间距对齐备份 header1.css */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 46px;
    align-items: center;
    margin-right: 18px;
}

.nav-item {
    position: relative;
    padding: 0 20px;
}

.main-navigation {
    align-items: center;
    display: flex;
}

/* 顶部主导航文字和下划线效果，参考备份 header1.css */
.nav-link {
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    transition: color 0.3s;
    line-height: 66px;
    position: relative;
    transition: all .5s;
    white-space: nowrap;
    font-weight: 800;
}

/* .nav-link::after {content: ''; position: absolute;bottom: -10px;height: 2px;background-color: #EE7115;left: 50%;transform: translateX(-50%);width: 0;transition: all .5s;} */
.nav-link.active {
    color: #EE7115;
}

.nav-item:first-child .nav-link:hover::after {
    width: 0%;
}

/* Games 右侧小箭头图标间距对齐备份 nav-menu 样式 */
.nav-menu .nav-link img {
    display: inline-block;
    vertical-align: middle;
}

.nav-menu .nav-link img.logo-icon {
    height: 27px;
    width: auto;
}

.nav-menu .nav-link img.logo-text {
    height: 21px;
}

.nav-menu .nav-link span.logo_text {
    font-size: 20px;
    cursor: pointer;
    color: #0F0F0F;
}

.nav-menu .nav-item .nav-logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sub.pczs {
    position: absolute;
    width: 80%;
    top: 66px;
    left: 10%;
    background: #1e1e1e;
    display: none;
}

.subTitle {
    display: flex;
    justify-content: space-between;
}

.subBox.all {
    width: 66.66%;
    background: #3C3C3C;
}

.subBox {
    width: 33.33%;
    padding-bottom: 36px;
    background: #303030;
}

.subBox .group_name {
    color: #fff;
    line-height: 72px;
    font-size: 24PX;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #202020;
    padding: 0 40px 0 40px;
}

.subBox.all .group_name {
    padding: 0 0 0 40px;
}

.subBox .group_name img.subBox-arrow {
    margin-left: auto;
    margin-right: 0;
}

.subBox .group_name {
    cursor: pointer;
}

.subBox dl.scrollable-list {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 40px;
    background: #303030;
}

/* 特殊处理两列布局的滚动列表 */
.subBox.all dl.scrollable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    overflow-x: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    padding: 40px 0 40px 40px;
    background: #3C3C3C;
}

.subBox.all dl.scrollable-list dt {
    width: calc(50% - 10px);
    font-size: 16px;
    overflow: hidden;
    margin: 0;
}

/* 覆盖全局滚动条隐藏样式，确保滚动条可见 */
.subBox dl.scrollable-list {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 200, 200, 0.5) transparent;
    /* IE 和 Edge */
    -ms-overflow-style: auto;
}

/* 自定义WebKit滚动条样式 */
.subBox dl.scrollable-list::-webkit-scrollbar {
    width: 8px;
}

.subBox dl.scrollable-list::-webkit-scrollbar-track {
    background: transparent;
}

.subBox dl.scrollable-list::-webkit-scrollbar-thumb {
    background: rgba(200, 200, 200, 0.5);
    border-radius: 4px;
    min-height: 30px;
}

.subBox dl.scrollable-list::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 200, 200, 0.7);
}

.subBox dl.scrollable-list dt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 20px;
}

.subBox a {
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.subBox a img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.subBox a:hover {
    opacity: .6;
}

.ico1 {
    display: inline-block;
    color: #fff;
    background: url("/buffhub/images/label2.png");
    width: 36px;
    line-height: 15px;
    background-size: 100% 100%;
    text-align: center;
    vertical-align: middle;
    margin: -3px 0 0 4px;
}

.ico2 {
    display: inline-block;
    color: #fff;
    background: url("/buffhub/images/label1.png");
    width: 64px;
    line-height: 15px;
    background-size: 100% 100%;
    text-align: center;
    vertical-align: middle;
    margin: -3px 0 0 4px;
    font-size: 10px;
}

.subBottom {
    width: 275px;
    height: 100%;
    border: solid 1px linear-gradient(270deg, #FFC1C2 0%, #FFB468 22.6%, #202020 100%);
    border-left: none;
    background: linear-gradient(270deg, rgba(255, 161, 95, 0.24) 0%, rgba(32, 32, 32, 0.4) 93.75%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subBottom a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    gap: 12px;
}

.subBottom a img {
    width: 26px;
    height: 26px;
}

.subBottom p {
    font-weight: 900;
    font-size: 24px;
}

.subBottom p {
    color: #FFFFFF;
    font-size: 18px;
    margin: 0;
}

.subBottom p img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 15px 0 0;
}

.subBottom span {
    display: inline-block;
    background: url("/buffhub/images/icon5.png");
    width: 8px;
    height: 14px;
    background-size: 100% 100%;
}

/* 头部右侧操作区，buttonbox 完全参考备份 header1.css 颜色与尺寸 */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.buttonbox {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 34px;
    border-radius: 8px;
    width: 240px;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: #F4F7F9;
}

.buttonbox.collapsed {
    width: 34px;
}

.buttonbox.collapsed .search-input {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1490px) {
    .header-actions {
        position: absolute;
        right: 0;
        background-color: #fff;
        padding: 10px;
    }

    .buttonbox {
        width: 34px;
        z-index: 1000;
        /* 提高z-index，确保在导航菜单之上 */
        background-color: #F4F7F9;
    }

    .buttonbox .search-input {
        width: 0;
        pointer-events: none;
    }

    .buttonbox.expanded {
        width: 240px;
        right: 0;
    }

    .buttonbox.expanded .search-input {
        width: 100%;
        opacity: 1;
        pointer-events: auto;
    }
}

.search-input2 {
    height: 32px;
    border: none;
    background: #474747;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 24px 0 0 24px;
    padding: 0 13px;
    box-sizing: border-box;
}

.search-input {
    flex: 1;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    color: #474747;
    font-size: 14px;
    border: none;
    background: transparent;
    outline: none;
    min-width: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.search-input::-webkit-input-placeholder {
    color: #DBDBDB;
}

.search-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
    box-sizing: border-box;
}

.search-icon img {
    width: 20px;
    height: 20px;
}


.search-result {
    position: absolute;
    top: 100%;
    left: 0;
    width: 66%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 102;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 14px;
    box-sizing: border-box;
    margin-top: 0px;
    pointer-events: auto;
    overscroll-behavior: contain;
    display: none;
}

.search-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 190px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-result-list ul {
    padding: 0;
    margin: 0;
}

.search-result-list li.list-item {
    display: block;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: normal;
}

.search-result-list li.list-item:last-child {
    border-bottom: none;
}

.search-result-list li.list-item a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
    color: #1D1D1D;
}

.search-result-list li.list-item:hover {
    background: #f5f5f5;
}

.search-result-list li img {
    transition: all .5s;
}

.search-result-list li:hover img {
    transform: scale(1.1);
}

.search-loading {
    width: 64px;
    height: 64px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #EE7115;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.search-empty {
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.search-empty img {
    width: 83px;
    margin-bottom: 10px;
}

.guess-like {
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 12px 0;
    color: #1D1D1D;
}

.item-content {
    display: flex;
    align-items: center;
}

.item-img {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 12px;
}

.item-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.item-img .hot {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #EE7115;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
    margin: 0;
}

.item-img p:not(.hot) {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin: 0;
    display: flex;
    align-items: center;
}

.item-img p:not(.hot) img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

.item-text {
    flex: 1;
    min-width: 0;
}

.item-text h2 {
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 8px 0;
    color: #1D1D1D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.item-star {
    font-size: 12px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
}

.item-sold {
    font-size: 12px;
    color: #888;
}

.item-discount {
    background: #EE7115;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
}


.item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.discount {
    background: #EE7115;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
}

.recharge-btn {
    background: #f5f5f5;
    color: #1D1D1D;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
}

.recharge-btn:hover {
    background: #e0e0e0;
}


.icon-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #1D1D1D;
    height: 34px;
    background: #F4F7F9;
    border-radius: 8px;
    line-height: 34px;
    text-align: center;
    padding: 0 8px;
    color: #202020;
    white-space: nowrap;
}
.icon-button span{
     white-space: nowrap;
}

.icon-button1 {
    display: block;
}

.icon-button img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
}

.dropdown-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-arrow.USD {
    background: #EE7115;
    color: #F5F5F5;
}

.dropdown-arrow .cur-code {
    display: none;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff0000;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Log-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #1D1D1D;
    /* width: .76rem; */
    height: 34px;
    background: #F4F7F9;
    border-radius: 8px;
    line-height: 34px;
    text-align: center;
    padding: 0 8px;
    color: #202020;
}

.Log-button img {
    width: 20px;
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-menu-trigger {
    display: block;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EE7115;
    color: #F5F5F5;

    height: 34px;
    line-height: 34px;
    padding: 0 8px;
    border-radius: 8px;

}

.user-menu-trigger img {
    width: 20px;
    height: 20px;
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    width: 275px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    padding: 14px;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.user-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.user-menu-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.user-menu-nickname {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-balance {
    display: flex;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.user-menu-balance-item {
    flex: 1;
    background: #f7f7f8;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}

.user-menu-balance-amount {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-menu-balance-amount img {
    width: 14px;
    height: 14px;
    display: inline-block;
}

.user-menu-balance-label {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.user-menu-links {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.user-menu-link {
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    color: #000000;
    font-size: 14px;
    line-height: 1.2;
}

.user-menu-link:hover {
    background: #f7f7f8;
}

.user-menu-logout {
    color: #EE7115;
    font-weight: 700;
}

/* 支付弹窗 */
.payment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.payment-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
}

.detail-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 101;
    display: none;
}

.PaymentModel {
    position: fixed;
    z-index: 99;
    width: 1106px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 94%;
}

.PaymentModel-left {
    width: 53%;
    background: url("/buffhub/images/paymentModelLeftBg.png") no-repeat center center;
    padding: 40px 0 0 40px;
}

.PaymentModel-title h2 {
    font-weight: 900;
    font-size: 24px;
    color: #000000;
    margin-bottom: 24px;
}

/* UID显示样式 */
.uid-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px 16px 12px 0px;
}

.uid-input-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 10px;
}

.game-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-icon img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.uid-label,
.server-value {
    font-size: 12px;
    color: #6D6A6A;
    font-weight: normal;
}

.uid-value {
    font-size: 14px;
    color: #000000;
    font-weight: normal;
    margin-left: auto;
}

.arrow-icon {
    width: 21px;
    height: 21px;
    background: url("/buffhub/images/exchange.png") no-repeat center center;
    background-size: contain;
    cursor: pointer;
}

.uid-verify-tip {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.uid-verify-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8d8d8d;
}

.uid-verify-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 94, 23, 0.2);
    border-top-color: #EE7115;
    animation: uid-verify-spin 0.8s linear infinite;
}

.uid-verify-ok {
    color: #1aa85b;
}

.uid-verify-warn {
    color: #EE7115;
}

@keyframes uid-verify-spin {
    to {
        transform: rotate(360deg);
    }
}

.text-box {
    padding-right: 48px;
}

.text-box p {
    font-size: 12px;
    color: #000000;
    margin-bottom: 5px;
}

.text-box li {
    padding-bottom: 24px;
}

.text-content {
    position: relative;
    height: 40px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #6D6A6A;
}

.text-content.error {
    border: 1px solid #FF0000;
}

/* .text-content.error input::-webkit-input-placeholder{color:#EE7115;} */
.text-input1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding-left: 38px;
    background: url("/buffhub/images/sa8.svg") no-repeat 9px center;
}

.text-input2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding-left: 38px;
    background: url("/buffhub/images/sa9.svg") no-repeat 9px center;
}

.button-a {
    position: absolute;
    width: 128px;
    height: 36px;
    right: 0;
    top: 0;
    color: #fff;
    border-radius: 18px;
    cursor: pointer;
    transition: all .5s;
    border: none;
    background: #EE7115;
}

.button-a:hover {
    opacity: 0.6;
}

.sele {
    padding: 8px 0 0 0;
}

.sele h2 {
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: #000000;
    margin-bottom: 24px;
}

.sele li {
    padding-bottom: 12px;
}

.sele li.cur a {
    border: 1px solid #EE7115;
}

.sele li.cur .sele_b h3 {
    color: #EE7115 !important;
}

.gdtCont {
    width: 100%;
    height: 415px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.txtCont {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-right: 48px;
}

.bz-gdtCon {
    width: 6px;
    position: absolute;
    top: 0;
    right: 0;
    background: #898989;
    height: 100%;

}

.bz-chtgn {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
}

.sele a {
    display: block;
    display: flex;
    justify-content: space-between;
    padding: 8px 30px;
    border-radius: 4px;
    border: 1px solid #adaaaa;
    background: #fff;
    align-items: center;
}

.sele a:hover {
    border: 1px solid #EE7115;
}

.sele_b h3 {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #000000;
}

.sele_c {
    text-align: center;
}

.sele_c h3 {
    font-size: 20px;
    font-weight: 500;
    color: #EE7115;
    margin-bottom: 2px;
}

.sele_c p {
    font-size: 12px;
    color: #000000;
}

.seleft {
    width: calc(100% - 150px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.seleft .sele_a img {
    max-height: 48px;
}

.sele_b {
    width: calc(100% - 152px);
}

.PaymentModel-right {
    width: 47%;
    background: #fff;
    padding: 20px 30px 0 48px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.img-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imgtextleft {
    width: 145px;
}

.imgtextleft img {
    max-width: 96px;
}

.imgtextright {
    width: calc(100% - 145px);
}

.imgtextright h2 {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
}

.imgtextright p {
    font-size: 24px;
    color: #EE7115;
    margin: 15px 0;
    font-weight: 500;
}

.imgtextright p b {
    font-size: 16px;
}

.imgtextright h3 {
    display: flex;
    gap: 10px
}

.btn-a {
    line-height: 18px;
    padding: 0 8px;
    background: #EE7115;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
}

.btn-b {
    line-height: 18px;
    padding: 0 8px;
    background: #FFC79E;
    border-radius: 4px;
    color: #6D6A6A;
    font-size: 12px;
    text-decoration: line-through;
}

.PaymentModel-img .mySwiper {
    padding-bottom: 30px;
}

.PaymentModel-img .mySwiper .img-text {
    padding-left: 14px;
}

.PaymentModel-img .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    opacity: 1;
    background: #d8d8d8;
}

.PaymentModel-img .swiper-pagination-bullet-active {
    background: #EE7115;
}

.PaymentModel-img .swiper-button-prev {
    left: -7px;
}

.PaymentModel-img .swiper-button-prev:after,
.swiper-button-next:after {
    color: #575B66;
    font-size: 22px;
    font-weight: 600
}

.Summary-title h2 {
    font-weight: 900;
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
}

.Summary-nr {
    height: 490px;
    overflow: auto;
}

.Summary-top a {
    display: block;
    padding: 0 15px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #312E2C;
    line-height: 28px;
    align-items: center;
}

.Summary-top a:hover {
    border: 1px solid #EE7115;
    color: #EE7115;
}

.dwtb {
    background: url("/buffhub/images/a141.png") no-repeat 95% center;
}

.sunnary-bottom {
    background: #F4F7F9;
    border: 0.6px solid #F5F5F5;
    padding: 12px 19px;
    margin-top: 20px;
}

.sunnary-bottom li {
    display: flex;
    justify-content: space-between;
    color: #000000;
    align-items: center;
    height: 18px;
    margin-top: 12px;
}

.sunnary-bottom li:first-child {
    margin-top: 0px;
}

.color3 {
    color: #000000;
}

.color4 {
    color: #0AC452;
}

.sunnary-bootno {
    padding-top: 20px;
}

.sunnary-bootno p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    margin-bottom: 16px;
}

.sunnary-bootno b {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
}

#payAmount b {
    font-size: 20px;
}

.sunnary-bootno span {
    font-weight: 900;
    font-size: 24px;
    color: #EE7115;
}

.sunnary-bootno em {
    font-size: 16px;
    font-weight: 400;
}

.Summary-top li {
    margin-bottom: 6px;
    position: relative;
}

.Summary-top li:last-child {
    margin-bottom: 0;
}

.Summary-top li:hover input {
    border: 1px solid #EE7115 !important;
    cursor: pointer;
    color: #EE7115;
}

.Summary-top li:hover input::-moz-placeholder {
    color: #EE7115;
}

.Summary-top li:hover input::placeholder {
    color: #EE7115;
}

.Summary-top li.disabled input {
    cursor: not-allowed;
}

.Summary-top li.selected input {
    border: 1px solid #EE7115 !important;
    cursor: pointer;
    color: #EE7115;
}

.Summary-top li.selected input::-moz-placeholder {
    color: #EE7115;
}

.Summary-top li.selected input::placeholder {
    color: #EE7115;
}

.maximum-botton {
    position: absolute;
    cursor: pointer;
    background: url("/buffhub/images/pic138.png");
    width: 5px;
    height: 9px;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.coupon-botton {
    position: absolute;
    cursor: pointer;
    background: url("/buffhub/images/pic139.png");
    width: 12px;
    height: 13px;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

button.redeem-botton {
    border: none;
    position: absolute;
    width: 68px;
    height: 96%;
    top: 50%;
    background-color: #fe1528;
    border-radius: 0 4px 4px 0;
    transform: translateY(-50%);
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

.redeem-botton:disabled {
    background-color: #d8d8d8;
    cursor: not-allowed;
}

#maximum {
    width: 100%;
    height: 28px;
    line-height: 26px;
    border: 1px solid #e8e6da;
    border-radius: 4px;
    padding: 0 40px;
    background: url("/buffhub/images/a140.svg") no-repeat 12px center;
}

#coupone {
    width: 100%;
    height: 28px;
    line-height: 26px;
    border: 1px solid #e8e6da;
    border-radius: 4px;
    padding: 0 40px;
    background: url("/buffhub/images/a142.svg") no-repeat 12px center;
}

#points {
    width: 100%;
    height: 28px;
    line-height: 26px;
    border: 1px solid #e8e6da;
    border-radius: 4px;
    padding: 0 40px;
    background: url("/buffhub/images/a143.svg") no-repeat 12px center;
}

#balance {
    width: 100%;
    height: 28px;
    line-height: 26px;
    border: 1px solid #e8e6da;
    border-radius: 4px;
    padding: 0 40px;
    background: url("/buffhub/images/sa121.svg") no-repeat 12px center;
}

.doubt {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: url("/buffhub/images/a139png.png");
    width: 12px;
    height: 13px;
    cursor: pointer;
}

.list-b p {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #000000;
    line-height: 38px;
}

.list-b b {
    font-weight: 900;
    font-size: 12px;
}

.color1 {
    color: #000000;
}

.color2 {
    color: #00B67A;
}


.btoont {
    text-align: center;
    display: block;
    line-height: 60px;
    background: #EE7115;
    color: #fff;
    border-radius: 4px;
    font-size: 24px;
    transition: all .5s;
    width: 100%;
    border: none;
    cursor: pointer;
    font-weight: 700;
}

.btoont:disabled {
    background: #d8d8d8;
    cursor: not-allowed;
}

.Order {
    position: fixed;
    z-index: 1005;
    border-radius: 15px;
    background: #fff;
    width: 475px;
    padding: 0 40px 35px 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.Order-title {
    padding: 40px 0 20px;
}

.Order-title h2 {
    font-weight: 900;
    font-size: 18px;
    color: #1D1D1D;
}

.Order-title p {
    line-height: 16px;
    color: #ADAAAA;
    margin-top: 10px;
}

.list1 p {
    font-size: 16px;
    color: #2C2C2C;
    line-height: 2;
}

.Order-input2 {
    width: 100%;
    height: 42px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 21px;
    border: 1px solid #EE7115;
}

.Order-input3 {
    width: 100%;
    height: 42px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 21px;
    border: 1px solid #EE7115;
    background: url("/buffhub/images/pic55.png") no-repeat 95% center #fff;
    outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.list1 ul {
    padding-bottom: 20px;
}

.list1 li {
    padding-bottom: 10px;
}

.order-button {
    width: 100%;
    height: 50px;
    background: #222127;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 900;
    font-size: 16px;
    color: #F4DBBF;
    transition: all .5s;
}

.order-button:hover {
    opacity: .6;
}

.payment-topup-confirm .uid-confirm-actions {
    display: flex;
    gap: 12px;
}

.payment-topup-confirm .uid-confirm-actions .order-button {
    width: auto;
    flex: 1;
}

.payment-topup-confirm-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10011;
    opacity: 0;
    transition: opacity .2s;
}

.payment-topup-confirm-dialog.is-active {
    opacity: 1;
}

.payment-topup-confirm-dialog .modal-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .56);
}

.payment-topup-confirm-dialog .w-dialog__outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 92vw;
    width: 480px;
    pointer-events: auto;
}

.payment-topup-confirm-dialog .w-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.payment-topup-confirm-dialog .uid-confirm-actions {
    display: flex;
    gap: 12px;
}

.payment-topup-confirm-dialog .uid-confirm-actions .w-button {
    flex: 1;
}

.list2 ul {
    padding-bottom: 25px;
}

.list2 li {
    padding: 15px 0 20px;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list2 li span {
    font-size: 16px;
    color: #2C2C2C;
}

.list2 li b {
    font-size: 16px;
    color: #EE7115;
}

.payment-coupon .Coupons-popup {
    position: relative;
    z-index: 1005;
    background: #fff;
    border-radius: 15px;
    width: 560px;
    max-height: 80vh;
    overflow-y: auto;
}

.coupons-title {
    border-bottom: 1px solid #ebebeb;
    padding: 0 45px;
}

.coupons-title h2 {
    font-weight: 900;
    font-size: 18px;
    color: #1D1D1D;
    padding: 28px 0 34px;
}

.coupons-title h2 img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 15px 0 0;
}

.coupons-title ul {
    display: flex;
}

.coupons-title li {
    width: 50%;
}

.coupons-title li a {
    display: block;
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #ADAAAA;
    position: relative;
    transition: all .5s
}

.coupons-title li a:before {
    position: absolute;
    content: "";
    border-bottom: 4px solid #EE7115;
    border-radius: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .5s;
    width: 0;
}

.coupons-title li.cur a {
    font-weight: 900;
}

.coupons-title li.cur a:before {
    width: 37px;
}

.coupons-title li a:hover {
    font-weight: 900;
}

.coupons-title li a:hover:before {
    width: 37px;
}

.coupons-title a:hover {
    font-weight: 900;
}

.coupons-title a:hover:before {
    width: 37px;
}

.coup-empty {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emptytext img {
    margin: 0 auto;
}

.emptytext p {
    font-size: 18px;
    line-height: 1.6;
    color: #ADAAAA;
    margin-top: 35px;
}

.reddem {
    padding: 15px 40px 25px 40px;
    display: flex;
    justify-content: space-between;
}

.reddem-input {
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    border-radius: 6px;
    background: #f5f5f5;
    width: calc(100% - 147px);
    font-size: 16px;
}

.reddem-button {
    background: #fff;
    border: 1px solid #EE7115;
    color: #EE7115;
    cursor: pointer;
    color: #EE7115;
    font-size: 16px;
    height: 42px;
    width: 134px;
    border-radius: 6px;
}

.reddem-button:disabled {
    background: #f5f5f5;
    border: 1px solid #D8D8CC;
    color: #D8D8CC;
    cursor: not-allowed;
}

.shopping-voucher {
    height: 420px;
    overflow: auto;
    margin: 0 45px 25px 45px;
    padding: 5px;
}

.shopping-voucher li {
    padding-bottom: 10px;
}

.couponbox {
    position: relative;
    cursor: pointer;
}

.couponbox .title-bottom {
    text-align: right;
}

.couponbox.selected {
    border: 1px solid #EE7115;
    border-radius: 12px;
}

.coupon-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.coupon-text-a {
    position: absolute;
    left: 20px;
    top: 15px;
    width: 355px;
    display: flex;
    justify-content: space-between;
}

.coupon-right {
    width: 86px;
}

.coupon-right img {
    width: 100%;
}

.coupon-left {
    width: 78%;
}

.coupon-left h1 {
    font-weight: 900;
    font-size: 18px;
    color: #E5E5E5;
}

.coupon-left h2 {
    font-weight: 900;
    font-size: 18px;
    color: #EE7115;
}

.coupon-left h2 span {
    font-weight: 400;
    font-size: 12px;
}

.coupon-left h3 {
    font-size: 10px;
    color: #312E2C;
    margin: 6px 0 6px;
}

.coupon-left h4 {
    font-size: 14px;
    color: #312E2C;
}

.title-bottom {
    position: absolute;
    line-height: 43px;
    font-size: 12px;
    color: #312E2C;
    bottom: 0;
    border-top: 1px dashed #eee;
    width: 375px;
    left: 9px;
    padding-left: 11px;
}

.coupon-text-b {
    position: absolute;
    left: 0;
    bottom: 0;
}

.coupon-img img {
    width: 100%;
    border-radius: 10px;
}

.total-price {
    padding: 0 45px 25px 45px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.total-price h2 {
    line-height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-price h2 b {
    font-size: 16px;
    color: #626262;
}

.total-price h2 span {
    font-weight: 900;
    font-size: 18px;
    color: #EE7115;
}

.total-botton {
    width: 100%;
    display: block;
    text-align: center;
    line-height: 52px;
    background: #222127;
    font-weight: 900;
    font-size: 16px;
    color: #F4DBBF;
    border-radius: 6px;
}

.payment-pending,
.payment-deposit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1004;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.Payment {
    position: relative;
    z-index: 1005;
    background: #fff;
    border-radius: 15px;
    width: 475px;
    padding: 0 35px 35px 35px;
}

.payment-coupon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1004;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.paymentbox {
    padding: 40px 15px 15px 15px;
    overflow: hidden;
}

.paymentbox h2 {
    font-weight: 900;
    text-align: center;
    color: #1D1D1D;
    font-size: 18px;
}

.swiper-box img {
    margin: 0 auto;
}

.swiper-box h2 {
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    color: #1D1D1D;
    margin: 12px 0 36px;
}

.paymentbox .swiper-pagination-bullet {
    background: #13c15b;
}

.paymentbox .swiper-pagination-bullet-active {
    background: #13c15b;
}

.paymen-text p {
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    color: #ADAAAA;
}

.paymen-text ul {
    display: flex;
    gap: 15px;
    padding: 15px 0 0 0;
}

.paymen-text li {
    width: calc(50% - 15px/2);
}

.paymen-text dl {
    display: flex;
    gap: 15px;
    padding: 15px 30px 0 30px;
    justify-content: space-between;
}

.paymen-text dl dt a {
    font-size: 12px;
    line-height: 16px;
    color: #ADAAAA;
}

.paymen-text span {
    padding: left 5px;
}

.paymen-text dl dt a:hover {
    color: #FF5E17;
}

.paymen-text dl dt a img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 0 0 0;
}

.order-button1 {
    width: 100%;
    cursor: pointer;
    border: none;
    height: 50px;
    background: #fff;
    border-radius: 25px;
    transition: all .5s;
    font-size: 16px;
    color: #ADAAAA;
    border: 1px solid #ADAAAA;
}

.order-button1:hover {
    background: #222127;
    border: 1px solid #222127;
    color: #fff;
}

.payment-points {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1004;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.Points {
    perspective-origin: left;
    z-index: 1005;
    border-radius: 8px;
    background: url("/buffhub/images/pic137.png") no-repeat center top #fff;
    width: 476px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% auto;
    padding: 0 40px 45px 40px;
}

.Points-title h2 {
    font-weight: 900;
    font-size: 18px;
    color: #1D1D1D;
    padding: 40px 0 30px;
}

.Points-content h2 {
    font-size: 12px;
    color: #ADAAAA;
    line-height: 16px;
}

.Points-content ul {
    padding: 0 0 10px;
}

.Points-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.Points-content li span {
    font-weight: 900;
    font-size: 16px;
    color: #2C2C2C;
}

.Points-content li b {
    font-size: 18px;
    font-weight: 900;
    color: #312E2C;
}

.Points-content li b img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 5px 0 0;
}

.Points-content li em {
    font-size: 16px;
    color: #EE7115;
}

.Points-content li font {
    font-weight: 900;
}

.Points-content h2 {
    font-size: 16px;
    color: #626262;
    margin-bottom: 5px;
}

.Points-content p {
    font-size: 12px;
    line-height: 16px;
    color: #ADAAAA;
}

.list1 {
    padding-bottom: 15px;
}

.quantity {
    width: 120px;
    height: 32px;
    border: 1px solid #d8d8d8;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
}

.decrease {
    width: 30px;
    border: none;
    border-right: 1px solid #d8d8d8;
    height: 28px;
    background: none;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

.increase {
    width: 30px;
    border: none;
    border-left: 1px solid #d8d8d8;
    height: 28px;
    background: none;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

.quantity-value {
    width: calc(100% - 60px);
    text-align: center;
    font-size: 14px;
    line-height: 28px;
    color: #000000;
    -moz-appearance: textfield;
}

.quantity-value::-webkit-outer-spin-button,
.quantity-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sjzs {
    display: none;
}

.PaymentModel-top {
    display: none
}

.quantity-text {
    padding-left: 24px;
    font-size: 24px;
}

@media (max-width: 1470px) {
    .logo .logo-icon {
        width: 22px;
        margin-left: 0;
    }

    .logo .logo-text {
        width: 113px;
    }
}

@media (min-width: 950px) {
    /* .nav-item:hover .sub {
        display: block;
    } */
    .nav-link.active::after {
        width: 100%;
    }

    .nav-item .nav-link:hover::after {
        width: 100%;
    }

    .nav-link:hover {
        color: #EE7115;
    }
}

@media (max-width: 1120px) {
    .icon-button img {
        width: 20px;
    }

    .nav-menu {
        gap: 24px;
    }

    .Log-button {
        font-size: 13px;
        padding: 6px 10px;
    }

    .dropdown-arrow {
        font-size: 13px;
    }

    .dropdown-arrow span {
        font-size: 13px;
    }

    .sub {
        width: 88%;
        top: 67px;
        left: 6%;
    }

    .badge {
        font-size: 10px;
        width: 20px;
        height: 20px;
        line-height: 22px;
        top: 0px;
        right: 0px;
    }
}

@media (max-width: 950px) {
    .logo .logo-icon {
        width: .48rem;
        height: .48rem;
        margin-left: 0;
    }

    .logo .logo-text {
        width: 2.6rem;
        height: .38rem;
    }
    .badge {
        font-size: .2rem;
        width: .3rem;
        height: .3rem;
        line-height: .3rem;
    }
    .seleft .sele_a img {
        max-height: 26px;
    }

    .header-actions {
        position: unset;
    }

    .sjzs {
        display: block;
    }

    .pczs {
        display: none !important;
    }

    .header {
        height: auto;
        z-index: 98;
    }

    .headertop {
        height: 1.82rem;
        border: none;
        padding: 0 .32rem;
    }

    .logo {
        position: absolute;
        width: 2.7rem;
        left: .32rem;
        top: .1rem;
        display: flex;
        align-items: center;
        gap: .1rem;
        height: 0.7rem;
    }

    .logo .logo_text {
        font-size: 0.33rem;
        line-height: 0.3rem;
        color: #0E0E0E;
    }

    .header-container {
        height: 0.7rem;
        padding: 0;
        width: 100%;
    }

    .header-container-home {
        display: block;
    }

    .icon-button1 {
        display: none;
    }

    .buttonbox {
        display: block;
    }

    .search-input2 {
        display: none !important;
    }

    .main-navigation {
        position: fixed;
        width: 80%;
        top: 1.64rem;
        left: -80%;
        height: calc(100vh);
        background: #fff;
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu {
        display: block;
        overscroll-behavior-y: auto;
        margin-right: 0;
    }

    .nav-item:first-child {
        display: none;
    }

    .nav-link {
        font-size: .4rem;
        font-weight: 700;
        line-height: 1.21rem;
        padding: 0;
        display: flex;
        align-items: center;
        gap: .08rem;
        padding-left: .92rem;
    }

    .nav-item {
        margin: 0;
        padding: 0;
    }

    /* .nav-link.active::after{bottom: 0; background: #EE7115;height: 2px;} */
    .nav-menu .nav-link img {
        width: .24rem;
        display: block;
        transition: transform 0.3s ease;
    }

    .sub {
        position: static;
        width: 100%;
        color: #000000;
        font-size: .24rem;
        font-weight: 700;
        opacity: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-y: contain
    }

    .sub::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .nav-link::after {
        bottom: 0;
    }

    .subTitle {
        display: block;
        padding: 0;
    }

    .subBox dl {
        padding: 0;
    }

    .subBox,
    .subBox.all {
        width: 100%;
        background: none;
        padding: 0;
    }

    .subBox a img {
        width: .6rem;
        height: .6rem;
    }

    .subBox .group_name {
        font-size: .24rem;
        height: .84rem;
        color: #000000;
        font-weight: 700;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: .08rem;
    }
    .subBox.all .group_name{
        padding: 0;
    }

    .subBox .group_name img {
        width: .24rem;
        height: auto;
    }

    .subBox-icon.hot {
        content: url('/buffhub/images/hot-mobile.png');
        /* 如果直接使用content属性，需要隐藏src */
        height: 0;
        width: auto;
        min-height: 16px;
        /* 设置最小高度 */
        display: none;
    }

    .subBox-icon.all {
        content: url('/buffhub/images/all-mobile.png');
        height: 0;
        width: auto;
        min-height: 16px;
        /* 设置最小高度 */
        display: none;
    }

    .subBox-arrow {
        transition: transform 0.3s ease;
    }

    .subBox.all .subBox-arrow {
        transform: rotate(-90deg);
    }
    .subBox .group_name img.subBox-arrow{
        margin: 0;
    }

    .subBox a {
        font-size: .24rem;
        color: #000000;
        gap: .16rem;
        line-height: .3rem;
    }

    .subBox dl.scrollable-list {
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
        background: none !important;
        gap: .24rem;
        padding: 0 0 .92rem .92rem;
    }
    .subBox.all dl.scrollable-list{
        gap: .24rem;
        padding: .24rem 0 .92rem .92rem;
    }

    .subBox dl.scrollable-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .subBox.all dl.scrollable-list dt,
    .subBox dl.scrollable-list dt {
        width: calc(100%);
        line-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .subBottom {
        display: none;
    }

    .ico2 {
        zoom: .6;
    }

    .ico1 {
        zoom: .6;
    }

    .search-result {
        width: 100%;
    }

    .buttonbox {
        border-radius: 4px;
        height: .64rem;
        width: 5.9rem;
        position: absolute;
        bottom: .23rem;
        left: 1.28rem;
    }

    .search-input {
        font-size: .22rem;
        line-height: .64rem;
        padding: 0 .2rem;
        height: .64rem;
    }

    .search-icon {
        padding-left: .2rem;
    }

    .search-icon img {
        width: .25rem;
        height: .25rem;
    }

    .Log-button {
        border-radius: 4px;
        padding: 0 .2rem;
        height: .64rem;
        top: .15rem;
        font-size: .22rem;
        right: .35rem;
        position: absolute;
        width: .76rem;

    }

    .Log-button b {
        display: none;
    }

    .dhbtnBg {
        padding: 0 .16rem;
        background: #f4f7f9;
        min-width: .72rem;
        height: .64rem;
        display: flex;
        align-items: center;
        position: absolute;
        left: .32rem;
        bottom: .23rem;
    }

    .dhbtn {
        background: url("/buffhub/images/d1.png") no-repeat center center;
        width: .4rem;
        height: .3rem;
        background-size: 100% 100%;
    }

    .dhbtn.on {
        position: absolute;
        background: url("/buffhub/images/d2.png") no-repeat center center;
        background-size: auto 100%;
    }


    .dropdown-arrow.USD {
        display: none;
    }

    .dropdown-arrow .cur-code {
        display: block;
    }

    .dropdown-arrow span {
        font-size: .24rem;
    }

    .icon-button img {
        display: none;
    }

    .user-menu {
        position: absolute;
        right: .35rem;
        top: .15rem;
    }

    .user-menu-trigger {
        border-radius: 4px;
        padding: 0 .2rem;
        height: .64rem;
        width: .76rem;
        font-size: .22rem;
    }

    .user-menu-trigger img {
        display: inline;
        width: .4rem;
        height: .4rem;
    }

    .user-menu:hover .user-menu-dropdown,
    .user-menu:focus-within .user-menu-dropdown {
        opacity: 0;
        visibility: hidden;
    }

    .dhbj {
        position: fixed;
        z-index: 98;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .7);
        display: none;
    }

    .member-button {
        position: absolute;
        right: .55rem;
        bottom: .1rem;
    }

    .h68 {
        height: .5rem;
    }
    .Gametup {
        width: 100%;
        padding: 0 .32rem;
        margin-bottom: .18rem;
    }
    .Gametup ul{
        width: 100%;
        gap: .04rem;
    }
    .Gametup ul li{
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .Gametup a{
        flex-direction: column;
        font-size: .22rem;
        padding: 0;
        gap: .1rem;
    }
    .Gametup a img{
        width: .48rem;
        height: .48rem;
    }
    .Gametup a::before{
        width: .48rem;
        height: .48rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .Gametup a:hover::before {
        width: .48rem;
    }


    .payment-overlay {
        z-index: 99;
    }

    .payment-mask {
        z-index: 100;
    }

    .PaymentModel {
        display: block;
        height: auto;
        max-width: 100%;
        z-index: 100;
        padding: 0;
        background: #F5F5F5;
        left: 50%;
        top: 2.7rem;
        bottom: 0;
        transform: translate(-50%, 0%);
        overflow-y: auto;
        border-radius: .08rem .08rem 0 0;
    }

    .PaymentModel .orderInformation {
        background: #FFFFFF;
        height: .92rem;
        font-weight: 900;
        font-size: .32rem;
        color: #000000;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 0.03rem solid #F5F5F5
    }

    .PaymentModel .orderInformation img {
        position: absolute;
        top: .315rem;
        right: .315rem;
        height: .32rem;
        width: .32rem;
    }

    .payment-overlay .PaymentModel-top {
        /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
        display: block;
        padding: .3rem .25rem;
        border-radius: .2rem .2rem 0 0;
        color: #000
    }

    .PaymentModel-top .PaymentModel-title {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .PaymentModel-top .PaymentModel-title img {
        position: absolute;
        left: 0;
        height: .5rem;
        cursor: pointer;
        padding: .1rem;
    }

    .PaymentModel-top .PaymentModel-title h2 {
        font-size: .32rem;
        font-weight: 900;
        margin: 0;
    }

    .PaymentModel-img {
        background: #fff;
        padding: .32rem .43rem;
    }

    .PaymentModel-img .mySwiper .img-text {
        padding: 0;
    }

    .PaymentModel-img .mySwiper {
       padding-bottom: .2rem;
    }
    .PaymentModel-img .swiper-pagination-bullet{
        width: .16rem;
        height: .16rem;
    }

    .PaymentModel-left {
        width: 100%;
        border-radius: 0;
        padding: 0;
    }

    .text-box {
        padding: 0 .32rem .2rem .32rem;
        background: #fff;
    }

    .text-box li:last-child {
        padding-bottom: 0;
    }

    .text-box li {
        padding-bottom: .16rem;
    }

    .text-content {
        height: .8rem;
        border-radius: 0;
        font-size: .2rem;
    }

    .text-input1 {
        height: .8rem;
        font-size: .2rem;
    }

    .text-input2 {
        height: .8rem;
        font-size: .2rem;
    }

    .PaymentModel-left .PaymentModel-title {
        display: none;
        background: #fff;
        font-size: .32rem;
        font-weight: 900;
        margin: 0;
        padding: .25rem;
    }

    .Summary-top {
        background: #fff;
        padding: .24rem .32rem;
        border-radius: 0;
    }

    .PaymentModel-title h2 {
        font-size: .32rem
    }

    .Summary-title h2 {
        font-size: .32rem;
        font-weight: 900;
        margin: 0;
    }

    .Summary-top ul {
        padding: 0;
    }

    .Summary-top li {
        margin-bottom: .16rem;
    }

    .Summary-top li #maximum,
    .Summary-top li #coupone,
    .Summary-top li #points,
    .Summary-top li #balance {
        height: .6rem;
        line-height: .6rem;
        font-size: .2rem;
    }

    .sunnary-bottom {
        margin-top: 0;
    }

    .sunnary-bottom li {
        height: .2rem;
        font-size: .2rem;
        margin-top: .16rem;
    }

    .Summary-top li:hover input {
        border: 1px solid #e8e6da !important;
        color: #898989;
    }

    .Summary-top li:hover input::-moz-placeholder {
        color: #898989;
    }

    .Summary-top li:hover input::placeholder {
        color: #898989;
    }

    .Summary-top button.redeem-botton {
        width: auto;
        font-size: 0.24rem;
    }

    .sele {
        /* margin: .25rem 0 0 0; */
        background: url("/buffhub/images/seleBg.png") no-repeat 100%;
        padding: .28rem .3rem;
        width: 100%;
        aspect-ratio: 750 / 376;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .bz-gdtCon {
        display: none;
    }

    .PaymentModel-right {
        width: 100%;
        background: #fff;
        padding: 0 .32rem .24rem .32rem;
        border-radius: 0;
    }

    .Summary-nr {
        height: auto;
    }

    .button-a {
        height: .5rem;
        border-radius: .25rem;
        width: 1.5rem;
        font-size: 0.24rem;
    }

    .sele h2 {
        font-size: .24rem;
        font-weight: 900;
        margin: 0 .25rem .25rem 0;
        display: none;
    }

    .imgtextright h2 {
        font-size: .28rem;
        line-height: .28rem;
    }

    .imgtextright p {
        font-size: .28rem;
        margin: .16rem 0;
        line-height: .34rem;
    }

    .quantity-text {
        padding-left: .3rem;
        font-size: .28rem;
        line-height: .34rem;
    }

    .imgtextright h3 {
        gap: .16rem;
    }

    .btn-a {
        padding: 0 0.07rem;
    }

    .btn-b {
        padding: 0 0.07rem;
    }

    .txtCont a {
        padding: .13rem .2rem;
    }

    .txtCont {
        padding-right: 0;
    }

    .gdtCont {
        height: 100%;
    }

    .seleft {
        width: calc(100% - 1.9rem);
    }

    .sele li {
        padding-bottom: .16rem;
    }

    .sele_a {
        width: 2.5rem;
    }

    .sele li:last-child {
        padding-bottom: 0;
    }

    /* .sele_a{height: .47rem;} */
    .sele_c {
        width: 1.8rem;
    }

    .sele_c h3 {
        font-size: .24rem;
        margin-bottom: .1rem;
    }

    .sele_b {
        width: calc(100% - 2.5rem);
    }

    .sele_c p {
        font-size: .2rem;
        white-space: nowrap;
        line-height: .24rem;
    }

    .sele_b h3 {
        font-size: .24rem;
    }

    .sele li.cur .sele_c h3 {
        font-size: .28rem;
        line-height: .34rem;
        margin-bottom: .08rem;
    }

    .imgtextleft {
        width: 1.95rem;
    }

    .imgtextleft img {
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 100%;
    }

    .imgtextright {
        width: calc(100% - 2.11rem);
    }

    .sunnary-bottom {
        font-size: .24rem;
        border: 0;
    }

    .PaymentDetail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 101;
        display: none;
        border-radius: .25rem .25rem 0 0;
        /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); */
    }

    .PaymentDetail b {
        font-weight: 900;
    }

    .PaymentDetail ul {
        padding: .25rem .3rem;
        color: #000;
        font-size: .24rem;
        font-weight: 400;
    }

    .PaymentDetail li {
        display: flex;
        justify-content: space-between;
        padding: .15rem 0;
    }

    .PaymentDetail li:last-child {
        border-bottom: none;
    }

    .PaymentDetail-title {
        padding: .3rem;
        margin: 0;
    }

    .PaymentDetail-title h2 {
        text-align: center;
        font-size: .32rem;
        font-weight: 900;
        color: #000;
    }

    .tjbotton {
        position: sticky;
        background: #fff;
        left: 0;
        bottom: 0;
        padding: .25rem .3rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .tjboleft h2 {
        font-size: .32rem;
        color: #000000;
        margin-bottom: .2rem;
        font-weight: 900;
    }

    .tjboleft p {
        font-size: .3rem;
        color: #EE7115;
        font-weight: 900;
        display: flex;
        align-items: center;
        gap: .1rem;
    }

    .tjboleft .summary img {
        transition: transform 0.3s ease;
    }

    .tjboleft p b {
        font-size: .32rem;
        font-weight: 700;
    }

    .tjboleft span.summary {
        display: inline-block;
        vertical-align: middle;
    }

    .tjboleft span.summary img {
        height: .3rem;
    }

    .tjbotton button {
        width: 2.5rem;
        padding: .25rem .3rem;
        border-radius: .3rem;
        background: #EE7115;
        color: #fff;
        text-align: center;
        font-size: .3rem;
        border: none;
    }

    .tjbotton button:disabled {
        background: #eee;
        cursor: not-allowed;
    }

    .payment-coupon .Coupons-popup {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 101;
        border-radius: .3rem .3rem 0 0;
        width: 100%;
        /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); */
    }

    .coupons-title {
        padding: 0 .3rem;
    }

    .coupons-title h2 {
        padding: .3rem 0;
        font-size: .32rem;
        font-weight: 900;
        color: #000;
    }

    .Coupons-popup .shopping-voucher {
        margin: .3rem .15rem;
    }

    .Coupons-popup .reddem {
        padding: .25rem .3rem;
    }

    .Coupons-popup .reddem-button {
        width: 2rem;
    }

    .Coupons-popup .reddem-input {
        width: calc(100% - 2.5rem);
    }

    .payment-overlay .Points,
    .payment-overlay .Order {
        width: 100%;
        bottom: 0;
        left: 0;
        top: auto;
        transform: translate(0%, 0%);
    }

    .payment-pending .Payment {
        width: 92%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

    .Payment .paymen-text {
        display: flex;
        justify-content: space-around;
        padding: .3rem .2rem;
    }

    .Payment .paymen-text dl {
        padding: 0;
        gap: 1rem;
    }

    .Payment .paymen-text dt {
        flex: 1;
        text-align: center;
    }

    .Payment .paymen-text a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .1rem;
        text-decoration: none;
        color: #666;
        font-size: .24rem;
    }

    .Payment .paymen-text img {
        width: .3rem;
        height: .3rem;
    }

    .Payment .paymen-text span {
        margin-top: .1rem;
    }

    .Order {
        border-radius: .3rem .3rem 0 0;
    }

    /* .tjbotton{position: sticky;background: #fff;left: 0;bottom: 0;  padding: .15rem .3rem;display: block;justify-content: space-between;width: 100%;}
    .tjboleft h2{font-size: .24rem;color: #000000;margin-bottom: .1rem;}
    .tjboleft p{font-size: .3rem;color: #EE7115;font-weight: 900;}
    .tjboleft p b{font-size: .24rem;font-weight: 400;}
    .tjbotton a{line-height: .8rem;border-radius: .1rem; padding: 0 .3rem;background: #EE7115;color: #fff;text-align: center;font-size: .3rem;font-weight: 900;}

    .tjbotton a span b{padding-left: .3rem;font-weight:bold} */

    .notyf {
        width: 72%;
        left: 50%;
        transform: translate(-50%, 0%);
        margin: 0 auto;
    }


    .icon-button1 img {
        display: inline;
        width: .4rem;
        height: .4rem;
    }

    .dropdown-arrow {
        position: absolute;
        width: 1.56rem;
        height: .64rem;
        line-height: .64rem;
        right: 2.19rem;
        top: .15rem;
        border-radius: 4px;
        color: #000000;
        background: #F4F7F9;
        font-size: .22rem;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* 隐藏溢出的内容 */
        white-space: nowrap; /* 防止文本换行 */
        text-overflow: ellipsis; /* 显示省略号 */
        gap: 0;
        font-weight: 600;
    }

    .icon-button1 {
        display: block;
        position: absolute;
        right: 1.27rem;
        top: .15rem;
        width: .76rem;
        height: .64rem;
        line-height: .64rem;
        border-radius: 4px;
    }

    .Log-button img {
        width: .4rem;
    }

    .search-loading {
        border-width: .08rem;
    }
}

/* @media (max-width: 768px){
    .dhbtn{bottom: .32rem;}
    .buttonbox{border-radius: 4px;height: .64rem;width:6rem;position: absolute;bottom: .25rem;left: 1.1rem;}
    .search-input{font-size: .22rem;line-height: .45rem;padding: 0 .2rem; height: .45rem;}
}

@media (max-width: 520px) {
    .dhbtn{bottom: .4rem;}
    .buttonbox{border-radius: 4px;height: 34px;width:6rem;position: absolute;bottom: .25rem;left: 1.1rem;}
    .search-input{font-size: .22rem;line-height: 34px;padding: 0 .2rem; height: 34px;}
} */

.select-ins {
    background-color: #28282A;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.select-ins .search-input2 {
    background: transparent;
}

/* 模态框样式 */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1D1D1D;
}

.modal-body {
    padding: 24px;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.modal-footer {
    padding: 20px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.modal-footer button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.modal-confirm {
    background: linear-gradient(90deg, #FF5E17 0%, #FF1717 100%);
    color: #fff;
}

.modal-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 94, 23, 0.3);
}

.modal-cancel {
    background: #f5f5f5;
    color: #1D1D1D;
    border: 1px solid #ddd;
}

.modal-cancel:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}
@charset "utf-8";

.waysbox {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.waysleft p {
    color: #2F2F2F;
    font-weight: 700;
    font-size: 20px;
}

.box {
    width: calc(100% - 0px)
}

.winBox {
    height: 48px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll {
    width: 3000px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.scroll li {
    float: left;
    margin-right: 40px;
}

.h68 {
    height: 68px;
}

.footer-background {
    background: #000508;
}

.footer-content {
    width: 1596px;
    max-width: 94%;
    margin: 0 auto;
     padding: 80px 0 40px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 80px;
}

.footer-Left .h2 {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    margin: 8px 0;
}

.footer-Left p {
    font-size: 16px;
    line-height: 1.6;
    color: #818181;
}

.footer-Left h3 {
    padding: 15px 0 25px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-Left h3 span {
    color: #fff;
    font-size: 14px;
}

.footer-Left h3 b {
    display: inline-block;
}

.pic1 {
    background: url(../images/a23.png);
    width: 21px;
    height: 22px;
    background-size: 100% 100%;
}

.pic2 {
    background: url(../images/a24.png);
    width: 21px;
    height: 22px;
    background-size: 100% 100%;
}

.rating {
    width: 115px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.footer-Bottom>ul {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-Bottom>ul .footeBottom{
    margin-right: 35px;
    height: 24px;
    aspect-ratio: 180 / 24;
}
.footer-Left li img {
    transition: all .5s;
}

.footer-Left li a:hover img {
    opacity: .6;
}

.footer-Left .email,
.footer-Left .telephone,
.footer-Left .address {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 4px;
}

.footer-Left .email>img,
.footer-Left .telephone>img,
.footer-Left .address>img {
    width: 16px;
    height: 16px;
}

.footer-Left .address>img {
    margin-top: -20px;
}

.footer-Left .email>div,
.footer-Left .telephone>div,
.footer-Left .address>div {
    flex: 1;
    font-size: 16px;
    line-height: 28px;
    color: #666666;
}

.footer-Left .address>div {
    line-height: 20px;
    max-width: 400px;
}

.footer-Right {
    flex-grow: 1;
}

.footer-Right ul {
    display: flex;
    justify-content: space-between;
}

.footer-Right .h2 {
    font-weight: 500;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 36px;
}

.footer-Right dt a {
    color: #666666;
    transition: all .5s;
    display: block;
    line-height: 23px;
    font-size: 18px;
    margin-top: 18px;
}
.footer-Right dt:first-child a{
    margin-top: 0;
}

.footer-Right dt a:hover {
    color: #FFF;
}

.footer-Right dt a img {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 0 0 5px;
}

.footer-Bottom {
    border-top: 1px solid #838383;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1596px;
    min-height: 110px;
    max-width: 94%;
    margin: 0 auto;
}

.footer-Bottom p {
    color: #fff;
    padding: 25px 0;
    line-height: 24px;
    font-size: 16px;
    color: #666666;
}

@media only screen and (min-width: 950px) {
    .footer-Right {
        max-width: 60%;
    }
}

.footer-background .move {
    display: none;
}

@media (max-width: 950px) {
    .logo1{
        height: .6rem;
        aspect-ratio: 275 / 42;
        margin-bottom: .42rem;
    }
    .footer-Left .h2 {
        display: none;
    }
    .banner2 {
        display: none;
    }

    .ways {
        border: none;
    }

    .waysbox {
        display: block;
        padding: .4rem 0;
        background: #fff;
    }

    .waysleft {
        display: none;
    }

    .box {
        width: 100%;
        background: #fff;
        border-bottom: 0;
    }

    .footer-content {
        width: 100%;
        max-width: 100%;
        padding: .48rem .62rem;
        display: block;
    }

    .bottom-logo {
        display: none;
    }


    .footer-Left ul {
        justify-content: center;
        padding: .3rem 0 0 0;
    }

    .footer-Left li img {
        height: .8rem;
    }

    .winBox {
        height: .62rem;
    }

    .footer-Right {
        width: 100%;
    }

    .footer-Right .h2 {
        font-size: .32rem;
        line-height: .42rem;
        margin-bottom: .24rem;
    }

    .footer-Right dt a {
        font-size: .28rem;
        line-height: .32rem;
        margin-top: .16rem;
    }
    .footer-Right h2 {
        font-size: 14px;
    }


    .winBox img {
        height: .62rem;
    }

    .scroll li {
        margin-right: .32rem;
    }

    .phone-nav {
        position: fixed;
        width: 100%;
        background: #fff;
        padding: .21rem .2rem .38rem .21rem;
        z-index: 98;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        background: #fff;
    }

    body {
        padding-bottom: 1.28rem;
    }

    .phone-nav ul {
        display: flex;
        justify-content: space-between;
    }

    .phone-nav ul li {
        width: calc(20% - .6rem/5);
    }

    .phone-nav p {
        font-size: .2rem;
        line-height: .24rem;
        margin-top: 0;
        width: 100%;
        text-align: center;
    }

    .phone-nav li img {
        margin: 0 auto;
        height: .48rem;
    }

    .phone-nav ul li:nth-child(3) {
        position: relative;
    }

    .phone-nav ul li:nth-child(3) img {
        height: 1.5rem;
        position: absolute;
        top: -0.06rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .footer-Right ul {
        flex-wrap: wrap;
        gap: .4rem 0;
    }

    .footer-Right ul li {
        width: 50%;
    }

    .footer-background .move {
        width:calc( 100% - 1.24rem );
        max-width: 100%;
        min-height: auto;
        margin: 0 auto;
        display: block;
        padding: .42rem 0 .8rem 0;
    }

    .footer-Bottom p {
        font-size: .24rem;
        line-height: .36rem;
        margin-top: .32rem;
        padding: 0;
    }
    .footer-Bottom p:first-child{
        margin-top: 0;
    }

    .footer-Bottom .email,
    .footer-Bottom .telephone,
    .footer-Bottom .address {
        display: flex;
        align-items: center;
        margin-bottom: .24rem;
        gap: .08rem;
    }
    .footer-Bottom .address{
        margin-bottom: 0;
    }

    .footer-Bottom .email>img,
    .footer-Bottom .telephone>img,
    .footer-Bottom .address>img {
        width: .32rem;
        height: .32rem;
    }

    .footer-Bottom .address>img {
        margin-top: -.64rem;
    }

    .footer-Bottom .email>div,
    .footer-Bottom .telephone>div,
    .footer-Bottom .address>div {
        width: calc(100% - .4rem);
        flex: 1;
        font-size: .28rem;
        line-height: .32rem;
        color: #666666;
        word-wrap: break-word;
        text-align: left;
    }

    .footer-Bottom .ulImg {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .21rem;
        margin: .42rem 0;
    }
    .footer-Bottom .ulImg img{
        height: .88rem;
    }

    .footer-Bottom .footeBottomImg {
        height: .48rem;
        margin: 0 auto;
    }

}
.ins-load-layout{
    z-index: 999;
    position: absolute;
}

.ins-load-layout .ins-mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.ins-load-layout .ins-load{
    width: 181px;
    height: 181px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding-top: 24px;
    gap: 12px;
    box-sizing: border-box;
}

.ins-load-layout .ins-load .spin-ins{
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ins-load-layout .ins-load .spin-text{
    font-size: 18px;
    color: #797979;
    line-height: 24px;
    text-align: center;
    word-break: break-word;
}

#ins-load-layout .search-loading{
    display: block;
}
@media (max-width: 950px){
    .ins-load-layout .ins-load{
        width: 1.81rem;
        height: 1.81rem;
        padding-top: .24rem;
        gap: .12rem;
    }
    .ins-load-layout .ins-load .spin-ins{
        height: .64rem;
    }
    .ins-load-layout .ins-load .spin-text{
        font-size: .18rem;
        line-height: .24rem;
    }
    .search-loading{
        width: .64rem;
        height: .64rem;
    }
}
@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-shrink {
  0%, 25%, 100% {
    /* minimum scale and opacity */
    transform: scale(0.5);
    opacity: 0.25;
  }
  26% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 自定义下拉菜单样式 */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.custom-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 20px;
    border-radius: 5px;
    background: #efeff1;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.custom-dropdown-header:hover {
    background: #e0e0e2;
}

.custom-dropdown-value {
    color: #333;
}

.custom-dropdown-arrow {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
}

.custom-dropdown.open .custom-dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 228px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    overflow-y: auto;
    margin-top: 5px;
}

.custom-dropdown.open .custom-dropdown-list {
    display: block;
}

.custom-dropdown-option {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
    color: #333;
}

.custom-dropdown-option:hover {
    background-color: #FF5905;
    color: #fff;
}

.custom-dropdown-option[data-selected="true"] {
    background-color: #FF5905;
    color: #fff;
}

/* 线行tab切换 */
.tabSwitchLine {
    display: flex;
    gap: 60px;
    align-items: center;
}

.tabSwitchLine li {
    cursor: pointer;
    color: #000000;
    line-height: 28px;
    font-size: 22px;
    padding-bottom: 5px;
    color: #90949A;
}

.tabSwitchLine li.active {
    color: #000000;
    border-bottom: #EE7115 3px solid;
}

/* 线行tab切换 移动端*/
@media (max-width: 950px) {
    .tabSwitchLine {
        gap: .38rem;
    }

    .tabSwitchLine li {
        line-height: .48rem;
        font-size: .40rem;
        padding-bottom: .07rem;
    }

    .tabSwitchLine li.active {
        border-width: 0.06rem;
    }
}

/* tooltip组件 */
.hzk-tooltip {
    position: relative;
}

.hzk-tooltip .status-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 4px;
    padding: 18px;
    z-index: 9999;
    width: 360px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* pc显示 */
@media (hover: hover) and (pointer: fine) {
    .hzk-tooltip:hover .status-tooltip {
        opacity: 1;
        visibility: visible;
    }
}

.hzk-tooltip .status-tooltip::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: white transparent transparent;
}

.hzk-tooltip .status-tooltip h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 8px;
    color: #000000;
}

.hzk-tooltip .status-tooltip p {
    font-size: 14px;
    line-height: 17px;
    color: #000000;
}
/*!* 基础css框架（全局） *!*/
/* @import 'bulma'; */
/*!* 自定义css基础框架（全局） *!*/
/* 动画库（全局） */
/* toast提示框（全局） */
/* 购物车样式（全局） */
/* 全部样式（方便使用，未拆分，先全局使用） */
/* 导入load样式 */
/* 轻量js加载样式（全局） */
/* 加載全局的下拉框样式、封装组件样式 */
/*!* 基础css框架（全局） *!*/
/* @import 'bulma'; */
/*!* 自定义css基础框架（全局） *!*/
/* 动画库（全局） */
/* toast提示框（全局） */
/* 购物车样式（全局） */
/* 全部样式（方便使用，未拆分，先全局使用） */
/* 导入load样式 */
/* 轻量js加载样式（全局） */
/* 加載全局的下拉框样式、封装组件样式 */