@charset "UTF-8";

.swiper {
    position: relative;
}
.swiper > .swiper-container {
    position: static;
}


.swiper-container-rtl .swiper-button-next::after,
.swiper-container-rtl .swiper-button-prev::after {
    content: "";
}
.swiper-container-rtl .swiper-button-next::before {
    content: "";
}
.swiper-container-rtl .swiper-button-prev::before {
    content: "";
}

.swiper-button-next,
.swiper-button-prev {
    padding: 0;
    z-index: 99;
    border: none;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "";
}
.swiper-button-next::before,
.swiper-button-prev::before {
    font-family: "Wolmart";
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    cursor: default;
    color: #ccc;
}

.swiper-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
    width: auto;
}
.swiper-container:not(.swiper-container-initialized) .swiper-slide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.row {
    width: calc(100% + 2rem);
}
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.gutter-no {
    width: 100%;
}
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.gutter-xs {
    width: calc(100% + 2*false);
}
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.gutter-sm {
    width: calc(100% + 2*false);
}
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.gutter-md {
    width: calc(100% + 2*false);
}
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper.gutter-lg {
    width: calc(100% + 2*false);
}

.swiper-theme .swiper-button-prev,
.swiper-theme .swiper-button-next {
    margin: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 400;
    color: #336699;
}
.swiper-theme .swiper-button-prev:not(.swiper-button-disabled):hover, .swiper-theme .swiper-button-prev:not(.swiper-button-disabled):active, .swiper-theme .swiper-button-prev:not(.swiper-button-disabled):focus,
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):active,
.swiper-theme .swiper-button-next:not(.swiper-button-disabled):focus {
    color: #fff;
    background-color: #336699;
    border-color: #336699;
}
.swiper-theme .swiper-button-prev.swiper-button-disabled,
.swiper-theme .swiper-button-next.swiper-button-disabled {
    color: #4242426b;
    opacity: 0.6;
}
.swiper-theme .swiper-button-prev {
    left: -40px;
}
.swiper-theme .swiper-button-next {
    right: -40px;
}
@media (max-width: 1300px) {
    .swiper-theme .swiper-button-prev {
        left: 20px;
    }
    .swiper-theme .swiper-button-next {
        right: 20px;
    }
}
.nav-inner > .swiper-button-prev,
.nav-inner > .swiper-button-next {
    opacity: 0;
    visibility: hidden;
}
.nav-inner > .swiper-button-prev {
    left: 0;
}
.nav-inner > .swiper-button-next {
    right: 0;
}
.nav-inner:hover > .swiper-button-prev,
.nav-inner:hover > .swiper-button-next {
    opacity: 1;
    visibility: visible;
}
.nav-inner:hover > .swiper-button-prev {
    left: 2rem;
}
.nav-inner:hover > .swiper-button-next {
    right: 2rem;
}

.nav-top > .swiper-button-next,
.nav-top > .swiper-button-prev {
    position: absolute;
    width: 15px;
    top: -5.3rem;
    left: auto;
    color: #777;
    font-size: 1.4rem;
    font-weight: 400;
}
.nav-top > .swiper-button-next:not(.swiper-button-disabled):hover, .nav-top > .swiper-button-next:not(.swiper-button-disabled):active, .nav-top > .swiper-button-next:not(.swiper-button-disabled):focus,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):hover,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):active,
.nav-top > .swiper-button-prev:not(.swiper-button-disabled):focus {
    background-color: transparent;
    border-color: transparent;
    color: #336699;
}
.nav-top > .swiper-button-next.swiper-button-disabled,
.nav-top > .swiper-button-prev.swiper-button-disabled {
    color: #666;
}
.nav-top > .swiper-button-next {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    right: 3.7rem;
}
.nav-top > .swiper-button-prev {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    right: 3.5rem;
}

