@charset "utf-8";


#indexVisualSwiper {
    position:relative; width:100%; height:100%;
    background-size: cover;
    background-attachment: fixed;
    background-position:center center;
    overflow: hidden;
    background-image: url('./img/bg.jpg');
}

/* 교체용 배경 2장 */
#indexVisualSwiper .bg {
    position: absolute; background-size: cover; background-position: center;
    inset: 0; opacity: 0;
    transition: opacity 0.8s ease;
    border: 0px solid red;
}
#indexVisualSwiper .bg.show { opacity: 1; }

#fullVisual { position: relative; width: 100%; height: 100vh; }
#fullVisual .swiper-slide { position:relative; padding: 200px 70px 30px; transition: background-color 0.5s ease; }
#fullVisual .swiper-slide:before {
    position: absolute; content:''; right: 0; transition: all 5s 1s ease;
    width:1px; height:0%; background-color: rgba(255,255,255,0.3);
}
#fullVisual .swiper-slide:nth-child(even):before { top: 120px; }
#fullVisual .swiper-slide:nth-child(odd):before { bottom: 0px; }
#fullVisual .swiper-slide.line-on:before { height: calc(100% - 120px); }




#fullVisual .swiper-slide .box-content {
    position:relative; display: block; height: 300px; color:#fff;
    word-break: keep-all;
}

#fullVisual .swiper-slide .box-content .box-alert {
    display: inline-block; font-size: 0.875rem; font-weight: 400; letter-spacing: -1px; padding: 2px 10px; border: 1px solid #fff;
    transition: all 0.5s ease;  width:60px; margin-right: 5px;
}
#fullVisual .swiper-slide .box-content .name { position: relative; width:80%; font-size: 1.8rem; font-weight: 300; letter-spacing: -2px; }
#fullVisual .swiper-slide .box-content .line { position: relative; width: 100%; height: 80px; margin:50px auto }
#fullVisual .swiper-slide .box-content .line:before {
    position: absolute; content: ''; width 1px; height: 1px; top: 0; left: 50%; transform: translateX(-50%); background-color: rgba(255,255,255,0.8); 
    border-radius: 50%; transition: height 0.5s ease;
}


#fullVisual .swiper-slide .box-content .cont {
    position:relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    margin: 0 auto; font-size: 1rem; opacity: 0; padding-top: 50px; transition: all 0.5s 0.3s ease;
}
#fullVisual .swiper-slide .box-content .cont table { position: relative; width: 100%;  }
#fullVisual .swiper-slide .box-content .cont th, #fullVisual .swiper-slide .box-content .cont td { padding:3px 0; font-weight: 400; }
#fullVisual .swiper-slide .box-content .cont th { width:25% }
#fullVisual .swiper-slide .box-content .cont td { width:75% }
#fullVisual .swiper-slide .box-content .cont .btn-go-home {
    position: relative; display: block; width: 70%; font-size: 1rem; color: #fff; letter-spacing: -1px; text-align: center;
    padding: 7px 0 8px; opacity: 0; transition: all 0.3s 0.3s ease; margin-top: 20px;
    border: 1px solid #fff; overflow: hidden;
}
#fullVisual .swiper-slide .cont .btn-go-home:before {
    position: absolute; content: ''; bottom: 0px; left: 0; height: 0; width: 100%; background-color: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
#fullVisual .swiper-slide .box-content .cont .btn-go-home:hover:before { height: 100%; }

#fullVisual .swiper-slide:hover { background-color: rgba(0,0,0,0.7); }
#fullVisual .swiper-slide:hover .line:before { width: 1px; height:100% }
#fullVisual .swiper-slide:hover .cont { padding-top:0; opacity: 1; }
#fullVisual .swiper-slide:hover .cont .btn-go-home { opacity:1; margin-top:40px }

#fullVisual .swiper-slide .box-content .wrap-alert {
    position: relative; display: flex; justify-content: left; align-items: center;
    transition: all .3s ease; height: 30px; margin-bottom: 5px;
}
#fullVisual .swiper-slide:hover .box-content .wrap-alert { height:60px }
#fullVisual .swiper-slide:hover .box-content .box-alert {
    border-radius: 50%; width:60px; height:60px;
    display: flex; justify-content: center; align-items: center; 
}
#fullVisual .swiper-slide:hover .box-content .box-alert:nth-child(1) { border: 1px solid #9B3D28; background-color: #9B3D28; }
#fullVisual .swiper-slide:hover .box-content .box-alert:nth-child(2) { border: 1px solid #0080C0; background-color: #0080C0; }


/* 네비게이션 변경하기 */
#fullVisual .visual-prev::after, #fullVisual .visual-next::after { content: none; }
#fullVisual .visual-prev, #fullVisual .visual-next {
    position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0,0,0,0.5); color: #fff; opacity: 0.8;
    display: flex; align-items: center; justify-content: center; top: auto; left: auto; bottom: 50px;
    font-size: 1rem;
}
/*#fullVisual .visual-next { right:150px; }*/
/*#fullVisual .visual-prev { right:200px; }*/

#fullVisual .visual-next { left:100px; }
#fullVisual .visual-prev { left:50px; }

/* 페이지네이션 변경하기 */
#fullVisual .swiper-pagination-bullet {
    width:12px; height:12px; border-radius: 10px; 
    transition: all .3s ease; 
}
#fullVisual .swiper-pagination-bullet-active { width:50px; background-color:#111 }
#fullVisual .swiper-pagination {
    --swiper-pagination-bullet-inactive-color:  #111;/* 색 */
    --swiper-pagination-bullet-inactive-opacity: .2;/* 투명도 */
    --swiper-pagination-bottom:0px;/*하단 위치 높이 변경*/
    --swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
    --swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
    display: none;
}


#fullVisual .visual-prev, #fullVisual .visual-next,
#fullVisual .swiper-pagination-bullet, #fullVisual .play-paused { /*display: none; */}



/* 기본 보여주는 원 */
#fullVisual .swiper-slide .ani-circle {
    position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; color: #fff; padding: 10px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,1);
    opacity: 1; animation: 0.5s ease forwards ;
}
#fullVisual .swiper-slide:hover .ani-circle { animation-name:ani_circle }
@keyframes ani_circle {
    to { opacity:0; transform: translate(-50%, -50%) rotate(360deg); top:60%  }
}