* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	min-width: 1200px;
}
#container {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: fixed;
	overflow: hidden;
	min-width: 1200px;
	background: #f1f2f3;
}

#control .panel {
	position: absolute;
	width: 100%;
	background-color: rgba(64, 64, 64, 0.5);
	z-index: 2;
	overflow: hidden;
	transition: all 1s ease-out;
}

#welcome {
	box-sizing: border-box;
	width: 1300px;
	margin: auto;
	padding: 20px 0;
	border-radius: 15px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: fixed;
	left: calc(50% - 650px);
}

.header {
	text-align: center;
  margin-top: 20px;
}

.header h1 {
	font-size: 28px;
	margin: 20px auto;
	margin-bottom: 10px;
	color: #333;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header p {
	font-size: 16px;
	color: #666;
	margin: 0 auto;
	line-height: 1.5;
}

.main-content {
	display: flex;
	padding: 15px;
	gap: 15px;
}

.left-panel {
	flex: 0 0 320px;
	border-radius: 12px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.start-button {
	display: block;
	width: 100%;
	padding: 16px;
	background: linear-gradient(to right, #4361ee, #3a0ca3);
	color: white;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	margin: 10px 0;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
}

.start-button:hover {
	background: linear-gradient(to right, #3a0ca3, #4361ee);
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(67, 97, 238, 0.6);
}

.tools-link {
	color: #f15bb5;
	text-decoration: none;
	font-size: 1.1rem;
	transition: color 0.2s;
	display: block;
	text-align: center;
	margin: 10px 0;
}

.tools-link:hover {
	color: #ff85d6;
	text-decoration: underline;
}

.right-panel {
	flex: 1;
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.section-title {
	font-size: 20px;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid #344e7c;
}

.description {
	line-height: 1.5;
	margin-bottom: 15px;
	font-size: 16px;
	color: #666;
}

.resolution-info {
	width: 100%;
	box-sizing: border-box;
	background: rgba(15, 20, 35, 0.8);
	border-radius: 8px;
	padding: 20px;
	margin: 10px 0;
	border: 1px solid #344e7c;
}

.info-row {
	display: flex;
	margin-bottom: 12px;
	font-size: 18px;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-title {
	font-weight: bold;
	color: #f15bb5;
}

.info-value {
	color: #70e000;
	font-family: monospace;
}

.notice {
	box-sizing: border-box;
	width: 100%;
	background: rgba(200, 60, 60, 0.15);
	border-left: 4px solid #f15bb5;
	padding: 15px;
	margin: 10px 0;
	border-radius: 8px;
	font-size: 1rem;
}

.notice p {
	font-size: 16px;
	color: #666;
	margin-bottom: 10px;
	line-height: 1.5;
}

.notice p:last-child {
	margin-bottom: 0;
}

.disclaimer {
	font-size: 14px;
	color: #fff;
	line-height: 1.6;
	margin-top: 20px;
	padding: 15px;
	background: rgba(10, 15, 30, 0.6);
	border-radius: 8px;
}

.keywords {
	margin-top: 20px;
	font-size: 0.95rem;
	color: #a0a0d0;
	line-height: 1.7;
}

.keywords strong {
	color: #4cc9f0;
	font-weight: normal;
}

.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.feature-card {
	background: #ededed;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	transition: transform 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
	border-color: #4cc9f0;
}

.feature-icon {
	font-size: 30px;
	margin-bottom: 10px;
}

.feature-title {
	font-size: 1.2rem;
	color: #f15bb5;
	margin-bottom: 10px;
}

.feature-desc {
	font-size: 16px;
	color: #78788c;
}

.footer {
	text-align: center;
	padding: 20px;
	font-size: 16px;
	color: #838383;
}

.control_hide .top {
	top: -40px;
}

.control_show .top {
	top: 0;
}

#control .top {
	height: 40px;
	color: #FFF;
}

#control .top .title {
	font-family: simhei;
	font-size: 24px;
	line-height: 40px;
	margin: 0 20px;
}

#control .top .description {
	font-size: 12px;
	color: #fff;
}

#control .top .close {
	background: url(img/control-close.png);
	width: 20px;
	height: 20px;
	right: 20px;
	top: 10px;
	position: absolute;
	cursor: pointer;
}

.control_show .bottom {
	bottom: 0;
}

.control_hide .bottom {
	bottom: -80px;
}

#control .bottom {
	height: 80px;
}

#control .bottom .wrapper {
	width: 10000px;
	position: relative;
	transition: all 1s ease-out;
}

#control .bottom .wrapper a {
	border: 1px solid #FFF;
	float: left;
	margin: 10px 0 0 5px;
	display: block;
	width: 150px;
	color: #FFF;
	height: 60px;
	cursor: pointer;
	text-align: center;
	vertical-align: bottom;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.5);
	line-height: 60px;
}