.nav-right .swiper-button-prev,
.nav-right .swiper-button-next {
    position: absolute;
    right: 3rem;
    top: auto;
    bottom: 2.8rem;
    left: auto;
}
.nav-right .swiper-button-prev {
    right: 5.5rem;
}

.swiper-img-dots {
    z-index: 1000;
}
.swiper-img-dots a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    margin: 0 1.5rem 1rem;
    border-radius: 50%;
    border: 3px solid transparent;
    -webkit-box-shadow: 0 0 0 2px #ccc;
    box-shadow: 0 0 0 2px #ccc;
    overflow: hidden;
    -webkit-transition: padding 0.4s, -webkit-box-shadow 0.4s;
    transition: padding 0.4s, -webkit-box-shadow 0.4s;
    transition: padding 0.4s, box-shadow 0.4s;
    transition: padding 0.4s, box-shadow 0.4s, -webkit-box-shadow 0.4s;
}
.swiper-img-dots a.active, .swiper-img-dots a:hover {
    -webkit-box-shadow: 0 0 0 2px #336699;
    box-shadow: 0 0 0 2px #336699;
}
.swiper-img-dots a img {
    border-radius: 50%;
}

.brands-swiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.swiper-container .slide-animate {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    will-change: filter, transform, opacity;
    opacity: 0;
}
.swiper-container .slide-animate.show-content {
    opacity: 1;
}

.shadow-swiper {
    margin: -20px;
    padding: 20px;
}

@media (max-width: 575px) {
    .shadow-swiper {
        margin: -15px;
        padding: 15px;
    }
}
.swiper-nav-lg > .swiper-button-next,
.swiper-nav-lg > .swiper-button-prev,
.swiper-nav-md > .swiper-button-next,
.swiper-nav-md > .swiper-button-prev {
    background-color: transparent;
    border: none;
}
.swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):hover, .swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):focus, .swiper-nav-lg > .swiper-button-next:not(.swiper-button-disabled):active,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):hover,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):focus,
.swiper-nav-lg > .swiper-button-prev:not(.swiper-button-disabled):active,
.swiper-nav-md > .swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-nav-md > .swiper-button-next:not(.swiper-button-disabled):focus,
.swiper-nav-md > .swiper-button-next:not(.swiper-button-disabled):active,
.swiper-nav-md > .swiper-button-prev:not(.swiper-button-disabled):hover,
.swiper-nav-md > .swiper-button-prev:not(.swiper-button-disabled):focus,
.swiper-nav-md > .swiper-button-prev:not(.swiper-button-disabled):active {
    background-color: transparent;
    border: none;
}

.swiper-nav-lg > .swiper-button-next,
.swiper-nav-lg > .swiper-button-prev {
    font-size: 4.8rem;
}

.swiper-nav-md > .swiper-button-next,
.swiper-nav-md > .swiper-button-prev {
    font-size: 3.3rem;
}

@media (max-width: 575px) {
    .swiper-img-dots a {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}


@media (min-width: 1200px) {
    .pg-xl-hide > .swiper-pagination {
        display: none;
    }
}
@media (min-width: 1600px) {
    .pg-xxl-hide > .swiper-pagination {
        display: none;
    }
}
.nav-hide > .swiper-button-prev,
.nav-hide > .swiper-button-next {
    display: none;
}

@media (min-width: 1200px) {
    .nav-xl-show > .swiper-button-prev,
    .nav-xl-show > .swiper-button-next {
        display: block;
    }
}
@media (min-width: 1600px) {
    .nav-xxl-show > .swiper-button-prev,
    .nav-xxl-show > .swiper-button-next {
        display: block;
    }
}
/* 5. base */
/*----------------------------------------
    Base
-----------------------------------------*/
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}


