/* video_list_module */
	.video_list_module {
		font-size:0;
		max-width:800px;
	}
	.video_list_module li{
		display:inline-block;
		vertical-align:top;
		width:calc(33.3% - 2.4rem);
		padding:0.8rem 0.8rem;
		margin:0.4rem 0.4rem;
		cursor:pointer;
		transition: all ease 0.4s;
		transform:translate3d(0, 0, 0);
		border:1px solid transparent;
		border-radius:4px;
	}
	.video_thum .icn{
		position:absolute;
		color:#FFE57F;
		font-size:4rem;
		z-index:100;
		opacity:0;
		top:70%;
		transition:all ease 0.4s;
	}
	.video_thum:after {
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background: rgba(0, 0, 0, 0);
		transition:all ease 0.4s;
	}
	@media screen and (min-width: 720px) {
		.video_list_module li:hover {
			transform:translate3d(0, -0.8rem, 0);
			border:1px solid #ddd;
			box-shadow:1px 1px 2px #eee;
			background:#f1f1f1;
		}
		.video_list_module li:hover .video_thum:after {
			background: rgba(0, 0, 0, 0.6);
		}
		.video_list_module li:hover .video_thum .icn {
			opacity:1;
			top:50%;
		}
	}
	.video_list_module li.on {
		transform:translate3d(0, -0.8rem, 0);
		border:1px solid #ddd;
		box-shadow:1px 1px 2px #eee;
		background:#f1f1f1;
	}
	.video_list_module li.on.video_thum:after {
		background: rgba(0, 0, 0, 0.6);
	}
	.video_list_module li.on .video_thum .icn {
		opacity:1;
		top:50%;
	}
	.video_tit {
		text-align:center;
		color: #555;
		font-size: 1rem;
		padding:0.8rem 0.4rem;
	}
/* video_list_module end */

/* time_line_module */
	.time_line_module {
		font-size:0;
		max-width:800px;
	}
	@media screen and (min-width: 720px) {
		.time_line_module::before {
			content: '';
			position: absolute;
			top: 0;
			bottom:0;
			left: 50%;
			margin-left: -2px;
			width: 4px;
			background: #B2DFDB;
		}
		.time_line_module li{
			padding:1.6rem 0;
			text-align:left;
		}
		.time_line_module li:before {
			font-family: "Material Icons";
			content: '\E87E';
			position:absolute;
			width: 4rem;
			height: 4rem;
			line-height:4rem;
			font-size:2.4rem;
			text-align:center;
			color:#fff;
			left: 50%;
			margin-left: -2rem;
			-webkit-transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			background: #B2DFDB;
			border-radius: 50%;
			box-shadow: 0 0 0 4px #E0F2F1, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 0 2px rgba(0, 0, 0, 0.1);
			cursor:pointer;
		}
			.time_line_module li:nth-child(7n+1):before {
				content: '\E80C';
			}
			.time_line_module li:nth-child(7n+2):before {
				content: '\E54E';
			}
			.time_line_module li:nth-child(7n+3):before {
				content: '\E54B';
			}
			.time_line_module li:nth-child(7n+4):before {
				content: '\E7F1';
			}
			.time_line_module li:nth-child(7n+5):before {
				content: '\E0E0';
			}
			.time_line_module li:nth-child(7n+6):before {
				content: '\E84F';
			}
			.time_line_module li:nth-child(7n+0):before {
				content: '\E0AF';
			}
		.year {
			position:absolute;
			left:50%;
			margin-left:4rem;
			top:2rem;
			padding:4px 0;
			font-size:2rem;
			font-weight:600;
			width:calc(50% - 4rem);
		}
		.detail_box {
			display:inline-block;
			vertical-align:top;
			width:calc(50% - 4rem);
			/*background: #E0F2F1;*/
			background: #fafafa;
			border-radius:4px;
			/*box-shadow: 0 3px 0 #B2DFDB;*/
			box-shadow: -3px 3px 0 #eee;
			padding:0.8rem 0.8rem;
			text-align:left;
		}
		.detail_box:before{
			content: '';
			position: absolute;
			top: 1rem;
			left: 100%;
			height: 0;
			width: 0;
			border: 12px solid transparent;
			/*border-left: 12px solid #E0F2F1;*/
			border-left: 12px solid #fafafa;
		}
		.detail {
			padding:0.4rem 0;
		}
		.date {
			display:inline-block;
			vertical-align:middle;
			color:#777;
			width:3rem;
			font-size:1rem;
		}
		.txt {
			display:inline-block;
			vertical-align:middle;
			color:#aaa;
			width:calc(100% - 3rem);
			font-size:1rem;
			word-break:keep-all;
		}
		
			.time_line_module li:nth-child(odd) {
				text-align:right;
			}
				.time_line_module li:nth-child(odd) .year {
					position:absolute;
					left:0;
					margin-left:0;
				}
				.time_line_module li:nth-child(odd) .detail_box {
					box-shadow: 3px 3px 0 #eee;
				}
				.time_line_module li:nth-child(odd) .detail_box:before{
					left: auto;
					right:100%;
				}
			.time_line_module li:nth-child(4n+0):before {
				background: #EC407A;
				box-shadow: 0 0 0 4px #F8BBD0, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 0 2px rgba(0, 0, 0, 0.1);
			}
				.time_line_module li:nth-child(4n+0) .detail_box{
					/*background: #FCE4EC;
					box-shadow: 0 3px 0 #F8BBD0;*/
				}
				.time_line_module li:nth-child(4n+0) .detail_box:before{
					/*border-left: 12px solid #FCE4EC;*/
				}
			.time_line_module li:nth-child(4n+1):before {
				background: #42A5F5;
				box-shadow: 0 0 0 4px #BBDEFB, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 0 2px rgba(0, 0, 0, 0.1);
			}
				.time_line_module li:nth-child(4n+1) .detail_box{
					/*background: #E3F2FD;
					box-shadow: 0 3px 0 #BBDEFB;*/
				}
				.time_line_module li:nth-child(4n+1) .detail_box:before{
					border-left:none;
					/*border-right: 12px solid #E3F2FD;*/
					border-right: 12px solid #fafafa;
				}
			.time_line_module li:nth-child(4n+2):before {
				background: #26A69A;
				box-shadow: 0 0 0 4px #B2DFDB, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 0 2px rgba(0, 0, 0, 0.1);
			}
				.time_line_module li:nth-child(4n+2) .detail_box{
					/*background: #E0F2F1;
					box-shadow: 0 3px 0 #B2DFDB;*/
				}
				.time_line_module li:nth-child(4n+2) .detail_box:before{
					/*border-left: 12px solid #E0F2F1;*/
				}
			.time_line_module li:nth-child(4n+3):before {
				background: #FFCA28;
				box-shadow: 0 0 0 4px #FFECB3, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 0 2px rgba(0, 0, 0, 0.1);
			}
				.time_line_module li:nth-child(4n+3) .detail_box{
					/*background: #FFF8E1;
					box-shadow: 0 3px 0 #FFECB3;*/
				}
				.time_line_module li:nth-child(4n+3) .detail_box:before{
					border-left:none;
					/*border-right: 12px solid #FFF8E1;*/
					border-right: 12px solid #fafafa;
				}
		}
	}
/* time_line_module end */