@charset "utf-8"; 
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; } 

/*reset*/
html,body, #top_layout,#gnb_lyaout,#svisual_layout,#body_layout,#lnb_layout,#foot_layout, #lp_layout div,#lp_layout p,#lp_layout strong,#lp_layout h1,#lp_layout h2,#lp_layout h3,#lp_layout h4,#lp_layout h5,#lp_layout h6,#lp_layout span,#lp_layout em,#lp_layout ul,#lp_layout li,#lp_layout dl,#lp_layout dt,#lp_layout dd,#lp_layout ol,#lp_layout table,#lp_layout input,#lp_layout button,#lp_layout select,#lp_layout address,#lp_layout header,#lp_layout nav,#lp_layout nav,#lp_layout a,#lp_layout label, #op_layout div,#op_layout p,#op_layout strong,#op_layout h1,#op_layout h2,#op_layout h3,#op_layout h4,#op_layout h5,#op_layout h6,#op_layout span,#op_layout em,#op_layout ul,#op_layout li,#op_layout dl,#op_layout dt,#op_layout dd,#op_layout ol,#op_layout table,#op_layout input,#op_layout button,#op_layout select,#op_layout address,#op_layout header,#op_layout nav,#op_layout a,#op_layout label, #top_layout div,#top_layout p,#top_layout strong,#top_layout h1,#top_layout h2,#top_layout h3,#top_layout h4,#top_layout h5,#top_layout h6,#top_layout span,#top_layout em,#top_layout ul,#top_layout li,#top_layout dl,#top_layout dt,#top_layout dd,#top_layout ol,#top_layout table,#top_layout input,#top_layout button,#top_layout select,#top_layout address,#top_layout header,#top_layout nav,#top_layout a,#top_layout label, #lnb_layout div,#lnb_layout p,#lnb_layout strong,#lnb_layout h1,#lnb_layout h2,#lnb_layout h3,#lnb_layout h4,#lnb_layout h5,#lnb_layout h6,#lnb_layout span,#lnb_layout em,#lnb_layout ul,#lnb_layout li,#lnb_layout dl,#lnb_layout dt,#lnb_layout dd,#lnb_layout ol,#lnb_layout table,#lnb_layout input,#lnb_layout button,#lnb_layout select,#lnb_layout address,#lnb_layout header,#lnb_layout nav,#lnb_layout a,#lnb_layout label, #body_layout .body_wrap, #body_layout .body_wrap .contents_wrap, #body_layout .body_wrap .contents_wrap .title_wrap, #body_layout .body_wrap .contents_wrap .title_wrap div, #body_layout .body_wrap .contents_wrap .title_wrap p, #body_layout .body_wrap .contents_wrap .title_wrap strong, #body_layout .body_wrap .contents_wrap .title_wrap h1, #body_layout .body_wrap .contents_wrap .title_wrap h2, #body_layout .body_wrap .contents_wrap .title_wrap h3, #body_layout .body_wrap .contents_wrap .title_wrap h4, #body_layout .body_wrap .contents_wrap .title_wrap h5, #body_layout .body_wrap .contents_wrap .title_wrap h6, #body_layout .body_wrap .contents_wrap .title_wrap span, #body_layout .body_wrap .contents_wrap .title_wrap em, #body_layout .body_wrap .contents_wrap .title_wrap ul, #body_layout .body_wrap .contents_wrap .title_wrap ol, #body_layout .body_wrap .contents_wrap .title_wrap li, #body_layout .body_wrap .contents_wrap .title_wrap dl, #body_layout .body_wrap .contents_wrap .title_wrap dt, #body_layout .body_wrap .contents_wrap .title_wrap dd, #body_layout .body_wrap .contents_wrap .title_wrap table, #body_layout .body_wrap .contents_wrap .title_wrap tr, #body_layout .body_wrap .contents_wrap .title_wrap td, #body_layout .body_wrap .contents_wrap .title_wrap input, #body_layout .body_wrap .contents_wrap .title_wrap button, #body_layout .body_wrap .contents_wrap .title_wrap select, #body_layout .body_wrap .contents_wrap .title_wrap address, #body_layout .body_wrap .contents_wrap .title_wrap header, #body_layout .body_wrap .contents_wrap .title_wrap nav, #body_layout .body_wrap .contents_wrap .title_wrap a, #body_layout .body_wrap .contents_wrap .title_wrap label, #foot_layout div,#foot_layout p,#foot_layout strong,#foot_layout h1,#foot_layout h2,#foot_layout h3,#foot_layout h4,#foot_layout h5,#foot_layout h6,#foot_layout span,#foot_layout em,#foot_layout ul,#foot_layout li,#foot_layout dl,#foot_layout dt,#foot_layout dd,#foot_layout ol,#foot_layout table,#foot_layout input,#foot_layout button,#foot_layout select,#foot_layout address,#foot_layout header,#foot_layout nav,#foot_layout a,#foot_layout label {
	font-family: 'nsk_m','nsr_m','Dotum','arial','sans-serif'; margin: 0; padding: 0; border: 0; vertical-align: top; background: transparent; word-break: break-all;}
