* { margin: 0; padding: 0; border: 0; box-sizing: border-box; } 
body { position: relative; width: 100%; height: 100vh; margin:0 auto; background: url(img/bg.jpg) no-repeat center / cover; font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif; } 
img { display: block; } 


#popupWr { width: 100vw; height: 100vh; background-color: rgba(0,0,0,.62); } 
#popupWr button { font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif; } 
#popupWr .icon { display: inline-block; width: auto; } 
#popupWr span.c-blue { color:#0065D9; } 
#popupWr span.c-red { color:#FF3D00; } 
#popupWr .popup { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 50%; width: calc(100% - 30px); max-width: 1366px;    height: 100%; max-height: 700px; margin-left: 15px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.16)); transform: translate(-50%,-50%); } 
#popupWr .popup .closeBtn { position: absolute; top: 25px; right: 25px; width: 21px; height: 21px; background: transparent; cursor:pointer; z-index:99;} 
#popupWr .popup .menu-wr { position: absolute; top: 30px; left: -30px; width: 180px; z-index: 2; } 
#popupWr .popup .menu-wr button { width: 100%; height: 35px; line-height: 35px; list-style: none; border-radius: 30px; background:#E4E4E4; text-align: center; color: #575757; font-size: 16px; font-weight: 600; } 
#popupWr .popup .menu-wr button:not(:last-of-type) { margin-bottom: 5px; } 
#popupWr .popup .menu-wr button.on { background: #213867; color: #fff; font-weight: 900; } 
#popupWr .popup .cont-wr { position: relative; display: flex; width: 100%; max-width: 1366px; max-height: 700px; height: 100%; padding-top: 30px; border-radius: 26px; background: #fff; } 
#popupWr .popup .cont-nonbox { width: 210px; }
#popupWr .popup .cont-scroll { width: calc(100% - 130px); max-width: 1256px; overflow: scroll;z-index: 2; } 
#popupWr .popup .cont { width: 1156px; padding-right: 30px; margin-bottom: 14px; } 
#popupWr .popup .cont .txt { margin-bottom: 25px; color: #707070; font-size: 15px; font-weight: 600; line-height: 1.5; } 
#popupWr .popup .swiper-slide { position: relative; } 
#popupWr .popup .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } 
 
 
  

#popupWr .popup .cont-scroll::-webkit-scrollbar-track { border-radius: 10px; background-color: #F5F5F5; } 
#popupWr .popup .cont-scroll::-webkit-scrollbar { width: 12px; background-color: transparent;; } 
#popupWr .popup .cont-scroll::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #0F2E6A; } 

#popupWr .popup .cont-scroll::-webkit-scrollbar-track:vertical { background: rgba(225,225,225,0); border-radius: 10px; } 
#popupWr .popup .cont-scroll::-webkit-scrollbar-track:horizontal { background: rgba(225,225,225,0); border-radius: 10px; } 
 /* Scrollbar Thumb */
#popupWr .popup .cont-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2em; } 
 /* Horiontal Scrollbar button (TOP-RIGHT aKa START) */
#popupWr .popup .cont-scroll::-webkit-scrollbar-corner { background: transparent; } 




 
/* 유지관리팀 추가 */
#popupWr .popup .cont .swiper .txt { margin-bottom: 25px; color: #707070; font-size: 15px; font-weight: 600; line-height: 1.5; height:90px;}
/* #popupWr .popup .swiper   { filter: drop-shadow(0 6px 4px rgba(0,0,0,.4)); } */
#popupWr .popup .img-area {border-radius: 12px; border: 5px solid #0F2E6A; height: 524px; border-radius: 12px; filter: unset;}
#popupWr .popup .img-area .box img {position: absolute; cursor:pointer; object-fit:unset;}
#popupWr .popup .swiper-slide { position: relative; darggable : "false"}
#popupWr .popup .swiper-slide img {object-fit: cover; object-position: center; filter: unset;}
 



#popupWr .popup .swiper-btn-wr {float: right; display: inline-flex; align-items: center; margin: 70px 0 0 953px; position: absolute;}
#popupWr .popup .swiper-btn-wr .swiper-button { position: relative; left: auto; top: auto; right: auto; bottom: auto; width: 40px; height: 40px; margin-top: 0; border: 1px solid #BBBBBB; border-radius: 100%; background: #213867;}
#popupWr .popup .swiper-btn-wr .swiper-button img { filter: brightness(20); } 
#popupWr .popup .swiper-btn-wr .swiper-button-next.swiper-button-disabled, #popupWr .popup .swiper-btn-wr .swiper-button-prev.swiper-button-disabled { border: 1px solid #BBBBBB; background-color: #fff; opacity: 1; } 
#popupWr .popup .swiper-btn-wr .swiper-button-next.swiper-button-disabled img, #popupWr .popup .swiper-btn-wr .swiper-button-prev.swiper-button-disabled img { filter: unset; } 
#popupWr .popup .swiper-btn-wr .swiper-button::before,
#popupWr .popup .swiper-btn-wr .swiper-button:after { display: none; } 
#popupWr .popup .swiper-btn-wr .swiper-pagination { position: relative; top: 0; display: inline-block; width: 98px; height: 40px; line-height: 40px; margin: 0 7px; border-radius: 30px; border: 1px solid #bbb; color: #949494; font-size: 18px; } 
#popupWr .popup .swiper-btn-wr .swiper-pagination-current { color: #0F2E6A; font-weight: 900; } 
 
 #startBtn { width: 150px; height: 35px; line-height: 35px; list-style: none; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 600;
            font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif; background: #213867; color: #fff; font-weight: 900; cursor:pointer; }
 
#popupWr .img-area{position: relative; overflow: hidden; margin: 0 auto; border-radius: 5px;}
#popupWr .img-area img{width: 100%; height: 100%; object-fit: cover;}    
#popupWr .point{position: absolute; font-size: 4.4rem; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
#popupWr .point.left{animation: pointLeft infinite 1s;}
#popupWr .point.right{animation: pointRight infinite 1s;}
#popupWr .point.top{animation: pointTop infinite 1s;}
#popupWr .point.bottom{animation: pointBottom infinite 1s;}

@keyframes pointLeft{
    0% {transform: translateX(0);}
    50% {transform: translateX(-10px);}
    100% {transform: translateX(0);}
}
@keyframes pointRight{
    0% {transform: translateX(0);}
    50% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}
@keyframes pointTop{
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
}
@keyframes pointBottom{
    0% {transform: translateY(0);}
    50% {transform: translateY(10px);}
    100% {transform: translateY(0);}
}