@font-face {
  font-family: 'MiSans';
  src: url('https://okki-shop.oss-accelerate.aliyuncs.com/templates/shop-default/f60af748-0e15-4b5a-bf4a-99d98679b1d8-MiSansLatinVF.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
}

:root {
  --font-family: "MiSans", sans-serif;
  --title-font-family: "MiSans", sans-serif;
  --tiansheng-font-title:"MiSans", sans-serif;


  --page-gap-left: calc((100vw - 1440px) / 2);

  /* Brand colors from Figma */
  --color-primary: #3980f4;
  --color-second: #0e1f47;
  --color-primary-rgb: 57, 128, 244;
  --color-second-rgb: 14, 31, 71;
  --bg-color: #ffffff;
  --surface-soft: #f3f8ff;
  --surface-warm: #eef4ff;
  --surface-muted: #f8f8f8;
  --surface-dark: #202538;
  --title-text-color: #333333;
  --text-color: #333333;
  --text-color-second: #666666;
  --text-color-light: #ffffff;
  --border-color: #dddddd;
  --btn-hover: #2d6fe0;
  --btn-active: #1e5fcb;
  --btn-disabled: #92b8f7;
  --btn-disabled-text: rgba(255, 255, 255, 0.72);
  --button-radius: 34px;

  /* Effects */
  --shadow-soft: 0 18px 40px rgba(51, 51, 51, 0.12);
  --shadow-card: 0 10px 30px rgba(32, 37, 56, 0.08);
  --hero-gradient: linear-gradient(270deg, var(--surface-soft) 0%, var(--surface-warm) 100%);
  --second-gradient-270: linear-gradient(270deg, var(--color-second) 0%, var(--color-primary) 100%);

  /* Layout */
  --page-padding: max(16px, calc((100vw - 1600px) / 2));
  --root-container-spacing: 16px;
  --container-max-width: 1600px;
  --header-height: 88px;
  --section-space: 72px;
  --section-space-sm: 56px;
  --section-space-xs: 40px;
  --content-max-width: 774px;
  --component-gap: 120px;

  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;
  --spacing-5xl: 50px;
  --spacing-6xl: 64px;

  /* Typography */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-30: 30px;
  --font-size-46: 46px;
  --font-size-nav: max(1rem, 14px);
  --font-size-sm: max(0.875rem, 12px);
  --font-size-md: max(1rem, 14px);
  --font-size-lg: max(1.125rem, 16px);
  --font-size-xl: max(1.375rem, 18px);
  --font-size-h1: clamp(2.5rem, 3vw, 2.875rem);
  --font-size-h2: clamp(2rem, 2.4vw, 2.5rem);
  --font-size-h3: clamp(1.375rem, 1.6vw, 1.75rem);
  --font-size-h4: clamp(1.125rem, 1.2vw, 1.375rem);
  --font-weight-base: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
  --font-weight-xl: 700;


  --font-68: max(30px, 4.25rem);
  --font-66: max(30px, 4.125rem);
  --font-64: max(30px, 4rem);
  --font-62: max(30px, 3.875rem);
  --font-60: max(30px, 3.75rem);
  --font-58: max(30px, 3.625rem);
  --font-56: max(30px, 3.5rem);
  --font-54: max(30px, 3.375rem);
  --font-52: max(28px, 3.25rem);
  --font-50: max(28px, 3.125rem);
  --font-48: max(28px, 3rem);
  --font-46: max(26px, 2.875rem);
  --font-44: max(26px, 2.75rem);
  --font-42: max(26px, 2.625rem);
  --font-40: max(24px, 2.5rem);
  --font-38: max(24px, 2.375rem);
  --font-36: max(24px, 2.25rem);
  --font-34: max(20px, 2.125rem);
  --font-32: max(20px, 2rem);
  --font-30: max(20px, 1.875rem);
  --font-28: max(18px, 1.75rem);
  --font-26: max(18px, 1.625rem);
  --font-24: max(16px, 1.5rem);
  --font-22: max(14px, 1.375rem);
  --font-20: max(14px, 1.25rem);
  --font-18: max(12px, 1.125rem);
  --font-16: max(12px, 1rem);
  --font-14: max(12px, 0.875rem);

  /* Semantic typography */
  --tiansheng-hero-title-size: var(--font-size-46);
  --tiansheng-subtitle-size: var(--font-size-22);
  --tiansheng-body-lg-size: var(--font-size-18);
  --tiansheng-button-size: var(--font-size-16);
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--root-container-spacing);
  padding-right: var(--root-container-spacing);
  box-sizing: border-box;
}

