.demo{width:960px;margin:0 auto;}
.demo h1{color:#3366cc;font-size:16px;height:35px;line-height:1.9;text-align:center;border-bottom:1px solid #E5E5E5;margin:0 0 10px 0;}
#retop{position:fixed;bottom:10%;_position:absolute;width:25px;height:69px;background:url(images/topback.png) no-repeat;text-indent:-9em;overflow:hidden;display:none;}
/**---------- 比较元素 ---------**/
/**** 转变 ****/
.transitions-enabled.masonry,.transitions-enabled.masonry .masonry-brick{-webkit-transition-duration:0.7s;-moz-transition-duration:0.7s;-o-transition-duration:0.7s;transition-duration:0.7s;}
.transitions-enabled.masonry{-webkit-transition-property:height, width;-moz-transition-property:height, width;-o-transition-property:height, width;transition-property:height, width;}
.transitions-enabled.masonry .masonry-brick{-webkit-transition-property:left, right, top;-moz-transition-property:left, right, top;-o-transition-property:left, right, top;transition-property:left, right, top;}
/* 禁用容器上的转变 */
.transitions-enabled.infinite-scroll.masonry{-webkit-transition-property:none;-moz-transition-property:none;-o-transition-property:none;transition-property:none;}
/* 无限滚动装载机 */
#infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
#infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}
*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
*html #infscr-loading{position:absolute;bottom:expression(eval(document.documentElement.scrollTop));}
/* showpic */
.showpic .actions{display:none;}
.showpic:hover .actions{display:block;}
.showpic:hover img{filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;}
.showpic{position:relative;float:left;margin:5px;_margin:5px 4px;border:solid 1px #ddd;width:178px;font-size:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);}
.showpic .picbox{padding:15px 15px 0;text-align:center;}
.showpic p{line-height:22px;margin:10px 0 0 0;padding:5px 10px;border-top:solid 1px #F5F2F2;background:#FAFAFA;}
.showpic .actions{position:absolute;top:5px;left:0;z-index:3;width:100%;}
.showpic .actions .lefter{float:left;margin:0 0 0 5px;display:inline;}
.showpic .actions .righter{float:right;}
.showpic .actions .righter a{margin:0 5px 0 0;}
/* button */
.button{
    display:inline-block;
    text-decoration:none;
    font:bold 12px/12px HelveticaNeue, Arial;
    padding:8px 11px;
    color:#555;
    border:1px solid #dedede;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
	cursor:pointer;
}
.button.white{
    background:#f5f5f5;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /*  IE */
    background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); /*  WebKit */
    background:-moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
    border-color:#dedede #d8d8d8 #d3d3d3;
    color:#555;
    text-shadow:0 1px 0 #fff;
    -webkit-box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    -moz-box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
}
.button.white:hover{
    border-color:#c7c7c7 #c3c3c3 #bebebe;
    text-shadow:0 1px 0 #fdfdfd;
    -webkit-box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    -moz-box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
}
.button.white:active{
    background:#f4f4f4;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f8f8f8'); /*  IE */
    background:-webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#f8f8f8)); /*  WebKit */
    background:-moz-linear-gradient(top,  #eeeeee, #f8f8f8);
    border-color:#c7c7c7 #c3c3c3 #bebebe;
    text-shadow:0 1px 0 #fdfdfd;
    -webkit-box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd;
    -moz-box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd;
    box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd;
}



#caseview{ width:80vw; margin:0 auto; overflow:hidden; margin-top:50px;}
#caseview .sp{ width:39vw; float:left;border:1px solid #E4E4E4; border-radius:3px; overflow:hidden;}

/* 案例详情滚动图CSS开始 */
#caseview .sp .mod18{width:39vw;position:relative;margin:0 auto;}
#caseview .sp .mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
#caseview .sp .mod18 .prev{left:5px;background:url() no-repeat;}
#caseview .sp .mod18 #prevTop,.mod18 #nextTop{top:12vw;width:32px;height:48px;}
#caseview .sp .mod18 #prev,.mod18 #next{top:30vw;width:10px;height:16px;}
#caseview .sp .mod18 #prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;}
#caseview .sp .mod18 #nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;}
#caseview .sp .mod18 .next{right:10px;background:url() no-repeat;}
#caseview .sp .mod18 li{float:left;}
#caseview .sp .mod18 .cf li{position:relative;color:#fff;}
#caseview .sp .mod18 .cf a{display:block;position:absolute;color:#fff;}
#caseview .sp .mod18 .cf li span{display:block;width:39vw;position:absolute;left:0px;bottom:0;padding:10px 20px;line-height:32px; font-size:16px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
#caseview .sp .mod18 .picBox{width:39vw; height:26vw; padding:0px 0vw;position:relative;overflow:hidden; background:#000; padding-top:0px;}
#caseview .sp .mod18 .picBox ul{height:26vw;position:absolute; left:0;}
#caseview .sp .mod18 .picBox li{padding:0px 0vw; width:39vw;height:26vw; overflow:hidden;}
#caseview .sp .mod18 .picBox li img{ width:39vw; height:26vw;}
#caseview .sp .mod18 .listBox{width:39vw;height:6vw;margin:0 auto;position:relative; padding-top:5px;overflow:hidden;}
#caseview .sp .mod18 .listBox ul{height:6vw;position:absolute; padding:0px 8px;}
#caseview .sp .mod18 .listBox li{ width:auto;cursor:pointer;position:relative; padding:5px 0 0 0;}
#caseview .sp .mod18 .listBox li i{display:none;}
#caseview .sp .mod18 .listBox li a{display:block;width:7.2vw;height:4.8vw;}
#caseview .sp .mod18 .listBox img{border:1px solid #fff;width:7.2vw;height:4.8vw; margin-right:0.3vw;}
#caseview .sp .mod18 .listBox .on img{border:1px solid #FF0000;}
#caseview .sp .mod18 .listBox .on{}
#caseview .sp .mod18 .listBox .on i{display:block;}


#caseview .caseconf{ width:38vw;float:right; overflow:hidden; overflow:hidden;}
#caseview .caseconf .casename{ line-height:50px; border-bottom:1px solid #DDDDDD; font-size:20px; color:#232323;}
#caseview .caseconf .casename span{ float:left; padding:0px 20px; font-size:15px; background-color:#F3F3F3; text-align:center; margin-right:20px;}
#caseview .caseconf .casename2{ line-height:50px; border-bottom:1px solid #DDDDDD; font-size:16px; color:#232323;}
#caseview .caseconf .casename2 span{ float:left; padding:0px 20px; font-size:15px; background-color:#F3F3F3; text-align:center; margin-right:20px;}
#caseview .caseconf .casecon{ line-height:25px;  font-size:14px; color:#434343; padding-top:20px;}
#caseview .caseconf .casecon p{ text-indent:28px;}

.viewL{ width:45vw; margin:0 auto; text-align:center; font-size:15px; overflow:hidden;  border-radius:3px; margin-top:40px;}
.views{ width:45vw; margin:0 auto; overflow:hidden;  border-radius:3px; margin-top:40px;}
.views .casename{ line-height:55px;  font-size:15px; color:#232323; float:left; margin-bottom:10px; padding-right:20px;}
.views .casename span{ float:left; padding:0px 20px; font-size:15px; font-weight:600; text-align:center; margin-right:5px;}
#caseview .caseconf .casename2{ line-height:50px; border-bottom:1px solid #DDDDDD; font-size:16px; color:#232323;}
#caseview .caseconf .casename2 span{ float:left; padding:0px 10px; font-size:15px; background-color:#F3F3F3; text-align:center; margin-right:20px;}
#caseview .caseconf .casecon{ line-height:25px;  font-size:14px; color:#434343; padding-top:20px;}
#caseview .caseconf .casecon p{ text-indent:28px;}



@media screen and (max-width:1000px) {
.viewL{ width:60vw; margin:0 auto; text-align:center; font-size:15px; overflow:hidden;  border-radius:3px; margin-top:40px;}

#caseview{ width:91vw; margin:0 auto; overflow:hidden; margin-top:50px;}
#caseview .sp{ width:90vw; float:left;border:1px solid #E4E4E4; border-radius:3px; overflow:hidden;}

/* 案例详情滚动图CSS开始 */
#caseview .sp .mod18{width:90vw;position:relative;margin:0 auto;}
#caseview .sp .mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
#caseview .sp .mod18 .prev{left:5px;background:url() no-repeat;}
#caseview .sp .mod18 #prevTop,.mod18 #nextTop{top:24vw;width:32px;height:48px;}
#caseview .sp .mod18 #prev,.mod18 #next{top:30vw;width:10px;height:16px;}
#caseview .sp .mod18 #prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;}
#caseview .sp .mod18 #nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;}
#caseview .sp .mod18 .next{right:10px;background:url() no-repeat;}
#caseview .sp .mod18 li{float:left;}
#caseview .sp .mod18 .cf li{position:relative;color:#fff;}
#caseview .sp .mod18 .cf a{display:block;position:absolute;color:#fff;}
#caseview .sp .mod18 .cf li span{display:block;width:90vw;position:absolute;left:0px;bottom:0;padding:10px 20px;line-height:32px; font-size:16px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
#caseview .sp .mod18 .picBox{width:90vw; height:60vw; padding:0px 0vw;position:relative;overflow:hidden; background:#000; padding-top:0px;}
#caseview .sp .mod18 .picBox ul{height:60vw;position:absolute; left:0;}
#caseview .sp .mod18 .picBox li{padding:0px 0vw; width:90vw;height:60vw; overflow:hidden;}
#caseview .sp .mod18 .picBox li img{ width:90vw; height:60vw;}
#caseview .sp .mod18 .listBox{width:90vw;height:12vw;margin:0 auto;position:relative; padding-top:5px;overflow:hidden;}
#caseview .sp .mod18 .listBox ul{height:12vw;position:absolute; padding:0px 8px;}
#caseview .sp .mod18 .listBox li{ width:auto;cursor:pointer;position:relative; padding:5px 0 0 0;}
#caseview .sp .mod18 .listBox li i{display:none;}
#caseview .sp .mod18 .listBox li a{display:block;width:15vw;height:10vw;}
#caseview .sp .mod18 .listBox img{border:1px solid #fff;width:15vw;height:10vw; margin-right:0.3vw;}
#caseview .sp .mod18 .listBox .on img{border:1px solid #FF0000;}
#caseview .sp .mod18 .listBox .on{}
#caseview .sp .mod18 .listBox .on i{display:block;}


#caseview .caseconf{ width:90vw;float:left; overflow:hidden; overflow:hidden; margin-top:20px;}
#caseview .caseconf .casename{ line-height:50px; border-bottom:1px solid #DDDDDD; font-size:20px; color:#232323;}
#caseview .caseconf .casename span{ float:left; padding:0px 20px; font-size:15px; background-color:#F3F3F3; text-align:center; margin-right:20px;}
#caseview .caseconf .casename2{ line-height:50px; border-bottom:1px solid #DDDDDD; font-size:16px; color:#232323;}
#caseview .caseconf .casename2 span{ float:left; padding:0px 20px; font-size:15px; background-color:#F3F3F3; text-align:center; margin-right:20px;}
#caseview .caseconf .casecon{ line-height:25px;  font-size:14px; color:#434343; padding-top:20px;}
#caseview .caseconf .casecon p{ text-indent:28px;}

}

/**************/
.boxcase{width:55%; overflow:hidden;border: 1px solid #dedede;margin:30px auto;background: #f9f9f9; float:left;}
.all{
    width:100%;height: auto;margin: 20px auto;overflow: hidden;
}
.top-img{
    width: 100%;height: auto;font-size: 0;position: relative;
}
.activeimg{
    overflow: hidden;height: 300px;position: relative;
}
.top-img .activeimg img{
    width: 500px;height: 300px;
}
.top-img .left{
    width: 80px;height: 300px;background: rgba(0,0,0,0.4);position: absolute;left: 0;top: 0;text-align: center;line-height: 300px;
    cursor: pointer;
}
.top-img .right{
    width: 80px;height: 300px;background: rgba(0,0,0,0.4);position: absolute;left:420px;top: 0;text-align: center;line-height: 300px;
    cursor: pointer;
}
.top-img .left:hover,.top-img .right:hover{
    background: rgba(0,0,0,0.5);
}

.bot-img{
    height: 60px;width: 520px;margin-top: 15px
}
.bot-img ul{
    width: 100%;height: 100px;
}
.bot-img ul li{
    width: 90px; height:60px;margin:5px 5px;float: left;border: 1px solid #fff;cursor: pointer;font-size: 0;
}
.bot-img ul li.active{
    border: 1px solid #ff6600;
}
.bot-img ul li img{
    width: 100%;
}
.bot-img ul li:last-child{
    margin-right: 0;
}