@charset "UTF-8";
/* CSS Document */


/* ARTICLES */
#articles {padding: 100px 0;}
#articles * {box-sizing: border-box;}
#articles .listItem li {width: 31%; margin: 0 3.5% 3.5% 0; position: relative; padding-bottom: 40px;}
#articles .listItem li:nth-of-type(3n) {margin: 0 0 3.5% 0;}
#articles .listItem li .thumbImg {display: block; border-radius: 10px; overflow: hidden; height: 200px; max-height: 200px; margin-bottom: 10px;}
#articles .listItem li .thumbImg img {height: 100%;}
#articles .listItem li a {color: #223062; text-decoration: none;}
#articles .listItem li a:hover {opacity: 0.6;}
#articles .listItem li .tit {margin-bottom: 10px; line-height: 1.7;}
#articles .listItem li .cate {margin-bottom: 10px; position: absolute; left: 0; bottom: 0;}

#articles .page-numbers li {display: inline-block;}
#articles .page-numbers li a {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; color: #fff; font-size: 14px; line-height: 1; height: 30px; width: 50px; color: #fff; background: #ccc; border-radius: 5px; font-weight: bold; text-decoration: none;}
#articles .page-numbers li a:hover {background: #223062;}
#articles .page-numbers li .current {display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; color: #fff; font-size: 14px; line-height: 1; height: 30px; width: 50px; color: #fff; background: #223062; border-radius: 5px; font-weight: bold; text-decoration: none;}

@media screen and ( max-width:767px ) {
	#articles {padding: 60px 0 100px;}
	#articles .listItem li {width: 100%; margin: 0 0 20px 0 !important; padding: 0;}
	#articles .listItem li .cate {position: static;}
	#articles .listItem li .thumbImg {height: auto; max-height: unset;}
	#articles .page-numbers li {margin-bottom: 10px;}
}