@charset "utf-8";


#indexVisualSwiper {
    /*position:relative; width:100%; height: calc(100vh - 100px);*/
    position:relative; width:100%; height: 100vh;
    background-size: cover;
    /*background-attachment: fixed;*/
    background-position:center center;
    overflow: hidden;
    background-image: url('./img/thumb/bg.jpg');
}
/*
@media ( max-height: 667px ) {
   #indexVisualSwiper { height: 667px }
}

@media ( min-height: 800px ) {
   #indexVisualSwiper { height: 800px }
}
*/
/* 교체용 배경 2장 */
#indexVisualSwiper .bg {
    position: absolute; background-size: cover; background-position: center;
    inset: 0; opacity: 0;
    transition: opacity 0.8s ease;
    border: 0px solid red;
    filter: brightness(0.7);
}
#indexVisualSwiper .bg.show { opacity: 1; }

#fullVisual { position: relative; width: 100%; height: 100%; }
#fullVisual .swiper-slide { position:relative; padding: 100px 0px 25px; transition: background-color 0.5s ease; border:0px solid red }



#fullVisual .swiper-slide .box-content {
    position:absolute; display: block; width: 80%; top: 15%; left: 50%; transform: translateX(-50%); z-index: 3;
    word-break: keep-all; color: #fff; border: 0x solid red;
}

#fullVisual .swiper-slide .box-content .box-alert {
    position: relative; 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:100%; margin-top: 15px; font-size: 1.6rem; font-weight: 300; letter-spacing: -2px; 
}
#fullVisual .swiper-slide .box-content .name .site-state {
    position: relative; display: inline-block; font-size: 0.875rem; font-weight: 300; letter-spacing: -1px;
    padding: 6px 25px; background-color: #400001; color: lightyellow; overflow: hidden; white-space: nowrap; text-align: center;
    transition: all 0.3s 0.5s ease; opacity: 0; height: 0;  line-height: 1.1rem;
}
#fullVisual .swiper-slide.on .box-content .name .site-state { opacity: 1; height: 28px}



#fullVisual .swiper-slide .box-content .line { position: relative; width: 100%; height: 60px; margin:35px 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.5s 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.1s ease; margin-top: 20px;
    border: 1px solid #fff; overflow: hidden; text-decoration: none;
}
#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 0.3s ease;
}
#fullVisual .swiper-slide .box-content .cont .btn-go-home:hover:before { height: 100%; }

#fullVisual .swiper-slide .site-img { position: absolute; bottom:0px; z-index:1 }
/*#fullVisual .swiper-slide .site-img { position: absolute; top: 65%; left: 0; transform: translateY(-50%) ; z-index:1 }*/
#fullVisual .swiper-slide .slide-bg {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;
    background-color: rgba(0,0,0,0.7);
}/* visual 배경 */

#fullVisual .swiper-slide.on .line:before { width: 1px; height:100% }
#fullVisual .swiper-slide.on .cont { padding-top:0; opacity: 1; }
#fullVisual .swiper-slide.on .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 0.3s 0.3s ease; height: 30px; margin-bottom: 5px;
}
#fullVisual .swiper-slide.on .box-content .wrap-alert { height:60px }
#fullVisual .swiper-slide.on .box-content .box-alert {
    border-radius: 50%; width:60px; height:60px;
    display: flex; justify-content: center; align-items: center; 
}
#fullVisual .swiper-slide.on .box-content .box-alert:nth-child(1) { border: 1px solid #9B3D28; background-color: #9B3D28; }
#fullVisual .swiper-slide.on .box-content .box-alert:nth-child(2) { border: 1px solid #0080C0; background-color: #0080C0; }

/* 기본 보여주는 원 */
#fullVisual .swiper-slide .ani-circle {
    position: absolute; width: 60px; height: 60px; top: 40%; 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; transition: all 0.5s 0.1s ease;
}
#fullVisual .swiper-slide.on .ani-circle { opacity:0; transform: translate(-50%, -50%) rotate(360deg); top:50% }



/* 네비게이션 변경하기 */
#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; top: 130px;
    font-size: 1rem;
}
/*#fullVisual .visual-next { right:150px; }*/
/*#fullVisual .visual-prev { right:200px; }*/

#fullVisual .visual-next { right:20px; }
#fullVisual .visual-prev { right:70px; }

/* 페이지네이션 변경하기 */
#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; */}