@charset "utf-8";

/* 키비주얼 배경이미지 & 텍스트 기본 설정*/
.main_vis { width: 100%; height: 100vh; overflow: hidden; position: relative; }
/* .main_vis .inner { height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; } */

.main_vis .swiper-container .vis { width: 100%; height: 100vh; position: relative; overflow: hidden; }
.main_vis .swiper-container .vis .vis_bg { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; }
.main_vis .swiper-container .vis .vis_bg::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.15); z-index: 1; }

.main_vis .swiper-container .vis .vis_bg .video-wrap.wid-on { width: 100vw; height: calc((100vw / 16) * 9); }
.main_vis .swiper-container .vis .vis_bg .video-wrap.hgt-on { width: 177.7778vh; height: 100vh;  }
.main_vis .swiper-container .vis .vis_bg .video-wrap video { width: 100%; height: 100%; }

    /* Parallax-slide 기본설정 */
    :after, :before, * { box-sizing: border-box; }

    .main_vis .parallax_slide .vis_wrap { width: 100%; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 0; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition:all .4s ease; }
    .main_vis .parallax_slide .vis_wrap .swiper-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
    .main_vis .parallax_slide .vis_wrap .swiper-container .swiper-slide { overflow: hidden; color: #fff; }
    .main_vis .parallax_slide .vis .vis_bg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .main_vis .parallax_slide .inner.parallax-box { top: 0; left: 18.7%; }

    
    /* 블라인드 슬라이드 기본설정 */
    .main_vis .blind_slide2 .vis_wrap { width: 100%; height: 100vh; position: relative; }
    .main_vis .blind_slide2 .vis_wrap .vis { background-color: #000; position: relative; }
    .main_vis .blind_slide2 .vis_wrap .mask_box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
    
    .main_vis .blind_slide2 .vis_wrap .vis .mask { position: absolute; width: 0%; height: 100%; top: 0; overflow: hidden; }
    .main_vis .blind_slide2 .vis_wrap .vis .mask span { display: block; width: 100vw; height: 100%; position: absolute; top: 0; right: 0%; }
    
    .main_vis .blind_slide2 .vis_wrap .vis1 .mask span { background: url("/resources/img/main/main_vis_sam5.jpg")no-repeat left center/cover; }
    .main_vis .blind_slide2 .vis_wrap .vis2 .mask span { background: url("/resources/img/main/main_vis_sam6.jpg")no-repeat left center/cover; }
    .main_vis .blind_slide2 .vis_wrap .vis3 .mask span { background: url("/resources/img/main/main_vis_sam7.jpg")no-repeat left center/cover; }
    
    .main_vis .blind_slide2 .vis_wrap .vis .mask_a { right: 75%; transition: all .4s ease-in-out .3s; }
    .main_vis .blind_slide2 .vis_wrap .vis .mask_b { right: 50%; transition: all .4s ease-in-out .5s; }
    .main_vis .blind_slide2 .vis_wrap .vis .mask_c { right: 25%; transition: all .4s ease-in-out .7s; }
    .main_vis .blind_slide2 .vis_wrap .vis .mask_d { right: 0%; transition: all .4s ease-in-out .9s; }
    
    .main_vis .blind_slide2 .vis_wrap .vis .mask_a span { transform: translateX(75%); } 
    .main_vis .blind_slide2 .vis_wrap .vis .mask_b span { transform: translateX(50%); }
    .main_vis .blind_slide2 .vis_wrap .vis .mask_c span { transform: translateX(25%); }
    .main_vis .blind_slide2 .vis_wrap .vis .mask_d span { transform: translateX(0%); }
    
    .main_vis .blind_slide2 .vis_wrap .swiper-container .vis.swiper-slide .mask_box { transform: scale(1.1); }
    .main_vis .blind_slide2 .vis_wrap .swiper-container .vis.swiper-slide-active .mask_box { transform: scale(1); animation-name: zoomIn; animation-duration:4s; animation-fill-mode: forwards; }
    .main_vis .blind_slide2 .vis_wrap .swiper-container .vis.swiper-slide-active .mask { width: calc(25% + 1px); }
    


/* 스와이퍼 컨트롤 버튼들*/
.main_vis .swiper-control { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; z-index: 5; }

    /*네비게이션 화살표*/
    .main_vis .swiper-control .swiper-arrow-wrap .swiper-arrow.swiper-button-prev { background-image: url('/resources/img/common/arr_prev.png'); }
    .main_vis .swiper-control .swiper-arrow-wrap .swiper-arrow.swiper-button-next { background-image: url('/resources/img/common/arr_next.png'); }

        /* swiper arrow : 양 끝에 화살표(wing-arr) */
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr { width: 100vw; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr .swiper-arrow { width: 35px; height: 75px; background-color: rgba(255,255,255,0.4); background-repeat: no-repeat; background-position: 4px center; background-size: 25px; margin-top: 0; top: 0; transition: all .5s ease; opacity: 0.5; }
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr .swiper-arrow.swiper-button-prev { left: -35px; }
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr .swiper-arrow.swiper-button-next { right: -35px; }
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr:hover .swiper-arrow.swiper-button-prev { left: 30px; opacity: 1; }
        .main_vis .swiper-control .swiper-arrow-wrap.wing-arr:hover .swiper-arrow.swiper-button-next { right: 30px; opacity: 1; }

        /* swiper arrow : 같이 모여있는 화살표(wrap-arr) */
        .main_vis .swiper-control .swiper-arrow-wrap.wrap-arr { width: 106px; height: 48px; position: absolute; top: 40%; right: 75px; } 
        .main_vis .swiper-control .swiper-arrow-wrap.wrap-arr .swiper-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #fff; background-repeat: no-repeat; background-position: center; background-size: 14px; margin-top: 0; top: 0; }
        .main_vis .swiper-control .swiper-arrow-wrap.wrap-arr .swiper-arrow.swiper-button-prev { left: 0; }
        .main_vis .swiper-control .swiper-arrow-wrap.wrap-arr .swiper-arrow.swiper-button-next { right: 0; }
        .main_vis .swiper-control .swiper-arrow-wrap.wrap-arr .swiper-arrow:hover { background-color: rgba(255, 255, 255, 0.4); }


    /* 페이지네이션 */
    .main_vis .swiper-control .swiper-pagination { }
        /*siwper 숫자*/
        .main_vis .swiper-control .swiper-pagination.pagination_fra { font-size: 40px; font-weight: 500; color:#fff; bottom: 10%; left: 0; }
        .main_vis .swiper-control .pagination_fra span { display: inline-block; }
        .main_vis .swiper-control .pagination_fra span.swiper-pagination-current { font-size: 50px; color:#f5a500; }
        
        /* swiper 불렛 */
        .main_vis .swiper-control .swiper-pagination.pagination_bul { bottom: 11.2%; left: 12%; }
        .main_vis .swiper-control .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; margin-right: 50px; position: relative;text-indent: -9999999px; opacity: 1; }
        .main_vis .swiper-control .swiper-pagination-bullet:last-child { margin-right: 0; }
        .main_vis .swiper-control .swiper-pagination-bullet-active { background:#f5a500; }

        .main_vis .slide_fd .swiper-control .swiper-pagination-bullet { width: 12px; height: 12px; margin-right: 30px; background: rgba(255,255,255,0.8); }
        .main_vis .slide_fd .swiper-control .swiper-pagination-bullet-active { background:#f5a500; }

    /* 프로그래스바 기본 설정 */
    .main_vis .progress-wrap { width: 60%; max-width: 400px; position: absolute; top: 35%; right: 0; transform: translateY(-50%); }
    .main_vis .kv-progress-bar { width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.4); }
    .main_vis .kv-progress-bar p { width: 100%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 1; transform-origin: left top;  }
    /* .main_vis .kv-progress-bar p::after { content: ''; width: 100%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 1; transform-origin: left top; } */

        /* 슬라이드 될때마다(슬라이드 내에 있을 때) */
        .main_vis .vis.swiper-slide-active .kv-progress-bar p,
        /* 슬라이드 될때마다(슬라이드 밖에 있을 때:가로 슬라이드 시 자리 고정을 위해 사용) */
        .main_vis .swiper-control .ani-bar .kv-progress-bar p { -webkit-transform: scaleX(0); transform: scaleX(0); animation-name: kvProgressBar; animation-duration: 4.5s; animation-fill-mode: forwards; animation-delay: 0.3s; animation-iteration-count: 1; }

        @-webkit-keyframes kvProgressBar{
            0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
            100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
        }
        @keyframes kvProgressBar {
            0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
            100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
        }        


        /* 슬라이드 갯수대로 채워지는 프로그래스바(기본 API) */
        .main_vis .swiper-control .swiper-pagination-progressbar.pagination_bar { width: 480px; height: 2px; top: 33%; right: 0; background: rgba(255, 255, 255, 0.35); }
        .main_vis .swiper-control .swiper-pagination-progressbar.pagination_bar .swiper-pagination-progressbar-fill { background: #fff; }

    /*프로그래스 써클 기본 설정*/
    .main_vis .swiper-container .vis .kv-progress-circle { width: 100%; height: 50px; position: absolute; top: 610px; }
    .main_vis .swiper-container .vis .kv-progress-circle .circle { display: block; width: 50px; height: 50px; position: absolute; left: 0; top: 0; }
    .main_vis .swiper-container .vis .kv-progress-circle .circle:after { content: ""; display: block; clear: both; }

    .main_vis .swiper-container .vis .kv-progress-circle .circle i { width: 50%; height: 100%; float: left;  position: relative; overflow: hidden; }
    .main_vis .swiper-container .vis .kv-progress-circle .circle i::before { content:''; position: absolute; width: 200%; right: 0; top: 0; bottom: 0; border: 3px solid #fff; border-radius: 100%; box-sizing: border-box; clip: rect(0px,50px,50px,25px); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
    .main_vis .swiper-container .vis .kv-progress-circle .circle i:first-child::before { left:0; right: auto; clip: rect(0,25px,50px,0); }

        /* 슬라이드 될때마다(슬라이드 내에 있을 때) */
        .main_vis .swiper-container .vis.swiper-slide-active .kv-progress-circle .circle i::before { -webkit-animation: kvCircleR 3500ms linear both; animation: kvCircleR 3500ms linear both; }
        .main_vis .swiper-container .vis.swiper-slide-active .kv-progress-circle .circle i:first-child::before { -webkit-animation-name: kvCircleL; animation-name: kvCircleL; }

        /*슬라이드 컨트롤에 있을 때*/
        .main_vis .swiper-pagination-bullet .circle { width: 50px; height: 50px; display: block; position: absolute; left: 50%; top: 50%; right: 0; bottom: 0; transform: translate(-50%,-50%); }
        .main_vis .swiper-pagination-bullet .circle:after { content: ""; display: block; clear: both; }

        .main_vis .swiper-pagination-bullet .circle i { width: 50%; height: 100%; position: relative; float: left; overflow:hidden; }
        .main_vis .swiper-pagination-bullet .circle i::before { content:''; width: 200%; position: absolute; right: 0; top: 0; bottom:0; border: 3px solid #f5a500; border-radius:100%; box-sizing:border-box; clip: rect(0px,50px,50px,25px); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
        .main_vis .swiper-pagination-bullet .circle i:first-child::before { left:0; right: auto; clip: rect(0,25px,50px,0); }

        .main_vis .swiper-pagination-bullet.swiper-pagination-bullet-active::before { background:#f5a500; }
        .main_vis .swiper-pagination-bullet.swiper-pagination-bullet-active .circle i::before { -webkit-animation:kvCircleR 3500ms linear both; animation:kvCircleR 3500ms linear both; }
        .main_vis .swiper-pagination-bullet.swiper-pagination-bullet-active .circle i:first-child::before { -webkit-animation-name:kvCircleL; animation-name:kvCircleL; }

        @-webkit-keyframes kvCircleL{
            0%, 50%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}
            100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}
        }
        @-webkit-keyframes kvCircleR{
            0%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}
            50%,100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}
        }
        @keyframes kvCircleL{
            0%, 50%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}
            100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}
        }
        @keyframes kvCircleR{
            0%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}
            50%,100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}
        }


    /* 플레이,스탑 버튼 */
    .main_vis .swiper-playstop-btn { width: 50px; height: 50px; position: absolute; top: 40%; right: 0; }
    .main_vis .swiper-playstop-btn .playstop-btn { width: 100%; height: 100%; border-radius: 50%; border: 1px solid #fff; cursor: pointer; position: absolute; top: 0; left: 0; display: none; }
    .main_vis .swiper-playstop-btn .swiper-btn-play { background: url('/resources/img/main/slide_ico.png') no-repeat 19px -26px/16px; }
    .main_vis .swiper-playstop-btn .swiper-btn-stop { background: url('/resources/img/main/slide_ico.png') no-repeat center 15px/16px; }
    .main_vis .swiper-playstop-btn .swiper-btn-play.active, 
    .main_vis .swiper-playstop-btn .swiper-btn-stop.active { display: block; } 


    /* 기본 텍스트 위치*/
    .swiper-container .vis_txt { width: 100%; color: #fff; position: absolute; bottom: 0; left: 0; z-index: 1; }
    /* .swiper-container .vis_txt.fixed_txt { padding-top: 330px; } */

    /* 배경 & 텍스트 이중 스와이퍼 시 */
    .swiper-container.main-txt-slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
    .swiper-container.main-txt-slide .vis { width: 100%; height: 100%; opacity: 0 !important; }
    .swiper-container.main-txt-slide .vis.swiper-slide-active { opacity: 1 !important; }
    .swiper-container.main-txt-slide .vis_txt { top: 45%; }
    .swiper-container.main-txt-slide .vis .vis_txt .each-tx-wrap .txt-wrap p { margin-top: 0; }


    /* 블록 텍스트 설정 */
    .swiper-container .vis_txt .tx_wrap .sub-tit { font: 400 18px/100% 'Pretendard'; margin-bottom: 20px; }
    .swiper-container .vis_txt .tx_wrap .tit { width: 100%; max-width: 385px; height: 105px; position: relative; margin-bottom: 30px; }
    .swiper-container .vis_txt .tx_wrap .txt { width: 100%; font: 300 88px/100% 'Arial';  position: relative; margin-bottom: 100px; }

    /* 한글자씩 기본 설정*/ 
    .swiper-container .vis .vis_txt .each-tx-wrap .tit-wrap p { display: inline-block; font-size: 60px; font-weight: 700; font-family: 'Roboto', sans-serif;  text-align: left; margin-right: 15px; padding-bottom: 20px; overflow: hidden; }
    .swiper-container .vis .vis_txt .each-tx-wrap .txt-wrap p { display: inline-block; font-size: 24px; font-weight: 400; font-family: 'Roboto', sans-serif; padding-left: 10px; margin-top: -10px; overflow: hidden; padding-bottom: 20px; }
    .swiper-container .vis .vis_txt .each-tx-wrap .txt-wrap p:first-child { padding-left: 0; }

    span.txt-blind { display: inline-block; color: transparent; position: relative; float: left; margin-right: 2px; }
    span.txt-ani { color: #fff; text-shadow: 3px 3px 7px #00000099; position: absolute; top: 0; left: 0; }


@media screen and (max-width:1024px){
    .swiper-container .vis_txt .tx_wrap .tit { max-width: 315px; height: auto; margin-bottom: 20px; }
    .swiper-container .vis_txt .tx_wrap .txt { font-size: 70px; margin-bottom: 80px; }

}
@media screen and (max-width:768px){
    .main_vis .swiper-container .vis .vis_bg .video-wrap.hgt-on { width: 100%; }
    .main_vis .swiper-container .vis .vis_bg .video-wrap video { object-fit: cover; }
    .main_vis { width: 100%; height: 75vh; }
    .main_vis .blind_slide2 .vis_wrap { width: 100%; height: 75vh; }
    .main_vis .swiper-container .vis { height: 75vh; }

    .swiper-container .vis_txt .tx_wrap .tit { max-width: 240px; height: auto; margin-bottom: 12px; }
    .swiper-container .vis_txt .tx_wrap .txt { font-size: 50px; margin-bottom: 50px; }
}
@media screen and (max-width:500px){
    .swiper-container .vis_txt .tx_wrap .tit { max-width: 200px; height: auto; margin-bottom: 12px; }
    .swiper-container .vis_txt .tx_wrap .txt { font-size: 40px; margin-bottom: 40px; }
}




    
/* 키비주얼 슬라이드 될때마다 이미지 효과 */
    /* 서서히 줄어듬 : img-zoomOut */
    .swiper-container .vis .vis_bg.img-zoomOut { -webkit-transform: scale(1); transform: scale(1); }   /* 100%일때 크기 */
    .swiper-container .vis.swiper-slide-active .vis_bg.img-zoomOut { -webkit-transform: scale(1.1); transform: scale(1.1); animation-name: kvZoomOut; animation-duration: 4.7s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvZoomOut{
        0% { -webkit-transform: scale(1.1); transform: scale(1.1); }
        100% { -webkit-transform: scale(1); transform: scale(1); }
    }
    @keyframes kvZoomOut {
        0% { -webkit-transform: scale(1.1); transform: scale(1.1); }
        100% { -webkit-transform: scale(1); transform: scale(1); }  

    }

    /* 서서히 늘어남 : img-zoomIn */
    .swiper-container .vis .vis_bg.img-zoomIn { -webkit-transform: scale(1.1); transform: scale(1.1);  }  /* 100%일때 크기 */
    .swiper-container .vis.swiper-slide-active .vis_bg.img-zoomIn { -webkit-transform: scale(1); transform: scale(1);  animation-name: kvZoomIn; animation-duration: 4.7s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvZoomIn {
    0% { -webkit-transform: scale(1); transform: scale(1); }
        100% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    }
    @keyframes kvZoomIn {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        100% { -webkit-transform: scale(1.1); transform: scale(1.1); }   
    }

    /* 이미지 틸다운 : img-tiltDown */
    .swiper-container .vis .vis_bg.img-tiltDown { background: transparent; }
    .swiper-container .vis .vis_bg.img-tiltDown::after { content: ''; width: 100%; height: 120%; position: absolute; top: 0; left: 0; transform: translateY(-6%); }

        .swiper-container .vis1 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_vis_sam1.jpg")no-repeat center/cover; }
        .swiper-container .vis2 .vis_6bg.img-tiltDown::after { background: url("/resources/img/main/main_vis_sam2.jpg")no-repeat center/cover; }
        .swiper-container .vis3 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_vis_sam3.jpg")no-repeat center/cover; }
        .swiper-container .vis4 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_vis_sam4.jpg")no-repeat center/cover; }

    .swiper-container .vis.swiper-slide-active .vis_bg.img-tiltDown::after { transform: translateY(0); animation-name: kvTiltDown; animation-duration: 4.7s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTiltDown {
        0% { -webkit-transform: translateY(0); transform: translateY(0); }
        100% { -webkit-transform: translateY(-6%); transform: translateY(-6%); }
    }
    @keyframes kvTiltDown {
        0% { -webkit-transform: translateY(0); transform: translateY(0); }
        100% { -webkit-transform: translateY(-6%); transform: translateY(-6%); }
    }

    /* 이미지 틸업 : img-tiltUp */
    .swiper-container .vis .vis_bg.img-tiltUp { background: transparent; }
    .swiper-container .vis .vis_bg.img-tiltUp::after { content: ''; width: 100%; height: 120%; position: absolute; bottom: 0; left: 0; transform: translateY(6%); }
        .swiper-container .vis1 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_vis_sam1.jpg")no-repeat center/cover; }
        .swiper-container .vis2 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_vis_sam2.jpg")no-repeat center/cover; }
        .swiper-container .vis3 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_vis_sam3.jpg")no-repeat center/cover; }
        .swiper-container .vis4 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_vis_sam4.jpg")no-repeat center/cover; }
    .swiper-container .vis.swiper-slide-active .vis_bg.img-tiltUp::after { transform: translateY(-6%); animation-name: kvTiltUp; animation-duration: 4.7s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTiltUp {
        0% { -webkit-transform: translateY(0); transform: translateY(0); }
        100% { -webkit-transform: translateY(6%); transform: translateY(6%); }
    }
    @keyframes kvTiltUp {
        0% { -webkit-transform: translateY(0); transform: translateY(0); }
        100% { -webkit-transform: translateY(6%); transform: translateY(6%); }
    }

    /* 서서히 밝아짐 : img-lightUp */
    .swiper-container .vis .vis_bg.img-lightUp::after { content: ''; display: block; width: 100%; height: 100%; background-color: #000; opacity: 0; position: absolute; top: 0; left: 0; }
    .swiper-container .vis.swiper-slide-active .vis_bg.img-lightUp::after { opacity: 90%; animation-name: kvLightUp; animation-duration: 2.5s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvLightUp {
        0% { opacity: 90%; }
        100% { opacity: 0; }
    }
    @keyframes kvLightUp {
        0% { opacity: 90%; }
        100% { opacity: 0; }
    }

    


/* 키비주얼 슬라이드 될때마다 텍스트 효과 */
    /* 페이드인 업 : slog-fadeinUp */
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-fadeinUp { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; animation-name: kvFadeInUp; animation-duration: 0.8s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-fadeinUp { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; animation-name: kvFadeInUp; animation-duration: 0.8s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvFadeInUp {
        0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; }
        100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    }
    @keyframes kvFadeInUp {
        0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; }
        100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    }


    /* 페이드인 다운 : slog-fadeinDown */
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-fadeinDown { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; animation-name: kvFadeInDown; animation-duration: 0.8s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-fadeinDown { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; animation-name: kvFadeInDown; animation-duration: 0.8s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvFadeInDown {
        0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; }
        100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    }
    @keyframes kvFadeInDown {
        0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; }
        100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    }


    /* 왼쪽에서 나타나기 : slog-leftIn */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-leftIn { overflow: hidden; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-leftIn { overflow: hidden; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-leftIn span { -webkit-transform: translateX(-580px); transform: translateX(-580px); animation-name: kvTitLeftIn; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-leftIn span { -webkit-transform: translateX(-150px); transform: translateX(-150px); animation-name: kvTxtLeftIn; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvTitLeftIn {
        0% { -webkit-transform: translateX(-580px); transform: translateX(-580px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0); }
    }
    @-webkit-keyframes kvTxtLeftIn {
        0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0);}
    }

    @keyframes kvTitLeftIn {
        0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0); }
    }
    @keyframes kvTxtLeftIn {
        0% { -webkit-transform: translateX(-150px); transform: translateX(-150px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0);}
    }


    /* 안보이다가 내려오기 : slog-slideDown */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-slideDown { overflow: hidden; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-slideDown { overflow: hidden; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-slideDown span { -webkit-transform: translateY(-150px); transform: translateY(-150px); animation-name: kvTitSlideDw; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-slideDown span { -webkit-transform: translateY(-50px); transform: translateY(-50px); animation-name: kvTxtSlideDw; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvTitSlideDw {
        0% { -webkit-transform: translateY(-150px); transform: translateY(-150px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtSlideDw {
        0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    @keyframes kvTitSlideDw {
        0% { -webkit-transform: translateY(-150px); transform: translateY(-150px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtSlideDw {
        0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }


    /* 안보이다가 올라오기 : slog-slideUp */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-slideUp { overflow: hidden; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-slideUp { overflow: hidden; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-slideUp span { -webkit-transform: translateY(100px); transform: translateY(100px); animation-name: kvTitSlideUp; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-slideUp span { -webkit-transform: translateY(50px); transform: translateY(50px); animation-name: kvTxtSlideUp; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvTitSlideUp {
        0% { -webkit-transform: translateY(100px); transform: translateY(100px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtSlideUp {
        0% { -webkit-transform: translateY(50px); transform: translateY(50px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    @keyframes kvTitSlideUp {
        0% { -webkit-transform: translateY(100px); transform: translateY(100px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtSlideUp {
        0% { -webkit-transform: translateY(50px); transform: translateY(50px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }


    /* 기울어져서 올라오기 : slog-slideRotateUp */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-slideRotateUp { overflow: hidden; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-slideRotateUp { overflow: hidden; }
    
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-slideRotateUp span { width: fit-content; color: transparent; text-shadow: none; position: relative; -webkit-perspective: 200px; perspective: 200px; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-slideRotateUp span { width: fit-content; color: transparent; text-shadow: none; position: relative; -webkit-perspective: 200px; perspective: 200px; }

    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-slideRotateUp span::after { content: 'We are all Growing'; display: block; width: 100%; height: 100%; color: #fff; position: absolute; top: 0; left: 0; text-shadow: 3px 3px 7px #00000099; transform-origin: 0 100% 0; -webkit-transform: rotateX(45deg) translateY(100px); transform: rotateX(45deg) translateY(100px); animation-name: kvTitSlideRotateUp; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.6s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-slideRotateUp span::after { content: 'John Gruber'; display: block; width: 100%; height: 100%; color: #fff; position: absolute; top: 0; left: 0; text-shadow: 3px 3px 7px #00000099; transform-origin: 0 100% 0; -webkit-transform: rotateX(45deg) translateY(50px); transform: rotateX(45deg) translateY(50px); animation-name: kvTitSlideRotateUp; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @-webkit-keyframes kvTitSlideRotateUp {
        0% { -webkit-transform: rotateX(45deg) translateY(100px); transform: rotateX(45deg) translateY(100px); }
        100% { -webkit-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    }
    @-webkit-keyframes kvTxtSlideRotateUp {
        0% { -webkit-transform: rotateX(45deg) translateY(50px); transform: rotateX(45deg) translateY(50px); }
        100% { -webkit-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    }

    @keyframes kvTitSlideRotateUp {
        0% { -webkit-transform: rotateX(45deg) translateY(100px); transform: rotateX(45deg) translateY(100px); }
        100% { -webkit-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    }
    @keyframes kvTxtSlideRotateUp {
        0% { -webkit-transform: rotateX(45deg) translateY(50px); transform: rotateX(45deg) translateY(50px); }
        100% { -webkit-transform: rotateX(0deg) translateY(0); transform: rotateX(0deg) translateY(0); }
    }
    

    /* 밑줄 혹은 테이핑 : slog-taping */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-taping span::after { content: ''; width: 100%; height: 35px; background-color: #d97b7b; transform-origin: left top; position: absolute; bottom: -10px; left: 0; z-index: -1; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-taping span::after { content: ''; width: 100%; height: 15px; background-color: #d97b7b; transform-origin: left top; position: absolute; bottom: -5px; left: 0; z-index: -1; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-taping span::after { -webkit-transform: scaleX(0); transform: scaleX(0); animation-name: kvTitTaping; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-taping span::after { -webkit-transform: scaleX(0); transform: scaleX(0); animation-name: kvTitTaping; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; } 

    @-webkit-keyframes kvTitTaping {
        0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
        100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
    }
    @-webkit-keyframes kvTxtTaping {
        0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
        100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
    }
    @keyframes kvTitTaping {
        0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
        100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
    }
    @keyframes kvTxtTaping {
        0% { -webkit-transform: scaleX(0); transform: scaleX(0); }
        100% { -webkit-transform: scaleX(1); transform: scaleX(1); }
    }

    /* 가려졌다 서서히 보이기 : slog-leftOpen */
    /* span의 width는 픽셀로 고정되어있어야함 */
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-leftOpen { width: 0; overflow: hidden; position: relative; }
    .swiper-container .vis .vis_txt .tx_wrap .tit.slog-leftOpen span { width: 700px; position: absolute; top: 0; left: 0; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-leftOpen { width: 0; overflow: hidden; position: relative; padding-left: 0; }
    .swiper-container .vis .vis_txt .tx_wrap .txt.slog-leftOpen span { width: 250px; position: absolute; top: 0; left: 0; }

    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .tit.slog-leftOpen { width: 0; animation-name: kvTitLfOpen; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }
    .swiper-container .vis.swiper-slide-active .vis_txt .tx_wrap .txt.slog-leftOpen { width: 0; animation-name: kvTxtLfOpen; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 0.9s; }

    @keyframes kvTitLfOpen {
        0% { width: 0; }
        100% { width: 550px; }
    }
    @keyframes kvTxtLfOpen {
        0% { width: 0; }
        100% { width: 150px; }
    }





    /* 한글자씩 내려오기 :slog-eachDown */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-eachDown .tit-wrap p span.txt-ani { transform: translateY(-150px); animation-name: kvTitEachDw; animation-duration: 2s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-eachDown .txt-wrap p span.txt-ani { transform: translateY(-60px); animation-name: kvTxtEachDw; animation-duration: 1.6s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitEachDw {
        0% {-webkit-transform: translateY(-150px); transform: translateY(-150px); }    
        40% { -webkit-transform: translateY(20px); transform: translateY(20px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtEachDw {
        0% { -webkit-transform: translateY(-60px); transform: translateY(-60px); }    
        40% { -webkit-transform: translateY(10px); transform: translateY(10px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    @keyframes kvTitEachDw {
        0% {-webkit-transform: translateY(-150px); transform: translateY(-150px); }    
        40% { -webkit-transform: translateY(20px); transform: translateY(20px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtEachDw {
        0% { -webkit-transform: translateY(-60px); transform: translateY(-60px); }    
        40% { -webkit-transform: translateY(10px); transform: translateY(10px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }


    /* 한글자씩 올라오기 : slog-eachUp */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-eachUp .tit-wrap p span.txt-ani { transform: translateY(-150px); animation-name: kvTitEachUp; animation-duration: 2s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-eachUp .txt-wrap p span.txt-ani { transform: translateY(-60px); animation-name: kvTxtEachUp; animation-duration: 1.6s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitEachUp {
        0% { -webkit-transform: translateY(150px); transform: translateY(150px); }    
        40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtEachUp {
        0% { -webkit-transform: translateY(60px); transform: translateY(60px); }    
        40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    @keyframes kvTitEachUp {
        0% { -webkit-transform: translateY(150px); transform: translateY(150px); }    
        40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtEachUp {
        0% { -webkit-transform: translateY(60px); transform: translateY(60px); }    
        40% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    /* 한글자씩 왼쪽에 모이기 : slog-assem  */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-assem .tit-wrap p span.txt-ani { -webkit-transform: translateX(150px); transform: translateX(150px); opacity: 0; animation-name: kvTitAssemble; animation-duration: 1.6s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-assem .txt-wrap p span.txt-ani { -webkit-transform: translateX(60px); transform: translateX(60px); opacity: 0; animation-name: kvTxtAssemble; animation-duration: 4s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitAssemble {
        0% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }    
        100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    }
    @-webkit-keyframes kvTxtAssemble {
        0% { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; }    
        100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    }

    @keyframes kvTitAssemble {
        0% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }   
        100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    }
    @keyframes kvTxtAssemble {
        0% { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; }     
        100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
    }


    /* 어긋나게 모이기 : slog-zigzag */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-zigzag .tit-wrap p span.txt-ani.t-odd { -webkit-transform: translateY(-80px); transform: translateY(-80px); animation-name: kvTitZigzagOdd; animation-duration: 1.6s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-zigzag .tit-wrap p span.txt-ani.t-even { -webkit-transform: translateY(80px); transform: translateY(80px); animation-name: kvTitZigzagEven; animation-duration: 1.6s; animation-fill-mode: forwards; }

    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-zigzag .txt-wrap p span.txt-ani.t-odd { -webkit-transform: translateY(-40px); transform: translateY(-40px); animation-name: kvTxtZigzagOdd; animation-duration: 1.6s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-zigzag .txt-wrap p span.txt-ani.t-even { -webkit-transform: translateY(40px); transform: translateY(40px); animation-name: kvTxtZigzagEven; animation-duration: 1.6s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitZigzagOdd {
        0% { -webkit-transform: translateY(-80px); transform: translateY(-80px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTitZigzagEven {
        0% { -webkit-transform: translateY(80px); transform: translateY(80px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtZigzagOdd {
        0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @-webkit-keyframes kvTxtZigzagEven {
        0% { -webkit-transform: translateY(40px); transform: translateY(40px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }

    @keyframes kvTitZigzagOdd {
        0% { -webkit-transform: translateY(-80px); transform: translateY(-80px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTitZigzagEven {
        0% { -webkit-transform: translateY(80px); transform: translateY(80px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtZigzagOdd {
        0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes kvTxtZigzagEven {
        0% { -webkit-transform: translateY(40px); transform: translateY(40px); }    
        100% { -webkit-transform: translateY(0); transform: translateY(0); }
    }


    /* 커지면서 등장 : slog-tobig */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-tobig .tit-wrap p span.txt-ani { -webkit-transform: scale(0.75); transform: scale(0.75); opacity: 0; animation-name: kvTitTobig; animation-duration: 1.6s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-tobig .txt-wrap p span.txt-ani { -webkit-transform: scale(0.75); transform: scale(0.75); opacity: 0; animation-name: kvTxtTobig; animation-duration: 1.6s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitTobig {
        0% { -webkit-transform: scale(0.75); transform: scale(0.75);  opacity: 0; }    
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }
    @-webkit-keyframes kvTxtTobig {
        0% { -webkit-transform: scale(0.75); transform: scale(0.75);  opacity: 0; }    
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }

    @keyframes kvTitTobig {
        0% { -webkit-transform: scale(0.75); transform: scale(0.75);  opacity: 0; }   
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }
    @keyframes kvTxtTobig {
        0% { -webkit-transform: scale(0.75); transform: scale(0.75);  opacity: 0; }     
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }


    /* 작아지면서 등장 : slog-tosmall */
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-tosmall .tit-wrap p span.txt-ani { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; animation-name: kvTitTosmall; animation-duration: 1.6s; animation-fill-mode: forwards; }
    .swiper-container .vis.swiper-slide-active .vis_txt .each-tx-wrap.slog-tosmall .txt-wrap p span.txt-ani { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; animation-name: kvTxtTosmall; animation-duration: 1.6s; animation-fill-mode: forwards; }

    @-webkit-keyframes kvTitTosmall {
        0% { -webkit-transform: scale(1.2); transform: scale(1.2);  opacity: 0; }    
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }
    @-webkit-keyframes kvTxtTosmall {
        0% { -webkit-transform: scale(1.2); transform: scale(1.2);  opacity: 0; }    
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }

    @keyframes kvTitTosmall {
        0% { -webkit-transform: scale(1.2); transform: scale(1.2);  opacity: 0; }   
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }
    @keyframes kvTxtTosmall {
        0% { -webkit-transform: scale(1.2); transform: scale(1.2);  opacity: 0; }     
        100% { -webkit-transform: scale(1); transform: scale(1);  opacity: 1; }
    }

    /* 한글자씩 효과에서 애니메이션 딜레이 차이(타이틀) */
    .each-tx-wrap .tit-wrap p span.txt-ani.time1 { animation-delay: 0.6s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time2 { animation-delay: 0.65s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time3 { animation-delay: 0.7s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time4 { animation-delay: 0.75s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time5 { animation-delay: 0.8s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time6 { animation-delay: 0.85s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time7 { animation-delay: 0.9s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time8 { animation-delay: 0.95s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time9 { animation-delay: 1s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time10 { animation-delay: 1.05s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time11 { animation-delay: 1.1s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time12 { animation-delay: 1.15s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time13 { animation-delay: 1.2s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time14 { animation-delay: 1.25s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time15 { animation-delay: 1.3s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time16 { animation-delay: 1.35s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time17 { animation-delay: 1.4s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time18 { animation-delay: 1.45s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time19 { animation-delay: 1.5s; }
    .each-tx-wrap .tit-wrap p span.txt-ani.time20 { animation-delay: 1.55s; }

    /* 한글자씩 효과에서 애니메이션 딜레이 차이(서브) */
    .each-tx-wrap .txt-wrap p span.txt-ani.time1 { animation-delay: 0.6s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time2 { animation-delay: 0.65s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time3 { animation-delay: 0.7s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time4 { animation-delay: 0.75s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time5 { animation-delay: 0.8s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time6 { animation-delay: 0.85s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time7 { animation-delay: 0.9s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time8 { animation-delay: 0.95s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time9 { animation-delay: 1s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time10 { animation-delay: 1.05s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time11 { animation-delay: 1.1s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time12 { animation-delay: 1.15s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time13 { animation-delay: 1.2s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time14 { animation-delay: 1.25s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time15 { animation-delay: 1.3s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time16 { animation-delay: 1.35s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time17 { animation-delay: 1.4s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time18 { animation-delay: 1.45s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time19 { animation-delay: 1.5s; }
    .each-tx-wrap .txt-wrap p span.txt-ani.time20 { animation-delay: 1.55s; }