@charset "utf-8";
@import url(./font/font.css);

:root { 
    --primary-color: #4876EB; 
    --secondary-color: #549cff; 
    --accent-color: #fbbf24; 
    --dark-bg: #2A3042; 
    --light-bg: #f0f2f8; 
    --text-dark: #222; 
    --text-medium: #454545; 
    --text-light: #666; 
    --water-blue: #bfdbfe; 
    --clean-blue: #dbeafe; 
} 
body { color: var(--text-dark); } 

/* 스크롤 위치 보정 */
#features,
#system,
#pilot,
#contact {
  scroll-margin-top: 60px;
}

/* 네비게이션 */
nav { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; transition: all 0.3s ease; } 
.nav-container { max-width: 1400px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } 
.logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); text-decoration: none; display: flex; align-items: center; } 
.logo img {height: 36px;}
.nav-links { display: flex; gap: 60px; list-style: none; } 
.nav-links a { font-size: 18px; text-decoration: none; color: var(--text-dark); font-weight: 600; transition: color 0.3s ease; position: relative; } 
.nav-links a:hover { color: var(--primary-color); } 
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; } 
.nav-links a:hover::after { width: 100%; } 

/* 히어로 섹션 */
.hero { min-height: 100vh; background: #fff; display: flex; align-items: center; padding: 5rem 2rem 2rem; position: relative; overflow: hidden; } 
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.3)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>'); opacity: 0.5; } 
.hero::after { content: ''; position: absolute; bottom: -400px; left: -10%; width: 120%; height: 600px; border-top-left-radius: 100% 60%; border-top-right-radius: 100% 60%; background: #fff; box-shadow: 0px -20px 60px rgba(108, 145, 251, 0.1); animation: wave 10s linear infinite; } 
.hero-content { width: 100%; max-width: 1400px; margin: 0 auto 200px; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; justify-content: space-between; position: relative; z-index: 1; } 
.hero-text h1 { font-size: 58px; color: var(--text-dark); margin-bottom: 1.5rem; animation: fadeInUp 0.8s ease; line-height: 1.2;} 
.hero-text h1 > span {color: var(--primary-color);}
.hero-text p { font-size: 20px; color: var(--text-dark); margin-bottom: 2rem; animation: fadeInUp 0.8s ease 0.2s; animation-fill-mode: both; line-height: 1.6; } 

.cta-buttons { display: flex; gap: 1rem; animation: fadeInUp 0.8s ease 0.4s; animation-fill-mode: both; } 
.btn { padding: 1rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block; } 
.btn-primary { background: var(--primary-color); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } 
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } 
.btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } 
.btn-secondary:hover { background: var(--primary-color); color: #fff; } 

.swiper-slide.hero-item {width: 100% !important; padding: 0 20px; display: flex; justify-content: space-between; align-items: center;}
.hero-visual {position: relative; width: 640px; height: 640px; margin-right: 80px; border-radius: 640px; background: linear-gradient(135deg, #F6F8F7 0%, #fdf9fb 15%, #D5E7FF 100%); overflow: hidden;}
.hero-visual img.main-img1 {position: absolute; width: auto; height: 420px; right: -80px; top: 50%; display: block; transform: translateY(-50%);}
.hero-right {position: relative; display: inline-flex;}
.hero-list {position: absolute; bottom: 80px; right: 0; display: flex; gap: 12px; flex-direction: column; width: 300px; }
.hero-list > li {display: flex; align-items: center; justify-content: center; height: 60px; gap: 8px; font-size: 18px; background: #fff; padding: 0 18px; border-radius: 12px; color: var(--text-medium); box-shadow: 0px 4px 20px rgba(42, 45, 54, 0.2); font-weight: 500;}
.hero-list > li span em {font-style: normal; color: var(--primary-color); font-weight: 700; font-size: 18px;}

.slider-controller {position: absolute; left: 20px; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 20px;}
.arrow-area {height: 40px;}

.swiper-pagination {font-weight: 500;}
.swiper-button-play {width: 20px; height: 20px; background: url(../images/ic_play.svg) no-repeat; background-size: contain;}
.swiper-button-play.paused {background: url(../images/ic_pause.svg) no-repeat; background-size: contain;}
.swiper-button-prev {width: 40px; height: 40px; margin-right: 4px; background: url(../images/ic_prev.svg) no-repeat; background-size: contain;}
.swiper-button-next {width: 40px; height: 40px; background: url(../images/ic_prev.svg) no-repeat; transform: rotate(180deg); background-size: contain;}
.swiper-pagination-progressbar {width: 200px; height: 4px; background: #EDEDED; border-radius: 2px; overflow: hidden;}
.swiper-pagination-progressbar-fill {background: var(--primary-color); height: 100%; width: 0%;  transition: width 0.3s ease;}


.hero-image { position: relative; animation: float 3s ease-in-out infinite; } 
.dashboard-preview { width: 100%; height: 400px; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); padding: 1.5rem; position: relative; overflow: hidden; } 
.dashboard-header { height: 40px; background: var(--light-bg); border-radius: 10px; margin-bottom: 1rem; display: flex; align-items: center; padding: 0 1rem; gap: 0.5rem; } 
.dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; } 
.dashboard-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; height: calc(100% - 60px); } 
.metric-card { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); border-radius: 10px; padding: 1.5rem; color: white; position: relative; overflow: hidden; } 
.metric-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); animation: pulse 2s ease-in-out infinite; } 
.metric-card .metric-stat {font-size: 2rem; margin: 4px 0;}
.metric-card p {font-size: 0.8rem;}

