@charset "UTF-8";

/* -----------------------------------------------
 *  	         csr.css
 * ----------------------------------------------- */


/* =====================Article===================== */


/* ===== OTHER CSR LIST ===== */

ul.other_csr_list{
	width:100%;
	list-style:none;
	text-align:center;
	}
ul.other_csr_list li{
	display:inline-block;
	position:relative;
	width:13%;
	height: auto;
	margin-right:4.4%;
	margin-bottom:3%;
	background:no-repeat center center;
	background-size:cover;
	text-align:center;
	overflow:hidden;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
	}
ul.other_csr_list li::after{
	position:absolute;
	top:0;
	left:0;
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.3;
	z-index:50;
	overflow:hidden;
	}
ul.other_csr_list li img{
	display:none;
	}
ul.other_csr_list li a{
	display:block;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:100;
	}
ul.other_csr_list li p{
	display:block;
	position:absolute;
	height:45px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	color:#FFF;
	z-index:150;
	}
ul.other_csr_list li:hover{
	opacity:0.8;
	transition:0.6s;
	}

/* 768px */
@media only screen and (max-width: 48em) {
ul.other_csr_list li{
	width:20%;
	height: auto;
	margin-right:3%;
	margin-bottom:3%;
	}
}
/* 480px */
@media only screen and (max-width: 30em) {
ul.other_csr_list li{
	width:24%;
	height: auto;
	margin-right:2%;
	margin-bottom:2%;
	text-align:center;
	}
}


/* =====================DL===================== */


/* 1400px */
@media only screen and (max-width: 87.5em) {
}
/* 1024px */
@media only screen and (max-width: 64em) {
}
/* 960px */
@media only screen and (max-width: 60em) {
}
/* 768px */
@media only screen and (max-width: 48em) {
}
/* 720px */
@media only screen and (max-width: 45em) {
}
/* 600px */
@media only screen and (max-width: 37.5em) {
}
/* 480px */
@media only screen and (max-width: 30em) {
}
/* 320px */
@media only screen and (max-width: 20em) {
}