@charset "UTF-8";
:root {
  --color-primary: #e60012;
  --color-secondary: #fa6109;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #f5222d;
  --color-info: #13c2c2;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --header-height: 100;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --color-text-base: var(--gray-700); /* 主要文本颜色 */
  --color-text-primary: var(--gray-900); /* 主要文本颜色 */
  --color-text-secondary: var(--gray-600); /* 次要文本颜色 */
  --color-text-muted: var(--gray-500); /* 微弱文本颜色 */
  --color-text-inverse: var(--gray-50); /* 反色文本 (通常用于深色背景) */
  --color-text-link: var(--color-primary); /* 链接文本颜色 */
  --color-bg: var(--color-white); /* 页面主体背景色 */
  --color-bg-light: #e1e9f3; /* 浅色背景 */
  --color-bg-page: var(--gray-300); /* 页面主体背景色 */
  --color-bg-gray: #f5f5f5; /* 页面背景色 */
  --color-bg-card: var(--gray-100); /* 卡片背景色 */
  --color-bg-modal: var(--color-white); /* 模态框背景色 */
  --color-bg-header: var(--color-white); /* 头部背景色 */
  --color-bg-footer: var(--gray-900); /* 底部背景色 */
  --color-bg-selected: var(--gray-200); /* 选中项背景色 */
  --color-bg-hover: var(--gray-100); /* 悬停背景色 */
  --color-border: var(--gray-300);
  --color-border-light: var(--gray-100);
  --color-border-dark: var(--gray-900);
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-transparent-primary-80)
  );
  --gradient-gray: linear-gradient(to bottom, #e6e7eb, #c4c8d1);
  --gradient-dark: linear-gradient(to bottom, #949fb1, #dbe2ea);
  --gradient-page: linear-gradient(180deg, rgba(0, 138, 237, 0.15) 0%, rgba(0, 138, 237, 1) 100%);
  --color-transparent-white-5: rgba(255, 255, 255, 0.05);
  --color-transparent-white-10: rgba(255, 255, 255, 0.1);
  --color-transparent-white-20: rgba(255, 255, 255, 0.2);
  --color-transparent-white-30: rgba(255, 255, 255, 0.3);
  --color-transparent-white-50: rgba(255, 255, 255, 0.5);
  --color-transparent-white-80: rgba(255, 255, 255, 0.8);
  --color-transparent-white-90: rgba(255, 255, 255, 0.9);
  --color-transparent-black-5: rgba(0, 0, 0, 0.05);
  --color-transparent-black-10: rgba(0, 0, 0, 0.1);
  --color-transparent-black-20: rgba(0, 0, 0, 0.2);
  --color-transparent-black-30: rgba(0, 0, 0, 0.3);
  --color-transparent-black-50: rgba(0, 0, 0, 0.5);
  --color-transparent-black-80: rgba(0, 0, 0, 0.8);
  --color-transparent-black-90: rgba(0, 0, 0, 0.9);
  --color-transparent-primary-5: rgba(255, 0, 0, 0.05);
  --color-transparent-primary-10: rgba(255, 0, 0, 0.1);
  --color-transparent-primary-20: rgba(255, 0, 0, 0.2);
  --color-transparent-primary-30: rgba(255, 0, 0, 0.3);
  --color-transparent-primary-50: rgba(255, 0, 0, 0.5);
  --color-transparent-primary-80: rgba(255, 0, 0, 0.8);
  --color-transparent-primary-90: rgba(255, 0, 0, 0.9);
}

:where(*, *::before, *::after) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:where(*) {
  margin: 0;
  padding: 0;
}

:where(html, body) {
  height: 100%;
}

:where(body) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(a) {
  color: var(--color-text-secondary);
  text-decoration: none;
}
:where(a):hover, :where(a):focus {
  color: var(--color-text-link);
}

:where(ul, ol) {
  list-style: none;
}

:where(img, picture, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}
:where(input, button, textarea, select):focus {
  outline: none;
  outline-offset: 2px;
}

:where(button) {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
:where(button):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  -ms-hyphens: auto;
      hyphens: auto;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

:where(code, kbd, pre, samp) {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

:where([hidden]) {
  display: none !important;
}

:where(input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

:where(input[type=number]) {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

:where(textarea) {
  resize: vertical;
  min-height: 3em;
}

:where(::-moz-selection) {
  background-color: rgba(0, 123, 255, 0.3);
  color: inherit;
}

:where(::selection) {
  background-color: rgba(0, 123, 255, 0.3);
  color: inherit;
}

:where(:focus-visible) {
  outline: none;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.container-full {
  width: clamp(900px, 93.75vw, 1800px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .container-full {
    width: 94vw;
  }
}

.container {
  width: clamp(700px, 72.9166666667vw, 1400px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .container {
    width: 92vw;
  }
}

main.page {
  margin-top: clamp(40px, 4.1666666667vw, 80px);
}

.layout-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.layout-page .page-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
}
@media (min-width: 1024px) {
  .layout-page .page-main {
    margin-left: clamp(27px, 2.8125vw, 54px);
  }
}

.section-title {
  text-align: center;
  margin-bottom: clamp(25px, 2.6041666667vw, 50px);
}
.section-title h1 {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  color: var(--color-text-primary);
  font-weight: 600;
  margin-bottom: clamp(6px, 0.625vw, 12px);
}
@media (max-width: 1023px) {
  .section-title h1 {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.section-title .tips {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-secondary);
}
@media (max-width: 1023px) {
  .section-title .tips {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.section-title .more {
  --max-width: clamp(70px, 7.2916666667vw, 140px);
  --height: clamp(24px, 2.5vw, 48px);
  --border-radius: clamp(12px, 1.25vw, 24px);
  --border-width: clamp(1px, 0.1041666667vw, 2px);
  --font-size: clamp(9px, 0.9375vw, 18px);
  --svg-size: clamp(9px, 0.9375vw, 18px);
  --pseudo-size: calc(100% + clamp(1px, 0.1041666667vw, 2px) * 2);
  max-width: var(--max-width);
  height: var(--height);
  color: var(--color-white);
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  margin: auto;
  position: relative;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  overflow: hidden;
  z-index: 1;
  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;
}
.section-title .more span {
  font-size: var(--font-size);
  z-index: 2;
}
.section-title .more svg {
  width: var(--svg-size);
  height: var(--svg-size);
  z-index: 2;
}
.section-title .more::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: 1;
  width: var(--pseudo-size);
  height: var(--pseudo-size);
  background-color: var(--color-white);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right center;
          transform-origin: right center;
  border-radius: clamp(12px, 1.25vw, 24px);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.section-title .more:hover {
  color: var(--color-primary);
}
.section-title .more:hover::before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.son-title {
  font-size: clamp(14px, 1.4583333333vw, 28px);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  padding-bottom: clamp(6px, 0.625vw, 12px);
  margin-bottom: clamp(18px, 1.875vw, 36px);
  position: relative;
}
@media (max-width: 1023px) {
  .son-title {
    font-size: clamp(18px, 1.875vw, 36px);
  }
}
.son-title::before {
  content: "";
  width: clamp(15px, 1.5625vw, 30px);
  height: clamp(1.5px, 0.15625vw, 3px);
  position: absolute;
  bottom: -1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--color-primary);
  z-index: 2;
}
.son-title::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-border);
}

.post-title {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: clamp(18px, 1.875vw, 36px);
}
@media (max-width: 1023px) {
  .post-title {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}

.img {
  --aspect-ratio: 75%;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.img::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: var(--aspect-ratio);
}
.img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.img-hover {
  cursor: pointer;
}
.img-hover img {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.img-hover:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@font-face {
  font-family: "SourceHanSansSC";
  src: url("../fonts/SourceHanSansSC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scrollbar-width: auto;
}

body {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-base);
  font-family: -apple-system-font, BlinkMacSystemFont, Helvetica Neue, "SourceHanSansSC", Hiragino Sans GB, Arial, sans-serif;
  line-height: 1.5;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-transparent-primary-90);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.btn-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-link span {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-primary);
}
.btn-link svg {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
  color: var(--color-primary);
  padding: clamp(2px, 0.2083333333vw, 4px);
  border-radius: 50%;
  background-color: var(--color-bg);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  margin-left: clamp(5px, 0.5208333333vw, 10px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.btn-link:hover svg {
  -webkit-transform: translateX(0.5em);
          transform: translateX(0.5em);
}

.post-prevnext {
  padding-top: clamp(10px, 1.0416666667vw, 20px);
  border-top: 1px solid var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .post-prevnext {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.post-prevnext .prevnext {
  width: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 1023px) {
  .post-prevnext .prevnext {
    width: 100%;
  }
}
.post-prevnext .prevnext .prev, .post-prevnext .prevnext .next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.post-prevnext .prevnext span,
.post-prevnext .prevnext a {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  line-height: 2;
}
@media (max-width: 1023px) {
  .post-prevnext .prevnext span,
  .post-prevnext .prevnext a {
    font-size: clamp(14px, 1.4583333333vw, 28px);
  }
}
.post-prevnext .prevnext span {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.post-prevnext .prevnext a {
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.post-prevnext .prevnext a:hover {
  color: var(--color-primary);
}
.post-prevnext .return {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-muted);
  padding: clamp(4px, 0.4166666667vw, 8px) clamp(12px, 1.25vw, 24px);
  border-radius: clamp(10px, 1.0416666667vw, 20px);
  border: 1px solid var(--color-text-muted);
  background-color: transparent;
  -webkit-transition: border 0.3s ease, color 0.3s ease, background-color 0.4s ease;
  transition: border 0.3s ease, color 0.3s ease, background-color 0.4s ease;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .post-prevnext .return {
    width: 100%;
    font-size: clamp(16px, 1.6666666667vw, 32px);
    padding: clamp(8px, 0.8333333333vw, 16px) clamp(24px, 2.5vw, 48px);
    border-radius: clamp(20px, 2.0833333333vw, 40px);
    margin-top: clamp(10px, 1.0416666667vw, 20px);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.post-prevnext .return span {
  margin-right: clamp(4px, 0.4166666667vw, 8px);
}
.post-prevnext .return svg {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
}
@media (max-width: 1023px) {
  .post-prevnext .return svg {
    width: clamp(24px, 2.5vw, 48px);
    height: clamp(24px, 2.5vw, 48px);
  }
}
.post-prevnext .return:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ynf-pagination {
  margin-top: clamp(25px, 2.6041666667vw, 50px);
}
.ynf-pagination .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ynf-pagination .pagination li {
  border-radius: 50%;
}
.ynf-pagination .pagination li:not(:last-child) {
  margin-right: clamp(7.5px, 0.78125vw, 15px);
}
.ynf-pagination .pagination li a,
.ynf-pagination .pagination li span {
  width: clamp(15px, 1.5625vw, 30px);
  height: clamp(15px, 1.5625vw, 30px);
  border-radius: 50%;
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  background-color: transparent;
  border-radius: 50%;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  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;
}
.ynf-pagination .pagination li.disabled {
  cursor: not-allowed;
}
.ynf-pagination .pagination li:hover a,
.ynf-pagination .pagination li:hover span, .ynf-pagination .pagination li.active a,
.ynf-pagination .pagination li.active span {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  z-index: 999;
}
@media (max-width: 1023px) {
  .header {
    background-color: var(--color-bg-header);
  }
}
@media (min-width: 1024px) {
  .header.bg-white {
    background-color: var(--color-bg-header);
    -webkit-box-shadow: 0 2px 4px var(--color-transparent-black-10);
            box-shadow: 0 2px 4px var(--color-transparent-black-10);
  }
  .header.bg-white::before {
    display: none;
  }
  .header.bg-white .header-main .logo {
    -webkit-filter: none;
            filter: none;
  }
  .header.bg-white .header-main .header-menu .menu-list .menu-item .title-box span {
    color: var(--color-text-primary);
  }
}
.header::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}
.header-main {
  width: 100%;
  height: clamp(40px, 4.1666666667vw, 80px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1023px) {
  .header-main {
    height: clamp(60px, 6.25vw, 120px);
  }
}
.header-main .logo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (min-width: 1024px) {
  .header-main .logo {
    height: clamp(14px, 1.4583333333vw, 28px);
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
@media (max-width: 1023px) {
  .header-main .logo {
    height: clamp(27px, 2.8125vw, 54px);
  }
}
.header-main .logo img {
  width: auto;
  height: 100%;
  display: block;
}
.header-menu {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-menu .menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .header-menu .menu-list {
    display: none;
  }
  .header-menu .menu-list.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: clamp(60px, 6.25vw, 120px);
    left: 0;
    background-color: var(--color-bg-header);
  }
}
.header-menu .menu-list .menu-item {
  position: relative;
}
@media (max-width: 1023px) {
  .header-menu .menu-list .menu-item:not(:last-child) {
    margin-bottom: clamp(21px, 2.1875vw, 42px);
  }
}
.header-menu .menu-list .menu-item .title-box {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  font-weight: 600;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .header-menu .menu-list .menu-item .title-box {
    font-size: clamp(36px, 3.75vw, 72px);
  }
}
.header-menu .menu-list .menu-item .title-box span {
  color: var(--color-text-primary);
}
@media (min-width: 1024px) {
  .header-menu .menu-list .menu-item .title-box span {
    color: var(--color-text-inverse);
  }
}
.header-menu .menu-list .menu-item .title-box span.title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.header-menu .menu-list .menu-item .title-box span.title-hover {
  position: absolute;
  left: 0;
  bottom: 0;
  color: var(--color-text-link);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  opacity: 0;
}
@media (min-width: 1024px) {
  .header-menu .menu-list .menu-item {
    margin-right: clamp(21px, 2.1875vw, 42px);
  }
  .header-menu .menu-list .menu-item:hover .title-box span.title {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .header-menu .menu-list .menu-item:hover .title-box span.title-hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.header-menu .search-box {
  margin-left: clamp(25px, 2.6041666667vw, 50px);
  position: relative;
}
@media (max-width: 1023px) {
  .header-menu .search-box {
    display: none;
  }
}
.header-menu .search-box .input-group {
  width: 100%;
  height: clamp(16px, 1.6666666667vw, 32px);
  padding: 0 clamp(6px, 0.625vw, 12px);
  border: 1px solid var(--color-border-dark);
  border-radius: clamp(9px, 0.9375vw, 18px);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-menu .search-box .input-group input {
  text-indent: clamp(9px, 0.9375vw, 18px);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-secondary);
}
.header-menu .search-box .input-group-btn {
  position: absolute;
  left: clamp(2.5px, 0.2604166667vw, 5px);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-menu .search-box .input-group-btn button {
  line-height: 1;
}
.header-menu .search-box .input-group-btn button svg {
  width: clamp(9px, 0.9375vw, 18px);
  height: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-primary);
}
@media (max-width: 1023px) {
  .header-menu .mobile-menu {
    width: clamp(40px, 4.1666666667vw, 80px);
    height: clamp(20px, 2.0833333333vw, 40px);
    cursor: pointer;
    position: relative;
  }
  .header-menu .mobile-menu span {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background-color: var(--color-black);
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }
  .header-menu .mobile-menu span:nth-child(1) {
    top: 0;
  }
  .header-menu .mobile-menu span:nth-child(3) {
    top: 100%;
  }
  .header-menu .mobile-menu.active span {
    top: 50% !important;
  }
  .header-menu .mobile-menu.active span:nth-child(1) {
    -webkit-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
  .header-menu .mobile-menu.active span:nth-child(2) {
    opacity: 0;
  }
  .header-menu .mobile-menu.active span:nth-child(3) {
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
}

.footer {
  width: 100%;
  background-color: var(--color-bg-footer);
}
@media (min-width: 1024px) {
  .footer {
    padding-top: clamp(25px, 2.6041666667vw, 50px);
  }
}
@media (max-width: 1023px) {
  .footer {
    padding-bottom: clamp(50px, 5.2083333333vw, 100px);
  }
}
.footer-logo {
  width: auto;
  height: clamp(18px, 1.875vw, 36px);
  margin-bottom: clamp(16px, 1.6666666667vw, 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1023px) {
  .footer-logo {
    display: none;
  }
}
.footer-logo img {
  height: 100%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.footer-main {
  padding: clamp(20px, 2.0833333333vw, 40px) 0 clamp(30px, 3.125vw, 60px);
  border-top: 2px solid var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1023px) {
  .footer-main {
    display: none;
  }
}
.footer-main .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.footer-main .left .service-phone {
  color: var(--color-text-inverse);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.footer-main .left .service-phone .tit {
  font-size: clamp(12px, 1.25vw, 24px);
  margin-bottom: clamp(4px, 0.4166666667vw, 8px);
}
.footer-main .left .service-phone .num {
  font-weight: 600;
  font-size: clamp(18px, 1.875vw, 36px);
  color: inherit;
}
.footer-main .left .follow-us {
  margin-top: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text-inverse);
}
.footer-main .left .follow-us .tit {
  font-size: clamp(12px, 1.25vw, 24px);
  margin-bottom: clamp(6px, 0.625vw, 12px);
}
.footer-main .left .follow-us .code-list {
  margin-top: clamp(16px, 1.6666666667vw, 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer-main .left .follow-us .code-list .item {
  position: relative;
}
.footer-main .left .follow-us .code-list .item:not(:last-child) {
  margin-right: clamp(10px, 1.0416666667vw, 20px);
}
.footer-main .left .follow-us .code-list .item .img {
  width: clamp(20px, 2.0833333333vw, 40px);
  height: clamp(20px, 2.0833333333vw, 40px);
  position: relative;
}
.footer-main .left .follow-us .code-list .item .img img {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-main .left .follow-us .code-list .item .ewm {
  width: clamp(50px, 5.2083333333vw, 100px);
  height: clamp(50px, 5.2083333333vw, 100px);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0);
          transform: translateX(-50%) scale(0);
  bottom: calc(100% + clamp(3px, 0.3125vw, 6px));
  border-radius: clamp(4px, 0.4166666667vw, 8px);
  background-color: var(--color-white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.footer-main .left .follow-us .code-list .item .ewm::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: clamp(3px, 0.3125vw, 6px) solid var(--color-white);
  border-right: clamp(3px, 0.3125vw, 6px) solid transparent;
  border-left: clamp(3px, 0.3125vw, 6px) solid transparent;
}
.footer-main .left .follow-us .code-list .item .ewm img {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-main .left .follow-us .code-list .item:hover .ewm {
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
}
.footer-main .right {
  margin-left: clamp(20px, 2.0833333333vw, 40px);
}
.footer-main .right .footer-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.footer-main .right .footer-menu .menu-li:not(:last-child) {
  margin-right: clamp(50px, 5.2083333333vw, 100px);
}
.footer-main .right .footer-menu .menu-li h3 {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text-inverse);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.footer-main .right .footer-menu .menu-li h3 a {
  color: inherit;
  display: block;
}
.footer-main .right .footer-menu .menu-li h3:hover {
  color: var(--color-text-link);
}
.footer-main .right .footer-menu .menu-li .sub {
  margin-top: clamp(6px, 0.625vw, 12px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.footer-main .right .footer-menu .menu-li .sub a {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-inverse);
  margin-bottom: clamp(4px, 0.4166666667vw, 8px);
  opacity: 0.8;
  display: block;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.footer-main .right .footer-menu .menu-li .sub a:hover {
  color: var(--color-text-link);
}
.footer-copyright {
  width: 100%;
  padding: clamp(6px, 0.625vw, 12px) 0;
  background-color: var(--color-black);
}
@media (max-width: 1023px) {
  .footer-copyright {
    text-align: center;
  }
}
.footer-copyright .copyright {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-inverse);
}
@media (max-width: 1023px) {
  .footer-copyright .copyright {
    font-size: clamp(10px, 1.0416666667vw, 20px);
  }
}

.footer-menu-mobile {
  display: none;
}
@media (max-width: 1023px) {
  .footer-menu-mobile {
    width: 100%;
    height: clamp(50px, 5.2083333333vw, 100px);
    background-color: var(--color-bg-footer);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .footer-menu-mobile .footer-menu-item {
    font-size: clamp(9px, 0.9375vw, 18px);
    color: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.banner .swiper {
  height: 100vh;
}
@media (max-width: 1023px) {
  .banner .swiper {
    height: clamp(600px, 62.5vw, 1200px);
  }
}
.banner .swiper-slide {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.banner .swiper-slide video,
.banner .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.banner-controls {
  height: clamp(10px, 1.0416666667vw, 20px);
  position: absolute;
  left: 6.25%;
  bottom: clamp(25px, 2.6041666667vw, 50px);
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1023px) {
  .banner-controls {
    height: clamp(20px, 2.0833333333vw, 40px);
  }
}
.banner-controls .icon-arrow {
  width: clamp(10px, 1.0416666667vw, 20px);
  height: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-white);
}
@media (max-width: 1023px) {
  .banner-controls .icon-arrow {
    width: clamp(20px, 2.0833333333vw, 40px);
    height: clamp(20px, 2.0833333333vw, 40px);
  }
}
.banner-pagination {
  width: auto;
  height: clamp(10px, 1.0416666667vw, 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .banner-pagination {
    height: clamp(20px, 2.0833333333vw, 40px);
  }
}
.banner-pagination .swiper-pagination-bullet {
  width: 3px;
  height: 50%;
  opacity: 1;
  margin: 0 clamp(3px, 0.3125vw, 6px);
  position: relative;
  background-color: var(--color-white);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.banner-pagination .swiper-pagination-bullet-active {
  height: 100%;
}
.banner .mouse-scroll {
  position: absolute;
  bottom: clamp(25px, 2.6041666667vw, 50px);
  left: calc(50% - clamp(7.5px, 0.78125vw, 15px));
  z-index: 15;
  opacity: 1;
  -webkit-animation: mouse 1s infinite;
          animation: mouse 1s infinite;
}
.banner .mouse-scroll svg {
  width: clamp(15px, 1.5625vw, 30px);
  height: clamp(15px, 1.5625vw, 30px);
  color: var(--color-text-inverse);
}
@media (max-width: 1023px) {
  .banner .mouse-scroll svg {
    width: clamp(30px, 3.125vw, 60px);
    height: clamp(30px, 3.125vw, 60px);
  }
}

@-webkit-keyframes mouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(clamp(2.5px, 0.2604166667vw, 5px));
            transform: translateY(clamp(2.5px, 0.2604166667vw, 5px));
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes mouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(clamp(2.5px, 0.2604166667vw, 5px));
            transform: translateY(clamp(2.5px, 0.2604166667vw, 5px));
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.site-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.site-banner .bg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.site-banner .bg img {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar {
  width: clamp(190px, 19.7916666667vw, 380px);
  background-color: var(--color-bg);
  padding: clamp(13px, 1.3541666667vw, 26px) clamp(15px, 1.5625vw, 30px) clamp(40px, 4.1666666667vw, 80px);
}
@media (max-width: 1023px) {
  .sidebar {
    width: 100%;
    padding: 0 clamp(15px, 1.5625vw, 30px);
  }
}
.sidebar-item:not(:last-child) {
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
@media (max-width: 1023px) {
  .sidebar .search {
    display: none;
  }
}
.sidebar .search .sidebar-search {
  width: 100%;
  height: clamp(23px, 2.3958333333vw, 46px);
  border-radius: clamp(1.5px, 0.15625vw, 3px);
  border: 1px solid var(--color-border);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sidebar .search .sidebar-search input {
  width: 100%;
  padding-left: clamp(24px, 2.5vw, 48px);
}
.sidebar .search .sidebar-search .input-group-btn {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: clamp(23px, 2.3958333333vw, 46px);
  height: clamp(23px, 2.3958333333vw, 46px);
  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;
}
.sidebar .search .sidebar-search .input-group-btn svg {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
  color: var(--color-border);
}
.sidebar .category {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .sidebar .category .cate-button {
    display: none;
  }
}
@media (max-width: 1023px) {
  .sidebar .category .cate-button {
    width: 100%;
    height: clamp(50px, 5.2083333333vw, 100px);
    display: block;
  }
  .sidebar .category .cate-button-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .sidebar .category .cate-button-content span {
    font-size: clamp(16px, 1.6666666667vw, 32px);
    color: var(--color-text-primary);
  }
  .sidebar .category .cate-button-content svg {
    width: clamp(20px, 2.0833333333vw, 40px);
    height: clamp(20px, 2.0833333333vw, 40px);
    color: var(--color-text-muted);
  }
}
.sidebar .category .sidebar-cate {
  position: relative;
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate {
    display: none;
    padding-bottom: clamp(12px, 1.25vw, 24px);
  }
  .sidebar .category .sidebar-cate.on {
    display: block;
  }
}
.sidebar .category .sidebar-cate::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.sidebar .category .sidebar-cate .cate-item {
  position: relative;
}
.sidebar .category .sidebar-cate .cate-item:not(:last-child) {
  margin-bottom: clamp(6px, 0.625vw, 12px);
}
.sidebar .category .sidebar-cate .cate-item .box {
  line-height: clamp(27px, 2.8125vw, 54px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate .cate-item .box {
    line-height: clamp(40px, 4.1666666667vw, 80px);
  }
}
.sidebar .category .sidebar-cate .cate-item .box .link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sidebar .category .sidebar-cate .cate-item .box .link img {
  width: clamp(11px, 1.1458333333vw, 22px);
  height: clamp(11px, 1.1458333333vw, 22px);
  margin-right: clamp(6px, 0.625vw, 12px);
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate .cate-item .box .link img {
    width: clamp(20px, 2.0833333333vw, 40px);
    height: clamp(20px, 2.0833333333vw, 40px);
  }
}
.sidebar .category .sidebar-cate .cate-item .box .link span {
  font-size: clamp(10px, 1.0416666667vw, 20px);
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate .cate-item .box .link span {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.sidebar .category .sidebar-cate .cate-item .box i {
  margin-right: clamp(4px, 0.4166666667vw, 8px);
}
.sidebar .category .sidebar-cate .cate-item .box i svg {
  width: clamp(10px, 1.0416666667vw, 20px);
  height: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text-muted);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.sidebar .category .sidebar-cate .cate-item.active .sub-cate {
  display: block;
}
.sidebar .category .sidebar-cate .cate-item.active .box i svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sidebar .category .sidebar-cate .sub-cate {
  width: 100%;
  position: relative;
  display: none;
}
.sidebar .category .sidebar-cate .sub-cate-item {
  line-height: clamp(21px, 2.1875vw, 42px);
  padding-left: clamp(15px, 1.5625vw, 30px);
  position: relative;
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate .sub-cate-item {
    line-height: clamp(32px, 3.3333333333vw, 64px);
  }
}
.sidebar .category .sidebar-cate .sub-cate-item a {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  display: block;
}
@media (max-width: 1023px) {
  .sidebar .category .sidebar-cate .sub-cate-item a {
    font-size: clamp(14px, 1.4583333333vw, 28px);
  }
}
.sidebar .category .sidebar-cate .sub-cate-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(1.5px, 0.15625vw, 3px);
  height: 0;
  background-color: var(--color-primary);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.sidebar .category .sidebar-cate .sub-cate-item.active {
  background-color: var(--color-bg-hover);
}
.sidebar .category .sidebar-cate .sub-cate-item.active::after {
  height: 100%;
}

.related {
  padding: clamp(40px, 4.1666666667vw, 80px) 0;
}
.related.bg-dark {
  background-color: var(--gray-200);
}
.related.bg-dark .related-product .box {
  background-color: var(--color-bg);
}
.related-product {
  width: 100%;
  padding-bottom: clamp(12px, 1.25vw, 24px);
  position: relative;
  overflow: hidden;
}
.related-product .box {
  width: 100%;
  height: 100%;
  padding: clamp(25px, 2.6041666667vw, 50px) clamp(6px, 0.625vw, 12px);
  border-radius: clamp(7.5px, 0.78125vw, 15px);
  background-color: var(--color-bg-light);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 1023px) {
  .related-product .box {
    padding: clamp(35px, 3.6458333333vw, 70px) clamp(12px, 1.25vw, 24px);
  }
}
.related-product .box .title {
  font-size: clamp(9px, 0.9375vw, 18px);
  margin-top: clamp(8px, 0.8333333333vw, 16px);
  text-align: center;
}
@media (max-width: 1023px) {
  .related-product .box .title {
    font-size: clamp(13px, 1.3541666667vw, 26px);
  }
}
.related-product .swiper-pagination {
  bottom: 0;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.related-product .swiper-pagination-bullet {
  width: clamp(6px, 0.625vw, 12px);
  height: clamp(6px, 0.625vw, 12px);
  border-radius: 50%;
  background-color: var(--color-border);
}
.related-product .swiper-pagination-bullet:not(:last-child) {
  margin-right: clamp(4px, 0.4166666667vw, 8px);
}
.related-product .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}
.related .view-all {
  width: clamp(84px, 8.75vw, 168px);
  height: clamp(26px, 2.7083333333vw, 52px);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  margin: clamp(15px, 1.5625vw, 30px) auto 0;
  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;
}
.related .view-all span {
  font-size: clamp(8px, 0.8333333333vw, 16px);
}
@media (max-width: 1023px) {
  .related .view-all span {
    font-size: clamp(12px, 1.25vw, 24px);
  }
}
.related .view-all svg {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
  margin-left: clamp(4px, 0.4166666667vw, 8px);
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 1024px) {
  .section {
    height: 100vh;
  }
}
@media (max-width: 1023px) {
  .section {
    height: auto;
  }
}

.index-product {
  padding: clamp(60px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}
@media (max-width: 1023px) {
  .index-product {
    padding: clamp(90px, 9.375vw, 180px) 0;
  }
}
.index-product-pc {
  margin-top: clamp(50px, 5.2083333333vw, 100px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(20px, 2.0833333333vw, 40px);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.index-product-pc .card {
  width: 50%;
  border-radius: clamp(15px, 1.5625vw, 30px);
  background-color: var(--color-bg-card);
  position: relative;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.index-product-pc .card-top {
  padding: clamp(15px, 1.5625vw, 30px);
  border-radius: clamp(15px, 1.5625vw, 30px);
  position: relative;
}
.index-product-pc .card-top h3 {
  font-size: clamp(14px, 1.4583333333vw, 28px);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 3px solid var(--color-primary);
  height: clamp(30px, 3.125vw, 60px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.index-product-pc .card-top .cp {
  width: clamp(90px, 9.375vw, 180px);
  height: clamp(90px, 9.375vw, 180px);
  position: absolute;
  right: clamp(10px, 1.0416666667vw, 20px);
  bottom: clamp(-45px, -4.6875vw, -90px);
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(16%, rgba(67, 63, 63, 0.012)), color-stop(40%, #000));
  -webkit-mask-image: linear-gradient(0deg, rgba(67, 63, 63, 0.012) 16%, #000 40%);
          mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(16%, rgba(67, 63, 63, 0.012)), color-stop(40%, #000));
          mask-image: linear-gradient(0deg, rgba(67, 63, 63, 0.012) 16%, #000 40%);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.index-product-pc .card-top .cp img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.index-product-pc .card-bottom {
  padding: clamp(25px, 2.6041666667vw, 50px) clamp(15px, 1.5625vw, 30px);
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: clamp(200px, 20.8333333333vw, 400px);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.index-product-pc .card-bottom .list {
  width: 38%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: clamp(5px, 0.5208333333vw, 10px);
}
.index-product-pc .card-bottom .list li {
  width: clamp(90px, 9.375vw, 180px);
}
.index-product-pc .card-bottom .list li .link {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-primary);
  padding-left: clamp(10px, 1.0416666667vw, 20px);
  position: relative;
}
.index-product-pc .card-bottom .list li .link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: clamp(3px, 0.3125vw, 6px);
  height: clamp(3px, 0.3125vw, 6px);
  border-radius: 50%;
  background-color: var(--color-text-link);
  border: 3px solid var(--color-white);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.index-product-pc .card-bottom .list li .mask {
  display: none;
}
.index-product-pc .card-bottom .litpic {
  height: clamp(150px, 15.625vw, 300px);
  position: absolute;
  right: clamp(45px, 4.6875vw, 90px);
  bottom: clamp(25px, 2.6041666667vw, 50px);
}
.index-product-pc .card-bottom .litpic img {
  width: auto;
  height: 100%;
}
.index-product-pc .card.on, .index-product-pc .card:hover {
  width: 80%;
  background-color: transparent;
}
.index-product-pc .card.on .card-top, .index-product-pc .card:hover .card-top {
  width: 98%;
  padding: 0 clamp(15px, 1.5625vw, 30px);
  height: clamp(50px, 5.2083333333vw, 100px);
  background-color: var(--color-primary);
  margin: 0 auto;
  border-radius: clamp(15px, 1.5625vw, 30px) clamp(15px, 1.5625vw, 30px) 0 0;
}
.index-product-pc .card.on .card-top h3, .index-product-pc .card:hover .card-top h3 {
  color: var(--color-text-inverse);
  border-bottom: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-product-pc .card.on .card-top .cp, .index-product-pc .card:hover .card-top .cp {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}
.index-product-pc .card.on .card-bottom, .index-product-pc .card:hover .card-bottom {
  margin-top: clamp(-20px, -2.0833333333vw, -40px);
  background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.35)), color-stop(53%, #eef0f9), to(#e6eaf4));
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.35), #eef0f9 53%, #e6eaf4);
  border: 1px solid #eef0f3;
  position: relative;
  border-radius: clamp(15px, 1.5625vw, 30px);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.index-product-pc .card.on .card-bottom .list, .index-product-pc .card:hover .card-bottom .list {
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}
.index-product-pc .card.on .card-bottom .list li, .index-product-pc .card:hover .card-bottom .list li {
  width: 100%;
}
.index-product-pc .card.on .card-bottom .list li .link, .index-product-pc .card:hover .card-bottom .list li .link {
  display: none;
}
.index-product-pc .card.on .card-bottom .list li .mask, .index-product-pc .card:hover .card-bottom .list li .mask {
  background-color: var(--color-bg);
  border-radius: clamp(5px, 0.5208333333vw, 10px);
  position: relative;
  display: block;
  overflow: hidden;
}
.index-product-pc .card.on .card-bottom .list li .mask-content, .index-product-pc .card:hover .card-bottom .list li .mask-content {
  padding: clamp(5px, 0.5208333333vw, 10px) clamp(10px, 1.0416666667vw, 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.index-product-pc .card.on .card-bottom .list li .mask-content h3, .index-product-pc .card:hover .card-bottom .list li .mask-content h3 {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-secondary);
}
.index-product-pc .card.on .card-bottom .list li .mask-content .more, .index-product-pc .card:hover .card-bottom .list li .mask-content .more {
  position: absolute;
  right: clamp(10px, 1.0416666667vw, 20px);
  top: clamp(8px, 0.8333333333vw, 16px);
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-product-pc .card.on .card-bottom .list li .mask-content .more svg, .index-product-pc .card:hover .card-bottom .list li .mask-content .more svg {
  width: clamp(7px, 0.7291666667vw, 14px);
  height: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-primary);
  margin-right: clamp(2px, 0.2083333333vw, 4px);
}
.index-product-pc .card.on .card-bottom .list li .mask-content .more span, .index-product-pc .card:hover .card-bottom .list li .mask-content .more span {
  font-size: clamp(7px, 0.7291666667vw, 14px);
}
.index-product-pc .card.on .card-bottom .list li .mask-content img, .index-product-pc .card:hover .card-bottom .list li .mask-content img {
  width: auto;
  height: clamp(70px, 7.2916666667vw, 140px);
  margin: clamp(5px, 0.5208333333vw, 10px) auto clamp(10px, 1.0416666667vw, 20px);
}
.index-product-pc .card.on .card-bottom .list li .mask-content .btn-custom, .index-product-pc .card:hover .card-bottom .list li .mask-content .btn-custom {
  color: var(--color-primary);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  position: absolute;
  right: clamp(5px, 0.5208333333vw, 10px);
  bottom: clamp(10px, 1.0416666667vw, 20px);
  padding: clamp(1px, 0.1041666667vw, 2px) clamp(5px, 0.5208333333vw, 10px);
  border-radius: clamp(7.5px, 0.78125vw, 15px);
  background-color: transparent;
  border: 1px solid var(--color-primary);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
}
.index-product-pc .card.on .card-bottom .list li .mask-content .btn-custom:hover, .index-product-pc .card:hover .card-bottom .list li .mask-content .btn-custom:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-transparent-primary-50);
  border: 0;
}
.index-product-pc .card.on .card-bottom .litpic, .index-product-pc .card:hover .card-bottom .litpic {
  display: none;
}
.index-product-pc:has(.card.on) .card:not(.on) {
  width: 20%;
}
.index-product-pc:has(.card.on) .card:not(.on) .card-bottom .list {
  display: none;
}
.index-product-pc:has(.card.on) .card:not(.on) .card-bottom .litpic {
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
@media (max-width: 1023px) {
  .index-product-pc {
    display: none;
  }
}
.index-product-mobile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.0416666667vw, 20px);
}
@media (min-width: 1024px) {
  .index-product-mobile {
    display: none;
  }
}
.index-product-mobile .item {
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.0416666667vw, 20px);
  border-radius: clamp(5px, 0.5208333333vw, 10px);
  background-color: var(--color-bg);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.index-product-mobile .item-title {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  color: var(--color-text-secondary);
}
.index-product-mobile .item-img {
  width: auto;
  height: clamp(90px, 9.375vw, 180px);
  margin: clamp(10px, 1.0416666667vw, 20px) auto clamp(20px, 2.0833333333vw, 40px);
}
.index-product-mobile .item-img img {
  height: 100%;
  display: block;
}
.index-product-mobile .item-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-product-mobile .item-more svg {
  width: clamp(10px, 1.0416666667vw, 20px);
  height: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-primary);
  margin-right: clamp(4px, 0.4166666667vw, 8px);
}
.index-product-mobile .item-more span {
  font-size: clamp(12px, 1.25vw, 24px);
}

.index-solution {
  padding: clamp(60px, 6.25vw, 120px) 0;
  background-color: var(--color-bg-light);
}
@media (min-width: 1024px) {
  .index-solution {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (max-width: 1023px) {
  .index-solution {
    padding: clamp(90px, 9.375vw, 180px) 0;
  }
}
.index-solution .list {
  height: clamp(300px, 31.25vw, 600px);
  border-radius: clamp(5px, 0.5208333333vw, 10px);
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media (max-width: 1023px) {
  .index-solution .list {
    height: 100%;
    gap: clamp(10px, 1.0416666667vw, 20px);
  }
}
@media (min-width: 1024px) {
  .index-solution .list .hover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    visibility: hidden;
  }
  .index-solution .list .hover-bg.active {
    visibility: visible;
    -webkit-animation: hover-bg 2s ease forwards;
            animation: hover-bg 2s ease forwards;
  }
}
@media (max-width: 1023px) {
  .index-solution .list .hover-bg {
    display: none;
  }
}
.index-solution .list .card {
  width: 20%;
  height: 50%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 10;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1024px) {
  .index-solution .list .card {
    padding: clamp(7.5px, 0.78125vw, 15px) clamp(15px, 1.5625vw, 30px);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .index-solution .list .card .bg {
    display: none;
  }
  .index-solution .list .card:hover {
    background-color: var(--color-transparent-primary-50);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .index-solution .list .card:hover .card-title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .index-solution .list .card:hover .card-title span {
    margin-top: clamp(6px, 0.625vw, 12px);
  }
  .index-solution .list .card:hover .card-desc {
    opacity: 1;
    display: block;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .index-solution .list .card:hover .card-btn {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (max-width: 1023px) {
  .index-solution .list .card {
    width: 48%;
    height: 100%;
    padding: clamp(40px, 4.1666666667vw, 80px) 0;
    border-radius: clamp(15px, 1.5625vw, 30px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .index-solution .list .card .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .index-solution .list .card-desc {
    display: none;
  }
  .index-solution .list .card-btn {
    display: none;
  }
}
.index-solution .list .card-title {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-solution .list .card-title img {
  width: clamp(14px, 1.4583333333vw, 28px);
  height: clamp(14px, 1.4583333333vw, 28px);
  margin-right: clamp(5px, 0.5208333333vw, 10px);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media (max-width: 1023px) {
  .index-solution .list .card-title img {
    width: clamp(28px, 2.9166666667vw, 56px);
    height: clamp(28px, 2.9166666667vw, 56px);
    margin-right: clamp(20px, 2.0833333333vw, 40px);
  }
}
.index-solution .list .card-title span {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-inverse);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media (max-width: 1023px) {
  .index-solution .list .card-title span {
    font-size: clamp(18px, 1.875vw, 36px);
  }
}
.index-solution .list .card-desc {
  opacity: 0;
  display: none;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  margin-top: clamp(6px, 0.625vw, 12px);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-inverse);
}
.index-solution .list .card-btn {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  position: absolute;
  left: clamp(15px, 1.5625vw, 30px);
  bottom: clamp(7.5px, 0.78125vw, 15px);
}
.index-solution .list .card-btn span {
  color: var(--color-text-inverse);
}

.index-advatage {
  padding: clamp(60px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}
@media (min-width: 1024px) {
  .index-advatage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (max-width: 1023px) {
  .index-advatage {
    padding: clamp(90px, 9.375vw, 180px) 0;
  }
}
.index-advatage .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(25px, 2.6041666667vw, 50px);
}
@media (max-width: 1023px) {
  .index-advatage .list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.index-advatage .list .card {
  padding: clamp(39px, 4.0625vw, 78px) clamp(20px, 2.0833333333vw, 40px) clamp(36px, 3.75vw, 72px);
  background-color: var(--color-bg-card);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-advatage .list .card-icon {
  width: clamp(30px, 3.125vw, 60px);
  height: clamp(30px, 3.125vw, 60px);
  margin-bottom: clamp(20px, 2.0833333333vw, 40px);
}
.index-advatage .list .card-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.index-advatage .list .card-title {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text-primary);
  font-weight: 600;
  margin-bottom: clamp(16px, 1.6666666667vw, 32px);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media (max-width: 1023px) {
  .index-advatage .list .card-title {
    font-size: clamp(13px, 1.3541666667vw, 26px);
  }
}
.index-advatage .list .card-ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.index-advatage .list .card-ul li {
  --dot-size: clamp(3px, 0.3125vw, 6px);
  --line-height: clamp(12px, 1.25vw, 24px);
  --dot-top: calc(clamp(12px, 1.25vw, 24px) / 2 - clamp(3px, 0.3125vw, 6px) / 2);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  line-height: var(--line-height);
  padding-left: clamp(6px, 0.625vw, 12px);
  margin-bottom: clamp(4px, 0.4166666667vw, 8px);
  position: relative;
}
@media (max-width: 1023px) {
  .index-advatage .list .card-ul li {
    font-size: clamp(12px, 1.25vw, 24px);
  }
}
.index-advatage .list .card-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--dot-top);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--color-text-secondary);
}
.index-advatage .list .card:hover {
  -webkit-transform: translateY(clamp(-5px, -0.5208333333vw, -10px));
          transform: translateY(clamp(-5px, -0.5208333333vw, -10px));
}
.index-advatage .list .card:hover .card-title {
  color: var(--color-primary);
}

.index-news {
  width: 100%;
  padding: clamp(60px, 6.25vw, 120px) 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .index-news {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (max-width: 1023px) {
  .index-news {
    height: 100%;
    padding: clamp(90px, 9.375vw, 180px) 0;
  }
}
.index-news::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-light);
  z-index: -1;
}
.index-news .list {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(21px, 2.1875vw, 42px);
}
@media (max-width: 1023px) {
  .index-news .list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.index-news .list .item {
  border-radius: clamp(5px, 0.5208333333vw, 10px);
  background-color: var(--color-bg);
  position: relative;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  overflow: hidden;
}
.index-news .list .item .img {
  --aspect-ratio: 50%;
}
.index-news .list .item .info {
  padding: clamp(22.5px, 2.34375vw, 45px) clamp(15px, 1.5625vw, 30px);
}
.index-news .list .item .info .text {
  margin-bottom: clamp(45px, 4.6875vw, 90px);
}
.index-news .list .item .info .text .time {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
  line-height: clamp(15px, 1.5625vw, 30px);
  margin-bottom: clamp(5px, 0.5208333333vw, 10px);
}
.index-news .list .item .info .text h3 {
  font-size: clamp(10px, 1.0416666667vw, 20px);
  font-weight: 600;
  color: var(--color-text-primary);
  height: clamp(26px, 2.7083333333vw, 52px);
  line-height: clamp(13px, 1.3541666667vw, 26px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.index-news .list .item .info .line {
  width: 100%;
  height: clamp(3px, 0.3125vw, 6px);
  position: relative;
}
.index-news .list .item .info .line::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}
.index-news .list .item .info .line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 6px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  background-color: var(--color-border);
}
.index-news .list .item .info .line span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.index-news .list .item .info .line span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.index-news .list .item .info .line span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 0;
  -webkit-transform: rotate(30deg) translateY(-6px);
          transform: rotate(30deg) translateY(-6px);
  background-color: var(--color-primary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.index-news .list .item .info .btn-view {
  margin-top: clamp(15px, 1.5625vw, 30px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.index-news .list .item .info .btn-view span {
  font-size: clamp(8px, 0.8333333333vw, 16px);
}
.index-news .list .item .info .btn-view svg {
  width: clamp(10px, 1.0416666667vw, 20px);
  height: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.index-news .list .item:hover {
  -webkit-transform: translateY(-1.4em);
          transform: translateY(-1.4em);
}
.index-news .list .item:hover .info .text h3 {
  color: var(--color-text-link);
}
.index-news .list .item:hover .info .line::before, .index-news .list .item:hover .info .line::after {
  display: none;
}
.index-news .list .item:hover .info .line span::before {
  width: 100%;
}
.index-news .list .item:hover .info .line span::after {
  height: 6px;
  -webkit-transform: rotate(30deg) translateY(0);
          transform: rotate(30deg) translateY(0);
}
.index-news .list .item:hover .info .btn-view svg {
  -webkit-transform: translateX(clamp(10px, 1.0416666667vw, 20px));
          transform: translateX(clamp(10px, 1.0416666667vw, 20px));
  opacity: 0;
}

.index-development {
  padding: clamp(60px, 6.25vw, 120px) 0;
  background-color: var(--color-bg);
}
@media (min-width: 1024px) {
  .index-development {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (max-width: 1023px) {
  .index-development {
    padding: clamp(80px, 8.3333333333vw, 160px) 0;
  }
}
.index-development__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(35px, 3.6458333333vw, 70px);
}
@media (max-width: 1023px) {
  .index-development__wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.index-development__wrap .col {
  width: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1023px) {
  .index-development__wrap .col {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .index-development__wrap .col:nth-child(1) .item {
    height: auto;
  }
  .index-development__wrap .col:nth-child(1) .item .desc {
    display: none;
  }
  .index-development__wrap .col:nth-child(1) .item:nth-child(2) {
    display: none;
  }
}
@media (min-width: 1024px) {
  .index-development__wrap .col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .index-development__wrap .col:nth-child(1) {
    width: 40%;
  }
  .index-development__wrap .col:nth-child(1) .item:nth-child(1) {
    height: clamp(120px, 12.5vw, 240px);
  }
  .index-development__wrap .col:nth-child(2) .item:nth-child(2) {
    height: clamp(120px, 12.5vw, 240px);
  }
  .index-development__wrap .col:nth-child(3) .item:nth-child(1) {
    height: clamp(120px, 12.5vw, 240px);
  }
}
.index-development__wrap .col .item {
  height: clamp(180px, 18.75vw, 360px);
}
@media (max-width: 1023px) {
  .index-development__wrap .col .item {
    width: 48%;
    height: clamp(150px, 15.625vw, 300px);
  }
}
@media (min-width: 1024px) {
  .index-development__wrap .col .item:not(:last-child) {
    margin-bottom: clamp(25px, 2.6041666667vw, 50px);
  }
  .index-development__wrap .col .item:not(:last-child) .box .text {
    right: auto;
    left: clamp(25px, 2.6041666667vw, 50px);
  }
}
.index-development__wrap .col .item h2 {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: clamp(16px, 1.6666666667vw, 32px);
}
@media (max-width: 1023px) {
  .index-development__wrap .col .item h2 {
    font-size: clamp(18px, 1.875vw, 36px);
    margin-bottom: clamp(6px, 0.625vw, 12px);
  }
}
.index-development__wrap .col .item .desc {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
}
.index-development__wrap .col .item .desc p {
  line-height: 2;
}
.index-development__wrap .col .item .box {
  height: 100%;
  border-radius: clamp(10px, 1.0416666667vw, 20px);
  position: relative;
  overflow: hidden;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.index-development__wrap .col .item .box .bg {
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.index-development__wrap .col .item .box .bg.l1 {
  background-image: url("../images/development-left.jpg");
}
.index-development__wrap .col .item .box .bg.c1 {
  background-image: url("../images/development-center1.jpg");
}
.index-development__wrap .col .item .box .bg.c2 {
  background-image: url("../images/development-center2.jpg");
}
.index-development__wrap .col .item .box .bg.r1 {
  background-image: url("../images/development-right1.jpg");
}
.index-development__wrap .col .item .box .bg.r2 {
  background-image: url("../images/development-right2.jpg");
}
.index-development__wrap .col .item .box .text {
  position: absolute;
  top: clamp(15px, 1.5625vw, 30px);
  right: clamp(25px, 2.6041666667vw, 50px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.index-development__wrap .col .item .box .text span {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-inverse);
  line-height: 2;
}
@media (max-width: 1023px) {
  .index-development__wrap .col .item .box .text span {
    font-size: clamp(12px, 1.25vw, 24px);
    line-height: clamp(18px, 1.875vw, 36px);
  }
}
.index-development__wrap .col .item:hover .box {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@-webkit-keyframes hover-bg {
  0% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.8;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes hover-bg {
  0% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.8;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
.about-us {
  padding-top: clamp(50px, 5.2083333333vw, 100px);
  background-color: var(--color-bg);
  position: relative;
}
@media (max-width: 1023px) {
  .about-us {
    padding-bottom: clamp(50px, 5.2083333333vw, 100px);
  }
}
.about-us .box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (max-width: 1023px) {
  .about-us .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.about-us .box .left {
  width: 40%;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .about-us .box .left {
    width: 100%;
  }
}
.about-us .box .left .tit {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  font-weight: 600;
  color: var(--color-text-primary);
  padding-bottom: clamp(6px, 0.625vw, 12px);
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media (max-width: 1023px) {
  .about-us .box .left .tit {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.about-us .box .left .tit::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  left: 0;
  bottom: 0;
}
.about-us .box .left .text {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-secondary);
  text-align: justify;
  padding: clamp(12px, 1.25vw, 24px) 0;
  line-height: 2;
}
@media (max-width: 1023px) {
  .about-us .box .left .text {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.about-us .box .right {
  width: 58%;
}
@media (min-width: 1024px) {
  .about-us .box .right {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
@media (max-width: 1023px) {
  .about-us .box .right {
    width: 100%;
    margin-top: clamp(24px, 2.5vw, 48px);
    position: relative;
    overflow: hidden;
  }
}
.about-us .box .right img {
  width: 100%;
  height: 100%;
  display: block;
}
.about-advatage {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .about-advatage {
    height: clamp(360px, 37.5vw, 720px);
  }
}
.about-advatage .top {
  height: 100%;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .about-advatage .top {
    padding: 0 2%;
  }
}
.about-advatage .top .tit-box {
  width: 100%;
  color: var(--color-text-inverse);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 1024px) {
  .about-advatage .top .tit-box {
    position: absolute;
    top: clamp(60px, 6.25vw, 120px);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (max-width: 1023px) {
  .about-advatage .top .tit-box {
    padding-top: clamp(40px, 4.1666666667vw, 80px);
    position: relative;
  }
}
.about-advatage .top .tit-box h2 {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  font-weight: 600;
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
@media (max-width: 1023px) {
  .about-advatage .top .tit-box h2 {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.about-advatage .top .tit-box p {
  font-size: clamp(9px, 0.9375vw, 18px);
  line-height: 2;
}
@media (max-width: 1023px) {
  .about-advatage .top .tit-box p {
    font-size: clamp(12px, 1.25vw, 24px);
    text-align: center;
  }
}
.about-advatage .top .gallery {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1;
}
.about-advatage .top .gallery .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center;
  background-size: cover;
  opacity: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.about-advatage .top .gallery .bg.on {
  opacity: 1;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.about-advatage .bottom {
  margin-top: clamp(24px, 2.5vw, 48px);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(200px, 20.8333333333vw, 400px);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1023px) {
  .about-advatage .bottom {
    height: clamp(140px, 14.5833333333vw, 280px);
  }
}
.about-advatage .bottom .item {
  width: 20%;
  background-color: var(--color-transparent-black-30);
  backdrop-filter: blur(1em);
  position: relative;
  cursor: pointer;
}
.about-advatage .bottom .item:not(:last-child) {
  border-right: 1px solid var(--color-transparent-white-10);
}
.about-advatage .bottom .item .info {
  width: 100%;
  height: 100%;
  padding: clamp(24px, 2.5vw, 48px) clamp(40px, 4.1666666667vw, 80px);
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.about-advatage .bottom .item .info .icon {
  width: clamp(25px, 2.6041666667vw, 50px);
  height: clamp(25px, 2.6041666667vw, 50px);
  margin-bottom: clamp(14px, 1.4583333333vw, 28px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.about-advatage .bottom .item .info .icon img {
  width: 100%;
  height: 100%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
  display: block;
}
.about-advatage .bottom .item .info .tit {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-inverse);
  margin-bottom: clamp(6px, 0.625vw, 12px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.about-advatage .bottom .item .info .tips {
  display: none;
  margin-top: clamp(12px, 1.25vw, 24px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
.about-advatage .bottom .item .info .tips p {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
}
.about-advatage .bottom .item .info .num {
  position: absolute;
  bottom: clamp(10px, 1.0416666667vw, 20px);
  left: 0;
  width: 100%;
  padding: 0 clamp(40px, 4.1666666667vw, 80px);
  text-align: center;
  font-size: clamp(30px, 3.125vw, 60px);
  font-weight: 600;
  color: var(--color-text-inverse);
  opacity: 0.3;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
@media (max-width: 1023px) {
  .about-advatage .bottom .item .info .num {
    display: none;
  }
}
.about-advatage .bottom .item.on {
  border-bottom: clamp(3px, 0.3125vw, 6px) solid var(--color-primary);
}
@media (min-width: 1024px) {
  .about-advatage .bottom .item.on {
    background-color: var(--color-bg);
  }
  .about-advatage .bottom .item.on .info {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .about-advatage .bottom .item.on .info .icon img {
    -webkit-filter: none;
            filter: none;
  }
  .about-advatage .bottom .item.on .info .tit {
    color: var(--color-text-primary);
  }
  .about-advatage .bottom .item.on .info .tips {
    display: block;
  }
  .about-advatage .bottom .item.on .info .num {
    color: var(--color-text-muted);
    text-align: left;
    opacity: 0.8;
  }
}
.about-brand {
  padding: clamp(50px, 5.2083333333vw, 100px) 0;
  position: relative;
}
.about-brand .title {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  text-align: center;
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
.about-brand .mask-left {
  position: absolute;
  top: clamp(25px, 2.6041666667vw, 50px);
  left: 0;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#fff));
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
  z-index: 6;
  width: clamp(79px, 8.2291666667vw, 158px);
  height: clamp(160px, 16.6666666667vw, 320px);
}
.about-brand .mask-right {
  position: absolute;
  top: clamp(25px, 2.6041666667vw, 50px);
  right: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff));
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
  z-index: 6;
  width: clamp(79px, 8.2291666667vw, 158px);
  height: clamp(160px, 16.6666666667vw, 320px);
}
.about-brand .scroll-x {
  width: 100%;
  overflow: hidden;
}
.about-brand .scroll-x .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.about-brand .scroll-x .box:not(:last-child) {
  margin-bottom: clamp(12px, 1.25vw, 24px);
}
.about-brand .scroll-x .box img {
  height: clamp(40px, 4.1666666667vw, 80px);
  -webkit-box-shadow: 0 clamp(2.5px, 0.2604166667vw, 5px) clamp(6px, 0.625vw, 12px) rgba(121, 148, 193, 0.1);
          box-shadow: 0 clamp(2.5px, 0.2604166667vw, 5px) clamp(6px, 0.625vw, 12px) rgba(121, 148, 193, 0.1);
}
.about-brand .scroll-x .box img:not(:last-child) {
  margin-right: clamp(6px, 0.625vw, 12px);
}

.rowup-left {
  -webkit-animation: 20s rowup-left linear infinite alternate;
          animation: 20s rowup-left linear infinite alternate;
}

.rowup-right {
  -webkit-animation: 20s rowup-right linear infinite alternate;
          animation: 20s rowup-right linear infinite alternate;
}

@-webkit-keyframes rowup-left {
  0% {
    -webkit-transform: translate3d(160px, 0, 0);
            transform: translate3d(160px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-480px, 0, 0);
            transform: translate3d(-480px, 0, 0);
  }
}

@keyframes rowup-left {
  0% {
    -webkit-transform: translate3d(160px, 0, 0);
            transform: translate3d(160px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-480px, 0, 0);
            transform: translate3d(-480px, 0, 0);
  }
}
@-webkit-keyframes rowup-right {
  0% {
    -webkit-transform: translate3d(-480px, 0, 0);
            transform: translate3d(-480px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(160px, 0, 0);
            transform: translate3d(160px, 0, 0);
  }
}
@keyframes rowup-right {
  0% {
    -webkit-transform: translate3d(-480px, 0, 0);
            transform: translate3d(-480px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(160px, 0, 0);
            transform: translate3d(160px, 0, 0);
  }
}
.product {
  --color-bg-product: #f1f5f6;
  width: 100%;
}
.product-list {
  padding: clamp(50px, 5.2083333333vw, 100px) 0;
  background-color: var(--color-bg-product);
}
@media (max-width: 1023px) {
  .product-list {
    padding: clamp(30px, 3.125vw, 60px) 0;
  }
}
.product-list .list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(15px, 1.5625vw, 30px);
}
@media (max-width: 1023px) {
  .product-list .list {
    margin-top: clamp(30px, 3.125vw, 60px);
    grid-template-columns: repeat(2, 1fr);
  }
}
.product-list .list .item {
  padding: clamp(12px, 1.25vw, 24px);
  border-radius: clamp(7.5px, 0.78125vw, 15px);
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 1023px) {
  .product-list .list .item {
    padding: clamp(16px, 1.6666666667vw, 32px) clamp(8px, 0.8333333333vw, 16px);
  }
}
.product-list .list .item .title {
  margin-top: clamp(19px, 1.9791666667vw, 38px);
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-primary);
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .product-list .list .item .title {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.product-list .list .item::after {
  content: "";
  width: 0;
  height: 3px;
  background-color: var(--color-primary);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.product-list .list .item:hover .title {
  color: var(--color-primary);
}
.product-list .list .item:hover::after {
  width: 100%;
}
.product-detail .overview {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.product-detail .overview img {
  width: 100%;
  display: block;
}
.product-detail .highlights {
  padding: clamp(40px, 4.1666666667vw, 80px) 0;
  background-color: var(--color-bg);
}
.product-detail .highlights .item {
  padding: clamp(10px, 1.0416666667vw, 20px) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.product-detail .highlights .item:not(:last-child) {
  margin-bottom: clamp(25px, 2.6041666667vw, 50px);
}
@media (min-width: 1024px) {
  .product-detail .highlights .item:nth-child(2n) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
            flex-flow: row-reverse;
  }
}
@media (max-width: 1023px) {
  .product-detail .highlights .item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-flow: column-reverse;
        flex-flow: column-reverse;
  }
}
.product-detail .highlights .item-img {
  width: 45%;
  position: relative;
  border-radius: clamp(6px, 0.625vw, 12px);
  overflow: hidden;
}
@media (max-width: 1023px) {
  .product-detail .highlights .item-img {
    width: 100%;
  }
}
.product-detail .highlights .item-img img {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.product-detail .highlights .item-img:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.product-detail .highlights .item-info {
  width: 45%;
}
@media (max-width: 1023px) {
  .product-detail .highlights .item-info {
    width: 100%;
    margin-bottom: clamp(15px, 1.5625vw, 30px);
  }
}
.product-detail .highlights .item-info img {
  width: 100%;
  display: block;
}
.product-detail .highlights .item-info .tit {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: clamp(10px, 1.0416666667vw, 20px);
  padding-bottom: clamp(6px, 0.625vw, 12px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
@media (max-width: 1023px) {
  .product-detail .highlights .item-info .tit {
    font-size: clamp(20px, 2.0833333333vw, 40px);
  }
}
.product-detail .highlights .item-info .desc {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  line-height: clamp(16px, 1.6666666667vw, 32px);
}
@media (max-width: 1023px) {
  .product-detail .highlights .item-info .desc {
    font-size: clamp(14px, 1.4583333333vw, 28px);
    line-height: clamp(21px, 2.1875vw, 42px);
  }
}
.product-detail .params {
  padding: clamp(40px, 4.1666666667vw, 80px) 0;
  background-color: var(--color-bg-gray);
}
.product-detail .params-main {
  margin: clamp(35px, 3.6458333333vw, 70px) auto;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .product-detail .params-main .specs-center {
    width: clamp(300px, 31.25vw, 600px);
    height: clamp(300px, 31.25vw, 600px);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 2;
  }
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-center {
    width: 100%;
    height: 100%;
    margin-bottom: clamp(25px, 2.6041666667vw, 50px);
  }
  .product-detail .params-main .specs-center img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.product-detail .params-main .specs-center img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-detail .params-main .specs-list {
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .product-detail .params-main .specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(20px, 2.0833333333vw, 40px);
    -webkit-column-gap: clamp(350px, 36.4583333333vw, 700px);
       -moz-column-gap: clamp(350px, 36.4583333333vw, 700px);
            column-gap: clamp(350px, 36.4583333333vw, 700px);
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 1fr);
  }
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.product-detail .params-main .specs-list .spec-item {
  padding: 2% 0;
  border-bottom: 1px solid var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(10px, 1.0416666667vw, 20px);
}
@media (min-width: 1024px) {
  .product-detail .params-main .specs-list .spec-item:nth-child(3n) {
    border-bottom: none;
  }
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-list .spec-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
            flex-flow: row-reverse;
  }
  .product-detail .params-main .specs-list .spec-item:last-child {
    border-bottom: none;
  }
}
.product-detail .params-main .specs-list .spec-item .spec-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (min-width: 1024px) {
  .product-detail .params-main .specs-list .spec-item .spec-text {
    text-align: right;
  }
}
.product-detail .params-main .specs-list .spec-item .spec-text .spec-value {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-list .spec-item .spec-text .spec-value {
    font-size: clamp(20px, 2.0833333333vw, 40px);
  }
}
.product-detail .params-main .specs-list .spec-item .spec-text .spec-label {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-muted);
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-list .spec-item .spec-text .spec-label {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.product-detail .params-main .specs-list .spec-item .spec-icon {
  width: clamp(45px, 4.6875vw, 90px);
  height: clamp(45px, 4.6875vw, 90px);
  border-radius: 50%;
  background-color: var(--color-bg);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media (max-width: 1023px) {
  .product-detail .params-main .specs-list .spec-item .spec-icon {
    width: clamp(80px, 8.3333333333vw, 160px);
    height: clamp(80px, 8.3333333333vw, 160px);
  }
}
.product-detail .params-main .specs-list .spec-item .spec-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.product-detail .video {
  padding: clamp(40px, 4.1666666667vw, 80px) 0;
  background-color: var(--color-bg);
  position: relative;
}
.product-detail .video-box {
  width: clamp(400px, 41.6666666667vw, 800px);
  margin: clamp(35px, 3.6458333333vw, 70px) auto clamp(5px, 0.5208333333vw, 10px);
  position: relative;
}
@media (max-width: 1023px) {
  .product-detail .video-box {
    width: 100%;
  }
}
.product-detail .related {
  background-color: var(--color-bg);
}
.product-detail .contact {
  padding: clamp(40px, 4.1666666667vw, 80px) 0;
}
.product-detail .contact-form {
  width: 100%;
}
.product-detail .contact-form .form-msg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.product-detail .contact-form .form-msg .form-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.0416666667vw, 20px);
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg .form-top {
    grid-template-columns: 1fr;
  }
}
.product-detail .contact-form .form-msg .form-top .form-group {
  width: 100%;
  position: relative;
}
.product-detail .contact-form .form-msg .form-top .form-group:not(:last-child) {
  margin-bottom: clamp(10px, 1.0416666667vw, 20px);
}
.product-detail .contact-form .form-msg .form-top .form-group label {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-secondary);
  margin-bottom: clamp(3px, 0.3125vw, 6px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg .form-top .form-group label {
    font-size: clamp(14px, 1.4583333333vw, 28px);
  }
}
.product-detail .contact-form .form-msg .form-top .form-group label span {
  font-size: clamp(6px, 0.625vw, 12px);
  margin-left: clamp(2px, 0.2083333333vw, 4px);
  color: var(--color-error);
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg .form-top .form-group label span {
    font-size: clamp(12px, 1.25vw, 24px);
  }
}
.product-detail .contact-form .form-msg .form-top .form-group .input-common, .product-detail .contact-form .form-msg .form-top .form-group textarea, .product-detail .contact-form .form-msg .form-top .form-group input {
  width: 100%;
  text-indent: clamp(4px, 0.4166666667vw, 8px);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.product-detail .contact-form .form-msg .form-top .form-group input {
  height: clamp(20px, 2.0833333333vw, 40px);
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg .form-top .form-group input {
    height: clamp(30px, 3.125vw, 60px);
  }
}
.product-detail .contact-form .form-msg .form-top .form-group textarea {
  height: clamp(60px, 6.25vw, 120px);
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg .form-top .form-group textarea {
    height: clamp(120px, 12.5vw, 240px);
  }
}
.product-detail .contact-form .form-msg .form-top .form-group:nth-last-child(1):nth-child(odd) {
  grid-column: 1/-1;
}
.product-detail .contact-form .form-msg button {
  width: clamp(60px, 6.25vw, 120px);
  height: clamp(20px, 2.0833333333vw, 40px);
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  margin: clamp(10px, 1.0416666667vw, 20px) auto 0;
}
@media (max-width: 1023px) {
  .product-detail .contact-form .form-msg button {
    width: clamp(120px, 12.5vw, 240px);
    height: clamp(35px, 3.6458333333vw, 70px);
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.product-nav {
  width: 100%;
  position: sticky;
  top: clamp(40px, 4.1666666667vw, 80px);
  background-color: var(--color-bg-gray);
  z-index: 99;
}
@media (max-width: 1023px) {
  .product-nav {
    display: none;
  }
}
.product-nav .scroll {
  width: 100%;
  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;
}
.product-nav .scroll li:not(:last-child) {
  margin-right: clamp(18px, 1.875vw, 36px);
}
.product-nav .scroll li a {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-primary);
  line-height: clamp(24px, 2.5vw, 48px);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.product-nav .scroll li a::after {
  content: "";
  width: 0;
  height: 3px;
  background-color: var(--color-primary);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}
.product-nav .scroll li a.active {
  font-weight: 600;
}
.product-nav .scroll li a.active::after {
  width: 100%;
}

.case {
  background-color: var(--color-bg-gray);
}
.case-filter {
  padding: clamp(25px, 2.6041666667vw, 50px) 0 clamp(40px, 4.1666666667vw, 80px);
  position: relative;
  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;
}
.case-filter .link {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-secondary);
  padding: 0 clamp(12px, 1.25vw, 24px);
  margin-right: clamp(15px, 1.5625vw, 30px);
  line-height: clamp(16px, 1.6666666667vw, 32px);
  border-radius: clamp(12px, 1.25vw, 24px);
  position: relative;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .case-filter .link {
    font-size: clamp(10px, 1.0416666667vw, 20px);
  }
}
.case-filter .link:not(:last-child):after {
  content: "";
  position: absolute;
  left: calc(100% + clamp(7.5px, 0.78125vw, 15px));
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: clamp(7px, 0.7291666667vw, 14px);
  background-color: var(--color-border);
}
.case-filter .link.active {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}
.case-list {
  padding-bottom: clamp(50px, 5.2083333333vw, 100px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(25px, 2.6041666667vw, 50px);
}
@media (max-width: 1023px) {
  .case-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.case-list .item {
  border-radius: clamp(6px, 0.625vw, 12px);
  background-color: var(--color-bg);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}
.case-list .item .info {
  padding: clamp(12px, 1.25vw, 24px) clamp(15px, 1.5625vw, 30px);
}
.case-list .item .info .tit {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  font-weight: 600;
  color: var(--color-text-primary);
  height: clamp(24px, 2.5vw, 48px);
  line-height: clamp(12px, 1.25vw, 24px);
  margin-bottom: clamp(10px, 1.0416666667vw, 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .case-list .item .info .tit {
    font-size: clamp(12px, 1.25vw, 24px);
    height: clamp(26px, 2.7083333333vw, 52px);
    line-height: clamp(13px, 1.3541666667vw, 26px);
  }
}
.case-list .item .info .meta {
  border-top: 1px solid var(--color-border);
  padding-top: clamp(10px, 1.0416666667vw, 20px);
  color: var(--color-text-muted);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.case-list .item .info .meta .time {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .case-list .item .info .meta .time {
    font-size: clamp(10px, 1.0416666667vw, 20px);
  }
}
.case-list .item .info .meta i {
  width: clamp(10px, 1.0416666667vw, 20px);
  height: clamp(10px, 1.0416666667vw, 20px);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.case-list .item:hover {
  background-color: var(--color-primary);
}
.case-list .item:hover .info .tit {
  color: var(--color-text-inverse);
}
.case-list .item:hover .info .meta {
  color: var(--color-text-inverse);
}
.case-detail {
  padding: clamp(35px, 3.6458333333vw, 70px) 0 clamp(50px, 5.2083333333vw, 100px);
}
.case-detail .title {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: clamp(20px, 2.0833333333vw, 40px);
}
@media (max-width: 1023px) {
  .case-detail .title {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.case-detail .content {
  width: 100%;
  padding: clamp(16px, 1.6666666667vw, 32px) clamp(20px, 2.0833333333vw, 40px);
  background-color: var(--gray-200);
  margin-bottom: clamp(35px, 3.6458333333vw, 70px);
}
.case-detail .content h1 {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: clamp(10px, 1.0416666667vw, 20px);
}
@media (max-width: 1023px) {
  .case-detail .content h1 {
    font-size: clamp(18px, 1.875vw, 36px);
  }
}
.case-detail .content .text {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-muted);
  line-height: clamp(16px, 1.6666666667vw, 32px);
  text-align: justify;
}
@media (max-width: 1023px) {
  .case-detail .content .text {
    font-size: clamp(12px, 1.25vw, 24px);
    line-height: clamp(21px, 2.1875vw, 42px);
  }
}
.case-detail-album {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.case-detail-album .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.case-detail-album .button {
  position: absolute;
  right: clamp(15px, 1.5625vw, 30px);
  bottom: clamp(15px, 1.5625vw, 30px);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.case-detail-album .button .square {
  width: clamp(24px, 2.5vw, 48px);
  height: clamp(24px, 2.5vw, 48px);
  background-color: var(--color-bg-card);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  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;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .case-detail-album .button .square {
    width: clamp(32px, 3.3333333333vw, 64px);
    height: clamp(32px, 3.3333333333vw, 64px);
  }
}
.case-detail-album .button .square svg {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
  color: var(--color-text-link);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .case-detail-album .button .square svg {
    width: clamp(16px, 1.6666666667vw, 32px);
    height: clamp(16px, 1.6666666667vw, 32px);
  }
}
.case-detail-album .button .square:not(:last-child) {
  margin-right: clamp(8px, 0.8333333333vw, 16px);
}
.case-detail-album .button .square:hover {
  background-color: var(--color-primary);
}
.case-detail-album .button .square:hover svg {
  color: var(--color-text-inverse);
}

.news {
  background-color: var(--color-bg-gray);
}
.news-list {
  padding-top: clamp(40px, 4.1666666667vw, 80px);
  padding-bottom: clamp(50px, 5.2083333333vw, 100px);
}
.news-list-top {
  display: grid;
}
@media (min-width: 1024px) {
  .news-list-top {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: clamp(15px, 1.5625vw, 30px);
  }
}
@media (max-width: 1023px) {
  .news-list-top {
    gap: clamp(16px, 1.6666666667vw, 32px);
  }
}
.news-list-slide {
  padding-top: clamp(40px, 4.1666666667vw, 80px);
  position: relative;
}
.news-list-slide .news-list-arrows {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 3;
  left: 0;
  right: 0;
  pointer-events: none;
}
.news-list-slide .news-list-arrows .arrow {
  width: clamp(20px, 2.0833333333vw, 40px);
  height: clamp(20px, 2.0833333333vw, 40px);
  border-radius: 50%;
  background-color: var(--color-transparent-black-20);
  position: absolute;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  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;
  pointer-events: auto;
}
@media (max-width: 1023px) {
  .news-list-slide .news-list-arrows .arrow {
    width: clamp(40px, 4.1666666667vw, 80px);
    height: clamp(40px, 4.1666666667vw, 80px);
  }
}
.news-list-slide .news-list-arrows .arrow svg {
  width: clamp(15px, 1.5625vw, 30px);
  height: clamp(15px, 1.5625vw, 30px);
  color: var(--color-text-inverse);
}
@media (max-width: 1023px) {
  .news-list-slide .news-list-arrows .arrow svg {
    width: clamp(30px, 3.125vw, 60px);
    height: clamp(30px, 3.125vw, 60px);
  }
}
.news-list-slide .news-list-arrows .arrow.news-list-prev {
  left: clamp(-40px, -4.1666666667vw, -80px);
}
@media (max-width: 1023px) {
  .news-list-slide .news-list-arrows .arrow.news-list-prev {
    left: clamp(-10px, -1.0416666667vw, -20px);
  }
}
.news-list-slide .news-list-arrows .arrow.news-list-next {
  right: clamp(-40px, -4.1666666667vw, -80px);
}
@media (max-width: 1023px) {
  .news-list-slide .news-list-arrows .arrow.news-list-next {
    right: clamp(-10px, -1.0416666667vw, -20px);
  }
}
.news-list-slide .news-list-arrows .arrow:hover {
  background-color: var(--color-primary);
}
.news-list .box {
  width: 100%;
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 1024px) {
  .news-list .box.first {
    grid-column: 1/span 2;
  }
  .news-list .box.first .litpic {
    height: 100%;
  }
  .news-list .box.first .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .news-list .box.first .text h1 {
    color: var(--color-text-inverse);
  }
  .news-list .box.first .text .desc {
    color: var(--color-text-inverse);
  }
  .news-list .box.first .text .eye {
    color: var(--color-text-inverse);
  }
  .news-list .box.first::after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-transparent-black-20);
    z-index: 2;
  }
}
.news-list .box .litpic {
  width: 100%;
  height: clamp(150px, 15.625vw, 300px);
  position: relative;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .news-list .box .litpic {
    height: clamp(200px, 20.8333333333vw, 400px);
  }
}
.news-list .box .litpic .meta {
  position: absolute;
  top: 0;
  padding: clamp(15px, 1.5625vw, 30px) clamp(25px, 2.6041666667vw, 50px);
  color: var(--color-text-inverse);
  width: 100%;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1023px) {
  .news-list .box .litpic .meta {
    padding: clamp(20px, 2.0833333333vw, 40px) clamp(30px, 3.125vw, 60px);
  }
}
.news-list .box .litpic .meta .date {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 1023px) {
  .news-list .box .litpic .meta .date {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.news-list .box .litpic .meta .date em {
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 24px);
  font-style: normal;
  display: block;
}
@media (max-width: 1023px) {
  .news-list .box .litpic .meta .date em {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.news-list .box .litpic .meta .cate {
  font-size: clamp(6px, 0.625vw, 12px);
  padding: clamp(1px, 0.1041666667vw, 2px) clamp(6px, 0.625vw, 12px);
  border-radius: clamp(6px, 0.625vw, 12px);
  border: 1px solid var(--color-white);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .news-list .box .litpic .meta .cate {
    font-size: clamp(12px, 1.25vw, 24px);
    padding: clamp(2px, 0.2083333333vw, 4px) clamp(12px, 1.25vw, 24px);
    border-radius: clamp(62px, 6.4583333333vw, 124px);
  }
}
.news-list .box .litpic .bg {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 100%;
  -webkit-transition: all 1s;
  transition: all 1s;
  width: 100%;
}
.news-list .box .litpic::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.news-list .box .text {
  padding: clamp(15px, 1.5625vw, 30px) clamp(25px, 2.6041666667vw, 50px);
}
@media (max-width: 1023px) {
  .news-list .box .text {
    padding: clamp(20px, 2.0833333333vw, 40px) clamp(30px, 3.125vw, 60px);
  }
}
.news-list .box .text h1 {
  font-size: clamp(9px, 0.9375vw, 18px);
  color: var(--color-text-primary);
  height: clamp(24px, 2.5vw, 48px);
  margin-bottom: clamp(6px, 0.625vw, 12px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .news-list .box .text h1 {
    font-size: clamp(18px, 1.875vw, 36px);
    height: clamp(54px, 5.625vw, 108px);
  }
}
.news-list .box .text .desc {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-secondary);
  height: clamp(18px, 1.875vw, 36px);
  line-height: 1.4;
  margin-bottom: clamp(10px, 1.0416666667vw, 20px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .news-list .box .text .desc {
    font-size: clamp(16px, 1.6666666667vw, 32px);
    height: clamp(44px, 4.5833333333vw, 88px);
  }
}
.news-list .box .text .eye {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
  padding-top: clamp(10px, 1.0416666667vw, 20px);
  border-top: 1px solid var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1023px) {
  .news-list .box .text .eye {
    font-size: clamp(14px, 1.4583333333vw, 28px);
  }
}
.news-list .box .text .eye svg {
  width: clamp(9px, 0.9375vw, 18px);
  height: clamp(9px, 0.9375vw, 18px);
  margin-right: clamp(2.5px, 0.2604166667vw, 5px);
}
@media (max-width: 1023px) {
  .news-list .box .text .eye svg {
    width: clamp(16px, 1.6666666667vw, 32px);
    height: clamp(16px, 1.6666666667vw, 32px);
    margin-right: clamp(6px, 0.625vw, 12px);
  }
}
.news-list .box:hover .litpic .meta .cate {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.news-list .box:hover .litpic .bg {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.news-detail {
  padding: clamp(50px, 5.2083333333vw, 100px) 0;
}
.news-detail .detail-main {
  width: 100%;
  padding: clamp(25px, 2.6041666667vw, 50px) clamp(15px, 1.5625vw, 30px);
  background-color: var(--color-bg);
  -webkit-box-shadow: 0 0 clamp(5px, 0.5208333333vw, 10px) var(--color-transparent-black-10);
          box-shadow: 0 0 clamp(5px, 0.5208333333vw, 10px) var(--color-transparent-black-10);
}
.news-detail .detail-main .title-box {
  text-align: center;
  padding-bottom: clamp(10px, 1.0416666667vw, 20px);
  border-bottom: 1px solid var(--color-border);
}
.news-detail .detail-main .title-box h1 {
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: clamp(5px, 0.5208333333vw, 10px);
}
@media (max-width: 1023px) {
  .news-detail .detail-main .title-box h1 {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.news-detail .detail-main .title-box .meta {
  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;
}
.news-detail .detail-main .title-box .meta span {
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
}
@media (max-width: 1023px) {
  .news-detail .detail-main .title-box .meta span {
    font-size: clamp(12px, 1.25vw, 24px);
  }
}
.news-detail .detail-main .title-box .meta span:not(:last-child) {
  margin-right: clamp(6px, 0.625vw, 12px);
}
.news-detail .detail-main .content {
  padding: clamp(15px, 1.5625vw, 30px) 0;
  font-size: clamp(8px, 0.8333333333vw, 16px);
  text-align: justify;
  line-height: 2;
}
@media (max-width: 1023px) {
  .news-detail .detail-main .content {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.news-detail .detail-main .content img {
  max-width: 100%;
}

.solution {
  background-color: var(--color-bg);
}
.solution-list {
  padding: clamp(50px, 5.2083333333vw, 100px) 0;
}
.solution-list .list {
  position: relative;
}
@media (max-width: 1023px) {
  .solution-list .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.solution-list .list .item {
  width: calc((100% - clamp(30px, 3.125vw, 60px)) / 3);
}
@media (min-width: 1024px) {
  .solution-list .list .item {
    position: absolute;
    display: block;
    overflow: hidden;
  }
}
@media (max-width: 1023px) {
  .solution-list .list .item {
    width: 100%;
    height: clamp(350px, 36.4583333333vw, 700px);
    position: relative;
  }
  .solution-list .list .item:not(:last-child) {
    margin-bottom: clamp(30px, 3.125vw, 60px);
  }
}
.solution-list .list .item a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.solution-list .list .item .info {
  width: 100%;
  height: 100%;
  padding: 10% 15% 10% 10%;
  color: var(--color-text-inverse);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.solution-list .list .item .info .inner {
  height: 100%;
  width: 100%;
  position: relative;
}
.solution-list .list .item .info .inner .title .en {
  font-size: clamp(13px, 1.3541666667vw, 26px);
  font-weight: 600;
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .solution-list .list .item .info .inner .title .en {
    font-size: clamp(18px, 1.875vw, 36px);
  }
}
.solution-list .list .item .info .inner .title .cn {
  font-size: clamp(11px, 1.1458333333vw, 22px);
  margin-top: clamp(4px, 0.4166666667vw, 8px);
}
@media (max-width: 1023px) {
  .solution-list .list .item .info .inner .title .cn {
    font-size: clamp(20px, 2.0833333333vw, 40px);
  }
}
.solution-list .list .item .info .icon {
  width: clamp(35px, 3.6458333333vw, 70px);
  height: clamp(35px, 3.6458333333vw, 70px);
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  position: absolute;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  z-index: 2;
}
@media (max-width: 1023px) {
  .solution-list .list .item .info .icon {
    width: clamp(50px, 5.2083333333vw, 100px);
    height: clamp(50px, 5.2083333333vw, 100px);
  }
}
.solution-list .list .item .info .icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.solution-list .list .item .info .desc {
  width: 100%;
  height: clamp(40px, 4.1666666667vw, 80px);
  line-height: clamp(14px, 1.4583333333vw, 28px);
  position: absolute;
  left: 0;
  bottom: clamp(-10px, -1.0416666667vw, -20px);
  opacity: 0;
  min-width: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (max-width: 1023px) {
  .solution-list .list .item .info .desc {
    height: clamp(60px, 6.25vw, 120px);
    line-height: clamp(20px, 2.0833333333vw, 40px);
    font-size: clamp(14px, 1.4583333333vw, 28px);
  }
}
.solution-list .list .item .litpic {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.solution-list .list .item .litpic .bg {
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  display: block;
}
.solution-list .list .item .litpic::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: var(--color-transparent-black-50);
  z-index: 2;
}
.solution-list .list .item::after {
  height: clamp(4px, 0.4166666667vw, 8px);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  opacity: 0;
  background-color: var(--color-primary);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  z-index: 3;
}
.solution-list .list .item:hover .info .icon {
  bottom: clamp(-10px, -1.0416666667vw, -20px);
  opacity: 0;
}
.solution-list .list .item:hover .info .desc {
  opacity: 1;
  bottom: 0;
}
.solution-list .list .item:hover::after {
  width: 100%;
  opacity: 1;
}
.solution-detail {
  padding: clamp(50px, 5.2083333333vw, 100px) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (max-width: 1023px) {
  .solution-detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.solution-detail .info {
  width: 35%;
}
@media (max-width: 1023px) {
  .solution-detail .info {
    width: 100%;
  }
}
.solution-detail .info .title {
  margin-bottom: clamp(25px, 2.6041666667vw, 50px);
  padding-bottom: clamp(25px, 2.6041666667vw, 50px);
  border-bottom: 2px solid var(--color-border);
}
.solution-detail .info .title .en {
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  max-width: clamp(120px, 12.5vw, 240px);
}
@media (max-width: 1023px) {
  .solution-detail .info .title .en {
    font-size: clamp(26px, 2.7083333333vw, 52px);
    max-width: clamp(180px, 18.75vw, 360px);
  }
}
.solution-detail .info .title .cn {
  font-size: clamp(13px, 1.3541666667vw, 26px);
  color: var(--color-text-primary);
  margin-top: clamp(10px, 1.0416666667vw, 20px);
}
@media (max-width: 1023px) {
  .solution-detail .info .title .cn {
    font-size: clamp(24px, 2.5vw, 48px);
  }
}
.solution-detail .info .text {
  font-size: clamp(8px, 0.8333333333vw, 16px);
  color: var(--color-text-secondary);
  text-align: justify;
}
@media (min-width: 1024px) {
  .solution-detail .info .text {
    padding-left: clamp(6px, 0.625vw, 12px);
    height: clamp(150px, 15.625vw, 300px);
    line-height: clamp(15px, 1.5625vw, 30px);
    overflow-y: auto;
  }
  .solution-detail .info .text::-webkit-scrollbar {
    width: clamp(2px, 0.2083333333vw, 4px);
    height: clamp(2px, 0.2083333333vw, 4px);
  }
}
@media (max-width: 1023px) {
  .solution-detail .info .text {
    font-size: clamp(16px, 1.6666666667vw, 32px);
  }
}
.solution-detail .img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media (min-width: 1024px) {
  .solution-detail .img {
    margin-left: 8%;
  }
}
@media (max-width: 1023px) {
  .solution-detail .img {
    width: 100%;
    margin-top: clamp(12px, 1.25vw, 24px);
  }
}
.solution-detail .img img {
  width: 100%;
}

.contact {
  padding-top: clamp(50px, 5.2083333333vw, 100px);
  background-color: var(--color-bg-gray);
}
.contact-title {
  font-size: clamp(16px, 1.6666666667vw, 32px);
  font-weight: 600;
  color: var(--color-text-inverse);
  padding-bottom: clamp(8px, 0.8333333333vw, 16px);
  margin-bottom: clamp(17px, 1.7708333333vw, 34px);
  position: relative;
}
.contact-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(45px, 4.6875vw, 90px);
  height: clamp(2px, 0.2083333333vw, 4px);
  background-color: var(--color-white);
}
.contact-main {
  margin-bottom: clamp(40px, 4.1666666667vw, 80px);
  background-color: var(--color-bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.contact-main .inner {
  padding: clamp(40px, 4.1666666667vw, 80px) clamp(20px, 2.0833333333vw, 40px);
}
.contact-main .info {
  width: 50%;
  background-image: url("../images/contact-bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width: 1023px) {
  .contact-main .info {
    width: 100%;
  }
}
.contact-main .info .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.contact-main .info .list .item {
  color: var(--color-text-inverse);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact-main .info .list .item:not(:last-child) {
  margin-bottom: clamp(15px, 1.5625vw, 30px);
}
.contact-main .info .list .item .ico {
  width: clamp(40px, 4.1666666667vw, 80px);
  height: clamp(40px, 4.1666666667vw, 80px);
  margin-right: clamp(6px, 0.625vw, 12px);
}
.contact-main .info .list .item .ico img {
  width: 100%;
  height: 100%;
  display: block;
}
.contact-main .info .list .item .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.contact-main .info .list .item .text h3 {
  font-size: clamp(12px, 1.25vw, 24px);
}
.contact-main .info .list .item .text p {
  font-size: clamp(14px, 1.4583333333vw, 28px);
  line-height: 1;
  font-weight: 600;
}
.contact-main .info .follow {
  margin-top: clamp(20px, 2.0833333333vw, 40px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact-main .info .follow .item {
  cursor: pointer;
  position: relative;
}
.contact-main .info .follow .item:not(:last-child) {
  margin-right: clamp(16px, 1.6666666667vw, 32px);
}
.contact-main .info .follow .item .img {
  width: clamp(35px, 3.6458333333vw, 70px);
  height: clamp(35px, 3.6458333333vw, 70px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.contact-main .info .follow .item .code {
  width: clamp(50px, 5.2083333333vw, 100px);
  height: clamp(50px, 5.2083333333vw, 100px);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0);
          transform: translateX(-50%) scale(0);
  top: calc(100% + clamp(3px, 0.3125vw, 6px));
  background-color: var(--color-white);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.contact-main .info .follow .item .code::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 0;
  border-bottom: clamp(3px, 0.3125vw, 6px) solid var(--color-white);
  border-right: clamp(3px, 0.3125vw, 6px) solid transparent;
  border-left: clamp(3px, 0.3125vw, 6px) solid transparent;
}
.contact-main .info .follow .item .code img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contact-main .info .follow .item:hover .code {
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
}
.contact-main .form {
  width: 50%;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .contact-main .form {
    width: 100%;
  }
}
.contact-main .form .contact-title {
  color: var(--color-primary);
}
.contact-main .form .contact-title::after {
  background-color: var(--color-primary);
}
.contact-main .form-contact .form-group {
  width: 100%;
  background-color: var(--color-bg);
  border-radius: clamp(4px, 0.4166666667vw, 8px);
  border: 1px solid var(--color-border);
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.contact-main .form-contact .form-group:not(:first-child) {
  margin-top: clamp(12px, 1.25vw, 24px);
}
.contact-main .form-contact .form-group input,
.contact-main .form-contact .form-group textarea {
  width: 100%;
  border: none;
  padding: clamp(6px, 0.625vw, 12px);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
  background-color: transparent;
  position: relative;
}
.contact-main .form-contact .form-group input:not(:-moz-placeholder) ~ .label, .contact-main .form-contact .form-group textarea:not(:-moz-placeholder) ~ .label {
  display: none;
}
.contact-main .form-contact .form-group input:not(:-ms-input-placeholder) ~ .label, .contact-main .form-contact .form-group textarea:not(:-ms-input-placeholder) ~ .label {
  display: none;
}
.contact-main .form-contact .form-group input:not(:placeholder-shown) ~ .label,
.contact-main .form-contact .form-group textarea:not(:placeholder-shown) ~ .label {
  display: none;
}
.contact-main .form-contact .form-group input {
  height: clamp(20px, 2.0833333333vw, 40px);
}
.contact-main .form-contact .form-group textarea {
  height: clamp(60px, 6.25vw, 120px);
}
.contact-main .form-contact .form-group .label {
  position: absolute;
  top: clamp(10px, 1.0416666667vw, 20px);
  left: clamp(6px, 0.625vw, 12px);
  margin-top: clamp(-5px, -0.5208333333vw, -10px);
  font-size: clamp(7px, 0.7291666667vw, 14px);
  color: var(--color-text-muted);
}
.contact-main .form-contact .form-group .label span {
  margin-right: 3px;
  line-height: 1;
}
.contact-main .form-contact .tips {
  font-size: clamp(6px, 0.625vw, 12px);
  color: var(--color-text-muted);
}
.contact-main .form-contact .tips span,
.contact-main .form-contact .tips a {
  color: var(--color-primary);
}
.contact-main .form-contact .submit {
  width: 100%;
  height: clamp(30px, 3.125vw, 60px);
  margin-top: clamp(12px, 1.25vw, 24px);
  background-color: var(--color-primary);
  border-radius: clamp(4px, 0.4166666667vw, 8px);
  font-size: clamp(10px, 1.0416666667vw, 20px);
  font-weight: 600;
  color: var(--color-text-inverse);
  text-align: center;
}
.contact-map {
  width: 100%;
  height: clamp(270px, 28.125vw, 540px);
}
@media (max-width: 1023px) {
  .contact-map {
    height: clamp(320px, 33.3333333333vw, 640px);
  }
}