@charset "utf-8";
body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #222;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

.welcome{ background: #222; }
.text-effect{
	color: #ffff00;
	font-family: 'Cabin Sketch', cursive;
	font-size: 100px;
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto;
	position: relative;
}
.text-effect span{
	display: inline-block;
	animation: animate 0.5s linear infinite both;
}
.text-effect span:nth-child(1),
.text-effect span:nth-child(4),
.text-effect span:nth-child(7),
.text-effect span:nth-child(10){
   color: #4cd137;
}
.text-effect span:nth-child(2),
.text-effect span:nth-child(5),
.text-effect span:nth-child(8){
   color: #ff0000;
}
@keyframes animate{
	0%, 50%, 100%{ transform: rotate(0deg) scale(1); }
	25%{ transform: rotate(4deg) scale(0.98); }
	75%{ transform: rotate(-4deg) scale(1.02); }
}
@media only screen and (max-width: 990px){
	.text-effect{ font-size: 100px; }
}
@media only screen and (max-width: 767px){
	.text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 479px){
	.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 359px){
	.text-effect{ font-size: 45px; }
}

/* latin */
@font-face {
	font-family: 'Cabin Sketch';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Cabin Sketch Bold'), local('CabinSketch-Bold'), url(https://fonts.gstatic.com/s/cabinsketch/v13/QGY2z_kZZAGCONcK2A4bGOj0I_1Y5tjz.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/** Welcome page styles started. */

.welcome {
	margin-top: 60px;
}

#word {
	width: 60%;
	margin: 8% auto;
	color: #F66514;
	text-align: center;
	font-size: 42px;
}

#logo {
	width: 170px;
	position: absolute;
	margin-left: 20px;
	margin-top: -120px;
}

#boot-list ul {
	text-align: center;
}

#boot-list ul li {
	margin: 0px 10px;
	display: inline-block;
}

#boot-list a {
	color: #F6E649;
	transition: color 0.3s;
}

#footer {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding: 12px 0;
	color: #F66514;
	border-top: 1px solid #333;
	background: #222;
}

/** End */
.window {
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	width: 450px;
	z-index: 2;
	color: #000;
	padding: 0 15px 15px 15px;
	display: none;
	margin-left: auto;
	margin-right: auto;
	background: #f3f3f3;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.window-nav {
	padding: 10px 0;
}

.window-opts {
	position: absolute;
}

.window-title {
	text-align: center;
	font-weight: bold;
}

.window-opts > div {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 1px;
}

.window-opts .close {
	background-color: rgb(255, 96, 82);
}

.window-opts .amplification {
	background-color: rgb(255, 190, 5);
}

.window-opts .lessen {
	background-color: rgb(21, 204, 55);
}

#mask {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #000;
	opacity: 0.5;
	display: none;
}

.introduction {
	font-size: 16px;
}