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

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

    .s1 .scontent:first-child {
        margin-bottom: 44px
    }

    .s1 .scontent:last-child {
        margin-bottom: 23px
    }

    .s1 .stitle {
        margin-bottom: 33px
    }

    .s1 .pdfdownload {
        font-size: 0.875rem;
        font-weight: 400;
        color: #1a3c76;
        height: 48px;
        line-height: 48px;
        display: inline-block;
        background: url(../image/01corpGov/pdf.png) left/37px no-repeat;
        padding-left: 53px;
        -webkit-transition: 0.4s ease;
        transition: 0.4s ease
    }

@media (min-width:768px) {
    .s1 .pdfdownload:hover {
        background: url(../image/01corpGov/pdf_hover.png) left/37px no-repeat
    }
}

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

    .s1 .pdfdownload {
        line-height: normal
    }
}

.s2 {
    margin-bottom: 50px
}

    .s2 .d-flex {
        display: flex;
    }

        .s2 .d-flex > div:first-child {
            white-space: nowrap;
        }

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

    .s2 .container .scontent > div:nth-child(2) .content-wrap .l2 .d-flex {
        width: 188px;
    }

    .s2 .container .scontent > div:nth-child(3) .content-wrap .l2 .d-flex {
        width: 165px;
    }

    .s2 .content .left {
        width: 49%
    }

    .s2 .content .right {
        width: 49%
    }

    .s2 .table-container {
        max-height: 636px;
        overflow-y: auto;
        overflow-x: hidden !important;
        border: 1px solid #ddd;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .s2 .table-title {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .s2 .form .form-cate {
        color: white;
        padding: 6px 0;
        text-align: center
    }

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

        .s2 .form .form-content ul li, .s2 .form .form-title ul li {
            line-height: 1.65
        }

        .s2 .form .form-content ul .l1, .s2 .form .form-title ul .l1 {
            width: 30%;
            padding-left: 30px;
            padding-right: 20px
        }

        .s2 .form .form-content ul .l2, .s2 .form .form-title ul .l2 {
            width: 70%;
            padding-left: 10px;
            padding-right: 10px
        }

    .s2 .form .form-title {
        pointer-events: none;
        text-align: center
    }

        .s2 .form .form-title li {
            padding-top: 5px;
            padding-bottom: 5px
        }

        .s2 .form .form-title .l2 {
            position: relative
        }

        /*            .s2 .form .form-title .l2:after {
                content: "";
                width: 15px;
                height: 15px;
                border-right: 1px solid #636363;
                border-bottom: 1px solid #636363;
                display: none;
                position: absolute;
                right: 20px;
                top: 7px;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg)
            }*/

        .s2 .form .form-title.active .l2:after {
            top: 15px;
            -webkit-transform: rotate(45deg) scale(-1);
            transform: rotate(45deg) scale(-1)
        }

    .s2 .form .form-content li {
        padding-top: 9px;
        padding-bottom: 18px
    }

    /* .s2 .form .form-cate, */ .s2 .form .form-content /* .s2 .form .form-title */ {
        margin-bottom: 7px
    }

    .s2 .form .pdlist {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .s2 .form .pdlist span:first-child {
            /*width: 6%;*/
            margin-right: 5px;
            /*white-space: nowrap;*/
        }

        .s2 .form .pdlist span:nth-child(2) {
            width: 94%
        }

    .s2 .blue .form-cate {
        background-color: #3f5efd
    }

    .s2 .blue .form-title {
        background-color: #e3eaff
    }

    .s2 .blue .form-content {
        background-color: #cfdaf8
    }

    .s2 .green .form-cate {
        background-color: #39b629
    }

    .s2 .green .form-title {
        background-color: #eafae8
    }

    .s2 table {
        text-align: center;
        border-collapse: collapse;
        color: black;
        /* font-weight: 500;*/
    }

    .s2 .green .form-content {
        background-color: #ddf0da
    }

    .s2 .orange .form-cate {
        background-color: #ff7632
    }

    .s2 .orange .form-title {
        background-color: #ffeae0
    }

    .s2 .orange .form-content {
        background-color: #fdd9c7
    }
    .s2 table:first-child tr:nth-child(2) td:first-child, .s2 table:first-child tr:nth-child(3) td:first-child, .s2 table:first-child tr:nth-child(2) td:nth-child(2), .s2 table:first-child tr:nth-child(4) td:first-child, .s2 table:first-child tr:nth-child(5) td:first-child, .s2 table:first-child tr:nth-child(6) td:first-child {
        color: #5887FF;
    }
    .s2 table tr:not(:nth-of-type(1)) td:not(:nth-of-type(1)) {
        text-align: justify;
    }
    .s2 table:first-child tr:nth-child(2) td, .s2 table:first-child tr:nth-child(3) td, .s2 table:first-child tr:nth-child(4) td, .s2 table:first-child tr:nth-child(5) td, .s2 table:first-child tr:nth-child(6) td {
        background-color: #5887da30;
    }
    .s2 .table-container table tr td:nth-child(2) {
        /*padding-bottom: 15px;*/
    }
    .s2 table tr:not(:nth-of-type(1)) td {
        padding: 0 20px;
        /*background-color: #8cc63f45;*/
    }
    .s2 table:first-child tr:nth-child(7) td:first-child, .s2 table:first-child tr:nth-child(7) td:nth-child(2) {
        color: #8CC63F;
    }
    .s2 table tr:not(:nth-of-type(1)) td {
        padding: 0 20px;
        background-color: #8cc63f45;
    }
    .s2 table:first-child tr:nth-child(8) td:first-child, .s2 table:first-child tr:nth-child(8) td:nth-child(2), .s2 table:first-child tr:nth-child(9) td:first-child {
        color: #FF6600;
    }
    .s2 table:first-child tr:nth-child(2) td:nth-child(3) .dotlist:before, .s2 table:first-child tr:nth-child(2) td:nth-child(4) .dotlist:before, .s2 table:first-child tr:nth-child(2) td:nth-child(5) .dotlist:before, .s2 .container > div:nth-child(3) table tr:nth-child(3) td:nth-child(4) .dotlist:before, .s2 table:first-child tr:nth-child(3) td:nth-child(3) .dotlist:before, .s2 table:first-child tr:nth-child(3) td:nth-child(5) .dotlist:before, .s2 table:first-child tr:nth-child(3) td:nth-child(2) .dotlist:before, .s2 table:first-child tr:nth-child(4) td:nth-child(2) .dotlist:before, .s2 table:first-child tr:nth-child(5) td:nth-child(2) .dotlist:before, .s2 table:first-child tr:nth-child(6) td:nth-child(2) .dotlist:before {
        background-color: #3B6BC1;
    }
    .s2 table:first-child tr:nth-child(8) td:first-child, .s2 table:first-child tr:nth-child(8) td:nth-child(2), .s2 table:first-child tr:nth-child(8) td:nth-child(3), .s2 table:first-child tr:nth-child(9) td:first-child, .s2 table:first-child tr:nth-child(9) td:nth-child(2), .s2 table:first-child tr:nth-child(9) td:nth-child(3) {
        background-color: #FEECE1;
    }
        .s2 table:first-child tr:nth-child(8) td:nth-child(3) .dotlist:before, .s2 table:first-child tr:nth-child(9) td:nth-child(2) .dotlist:before {
            background-color: #FF732D;
        }
        @media (max-width:991px) {
            .s2 .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

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

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

    .s2 .form .form-title {
        cursor: pointer;
        pointer-events: inherit
    }

        .s2 .form .form-title .l2:after {
            display: block
        }
}

@media (max-width:767px) {
    .s2 .form .form-content ul .l1, .s2 .form .form-title ul .l1 {
        padding-left: 10px;
        padding-right: 10px
    }
}

.s3 {
    margin-bottom: 50px
}

    .s3 .stitle {
        margin-bottom: 33px
    }

    .s3 .imgwrap {
        overflow-x: auto
    }

        .s3 .imgwrap img {
            max-width: 1168px
        }

    .s3 .form {
        overflow-x: auto
    }

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

        .s3 .form .form-content ul, .s3 .form .form-title ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 0 20px
        }

            .s3 .form .form-content ul .l1, .s3 .form .form-title ul .l1 {
                width: 11%
            }

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

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

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

            .s3 .form .form-content ul .l4, .s3 .form .form-title ul .l4 {
                width: 5%
            }
