@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@400;500;700;900&family=Roboto:wght@100;500&display=swap");

.d-flex{
    display:flex;
}
.title {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center!important;
}
/*230704更新粗體設定*/
.wordb{
    font-weight:bolder;
}
.banner {
    position: relative
}

    .banner:before {
        content: "ACHIEVEMENT";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 200;
        line-height: 10.5rem;
        color: #fde66c;
        position: absolute;
        bottom: -12px;
        left: 0;
        z-index: 5
    }

    .banner .carousel {
        position: relative
    }

        .banner .carousel .bannerwrap {
            height: 750px
        }

            .banner .carousel .bannerwrap img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover
            }

        .banner .carousel:before {
            content: "";
            width: 100%;
            height: 370px;
            background: white;
            background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(white));
            background: linear-gradient(180deg,rgba(255,255,255,0) 0%,white 100%);
            display: block;
            position: absolute;
            bottom: 0;
            z-index: 2
        }

        .banner .carousel:after {
            content: "";
            width: 100%;
            height: 370px;
            background: rgba(255,216,0,0.85);
            display: block;
            position: absolute;
            bottom: 0;
            z-index: 3
        }

    .banner .slideshow {
        position: absolute;
        height: 470px;
        bottom: 0;
        z-index: 6;
        overflow-y: hidden;
        width: 100%;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        overflow-y: hidden;
        cursor: move
    }

        .banner .slideshow::-webkit-scrollbar {
            display: none
        }

    .banner ul {
        margin-left: 100px;
        width: 1903px;
        position: relative;
        height: 100%
    }

        .banner ul li {
            position: absolute;
            bottom: 0;
            /* width: 345px;  */
            width: 400px;
            height: 410px;
            border-left: 3px solid white;
            z-index: 55
        }

            .banner ul li .circle {
                position: absolute;
                left: -53px;
                width: 106px;
                height: 106px;
                background-color: white;
                border-radius: 50%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

                .banner ul li .circle .iconwrap {
                    display: inline-block
                }

            .banner ul li .content {
                margin: 53px 46px 0 60px;
            }

            .banner ul li .tag {
                /*font-family: "Noto Serif TC",serif;*/
                letter-spacing: 0.01em;
                font-weight: 700;
                background-color: #4f4f4f;
                color: white;
                display: inline-block;
                padding: 3.5px 18px;
                border-radius: 15px;
                margin-bottom: 5px
            }

            .banner ul li .f22 {
                /*font-family: "Noto Serif TC",serif;*/
                color: #1a3c76;
                font-weight: 700;
                margin-bottom: 5px;
            }

            .banner ul li .txt {
                letter-spacing: normal;
                color: black;
                line-height: 24px
            }

            .banner ul li:nth-child(2n) {
                height: 344px
            }

            /*.banner ul li:nth-child(3n) {
                height: 250px
            }*/

            .banner ul li:nth-child(4n-1) {
                height: 410px
            }

/*            .banner ul li:nth-child(12) {
                height: 460px;
            }

            .banner ul li:nth-child(14) {
                height: 460px;
            }*/

            .banner ul li.e .tag {
                background-color: green
                    /*#7f7f7f*/
            }

            .banner ul li.s .tag {
                background-color: #7f7f7f
                /*#59522f*/
            }

@media (max-width:1200px) {
    .banner:before {
        font-size: 6.25rem;
        line-height: 5rem;
        bottom: 0px
    }
}

@media (max-width:767px) {
    .banner:before {
        font-size: 3.125rem;
        line-height: 3rem;
        bottom: 0px
    }

    .banner .carousel .bannerwrap {
        height: 610px
    }

    .banner .carousel:before {
        height: 438px
    }

    .banner .carousel:after {
        height: 438px
    }
}

.s1 {
    margin-top: 85px;
    margin-bottom: 117px;
    position: relative
}

    .s1:before {
        content: "NEWS";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 100;
        line-height: 10.5rem;
        color: #eaeaea;
        position: absolute;
        top: -20px;
        right: 0;
        z-index: -1
    }

    .s1:after {
        content: "";
        background-color: #eeeeee;
        width: 50%;
        height: 1531px;
        position: absolute;
        top: 210px;
        left: 0;
        z-index: -2
    }

    .s1 .title {
        margin-bottom: 80px
    }

    .s1 .content ul li {
        margin: 0 auto 50px;
        width: 78%;
        -webkit-box-shadow: 1.2px 4.9px 9px 1px rgba(133,133,132,0.19);
        box-shadow: 1.2px 4.9px 9px 1px rgba(133,133,132,0.19);
        background-color: #ffffff;
        -webkit-transition: 0.4s ease;
        transition: 0.4s ease;
        min-height: 255px
    }

        .s1 .content ul li a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

            .s1 .content ul li a .imgwrap {
                width: 36.2%;
                position: relative
            }

                .s1 .content ul li a .imgwrap img {
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                    object-fit: cover
                }

                .s1 .content ul li a .imgwrap:before {
                    content: "";
                    width: 100%;
                    height: 30px;
                    background: white;
                    background: -webkit-gradient(linear,left bottom,left top,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.6979166667)));
                    background: linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6979166667) 100%);
                    display: block;
                    position: absolute;
                    top: 0;
                    opacity: 0;
                    -webkit-transition: 0.4s ease;
                    transition: 0.4s ease
                }

                .s1 .content ul li a .imgwrap:after {
                    content: "";
                    width: 100%;
                    height: 30px;
                    background: white;
                    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.6979166667)));
                    background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6979166667) 100%);
                    display: block;
                    position: absolute;
                    bottom: 0;
                    opacity: 0;
                    -webkit-transition: 0.4s ease;
                    transition: 0.4s ease
                }

            .s1 .content ul li a .txt {
                width: 63.8%;
                padding: 30px 50px 30px 30px
            }

                .s1 .content ul li a .txt .tag {
                    background-color: #ffd800;
                    padding: 5px 15px;
                    display: inline-block;
                    font-family: "Roboto",sans-serif;
                    letter-spacing: 1.6px;
                    margin-bottom: 10px;
                    -webkit-transition: 0.4s ease;
                    transition: 0.4s ease;
                    color: #1a3c76
                }

                .s1 .content ul li a .txt .f22 {
                    color: #1a3c76;
                    /*font-family: "Noto Serif TC",serif;*/
                    letter-spacing: 1.1px;
                    font-weight: 700;
                    -webkit-transition: 0.4s ease;
                    transition: 0.4s ease;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    white-space: normal;
                    -webkit-box-orient: vertical;
                    overflow: hidden
                }

                .s1 .content ul li a .txt .line {
                    width: 100%;
                    height: 1px;
                    background-color: #d2d2d2;
                    margin: 16px 0 12px
                }

                .s1 .content ul li a .txt .brief {
                    position: relative
                }

                    .s1 .content ul li a .txt .brief .f16 {
                        color: #636363;
                        padding-right: 30px;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        white-space: normal;
                        -webkit-box-orient: vertical;
                        overflow: hidden
                    }

                    .s1 .content ul li a .txt .brief:after {
                        content: "";
                        width: 20px;
                        height: 20px;
                        border-right: 2px solid #a6937c;
                        border-bottom: 2px solid #a6937c;
                        display: block;
                        -webkit-transform: rotate(-45deg) translateY(-50%);
                        transform: rotate(-45deg) translateY(-50%);
                        position: absolute;
                        right: 0;
                        top: 50%;
                        -webkit-transition: 0.4s ease;
                        transition: 0.4s ease
                    }

        .s1 .content ul li:nth-child(2) {
            margin: 0 0 50px auto
        }

        .s1 .content ul li:nth-child(3) {
            margin: 0 auto 75px
        }

