/* ========== 第一段：菜单高亮（需配合模板引擎） ========== */
#header .menu1 li.li<%=u%> .a {
    color: #0082c8;
    border-bottom: 3px solid #0082c8;
}

/* ========== 第二段：下拉菜单样式 ========== */
.button-container {
    display: inline-block;
    position: relative;
    width: 200px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10;
}

.button-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f1f1f1;
    background-color: white;
    transition: all 0.2s ease;
}

.dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: #3498db;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

/* ========== 第三段：表格悬停变色 ========== */
table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    padding: 8px;
    border: 1px solid #ddd;
}

tbody tr {
    transition: background-color 0.3s;
}

tbody tr:hover {
    background-color: #f0f0f0;
    cursor: default;
}

/* ========== 第四段 ========== */
/* ==========================================
   图标导航栏样式 - 纯 CSS 实现 SVG 图标
   用法：添加类名即可调用图标和布局
   ========================================== */

/* ---------- 清除浮动工具 ---------- */
.clearfix::after,
.clear::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- 右侧容器（水平布局） ---------- */
.rt {
    display: flex;
    align-items: center;
    gap: 20px;
    float: right;
}

/* ---------- 搜索图标（通过背景图实现） ---------- */
.so {
    display: inline-block;
    /* 默认隐藏，可按需显示 */
    display: none;
}

.so a {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z' fill='%23666'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s, opacity 0.2s;
}

.so a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* ---------- 语言切换器（图标 + 文字 + 下拉菜单） ---------- */
.lang {
    position: relative;
    cursor: pointer;
}

.lang .svg {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 语言图标（背景图） */
.lang .svg::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 224c-29.5 0-58.3-2.6-86.2-7.5C452 175.3 491.4 120 512 120c20.6 0 60 55.3 86.2 160.5-27.9 4.8-56.7 7.5-86.2 7.5z m140.7-20.4c-13.6-55.7-31.8-102.6-53.1-137.4 63.6 14.6 121.3 44.7 169 86.1-35.3 21.8-74.3 39.1-115.9 51.3z m-281.4 0c-41.6-12.2-80.5-29.6-115.8-51.3 47.7-41.4 105.3-71.4 168.9-86-21.3 34.7-39.4 81.6-53.1 137.3zM679.5 484c-1.3-57.5-6.7-111.9-15.4-161.4 52.5-15 101.3-37.3 144.8-65.8 53.4 62 87.5 140.7 93.7 227.2H679.5z m-558.1 0c6.2-86.4 40.2-165.1 93.5-227.1 43.5 28.5 92.4 50.6 145 65.6-8.7 49.6-14.1 104-15.4 161.5H121.4z m279.1 0c1.3-55.7 6.4-105.4 13.9-148.7 31.6 5.6 64.1 8.7 97.6 8.7 33.4 0 66-3 97.6-8.6 7.5 43.3 12.5 93 13.9 148.6h-223z m408.4 283.2c-43.5-28.5-92.3-50.8-144.8-65.8 8.7-49.6 14.1-104 15.4-161.4h223.1c-6.2 86.5-40.3 165.2-93.7 227.2z m-394.5-78.5c-7.5-43.3-12.5-93-13.9-148.7h222.9c-1.3 55.6-6.3 105.3-13.9 148.6C578 683 545.4 680 512 680c-33.4 0-66 3.1-97.6 8.7zM215 767.1c-53.3-62-87.4-140.7-93.5-227.1h223.1c1.3 57.5 6.7 111.9 15.4 161.5-52.6 15-101.5 37.1-145 65.6zM512 904c-20.6 0-60-55.3-86.2-160.5 27.9-4.8 56.7-7.5 86.2-7.5s58.3 2.7 86.2 7.5C572 848.7 532.6 904 512 904z m87.6-10.2c21.3-34.8 39.5-81.7 53.1-137.4 41.7 12.2 80.6 29.5 115.9 51.2-47.7 41.5-105.4 71.6-169 86.2z m-175.2 0c-63.6-14.6-121.2-44.6-168.9-86 35.2-21.8 74.1-39.1 115.8-51.3 13.7 55.6 31.8 102.5 53.1 137.3z' fill='%23666'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 语言文字 */
.lang .svg span {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    line-height: 1;
}

/* 悬停变色 */
.lang:hover .svg::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 224c-29.5 0-58.3-2.6-86.2-7.5C452 175.3 491.4 120 512 120c20.6 0 60 55.3 86.2 160.5-27.9 4.8-56.7 7.5-86.2 7.5z m140.7-20.4c-13.6-55.7-31.8-102.6-53.1-137.4 63.6 14.6 121.3 44.7 169 86.1-35.3 21.8-74.3 39.1-115.9 51.3z m-281.4 0c-41.6-12.2-80.5-29.6-115.8-51.3 47.7-41.4 105.3-71.4 168.9-86-21.3 34.7-39.4 81.6-53.1 137.3zM679.5 484c-1.3-57.5-6.7-111.9-15.4-161.4 52.5-15 101.3-37.3 144.8-65.8 53.4 62 87.5 140.7 93.7 227.2H679.5z m-558.1 0c6.2-86.4 40.2-165.1 93.5-227.1 43.5 28.5 92.4 50.6 145 65.6-8.7 49.6-14.1 104-15.4 161.5H121.4z m279.1 0c1.3-55.7 6.4-105.4 13.9-148.7 31.6 5.6 64.1 8.7 97.6 8.7 33.4 0 66-3 97.6-8.6 7.5 43.3 12.5 93 13.9 148.6h-223z m408.4 283.2c-43.5-28.5-92.3-50.8-144.8-65.8 8.7-49.6 14.1-104 15.4-161.4h223.1c-6.2 86.5-40.3 165.2-93.7 227.2z m-394.5-78.5c-7.5-43.3-12.5-93-13.9-148.7h222.9c-1.3 55.6-6.3 105.3-13.9 148.6C578 683 545.4 680 512 680c-33.4 0-66 3.1-97.6 8.7zM215 767.1c-53.3-62-87.4-140.7-93.5-227.1h223.1c1.3 57.5 6.7 111.9 15.4 161.5-52.6 15-101.5 37.1-145 65.6zM512 904c-20.6 0-60-55.3-86.2-160.5 27.9-4.8 56.7-7.5 86.2-7.5s58.3 2.7 86.2 7.5C572 848.7 532.6 904 512 904z m87.6-10.2c21.3-34.8 39.5-81.7 53.1-137.4 41.7 12.2 80.6 29.5 115.9 51.2-47.7 41.5-105.4 71.6-169 86.2z m-175.2 0c-63.6-14.6-121.2-44.6-168.9-86 35.2-21.8 74.1-39.1 115.8-51.3 13.7 55.6 31.8 102.5 53.1 137.3z' fill='%230082c8'/%3E%3C/svg%3E");
}

.lang:hover .svg span {
    color: #0082c8;
}

/* 下拉菜单（隐藏，悬停显示） */
.lang .xia {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    margin-top: 8px;
}

.lang:hover .xia {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang .xia a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.2s;
}

.lang .xia a:hover {
    background-color: #f5f5f5;
    color: #0082c8;
}

/* ---------- 联系我们按钮 ---------- */
.cont a {
    display: inline-block;
    padding: 8px 16px;
    background: #0082c8;
    color: white;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;
}

.cont a:hover {
    background: #005f8c;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 130, 200, 0.3);
}

/* ---------- 响应式：小屏隐藏文字 ---------- */
@media (max-width: 576px) {
    .lang .svg span {
        display: none;
    }
}