@charset "utf-8";

#mapPortfoilo{font-size:16px;font-weight:400;line-height:1.65;color:#777;font-family:'Pretendard'}

/* 검색창 */
#mapSch .top_area{position:relative;z-index:1;padding:110px 0;text-align:center;background:#f2f2f2}
#mapSch .top_area .tit{width:100%;max-width:var(--mainsize);margin:0 auto;font-size:19px;background:#f2f2f2}
#mapSch .top_area .tit span{font-size:21px;font-weight:600;color:var(--primary)}
#mapSch .top_area .tit h1{margin-top:15px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:#111}
#mapSch .top_area .tit div{margin-top:30px}
#mapSch form{display:flex;align-items:center;width:400px;height:55px;margin:40px auto 0;padding:0 20px 0 25px;border-radius:30px;border:3px solid #e1e1e1;background:#fff}
#mapSch input{width:calc(100% - 24px);height:100%;padding:0 10px 0 0;border:none;font-size:16px;font-weight:500;background:none}
#mapSch button{padding-top:1px;color:var(--dark)}
#mapSch button svg{stroke-width:2.5px}
#mapSch input:focus, #mapSch input:active{border:none!important}

/* 지도 */
#map{width:100%;height:42vh;color:#fff}
#map .wrap{position:absolute;left:50%;bottom:40px;z-index:1001;transform:translateX(-50%);width:270px;padding:12px 15px 15px;border-radius:8px;color:#777;background:#fff;box-shadow:4px 4px 16px rgba(0,0,0,.1)}
#map .wrap .info .title{display:flex;margin-bottom:6px;font-size:15px;font-weight:600;color:#111}
#map .wrap .info .title .close{display:flex;cursor:pointer;margin-left:auto}
#map .wrap .info .title .close img{margin:auto;width:15px}
#map .wrap .body{display:flex;align-items:center}
#map .wrap .body .img{width:85px;flex-shrink:0}
#map .wrap .body .img img{width:100%;border-radius:4px}
#map .wrap .body .desc{width:calc(100% - 85px);padding-left:8px;font-size:13px}
#map .wrap .body .desc .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px} 
#map .wrap .body .desc a{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;color:#fff;background:#aaa}

