/*===========================================
Elearn 「健康體位管理師認證」課程
===========================================*/
#page-header{
    background-image:url(../images/page-header-img-links.jpg);
}
.elearn-intro{
    --grade1-color:#D2691E;
    --grade1-rgb:210,105,30;
    --grade2-color:#228B22;
    --grade2-rgb:34,139,34;
}
    .elearn-intro .part-title{
        color:#000;
        font-weight:700;
    }
    .elearn-intro h2.part-title{
        background:url(../images/logo.png) no-repeat 0 50%;
        background-size:40px;
        box-shadow:0 10px 10px -10px rgba(0,0,0,.2);
        color:var(--primary-color);
        padding-left:45px;
    }
        .elearn-intro h2.part-title span{
            border:none;
            color:#000;
        }
/*-------------------------------------------
共用
-------------------------------------------*/
.elearn-section{
    margin:0 0 3em;
}
    .elearn-section p{
        text-indent:2em;
    }
a[href*='shorturl']{
    display:inline-block;
    background-image:url(../images/icon_google-drve.svg);
    background-position:0 0.2em;
    background-repeat:no-repeat;
    background-size:20px auto;
    padding-left:25px;
    text-indent:0;
}

/*-------------------------------------------
認證課程架構
-------------------------------------------*/
.course-info{
    display:flex;
    justify-content:space-between;
}
    .grade1-color{
        color:var(--grade1-color);
    }
    .grade2-color{
        color:var(--grade2-color);
    }
    .course-info [class^='course-']{
        width:49%;
        padding:25px;
        border:1px solid rgba(0,0,0,.2);
        border-radius:5px;
    }
    .course-info [class^='course-1']{
        border-color:var(--grade1-color);
        background-color:rgba(var(--grade1-rgb),.05);
    }
    .course-info [class^='course-2']{
        border-color:var(--grade2-color);
        background-color:rgba(var(--grade2-rgb),.05);
    }
        .course-info [class^='course-'] h4{
            margin:0 0 .75em;
            color:var(--grade1-color);
            font-size:1.35rem;
        }
        .course-info [class^='course-2'] h4{
            color:var(--grade2-color);
        }
            .course-info [class^='course-'] h4 span{
                color:#000;
            }
        .course-info [class^='course-'] p{
            text-indent:0;
        }

/*-------------------------------------------
認證取得流程
-------------------------------------------*/
.process [class^='process-']{
    border-bottom:1px solid rgba(0,0,0,.1);
    margin-bottom:2em;
    padding-bottom:2em;
    padding-left:2em;
}
.process [class^='process-']:last-of-type{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}
    .process h4{
        color:#000;
        font-size:1.25rem;
        margin:0 0 .75em -1.5em;
    }
    .process p{
        text-indent:0;
    }
    .process ol{
        margin:0;
        padding-left:1.4em;
    }
        .process ol > li{
            padding-bottom:10px;
        }
            .process .btn-apply{
                margin:0 5px;
                vertical-align:.125em;
                font-size:1.125rem;
                padding-left:30px; padding-right:30px;
            }
            .sessions-list{
                list-style:none;
                margin:5px -1%;
                padding:0;
                display:flex;
                justify-content:space-between;
                font-size:1.125rem;
            }
                .sessions-list > li{
                    flex:32%;
                    border:1px solid rgba(0,0,0,.2);
                    border-radius:5px;
                    margin:0 1%;
                    padding:15px; padding-left:90px;
                    position:relative;
                }
                    .sessions-list .s-area{
                        color:var(--primary-color);
                        font-size:1.75rem;
                        line-height:1;
                        position:absolute; top:20px; left:15px;
                    }
                    .sessions-list span[class^='s-']{
                        background-repeat:no-repeat;
                        background-position:0 .1em;
                        background-size:20px auto;
                        padding-left:24px;
                    }
                    .sessions-list .s-date{
                        display:block;
                        background-image:url(../images/icon_event.svg);
                    }
                    .sessions-list .s-place{
                        display:block;
                        background-image:url(../images/icon_place.svg);
                    }
                    .sessions-list .s-deadline{
                        display:block;
                        background-image:url(../images/icon_deadline.svg);
                    }
                        .sessions-list .s-deadline strong{
                            color:red;
                        }
    .course-link{
        display:block;
        background-color:rgba(var(--primary-rgb),.06);
        box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .05);
        border-radius:5px;
        margin-bottom:10px;
        padding:20px 15px;
    }
    .input-form{
        display:block;
        background-color:#f5f5f5;
        box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .05);
        border-radius:5px;
        margin-bottom:10px;
        padding:20px 15px;
    }
        .input-form [value*='開始測驗']{
            padding-left:20px; padding-right:20px;
        }

/*-------------------------------------------
答題頁
-------------------------------------------*/
.quiz-header{
    position:relative;
    color:#000;
    border-bottom:2px solid var(--primary-color);
    margin-bottom:15px;
    padding-bottom:10px;
}
    .quiz-title{
        font-size:1.5rem; font-weight:700;
    }
    .quiz-user{
        color:#333;
    }
.elearn-quiz .part-title .explanation{
    border-bottom:none;
}
.qz-container{
    position:relative;
}
    .qz-list{
        list-style:none;
        margin:-10px 0 0;
        padding:0;
    }
        .qz-item{
            background-color:#fff;
            border:1px solid #ddd;
            border-radius:5px;
            margin:10px 0;
            padding:15px;
        }
            .qz-topic{
                background-color:#f7f7f7;
                border-radius:5px;
                font-size:1.125rem;
                line-height:1.3;
                margin:0 0 .5em;
                position:relative;
                padding:8px; padding-left:2.25em;
            }
                .qz-no{
                    color:var(--primary-color);
                    display:inline-block;
                    width:2em;
                    position:absolute; left:8px;
                    padding-right:8px;
                    text-align:center;
                }
            .az-ans{
            }
                .az-ans-option{
                    margin:3px 0;
                }
                    .az-ans-option[type=radio],
                    .az-ans-option[type=checkbox]{
                        width:20px;
                        height:20px;
                        vertical-align:-0.2em;
                    }


/*-------------------------------------------
訊息框
-------------------------------------------*/
.info-dialog{
    position:fixed; top:0; left:0; z-index:-10;
    width:100%;
    height:100%;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
.info-dialog.active{
    z-index:99;
    opacity:1;
    pointer-events:auto;
}
    .info-dialog-overlay{
        position:fixed; top:0; left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,.6);
    }
    .info-dialog-content{
        position:relative;
        width:500px;
        background-color:#fff;
        border-radius:10px;
        box-shadow:0 10px 20px rgba(0,0,0,.2);
        padding:30px;
        position:fixed; top:50%; left:50%;
        transform:translate(-50%,-50%);
    }
        .info-dialog-content #msg{
            color:#000;
            font-weight:700;
        }
        .info-dialog-content .buttons{
            height:auto;
            margin:30px 0 0;
        }