@charset "utf-8";

/* 서브페이지 기본 세팅 s */
.contents { min-height: 360px; padding: 12rem 0 18rem; }
.contents > .inner { max-width: var(--sub-inner); }

/* 서브 콘텐츠 상단 (타이틀 + 브레드크럼) */
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; margin-bottom: 8rem; }
.sub-tit { font: 800 var(--fs-48) / 100% var(--font-family); letter-spacing: -0.48px; color: var(--main-black); }

.sub-breadcrumb { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sub-breadcrumb .bc-item { font: 400 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--gray2); white-space: nowrap; }
.sub-breadcrumb .bc-divider { flex-shrink: 0; width: 24px; aspect-ratio: 1/1; background: url('/resources/img/mark_lnb.png') no-repeat center / contain; opacity: 0.7; }

/* 반응형 이미지 (768px 초과: pc-img / 이하: mb-img) */
.pc-img { display: block; }
.mb-img { display: none; }


/* GREETING s */
.contents.greeting .greeting-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 7.4rem; }
.contents.greeting .greeting-visual { position: relative; width: 100%; }
.contents.greeting .greeting-img { width: 100%; aspect-ratio: 320 / 803; overflow: hidden; }
.contents.greeting .greeting-img .img-box { width: 100%; height: 100%; }
.contents.greeting .greeting-img .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.contents.greeting .greeting-cont { max-width: 89.2rem; }
.contents.greeting .greeting-txt { display: flex; flex-direction: column; gap: 4.8rem; }
.contents.greeting .greeting-txt p { font: 300 var(--fs-24) / 150% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); }
.contents.greeting .greeting-txt p span { display: block; line-height: 1.5; }
.contents.greeting .greeting-txt p strong { font-weight: 500; }

.contents.greeting .greeting-sign { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; margin-top: 12rem; }
.contents.greeting .greeting-sign .sign-role { font: 300 var(--fs-20) / 100% var(--font-family); letter-spacing: -0.2px; color: var(--main-black); }
.contents.greeting .greeting-sign .sign-name { width: 152px; aspect-ratio: 152/56; font-size: 0; text-indent: -9999px; background: url('/resources/img/sub_grt_name.png') no-repeat center / contain; }

@media screen and (max-width: 1440px) {
    .sub-head { margin-bottom: 6rem; }
    .contents.greeting .greeting-body { grid-template-columns: 280px minmax(0, 1fr); }
}
@media screen and (max-width: 1280px) {
    .contents { padding: 12rem 0 14rem; }
    .sub-head { margin-bottom: 5rem; }
    .sub-tit { font-size: var(--fs-40); }
    .sub-breadcrumb .bc-item { font-size: var(--fs-20); }
    .contents.greeting .greeting-body { grid-template-columns: 240px minmax(0, 1fr); gap: 3.2rem; }
    .contents.greeting .greeting-txt { gap: 3.2rem; }
    .contents.greeting .greeting-txt p { font-size: var(--fs-22); }
    .contents.greeting .greeting-sign { margin-top: 6rem; }
    .contents.greeting .greeting-sign .sign-name { width: 140px; }
}
@media screen and (max-width: 1024px) {
    .contents.greeting .greeting-body { grid-template-columns: 200px minmax(0, 1fr); gap: 2.4rem; }
    .contents.greeting .greeting-txt p { font-size: var(--fs-20); }
    .contents.greeting .greeting-sign .sign-name { width: 16rem; }
}
@media screen and (max-width: 768px) {
    .pc-img { display: none; }
    .mb-img { display: block; }

    .sub-head { margin-bottom: 4rem; }
    .sub-tit { font-size: var(--fs-36); }

    .contents.greeting { padding: 8rem 0 10rem; }
    .contents.greeting .greeting-body { grid-template-columns: 1fr; gap: 2rem; }
    .contents.greeting .greeting-img { aspect-ratio: auto; }
    .contents.greeting .greeting-txt { gap: 2.4rem; }
    .contents.greeting .greeting-sign { margin-top: 3.6rem; }
}
@media screen and (max-width: 640px) {
    .sub-head { align-items: flex-end; gap: 0; }
    .sub-breadcrumb { gap: 2px; }
    .sub-breadcrumb .bc-divider { width: 20px; }
    
    .contents { padding: 10rem 0 12rem; }
    .contents.greeting .greeting-txt p span { display: inline; }
    .contents.greeting .greeting-sign .sign-name { width: 15rem; }
}
@media screen and (max-width: 400px) {
    .sub-breadcrumb .bc-item { font-size: 1.6rem; }
    .sub-breadcrumb .bc-divider { width: 18px; }
}
/* GREETING e */