@media (min-width:768px) {
    .s1 .content ul li:hover {
        -webkit-box-shadow: 2.2px 8.7px 22.7px 4.3px rgba(133,133,132,0.19);
        box-shadow: 2.2px 8.7px 22.7px 4.3px rgba(133,133,132,0.19)
    }

        .s1 .content ul li:hover a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

            .s1 .content ul li:hover a .imgwrap {
                width: 36.2%
            }

                .s1 .content ul li:hover a .imgwrap:after, .s1 .content ul li:hover a .imgwrap:before {
                    opacity: 1
                }

            .s1 .content ul li:hover a .txt .tag {
                color: white;
                background-color: #1a3c76
            }

            .s1 .content ul li:hover a .txt .f22 {
                color: black
            }

            .s1 .content ul li:hover a .txt .line {
                width: 100%;
                height: 1px;
                background-color: #636363;
                margin: 16px 0 12px
            }

            .s1 .content ul li:hover a .txt .brief:after {
                border-right: 2px solid #ffd800;
                border-bottom: 2px solid #ffd800
            }
}

@media (max-width:1200px) {
    .s1 .content ul li {
        width: 100%
    }
}

@media (max-width:991px) {
    .s1:after, .s1:before {
        display: none
    }
}

@media (max-width:767px) {
    .s1 {
        margin-top: 56px;
        margin-bottom: 70px
    }

        .s1:before {
            font-size: 3.125rem;
            line-height: 10.5rem
        }

        .s1 .title {
            margin-bottom: 40px
        }

        .s1 .content ul li {
            min-height: auto;
            margin: 0 auto 30px;
            width: 100%
        }

            .s1 .content ul li a {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column
            }

                .s1 .content ul li a .imgwrap {
                    width: 100%
                }

                .s1 .content ul li a .txt {
                    width: 100%;
                    padding: 25px 25px 55px
                }

                    .s1 .content ul li a .txt .f22 {
                        display: block;
                        overflow: auto
                    }

                    .s1 .content ul li a .txt .brief .f16 {
                        padding-right: 0px;
                        display: block;
                        overflow: auto
                    }

                    .s1 .content ul li a .txt .brief:after {
                        top: auto;
                        bottom: -40px
                    }

            .s1 .content ul li:nth-child(3) {
                margin: 0 auto 30px
            }
}

