.page_pro_main {
    --l-w: 333px;
    --pd: 5%;
    margin-top: 5%;

    &::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }

    .page_pro_aside {
        width: var(--l-w);
        float: left;
        position: sticky;
        top: 60px;

        .page_pro_aside_item {
            .page_pro_aside_head {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: var(--commonColor);
                border-radius: 10px 10px 0 0;
                font-size: 24px;
                color: #fff;
                padding: 0 30px;
            }

            .page_pro_aside_list {
                background: #f4f2f0;
                padding: 25px 0;

                >ul {
                    &::after {
                        content: "";
                        display: block;
                        clear: both;
                        visibility: hidden;
                        height: 0;
                    }

                    >li {
                        line-height: 26px;
                        padding: 0 30px;
                        position: relative;
                        margin-top: 20px;

                        a {
                            font-size: 20px;
                            color: #333;
                            transition: all 0.3s ease;

                            &:hover {
                                color: var(--commonColor);
                            }
                        }

                        span {
                            width: 10px;
                            height: 26px;
                            display: block;
                            float: right;
                            cursor: pointer;
                        }

                        ul {
                            padding-left: 20px;
                            display: none;
                        }

                        li {
                            margin-top: 10px;
                        }

                        a {
                            font-size: 16px;
                        }
                    }
                }

                li.active_show {
                    >a {
                        color: var(--commonColor);
                    }
                }

                .sub-menu {
                    display: none;
                }
            }
        }
    }

    .page_pro_body {
        width: calc(100% - var(--l-w) - var(--pd));
        float: right;

        .page_pro_title {
            font-size: 36px;
            color: #333;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .page_pro_desc {
            font-size: 16px;

            p {
                font-family: Arial;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
                line-height: 30px;
                margin-bottom: 20px;
            }
        }

        .page_pro_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item {
                width: calc(50% - 15px);
                margin-bottom: 20px;

                .img {
                    padding-bottom: 100%;
                }

                .title {
                    font-weight: bold;
                    font-size: 20px;
                    color: #333333;
                    line-height: 24px;
                    margin: 20px 0;
                    display: block;

                    &:hover {
                        color: var(--commonColor);
                    }
                }

                .desc {
                    font-weight: 400;
                    font-size: 16px;
                    color: #666666;
                }
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    .page_pro_main {
        .page_pro_aside {
            display: none;
        }

        .page_pro_body {
            width: 100%;
        }
    }
}

@media screen and (max-width: 950px) {
    .page_pro_main {
        .page_pro_body {
            .page_pro_list {
                .item {
                    width: 100%;
                    margin-bottom: 40px;
                }
            }
        }
    }
}