/* ===== key-banner.css: Banner, Carousel (Homepage Only) ===== */

.carousel-container {
            margin:auto;
            overflow: hidden;
            position: relative;

        }

.carousel-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.carousel-item {
           flex: 0 0 auto;
            box-sizing: border-box;
             overflow-wrap: break-word !important; word-wrap: break-word !important;
            
        }

.carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--main-bgblue-color);
            color: #fff;
            width:40px;
            height:40px;
            cursor: pointer;
            font-size:20px;
            border-radius: 40px;
            text-align: center;
            line-height:40px;
            z-index: 1;
            user-select: none;
        }

.carousel-arrow:hover{background-color:var(--main-yellow-color)}

.carousel-arrow.left {
            left: 10px;
        }

.carousel-arrow.right {
            right: 10px;
        }

.carousel-nav {
            position: absolute;
            bottom: 200px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

.carousel-dot {
            width: 10px;
            height: 10px;
            background-color: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.carousel-dot.active {
            background-color: var(--main-yellow-color);
        }

.banner{width:100%;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center center;justify-content:center}

@media (min-width:993px){.banner{display:block;}
}

@media (max-width:992px){.banner{display:none}
}

.banner .baner-line{width:100%;margin:auto;position:absolute;bottom:0;z-index:100;background-image:url("../images/banner-line.png");background:-webkit-image-set(url(../images/banner-line.webp) 1x,url(../images/banner-line.webp) 2x);background:image-set(url(../images/banner-line.webp) 1x,url(../images/banner-line.webp) 2x);height:200px;background-position:center bottom;background-repeat:no-repeat;background-size:cover;left:0px}

.banner .banner-1,.banner .banner-2,.banner .banner-3{min-height:750px;height:80vh;width:100%;color:#fff; display: flex;align-items: center;position: relative; background-repeat: no-repeat;}

.banner div[class*="banner-"] .bannerfont{padding:20px;color:var(--main-white-color)}

.banner div[class*="banner-"] .bannerfont-tit{font-weight:lighter;margin-bottom:20px;color:var(--main-white-color)}

.banner div[class*="banner-"] p{font-size:20px;line-height:30px;margin-bottom:25px}

.banner div[class*="banner-"] .btn{font-size:18px}

.banner div[class*="banner-"] .btn:hover{background-color:var(--main-white-color);color:var(--main-black-color) !important}

@media screen and (min-width:993px){
    .banner div[class*="banner-"] .bannerfont{width:40%;left:45%;top:15%;position:absolute; display:inline-block;}
.banner div[class*="banner-"] .bannerfont .bannerfont-tit{font-size:50px}
.banner div[class*="banner-"]  .baner-line,.secondbanner{display:block}
}

@media screen and (max-width:992px){.banner .bannerfont{width:90%;left:5%;top:10%;position:absolute}
.banner div[class*="banner-"] .bannerfont .bannerfont-tit{font-size:40px}
.banner div[class*="banner-"] .baner-line,.secondbanner{display:none}
}

@media screen and (min-width:993px){.banner-1{background-image:url(../images/banner-1.png);background:-webkit-image-set(url(../images/banner-1.webp) 1x,url(../images/banner-1.webp) 2x);background:image-set(url(../images/banner-1.webp) 1x,url(../images/banner-1.webp) 2x);background-color:#004a99;background-size: contain;}
.banner-2{background-image:url(../images/banner-2.png);background:-webkit-image-set(url(../images/banner-2.webp) 1x,url(../images/banner-2.webp) 2x);background:image-set(url(../images/banner-2.webp) 1x,url(../images/banner-2.webp) 2x);background-color:#004a99; background-size: contain;}
.banner-3{background-image:url(../images/banner-3.png);background:-webkit-image-set(url(../images/banner-3.webp) 1x,url(../images/banner-3.webp) 2x);background:image-set(url(../images/banner-3.webp) 1x,url(../images/banner-3.webp) 2x);background-color:#004a99;background-size: contain;}
}

@media screen and (max-width:992px){.banner-1{background-image:url(../images/banner-min-1.png);background:-webkit-image-set(url(../images/banner-min-1.webp) 3x);background:image-set(url(../images/banner-1.webp) 3x);background-color:#004a99}
.banner-2{background-image:url(../images/banner-min-2.png);background:-webkit-image-set(url(../images/banner-min-2.webp) 3x);background:image-set(url(../images/banner-min-2.webp) 3x);background-color:#004a99}
.banner-3{background-image:url(../images/banner-min-3.png);background:-webkit-image-set(../url(../images/banner-min-3.webp) 1x);background:image-set(url(../images/banner-min-3.webp) 1x);background-color:#004a99}
}

.secondbanner{background-image:url(../images/sec-banner.png);background:-webkit-image-set(url(../images/sec-banner.webp) 1x,url(../images/sec-banner.webp) 2x);background:image-set(url(../images/sec-banner.webp) 1x,url(../images/sec-banner.webp) 2x);background-color:var(--main-blue-color);height:450px;background-position:center center;background-repeat:no-repeat;background-size:cover}