@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");

.s1 {
    margin-bottom: 93px
}

@media (max-width:767px) {
    .s1 {
        margin-bottom: 50px
    }
}

.s2 {
    margin-bottom: 93px
}

    .s2 .info3 .borderyellow {
        border-bottom: 6px solid #ffd800;
        font-weight: 500;
        color: black;
    }

    .s2 .wrap {
        overflow-x: auto;
        margin-bottom: 50px
    }

    .s2 .chart {
        width: 1164px
    }

        .s2 .chart ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

            .s2 .chart ul li {
                width: 215px
            }

            .s2 .chart ul .dotlist {
                color: black;
                line-height: 25px
            }

                .s2 .chart ul .dotlist .tag {
                    background-color: #1c1c9e;
                    color: white;
                    width: -webkit-fit-content;
                    width: -moz-fit-content;
                    width: fit-content;
                    padding: 2.5px 15px;
                    margin: 10px 0
                }

                .s2 .chart ul .dotlist .txt {
                    white-space: nowrap
                }

                    .s2 .chart ul .dotlist .txt span:first-child {
                        color: #1c1c9e
                    }

        .s2 .chart .mb17 {
            margin-bottom: 17px
        }

        .s2 .chart .imgwrap {
            text-align: center;
            position: relative;
            margin-bottom: 10px
        }

            .s2 .chart .imgwrap .year {
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                font-family: "Roboto",sans-serif;
                font-weight: 500;
                font-size: 1.375rem;
                position: absolute;
                width: 100%;
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%)
            }

                .s2 .chart .imgwrap .year li {
                    width: -webkit-fit-content;
                    width: -moz-fit-content;
                    width: fit-content;
                    margin-right: 111px
                }

                    .s2 .chart .imgwrap .year li.important {
                        font-weight: 700
                    }

                    .s2 .chart .imgwrap .year li:first-child {
                        margin-left: 59px;
                        color: #ff7d7d
                    }

                    .s2 .chart .imgwrap .year li:nth-child(2) {
                        color: #f89348
                    }

                    .s2 .chart .imgwrap .year li:nth-child(3) {
                        color: #6adcc8
                    }

                    .s2 .chart .imgwrap .year li:nth-child(4) {
                        color: #579ae6
                    }

                    .s2 .chart .imgwrap .year li:nth-child(5) {
                        color: #c07ae4
                    }

                    .s2 .chart .imgwrap .year li:nth-child(6) {
                        color: #dc6a95
                    }

                    .s2 .chart .imgwrap .year li:nth-child(7) {
                        color: #f64d65
                    }

    .s2 .uppercontent ul {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
        /*
        .s2 .uppercontent ul li {
            display: flex;
            flex-flow: column-reverse;
        }*/

        .s2 .uppercontent ul li:first-child .dotlist:before {
            background-color: #FEF6A6
        }

        .s2 .uppercontent ul li:nth-child(2) .dotlist:before {
            background-color: #FFE2BA
        }

        .s2 .uppercontent ul li:nth-child(3) .dotlist:before {
            background-color: #E1ECD6
        }

        .s2 .uppercontent ul li:nth-child(4) .dotlist:before {
            background-color: #B5D09B
        }

        .s2 .uppercontent ul li:nth-child(5) .dotlist:before {
            background-color: #89B662
        }

        .s2 .uppercontent ul li:nth-child(6) .dotlist:before {
            background-color: #00916E
        }

    .s2 .left-four {
        width: 48%;
        display: flex;
        justify-content: space-between;
        margin-top: 26%;
    }

    .s2 .lowercontent ul {
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly
    }

        .s2 .lowercontent ul li:first-child .dotlist:before {
            background-color: #FFF9B1
        }

        .s2 .lowercontent ul li:nth-child(2) .dotlist:before {
            background-color: #C8ECEE
        }

        .s2 .lowercontent ul li:nth-child(3) .dotlist:before {
            background-color: #A7C888
        }

        .s2 .lowercontent ul li:nth-child(4) .dotlist:before {
            background-color: #6BA43A
        }

    .s2 .info1 {
        width: 1168px;
        border-radius: 15px;
        border: 1px solid #1c1c9e;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 46px 42px 27px
    }

        .s2 .info1 .left {
            width: 40%
        }

            .s2 .info1 .left .f16 {
                color: black;
                line-height: 30px;
                font-weight: 500
            }

            .s2 .info1 .left .imgwrap {
                margin-bottom: 25px
            }

                .s2 .info1 .left .imgwrap img:not(:last-child) {
                    margin-right: 10px
                }

        .s2 .info1 .right {
            width: 55.3%
        }

            .s2 .info1 .right .imgwrap img {
                width: 135px
            }

                .s2 .info1 .right .imgwrap img:not(:last-child) {
                    margin-right: 15px
                }

    .s2 .info2 {
        margin-bottom: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .s2 .info2 .item {
            width: 48.5%;
            margin-right: 25px;
        }

            .s2 .info2 .item .f18 {
                background-color: #0c3576;
                color: white;
                font-weight: 500;
                margin-bottom: 12px;
                padding: 10px 0;
                text-align: center
            }

            .s2 .info2 .item .box {
                /*display: -webkit-box;*/
                display: -ms-flexbox;
                /* display: flex;*/
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start
            }

                .s2 .info2 .item .box .pic {
                    /*width: 48.5%*/
                }

                    .s2 .info2 .item .box .pic .red {
                        text-align: center;
                        color: #ea3636;
                        margin: 16px 0 27px
                    }

                        .s2 .info2 .item .box .pic .red span:first-child {
                            font-size: 1.125rem
                        }

                        .s2 .info2 .item .box .pic .red span:nth-child(2) {
                            font-weight: 500
                        }

                    .s2 .info2 .item .box .pic .imgwrap img {
                        width: 100%;
                        height: 225px;
                        -o-object-fit: cover;
                        object-fit: cover
                    }

                .s2 .info2 .item .box .txt {
                    /*width: 48%;*/
                    color: black;
                    line-height: 30px;
                    text-align: justify;
                }

    .s2 .info3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .s2 .info3 .item {
            /*width: 48.5%;*/
            border: 3px solid #ffd800;
            border-radius: 15px
        }

        .s2 .info3 .mb33 .mbtitle {
            padding: 1% 9%;
            background-color: #FFD966;
            width: fit-content;
            margin-bottom: 15px;
            font-weight: 500;
            color: black;
        }

        .s2 .info3 .f18 {
            background-color: #ffd800;
            color: black;
            padding: 15px 0;
            text-align: center;
            font-weight: 500;
            border-radius: 12px 12px 0 0;
            margin-bottom: 34px
        }

        .s2 .info3 .box {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            padding: 0 23px
        }

            .s2 .info3 .box .imgwrap {
                width: 100%;
                display: flex;
                justify-content: center;
            }

                .s2 .info3 .box .imgwrap img {
                    /*width: 147px*/
                }

            .s2 .info3 .box .txt {
                width: 100%;
                color: black;
                line-height: 30px
            }

                .s2 .info3 .box .txt .f16:first-child {
                    border-bottom: 6px solid #ffd800;
                    width: -webkit-fit-content;
                    width: -moz-fit-content;
                    width: fit-content;
                    margin-bottom: 20px
                }

        .s2 .info3 .mb33 {
            margin-bottom: 33px
        }



            .s2 .info3 .mb33:first-child > div:nth-child(2) > div > div:first-child,
            .s2 .info3 .mb33:nth-child(2) > div:nth-child(2) .d-flex > div:first-child,
            .s2 .info3 .mb33:nth-child(2) > div:nth-child(3) .d-flex > div:first-child {
                width: 25%;
            }

            .s2 .info3 .mb33:first-child > div:nth-child(2) > div > div:nth-child(2),
            .s2 .info3 .mb33:nth-child(2) > div:nth-child(2) .d-flex > div:nth-child(2),
            .s2 .info3 .mb33:nth-child(2) > div:nth-child(3) .d-flex > div:nth-child(2) {
                width: 70%;
            }
            .s2 .info3 .mb33 div:nth-child(2) > div:first-child,
            .s2 .info3 .mb33 div:nth-child(2) > div:nth-child(3) {
                justify-content: space-between;
            }

            .s2 .info3 .mb20 {
                margin-bottom: 20px
            }

        .s2 .info3 .certificate .f16 {
            text-align: center;
            font-weight: 500;
            color: black;
            margin-bottom: 15px
        }

        .s2 .info3 .certificate .imgwrap {
            width: 95%;
            margin: 0 auto
        }

            .s2 .info3 .certificate .imgwrap img {
                width: 100%
            }

        .s2 .info3 .item .new3 {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

            .s2 .info3 .item .new3 .f16-1 {
                text-align: justify;
                color: black;
                margin-top: 20px;
            }

        .s2 .info3 .item .certificate {
            width: 30%;
        }

    .s2 .info4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 3%;
    }

.d-flex {
    display: flex;
}

.s2 .info4 .item {
    /*width: 48.5%;*/
    border: 3px solid #ffd800;
    border-radius: 15px
}

.s2 .info4 .width485 {
    width: 48.5%;
}

.s2 .info4 div:nth-child(2) .item {
    width: 100%;
    min-width: 300px;
}

.s2 .info4 .f18 {
    background-color: #ffd800;
    color: black;
    padding: 15px 0;
    text-align: center;
    font-weight: 500;
    border-radius: 12px 12px 0 0;
    margin-bottom: 34px
}

.s2 .info4 .box {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    margin: 0 23px
}

    .s2 .info4 .box .imgwrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .s2 .info4 .box .imgwrap img {
            /*width: 147px*/
        }

    .s2 .info4 .box .txt {
        width: 100%;
        color: black;
        line-height: 30px
    }

        .s2 .info4 .box .txt .f16:first-child {
            border-bottom: 6px solid #ffd800;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            margin-bottom: 20px
        }

.s2 .info4 .mb33 {
    margin-bottom: 33px
}

.s2 .info4 .mb20 {
    margin-bottom: 20px
}

.s2 .info4 .certificate .f16 {
    text-align: center;
    font-weight: 500;
    color: black;
    margin-bottom: 15px
}

.s2 .info4 .certificate .imgwrap {
    width: 95%;
    margin: 0 auto
}

    .s2 .info4 .certificate .imgwrap img {
        width: 100%
    }

.s2 .info4 .item .new3 {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

    .s2 .info4 .item .new3 .f16-1 {
        text-align: justify;
        color: black;
        margin-top: 20px;
    }

.s2 .info4 .item .certificate {
    width: 30%;
}

.s2 .info4 .width60 {
    width: 60% !important;
}

@media (max-width:991px) {
    .s2 .info4 .width485 {
        width: 100%;
        overflow-x: auto;
    }
    #tab2 > .s2:nth-child(2) > .info3 > .item > div:nth-child(2)>div {
        flex-wrap: wrap;
    }
    .s2 .info2 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

        .s2 .info2 .item {
            width: 100%
        }

            .s2 .info2 .item .box {
                margin-bottom: 20px
            }

                .s2 .info2 .item .box .pic .imgwrap img {
                    height: 190px
                }

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

        .s2 .info3 .item {
            width: 100% !important;
            margin-bottom: 20px
        }

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

        .s2 .info4 .item {
            width: 100%;
            margin-bottom: 20px
        }
}

@media (max-width:767px) {
    .s2 {
        margin-bottom: 100px
    }
    #tab2>.s2:nth-child(2) >.info3>.item>div:nth-child(2){
        flex-wrap:wrap;
    }
        .s2 .info3 .item .new3 {
            display: block;
        }

        .s2 .info2 {
            margin-bottom: 20px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column
        }

            .s2 .info2 .item {
                width: 100%
            }

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

                    .s2 .info2 .item .box .pic {
                        width: 100%
                    }

                        .s2 .info2 .item .box .pic .red {
                            margin: 0 0 20px
                        }

                        .s2 .info2 .item .box .pic .imgwrap {
                            margin-bottom: 20px
                        }

                            .s2 .info2 .item .box .pic .imgwrap img {
                                height: auto
                            }

                    .s2 .info2 .item .box .txt {
                        width: 100%
                    }

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

            .s2 .info3 .box .imgwrap {
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content
            }



            .s2 .info3 .box .txt {
                width: 100%
            }

                .s2 .info3 .box .txt .f16:first-child {
                    margin-bottom: 10px
                }

        .s2 .info3 .certificate {
            padding-bottom: 20px;
            width: 100% !important;
        }

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

            .s2 .info4 .box .imgwrap {
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content
            }

                .s2 .info4 .box .imgwrap img {
                    width: 100%;
                }

            .s2 .info4 .box .txt {
                width: 100%
            }

                .s2 .info4 .box .txt .f16:first-child {
                    margin-bottom: 10px
                }

        .s2 .info4 .certificate {
            padding-bottom: 20px
        }
}

.s3 {
    margin-bottom: 200px
}

    .s3 .stitle {
        text-align: center;
        margin-bottom: 30px
    }

    .s3 .info {
        position: relative
    }

        .s3 .info .bluebg {
            width: 56%;
            background-color: #0c3576;
            color: white;
            padding: 40px 50px 120px;
            line-height: 30px;
            position: relative
        }

            .s3 .info .bluebg .yelbg {
                background-color: #f2ca36;
                color: black;
                line-height: 30px;
                padding: 10px 20px;
                position: absolute;
                width: 100%;
                left: 36px;
                bottom: -30px
            }

        .s3 .info .imgwrap1 {
            width: 47%;
            position: absolute;
            right: 0;
            bottom: -30px
        }

        .s3 .info .imgwrap2 {
            position: absolute;
            left: 47%;
            bottom: -75px;
            -webkit-box-shadow: 2.2px 8.7px 22.7px 4.3px white;
            box-shadow: 2.2px 8.7px 22.7px 4.3px white
        }

@media (max-width:991px) {
    .s3 .info {
        position: relative
    }

        .s3 .info .bluebg {
            width: 100%;
            padding: 0;
        }

            .s3 .info .bluebg > div:first-child {
                padding: 50px;
            }

            .s3 .info .bluebg .yelbg {
                width: 100%;
                left: 0;
                bottom: 0;
                padding: 10px 50px;
                position: unset;
            }

        .s3 .info .imgwrap1 {
            width: 100%;
            position: relative;
            right: 0;
            bottom: -30px
        }

        .s3 .info .imgwrap2 {
            left: 60%
        }
}

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

        .s3 .info .imgwrap1 {
            text-align: center
        }

        .s3 .info .imgwrap2 {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            text-align: center
        }
}

.s4 > .abgne_tab > ul:first-child {
    width: 48%;
    margin: auto;
}

.clickshine {
    color: #FFC000 !important;
}

@media (max-width:991px) {
    .s4 > .abgne_tab > ul:first-child {
        width: 100%;
    }
}