@media screen and (min-width: 600px) {
	.vs-grade-2{
		position: relative;
		width: 35vw;
		height: 15vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vs-grade-2 > div{
		font-size: 3.8vw;
		text-align: center;
		line-height: 4.5vw;
		position: relative;
		width: 35vw;
	}
	.vs-grade-2:first-child{
		animation: line3 .6s backwards ease-in;
	}
	.vs-grade-2:last-child{
		animation: line2 .6s backwards ease-in;
	}
	.vs-grade-2::before{
		content: "";
		position: absolute;
		width: 35vw;
		height: 15vw;
		left: 0;
		transform: skew(-15deg);
		background-color: rgba(255, 255, 255, .6);
	}

	.comp-box{
		width: 35vw;
		height: 3.5vw;
		background-color: #eee;
		border-radius: 3.5vw;
		margin: .8vw 2.5vw;
		position: relative;
		display: flex;
		overflow: hidden;
	}
	.comp-box > div{
		font-size: 1.5vw;
		line-height: 3.5vw;
		padding: 0 1.5vw;
		color: #000;
		font-weight: bold;
		z-index: 1;
		position: absolute;
		right: 0;
		top: 0;
	}
	.comp-box::before, .comp-box::after{
		content: "";
		position: relative;
		height: 3.5vw;		
	}
	#comp-ni-1::before{
		width: 30%;
		background-color: #bd7d57;
	}
	#comp-ni-1::after{
		width: 45%;
		background-color: #bd7d57;
		opacity: .6;
	}
	#comp-ni-2::before{
		width: 0%;
		background-color: #bd7d57;
	}
	#comp-ni-2::after{
		width: 30%;
		background-color: #bd7d57;
		opacity: .6;
	}
	#comp-cr-1::before{
		width: 0%;
		background-color: #FBA971;
	}
	#comp-cr-1::after{
		width: 35%;
		background-color: #FBA971;
		opacity: .6;
	}
	#comp-cr-2::before{
		width: 10%;
		background-color: #FBA971;
	}
	#comp-cr-2::after{
		width: 19%;
		background-color: #FBA971;
		opacity: .6;
	}
	#comp-mo-1::before{
		width: 0%;
		background-color: #B7C8B5;
	}
	#comp-mo-1::after{
		width: 32%;
		background-color: #B7C8B5;
		opacity: .6;
	}
	#comp-mo-2::before{
		width: 0%;
		background-color: #B7C8B5;
	}
	#comp-mo-2::after{
		width: 8%;
		background-color: #B7C8B5;
		opacity: .6;
	}
	#comp-fe-1::before{
		width: 1%;
		background-color: #aaa;
	}
	#comp-fe-1::after{
		width: 38%;
		background-color: #aaa;
		opacity: .6;
	}
	#comp-fe-2::before{
		width: 45%;
		background-color: #aaa;
	}
	#comp-fe-2::after{
		width: 41%;
		background-color: #aaa;
		opacity: .6;
	}
	.comp-ele{
		width: 35vw;
		margin: 1vw 2.5vw;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.comp-ele > div{
		width: 3.5vw;
		height: 3.5vw;
		font-size: 1.5vw;
		font-weight: bold;
		color: #fff;
		line-height: 3.5vw;
		border-radius: 3.5vw;
		text-align: center;
		margin: .5vw;
	}
	.comp-ph > div{
		font-size: 1.5vw;
		font-weight: bold;
		width: 25vw;
		height: 3.5vw;
		background-color: #eee;
		line-height: 3.5vw;
		border-radius: 1vw;
		margin: .5vw 0;
		text-align: center;
	}
}

@media screen and (max-width: 600px) {
	.vs-grade-2{
		position: relative;
		width: 70vw;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vs-grade-2 > div{
		font-size: 7.6vw;
		text-align: center;
		line-height: 9vw;
		position: relative;
		width: 70vw;
	}
	.vs-grade-2:first-child{
		animation: line3 .6s backwards ease-in;
	}
	.vs-grade-2:last-child{
		animation: line2 .6s backwards ease-in;
	}
	.vs-grade-2::before{
		content: "";
		position: absolute;
		width: 70vw;
		height: 30vw;
		left: 0;
		transform: skew(-15deg);
		background-color: rgba(255, 255, 255, .6);
	}

	.comp-box{
		width: 39vw;
		height: 7vw;
		background-color: #eee;
		border-radius: 7vw;
		margin: 1.6vw .5vw;
		position: relative;
		display: flex;
		overflow: hidden;
	}
	.comp-box > div{
		font-size: 3.8vw;
		line-height: 7vw;
		padding: 0 3vw;
		color: #000;
		font-weight: bold;
		z-index: 1;
		position: absolute;
		right: 0;
		top: 0;
	}
	.comp-box::before, .comp-box::after{
		content: "";
		position: relative;
		height: 7vw;		
	}
	#comp-ni-1::before{
		width: 30%;
		background-color: #bd7d57;
	}
	#comp-ni-1::after{
		width: 45%;
		background-color: #bd7d57;
		opacity: .6;
	}
	#comp-ni-2::before{
		width: 0%;
		background-color: #bd7d57;
	}
	#comp-ni-2::after{
		width: 30%;
		background-color: #bd7d57;
		opacity: .6;
	}
	#comp-cr-1::before{
		width: 0%;
		background-color: #FBA971;
	}
	#comp-cr-1::after{
		width: 35%;
		background-color: #FBA971;
		opacity: .6;
	}
	#comp-cr-2::before{
		width: 10%;
		background-color: #FBA971;
	}
	#comp-cr-2::after{
		width: 19%;
		background-color: #FBA971;
		opacity: .6;
	}
	#comp-mo-1::before{
		width: 0%;
		background-color: #B7C8B5;
	}
	#comp-mo-1::after{
		width: 32%;
		background-color: #B7C8B5;
		opacity: .6;
	}
	#comp-mo-2::before{
		width: 0%;
		background-color: #B7C8B5;
	}
	#comp-mo-2::after{
		width: 8%;
		background-color: #B7C8B5;
		opacity: .6;
	}
	#comp-fe-1::before{
		width: 1%;
		background-color: #aaa;
	}
	#comp-fe-1::after{
		width: 38%;
		background-color: #aaa;
		opacity: .6;
	}
	#comp-fe-2::before{
		width: 45%;
		background-color: #aaa;
	}
	#comp-fe-2::after{
		width: 41%;
		background-color: #aaa;
		opacity: .6;
	}
	.comp-ele{
		width: 40vw;
		margin: 1vw 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.comp-ele > div{
		width: 10.5vw;
		height: 10.5vw;
		font-size: 4.5vw;
		font-weight: bold;
		color: #fff;
		line-height: 10.5vw;
		border-radius: 10.5vw;
		text-align: center;
		margin: 1vw;
	}
	.comp-ph > div{
		font-size: 4.5vw;
		font-weight: bold;
		width: 30vw;
		padding: 2.5vw;
		height: 10.5vw;
		background-color: #eee;
		line-height: 5vw;
		border-radius: 3vw;
		margin: 1.5vw 7.5vw;
		text-align: center;
		display: inline-block;
	}
}