/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
ol,ul {
	list-style:none;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
h1 {
	font-size:30px;
	font-weight:600;
}
h2 {
	font-size:20px;
	font-weight:600;
}
/* General Style */
body {
    font-family: 'Open Sans', sans-serif;
	background: #fff;
	font-weight: 400;
	font-size: 16px;
	color: #000;
    padding:60px 20px;
}
a {
	color: #000;
	text-decoration: none;
}

.mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay at start */
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; } /* overlay animate in */
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* overlay animate out */
.mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* content at start */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate it */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* content animate out */

.m-ttl { text-align: center; }
.m-lst { max-width: 1800px; margin: 60px auto 0 auto; }
.m-lst ul { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 50px 30px; align-items: center; }
.m-lst ul li { }
.m-lst ul li .li-img { }
.m-lst ul li .li-img img { display: block; max-width: 100%; height: auto; }
.m-lst ul li .li-ttl { margin-top: 20px; text-align: center; }

@media screen and (max-width: 1400px) {
.m-lst ul { grid-template-columns: repeat(3,1fr); grid-gap: 40px 20px; }	
}

@media screen and (max-width: 992px) {
body {
    padding:30px 20px;
}
.m-lst ul { grid-template-columns: repeat(2,1fr); }	
}
@media screen and (max-width: 767px) {
body {
    padding:30px 10px;
}
.m-lst { margin-top: 30px; }
.m-lst ul { grid-template-columns: repeat(1,1fr); grid-gap: 20px 0; }	
}