@import url('sub.css'); 

#about { /* display: flex; flex-direction: column; gap: 40px;  */width: 100%; }
#about .tit_wrap { display: flex; flex-direction: column; gap: 20px; text-align: center; width: 100%; margin:0 0 40px;}
#about .tit_wrap .fs34 { color: var(--black); }
#about .tit_wrap .fs34 span { color: var(--main); line-height:inherit; letter-spacing:inherit;}
#about .tit_wrap .fs20 { color: var(--black); font-weight: 400; }
#about .tit_wrap .fs18 { color: var(--basic); }
#about figure { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; overflow: hidden; background:url("/company/img/about_visual.jpg") no-repeat center / cover; height:410px;}
#about figure img {}
#about table { width: 100%; border-top: 2px solid var(--black); border-collapse: collapse; table-layout: fixed; }
/* #about table tr { display: grid; grid-template-columns: 260px 1fr 260px 1fr; } */
#about table th { background: var(--grayBg); color: var(--black); font-size: 1rem; font-weight: 500; line-height: 1.667; letter-spacing: -4%; text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--border); box-sizing: border-box; }
#about table td { background: var(--white); color: var(--basic); font-size: 1rem; font-weight: 400; line-height: 1.667; letter-spacing: -4%; text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--border); box-sizing: border-box; }

#about table col:nth-child(1),
#about table col:nth-child(3) {
    width: 200px; 
}
#about table col:nth-child(2),
#about table col:nth-child(4) {
    width: auto; 
}


#greeting { display: flex; align-items: stretch; position: relative; width: 100%; margin-bottom: 30px; }
#greeting figure { position: relative; width: 45%; flex-shrink: 0; background: var(--bk000) url('/company/img/greeting_bg.jpg') no-repeat center / cover;  max-width:680px;}
/* #greeting figure::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 159px; aspect-ratio: 1 / 1; display: block; z-index: 2; background-color: var(--main); background-image: url('/company/img/greeting_logo.png'); background-repeat: no-repeat; background-position: center; background-size: 70% auto; } */
#greeting .tit_wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 60px 0 60px 80px; box-sizing: border-box;   max-width:745px;}
#greeting .tit_wrap .fs44 span { color: var(--main); line-height: inherit; letter-spacing: inherit; }
/* #greeting .tit_wrap .fs30 {text-align: justify;} */
#greeting .tit_wrap .txt { display: flex; flex-direction: column; gap: 10px; }
#greeting .tit_wrap .txt br {display:none;}
#greeting .tit_wrap .txt .fs18 { color: var(--basic);  text-align: justify;}
#greeting .tit_wrap .txt .fs18 strong { font-weight: 500; color: var(--black);  letter-spacing:inherit;}
#greeting .tit_wrap .fs24 { margin-top: 20px; font-weight: 700; }
#greeting .tit_wrap .fs24 span { font-weight: 300; line-height:inherit; letter-spacing:inherit;}


