@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('https://static.buffhub.com/buffhub/images/placeholder/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: 101;
    border-radius: 15px;
}

.pop-up-windowa .close-bottom {
    top: 29px;
}

.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(https://static.buffhub.com/buffhub/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: #FF6E20;
}

.product-total {
    font-weight: 700;
    color: #FF6E20;
}

.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: #FF6E20;
    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, .6);
    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;
    }

    .pop-up-windowa .close-bottom {
        top: .345rem;
    }
}

.carta-right .title-flex {
    display: flex;
    gap: 30px;
    align-items: center;
}

.carta-right .title-flex h3 {
    flex: 1;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carta-right .title-flex 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-box {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    top: 67px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 109;
}

#cart-buy-layout-uid {
    position: fixed;
    width: 581px;
    top: 50%;
    left: 50%;
    background: #FFF;
    z-index: 110;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    padding: 36px;
}

#cart-buy-layout-uid .title {
    color: #000;
    font-size: 32px;
    line-height: 45px;
    font-weight: bold;
    margin-bottom: 32px;
}

#cart-buy-layout-uid ul {
    list-style: none;
}

#cart-buy-layout-uid ul li {
    padding-bottom: 32px;
}

#cart-buy-layout-uid ul li.order-title,
#cart-buy-layout-uid ul li.showLable .current {
    display: none;
}

#cart-buy-layout-uid .uid {
    padding: 0;
}

#cart-buy-layout-uid .uid li.showLable {
    line-height: 24px;
}

#cart-buy-layout-uid .uid .input_1 {
    width: 100%;
    height: 60px;
    background: url(https://static.buffhub.com/buffhub/images/uidpic.svg) no-repeat 12px center #F4F7F9;
    background-size: 16px auto;
    border-radius: 4px;
    padding: 0 15px 0 37px;
    line-height: 60px;
    font-size: 20px;
}

#cart-buy-layout-uid .uid .custom-select__trigger {
    height: 60px;
    border-radius: 4px;
    font-size: 20px;
}

#cart-buy-layout-uid .uid .custom-select__arrow {
    width: 32px;
    height: 32px;
    transition: all .2s;
}

#cart-buy-layout-uid .uid .custom-select__trigger.active {
    border: 1px solid #EE7115;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

#cart-buy-layout-uid .uid .custom-select__option {
    height: 60px;
    font-size: 20px;
    line-height: 24px;
    border: none;
    border-radius: 0;
}

#cart-buy-layout-uid .uid .custom-select__options {
    max-height: 242px;
    box-shadow: none;
    border: 1px solid #EE7115;
    border-top: 0;
}

#cart-buy-layout-uid .uid .custom-select__option--selected {
    background: #EE7115;
    color: #FFFFFF;
    font-weight: 400;
}




#cart-buy-layout-uid .uid p {
    font-size: 20px;
    line-height: 24px;
    color: #6D6A6A;
    font-weight: 400;
    margin-bottom: 4px;
}

#cart-buy-layout-uid #cart-buy-layout-uid-bottom {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#cart-buy-layout-uid #cart-buy-layout-uid-bottom .button {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    line-height: 60px;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #EE7115;
    text-align: center;
    cursor: pointer;
}



#cart-buy-layout-uid #cart-buy-layout-uid-bottom #cart-buy-layout-uid-close {
    position: absolute;
    cursor: pointer;
    background: url(https://static.buffhub.com/buffhub/images/a127.png);
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    top: 43px;
    right: 30px;
    z-index: 10;
}

#cart-buy-layout-uid .uid .uidmodule {
    border: none;
    padding: 0;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    #cart-buy-layout-uid #cart-buy-layout-uid-bottom .button:hover {
        opacity: .8;
    }

    #cart-buy-layout-uid .uid .custom-select__option:hover {
        background: #EE7115;
        color: #FFFFFF;
    }
}

@media (max-width: 950px) {
    #cart-buy-layout-uid-box {
        top: 0;
    }

    #cart-buy-layout-uid {
        width: 100%;
        padding: .32rem;
    }

    #cart-buy-layout-uid .title {
        font-size: .36rem;
        line-height: .5rem;
        margin-bottom: .32rem;
    }

    #cart-buy-layout-uid ul li {
        padding-bottom: .24rem;
    }

    #cart-buy-layout-uid .uid li.showLable {
        line-height: .24rem;
    }

    #cart-buy-layout-uid .uid .input_1 {
        height: .7rem;
        line-height: .7rem;
        font-size: .24rem;
    }

    #cart-buy-layout-uid .uid .custom-select__trigger {
        height: .7rem;
        line-height: .7rem;
        font-size: .24rem;
        transition: none;
    }

    #cart-buy-layout-uid .uid .custom-select__arrow {
        width: .48rem;
        height: .48rem;
    }

    #cart-buy-layout-uid .uid .custom-select__option {
        height: .7rem;
        font-size: .24rem;
        line-height: .29rem;
        max-height: 2.9rem;
    }

    #cart-buy-layout-uid .uid p {
        font-size: .24rem;
        line-height: .29rem;
        margin-bottom: .08rem;
    }

    #cart-buy-layout-uid #cart-buy-layout-uid-bottom {
        gap: .2rem;
    }

    #cart-buy-layout-uid #cart-buy-layout-uid-bottom .button {
        height: .7rem;
        line-height: .7rem;
        font-size: .26rem;
    }


    #cart-buy-layout-uid #cart-buy-layout-uid-bottom #cart-buy-layout-uid-close {
        width: .3rem;
        height: .3rem;
        top: .4rem;
        right: .3rem;
    }
}
@charset "utf-8";

/* CSS Document */
*,
*:before,
*:after {
  /* 2. 兼容 IE 和 旧版 Edge */
  box-sizing: border-box;
}

*{
  scrollbar-width: thin;
  scrollbar-color: #d6d9dd #F2F2F2;
}
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 4px;
  /* 滚动条宽度 */
  height: 4px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #F2F2F2;
  /* 轨道背景颜色 */
  border-radius: 6px;
  /* 轨道圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #FFBE8E;
  /* 滑块颜色 */
  border-radius: 6px;
  /* 滑块圆角 */
}

/* 滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #EE7115;
  /* 滑块悬停颜色 */
}


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, .6);
  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,
#loginPopBg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, .6);
  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(https://static.buffhub.com/buffhub/images/pic38.png) no-repeat 20px 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(https://static.buffhub.com/buffhub/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("https://static.buffhub.com/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 .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 span {
  font-size: 12px;
  color: #777777;
  margin: 30px 0;
  text-align: center;
  line-height: 1.5;
}

.Login-Instructions span a {
  color: #37A1F6;
}



.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(https://static.buffhub.com/buffhub/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(https://static.buffhub.com/buffhub/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(https://static.buffhub.com/buffhub/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(https://static.buffhub.com/buffhub/images/a127.png);
  width: 24px;
  height: 24px;
  background-size: 100% 100%;
  top: 36px;
  right: 36px;
  z-index: 10;
}

.logqh {
  padding: 0 50px;
}

.logqh li {
  padding-bottom: 15px;
}

