html {
	font-size: 125%;
	width: 100%;
	height: 100%;
}

body {
    overflow: hidden;
    background: #1b2027;
    width: 100%;
	height: 100%;
}

*{
	margin:0;
	padding:0;
	border:0;
}
.nav{
	position: absolute;
	top: 50%;
	left: 0;
	width: 6rem;
	height: 32rem;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.array{
	width: 100rem;
	height: 2rem;
	margin-top: 1rem;
	margin-bottom:2rem;
	line-height: 3rem;
}

.array input[type="text"]{
	width: 10rem;
	height: 2rem;
	font-size: 1rem;
}

.array input[type="button"]{
	width: 3rem;
	height: 2rem;
	font-size: 1rem;
}

.sort{
	position: relative;
	width: 100%;
	height:3rem;
	margin-top: 1rem;
	text-align:center;
	line-height: 3rem;
	font-family: "Microsoft Yahei";
	color: #fff;
	cursor: pointer;
	background: #394453;

}

#container1 {
	display: inline-block;
    position: absolute;
	top: 2rem;
	left: 50%;
	height: 35%;
	width: 2rem;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

#container1 div ,
#container3 div,
#container4 div{
    position: absolute;
    bottom: 0;
    height: 0;
    text-align: center;
    background: #4786b2;
}

#container1 div span,
#container3 div span,
#container4 div span{
	position:absolute;
	bottom:0rem;
	color: #1b2027;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);

}


#container2 {
    position: absolute;
	top: 0.5rem;
	left: 50%;
	height: 90%;
	width: 20rem;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}

#container3 {
	display: inline-block;
    position: absolute;
	top: 0rem;
	left: 50%;
	width: 2rem;
	height: 20%;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);

}

#container4 {
	display: inline-block;
    position: absolute;
	top: 50%;
	left: 50%;
	height: 20%;
	width: 2rem;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);

}

.sortActive{
	border:4px solid #fec675;
	border-left: 0;
}

#controller{
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60rem;
	height: 2rem;
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
 	
}

#controller input{
	width: 12rem;
	height: 2rem;
	padding: 0 0.5rem 0 0.5rem;
	font-size: 1rem;
	color: #fff;
	background: #394453;

}

#controller .button{
	display: inline-block;
	width: 6rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background: #394453;
}

#random{
	margin-right: 1rem;
}

#progressBar{
	display: inline-block;
	position: relative;
	width: 14rem;
	height: 2rem;
	margin-left: 1rem;
	line-height: 2rem;
	text-align: center;
	color: #fff;
	background: #394453;
}

#progressBar .slider{
	position: absolute;
	top: 0;
	left: 4rem;
	width: 1rem;
	height: 2rem;
	cursor: pointer;
	background: #fff;
}