@import url('sub.css'); 

/* ==================================================
	inquiry (문의)
================================================== */
#inquiry { display: flex; flex-direction: column; gap: 120px; width: 100%; }
.contact { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.contact .tit_wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; width: 100%; }
.contact .tit_wrap .fs44 { font-family: var(--eng); color: var(--black); letter-spacing: 0; }
.contact .tit_wrap .fs20 { color: var(--black); font-weight: 400; }
.contact > ul { display: flex; gap: 30px; width: 100%; align-items: stretch; }
.contact > ul > li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 70px 20px; box-sizing: border-box; background: var(--grayBg); text-align: center; }
.contact > ul > li img { /* width: 102px;  */height: auto; display: block; }
.contact > ul > li > div { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.contact > ul > li .fs20 { /* font-family: var(--eng);  */color: var(--black); letter-spacing: 0; width: 100%;  font-weight:600;}
.contact > ul > li .fs18 { color: var(--basic); width: 100%; }
.contact > ul > li a { display: inline-flex; align-items: center; gap: 30px; height: 48px; padding: 0 20px; box-sizing: border-box; border: 1px solid var(--black); color: var(--black); font-size: 0.889rem; font-weight: 500; line-height: 1.75; letter-spacing: -4%; transition: all 0.3s linear;  margin-top: auto;}
.contact > ul > li a::after { content: '\f8ce'; font-family: var(--icon); font-size: 18px; font-weight: 400; line-height: 1; color: inherit; transition: transform 0.3s linear; }
.contact > ul > li a:hover { background: var(--main); border-color: var(--main); color: var(--white); }
.contact > ul > li a:hover::after { transform: rotate(45deg); }




/* ==================================================
	recruit (인재채용)
================================================== */
#recruit { display: flex; flex-direction: column; gap: 120px; width: 100%; }
#recruit .intro { display: flex; flex-direction: column; gap: 40px; width: 100%; }
#recruit .intro .tit_wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; width: 100%; }
#recruit .intro .tit_wrap .fs44 { font-family: var(--eng); color: var(--black); letter-spacing: 0; }
#recruit .intro .tit_wrap .fs20 { color: var(--black); font-weight: 400; }

#recruit .fields { display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; }
#recruit .fields .tit_wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; width: 100%; }
#recruit .fields .tit_wrap .fs44 { color: var(--black); }
#recruit .fields .tit_wrap .fs20 { color: var(--black); font-weight: 400; }

#recruit .fields > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 30px; width: 100%; }
#recruit .fields > ul > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 40px; box-sizing: border-box; background: var(--grayBg); text-align: left; }
#recruit .fields > ul > li .info { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#recruit .fields > ul > li .info .name { display: flex; flex-direction: column; gap: 2px; width: 100%; }
#recruit .fields > ul > li .info .fs24 { color: var(--black); font-weight: 700; width: 100%; }
#recruit .fields > ul > li .info .dept { color: var(--main); font-size: 0.889rem; font-weight: 500; line-height: 1.75; letter-spacing: -4%; width: 100%; }
#recruit .fields > ul > li .info .fs18 { color: var(--basic); width: 100%; }

#recruit .fields > ul > li .prefer { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(17, 17, 17, 0.12); box-sizing: border-box; }
#recruit .fields > ul > li .prefer > .fs18 { color: var(--black); font-weight: 500; width: 100%; }
#recruit .fields > ul > li .prefer > ul { display: flex; flex-direction: column; gap: 2px; width: 100%; }
#recruit .fields > ul > li .prefer > ul > li { position: relative; padding-left: 11px; box-sizing: border-box; color: var(--basic); font-size: 0.889rem; font-weight: 400; line-height: 1.75; letter-spacing: -4%; background: none; }
#recruit .fields > ul > li .prefer > ul > li::before { content: ''; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; background: var(--main); }

#recruit .fields .btn_apply { display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: 320px; max-width: 100%; padding: 18px 30px; box-sizing: border-box; border: 1px solid var(--black); background: var(--white); color: var(--black); transition: all 0.3s linear; }
#recruit .fields .btn_apply .ico_mail { position: relative; display: block; width: 40px; height: 47px; flex-shrink: 0; }
#recruit .fields .btn_apply .ico_mail > img { width: 40px; height: 47px; display: block; object-fit: contain; }
#recruit .fields .btn_apply .ico_mail .pen { position: absolute; top: 37.81%; right: 10.42%; bottom: 9.93%; left: 58.57%; width: auto; height: auto; }
#recruit .fields .btn_apply .fs18 { font-weight: 500; color: inherit; }
#recruit .fields .btn_apply:hover { background: var(--main); border-color: var(--main); color: var(--white); }



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

.contact > ul > li  br {display:none;}
}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 
	/* inquiry */
	.contact > ul { gap: 20px; }
	.contact > ul > li { padding: 50px 16px; gap: 24px; }
	.contact > ul > li img {width:auto; height: 80px; }
	.contact > ul > li a { gap: 16px; }


	/* recruit */
	#recruit .fields > ul { gap: 16px; }
	#recruit .fields > ul > li { padding: 30px 20px; }
	#recruit .fields > ul > li .prefer { margin-top: 24px; padding-top: 24px; }

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 
	/* inquiry */
	#inquiry { gap: 80px; }
	.contact { gap: 30px; }
	.contact > ul { flex-direction: column; gap: 12px; }
	.contact > ul > li { padding: 40px 20px; gap: 20px; }
	.contact > ul > li img { height: 72px; }


	/* recruit */
	#recruit { gap: 80px; }
	#recruit .fields { gap: 30px; }
	#recruit .fields > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	#recruit .fields > ul > li { padding: 30px 20px; }
	#recruit .fields .btn_apply { width: 100%; max-width: 320px; padding: 14px 20px; }
	#recruit .fields .btn_apply .ico_mail { width: 32px; height: 38px; }
	#recruit .fields .btn_apply .ico_mail > img { width: 32px; height: 38px; }
	#recruit .fields > ul > li .prefer > ul > li::before { top: 12px; }

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 
	/* inquiry */
	#inquiry { gap: 60px; }
	.contact { gap: 25px; }
	.contact > ul > li { padding: 30px 16px; gap: 16px; }
	.contact > ul > li img { height: 48px; }
	.contact > ul > li a { height: 40px; gap: 10px; padding: 0 14px;}
	.contact > ul > li a::after { font-size: 16px; }



	/* recruit */
	#recruit { gap: 60px; }
	#recruit .intro .tit_wrap .fs20 br { display: none; }
	#recruit .fields { gap: 25px; }
	#recruit .fields > ul { grid-template-columns: 1fr; gap: 12px; }
	#recruit .fields > ul > li { padding: 24px 16px; }
	#recruit .fields > ul > li .prefer { margin-top: 20px; padding-top: 20px; }
	#recruit .fields > ul > li .prefer > ul > li::before { top: 10px; }
	#recruit .fields .btn_apply { max-width: 100%; gap: 12px; padding: 12px 16px; }
	#recruit .fields .btn_apply .ico_mail { width: 28px; height: 33px; }
	#recruit .fields .btn_apply .ico_mail > img { width: 28px; height: 33px; }

}