/* 雪碧图 */
.collect,.collect-active,.collect-num,.com-like,.com-like-active,.comment,.comment-active,.comment-num,.like,.look-num,.qq,.qq-active,.qq-space,.qq-space-active,
.wb,.wb-active,.wx,.wx-active{position:absolute;background:url(../../images/material/material-details/material-details.png) no-repeat;}
.collect{height:16px;width:17px;background-position:0 0;}
.collect-active{height:15px;width:17px;background-position:-26px 0;}
.collect-num{height:15px;width:16px;background-position:-51px 0;}
.com-like{height:14px;width:16px;background-position:-77px 0;}
.com-like-active{height:14px;width:16px;background-position:-102px 0;}
.comment-num{height:12px;width:16px;background-position:-174px 0;}
.like{height:22px;width:22px;background-position:-201px 0;}
.look-num{height:12px;width:16px;background-position:-233px 0;}
.qq{height:36px;width:36px;background-position:-279px 0;}
.qq-active{height:36px;width:36px;background-position:-324px 0;}
.qq-space{height:36px;width:36px;background-position:-371px 0;}
.qq-space-active{height:36px;width:36px;background-position:-417px 0;}
.wb{height:36px;width:36px;background-position:-463px 0;}
.wb-active{height:36px;width:36px;background-position:-508px 0;}
.wx{height:36px;width:36px;background-position:-556px 0;}
.wx-active{height:36px;width:36px;background-position:-603px 0;}
/* 主体内容 */
.global,.container{
    background-color:#f8f8f8;
}
/* 左边 */
.xq-main{
    float:left;
}
/* 详情 */
.material-xq{
    width:840px;
    padding:40px 30px;
    border-radius:4px;
    background:#fff;    
}
/* 素材标题 */
.material-title{
    margin-bottom:30px;
}
.material-title .tit{
    margin-bottom:19px;
    font-size:24px;
    font-weight:400;
    line-height:24px;
}
.material-xq .material-title .other{
    height:12px;
    color:#bbb;
}
.material-xq .material-title .other .oth-left{
    float:left;
}
.material-xq .material-title .other .oth-right{
    float:right;
}
.material-xq .material-title .other .oth-right span{
    float:left;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    margin-right:22px;
    padding:0 12px;
    border-right:1px solid #eee;
}
.material-xq .material-title .other .oth-right span:first-child{
    margin-right:36px;
}
.material-xq .material-title .other .oth-right span:last-child{
    margin-right:0;
    padding-right:0;
    border-right:none;
}
.material-xq .material-title .other .oth-right span i{
    float:left;
    left:-8px;
}
.collect-num{
    top:-3px;
}
/* 素材展示 */
.material-xq .material-show .banner{
    position:relative;
    width:840px;
    height:630px;
    overflow:hidden;
}
.material-xq .material-show .banner img{
    z-index:2;
    width:100%;
    height:100%;
    border-radius:4px;
}
.material-xq .material-show .banner .ban-left{
    position: absolute;
    left:30px;
    top:285px;
    width:60px;
    height:60px;
    background:url("../../images/material/material-details/ban-left.png") no-repeat;
}
.material-xq .material-show .banner .ban-right{
    position: absolute;
    right:30px;
    top:285px;
    width:60px;
    height:60px;
    background:url("../../images//material/material-details/ban-right.png") no-repeat;
}
.material-xq .banner .ban-left:hover{
    background:url("../../images//material/material-details/ban-left-active.png") no-repeat;
}
.material-xq .banner .ban-right:hover{
    background:url("../../images//material/material-details/ban-right-active.png") no-repeat;
}
.material-xq .material-show .material-other{
    height:108px;
    width:104%;
    margin-top:30px;
}
.material-xq .material-show .material-other li{
    float:left;
    width:108px;
    height:108px;
    margin-right:14px;
}
.material-xq .material-show .material-other img{
    width:108px;
    height:108px;
    border-radius:4px;
}
.material-xq .material-show .material-other img:hover{
    border:2px solid #FF8041;
}
/* 标签 */
.label{
    height:26px;
    padding:60px 0 40px 0;
    border-bottom:1px solid #eee;
}
.label a{
    float:left;
    display:block;
    margin-right:10px;
    padding:6px 10px;
    border-radius:4px;
    color:#999;
    background:#F8F8F8;
}
.label a:hover{
    color:#fff;
    background:#FF8041;
}
/* 分享、收藏、点赞 */
.opertion{
    height:70px;
    margin-top:50px;
    color:#bbb;
}
.opertion .share-tab{
    float:left;
    width: 184px;
}
.opertion .share-tab a{
    float:left;
    display:block;
    width:36px;
    height:36px;
    margin-right:10px;
}
.opertion .share-tab p{
    margin-top:46px;
}
.opertion .share-tab .bdsharebuttonbox a {
    padding-left: 0px;
    position: relative;
    background-image: url(../../images/material/material-details/material-details.png);
}
.opertion .share-tab .wx:hover{
    background-position:-603px 0;
}
.opertion .share-tab .qq:hover{
    height:36px;
    width:36px;
    background-position:-324px 0;
}
.opertion .share-tab .wb:hover{
    background-position:-508px 0;
}
.opertion .share-tab .qq-space:hover{
    background-position:-417px 0;
}
.opertion .like-tab{
    float:left;
    margin-left:211px;
    text-align:center;
}
.opertion .like-tab .like-ta{
    position:relative;
    display:block;
    width:70px;
    height:70px;
    border-radius:60%;
    background:#FF8041;
}
.opertion .like-tab .like-ta .like{
    top:19px;
    right:22px;
}
.opertion .like-tab .like-ta span{
    display:inline-block;
    margin-top:50px;
    color:#fff; 
}
.opertion .like-tab .like-ta:hover{
    background:#FF9763;
}
.opertion .like-tab .on{
    background:#eee;
}
.opertion .like-tab .on:hover{
    color:#666;
    background:#eee;
}
.opertion .like-tab .on span{
    margin-top:9px;
    color:#999;
}
.opertion .like-tab .like-ta .active{
    display:inline-block;
    width:100%;
    margin-top:22px;
    font-size:14px;
    color:#666;
}
.opertion .collect-tab{
    float:right;
}
.opertion .collect-tab .collect-ta{
    position:relative;
    display:block;
    width:90px;
    height:36px;
    margin-bottom:10px;
    border:1px solid #666;
    border-radius:4px;
    text-align:center;
    color:#666;
}
.opertion .collect-tab .collect-ta .collect{
    top:10px;
    right:53px;
}
.opertion .collect-tab .collect-ta span{
    display:inline-block;
    margin:13px 0 0 18px;   
}
.opertion .collect-tab .collect-ta:hover{
    border:1px solid #FF8041;
    background:#FF8041;
    color:#fff;
}
.opertion .collect-tab .collect-ta:hover .collect{
    background-position:-26px 0;
}
.opertion .collect-tab .on{
    border:1px solid #eee;
    background:#fff;
}
.opertion .collect-tab .on:hover{
    border:1px solid #eee;
    color:#666;
    background:#fff;
}
.opertion .collect-tab .collect-ta .active{
    margin-left:0;
}
.opertion .collect-tab p{
    text-align:right;
}
/* 设计师资料 */
.designer-info{
    height:80px;
    margin-top:20px;
    padding:30px 30px;
    border-radius:4px;
    overflow:hidden;
    background:#fff;
}
.designer-info img{
    float:left;
    width:80px;
    height:80px;
    border-radius:50%;
}
.designer-info .des-info{
    float:left;
    width:500px;
    margin-left:30px;
}
.designer-info .des-info .name{
    font-size:14px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.designer-info .des-info .address{
    height:13px;
    padding:12px 0 25px;
}
.designer-info .des-info .address span{
    display:inline-block;
    padding-right:6px;
    border-right:1px solid #999;
    color:#999;
}
.designer-info .des-info .address span:last-child{
    padding-left:6px;
    padding-right:0;
    border-right:none;
}
.designer-info .des-info .other p{
    float:left;
}
.designer-info .des-info .other p:first-child{
    padding-right:10px;
    border-right:1px solid #aaa;
}
.designer-info .des-info .other p:last-child{
    padding-left:16px;
}
.designer-info .des-info .other span{
    display:inline-block;
    float:left;
    margin-right:6px;
}
.designer-info .attention{
    display:block;
    float:right;
    width:90px;
    height:26px;
    margin-top:22px;
    padding-top:10px;
    border-radius:4px;
    border:1px solid #FF8041;
    text-align:center;
    font-size:14px;
    color:#FF8041;
}
.designer-info .attention:hover{
    color:#fff;
    background:#FF8041;
}
.designer-info .active{
    display:block;
    float:right;
    width:90px;
    height:26px;
    margin-top:22px;
    padding-top:10px;
    border-radius:4px;
    border:1px solid #bbb;
    text-align:center;
    font-size:14px;
    color:#666;
}
/* 右边内容 */
.sidebar{
    float:left;
    width:260px;
    margin-left:20px;
}
/* 素材信息 */
.material-info{
   height:303px;
   padding:30px;
   border-radius:4px;
   background:#fff;
}
.material-info .tit{
    display:block;
    padding-bottom:20px;
    border-bottom:1px solid #eee;
    font-size:14px;
}
.material-info .info li{
    padding-top:20px;
}
.material-info .info .item{
    color:#999;
}
.material-info .info .price{
    color:#bbb;
}
.material-info .info .price-on{
    color:#FF8041;
}
.material-info .download-btn{
    display:block;
    width:200px;
    height:26px;
    margin-top:40px;
    padding-top:10px;
    border-radius:4px;
    font-size:14px;
    text-align:center;
    color:#fff;
    background:#FF8041;
}
.material-info .download-btn:hover{
    background:#FF9763;
}
/* 相关素材 */
.related-material{
    height:439px;
    margin:20px 0;
    padding:30px;
    border-radius:4px;
    font-weight:400;
    background:#fff;
}
.related-material .material-list{
    width:106%;
    height:375px;
    padding-top:20px;
}
.related-material .material-list li{
    float:left;
    margin:0 12px 30px 0;
}
.related-material .material-list img{
    width:94px;
    height:71px;
    border-radius:4px;
}
.related-material .material-list .title{
    width:94px;
    margin-top:10px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.related-material .more-btn{
    display:block;
    width:110px;
    height:24px;
    margin:0 auto;
    padding-top:10px;
    border:1px solid #ddd;
    border-radius:17px;
    font-size:13px;
    text-align:center;
    color:#999;
}
.related-material .more-btn:hover{
    border:1px solid #FF8041;
    color:#fff;
    background:#FF8041;
}
/* 广告 */
.ad{
    margin-bottom:50px;
} 
.ad img{
    width:260px;
    height:130px;
    border-radius:4px;
}
/* 下载素材 */
.download-mate{
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:39;
}
.all-modal-wrap{
    position:fixed;
    top:0;
    left:0px;
    width:100%;
    height:100%;
}
.all-modal-bg{
    width:100%;
    height:100%;
    background:rgba(19,19,19,0.5);
}
.download-format{
    position:absolute;
    left:40%;
    top:30%;
    width:410px;
    height:236px;
    padding:40px 30px;
    border-radius:4px;
    background:#fff;
    z-index:55;
}
.download-mate .close{
    position:absolute;
    top:0;
    right:-50px;
    display:block;
    width:20px;
    height:20px;
    background:url("../../images/material/material-details/close.png") no-repeat;
}
.download-mate .close:hover{
    background:url("../../images/material/material-details/close-active.png") no-repeat;
}
.download-mate .tit{
    margin-bottom:29px;
    font-size:16px;
    text-align:center;
    font-weight:bold;
    color:#666;
}
.download-mate .text{
    height:100px;
    padding:19px 30px 0;
    border-radius:4px;
    background:#FAFAFA;
}
.download-mate .text .item{
    float:left;
    width:82px;
    padding-right:30px;
    border-right:1px solid #eee;
    font-size:14px;
    color:#999;
}
.download-mate .text span{
    display:block;
    margin-bottom:18px;
}
.download-mate .text .item-tx{
    float:left;
    width:207px;
    padding-left:30px;
    font-size:14px;
}
.download-mate .text .item-tx span{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.download-mate .btn{
    width:262px;
    height:40px;
    margin:30px auto 0;
    text-align:center;
}
.download-mate .btn .cancel{
    display:block;
    float:left;
    width:120px;
    height:27px;
    margin-right:20px;
    padding-top:12px;
    border:1px solid #bbb;
    border-radius:4px;
    font-size:14px;
    text-align:center;
    color:#999;
}
.download-mate .btn .cancel:hover{
    color:#FF8041;
    border:1px solid #FF8041;
}
.download-mate .btn .confirm{
    display:block;
    float:left;
    width:120px;
    height:28px;
    padding-top:12px;
    border-radius:4px;
    font-size:14px;
    text-align:center;
    color:#fff;
    background:#FF8041;
}
.download-mate .btn .confirm:hover{
    background:#FF9763;
}
/* 确认信息 */
.confirm-info{
    position:absolute;
    left:40%;
    top:70%;
    width:410px;
    height:330px;
    margin:0px auto 169px;
    padding:40px 30px;
    border-radius:4px;
    background:#fff;
    z-index:55;
}
.confirm-info .tit span{
    display:block;
}
.confirm-info .tit span+span{
    margin-top:8px;
    font-size:12px;
    color:#FF3737;
}
.confirm-info .text{
    height:152px;
}
.confirm-info .item-tx .amount{
    color:#FF8041;
}
.confirm-info .item-tx .pay a{
    position:relative;
    display:inline-block;
    width:69px;
    height:22px;
    padding:8px 0 0 8px;
    border:1px solid #eee;
    border-radius:4px;
}
.confirm-info .item-tx .pay a+a{
    width:87px;
    margin-left:20px;
}
.confirm-info .item-tx .pay .alipay{
    position:absolute;
    width:59px;
    height:14px;
    background:url("../../images/material/material-details/alipay.png") no-repeat;
}
.confirm-info .item-tx .pay .wx-pay{   
    position:absolute;
    width:77px;
    height:14px;
    background:url("../../images/material/material-details/wx-pay.png") no-repeat;
}
.confirm-info .item-tx .pay .on{
    border:1px solid #FF8041;
}
.confirm-info .item-tx .pay .on .check{
    position:absolute;
    top:-6px;
    right:-5px;
    width:12px;
    height:12px;
    background:url("../../images/material/material-details/check.png") no-repeat;
}
.confirm-info .msg{
    margin-top:10px;
    height:12px;
    color:#999;
}
.confirm-info .msg span{
    color:#333;
}