
/*Content CSS*/
#main_vis {position: relative; z-index: 5; width:calc(100% - 50px); height:calc(100vh - 100px); min-height:812px; display: flex; align-items: center; justify-content: center; max-height: 980px; overflow: hidden; border-radius: 20px; margin: 100px auto 0;}
/* #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:calc(100vh - 100px); min-height:812px; max-height: 980px; 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; padding-top: 100px; }
#main_vis_slider .main_slide .bg {display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: -2;  background-size:cover; background-position:center;}
#main_vis_slider .main_slide.img01 .bg { background-image:url('../img/main1.jpg'); }
#main_vis_slider .main_slide.img02 .bg { background-image:url('../img/main2.jpg');}
#main_vis_slider .main_slide.img03 .bg { background-image:url('../img/main3.jpg');}
#main_vis_slider .main_slide.img04 .bg { background-image:url('../img/main4.jpg');}

/* #main_vis .main_slide.ani .bg { animation:visualScale 10s linear forwards; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);}
@keyframes visualScale {
    0% { -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);  }
    100% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
} */

.main_typo h2 > span,
.main_typo .desc > span {opacity: 0; display: inline-block;}

/* ani */
#main_vis .main_slide.ani .main_typo h2 > span {animation: txt_ani 1s forwards; }
#main_vis .main_slide.ani .main_typo .desc > span {animation: txt_ani 1s forwards; animation-delay: .2s }
@keyframes txt_ani {
    0% {
        transform: translateY(70px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

/* #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: right; max-width:1780px; padding:0 50px; width: 100%;}
.main_typo h2 {font-size:75px; font-weight:300; color:#fff; line-height: 1.31; overflow: hidden; letter-spacing: -1.5px;}
.main_typo h2 span {font-weight: 700; color: #5855ff;}
.main_typo p {font-size:24px; font-weight:400; color:rgba(255,255,255,1); line-height:1.71; margin-top:15px; letter-spacing: -.48px; margin-top: 40px; }

#main_vis .controller {position: absolute; z-index: 3; max-width:1840px; padding:0  50px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 60px;
display: flex; align-items: center; justify-content: flex-end; }

#main_vis .controller span { font-size: 20px; font-weight: 700; color:rgba(255, 255, 255, 1); display: block; font-family: 'Poppins', sans-serif;}
#main_vis .controller .pagingInfo::before {content: '0'; }

#main_vis .controller .dots {flex-shrink: 0; margin: 0 22px; }
#main_vis .slick-dots {display: flex; justify-content: center;  width: 100%;}
#main_vis .slick-dots li { margin-right:23px; }
#main_vis .slick-dots li:last-child {margin-right: 0; }
#main_vis .slick-dots button {font-size: 0; width: 5px; height:5px; background: rgb(255, 255, 255, .5); border-radius: 50%; transition: all .3s; }
#main_vis .slick-dots li.slick-active button {background-color: #fff; border-radius: 2.5px; width: 70px;}



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


}
