@charset "UTF-8";

.mainV::after{display:none;}


/*!퍕업존*/
#main .popupZBtn{position:fixed; z-index: 51; right:0; bottom:150px; width:40px; height:auto; border-radius:16px 0 0 16px; background:var(--gradient); color:#fff; word-break: break-all; text-align:center; padding:16px 4px; font-family: var(--style-font); font-size:1.9rem; font-weight: 600; display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;}
#main .popupZBtn .color{word-break: break-all; color:#fbffa7;}
#main .popupZBtn i{transition:transform .3s;}
#main .popupZBtn:hover i,
#main .popupZBtn:focus i{transform:rotate(180deg);}
#main .popupZ{position:fixed; z-index:50; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.9); min-width: 0;}
#main .popupZ .mid{position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); max-width:1600px; max-height:80vh; width:1400px;}
#main .popupZ .mid .flex{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px;  margin-bottom:16px;}
#main .popupZ .mid .tit{display:inline-block; font-family: var(--style-font); font-weight: 600; color:#fff; font-size:3.2rem;}
#main .popupZ .mid .popzSlideBtn{display:inline-flex; align-items:center; gap:8px; color:#fff;}
#main .popupZ .mid .popzSlideBtn .control{display:inline-flex; align-items:center; color:#fff;}
#main .popupZ .mid .popzSlideBtn .control *{color:#fff;}
#main .popupZ .mid .popzSlideBtn .stopPlayPop{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;}
#main .popupZ .mid .popzSlideBtn .swiper-pagination-current{color:#ffe800 !important;}
#main .popupZ .mid .num{display:inline-block; color:#fff; margin-left:24px;}
#main .popupZ .mid .list{display:flex; flex-direction:row; }
#main .popupZ .mid .list li{width:calc(100% / 3 - 16px);}
#main .popupZ .mid .list li a{position:relative; display:inline-block; width:100%; height:100%; background:#fff; border-radius:16px; overflow:hidden;}
#main .popupZ .mid .list li a img{object-fit: cover; min-width:100%; min-height:100%;}
#main .popupZ .mid .xBtnW{position:absolute; bottom:-64px; right:0; display:flex; align-items:center; justify-content:center; gap:8px;}
#main .popupZ .mid .oneday{color:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:100px; border:1px solid #fff; padding:8px 24px;}
#main .popupZ .mid .x{color:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:100px; border:1px solid #fff; padding:8px 24px;}
#main .popupZ .swiper-slide{height:auto;}
@media all and (max-width:1480px){
    #main .popupZ .mid{width:calc(100% - 80px);}
}
@media all and (max-width:1024px){
    #main .popupZ .mid{width:calc(100% - 60px);}
    #main .popupZBtn{width:30px; font-size: 1.5rem;}
}
@media all and (max-width:480px){
    #main .popupZ .mid{top:24%;}
    #main .popupZ .mid{width:calc(100% - 40px);}
    #main .popupZ .mid .flex{justify-content:center; gap:0;}
    #main .popupZ .mid .tit{font-size: 2.5rem; }
    #main .popupZ .mid .list li a{border-radius:8px;}
    #main .popupZ .mid .oneday,
    #main .popupZ .mid .x{padding:8px 16px;}
}

#main .mainBg{position:absolute; left:0; bottom:0; width:1240px; height:850px; background:url(../img/common/favicon.svg) no-repeat 50% 50%; background-size:cover; z-index:-1; opacity:.1;}