.container-mini {
  width: 100%;
  max-width: 1470px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

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

.tiansheng-section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.tiansheng-title-display {
  color: var(--title-text-color);
  font-size: var(--tiansheng-hero-title-size);
  font-weight: var(--font-weight-xl);
  line-height: 1.087;
}

.tiansheng-title-display .is-accent,
.tiansheng-title-display em {
  color: var(--color-primary);
  font-style: normal;
}

.tiansheng-subtitle {
  color: var(--text-color-second);
  font-size: var(--tiansheng-subtitle-size);
  font-weight: var(--font-weight-lg);
  line-height: 1.5;
}

.tiansheng-text-lead {
  color: var(--text-color-second);
  font-size: var(--tiansheng-body-lg-size);
  font-weight: var(--font-weight-base);
  line-height: 1.667;
}

.tiansheng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--text-color-light);
  font-size: var(--tiansheng-button-size);
  font-style: normal;
  font-weight: var(--font-weight-md);
  line-height: normal;
  white-space: nowrap;
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
  cursor: pointer;
}

.tiansheng-btn:hover {
  transform: translateY(-1px);
}

.tiansheng-btn:active {
  transform: translateY(0);
}

.tiansheng-btn--primary {
  background: var(--tiansheng-btn-primary-bg);
  border-color: transparent;
  color: var(--text-color-light);
  box-shadow: none;
}

.tiansheng-btn--primary:hover {
  background: var(--tiansheng-btn-primary-hover);
  border-color: transparent;
  color: var(--text-color-light);
}

.tiansheng-btn--primary:active {
  background: var(--tiansheng-btn-primary-active);
  border-color: transparent;
  color: var(--text-color-light);
}

.tiansheng-btn--secondary {
  background: var(--color-second);
  border-color: var(--color-second);
  color: var(--text-color-light);
}

.tiansheng-btn--secondary:hover {
  background: #173063;
  border-color: #173063;
}

.tiansheng-btn--secondary:active {
  background: #11254a;
  border-color: #11254a;
}

.tiansheng-btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tiansheng-btn--outline:hover,
.tiansheng-btn--outline:active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-color-light);
}