body {/*font-size: 14px; font-weight: 300; letter-spacing: -1.0px;*/}
a {text-decoration: inherit; color: inherit; word-break: break-all;}
a:visited {}
a:active {}
a:focus,button:focus {outline: 1px dotted}
caption, .skip {overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -10000px;}
hr {width: 100%; height: 1px; background-color: #cdcdcd; margin: 20px 0px; border: 0px;}
hr.no {background-color: transparent; padding: 0px; margin: 0px;}
#skipnavi {position: absolute; top: -1px; left: 0; background-color: #333; z-index: 999999}
#skipnavi a {position: absolute; top: 0; left: 0; padding: 10px 25px; margin-top: -100px; text-align: center; line-height: 1; white-space: nowrap; background: #000}
#skipnavi a:link {color: #333;}
#skipnavi a:focus {margin-top: 0; text-decoration: underline; color: #fff}
.ellipsis {white-space: nowrap; overflow: hidden;}
.ellipsis.multiline {white-space: normal;}



		* {margin: 0;padding: 0;box-sizing: border-box;}
		html, body {width: 100%;height: 100%;overflow-x: hidden;}
		body {font-family: 'Pretendard', sans-serif;background: #2c2c2c;}
		a:link {text-decoration:none;}
		a:visited {text-decoration:none;} 
		a:hover{text-decoration:none;} 
		a:active {text-decoration:none;}

		/* GNB 스타일 */
		.gnb {position: fixed;top: 0;left: 0;right: 0;height: 90px;background: rgba(0,0,0,0.5); display: flex;align-items: center;justify-content: space-between;padding: 0 20px;z-index: 1000;box-shadow: 0 2px 20px rgba(0,0,0,0.3);}
		.logo {color: white;font-size: 1.2rem;font-weight: bold;}
		.nav-menu {margin-left: auto;display: flex;gap: 2rem;}
		.nav-item {color: white;text-decoration: none;padding: 0.5rem 1rem;border-radius: 25px;transition: all 0.3s ease;background: rgba(255,255,255,0.1);}
		.nav-item:hover {background: rgba(255,255,255,0.2);transform: translateY(-2px);}
		
		/* 햄버거 메뉴 */
		.hamburger {display: none;flex-direction: column;cursor: pointer;padding: 5px;}
		.hamburger span {width: 25px;height: 3px;background: white;margin: 3px 0;transition: 0.3s;border-radius: 2px;}
		.hamburger.active span:nth-child(1) {transform: rotate(-45deg) translate(-5px, 6px);}
		.hamburger.active span:nth-child(2) {opacity: 0;}
		.hamburger.active span:nth-child(3) {transform: rotate(45deg) translate(-5px, -6px);}
		
		/* 모바일 메뉴 */
		.mobile-menu {display:none;position: fixed;top: 90px;left: 0;right: 0;background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #9333ea 100%);transform: translateY(-100%);transition: transform 0.3s ease;z-index: 999;box-shadow: 0 5px 20px rgba(0,0,0,0.3);}
		.mobile-menu.active {display:block;transform: translateY(0);}
		.mobile-menu-item {display: block;padding: 20px;color: white;text-decoration: none;border-bottom: 1px solid rgba(255,255,255,0.1);font-weight: 500;transition: background 0.3s ease; font-size:1.1rem;}
		.mobile-menu-item:hover {background: rgba(255,255,255,0.1);}

		/* 메인 컨테이너 */
		.main-container {position: relative;height: 100vh;overflow: hidden;}

		/* 비디오 배경 */
		.video-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
		.video-background video {width: 100%;height: 100%;object-fit: cover;}
		/*.video-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(168,85,247,0.3) 100%);z-index: 2;}*/

		/* 컨텐츠 토글 버튼 */
		.content-toggle {position: fixed;bottom: 51vh;right: 30px;padding:15px 25px;/*width: 150px;height: 40px;*/background: linear-gradient(135deg, #a855f7, #7c3aed);border: none;border-radius: 25px;color: white;font-size: 1.1rem;cursor: pointer;z-index: 1001;box-shadow: 0 4px 20px rgba(168,85,247,0.4);transition: all 0.3s ease;}
		.content-toggle:hover {transform: scale(1.1);box-shadow: 0 6px 25px rgba(168,85,247,0.6);}
		.content-toggle.active {/*background: linear-gradient(135deg, #ef4444, #dc2626);*/transform: rotate(360deg); bottom:125px;}

		/* 우측 상단 이벤트 알림 */
		.top-event-notice {position: fixed;top: 110px;right: 30px;background: linear-gradient(135deg, #f59e0b, #eab308);color: white;padding: 1rem 1.5rem;border-radius: 50px;font-weight: bold;z-index: 100;box-shadow: 0 4px 15px rgba(245,158,11,0.4);animation: float 3s ease-in-out infinite;font-size: 1rem;}

		@keyframes float {
			0%, 100% { transform: translateY(0px); }
			50% { transform: translateY(-10px); }
		}
		.emergency-notice {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);background: linear-gradient(90deg, #ef4444, #f59e0b);          color: white;padding: 0.8rem 2rem;border-radius: 25px;font-weight: bold;z-index: 100;animation: pulse 2s infinite;box-shadow: 0 4px 15px rgba(239,68,68,0.4);}

		@keyframes pulse {
			0%, 100% { transform: translateX(-50%) scale(1); }
			50% { transform: translateX(-50%) scale(1.05); }
		}

		/* 컨텐츠 레이어 */
		.content-layer {position: fixed;bottom: 0;left: 0;right: 0;height: 50vh;background: #2a2a2a;backdrop-filter: blur(10px);/*border-radius: 30px 30px 0 0;*/z-index: 998;transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);overflow-y: auto;box-shadow: 0 -10px 30px rgba(0,0,0,0.3);}
		.content-layer.hidden {bottom: -39%;}
		.content-header {padding: 1rem 2rem;border-bottom: 1px solid rgba(168,85,247,0.2);background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);/*border-radius: 30px 30px 0 0;*/position: relative;overflow: hidden;}
		.content-header::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #a855f7, #7c3aed, #a855f7);animation: shimmer 2s ease-in-out infinite;}

		@keyframes shimmer {
			0%, 100% { opacity: 0.7; }
			50% { opacity: 1; }
		}

		.content-header h2 {font-family:'yg-jalnan', sans-serif;font-size: 1.8rem;font-weight: 800;background: linear-gradient(135deg, #1f2937 0%, #4338ca 50%, #7c3aed 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-align: center;margin-bottom: 0.5rem;letter-spacing: -0.5px;}
		.content-header .period {text-align: center;color: #6b7280;font-size: 1.2rem;font-weight: 500;margin-top: 0;position: relative;display: inline-block;width: 100%;}
		.content-header .period span{background:#a855f7; color:#fff; padding:8px 20px; border-radius:25px; margin-right:10px; font-size:1.1rem;}
		/*.content-header .period::before,
		.content-header .period::after {content: '✨';position: absolute;top: 50%;transform: translateY(-50%);color: #a855f7;font-size: 1.2rem;animation: twinkle 1.5s ease-in-out infinite alternate;}
		.content-header .period::before {left: calc(50% - 120px);}
		.content-header .period::after {right: calc(50% - 120px);}*/

		@keyframes twinkle {
			0% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
			100% { opacity: 1; transform: translateY(-50%) scale(1.2); }
		}

		.header-decoration {display: flex;justify-content: center;align-items: center;gap: 1rem;margin-top: 0.7rem;}
		.decoration-item {width: 8px;height: 8px;border-radius: 50%;background: linear-gradient(45deg, #a855f7, #7c3aed);animation: bounce 1.5s ease-in-out infinite;}
		.decoration-item:nth-child(2) {animation-delay: 0.3s;transform: scale(1.3);}
		.decoration-item:nth-child(3) {animation-delay: 0.6s;}

		@keyframes bounce {
			0%, 100% { transform: translateY(0) scale(1); }
			50% { transform: translateY(-5px) scale(1.1); }
		}

		.content-grid {display: grid;/*grid-template-columns: repeat(3, 1fr);*/grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;padding: 2rem;max-width: 1400px;margin: 0 auto;}
		.content-section {background: linear-gradient(135deg, #374151 0%, #4b5563 100%);padding: 2rem;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
		.content-section:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0,0,0,0.15);}
		.section-title {font-family:'yg-jalnan', sans-serif;font-size: 1.4rem;font-weight: bold;color: #fff;margin-bottom: 1rem;text-align: center;padding-bottom: 0.5rem;border-bottom: 2px solid #a855f7;}
		.section-item {text-align:center; font-size:1.1rem;background: #f3f4f6;margin: 0.5rem 0;padding: 1rem;border-radius: 8px;/*border-left: 4px solid #a855f7;*/transition: all 0.3s ease;cursor: pointer;}
		.section_point {background:#a855f7; color:#fff;}
		.section_point:hover {color:#333;}
		.section-item:hover {background: #e2e8f0;transform: translateX(5px);}

		/* 모바일 반응형 */
		@media (max-width: 768px) {
			.gnb {padding: 0 1rem; background:linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #9333ea 100%); height:60px;}
			.gnb .logo img{width:80%;}
			.nav-menu {display: none;}
			.hamburger {display: flex;}
			.mobile-menu {/*display:block;*/ top:60px;}
			.video-background {/*display: none;*/}
			.main-container {background: linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 50%, #a855f7 100%);display: flex;align-items: center;justify-content: center;flex-direction: column;padding-top: 80px;}
			.mobile-welcome {color: white;text-align: center;padding: 2rem;}
			.mobile-welcome h1 {font-size: 2rem;margin-bottom: 1rem;}
			.content-grid {grid-template-columns: 1fr;gap: 1rem;padding: 1rem;}
			.content-layer {height: 62vh;border-radius: 20px 20px 0 0;}
			.content-layer.hidden {bottom: -53.6%;}
			.emergency-notice {bottom: 120px;left: 1rem;right: 1rem;transform: none;font-size: 0.9rem;padding: 0.6rem 1rem;}
			.content-toggle {display:none;right: 20px; bottom:66vh; font-size:0.9rem;}
			.content-header .period {font-size:1rem;}
			.content-header .period span {padding:5px 10px; font-size:0.9rem;}
			.top-event-notice {right: 20px; bottom:62vh; top:auto; padding: 0.5rem 0.8rem; font-size: 0.8rem;}
			.video-background video {height:auto; margin-top:60px;}
		}

		/* 태블릿 반응형 */
		@media (max-width: 1024px) and (min-width: 769px) {
			.content-grid {grid-template-columns: repeat(2, 1fr);}
		}

		/* 추가 애니메이션 */
		.section-item {opacity: 0;animation: fadeInUp 0.6s ease forwards;}
		.section-item:nth-child(1) { animation-delay: 0.1s; }
		.section-item:nth-child(2) { animation-delay: 0.2s; }
		.section-item:nth-child(3) { animation-delay: 0.3s; }
		.section-item:nth-child(4) { animation-delay: 0.4s; }

		@keyframes fadeInUp {
			from {opacity: 0;transform: translateY(30px);}
			to {opacity: 1;transform: translateY(0);}
		}