#main .visual{position:relative; padding:40px 0; padding-bottom:100px; background:#F2F6FC; }
#main .visual::before{position:absolute; content:''; left:0; bottom:0; width:100%; height:80px; border-radius:120px 120px 0 0; background:#fff;}
#main .visual .mainV{display:flex; gap:40px;}
#main .visual .mainV .quick{padding:40px 0; background:var(--gradient); width:260px; height:400px; display:flex; flex-direction:column; gap:24px; border-radius:30px; box-shadow:3px 7px 15px rgba(0,0,0,0.2);}
#main .visual .mainV .quick > .tit{color:#fff; font-size: 2.8rem; text-align:center; font-family: var(--style-font);}
#main .visual .mainV .quick .list{display:flex; flex-direction:column; flex:1; }
#main .visual .mainV .quick .list > li{flex:1; }
#main .visual .mainV .quick .list > li a{display:inline-flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 24px; width:100%; height:100%; color:#fff; border-bottom:1px solid rgba(255,255,255,0.5); text-decoration: none;}
#main .visual .mainV .quick .list > li:last-child a{border-bottom:0;}
#main .visual .mainV .quick .list > li a .tit{font-family: var(--style-font); font-size: 2.1rem; font-weight: 500;}
#main .visual .mainV .quick .list > li a i{display:inline-flex; align-items:center; justify-content:center; border-radius:100%; background:rgba(0,0,0,0.5); width:40px; height:40px; font-size: 2rem;}
#main .visual .mainV .swiper{width:100%; overflow:hidden; border-radius:30px; box-shadow:3px 7px 15px rgba(0,0,0,0.2);}
#main .visual .mainV [class^="banner"]{position:relative; display:flex; flex-direction:column; align-items:center; gap:16px;}
#main .visual .mainV .bannerC{flex:1; min-width:0;}
#main .visual .mainV .bannerR{width:490px;}
#main .visual .mainV .swiper{height:400px;}
#main .visual .mainV .swiper-slide{background-position:center; background-size:cover; height:400px;}
#main .visual .mainV .swiper-slide img{display:block; width:100%;height:100%;object-fit:cover;}
#main .visual .mainV .swiper-slide .txtW{position:absolute; left:64px; top:80px; z-index: 1; display:flex; flex-direction:column; gap:8px; color:#fff;}
#main .visual .mainV .swiper-slide .txtW .txt{font-size: 2.5rem; font-weight: 500; text-shadow:2px 2px 0 #000;}
#main .visual .mainV .swiper-slide .txtW .tit{font-family: 'Waguri'; font-size: 6rem; text-shadow:2px 2px 0 #000;}
#main .controlBox{display:flex; gap:8px; align-items:center; justify-content:center;}
#main .controlBox .control{display:flex; align-items:center; justify-content:center;}
#main .controlBox .control .stopPlay{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; }
#main .swiper-button-next, 
#main .swiper-button-prev{z-index: 0;position:relative; left:auto; right:auto; top:auto; margin-top:auto; padding:10px; width:40px; height:40px; color:#111; }
#main .swiper-pagination{position:relative;z-index: 0;}
#main .swiper-pagination-fraction{bottom:auto; top:auto;}
#main .swiper-pagination-current{font-size: 2.1rem; font-weight: 600; color:var(--color-main);}