.tiansheng-btn[disabled],
.tiansheng-btn.is-disabled,
.tiansheng-btn[aria-disabled="true"] {
  background: var(--tiansheng-btn-primary-disabled);
  border-color: transparent;
  color: var(--tiansheng-btn-primary-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.tiansheng-btn--sm {
  min-width: 108px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.tiansheng-btn--lg {
  min-width: 236px;
  min-height: 54px;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

.tiansheng-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
}


.inqury-form .input-wrap {
  padding: 1.25rem 3.125rem 1.25rem 0rem !important;
}

.inqury-form .char-count {
  display: none !important;
}

.inqury-form .input-label {
  color: #FFF !important;
  font-size: var(--font-18) !important;
  font-weight: 600 !important;
  line-height: normal !important;
}

.inqury-form .one-line-input,
.inqury-form .phone-wrap .phone_number {
  border-radius: 30px !important;
  border: 0.0625rem solid #C9C9C9 !important;
  background: #FFF !important;
  height: max(3.125rem, 36px) !important;
}

.inqury-form .textarea-input {
  border-radius: 1.875rem !important;
  border: 0.0625rem solid #C9C9C9 !important;
  background: #FFF !important;
}

.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
  height: max(3.125rem, 36px) !important;
  border-radius: 50px !important;
  border: 1px solid #C9C9C9 !important;
  background: #FFF !important;
  padding: 0 0.75rem !important;
}

.inqury-form .input-wrap .input-wrap-box {
  gap: 1rem !important;
}

.inqury-form .phone-wrap .bootstrap-select {
  /* height: max(3.125rem, 36px) !important; */
  border-radius: 50px !important;
  border: none !important;
  background: #FFF !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  line-height: max(3.125rem, 36px) !important;
}

.inqury-form input[type="radio"]+label:before,
.inqury-form input[type="checkbox"]+label:before {
  border-radius: 50%;
  background: rgba(255, 255, 255, 1) !important;
  border: 1px solid rgba(201, 201, 201, 1) !important;
  width: max(1.5625rem, 16px) !important;
  height: max(1.5625rem, 16px) !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.inqury-form input[type="radio"]:checked+label:before,
.inqury-form input[type="checkbox"]:checked+label:before {
  content: "\2713" !important;
  font-size: 1rem !important;
  color: #ffffff;
  font-weight: 800 !important;
  background: var(--color-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.inqury-form input[type="radio"]:checked+label:after,
.inqury-form input[type="checkbox"]:checked+label:after {
  content: none !important;
  display: none !important;
}

.inqury-form input[type="radio"]+label,
.inqury-form input[type="checkbox"]+label {
  color: #FFF !important;
  font-size: var(--font-18) !important;
  font-weight: 400 !important;
  line-height: normal !important;
  padding-left: calc(max(1.5625rem, 16px) + 0.5rem) !important;
}




.inqury-form .radio-wrap>div,
.inqury-form .checkbox-wrap>div {
  width: calc((100% - 48px - 3.125rem) / 3) !important;
}

.inqury-form .radio-wrap.horizontal .input-label,
.inqury-form .checkbox-wrap.horizontal .input-label,
.inqury-form .radio-wrap.horizontal .input-placeholder,
.inqury-form .checkbox-wrap.horizontal .input-placeholder {
  width: 100% !important;
}

.inqury-form .inqury_submit {
  font-size: var(--font-18) !important;
  font-weight: 600 !important;
  line-height: normal !important;
}



/* page size pagination */

#pagesize ul li a {
  width: max(3.125rem, 24px) !important;
  height: max(3.125rem, 24px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  color: #333 !important;
  font-size: var(--font-20) !important;
  font-weight: 600 !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

#pagesize ul li a.disabled {
  border: none !important;
  background: transparent !important;
  color: #CCC !important;
}

#pagesize ul li a svg {
  width: auto !important;
  height: max(1.125rem, 10px) !important;
  object-fit: contain;
  object-position: center;
}

#pagesize ul li a.disabled svg path {
  stroke: #CCC !important;
}

#pagesize ul li a.active {
  background: var(--color-primary) !important;
  color: #FFF !important;
}

#pagesize ul {
  gap: 0.625rem !important;
}

:root {
  --tiansheng-btn-primary-bg: #3980f4;
  --tiansheng-btn-primary-hover: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%), linear-gradient(90deg, rgb(57, 128, 244) 0%, rgb(57, 128, 244) 100%);
  --tiansheng-btn-primary-active: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(90deg, rgb(57, 128, 244) 0%, rgb(57, 128, 244) 100%);
  --tiansheng-btn-primary-disabled: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  --tiansheng-btn-primary-disabled-text: #ffffff;
}

@media screen and (min-width: 576px) {
  :root {
    --root-container-spacing: 24px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --root-container-spacing: 40px;
    --section-space: 88px;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --root-container-spacing: 50px;
    --section-space: 100px;
  }
}

@media screen and (min-width: 1400px) {
  :root {
    --root-container-spacing: 50px;
    --section-space: 110px;
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --root-container-spacing: 50px;
  }
}

