.customer-case-article-box {
    font-size: 16px;
    /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);*/
    /*border-radius: 8px;*/
    margin-top: 112px;
    background: #F1F4FA;
    position: relative;
}
.customer-case-article-box .customer-case-article-box-header-bg {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0.41%, #5385E5), color-stop(99.37%, #55B2F5));
    background: -o-linear-gradient(344.72deg, #5385E5 0.41%, #55B2F5 99.37%);
    background: linear-gradient(105.28deg, #5385E5 0.41%, #55B2F5 99.37%);
    position: absolute;
    left: 0;
    right: 0;
    height: 338px;
}
.customer-case-article-box .banner {
    width: 1100px;
    height: 370px;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    position: relative;
}
.customer-case-article-box > .site-container {
    padding-top: 24px;
    position: relative;
}
.customer-case-article-box > .site-container::before {
    content: '';
    position: absolute;
    background: linear-gradient(45.65deg, #67A8F7 13.94%, rgba(103, 168, 247, 0) 52.77%);
    opacity: 0.5;
    transform: rotate(103.65deg);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    left: -68px;
    top: 170px;
}
.customer-case-article-box.swan .banner {
    background-image: url(../images/site-customer-case/banner/白天鹅宾馆-min.png);
}
.customer-case-article-box.shdh .banner {
     background-image: url(../images/site-customer-case/banner/上海东湖宾馆-min.png);
}
.customer-case-article-box.szny .banner {
     background-image: url(../images/site-customer-case/banner/苏州南园宾馆-min.png);
}
.customer-case-article-box.fsjy .banner {
     background-image: url(../images/site-customer-case/banner/佛山君御温德姆至尊酒店-min.png);
}
.customer-case-article-box.shgj .banner {
     background-image: url(../images/site-customer-case/banner/上海国际贵都大饭店-min.png);
}
.customer-case-article-box.sdds .banner {
     background-image: url(../images/site-customer-case/banner/山东大厦-min.png);
}
.customer-case-article-box.kmhzc .banner {
     background-image: url(../images/site-customer-case/banner/昆明花之城豪生国际大酒店-min.png);
}
.customer-case-article-box.gzby .banner {
     background-image: url(../images/site-customer-case/banner/广州白云国际会议中心-min.png);
}
.customer-case-article-box.hkml .banner {
     background-image: url(../images/site-customer-case/banner/美兰机场酒店-min.png);
}
.customer-case-article-box.sylh .banner {
     background-image: url(../images/site-customer-case/banner/三亚丽禾温德姆酒店-min.png);
}
.customer-case-article-box.mgm .banner {
     /*background-image: url(../images/site-customer-case/banner/三亚美高梅度假酒店.png);*/
     background-image: url(../images/site-customer-case/banner/三亚美高梅度假酒店-2-min.png);
     /*background-image: url(../images/site-customer-case/banner/三亚美高梅度假酒店.svg);*/
}
.customer-case-article-box.jnyz .banner {
     background-image: url(../images/site-customer-case/banner/济南银座泉城大酒店.png);
}
.customer-case-article-box.yxhg .banner {
     background-image: url(../images/site-customer-case/banner/上海银星皇冠假日酒店-min.png);
}
.customer-case-article-box.blyy .banner {
     background-image: url(../images/site-customer-case/banner/广州保利悦雅酒店-min.png);
}
.customer-case-article-box .article {
    padding: 60px 100px;    
    background-color: #fff;
    position: relative;
    z-index: 1;
    border-radius: 0 0 8px 8px;
}
.customer-case-article-box .article-title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 39px;
    color: #656565;
}
.customer-case-article-box .article-content {
    
}
.customer-case-article-box .article-content p {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 40px;
    color: #656565;
    margin-bottom: 66px;
}
.customer-case-article-box .article-content h1 {
    
}
.customer-case-article-box .article-content h2 {
    
}
.customer-case-article-box .article-content h3 {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    color: #656565;
}
.customer-case-article-box .article-content h4 {
    
}
.customer-case-article-box .article-content h5 {
    
}
.customer-case-article-box .article-content h6 {
    
}
.customer-case-article-box .article-content .color-info {
    color: #0E72B8;    
}
.customer-case-article-box .article-content {
    
}
.customer-case-article-box .customer-case-article-box-content {
    background: #F1F4FA;
    font-size: 16px;
    padding: 60px 0;
/*    font-size: 0.16rem;
    padding: 0.6rem 0;*/
}
.customer-case-article-box .customer-case-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.customer-case-article-box .customer-case {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px #DEDEDE;
    border-radius: 8px;
    width: 340px;
    height: 420px;
    margin: 18px 0;
/*    box-shadow: 0px 0px 0.1rem #DEDEDE;
    border-radius: 0.08rem;
    width: 3.4rem;
    height: 4.2rem;
    margin: 0.18rem 0;*/
    box-sizing: border-box;
    overflow: hidden;
}
.customer-case-article-box .customer-case .customer-case-img-box {
    position: relative;
}
.customer-case-article-box .customer-case .customer-case-landsacpe {
    display: inline-block;
    width: 340px;
    height: 190px;
/*    width: 3.4rem;
    height: 1.9rem;*/
    background-color: #ccc;
    background-repeat: no-repeat;
    background-size: cover;
}
.customer-case-article-box .customer-case .customer-case-logo {
    position: absolute;
    width: 90px;
    height: 90px;
/*    width: 0.9rem;
    height: 0.9rem;*/
    border-radius: 50%;
    background-color: lightblue;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);    
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 0px 0px 6px #DEDEDE;
}
.customer-case-article-box .customer-case:hover .customer-case-landsacpe {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.customer-case-article-box .customer-case .customer-case-img-box {
    position: relative;
}
.customer-case-article-box .customer-case.swan .customer-case-landsacpe {
    background-image: url(../images/site-customer-case-list/banner/白天鹅宾馆-min.png);
}
.customer-case-article-box .customer-case.hkml .customer-case-landsacpe {
    background-image: url(../images/site-customer-case-list/banner/美兰机场酒店-min.png);
}
.customer-case-article-box .customer-case.shdh .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/上海东湖宾馆-min.png);
}
.customer-case-article-box .customer-case.mgm .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/三亚美高梅度假酒店.png);
}
.customer-case-article-box .customer-case.szny .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/苏州南园宾馆-min.png);
}
.customer-case-article-box .customer-case.fsjy .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/佛山君御温德姆至尊酒店-min.png);
}
.customer-case-article-box .customer-case.shgj .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/上海国际贵都大饭店-min.png);
}
.customer-case-article-box .customer-case.sdds .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/山东大厦-min.png);
}
.customer-case-article-box .customer-case.kmhzc .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/昆明花之城豪生国际大酒店-min.png);
}
.customer-case-article-box .customer-case.gzby .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/广州白云国际会议中心-min.png);
}
.customer-case-article-box .customer-case.sylh .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/三亚丽禾温德姆酒店-min.png);
}
.customer-case-article-box .customer-case.jnyz .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/济南银座泉城大酒店.png);
}
.customer-case-article-box .customer-case.yxhg .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/上海银星皇冠假日酒店-min.jpg);
}
.customer-case-article-box .customer-case.blyy .customer-case-landsacpe {
     background-image: url(../images/site-customer-case-list/banner/广州保利悦雅酒店-min.png);
}
.customer-case-article-box .customer-case.swan .customer-case-logo {
    background-image: url(../images/site-customer-case-list/logo/白天鹅宾馆.png);
}
.customer-case-article-box .customer-case.shdh .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/上海东湖宾馆.png);
}
.customer-case-article-box .customer-case.szny .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/苏州南园宾馆.png);
}
.customer-case-article-box .customer-case.fsjy .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/佛山君御温德姆至尊酒店.png);
}
.customer-case-article-box .customer-case.shgj .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/上海国际贵都大饭店.png);
}
.customer-case-article-box .customer-case.sdds .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/山东大厦.png);
}
.customer-case-article-box .customer-case.kmhzc .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/昆明花之城豪生国际.png);
}
.customer-case-article-box .customer-case.gzby .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/广州白云国际会议中心.png);
}
.customer-case-article-box .customer-case.sylh .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/三亚丽禾温德姆酒店.png);
}
.customer-case-article-box .customer-case.yxhg .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/上海银星皇冠假日酒店.jpg);
}
.customer-case-article-box .customer-case.mgm .customer-case-logo {
     background-image: url(../images/site-customer-case-list/logo/三亚美高梅度假酒店-2.png);
     background-position: center;
     /*background-size: 59px 60px;*/
     background-size: 150px 66px;
}
.customer-case-article-box .customer-case.jnyz .customer-case-logo {
    background-image: url(../images/site-customer-case-list/logo/济南银座泉城大酒店.png);
    background-position: center;
}
.customer-case-article-box .customer-case.hkml .customer-case-logo {
    background-image: url(../images/site-customer-case-list/logo/美兰机场酒店.png);
    background-position: center;
}
.customer-case-article-box .customer-case.blyy .customer-case-logo {
    background-image: url(../images/site-customer-case-list/logo/广州保利悦雅酒店.png);
    background-position: center;
}
.customer-case-article-box .customer-case-content {
    /*margin-top: 0.72rem;*/
    margin-top: 72px;
}
.customer-case-article-box .customer-case-content .title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 36px;
/*    font-size: 0.24rem;
    line-height: 0.36rem;*/
    text-align: center;
    color: #0E72B8;
}
.customer-case-article-box .customer-case-content .desc {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 30px;
/*    font-size: 0.16rem;
    line-height: 0.30rem;*/
    text-align: center;
    color: #3C4144;
}
.customer-case-article-box .szny-article-img-1 {
    width: 900px;
    height: 220px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    background-image: url(../images/site-customer-case/article-photo/szny-article-img-1.png);
}
.customer-case-article-box .sylh-article-img-1 {
    width: 650px;
    height: 521.55px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    background-image: url(../images/site-customer-case/article-photo/1做房流程.png);
    margin: 20px auto;
}
.customer-case-article-box .sylh-article-img-2 {
    width: 700px;
    height: 552.19px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    background-image: url(../images/site-customer-case/article-photo/2工程维修流程.png);
    margin: 20px auto;
}
.customer-case-article-box .sylh-article-img-3 {
    width: 700px;
    height: 564.46px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    background-image: url(../images/site-customer-case/article-photo/3住客服务流程.png);
    margin: 20px auto;
}
.customer-case-article-box .mgm-article-img-1,
.customer-case-article-box .mgm-article-img-2,
.customer-case-article-box .mgm-article-img-3
{
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    margin: 20px auto;
    width: calc(1080px / 1.2);
}
.customer-case-article-box .mgm-article-img-1 {
    height: calc(657px / 1.2);
    background-image: url(../images/site-customer-case/article-photo/mgm-article-img-1.png);
}
.customer-case-article-box .mgm-article-img-2 {
    height: calc(624px / 1.2);
    background-image: url(../images/site-customer-case/article-photo/mgm-article-img-2.png);
}
.customer-case-article-box .mgm-article-img-3 {
    height: calc(659px / 1.2);
    background-image: url(../images/site-customer-case/article-photo/mgm-article-img-3.png);
}
.customer-case-article-box article img{
    max-width: 100%;
}
@media screen and (max-width: 768px) {
    .customer-case-article-box .mgm-article-img-1,
    .customer-case-article-box .mgm-article-img-2,
    .customer-case-article-box .mgm-article-img-3
    {
        width: 90vw;
    }
    .customer-case-article-box .mgm-article-img-1 {
        --width: 90vw;
        height: calc(var(--width) / 1080 * 657);
    }
    .customer-case-article-box .mgm-article-img-2 {
        --width: 90vw;
        height: calc(var(--width) / 1080 * 624);
    }
    .customer-case-article-box .mgm-article-img-3 {
        --width: 90vw;
        height: calc(var(--width) / 1080 * 659);
    }
}

