@charset "utf-8";
@import url(iconfont.css);
:root{--color:#9f27c6;--fontcolor:#000000;--summarycolor:#555555;--border:5px;--fontweight5:500;--fontweight4:400;--fontweight7:700;--fontfamily:"Roboto","Lato","Open Sans","Poppins","Oswald","Noto Sans","Montserrat",'sans-serif'}
::-webkit-scrollbar-track{box-shadow:inset 0 0 5px rgba(0,0,0,.1);border-radius:10px;background:rgba(122,122,122,.1)}
::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:#d7d7d7}
::-webkit-scrollbar{width:8px;height:1px}
*,html,body,h1,h2,h3,h4,h5,h6,table,th,td,ul,li,dl,dt,dd,div,p,pre,form,input,button,textarea{padding:0px;margin:0px;box-sizing:border-box}
html{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}
body{clear:both;margin:0px auto;max-width:1920px;font-size:16px;line-height:1.6;color:var(--fontcolor);overflow-x:hidden;font-family:var(--fontfamily)}
h1,h2,h3,h4,h5,h6,b{text-transform:capitalize;font-weight:var(--fontweight5)}
img{vertical-align:bottom;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
li,ol,ul{list-style:none}
iframe,video{max-width:100%;outline:0;border:none;vertical-align:bottom}
button{outline:0;border:none}
img.lazy{display:inline-block;opacity:0}
img.lazy,img.tst{transition:opacity .6s,transform .3s ease}
img.loaded{opacity:1}
img:not([src]){visibility:hidden;position:absolute}
h4.cate-h4, h4.pro-h4 {clear:both;font-weight:var(--fontweight5)}
ul.cate-ulli, ul.pro-ulli {clear:both;padding:10px 0px 10px 20px}
ul.cate-ulli li, ul.pro-ulli li {list-style-type:disc;line-height:1.7}
ol.cate-ulli, ol.pro-ulli {clear:both;padding:10px 0px 10px 30px}
ol.cate-ulli li, ol.pro-ulli li {list-style-type:decimal;line-height:1.7}





.header01 {
            background: transparent;
            color: #fff;
            padding: 0;
            height: 120px; /* 整体高度120px */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
            transition: all 0.3s ease;
        }
        /* 滚动吸顶后：白色背景 */
        .header01.scrolled {
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        /* 内容宽度 90%，左右各5% + 垂直居中 */
        .header01-container {
            width: 90%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }
        /* 品牌区域 */
        .brand {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .brand-logo {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #fff;
            transition: color 0.3s;
        }
        .header01.scrolled .brand-logo {
            color: #333;
        }
        .brand-logo::before {
            content: "";
            display: inline-block;
            width: 40px;
            height: 40px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M30,50a20,20 0 1,1 40,0a20,20 0 1,1 -40,0 M50,30c11,0 20,9 20,20c0,5 -2,10 -6,14 M30,50c0,-11 9,-20 20,-20c7,0 13,4 17,10'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
            margin-right: 8px;
            transition: background 0.3s;
        }
        .header01.scrolled .brand-logo::before {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23333' d='M30,50a20,20 0 1,1 40,0a20,20 0 1,1 -40,0 M50,30c11,0 20,9 20,20c0,5 -2,10 -6,14 M30,50c0,-11 9,-20 20,-20c7,0 13,4 17,10'/%3E%3C/svg%3E") no-repeat center;
            background-size: contain;
        }
        .brand-slogan {
            font-size: 22px;
            line-height: 1.4;
            color: #fff;
            transition: color 0.3s;
        }
        .brand-subtitle {
            font-size: 18px;
            opacity: 0.95;
            color: #fff;
            transition: color 0.3s;
        }
        .header01.scrolled .brand-slogan,
        .header01.scrolled .brand-subtitle {
            color: #333;
        }

        /* ======================
           右侧组合：导航 + 图标组 容器
        ====================== */
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        /* ======================
           PC 端导航（靠右对齐）
        ====================== */
        .nav {
            display: flex;
            align-items: center;
            gap: 30px;
            list-style: none;
        }
        /* 一级导航 —— 字体1.2rem + 从右到左下划线动画 */
        .nav a {
            color: #fff;
            text-decoration: none;
            font-size: 1.2rem; /* 一级字体1.2rem */
            transition: all 0.3s ease;
            white-space: nowrap;
            padding-bottom: 5px;
            position: relative;
        }
        .header01.scrolled .nav a {
            color: #333;
        }
        /* 下划线底层 */
        .nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0; /* 从右侧开始 */
            width: 0;
            height: 2px;
            background: #0758b3;
            transition: width 0.3s ease;
        }
        /* 悬浮：从右→左展开 */
        .nav a:hover::after {
            width: 100%;
            right: auto;
            left: 0;
        }
        /* 当前页固定下划线 */
        .nav a.active::after {
            width: 100%;
            right: auto;
            left: 0;
        }

        /* 一级菜单容器 */
        .nav-item {
            position: relative;
        }

        /* ======================
           二级目录：黑底+透明+白色文字 + 字体0.9rem
        ====================== */
        .subnav {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            min-width: 160px;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 6px;
            padding: 12px 0;
            margin-top: 10px;
            display: none;
            flex-direction: column;
            gap: 10px;
        }
        /* 二级文字：白色 + 0.9rem */
        .subnav a {
            color: #fff !important;
            font-size: 0.9rem !important; /* 二级字体0.9rem */
            padding: 8px 20px;
            display: block;
            text-align: center;
            border: none !important;
        }
        .subnav a:hover {
            opacity: 0.8;
            background: rgba(255,255,255,0.1);
        }
        /* 二级菜单去掉下划线 */
        .subnav a::after {
            display: none !important;
        }

        /* hover 显示二级 */
        .nav-item:hover .subnav {
            display: flex;
        }

        /* ======================
           右侧图标组（电话 + 语言）
        ====================== */
        .header-icons {
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
        }
        .icon-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            color: #fff;
            font-size: 18px;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }
        .header01.scrolled .icon-item {
            color: #333;
        }
        .icon-item:hover {
            opacity: 0.8;
        }

        /* 鼠标悬浮显示电话号码 —— 居中对齐 */
        .tel-hover {
            position: absolute;
            top: 120%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            color: #333;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            display: none;
            z-index: 99;
        }
        .icon-item:hover .tel-hover {
            display: block;
        }

        /* ======================
           移动端汉堡按钮
        ====================== */
        .menu-toggle {
            display: none;
            font-size: 28px;
            color: #fff;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.3s;
        }
        .header01.scrolled .menu-toggle {
            color: #333;
        }

        /* ======================
           移动端适配 —— 按你要求修改
        ====================== */
        @media (max-width: 992px) {
            .nav,
            .header-icons {
                display: none;
            }
            .menu-toggle {
                display: block;
            }

            /* 移动端菜单：宽度100% + 黑色透明背景 */
            .nav.active {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 120px;
                left: 0;        /* 靠左0 */
                width: 100%;    /* 宽度100% */
                background: rgba(0,0,0,0.85); /* 黑色透明 */
                padding: 20px 0;
                gap: 20px;
                text-align: center;
            }
            /* 移动端导航文字白色 */
            .nav.active a {
                color: #fff !important;
                font-size: 1rem;
            }
            /* 移动端：不显示二级栏目 */
            .nav.active .subnav {
                display: none !important;
            }
        }