/*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;
padding-bottom: 30px;}
/* #main_vis::after {content: ''; display: block; width: calc(100% - 200px); max-width: calc(50% + 750px); height: 90px; background-color: #fff; position: absolute; left: 0; bottom: 0;} */

#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;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: center; outline: none; }
#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::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,.3);} */
/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1660px; padding:0 50px; width: 100%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h3 {color:#fff; font-size: 21px; font-weight: 300; line-height: 1.57; }
.main_typo h2 {font-size:100px; font-weight:700; color:#fff; line-height: 1.33; margin: 23px 0 15px;  letter-spacing: -2px;}
.main_typo p:nth-of-type(1) {font-weight: 700; color: #fff; line-height: 1.49; font-size: 37px; letter-spacing: -0.74px;}
.main_typo p span {font-weight: 300; color: #fff; line-height: 1.49; font-size: 37px; letter-spacing: -0.74px;}
.main_typo p:nth-of-type(2) {font-weight: 300; color: #fff; line-height: 1.49; font-size: 21px; letter-spacing: -0.42px;}
.main_typo p:nth-of-type(2)::before {content: ''; display: block; width: 100px; height: 1px; background-color: #fff; margin: 40px 0 50px;}

#main_vis .controller {position: absolute; z-index: 3; max-width:1600px; padding:0 50px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 95px; }
#main_vis .controller .flex {display: flex; align-items: center; margin-top: 120px;}


/* paging number */
#main_vis .num_wr {display: flex; align-items:center; position: relative; flex-shrink: 0; margin-right: 30px; }
#main_vis .num_wr span { font-size: 20px; font-weight: 400; color:rgba(255, 255, 255, 0.3); display: block; }
#main_vis .num_wr span.slash {font-size: 0; width: 1px; height: 15px; background-color:rgba(255, 255, 255, 0.3); margin: 0 14px; position: relative; top:1px;}
#main_vis .num_wr span.pagingInfo {color:#fff; width: 25px;}
#main_vis .num_wr span::before {content: '0';}



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


/* scroll_down */
#scroll_down{display: flex; position: absolute; bottom: 0; right: 100px; z-index: 4;}
#scroll_down a {font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.8); line-height: 1; margin-right: -15px; animation:ani 1.4s infinite ease; cursor: pointer; position: relative; font-family: 'Poppins', sans-serif; transform: rotate(-90deg); height: fit-content;}
@keyframes ani {
    0%{bottom:-32px;}
    50%{bottom: -42px;}
    100% {bottom:-32px;}
}
.bar_wrap{width: 1px; height: 200px; background-color: rgba(255,255,255,.3)}
.redbar { width:1px; height:1px; opacity: 1; z-index:10; transition-property: height; transition-duration: 5000ms;
transition-timing-function: ease; }
.redbar.redbar_active { width:1px; height:100%; opacity: 1; background: #FFF; transition-property: height; transition-duration: 5000ms; transition-timing-function: ease; }
.redbar.redbar_remove {width:1px; height:0; opacity: 1; background: #FFF; transition-property: height; transition-duration: .1s; transition-timing-function: ease;}

/* dots */
#main_vis .dots{position: absolute; bottom: 101px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1660px; padding: 0 50px; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
#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: 16px; font-family: 'play',sans-serif; font-weight: 600; color: #fff !important; }

#main_vis .slick-dots li.slick-active .circle-go {display: block;}

.circle-bg,
.circle-go {display: none;}

.slick-dots li.slick-active .circle-bg,
.slick-dots li.slick-active .circle-go {display: block;}

.slick-dots li.slick-active .circle-tx {fill:#fff;}

/* progress*/
.circle-bg {fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1;}
.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: rgba(255,255,255,.3);}

#main_vis .slick-arrow {cursor:pointer; transition: all 0.2s; display: block; text-decoration: none; font-size:0; background: transparent; border: none; width:8px; height: 16px;}
#main_vis .slick-arrow.prev { background:url('../img/prev.png') no-repeat center; margin-left: 25px;}
#main_vis .slick-arrow.next { background:url('../img/next.png') no-repeat center; margin-left: 21px;}

@media screen and (max-width: 1800px) {
    #scroll_down a {right: 40px; }
    #main_vis .dots {right: 40px; }
    #main_vis .controller {padding-right: 100px;}

}

@media screen and (max-width: 1280px) {
    #main_vis {padding-bottom: 100px; }
    /* #main_vis .controller {bottom: 150px;} */
    .main_typo h2 {font-size: 70px;}

    #scroll_down {display: none; }
    /* #main_vis .dots {right: auto; top:auto; width: 100%; max-width: 1600px; padding: 0 50px; bottom:250px; left: 50%;  transform: translateX(-50%);}
    #main_vis .dots ul {flex-direction: row; justify-content: flex-start; }
    #main_vis .dots ul li {margin:0 15px 0 0;}
    #main_vis .dots ul li.slick-active button {width: 34px; height: 7px;} */
}

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

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

    .main_typo h3 {font-size:16px;  }
    .main_typo h2 {font-size:50px;  }
    .main_typo p {font-size: 18px; }
    .main_typo p:nth-of-type(2) {font-size: 18px;}
    .main_typo p:nth-of-type(1) {font-size: 40px}
    .main_typo p span {font-size: 40px}


    #main_vis .controller {bottom: 50px; padding: 0 30px;}
    #main_vis .controller .flex {margin-top: 30px;}

    #main_vis .dots { bottom: 130px; padding: 0 30px; }
    #main_vis .dots ul {justify-content: center;}

    .main_typo p:nth-of-type(2)::before {margin: 30px auto;}
    #main_vis .dots {justify-content: center; align-items: center;}
    #main_vis .dots .slick-arrow {display: none !important;}


}

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

    #main_vis_slider .main_slide {padding: 0 0 50px; align-items:center;}

    .main_typo h3 {font-size:13px; }
    .main_typo h2 {font-size:40px; margin: 15px 0 20px; }
    .main_typo p {font-size: 15px; }
    .main_typo p:nth-of-type(2) {font-size: 15px;}
    .main_typo p:nth-of-type(1) {font-size: 30px}
    .main_typo p span {font-size: 30px}

    #main_vis .controller {bottom:40px; padding: 0 20px;}
    #main_vis .controller .flex {margin-top:15px;}


    #main_vis .num_wr {margin-right: 15px; }
    #main_vis .num_wr span {font-size: 16px;}
    #main_vis .num_wr span.pagingInfo {width: 19px;}
    #main_vis .num_wr span.slash {margin: 0 10px;}

    #main_vis .dots {bottom: 85px; padding: 0 20px;}

    #play_btn {margin-left: 15px;}
    #main_vis .slick-dots button {font-size: 15px;}
    .main_typo {margin-top: 20px;}
}
@media screen and (max-width: 480px) {
    .main_typo h2 {font-size:32px; }
    .main_typo p:nth-of-type(1) {font-size: 25px}
    .main_typo p span {font-size: 25px}
    #main_vis .slick-dots button {font-size: 14px;}

}