/*===========================================
Homepage
===========================================*/
#contentContainer{
	padding-bottom:40px;
}
	#contentContainer::before{
		display:none;
	}
/*-------------------------------------------
how
-------------------------------------------*/
.howUse{
	position:relative;
	color:#fff;
	background-color:var(--main-color);
	background-image:url(../images/background-home.jpg);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	min-height:200px;
	padding:60px 0;
}
	.useStep{
		list-style:none;
		margin:0;
		padding:0;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		justify-content:space-around;
	}
		.useStep li{
			background-position:50% 0;
			background-repeat:no-repeat;
			flex:1 1 20%;
			position:relative;
			text-align:center;
			transition-delay:2s;
		}
		.useStep .step2{
			animation-delay:.2s;
		}
		.useStep .step3{
			animation-delay:.5s;
		}
		.useStep .step4{
			animation-delay:.8s;
		}
		.useStep .step5{
			animation-delay:1.1s;
		}
			.useStep .hidden{
				display:none;
			}
			.useStep strong{
				color:#fff;
				font-size:1.5rem;
			}
			.useStep .icon{
				display:block;
				margin:0 auto 20px;
				width:72px;
				height:72px;
				position:relative;
				background-repeat:no-repeat;
				background-position:50% 50%;
				background-size:contain;
			}
				.useStep .i-arrow{
					margin:0 auto;
					background-image:url(../images/home_step_arrow.svg);
					background-size:70%;
					opacity:.6;
				}
				.useStep .i-movie{background-image:url(../images/home_step_video.svg);}
				.useStep .i-test{background-image:url(../images/home_step_test.svg);}
				.useStep .i-final{background-image:url(../images/home_step_score.svg);}
			.useStep li .pass{
				color:#fff;
				font-size:1.25rem;
				position:absolute; top:50%; left:0;
				width:100%;
				text-align:center;
			}
@media screen and (max-width:992px){
	.howUse{
		padding:40px 0;
	}
}
@media screen and (max-width:568px){/* i5 Landscape */
	.useStep strong{
		font-size:1.25rem;
	}
	.useStep li .pass{
		font-size:1.125rem;
	}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	.howUse{
		min-height:160px;
		padding:30px 0;
	}
		.useStep .icon{
			width:60px;
			height:60px;
		}
		.useStep strong{
			font-size:4.5vw;
			position:absolute; left:0;
			white-space:nowrap;
		}
		.useStep li .pass{
			font-size:4vw;
		}
}
@media screen and (max-width:320px){/* i5 */
	.useStep .icon{
		width:54px;
		height:54px;
	}
}

/*-------------------------------------------
search
-------------------------------------------*/
.searchBlock{
	
}
	.searchBlock select[name="type_id"]{
		width:200px;
	}
	.searchBlock input[name="title"]{
		width:300px;
	}
@media screen and (max-width:568px){/* i5 Landscape */
	.searchBlock select[name="type_id"]{
		width:150px;
	}
	.searchBlock input[name="title"]{
		width:200px;
	}
}
@media screen and (max-width:440px){/* i16 Pro Max */
	.searchBlock{
		padding-top:0; padding-bottom:20px;
		margin-top:-20px; margin-bottom:20px;
	}
		.searchBlock select[name="type_id"],
		.searchBlock input[name="title"]{
			width:100%;
		}
}

/*-------------------------------------------
video list
-------------------------------------------*/
.videoList{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	margin:-15px -15px 0;
}
	.videoItem{
		flex:0 1 33.33333%;
	}
	.videoList .noneData{
		flex:0 1 100%;
		margin:0 20px;
	}
		.videoLink{
			display:block;
			position:relative;
			margin:15px;
			background-color:#fff;
			border-radius:5px;
			color:#333;
			min-height:480px;
			padding:5px;
		}
			.videoThumbnail{
				width:100%;
				height:0; /* 原225px */
				padding-bottom:56%;
				border-radius:5px 5px 0 0;
				overflow:hidden;
				background-color:var(--main-color);
				background-size:cover;
				background-repeat:no-repeat;
				background-position:50% 50%;
				position:relative; z-index:1;
			}
				.videoThumbnail:before,
				.videoThumbnail:after{
					display:block;
					content:"";
					position:absolute; left:0; top:0; right:0; bottom:0;
					transition:.2s;
				}
				.videoThumbnail:before{
					background-image:url(../images/icon-play.svg);
					background-size:74px auto;
					background-position:50% 50%;
					background-repeat:no-repeat;
					z-index:2;
					transform:scale(.5);
					opacity:0;
				}
				.videoThumbnail:after{
					background-color:rgba(0,0,0,.4);
					opacity:0;
				}
				.videoLink:hover .videoThumbnail:before,
				.videoLink:hover .videoThumbnail:after{
					opacity:1;
					transform:scale(1);
				}
			.videoInner{
				padding:15px;
				position:relative; z-index:2;
			}
				.videoHeader{
					margin-bottom:20px;
				}
					.videoHeader .videoType{
						color:#777;
						font-size:.75rem; line-height:1.3;
					}
					.videoHeader .videoTitle{
						color:#111;
						font-size:1.25rem; line-height:1.3;
						margin:0;
					}
					.videoLink:hover .videoTitle{
						color:var(--main-color);
					}
				.videoInfo{
					margin-top:3px;
					color:#333;
					/* font-size:.875rem; */
                    line-height:1.5;
				}
					.videoInfo .col-classDate,
					.videoInfo .col-classOpen{
						padding-bottom:12px;
					}
						.videoInfo label{
							color:#777;
							font-size:.75rem;
						}
						.videoInfo .col-classDate label,
						.videoInfo .col-classOpen label{
							display:block;
						}
						.videoInfo .col-score strong{
							color:#ff7e00;
						}
@media screen and (max-width:992px){
	.videoList{
		margin:-15px -15px 0;
	}
		.videoItem{
			flex:0 1 50%;
		}
			.videoLink{
				margin:15px;
			}
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .videoItem{
        flex:0 1 100%;
    }
        .videoInfo{
            font-size:4.25vw;
        }
}