@import url('sub.css');

.location_cont {width:95%; max-width:1720px; margin:0 auto; position:relative}
.location_map .map_border{display:none !important;}
.location_map .wrap_controllers{display:none !important;}
.location_map .root_daum_roughmap .cont {display:none !important}
.location_map .root_daum_roughmap_landing {width:100% !important; height:100%}
.location_map .wrap_map {height:100% !important}
.location_map{width: 100%; height:800px; position: relative;}
.location_map .map{position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius:var(--borderR20); overflow:hidden}
.location_map .map.focus{display: block; z-index: 99;}

.location_cont_wrap {position:absolute; left:10%; top:76px; z-index:9999}

.location_tab li {padding:40px 40px 35px 40px; width:430px; position:relative; cursor:pointer; margin-bottom:1px; box-sizing:border-box; transition:all 0.4s}
.location_tab li:hover {background:var(--main) !important; color:var(--white)}
.location_tab li:first-child {border-radius:var(--borderR20) var(--borderR20) 0 0}
.location_tab li:last-child {border-radius:0 0 var(--borderR20) var(--borderR20); margin-bottom:0}
.location_tab li.focus {background:var(--main); color:var(--white);}
.location_tab li.focus::after {font-family:var(--icon); content:"\e941"; color:var(--white); font-size:25px; top:44px; right:30px; position:absolute;}
.location_tab li:not(.focus) {background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(35px);}
.location_tab li h4 {margin-bottom:5px}
.location_tab li h4 span {margin-left:6px; font-weight:400; display:inline-block}
.location_tab li .more_info {display:none; align-items:center; gap:11px}
.location_tab li.focus .more_info {display:flex}
.location_tab li .more_info:first-of-type {padding-top:17px; margin-bottom:1px}
.location_tab li .more_info dt {opacity:0.7}
.location_tab li .more_info dd {opacity:0.8}

.location_btn {display:flex; gap:2px; margin-top:16px}
.location_btn a {width:57px; height:57px; display:flex; border:4px solid rgba(255,255,255,0.85); box-sizing:border-box; border-radius:var(--borderR20); justify-content:center; align-items:center}
.location_btn a img {transition:all 0.4s}
.location_btn a:hover {transform:scale(1.1)}
.location_btn .naver a {background:#10D265}
.location_btn .kakao a {background:#FEDD0D}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){

}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){
.location_tab li {width:350px; padding:25px}
.location_tab li.focus::after {top:27px; right:25px}
.location_cont_wrap {top:2%; left:2%}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
.location_map {height:450px}
.location_cont_wrap {position:static; padding-top:20px}
.location_tab {display:grid; grid-gap:15px; grid-template-columns:repeat(3, 1fr)}
.location_tab li {width:auto; margin-bottom:0; border-radius:10px !important}
.location_tab li:not(.focus) {background:var(--grayBg)}
.location_tab li .more_info:first-of-type {padding-top:10px}
.location_tab li.focus::after {font-size:22px}
.location_tab li h4 {padding-right:30px}
.location_tab li h4 span {margin-left:3px}
.location_btn {position:absolute; top:380px; left:8px; z-index:9999; margin-top:0}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
.location_map {height:250px}
.location_tab {grid-gap:10px; grid-template-columns:repeat(1, 1fr)}
.location_btn {top:200px}
.location_btn a {width:45px; height:45px}
.location_btn .naver a img {width:12px}
.location_btn .kakao a img {width:8px}

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



}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}