:root
{
    /* 黑色系列 */
    --color-pure-black: rgba(0, 0, 0, 1);  /* 适用于背景、文字、边框等，提供最深的黑色 */
    --color-deep-black: rgba(26, 26, 26, 1); /* 用于需要略显层次但依然保持深色调的场景，如二级标题、卡片背景等 */
    --color-grayish-black: rgba(56, 56, 56, 1); /* 介于深色与浅色之间的过渡色，适合作为辅助文本、小图标、分割线等 */
    --color-bright-gray-black: rgba(157, 157, 157, 1); /* 接近灰色，用于需要明显区分于深黑但又不至过亮的场合，如提示文字、按钮 hover 状态等 */

    /* 白色系列 */
    --color-bright-white: rgba(255, 255, 255, 1); /* 最亮的纯白，用于背景、文字、边框等，提供最高的亮度和对比度 */
    --color-near-white: rgba(248, 248, 248, 1); /* 略有亮度降低，但视觉上仍然接近白色，适用于需要轻微降低亮度以增加层次感的区域，如卡片背景、边框高亮等 */
    --color-gray-white: rgba(225, 225, 225, 1); /* 带灰调的白，适合作为介于白色与灰色之间的过渡色，如辅助文本、分割线、占位符文本等 */
    --color-pure-gray-white: rgba(194, 194, 194, 1); /* 接近纯灰色，但保留了一定的白色基调，用于需要明显区别于白色但又不至过暗的场合，如禁用状态、辅助提示等 */
    
    --color-decorate-1: rgba(112, 0, 254, 1);
    --color-decorate-2: rgba(255, 0, 0, 1); /* 正红色，不透明 */

    --font-size-13: 0.9286em; /* 13px等于0.9286em */ 
    --font-size-15: 1.0714em; /* 15px等于1.0714em */  
    --font-size-16: 1.1429em; /* 16px等于1.1429em */  
    --font-size-17: 1.2143em; /* 17px等于1.2143em */  
    --font-size-18: 1.2857em; /* 18px等于1.2857em */  
    --font-size-19: 1.3571em; /* 19px等于1.3571em */  
    --font-size-20: 1.4286em; /* 20px等于1.4286em */  
    --font-size-21: 1.5em;    /* 21px等于1.5em */  
    --font-size-22: 1.5714em; /* 22px等于1.5714em */
    --font-size-23: 1.6429em; /* 23px等于1.6429em */
    --font-size-24: 1.7143em; /* 24px等于1.7143em */
    --font-size-26: 1.8571em; /* 26px等于1.8571em */
    --font-size-28: 2.0em;    /* 28px等于2.0em */

    /* 字体间距 */
    --negative-letter-spacing-1: -1px;   
    --negative-letter-spacing-2: -1.5px;
    --negative-letter-spacing-3: -2px;
    --negative-letter-spacing-4: -2.5px;

}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
fieldset,
a img {
    border: none
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    -webkit-appearance: none
}

input[type="submit"],
button {
    cursor: pointer
}

input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border: 0
}

textarea {
    overflow: auto
}

input,
button {
    margin: 0;
    padding: 0;
    border: 0
}

div,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
a:focus {
    outline: none
}

ul,
ol {
    list-style-type: none
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%
}

html {
    box-sizing: border-box
}

*,
*:before,
*:after {
    box-sizing: inherit
}

@font-face {
    font-family: "CircularXX";
    src: url("../../assets/fonts/CircularXX-Regular.woff2") format("woff2"), url("../../assets/fonts/CircularXX-Regular.woff") format("woff");
    font-weight: 400
}

@font-face {
    font-family: "CircularXX";
    src: url("../../assets/fonts/CircularXX-Book.woff2") format("woff2"), url("../../assets/fonts/CircularXX-Book.woff") format("woff");
    font-weight: 450
}

@font-face {
    font-family: "CircularXX";
    src: url("../../assets/fonts/CircularXX-Medium.woff2") format("woff2"), url("../../assets/fonts/CircularXX-Medium.woff") format("woff");
    font-weight: 500
}

body {
    background-color: var(--color-bright-white);
    font-family: "CircularXX", "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC", "STHeiti Light [STXihei]", "STHeiti", "华文细黑", "Source Han Sans CN", "思源黑体", "Microsoft JhengHei", "微软正黑体", "Microsoft Yahei", "微软雅黑", system-ui, "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: -.02em;
    margin: 0 calc((100vw - 100%) * -1) 0 0;
    padding-right: calc(100vw - 100%);
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font-family: "CircularXX", "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC", "STHeiti Light [STXihei]", "STHeiti", "华文细黑", "Source Han Sans CN", "思源黑体", "Microsoft JhengHei", "微软正黑体", "Microsoft Yahei", "微软雅黑", system-ui, "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", Helvetica, sans-serif;
}

button {
    background: none
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--color-pure-black);
}

img {
    display: block;
    max-width: 100%
}

strong {
    font-weight: 500
}


/************************************************************************布局框架*********************************************************************************/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 992px) {
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}
/************************************************************************布局框架 END*********************************************************************************/


@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.eot?v=4..jpg');
    src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4..jpg') format('embedded-opentype'),
         url('/fonts/fontawesome-webfont.woff?v=4..jpg') format('woff'),
         url('/fonts/fontawesome-webfont.ttf?v=4..jpg') format('truetype'),
         url('/fonts/fontawesome-webfont.svg?v=4..jpg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.one__btn {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    color: var(--color-pure-black);
    border: 1px solid var(--color-pure-black);
    border-radius: 32px;
    line-height: 20px;
    -webkit-transition: background .2s, border-color .2s, color .2s;
    transition: background .2s, border-color .2s, color .2s;
}

/* 通用类名方法 */
.hover_shake:hover {
    animation: gentle-shake 0.5s cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

/* 定义次数较少的左右抖动动画 */
@keyframes gentle-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25%, 75% {
        transform: translateX(-1px);
    }
    33.33%, 66.66% {
        transform: translateX(1px);
    }
}

.modal__open,
.session__modal {
    overflow: hidden;
}


/******************提示弹窗*********************/
.alerts {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
    width: 384px;
    min-height: 76px;
    padding: 22px 78px 22px 22px;
    background: #2D68FF;
    border: 2px solid #2D68FF;
    border-radius: 24px;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    /* -webkit-transform-origin: 18px 0;
    transform-origin: 18px 0; */
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, transform .4s;
    transition: opacity .4s, transform .4s, -webkit-transform .4s;
    pointer-events: none;
    cursor: pointer;
}

.alerts:hover svg {
    opacity: 1
}

.alerts.fadeIn {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    pointer-events: all
}

.alerts.error {
    background: #262626;
    border-color: #FF9393
}

.alerts svg {
    position: absolute;
    top: 14px;
    right: 14px;
    fill: #fff;
    opacity: .5;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}


/******************顶部导航*********************/
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    width: auto;
    padding: 24px 0;
    -webkit-transition: background .2s;
    transition: background .2s;
    -webkit-transition: padding .2s;
    transition: padding .2s;
}

.header.scrolled {
    position: fixed;
    background: rgba(245, 245, 245, 0.98);
    padding: 12px 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
}

.nav__box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    position: relative;
}

.logo__box {
    position: relative;
}

.logo {
    min-width: 100px;
    max-height: 30px;
    width: auto;
}

.logo.control{
    margin-right: 12px;
}

.logo.text {
  font-size: var(--font-size-24);
  font-weight: 700;
  margin-right: 12px;
}

.dot__sep {
    display: inline-flex;
    line-height: normal;
}

.dot__sep svg {
    width: 16px;
    height: 16px;
    fill: var(--color-pure-black);
}

.menu-class {
    font-size: 15px;
    margin-left: auto;
    flex: auto;
}

.menu-class .menu-item-class {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.menu-class .menu-item-class .menu-item {
    position: relative;
    white-space: nowrap;
}

.menu-class .menu-item-class .menu-item a {
    font-weight: 450;
    color: var(--color-pure-black);
    margin: 0 12px;
    line-height: 40px;
    display: flex;
    align-items: center;
}

.menu-class .menu-item-class .menu-item a:hover {
    color: var(--color-bright-gray-black);
}

.menu-class .menu-item-class > .menu-item > .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    background-color: var(--color-bright-white);
    -webkit-transform: translate(-50%, 12px);
    -ms-transform: translate(-50%, 12px);
    transform: translate(-50%, 12px);
}

.menu-class .menu-item-class .menu-item-has-children > a:after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 4px;
    line-height: 1;
}

.menu-class .menu-item-class .menu-item-has-children:hover a:before {
    content: "";
    position: absolute;
    inset: -12px;
}

.menu-class .menu-item-class .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

/*选择兄弟元素、选择紧挨着.sub-menu前一个a元素*/
.menu-class .menu-item > a:has(+ .sub-menu:hover) {
    color: var(--color-bright-gray-black);
}

/***子类***/
.menu-class .menu-item-class > .menu-item > .sub-menu .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    padding: 32px;
    margin-top: -32px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    background-color: var(--color-bright-white);
    border-radius: 24px;
    -webkit-transform: translate(-3%, 0px);
    -ms-transform: translate(-3%, 0px);
    transform: translate(-3%, 0px);
}

.menu-class .menu-item-class > .menu-item > .sub-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.head__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
}

.head__right .one__btn {
    height: 38px;
    padding: 12px;
    font-weight: 600;
}

.head__right .one__btn:hover {
    background: var(--color-pure-black);
    color: var(--color-bright-white);
}

.head__right .burger,
.head__right .notify {
    color: var(--color-pure-black);
    font-size: var(--font-size-18);
    cursor: pointer;
    padding: 8px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-pure-black);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.head__right .burger:hover,
.head__right .notify:hover {
    background-color: var(--color-pure-black);
    color: var(--color-bright-white);
}

.user__info__box {
    width: 36px;
    height: 100%;
    position: relative;
}

.user__head__icon {
    width: 100%;
    height: 36px;
    position: relative;
    border-radius: 50%;
    border: 1px solid var(--color-bright-white);
    box-shadow: 15px 15px 20px rgba(0, 0, 0, .08), -15px -15px 20px rgba(0, 0, 0, .04);
}

.user__head__icon .user__aciton {
  overflow: hidden;
  display: block;
  border-radius: 50%;
}

.user__head__icon .vip__icon {
    width: 26px;
    position: absolute;
    bottom: -6px;
    right: -10px;
}

.user__head__icon .vip__icon.img_color_removal {
  filter: grayscale(100%);
}

.user__info__box:hover .user__head__icon a::before {
    content: "";
    position: absolute;
    inset: -12px;
}

