@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.sub-sec {padding:var(--space-150) 0;}
.sub-sec.bg {background:#f9f9f9;}
.sub-sec.first {padding-top:0;}

.doc-tit {margin-bottom:var(--space-70); font-size:var(--font-size-48); line-height:1.3em; letter-spacing:-.03em;}

/* ABOUT */
.greetings h2 {margin-bottom:var(--space-40); color:#ccc; font-size:var(--font-size-64); line-height:1.3em; letter-spacing:-.03em;}
.greetings .wrap {display:flex; align-items:center;}
.greetings .wrap .img {width:50%; height:500px; position:relative; border-radius:0 500px 500px 0; overflow:hidden; background:#eee;}
.greetings .wrap .img img {position:absolute; top:0; right:0; width:100%; height:100%; object-fit:cover;}
.greetings .wrap .text {width:50%;}
.greetings .wrap .text .inner {width:100%; max-width:780px; padding:0 var(--space-100);}
.greetings .wrap .text .inner .tit {margin-bottom:1em; font-size:var(--font-size-32); line-height:1.4em; letter-spacing:-.03em; color:#121212;}
.greetings .wrap .text .inner p {margin-top:1em; font-size:var(--font-size-18); line-height:1.67em; letter-spacing:-.03em; color:#505050;}

.office-info {display:flex;}
.office-info .office {width:33.33%; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-60); padding:var(--space-40) var(--space-40) var(--space-200); border-left:1px solid #ddd; overflow:hidden; position:relative;}
.office-info .office:last-child {border-right:1px solid #ddd;}
.office-info .office .tit {position:relative;}
.office-info .office .tit h3 {min-height:calc(1.36em * 2); font-size:var(--font-size-28); line-height:1.36em; letter-spacing:-.03em; color:#878787; transition:.4s;}
.office-info .office .cnt {position:relative; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-50);}
.office-info .office .cnt .info {font-size:var(--font-size-18); line-height:1.67em;}
.office-info .office .cnt .info p {position:relative; padding-left:28px;}
.office-info .office .cnt .info p:before {content:''; position:absolute; top:.25em; left:0; width:18px; height:18px; background:url('/images/sub/icon-map.png') no-repeat center center / contain;}
.office-info .office .cnt .info .region {margin-bottom:15px; font-weight:600; color:#121212;}
.office-info .office .cnt .info .item {color:#505050;}
.office-info .office .cnt .info .item:before {background-image:url('/images/sub/icon-dart.png');}
.office-info .office .cnt .img img {display:block; width:100%; border-radius:var(--radius-24); transition:.4s; filter:grayscale(100%);}
.office-info .office:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; transition:.4s; background-position:50% 100%; background-repeat:no-repeat; background-size:100% auto; opacity:0;}
.office-info .office.n1:before {background-image:url('/images/sub/office-1-bg.jpg');}
.office-info .office.n2:before {background-image:url('/images/sub/office-2-bg.jpg');}
.office-info .office.n3:before {background-image:url('/images/sub/office-3-bg.jpg');}
.office-info .office:hover::before {opacity:1;}
.office-info .office:hover .tit h3 {color:#121212;}
.office-info .office:hover .cnt .img img {filter:grayscale(0%); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);}

/* 문의 */
.inquiry-title {display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:var(--space-70);}
.inquiry-title h2 { font-size:var(--font-size-48); line-height:1.3em; letter-spacing:-.03em;}

.inquiry-type ul {display:grid; grid-template-columns:repeat(2, 1fr);  gap:var(--space-20);}
.inquiry-type ul li a {display:flex; flex-direction:column; justify-content: center; align-items:center; gap:10px; width:100%; height:clamp(100px, calc(160 / var(--inner) * 100vw), 160px); padding:1em; background:#f4f4f4; border-radius:var(--radius-24); text-align:center; border:3px solid transparent;}
.inquiry-type ul li a span {font-size:var(--font-size-32); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.inquiry-type ul li a small {font-size:var(--font-size-16); font-weight: 600; line-height:1.4em;}
.inquiry-type ul li a:hover {border-color:var(--color-primary);}
.inquiry-type ul li.active a {background:var(--color-primary); color:#fff; box-shadow:0px 10px 20px 0px rgba(0, 0, 0, 0.2);}