.slideboxImgPerPro{
width: 100%; height: 120px; min-height:120px;
}
.period{color:#99b0bc; font-size:24px; font-family:'Barlow Condensed', sans-serif; font-weight:700; display:block;}
.project-title{color:var(--text-header); font-size:24px; font-family:'Barlow Condensed', sans-serif; font-weight:700; display:block;}

.procolor{
color:#7eafcf;
font-size:15px;
}

.project-box p a{color:#fff;}

#detail h2, #detail h4{font-family:'Barlow Condensed', sans-serif; font-weight:700;}

#detail h2{font-size:42px; color:var(--text-header); text-align:center;}

.inner-pro-list{padding:20px 0px;}

backward { 
     display: inline-block;
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1);  
    transform: scale(-1, 1); 
} 

.pro-flex{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
margin-left:-25px;
margin-right:-25px;
}


.project-box{position:relative; padding:20px 20px; width:25%; margin:0 auto;}
.project-box > div{width:90%; margin:0 auto; background-color:rgba(255,255,255,0.12); padding:12px; text-align:left;}

.project-box > div{opacity:0.85;cursor:pointer;}
.project-box > div:hover{opacity:1;}

.project-box > div > div a{font-weight:bold;}

#detail{display:none; position:relative; z-index:2;}
#video{display:none;}

#container{margin-top:25px; text-align:left;}

#bd{position:relative; z-index:2;}
#contents > div{margin-top:15px;}

.video-pro{max-width:640px; min-width:230px; margin:0 auto;}

.content-pro-title{font-family:'Barlow Condensed', sans-serif; font-size:32px; font-weight:700; display:block;}
.description a{font-family:'Barlow', sans-serif; font-size:18px; color:var(--text-body);}
.alt{font-family:'Barlow Condensed', sans-serif; font-size:14px;}

.description-text{font-size:14px; margin-top:10px;}

.inner-pro-detail{
padding:40px 25px;
}

.project-flex{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
margin-left:-20px;
margin-right:-20px;
}

.lightbox-return{font-family:'Barlow', sans-serif; cursor:pointer; font-size:16px; margin-top:15px; display:inline-block;}

.lightbox-pro-close{
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	border:none;
	cursor: pointer;
	background: var(--btn-content);
	color: #fff;
	font-weight:700;
	padding: 8px;
	font-size:16px;
	border-radius:5px;
	font-family:'Barlow Condensed', sans-serif;
	}

.lightbox-content-box-pro{
position:relative;
padding:20px;
max-width:1400px;
margin:auto;
background-color:rgba(255,255,255,0.10);
-webkit-overflow-scrolling: touch;
}


.lightbox-video-box-pro{
position:relative;
padding:20px;
max-width:680px;
margin:auto;
background-color:rgba(255,255,255,0.10);
-webkit-overflow-scrolling: touch;
}

.project-detail{padding:15px;
display: -ms-flexbox;
display: -webkit-flex;
  display: flex;
justify-content: flex-start;align-items:flex-start;
  }

.project-detail-docs{
padding:20px;
}


.content-box-pro{width:160px; padding:20px;}

#video .lightbox-close{top:-50px;right:-20px; width:40px; height:40px; border-radius:50%; font-size:18px; background: transparent; }

.brd{border:3px solid #fff;}

.banner-box{width:340; height:290px; padding:20px;}

@media(max-width: 1024px) {
.project-box{width:33.3%;}
}


@media(max-width: 820px) {
.project-box {width:50%;}
.project-box > div{width:260px;}
}

@media(max-width: 620px) {
.project-box{width:320px;}
.pro-flex{display:block;}
}


@media(max-width: 360px) {
.mainMenuPro{margin-top:15px;margin-left:10px; font-size:16px;}
.content-box-pro{width:50%; padding:10px;}
.project-flex{margin-left:-10px; margin-right:-10px;}
.project-detail-docs{padding:0px;}
}