.user__body {
    width: 308px;
    padding: 24px 24px 15px;
    background-color: white;
    position: absolute;
    top: 100%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    background-color: var(--color-bright-white);
    -webkit-transform: translate(-80%, 12px);
    -ms-transform: translate(-80%, 12px);
    transform: translate(-80%, 12px);
}

@media (min-width: 1200px) {
    .user__info__box:hover .user__body {
        opacity: 1;
        visibility: visible;
    }
}

.user__head__prompt {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    background: #f6f7f8;
    border-radius: 20px 20px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #ff4543;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.basic__infor {
    gap: 10px;
}

.user__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 8px 0 0;
    vertical-align: unset;
}

.user__info__drop {
    display: grid;
}

.user__name {
    font-size: 16px;
    font-weight: 600;
    color: #2d2d2d;
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
    align-items: center;
}

.user__name i {
    color: rgba(0, 153, 255, 1);
}

.user__name span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user__account a {
    color: var(--color-bright-gray-black);
}

.user__account.vip__text span {
    color: #9d6037;
}

.user__account.svip__text span {
    color: #5529fe;
}

.user__center__entry {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 70px;
    height: 26px;
    background: var(--color-near-white);
    border-radius: 13px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    color: var(--color-grayish-black);
}

.user__center__entry:hover {
    color: white;
    background-image: linear-gradient(90deg, rgba(191, 112, 255, 1), rgba(64, 0, 255, 1));
}

.user__entrance {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.user__entrance .entrance__link {
    opacity: .92;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #505153;
    font-size: 14px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    line-height: 1;
}

.user__entrance .entrance__link:nth-child(3n) {
    margin-right: 0;
}

.entrance__link:hover {
    opacity: 1;
    background: var(--color-near-white);
}

.entrance__link i {
    font-size: 20px;
}

.user__dropdown__foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.user__dropdown__foot .logout__link {
    color: rgba(138, 142, 152, 1);
    font-size: var(--font-size-13);
    opacity: 1;
}

.user__dropdown__foot .logout__link:hover {
    opacity: .8;
}

.user__dropdown__foot .logout__link:last-child {
  margin-left: auto;
}

/******************SlickNav Menu v1.0.10 移动端导航菜单*********************/
.mobile_nav {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.1);
}

.slicknav_btn {
    position: relative;
    display: block;
    vertical-align: middle;
    float: right;
    padding: 0.438em 0.625em 0.438em 0.625em;
    line-height: 1.125em;
    cursor: pointer;
}

.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar {
    margin-top: 0.188em;
}

.slicknav_menu .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left;
}

.slicknav_menu .slicknav_icon {
    float: left;
    width: 1.125em;
    height: 0.875em;
    margin: 0.188em 0 0 0.438em;
}

.slicknav_menu .slicknav_icon:before {
    background: transparent;
    width: 1.125em;
    height: 0.875em;
    display: block;
    content: "";
    position: absolute;
}

.slicknav_menu .slicknav_no-text {
    margin: 0;
}

.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.slicknav_menu:before {
    content: " ";
    display: table;
}

.slicknav_menu:after {
    content: " ";
    display: table;
    clear: both;
}

.slicknav_nav {
    clear: both;
}

.slicknav_nav ul {
    display: block;
}

.slicknav_nav li {
    display: block;
}

.slicknav_nav .slicknav_arrow {
    font-size: 0.8em;
    margin: 0 0 0 0.4em;
}

.slicknav_nav .slicknav_item {
    cursor: pointer;
}

.slicknav_nav .slicknav_item a {
    display: inline;
}

.slicknav_nav .slicknav_row {
    display: block;
}

.slicknav_nav a {
    display: block;
}

.slicknav_nav .slicknav_parent-link a {
    display: inline;
}

.slicknav_brand {
    float: left;
}

.slicknav_menu {
    font-size: 15px;
    box-sizing: border-box;
}

.slicknav_menu * {
    box-sizing: border-box;
}

.slicknav_menu .slicknav_menutxt {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000;
}

.slicknav_menu .slicknav_icon-bar {
    background-color: #fff;
}

.slicknav_btn {
    margin: 5px 5px 6px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #222;
}

.slicknav_nav {
    margin: 0;
    padding: 0;
    font-size: 0.9333em;
    list-style: none;
    overflow: hidden;
}

.slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    background-color: var(--color-bright-white);
}

.slicknav_nav .slicknav_row {
    padding: 5px 10px;
    margin: 2px 5px;
}

.slicknav_nav .slicknav_row:hover {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: var(--color-bright-gray-black);
}

.slicknav_nav a {
    padding: 12px 10px;
    margin: 2px 5px;
    text-decoration: none;
    color: var(--color-pure-black);
}

.slicknav_nav a:hover {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: var(--color-light-gray-black);
}

.slicknav_nav .slicknav_txtnode {
    margin-left: 15px;
}

.slicknav_nav .slicknav_item a {
    padding: 0;
    margin: 0;
}

.slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0;
}

.slicknav_brand {
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    padding: 7px 12px;
    height: 44px;
}

/* 自定义 */
.slicknav_nav .slicknav_row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
    outline: 0;
    padding: 12px 10px;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slicknav_nav .slicknav_item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
}

.slicknav_nav ul ul {
    background-color: #e9ecef;
}

.slicknav_nav ul ul ul {
    background-color: #dee2e6;
}

.slicknav_nav ul ul ul ul {
    background-color: #ced4da;
}

.slicknav_nav ul ul ul ul ul {
    background-color: #adb5bd;
}


/******************首页顶部背景*********************/
.body__content {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.page {
    position: relative;
    padding-top: 180px;
    margin-bottom: 60px;
}

.page__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 680px;
    background-color: rgba(233, 236, 239, 1);
}

.page__background img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .12;
}

.page__background:after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(66%, transparent), to(#fff));
    background: linear-gradient(transparent 66%, #fff); */
    background: linear-gradient(
    transparent 0%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.9) 75%,
    #fff 100%
    );
}


/******************首页产品列表*********************/
.page__container {
    position: relative;
    z-index: 2;
}

.page__hero {
    max-width: 748px;
    margin: 0 auto 128px;
    text-align: center;
    word-wrap: break-word;
}

.page__title {
    margin-bottom: 16px;
    font-size: 44px;
    font-weight: 450;
    line-height: 48px;
    letter-spacing: -1px;
}

.page__description {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-bright-gray-black);
}

.discount__code {
    color: var(--color-bright-white);
    border-color: var(--color-bright-white);
    background-color: rgba(112, 0, 254, 1);
    box-shadow: 0px 20px 20px -17px rgba(112, 0, 254, 1);
}

.discount__code:hover {
    color: var(--color-decorate-1);
    background-color: var(--color-bright-white);
    border-color: rgba(112, 0, 254, .04);
    box-shadow: 0px 20px 35px -16px rgba(112, 0, 254, 1);
}

.vip_details {
    border-color: transparent;
}

.vip_details:hover {
    color: var(--color-decorate-1);
}

.position__relative {
    position: relative;
}

.page__container .product__card {
    align-content: flex-start;
    align-items: flex-start;
    background-color: var(--color-bright-white);
    border-radius: 24px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
    height: 100%;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
}

.page__container .product__card .product__head {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page__container .product__card .product__head .product__title {
    font-size: var(--font-size-24);
    font-weight: 500;
    letter-spacing: -1.5px;
    color: var(--color-deep-black);
}

.page__container .product__card .product__head .version,
.theme__card .product__item {
    display: flex;
    align-items: center;
}

.page__container .product__card .product__head .product__item {
    color: var(--color-bright-gray-black);
}

.page__container .product__card .product__head .product__item small,
.theme__card .product__item small {
    padding: 0 4px;
    font-size: 13px;
    text-align: center;
    margin-left: 3px;
    vertical-align: middle;
    background-color: var(--color-grayish-black);
    border-radius: 0 20px 20px 20px;
    color: var(--color-bright-white);
    box-shadow: 10px 6px 12px 0 rgba(166, 180, 211, .3);
}

.page__container .product__card .product__head .product__item .inside__more {
    color: var(--color-pure-black);
}

.page__container .product__card .product__preview {
    margin: 0 auto;
    max-height: 180px;
    overflow: hidden;
    z-index: 1;
}

.page__container .product__card .product__foot {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.product__foot .theme_intro,
.product__foot .theme_demo {
    border-color: var(--color-gray-white);
    font-weight: 600;
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.2), -10px -10px 10px rgba(220, 220, 220, 0.2);
    transition: ease all 0.3s;
}

.product__foot .theme_demo {
    background-color: var(--color-grayish-black);
    color: var(--color-bright-white);
}

.product__foot .theme_intro:hover {
    color: var(--color-grayish-black);
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0));
    /* transform: translateY(-3px); */
}

.product__foot .theme_demo:hover {
    color: var(--color-near-white);
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    /* transform: translateY(-3px); */
}

.product__tags {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.product__tags .tag__item {
    width: 24px;
    position: relative;
}

.product__tags .tag__item small {
    position: absolute;
    color: white;
    text-align: center;
    padding-top: 3px;
    line-height: 12px;
    font-size: 10px;
}

.product__tags .authe svg {
    fill: var(--color-decorate-2);
}

.product__tags .exclusive svg {
    fill: var(--color-grayish-black);
}

.product__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.product__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .4;
}

.page__container .col__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* margin: 0; */
    opacity: var(--opacity, 0);
    -webkit-mask: radial-gradient(480px 480px at var(--x) var(--y), black 1%, transparent 40%);
    mask: radial-gradient(480px 480px at var(--x) var(--y), black 1%, transparent 40%);
    will-change: mask;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.page__container .col__overlay .product__card {
    border: 1px solid var(--color-grayish-black);
    background-color: unset;
}


/******************首页文字列表*********************/
.security_items_wrapper {
    margin-top: 80px;
    margin-bottom: 40px;
}

.security_items_wrapper h2 {
    font-size: var(--font-size-26);
    color: var(--color-pure-black);
}

.security_items_wrapper .row_gap {
    /* grid-column-gap: 3.5%; */
    grid-row-gap: 42px;
}

.security-items {
    width: 30%;
}

.icon__wrapper {
    font-size: var(--font-size-26);
    color: rgba(148, 59, 255, 1);;
    margin-bottom: 16px;
    display: inline-block;
}

.security_item_titles {
    margin-bottom: 4px;
    font-size: var(--font-size-18);
    color: var(--color-grayish-black);
    letter-spacing: -1.5px;
}

.text_small {
    line-height: 20px;
    color: var(--color-bright-gray-black);
}


/******************首页会员列表*********************/
.pricing_wrapper {
    margin-top: 40px;
}
.pricing_plan {
    /* gap: 20px; */
    align-items: center;
}

@media (min-width: 1400px) {
    .mt_negative_offset {
        margin-top: -20%;
    }
}