/* 기능 섹션 */
.features { padding: 4rem 0 14rem; background: #fff; display: flex; flex-direction: column; align-items: center; } 
.section-header { text-align: center; max-width: 800px; margin: 0 auto 80px; } 
.section-header h2 { font-size: 42px; color: var(--text-dark); margin-bottom: 24px; line-height: 1; font-weight: 700; } 
.section-header p { font-size: 20px; color: var(--text-medium); line-height: 1.4; } 
.section-header span {font-size: 20px; color: var(--primary-color); font-weight: 700; display: block; margin-bottom: 24px;}
.feature-grid { width: 1400px; display: flex; gap: 2rem; flex-wrap: wrap; } 
.feature-card { width: calc((1400px - 6rem) / 4); height: 380px; padding: 36px 32px; border-radius: 20px; box-shadow: 13px 5px 50px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; } 
.feature-card:hover { cursor: pointer; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); background: linear-gradient(135deg, #F2F8FF 0%, #EDF1FE 100%) !important; } 
.feature-card:hover::before { transform: scaleX(1); } 
.feature-card span {color: #fff; font-size: 16px; margin-bottom: 30px; display: block; font-weight: 600; }
.feature-card:hover span {color: var(--primary-color);}
.feature-card h3 { font-size: 28px; margin-bottom: 30px; color: #fff; } 
.feature-card:hover h3 {color: var(--text-dark);}
.feature-card p { color: #fff; line-height: 1.6; font-weight: 400; font-size: 18px; } 
.feature-card:hover p {color: var(--text-dark);}
.feature-grid .feature-card:first-child {background: url(../images/bg_ft02.png) no-repeat center; background-size: cover; }
.feature-grid .feature-card:nth-child(2) {background: url(../images/bg_ft03.png) no-repeat center; background-size: cover; }
.feature-grid .feature-card:nth-child(3) {background: url(../images/bg_ft01.png) no-repeat center; background-size: cover; }
.feature-grid .feature-card:nth-child(4) {background: url(../images/bg_ft04.png) no-repeat center; background-size: cover; }
.feature-grid .feature-card:nth-child(5) {background: url(../images/bg_ft05.png) no-repeat center; background-size: cover; }
.feature-grid .feature-card:nth-child(6) {background: url(../images/bg_ft06.png) no-repeat center; background-size: cover; }

/* 통계 섹션 */
.stats { padding: 5rem 2rem; background: radial-gradient(circle at center,#2A3042 7%,#1A1E2A 67%); color: white; position: relative; } 
/* .stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="water" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M0,50 Q50,30 100,50 T200,50" stroke="rgba(255,255,255,0.1)" fill="none" stroke-width="2"/><path d="M0,100 Q50,80 100,100 T200,100" stroke="rgba(255,255,255,0.1)" fill="none" stroke-width="2"/><path d="M0,150 Q50,130 100,150 T200,150" stroke="rgba(255,255,255,0.1)" fill="none" stroke-width="2"/></pattern></defs><rect width="100%" height="100%" fill="url(%23water)"/></svg>'); animation: flow 20s linear infinite; }  */
.stats-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; text-align: center; } 
.stat-item { animation: fadeInUp 0.8s ease; position: relative; } 
.stat-item::after {width: 1px; height: 80%; background: #464a5b; position: absolute; display: block; content: ''; right: -1.5rem; top: 10%;}
.stats-grid .stat-item:last-child:after {display: none;}
.stat-number { font-size: 3rem; font-weight: bold; margin-bottom: 0.5rem; display: block; color: var(--secondary-color); } 
.stat-label { font-size: 1.1rem; opacity: 0.9; } 

/* 혜택 섹션 */
.benefits { padding: 120px 40px 80px; background: white; } 
.benefit-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 3rem; align-items: center; } 
.benefit-content h3 { font-size: 2rem; margin-bottom: 1rem; color: var(--text-dark); } 
.benefit-list { list-style: none; } 
.benefit-list li { padding: 1rem 0; display: flex; align-items: start; gap: 1rem; } 
.benefit-list li::before { content: '✓'; background: var(--primary-color); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; box-shadow: 0 2px 8px rgb(14 76 233 / 30%); } 
.benefit-image { position: relative; height: 400px; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2); } 
.benefit-image::before { content: '💧'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8rem; opacity: 0.3; animation: float 3s ease-in-out infinite; } 

/* 시스템 구성 섹션 */
.system-architecture { padding: 5rem 2rem; background: white; } 
.system-container { max-width: 1200px; margin: 0 auto; } 
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } 
.system-card { display: flex; flex-direction: column; background: var(--light-bg); border: 1px solid #dadce3; border-radius: 20px; padding: 2rem; position: relative; overflow: hidden; } 
.system-img.system01 img, .system-img.system02 img {width: calc((100% - 2rem) / 3);}
.system-card .system-img { width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: center; padding: 1.5rem; border-radius: 15px; background: #fff; margin: 0 auto 2rem;}
.img-wrapper {position: relative; width: 100%; aspect-ratio: 5 / 3; margin: 0 auto; overflow: hidden;}
.img-wrapper > div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out;}
.img-wrapper > div.show {opacity: 1; z-index: 1;}
.img-wrapper img {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0px; border: 1px solid #f3f3f3;}

.system-icon { width: 80px; height: 80px; background: var(--primary-color); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0px 4px 20px rgba(42, 45, 54, 0.2); } 
.system-card h3 { text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--text-dark); } 
.system-card h4 {font-size: 18px; margin-bottom: 1rem;}
.system-features ul { list-style: none; padding: 0; } 
.system-features li { font-size: 16px; font-weight: 500; padding: 8px 0 8px 18px; position: relative; color: var(--text-medium); } 
.system-features li::before { content: '•'; position: absolute; left: 0; color: #adadad; font-weight: bold; } 
.app-screens { display: flex; gap: 1rem; margin-top: 2rem; justify-content: center; } 
.screen-item { display: flex; flex-direction: column; width: 50%; text-align: center; }
.screen-item > p, .device-item > p {margin-top: 10px; font-weight: 500; color: var(--text-medium);} 
.screen-mock { width: 100%; flex: 1; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; margin-bottom: 0.5rem; } 
.screen-header { background: var(--primary-color); color: white; padding: 0.5rem; font-size:15px; font-weight: 500; } 
.screen-content { padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 2.5rem);} 
.form-item { margin-bottom: 1rem; flex: 1; display: flex; flex-direction: column; justify-content: center;} 
.form-item label { display: block; font-size: 12px; color: var(--text-medium); margin-bottom: 0.3rem; } 
.app-input { width: 100%; padding: 0.4rem; border: 1px solid #ddd; border-radius: 5px; font-size: 0.7rem; margin-bottom: 0.5rem; } 
.app-button { width: 100%; padding: 0.5rem; border: none; border-radius: 8px; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; } 
.app-button.primary { background: var(--primary-color); color: white; } 
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } 
.photo-box { aspect-ratio: 1; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } 
.dashboard-preview-small { margin-top: 2rem; background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; } 
.dash-header { background: #f8f9fa; padding: 1rem; border-bottom: 1px solid #eee; font-weight: bold; color: var(--text-dark); } 
.dash-content { padding: 1.5rem; } 
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } 
.stat-box { text-align: center; padding: 1rem; background: var(--light-bg); border-radius: 10px; } 
.stat-title { display: block; font-size: 0.9rem; color: var(--text-light);} 
.stat-value { display: block; font-size: 1rem; font-weight: bold; color: var(--primary-color); } 
.map-preview { height: 100px; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border-radius: 10px; position: relative; } 
.map-point { position: absolute; font-size: 18px; } 
.device-showcase { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: center; } 
.device-item { flex: 1; text-align: center; align-self: stretch; height: fit-content; background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } 
.device-box { width: 120px; height: 100px; background: #333; border-radius: 10px; padding: 1rem; color: white; margin-bottom: 0.5rem; margin: 0 auto;} 
.device-screen { background: #000; color: #34ff87; padding: 0.5rem; border-radius: 5px; font-size: 16px; text-align: center; margin-bottom: 0.5rem; } 
.device-label { font-size: 0.8rem; text-align: center; } 
.sensor-img { width: 60px; height: 100px; display: flex; align-items: center; margin: 0 auto 0.5rem; position: relative; } 
.sensor-body { width: 40px; height: 60px; background: #ddd; border-radius: 10px; margin: 0 auto; position: relative; } 
.sensor-probe { width: 20px; height: 40px; background: #999; border-radius: 0 0 10px 10px; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); } 

.dashboard-wrap {width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-top: 2rem;}
.dashboard-list {display: flex; flex-wrap: wrap; gap: 10px; padding: 1.5rem;}
.dashboard-list li {width: calc((100% - 20px) / 3); border-radius: 10px; background-color: var(--light-bg); color: var(--text-medium); font-size: 1rem; font-weight: 500; line-height: 1.4; padding: 1rem; text-align: center;}
.dashboard-list li:first-child {width: 100%; background: var(--primary-color); color: #fff;}



/* 시범 서비스 섹션 */
.pilot-service { padding: 5rem 2rem; background: var(--light-bg); position: relative; } 
.pilot-container { max-width: 1200px; margin: 0 auto; } 
.pilot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-bottom: 3rem; } 
.pilot-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } 
.pilot-card:hover { transform: translateY(-5px); } 
.pilot-header { background: var(--primary-color); color: white; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; } 
.pilot-header h3 { margin: 0; font-size: 1.5rem; } 
.pilot-card h4 {font-size: 18px;}
.pilot-badge { cursor: pointer; background: rgba(255, 255, 255, 0.2) url(../images/ic_arrow.svg) no-repeat calc(100% - 14px) center; padding: 8px 34px 8px 16px; border-radius: 20px; font-size: 0.9rem; backdrop-filter: blur(10px); transition: all .3s; } 
.pilot-badge:hover {background: #fff url(../images/ic_arrow_hover.svg) no-repeat calc(100% - 16px) center; color: var(--primary-color);}

.pilot-content { padding: 2rem; } 
.pilot-link {display: flex; justify-content: center; margin-top: 2rem;}
.pilot-link .btn-primary {box-shadow: none; border: 2px solid var(--primary-color);}
.pilot-link .btn-primary:hover {transform: none; border: 2px solid var(--primary-color); background: #fff; color: var(--primary-color);}
.pilot-info { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 2rem; } 
.info-item { text-align: center; padding: 1rem; background: var(--light-bg); border-radius: 10px; } 
.info-label { display: block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.5rem; } 
.info-value { display: block; font-size: 18px; font-weight: bold; color: var(--primary-color); } 
.pilot-results { margin-bottom: 2rem; } 
.pilot-results h4 { color: var(--text-dark); margin-bottom: 1rem; } 
.pilot-results ul { list-style: none; padding: 0; } 
.pilot-results li { padding: 0.8rem 0; border-bottom: 1px solid #eee; color: var(--text-light); } 
.pilot-results li:last-child { border-bottom: none; } 
.pilot-results strong { color: var(--primary-color); font-weight: 600; } 
.pilot-feedback { background: var(--light-bg); padding: 1.5rem; border-radius: 10px; position: relative; } 
.pilot-feedback p { font-style: italic; color: var(--text-dark); margin-bottom: 0.5rem; } 
.feedback-author { display: block; text-align: right; color: var(--text-light); font-size: 0.9rem; } 
.pilot-map { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } 
.map-container { text-align: center; } 
.map-title { font-size: 18px; font-weight: bold; color: var(--text-dark); margin-bottom: 2rem; } 
.map-visual { position: relative; height: 300px; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border-radius: 15px; margin-bottom: 2rem; display: flex; justify-content: space-around; align-items: center; padding: 2rem; } 
.region { background: white; padding: 2rem 3rem; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); position: relative; transition: transform 0.3s ease; } 
.region:hover { transform: scale(1.05); } 
.region-name { display: block; font-size: 1.5rem; font-weight: bold; color: var(--text-dark); margin-bottom: 0.5rem; } 
.region-stat { display: block; font-size: 1.1rem; color: var(--primary-color); font-weight: 600; } 
.map-legend { display: flex; justify-content: center; gap: 2rem; } 
.legend-item { display: flex; align-items: center; gap: 0.5rem; } 
.legend-dot { width: 12px; height: 12px; border-radius: 50%; } 
.legend-dot.active { background: var(--primary-color); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2); } 
.legend-dot.pending { background: #cbd5e1; } 
.system-highlight { margin-top: 1rem; padding-top: 1rem; } 
.system-highlight h4 { color: var(--text-dark); margin-bottom: 1rem; font-size: 1.1rem; } 
.system-highlight ul { list-style: none; padding: 0; } 
.system-highlight li { padding: 0.5rem 0; color: var(--text-light); position: relative; padding-left: 1.5rem; } 
.system-highlight li::before { content: '✓'; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; } 

/* CTA 섹션 */
.cta-section { padding: 5rem 2rem; background: url(../images/bg_cta.png) no-repeat; background-size: cover; text-align: center; color: white; margin: 120px; border-radius: 30px;} 
.cta-section h2 { font-size: 36px; margin-bottom: 1rem; } 
.cta-section p { font-size: 18px; margin-bottom: 2rem; opacity: 0.9; } 
.cta-section .cta-buttons {justify-content: center;}
.cta-section .btn-primary { background: white; color: var(--primary-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } 
.cta-section .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } 
.cta-section .btn-secondary { background: transparent; color: white; border: 2px solid white; } 
.cta-section .btn-secondary:hover { background: white; color: var(--primary-color); } 

/* 푸터 */
footer { background: var(--dark-bg); color: white; padding: 3rem 2rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } 
.footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } 
.footer-section h4 { margin-bottom: 1rem; } 
.footer-section p, .footer-section ul { opacity: 0.8; line-height: 1.8; } 
.footer-section ul { list-style: none; } 
.footer-section ul li { margin-bottom: 0.5rem; } 
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0.6; } 

/* 애니메이션 */
@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes float { 0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-20px); } 
}

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 
    50% { transform: scale(1.1); opacity: 0.3; } 
}

@keyframes wave { 
    0% { transform: translateX(0) translateY(0); } 
    50% { transform: translateX(-50px) translateY(20px); } 
    100% { transform: translateX(0) translateY(0); } 
}

@keyframes flow { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-200px); } 
}

/* 반응형 */
@media (max-width: 1400px){
    .hero-text h1 {font-size: 48px;}
    .hero-text p {font-size: 18px; line-height: 1.4;}
    .nav-container {padding: 16px;}
    .hero-text {display: flex; align-items: center; flex-direction: column; text-align: center;}
    .hero-content {grid-template-columns: 1fr;}
    .hero-item {flex-direction: column; gap: 40px;}
    .slider-controller {display: none;}
    .feature-grid {width: calc(720px + 2rem);}
    .feature-card {width: 360px;}
    .hero-visual {width: 480px; height: 480px;}
    .hero-visual img.main-img1 {height: 340px; right: -120px;}
}
@media (max-width: 1080px){
    .logo img {height: 32px;}
    .nav-links { gap: 2rem; } 
    .hero-list {bottom: 20px;}
    .cta-section {margin: 40px 32px;}
    .stats-grid {grid-template-columns: 1fr 1fr; max-width: 640px;}
    .stat-item:nth-child(2):after {display: none;}
    .system-grid { grid-template-columns: 1fr; } 
}
@media (max-width: 768px){
    .logo {padding: 0;}
    .logo img {height: 24px;}
    .section-header {padding: 0 80px; margin: 0 auto 40px;}
    .section-header h2 {font-size: 36px; margin-bottom: 16px;}
    .section-header p {font-size: 18px;}
    .section-header span {font-size: 16px; margin-bottom: 20px;}
    .nav-links { display: none; } 
    .hero {padding: 8rem 0 2rem;}
    .hero-content { text-align: center; margin-bottom: 60px; } 
    .hero-text h1 { font-size: 2.5rem; } 
    .hero-image { margin-top: 2rem; } 

    .features {padding: 2rem 0 8rem;}
    .pilot-info { grid-template-columns: 1fr; } 
    .app-screens { flex-direction: column; align-items: center; } 
    .device-showcase { flex-direction: column; align-items: center; } 
    .feature-grid {width: 360px; padding: 0 20px; gap: 20px;}
    .feature-card h3 {font-size: 24px; margin-bottom: 20px;}
    .feature-card span {font-size: 14px; margin-bottom: 16px;}
    .feature-card p {font-size: 16px;}
    .swiper-slide.hero-item {padding: 0 0 100px;}
    .hero-visual {margin-right: 0;}
    .hero-list {width: 260px; bottom: -60px; right: 50px; }
    .hero-list > li {font-size: 15px; height: 48px;}
    .hero-list > li img {max-height: 30px;}
    .hero-list > li span em {font-size: 16px;}

    .cta-section h2 {font-size: 32px; line-height: 1.2;}
    .btn {padding: 12px 20px; line-height: 1.2;}
    .hero::after {display: none;}
    .feature-card {height: 240px;}
    .stat-number {font-size: 2rem;}
    .system-card {padding: 2rem 1.4rem;}
} 

@media (max-width: 640px){

    .hero-visual {width: 360px; height: 360px;}
    .hero-visual img.main-img1 {height: 280px; right: -60px;}
    .pilot-grid {grid-template-columns: 1fr;}
}

@media (max-width: 480px){
    .section-header {padding: 0 20px;}
    .pilot-service .section-header {padding: 0;}
    .hero-visual {width: 300px; height: 300px;}
    .hero-list {right: 20px;}
}