/* ====== 默认桌面尺寸（≥1920px） ====== */
@media screen and (width >= 1661px) {
  :root {
    font-size: 0.52vw;
  }
}

@media screen and (width <= 1660px) and (width >= 1500px) {
  :root {
    font-size: 0.6vw;
  }
}

@media screen and (width <= 1499px) and (width >= 1399px) {
  :root {
    font-size: 0.7vw;
  }
}

@media screen and (width <= 1399px) and (width >= 1300px) {
  :root {
    font-size: 0.72vw;
  }
}

@media screen and (width <= 1299px) and (width >= 1200px) {
  :root {
    font-size: 0.72vw;
  }
}

@media screen and (width <= 1199px) and (width >= 1100px) {
  :root {
    font-size: 0.72vw;
  }
}

@media screen and (width <= 1099px) and (width >= 900px) {
  :root {
    font-size: 0.78vw;
  }
}

@media screen and (width <= 899px) and (width >= 769px) {
  :root {
    font-size: 0.8vw;
  }
}

@media screen and (width <= 768px) {
  :root {
    --header-height: 6.6rem;

    font-size: clamp(10px, 0.52vw, 12px);
  }

  .show-pc {
    display: none !important;
  }
}

/* Exo */
@font-face {
  font-family: Exo;
  src: url('../font/Exo-VariableFont_wght.ttf');
  font-style: normal;
  font-display: swap; /* 重要：优化加载性能 */
}

/* Exo-Italic-VariableFont_wght 斜体 */
@font-face {
  font-family: ExoItalic;
  src: url('../font/Exo-Italic-VariableFont_wght.ttf');
  font-style: normal;
  font-display: swap; /* 重要：优化加载性能 */
}

/* RougeScript-Regular */
@font-face {
  font-family: RougeScript;
  src: url('../font/RougeScript-Regular.ttf');
  font-style: normal;
  font-display: swap; /* 重要：优化加载性能 */
}

/* VinaSans-Regular */
@font-face {
  font-family: VinaSans;
  src: url('../font/VinaSans-Regular.ttf');
  font-style: normal;
  font-display: swap;
}

/* 默认字体 Noto Sans */
@font-face {
  font-family: NotoSans;

  src: url('../font/NotoSans-VariableFont_wdth,wght.ttf');
  font-style: normal;
  font-display: swap;
}

:root {
  /* 安全域 1200px */
  --scc-pc-safe-area: 120rem;

  /* PC 外框公共样式 */
  .scc-base-section {
    max-width: var(--scc-pc-safe-area);
    margin: 0 auto;
    margin-bottom: 9.6rem;
  }

  /* ---- 颜色系统 ---- */
  --scc-color-primary: #34c8e5;

  /* #333333  用于页面标题、文字信息 */
  --scc-color-text-primary: #333;

  /*  #323232 用于全站富文本描述性文字 */
  --scc-color-text-secondary: #323232;

  /* #ffffff 常规白色用于banner上的文字及标题 */
  --scc-color-white: #fff;

  /* #000000 30% 常规黑色用于不透明度降低的蒙版 */
  --scc-color-black: #000;

  /* #FF5858 提示色 */
  --scc-color-warning: #ff5858;

  /* #666666 面包屑颜色 */
  --scc-color-breadcrumb: #666;

  /* 辅助色 */

  /* 渐变色 渐变背景色 */
  --scc-color-gradient: linear-gradient(
    127.96deg,
    #6e6e6e 0.42%,
    #555b5d 55.48%,
    #454545 98.16%
  );

  /* #A6A6A6 搜索框还有一些卡片式外框颜色 */
  --scc-color-gray: #a6a6a6;

  /* #9BA7B2  询盘框内的提示性文案 */
  --scc-color-gray-light: #9ba7b2;

  /* #D3D3D3 用于线，表格外框，图片外框 */
  --scc-color-light-gray: #d3d3d3;

  /* #F6F6F6 用于全网站的背景颜色，接近白色但不是白色 */
  --scc-color-light-gray-2: #f6f6f6;

  /*  #D2F1F7 用于详情页表格的背景 */
  --scc-color-light-blue: #d2f1f7;

  /*  #D2F1F7 22%主题色，详情页评论区背景色 */
  --scc-color-light-blue-22: rgb(210 241 247 / 22%);

  /* h1 */
  --scc-font-h1-size: 3.2rem;
  --scc-font-h1-weight: 600;
  --scc-font-h1-line-height: 3.2rem;

  /* h2 */
  --scc-font-h2-size: 2.8rem;
  --scc-font-h2-weight: 600;
  --scc-font-h2-line-height: auto;

  /* h3 */
  --scc-font-h3-size: 2.2rem;
  --scc-font-h3-weight: 500;
  --scc-font-h3-line-height: auto;

  /* h4 */
  --scc-font-h4-weight: 500;
  --scc-font-h4-size: 1.9rem;
  --scc-font-h4-line-height: 3.2rem;

  /* 如标题描述文字；按钮的文字；富文本，导航上的文字 */
  --scc-font-title-size: 1.6rem;

  /* 正文 */
  --scc-font-body-size: 1.6rem;

  /* 用于全站描述性文字 */
  --scc-font-description-size: 1.4rem;

  /* header 高度 */
  --scc-header-height: 18.7rem;

  /* 隐藏 部分Header高度后的高度 */
  --dm-header-hidden-height: 6.8rem;
}

