@charset "utf-8";

	#gFooter .bg-left,
	#gFooter .bg-center,
	#gFooter .bg-right {
		z-index: 0;
	}


	.content_title {
		position: relative;
		font-size: 24px;
		text-align: center;
		margin-bottom: 100px;
	}
	.content_title::before {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -5px;
		width: 55px;
		height: 1px;
		background-color: #000;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


@media only screen and (max-width:640px) {
	.content_title {
		font-size: 16px;
		margin-bottom: 40px;
	}
	.content_title::before {
		width: 25px;
	}
}


	.portfolioList {
		-webkit-display: flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	.portfolioList li {
		margin-top: 60px;
	}
	.portfolioList li:nth-child(-n+3) {
		margin-top: 0;
	}

	.portfolioList li a {
		color: #000;
	}

	.portfolioList .portfolio__image {
		margin-bottom: 15px;
		transition: .3s;
	}
	.portfolioList .portfolio__title h2 {
		font-size: 16px;
	}


	.portfolioList li a:hover .portfolio__image {
		opacity: .7;
	}

@media only screen and (max-width:640px) {
	.portfolioList li {
		width: 48%;
		margin-right: 4%;
		font-size: 8px;
	}
	.portfolioList li,
	.portfolioList li:nth-child(-n+3) {
		margin-top: 30px;
	}
	.portfolioList li:nth-child(-n+2) {
		margin-top: 0;
	}
	.portfolioList li:nth-child(2n) {
		margin-right: 0;
	}
	.portfolioList .portfolio__image {
		margin-bottom: 7px;
	}
	.portfolioList .portfolio__title h2 {
		font-size: 10px;
	}
}



	.slideBox {
		margin-bottom: 60px;
	}
	.slideBox .title__project {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.slideBox .title__sub {
		font-size: 14px;
		margin-bottom: 40px;
	}


	.slideBox .slider {
		margin-bottom: 22px;
	}

	@media only screen and (min-width:640px) {
		.slideBox .thumb .slides {
			width: 100% !important;
		}
	}
	.slideBox .thumb ul li {
		margin-top: 22px;
		margin-left: 22px;
		cursor: pointer;
		opacity: .7;
		transition: .3s;
	}
	.slideBox .thumb ul li:first-child {
		margin-left: 0;
	}
	.slideBox .thumb ul li:nth-child(-n+7) {
		margin-top: 0;
	}
	.slideBox .thumb ul li:nth-child(8n) {
		margin-left: 0;
	}

	.slideBox .thumb ul li:hover,
	.slideBox .thumb ul li.flex-active-slide {
		opacity: 1;
	}

@media only screen and (max-width:640px) {
	.slideBox {
		margin-bottom: 30px;
	}
	.slideBox .title__project {
		font-size: 14px;
		margin-bottom: 0;
	}
	.slideBox .title__sub {
		font-size: 10px;
		margin-bottom: 30px;
	}
	.slideBox .thumb ul li {
		margin: 0 22px 0 0;
	}
}