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

    .s1 .scontent {
        margin-bottom: 48px
    }

    .s1 .imgwrap {
        overflow-x: auto
    }

        .s1 .imgwrap img {
            width: 1168px;
            max-width: initial
        }

    .s1 .PSMProcessimg {
        background-image: url('../image/04society/d_table2023.png');
        width: 1168px;
        height: 383px;
    }

        .s1 .PSMProcessimg .dis-flex {
            margin-top: 16%;
            margin-left: -1%;
            color: black;
            font-weight: 700;
        }
    .s1 .x-scroll {
        overflow-x: auto;
    }
            .s1 .PSMProcessimg .dis-flex div:first-child {
                width: 25%;
                padding: 0 3%;
            }

            .s1 .PSMProcessimg .dis-flex div:nth-child(2) {
                width: 30%;
                padding-right: 3%;
            }

            .s1 .PSMProcessimg .dis-flex div:nth-child(3) {
                width:25%;
            }

            .s1 .PSMProcessimg .dis-flex div:last-child {
                width: 25%;
                padding-left: 4%;
            }


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

.s2 {
    margin-bottom: 95px
}

    .s2 ul li {
        border-radius: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        line-height: 30px;
        font-size: 1.125rem;
        margin-bottom: 20px
    }

        .s2 ul li .box {
            min-width: 126px
        }

    .s2 ul .box {
        border-radius: 12px;
        color: white;
        padding: 10px;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative
    }

        .s2 ul .box:after {
            content: "";
            width: 20px;
            height: 20px;
            -webkit-clip-path: polygon(0 100%,0 0,100% 50%);
            clip-path: polygon(0 100%,0 0,100% 50%);
            display: block;
            position: absolute;
            right: -20px
        }

    .s2 ul .txt {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 30px 40px
    }

    .s2 ul li:first-child {
        border-radius: 15px 15px 0 0;
        margin-bottom: 0;
        border: 2px solid #1e9947;
        border-bottom: none
    }

        .s2 ul li:first-child .box {
            border-radius: 12px 12px 0 0;
            background-color: #1e9947
        }

            .s2 ul li:first-child .box:after {
                background-color: #1e9947
            }

    .s2 ul li:nth-child(2) {
        border-radius: 0 0 15px 15px;
        border: 2px solid #31b45c
    }

        .s2 ul li:nth-child(2) .box {
            border-radius: 0 0 12px 12px;
            background-color: #31b45c
        }

            .s2 ul li:nth-child(2) .box:after {
                background-color: #31b45c
            }

        .s2 ul li:nth-child(2) .txt {
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start
        }

    .s2 ul li:nth-child(3) {
        border: 2px solid #ec316a
    }

        .s2 ul li:nth-child(3) .box {
            background-color: #ec316a
        }

            .s2 ul li:nth-child(3) .box:after {
                background-color: #ec316a
            }

    .s2 ul li:nth-child(4) {
        border: 2px solid #1894a0
    }

        .s2 ul li:nth-child(4) .box {
            background-color: #1894a0
        }

            .s2 ul li:nth-child(4) .box:after {
                background-color: #1894a0
            }

    .s2 ul li:nth-child(5) {
        border: 2px solid #eb6319
    }

        .s2 ul li:nth-child(5) .box {
            background-color: #eb6319
        }

            .s2 ul li:nth-child(5) .box:after {
                background-color: #eb6319
            }

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

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

        .s2 ul .box:after {
            -webkit-transform: rotate(90deg) translateY(-50%);
            transform: rotate(90deg) translateY(-50%);
            bottom: -20px;
            right: 50%
        }

        .s2 ul .txt {
            padding: 30px 20px
        }

        .s2 ul li:first-child {
            border-radius: 15px;
            margin-bottom: 20px;
            border-bottom: 2px solid #1e9947
        }

            .s2 ul li:first-child .box {
                border-radius: 12px
            }

        .s2 ul li:nth-child(2) {
            border-radius: 15px
        }

            .s2 ul li:nth-child(2) .box {
                border-radius: 12px
            }
}

