﻿/*** 图片瀑步流展示 **/
#element{clear:both; max-width: 1526px; position:relative; overflow:hidden; margin:0 auto;}
.picture-list{width:283px;height:auto;border:1px solid #efefef;position:relative;margin-bottom:20px;margin-right:18px;overflow:hidden; background-color: #fff; transition:all .2s;}
.picture-list:hover{box-shadow:0 2px 10px rgba(0,0,0,0.2);transform:translate3d(0, -2px, 0);}
.picture-list .img_box{ width:283px; min-height:200px }
.picture-list .hover-bg{width:100%;height:100%;background:rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);position: absolute;top:0;left:0;display:none;transition:all .2s;}
.picture-list:hover .hover-bg{display:  block;}
.picture-list:hover .hover-content{top: 0;}
.picture-list .hover-content span{float: right;border-radius: 2px;font-size: 14px;height: 40px;line-height: 40px;margin-left:7px;cursor: pointer; width:80px;}
.picture-list .hover-content .down_img{
/*     background: #499df2 url(../images/public-icon-2.png) 62px -19px no-repeat;
 */	background: #499df2 url(../images/public-icon-2.png) 62px -20px no-repeat;    border: 1px solid #499df2;    color: #FFF;/*     padding-left: 10px;*/
}

.picture-list .hover-content .down-big-y i{ background:url(../images/public-icon.png) no-repeat -117px -77px; width:13px; height:12px; }
.picture-list .hover-content .down-big-img i{ background-position: -117px -77px;  }
.picture-list .hover-content .down-big-y { border:1px solid #05920a; background:#05920a url(../images/public-icon-2.png) no-repeat 54px -20px ; color:#fff; width:51px;padding-left: 10px;padding-right: 10px;text-align: left; }
.picture-list .hover-content .vector-big-y{ background-color:#ff9000;border: 1px solid #ff9000; }
.picture-list .hover-pic-detail{height: 55px;transition: all .2s;margin:10px 10px 12px;width:93%;}
.picture-list .hover-pic-detail h4{font-size:14px;color:#5f5f5f;padding-bottom:12px;border-bottom:1px solid #e4e4e4;margin-bottom:9px;}
.picture-list .hover-pic-detail h4 a{color:#7e7e7e;}
.picture-list .hover-pic-detail h4 a:hover{color:#499ef2;}
.picture-list .hover-pic-detail .info-title{font-size:14px;color:#7e7e7e;float:left;}{background: url(http://js.97uimg.com/image/down-big-img.png) 93px 13px no-repeat #4caf50;}
.exp-dload{display: block;padding-left: 22px;height: 16px;line-height: 16px; background:url(../images/public-icon-2.png) no-repeat 0px 2px ; float: left;color:#5f5f5f;font-size:14px;}


.picture-list:hover .hover-pic-detail{bottom:0;}

.exp-zan{background: url(../images/public-icon-2.png) 2px -70px no-repeat;width:5px;margin-right: 15px;display: block;height: 16px;line-height: 16px;float: left;color:#5f5f5f;margin-left:25px;padding-left:20px;font-size:12px;}
.picture-list .img-show{margin:9px 11px 0;border:1px #edebeb solid;/* background: url(../images/imgshow-bg.jpg);*/ position: relative;max-height: 600px;overflow: hidden; text-align: center;}

.picture-list .favon{ background: #fff url(../images/public-icon-2.png) 58px -98px no-repeat; }


.pic-list .info-icon .exp-zan {background:url(../images/public-icon-2.png) 0px 2px no-repeat; width: 12px;height: 15px;float: inherit; display: inline-block; margin: 0; padding: 0; padding-right: 12px; }
.pic-list .info-icon .exp-dload {float: inherit;background-position: 0px -73px;margin:0; padding: 0; padding-right: 12px;}


/*** 背景大图片列表 ****/
.big-pic-list-box .pic-list{ border:1px solid #ededed; width:1200px; margin:0 0 30px 0; transition:all .2s; position:relative; overflow:hidden; float:left; background: #fff; }

/*** 背景图片列表 ****/
/*.pic-list:hover{box-shadow: 0px 2px 5px #aaaaaa; }*/
.pic-list .pic-box{ width:1200px; overflow:hidden; }
.pic-list .pic-box img{ width:100%; min-height:200px; }
.pic-list  .pic-info{ padding:0 25px 0 20px; height:50px; line-height:50px; background: #fff;  }
.pic-list  .pic-info .pic-title{ padding-right:20px; }
.pic-list  .pic-info .info-left{ font-size:14px; color:##7c7b7b; }
.pic-list .pic-list-icon { background:url(../images/public-icon.png) no-repeat -100px -58px; width:13px; height:12px; display:inline-block; padding-right:10px; margin-left:14px; }
 .exp-zan{ background-position:0px 2px; width:12px; height:15px; float:inherit;     font-size: 14px;}
.pic-list .info-right .info-icon { margin-left:20px; }

.picture-list  .hover-content .down-big-img { padding-left: 0; text-align: left; text-indent: 5px; width: 88px; }
/*** 背景小图片列表 **/
.small-pic-box .pic-list { /*width:588px;*/ left: 6px;  }
.small-pic-box .pic-list .list-but .but-a{ margin:10px 4px 0;  }


/*** 背景图片按钮 ****/
.pic-list:hover .hover-content{ top:0px; }

/*** 元素图片按钮 **/
.picture-list .hover-content .fav {
    background: url(../images/public-icon-2.png) 60px -139px no-repeat #fff;   
    width:80px; 
    text-indent: 8px; 
    padding: 0; 
    margin-left: 0; 
	border: 1px solid #d2d2d2;	
    transition:all 0s;
	text-align: left;	
}
.picture-list .hover-content .fav:hover {background: url(../images/public-icon-2.png) 60px -98px no-repeat #fff; color: #f25751; 	text-align: left;    text-indent: 8px;}
.picture-list .hover-content .rfav {
	background: url(../images/public-icon-2.png) 60px -98px no-repeat #fff; 
	color: #f25751; 
	padding: 0; 
    margin-left: 0; 
	border: 1px solid #d2d2d2;	    
	text-indent: 8px;
	text-align: left;
}
.picture-list .hover-content .favon{ background: url(../images/public-icon-2.png) 60px -98px no-repeat #fff; color: #f25751; }
.picture-list .hover-content .favon:hover{  background: url(../images/public-icon-2.png) 60px -139px no-repeat #fff;  color: #222; }




 .hover-content{ position: absolute;top:-180px;right:0;height:42px; line-height: 42px;transition:all .2s; }
 .hover-content a{ float:right;border-radius: 2px;font-size: 14px;height: 40px;line-height: 40px;margin:10px 10px 0 10px;}
 .hover-content .down-big-img {color:#fff;background: url(../images/public-icon-2.png) 69px -19px no-repeat #499df2;  border: 1px solid #0b7cd2; padding-left: 8px; width: 80px;  }
 .hover-content .down-big-y {padding-left:8px;color: white;background: url(../images/public-icon-2.png) 69px -24px no-repeat #4caf50;  border: 1px solid #05920a; width: 80px; }
 .hover-content .fav { width: 80px; padding-left: 10px; color: #524d4d;background: url(../images/public-icon-2.png) 68px -139px no-repeat #fff;	border: 1px solid #d2d2d2;}
 .hover-content .fav:hover {background: url(../images/public-icon-2.png) 68px -98px no-repeat #fff;}
 .hover-content .favon {background: url(../images/public-icon-2.png) 58px -98px no-repeat #fff;}
 .hover-content .favon:hover {background: url(../images/public-icon-2.png) 58px -139px no-repeat #fff;}

 .hover-content .similar-btn{width: 82px;height: 40px;background: url(../images/public-icon-2.png) no-repeat 72px -224px #fff;padding-left: 8px;color: #FF7200; }
 .hover-content .similar-btn:hover{background: url(../images/public-icon-2.png) no-repeat 72px -181px #FF7200;color: #fff;}
.hover-content .min_btn {margin: 10px 7px 0 5px!important;}

.small-icon{ background:url(../images/public-icon-2.png) no-repeat 0px -73px; width:13px; height:13px; display:inline-block; padding-right:10px; margin-top:12px; float:right;   }


/*** 等高不等宽背景图片小按钮 *****/
.small-button .pic-list .hover-content a{ width: 64px; height: 38px ;line-height: 38px; display: inline-block; padding: 0; text-indent: 8px;  }
.small-button .pic-list .hover-content a:hover{ opacity: .9; }
.small-button .pic-list .hover-content .down-big-y{background: url(../images/public-icon-2.png) 43px -21px no-repeat #4caf50; }
.small-button .pic-list .hover-content .down-big-img {color:#fff;background: url(../images/public-icon-2.png) 43px -21px no-repeat #499df2;}
.small-button .pic-list .hover-content .fav{  background: url(../images/public-icon-2.png) 43px -139px no-repeat #fff;	}
.small-button .pic-list .hover-content .fav:hover {background: url(../images/public-icon-2.png) 43px -98px no-repeat #fff; color: #f25751; }
.small-button .pic-list .hover-content .rfav {
	width:72px;
    background: url(../images/public-icon-2.png) 51px -98px no-repeat #fff;
    color: #f25751;
	border: 1px solid #d2d2d2;
}

/**** 背景首页自适应页面样式 ****/
#main {width: 93%; padding: 0 3.5%;}
/*** 背景首页自适应图片列表 ****/
.pic-list{box-shadow: 0px 6px 5px #888888; /*; width: 400px; border:1px solid #ededed;*/transition:all .2s; position:relative; overflow:hidden;margin:0 15px 30px;float: left !important;  }
/*.pic-list:hover{box-shadow: 0px 2px 5px #aaaaaa; }*/
.pic-list .pic-box{ width:100%;  overflow:hidden; }
.pic-list .pic-box a{ width:100%;}
.pic-list .original {position: absolute;top: -3px;left: -3px;background: url("../images/original.png") no-repeat;width: 97px;height: 97px;}




/*****成套元素列表*******/
/*.element{ width:283px;border: 1px solid #dedede;float: left;margin: 0 20px 20px 0;}*/
.element:nth-child(4n){ margin-right: 0 }
.element .element-con{ width: 283px; position: relative; }
.element .element-con a .element-img{ width:283px;}
.element .element-con .element-pos{ position: absolute; top: -1px; left: -1px; background: url(../images/icon-pos.png); width: 86px; height: 86px;}
.element-other>div{ width:62px; height:62px; border: #dedede 1px solid; float: left; margin-right: 5px; margin-top: 5px; background-size:63px;}
.element-other>div a{ display: inline-block; width: 62px; height: 62px; }
.element-other>div:last-child{ margin-right: 0 }
.element-other{ height:64px; padding:0px 5px; background-color:#fff;}
.element .title{ height:50px; line-height:50px; background-color:#f6f6f6; color:#626262; border-top:#dedede 1px solid; text-align:center;overflow: hidden; text-overflow: ellipsis;white-space: nowrap; margin-top:5px;}
.element .title:hover a{color:#499ef2;}
.element-wrap .hover-content .nonofav{padding-left: 15px;float: left;background-color: white;color: black;text-align: left; z-index: 100000;cursor: pointer;border: 1px solid #b6b6b6;}
.element-wrap .hover-content .favon{padding-left: 15px;line-height: 42px;float: left;background-color: white;color: black;text-align: left; z-index: 100000; background-position: 71px -96px; cursor: pointer; margin-left: 10px; }
.hover-content .down-imgs{width: 92px;padding-left: 15px;height: 42px;line-height: 42px;float: right;color: #fff;text-align: left;   background: url(../images/public-icon-2.png) no-repeat 82px -20px #139c0f; cursor: pointer;border: 1px solid #1d751d;}
.element-wrap .hover-content .down-imgs{ margin-right:10px; }
.element:hover .hover-content{top: 10px;}
.element .hover-content{ width: 100%; }
.element .hover-content .fav{ margin-left: 10px; padding-left:10px; }


/****** 主图瀑布流 *****/
.zhutu .bglist{width: 390px;float: left;margin:0 0 20px 13px; transition:all .2s; }
.zhutu .bglist .bglist-img{position: relative;overflow: hidden;}
.zhutu .bglist .hover-content{position: absolute;top:-55px;right:0;}
.bglist .bglist-con > p.fl{font-size: 14px;width: 210px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.bglist .bglist-con{height: 50px;line-height: 50px;padding: 0 5px 0 20px;background: #fff;}
.bglist:hover .hover-content{top:0;}
.zhutu .bglist:hover{box-shadow: 0px 2px 5px #aaaaaa; }
.zhutu .bglist .hover-content .down-big-y{ width: 85px; }
.zhutu .bglist .content-title-info ,.zhutu .bglist .content-title-info p{ height:50px; line-height: 50px; }
.zhutu .bglist .content-title-info .exp-zan{ background-position: 0px -54px;}
.zhutu .bglist .content-title-info .exp-dload{ background-position: 0px 19px;    margin-left: 10px;  }



/**** 详情页背景图片样式 ****/
.detail-bg-pic-box .pic-list .pic-box{ height: 255px;  }
.detail-bg-pic-box .pic-list .pic-box img{ height: 255px; }


.picture-list .hover-pic-detail .download-info .exp-zan{ background-position: 2px -70px; }

/**** 详情页收藏样式 ****/
.detail .favon{width: 164px;border: 1px solid #e3e3e3;background-color: #fff;color: #252525;background: url(../../public/images/public-icon-2.png) 120px -85px no-repeat;}
.detail .nonofav{width: 164px;border: 1px solid #e3e3e3;background-color: #fff;color: #252525;background: url(../../public/images/public-icon-2.png) 120px -126px no-repeat;}