.member_section {
    display: block;
}

.member_section .crown_icon {
    font-size: 56px;
    color: var(--color-decorate-1);
    line-height: 1;
}

.member_section .member_title {
    letter-spacing: -.025em;
    font-size: var(--font-size-26);
    color: var(--color-pure-black);
}

.member_section .member_desc {
    color: var(--color-bright-gray-black);
}

.plan_details {
    border-radius: 23px;
    box-shadow: 0 22.641508102416992px 67.92452239990234px -2.830188512802124px #0000000d, 
                0 7.225641250610352px 21.67698097229004px -2.1226413249969482px #0000000d, 
                0 2.733407497406006px 8.200210571289062px -1.415094256401062px #0000000d, 
                0 0.9013493657112122px 2.7040529251098633px -0.707547128200531px #0000000d;
    background-color: var(--color-bright-white);
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    gap: 35px;
    padding: 30px;
    position: relative;
    height: 100%;
}

.plan_label {
    position: relative;
    height: 32px;
    word-break: break-word;
    word-wrap: break-word;
}

.plan_title {
    font-size: var(--font-size-18);
    font-weight: 400;
    color: var(--color-grayish-black);
}

.plan_cost {
    overflow: visible;
    position: relative;
    height: 42px;
    gap: 10px;
    display: flex;
}

.cost_value {
    width: auto;
    height: auto;
}

.cost_amount {
    font-size: 42px;
    line-height:42px;
    font-weight: 400;
    letter-spacing: -2.5px;
}

.cost_amount i {
    font-size: smaller;
}

.cost_period {
    width: 58px;
    word-break: break-word;
    word-wrap: break-word;
    display: flex;
    align-items: flex-end;
}

.cost_unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-bright-gray-black);
}

.plan_features {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: min-content;
    justify-content: center;
    overflow: visible;
    gap: 10px;
    padding: 0;
    position: relative;
    width: 100%;
}

.feature_item {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0px;
    height: 28px;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
}

.icon_container {
    width: 28px;
    height: 28px;
    line-height: 32px;
    text-align: center;
    font-size: var(--font-size-20);
}

.feature_description {
    height: 24px;
    line-height: 28px;
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
}

.feature_text {
    font-size: var(--font-size-15);
    font-weight: 400;
    color: var(--color-bright-gray-black);
}

.action_container {
    height: 50px;
    position: relative;
    width: auto;
}

.details_button {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    height: 50px;
    justify-content: center;
    overflow: visible;
    padding: 17px 24px;
    position: relative;
    text-decoration: none;
    width: min-content;
    background-color: var(--color-near-white);
    border-radius: 64px;
    opacity: 1;
    color: var(--color-pure-black);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-gray-white);
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.2), -10px -10px 10px rgba(220, 220, 220, 0.2);
    transition: ease all 0.3s;
}

.details_button:hover {
    background-color: var(--color-deep-black);
    color: var(--color-bright-white);
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0));
}

.popular_plan .details_button {
    border-color: var(--color-bright-white);
    background-color: unset;
    color: var(--color-bright-white);
}

.popular_plan .details_button:hover {
    color: var(--color-deep-black);
    background-color: var(--color-bright-white);
}

.button_content {
    flex: none;
    height: auto;
    position: relative;
    white-space: nowrap;
    width: auto;
}

.button_text {
    font-weight: 400;
}


#vip_plan {
    border: none;
    height: 1px;
    background-color: var(--color-gray-white);
}

.pricing_plan .popular_plan {
    background: var(--color-pure-black);
    color: var(--color-bright-white);
    padding-top: 70px;
    padding-bottom: 70px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

.popular_plan .popular_text {
    background-color: var(--color-decorate-1);
    border-radius: 57px;
    height: 28px;
    left: 86px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 74px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

.popular_plan .plan_title, .popular_plan .cost_unit, .popular_plan .feature_text {
    color: var(--color-pure-gray-white);
}


/******************底部*********************/
.footer {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--color-pure-black);
    color: var(--color-bright-white);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
}

.footer_row {
    align-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
    height: min-content;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
}

.footer_gard {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 126px;
    height: min-content;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
}

.foot_left {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 282px;
}

.foot_left .foot__intro {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 11px;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
}

.foot_left .logo__box .logo {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  width: 102px;
}

.foot_left .logo.text {
  width: 100%;
  color: white;
  margin-right: 0;
}

.foot_left .logo.control{
  margin-right: 0;
}

.foot_left .foot__intro .foot_desc {
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
    color: var(--color-bright-gray-black);
}

.foot_left .foot_share {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    height: auto;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.foot_left .foot_share a {
    color: var(--color-decorate-1);
    font-size: var(--font-size-18);
}

.foot_right {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: 1 0 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 126px;
    height: min-content;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
}

.foot_right .gard_item {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: 1 0 0px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    height: min-content;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
}

.gard_item h3 {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--color-gray-white);
}

.gard_item .link_list {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex: 1 0 0px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    height: min-content;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
}

.gard_item .link_list .link_item {
    line-height: 24px;
}

.gard_item .link_list .link_item a {
    color: var(--color-bright-gray-black);
}

.gard_item .link_list .link_item a:hover {
    color: var(--color-bright-white);
    text-decoration: underline;
}

.filing_wrapper {
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
    height: min-content;
    justify-content: flex-start;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
}

.filing_wrapper .hr_solid {
    height: 1px;
    position: relative;
    background-color: rgba(46, 46, 46, 0.33);
    width: 100%;
}

.filing_wrapper .filing_text {
    height: auto;
    position: relative;
    white-space: pre;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-bright-gray-black);
}

.filing_wrapper .filing_text a {
  color: var(--color-bright-gray-black);
}

.filing_wrapper .filing_text a:hover {
  opacity: .5;
}

.footer-links {
  text-align: center;
}

.footer-links ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}

.footer-links ul li {
    margin-right: 8px;
}

.footer-links ul li a {
    font-size: var(--font-size-13);
    line-height: 0;
    color: var(--color-bright-gray-black);
}

.footer-links ul li a:hover {
  opacity: .5;
}

@media (max-width: 992px) {
    .footer {
        padding: 50px 72px;
    }

    .footer_gard {
        flex-direction: column;
        gap: 60px;
        width: 100%;
    }

    .foot_left {
        gap: 0px;
        width: 100%;
    }

    .foot__intro {
      align-items: center !important;
    }

    .foot_left .foot__intro .foot_desc {
      text-align: center;
    }

    .foot_left .logo__box {
        align-content: center;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 50px 0 0;
    }

    .foot_left .foot_share {
        justify-content: center;
        padding: 32px 0 0;
    }

    .foot_right {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        align-items: center;
    }

    .foot_right .gard_item {
        align-items: center;
    }
}


/******************全局侧边栏*********************/
.sidebar__container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    padding: 30px;
    background-color: var(--color-near-white);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9;
    width: 320px;
    -webkit-transform: translateX(320px);
    transform: translateX(320px);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.77,0,.175,1);
    transition: -webkit-transform .3s cubic-bezier(.77,0,.175,1);
    transition: transform .3s cubic-bezier(.77,0,.175,1);
    transition: transform .3s cubic-bezier(.77,0,.175,1),-webkit-transform .3s cubic-bezier(.77,0,.175,1);
}

.sidebar__container .logo__box a {
    margin: 0 auto;
}

.sidebar__container.sidebar__auth {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
}

/* .sidebar__close {
    font-size: 32px;
    line-height: 1;
}

.sidebar__close:hover {
    color: #7000fe;
} */

.sidebar__close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-pure-gray-white);
    border-radius: 50%;
    font-size: 0;
}

.sidebar__close svg {
    width: 12px;
    height: 12px;
    fill: var(--color-pure-gray-white);
    -webkit-transition: fill .2s;
    transition: fill .2s;
}

.sidebar__close:hover svg {
    fill: var(--color-pure-black);
}

.sidebar__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 8;

    /* 添加透明动画 */
    -webkit-transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Chrome, Safari, Opera (prefixed) */
    -moz-transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Firefox (prefixed) */
    -o-transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Old Opera (prefixed) */
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; /* Standard syntax */
}

.modal__open .sidebar__backdrop { 
    opacity: 1;
    visibility: visible;
    
    /* 移除过渡延迟，使“显示”过程无缝衔接 */
    -webkit-transition: opacity 0.3s ease-in-out; /* Chrome, Safari, Opera (prefixed) */
    -moz-transition: opacity 0.3s ease-in-out; /* Firefox (prefixed) */
    -o-transition: opacity 0.3s ease-in-out; /* Old Opera (prefixed) */
    transition: opacity 0.3s ease-in-out; /* Standard syntax */
}

.login_signin_group {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login_signin_group .group__title {
    font-weight: 600;
}

.login_signin_group .one__btn {
    padding: 12px;
}

/*优惠卷*/
.coupon__box {
    display: grid;
    gap: 10px;
}

.coupon__head .coupon__title {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--color-grayish-black);
}

.coupon__head .coupon__desc {
    font-size: var(--font-size-13);
    color: var(--color-bright-gray-black);
}

.coupon__item {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

.coupon__top,
.coupon__bottom {
    background: var(--color-bright-white);
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.1);
}

.coupon__top {
    flex: 1;
    border-radius: 16px 16px 0 0;
    padding-top: 12px;
    padding-left: 24px;
    padding-right: 24px;
}

.coupon__top .coupon_value {
    height: 24px;
    margin-bottom: 3px;
    color: var(--color-grayish-black);
}

.coupon__top .coupon_amount {
    line-height: 24px;
    display: inline-block;
}

.coupon__top .coupon_unit {
    font-size: 12px;
    opacity: .7;
    font-weight: bold;
}

.coupon_code_container .coupon_code_item {
    background: var(--color-grayish-black);
    color: white;
    padding: 0px 6px;
    border-radius: 24px;
    line-height: 24px;
}

.coupon_code_container .copy_action {
    cursor: pointer;
    color: var(--color-pure-gray-white);
}

.coupon_code_container .copy_action:hover {
    color: var(--color-grayish-black);
}

.coupon__bottom {
    height: 24px;
    padding: 0 38px;
    border-radius: 0 0 16px 16px;
}

.coupon__bottom > small {
    font-weight: 600;
}

.coupon__bottom > .code_valid {
    color: var(--color-decorate-1);
}

.coupon__bottom > .code_invalid {
    color: var(--color-decorate-2);
}

.coupon__middle {
    height: 12px;
    position: relative;
    overflow: hidden;
}

.coupon__middle div {
    /* 中间虚线 */
    position: absolute;
    left: 26px;
    right: 26px;
    top: 6px;
    border-top: 1.5px dashed var(--color-gray-white);
    z-index: 9;
}

