@charset "utf-8"; :root { --bg: #F9F8FB; --bg-active: #2C2C2C; --text: #1e1d1d; --purple: #A46DFF; --pink: #F07EB9; --green: #4CC47C; --blue: #38A6F3; --yellow: #ffcc00; --purple2: #451575; --text-error: #808080 } 

html, body { color: var(--text); padding: 0; margin: 0; } 

a { text-decoration: none; color: var(--text); } 

* { box-sizing: border-box; } 

body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", sans-serif; background-color: #ffffff; scroll-behavior: smooth; } 

main { width: 100%; height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; } 

#hero-section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffffff; padding: 0 40px; scroll-snap-align: start; position: relative; } 

.hero-content { text-align: center; max-width: 900px; } 

.hero-badge { display: inline-block; padding: 6px 16px; background-color: #f1f3f5; color: var(--yellow); font-size: 14px; font-weight: 600; border-radius: 30px; margin-bottom: 24px; letter-spacing: 0.5px; } 

#hero-section h1 { font-size: clamp(36px, 5vw, 68px); font-weight: 700; color: #111111; line-height: 1.25; margin: 0 0 24px 0; letter-spacing: -2px; word-break: keep-all; } 

#hero-section h1 strong { color: var(--yellow); font-weight: 800; } 

#hero-section p { font-size: clamp(16px, 1.8vw, 24px); color: #666666; margin: 0 0 48px 0; font-weight: 400; word-break: keep-all; } 

.scroll-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #aaaaaa; font-size: 13px; font-weight: 500; } 

.scroll-hint .arrow { width: 12px; height: 12px; border-right: 2px solid #cccccc; border-bottom: 2px solid #cccccc; transform: rotate(45deg); animation: bounce 1.5s infinite; } 

@keyframes bounce { 0%, 100% { transform: translateY(0) rotate(45deg); } 
 50% { transform: translateY(6px) rotate(45deg); } 
 }

#article-box { width: 100%; display: flex; flex-direction: column; } 

#article-box article { width: 100%; height: 100vh; display: grid; grid-template-columns: 200px 80px 1fr; grid-template-rows: auto auto; align-content: center; justify-content: center; padding: 0 calc((100% - 1200px) / 2 + 40px); scroll-snap-align: start; background-color: #ffffff; } 


.aos-init h2,
.aos-init p,
.aos-init svg.icon { opacity: 0; transition-property: opacity, transform; transition-duration: 0.8s; transition-timing-function: ease-out; } 

.aos-init .fade-up { transform: translateY(50px); } 
.aos-init .fade-down { transform: translateY(-50px); } 
.aos-init .fade-right { transform: translateX(-50px); } 
.aos-init .fade-left { transform: translateX(50px); } 
.aos-init .zoom-in { transform: scale(0.7); } 

.aos-init.aos-animate h2,
.aos-init.aos-animate p,
.aos-init.aos-animate svg.icon { opacity: 1; transform: translate(0) scale(1); } 

.aos-init h2 { transition-delay: 0s; } 
.aos-init p { transition-delay: 0.15s; } 
.aos-init svg.icon { transition-delay: 0.3s; } 

@media (max-width: 1200px){
 #article-box article { padding: 0 40px; } 
 }

#article-box article svg.icon { grid-area: 1 / 1 / 3 / 2; width: 100%; max-width: 200px; height: auto; aspect-ratio: 1 / 1; stroke: #111111; stroke-width: 1.2; justify-self: center; align-self: center; } 

#article-box article h2 { grid-column: 3; grid-row: 1; font-size: clamp(38px, 4.5vw, 64px); font-weight: 800; color: #111111; margin: 0 0 16px 0; letter-spacing: -2px; line-height: 1.1; text-align: left; } 

#article-box article p { grid-column: 3; grid-row: 2; font-size: clamp(16px, 1.8vw, 22px); font-weight: 400; color: #444444; line-height: 1.6; margin: 0; text-align: left; word-break: keep-all; } 

#article-box article:nth-child(even) { grid-template-columns: 1fr 80px 200px; background-color: #f8f9fa; } 

#article-box article:nth-child(even) svg.icon { grid-column: 3; grid-row: 1 / 3; } 

#article-box article:nth-child(even) h2,
#article-box article:nth-child(even) p { grid-column: 1; } 

@media (max-width: 768px){
 #hero-section { padding: 0 24px; } 

 #article-box article { grid-template-columns: 100px 30px 1fr; padding: 0 20px; } 

 #article-box article:nth-child(even) { grid-template-columns: 1fr 30px 100px; } 

 #article-box article svg.icon { max-width: 100px; } 

 #article-box article h2 { font-size: 28px; margin-bottom: 8px; } 

 #article-box article p { font-size: 15px; line-height: 1.5; } 
 }

#fixed-btn-group { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 12px; z-index: 10000; } 

.fixed-btn { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; position: relative; } 

.fixed-btn:hover { transform: scale(1.05); } 

.fixed-btn svg { position: absolute; width: 26px; height: 26px; stroke: #ffffff; fill: none; transition: transform 0.25s ease, opacity 0.25s ease; } 

#contact-launcher { background-color: #111111; } 

#contact-launcher svg.icon-close { opacity: 0; transform: rotate(-90deg); } 

#contact-launcher.active svg.icon-open { opacity: 0; transform: rotate(90deg); } 

#contact-launcher.active svg.icon-close { opacity: 1; transform: rotate(0deg); } 

#chatbot-launcher { background-color: var(--yellow); } 

#chatbot-launcher svg.icon-close { opacity: 0; transform: rotate(-90deg); } 

#chatbot-launcher.active svg.icon-open { opacity: 0; transform: rotate(90deg); } 

#chatbot-launcher.active svg.icon-close { opacity: 1; transform: rotate(0deg); } 

#chatbot-container { position: fixed; bottom: 180px; right: 30px; width: 400px; height: 600px; max-width: calc(100vw - 60px); max-height: calc(100vh - 215px); background-color: #ffffff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); z-index: 10000; overflow: hidden; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } 

#chatbot-container.active { opacity: 1; transform: translateY(0); pointer-events: auto; } 

#chatbot-container iframe { width: 100%; height: 100%; border: none; } 

#contact-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } 

#contact-modal-backdrop.active { opacity: 1; pointer-events: auto; } 

#contact-modal-container { width: 540px; max-width: calc(100vw - 40px); background-color: #ffffff; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); padding: 40px; transform: scale(0.95); transition: transform 0.3s ease; } 

#contact-modal-backdrop.active #contact-modal-container { transform: scale(1); } 

.contact-modal-header { margin-bottom: 28px; } 

.contact-modal-header h3 { font-size: 24px; font-weight: 700; color: #111111; margin: 0 0 8px 0; } 

.contact-modal-header p { font-size: 14px; color: #666666; margin: 0; } 

.contact-form-group { margin-bottom: 20px; } 

.contact-form-group label { display: block; font-size: 14px; font-weight: 600; color: #333333; margin-bottom: 8px; } 

.contact-form-group input,
.contact-form-group textarea,
.contact-submit-btn { font-family: inherit; } 

.contact-form-group input,
.contact-form-group textarea { width: 100%; padding: 14px 16px; font-size: 15px; color: #111111; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease; } 

.contact-form-group input:focus,
.contact-form-group textarea:focus { border-color:var; background-color: #ffffff; } 

.contact-form-group textarea { height: 140px; resize: none; } 

.contact-submit-btn { width: 100%; padding: 16px; font-size: 16px; font-weight: 600; color: #ffffff; background-color: #111111; border: none; border-radius: 10px; cursor: pointer; transition: background-color 0.2s ease; } 

.contact-submit-btn:hover { background-color: #2c2c2c; } 
/* 이미지 슬라이더 모달 스타일 */
#slider-modal { display: none; position: fixed; z-index: 11000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; } 

.slider-container { position: relative; max-width: 80%; max-height: 80%; text-align: center; } 

.slider-image { max-width: 100%; max-height: 80vh; display: none; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } 

.slider-image.active { display: block; } 

.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; color: white; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; transition: opacity 0.2s; font-size: 0; } 

.slider-nav::after { content: ''; width: 18px; height: 18px; border-top: 2px solid #fff; /* 2px 두께 설정 */
 border-left: 2px solid #fff; display: block; } 

.prev { left: -60px; } 
.prev::after { transform: rotate(-45deg) translateX(3px); } 

.next { right: -60px; } 
.next::after { transform: rotate(135deg) translateX(3px); } 

.slider-nav:hover { opacity: 0.7; } 

.close-slider { position: absolute; top: -40px; right: 0; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; font-size: 0; } 

.close-slider::before,
.close-slider::after { content: ''; position: absolute; width: 24px; height: 2px; background-color: #fff; } 
.close-slider::before { transform: rotate(45deg); } 
.close-slider::after { transform: rotate(-45deg); } 
.close-slider:hover { opacity: 0.7; } 

.view-details-btn { grid-column: 3; grid-row: 3; justify-self: end; margin-top: 30px; padding: 10px 24px; background: #000; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } 


#article-box article:nth-child(even) .view-details-btn { grid-column: 1; } 

.animated-svg path { opacity: 0; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; transform-box: fill-box; }
/* --- 추가된 개별 SVG 애니메이션 --- */

/* 1. 빠릅니다 (Bolt): 말풍선(위) -> 선 드로잉 -> 번개 순환 (속도 업) */
.anim-bolt .bubble-body { transform: translateY(-20px); opacity: 0; transition: all 0.4s ease-out; }
.anim-bolt .bubble-line { stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.2s ease; }
.anim-bolt .bolt-path { transform: translate(10px, -10px); opacity: 0; transition: all 0.3s ease; }

/* 순차적 등장 타이밍 */
.aos-init.aos-animate .anim-bolt .bubble-body { transform: translateY(0); opacity: 1; transition-delay: 0.1s; }
.aos-init.aos-animate .anim-bolt .bubble-line:nth-child(2) { stroke-dashoffset: 0; opacity: 1; transition-delay: 0.4s; }
.aos-init.aos-animate .anim-bolt .bubble-line:nth-child(3) { stroke-dashoffset: 0; opacity: 1; transition-delay: 0.55s; }
.aos-init.aos-animate .anim-bolt .bolt-path { transform: translate(0, 0); opacity: 1; transition-delay: 0.8s; }

/* 2. 간단합니다 (Sparkle): 중앙 반짝이 팝업 + 주변 빛 알갱이 확산 */
.anim-sparkle .sparkle-main { transform-origin: center; transform: scale(0); transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.anim-sparkle path[class^="s-"] { opacity: 0; transition: all 0.5s ease; }
.anim-sparkle .s-1 { transform: translate(5px, 5px); }
.anim-sparkle .s-2 { transform: translate(-5px, 5px); }
.anim-sparkle .s-3 { transform: translate(5px, -5px); }
.anim-sparkle .s-4 { transform: translate(-5px, -5px); }

.aos-animate .anim-sparkle .sparkle-main { transform: scale(1); transition-delay: 0.2s; }
.aos-animate .anim-sparkle .s-1, .aos-animate .anim-sparkle .s-2, 
.aos-animate .anim-sparkle .s-3, .aos-animate .anim-sparkle .s-4 { opacity: 1; transform: translate(0, 0); }
.aos-animate .anim-sparkle .s-1 { transition-delay: 0.5s; }
.aos-animate .anim-sparkle .s-2 { transition-delay: 0.6s; }
.aos-animate .anim-sparkle .s-3 { transition-delay: 0.7s; }
.aos-animate .anim-sparkle .s-4 { transition-delay: 0.8s; }

/* 3. 보입니다 (Chart): 막대 차오름 + 선 그래프 드로잉 */
.anim-chart path[class^="bar-"] { transform-origin: bottom; transform: scaleY(0); transition: transform 0.6s ease; transform-box: fill-box; }
.anim-chart .chart-line { stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; transition: stroke-dashoffset 1.5s ease-in-out, opacity 0.3s ease; }
/* 막대 그래프 순차적으로 차오르기 */
.aos-init.aos-animate .anim-chart .bar-4 { transform: scaleY(1); transition-delay: 0.3s; }
.aos-init.aos-animate .anim-chart .bar-3 { transform: scaleY(1); transition-delay: 0.45s; }
.aos-init.aos-animate .anim-chart .bar-2 { transform: scaleY(1); transition-delay: 0.6s; }
.aos-init.aos-animate .anim-chart .bar-1 { transform: scaleY(1); transition-delay: 0.75s; }
.aos-init.aos-animate .anim-chart .chart-line { stroke-dashoffset: 0; opacity: 1; transition-delay: 0.8s; }

/* 4. 무궁무진합니다: 도형 누적 노출 (위 -> 오 -> 왼) - 경계면에서 슬라이딩되는 효과 */
#article-box article svg.anim-infinite-cycle {
  overflow: hidden; /* 가려진 경계 밖에서 나오는 효과를 위해 필수 */
}

.anim-infinite-cycle path:not([stroke="none"]) {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}

.aos-animate .anim-infinite-cycle .shape-triangle {
  animation: emerge-from-top 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 0.4s;
}
.aos-animate .anim-infinite-cycle .shape-circle {
  animation: emerge-from-right 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 0.9s;
}
.aos-animate .anim-infinite-cycle .shape-square {
  animation: emerge-from-left 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 1.4s;
}

@keyframes emerge-from-top {
  0% { opacity: 0; transform: translateY(-40px); }
  15% { opacity: 1; } /* 경계를 넘기 전 빠르게 불투명도를 올려 슬라이딩 강조 */
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes emerge-from-right {
  0% { opacity: 0; transform: translateX(40px); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes emerge-from-left {
  0% { opacity: 0; transform: translateX(-40px); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* 5. 유연합니다 (Tools): 선이 그려지는 듯한 드로잉 효과 */
.anim-tools path:not([stroke="none"]) {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 1.5s ease-in-out, opacity 0.5s ease;
}

.aos-animate .anim-tools path:not([stroke="none"]) {
  stroke-dashoffset: 0;
  opacity: 1;
}
/* 도구 선들 순차적으로 그려지기 */
.aos-animate .anim-tools path:nth-child(2) { transition-delay: 0.3s; }
.aos-animate .anim-tools path:nth-child(3) { transition-delay: 0.4s; }
.aos-animate .anim-tools path:nth-child(4) { transition-delay: 0.5s; }
.aos-animate .anim-tools path:nth-child(5) { transition-delay: 0.6s; }
.aos-animate .anim-tools path:nth-child(6) { transition-delay: 0.7s; }
.aos-animate .anim-tools path:nth-child(7) { transition-delay: 0.8s; }

/* 6. 합리적입니다 (Plug): 대각선 방향 결합 연출 */
/* 겹치지 않도록 이동 거리(10px) 최적화 */
.anim-plug .plug-left { transform: translate(-10px, 10px); opacity: 0; transition: all 0.8s;  }
.anim-plug .plug-right { transform: translate(10px, -10px); opacity: 0; transition: all 0.8s; }
.anim-plug .plug-mid { transform: translate(-10px, 10px); opacity: 0; transition: all 0.8s; }

/* 플러그 결합 (한꺼번에 나타나도록 이전 상태로 복구) */
.aos-init.aos-animate .anim-plug .plug-left,
.aos-init.aos-animate .anim-plug .plug-right,
.aos-init.aos-animate .anim-plug .plug-mid { transform: translate(0, 0); opacity: 1; transition-delay: 0.4s; }

/* 공통: AOS 초기화 시 애니메이션 리셋을 위한 설정 */
.aos-init:not(.aos-animate) .bolt-path,
.aos-init:not(.aos-animate) .bubble-body,
.aos-init:not(.aos-animate) .bubble-line,
.aos-init:not(.aos-animate) .sparkle-main,
.aos-init:not(.aos-animate) path[class^="s-"],
.aos-init:not(.aos-animate) path[class^="bar-"],
.aos-init:not(.aos-animate) .chart-line,
.aos-init:not(.aos-animate) .anim-tools,
.aos-init:not(.aos-animate) .plug-left,
.aos-init:not(.aos-animate) .plug-right,
.aos-init:not(.aos-animate) .plug-mid {
  opacity: 0;
  transform: none;
}

.aos-init:not(.aos-animate) .anim-bolt .bubble-body { transform: translateX(-20px); }
.aos-init:not(.aos-animate) .anim-bolt .bolt-path { transform: translate(10px, -10px); }
.aos-init:not(.aos-animate) .anim-bolt .bubble-line { stroke-dashoffset: 20; }
.aos-init:not(.aos-animate) .anim-sparkle .sparkle-main { transform: scale(0); }
.aos-init:not(.aos-animate) .anim-sparkle .s-1 { transform: translate(5px, 5px); }
.aos-init:not(.aos-animate) .anim-sparkle .s-2 { transform: translate(-5px, 5px); }
.aos-init:not(.aos-animate) .anim-sparkle .s-3 { transform: translate(5px, -5px); }
.aos-init:not(.aos-animate) .anim-sparkle .s-4 { transform: translate(-5px, -5px); }
.aos-init:not(.aos-animate) .anim-chart path[class^="bar-"] { transform: scaleY(0); }
.aos-init:not(.aos-animate) .anim-chart .chart-line { stroke-dashoffset: 200; opacity: 0; }
.aos-init:not(.aos-animate) .anim-tools path:not([stroke="none"]) { stroke-dashoffset: 100; }
.aos-init:not(.aos-animate) .anim-plug .plug-left { transform: translate(-10px, 10px); }
.aos-init:not(.aos-animate) .anim-plug .plug-right { transform: translate(10px, -10px); }
.aos-init:not(.aos-animate) .anim-plug .plug-mid { transform: translate(-10px, 10px); opacity: 0; }

@media (max-width: 768px){
 #fixed-btn-group { bottom: 20px; right: 20px; gap: 10px; } 
 .fixed-btn { width: 52px; height: 52px; } 
 .fixed-btn svg { width: 22px; height: 22px; } 
 #chatbot-container { bottom: 150px; right: 20px; max-width: calc(100vw - 40px); max-height: calc(100vh - 180px); } 
 #contact-modal-container { padding: 30px 20px; } 

 /* 이미지 슬라이더 모달 반응형 수정 */
 #slider-modal .slider-container { max-width: 95%; max-height: 90%; } 
 #slider-modal .slider-nav { width: 44px; height: 44px; z-index: 10; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8)); } 
 #slider-modal .prev { left: 5px; } 
 #slider-modal .next { right: 5px; } 
 #slider-modal .close-slider { top: 10px; right: 10px; z-index: 11; } 
 }