.accent-wave { --wave-gradient-image: linear-gradient(
90deg,
#30d1bc 0%,
#00e35e 22%,
#4f8de6 48%,
#7e6ff6 72%,
#30d1bc 100%
); --wave-flow-duration: 1s; display: inline-block; background: var(--wave-gradient-image); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; animation: wave-gradient 1s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(79, 141, 230, 0.18)); } 



@keyframes wave-gradient {0% { background-position: 0% 50%; } 
50% { background-position: 100% 50%; } 
100% { background-position: 0% 50%; } 
 }

.accent-wave-blue {--wave-gradient-image: linear-gradient(
100deg,
#f8f885 0%,
#fffba8 16%,
#fff14d 34%,
#ffea00 52%,
#ffcc00 72%,
#fff7b3 100%
);--wave-flow-duration: 5.5s;display: inline-block;background: var(--wave-gradient-image);background-size: 240% 100%;background-position: 0% 50%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;animation: wave-blue-flow 5.5s ease-in-out infinite;filter: drop-shadow(0 0 10px rgba(0, 255, 238, 0.22)); } 

@keyframes wave-blue-flow {0% { background-position: 0% 50%; } 
50% { background-position: 100% 50%; } 
100% { background-position: 0% 50%; } 
 }


.accent-wave-letter-rise {display: inline-block;overflow: visible; } 

.accent-wave-letter-rise .accent-wave-char {display: inline-block;padding: 0 0.04em;margin: 0 -0.04em;background-image: var(--wave-gradient-image);background-repeat: no-repeat;background-size: calc(var(--wave-char-count, 1) * 100%) 100%;background-position: var(--char-position, 0%) 50%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;animation: accent-char-rise 1.4s ease-in-out infinite, accent-char-flow var(--wave-flow-duration, 6s) ease-in-out infinite;animation-delay: calc(var(--char-index, 0) * 0.12s), 0s;will-change: transform, background-position; } 

.accent-wave-letter-rise .accent-wave-char.is-space {width: 0.32em;padding: 0;margin: 0; } 

@keyframes accent-char-rise {0%, 75%, 100% { transform: translateY(0); } 
35% { transform: translateY(-0.18em); } 
 }

@keyframes accent-char-flow {0% { background-position: calc(var(--char-position, 0%) - 1%) 50%; } 
50% { background-position: calc(var(--char-position, 0%) + 1%) 50%; } 
100% { background-position: calc(var(--char-position, 0%) - 1%) 50%; } 
 }

@media (prefers-reduced-motion: reduce) {.accent-wave-letter-rise .accent-wave-char {animation: none !important;transform: none !important; } 
 }



