@font-face {
  font-family: "Bronova";
  src: url("/assets/font/Bronova-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  ascent-override: 103%;
  descent-override: 30%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

@font-face {
  font-family: "Bronova";
  src: url("/assets/font/Bronova-Blod.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  ascent-override: 103%;
  descent-override: 30%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

:root {
  --header-height: clamp(84px, 8.75vw, 168px);
  --footer-height: 200px;
  --primary-color: #dd133d;
  --layout: clamp(750px, 72.3958vw, 1390px);
  --font-12: clamp(8.4px, 0.625vw, 12px);
  --font-13: clamp(9.1px, 0.6771vw, 13px);
  --font-14: clamp(9.8px, 0.7292vw, 14px);
  --font-15: clamp(10.5px, 0.7813vw, 15px);
  --font-16: clamp(11.2px, 0.8333vw, 16px);
  --font-17: clamp(11.9px, 0.8854vw, 17px);
  --font-18: clamp(12.6px, 0.9375vw, 18px);
  --font-19: clamp(13.3px, 0.9896vw, 19px);
  --font-20: clamp(14px, 1.0417vw, 20px);
  --font-21: clamp(14.7px, 1.0938vw, 21px);
  --font-22: clamp(15.4px, 1.1458vw, 22px);
  --font-23: clamp(16.1px, 1.1979vw, 23px);
  --font-24: clamp(16.8px, 1.25vw, 24px);
  --font-25: clamp(17.5px, 1.3021vw, 25px);
  --font-26: clamp(18.2px, 1.3542vw, 26px);
  --font-27: clamp(18.9px, 1.4063vw, 27px);
  --font-28: clamp(19.6px, 1.4583vw, 28px);
  --font-29: clamp(20.3px, 1.5104vw, 29px);
  --font-30: clamp(21px, 1.5625vw, 30px);
  --font-31: clamp(21.7px, 1.6146vw, 31px);
  --font-32: clamp(22.4px, 1.6667vw, 32px);
  --font-33: clamp(23.1px, 1.7188vw, 33px);
  --font-34: clamp(23.8px, 1.7708vw, 34px);
  --font-35: clamp(24.5px, 1.8229vw, 35px);
  --font-36: clamp(25.2px, 1.875vw, 36px);
  --font-37: clamp(25.9px, 1.9271vw, 37px);
  --font-38: clamp(26.6px, 1.9792vw, 38px);
  --font-39: clamp(27.3px, 2.0313vw, 39px);
  --font-40: clamp(28px, 2.0833vw, 40px);
  --font-41: clamp(28.7px, 2.1354vw, 41px);
  --font-42: clamp(29.4px, 2.1875vw, 42px);
  --font-43: clamp(30.1px, 2.2396vw, 43px);
  --font-44: clamp(30.8px, 2.2917vw, 44px);
  --font-45: clamp(31.5px, 2.3438vw, 45px);
  --font-46: clamp(32.2px, 2.3958vw, 46px);
  --font-47: clamp(32.9px, 2.4479vw, 47px);
  --font-48: clamp(33.6px, 2.5vw, 48px);
  --font-49: clamp(34.3px, 2.5521vw, 49px);
  --font-50: clamp(35px, 2.6042vw, 50px);
  --font-51: clamp(35.7px, 2.6563vw, 51px);
  --font-52: clamp(36.4px, 2.7083vw, 52px);
  --font-53: clamp(37.1px, 2.7604vw, 53px);
  --font-54: clamp(37.8px, 2.8125vw, 54px);
  --font-55: clamp(38.5px, 2.8646vw, 55px);
  --font-56: clamp(39.2px, 2.9167vw, 56px);
  --font-57: clamp(39.9px, 2.9688vw, 57px);
  --font-58: clamp(40.6px, 3.0208vw, 58px);
  --font-59: clamp(41.3px, 3.0729vw, 59px);
  --font-60: clamp(42px, 3.125vw, 60px);
  --font-61: clamp(42.7px, 3.1771vw, 61px);
  --font-62: clamp(43.4px, 3.2292vw, 62px);
  --font-63: clamp(44.1px, 3.2813vw, 63px);
  --font-64: clamp(44.8px, 3.3333vw, 64px);
  --font-65: clamp(45.5px, 3.3854vw, 65px);
  --font-66: clamp(46.2px, 3.4375vw, 66px);
  --font-67: clamp(46.9px, 3.4896vw, 67px);
  --font-68: clamp(47.6px, 3.5417vw, 68px);
  --font-69: clamp(48.3px, 3.5937vw, 69px);
  --font-70: clamp(49px, 3.6458vw, 70px);
  --font-71: clamp(49.7px, 3.6979vw, 71px);
  --font-72: clamp(50.4px, 3.75vw, 72px);
  --font-73: clamp(51.1px, 3.8021vw, 73px);
  --font-74: clamp(51.8px, 3.8542vw, 74px);
  --font-75: clamp(52.5px, 3.9063vw, 75px);
  --font-76: clamp(53.2px, 3.9583vw, 76px);
  --font-77: clamp(53.9px, 4.0104vw, 77px);
  --font-78: clamp(54.6px, 4.0625vw, 78px);
  --font-79: clamp(55.3px, 4.1146vw, 79px);
  --font-80: clamp(56px, 4.1667vw, 80px);
  --font-81: clamp(56.7px, 4.2188vw, 81px);
  --font-82: clamp(57.4px, 4.2708vw, 82px);
  --font-83: clamp(58.1px, 4.3229vw, 83px);
  --font-84: clamp(58.8px, 4.375vw, 84px);
  --font-85: clamp(59.5px, 4.4271vw, 85px);
  --font-86: clamp(60.2px, 4.4792vw, 86px);
  --font-87: clamp(60.9px, 4.5313vw, 87px);
  --font-88: clamp(61.6px, 4.5833vw, 88px);
  --font-89: clamp(62.3px, 4.6354vw, 89px);
  --font-90: clamp(63px, 4.6875vw, 90px);
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 禁用浏览器文本缩放 */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

::placeholder {
  color: #999;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Bronova";
  font-weight: 400;
  font-display: swap;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

button {
  cursor: pointer;
}

img,
video {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

p {
  margin: 0;
}

.icon-menu {
  width: 40px;
  aspect-ratio: 80 / 56;
}

.header {
  height: var(--header-height);
  padding: 0 3.125vw;
  display: flex;
  justify-content: space-between;
  background-color: #000;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

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

.logo {
  flex-shrink: 0;
  height: inherit;
  display: flex;
  align-items: center;
}

.logo>img {
  width: min(12.5vw, 240px);
  aspect-ratio: 482 / 80;
}

.header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vw;
}

.header .navbar .nav {
  width: 6vw;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: var(--font-24);
  color: #999;
}

.header .navbar .nav:hover,
.header .navbar .nav.active {
  color: #fff;
  font-weight: bold;
}

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

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

.header .toolbar .lang {
  width: 7.2917vw;
  aspect-ratio: 276 / 78;
  border: 2px solid #fff;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
}

.header .toolbar .lang input {
  opacity: 0;
  width: 0;
  height: 0;
}

.header .toolbar .lang .slider {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 1;
}

.header .toolbar .lang .slider::before {
  position: absolute;
  content: "";
  height: inherit;
  width: 3.6458vw;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  border-radius: 30px;
  transition: 0.4s;
  z-index: 2;
}

.header .toolbar .lang input:checked~.slider::before {
  transform: translateX(3.6458vw);
}

.header .toolbar .lang .slider-text {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 9;
  display: flex;
  align-items: center;
  color: #fff;
}

.header .toolbar .lang .slider-text span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.header .toolbar .lang input:checked~.slider-text .on-text {
  color: #000;
}

.header .toolbar .lang input:not(:checked)~.slider-text .off-text {
  color: #000;
}

.layout {
  margin: 0 auto;
  width: var(--layout);
}

.footer {
  background-color: #1b1b1b;
}

.footer .logo-box {
  padding: 75px 0 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .navbar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5417vw;
}

.footer .navbar .nav {
  width: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: var(--font-24);
  color: #999;
}

.footer .navbar .nav:hover,
.footer .navbar .nav.active {
  color: #fff;
  font-weight: bold;
}

.footer .apps {
  margin-top: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
}

.footer .apps .app {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.footer .apps .icon-app {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}

.footer .apps .app.active .icon-app,
.footer .apps .app:hover .icon-app {
  content: var(--hover-url);
}

.footer .contact-us {
  padding: 40px 0 80px;
  font-size: var(--font-16);
  color: #999;
  text-align: center;
  line-height: normal;
}

.container {
  position: relative;
}

.breadcrumb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 0 30px;
  background-color: rgba(255, 255, 255, 0.75);
}

.breadcrumb>ul {
  height: 42px;
  display: flex;
  align-items: center;
}

.breadcrumb>ul>li {
  display: flex;
  align-items: center;
  font-size: var(-font-16);
  color: #727171;
}

.breadcrumb>ul>li+li::before {
  content: "/";
  padding: 0 10px;
  color: #727171;
}

.breadcrumb>ul>li.active,
.breadcrumb>ul>li:hover {
  color: var(--primary-color);
}

.breadcrumb>ul>li>a {
  color: inherit;
}

.btn-contact-us {
  width: 142px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-19);
  color: #3e3a39;
  background-color: #fff;
  border: 1px solid var(--primary-color);
  border-radius: 30px;
}

.btn-contact-us:hover {
  color: #fff;
  background-color: var(--primary-color);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #fff;
  border-radius: min(2.6042vw, 50px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  width: 72.6562vw;
  transform: translateY(-20%);
  transition: all 0.6s;
  position: relative;
  overflow: hidden;
}

.modal .modal-body {
  max-height: 98vh;
  overflow-y: auto;
}

.modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.modal .modal-body::-webkit-scrollbar-thumb {
  background: #bdc3c7;
  border-radius: 2px;
}

.modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #95a5a6;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-close {
  width: 2.0833vw;
  height: 2.0833vw;
  position: absolute;
  right: 2.0833vw;
  top: 2.6042vw;
  cursor: pointer;
}

.product-detail .flex-info {
  padding: 3.6458vw 2.6042vw 3.125vw;
  display: flex;
  align-items: flex-start;
}

.product-detail .flex-info .flex-swiper {
  flex-shrink: 0;
  width: 38.0208vw;
  display: flex;
}

.product-detail .flex-info .flex-swiper video {
  width: 38.0208vw;
  background: #000;
  object-fit: contain;
  height: 400px
}

.product-detail .flex-info .flex-swiper .swiper-ori {
  width: 31.25vw;
  height: 31.25vw;
}

.product-detail .flex-info .flex-swiper .swiper-ori img {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: contain;
}

.product-detail .flex-info .flex-swiper .flex-thumbs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 0.8854vw;
}

.product-detail .flex-info .flex-swiper .swiper-thumbs {
  width: 6.0417vw;
  height: 27.0833vw;
}

.product-detail .flex-info .flex-swiper .swiper-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 30px;
}

.product-detail .flex-info .flex-swiper .swiper-thumbs .swiper-slide-thumb-active img {
  outline: 3px solid #dd133d;
  outline-offset: -3px;
}

.product-detail .flex-info .flex-swiper .flex-thumbs .swiper-btn-prev,
.product-detail .flex-info .flex-swiper .flex-thumbs .swiper-btn-next {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.product-detail .flex-info .flex-swiper .flex-thumbs .swiper-btn-prev img,
.product-detail .flex-info .flex-swiper .flex-thumbs .swiper-btn-next img {
  width: 1.5625vw;
  aspect-ratio: 29 / 16;
}

.product-detail .flex-info .baseinfo {
  flex: 1;
  padding: 2.6042vw 0 0 1.8229vw;
}

.product-detail .flex-info .baseinfo .name {
  font-size: var(--font-48);
  font-weight: bold;
}

.product-detail .flex-info .baseinfo .model {
  margin-top: 0.4688vw;
  font-size: var(--font-36);
  font-weight: bold;
}

.product-detail .flex-info .baseinfo .cells {
  margin-top: 3.125vw;
}

.product-detail .flex-info .baseinfo .cells .cell:nth-child(n + 2) {
  margin-top: 0.7813vw;
}

.product-detail .flex-info .baseinfo .cells .cell .label {
  font-size: var(--font-24);
  font-weight: bold;
}

.product-detail .flex-info .baseinfo .cells .cell .value {
  margin-top: 0.2604vw;
  font-size: var(--font-16);
  line-height: normal;
}

.product-detail .props {
  padding: 2.0833vw 2.6042vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.6042vw;
  background-color: #efefef;
  border-radius: min(2.6042vw, 50px);
}

.product-detail .props .prop {
  width: calc(50% - 1.3021vw);
  height: 2.0833vw;
  padding: 0 1.0417vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-18);
}

.product-detail .props .prop:nth-child(4n + 1),
.product-detail .props .prop:nth-child(4n + 2) {
  background-color: #fff;
}