.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(/templates/default/images/product/cloud_operatio/resource_hover_bg.png) no-repeat; background-position: top right;height: 60px;    display: flex;
    align-items: center;background-size: 100% auto;}
.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; }
.section--inverse{background: #fff !important;}

.process__title{font-size: 32px;
    line-height: 48px;
    color: #1a2233;
    margin-bottom: 40px;
    text-align: center;}


.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(/templates/default/images/product/cloud_operatio/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(/templates/default/images/product/cloud_operatio/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; }

@media screen and (max-width: 1023px) {
			body {
		background-color:#f5f6f7;
	}
	div {
		box-sizing: border-box;
	}
	.cloud_operatio-head-m{
		width:100%;
		height:18rem;
		background-color: #fff;
		padding: 0 1rem;
	}
	.cloud_operatio-head-card-name-m{
		padding-top: 4rem;
		font-size:2.4rem;
		color:#212329;
	}
	.cloud_operatio-head-card-content-m{
		margin-top:.8rem;
		font-size:1.4rem;
		color:#939499;
		line-height: 1.8rem;
	}
		.nav-bar{
		min-width:100%!important;
		padding: 0 1rem;
	}
	
	.nav-bar__item + .nav-bar__item{
		margin-left:1.5rem;
	}
	.page1-container-m{
		margin-top: 4rem;
	}
		.page1-head-m{
		font-size:2.4rem;
		color:#212329;
		padding-left: 2rem;
	}
	  .resource-box {
			margin: 0 1rem;
        border: 1px solid #EBEDF0;
        padding-bottom: 5px;
				box-shadow: 0px .8rem 3.3rem 0px rgba(18, 51, 100, 0.08);
			flex-direction: column;
    }
	    .resource-box li {
				width: 100%;
        border: 0;
        margin-bottom: 0;
				padding: 0;
    }
	.resource-box li>div {
        width: 100%;
/*        height: 11rem;*/
        padding: 2.1rem 1.8rem 0;
			        background-color: #fff;
    }
	    .resource-title {
        font-size: 1.6rem;
        font-weight: 500;
        padding-bottom: 1.5rem;
        margin-bottom: 6px;
        padding-left: 3rem;
        border-bottom: 1px solid #EBEDF0;
        height: auto;
        background: none;
				    color: #1c1d1f;
   		 	position: relative;
    		line-height: 1;
				display: flex;
    		align-items: center;
    }
	.resource-title::before {
		    content: "";
    		position: absolute;
        width: 18px;
        height: 14px;
        top: 2px;
        left: 0;
		    background: url(/templates/default/images/product/cloud_operatio/m-icon-bg.png) no-repeat;
        background-size: 100% 100%;
    }
	.resource-title::after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: -25px;
    left: 0;
    background-color: #f6f8fb;
    transition: all .3s;
		        height: 0;
}
	    .resource-data {
        margin: 0 -10px;
        padding: 0;
				display: flex;
    		flex-wrap: wrap;
    }
	
	.page2-container-m{
		margin-top: 4rem;
	}
			.service-box{
		margin: 0 1rem;
		margin-top: 2rem;
	}
	.service-box li {
		width: 100%;
		
	}
	.service-item{
		padding: 0;
		min-height: unset;
		padding: 1.5rem 2rem;
	}
	.service-item-data {
    display: flex;
    flex-direction: column;
		align-items: unset;
    position: relative;
    z-index: 1;
}
	    .service-item-data img {
        max-width: 4.4rem;
    }
	    .service-item-data img {
        position: absolute;
        left: 0;
    }
	    .service-item-data .service-item-title {
        font-size: 1.6rem;
        margin-top: .8rem;
        color: #1C1D1F;
        font-weight: bold;
        margin-left: 3.8rem;
        margin-bottom: .9rem;
    }
	    .service-item-data span {
        font-size: 1.3rem;
        color: #626266;
        line-height: 2rem;
    }
	.page3-container-m {
		margin-top: 4rem;
		margin-bottom: 2rem;
	}
	.scene-box{
		margin: 0 1rem;
		margin-top: 2rem;
		flex-direction: column;
	}
	.scene-box>li{
		width: 100%;
	}
	.scene-item{
		min-height: unset;
	}
	.scene-item-data{
		padding: 1.5rem 1.2rem;
	}
}