/********************************************
메인비주얼
*********************************************/
.aihome { width: 100%; min-height: 100%; color: #ffffff; } 
.hero-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 24px 90px; background:
radial-gradient(circle at 50% 108%, rgba(30, 255, 122, 0.20), transparent 20%),
radial-gradient(circle at 61% 104%, rgba(112, 96, 255, 0.22), transparent 18%),
radial-gradient(circle at 71% 106%, rgba(255, 255, 255, 0.09), transparent 11%),
linear-gradient(180deg, #03041d 0%, #02031c 58%, #02031c 100%); } 
.hero-wrap::before { content: ""; position: absolute; inset: 0; background:
radial-gradient(circle at 50% 50%, rgba(18, 26, 78, 0.10), transparent 45%),
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); pointer-events: none; } 
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1320px; text-align: center; display: flex; flex-direction: column; align-items: center; } 
.hero-title { margin: 0; font-size: clamp(42px, 5.85vw, 74px); line-height: 1.14; font-weight: 700; letter-spacing: -0.06em; color: #f7f7f8; word-break: keep-all; margin-bottom: 12px; } 
.hero-title2 { margin: 0; font-size: clamp(42px, 5.85vw, 62px); line-height: 1.14; font-weight: 700; letter-spacing: -0.06em; color: #f7f7f8; word-break: keep-all; margin-bottom: 12px; } 

.hero-hashtags { font-size: clamp(18px, 1.65vw, 26px); line-height: 1.6; font-weight: 500; letter-spacing: -0.03em; color: rgba(230, 230, 240, 0.86); word-break: keep-all; } 
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; flex-wrap: wrap; } 
.hero-btn { min-width: 260px; height: 62px; padding: 0 28px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.03em; border: 0; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } 
.hero-btn:hover { transform: translateY(-5px); } 
.hero-btn-primary { background: #05e348; /* background: #00ffee; */ color: #04111f; box-shadow: 0 14px 36px rgba(5, 227, 72, 0.18); } 
.hero-btn-secondary { background: #f2f2f2; color: #111827; box-shadow: 0 14px 36px rgba(255, 255, 255, 0.08); } 




.hero-btn svg { width: 22px; height: 22px; flex: 0 0 auto; } 
.hero-scroll { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: -0.01em; text-transform: uppercase; } 
.hero-scroll-icon { width: 24px; height: 36px; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 999px; position: relative; display: inline-block; } 
.hero-scroll-icon::before { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); transform: translateX(-50%); animation: wheel-move 1.8s infinite; } 

@keyframes wheel-move {0% { opacity: 0; transform: translateX(-50%) translateY(0); } 
20% { opacity: 1; } 
80% { opacity: 1; } 
100% { opacity: 0; transform: translateX(-50%) translateY(10px); } 
 }

@media (max-width: 1280px) {.hero-wrap { padding-top: 110px; } 
.hero-title { max-width: 1200px; } 
 }
@media (max-width: 991px) {.hero-title { font-size: clamp(32px, 10.2vw, 56px); line-height: 1.22; } 
.hero-hashtags { margin-top: 22px; font-size: 15px; line-height: 1.75; } 
.hero-actions { width: 100%; flex-direction: column; gap: 12px; } 
.hero-btn { width: 100%; max-width: 360px; min-width: 0; height: 56px; padding: 0 22px; font-size: 16px; } 
.hero-scroll { bottom: 24px; font-size: 12px; gap: 10px; } 
.hero-scroll-icon { width: 22px; height: 32px; } 
.hero-lights { height: 180px; } 
.hero-beam-green { width: 180px; transform: translateX(-170px) rotate(-28deg); } 
.hero-beam-green-sub { width: 140px; transform: translateX(-132px) translateY(20px) rotate(-19deg); } 
.hero-beam-violet { width: 220px; transform: translateX(-8px) rotate(18deg); } 
.hero-beam-white { width: 118px; transform: translateX(78px) translateY(16px) rotate(-23deg); } 
 }
@media (max-width: 480px) {.hero-btn { max-width: 100%; height: 52px; padding: 0 18px; font-size: 15px; border-radius: 12px; } 
.hero-btn svg { width: 20px; height: 20px; } 
.hero-scroll { bottom: 18px; font-size: 11px; } 
.hero-scroll-icon { width: 20px; height: 30px; } 
.hero-lights { height: 150px; } 
 }

@media (max-width: 320px) {.hero-wrap { padding: 68px 12px 72px; } 
.hero-title { font-size: 26px; } 
.hero-hashtags { font-size: 12px; } 
.hero-btn { height: 48px; padding: 0 16px; font-size: 14px; } 
.hero-scroll { gap: 8px; font-size: 10px; } 
 }

/********************************************
AI 홈페이지 제작 단계 
*********************************************/
.page-wrap { width: 100%; min-height: 100vh; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); } 

.aistep-scroll-wrap { position: relative; height: 440vh; } 

.aistep-swiper-section { display: none; } 

.aistep-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 24px; overflow: hidden; } 

.aistep-card { position: relative; width: min(100%, 1600px); min-height: 92vh; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; } 

.aistep-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; } 

.aistep-left { position: relative; z-index: 2; width: 44%; min-width: 320px; } 

.aistep-head { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto 40px; padding: 100px 24px 0; text-align: center; } 

.aistep-label { display: inline-block; margin-bottom: 18px; font-size: 20px; font-weight: 700; color: #111111; letter-spacing: -0.01em; } 

.aistep-copy { margin: 0; font-size: 60px; line-height: 1.4; letter-spacing: -0.06em; font-weight: 800; color: #111111; word-break: keep-all; } 

.aistep-left { position: relative; z-index: 2; width: 44%; min-width: 320px; } 
.accent-wave { display: inline-block; background: linear-gradient(
90deg,
#30d1bc 0%,
#00e35e 22%,
#4f8de6 48%,
#7e6ff6 72%,
#30d1bc 100%
); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; animation: wave-gradient 6s ease-in-out infinite; } 

.aistep-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; } 

.aistep-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: clamp(28px, 2.8vw, 56px); line-height: 1.14; letter-spacing: -0.06em; font-weight: 800; color: rgba(60, 52, 56, 0.15); transition: color 0.5s ease, opacity 0.5s ease, transform 0.5s ease; word-break: keep-all; } 

