/* 案例主页 */

.maincasebanner-container{width: 100%;overflow: hidden;position: relative;}

.maincasebanner-container img{width: 100%;object-fit: cover;min-height: 260px;}

.maincasebanner-words{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

.maincasebanner-words h4{font-size: 68px;color: #fff;font-family: 'METROMEDIUMLT';text-transform: uppercase;}

.maincasepiclist-container{width: 100%;overflow: hidden;padding-bottom: 70px;}

.maincasepiclist{width: 94%;margin-left: 3%;}

.maincasepiclist ul{margin-left: -0.3%}

.maincasepiclist ul li{width: 33.033333333333%;float: left;margin-left: .3%;overflow: hidden;margin-top: 40px;}

.maincasepiclist-pic{width: 100%;overflow: hidden;height: 392px;}

.maincasepiclist-pic img{width: 100%;height: 100%;object-fit: cover;transition: all .8s;}

.maincasepiclist ul li:hover .maincasepiclist-pic img{transform: scale(1.1);}

.maincasepiclist-words{width: 100%;overflow: hidden;padding: 40px 54px;text-align: center;}

.maincasepiclist-words h4{font-size: 28px;color: #333;}

.maincasepiclist-words h4:hover{color: #d70808;}

.maincasepiclist-words span{display: block;font-size: 16px;color: #c4c4c4;margin-top: 6px;}

.maincasepiclist-words p{

    font-size: 14px;color: #898989;line-height: 24px;margin-top: 30px;height: 48px;

    overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

}

.maincasepiclist-words h6{display: inline-block;padding: 10px 6px;border-bottom: 2px solid #333;font-size: 14px;color: #333;margin-top: 30px;}

.maincasepiclist ul li:hover .maincasepiclist-words{background-color: #f2f2f2;}

.maincasepiclist-words h6:hover{color: #d70808;border-color: #d70808;}

.maincasepiclist ul li:last-child{display: flex;justify-content: center;align-items: center;background-color: #f2f2f2;height: 685px;padding: 0 30px}

.maincasepiclist-logo{width: 100%;text-align: center;}

.maincasepiclist-logo img{max-width: 100%;}





/* 案例 */

.casebanner-container{width: 100%;overflow: hidden;position: relative;}

.casebanner-container img{width: 100%;object-fit: cover;min-height: 620px;}

.casebanner-words{position: absolute;left: 3%;top: 50%;transform: translate(0,-50%);width: 94%;text-align: center;}

.casebanner-words h4{font-size: 68px;color: #fff;font-family: 'METROMEDIUMLT';text-transform: uppercase;}

.casebanner-words p{font-size: 20px;color: #fff;margin-top: 2px;}

.casebanner-click{
    background-color: rgba(255,255,255,.1);padding: 8px 16px 18px 16px;overflow: hidden;
    position: absolute;right: 3%;top: 22%;
}

.casebanner-click h6{text-align: center;overflow: hidden;font-size: 0;}

.casebanner-click h6 a{display: block;font-size: 16px;color: #fff;padding: 8px 0px;border-bottom: 1px solid transparent;margin-top: 8px;}

.casebanner-click h6 a.ontrue{color: #d70808;border-bottom-color: #d70808;}

.casebanner-click h6 a:hover{color: #d70808;}

.casebanner-click h6 span{display: inline-block;vertical-align: middle;font-size: 18px;color: #fff;margin: 0 24px;display: none;} 

.maincasebanner-container .swiper-pagination-bullet {

    width: 8px;height: 8px;display: inline-block;border-radius: 100%;

    background: #d70808;opacity: 1;vertical-align: middle;

}

.maincasebanner-container .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 6px;}

.maincasebanner-container .swiper-pagination-bullet-active {

    width: 10px;height: 10px;border-radius: 0;border: 2px solid #d70808;

    background-color: transparent;

}

.maincasebanner-container .swiper-pagination{bottom: 34px;}

.swiper-slide-active .maincasebanner-words h4{animation: dropDown 1s ease both; animation-delay:100ms;}

@keyframes dropDown {

    0% {transform: translateY(-60px)}

    100% {transform: translateY(0);}

}



.casepiclist-container{width: 100%;overflow: hidden;background-color: #f0f0f0;padding: 50px 0 30px 0;}

.casepiclist{width: 94%;margin-left: 3%;}

.casepiclist ul{margin-left: -0.3%;}

.casepiclist ul li{width: 24.7%;float: left;position: relative;margin-left: .3%;height: 444px;overflow: hidden;margin-top: .3%;}

.casepiclist ul li img{width: 100%;height: 100%;object-fit: cover;transition: all .6s;}

.casepiclist ul li:hover img{transform: scale(1.1);}

.casepiclist-shade{

    position: absolute;background-color: rgba(0, 0, 0, .6);top: 0%;left: 0%;width: 100%;

    height: 100%;z-index: 1;opacity: 0;transition: all .4s;

}

.casepiclist ul li:hover .casepiclist-shade{opacity: 1;}

.casepiclist-words{

    position: absolute;width: 100%;top: 50%;left: 0%;

    transform: translate(0,-50%);text-align: center;opacity: 0;transition: all .5s;z-index: 2;

}

.casepiclist-words a{display: block;width: 90%;height: 100%;margin-left: 5%;}

.casepiclist-words h6{font-size: 22px;color: #fff;transform: translateY(-20px);transition: all .6s;}

.casepiclist-words span{

    display: inline-block;width: 42px;height: 42px;border-radius: 100%;background-color: #d70808;text-align: center;line-height: 36px;font-size: 40px;color: #fff;

    margin-top: 24px;transform: translateY(20px);transition: all .6s;

}

.casepiclist-words:hover span{background-color: #fff;color: #d70808;}

.casepiclist ul li:hover .casepiclist-words{opacity: 1;}

.casepiclist ul li:hover .casepiclist-words h6{transform: translateY(0);}

.casepiclist ul li:hover .casepiclist-words p{transform: translateY(0);}



/* 案例详情 */

.xqcasebanner-container{width: 100%;overflow: hidden;position: relative;}

.xqcasebanner-container .swiper-wrapper img{width: 100%;object-fit: cover;min-height: 260px;}

.xqcasebanner-container .swiper-pagination-bullet{width: 8px;height: 8px;display: inline-block;border-radius: 100%;background: #d70808;opacity: 1;vertical-align: middle;}

.xqcasebanner-container .swiper-pagination-bullet-active{width: 10px;height: 10px;border-radius: 0;border: 2px solid #d70808;background-color: transparent;}

.xqcasebanner-container .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 8px;}

.xqcasebanner-container .swiper-pagination{bottom: 24px;}

.xqcasebanner-prev,.xqcasebanner-next{

    width: 40px;height: 44px;position: absolute;cursor: pointer;

    top: 50%;margin-top: -22px;z-index: 2;

}

.xqcasebanner-prev{left: 3%;background: url('../images/case/xq-L.png') no-repeat center center;}

.xqcasebanner-next{right: 3%;background: url('../images/case/xq-R.png') no-repeat center center;}

.xqcasebanner-prev:hover{background: url('../images/case/xq-LH.png') no-repeat center center;}

.xqcasebanner-next:hover{background: url('../images/case/xq-RH.png') no-repeat center center;}



.xqcasestate-container{width: 100%;overflow: hidden;background-color: #f0f0f0;padding: 80px 0;}

.xqcasestate{width: 94%;margin-left: 3%;}

.xqcasestate-left,.xqcasestate-right{width: 50%;float: left;overflow: hidden;}

.xqcasestate-left h6{width: 156px;height: 156px;overflow: hidden;display: inline-block;vertical-align: middle;}

.xqcasestate-left h6 img{width: 100%;height: 100%;transition: all .6s;}

.xqcasestate-left h6:hover img{transform: scale(1.1);}

.xqcasestate-left h5{display: inline-block;vertical-align: middle;margin-left: 36px;width: 64%;}

.xqcasestate-left h5 span{display: block;font-size: 14px;color: #777;margin-top: 12px;line-height: 22px;}

.xqcasestate-right h4{font-size: 34px;color: #333;}

.xqcasestate-right p{font-size: 14px;color: #777;line-height: 24px;margin-top: 20px;width: 80%;}



.xqcaserecom-container{width: 100%;overflow: hidden;padding: 70px 0;}

.xqcaserecom{width: 94%;margin-left: 3%;}

.xqcaserecom-title{width: 100%;overflow: hidden;}

.xqcaserecom-title h4{font-size: 28px;color: #333;}

.xqcaserecom-pic{width: 100%;overflow: hidden;}

.xqcaserecom-pic ul{margin-left: -0.3%;}

.xqcaserecom-pic ul li{width: 24.7%;float: left;height: 444px;overflow: hidden;margin-left: .3%;position: relative;margin-top: 22px;}

.xqcaserecom-pic ul li img{width: 100%;height: 100%;object-fit: cover;transition: all .6s;}

.xqcaserecom-pic ul li:hover img{transform: scale(1.06);}

.xqcaserecom-pic ul li .casepiclist-words span{transform: translateY(0);margin-top: 0;}

.xqcaserecom-pic ul li:hover .casepiclist-shade{opacity: 1;}

.xqcaserecom-pic ul li:hover .casepiclist-words{opacity: 1;}

.xqcaserecom-pic ul li:hover .casepiclist-words h6{transform: translateY(0);}

.xqcaserecom-pic ul li:hover .casepiclist-words p{transform: translateY(0);}

.xqcaserecom-pic ul li:hover .casepiclist-words span{background-color: #d70808;color: #fff;}



/* -------------------------PC端--------------------------- */



@media all and (max-width:1700px) {

    .maincasebanner-words h4{font-size: 54px;}

    .maincasepiclist-pic{height: 298px;}

    .maincasepiclist ul li:last-child{height: 591px;}

    .casebanner-words h4{font-size: 54px;}

    .casepiclist ul li{height: 338px;}

    .xqcaserecom-pic ul li{height: 338px;}

    .casepiclist-words h6{font-size: 20px;}

}



@media all and (max-width:1460px) {

    .maincasepiclist ul li{margin-top: 30px;}

    .maincasepiclist-pic{height: 281px;}

    .maincasepiclist-words {padding: 32px 38px;}

    .maincasepiclist ul li:last-child{height: 558px;}

    .casepiclist ul li{height: 318px;}

    .xqcaserecom-pic ul li{height: 318px;}

    .casepiclist-words h6{font-size: 18px;}

}



@media all and (max-width:1380px) {

    .maincasepiclist-pic{height: 265px;}

    .maincasepiclist-words h4{font-size: 26px;}

    .maincasepiclist-words p{margin-top: 24px;}

    .maincasepiclist ul li:last-child{height: 534px;}

    .casebanner-words h4 {font-size: 44px;}

    .casepiclist ul li{height: 300px;}

    .xqcaserecom-pic ul li{height: 300px;}

    .casepiclist-words h6{font-size: 16px;}

    .casepiclist-words span{margin-top: 18px;}

    .casepiclist-container {padding: 30px 0 30px 0;}

}



@media all and (max-width:1300px) {

    .maincasepiclist-pic{height: 244px;}

    .maincasepiclist ul li:last-child{height: 513px;}

    .maincasepiclist-words {padding: 32px 34px;}

    .casebanner-words h4 {font-size: 36px;}

    .casebanner-words p{font-size: 16px;}

    .casepiclist ul li{height: 280px;}

    .xqcaserecom-pic ul li{height: 280px;}

    .xqcasestate-right p{width: 100%;}

}



@media all and (max-width:1280px) {}



@media all and (max-width:1200px) {

    .maincasebanner-words h4 {font-size: 44px;}

    .maincasepiclist-pic{height: 207px;}

    .maincasepiclist ul li:last-child{height: 444px;}

    .maincasepiclist-words {padding: 24px 28px;}

    .maincasepiclist-words h4 {font-size: 24px;}

    .maincasepiclist-words h6{margin-top: 18px;}

    .casepiclist ul li{height: 240px;}

    .xqcaserecom-pic ul li{height: 240px;}

    .casepiclist-words span {margin-top: 14px;}

    .xqcasestate-left h5 {margin-left: 16px;width: 58%;}

    .xqcasestate-left h5 span{margin-top: 4px;}

}





/* ------------------------手机端-------------------------- */



@media all and (max-width:1000px) {

    .maincasepiclist ul{margin-left: 0;}

    .maincasepiclist ul li{width: 100%;margin-left: 0;}

    .maincasepiclist-pic{height: auto;}

    .maincasepiclist ul li {margin-top: 24px;}

    .maincasepiclist-words h4 {font-size: 20px;}

    .maincasepiclist-words p {margin-top: 16px;}

    .maincasepiclist-words h6 {margin-top: 14px;}

    .maincasepiclist ul li:last-child {height: 240px;}

    .maincasepiclist-container {padding-bottom: 44px;}

    .casepiclist ul{margin-left: -1%;}

    .casepiclist ul li{width: 49%;height: 160px;margin-left: 1%;margin-top: 1%;}

    .casepiclist-words h6 {font-size: 14px;}

    .casepiclist-words span {margin-top: 2px;}

    .xqcaserecom-pic ul{margin-left: -1%;}

    .xqcaserecom-pic ul li{width: 49%;height: 160px;margin-left: 1%;margin-top: 1%;}

    .xqcasebanner-prev, .xqcasebanner-next{display: none;}

    .xqcasestate-container {padding: 32px 0;}

    .xqcasestate-left, .xqcasestate-right{width: 100%;}

    .xqcasestate-left h6{width: 120px;height: 120px;}

    .xqcasestate-left h5{margin-left: 4px;width: auto;}

    .xqcasestate-right{margin-top: 12px;}

    .xqcasestate-right h4 {font-size: 24px;margin-top: 24px;}

    .xqcasestate-right p{margin-top: 10px;}

    .xqcaserecom-container {padding: 32px 0 44px 0;}

    .xqcaserecom-title h4 {font-size: 24px;}

    .xqcaserecom-title{padding-bottom: 16px;}

    .maincasebanner-words h4 {font-size: 24px;}

    .swiper-pagination {bottom: 20px;}

    
    .casebanner-container img {min-height: 360px;}
    .casebanner-click h6 a {padding: 4px 0px;margin-top: 4px;}
    .casebanner-click {right: 2%;top: 8%;}
    .casebanner-words {top: 50%;width: 46%;}
    .casebanner-words h4 {font-size: 28px;}

}