.digitization-page {
    padding-bottom: max(50px, calc(var(--ratio-size) * 150));
}

.common-title-effect .cn-title {
    position: relative;
}

.top-area {
    position: relative;
    padding-top: max(50px, calc(var(--ratio-size) * 100));
    /* background-color: #F7F7F7; */
}

.top-area .switch-pic {
    position: relative;
    width: calc(var(--ratio-size) * 534);
    height: calc(var(--ratio-size) * 318);
    margin: 0 auto;
    margin-top: max(25px, calc(var(--ratio-size) * 50));
}

.top-area .switch-pic .switch-computer-pic {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(5px 10px 20px #acabab);
}

.top-area .switch-pic .bg-computer {
    position: relative;
    z-index: 1;
    opacity: 0;
}

.top-area .content-btn {
    padding-bottom: calc(var(--ratio-size) * 250);
    margin-top: calc(var(--ratio-size) * -300);
}

.top-area .circle-bg {
    width: calc(var(--ratio-size) * 1050);
    height: calc(var(--ratio-size) * 480);
    margin: 0 auto;
}

.top-area .content-btn .btn-list {
    position: relative;
    z-index: 3;
    display: flex;
    width: calc(var(--ratio-size) * 1050);
    margin: 0 auto;
}

.top-area .content-btn .btn-item {
    position: absolute;
    cursor: pointer;
}

.top-area .content-btn .btn-item:nth-child(1) {
    top: calc(var(--ratio-size) * -161);
}

.top-area .content-btn .btn-item:nth-child(2) {
    top: calc(var(--ratio-size) * -78);
    left: calc(var(--ratio-size) * 200);
    /* top: calc(var(--ratio-size) * -63);
    left: calc(var(--ratio-size) * 315); */
}

.top-area .content-btn .btn-item:nth-child(3) {
    top: calc(var(--ratio-size) * -56);
    right: calc(var(--ratio-size) * 477);
    /* top: calc(var(--ratio-size) * -63);
    right: calc(var(--ratio-size) * 315); */
}

/* .top-area .content-btn .btn-item:nth-child(4) {
    top: calc(var(--ratio-size) * -161);
    right: calc(var(--ratio-size) * 32);
} */
.top-area .content-btn .btn-item:nth-child(4) {
    top: calc(var(--ratio-size) * -78);
    right: calc(var(--ratio-size) * 220);
}
.top-area .content-btn .btn-item:nth-child(5) {
    top: calc(var(--ratio-size) * -161);
    right: calc(var(--ratio-size) * 32);
}

.top-area .content-btn .btn-item .pic {
    width: calc(var(--ratio-size) * 120);
}

.top-area .content-btn .btn-item .pic svg {
    display: block;
    width: 100%;
}

.top-area .content-btn .btn-item p {
    position: absolute;
    bottom: calc(var(--ratio-size) * -19);
    left: 50%;
    transform: translate(-50%, 100%);
    text-align: center;
    white-space: nowrap;
    font-size: calc(var(--ratio-size) * 28);
}

.top-area .content-btn .btn-item svg * {
    transition: fill .5s, stroke .5s;
}

.top-area .content-btn .btn-item.active svg * {
    fill: #58CFF7;
    fill-opacity: .1;
    stroke: #0FA6E6;
}

.top-area .content-btn .btn-item.active svg .fill-dark-color {
    fill: #0FA6E6;
    fill-opacity: 1;
}

.top-area .content-btn .btn-item.active svg .fill-opacity-color {
    fill: #E7F3F7;
    fill-opacity: 1;
}

.content-flow {
    padding-top: calc(var(--ratio-size) * 130);
}

.content-flow .list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: calc(var(--ratio-size) * 1530);
    margin: 0 auto;
}

.content-flow .list .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: calc(var(--ratio-size) * 206);
    padding: calc(var(--ratio-size) * 30) calc(var(--ratio-size) * 10);
    background-color: #F7F7F7;
    border-radius: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 24);
    color: #333;
    box-shadow: 0 20px 20px rgba(0, 0, 0, .1);
}

.content-flow .list .item .icon {
    width: calc(var(--ratio-size) * 100);
    margin-top: calc(var(--ratio-size) * 20);
}

.content-flow .list .arrow {
    display: flex;
}

.content-flow .list .arrow img {
    width: calc(var(--ratio-size) * 13);
}

.content-flow .color-platform {
    width: calc(var(--ratio-size) * 1750);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * -45);
}
.top-area .bottom-title,
.content-flow .bottom-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 1084);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * -25);
    color: #fff;
}
.top-area .bottom-title p,
.content-flow .bottom-title p {
    position: absolute;
    width: 100%;
    font-size: calc(var(--ratio-size) * 44);
    font-weight: bold;
    text-align: center;
}

.content-flow .floor:nth-child(2) .list .item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 150);
    height: calc(var(--ratio-size) * 100);
}
.content-flow .floor .list .item .icon img {
transition: transform .3s linear;
}
.content-flow .floor:nth-child(2) .list .item .icon img {
    max-width: 100%;
    max-height: calc(var(--ratio-size) * 100);
    width: auto;
}

.content-flow .floor .list .item .icon:hover img {
    transform: scale(1.2);
}

.content-flow .floor:nth-child(3) .list .item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 100);
}

.content-flow .floor:nth-child(3) .list .item .icon img {
    max-width: 100%;
    max-height: calc(var(--ratio-size) * 100);
    width: auto;
}

.content-flow .floor:not(:first-child) {
    margin-top: calc(var(--ratio-size) * 130);
}