/* 지도 - 리스트 */
#mapList{margin-top:60px;padding-bottom:100px}
#mapList ul{display:grid;grid-template-columns:repeat(4, 1fr);column-gap:20px;row-gap:30px;max-width:var(--mainsize);margin:0 auto}
#mapList ul:has(.empty){display:block!important}
#mapList ul li{overflow:hidden;border-radius:12px;border:1px solid #e1e1e1;font-size:15px}
#mapList ul li .img{overflow:hidden;display:block; position:relative}
#mapList ul li .img img{width:100%}
#mapList ul li .img .mask{opacity:0;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0,0,0,.5);transition:all .25s}
#mapList ul li .img svg{width:15px;height:15px;color:#fff;transition:all .15s}
#mapList ul li .info{padding:15px;text-align:center}
#mapList ul li .info .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700;color:#111}
#mapList ul li .info .kwd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 0;font-size:14px;line-height:1.4}
#mapList ul li .info .add{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:15px;padding-top:15px;border-top:1px dotted #e1e1e1;font-size:14px;color:#999}
#mapList ul li .info .add svg{vertical-align:text-top;width:15px;height:15px}
#mapList ul li .info dl{margin:10px 0 5px;display:flex;align-items:center;justify-content:center;line-height:1}
#mapList ul li .info dl dt{padding:7px 12px;margin-right:10px;border-radius:4px;font-size:13px;font-weight:600;color:#fff;background:#aaa}
#mapList ul li .info dl dd{font-weight:500}
#mapList ul li.empty{padding:50px 0;border:none;font-size:16px;color:#aaa;text-align:center}
#mapList ul li.empty img{width:45px;margin-bottom:20px}
@media(hover:hover){
#mapList ul li:hover .img .mask{opacity:1}
#mapList ul li:hover .img svg{width:30px;height:30px}
}
/* 지도 - 뷰 */
#mapView .top_area{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;height:300px;background:var(--dark)}
#mapView .top_area .tit{position:relative;z-index:1;font-size:36px;font-weight:700;color:#fff}
#mapView .top_area .bg{position:absolute;top:-30px;left:-30px;width:calc(100% + 60px);height:calc(100% + 60px);opacity:.75;filter:blur(8px);background:center -200px no-repeat;background-size:cover}
#mapView .cont{display:flex;align-items:center;position:relative;max-width:1200px;margin:60px auto}
#mapView .cont .site_img{overflow:hidden;width:50%;padding:30px;border-radius:12px;border:1px solid #e1e1e1;background:#fff}
#mapView .cont .site_img img{width:100%;border-radius:16px}
#mapView .cont .info{width:50%;padding-left:60px;font-size:15px;font-weight:500;line-height:1.65}
#mapView .cont .info dl{display:flex}
#mapView .cont .info dl+dl{margin-top:10px}
#mapView .cont .info dl dt{flex-shrink:0;width:100px;font-weight:700;color:#111}
#mapView .cont .info dl dd{color:#999}
#mapView .cont .info dl dd.name{font-size:16px;color:#111}
#mapView .cont .info dl dd.kwd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mapView .cont .info dl dd.type{display:flex;align-items:center}
#mapView .cont .info dl dd.type a{height:27px;padding:0 10px;margin-left:10px;border-radius:4px;border:1px solid var(--primary45);font-size:13px;font-weight:600;line-height:25px;color:var(--primary);transition:all .2s}
#mapView .cont .btns{display:flex;flex-wrap:wrap;padding-top:20px}
#mapView .cont .btns button{width:100%;border-radius:4px;height:60px;margin-bottom:10px;font-size:16px;font-weight:600;color:#fff;background:var(--primary-h);transition:all .25s}
#mapView .cont .btns button svg{vertical-align:middle;width:18px;height:18px;margin-left:6px}
#mapView .cont .btns div{display:grid;grid-template-columns:repeat(2, 1fr);gap:7px;width:100%}
#mapView .cont .btns a{display:flex;display:flex;align-items:center;justify-content:center;height:45px;border-radius:4px;border:1px solid var(--primary45);color:var(--primary);transition:all .25s}
#mapView .cont .btns a.cm_view{grid-column:span 2}
#mapView .full_img{padding:60px;background:var(--pale);text-align:center}
#mapView .full_img img{width:100%;max-width:1200px}
@media(hover:hover){
#mapView .cont .info dl dd.type a:hover{border-color:var(--primary)}
#mapView .cont .btns button:hover{background:var(--primary)}
#mapView .cont .btns a:hover{border-color:var(--primary)}
}
@media(max-width:1400px){
#mapSch .top_area{padding:70px 15px}
#mapSch .top_area .tit{font-size:17px}
#mapSch .top_area .tit span{font-size:18px}
#mapSch .top_area .tit p{font-size:35px}
}
@media(max-width:1340px){
#mapList ul{padding:0 15px}
}
@media(max-width:1240px){
#mapView .cont{padding:0 15px}
#mapView .cont .info{padding-left:30px}
}
@media(max-width:1024px){
#map{height:30vh;min-height:170px}
#mapList ul{grid-template-columns:repeat(3, 1fr)}
#mapView .top_area{height:250px}
#mapView .top_area .tit{font-size:32px}
#mapView .cont{margin:40px auto}
#mapView .cont .site_img{width:55%;padding:20px}
#mapView .cont .info{width:45%}
#mapView .cont .info{padding-left:20px}
}
@media(max-width:768px){
#mapSch .top_area{padding:50px 15px}
#mapSch .top_area .tit{font-size:14px}
#mapSch .top_area .tit p{margin-top:5px;font-size:30px}
#mapList{margin-top:25px;dding-bottom:60px}	
#mapList ul{grid-template-columns:repeat(2, 1fr);gap:12px}	
#mapList ul li{font-size:14px}
#mapList ul li .info{padding:12px}
#mapList ul li .info .name{font-size:16px}
#mapList ul li .info .add{padding-top:12px;margin-top:12px}
#mapList ul li .info dl dt{padding:7px 10px;margin-right:5px;font-size:12px}
#mapList ul li .info dl dd{font-size:13px}
#mapView{padding:20px 0 0;border-top:1px solid #e1e1e1}
#mapView .top_area{height:auto;background:none}
#mapView .top_area .tit{font-size:24px;color:#111}
#mapView .top_area .bg{display:none}
#mapView .cont{display:block;padding:15px;margin:0}
#mapView .cont .site_img{display:block;width:100%}
#mapView .cont .info{width:100%;padding:20px}
#mapView .full_img{padding:30px}
}
@media(max-width:480px){
#mapSch .top_area .tit span{font-size:15px}
#mapSch .top_area .tit p{font-size:25px}
#mapSch .top_area .tit div{margin-top:15px}
#mapSch form{width:100%;height:45px;padding:0 12px 0 15px;border-width:2px}
#mapSch form button svg{width:20px;height:20px}
#mapList ul li{font-size:13px}
#mapList ul li .btns{flex-wrap:wrap}
#mapList ul li .info .code{font-size:14px}
#mapList ul li .info .kwd{margin:2px 0;font-size:13px}
#mapList ul li .info .add{font-size:13px}
#mapList ul li .info dl dt{padding:4px 8px;font-size:11px}
#mapList ul li .info dl{margin:5px 0 0}
#mapView .top_area .tit{font-size:18px}
#mapView .cont .info{padding:15px;font-size:14px}
#mapView .cont .info dl+dl{margin-top:5px}
#mapView .cont .info dl dt{width:80px;font-size:13px}
#mapView .cont .info dl dd.name{font-size:15px}
#mapView .cont .info dl dd.type a{height:25px;padding:0 6px;font-size:12px;line-height:24px}
#mapView .cont .btns button{height:55px;font-size:15px}
}
@media(max-width:380px){
#mapList ul{grid-template-columns:repeat(1, 1fr)}	
}