@charset "utf-8";

/* mVisual */
#mVisual{width: 100%; margin-bottom: 60px;}
#mVisual .visual{width: 100%; height: 750px; overflow: hidden; border-radius: 10px;}
#mVisual .visual .mv{width: 100%; height: 100%; overflow: hidden;}
#mVisual .visual .mv .img{width: 100%; height: 100%; overflow: hidden;}
#mVisual .visual .mv .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 6000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mVisual.visual-init .visual .mv.slick-active .img img{
    transform: scale(1.08);
}
#mVisual .visual .mv .flex{width: 100%; height: 750px;padding: 80px; display: flex; justify-content: space-between; align-items: flex-end; position: absolute; top: 0; width: 100%; z-index: 2;}
#mVisual .visual .mv .flex .txt{color:#fff; letter-spacing: -0.05em;}
#mVisual .visual .mv .flex .txt h4{
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 200ms;
}
#mVisual .visual .mv .flex .txt h3{
    font-size: 52px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 400ms;
    word-break: keep-all;
}
#mVisual .visual .mv .flex .btn_box{
    display: flex;
    gap:10px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 600ms;
}
#mVisual.visual-init .visual .mv.slick-active .flex .txt h4,
#mVisual.visual-init .visual .mv.slick-active .flex .txt h3,
#mVisual.visual-init .visual .mv.slick-active .flex .btn_box{
    opacity: 1;
    transform: translateY(0);
}
#mVisual .visual .mv .flex .btn_box a.btn{display: block; padding: 18px 40px; border-radius: 60px; font-size: 18px; font-weight: 600;}
#mVisual .visual .mv .flex .btn_box a.btn.btn1{color:#fff; background-color: #000;}
#mVisual .visual .mv .flex .btn_box a.btn.btn2{color:#000; background-color: #fff;}
#mVisual .progress{display: flex; justify-content: center; align-items: center; margin-top: 40px; gap:15px;}
#mVisual .progress .arrow{font-size: 18px; font-weight: 500; color:#000; font-family: 'SUIT', sans-serif; cursor: pointer; user-select: none;}
#mVisual .progress .arrow.prev{margin-right: 15px;}
#mVisual .progress .arrow.next{margin-left: 15px;}
#mVisual .progress .gague{width: 200px; background-color: rgba(0,0,0,0.2); position: relative; height: 2px;}
#mVisual .progress .gague .bar{position: absolute; left: 0; height: 2px; width: 0; background: #000;}
#mVisual .progress .num{font-size: 18px; font-weight: 700; color:#000;}
#mVisual .progress .num.now{}
#mVisual .progress .num.all{opacity: 0.2;}

@media all and (max-width:1280px){
    #mVisual{margin-bottom: 120px;}
    #mVisual .visual{height: 600px;}
    #mVisual .visual .mv .img{height: 600px;}
    #mVisual .visual .mv .flex{height: 600px; padding: 60px 45px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap:40px; padding: 50px;}
    #mVisual .visual .mv .flex .txt h4{font-size: 40px;}
    #mVisual .visual .mv .flex .txt h3{font-size: 46px;}
    #mVisual .visual .mv .flex .btn_box a.btn{ padding: 16px 36px; border-radius: 56px; font-size: 17px;}
    #mVisual .progress{margin-top: 30px;}
    #mVisual .progress .gague{width: 180px;}
    #mVisual .progress .num{font-size: 16px;}
}
@media all and (max-width:1024px){
    #mVisual .visual .mv .flex{padding: 45px 35px;}
    #mVisual .visual .mv .flex .txt h4{font-size: 34px;}
    #mVisual .visual .mv .flex .txt h3{font-size: 40px;}
}
@media all and (max-width:768px){
    #mVisual .visual .mv .flex{gap:30px; padding: 40px 30px;}
    #mVisual .visual .mv .flex .txt h4{font-size: 30px;}
    #mVisual .visual .mv .flex .txt h3{font-size: 36px;}
    #mVisual .visual .mv .flex .btn_box{gap:7px;}
    #mVisual .visual .mv .flex .btn_box a.btn{ padding: 14px 32px; border-radius: 52px; font-size: 16px;}
    #mVisual .progress .arrow{font-size: 17px;}
    #mVisual .progress .arrow.prev{margin-right: 10px;}
    #mVisual .progress .arrow.next{margin-left: 10px;}
}
@media all and (max-width:500px){
    #mVisual .visual{height: 460px;}
    #mVisual .visual .mv .img{height: 460px;}
    #mVisual .visual .mv .flex{height: 460px; padding: 35px 20px; gap:20px;}
    #mVisual .visual .mv .flex .txt h4{font-size: 26px;}
    #mVisual .visual .mv .flex .txt h3{font-size: 32px;}
    #mVisual .visual .mv .flex .btn_box a.btn{ padding: 12px 28px; border-radius: 48px; font-size: 15px;}
    #mVisual .progress{margin-top: 20px;}
    #mVisual .progress .gague{width: 140px;}
    #mVisual .progress .num{font-size: 14px;}
}
@media all and (max-width:400px) {
    #mVisual .visual .mv .flex .txt h4{font-size: 22px;}
    #mVisual .visual .mv .flex .txt h3{font-size: 28px;}
}