/*头部*/
.com-head{width: 100%;height: 88px;}
.com-banner{width: 100%;height: 420px;margin:0 auto;}
.com-banner img{height: 420px;width: 100%;}

/*案例标题*/
.case-title{width: 76%;height: 210px;margin:0 auto; }
.case-title h1{font-family: "黑体";font-size: 34px;color: #383838;text-align: center;padding-top: 60px;}
.case-title p{font-family: "黑体";font-size: 18px;color: #727272;line-height: 24px; text-align: center;margin-top: 30px;}

/*案例分类列表*/
.ecase-list{height: auto; width: 76%;margin:0px auto; }
.ecase-item{height: 336px; width: 31.04%;background-color: #fff;float: left;margin:0 2% 30px 0;position: relative; overflow: hidden;}
.ecase-item:nth-child(3n+3){margin:0 0px 30px 0;}
.ecase-item img{display: block; width: 100%;height: 336px;position: relative; overflow-x:hidden;overflow-y:hidden;   transition-delay: 0s;transition-duration: 0.5s;transition-property: all;transition-timing-function: ease;}
.case-bt{width: 100%;height:40px;background-color: rgba(0,0,0,.5); position: absolute;left: 0;bottom:0px;transition:height .5s ease-in;-o-transition:height .5s ease-in;}
.case-bt h2{font-family: "Microsoft YaHei";font-size: 20px;font-weight:lighter; line-height: 40px;color: #fff;margin-left: 30px;margin-top:0px;}
.case-bt p{width: 86%;height: 64px;margin:0 30px; font-family: "Microsoft YaHei";font-size: 13px;line-height: 22px;color: #fff;overflow: hidden;}
.case-bt a{display: inline-block;width: 100px;height: 25px;font-family: "Microsoft YaHei";font-family: 14px;line-height: 25px;color: #fff;background-color: red; text-align: center;margin-left: 30px;}
.ecase-item:hover img{transform: scale(1.1,1.1);}
.ecase-item:hover .case-bt{ height:336px;}
.ecase-item:hover .case-bt h2{ position: relative;top:100px;}
.ecase-item:hover .case-bt p{ position: relative;top:100px;}
.ecase-item:hover .case-bt a{ position: relative;top:100px;}


/*分类案例列表页面*/
.top{width: 76%;height: 200px;margin:0 auto ;}
.top h1{font-family: "Microsoft YaHei";font-size: 34px;font-weight:lighter; line-height: 80px;color: #383838;padding-top: 30px;}
.top p{font-family: "Microsoft YaHei";font-size: 18px;font-weight:lighter; line-height: 36px;color: #6a6a6a;overflow: hidden;}

.list{width: 76%;margin:0 auto 60px auto;}
.list-item{width: 100%;height: 230px; margin:25px auto;}
.list-item .left{width: 25%;height: 230px;float: left; }
.left img{width: 83%;height: 188px;margin:21px 17% 21px 0px;}
.list-item .right{width: 75%;height: 230px;float: right;}
.right h2{font-family: "Microsoft YaHei";font-size: 24px;font-weight:lighter; line-height: 60px;color: #383838;padding-top: 30px;}
.right p{font-family: "Microsoft YaHei";font-size: 14px;font-weight:lighter; line-height: 24px;color: #8f8f8f;height: 80px;overflow: hidden;}
.right a{display: inline-block;width: 124px;height: 36px; border:1px solid #b8b8b8; font-family: "Microsoft YaHei";font-size: 14px;font-weight:lighter; line-height: 35px;color: #b8b8b8;text-align: center; }
.list-item:hover .left img{box-shadow: 0px 0px 5px #8f8f8f;}
.list-item:hover .right h2{color: red;}
.list-item:hover .right a{color: red;border:1px solid red;}

/*案例详情页面*/
.details{width: 52%;margin:0 auto;}
.details h1{font-family: "Microsoft YaHei";font-size: 34px;font-weight:lighter; line-height: 60px;color: #000;text-align: center; padding-top: 60px;}
.details p{font-family: "Microsoft YaHei";font-size: 18px;font-weight:lighter; line-height: 24px;text-align: center; color: #6a6a6a;overflow: hidden;}
.imglist{ width: 52%;margin:30px auto 0px auto; }
.imglist .img1{display: inline-block; width: 46%;height: 400px;margin:0 5px;}
.imglist .img1 img{display: block; width: 100%;height: 370px;}
.imglist .img1 span{display: inline-block;width: 100%;height: 30px; font-family: 'Microsoft YaHei';font-size: 14px;line-height: 30px;text-align: center; color:#383838;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.case-content{ width: 52%;margin:0 auto; }
.case-content p{width: 100%;}
.case-content p img{width:100%;}

/* 媒体查询1025-1750px css */
@media (min-width: 1025px)and (max-width: 1750px) {
.com-head{height: 68px;}
.com-banner{height: 360px;}
.com-banner img{height: 360px;}

}


/* 媒体查询769-1024px css */
@media (min-width: 769px)and (max-width: 1024px) {
.com-head{height: 48px;}
.com-banner{height: 224px;}
.com-banner img{height: 224px;}

.ecase-item{height: 206px; }
.ecase-item img{height: 206px;}
.case-bt{height: 28px;}
.case-bt h2{font-size: 14px; line-height: 28px;margin-left: 10px;}
.case-bt p{width: 92%;height: 44px;margin:0 10px; font-size: 12px;line-height: 13px;}
.case-bt a{margin-left: 10px;}
.ecase-item:hover .case-bt{ height:206px;}
.ecase-item:hover .case-bt h2{ position: relative;top:60px;}
.ecase-item:hover .case-bt p{ position: relative;top:60px;}
.ecase-item:hover .case-bt a{ position: relative;top:60px;}


.top h1{font-size: 32px;}
.top p{font-size: 16px;}
.left img{height: 168px;margin:31px 17% 31px 0px;}
.right h2{font-size: 20px; line-height: 40px;padding-top: 20px;}
.right p{font-size: 13px;line-height: 18px;}

.details{width: 72%;}
.details h1{font-size: 30px;line-height: 60px; padding-top: 60px;}
.details p{font-size: 16px; line-height: 24px;}
.imglist{ width: 72%;margin:30px auto 0px auto; }
.imglist .img1{ width: 46%;height: 350px;margin:0 5px;}
.imglist .img1 img{ width: 100%;height: 320px;}
.imglist .img1 span{width: 100%;height: 30px; font-size: 14px;line-height: 30px;}
.case-content{ width: 72%;margin:0 auto; }

}



/* 媒体查询461-768px css */
@media (min-width: 461px)and (max-width: 768px) {
.com-head{height: 48px;}
.com-banner{height: 120px;}
.com-banner img{height: 120px;}


.ecase-item{height: 186px; }
.ecase-item img{height: 186px;}
.case-bt{height: 20px;}
.case-bt h2{font-size: 14px;line-height: 20px;margin-left: 10px;}
.case-bt p{width: 92%;height: 36px;margin:0 10px; font-size: 12px ;line-height: 12px;}
.case-bt a{width: 80px;height: 20px;font-family: 12px;line-height: 20px; margin-left: 10px;}
.ecase-item:hover .case-bt{ height:186px;}
.ecase-item:hover .case-bt h2{ position: relative;top:60px;}
.ecase-item:hover .case-bt p{ position: relative;top:60px;}
.ecase-item:hover .case-bt a{ position: relative;top:60px;}


.top h1{font-size: 28px;line-height: 60px;}
.top p{font-size: 15px; line-height: 28px;}
.left img{width: 96%;height: 128px;margin:51px 4% 51px 0px;}
.right h2{font-size: 16px; line-height: 32px;padding-top: 40px;}
.right p{font-size: 12px;line-height: 14px;height: 70px;overflow: hidden;}
.right a{width: 100px;height: 26px; font-size: 12px;font-weight:lighter; line-height: 26px; margin-top: 10px; }

.details{width: 72%;}
.details h1{font-size: 28px;line-height: 50px; padding-top: 50px;}
.details p{font-size: 14px; line-height: 20px;}
.imglist{ width: 72%;margin:30px auto 0px auto; }
.imglist .img1{ width: 46%;height: 300px;margin:0 5px;}
.imglist .img1 img{ width: 100%;height: 270px;}
.imglist .img1 span{width: 100%;height: 30px; font-size: 14px;line-height: 30px;}
.case-content{ width: 72%;margin:0 auto; }
}



/* 媒体查询339-460px css */
@media (min-width: 341px)and (max-width: 460px) {
.com-head{height: 36px;}
.com-banner{height: 100px;}
.com-banner img{height: 100px;}

.ecase-list{ width: 96%;}
.ecase-item{height: 320px; width: 100%;margin:0 0 30px 0;}
.ecase-item:nth-child(3n+3){margin:0 0px 30px 0;}
.ecase-item img{width: 100%;height: 320px;}
.case-bt p{font-size: 12px;line-height: 18px;}
.ecase-item:hover .case-bt{ height:320px;}

.top h1{font-size: 24px; line-height: 40px;}
.top p{font-size: 14px; line-height: 26px;}

.list{width: 96%;margin-top: 20px;}
.list-item{height: auto;width: 100%; margin:20px auto;}
.list-item .left{height: 180px;width: 100%; float:none; }
.left img{width: 100%;height: 180px;margin:10px auto;}
.list-item .right{height: auto;width: 100%; float:none;}
.right h2{font-size: 16px; line-height: 28px;padding-top: 20px;}
.right p{font-size: 12px; line-height: 14px;height: auto;}
.right a{width: 100px;height: 26px;font-size: 14px;line-height: 26px;margin-top: 10px; }

.details{width: 82%;}
.details h1{font-size: 24px;line-height: 40px; padding-top: 40px;}
.details p{font-size: 13px; line-height: 18px;}
.imglist{ width: 82%;margin:30px auto 0px auto; }
.imglist .img1{ width: 46%;height: 180px;margin:0 5px;}
.imglist .img1 img{ width: 100%;height: 150px;}
.imglist .img1 span{width: 100%;height: 30px; font-size: 13px;line-height: 30px;}
.case-content{ width: 82%;margin:0 auto; }
}



/* 媒体查询小于339px css */
@media (max-width: 340px) {
.com-head{height: 36px;}
.com-banner{height: 70px;}
.com-banner img{height: 70px;}

.ecase-list{width: 96%; }
.ecase-item{height: 260px; width: 100%;margin:0 0 30px 0;}
.ecase-item img{height: 260px;}
.case-bt p{font-size: 12px;line-height: 18px;}
.ecase-item:hover .case-bt{ height:260px;}

.top h1{font-size: 24px; line-height: 40px;}
.top p{font-size: 14px; line-height: 24px;}
.list{width: 96%;height: auto; margin-top: 20px;}
.list-item{height: auto;width:100%; margin:20px auto;}
.list-item .left{width:100%; height: 140px; }
.left img{width: 100%;height: 140px;margin:10px auto;}
.list-item .right{width:100%; height: auto;}
.right h2{font-size: 15px; line-height: 24px;padding-top: 10px;}
.right p{font-size: 12px; line-height: 14px;height: auto;}
.right a{width: 100px;height: 26px;font-size: 14px;line-height: 26px;margin-top: 10px; }


.details{width: 90%;}
.details h1{font-size: 24px;line-height: 40px; padding-top: 40px;}
.details p{font-size: 13px; line-height: 18px;}
.imglist{ width: 90%;margin:30px auto 0px auto; }
.imglist .img1{ width: 45%;height: 160px;margin:0 5px;}
.imglist .img1 img{ width: 100%;height: 130px;}
.imglist .img1 span{width: 100%;height: 30px; font-size: 13px;line-height: 30px;}
.case-content{ width: 90%;margin:0 auto; }
}