/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:500px; display: flex; align-items: center; justify-content: center; background: #000;}
/* #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:500px; 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; padding-bottom: 40px; }
#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_vis .fs_100 {font-size: 30px; font-weight: 800; line-height: 1; color: #fff;}
#main_vis .fs_50 {font-size: 24px; font-weight: 700; line-height: 2; color: #fff;}
#main_vis .fs_30 {font-size: 20px; font-weight: 600; color: #fff;}
#main_vis .fs_27 {font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: -0.5px;}

#main_vis .copy h1 {margin-bottom: 10px; letter-spacing: -1px;}
#main_vis .copy h1 strong {margin-left: 5px; position: relative;letter-spacing: -1px;}
#main_vis .copy p:nth-of-type(1) {margin-bottom: 10px;}
#main_vis .copy p span {font-family: 'SUIT'; font-family: 800;}

.main_typo h2 > span,
.main_typo .desc > span {opacity: 0; display: 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_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1670px; padding:20px 20px 0; width: 100%; text-align: center; }
.main_typo {position: relative; z-index: 1;}

#main_vis .controller {position: absolute; z-index: 3; max-width:1670px; padding: 0 20px; width: 100%; left: 50%; transform: translateX(-50%); bottom: 30px; }
#main_vis .controller .flex {display: flex; align-items: center; margin-top:20px;  justify-content: space-between; }

#main_vis .arrows { display: flex; align-items: center; }
#main_vis .arrows .slick-arrow {cursor: pointer; height: 40px; width: 40px;font-size: 0; transition: all .3s;}
#main_vis .arrows .slick-prev { background:url('../img/prev.png') no-repeat center transparent; background-size: auto 12px;}
#main_vis .arrows .slick-next { background:url('../img/next.png') no-repeat center transparent; margin-left: 10px; background-size: auto 12px;}
#main_vis .arrows .slick-arrow:hover {}



/* progress */
#main_vis .bar_wr {width:100%;  height: 3px; background: rgba(255,255,255,.4); 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: 6000ms;
transition-timing-function: linear; }
#main_vis .redbar.redbar_active { width:100%; height:100%; opacity: 1; background: #fff; transition-property: width; transition-duration: 6000ms; 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;}

#play_btn {position: relative;flex-shrink: 0; overflow: hidden; }
#play_btn a {cursor: pointer; display: flex; align-items: center; justify-content: center;  width: 40px; height: 40px;  border-radius: 50%; transition: all .3s;}
#play_btn a img {height: 14px;}
#play_btn:hover a {}
#play_btn .play {display: none;}