@charset "UTF-8";

/* navbar */
.navbar {
    border: 0;
    z-index:99;
}

.choose-branch-group{
    display:flex;
}

/* 登入頁面 */
.login-wrap{
    justify-content:center;
    margin-top: -4.5rem;
}

.teacher-wrap, .teacher-apply .form-group, 
.teacher-apply .form-group label.title, 
.teacher-apply .form-group-input, 
.teacher-apply .form-group-resume,
label.title-branch,
.area-tab-title h4,
.area-tab-wrap{
    display:flex;
}

.login-left, .login-right{
    width:50%;
}

.login-left{
    position:relative;
    display:block;
    z-index:1;
}

.login-left h2{
    display:flex;
    justify-content: center;
    align-items:center;
    font-size:2.5rem;
    font-weight:600;
    color:var(--white);
    letter-spacing: .1rem;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:9;
}

.login-right{
    width:50%;
    text-align:center;
}

.login-right h3{
    font-size:2rem;
}

.login-right .form-group{
    width:100%;
    padding-left:8rem;
    padding-right:8rem;
}

.login-right .form-group h3{
    font-size:2rem;
    font-weight:600;  
}

.login-right .form-group label{
    background:var(--pink-600);
    font-size:1.5rem;
    font-weight:600;
    color:var(--white);
    border-radius:5rem;
    width:100%;
    padding:.6rem 3rem;
}

.login-right .form-group input{
    background: var(--white);
    text-align:center;
    color: var(--black);
    border-radius:0;
    border:0;
    border-bottom: 1px solid var(--blue-500);
    margin-bottom: 30px;
    padding:8px 15px;
}

.login-right .form-group input::placeholder{
    color:var(--blue-100);
}

/* 合格教師申請 */
.teacher-wrap{
    background:var(--white);
    padding: 50px 30px 30px 30px;
}

.teacher-wrap-title{    
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 2rem;
}

.teacher-wrap-title:before{
    position:absolute;
    content:"";
    background:var(--blue-800);
    display:flex;
    align-items:center;
    width:100%;
    height:.2rem;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    z-index:1;
}

.teacher-wrap-title h2{
    display:block;
    background:var(--white);
    color: var(--blue-800);
    width:fit-content;
    padding:0 2rem;
    z-index:9;
}

/* 填寫表格 */
.teacher-apply .form-group{
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: space-between;
    gap:1rem;
}

.teacher-apply .form-group label.title, label.title-branch{
    background: var(--blue-300);
    width: 15%;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #FFF;
    padding:.5rem 1rem;
}

.teacher-apply .form-group-input, .teacher-apply .form-group-resume{
    align-items: center;
    width: 82%;
}

input[type=text],
input[type=email],
input[type=tel]{
    background: #FFF !important;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--blue-800);
}

label.title-branch{
    width:100%;    
    height:auto;
    margin-bottom: 25px;
}

/* 選擇分校 */
ul.branch-tablist{
    display:flex;
    justify-content:space-between;
}

ul.branch-tablist li, ul.branch-tablist li:before{
    margin-left: 0;
}

.nav-tabs .nav-item{
    background:var(--blue-400);
    border:1px solid #FFF;
    border-radius:.6rem .6rem 0 0;
    width:33%;
}

.nav-tabs .nav-item a{
    color: var(--white);
    text-align:center;
}

.nav-tabs .nav-item:hover{
    background:var(--blue-400);
}

.nav-tabs .nav-item:hover a{
    color:#FFF;
}

.nav-tabs .nav-link.active{
    background:var(--blue-800);
    color:#FFF;
    border-radius:.6rem .6rem 0 0;
    border:1px solid var(--blue-800);
    margin-bottom: 0;
}


ul.branch-tablist li:before{
    background:none;
}

.area-tab{
    background:var(--blue-200);
    border:1px solid var(--blue-400);
    border-top:0;
    margin-bottom: 2rem;
    padding:1rem;
}

/* 工作地點 */
.area-tab-title{
    position:relative;
    width:100%;
}

.area-tab-title h4{
    position:relative;
    background:var(--blue-200);
    font-size:1.4rem;
    color:var(--blue-800);
    width:fit-content;
    margin-bottom: 1rem;
    padding:0 2rem 0 0;
    z-index:9;
}

.area-tab-title:after{
    position:absolute;
    content:"";
    background:var(--blue-100);
    display:block;
    width:100%;
    height:1px;
    margin:auto;
    top: 0;
    bottom:0;
    left:0;
    z-index:1;
}

.area-tab-wrap{
    flex-wrap:wrap;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 15px;
}

.area-tab-wrap .form-group{
    width:49%;
    margin-bottom: 1.2rem; 
}

.area-tab-wrap .form-group .area-group{
    position:relative;
    background:var(--white);
    padding: .5rem 1rem;
}

.area-tab-wrap .form-group .area-group:after{
    position:absolute;
    content:"";
    background:var(--gray-100);
    width:100%;
    height:35px;
    top:0;
    left:0;
    z-index:-1;
}

.area-tab-wrap .form-group .area-group label{
    margin-left: 10px;
}

.area-tab-wrap .btn-group{
    display:flex;
    width:100%;
    justify-content:space-between;
}

