@import url('sub.css'); 

/* 인사말 */
.greeting_cont .greeting_in {display: flex; align-items: flex-start; gap: 60px;}
.greeting_cont .greeting_in .imgbox {width: 45%; max-width: 650px; flex-shrink: 0; border-radius: 30px; overflow: hidden;}
.greeting_cont .greeting_in .imgbox img {width: 100%;}
.greeting_cont .greeting_in .txtbox {flex: 1; padding-top: 100px; position: relative; background-color: var(--white);}
.greeting_cont .greeting_in .txtbox h3 {margin-bottom: 35px; position: relative; z-index: 2;}
.greeting_cont .greeting_in .txtbox h3 strong {line-height: inherit; letter-spacing: inherit;}
.greeting_cont .greeting_in .txtbox::after {position: absolute; content: ''; width: 100%; max-width: 607px; background: url('/company/img/symbol.png') right / 147px auto no-repeat; left: 0; top: 20px; height: 130px; z-index: 0; opacity: 0.2; mix-blend-mode: luminosity;}

/* 찾아오시는 길 */
.location_cont .mapbox {margin-bottom: 50px;}
.location_cont .mapbox .root_daum_roughmap_landing {width:100% !important; height:550px; overflow:hidden; border: 1px solid var(--border); border-radius:30px;}
.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;}
.location_cont .infobox .info_txt {flex: 1;}
.location_cont .infobox .info_txt > p.addr {font-size: 1.222rem; line-height: 154.545%; letter-spacing: var(--letter-spacing-small-heading); margin-bottom: 12px;}
.location_cont .infobox .info_txt .dl_wrap {display: flex; flex-wrap: wrap; gap: 5px 30px; }
.location_cont .infobox .info_txt .dl_wrap dl {display: flex; gap: 8px; align-items: center;}
.location_cont .infobox .info_txt .dl_wrap dl dt {width: 36px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--main); display: flex; align-items: center; justify-content: center; color: var(--white);}
.location_cont .infobox .info_txt .dl_wrap dl dt::before {font-size: 20px;}
.location_cont .infobox .info_txt .dl_wrap dl.call dt::before {content: '\e0b0';}
.location_cont .infobox .info_txt .dl_wrap dl.mail dt::before {content: '\e158';}

.location_cont .infobox .info_link {display: flex; gap: 4px; flex-shrink: 0;}
.location_cont .infobox .info_link a {width: 165px; padding: 15px 0; gap: 14px; align-items: center; justify-content: center; border-radius: 9999px; display: flex; border: 1px solid;}

.location_cont .infobox .info_link a.naver {background-color: #10d265; border-color: #10d265;}
.location_cont .infobox .info_link a.kakao {background-color: #FEDA0D; border-color: #FEDA0D;}

.location_cont .infobox .info_link a span,
.location_cont .infobox .info_link a svg path {transition: var(--transition);}


.location_cont .infobox .info_link a.kakao:hover {background-color: var(--black); border-color: var(--black);}
.location_cont .infobox .info_link a.kakao:hover span {color: #FEDA0D;}
.location_cont .infobox .info_link a.kakao:hover svg path {fill: #FEDA0D;}

.location_cont .infobox .info_link a.naver:hover {background-color: var(--white); }
.location_cont .infobox .info_link a.naver:hover span {color: #10d265;}
.location_cont .infobox .info_link a.naver:hover svg path {fill: #10d265;}


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

}

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

}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 인사말 */
.greeting_cont .greeting_in {gap: 40px;}
.greeting_cont .greeting_in .txtbox {padding-top: 50px}
.greeting_cont .greeting_in .txtbox::after {background-size: 120px auto; top: -10px;}

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

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 인사말 */
.greeting_cont .greeting_in {flex-wrap: wrap; gap: 0;}
.greeting_cont .greeting_in .txtbox {width: 100%; flex: auto; padding-top: 80px;}
.greeting_cont .greeting_in .txtbox::after {max-width: 450px; top: 20px;}
.greeting_cont .greeting_in .imgbox {border-radius: 20px; width: 100%; max-width: 100%;}

/* 찾아오시는 길 */
.location_cont .mapbox {margin-bottom: 35px;}
.location_cont .mapbox .root_daum_roughmap_landing {height: 350px; border-radius: 20px;} 

.location_cont .infobox {flex-wrap: wrap;}
.location_cont .infobox .info_txt {width: 100%; flex: auto;}
.location_cont .infobox .info_txt > p.addr {margin-bottom: 8px;}

.location_cont .infobox .info_txt .dl_wrap dl dt {width: 34px;}
.location_cont .infobox .info_txt .dl_wrap dl dt::before {font-size: 18px;}

.location_cont .infobox .info_link {width: 100%;}
.location_cont .infobox .info_link a {width: 140px; padding: 10px 0;}
.location_cont .infobox .info_link a svg {width: 18px; height: auto;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 인사말 */
.greeting_cont .greeting_in .txtbox {padding-top: 50px;}
.greeting_cont .greeting_in .txtbox h3 {margin-bottom: 20px;}
.greeting_cont .greeting_in .txtbox::after {background-size: 100px auto; max-width: 390px; top: -10px;}

/* 찾아오시는 길 */
.location_cont .mapbox {margin-bottom: 20px;}
.location_cont .mapbox .root_daum_roughmap_landing {height: 250px;}


.location_cont .infobox {gap: 20px;}
.location_cont .infobox .info_txt .dl_wrap {gap: 5px 20px;}
.location_cont .infobox .info_txt .dl_wrap dl {gap: 6px;}
.location_cont .infobox .info_txt .dl_wrap dl dt {width: 32px;}
.location_cont .infobox .info_txt .dl_wrap dl dt::before {font-size: 16px;}


.location_cont .infobox .info_link a {width: 130px; gap: 10px}
.location_cont .infobox .info_link a svg {width: 16px;}
}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){

}

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

}