@charset "UTF-8";
/*===========================================
關於學會
===========================================*/

/*-------------------------------------------
學會簡介
-------------------------------------------*/
.introduction p{
    text-indent:2em;
}
    .introduction__focus{
        background-color:var(--primary-light-color);
        margin:2em 0;
        padding:30px;
        text-align:center;
    }
        .introduction__focus h3{
            margin:0;
            font-size:1.25rem;
        }
            .introduction__focus h3 span{
                color:var(--primary-color);
                font-size:1.875rem;
            }
@media screen and (max-width:576px){
    .introduction__focus{
       text-align:left;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .introduction__focus h3{
        font-size:1.125rem;
    }
}

/*-------------------------------------------
理事長的話
-------------------------------------------*/
.president p{
    text-indent:2em;
}
    .president__bottom{
        display: flex;
        justify-content:flex-end;
        align-items:center;
        text-align:right;
    }
        .period__no{
            
        }
        .president__photo{
            padding:0 0 5px 10px;
        }
            .president__photo img{
                border-radius:8px;
                box-shadow:0 3px 5px rgba(0, 0, 0, .2);
                width:180px;
            }
        .president__name{
            position:relative;
            padding-left:10px;
        }
            .president__name .text{
                color:var(--primary-color);
                font-size:1.5rem;
                display:none;
            }
            .president__name .sign{
                display:inline-block;
            }
                .president__name .sign img{
                    width:150px;
                }
@media screen and (max-width:768px){
    .president__bottom{
        flex-wrap:wrap;
    }
        .president__photo img{
            width:155px;
        }
        .president__name{
            width:100%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .president__photo img{
        width:40vw;
    }
    .president__name .sign img{
        width:36vw;
    }
}

/*-------------------------------------------
理監事名單
-------------------------------------------*/
.organization__period{
    border-bottom:1px solid var(--secondary-color);
}
    .org__period__title{
        margin:0 0 5px;
        background-color:var(--primary-light-color);
        border-radius:10px;
        color:#111;
        font-size:1.5rem;
        line-height:1;
        letter-spacing:0;
        position:relative;
        padding:10px 15px;
        transform-origin:left center;
        transition:.2s;
        cursor:pointer;
    }
    .roster--active .org__period__title{
        background-color:#f7f7f7;
    }
    .current__period .org__period__title{
        cursor:default;
        pointer-events:none;
    }
        .org__period__title strong{
            display:inline-block;
            color:var(--primary-color);
            font-size:1.875rem;
            font-style:italic;
            margin-left:-7px;
            transition:.2s;
            text-align:center;
            width:1.5em;
        }
        .org__period__title:hover strong{
            color:var(--hover-color);
        }
        .current__period .org__period__title:hover strong{
            color:var(--primary-color);
        }
        .org__term_of_office{
            color:var(--primary-color);
            font-size:1rem; font-weight:400;
            margin-left:5px;
            vertical-align:2px;
        }
        .org__period__title::after{
            content:"";
            display:inline-block;
            background:url(../images/icon_expand_more_primary.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;
        }
        .current__period .org__period__title::after{
            display:none;
        }
        .roster--active .org__period__title::after{
            background-image:url(../images/icon_expand_more.svg);
            opacity:.3;
            transform:translateY(-50%) rotate(-180deg);
        }
    .org__inner{
        display:none;
        padding:15px;
        position:relative;
    }
    .current__period .org__inner{
        display:block;
    }
        .org__roster{
            margin: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{
                border-bottom:1px dashed rgba(0,0,0,.1);
                display:flex;
                flex-wrap:wrap;
                line-height:1.2;
                min-height:36px;
                margin-left:7em; margin-bottom:5px;
                padding-bottom:5px;
            }
            .org__roster dd:last-of-type{
                border:none;
            }
                .org__roster dd span{
                    flex:0 0 10%;
                    padding:5px 0;
                }
        .org__committee{
            border-top:1px solid rgba(0,0,0,.1);
            margin-top:20px;
            padding-top:30px;
        }
            .committee__roster{
                
            }
            .committee__roster:last-of-type{
                border:none;
                margin-bottom:0;
            }
                .committee__roster .committee__groupName{
                    float:left;
                    font-weight:700;
                    line-height:1;
                    padding-top:0;
                }
                .committee__roster dd{
                    border-bottom:1px dashed rgba(0,0,0,.1);
                    line-height:1;
                    min-height:24px;
                    margin-left:17em;
                    margin-bottom:10px;
                    padding-bottom:5px;
                }
                .committee__roster dd:last-of-type {
                    border:none;
                }
                    .committee__roster dd span{
                        padding:0;
                    }
@media screen and (max-width:992px){
    .org__roster dd span{
        flex-basis:12%;
    }
}
@media screen and (max-width:768px){
    .org__roster dd span{
        flex-basis:16%;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .org__roster dd span{
        flex-basis:20%;
    }
}
@media screen and (max-width:576px){
    .org__period__title{
        padding:10px; padding-right:35px;
    }
        .org__period__title strong{
            font-size:1.5rem;
        }
        .org__period__title::after{
            right:5px;
            width:24px;
            height:24px;
        }
            .org__roster dd span{
                flex-basis:25%;
            }
            .committee__roster{
                padding-left:0;
            }
                .committee__roster dd{
                    margin-left:15.5em;
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .org__period__title{
        font-size:1.25rem;
    }
        .org__term_of_office{
            display:block;
            margin-left:0; margin-top:5px;
            vertical-align:0;
        }
        .org__period__title .founding{
            display:block;
        }
    .org__inner{
        padding-left:5px; padding-right:5px;
    }
        .org__roster dt br{
            display:block;
        }
        .org__roster dd{
            margin-left:30vw;
        }
            .org__roster dd span{
                flex-basis:33.3333%;
                font-size:.875rem;
            }
        .committee__roster .committee__groupName{
            float:none;
        }
        .committee__roster dd{
            margin-left:0;
            justify-content:end;
        }
            .committee__roster dd span{
                font-size:1rem;
                flex-basis:auto;
            }
}
@media screen and (max-width:375px){/* SE, iX, XS, i11 Pro, i13 Mini, i6, i7, i8 */
    .org__period__title{
        font-size:1.125rem;
    }
}

/*-------------------------------------------
學會章程
-------------------------------------------*/
.constitution__modifyDate{
    border-bottom:1px solid rgba(0,0,0,.15);
    list-style:none;
    margin:0 0 30px;
    padding:0 0 20px;
    font-size:.875rem;
    line-height:1.15;
    text-align:right;
    max-height:none;
    position:relative;
}
.constitution__modifyDate.hide{
    padding-bottom:40px;
    overflow:hidden;
    max-height:100px;
}
    .constitution__modifyDate li:nth-child(n+2){
        margin-top:5px;
    }
        .constitution__modifyDate.hide::after{
            content:"";
            display:block;
            background:linear-gradient(rgba(255,255,255,.0), #fff 50%);
            position:absolute; bottom:0;
            width:100%;
            height:4em;
        }
    .btnConstitution{
        position:absolute; bottom:-10px; right:5px; z-index:2;
        background-color:#fff;
        border-radius:30px;
        box-shadow:0 0 10px rgba(0,0,0,.2);
        font-size:.875rem;
        line-height:24px;
        padding:0 15px;
    }
    .constitution__modifyDate.hide .btnConstitution{
        bottom:10px;
    }
.rules dt{
    float:left;
}
.rules dd{
    color:#666;
    margin-left:6em;
}
.rules .clause dd:last-of-type{
    margin-bottom:0;
    padding-bottom:0;
}
@media screen and (max-width:576px){
    .constitution__modifyDate{
        font-size:.75rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .rules dt{
        float:none;
        line-height:1;
        margin-bottom:10px;
    }
    .rules dd{
        font-size:.875rem;
        margin-left:0;
    }
}

/*-------------------------------------------
成為會員
-------------------------------------------*/
.joinMember{
    color:#111;
}
    .joinMember__part{
        border-bottom:1px solid rgba(0,0,0,.15);
        position:relative;
        padding:0 0 20px 150px;
        margin-bottom:20px;
    }
    .joinMember__part:last-of-type{
        border-bottom:none;
        padding-bottom:0;
        margin:0;
    }
        .joinMember__part .part__title{
            position:absolute; left:0;
        }
        .joinMember ul,
        .joinMember ol{
            padding-left:1.4em;
        }
            .joinMember li:nth-child(n+2){
                margin-top:5px;
            }
        .member__type{
            list-style:none;
            margin:.5em 0 0;
            padding:0 !important;
        }
            .member__type li{
                padding-left:5em;
                text-indent:-5em;
            }
    .joinMember .attachment{
        padding:15px;
    }
@media screen and (max-width:576px){
    .joinMember__part{
        padding-left:0;
    }
        .joinMember__part .part__title{
            position:static;
        }
}

/*-------------------------------------------
牙周病科專科醫師甄審原則
-------------------------------------------*/
.screeningAndReview dd{
    margin-left:4em;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .screeningAndReview dt{
        float:left;
        line-height:1.5;
    }
}

/*-------------------------------------------
積分辦法
-------------------------------------------*/
.scoreRules dd{
    margin-left:3em;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .scoreRules dt{
        float:left;
        line-height:1.5;
    }
}

/*-------------------------------------------
會員福利
-------------------------------------------*/
.memberBenefits__slogan{
    color:#111;
    font-size:1.5rem;
}
.memberBenefits__container{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:0 -40px;
}
    .memberBenefits__desc{
        flex:0 0 50%;
        padding:0 40px;
    }
    .memberBenefits__desc:nth-of-type(2){
        border-left:1px solid #eee;
    }
    .memberBenefits__container hr{
        display:none;
    }
@media screen and (max-width:992px){
    .memberBenefits__container{
        display:block;
        margin:0;
    }
        .memberBenefits__desc{
            flex-basis:100%;
            padding:0;
        }
        .memberBenefits__desc:nth-of-type(2){
            border-left:none;
        }
        .memberBenefits__container hr{
            display:block;
        }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .memberBenefits__slogan{
        font-size:2.875vw;
    }
}
@media screen and (max-width:576px){
    .memberBenefits__slogan{
        font-size:3.75vw;
    }
        .memberBenefits__slogan span{
            display:block;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .memberBenefits__slogan{
        font-size:4.5vw;
    }
}