.wrap_portfolo{
	display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

	display: -ms-flexbox;
	-ms-flex-direction: row;
	-ms-flex-wrap: wrap;
	-ms-flex-pack: justify;
	box-sizing:border-box;
}

.porfolio_box{
	position:relative;
	width:32.8%;
	height:auto;
	border:1px solid #ccc;
	min-width:300px;
	margin-bottom:13px;
	box-sizing:border-box;
	transition:0.3s;
	overflow:hidden;
}

.pb_img{
	position:relative;
	width:100%;
	height:300px;
	border-bottom:1px solid #e6e6e6;
	box-sizing:border-box;
}

.porfolio_box p{
  display: inline-block;
	width: 100%;
  padding: 0 10px;
	box-sizing: border-box;
	color:#666;
	text-align:center;
	line-height: 1.5;
	box-sizing:border-box;
}

.porfolio_box .pb_tit{
	color:black;
}

.portfolio_back{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	top:0;
	left:0;
	/* display: flex; */
	display:none;
  flex-flow: column;
  align-items: center;
  justify-content: center;
	box-sizing:border-box;
}

.portfolio_back p{color:white; box-sizing:border-box;}
.portfolio_back p:first-child{font-size:21px; margin-bottom:15px;}
.portfolio_back p:nth-child(2){font-size:18px; color:#aaa; margin-bottom:15px;}

.portfolio_back p:last-child{
	font-size:15px; 
	border:1px solid white; 
	display:flex;
	width: 100px;
  height: 30px;
	align-items: center;
  justify-content: center;
	box-sizing:border-box;
}




.porfolio_box:hover > .portfolio_back{
display:flex;
box-sizing:border-box;
}

.porfolio_box:hover > .pb_img {height:100%; box-sizing:border-box;}


.visible_br{
	display:none;
}


.porfolio_box .pb_tit.only_tit{
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.p1{background-image:url('/upload/board/protforio20210317170823705.jpg'); background-size:cover; background-position:center;}
.p2{background-image:url('/images/Mockup11.png'); background-size:cover; background-position:center;}
.p3{background-image:url('/upload/board/protforio20210317170341705.jpg'); background-size:cover; background-position:center;}
.p4{background-image:url('/upload/board/protforio20210323130636705.jpg'); background-size:cover; background-position:center;}
.p5{background-image:url('/images/Mockup5.png'); background-size:cover; background-position:center;}
.p6{background-image:url('/images/Mockup4.jpg'); background-size:cover; background-position:center;}
.p7{background-image:url('/upload/board/protforio20210716150420705.JPG'); background-size:cover; background-position:center;}
.p8{background-image:url('/images/Mockup2.jpg'); background-size:cover; background-position:center;}
.p9{background-image:url('/images/Mockup.jpg'); background-size:cover; background-position:center;}
.p10{background-image:url('/images/Mockup6.png'); background-size:cover; background-position:center;}
.p11{background-image:url('/upload/board/protforio20211123111734705.jpg'); background-size:cover; background-position:center;}
.p12{background-image:url('/images/Mockup7.png'); background-size:cover; background-position:center;}
.p13{background-image:url('/upload/board/protforio20220211152416705.jpg'); background-size:cover; background-position:center;}
.p14{background-image:url('/images/M14.jpg'); background-size:cover; background-position:center;}
.p15{background-image:url('/images/Mockup12.png'); background-size:cover; background-position:center;}
.p16{background-image:url('/upload/board/protforio20220216112642705.jpg'); background-size:cover; background-position:center;}
.p17{background-image:url('/images/M17.jpg'); background-size:cover; background-position:center;}
.p18{background-image:url('/upload/board/protforio20220411113937705.jpg'); background-size:cover; background-position:center;}
.p19{background-image:url('/images/M20.jpg'); background-size:cover; background-position:center;}
.p20{background-image:url('/images/M21.jpg'); background-size:cover; background-position:center;}
.p21{background-image:url('/images/M22.jpg'); background-size:cover; background-position:center;}
.p22{background-image:url('/images/M23.jpg'); background-size:cover; background-position:center;}
.p23{background-image:url('/images/M24.jpg'); background-size:cover; background-position:center;}
.p24{background-image:url('/images/M25.jpg'); background-size:cover; background-position:center;}
.p25{background-image:url('/images/M26.jpg'); background-size:cover; background-position:center;}
.p26{background-image:url('/images/M27.jpg'); background-size:cover; background-position:center;}
.p27{background-image:url('/images/M28.jpg'); background-size:cover; background-position:center;}
.p28{background-image:url('/images/M29.jpg'); background-size:cover; background-position:center;}
.p29{background-image:url('/images/M30.jpg'); background-size:cover; background-position:center;}
.p30{background-image:url('/images/M31.jpg'); background-size:cover; background-position:center;}
.p31{background-image:url('/images/M32.jpg'); background-size:cover; background-position:center;}
.p32{background-image:url('/images/M33.jpg'); background-size:cover; background-position:center;}
.p33{background-image:url('/images/M34.jpg'); background-size:cover; background-position:center;}
.p34{background-image:url('/images/M35.jpg'); background-size:cover; background-position:center;}
.p35{background-image:url('/images/M36.jpg'); background-size:cover; background-position:center;}
.p36{background-image:url('/images/M37.jpg'); background-size:cover; background-position:center;}
.p37{background-image:url('/images/M38.jpg'); background-size:cover; background-position:center;}
.p38{background-image:url('/images/M39.jpg'); background-size:cover; background-position:center;}
.p39{background-image:url('/images/M40.jpg'); background-size:cover; background-position:center;}
.p40{background-image:url('/images/S01.jpg'); background-size:cover; background-position:center;}

.op1{background-image:url('/upload/board/protforio20201113115039705.jpg'); background-size:cover; background-position:center;}
.op2{background-image:url('/upload/board/protforio20201113120957705.png'); background-size:cover; background-position:center;}
.op3{background-image:url('/images/M19.jpg'); background-size:cover; background-position:center;}
.op4{background-image:url('/upload/board/protforio20200525174551705.jpg'); background-size:cover; background-position:center;}
.op5{background-image:url('/upload/board/protforio20200525174146705.jpg'); background-size:cover; background-position:center;}
.op6{background-image:url('/upload/board/protforio20200408114824705.jpg'); background-size:cover; background-position:center;}
.op7{background-image:url('/upload/board/protforio20200408115233705.jpg'); background-size:cover; background-position:center;}
.op8{background-image:url('/upload/board/protforio20191212172314705.jpg'); background-size:cover; background-position:center;}
.op9{background-image:url('/upload/board/protforio20191016154440705.png'); background-size:cover; background-position:center;}
.op10{background-image:url('/upload/board/protforio20191016154056705.png'); background-size:cover; background-position:center;}
.op11{background-image:url('/upload/board/protforio20190620144435705.jpg'); background-size:cover; background-position:center;}
.op12{background-image:url('/upload/board/protforio20190620145248705.jpg'); background-size:cover; background-position:center;}
.op13{background-image:url('/upload/board/protforio20190620145705705.jpg'); background-size:cover; background-position:center;}
.op14{background-image:url('/upload/board/protforio20190620150117705.jpg'); background-size:cover; background-position:center;}
.op15{background-image:url('/upload/board/protforio20190625160544705.jpg'); background-size:cover; background-position:center;}
.op16{background-image:url('/upload/board/protforio20190620151337705.jpg'); background-size:cover; background-position:center;}
.op17{background-image:url('/upload/board/protforio20190620151349705.jpg'); background-size:cover; background-position:center;}
.op18{background-image:url('/upload/board/protforio20190620151401705.jpg'); background-size:cover; background-position:center;}
.op19{background-image:url('/upload/board/protforio20200526091548705.jpg'); background-size:cover; background-position:center;}
.op20{background-image:url('/upload/board/protforio20190620152145705.jpg'); background-size:cover; background-position:center;}
.op21{background-image:url('/upload/board/protforio20190620155135705.jpg'); background-size:cover; background-position:center;}
.op22{background-image:url('/upload/board/protforio20201113120957705.png'); background-size:cover; background-position:center;}
.op23{background-image:url('/upload/board/protforio20190620155106705.jpg'); background-size:cover; background-position:center;}
.op24{background-image:url('/images/Mockup12.png'); background-size:cover; background-position:center;}
.op25{background-image:url('/upload/board/protforio20190620155037705.jpg'); background-size:cover; background-position:center;}
.op26{background-image:url('/upload/board/protforio20190620155022705.jpg'); background-size:cover; background-position:center;}
.op27{background-image:url('/upload/board/protforio20190620155003705.jpg'); background-size:cover; background-position:center;}
.op28{background-image:url('/upload/board/protforio20190620154951705.jpg'); background-size:cover; background-position:center;}
.op29{background-image:url('/upload/board/protforio20190620154935705.jpg'); background-size:cover; background-position:center;}
.op30{background-image:url('/upload/board/protforio20190620154859705.jpg'); background-size:cover; background-position:center;}



@media (max-width:1100px){
	.width_wrap.new_portfolio_wrap{max-width:none;}
	.porfolio_box{width:49%; min-width:auto;}
	.portfolio_back p:first-child{font-size:20px;}
	.porfolio_box p{font-size:15px;}

}

@media (max-width:680px){
	.porfolio_box{width:99%;}
	.portfolio_back p:first-child{font-size:16px;}
	.porfolio_box p{font-size:14px;}
	.porfolio_box .pb_tit.only_tit{line-height:1.3;}
	.porfolio_box .pb_tit.only_tit{
		white-space:break-spaces; 
		height:40px;
		display: flex;
    align-items: center;
    justify-content: center;
	}
	.visible_br{display:block;}
	.none_br{display:none;}
	.porfolio_box{height:342px;}
}