/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:100vh; display: flex; align-items: center; justify-content: center;
 background:#fff;  max-height: 1080px; min-height: 937px;}
#main_vis_slider {width:   100%; position: absolute; top: 0; right: 0; }
#main_vis_slider .main_slide {height: 100%; height:100vh; max-height:1080px; min-height: 937px;   background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; outline: none; position: relative; z-index: 1; overflow: hidden ;}
#main_vis .main_slide.ani .bg { animation:visualScale 6s infinite linear; -ms-transform: scale(1.12); -webkit-transform: scale(1.12); transform: scale(1.12);}
@keyframes visualScale {
    0% { -ms-transform: scale(1.12); -webkit-transform: scale(1.12); transform: scale(1.12); }
    100% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }

}

#main_vis_slider .main_slide::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; z-index: -1;
background:url("../img/main_ptn.png") 50% repeat; }
#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/b1.png'); background-position: 70% 50%;}
#main_vis_slider .main_slide.img02 .bg { background-image:url('../img/b2.png'); background-position: 80% 50%;}
#main_vis_slider .main_slide.img03 .bg { background-image:url('../img/b3.png');}
#main_vis_slider .main_slide.img04 .bg { background-image:url('../img/banner-4.png');}
#main_vis_slider .main_slide.img05 .bg { background-image:url('../img/b-5.png');}*/


#main_vis_slider .main_slide.img01 .bg { background-image:url('https://www.etek-china.com/upload/1c/202409/banner-gf.jpg'); background-position: 70% 50%;}
#main_vis_slider .main_slide.img02 .bg { background-image:url('https://www.etek-china.com/upload/1c/202303/banner-new4.jpg'); background-position: 80% 50%;}
#main_vis_slider .main_slide.img03 .bg { background-image:url('../img/banner-clear-3.png');}
#main_vis_slider .main_slide.img04 .bg { background-image:url('../img/banner-clear-4.png');}
#main_vis_slider .main_slide.img05 .bg { background-image:url('../img/b3.png');}


#main_vis_slider .main_slide .bg:before {
content: ''  ;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
/*    background: linear-gradient(90deg, #000000, rgba(5, 60, 88, 0));*/
}

/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index:6; width:calc(100% - 180px); padding:0 50px; margin:0 auto; max-width: 1630px; padding-bottom: 170px;}
.main_typo {position: relative; z-index: 2; }
.main_typo i {position: absolute; z-index: -1; left: -37px; top:-60px; }
.main_typo h2 {font-size:63px; font-weight:300; color:#fff; line-height:1.3; letter-spacing: -1.26px; margin:0 0 25px; overflow: hidden;}
.main_typo_new h2{ color:black; }
.main_typo h2 b {font-size:76px; font-weight: 700; letter-spacing: -1.52px; }
.main_typo p {font-size: 21px; font-weight:300; color:rgba(255,255,255,.7);line-height: 1.4; overflow: hidden;}
.main_typo_new p{ color:black; }
.main_typo h2 > span,
.main_typo p > 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 p > span {animation: txt_ani 1s forwards; animation-delay: .1s }
@keyframes txt_ani {
    0% {
        transform: translateY(70px);
        opacity: 0
    }

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


#main_vis .line_box {z-index:1;  width:calc(100% - 180px); max-width: 1740px; border:1px solid rgba(255,255,255,.2); height: calc(100% - 180px); top:90px;
left: 50%;  transform: translateX(-50%); position: absolute; pointer-events: none;}

/* dots */
#main_vis .dots {margin:0 0 105px; }    
#main_vis .dots ul {display: flex; }
#main_vis .dots ul li {margin-right: 12px; }
#main_vis .dots ul li:last-child {margin-right: 0; }
#main_vis .dots button {width: 10px; height: 10px; background: rgba(255,255,255,.2); transition: all .3s; border-radius: 50%; font-size: 0;}
#main_vis .dots .slick-active button {background: #fff; border-radius: 5px; width: 32px; }



/*컨트롤러*/
#main_vis .progress_wr {position:absolute; right: 32px; bottom: 260px; padding:25px 0;}
#main_vis .progress_wr > .flex {display: flex; align-items: center; justify-content: center; flex-direction: column; }

#main_vis .arrows {position: absolute;  width:100%; display: flex; align-items: center; justify-content: space-between; left: 0 ;top:0;
height: 100%; flex-direction: column;}
#main_vis .arrows .slick-arrow {cursor: pointer; height: 25px; font-size: 0; width: 15px; height: 9px;}
#main_vis .arrows .slick-prev { background:url('../img/prev.png') no-repeat center;  }
#main_vis .arrows .slick-next { background:url('../img/next.png') no-repeat center;  }


