@charset "UTF-8";
/*===========================================
學會簡介
===========================================*/

/*-------------------------------------------
成立緣由與宗旨
-------------------------------------------*/
.purpose{
    padding:0 5%;
}
    .purpose p{
        text-indent:2em;
        line-height:1.7;
    }
    .purpose .slogan{
        background-color:#fff;
        margin:40px auto;
        padding:40px 30px;
        position:relative;
        color:var(--main-color);
        font-size:1.5rem;
        line-height:1.5;
        text-align:center;
    }
        .purpose .slogan i{
            display:inline-block;
            color:#333;
            font-style:normal;
            font-size:3rem;
            line-height:1;
            position:absolute;
        }
        .purpose .slogan i:first-of-type{
            top:-10px; left:20px;
        }
        .purpose .slogan i:last-of-type{
            bottom:-35px; right:20px;
        }
@media screen and (max-width:992px){
    .purpose .slogan{
        font-size:1.25rem;
        text-align:left;
    }
}
@media screen and (max-width:576px){
    .purpose .slogan{
        font-size:1.125rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .purpose{
        padding:0;
    }
        .purpose .slogan{
            margin-left:-15px; margin-right:-15px;
            padding-left:15px; padding-right:15px;
        }
}

/*-------------------------------------------
組織章程
-------------------------------------------*/
.constitution{
    position:relative;
    padding-top:10px;
}
    .constitution__chapter{
        position:relative;
        padding-left:12em;
        min-height:2em;
    }
        .constitution__chapter .partTitle{
            margin-top:0;
            position:absolute; left:0;
        }
        .regulation__item{
            margin-bottom:1em;
            position:relative;
            padding-left:6em;
            min-height:1.5em;
        }
        .regulation__item:last-of-type{
            margin-bottom:0;
        }
            .regulation__item h4{
                margin:0;
                color:#111;
                font-size:1rem;
                position:absolute; left:0;
            }
            .regulation__item ol{
                list-style-type:trad-chinese-informal;
                margin:0;
                padding-left:2em;
            }
            .regulation__item p{
                margin:.5em 0;
            }
@media screen and (max-width:992px){
    .constitution__chapter{
        padding-left:0;
    }
        .constitution__chapter .partTitle{
            position:relative;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .regulation__item{
        font-size:.875rem;
    }
        .regulation__item h4{
            font-size:.875rem;
        }
}
@media screen and (max-width:375px){/* SE, iX, XS, i11 Pro, i13 Mini, i6, i7, i8 */
    .regulation__item{
        padding-left:0;
    }
        .regulation__item h4{
            font-size:1rem;
            position:relative;
        }
}

/*-------------------------------------------
學會成立過程
-------------------------------------------*/
.history dl{
    margin:0;
    padding:0 5%;
    display:flex;
    flex-wrap:wrap;
}
    .history dt{
        flex:0 0 50%;
        padding:30px 50px 30px 0;
        position:relative;
        color:var(--main-color);
        text-align:right;
        transition:.3s;
    }
    .history dt:nth-of-type(odd){
        background-color:#fff;
    }
        .history dt::before{
            content:"";
            display:inline-block;
            background-color:#fff;
            box-shadow:0 0 0 3px var(--main-color);
            border-radius:50%;
            width:9px;
            height:9px;
            position:absolute; top:37px; right:-5px;
            transition:.3s;
        }
    .history dd{
        flex:0 0 50%;
        border-left:1px solid rgba(0,0,0,.1);
        margin-left:0;
        padding:30px 30px 30px 50px;
        transition:.3s;
    }
    .history dd:nth-of-type(odd){
        background-color:#fff;
    }
@media screen and (max-width:992px){
    .history dl{
        padding:0;
    }
        .history dt{
            flex:0 0 30%;
            padding:20px 30px 20px 15px;
        }
            .history dt::before{
                width:7px;
                height:7px;
                top:28px; right:-4px;
            }
        .history dd{
            flex:0 0 70%;
            padding:20px 15px 20px 30px;
        }
}
@media screen and (max-width:736px){/* i6,i7,i8 Plus Landscape */
    .history dt strong{
        display:block;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .history dl{
        margin-left:-15px; margin-right:-15px;
    }
        .history dt{
            padding-left:10px; padding-right:15px;
        }
        .history dd{
            padding-left:20px;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    .history dt{
        font-size:.875rem;
        padding-right:10px;
    }
    .history dd{
        font-size:.875rem;
        padding-left:15px; padding-right:10px;
    }
}

/*-------------------------------------------
組織任務
-------------------------------------------*/
.mission__content{
    display:flex;
    justify-content:space-between;
}
    .mission__item{
        flex:0 0 30%;
        background-color:#fff;
        padding:20px 30px 30px;
    }
        .mission__item ul{
            padding-left:1.4em;
        }
            .mission__item li{
                margin-bottom:5px;
            }
@media screen and (max-width:1024px){
    .mission__item{
        flex-basis:32%;
    }
}
@media screen and (max-width:992px){
    .mission__content{
        flex-wrap:wrap;
    }
        .mission__item{
            flex-basis:100%;
            margin-top:15px;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .mission__item{
        padding:20px;
    }
}

/*-------------------------------------------
理監事介紹
-------------------------------------------*/
.roster__type{
    background-color:#fff;
    margin-top:15px;
    padding:30px 30px 30px 200px;
    position:relative;
}
.roster__type:first-of-type{
    margin-top:0;
}
    .roster__type .partTitle{
        margin-top:0;
        position:absolute; left:30px;
        font-size:1.5rem; font-weight:400;
    }
    .roster__list{
        flex:1;
        margin:0;
        padding:0;
    }
        .roster__list li{
            display:flex;
            border-bottom:1px dotted rgba(0,0,0,.1);
            position:relative;
            padding-bottom:10px;
            margin-bottom:10px;
        }
            .roster__name{
                color:#000;
                font-size:1.125rem;
                line-height:1;
                flex:0 0 5em;
            }
            .roster__job{
                color:#666;
                line-height:1.3;
                flex:1;
            }
    .roster__type .explanation{
        font-size:.75rem;
        opacity:.65;
    }
@media screen and (max-width:1024px){
    .roster__type{
        padding-left:160px;
    }
        .roster__job{
            font-size:.875rem;
        }
}
@media screen and (max-width:576px){
    .roster__type{
        padding-left:30px;
    }
        .roster__type .partTitle{
            position:relative; left:auto;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .roster__type{
        padding:20px;
    }
        .roster__name{
            font-size:1rem;
            flex:0 0 5em;
        }
        .roster__job{
            
        }
}

/*-------------------------------------------
委員會任務
-------------------------------------------*/
.committee__mission{
    margin:0;
    padding-left:1.4em;
}
    .committee__mission li{
        padding-bottom:5px;
    }
    .committee__mission li:last-child{
        padding-bottom:0;
    }

/*-------------------------------------------
委員會編制
-------------------------------------------*/
.committee__type{
    background-color:#fff;
    margin-top:15px;
    padding:30px 30px 30px 350px;
    position:relative;
}
.committee__type:first-of-type{
    margin-top:0;
}
    .committee__type .partTitle{
        margin-top:0;
        position:absolute; left:30px;
        font-size:1.5rem;
    }
    .committee__roster{
        margin:0;
        position:relative;
    }
        .committee__roster .smallTitle{
            margin-top:0;
            position:absolute; left:0;
        }
        .committee__list{
            border-bottom:1px dotted rgba(0,0,0,.1);
            padding-left:150px; padding-bottom:10px;
            margin-left:0; margin-bottom:10px;
        }
            .committee__list ul{
                list-style:none;
                margin:0 -1.5em 0 0;
                padding:0;
                display:flex;
                flex-wrap:wrap;
            }
                .committee__list li{
                    flex:0 0 auto;
                    padding-top:2px; padding-right:1.5em;
                    line-height:1.3;
                }
                    .committee__list sup{
                        color:#777;
                        font-size:.75rem;
                    }
    .committee__type .explanation{
        font-size:.75rem;
        opacity:.65;
    }
@media screen and (max-width:1024px){
    .committee__type{
        padding-left:280px;
    }
        .committee__type .partTitle span{
            display:block;
            font-size:.75em;
        }
            .committee__list:last-of-type li{
                padding-bottom:5px;
            }
}
@media screen and (max-width:992px){
    .committee__type{
        padding-left:240px;
    }
        .committee__type .partTitle{
            font-size:1.25rem;
        }
        .committee__list{
            padding-left:130px;
        }
            .committee__list li{
                flex-basis:33.3333%;
                padding-right:.75em;
                white-space:nowrap;
            }
}
@media screen and (max-width:576px){
    .committee__type{
        padding-left:30px;
    }
        .committee__type .partTitle{
            position:relative; left:auto;
        }
            .committee__type .partTitle span{
                display:inline;
                font-size:1.125rem;
            }
            .committee__roster .smallTitle{
                font-size:1rem;
            }
            .committee__list{
                padding-left:100px;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .committee__type{
        padding:20px;
    }
        .committee__list sup{
            font-size:.65rem;
        }
}
@media screen and (max-width:360px){/* i12 Mini, Xiaomi 2S */
    .committee__type{
        padding:20px 15px;
    }
        .committee__roster .smallTitle{
            font-size:4.125vw;
        }
        .committee__list{
            font-size:4vw;
        }
}

/*-------------------------------------------
秘書處
-------------------------------------------*/