.sp_banner_bg {
    width: 100%;
    height: 450px;
    background-size: 1440px 450px;
    background-repeat: no-repeat;
    background-position: center;

    .body_sp_banner {
        width: 100%;

        .sp_banner_item {
            height: 450px;
        }

        .sp_banner_text,
        .sp_banner_text_en {
            line-height: 55px;
            border-radius: 34px;
            color: #252b62;
        }

        .sp_banner_btn,
        .sp_banner_btn_en {
            margin-top: 60px;
            border-radius: 34px;
            width: 210px;
            transition: all 0.3s ease-in-out;
            height: 55px;
            background-color: #41e596;
        }

        .sp_banner_btn:hover,
        .sp_banner_btn_en:hover {
            box-shadow: 0 0 10px#44ce6f;
            background-size: 200% 100%;
            background-position: right;
        }
    }
}

.sp_2_bg {
    background-size: 100%;
    background-repeat: no-repeat;

    .sp_content_2 {
        .sp_2_text {
            .sp_2_title {
                color: #8bc541;
            }
        }
    }
}

.sp_content_3 {
    display: grid;
    grid-template-columns: 50% 50%;

    .sp_content_img_3 {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .sp_3_article {
            width: 980px;
            transform: translate(-60px, -180px);
        }

        .sp_3_img {
            width: 26.25rem;
            height: fit-content;
        }
    }
    .sp_3_text{
        .so_box {
            .so_box_title {
                width: 100%;
                height: 80px;
                border-radius: 10px;
                font-size: 24px;
                line-height: 30px;
                padding-inline: 25px;
                color: #ffffff;
                background: linear-gradient(90deg, #25BFB6 1%, #41E596 80%);
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;
                transition: margin-bottom 0.15s ease;
            }

            .so_box_title:hover {  
                color: #25BFB6;
                border: 1px solid #25BFB6;
                background: #fff;
            }

            .so_box_desc {
                z-index: -1;
                position: absolute;
                color: #25BFB6;
                border: 1px solid #25BFB6;
                background: #fff;
                width: 100%;
                padding-inline: 25px;
                border-radius: 10px;
                font-size: 24px;
                height: 80px;
                overflow: hidden;
            }

            .expanded {
                height: auto;
            }
        }
    }
}


@media (max-width: 1200px) {
    .sp_2_bg {
        .sp_content_2 {
            .sp_2_text {
                padding-right: 3%;

                br {
                    display: none;
                }
            }
        }
    }
    .sp_content_3 {
        .sp_3_text {
            .sp_3_desc_en {
                br {
                    display: none;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .sp_banner_bg {
        height: 300px;
        .body_sp_banner {
            height: 100%;
            align-items: center;
        }
    }
}

@media (max-width: 995px) {
    .sp_banner_bg {
        .body_sp_banner {
            .sp_banner_text,
            .sp_banner_text_en {
                font-size: 44px;
                line-height: 44px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .sp_banner_btn,
            .sp_banner_btn_en {
                margin-top: 30px;
            }
        }
    }
    
    .sp_2_bg {
        .sp_content_2 {
            display: flex;
            flex-direction: column !important;
            align-items: center;
            padding: 0 !important;
            margin-top: 3%;

            .sp_2_text {
                width: 100% !important;
                text-align: center;
                padding-right: 0;
                margin-bottom: 3%;

                .sp_2_title {
                    padding-bottom: 15px !important;
                }

                br {
                    display: none;
                }
            }

            .sp_2_img {
                width: 100% !important;
                padding: 2.5 !important;
                max-width: 350px;
            }
        }
    }

    .sp_content_3 {
        display: flex;
        flex-direction: column-reverse !important;

        .sp_3_desc {
            text-align: center;
            width: 100% !important;
            padding: 0 !important;
        }
        .sp_3_img {
            margin-top: 3%;
            max-width: 350px;
        }
    }
}

@media (max-width: 768px) {
    .sp_content_2 {
        margin-top: 40px !important;
    }

    .sp_content_3 {
        .sp_content_img_3 {
            .sp_3_article {
                width: 100%;
                height: 680px;
                transform: translate(-60px, -50px);
            }

            .sp_3_img {
                width: 26.25rem;
                height: auto;
            }
        }
    }
}

@media (max-width: 660px) {
    .sp_content_2 {
        .sp_2_text {
            padding-inline: 5% !important;
        }
    }

    .sp_content_3 {
        .sp_content_img_3 {
            .sp_3_article {
                width: 100%;
                height: auto;
            }
        }
    }
}

@media (max-width: 425px) {
    .sp_content_2 {
        .sp_2_img {
            padding: 5% !important;
        }
    }

    .sp_content_3 {
        .sp_3_img {
            padding: 5% !important;
        }
    }
}