/*breadcrumb*/
.main-content {
  width: 1280px;
  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>span {
  width: 20px;
  height: 20px;
  background: url(/buffhub/images/split.svg);
  background-size: 100% 100%;
  margin: 0 4px;
}

.breadcrumb h4 {
  font-size: 16px;
  line-height: 20px;
  display: flex;
  align-items: center;
}

h3 {
  font-size: 14px;
}

.breadcrumb h2 {
  font-size: 16px;
  line-height: 20px;
  color: #B8B8B8;
  display: flex;
  align-items: center;
}

.breadcrumb a {
  color: #474747;
  font-size: 16px;
  line-height: 20px;
  transition: all .5s;
  display: flex;
  align-items: center;
}

.breadcrumb h2.cur a {
  display: block;
  font-size: 16px;
  line-height: 20px;
  color: #B8B8B8;
}


.breadcrumb img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/*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: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 16px;
  text-align: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.pagination .ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 40px;
  color: #000000;
  width: 40px;
  text-align: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.pagination .prev {
  width: 40px;
  height: 40px;
  background: none;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev b {
  display: inline-block;
  background-image: url(https://static.buffhub.com/buffhub/images/pagination/left.svg);
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  vertical-align: middle;
}


.pagination .next {
  width: 40px;
  height: 40px;
  background: none;
  margin-left: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next b {
  display: inline-block;
  background-image: url(https://static.buffhub.com/buffhub/images/pagination/right.svg);
  width: 40px;
  height: 40px;
  background-size: 100% 100%;
  vertical-align: middle;
}

.pagination a.active {
  background: #EE7115;
  color: #fff;
}



@media (max-width: 950px) {
  .pagination ul {
    gap: .08rem;
  }

  .pagination .prev {
    line-height: .4rem;
    width: .4rem;
    padding-right: .08rem;
    font-size: .2rem;
  }

  .pagination .ellipsis,
  .pagination a {
    width: .4rem;
    height: .4rem;
    border-radius: 4px;
    font-size: .2rem;
  }

  .pagination .next {
    width: .4rem;
    height: .4rem;
    padding-left: .08rem;
    font-size: .2rem;
  }

  .prev b {
    width: 100%;
    height: 100%;
  }

  .next b {
    width: 100%;
    height: 100%;
  }
}

.pop-up-windowa {
  position: fixed;
  width: 415px;
  background: #F4F7F9;
  top: 67px;
  right: -415px;
  z-index: 100;
  border-radius: 15px;
  height: calc(100vh - 67px);
  padding: 0;
}

.pop-up-windowa .pop-top {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pop-up-windowa .pop-top .brandList {
  flex: 1;
  overflow: auto;
}

.pop-top h2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 34px;
  color: #000000;
  padding: 0 24px;
  background: #FFFFFF;
  height: 82px;
  line-height: 82px;
  margin-bottom: 12px;
}

.popbox {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 12px 12px 12px;
}

.cart-t {
  padding: 16px 0 0;
}

.cart-t h3 {
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
  display: flex;
  gap: 6px;
  padding-left: 16px;
  align-items: center;
}

.inline-link-grid {
  gap: 4px;
}

.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: 2px solid #DFDFDF;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  vertical-align: middle;
}

.cart-top li .my_protocol_a .input_agreement_protocol+span {
  top: 30px;
}

.my_protocol_a .input_agreement_protocol:checked+span {
  background-image: url(https://static.buffhub.com/buffhub/images/pic62.png);
  background-size: 100% 100%;
  border: none;
}

.pay-text h2 {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.4;
  color: #1A1A1A;
  margin-top: 5px;
}

.cart-top {
  padding: 0 16px;
  margin-top: 16px;
}

.cart-top li {
  padding: 12px 0;
  border-bottom: none;
}

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

.carta-left {
  width: 104px;
  display: flex;
  justify-content: space-between;
}

.carta-left img {
  width: 80px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16 / 16;
}

.carta-right {
  width: calc(100% - 108px);
}

.carta-right .title-flex img {
  width: 24px;
  height: 24px;
}

.carta-right h3 {
  font-weight: bold;
  color: #000000;
  font-size: 18px;
  line-height: 22px;
}

.carta-right p {
  font-size: 14px;
  line-height: 17px;
  color: #000000;
  margin: 4px 0;
}

.carta-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

.carta-right h4 {
  font-size: 18px;
  line-height: 22px;
  color: #EE7115;
  font-weight: 900;
}

.product-total {
  color: #EE7115;
}

.quantity-control_a {
  display: flex;
  justify-content: space-between;
  width: 106px;
}

.decrease-btn {
  width: 24px;
  height: 24px;
  background: #F4F7F9;
  border-radius: 4px;
  font-size: 16px;
  color: #000000;
  touch-action: manipulation;
  border: none;
  padding: 0;
}

.decrease-btn img {
  width: 100%;
  height: 100%;
}

.increase-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #F4F7F9;
  font-size: 16px;
  color: #000000;
  touch-action: manipulation;
  border: none;
  padding: 0;
}

.increase-btn img {
  width: 100%;
  height: 100%;
}

.quantity-input {
  width: 34px;
  border-radius: 4px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background: #F4F7F9;
}

.cart-top li:last-child {
  border-bottom: none;
}

.cart-top li:first-child {
  margin-top: 0;
}

.cart-bottom {
  height: 66px;
  display: flex;
  padding: 0 12px 0 24px;
  background: #FFF5EE;
  justify-content: space-between;
  align-items: center;
}

.cart-bottom h3 span {
  font-weight: 900;
  font-size: 22px;
  color: #EE7115;
}

.Total-Price {
  display: inline-block;
  color: #EE7115;
  font-size: 22px;
  margin: 0 6px 0 0;
}

.total-discount {
  color: #646464;
  font-size: 10px;
  text-decoration: line-through;
}

.Checkout-buttom {
  width: auto;
  height: 46px;
  padding: 0 31px;
  background: none;
  border-radius: 8px;
  color: #FFFFFF;
  background: #EE7115;
  font-weight: 400;
  cursor: pointer;
  font-size: 18px;
}

.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, .6);
  top: 67px;
  left: 0;
  z-index: 100;
  display: none;
}

.member {
  width: 415px;
  border-radius: 8px;
  top: 80px;
  position: fixed;
  z-index: 110;
  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(https://static.buffhub.com/buffhub/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;
  gap: 8px;
}

.avatar-large {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.avatar-large img {
  width: 100%;
  aspect-ratio: 16 / 16;
  border-radius: 4px;
}

.vipbox {
  flex: 1;
}

.user-id {
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #000000;
}

.vip-badge {
  display: block;
  height: 26px;
}

.vip-badge img {
  height: 100%;
}

.points-right {
  width: calc(100% - 306px);
}

.balance-info {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  display: flex;
}

.balance-info .balance-item a {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  line-height: 24px;
  color: #000000;
}

.balance-info .balance-item .balance-label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.balance-info .balance-item:nth-child(2) a {
  color: #333333;
}
.balance-info .balance-item:nth-child(3) {
  display: none;
}
.balance-info .balance-item:nth-child(2) a .balance-label {
  margin-right: 14px;
}

.sidebar-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.sidebar-left {
  width: 288px;
  background: #fff;
  padding: 24px 18px 0 18px;
  border: 1.5px solid #F5F5F5;
  border-radius: 4px;
  position: sticky;
  top: 88px;
}

.balance-info {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.personal-menu {
  padding: 16px 0;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #000000;
  transition: background-color 0.3s;
  font-size: 20px;
  position: relative;
  transition: all .5s;
  height: 40px;
  padding-left: 4px;
}

.personal-menu ul li.menu-item {
  margin-top: 16px;
  white-space: nowrap;
}

.personal-menu ul li.menu-item:first-child {
  margin-top: 0;
}
.personal-menu ul li.menu-item #affiliateList{
  width: 210px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}

.menu-link:before {
  position: absolute;
  content: "";
  width: 3px;
  height: 0;
  top: 50%;
  transform: translateY(-50%);
  left: -3px;
  background: #FF6E20;
  transition: all .5s;
}

.balance-label img {
  display: block;
  width: 24px;
}


.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-icon img {
  width: 100%;
  height: 100%;
}
.menu-item .affiliateEarn{
  color: #FF6E20;
}

.menu-item b {
  width: 30px;
  line-height: 30px;
  background: #FF6E20;
  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%;
}

.userBalance {
  background: #fff;
  padding: 24px;
  margin-bottom: 18px;
  border-radius: 4px;
  border: 1.5px solid #F5F5F5;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}

.userBalance .vipAccount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.userBalance .vipAccount .rankLogo {
  height: 48px;
}

.userBalance .vipAccount .pointsAccount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 32px;
  line-height: 40px;
  color: #000000;
  font-weight: 900;
}

.userBalance .vipAccount .pointsAccount .balanceLabel {
  margin-right: 12px;
}

.userBalance h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 900;
  font-size: 32px;
  line-height: 40px;
  color: #000000;
  margin-bottom: 12px;
}

.userBalance h2 .accountBalance {
  display: flex;
  align-items: center;
  gap: 4px;
}

.userBalance h2 span {
  font-size: 32px;
  line-height: 32px;
}

.userBalance .currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  line-height: 20px;
  color: #666666;
}


.userBalance.vip2 .vipAccount .pointsAccount {
  color: #FFFFFF;
}

.userBalance.vip2 .vipAccount .pointsAccount svg path {
  fill: #FFFFFF
}

.userBalance.vip2 h2 {
  color: #FFFFFF;
}

.userBalance.vip2 h2 .accountBalance svg path {
  stroke: #FFFFFF;
}
.userBalance.vip2 h2 .accountBalance svg path:last-child {
  fill: #FFFFFF;
}
.userBalance.vip2 .currency {
  color: #FFFFFF;
}



.userBalance.vip3 .vipAccount .pointsAccount {
  color: #FFFFFF;
}

.userBalance.vip3 .vipAccount .pointsAccount svg path {
  fill: #FFFFFF
}

.userBalance.vip3 h2 {
  color: #FFFFFF;
}

.userBalance.vip3 h2 .accountBalance svg path {
  stroke: #FFFFFF;
}
.userBalance.vip3 h2 .accountBalance svg path:last-child {
  fill: #FFFFFF;
}
.userBalance.vip3 .currency {
  color: #F8DFB8;
}





.userBalance.vip4 .vipAccount .pointsAccount {
  color: #F8DFB8;
}

.userBalance.vip4 .vipAccount .pointsAccount svg path {
  fill: #F8DFB8
}

.userBalance.vip4 h2 {
  color: #F8DFB8;
}

.userBalance.vip4 h2 .accountBalance svg path {
  stroke: #F8DFB8;
}
.userBalance.vip4 h2 .accountBalance svg path:last-child {
  fill: #F8DFB8;
}
.userBalance.vip4 .currency {
  color: #F8DFB8;
}


.userBalance.vip5 .vipAccount .pointsAccount {
  color: #FFC170;
}

.userBalance.vip5 .vipAccount .pointsAccount svg path {
  fill: #FFC170
}

.userBalance.vip5 h2 {
  color: #FFC170;
}

.userBalance.vip5 h2 .accountBalance svg path {
  stroke: #FFC170;
}
.userBalance.vip5 h2 .accountBalance svg path:last-child {
  fill: #FFC170;
}
.userBalance.vip5 .currency {
  color: #FFC170;
}




@media (max-width: 950px) {
  .userBalance {
    padding: .24rem;
    margin-bottom: .24rem;
    border: none;
    border-radius: 8px;
  }

  .userBalance .vipAccount {
    margin-bottom: .28rem;
  }

  .userBalance .vipAccount .rankLogo {
    height: .46rem;
  }

  .userBalance .vipAccount .pointsAccount {
    gap: .08rem;
    font-size: .32rem;
    line-height: .4rem;
  }

  .userBalance .vipAccount .pointsAccount svg {
    width: .4rem;
    height: .4rem;
  }

  .userBalance h2 {
    font-size: .32rem;
    line-height: .4rem;
    margin-bottom: .16rem;
  }

  .userBalance h2 .accountBalance {
    gap: 0.04rem;
  }

  .userBalance h2 .accountBalance svg {
    width: .4rem;
    height: .4rem;
  }

  .userBalance h2 span {
    font-size: .48rem;
    line-height: .48rem;
  }

  .userBalance .currency {
    font-size: .2rem;
    line-height: .4rem;
  }

  .sidebar-left {
    display: none;
  }

  .close-bottom {
    top: .345rem;
    right: .345rem;
    width: .32rem;
    height: .32rem;
    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, .6);
    z-index: 99;
  }

  .inline-link-grid {
    gap: .06rem;
  }

  .pop-up-windowa {
    width: 100%;
    background: #ffff;
    top: auto;
    right: auto;
    border-radius: 8px 8px 0 0;
    max-height: calc(100vh - 3rem);
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120%;
    padding: 0 .32rem .32rem .32rem;
  }

  .carta-left {
    width: 1.88rem;
  }

  .carta-right {
    width: calc(100% - 2.04rem);
  }

  .my_protocol_a .input_agreement_protocol+span {
    width: .36rem;
    height: .36rem;
  }

  .cart-top li .my_protocol_a .input_agreement_protocol+span {
    top: .57rem;
  }

  .carta-left img {
    width: 1.5rem;
  }

  .carta-right .title-flex {
    gap: .3rem;
  }

  .carta-right h3 {
    font-size: .28rem;
    line-height: .34rem;
  }

  .carta-right .title-flex img {
    width: .4rem;
    height: .4rem;
  }

  .carta-right p {
    font-size: .24rem;
    line-height: .27rem;
    margin: .16rem 0;
  }

  .carta-right h4 {
    font-size: .28rem;
    line-height: .34rem;
  }

  .quantity-control_a {
    width: 1.98rem;
  }

  .decrease-btn {
    width: .44rem;
    height: .44rem;
    font-size: .32rem;
  }

  .increase-btn {
    width: .44rem;
    height: .44rem;
    font-size: .32rem;
  }

  .quantity-input {
    width: .62rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .2rem;
  }

  .pop-top h2 {
    height: .93rem;
    line-height: .93rem;
    margin-bottom: 0;
    text-align: center;
    font-size: .32rem;
  }

  .cart-t {
    padding: .24rem 0 0;
  }

  .cart-t h3 {
    font-size: .28rem;
    line-height: .34rem;
    gap: .2rem;
    padding-left: 0;
  }

  .cart-t h3 img {
    width: .4rem;
  }

  .cart-top {
    padding: 0;
    margin-top: .1rem;
  }

  .cart-top li {
    padding: .12rem 0;
  }

  .pop-up-windowa .pop-top .popbox {
    border-radius: 0;
    border-bottom: 0.02rem solid #DFDFDF;
    margin: 0;
    padding-bottom: .24rem;
  }

  .cart-bottom {
    height: .94rem;
    padding: 0 .14rem 0 .38rem;
  }

  .Checkout-buttom {
    padding: 0 .39rem;
    height: .62rem;
    border: 0.03rem solid #EE7115;
    font-size: .28rem;
  }

  .cart-bottom h3 span {
    font-size: .28rem;
  }

  .Total-Price {
    font-size: .28rem;
    margin: 0;
  }

  .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;
  }

  .user-profile {
    gap: .24rem;
  }

  .avatar-large {
    width: 1.1rem;
    height: 1.1rem;
  }

  .user-id {
    font-size: .32rem;
    line-height: .4rem;
    margin-bottom: .1rem;
  }

  .vip-badge {
    height: .48rem;
  }

  .balance-info {
    padding: 0;
    border: none;
    gap: 0;
    flex-direction: row;
    padding-top: .24rem;
    height: .64rem;
    border-top: #F4F7F9 0.02rem solid;
  }

  .balance-item {
    width: 50%;
    height: 100%;
  }

  .balance-info .balance-item:nth-child(1) {
    display: none;
  }

  .balance-info .balance-item:nth-child(3) {
    display: block;
  }

  .balance-info .balance-item a {
    height: 100%;
    justify-content: center;
    gap: .16rem;
    font-size: .32rem;
  }

  .balance-info .balance-item .balance-label {
    gap: .04rem;
  }

  .balance-info .balance-item:nth-child(2) a .balance-label {
    margin-right: 0;
  }

  .balance-info .balance-item:nth-child(2) {
    border-right: #F4F7F9 0.02rem solid;
  }

  .balance-amount {
    padding: 0;
    margin: 0;
    font-size: .3rem;
  }

  .balance-label img {
    width: .32rem;
  }


  .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;
}

/*
@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: #F4F7F9;
  border: 1px solid #F4F7F9;
  border-bottom: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: all .1s;
  position: relative;
  z-index: 10;
}



.custom-select__arrow {
  width: 16px;
  height: 16px;
  stroke: #6D6A6A;
  transition: all .2s;
}

.custom-select__arrow.active {
  transform: rotate(180deg);
}


.custom-select__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 9;
  transition: all .1s;
  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--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;
}




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

  .custom-select__arrow {
    width: .48rem;
    height: .48rem;
  }

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

  .breadcrumb {
    display: flex;
    align-items: center;
    height: .78rem;
    padding: 0 0 0 .32rem;
  }

  h3 {
    font-size: 0.24rem;
  }

  .breadcrumb h4 {
    font-size: .20rem;
    line-height: .24rem;
  }

  .breadcrumb a {
    font-size: .20rem;
    line-height: .24rem;
  }

  .breadcrumb img {
    width: .24rem;
    height: .24rem;
    margin-right: .08rem;
  }

  .breadcrumb>span {
    width: .24rem;
    height: .24rem;
    margin: 0 .08rem;
  }

  .breadcrumb h2 {
    font-size: .20rem;
    line-height: .24rem;
  }

  .breadcrumb h2.cur a {
    font-size: .20rem;
    line-height: .24rem;
  }
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
  .Login-Instructions h4 a:hover {
    text-decoration: underline;
  }

  .Login-Instructions .login-policy-text a:hover {
    text-decoration: underline;
  }

  .Login-Instructions span a:hover {
    text-decoration: underline;
  }

  .breadcrumb a:hover {
    font-weight: 700;
    color: #000103;
  }

  .pagination .prev:hover b {
    background-image: url(https://static.buffhub.com/buffhub/images/pagination/left1.svg);
  }

  .pagination .next:hover b {
    background-image: url(https://static.buffhub.com/buffhub/images/pagination/right1.svg);
  }

  .pagination a.on:hover,
  .pagination a.ellipsis:hover,
  .pagination .prev:hover,
  .pagination .next:hover {
    background: #F4F7F9;
    color: #999999;
  }

  .menu-link:hover {
    font-weight: bold;
    background: #FFF2ED;
  }

  .menu-link:hover:before {
    height: 100%;
  }

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

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


  #bottomPayMethod:hover .bottomPayMethod-track {
    animation-play-state: paused;
  }

}
@charset "utf-8";

#chat-widget-container {
    z-index: 98 !important;
}

.header {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 98;
    transition: top .3s, margin-bottom .3s;
}

.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: 48px;
    height: 48px;
    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: 48px;
    height: 48px;
    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 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;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .subBox dl.scrollable-list::-webkit-scrollbar-thumb:hover {
        background: rgba(200, 200, 200, 0.7);
    }

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


.ico1 {
    display: inline-block;
    color: #fff;
    background: url("https://static.buffhub.com/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("https://static.buffhub.com/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("https://static.buffhub.com/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;
}

.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 img {
    transition: all .5s;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .search-result-list li.list-item:hover {
        background: #f5f5f5;
    }

    .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: 8px;
    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: 8px;
    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: 8px;
}

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

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


.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: 8px;
}

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

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .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-button .badge {
    display: none;
}

.icon-button .badge.show {
    display: flex;
}

.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: #E13B40;
    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:focus-within .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .user-menu:hover .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: 4px;
    -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: 8px;
    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: 8px;
    color: #000000;
    font-size: 14px;
    line-height: 1.2;
}


/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .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;
    overflow: hidden;
    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("https://static.buffhub.com/buffhub/images/paymentModelLeftBg.png") no-repeat;
    padding: 45px 0 0 40px;
    background-size: 100% auto;
}

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



.text-box ul {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 0 12px;
}

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

.text-box li:first-child {
    border-top: none;
}

.text-box li .text-content {
    border: none;
    border-radius: 0;
}

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

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

.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;
}

.uid-input-wrapper {
    margin-right: .08rem;
}

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

.uid-verify-tip {
    margin-top: 6px;
    font-size: 16px;
    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: 40px;
}

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


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

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

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

.text-input2 {
    width: 100%;
    height: 52px;
    line-height: 52px;
    font-size: 12px;
    padding-left: 38px;
    background: url("https://static.buffhub.com/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;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .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: 441px;
    margin: 0 auto;
    position: relative;
}

.txtCont {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-right: 40px;
    scrollbar-width: thin;
    scrollbar-color: #EE7115 #E5E5E5;
}

.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: 13px 24px;
    border-radius: 8px;
    border: 1px solid #D9D9D9;
    background: #fff;
    align-items: center;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .sele a:hover {
        border: 1px solid #EE7115;
    }
}


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

.sele_c {
    width: 200px;
    text-align: center;
}

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

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

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

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

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

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

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

.imgtextleft {
    flex-shrink: 0;
    width: 84px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}

.imgtextleft img {
    width: 100%;
}

.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;
    align-items: center;
    gap: 10px;
}

.btn-a {
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    background: #EE7115;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.btn-b {
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    background: #FFC79E;
    border-radius: 4px;
    color: #6D6A6A;
    font-size: 14px;
    text-decoration: line-through;
}

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



.imgtextright {
    flex: 1;
}

.PaymentModel-img.multiple .imgtextright {
    padding-bottom: 16px;
}


.imgtextright h2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

.imgtextright p {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    height: 28px;
}

.quantity-text {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding-left: 10px;
}



.PaymentModel-img .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 26px;
    line-height: 6px;
    text-align: left;
    padding-left: 92px;
}

.PaymentModel-img .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    opacity: 1;
    background: #FFC79E;
    border-radius: 99px;
    transition: width 0.2s ease;
}

.PaymentModel-img .swiper-pagination-bullet-active {
    width: 21px;
    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;
    line-height: 34px;
    color: #000000;
    margin-bottom: 17px;
}

.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;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .Summary-top a:hover {
        border: 1px solid #EE7115;
        color: #EE7115;
    }
}


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

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

.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: 39px;
}

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

.sunnary-bootno b {
    font-weight: 900;
    font-size: 20px;
    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: 7px;
    position: relative;
}

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

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .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 .balanceCheckbox {
    background-image: url("https://static.buffhub.com/buffhub/images/pic62.svg");
    background-size: 100% 100%;
    border: none;
}


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

.coupon-botton {
    position: absolute;
    cursor: pointer;
    background: url("https://static.buffhub.com/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: #F5F5F5;
    cursor: not-allowed;
}

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

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

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

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

#balance::-moz-placeholder {
    color: #FFFFFF;
}

#balance::placeholder {
    color: #FFFFFF;
}


.Summary-top .balanceCheckbox {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
}

.doubt {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.doubtWhite {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    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: #F5F5F5;
    cursor: not-allowed;
}

.Order {
    position: fixed;
    z-index: 110;
    border-radius: 15px;
    background: #fff;
    width: 518px;
    padding: 36px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.Order .close-bottom {
    top: 46.5px;
}

.Order-title {
    font-size: 32px;
    line-height: 45px;
    color: #000000;
    padding-bottom: 24px;
}

.Order-title h2 {
    font-weight: 900;
    font-size: 32px;
    line-height: 45px;
    color: #000000;
}

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

.list1 p {
    font-size: 20px;
    color: #6D6A6A;
    line-height: 24px;
    margin-bottom: 4px;
}

.Order-input2 {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border-radius: 4px;
    background: #F4F7F9;
    border: 0.6px solid #F5F5F5;
    display: flex;
    align-items: center;
    font-size: 20px;
}


.Order-input3 {
    width: 100%;
    height: 42px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 21px;
    border: 1px solid #EE7115;
    background: url("https://static.buffhub.com/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: 9px;
}

.list1 .custom-dropdown-header {
    height: 60px;
}

.list1 .custom-dropdown-option {
    height: 60px;
}


.list1 .nickname {
    font-size: 16px;
    line-height: 19px;
    color: #999999;
}

.order-button {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    line-height: 60px;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #EE7115;
    text-align: center;
    cursor: pointer;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .order-button:hover {
        opacity: .8;
    }
}


.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 #F5F5F5;
    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: 110;
    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:before {
    width: 37px;
}


/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .coupons-title li a:hover {
        font-weight: 900;
    }

    .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;
}



.coupon-img {
    width: 100%;
    aspect-ratio: 478 / 144;
}

.coupon-img img {
    width: 100%;
    border-radius: 8px;
}
.coupon-img .couponBgSelected{
    display: none;
}
.coupon-text-a {
    position: absolute;
    left: 0.83682008368201%;
    top: 2.77777777777778%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-right: 10.87866108786611%;
}
.coupon-left {
    width: auto;
    flex: 1;
    padding: 12px 0 12px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

.coupon-left h2 {
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    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: 16px;
    line-height: 16px;
    color: #000000;
}
.coupon-right {
    width: 31.69%;
    aspect-ratio: 135 / 100;
}
.coupon-right img {
    width: 100%;
}

.title-bottom {
    width: 89.12133891213389%;
    height: 25%;
    display: flex;
    align-items: center;
    position: absolute;
    font-size: 16px;
    color: #666666;
    bottom: 2.77777777777778%;
    border-top: 1.5px dashed #EE7115;
    left: 0.83682008368201%;
    padding-left: 20px;
}
.couponbox.selected .couponBg{
   display: none;
}
.couponbox.selected .couponBgSelected{
   display: block;
}
.couponbox.selected .title-bottom{
    border-top-color: #FF9E69;
}
.couponbox.selected .coupon-left h2{
    color: #FF9E69;
}

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

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

.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: 110;
    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 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;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .paymen-text dl dt a:hover {
        color: #FF5E17;
    }

    .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: 110;
    border-radius: 8px;
    background: url("https://static.buffhub.com/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 #F5F5F5;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
}

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

.increase {
    width: 30px;
    border: none;
    border-left: 1px solid #F5F5F5;
    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
}

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

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

@media (min-width: 950px) {
    .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 {
        height: .59rem;
    }

    .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('https://static.buffhub.com/buffhub/images/hot-mobile.png');
        /* 如果直接使用content属性，需要隐藏src */
        height: 0;
        width: auto;
        min-height: 16px;
        /* 设置最小高度 */
        display: none;
    }

    .subBox-icon.all {
        content: url('https://static.buffhub.com/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("https://static.buffhub.com/buffhub/images/d1.png") no-repeat center center;
        width: .4rem;
        height: .3rem;
        background-size: 100% 100%;
    }

    .dhbtn.on {
        position: absolute;
        background: url("https://static.buffhub.com/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, .6);
        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: .18rem;
        line-height: .22rem;
        padding: 0;
        gap: .18rem;
    }

    .Gametup a img {
        width: .64rem;
        height: .64rem;
    }

    .Gametup a::before {
        width: .64rem;
        height: .64rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .Gametup a:hover::before {
        width: .64rem;
    }


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

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

    .PaymentModel {
        display: block;
        height: auto;
        max-width: 100%;
        z-index: 100;
        padding: 0;
        background: #FFFFFF;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translate(-50%, 0%);
        overflow-y: auto;
        border-radius: 8px 8px 0 0;
        max-height: 78vh;
    }

    .PaymentModel .Summary {
        display: none;
    }

    .PaymentModel .orderInformation {
        background: #FFFFFF;
        height: .95rem;
        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 .32rem .24rem .3rem;
    }

    .img-text {
        padding-left: .02rem;
        gap: .17rem;
    }

    .PaymentModel-img .mySwiper {
        padding-bottom: .24rem;
    }

    .PaymentModel-img .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
        line-height: 0.13rem;
        bottom: 0.32rem;
        text-align: left;
        padding-left: 1.36rem;
    }

    .PaymentModel-img .swiper-pagination-bullet {
        width: .13rem;
        height: .13rem;
    }

    .PaymentModel-img .swiper-pagination-bullet-active {
        width: .36rem;
    }

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

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

    }

    .text-box ul {
        border: 0.02rem solid #D9D9D9;
        padding: 0 .24rem;
    }

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

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

    .uid-label {
        font-size: .2rem;
    }

    .server-value {
        font-size: .24rem;
    }

    .uid-value {
        font-size: .2rem;
    }

    .arrow-icon {
        width: .42rem;
        height: .42rem;
    }

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

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

    .text-input2 {
        height: 1rem;
        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: 0 .32rem .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;
    }

    #maximum,
    #coupone,
    #points,
    #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;
    }
    
    
    .Summary-top .balanceCheckbox{
        width: .28rem;
        height: .28rem;
        right: .2rem;
    }
    .doubt{
        width: .35rem;
        height: .35rem;
        right: .155rem;
    }
    
    .sele {
        background: #fff;
        padding: 0 .32rem .24rem .32rem;
        width: 100%;
    }

    .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;
        margin-bottom: .16rem;
    }

    .imgtextright p {
        font-size: .28rem;
        line-height: .28rem;
        height: .28rem;
    }

    .quantity-text {
        padding-left: .1rem;
        font-size: .20rem;
        line-height: .28rem;
    }

    .imgtextright h3 {
        gap: .12rem;
    }

    .btn-a {
        font-size: .2rem;
        height: .32rem;
        padding: 0 0.06rem;
    }

    .btn-b {
        font-size: .2rem;
        height: .32rem;
        padding: 0 0.06rem;
    }

    .txtCont a {
        padding: .12rem .24rem;
    }

    .txtCont {
        padding-right: 0;
    }

    .gdtCont {
        height: auto;
    }

    .seleft {
        width: calc(100% - 2.6rem);
    }

    .sele li {
        padding-bottom: .16rem;
    }


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

    .sele_c {
        width: 2.6rem;
    }

    .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: .28rem;
    }

    .sele_b h3 {
        font-size: .24rem;
    }

    .sele li.cur .sele_c h3 {
        font-size: .28rem;
        line-height: .39rem;
        margin-bottom: .03rem;
    }

    .imgtextleft {
        border-radius: 8px;
        width: 1.2rem;
        border: .015rem solid #D9D9D9;
    }

    .imgtextleft img {
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 100%;
    }


    .PaymentModel-img.multiple .imgtextright {
        padding-bottom: .28rem;
    }

    .sunnary-bottom {
        font-size: .24rem;
        border: 0;
    }

    .PaymentDetail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -100%;
        background: #fff;
        z-index: 101;
        border-radius: .25rem .25rem 0 0;
        transition: bottom 0.3s ease;
    }

    .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;
        align-items: center;
        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 {
        cursor: pointer;
        color: #fff;
        background: #EE7115;
        width: 2.02rem;
        height: .8rem;
        border-radius: 8px;
        font-size: .36rem;
        font-weight: 700;
    }

    .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-overlay .Order {
        padding: .32rem .32rem 3rem .32rem;
    }

    .Order-title h2 {
        font-size: .36rem;
        line-height: .5rem;
    }

    .Order .close-bottom {
        width: .30rem;
        height: .30rem;
        top: .40rem;
        right: .30rem;
    }

    .list1 p {
        font-size: .24rem;
        line-height: .29rem;
        margin-bottom: .08rem;
    }

    .Order-input2 {
        height: .7rem;
        line-height: .7rem;
        font-size: .24rem;
    }

    .Order-title {
        font-size: .36rem;
        line-height: .5rem;
        padding-bottom: .32rem;
    }

    .payment-pending .Payment {
        width: 92%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

    .uid-verify-tip {
        margin-top: .08rem;
        font-size: .2rem;
        line-height: .24rem;
    }

    .list1 {
        padding-bottom: 0;
    }

    .list1 li {
        padding-bottom: .24rem;
    }

    .list1 .nickname {
        font-size: .2rem;
        line-height: .24rem;
    }

    .order-button {
        height: .7rem;
        line-height: .7rem;
        font-size: .26rem;
    }

    .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: 8px; 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;
    }
    .coupon-text-a .coupon-left {
        padding: .16rem 0 .16rem .41rem;
    }

    .coupon-left h2 {
        font-size: .42rem;
        line-height: .42rem;
    }

    .coupon-left h3 {
        margin: .08rem 0 .16rem 0;
        font-size: .20rem;
        line-height: .20rem;
    }

    .coupon-left h4 {
        font-size: .24rem;
        line-height: .24rem;
    }

    .title-bottom {
        font-size: .24rem;
    }
}

