@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: 1168px
    }

        .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: 11%;
    }

    .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: 26px 22px 7px;
    }

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

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

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

                .s2 .info1 .left .imgwrap img {
                    margin-right: 10px;
                    width: 89px;
                }

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

            .s2 .info1 .right .imgwrap img {
                width: 89px;
                height: 146px;
            }

                .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: 450px;
                }

                .s2 .info2 .item .box .txt {
                    width: 70%;
                    padding: 2%;
                    background-color: #F2F7FC;
                }

                .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 .across {
        display: block !important;
    }

        .s2 .across .item {
            width: 100% !important;
        }

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

    .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;
        /*display:flex;*/
        padding: 0 23px
    }

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

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

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

    .s2 .info3 .mb33 div:nth-child(2) > div:first-child, .s2 .info3 .mb33 div:nth-child(2) > div:nth-child(3), .s2 .info3 .mb33 div:nth-child(2) > div:nth-child(5), .s2 .info3 .mb33 div:nth-child(4) > div:first-child, .s2 .info3 .mb33 div:nth-child(4) > div:nth-child(3) {
        justify-content: space-between;
    }

    .s2 .info3 .mb33:first-child > div:nth-child(2) > div > div:first-child, .s2 .info3 .mb33:first-child > div:nth-child(2) .d-flex > div:first-child, .s2 .info3 .mb33:first-child > div:nth-child(4) .d-flex > div:first-child, .s2 .info3 .mb33:nth-child(2) > 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(4) .d-flex > div:first-child {
        width: 25%;
    }
    .s2 .info3 .mb33:first-child > div:nth-child(2) > div > div:nth-child(2), .s2 .info3 .mb33:first-child > div:nth-child(4) .d-flex > div:nth-child(2), .s2 .info3 .mb33:nth-child(2) > div:nth-child(2) > div > div:nth-child(2), .s2 .info3 .mb33:nth-child(2) > div:nth-child(4) .d-flex > div:nth-child(2), .s2 .info3 .mb33:nth-child(2) > div:nth-child(6) .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 .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;
            color: #636363;
        }

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

    .s2 .info3 .mb40 {
        margin-bottom: 40px;
    }

    .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: 0 20px;
    }

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

        .s2 .info3 .item .new3 .f16-2 {
            width: 30%;
            min-width: 108px;
        }

    .s2 .info3 .item .certificate {
        justify-content: space-between;
        margin-bottom: 3%;
    }

    .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: 100%;
    border: 3px solid #ffd800;
    border-radius: 15px
}

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

#tab1 .s2:nth-child(1) .item {
    width: 32.5%;
}

#tab1 .s2:is(:nth-child(2), :nth-child(3), :nth-child(4)) .item {
    width: 99.5%;
}

#tab1 .s2:nth-child(1) .info4 > .d-flex > .item > .f18 {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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;
    padding: 0 20px
}

    .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;
}

.s2 .info4 .lab-certification-card .f18 {
    margin-bottom: 0;
    padding: 10px 15px;
    font-size: 1.25rem;
}

.s2 .info4 .lab-certification-box {
    padding: 20px 18px 20px;
}

.s2 .info4 .lab-certification-layout {
    display: flex;
    gap: 10px;
    min-width: 900px;
    align-items: flex-start;
}

.s2 .info4 .lab-main-photo {
    flex: 1 1 65%;
}

    .s2 .info4 .lab-main-photo img {
        display: block;
        width: 100%;
    }

.s2 .info4 .lab-awards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    flex: 0 0 34%;
}

.s2 .info4 .lab-award .imgwrap {
    display: block;
    width: 100%;
    margin: 0;
}

    .s2 .info4 .lab-award .imgwrap img {
        display: block;
        width: 100%;
        height: 170px;
        object-fit: contain;
    }

.s2 .info4 .lab-award .f16 {
    color: black;
    /*font-weight: 700;*/
    line-height: 20px;
    margin-top: 8px;
    text-align: center;
}
@media (max-width:1360px) {
    .s2 .timeline-responsive{
        overflow-y:auto;
    }
}
    @media (max-width:991px) {
        .s2 .info2 {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column
        }

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

        .s2 .info4 > .d-flex {
            flex-wrap: wrap;
        }

        .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%;
                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
        }

            .s2 .info3 .item .certificate {
                display: block;
            }

            .s2 .info3 .item .new3 .f16-2 {
                width: 100%;
            }

            .s2 .info3 .item .new3 .f16-1 {
                width: 100%;
            }

            .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 .imgwrap img {
                        /*width: 147px*/
                    }

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

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

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

            .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: 270px
                    }

                .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 div {
                width: 100% !important;
            }


    @media (max-width:991px) {
        .s3 .info .bluebg {
            width: 100% !important;
        }

        .s3 .info {
            position: relative
        }

            .s3 .info > div:first-child {
                overflow-x: auto;
            }

            .s3 .info .bluebg {
                width: 100%;
                /*min-width:711px;*/
                padding: 0;
            }

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

                .s3 .info .bluebg .yelbg {
                    width: 100%;
                    left: 0;
                    bottom: -24px;
                    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
            }
    }

    .d-flex {
        display: flex;
    }

    .white-nowrap {
        white-space: nowrap;
    }

    .clickshine {
        color: #FFC000 !important;
    }

    .s4 > .abgne_tab > div > ul:first-child {
        width: 100%;
        margin: auto;
        margin-bottom: 30px;
    }

    @media (max-width:991px) {
        .s4 > .abgne_tab > div > ul:first-child {
            width: 100%;
            /*min-width: 567px;*/
            flex-direction: column;
            text-align: left !important;
        }
    }