@media screen and (max-width: 1500px) {
  :root {
    --page-padding: max(16px, calc((100vw - 1280px) / 2));
    --container-max-width: 1280px;
    --root-container-spacing: 40px;
    --tiansheng-hero-title-size: 42px;
    --tiansheng-subtitle-size: 20px;
    --tiansheng-body-lg-size: 17px;
    --page-gap-left: calc((100vw - 1200px) / 2);
  }

  .container-mini {
    max-width: 1230px;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --page-padding: max(16px, calc((100vw - 1140px) / 2));
    --container-max-width: 1140px;
    --root-container-spacing: 32px;
    --section-space: 88px;
    --tiansheng-hero-title-size: 40px;
    --tiansheng-subtitle-size: 20px;
    --component-gap: 95px;
    --page-gap-left: calc((100vw - 1100px) / 2);
  }

  .container-mini {
    max-width: 1130px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --page-padding: max(16px, calc((100vw - 960px) / 2));
    --container-max-width: 960px;
    --root-container-spacing: 24px;
    --section-space: 72px;
    --tiansheng-hero-title-size: 36px;
    --tiansheng-subtitle-size: 18px;
    --tiansheng-body-lg-size: 16px;
    --page-gap-left: calc((100vw - 930px) / 2);
  }

  .container-mini {
    max-width: 960px;
  }
}

@media screen and (max-width: 991px) {
  :root {
    --page-padding: max(16px, calc((100vw - 720px) / 2));
    --container-max-width: 720px;
    --root-container-spacing: 20px;
    --header-height: 72px;
    --section-space: 64px;
    --tiansheng-hero-title-size: 32px;
    --tiansheng-subtitle-size: 18px;
    --tiansheng-body-lg-size: 16px;
    --component-gap: 70px;
    --page-gap-left: calc((100vw - 720px) / 2);
  }

  .inqury-form .radio-wrap>div,
  .inqury-form .checkbox-wrap>div {
    width: auto !important;
  }

  .container-mini {
    max-width: 720px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --page-padding: max(16px, calc((100vw - 540px) / 2));
    --container-max-width: 540px;
    --root-container-spacing: 16px;
    --component-gap: 45px;
    --page-gap-left: calc((100vw - 540px) / 2);
  }

  .inqury-form .input-wrap {
    padding: 1.25rem 0rem 1.25rem 0rem !important;
  }

  .tiansheng-section {
    padding-top: var(--section-space-sm);
    padding-bottom: var(--section-space-sm);
  }

  .tiansheng-btn {
    min-height: 46px;
    padding: 8px 24px;
  }

  .tiansheng-btn--lg {
    min-width: 210px;
    min-height: 50px;
    padding: 12px 32px;
    font-size: 17px;
  }

  .container-mini {
    max-width: 540px;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --page-padding: max(16px, calc((100vw - 450px) / 2));
    --container-max-width: 450px;
    --root-container-spacing: 16px;
    --section-space: 72px;
    --section-space-sm: 48px;
    --tiansheng-hero-title-size: 32px;
    --tiansheng-subtitle-size: 18px;
    --tiansheng-body-lg-size: 16px;
    --tiansheng-button-size: 15px;
    --component-gap: 20px;
    --page-gap-left: calc((100vw - 450px) / 2);
  }

  .tiansheng-section {
    padding-top: var(--section-space-xs);
    padding-bottom: var(--section-space-xs);
  }

  .tiansheng-btn {
    min-height: 44px;
    padding: 8px 20px;
    line-height: 1.75;
  }

  .tiansheng-btn--lg {
    min-width: 210px;
    min-height: 50px;
    padding: 12px 32px;
    line-height: normal;
  }

  .container-mini {
    max-width: 450px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --page-padding: max(16px, calc((100vw - 360px) / 2));
    --container-max-width: 360px;
    --page-gap-left: calc((100vw - 360px) / 2);
  }

  .container-mini {
    max-width: 360px;
  }
}