@import url('sub.css'); 

/* About - sub_con */
.about_con_visual {position:relative; width:100%; width:100%; height:500px; border-radius:var(--borderR30); overflow:hidden; background:url('/company/img/about_img.jpg') no-repeat center/cover; margin-bottom:30px;}
.about_con_visual_inner {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; padding:0 5%; text-align:center; box-sizing:border-box;}
.about_con_main {color:var(--white); font-weight:700;}
.about_con_desc {color:var(--white); margin-top:15px;}
.about_con_info {width:100%;}

.about_info_list {display:grid; grid-template-columns:repeat(2, minmax(0,1fr));}
.about_info_list li {border-bottom:1px dashed var(--border);}
.about_info_row {display:flex; padding:18px 10px; box-sizing:border-box;}
.about_info_label {flex:0 0 150px; color:var(--black); font-weight:600;}
.about_info_value {flex:1; color:var(--basic);}
.about_info_value span + span {margin-left:20px;}
.about_info_tel, .about_info_fax {position:relative; padding-left:25px;}
.about_info_tel::before, .about_info_fax::before {font-family:var(--icon); font-size:20px; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.about_info_tel::before {content:"call";}
.about_info_fax::before {content:"fax";}

/* Greeting (@content) */
.greet_cnt {display:flex; justify-content:space-between; align-items:flex-start; gap:60px; width:100%; box-sizing:border-box;}
.greet_visual {position:relative; width:calc(50% - 30px); max-width:770px;}
.greet_visual_frame {position:relative; border-radius:var(--borderR30); overflow:hidden;}
.greet_visual_img {display:block; width:100%; height:auto; vertical-align:top;}
.greet_visual_caption {position:absolute; left:50%; transform:translateX(-50%); bottom:-2rem; width:100%; text-align:center;}
.greet_visual_caption img {display:block; width:95%; height:auto; vertical-align:top; margin-right:auto; margin-left:auto;}
.greet_txt {width:calc(50% - 30px); flex:1; box-sizing:border-box; align-self:center;}
.greet_txt .cont_tit {margin:0 0 30px; font-weight:700;}
.greet_txt .greet_body p {margin-bottom:15px;}
.greet_txt .greet_body p:last-child {margin-bottom:0;}


/* Location (@content) */
.location_wrap {width:100%; box-sizing:border-box;}
.location_sec {margin-bottom:150px;}
.location_sec:last-of-type {margin-bottom:0;}
.location_row {display:flex; align-items:center; gap:60px; justify-content:space-between; width:100%; box-sizing:border-box;}
.location_row--map_left .location_map {order:0;}
.location_row--map_left .location_panel {order:1;}
.location_row--map_right .location_panel {order:0;}
.location_row--map_right .location_map {order:1;}
.location_map {width:calc((100% - 60px) / 2); height:550px;}
.location_map_inner {position:relative; border-radius:var(--borderR30); overflow:hidden; border:1px solid var(--border); box-sizing:border-box;}
.location_map_inner .root_daum_roughmap {width:100%;}
.location_map_inner .root_daum_roughmap .wrap_map {height:550px;}
.location_map_inner .wrap_controllers {display:none !important;}
.location_map_inner .root_daum_roughmap_landing .map_border {display:none !important;}
.location_map_inner .root_daum_roughmap .cont {display:none !important;}
.location_panel {width:calc((100% - 60px) / 2); box-sizing:border-box;}

.location_panel_head {display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-bottom:20px;}
.location_tit {margin:0; color:rgba(17,17,17,0.6);}
.location_tit.eng {font-weight:700; letter-spacing: 0; color:var(--black);}
.location_dl {margin:0;}
.location_dl_row {display:flex; flex-wrap:wrap; width:100%; align-items:flex-start; margin-bottom:5px; box-sizing:border-box;}
.location_dl_row:last-of-type {margin-bottom:0;}
.location_dl_row dt{flex:0 0 50px; margin:0; color:var(--black); font-weight:600;}
.location_dl_row dd {flex:1; color:var(--basic);}
.location_dl_row dd + dt {margin-left:30px;}
.location_dl_row--split {display:flex; flex-wrap:wrap; align-items:start;}
.location_dl_row.location_dl_row--split dd {flex: 0 1 auto;}
.location_panel_body {width:100%; max-width:750px;}
.location_btn_map {display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:40px;}
.location_btn_map--end {justify-content:flex-end;}
.location_map_btn {display:inline-flex; align-items:center; justify-content:space-between; gap:8px; width:180px; height:65px; border-radius:var(--borderRall); border:1px solid var(--mapNaver); padding:0 30px; box-sizing:border-box; text-decoration:none; font-weight:600; transition:all 0.3s ease;}
.location_map_btn svg path {transition:all 0.5s ease;}
.location_map_btn--naver {background:var(--mapNaver); color:var(--white);}
.location_map_btn--naver:hover {background:var(--white); color:var(--mapNaver);}
.location_map_btn--naver svg {width:16px; height:16px;}
.location_map_btn--naver svg path {fill:var(--white);}
.location_map_btn--naver:hover svg path {fill:var(--mapNaver);}
.location_map_btn--kakao {background:var(--mapKakao); border-color:var(--mapKakao); color:var(--mapKakaoText);}
.location_map_btn--kakao:hover {background:var(--mapKakaoText); border-color:var(--mapKakaoText); color:var(--mapKakao);}
.location_map_btn--kakao svg {width:12px; height:22px;}
.location_map_btn--kakao svg path {fill:var(--mapKakaoText);}
.location_map_btn--kakao:hover svg path {fill:var(--mapKakao);}
.location_map_btn_txt {display:inline-block; letter-spacing:inherit; line-height:inherit;}
.location_plant_head {display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-bottom:20px;}
.location_map2 {display:flex; align-items:flex-start; gap:30px; width:100%; box-sizing:border-box;}
.location_factory {flex:1;}
.location_factory .location_map {width:100%;}
.location_factory .location_panel {padding-top:0;}
.location_factory_txt {margin-top:30px; width:100%;}
.location_factory .location_btn_map--end {justify-content:flex-end;}

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

.about_info_label {flex:0 0 120px;}

.greet_cnt {gap:50px;}
.greet_txt .cont_tit br {display: none;}
.greet_txt .greet_body p br {display: none;}

.location_row {gap:50px;}
.location_map, .location_panel {width:100%;}
.location_map {height:450px;}
.location_map_inner .root_daum_roughmap .wrap_map {height:450px;}

.location_row--map_right .location_panel {order: 2;}

}


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


}

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


}

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

