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

/*-------------------------------------------
組織架構
-------------------------------------------*/
.organization{
    display:flex;
    flex-wrap:wrap;
}
    .organization__group{
        flex:1 1 33.33333%;
        padding-right:20px;
    }
        .organization__group h3{
            margin:0 0 15px;
            font-size:1.5rem;
            line-height:1;
            position:relative;
        }
            .organization__group h3::after{
                content:"";
                display:block;
                background-color:var(--primary-color);
                width:2em;
                height:2px;
                margin-top:10px;
            }
            .organization__group ul{
                list-style:none;
                margin:0;
                padding:0;
            }
                .organization__group li{
                    line-height:1.3;
                    padding-bottom:15px;
                }
                .organization__group li:last-child{
                    padding-bottom:0;
                }
                    .organization__group h4{
                        margin:0;
                        font-size:1.25rem;
                        line-height:1;
                        position:relative;
                        padding-left:15px;
                    }
                    .organization__rosters{
                        position:relative;
                        display:flex;
                        flex-wrap:wrap;
                        margin:10px 0 0;
                        padding-left:15px;
                        color:#333;
                    }
                        .organization__rosters span{
                            padding:0 20px 5px 12px;
                            position:relative;
                            white-space:nowrap;
                        }
                            .organization__rosters span::before{
                                content:"";
                                display:inline-block;
                                background-color:var(--text-color);
                                border-radius:50%;
                                width:5px;
                                height:5px;
                                position:absolute; top:7px; left:0;
                            }
                            .organization__rosters small{
                                font-size:.875rem;
                                opacity:.65;
                            }
.partner{
    display:flex;
    flex-wrap:wrap;
}
    .partner__group{
        flex:1 1 50%;
    }
        .partner__group h3{
            margin:0;
            font-size:1.5rem;
            line-height:1;
        }
            .partner__group ul{
                list-style:none;
                margin:15px 0 0;
                padding:0;
            }
                .partner__group li{
                    color:#333;
                    line-height:1.3;
                    padding-bottom:5px; padding-left:15px;
                    position:relative;
                }
                .partner__group li:last-child{
                    padding-bottom:0;
                }
                    .partner__group li::before{
                        content:"";
                        display:inline-block;
                        background-color:var(--text-color);
                        border-radius:50%;
                        width:5px;
                        height:5px;
                        position:absolute; top:7px; left:3px;
                    }
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .org__text .organization__group,
    .org__text .partner__group{
        flex-basis:100%;
        padding:20px; padding-left:130px;
        position:relative;
    }
    .org__text .partner__group{
        padding-left:180px;
    }
    .org__text .organization__group:nth-of-type(odd),
    .org__text .partner__group:nth-of-type(even){
        background-color:#f7f7f7;
    }
    .org__text .partner__group:first-of-type{
        padding-top:0;
    }
        .org__text .organization__group h3,
        .org__text .partner__group h3{
            position:absolute; left:20px;
        }
        .org__text .partner__group h3{
            font-size:1.25rem;
        }
        .org__text .partner__group ul{
            margin-top:0;
        }
}
@media screen and (max-width:576px){
    .org__text .organization__group,
    .org__text .partner__group{
        padding:20px 15px;
    }
        .org__text .organization__group h3,
        .org__text .partner__group h3{
            position:static;
        }
        .org__text .partner__group ul{
            margin-top:15px;
        }
}