@media all and (max-width:1480px){
  #main .visual .mainV{flex-wrap:wrap; gap:24px 40px;}
  #main .visual .mainV .bannerC{order:1; }
  #main .visual .mainV .bannerR{order:2; }
  #main .visual .mainV .quick{order:3; width:100%; height:auto; padding:16px 40px; flex-direction:row;}
  #main .visual .mainV .quick > .tit{transform:translateY(4px);}
  #main .visual .mainV .quick .list{flex-direction:row;justify-content:space-evenly;}
  #main .visual .mainV .quick .list > li{flex:none;}
  #main .visual .mainV .quick .list > li a{padding:12px; border-bottom:0;}
  #main .visual .mainV .quick .list > li a .tit{flex:1;}
  #main .visual .mainV .quick .list > li a .tit{font-size: 1.9rem;}
  #main .visual .mainV .quick .list > li a i{width:auto; height:auto; background:transparent;}
  #main .visual .mainV .swiper,
  #main .visual .mainV .swiper-slide{height:300px;}
  #main .visual .mainV .bannerR{width:390px;}
  #main .visual .mainV .swiper-slide .txtW{left:40px; top:48px; gap:0;}
  #main .visual .mainV .swiper-slide .txtW .tit{font-size: 5rem;}
}
@media all and (max-width:1024px){
  #main .visual .mainV .bannerC{flex:none; width:100%;}
  #main .visual .mainV .quick{flex-direction:column; flex:1; padding:16px 24px; gap:16px; width:auto; height:300px; width:260px;}
  #main .visual .mainV .quick .list{flex-direction:column;}
}
@media all and (max-width:768px){
  #main .visual{padding:24px 0; padding-bottom:80px;}
  #main .visual::before{height:60px; border-radius:40px 40px 0 0;}
  #main .visual .mainV{flex-direction:column; align-items:center;}
  #main .visual .mainV .quick{order:1; width:100%; padding:16px; gap:8px;}
  #main .visual .mainV .quick .list{flex-direction:initial; flex-wrap:wrap;}
  #main .visual .mainV .quick .list > li{width:50%;}
  #main .visual .mainV .quick > .tit{transform:none; font-size: 2.1rem;}
  #main .visual .mainV .quick .list > li a .tit{font-size: 1.7rem;}
  #main .visual .mainV .bannerC{order:2; }
  #main .visual .mainV .bannerR{order:3; width:100%; height:auto;}
  #main .visual .mainV .swiper, #main .visual .mainV .swiper-slide{height:auto;}
  #main .visual .mainV .quick,
  #main .visual .mainV .swiper{border-radius:16px;}
  #main .visual .mainV .swiper-slide .txtW{left:32px; top:40px;}
  #main .visual .mainV .swiper-slide .txtW .txt{font-size: 1.9rem;}
  #main .visual .mainV .swiper-slide .txtW .tit{font-size: 4rem;}
}
@media all and (max-width:480px){
  #main .visual .mainV{gap:8px;}
  #main .visual .mainV .quick{order:3;}
  #main .visual .mainV .bannerC{order:1;}
  #main .visual .mainV .bannerR{order:2;}
  #main .visual .mainV .quick .list{flex-direction:column;}
  #main .visual .mainV .quick .list > li{width:100%;}
  #main .visual .mainV .quick .list > li a{padding:8px 0;}
  #main .visual .mainV [class^="banner"]{gap:4px;}
  #main .swiper-pagination-current{font-size: 1.9rem;}
  #main .visual::before{height:40px; border-radius:24px 24px 0 0;}
}


#main .notiT{display:flex; align-items:center; gap:40px; padding-right:60px;}
#main .notiT .tit{font-size: 4rem; font-family: var(--style-font);}
#main .more{position:absolute; right:0; top:0; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; text-decoration: none;}
#main .more i{font-size: 4rem; color:#676767; transition:.3s;}
#main .more:hover i,
#main .more:focus i{transform:rotate(180deg);}
@media all and (max-width:1480px){
  #main .notiT{padding-right:48px;}
  #main .notiT .tit{font-size: 3.2rem; }
  #main .more{width:40px; height:40px;}
}
@media all and (max-width:768px){
  #main .notiT .tit{font-size: 2.8rem;}
}
@media all and (max-width:480px){
  #main .notiT .tit{font-size: 2.5rem;}
  #main .more{top:-2px;}
  #main .more i{font-size: 3.2rem;}
}