/* Intro-section */
.intro-section .swiper-button-prev, .intro-section .swiper-button-next {
    margin-top: -0.2rem;
    font-size: 3.3rem;
    color: #666666c7;
    background-color: transparent;
    opacity: 0;
    -webkit-transition: color 0.3s, opacity 0.3, -webkit-transform 0.3s;
    transition: color 0.3s, opacity 0.3, -webkit-transform 0.3s;
    transition: color 0.3s, transform 0.3s, opacity 0.3;
    transition: color 0.3s, transform 0.3s, opacity 0.3, -webkit-transform 0.3s;
}
.intro-section .swiper-button-next {
    right: 13.8%;
    -webkit-transform: translate(400%, -50%);
    transform: translate(400%, -50%);
}
.intro-section .swiper-button-prev {
    left: 13.8%;
    -webkit-transform: translate(-400%, -50%);
    transform: translate(-400%, -50%);
}
.intro-section .swiper-container:hover .swiper-button-prev {
    left: 13.8%;
}
.intro-section .swiper-container:hover .swiper-button-next {
    right: 13.8%;
}
.intro-section .swiper-container:hover .swiper-button-prev, .intro-section .swiper-container:hover .swiper-button-next {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity: 1;
}
.intro-section .swiper-container .swiper-button-prev:not(.swiper-button-disabled):hover,
.intro-section .swiper-container .swiper-button-next:not(.swiper-button-disabled):hover {
    color: #336699;
    background-color: transparent;
}

.intro-slide {
    min-height: 520px;
    height: 100%;
}
.intro-slide .banner-content {
    margin-top: -0.3rem;
}
.intro-slide .banner-subtitle {
    font-size: 4em;
}
.intro-slide .banner-title {
    margin-bottom: 0.1rem;
}
.intro-slide p {
    margin-bottom: 2.1rem;
    font-size: 2.4em;
}
.intro-slide .btn {
    padding: 1.23em 2.45em;
    font-size: 1.4em;
}
.intro-slide .slide-image {
    position: absolute;
    aspect-ratio: 16 / 9;
}
.slide-image img{
    object-fit: cover;
}
.intro-slide1 .banner-content {
    right: 3.9%;
}
.intro-slide1 .banner-subtitle span::after {
    position: absolute;
    bottom: 0;
    left: -0.4rem;
    content: "";
    width: 2.8em;
    height: 0.3rem;
    background-color: #f77c29;
}


.intro-slide2 .banner-content {
    left: 27.4%;
    margin-top: -0.5rem;
}
.intro-slide2 .banner-subtitle {
    margin-bottom: 0.3rem;
    font-size: 3.8em;
}
.intro-slide2 .banner-title {
    line-height: 1.08;
}
.intro-slide2 .slide-image {
    right: 1.3%;
    top: -5.8%;
}

.intro-slide3 .banner-content {
    right: 4.6%;
    margin-top: -0.7rem;
}
.intro-slide3 .banner-subtitle {
    margin-bottom: 0.3rem;
}
.intro-slide3 .banner-title {
    margin-bottom: 2.3rem;
}
.intro-slide3 .banner-title::before, .intro-slide3 .banner-title::after {
    position: absolute;
    content: "";
    background-color: #f77c29;
}
.intro-slide3 .banner-title::before {
    top: 50%;
    -webkit-transform: translateY(-50%) matrix(1, 0, -0.35, 1, 0, 0);
    transform: translateY(-50%) matrix(1, 0, -0.35, 1, 0, 0);
    right: 3.34em;
    width: 3.14em;
    height: 0.92em;
    border-radius: 0.3rem;
    z-index: -1;
}
.intro-slide3 .banner-title::after {
    right: 0;
    bottom: 0.15em;
    width: 3.62em;
    height: 0.3rem;
}
.intro-slide3 p {
    font-size: 2.2em;
    line-height: 1.6;
}
.intro-slide3 .slide-image {
    right: 44%;
    top: 10%;
    width: 31rem;
}

.swiper-pagination-bullets{
    left: 50% !important;
}
.swiper-pagination .swiper-pagination-bullet {
    background-color: transparent;
    border: 2px solid #857c7c !important
    opacity: 1;
}