body{
	font-family: Verdana, Tahoma, Arial;
	scroll-x:none;
	text-align: center;
	margin: 0px;
	background :  url(../images/bodybg.gif) repeat #000000;
	/* background-color: #000000; */
	display: grid;
    justify-content: center;
}
.title{
	z-index: -1;
	position:absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 680px;
	display: block;
	overflow-y: visible ;
	overflow-x: hidden;
	text-align: left;
	white-space: nowrap;
	/* background-color: #000000; */
	background: url(../images/bg.png) no-repeat center top;
    background-position-y: 30px;
}
.marspan{
	width: 2048px;
	height: 300px;
	display: inline-block;
	background :  url(../images/smoke.png) repeat left top;

}
.hat{
	width: 1000px;
	height: 70px;
	text-align: left;
	white-space: nowrap;
}
.navmargin{
	width: 100%;
	height:10px;
	display: block;
}
.navigation{
	width: 100%;
	height:60px;
	display: block;
	text-align: center;
}
.navigation span{
	display: inline-block;
	height:60px;
	white-space: nowrap;
	text-align: left;
}
.navitem1{
	width:145px;
	background : url(../images/navmain.png) no-repeat left top;
}
.navitem2{
	width:175px;
	background : url(../images/navadd.png) no-repeat left top;
}
.navitem3{
	width:175px;
	background : url(../images/navhistory.png) no-repeat left top;
}
.navitem4{
	width:145px;
	background : url(../images/navfaq.png) no-repeat left top;
}
.navitem5{
	width:160px;
	background : url(../images/navcontract.png) no-repeat left top;
}
.navitem6{
	width:175px;
	background : url(../images/navmanage.png) no-repeat left top;	
}
.navigation a{
	width:100%;
	height:100%;
	display: inline-block;
	line-height: 60px;
	font-size: 16px;
	font-family: 宋体;
	text-decoration:none;
	font-weight: bold;
	cursor: pointer;
}
.navigation a span{
	margin-left: 70px;
}
.navigation a:link {color: #ffffff;text-decoration:none;}
.navigation a:visited {color: #ffffff;text-decoration:none;}
.navigation a:hover {color: #ff0765;text-decoration:none;}
.navigation a:active {color: #ffffff;text-decoration:none;}
.head{
	width: 1000px;
	height: 150px;
	text-align: left;
	white-space: nowrap;
	/*background-color: #40d0c0;*/
	display: flex;
	align-items: flex-end;
	position: relative;
}
/*.head > * {
	vertical-align: bottom;
	display: inline-block;
}
.head span, .head div {
	vertical-align: bottom;
}
.heightbox{
	height: 100%;
	width: 1px;
	display: inline-block;
}*/
.logo {
	/* background : url(../images/logo.png) no-repeat left top; */
	color:#204E65;
	font-size:35px;
	font-weight: bold;
	text-align: left;
	line-height: 60px;
	height: 60px;
	width: 190px;
	display: block;
}
.headmiddle {
	height: 60px;
	width: 710px;
	/* vertical-align: top; */
	display: flex; /* 关键：Flex布局 */
	flex-direction: column; /* 垂直排列 */
	justify-content: space-between; /* 上下分布 */
}
.logo .summary{
	font-size: 14px;
	line-height: 18px;
	width: 100%;
	height:60px;
	display: block;
	text-align: left;
	color:#B92722;
	font-weight: bold;
	/*background-color: #cccccc;*/
}
.logo .summary span{
	height: 18px;
	display: inline-block;
}
.summary .point{
	display: inline-block;
	width: 18px;
	height: 18px;
}
.summary .point img{
	display: inline-block;
	width: 18px;
	height: 18px;
}
.headmiddle .price{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	height:20px;
	line-height: 20px;
	display: block;
	text-align: left;
	/*background-color: #eeeeee;*/
	color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.headmiddle .price span{
	margin-left: 10px;
}
.headright {
	height: 60px;
	width: 90px;
	display: block;
	text-align: center;
	color: #000;
	/* padding-left: 10px; */
	margin-left: 10px;
}
.headright .firstrow, .headright .secondrow, .headright .thirdrow{
	font-size: 12px;
    height: 18px;
    width: 100%;
	border: 1px solid #000;
	box-sizing: border-box;
	background-color: #DBFAFA;
    display: flex;
    align-items: center;
    margin-top: -1px;
}

.headright .firstrow {
    margin-top: 0;
}

.headright .firstrow, .headright .secondrow {
    justify-content: center;
}

.headright .thirdrow {
    justify-content: space-between;
}

.release-label {
    padding: 0 5px;
    border-right: 1px solid #000;
    background-color: #fff;
    white-space: nowrap;
}

.headright .thirdrow > :nth-child(2) {
    flex-grow: 1;
    text-align: center;
    margin: 0 5px;
}
/* .headright .firstrow span, .headright .secondrow span, .headright .thirdrow span{
	margin-left: 3px;
	margin-right: 3px;
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
	color:yellow;
} */
.headright .firstrow{
	background-color: #ff0000;
	color: #ffffff;
}

.body{
	/* background : url(../images/bg.png) no-repeat center top; */
	/*width: 1000px;*/
	width: 100%;
	height: auto;_height:500px;min-height:600px;
	/* text-align: center; */
	/*background: #cccccc;*/
}
.main{
	width: 1000px;
	height: auto;_height:500px;min-height:600px;
	background: #ffffff;
	/* white-space: nowrap; */
}
.main .mainleft{
	vertical-align: top;
	display: inline-block;
	width: 20%;
	height: 100%;
	/*background: #123456;*/
}
.main .mainright{
	text-align: center;
	padding-top: 10px;
	vertical-align: top;
	display: inline-block;
	width: 80%;
	height: 100%;
	/*background: #654321;*/
	
}
.home{
	width: 1000px;
	height: 1000px;
	background :  url(../images/main_bg.png) repeat left top;
	position:relative;
}
.home span{
	diplay:inline-block;
	position:absolute;
	z-index: 100;
	user-select: none; /* 标准属性 */
	-webkit-user-select: none; /* Safari, Chrome, Edge 等浏览器 */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
}
.home span a,.home span img{
	width:100%;
	height:100%;
	border:0px;
	user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.tail{
	width: 1000px;
	/* background-color: #DBFAFA; */
	background: url(../images/footerbg.gif) repeat #DBFAFA;
}
.tail .mailto{
	font-size:12px;
	padding-top: 30px;
}
.tail .mailto a{
	font-weight: bold;
	color: #4765e3;
}
.tail .tongji{
	font-size: 12px;
	float: right;
	clear: both;
}
.footer-logo{
	padding: 15px 0px;
}
.footer-logo span{
	margin-right: 20px;
    height: 34px;
    display: inline-block;
}
.footer-logo span:last-child{
	margin-right: 0;
}
.home.select{
	background: url(../images/main_bg_blue.png) repeat left top;
}
.nav-activate a{
	color: #ff0800!important;
}
.applyarea #fileimg{
	width: 300px;
}
.order_add{
	font-size: 18px;
    display: block;
    margin-top: 30px;
}
.lock{
	background-image: url(../images/lock.png);
}
.expire-lock{
	background-image: url(../images/expire-lock.png);
}
.refuse-lock{
	background-image: url(../images/refuse-lock.png);
}
.expireed,.refused{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:red;
	font-size:12px;
	font-weight:bold;
	user-select: none
}
.refused{
	color: #ffffff;
}
.point-img{
/* 核心修改：inline-block 保留行内特性，同时支持宽高 */
display: inline-block;
width: 16px;
height: 16px;
/* 确保背景图完整显示 */
background-image: url(../images/point.png);
background-size: 100% 100%; /* 适配宽高，避免图片裁剪 */
background-repeat: no-repeat; /* 防止图片重复 */
/* 可选：如果span为空，设置vertical-align对齐文本 */
vertical-align: middle;
}
#customTooltip{
	position:fixed;
	z-index:99999;
	background:#fff;
	color:#000000;
	border: 1px solid #ff5050;
	font-size:12px;
	white-space:pre-line;
	pointer-events:none;
	display:none;
	max-width:350px;
	text-align: left;
}
.timezone{
	font-size: 12px;
    color: #ab00ff;
}
.site-count {
	background: url(../images/site.count.light.svg) no-repeat;
	background-size: 12px 12px;
	height: 12px;
	width: 12px;
	display: inline-block;
}
.friend-links{
	font-size: 12px;
	padding: 20px 20px;
	text-align: left;
}
.friend-link-ico {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    border: none;
    border-radius: 2px;
    display: inline-block;
	transition: opacity 0.3s ease;
    opacity: 1;
}
.friend-links a {
    margin: 0 8px;
    text-decoration: none;
    color: #666;
    white-space: nowrap;
}
.friend-links a:hover {
    color: #2481cc;
}
.friend-link-ico[style*="display: none"],
.friend-link-ico[data-src=""] {
    display: none !important;
	opacity: 0.8;
}
.copyright{
	font-size: 12px;
    color: #ffffff;
    background: #000;
	text-align: left;
	padding: 0px 10px;
}
.sp{
	content: "";
    padding-left: 20px;
    border-left: 1px solid rgba(71, 71, 71, .1);
}
.footer-links{
	width: 100%;
    padding: 20px 0;
    /* background-color: #DBFAFA; */
    text-align: center;
}
.footer-links-nav{
	align-items: start;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 100px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}
.footer-links-nav-item{
	list-style: none;
    margin-top: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}
.footer-links-nav-item li{
	box-sizing: border-box;
    margin-bottom: 5px;
}
.footer-links-nav-item li a{
	color: #000;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    font-size: 12px;
    line-height: 1.5;
    transition: color 0.3s ease;
}
.footer-links-nav-item li a:hover{
	color: #4765e3;
    text-decoration: underline;
}
.footer-links-nav-item li .footer-links-nav-item-title{
	font-size: 13px;
    font-weight: bold;
    color: #000;
}
.tail hr{
	border: 0; height: 2px; background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); margin: 20px 0;
}

/* 格子状态进度条样式 - Windows 98风格 */
.grid-progress-container {
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.grid-progress-bar {
	display: flex;
	height: 18px;
	border: 1px solid #000000;
	overflow: hidden;
	box-sizing: border-box;
}

/* 修复进度条右侧1px空白问题 */
.grid-progress-bar > .grid-progress-segment:last-child {
	flex-grow: 1; /* 让最后一个进度段自动填充剩余空间，仅影响直接子元素 */
}

/* 确保嵌套进度条不受flex-grow影响 */
.grid-progress-segment > .grid-progress-segment {
	flex-grow: 0 !important;
}

.grid-progress-segment {
	height: 100%;
	border-right: 1px solid #000000;
}

/* 移除最后一个进度条段的右边框 */
.grid-progress-bar > .grid-progress-segment:last-child {
	border-right: none;
}

/* 嵌套的即将释放进度条样式 */
.grid-progress-segment.nested {
	height: 80%; /* 比父进度条矮一些，上下空出位置 */
	margin: 0;
	box-sizing: border-box;
	border-right: none; /* 移除右边框，避免与外边框重叠 */
}

/* 靠右显示的嵌套进度条 */
.grid-progress-segment.nested.right {
	margin-left: auto; /* 左侧自动 margin，将元素推到右侧 */
}

/* 不同状态的颜色 - Windows 98风格 */
.grid-progress-normal {
	background-color: #0000ff; /* 蓝色：正常已使用 */
}

.grid-progress-unused {
	background-color: #00ff00; /* 绿色：未使用 */
}

.grid-progress-abnormal {
	background-color: #ff00ff; /* 紫色：审核中、审核不通过 */
}

/* 过期进度条需要相对定位，以便嵌套的进度条可以相对于它定位 */
.grid-progress-expired {
	background-color: #ffff00; /* 黄色：已过期 */
	position: relative;
	display: flex;
	align-items: center;
}

.grid-progress-expired-10days {
	background-color: #ff0000; /* 红色：已过期超过10天 */
}

/* 图例样式 - Windows 98风格 */
.grid-progress-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 12px;
    flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	color: #fff;
}

.grid-legend-item {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-right: 10px;
}

.grid-legend-color {
	width: 12px;
	height: 12px;
	border: 1px solid #000000;
	display: inline-block;
	vertical-align: middle;

}

.grid-legend-text {
	/* color: #000000;
	font-weight: bold; */
}

.grid-legend-percentage {
	font-weight: bold;
	color: #000080;
}

/* 图例颜色 - Windows 98风格 */
.grid-legend-color.normal {
	background-color: #0000ff;
}

.grid-legend-color.unused {
	background-color: #00ff00;
}

.grid-legend-color.abnormal {
	background-color: #ff00ff;
}

.grid-legend-color.expired {
	background-color: #ffff00;
}

.grid-legend-color.expired-10days {
	background-color: #ff0000;
}

/* 百分比颜色 - Windows 98风格 */
.grid-legend-percentage.normal {
	color: #0000ff;
}

.grid-legend-percentage.unused {
	color: #00ff00;
}

.grid-legend-percentage.abnormal {
	color: #ff00ff;
}

.grid-legend-percentage.expired {
	color: #ffff00;
}

.grid-legend-percentage.expired-10days {
	color: #ff0000;
}

/* 弹幕样式 */
.barrage-container {
	width: 1000px;
	height: 90px;
	position: absolute;
	overflow: hidden;
	z-index: 10;
	left: 0;
	top: 0;
}

.barrage-item {
	position: absolute;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 1px 1px #000000;
	background: rgba(0, 0, 0, 0.5);
	padding: 2px 8px 2px 12px;
	border-radius: 16px;
	z-index: 11;
	line-height: 16px;
	display: flex;
	align-items: center;
}

.barrage-avatar {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	margin-left: -10px;
	z-index: 12;
	background: rgba(0, 0, 0, 0.5);
}

.barrage-item a {
	color: #ffffff;
	text-decoration: none;
}

.barrage-item a:hover {
	color: #ffff00;
	text-decoration: underline;
}

/* 弹幕滚动动画 */
@keyframes barrageMove {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100vw);
	}
}