@charset "utf-8";
#mainVisual{overflow:hidden;position:relative;padding-bottom: 50px;}
/* swiper */
#mainVisual .main_slide{padding-bottom: 33px;}
#mainVisual .main_slide .swiper-wrapper{}
#mainVisual .main_slide .swiper-slide{max-width:1300px;aspect-ratio:1300 / 454;border-radius:20px;overflow:hidden;background-size: cover;background-repeat: no-repeat;}
#mainVisual .main_slide .swiper-slide img{width: 100%;height: 100%;object-fit: cover;}
#mainVisual .swiper-controller{}
#mainVisual .inner{display: flex;align-items: center;justify-content: center;gap: 10px;max-width:var(--mainsize);width: 100%;margin: 0 auto;}
#mainVisual .swiper-controller button{all: unset;display: flex;align-items: center;justify-content: center;width: 20px;height: 20px;border: 1px solid #e1e1e1;border-radius: 5px;cursor: pointer;}
#mainVisual .swiper-controller .btn--player{display: grid;}
#mainVisual .swiper-controller .btn--player button{grid-area: 1/1;}
#mainVisual .swiper-controller .btn--player button svg{fill: #000;width: 12px;height: 12px;stroke-width: 0.5px;}
#mainVisual .swiper-controller .btn--player button.play{display: none;}
#mainVisual .swiper-controller .pager{width: auto;font-family: var(--mainfont);font-size: 13px;font-weight: 600;color: #aaa;}
#mainVisual .swiper-controller .pager .swiper-pagination-current{color:#111}
#mainVisual .swiper-controller .btn--navigation{display: flex;gap: 3px;}
#mainVisual .swiper-controller .btn--navigation button{}
#mainVisual .swiper-controller .btn--navigation button svg{width: 15px;height: 15px;stroke-width: 3px;}

#mainVisual .progress-bar{max-width:94px;width:100%;height:1px}
#mainVisual .progress-bar .progress-bar-default{overflow:hidden;position:relative;height:3px;background:#e1e1e1;width:100%}
#mainVisual .progress-bar .progress-bar-default::after{position:absolute;top:0;left:0;background:var(--primary);height:100%;width:0;content:""}
#mainVisual .progress-bar.active .progress-bar-default{opacity:1}
#mainVisual .progress-bar.animate .progress-bar-default::after{width:120%;transition:width 3.8s linear;transition-delay:unset}


/* #mainVisual .main_slide{height:100%}
#mainVisual .main_slide li{overflow:hidden;height:100%}
#mainVisual .main_slide .inner_img{width:100%;height:100%;background:url(./main_img01.jpg) center no-repeat;background-size:cover}
#mainVisual .main_slide .img02{background-image:url(./main_img02.jpg)}
#mainVisual .main_slide .img03{background-image:url(./main_img03.jpg)} */

/* 컨트롤 */
/* #mainVisual .pager{display:flex;align-items:center;position:absolute;left:50%;bottom:50px;z-index:101;transform:translateX(-50%)}
#mainVisual .pager span{display:flex;opacity:1;width:15px;height:15px;background:transparent}
#mainVisual .pager span:before{display:block;content:"";width:5px;height:5px;margin:auto;border-radius:50%;background:#000;transition:all .3s}
#mainVisual .pager span+span{margin-left:12px}
#mainVisual .pager span.on:before{width:15px;height:15px} */

/* 반응형 [s] */
@media (max-width:1600px){
    #mainVisual{padding-bottom: 30px;}
    #mainVisual .main_slide{padding-bottom: 23px;}
    #mainVisual .main_slide .swiper-slide{max-width:1200px}
}
@media (max-width:1400px){
    #mainVisual .main_slide .swiper-slide{max-width:1000px;border-radius:10px}
}
@media (max-width:1200px){
    #mainVisual{padding-bottom: 22px;}
    #mainVisual .main_slide{padding-bottom: 18px;}
    #mainVisual .main_slide .swiper-slide{max-width:900px}
}
@media(max-width:1024px){
/* #mainVisual{height:500px}     */
    #mainVisual .main_slide .swiper-slide{max-width:none;border-radius: 0;}
    #mainVisual .progress-bar{max-width:180px}

}
@media(max-width:768px){    
/* #mainVisual{height:450px}     */
#mainVisual{padding-bottom: 0;}
#mainVisual .main_slide{padding-bottom: 0;}
#mainVisual .pager{bottom:25px}
#mainVisual .main_slide{margin-bottom: 0;}
#mainVisual .swiper-controller{display: none;}
/* #mainVisual .progress-bar{max-width:120px} */
/* #mainVisual .swiper-controller .pager{font-size: 12px;} */

}
@media(max-width:480px){    
/* #mainVisual{height:400px}     */
/* #mainVisual .progress-bar{max-width:94px} */
}