@charset "utf-8";

/* 키비주얼 배경이미지 & 텍스트 기본 설정*/
.main_vis { width: 100%; height: 100vh; overflow: hidden; position: relative; }
.main_vis .inner { margin-top: 220px; }

.main_vis .main-vis-wrap h2 { margin-bottom: 40px; }
.main_vis .main-vis-wrap h2 p { font: 700 54px/100% var(--font-family); }
.main_vis .main-vis-wrap h2 p + p { margin-top: 16px; }

.main_vis .main-vis-wrap .quick-menu { margin-bottom: 88px; }
.main_vis .main-vis-wrap .quick-menu ul { display: flex; gap: 12px; }
.main_vis .main-vis-wrap .quick-menu ul a { display: block; width: 200px; border-radius: 20px; padding: 24px; font: 700 20px/100% var(--font-family); letter-spacing: -0.4px; color: #fff; background-color: var(--sub-key-color); position: relative; transition: all 0.2s ease; }
.main_vis .main-vis-wrap .quick-menu ul li:nth-child(2) a { background-color: var(--sub-pt-color); } 
.main_vis .main-vis-wrap .quick-menu ul a::after { content: ''; width: 17px; height: 17px; background: url('/resources/img/common/cmn_ico_outlink.svg') no-repeat center/contain; position: absolute; right: 24px; top: calc(50% - 9px); }

.main_vis .today-quote-wrap { max-width: 280px; }
.main_vis .today-quote-wrap .btn-toggle { margin-bottom: 12px; }
.main_vis .today-quote-wrap .btn-toggle ul { display: flex; max-width: 144px; background-color: #f6f7f9; border-radius: 30px; overflow: hidden; }
.main_vis .today-quote-wrap .btn-toggle ul li { width: 50%; padding: 10px 12px; border-radius: 30px; font: 400 17px/100% var(--font-family); color: var(--gray-deep); text-align: center; cursor: pointer; } 
.main_vis .today-quote-wrap .btn-toggle ul li.on { background-color: var(--key-color); color: #fff; font-weight: 600; box-shadow: 0 0 6px rgba(0,0,0,0.15); }

.main_vis .today-quote-wrap .toggle-wrap > div { flex-direction: column; gap: 12px; display: none; }
.main_vis .today-quote-wrap .toggle-wrap > div.active { display: flex; }
.main_vis .today-quote-wrap .quote-box { padding: 24px; border-radius: 20px; border: 1px solid var(--border-color); transition: all 0.2s ease; }
.main_vis .today-quote-wrap .quote-box > div { display: flex; justify-content: space-between; align-items: center; }
.main_vis .today-quote-wrap .quote-box .quote-tit { margin-bottom: 16px; }
.main_vis .today-quote-wrap .quote-box .tit { font: 800 20px/100% var(--font-family); color: var(--key-color); }
.main_vis .today-quote-wrap .quote-box .date { font: 500 14px/100% var(--font-family); color: var(--gray-deep); }
.main_vis .today-quote-wrap .quote-box .contrast { font: 500 14px/100% var(--font-family); }
.main_vis .today-quote-wrap .quote-box .contrast.up { color: #D43434; }
.main_vis .today-quote-wrap .quote-box .contrast.down { color: #54a7ff; }
.main_vis .today-quote-wrap .quote-box .price { font: 800 28px/100% var(--font-family); }
.main_vis .today-quote-wrap .quote-box .price .unit { font: 400 16px/100% var(--font-family); color: var(--sub-black); margin-left: 2px; }


.main_vis .swiper-container { width: 1000px; aspect-ratio: 20/11; position: absolute; right: 0; top: 90px; }
.main_vis .swiper-container .vis { position: relative; overflow: hidden; }
.main_vis .swiper-container .vis .vis-bg { width: 100%; height: 100%; 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; z-index: 1; }

    /* vis-bg 샘플링 */
    .vis1 .vis-bg { background: url('/resources/img/main/main_vis_1.png') no-repeat center center/cover; }
    .vis2 .vis-bg { background: url('/resources/img/main/main_vis_2.png') no-repeat center center/cover; }
    .vis3 .vis-bg { background: url('/resources/img/main/main_vis_3.png') no-repeat center center/cover; }


.main_vis .swiper-container .vis.swiper-slide.swiper-slide-active { opacity: 1 !important; }
.main_vis .swiper-container .vis.swiper-slide { opacity: 0 !important; }
.main_vis .swiper-container .vis.swiper-slide .vis-bg { transform: translateX(0); }
.main_vis .swiper-container .vis.swiper-slide .vis-bg.on { animation: slowLateX 2.2s linear 0.3s 1 normal forwards; }

@keyframes slowLateX {
    0% { transform: translateX(0); }
    100% { transform: translateX(12px); }
}


/* 호버모음 */
@media (hover: hover) {
    .main_vis .main-vis-wrap .quick-menu ul a:hover { transform: translate(2px, 2px); }
    .main_vis .today-quote-wrap .quote-box:hover { background-color: rgba(209, 228, 249, 0.08); }
}

@media screen and (max-width:1440px){
    .main_vis .inner { margin-top: 160px; }
    .main_vis .main-vis-wrap h2 p { font-size: 46px; }
    .main_vis .main-vis-wrap h2 p + p { margin-top: 12px; }
    .main_vis .main-vis-wrap .quick-menu { margin-bottom: 64px; }
    .main_vis .main-vis-wrap .quick-menu ul a { padding: 20px 24px; font-size: 19px; font-weight: 600; }
    .main_vis .swiper-container { width: 880px; top: 70px; }
}
@media screen and (max-width:1280px){
    .main_vis .inner { margin-top: 140px; }
    .main_vis .main-vis-wrap h2 { margin-bottom: 70px; }
    .main_vis .main-vis-wrap h2 p { font-size: 42px; }
    .main_vis .main-vis-wrap h2 p + p { margin-top: 10px; }
    .main_vis .main-vis-wrap .quick-menu { position: absolute; right: 0; top: 0; }
    .main_vis .main-vis-wrap .quick-menu ul a { width: 140px; height: 88px; border-radius: 16px; padding: 20px; font-size: 18px; }
    .main_vis .main-vis-wrap .quick-menu ul a::after { top: auto; bottom: 20px; }
    .main_vis .today-quote-wrap { width: 260px; }
    .main_vis .today-quote-wrap .quote-box .price { font-size: 24px; }
    .main_vis .swiper-container { width: auto; height: 55vh; max-height: 400px; top: 80px; }
}
@media screen and (max-width:1024px){
    .main_vis .inner { margin-top: 128px; }
    .main_vis .main-vis-wrap h2 { margin-bottom: 40px; }
    .main_vis .main-vis-wrap h2 p { font-size: 34px; }
    .main_vis .main-vis-wrap .quick-menu { position: static; margin-bottom: 0; } 
    .main_vis .main-vis-wrap .quick-menu ul { gap: 8px; }
    .main_vis .main-vis-wrap .quick-menu ul a { width: 160px; height: 56px; font-size: 17px;}
    .main_vis .today-quote-wrap { width: 240px;  position: absolute; right: 0; top: 0; }
    .main_vis .today-quote-wrap .quote-box { padding: 20px; }
    .main_vis .today-quote-wrap .quote-box .quote-tit { margin-bottom: 12px; }
    .main_vis .today-quote-wrap .quote-box .tit { font-size: 19px; }
    .main_vis .today-quote-wrap .quote-box .price { font-size: 22px; }
    .main_vis .swiper-container { margin: 0 0 0 auto; position: static; }
}
@media screen and (max-width:768px){
    .main_vis { width: 100%; height: 100%; }
    .main_vis .inner { margin-top: 120px; padding-bottom: 120px; }
    .main_vis .main-vis-wrap h2 p { font-size: 32px; }
    .main_vis .main-vis-wrap .quick-menu ul a { font-size: 16px; }
    .main_vis .today-quote-wrap { width: 100%; max-width: unset; right: auto; left: 0; top: auto; bottom: 0; z-index: 10; }
    .main_vis .today-quote-wrap .btn-toggle ul li { padding: 8px 12px; font-size: 16px; }
    .main_vis .today-quote-wrap .toggle-wrap > div { flex-direction: row; gap: 12px;  }
    .main_vis .today-quote-wrap .quote-box { width: calc((100% - 12px) / 2); }
    .main_vis .swiper-container { width: 90%; height: auto; }
}
@media screen and (max-width:640px){
    .main_vis .inner { width: 100%; padding: 0 4% 120px; margin: 120px auto 0; }
    .main_vis .swiper-container { margin: 0 1% 0 auto; }
    .main_vis .today-quote-wrap { width: 92%; left: 4%; }
    .main_vis .today-quote-wrap .quote-box .contrast { font-size: 13px; }
    .main_vis .today-quote-wrap .quote-box .price { font-size: 21px; }
    .main_vis .today-quote-wrap .quote-box .price .unit { font-size: 14px; }
}
@media screen and (max-width:480px){
    .main_vis { height: calc(100vh - 100px); max-height: 610px; }
    .main_vis .inner { height: 100%; margin-top: 0; padding: 120px 4% 100px; }
    .main_vis .main-vis-wrap h2 p { font-size: 26px; }
    .main_vis .main-vis-wrap .quick-menu { max-width: 90%; margin-bottom: 20px; }
    .main_vis .main-vis-wrap .quick-menu ul li { width: calc((100% - 8px) / 2); }
    .main_vis .main-vis-wrap .quick-menu ul a { width: 100%; height: 48px; padding: 16px 20px; border-radius: 12px; }
    .main_vis .main-vis-wrap .quick-menu ul a::after { width: 15px; height: 15px; right: 20px; bottom: auto; top: calc(50% - 7px); }
    .main_vis .today-quote-wrap .btn-toggle ul { background-color: rgba(246, 247, 249, 0.7); }
    .main_vis .today-quote-wrap .quote-box > div { flex-direction: column; gap: 6px; align-items: flex-start; }
    .main_vis .swiper-container { width: 100%; margin: 0 auto; }
}



/* 스와이퍼 컨트롤 버튼들*/
.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; top: 37%; left: 50%; transform: translate(-50%, -50%); 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; }


    /* 블록 텍스트 설정 */
    .main .swiper-container .vis-txt .tx-wrap.txt-kor { display: block; }
    .main .swiper-container .vis-txt .tx-wrap.txt-eng { display: none; }
    .main-eng .swiper-container .vis-txt .tx-wrap.txt-kor { display: none; }
    .main-eng .swiper-container .vis-txt .tx-wrap.txt-eng { display: block; }

    .main .swiper-container .vis-txt .each-tx-wrap.txt-kor { display: block; }
    .main .swiper-container .vis-txt .each-tx-wrap.txt-eng { display: none; }
    .main-eng .swiper-container .vis-txt .each-tx-wrap.txt-kor { display: none; }
    .main-eng .swiper-container .vis-txt .each-tx-wrap.txt-eng { display: block; }



    .swiper-container .vis-txt .tx-wrap .tit { width: 100%; height: 80px; font-size: 60px; font-weight: 700; font-family: 'Roboto', sans-serif; text-shadow: 3px 3px 7px #00000099; text-align: left; position: relative; }
    .swiper-container .vis-txt .tx-wrap .tit span { display: block; position: absolute; }
    .swiper-container .vis-txt .tx-wrap .txt { width: 100%; height: 36px; font-size: 24px; font-weight: 400; font-family: 'Roboto', sans-serif; text-shadow: 3px 3px 7px #00000099; position: relative; padding-left: 5px; }
    .swiper-container .vis-txt .tx-wrap .txt span { display: block; position: absolute; }

    /* 한글자씩 기본 설정*/ 
    .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; }




    
/* 키비주얼 슬라이드 될때마다 이미지 효과 */
    /* 서서히 줄어듬 : 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; }