@charset "utf-8";

#footer {margin-top:0px;}

.main-visual{width:100%;height:100vh;}
.visual-swipe{position:relative;height:100vh;overflow:hidden;}
.visual-swipe .visual-wrap{position:relative;height:100vh;}
.visual-swipe .visual-wrap .vImg{position:relative;display:block; height:100vh; width:auto;background-repeat:no-repeat;background-position:center top; background-size:cover;transform:scale(1.2); transition:5s ease-out;}
.visual-swipe .visual-wrap .vImg:before{content: "";opacity: 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #000}
.visual-swipe .visual-wrap.slide1 .vImg{background-image:url('../img/slide/main_visual1.jpg');}
.visual-swipe .visual-wrap.slide2 .vImg{background-image:url('../img/slide/main_visual2.jpg');}
.visual-swipe .visual-wrap.slide3 .vImg{background-image:url('../img/slide/main_visual3.jpg');}
.visual-swipe .visual-wrap.slide4 .vImg{background-image:url('../img/slide/main_visual4.jpg');}
.visual-swipe .visual-wrap.slide5 .vImg{background-image:url('../img/slide/main_visual5.jpg');}
/*.swiper-slide:not(.swiper-slide-active){opacity: 0 !important;}*/
.visual-swipe .swiper-slide.swiper-slide-active .vImg {transform:scale(1) rotate(0.0001deg);}
.visual-text{position:absolute;background: inherit; width:100%;max-width:1200px;margin:0 auto;top:75%;left:21%;transform: translateY(-50%);text-align:left;color:#fff;}
.visual-text .txt1{font-size:3.6rem;font-weight:600;line-height:1.2;color:rgba(255,255,255,0.56);text-shadow: 2px 0px 4px rgba(0,0,0,0.35);letter-spacing:4px}
.visual-text .txt1 .v-line{position:relative;display:inline-block;z-index:1}
.visual-text .txt1 .v-line:after{content:'';position:absolute;width:100%;height:10px;left:0;bottom:5px;background-color:#3AD9C6;transform: scaleX(0);transform-origin: bottom right;transition: transform 0.25s ease-out;z-index:-1;}
.visual-text .txt2{margin-top:0px;font-size:2.0rem;color:rgba(255,255,255,0.35);text-shadow: 2px 0px 4px rgba(0,0,0,0.35);letter-spacing:16px}
/*.visual-swipe .swiper-slide-active .txt1{animation: fadeInDown 1s 0.8s; animation-fill-mode: both;}
.visual-swipe .swiper-slide-active .txt1 .v-line:after{ transition-delay: 1.3s; transition-duration: 1s;transform: scaleX(1);transform-origin: bottom left;}
.visual-swipe .swiper-slide-active .txt2{ animation: fadeInUp  1s 1.5s; animation-fill-mode: both;}*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
}

.visual-swipe.swiper-container-horizontal>.swiper-pagination-bullets,
.visual-swipe.swiper-pagination-custom, .swiper-pagination-fraction {left:22.0%;bottom: 100px;width:auto;}
.visual-swipe .swiper-pagination-bullet{position:relative;width:10px;height:10px;line-height:10px;border:0px solid transparent;background:none;text-align:center;vertical-align: middle;}
.visual-swipe .swiper-pagination-bullet:before{content:'';position:absolute;top:2px;left:4px;display:inline-block;width:8px;height:8px;background:#fff;border-radius:50%;}
.visual-swipe .swiper-pagination-bullet-active{border-color: #fff;/*transition: all 3s*/}
.visual-swipe .swiper-button-next, .visual-swipe .swiper-container-rtl .swiper-button-prev,
.visual-swipe .swiper-button-prev, .visual-swipe .swiper-container-rtl .swiper-button-next{background-image: none;top:auto;}
.visual-swipe .swiper-button-next, .visual-swipe .swiper-container-rtl .swiper-button-prev {background-image:none;bottom: 100px;left:30%;width:20px;height:20px;line-height:20px;vertical-align: middle;}
.visual-swipe .swiper-button-next:before{content:'\e93f';font-family: 'xeicon';font-size:2rem;color:#fff}
.visual-swipe .swiper-button-prev, .visual-swipe .swiper-container-rtl .swiper-button-next {background-image:none;bottom: 100px;left:28%;width:20px;height:20px;line-height:20px;vertical-align: middle;}
.visual-swipe .swiper-button-prev:before{content:'\e93c';font-family: 'xeicon';font-size:2rem;color:#fff}
.swiper-pause{position:absolute;bottom: 100px;left:20.8%;display:inline-block;width:20px;height:20px;line-height:20px;z-index:10;vertical-align: middle;}
.swiper-pause:before{content:'\ea3b';font-family: 'xeicon';font-size:2rem;color:#fff;}
.swiper-pause.on:before{content:'\ea3e';}

.scroll {position: absolute; width: 30px;height:50px;bottom: 110px;left:50%;transform:translateX(-50%);z-index:100;font-size:15px;color:#fff;font-weight:600;text-align:center;}
.scroll span {position: absolute;top: 25px;left: 50%;width: 22px;height: 30px;border: 1px solid #fff;border-radius: 50px;box-sizing: border-box;}
.scroll span::before {content: '';position: absolute;top: 5px;left: 50%; width: 4px;height: 4px;margin-left: -2px;background-color: #fff;border-radius: 100%;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;box-sizing: border-box;}
.scroll span::after{content:'\e943';position: absolute;bottom:-22px;left:3px;font-family:'xeicon';color:#fff;}

@keyframes sdb {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 15px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.visual-swipe .swiper-button-next, .visual-swipe .swiper-container-rtl .swiper-button-prev,
.visual-swipe .swiper-button-prev, .visual-swipe .swiper-container-rtl .swiper-button-next{display:none;}