/* OVERVIEW s */
.contents.overview .overview-body { width: 100%; }

.contents.overview .overview-info { padding: 6rem 3rem; background-color: var(--gray5); }

.contents.overview .overview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.contents.overview .overview-item { display: flex; flex-direction: column; align-items: center; padding: 0 2rem 4.8rem; text-align: center; position: relative; }
.contents.overview .overview-item:not(.overview-contact)::after { content: ''; width: 1px; height: 30rem; max-height: 100%; background-color: var(--gray4); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.contents.overview .overview-item:has(+ .overview-contact)::after { display: none; }

.contents.overview .overview-item .item-ico { width: 8.2rem; height: 8.2rem; margin-bottom: 3.2rem; }
.contents.overview .overview-item .item-ico:not(:first-child) { width: 8rem; height: 8rem; }
.contents.overview .overview-item .item-ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.contents.overview .overview-item .item-label { font: 500 var(--fs-20) / 100% var(--font-family); letter-spacing: -0.2px; color: var(--main-black); margin-bottom: 4.8rem; }
.contents.overview .overview-item .item-value { font: 300 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); }

.contents.overview .overview-contact { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; padding: 0 2rem; list-style: none; margin-top: 4.4rem; }
.contents.overview .overview-contact .contact-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2.4rem 4.8rem; }
.contents.overview .overview-contact .contact-item { display: flex; align-items: center; gap: 1.2rem; }
.contents.overview .overview-contact .ico { flex-shrink: 0; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-position: center; background-size: contain; }
.contents.overview .overview-contact .tel .ico { background-image: url('/resources/img/sub_ovv_mini_tel.png'); }
.contents.overview .overview-contact .fax .ico { background-image: url('/resources/img/sub_ovv_mini_fax.png'); }
.contents.overview .overview-contact .addr .ico { background-image: url('/resources/img/sub_ovv_mini_map.png'); }
.contents.overview .overview-contact .txt { font: 300 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); }

.contents.overview .overview-performance { margin-top: 12rem; }
.contents.overview .performance-inner { width: 96%; max-width: var(--wide-inner); margin: 0 auto; }

.contents.overview .performance-head { min-height: 11.1rem; margin-bottom: 0; position: relative; }
.contents.overview .performance-tit { font: 600 var(--fs-32) / 100% var(--font-family); letter-spacing: -0.32px; color: var(--main-black); text-align: center; }
.contents.overview .performance-unit { font: 300 var(--fs-18) / 100% var(--font-family); letter-spacing: -0.18px; color: var(--gray3); white-space: nowrap; position: absolute; top: 8.2rem; right: 0; }

.contents.overview .performance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; list-style: none; }
.contents.overview .performance-card { overflow: hidden; aspect-ratio: 425 / 640; position: relative; }

.contents.overview .performance-card .card-visual { position: absolute; inset: 0; }
.contents.overview .performance-card .card-visual .img-box { width: 100%; height: 100%; overflow: hidden; }
.contents.overview .performance-card .card-visual .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contents.overview .performance-card .card-visual .img-box.is-offset img { width: 205%; max-width: none; margin-left: -33%; }
.contents.overview .performance-card .card-dim { background-color: rgba(0, 0, 0, 0.2); pointer-events: none; position: absolute; inset: 0; }
.contents.overview .performance-card .card-dim.is-deep { background-color: rgba(0, 0, 0, 0.24); }