.bar_wr {width:2px; height: 300px; background: rgba(255,255,255,.2); position: relative; margin:20px 0;}
.redbar { width:2px; height:3px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: height; transition-duration: 5000ms;
transition-timing-function: ease; }
.redbar.redbar_active { width:2px; height:100%; opacity: 1; background: #fff; transition-property: height; transition-duration: 5000ms; transition-timing-function: ease; }
.redbar.redbar_remove {width:2px; height:0; opacity: 1; background: #fff; transition-property: height; transition-duration: .1s; transition-timing-function: ease;}

/* paging number */
#main_vis .num_wr h2 {font-size:20px; font-weight: 400; color:#fff; font-family: 'Roboto', sans-serif;}

#scroll_down a { position:absolute; bottom:105px; z-index: 2; right: 24px; animation:ani 1.4s infinite ease; cursor: pointer; color:#fff; font-size: 11px;
writing-mode: vertical-lr; text-transform: uppercase; letter-spacing: 2px; transition: all .3s; font-weight: 400;  }
@keyframes ani {
    0%{bottom:90px;}
    50%{bottom: 105px;}
    100% {bottom:90px;}
}

/* sns */
#main_vis .sns {position: absolute; right:126px; bottom: 126px; }
#main_vis .sns li {margin-bottom:13px;}
#main_vis .sns li:last-child {margin-bottom: 0;}
#main_vis .sns li a {display: flex; align-items: center; justify-content: center; transition: all .3s; width: 55px; height: 55px; background:#999; border-radius: 50%;
 box-shadow: 2.2px 2px 5.8px 0.2px rgba(0, 0, 0, 0.21);}
#main_vis .sns li a.shop:hover {background-color: #c82124; }
#main_vis .sns li a.blog:hover {background-color: #2fb14a; }
#main_vis .sns li a.youtube:hover {background-color: #e01616; }
#main_vis .sns li a.kakao:hover {background-color: #ffd800; }




@media screen and (max-width:1599px) {
    #main_vis .line_box {width: calc(100% - 120px);}
    .main_typo_wrap {width: calc(100% - 120px);}

    #main_vis .progress_wr {right: 18px;}
    #scroll_down a {right: 9px;}

}

@media screen and (max-width: 1024px) {
    .main_typo_wrap {padding:0 40px; text-align: center; width: 100%;}
    #main_vis {min-height: 0; height: 700px; }
    #main_vis_slider .main_slide {min-height: 0; height: 700px; align-items: center; background-position: 80% 50%;}
    #main_vis_slider .main_slide::before { background-color: rgba(0, 0, 0, .2);}
    #scroll_down {display: none;}
    #main_vis .line_box {  width: calc(100% - 60px); height: calc(100% - 120px); top:60px;}

    /* main_typo */
    .main_typo i {left: 50%;  transform: translateX(-50%); display: block; width: 70px; top:-40px;}
    .main_typo h2 {font-size:45px; margin:0 0 20px;text-shadow: -1px 0 rgba(0,0,0,.2), 0 1px rgba(0,0,0,.2), 1px 0 rgba(0,0,0,.2), 0 -1px rgba(0,0,0,.2);}
    .main_typo h2 b {font-size: 60px; }
    .main_typo p {font-size: 17px; }


    /* progress */
    #main_vis .progress_wr {right:auto;left: 50%;  transform: translateX(-50%);  bottom:20px; width: 100%; max-width:500px; padding: 0;}
    #main_vis .progress_wr > .flex {display: flex; align-items: center; justify-content: center; flex-direction: row; padding: 0 25px;}
    .bar_wr {width:100%; max-width: 360px; height: 2px; margin:0 20px;}
    .redbar { width:1px; height:2px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; }
    .redbar.redbar_active { width:100%; height:100%; transition-property: width; }
    .redbar.redbar_remove {width:0; height:100%; transition-property: width;}
    #main_vis .num_wr h2 {font-size: 16px;}

    /* arrow */
    #main_vis .arrows {flex-direction: row; }
    #main_vis .arrows .slick-arrow {  transform: rotate(-90deg);}



}

@media screen and (max-width: 640px) {
    #main_vis {height: 550px;}
    #main_vis_slider .main_slide {height: 550px;}
    .main_typo_wrap {padding:0 30px; }
    #main_vis .line_box {  width: calc(100% - 40px);  }

    /* main_typo */
    .main_typo i { width: 60px; top:-40px;}
    .main_typo h2 {font-size:32px; margin:0 0 15px;}
    .main_typo h2 b {font-size: 42px; }
    .main_typo p {font-size: 15px; line-height: 1.6;}

    .bar_wr {  margin:0 15px;}
    #main_vis .progress_wr {width: calc(100% - 40px);}

}



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

}