.product {
    .banner_s_box {
        margin: auto;
        height: 336px;
        // background: url('../../images/s_banner.png') no-repeat center;
        background-size: cover;
        background-color: #033E4E;
        overflow: hidden;
    }

    .dev_plan {
        width: 1170px;
        height: 272px;
        margin: auto;
        margin-top: 30px;
        background: url('../../images/net.png') no-repeat center;
        overflow: hidden;

        .ljdev {
            display: block;
            // width: 254px;
            height: 65px;
            border-radius: 4px;
            margin: auto;
            margin-top: 108px;
            text-align: center;
            font-size: 20px;
            // font-weight: normal;
            color: rgba(255, 255, 255, 1);
            line-height: 65px;

            span {
                display: inline-block;
                background: rgba(42, 217, 254, 1);
                border-radius: 4px;
                line-height: 65px;
                padding: 0 30px;
            }
        }
    }

    .dev_list_box {
        margin: auto;
        margin-top: 64px;
        padding-bottom: 100px;

        .dev_game {
            margin: auto;
            width: 1170px;
            padding-bottom: 90px;



            .news_til_box {
                margin: auto;
                height: 59px;
                position: relative;

                .news_til {
                    width: 177px;
                    height: 54px;
                    background: rgba(88, 88, 88, 1);
                    transform: skewX(-20deg);
                    position: relative;
                    margin-left: 11.6px;

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



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

                .news_til_mask {
                    position: absolute;
                    width: 164px;
                    height: 54px;
                    background: #2AD9FE;
                    top: -19px;
                    left: 112px;
                    z-index: -2;
                    transform: skewX(-20deg);
                }
            }

            .dev_game_box {
                // overflow: hidden;

                height: 450px;



                .dev_game_left {
                    margin-top: 37px;
                    position: relative;
                    cursor: pointer;

                    &:hover .dev_game_mask {
                        display: block;
                    }

                    &:hover .dev_text_box .p-hover {
                        display: block;
                        background: #fff;
                        margin-top: 0px;
                        font-size: 12px;
                        line-height: 18px;
                    }

                    &:hover .wama {
                        display: block;
                    }

                    .wama {
                        position: absolute;
                        width: 170px;
                        height: 170px;
                        display: none;

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

                    .dev_game_mask {
                        position: absolute;
                        width: 115%;
                        height: 120%;
                        box-shadow: 0px 0px 15px 0px rgba(220, 220, 220, 1);
                        border-radius: 2px;
                        top: -20px;
                        left: -30px;
                        display: none;
                    }


                    &:nth-child(even) {
                        margin-left: 70px;
                    }

                    .img_box {
                        width: 160px;
                        height: 160px;

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

                        }
                    }

                    .dev_text_box {
                        margin-left: 39px;

                        h4 {
                            font-size: 20px;
                            font-weight: bold;
                            color: rgba(105, 105, 105, 1);
                            line-height: 31px;
                        }

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

                        .wordroom {
                            margin-top: 16px;
                            background: url('../../images/cocos3.png') no-repeat;
                            background-size: 15px 19px;
                            padding-left: 25px;
                            font-size: 20px;
                            font-weight: 400;
                            color: rgba(105, 105, 105, 1);
                            line-height: 20px;
                        }

                        .img-icon {
                            width: 25px;
                            height: 25px;
                            margin-left: 20px;
                            margin-top: 10px;
                            position: relative;
                            cursor: pointer;

                            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: 323px;
                            height: 106px;
                            margin-top: 14px;
                            font-size: 15px;
                            font-weight: 300;
                            line-height: 26px;
                            position: relative;
                            color: #000;
                            overflow: hidden;

                            .p-hover {
                                position: absolute;
                                top: 0;
                                left: 0;
                                display: none;
                            }

                        }

                    }
                }
            }

            .dev_game_box_s {
                height: 560px;
            }
        }


    }
}

@media screen and (max-width: 1400px) {
    .product {
        .banner_s_box {
            margin: auto;
            height: 336px;
            // background: url('../../images/s_banner.png') no-repeat center;
            background-size: cover;
            background-color: #033E4E;
            overflow: hidden;
        }

        .dev_plan {
            width: 878px;
            height: 205px;
            margin: auto;
            margin-top: 30px;
            background: url('../../images/net.png') no-repeat center;
            background-size: cover;
            overflow: hidden;

            .ljdev {
                display: block;
                // width: 254px;
                height: 48px;
                border-radius: 4px;
                margin: auto;
                margin-top: 81px;
                text-align: center;
                font-size: 18px;
                // font-weight: normal;
                color: rgba(255, 255, 255, 1);
                line-height: 48px;

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

        .dev_list_box {
            margin: auto;
            margin-top: 64px;
            padding-bottom: 30px;

            .dev_game {
                margin: auto;
                width: 877px;
                padding-bottom: 90px;

                .news_til_box {
                    height: 48px;
                    position: relative;

                    .news_til {
                        width: 151px;
                        height: 46px;
                        background: rgba(88, 88, 88, 1);
                        transform: skewX(-20deg);
                        position: relative;
                        margin-left: 11.6px;

                        h3 {
                            transform: skewX(20deg);
                            letter-spacing: 1px;
                            font-size: 17px;
                            color: rgba(255, 255, 255, 1);
                            font-weight: normal;
                            line-height: 46px;
                            text-align: center;
                            margin-left: -5px;
                        }



                        .news_line {
                            width: 876px;
                            height: 4px;
                            background: rgba(42, 217, 254, 1);
                        }
                    }

                    .news_til_mask {
                        position: absolute;
                        width: 150px;
                        height: 46px;
                        background: #2AD9FE;
                        top: -19px;
                        left: 95px;
                        z-index: -2;
                        transform: skewX(-20deg);
                    }

                    .news_til_more {
                        position: absolute;
                        top: 9px;
                        right: 10px;
                        width: 86px;
                        height: 28px;
                        background: rgba(255, 255, 255, 1);
                        border: 1px solid rgba(221, 221, 221, 1);
                        transform: skewX(10deg);
                        cursor: pointer;

                        div {
                            transform: skewX(-10deg);
                            font-size: 11px;
                            font-weight: 400;
                            color: rgba(170, 170, 170, 1);
                            line-height: 28px;
                            text-align: center;
                        }
                    }

                }

                .dev_game_box {
                    // overflow: hidden;
                    height: 320px;

                    .dev_game_left {
                        margin-top: 37px;

                        &:hover .dev_text_box .p-hover {
                            display: block;
                            background: #fff;
                            margin-top: 0px;
                            font-size: 10px;
                            line-height: 14px;
                            width: 100%;
                        }

                        &:nth-child(even) {
                            margin-left: 52px;
                        }

                        .wama {
                            position: absolute;
                            width: 120px;
                            height: 120px;
                            display: none;

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

                        .img_box {
                            width: 120px;
                            height: 120px;

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

                        .dev_text_box {
                            margin-left: 29px;

                            h4 {
                                font-size: 17px;
                                font-weight: bold;
                                color: rgba(105, 105, 105, 1);
                                line-height: 23px;
                            }

                            .wordroom {
                                margin-top: 12px;
                                background: url('../../images/cocos3.png') no-repeat;
                                background-size: 12px 15px;
                                padding-left: 20px;
                                font-size: 16px;
                                font-weight: 400;
                                color: rgba(105, 105, 105, 1);
                                line-height: 15px;
                            }

                            .img-icon {
                                width: 25px;
                                height: 25px;
                                margin-left: 20px;
                                margin-top: 10px;
                                position: relative;
                                cursor: pointer;

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

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

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

                            p {
                                width: 242px;
                                height: 110px;
                                margin-top: 8px;
                                font-size: 12px;
                                font-weight: 300;
                                line-height: 16px;
                                position: relative;
                                color: #000;

                                // &::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%);
                                // }
                            }

                        }
                    }
                }

                .dev_game_box_s {
                    height: 500px;
                }
            }
        }
    }
}