.contents.overview .performance-card .card-info { height: 100%; padding: 4rem; position: relative; z-index: 1; }
.contents.overview .performance-card .card-en { font: 500 var(--fs-20) / 100% var(--font-family); letter-spacing: -0.2px; color: #fff; margin-bottom: 1.6rem; }
.contents.overview .performance-card .card-ko { font: 600 var(--fs-28) / 100% var(--font-family); letter-spacing: -0.28px; color: #fff; }
.contents.overview .performance-card .card-count { font: 700 16rem / 100% var(--font-family); letter-spacing: -1.6px; color: #fff; opacity: 0.35; position: absolute; right: -1.6rem; bottom: 2rem; }

@media screen and (max-width: 1440px) {
    .contents.overview .performance-card .card-count { font-size: 12rem; letter-spacing: -1.2px; }
}
@media screen and (max-width: 1280px) {
    .contents.overview .overview-info { padding: 4.8rem 2.4rem; }
    .contents.overview .overview-item .item-label { margin-bottom: 3.2rem; }
    .contents.overview .overview-item .item-value { font-size: var(--fs-22); }
    .contents.overview .overview-contact .txt { font-size: var(--fs-22); }
    .contents.overview .overview-contact { margin-top: 3rem; }

    .contents.overview .overview-performance { margin-top: 10rem; }
    .contents.overview .performance-head { min-height: auto; padding-bottom: 4rem; }
    .contents.overview .performance-unit { top: auto; bottom: 6px; }
    .contents.overview .performance-grid { gap: 1.2rem; }
    .contents.overview .performance-card .card-info { padding: 3.2rem; }
}
@media screen and (max-width: 1024px) {
    .contents.overview .overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
    .contents.overview .overview-item { padding: 2rem; }
    .contents.overview .overview-item:nth-child(3n):not(.overview-contact)::after { display: none; }
    .contents.overview .overview-item:has(+ .overview-contact)::after { display: block; }
    .contents.overview .overview-item .item-ico { width: 7.2rem; height: 7.2rem; margin-bottom: 2rem; }
    .contents.overview .overview-item .item-label { margin-bottom: 2.4rem; }
    .contents.overview .overview-contact { grid-column: auto; align-items: flex-start; justify-content: flex-start; padding: 2rem 0 3.2rem 3.2rem; margin-top: 0; }
    .contents.overview .overview-contact .contact-list { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.6rem; }
    .contents.overview .overview-contact .contact-item { align-items: flex-start; }
    .contents.overview .overview-contact .txt { font-size: var(--fs-24); line-height: 1.3; }

    .contents.overview .performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contents.overview .performance-card { aspect-ratio: 1 / 1.2; }
}
@media screen and (max-width: 768px) {
    .contents.overview { padding: 8rem 0 10rem; }
    .contents.overview .overview-info { padding: 4.8rem 0 3.6rem; }
    .contents.overview .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem; }
    .contents.overview .overview-item:nth-child(3n):not(.overview-contact)::after { display: block; }
    .contents.overview .overview-item:nth-child(2n):not(.overview-contact)::after { display: none; }
    .contents.overview .overview-item:not(.overview-contact):not(:last-child)::after { height: 20rem; }
    .contents.overview .overview-contact { padding: 3rem; }
    .contents.overview .overview-contact .contact-item { gap: 0.8rem; }
    .contents.overview .overview-contact .txt { font-size: var(--fs-22); }

    .contents.overview .overview-performance { margin-top: 8rem; }
    .contents.overview .performance-tit { font-size: var(--fs-28); }
    .contents.overview .performance-card { aspect-ratio: 1/1.3; }
    .contents.overview .performance-card .card-info { padding: 2.4rem; }
    .contents.overview .performance-card .card-en { font-size: var(--fs-18); margin-bottom: 1.2rem; }
    .contents.overview .performance-card .card-ko { font-size: var(--fs-24); }
}
@media screen and (max-width: 480px) {
    .contents.overview .overview-grid { grid-template-columns: 1fr; row-gap: 3.2rem; }
    .contents.overview .overview-item::after { display: none !important; }
    .contents.overview .overview-item:not(.overview-contact):not(:last-child) { padding-bottom: 3.2rem; border-bottom: 1px solid var(--gray4); }
    .contents.overview .overview-contact { padding-bottom: 0; border-bottom: 0; }
    .contents.overview .overview-item .item-ico { width: 6.4rem; height: 6.4rem; }
    .contents.overview .overview-contact .txt { font-size: var(--fs-18); }

    .contents.overview .performance-grid { grid-template-columns: 1fr; max-width: 42.5rem; margin: 0 auto; }
    .contents.overview .performance-unit { position: static; text-align: right; margin-bottom: 2.4rem; }
    .contents.overview .performance-head { padding-bottom: 0; }
    .contents.overview .performance-card { aspect-ratio: 1/1.125; }
}
/* OVERVIEW e */


/* CONTACT s */
.contents.contact .contact-body { width: 100%; }

.contents.contact .contact-map-wrap { margin-bottom: 21rem; position: relative; }
.contents.contact .contact-map { width: 100%; height: 48rem; overflow: hidden; position: relative; }
.contents.contact .contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.contents.contact .contact-info-box { width: 100%; max-width: 96rem; padding: 4.8rem; background-color: var(--gray5); position: absolute; right: 0; bottom: 0; transform: translateY(50%); }

.contents.contact .info-addr { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2.4rem; }
.contents.contact .info-addr .addr-ico { flex-shrink: 0; width: 4.8rem; height: 4.8rem; background: var(--main-black) url('/resources/img/sub_ctt_ico1.png') no-repeat center / 3.2rem; }
.contents.contact .info-addr .addr-txt { font: 500 var(--fs-28) / 140% var(--font-family); letter-spacing: -0.28px; color: var(--main-black); }

.contents.contact .info-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem 4.8rem; }
.contents.contact .info-detail .detail-item { display: flex; align-items: center; gap: 1.2rem; }
.contents.contact .info-detail .ico { flex-shrink: 0; width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-position: center; background-size: contain; }
.contents.contact .info-detail .tel .ico { background-image: url('/resources/img/sub_ctt_mini_tel.png'); }
.contents.contact .info-detail .fax .ico { background-image: url('/resources/img/sub_ctt_mini_fax.png'); }
.contents.contact .info-detail .mail .ico { background-image: url('/resources/img/sub_ctt_mini_mail.png'); }
.contents.contact .info-detail .txt { font: 500 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); }