.coupon__middle:before,
.coupon__middle:after {
    content: '';
    border: 150px solid #FFFFFF;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 50%;
    margin-top: -156px;
    box-sizing: unset;
    box-shadow: inset 0 0 6px 0px rgba(0, 0, 0, 0.1);
}

.coupon__middle:before {
    left: -154px;
}

.coupon__middle:after {
    right: -154px;
}

/*站点公告*/
.site__notice__box {

}

.notice__head .notice__title {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--color-grayish-black);
}

.notice__item .notice__content {
    overflow: hidden;
}

.notice__content .notice__label {
    color: var(--color-grayish-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.notice__head .notice__desc {
    font-size: var(--font-size-13);
    color: var(--color-bright-gray-black);
}

.site__notice__box .notice__item {
    padding: 12px 0;
    color: var(--color-grayish-black);
}

.site__notice__box .notice__item:not(:last-child) {
    border-bottom: 1px dashed var(--color-gray-white);
}

.site__notice__box a:hover {
    color: var(--color-pure-black);
}

.notice__content .date__action,
.notice__content .action__desc {
    color: var(--color-pure-gray-white);
}

.notice__content a.action__desc {
   font-size: var(--font-size-13);
}

.sidebar__foot {
  font-size: var(--font-size-13);
  color: var(--color-pure-gray-white);
  padding-top: 20px;
  text-align: center;
}

/******************主题内容页面*********************/
.theme__details__page .page {
    padding-top: 120px;
}

.theme__details__page .theme__media {
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    inset: -1px -1px 0;
}

.theme__details__page .page__title {
    font-size: var(--font-size-28);
    line-height: 28px;
    letter-spacing: -1.5px;
}

.theme__details__page .page__description {
    font-size: var(--font-size-18);;
    line-height: 24px;
}

.theme__details__page .vip_details,
.theme__details__page .theme_demo {
    border-color: var(--color-gray-white);
    font-weight: 600;
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.2), -10px -10px 10px rgba(220, 220, 220, 0.2);
    transition: ease all 0.3s;
}

.theme__details__page .theme_demo {
    background-color: var(--color-grayish-black);
    color: var(--color-bright-white);
}

.theme__details__page .vip_details:hover {
    color: var(--color-grayish-black);
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0));
    /* transform: translateY(-3px); */
}

.theme__details__page .theme_demo:hover {
    color: var(--color-near-white);
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    /* transform: translateY(-3px); */
}

/*选项卡*/
.tab___menu {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tab___menu .tabs {
	display: flex;
	position: relative;
	background-color: rgba(240, 240, 240, 1);
	box-shadow: 0 0 1px 0 rgba(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15);
	padding: 6px;
	border-radius: 99px; 
	* {
		z-index: 2;
	}
}

.tab___menu input[type="radio"] {
	display: none;
}

.tab___menu .tab {
	display: flex;
	align-items: center;
	justify-content: center;
    height: 32px;
    width: 108px;
    font-size: var(--font-size-16);
    font-weight: 400;
    color: var(--color-grayish-black);
	border-radius: 99px; 
	cursor: pointer;
	transition: color 0.15s ease-in;
}

.tab___menu input[type="radio"] {
	&:checked {
		& + label {
			color: var(--color-bright-white);
		}
	}
}

.tab___menu input[id="radio-1"] {
	&:checked {
		& ~ .glider {
			transform: translateX(0);
		}
	}
}

.tab___menu input[id="radio-2"] {
	&:checked {
		& ~ .glider {
			transform: translateX(100%);
		}
	}
}

.tab___menu input[id="radio-3"] {
	&:checked {
		& ~ .glider {
			transform: translateX(200%);
		}
	}
}

.tab___menu input[id="radio-4"] {
	&:checked {
		& ~ .glider {
			transform: translateX(300%);
		}
	}
}

.tab___menu input[id="radio-5"] {
	&:checked {
		& ~ .glider {
			transform: translateX(400%);
		}
	}
}

.tab___menu input[id="radio-6"] {
	&:checked {
		& ~ .glider {
			transform: translateX(500%);
		}
	}
}

.tab___menu .glider {
	position: absolute;
	display: flex;
    height: 32px;
    width: 108px;
	background-color: var(--color-grayish-black);
	z-index: 1;
	border-radius: 99px; 
	transition: 0.25s ease-out;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@media (max-width: 540px) {
    .tab___wrapper{
        background-color: rgba(240, 240, 240, 1);;
        margin: 0 -0.83em;
    }

    .tab___menu {
        overflow-x: scroll;
        align-items: unset;
        justify-content: unset;
        flex-direction: row;
    }

    .tab___menu .tabs {
      /* transform: scale(0.76); */
          border-radius: 0;
          padding: 16px 6px;
    }
}

.tab__content section {
    opacity: 0;
    display: none;
    color: var(--color-grayish-black);
}

.tab__content .active {
    opacity: 1;
    display: block;
}

.post__content h2 {
    font-size: var(--font-size-24);
    letter-spacing: var(--negative-letter-spacing-2);
    margin-bottom: 8px;
}

.output__content h3 {
    font-size: var(--font-size-20);
    letter-spacing: var(--negative-letter-spacing-2);
    margin-top: 30px;
    margin-bottom: 8px;
}

.list__group {
    list-style-position: inside;
    border: 1px solid var(--color-gray-white);
    border-radius: 0 12px 12px 12px;
}

.list__group .list__item {
    padding: 10px 20px;
    line-height: 36px;
    border-width: 1px;
    border-bottom-style: solid;
    border-color: var(--color-gray-white);
    list-style-type: decimal; /* 使用数字作为标记 */
}

.list__group .list__item:last-of-type {
    border-color: transparent;
}

.list__group .list__item::marker {
    color: var(--color-grayish-black);
    font-weight: 600;
}

/*更新记录列表*/
.text__mark {
    color: var(--color-bright-white);
    background: var(--color-grayish-black);
}

.theme__updata__log {
    counter-reset: myCounter -1;
    background-color: var(--color-near-white);
    color: var(--color-bright-gray-black);
}

.theme__updata__log:first-of-type {
    color: var(--color-grayish-black);
}

.theme__updata__log:not(:last-child) {
    margin-bottom: 20px;
}

.theme__updata__log .list__item {
    list-style-type: none;
    counter-increment: myCounter;
    line-height: 16px;
    position: relative;
}

.theme__updata__log .list__item:first-child {
    font-weight: bold;
    line-height: 28px;
    font-size: var(--font-size-17);
    color: var(--color-grayish-black);
}

.theme__updata__log .list__item::before {
    content: counter(myCounter) ". ";
    font-weight: 600;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

.theme__updata__log .list__item:first-child:before {
    content: "\f0a1 \00a0";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    /* line-height: 1; */
}

.theme__updata__log .list__item b {
    display: inline-flex;
    align-items: center;
}

.theme__updata__log .list__item b span {
    background: var(--color-bright-white);
    color: var(--color-pure-black);
    border-radius: 24px;
    padding: 0 8px;
    font-weight: normal;
    display: flex;
    font-size: 12px;
    margin-left: 3px;
    border-color: var(--color-grayish-black);
}

.theme__updata__log .list__item span {
    margin-left: auto;
    font-weight: normal;
    font-size: 12px;
    color: var(--color-near-white);
    background: var(--color-grayish-black);
    padding: 0 8px;
    border-radius: 24px;
    border-color: var(--color-gray-white);
    border-width: 1px;
    border-style: dashed;
}

@media only screen and (max-width: 767px) {
    .theme__updata__log .list__item:first-child {
        line-height: 20px;
    }
}

@media only screen and (max-width: 1023px) {
    .theme__updata__log .list__item b span {
        position: absolute;
        top: -16px;
        right: 68px;
    }
    .theme__updata__log .list__item span {
        position: absolute;
        top: -16px;
        right: 0px;
    }
    .theme__updata__log:not(:last-child) {
        margin-bottom: 30px;
    }
    .list__group .list__item,
    .theme__updata__log .list__item {
        line-height: 24px;
    }
}

/*图片灯箱*/
.ppage__gallery {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px 32px
}

@media only screen and (max-width: 1259px) {
    .ppage__gallery {
        margin: 0 -4px 80px
    }
}

@media only screen and (max-width: 1023px) {
    .ppage__gallery {
        /* display: block; */
        margin: 0 -4px 80px
    }
}

@media only screen and (max-width: 767px) {
    .ppage__gallery {
        margin: 0 -4px 40px
    }
}

@media only screen and (max-width: 539px) {
    .ppage__gallery {
        display: block;
    }

    .page__hero a.one__btn:nth-child(n + 3) {
      margin-top: 1rem;
    }
}

.ppage__gallery .gallery__item {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 calc(25% - 12px);
    margin: 0 6px 12px;
    border-radius: 24px;
    overflow: hidden
}

@media only screen and (max-width: 1259px) {
    .ppage__gallery .gallery__item {
        -webkit-box-flex: 0;
        flex: 0 0 calc(50% - 8px);
        margin: 0 4px 8px;
        border-radius: 8px
    }
}

@media only screen and (max-width: 1023px) {
    .ppage__gallery .gallery__item {
        /* margin: 0 0 8px */
    }
}

.ppage__gallery .gallery__item:before {
    content: "";
    display: block;
    padding-bottom: calc((1020 / 1350) * 100%)
}

.ppage__gallery img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.ppage__gallery .gallery__item span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    font-size: var(--font-size-13);
    display: inline-table;
    padding: 6px 12px;
    border-radius: 24px;
    margin: 0 auto;
    color: var(--color-deep-black);
    background: rgba(255, 255, 255, .72);
}

/*文章模式下*/
.article__wraper .ppage__gallery .gallery__item:before {
    padding-bottom: calc((1020 / 1350) * 100%)
}

.article__wraper .ppage__gallery .gallery__item {
    flex: 0 0 calc(33.33% - 12px);
}

.article__wraper .ppage__gallery img {
  height: 100% !important;
}

/*主题页标签*/
.theme__tag__item {
    border: 3px dashed transparent;
    font-weight: 600;
    color: var(--color-bright-gray-black);
    border-radius: 0 32px 32px 32px;
    border-color: rgba(0, 0, 0, .075);
    /* box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; */
    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
}

.theme__tag__item i {
    color: var(--color-deep-black);
}



/******************主题合集页面*********************/
.theme__collect__page .page,
.theme__cate__page .page,
.theme__user__page .page,
.theme__vip__page .page {
    padding-top: 180px;
}

.theme__collect__page .page__background,
.theme__cate__page .page__background,
.theme__user__page .page__background,
.theme__article__page .page__background {
    background-color: rgba(233, 236, 239, 1);
}

.theme__vip__page .page__background {
    background-color: rgb(225 226 255);
}

.theme__collect__page .page__title,
.theme__cate__page .page__title,
.theme__vip__page .page__title,
.theme__article__page .page__title {
    font-size: var(--font-size-28);
    line-height: 28px;
    letter-spacing: -1.5px;
}

.theme__collect__page .page__description,
.theme__cate__page .page__description,
.theme__vip__page .page__description {
    font-size: var(--font-size-18);
    line-height: 24px;
}

.theme__collect__page .btn__muster span {
    border-color: var(--color-near-white);
    font-weight: 400;
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.2), -10px -10px 10px rgba(220, 220, 220, 0.2);
    transition: ease all 0.3s;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}


/******************分类页面*********************/
.theme__collect__page .page__hero,
.theme__cate__page .page__hero {
    margin: 0 auto 64px;
}
.search__form {
    margin: 0 auto;
    background: white;
    border-radius: 42px;
    overflow: hidden;
    border: 2px solid var(--color-near-white);
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.2), -10px -10px 10px rgba(220, 220, 220, 0.2);
}