/*?소식*/
#main .mainNoti{display:flex; gap:80px;}
#main .mainNoti > .notiW{position:relative; flex:1; display:flex; flex-direction:column; gap:16px; min-width:0;}
#main .mainNoti > .notiW.notiL .notiT .tit .bold{color:var(--color-main);}
#main .mainNoti > .notiW.notiR .notiT .tit .bold{color:var(--color-sub);}
#main .notiT .notiTab{display:inline-flex; align-items:center; }
#main .notiT .notiTab a{display:inline-flex; align-items:center; justify-content:center; text-align:center; padding:10px 16px; border-radius:8px 24px 8px 8px; color:#676767; font-family: var(--style-font); font-size: 2.1rem; font-weight: 500; text-decoration: none;}
#main .notiT .notiTab a.on{background:var(--gradient); color:#fff; box-shadow:4px 4px 4px rgba(0,0,0,0.15);}
#main .mainNoti .notiTabList > li{display:none;}
#main .mainNoti .notiTabList > li.on{display:block;}
#main .mainNoti > .notiW .notiList{display:flex; flex-direction:column; }
#main .mainNoti > .notiW .notiList a{position:relative; display:inline-flex; align-items:center; width:100%; gap:12px; padding:24px 0; padding-right:140px; border-bottom:1px dashed #ccc; text-decoration: none;}
#main .mainNoti > .notiW .notiList a .blt{display:inline-flex; align-items:center; justify-content:center; border-radius:100px; padding:4px 12px; font-size: 2.1rem; white-space:nowrap;}
#main .mainNoti > .notiW.notiL .notiList a .blt{border:1px solid var(--color-main); color:var(--color-main); }
#main .mainNoti > .notiW.notiR .notiList a .blt{border:1px solid var(--color-sub); color:var(--color-sub);}
#main .mainNoti > .notiW .notiList a .txt{display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.8rem; }
#main .mainNoti > .notiW .notiList a .date{position:absolute; right:0; top:50%; transform:translateY(-50%); font-size: 2.1rem; color:#676767;}
@media all and (max-width:1760px){
  #main .notiT{gap:24px;}
  #main .notiT .notiTab a{padding:10px; font-size: 1.7rem;}
}
@media all and (max-width:1480px){
  #main .mainNoti{gap:40px;}
  #main .notiT{gap:8px;}
  #main .notiT .notiTab a{border-radius:4px 16px 4px 4px;}
}
@media all and (max-width:1280px){
  #main .notiT{gap:24px;}
  #main .mainNoti{flex-direction:column;}
  #main .mainNoti > .notiW .notiList{flex-direction:row; flex-wrap:wrap; gap:0 24px;}
  #main .mainNoti > .notiW .notiList > li{width:calc(50% - 12px);}
  #main .mainNoti > .notiW .notiList a{padding-right:110px;}
  #main .mainNoti > .notiW .notiList a .txt{font-size: 2.5rem;}
  #main .mainNoti > .notiW .notiList a .date,
  #main .mainNoti > .notiW .notiList a .blt{font-size: 1.9rem;}
}
@media all and (max-width:1024px){
  #main .mainNoti > .notiW .notiList{flex-direction:column;}
  #main .mainNoti > .notiW .notiList > li{width:100%;}
}
@media all and (max-width:768px){
  #main .mainNoti > .notiL .notiT{flex-wrap:wrap; gap:4px 24px; align-items:flex-start;}
  #main .notiT .notiTab{justify-content:center;}
  #main .notiT .notiTab a{font-size: 1.5rem; white-space: nowrap;}
  #main .mainNoti > .notiW{gap:0;}
  #main .mainNoti > .notiW .notiList a{padding:16px 0; padding-right:100px;}
  #main .mainNoti > .notiW .notiList a .blt{padding:4px 8px; font-size: 1.5rem;}
  #main .mainNoti > .notiW .notiList a .txt{font-size: 2.1rem;}
  #main .mainNoti > .notiW .notiList a .date{font-size: 1.5rem;}
}
@media all and (max-width:480px){
  #main .notiT .notiTab{flex-wrap:wrap;}
  #main .notiT .notiTab > li{width:50%;}
  #main .notiT .notiTab a{width:100%; white-space: initial;}
  #main .mainNoti{gap:24px;}
  #main .mainNoti > .notiL .notiT{padding-right:0;}
  #main .mainNoti > .notiW .notiList a{gap:6px; padding:8px 0; padding-right:80px;}
  #main .mainNoti > .notiW .notiList a .blt{padding:0; border:0 !important; border-radius:0; font-weight: 600; display:none;}
  #main .mainNoti > .notiW .notiList a .blt,
  #main .mainNoti > .notiW .notiList a .date{font-size: 1.3rem;}
  #main .mainNoti > .notiW .notiList a .txt{font-size: 1.9rem;}
}