.contents.contact .contact-transport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 7.2rem; }
.contents.contact .transport-tit { font: 500 var(--fs-32) / 100% var(--font-family); letter-spacing: -0.32px; color: var(--main-black); margin-bottom: 4rem; }

.contents.contact .transport-list { display: flex; flex-direction: column; gap: 2.4rem; }
.contents.contact .transport-item { display: grid; grid-template-columns: 14rem auto; align-items: center; }
.contents.contact .transport-item.transport-bus { grid-template-columns: 28rem 1fr; }
.contents.contact .transport-item .item-label { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; min-height: 2rem; padding-right: 2rem; border-right: 1px solid var(--gray4);  }
.contents.contact .transport-item .item-desc { font: 300 var(--fs-20) / 140% var(--font-family); letter-spacing: -0.2px; color: var(--main-black); padding-left: 2rem; }

.contents.contact .line-badges { display: inline-flex; align-items: center; gap: 0.6rem; }
.contents.contact .line-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; font: 700 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: #fff; }
.contents.contact .line-badge.line-2 { background-color: #3cb44a; }
.contents.contact .line-badge.line-6 { background-color: #cd7c2f; }
.contents.contact .line-name { font: 500 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); white-space: nowrap; }

.contents.contact .bus-ico { flex-shrink: 0; width: 3.2rem; height: 3.2rem; background: url('/resources/img/sub_ctt_ico2.png') no-repeat center / contain; }
.contents.contact .stop-name { font: 500 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); white-space: nowrap; }


