.index-wrap-four {
    width: 1190px;
    height: 1153px;
    margin: 20px auto 0 auto;
}

    .index-wrap-four .hot-game-goods {
        width: 1190px;
        height: 371px;
        position: relative;
        background: url(../images/PC/Index/index-01.png) no-repeat;
        background-size: 100%;
        border-radius: 16px;
        margin-bottom: 20px;
    }

        .index-wrap-four .hot-game-goods.noheight {
            height: 0px;
            overflow: hidden;
        }

        .index-wrap-four .hot-game-goods.bg-00 {
            background: url(../images/PC/Index/index-03.png) no-repeat;
            background-size: 100%;
        }

        .index-wrap-four .hot-game-goods.bg-01 {
            background: url(../images/PC/Index/index-01.png) no-repeat;
            background-size: 100%;
        }

        .index-wrap-four .hot-game-goods.bg-02 {
            background: url(../images/PC/Index/index-02.png) no-repeat;
            background-size: 100%;
        }

        .index-wrap-four .hot-game-goods.bg-03 {
            background: url(../images/PC/Index/index-03.png) no-repeat;
            background-size: 100%;
        }
        /* 应用动画到元素 */
        .index-wrap-four .hot-game-goods.fade-in {
            overflow: hidden;
            animation-name: fadeGoods;
            animation-duration: 1s; /* 动画持续时间 */
        }

        .index-wrap-four .hot-game-goods .trans-box {
            border-radius: 0 0 16px 16px;
            height: 50px;
            background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
        }

        .index-wrap-four .hot-game-goods:last-child {
            margin-bottom: 0px;
        }

        .index-wrap-four .hot-game-goods .left-game {
            float: left;
            width: 185px;
            height: 100%;
            position: relative;
        }

            .index-wrap-four .hot-game-goods .left-game .title {
                padding: 22px 12px 0 12px;
                text-align: center;
            }

                .index-wrap-four .hot-game-goods .left-game .title h3 {
                    line-height: 32px;
                    font-weight: 600;
                    font-size: 24px;
                    color: #222222;
                }

                .index-wrap-four .hot-game-goods .left-game .title p {
                    line-height: 32px;
                    font-weight: 600;
                    font-size: 24px;
                    color: #222222;
                }

            .index-wrap-four .hot-game-goods .left-game .gm-pic {
                position: absolute;
                width: 185px;
                bottom: 0px;
                left: 0;
            }

                .index-wrap-four .hot-game-goods .left-game .gm-pic img {
                    display: block;
                }

        .index-wrap-four .hot-game-goods .right-goods {
            padding-top: 2px;
            position: relative;
            z-index: 11;
        }

        .index-wrap-four .hot-game-goods .hotword-more {
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .index-wrap-four .hot-game-goods .hotword-more .hotword {
                height: 26px;
                overflow: hidden;
                display: flex;
                flex-wrap: wrap;
                max-width: 850px;
            }

                .index-wrap-four .hot-game-goods .hotword-more .hotword a {
                    font-weight: 400;
                    font-size: 12px;
                    border-radius: 26px;
                    margin-right: 12px;
                    background: #ffffff;
                    line-height: 16px;
                    padding: 4px 8px;
                    border: 1px solid #DEE4F3;
                    color: #666666;
                }

        .index-wrap-four .hot-game-goods.bg-02 .hotword-more .hotword a {
            border: 1px solid #F3DEDE;
        }

        .index-wrap-four .hot-game-goods.bg-03 .hotword-more .hotword a {
            border: 1px solid #DDEED7;
        }

        .index-wrap-four .hot-game-goods.bg-00 .hotword-more .hotword a {
            border: 1px solid #DDEED7;
        }

        .index-wrap-four .hot-game-goods .hotword-more .hotword a:hover {
            background: #222222;
            color: #ffffff;
            border: 1px solid #222222;
            font-weight: 500;
        }

        .index-wrap-four .hot-game-goods .hotword-more .more {
            display: flex;
            align-items: center;
            margin-right: 25px;
        }

            .index-wrap-four .hot-game-goods .hotword-more .more a {
                color: #999999;
                font-size: 13px;
            }

                .index-wrap-four .hot-game-goods .hotword-more .more a img {
                    margin-left: 5px;
                }

        .index-wrap-four .hot-game-goods .index-goods-box {
            display: flex;
            align-items: center;
        }

            .index-wrap-four .hot-game-goods .index-goods-box .goods-item {
                width: 240px;
                height: 300px;
                transition: transform 0.4s,box-shadow 0.4s;
                margin-right: 10px;
                padding: 8px;
                box-sizing: border-box;
                background: #FFFFFF;
                border-radius: 10px 10px 10px 10px;
            }

                .index-wrap-four .hot-game-goods .index-goods-box .goods-item:hover {
                    transform: translateY(-7px);
                    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
                }

                .index-wrap-four .hot-game-goods .index-goods-box .goods-item .goods-pic {
                    width: 100%;
                }

                    .index-wrap-four .hot-game-goods .index-goods-box .goods-item .goods-pic img {
                    }

    .index-wrap-four .goods-item .goods-pic a {
        display: block;
        width: 100%;
        height: 124px;
        overflow: hidden;
        position: relative;
    }

        .index-wrap-four .goods-item .goods-pic a img {
            width: 100%;
            height: 124px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            object-fit: cover;
            border-radius: 5px 5px 0 0;
        }

    .index-wrap-four .goods-item .goods-service {
        display: flex;
        align-items: center;
        margin-top: 6px;
        height: 16px;
    }

        .index-wrap-four .goods-item .goods-service span {
            margin-right: 4px;
        }

            .index-wrap-four .goods-item .goods-service span img {
                display: block;
                height: 16px;
            }

        .index-wrap-four .goods-item .goods-service .xjb-box {
            display: flex;
            align-items: center;
            border-radius: 3px;
            border: 1px solid #ff5c00;
        }

            .index-wrap-four .goods-item .goods-service .xjb-box img {
                background: #FFEEE4;
                padding: 2px 4px;
                border-radius: 3px 3px 0 0;
            }

            .index-wrap-four .goods-item .goods-service .xjb-box em {
                color: #ff5c00;
                font-size: 12px;
                padding: 0 2px;
                line-height: 14px;
            }

    .index-wrap-four .goods-item .goods-title {
        margin-top: 6px;
    }

        .index-wrap-four .goods-item .goods-title h3 {
            max-height: 32px;
            line-height: 16px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            font-weight: 700;
            font-size: 12px;
            color: #222222;
        }

            .index-wrap-four .goods-item .goods-title h3 a {
                color: #222222;
            }

    .index-wrap-four .goods-item .goods-group {
        margin-top: 6px;
    }

        .index-wrap-four .goods-item .goods-group p {
            height: 16px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
        }

    .index-wrap-four .goods-item .attr-box {
        width: 224px;
        height: 38px;
        display: flex;
        align-items: center;
        margin-top: 8px;
        background: url(../images/PC/Index/attr-item-bg.png) no-repeat;
        background-size: 224px;
        border-radius: 5px;
    }

        .index-wrap-four .goods-item .attr-box .attr-item {
            width: 74px;
            text-align: center;
        }

            .index-wrap-four .goods-item .attr-box .attr-item h3 {
                font-size: 10px;
                color: #222222;
                font-weight: 700;
                line-height: 13px;
                height: 13px;
                overflow: hidden;
            }

            .index-wrap-four .goods-item .attr-box .attr-item p {
                font-size: 10px;
                color: #666666;
                font-weight: 400;
                line-height: 13px;
                height: 13px;
                overflow: hidden;
                margin-top: 4px;
            }

    .index-wrap-four .goods-item .line-price {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .index-wrap-four .goods-item .line-price .online {
            font-weight: 400;
            font-size: 12px;
            color: #01C25A;
            line-height: 16px;
        }

        .index-wrap-four .goods-item .line-price .unline {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 16px;
        }

        .index-wrap-four .goods-item .line-price .price-box {
            font-weight: 600;
            font-size: 18px;
            color: #FF5C00;
            line-height: 22px;
        }

.main .carousel-top img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
.recomd-box {
    width: 1190px;
    margin: 20px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .recomd-box .recomd-item {
        transition: transform 0.4s;
        width: 287px;
        height: 256px;
        padding: 14px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 10px;
    }

        .recomd-box .recomd-item dl dt {
            height: 130px;
            overflow: hidden;
            border-radius: 10px;
            display: flex;
            align-items: center;
        }

            .recomd-box .recomd-item dl dt img {
                width: 259px;
                display: block;
            }

        .recomd-box .recomd-item dl dd {
            margin-top: 12px;
        }

            .recomd-box .recomd-item dl dd h3 {
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                height: 48px;
                overflow: hidden;
            }

                .recomd-box .recomd-item dl dd h3 a {
                    color: #222222;
                }

                    .recomd-box .recomd-item dl dd h3 a:hover {
                        color: #ff5c00;
                    }

            .recomd-box .recomd-item dl dd p {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
            }

                .recomd-box .recomd-item dl dd p span {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #888888;
                    font-weight: 400;
                }

                    .recomd-box .recomd-item dl dd p span img {
                        width: 13px;
                        margin-right: 4px;
                    }

                .recomd-box .recomd-item dl dd p a {
                    width: 86px;
                    height: 28px;
                    line-height: 26px;
                    border-radius: 30px;
                    box-sizing: border-box;
                    border: 1px solid #DDDDDD;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    color: #888888;
                    font-weight: 400;
                }

                    .recomd-box .recomd-item dl dd p a img {
                        margin-left: 4px;
                        width: 14px;
                    }

        .recomd-box .recomd-item .normal {
            display: block;
        }

        .recomd-box .recomd-item .hover {
            display: none;
        }

        .recomd-box .recomd-item:nth-child(1):hover {
            background: linear-gradient( 135deg, #5B92FF 0%, #01DCC1 100%);
        }

        .recomd-box .recomd-item:nth-child(2):hover {
            background: linear-gradient( 135deg, #FF4EA4 0%, #FFB880 100%);
        }

        .recomd-box .recomd-item:nth-child(3):hover {
            background: linear-gradient( 135deg, #427FFF 0%, #43B3FF 100%);
        }

        .recomd-box .recomd-item:nth-child(4):hover {
            background: linear-gradient( 135deg, #B945FF 0%, #458BFF 100%);
        }

        .recomd-box .recomd-item:hover {
            transform: translateY(-5px)
        }

            .recomd-box .recomd-item:hover dl dd h3 a {
                color: #fff;
            }

            .recomd-box .recomd-item:hover dl dd p span {
                color: #fff;
            }

            .recomd-box .recomd-item:hover dl dd p a {
                color: #fff;
                border-color: #ffffff;
            }

            .recomd-box .recomd-item:hover .normal {
                display: none;
            }

            .recomd-box .recomd-item:hover .hover {
                display: block;
            }
.radius12 {
    border-radius: 12px !important;
}

.main .pd16 {
    border-radius: 12px;
}