html{scroll-behavior: smooth;}
/* var-css */
:root {--bg-color: #f5f5f5;--text-color: #333333;--primary-color: #4285f4;--secondary-color: #e0e0e0;--card-bg: #ffffff;--shadow-color: rgba(0, 0, 0, 0.1);--nav-bg: #ffffff;--footer-bg: #2c3e50;--footer-text: #ecf0f1;}
[data-theme="dark"] {--bg-color: #121212;--text-color: #f1f1f1;--primary-color: #8ab4f8;--secondary-color: #242424;--card-bg: #1e1e1e;--shadow-color: rgba(255, 255, 255, 0.05);--nav-bg: #1a1a1a;--footer-bg: #1a1a1a;--footer-text: #cccccc;}
/* body-css */
h5,h6 {font-weight: normal;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {text-decoration: none;color: #000;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {text-decoration: underline;}

/* link */ a{} a:hover {color: #000;} a:active {color: blue;} a:visited {} a:focus {}
* {margin: 0;padding: 0;box-sizing: border-box;}body {overflow-y:scroll;padding-top:88px;padding-bottom:66px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background-color: #f5f5f5;}/* nav-container */.nav-container {position: fixed;top: 55px;left: 0;width: 100%;z-index: 1000;background-color: #2c3e50;color: white;padding: 0 10px;overflow: hidden;box-shadow: 0 2px 10px #ccc;}/* navbar */.navbar {display: flex;justify-content: space-between;align-items: center;height:33px;}/* nav-links-container */.nav-links-container {display: flex;flex: 1;overflow: hidden;position: relative;}/* nav-links */.nav-links {display: flex;list-style: none;transition: transform 0.3s ease;padding: 0 10px;}.nav-links li {flex-shrink: 0;}.nav-links a {color: white;text-decoration: none;padding: 3px 10px;display: block;white-space: nowrap;transition: background-color 0.3s;}.nav-links a:hover {background-color: #435e78;}/* more-btn */.more-btn {display: none;background: none;border: none;color: white;font-size: 1.2rem;cursor: pointer;padding:3px 10px 5px;margin-left: 5px;flex-shrink: 0;}/* more-btn1 */.more-btn1 {display: none;background: none;border: none;color: white;font-size: 1.2rem;cursor: pointer;padding:3px 10px 5px;margin-right: 5px;flex-shrink: 0;}/* hidden-nav */.hidden-nav {position:fixed;top:88px;right:0;width:50%;background-color: #2c3e50;max-height: 0;overflow: hidden;transition: max-height 0.3s ease;z-index: 1000;}.hidden-nav.active {max-height: 50%;overflow-y: auto;box-shadow: 0 2px 10px #666;}.hidden-nav ul {list-style: none;}.hidden-nav a {display: block;padding: 12px 20px;color: white;text-decoration: none;border-top: 1px solid #34495e;}.hidden-nav a:hover {background-color: #34495e;}/*hidden-nav1*/.hidden-nav1 {position:fixed;top:88px;left:0;width: 0;background-color: #2c3e50;max-height:50%;overflow: hidden;transition: width 0.1s ease;z-index: 9999;}.hidden-nav1.active {width:50%;overflow-y: auto;box-shadow: 0 2px 10px #666;}.hidden-nav1 ul {list-style: none;}.hidden-nav1 li a {display: block;padding: 12px 20px;color: white;text-decoration: none;border-top: 1px solid #34495e;}.hidden-nav1 li a:hover {background-color: #34495e;}/*hidden-nav2*/.hidden-nav2 {position:fixed;bottom:0;left:0;width:100%;background-color: #2c3e50;max-height:0;overflow: hidden;transition: max-height 0.1s ease;z-index: 1000;text-align:center;}.hidden-nav2.active {max-height:30%;padding: 8px 25px;overflow-y: auto;box-shadow: 0 2px 10px #666;}/*hidden-nav3*/.hidden-nav3 {position:fixed;bottom:0;left:0;width:100%;background-color: #2c3e50;max-height:0;overflow: hidden;transition: max-height 0.1s ease;z-index: 1000;text-align:center;/*}.hidden-nav3.active {*/max-height:30%;padding: 8px 0;overflow-y: auto;box-shadow: 0 2px 8px #666;}/*hidden-nav4*/.hidden-nav4 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav4.active {width:100%;overflow-y: auto;}/*hidden-nav5*/.hidden-nav5 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav5.active {width:100%;overflow-y: auto;}/*hidden-nav6789*/.hidden-nav6 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav6.active {width:100%;overflow-y: auto;}.hidden-nav7 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav7.active {width:100%;overflow-y: auto;}.hidden-nav8 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav8.active {width:100%;overflow-y: auto;}.hidden-nav9 {position:fixed;top:55px;left:0;width: 0;background-color: #2c3e50;height:100%;overflow: hidden;z-index: 1000;}.hidden-nav9.active {width:100%;overflow-y: auto;}
.hidden-nav10 {top:0;width:0;height:100%;position:fixed;overflow: hidden;z-index: 9999;display: flex;justify-content: center;align-items: center;}
.hidden-nav10.active {width:100%;overflow-y: auto;}
/* more1 */
.more1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/* feature-card */
.feature-card h3 {margin: 10px;}
.feature-card ul {width:100%;overflow-y: auto;}
.feature-card li {display: inline-block;padding: 3px 15px;margin: 5px;border:1px solid #ccc;border-radius:10px;}
.feature-card li:hover {border:1px solid #ddd;}
.feature-card li a {text-decoration: none;}
/* key */
.key1 a {display: inline-block;padding: 1px 15px;margin: 3px;border:1px solid #ddd;border-radius:10px;text-decoration: none;}
.key1 a:hover {border:1px solid #ccc;}
.key2 a {display: inline-block;padding:0 8px;margin:2px;background: #eee;border-radius:10px;text-decoration: none;}
.key2 a:hover {background: #ccc;}
/* footer */
.footer {background-color: var(--footer-bg);color: var(--footer-text);padding: 20px;}
.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 30px;margin: 20px;}
.footer-column h2 a {color: #ffff99;}
.footer-column h3 {color: var(--primary-color);margin-bottom: 20px;font-size: 1.2rem;}
.footer-column ul {list-style: none;}
.footer-column ul li {margin-bottom: 2px;}
.footer-column span {font-size: 12px;color:#ccc;}
.footer-column li a {color: #fff;text-decoration: none;transition: color 0.3s;font-size: 16px;}
.footer-column li a:hover {text-decoration: underline;}
.copyright {margin-top: 25px;text-align: center;padding: 30px 30px 80px 30px;border-top: 1px solid rgba(255, 255, 255, 0.1);}
/* footer1 */
.footer-content1 {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;margin: 0 20px;}
.footer-content1 span {color: #000;background: #E7E9EB;border-radius: 10px;padding: 25px;}
.footer-content1 h3 {margin-bottom: 15px;color: var(--primary-color);}
.footer-content2 {display: inline-block;}
/* @media */
@media (max-width:1800px) {.nav-links-container {overflow-x: auto;-webkit-overflow-scrolling:touch;scrollbar-width: none; /* Firefox */}.nav-links-container::-webkit-scrollbar {display: none; /* Chrome/Safari */}.more-btn {display: block;}}
@media (max-width:1800px) {.nav-links {padding-right: 50px;}}
/* btn 04AA6D 0F69C3 */
.btn {display: inline-block;background: red;color: white;padding: 8px 25px;border-radius: 5px;text-decoration: none;font-weight: bold;transition: transform 0.2s, box-shadow 0.2s;}
.btn:hover {transform: translateY(-2px);box-shadow: 0 5px 15px #ccc;color: white;}
/* Minimal Scrollbar */
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #ccc;border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: #ddd;}
/* sidebar */
.sidebar {width: 220px;position: fixed;z-index: 1;top: 88px;left: 0;background-color: #E7E9EB;overflow-x: hidden;padding: 8px 0;height: 100%;box-shadow: 0 2px 10px #666;}
.sidebar::-webkit-scrollbar{width: 3px;}
.sidebar::-webkit-scrollbar-thumb{background-color: #ccc;}
.sidebar.active {width:220px;overflow-y: auto;}
.sidebar h2 {padding: 0 10px 0 16px;font-size: 18px;color: #282A35;}
.sidebar a {padding: 1px 8px 1px 16px;text-decoration: none;font-size: 16px;color: #000;display: block;}
.sidebar a:hover {background-color: #04AA6D;color: white;}
/* sidebar1 */
.sidebar1 {width: 0px;position: fixed;z-index: 1;top: 88px;right: 0;background-color: #E7E9EB;overflow-x: hidden;padding: 8px 0;height: 100%;}
.sidebar1 h2 {font-weight: normal;/* padding: 0 10px 0 16px;font-size: 18px;color: #282A35;*/}
.sidebar1 a {padding: 3px 8px 3px 16px;text-decoration: none;font-size: 12px;color: #000;display: block;}
.sidebar1 a:hover {background-color: #04AA6D;color: white;}
/* page1 */
.page1 {text-align: center;}
.page1 a {}
.page1 a:hover {background-color: #04AA6D;color: white;}
/* main */
.main {margin-left: 220px;padding: 20px 30px;margin-top: 5px;}
/* example */
.w3-example {background-color: #E7E9EB;border-left: 4px solid #04AA6D;padding: 8px 12px;margin: 16px 0;}
.w3-code {background-color: #fff;padding: 8px 12px;border-left: 4px solid #04AA6D;word-wrap: break-word;overflow: auto;}
.w3-btn a {border-radius: 5px;border: none;display: inline-block;padding: 8px 16px;vertical-align: middle;overflow: hidden;text-decoration: none;color: #fff;background-color: #04AA6D;text-align: center;cursor: pointer;white-space: nowrap;margin: 16px 10px 16px 0;}
.w3-btn a:hover {background-color: #059862;}
/* topbar */
.topbar {width: 100%;position: fixed;z-index: 1000;top: 0;left: 0;background-color: #fff;overflow: hidden;padding: 0;height: 55px;display: flex;align-items: center;}
.topbar-logo{width:190px;display: flex;align-items: center;}
.topbar-logo a {text-decoration: none;font-size:1.4rem;white-space:nowrap;color:#0F69C3;font-weight:bold;}
.topbar-links {margin-right:200px;width: 100%;overflow: hidden;display: flex;list-style: none;padding: 0 10px;}
.topbar-links a {padding:16px 18px;text-decoration: none;font-size: 16px;color: #000;}
.topbar-links a:hover {background-color: #04AA6D;color: white;border-radius: 3px;}
.topbar-links a:active {background-color: #04AA6D;color: white;}
.topbar-tools {width: 200px;right: 0;position: fixed;font-size:0.8rem;display: flex;list-style: none;}
.topbar-tools a {border-radius: 6px;display: inline-block;padding: 4px 8px;margin: 10px 10px 10px 0;vertical-align: middle;overflow: hidden;text-decoration: none;color: #fff;background-color: #0F69C3;text-align: center;cursor: pointer;white-space: nowrap;}
.topbar-tools a:hover {/* background-color: #000;*/}
.menu1 {display:none;font-weight: bold;}
/* Search */
.search-container {position: relative;width: 100%;max-width: 130px;height: 38px;vertical-align: middle;margin: 4px 10px 4px 0;padding: 6px 0;}
.search-container form {display: flex;align-items: center;background: white;border-radius: 20px;padding: 3px;border:1px solid #ccc;}
.search-container input {flex: 1;width: 100%;max-width: 100px;border: none;outline: none;padding: 3px;font-size: 12px;color: #333;background: transparent;}
.search-container button {background: #0F69C3;border: none;color: white;width: 20px;height: 20px;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.search-container button:hover {/*background: #000;*/}
.search-icon {width: 15px;height: 15px;fill: white;}
/* marquee */
.marquee {white-space: nowrap;animation: marquee 180s linear infinite;}
.marquee:hover {animation-play-state: paused;}
@keyframes marquee {0% {transform: translateX(0);}100% {transform: translateX(-50%);}}
/* top */
@media screen and (max-width:990px) {.L06 {display:none;}}
@media screen and (max-width:950px) {.T02 {display:none;}}
@media screen and (max-width:900px) {.L05 {display:none;}}
@media screen and (max-width:800px) {.L04 {display:none;}}
@media screen and (max-width:700px) {.topbar-tools {width: 160px;}.topbar-links {margin-right:160px;}.T01 {display:none;}}
@media screen and (max-width:600px) {.menu1 {display:flex;}.L01 {display:none;}.L02 {display:none;}.L03 {display:none;}}
@media screen and (max-width:400px) {.topbar-tools {width: 120px;}.topbar-links {margin-right:120px;}}
@media screen and (max-width:350px) {.topbar-tools {width: 0px;}.topbar-links {margin-right:0px;}}
@media screen and (max-width:350px) {.search-container{display:none;}}
@media screen and (min-width:100px) {h1 b,h2 b,h3 b,footer b {display:none;}}
/* sidebar, min-width >  max-width < */
@media screen and (max-width:700px) {.sidebar {width: 0;}.main {margin-left: 0;}.more-btn1 {display: block;}}
@media screen and (min-width:1200px) {.sidebar1 {width: 250px;}.main {margin-right: 250px;}}
@media screen and (min-width:1500px) {.sidebar1 {width: 300px;}.main {margin-right: 300px;}}
@media screen and (min-width:1800px) {.sidebar1 {width: 500px;}.main {margin-right: 500px;}}