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

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

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

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

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('./fonts/Source_Han_Sans_SC_Light_Light.otf') format('otruetype');
    font-weight: 350;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('./fonts/Source_Han_Sans_SC_Regular.otf') format('otruetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('./fonts/Source_Han_Sans_SC_Medium_Medium.otf') format('otruetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('./fonts/Source_Han_Sans_SC_Bold.otf') format('otruetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('./fonts/Source_Han_Sans_SC_Heavy_Heavy.otf') format('otruetype');
    font-weight: 900;
    font-style: normal;
}

:root {
    /* --font-family: 'Source Han Sans CN', sans-serif; */
    /* --title-font-family: 'Oswald', sans-serif; */
    --source-font-family: 'Source Han Sans CN', sans-serif;
    --page-padding: calc((100vw - 1600px) / 2);
    --font-size-64: max(2rem, 32px);
    --font-size-56: max(1.75rem, 28px);
    --font-size-50: max(1.5625rem, 26px);
    --font-size-48: max(1.5rem, 24px);
    --font-size-46: max(1.4375rem, 22px);
    --font-size-44: max(1.375rem, 20px);
    --font-size-42: max(1.3125rem, 22px);
    --font-size-40: max(1.25rem, 20px);
    --font-size-36: max(1.125rem, 18px);
    --font-size-32: max(1rem, 18px);
    --font-size-30: max(0.9375rem, 16px);
    --font-size-28: max(0.875rem, 14px);
    --font-size-26: max(0.8125rem, 14px);
    --font-size-24: max(0.75rem, 14px);
    --font-size-22: max(0.6875rem, 14px);
    --font-size-20: max(0.625rem, 14px);
    --font-size-18: max(0.5625rem, 14px);
    --font-size-16: max(0.5rem, 12px);
}

.container {
    max-width: 1630px;
}

/* Button Styles */
.yuedong-btn {
    width: fit-content;
    color: #FFF;
    font-size: 0.5rem;
    font-weight: 400;
    line-height: normal;
    padding: 0.4063rem 1.3438rem;
    background-color: var(--color-primary);
    border-radius: var(--button-radius);
    text-transform: uppercase;
}

.yuedong-btn-svg {
    width: fit-content;
    color: #FFF;
    font-size: max(14px, 0.5rem);
    font-weight: 400;
    line-height: normal;
    padding: 0.625rem 1.5rem;
    background-color: var(--color-primary);
    border-radius: var(--button-radius);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 1.125rem;
}

.yuedong-btn-host {
    width: fit-content;
    color: #666;
    font-size: max(14px, 0.5rem);
    font-weight: 400;
    line-height: normal;
    padding: 0.5625rem 1.7188rem;
    background-color: transparent;
    border-radius: var(--button-radius);
    text-transform: uppercase;
    border: 1px solid #666;
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.yuedong-btn-host:hover {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.yuedong-btn-host:hover svg path {
    fill: #fff;
}

.yuedong-btn:hover,
.yuedong-btn-host:hover{
    color: #fff;
}


/* Swiper Button Styles */
.swiper-button-prev:after,
.swiper-button-next:after {
    display: none !important;
}

.swiper-button-prev {
    width: fit-content !important;
    height: fit-content !important;
    left: -0.8438rem !important;
    transform: translateX(-100%) !important;
}

.swiper-button-next {
    width: fit-content !important;
    height: fit-content !important;
    right: -0.8438rem !important;
    transform: translateX(100%) !important;
}

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

/* Swiper Pagination Styles */
.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #E4E4E4;
    margin: 0 9px;
    border-radius: 50%;
    opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet-active {
    position: relative;
    background: var(--color-primary);
    margin: 0 14px;
    opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border: 10px solid rgba(59, 198, 249, 0.31);
    border-radius: 50%;
}

.swiper-pagination2 .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 1px solid var(--color-primary);
    margin: 0 9px;
    border-radius: 50%;
    opacity: 1;
}

.swiper-pagination2 .swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
    transform: scale(1.2);
}
.swiper-pagination2.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: absolute;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
    text-align: center !important;
    bottom: 2.1875rem !important;
}




/* Pagination Styles */
#pagesize ul {
    display: flex;
    justify-content: center;
    gap: .6875rem;
}