.location { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.location .tit_wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; width: 100%; }
.location .tit_wrap .fs44 { font-family: var(--eng); color: var(--black); letter-spacing: 0; }
.location .tit_wrap .fs20 { color: var(--black); font-weight: 400; }
.location .box { display: flex; gap: 30px; width: 100%; align-items: stretch; }
.location .box figure { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--grayBg); aspect-ratio: 750 / 492; }
.location .box figure .root_daum_roughmap .map_border {display:none;}
.location .box figure .root_daum_roughmap { width: 100%; height: 100%; }
.location .box figure .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; }
.location .box figure .root_daum_roughmap iframe { width: 100% !important; height: 100% !important; }
.location .box figure .map_btn { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 1px; z-index: 2; }
.location .box figure .map_btn a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s linear; }
.location .box figure .map_btn a img { width: 20px; height: 20px; display: block; }
.location .box figure .map_btn a[href*="naver"] { background: #10d265; }
.location .box figure .map_btn a[href*="kakao"] { background: #feda0d; }
.location .box figure .map_btn a[href*="google"] { background: var(--white); border: 1px solid var(--border); }
.location .box figure .map_btn a:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(17, 17, 17, 0.12); filter: brightness(1.08); }
.location .box figure .map_btn a[href*="naver"]:hover { background: #3de882; }
.location .box figure .map_btn a[href*="kakao"]:hover { background: #ffea66; }
.location .box figure .map_btn a[href*="google"]:hover { background: var(--white); border-color: var(--border); }
.location .box > ul { flex: 1; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.location .box > ul > li { display: flex; flex-direction: column; gap: 12px; padding: 35px 0; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.location .box > ul > li .fs20 { color: var(--black); font-weight: 700; }
.location .box > ul > li dl { display: grid; grid-template-columns: 60px 1fr; gap: 5px 0; width: 100%; }
.location .box > ul > li dt { color: var(--black); font-size: 1rem; font-weight: 500; line-height: 1.667; letter-spacing: -4%; }
.location .box > ul > li dd { color: var(--basic); font-size: 1rem; font-weight: 400; line-height: 1.667; letter-spacing: -4%; }
.location .box > ul > li dd a { color: inherit; }

.way_list { display: flex; gap: 30px; width: 100%; align-items: stretch; }
.way_list > li { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 40px 40px 80px; box-sizing: border-box; background: var(--grayBg); }
.way_list > li .txt { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.way_list > li .txt .fs24 { color: var(--black); font-weight: 700; width: 100%; }
.way_list > li .txt > ul { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.way_list > li .txt > ul > li { color: var(--basic); font-size: 1rem; font-weight: 400; line-height: 1.667; letter-spacing: -4%; }
.way_list > li .txt > ul > li.tit { color: var(--black); font-weight: 500; }
.way_list > li .txt > ul > li.dots { position: relative; padding-left: 12px; box-sizing: border-box; }
.way_list > li .txt > ul > li.dots::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: var(--main); }
.way_list > li .ico { position: absolute; right: 40px; bottom: 40px; width: 70px; height: 70px; display: block; pointer-events: none; }
.way_list > li .ico img { width: 70px; height: 70px; display: block; object-fit: contain; }


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

	#greeting br {display:none;}



}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 
	#about table col:nth-child(1),
	#about table col:nth-child(3) { width: 200px; }
	
	#greeting .tit_wrap { padding: 50px 0 50px 50px; }
	#greeting figure::after { width: 130px; height: 130px;}
	
	.location .box { gap: 20px; }
	.way_list { gap: 20px; }
	.way_list > li { padding: 30px 30px 70px; }
	.way_list > li .ico { right: 30px; bottom: 30px; }
	

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 
	#about { gap: 30px; }
	#about .tit_wrap { gap: 15px; }
	#about .tit_wrap br {display:none;}
	#about figure {height:300px;}
	#about figure img {width:250px; height:auto;}
	#about table tr { grid-template-columns: 160px 1fr 160px 1fr; }
	#about table th, #about table td { padding: 14px 15px;}
	#about table col:nth-child(1),
	#about table col:nth-child(3) { width: 160px; }
	#greeting { flex-direction: column; margin-bottom: 0; }
	#greeting figure { width: 100%; aspect-ratio: 680 / 500;  max-width:100%;}
	#greeting figure::after { right: 20px; bottom: -20px; transform: none; width: 120px; height: 120px; }
	#greeting .tit_wrap { padding: 50px 0 0; }
	#greeting .tit_wrap .txt .fs18 br { display: none; }
	
	.location { gap: 30px; }
	.location .box { flex-direction: column; gap: 20px; }
	.location .box figure { aspect-ratio: 16 / 10; }
	.location .box > ul > li { padding: 20px 0; }
	.way_list { flex-direction: column; gap: 16px; }
	.way_list > li { padding: 30px 30px 90px; }
	.way_list > li .txt > ul > li.dots::before {top:12px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 
	#about { gap: 25px; }
	#about figure {height:200px;}
	#about figure img {width:150px; height:auto;}
	#about table th, #about table td { padding: 10px;}
	#greeting figure { aspect-ratio: 1 / 1; }
	#greeting figure::after { width: 90px; height: 90px; right: 15px; bottom: -15px; }
	#greeting .tit_wrap { padding: 40px 0 0; gap: 15px; }
	#greeting .tit_wrap .fs24 { margin-top: 10px; }
	#greeting .fs30 {font-size:1.2rem;}
	
	.location { gap: 25px; }
	.location .box figure .map_btn { left: 12px; bottom: 12px; }
	.location .box figure .map_btn a { width: 42px; height: 42px; }
	.location .box > ul > li { padding: 15px 0; gap: 5px; }
	.location .box > ul > li dl { grid-template-columns: 45px 1fr; gap: 3px 0; }
	.way_list > li { padding: 24px 20px 80px; }
	.way_list > li .ico { right: 20px; bottom: 20px; width: 56px; height: 56px; }
	.way_list > li .ico img { width: 56px; height: 56px; }
	.way_list > li .txt > ul > li.dots::before {top:10px;}

}