* {margin: 0;padding: 0;box-sizing: border-box;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre {word-break: keep-all;}
body {font-family: 'Pretendard', 'Malgun Gothic', sans-serif; line-height: 1.6; color: #333;}
h3 { font-weight: 500;}
@font-face {font-family: 'Eulyoo1945'; font-style: normal; font-weight: 500; src:url('/base/img/renew/font/Eulyoo1945-Regular.woff') format('woff');}
@font-face {font-family: 'Eulyoo1945'; font-style: normal; font-weight: 600; src:url('/base/img/renew/font/Eulyoo1945-SemiBold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 900; src:url('/base/img/renew/font/Pretendard-Black.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal;  font-weight: 800; src:url('/base/img/renew/font/Pretendard-ExtraBold.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 700; src:url('/base/img/renew/font/Pretendard-Bold.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 600; src:url('/base/img/renew/font/Pretendard-SemiBold.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 500; src:url('/base/img/renew/font/Pretendard-Medium.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 400; src:url('/base/img/renew/font/Pretendard-Regular.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 300; src:url('/base/img/renew/font/Pretendard-Light.woff2') format('woff2');}
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 200; src:url('/base/img/renew/font/Pretendard-ExtraLight.woff2') format('woff2');}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 700; src:url('/base/img/renew/font/Montserrat-Bold.woff2') format('woff2');}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 400; src:url('/base/img/renew/font/Montserrat-Regular.woff2') format('woff2');}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 500; src:url('/base/img/renew/font/Montserrat-Medium.woff2') format('woff2');}
@font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 300; src:url('/base/img/renew/font/Montserrat-Light.woff2') format('woff2');}
a {text-decoration:none ;- webkit-tap-highlight-color :transparent;}
a.link{ -webkit-tap-highlight-color : transparent;&:focus{ outline:none;} }
button {border: 0;background: transparent;cursor: pointer;-webkit-tap-highlight-color:transparent;}


/* Header */
/*.header {position: fixed;top: 0;left: 0;right: 0;z-index: 1000;background: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);padding: 10px 0;transition: all 0.3s ease;}
.header.scrolled {background: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1)}*/
.header {padding:10px;background: transparent;box-shadow: none;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;transition: all 0.3s ease;}
.header.scrolled {background: white;box-shadow: 0 2px 10px rgba(0,0,0,0.08);}
.header.scrolled .nav-menu a {color: #000;}
.header.scrolled .nav-menu a:hover {color: #2563eb;}
.header.scrolled .nav-menu .active {color: #2563eb;}
.header.scrolled .contact-btn {background: #2563eb;color: white;}
.header.scrolled .contact-btn:hover {background: #1d4ed8;}

.navbar { display: flex;justify-content: space-between;align-items: center;max-width: 1400px;margin: 0 auto;}
.logo {margin-top:5px}
.header .logo2 {display:none;}
.header.scrolled .logo1 {display:none;}
.header.scrolled .logo2 {display:block;}

.nav-menu {display: flex;list-style: none;font-size:1.2rem;gap:60px;}
.nav-menu > li {position: relative;}
.nav-menu a {text-decoration: none;color: #fff;font-weight: 500;transition: color 0.3s;display: flex;align-items: center;padding: 0.5rem 0;}
.nav-menu a:hover {color: #3566b0;}
.nav-menu .active {color: #3566b0;}
.nav-menu .dropdown-icon {margin-left: 0.5rem;font-size: 0.8rem;transition: transform 0.3s;}
.contact-btn {margin-top:4px;font-size:1rem;border: 2px solid white; background: transparent;color: white;padding: 0.4rem 1.5rem  0.5rem 1.5rem ; border-radius: 20px;cursor: pointer;transition: all 0.3s;}
.contact-btn:hover {background: #fff; color:#1d4ed8; transform: translateY(-1px);}

/* ¼­ºê¸Þ´º ½ºÅ¸ÀÏ */
.submenu {position: absolute;top: 100%;left: 0;background: white;min-width: 160px;box-shadow: 0 8px 25px rgba(0,0,0,0.15);border-radius: 8px;opacity: 0;visibility: hidden;transform: translateY(-10px);
transition: all 0.3s ease;z-index: 1000;padding: 0.5rem 0;}
.nav-menu li:hover .submenu {opacity: 1;visibility: visible;transform: translateY(0);}
.nav-menu li:hover .dropdown-icon {transform: rotate(180deg);}
.submenu li {list-style: none;}
.submenu a {padding: 0.7rem 1.5rem;color: #1e1e1e; font-size: 0.9rem;border-radius: 0;transition: all 0.3s;}
.submenu a:hover {background: #f8faff;color: #3566b0;padding-left: 2rem;}
.submenu a.active {background: #eff6ff;color: #3566b0;border-left: 3px solid #2563eb;}

/*¸ð¹ÙÀϸ޴º*/
.mobile-menu-btn {display: none;background: none;border: none;font-size: 1.5rem;cursor: pointer;color: #333;}
.mobile-nav {display: none;position: absolute;top: 100%;left:0px;right: 0;background: white;box-shadow: 0 5px 15px rgba(0,0,0,0.1);padding: 0;max-height: 800px;overflow-y: auto;}
.mobile-nav.active {display: block;}
.mobile-nav ul {list-style: none;padding: 0;}
.mobile-nav > ul > li {padding: 0;}
.mobile-nav .main-item {padding: 0.5rem 2rem;font-weight: 600;border-bottom: 1px solid #f1f5f9;background: #f8fafc;}
.mobile-nav .sub-item {padding: 0.3rem 3rem;font-size: 0.9rem;color: #666;border-bottom: 1px solid #f8fafc;}
.mobile-nav a {font-size:1rem;text-decoration: none;color: inherit;display: block;transition: color 0.3s;}
.mobile-nav a:hover {color: #2563eb;}
.mobile-nav .active {color: #2563eb;}

/* Main Visual Section */
.main-visual {position: relative;height: 100vh;overflow: hidden;display: flex; align-items: center; justify-content: center;}
.video-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -2;}
.video-background video {width: 100%;height: 100%;object-fit: cover;}
.video-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: -1;}
.visual-content { text-align:center; color: white;max-width: 1000px;padding: 0 20px;opacity: 0; transform: translateY(50px);animation: fadeInUp 1.5s ease 0.5s forwards;}
.visual-subtitle {font-size: 1.5rem;margin-bottom: 20px;color: white;opacity: 0.9;}
.visual-subtitle2 {font-family:'Montserrat'; letter-spacing:2px;font-size: 1rem;margin-bottom: 20px;color: white;opacity: 0.9;}
.visual-title-container {position: relative;width: 800px;height: 180px;overflow: hidden;margin-bottom: 10px; color:#fff}
.visual-title {position: absolute;top: 0;left: 0;right: 0;font-size: 4rem;font-weight: bold;color:#fff;line-height: 1.2;opacity: 0;transform: translateY(100%);animation-fill-mode: forwards;}
.visual-title.active {animation: slideUpFadeIn 1s ease forwards;}
.visual-title.exit {animation: slideUpFadeOut 1s ease forwards;}

@keyframes slideUpFadeIn {0% {opacity: 0;transform: translateY(100%);}100% {opacity: 1;transform: translateY(0);}}
@keyframes slideUpFadeOut {0% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(-100%);}}
.visual-description {font-size: 1.3rem;margin-bottom: 40px;opacity: 0.9;}
.cta-button {display: inline-block;background: #3566b0;color: white;padding: 15px 35px;border-radius: 30px;text-decoration: none;font-weight: 600;font-size: 1.1rem;transition: all 0.3s ease;}
.cta-button:hover {background: #2980b9;transform: translateY(-3px);box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);}

/* Timeline Section */
.timeline-section {padding:80px 0;background: #f8f9fa;overflow: hidden;}
.timeline-container {max-width: 1200px;margin: 0 auto;padding: 0 10px;text-align: center;}
.timeline-content {display: flex;align-items: center;justify-content: center;gap: 80px;opacity: 0;transform: translateY(50px);}
.timeline-year-section {text-align: center; }
.timeline-since {font-size: 1.2rem;font-weight: 600;color: #666;letter-spacing: 3px;text-transform: uppercase;margin-bottom:-20px}
.timeline-year {font-family:'Eulyoo1945';font-size: 6rem;font-weight: bold;color: #173348;}
.timeline-text {flex: 1;max-width: 600px; margin-top:-50px}
.timeline-description {font-family:'Eulyoo1945';font-size: 1.6rem; font-weight: 600; line-height: 1.8; color: #555; margin-bottom:10px}
.timeline-sub {margin-top:20px;font-size: 1.4rem; font-weight: 400; line-height: 1.8; color: #555; }
.timeline-top {font-family:'Eulyoo1945';font-size:5rem; margin-bottom:-40px;color: #173348;}
.timline-underline {border-bottom: 1px solid;}

/* Stats Section */
.stats-section {padding: 100px 0;background: linear-gradient(180deg, #eaf1fd 0%, #fff 100%);position: relative;overflow: hidden;}
.stats-container {max-width: 1200px;margin: 0 auto;display: flex;align-items: center;gap: 80px;padding: 0 20px;}
.stats-content {flex: 1; opacity: 0; transform: translateX(-50px);}
.stats-title {font-family:"Montserrat";font-size: 3rem;font-weight: bold;color: #173348;line-height: 1.3;margin-bottom: 20px;}
.stats-item {display: flex;align-items: baseline; gap: 10px; margin-bottom: -10px;}
.stats-label {font-size: 1.5rem; color: #555;}
.stats-number {font-family:"Montserrat";font-size: 3.5rem;font-weight: bold;color: #3566b0;}
.stats-unit {font-size: 1.5rem;color: #3566b0;font-weight: 600;}
.stats-visual {flex: 1;position: relative;opacity: 0;transform: translateX(50px);}
.stats-graphic {width: 500px;height: 428px;background:url("/base/img/renew/map.png")no-repeat center ;relative;overflow: hidden;}

/* Banner Section */
.banner-section {padding: 0;overflow: hidden;position: relative;}
.banner-container {width: 100%;max-width: 100vw;overflow: hidden;padding:0; }
.banner-row {display: flex;white-space: nowrap;margin: 0 0 80px 0 ;height: 80px;}
.banner-track {display: flex;align-items: center;gap: 70px; /* ¹è³Ê °£°Ý ÅëÀÏ */ will-change: transform; /* ¼º´É ÃÖÀûÈ­ */}
/* JavaScript·Î Á¦¾îµÇ´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
.banner-row:first-child .banner-track {animation: none; /* CSS ¾Ö´Ï¸ÞÀÌ¼Ç ºñÈ°¼ºÈ­ */}
.banner-row:last-child .banner-track {animation: none; /* CSS ¾Ö´Ï¸ÞÀÌ¼Ç ºñÈ°¼ºÈ­ */}
.banner-item {transition: all 0.3s ease;min-width: 160px;display: flex;align-items: center;justify-content: center;flex-shrink: 0; /* Å©±â °íÁ¤ */}
.banner-item img {width: 160px;}
.banner-item:hover {transform: translateY(-5px) scale(1.05);/*box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);background: rgba(255, 255, 255, 1);*/}
.banner-container::before,.banner-container::after {content: '';position: absolute;top: 0;bottom: 0;width: 100px;z-index: 10;pointer-events: none;}
.banner-container::before {left: 0;background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}
.banner-container::after {right: 0;background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}

/* Services Section */
.services-section {padding: 100px 0;background: white;}
.services-container {max-width: 1200px;margin: 0 auto;padding: 0 20px; text-align:center}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;margin-top: 60px;}
.service-card1 {padding: 40px; background:url("/base/img/renew/bg1.jpg") no-repeat center ; border-radius: 15px; text-align: center;transition: all 0.3s ease;opacity: 0;transform: translateY(30px); min-width:364px; min-height:293px; animation-delay: 0.4s;}
.service-card2 {padding: 40px; background:url("/base/img/renew/bg2.jpg") no-repeat center ; border-radius: 15px; text-align: center;transition: all 0.3s ease;opacity: 0;transform: translateY(30px); min-width:364px; min-height:293px; animation-delay: 0.6s;}
.service-card3 {padding: 40px; background:url("/base/img/renew/bg3.jpg") no-repeat center ; border-radius: 15px; text-align: center;transition: all 0.3s ease;opacity: 0;transform: translateY(30px); min-width:364px; min-height:293px; animation-delay: 0.8s;}
.service-title {font-size: 1.4rem;font-weight: bold;margin-bottom: 15px; color: #173348;}
.service-description {font-size: 1.2rem;color: #666;line-height: 1.6;}

/* Certificate Section */
.certificate-section { padding: 80px 0; background: #f7f7f7; }
.certificate-container { max-width: 1200px; margin: 0 auto; padding: 0x; text-align: center;}
.certificate-content {display: flex;align-items: center;justify-content: center;gap: 60px;margin-top: 10px;opacity: 0;transform: translateY(50px);}
.certificate-image img{display: flex;align-items: center;justify-content: center;}
.certificate-info {flex: 1;text-align: left;}
.certificate-badge {display: inline-block; margin-top:-20px}
.certificate-badge img {width:40%}
.certificate-title {font-size: 2rem;font-weight: bold;color: #173348; margin-bottom:10px}
.certificate-description {font-size: 1.2rem;line-height: 1.6;color: #555;}

/* Gallery Section */
.gallery-section {padding: 100px 0;background: white;}
.gallery-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;text-align: center;}
.section-title {font-size: 2.5rem;font-weight: bold;color: #173348;margin-bottom: 10px;}
.section-subtitle {font-size: 1.2rem;color: #666;margin-bottom: 40px;}
/*°¶·¯¸®ÃßÃâ*/
.board_output {width:100%; border:0; }
.board_output td img { max-width: 100%;  height: auto; padding:10px; border-radius: 15px}


/* Contact Section */
.contact-section {padding: 80px 0; background:url('/base/img/renew/contact_bg.jpg') no-repeat center bottom; background-attachment:fixed; background-size:cover; color:#fff; position:relative }

/*.contact-section:before {content:""; background:rgba(0,0,0,0.3); backdrop-filter: blur(2px); width:100%; height:100%; position:absolute; top:0; left:0; z-index: 0}*/
.contact-container {max-width: 1200px;  margin: 0 auto; padding: 0 20px;}
.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px;align-items: center;}
.contact-info h2 {font-size: 2.5rem;margin-bottom: 40px; font-weight: 300;}
.contact-details {margin-bottom: 40px;}
.contact-item {margin-bottom: 20px;display: flex;align-items: center;gap: 15px;}
.contact-label {font-weight: 600;min-width: 60px;}
.contact-buttons {display: flex;gap: 20px;}
.loca-btn {padding: 12px 30px;border: 2px solid white; background: transparent;color: white; text-decoration: none;border-radius: 25px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;}
.loca-btn:hover {background: white;color: #2c3e50;}

.inquiry-container {border-radius: 10px; background: #173348;padding: 30px;border-radius: 15px;color: #fff; align-items: center;justify-content: center;color: #fff; }
.inquiry-container h2 {margin-bottom: 20px;}

/* Footer 
.footer {background: #f4f4f4;color: #444; font-size:0.9em;padding: 20px 0 10px;}
.footer span {color:#ddd;padding:0 10px;}
.footer-container {max-width: 1200px;margin: 0 auto;padding: 0 10px;}
.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom:5px }
.footer-bottom {font-size:0.7em;color: #95a5a6; }*/

/* Footer */
.footer-container {max-width: 1200px;margin: 0 auto; padding: 0 10px;}
footer {background: #f4f4f4;color: white;padding: 20px 0 ;}
.footer-content {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.footer-links {display: flex; gap: 30px; }
.footer-links a {color: #666; text-decoration: none; transition: color 0.3s ease;}
.footer-links a:hover { color: #4285f4;}
.social-links { display: flex; gap: 15px;}
.social-link {width: 40px;height: 40px;background: #ddd;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white; text-decoration: none; transition: all 0.3s ease;}
.social-link:hover {background: #4285f4;transform: translateY(-2px);}
.footer-bottom { /*border-top: 1px solid #ddd;*/padding-top: 5px;  display: flex; justify-content: space-between;align-items: center; font-size: 0.9rem;color: #7f8c8d;}
.footer-bottom span {color:#ddd;padding:0 10px;}
.footer-copy {font-size:0.7rem; color:#95a5a6; padding-top:5px}



/* Mobile Menu */
.mobile-menu-toggle {display: none;flex-direction: column;cursor: pointer;padding: 10px;}
.mobile-menu-toggle span {width: 25px;height: 3px;background: #333;margin: 3px 0;transition: 0.3s;}

/* Animations */
@keyframes fadeInUp {to {opacity: 1;transform: translateY(0);}}
@keyframes float {0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); }}
@keyframes scroll {0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}

/* Responsive Design */
@media screen and (max-width: 1024px) {
.nav-menu {font-size:1rem;gap:30px;}
.contact-btn {margin-top:3px;font-size:0.8rem;background: #3566b0;color: white;padding: 0.4rem 1.5rem  0.5rem 1.5rem;}
.submenu {background: white;min-width: 120px;}
.submenu a {padding: 0.5rem 1rem; font-size: 0.8rem;}
.submenu a:hover {padding-left: 1.5rem;}
}

@media screen and (max-width: 768px) {
.header {background:#fff}
.header .logo1 {display:none;}
.header .logo2 {display:block;margin-left:-10px}
.header.scrolled .logo1 {display:none;}
.mobile-menu-toggle {display: flex;}
.nav-menu, .contact-btn {display: none;}
.mobile-menu-btn {display: block;}
.navbar {padding:0 1rem;}
.submenu {display: none !important;}
.hero-content h1 {font-size: 2rem;}
.hero-content p {font-size: 1rem;padding: 0 1rem;}
.nav-tabs ul {flex-direction: column;gap: 1rem;}
.visual-title { font-size: 2.2rem; color:#fff}
.visual-title-container {height: 150px; color:#fff}
.timeline-content {flex-direction: column;gap: 40px;}
.timeline-year {font-size: 4rem;}
.stats-container {flex-direction: column;gap: 40px;}
.stats-visual {order: -1; margin-top:-50px}
.stats-graphic {background:url("/base/img/renew/map.png")no-repeat center ;background-size:75% 75%;}
.contact-content { grid-template-columns: 1fr; text-align: center;}
.contact-buttons {justify-content: center;}
.loca-btn {padding: 12px 30px;border: 2px solid white; background: transparent;color: white; text-decoration: none;border-radius: 25px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px;}
.loca-btn:hover {background: white;color: #2c3e50;}

.certificate-content {flex-direction: column;}
.certificate-info {flex: 1;text-align:center;}
.certificate-image img{width:350px; display: flex;align-items: center;justify-content: center;}
.certificate-badge img {width:30%;}
.certificate-description {font-size: 1rem;line-height: 1.6;color: #555;}
.certificate-title {font-size: 1.5rem;}
.footer-content {flex-direction: column; gap: 30px; text-align: center;}
.footer-bottom {flex-direction: column; gap: 15px; text-align: center;font-size:0.8rem;}
.banner-item {min-width: 100px;padding: 15px 20px;}
.banner-track {gap: 20px;}
.banner-row {height: 60px;margin: 20px 0;}
}

@media screen and (max-width: 480px) {
.visual-title {font-size: 2rem;}
.stats-title, .stats-number  {font-size: 2.5rem;}
.timeline-top {font-size: 4rem;}
.section-title, .timeline-description {font-size: 1.5rem;}
.timeline-since, {font-size: 1rem; padding-bottom:20px}
.timeline-sub {font-size: 1rem; margin-bottom:-10px}
.timeline-year {font-size: 3rem;}
.stats-label{font-size: 1.2rem;}
.banner-item {min-width: 100px;padding: 12px 16px;}
.banner-item img {width: 80%;}
.banner-track {gap: 10px;}
.banner-row {height: 50px;}
.banner-container {padding: 15px 0;}
.contact-buttons {flex-direction: column; align-items: center;}
}

/* Scroll animations */
.animate-on-scroll {opacity: 0;transform: translateY(50px);transition: all 1s ease;}
.animate-on-scroll.animated {opacity: 1;transform: translateY(0);}
.animate-slide-left {opacity: 0;transform: translateX(-50px);transition: all 1s ease;}
.animate-slide-left.animated {opacity: 1;transform: translateX(0);}
.animate-slide-right {opacity: 0;transform: translateX(50px);transition: all 1s ease;}
.animate-slide-right.animated {opacity: 1;transform: translateX(0);}
.animate-scale {opacity: 0;transform: scale(0.9);transition: all 0.8s ease;}
.animate-scale.animated {opacity: 1;transform: scale(1);}