/* 服务资源 */
.resource-box,.service-box,.scene-box{ font-size: 0; margin: -10px; display: -ms-flexbox; display: -webkit-box; display: -moz-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.resource-box>li,.service-box>li{ display: inline-block; vertical-align: top; width: 33.33333%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; height: auto; }
.resource-item{ position: relative; box-sizing: border-box; border: 1px solid #ebedf0;  height: 100%; }
/* .resource-item::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: url(/images/new_kkidc/cloud_operation/resource_hover_bg.png) no-repeat; background-position: top right; background-size: auto 100%; box-shadow: 0px -2px 20px rgba(231, 233, 236, .5); opacity: 0; transition: all .3s; }
.resource-item:hover::before{ opacity: 1; } */
.resource-item-data{ position: relative; z-index: 1; }
.resource-title{ font-size: 18px; color: #1c1d1f; position: relative; padding: 0 46px; line-height: 1; background: url(/images/new_kkidc/cloud_operation/resource_hover_bg.png) no-repeat; background-position: top right;height: 60px;    display: flex;
    align-items: center;}
.resource-title::after{ content: ""; position: absolute; width: 100%; height: 1px; bottom: -25px; left: 0; background-color: #f6f8fb; opacity: 0; transition: all .3s; }
/* .resource-item:hover .resource-title::after{ opacity: 1; } */
.resource-title::before{ content: ""; position: absolute; width: 4px; height: 16px; left: 30px; top: 22px; background-color: #2981ff; }
.resource-data{ margin: -8px; display: flex; flex-wrap: wrap;padding: 30px; }
.resource-data-lis{ width: 33.33333%; padding: 8px; box-sizing: border-box; display: inline-block; vertical-align: top; }
.resource-data span{ font-size: 14px; color: #323235; background-color: #f2f4f7; display: block; text-align: center; height: 32px; line-height: 32px; transition: all .3s; }
/* .resource-item:hover .resource-data span{ background-color: #fdfefe; } */

/* 服务内容 */
.service-item-data .service-item-title{ font-size: 18px; color: #1c1d1f; margin-bottom: 11px; font-weight: bold;}
.service-box .col-2{width: 50%;}
.service-item-data span{ font-size: 14px; color: #626266; line-height: 24px; }
.service-item{ position: relative; padding:36px; box-sizing: border-box; border: 1px solid #ebedf0; height: 100%;min-height: 256px; background: linear-gradient(to bottom, #ebeef5, #fff); }
.service-item::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: url(/images/new_kkidc/cloud_operation/item_hover_bg_m.png) no-repeat; background-position: top right; background-size: auto 100%; box-shadow: 0px -2px 20px rgba(231, 233, 236, .5); opacity: 0; transition: all .3s; }
.col-2 .service-item::before{background: url(/images/new_kkidc/cloud_operation/item_hover_bg.png) no-repeat; background-position: top right; background-size: auto 100%;}
.service-item:hover::before{opacity: 1;}
.service-item-data{ display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.service-item-data img{ margin-bottom: 13px;width: 40px;height: 40px; }

/* 运维场景 */
.scene-box>li{ display: inline-block; vertical-align: top; width: 50%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; height: auto; }
.scene-item{ position: relative; box-sizing: border-box; border: 1px solid #ebedf0; height: 100%;background-color: #fff;min-height: 317px;transition: all .3s; }
.scene-item:hover{box-shadow: 0px -2px 20px rgba(231, 233, 236, .5);}
.scene-img{ height: 178px; width: 100%; background-position: top center;background-size: 100% 100%;transition: all .3s; }
.scene-item:hover .scene-img{background-size: 110% 110%;}
.scene-item-data{ padding: 32px; box-sizing: border-box; }
.scene-item-data p{ font-size: 18px; color: #1c1d1f; line-height: 1; margin-bottom: 14px; font-weight: bold;}
.scene-item-data span{ font-size: 14px; color: #626266; line-height: 24px; }

.service-item-iconfont{display: none;}
.service-item-div-more{display: none;}
.service-item-box{display: contents;}

@media screen and (max-width: 1023px) {
  .banner{
    margin-top: 0px;
  }
  .banner .swiper-slide video{
    display: none;
  }
  .banner-single .banner-ani{
    background-image: url(/images/new_kkidc/cloud_operation/m-banner.jpg);
  }
  .price-banner-box{
    display: flex;
    justify-content: center;
  }
  .resource-title::before{
    background: url(/images/new_kkidc/cloud_operation/m-icon-bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .resource-box>li, .service-box>li{
    width: 100%;
  }
  .resource-item::before{
    background-size: 0%;
  }
  .resource-item{
    background-size: 0%;
  }
  .resource-data-lis::before{
    content: "";
    position: absolute;
    background-color: #BDC4CF;
  }
  .resource-item:hover .resource-data span{
    background-color: transparent;
  }
  .resource-item:hover .resource-title::after{ opacity: 0; }
  .resource-item:hover::before{ opacity: 0; }
  .resource-data span{
    background-color: transparent;
    text-align: start;
  }
  .resource-box>li, .service-box>li{
    padding: 0;
  }
  .section-header h1, .section-header h3{
    font-size: 49px;
  }
  .service-box>li.service-item-li{
    display: none;
  }
  .resource-box-top{
    background: url(/images/new_kkidc/cloud_operation/m-resource_bg.png) no-repeat;
    background-position: top right;
    background-size: cover;
  }
  .resource-item{
    border: 0;
  }
  .service-item-iconfont{
    width: 100%;
    display: flex;
    color: #2981ff;
    padding: 65px 0;
    justify-content: center;
    font-size: 35px;
  }
  .service-item-li{
    display: none;
  }
  .service-item-div-more{
    display: none;
  }
  .service-item-more{
    display:inline-block;
    width: 100%;
  }
  .section-a1{
    background: #FFF;
  }
  .resource-box, .service-box, .scene-box{
    border: 1px solid #EBEDF0;
    box-shadow: 0px 8px 33px 0px rgba(18,51,100,0.08);
  }
  .section-a2 ul{
    width: auto;
  }
  .iconfont-iconclass{
    transform: rotate(90deg);
    padding: 0 20px;
  }
  .service-item-iconfont .drop{
    transform: rotate(270deg);
  }
  .card-bg-bommon{
    display: none;
  }
  .card-bg-bommon-drop{
    display: block;
  }
  .box-drop {
    display: none;
  }

  .resource-item-box{
    display: none !important;
  }
  .service-item::before{
    background-size: 0;
  }
  .service-box .col-2{
    width: 100%;
  }
  .section-a2 li>div{
    padding: 50px 20px 50px 53px;
  }
  .service-item-data{
    align-items: flex-start
  }
  .service-item-data img{
    position: absolute;
  }
  .service-item{
    border: 0;
    background-color: #F5F7FA;
  }
  .section-a2{
    background-color: #F5F7FA;
  }
  .section-a3{
    background-color: #FFF;
  }
  .service-item-box{
    display: none!important;
  }
  .service-item-box-more{
    display: block!important;
  }
  .card-bg-bommon-more-box{
    display: none;
  }
  .card-bg-top-box{
    display: block;
  }
  .box-drop-box{
    display: none;
  }
  .card-bg-bommon-drop-box{
    display: block;
  }
  .drop-box{
    transform: rotate(270deg);
  }
  .scene-box>li{
    width: 100%;
  }
  .scene-img{
    width: auto;
    margin: 14px 14px 17px 14px;
    height: 120px;
    background-size: 100% 100%;
  }
  .scene-item:hover{
    background: linear-gradient(0deg, #F2F5FA 0%, #FFFFFF 100%);
    box-shadow: 0px 8px 33px 0px rgba(18,51,100,0.12);
    border: 1px solid #FFFFFF;
  }
  .scene-item{
    background: linear-gradient(0deg, #F2F5FA 0%, #FFFFFF 100%);
    box-shadow: 0px 8px 33px 0px rgba(18,51,100,0.12);
    border: 1px solid #FFFFFF;
  }
  .scene-box>li{
    padding: 20px;
  }
  .scene-box-more{
    border: 0;
    box-shadow: 0px 0px 0px 0px;
  }
  .scene-box-more>li{
    padding: 0;
    margin: 0 1px;
  }
  .section-a3 .scene-box-more>li{
    border: 0;
  }
  .resource-title::after{
    height: 0;
  }
  .section-a1 .resource-box, .service-box, .scene-box {
    border: 1px solid #EBEDF0;
    box-shadow: 0px 8px 33px 0px rgba(18,51,100,0.08);
  }
  .section-header h1, .section-header h3{
    font-size: 37px;
  }
  .service-item-iconfont{
    font-size: 27px;
  }
  .section-a1{
    padding: 60px 0 10px 0;
  }
  .section-header h1, .section-header h3{
    font-size: 20px;
  }
  .resource-title::before{
    width: 18px;
    height: 14px;
    top: 2px;
    left: 0;
  }
  .resource-data span{
    line-height: 14px;
    font-weight: normal;
    color: #626266;
    font-size: 15px;
    margin: 0 14px;
    height: 15px;
  }
  .resource-data-lis::before{
    width: 4px;
    height: 4px;
    margin: 5px 0;
  }
  .service-item-iconfont{
    font-size: 15px;
  }
  .iconfont{
    font-size: 10px;
  }
  .iconfont-iconclass{
    padding: 0 7px;
  }
  .service-item-iconfont{
    padding: 54px 0;
  }
  .service-item-data .service-item-title{
    font-weight: bold;
    font-size: 16px;
    color: #1C1D1F;
    margin-left: 41px;
    margin-bottom: 9px;
  }
  .section-a2 li>div span{
    line-height: 20px;
    font-size: 13px;
    color: #626266;
    font-weight: normal;
  }
  .section-a2 li>div{
    padding: 35px 20px 15px 22px;
  }
  .service-item-data img{
    margin: -3px 0;
  }
  .scene-item{
    min-height: 243px;
  }
  .scene-item-data{
    padding: 0px 14px 18px;
  }
  .section-a1{
    padding: 39px 0 0;
  }
  .section-header{
    margin-bottom: 35px;
  }
  .resource-title {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 15px;
    margin-bottom: 6px;
    padding-left: 30px;
    border-bottom: 1px solid #EBEDF0;
    height: auto;
    background: none;
  }
  .resource-data {
    margin: 0 -10px;
    padding: 0;
  }
  .resource-data-lis{
    padding: 8px 0 8px 24px;
  }
  .resource-box, .service-box, .scene-box{
    margin: 0;
  }
  .section-a1 .service-item-iconfont{
    padding: 20px 0px 37px 12px;
  }
  .section-a2 .service-item-iconfont{
    padding: 1px 0px 33px 20px;
  }
  .section-a2{
    padding: 40px 0 0 0;
  }
  .resource-box, .service-box, .scene-box{
    box-shadow: 0 0 0 0;
  }
  .section-a2 .section-header{
    margin-bottom: 27px;
  }
  .section-a2 li>div{
    padding: 0px 0px 15px;
    background: #F5F7FA;
  }
  .service-item{
    min-height: 94px;
  }
  .resource-box>li, .service-box>li{
    text-align: justify;
  }
  .section-a3 .section-header{
    margin-bottom: 20px;
  }
  .banner-single .n-btn-default{
      margin-right: 0;
  }
  .banner-info .price-banner-box .n-btn-default{
    margin-right: 0;
  }
  .n-btn-default {
    width: 150px;
    border-radius: 0;
    line-height: 15px;
  }
  .section-a1 .section-header {
    margin-bottom: 24px;
  }
  .section-a1 .resource-box, .service-box, .scene-box{
    border: 1px solid #EBEDF0;
    padding-bottom: 5px;
  }
  .section-a1 .section-body li{
    border: 0;
    margin-bottom: 0;
  }
  .section-a1 li>div {
    width: 100%;
    height: 110px;
    padding: 22px 18px 0;
  }
  .service-item-div-more .resource-item{
    padding: 0 18px 0;
  }
  .section-a2 .section-body li{
    border: 0;
  }
  .section-a2 .resource-box, .service-box, .scene-box{
    border: 0;
    padding-bottom: 5px;
  }
  .service-item-data img {
    width: auto;
    height: auto;
    max-width: 26px;
    margin-right: 15px;
  }
  .section-a2 .section-body li:not(:last-child){
    margin-bottom: 0px;
  }
  .col-2 .service-item{
    min-height: 175px;
  }
  .section-a3 {
    padding: 39px 0 34px;
  }
  .scene-item-data p{
    font-size: 16px;
    line-height: 21px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .scene-item-data span {
    font-size: 14px;
    line-height: 21px;
  }
  .section-a3 .section-body li:not(:last-child){
    margin-bottom: 14px;
  }
  .section-a3 .scene-item-dowm{
    margin: 0 0 10px 0;
  }
  .col-2 .service-item::before{
    background-size: 0%;
    box-shadow: none;
  }
}