@media screen and (max-width: 1440px) {
    .contents.contact .contact-map-wrap { margin-bottom: 18rem; }
    .contents.contact .info-addr .addr-ico { width: 4rem; height: 4rem; }
    .contents.contact .info-addr .addr-txt { font-size: var(--fs-26); }
    .contents.contact .transport-item.transport-bus { grid-template-columns: 30rem 1fr; }
    .contents.contact .transport-item .item-desc { font-size: var(--fs-22); }
}
@media screen and (max-width: 1280px) {
    .contents.contact .contact-map { height: 40rem; }
    .contents.contact .contact-info-box { max-width: 82rem; }
    .contents.contact .info-addr .addr-txt { font-size: var(--fs-24); }
    .contents.contact .info-detail .txt { font-size: var(--fs-22); }
    .contents.contact .contact-transport { gap: 2rem; }
    .contents.contact .transport-tit { font-size: var(--fs-28); margin-bottom: 3.2rem; }
    .contents.contact .line-badge { width: 2.8rem; height: 2.8rem; font-size: var(--fs-22); line-height: 2.8rem; }
    .contents.contact .transport-item { grid-template-columns: 12rem auto; }
    .contents.contact .transport-item.transport-bus { grid-template-columns: 26rem 1fr; }
    .contents.contact .transport-item .item-label { gap: 0.4rem; }
    .contents.contact .transport-item .item-desc { font-size: var(--fs-20); padding-left: 1.2rem; }
    .contents.contact .stop-name { font-size: var(--fs-22); }
}
@media screen and (max-width: 1024px) {
    .contents.contact .contact-map-wrap { margin-bottom: 8rem; }
    .contents.contact .contact-info-box { max-width: unset; padding: 4rem; position: relative; transform: translateY(0); }
    .contents.contact .info-addr { margin-bottom: 2rem; }
    .contents.contact .info-addr .addr-ico { width: 4.8rem; height: 4.8rem; }
    .contents.contact .info-addr .addr-txt { font-size: var(--fs-26); }
    .contents.contact .info-detail .txt { font-size: var(--fs-24); }
    .contents.contact .info-detail { gap: 2rem 3.2rem; }
    .contents.contact .contact-transport { grid-template-columns: 1fr; gap: 6rem; }
    .contents.contact .transport-tit { font-size: 2.6rem; margin-bottom: 2.8rem; }
    .contents.contact .transport-item { flex-direction: column; gap: 1.2rem; }
    .contents.contact .transport-item.transport-bus { grid-template-columns: 27rem 1fr; }
    .contents.contact .stop-name { font-size: var(--fs-24); }
    .contents.contact .transport-item .item-desc { font-size: var(--fs-22); }
}
@media screen and (max-width: 768px) {
    .contents.contact .contact-map { height: 36rem; }
    .contents.contact .contact-info-box { padding: 3.2rem; }
    .contents.contact .info-addr .addr-txt { font-size: var(--fs-24); }
    .contents.contact .info-detail { gap: 1.6rem; }
    .contents.contact .info-detail .txt { font-size: var(--fs-22); }
    .contents.contact .contact-transport { grid-template-columns: 1fr; gap: 5.6rem; }
    .contents.contact .transport-tit { font-size: var(--fs-26); }
    .contents.contact .line-name,
    .contents.contact .stop-name { font-size: var(--fs-22); }
}
@media screen and (max-width: 640px) {
    .contents.contact .info-addr .addr-txt { font-size: var(--fs-22); }
    .contents.contact .transport-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: start; }
    .contents.contact .transport-list li { position: relative; }
    .contents.contact .transport-list li:first-child:after { content: ''; display: block; width: 1px; height: 100%; background-color: var(--gray4); position: absolute; right: -1rem; bottom: 0; }
    .contents.contact .transport-item, .contents.contact .transport-item.transport-bus { grid-template-columns: 1fr; gap: 2rem; }
    .contents.contact .transport-item .item-label { justify-content: center; border-right: 0; padding-right: 0;}
    .contents.contact .transport-item .item-desc { padding: 1rem; text-align: center; }

}
@media screen and (max-width: 480px) {
    .contents.contact .contact-map { height: 32rem; }
    .contents.contact .transport-item.transport-bus .item-label { flex-direction: column; gap: 2.4rem; }
    .contents.contact .bus-ico { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--gray5) url('/resources/img/sub_ctt_ico2.png') no-repeat center / 3.2rem 3.2rem; }
    .contents.contact .line-name, .contents.contact .stop-name { font-size: 2rem; }
}
/* CONTACT e */


/* PROJECT LIST s */
.contents.project-list .project-list-body { width: 100%; }

.contents.project-list .project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10rem 3.2rem; list-style: none; }
.contents.project-list .project-item { min-width: 0; }
.contents.project-list .project-link { display: block; color: var(--main-black); text-decoration: none; }

.contents.project-list .project-thumb { width: 100%; aspect-ratio: 445 / 560; overflow: hidden; }
.contents.project-list .project-thumb .img-box { width: 100%; height: 100%; }
.contents.project-list .project-thumb .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.contents.project-list .project-tit { font: 500 var(--fs-24) / 100% var(--font-family); letter-spacing: -0.24px; color: var(--main-black); margin-top: 2rem; }

@media screen and (max-width: 1280px) {
    .contents.project-list .project-grid { gap: 8rem 2.4rem; }
}
@media screen and (max-width: 1024px) {
    .contents.project-list .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem 2rem; }
}
@media screen and (max-width: 768px) {
    .contents.project-list .project-grid { gap: 4.8rem 1.6rem; }
}
@media screen and (max-width: 480px) {
    .contents.project-list .project-grid { gap: 4rem 0.8rem; margin: 0 auto; }
    .contents.project-list .project-thumb { aspect-ratio: 1 / 1.25; }
    .contents.project-list .project-tit { margin-top: 1rem; font-size: 2rem; }
}
/* PROJECT LIST e */


