/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; min-height:937px; display: flex; align-items: center; justify-content: center; max-height: 1080px;}

#main_vis_slider {width:100%; position: absolute; top: 0; right: 0; }
#main_vis_slider .main_slide {height: 100%; height:100vh; min-height:937px; max-height: 1080px; z-index: 1; position:relative; display: flex; align-items: flex-start; justify-content: center; outline: none; }
#main_vis_slider .main_slide .bg {position: absolute; width: calc(100% - 635px); height: 100%; right: 0; top:0; z-index: 1; background:url("../img/main_bg1.jpg") 50%/cover no-repeat;}


/* #main_vis_slider .main_slide::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,.3);} */

/* font size */
#main_vis .fs_80 {font-size: 80px; font-weight :700; line-height: 1.19; font-family: "Poppins", sans-serif; color:#fff; }
#main_vis .fs_25 {font-size: 25px; font-weight:700; line-height: 1.36; font-family: "Poppins",'Pretendard', sans-serif; color:#fff; }
#main_vis .fs_20 {font-size: 20px; font-weight:400; line-height: 1.75; font-family: "Poppins", sans-serif; color:#fff; }
#main_vis .fs_18 {font-size: 18px; font-weight: 300;  line-height: 1.65; font-family: "Poppins", sans-serif; color: rgba(255, 255, 255, 0.8);}

#main_vis .dot_list > li {padding-left: 11px; position: relative ;}
#main_vis .dot_list > li + li {margin-top: 5px; }
#main_vis .dot_list > li::before {content: ''; width: 5px; height: 5px; border-radius: 50%; left: 0; top: 12px; background: #fff; position: absolute;}

