@import url('sub.css'); 

/* 오시는 길 */
.loaction_cont .mapbox {margin: 0 0 50px;}
.loaction_cont .mapbox .root_daum_roughmap_landing {width:100% !important; height:420px; overflow:hidden;}
.loaction_cont .mapbox .wrap_map {height:100% !important; width: 100%;}
.loaction_cont .mapbox .root_daum_roughmap .wrap_controllers, .location-content figure .root_daum_roughmap .cont {display:none;} 
.loaction_cont .mapbox .root_daum_roughmap_landing .map_border {display:none;}

.loaction_cont .infobox {display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.loaction_cont .infobox_dl {display: flex; flex-direction: column; gap: 10px;}
.loaction_cont .infobox_dl dl {display: flex; gap: 5px 10px; flex-wrap: wrap; align-items: center;}
.loaction_cont .infobox_dl dl dt {display: flex; gap: 15px; align-items: center;}
.loaction_cont .infobox_dl dl dt::before {width: 40px; aspect-ratio: 1/1; background-color: rgba(52, 48, 233, 0.1); border-radius: 50%; background-size: 20px auto; background-position: center; background-repeat: no-repeat; content: "";}
.loaction_cont .infobox_dl dl.address dt::before {background-image: url("/contact/img/location_icon.svg");}
.loaction_cont .infobox_dl dl.tel dt::before {background-image: url("/contact/img/tel_icon.svg");}
.loaction_cont .infobox_dl dl.email dt::before {background-image: url("/contact/img/mail_icon.svg");}
.loaction_cont .infobox_link {display: flex; gap: 10px; flex-shrink: 0;}
.loaction_cont .infobox_link a {width: 200px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; border: 1px solid;}
.loaction_cont .infobox_link a.kakao {background-color: #FAE100; border-color: transparent;}
.loaction_cont .infobox_link a.naver {background-color: #03CF5D; border-color: #03CF5D;}

.loaction_cont .infobox_link a::before {font-size: 28px; content: "\e0c8"; font-variation-settings: "FILL" 1; transition: inherit;}
.loaction_cont .infobox_link a.kakao::before {color: #007DFF;}

.loaction_cont .infobox_link a.kakao:hover {background-color: #007DFF; color: var(--white);}
.loaction_cont .infobox_link a.kakao:hover::before {color: var(--white);}
.loaction_cont .infobox_link a.naver:hover {background-color: var(--white); color: #03CF5D !important;}



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

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

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 오시는 길 */
.loaction_cont .mapbox {margin: 0 0 30px;}
.loaction_cont .mapbox .root_daum_roughmap_landing {height:360px;}

.loaction_cont .infobox_link a {width: 160px; height: 50px;}
.loaction_cont .infobox_link a::before {font-size: 24px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 오시는 길 */
.loaction_cont .mapbox .root_daum_roughmap_landing {height:280px;}

.loaction_cont .infobox_dl {width: 100%;}
.loaction_cont .infobox_dl dl {flex-direction: column; gap: 5px; align-items: flex-start;}
.loaction_cont .infobox_dl dl dt {gap: 9px;}
.loaction_cont .infobox_dl dl dt::before {background-size: 16px auto; width: 35px;}
.loaction_cont .infobox_link {gap: 5px;}

.loaction_cont .infobox_link {width: 100%;}
.loaction_cont .infobox_link a {width: 50%; height: 45px; gap: 5px;}
.loaction_cont .infobox_link a::before {font-size: 20px;}
}
/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){

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

}