*,*::after,*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: #FFF;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 0;
}

.width50 {
	width: 50%;
}

.width25 {
	width: 25%;
}

.width100 {
	width: 100%;
}

.container {
	width: 100%;
	height: 100vw;
	background-color: #3399CC;
	padding: 60px 135px;
}

.wraper {
	width: 1190px;
	margin: 0 auto;
}

h1 {
	font-size: 1.3125rem;
}
h1>i {
	font-size: 1.6875rem;
}

ul {
	margin: 35px auto;
	border: 2px solid #FFF;
	background-color: #FFF;
}

li {
	list-style: none;
	height: 147px;
	display: inline-block;
	text-align: center;
	padding: 26px 0 27px 0;
	font-size: 1.375rem;
	border: 2px solid #FFF;
}

.city {
	display: block;
}

li>i {
	font-size:2.625rem;
}

.temp {
	margin-right: 10px;
}

.temp::after {
	content: "°C";
}

li:nth-child(1) {
	background-color: #3399CC;
}

li:nth-child(2) {
	background-color: #33CCCC;
}

li:nth-child(3) {
	background-color: #996699;
}

li:nth-child(4) {
	background-color: #C24747;
}

li:nth-child(5) {
	background-color: #E2674A;
}

li:nth-child(6) {
	background-color: #FFCC66;
}

li:nth-child(7) {
	background-color: #99CC99;
}

li:nth-child(8) {
	background-color: #669999;
}

li:nth-child(9) {
	background-color: #CC6699;
}

li:nth-child(10) {
	background-color: #339966;
}

li:nth-child(11) {
	background-color: #666699;
}

ul:hover li {
	opacity: 0.4;
	transition: all 0.5s;
}

ul li:hover {
	cursor: pointer;
	opacity: 1;
	transition: all 0.5s;
}

p {
	font-size: 1rem;
}