* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

input, textarea, select {
    outline: none;
    border: none
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #a6a6a6;
    font-family: "Manrope-Regular"
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #a6a6a6
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #a6a6a6
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #a6a6a6
}

button {
    border: none
}

ol, ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none
}

a {
    text-decoration: none;
    color: #333
}

img {
    -webkit-user-drag: none
}

@font-face {
    font-family: "Manrope-SemiBold";
    src: url(../fonts/Manrope-SemiBold.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-Bold";
    src: url(../fonts/Manrope-Bold.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-ExtraBold";
    src: url(../fonts/Manrope-ExtraBold.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-Medium";
    src: url(../fonts/Manrope-Medium.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-Light";
    src: url(../fonts/Manrope-Light.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-ExtraLight";
    src: url(../fonts/Manrope-ExtraLight.ttf);
    font-display: swap
}

@font-face {
    font-family: "Manrope-Regular";
    src: url(../fonts/Manrope-Regular.ttf);
    font-display: swap
}

:root {
    --themeColor: #ff0030;
    --bgColor: #16141a
}

body {
    font-family: "Manrope-Regular", sans-serif;
    font-size: 14px;
    color: #333
}

.page_center {
    max-width: 1320px;
    margin: 0 auto
}

.font_extralight {
    font-family: "Manrope-ExtraLight";
    font-weight: normal
}

.font_extrabold {
    font-family: "Manrope-ExtraBold";
    font-weight: normal
}

.font_bold {
    font-family: "Manrope-Bold";
    font-weight: normal
}

.swiper-container .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    opacity: 1
}

.swiper-container .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin: 0 0 0 30px
}

.swiper-container .swiper-pagination-bullet-active {
    background: #ff0030;
    border-color: #ff0030;
    transform: scale(0.9)
}

.fade-box img, .fade-box iframe {
    opacity: 0;
    transition: opacity 400ms
}

.fade-box img.lazyloaded, .fade-box iframe.lazyloaded {
    opacity: 1
}

.show_mobile {
    display: none
}

@media screen and (max-width: 1320px) {
    .page_center {
        width: 100%;
        padding: 0 32px;
        max-width: none;
        margin: 0
    }
}

@media screen and (max-width: 992px) {
    .page_center {
        width: 100%;
        padding: 0 3.46vw;
        max-width: none;
        margin: 0
    }

    .show_pc {
        display: none !important;
    }

    .show_mobile {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    .section_banner .pagination_wapper {
        height: 12px
    }

    .swiper-container .swiper-pagination-bullet + .swiper-pagination-bullet {
        margin-left: 16px
    }

    .swiper-container .swiper-pagination-bullet {
        width: 12px;
        height: 12px
    }
}