/* PROJECT VIEW s */
.contents.project-view .project-view-head { align-items: flex-start; }
.contents.project-view .project-view-head .sub-tit { font-weight: 600; }

.contents.project-view .project-view-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; flex-shrink: 0; }
.contents.project-view .project-date { font: 300 var(--fs-20) / 100% var(--font-family); letter-spacing: -0.2px; color: var(--gray1); }
.contents.project-view .project-view-meta .sub-breadcrumb .bc-item { font-size: var(--fs-20); letter-spacing: -0.2px; }

.contents.project-view .project-view-body { width: 100%; }

.contents.project-view .project-view-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 3.2rem; margin-bottom: 10rem; }

.contents.project-view .gallery-main { min-width: 0; }

.contents.project-view .project-main-swiper { width: 100%; aspect-ratio: 1200 / 720; overflow: hidden; background-color: var(--gray4); position: relative; }
.contents.project-view .project-main-swiper .swiper-wrapper { position: relative; width: 100%; height: 100%; }
.contents.project-view .project-main-swiper .swiper-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }
.contents.project-view .project-main-swiper .swiper-slide.is-active { opacity: 1; z-index: 2; }
.contents.project-view .project-main-swiper .img-box { width: 100%; height: 100%; overflow: hidden; cursor: pointer; background-color: var(--gray4); }
.contents.project-view .project-main-swiper .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contents.project-view .project-main-swiper .img-box img.is-portrait { width: auto; height: 100%; max-width: 100%; margin: 0 auto; object-fit: contain; object-position: center; }

.contents.project-view .gallery-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 1.6rem; }
.contents.project-view .gallery-prev,
.contents.project-view .gallery-next { width: 7.2rem; height: 1.7rem; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; }
.contents.project-view .gallery-prev { background-image: url('/resources/img/ico_arr_prev.png'); }
.contents.project-view .gallery-next { background-image: url('/resources/img/ico_arr_next.png'); }
.contents.project-view .gallery-fraction { font: 400 var(--fs-18) / 100% var(--font-family); letter-spacing: -0.18px; color: var(--gray2); }

.contents.project-view .gallery-thumb-wrap { width: 20rem; height: 0; min-height: 100%; overflow-y: auto; padding-right: 0.4rem; }
.contents.project-view .gallery-thumb-wrap::-webkit-scrollbar { width: 3px; }
.contents.project-view .gallery-thumb-wrap::-webkit-scrollbar-thumb { background-color: var(--gray4); border-radius: 10px; }
.contents.project-view .gallery-thumb-wrap::-webkit-scrollbar-track { background-color: transparent; }

.contents.project-view .gallery-thumb-list { display: flex; flex-direction: column; gap: 1.2rem; list-style: none; }
.contents.project-view .gallery-thumb-item { width: 100%; }
.contents.project-view .thumb-btn { display: block; width: 100%; padding: 0; cursor: pointer; }
.contents.project-view .thumb-btn .thumb-img { display: block; width: 100%; aspect-ratio: 160 / 108; overflow: hidden; opacity: 0.9; position: relative; }
.contents.project-view .thumb-btn .thumb-img::after { content: ''; background-color: rgba(0, 0, 0, 0.25); position: absolute; inset: 0; }
.contents.project-view .thumb-btn .thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contents.project-view .gallery-thumb-item.is-active .thumb-btn .thumb-img { opacity: 1; }
.contents.project-view .gallery-thumb-item.is-active .thumb-btn .thumb-img::after { display: none; }

.contents.project-view .project-view-nav { display: flex; align-items: center; justify-content: center; gap: 9rem; }
.contents.project-view .project-view-nav .nav-item { display: inline-flex; align-items: center; gap: 0.8rem; font: 600 var(--fs-20) / 100% var(--font-family); letter-spacing: -0.2px; color: var(--main-black); text-decoration: none; }
.contents.project-view .project-view-nav .nav-ico { flex-shrink: 0; width: 1.8rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: contain; }
.contents.project-view .project-view-nav .nav-prev .nav-ico { width: 1rem; height: 2rem; background-image: url('/resources/img/ico_arr_mini_prev.png'); }
.contents.project-view .project-view-nav .nav-list .nav-ico { width: 1.8rem; height: 1.2rem; background-image: url('/resources/img/ico_list.png'); }
.contents.project-view .project-view-nav .nav-next .nav-ico { width: 1rem; height: 2rem; background-image: url('/resources/img/ico_arr_mini_next.png'); }

