@import url('sub.css'); 

/* 공통 */
.basic_about_cont {width: 100%; max-width: 100%;}
.basic_about_cont #subtitle {width: 90%; max-width: 1590px; margin:0 auto;}

/* 상단 텍스트 */
.about_top_txt .fs46 {margin: 0 0 15px; }
.about_top_txt .fs20 {font-weight: 400; text-decoration: underline;}

.about_top_txt .infoBox {display: flex; justify-content: center; padding-top: 55px;}
.about_top_txt .infoBox dl {padding: 0 40px; border-right: 1px solid var(--border); display: flex; align-items: center; gap: 30px; text-align: left;}
.about_top_txt .infoBox dl:first-child {padding-left: 0;}
.about_top_txt .infoBox dl:last-child {border-right: none; padding-right: 0;}

.about_top_txt .infoBox dl .fs16 {font-family: var(--eng); font-weight: 500; letter-spacing: 0; text-transform: uppercase; opacity: 0.8;}
.about_top_txt .infoBox dl .fs20 {text-decoration: none; color: var(--black); font-weight: 600;}

.about_cont .fs60 {margin: 0 0 60px;}

/* 비전 */
#vision {background: url('/about/img/vision_bg.jpg') no-repeat center/cover;}
#vision .vision_txtbox .eng {font-weight: 700; margin: 0 0 30px;}
#vision .vision_imgbox img {max-width: 100%;}

/* 오시는 길 */
.location_cont .mapbox {margin: 0 0 30px;}
.location_cont .mapbox .root_daum_roughmap_landing {width:100% !important; height:520px; overflow:hidden; border: 1px solid var(--border);}
.location_cont .mapbox .wrap_map {height:100% !important; width: 100%;}
.location_cont .mapbox .root_daum_roughmap .wrap_controllers, .location-content figure .root_daum_roughmap .cont {display:none;} 
.location_cont .mapbox .root_daum_roughmap_landing .map_border {display:none;}


.location_cont .infobox {display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.location_cont .infobox_dl dl {display: flex; gap: 8px; align-items: flex-start;}

.location_cont .infobox_dl dl dt {display: flex;}
.location_cont .infobox_dl dl dt::before {color: var(--black); font-size: 28px;}

.location_cont .infobox_dl dl.addr {gap: 6px;}
.location_cont .infobox_dl dl.addr dt {margin-top: 3px;}
.location_cont .infobox_dl dl.addr dt::before {content: '\e0c8';}
.location_cont .infobox_dl dl.addr dd {font-weight: 700;}

.location_cont .infobox_dl .tel_fax_wrap {display: flex; gap: 3px 30px; margin: 10px 0 0; flex-wrap: wrap;}
.location_cont .infobox_dl .tel_fax_wrap dt p {font-weight: 600;}

.location_cont .infobox_link {display: flex; gap: 2px}
.location_cont .infobox_link a {display: flex; width: 160px; padding: 15px 0; justify-content: center; align-items: center; transition: all 0.4s ease; gap: 25px; border-radius: 5px;}
.location_cont .infobox_link a path {transition: all 0.4s ease;}
.location_cont .infobox_link a:first-child {background: #10D265; border: 1px solid #10D265;}
.location_cont .infobox_link a:last-child {background: #FEDA0D; color: #1A0000; border: 1px solid #FEDA0D;}

.location_cont .infobox_link a:first-child:hover {background: var(--white); color: #10D265 !important; border-color: #10D265;}
.location_cont .infobox_link a:first-child:hover path {fill: #10D265;}
.location_cont .infobox_link a:last-child:hover {background: #1A0000; color: #FEDA0D !important; border-color: #1A0000;}
.location_cont .infobox_link a:last-child:hover path {fill: #FEDA0D;}


/*******************************************************************************
    @media 1770px
*******************************************************************************/
@media all and (max-width:1770px){
/* 공통 */
.about_top_txt .fs46 br {display: none;}
}

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

}

/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
    .about_top_txt .infoBox dl {padding: 0 20px; gap: 20px;}
    .about_top_txt .infoBox dl img {height: 60px;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.about_cont .fs60 {margin: 0 0 40px;}

/* 상단 텍스트 */
.about_top_txt .infoBox {flex-wrap: wrap;}
.about_top_txt .infoBox dl {width: 100%; padding: 30px 0; border-right: none; border-bottom: 1px solid var(--border);}
.about_top_txt .infoBox dl:first-child {padding-top: 0;}
.about_top_txt .infoBox dl:last-child {padding-bottom: 0; border-bottom: none;}


/* 비전 */
#vision .vision_txtbox .eng {margin: 0 0 20px;}

/* 오시는 길 */
.location_cont .mapbox {margin: 0 0 20px;}
.location_cont .mapbox .root_daum_roughmap_landing {height: 400px;}

.location_cont .infobox_dl dl.addr {gap: 4px;}
.location_cont .infobox_dl dl dt::before {font-size: 24px;}

.location_cont .infobox_dl .tel_fax_wrap {gap: 3px 20px; margin: 5px 0 0; flex-wrap: wrap;}

.location_cont .infobox_link {width: 100%;}
.location_cont .infobox_link a {width: 50%; padding: 10px; gap: 15px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.about_cont .fs60 {margin: 0 0 20px;}

/* 상단 텍스트 */
.about_top_txt .infoBox {padding-top: 30px;}
.about_top_txt .infoBox dl {padding: 20px 0;}

/* 비전 */
#vision .vision_txtbox .eng {margin: 0 0 10px;}

/* 오시는 길 */
.location_cont .mapbox .root_daum_roughmap_landing {height: 280px;}

.location_cont .infobox_dl dl dt::before {font-size: 20px;}
.location_cont .infobox {gap: 20px;}

.location_cont .infobox_link a {border-radius: 3px;}
.location_cont .infobox_link a svg {width: 18px; height: auto;}
}

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

}

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

}