/* 自定义样式 */
        .main {
            margin: auto;
            text-align: center;
            margin-bottom: 100px;
        }
        
        
        .logo-text {
            font-size: 6vw;
            color: #00b3b3;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 3vw;
            color: #00b3b3;
            margin-bottom: 10px;
        }
        
        .description {
            font-size: 2.5vw;
            color: #00b3b3;
            margin-bottom: 40px;
        }
        
        .button-group {
            display: flex;

            justify-content: center;
            gap: 20px;
        }
        
        .btn-primary {
            background-color: #00b3b3;
            color: white;
            border: 1px solid #00b3b3;
        }
        
        .btn-outline {
            background-color: transparent;
            color: #00b3b3;
            border: 1px solid #00b3b3;
        }
         .feature-box {
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 5px;
        text-align: center;
        background-color: #fff;
        margin-bottom: 15px; /* 确保宫格之间有垂直间距 */
        height: 100%; /* 使宫格高度一致，如果需要的话 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .feature-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
    }
    .feature-text {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
    }
        
        @media (max-width: 768px) {
            .layui-container {
                padding: 15px;
            }
            
            .feature-box {
                margin-bottom: 15px;
            }
        }

        @media (min-width: 768px) {
            .logo-text {
                font-size: 80px;
            }
            
            .subtitle {
                font-size: 36px;
            }
            
            .description {
                font-size: 30px;
            }
        }
        
        body {
            padding-top: 60px; /* Header height */
            font-family: 思源黑体;
            overflow-x: hidden;
        }

        .layui-header.custom-header {
            background-color: #fff !important;
            border-bottom: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            height: 60px;
        }

        .custom-header .layui-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            padding: 0 15px;
        }

        .header-left-section {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .custom-header .layui-logo {
            color:  #16BAAA;
            font-size: 20px;
            line-height: 60px;
            padding: 0;
            margin-right: 10px;
            text-decoration: none;
        }
        .custom-header .layui-logo:hover {
            opacity: 0.8;
        }

        .mobile-nav-toggle {
            display: none;
            color: #16BAAA;
            font-size: 22px;
            line-height: 60px;
            cursor: pointer;
            padding: 0 10px;
            order: 1;
        }
        .mobile-nav-toggle:hover {
            background-color: rgba(255,255,255,0.1);
        }

        .pc-nav-container {
            flex-grow: 1;
            display: flex;
            justify-content: flex-start;
            height: 100%;
            overflow: hidden;
        }
        .custom-header .layui-nav.pc-nav {
            background: none !important;
            padding: 0;
            line-height: 60px;
        }
        .custom-header .layui-nav.pc-nav .layui-nav-item a {
            color: rgba(51,51,51,.8);
            padding: 0 18px;
            line-height: 60px;
            transition: color .3s;
        }
        .custom-header .layui-nav.pc-nav .layui-nav-item a:hover,
        .custom-header .layui-nav.pc-nav .layui-this a,
        .custom-header .layui-nav.pc-nav .layui-this > a:hover {
            color: #16BAAA;
        }

        .custom-header .layui-nav.pc-nav .layui-this:after {
                 background-color: #16BAAA;
             height: 3px;
             bottom: 0;
             border-radius: 2px 2px 0 0;
        }
        .custom-header .layui-nav.pc-nav .layui-nav-bar {
            display: none !important;
        }

        .custom-header .user-menu.layui-nav {
            background: none !important;
            padding: 0;
            line-height: 60px;
        }
        .layui-nav {
            background-color: #fff;
        }
         .custom-header .user-menu.layui-nav .layui-nav-item > a {
            padding: 0 15px;
            line-height: 60px;
            color: rgba(255,255,255,.8);
            transition: color .3s;
        }
        .custom-header .user-menu.layui-nav .layui-nav-item > a:hover,
        .custom-header .user-menu.layui-nav .layui-this > a {
            color: #fff;
        }
        .user-avatar-container .layui-nav-img {
            width: 36px;
            height: 36px;
            margin-right: 8px;
            vertical-align: middle;
            border-radius: 50%;
        }
        .username-text {
            vertical-align: middle;
            color: #333;
        }
        .custom-header .user-menu.layui-nav .layui-nav-child {
            top: 55px;
            /* border-color: #333; */
            background-color: #fff;
        }
        .custom-header .user-menu.layui-nav .layui-nav-child a {
              color: #333;
        }
         .custom-header .user-menu.layui-nav .layui-nav-child a:hover {
          background-color: #fff;
          color: #16BAAA;
        }

        /* Mobile Navigation Panel Styling */
        .mobile-nav-panel {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            width: 100%;
            /* MODIFIED: Further reduced height */
            max-height: 55vh; /* Max height, e.g., 55% of viewport height */
            background-color: #fff;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
            z-index: 999;
            overflow-y: auto;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.25s ease-out, transform 0.25s ease-out;
        }

        .mobile-nav-panel.layui-show {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-nav-panel .layui-nav-tree {
            width:100%;
        }
        .mobile-nav-panel .layui-nav-item {
            display: block; /* Keep this for structure */
            width: 100%;
            border-bottom: 1px solid rgba(255,255,255,0.05); /* Optional: separator */
        }
        .mobile-nav-panel .layui-nav-item:last-child {
            border-bottom: none;
        }

        /* MODIFIED: Styling for vertical centering in <a> tags */
        .mobile-nav-panel .layui-nav-item > a {
             color: rgba(51,51,51,.8);
            /* padding: 15px 20px; */ /* Replaced by flex and min-height */
            display: flex; /* Use flex for centering */
            align-items: center; /* Vertical centering */
            justify-content: space-between; /* Pushes arrow to the right if present */
            min-height: 44px; /* Minimum height for touch and centering */
            padding: 0 20px; /* Horizontal padding */
            text-align: left;
            line-height: normal; /* Reset line-height if min-height is used for flex centering */
            box-sizing: border-box;
        }
        .mobile-nav-panel .layui-nav-item > a .layui-nav-mored { /* Ensure arrow is spaced a bit */
            margin-left: 8px;
        }

        .mobile-nav-panel .layui-nav-item > a:hover,
        .mobile-nav-panel .layui-nav .layui-this > a {
            background-color: rgba(39, 189, 174, 0.08);
            color: #fff;
        }
        .mobile-nav-panel .layui-nav-child {
            position: static;
            width: 100%;
            background-color: rgba(0,0,0,0.1) !important; /* Slightly darker for sub-menu, adjust as needed */
            box-shadow: none;
            border-radius: 0;
            padding-left: 0; /* Reset padding if any was inherited for <dl> */
        }
        /* MODIFIED: Styling for vertical centering in <dd><a> tags */
        .mobile-nav-panel .layui-nav-child dd a {
             color: rgba(255,255,255,.7);
             /* padding-left: 35px; */ /* Replaced by flex and padding */
             display: flex;
             align-items: center;
             min-height: 40px;
             padding: 0 20px 0 35px; /* Top/Bottom 0, Right 20, Left (indent) 35 */
             box-sizing: border-box;
        }
         .mobile-nav-panel .layui-nav-child dd a:hover {
            background-color: rgba(22,186,170,0.08);
            color: #16BAAA;
         }
         .mobile-nav-panel .layui-nav-child dd {
            border-bottom: 1px solid rgba(255,255,255,0.03); /* Optional: separator */
         }
         .mobile-nav-panel .layui-nav-child dd:last-child {
            border-bottom: none;
         }
         .layui-icon-down{
            margin-left: 5px;
         }



        @media screen and (max-width: 767px) {
            .pc-nav-container {
                display: none;
            }
            .mobile-nav-toggle {
                display: inline-flex;
                align-items: center;
            }
            .custom-header .user-menu .username-text {
                display: none;
            }
            .custom-header .user-menu.layui-nav .layui-nav-item > a {
                padding: 0 10px;
            }
        }