@charset "utf-8";

/* 키비주얼 배경이미지 기본 설정*/
.main_vis { width: 100vw; height: 640px; overflow: hidden; position: relative; margin-top: 120px; }
.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: 640px; position: relative; }
.main_vis .swiper-container .vis .vis_bg { width: 100%; height: 640px; position: absolute; left: 0; top: 0; }

    /* vis_bg 기본설정 */
    .vis1 .vis_bg { background:#FCDEDE url('/resources/img/main/main_vis_1.jpg') no-repeat center bottom/cover; }
    .vis2 .vis_bg { background:#FFFDE8 url('/resources/img/main/main_vis_2.jpg') no-repeat center bottom/cover; }
    .vis3 .vis_bg { background:#E1FAF1 url('/resources/img/main/main_vis_3.jpg') no-repeat center bottom/cover; }

/* 스와이퍼 부속 버튼들*/

.main_vis .swiper-control { width: 97%; max-width:1560px; height: auto; position: absolute; top: 497px; left: 50%; box-sizing: border-box; z-index: 105; }

    /*swiper arrow*/
    .main_vis .swiper-arrow-wrap .swiper-arrow.swiper-button-prev { left: 0; background-image: url('/resources/img/common/arr_prev.png'); }
    .main_vis .swiper-arrow-wrap .swiper-arrow.swiper-button-next { right: 0; background-image: url('/resources/img/common/arr_next.png'); }
        /* swiper arrow : 같이 모여있는 화살표 */
        .main_vis .swiper-arrow-wrap.wrap-arr { width: 94px; position: absolute; left: 195px; top:55%;} 
        .main_vis .swiper-arrow-wrap.wrap-arr .swiper-arrow { width: 42px; height: 42px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 9px; }

        .main_vis .vis1 .swiper-arrow-wrap.wrap-arr .swiper-arrow { background-color: rgba(172, 75, 75, 0.3); }
        .main_vis .vis1 .swiper-arrow-wrap.wrap-arr .swiper-arrow:hover { background-color: rgba(172, 75, 75, 0.7); }
        .main_vis .vis2 .swiper-arrow-wrap.wrap-arr .swiper-arrow { background-color: rgba(177, 165, 53, 0.35); }
        .main_vis .vis2 .swiper-arrow-wrap.wrap-arr .swiper-arrow:hover { background-color: rgba(177, 165, 53, 0.7); }
        .main_vis .vis3 .swiper-arrow-wrap.wrap-arr .swiper-arrow { background-color: rgba(127, 193, 169, 0.3); }
        .main_vis .vis3 .swiper-arrow-wrap.wrap-arr .swiper-arrow:hover { background-color: rgba(127, 193, 169, 0.7); }

    /* swiper-pagination */
    .main_vis .swiper-control .swiper-pagination { }
        /*siwper 숫자*/
        .main_vis .swiper-control .pagination_fra { background-color: rgba(172, 75, 75, 0.3); width: 180px; height: 42px; box-sizing: border-box; border-radius: 20px; text-align: center; padding: 10px 20px;  display: flex; justify-content: space-around; align-items: center;}
        .main_vis .swiper-control .pagination_fra:hover { background-color: rgba(172, 75, 75, 0.7);}
        .main_vis .vis2 .swiper-control .pagination_fra { background-color: rgba(177, 165, 53, 0.35); }
        .main_vis .vis2 .swiper-control .pagination_fra:hover {background-color: rgba(177, 165, 53, 0.7);}
        .main_vis .vis3 .swiper-control .pagination_fra { background-color: rgba(127, 193, 169, 0.3); }
        .main_vis .vis3 .swiper-control .pagination_fra:hover {background-color: rgba(127, 193, 169, 0.7);}
        .main_vis .swiper-container .pagination_fra span {width:auto; height:auto;  display: inline-block; font: 500 22px/100% 'Poppins'; color:rgb(255,255,255,0.5); background: none; position: relative; opacity: 1;}
        .main_vis .swiper-container .pagination_fra span::after { content: ""; width:5px; height:5px; display: inline-block; background-color: #BE5F5F; border-radius:5px; position: absolute; top:50%; left:28px; transform: translate(0px,-32%);}
        .main_vis .vis2 .swiper-control .pagination_fra span::after {background-color: #BAB058;}
        .main_vis .vis3 .swiper-control .pagination_fra span::after {background-color: #7FC1A9;}
        .main_vis .swiper-container .pagination_fra span:last-child::after {display: none;}
        .main_vis .swiper-container .pagination_fra span.swiper-pagination-current { color:rgb(255,255,255,1); opacity:1 ;}
        .main_vis .swiper-container .pagination_fra span.swiper-pagination-bullet-active {color:rgb(255,255,255,1); opacity:1 ;}


    /* 프로그래스바 기본 설정 */
    .main_vis .swiper-container .vis .kv-progress-bar { width: 300px; height: 10px; position: absolute; top: 505px; left: 120px; }
    .main_vis .swiper-container .vis .kv-progress-bar p { width: 300px; height: 3px; background-color: rgba(255, 255, 255, 0.4); }
    .main_vis .swiper-container .vis .kv-progress-bar p::after { content: ''; width: 300px; height: 3px; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 1; transform-origin: left top; }

    /* 슬라이드 될때마다(슬라이드 내에 있을 때) */
    .main_vis .swiper-container .vis.swiper-slide-active .kv-progress-bar p::after { -webkit-transform: scaleX(0); transform: scaleX(0); animation-name: kvProgressBar; animation-duration: 4.5s; animation-fill-mode: forwards; animation-delay: 0.3s; }

    @-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); }
    }
    
    /* 슬라이드 갯수대로 채워지는 프로그래스바 */
    .swiper-pagination-progressbar { width: 420px; height: 2px; top: 365px; left: 270px; background: rgba(255, 255, 255, 0.35); }
    .swiper-pagination-progressbar .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-container .swiper-playstop-btn { width: 50px; height: 50px; position: absolute; top: 250px; left: 26%; }
    .main_vis .swiper-container .swiper-playstop-btn .swiper-btn-play { width: 100%; height: 100%; background: url('/resources/img/main/slide_ico.png') no-repeat 19px -26px/16px;  border-radius: 50%; border: 1px solid #fff; cursor: pointer; display: none; }
    .main_vis .swiper-container .swiper-playstop-btn .swiper-btn-stop { width: 100%; height: 100%; background: url('/resources/img/main/slide_ico.png') no-repeat center 15px/16px; border-radius: 50%; border: 1px solid #fff; cursor: pointer; display: none; }
    .main_vis .swiper-container .swiper-playstop-btn .swiper-btn-play.active, 
    .main_vis .swiper-container .swiper-playstop-btn .swiper-btn-stop.active { display: block; } 







/* 키비주얼 슬라이드 될때마다 이미지 효과 */

    /* 서서히 줄어듬 : 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_kv_sample1.jpg")no-repeat center/cover; }
        .swiper-container .vis2 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_kv_sample2.jpg")no-repeat center/cover; }
        .swiper-container .vis3 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_kv_sample3.jpg")no-repeat center/cover; }
        .swiper-container .vis4 .vis_bg.img-tiltDown::after { background: url("/resources/img/main/main_kv_sample4.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_kv_sample1.jpg")no-repeat center/cover; }
        .swiper-container .vis2 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_kv_sample2.jpg")no-repeat center/cover; }
        .swiper-container .vis3 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_kv_sample3.jpg")no-repeat center/cover; }
        .swiper-container .vis4 .vis_bg.img-tiltUp::after { background: url("/resources/img/main/main_kv_sample4.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; }
    }


    
    /* 키비주얼 슬라이드 될때마다 텍스트 효과 */
    
    /* 기본 텍스트 위치*/
    .swiper-container .vis_txt { width: 100%; color: #222222; position: absolute; top: 126px; left: 50%; transform: translate(-50%, 0); z-index: 1;}
    .swiper-container .vis_txt.fixed_txt { padding-top: 330px; }
    .swiper-container .vis_deco {color:#222222; font:500 14px/100% 'Paybooc'; position: relative; text-indent: 4px; margin-bottom: 15px;}
    .swiper-container .vis_deco::before {content: ""; display: block; width:60px; height:2px; background-color: #BE5F5F; position: relative; top: 24px;}
    .swiper-container .vis_deco::after {content: ""; display: block; width:150px; height:1px; background-color: #BE5F5F; margin-top:10px;}
    .swiper-container .vis2 .vis_deco::before,.swiper-container .vis2 .vis_deco::after {background-color: #BAB058;}
    .swiper-container .vis3 .vis_deco::before,.swiper-container .vis3 .vis_deco::after {background-color: #7FC1A9;}
    /* 기본 텍스트 설정 */
    .swiper-container .vis_txt .tx_wrap .tit { width: 100%; height: 72px; font-size: 42px; font-weight: 700; font-family: 'paybooc', sans-serif; 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: 28px; font-weight: 500; font-family: 'paybooc', sans-serif; position: relative;}
    .swiper-container .vis_txt .tx_wrap .txt span { display: block; position: absolute; }

    /* 페이드인 업 : 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; 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; 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); }
    }

    /* 가려졌다 서서히 보이기 */
    /* 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: 550px; 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: 150px; 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; }
    }





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

    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; }

    /* 한글자씩 내려오기 :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 .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; }


    @media screen and (max-width:1400px){
        .swiper-container .vis_txt .tx_wrap .tit {height:52px; font-size: 32px;}
        .swiper-container .vis_txt .tx_wrap .txt {font-size: 24px;}
        .vis1 .vis_bg {background: #FCDEDE url('/resources/img/main/main_vis_1.jpg') no-repeat right 34% bottom/cover;}
        .vis2 .vis_bg {background: #FFFDE8  url('/resources/img/main/main_vis_2.jpg') no-repeat right 34% bottom/cover;}
        .vis3 .vis_bg {background: #E1FAF1  url('/resources/img/main/main_vis_3.jpg') no-repeat right 34% bottom/cover;}
    }
    @media screen and (max-width:1200px){
        .swiper-container .vis_txt {top:56px;}
    }
    @media screen and (max-width:1024px){
        .vis1 .vis_bg {background: #FCDEDE url('/resources/img/main/main_vis_1.jpg') no-repeat right 34% bottom 0px /cover; background-size:auto 70%;}
        .vis2 .vis_bg {background: #FFFDE8  url('/resources/img/main/main_vis_2.jpg') no-repeat right 34% bottom 0px /cover; background-size:auto 70%;}
        .vis3 .vis_bg {background: #E1FAF1  url('/resources/img/main/main_vis_3.jpg') no-repeat right 34% bottom 0px /cover; background-size:auto 70%;}
        .main_vis {margin-top:80px;}
    }
    @media screen and (max-width:768px){
        .main_vis .swiper-control {width:92%;}
        .swiper-container .vis_deco {margin-bottom: 25px;}
        .swiper-container .vis_txt .tx_wrap .tit {height:auto; font-size: 26px; margin-bottom: 20px;}
        .swiper-container .vis_txt .tx_wrap .tit span {line-height: 140%; position: relative;}
        .swiper-container .vis_txt .tx_wrap .txt {font-size: 18px;}
        .swiper-container .vis_txt .tx_wrap .txt span {line-height: 130%;}
        .main_vis .swiper-control {top:567px;}
    }
    @media screen and (max-width:500px){
        .vis1 .vis_bg {background:#FCDEDE url('/resources/img/main/main_vis_1.jpg') no-repeat right 28% bottom 0px /cover; background-size:auto 70%;}
        .vis2 .vis_bg {background:#FFFDE8  url('/resources/img/main/main_vis_2.jpg') no-repeat right 34% bottom 0px /cover; background-size:auto 70%;}
        .vis3 .vis_bg {background:#E1FAF1  url('/resources/img/main/main_vis_3.jpg') no-repeat right 22% bottom 0px /cover; background-size:auto 70%;}

    }