.s2 table tr:first-child td:first-child {
    width: 12%;
    padding: 10px;
}
.s2 td {
    border-bottom: 3px solid white;
}
.s3 .form .form-title {
    padding: 5px 0;
    background-color: #e3eaff;
    color: #1a3c76;
    font-size: 1.125rem
}

        .s3 .form .form-content {
            padding: 14px 0 6px;
            line-height: 30px
        }

            .s3 .form .form-content:not(:last-child) {
                border-bottom: 1px solid #535353
            }

            .s3 .form .form-content .l3 {
                padding-right: 15px
            }

            .s3 .form .form-content .l4 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }
.s2 > .container > div:first-child table tr:first-child {
    background-color: #69A33B;
    color: white;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}
.s3 .form .pdfdownload {
    height: 48px;
    display: inline-block;
    background: url(../image/01corpGov/pdf.png) right/37px no-repeat;
    padding-left: 53px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease
}



@media (max-width:767px) {
    .s3 .imgwrap img {
        max-width: 100%
    }
}

@media (min-width:768px) {
    .s3 .form .pdfdownload:hover {
        background: url(../image/01corpGov/pdf_hover.png) right/37px no-repeat
    }
}


.s4 {
    margin-bottom: 62px
}

    .s4 .stitle {
        margin-bottom: 33px
    }

    .s4 .form {
        overflow-x: auto
    }

        .s4 .form .form-detail {
            width: 100%;
            min-width: 769px;
        }

        .s4 .form .form-content ul, .s4 .form .form-title ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 0 20px;
            min-width: 769px;
        }

            .s4 .form .form-content ul .l1, .s4 .form .form-title ul .l1 {
                width: 8%;
                min-width: 56px;
            }

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

            .s4 .form .form-content ul .l3-4, .s4 .form .form-title ul .l3-4 {
                /*width: 64%*/
            }

            .s4 .form .form-content ul .l3, .s4 .form .form-title ul .l3 {
                width: 82%;
                min-width: 582px;
            }

            .s4 .form .form-content ul .l4, .s4 .form .form-title ul .l4 {
                width: 5%;
                min-width: 35px;
            }

        .s4 .form .form-title {
            padding: 5px 0;
            background-color: #e3eaff;
            color: #1a3c76;
            font-size: 1.125rem
        }

        .s4 .form .form-content {
            padding: 14px 0 6px;
            line-height: 30px
        }

            .s4 .form .form-content:not(:last-child) {
                border-bottom: 1px solid #535353
            }

            .s4 .form .form-content .l3 {
                padding-right: 15px
            }

            .s4 .form .form-content .l4 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

        .s4 .form .pdfdownload {
            height: 48px;
            display: inline-block;
            background: url(../image/01corpGov/pdf.png) right/37px no-repeat;
            padding-left: 53px;
            -webkit-transition: 0.4s ease;
            transition: 0.4s ease
        }

@media (min-width:768px) {
    .s4 .form .pdfdownload:hover {
        background: url(../image/01corpGov/pdf_hover.png) right/37px no-repeat
    }
}

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