@charset "utf-8";


#news-list {}
#news-list .inner-sct { padding: 80px 0 150px;}
#news-list .ctn { width: 92%; max-width: 1280px; margin: 0 auto 80px; font-size: 0;}
#news-list .ctn .box { display: inline-block; width: 33.333334%; padding: 30px 0 40px; vertical-align: top;}
#news-list .ctn .box a { display: block; width: 92%; max-width: 420px; margin: 0 auto; box-shadow: 12px 12px 0 #333; color: #333; font-weight: 700; text-decoration: none;}
#news-list .ctn .box a dl dt { position: relative; width: 100%; padding-top: 74%; overflow: hidden;}
#news-list .ctn .box a dl dt img { position: absolute; left: 50%; top: 50%; width: auto; height: 100%; transform: translate(-50%,-50%); transition: 0.3s linear;}
#news-list .ctn .box a dl dd.cate{ position: relative; padding: 5px 20px; font-size: 18px; font-size: min(1.15vw,18px);}
#news-list .ctn .box a dl dd.cate.cate-topics,
#news-list .ctn .box a dl dd.cate.cate-news { background: #FFB300;}
#news-list .ctn .box a dl dd.cate.cate-event { color: #fff; background: #003C88;}
#news-list .ctn .box a dl dd.cate.cate-ex { color: #fff; background: #947151;}
#news-list .ctn .box a dl dd.cate.cate-media { color: #fff; background: #003C88;}
#news-list .ctn .box a dl dd.cate.cate-works { color: #fff; background: #947151;}
#news-list .ctn .box a dl dd.cate time { position: absolute; right: 20px; top: 5px; }
#news-list .ctn .box a dl dd.tit { padding: 20px; font-size: 24px; font-size: min(1.45vw,24px);}
#news-list .ctn .box a:hover dl { opacity: 0.8;}
#news-list .ctn .box a:hover dl dt img { transform: translate(-50%,-50%) scale(1.04);}


