
/*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; overflow: hidden;}
#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: 50% / cover 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');}
#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; width: 1500px; padding:0 50px;}
.main_typo h1 {font-size: 75px; font-weight:700; color:#fff; font-family: 'SCoreDream';}
.main_typo > span{font-size: 30px; font-weight: 500; color: #fff; display: block;  font-family: 'SCoreDream'; margin-bottom: 10px;}
.main_typo p {font-size: 22px; font-weight:300; color:rgba(255,255,255,1); line-height:1; font-family: 'SCoreDream';}
.main_typo p b{font-weight: 600; font-size: 32px; color: #fff; text-shadow: 3px 3px 3px rgba(0,0,0,.05); }
/*컨트롤러*/
#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;}

.bar_wr {width:761px; height: 2px; background: rgba(255,255,255,.3); position: relative; margin: 50px 0 65px;}
.redbar { width:1px; height:2px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; transition-duration: 5000ms;
transition-timing-function: ease; }
.redbar.redbar_active { width:100%; height:2px; opacity: 1; background: #FFF; transition-property: width; transition-duration: 5000ms; transition-timing-function: ease; }
.redbar.redbar_remove {width:0px; height:2px; opacity: 1; background: #FFF; transition-property: width; transition-duration: .1s; transition-timing-function: ease;}

/* paging number */
#main_vis .num_wr {display: flex; align-items:baseline; position: absolute; bottom: 84px; right: 100px;}
#main_vis .num_wr h2 {font-size: 60px; font-weight: 600; color:#fff; font-family: 'SCoreDream'; }
#main_vis .num_wr span {display: block; font-size: 19px; font-weight: 500; color:#fff; margin:0 8px; font-family: 'SCoreDream';}
#main_vis .num_wr h3 {font-size: 19px; font-weight: 500; color:#fff;  font-family: 'SCoreDream';}

.main_typo_wrap .pager {display: flex; align-items: center; justify-content: flex-start;}

/* arrows */
#main_vis .arrows{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; width: 100%; display: flex; justify-content: space-between; padding: 0 100px;}
#main_vis .arrows button{font-size: 0;}
#main_vis .arrows button::before{content: ''; display: block; width: 30px; height: 58px; background: 50% / cover no-repeat; }
#main_vis .arrows button.slick-prev::before{background-image: url('../img/main_left.png');}
#main_vis .arrows button.slick-next::before{background-image: url('../img/main_right.png');}

#main_vis .dots{position: absolute; bottom: 50px;z-index: 5; width: 100%; display: flex; justify-content: center;}
#main_vis .slick-dots {justify-content: center; display: flex;}
#main_vis .slick-dots li {width: 12px; height: 12px; margin:0 20px 0 0; transition: .3s;}
#main_vis .slick-dots li.slick-active{width: 25px;}
#main_vis .slick-dots li:last-child { margin: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);  border-radius: 10px;}

#main_vis .main_slide.ani { animation:visualScale 5s infinite linear; -ms-transform: scale(1.12); -webkit-transform: scale(1.12); transform: scale(1.12);}
@keyframes visualScale {
    0% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
    100% { -ms-transform: scale(1.12); -webkit-transform: scale(1.12); transform: scale(1.12); }

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

    #main_vis .arrows{padding: 0 50px;}
}

@media screen and (max-width: 1600px) {
    .main_typo_wrap{padding: 0 100px;}
}

@media screen and (max-width: 1500px) {
    .main_typo_wrap {width: 100%; padding: 0 150px;}
    .main_typo h1{font-size: 70px;}
    #main_vis .arrows{padding: 0 30px;}

}

@media screen and (max-width: 1024px) {
    .main_typo_wrap {padding:0 30px; text-align: center;}
    #main_vis, #main_vis_slider .main_slide {min-height: 600px; max-height: 100vh;}

    #main_vis .arrows button::before{background-size: 25px; width: 25px;}
    .main_typo h1 {font-size:50px;}
    .main_typo > span{font-size: 23px;}
    .main_typo p b{font-size: 27px;}
    .main_typo p {font-size: 18px; line-height: 1.65;}
    .main_typo_wrap .pager {justify-content: center;}
    .bar_wr {width: 50%; margin: 35px 0; min-width: 500px;}
    #main_vis .num_wr{right: 50px; bottom: 50px;}
    #main_vis .num_wr h2{font-size: 40px;}
    #main_vis .num_wr h3{font-size: 17px;}




}
@media screen and (max-width: 768px){
    #main_vis .arrows button::before{background-size: 20px; width: 20px;}
    #main_vis .num_wr{right: initial; bottom: 90px; left: 50%; transform: translateX(-50%);}
    #main_vis .num_wr h2{font-size: 25px;}
    #main_vis .num_wr h3{font-size: 14px;}
    .main_typo_wrap{top: -10px;}
}

@media screen and (max-width: 640px) {
    #main_vis .arrows{padding: 0 15px;}

    .main_typo_wrap {padding:0 15px; }
    .main_typo h1 {font-size: 35px; line-height: 1.4;}
    .main_typo > span{line-height: 1.65; font-size: 18px; margin-bottom: 0;}
    .main_typo p {font-size: 16px;}
    .main_typo p b{font-size: 20px;}

    .bar_wr {min-width: initial; width: 100%; max-width: 350px;}

}

@media screen and (max-width: 480px) {
    .main_typo h1 {font-size: 33px;}
    .main_typo > span{font-size: 16px; }
    .main_typo p {font-size: 14px;}
    .bar_wr {max-width: 330px;}
}