/*?시설안내*/
#main .facInfo{position:relative; display:flex; flex-direction:column; gap:24px; margin-top:80px;}
#main .facInfo .notiT{gap:16px;}
#main .facInfo .notiT .tit .bold{color:var(--color-main);}
#main .facInfo .notiT .txt{font-size: 2.8rem; font-weight: 500; color:#676767; font-family: var(--style-font);}
#main .facInfo .clipCard > li > a{position:relative;}
#main .facInfo .clipCard .imgW{position:relative; padding-top:65%; border-radius:30px 30px 40px 30px; overflow:hidden;}
#main .facInfo .clipCard .imgW img{position:absolute; content:''; min-width:100%; min-height:100%; object-fit: cover; left:50%; top:50%; transform:translate(-50%, -50%); transition:.3s;}
#main .facInfo .clipCard .txtW{position:absolute; right:0; bottom:0; background:#fff; padding:16px 30px; border-radius:30px 0; display:inline-flex; flex-direction:column; gap:4px;}
#main .facInfo .clipCard .txtW .tit{display:inline-block; padding-right:30px; font-size: 2.8rem; color:#444; font-weight: 600; font-family: var(--style-font); overflow:hidden; text-overflow:ellipsis; }
#main .facInfo .clipCard .txtW .txt{font-size: 1.9rem; color:#444;}
#main .facInfo .clipCard .txtW .txt .num{color:var(--color-sub2); font-weight: 600;}
#main .facInfo .clipCard .txtW i{position:absolute; display:inline-flex; align-items: center; justify-content: center; width:30px; height:30px; font-size: 1.5rem; border-radius:100%; background:#999; color:#fff; right:16px; top:16px;transform-origin:center bottom;  will-change:transform;}
#main .facInfo .clipCard .txtW::before,
#main .facInfo .clipCard .txtW::after{position:absolute; content:''; width:45px; height:45px; background:url(../img/main/shape.svg) no-repeat 50% 50%; background-size:cover;}
#main .facInfo .clipCard .txtW::before{left:-45px; bottom:0; transition:.3s;}
#main .facInfo .clipCard .txtW::after{right:0; top:-45px; transition:.3s;}
#main .facInfo .clipCard > li > a:focus .txtW .tit{text-decoration: underline;}
#main .facInfo .clipCard > li > a:hover img{transform:translate(-50%, -50%) scale(1.2);}
#main .facInfo .clipCard > li > a:hover i{background:var(--color-sub2); animation: shortBounce .45s cubic-bezier(.34,1.6,.64,1) both;}
@keyframes shortBounce{
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }  /* 위로 짧게 */
  55%  { transform: translateY(2px); }   /* 아래 살짝 눌림 */
  75%  { transform: translateY(-2px); }  /* 미세 반동 */
  100% { transform: translateY(0); }
}
#main .facInfo .controlBox{gap:64px;}
#main .facInfo .swiper{margin-right:initial; margin-left:initial;}
#main .facInfo .swiper-pagination3{height:4px; background:#eee; border-radius:4px; overflow:hidden;}
#main .facInfo .swiper-pagination-progressbar{position:relative;}
#main .facInfo .swiper-pagination-progressbar.swiper-pagination-horizontal{height:6px; border-radius:20px; background:#ccc;}
#main .facInfo .swiper-pagination-progressbar-fill{background:var(--color-main) !important;}

