@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&display=swap");
ul,li{list-style:none;margin:0;padding:0}
body{margin:0;padding:0;overflow-x: hidden;font-family: "Poppins", 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.4);
        }
        
        .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;line-height: 2.8vw;
            font-size:2.5vw;
            margin-bottom: 20px;          
        }
		
		.tab-content h2 span{display: block;font-size:1.5vw;font-weight: normal;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;}
        
        .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 {
            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: #ada6a6;
            padding: 5px 20px;
            margin: 5px 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:15vw;width: 25vw;}
.pro-lei{float: left;
	margin-right: 5%;
	height: auto;
	margin-bottom: 25px;
	background-color: #0081e0;
	border-radius: 15px;
	padding:11% 20% 11% 10%;
	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: 2.5vw;
    right: 0.8vw;
    background: url(../images/jiantoubai.png) no-repeat center;
    background-size: 100%;}
.pro-lei-b{
	width: 38px;
    height: 38px;
    position: absolute;
    top: 2.5vw;
    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: row;
                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;
            }
        }