/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:800px; max-height: 1080px; display: flex; align-items: center; justify-content: center;  padding:0 ;overflow: hidden;}

#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#main_vis_slider .main_slide {height:100vh; min-height:800px; max-height: 1080px; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; outline: none; }
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg?v=240705');}
#main_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg');}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg');}
#main_vis_slider .main_slide.img04 { background-image:url('../img/main4.jpg');}



/*main_typo*/
.main_typo {position: relative; z-index: 1; width: 100%; max-width:1600px; padding:0 50px; top: -8px}
.main_typo h2 {font-size:85px; font-weight:600; color:#fff; line-height:120px;}
.main_typo p {font-size:30px; font-weight:700; color:rgba(255,255,255,1); line-height: 38px;  margin-top: 22px; }
.main_typo.long_typo{top: -19px;}
.main_typo.long_typo p{margin-top: 12px;}

.animate .main_typo > *{opacity: 0;}
.slick-active .main_typo h2 {animation: fadeInUp 0.8s ease-out 0.2s forwards;}
.slick-active .main_typo p {animation: fadeInDown 0.8s ease-out 0.2s forwards;;}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*컨트롤러*/

#main_vis .flex_wrap{display: flex; align-items: center; position: absolute; bottom: 25%; left: 0; z-index: 2; width: 100%; max-width: 1600px; padding: 0 50px; left: 50%; transform: translateX(-50%);}
@media screen and (min-width:1921px) {
    #main_vis .flex_wrap{bottom: 265px;}
}
#main_vis .slick-arrow {cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:0; background: transparent; border: none; width: 32px; height: 32px; border-radius: 50%; border: solid 1px #fff;}
#main_vis .slick-arrow.prev { background:url('../img/prev.png') no-repeat center; }
#main_vis .slick-arrow.next { background:url('../img/next.png') no-repeat center;}

#main_vis .dots{margin: 0 17px;}
#main_vis .slick-dots{display: flex;}
#main_vis .slick-dots li{margin-right: 16px;}
#main_vis .slick-dots li:last-child{margin-right: 0;}
#main_vis .slick-dots button{font-size: 0; width: 7px; height: 7px; background-color: rgba(255,255,255,.4); border-radius: 50%;}
#main_vis .slick-dots li.slick-active button{background-color: rgba(255,255,255,1);}


/* paging number */
#main_vis .num_wr {display: flex; align-items:baseline; }
#main_vis .num_wr span {font-size: 20px; font-weight: 300; color:rgba(255, 255, 255, 0.4); font-family: 'Poppins', sans-serif; display: block; }
#main_vis .num_wr span.slash {margin:0 10px; }
#main_vis .num_wr span.pagingInfo {color:#fff; font-size: 80px; font-weight: 600; line-height: 1;}

/*progress*/
#play_btn { display: flex; align-items: center; justify-content: center; }
#play_btn a {cursor: pointer; position: relative; min-width: 12px; margin-right: 10px;}
#play_btn .play {display: none;}

@media screen and (max-width:1400px) {
    .main_typo {}
    .main_typo h2 {font-size:70px; line-height:1.2;}
    .main_typo p {font-size:25px; line-height: 1;  margin-top: 20px; }
    .main_typo.long_typo p{margin-top: 25px;}

}
@media screen and (max-width:1280px) {

}

@media screen and (max-width: 1024px) {
    .main_typo{text-align: center; padding: 0 30px;}

    .main_typo h2 {font-size:50px; letter-spacing: -.3px;}
    .main_typo p {font-size:21px; line-height: 1.7; margin-top: 15px;}
    .main_typo.long_typo p{margin-top: 15px;}

    #main_vis, #main_vis_slider .main_slide {max-height: initial; min-height: 0; height: 600px;}
    #main_vis .flex_wrap{bottom: 60px; justify-content: center;}



}
@media screen and (max-width: 640px) {
    .main_typo{padding: 0 20px;}
    .main_typo br{display: none;}
    .main_typo h2 {font-size:38px; letter-spacing: -.8px;}
    .main_typo p {font-size:18px;}

    #main_vis, #main_vis_slider .main_slide {height: 500px;}
    #main_vis .flex_wrap{bottom: 40px; }

}