html { background-color: #ffffff; }

.banner { width: 100%; height: 5.08929rem; background-size: cover; background: url("../images/services/service-banner.png") no-repeat center center; background-size: cover; padding-top: 1.78571rem; }

.banner .w-1200 { margin: 0 auto; }

.banner-title { font-size: 0.35714rem; font-weight: 500; color: #FFFFFF; line-height: 0.5rem; }

.banner-hint { font-size: 0.14286rem; font-weight: 400; color: #FFFFFF; line-height: 0.19643rem; margin-top: 0.26786rem; }

.banner-hint p { margin-top: 0.08929rem; }

.banner-btn { margin-top: 0.26786rem; }

.banner-btn button { width: 1.39286rem; height: 0.35714rem; background: rgba(255, 255, 255, 0.2); border-radius: 0.03571rem 0.03571rem 0.03571rem 0.03571rem; text-align: center; font-size: 0.125rem; font-weight: 400; color: #FFFFFF; transition: all 0.3s; cursor: pointer; }

.banner-btn button:hover { background-color: #162EB3; }

.banner-btn button span { margin-right: 0.125rem; }

.title { font-size: 0.28571rem; font-weight: bold; color: #333333; line-height: 0.40179rem; text-align: center; }

.services { height: 5.89286rem; padding-top: 0.89286rem; }

.services-list { display: flex; justify-content: center; margin-top: 0.35714rem; }

.services-item { margin: 0 0.22321rem; width: 2.33929rem; height: 3.35714rem; background: rgba(255, 255, 255, 0.39); border-radius: 0.01786rem; position: relative; cursor: pointer; padding: 0.44643rem 0.26786rem 0; text-align: center; }

.services-item:hover, .services-item.active { box-shadow: 0 0 0.26786rem rgba(0, 0, 0, 0.06); }

.services-item:hover::before, .services-item.active::before { content: ""; display: block; width: 2.33929rem; height: 0.03571rem; background: #162eb3; top: 0; left: 0; position: absolute; }

.services-item-icon { display: block; width: 0.80357rem; height: 0.80357rem; margin: 0 auto; }

.services-item-title { font-size: 0.17857rem; font-weight: bold; line-height: 0.26786rem; color: #000000; margin-top: 0.35714rem; text-align: center; }

.services-item-text { font-size: 0.14286rem; font-weight: 400; line-height: 0.25rem; color: #8A8A8A; margin-top: 0.17857rem; }

.services-tabs { display: none; position: fixed; left: 0; right: 0; top: 0.625rem; height: 0.71429rem; background-color: #ffffff; z-index: 59; }

.services-tabs .services-tab { justify-content: space-between; align-items: center; height: 100%; }

.services-tabs .services-tab-item { width: 2.33929rem; height: 0.35714rem; opacity: 1; border-radius: 0.03571rem; font-size: 0.125rem; font-weight: 400; color: #000000; text-align: center; line-height: 0.35714rem; cursor: pointer; position: relative; z-index: 3; }

.services-tabs .services-tab-item.active { background: #162eb3; color: #ffffff; }

.services-tabs .services-tab-item:hover:not(.active) { color: #162eb3; }

.services-content { background: #f5f6fb; }

.services-content .swiper-slide { height: 100%; }

.services-content .content-title { font-size: 0.28571rem; font-weight: 500; line-height: 0.40179rem; color: #222222; text-align: center; }

.services-content .small-title { font-size: 0.17857rem; font-weight: 500; line-height: 0.25rem; color: #FFFFFF; text-align: center; }

.services-content .customization { height: 9.89286rem; padding-top: 0.89286rem; }

.services-content .customization-header { background: url("../images/services/customization-bg.png"); background-size: cover; width: 10.71429rem; height: 3.17857rem; padding-top: 0.23214rem; margin-top: 0.35714rem; }

.services-content .customization-list { display: flex; justify-content: center; margin-top: 0.25rem; }

.services-content .customization-item { margin: 0 0.11607rem; }

.services-content .customization-item .border-block { width: 3.57143rem; height: 0.98214rem; border: 0.00893rem solid #FFFFFF; font-size: 0.14286rem; font-weight: 500; line-height: 0.19643rem; color: #FFFFFF; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.services-content .customization-item .border-block img { font-size: 0.44643rem; display: block; margin: 0 auto 0.14286rem; width: 0.44643rem; height: 0.44643rem; }

.services-content .customization-item .border-block.active { background-color: rgba(52, 101, 255, 0.83); border-color: rgba(52, 101, 255, 0.83); }

.services-content .customization-text { margin-top: 0.28571rem; text-align: center; font-size: 0.125rem; font-weight: 500; line-height: 0.25rem; color: rgba(255, 255, 255, 0.8); }

.services-content .customization-card { height: 3.63393rem; background: #FFFFFF; padding-top: 0.23214rem; margin-top: 0.53571rem; }

.services-content .customization-card .small-title { color: #333333; }

.services-content .customization-card .border-top { border-top: 0.00893rem solid #e7e7e9; }

.services-content .customization-table { display: flex; align-items: center; padding: 0.23214rem 0; }

.services-content .customization-table-td { height: 1.07143rem; flex: 1; position: relative; border-right: 0.00893rem solid #e7e7e9; padding-left: 0.89286rem; padding-top: 0.17857rem; }

.services-content .customization-table-td:last-child { border-right: none; }

.services-content .customization-table-td .title-1 { font-size: 0.17857rem; color: #333333; line-height: 0.25rem; }

.services-content .customization-table-td .text-1 { font-size: 0.125rem; font-weight: 400; color: #8A8A8A; line-height: 0.17857rem; margin-top: 0.08929rem; width: 1.78571rem; }

.services-content .okr { height: 10.15179rem; padding-top: 0.89286rem; }

.services-content .okr .small-title { color: #333333; margin-top: 0.35714rem; }

.services-content .okr-list { display: flex; align-items: center; border: 0.00893rem solid #E5E5E5; margin-top: 0.26786rem; margin-bottom: 0.89286rem; }

.services-content .okr-item { padding-top: 0.26786rem; padding-left: 0.44643rem; padding-right: 0.44643rem; height: 3.03571rem; width: 2.76786rem; background: #FFFFFF; transition: all 0.5s; cursor: pointer; }

.services-content .okr-item:nth-child(1) i { background-image: url("../images/services/okr-icon-1.png"); }

.services-content .okr-item:nth-child(2) i { background-image: url("../images/services/okr-icon-2.png"); }

.services-content .okr-item:nth-child(3) i { background-image: url("../images/services/okr-icon-3.png"); }

.services-content .okr-name { font-size: 0.17857rem; color: #3f3f3f; line-height: 0.25rem; width: 0.89286rem; display: flex; flex-direction: column; align-items: center; transform: translateX(0.49107rem); transition: transform 0.5s; font-weight: 600; }

.services-content .okr-name i { display: block; background-size: cover; width: 0.36607rem; height: 0.36607rem; margin-bottom: 0.125rem; }

.services-content .okr-info { margin-top: 0.26786rem; font-size: 0.125rem; font-weight: normal; color: #8A8A8A; line-height: 0.17857rem; }

.services-content .okr-info p { margin-top: 0.17857rem; }

.services-content .okr-item.active { width: 5.16071rem; background-color: #261c6c; }

.services-content .okr-item.active .okr-name { transform: translateX(0); align-items: flex-start; }

.services-content .okr-item.active:nth-child(1) i { background-image: url("../images/services/okr-icon-active-1.png"); }

.services-content .okr-item.active:nth-child(2) i { background-image: url("../images/services/okr-icon-active-2.png"); }

.services-content .okr-item.active:nth-child(3) i { background-image: url("../images/services/okr-icon-active-3.png"); }

.services-content .okr-item.active * { color: #ffffff !important; }

.services-content .okr .programme { display: flex; justify-content: space-between; margin-top: 0.26786rem; }

.services-content .okr .programme-item { width: 1.875rem; }

.services-content .okr .programme-item img { display: block; width: 100%; height: 100%; margin: 0 auto; }

.services-content .okr .programme-item .programme-icon { width: 1.375rem; height: 1.375rem; border-radius: 50%; cursor: pointer; margin: 0 auto; }

.services-content .okr .programme-item .programme-icon:hover { box-shadow: 0 0 0.08929rem 0.00893rem rgba(0, 0, 0, 0.1); }

.services-content .okr .programme-item .programme-title { height: 0.25rem; font-size: 0.17857rem; font-weight: bold; color: #000000; line-height: 0.25rem; text-align: center; margin-top: 0.29464rem; }

.services-content .okr .programme-item .programme-info { font-size: 0.125rem; font-weight: 400; color: #333333; line-height: 0.19643rem; margin-top: 0.17857rem; }

.services-content .agile { height: 11.04464rem; padding-top: 0.89286rem; }

.services-content .agile .hint { font-size: 0.125rem; font-weight: normal; color: #555555; line-height: 0.17857rem; margin-top: 0.17857rem; margin-bottom: 0.89286rem; text-align: center; }

.services-content .agile .small-title { color: #333333; }

.services-content .agile .pitfall-list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 10.71429rem; margin: 0.35714rem auto 0.89286rem; }

.services-content .agile .pitfall-item { display: flex; align-items: center; width: 2.67857rem; height: 1.07143rem; padding-left: 0.26786rem; cursor: pointer; }

.services-content .agile .pitfall-item img { display: block; width: 0.35714rem; margin-right: 0.26786rem; }

.services-content .agile .pitfall-item:hover { background: #F5F6FB; box-shadow: 0 0.07143rem 0.35714rem rgba(96, 171, 255, 0.12); }

.services-content .agile .pitfall-num { font-size: 0.14286rem; font-weight: 500; color: #222222; line-height: 0.19643rem; }

.services-content .agile .pitfall-text { font-size: 0.10714rem; font-weight: 400; color: #555555; line-height: 0.16071rem; margin-top: 0.03571rem; }

.services-content .agile .helps { display: flex; justify-content: space-between; margin-top: 0.35714rem; }

.services-content .agile .help-item { width: 5.13393rem; height: 3.35714rem; background: #FFFFFF; border-radius: 0.00893rem 0.00893rem 0.00893rem 0.00893rem; padding: 0.53571rem; cursor: pointer; transition: all 0.3s; }

.services-content .agile .help-item .small-title { padding-bottom: 0.08929rem; position: relative; }

.services-content .agile .help-item .small-title:after { content: ""; width: 0.5rem; height: 0.00893rem; background: #E3E3E3; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

.services-content .agile .help-item:hover { box-shadow: 0 0 0.08929rem rgba(0, 0, 0, 0.1); }

.services-content .agile .help-info { margin-top: 0.44643rem; font-size: 0.125rem; font-weight: 400; color: #333333; line-height: 0.17857rem; }

.services-content .agile .help-info p { margin-top: 0.16071rem; }

.services-content .after-sale { padding-top: 0.71429rem; height: 6.74107rem; }

.services-content .after-sale .sale-card { height: 4.10714rem; background: #FFFFFF; box-shadow: 0 0.07143rem 0.35714rem 0.00893rem rgba(96, 171, 255, 0.12); border-radius: 0.03571rem 0.03571rem 0.03571rem 0.03571rem; overflow: hidden; margin-top: 0.625rem; }

.services-content .after-sale .sale-img { display: block; width: 100%; }

.services-content .after-sale .sale-list { display: flex; justify-content: space-between; margin-top: 0.64286rem; padding: 0 0.53571rem; }

.services-content .after-sale .sale-item { position: relative; flex: 1; padding-right: 0.26786rem; padding-top: 0.08929rem; }

.services-content .after-sale .sale-item:before { content: ""; display: block; width: 0.17857rem; height: 0.00893rem; background: #656565; position: absolute; top: 0; left: 0; }

.services-content .after-sale .sale-title { font-size: 0.125rem; font-weight: bold; color: #3F3F3F; line-height: 0.17857rem; }

.services-content .after-sale .sale-text { margin-top: 0.03571rem; font-size: 0.125rem; font-weight: normal; color: #3F3F3F; line-height: 0.19643rem; }