.s3 {
    margin-bottom: 142px
}

    .s3 .tag {
        color: white;
        background-color: #204390;
        padding: 5px 12px;
        text-align: center;
        border-radius: 10.5px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-bottom: 26px
    }

        .s3 .tag.grey {
            background-color: #e6e6e6;
            color: #204390;
            padding: 11px 28px;
            border-radius: 23px
        }

    .s3 .imgwrap {
        /*margin-bottom: 50px;*/
        text-align: center
    }

        .s3 .imgwrap.m1 img {
            width: 50%
        }

        .s3 .imgwrap.m2 img {
            width: 500px;
            height: 480px;
            position: absolute;
            left: 32px;
            bottom: -92px;
            min-height: 480px;
            min-width: 500px;
        }

    .s3 .picwrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: space-evenly;
        /*flex-wrap: wrap;*/
    }

        .s3 .picwrap .imgwrap:first-child {
            /*margin-right: 25px*/
        }

        .s3 .picwrap .imgwrap {
            /*width: 40%*/
        }

            .s3 .picwrap .imgwrap img {
                /*width: 100%*/
            }

    .s3 .info {
        margin-bottom: 27px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        /*flex-wrap:wrap;*/
    }

        .s3 .info .imgwrap {
            /*margin-right: 4%*/
        }

        .s3 .info ul {
            width: 600px;
        }


        .s3 .info li:not(:last-child) {
            margin-bottom: 30px
        }

        .s3 .info .dotlist {
            letter-spacing: normal
        }

            .s3 .info .dotlist:before {
                width: 6px;
                height: 6px;
                top: 13px
            }

        .s3 .info li:first-child .dotlist:before {
            background-color: #f58b45
        }

        .s3 .info li:nth-child(2) .dotlist:before {
            background-color: #c21f63
        }

        .s3 .info li:nth-child(3) .dotlist:before {
            background-color: #5f6073
        }

        .s3 .info li:nth-child(4) .dotlist:before {
            background-color: #3dd3db
        }

        .s3 .info li:nth-child(5) .dotlist:before {
            background-color: #557ba6
        }

.dis-flex {
    display: flex;
    justify-content: space-between;
}
.d-flex{
    display:flex;
}
.white-nowrap{
    white-space:nowrap;
}

.s3 .titlenew {
    width: auto;
    height: auto;
    justify-content: left;
}

.s3 .newtitletext {
    margin-top: 4px;
    width: auto;
}

.s3 .italics {
    font-style: italic;
    margin-right:10px;
}

.s3 .onecontent {
    text-align: left;
    padding: 40px 0;
    font-size: 20px;
    line-height: 50px;
    color: white;
    background-color: #1f4e79;
    padding-left: 500px;
    padding-right: 80px;
    width: 1168px;
}
.s3 .infoNext08{
    width:50%;
    /*overflow-x:auto;*/
}
@media (max-width:767px) {
    .s3 {
        margin-bottom: 100px
    }

        .s3 .imgwrap {
            /*margin-bottom: 50px;*/
            width: 100% !important;
        }

            .s3 .imgwrap.m1 img {
                width: 100%
            }

        .s3 .picwrap {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

            .s3 .picwrap .imgwrap:first-child {
                margin-right: 0px
            }

            .s3 .picwrap .imgwrap {
                /*width: 49%*/
            }

        .s3 .info {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column
        }

            .s3 .info .imgwrap {
                margin-right: 0%;
                /*margin-bottom: 20px*/
            }

            .s3 .info ul {
                width: auto !important;
            }

            .s3 .info li:not(:last-child) {
                margin-bottom: 10px
            }

    .redword {
        color: red;
    }

    .s3 .cover img {
        /*max-width: none;*/
        /*width: 325px !important;*/
        width:100%;
    }



    .s3 .eight {
        /* padding: 6%;
        background-color: white !important;
        line-height: 71px;
        margin-left: -9px !important;*/
        /*max-width: 388px;*/
        line-height: 30px!important;
    }

    .s3 .mL {
        /*margin-left: 64px;*/
    }

    .s3 .twoall {
        /*min-width: 553px;
        min-height: 1130px;*/
    }

    .s3 .infoNext08{
        width:100%;
        margin-bottom:20px;
    }
}



.dotlist::before {
    background-color: white;
}

.dotlist1 {
    position: relative;
    padding-left: 15px;
    line-height: 30px;
}

    .dotlist1::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 12px;
        left: 0;
        background-color: #f79646;
    }

