*{padding:0; margin:0;}
.bg {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8;
}
ul, ol, li, dl {
list-style-type: none;
}
.box {
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.box > * {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
a:link, a:visited {
text-decoration: none;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
}
a:link, a:visited {
text-decoration: none;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);
}

.hovertreebottom{
	height:45px;
	display:none;
}
.hovertreebottom ul{
	position:fixed;
	z-index:200;
	bottom:0;
	left:0;
	width:100%; margin-bottom:0
}
.hovertreebottom li{
	border:1px solid rgba(190,190,190,1);
	height:45px;
	border-bottom:0;
	border-right:0;
	position:relative;
	-webkit-box-shadow:inset 0 0 3px #fff;
	float:left;
	width:33.26%;
}
.hovertreebottom li:nth-of-type(1){border-left;0;}
.hovertreebottom li>a{
	font-size:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	/*border:1px solid #f9f8f9;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	border-bottom:0;
	display:block;
	line-height:45px;
	text-align:center;
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) );
}
.hovertreebottom li>a:only-child span{
	background:none;
	padding-left:0;
}
.hovertreebottom li>a.on + dl{
	display: block;
}
.hovertreebottom li>a span{
	color: #4f4d4f;
	display: inline-block;
	padding-left: 15px;
	background: url(../fonts/1.svg#2) no-repeat 4px 18px;
	-webkit-background-size: 9px auto;
	text-shadow:0px 1px 0px #ffffff;
}
/***********************/
.hovertreebottom dl{
	display:none;
	position:absolute;
	z-index:220;
	bottom:60px;
	left:50%;
	width:100px;
	margin-left:-50px;
	background:red;
	/*min-height:100px;*/
	background:#e4e3e2;
	/*border:1px solid #afaeaf;*/
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 3px #fff;
	background:url(../fonts/2.svg#3) no-repeat center center;
	-webkit-background-size:100%;
	background-size:100%;
}
/*, .hovertreebottom dl:after*/
.hovertreebottom dl:before{
	content:"";
	display:inline-block;
	position:absolute;
	z-index:240;
	bottom:0;
	left:50%;
	/*width:0;
	height:0;
	border:8px solid red;
	border-color:#afaeaf transparent transparent transparent;
	margin-left:-8px;
	margin-bottom:-16px;*/
	width:10px;
	height:8px;
	background: url(../fonts/1.svg) no-repeat center -55px;
	-webkit-background-size: 10px auto;
	bottom: -7px;
	margin-left: -5px;
}
/*.hovertreebottom dl:after{
	z-index:241;
	border-color:#e4e3e2 transparent transparent transparent;
	margin-bottom:-15px;
}*/
.hovertreebottom dl dd{
	line-height:45px;
	text-align:center;
	background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));
	background-size:80% 1px;
	background-repeat:no-repeat;
	background-position: center bottom;
	/*background: url(../fonts/3.svg#4) no-repeat center bottom;
	-webkit-background-size:100px 1px;*/
}
.hovertreebottom dl dd:last-of-type{
	background:none;
}
.hovertreebottom dl dd a{
	font-size: 15px;
	display:block;
	color:#4f4d4f;
	text-shadow:0px 1px 0px #ffffff;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hovertreebottom .masklayer_div{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 180;
	background: rgba(0,0,0,0);
}
.hovertreebottom .masklayer_div.on{display: block;}

@media (max-width:990px){
.hovertreebottom{
	display:block !important;
}
}
   
   
   .sub {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            background: white;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            padding: 30px;
            z-index: 100;
            animation: fadeIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .navBar2 .bignav .sub .subl {
            width: 200px;
            float: left;
            text-align: left;
            margin-left: 40px;
        }
        
        .navBar2 .bignav .sub .subl h3 {
            display: block;
            font-size: 1.4rem;
            color: #2b2b2b;
            padding: 12px 0;
            margin: 8px 0;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 3px solid transparent;
        }
        
        .navBar2 .bignav .sub .subl h3:hover,
        .navBar2 .bignav .sub .subl h3.active {
            color: #c91b1b;
            border-bottom: 1px solid #ccc;
        }
        
        .navBar2 .bignav .sub .subl span {
            display: block;
            padding-top: 15px;
            font-size: 15px;
            color: #666;
            line-height: 1.7;
            height: 140px;
            overflow: hidden;
        }
        
        .navBar2 .bignav .sub .subr {
            float: left;
            width: calc(100% - 280px);
            height: auto;
            text-align: left;
            padding: 0 30px;
        }
        
        .navBar2 .bignav .sub .subr .category-content {
            display: none;
        }
        
        .navBar2 .bignav .sub .subr .category-content.active {
            display: block;
            animation: fadeInContent 0.4s ease;
        }
        
        @keyframes fadeInContent {
            from { opacity: 0; transform: translateX(10px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .navBar2 .bignav .sub .subr h4 {
            font-size: 1.4rem;
            color: #2b2b2b;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
            font-weight: 600;
        }
        
        /* 修改为横向排列 */
        .items-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .item-link {
            display: inline-block;
            padding: 12px 0px;
            background: #f8f9fa;
            border-radius: 6px;
            color: #555;
            font-size: 1.4rem;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid #eaeaea;
            min-width: 120px;
            text-align: center;
        }
        
        .item-link:hover {
            color: #c91b1b;
            background: #fff;
            border-color: #ffd6d6;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(201, 27, 27, 0.15);
        }
        
        .content-wrapper {
            background: #fff;
            padding: 30px;
        }
        
        .instructions {
            margin-top: 20px;
            padding: 25px;
            background: #f8fbfe;
            border-radius: 8px;
            border-left: 5px solid #4a90e2;
        }
        
        .instructions h2 {
            color: #2b2b2b;
            margin-bottom: 20px;
            font-size: 24px;
        }
        
        .instructions p {
            line-height: 1.8;
            margin-bottom: 15px;
            color: #555;
            font-size: 16px;
        }
        
        .features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 30px 0;
        }
        
        .feature-card {
            flex: 1;
            min-width: 250px;
            padding: 25px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-top: 4px solid #4a90e2;
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        }
        
        .feature-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.7;
        }
        
        @media (max-width: 992px) {
            .navBar2 .bignav .sub .subl {
                width: 100%;
                margin-left: 0;
                float: none;
                margin-bottom: 20px;
            }
            
            .navBar2 .bignav .sub .subr {
                width: 100%;
                float: none;
                padding: 0;
            }
            
            .bignav {
                flex-wrap: wrap;
            }
            
            .nav-item {
                width: 33.333%;
                text-align: center;
                padding: 15px 10px;
                font-size: 16px;
            }
        }
        
        @media (max-width: 768px) {
            .nav-item {
                width: 50%;
            }
            
            .items-container {
                gap: 10px;
            }
            
            .item-link {
                padding: 10px 15px;
                min-width: 100px;
                font-size: 14px;
            }
        }