.search__form .search__fields {
    display: flex;
    justify-content: space-between;
    height: 44px;
}

.search__form .search__input {
    width: 100%;
    padding: 10px 15px;
    font-weight: 600;
    font-size: var(--font-size-15);
}

.search__form button {
    padding: 0px 20px;
    font-size: 24px;
    color: var(--color-grayish-black);
    opacity: .8;
}

.search__form button:hover {
    opacity: 1;
}

/*分类导航*/
.page__filters .filter__group {
    display: -webkit-box;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
    font-size: 16px;
}

.filter__group .filter__name {
    padding: 8px 15px 8px 0;
}

.filter__group .filter__item {
    border-radius: 32px;
}

.filter__group .filter__item.active {
    background: var(--color-grayish-black);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.filter__group .filter__item .filter__link {
    padding: 8px 12px;
    display: flex;
    margin: 0 4px;
    opacity: .7;
}

.filter__group .filter__item.active .filter__link {
    color: var(--color-bright-white);
    opacity: 1;
}

.filter__group .filter__item .filter__link:hover {
    opacity: 1;
}

.rolling__state {
    background-color: rgba(240, 240, 240, 1);
    margin: 0 -0.83em;
}

.rolling__state .filter__group:first-child {
    padding-top: 16px;
}

.rolling__state .filter__group:last-child {
    padding-bottom: 16px;
}

.filter__group .filter__more {
    display: none;
}

.rolling__state .filter__group .filter__more {
    display: block;
    position: absolute;
    right: 0;
    padding: 8px 12px;
    background-color: rgba(240, 240, 240, 1);
    box-shadow: -16px 0px 12px -8px rgba(169, 169, 169, .5);
}
@media only screen and (max-width: 767px) {
    .filter__group .filter__name {
        padding: 8px 15px;
    }
}

/*分类列表*/
.document__card {
    height: 100%;
    background-color: var(--color-bright-white);
    border: 1px solid var(--color-gray-white);
    border-radius: 8px;
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.07), -10px -10px 10px rgba(220, 220, 220, 0.07);
}

.document__card .document__inner {
    display: grid;
    gap: 10px;
}

.document__card .document__head {
    white-space: nowrap;
    overflow: hidden;
}

.document__card .document__title {
    font-size: var(--font-size-17);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.document__card .document__title a {
    color: var(--color-grayish-black);
}

.document__card .document__desc {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-13);
    color: var(--color-bright-gray-black);
    min-height: 16.8px;
    line-height: 1.3;
}

.document__card .document__meta {
    display: flex;
    align-items: center;
    font-size: var(--font-size-13);
    color: var(--color-bright-gray-black);
}

.document__card .document__category {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.document__card .document__category::before {
    content: "\e185";
    font-family: "Font Awesome 6 Free";
    margin-right: 4px;
    line-height: 1;

    /* display: block;
    border-radius: 50%;
    height: 6px;
    width: 6px;
    margin-right: 5px;
    background-color: rgba(33,99,232,.75); */
}

.document__card .document__category a {
    color: var(--color-bright-gray-black);
}

.document__card .document__category a:hover {
    color: var(--color-grayish-black);
}

.document__card .document__date {
  margin-right: 10px;
}

.document__card .document__arrow {
    flex-shrink: 0;
    width: 6px;
    height: 8px;
    margin: 0 8px;
    opacity: .6;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.5C0 0.675955 0.940764 0.205573 1.6 0.7L4.93333 3.2C5.46667 3.6 5.46667 4.4 4.93333 4.8L1.6 7.3C0.940764 7.79443 0 7.32405 0 6.5V1.5Z' fill='%234D4D4D'/%3E%3C/svg%3E%0A");
}

.document__card .document__browse {
    margin-left: auto;
}

.col__overlay .document__card {
    border: 1px solid var(--color-grayish-black);
    background-color: unset;
}

.more__btn {
    background-color: var(--color-grayish-black);;
    color: var(--color-bright-white);;
}

.more__btn:hover {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

.loader {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 48px;
}

.loader--small {
  height: 44px;
}

.loader:before {
  content: "";
  width: 32px;
  height: 32px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAxIDc5LmE4ZDQ3NTM0OSwgMjAyMy8wMy8yMy0xMzowNTo0NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjAgKDIwMjMwODAxLm0uMjI2NSAzYTAwNjIzKSAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI4QzlCM0EyMjczMDExRUY4NjYzQjk5MDk2NUQ4NkM3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI4QzlCM0EzMjczMDExRUY4NjYzQjk5MDk2NUQ4NkM3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjhDOUIzQTAyNzMwMTFFRjg2NjNCOTkwOTY1RDg2QzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjhDOUIzQTEyNzMwMTFFRjg2NjNCOTkwOTY1RDg2QzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68MRXTAAAGlklEQVR42txb22seRRSfbHZjYo1p2nihCLGKgqlYYtVWW9EHrwiloIgI7YOI+KwvPov40hcF/wKpT4KWFgUVtQbFC15qsWpRC8WCjZg2SU2bfrvf6jnJmeZ0MmdmdvPtt9se+LHXb2fP71zmzOx8Pap6WQ0YBVwNuBJwOWAAMEjXU9qeov0ZwN+AacAJwFyVL9dT0XNR4ZsBt5DSGbuWGvfy48zYokwRfiVCGktAAtgK2ERKm4pKJKTCPTYy0DsOdtIzejqk+P2AzbSvApRLAz1A+s0ZwO+EuToJQIs/ZCiedoEAfYxEHAb80W0CMLE9DVjviWmbckVyQGjuwNCYKOMNvSWUR3ffBVjLnpGz67nxfH0c0b7r/txQOg9QXrczSr89VSUBjwMeJpcPUVoJ+7ZzmUFUJjzDPE5Zu9fStakqCNgJ2LICpX0EmOdyj8LStRFAP2CykwS8BBhj1ini+r0WJV0EZI57fKGQsxyFRPzpUywKtPx1lqSkjOyfVFRUpYHnzWOsRTau1AO2Ax4wElnUAcu7PCAkEaaBZAzSe0yVIeBBwA7B3UNDwbxH/+4c9eHYfZ0EtAGXeeI/NCeY1wfp+TM2JWNBeYyfxyzunjqqwdRx31nAdzTIOUYDHandVVRfrKWBk8v6Pk/QnoTP+8dWJ0iF0G7AGiHuQ2p8vcVS9WNSuozcCNggEOEjw3zvk2QEbwhgeXuP4e6my9sKHO56aOE9gE8k1wsULGqOkAcNG+/rqjhzwdvx2qyLAHTBZyluXMlOSnJ47jPAm+RynRIk4ig9f43H8rmjxxikkWQuEfAo4HYh2dl6ADO5fQB4T3iJlUpOxU1OhgqxfGp53wsSYq9h/Z00W6McISCRsIesX7VMUTIbccR76vCEAUrGuVkI3Qq4imIlFmIotuyjfAj4RnVPjlNIhCRpfY73UutsleATQhcZO7pO3P8UsE91X44wEkwlfYSMmARsEKwvWTxmXct+VZ8cpYIqFSyeOgrA1ZyA+0paf6+qeNY2YJxwOMALbKQMcQLWO6pEm/Vj6pq+UPXLtFqaUlee+DdntRYIwHi4gSkmlcfm9b2qOXJMsLRN8TYB9UhiUt41RsiEwuRAgwiYdnhAm/X/pgxFAda3XftZNU8mLVZus2NznIDoR6WuDxwhZuzatw0kYE6wcuaaD4lpIjFEYkbCZAMJmPEoa5MFD8ABQh+daAWQoFYwvK26S8wED84shjx/sI5d7PM00urwKK/TkhW8J44KNtBH1d/FTMAF98YlGhloOAGFSOAE6Lk83/T2cIMJiMv8AF36GkaCT65QzZYsUO8Fb8Ec8G/BBoYLdJ3dlKSA++v72kjACUuiM7ccKOMNJKDPyAM8H0i5YcEDpiwK9nm6xZsa6gFtSxmcWZKkxjwS8FuBBjS2XyQJ0CRjWfGEBPwQqDQX/HqzqWHWjy2unnnIaOkc8JdF4cQRa4jnGkTAKkfMZxZikIRz2gMUzewkBRINyh0N8YLEMn+RBRRK83pGSBOgPBa3JcRX9NRSzdk/E9xfzP40fD5PgP5y67K4bZIEB1LP12z9kELItvpsYQaJfxnCFRWb1dLHz15B8cg43kjbr2sggH+o5e+r1xhExjm9PWsjANfi7hAGOzbFI7a9ixLpLzURwJX2EZFR/OcmAchIPyU3SXHe35r97iOA/7rsCXqy06a0eS5irj/PH6AML3iSYj92FBuxEIvbKCke5I1UTICykGDTTYfAaddNelppm8ULIo/yOqmOU6WIWfanLhGgHJ7AvWFOGV+NbYnuEOBONlUWOcIhEbwDvQBXlOJ64tkKicg9JJhkLPNKaY0QDnffpZ5BqrMToQ6PLVtcsPgV4FVVzYRqEtB9z/lciAvOEbQoFMoozz0Ht0PUXe6iXmaiwlCweUJLCatWXOsED5EHjJdQPha2uNrrXgqRjzocClI4tJT82cy7UvRzygVjgqtFBbyAb7dSlzlRcU6YV571SqF/mHgLcLdj/B1ifb6vicTVqAfqHEiErhZ/Ry0umB4LVN5mdb7P2913MRCgKGbRbbc4aoLIUzCZBOCav9frJKDMf4aeAbyoln8fCA2JJGBE12gCFIXD22rxfzoqIOYlAk6rpTXJtUhU8nfHKSm+QKPAuORzvq97Oql3hb/HEvd9tbhEZZQKHl/XyNt8meqNS0IwLJ4C/KgWP7fNMpxh0IuXXlOXsGCh8wbgS4GA3U150Z4utDFK44DbaCC0X8n/GOm6/C/AACoWHG1UnQvvAAAAAElFTkSuQmCC");
  background-size: contain;
  background-position: center;
  -webkit-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

@-webkit-keyframes loader {
  100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg)
  }
}

@keyframes loader {
  100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg)
  }
}