.s3 .orange {
    color: #f79646;
}

.s3 .newtwo {
    position: relative;
    top: -230px;
    margin: 0 9%;
}

.s3 .spacing {
    letter-spacing: 10px;
    margin-top: 90px;
    font-weight: 500;
}

.s3 .padtop {
    padding-top: 10px;
}

    .s3 .padtop ul {
        text-align: left;
        padding-left: 20px;
    }



.s3 .twoback {
    width: 100%;
    position: relative;
    margin-right: 20px;
}

.s3 .twoin {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: white;
}



.s3 .fourtext-1 {
    position: relative;
}

.s3 .fourtext-2 {
    position: relative;
    margin-left: 87px;
    margin-top: -5px;
}

.s3 .fourtext-3 {
    position: relative;
    margin-left: 59px;
    margin-top: 5px;
}

.s3 .fourtext-4 {
    position: relative;
    margin-left: -10px;
    margin-top: 6px;
}

.s3 .fourback {
    /*width: 25%;*/
    position: relative;
    /* width: 100px; */
    height: 325px;
    /* border: 1px solid; */
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 90px;
}

.s3 .fourin {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.s3 .fourimg {
    height: 300px;
    position: absolute;
    /*margin-top: -1.5%;*/
    margin-left: 6%;
}

.s3 .fourback img {
    width: 153px;
}

.s3 .four1pic {
    position: absolute;
    top: -88px;
    width: 85%;
    left: -15px;
    width: 184px;
}

.s3 .four2pic {
    position: absolute;
    top: -83px;
    width: 92%;
    left: -22px;
    width: 184px;
}

.s3 .four3pic {
    position: absolute;
    top: -84px;
    left: -20px;
    width: 92%;
    width: 184px;
}

.s3 .four4pic {
    position: absolute;
    top: -83px;
    left: -20px;
    width: 92%;
    width: 184px;
}

.s3 .twoin span {
    background-color: #5b9bd5;
    height: 48px;
    width: 375px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s3 .m2 {
    position: relative;
    margin-top: 69px;
    margin-bottom: 71px;
    max-height: 310px;
    width:1168px;
}

.s3 .cover {
    /*width: 500px;*/
    /*min-width:350px;*/
    /*height: 300px;*/
    position: relative;
}

    .s3 .cover:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow: 0 0 30px 5px #ffffff inset;
    }

    .s3 .cover img {
/*        width: 500px;
        height: 300px;
        display: block;*/
        margin-bottom: 20px;
    }

.s3 .eight {
    padding: 6%;
    background-color: #F5F5F5;
    line-height: 77px;
    /*margin-left: -47px;*/
    width: 48%;
}

.s3 .fourcontent {
    justify-content: left;
    border-bottom: solid #d9d9d9;
    margin-bottom: 1%;
}

.s3 .fourimg {
    height: 300px;
    position: absolute;
    /*margin-top: -2%;*/
    margin-left: 4%;
}

.s3 .fourdiv {
    margin-left: 35%;
    height: 300px;
    align-content: center;
}

    .s3 .fourdiv .fourcontent img {
        height: 60px;
        margin-bottom: -5px;
    }

    .s3 .fourdiv .fourcontent div {
        /*padding: 10px 0;*/
    }

.s3 .fourtwo {
    margin-top: 10px;
}

.s3 .margin14 {
    margin-top: 14px;
}

.s3 .three-visable {
    display: block;
}

.s3 .three-hide {
    display: none;
}


@media(max-width:1345px) {
    .s3 .fourdiv {
        font-size: 17px;
    }
    .s3 .eight{
/*        margin-left:0;*/
        /*width:100%;*/
    }

    .s3 .fourtext-2 {
        margin-top: -2px;
    }

    .s3 .fourtext-3 {
        margin-top: 7px;
    }
}

@media (max-width:990px) {

    .s3 .m2 {
        position: relative;
        margin-top: 69px;
        /*margin-bottom: 368px;*/
    }

    .s3 .onecontent {
/*        text-align: left;
        padding: 40px 0;
        font-size: 20px;
        line-height: 50px;
        color: white;
        background-color: #1f4e79;
        padding-left: 84px;
        padding-top: 364px;
        padding-right: 80px;
        width: 778px;*/
    }

    .s3 .imgwrap.m2 img {
/*        width: 500px;
        height: 480px;
        position: absolute;
        left: 177px;
        bottom: -92px;
        min-height: 480px;
        min-width: 500px;*/
    }


    .s3 .fourimg {
/*        height: 2.8%;
        margin-left: 0%;*/
    }

    .s3 .fourdiv {
        padding: 0;
        font-size: 14px;
    }

        .s3 .fourdiv .fourcontent div {
            padding: 0;
        }

        .s3 .fourdiv .fourcontent img {
            height: 45px;
        }

    /*
        .s3 .fourtext-1 {
            width: 50%;
        }

    .s3 .fourtext-2 {
        margin-top: -6px;
        margin-left: 57px;
    }

    .s3 .fourtext-3 {
        margin-top: -3px;
        margin-left: 37px;
    }

    .s3 .fourtext-4 {
        position: relative;
        margin-left: -10px;
        margin-top:0px;
    }
            */
    .s3 .fourtwo {
        /*margin-top: 0;*/
    }

    .s3 .margin0 {
        margin-top: 0;
    }

    .s3 .margin10 {
        margin-top: 10px;
    }

    .s3 .margin-21 {
        margin-top: -21px;
    }
}

@media (max-width:767px) {
    .s3 .fourback {
/*        position: relative;
        height: 425px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 90px;*/
    }

    .s3 .fourin {
/*        width: 200px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-left: 30px;
        margin-top: 20px;*/
    }

    .s3 .onecontent {
/*        text-align: left;
        padding: 40px 0;
        font-size: 20px;
        line-height: 50px;
        color: white;
        background-color: #1f4e79;
        padding-left: 16px;
        padding-top: 364px;
        padding-right: 80px;
        width: 673px;*/
    }

    .s3 .imgwrap.m2 img {
/*        width: 500px;
        height: 480px;
        position: absolute;
        left: 127px;
        bottom: -92px;
        min-height: 480px;
        min-width: 500px;*/
    }

    .s3 .fourimg {
/*        margin-left: 1%;
        height: 3%;
        max-width: 283px;
        max-height: 264px;*/
    }

    .s3 .fourdiv {
        /*font-size: 12px;*/
        margin-left: 31%;
        /*max-width: 435px;*/
    }

        .s3 .fourdiv .fourcontent img {
            height: 49px;
        }

        .s3 .fourdiv .fourcontent div {
            padding: 0;
            margin-bottom: -1%;
        }

    .s3 .fourcontent {
        margin-bottom: 2%;
    }

    .s3 .fourtwo {
        margin-top: 4px;
    }

    .s3 .margin-21 {
        margin-top: -10px;
    }

    .s3 .margin0 {
        margin-top: 10px;
    }

    .s3 .three-visable {
        display: none;
    }

    .s3 .three-hide {
        display: inline
    }
    .s3 .eight{
        width:100%;
    }
    /*
        .s3 .fourtext-1 {
            width: 50%;
        }

        .s3 .fourtext-2 {
            margin-top: -1px;
            margin-left: 46px;
        }

        .s3 .fourtext-3 {
            margin-top: 4px;
            margin-left: 33px;
        }

        .s3 .fourtext-4 {
            position: relative;
            margin-left: 12px;
            margin-top: 4px;
        
        }*/
}