.games .img-box img{
    width: 100%;
}

.games .left li {
    text-align: right;
    cursor: pointer;
}

.games .right li {
    text-align: left;
    cursor: pointer;
}

.games li.active {
    color: #FFA601;
    transform: scale(1.1);
    transition: all .3s;
}



@media screen and (min-width: 768px) {
    .smart .card {
        box-sizing: border-box;
        width: 480px;
        height: 430px;
        padding: 35px 50px;
        margin-right: 30px;
        background: rgba(248, 248, 250, 1);
        border-radius: 20px;
    }

    .smart .card:last-of-type {
        margin-right: 0;
    }

    .smart .card img {
        width: 100px;
        height: 100px;
        margin-bottom: 60px;
    }

    .smart .card .title {
        font-size: 30px;
        color: rgba(0, 0, 0, .9);
        margin-bottom: 20px;
    }

    .smart .card .list li {
        font-size: 24px;
        color: rgba(71, 88, 124, 1);
        letter-spacing: 2px;
        margin-bottom: 15px;
    }

        .features .my-tab-title {
        position: absolute;
        top: 60px;
        right: -50px;
    }

    .features .my-tab-title li {
        font-size: 24px;
        color: rgba(0, 0, 0, .6);
        line-height: 30px;
        margin: 10px 0;
        padding-right: 10px;
        text-align: right;
        cursor: pointer;
        transition: all .4s ease;
    }

    .features .my-tab .my-this {
        color: rgba(0, 0, 0, .85);
        border-right: solid 3px #FFA601;
        padding-right: 20px;
    }

    .features .my-tab-item {
        display: none;
        width: 1100px;
        margin: 0 auto;
    }

    .features .my-tab .my-show {
        display: block;
    }

    .features .list {
        width: 100%;
        height: 450px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .features .list .item {
        box-sizing: border-box;
        width: 20%;
        font-size: 30px;
        color: rgba(0, 0, 0, .9);
        text-align: center;
    }

    .features .list .item img {
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
    }

    .features .list .item2 {
        width: 25%;
    }

    .features .list .item2 .title {
        font-size: 34px;
        margin-bottom: 30px;
        height: 46px;
        padding-left: 30px;
    }

    .features .list .item2 li {
        padding: 10px 0;
        font-size: 26px;
        color: rgba(0, 0, 0, .7);
        display: flex;
        align-items: center;
    }

    .features .list .item2 li img {
        width: 36px;
        height: 36px;
        margin-right: 15px;
    }

    .games .game-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
    }

    .center-img{
        width: 800px;
        height: 630px;
        object-fit: contain;
        object-position: center;
    }

    .games li {
        font-size: 30px;
        color: rgba(0, 0, 0, .4);
        padding: 10px 0;
        margin-bottom: 20px;
    }



    .manage .main-circle {
        position: absolute;
        width: 291px;
        height: 285px;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFF;
    }

    .manage .circle {
        position: absolute;
        width: 187px;
        height: 177px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 20px 0 rgba(202, 202, 202, 0.75);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        font-weight: 800;
        color: rgba(90, 123, 219, 1);
    }

    .manage .circle span {
        width: 100px;
        text-align: center;
    }

    .advantages .list1 {
        width: 1600px;
        height: 400px;
        display: flex;
        justify-content: space-between;
    }

    .advantages .item1 {
        width: 18%;
        text-align: center;
    }

    .advantages .item1 img {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
    }

    .advantages .item1 .info {
        font-size: 24px;
        color: rgba(0, 0, 0, .6);
    }

    .advantages .list2 {
        width: 1600px;
        height: 450px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-between;
        letter-spacing: 2px;
    }

    .advantages .item2 {
        width: 30%;
    }

    .advantages .item2 .item2-head {
        display: flex;
        align-items: center;
    }

    .advantages .item2 .title {
        font-size: 28px;
        color: rgba(0, 0, 0, .9);
    }

    .advantages .item2 img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }

    .advantages .item2 .info {
        font-size: 20px;
        color: rgba(0, 0, 0, .5);
        padding: 0 20px;
    }

}

@media screen and (max-width: 767px) {
    .smart .card {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .smart .card .title {
        font-size: 16px;
    }

    .smart .card img {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .features .list {
        display: flex;
        flex-wrap: wrap;
    }

    .features .list .item {
        width: 25%;
        text-align: center;
        margin-bottom: 10px;
    }

    .features .list .item img {
        width: 30px;
        height: 30px;
    }

    .features .title-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .features .title-box .title {
        font-size: 16px;
        color: #666;
        border-bottom: solid 2px transparent;
        transition: all .3s;
    }

    .features .title-box .active {
        color: #333;
        border-color: #ffa601;
    }

    .features .item-title {
        font-size: 16px;

    }

    .features .list2 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .features .list2 .item2 {
        width: 33.3%;

    }

    .features .list2 .item2 img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .games .game-list-m {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .center-img{
        width: 180px;
        height: 250px;
        object-fit: contain;
        object-position: center;
    }


    .manage .main-circle {
        position: absolute;
        width: 145px;
        height: 142px;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFF;
    }

    .manage .circle {
        position: absolute;
        width: 76px;
        height: 76px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 20px -5px rgba(202, 202, 202, 0.3);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 800;
        color: rgba(90, 123, 219, 1);
    }

    .manage .circle span {
        width: 100px;
        text-align: center;
    }

    .advantages .list {
        display: flex;
        flex-wrap: wrap;
    }

    .advantages .list .item {
        width: 50%;
        text-align: center;
        margin-bottom: 20px;
    }

    .advantages .list .item img {
        width: 50px;
        height: 50px;
    }

    .role .list {
    }

    .role .list .item {
        /*width: 50%;*/
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .role .list .item img {
        width: 80px;
        height: 80px;
    }

    .role .list .item .info .title {
        font-size: 16px;
    }

}