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

/* 공통 */
.point {color: var(--color-primary);}
.point2 {color: #d5132b;}
.dot-list {display: flex; flex-direction: column; gap: var(--space-10);}
.dot-list li {position: relative; padding-left: 14px; font-size: var(--font-size-18); line-height: 1.6; letter-spacing: -0.05em;}
.dot-list li::before {content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #ccc; position: absolute; top: 0.7em; left: 0;}
.more-btn {width: 200px; height: 56px; border-radius: 56px; background: transparent; border: 1px solid #121212; color: #121212; font-size: var(--font-size-16); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; text-align: center; display: flex; align-items: center; justify-content: center; margin: var(--space-60) auto 0;}
.more-btn.none {display: none;}

/* 하는 일 공통 */
.work section {line-height: 1.5;}
.work section:last-child {padding-top: 0 !important;}
.work .fp-tableCell {display: flex; align-items: center; justify-content: center; flex-direction: column;}
.work .fp-scrollable {width: 100%;}
.work .head {margin-bottom: var(--space-80);*/}
.work .head .tit {color: var(--color-primary); font-size: var(--font-size-40); font-weight: 500; line-height: 1.5; letter-spacing: -0.05em;}
.work .overview .contain {margin: auto; text-align: center;}
.work .overview h3 {color: #121212; font-size: var(--font-size-64); font-weight: 500; line-height: 1.3; letter-spacing: -0.05em; margin-bottom: var(--space-35);}
.work .overview .desc {font-size: var(--font-size-24); font-weight: 500;}
.work .overview .img {width: 100%; height: clamp(300px, calc(542 / var(--inner) * 100vw), 542px); overflow: hidden; position: relative;}
.work .overview .img img {position:absolute; top:50%; left:0; transform:translateY(-50%) scale(1.1); -ms-transform:translateY(-50%) scale(1.1); -webkit-transform:translateY(-50%) scale(1.1); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition: 5s linear; animation:overview-img 5s linear forwards; -webkit-animation:overview-img 5s linear forwards;}
@keyframes overview-img {
	0% {transform:translateY(-50%) scale(1.1); -ms-transform:translateY(-50%) scale(1.1); -webkit-transform:translateY(-50%) scale(1.1);}
	100% {transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); -webkit-transform:translateY(-50%) scale(1);}
}
.work .audience .contain {display: flex; justify-content: space-between; gap: var(--space-40);}
.work .audience .cont {width: 48.572%;}
.work .audience .list li {padding: var(--space-35) var(--space-10); border-bottom: 1px solid #ddd; color: #121212; font-size: var(--font-size-24);}
.work .audience .list li:first-child {padding-top: 0;}
.work .support .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-80) var(--space-60);}
.work .support .list .img {width: 100%; height: 0; position: relative; padding-bottom: 112.27%; margin-bottom: var(--space-30);}
.work .support .list .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.work .support .list .tit {color: #121212; font-size: var(--font-size-24); font-weight: 500; line-height: 1.3; letter-spacing: -0.05em; margin-bottom: var(--space-20);}
.work .support .list .desc {font-size: var(--font-size-20); line-height: 1.6;}
.work .partner .cont {text-align: center; margin-top: var(--space-150);}
.work .partner .list {display: grid; grid-template-columns: repeat(6, 1fr);}
.work .partner .list .img {width: clamp(80px, calc(145 / var(--inner) * 100vw), 145px); margin: 0 auto; margin-bottom: var(--space-40); user-select: none;}
.work .partner .list .img img {width: 100%; height: 100%; object-fit: contain;}
.work .partner .list .center {position: relative;}
.work .partner .list .center::before {content: ''; display: block; width: 100%; height: 0; border-top: 2px dashed #ddd; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1;}
.work .partner .list .num {display: flex; align-items: center; justify-content: center; width: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); border-radius: 50%; background: #505050; color: #fff; font-size: var(--font-size-18); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; margin: 0 auto;}
.work .partner .list .tit {color: #121212; font-size: var(--font-size-20); font-weight: 500; line-height: 1.6; letter-spacing: -0.05em; margin-top: var(--space-40);}
.work .more {margin-top: var(--space-150); display: inline-flex; align-items: center; gap: var(--space-20); color: #121212; font-size: var(--font-size-16); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em;}
.work.publishing .more {margin-top: var(--space-100);}
.work .partner .list .highlight .num {background: var(--color-primary);}
.work .partner .list .highlight .tit {color: var(--color-primary);}
.work .more .icon {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #878787; transition: all .2s; user-select: none;}
.work .more .icon img {width: 10px; height: 11px; object-fit: contain;}
.work .more:hover {color: var(--color-primary);}
.work .more:hover .icon {background: var(--color-primary);}
.work .strength .contain {display: flex; justify-content: space-between; gap: var(--space-40);}
.work .strength .cont {width: 48.572%;}
.work .strength .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20);}
.work .strength .list li {padding: var(--space-50) var(--space-20); border: 1px solid #ddd; border-radius: var(--radius-16); color: #121212; font-size: var(--font-size-20); text-align: center;}
.work .strength .list .num {display: flex; align-items: center; justify-content: center; width: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--font-size-18); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; margin: 0 auto;}
.work .strength .list p {color: #121212; font-size: var(--font-size-20); line-height: 1.6; letter-spacing: -0.05em; margin-top: var(--space-20);}
.work .showcase .cont {margin-bottom: var(--space-80);}
.work .showcase .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-80) var(--space-60);}
.work .showcase .list .img {width: 100%; height: 0; position: relative; padding-bottom: 112.27%; margin-bottom: var(--space-30);}
.work .showcase .list .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.work .showcase .list .tit {color: #121212; font-size: var(--font-size-24); font-weight: 500; line-height: 1.3; letter-spacing: -0.05em; margin-bottom: var(--space-15);}
.work .showcase .list .writer {font-size: var(--font-size-20); line-height: 1.3; letter-spacing: -0.05em; margin-bottom: var(--space-25);}
.work .showcase .dot-list {gap: var(--space-15);}
.work .showcase .dot-list li {color: #878787; font-size: var(--font-size-16);}
.work .services .cont {text-align: center; margin-top: var(--space-150);}
.work .services .list {display: grid; grid-template-columns: repeat(4, 1fr);}
.work .services .list .img {width: clamp(80px, calc(145 / var(--inner) * 100vw), 145px); margin: 0 auto; margin-bottom: var(--space-40); user-select: none;}
.work .services .list .img img {width: 100%; height: 100%; object-fit: contain;}
.work .services .list .num {display: flex; align-items: center; justify-content: center; width: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(35px, calc(40 / var(--inner) * 100vw), 40px); border-radius: 50%; background: #505050; color: #fff; font-size: var(--font-size-18); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; margin: 0 auto;}
.work .services .list .tit {color: #121212; font-size: var(--font-size-20); font-weight: 500; line-height: 1.6; letter-spacing: -0.05em; margin-top: var(--space-40);}
.work .services .list .desc {font-size: var(--font-size-18); line-height: 1.8; letter-spacing: -0.05em; margin-top: var(--space-30);}

.comic .partner .list {grid-template-columns: repeat(7, 1fr);}

/* 해온 일 */
.portfolio {padding-top: var(--header-height);}
.port-menu {margin: var(--space-100) 0 var(--space-80); width: 100%;}
.port-menu ul {display: flex; gap: var(--space-40); justify-content: flex-end;}
.port-menu li a {color: #878787; font-size: var(--font-size-28); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em;}
.port-menu li.active a {color: var(--color-primary);}

.port-category {margin-bottom: var(--space-40);}
.port-category ul {display: flex; flex-wrap: wrap; gap: var(--space-15);}
.port-category li a {color: #505050; font-size: var(--font-size-16); line-height: 1.3; letter-spacing: -0.05em; display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-20); border-radius: var(--radius-8); background: #eee;}
.port-category li.active a {color: #fff; background: #121212; font-weight: 500;}

.port-search {display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.port-search .total-page {color: #878787; font-size: var(--font-size-16); line-height: 1.3; letter-spacing: -0.05em;}
.port-search .total-page strong {color: #121212; font-weight: 700;}
.port-search .input {width: 300px; border-radius: 4px;}
.port-search .btn-pack.dark {border-radius: 4px; background: #121212; border-color: #121212; margin-left: 7px;}

.port-list {margin-top: var(--space-40);}
.port-list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-60) var(--space-20);}
.port-list li a {display: block; height: 100%;}
.port-list li .thumb {position: relative; height: 0; padding-bottom: 112.54%; overflow: hidden; margin-bottom: var(--space-30);}
.port-list li .thumb img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: all .2s;}
.port-list li:hover .thumb img {transform: scale(1.05)}
.port-list li .txt-wrap {padding: 0 var(--space-10);}
.port-list li .txt-wrap .labels {display: flex; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-15);}
.port-list li .txt-wrap .labels span {color: #fff; font-size: var(--font-size-14); line-height: 1; letter-spacing: -0.05em; padding: 5px 8px 6px; border-radius: var(--radius-4); background: #878787;}
.port-list li .txt-wrap .labels .service {background: var(--color-primary);}
.port-list li .txt-wrap .tit {font-size: var(--font-size-20); font-weight: 700; line-height: 1.54; letter-spacing: -0.05em; color: #121212;}

.fancybox-wrap.fancybox-port-view {width: min(800px, calc(100vw - 50px)) !important; max-width: min(800px, calc(100vw - 50px)); max-height: 90vh !important; overflow: hidden; display: flex; flex-direction: column;}
.fancybox-wrap.fancybox-port-view .fancybox-skin {position: relative; border-radius: var(--radius-16); overflow: hidden; flex: 1 1 auto; min-height: 0; max-height: 100%; display: flex; flex-direction: column;}
.fancybox-wrap.fancybox-port-view .fancybox-close {position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; margin: 0; background-image: none; background-color: var(--color-primary); border-radius: 50%; border: 0; box-shadow: none;}
.fancybox-wrap.fancybox-port-view .fancybox-close::before, .fancybox-wrap.fancybox-port-view .fancybox-close::after {content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: 0; background: #fff;}
.fancybox-wrap.fancybox-port-view .fancybox-close::before {transform: translate(-50%, -50%) rotate(45deg);}
.fancybox-wrap.fancybox-port-view .fancybox-close::after {transform: translate(-50%, -50%) rotate(-45deg);}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {.fancybox-wrap.fancybox-port-view .fancybox-close {background-image: none;}}

html.fancybox-lock:has(.fancybox-wrap.fancybox-port-view) .fancybox-overlay {overflow: hidden !important;}
.fancybox-wrap.fancybox-port-view .fancybox-outer {padding: 70px 10px; overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;}
.fancybox-wrap.fancybox-port-view .fancybox-inner {flex: 1 1 auto; min-height: 0; width: 100% !important; height: auto !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;}

.port-view {max-width: 100%; overflow-x: hidden; padding: 0 var(--space-30);}
.port-view .img-wrap {width: 100%; position: relative; margin-bottom: var(--space-40);}
.port-view .img-wrap .item img {margin: 0 auto; height: clamp(275px, calc(576 / var(--inner) * 100vw), 576px); object-fit: contain;}
.port-view .controls {pointer-events: none;}
.port-view .slick-arrow {width: clamp(10px, calc(15 / var(--inner) * 100vw), 15px); display: flex; align-items: center; justify-content: center; position: relative; pointer-events: visible; position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: 0;}
.port-view .slick-arrow.prev {left: 0;}
.port-view .slick-arrow.next {right: 0;}
.port-view .slick-arrow.slick-hidden {display: none !important;}
.port-view .info {padding-bottom: var(--space-60); border-bottom: 2px solid #ddd; margin-bottom: var(--space-60);}
.port-view .info ul {display: flex; flex-direction: column; gap: var(--space-20);}
.port-view .info ul li {display: flex; font-size: var(--font-size-20); line-height: 1.5; letter-spacing: -0.05em;}
.port-view .info ul li .label {color: #121212; font-weight: 500; width: clamp(80px, calc(125 / var(--inner) * 100vw), 125px); flex-shrink: 0;}
.port-view .txt-wrap {padding-bottom: var(--space-60); border-bottom: 2px solid #ddd; margin-bottom: var(--space-60);}
.port-view .port-other h3 {color: #121212; font-size: var(--font-size-24); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; margin-bottom: var(--space-30);}
.port-view .port-other .slider-wrap {position: relative; padding: 0 var(--space-50);}
.port-view .port-other .slider .item {padding: 0 var(--space-10);}
.port-view .port-other .slider .item img {margin: 0 auto; height: clamp(128px, calc(220 / var(--inner) * 100vw), 220px); object-fit: contain;}
.port-view .port-other .slider .item p {color: #121212; font-size: var(--font-size-16); font-weight: 500; line-height: 1.3; letter-spacing: -0.05em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: var(--space-20); text-align: center;}

/* 이야기 */
.stories {margin-top: var(--header-height);}
.stories > section {padding: var(--space-150) 0;}
.stories > section:last-child {padding-bottom: var(--space-30);}
.stories .head .tit {color: #121212; font-size: var(--font-size-48); line-height: 1.3; margin-bottom: var(--space-50);}
.stories .head .desc {font-size: var(--font-size-24); line-height: 1.5;}
.stories .overview {padding-top: 0;}
.stories .overview .contain {display: flex; flex-direction: column; gap: var(--space-40);}
.stories .overview .sub-tit {display: flex; align-items: center; gap: var(--space-15); font-size: var(--font-size-14); color: #878787; letter-spacing: 0.1em;}
.stories .overview .sub-tit::after {content: ''; width: clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height: 1px; background: #878787;}
.stories .overview .cont {display: flex; justify-content: space-between; gap: 40px;}
.stories .overview .desc {font-size: var(--font-size-18); line-height: 1.67; margin-bottom: var(--space-20);}
.stories .overview .desc.big {font-size: var(--font-size-24); line-height: 1.5; margin-bottom: var(--space-30);}
.stories .overview .img-wrap {width: 50%;}
.stories .overview .img {border-radius: var(--radius-16); overflow: hidden; aspect-ratio: 700 / 450; width: 100%;}
.stories .overview .img img {width: 100%; height: 100%; object-fit: cover; display: block;}

.stories .brand {padding-top: var(--space-100);}
.stories .about .img-wrap {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.stories .about .img-wrap .img {aspect-ratio: 345 / 300;}
.stories .about .img-wrap .lead {grid-column: 1 / -1; aspect-ratio: 700 / 300;}
.stories .origin .img-wrap {display: grid; grid-template-columns: 1fr; gap: 10px;}
.stories .origin .img-wrap .img {aspect-ratio: 700 / 300;}
.stories .origin .quote {margin-top: var(--space-55); font-size: var(--font-size-24); font-weight: 400; line-height: 1.3; display: block;}

.stories .method {background: #f9f9f9;}
.stories .method .contain {display: flex; justify-content: space-between; gap: 40px;}
.stories .method .list li {display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-40); padding: var(--space-50) 0; border-bottom: 1px solid #ddd;}
.stories .method .list li:first-child {border-top: 1px solid #ddd;}
.stories .method .list .tit {color: #121212; font-size: var(--font-size-32); font-weight: 400; line-height: 1.3; display: flex;}
.stories .method .list .num {color: var(--color-primary); font-size: var(--font-size-24); font-weight: 500; line-height: 1.8; margin-right: var(--space-22);}
.stories .method .list .desc {font-size: var(--font-size-18); line-height: 1.67; margin-top: var(--space-20); padding-left: clamp(36px, calc(50 / var(--inner) * 100vw), 50px);}
.stories .method .list .img {width: clamp(160px, calc(200 / var(--inner) * 100vw), 200px); aspect-ratio: 4 / 3; border-radius: var(--radius-16); overflow: hidden; position: relative;}
.stories .method .list .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;}

.stories .offer .head {margin-bottom: var(--space-40);}
.stories .offer .items {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-40);}
.stories .offer .item {background: #fff; border: 1px solid #ddd; border-radius: var(--radius-16); overflow: hidden; display: flex; flex-direction: column;}
.stories .offer .item .img {aspect-ratio: 320 / 400; margin: -1px -1px 0 -1px;}
.stories .offer .item .img img {width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; margin: 0;}
.stories .offer .item .txt-wrap {padding: var(--space-30);}
.stories .offer .item .tag {color: var(--color-primary); font-size: var(--font-size-16); line-height: 1; margin-bottom: var(--space-15);}
.stories .offer .item .tit {color: #121212; font-size: var(--font-size-24); line-height: 1.42;}
.stories .offer .desc {margin-top: var(--space-40); font-size: var(--font-size-24); line-height: 1.5;}
.stories .offer strong {color: #121212; font-weight: 500;}

.stories .identity {background: #f9f9f9;}
.stories .identity .contain {display: flex; flex-direction: column; gap: var(--space-120);}
.stories .identity .cont {display: flex; justify-content: space-between; gap: 40px;}
.stories .meta {display: flex; flex-direction: column; gap: var(--space-50);}
.stories .meta dt {font-size: var(--font-size-18); line-height: 1.3; margin-bottom: var(--space-10);}
.stories .meta dd {color: #121212; font-size: var(--font-size-24); font-weight: 500; line-height: 1.66;}
.stories .meta .slogan {font-size: var(--font-size-40); line-height: 1; font-family: 'NanumSonPyeonJiCe', sans-serif; margin-top: var(--space-20);}
.stories .meta .desc {font-size: var(--font-size-18); font-weight: 400;}

.stories .logo-wrap {width: 50%; display: flex; flex-direction: column; gap: var(--space-20);}
.stories .logo-wrap .box {position: relative; height: clamp(160px, calc(200 / var(--inner) * 100vw), 200px); border-radius: var(--radius-16); overflow: hidden; padding: var(--space-45); display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ddd;}
.stories .logo-wrap .box.primary {background: #ff6600; border-color: #ff6600;}
.stories .logo-wrap figcaption {position: absolute; top: var(--space-10); left: var(--space-20); font-size: var(--font-size-14); z-index: 1;}
.stories .logo-wrap .box.primary figcaption {color: #fff;}
.stories .logo-wrap .box img {max-height: 100%;}
.stories .logo-wrap .spec {display: flex; flex-direction: column; gap: var(--space-15); margin-top: var(--space-10);}
.stories .logo-wrap .spec div {display: flex; font-size: var(--font-size-14); line-height: 1.3;}
.stories .logo-wrap .spec dt {color: #878787; width: 110px;}
.stories .logo-wrap .spec dd {color: #121212;}

.stories .history .item {display: flex; align-items: stretch; gap: var(--space-40);}
.stories .history .item:first-child .year {border-top: 2px solid #121212;}
.stories .history .item:first-child .dot-list {border-top: 2px solid #121212;}
.stories .history .year {width: clamp(100px, calc(300 / var(--inner) * 100vw), 300px); flex-shrink: 0; color: #121212; font-size: var(--font-size-40); line-height: 1; padding: var(--space-50) 0; border-bottom: 1px solid #ddd; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--font-size-40); font-weight: 700;}
.stories .history .dot-list {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-60) 0; border-bottom: 1px solid #ddd;}
.stories .history .desc {font-size: var(--font-size-18); line-height: 1.67; margin: 0;}
.stories .history .more-btn {margin-left: 0; padding: 0 var(--space-35);}
.stories .history .more-btn .icon {width: 12px; display: flex; align-items: center; justify-content: center; margin-left: auto;}
.stories .history .more-btn .icon img {width: 100%; margin: 0 !important; max-width: 100% !important;}
.stories .history .more-btn.active .icon {transform: rotate(180deg);}
.stories .history .item.extra {display: none;}
.stories .history .items.is-open .item.extra {display: flex;}

/* 문의 */
.inquiry {padding-top: calc(var(--space-100) + var(--header-height)); padding-bottom: var(--space-30);}
.inquiry-inner {display: flex; justify-content: space-between; gap: 40px; position: relative;}
.inquiry .warning {display: inline-flex; gap: var(--space-10); font-size: var(--font-size-14); line-height: 1.3;}
.inquiry .warning .icon {width: clamp(15px, calc(20 / var(--inner) * 100vw), 20px); height: clamp(15px, calc(20 / var(--inner) * 100vw), 20px); border-radius: 50%; background: #121212; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--font-size-12); font-weight: 700; flex-shrink: 0;}
.inquiry .input {height: 60px; border-radius: var(--radius-8);}
.inquiry .info {flex-shrink: 0;}
.inquiry .info > div {position: sticky; top: calc(var(--header-height) + var(--space-100)); left: 0; line-height: 1.77;}
.inquiry .info .lead {font-size: var(--font-size-18); margin-bottom: var(--space-35);}
.inquiry .info .contact {margin-bottom: var(--space-30);}
.inquiry .info .contact .accent {color: #121212; font-size: var(--font-size-18); font-weight: 500; margin-bottom: var(--space-20);}
.inquiry .info .list {display: flex; flex-direction: column; gap: var(--space-10);}
.inquiry .info .list li {display: flex;}
.inquiry .info .list .label {color: #121212; font-weight: 700; width: clamp(100px, calc(120 / var(--inner) * 100vw), 120px); flex-shrink: 0; display: flex; align-items: center;}
.inquiry .info .list .label .icon {width: 16px; height: 16px; margin-right: var(--space-10);}
.inquiry .info .list .label .icon img {width: 100%; height: 100%; object-fit: contain;}
.inquiry .info .time .tit {color: var(--color-primary); font-size: var(--font-size-18); font-weight: 700; margin-bottom: var(--space-10);}
.inquiry .info .time .desc {margin-top: var(--space-10);}
.inquiry .info .pub-info {margin-top: var(--space-30); border-top: 1px solid #d9d9d9; padding-top: var(--space-30); line-height: 1.75;}
.inquiry .info .pub-info section {margin-bottom: var(--space-50);}
.inquiry .info .pub-info .tit {color: #121212; font-size: var(--font-size-20); font-weight: 700; margin-bottom: var(--space-10);}
.inquiry .info .pub-info .dot-list li {font-size: var(--font-size-16);}

.inquiry .form-wrap {width: 50%;}
.inquiry .form-wrap h3 {color: #121212; font-size: var(--font-size-20); font-weight: 500; display: flex; margin-bottom: var(--space-15);}
.inquiry .form-wrap h3 label {display: flex;}
.inquiry .form-wrap h3 .required {display: block; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; margin-left: 6px;}
.inquiry .form-wrap .area {margin-bottom: var(--space-50);}
.inquiry .form-wrap .type {margin-bottom: var(--space-80);}
.inquiry .form-wrap .type .cont {display: flex; gap: var(--space-60); margin-top: var(--space-25);}
.inquiry .form-wrap .type .radiobox {font-size: var(--font-size-18);}
.inquiry .form-wrap .desc {margin-bottom: var(--space-30);}
.inquiry .form-wrap .desc .box {background: #f4f4f4; padding: var(--space-20); border-radius: var(--radius-8); line-height: 1;}
.inquiry .form-wrap .production .cont {margin-top: var(--space-35); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20);}
.inquiry .form-wrap .production[data-type="comic"] .cont {grid-template-columns: repeat(2, 1fr); gap: var(--space-50) var(--space-20);}
.inquiry .form-wrap .production h4.tit {color: #121212; font-size: var(--font-size-18); font-weight: 500; margin-bottom: var(--space-15);}
.inquiry .form-wrap .production .check-wrap {display: flex; flex-direction: column; gap: var(--space-10);}

.inquiry .area.memo .memo-wrap {position: relative;}
.inquiry .area.memo .memo-editor {display: block; position: relative; z-index: 1; height: auto; padding: var(--space-30); font-size: var(--font-size-16); line-height: 1.5; min-height: 410px;}
.inquiry .area.memo .memo-editor .tit {color: var(--color-primary); font-weight: 500; margin-bottom: var(--space-10);}
.inquiry .area.memo .memo-editor p {line-height: 2;}
.inquiry .area.memo .input-memo {position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; padding: var(--space-30); border: 0; border-radius: inherit; resize: none; opacity: 0; z-index: 2; font-size: var(--font-size-16); line-height: 1.5; overflow: hidden; pointer-events: none; background: transparent; color: transparent; caret-color: transparent; outline: none;}

.inquiry .form-wrap .file .files-upload {max-width: 100%;}
.inquiry .form-wrap .file .files-upload-group {display: flex;}
.inquiry .form-wrap .file .files-upload-input {width: auto; height: 60px; flex: 1 0 auto; position: relative; border: 1px solid #ddd; border-radius: var(--radius-8); padding: var(--space-14);}
.inquiry .form-wrap .file .files-upload-group:first-child .files-upload-input {width: 240px; flex: none;}
.inquiry .form-wrap .file .btn {border: 1px solid #ddd; border-radius: var(--radius-4); padding: var(--space-8) var(--space-10); background: #f9f9f9; color: #505050; font-size: var(--font-size-14); line-height: 1.5; display: flex; align-items: center; justify-content: center; margin-right: var(--space-14);}
.inquiry .form-wrap .file .btn:active {background: #f1f1f1;}
.inquiry .form-wrap .file .file-name {font-size: var(--font-size-14); border: 0; background: transparent; width: 100%;}
.inquiry .form-wrap .file .file-input {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); border: 0;}
.inquiry .form-wrap .file .files-upload-btns {display: flex; gap: 5px; margin-left: 5px;}
.inquiry .form-wrap .file .file-btn {display: flex; align-items: center; justify-content: center; width: 80px; height: 60px; border: 1px solid #ddd; border-radius: var(--radius-8); padding: var(--space-10) var(--space-10); background: #f9f9f9; color: #505050; font-size: var(--font-size-16); line-height: 1.5;}
.inquiry .form-wrap .file .file-btn.add {background: #505050; border-color: #505050; color: #fff;}
.inquiry .form-wrap .file .file-note {margin-left: var(--space-20); margin-top: auto;}
.inquiry .form-wrap .captcha {margin-bottom: var(--space-80);}
.inquiry .form-wrap .captcha-wrap {height: 60px;}
.inquiry .form-wrap .captcha-wrap #kcaptcha_image {border-radius: var(--radius-8); overflow: hidden; flex-shrink: 0;}
.inquiry .form-wrap .captcha-wrap .input {width: 280px;}
.inquiry .form-wrap .buttons {margin: 0; margin-top: var(--space-60);}
.inquiry .form-wrap .btn-pack.xlarge {width: 100%; border-radius: var(--radius-8); font-size: var(--font-size-18); font-weight: 700;}

/* 소식 */
.news {margin-top: calc(var(--space-100) + var(--header-height));}