/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:850px; display: flex; 
    align-items: center; justify-content: center; max-height: 850px;
padding-bottom:50px; overflow: hidden;}
#main_vis_slider {width:100%; position: absolute; top: 13%; right: 0; }
#main_vis_slider .main_slide {height: 100%; height:100vh; min-height:; max-height: ; 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/banner/logistic2.webp'); background-position: 50% 50%; position: relative;}
#main_vis_slider .main_slide.img02 { background-image:url('../img/banner/kid-ban.webp'); background-position: 50% 50%;}
#main_vis_slider .main_slide.img03 { background-image:url('../img/banner/8.webp'); background-position: 50% 50%;}
#main_vis_slider .main_slide.img04 { background-image:url('../img/banner/9.webp'); background-position: 50% 50%;}


#main_vis_slider .main_slide.img01:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #053c58, rgba(5, 60, 88, 0));
}

/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width: 90%; padding:0 50px; width: 100%;     margin-top: -10%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h2 {font-size:56px; font-weight:800; color:#fff; line-height: 1.2; text-transform: uppercase;}
.main_typo h2 span {font-family: ''; font-weight:300;}
.main_typo p {font-size:22px; font-weight:300; font-family: 'NanumSquareRoundL'; color:rgba(255,255,255,1); line-height:1.73; margin-top: 30px;}

@media screen and (min-width:1025px) {
    #main_vis .arrows { position:absolute; right:80px; top:50%; transform:translateY(-50%); z-index: 3; display: flex; flex-direction: column; }
    #main_vis .arrows::before {content: ''; width: 30px; height: 1px; background-color: rgba(255,255,255,.2); position: absolute; left: 0; top:50%; }
    #main_vis .arrows button { text-align:center; cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:15px; line-height: 1;
    font-weight: 300; opacity: 1; color:#fff; background: transparent; font-family: 'NanumSquareRoundL'; border: none; width: 100%;}
    #main_vis .arrows button:focus { outline: none; border: none; }
    #main_vis .arrows .slick-prev {padding: 15px 0 0; margin-bottom: 20px;background:url("../img/prev.png") 50% 0 no-repeat;}
    #main_vis .arrows .slick-next {padding: 0 0 15px; margin-top: 20px; background:url("../img/next.png") 50% 100% no-repeat;}
}

/* contr */
#main_vis .contr_wrap { max-width:1520px; padding:0 50px; width: 100%; position: absolute; bottom: 90px; left: 50%;  transform: translateX(-50%); }

/* dots */
#main_vis .slick-dots {display: flex; align-items: flex-end; text-align: left; }
#main_vis .slick-dots li { margin-right:12px;  cursor: pointer;}
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button { font-size: 18px; width: 70px; border:3px solid rgba(255,255,255,.3);border-width: 0 0 3px; font-weight: 800; color:rgba(255, 255, 255, 0.3); font-family: 'NanumSquareRoundEB'; position: relative; padding-bottom: 10px; display: flex;}
#main_vis .slick-dots button::before {content: '0'; }
#main_vis .slick-dots button::after { content: '';display: block; width: 0; height:3px; position: absolute; left: 0; bottom: -3px; background-color: #fff;  transition-property: width;  transition-timing-function: linear;}
#main_vis .slick-dots li.slick-active button {color:#fff;  font-size: 40px; }
#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%;}

/* progress */
#main_vis .bar_wr {width:100%; max-width:800px; height: 3px; background: rgba(255,255,255,.3); position: relative; }
#main_vis .redbar { width:1px; height:3px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; transition-duration: 5000ms;
transition-timing-function: linear; }
#main_vis .redbar.redbar_active { width:100%; height:100%; opacity: 1; background: #FFF; transition-property: width; transition-duration: 5000ms; transition-timing-function: linear; }
#main_vis .redbar.redbar_remove {width:0px; height:100%; opacity: 1; background: #FFF; transition-property: width; transition-duration: .1s; transition-timing-function: linear;}


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

@media screen and (max-width:1700px) {
    #main_vis .arrows {right:20px;}
    .main_typo_wrap {padding: 0 70px;}
    #scroll_down a {right: 20px;}
}

@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; }

    .main_typo h2 {font-size:60px;  }
    .main_typo p {font-size: 17px; margin-top: 30px; }

    #main_vis .contr_wrap {padding: 0 30px; bottom:60px;}

    #main_vis .slick-arrow { cursor: pointer; position:absolute; z-index: 10; opacity: 1; border:0; font-size: 0; width:18px; height:34px; top: 50%;  transform: translateY(-50%);
    display: none;}
    #main_vis .slick-arrow.slick-prev { background:url('../img/prev_mob.png') no-repeat center/contain; left: 30px;}
    #main_vis .slick-arrow.slick-next { background:url('../img/next_mob.png') no-repeat center/contain;right: 30px;}
    #main_vis .slick-arrow:focus {outline: none; border: none;}

    #main_vis .slick-dots {justify-content: center; }
    #main_vis .slick-dots button {font-size: 16px; }
    #main_vis .slick-dots li.slick-active button {font-size: 27px; }

}


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

    .main_typo_wrap {padding:0 20px; }
    .main_typo h2 {font-size:40px;  }
    .main_typo p {font-size: 15px; margin-top: 20px;}

    #main_vis .contr_wrap {padding: 0 20px;}

    #main_vis .slick-arrow.slick-prev {left: 15px;}
    #main_vis .slick-arrow.slick-next {right: 15px;}

    #main_vis .slick-dots button {font-size: 15px; width: 50px; padding-bottom: 5px; }
    #main_vis .slick-dots li {margin-right: 5px; }
    #main_vis .slick-dots li.slick-active button {font-size: 25px; }

}
@media screen and (max-width: 480px) {
    .main_typo h2 {font-size:35px; }
    .main_typo p {margin-top: 15px; font-size: 14px;}
    .main_typo p br {display: none;}

}