:root {
	--rs: 1px;
}

.banner{ background: #000; position: relative; margin-top: 40px;}
.banner .bannerText{ width: 100%; font-size: 50px; text-align: center; color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.banner .img{ text-align: center;}

#contents { margin:80px 0 ;}
#contents .tit{ margin-bottom: 20px;}
#contents .tit h2{ font-size: 18px; font-weight: 500;}
#contentList{ display: flex; flex-wrap: wrap; margin: 0 -10px 30px;}
#contentList li{ width: 25%; padding: 0 10px; margin-bottom: 20px;}
#contentList li dl{ padding-bottom: 56%;}
#contentList li h3{ font-size: 16px;  border: 1px solid #e5e5e5; border-top: none; padding: 15px;}
#contentList li a:hover{ text-decoration: none;}

.view{ width: 900px; padding: 50px 0 80px; margin: 50px auto 0;}
.view header{ border-bottom: 1px solid #e5e5e5;}
.view header h1{ font-size: 20px; font-weight: bold; margin-bottom: 25px;}
.view #main{ margin: 20px 0 0;}
.view p{margin: 2em 0 0;}
.view footer {margin:70px 0 0;}
.view footer > nav {position:relative; padding:0 8em; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; font-size:15px; text-align:center;}
.view footer > nav > a, 
.view footer > nav > span {display:inline-block; padding:1.2em 0.5em;}
.view footer > nav > a {text-decoration:none;}
.view footer > nav > span.current {font-weight:bold;}
.view footer > nav > a.prev, 
.view footer > nav > a.next {position:absolute;}
.view footer > nav > a.prev::after, 
.view footer > nav > a.next::after {display:block; position:absolute; top:50%; margin:-0.5em 0 0; font:14px/1 icons;}
.view footer > nav > a.prev {left:0;  padding-left:22px;}
.view footer > nav > a.next {right:0; padding-right:22px;}



.cm-ctsWidth {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.cm-ctsWidth--large {
	max-width: 1600px;
}
.cm-ctsWidth--max {
	max-width: 2560px;
}
.cm-ctsOverflow {
	margin-left: calc(-180 * var(--rs));
	margin-right: calc(-180 * var(--rs));
}

@media screen and (max-width: 1280px) {
	.cm-ctsWidth{ padding: 0 calc(40 * var(--rs));}
	#footer{ padding: 0 calc(40 * var(--rs));}
}

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

	.cm-ctsWidth {padding: 0 20px;}

    .banner .bannerText{ font-size: 18px;}
    section { margin:45px 0 60px;}
	#contents { margin: 50px 0;}
    #contents .tit { margin-bottom: 15px; }
    #contents .tit h2{ font-size: 17px;}
    #contentList{margin: 0 -5px 30px;}
    #contentList li{ width: 50%; padding: 0 5px; margin-bottom: 10px;}
    #contentList li h3{ font-size: 15px; padding: 10px;}

    .view{ width:100%; padding: 10px 0 60px; font-size: 14px;}
}


.imgBoxCover{ padding-bottom: 75%; position: relative; overflow: hidden;}
.imgBoxCover img{ width: 100%; height: 100%; position:absolute;top:0;bottom:0;left:0;right:0; margin:auto; -o-object-fit: cover; object-fit: cover;}
.imgBoxAuto{ padding-bottom: 75%; position: relative; overflow: hidden;}
.imgBoxAuto img{ position:absolute;top:0;bottom:0;left:0;right:0; margin:auto;}

.text-cut {	text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.text-cut-2 { overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical;}
.text-cut-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;	-webkit-box-orient: vertical;}