﻿@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	margin: 0px 0px 0px 0px;
}
html {
	background: #fff;
}
body {
	overflow-x: hidden;
	position: relative;
	isolation: isolate;
	background: #fff;
	transition: background-color .8s ease;
}
.bigcontainer {
	width: 100%;
	background: transparent;
	top:-110;
}
.test {
	border: 1px solid red;
}
.fl {
	float: left;
}
.cl {
	clear: both;
}
.bl {
	display: block;
}
.ab {
	position: absolute;
	left: 431px;
	top: -1px;
}
.rl {
	position: relative;
}
.topcontainer {
	width:1920px;height:1078px;left: 50%;margin-left: -960px;
	overflow: hidden;
	position: relative;
	clear: both;
	z-index: 1;
	background-position: -0px -0px;
}


.navs {width: 1021px;height: 79px;left:50%;margin-left: -510px;top: 851px;z-index: 99;}
.nav1,.nav2,.nav3,.nav4 {width: 288px;height: 79px;}
.nav1 {}
.nav2 {margin-left: 84px;}
.nav3 {float: right;}
.nav1:hover,.nav2:hover,.nav3:hover,.nav4:hover {cursor: pointer;margin-top:-10px;	}

.navss {width: 1200px;height: 56px;left:52%;margin-left: -550px;top: 154px;z-index: 99;}
.navs1,.navs2,.navs3 {width: 169px;height: 56px;margin-right: 320px;}
.navs1 {}
.navs2 {}
.navs3 {margin-right: 47px;float: right;}
.navs1:hover {cursor: pointer;}
.navs2:hover {cursor: pointer;margin-top: -1px;}
.navs3:hover {cursor: pointer;margin-right: 48px;margin-top: -1px;float: right;}

.animatetop{	
	width:1920px;height:1080px;left:50%;margin-left:-960px;

}

 

.gameIntro {
	width:1920px;height:1050px;left: 50%;margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images_777/bj_02.jpg) no-repeat center;
	background-position: 0px -0px;
}


.zbShow2{
    width:1920px;
    height:1100px;
    left: 50%;
    margin-left: -960px;
    overflow: hidden;
    position: relative;
    background: url(../images_777/bj_03.jpg) no-repeat center;
    background-position: 0px 0px;	
}

/* 标签容器：水平居中 */
.tab-container {
    position: absolute;
    top: 400px; /* 可根据你页面调整距离顶部的位置 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px; /* 两个标签之间的间距，可改 */
}

/* 标签按钮（透明图片） */
.tab-btn {
    width: 220px; /* 按你标签图实际尺寸调整 */
    height: 60px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.tab-btn:hover {
    opacity: 1;
}
.tab-btn.active {
    opacity: 1;
    /* 可加选中效果，比如加边框或阴影 */
    /* box-shadow: 0 0 8px #ffd700; */
}

/* 内容图片容器：水平居中 */
.content-wrap {
    position: absolute;
    top: 550px; /* 标签下面的位置，可改 */
    left: 50%;
    transform: translateX(-50%);
}
.tab-content {
    display: none; /* 默认隐藏 */
}
.tab-content.active {
    display: block;
}
.tab-content img {
    max-width: 100%;
    display: block;
}


.yxhs{
	width:1920px;height:1000px;left: 50%;margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images_777/bj_04.jpg) no-repeat center;
	background-position: 0px -0px;	
}

.gzhs{
	width:1920px;height:1000px;left: 50%;margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images_777/bj_05.jpg) no-repeat center;
	background-position: 0px -0px;	
}

.ggg{
	width:1920px;height:1000px;left: 50%;margin-left: -960px;
	overflow: hidden;
	position: relative;
	background: url(../images_777/bj_06.jpg) no-repeat center;
	background-position: 0px -0px;	
}


