@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: #ffc000; 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: #ffc000; 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: #ffc000; } 

#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: #ffc000; 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; } 

@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; } 
 }