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

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

.s1 {
    margin-bottom: 88px
}

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

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

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

.s2 {
    margin-bottom: 98px
}

    .s2 .scontent {
        margin-bottom: 53px
    }

    .s2 .form {
        overflow-x: auto
    }

    .s2 .form-detail {
        /*width: 1168px*/
    }

    .s2 .form-content ul, .s2 .form-title ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        color: black
    }

        .s2 .form-content ul .l1, .s2 .form-title ul .l1 {
            width: 14.5%;
            min-width: 103px;
        }

        .s2 .form-content ul .l2, .s2 .form-title ul .l2 {
            width: 48%
        }

        .s2 .form-content ul .l3, .s2 .form-title ul .l3 {
            width: 13.5%
        }

        .s2 .form-content ul .l4, .s2 .form-title ul .l4 {
            width: 13.5%
        }

        .s2 .form-content ul .l5, .s2 .form-title ul .l5 {
            width: 13.5%
        }

    .s2 .form-title {
        background-color: #fdd13a;
        padding: 9px 20px;
        font-size: 1.125rem
    }

    .s2 .form-content {
        padding: 18px 20px;
        font-size: 1rem;
        border-bottom: 1px solid #cdcdcd
    }

        .s2 .form-content li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .s2 .form-content .l1 {
            letter-spacing: 0;
            line-height: normal
        }

            .s2 .form-content .l1 i {
                color: #636363
            }

        .s2 .form-content .l2 .dotlist:before {
            background-color: #fdd13a
        }

        .s2 .form-content .l3, .s2 .form-content .l4, .s2 .form-content .l5 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -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
        }

            .s2 .form-content .l3 img, .s2 .form-content .l4 img, .s2 .form-content .l5 img {
                margin-bottom: 10px
            }

            .s2 .form-content .l3 span, .s2 .form-content .l4 span, .s2 .form-content .l5 span {
                height: 1em;
                color: #bb7d10;
                text-align:center;
            }

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

.s3 {
    margin-bottom: 93px
}

    .s3 .form {
        overflow-x: auto
    }

    .s3 .form-detail {
        width: 1168px
    }

    .s3 .form-content:nth-child(3) ul > .l3 > div:nth-child(3) {
        margin: 0 2% 0 9%;
    }

        .s3 .form-content:nth-child(3) ul > .l3 > div:nth-child(3) > table {
            width: 100%;
            border: 2px solid #3D7296;
            border-collapse: collapse;
        }

            .s3 .form-content:nth-child(3) ul > .l3 > div:nth-child(3) > table td {
                border: 2px solid #3D7296;
            }

            .s3 .form-content:nth-child(3) ul > .l3 > div:nth-child(3) > table tr:first-child,
            .s3 .form-content:nth-child(3) ul > .l3 > div:nth-child(3) > table tr td:not(:last-child) {
                text-align: center;
            }

    .s3 .form-content ul, .s3 .form-title ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        color: black
    }

        .s3 .form-content ul .l1, .s3 .form-title ul .l1 {
            width: 12.5%;
            text-align: center
        }

        .s3 .form-content ul .l2, .s3 .form-title ul .l2 {
            width: 35.5%
        }

        .s3 .form-content ul .l3, .s3 .form-title ul .l3 {
            width: 69%
        }

    .s3 .form-title {
        background-color: #3c9bdd;
        padding: 9px 40px 9px 10px;
        font-size: 1rem;
        text-align: center;
    }

    .s3 .salary {
        text-indent: -100px;
        width: 81%;
        margin-left: 95px;
        margin-top: 10px;
        text-align: justify;
    }

    .s3 .salary2 {
        text-indent: -100px;
        margin-left: 95px;
        text-align: justify;
        width: 81%;
    }

    .s3 .hint {
        text-indent: -127px;
        margin-left: 127px;
        width: 75.5%;
        text-align: justify;
    }

    .s3 .hint2 {
        text-indent: -165px;
        margin-left: 164px;
        width: 69.5%;
        text-align: justify;
    }

    .s3 .form-title ul {
        color: white
    }

    .s3 .form-content {
        padding: 24px 40px 24px 10px;
        font-size: 1rem
    }

        .s3 .form-content:not(:last-child) {
            border-bottom: 3px solid white
        }

        .s3 .form-content li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .s3 .form-content .l1 {
            line-height: 30px
        }

        .s3 .form-content .l2 {
            padding: 0 28px
        }

        .s3 .form-content .l3 {
            padding: 0 20px
        }

        .s3 .form-content:nth-child(2n) {
            background-color: #ecf2fc
        }

            .s3 .form-content:nth-child(2n) .l1 {
                color: #183b75
            }

            .s3 .form-content:nth-child(2n) .dotlist:before {
                background-color: #3D7296
            }

        .s3 .form-content:nth-child(odd) {
            background-color: #f3fbff
        }

            .s3 .form-content:nth-child(odd) .l1 {
                color: #3d7296
            }

            .s3 .form-content:nth-child(odd) .dotlist:before {
                background-color: #3d7296
            }

    .s3 .dotlist {
        line-height: 25px
    }

    .s3 .txt {
        display: flex;
    }

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

