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

#mCSB_1_scrollbar_horizontal { height:0; overflow:hidden;}

main{ padding-bottom:0px;}

.layout {
	position: absolute;
	right: 0px;
	left: 0px;
	top: 30px;
	bottom: 0px;
	/*overflow-x: auto;
	overflow-y: hidden;
	
	scrollbar-face-color:#222;	 
	scrollbar-track-color:#111;
	scrollbar-arrow-color:#fff;	
	scrollbar-highlight-color:#000;
	scrollbar-shadow-color:#222;
	scrollbar-3Dlight-color:#fff;	
	scrollbar-darkshadow-color:#fff;*/
}
/*.layout::-webkit-scrollbar {
    width: 1em;
}
 
.layout::-webkit-scrollbar-thumb {
    background-color: #222;
}*/
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
	height:100%;
	margin:0 auto;
}
.mCSB_scrollTools{opacity:1;}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
	background:#222;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background:#222;
	border-radius:0;	
}

.free-wall { height: 100%;}

.brick{ 
	overflow:hidden; 
	cursor:pointer;
	background:center center no-repeat;
	background-size:cover;

}

.size01{ width:150px; height:125px;	}
.size02{ width:310px; height:125px;	}
.size03{ width:150px; height:250px;	}

.info{
	margin:10px;
	background:rgba(0, 0, 0, 0.8);
	text-align:center;
	opacity:0;
	filter:Alpha(Opacity = 0);
	
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.info:before{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

.name{
	/*font-family:"微軟正黑體", Arial, Helvetica, sans-serif;*/
	display:inline-block;
	vertical-align:middle;	
}

.brick:hover .info{
	opacity:1;
	filter:Alpha(Opacity = 100);
}

.blank{
	width:100%;
	height:100%;
	background:url(../images/portfolio/bg.jpg);
	cursor:default;
}

/*------------------------------------------
              Mobile 、Tablet
------------------------------------------*/

@media only screen and (max-width : 768px) {
	#arrow{		
		position:absolute;
		height:50px;
		width:50px;		
		right:0;
		top:50%;
		margin-top:-25px;
		z-index:99;
		/*display:none;*/
		
		background:url(../images/portfolio/arrow.png) center center no-repeat;
	}
	
/*	#note{
		position:absolute;
		height:50px;
		width:200px;		
		left:50%;
		top:0;
		margin-left:-100px;
		background:rgba(255, 255, 255, 0.8);
		z-index:99;
		display:none;
		
		line-height:50px;
		text-align:center;
		color:#000;
	}*/
}