/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:937px; display: flex; align-items: center; justify-content: center; max-height: 1080px;
padding-bottom: 50px;}
#main_vis_slider {width:100%; position: absolute; top: 0; right: 0;  }
#main_vis_slider .main_slide {height: 100%; height:100vh; min-height:937px; 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');}
#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_wrap {text-align: left; position: relative; z-index: 2; max-width:1400px; padding:0 50px; width: 100%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h2 {font-size:78px; font-weight:300; color:#fff; line-height: 1.27; letter-spacing: -3.93px; }
.main_typo h2 b {font-weight: 700; letter-spacing: -1.96px; }
.main_typo p {font-size:22px; font-weight:400; color:#fff; line-height: 1.64; margin: 40px 0 0; letter-spacing: -.55px; }

/*컨트롤러*/
#main_vis_slider .slick-arrow { cursor: pointer; transition: all 0.3s; position:absolute; z-index: 10; opacity: 1; left:70px; border:0; font-size: 0; text-transform: uppercase;}
#main_vis_slider .slick-arrow.slick-prev { background:url('../img/prev.png') no-repeat left center; top: calc(50% - 35px); padding-left: 20px;}
#main_vis_slider .slick-arrow.slick-prev::before {content: 'prev';color:rgba(255, 255, 255, 1); font-size: 12px; font-weight:400;  }
#main_vis_slider .slick-arrow.slick-next { background:url('../img/next.png') no-repeat left center; top: 50%;  padding-left: 20px;}
#main_vis_slider .slick-arrow.slick-next::before { content: 'next'; color:rgba(255, 255, 255, 1);  font-size: 12px; font-weight: 400;   }
#main_vis_slider .slick-arrow:focus {outline: none; border: none;}

/* dots */
#main_vis .dots {text-align: left; position: absolute; bottom: 100px; left: 0; z-index: 1; width: 100%;}
#main_vis .dots::before {content: ''; display: block; position: absolute; left: 0; bottom: 0; width:  100%; height: 2px; background-color: rgba(255,255,255,.3); z-index: -1;}
#main_vis .slick-dots {display: flex;  width: 100%; max-width:1400px; padding:0 50px; width: 100%; margin: 0 auto; }
#main_vis .slick-dots li { flex:1;  cursor: pointer;}
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button { font-size: 16px; width: 100%; border:2px solid rgba(255,255,255,0);border-width: 0 0 2px; font-weight:700; color:rgba(255, 255, 255, 0.3);  position: relative; display: flex; justify-content: flex-start; padding-bottom: 25px; display: flex; text-align: left; height: 100%;}
#main_vis .slick-dots button::before {content: '0'; }
#main_vis .slick-dots button::after { content: '';display: block; width: 0; height:2px; position: absolute; left: 0; bottom: -2px; background-color: #fff;  transition-property: width;  transition-timing-function: linear;}
#main_vis .slick-dots button span {padding-right: 15px;}
#main_vis .slick-dots li.slick-active button {color:#fff;  }
#main_vis .slick-dots li.slick-active button::after {width:0; transition-duration: 4000ms;}
#main_vis .slick-dots li.slick-active button.redbar_active::after {width: 100%;}

/* scroll_down */
#scroll_down a { position:absolute; bottom:40px; z-index: 2; right: 70px; animation:ani 1.4s infinite ease; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; background: #13227e; border-radius: 50%; transition: background-color .3s; }
#scroll_down a:hover {background-color: #000;}
@keyframes ani {
    0%{bottom:70px;}
    50%{bottom: 85px;}
    100% {bottom:70px;}
}




@media screen and (max-width: 1700px) {
    #main_vis_slider .slick-arrow {left: 30px;}


}

@media screen and (max-width: 1599px) {
    #scroll_down {display: none;}

}

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

    .main_typo_wrap {padding:0 30px; text-align: center;}
    #main_vis {padding: 0 0 20px;}
    #main_vis, #main_vis_slider .main_slide {min-height: 700px; height: 700px; }

    .main_typo h2 {font-size:50px;  }
    .main_typo p {font-size:18px; margin-top: 20px; }

    #main_vis .dots {bottom: 50px;}
    #main_vis .slick-dots {padding: 0 30px;}
    #main_vis .slick-dots button span {padding-right:5px;}
}

@media screen and (max-width: 768px) {
    #main_vis .dots {bottom: 0;}
    #main_vis .slick-dots {flex-wrap: wrap; padding: 0;}
    #main_vis .slick-dots li {width: 50%; flex:initial;}
    #main_vis .slick-dots li:nth-child(n+3) {margin-top: 15px;}
    #main_vis .slick-dots button { font-size: 14px; padding: 0 20px 15px;}

    #main_vis .dots::after {content: ''; display: block; position: absolute; left: 0; top: 31px; width:  100%; height: 2px; background-color: rgba(255,255,255,.3); z-index: -1;}
}

@media screen and (max-width: 640px) {
    #main_vis, #main_vis_slider .main_slide {min-height: 550px; height: 550px; }
    .main_typo_wrap {padding:0 20px; }

    .main_typo h2 {font-size:35px; letter-spacing: -1.5px;  }
    .main_typo h2 b { letter-spacing: -.7px;  }
    .main_typo p {font-size:15px; margin: 15px 0 0;}
    .main_typo p br {display: none;}

    #main_vis .slick-dots button {font-size: 12px;}

    #main_vis .dots::after  {top:29px;}

}