/* @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-cancel {
    background: #f5f5f5;
    color: #1D1D1D;
    border: 1px solid #ddd;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .modal-confirm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 94, 23, 0.3);
    }

    .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(https://static.buffhub.com/buffhub/images/a23.png);
    width: 21px;
    height: 22px;
    background-size: 100% 100%;
}

.pic2 {
    background: url(https://static.buffhub.com/buffhub/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 .promotion {
    display: flex;
    align-items: center;
    gap: 62px;
}

.footer-Bottom .social {
    display: flex;
    align-items: center;
    gap: 27px;
}

.footer-Bottom .social img {
    width: 24px;
    height: 24px;
}

.footer-Bottom .downloadTheApp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-Bottom .downloadTheApp img {
    width: 101px;
    height: 30px;
}

.footer-Left li img {
    transition: all .3s;
}


.footer-Left .email,
.footer-Left .telephone,
.footer-Left .address {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 4px;
}

.footer-Left .address {
    align-items: flex-start;
}

.footer-Left .email>img,
.footer-Left .telephone>img,
.footer-Left .address>img {
    width: 16px;
    height: 16px;
}

.footer-Left .address>img {
    margin-top: 2px;
}

.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 .3s;
    display: block;
    line-height: 23px;
    font-size: 18px;
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.footer-Right dt:first-child a {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}



.footer-Right dt a img {
    width: 12px;
    height: 14px;
    display: block;
}

.footer-Right .asSeenIn dt a img {
    width: 20px;
    height: 20px;
}


.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;
}


.footer-background .move {
    display: none;
}

/* PC只在非触摸设备应用 hover */
@media (hover: hover) and (pointer: fine) {
    .footer-Left li a:hover img {
        opacity: .6;
    }

    .footer-Right dt a:hover {
        color: #FFF;
    }
}

