@charset "utf-8";

/* Reset CSS */
* {margin:0; padding:0; box-sizing:border-box;}
html, body {width:100%; height:100%; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;}
ul, ol, li {list-style:none;}
a {text-decoration:none; color:inherit;}
img {border:0; vertical-align:middle; max-width:100%;}
button {border:0; background:none; cursor:pointer;}
input, select, textarea {font-family:inherit;}

/* Layout */
.wrap {min-width:320px; overflow:hidden;}

/* Header */
.header {position:relative; background:#fff; border-bottom:1px solid #e5e5e5;}
.header_top {background:#f8f8f8; border-bottom:1px solid #e5e5e5;}
.header_top .inner {max-width:1200px; margin:0 auto; padding:10px 20px; text-align:right;}
.header_top a {font-size:13px; color:#666; margin-left:20px;}
.header_top a:hover {color:#0066cc;}

.header_main {position:relative;}
.header_main .inner {max-width:1200px; margin:0 auto; padding:20px; display:flex; align-items:center; justify-content:space-between;}
.logo {display:flex; align-items:center;}
.logo img {height:50px;}
.logo h1 {font-size:24px; color:#003366; margin-left:15px; font-weight:700;}

/* Navigation */
.nav {display:flex; gap:50px;}
.nav > li {position:relative;}
.nav > li > a {display:block; padding:10px 0; font-size:18px; color:#333; font-weight:500; transition:all 0.3s;}
.nav > li:hover > a, .nav > li.active > a {color:#0066cc;}

/* Mobile Menu */
.mobile_menu_btn {display:none; width:30px; height:30px; position:relative;}
.mobile_menu_btn span {position:absolute; left:0; width:100%; height:3px; background:#333; transition:all 0.3s;}
.mobile_menu_btn span:nth-child(1) {top:0;}
.mobile_menu_btn span:nth-child(2) {top:50%; transform:translateY(-50%);}
.mobile_menu_btn span:nth-child(3) {bottom:0;}

/* Main Visual */
.main_visual {position:relative; background:#f8f9fa; padding:60px 0;}
.main_visual_container {max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:30px; align-items:stretch; height:400px;}

/* 좌측 이미지 영역 */
.visual_left {flex:1; position:relative; overflow:hidden; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); background:#f0f0f0; display:flex; flex-direction:column; justify-content:space-between;}
.visual_left img {width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0;}
.visual_left_buttons {position:relative; z-index:1; padding:30px; text-align:center; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);}

/* 우측 동영상 영역 */
.visual_right {flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:20px;}
.video_wrapper {flex:1; background:#000; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1);}
.video_wrapper video {width:100%; height:100%; object-fit:cover;}
.video_buttons {text-align:center;}

/* 비주얼 버튼 */
.btn_visual {display:inline-block; padding:15px 40px; background:#0066cc; color:#fff; font-size:18px; font-weight:500; border-radius:5px; transition:all 0.3s;}
.btn_visual:hover {background:#0052a3; transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,102,204,0.3);}
.btn_visual_secondary {display:inline-block; padding:15px 40px; background:#666; color:#fff; font-size:18px; font-weight:500; border-radius:5px; transition:all 0.3s;}
.btn_visual_secondary:hover {background:#555; transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.3);}

/* Button */
.btn {display:inline-block; padding:12px 30px; border-radius:25px; font-size:16px; font-weight:500; transition:all 0.3s;}
.btn_primary {background:#ff9800; color:#fff;}
.btn_primary:hover {background:#f57c00; transform:translateY(-2px);}
.btn_secondary {background:#2196f3; color:#fff;}
.btn_secondary:hover {background:#1976d2; transform:translateY(-2px);}

/* Rolling Banner */
.rolling_banner {padding:40px 0; background:#fff; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
.rolling_banner .inner {max-width:1200px; margin:0 auto; overflow:hidden;}
.banner_container {position:relative;}
.banner_track {display:flex; animation:scroll 40s linear infinite;}
.banner_item {flex:0 0 auto; margin-right:30px; display:flex; align-items:center;}
.banner_item img {height:60px; width:auto; display:block; opacity:0.8; transition:opacity 0.3s;}
.banner_item img:hover {opacity:1;}

@keyframes scroll {
    0% {transform:translateX(0);}
    100% {transform:translateX(-50%);}  
}

/* Main Content */
.main_content {padding:60px 0; min-height:500px;}
.main_content .inner {max-width:1200px; margin:0 auto; padding:0 20px;}

/* Sub Visual */
.sub_visual {position:relative; height:300px; background-size:cover; background-position:center; background-repeat:no-repeat; display:flex; align-items:center;}
.sub_visual:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.sub_visual .inner {max-width:1200px; margin:0 auto; padding:0 20px; width:100%; position:relative; z-index:1;}
.sub_visual .sub_title {font-size:42px; color:#fff; margin-bottom:20px; font-weight:700;}
.sub_visual .breadcrumb {font-size:16px; color:#fff;}
.sub_visual .breadcrumb a {color:#fff; transition:all 0.3s;}
.sub_visual .breadcrumb a:hover {color:#ff9800;}
.sub_visual .breadcrumb span {margin:0 10px; color:rgba(255,255,255,0.7);}
.section_title {font-size:32px; color:#333; text-align:center; margin-bottom:50px; position:relative;}
.section_title:after {content:''; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); width:50px; height:3px; background:#0066cc;}

/* Sub Content - 최소 높이 설정 */
.sub_content {padding:80px 0; min-height:600px;}
.sub_content .inner {max-width:1200px; margin:0 auto; padding:0 20px;}

/* News Section */
.news_section {margin-bottom:60px;}
.news_list {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px;}
.news_item {background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.1); transition:all 0.3s;}
.news_item:hover {transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,0.15);}
.news_item .image {width:100%; height:200px; overflow:hidden;}
.news_item .image img {width:100%; height:100%; object-fit:cover; transition:all 0.3s;}
.news_item:hover .image img {transform:scale(1.1);}
.news_item .content {padding:20px;}
.news_item .date {font-size:14px; color:#999; margin-bottom:10px;}
.news_item h3 {font-size:18px; color:#333; margin-bottom:10px; line-height:1.4;}
.news_item p {font-size:14px; color:#666; line-height:1.6;}
.press_link {color:#0066cc; font-size:14px; margin-top:10px; display:inline-block;}

/* Footer */
.footer {background:#666; color:#fff; padding:20px 0;}
.footer .inner {max-width:1200px; margin:0 auto; padding:0 20px;}
.footer_content {display:flex; justify-content:space-between; align-items:center; padding:15px 0;}
.footer_info p {font-size:13px; line-height:1.6; color:#fff; margin-bottom:3px;}
.footer_info p i {color:#999; margin-right:6px; font-size:11px;}
.footer_logo img {height:40px; opacity:0.8;}
.footer_bottom {background:#5a5a5a; padding:10px 0; text-align:center;}
.footer_bottom p {font-size:12px; color:#aaa;}

/* Responsive */
@media (max-width: 768px) {
    .header_main .inner {padding:15px;}
    .logo h1 {font-size:20px;}
    .nav {display:none;}
    .mobile_menu_btn {display:block;}
    
    .main_visual .inner {flex-direction:column; padding:40px 20px;}
    .main_visual .text_area h2 {font-size:28px;}
    .main_visual .text_area p {font-size:16px;}
    
    /* 메인 비주얼 반응형 */
    .main_visual_container {flex-direction:column; height:auto; gap:20px;}
    .visual_left, .visual_right {width:100%; height:300px;}
    .visual_left_buttons {padding:20px;}
    .btn_visual, .btn_visual_secondary {font-size:16px; padding:12px 30px;}
    
    /* 롤링 배너 반응형 */
    .banner_item img {height:40px;}
    
    .section_title {font-size:24px;}
    .news_list {grid-template-columns:1fr;}
    
    .footer_content {flex-direction:column-reverse; gap:15px; text-align:center;}
    .footer_info p {font-size:12px;}
}

/* Mobile Navigation */
.mobile_nav {position:fixed; top:0; right:-100%; width:80%; max-width:300px; height:100vh; background:#fff; box-shadow:-5px 0 15px rgba(0,0,0,0.1); transition:all 0.3s; z-index:1000;}
.mobile_nav.active {right:0;}
.mobile_nav_header {padding:20px; border-bottom:1px solid #e5e5e5;}
.mobile_nav_close {float:right; font-size:24px; cursor:pointer;}
.mobile_nav ul {padding:20px;}
.mobile_nav li {margin-bottom:15px;}
.mobile_nav a {display:block; padding:10px; font-size:16px; color:#333; border-bottom:1px solid #f0f0f0;}
.mobile_nav a:hover {color:#0066cc; background:#f8f8f8;}

/* Page Transition */
.page-enter-active, .page-leave-active {transition:opacity 0.3s;}
.page-enter-from, .page-leave-to {opacity:0;}