section{
	margin:0 auto 100px;
}

.topvis{
	position:relative;
	width:100%;
	margin:0 0 49px;
	font-size:0;
}
.topvis > img{
	position:absolute;
	top:calc(50% + 50px);
	left:50%;
	transform: translate(-50%,-50%);
	width:80%;
	max-width:1440px;
	z-index:10;
}
.topvis video{
	width:100%;
}

.categoryVis{
	display:grid;
	grid-template-columns:39.2% 60.8%;
	grid-template-rows: auto 137px;
	background:#fff url(../../img/bg01.svg) no-repeat;
}
.categoryVis li{
	position:relative;
}
.categoryVis li:nth-child(1){
	border-bottom:1px solid #CCC;
}
.categoryVis li:nth-child(2){
	font-size:0;
}
.categoryVis li:nth-child(3){
	grid-column-start: 1;
	grid-column-end: 2;
	padding:20px 0 0 40px;
	border-right:1px solid #CCC;
	color: #666;
	font-family: "Roboto Condensed";
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}
.categoryVis li h2{
	position:absolute;
	bottom:0;
	left:40px;
	color: #333;
	font-family: "Roboto Condensed";
	font-size: 48px;
	font-weight: 300;
}
.categoryVis li video{
	width:100%;
}
/*----------*/
.line{
	position: relative;
	padding:40px 0 0;
	background: linear-gradient(
		to right,
		transparent calc(50% - 62px),
		white calc(50% - 62px),
		white calc(50% + 62px),
		transparent calc(50% + 62px)
	);
}
.lead{
	padding:65px 6.94%;
	margin:0 auto 100px;
	background:#fff;
}
/*----------*/
.contents {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 124px;
	row-gap:103px;
	padding:0 0 100px;
}
.contents > li:nth-child(odd) {
	grid-column: 2;
}
.contents > li:nth-child(even) {
	grid-column: 1;
}

.article{
	position:relative;
	display:grid;
	grid-template-rows: auto;
}
.article li{
	position:relative;
}
/*右*/
.contents > li:nth-child(odd) .article{
	/*grid-template-columns:77.4% 22.6%;*/
	grid-template-columns: 7.74fr 2.26fr;
	background:#fff url(../../img/bg02.svg) no-repeat;
	background-position:right top;
}
/*左*/
.contents > li:nth-child(even) .article{
	margin:-58% 0 0;
	/*grid-template-columns:22.6% 77.4%;*/
	grid-template-columns: 2.26fr 7.74fr;
	background:#fff url(../../img/bg02.svg) no-repeat;
	background-position:left top;
}

/*date & tag area*/
.article li:nth-child(1){
	position:absolute;
	top:0;
	width:100px;
	border-bottom:1px solid #ccc;
	color: #666;
	text-align: right;
	font-family: "Roboto Condensed";
	font-size: 16px;
	font-weight: 300;
	line-height:1;
}
.contents > li:nth-child(odd) .article li:nth-child(1){
	left:-100px;
	padding:0 10px 5px 0;
	text-align:right;
}
.contents > li:nth-child(even) .article li:nth-child(1){
	right:-100px;
	padding:0 0 5px 10px;
	text-align:left;
}
/*img area*/
.article li:nth-child(2){
	grid-column-start: 1;
	grid-column-end: 3;
	font-size:0;
}
.contents > li:nth-child(even) .article li:nth-child(2){
	text-align:right;
}
.article li img{
	width:77.4%;
}
/*text area*/
.contents > li:nth-child(odd) .article li:nth-child(3), .contents > li:nth-child(even) .article li:nth-child(3){
	padding:28px 8px 28px 20px;
	font-size: 14px;
}
.contents > li:nth-child(even) .article li:nth-child(4){
	grid-column: 1;
	grid-row:2;
}
.article h4{
	margin:0 0 15px;
	color: #333;
	font-family: "Roboto Condensed";
	font-size: 24px;
	font-weight: 400;
	line-height:1;
}
/*view more*/
.contents > li:nth-child(odd) .article li:nth-child(4), .contents > li:nth-child(even) .article li:nth-child(4){
	padding:0;
	font-size:0;
}
.contents > li:nth-child(even) .article li:nth-child(3){
	grid-column: 2;
	grid-row:2;
}


@media screen and (max-width: 980px) {

	a.viewmore{
		position:absolute;
		bottom:0;
	}

	.topvis{
		position:relative;
		height:800px;
		padding:100px 0 0;
		overflow:hidden;
		text-align:center;
	}
	.topvis > img{
		width:90%;
	}
	.topvis video{
		position:absolute;
		height:100%;
		width:auto;
		left:50%;
		transform: translateX(-50%);
	}
	
	.categoryVis{
		display:flex;
		flex-wrap:wrap;
		background:#fff url(../../img/bg01.png) no-repeat;
		background-size:15%;
	}
	.categoryVis li{
		width:100%;
	}
	.categoryVis li:nth-child(1){
		order:2;
		padding:40px 0 0 6.38%;
		border:none;
	}
	.categoryVis li:nth-child(2){
		order:1;
		text-align:right;
		border-bottom:1px solid #CCC;
	}
	.categoryVis li:nth-child(3){
		order:3;
		padding:10px 0 20px 6.38%;
		font-size: 10px;
		border:none;
	}
	.categoryVis li h2{
		position:relative;
		font-size: 24px;
		left:0;
		line-height:1.2;
	}
	.categoryVis li video{
		width:80%;
		margin:0 0 0 auto;
	}
	/*----------*/
	.line{	
		position: relative;	
		padding:40px 0 0;
		background: linear-gradient(
			to right,
			transparent calc(50% - 50px),
			white calc(50% - 50px),
			white calc(50% + 50px),
			transparent calc(50% + 50px)
		);
	}
	.lead{
		padding:50px 6.8%;
		margin:0 auto 50px;
	}
	/*----------*/
	.contents {
		display: block;
		padding:0 0 6px;
	}
	.contents > li{
		margin:0 0 44px;
	}
	
	/*右*/
	.contents > li:nth-child(odd) .article{
		grid-template-columns:77.4% 22.6%;
		background:#fff url(../../img/bg02.png) no-repeat;
		background-position:right top;
		background-size:22.36%;
	}
	/*左*/
	.contents > li:nth-child(even) .article{
		grid-template-columns:22.6% 77.4%;
		margin:0;
		background:#fff url(../../img/bg02.png) no-repeat;
		background-position:left top;
		background-size:22.36%;
	}
	
	/*date & tag area*/
	.article li:nth-child(1){
		width:80px;
		font-size: 12px;
	}
	.contents > li:nth-child(odd) .article li:nth-child(1){
		top:-25px;
		left:calc(50% - 10px);
		transform: translateX(-50%);
		padding:0 0 2px 5px;
		text-align:left;
	}
	.contents > li:nth-child(even) .article li:nth-child(1){
		top:-25px;
		left:calc(50% - 10px);
		transform: translateX(-50%);
		padding:0 0 2px 5px;
	}
	/*img area*/
	.article li:nth-child(2){
		border-bottom:1px solid #CCC;
	}
	/*text area*/
	.contents > li:nth-child(odd) .article li:nth-child(3), .contents > li:nth-child(even) .article li:nth-child(3){
		padding:24px 5px 24px 20px;
		font-size: 13px;
		border-right:1px solid #CCC;
	}
	.article h4{
		margin:0 0 10px;
		font-size: 20px;
	}

}