.s4 {
    margin-bottom: 93px
}

    .s4 .scontent a {
        color: #636363
    }

    .s4 .form {
        overflow-x: auto;
        overflow-y: auto
    }

    .s4 .form-detail {
        max-width: 1150px;
        height: 600px
    }

    .s4 .form-content ul, .s4 .form-title ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        color: black
    }

        .s4 .form-content ul .l1, .s4 .form-title ul .l1 {
            width: 7.9%
        }

        .s4 .form-content ul .l2, .s4 .form-title ul .l2 {
            width: 6.8%
        }

        .s4 .form-content ul .l3, .s4 .form-title ul .l3 {
            width: 10.3%
        }

        .s4 .form-content ul .l4, .s4 .form-title ul .l4 {
            width: 31%
        }

        .s4 .form-content ul .l5, .s4 .form-title ul .l5 {
            width: 38%;
            white-space: nowrap
        }

        .s4 .form-content ul .l6, .s4 .form-title ul .l6 {
            width: 6%
        }

    .s4 .form-title {
        background-color: #de7f22;
        padding: 9px 14px;
        font-size: 0.875rem
    }

        .s4 .form-title ul {
            color: white
        }

    .s4 .form-content {
        padding: 0px 14px;
        font-size: 0.875rem;
        letter-spacing: 0;
        border-bottom: 1px solid #6d6d6d
    }

        .s4 .form-content li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .s4 .form-content .l3 div, .s4 .form-content .l4 div, .s4 .form-content .l5 div, .s4 .form-content .l6 div {
            padding: 12px 0
        }

            .s4 .form-content .l3 div:not(:last-child), .s4 .form-content .l4 div:not(:last-child), .s4 .form-content .l5 div:not(:last-child), .s4 .form-content .l6 div:not(:last-child) {
                border-bottom: 1px solid #6d6d6d
            }

        .s4 .form-content .l6 {
            text-align: right;
            padding-right: 10px
        }

        .s4 .form-content:nth-child(odd) {
            background-color: #fff3e7
        }

        .s4 .form-content:nth-child(2n) {
            background-color: #ececec
        }

@media (max-width:1199px) {
    .s4 .form-detail {
        min-width: 1150px
    }
}

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

.s5 {
    margin-bottom: 190px
}

    .s5 .form {
        overflow-x: auto
    }

    .s5 .form-detail {
        width: 1168px;
        height: 710px;
        position: relative
    }

        .s5 .form-detail img {
            position: absolute;
            top: 111px;
            right: 0px;
            z-index: -1
        }

        .s5 .form-detail #d02, .s5 .form-detail #d03 {
            opacity: 0;
            -webkit-transition: 1s;
            transition: 1s
        }

        .s5 .form-detail.v2 #d02 {
            opacity: 1
        }

        .s5 .form-detail.v3 #d03 {
            opacity: 1
        }

    .s5 .form-content ul, .s5 .form-title ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: black
    }

        .s5 .form-title ul .l1 {
            width: 30.5%
        }


        .s5 .form-content ul .l1 {
            width: 29%
        }

        .s5 .form-content ul li:not(:first-child) {
            width: 8.5%;
            text-align: center;
        }

        .s5 .form-content ul .l2 {
            color: #1b539c
        }

        .s5 .form-title ul .l2 {
            width: 25%;
        }

        .s5 .form-content ul .l3 {
            color: #7e2424
        }

        .s5 .form-title ul .l3 {
            width: 25.5%;
        }

        .s5 .form-content ul .l4 {
            color: #053d07
        }

        .s5 .form-title ul .l4 {
            width: 17%;
        }

    .s5 .form-title {
        font-size: 1.125rem;
        padding: 30px 0
    }

        .s5 .form-title .l2, .s5 .form-title .l3, .s5 .form-title .l4 {
            position: relative
        }

            .s5 .form-title .l2:after, .s5 .form-title .l3:after, .s5 .form-title .l4:after {
                content: "";
                width: 12px;
                height: 12px;
                background-color: #1b539c;
                border-radius: 50%;
                display: block;
                position: absolute;
                left: 25px;
                bottom: -16px
            }

            .s5 .form-title .l3:after {
                background-color: #7e2424
            }

            .s5 .form-title .l4:after {
                background-color: #053d07
            }

            .s5 .form-title .l2:before, .s5 .form-title .l3:before {
                content: "";
                width: 334px;
                height: 3px;
                background-color: #e6e6e6;
                display: block;
                position: absolute;
                left: 25px;
                bottom: -11px
            }

    .s5 .form-content {
        font-size: 1.375rem;
        padding: 22px 0
    }

        .s5 .form-content .l1 {
            font-size: 1.125rem
        }

        .s5 .form-content .l2, .s5 .form-content .l3, .s5 .form-content .l4 {
            font-weight: 500
        }

        .s5 .form-content:not(:last-child) {
            margin-bottom: 10px
        }

        .s5 .form-content:nth-child(5) .l1 {
            color: #597bd3
        }

        .s5 .form-content:nth-child(6) .l1 {
            color: #e69363
        }

        .s5 .form-content:nth-child(7) .l1 {
            color: #7db442
        }

        .s5 .form-content:nth-child(8) .l1 {
            color: #a86bdc
        }

        .s5 .form-content:nth-child(9) .l1 {
            color: #e87490
        }

        .s5 .form-content:nth-child(10) .l1 {
            color: #d39929
        }

        .s5 .form-content:nth-child(11) .l1 {
            color: #ecc038
        }

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