@font-face {
  font-family: 'Barlow';
  src: url('./fonts/Barlow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow-Medium';
  src: url('./fonts/Barlow-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow-Bold';
  src: url('./fonts/Barlow-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Barlow-ExtraBold';
  src: url('./fonts/Barlow-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserat Black";
  src: url('./fonts/Montserrat-Black.ttf') format('truetype');
  font-style: 900;
}

@font-face {
  font-family: "Plus Jakarta Sans-Bold";
  src: url('./fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Plus Jakarta Sans-Medium";
  src: url('./fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Inter-SemiBold";
  src: url('./fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
}

@media screen and (min-width: 576px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 1800px) {
  .container {
    max-width: 1600px;
  }
}


.primaryBtn,
.whiteBtn {
  font-family: var(--medium-font-family);
  font-size: var(--font-20);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  padding: 18px 25px;
  justify-content: center;
  align-items: center;
  gap: var(--gap-10);
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
  width: fit-content;
}

.primaryBtn {
  color: #FFF;
  background: #F01F0E;
}

.primaryBtn:hover {
  color: #FFF !important;
  background: #FF3221;
}

.whiteBtn {
  background: #FFF;
  color: var(--color-primary);
}

/* .primaryBtn svg,
  .whiteBtn svg {
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease;
  } */

.primaryBtn:hover,
.whiteBtn:hover {
  gap: var(--gap-10);
}

/* .primaryBtn:hover svg,
  .whiteBtn:hover svg {
    visibility: visible;
    width: auto;
    transition: all 0.3s ease;
  } */


/* 轮播图按钮样式 */
.no-position.swiper-button-prev,
.no-position.swiper-button-next {
  position: unset !important;
  margin: 0 !important;
  transform: none !important;
}

.swiper-button-prev,
.swiper-button-next {
  width: 54px !important;
  height: 54px !important;
  border: 2px solid #D7D6D6 !important;
  background: #FFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 23px !important;
  font-weight: 700 !important;
  color: rgba(17, 17, 17, 0.50) !important;
  transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev.active,
.swiper-button-next.active {
  border-color: #F01F0E !important;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after,
.swiper-button-prev.active:after,
.swiper-button-next.active:after {
  color: #F01F0E !important;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 1 !important;
}

.swiper-button-prev.swiper-button-disabled:after,
.swiper-button-next.swiper-button-disabled:after {
  color: #D9D9D9 !important;
}

.swiper-button-prev.swiper-button-disabled:hover,
.swiper-button-next.swiper-button-disabled:hover {
  cursor: not-allowed !important;
  background: #fff !important;
}

.inqury-form .text-wrap .char-count {
  display: none;
}

.inqury-form .textarea-wrap .char-count {
  display: none;
}

.inqury-form .textarea-wrap .textarea-input {
  resize: none;
}

.inqury_title_box .inqury_title_text {
  font-family: var(--title-font-family);
  color: #111 !important;
  font-size: var(--font-48) !important;
  line-height: normal !important;
}

.inqury_title_box .inqury_titl_desc {
  color: #111 !important;
  font-family: var(--font-family);
  font-size: var(--font-20) !important;
  line-height: normal !important;
}

.inqury-form .input-wrap .input-label.required::before {
  display: none !important;
}

.inqury-form .input-wrap .input-label.required::after {
  content: "*";
  color: #F0150F;
  padding-left: 5px;
}

.inqury-form .input-wrap .input-label {
  color: #333 !important;
  font-family: var(--medium-font-family);
  font-size: var(--font-22);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
  outline-offset: -30px !important;
}

.yingfang-button-prev,
.yingfang-button-next{
  width: 54px;
  height: 54px;
  border: 2px solid #D7D6D6;
  background: #FFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.yingfang-button-prev:hover,
.yingfang-button-next:hover,
.yingfang-button-prev.active,
.yingfang-button-next.active {
  border-color: var(--color-primary);
}

.yingfang-button-prev:hover svg path,
.yingfang-button-next:hover svg path,
.yingfang-button-prev.active svg path,
.yingfang-button-next.active svg path {
  stroke: var(--color-primary);
  stroke-opacity: 1;
}

:root {
  --font-family: 'Barlow', sans-serif; 
  --title-font-family: 'Barlow-Bold', sans-serif;
  --medium-font-family: 'Barlow-Medium', sans-serif;
  --extrabold-font-family: 'Barlow-ExtraBold', sans-serif;
  --font-270: 260px;
  --font-100: 100px;
  --font-80: 80px;
  --font-70: 70px;
  --font-76: 76px;
  --font-72: 72px;
  --font-64: 64px;
  --font-60: 60px;
  --font-56: 56px;
  --font-50: 50px;
  --font-48: 48px;
  --font-46: 46px;
  --font-40: 40px;
  --font-38: 38px;
  --font-36: 36px;
  --font-30: 30px;
  --font-32: 32px;
  --font-28: 28px;
  --font-26: 26px;
  --font-24: 24px;
  --font-22: 22px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-14: 14px;

  --component-gap: 120px;
  --gap-175: 175px;
  --gap-100: 100px;
  --gap-90: 90px;
  --gap-80: 80px;
  --gap-72: 72px;
  --gap-70: 70px;
  --gap-60: 60px;
  --gap-50: 50px;
  --gap-40: 40px;
  --gap-30: 30px;
  --gap-25: 25px;
  --gap-24: 24px;
  --gap-20: 20px;
  --gap-14: 14px;
  --gap-12: 12px;
  --gap-10: 10px;

  --page-padding: max(15px, calc((100vw - 1600px) / 2));
}

@media (max-width: 1800px) {
  :root {
    --font-270: 220px;
  }
}

@media (max-width: 1500px) {

  .primaryBtn,
  .whiteBtn {
    padding: 12px 20px;
  }

  :root {
    --font-270: 180px;
    --font-100: 90px;
    --font-80: 72px;
    --font-76: 68px;
    --font-70: 65px;
    --font-64: 60px;
    --font-60: 56px;
    --font-56: 52px;
    --font-50: 46px;
    --font-48: 44px;
    --font-46: 42px;
    --font-40: 38px;
    --font-36: 34px;
    --font-32: 30px;
    --font-30: 28px;
    --font-28: 26px;
    --font-26: 24px;
    --font-24: 22px;
    --font-22: 20px;
    --font-20: 16px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;

    --component-gap: 100px;
    --gap-175: 150px;
    --gap-100: 90px;
    --gap-90: 80px;
    --gap-80: 70px;
    --gap-72: 65px;
    --gap-70: 60px;
    --gap-60: 50px;
    --gap-50: 44px;
    --gap-40: 34px;
    --gap-30: 28px;
    --gap-25: 24px;
    --gap-24: 24px;
    --gap-20: 20px;
    --gap-10: 10px;
    --gap-14: 12px;
    --gap-12: 10px;

    --page-padding: max(15px, calc((100vw - 1200px) / 2));
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (max-width: 1280px) {

  .primaryBtn,
  .whiteBtn {
    padding: 16px 24px;
  }

  :root {
    --font-270: 170px;
    --font-100: 80px;
    --font-80: 70px;
    --font-76: 64px;
    --font-70: 60px;
    --font-64: 56px;
    --font-60: 52px;
    --font-56: 48px;
    --font-50: 44px;
    --font-48: 40px;
    --font-46: 40px;
    --font-40: 36px;
    --font-38: 34px;
    --font-36: 26px;
    --font-32: 26px;
    --font-30: 26px;
    --font-28: 24px;
    --font-26: 22px;
    --font-24: 22px;
    --font-22: 20px;
    --font-20: 14px;
    --font-18: 18px;
    --font-16: 15px;
    --font-14: 14px;

    --component-gap: 90px;
    --gap-175: 120px;
    --gap-100: 80px;
    --gap-90: 75px;
    --gap-80: 65px;
    --gap-72: 55px;
    --gap-70: 50px;
    --gap-60: 45px;
    --gap-50: 40px;
    --gap-40: 30px;
    --gap-30: 25px;
    --gap-25: 24px;
    --gap-24: 24px;
    --gap-14: 10px;
    --gap-12: 8px;

    --page-padding: max(15px, calc((100vw - 1100px) / 2));
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 42px !important;
    height: 42px !important;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 18px !important;
  }

}

@media (max-width: 1200px) {
  :root {
    --font-270: 148px;
    --page-padding: max(15px, calc((100vw - 930px) / 2));
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 16px !important;
  }
  .yingfang-button-prev,
  .yingfang-button-next{
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 992px) {

  .primaryBtn,
  .whiteBtn {
    padding: 14px 30px;
  }

  :root {
    --font-270: 110px;
    --font-100: 60px;
    --font-80: 60px;
    --font-76: 52px;
    --font-70: 50px;
    --font-64: 48px;
    --font-60: 44px;
    --font-56: 40px;
    --font-50: 36px;
    --font-48: 34px;
    --font-46: 34px;
    --font-40: 32px;
    --font-38: 30px;
    --font-36: 18px;
    --font-32: 24px;
    --font-30: 24px;
    --font-28: 22px;
    --font-26: 20px;
    --font-24: 20px;
    --font-22: 18px;
    --font-20: 14px;
    --font-18: 16px;
    --font-16: 14px;
    --font-14: 13px;

    --component-gap: 70px;
    --gap-175: 100px;
    --gap-100: 70px;
    --gap-90: 60px;
    --gap-80: 50px;
    --gap-72: 55px;
    --gap-70: 40px;
    --gap-60: 35px;
    --gap-50: 30px;
    --gap-40: 20px;
    --gap-30: 20px;
    --gap-25: 20px;
    --gap-24: 20px;
    --gap-20: 15px;
    --gap-10: 8px;
    --gap-14: 8px;
    --gap-12: 6px;
    --page-padding: max(15px, calc((100vw - 720px) / 2) + 15px);
  }

}

@media (max-width: 768px) {

  .primaryBtn,
  .whiteBtn {
    padding: 12px 24px;
  }

  :root {
    --font-270: 82px;
    --font-100: 46px;
    --font-80: 50px;
    --font-76: 48px;
    --font-70: 42px;
    --font-64: 40px;
    --font-60: 36px;
    --font-56: 32px;
    --font-50: 28px;
    --font-48: 26px;
    --font-46: 24px;
    --font-40: 22px;
    --font-38: 24px;
    --font-36: 20px;
    --font-32: 20px;
    --font-30: 19px;
    --font-28: 18px;
    --font-26: 18px;
    --font-24: 18px;
    --font-22: 16px;
    --font-20: 14px;
    --font-18: 14px;
    --font-16: 13px;
    --font-14: 12px;

    --component-gap: 45px;
    --gap-175: 70px;
    --gap-100: 60px;
    --gap-90: 35px;
    --gap-80: 30px;
    --gap-70: 30px;
    --gap-72: 35px;
    --gap-60: 25px;
    --gap-50: 20px;
    --gap-40: 18px;
    --gap-30: 15px;
    --gap-25: 18px;
    --gap-24: 18px;
    --gap-20: 12px;
    --gap-14: 6px;
    --gap-12: 4px;

    --page-padding: max(15px, calc((100vw - 540px) / 2) + 15px);
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 32px !important;
    height: 32px !important;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 14px !important;
  }
}

@media (max-width: 576px) {
  :root {
    --font-270: 54px;
    --font-100: 32px;
    --font-80: 40px;
    --font-76: 36px;
    --font-70: 34px;
    --font-64: 32px;
    --font-60: 28px;
    --font-56: 26px;
    --font-50: 24px;
    --font-48: 22px;
    --font-46: 22px;
    --font-40: 20px;
    --font-36: 18px;
    --font-30: 17px;
    --font-28: 16px;
    --font-26: 16px;
    --font-24: 16px;
    --font-22: 14px;
    --font-20: 12px;
    --font-18: 13px;
    --font-16: 12px;
    --font-14: 12px;

    --component-gap: 25px;
    --gap-175: 60px;
    --gap-100: 40px;
    --gap-90: 20px;
    --gap-80: 18px;
    --gap-72: 25px;
    --gap-70: 14px;
    --gap-60: 16px;
    --gap-50: 15px;
    --gap-40: 12px;
    --gap-30: 10px;
    --gap-25: 12px;
    --gap-24: 12px;
    --gap-20: 8px;
    --gap-10: 6px;
    --gap-14: 4px;
    --gap-12: 3px;

    --page-padding: max(15px, calc((100vw - 450px) / 2));
  }

  .primaryBtn,
  .whiteBtn {
    padding: 8px 16px;
  }

  .primaryBtn:hover svg,
  .whiteBtn:hover svg {
    width: 13px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 28px !important;
    height: 28px !important;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 11px !important;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --page-padding: calc((100vw - 360px) / 2 + 15px);
  }

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