@CHARSET "UTF-8";

/* 사업단 소개 */
.map_w{position: relative;padding-top: 60px;text-align: center;}
.map_w:before{content:'';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100vw;height: 100%;background: url(/nanum/site/builder/dir/main/img/menu6565/map_bg.jpg)no-repeat 50%/cover;z-index: -1;}
.map_w .m_area{position: relative;margin: 0 auto;width: fit-content;}
.map_w .mobile_map{display:none;}

/* 이미지맵 */
.map_w .m_area .map_rapping area{position:absolute;background-position:center;background-repeat:no-repeat;}
.map_w .m_area .map_rapping area.map_ss01{top: 24.6%;left: 7.3%;width:108px;height:92px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin01.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss02{top: 16.6%;left: 14.6%;width:124px;height:104px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin02.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss03{top: 21.8%;left: 20%;width:93px;height:84px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin03.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss04{top: 24.4%;left: 24.4%;width:104px;height:97px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin04.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss05{top: 29.4%;left: 37.5%;width:89px;height:109px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin05.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss06{top: 36.4%;left: 25.7%;width:125px;height:101px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin06.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss07{top: 2.8%;left: 23.7%;width:242px;height:240px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin07.png);}
.map_w .m_area .map_rapping area.map_dm01{top: 25.7%;right: 27%;width:170px;height:230px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/daemyung_pin01.png);z-index:1;}
.map_w .m_area .map_rapping area.map_dm02{top: 38.2%;right: 5.9%;width:120px;height:135px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/daemyung_pin02.png);z-index:1;}
.map_w .m_area .map_rapping area.map_mb01{top: 52.3%;left: 16.7%;width:285px;height:213px;background-image:url(/nanum/site/builder/dir/main/img/menu6565/mobility_pin01.png);z-index:1;}
.map_w .m_area .map_rapping area.map_ss01.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin01_on.png);}
.map_w .m_area .map_rapping area.map_ss02.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin02_on.png);}
.map_w .m_area .map_rapping area.map_ss03.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin03_on.png);}
.map_w .m_area .map_rapping area.map_ss04.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin04_on.png);}
.map_w .m_area .map_rapping area.map_ss05.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin05_on.png);}
.map_w .m_area .map_rapping area.map_ss06.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin06_on.png);}
.map_w .m_area .map_rapping area.map_ss07.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/seongseo_pin07_on.png);}
.map_w .m_area .map_rapping area.map_dm01.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/daemyung_pin01_on.png);}
.map_w .m_area .map_rapping area.map_dm02.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/daemyung_pin02_on.png);}
.map_w .m_area .map_rapping area.map_mb01.on{background-image:url(/nanum/site/builder/dir/main/img/menu6565/mobility_pin01_on.png);}

