@charset "UTF-8";
/*===========================================
民眾專區
===========================================*/
.forPeople__article img{
    display:block;
    max-width:100%;
    margin:15px auto;
}
.article__author{
    text-align:right;
    font-size:.875rem;
}

/*-------------------------------------------
牙周病專科醫師是甚麼樣的牙醫師
-------------------------------------------*/
.whatIsPeriodontist p{
    text-indent:2em;
}

/*-------------------------------------------
如何找到牙周病專科醫師
-------------------------------------------*/
.hospital__city{
    margin-top:10px;
}
.hospital__city:first-of-type{
    margin-top:0;
}
    .hospital__city .part__title{
        background-color:var(--primary-light-color);
        border-radius:10px;
        margin-bottom:0;
        color:var(--primary-color);
        line-height:1;
        position:relative;
        padding:12px 15px 10px;
        transform-origin:left center;
        transition:.2s;
        cursor:pointer;
    }
    .hosptial--active.hospital__city .part__title{
        background-color:#f7f7f7;
        border-radius:10px 10px 0 0;
    }
        .hospital__city .part__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;
        }
        .hosptial--active.hospital__city .part__title::after{
            background-image:url(../images/icon_expand_more.svg);
            opacity:.3;
            transform:translateY(-50%) rotate(-180deg);
        }
    .hospital__city__inner{
        display:none;
    }
        .hospital__list thead th:nth-child(1){
            width:13%;
        }
        .hospital__list thead th:nth-child(2){
            width:30%;
        }
        .hospital__list thead th:nth-child(4){
            width:20%;
        }
        .hospital__list tbody td{
            padding-top:8px; padding-bottom:8px;
        }
        .hospital__list tbody td:nth-child(1),
        .hospital__list tbody td:nth-child(4){
            white-space:nowrap;
        }
        .hospital__list tbody td:nth-child(1){
            color:#111;
            font-weight:700;
        }
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .hospital__list thead th:nth-child(4){
        width:25%;
    }
    .hospital__list tbody td:nth-child(3){
        font-size:.875rem;
    }
}
@media screen and (max-width:576px){
    .hospital__list{
        border:1px solid rgba(var(--primary-rgb),.5);
    }
        .hospital__list thead{
            display:none;
        }
            .hospital__list tr{
                display:flex;
                flex-direction:column;
                padding:7px;
            }
                .hospital__list tbody td{
                    border:none;
                    background-repeat:no-repeat;
                    background-size:18px auto;
                    background-position:0 2px;
                    padding:3px;
                    min-height:24px;
                }
                .hospital__list tbody td:nth-child(1){
                    font-size:1.125rem;
                }
                .hospital__list tbody td:nth-child(3){
                    background-image:url(../images/icon_place.svg);
                    padding-left:20px;
                }
                .hospital__list tbody td:nth-child(4){
                    background-image:url(../images/icon_tel.svg);
                    padding-left:20px;
                }
}