@charset "utf-8";

/* 키비주얼 배경이미지 & 텍스트 기본 설정*/
.main_vis { width: 100vw; height: 100vh; overflow: hidden; position: relative; }
.main_vis .inner { 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; left: 0; top:0;  pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 82%, #111114 94%); }

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

    /* 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: white; 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_1.jpg")no-repeat left center/cover; }
    .main_vis .blind-slide2 .vis-wrap .vis2 .mask span { background: url("/resources/img/main/main_vis_2.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); }
    
    .vis-video { width: 100%; height: 100%; object-fit: cover; }


/* 스와이퍼 컨트롤 버튼들*/
.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-pagination { }
        /* swiper 불렛 */
        .main_vis .swiper-control .swiper-pagination.pagination_bul { bottom: 7%; left: 50%; transform: translateX(-50%); }
        .main_vis .swiper-control .swiper-pagination-bullet { width: 40px; height: 40px; margin-right: 12px; position: relative; text-indent: -9999999px; opacity: 1; background: transparent; }
        .main_vis .swiper-control .swiper-pagination-bullet:last-child { margin-right: 0; }
        .main_vis .swiper-control .swiper-pagination-bullet::before { content: ''; display: block; width: 20px; height: 2px; border-radius: 2px; background: #FFFFFF26; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
        .main_vis .swiper-control .swiper-pagination-bullet::after { content: ''; display: block; width: 18px; height: 2px; border-radius: 2px; background: #FFFFFF26; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); transform-origin: center; transition: .3s ease-out; }
        .main_vis .swiper-control .swiper-pagination-bullet-active::before { background: linear-gradient(to right, #72C9F1 0%, #008CD6 100%); }
        .main_vis .swiper-control .swiper-pagination-bullet-active::after { background: linear-gradient(to right, #72C9F1 0%, #008CD6 100%); transform: translate(-50%,-50%) rotate(90deg) ; }


    /* 기본 텍스트 위치*/
    .swiper-container .vis-txt { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; text-align: center; }
  

    /* 배경 & 텍스트 이중 스와이퍼 시 */
    .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: 91px; font-size: 70px; font-weight: 800; line-height: 130%; position: relative; letter-spacing: -.5px; overflow: hidden; }
    .swiper-container .vis-txt .tx-wrap .tit span { display: block; }
    .swiper-container .vis-txt .tx-wrap .txt { width: 100%; height: 34px; font-size: 24px; font-weight: 600; line-height: 140%; position: relative; margin-top: 32px; color:#FFFFFFB2; overflow: hidden; }
    .swiper-container .vis-txt .tx-wrap .txt span { display: block; }

    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:1700px){
  .swiper-container .vis-txt .tx-wrap .tit { height: 80px; font-size: 60px; }
  .swiper-container .vis-txt .tx-wrap .txt { height: 30px; font-size: 22px; }
}

@media screen and (max-width:1400px){
  .swiper-container .vis-txt .tx-wrap .tit { height: 70px; font-size: 50px; }
  .swiper-container .vis-txt .tx-wrap .txt { height: 26px; font-size: 20px; margin-top: 26px; }
}
@media screen and (max-width:1024px){
  .swiper-container .vis-txt .tx-wrap .tit { height: 60px; font-size: 48px; }
  .swiper-container .vis-txt .tx-wrap .txt { height: 25px; font-size: 19px; margin-top: 24px; }
}

@media screen and (max-width:768px){
    .main_vis { width: 100%; height: 75vh; }
    .main_vis .blind-slide2 .vis-wrap { width: 100%; height: 75vh; }
    .main_vis .swiper-container .vis { height: 75vh; }
    .main_vis .swiper-container .vis .vis-bg { height: 100%; }


  .swiper-container .vis-txt .tx-wrap .tit { height: 56px; font-size: 42px; }
  .swiper-container .vis-txt .tx-wrap .txt { height: 19px; font-size: 17px; margin-top: 20px; }
}

@media screen and (max-width:500px){
  .swiper-container .vis-txt { top:46%; }
  .swiper-container .vis-txt .tx-wrap .tit { height: 40px; font-size: 30px; }
  .swiper-container .vis-txt .tx-wrap .txt { width: 240px; height: 42px; font-size: 16px; margin: 12px auto 0; transform: rotate(0.045deg); }
  .swiper-container .vis-txt .tx-wrap .txt span { line-height: 140%; }
}



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