/* @info (Figma @info) */
.about_con_visual {height:400px; margin-bottom:20px;}
.about_con_main, .about_con_desc {word-wrap:balance;}
.about_con_main br, .about_con_desc br {display:none;}
.about_info_list {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
.about_info_row {padding:13px 10px;}
.about_info_value span + span {margin-left:15px;}
.about_info_tel, .about_info_fax {padding-left: 22px;}
.about_info_tel::before, .about_info_fax::before {font-size:18px;}

.greet_cnt {flex-direction:column; gap:50px 0;}
.greet_visual_caption {top:100%; bottom:auto; transform: translateX(-50%) translateY(-70%);}
.greet_visual {flex:none; width:100%; max-width:100%; text-align:center;}
.greet_txt {width:100%; margin-top:30px;}
.greet_txt .cont_tit {margin: 0 0 20px;}
.greet_txt .greet_body p {margin-bottom:10px;}

.location_sec {margin-bottom:100px;}
.location_row {flex-direction:column; gap:40px;}
.location_map {flex:none; max-width:100%; width:100%;}
.location_map {height:400px;}
.location_map_inner .root_daum_roughmap .wrap_map {height:400px;}
.location_panel_head {gap:0 15px; margin-bottom: 15px;}
.location_btn_map {margin-top: 30px;}
.location_map_btn {width: 152px; height:55px; padding: 0 25px;}
.location_map_btn--naver svg {width: 13px; height: 13px;}
.location_map_btn--kakao svg {width: 10px; height: 18px;}
.location_map2 {flex-direction:column; gap:60px;}
.location_plant_head {gap:10px 15px;}
.location_factory {width:100%;}
.location_btn_map--end {justify-content:flex-start;}

}

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

 /* @info (Figma @info) */
.about_con_visual {height:300px;}
.about_info_row {padding:12px 8px;}
.about_info_label {flex: 0 0 100px;}
.about_info_tel::before, .about_info_fax::before {font-size:16px;}

.greet_cnt {gap:30px 0;}

.location_sec {margin-bottom:60px;}
.location_map {height:350px;}
.location_map_inner .root_daum_roughmap .wrap_map {height:350px;}
.location_row {gap:30px;}
.location_dl_row {margin-bottom:3px;}
.location_dl_row dt {flex: 0 0 35px;}
.location_dl_row dd + dt {margin-left:20px;}
.location_panel_head {gap:0 12px; margin-bottom: 10px;}
.location_btn_map {margin-top:20px;}
.location_map_btn {width:125px; height:45px; padding: 0 20px;}
.location_map_btn--naver svg {width: 11px; height: 11px;}
.location_map_btn--kakao svg {width: 8px; height: 14px;}
.location_map2 {gap:50px;}
.location_factory_txt {margin-top:20px;}
.location_plant_head {gap:0 12px;}


}

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

/* @info (Figma @info) */
.about_con_visual {height:auto; padding-top:50px; padding-bottom:50px;}
.about_con_visual_inner {position:relative; left:auto; top:auto; transform:none;}
.about_info_value span {width:100%; display:block;}
.about_info_value span + span {margin-left:0; margin-top:2px;}

.greet_cnt {gap:20px 0;}
.greet_txt {width:100%; margin-top:20px;}

.location_sec {margin-bottom:50px;}
.location_map {height:300px;}
.location_map_inner .root_daum_roughmap .wrap_map {height:300px;}
.location_row {gap:20px;}
.location_map2 {gap:40px;}
.location_map_btn {width:calc((100% - 5px) / 2); height:40px;}

}