@charset "utf-8";
/* ********************************************************************
 * name : CodeBee CG LAB
 * filename : content.css
 * author : JBieN 제이비엔
 * update : 2026-06-04
********************************************************************* */

/* Portfolio */

.portPage {position: relative;z-index: 10;padding-bottom: var(--foot-h);background: transparent;}

.portHero {position: sticky;top: 0;z-index: 1;min-height: 60vh;padding: 150px 4.5vw 42px;display: flex;flex-direction: column;justify-content: flex-end;background: #000;}
.portEye {margin: 0 0 26px;font-size: clamp(17px, 1.35vw, 24px);font-weight: 600;letter-spacing: -0.03em;}
.portTit {margin: 0;overflow: hidden;font-size: clamp(72px, 12vw, 180px);line-height: 0.88;letter-spacing: -0.065em;font-weight: 900;}
.portTit > span {display: flex;align-items: flex-end;overflow: hidden;}
.portTit em {display: inline-block;font-style: normal;transform: translateY(115%);opacity: 0;will-change: transform, opacity;}
.portTabs {display: flex;gap: clamp(28px, 4vw, 72px);margin: clamp(50px, 6vw, 95px) 0 0;padding: 0;overflow-x: auto;white-space: nowrap;list-style: none;}
.portTabs button {border: 0;padding: 0;background: none;color: #fff;font-size: 17px;font-weight: 850;cursor: pointer;}
.portTabs button[aria-selected="true"] {color: var(--point);}
.portHero .portEye,.portHero .portTabs {opacity: 0;transform: translateY(40px);will-change: transform, opacity;}
.portHero.is-on .portEye {animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.portHero.is-on .portTabs {animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;}
.portHero.is-on .portTit em {animation: letterUp 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;animation-delay: calc(var(--i) * 0.08s + 0.18s);}

@keyframes letterUp {
	0% {opacity: 0;transform: translateY(115%) scaleY(0.94);}
	100% {opacity: 1;transform: translateY(0) scaleY(1);}
}

@keyframes fadeUp {
	to {opacity: 1;transform: translateY(0);}
}

/* Portfolio List */
.portList {padding: 3em 0;}
.portGrid {columns: 3;column-gap: 8px;}
.portCard {position: relative;display: inline-block;width: 100%;margin: 0 0 8px;overflow: hidden;background: #111;color: #fff;isolation: isolate;break-inside: avoid;vertical-align: top;}

.portCard.is-hide {display: none;}
.portLk {display: block;
position: relative;}
.portLk::after {content: "";position: absolute;inset: 0;z-index: 1;background: linear-gradient(to bottom,rgba(0, 0, 0, 0.16) 0%,rgba(0, 0, 0, 0.18) 34%,rgba(0, 0, 0, 0.92) 100%);pointer-events: none;}
.portCard img {display: block;width: 100%;height: auto;transition: transform 0.8s ease;z-index: 0;}
.portCard:hover img {transform: scale(1.055);}

.portInfo,
.portOv,
.portTxt {position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;}
.portInfo {position: absolute;left: 24px;right: 24px;bottom: 25px;z-index: 2;text-shadow: 0 3px 18px rgba(0, 0, 0, 0.82);pointer-events: none;text-align: left;}
.portCat {display: block;margin-bottom: 7px;color: rgba(255, 255, 255, 0.92);font-size: 12px;font-weight: 800;}
.portNm {margin: 0 0 8px;color: #fff;font-size: clamp(20px, 1.45vw, 26px);line-height: 1.2;font-weight: 700;letter-spacing: -0.03em;}
.portBadge {position: absolute;top: 18px;left: 18px;z-index: 3;padding: 7px 11px;border-radius: 999px;background: rgba(0, 0, 0, 0.72);font-size: 10px;font-weight: 900;letter-spacing: 0.04em;pointer-events: none;}
.ytPlay {position: absolute;left: 50%;top: 50%;z-index: 2;width: 68px;height: 68px;border-radius: 50%;background: rgba(0, 0, 0, 0.58);backdrop-filter: blur(12px);transform: translate(-50%, -50%);pointer-events: none;transition: background 0.25s ease, transform 0.25s ease;}
.ytPlay::before {content: "";position: absolute;left: 27px;top: 22px;width: 0;height: 0;border-left: 18px solid #fff;border-top: 12px solid transparent;border-bottom: 12px solid transparent;}
.portCard:hover .ytPlay {background: var(--point);transform: translate(-50%, -50%) scale(1.06);}

/* Quick View Button */
.qvBtn {position: absolute;right: 18px;top: 25px;z-index: 5;min-height: 38px;padding: 0 14px;border-radius: 999px;background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(12px);color: #fff;font-size: 12px;font-weight: 850;letter-spacing: -0.02em;cursor: pointer;opacity: 0;transform: translateY(-8px);transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;}
.qvBtn::before {content: "＋";margin-right: 8px;color: var(--point);}
.portCard:hover .qvBtn,
.qvBtn:focus-visible {opacity: 1;transform: translateY(0);}
.qvBtn:hover {background: rgba(255, 88, 65, 0.9);}
.qvBtn:hover::before{color:#fff;}

/* Quick View Modal */
html.is-qv-open,
body.is-qv-open {overflow: hidden !important;}

body.is-qv-open {position: fixed;left: 0;right: 0;width: 100%;}
.qv {position: fixed;inset: 0;z-index: 3000;display: none;align-items: center;justify-content: center;padding: 40px;overflow: hidden;}
.qv.is-open {display: flex;}

.qvBg {position: absolute;inset: 0;border: 0;background: rgba(0, 0, 0, 0.78);backdrop-filter: blur(18px);cursor: pointer;}
.qvPanel {position: relative;z-index: 1;width: min(100%, 80vw);height: min(85vh, calc(100dvh - 80px));max-height: calc(100dvh - 80px);display: grid;grid-template-columns: minmax(0, 1fr) minmax(320px, 24vw);overflow: hidden;border-radius: 28px;background: #111;color: #fff;box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);}
.qvMedia {position: relative;z-index: 1;height: 100%;min-height: 0;background: #050505;}
.qvMedia img,.qvMedia iframe {position: relative;z-index: 2;display: block;width: 100%;height: 100%;min-height: 0;border: 0;object-fit: cover;pointer-events: auto !important;}
.qvInfo {display: flex;flex-direction: column;padding: 5em 3em;background: #111;overflow: hidden;}

.qvCat {margin: 0 0 10px;color: var(--point);font-size: clamp(15px, 0.85vw, 20px);font-weight: 900;letter-spacing: 0.08em;text-transform: uppercase;}
.qvTit {margin: 0;font-size: clamp(26px, 2.3vw, 50px);letter-spacing: -0.025em;font-weight: 500;line-height: 1.2;}
.qvDesc {margin: 24px 0 0;color: rgba(255, 255, 255, 0.68);font-size: 15px;line-height: 1.72;letter-spacing: -0.02em;}
.qvCount {margin: 18px 0 0;color: rgba(255, 255, 255, 0.48);font-size: 12px;font-weight: 800;letter-spacing: 0.08em;}
.qvMore {margin-top: 20px;}
.qvThumbs {display: flex;align-items: center;gap: 8px;margin-bottom: 12px;overflow: hidden;}
.qvThumb {flex: 0 0 auto;width: 58px;height: 42px;overflow: hidden;border-radius: 9px;background: #222;opacity: 0.86;}
.qvThumb img {width: 100%;height: 100%;object-fit: cover;}
.qvPlus {flex: 0 0 auto;min-width: 54px;height: 42px;border-radius: 9px;display: inline-flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.12);color: #fff;font-size: 13px;font-weight: 900;}
.qvMoreTxt {margin: 0;color: rgba(255, 255, 255, 0.56);font-size: clamp(13px,0.7vw,15px);line-height: 1.55;padding-top: 10px;}
.qvAct {display: flex;flex-wrap: wrap;gap: 10px;margin-top: auto;padding-top: 34px;}
.qvLk {padding: 1.2em 2.5em;border-radius: 999px;background: var(--point);font-size: clamp(14px, 0.8vw, 18px);}

.qvClose {padding: 1.2em 2.5em;border-radius: 999px;background: #1a1a1a;color: rgba(255, 255, 255, 0.78);font-size: clamp(14px, 0.8vw, 18px);}
.qvX {position: absolute;right: 18px;top: 18px;z-index: 3;width: 42px;height: 42px;border-radius: 50%;background: rgb(0 0 0);color: #fff;font-size: 30px;cursor: pointer;font-weight: 200;line-height: 42px;}
.qvNav {position: absolute;left: 18px;right: 18px;top: 50%;z-index: 4;display: flex;justify-content: space-between;pointer-events: none;transform: translateY(-50%);}
.qvNavBtn {width: 54px;height: 54px;border-radius: 50%;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(12px);color: #fff;font-size: 26px;line-height: 1;cursor: pointer;pointer-events: auto;transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;}
.qvNavBtn:after{content:'‹';font-size: 45px;font-weight: 200;display: flex;justify-content: center;margin-top: -9px;}
.qvNav .next:after{content:'›';}
.qvNavBtn:hover {background: var(--point);transform: scale(1.06);}
.qvNavBtn:disabled {opacity: 0.28;pointer-events: none;}

/* View Hero */
.viewHero {position: relative;min-height: 100vh;padding: 150px 0 100px;display: flex;align-items: flex-end;overflow: hidden;background:radial-gradient(circle at 80% 20%, rgba(255, 88, 65, 0.16), transparent 28%),linear-gradient(180deg, #050505 0%, #0b0b0b 100%);}
.viewHero::before {content: "";position: absolute;inset: 0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.65)),var(--hero-img) center / cover no-repeat;opacity: 0.46;transform: scale(1.04);}
.viewHeroIn {position: relative;z-index: 2;width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;}
.backLk {display: inline-flex;margin-bottom: 75px;color: rgba(255, 255, 255, 0.74);font-size: clamp(18px, 0.9vw, 22px);font-weight: 500;}
.viewLabel {margin: 0 0 20px;color: var(--point);font-size: clamp(15px, 0.9vw, 22px);font-weight: 800;letter-spacing: 0.06em;text-transform: uppercase;}
.viewTit {margin: 0;font-size: clamp(36px, 4vw, 80px);letter-spacing: -0.03em;font-weight: 700;}
.viewSum {max-width: 780px;margin: 35vh 0 0 auto;color: rgba(255, 255, 255, 0.82);font-size: clamp(18px, 1.35vw, 26px);line-height: 1.55; white-space: pre-line;}

/* Overview */
.viewOv {position: relative;z-index: 3;padding: clamp(72px, 8vw, 110px) 0 3em;border-radius: 64px 0 0 0;background: #fff;color: #111;}
.viewOvIn {width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;}
.metaGrid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));border-top: 1px solid rgba(0, 0, 0, 0.18);border-bottom: 1px solid rgba(0, 0, 0, 0.18);}
.metaItem {display: flex;padding: 2.2em 2em;border-right: 1px solid rgba(0, 0, 0, 0.12);flex-direction: column;justify-content: center;gap: 1em;}
.metaItem:last-child {border-right: 0;}
.metaItem dt {color: rgba(0, 0, 0, 0.48);font-size: clamp(13px, 0.8vw, 16px);font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase;}
.metaItem dd {font-size: clamp(18px, 1.15vw, 24px);font-weight: 700;letter-spacing: -0.035em;line-height: 1.2;}
.contSplit {display: grid;grid-template-columns: minmax(220px, 35%) minmax(0, 1fr);gap: clamp(50px, 5vw, 140px);max-width: 1280px;margin: 7em auto 3em;}
.secKick {margin: 0;color: var(--point);font-size: clamp(15px, 0.85vw, 20px);font-weight: 900;letter-spacing: 0.08em;text-transform: uppercase;}
.summaryTit {margin-top: -40px;color: #111;font-size: clamp(17px,1vw,22px);line-height: 1.8;font-weight: 500;white-space: pre-line;}

/* viewVisual */
.viewVisual {position: relative;z-index: 4;padding: 0 0 5em;background: #fff;color: #111;}
.viewVisualIn {width:min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;}
.mainMedia {position: relative;margin: 0;overflow: hidden;border-radius: 28px;background: #f3f3f3;line-height: 0;padding: 4em 0 5em;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}
.mainMedia[data-type="image"] {background-color: #fff;border-radius: 0;border:0;}
.mainMedia[data-type="image"] img{width: auto;margin: 0 auto;max-height: 95vh;border-radius: 30px;}
.mainMedia video,
.mainMedia img,
.mainMedia iframe {display: block;width: 100%;height: auto;min-height: 540px;border: 0;object-fit: cover;vertical-align: top;}
.mainMedia iframe {display: block;width: 50%;aspect-ratio: 16 / 9;height: auto;min-height: 0;border: 0;position: relative;z-index: 3;pointer-events: auto !important;margin: 0 auto;}
.mediaCap {color: #f3f3f3;font-size: 18px;letter-spacing: 0.04em;text-align: center;margin: 0 auto 1.7em;}

/* 카테고리 메뉴 */
.floatCate {position: fixed;right: 25px;bottom: 95px;z-index: 100;opacity: 0;pointer-events: none;transform: translateY(16px);transition: opacity .35s ease, transform .35s ease;}
.floatCate.is-show {opacity: 1;pointer-events: auto;transform: translateY(0);}
.floatCateBtn {width: 132px;height: 54px;border: 1px solid rgba(255,255,255,.18);border-radius: 999px;background: rgba(15,15,15,.72);backdrop-filter: blur(16px);color: #fff;font-size: 13px;font-weight: 700;letter-spacing: .08em;cursor: pointer;}
.floatCateBtn span {display: inline-block;width: 7px;height: 7px;margin-left: 8px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(45deg) translateY(-2px);transition: transform .25s ease;}
.floatCate.is-open .floatCateBtn span {transform: rotate(225deg) translateY(-2px);}
.floatCatePanel {position: absolute;right: 0;bottom: 55px;width: 132px;padding: 12px;border: 1px solid rgba(255,255,255,.12);border-radius: 18px;background: rgba(12,12,12,.86);backdrop-filter: blur(18px);box-shadow: 0 20px 50px rgba(0,0,0,.45);opacity: 0;pointer-events: none;transform: translateY(12px);transition: opacity .25s ease, transform .25s ease;}
.floatCate.is-open .floatCatePanel {opacity: 1;pointer-events: auto;transform: translateY(0);}
.floatCatePanel a {display: block;padding: 10px 12px;border-radius: 10px;color: rgba(255,255,255,.72);font-size: 14px;font-weight: 600;text-decoration: none;transition: background .2s ease, color .2s ease;}
.floatCatePanel a:hover,.floatCatePanel a.is-active {background: rgba(255,82,62,.16);color: #ff523e;}

#port-list {scroll-margin-top: 110px;text-align: center;font-size: 18px;}

/* portfolioView */
.portfolioViewPage img{-webkit-user-drag:none;user-select:none;}
.portfolioViewPage .zoomLk{cursor:zoom-in;}
.imgGrid {margin-top: clamp(18px, 2vw, 34px);columns: 3;column-gap: clamp(18px, 2vw, 34px);}
.imgGrid[data-count="0"],
.imgGrid[data-count="1"] { display: none; }
.imgGrid[data-count="2"] {columns: initial;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: clamp(18px, 2vw, 34px);align-items: start;}
.imgGrid[data-count="2"] .imgCard {height: auto;aspect-ratio: auto;}
.imgGrid[data-count="2"] .imgCard img {display: block;width: 100%;height: auto;aspect-ratio: auto;object-fit: initial;}
.imgGrid[data-count="3"],
.imgGrid[data-count="4"]{columns: 2;}

.imgCard {position: relative;display: inline-block;width: 100%;margin: 0 0 clamp(18px, 2vw, 34px);overflow: hidden;border-radius: 28px;break-inside: avoid;vertical-align: top;}
.imgCard a {display: block;}
.imgCard img {display: block;width: 100%;height: auto;object-fit: initial;transition: transform 0.9s ease;}
.imgCard:hover img {transform: scale(1.04);}
.imgCap {position: absolute;left: 18px;right: 18px;bottom: 18px;z-index: 2;padding: 12px 14px;border-radius: 14px;background: rgba(0, 0, 0, 0.62);color: #fff;pointer-events: none;}
.imgCap strong {display: block;margin-bottom: 5px;font-size: 15px;line-height: 1.25;letter-spacing: -0.03em;}
.imgCap span {display: block;color: rgba(255, 255, 255, 0.72);font-size: 12px;line-height: 1.45;}

/* Prev / Next */
.viewNav {padding-bottom: 10em;color: #111;background: #fff;}
.viewNavIn {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));border-top: 1px solid rgba(0, 0, 0, 0.16);border-bottom: 1px solid rgba(0, 0, 0, 0.16);}
.viewNavItem {position: relative;display: flex;min-height: clamp(260px, 25vw, 430px);padding: clamp(34px, 4vw, 70px);overflow: hidden;background: #111;color: #fff;isolation: isolate;align-items: center;}
.viewNavItem + .viewNavItem {border-left: 1px solid rgba(255, 255, 255, 0.18);}
.viewNavItem::before {content: "";position: absolute;inset: 0;z-index: -2;background: var(--nav-thumb) center / cover no-repeat;opacity: 0.55;transform: scale(1.04);transition: transform 0.8s ease, opacity 0.8s ease;}
.viewNavItem::after {content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.76));}
.viewNavItem:hover::before {transform: scale(1.09);opacity: 0.72;}
.viewNavItem.is-disabled {pointer-events: none;opacity: 0.35;}
.viewNavCon {width: 100%;display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.viewNavLabel {display: flex;margin-bottom: 18px;color: var(--point);font-size: 14px;font-weight: 900;letter-spacing: 0.1em;text-transform: uppercase;}
.viewNavTit {font-size: clamp(24px, 1.9vw, 70px);font-weight: 700;}
.viewNavCat {display: block;margin-top: 18px;color: rgba(255, 255, 255, 0.68);font-size: clamp(16px, 1vw, 22px);font-weight: 700;}
.next .viewNavCon{align-items: flex-end}

.imgZoom {position: fixed;inset: 0;z-index: 5000;display: none;align-items: center;justify-content: center;padding: 40px;}
.imgZoom.is-open {display: flex;}
.imgZoomBg {position: absolute;inset: 0;border: 0;background: rgba(0, 0, 0, 0.88);cursor: pointer;}
.imgZoom img {position: relative;z-index: 2;max-width: min(100%, 1500px);max-height: calc(100dvh - 80px);object-fit: contain;border-radius: 18px;}
.imgZoomClose {position: fixed;right: 28px;top: 28px;z-index: 3;width: 48px;height: 48px;border: 1px solid rgba(255,255,255,.22);border-radius: 50%;background: rgba(0,0,0,.45);color: #fff;font-size: 28px;cursor: pointer;}
.imgCard a {cursor: zoom-in;}

html.is-img-zoom-open,
body.is-img-zoom-open {overflow: hidden !important;}
body.is-img-zoom-open {position: fixed;top: var(--scroll-y, 0px);left: 0;right: 0;width: 100%;}

/* Motion */
.rv {opacity: 0;transform: translateY(70px);transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);}
.rv.is-visible {opacity: 1;transform: translateY(0);}

/* Contact */
.contactSection {position: relative;color: #111;}
.contactInner {}
.contactIntro {display: grid;grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);gap: clamp(50px, 7vw, 140px);margin-bottom: clamp(72px, 8vw, 80px);}
.sectionNo {margin: 0;color: var(--point);font-size: 16px;font-weight: 900;letter-spacing: .08em;text-transform: uppercase;}
.contactIntroTitle {font-size: 46px;letter-spacing: -.015em;font-weight: 800;}
.contactIntroText {margin: 30px 0 0;color: rgba(0,0,0,.62);font-size: clamp(16px, 1.2vw, 21px);line-height: 1.8;letter-spacing: -.025em;}

/* Form */
.contactForm {display: grid;grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);gap: clamp(50px, 7vw, 140px);}
.formAside {position: sticky;top: 120px;align-self: start;}
.formAsideTitle {margin: 0 0 26px;font-size: clamp(28px, 3.2vw, 58px);line-height: 1.04;letter-spacing: -.02em;font-weight: 800;text-transform: uppercase;}
.formAsideDesc {margin: 0;color: rgba(0,0,0,.58);font-size: 20px;line-height: 1.75;}
.formAsideInfo {display: grid;gap: 14px;margin-top: 42px;}
.infoLink {display: flex;justify-content: space-between;gap: 20px;padding: 17px 0;border-bottom: 1px solid var(--line-dark);color: #111;font-size: 22px;font-weight: 700;}
.infoLink span {color: rgba(0,0,0,.48);font-size: 13px;letter-spacing: .08em;text-transform: uppercase;}
.formBody {min-width: 0;}
.formGroup {padding: clamp(34px, 4vw, 64px) 0;border-top: 1px solid var(--line-dark);}
.formGroup:last-of-type {border-bottom: 1px solid var(--line-dark);}
.formGroupHead {display: flex;align-items: baseline;justify-content: space-between;gap: 20px;margin-bottom: 28px;}
.formGroupTitle {margin: 0;font-size: clamp(24px, 2.5vw, 35px);line-height: 1.15;letter-spacing: -.055em;font-weight: 700;}
.requiredText {color: rgba(0,0,0,.48);font-size: 14px;font-weight: 700;}
.fieldGrid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 22px;}
.field {position: relative;}
.field.full {grid-column: 1 / -1;}
.label {display: block;margin-bottom: 10px;color: rgba(0,0,0,.54);font-size: 16px;font-weight: 700;letter-spacing: -.01em;}

.input,
.textarea {width: 100%;border: 0;border-bottom: 1px solid rgba(0,0,0,.22);border-radius: 0;outline: none;padding: 0.7em 1em;background: transparent;color: #111;font-size: 19px;line-height: 1.45;letter-spacing: -.025em;transition: border-color .25s ease;}
.textarea {min-height: 180px;resize: vertical;}
.selectWrap {position: relative;}
.selectWrap::after {content: "";position: absolute;right: 8px;top: 50%;width: 10px;height: 10px;border-right: 2px solid var(--point);border-bottom: 2px solid var(--point);transform: translateY(-70%) rotate(45deg);pointer-events: none;transition: transform .25s ease, border-color .25s ease;}
.selectWrap:focus-within::after {transform: translateY(-45%) rotate(225deg);}
.select {width: 100%;height: 64px;border: 0;border-bottom: 1px solid rgba(0,0,0,.22);border-radius: 0;outline: none;padding: 0 46px 0 0;background: transparent;color: #111;font-size: 18px;font-weight: 650;line-height: 1.45;letter-spacing: -.025em;appearance: none;cursor: pointer;transition: border-color .25s ease, color .25s ease;}
.select:hover {border-color: rgba(0,0,0,.46);}
.select:focus {border-color: var(--point);}
.select option {color: #111;background: #fff;}
.serviceBlock {padding: 28px 0;}
.serviceBlock:first-of-type {padding-top: 0;}
.serviceBlockTitle {margin: 0 0 18px;color: #111;font-size: clamp(20px, 1.8vw, 30px);line-height: 1.25;letter-spacing: -.045em;font-weight: 850;}
.serviceBlockDesc {margin: -8px 0 20px;color: rgba(0,0,0,.52);font-size: 16px;line-height: 1.6;}
.motionOptions {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 22px;margin-top: 26px;}

.serviceBlockTxt{display: flex;justify-content: space-between;align-items: center;margin-bottom: 2.2em;}
.serviceBlockHead{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.serviceClearBtn{border:0;background:none;color:#999;font-size:13px;cursor:pointer;padding: 5px 15px;border-radius: 999px;background: #f3f3f3;}
.serviceClearBtn:hover{color:#ff5841;}

.input:focus,.textarea:focus {border-color: var(--point);}
.input::placeholder,.textarea::placeholder {color: rgba(0,0,0,.32);}
.checkGrid {display: flex;flex-wrap: wrap;gap: 12px;}
.checkItem {position: relative;}
.checkItem input {position: absolute;inset: 0;opacity: 0;}
.checkLabel {display: inline-flex;align-items: center;min-height: 48px;padding: 0 20px;border: 1px solid rgba(0,0,0,.16);border-radius: 999px;background: #fff;color: rgba(0,0,0,.72);font-size: 16px;font-weight: 700;letter-spacing: -.025em;transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;}
.checkItem input:checked + .checkLabel {border-color: #111;background: #111;color: #fff;}
.checkItem input:focus-visible + .checkLabel {outline: 3px solid rgba(255,88,65,.25);}
.checkLabel:hover {transform: translateY(-2px);}
.formDivider {height: 1px;margin: 24px 0;background: rgba(0,0,0,.1);}
.policyBox {max-height: 150px;overflow: auto;padding: 22px;border-radius: 18px;background: #f5f5f5;color: rgba(0,0,0,.6);font-size: 16px;line-height: 1.8;}
.policyAgree {display: inline-flex;align-items: center;gap: 10px;margin-top: 18px;color: #111;font-size: 15px;font-weight: 780;}
.policyAgree input {width: 18px;height: 18px;accent-color: var(--point);}

.contactCaptcha {display: flex;align-items: center;gap: 18px;margin-top: 18px;padding: 1em 2em;border: 1px solid rgba(0,0,0,.12);border-radius: 8px;background: #fff;}
.contactCaptcha #captcha {display: flex;align-items: center;flex-wrap: wrap;gap: 0.5em;}
.contactCaptcha #captcha legend{display:none;}
.contactCaptcha #captcha button{padding: 0.5em 1em;background: #e9e9e9;border-radius: 9999px;font-size: 14px;}
.contactCaptcha #captcha input{width: 200px;padding: 0.8em 1em;border-radius: 999px;}
.contactCaptcha #captcha_info {color: rgba(0,0,0,.56);}

.submitArea {display: flex;align-items: center;justify-content: flex-end;gap: 28px;padding-top: clamp(38px, 4vw, 70px);}
.submitBtn {min-width: 230px;min-height: 64px;border: 0;border-radius: 999px;background: var(--point);color: #fff;font-size: 15px;font-weight: 950;letter-spacing: .08em;text-transform: uppercase;transition: transform .25s ease, box-shadow .25s ease;}
.submitBtn:hover {transform: translateY(-3px);box-shadow: 0 18px 36px rgba(255,88,65,.28);}

.fileSelected{margin-top:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background: rgb(0 0 0 / 4%);color: rgb(0 0 0);font-size:13px;line-height:1.5;}
.fileSelectedEmpty{color:rgb(0 0 0 / 42%);}
.fileSelectedList{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
.fileSelectedItem{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fileSelectedName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fileSelectedSize{flex:0 0 auto;color:#ff5841;font-size:12px;}

/* Bottom CTA */
.contactBottom {background: #0d0d0d;padding: clamp(80px, 9vw, 150px) 0;position: relative;z-index: 1;}
.contactBottomInner {width: min(calc(100% - (var(--container-padding) * 2)));margin: 0 auto;display: grid;grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);gap: 13vw;}
.bottomTitle {margin: 0;color: #fff;font-size: clamp(44px, 4vw, 118px);line-height: 1.2;letter-spacing: -.075em;font-weight: 700;}
.bottomText {margin-top: 1em;color: rgba(255,255,255,.68);font-size: clamp(17px, 1.35vw, 24px);line-height: 1.75;letter-spacing: -.025em;}
.bottomLinks {display: flex;flex-wrap: wrap;gap: 16px;margin-top: 38px;}
.bottomLinks a {padding: 0.5em 2em;border-radius: 999px;background: rgba(255,255,255,.08);color: rgba(255,255,255,.82);font-size: 22px;font-weight: 500;}
.selectWrap + .fileGuide {margin-top: 10px;}

.budgetGrid {margin-top: 4px;}
.fileUploadBox {position: relative;}
.fileInput {position: absolute;width: 1px;height: 1px;overflow: hidden;opacity: 0;pointer-events: none;}
.fileUploadBtn {display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-height: 52px;padding: 0 22px;border: 1px solid rgba(0,0,0,.16);border-radius: 999px;background: #111;color: #fff;font-size: 15px;font-weight: 850;letter-spacing: -.02em;cursor: pointer;transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;}

.fileUploadBtn:hover,
.fileInput:focus-visible + .fileUploadBtn {transform: translateY(-2px);background: var(--point);border-color: var(--point);box-shadow: 0 14px 30px rgba(255,88,65,.22);}
.fileUploadIcon {display: inline-flex;align-items: center;justify-content: center;width: 19px;height: 19px;border-radius: 50%;background: rgba(255,255,255,.14);font-size: 14px;line-height: 1;}
.fileGuide {margin: 14px 0 0;color: rgba(0,0,0,.45);font-size: 14px;line-height: 1.55;}


/* ==========================
   ABOUT - CODEBEE CG LAB
========================== */
.aboutBody .siteHd{background: transparent;}
.aboutPage{position: relative;z-index: 10;background: transparent;color: #0e0e0e;padding-bottom: 85vh;overflow: hidden;}

/* HERO */
.aboutHero{position: relative;display: grid;grid-template-columns: 1fr clamp(20vw,30.5vw,51.5em);}
.aboutHero:after{content:'';background: #ffffff;position: absolute;width: 100%;height: 50vh;bottom: 0;}
.abLeft{display: flex;flex-direction: column;background: #e6e4e4;}
.abLbox{background:var(--point);width: 100%;height:100vh;}
.abHtext{padding: 0 0 0 4.1em;margin-top: 42.5vh;position: relative;}
.abHtext h1{font-size: clamp(32px,8.3vw,200px);font-weight: 600;line-height: 0.9;padding-bottom: 0.3em;}
.abHtext p{font-size: clamp(22px,1.77vw,48px);position: absolute;right: 8em;top: 1.1em;opacity: 0;filter: blur(10px);transform: translateY(12px);will-change: opacity, filter, transform;}
.abVideo{width: 100%;height: 100%;}
.abVid{position: relative;z-index: 1;}
.abVid video{width: 100vw;height: auto;}
.ahRtop{background: #0c0c0a;height: 65vh;position: relative;color: #e9e9e9;display: flex;align-items: flex-end;justify-content: space-between;text-align: right;flex-direction: column;padding: 10em 4.5em 4.5em;}
.ahRtop h2{font-family: "Formation";font-size: clamp(24px, 2.2vw, 55px);-webkit-text-stroke: 0.5px;}
.ahRtop p{font-size: clamp(14px,0.9vw,20px);line-height: 1.6;}
.heroBg {position: absolute;inset: 0;background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 255, 255, .028) 79px, rgba(255, 255, 255, .028) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, .028) 79px, rgba(255, 255, 255, .028) 80px);}
.pinNum{position: relative;z-index: 1;}
.pinInner{background: #181818;position: relative;padding: 12em 4.5em 4.5em;color: #bababa;}
.numbers{text-align: right;}
.numbers span{position: relative;font-size: 0.8rem;line-height: 1.25;display: block;z-index: 2;}
.heroNumLabel{position: relative;font-size: 1.5rem;font-weight: 600;color: #fff;margin: 2em 0 0.5em;z-index: 2;}
.numVid{width: 500px;position: absolute;right: -50px;top: 0;}
.numVid video{}
.numVidOv{background: #181818;width: 100%;height: 7px;position: absolute;z-index: 1;bottom: -1px;}
.numTxt{}
.num{display: flex;align-items: flex-end;margin: 4em 0;}
.num div{display: flex;line-height: 1;gap: 17px;}
.num b{font-size: 7vw;font-weight: 400;}
.num em{font-size: 2.688rem;color: var(--point);}
.num b span{font-size: 1rem;}
.num b small{font-size: 6rem;}
.num span{font-size: clamp(15px, 0.8vw, 20px);position: relative;top: -13px;}
.numTxt .num:nth-child(even){flex-direction: row-reverse;}


/* WHY */
.why{position: relative;background:#fff;}
.whyWrap{width: min(calc(100% - (var(--container-padding) * 2)));margin: -8em auto 0;}
.whyInner{display: flex;align-items: flex-start;gap: 12em;}
.wLabel{font-size: clamp(16px,0.9vw,24px);font-weight: 600;}
.whyGrid{font-family: "Pretendard Variable";margin-top: -20px;}
.whyGrid h2{font-size: clamp(26px, 3.2vw, 80px);font-weight: 600;letter-spacing: -0.02em;line-height: 1.5;}
#whyTxtContainer {font-size: 1.375rem;line-height: 1.85;color: #555;height: 15vh;margin: 4em 0 3em ;}
.whyTxtCon {position: absolute;width: 1px; height: 1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;pointer-events: none;}
#slideStage {position: relative;font-size: clamp(18px, 1.1vw, 22px);}
.lineWrap {overflow: hidden;height: 1.85em;}
.lineInner {display: flex;flex-direction: column;will-change: transform;}
.lineInner span {height: 1.85em;line-height: 1.85;display: block;flex-shrink: 0;}
.whyShapes{padding: 7em 0;display: flex;justify-content: space-between;}
.whyShapes i{}
.whyShapes img{}

/* MEANING */
.meaning{position: relative;display: grid;grid-template-columns: 1fr 54rem;height: 100vh;min-height: 937px;}
.meaningVisual{background: #000;position: relative;z-index: -1;padding: 5em 4.5em;color: #b9b9b9;display: flex;flex-direction: column;justify-content: space-between;}
.meaningVisual:after{content:'';background: url(../img/content/about_bg.jpg) no-repeat;position: absolute;width: 100%;height: 100%;top: 0;right: 0;z-index: -1;}
.meaningVisual small{font-size: 1.125rem;color: var(--point);}
.meaningLogo{font-family: "Formation";font-size: clamp(35px,9.5vw,220px);-webkit-text-stroke: 1px;display: flex;justify-content: space-between;line-height: 0;margin-top: 0.7em;align-items: stretch;}
.meaningLogo span{display: flex;}
.ml1{}
.ml2{font-size: 4rem;margin-top: 2em;}
.ml3{margin-top: 1em;}
.meaningVisual p{font-size: clamp(15px,0.9vw,22px);line-height: 2;margin-top: 5em;}
.meaningVisual strong{font-size: clamp(15px,1.6vw,38px);color: var(--point);font-weight: 300;font-family: "Formation";line-height: 0;}
.meaningVisual b{}
.meaLogo{display: flex;justify-content: flex-end;gap: 3em;}
.meaLogo img{}
.meaCards{display: grid;grid-template-columns: 1fr 1fr;}
.meaCards .card{background: #b9b9b9;padding: 2em;cursor: pointer;display: flex;flex-direction: column;justify-content: space-between;border-right: 1px solid #7b7b7b;border-bottom: 1px solid #7b7b7b;transition: color .4s ease-in-out, background .4s ease-in-out, opacity .4s ease-in-out;}
.meaCards .card .idx{font-size: 7.313rem;font-weight: 900;color: #a1a1a1;text-align: right;}
.meaCards .card .cTxt1{text-align: right;}
.meaCards .card .cTxt1 h3{font-size: clamp(26px,1.7vw,38px);font-weight: 600;}
.meaCards .card .cTxt1 p{font-size: clamp(15px,0.85vw,20px);opacity: 0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.meaCards .card .cTxt2{line-height: 2;}
.meaCards .card .cTxt2 strong{font-size: clamp(20px,1.2vw,28px);}
.meaCards .card .cTxt2 p{font-size: clamp(15px,0.85vw,20px);letter-spacing: -0.04em;}
.meaCards .card:hover{background:#000;color:#fff;}
.meaCards .card:hover .cTxt1 p{opacity: 1;color: var(--point);transform:translateY(0);}
.meaCards .card:hover .idx{opacity: 0.2;}
.meaCards .card:hover .cTxt2{opacity: 0.5;}

/* FOOTER */
.aboutFooter{background: var(--point);display: grid;grid-template-columns: 1fr 54rem;height: 100vh;margin-top: -1px;position: relative;z-index: 1;}
.aFooterL{display: flex;color: #fff;flex-direction: column;align-content: center;justify-content: center;align-items: center;}
.aFooterL h2{font-size: clamp(32px,8.3vw,200px);font-weight: 800;line-height: 0.9;text-align: center;}
.aFooterL p{font-size: clamp(14px, 0.9vw, 20px);margin: 2em 0 0 -19vw;}
.aFooterR{display: grid;grid-template-columns: 1fr 1fr;color: #eec6be;}
.porL{position: relative;}
.drawLine{border-left: 1px solid hsl(0deg 0% 100% / 36%);height: calc(100% - 6em);width: 1px;margin: 3em 0;position: absolute;}
.l1{}
.l2{}
.porLtxt{padding: 5em 1.5em;font-size: clamp(15px,0.85vw,20px);color: hsl(0deg 0% 100% / 77%);}
.porL a{position: absolute;background: var(--point);padding: 3.07em 0;top: 50%;margin-top: -125px;line-height: 3;font-size: clamp(15px,1.2vw,28px);transition: all 0.5s ease;}
.porL a:hover{color:#fff;}
.conR{position: relative;display: flex;align-items: flex-end;}
.conRcontact{display: flex;flex-direction: column;position: absolute;background: var(--point);padding: 3.07em 0;top: 50%;margin-top: -92px;}
.conRcontact p{font-size: clamp(15px,0.85vw,20px);}
.conRcontact p span{margin: 0 1em;}
.conRcontact a{border: 1px solid #efbcb3;width: 329px;padding: 1.5em 1em;display: flex;justify-content: space-between;margin-top: 1em;transition: all 0.5s ease;align-items: center;font-weight: 600;font-size: clamp(16px, 0.9vw, 20px);}
.conRcontact a:hover{border: 1px solid #fff;color:#fff}
.conRcontact a svg{width: 20px;}
.ctaCompany{position: absolute;bottom: 4em;left: 1.5em;font-size: clamp(14px, 0.9vw, 20px);}
.ctaCompanyLabel{}
.ctaCompanyList{margin: 0.5em 0 2em;line-height: 1.5;}
.ctaCompanyList li{}
.ctaLocation{}

#about-h1 .word{display: inline-block;white-space: nowrap;}
#about-h1 .charMask{display: inline-block;overflow: hidden;vertical-align: top;line-height: 0.9;}
#about-h1 .char{display: inline-block;transform: translateY(100%);will-change: transform;}
.whyShapes i{display: block;opacity: 0;transform: translateY(36px);will-change: opacity, transform;}
.meaCards .card.active,
.meaCards .card:hover{background:#000;color:#fff;}
.meaCards .card.active .cTxt1 p,
.meaCards .card:hover .cTxt1 p{opacity:1;color:var(--point);transform:translateY(0);}
.meaCards .card.active .idx,
.meaCards .card:hover .idx{opacity:.2;}
.meaCards .card.active .cTxt2,
.meaCards .card:hover .cTxt2{opacity:.5;}
.drawLine{border-left: 1px solid hsl(0deg 0% 100% / 36%);width: 1px;height: 0;margin: 0;position: absolute;overflow: hidden;}
.l1{top: 3em;left: 0;}
.l2{bottom: 3em;left: 0;}
.aboutBody .topB svg{filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(0%) hue-rotate(183deg) brightness(91%) contrast(90%);}


/*
===============================================
반응형 css
===============================================
*/

@media all and (min-width:2300px){
	.whyShapes {padding: 7em;}
	.meaning {grid-template-columns: 1fr 85rem;max-height: 1080px;}
	.aboutFooter{grid-template-columns: 1fr 85rem;}

	.contSplit{max-width:1920px;}
	.metaItem {padding: 3em;}
	.aboutPage{padding-bottom: 76vh;}
}

@media (max-width: 1800px){
	.whyWrap {margin: -12em auto 0;}
}

@media all and (max-width:1680px){
	.aboutPage{padding-bottom: 655px;}

	.mainMedia {background: transparent;line-height: 0;padding: 0;border-top: 0;border-bottom: 0;border-radius:0;}
	.mainMedia iframe{width: 100%;}
	.mediaCap {color: #ffffff;margin: 0;}
}

@media (max-width: 1500px){
	.aboutBody .navCta{background: #0e0e0e;}
	.aboutBody .is-scrolled .navCta{background: #f14e37;}
	.abHtext {--container-padding: 2.5%;padding: 0;width: min(calc(100% - (var(--container-padding) * 2)));margin: 27.5vh auto 3.5em;}
	.abHtext p {position: initial;}
	.abHtext p br{display:none;}
	.aboutHero {grid-template-columns: 1fr;}
	.ahRight{position: relative;display: grid;grid-template-columns: 1fr 55rem;}
	.abHtext h1 {font-size: clamp(36px, 12vw, 200px);}
	.aboutHero:after{display:none;}
	.abHtext p {font-size: clamp(18px, 2.2vw, 48px);right: 50%;margin-right: -8em;top: 1em;}

	.abLbox,
	.abVideo {height: auto;}
	.num{margin:1.5em 0;}
	.num b small {font-size: 3rem;}
	.ahRtop {height: 100%;}
	.ahRtop h2 {font-size: clamp(32px, 3.2vw, 55px);}

	.whyWrap{margin: 0 auto;padding: 8em 0 5em;}
	.whyInner {gap: 3em;flex-direction: column;}
	.whyGrid h2 {font-size: clamp(32px, 5.2vw, 80px);}
	#whyTxtContainer {margin: 2em 0 0;}
	.whyShapes {padding: 5em 0;display: grid;grid-template-columns: 1fr 1fr;justify-items: center;gap: 5em;}

	.meaning {grid-template-columns: 1fr;height: 100%;min-height: 100%;}
	.meaningVisual {padding: 5em 5%;}
	.meaningLogo {font-size: clamp(80px, 14.5vw, 220px);}
	.meaningVisual p {font-size: clamp(17px, 0.9vw, 22px);}
	.meaningVisual strong {font-size: clamp(20px, 2.5vw, 38px);}

	.aboutFooter {grid-template-columns: 1fr;}
	.porL {width: 100%;padding: 3em 5% 3em 10%;display: flex;justify-content: space-between;flex-direction: column;}
	.l1{left: 5%;}
	.porL a {position: static;background: transparent;padding: 0;line-height: 1.5;}
	.porLtxt {padding: 0;}
	.conR {width: 100%;padding: 3em 5% 3em;justify-content: space-between;flex-direction: column;align-items: flex-start}
	.conRcontact {position: static;padding: 0;margin-top: 0;margin-bottom: 2em;width: 100%;}
	.ctaCompany {position: static;}
	.aFooterL p {margin: 2em 0;text-align: center;}

	.qvPanel {width: 100%;grid-template-columns: minmax(0, 1fr) minmax(320px, 28vw);}
}

@media (max-width: 1280px){
	.ahRight {grid-template-columns: 1fr 45rem;}
	.ahRtop p br{display:none;}
	.ahRtop p i{display:block;margin-top: 1.2em;}
}


@media (max-width: 1024px){
	.portGrid {columns: 2;}
	.qvPanel {height: calc(100vh - 80px);grid-template-columns: 1fr;grid-template-rows: minmax(0, 56vh) auto;overflow: hidden;}

	.qvInfo {height: 320px;}

	.metaGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.metaItem:nth-child(2) {border-right: 0;}
	.metaItem:nth-child(-n + 2) {border-bottom: 1px solid rgba(0, 0, 0, 0.12);}
	.contSplit,.resIn {grid-template-columns: 1fr;gap: 34px;}

	.mainMedia video,
	.mainMedia img,
	.mainMedia iframe {min-height: 420px;}
	.imgGrid {columns: 2;}

	.ahRight {grid-template-columns: 1fr;}
	.ahRtop{align-items: center;text-align: center;padding: 5em 5%;}
	.ahRtop p{text-align: center;}
	.ahRtop p i {margin-top: 0.5em;}
	.ahRtop h2 {margin-bottom: 1em;}
	.numVid {width: 300px;}
	.heroNumLabel {margin: -1.5em 0 0.5em;}
	.numTxt {padding-top: 2em;}
	.num b {font-size: 12vw;}
	.pinInner {padding: 12em 5% 2.5em;}
	.num span {font-size: clamp(12px, 0.8vw, 20px);top: -3px;}
	.num em {font-size: 25px;}

	.viewSum {max-width: 100%;margin: 30vh 0 0 auto;}

	.formAside {position: static;}
	.contactForm {grid-template-columns: 1fr;}
	.contactIntro {grid-template-columns: 1fr;gap: clamp(30px, 4vw, 140px);}
	.formAsideDesc br{display:none;}
	.formGroup{border-top:0;}
}


@media (max-width: 768px){
	.floatCateBtn {width: 116px;height: 48px;font-size: 12px;}
	.floatCatePanel {width: 116px;}

	#slideStage {font-size: clamp(15px, 1.1vw, 22px);}

	.ml2 {margin-top: 1em;}
	.meaningVisual p {margin: 8em 0 4em;}

	.aboutFooter{height:100%;padding: 5em 0 1em;}
	.conRcontact a {width: 100%;}
	.input, .textarea {font-size: 16px;}
	.contactBottomInner {grid-template-columns: 1fr;gap: 3vw}
	.bottomLinks a {font-size: 18px;}
}

@media (max-width: 640px){
	:root {
		--foot-h: 660px;
	}

	.portHero {min-height: 60vh;padding: 110px 24px 34px;}
	.portEye {font-size: 17px;}
	.portTabs {margin-top: 52px;gap: 24px;}
	.portTabs button {font-size: 14px;}
	.portGrid {columns: 1;}

	.qvBtn {opacity: 1;transform: none;right: 14px;top: 14px;min-height: 36px;padding: 0 12px;}
	.qv {padding: 18px;}
	.qvPanel {border-radius: 20px;}
	.qvInfo {padding: 26px 22px;}
	.qvThumb {width: 50px;height: 38px;}
	.qvPlus {min-width: 48px;height: 38px;}
	.qvNav {top: 28%;}
	.qvMore,
	.qvCount {margin: 0;}
	.qvNav{left: 5px;right: 5px;}
	.qvNavBtn {width: 45px;height: 45px;}
	.qvNavBtn:after {font-size: 25px;margin-top: -5px;}
	.qvX,
	.qvCount{display:none;}

	.viewHero {min-height: 60vh;padding: 110px 0 48px;}
	.backLk {margin-bottom: 34px;}
	.viewSum {margin-left: 0;}
	.viewOv {border-radius: 38px 0 0 0;padding: clamp(72px, 8vw, 110px) 0 1em;}
	.metaGrid {grid-template-columns: 1fr;}
	.metaItem {flex-direction: row;justify-content: flex-start;border-right: 0;border-bottom: 1px solid rgba(0, 0, 0, 0.12);padding: 1.5em 0;}
	.metaItem dt {width: 100px;}
	.metaItem:last-child {border-bottom: 0;}
	.imgGrid {columns: 1 !important;}
	.mainMedia {border-radius: 18px;padding: 1em 0 3em;}

	.mainMedia video,
	.mainMedia img,
	.mainMedia iframe {min-height: 320px;}
	.imgCard {border-radius: 18px;}
	.imgCap {left: 14px;right: 14px;bottom: 14px;}
	.viewNavIn {grid-template-columns: 1fr;}
	.viewNavItem + .viewNavItem {border-left: 0;border-top: 1px solid rgba(255, 255, 255, 0.18);}
	.viewNavItem {min-height: 280px;padding: 32px 24px;}

    #whyTxtContainer {font-size: 15px;height: 100%;}
	.whyTxtCon {position: sticky;width: auto;height: auto;overflow: auto;clip: inherit;white-space: normal;pointer-events: auto;}
	.whyWrap {padding: 5em 0 1em;}
	.whyTxtCon[data-block="0"]{margin-bottom: 1em;color: #000;}
	.whyTxtCon[data-block="1"]{border-top: 1px dashed #d1d1d1;border-bottom: 1px dashed #d1d1d1;padding: 1.5em 0;}
	.whyGrid h2 {font-size: clamp(27px, 5.2vw, 80px);}
	.wLabel {font-size: clamp(14px, 0.9vw, 24px);}

	.meaningVisual p br{display:none;}
	.meaLogo img {height: 65px;}

	.ahRtop {padding: 3em 5%;}
	.meaningVisual,
	.meaCards{width: 100vw;}
	.meaningVisual p {font-size: clamp(15px, 0.9vw, 22px);}
	.ml2 {font-size: 3rem;}

	.meaCards .card .idx {font-size: 3.313rem;}
	.meaCards .card .cTxt1 h3 {font-size:22px;}
	.meaCards .card .cTxt1 p {font-size:13px;}
	.meaCards .card .cTxt2 strong {font-size:18px;}
	.meaCards .card .cTxt2 p {
	font-size: 13px;line-height: 1.5;}

	.porLtxt br{display:none;}
	.conRcontact p span{margin: 0 1em;line-height: 0;color: #ff5841;position: relative;z-index: -1;display: block;}
	.conRcontact a {font-size: 14px;width: calc(100% - 1em);padding: 1.2em 0.5em;}

	.floatCate {right: 20px;bottom: 83px;}

	.contactSection {margin-top: 4em;}
	.fieldGrid {grid-template-columns: 1fr;gap: 12px;}
	.motionOptions {grid-template-columns: 1fr;}
	.label {font-size: 15px;margin-bottom:5px;}
	.select {height: 45px; font-size: 16px;}
	.serviceBlockTxt {align-items: flex-start;margin-bottom: 1.2em;flex-direction: column;}
	label[for="referenceFile"]{margin-bottom: 10px;}
	.policyBox{font-size:15px;}

	.aboutPage{padding-bottom: 610px;}

	.contactCaptcha {display: block;padding: 16px;}
	.contactCaptchaTitle {display: block;padding-top: 0;margin-bottom: 10px;}
}