@keyframes myRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes myScale {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.2);
    }
}

.cancer-wrap {
    background: #11575F;
    padding-top: 1.38rem;
}

    .cancer-wrap .line {
        width: 14.3rem;
        margin: 0 auto;
    }

    .cancer-wrap .text {
        width: 14.3rem;
        margin: 0 auto;
        padding: 0.35rem 0;
        font-size: 0.24rem;
        color: #FFFFFF;
    }

        .cancer-wrap .text p {
            text-indent: 0.5rem;
            line-height: 0.44rem;
        }

.nav-wrap {
    display: flex;
    position: relative;
    margin-top: 0.64rem;
}

    .nav-wrap .ren {
        position: relative;
        width: 7.07rem;
        padding-top: 1.68rem;
    }

    .nav-wrap .bg {
        position: absolute;
        left: 50%;
        top: 0.8rem;
        width: 8.98rem;
        margin-left: -4.49rem;
        animation: myRotate 10s linear infinite;
    }

    .nav-wrap .left,
    .nav-wrap .right {
        flex: 1;
        position: relative;
    }

    .nav-wrap .left {
        text-align: right;
    }

    .nav-wrap .right {
        text-align: left;
    }

.info-wrap .item {
    position: absolute;
    display: flex;
}

/* 37 */
.left .item:nth-child(1) {
    right: 0.8rem;
    top: 2.04rem;
}

.left .item:nth-child(2) {
    right: 1.5rem;
    top: 3.5rem;
}

    .left .item:nth-child(2) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/甲状腺.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.left .item:nth-child(3) {
    right: 1.73rem;
    top: 5.13rem;
}

    .left .item:nth-child(3) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/肺.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.left .item:nth-child(4) {
    right: 1.46rem;
    bottom: 3.65rem;
}

    .left .item:nth-child(4) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/胃.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.left .item:nth-child(5) {
    right: 0.72rem;
    bottom: 2.19em;
}

    .left .item:nth-child(5) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/前列腺癌.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.right .item:nth-child(1) {
    top: 2.76rem;
    left: 1.41rem;
}

.right .item:nth-child(2) {
    top: 4.26rem;
    left: 1.73rem;
}

    .right .item:nth-child(2) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/乳腺.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.right .item:nth-child(3) {
    bottom: 4.51rem;
    left: 1.77rem;
}

    .right .item:nth-child(3) .icon .img {
        position: absolute;
        width: 0.49rem;
        height: 0.49rem;
        background: url('../../img/dtg/淋巴系统.png') no-repeat center;
        background-size: 100% 100%;
        z-index: 10;
    }

.right .item:nth-child(4) {
    bottom: 2.92rem;
    left: 1.33rem;
}

.info-wrap .item .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left .item .info {
    padding-right: 0.66rem;
}

.right .item .info {
    padding-left: 0.66rem;
}

.info-wrap .item .icon {
    position: relative;
    width: 0.49rem;
    height: 0.49rem;
}

    .info-wrap .item .icon::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        width: 1.16rem;
        height: 1.16rem;
        margin-left: -0.58rem;
        margin-top: -0.58rem;
        background: url('../../img/dtg/yuanzhuandong.png') no-repeat center;
        background-size: 100% 100%;
        animation: myRotate 2s linear infinite;
        z-index: 0;
    }

.info-wrap .item .info .title {
    font-size: 0.3rem;
    color: #fff;
}

.info-wrap .item .info .subtitle {
    font-size: 0.2rem;
    color: #fff;
    margin-top: 0.01rem;
}

.line-2 {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 99;
    width: 4.71rem;
    height: 0.82rem;
    background: url('../../img/dtg/甲状腺癌的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-2::after {
        display: none;
        position: absolute;
        content: '';
        right: -0.94rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.left .item:nth-child(2) .icon .img:hover + .line-2::after {
    display: block;
}

.line-3 {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 99;
    width: 4.6rem;
    height: 1.01rem;
    background: url('../../img/dtg/肺癌的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-3::after {
        display: none;
        position: absolute;
        content: '';
        right: -0.94rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.left .item:nth-child(3) .icon .img:hover + .line-3::after {
    display: block;
}

.line-4 {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 99;
    width: 5.06rem;
    height: 1.01rem;
    background: url('../../img/dtg/胃肠道肿瘤的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-4::after {
        display: none;
        position: absolute;
        content: '';
        right: -0.94rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.left .item:nth-child(4) .icon .img:hover + .line-4::after {
    display: block;
}


.line-5 {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 99;
    width: 3.91rem;
    height: 1.94rem;
    background: url('../../img/dtg/前列腺癌的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-5::after {
        display: none;
        position: absolute;
        content: '';
        right: -0.94rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.left .item:nth-child(5) .icon .img:hover + .line-5::after {
    display: block;
}


.line-7 {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    z-index: 99;
    width: 4.6rem;
    height: 1.15rem;
    background: url('../../img/dtg/乳腺癌的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-7::after {
        display: none;
        position: absolute;
        content: '';
        left: -0.92rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.right .item:nth-child(2) .icon .img:hover + .line-7::after {
    display: block;
}


.line-8 {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    z-index: 99;
    width: 3.64rem;
    height: 0.3rem;
    background: url('../../img/dtg/领班癌的线和圆点.png') no-repeat center;
    background-size: 100% 100%;
}

    .line-8::after {
        display: none;
        position: absolute;
        content: '';
        left: -0.92rem;
        bottom: -0.94rem;
        width: 2.15rem;
        height: 2.15rem;
        background: url('../../img/dtg/鼠标触碰效果.png') no-repeat center;
        background-size: 100% 100%;
        animation: myScale 2s linear infinite;
    }

.right .item:nth-child(3) .icon .img:hover + .line-8::after {
    display: block;
}