.s2 {
    position: relative;
    margin-bottom: 181px
}

    .s2:before {
        content: "REPORT";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 100;
        line-height: 10.5rem;
        color: #dad9d7;
        position: absolute;
        top: 0;
        left: -20px;
        z-index: -1
    }

    .s2 .title {
        margin-bottom: 80px
    }

    .s2 .content {
        width: 80.6%;
        margin-left: auto
    }

        .s2 .content a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-transition: 0.4s ease;
            transition: 0.4s ease
        }
        @media(max-width:1600px){
            .s2 .certification{
                flex-wrap:wrap;
            }
        }
@media (min-width:768px) {
    .s2 .content a:hover:hover {
        -webkit-box-shadow: 2.2px 8.7px 22.7px 4.3px rgba(133,133,132,0.19);
        box-shadow: 2.2px 8.7px 22.7px 4.3px rgba(133,133,132,0.19)
    }
}

.s2 .content .txt {
    width: 37.5%;
    background-color: #ffd800;
    padding: 25px 30px
}

    .s2 .content .txt .f22 {
        color: #1a3c76;
        font-weight: 700;
        margin-bottom: 12px
    }

    .s2 .content .txt .f16 {
        color: #3f3e3e
    }

        .s2 .content .txt .f16 i {
            font-weight: 700
        }

        .s2 .content .txt .f16 .btnwrap {
            margin-top: 50px;
            text-align: right
        }