.aistep-item-text-wrap { position: relative; } 
.aistep-step { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 34px; padding: 0 14px; margin-bottom: 8px; border-radius: 999px; background: rgba(0, 0, 0, .08); /* background: linear-gradient(90deg, #21db4b 0%, #10c93f 100%); */ color: #ffffff; font-size: 13px; line-height: 1; letter-spacing: 0; font-weight: 800; transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; } 

.aistep-item-text { display: block; } 

.aistep-item.is-active { color: #111111; transform: translateX(0); } 

.aistep-item.is-dim { color: rgba(60, 52, 56, 0.15); } 

.aistep-item.is-active .aistep-step { background: linear-gradient(90deg, #21db4b 0%, #10c93f 100%); color: #ffffff; box-shadow: 0 8px 20px rgba(33, 219, 75, 0.25); } 

.aistep-right { position: relative; z-index: 2; width: 56%; min-height: 520px; display: flex; align-items: center; justify-content: center; } 

.aistep-visual-stage { position: relative; width: 100%; min-height: 520px; height: 100%; border-radius: 28px; overflow: hidden; background: #ececec; } 

.aistep-visual { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; } 

.aistep-visual.is-active { opacity: 1; transform: scale(1); } 

.aistep-visual img,
.aistep-visual video { display: block; width: 100%; height: 100%; object-fit: cover; } 

/* .aistep-floating-star { position: absolute; width: 20px; height: 20px; background: radial-gradient(circle, #7fe6ff 0%, #4dcbff 55%, rgba(77, 203, 255, 0) 70%); clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%); opacity: 0.9; animation: star-float 2.8s ease-in-out infinite; z-index: 2; } 

.aistep-floating-star.star-a { left: 30%; top: 24%; } 

.aistep-floating-star.star-b { right: 24%; top: 30%; animation-delay: 0.3s; } 

.aistep-floating-star.star-c { left: 36%; bottom: 26%; animation-delay: 0.6s; } 
*/
.aistep-progress-bar { position: absolute; left: 56px; right: 56px; bottom: 34px; height: 6px; border-radius: 999px; background: rgba(17, 17, 17, 0.06); overflow: hidden; z-index: 3; } 

.aistep-progress-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1bdc4a 0%, #7e6ff6 100%); transition: width 0.2s linear; } 

.aistep-head-mobile {margin-bottom: 28px;padding-top: 80px; } 

.aistep-mobile-swiper {width: 100%;padding: 0 24px 90px;overflow: hidden; } 

.aistep-mobile-card {min-height: 100%;border-radius: 28px;overflow: hidden;background: #ffffff;box-shadow: 0 24px 54px rgba(17, 24, 39, 0.10); } 

.aistep-mobile-visual {position: relative;min-height: 420px;background: #ececec; } 

.aistep-mobile-visual img {display: block;width: 100%;height: 100%;object-fit: cover; } 

.aistep-mobile-body {padding: 24px 24px 28px; } 

.aistep-mobile-title {margin: 14px 0 0;font-size: clamp(24px, 4.2vw, 36px);line-height: 1.3;letter-spacing: -0.05em;font-weight: 800;color: #111111;word-break: keep-all; } 

.aistep-mobile-controls {display: flex;align-items: center;justify-content: space-between;gap: 16px;margin-top: 24px; } 

.aistep-mobile-pagination {position: static;display: flex;align-items: center;gap: 8px; } 

.aistep-mobile-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin: 0 !important;background: rgba(17, 17, 17, 0.18);opacity: 1; } 

.aistep-mobile-pagination .swiper-pagination-bullet-active {width: 28px;border-radius: 999px;background: linear-gradient(90deg, #1bdc4a 0%, #7e6ff6 100%); } 

.aistep-mobile-navigation {display: flex;align-items: center;gap: 10px; } 

.aistep-mobile-nav-btn {width: 48px;height: 48px;border: 1px solid rgba(17, 24, 39, 0.10);border-radius: 999px;background: #ffffff;color: #111111;font-size: 18px;cursor: pointer;box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; } 

.aistep-mobile-nav-btn:hover {transform: translateY(-2px);box-shadow: 0 14px 28px rgba(17, 24, 39, 0.10); } 

.aistep-mobile-nav-btn.swiper-button-disabled {opacity: 0.35;cursor: default;pointer-events: none; } 

@keyframes star-float {0% { transform: translateY(0px) scale(1); } 
50% { transform: translateY(-8px) scale(1.08); } 
100% { transform: translateY(0px) scale(1); } 
 }

@keyframes wave-gradient {0% { background-position: 0% 50%; } 
50% { background-position: 100% 50%; } 
100% { background-position: 0% 50%; } 
 }

@media (max-width: 1280px) {.aistep-card { min-height: 74vh; padding: 54px 44px; } 

.aistep-left { width: 46%; } 

.aistep-right { width: 54%; } 

.aistep-copy { font-size: 48px; } 
 }

@media (max-width: 980px) {.aistep-scroll-wrap { display: none; } 

.aistep-swiper-section { display: block; } 

.aistep-head-mobile {padding-left: 20px;padding-right: 20px; } 

.aistep-copy { font-size: 34px; } 

.aistep-mobile-swiper {padding: 0 20px 84px; } 

.aistep-mobile-visual { min-height: 420px; } 

.aistep-mobile-title { font-size: clamp(22px, 4.8vw, 34px); } 
 }

@media (max-width: 767px) {.aistep-head-mobile {padding: 56px 16px 0;margin-bottom: 20px; } 

.aistep-label { margin-bottom: 14px; font-size: 13px; } 

.aistep-copy { font-size: 28px; } 

.aistep-mobile-swiper {padding: 0 16px 74px; } 

.aistep-mobile-card { border-radius: 22px; } 

.aistep-mobile-visual { min-height: 320px; } 

.aistep-mobile-body { padding: 20px 20px 24px; } 

.aistep-mobile-title {margin-top: 12px;font-size: clamp(20px, 7vw, 30px);line-height: 1.28; } 

.aistep-mobile-controls { margin-top: 20px; } 

.aistep-mobile-nav-btn {width: 42px;height: 42px;font-size: 16px; } 
 }

@media (max-width: 480px) {.aistep-head-mobile { padding: 48px 16px 0; } 

.aistep-copy { font-size: 24px; } 

.aistep-mobile-visual { min-height: 250px; } 

.aistep-mobile-body { padding: 18px 18px 22px; } 

.aistep-mobile-title { font-size: 18px; } 

.aistep-step { min-width: 76px; height: 28px; padding: 0 10px; font-size: 10px; } 
 }

@media (max-width: 320px) {.aistep-head-mobile { padding: 40px 12px 0; } 

.aistep-copy { font-size: 22px; } 

.aistep-mobile-swiper { padding-left: 12px; padding-right: 12px; } 

.aistep-mobile-title { font-size: 17px; } 
 }

@media (max-width: 980px) {.aistep-scroll-wrap { height: auto; } 

.aistep-sticky { position: relative; top: auto; min-height: auto; padding: 0 20px 100px; } 

.aistep-card { min-height: auto; padding: 34px 24px 84px; flex-direction: column; align-items: flex-start; gap: 26px; } 

.aistep-left,
.aistep-right { width: 100%; min-width: 0; } 

.aistep-copy { font-size: 34px; } 

.aistep-list { gap: 18px; } 

.aistep-item { font-size: clamp(22px, 4.8vw, 40px); } 

.aistep-right { min-height: 420px; } 

.aistep-visual-stage { min-height: 420px; } 

.aistep-progress-bar { left: 24px; right: 24px; } 
 }

@media (max-width: 767px) {.aistep-sticky { padding: 0 16px 84px; } 

.aistep-card { padding: 26px 18px 74px; } 

.aistep-head { padding: 56px 16px 0; margin-bottom: 20px; } 

.aistep-label { margin-bottom: 14px; font-size: 13px; } 

.aistep-copy { font-size: 28px; } 
.aistep-item { gap: 10px; font-size: clamp(20px, 7vw, 34px); line-height: 1.18; } 

.aistep-step { min-width: 82px; height: 30px; padding: 0 12px; font-size: 11px; background: linear-gradient(90deg, #21db4b 0%, #10c93f 100%); } 

.aistep-right { min-height: 290px; } 

.aistep-visual-stage { min-height: 290px; border-radius: 20px; } 

.aistep-floating-star { width: 16px; height: 16px; } 

.aistep-progress-bar { bottom: 20px; height: 5px; } 
 }

@media (max-width: 480px) {.aistep-card { padding: 22px 16px 70px; } 

.aistep-head { padding: 48px 16px 0; } 

.aistep-copy { font-size: 24px; } 

.aistep-item { font-size: 18px; } 

.aistep-step { min-width: 76px; height: 28px; padding: 0 10px; font-size: 10px; } 

.aistep-right,
.aistep-visual-stage { min-height: 250px; } 
 }

@media (max-width: 320px) {.aistep-sticky { padding-left: 12px; padding-right: 12px; } 

.aistep-card { padding: 20px 12px 64px; } 

.aistep-left { min-width: 0; } 

.aistep-head { padding: 40px 12px 0; } 

.aistep-copy { font-size: 22px; } 
.aistep-item { font-size: 17px; } 

.aistep-step { min-width: 72px; font-size: 10px; } 
 }

/********************************************
카피라이터 
*********************************************/
.space-visual-section {position: relative;min-height: 920px;overflow: hidden;background: #000000; } 

.space-visual-bg {position: absolute;inset: 0;z-index: 1; } 

.space-visual-bg img {display: block;width: 100%;height: 100%;object-fit: cover; } 

.space-visual-overlay {position: absolute;inset: 0;z-index: 2;background:
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 42%, rgba(0, 0, 0, 0.10) 43%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.78) 83%),
linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.18) 100%)}

.space-visual-inner {position: relative;z-index: 3;width: 100%;max-width: 1600px;min-height: 920px;margin: 0 auto;padding: 0 24px;display: flex;align-items: center;justify-content: flex-end; } 

.space-visual-text-box {width: 100%;max-width: 620px;padding: 40px 0;text-align: left; } 

.space-visual-label {display: inline-flex;align-items: center;justify-content: center;min-height: 40px;padding: 0 16px;border-radius: 999px;background: rgba(255, 255, 255, 0.10);border: 1px solid rgba(255, 255, 255, 0.16);backdrop-filter: blur(8px);color: #ffffff;font-size: 13px;font-weight: 700;letter-spacing: 0.08em; } 

.space-visual-title {margin: 24px 0 0;font-size: clamp(46px, 5.2vw, 76px);line-height: 1.3;letter-spacing: -0.06em;font-weight: 800;color: #ffffff;word-break: keep-all; } 

.space-visual-desc {margin: 24px 0 0;font-size: clamp(16px, 1.2vw, 22px);line-height: 1.8;letter-spacing: -0.03em;color: rgba(255, 255, 255, 0.82);word-break: keep-all; } 

@media (max-width: 1440px) {.space-visual-section {min-height: 820px; } 

.space-visual-inner {min-height: 820px; } 

.space-visual-text-box {max-width: 560px; } 
 }

@media (max-width: 991px) {.space-visual-section {min-height: 760px; } 

.space-visual-overlay {background:
linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.24) 30%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.82) 100%); } 

.space-visual-inner {min-height: 760px;padding: 0 20px 64px;align-items: flex-end;justify-content: flex-start; } 

.space-visual-text-box {max-width: 100%;padding: 0; } 

.space-visual-title {font-size: clamp(38px, 8vw, 64px); } 

.space-visual-desc br {display: none; } 
 }

@media (max-width: 767px) {.space-visual-section {min-height: 680px; } 

.space-visual-inner {min-height: 680px;padding: 0 16px 48px; } 

.space-visual-label {min-height: 36px;padding: 0 14px;font-size: 12px; } 

.space-visual-title {margin-top: 18px;font-size: clamp(32px, 9vw, 48px);line-height: 1.18; } 

.space-visual-desc {margin-top: 18px;font-size: 14px;line-height: 1.7; } 
 }

@media (max-width: 480px) {.space-visual-section {min-height: 620px; } 

.space-visual-inner {min-height: 620px;padding-bottom: 40px; } 

.space-visual-title br {display: none; } 

.space-visual-title {font-size: 30px; } 
 }

@media (max-width: 320px) {.space-visual-inner {padding-left: 12px;padding-right: 12px; } 

.space-visual-title {font-size: 26px; } 

.space-visual-desc {font-size: 13px; } 
 }


/********************************************
포트폴리오
*********************************************/
.portfolio-section {position: relative;padding: 140px 24px;background:
radial-gradient(circle at 8% 18%, rgba(126, 211, 255, 0.16), transparent 24%),
radial-gradient(circle at 88% 12%, rgba(179, 160, 255, 0.14), transparent 22%),
linear-gradient(180deg, #f8fbff 0%, #f3f7fb 50%, #f9fbfd 100%);overflow: hidden; } 

.portfolio-inner {width: 100%;max-width: 1480px;margin: 0 auto; } 

.portfolio-head {max-width: 900px;margin: 0 auto;text-align: center; } 

.portfolio-label {display: inline-flex;align-items: center;justify-content: center;min-height: 38px;padding: 0 16px;border-radius: 999px;background: #ffffff;border: 1px solid rgba(90, 112, 255, 0.12);box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);color: #3d5afe;font-size: 13px;font-weight: 800;letter-spacing: 0.02em; } 

.portfolio-title {margin: 22px 0 0;font-size: clamp(34px, 4.2vw, 62px);line-height: 1.3;letter-spacing: -0.06em;font-weight: 800;color: #111827;word-break: keep-all; } 

.portfolio-desc {margin: 20px auto 0;max-width: 760px;font-size: clamp(16px, 1.15vw, 19px);line-height: 1.8;letter-spacing: -0.03em;color: #667085;word-break: keep-all; } 

.portfolio-toolbar {display: flex;align-items: center;justify-content: space-between;gap: 20px;margin-top: 52px;margin-bottom: 40px;flex-wrap: wrap;background-color: #fff;padding: 20px 22px;border-radius: 100px; } 

.portfolio-tab-list {display: flex;align-items: center;gap: 12px;flex-wrap: wrap;margin: 0;padding: 0;list-style: none; } 

.portfolio-tab-item {margin: 0;padding: 0; } 

.portfolio-tab-link {display: inline-flex;align-items: center;justify-content: center;min-height: 46px;padding: 0 18px;border: 1px solid rgba(17, 24, 39, 0.08);border-radius: 999px;background: rgba(255, 255, 255, 0.85);color: #475467;font-size: 15px;font-weight: 700;letter-spacing: -0.02em;text-decoration: none;box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);transition: all 0.25s ease; } 

.portfolio-tab-link:hover {transform: translateY(-2px);color: #2855e0;border-color: rgba(40, 85, 224, 0.18); } 

.portfolio-tab-link.is-active {width: 100%;color: #ffffff;border-color: transparent;background: linear-gradient(90deg, #28d17c 0%, #5c7cff 100%);box-shadow: 0 12px 28px rgba(92, 124, 255, 0.18); } 

.portfolio-more-link {display: inline-flex;align-items: center;justify-content: center;min-height: 46px;padding: 0 18px;border-radius: 999px;background: #ffffff;border: 1px solid rgba(17, 24, 39, 0.08);color: #111827;font-size: 15px;font-weight: 700;text-decoration: none;box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);transition: all 0.25s ease; } 

.portfolio-more-link:hover {transform: translateY(-2px);color: #2855e0;border-color: rgba(40, 85, 224, 0.18); } 

.portfolio-masonry {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 22px;align-items: start;margin: 0;padding: 0;list-style: none; } 

.portfolio-item {margin: 0;padding: 0; } 

.portfolio-item.is-hidden {display: none; } 

.portfolio-card {position: relative;border-radius: 24px;overflow: hidden;background: rgba(255, 255, 255, 0.82);border: 1px solid rgba(255, 255, 255, 0.92);box-shadow:
0 18px 44px rgba(17, 24, 39, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);backdrop-filter: blur(14px);transition: transform 0.35s ease, box-shadow 0.35s ease; } 

.portfolio-card:hover {transform: translateY(-8px);box-shadow:
0 26px 56px rgba(17, 24, 39, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.85); } 

.portfolio-card::before {content: "";position: absolute;inset: 0;pointer-events: none;opacity: 1; } 

.portfolio-item-1 .portfolio-card::before {background: linear-gradient(180deg, rgba(255, 204, 223, 0.24) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-item-2 .portfolio-card::before {background: linear-gradient(180deg, rgba(191, 228, 255, 0.24) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-item-3 .portfolio-card::before {background: linear-gradient(180deg, rgba(230, 203, 255, 0.24) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-item-4 .portfolio-card::before {background: linear-gradient(180deg, rgba(201, 255, 236, 0.22) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-item-5 .portfolio-card::before {background: linear-gradient(180deg, rgba(255, 229, 191, 0.24) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-item-6 .portfolio-card::before {background: linear-gradient(180deg, rgba(213, 224, 255, 0.24) 0%, rgba(255,255,255,0) 55%); } 

.portfolio-card-link {position: relative;z-index: 2;display: block;color: inherit;text-decoration: none; } 

.portfolio-card-thumb {position: relative;padding: 12px 20px 10px;min-height: 220px;display: flex;align-items: center;justify-content: center; } 

.portfolio-card-thumb img {display: block;width: 100%;/* max-width: 210px; */
height: auto;object-fit: contain;transition: transform 0.4s ease; } 

.portfolio-card:hover .portfolio-card-thumb img {transform: translateY(-4px) scale(1.03); } 

.portfolio-card-body {padding: 8px 26px 28px; } 

.portfolio-card-title {margin: 0;font-size: clamp(24px, 1.7vw, 34px);line-height: 1.24;letter-spacing: -0.05em;font-weight: 800;color: #1f2937;word-break: keep-all; } 

.portfolio-card-text {margin: 18px 0 0;font-size: 15px;line-height: 1.75;letter-spacing: -0.02em;color: #667085;word-break: keep-all; } 

.portfolio-video-badge {position: absolute;top: 18px;right: 18px;display: inline-flex;align-items: center;justify-content: center;height: 32px;padding: 0 12px;border-radius: 999px;background: rgba(17, 24, 39, 0.72);color: #ffffff;font-size: 11px;font-weight: 800;letter-spacing: 0.08em; } 

.portfolio-item-1,
.portfolio-item-3,
.portfolio-item-5 {margin-top: 0; } 

.portfolio-item-2 {margin-top: 38px; } 

.portfolio-item-4 {margin-top: -22px; } 

.portfolio-item-5 {margin-top: -8px; } 

.portfolio-item-6 {margin-top: 30px; } 

.portfolio-load-more {display: flex;justify-content: center;margin-top: 44px; } 

.portfolio-load-more[hidden] {display: none; } 

.portfolio-load-more-btn {display: inline-flex;align-items: center;justify-content: center;min-width: 180px;min-height: 56px;padding: 0 28px;border: 0;border-radius: 999px;background: linear-gradient(90deg, #28d17c 0%, #5c7cff 100%);color: #ffffff;font-size: 16px;font-weight: 800;letter-spacing: -0.02em;box-shadow: 0 16px 32px rgba(92, 124, 255, 0.22);cursor: pointer;transition: transform 0.25s ease, box-shadow 0.25s ease; } 

.portfolio-load-more-btn:hover {transform: translateY(-2px);box-shadow: 0 20px 40px rgba(92, 124, 255, 0.28); } 

.portfolio-load-more-btn[hidden] {display: none; } 

@media screen and (max-width:1500px) {.portfolio-toolbar { border-radius: 12px; } 
 }

@media (max-width: 1280px) {.portfolio-section {padding: 120px 20px; } 

.portfolio-card-thumb {min-height: 200px; } 

.portfolio-item-2 {margin-top: 24px; } 

.portfolio-item-4 {margin-top: 0; } 

.portfolio-item-6 {margin-top: 20px; } 
 }

@media (max-width: 991px) {.portfolio-title {font-size: clamp(30px, 5.8vw, 46px); } 

.portfolio-desc {font-size: 15px; } 

.portfolio-toolbar {margin-top: 40px;margin-bottom: 30px;flex-direction: column;align-items: flex-start;padding: 18px;border-radius: 28px; } 

.portfolio-tab-list {width: 100%;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;scrollbar-width: thin;padding-bottom: 6px; } 

.portfolio-tab-list::-webkit-scrollbar {height: 6px; } 

.portfolio-tab-list::-webkit-scrollbar-thumb {background: rgba(92, 124, 255, 0.28);border-radius: 999px; } 

.portfolio-tab-item {flex: 0 0 auto; } 

.portfolio-tab-link {white-space: nowrap; } 

.portfolio-more-link {align-self: flex-start; } 

.portfolio-masonry {grid-template-columns: repeat(2, minmax(0, 1fr)); } 

.portfolio-item-2,
.portfolio-item-4,
.portfolio-item-5,
.portfolio-item-6 {margin-top: 0; } 

.portfolio-item:nth-child(even) {margin-top: 28px; } 
 }

@media (max-width: 767px) {.portfolio-section {padding: 90px 16px; } 

.portfolio-masonry {
gap: 18px; } 

.portfolio-item,
.portfolio-item:nth-child(even) {margin-top: 0; } 

.portfolio-tab-list {gap: 10px;padding-bottom: 4px; } 

.portfolio-tab-link,
.portfolio-more-link {min-height: 42px;height: 42px;padding: 0 16px;font-size: 14px; } 

.portfolio-card {border-radius: 20px; } 

/* .portfolio-card-thumb {min-height: 180px;padding: 24px 24px 8px; } 
*/


.portfolio-card-body {padding: 8px 20px 22px; } 

.portfolio-card-title {font-size: 24px; } 

.portfolio-card-text {font-size: 14px;line-height: 1.7; } 

.portfolio-load-more {margin-top: 36px; } 

.portfolio-load-more-btn {min-width: 160px;min-height: 50px;padding: 0 24px;font-size: 15px; } 
 }

@media (max-width: 480px) {.portfolio-title br,
.portfolio-desc br {display: none; } 

.portfolio-title {font-size: 28px; } 

.portfolio-card-thumb {min-height: 170px; } 

}

@media (max-width: 320px) {.portfolio-section {padding-left: 12px;padding-right: 12px; } 

.portfolio-title {font-size: 24px; } 

.portfolio-card-body {padding: 8px 16px 18px; } 

.portfolio-card-title {font-size: 21px; } 
 }



/********************************************
이용약관
*********************************************/
.policy-banner-section {padding: 100px 24px;background: #f8fafc; } 

.policy-banner-inner {width: 100%;max-width: 1280px;margin: 0 auto; } 

.policy-banner-head {margin-bottom: 36px;text-align: center; } 

.policy-banner-title {margin: 0;font-size: clamp(28px, 3vw, 44px);line-height: 1.2;letter-spacing: -0.04em;font-weight: 800;color: #111827; } 

.policy-banner-desc {margin: 14px 0 0;font-size: 16px;line-height: 1.7;letter-spacing: -0.02em;color: #6b7280; } 

.policy-banner-list {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px; } 

.policy-banner-item {display: flex;flex-direction: column;align-items: flex-start;min-height: 100%;padding: 28px 28px 26px;border: 1px solid #e5e7eb;border-radius: 22px;background: #ffffff;box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } 

.policy-banner-item-top {width: 100%;margin-bottom: 12px; } 

.policy-banner-item-title {margin: 0;font-size: 20px;line-height: 1.3;letter-spacing: -0.03em;font-weight: 700;color: #111827; } 

.policy-banner-item-text {margin: 0;font-size: 15px;line-height: 1.8;letter-spacing: -0.02em;color: #4b5563;word-break: keep-all; } 

.policy-banner-more {display: inline-flex;align-items: center;justify-content: center;min-width: 120px;height: 42px;margin-top: 22px;padding: 0 18px;border: 1px solid #dbe3f0;border-radius: 999px;background: #ffffff;color: #111827;font-size: 14px;font-weight: 700;text-decoration: none;transition: all 0.25s ease; } 

.policy-banner-more:hover {transform: translateY(-2px);border-color: #c7d2fe;background: #f8fbff;color: #4f46e5;box-shadow: 0 10px 24px rgba(79, 70, 229, 0.08); } 

@media (max-width: 767px) {.policy-banner-section {padding: 80px 16px; } 

.policy-banner-list {grid-template-columns: 1fr; } 

.policy-banner-item {padding: 22px 20px;border-radius: 18px; } 

.policy-banner-item-title {font-size: 18px; } 

.policy-banner-item-text {font-size: 14px;line-height: 1.7; } 

.policy-banner-more {min-width: 112px;height: 40px;margin-top: 18px;font-size: 13px; } 
 }

@media (max-width: 320px) {.policy-banner-section {padding-left: 12px;padding-right: 12px; } 

.policy-banner-item {padding: 18px 16px; } 
 }