@font-face {
    font-family: 'inter_blod';
    src: url('./fonts/Inter-Bold-4.otf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'inter_medium';
    src: url('./fonts/Inter-Medium-8.otf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'inter_regular';
    src: url('./fonts/Inter-Regular-9.otf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'inter_semiBold';
    src: url('./fonts/Inter-SemiBold-10.otf') format('truetype');
    font-style: normal;
}


:root {
    --font-78: 78px;
    --font-70: 70px;
    --font-64: 64px;
    --font-60: 60px;
    --font-56: 56px;
    --font-50: 50px;
    --font-46: 46px;
    --font-40: 40px;
    --font-36: 36px;
    --font-30: 30px;
    --font-28: 28px;
    --font-24: 24px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;

    --container-gap: 140px;
    --component-gap: 120px;
    --gap-90: 90px;
    --gap-80: 80px;
    --gap-60: 60px;
    --gap-50: 50px;
    --gap-40: 40px;
    --gap-30: 30px;
    --gap-20: 20px;
    --gap-10: 10px;

    --primary-color: #C52316;
    --second-color: #003365;

    --font-text-family: 'inter_regular', sans-serif;
    --font-blod-family: 'inter_blod', sans-serif;
    --font-medium-family: 'inter_medium', sans-serif;
    --font-semiBold-family: 'inter_semiBold', sans-serif;

}


.haiwode-title-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.haiwode-title-box .haiwode-title-line{
    width: 60px;
    height: 5px;
    background: var(--primary-color);
}
.haiwode-large-title{
    color: var(--second-color);
    text-align: center;
    font-family: var(--font-blod-family);
    font-size: var(--font-50);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}
.haiwode-small-title{
    color: #333;
    text-align: center;
    font-family: var(--font-text-family);
    font-size: var(--font-20);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.haiwode-primary-text{
    color: #000;
    font-family: var(--font-text-family);
    font-size: var(--font-16);
    font-style: normal;
    font-weight: 400;
    line-height: 162.5%;
}

/* button */
.haiwode-red-button,
.haiwode-white-button{
    height: 70px;
    display: inline-flex;
    padding: 10px 25px;
    justify-content: center;
    align-items: center;
    gap: 0;
    text-align: center;
    font-family: var(--font-medium-family);
    font-size: var(--font-20);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    transition: all 0.5s;
    border-radius: 10px;
}
.haiwode-red-button{
    color: #FFF;
    background: linear-gradient(90deg, #FC3D2D 0%, #C52316 100%);
}
.haiwode-red-button:hover{
    color: #fff;
    background: linear-gradient(90deg, #FF6255 0%, #FC3D2D 100%);
}
.haiwode-white-button{
    color: #333;
    background: #fff;
}
.haiwode-white-button:hover{
    color: #fff;
    background: linear-gradient(90deg, #FC3D2D 0%, #C52316 100%);
}
.haiwode-red-button:disabled,
.haiwode-white-button:disabled{
    color: #fff;
    background: #ccc;
}
.haiwode-line-button{
    display: inline-flex;
    padding: 12px 44px;
    justify-content: center;
    align-items: center;
    gap: 0;
    color: var(--primary-color);
    font-family: var(--font-medium-family);
    font-size: var(--font-24);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    transition: all 0.5s;
}
.haiwode-line-button:hover{
    color: #fff;
    background: linear-gradient(90deg, #FC3D2D 0%, #C52316 100%);
}

/* 轮播图按钮样式 */
.swiper-button-prev,
.swiper-button-next {
    width: 46px !important;
    height: 46px !important;
    background: transparent !important;
    border-radius: 50% !important;
    border: 1px solid var(--color-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--title-text-color) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev.active,
.swiper-button-next.active {
    background: var(--color-primary) !important;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after,
.swiper-button-prev.active:after,
.swiper-button-next.active:after {
    color: var(--color-second) !important;
}




@media screen and (max-width: 1500px) {
    :root{
        --font-78: 60px;
    }
}
@media (max-width: 1280px) {
  :root {
    --font-78: 50px;
    --font-70: 60px;
    --font-64: 56px;
    --font-60: 52px;
    --font-56: 48px;
    --font-50: 44px;
    --font-46: 40px;
    --font-40: 36px;
    --font-36: 32px;
    --font-30: 26px;
    --font-28: 24px;
    --font-24: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 15px;
    --font-14: 14px;

    --container-gap: 100px;
    --component-gap: 90px;
    --gap-90: 75px;
    --gap-80: 65px;
    --gap-60: 45px;
    --gap-50: 40px;
    --gap-40: 30px;
    --gap-30: 25px;
  }
}
@media (max-width: 992px) {
  :root {
    --font-78: 40px;
    --font-70: 50px;
    --font-64: 48px;
    --font-60: 44px;
    --font-56: 40px;
    --font-50: 36px;
    --font-46: 34px;
    --font-40: 32px;
    --font-36: 28px;
    --font-30: 24px;
    --font-28: 22px;
    --font-24: 20px;
    --font-20: 18px;
    --font-18: 16px;
    --font-16: 14px;
    --font-14: 13px;

    --container-gap: 80px;
    --component-gap: 70px;
    --gap-90: 60px;
    --gap-80: 50px;
    --gap-60: 35px;
    --gap-50: 30px;
    --gap-40: 20px;
    --gap-30: 20px;
    --gap-20: 15px;
    --gap-10: 8px;
  }
  .haiwode-title-box{
    gap: 10px;
  }
}
@media (max-width: 768px) {
  :root {
    --font-78: 30px;
    --font-70: 42px;
    --font-64: 40px;
    --font-60: 36px;
    --font-56: 32px;
    --font-50: 28px;
    --font-46: 24px;
    --font-40: 22px;
    --font-36: 20px;
    --font-30: 19px;
    --font-28: 18px;
    --font-24: 18px;
    --font-20: 16px;
    --font-18: 14px;
    --font-16: 13px;
    --font-14: 12px;

    --container-gap: 50px;
    --component-gap: 45px;
    --gap-90: 35px;
    --gap-80: 30px;
    --gap-60: 25px;
    --gap-50: 20px;
    --gap-40: 18px;
    --gap-30: 15px;
    --gap-20: 12px;
  }
  .haiwode-title-box{
    gap: 5px;
  }
}
@media (max-width: 576px) {
  :root {
    --font-78: 20px;
    --font-70: 34px;
    --font-64: 32px;
    --font-60: 28px;
    --font-56: 26px;
    --font-50: 24px;
    --font-46: 22px;
    --font-40: 20px;
    --font-36: 18px;
    --font-30: 17px;
    --font-28: 16px;
    --font-24: 16px;
    --font-20: 14px;
    --font-18: 13px;
    --font-16: 12px;
    --font-14: 12px;

    --container-gap: 30px;
    --component-gap: 25px;
    --gap-90: 20px;
    --gap-80: 18px;
    --gap-60: 16px;
    --gap-50: 15px;
    --gap-40: 12px;
    --gap-30: 10px;
    --gap-20: 8px;
    --gap-10: 6px;
  }
}


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