@charset "utf-8";

.Titem-info .P-tital {bottom:0%;}
.Titem-type-move .Titem-hover:hover .Titem-info:hover .P-tital {bottom:50%;font-size: 150%;line-height: 20px;}
.Titem-info .view {bottom:0%;}
.Titem-info:hover .view {bottom:15%;}
.T_box{
	float: left;
	display: inline-block;
	width: calc(100% - 2% - 2px);
	margin: 15px 1%;
	padding:0px;
 }
 

@media only screen and (min-width: 480px) {
.Titem-info .P-tital {bottom:0%;}
.Titem-type-move .Titem-hover:hover .Titem-info:hover .P-tital {bottom:40%;font-size: 150%;	line-height: 20px;}
.Titem-info .view {bottom:0%;}
.Titem-info:hover .view {bottom:15%;}
.T_box{
	float: left;
	display: inline-block;
	width: calc(100% - 2% - 2px);
	margin: 15px 1%;
	padding:0px;
 }
}
@media only screen and (min-width: 768px) {

.Titem-info .P-tital {bottom:0%;}
.Titem-type-move .Titem-hover:hover .Titem-info:hover .P-tital {bottom:40%;font-size: 140%;line-height: 20px;}
.Titem-info .view {bottom:0%;}
.Titem-info:hover .view {bottom:15%;}

.T_box{
	float: left;
	display: inline-block;
	width: calc(100% / 2 - 2% - 2px);
	margin: 15px 1%;
	padding:0px;
 }
}
@media only screen and (min-width: 1024px) {

.Titem-info .P-tital {bottom:0.5%;}
.Titem-type-move .Titem-hover:hover .Titem-info:hover .P-tital {bottom:40%;font-size: 140%;line-height: 20px;}
.Titem-info .view {bottom:0%;}
.Titem-info:hover .view {bottom:15%;}
.T_box{
	float: left;
	display: inline-block;
	width: calc(100% / 2 - 2% - 2px);
	margin: 15px 1%;
	padding:0px;
 }
}
@media only screen and (min-width: 1280px) {

}
@media only screen and (min-width: 1680px) {

.Titem-info .P-tital {bottom:0%;}
.Titem-type-move .Titem-hover:hover .Titem-info:hover .P-tital {bottom:40%;font-size: 150%;line-height: 20px;}
.Titem-info .view {bottom:0%;}
.Titem-info:hover .view {bottom:15%;}

.T_box{
	float: left;
	display: inline-block;
	width: calc(100% / 3 - 2% - 2px);
	margin: 15px 1%;
	padding:0px;
 }
 
}
.Titem{
	position: relative;
	clear: none;
	float: left;
	display: inline-block;
	width: calc(100%);
	padding: 0;
	margin: 0;
	overflow: hidden;
	text-align: center;
	border:0;
}

.Titem-type-move{}
.Titem-hover,.Titem-hover .mask,.Titem-type-move .Titem-info{clear: none;float: left;width: 100%;height:100%}		
.Titem-type-move .Titem-info {z-index:1;color:#ffffff;position:relative;overflow:hidden;}

.Titem-hover,.Titem-hover .mask,.Titem-img {position:absolute;top:0;left:0;}

.Titem-type-move .Titem-hover {
	transition: all 0.5s ease-out;
	opacity:1;
	cursor:pointer;
	z-index:2;
}

.Titem-info .P-tital{
	width: 100%;
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	font-size: 110%;
	color: #FFF;
	transition: all 0.5s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 2px 0 5px 0;
	line-height: 40px;
	height:40px;
	opacity:1;
			}
.Titem-info:hover .P-tital{
	width: 100%;
	position: absolute;
	background-color: rgba(0,0,0,0);
	color: #FFF;
	transition: all 0.5s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 2px 0 5px 0;
	opacity:1;
	font-weight: bold;	
}	
	
.Titem-info .view{
	width: 100%;
	position: absolute;
	font-size: 105%;
	color: #999;
	transition: all 0.5s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 2px 0 5px 0;
	line-height: 30px;
	opacity: 0;
			}
.Titem-info:hover .view{
	position: absolute;
	width: 100%;
	font-size: 105%;
	color: #CCC;
	transition: all 0.5s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 2px 0 5px 0;
	line-height: 30px;
	opacity: 1;
			}

.Titem-type-move .Titem-hover .mask {
	z-index: 0;
	opacity: 0;
	transition: all 0.5s ease-out;
	background-color: #000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;	
	
	}
.Titem-type-move .Titem-hover:hover .mask {
	z-index: 0;
	opacity: 0.6;
	transition: all 0.5s ease-out;
	background-color: #000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;	
	}	
	
	
.T_box{
	border: 1px solid #E6E6E6;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,fefefe+50,eaeaea+100 */
transition: all 0.5s ease-out;
background: rgb(234,234,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(254,254,254,1) 50%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(254,254,254,1) 50%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(234,234,234,1) 0%,rgba(254,254,254,1) 50%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.T_box:hover{
	transition: all 0.3s ease-out;
	-moz-box-shadow: 1px 2px 8px 2px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow: 1px 2px 8px 2px rgba(20%,20%,40%,0.5);
	box-shadow: 1px 2px 8px 2px rgba(20%,20%,40%,0.5);
}
.t_l
{
	clear: both;
	float: left;
	width: 30%;
	display: block;
	background-color: #660;
	color: #FFF;
	text-align: center;
	padding: 5px 0;
	margin: 1px 0;	
	}

.t_r
{
	clear: none;
	float: left;
	width: calc(100% - 30% - 5px);
	display: block;
	background-color: #E6E6E6;
	padding: 5px 0 5px 5px;
	margin: 1px 0 1px 0;
	color:#333;
	}
.PHOTO66 {
	clear: both;
	float: left;	
    width: 100%;
    height: 0;
    padding-bottom: 66%;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
    position:relative;
    overflow:hidden;
}
.PHOTO66 img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
	
}