@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 .32rem;
        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:first-child a {
        gap: .08rem;
    }

    .footer-Right dt a img {
        width: .24rem;
        height: .28rem;
    }

    .footer-Right .asSeenIn dt a img {
        width: .32rem;
        height: .32rem;
    }

    .footer-Right dt a {
        font-size: .28rem;
        line-height: .32rem;
        margin-top: .16rem;
        gap: .08rem;
    }

    .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);
        height: .72rem;
        position: relative;
    }

    .phone-nav ul li a {
        display: block;
    }

    .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 .shoppingBg,
    .phone-nav ul li .shoppingCart {
        height: 1.4rem;
        position: absolute;
        top: -.71rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .phone-nav ul li .shoppingImg {
        width: 1.1rem;
        height: 1.81rem;
        position: absolute;
        top: -.71rem;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        padding-top: .15rem;
        border-radius: 70px 70px 0 0;
    }

    .phone-nav ul li .shoppingImg img {
        width: 100%;
        height: auto;
        display: block;
    }

    .phone-nav ul li .shoppingImg .shoppingImgBox {
        position: relative;
    }

    .phone-nav ul li .shoppingImg .shoppingImgBox .shoppingBgbox {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: transform 0.3s;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .56rem;
    }

    .phone-nav ul li .shoppingImg .shoppingImgBox .shopping2 {
        position: absolute;
        top: 1.66rem;
        left: 0;
        z-index: 2;
        transition: transform 0.3s;
    }


    .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;
        align-items: flex-start;
    }

    .footer-Bottom .email>img,
    .footer-Bottom .telephone>img,
    .footer-Bottom .address>img {
        width: .32rem;
        height: .32rem;
    }



    .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 .downloadTheApp {
        gap: .21rem;
        margin: .42rem 0;
    }

    .footer-Bottom .downloadTheApp img {
        width: 2.94rem;
        height: .88rem;
    }

    .footer-Bottom .social {
        gap: .46rem;
        justify-content: center;
        margin-bottom: .42rem;
    }

    .footer-Bottom .social img {
        width: .48rem;
        height: .48rem;
    }
}
.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: #F4F7F9;
    border: 1px solid #F4F7F9;
    border-bottom: 0;
    cursor: pointer;
    font-size: 14px;
}

