/*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; padding-top: 100px;}
#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#main_vis_slider .main_slide { width: 100%; height:100vh; min-height:900px; 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_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg'); background-position: 70% 50%;}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg'); background-position: 70% 50%;}


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; width: 100%; max-width: 1600px; padding:0 50px 100px; }
.main_typo h2 {font-size:80.5px; font-weight:900; color:#fff; line-height: 1.32; }
.main_typo p {font-size: 29px; font-weight: 300; color:#fff; line-height: 1.5; letter-spacing: -.87px; margin-top:30px; }


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

/* dots */
#main_vis .slick-dots {position: absolute; left:0; bottom: 60px; display: flex; justify-content: center; width: 100%;}
#main_vis .slick-dots li {width: 15px; height: 15px; margin-right:25px; }
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button {transition: all .3s ease; font-size: 0; width: 100%; height:100%; background: rgba(255,255,255,.3);
border-radius: 50%; position: relative; }
#main_vis .slick-dots li.slick-active button {opacity: 1; background: rgba(255,255,255,1);}

/* scroll_down */
#scroll_down {width: 100%; max-width: 1600px; padding:0 50px; position: absolute; left: 50%;  transform: translateX(-50%); bottom: 170px; z-index: 2;}
#scroll_down a { cursor: pointer; display: inline-flex; align-items: center; text-transform: uppercase; font-size: 20.5px; font-weight: 500; color:#fff; }
#scroll_down a i {display: inline-flex;  align-items: center; justify-content: center;  width: 50px; height: 50px; border-radius: 50%; background-color: #fff; margin-right: 20px; }
#scroll_down a i img {animation:rota 1.5s infinite ease; position: relative;}
@keyframes rota {
100% { transform: rotateY(360deg); }
 }
/* #scroll_down a i img {animation:down 2s infinite ease; position: relative;}
@keyframes down {
    0%,
    30%,
    60%,
	100% {
		bottom: 2px;
	}

	15%,
	45% {
		bottom: -3px;
	}
} */


@media screen and (max-width: 1700px) {
    #main_vis_slider .slick-arrow {right: 50px;}
    .main_typo_wrap {padding-right: 100px;}
}

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

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

    .main_typo h2 {font-size:55px;}
    .main_typo p {font-size: 23px;}
    #scroll_down {bottom:150px; padding: 0;  text-align: center;}
    #scroll_down a {font-size: 18px;}
    #scroll_down a i {width: 40px; height: 40px; }
    #scroll_down a i img {width: 13px;}


    #main_vis .dots ul {justify-content: center; margin: 0; }

}

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

    .main_typo h2 {font-size: 38px;}
    .main_typo p {font-size: 18px; margin-top: 20px;}
    #scroll_down {bottom: 50px; display: none;}
    #scroll_down a {font-size: 15px;}
    #scroll_down a i {width: 35px; height: 35px; margin-right: 15px;}
    #scroll_down a i img {width: 11px;}

}
@media screen and (max-width: 480px) {
    .main_typo h2 br {display: none;}
}