.area-tab-wrap .btn-group button{
    background:var(--pink-600);
    font-size:1.25rem;
    color:var(--white);
    border-radius:0 0 10px 10px;
    width:49%;
}

.area-tab-wrap .btn-group button:hover{
    background:var(--pink-800);
    color:var(--white);
}

.btn-group>.btn:not(:first-child){
    margin-left: 3px;
}

.choose-branch-group{
    flex-wrap:wrap;
    justify-content:space-between;
    border:1px solid var(--gray-200);
    margin-bottom: 15px;
}

.choose-branch{
    width:33%;
    padding:.5rem;
}

.choose-branch + .choose-branch{
    border-left:1px solid var(--gray-200);
}

.choose-branch p{    
    margin-bottom: 0;
}

/* 彈性視窗 */
.modal-header{
    display:flex;
    flex-wrap:wrap;
    border:0;
    padding-bottom:.2rem;
}

h4.modal-title, h4.modal-address{
    font-size:1.5rem;
    font-weight:500;
}

h4.modal-title{
    font-weight:600;
    color:var(--blue-800);
    width:100%;
}

h4.modal-title i{
    margin-right: 8px;
}

.modal-header .close{
    position:absolute;
    color:#000 !important;
    top:20px;
    right:20px;
    margin:0;
    padding:0;
}

.close:hover{
    background:#FFF;
    color:var(--gray-200);    
}

.modal-body{
    padding:1.5rem;
}

.modal-body-group{
    margin-bottom: 20px;
}

.modal-body-group h5{
    font-size:1.25rem;
    font-weight:900;
    border-bottom:1px solid var(--gray-100);
    border-left:6px solid var(--pink-600);
    margin-bottom: 1rem;
    padding:.5rem 0 .5rem .8rem;
}

.joy-intro{
    padding:0;
}

.modal-body-group ul li{
    font-size:1.125rem;
    margin-left: 0;
}

.modal-body-group ul li:before{
    position:absolute;
    content:"";
    display:block;
    background:var(--blue-800);
    width:.5rem;
    height:.5rem;
    border-radius:50%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto 0 auto -1.4rem;
}

.modal-body-list{
    border-top:1px solid var(--gray-200);
    border-bottom:1px solid var(--gray-200);
    border-right:1px solid var(--gray-200);
}

.modal-body-list .list-group{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:stretch;
    width:100%;
}

.modal-body-list .list-group + .list-group{
    border-top:1px solid var(--gray-200);
}

.list-group label{
    background: var(--blue-200);
    font-size:1.25rem;
    font-weight:600;
    width:25%;
    border-left:6px solid var(--pink-600);
    padding: .5rem 0 .5rem .5rem;
}

.list-group p{
    width:75%;
    margin-bottom: 0;
    padding: .5rem 0 .5rem .5rem;
}


/* .modal-body-list + .modal-body-list {
    border-top:1px solid var(--gray-200);
}

.modal-body-list:nth-child(6){
    border-bottom:1px solid var(--gray-200);
}

.modal-body-list label {
    display:flex;
    align-items:center;
    background:var(--blue-200);
    font-family: Lato, "Noto Sans TC", sans-serif;
    font-size:1.25rem;
    font-weight:600;
    width:25%;
    
    border-left:6px solid var(--pink-600);
    padding:.5rem 0 .5rem .8rem;
}

.modal-body-list p{
    width:75%;
    border-bottom:1px solid var(--white);
    border:1px solid var(--gray-200);
    margin-bottom: 0;
    padding:8px 0 7px 15px;
} */

@media screen and (max-width:1200px){
    .login-left{
        height:610px;
    }

    .login-left .left-01{
        width:80%;
    }
}

@media screen and (max-width:1024px){
    .login-left{
        height:500px;
    }

    .teacher-apply .form-group label.title{
        width:20%;
    }

    .teacher-apply .form-group-input, .teacher-apply .form-group-resume{
        width:78%;
    }
}

@media screen and (max-width:767px){
    .login-wrap .container{
        flex-direction: column-reverse;
    }

    .login-left{
        height:570px;
    }

    .login-left, .login-right{
        width:100%;
    }

    .login-right .form-group{
        padding:30px;
    }

    .login-left .left-01{
        left:0;
        right:0;
        margin:0 auto;
    }

    .login-left .left-03{
        right:0;
        bottom:0;
    }

    h2{
        font-size:1.6rem;
    }

    .teacher-wrap-title:before, .teacher-wrap-title:after{
        top:1rem;
    }

    .teacher-wrap{
        padding:50px 15px;
    }

    .teacher-apply .form-group label.title, .teacher-apply .form-group-input, .teacher-apply .form-group-resume{
        width:100%;
    }

    input[type=file]{
        margin-top: 15px;
    }

    .area-tab-wrap .form-group{
        width:100%;
    }
}

@media screen and (max-width:576px){
    .login-left{
        height:390px;
    }

    .teacher-wrap{
        padding:50px 10px;
    }

    label.title-branch{
        height:auto;
        border-radius:50px;
        padding:6px 18px;
    }
}

@media screen and (max-width:425px){

}