@media screen and (max-width: 1280px) {
    .contents.project-view .project-view-gallery { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.4rem; }
    .contents.project-view .gallery-thumb-wrap { width: 18rem; }
    .contents.project-view .project-view-nav { gap: 6rem; }
}
@media screen and (max-width: 1024px) {
    .contents.project-view .project-view-gallery { grid-template-columns: 1fr; gap: 3.2rem; }
    .contents.project-view .gallery-thumb-wrap { width: 100%; height: auto; min-height: 0; padding-right: 0; overflow: visible; }
    .contents.project-view .gallery-thumb-list { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }
    .contents.project-view .gallery-thumb-item { width: calc((100% - 3.6rem) / 4); }
}
@media screen and (max-width: 768px) {
    .sub-breadcrumb .bc-divider { width: 2.2rem; }
    .contents.project-view .project-view-gallery { margin-bottom: 6rem; }
    .contents.project-view .project-main-swiper { aspect-ratio: 1 / 0.78; }
    .contents.project-view .gallery-prev, .contents.project-view .gallery-next { width: 6rem; height: 2.4rem; }
    .contents.project-view .gallery-thumb-wrap { overflow-x: auto; overflow-y: hidden; padding-right: 0; padding-bottom: 0.4rem; }
    .contents.project-view .gallery-thumb-wrap::-webkit-scrollbar { width: auto; height: 3px; }
    .contents.project-view .gallery-thumb-list { flex-wrap: nowrap; width: max-content; }
    .contents.project-view .gallery-thumb-item { flex-shrink: 0; width: 14rem; }
}
@media screen and (max-width: 640px) {
    .contents.project-view .project-view-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
    .contents.project-view .project-view-meta { flex-direction: row-reverse; justify-content: space-between; width: 100%; }
}
@media screen and (max-width: 480px) {
    .contents.project-view .gallery-thumb-item { width: 12rem; }
}

.project-gallery-modal { display: none; position: fixed; inset: 0; z-index: 1000; }
.project-gallery-modal.is-active { display: block; }
.project-gallery-modal-dim { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.9); }
.project-gallery-modal-inner { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.project-gallery-modal-image { width: min(100%, 1440px); height: min(100%, 840px); max-width: 1440px; max-height: 840px; display: flex; align-items: center; justify-content: center; }
.project-gallery-modal-image img { display: block; width: 100%; height: 100%; max-width: 1440px; max-height: 840px; object-fit: contain; object-position: center; }
.project-gallery-modal-close,
.project-gallery-modal-prev,
.project-gallery-modal-next { position: absolute; z-index: 2; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; }
.project-gallery-modal-close { top: 2.4rem; right: 2.4rem; width: 3.2rem; height: 3.2rem; background-image: none; }
.project-gallery-modal-close::before,
.project-gallery-modal-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 3.2rem; background-color: #fff; }
.project-gallery-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.project-gallery-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.project-gallery-modal-prev,
.project-gallery-modal-next { top: 50%; width: 7.2rem; height: 1.7rem; transform: translateY(-50%); }
.project-gallery-modal-prev { left: 2.4rem; background-image: url('/resources/img/ico_arr_prev.png'); filter: brightness(0) invert(1); }
.project-gallery-modal-next { right: 2.4rem; background-image: url('/resources/img/ico_arr_next.png'); filter: brightness(0) invert(1); }

body.is-project-gallery-modal-open { overflow: hidden; }

@media screen and (max-width: 1024px) {
    .project-gallery-modal-prev { left: 1.6rem; }
    .project-gallery-modal-next { right: 1.6rem; }
    .project-gallery-modal-close { top: 1.6rem; right: 1.6rem; }
}
@media screen and (max-width: 768px) {
    .project-gallery-modal-inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; justify-content: center; width: 100%; height: 100%; padding: 5.6rem 1rem 2.4rem; row-gap: 1.6rem; column-gap: 1.6rem; box-sizing: border-box; }
    .project-gallery-modal-image { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; max-height: calc(100vh - 12rem); }
    .project-gallery-modal-image img { width: 100%; height: auto; max-height: calc(100vh - 12rem); }
    .project-gallery-modal-prev { grid-column: 1; grid-row: 2; position: static; top: auto; left: auto; transform: none; justify-self: start; width: 7.2rem; height: 1.7rem; }
    .project-gallery-modal-next { grid-column: 2; grid-row: 2; position: static; top: auto; right: auto; transform: none; justify-self: end; width: 7.2rem; height: 1.7rem; }
}
/* PROJECT VIEW e */