* {
  font-family: NotoSans, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue ',
    Exo, sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

html {
  font-size: 10px; /* 固定 1rem = 10px */
}

body {
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
}

body .oc-icon {
  opacity: 0;
  font-size: inherit;
  font-weight: 400;
  transition: opacity 0.5s linear;
}

.fonts-loaded .oc-icon {
  opacity: 1;
}

@media screen and (width <=768px) {
  :root {
    --scc-font-h1-size: 4.8rem;
    --scc-font-h1-weight: 400;
    --scc-font-h1-line-height: 4.8rem;

    /* h2 */
    --scc-font-h2-size: 3.6rem;
    --scc-font-h2-weight: 600;
    --scc-font-h2-line-height: 6.6rem;

    /* h3 */
    --scc-font-h3-weight: 500;
    --scc-font-h3-size: 3.4rem;
    --scc-font-h3-line-height: 4.2rem;

    /* h4 */
    --scc-font-h4-weight: 500;
    --scc-font-h4-size: 3rem;
    --scc-font-h4-line-height: 3.6rem;

    /* 如标题描述文字；按钮的文字；富文本，导航上的文字 */
    --scc-font-title-size: 1.9rem;

    /* 正文 */
    --scc-font-body-size: 1.7rem;

    /* 用于全站描述性文字 */
    --scc-font-description-size: 1.7rem;

    /* header 高度 */
    --scc-header-height: 11.1rem;
  }

  /* PC 外框公共样式 */
  .scc-base-section {
    width: 100%;
    padding: 0 3rem;
    margin-bottom: 9.6rem;
  }
}

button {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  background-color: #fff;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

a img {
  display: block;
}

input {
  font-size: inherit;
  background: none;
  outline: none;
  border: none;
}

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

textarea {
  font-size: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block: 0;
  margin-inline-start: 0;
}

.text-ellipsis-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-ellipsis-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text-ellipsis-4 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.text-ellipsis-5 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

h1 {
  font-size: 3.2rem !important;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 2.8rem !important;
}

h3 {
  font-size: 2.2rem !important;
}

h4 {
  font-size: 1.9rem !important;
  font-weight: 700;
  color: var(--scc-color-text-primary);
  margin: 0;
}

/* 富文本重置样式 */
.scc-rich-text {
  font-size: 1.6rem;
  overflow-x: auto;
  line-height: 2.4rem;
  font-weight: 400;
  color: var(--scc-color-text-primary);
}

.scc-rich-text h1,
.scc-rich-text h2,
.scc-rich-text h3,
.scc-rich-text h4,
.scc-rich-text h5 {
  margin: 2.1rem 0;
  line-height: 100%;
  font-family: Exo, sans-serif;
}

.scc-rich-text p {
  color: var(--scc-color-text-secondary);
  text-indent: 0;
}

.scc-rich-text a {
  position: relative;
  color: var(--scc-color-primary);
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s;
}

.scc-rich-text a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* 调整下划线位置 */
  width: 100%;
  height: 1px; /* 下划线粗细 */
  background-color: var(--scc-color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.scc-rich-text a:hover {
  color: var(--scc-color-primary);
}

.scc-rich-text a:hover::after {
  transform: scaleX(1);
}

/* 恢复默认样式 */
.scc-rich-text ul {
  list-style: disc !important;
  padding-inline-start: 1.2em;
}

.scc-rich-text ul,
.scc-rich-text ol {
  margin: 2rem 0;
  padding-inline-start: 1.2em;
}

/*  */

.scc-rich-text ul li {
  margin-bottom: 2.1rem; /* 设置 li 元素之间的间距 */
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.scc-rich-text table {
  display: inline-block;
  vertical-align: top;
  overflow-x: auto;
  max-width: 100%;
}

table,
tr td,
tr th {
  margin: 2rem 0;
  word-break: keep-all;
  white-space: normal;
  border: 0.1rem solid var(--scc-color-light-gray);
}

.scc-rich-text img {
  max-width: 100%;
}

.scc-toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scc-toast {
  position: relative;
  padding: 1rem 5.3rem;
  min-height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #242424;
  font-weight: 400;
  gap: 1.2rem;
  border-radius: 1.2rem;
  background-color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.scc-toast.scc-toast-success .oc-icon {
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--scc-color-primary);
}

.scc-toast.scc-toast-error .oc-icon::before {
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--scc-color-warning);
}

/* 默认隐藏滚动条 */
::-webkit-scrollbar {
  width: 0.9rem; /* 滚动条宽度，iOS 滚动条较细 */
  height: 0.9rem; /* 横向滚动条高度 */
  background-color: transparent; /* 滚动条背景透明 */
  transition: opacity 0.3s ease;
  opacity: 0; /* 默认隐藏滚动条 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4); /* 半透明的滑块 */
  border-radius: 10px; /* 圆角效果 */
  transition: background-color 0.3s ease;
  transition: all 0.3s ease;
}

/* 滚动时显示滚动条 */
::-webkit-scrollbar:hover {
  opacity: 1; /* 鼠标悬停时显示滚动条 */
}

/* 鼠标滑过滑块时的效果 */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.6); /* 滑块变得更深 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent; /* 透明的轨道 */
}