.custom-dropdown.open .custom-dropdown-header {
    border: 1px solid #EE7115;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}


.custom-dropdown-value {
    color: #6D6A6A;
    font-size: 20px;
}

.custom-dropdown-arrow {
    transition: transform 0.3s;
    display: block;
    width: 32px;
    height: 32px;
}

.custom-dropdown-arrow svg {
    width: 100%;
    height: 100%;
}

.custom-dropdown.open .custom-dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 242px;
    background: #fff;
    border: 1px solid #EE7115;
    border-top: 0;
    z-index: 88;
    display: none;
    overflow-y: auto;
    transition: all .1s;
}


.custom-dropdown.open .custom-dropdown-list {
    display: block;
}

.custom-dropdown-option {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 20px;
    color: #000000;
}

.custom-dropdown-option[data-selected="true"] {
    background-color: #EE7115;
    color: #fff;
}

/* pc显示 */
@media (hover: hover) and (pointer: fine) {
    .custom-dropdown-header:hover {
        background: #F4F7F9;
    }

    .custom-dropdown-option:hover {
        background-color: #EE7115;
        color: #fff;
    }
}

@media (max-width: 950px) {

    .custom-dropdown-header,
    .list1 .custom-dropdown-header {
        height: .7rem;
        line-height: .7rem;
        font-size: .24rem;
    }

    .custom-dropdown-value {
        font-size: .20rem;
        height: 100%;
    }

    .custom-dropdown-arrow {
        width: .48rem;
        height: .48rem;
    }

    .custom-dropdown-arrow svg {
        width: 100%;
        height: 100%;
    }

    .custom-dropdown-list {
        max-height: 2.9rem;
    }

    .custom-dropdown-option,
    .list1 .custom-dropdown-option {
        height: .7rem;
        padding: 0 .23rem;
        font-size: .2rem;
    }
}

