html{
    height:100%;
	font-family:Verdana, fantasy, 微软雅黑;
}

body {
	margin:0 0px 0px 0px;
	padding:0;
	font-size:12px;
	background-color:#000;
	min-width:1280px;
}

A:link {
	color: #FFFFFF;
	text-decoration: none;
}

A:visited {
	color: #FFFFFF;
	text-decoration: none;
}

A:hover { 
	color: #FF6600;
	text-decoration: none;
}

#main {
	position:fixed;
	top:25%;
	left:0;
	right:0;
	z-index:10;
	display:flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#bottom {
	position:absolute;
	bottom:5%;
	width:100%;
	font-family:Verdana;
	color:#fff;
	text-align:center;
	z-index:10;
}

.ipinfo {
	width:400px;
	height:150px;
	color:#ffffff;
	white-space: pre-wrap;
}

.ipinfo p {
	margin: 10px 0 0 0;
	padding: 5px;
	background-color: #ffffff2b;
	border: 1px solid #ffffff2b;
	background-color: #ffffff2b;
	border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipinfo strong {
	font-weight: bold;
}

.ipinfo .strIp {
	text-align:center;
	height: 34px;
	border: 1px solid #ffffff2b;
	background-color: #ffffff2b;
	border-radius: 4px;
	/* 基础字体大小，JavaScript会动态调整 */
	font-size: 28px;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 8px;
	line-height: 34px;
	/* 添加鼠标指针样式，提示可点击 */
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ipinfo .strIp:hover {
	background-color: #ffffff4d;
	border-color: #ffffff4d;
}

.ipinfo .strIp:active {
	background-color: #ffffff66;
}

.ipinfo .strLine {
	display:inline-block;
	width:190px;
}

/* IP查询输入框样式 */
.ip-query-container {
	width: 400px;
	height: 34px;
	margin-bottom: 10px;
	display: flex;
}

.ip-query-container input[type="text"] {
	flex: 1;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #ffffff2b;
	border-right: none;
	background-color: #ffffff2b;
	color: #fff;
	font-size: 14px;
	outline: none;
	border-radius: 4px 0 0 4px;
}

.ip-query-container input[type="text"]::placeholder {
	color: #ccc;
}

.ip-query-container button {
	width: 60px;
	height: 36px;
	background-color: #ffffff2b;
	color: #fff;
	border: 1px solid #ffffff2b;
	border-left: none;
	cursor: pointer;
	font-size: 14px;
	border-radius: 0 4px 4px 0;
	transition: background-color 0.3s ease;
}

.ip-query-container button:hover {
	background-color: #ffffff4d;
}

.image-container{
	width:100%;
	height:210px;
}

.image-container img {
	display: block;
	width: 100%;
	height: 100%;
	/* 设置图片不透明部分的遮罩 */
	-webkit-mask-image: url('../img/logo420b.png'); /* 请替换为你的图片地址 */
	mask-image: url('../img/logo420b.png'); /* 兼容不同浏览器 */
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* 增加遮罩层 */
	background-image: linear-gradient(
		90deg,
		#215b91 0%,
		#1a6894 8%,
		#117598 16%,
		#0e808d 24%,
		#128d71 32%,
		#229760 40%,
		#399d54 48%,
		#5d944a 50%,
		#399d54 52%,
		#229760 60%,
		#128d71 68%,
		#0e808d 76%,
		#117598 84%,
		#1a6894 92%,
		#215b91 100%
	);
	background-size: 200%; /* 设置背景范围，超出容器 */
	animation: shine 5s linear infinite;
}

@keyframes shine  {
	0%{
		background-position: -200%;
	}
	100% {
		 background-position: 200%;
	}
}