#box_1 .ani-title {
    margin-bottom: 40px;
}

#box_1 .ani-sub-title {
    margin-bottom: 60px;
}

.scene {
    width: var(--base-width);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.scene-item {
    width: 250px;
    height: 56px;
    border: 1px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 54px;
    color: var(--primary-color);
    background-color: #fff;
    font-weight: 400;
    font-size: 20px;

}

.scene-item.active {
    color: #fff;
    background-color: var(--primary-color);
}

.scene-item:last-child {
    margin-right: 0;
}

.scene-item .img {
    width: 40px;
    height: 40px;
    margin-right: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.scene-item:nth-child(1) .img {
    background-image: url('../img/index3/scene1.png');
}

.scene-item:nth-child(1).active .img {
    background-image: url('../img/index3/scene1-active.png');
}

.scene-item:nth-child(2) .img {
    background-image: url('../img/index3/scene2.png');
}

.scene-item:nth-child(2).active .img {
    background-image: url('../img/index3/scene2-active.png');
}

.scene-item:nth-child(3) .img {
    background-image: url('../img/index3/scene3.png');
}

.scene-item:nth-child(3).active .img {
    background-image: url('../img/index3/scene3-active.png');
}

.scene-content {
    margin: 66px auto 134px;
    width: var(--base-width);
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.scene-content .cont {
    display: none;
    align-items: center;
    justify-content: center;
}

.scene-content .social {
    align-items: center;
}

.scene-content .social .left {
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    margin-right: 32px;
}

.scene-content .social .left .type {
    padding-top: 80px;
    padding-bottom: 48px;
    padding-left: 7px;
}

.scene-content .social .left .type>div {
    display: flex;
    margin-bottom: 88px;
}

.scene-content .social .left span {
    display: inline-flex;
    align-items: center;
}

.scene-content .social .left span:nth-child(2n) {
    margin-left: 44px;
}

.scene-content .social .left i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color);
    margin-right: 14px;
}

.scene-content .flux .left {
    padding-top: 70px;
    margin-right: 20px;
}

.scene-content .flux .flux-title {
    font-size: 28px;
    color: #000000;
    margin-bottom: 24px;
    text-align: left;
    font-weight: 500;
}

.scene-content .flux .flux-text {
    font-weight: 400;
    font-size: 22px;
    color: #565656;
    width: 480px;
    text-align: left;
    line-height: 42px;
}

.scene-content .flux .ani-btn {
    margin-top: 120px;
}

.scene-content .famous .left {
    padding-top: 70px;
}

.scene-content .famous .famous-title {
    font-size: 28px;
    color: #000000;
    margin-bottom: 24px;
    text-align: left;
    font-weight: 500;
}

.scene-content .famous .famous-text {
    font-weight: 400;
    font-size: 22px;
    color: #565656;
    width: 520px;
    text-align: left;
    line-height: 42px;
}

.scene-content .famous .ani-btn {
    margin-top: 120px;
}

/* 2 */
#box_2 .ani-title {
    margin-top: 4px;
    margin-bottom: 64px;

}

#box_2 .ani-details img {
    max-width: 900px;
    margin-bottom: 64px;
}

/* 3 */
#box_3 .ani-title {
    margin-top: 4px;
    margin-bottom: 84px;
}

.resource {
    width: var(--base-width);
    margin: 0 auto;
    display: flex;
}

.resource>div {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resource img {
    width: 75px;
    height: 75px;
}

.resource span {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    margin-top: 12px;
    max-width: 160px;
}

/* 4 */
#box_4 .ani-title {
    margin-top: 20px;
    margin-bottom: 94px;
}

#box_4 .ani-btn {
    margin-top: 100px;
    margin-bottom: 40px;

}

.service {
    width: var(--base-width);
    margin: 0 auto;
    display: flex;
}

.service div {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.service div:not(:last-child):before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 64px;
    height: 2px;
    background-color: var(--primary-color);
    left: 190px;
    top: 52px;

}

.service div:not(:last-child):after {
    content: '>';
    position: absolute;
    display: inline-block;
    left: 248px;
    top: 44px;
    color: var(--primary-color);
    font-size: 16px;
}

.service img {
    width: 94px;
    height: 88px;
}

.service span {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    margin-top: 18px;
}