/* 线行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;
    white-space: nowrap;  /* 强制文字在一行显示 */
}

.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;
    }
}

/* 我们页面线行tab切换 */
.tabSwitchSeposit {
    display: flex;
    align-items: center;
    gap: 40px;
}

.tabSwitchSeposit li {
    display: block;
    font-size: 16px;
    color: #000000;
    position: relative;
    line-height: 24px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;  /* 强制文字在一行显示 */
}

.tabSwitchSeposit li:before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #EE7115;
    transition: all .3s;
    width: 44px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
}

.tabSwitchSeposit li.active{
    color: #EE7115 !important;
}
.tabSwitchSeposit li.active:before {
    transform: translateX(-50%) scaleX(1);
}
/* pc显示 */
@media (hover: hover) and (pointer: fine) {
    .tabSwitchSeposit li:hover{
        color: #666666;
    }
}
/* 线行tab切换 移动端*/
@media (max-width: 950px) {
    .tabSwitchSeposit {
        gap: .38rem;
    }

    .tabSwitchSeposit li {
        line-height: .24rem;
        font-size: .2rem;
    }

    .tabSwitchSeposit li.active:before {
        border-width: 0.04rem;
        bottom: -.08rem;
    }
}

/* 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;
}

/* 弹出框样式 */
.popup-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
}