#control .bottom .triangle {
	position: absolute;
	border-color: transparent transparent #FFF;
	border-style: solid;
	border-width: 0 50px 10px;
	height: 0;
	width: 0;
	left: 50%;
	margin: 0 0 0 -50px
}

.slide {
	width: 100%;
	height: 100%;
	position: relative;
	list-style: none;
	z-index: 0;
}

.hide {
	display: none;
}

#main {
	width: 100%;
	height: 100%;
	position: relative;
}

#preloader {
	background: url("img/horizontal-line-1px.gif"), url("img/horizontal-line-2px.gif"), url("img/vertical-line-1px.gif"), url("img/vertical-line-2px.gif"), url("img/dots-1px.gif"), url("img/dots-2px.gif"), url("img/cross-1px.gif"), url("img/cross-2px.gif"), url("img/boxes-5px.png"), url("img/white-grid-45px.png"), url("img/convergence-45px.png"), url("img/breathing-block.gif");
	width: 0;
	height: 0;
	display: inline-block;
}

#test-solid-red {
	background-color: #F00;
}

#test-solid-green {
	background-color: #0F0;
}

#test-solid-blue {
	background-color: #00F;
}

#test-solid-yellow {
	background-color: #FF0;
}

#test-solid-cyan {
	background-color: #0FF;
}

#test-solid-magenta {
	background-color: #F0F;
}

#test-solid-white {
	background-color: #FFF;
}

#test-solid-black {
	background-color: #000;
}

#test-horizontal-line-1px {
	background: #000 url("img/horizontal-line-1px.gif") repeat center center;
}

#test-horizontal-line-2px {
	background: #000 url("img/horizontal-line-2px.gif") repeat center center;
}

#test-vertical-line-1px {
	background: #000 url("img/vertical-line-1px.gif") repeat center center;
}

#test-vertical-line-2px {
	background: #000 url("img/vertical-line-2px.gif") repeat center center;
}

#test-dots-1px {
	background: #000 url("img/dots-1px.gif") repeat center center;
}

#test-dots-2px {
	background: #000 url("img/dots-2px.gif") repeat center center;
}

#test-cross-1px {
	background: #000 url("img/cross-1px.gif") repeat center center;
}

#test-cross-2px {
	background: #000 url("img/cross-2px.gif") repeat center center;
}

#test-pattern {
	background-color: #000;
	background: url("img/boxes-5px.png") no-repeat top left, url("img/boxes-5px.png") no-repeat top right, url("img/boxes-5px.png") no-repeat bottom left, url("img/boxes-5px.png") no-repeat bottom right, url("img/boxes-5px.png") no-repeat center center #000;
}

#test-white-grid {
	background: #000 url("img/white-grid-45px.png") repeat center center;
}

#test-convergence {
	background: #000 url("img/convergence-45px.png") repeat center center;
}

#test-contrast-white {
	background-color: #FFF;
	color: #000;
}

#test-contrast-black {
	background-color: #000;
	color: #FFF;
}

.test-contrast table {
	border-collapse: collapse;
	position: relative;
	left: 10%;
	top: 10%;
	height: 80%;
	width: 80%;
	text-align: center;
	border-spacing: 0;
}

.test-contrast table td {
	width: 10%;
	padding: 0;
}

.test-contrast table .color td {
	height: 22%;
}

.test-contrast table .ruler td {
	height: 2.2%;
	border: 1px #808080;
	border-style: none solid;
}

.test-contrast i {
	font-size: 10px;
	font-style: normal;
}

#test-saturation img {
	width: 100%;
	height: 100%;
}

#test-stability table {
	border: 2px solid #FFF;
	height: 100%;
	width: 100%;
	border-spacing: 0;
}

#test-stability table td {
	border: 6px solid #000;
	background: #000 url("img/breathing-block.gif") repeat center center;
}

.test-gradient img {
	width: 100%;
	height: 100%;
}

#test-gradient-red {
	background-color: #F00;
}

#test-gradient-green {
	background-color: #0F0;
}

#test-gradient-blue {
	background-color: #00F;
}

#test-gradient-white {
	background-color: #FFF;
}

#test-last {
	background-color: #000;
	text-align: center;
	color: #FFF;
}

#test-center {
	padding: 50px;
}

#resolution_tips {
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 20px 20px 20px 20px;
	color: #FFFFFF;
	font-family: arial;
	font-size: 48px;
	height: 120px;
	left: 50%;
	line-height: 120px;
	margin: -60px -150px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 300px;
	z-index: 1;
}