.page-nav .page__foot {
  padding: 20px 0;
  margin: 50px 0;
}

/* 分类页-分页样式 */
.page-nav .infinite-scroll-msg {
  display: none;
  text-align: center;
  font-size: 16px;
  color: #ADB7BE;
}

.infinite-scroll .cdp {
  display: none;
}

.cdp {
  position: relative;
  text-align: center;
  padding: 20px 0;
  font-size: 0;
  z-index: 6;
  margin: 50px 0;
  animation: cdp-in 500ms ease both;
  animation-timeout: 200ms;
}

.cdp > a:hover, .cdp .active {
  background-color: white;
  color: black;
  border-color: black;
}

.cdp_i, .cdp_previous_page, .cdp_next_page {
  font-size: 14px;
  text-decoration: none;
  transition: background 250ms;
  display: inline-block;
  text-transform: uppercase;
  margin: 0 3px 6px;
  height: 44px;
  min-width: 44px;
  border-radius: 44px;
  border: 2px solid #adb7be;
  line-height: 42px;
  padding: 0;
  color: #adb7be;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.cdp_previous_page, .cdp_next_page {
  padding: 0 16px;
  margin: 0 12px 6px;
}

.cdp .page_ellipsis {
  display: inline-block;
  pointer-events: none;
  color: transparent;
  border-color: transparent;
  width: 50px;
}

.cdp .page_ellipsis:after {
  content: "...";
  color: #adb7be;
  font-size: 32px;
}

.cdp .page_jump {
  display: inline-block;
  padding-left: 10px;
}

.cdp .page_input {
  background: white;
  color: #adb7be;
  max-width: 30px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.cdp .page_input::placeholder {
  color: black;
  opacity: .1;
}

.cdp .page_button {
  background-image: linear-gradient(to right, #000000, #FFFFFF);
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  border-radius: 26px;
  width: 40px;
}

.cdp .page_jump .page_button:hover {
  background: #ffffff;
}

/* 当屏幕宽度小于768px时分页应用的样式 */
@media screen and (max-width: 767px) {
  .cdp a.cdp_i, .cdp span.cdp_i {
      display: none;
  }
}


/******************个人中心页面*********************/
.profile__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    margin-bottom: 32px;
}

.profile__avatar {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    margin-right: 16px;
    background-size: 32px 32px;
    border-radius: 50%;
    pointer-events: none;
}

.one__avatar {
    display: block;
    background-color: #4D4D4D;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23FFF'%3E%3Cpath d='M12.5 15c3.683 0 7.138 1.568 9.728 4.314a1 1 0 0 1-1.455 1.372C18.552 18.331 15.618 17 12.5 17s-6.052 1.331-8.272 3.686a1 1 0 0 1-1.455-1.372C5.362 16.568 8.817 15 12.5 15zm0-13a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11zm0 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
    border-radius: 50%; 
}

.profile__line {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

@media only screen and (max-width: 539px) {
  .profile__line .profile__name {
      font-size: var(--font-size-20);
  }
}

.profile__bio {
    color: var(--color-bright-gray-black);
    display: flex;
    align-items: center;
}

.profile__bio img {
    width: 38px;
}

.profile__bio a img {
    filter: grayscale(100%);
}

.profile__bio.vip__text span {
    color: #9d6037;
}

.profile__bio.svip__text span {
    color: #5529fe;
}

.profile__actions {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.profile__group {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}
  
.btn__stroke {
    border-color: var(--color-gray-white);
    color: var(--color-grayish-black);
}
  
.btn__stroke:hover {
    color: var(--color-bright-gray-black);
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.07), -10px -10px 10px rgba(220, 220, 220, 0.07);
}

.profile__group .btn__stroke.active {
    color: var(--color-bright-white);
    background: var(--color-grayish-black);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/*个人中心-我的信息*/
.personal__center {
    margin: 0 auto;
    display: grid;
    gap: 56px;
    color: var(--color-grayish-black);
}

.section__head .node__title {
    letter-spacing: var(--negative-letter-spacing-2);
}

.auth__info .label__text {
    background-color: var(--color-decorate-1);
    color: var(--color-bright-white);
    padding: 3px 6px;
    border-radius: 0 24px 24px 24px;
    margin-right: 8px;
}

.auth__info:last-child .label__text {
    background-color: var(--color-decorate-2);
}

.auth__info .value__text {
    opacity: .7;
    margin-right: 16px;
}

.auth__info .copy__icon {
    cursor: pointer;
    opacity: .7;
    margin-left: auto;
}

.auth__info .copy__icon:hover {
    opacity: 1;
}

.section__body .vip_action_link {
    color: var(--color-decorate-1);
}

.section__body .vip_action_link:hover {
    opacity: .7;
}

.section__body .list__group {
    background-color: var(--color-near-white);
}

.section__body .list__group .list__item {
    line-height: 24px;
}

/*个人中心-我的会员*/
.pass__list .pass__item,
.pass__list .pass__inner,
.pass__list .vip__membership {
    border-radius: 12px;
}

.pass__list .pass__item {
    background-color: rgba(255, 251, 236, 1);
}

.pass__list:last-child .pass__item {
    background-color: rgba(236, 238, 255, 1);
}

.pass__list .pass__inner {
    background-color: var(--color-bright-white);
    transform: translate(1em, 1em) rotate(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1);
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .05), 0 8px 10px -6px rgba(0, 0, 0, .05);
    box-shadow: 0 0 rgba(0, 0, 0, .5), 0 0 rgba(0, 0, 0, .5), var(--tw-shadow);
}

.pass__list .vip__membership {
    position: relative;
}

.vip__membership .pass__img {
    width: 54px;
}

.vip__membership .pass__type {
    font-weight: 600;
}

.vip__membership .pass__action {
    margin-left: auto;
    color: rgba(242, 186, 107, 1);
}

.pass__list:last-of-type .vip__membership .pass__action {  
    color: rgba(146, 107, 242, 1);
}

.vip__membership a.pass__action:hover {
    opacity: .8;
}

.pass__inner .pass__labels,
.pass__inner .pass__date {
    color: var(--color-bright-gray-black);
}

@media only screen and (max-width: 767px) {
    .vip__membership .pass__img {
        position: absolute;
        top: -36px;
        left: -40px;
    }
}

/*个人中心-我的主题*/
.theme__card {
    background-color: var(--color-bright-white);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, .08);
    border-radius: 12px;
    position: relative;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.theme__card:hover {
  border: 1px solid #383838;
}

.theme__card .theme__title h2 {
    font-weight: 500;
    letter-spacing: var(--negative-letter-spacing-2);
}

.theme__card .theme__down {
    position: absolute;
    bottom: -20px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
}

.theme__card .theme__img img {
  width: 100%;
}

.theme__card .theme__down .theme__link {
    line-height: 1;
    background-color: var(--color-grayish-black);
    border: 1px dashed var(--color-bright-white);
    color: var(--color-bright-white);
    height: 40px;
    border-radius: 32px;
    padding: 0 12px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 10px rgba(204, 197, 197, 0.07), -10px -10px 10px rgba(220, 220, 220, 0.07);
}

.theme__card .theme__down .theme__link:hover {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@media only screen and (max-width: 539px) {
    .theme__card .theme__title h2 {
        font-size: var(--font-size-18);
    }
    .theme__card .theme__down {
        bottom: -18px;
    }
}

/*个人中心-我的推广*/
.promotion {
    border: 1px solid var(--color-pure-gray-white);
    padding: 14px;
    border-radius: 32px;
    color: var(--color-decorate-1);
}

.promotion .promotion__link {
    font-weight: 500;
}

.promotion .copy__icon {
    opacity: .6;
    cursor: pointer;
}

.promotion .copy__icon:hover {
    opacity: 1;
}

.promotion__card {
    color: var(--color-bright-white);
    border: 2px dashed var(--color-bright-white);
    background-image: linear-gradient(229deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, .1));
    border-radius: 12px;
}

.c__yellow {
    background-color: rgba(249, 115, 22, 1);
    box-shadow: 10px 10px 10px rgba(249, 115, 22, .18), -10px -10px 10px rgba(249, 115, 22, .08);
}

.c__red {
    background-color: rgba(239, 68, 68, 1);
    box-shadow: 10px 10px 10px rgba(239, 68, 68, .18), -10px -10px 10px rgba(239, 68, 68, .08);
}

.c__green {
    background-color: rgba(34, 197, 94, 1);
    box-shadow: 10px 10px 10px rgba(34, 197, 94, .18), -10px -10px 10px rgba(34, 197, 94, .08);
}

.c__purple {
    background-color: rgba(99, 102, 241, 1);
    box-shadow: 10px 10px 10px rgba(99, 102, 241, .18), -10px -10px 10px rgba(99, 102, 241, .08);
}

.promotion__card .promotion__label {
    opacity: .8;
}

.section__box .btn__style:hover {
  color: var(--color-bright-white);
  background-color: var(--color-pure-black);
}

.text__numb {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0;
    margin-left: auto;
    line-height: 28px;
    width: 28px;
    border-radius: 50%;
    color: var(--color-bright-white);
    background-image: linear-gradient(229deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, .1));
}

.avatar__card {
    text-align: center;
    background-color: var(--color-near-white);
    border-radius: 12px;
    border: 1px solid var(--color-gray-white);
}

.avatar__card .avatar__img,
.kickback__card .avatar__img {
    border-radius: 50%;
    width: 52px;
    margin: 0 auto;
    border: 1px dashed var(--color-pure-gray-white);
}

.avatar__card span {
    display: block;
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
}

.kickback__card {
    border: 1px solid var(--color-gray-white);
    border-radius: 12px;
}

.kickback__card .avatar__img {
    margin: unset;
}

.kickback__card .kickback__details {
    width: 100%;
}

.kickback__details .kickback__price {
    color: rgba(249, 115, 22, 1);
}


/******************VIP页面*********************/
.theme__vip__page .page__hero {
    margin: 0 auto;
}

.theme__vip__page .pricing_plan .popular_plan {
    padding-top: 30px;
    padding-bottom: 30px;
}

.theme__vip__page .popular_plan .details_button {
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.18), -10px -10px 10px rgba(255, 255, 255, 0.12);
}

