
/*Content CSS*/
#main_vis { padding:0; display:block; position: relative; z-index: 5; width: 100%; height:100vh; min-height:900px; display: flex; align-items: center; justify-content: center; max-height: 1080px;}
#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main_vis_slider .main_slide {height: 100vh; min-height: 900px; max-height: 1080px; position: relative; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;}
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg');  }

/*main_typo*/
.main_typo_wrap {text-align: center; position: relative; z-index: 2; max-width: 1420px; padding:0 60px; width: 100%;}
.main_typo h2 {font-size:46px; font-weight:300; color:#fff; letter-spacing: -2.3px; line-height: 1.3;}
.main_typo h2 b {font-weight: 500;}
.main_typo p {font-size: 18px; font-weight:300; color:rgba(255,255,255,1); line-height:30px;  margin:30px 0 60px;}
.main_typo a {display: flex; align-items: center; justify-content:center; line-height: 1; width: 235px; height: 60px; margin:0 auto; line-height: 1;
border:1px solid #eee; background-color: transparent; transition: all .3s; font-size: 18px; font-weight: 300; color:#fff; }
.main_typo a:hover {background-color: #506171 ; border-color: #506171; color:#fff;}
.main_typo .c_btn + .c_btn {margin-top: 15px;}

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


/* dots */
#main_vis .slick-dots {position: absolute; right:110px; top: 55%;  transform: translateY(-100%); z-index: 3;}
#main_vis .slick-dots li {width: 38px; height: 38px; margin-bottom:35px; display: flex ;align-items: center; justify-content: center; border-radius: 50%;
border:2px solid rgba(255, 255, 255, 0); transition: border-color  .3s ease;}
#main_vis .slick-dots li:last-child {margin-bottom: 0; }
#main_vis .slick-dots button {font-size: 0; width: 8px; height:8px; background: rgba(255,255,255,1); border-radius: 50%; position: relative; }
#main_vis .slick-dots li.slick-active {border-color: rgba(255, 255, 255, 0.5);}

/* scroll_down */
#scroll_down a { position:absolute; right:90px; bottom:100px; z-index: 2;  animation:ani 1.4s infinite ease; cursor: pointer; }
@keyframes ani {
    0%{bottom:100px;}
    50%{bottom: 85px;}
    100% {bottom:100px;}
}




@media screen and (max-width: 1740px) {
    #scroll_down a {right: 50px; }

}

@media screen and (max-width: 1420px) {
    .main_typo_wrap {padding:0 50px; }
    #scroll_down {display: none;}
}

@media screen and (max-width: 1024px) {
    .main_typo_wrap {padding:0 30px;}
    #main_vis {align-items: center; padding-bottom: 40px;}
    #main_vis, #main_vis_slider .main_slide {min-height: 700px; height: 700px; }
    #main_vis .slick-dots {justify-content: center; display: flex !important; top: auto; bottom:60px; right: 50%;  transform: translateX(50%);}
    #main_vis .slick-dots li { margin:0 20px 0 0; width: 30px; height: 30px; }
    #main_vis .slick-dots li button {width: 6px; height: 6px; }
    #main_vis .slick-dots li:last-child { margin:0;}

    .main_typo h2 {font-size:35px;}
    .main_typo p {font-size: 16px; line-height: 1.6; }
    .main_typo a {height: 50px; font-size: 16px;width: 200px;}


}

@media screen and (max-width: 640px) {
    #main_vis {padding-top: 60px;}
    #main_vis, #main_vis_slider .main_slide {min-height:500px; height: 500px;}
    .main_typo_wrap {padding:0 20px; }
    .main_typo h2 {font-size: 30px; }
    .main_typo p {font-size: 14px;  margin: 20px 0 40px; }
    .main_typo p br {display: none;}
    .main_typo a {font-size: 14px;}
    .main_typo .c_btn + .c_btn {margin-top: 10px;}

    #main_vis .slick-dots {bottom: 50px;}


}

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

}
