/*portfolio*/
.portfolio-info{
	margin-top:60px;
}
.portfolio-info .portfolio-detail{
	position: relative;
	float:left;
	width: 370px;
	height: 370px;
	background: center center no-repeat;
	cursor: default;
}
.portfolio-info .hover3d-container + .hover3d-container{
	margin-left:30px;
}
.portfolio-info .portfolio-detail.portfolio-first{
	background-image: url("../images/portfolio0.jpg");
}
.portfolio-info .portfolio-detail.portfolio-second{
	background-image: url("../images/portfolio1.jpg");
}
.portfolio-info .portfolio-detail.portfolio-third{
	background-image: url("../images/portfolio2.jpg");
}
.section-opa-container .section-opa-border{
	position: absolute;
	top:15px;
	left:15px;
	width: 340px;
	height: 340px;
	background: url("../images/portfolio.png") center center no-repeat;
}

/*pad media*/
@media screen and (max-width:1023px){
	/*portfolio*/
	.mobile-body .portfolio-info .portfolio-detail{
		height: 345px;
	}
	.mobile-body .portfolio-info .section-opa-border{
		width: 315px;
		height: 315px;
		background-size: contain;
	}
}

/*phone media*/
@media screen and (max-width:767px){
	/*portfolio*/
	.mobile-body .portfolio-info .section-opa-box{
		padding-top:108px;
	}
	.mobile-body .portfolio-info .portfolio-detail{
		height: 336px;
	}
	.mobile-body .portfolio-info .section-opa-border{
		width: 306px;
		height: 306px;
	}
}

/*phone media for iphone6*/
@media screen and (max-width:413px){
	/*portfolio*/
	.mobile-body .portfolio-info .section-opa-box{
		padding-top:88px;
	}
	.mobile-body .portfolio-info .portfolio-detail{
		height: 304px;
	}
	.mobile-body .portfolio-info .section-opa-border{
		width: 274px;
		height: 274px;
	}
}

/*phone media for iphone5*/
@media screen and (max-width:374px){
	/*portfolio*/
	.mobile-body .portfolio-info .section-opa-box{
		padding-top:68px;
	}
	.mobile-body .portfolio-info .portfolio-detail{
		height: 260px;
	}
	.mobile-body .portfolio-info .section-opa-border{
		width: 230px;
		height: 230px;
	}
}