.product {
    .banner_s_box {
        margin: auto;
        height: 3.59rem;
        background: url('../../images/s_banner.png') no-repeat center;
        background-size: 7.5rem 3.59rem;
        overflow: hidden;
    }

    .dev_plan {
        width: 6.68rem;
        height: 1.56rem;
        margin: auto;
        margin-top: -.4rem;
        background: url('../../images/net.png') no-repeat center;
        background-size: 6.68rem 1.56rem;
        overflow: hidden;

        .ljdev {
            display: block;
            height: .37rem;
            margin-top: .62rem;
            text-align: center;
            font-size: .14rem;
            color: rgba(255, 255, 255, 1);
            line-height: .37rem;
            text-align: center;

            span {
                display: inline-block;
                background: rgba(42, 217, 254, 1);
                border-radius: 4px;
                margin: auto;
                padding: 0 .15rem;
            }
        }
    }

    .dev_list_box {
        margin: auto;
        margin-top: .44rem;

        .dev_game {
            margin: auto;
            width: 6.54rem;

            .news_til_box {
                margin: auto;
                height: .49rem;
                position: relative;

                .news_til {
                    width: 1.6rem;
                    height: .44rem;
                    background: rgba(88, 88, 88, 1);
                    transform: skewX(-20deg);
                    position: relative;
                    margin-left: .1rem;

                    h3 {
                        transform: skewX(20deg);
                        letter-spacing: 1px;
                        font-size: .26rem;
                        color: rgba(255, 255, 255, 1);
                        font-weight: normal;
                        line-height: .44rem;
                        text-align: center;
                        margin-left: -.08rem;
                    }



                    .news_line {
                        width: 6.54rem;
                        height: 5px;
                        background: rgba(42, 217, 254, 1);
                    }
                }

                .news_til_mask {
                    position: absolute;
                    width: 1.23rem;
                    height: .41rem;
                    background: #2AD9FE;
                    top: -.15rem;
                    left: 1.1rem;
                    z-index: -2;
                    transform: skewX(-20deg);
                }
            }

            .dev_game_box {
                overflow: hidden;
                padding-bottom: .5rem;

                .dev_game_left {
                    overflow: hidden;
                    margin-top: .35rem;

                    .img_box {
                        margin-top: .1rem;
                        width: 2.2rem;
                        height: 2.2rem;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .dev_text_box {
                        margin-left: .33rem;

                        h4 {
                            font-size: .26rem;
                            font-weight: bold;
                            color: rgba(105, 105, 105, 1);
                        }

                        .w-box {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }

                        .wordroom {
                            margin-top: .16rem;
                            background: url('../../images/people.png') 0 0rem no-repeat;
                            background-size: auto .2rem;
                            padding-left: .3rem;
                            font-size: .2rem;
                            font-weight: 400;
                            color: rgba(105, 105, 105, 1);
                        }
                        .img-icon {
                            width: .4rem;
                            height:.4rem;
                            margin-left: .2rem;
                            margin-top: .12rem;
                            position: relative;
                            cursor: pointer;
                            font-size: 0;

                            img {
                                width: 100%;
                                height: 100%;
                            }

                            .iosma {
                                position: absolute;
                                width: 120px;
                                height: 120px;
                                top: 25px;
                                left: -48px;
                                z-index: 10;
                                display: none;
                            }

                            .azma {
                                position: absolute;
                                width: 120px;
                                height: 120px;
                                top: 25px;
                                left: -48px;
                                z-index: 10;
                                display: none;
                            }
                        }

                        // .ios:hover .iosma {
                        //     display: block;
                        // }

                        // .az:hover .azma {
                        //     display: block;
                        // }
                        p {
                            width: 3.55rem;
                            height: 1.3rem;
                            margin-top: .3rem;
                            font-size: .22rem;
                            font-weight: 300;
                            line-height: .27rem;
                            position: relative;
                            color: #000;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 5;
                            overflow: hidden;
                            // &::after {
                            //     content: "...";
                            //     position: absolute;
                            //     bottom: 0;
                            //     right: 0;
                            //     padding-left: 40px;
                            //     background: -webkit-linear-gradient(left, transparent, #fff 55%);
                            //     background: -o-linear-gradient(right, transparent, #fff 55%);
                            //     background: -moz-linear-gradient(right, transparent, #fff 55%);
                            //     background: linear-gradient(to right, transparent, #fff 55%);
                            // }
                        }

                    }
                }
            }
        }
    }
}