/*------------------------------------------------------sort1*/
.sort1{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-top:40px;
	margin-bottom:40px;
	opacity: 0;
	animation: bottom 0.5s ease 0.7s forwards;
}
.sort1 div{
	width: 300px;
	background-color:#e5e5e5;
	color:#010101;
	cursor:pointer;
	border-radius:15px;
	padding:10px;
	margin:5px;
	text-align:center;
}
.sort1 div span{
	display:inline-block;
}
.sort1 div span.img{
	width:50px;
	height:49px;
	background-repeat:no-repeat;
	background-position:left center;
}

.sort1 div:nth-child(1){
	font-size:170%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.sort1 div:hover,
.sort1 div.sel{
	background-color:#2a82cf;
	color:#ffffff;
}
.sort1 div:hover .img,
.sort1 div.sel .img{
	background-position:right center;
}

/*------------------------------------------------------List1*/
.List1{
	display: flex;
	flex-wrap: wrap;
	opacity: 0;
	animation: bottom 0.5s ease 1s forwards;
}
.List1 div{
	width:23%;
	margin:1%;
	background-color:#f8f8f8;
	cursor:pointer;
	transition:none;
}
.List1 div:hover{
	color:#ffffff;
	background-color:#3582ea;
}
.List1 div span{
	display:block;
	text-align:center;
}
.List1 div span:nth-child(2){
	padding:10px;
	text-transform: capitalize;
}
.List1 div span.big{
	font-weight:bold;
	font-size:110%;
}
.List1 div span img{
	display:block;
	width:100%;
	margin:0 auto;
	border:0;
}
@media only screen and (max-width: 1200px){
	.List1 div{
		width:48%;
	}
}
@media only screen and (max-width: 600px){
	.List1 div{
		width:100%;
		margin:0;
		margin-bottom:15px;
	}
}

/*------------------------------------------------------List2*/
.List2 div{
	padding:40px;
	border-bottom:1px dotted #999999;
	cursor:pointer;
	opacity: 0;
}
.List2 div:nth-child(even){
	background-color:#f5f5f5;
}
.List2 div:hover{
	background-color:#2a82cf;
	color:#FFFFFF;
}
.List2 div DL{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-content:flex-start;
}
.List2 div DL DD{
	text-align:left;
}
.List2 div DL DD:nth-child(1){
	width:400px;
	margin-right:40px;
}
.List2 div DL DD:nth-child(2){
	width:100%;
}
.List2 div DL DD:nth-child(2) span{
	display:block;
	font-weight:lighter;
}
.List2 div DL DD:nth-child(2) span:nth-child(1){
	font-size:160%;
	line-height:150%;
}
.List2 div DL DD:nth-child(2) span:nth-child(2){
	font-size:130%;
	line-height:300%;
}
.List2 div DL DD:nth-child(2) span:nth-child(3){
	font-size:120%;
	color:#666666;
	line-height:200%;
}
.List2 div:hover DL DD span{
	color:#FFFFFF;
}
.List2 div:hover DL DD:nth-child(2) span:nth-child(3){
	color:#FFFFFF;
}
@media only screen and (max-width: 1200px){
	.List2 div{
		padding:20px;
	}
	.List2 div DL DD:nth-child(1){
		margin-right:20px;
	}
	.List2 div DL DD span:nth-child(3){
		display:none;
	}
}
@media only screen and (max-width: 800px){
	.List2{
		padding-top:20px;
		padding-bottom:20px;
	}
	.List2 div{
		padding:0;
	}
	.List2 div DL{
		flex-direction:column;
	}
	.List2 div DL DD:nth-child(1){
		width:100%;
		margin-right:0;
	}
	.List2 div DL DD:nth-child(1) img{
		width:100%;
	}
	.List2 div DL DD:nth-child(2){
		padding:10px;
	}
	.List2 div DL DD:nth-child(2) span:nth-child(1){
		font-size:120%;
	}
	.List2 div DL DD:nth-child(2) span:nth-child(2){
		font-size:120%;
	}
}

/*------------------------------------------------------show1*/
.show1{
	width:100%;
	max-width:1600px;
	padding:20px;
	padding-top:40px;
	padding-bottom:40px;
	text-align:left;
	line-height:150%;
	color:#666666;
	opacity: 0;
	animation: bottom 0.5s ease 1s forwards;
}
.show1 h1{
	text-align:center;
	color:#007eff;
	font-size:180%;
	margin:0;
	padding:0;
	margin-top:20px;
	margin-bottom:40px;
}
.show1 h2{
	font-size:140%;
	color:#000000;
	margin:0;
	padding:0;
	margin-top:10px;
	margin-bottom:20px;
}
.show1 p{
	text-indent: 2em;
	line-height:200%;
}
.show1 img{
	display: block;
	margin: auto;
	max-width:100%;
}

/*-----------------------------------------partner*/
.partnerw{
	padding:40px;
}
@media only screen and (max-width: 1000px){
	.partnerw{
		padding:20px;
	}
}

.partner{
	display: flex;
	flex-wrap: wrap;
	opacity: 0;
	animation: bottom 0.5s ease 1s forwards;
}
.partner div{
	width:12.5%;
	padding:20px;
	border:1px solid #f1f1f1;
	background-color:#FFFFFF;
}
.partner div span{
	display:block;
	text-align:center;
}
.partner div span:nth-child(1) img{
	max-width:130px;
	max-height:60px;
}
.partner div span:nth-child(2){
	margin-top:10px;
	color:#999999;
}
@media only screen and (max-width: 1400px){
	.partner div{
		width:20%;
	}
}
@media only screen and (max-width: 1000px){
	.partner div{
		width:25%;
	}
}
@media only screen and (max-width: 500px){
	.partner div{
		width:50%;
	}
}