.container{
	width:1920px;height:80px;left:50%;margin-left:-960px;
	background:linear-gradient(180deg,#ffffff 0%,#f5f3ee 62%,#e9e9e9 100%);
	border-bottom:1px solid #ded7c9;
	box-shadow:none;
	position:relative;z-index:100;
	box-sizing:border-box;
}
.nav{
	height:79px;padding-top:5px;position:relative;width:1920px;z-index:10;margin:0 auto;
	background:transparent;
	box-sizing:border-box;
}
.nav .t-logo{
	display:block;margin:0 0 0 28px;width:700px;height:70px;float:left;
	background:url(../images_777/t-logo.png) no-repeat;
	border-radius:0 0 8px 8px;
	box-shadow:none;
}
.r-nav-c{
	width:514px;height:51px;float:right;margin-right:28px;position:relative;margin-top:9px;
	padding:6px 7px 0;border-radius:8px;box-sizing:border-box;
	background:#fff;
	box-shadow:inset 0 0 0 1px #e4e4e4;
}
.r-nav-c .al{width:116px;height:37px;float:left;margin-left:12px;position:relative;}
.r-nav-c .al:first-child{margin-left:0;}
.r-nav-c a{width: 116px;height: 37px;display: block;background: url(../images_777/t-nav.png) no-repeat;}
.r-nav-c a.a1{background-position: -12px 0px;font-size:16px;color:#242424}
.r-nav-c a.a2{background-position: -140px 0px;}
.r-nav-c a.a3{background-position: -268px 0px;}
.r-nav-c a.a4{background-position: -396px 0px;}
.r-nav-c a.a5{background-position: -524px 0px;}
.r-nav-c a.a1:hover,.r-nav-c a.a1.on{background-position: -12px -37px;}
.r-nav-c a.a2:hover,.r-nav-c a.a2.on{background-position: -140px -37px;}
.r-nav-c a.a3:hover,.r-nav-c a.a3.on{background-position: -268px -37px;}
.r-nav-c a.a4:hover,.r-nav-c a.a4.on{background-position: -396px -37px;}
.r-nav-c a.a5:hover,.r-nav-c a.a5.on{background-position: -524px -37px;}
.r-nav-c .al .aui{display: none;width: 128px;position: absolute;left: -3px;top: 67px;z-index:10}
.r-nav-c .al .aui .b{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff;opacity: 0.9;filter:alpha(opacity=90);}
.r-nav-c .al ul{position: relative;padding: 10px 0;}
.r-nav-c .al ul li{height: 32px;}
.r-nav-c .al ul li a{color: #404040;width: 110px;height: 32px;display: block;margin: 0 auto;text-align: center;line-height: 32px;background-image: none;border-radius: 5px;}
.r-nav-c .al ul li a:hover{background-color: #7cae95;color: #fff;}


#Floatingbars{
	width:158px;min-height:335px;position:fixed;top:50%;right:0;z-index:10000;
	transform:translateY(-50%);padding:20px 14px 17px;box-sizing:border-box;
	background:linear-gradient(145deg,#ffffff 0%,#fafafa 48%,#e8e8e8 100%);
	border:1px solid #d2d2d2;border-right:0;border-radius:6px 0 0 6px;
	box-shadow:-8px 10px 28px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.8);
	transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
#Floatingbars.is-collapsed{transform:translate(158px,-50%);box-shadow:none;}
#Floatingbars .sidebar-title{font:18px/28px "Microsoft YaHei",sans-serif;color:#292929;text-align:center;letter-spacing:2px;}
#Floatingbars .brand-mark{
	width:112px;height:112px;margin:6px auto 14px;border-radius:24px;
	overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.45);
}
#Floatingbars .brand-mark img{display:block;width:100%;height:100%;object-fit:cover;}
#Floatingbars .btn_showhide{
	position:absolute;left:-27px;top:30px;width:27px;height:76px;padding:0;border:0;border-radius:4px 0 0 4px;
	background:linear-gradient(180deg,#fff,#e5e5e5);color:#333;cursor:pointer;font:14px/20px "Microsoft YaHei",sans-serif;
	writing-mode:vertical-rl;letter-spacing:3px;border:1px solid #ccc;border-right:0;
	box-shadow:-3px 3px 8px rgba(0,0,0,.16);
}
#Floatingbars .btn_showhide::after{content:'‹';font:18px/18px Arial;}
#Floatingbars.is-collapsed .btn_showhide::after{content:'›';}
.kefulist{list-style:none;margin:0;padding:0;}
.kefulist li{margin-top:10px;padding:0;font-size:16px;}
.kefulist li a{
	height:36px;line-height:36px;color:#fff;text-decoration:none;display:block;width:100%;text-align:center;
	background:#bd2028;border-radius:5px;transition:background-color .2s ease,transform .2s ease;
}
.kefulist li a:hover{color:#fff;background:#e02b35;transform:translateY(-1px);}

/* 下载弹窗 */
.download-modal{
	position:fixed;inset:0;z-index:100000001;display:flex;align-items:center;justify-content:center;
	padding:24px;box-sizing:border-box;background:rgba(238,240,244,.76);backdrop-filter:blur(12px) saturate(.8);
	opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.download-modal.is-open{opacity:1;visibility:visible;}
.download-dialog{
	position:relative;width:min(780px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;
	padding:32px 34px 26px;box-sizing:border-box;border-radius:18px;
	background:linear-gradient(145deg,#ffffff 0%,#f9f6ef 52%,#edf0f4 100%);
	border:1px solid rgba(190,151,82,.5);color:#252525;
	box-shadow:0 28px 80px rgba(36,42,52,.28),inset 0 1px 0 rgba(255,255,255,.95);
	transform:translateY(18px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.15);
}
.download-modal.is-open .download-dialog{transform:translateY(0) scale(1);}
.download-close{
	position:absolute;right:15px;top:13px;width:36px;height:36px;border:1px solid #d9d3c7;
	border-radius:50%;background:rgba(255,255,255,.8);color:#655b4d;font:25px/32px Arial;cursor:pointer;
}
.download-close:hover{background:#bd2028;color:#fff;}
.download-heading{text-align:center;}
.download-kicker{font-size:13px;color:#a77527;letter-spacing:3px;}
.download-heading h2{margin:8px 0 6px;font:700 30px/42px "Microsoft YaHei",sans-serif;color:#29251f;letter-spacing:2px;}
.download-heading p{margin:0;color:#706b63;font-size:14px;}
.download-benefits{display:flex;justify-content:center;gap:12px;margin:18px 0 20px;}
.download-benefits span{padding:5px 13px;border:1px solid #dcc89e;border-radius:20px;color:#8b6325;background:rgba(255,255,255,.78);font-size:13px;box-shadow:0 2px 8px rgba(93,74,42,.06);}
.download-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.download-channel{
	position:relative;display:block;padding:15px 13px;border:1px solid #ded9cf;border-radius:10px;
	background:linear-gradient(145deg,#ffffff,#f2f3f5);color:#302c27;text-decoration:none;
	transition:transform .2s ease,border-color .2s ease,background .2s ease;
	box-shadow:0 4px 14px rgba(40,46,55,.07);
}
.download-channel:hover{transform:translateY(-2px);border-color:#c99a49;background:linear-gradient(145deg,#fffdf8,#f7ead1);}
.download-channel strong{display:block;font-size:16px;margin-bottom:7px;font-weight:600;}
.download-channel small{display:flex;align-items:center;justify-content:space-between;color:#817a70;font-size:12px;}
.download-latency{color:#ba7620;font-weight:bold;}
.download-latency.is-fast{color:#15985d;}
.download-support{
	display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:15px 17px;
	border-radius:10px;background:linear-gradient(90deg,#fff8ed,#f4f0e8);
	border:1px solid #e2cfa9;color:#6f675d;font-size:13px;line-height:22px;
}
.download-support strong{color:#3d3429;font-size:15px;}
.yy-placeholder{flex:none;padding:9px 14px;border-radius:7px;background:#fff;color:#9b6a23;border:1px solid #e2d3b6;}
body.download-modal-open{overflow:hidden;}
@media(max-width:720px){
	.download-dialog{padding:28px 18px 20px;}
	.download-heading h2{font-size:23px;line-height:34px;}
	.download-grid{grid-template-columns:repeat(2,1fr);}
	.download-benefits{flex-wrap:wrap;}
	.download-support{align-items:flex-start;flex-direction:column;}
}
 

.bottom{
	width:1920px;
	height:150px;
	left: 50%;
	margin-left: -960px;
	overflow: hidden;
	position: relative;
	background:linear-gradient(180deg,#ffffff 0%,#f5f3ee 62%,#e9e9e9 100%);
	border-top:1px solid #ded7c9;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
	color:#45413b;
}
.footer-inner{width:1120px;height:100%;margin:0 auto;display:flex;align-items:center;gap:28px;}
.footer-icon{width:94px;height:94px;object-fit:cover;border-radius:20px;flex:none;}
.footer-content{padding-left:28px;border-left:1px solid #d6d0c5;font-family:"Microsoft YaHei",sans-serif;}
.footer-content p{margin:0;}
.footer-health{font-size:13px;color:#4d4943;line-height:24px;}
.footer-copyright{margin-top:8px!important;font-size:13px;font-weight:600;color:#292725;letter-spacing:.5px;}
.footer-service{margin-top:8px!important;font-size:12px;color:#777168;}
.footer-service span{color:#9b6b25;font-weight:600;}
