@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/visual1.jpg); }
#fullVisual .fv2 .bgimg { background-image: url(./img/visual2.jpg); filter: brightness(100%); }

#fullVisual .anim {
    position: absolute; display: inline-block; z-index: 2;
    border: 0px solid #f2f2f2
}
#fullVisual .anim img { max-width:100%;  }
#fullVisual .anim1 { left: 30%; top: 30%; transform: translate(-50%, -50%); }
#fullVisual .anim2 { left: 50%; top: 35%; transform: translate(-50%, -50%); }


#fullVisual .anim .tt {
    position: relative; width: 100%; display: block; border: 0px solid blue;
    text-align: left; letter-spacing: -2px;
}
#fullVisual .anim .line { position: relative; width:100%; height:0.5px; }
#fullVisual .anim .line::before {
    position: absolute; content: ''; top: 0; width: 0%; height: 0.5px; background-color: rgba(0,0,0,0.5);
} 
#fullVisual .anim .line1 { margin-bottom:10px; left:0; }
#fullVisual .anim .line2 { margin-top:10px; right:0 }
#fullVisual .anim .line1::before { left:0; }
#fullVisual .anim .line2::before { right:0; }


#fullVisual .anim .anim-sub {
    position: absolute; display: inline-block; top:30%; left:150%; transform: translate(-50%, -50%);
    font-size: 1.15rem; line-height: 1.5rem; white-space: nowrap; color: #FFFF80; font-style: italic;
}
#fullVisual .anim .anim-sub > div { animation: anim_sub 0.7s ease forwards; opacity: 0; transform: translateX(0px); }
#fullVisual .anim .anim-sub > div:nth-child(1) { animation-delay: 2.4s; }
#fullVisual .anim .anim-sub > div:nth-child(2) { animation-delay: 2.6s; }
#fullVisual .anim .anim-sub > div:nth-child(3) { animation-delay: 2.8s; }
#fullVisual .anim .anim-sub > div:nth-child(4) { animation-delay: 3.0s; }



#fullVisual .anim .t1 { margin-bottom:30px }
#fullVisual .anim .tt span { position: relative; display: block; transform: translateX(0px);  }
#fullVisual .anim .t2 { }
#fullVisual .anim .t3 { transform: translateY(0px); margin-top:20px }

#fullVisual .anim .tt img { filter: drop-shadow(0 0px 5px rgba(0,0,0,0.4)); }
#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 .anim .tt .t1 { animation: t1_1 1s ease both 1.0s}
#fullVisual .swiper-slide.swiper-slide-active .anim .tt .t2 { animation: t1_2 1s ease both 1.4s}
#fullVisual .swiper-slide.swiper-slide-active .anim .tt.t3 { animation: t1_3 0.7s ease both 2.4s}

#fullVisual .swiper-slide.swiper-slide-active .anim .line::before { animation: line 2s ease-out both 1.2s}


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


@keyframes bgimg {
    from { scale:1.2 }
    to { scale:1 }
}
@keyframes t1_1 {
    from { transform: translateX(100px); scale:1 }
    to {  opacity: 1;}
}
@keyframes t1_2 {
    from { transform: translateX(100px); }
    to { opacity: 1; padding:0  }
}
@keyframes t1_3 {
    from { transform: translateY(50px); }
    to { opacity: 1;  }
}

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


@keyframes line {
    from { opacity: 0; }
    to { opacity: 1; width:100% }
}





/*오리발*/
.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 .anim2 { width: 350px; height: 289px; }
    #fullVisual .anim2 .t4 { top: 62%; font-size: 1.1rem; margin-top:0px; }
    #fullVisual .inna img, #fullVisual .sign img { max-width:85% }
}

@media (max-height: 800px ) {
    #fullVisual .anim2 { width: 300px; height: 247px; }
    #fullVisual .anim2 .t4 { font-size: 1rem; margin-top:0px; }
    #fullVisual .inna img, #fullVisual .sign img { max-width:70% }
}

@media (max-width: 1600px ) {
    #fullVisual .anim1 { width: 400px; height: 330px; }
    #fullVisual .anim1 .t4 { font-size: 1.1rem; margin-top:0px; }
}

@media (max-width: 1400px ) {
    #fullVisual .anim1 { width: 350px; height: 289px; }
    #fullVisual .anim1 .t4 { font-size: 1rem; margin-top:0px; }
}

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