@import url('sub.css'); 

/* 문의 */
body:has(.contact_cont) #visual {position: absolute; top: 0; right: 0;}

.container:has(.contact_cont) {background: url('/company/img/contact_bg.png') no-repeat center/cover; min-height: 100vh; display: flex; align-items: center; justify-content: center;}
.contents_in:has(.contact_cont) {margin-bottom: 0;}


.contact_cont .contact_header {margin-bottom: 50px;}
.contact_cont .contact_header h2 {margin: 10px 0 15px;}
.contact_cont .contact_header p.fs18 {opacity: 0.8;}

.contact_cont .form_box {max-width: 1050px; margin: 0 auto;}

/* 회사개요 */
.about_top_title {font-family: var(--eng); font-size: 4.444rem; line-height: 118.75%; color: var(--black); text-transform: uppercase; margin-bottom: 30px;}
.about_top_item {border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 55px 45px;}
.about_top_item:nth-child(n+4) {border-bottom: none;}
.about_top_item:nth-child(3n) {border-right: none;}
.about_top_item .iconbox {margin-bottom: 25px; display: flex; justify-content: center;}
.about_top_item .iconbox img {max-height: 110px; max-width: 100%;}
.about_top_item h4 {margin-bottom: 10px;}

.about_cont .overview_box .imgbox {width: 50%; max-width: 502px;}
.about_cont .bg_txt_item {min-height: 600px; display: flex; justify-content: center; align-items: center;}
.about_cont .bg_txt_item .bg_txt_item_in {gap: 0; padding: 50px 40px;}
.about_cont .bg_txt_item .fsE14 {text-transform: uppercase; margin-bottom: 20px;}
.about_cont .bg_txt_item .iconbox {margin-bottom: 20px; display: flex; justify-content: center;}
.about_cont .bg_txt_item .iconbox img {max-width: 100%;}
.about_cont .bg_txt_item h5 {margin-bottom: 25px;}
.about_cont .bg_txt_item p.fs18 {color: rgba(255, 255, 255, 0.8);}

.direction_box {display: flex; align-items: center; justify-content: center; padding: 130px 0; position: relative; border-radius: var(--borderR30);}

.direction_box .direction_box_in {position: relative; width: 737px;}
.direction_box .direction_box_in .imgbox img {width: 100%;}

.direction_box .direction_box_in .imgbox::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27%; aspect-ratio: 200 / 59; background: url('/img/logo_up.svg') center / cover no-repeat; opacity: 0.4; mix-blend-mode: luminosity;}

.direction_box .txtbox .iconbox {display: none;}
.direction_box .txtbox dl {display: flex; align-items: flex-start; position: absolute; white-space: nowrap;}
.direction_box .txtbox dt {text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700;}
.direction_box .txtbox dt .mo_txt {display: none;}
.direction_box .txtbox dl.service {gap: 16px; top: -12px; left: 50%; transform: translate(-50%, -100%);}
.direction_box .txtbox dl.service dt {color: var(--sub);}
.direction_box .txtbox dl.solution {gap: 10px; bottom: -16px; left: 50%; transform: translate(-50%, 100%);}
.direction_box .txtbox dl.solution dt {color: #3B53DA;}

.direction_box .txtbox dl.business,
.direction_box .txtbox dl.regulation {flex-direction: column; gap: 5px;}
.direction_box .txtbox dl.business {top:353px; left: -10px; text-align: right; justify-content: flex-end; transform: translate(-100%, 0);}
.direction_box .txtbox dl.regulation {top: 353px; right: -10px; transform: translate(100%, 0);}

.direction_box .txtbox dl.business dt {color: #3B95DA; width: 100%;}
.direction_box .txtbox dl.regulation dt {color: var(--main); width: 100%;}


/*******************************************************************************
    @media 1770px
*******************************************************************************/
@media all and (max-width:1770px){
/* 회사개요 */
.about_cont .overview_box .imgbox {width: 40%;}

.direction_box .direction_box_in {width: 560px;}
.direction_box .txtbox dl.regulation {top: 264px;}
.direction_box .txtbox dl.business {top: 264px;}
}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* 회사개요 */
.about_cont .overview_box .imgbox {width: 35%;}

.direction_box .direction_box_in {width: 460px;}

.direction_box .txtbox dl .fs18 {font-size: 16px;}
.direction_box .txtbox dl.service {top: -5px;}
.direction_box .txtbox dl.solution {bottom: -6px;}

.direction_box .txtbox dl.regulation {top: 215px;}
.direction_box .txtbox dl.business {top: 215px;}
}
/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 문의 */
body:has(.contact_cont) #visual {position: static; padding-bottom: 90px;}

.container:has(.contact_cont) {display: block; padding-bottom: 200px; min-height: initial;}

/* 회사개요 */
.about_top_title {font-size: 4rem;}
.about_top_item .iconbox img {max-height: 95px;}
.about_cont .overview_box .imgbox {width: 200px}

.about_cont .bg_txt_item {min-height: initial;}
.about_cont .bg_txt_item .bg_txt_item_in {padding: 40px 30px;}


.about_cont .sub_art:has(.direction_box) {flex-direction: column;}
.about_cont .sub_art:has(.direction_box) .sub_art_tit {flex-basis:initial; max-width: 100%; width: 100%; position: static;}
.about_cont .sub_art:has(.direction_box) .sub_art_cont {width: 100%; flex: initial;}
}
/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* 문의 */
body:has(.contact_cont) #visual {padding-bottom: 60px;}
.container:has(.contact_cont) {padding-bottom: 150px;}