.s2 .content .imgwrap {
    width: 62.5%;
    position: relative
}

    .s2 .content .imgwrap img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

    .s2 .content .imgwrap .certification {
        position: absolute;
        bottom: 15px;
        left: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

        .s2 .content .imgwrap .certification .certiwrap {
            width: 38%
        }

        .s2 .content .imgwrap .certification .f16 {
            -webkit-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            color: #3f3e3e;
            background-color: rgba(255,216,0,0.75);
            padding: 10px 15px
        }

@media (max-width:1200px) {
    .s2 .content {
        width: 100%
    }
}

@media (max-width:991px) {
    .s2:before {
        display: none
    }
}

@media (max-width:767px) {
    .s2 {
        margin-bottom: 59px
    }

        .s2 .container-fluid {
            padding: 0 16px
        }

        .s2 .title {
            margin-bottom: 40px
        }

        .s2 .content {
            width: 100%
        }

            .s2 .content a {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column
            }

            .s2 .content .txt {
                width: 100%;
                padding: 30px 25px
            }

                .s2 .content .txt .f22 {
                    margin-bottom: 30px
                }

            .s2 .content .imgwrap {
                width: 100%
            }

                .s2 .content .imgwrap .certification {
                    left: 50%;
                    top: 50%;
                    -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
                    bottom: auto;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    width: 90%
                }

                    .s2 .content .imgwrap .certification .certiwrap {
                        width: 80%;
                        margin-bottom: 20px
                    }

                    .s2 .content .imgwrap .certification .f16 {
                        padding: 5px 20px
                    }
}

.s3 {
    z-index: 1;
    position: relative;
    margin-bottom: 115px
}

    .s3:before {
        content: "GLORY";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 100;
        line-height: 10.5rem;
        color: #f0eede;
        position: absolute;
        top: -140px;
        right: 0;
        z-index: -1
    }

    .s3:after {
        content: "";
        background: url(../image/index/c_bg.jpg);
        position: absolute;
        width: 100%;
        height: 548px;
        top: -80px;
        left: 0;
        z-index: -2
    }

    .s3 .title {
        margin-bottom: 40px
    }

    .s3 .content {
        max-width: 1232px;
        padding: 0 16px;
        margin: 0 auto
    }

        .s3 .content ul {
            margin-bottom: 75px
        }

            .s3 .content ul li {
                width: 285px;
                height: 478px;
                text-align: center;
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex
            }

                .s3 .content ul li:not(:last-child) {
                    margin-right: 20px
                }

                .s3 .content ul li .imgwrap {
                    position: absolute;
                    bottom: 242px;
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    z-index: 3
                }

                /* .s3 .content ul li .txt {
                    padding: 119px 10px 30px;
                    background-color: #ffd800;
                    margin-top: 140px
                } */

                .s3 .content ul li .txt {
                    padding: 130px 10px 24px;
                    background-color: #ffd800;
                    margin-top: 80px;
                    height: 560px;
                    box-sizing: border-box;
                    position: relative;
                    z-index: 1;
                }

                .s3 .content ul li .txt .f16 {
                    max-height: 333px;
                    overflow-y: auto;
                    overflow-x: hidden;
                    padding-right: 22px;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar {
                        width: 0 !important;
                        height: 0 !important;
                        display: none;
                    }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar-track,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-track-piece {
                        background: transparent;
                        border-radius: 999px;
                        box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5);
                    }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:single-button,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:start:decrement,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:end:increment,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:vertical:decrement,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:vertical:increment,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:vertical:start,
                    .s3 .content ul li .txt .f16::-webkit-scrollbar-button:vertical:end {
                        width: 0 !important;
                        height: 0 !important;
                        min-height: 0 !important;
                        display: none !important;
                        -webkit-appearance: none;
                        background: #ffd800 !important;
                    }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar-thumb {
                        background: #1a3c76;
                        background-clip: content-box;
                        border: 3px solid transparent;
                        border-radius: 999px;
                        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
                        min-height: 36px;
                    }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar-thumb:hover {
                        background: #0f2f62;
                    }

                    .s3 .content ul li .txt .f16::-webkit-scrollbar-corner {
                        background: transparent;
                    }

                    .s3 .content ul li .txt .esg-scrollbar {
                        width: 6px;
                        height: 150px;
                        position: absolute;
                        right: 10px;
                        bottom: 24px;
                        z-index: 2;
                        border-radius: 999px;
                        background: rgba(255, 255, 255, 0.42);
                        box-shadow: inset 0 0 0 1px rgba(26, 60, 118, 0.1);
                    }

                    .s3 .content ul li .txt .esg-scrollbar-thumb {
                        width: 100%;
                        min-height: 36px;
                        border-radius: 999px;
                        background: #1a3c76;
                        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
                        cursor: pointer;
                    }

                    .s3 .content ul li .txt .esg-scrollbar-thumb:hover,
                    .s3 .content ul li .txt .esg-scrollbar-thumb.is-dragging {
                        background: #0f2f62;
                    }

                    .s3 .content ul li .txt .f22 {
                        color: #1a3c76;
                        font-weight: 700;
                        height: 62px;
                        margin-bottom: 8px
                    }

                    .s3 .content ul li .txt .f16 {
                        color: black;
                        text-align: left;
                        margin-top: 9%;
                    }

                .s3 .content ul li .imgwrap .pair {
                    display: flex;
                    align-items: baseline;
                    justify-content: center;
                    gap: 0;
                    width: 100%;
                    box-sizing: border-box;
                }

                    .s3 .content ul li .imgwrap .pair img,
                    .s3 .content ul li .imgwrap .pair .pair-img {
                        /*                        width: 50%;
                        max-width: 50%;*/
                        height: auto;
                        display: block;
                    }

@media (max-width:991px) {
    .s3:before {
        display: none
    }
}

@media (max-width:767px) {
    .s3 {
        margin-bottom: 56px
    }

        .s3:after {
            top: 80px;
            background: url(../image/index/c_bg_mb.jpg) no-repeat
        }

        .s3 .title {
            margin-bottom: 60px
        }

        .s3 .content ul li .imgwrap {
            width: 60%
        }

            .s3 .content ul li .imgwrap img {
                margin: 0 auto
            }
}

.s4 {
    margin-bottom: 145px;
    position: relative
}

    .s4 .csr {
        content: "CSR REPORT";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 100;
        line-height: 10.5rem;
        color: #dcdada;
        position: absolute;
        top: -110px;
        left: -15px;
        z-index: -1;
        text-align: right
    }

    .s4:after {
        content: "";
        background-color: #eeeeee;
        width: 58.5%;
        height: 1000px;
        position: absolute;
        top: -55px;
        right: 0;
        z-index: -2
    }

    .s4 .title {
        margin-bottom: 75px
    }

    .s4 .content .download {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .s4 .content .imgwrap {
        /*width: 26%;*/
        position: relative
    }

        .s4 .content .imgwrap img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
            object-fit: contain
        }

        .s4 .content .imgwrap:before {
            content: "";
            width: 100%;
            height: 100%;
            background-color: black;
            display: block;
            position: absolute;
            opacity: 0;
            -webkit-transition: 0.6s ease;
            transition: 0.6s ease
        }

        .s4 .content .imgwrap:after {
            content: "Download ESG REPORT";
            font-size: 1.1875rem;
            background-color: #ffd800;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            border-radius: 25px;
            padding: 11px 40px;
            opacity: 0;
            -webkit-transition: 0.6s ease;
            transition: 0.6s ease;
            width:61%;
        }

@media (min-width:768px) {
    .s4 .content .imgwrap:hover:before {
        opacity: 0.5
    }

    .s4 .content .imgwrap:hover:after {
        opacity: 1
    }
}


.s4 .content ul {
    width: 35%;
    padding: 0 17% 0 3%
}

    .s4 .content ul li {
        margin-bottom: 33px
    }

        .s4 .content ul li a {
            display: inline-block;
            position: relative
        }

            .s4 .content ul li a .f22 {
                position: relative;
                font-weight: 700;
                color: #1a3c76;
                margin-left: 50px;
                line-height: 23px
            }

                .s4 .content ul li a .f22:after {
                    content: "";
                    width: 100%;
                    height: 5px;
                    background-color: #ffd800;
                    border-radius: 2.5px;
                    display: block;
                    position: absolute;
                    left: 50%;
                    bottom: -8px;
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    -webkit-transition: 0.4s ease;
                    transition: 0.4s ease;
                    opacity: 0
                }

        .s4 .content ul li:not(:last-child) a:before {
            content: "";
            display: block;
            height: 22px;
            width: 23px;
            background: url(../image/index/download.png) left no-repeat;
            position: absolute;
            top: 0px;
            -webkit-transition: 0.4s ease;
            transition: 0.4s ease
        }

    .s4 .content ul .btnwrap {
        text-align: left
    }

@media (min-width:768px) {
    .s4 .content li:hover a:before {
        background-image: url(../image/index/download_hover.png)
    }

    .s4 .content li:hover a .f22:after {
        opacity: 1
    }
}

@media (max-width:991px) {
    .s4 .csr {
        display: none
    }

    .s4:after {
        width: 80%
    }

    .s4 .content .download {
        width: 100%;
        margin-left: auto
    }

    .s4 .content .imgwrap {
        width: 50%
    }

    .s4 .content ul {
        width: 50%;
        padding: 0 28px
    }

        .s4 .content ul .btnwrap {
            text-align: center
        }
}

@media (max-width:767px) {
    .s4 {
        margin-bottom: 100px
    }

        .s4:after {
            width: 90%;
            height: 744px;
            position: absolute;
            top: 75px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
        }

        .s4 .title {
            margin-bottom: 40px
        }

        .s4 .content .download {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 90%;
            margin: 0 auto
        }

        .s4 .content .imgwrap {
            width: 100%;
            margin-bottom: 60px
        }

            .s4 .content .imgwrap:before {
                opacity: 0.5
            }

            .s4 .content .imgwrap:after {
                opacity: 1;
                min-width: 224px;
                padding: 11px 0;
                text-align: center
            }

        .s4 .content ul {
            width: 100%
        }
}

.s5 {
    margin-bottom: 130px;
    position: relative
}

    .s5:after {
        content: "VIDEO";
        font-size: 12.5rem;
        font-family: "Roboto",sans-serif;
        font-weight: 100;
        line-height: 10.5rem;
        color: #dcdada;
        position: absolute;
        top: -150px;
        right: 0;
        z-index: -1
    }

    .s5 .video {
        position: relative
    }

    .s5 .videowrap {
        position: absolute;
        top: 52px;
        right: 0
    }

    .s5 .txt {
        width: 54%;
        margin-right: auto;
        padding: 76px 130px 100px 89px;
        background: #105cb2;
        background: linear-gradient(77deg,#105cb2 0%,#c7e4ff 59%,#97c9f8 97%)
    }

        .s5 .txt .title {
            margin-bottom: 34px;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start
        }

        .s5 .txt .f16 {
            color: black;
            line-height: 24.5px;
            margin-bottom: 10px
        }

        .s5 .txt .btnwrap {
            text-align: right
        }

@media (max-width:991px) {
    .s5:after {
        display: none
    }

    .s5 .videowrap {
        position: relative;
        width: 100%;
        top: 0
    }

        .s5 .videowrap iframe {
            width: 100%
        }

    .s5 .txt {
        width: 100%;
        padding: 50px 16px 40px
    }

        .s5 .txt .btnwrap {
            text-align: center
        }
}

@media (max-width:767px) {
    .s5 {
        margin-bottom: 100px
    }

        .s5 .videowrap iframe {
            height: 300px
        }

        .s5 .txt {
            width: 100%;
            padding: 40px 16px
        }

            .s5 .txt .title {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

            .s5 .txt .btnwrap {
                text-align: center
            }
}