.hxhbjh {
    margin: 0;
    width: 100%;
    overflow-x: hidden;

    a {
        text-decoration: none;
        color: black;
    }

    .header {
        height: 89px;
        display: flex;
        border-bottom: 1px solid #D9D9D9;
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
        z-index: 10;
        /* justify-content: space-between; */
        /* align-items: center; */
        .logos {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        #logo_hxhb {
            height: 42px;
        }

        #logo_hyl {
            height: 36px;
        }

        .logo {
            height: 24px;
        }

        .line {
            height: 42px;
            width: 1px;
            background-color: #D9D9D9;
        
        }
        
        img {
            height: 100%;
        }
    }


    .container {
        width: 100%;
        margin: 0 auto;
        padding-top: 90px;
        position: relative;
        overflow: hidden;

        .content {
            
            z-index: 5;
            max-width: 1200px;
            margin: 0 auto;

            .introduction {
                display: flex;
                height: calc(100vh - 89px);
                justify-content: center;
                flex-direction: column;

                .img1 {
                    width: 835px;
                    max-height: 500px;
                    margin: 0 auto;
                }
                .introduction-content {
                    border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAA6CAYAAAAeGW/KAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASaSURBVHgB7ZzPaxxlGMe/7ySNiaAkpj3UFNmImg2iqYWumtg6sh5aLzX/QBKhCIXFpHhQa6FbkBrw0BRXT4ImJ3tKerEeTF1NLXEL9sfBbCykWzAWJGm2FYyb7O7r+0yy4/zqZueVHmb2/cCSd2beJeyH932fd5jnGQYfRJIjrS3r60MlaD3gfDdjiICjFUGEIc85cgz0YefQ1JDOJsdytX+9BqLHE7r4JyeEJB3hZoppOJP9KJXeqmNVcdHkSISvF7+sA2FOplhT49FqI7Dhfhe6jieGUSp/LaRFUX9ExW8f2v7K3sLyxcuzXh08xT1zLHGCcYyKZjPql2YwdqB9XwzLM5kfnBdd4gxpQBIKA+FC95JnE0fTc3OkKSyQPDFt71qnrRkcNgPBlcBuLx48eREwXqgEDK1ylq8VTytpVWk1dhibGOJonyb+vAkJHm1+GB2t7VX7dO/sQCgQ27JNVxtrXPv+2GmZbUdHWzvOHnkXifhBY9Jnby+iUCza+rze/TwmDg+jf89L+OufVaNPwImIQDHOjLVtrXgTEkwcfgexzqfN48WVOxj44gwW83eMYxI7mXhPjMoWs09q+hukLpxHkCk0NbZpWCvpkGCgT7dJIzI3b5jSCBJrlUZYrweVhwrrQxrX+CH4hEbSYO9rrvM0mir073lRrH2P2a5nFm5g8pefEXQ403o0sbZF4JN493OeUqyjKRF/w/W9ySvBl0Yw8N0UVSPwyWCfe7R9N3fdbMc6n3KJJaZ/vY6QENH87t26d+7ylGKNlhRJva7fE1E1JLRqPr/gKY1YXFk229HHd7mu31v9G2HCt7hHWlqgkBCn2ECJk0SJk4R1HUtwKHyjRpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkSpwkjQgJA726ePqmu87HP0mabXpA3tFmf2Yy/lMaE5fS8EtoxFHGwFbJPyTN2ceZaVAraqpKosRJEmpxD/IBuEYVJggBXmvVHyv2zCivNVAyXy9PIy6HEOCVPZBZ+M1sUz6LF3O3f4cEOY2VcQ0Bh9LOnLl6xPiltNmmjFAnzgyr2uG3NKbxqwg4gy/rrnOUh2eVEnvSLVY2M5RBm9JWt237CgGGRlv8WXd21FZJjiSWMkilKDektVxyLC8UphFQvHLxUtPnbaONxFmhXGWrWH/wc9nRsZyRdb7j1dgtcAwhgFBUpE/PE51GZCVpqQt2KZTQSNnwNF1pi/L2+OdYWPoTMjCNHVn6MZMzK2u6Pkx8H/TySgoQ1aYf3XKR3Dn5koGp+VOpfmqY96qs1PgWbwh2SdJWaxZNUWllYr8rHB2tHJpFcEsXZ/Pb9+8tiB4HoHDD+Qfzo59+Wzm0VQ8uz1ye3bEvRtNXh8JECDk5//FntqpKV73q0kwmreT9B0nLnkolnec9K6RJnpi2d8EYbbfrs0qa7uFpejpGWoX71uQb07av9yxYOQLUV10+E/taEQgOWtc0Vx/UAJUainva4bJkaWZQIGHCyMn//foMJ9H3RyLQSjoDP1RmRkVOoF/Ygo2XtVxlKF+jW0/jLqpG/gWDTJiTlwys+wAAAABJRU5ErkJggg==) 27 32 fill;
                    border-radius: 16px;
                    background-color: #27796c;
                    padding: 27px;
                    width: 70%;
                    border-image-width: auto; 
                    margin: 0px auto;
                    color: white;      
                    text-indent: 2em;        
                }
            }


            .videos {
                margin-top: 80px;
                position: relative;
                
                .player {
                    width: 100%;
                    height: 100%;
                    display: flex;

                    #szmain-video {
                        margin: 0 auto;
                        width: 980px;
                        height: 551px;
                        background-color: white;
                        box-shadow: 0 0 0 12px #409C92;
                    }
                }

                .video_bg1 {
                    position: absolute;
                    background: #F2FDFB;
                    z-index: -1;
                    top: -100px;
                    width: 5000px;
                    left: -1000px;
                    height: 68px;
                    transform: rotate(346deg);
                }
                .video_bg2 {
                    position: absolute;
                    background: #F2FDFB;
                    z-index: -1;
                    top: 0px;
                    width: 5000px;
                    left: -1000px;
                    height: 600px;
                    transform: rotate(346deg);
                }

                
                .video_list {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin: 0 auto;
                    width: 1200px;
                    margin: 50px 0px;
                    gap: 30px 20px;

                    .video_cover {
                        object-fit: cover;
                    }

                    .video_item {
                        width: 30%;
                        text-align: center;
                        background: white;
                        transition: transform 0.3s ease;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
                    }

                    .video_item:hover {
                        cursor: pointer;
                        transform: scale(1.05);
                        transition: transform 0.3s ease;
                    }

                    .item_selected {
                        background: gainsboro;
                        overflow: hidden;
                        box-shadow: 0 0 0 4px #409C92;
                    }

                    .video_title {
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        height: 72px;
                        justify-content: center;
                    }

                }
            }


            .updates {
                position: relative;
                margin-bottom: 50px;
                
                .update_list {
                    display: flex;
                    flex-wrap: wrap;
                    width: 1200px;
                    margin: 50px 0px;
                    gap: 30px 20px;
                }

                .planet2 {
                    position: absolute;
                    z-index: -1;
                    top: -300px;
                    right: -600px;
                }

                .post_img {
                    width: 100%;
                    height: 256px;
                    object-fit: cover;
                }

                .post_title {
                    font-weight: bold;
                    display: flex;
                    padding-left: 12px;
                    text-align: left;
                    align-items: center;
                    justify-content: flex-start;
                    height: 72px;
                    border-left: solid 12px #409C92;
                }

                .update_item {
                    width: 386px;
                    text-align: center;
                    transition: transform 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 2px 8px rgba(0,0,0,.10);
                }

                .update_item:hover {
                    cursor: pointer;
                    transform: scale(1.05);
                    transition: transform 0.3s ease;
                }
            }

            .reports {

                position: relative;

                .planet3 {
                    position: absolute;
                    z-index: -1;
                    top: -100px;
                    left: -400px;
                }

                .report_list {
                    display: flex;
                    flex-wrap: wrap;
                    width: 1200px;
                    margin: 50px 0px;
                    gap: 30px 20px;
                }

                .report_img {
                    width: 100%;
                    height: 382px;
                    object-fit: cover;
                }
                
                .report_title {
                    font-weight: bold;
                    display: flex;
                    text-align: left;
                    align-items: center;
                    justify-content: center;
                    height: 72px;
                    width: 100%;
                }

                .report_item {
                    width: 285px;
                    text-align: center;
                    transition: transform 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 2px 8px rgba(0,0,0,.10);
                }

                .report_item:hover {
                    cursor: pointer;
                    transform: scale(1.05);
                    transition: transform 0.3s ease;
                }
            }


            .partners {
                position: relative;

                .planet4 {
                    position: absolute;
                    z-index: -1;
                    top: -130px;
                    right: -350px;
                }

                .partner_season {
                    .partner_season_title {
                        width: 289px;
                        height: 70px;
                        margin: 0 auto;
                        background: #409C92;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 36px;
                        color: white;
                        border-radius: 36px;
                    }
                }

                .partner_list {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    width: 1200px;
                    margin: 50px 0px;
                    gap: 30px 20px;
                    a {
                        display: contents;
                    }
                }

                .partner_item {
                    /* width: 386px; */
                    text-align: center;
                    transition: transform 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 2px 8px rgba(0,0,0,.10);
                }

                .partner_item:hover {
                    cursor: pointer;
                    transform: scale(1.05);
                    transition: transform 0.3s ease;
                }
                
                .partner_title {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 16px 0;
                }

                .partner_img {
                    height: 256px;
                    width: 100%;
                    object-fit: cover;
                }

                .partner_info {
                    display: flex;
                    font-size: 24px;
                    align-items: center;
                    gap: 8px;
                    font-weight: bold;
                    /* margin-bottom: 16px; */
                }

                .partner_logo {
                    height: 64px;
                    width: 100%;
                    object-fit: contain;
                    /* margin: 16px; */
                }

                .partner_avatar {
                    height: 40px;
                    width: 40px;
                    border-radius: 50%;
                }

            }

        }
        
        .module-title {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            justify-content: center;
            margin-bottom: 30px;
            .icon {
                width: 80px;
                height: 80px;
                background-image: url(/images/hxhb/module_icon.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }
            .title {
                font-size: 48px;
                color: #409C92;
                font-weight: bold;
            }
        }
        .detail-content {

            max-width: 1200px;
            margin: 0 auto;

            .planet1 {
                top: 200px;
            }

            .detail-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                margin: 120px auto;
                height: 100px;
                

                img {
                    max-height: 100%;
                    max-width: 400px;
                    object-fit: contain;
                }

                .line {
                    width: 1px;
                    height: 100%;
                    background-color: #D9D9D9;
                }
            }
                
            .detail-story {
                padding: 32px;
                background: #409C92;
                margin-bottom: 60px;
                color: white;
                border-radius: 16px;

                .detail-story-title {
                    font-size: 36px;
                    font-weight: bold;
                    margin-bottom: 12px;
                }

                /* .detail-story-content { */
                    /* font-size: 24px; */
                    /* text-indent: 2em; */
                    /* font-weight: bold; */
                /* } */
            }

            .partner-info {
                padding: 48px;
                gap: 32px;
                display: flex;
                background: #f0fae8;
                border-radius: 16px;
                align-items: center;
                margin-bottom: 60px;
                position: relative;

                .planet2 {
                    position: absolute;
                    z-index: -1;
                    top: 200px;
                    right: -600px;
                }

                .partner-avatar {
                    width: 200px;
                    height: 200px;
                    object-fit: cover;
                    border-radius: 100px;
                }

                /* .partner-desc {
                    text-align: left;
                    text-indent: 2em;
                    font-size: 18px;
                } */
            }

            .partner-team-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                position: relative;

                .planet3 {
                    position: absolute;
                    z-index: -1;
                    top: 500px;
                    left: -400px;
                }

                .partner-team_show {
                    width: 60%;
                    border-radius: 16px;
                    border: 9px solid #409C92;
                }

                .partner-team_intro {
                    /* text-indent: 2em; */
                    padding: 48px;
                    background: #f0fae8;
                    border-radius: 18px;
                    align-items: center;
                }
            }


            .module-title {
                display: flex;
                align-items: flex-end;
                gap: 12px;
                justify-content: flex-start;
                margin: 30px 0px;

                /* .icon {
                    width: 80px;
                    height: 80px;
                    background-image: url(/images/hxhb/module_icon.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
                .title {
                    font-size: 48px;
                    color: #409C92;
                    font-weight: bold;
                } */
            }
       
        }

        .planet1 {
            position: absolute;
            float: right;
            z-index: -1;
            top: 350px;
            left: -180px;
            width: 300px;
            height: 300px;
        }
    }


    .footer { 
        padding-top: 42px; 
        height: 302px; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box; 
        max-width: 1200px;
        margin: 0 auto;

        .img5 {
            height: 280px;
        }

        .dl { float: left; margin-right: 50px; }
        
        .dt { font-size: 14px; color: #3b3b41; line-height: 34px; font-weight: bold; padding-bottom: 5px; }
        
        .dd { line-height: 26px; font-size: 13px; color: #a1a2a4; }
        
        .fr { float: right; margin-top: 60px; }

        .other { width: 118px; float: left; margin-left: 60px; }
        
        .right .p1 { font-size: 14px; line-height: 34px; color: #3b3b41; }

        .right a { text-decoration: none; }

        .right .p1 a { font-size: 14px; color: #3b3b41; padding-left: 9px; margin-right: 5px; }
        
        .right .p1 a:last-child { margin-right: 0; }
        
        .right .p2, .right .p3 { font-size: 14px; color: #a1a2a4; text-align: right; }
        
        .right h5 { color: #47bb1d; font-size: 30px; line-height: 50px; text-align: right; font-family: 'rubik'; }
    }
}


@media (max-width: 1200px) {
    .hxhbjh {
        .header {
            max-width: 100vw;

            .logos {
                margin-left: 10%;
            }
        }

        .container {

            .content {
                width: 80%;
                margin: 0 auto;

                .introduction {
                    .img1 {
                        width: 80%;
                    }
                }
                .videos {
                    .player {
                        #szmain-video {
                            width: 80%;
                            height: auto;
                            box-shadow: 0 0 0 12px #409C92;
                        }
                    }
                    .video_list {
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);

                        .video_item {
                            width: 100%;
                        }
                    }
                }

                .updates {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;


                    .update_list {
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        margin: 0;
                        
                        a {
                            display: contents;
                        }

                        .update_item {
                            width: 100%;
                        }
                        .post_img {
                            height: 100%;
                        }
                    }
                }

                .partners {
                    .partner_list {
                        width: 100%;
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
            }
            
            .detail-content {
                width: 80%;
                margin: 0 auto;
            }

            .footer {
                width: 80%;
                margin: 0 auto;

                .img5 {
                    height: 200px;
                }
            }
        }

    }
}

@media (max-width: 768px) {
    .hxhbjh {
        .header {
            max-width: 100vw;
            .logos {
                margin-left: 0px;
                justify-content: center;
                .logo {
                    display: none;
                }
                .line {
                    display: none;
                }

                #logo_hxhb {
                    display: block;
                }
            }
        }

        .container {

            .detail-content {

                width: 80%;
                margin: 0 auto;

                .partner-info {
                    flex-direction: column;
                    align-items: center;
                }
                
                .detail-logo {
                    margin: 30px auto;
                    .line {
                        display: none;
                    }
                    img:first-child {
                        display: none;
                    }
                }
            }

            .content {
                .introduction {
                    height: 100%;
                    .img1 {
                        width: 90%;
                    }
                }
                .videos {
                    .player {
                        #szmain-video {
                            width: 80%;
                            height: auto;
                            box-shadow: 0 0 0 12px #409C92;
                        }
                    }
                    .video_list {
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);

                        .video_item {
                            width: 100%;
                        }
                    }
                }

                .updates {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;


                    .update_list {
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        margin: 0;
                        
                        a {
                            display: contents;
                        }

                        .update_item {
                            width: 100%;
                        }
                        .post_img {
                            height: 100%;
                        }
                    }
                }

                .partners {

                    .partner_img {
                        height: 120px;
                    }
                    .partner_info {
                        font-size: 1rem;
                    }
                    .partner_list {
                        width: 100%;
                        grid-template-columns: repeat(2, 1fr);
                    }
                    .partner_season {
                        .partner_season_title {
                            font-size: 1.5em;
                            height: 2em;
                            width: 80%;
                        }
                    }
                }
            }

            .module-title {
                .icon {
                    width: 3em;
                    height: 3em;
                    background-image: url(/images/hxhb/module_icon.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
                .title {
                    font-size: 1.5em;
                    color: #409C92;
                    font-weight: bold;
                }
            }
        }

        .footer {
            .fr {
                margin-right: 8px;
            }
            
            .img5 {
                display: none;
            }
            
        }


    }
}