.nav-links { position: relative; width: 90%; max-width: 460px; margin: 0 auto; padding: 0 60px; }
.nav-links ul { font-size: 0; text-align: center;}
.nav-links ul li { display: inline-block; width: 42px; margin: 0 6px; font-size: 16px; vertical-align: middle;}
.nav-links ul li a { position: relative; display: block; width: 100%; height: 40px; height: 40px; line-height: 38px;
 color: #333; font-weight: 700; text-align: center; text-decoration: none;}
.nav-links ul li a.page-numbers { border: solid 1px #333; border-radius: 50%;}
.nav-links ul li a.prev,
.nav-links ul li a.next { border: none;}
.nav-links ul li a.prev:before,
.nav-links ul li a.next:before { content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 50%;}
.nav-links ul li a.prev:before { left: 15px; border-bottom: solid 3px #333; border-left: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.nav-links ul li a.next:before { right: 15px; border-top: solid 3px #333; border-right: solid 3px #333; transform: translateY(-50%) rotate(45deg);}
.nav-links ul li span.current { display: block; width: 100%; height: 40px; height: 40px; line-height: 38px;
 background: #333; border: solid 1px #333; border-radius: 50%;
 color: #fff; font-weight: 700; text-align: center; text-decoration: none;
}


#news-list .pager { position: relative; width: 82%; max-width: 420px; margin: 0 auto; padding: 0 60px;}
#news-list .pager .next,
#news-list .pager .prev { position: absolute; width: 40px; height: 40px; top: 50%; transform: translateY(-50%);}
#news-list .pager .next { right: 0;}
#news-list .pager .prev { left: 0;}
#news-list .pager .next a,
#news-list .pager .prev a { position: relative; display: block; width: 100%; height: 100%; text-indent: -9999em;}
#news-list .pager .next a:before,
#news-list .pager .prev a:before { content: ''; display: block; width: 28px; height: 28px; position: absolute; top: 50%;}
#news-list .pager .next a:before { left: 0; border-top: solid 4px #000; border-right: solid 4px #000; transform: translateY(-50%) rotate(45deg);}
#news-list .pager .prev a:before { right: 0; border-bottom: solid 4px #000; border-left: solid 4px #000; transform: translateY(-50%) rotate(45deg);}
#news-list .pager .next a:hover:before,
#news-list .pager .prev a:hover:before { border-color: #FFB300;}
#news-list .pager ul { font-size: 0; text-align: center;}
#news-list .pager ul li { display: inline-block; padding: 6px; font-size: 21px; font-weight: 700; vertical-align: middle;}
#news-list .pager ul li span,
#news-list .pager ul li a { display: block; width: 42px; height: 42px; line-height: 42px; border: solid 1px #000; border-radius: 50%;
 color: #000; line-height: 40px; text-decoration: none;
}
#news-list .pager ul li span { background: #000; color: #fff;}
#news-list .pager ul li a:hover { color: #FFB300;}

@media (max-width: 1281px) {
	#news-list .ctn .box a { box-shadow: 8px 8px 0 #333;}
}
@media (max-width: 1001px) {
	#news-list .inner-sct { padding: 40px 0 100px;}
	#news-list .ctn .box { padding: 20px 0 30px;}
}
@media (max-width: 801px) {
	#news-list .ctn .box { width: 50%; padding: 12px 0 20px;}
	#news-list .ctn .box a dl dd.cate{ padding: 4px 20px; font-size: 16px;}
	#news-list .ctn .box a dl dd.tit { padding: 12px 20px; font-size: 18px;}
}
@media (max-width: 481px) {
	#news-list .ctn .box { display: block; width: 100%; padding: 12px 0 16px;}
	#news-list .ctn .box a dl dd.cate{ font-size: 13px;}
	#news-list .ctn .box a dl dd.tit { font-size: 16px;}

	#news-list .pager { padding: 0 40px;}
	#news-list .pager .next,
	#news-list .pager .prev { width: 30px; height: 30px;}
	#news-list .pager .next a:before,
	#news-list .pager .prev a:before { width: 20px; height: 20px;}
	#news-list .pager ul li { padding: 4px; font-size: 16px;}
	#news-list .pager ul li span,
	#news-list .pager ul li a { width: 36px; height: 36px; line-height: 36px; line-height: 34px;}
}


#news-article {}
#news-article .inner-sct { padding: 80px 0 150px;}
#news-article .article-ctn { width: 92%; max-width: 1000px; margin: 0 auto 80px; padding-bottom: 90px; border-bottom: solid 1px #000;}
#news-article .article-hd { margin-bottom: 100px; text-align: center;}
#news-article .article-hd p { margin-bottom: 20px; font-size: 18px; font-size: min(1.15vw,18px);}
#news-article .article-hd p span { display: block; width: 80%; max-width: 200px; margin: 0 auto; padding: 2px 10px;}
#news-article .article-hd p span.cate-topics,
#news-article .article-hd p span.cate-news { background: #FFB300;}
#news-article .article-hd p span.cate-media { color: #fff; background: #003C88;}
#news-article .article-hd p span.cate-works { color: #fff; background: #947151;}
#news-article .article-hd h2 { margin-bottom: 40px; font-size: 42px; font-size: min(3.0vw,42px); font-weight: 700; letter-spacing: 0.05rem; text-align: center;}
#news-article .article-hd .date { position: relative; width: 100%;}
#news-article .article-hd .date:after { content: ''; display: block; width: 100%; height: 1px; background: #000; position: absolute; left: 0; top: 50%; z-index: 1;}
#news-article .article-hd .date time { position: relative; display: inline-block; padding: 0 30px; background: #fff; z-index: 2;
 font-size: 18px; font-size: min(1.15vw,18px); font-weight: 700;
}
#news-article .article-ctn figure { margin-bottom: 60px; text-align: center;}
#news-article .article-ctn figure img { width: 100%;}
#news-article .article-ctn .ctn p { letter-spacing: 0.05rem;}

@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	#news-article .article-hd p { font-size: 16px;}
	#news-article .article-hd h2 { font-size: 5.0vw;}
	#news-article .article-hd .date time { font-size: 16px;}
}
@media (max-width: 641px) {
	#news-article .article-hd h2 { font-size: 36px;}
}
@media (max-width: 481px) {
	#news-article .inner-sct { padding: 40px 0 80px;}
	#news-article .article-ctn { margin: 0 auto 40px; padding-bottom: 50px;}
	#news-article .article-hd { margin-bottom: 40px;}
	#news-article .article-hd p { margin-bottom: 12px; font-size: 13px;}
	#news-article .article-hd h2 { margin-bottom: 20px; font-size: 24px; line-height: 1.4;}
	#news-article .article-hd .date time { font-size: 13px;}
	#news-article .article-ctn figure { margin-bottom: 30px;}
	#news-article .article-ctn .ctn p { font-size: 13px;}
}