@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&display=swap");
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f4f7fc;
            font-family: Source Han Sans CN, Microsoft JhengHei, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif; 
            color: #0a2540;
            scroll-behavior: smooth;
            overflow-x: hidden;
        }
ul,li{list-style:none;margin:0;padding:0}
body{margin:0;padding:0;overflow-x: hidden;font-family: Source Han Sans CN, Microsoft JhengHei, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif;}
div,img,h3,h4,p,dd,dl,em{margin: 0; padding: 0; border: 0;}
h1{letter-spacing:0px;margin:0;padding:0}
h2{letter-spacing:0px;font-size:16px;color:#000;background:inherit;margin:0 0 5px;padding:0}
p{margin:0 auto}
a{text-decoration:none;}

.tab-container {
            width:100%;
            height: 50vw;
            border-radius: 0px;            
            position: relative;
            overflow: hidden;
            display: flex;}
        
        .background-slideshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;}
        
        .background-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        
        .background-slide.active {
            opacity: 1;
        }
        
        .background-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }
        
        .content-area {
            flex: 1;
            padding:0 6%;
            position: relative;
            z-index: 2;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tab-content h2 {color:#fff;
            font-size:2.6vw;
            margin-bottom: 20px;          
        }
        
        .tab-content p {margin: 0;
            font-size: 18px;
            line-height: 1.6;
            max-width: 40%;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        }
        
        .tab-options {box-sizing: content-box;
            width: 15.5%;
            padding: 3%;
            /*background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);*/
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .tab-btn {font-family: Source Han Sans CN, Microsoft JhengHei, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif;
            background:none;
            border: none;
            color: #d7d7d7;
            padding: 15px 20px;
            margin: 8px 0;
            border-radius: 10px;
            cursor: pointer;
            text-align: left;
            font-size: 1.2vw;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            border: 1px solid transparent;
        }
        
        .tab-btn:hover {
            background:none;
            transform: translateX(0px);
        }
        
        .tab-btn.active {color: #fff;
            background:none;
            border: 0px solid rgba(255, 255, 255, 0.4);
            transform: translateX(0px);
            
        }
        
        .tab-btn i {
            margin-right: 10px;
            font-size: 18px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tab-indicator {
            position: absolute;
            right: 21.25vw;
            top: 50%;
            transform: translateY(-50%);
            width: 5px;
            height: 50px;
            background: #fff;            
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            z-index: 3;
            backdrop-filter: blur(5px);
            border: 0px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }
		
		.pro-dianji{margin-top: 3vw;width: 20vw;}
.pro-lei{float: left;
	width: 34%;margin-right: 5%;
	height: auto;
	margin-bottom: 25px;
	background:linear-gradient(96deg, #096bb3 0%, #16b2aa 97.7%);
	border-radius: 15px;
	padding: 5%;
	font-size:0.9vw;	
	line-height:1.6vw;
	font-weight: bold;
	cursor: pointer;
	position: relative;}
.pro-lei a{color: #fff;}
.pro-lei-a{
	width: 38px;
    height: 38px;
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    background: url(../images/jiantoubai.png) no-repeat center;
    background-size: 100%;}
.pro-lei-b{
	width: 38px;
    height: 38px;
    position: absolute;
    top: 0.8vw;
    right: 0.8vw;
    background: url(../images/jiantoubai.png) no-repeat center;
    background-size: 100%;}
.pro-lei>img{
	float: right;
	vertical-align: middle;
}
.pro-lei:hover,.pro-lei.on{
	color: #fff;
}
.fugai.on{    background: #ffffff57;
	
	background-size: 100% auto;}
        
        @media (max-width: 768px) {
            .tab-container {
                flex-direction: column;
                height: auto;
            }
            
            .tab-options {
                width: 100%;
                flex-direction: column;
                overflow-x: auto;
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
            }
            
            .tab-btn {
                white-space: nowrap;
                margin: 0 8px;
            }
            
            .tab-indicator {
                display: none;
            }
			
.tab-content p {
    margin: 0;
    font-size: 3.5vw;
    line-height: 1.6;
    max-width: 100%;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.content-area {
    flex: 1;
    padding: 25% 6%;
    position: relative;
    z-index: 2;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tab-content h2 {
    color: #fff;
    font-size: 4.6vw;
    margin-bottom: 20px;
}
.pro-dianji {
    margin-top: 3vw;
    width: 80vw;
}
.pro-lei {
    float: left;
    width: 34%;
    margin-right: 5%;
    height: auto;
    margin-bottom: 25px;
    background: linear-gradient(96deg, #096bb3 0%, #16b2aa 97.7%);
    border-radius: 15px;
    padding: 5%;
    font-size: 2.9vw;
    line-height: 1.6vw;
    font-weight: bold;
    cursor: pointer;
    position: relative;
}
.pro-lei-a {
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: 1.8vw;
    right: 1.8vw;
    background: url(../images/jiantoubai.png) no-repeat center;
    background-size: 100%;
}
.pro-lei-b {
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: 1.8vw;
    right: 1.8vw;
    background: url(../images/jiantoubai.png) no-repeat center;
    background-size: 100%;
}
.tab-btn {
    font-family: Source Han Sans CN, Microsoft JhengHei, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif;
    background: none;
    border: none;
    color: #d7d7d7;
    padding: 15px 20px;
    margin: 8px 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 4.2vw;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
}

        }