@charset "utf-8";

#mainVisual{background-color:#e4e8e2;box-sizing:border-box}
#mainVisual .inner{width:1740px;margin:0 auto}
#mainVisual .main_slider{overflow:hidden;position:relative;width:100%;height:clamp(180px, 50vw, 390px);max-height:390px;aspect-ratio:16 / 9}
#mainVisual .list{overflow:hidden;position:relative;height:100%}
#mainVisual .list > img{width:100%;height:100%;object-fit:cover}
#mainVisual .slide1{display:flex;align-items:center;justify-content:center;padding:0 54px;background-color:#e4e8e2;box-sizing:border-box}
#mainVisual .img_wrap{display:flex;align-items:center;width:100%;height:100%;transition:all 1.8s ease-in-out}
#mainVisual .book_img{flex-shrink:0;margin-right:30px;width:clamp(90px, 12vw, 200px);transition:all 1.8s ease-in-out}
#mainVisual .book_img > img{width:100%}
#mainVisual .overview_img{overflow:hidden;position:absolute;width:0}
#mainVisual .overview_img > img{overflow:hidden;transform-origin:left;width:100%;z-index:1;transition:clip-path 1.8s cubic-bezier(0.4, 0, 0.2, 1);clip-path:inset(0 100% 0 0)}
#mainVisual .overview_img.active{position:relative;width:100%;opacity:1}
#mainVisual .overview_img.active img{clip-path:inset(0 0 0 0)}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .arrow_prev:hover{background-image:url("main_arrow_prev_on.png")}
#mainVisual .arrow_next:hover{background-image:url("main_arrow_next_on.png")}
}
@media (max-width:1800px){
#mainVisual .inner{width:95%}
}
@media (max-width:1600px){
#mainVisual .slide1{padding:0 30px}
#mainVisual .main_slider{width:100%}
#mainVisual .inner{width:100%}
}
@media (max-width:1300px){
#mainVisual{padding-top:79.59px}
#mainVisual .book_img.moveLeft{margin-right:20px}
}
@media (max-width:1024px){
#mainVisual{padding-top:69.59px}
#mainVisual .book_img{margin-right:15px}
#mainVisual .slide1{padding:0 20px}
}
@media (max-width:580px){
#mainVisual{padding-top:64.08px}
}
@media (max-width:480px){
#mainVisual{padding-top:58.58px}
#mainVisual .progress-bar{width:75px}
#mainVisual .slider_progress{gap:0 15px}
#mainVisual .arrow_next{margin-left:15px}
#mainVisual .arrow_prev{margin-right:15px}
#mainVisual .slide1{overflow:hidden;border:3px solid #9fa89b;box-sizing:border-box}
#mainVisual .overview_img > img{width:165%}
}
/* 반응형 [e] */