/* QUOTE REQUEST s */

.contents.request .inner { display: grid; grid-template-columns: 52rem auto; align-items: start; gap: 4rem; }
.contents.request .sub-head { flex-direction: column; align-items: flex-start; gap: 2.4rem; }

.request .requet-txt p:not(.warning-txt) { display: block; font: 300 var(--fs-20) / 150% var(--font-family); }
.request .requet-txt p.warning-txt { display: block; font: 300 var(--fs-16) / 150% var(--font-family); margin-top: 1rem; }
.request .requet-txt p.warning-txt span { color: var(--warning); }

.request .frm-itm { display: grid; grid-template-columns: 10rem auto; align-items: center; border-bottom: 1px solid var(--gray1); padding: 2.4rem 0; }
.request .frm-itm:first-child { padding-top: 0; }
.request .frm-itm .frm-tit {  display: flex; align-items: flex-end; gap: 4px; font: 500 var(--fs-20)/100% var(--font-family); }
.request .frm-itm .frm-tit span { color: var(--warning); line-height: 24px; }
.request .frm-itm .frm-desc input,
.request .frm-itm .frm-desc textarea { background-color: transparent; }
.request .frm-itm .frm-desc textarea { min-height: 20rem; }
.request .frm-itm:hover .frm-desc input,
.request .frm-itm:hover .frm-desc textarea  { background-color: var(--gray5); }

.request .inquiry-form-bottom { display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 0; border-bottom: 0; }
.request .inquiry-form-bottom .frm-itm { display: flex; align-items: center; gap: 8px; height: auto; border-bottom: 0; padding: 0; }
.request .inquiry-form-bottom input[type="checkbox"] { display: none; }
.request .inquiry-form-bottom input[type="checkbox"] + label { display: block; width: 18px; height: 18px; text-indent: -9999px; font-size: 0; background: url('/resources/img/ico_check.png') no-repeat 0 top / 40px 18px; cursor: pointer; }
.request .inquiry-form-bottom input[type="checkbox"]:checked + label { background-position: -22px top; }
.request .inquiry-form-bottom .frm-tit { align-items: center; }
.request .inquiry-form-bottom .frm-tit span { line-height: 32px; }
.request .inquiry-form-bottom .frm-tit a { font: 400 var(--fs-18)/100% var(--font-family); letter-spacing: -0.18px; color: var(--gray3); margin-left: 12px; }
.request .inquiry-form-bottom .frm-btn-wrap button { display: block; width: 20rem; text-align: center; font: 500 var(--fs-18)/100% var(--font-family); letter-spacing: -0.18px; padding: 1.6rem 0; background-color: var(--main-black); color: #fff; }


@media screen and (max-width: 1280px) {
    .contents.request .inner { grid-template-columns: 44rem minmax(0, 1fr); gap: 3.2rem; }
    .request .frm-itm { grid-template-columns: 9rem minmax(0, 1fr); padding: 1.8rem 0; }
}
@media screen and (max-width: 1024px) {
    .contents.request .inner { grid-template-columns: 1fr; gap: 4rem; }
    .contents.request .sub-head { gap: 1.6rem; margin-bottom: 0; }
}
@media screen and (max-width: 768px) {
    .contents.request .inner { padding: 0 3%; gap: 3.2rem; }
    .request .frm-itm { padding: 2rem 0; }
    .request .frm-itm .frm-tit { align-items: center; }
    .request .frm-itm .frm-desc textarea { min-height: 18rem; }
    .request .inquiry-form-bottom { flex-direction: column; align-items: flex-start; gap: 6rem; }
    .request .inquiry-form-bottom .frm-btn-wrap { width: 100%; }
    .request .inquiry-form-bottom .frm-btn-wrap button { width: 100%; padding: 2rem 0; }
}
@media screen and (max-width: 640px) {
    .contents.request .sub-head { gap: 1.2rem; }
    .request .frm-itm { padding: 1.6rem 0; }
}
@media screen and (max-width: 480px) {
    .contents.request .inner { gap: 2.4rem; }
    .request .frm-itm.frm-textarea { grid-template-columns: 1fr; gap: 1.2rem; }
    .request .frm-itm .frm-desc textarea { background-color: var(--gray5); }
    .request .inquiry-form-bottom { padding: 1.6rem 0; }
}


/* QUOTE REQUEST e */