/* 기본 리셋 및 폰트 설정 */
* {margin:0; padding:0; box-sizing:border-box;}
.navigation-wrapper {width:100%; box-sizing:content-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.6; position:absolute; top:0; left:0; width:100%; z-index:1000;}
.navigation-wrapper .container {max-width:1200px; width:100%; margin:0 auto; padding:0 20px;}
.navigation-wrapper .top-bar {background-color:#2a2a2a; padding:8px 0; position:relative; z-index:1000;}
.navigation-wrapper .top-bar-content {display:flex; justify-content:space-between; align-items:center;}
.navigation-wrapper .top-text {color:#ffffff; font-size:14px; font-weight:500;}
.navigation-wrapper .top-button {background-color:#3b82f6; color:#000000; border:none; padding:6px 16px; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; transition:background-color 0.3s ease;}
.navigation-wrapper .top-button:hover {background-color:#00cc6a;}
.navigation-wrapper .main-nav {background-color:transparent; padding:16px 0; position:relative; z-index:999; border-bottom:1px solid rgba(255,255,255,.1);}
.navigation-wrapper .nav-content {display:flex; justify-content:space-between; align-items:center; gap:20px;}
.navigation-wrapper .nav-right-group {display:flex; align-items:center; gap:20px;}
.navigation-wrapper .logo {display:flex; align-items:center; gap:12px; text-decoration:none; color:#ffffff;}
.navigation-wrapper .logo > img {height:50px;}
.navigation-wrapper .language-selector {position:relative;}
.navigation-wrapper .language-dropdown {position:relative;}
.navigation-wrapper .language-btn {background:none; border:1px solid rgba(255,255,255,0.1); color:#ffffff; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:500; display:flex; align-items:center; gap:8px; transition:all 0.3s ease;}
.navigation-wrapper .language-btn:hover {background-color:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5);}
.navigation-wrapper .language-btn i {font-size:12px; transition:transform 0.3s ease;}
.navigation-wrapper .language-dropdown.active .language-btn i {transform:rotate(180deg);}
.navigation-wrapper .language-menu {position:absolute; top:100%; right:0; background-color:#2a2a2a; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:0 0; margin-top:8px; list-style:none; min-width:100px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease; z-index:1000; box-shadow:0 8px 32px rgba(0,0,0,0.3); overflow: hidden;}
.navigation-wrapper .language-dropdown.active .language-menu {opacity:1; visibility:visible; transform:translateY(0);}
.navigation-wrapper .language-menu li {margin:0;}
.navigation-wrapper .language-menu a {display:block; padding:6px 12px; color:#ffffff; text-decoration:none; font-size:12px; transition:all 0.3s ease;}
.navigation-wrapper .language-menu a:hover {background-color:#3b82f6; color:#000000;}
.navigation-wrapper .language-menu a.active-language {background-color:#3b82f6; color:#000000; font-weight:600;}
.navigation-wrapper .logo-icon {display:flex; gap:4px;}
.navigation-wrapper .icon-line {width:20px; height:3px; border-radius:2px;}
.navigation-wrapper .logo-text {display:flex; flex-direction:column;}
.navigation-wrapper .logo-main {font-size:24px; font-weight:700; line-height:1; letter-spacing:1px;}
.navigation-wrapper .logo-sub {font-size:12px; font-weight:500; line-height:1; letter-spacing:0.5px; opacity:0.9;}
.navigation-wrapper .nav-menu {display:flex; list-style:none; gap:32px; align-items:center; margin-bottom:0;}
.navigation-wrapper .nav-item {position:relative;}
.navigation-wrapper .nav-link {color:#ffffff; text-decoration:none; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:8px 0; transition:color 0.3s ease; position:relative;}
.navigation-wrapper .nav-link:hover {color:#3b82f6;}
.navigation-wrapper .nav-link::after {content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:#3b82f6; transition:width 0.3s ease;}
.navigation-wrapper .nav-link:hover::after {width:100%;}
.navigation-wrapper .submenu {position:absolute; top:150%; left:0; background-color:#2a2a2a; min-width:160px; list-style:none; padding:0 0; border-radius:8px; box-shadow:0 8px 32px rgba(0,0,0,0.3); opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease; z-index:1000; overflow: hidden;}
.navigation-wrapper .nav-item:hover .submenu {opacity:1; visibility:visible; transform:translateY(0);}
.navigation-wrapper .submenu li {padding:0;}
.navigation-wrapper .submenu a {display:block; padding:8px 20px; color:#ffffff; text-decoration:none; font-size:14px; font-weight:500; transition:all 0.3s ease;}
.navigation-wrapper .submenu a:hover {background-color:#3b82f6; color:#000000;}
.navigation-wrapper .hamburger-menu {display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:8px; gap:4px;}
.navigation-wrapper .hamburger-line {width:24px; height:2px; background-color:#ffffff; transition:all 0.3s ease; transform:rotate(0deg) translate(0,0); opacity:1;}
.navigation-wrapper .mobile-menu-overlay {position:fixed; top:0; left:0; width:100%; height:100vh; background-color:rgba(0,0,0,0.9); z-index:9999; opacity:0; visibility:hidden; transition:all 0.3s ease; backdrop-filter:blur(5px);}
.navigation-wrapper .mobile-menu-overlay.active {opacity:1; visibility:visible;}
.navigation-wrapper .mobile-menu-content {position:absolute; top:0; right:0; width:300px; height:100%; background-color:#1a1a1a; padding:20px; transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column;}
.navigation-wrapper .mobile-menu-overlay.active .mobile-menu-content {transform:translateX(0);}
.navigation-wrapper .mobile-menu-header {display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; margin-bottom:20px; flex-direction:row-reverse;}
.navigation-wrapper .mobile-logo > img {height:50px;}
.navigation-wrapper .close-menu {background:none; border:none; color:#ffffff; font-size:18px; cursor:pointer; padding:4px; font-weight:300;}
.navigation-wrapper .mobile-nav-menu {list-style:none;}
.navigation-wrapper .mobile-nav-item {border-bottom:1px solid #333;}
.navigation-wrapper .mobile-nav-link {display:flex; justify-content:space-between; align-items:center; color:#ffffff; text-decoration:none; font-size:16px; font-weight:600; text-transform:uppercase; padding:14px 0; transition:color 0.3s ease;}
.navigation-wrapper .mobile-nav-link:hover {color:#3b82f6;}
.navigation-wrapper .submenu-toggle {font-size:12px; transition:transform 0.3s ease;}
.navigation-wrapper .mobile-nav-item.active .submenu-toggle {transform:rotate(180deg);}
.navigation-wrapper .mobile-submenu {list-style:none; max-height:0; overflow:hidden; transition:max-height 0.3s ease; background-color:#222; margin:0 -20px; padding:0;}
.navigation-wrapper .mobile-nav-item.active .mobile-submenu {max-height:300px; padding:0 0;}
.navigation-wrapper .mobile-submenu li {border-bottom:1px solid #333;}
.navigation-wrapper .mobile-submenu li:last-child {border-bottom:none;}
.navigation-wrapper .mobile-submenu a {display:block; padding:12px 20px; color:#cccccc; text-decoration:none; font-size:14px; font-weight:500; transition:all 0.3s ease; position:relative;}
.navigation-wrapper .mobile-submenu a:hover {background-color:#3b82f6; color:#000000;}
.navigation-wrapper .mobile-submenu a:active {background-color:#2563eb;}
.background-container {position:fixed; top:0; left:0; width:100%; height:100vh; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><rect width="1920" height="1080" fill="%23222"/><g opacity="0.1"><rect x="0" y="200" width="1920" height="2" fill="%23fff"/><rect x="0" y="220" width="1920" height="2" fill="%23fff"/><rect x="0" y="240" width="1920" height="2" fill="%23fff"/><rect x="0" y="260" width="1920" height="2" fill="%23fff"/><rect x="0" y="280" width="1920" height="2" fill="%23fff"/><rect x="0" y="300" width="1920" height="2" fill="%23fff"/><rect x="0" y="320" width="1920" height="2" fill="%23fff"/><rect x="0" y="340" width="1920" height="2" fill="%23fff"/><rect x="0" y="360" width="1920" height="2" fill="%23fff"/><rect x="0" y="380" width="1920" height="2" fill="%23fff"/><rect x="0" y="400" width="1920" height="2" fill="%23fff"/><rect x="0" y="420" width="1920" height="2" fill="%23fff"/><rect x="0" y="440" width="1920" height="2" fill="%23fff"/><rect x="0" y="460" width="1920" height="2" fill="%23fff"/><rect x="0" y="480" width="1920" height="2" fill="%23fff"/><rect x="0" y="500" width="1920" height="2" fill="%23fff"/><rect x="0" y="520" width="1920" height="2" fill="%23fff"/><rect x="0" y="540" width="1920" height="2" fill="%23fff"/><rect x="0" y="560" width="1920" height="2" fill="%23fff"/><rect x="0" y="580" width="1920" height="2" fill="%23fff"/><rect x="0" y="600" width="1920" height="2" fill="%23fff"/><rect x="0" y="620" width="1920" height="2" fill="%23fff"/><rect x="0" y="640" width="1920" height="2" fill="%23fff"/><rect x="0" y="660" width="1920" height="2" fill="%23fff"/><rect x="0" y="680" width="1920" height="2" fill="%23fff"/><rect x="0" y="700" width="1920" height="2" fill="%23fff"/><rect x="0" y="720" width="1920" height="2" fill="%23fff"/><rect x="0" y="740" width="1920" height="2" fill="%23fff"/><rect x="0" y="760" width="1920" height="2" fill="%23fff"/><rect x="0" y="780" width="1920" height="2" fill="%23fff"/><rect x="0" y="800" width="1920" height="2" fill="%23fff"/><rect x="0" y="820" width="1920" height="2" fill="%23fff"/><rect x="0" y="840" width="1920" height="2" fill="%23fff"/><rect x="0" y="860" width="1920" height="2" fill="%23fff"/><rect x="0" y="880" width="1920" height="2" fill="%23fff"/><rect x="0" y="900" width="1920" height="2" fill="%23fff"/><rect x="0" y="920" width="1920" height="2" fill="%23fff"/><rect x="0" y="940" width="1920" height="2" fill="%23fff"/><rect x="0" y="960" width="1920" height="2" fill="%23fff"/><rect x="0" y="980" width="1920" height="2" fill="%23fff"/><rect x="0" y="1000" width="1920" height="2" fill="%23fff"/><rect x="0" y="1020" width="1920" height="2" fill="%23fff"/><rect x="0" y="1040" width="1920" height="2" fill="%23fff"/><rect x="0" y="1060" width="1920" height="2" fill="%23fff"/></g></svg>'); background-size:cover; background-position:center; z-index:-10;}
.background-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 100%);}

@media (max-width:768px) {

    .navigation-wrapper .desktop-menu {display:none;} 
    .navigation-wrapper .hamburger-menu {display:flex;} 
    .navigation-wrapper .container {padding:0 16px;} 
    .navigation-wrapper .nav-content {gap:16px;} 
    .navigation-wrapper .nav-right-group {gap:10px;} 
    .navigation-wrapper .language-btn {padding:6px 10px; font-size:12px;} 
    .navigation-wrapper .logo-main {font-size:20px;} 
    .navigation-wrapper .logo-sub {font-size:10px;} 
    .navigation-wrapper .icon-line {width:16px; height:2px;} 
    .navigation-wrapper .logo > img {height:35px;} 
    .navigation-wrapper .language-selector {display:none;}}

@media (max-width:480px) {

    .navigation-wrapper .mobile-menu-content {width:100%;} .navigation-wrapper 
    .logo-main {font-size:18px;} 
    .navigation-wrapper .logo-sub {font-size:9px;} 
    .navigation-wrapper .icon-line {width:14px; height:2px;}

}
.navigation-wrapper .main-nav.scrolled {background-color:rgba(51,51,51,0.95); backdrop-filter:blur(10px); box-shadow:0 2px 20px rgba(0,0,0,0.2);}
.navigation-wrapper .submenu a.active-language, .navigation-wrapper .mobile-submenu a.active-language {background-color:#3b82f6 !important; color:#000000 !important; font-weight:600;}
.navigation-wrapper .submenu a:hover, .navigation-wrapper .mobile-submenu a:hover {background-color:#3b82f6; color:#000000;}
.navigation-wrapper .mobile-language-section {padding:12px 0; display:flex; flex-direction:row; align-items:center;}
.navigation-wrapper .mobile-language-title {color:#fff; font-size:14px; font-weight:600; padding:0; flex:auto;}
.navigation-wrapper .mobile-language-dropdown {position:relative; padding:0;}
.navigation-wrapper .mobile-language-btn {width:100%; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background-color:transparent; border:1px solid rgba(255,255,255,0.2); border-radius:8px; color:#fff; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.3s ease; min-width:70px;}
.navigation-wrapper .mobile-language-btn > span {font-size:12px !important}
.navigation-wrapper .mobile-language-btn:hover {background-color:rgba(255,255,255,0.15);}
.navigation-wrapper .mobile-language-btn i {font-size:12px; transition:transform 0.3s ease;}
.navigation-wrapper .mobile-language-dropdown.active .mobile-language-btn i {transform:rotate(180deg);}
.navigation-wrapper .mobile-language-menu {position:absolute; top:100%; left:0; right:20px; background-color:#1a1a1a; border:1px solid rgba(255,255,255,0.2); border-radius:8px; list-style:none; margin:0; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease; z-index:3000; box-shadow:0 4px 12px rgba(0,0,0,0.3); min-width:70px;}
.navigation-wrapper .mobile-language-dropdown.active .mobile-language-menu {opacity:1; visibility:visible; transform:translateY(0);}
.navigation-wrapper .mobile-language-menu li {margin:0;}
.navigation-wrapper .mobile-language-menu a {display:block; padding:8px 10px; color:#fff; text-decoration:none; font-size:12px; transition:background-color 0.3s ease;}
.navigation-wrapper .mobile-language-menu a:hover {background-color:rgba(255,255,255,0.1);}
.navigation-wrapper .mobile-language-menu a.active-language {background-color:rgba(65,145,236,0.3); color:#3b82f6; font-weight:600;}