/*-------------------------------------------
組織圖
-------------------------------------------*/
.org__chart{
    border:1px solid var(--secondary-color);
    position:relative;
    padding:20px 0;
    --line-color:#ccc;
}
    /* 樣式初始化 */
    .org__chart .part__title,
    .org__chart .organization__group h3,
    .org__chart .organization__group li,
    .org__chart .org__directors,
    .org__chart .partner .partner__group{
        background-color:var(--primary-light-color);
        border:1px solid rgb(0 0 0 / 15%);
        margin-bottom:10px;
        padding:15px 25px;
    }
    .org__chart .organization__group li:last-child{
        margin-bottom:0;
    }
        .org__chart .part__title::before{
            display:none;
        }
        .org__chart h3,
        .org__chart h4{
            margin:0;
            color:var(--red);
            font-size:1.5rem;
            line-height:1;
            padding-left:0;
            text-align:center;
        }
            .org__chart .organization__group h3::after{
                display:none;
            }
        .org__chart .organization__rosters{
            display:block;
            color:#333;
        }
            .org__chart .organization__rosters span{
                display:block;
            }
    .org__chart .part__title{ /* 會員代表大會 */
        display:inline-block;
        left:57%;
        z-index:3;
    }
    .org__chart .organization{
        display:block;
        position:relative;
        padding-bottom:90px;
    }
        .org__chart .organization::before{
            content:"";
            display:block;
            border:1px solid var(--line-color);
            border-bottom:none;
            position:absolute; top:-38px; left:50%; right:22%; bottom:-20px;
        }
        .org__chart .organization::after{
            content:"";
            display:block;
            border:1px solid var(--line-color);
            border-right:none; border-bottom:none;
            position:absolute; top:25%; left:8.5%; right:50%; bottom:15px; z-index:-1;
        }
        .org__chart .organization__group{
            display:inline-block;
        }
        .org__chart .org__director{ /* 理事會 */
            position:relative; left:50%;
            transform:translateX(-50%);
        }
        .org__chart .organization__group{
            padding:0;
            background-color:transparent;
        }
        .org__chart .org__directors,
        .org__chart .org__supervisor,
        .org__chart .org__secretary{
            position:absolute;
        }
        .org__chart .org__directors{ /* 理事 */
            display:block;
            left:19%;
        }
        .org__chart .org__supervisor{ /* 監事 */
            right:17%;
        }
        .org__chart .org__secretary{ /* 秘書處 */
            top:8em; left:3%;
        }
            .org__chart .organization__rosters{
                padding-left:0;
            }
                .org__chart .organization__rosters span{
                    padding:0 0 5px 0;
                }
                    .org__chart .organization__rosters span::before{
                        display:none;
                    }
    .org__chart .partner{
        display:block;
        position:relative;
        margin-top:50px;
    }
        .org__chart .partner::before{
            content:"";
            display:block;
            border:1px solid var(--line-color); border-bottom:none;
            height:30px;
            position:absolute; top:-30px; left:24%; right:16%; z-index:-1;
        }
        .org__chart .partner::after{
            content:"";
            display:block;
            background-color:var(--line-color);
            width:1px;
            height:30px;
            position:absolute; top:-30px; left:50%; z-index:-1;
        }
        .org__chart .partner__group{
            display:inline-block;
        }
        .org__chart .org__partner{ /* 台灣合作夥伴 */
            position:relative; left:50%;
            transform:translateX(-50%);
        }
        .org__chart .org__china{ /* 大陸合作夥伴 */
            position:absolute; right:3%;
        }
            .org__chart .partner__group li{
                color:#333;
            }
    .org__chart hr{
        display:none;
    }