.contact_cont .contact_header {margin-bottom: 30px;}
.contact_cont .contact_header h2 {margin: 5px 0 10px;}

/* 회사개요 */
.about_top_title {font-size: 3.5rem;}
.about_top_item {padding: 40px 30px;}
.about_top_item .iconbox img {max-height: 85px;}

.about_cont .overview_box .imgbox {width: 150px}

.about_cont .bg_txt_item .bg_txt_item_in {padding: 30px 25px;}
.about_cont .bg_txt_item .iconbox img {height: 65px;}


.direction_box .direction_box_in {width: 360px;}
.direction_box .txtbox dl .fs18 {font-size: 15px;}

.direction_box .txtbox dl.regulation {top: 167px;}
.direction_box .txtbox dl.business {top: 167px;}
}


/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* 회사개요 */
.direction_box {padding: 40px 30px;}
.direction_box .direction_box_in {width: 100%;}
.direction_box .direction_box_in .imgbox {display: none;}
.direction_box .txtbox {display: flex; flex-direction: column; gap: 30px;}
.direction_box .txtbox .dl_wrap .iconbox {display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; border-radius: var(--borderR30); margin-bottom: 10px;}
.direction_box .txtbox .dl_wrap:has(dl.service) .iconbox {background: var(--sub);}
.direction_box .txtbox .dl_wrap:has(dl.solution) .iconbox {background: #3B53DA;}
.direction_box .txtbox .dl_wrap:has(dl.business) .iconbox {background: #3B95DA;}
.direction_box .txtbox .dl_wrap:has(dl.regulation) .iconbox {background: var(--main);}
.direction_box .txtbox dt {margin-bottom: 5px;}
.direction_box .txtbox dt .mo_txt {display: block; line-height: 1.2;} 


.direction_box .txtbox dl {position: static; transform:  none !important; text-align: center !important; justify-content: center !important; flex-direction: column !important; gap: 0 !important; align-items: center; white-space: wrap;}
.direction_box .txtbox dl br.brFixed {display: none !important;}
}

/*******************************************************************************
    @media 680px
*******************************************************************************/
@media all and (max-width:680px){
body:has(.contact_cont) #visual {padding-bottom: 0; }
.container:has(.contact_cont) {padding-bottom: 100px;}

.contact_cont {margin-top: 60px;}

/* 회사개요 */
.about_top_title {font-size: 3.2rem; margin-bottom: 20px;}

.about_top_list {grid-template-columns: repeat(2, 1fr);}
.about_top_item:nth-child(n+3) {border-bottom: 1px solid var(--border);}
.about_top_item:nth-child(2n) {border-right: none;}
.about_top_item:nth-child(3n) {border-right: 1px solid var(--border);}
.about_top_item:last-child {border-right: none;}
.about_top_item {padding: 30px 20px;}
.about_top_item .iconbox {margin-bottom: 15px;}
.about_top_item .iconbox img {max-height: 70px;}
.about_top_item h4 {margin-bottom: 5px;}

.about_cont .overview_box .imgbox {width: 120px}

.about_cont .bg_txt_item .bg_txt_item_in {padding: 25px 20px;}
.about_cont .bg_txt_item .iconbox {margin-bottom: 10px;}
.about_cont .bg_txt_item .iconbox img {height: 55px;}
.about_cont .bg_txt_item .fsE14 {margin-bottom: 10px;}
.about_cont .bg_txt_item h5 {margin-bottom: 10px;}
.about_cont .bg_txt_item h5 br {display: none;}


.direction_box {padding: 30px 25px;}
.direction_box .txtbox .dl_wrap .iconbox img {height: 50px;}
.direction_box .txtbox .dl_wrap .iconbox {height: 75px;}
}

/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){
/* 회사개요 */
.about_top_title {margin-bottom: 10px;}

.about_top_list {grid-template-columns: 1fr;}
.about_top_item {border-right: none !important; padding: 20px 15px;}
.about_top_item:last-child {border-bottom: none !important;}
}