@charset "utf-8";
.sec-title {margin-bottom: var(--space-60);}
.sec-title p {margin-bottom: 15px; font-size: var(--font-size-18); line-height: 1.5em; color: var(--primary-color);}
.sec-title h3 {font-size: var(--font-size-40); line-height: 1.4em; color: var(--dark-color);}
.sec-title h3 + p {margin-bottom: 0; margin-top: 15px; font-weight: 500; color: #454545;}
.sec-title.white-color p, .sec-title.white-color h3 {color: #fff;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.page-about .full-img {height: 541px; width: 100%; margin-bottom: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px); overflow: hidden;; text-align: center;}
.page-about .full-img img {height: 100%; object-fit: cover;}
.page-about .spacing-letter {margin: var(--space-50) 0 var(--space-90); text-align: justify; text-align-last: justify; letter-spacing: 1em; font-size: var(--font-size-24); line-height: 1.5em; font-weight: 800; color: #dfdfdf;}
.greeting-boxes {display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 20px; overflow: hidden; border: 1px solid #ddd;}
.greeting-box {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(25px, calc(45 / var(--inner) * 100vw), 45px) 15px; border-right: 1px solid #ddd; text-align: center;}
.greeting-box:nth-child(even) {background: #fafafa;}
.greeting-box:last-child {border-right: none;}
.greeting-box h3 {margin: clamp(12px, calc(25 / var(--inner) * 100vw), 25px) 0 8px;}

.sec-about-history {padding: var(--space-90) 0; margin: var(--space-90) 0; background: url('/images/sub/bg-about-history.jpg') no-repeat center center / cover;}
.sec-about-history .contain {display: flex; gap: 25px 35px;}
.history-cnt {display: flex; flex-direction: column; gap: clamp(20px, calc(45 / var(--inner) * 100vw), 45px); min-width: 50%;}
.history-year {margin-bottom: clamp(10px, calc(15 / var(--inner) * 100vw), 15px); font-size: var(--font-size-28); line-height: 1.5em; font-weight: 700;}
.history-list>ul>li {display: flex; font-size: var(--font-size-18); line-height: 1.5em; color: #e7e7e7;}
.history-list>ul>ul {flex: 1; min-width: 0;}
.history-month {min-width: 40px; font-size: var(--font-size-20); font-weight: 700; color: var(--primary-color);}

.direction-head {display: flex; align-items: flex-end; gap: 25px 35px; margin-bottom: var(--space-60);}
.direction-tabs ul {display: flex; gap: 10px;}
.direction-tabs a {display: flex;  padding: var(--space-20) clamp(15px, calc(60 / var(--inner) * 100vw), 60px); border: 1px solid #ddd; border: 1px solid #ddd; border-radius: 100px; font-size: var(--font-size-18); line-height: 1.5em; font-weight: 600; color:#898989;}
.direction-tabs .active a {background: var(--primary-color); border-color: var(--primary-color); color: #fff;}
.sec-about-direction .contain {position: relative;}
.direction-tab-content:not(.active) {position: absolute; left: -9999px; top: 0; width: 100%; visibility: hidden; pointer-events: none;}
.direction-tab-content.active {position: relative; left: auto; visibility: visible; pointer-events: auto;}
.directions {margin-top:40px;}
.direction-map {height: clamp(270px, calc(500 / var(--inner) * 100vw), 500px);}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--primary-color); font-weight:600; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#aaa;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}

@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

.page-process .sec:nth-child(odd) {background: #fafafa; padding: var(--space-90) 0; margin-bottom: var(--space-90);}
.vision-title {position:relative; z-index:0; margin:var(--space-20) auto var(--space-90); padding:calc(var(--space-20) + clamp(30px, calc(50 / var(--inner) * 100vw), 50px)) calc(var(--space-20) + clamp(40px, calc(80 / var(--inner) * 100vw), 80px)); text-align:center; background:linear-gradient(90deg, #0084cd, #acce23); border-radius:999px;}
.vision-title:before {content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; box-shadow:0 0 0 var(--space-20) #f8f8f8;}
.vision-title:after {content:""; position:absolute; z-index:0; inset:var(--space-20); border-radius:inherit; background:#fff;}
.vision-title > * {position:relative; z-index:1;}
.vision-title p {margin-bottom:8px;}
.vision-title h3 {margin:0;}
.page-tech section:not(:first-child) {margin-top: var(--space-90);}
.tech-logo {display: inline-flex;}
.tech-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30)}
.tech-card {padding: var(--space-40) var(--space-30); border: 1px solid #ddd; border-radius: 20px;}
.tech-card .icon {margin-bottom: calc(var(--space-20) * -1); margin-left: auto; text-align: right;}
.tech-card .num {font-size: var(--font-size-18); color: var(--primary-color); font-weight: 700;font-family: "Play", sans-serif;}
.tech-card h4 {margin: var(--space-30) 0 var(--space-20); font-size: var(--font-size-22); font-weight: 600; line-height: 1.2em; color: var(--dark-color);}
.tech-card li, .benefit-card li  {text-indent: -.8em; padding-left: 0.8em;}
.tech-card li:before {content: '-'; margin-right: 8px;}
.cert-list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-50) clamp(10px, calc(34 / var(--inner) * 100vw), 34px); text-align: center;}
.cert-list .thumb {position: relative; border-radius: 10px; margin-bottom: var(--space-20); overflow: hidden;}
.cert-list .thumb:after {content:""; position:absolute; z-index:1; inset:0; backdrop-filter: blur(1.5px);}
.cert-list .tit {margin-bottom: 7px; font-weight: 600; color: var(--dark-color);}
.benefit-cards {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20);}
.benefit-card {padding: var(--space-40); border: 1px solid #ddd; border-radius: 20px;}
.benefit-card li:before {content: '·'; margin-right: 8px; color: var(--primary-color); font-weight: 900;}
.benefit-card li:not(:last-child) {margin-bottom: 8px;}
.benefit-card h4 {margin: var(--space-30) 0 var(--space-20); font-size: var(--font-size-24); line-height: 1.25em; color: var(--dark-color);}
.recruit-table {border-top: 1px solid var(--dark-color);}
.recruit-row {display: flex; }
.recruit-row:not(:last-child) {border-bottom: 1px dashed #ddd;}
.recruit-row>div {padding:clamp(15px, calc(60 / var(--inner) * 100vw), 60px);}
.recruit-head {max-width: 250px; width: 25%; font-size: var(--font-size-28); font-weight: 700;line-height: 1.57em; color: var(--dark-color);}
.recruit-table h4 {font-size: var(--font-size-24); line-height: 1.25em; color: var(--primary-color); margin-bottom: var(--space-20);}
.recruit-info:not(:last-child) {margin-bottom: var(--space-50);}