@media all and (max-width:1480px){
  #main .facInfo .clipCard .imgW{min-height:240px; padding-top:50%; border-radius:30px;}
  #main .facInfo .clipCard .txtW{position:relative; width:100%; padding:16px;}
  #main .facInfo .clipCard .txtW .txt{display:inline-flex; flex-direction:column;}
  #main .facInfo .clipCard .txtW::before, 
  #main .facInfo .clipCard .txtW::after{display:none;}
  #main .facInfo .notiT .txt{font-size: 2.1rem;}
}
@media all and (max-width:1024px){
  #main .facInfo .clipCard .imgW{min-height:150px;}
  #main .facInfo .clipCard .imgW{border-radius:24px;}
  #main .facInfo .clipCard .txtW i{display:none;}
  #main .facInfo .clipCard .txtW{padding:16px 0 0 0;}
  #main .facInfo .clipCard .txtW .tit{font-size: 2.1rem;}
  #main .facInfo .clipCard .txtW .txt .stxt{font-size: 1.5rem;}
  #main .facInfo .notiT .txt{font-size: 1.9rem;}
}
@media all and (max-width:768px){
  #main .facInfo{margin-top:60px;}
  #main .facInfo .notiT{flex-direction:column; gap:0; align-items:flex-start; padding-right:0;}
  #main .facInfo .notiT .txt{font-size: 1.7rem;}
  #main .facInfo .clipCard .txtW{padding:8px 0 0 0;}
}
@media all and (max-width:480px){
  #main .facInfo{gap:16px; margin-top:40px;}
  #main .facInfo .notiT .txt{font-size: 1.3rem;}
  #main .facInfo .clipCard .txtW .txt{flex-direction:row; gap:8px; font-size: 1.7rem;}
  #main .facInfo .clipCard .txtW .tit{font-size: 1.9rem;}
  #main .facInfo .clipCard .imgW{border-radius:16px;}
  #main .facInfo .controlBox{gap:24px;}
}


/*?포천도시공사 story*/
#main .story{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 0; padding:24px 120px; border-radius:30px 100px; background:linear-gradient(90deg, #213a64, #4375ca); margin:80px auto; position:relative;}
#main .story .txtW{position:relative; display:flex; flex-direction:column; gap:0; padding-left:250px; font-family: var(--style-font); color:#fff;}
#main .story .txtW::before{position:absolute; content:''; left:0; top:-70px; width:200px; height:200px; background:url(../img/main/story.svg) no-repeat 50% 50%; background-size:contain;}
#main .story .txtW .tit{ font-size: 4rem; }
#main .story .txtW .txt{font-size: 2.1rem;}
#main .story .sns{display:inline-flex; gap:8px; }
#main .story .sns > li{display:inline-flex;}
#main .story .sns a{display:inline-flex;}
@media all and (max-width:1480px){
  #main .story{padding:24px 120px 24px 190px;}
  #main .story .txtW{padding-left:0;}
  #main .story .sns a{width:50px;}
  #main .story .txtW::before{left:-200px;}
}
@media all and (max-width:1024px){
  #main .story .txtW .tit{font-size: 3.2rem;}
  #main .story .txtW .txt{font-size: 1.9rem;}
}
@media all and (max-width:768px){
  #main .story{margin:60px auto;}
  #main .story{padding:32px; padding-top:40px; border-radius:30px 70px;}
  #main .story .txtW::before{left:-60px; top:-100px; height:120px; width:120px; transform:rotate(340deg);}
  #main .story .txtW .tit{font-size: 2.8rem;}
}
@media all and (max-width:480px){
  #main .story{border-radius:16px 40px; margin:40px auto;}
  #main .story .txtW{width:100%;}
  #main .story .txtW .tit{font-size: 2.5rem; padding-right:50px;}
  #main .story .txtW .txt{font-size: 1.7rem;}
  #main .story .sns a{width:44px;}
  #main .story .txtW::before{right:-50px; top:-80px; left:auto; transform:rotate(35deg);}
}

/*?배너모음*/
#main .mainBan{padding:16px 0; width:100%; background:#fff; border-top:1px solid #dbdbdb; }
#main .mainBan .inner{display:flex; align-items:center; gap:40px;}
#main .mainBan .swiper{flex:1;}
#main .mainBan .tit{font-size: 2.5rem; font-family: var(--style-font); font-weight: 500;}
#main .mainBan .control{display:inline-flex; align-items:center; }
#main .mainBan .swiper a{display:inline-flex; align-items:center; justify-content:center; height:60px; width:100%; border:1px solid #e5e5e5; border-radius:16px;}
#main .mainBan .swiper a img{object-fit: contain; min-height:100%;}
#main .mainBan .list{height:60px;}
@media all and (max-width:1024px){
  #main .mainBan .inner{gap:16px;}
}
@media all and (max-width:768px){
  #main .mainBan .tit{font-size: 1.9rem;}
}
@media all and (max-width:480px){
  #main .mainBan .inner{gap:0;}
}