* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ratio {
	width: 256px;
	float: left;
	position: relative;
	margin-bottom: 70px;
	font-family: "Noto Sans S Chinese"; font-weight: 100;
}
.ratio .font-c{ color: #31c6ec;}
.ratio .ratio-r{ position: absolute; top:-5px; left:80px; text-align: left;}
.ratio .ratio-r h2{ font-size: 36px; font-family:"DIN", Arial; font-weight: bold; }
.ratio .ratio-r span{ font-size: 20px; font-family: "Noto Sans S Chinese"; font-weight: 100; }
.progress {
	width: 68px;
	height: 68px;
	line-height: 68px;
	background: none;
	/*margin: 0 auto;*/
	box-shadow: none;
	position: relative;
}

.progress:after {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #fff;
	border-color: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 0;
	left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.progress>span {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}

.progress .progress-left {
	left: 0;
}

.progress .progress-bar {
	width: 100%;
	height: 100%;
	background: none;
	border-width: 3px;
	border-style: solid;
	position: absolute;
	top: 0;
}

.progress .progress-left .progress-bar {
	left: 100%;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left;
}

.progress .progress-right {
	right: 0;
}

.progress .progress-right .progress-bar {
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-1 1.8s linear forwards;
}

.progress .progress-value {
	width: 85%;
	height: 85%;
	border-radius: 50%;
	/*font-size: 36px;
	line-height: 64px;*/
	text-align: center;
	position: absolute;
	top: -3%;
	left: 7.0%;
}
/*1*/
.progress.blue .progress-bar {
	border-color: #31c6ec;
}

.progress.blue .progress-value {
	color: #31c6ec;
}

.progress.blue .progress-left .progress-bar {
	animation: loading-2 1.5s linear forwards 1.8s;
}

.progress.blue2 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue2 .progress-value {
	color: #31c6ec;
}

.progress.blue2 .progress-left .progress-bar {
	animation: loading-3 1.5s linear forwards 1.8s;
}

.progress.blue3 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue3 .progress-value {
	color: #31c6ec;
}

.progress.blue3 .progress-right .progress-bar {
	animation: loading-4 1.5s linear forwards 0.2s;
}

.progress.blue4 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue4 .progress-value {
	color: #31c6ec;
}

.progress.blue4 .progress-left .progress-bar {
	animation: loading-5 1.5s linear forwards 1.8s;
}
.progress.blue5 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue5 .progress-value {
	color: #31c6ec;
}

.progress.blue5 .progress-right .progress-bar {
	animation: loading-6 1.5s linear forwards 0.2s;
}

.progress.blue6 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue6 .progress-value {
	color: #31c6ec;
}

.progress.blue6 .progress-left .progress-bar {
	animation: loading-7 1.5s linear forwards 1.8s;
}

@keyframes loading-1 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

@keyframes loading-2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(82.8deg);
		transform: rotate(82.8deg);
	}
}

@keyframes loading-3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(50.4deg);
		transform: rotate(50.4deg);
	}
}

@keyframes loading-4 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(169.2deg);
		transform: rotate(169.2deg);
	}
}

@keyframes loading-5 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(144deg);
		transform: rotate(144deg);
	}
}
@keyframes loading-6 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(32.4deg);
		transform: rotate(32.4deg);
	}
}
@keyframes loading-7 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(176.4deg);
		transform: rotate(176.4deg);
	}
}
/*2*/
.progress.blue11 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue11 .progress-value {
	color: #31c6ec;
}

.progress.blue11 .progress-right .progress-bar {
	animation: loading-22 1.5s linear forwards 0.2s;
}

.progress.blue22 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue22 .progress-value {
	color: #31c6ec;
}

.progress.blue22 .progress-left .progress-bar {
	animation: loading-33 1.5s linear forwards 1.8s;
}

.progress.blue33 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue33 .progress-value {
	color: #31c6ec;
}

.progress.blue33 .progress-left .progress-bar {
	animation: loading-44 1.5s linear forwards 1.8s;
}

.progress.blue44 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue44 .progress-value {
	color: #31c6ec;
}

.progress.blue44 .progress-left .progress-bar {
	animation: loading-55 1.5s linear forwards 1.8s;
}
.progress.blue55 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue55 .progress-value {
	color: #31c6ec;
}

.progress.blue55 .progress-right .progress-bar {
	animation: loading-66 1.5s linear forwards 0.2s;
}



@keyframes loading-22 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(122.4deg);
		transform: rotate(122.4deg);
	}
}

@keyframes loading-33 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(61.2deg);
		transform: rotate(61.2deg);
	}
}

@keyframes loading-44 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(36deg);
		transform: rotate(36deg);
	}
}

@keyframes loading-55 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(169.2deg);
		transform: rotate(169.2deg);
	}
}
@keyframes loading-66 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(25.2deg);
		transform: rotate(25.2deg);
	}
}


/*3*/
.progress.blue111 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue111 .progress-value {
	color: #31c6ec;
}

.progress.blue111 .progress-right .progress-bar {
	animation: loading-222 1.5s linear forwards 0.2s;
}

.progress.blue222 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue222 .progress-value {
	color: #31c6ec;
}

.progress.blue222 .progress-left .progress-bar {
	animation: loading-333 1.5s linear forwards 1.8s;
}

.progress.blue333 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue333 .progress-value {
	color: #31c6ec;
}

.progress.blue333 .progress-left .progress-bar {
	animation: loading-444 1.5s linear forwards 1.8s;
}

.progress.blue444 .progress-bar {
	border-color: #31c6ec;
}

.progress.blue444 .progress-value {
	color: #31c6ec;
}

.progress.blue444 .progress-left .progress-bar {
	animation: loading-555 1.5s linear forwards 1.8s;
}

@keyframes loading-222 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(68.4deg);
		transform: rotate(68.4deg);
	}
}

@keyframes loading-333 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(64.8deg);
		transform: rotate(64.8deg);
	}
}

@keyframes loading-444 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(50.4deg);
		transform: rotate(50.4deg);
	}
}

@keyframes loading-555 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(165.6deg);
		transform: rotate(165.6deg);
	}
}


/*@media only screen and (max-width: 990px) {
	.progress {
		margin-bottom: 20px;
	}
}*/
.wfremark{color:#fff;font-size:12px;margin: 0 auto 20px;max-width: 100%; display: block;float: left;}

@media (max-width:992px){
	
.wfremark{color: #fff;font-size: 0.16rem;margin: 0 auto 0.35rem;max-width: 100%; display: block;float: left;}	
.ratio {
	width: 2.56rem;
	float: left;
	position: relative;
	margin-bottom: 0.7rem;
	font-family: "Noto Sans S Chinese"; font-weight: 100;
}
.ratio .font-c{ color: #31c6ec;}
.ratio .ratio-r{ position: absolute; top:-0.05rem; left:0.8rem; text-align: left;}
.ratio .ratio-r h2{ font-size: 0.36rem; font-family: DIN; font-weight: normal; }
.ratio .ratio-r span{ font-size: 0.20rem; font-family: "Noto Sans S Chinese"; font-weight: 100; }

.progress {
	width: 0.68rem;
	height: 0.68rem;
	line-height: 0.68rem;
	background: none;
	/*margin: 0 auto;*/
	box-shadow: none;
	position: relative;
}



.progress:after {
	border: 0.03rem solid #fff;
	border-color: rgba(255, 255, 255, 0.2);
}


.progress .progress-bar {
	border-width: 0.03rem;
}

.progress .progress-value img{width: 0.44rem;}
/*.progress {margin-bottom: 0.2rem;}
	*/
	}