#pagesize ul li a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ADADAD;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    color: #464646;
    font-size: max(12px, .4375rem);
    font-weight: 400;
    line-height: 1.5;

    transition: all 0.3s ease;
}

#pagesize ul li:has(span) {
    align-self: flex-end;
}

#pagesize ul li span {
    color: #464646;
    font-size: max(12px, .4375rem);
    font-weight: 400;
    line-height: 1.5;
}

#pagesize ul li a:has(svg) {
    color: black;
}

#pagesize ul li a svg {
    width: 7px;
    aspect-ratio: 7 / 13;
    transition: all 0.3s ease;
}

#pagesize ul li a:not(.disabled).active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

#pagesize ul li a:not(.disabled):hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}

#pagesize ul li a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* Form Input Styles */
.inqury-form .phone-wrap .bootstrap-select {
  display: none !important;
}
.inqury-form .phone-wrap .phone_number{
    border: 1px solid #D9D9D9 !important;
    border-radius: 5px !important;
}
.custom-pop-inquiry{
    z-index: 9999 !important;
}
.inqury-form .phone-wrap .bootstrap-select,
.click-popup.custom-pop-inquiry .inqury-form .phone-wrap .bootstrap-select,
.yuedong_home_inquiry .yuedong_home_inquiry_form .inqury-form .phone-wrap .bootstrap-select,
.yuedong_contact_inquiry .yuedong_contact_inquiry__right .inqury-form .phone-wrap .bootstrap-select{
    width: 4.6875rem !important;
}

.inqury-form .phone-wrap .crmForm-error{
    top: 102% !important;
}
.inqury-form .one-line-input,
.inqury-form .phone_number,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
    height: 1.6875rem !important;
}

.inqury-form .dropdown-toggle .filter-option-inner-inner,
.bootstrap-select .dropdown-menu li a span.text {
    font-size: var(--font-size-16);
}
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    line-height: 1.6875rem !important;
}

.inqury_submit {
    width: 100% !important;
    height: 1.875rem !important;
    padding: 0 !important;
    border-radius: 0.25rem !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    line-height: 1.27 !important;
    transition: all 0.3s ease !important;
}

.inqury_submit:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.inqury-form .textarea-input {
    height: 4.125rem !important;
}

.one-line-input:focus,
.one-line-input:hover,
.inqury-form .phone_number:focus,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.inqury-form .phone_number:hover,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    border-color: var(--color-primary) !important;
}

.one-line-input:focus::placeholder,
.one-line-input:hover::placeholder,
.inqury-form .phone_number:focus::placeholder,
.inqury-form .phone_number:hover::placeholder {
    color: var(--color-primary) !important;
}

.textarea-input:focus,
.textarea-input:hover {
    border-color: var(--color-primary) !important;
}

.textarea-input:focus::placeholder,
.textarea-input:hover::placeholder {
    color: var(--color-primary) !important;
}


/* Title Text Styles */
.color-primary {
    color: var(--color-primary);
}

.color-second {
    color: var(--color-second);
}

.color-white {
    color: #fff;
}

.color-title {
    color: var(--title-text-color);
}

.color-text {
    color: var(--text-color);
}


@media screen and (max-width:1630px) {
    :root {
        --page-padding: calc((100vw - 1400px) / 2);
    }

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

@media screen and (max-width:1500px) {
    :root {
        --page-padding: calc((100vw - 1200px) / 2);
    }

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

@media screen and (max-width:1280px) {
    :root {
        --page-padding: calc((100vw - 1200px) / 2);
    }

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

@media screen and (max-width:1200px) {
    :root {
        --page-padding: calc((100vw - 930px) / 2);
    }

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

@media screen and (max-width:991px) {
    :root {
        --page-padding: calc((100vw - 720px) / 2);
    }

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

@media screen and (max-width:768px) {
    :root {
        --page-padding: calc((100vw - 540px) / 2);
    }

    .container {
        max-width: 540px;
    }

    #pagesize ul li a {
        width: 30px;
        height: 30px;
    }

    #pagesize ul li a svg {
        width: 5px;
    }
}

@media screen and (max-width:576px) {
    :root {
        --page-padding: calc((100vw - 450px) / 2);
    }

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

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

    .container {
        max-width: 360px;
    }

    #pagesize ul li a {
        width: 24px;
        height: 24px;
    }

    #pagesize ul {
        gap: .5rem;
    }
}