.theme__vip__page .popular_plan .details_button:hover {
    box-shadow: 20px 20px 20px rgba(255, 255, 255, 0.2), -20px -20px 20px rgba(255, 255, 255, 0.12);
}

.index_page .vip__card .details_button:disabled,
.theme__vip__page .vip__card .details_button:disabled {
    background-color: var(--color-deep-black);
    color: var(--color-bright-white);
    cursor: unset;
    box-shadow: 20px 20px 20px rgba(204, 197, 197, 0.35), -20px -20px 20px rgba(220, 220, 220, 0.35);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0));
}

.index_page .popular_plan .details_button:disabled,
.theme__vip__page .popular_plan .details_button:disabled {
    color: var(--color-deep-black);
    background-color: var(--color-bright-white);
    box-shadow: 20px 20px 20px rgba(255, 255, 255, 0.2), -20px -20px 20px rgba(255, 255, 255, 0.12);
}

.theme__vip__page .list__group {
    overflow: hidden;
}

.theme__vip__page .list__group .list__item {
    line-height: 32px;
    background-color: var(--color-near-white);
}

.theme__vip__page .list__group .list__item p {
    opacity: .7;
}

.theme__vip__page .subsection__title {
    font-weight: 400;
    letter-spacing: var(--negative-letter-spacing-2);
}

.theme__vip__page .subsection__desc {
    color: var(--color-bright-gray-black);
}


/******************文章内容页*********************/
.theme__article__page .page__hero {
    margin: 0 auto 38px;
    text-align: unset;
}

.theme__article__page .page__hero .page__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: var(--negative-letter-spacing-4);
  line-height: 1.2;
}

.article__meta {
    display: flex;
    align-items: center;
}

.article__meta span:not(:last-child) {
    margin-right: 10px;
}

.article__meta span,
.article__meta span a {
    color: var(--color-bright-gray-black);
}

.article__meta .meta__cat:hover a,
.article__meta .meta__cat:hover i,
.article__meta .meta__edit:hover a,
.article__meta .meta__edit:hover i {
    cursor: pointer;
    color: var(--color-grayish-black);
}

.article__meta .meta__edit {
    margin-left: auto;
}

.w__box {
    max-width: 820px;
}

.related__recommend {
    margin: 0 auto;
    letter-spacing: var(--negative-letter-spacing-2);
    color: var(--color-grayish-black);
}

.related__wraper {
    position: relative;
    margin: 0 auto;
}

.article__wraper {
    margin: 0 auto;
    border-radius: 12px;
}

@media only screen and (min-width: 767px) {
  /* .article__wraper {
    background-color: var(--color-near-white);
    padding: 15px 15px 0 15px;
  } */
}

.interaction__group {
    padding: 30px 0;
}

.interaction__group .interaction__btn {
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgba(136, 136, 136, 1);
    background: white;
    border: 1px dashed var(--color-gray-white);
}

.interaction__group .interaction__btn.likes__action {
    box-shadow: 0px 20px 20px -17px rgba(0, 0, 0, 0.3);
}

.interaction__group .interaction__btn.share__action {
    box-shadow: 0px 20px 20px -17px rgba(0, 0, 0, 0.3);
}

.interaction__group .interaction__btn.likes__action:hover,
.interaction__group .interaction__btn.share__action:hover {
    color: rgba(0, 0, 0, .85);
    box-shadow: 0px 20px 35px -16px rgba(0, 0, 0, 0.65);
}

.interaction__group .social__text {
    text-align: center;
}

.social__text i {
    font-size: var(--font-size-18);
}

.social__text p {
    font-size: var(--font-size-13);
}

.share-body {
  width: 240px;
}

.share-body .share-url {
  word-wrap: break-word;
  color: white;
  background-color: #000;
  text-align: center;
}

.share-body .share-desc {
  text-align: center;
  background-color: var(--color-bright-white);
}

.disclaimer {
    position: relative;
    text-align: left;
    border-bottom: medium;
    border-top: 1px solid rgba(237, 237, 237, 1);
    border-radius: 0px;
    box-shadow: none;
    padding-top: 14px;
    padding-bottom: 14px;
}

.disclaimer__body {
    width: var(--detail-content-width);
    margin: 0px auto;
    background-color: transparent;
}

.disclaimer__text {
    transition: all;
    color: rgba(136, 136, 136, 1);
    font-size: 12px;
    display: inline-block;
    border-radius: 0px;
}

.article__wraper .post__centent {
  list-style-position: inside;
}

.article__wraper .post__centent .aligncenter,
.article__wraper .post__centent .aligncenter img {
  margin: 0 auto;
}

.article__wraper .post__centent img {
  height: auto;
}

.article__wraper .post__centent > p {
  margin: 0 0 1.2em;
  word-spacing: .05rem;
  line-height: 1.7;
  font-size: var(--font-size-16);
}

.article__wraper .post__centent .wp-caption {
  width: 100% !important;
}

.article__wraper .post__centent > h1,
.article__wraper .post__centent > h2,
.article__wraper .post__centent > h3,
.article__wraper .post__centent > b,
.article__wraper .post__centent > strong {
  font-weight:600
}

.article__wraper .post__centent > h1 {
  margin:2em 0 1em;
  font-size:32px;
}

.article__wraper .post__centent > h2 {
  margin: 2em 0 1em;
  font-size: 28px;
}

.article__wraper .post__centent > h3 {
  margin: 2em 0 1em;
  font-size: 24px;
}

.article__wraper .post__centent > h4 {
  margin:1.5em 0 1em;
  font-size:20px
}

.article__wraper .post__centent > h5 {
  margin:1.2em 0 1em;
  font-size:16px
}

.article__wraper .post__centent > h6 {
  position: relative;
  padding-left: 18px;
  line-height: 1.46;
  border: 0;
  font-size: var(--font-size-18);
  margin-bottom: 10px;
}

.article__wraper .post__centent > h6::before {
  position: absolute;
  top: 3px;
  left: 0;
  content: "";
  width: 3px;
  height: calc(100% - 8px);
  border-radius: 3px;
  background-color: #2163e8;
  background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.15)),to(transparent));
  background-image: linear-gradient(180deg,rgba(255,255,255,.15),transparent);
}

/* blockquote card colors */
.article__wraper .post__centent > blockquote {
  --accent-color: rgb(32 32 54);
  --bg-color: rgb(30 145 254);
  --dot-color: rgb(131 131 131 / 35%);
  --text-color: rgb(0 0 0);
  --text-color-author: rgb(243 243 243);
}

/* blockquote card setup*/
.article__wraper .post__centent > blockquote {
  --padding: 1rem;
  padding: var(--padding);
  color: var(--text-color, black);
  font-weight: 600;
  /* background-color: var(--bg-color, white); */
  display: grid;
  gap: 1rem;
  background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
  background-size: 0.5rem 0.5rem;
  border-radius: 0.25rem;
  /* box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5) */
}

.article__wraper .post__centent > blockquote::before {
  --qHeight: 1.3rem;
  content: "";
  margin-left: calc(var(--padding) * -1);
  margin-top: calc(var(--padding) * -1);
  height: var(--qHeight);
  width: calc(var(--qHeight) * 1.1);
  background-image:
    radial-gradient(
      circle at bottom right,
      transparent calc(var(--qHeight) / 4 - 1px),
      var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), 
      transparent calc(var(--qHeight) / 2 + 1px)
    ),
    linear-gradient(var(--accent-color, black), var(--accent-color, black));
  background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
  background-position: top left, bottom left;
  background-repeat: space no-repeat
}

.article__wraper .post__centent > blockquote::after {
  content: "- John Doe";
  color: var(--text-color-author, white);
  background-color: var(--accent-color, black);
  justify-self: end;
  font-size: 0.75em;  
  padding: 0.5em 1em;
  border-radius: 0.25rem;
}

.article__wraper .post__centent > blockquote p {
  text-align: center;
}

.article__wraper .post__centent ol,
.article__wraper .post__centent ul {
  padding-left: 2em;
  overflow-wrap: break-word;
  display: grid;
  gap: 10px;
  margin-bottom: 1.2em;
  font-size: var(--font-size-16);
}

.article__wraper .post__centent ol li {
  list-style-type: decimal;
  line-height: 26px;
}

.article__wraper .post__centent ul li {
  list-style-type: disc;
  line-height: 26px;
}

/******************全屏模态层*********************/
.modal {
  display: -webkit-box;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  padding: 40px 56px;
  opacity: 0;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  pointer-events: none;
  /* overflow: auto */
}

@media only screen and (max-width: 767px) {
    .modal {
        /* display: block; */
        padding: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 110px 24px 40px
    }
}

.modal.open {
    opacity: 1;
    pointer-events: all
}

.modal__close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 44px;
    height: 44px;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
}

@media only screen and (max-width: 767px) {
    .modal__close {
        top: 24px;
        right: 24px
    }
}

.modal__close svg {
    width: 14px;
    height: 14px;
    fill: var(--color-bright-white);
}

.modal__close:hover {
    border-color: #fff
}

.modal__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1060px;
    margin: auto
}

/* @media only screen and (max-width: 767px) {
    .modal__container {
        margin: 0
    }
} */

.modal__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5)
}

@media only screen and (max-width: 767px) {
    .modal__backdrop {
        display: none
    }
}

.session__modal .modal--auth {
    opacity: 1;
    pointer-events: all;
}

/*支付层*/
.pay__wraper {
    width: 240px;
    background-color: var(--color-bright-white);
    border-radius: 25px 25px 12px 12px;
}