.popup-overlay.baseLang {
    width: 567px;
    top: 80px;
    bottom: auto;
    left: auto;
    right: 66px;
    border-radius: 8px;
}

.popup-overlay .popup {
    background-color: white;
    border-radius: 8px;
    padding: 24px;
    width: 567px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
}

.popup-overlay .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.popup-overlay .popup-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #000000;
}

.popup-overlay .popup-close {
    font-size: 32px;
    height: 24px;
    line-height: 19px;
    cursor: pointer;
    color: #000000;
}

.popup-overlay .popup-content {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 38px;
    color: #000000;
    word-break: break-word;
    overflow-wrap: break-word;
}



.popup-overlay .popup-footer {
    display: flex;
    gap: 25px;
}

.popup-overlay .btn {
    flex: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-overlay .btn-secondary {
    background: #FFFFFF;
    border: 1px solid #666666;
    color: #666666;
}

.popup-overlay .btn-primary {
    background-color: #EE7115;
    color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
    .popup-overlay .btn:hover {
        opacity: 0.8;
    }
}

@media (max-width: 950px) {
    .popup-overlay {
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .popup-overlay.baseLang {
        width: 100%;
        height: 1.16rem;
        top: 0;
        bottom: auto;
        left: auto;
        right: 0;
    }

    .popup-overlay .popup {
        padding: .24rem;
        width: 6.86rem;
        box-shadow: none;
    }

    .popup-overlay.baseLang .popup {
        width: 100%;
        height: 100%;
        border-radius: 0;
        background: #EE7115;
        display: flex;
        align-items: center;
        padding-right: 1.12rem;
        position: relative;
        gap: .32rem;
        padding-left: 0;
    }

    .popup-overlay .popup-header {
        margin-bottom: .16rem;
    }

    .popup-overlay .popup-title {
        font-size: .32rem;
        line-height: .32rem;
    }

    .popup-overlay.baseLang .popup-header {
        width: 0;
    }

    .popup-overlay.baseLang .popup-title {
        display: none;
    }

    .popup-overlay .popup-close {
        font-size: .48rem;
        height: .32rem;
        line-height: .21rem;
    }

    .popup-overlay.baseLang .popup-close {
        font-size: .6rem;
        height: .36rem;
        line-height: .21rem;
        position: absolute;
        top: .4rem;
        right: .4rem;
        color: #FFFFFF;
        font-weight: bold;
    }

    .popup-overlay .popup-content {
        font-size: .2rem;
        line-height: .38rem;
        margin-bottom: .16rem;
    }

    .popup-overlay .popup-content span {
        color: #FFFFFF !important;
    }

    .popup-overlay.baseLang .popup-content {
        margin-bottom: 0;
        color: #FFFFFF;
        flex: 1;
    }


    .popup-overlay .popup-footer {
        gap: .25rem;
    }

    .popup-overlay .btn {
        font-size: .24rem;
        height: .6rem;
    }

    .popup-overlay.baseLang .btn-secondary {
        display: none;
    }

    .popup-overlay.baseLang .btn-primary {
        background-color: #FFFFFF;
        color: #EE7115;
        padding: .37rem;
    }
}

/* 优惠卷弹窗 */

.envelope-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
}

.envelope-overlay .envelope-container {
    position: relative;
    width: 625px;
    height: 325px;
    margin: 0 auto;
}

.envelope-overlay .envelope-box {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: center top;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.envelope-overlay .envelope-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 214px;
    /* background: url(https://static.buffhub.com/buffhub/images/toolbar.png); */
    transform-origin: top center;
    transition: all 0.8s ease-out;
    background: url(https://static.buffhub.com/buffhub/images/coupon/envelope-top.png);
    background-size: 100% 100%;
}

.envelope-overlay .envelope-container.popup .envelope-top {
    transform: rotateX(180deg);
}

.envelope-overlay .envelope-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c06c84;
    z-index: 2;
    background: url(https://static.buffhub.com/buffhub/images/coupon/envelope-front.png);
    background-size: 100% 100%;
}

.envelope-overlay .envelope-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 625px;
    height: 625px;
    background: url(https://static.buffhub.com/buffhub/images/coupon/circle.png);
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease-out;
    opacity: 1;
}

.envelope-overlay .envelope-container.popup .envelope-circle {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.5);

}

.envelope-overlay .envelope-content {
    position: absolute;
    left: 50%;
    bottom: 87px;
    transition: all 0.8s ease-out;
    transform: translate(-50%, 45px);
    opacity: 0;
}

.envelope-overlay .envelope-container.expanded .envelope-content {
    transform: translate(-50%);
    opacity: 1;
    z-index: 9;
}

/* 弹窗动画 */
@keyframes popup {
    0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }

    50% {
        transform: scale(1.05) translateY(10px);
        opacity: 1;
    }

    70% {
        transform: scale(0.95) translateY(-5px);
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.envelope-overlay .envelope-container.popup .envelope-box {
    animation: popup 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.envelope-overlay .content-text {
    background: rgba(254, 247, 240, 1);
    border: 1px solid rgba(245, 222, 187, 1);
    padding: 30px 30px 96px 30px;
    position: relative;
}

.envelope-overlay .couponbox {
    cursor: pointer;
    position: relative;
    width: 478px;
    height: 144px;
    margin-bottom: 18px;
}

.envelope-overlay .coupon-img {
    width: 100%;
    height: 100%;
}

.envelope-overlay .coupon-img img {
    border-radius: 8px;
    width: 100%;
}

.envelope-overlay .coupon-text-a {
    display: flex;
    justify-content: space-between;
    left: .83682008368201%;
    padding-right: 10.87866108786611%;
    position: absolute;
    top: 2.77777777777778%;
    width: 100%;
    min-height: 100px;
}

.envelope-overlay .coupon-left {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0 12px 20px;
    width: auto;
}


.envelope-overlay .coupon-left .couponName {
    color: #ee7115;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
}

.envelope-overlay .coupon-left .couponDesc {
    color: #000;
    font-size: 16px;
    line-height: 16px;
}

.envelope-overlay .coupon-right {
    width: 31.69%;
}

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

.envelope-overlay .title-bottom {
    align-items: center;
    border-top: 1.5px dashed #ee7115;
    bottom: 2.77777777777778%;
    color: #666;
    display: flex;
    font-size: 16px;
    height: 25%;
    left: .83682008368201%;
    padding-left: 20px;
    position: absolute;
    width: 89.1213389121339%;
}

.envelope-overlay .countdown-container {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.envelope-overlay .countdown-label {
    font-size: 24px;
    color: #000000;
}

.envelope-overlay .countdown {
    font-weight: bold;
    font-size: 16px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 2px;
}

.envelope-overlay .countdown-digit {
    background-color: #000000;
    color: white;
    width: 20px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.envelope-overlay .collect-coupon-btn {
    display: block;
    width: 558px;
    height: 83px;
    background-color: #FF6E20;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    bottom: 17px;
    background: url(https://static.buffhub.com/buffhub/images/coupon/collect-coupon-btn.png);
    background-size: 100% 100%;
    transform: translateX(-50%);
}

.envelope-overlay .contentBgTop {
    height: 233px;
    aspect-ratio: 693.33 / 233.85;
    position: absolute;
    left: 50%;
    top: -144px;
    background: url(https://static.buffhub.com/buffhub/images/coupon/contentBgTop.png);
    background-size: 100% 100%;
    transform: translateX(-50%);
    z-index: -1;
}

.envelope-overlay .contentBgLeft {
    height: 82.86px;
    aspect-ratio: 95.43 / 82.86;
    position: absolute;
    left: -58.82px;
    bottom: -23.86px;
    background: url(https://static.buffhub.com/buffhub/images/coupon/contentBgLeft.png);
    background-size: 100% 100%;
    z-index: -1;
}

.envelope-overlay .contentBgRight {
    height: 82.86px;
    aspect-ratio: 95.43 / 82.86;
    position: absolute;
    right: -58.82px;
    bottom: -23.86px;
    background: url(https://static.buffhub.com/buffhub/images/coupon/contentBgRight.png);
    background-size: 100% 100%;
    z-index: -1;
}

@media (max-width: 950px) {
    .envelope-overlay .envelope-container {
        width: 6.25rem;
        height: 3.25rem;
    }

    .envelope-overlay .envelope-top {
        height: 2.14rem;
    }

    .envelope-overlay .envelope-circle {
        width: 6.25rem;
        height: 6.25rem;
    }

    .envelope-overlay .envelope-content {
        bottom: .87rem;
        transform: translate(-50%, .45rem);
    }

    .envelope-overlay .content-text {
        padding: .3rem .3rem .96rem .3rem;
    }

    .envelope-overlay .couponbox {
        width: 4.78rem;
        height: 1.44rem;
        margin-bottom: .18rem;
    }

    .envelope-overlay .coupon-left {
        padding: .12rem 0 .12rem .2rem;
    }

    .envelope-overlay .coupon-left .couponName {
        font-size: .24rem;
        line-height: .24rem;
    }

    .envelope-overlay .coupon-left .couponDesc {
        font-size: .16rem;
        line-height: .16rem;
    }

    .envelope-overlay .title-bottom {
        font-size: .16rem;
        padding-left: .2rem;
    }

    .envelope-overlay .countdown-container {
        margin-bottom: .18rem;
        gap: .15rem;
    }

    .envelope-overlay .countdown-label {
        font-size: .24rem;
    }

    .envelope-overlay .countdown {
        font-size: .16rem;
        gap: .02rem;
    }

    .envelope-overlay .countdown-digit {
        width: .2rem;
        height: .28rem;
    }


    .envelope-overlay .collect-coupon-btn {
        display: block;
        width: 5.58rem;
        height: .83rem;
        font-size: .24rem;
        bottom: .17rem;
    }

    .envelope-overlay .contentBgTop {
        height: 2.33rem;
        top: -1.44rem;
    }

    .envelope-overlay .contentBgLeft {
        height: .8286rem;
        left: -.5882rem;
        bottom: -.2386rem;
    }

    .envelope-overlay .contentBgRight {
        height: .8286rem;
        right: -.5882rem;
        bottom: -.2386rem;
    }

    .envelope-overlay .coupon-text-a {
        min-height: 1rem;
    }
}


/* 移动端公共返回头部*/
.toolbar {
    display: none;
}

@media (max-width: 950px) {
    .toolbar {
        height: .88rem;
        padding: 0 .32rem;
        margin: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        margin-bottom: .24rem;
    }

    .toolbar h2 {
        font-size: .32rem;
        cursor: pointer;
        color: #000103;
    }

    .toolbar h4 {
        color: #000000;
        font-size: .32rem;
    }

    .toolbar a {
        position: absolute;
        background: url(https://static.buffhub.com/buffhub/images/toolbar.png);
        width: .48rem;
        height: .48rem;
        left: .32rem;
        top: 50%;
        transform: translateY(-50%);
        background-size: 100% 100%;
    }
}
/*!* 基础css框架（全局） *!*/
/* @import 'bulma'; */
/*!* 自定义css基础框架（全局） *!*/
/* 动画库（全局） */
/* toast提示框（全局） */
/* 购物车样式（全局） */
/* 全部样式（方便使用，未拆分，先全局使用） */
/* 导入load样式 */
/* 轻量js加载样式（全局） */
/* 加載全局的下拉框样式、封装组件样式 */
/*!* 基础css框架（全局） *!*/
/* @import 'bulma'; */
/*!* 自定义css基础框架（全局） *!*/
/* 动画库（全局） */
/* toast提示框（全局） */
/* 购物车样式（全局） */
/* 全部样式（方便使用，未拆分，先全局使用） */
/* 导入load样式 */
/* 轻量js加载样式（全局） */
/* 加載全局的下拉框样式、封装组件样式 */