/* 字体引入 */
@font-face {
  font-family: "Inter";
  src: url("./font/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-Medium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-SemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/advanced_fonts/Inter/Inter-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("./font/Inter-ExtraBold.otf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/fonts/Montserrat/Montserrat-Regular.ttf")
    format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Montserrat";
  src: url("./font/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Montserrat";
  src: url("./font/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Montserrat";
  src: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/css/fonts/Montserrat/Montserrat-Bold.ttf")
    format("truetype");
  font-weight: 700;
}

/* 网页配置 */
body {
  background-color: var(--bg-color);
}
.container {
  max-width: 1640px;
  padding-left: 0;
  padding-right: 0;
}

/* 公共标题样式 */
.jinxiang_public_title,
.jinxiang_public_title_white {
  font-family: var(--title-font-family);
  font-size: var(--font-64);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.jinxiang_public_title {
  color: var(--title-text-color);
}
.jinxiang_public_title_white {
  color: #fff;
}
.jinxiang_public_title_bar {
  width: 5.625rem;
  height: 0.3125rem;
  background: var(--color-primary);
  margin-top: calc(var(--gap-20) + var(--gap-4));
  border-radius: 2px;
}

/* 公共文字样式 */
.jinxiang_public_text,
.jinxiang_public_text_white {
  font-family: var(--font-family);
  font-size: var(--font-16);
  font-style: normal;
  font-weight: 400;
  line-height: calc(26 / 16);
}

.jinxiang_public_text {
  color: var(--text-color);
}
.jinxiang_public_text_white {
  color: #fff;
}

/* 公共按钮样式 */
.jinxiang_primary_btn {
  font-family: var(--font-family);
  font-size: var(--font-16);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  text-align: center;
  padding: 7.5px 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 46px;
  border: 1px solid transparent;
}
.jinxiang_primary_btn {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.jinxiang_primary_btn:hover {
  color: #fff;
  background: var(--color-second);
  border-color: var(--color-second);
}
.jinxiang_primary_btn:active {
  color: #fff;
  background: var(--color-second);
  border-color: var(--color-second);
}
.jinxiang_primary_btn svg {
  width: 0.875rem;
  height: 1rem;
  transform: rotate(0deg);
  fill: #fff;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.jinxiang_primary_btn:hover svg {
  transform: rotate(-45deg);
}

.jinxiang_primary_btn_white {
  color: var(--color-primary);
  background: #fff;
}
.jinxiang_primary_btn_white:hover {
  color: var(--color-second);
  background: #fff;
}
.jinxiang_primary_btn_white:active {
  color: var(--color-second);
  background: #fff;
}
.jinxiang_primary_btn_white svg {
  fill: var(--color-second);
}

/* 公共动画标题样式 - 仅提供动效，字体大小由使用者自行定义 */
.jinxiang_animated_title {
  display: inline-block;
  overflow: hidden;
}

.jinxiang_animated_title div {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.jinxiang_animated_title span,
.jinxiang_animated_title div > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  transition: none;
  margin: 0 0.1em;
}

.jinxiang_animated_title .title-highlight {
  color: var(--color-primary);
}

/* 隐私政策样式 */
.privacy-content {
  padding: 140px 0 var(--gap-100) !important;
}

/* 全局响应式 */
:root {
  --font-family: "Inter", sans-serif;
  --title-font-family: "Montserrat", sans-serif;
  --font-80: 80px;
  --font-70: 70px;
  --font-64: 64px;
  --font-60: 60px;
  --font-56: 56px;
  --font-50: 50px;
  --font-48: 48px;
  --font-46: 46px;
  --font-40: 40px;
  --font-36: 36px;
  --font-34: 34px;
  --font-32: 32px;
  --font-30: 30px;
  --font-28: 28px;
  --font-26: 26px;
  --font-24: 24px;
  --font-22: 22px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-15: 15px;
  --font-14: 14px;
  --font-12: 12px;

  --component-gap: 120px;
  --gap-100: 100px;
  --gap-90: 90px;
  --gap-80: 80px;
  --gap-70: 70px;
  --gap-60: 60px;
  --gap-50: 50px;
  --gap-40: 40px;
  --gap-30: 30px;
  --gap-20: 20px;
  --gap-10: 10px;
  --gap-5: 5px;
  --gap-4: 4px;
  --gap-3: 3px;
  --gap-2: 2px;
  --gap-1: 1px;
}

@media (max-width: 1700px) {
  .container {
    max-width: 1440px;
  }
}
@media (max-width: 1500px) {
  .container {
    max-width: 1200px;
  }
  :root {
    --font-80: 64px;
    --font-70: 60px;
    --font-64: 56px;
    --font-60: 52px;
    --font-56: 48px;
    --font-50: 46px;
    --font-48: 44px;
    --font-46: 42px;
    --font-40: 38px;
    --font-36: 34px;
    --font-34: 32px;
    --font-32: 30px;
    --font-30: 28px;
    --font-28: 26px;
    --font-26: 24px;
    --font-24: 22px;
    --font-22: 20px;
    --font-20: 18px;
    --font-18: 17px;
    --font-16: 15px;
    --font-15: 14px;
    --font-14: 14px;

    --component-gap: 106px;
    --gap-100: 90px;
    --gap-90: 80px;
    --gap-80: 70px;
    --gap-70: 60px;
    --gap-60: 50px;
    --gap-50: 44px;
    --gap-40: 34px;
    --gap-30: 26px;
    --gap-20: 16px;
    --gap-10: 10px;
    --gap-5: 4px;
    --gap-4: 4px;
    --gap-3: 3px;
    --gap-2: 2px;
    --gap-1: 1px;
  }
}

@media (max-width: 1280px) {
  .container {
    max-width: 942px;
  }
  .privacy-content {
    padding: 110px 0 var(--gap-100) !important;
  }
  :root {
    --font-80: 52px;
    --font-70: 50px;
    --font-64: 48px;
    --font-60: 46px;
    --font-56: 44px;
    --font-50: 42px;
    --font-48: 40px;
    --font-46: 38px;
    --font-40: 36px;
    --font-36: 26px;
    --font-34: 26px;
    --font-32: 26px;
    --font-30: 26px;
    --font-28: 24px;
    --font-26: 22px;
    --font-24: 20px;
    --font-22: 18px;
    --font-20: 17px;
    --font-18: 16px;
    --font-16: 15px;
    --font-15: 14px;
    --font-14: 14px;

    --component-gap: 95px;
    --gap-100: 80px;
    --gap-90: 75px;
    --gap-80: 65px;
    --gap-70: 55px;
    --gap-60: 45px;
    --gap-50: 40px;
    --gap-40: 30px;
    --gap-30: 25px;
    --gap-20: 15px;
    --gap-10: 8px;
    --gap-5: 4px;
    --gap-4: 3px;
    --gap-3: 3px;
    --gap-2: 2px;
    --gap-1: 1px;
  }
  .jinxiang_primary_btn {
    padding: 6px 18px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 718px;
  }
  .privacy-content {
    padding: 100px 0 var(--gap-100) !important;
  }
  :root {
    --font-80: 40px;
    --font-70: 36px;
    --font-64: 34px;
    --font-60: 32px;
    --font-56: 32px;
    --font-50: 30px;
    --font-48: 30px;
    --font-46: 28px;
    --font-40: 28px;
    --font-36: 26px;
    --font-34: 24px;
    --font-32: 24px;
    --font-30: 24px;
    --font-28: 22px;
    --font-26: 20px;
    --font-24: 18px;
    --font-22: 16px;
    --font-20: 15px;
    --font-18: 14px;
    --font-16: 14px;
    --font-15: 13px;
    --font-14: 12px;

    --component-gap: 82px;
    --gap-100: 70px;
    --gap-90: 60px;
    --gap-80: 50px;
    --gap-70: 40px;
    --gap-60: 35px;
    --gap-50: 30px;
    --gap-40: 25px;
    --gap-30: 20px;
    --gap-20: 12px;
    --gap-10: 6px;
    --gap-5: 3px;
    --gap-4: 3px;
    --gap-3: 2px;
    --gap-2: 2px;
    --gap-1: 1px;
  }
  .jinxiang_primary_btn {
    padding: 4px 12px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 20px;
  }
  .privacy-content {
    padding: 100px 20px var(--gap-100) !important;
  }
  :root {
    --font-80: 34px;
    --font-70: 32px;
    --font-64: 30px;
    --font-60: 30px;
    --font-56: 28px;
    --font-50: 28px;
    --font-48: 26px;
    --font-46: 24px;
    --font-40: 22px;
    --font-36: 20px;
    --font-34: 20px;
    --font-32: 20px;
    --font-30: 19px;
    --font-28: 18px;
    --font-26: 18px;
    --font-24: 16px;
    --font-22: 16px;
    --font-20: 14px;
    --font-18: 14px;
    --font-16: 13px;
    --font-15: 12px;
    --font-14: 12px;

    --component-gap: 52px;
    --gap-100: 40px;
    --gap-90: 35px;
    --gap-80: 30px;
    --gap-70: 25px;
    --gap-60: 22px;
    --gap-50: 20px;
    --gap-40: 18px;
    --gap-30: 15px;
    --gap-20: 12px;
    --gap-10: 5px;
    --gap-5: 3px;
    --gap-4: 2px;
    --gap-3: 2px;
    --gap-2: 2px;
    --gap-1: 1px;
  }
  .jinxiang_primary_btn {
    padding: 2px 7px;
  }
}

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 12px;
  }
  .privacy-content {
    padding: 70px 12px var(--gap-100) !important;
  }
  :root {
    --font-80: 30px;
    --font-70: 26px;
    --font-64: 24px;
    --font-60: 24px;
    --font-56: 24px;
    --font-50: 22px;
    --font-48: 22px;
    --font-46: 22px;
    --font-40: 20px;
    --font-36: 18px;
    --font-34: 18px;
    --font-32: 18px;
    --font-30: 17px;
    --font-28: 16px;
    --font-26: 16px;
    --font-24: 16px;
    --font-22: 15px;
    --font-20: 14px;
    --font-18: 13px;
    --font-16: 12px;
    --font-15: 12px;
    --font-14: 12px;

    --component-gap: 33px;
    --gap-100: 25px;
    --gap-90: 20px;
    --gap-80: 18px;
    --gap-70: 17px;
    --gap-60: 16px;
    --gap-50: 14px;
    --gap-40: 12px;
    --gap-30: 10px;
    --gap-20: 8px;
    --gap-10: 4px;
    --gap-5: 3px;
    --gap-4: 2px;
    --gap-3: 2px;
    --gap-2: 1px;
    --gap-1: 0px;
  }
  .jinxiang_primary_btn {
    padding: 2px 7px;
  }
}