/* 客户价值 */
.customer-box {
    width: 100%;
    height: 977px;
}

.customer-content {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

/* 自适应 */
@media screen and (min-width: 1440px) {
    .customer-content {
        max-width: 1440px;
    }
}

@media screen and (max-width: 1440px) {
    .customer-content {
        max-width: 1030px;
    }
}

/* 公共 */
.common-box {
    padding: 0 3.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.common-box .title {
    font-size: 3.5rem;
    color: #0071f5;
}

.common-box .description {
    font-size: 2rem;
    color: #0071f5;
}

/* 上部 */
.customer-content .content-top {
    height: 407px;
}

.cooperate-box {
    width: 66%;
    background-color: #eee;
    border-radius: 30px;
    background: #dbecff;
    position: relative;
}

.cooperate-image {
    width: 66%;
    height: 407px;
    overflow: hidden;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
}

.cooperate-image:hover img {
    transform: scale(1.2);
}

.cooperate-image>img {
    transition: all 1s;
}

.cooperate-right-box {
    width: 34%;
    float: right;
    height: 100%;
    padding-top: 80px;
    row-gap: 59px;
}

.start-box {
    width: 34%;
    padding: 69px 45px 77px 50px;
    box-sizing: border-box;
    background-color: #0071f5;
}

.start-box .gif-box {
    width: 100%;
    text-align: end;
}
.start-box .gif-box  img {
    width: 147px;
    height: 80px;
}
.start-title-padding{
   padding-top: 20px;
}
.start-title {
    font-size: 3.5rem;
    color: #fff;
}
.start-des-padding{
  padding-top: 53px;
}
.start-des {
    font-size: 2rem;
    color: #fff;
}

/* 下部 */
.content-bottom {
    margin-top: 16px;
    height: 556px;
}

.content-bottom ul {
    width: 100%;
}

.content-bottom li {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

/* 第一个 */
.bottom-one {
    width: 16%;
}

.one-top {
    width: 100%;
    height: 243px;
    border-radius: 30px;
    background: #0071f5;
}

.one-bot {
    width: 100%;
    height: 294px;
    border-radius: 30px;
    background: #d0f3ff;
}

.one-bot>img {
    width: 151px;
    height: 151px;
}

.one-top>img {
    width: 151px;
    height: 151px;
}

/* 第二个 */
.bottom-two {
    width: 30%;
}

.two-image {
    width: 100%;
    height: 260px;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
}

.two-image:hover img {
    transform: scale(1.2);
}

.two-image>img {
    transition: all 1s;
}

.two-bot-box {
    width: 100%;
    height: 294px;
    background: #dbecff;
    padding-top: 50px;
    row-gap: 16px;
}

/* 第三个 */
.bottom-three {
    width: 25%;
}

.three-top {
    width: 100%;
    height: 156px;
    border-radius: 24px;
    background: #4fccf5;
}

.three-top > img {
    width: 222px;
    height: 126px;
}

.three-bot {
    width: 100%;
    height: 382px;
    background: #d0f3ff;
    padding-top: 96px;
    row-gap: 16px;
}

/* 第四个 */
.bottom-four {
    width: 25%;
}

.four-top {
    width: 100%;
    height: 276px;
    background: #dbecff;
    padding-top: 42px;
    row-gap: 16px;
}

.four-img {
    width: 100%;
    height: 278px;
    overflow: hidden;
}

.four-img:hover img {
    transform: scale(1.2);
}

.four-img>img {
    transition: all 1s;
}

.content-mask{
  display: flex;
  overflow: hidden;
}

.content-mask-span{
  transform: translateY(105%);
  will-change: transform;
  transition: transform 1s cubic-bezier(0.52, 0.01, 0, 1) 0s;
}

.content-mask-span.show{
  transform: translateY(0);
}

.content-mask-delay{
   transition-delay: 0.5s;
}