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

.company-intro {text-align:center;}
.company-intro .image {margin-bottom:var(--space-90);}
.company-intro .content h2 {margin-bottom:var(--space-50); font-size:var(--font-size-36); font-weight:400; line-height:1.3em; letter-spacing:-.03em;}
.company-intro .content p {line-height:1.625em; letter-spacing:-.03em; color:#454545;}
.company-intro .content p:not(:last-child) {margin-bottom:1.625em;}

.vision .image {margin-bottom:var(--space-90);}
.vision .content {display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(25px, calc(160 / var(--inner) * 100vw), 160px);}
.vision .content h2 {font-size:var(--font-size-36); font-weight:400; line-height:1.3em; letter-spacing:-.03em;}
.vision .content p {line-height:1.625em; letter-spacing:-.03em; color:#454545;}
.vision .content p:not(:last-child) {margin-bottom:1.625em;}

.our-team {margin-bottom:var(--space-120);}
.our-team .image {margin-bottom:var(--space-120); text-align:center;}
.our-team .office {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-110) var(--space-120);}
.our-team .office .item .title {margin-bottom:var(--space-30); font-size:var(--font-size-28); line-height:1.3em; letter-spacing:-.03em;}
.our-team .office .item .service {margin-bottom:var(--space-15); font-weight:600; line-height:1.625em; letter-spacing:-.03em; color:#454545;}
.our-team .office .item .text {font-weight:400; line-height:1.625em; letter-spacing:-.03em; color:#454545;}

.our-member {padding:var(--space-120) 0; background:#F6F6F6; text-align:center;}
.our-member .head {display:flex; justify-content:center; gap:var(--space-80) var(--space-40); margin-bottom:var(--space-120);}
.our-member .head .item {width:315px;}
.our-member .head .item .img {margin-bottom:var(--space-30);}
.our-member .head .item .info .part {margin-bottom:var(--space-10); font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em;}
.our-member .head .item .info .text {display:flex; flex-wrap:wrap; justify-content:center;  align-items:center; gap:5px 12px; margin-bottom:var(--space-20);}
.our-member .head .item .info .text .name {font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.our-member .head .item .info .text .bar {width:1px; height:14px; background:#A4A4A4;}
.our-member .head .item .info .text .position {font-size:var(--font-size-18); font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.our-member .head .item .info .desc {margin-bottom:var(--space-40); font-size:var(--font-size-18); font-weight:500; line-height:1.4em; letter-spacing:-.03em; color:#454545;}
.our-member .head .item .info .list {line-height:1.625em; letter-spacing:-.03em; color:#454545;}

.our-member .list {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-80) var(--space-40);}
.our-member .list .item {width:240px;}
.our-member .list .item .img {margin-bottom:var(--space-30);}
.our-member .list .item .info .part {margin-bottom:var(--space-10); font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em;}
.our-member .list .item .info .text {display:flex; flex-wrap:wrap; justify-content:center;  align-items:center; gap:5px 12px; margin-bottom:var(--space-20);}
.our-member .list .item .info .text .name {font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.our-member .list .item .info .text .bar {width:1px; height:14px; background:#A4A4A4;}
.our-member .list .item .info .text .position {font-size:var(--font-size-18); font-weight:500; line-height:1.4em; letter-spacing:-.03em;}

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

.location-info {margin-top:var(--space-50);}
.location-info h3 {margin-bottom:clamp(20px, calc(34 / var(--inner) * 100vw), 34px); font-size:var(--font-size-20); line-height:1.4em; letter-spacing:-.03em;}
.location-info .info {display:flex; align-items:center; gap:12px; margin-bottom:var(--space-24);}
.location-info .info dl {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; gap:12px;}
.location-info .info dl dt {width:clamp(120px, calc(170 / var(--inner) * 100vw), 170px); font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.location-info .info dl dd {flex:1 1 auto; min-width:0; width:1%; color:#454545; line-height:1.625em; letter-spacing:-.03em;}

.brand-main {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.brand-main .link-item {position:relative; display:block;}
.brand-main .link-item .image {position:relative; aspect-ratio:450/330; overflow:hidden;}
.brand-main .link-item .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: all .5s cubic-bezier(0,.5,.5,1);}
.brand-main .link-item .image:after {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); transition:.8s; z-index:1;}
.brand-main .link-item:hover .image img {transform:scale(1.05);}
.brand-main .link-item .logo {position:absolute; inset:0; width:100%; height:100%; z-index:10; display:flex; align-items:center; justify-content:center; transition:.8s;}

.brand-list-top {margin-bottom:clamp(50px, calc(140 / var(--inner) * 100vw), 140px); text-align:center;}
.brand-list-top .image {margin-bottom:var(--space-80);}
.brand-list-top .content {margin-bottom:var(--space-80);}
.brand-list-top .btn {display:inline-block; padding:18px 30px; background:#242424; color:#fff; font-weight:700; line-height:1.5em; letter-spacing:-.03em;}

.brand-category {margin-bottom:clamp(30px, calc(100 / var(--inner) * 100vw), 100px);}
.brand-category ul {display:flex; flex-wrap:wrap; justify-content:center;}
.brand-category ul li {display:flex; align-items:center;}
.brand-category ul li:before {content:''; display:block; width:1px; height:14px; background:#ddd; margin:0 var(--space-24);}
.brand-category ul li:first-child:before {display:none;}
.brand-category ul li a {display:block; color:#454545; font-size:var(--font-size-20); font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.brand-category ul li a:hover {text-decoration: underline;}
.brand-category ul li.active a {color:#242424; font-weight:600;}

.brand-list {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-80) var(--space-24); margin:var(--space-50) 0 var(--space-100);}
.brand-list .none {grid-column: 1 / -1; padding:70px; text-align:center; color:#767676;}
.brand-list .link-item {position:relative; display:block; text-align:center;}
.brand-list .link-item .label {position:absolute; top:var(--space-30); left:var(--space-30 ); z-index:2; padding:4px 10px; background:#242424; border:1px solid #242424; color:#fff; font-size:var(--font-size-15); font-weight:500; line-height:1.4em; letter-spacing:-.01em;}
.brand-list .link-item .label.best {background:#fff; color:#242424; font-weight:600; border:1px solid #ddd;}
.brand-list .link-item .thumb {position:relative; aspect-ratio:332/450; overflow:hidden; margin-bottom:var(--space-24);}
.brand-list .link-item .thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: all .5s cubic-bezier(0,.5,.5,1);}
.brand-list .link-item .tit {margin-bottom:var(--space-8); font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.brand-list .link-item .txt {font-size:var(--font-size-16); line-height:1.4em; letter-spacing:-.03em; color:#454545;}
.brand-list .link-item:hover .thumb img {transform:scale(1.05);}

.brand-summary {display:flex; gap:clamp(30px, calc(150 / var(--inner) * 100vw), 150px); margin-bottom:var(--space-100); padding:0 65px;}
.brand-summary .image {width:45%;}
.brand-summary .image .slider-for {margin-bottom:var(--space-50);}
.brand-summary .image .slider-for .item {position:relative; aspect-ratio:570/623; overflow:hidden;}
.brand-summary .image .slider-for .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.brand-summary .image .slider-nav {position:relative; margin:0 -7px;}
.brand-summary .image .slider-nav .slick-slide {padding:0 7px;}
.brand-summary .image .slider-nav .item {position:relative; aspect-ratio:1/1; cursor:pointer; overflow:hidden;}
.brand-summary .image .slider-nav .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.brand-summary .image .slider-nav .item:after {content:''; position:absolute; inset:0; border:1px solid #ddd; z-index:1;}
.brand-summary .image .slider-nav .slick-current .item:after {border: 2px solid #1C1C1C;}
.brand-summary .image .slider-nav .slick-arrow {position:absolute; top:50%; border:0; background:transparent; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:2;}
.brand-summary .image .slider-nav .slick-arrow svg {display:block;}
.brand-summary .image .slider-nav .slick-arrow.slick-prev {left:-60px;}
.brand-summary .image .slider-nav .slick-arrow.slick-next {right:-60px;}
.brand-summary .image .slider-nav .slick-arrow.slick-next svg {-webkit-transform:scaleX(-1); transform:scaleX(-1);}
.brand-summary .content {flex:1 1 auto; min-width:0; width:1%;}
.brand-summary .content .tags {display:flex; flex-wrap:wrap; gap:var(--space-10) var(--space-18); margin-bottom:var(--space-30);}
.brand-summary .content .tags span {padding:8px 14px; background:#ECECEC; border-radius:50px; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.02em;}
.brand-summary .content .tit {margin-bottom:var(--space-10); font-size:var(--font-size-40); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.brand-summary .content .en {margin-bottom:var(--space-60); font-size:var(--font-size-28); font-weight:500; line-height:1.5em; letter-spacing:-.01em; color:#666;}
.brand-summary .content .desc {margin-bottom:var(--space-60); font-weight:500; line-height:1.625em; letter-spacing:-.03em; color:#454545;}
.brand-summary .content .info {margin-bottom:var(--space-70); border-top:1px solid #ddd;}
.brand-summary .content .info dl {display:flex; justify-content:space-between; align-items:center; gap:var(--space-30); padding:var(--space-15) var(--space-10); border-bottom:1px solid #ddd;}
.brand-summary .content .info dl dt {font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}
.brand-summary .content .info dl dd {line-height:1.5em; letter-spacing:-.03em; color:#454545;}
.brand-summary .content .btn-area .btn {display:block; padding:17px; background:#242424; color:#fff; font-size:var(--font-size-24); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center;}

.brand-tab {background:#fff; border-bottom:1px solid #ddd; margin-bottom:var(--space-100);}
.brand-tab ul {display:flex; justify-content:center; gap:var(--space-110);}
.brand-tab ul li a {display:block; position:relative; padding:var(--space-20) 0; font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.brand-tab ul li.active a:after {content:''; position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:#000;}

.brand-detail #n1 {text-align:center;}

.brand-add-info {margin-bottom:var(--space-80); text-align:center;}
.brand-add-info:last-child {margin-bottom:0;}
.brand-add-info .title {margin-bottom:var(--space-50);}
.brand-add-info .title h4 {margin-bottom:var(--space-8); font-size:var(--font-size-20); line-height:1.3em; letter-spacing:-.03em;}
.brand-add-info .title p {font-size:var(--font-size-20); line-height:1.3em; letter-spacing:-.01em;}
.brand-add-info .content {max-width:1026px; margin:0 auto; padding:var(--space-40) 0; border-top:1px solid #979797; border-bottom:1px solid #979797; font-size:var(--font-size-18); line-height:1.625em; letter-spacing:-.03em; color:#454545;}