/*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%; min-height:800px; max-height: 1080px; position: absolute; top: 0; left: 0; }
#main_vis_slider .main_slide {height:100vh; min-height:720px; 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=240102');}
#main_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg?v=240102');}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg?v=240102');}


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1500px; padding:0 50px; width: 100%; top: -35px;}
.main_typo {position: relative; z-index: 1; }
.main_typo h2 {font-size:79.5px; color:#fff; line-height:100px; letter-spacing: -1.59px; font-weight: 300; }
.main_typo h2::before{content: ''; display: block; width: 50px; height: 5px; background-color: #fff; margin-bottom: 23px;}
.main_typo p {font-size:22px; font-weight:400; color:rgba(255,255,255,1); line-height: 36px;  margin:35px 0 0; }


/*컨트롤러*/
#main_vis .controller {width: 100%; display: flex ; align-items: center; }
#main_vis .controller .flex {display: flex; align-items: center; }

#main_vis .slick-arrow {cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:0; background: transparent; border: none; width: 9px; height: 14px;}
#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{position: absolute; bottom: 101px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1500px; padding: 0 50px;}
#main_vis .slick-dots{display: flex;}
#main_vis .slick-dots li{margin-right: 8px;}
#main_vis .slick-dots li:last-child{margin-right: 0;}
#main_vis .slick-dots button{display: flex; align-items: center; justify-content: center; font-size: 17px; font-family: 'Montserrat'; font-weight: 700; width: 50px; height: 50px; border-radius: 50%; letter-spacing: -.34px; color: #fff !important;}
#main_vis .slick-dots li.slick-active button{background-color: #42ade0;}

#main_vis .slick-dots li.slick-active .circle-go{display: block;}
/* progress*/
.circle-bg { fill: rgba(255, 255, 255, 0); stroke: rgba(0, 0, 0, 0.05); stroke-width: 2;stroke-linecap: butt; }
.circle-go {fill: rgba(255, 255, 255, 0);stroke: rgb(255, 255, 255);stroke-width: 1;stroke-linecap: round;animation: progress 23s; stroke-dasharray: 360; stroke-dashoffset: 0; display: none; transform: rotate(-90deg)  scaleY(-1);}
.circle-tx{fill: #fff;}

@keyframes progress {
  from {
    stroke-dashoffset: 360;
  }
  to {
    stroke-dashoffset: 0;
  }
}