@media screen and (max-width: 948px){
    .customer-case-article-box .szny-article-img-1{border: 0; width: auto; background-size: 100%;}
}
@media screen and (max-width: 768px){
    .customer-case-article-box{
        margin-top: calc(96 / 750 * 100vw);
        background: #fff;
    }
    .customer-case-article-box .customer-case-article-box-header-bg{ height: 26vw;}
    .customer-case-article-box > .site-container::before{ display: none;}
    .customer-case-article-box .banner{ border-top-left-radius: 10px; border-top-right-radius: 10px; width: auto; height: 30vw; background-size: cover;}
    .customer-case-article-box .article{ padding: 30px 0;}

    .customer-case-article-box .customer-case-article-box-content{ padding-top: 0; background: #fff;}
    .customer-case-article-box .customer-case{ width: 42.5vw;}
    
    .customer-case-article-box .szny-article-img-1{ height: 30vw;}

    .customer-case-article-box .sylh-article-img-1,.customer-case-article-box .sylh-article-img-2,.customer-case-article-box .sylh-article-img-3{ width: auto; height: 72vw; background-size: contain;}
}
@media screen and (max-width: 425px){
    .customer-case-article-box .customer-case-list>a{ margin: auto;}
    .customer-case-article-box .customer-case{ width: 80vw; max-width: 340px;}
}
@media screen and (max-width: 650px){
    .customer-case-article-box .article-title{ font-size: 20px;}
}