/* 팝업창 */
.pop_wrap{display: none;flex-direction: column;gap: 25px;position: absolute;top: 300px;left: 50%;transform: translateX(-50%);padding: 25px;width: 460px;height: 575px;background: #f4f4f4;border-radius: 20px;box-shadow: -15px 15px 15px rgb(0 0 0 / 30%);box-sizing: border-box;z-index: 1;}
.pop_wrap .top_wr{display: flex;justify-content: space-between;align-items: center;}
.pop_wrap .top_wr .title{font-size: 3rem;font-weight: 800;}
.pop_wrap .top_wr .close{width: 48px;height: 48px;background: url(/nanum/site/builder/dir/main/img/menu6565/close_btn.png)no-repeat 50%/contain;text-indent: -9999px;cursor: pointer;transition: .5s;}
.pop_wrap .top_wr .close:hover{transform: rotate(90deg);}
.pop_wrap .camp_wr{padding-right: 10px;overflow-y: auto;}
.pop_wrap .camp_wr::-webkit-scrollbar{width:4px;background-color:#dbdbdb;border-radius:2px;}
.pop_wrap .camp_wr::-webkit-scrollbar-thumb{background-color:#000;border-radius:2px;}
.pop_wrap .camp_wr > ul{display: flex;flex-direction: column;gap: 10px;}
.pop_wrap .camp_wr > ul > li{padding: 20px;background: #fff;border: 1px solid #e7e7e7;border-radius: 5px;text-align: left;}
.pop_wrap .camp_wr > ul > li .tit{position: relative;font-size: 2rem;font-weight: 700;line-height: 1.2;}
.pop_wrap .camp_wr > ul > li.more_bx .tit{padding-right: 25px;}
.pop_wrap .camp_wr > ul > li.more_bx .tit:before{content:'';position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 20px;height: 20px;background: url(/nanum/site/builder/skin/main/img/common/nav_dep3.png) no-repeat 50% / 15px;}
.pop_wrap .camp_wr > ul > li.more_bx.on .tit:before{transform: translateY(-50%) rotate(180deg);}
.pop_wrap .camp_wr > ul > li .info{margin-top: 10px;}
.pop_wrap .camp_wr > ul > li .info p{display: inline;font-size: 1.5rem;font-weight: 400;color: #444;}
.pop_wrap .camp_wr > ul > li .info p:nth-child(n+2){position: relative;margin-left: 7px;padding-left: 10px;}
.pop_wrap .camp_wr > ul > li .info p:nth-child(n+2):before{content:'';position: absolute;top: 3px;left: 0;width: 1px;height: 13px;background: #444;}
.pop_wrap .camp_wr > ul > .more_bx{cursor: pointer;}
.pop_wrap .camp_wr > ul > .more_bx .more{display:none;margin-top: 15px;padding: 15px;background: #f8f8f8;border-radius: 5px;transition: max-height 0.2s ease-out;}
.pop_wrap .camp_wr > ul > .more_bx.on .more{display:block;}
.pop_wrap .camp_wr > ul > .more_bx .more dt{margin-bottom: 5px;font-size: 1.6rem;font-weight: 700;color: #222;}
.pop_wrap .camp_wr > ul > .more_bx .more dd{font-size: 1.5rem;color:#222;}
ul.list > li{padding-left: 13px;font-size: 1.5rem;}
ul.list > li:after{top: 9px;width: 4px;height: 3px;background: #000;}
ul.list > li:nth-child(n+2){margin-top: 5px;}
ul.list > li > ul.list2{margin: 3px 0;}
ul.list2 > li{margin-bottom: 2px;padding-left: 13px;font-size: 1.4rem;color: #444;}
ul.list2 > li:after{top: 10px;width: 5px;height: 1px;background: #000;}


/********************pc********************/
@media all and (max-width:1600px){

.map_w:before{width: 100%;}

}

/********************태블릿********************/
@media all and (max-width:1024px){

.map_w:before{width: 100vw;}
.map_w .m_area img{max-width: 100%;}
.map_w .m_area .map_rapping area{background-position: 0 0;background-size: contain;}
.map_w .m_area .map_rapping area.map_ss01{width: 9.9%;height: 10%;}
.map_w .m_area .map_rapping area.map_ss02{width: 11.7%;height: 12%;}
.map_w .m_area .map_rapping area.map_ss03{width: 8.6%;height: 9%;}
.map_w .m_area .map_rapping area.map_ss04{width: 9.7%;height: 11%;}
.map_w .m_area .map_rapping area.map_ss05{width: 8.6%;height: 12%;}
.map_w .m_area .map_rapping area.map_ss06{width: 11.8%;height: 11%;}
.map_w .m_area .map_rapping area.map_ss07{width: 23%;height: 26%;}
.map_w .m_area .map_rapping area.map_dm01{width: 16.2%;height: 25%;}
.map_w .m_area .map_rapping area.map_dm02{width: 11.5%;height: 15%;}
.map_w .m_area .map_rapping area.map_mb01{width: 27%;height: 23%;}



.pop_wrap{top: 50%;transform: translate(-50%, -50%);}


}


/********************모바일********************/
@media all and (max-width:767px){

.pop_wrap{display: flex !important;gap: 10px;position: relative;top: 0;left: 0;transform: none;margin-top: 20px;padding: 0;width: 100%;height: auto;background: #fff;border-radius: 10px;box-shadow: none;}
.pop_wrap .top_wr .title{font-size: 2.3rem;font-weight: 700;}
.pop_wrap .top_wr .close{display:none;}
.map_w{padding-top: 20px;}
.map_w .m_area map{display:none;}
.pop_wrap .camp_wr{padding-right: 0;}
.pop_wrap .camp_wr > ul > li{padding: 15px;background: #f8f8f8;}
.pop_wrap .camp_wr > ul > li .tit{font-weight: 600;}
.pop_wrap .camp_wr > ul > li.more_bx .tit:before{width: 15px;}
.pop_wrap .camp_wr > ul > li .info{margin-top: 5px;}
.pop_wrap .camp_wr > ul > li .info p{display: block;font-size: 1.7rem;}
.pop_wrap .camp_wr > ul > li .info p:nth-child(n+2){margin-left: 0;padding-left: 0;}
.pop_wrap .camp_wr > ul > li .info p:nth-child(n+2):before{display:none;}
.pop_wrap .camp_wr > ul > .more_bx .more{padding: 0;padding-top: 15px;border-top: 1px dashed #ccc;border-radius: 0;}
.pop_wrap .camp_wr > ul > .more_bx .more dt{font-size: 1.8rem;}
.pop_wrap .camp_wr > ul > .more_bx .more dd{font-size: 1.7rem;}
.pop_wrap .camp_wr > ul > li.more_bx .tit:before{display:none;}

ul.list > li{padding-left: 10px;font-size: 1.7rem;}
ul.list > li:after{top: 8px;width: 5px;height: 2px;}
ul.list2 > li{padding-left: 10px;font-size: 1.6rem;}
ul.list2 > li:after{top: 8px;width: 2px;height: 2px;}


}

/********************모바일********************/
@media all and (max-width:480px){
}


/********************웹********************/
@media all and (min-width:1025px) {

}