.pay__head {
    position: relative;
    height: 182px;
    background: #71463b;
    background: -moz-linear-gradient(-45deg, #71463b 8%, #fbcb83 83%);
    background: -webkit-linear-gradient(-45deg, #71463b 8%, #fbcb83 83%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#71463b', endColorstr='#fbcb83', GradientType=1);
    background: linear-gradient(135deg, #71463b 8%, #fbcb83 83%);
    border-radius: 25px 25px 0 0;
}

.svip .pay__head {
    background: #7000fe;
    background: -moz-linear-gradient(-45deg, #7000fe 8%, #b16cff 83%);
    background: -webkit-linear-gradient(-45deg, #7000fe 8%, #b16cff 83%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7000fe', endColorstr='#b16cff', GradientType=1);
    background: linear-gradient(135deg, #7000fe 8%, #b16cff 83%);
}

.pay__head::before {
    content: "";
    position: absolute;
    background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.8) 75%, #fff 100%);
    width: 100%;
    height: 100%;
    
}

.pay__head .pay__logo {
    width: 72px;
    margin: 15px 15px 5px;
    display: inline-block;
}

.pay__head .goods__img {
    position: absolute;
    right: 0;
    width: 120px;
    margin-top: 86px;
    margin-right: -42px;
}

.pay__head .goods__detail {
    padding: 0 15px;
    font-size: var(--font-size-13);
    color: #fff;
}

.pay__head .goods__detail h2 {
    font-size: 16px;
    padding-bottom: 6px;
    text-transform: uppercase;
}

.pay__head .goods__detail span {
    opacity: .86;
    color: black;
}

.pay__head .goods__text {
    display: inline-block;
    font-size: 72px;
    font-weight: 900;
    margin-left: 15px;
    margin-top: -42px;
    opacity: .05;
}

.pay__body {
    display: grid;
    gap: 10px;
}

.pay__staged__head {
    line-height: 32px;
    padding: 10px 0;
    border-radius: 32px;
}

.pay__staged__head .goods__price {
    color: rgba(117, 70, 52, 1);
    font-size: 32px;
    letter-spacing: var(--negative-letter-spacing-2);
}

.svip .pay__staged__head .goods__price {
    color: rgba(112, 56, 132, 1);
}

.pay__staged__head .pay__cdk__action {
    cursor: pointer;
    border: 1px solid rgba(240, 240, 240, 1);
    background-color: white;
    padding: 0px 8px;
    border-radius: 32px;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, .1), -15px -15px 20px rgba(0, 0, 0, .08);
}

.pay__staged__head .pay__cdk__action:hover {
    background: rgba(240, 240, 240, 1);
    border-color: var(--color-bright-white);
}

.pay__staged__cdk {
    display: none;
    padding: 10px;
    border: 1px dashed var(--color-pure-gray-white);
    border-radius: 32px;
}

.pay__staged__cdk input {
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.pay__staged__box .pay__item {
    padding: 10px;
    border-radius: 32px;
    border: 1px solid;
    border-color: var(--color-pure-gray-white);
    text-align: center;
    cursor: pointer;
}

.pay__staged__box .pay__item:not(:last-child) {
    margin-bottom: 10px;
}

#alipay {
    color: rgba(18, 118, 250, 1);
    border-color: rgba(18, 118, 250, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#alipay i,
#weixinpay i {
    font-size: larger;
    line-height: 0;
}

#alipay:hover {
    color: white;
    border-color: white;
    border-style: dashed;
    background-color: rgba(18, 118, 250, 1);
}

#weixinpay {
  color: rgba(4, 193, 95, 1);
  border-color: rgba(4, 193, 95, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#weixinpay:hover {
  color: white;
  border-color: white;
  border-style: dashed;
  background-color: rgba(4, 193, 95, 1);
}

.pay__staged__foot {
    padding: 10px;
    background: var(--color-near-white);
    border-radius: 10px;
}

.pay__staged__foot small font {
    color: var(--color-decorate-2);
}

.form__check {
    display: flex;
    margin-top: 6px;
}

.form__check__label {
    font-size: var(--font-size-13);
}

.form__check__label a {
    text-decoration: underline;
}

/**支付宝当面付样式 */
.modal.open .pay_popup_wrap {
  margin: 0 auto;
}
.modal.open .pay_body {
  max-width: 240px;
  margin: 0 auto;
  background: #262626;
  border-radius: 24px 24px 16px 16px;
  padding: 28px 28px 0 28px;
  border: 1px solid #ffffff;
  overflow: hidden;
}
.modal.open .alipay_body_color {
  background: #0069da;
}
.modal.open .wx_body_color {
  background: #00b93b;
}
.modal.open .alipay_body_color .qr_code_text {
  color: #0069da !important;
}
.modal.open .wx_body_color .qr_code_text {
  color: #00b93b !important;
}
.modal.open .pay_head {
  margin: -28px -28px 0 -28px;
  padding: 15px 0;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.open .pay_head > img {
  width: 120px;
}
.modal.open .pay_qrcode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.modal.open .pay_qrcode .qr_code_text {
  font-weight: bold;
  color: black;
  background: white;
  border-radius: 12px 12px 0 0;
  width: 200px;
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
}    
.modal.open .pay_qrcode img {
  /* width: 200px;
  height: 200px; */
  border-radius: 0px 0px 12px 12px;
}
.modal.open .pay_footer {
  color: white;
  padding: 12px 0;
  background: #2c2c2c;
  margin: 0 -28px;
  text-align: center;
  border-top: dashed 2px #262626;
}
.modal.open .alipay_footer_color {
  color: white;
  border-top: dashed 2px #0069da;
  background: #0074ef;
}
.modal.open .wx_footer_color {
  color: white;
  border-top: dashed 2px #00b93b;
  background: #00a656;
}



/******************彩色背景一*********************/
.color__bg__1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 680px;
    background-color: var(--color-near-white);
    opacity: .3;
}

/*houdini*/
@property --blink-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@keyframes blink-animation {
    0%, 100% {
        opacity: var(--blink-opacity, 1);
    }
    50% {
        opacity: 0;
    }
}

/*custom*/
@keyframes smoothBg {
    from {
        background-position: 50% 50%, 50% 50%;
    }
    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.color__bg__1 .wrapper {
    width: 100%;
    height: auto;
    position: relative;
}

.color__bg__1 .wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.9) 75%, #fff 100%);
}

.color__bg__1 .hero {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    background-color: var(--color-decorate-1);
    --stripes: repeating-linear-gradient(
        100deg,
        var(--color-bright-white) 0%,
        var(--color-bright-white) 7%,
        transparent 10%,
        transparent 12%,
        var(--color-bright-white) 16%
    );

    --rainbow: repeating-linear-gradient(
        100deg,
        #60a5fa 10%,
        #e879f9 15%,
        #60a5fa 20%,
        #5eead4 25%,
        #60a5fa 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
    filter: blur(10px) invert(100%);
    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--stripes), var(--rainbow);
        background-size: 200%, 100%;
        animation: smoothBg 60s linear infinite;
        background-attachment: fixed;
        mix-blend-mode: difference;
    }
}


/******************彩色背景二*********************/
.color__bg__2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 680px;
    background-color: var(--color-near-white);
    opacity: .8;
    overflow: hidden;
}

.color__bg__2 .wrapper {
    width: 100%;
    height: auto;
    position: relative;
}

.color__bg__2 .wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 680px;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.9) 75%, #fff 100%);
}

.color__bg__2 .hero {
    width: 100vw;
    height: 200vh;
    padding: 1rem;
    /* background-color: var(--color-gray-white); */
    background-image:
        radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw),
        radial-gradient(rgba(0, 128, 0, 0.3), rgba(0, 128, 0, 0) 40vw),
        radial-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0) 40vw),
        radial-gradient(rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0) 40vw),
        radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw);
    background-position:
        /* -40vw 14rem, 
      50% 10rem, 
      60vw 14rem, 
      -10vw calc(14rem + 20vw), 
      30vw calc(14rem + 20vw); */
        -26vw -6rem,
        50% -3rem,
        60vw -6rem,
        -10vw calc(16rem + 36vw),
        30vw calc(16rem + -20vw);
    background-size: 80vw 80vw;
    background-repeat: no-repeat;
}


/******************404页面配置*********************/
.index_page .page .spage__container {
  margin-top: 0;
  margin-bottom: 180px;
}

/* .theme__cate__page .page .spage__container {
  margin-top: 0;
} */

.page .spage__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  margin: auto;
  text-align: center;
  margin-top: 60px;
}

.page .spage__title {
  margin-bottom: 16px;
  font-size: 44px;
  font-weight: 450;
  line-height: 48px;
  margin-top: 48px;
}

.page .spage__content {
  max-width: 340px;
  margin: 0 auto 48px;
  font-size: 18px;
  line-height: 28px;
  color: #ADB7BE;
}

.spage {
  display: -webkit-box;
  display: flex;
  position: relative;
  min-height: 100vh;
  padding: 200px 0;
}
.spage .spage__background {
  position: absolute;
  inset: 0;
}
.spage .spage__background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: .12;
}
.spage .spage__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  margin: auto;
  text-align: center;
}
.spage .spage__title {
  margin-bottom: 16px;
  font-size: 44px;
  font-weight: 450;
  line-height: 48px;
}
.spage .spage__content {
  max-width: 340px;
  margin: 0 auto 48px;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-bright-gray-black);
}
.spage .spage__container .btn {
  display: -webkit-inline-box;
  display: inline-flex;
  width: auto;
}
.spage .btn--submit {
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
}
.spage .btn {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background: var(--color-decorate-1);
  border: 2px solid var(--color-decorate-1);
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  -webkit-transition: background .2s, border-color .2s, color .2s;
  transition: background .2s, border-color .2s, color .2s;
}
.spage .btn:hover {
  color: black;
  background-color: white;
  border-color: white;
}
.spage .spage__copyright {
  position: absolute;
  left: 0;
  bottom: 48px;
  width: 100%;
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  color: #4D4D4D;
  text-align: center;
  z-index: 2;
}


/******************下载页提示框*********************/
.text-center {
  background-color: white;
  padding: 15px;
  text-align: center;
  width: 240px;
  border-radius: 15px;
}

.text-center .text-danger {
  color: var(--color-decorate-2);
}

.text-center hr {
  opacity: .2;
}

.text-center .text-muted {
  color: var(--color-pure-gray-white);
}

/******************自定义数字分页样式*********************/
/* 重置分页默认样式 */
.custom-nav .pagination {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.custom-nav .pagination .page-numbers,
.custom-nav .pagination .prev,
.custom-nav .pagination .next {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.6s ease;
  color: #333; /* 文字颜色 */
  font-weight: 600;
}

/* 鼠标悬停效果 */
.custom-nav .pagination .page-numbers:hover,
.custom-nav .pagination .prev:hover,
.custom-nav .pagination .next:hover {
  background-color: #f0f0f0; /* 悬停背景色 */
  color: rgba(157, 157, 157, 1); /* 悬停文字颜色 */
}

/* 当前页样式 */
.custom-nav .pagination .current {
  background-color: #383838; /* 当前页背景色 */
  color: white; /* 当前页文字颜色 */
  pointer-events: none; /* 禁止点击 */
  cursor: default;
}

/* 上一页和下一页图标样式 */
.custom-nav .pagination i {
  font-size: 1rem; /* 图标大小 */
  line-height: 1;
  vertical-align: middle;
}

/* 分隔符样式 */
.custom-nav .pagination .dots {
  padding: 0;
  margin: 0 0.5rem;
  color: #999; /* 分隔符颜色 */
  font-size: 0.9em;
}

/* 移除 dots 在鼠标悬停时的背景色变化 */
.custom-nav .pagination .dots:hover {
  background-color: transparent; /* 或设定为与正常状态相同的颜色，保持不变 */
  cursor: default; /* 可选：改变光标形状，指示不可点击 */
}