@import url('sub.css'); 

/*********** 문의하기 / 데모신청 *************/
.inquiry_tab {display: flex; gap: 5px; margin-bottom: 60px;}
.inquiry_tab li {flex: 1; min-width: 0;}
.inquiry_tab li a {display: block; padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--borderR5); background: var(--white); text-align: center; color: var(--black); transition: var(--transition);}
.inquiry_tab li a:hover {border-color: var(--main); color: var(--main);}
.inquiry_tab li.on a {border-color: var(--main); background: var(--main); color: var(--white);}

.inquiry_title {display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px; text-align: center;}
.inquiry_title .fs50 {line-height: 1.24; word-break: keep-all;}
.inquiry_title .fs18 {word-break: keep-all;}

.inquiry_wrap {display: flex; align-items: stretch; border-radius: var(--borderR20); background: var(--white);}
.inquiry_info {flex-shrink: 0; width: 29.23%; padding: 40px; border-right: 1px solid var(--border); box-sizing: border-box;}
.inquiry_head {display: flex; flex-direction: column; gap: 20px;}
.inquiry_head .fs36 {line-height: 1.278;}
.inquiry_head .fs18 {word-break: keep-all;}
.inquiry_contact {display: flex; flex-direction: column; gap: 15px; padding-top: 35px;}
.inquiry_contact li {display: flex; align-items: flex-start; gap: 15px;}
.inquiry_contact li::before {display: block; flex-shrink: 0; padding: 17px; border-radius: 50%; background: #aaa; font-family: var(--icon); font-size: 26px; line-height: 1; font-weight: 400; color: var(--white);}
.inquiry_contact li.call::before {content: 'call'; background: var(--main);}
.inquiry_contact li.location::before {content: 'location_on';}
.inquiry_contact li.alarm::before {content: 'alarm';}
.inquiry_contact li.group::before {content: 'group';}
.inquiry_contact li.assignment::before {content: 'assignment';}
.inquiry_contact li dl {display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;}
.inquiry_contact li dl dd {word-break: keep-all;}
.inquiry_form {flex: 1; min-width: 0; padding: 40px; box-sizing: border-box;}


/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

.inquiry_info {width: 32%; padding: 35px 30px;}
.inquiry_form {padding: 35px 30px;}

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.inquiry_wrap {flex-direction: column;}
.inquiry_info {width: 100%; border-right: 0; border-bottom: 1px solid var(--border);}
.inquiry_contact {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

.inquiry_tab {margin-bottom: 40px;}
.inquiry_title {gap: 15px; margin-bottom: 40px;}
.inquiry_info {padding: 30px 20px;}
.inquiry_head {gap: 15px;}
.inquiry_contact {padding-top: 25px;}
.inquiry_contact li::before {padding: 13px; font-size: 22px;}
.inquiry_form {padding: 30px 20px;}
.inquiry_contact li br {display: none;} 

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.inquiry_tab {margin-bottom: 30px;}
.inquiry_tab li a {padding: 10px;}
.inquiry_title {gap: 10px; margin-bottom: 30px;}
.inquiry_title .fs50 {line-height: 1.3;}
.inquiry_info {padding: 25px 20px;}
.inquiry_head {gap: 10px;}
.inquiry_contact {display: flex; flex-direction: column; gap: 12px; padding-top: 20px;}
.inquiry_contact li {gap: 12px;}
.inquiry_contact li::before {padding: 7px; font-size: 18px;}
.inquiry_contact li dl {gap: 0;}
.inquiry_form {padding: 25px 20px;}

}
