@charset "utf-8";

/* About Us */
.about-intro { padding: 0 0 100px; box-sizing: border-box; }
.about-intro-tit { text-align: center; margin-bottom: 60px; }
.about-intro-tit .point { font-size: var(--font-size36); font-weight: 600; line-height: 1.278em; letter-spacing: -0.02em; color: var(--color-primary); }
.about-intro-tit .desc { margin-top: 8px; font-size: var(--font-size32); font-weight: 400; line-height: 1.25em; letter-spacing: -0.02em; color: #121212; }
.about-intro-tit .desc strong { font-weight: 600; }
.about-intro-img { width: 100%; height: 407px; overflow: hidden; }
.about-intro-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-intro-line { position: relative; display: flex; align-items: center; justify-content: center; margin: 40px 0; height: 8px; }
.about-intro-line::before,
.about-intro-line::after { content: ""; flex: 1 1 auto; height: 1px; background: #d9d9d9; }
.about-intro-line span { flex: 0 0 8px; width: 8px; height: 8px; margin: 0 24px; border-radius: 50%; background: var(--color-primary); }
.about-intro-txt { text-align: center; }
.about-intro-txt p { font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #505050; }
.about-intro-txt p + p { margin-top: 24px; }
.about-intro-txt strong { font-weight: 600; color: #121212; }
.about-intro-txt .c-primary { color: var(--color-primary); }

.about-network { position: relative; padding: 100px 0; background: url("../images/sub/sub1-1-bg.jpg") center / cover no-repeat; }
.about-sec-tit { margin-bottom: 80px; }
.about-sec-tit .sub { font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #505050; margin-bottom: -4px; }
.about-sec-tit h3 { font-size: var(--font-size32); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: #121212; }
.about-network-box { position: relative; height: 720px; text-align: center; padding-top: 70px; }
.about-team { position: absolute; z-index: 2; width: 281px; }
.about-team .card { width: 100%; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 20px rgba(31,31,31,0.4); text-align: left; }
.about-team .card strong { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 4px 10px; background: var(--color-primary); color: #fff; font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; text-align: center; }
.about-team .card ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 20px; list-style: none; }
.about-team .card ul li { position: relative; padding-left: 13px; font-size: var(--font-size18); font-weight: 400; line-height: 1.556em; letter-spacing: -0.02em; color: #505050; }
.about-team .card ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background:#505050; }
.about-team .line { position: absolute; background: var(--color-primary); pointer-events: none; }
.about-team .line::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); border: 6px solid #FFC599;}
.about-team .line-r { top: 21px; left: 100%; width: 196px; height: 1px; }
.about-team .line-r::after { top: 50%; right: 0; transform: translate(50%, -50%); }
.about-team .line-l { top: 21px; right: 100%; width: 196px; height: 1px; }
.about-team .line-l::after { top: 50%; left: 0; transform: translate(-50%, -50%); }
.about-team .line-v { left: 50%; top: 100%; width: 1px; height: 179px; transform: translateX(-50%); }
.about-team .line-v::after { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.about-team.t-mgmt { left: 580px; top: 0; }
.about-team.t-mgmt .card { border-radius: 16px; }
.about-team.t-mgmt .card strong { border-radius: 16px; }
.about-team.t-plan { left: 0; top: 116px; }
.about-team.t-sys { left: 1159px; top: 116px; }
.about-team.t-sys .line-l { width: 196px; }
.about-team.t-design { left: 0; top: 416px; }
.about-team.t-pr { left: 1159px; top: 416px; }
.about-team.t-img { left: 846px; top: 572px; }
.about-team.t-img .line-l { width: 116px; }

.about-solution { padding: 100px 0 0; }
.about-solution .about-sec-tit { margin-bottom: 40px; }
.about-sol-line { position: relative; width: 100%; height: 2px; margin-bottom: 40px; background: #ddd; }
.about-sol-line::before { content: ""; position: absolute; left: 0; top: 0; width: 100px; height: 2px; background: var(--color-primary); }
.about-sol-list { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
.about-sol-list > li { display: flex; align-items: center; gap: 56px; padding: 10px 50px; border: 1px solid #ddd; border-radius: 16px; background: #fff; box-sizing: border-box; }
.about-sol-list .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about-sol-list .badge { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 2px 16px; border-radius: 24px; background: var(--color-primary); color: #fff; font-size: var(--font-size18); font-weight: 600; line-height: 1.625em; letter-spacing: -0.03em; }
.about-sol-list .name { font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: #121212; }
.about-sol-list .desc { font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #505050; }
.about-sol-list .thumb { flex: 0 0 380px; width: 380px; height: 210px; border-radius: 16px; overflow: hidden; }
.about-sol-list .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 행사 이력 */
.history-wrap { max-width: 1100px; margin: 0 auto; box-sizing: border-box; }
.history-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 80px; text-align: center; word-break: keep-all; }
.history-intro .en { font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #ccc; }
.history-intro .desc { font-size: var(--font-size32); font-weight: 400; line-height: 1.25em; letter-spacing: -0.02em; color: #2c2c2c; }
.history-intro .point { font-size: var(--font-size32); font-weight: 600; line-height: 1.25em; letter-spacing: -0.02em; color: var(--color-primary); }
.history-list { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.history-list::before { content: ""; position: absolute; left: 20px; top: 30px; bottom: 30px; width: 1px; background: #eee; }
.history-list > li { position: relative; display: flex; align-items: center; gap: 32px; }
.history-list .dot { position: relative; z-index: 1; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .25s; }
.history-list .dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); }
.history-list .box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 16px 24px; border: 1px solid #eee; border-radius: 8px; background: #fff; box-sizing: border-box; transition: background .25s, border-color .25s; }
.history-list .name { margin: 0; font-size: var(--font-size18); font-weight: 500; line-height: 1.778em; letter-spacing: -0.02em; color: #505050; transition: color .25s, font-weight .25s; }
.history-list .tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.history-list .tags span { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 4px; background: #f6f6f6; font-size: var(--font-size18); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #878787; white-space: nowrap; transition: background .25s, color .25s, font-weight .25s; }
.history-list > li:hover .dot { background: #ffdec5; }
.history-list > li:hover .box { background: var(--color-primary); border-color: var(--color-primary); }
.history-list > li:hover .name { font-weight: 600; color: #fff; }
.history-list > li:hover .tags span { background: #fff; font-weight: 600; color: var(--color-primary); }

/* 기업 인증서 */
.cert-intro { display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; text-align: center; word-break: keep-all; }
.cert-intro .en { font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #ccc; }
.cert-intro .desc { font-size: var(--font-size24); font-weight: 600; line-height: 1.667em; letter-spacing: -0.02em; color: #2c2c2c; }
.cert-intro .point { font-size: var(--font-size32); font-weight: 600; line-height: 1.25em; letter-spacing: -0.02em; color: var(--color-primary); }
.cert-list { display: flex; gap: 40px 24px; flex-wrap: wrap; justify-content: center;}
.cert-list > li { display: flex; flex-direction: column; gap: 24px; width: calc(100%/4 - 18px); }
.cert-list .thumb { border-radius: 16px; overflow: hidden; display: block; position: relative; padding-bottom: 141%; background: #fafafa; }
.cert-list .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.cert-list .thumb::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #eee; }
.cert-list .name { margin: 0; font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: #2c2c2c; text-align: center; }

/* 행사기획 */
.plan-sec1 { padding-bottom: 100px; }
.plan-intro { display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; text-align: center; word-break: keep-all; }
.plan-intro .en { font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #ccc; }
.plan-intro .desc { font-size: var(--font-size24); font-weight: 600; line-height: 1.667em; letter-spacing: -0.02em; color: #2c2c2c; }
.plan-intro .point { font-size: var(--font-size32); font-weight: 600; line-height: 1.25em; letter-spacing: -0.02em; color: var(--color-primary); }
.plan-steps { display: flex; align-items: stretch; margin: 0 0 30px; padding: 0; list-style: none; }
.plan-steps > li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; cursor: pointer; }
.plan-steps .num-wrap { display: flex; align-items: center; width: 100%; }
.plan-steps .line { flex: 1 1 auto; min-width: 0; height: 1px; background: #eee; }
.plan-steps > li:first-child .line.l { background: linear-gradient(90deg, rgba(238,238,238,0) 0%, #eee 100%); }
.plan-steps > li:last-child .line.r { background: linear-gradient(90deg, #eee 0%, rgba(238,238,238,0) 100%); }
.plan-steps .num { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; border-radius: 50%; background: #fff; font-size: var(--font-size18); font-weight: 700; line-height: 1.5em; letter-spacing: -0.02em; color: #a8a8a8; box-sizing: border-box; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.plan-steps .card { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 0 12px; min-height: 232px; padding: 24px 12px; border: 1px solid #eee; border-radius: 16px; background: #fafafa; box-sizing: border-box; transition: background .25s, border-color .25s; }
.plan-steps .tit { margin: 0; font-size: var(--font-size22); font-weight: 600; line-height: 1.545em; letter-spacing: -0.02em; color: #676767; text-align: center; transition: color .25s; }
.plan-steps .en { margin: 0; font-size: var(--font-size18); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #878787; text-align: center; transition: color .25s; }
.plan-steps > li.active .num,
.plan-steps > li:hover .num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 8px rgba(255,109,0,0.24); }
.plan-steps > li.active .card,
.plan-steps > li:hover .card { background: var(--color-primary); border-color: var(--color-primary); }
.plan-steps > li.active .tit,
.plan-steps > li:hover .tit { color: #fff; }
.plan-steps > li.active .en,
.plan-steps > li:hover .en { color: rgba(255,255,255,0.88); }
.plan-detail { position: relative; border: 1px solid #ddd; border-radius: 16px; background: #fafafa; padding: 40px; box-sizing: border-box; }
.plan-detail .panel { display: none; }
.plan-detail .panel.active { display: block; }
.plan-detail .head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.plan-detail .head .num { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 8px rgba(255,109,0,0.24); font-size: var(--font-size18); font-weight: 700; line-height: 1.5em; color: #fff; }
.plan-detail .head .text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.plan-detail .head .tit { margin: 0; font-size: var(--font-size32); font-weight: 600; line-height: 1.3125em; letter-spacing: -0.02em; color: #121212; }
.plan-detail .head .en { margin: 0; font-size: var(--font-size18); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; color: #aaa; }
.plan-detail .body { padding-left: 80px; }
.plan-detail .body .desc { margin: 0 0 12px; font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #121212; word-break: keep-all; }
.plan-detail .body ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan-detail .body ul li { position: relative; padding-left: 10px; font-size: var(--font-size18); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #505050; word-break: keep-all; }
.plan-detail .body ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #505050; }

.plan-sec2 { background: #fafafa; overflow: hidden; }
.plan-pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 60px; }
.plan-pf-head h3 { margin: 0; font-size: var(--font-size36); font-weight: 600; line-height: 1.333em; letter-spacing: -0.02em; color: #121212; }
.plan-pf-nav { display: flex; align-items: center; gap: 6px; }
.plan-pf-prev,
.plan-pf-next { width: 60px; height: 60px; border: 1px solid #dfdfdf; border-radius: 8px; background: #fff url("../images/main/sec3-prev.png") center no-repeat; background-size: 10px; text-indent: -9999em; cursor: pointer; transition: .3s; }
.plan-pf-next { background-image: url("../images/main/sec3-next.png"); }
.plan-pf-prev:hover,
.plan-pf-next:hover { background-color: #121212; border-color: #121212; }
.plan-pf-prev:hover { background-image: url("../images/main/sec3-prev-w.png"); }
.plan-pf-next:hover { background-image: url("../images/main/sec3-next-w.png"); }
.plan-pf-swiper-wrap { padding-left: max(30px, calc((100% - 1440px) / 2)); margin-bottom: 100px; }
.plan-pf-swiper .swiper-slide { width: 464px; }
.plan-pf-card { position: relative; display: block; width: 100%; height: 360px; border-radius: 16px; overflow: hidden; }
.plan-pf-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan-pf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%); transition: opacity .25s; }
.plan-pf-card .name-default { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; margin: 0; padding-left: 16px; font-size: var(--font-size22); font-weight: 600; line-height: 1.636em; letter-spacing: -0.02em; color: #fff; transition: opacity .25s; }
.plan-pf-card .name-default::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-primary); }
.plan-pf-card .over { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; box-sizing: border-box; }
.plan-pf-card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.plan-pf-card .date { font-size: var(--font-size18); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); }
.plan-pf-card .view { flex: 0 0 48px; width: 48px; height: 48px; background: url("../images/sub/pf-view.png") center no-repeat; background-size: 46px; }
.plan-pf-card .btm { display: flex; flex-direction: column; gap: 16px; }
.plan-pf-card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.plan-pf-card .tags span { display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 500px; background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; line-height: 1.429em; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); }
.plan-pf-card .over .name { position: relative; margin: 0; padding-left: 16px; font-size: var(--font-size22); font-weight: 600; line-height: 1.636em; letter-spacing: -0.02em; color: #fff; }
.plan-pf-card .over .name::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-primary); }
.plan-pf-card:hover::after,
.plan-pf-card:hover .name-default { opacity: 0; }
.plan-pf-card:hover .over { opacity: 1; visibility: visible; }
.plan-pf-more-wrap { display: flex; justify-content: center; }
.plan-pf-more { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 100px; background: #121212; font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #fff; transition: background .25s; }
.plan-pf-more:hover { background: var(--color-primary); }

/* 영상제작 */
.video-sec1 { padding-bottom: 100px; }
.video-intro { display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; text-align: center; word-break: keep-all; }
.video-intro .en { font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #ccc; }
.video-intro .desc { font-size: var(--font-size24); font-weight: 600; line-height: 1.667em; letter-spacing: -0.02em; color: #2c2c2c; }
.video-intro .point { font-size: var(--font-size32); font-weight: 600; line-height: 1.25em; letter-spacing: -0.02em; color: var(--color-primary); }
.video-steps { display: flex; align-items: stretch; margin: 0 0 30px; padding: 0; list-style: none; }
.video-steps > li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; cursor: pointer; }
.video-steps .num-wrap { display: flex; align-items: center; width: 100%; }
.video-steps .line { flex: 1 1 auto; min-width: 0; height: 1px; background: #eee; }
.video-steps > li:first-child .line.l { background: linear-gradient(90deg, rgba(238,238,238,0) 0%, #eee 100%); }
.video-steps > li:last-child .line.r { background: linear-gradient(90deg, #eee 0%, rgba(238,238,238,0) 100%); }
.video-steps .num { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; border-radius: 50%; background: #fff; font-size: var(--font-size18); font-weight: 700; line-height: 1.5em; letter-spacing: -0.02em; color: #a8a8a8; box-sizing: border-box; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.video-steps .card { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 0 16px; min-height: 232px; padding: 24px 16px 32px; border: 1px solid #eee; border-radius: 16px; background: #fafafa; box-sizing: border-box; transition: background .25s, border-color .25s; }
.video-steps .tit { margin: 0; font-size: var(--font-size22); font-weight: 600; line-height: 1.545em; letter-spacing: -0.02em; color: #676767; text-align: center; transition: color .25s; }
.video-steps .en { margin: 0; font-size: var(--font-size18); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #878787; text-align: center; transition: color .25s; }
.video-steps > li.active .num,
.video-steps > li:hover .num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 8px rgba(255,109,0,0.24); }
.video-steps > li.active .card,
.video-steps > li:hover .card { background: var(--color-primary); border-color: var(--color-primary); }
.video-steps > li.active .tit,
.video-steps > li:hover .tit { color: #fff; }
.video-steps > li.active .en,
.video-steps > li:hover .en { color: rgba(255,255,255,0.88); }
.video-detail { position: relative; border: 1px solid #ddd; border-radius: 16px; background: #fafafa; padding: 40px; box-sizing: border-box; }
.video-detail .panel { display: none; }
.video-detail .panel.active { display: block; }
.video-detail .head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.video-detail .head .num { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 8px rgba(255,109,0,0.24); font-size: var(--font-size18); font-weight: 700; line-height: 1.5em; color: #fff; }
.video-detail .head .text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.video-detail .head .tit { margin: 0; font-size: var(--font-size32); font-weight: 600; line-height: 1.3125em; letter-spacing: -0.02em; color: #121212; }
.video-detail .head .en { margin: 0; font-size: var(--font-size18); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; color: #aaa; }
.video-detail .body { padding-left: 80px; }
.video-detail .body .desc { margin: 0 0 12px; font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #121212; word-break: keep-all; }
.video-detail .body ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.video-detail .body ul li { position: relative; padding-left: 10px; font-size: var(--font-size18); font-weight: 400; line-height: 1.5em; letter-spacing: -0.02em; color: #505050; word-break: keep-all; }
.video-detail .body ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #505050; }

.video-sec2 { background: #fafafa; }
.video-pf-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 80px; text-align: center; }
.video-pf-intro .en { font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #ccc; }
.video-pf-intro .tit { margin: 0; font-size: var(--font-size32); font-weight: 600; line-height: 1.375em; letter-spacing: -0.02em; color: #2c2c2c; }
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; padding: 0; list-style: none; }
.video-list > li.is-hidden { display: none; }
.video-card { display: block; }
.video-card .thumb { position: relative; border-radius: 16px; overflow: hidden; padding-bottom: 56.25%; display: block; }
.video-card .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.video-card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); opacity: 1; transition: opacity .25s; }
.video-card .arrow { position: absolute; right: 24px; top: 24px; z-index: 1; width: 60px; height: 60px; background: url("../images/main/sec3-arrow.png") center no-repeat; background-size: 58px; opacity: 0; transition: opacity .25s; }
.video-card .name { margin: 20px 0 0; font-size: var(--font-size24); font-weight: 600; line-height: 1.667em; letter-spacing: -0.02em; color: #121212; }
.video-card:hover .arrow { opacity: 1; }
.video-more-wrap { display: flex; justify-content: center; margin-top: 100px; }
.video-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 24px; border: 1px solid var(--color-primary); border-radius: 100px; background: transparent; font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: var(--color-primary); cursor: pointer; transition: background .25s, color .25s; }
.video-more::after { content: ""; width: 16px; height: 16px; background: url("../images/sub/sub2-view.png") center no-repeat; background-size: contain; }

/* 포트폴리오 리스트 */
.pf-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pf-card { position: relative; display: block; height: 320px; border-radius: 16px; overflow: hidden; }
.pf-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%); transition: opacity .25s; }
.pf-card .name-default { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; margin: 0; padding-left: 16px; font-size: var(--font-size22); font-weight: 600; line-height: 1.636em; letter-spacing: -0.02em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s; }
.pf-card .name-default::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-primary); }
.pf-card .over { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; box-sizing: border-box; }
.pf-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pf-card .date { font-size: var(--font-size18); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); }
.pf-card .view { flex: 0 0 48px; width: 48px; height: 48px; background: url("../images/sub/pf-view.png") center no-repeat; background-size: 46px; }
.pf-card .btm { display: flex; flex-direction: column; gap: 16px; }
.pf-card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-card .tags span { display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 500px; background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; line-height: 1.429em; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); }
.pf-card .over .name { position: relative; margin: 0; padding-left: 16px; font-size: var(--font-size22); font-weight: 600; line-height: 1.636em; letter-spacing: -0.02em; color: #fff; word-break: keep-all; }
.pf-card .over .name::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-primary); }
.pf-card:hover::after,
.pf-card:hover .name-default { opacity: 0; }
.pf-card:hover .over { opacity: 1; visibility: visible; }

/* 포트폴리오 상세 */
.pf-summary { display: flex; align-items: flex-start; gap: 80px; margin-bottom: 120px; }
.pf-summary .image { flex: 0 0 708px; width: 708px; }
.pf-summary .thumb { height: 480px; border-radius: 16px; overflow: hidden; }
.pf-summary .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-summary .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.pf-summary .info-top { display: flex; flex-direction: column; gap: 20px; }
.pf-summary .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-summary .tags span { display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; border-radius: 500px; background: #fff8f3; font-size: var(--font-size18); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: var(--color-primary); }
.pf-summary .tit { margin: 0; font-size: var(--font-size32); font-weight: 600; line-height: 1.4375em; letter-spacing: -0.02em; color: #121212; word-break: keep-all; }
.pf-summary .desc { margin: 20px 0 0; font-size: var(--font-size20); font-weight: 400; line-height: 1.7em; letter-spacing: -0.02em; color: #505050; word-break: keep-all; }
.pf-summary .meta { padding-top: 50px; border-top: 1px solid #eee; }
.pf-summary .meta dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pf-summary .meta dl > div { display: flex; align-items: center; }
.pf-summary .meta dt { position: relative; flex: 0 0 120px; width: 120px; padding-left: 14px; font-size: var(--font-size18); font-weight: 500; line-height: 1.778em; letter-spacing: -0.02em; color: #a8a8a8; box-sizing: border-box; }
.pf-summary .meta dt::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #a8a8a8; }
.pf-summary .meta dd { margin: 0; font-size: var(--font-size18); font-weight: 400; line-height: 1.778em; letter-spacing: -0.02em; color: #505050; }
.pf-summary .video-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #121212 url("../images/sub/link-icon.png") center no-repeat; background-size: contain; transition: background-color .25s; position: relative; top: 4px; }
.pf-summary .video-link:hover { background-color: var(--color-primary); }
.pf-summary .btns { display: flex; gap: 8px; }
.pf-summary .btns .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 14px 28px; border-radius: 100px; font-size: var(--font-size18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; box-sizing: border-box; transition: .25s; }
.pf-summary .btns .btn.dark { background: #121212; color: #fff; }
.pf-summary .btns .btn.dark:hover { background: var(--color-primary); }
.pf-summary .btns .btn.line { border: 1px solid #eee; background: #fff; color: #121212; }
.pf-summary .btns .btn.line:hover { border-color: #121212; }
.product-detail { margin-bottom: 120px; }
.product-detail h3 { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid #eee;}
.buttons .cen { display: flex; align-items: center; justify-content: center; gap: 10px; }
.buttons .cen .btn-pack.large { border-radius: 100px; }