@media screen and (max-width:1280px){/* Air Mac */
    .org__chart .organization::before{
        right:20%;
    }
    .org__chart .org__supervisor{
        right:13%;
    }
    .org__chart .organization::after{
        left:9%;
    }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .org__chart .part__title,
    .org__chart .organization__group h3,
    .org__chart .organization__group li,
    .org__chart .org__directors,
    .org__chart .partner .partner__group{
        padding:10px 15px;
    }
    .org__chart h3,
    .org__chart h4{
        font-size:1.25rem;
    }
    .org__chart::before{
        height:436px;
    }
    .org__chart .organization::before{
        top:-32px;
    }
    .org__chart .org__supervisor{
        right:14%;
    }
    .org__chart .org__china{
        width:25%;
    }
}
@media screen and (max-width:992px){
    .org__chart .organization{
        /* padding-bottom:70px; */
    }
        .org__chart .organization::before{
            right:18%; bottom:-70px;
        }
        .org__chart .organization::after{
            bottom:10%;
        }
        .org__chart .org__supervisor{
            right:11%;
        }
    .org__chart .partner{
        margin-top:100px;
    }
        .org__chart .partner::before{
            left:9%;
        }
        .org__chart .org__directors{
            left:3%;
        }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .org__chart .part__title{
        left:54%;
        margin-bottom:15px;
    }
    .org__chart .organization::after{
        left:10%;
    }
    .org__chart .partner::before{
        left:10%;
    }
    .org__chart .org__partner{
        width:40%;
    }
}
@media screen and (max-width:576px){
    .org__chart{
        border:none;
        padding:0;
    }
        .org__chart h3,
        .org__chart h4{
            font-size:1.125rem;
        }
        .org__chart .partner .partner__group{
            padding-left:10px; padding-right:10px;
        }
        .org__chart .org__supervisor{
            right:0%;
        }
        .org__chart .org__secretary{
            left:0%;
        }
        .org__chart .org__directors{
            left:0%;
        }
        .org__chart .org__china{
            right:0%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .org__chart .part__title{
        left:43%;
        width:50%;
    }
        .org__chart .part__title,
        .org__chart .organization__group h3,
        .org__chart .organization__group li,
        .org__chart .org__directors{
            padding-left:10px; padding-right:10px;
        }
        .org__chart .organization__rosters span{
            padding-bottom:2px;
        }
        .organization__rosters small{
            font-size:.75rem;
        }
    .org__chart .organization::before{
        right:14%;
    }
    .org__chart .partner::before{
        right:3%;
    }
    .org__chart .partner::after{
        right:5%;
    }
    .org__chart .org__partner{
        transform:initial;
        width:68%;
        left:26%;
    }
    .org__chart .org__china{
        position:relative;
        margin-top:20px;
        width:100%;
    }
        .org__chart .partner__group li{
            font-size:.875rem;
        }
    .partner__line{
        content:"";
        display:block;
        background-color:var(--line-color);
        width:1px;
        position:absolute; top:0; right:3%; bottom:5%; z-index:-1;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .org__chart .part__title,
    .org__chart .organization__group h3,
    .org__chart .organization__group li,
    .org__chart .org__directors,
    .org__chart .partner .partner__group{
        padding-left:6px; padding-right:6px;
    }
    .org__chart .organization__rosters span{
        font-size:.875rem;
    }
}

/*-------------------------------------------
委員會簡介
-------------------------------------------*/
.committee{
    margin:0;
}
    .committee__title{
        font-size:1.25rem; font-weight:700;
        line-height:1;
        position:absolute; left:0; z-index:3;
    }
    .committee__mission{
        border-bottom:1px solid var(--secondary-color);
        color:#666;
        margin:0 0 20px 250px;
        padding:0 0 20px 0;
        position:relative;
    }
    .committee__mission:last-of-type{
        border-bottom:none;
        padding-bottom:0;
    }
@media screen and (max-width:576px){
    .committee__title{
        position:static;
    }
    .committee__mission{
        margin-left:0;
    }
}

/*-------------------------------------------
學會章程
-------------------------------------------*/
.rules dt{
    float:left;
}
.rules dd{
    color:#666;
    margin-left:6em;
}
.rules .clause:nth-of-type(n+3) dd{
    margin-left:7em;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .rules dt{
        float:none;
        font-size:1.125rem;
        margin-bottom:10px;
    }
    .rules dd,
    .rules .clause:nth-of-type(n+3) dd{
        font-size:.875rem;
        margin-left:0;
    }
}

/*-------------------------------------------
理監事名單
-------------------------------------------*/
.organization__period{
    border-bottom:1px solid var(--secondary-color);
}
    .org__period__title{
        margin:0;
        background-color:var(--primary-light-color);
        font-size:1.5rem;
        line-height:1;
        position:relative;
        padding:10px 15px;
        transform-origin:left center;
        transition:.2s;
        cursor:pointer;
    }
        .org__period__title strong{
            display:inline-block;
            color:var(--primary-color);
            font-size:1.875rem;
            font-style:italic;
            margin:0 6px 0 3px;
            transition:.2s;
        }
        .org__period__title:hover strong{
            color:var(--hover-color);
        }
        .org__period__title::after{
            content:"";
            display:inline-block;
            background:url(../images/icon_expand_more.svg) no-repeat 50% 50%;
            background-size:contain;
            width:32px;
            height:32px;
            transform-origin:center;
            position:absolute; top:50%; right:10px;
            transform:translateY(-50%);
            transition:.2s;
        }
        .roster--active .org__period__title::after{
            transform:translateY(-50%) rotate(-180deg);
        }
    .org__inner{
        display:none;
        padding:15px;
        position:relative;
    }
        .org__announcement{
            color:var(--red);
            font-size:.875rem;
            margin:0;
        }
        .org__roster{
            margin:10px 0 0;
        }
            .org__roster dt{
                float:left;
                font-weight:700;
                line-height:1.2;
                padding-top:5px;
            }
                .org__roster dt br{
                    display:none;
                }
            .org__roster dd{
                line-height:1.2;
                min-height:36px;
                margin-left:7em; margin-bottom:5px;
                padding-bottom:5px;
                border-bottom:1px dashed rgba(0,0,0,.1);
            }
            .org__roster dd:last-of-type{
                border:none;
            }
                .org__roster dd span{
                    display:inline-block;
                    vertical-align:top;
                    color:#666;
                    margin-right:2.5em;
                    padding:5px 0;
                }
                .org__roster dd span:last-of-type{
                    margin-right:0;
                }
@media screen and (max-width:736px){/* i6, i7, i8 Plus Landscape */
    .org__roster dd span{
        margin-right:1.5em;
    }
}
@media screen and (max-width:576px){
    .org__inner{
        padding:15px 0;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .org__period__title{
        font-size:1.25rem;
    }
    .org__inner{
        padding-left:10px;
    }
        .org__roster dt br{
            display:block;
        }
        .org__roster dd{
            display:flex;
            flex-wrap:wrap;
            margin-left:6em;
        }
        .org__roster.committee dd{
            margin-left:8.5em;
        }
            .org__roster dd span{
                margin-right:0;
                flex:0 1 auto;
                width:33%;
            }
            .org__roster.committee dd span{
                margin-right:0;
            }
}