@font-face {
    font-family: 'FreeSerif';
    src: url('./font/FreeSerif-4.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Floane-Bold';
    src: url('./font/Floane-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

p{
  text-align: justify;
}

:root {
    /* --font-family: 'FreeSerif', sans-serif;
    --title-font-family: 'Floane-Bold', sans-serif; */
    --title-size-h1: 50px;
    --title-size-h2: 46px;
    --title-size-h3: 40px;
    --title-size-h4: 30px;
    --title-size-h5: 26px;
    --title-size-h6: 24px;
    --text-size: 16px;
    --text-title-size: 18px;
    --text-flag-size: 20px;

    --content-gap: 160px;
    --content-gap-lg: 120px;
    --content-gap-md: 100px;
    --text-gap: 50px;
    --text-gap-md: 40px;
    --text-gap-lg: 30px;

    --page-padding: calc((100% - 1440px) / 2);
}

.container {
    max-width: 1470px;
}

.runfeng-btn {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #FFF;
    font-size: var(--title-size-h4);
    font-weight: 400;
    line-height: 1.53;
    text-transform: capitalize;
    position: relative;
}

.runfeng-btn2 {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--title-text-color);
    font-size: var(--text-flag-size);
    font-weight: 400;
    line-height: 1.5;
    text-transform: capitalize;
    position: relative;
}

.runfeng-btn::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 2px;
    background: #FFF;
    transition: all 0.5s ease-in-out;
}

.runfeng-btn2::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--title-text-color);
    transition: all 0.5s ease-in-out;
}

.runfeng-btn svg {
    width: 40px;
    aspect-ratio: 8/5;
    object-fit: cover;
}


.runfeng-btn:hover {
    color: #fff;
}

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

.runfeng-btn:hover::after {
    width: 100%;
}

.runfeng-btn2 svg {
    width: 24px;
    aspect-ratio: 8/5;
    object-fit: cover;
}

.runfeng-btn2:hover::after {
    width: 100%;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 140px;
    height: 3px;
    background: rgba(255, 255, 255, 0.20);
    margin: 0 5px;
    border-radius: 0;
    opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: #FFF;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: calc(var(--text-gap-lg) * 2) !important;
}
#pagesize ul{
    row-gap: 6px;
}
#pagesize ul li a {
    color: var(--title-text-color) !important;
    font-family: var(--title-font-family) !important;
    font-size: var(--text-title-size) !important;
    margin: 0 6px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    text-transform: capitalize !important;
    padding: 5px 15px !important;
}
#pagesize ul li:last-child a,
#pagesize ul li:first-child a{
    border: 1px solid #E1E1E1 !important;
    background: #FFF !important;
    padding: 5px 11px !important;
}
#pagesize ul li a.active{
    color: #FFF !important;
    background: var(--title-text-color) !important;
}

#pagesize ul li:hover a{
    background: var(--title-text-color) !important;
    color: #FFF !important;
}



@media screen and (max-width: 1500px) {
    :root {
        --content-gap: 120px;
        --content-gap-lg: 100px;
        --content-gap-md: 80px;
        --text-gap: 40px;
        --text-gap-md: 30px;

        --page-padding: calc((100% - 1170px) / 2);
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 120px;
    }

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

@media screen and (max-width: 1280px) {
    .swiper-pagination .swiper-pagination-bullet {
        width: 100px;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        --title-size-h1: 46px;
        --title-size-h2: 42px;
        --title-size-h3: 32px;
        --title-size-h4: 26px;
        --title-size-h5: 22px;
        --title-size-h6: 20px;
        --text-size: 14px;
        --text-title-size: 16px;
        --text-flag-size: 18px;

        --content-gap: 100px;
        --content-gap-lg: 80px;
        --content-gap-md: 60px;
        --text-gap: 30px;
        --text-gap-md: 20px;
        --text-gap-lg: 10px;

        --page-padding: calc((100% - 930px) / 2);
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 100px;
    }

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

@media screen and (max-width: 992px) {
    :root {
        --title-size-h1: 42px;
        --title-size-h2: 38px;
        --title-size-h3: 32px;
        --title-size-h4: 26px;
        --title-size-h5: 24px;
        --title-size-h6: 22px;
        --text-size: 12px;
        --text-title-size: 14px;
        --text-flag-size: 16px;

        --content-gap: 80px;
        --content-gap-lg: 60px;
        --content-gap-md: 40px;
        --text-gap: 20px;
        --page-padding: calc((100% - 690px) / 2);
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 80px;
    }

    .runfeng-btn svg {
        width: 30px;
    }

    .runfeng-btn2 svg {
        width: 18px;
    }

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

@media screen and (max-width: 768px) {
    :root {
        --title-size-h1: 38px;
        --title-size-h2: 34px;
        --title-size-h3: 28px;
        --title-size-h4: 22px;
        --title-size-h5: 20px;
        --title-size-h6: 18px;
        --text-size: 12px;
        --text-title-size: 14px;
        --text-flag-size: 16px;

        --content-gap: 60px;
        --content-gap-lg: 40px;
        --content-gap-md: 30px;
        --page-padding: calc((100% - 510px) / 2);
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 60px;
    }

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

@media screen and (max-width: 576px) {
    :root {
        --title-size-h1: 32px;
        --title-size-h2: 28px;
        --title-size-h3: 24px;
        --title-size-h4: 20px;
        --title-size-h5: 16px;
        --title-size-h6: 14px;
        --text-size: 10px;
        --text-title-size: 12px;
        --text-flag-size: 14px;
        --content-gap: 40px;
        --content-gap-lg: 30px;
        --content-gap-md: 20px;
        --text-gap: 10px;
        --text-gap-md: 10px;
        --text-gap-lg: 10px;
        --page-padding: calc((100% - 420px) / 2);
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 40px;
    }

    .runfeng-btn svg {
        width: 20px;
    }

    .runfeng-btn2 svg {
        width: 16px;
    }

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

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

    .container {
        max-width: 390px;
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 30px;
    }
}