@charset "utf-8";


#indexVisualSwiper {
    position:relative; width:100%; height:100%;
    background-size: cover;
    background-attachment: fixed;
    background-position:center center;
    overflow: hidden;
}


#fullVisual { width: 100%; height: 100vh; }
#fullVisual .swiper-slide { position:relative; width:100%; height:100%; }
#fullVisual .bgimg {
    position:absolute; width:100%; height:100%; z-index:1; filter: brightness(100%);
    background: url('') no-repeat center / cover; 
}
#fullVisual .fv1 .bgimg { background-image: url(./img/visual3.jpg);}
#fullVisual .fv2 .bgimg { background-image: url(./img/visual3.jpg); filter: brightness(100%); }

#fullVisual .anim1 {
    position: absolute; display: inline-block; z-index: 2;
    width: 300px; height: 140px;
    border: 0px solid red;
}
#fullVisual .anim2 {
    position: absolute; display: inline-block; z-index: 2;
    width: 300px; height: 140px;
    border: 0px solid red;
}
#fullVisual .anim img { max-width:100%;  }
#fullVisual .anim1 { right: -5%; top: 20%; transform: translate(-50%, -50%); }
#fullVisual .anim2 { right: -5%; top: 20%; transform: translate(-50%, -50%); }

#fullVisual .anim .tt {
    position: absolute; width: 100%; display: block; border: 0px solid blue;
}

#fullVisual .anim * {  transition: all 0.3s ease; }

#fullVisual .anim1 .t1 { top:0%; left:0%; border:0px solid red }
#fullVisual .anim1 .t2 { top:34%; left:0% }
#fullVisual .anim1 .t3 { bottom:0%; left:0%;  }

#fullVisual .anim2 .t1 { top:0%; left:0%; }
#fullVisual .anim2 .t2 { top:34%; left:0%; }
#fullVisual .anim2 .t3 { bottom:0%; left:0%; }


#fullVisual .inna, #fullVisual .sign { position: absolute; display: inline-block; z-index: 10; text-align: right}
#fullVisual .inna { right:40px; bottom:0px; text-align:right; opacity:0 }
#fullVisual .inna img { max-width: 100%; transition: all 0.5s ease; }
#fullVisual .sign { right:120px; bottom:30px;}

#fullVisual .anim .tt.t1 { opacity: 0;}
#fullVisual .anim .tt.t2 { opacity: 0;}
#fullVisual .anim .tt.t3 { opacity: 0;}
#fullVisual .anim .tt.t4 { opacity: 0;}
#fullVisual .anim .tt.t5 { opacity: 0;}

#fullVisual .swiper-slide.swiper-slide-active .bgimg { animation: bgimg 5s 0.5s ease-out both }
#fullVisual .swiper-slide.swiper-slide-active .inna { animation: inna 1.5s 0.5s ease-out both }
#fullVisual .swiper-slide.swiper-slide-active .anim1 .tt.t1 { animation: t1_1 1.2s ease-out both 1.0s}
#fullVisual .swiper-slide.swiper-slide-active .anim1 .tt.t2 { animation: t1_2 1.2s ease-out both 1.2s}
#fullVisual .swiper-slide.swiper-slide-active .anim1 .tt.t3 { animation: t1_3 1.2s ease-out both 2s}
#fullVisual .swiper-slide.swiper-slide-active .anim1 .tt.t4 { animation: t1_4 0.7s ease-in-out both 2.4s}
#fullVisual .swiper-slide.swiper-slide-active .anim1 .tt.t5 { animation: t1_5 0.7s ease-in-out both 2.6s}



#fullVisual .swiper-slide.swiper-slide-active .anim2 .tt.t1 { animation: t2_1 1.2s ease-out both 1.0s}
#fullVisual .swiper-slide.swiper-slide-active .anim2 .tt.t2 { animation: t2_2 1.2s ease-out both 1.2s}
#fullVisual .swiper-slide.swiper-slide-active .anim2 .tt.t3 { animation: t2_3 1.2s ease-out both 2s}




/*#fullVisual .anim img { max-width:100% }*/


@keyframes bgimg {
    from { scale:1.2 }
    to { scale:1 }
}
@keyframes t1_1 {
    from { left:100px; scale:1 }
    to {  opacity: 1;}
}
@keyframes t1_2 {
    from { left:-100px }
    to { opacity: 1; padding:0  }
}
@keyframes t1_3 {
    from { left:100px }
    to { opacity: 1;  }
}
@keyframes t1_4 {
    from { transform: translateY(30px); }
    to { opacity: 1 }
}
@keyframes t1_5 {
    from { transform: translateY(30px); }
    to { opacity: 1 }
}

@keyframes inna {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1 }
}




@keyframes t2_1 {
    from { left:100px; scale:1 }
    to {  opacity: 1;}
}
@keyframes t2_2 {
    from { left:200px; }
    to { opacity: 1; padding:0  }
}
@keyframes t2_3 {
    from { right:50px }
    to { opacity: 1;  }
}



/*오리발*/
.fvOribal {
    position:absolute; left:10px; bottom:10px; color:#fff; text-shadow: 2px 2px 4px #000; z-index: 5; opacity: 0.8; letter-spacing: -1px;
}



@media (max-height: 900px ) {
    #fullVisual .inna img, #fullVisual .sign img { max-width:85% }
}

@media (max-height: 800px ) {
    #fullVisual .inna img, #fullVisual .sign img { max-width:70% }
    #fullVisual .anim1, #fullVisual .anim2 { top:55% }
}

@media (max-width: 1600px ) {
}

@media (max-width: 1400px ) {
}

@media (max-height: 600px ) {
    /*#fullVisual .anim1 .tt.t4 img { width:80%  }*/
}