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

/* **************************
Special
************************** */
.special .inner{
    max-width: 960px;
    margin: auto;
    padding: 5% 0;
}

.special h1{
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 48px;
}

.special h1:after{
	border-bottom: solid 2px var(--main-color);
	display:block;
	content:"";
	width: 120px;
	margin:auto;
	padding-top:16px;
}

.special ul{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}

.special ul li {
	width: 46.5%;
	margin-bottom:48px;
}

.special ul li .img{
	border: solid 1px #C8C8C8;
	border-radius: 12px;
	overflow: hidden;
}

.special ul li:hover img{
	opacity:0.8;
    transform:scale(1.02,1.02);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
}

.special ul li h2{
	color: var(--main-color);
	font-size: 16px;
	font-weight:bold;
	padding:16px 0 8px;
}

.special ul li p{
	font-size: 14px;
}

@media screen and (max-width: 960px) {
.special .inner{
    padding: 5%;
}
}

@media screen and (max-width: 768px) {
	.special h1{
		font-size: 24px;
		margin-bottom: 24px;
	}

	.special h1:after{
		width: 40px;
		margin:auto;
		padding-top:16px;
	}

	.special ul li {
		width: 100%;
		margin-bottom: 48px;
	}

	.special ul li .img{
		width: 90%;
		margin:auto;
	}

	.special ul li img{
		width: 100%;
		height:auto;
	}

}