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

/* BRAND STORY */
.brand-story {display:flex; align-items:center; gap:var(--space-80);}
.brand-story .image {width:45%; max-width:520px;}
.brand-story .image img {width:100%;}
.brand-story .content {position:relative;}
.brand-story .content h2 {margin-bottom:45px; font-size:var(--font-size-32); line-height:1.3em; letter-spacing:-.03em;}
.brand-story .content p {margin-top:1.78em; font-size:var(--font-size-18); font-weight:500; line-height:1.78em; letter-spacing:-.03em;}
.brand-story .content p:last-child {margin-bottom:0;}
.brand-story .content .highlight {position:relative; }
.brand-story .content .highlight:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:6px; background:rgba(5, 69, 150, 0.07);}
.brand-story .content .highlight strong {color:var(--color-primary);}
.brand-story .content .symbol {position:absolute; bottom:0; right:0; width:80px;}

/* PORTFOLIO */
.portfolio-list {margin-bottom:var(--space-60);}
.portfolio-list ul {display:grid; width:100%; grid-template-columns:repeat(2, 1fr); gap:var(--space-80);}
.portfolio-list ul li.none {grid-column: 1 / -1; padding:70px 0; text-align:center; color:#767676;}
.portfolio-list .link-item {display:block; position:relative; overflow:hidden;}
.portfolio-list .link-item .thumb {position:relative; width:100%; aspect-ratio:660/400; background:#eee; overflow:hidden;}
.portfolio-list .link-item .thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.4s;}
.portfolio-list .link-item .tit {position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:var(--space-40); background:rgba(0, 0, 0, 0.4); opacity:0; transition:all .2s; color:#fff; font-size:var(--font-size-24); font-weight:700; line-height:1.5em; border:4px solid var(--color-primary);}
.portfolio-list .link-item:hover .thumb img {transform:scale(1.1);}
.portfolio-list .link-item:hover .tit {opacity:1;} 

.portfolio-summary {max-width:860px; margin:0 auto var(--space-60);}
.portfolio-summary .image {position:relative; aspect-ratio:860/520; overflow:hidden;}
.portfolio-summary .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.portfolio-summary .content {margin-top:var(--space-50);}
.portfolio-summary .content h3 {margin-bottom:var(--space-30); font-size:var(--font-size-35); line-height:1.3em; letter-spacing:-.03em;}
.portfolio-summary .content .info-wrap {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-30) var(--space-80); margin-top:var(--space-40);}
.portfolio-summary .content .info-wrap dl dt {margin-bottom:var(--space-10); font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.portfolio-summary .content .info-wrap dl dd {line-height:1.5em; letter-spacing:-.03em; color:#686868;}

.portfolio-detail {margin-left:-15px; margin-right:-15px; margin-bottom:var(--space-80);}
.portfolio-detail .items {overflow:hidden;}
.portfolio-detail .image img {display:block; width:100%;}
.portfolio-detail .item-sizer {width:50%;}
.portfolio-detail .item {float:left; width:50%; padding:15px;}

.btn-list {display:inline-block; min-width:250px; padding:17px 20px; border-radius:60px; color:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; text-align:center; border:0; background:var(--color-primary);}

/* CONSULTANT */
.process {display:flex; text-align:center; margin:0 -30px;}
.process .item {position:relative; width:calc(100% / 5); padding:20px 30px;}
.process .item:after {content:""; position:absolute; top:50%; right:0; -webkit-transform:translate(50%,-50%); transform:translate(50%,-50%); width:18px; height:18px; background:url('/images/sub/arrow-right.svg') 50% 50%/contain no-repeat;}
.process .item:last-child:after {display:none;}
.process .item .box {position:relative; width:100%; height:100%; background:#fff; border:1px solid #ddd; border-radius:var(--radius-16); padding:var(--space-40) var(--space-20);}
.process .item .box .num {position:absolute; top:0; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; text-align:center; background:var(--color-primary);}
.process .item .box .icon {width:88px; height:88px; margin:0 auto 17px;}
.process .item .box .icon lord-icon {width:100%; height:100%;}
.process .item .box .head {margin-bottom:13px;}
.process .item .box .head h3 {margin-bottom:3px; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.process .item .box .head p {font-size:var(--font-size-14); line-height:1.5em; letter-spacing:0; color:#CDCDCD;}
.process .item .box .cont {font-size:var(--font-size-15); line-height:1.5em; letter-spacing:-.03em; color:#454545;}

.consult  {margin-bottom:var(--space-60); border-bottom:1px solid #ddd;}
.consult .group {margin-bottom:var(--space-60);}
.consult h2 {margin-bottom:var(--space-20); font-size:var(--font-size-18); font-weight: 600; line-height:1.3em; letter-spacing:-.03em;}
.consult h2 .highlight {position:relative;}
.consult h2 .highlight:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:6px; background:rgba(5, 69, 150, 0.07);}
.consult .txt-box {max-height:150px; overflow:auto; border:1px solid #ddd; background:rgba(5, 69, 150, 0.03); padding:15px 20px; color:#454545;}
.consult .txt-box:last-child {margin-bottom:0;}
.consult .check {margin-top:var(--space-30); text-align:center; color:#454545; font-size:var(--font-size-18); line-height:1.5em;}
.consult .check a {display:inline-block; background:#fff; margin-left:6px; padding:0 10px; font-size:var(--font-size-13); line-height:26px; letter-spacing:-.03em; border:1px solid #ddd;}

.consult-form h2 {margin-bottom:var(--space-20); font-size:var(--font-size-18); font-weight: 600; line-height:1.3em; letter-spacing:-.03em;}
.consult-form h2 .highlight {position:relative;}
.consult-form h2 .highlight:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:6px; background:rgba(5, 69, 150, 0.07);}
.consult-form .group {margin:0 -30px 30px -30px; display:flex; flex-wrap:wrap;}
.consult-form .group .box {width:50%; padding:0 30px; margin-bottom:30px;}
.consult-form .group .box.wide {width:100%;}
.consult-form .group:last-child {margin-bottom:0;}
.consult-form .group .item {margin:5px 20px 5px 0; display:inline-block;}
.consult-form .input {height:55px;}
.consult-form .bar {display:inline-block; width:1px; height:15px; background:#ddd; margin:0 20px;}
.consult-form .group dt {margin-bottom:8px; color:#242424; font-weight:600; line-height:1.5em;}
.consult-form .group dd {color:#454545;}

.file-wrap {position:relative; padding-right:130px;}
.file-wrap input[type="file"] {padding-left:16px; line-height:44px; color:#2c2c2c;}
.file-wrap input::file-selector-button {position:absolute; right:0; top:0; cursor:pointer; width:120px; height:100%; background:#454545; font-size:16px; color:#fff; border:0;}

.inquiry-list {margin-top:var(--space-100);}



/* ABOUT */
.about-wrap {display:flex; gap:var(--space-40);}
.about-wrap .cnt-area {width:46%;}
.about-wrap .cnt-area .txt {color:#000; margin-bottom:var(--space-40);}
.about-wrap .cnt-area .highlight {position:relative; color:var(--color-primary);}
.about-wrap .cnt-area .highlight:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:6px; background:rgba(5, 69, 150, 0.07);}
.about-wrap .cnt-area .btns {margin-top:var(--space-50); display:flex; gap:var(--space-20);}
.about-wrap .cnt-area .btn {display:inline-flex; min-width:190px; height:55px; align-items:center; justify-content:center; padding:10px 16px; border-radius:60px; color:#686868; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; text-align:center; border:2px solid #686868;}
.about-wrap .cnt-area .btn:hover {color:#fff; background:var(--color-primary); border-color:var(--color-primary);}
.about-wrap .map-area {width:54%;}

.directions-info {display:flex; flex-direction: column; gap:var(--space-24); line-height:1.5em;}
.directions-info dl {display:flex;}
.directions-info dt {display:flex; align-items:center; gap:10px; width:126px; font-size:var(--font-size-18); font-weight:600; line-height:1em; letter-spacing:-.03em;}
.directions-info dt img {width:16px;}
.directions-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}
.directions-info .sns {display:flex; gap:var(--space-10);}
.directions-info .sns img {width:40px;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .cont {display:none;}