/* history_line */
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; width: 100%; height: 100%; }
.main_typo_wrap::before {content: ''; display: block; width: 826px; height: 100%; background:url("../img/main_txt_bg1.png") 100% 100%/cover no-repeat; position: absolute; z-index: -1; left: 0; top:0; }
.main_typo { max-width:1700px; padding:190px 50px 0; width: 100%; margin: 0 auto; }
.main_typo h3 {margin-top: 25px; }
.main_typo h3::after {content: ''; width: 50px; height: 1px; display: block; background-color: #fff; margin: 40px 0;}
.main_typo .desc h4 {margin-bottom: 15px; }
.main_typo .desc h4 span {font-weight: 300; font-family: 'GMarketSans'; }
.main_typo .desc + .desc {margin-top: 40px;}


/* slide img */
 #main_vis_slider .main_slide.slide2 .bg {background-image:url("../img/main_bg2.jpg");}
 #main_vis_slider .main_slide.slide2 .main_typo_wrap::before {background-image:url("../img/main_txt_bg2.png");}
 #main_vis_slider .main_slide.slide3 .bg {background-image:url("../img/main_bg3.jpg");}
 #main_vis_slider .main_slide.slide3 .main_typo_wrap::before {background-image:url("../img/main_txt_bg3.png");}
 #main_vis_slider .main_slide.slide4 .bg {background-image:url("../img/main_bg4.jpg");}
 #main_vis_slider .main_slide.slide4 .main_typo_wrap::before {background-image:url("../img/main_txt_bg4.png");}



#main_vis .controller {position: absolute; z-index: 3; max-width:1700px; padding:0 50px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 33px;display: flex; align-items: center;  }
/* paging number */
#main_vis .num_wr {display: flex; align-items:flex-end; position: relative; flex-shrink: 0; margin-left: 53px;}
#main_vis .num_wr span { font-size: 18px; font-weight: 400; color:rgba(255, 255, 255, 1); display: block; font-family: 'Poppins', sans-serif;}
#main_vis .num_wr span.slash {margin: 0 5px; position: relative; top:-1px;}
#main_vis .num_wr span.pagingInfo {color:#fff; font-size: 50px; font-weight: 700; line-height: .9;}
#main_vis .num_wr span::before {content: '0';}
#main_vis .num_wr span.slash::before {display: none;}

/* progress */
#main_vis .bar_wr {width:100%; max-width:480px; height: 3px; background: rgba(255,255,255,.2); 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 */
#scroll_down {position:absolute; width: 100%; max-width: 1830px; padding: 0 50px; z-index:6; left: 50%;  transform: translateX(-50%); bottom:60px;}
#scroll_down a {display: flex; width: 85px; height: 85px; border-radius: 50%; background-color: #6a1684; cursor: pointer; align-items: center; justify-content: center; transition: background-color .3s;  animation:ani 1.4s infinite ease; position: relative; color:#fff; font-size: 40px; margin: 0 0 0 auto;}
@keyframes ani {
    0%{bottom:0;}
    50%{bottom: -15px;}
    100% {bottom:0;}
}
#scroll_down a:hover {background-color: #e40065; }


@media screen and (min-width: 1921px) {
    .main_typo_wrap::before {width: calc(100% - 1094px);}
}


@media screen and (max-width: 1700px) {
    .main_typo_wrap::before {width:50%;}
    #main_vis_slider .main_slide .bg {width: 65%;}
    #main_vis .bar_wr {width: 34%;}
}
@media screen and (max-width: 1280px) {
    #main_vis .fs_80 {font-size: 60px;}
    .main_typo_wrap::before {width:55%;}
    #main_vis_slider .main_slide .bg {width: 65%;}
    #main_vis .bar_wr {width: 35%;}
}


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

    #main_vis {display: block; }
    #main_vis, #main_vis_slider .main_slide {min-height: 0; height: auto; max-height:inherit;}
    #main_vis_slider {position: relative;}
    #main_vis_slider .slick-track {display: flex;}
    #main_vis_slider .main_slide {flex-direction: column; justify-content: flex-start;}
    .main_typo_wrap {padding:40px 30px 90px; text-align: center; height: 100%; }
    .main_typo_wrap::before {height: 100%; width: 100%;  background-size: 130% auto; background-position: 0 30%;}
    .main_typo {padding: 0; }
    .main_typo h3 {margin-top: 15px;}
    .main_typo h3::after {margin:25px auto; width: 40px; }
    .main_typo .desc h4 {margin-bottom: 10px; }
    .main_typo .desc + .desc {margin-top: 25px; }
    .main_typo h3 br,
    .main_typo h4 br {display: none;}

    /* font szie */
    #main_vis .fs_80 {font-size: 35px;}
    #main_vis .fs_25 {font-size: 18px; }
    #main_vis .fs_20 {font-size: 16px; }
    #main_vis .fs_18 {font-size: 15px; }

    #main_vis .dot_list {  display: flex; flex-direction: column; align-items: center;}
    #main_vis .dot_list > li::before {top:9px; }

    #main_vis_slider .main_slide .bg {position: static; width: 100%; height:400px; flex-shrink: 0; }
    #main_vis .controller {bottom: 30px; padding: 0 30px; justify-content: center; max-width: 600px;}
    #main_vis .bar_wr {width: 100%; max-width: 100%; }

    #main_vis .num_wr {margin-left: 30px; }
    #main_vis .num_wr span {font-size: 16px;}
    #main_vis .num_wr span.pagingInfo {font-size: 35px; line-height: 1;}


}

@media screen and (max-width: 640px) {
    #main_vis_slider .main_slide .bg {height:300px; }
    .main_typo_wrap {padding:30px 20px 70px;}
    .main_typo h3::after {margin:15px auto; width: 30px; }
    .main_typo .desc h4 {margin-bottom: 5px;}
    .main_typo .desc + .desc {margin-top: 20px; }

    #main_vis .fs_80 {font-size: 26px; line-height: 1.25;}
    #main_vis .fs_25 {font-size: 16px; }
    #main_vis .fs_20 {font-size: 15px; }
    #main_vis .fs_18 {font-size: 13px; }

    #main_vis .controller { padding: 0 20px; bottom: 20px;}
    #main_vis .num_wr {margin-left: 20px; }
    #main_vis .num_wr span {font-size: 14px;}
    #main_vis .num_wr span.pagingInfo {font-size: 30px; }
    #main_vis .dot_list > li {padding: 0; }
    #main_vis .dot_list > li::before {top:-3px; width: 4px; height:4px; display: inline-block; margin-right: 5px; position: relative;}
    #main_vis .dot_list > li + li {margin: 2px 0 0;}


}

@media screen and (max-width: 400px) {
    #main_vis .fs_80 {font-size: 23px;}
}