@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');


/*////////////////////////////// 首頁 //////////////////////////////*/

html , body{
    overflow-x: hidden;
    font-family:Arial , 'Noto Sans TC', sans-serif ;
    font-weight: 300;
    height: 100%;
}

*{
    /* outline: 1px solid red; */
}

.wrapper{
    min-height: 70%;
    display: flex;

    flex-direction: column;
    margin: 0;
    overflow: hidden;

    position: relative;
}



/* 頭 */
.navbar{
    box-shadow: 1px 1px 5px #00000011;
    padding: 16px 16px;
}

/* logo */
.navbar .navbar-brand{
    display: flex;
    align-items: center;
}

.navbar .navbar-brand img{
    width: 160px;
}

.navbar .navbar-brand p{
    margin: 0;
    color: #222222;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.45rem;
    margin-left: 10px;
}

/* 選單 */
.navbar .menu_box{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 次選單 */
.navbar .submenu{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.navbar .submenu li.a_box a{  
    color: #222222;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0 8px;
    position: relative;
    transition: 0.3s;
}

.navbar .submenu li.a_box a:hover{
    color: #555555;
    text-decoration: none;
}

.navbar .submenu li.a_box a::after{
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #222222;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.navbar .submenu li.login_box a{
    border: 1px solid #F9C022;
    border-radius: 50px;
    margin-left: 8px;
    padding: 2px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #222222;
    transition: 0.3s;
}

.navbar .submenu li.login_box a:hover{
    background-color: #B2450F;
    color: #fff;
    border: 1px solid transparent;
    font-weight: 300;
    text-decoration: none;
}

/* 主選單 */
.navbar .menu{
    margin: 0 -15px;
}

.navbar .menu .nav-link{
    color: #222222;
    font-weight: 500;
    padding: 3px 10px;
    transition: 0.3s;
    margin-left: 3px;
    position: relative;
}

.navbar .menu .nav-link:before{
    content: "";
    width: 0%;
    height: 3px;
    background-color: transparent;
    position: absolute;
    bottom: 0px;
    left: 0;
    transition: 0.7s;
}

.navbar .menu .nav-link:hover:before{
    background-color: #F9C022;
    width: 100%;
}

@media (max-width: 1199.98px) {

    .navbar .container {
        max-width: 100%;
        padding: 0;
    }

    .navbar .navbar-brand p{
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {

    .navbar{
        padding-bottom: 12px;
    }
    .navbar .menu_box{
        margin-top: 40px;
    }

    .navbar .submenu{
        position: absolute;
        top: 8px;
    }

    .navbar .navbar-toggler{
        position: relative;
        width: 35px;
        height: 35px;
        transform: translateY(-5px);
    }

    .navbar .navbar-toggler:focus-visible{
        outline: none;
    }

    .navbar .navbar-toggler:focus{
        outline: none;
    }

    .navbar .navbar-toggler span{
        width: 35px;
        height: 4px;
        border-radius: 5px;
        background-color: #F9C022;

        position: absolute;
        top: 0;
        left: 0px;

        transition: 0.3s;
    }

    .navbar .navbar-toggler span.line1{
        width: 30px;
        top: 3px;
    }

    .navbar .navbar-toggler span.line2{
        width: 22px;
        top: 14px;
    }

    .navbar .navbar-toggler span.line3{
        top: 25px;
    }

    .navbar .navbar-toggler span.line1.add{
        width: 35px;
        top: 15px;
        transform: rotate(45deg);
    }

    .navbar .navbar-toggler span.line2.add{
        display: none;
    }

    .navbar .navbar-toggler span.line3.add{
        width: 35px;
        transform: rotate(-45deg);
        top: 15px;
    }

    .navbar .navbar-collapse .menu{
        position: absolute;
        width: 100%;
        left: 15px;
        top: 103px;

        background-color: #fffffff9;
        box-shadow: 1px 1px 5px #00000022;

        z-index: 999;
    }

    .navbar .menu .nav-link{
        padding: 15px 10px;
        font-weight: 400;  
        margin: 0;
    }

    .navbar .menu .nav-link:before{
        transition: 2s;
    }
}

@media (max-width: 575.98px) {
    
    .navbar{
        padding: 8px 8px;
    }
    
    .navbar .navbar-brand{
        transform: translateY(12px);
        flex-wrap: wrap;
        margin-right: 0;
    }

    .navbar .navbar-brand img{
        width: 100px;
    }

    .navbar .navbar-brand p{
        font-size: 0.8rem;
        line-height: 1.1rem;
    }

    .navbar .submenu li.a_box{
        display: none;
    }

    /* .navbar .submenu li.a_box a{
        font-size: 0.85rem;
    } */

    .navbar .navbar-collapse .menu{
        top: 91px;
    }

    .navbar .menu .nav-link:before{
        transition: 1.5s;
    }
}



/* 回頂端 */
.top_btn{
    position: fixed;
    right: 30px;
    bottom: 20px;
    border: 1px solid #fff;
    border-radius: 50px;
    width: 42px;
    height: 42px;
    z-index: 99;
    transition: 0.5s;
    display: none;
}

.top_btn a{
    display: inline-block;
    background-color: #fff;
    border: 5px solid #F9C022;
    color: #222222;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    position: relative;
    transition: 0.5s;
}

.top_btn a p{
    margin: 0;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 0.8rem;
}

.top_btn:hover{
    border: 1px solid #F9C022;
}

.top_btn:hover a{
    background-color: #F9C022;
    color: #fff;
    border: 5px solid #fff;
}



/* 背景 */
.wrapper > .bg{
    clip-path: polygon(0 0, 100% 0, 100% 20% , 68% 100%, 0% 100%);
    background-color: #F9C022;

    position: absolute;
    top: 0;
    width: 100%;
    height: 450px;
    z-index: -1;
}

.home > .bg{
    height: 660px;
}

@media (max-width: 991.98px){

    .home > .bg{
        height: 450px;
    }
}

@media (max-width: 575.98px){

    .home > .bg{
        height: 80vw;
    }
}



/* banner */
.banner{
    padding: 30px 0;
    padding-bottom: 30px;
}

.banner .marquee .slick-list{
    border-radius: 15px;
}

.banner .marquee .box{
    border-radius: 15px;
    height: 440px;
    overflow: hidden;

    position: relative;
}

.banner .marquee .box::before{
    content: "";
    position: absolute;
    width: calc( 100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid #fff;
    border-radius: 15px;
    top: 5px;
    left: 5px;
    z-index: 2;
}

.banner .marquee .box img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.banner .slick-prev , .banner .slick-next{
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    opacity: 0.8;
    transition: 0.3s;
}

.banner .slick-prev::before , .banner .slick-next:before{
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: 12px;
    background-position: 10px center ;
    width: 30px;
    height: 30px;
    opacity: 1;
}

.banner .slick-prev:hover , .banner .slick-next:hover{
    opacity: 1;
}

.banner .slick-prev{
    left: 15px;
    z-index: 2;
}

.banner .slick-prev::before{
    transform: rotate(180deg);
    background-position: 11px center;
}

@media (max-width: 1199.98px) {
    
    .banner .marquee .box{
        height: 365px;
    }
}

@media (max-width: 991.98px){

    .banner .marquee .box{
        height: 275px;
    }
}

@media (max-width: 767.98px) {

    .banner .marquee .box{
        height: 208px;
    }
}

@media (max-width: 575.98px) {

    .banner .marquee .box{
        height: 38.5vw;
    }

    .banner .slick-next{
        right: 10px;
    }

    .banner .slick-prev{
        left: 10px;
    }
}



/* 各項申請 */
.apply{
    margin-bottom: 30px;
}

.apply .title{
    position: relative;
}

.apply .title::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #FFF8DE;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.apply .title h1{
    display: inline-block;
    font-size: 1.2rem;
    background-color: #FFF8DE;
    margin: 0;
    padding: 7px 40px;
    padding-top: 11px;
    border-radius: 10px;

    position: relative;
}

.apply .title h1::before{
    content: "";
    position: absolute;
    width: calc( 100% - 4px);
    height: calc(100% - 4px);
    border: 1px solid #F9C022;
    border-radius: 8px;
    top: 2px;
    left: 2px;
}

.apply .list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px;
}

.apply .list li{
    flex-basis: calc( 100% / 3);
    margin: 20px 15px;
}

.apply .list li .bg_box{
    display: inline-block;
    background-color: #fff;
    width: 100%;
    border-radius: 15px;
    text-align: center;
    box-shadow: 1px 1px 4px #00000011;
    transition: 0.3s;
}

.apply .list li .bg_box:hover{
    background-color: #FFF0C7;
    text-decoration: none;
}

.apply .list li .img_box{
    background-color: #FFFAEA;
    width: 130px;
    height: 130px;
    border-radius: 100px;
    position: relative;
    display: inline-block;
    margin: 0px;
    margin-top: 18px;
}

.apply .list li .img_box img{
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.apply .list li .bg_box p{
    font-size: 1.3rem;
    font-weight: 500;
    color: #222222;
}

.apply .list li .bg_box p .br{
    display: none;
}

/* 20240909 新增 彈跳視窗樣式 */
.parking_box .modal-content{
    padding: 40px 40px;
    border-radius: 10px;
}

.parking_box .modal-content p{
    font-weight: 500;
    font-size: 1.2rem;
    position: relative;
}

.parking_box .modal-content p::before{
    content: "";
    width: calc( 100% - 110px);
    height: 1px;
    background-color: #222222;
    position: absolute;
    top: 12px;
    right: 0;
}

.parking_box .modal-content .btn_box{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.parking_box .modal-content .btn_box li{
    flex-basis: 50%;
    text-align: center;
}

.parking_box .modal-content .btn_box .login_btn{
    background-color: #fff;
    border: 1px solid #F9C022;
    border-radius: 50px;
    width: 95%;
    padding: 5px 15px;
    padding-top: 7px;
    font-weight: 500;
    color: #222222;
    transition: 0.3s;
    cursor: pointer;
}

.parking_box .modal-content .btn_box .login_btn:hover{
    background-color: #B2450F;
    color: #fff;
    border: 1px solid transparent;
    font-weight: 300;
    text-decoration: none;
}


.parking_box .modal-content .return_box{
    position: relative;
    text-align: right;
    margin-top: 22px;
}

.parking_box .modal-content .return_box .return_btn{
    color: #222222;
    border: 1px solid #222222;
    background-color: #fff;
    border-radius: 10px;
    padding: 2px 15px;
    padding-top: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
}

.parking_box .modal-content .return_box .return_btn:hover{
    color: #fff;
    background-color: #222222;
}

.parking_box .modal-content .return_box .return_btn::before{
    content: "";
    width: calc(100% - 75px);
    height: 1px;
    background-color: #222222;
    position: absolute;
    top: 14px;
    left: 0;
}


@media (max-width: 767.98px){

    .apply .list li .img_box{
        width: 110px;
        height: 110px;
    }

    .apply .list{
        margin: 0 -8px;
    }

    .apply .list li{
        margin: 20px 8px;
    }

    .apply .list li .bg_box p{
        font-size: 1.1rem;
    }
}

@media (max-width: 575.98px) {

    .apply .list{
        margin: 8px -4px;
    }

    .apply .list li{
        margin: 8px;
    }

    .apply .list li{
        margin: 8px 4px;
    }

    .apply .list li .img_box{
        width: 90px;
        height: 90px;
        margin-top: 10px;
    }

    .apply .list li .img_box img{
        width: 58px;
    }

    .apply .list li .bg_box p{
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .apply .list li .bg_box p .br{
        display: block;
    }

    /* 20240909 新增 彈跳視窗樣式 */
    .parking_box .modal-content .btn_box li{
        flex-basis: 100%;
        margin: 5px 0;
    }
}



/* 最新消息 */
.news{
    margin-bottom: 30px;
}

.news .title{
    position: relative;
}

.news .title::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #70AC66;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.news .title h1{
    display: inline-block;
    font-size: 1.2rem;
    background-color: #70AC66;
    color: #fff;
    margin: 0;
    padding: 7px 40px;
    padding-top: 11px;
    border-radius: 10px;

    position: relative;
}

.news .title h1::before{
    content: "";
    position: absolute;
    width: calc( 100% - 4px);
    height: calc(100% - 4px);
    border: 1px solid #fff;
    border-radius: 8px;
    top: 2px;
    left: 2px;
}

.news .list{
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 20px 0;
}

.news .list li a.text{
    display: flex;
    padding: 8px 15px;
    margin: 5px 0;
    border-radius: 5px;
    position: relative;
    transition: 0.3s;
    font-weight: 400;
}

.news .list li a.text::before{
    content: "";
    width: 3px;
    height: 18px;
    border-radius: 50px;
    background-color: #F9C023;
    position: absolute;
    top: 10px;
    left: 1px;
    transition: 0.3s;
}

.news .list li a.text:hover{
    background-color: #E5F9E2;
    text-decoration: none;
    font-weight: 500;
}

.news .list li a.text:hover:before{
    background-color: transparent;
}

.news .list li .text p{
    display: inline-block;
    margin: 0;
    color: #222222;
}

.news .list li .text p.time{
    margin-right: 15px;
}

.news .list li .text:hover .time{
    font-weight: 600;
}

.news .list .more_btn{
    text-align: right;
    position: relative;
}

.news .list .more_btn::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #70AC66;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.news .list .more_btn .more{
    color: #70AC66;
    border: 1px solid #70AC66;
    background-color: #fff;
    border-radius: 10px;
    padding: 4px 30px;
    padding-bottom: 3px;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
}

.news .list .more_btn .more:hover{
    background-color: #70AC66;
    color: #fff;
}



/* 照片輪播 */
.photo{
    margin-bottom: 50px;
}

.photo .btn{
    padding: 0;
    margin-bottom: 20px;
    margin-right: 15px;
    transition: 0.3s;
}

.photo .btn:hover{
    opacity: 0.8;
}

.photo button.btn:focus-visible ,.photo button.btn:focus{
    box-shadow: none;
}

.photo .btn p{
    display: inline-block;
    font-size: 1.2rem;
    background-color: #E2EEFF;
    color: #222222;
    margin: 0;
    padding: 7px 40px;
    padding-top: 11px;
    border-radius: 10px;

    position: relative;
    transition: 0.3s;
}

.photo .btn p::before{
    content: "";
    position: absolute;
    width: calc( 100% - 4px);
    height: calc(100% - 4px);
    border: 1px solid #fff;
    border-radius: 8px;
    top: 2px;
    left: 2px;
    transition: 0.3s;
}

.photo .btn.active{
    opacity: 1;
}

.photo .btn.active p{
    background-color: #4E88D9;
    color: #fff;
}

.photo .btn.active p:before{
    border: 1px solid #fff;
}

.photo .list_box{
    position: relative;
    height: 275px;
}

.photo .list_box .list{
    opacity: 0;
    position: absolute;
    width: 100%;
}

.photo .list_box .list.show{
    opacity: 1; 
}

.photo .carousel{
    margin: 0 -10px;
}

.photo .carousel .slick-list{
    border-radius: 10px;
}

.photo .carousel .box{
    margin: 0 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.photo .carousel .box .img_box{
    height: 265px;
    position: relative;
    overflow: hidden;
    background-color: #000000ab;
}

.photo .carousel .box .img_box img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.photo .carousel .box p{
    margin: 0;
    background-color: #000000ab;
    color: #fff;
    text-align: center;
    padding: 8px;
    padding-top: 11px;
    font-size: 1.1rem;
    font-weight: 400;

    position: absolute;
    bottom: 0;
    width: 100%;
}

.photo .slick-prev , .photo .slick-next{
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    opacity: 0.8;
    transition: 0.3s;
    z-index: 55;
}

.photo .slick-prev::before , .photo .slick-next:before{
    content: "";
    background-image: url(../img/arrow_b.svg);
    background-size: 12px;
    background-position: 10px center ;
    width: 30px;
    height: 30px;
    opacity: 1;
}

.photo .slick-prev:hover , .photo .slick-next:hover{
    opacity: 1;
}

.photo .slick-prev{
    left: 30px;
    z-index: 2;
}

.photo .slick-prev::before{
    transform: rotate(180deg);
    background-position: 11px center;
}

.photo .slick-dots{
    display: none;
}

@media (max-width: 1199.98px) {

    .photo .list_box{
        height: 230px;
    }

    .photo .carousel .box .img_box{
        height: 220px;
    }
}

@media (max-width: 991.98px) {

    .photo .btn_box{
        display: flex;
        margin: 0 -5px;
    }

    .photo .btn{
        flex-basis: calc(100% / 3);
        margin: 0 5px;
        margin-bottom: 20px;
    }

    .photo .btn p{
        width: 100%;
    }

    .photo .list_box{
        height: 260px;
    }

    .photo .carousel .box .img_box{
        height: 250px;
    }
}

@media (max-width: 767.98px) {

    .photo .btn p{
        font-size: 1.1rem;
        padding: 7px 25px;
    }

    .photo .list_box{
        height: 390px;
    }

    .photo .carousel .box .img_box{
        height: 380px;
    }
}

@media (max-width: 575.98px) {

    .photo .btn_box{
        display: flex;
        flex-direction: column;
    }

    .photo .btn{
        margin: 0;
        margin-bottom: 8px;
    }

    .photo .btn p{
        width: 100%;
    }

    .photo .list_box{
        height: 70vw;
    }

    .photo .carousel .box .img_box{
        height: 68vw;
    }  
}



/* 尾頁 */
footer{
    background-color: #F9C022;
}

footer .text_box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    padding-bottom: 42px;
}

footer .text_box .logo_box{
    display: flex;
    align-items: center;
}

footer .text_box .logo_box img{
    width: 170px;
}

footer .text_box .logo_box p{
    margin: 0;
    margin-left: 10px;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

footer .text_box .logo_box p span{
    font-size: 1.2rem;
}

footer .text_box .text{
    margin-left: 40px;
}

footer .text_box .text p{
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

footer .bottom{
    background-color: #B2450F;
    height: 10px;
}

@media (max-width: 767.98px) {

    footer .text_box{
        flex-direction: column;
    }

    footer .text_box .text{
        margin-left: 0;
        margin-top: 15px;
    }

    footer .text_box .text p{
        line-height: 1.35rem;
    }
}



/* 麵包屑 */
.breadcrumb_box{
    background-color: #F9C022;
}

.breadcrumb_box .breadcrumb{
    margin: 0 auto;
    background-color: transparent;
}

.breadcrumb_box .breadcrumb li{
    color: #421A06;
    font-weight: 400;
}

.breadcrumb_box .breadcrumb li a{
    color: #222222;
    transition: 0.3s;
}

.breadcrumb_box .breadcrumb li a:hover{
    text-decoration: none;
    color: #B2450F;
}



/* 表單1 教職員工借用職務宿舍申請表 */
.form .box_bg{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 2px 3px #00000011;
    padding: 25px;
    margin-top: 40px;
}

/* 標題 */
.form .box_bg .title_box{
    position: relative;
    margin-bottom: 20px;

    display: flex;
    /* justify-content: space-between; */
}

.form .box_bg .title_box h1{
    font-size: 1.5rem;
    color: #222222;
    background-color: #fff;
    padding-right: 10px;
    position: relative;
    display: inline-block;
    margin: 0;
}

.form .box_bg .title_box::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #222222;

    position: absolute;
    top: 12px;

    animation: aa 2s;
}

@keyframes aa {
    0%{
        width: 0%;
    }

    100%{
        width: 100%;
    }
}

/* 縮放流程圖 */
.form .box_bg .title_box .open_btn{
    border: 1px solid #222222;
    background-color: #fff;
    border-radius: 5px;
    color: #222222;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 2px 10px 2px 42px;
    /* padding-top: 1px; */
    /* padding-left: 42px; */
    margin: 0;
    transform: translateY(-3px);

    transition: 0.3s;
    cursor: pointer;
    z-index: 2;

    position: relative;
}

.form .box_bg .title_box .open_btn::after{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/form_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px;

    position: absolute;
    left: 8px;
    top: 0;

    transition: 0.3s;
}

.form .box_bg .title_box .open_btn:focus{
    outline: none;
}

.form .box_bg .title_box .open_btn:hover{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
    font-weight: 400;
    padding: 2px 23px 2px 29px;
}

.form .box_bg .title_box .open_btn:hover:after{
    content: "";
    opacity: 0;
    left: 40px;
}

.form .box_bg .title_box .open_btn.add{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
    font-weight: 400;
    padding: 2px 23px 2px 29px;
}

.form .box_bg .title_box .open_btn.add:after{
    content: "";
    display: none;
}

.form .box_bg .process_box{
    display: none;
}

.form .box_bg .process_box img{
    width: 100%;
}



/* 小標 */
.form .box_bg .title h2{
    background-color: #B2450F;
    color: #fff;
    font-size: 1.1rem;
    padding: 5px 10px;
    padding-top: 7px;
    font-weight: 400;
    border-radius: 7px 7px 0 0;
    margin: 8px 0;
}

/* 申請宿舍類別 */
.form .box_bg .check_box{
    display: flex;
    margin: 15px 10px;
    margin-top: 20px;
}

.form .box_bg .check_box div{
    padding-right: 30px;
    margin-right: 50px;
}

.form .box_bg .check_box div:nth-child(1){
    border-right: 1px solid #222222;
}

.form .box_bg .check_box p{
    margin: 0;
    font-weight: 500;
    color: #222222;
    font-size: 1.05rem;
}

.form .box_bg .check_box p span{
    font-size: 0.9rem;
}

.form .box_bg .check_box .form-check{
    margin: 8px 0;
}

.form .box_bg .check_box .form-check-label{
    color: #B24510;
    font-weight: 600;
}

/* 20240909 新增 color */
.form .box_bg .check_box + p{
    text-align: right;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 14px;
    color: #B2450F;
}

/* 欄位 */
.form .box_bg .box{
    display: flex;
    flex-wrap: wrap;
}

.form .box_bg .box .form-group{
    flex-basis: calc( 100% / 2);
    padding: 15px 10px;
    margin: 0px;

    display: flex;
    align-items: center;
}

.form .box_bg .box .form-group.full{
    flex-basis: 100%;
}

.form .box_bg .box .form-group label{
    margin: 0;
    margin-right: 10px;
    font-weight: 500;
}

.form .box_bg .box .form-group .form-control{
    flex-basis: calc( 100% - 300px);
    flex-grow: 1;
    border: 1px solid #00000011;
    box-shadow: inset 2px 2px 3px #00000011;
    color: #565656;
}

.form .box_bg .box .form-group .form-control::placeholder{
    color: #929292;
    font-size: 0.9rem;
    font-weight: 300;
}

/* 單選 */
.form .box_bg .box .form-group .check{
    display: flex;
}

.form .box_bg .box .form-group .form-check{
    margin-left: 5px;
    margin-right: 5px;
}

/* 單選 樣式 */
.form .box_bg input[type=radio]::before{
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid #222222;
    border-radius: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.form .box_bg input[type=radio]:checked::before{
    border: 1px solid #B2450F;
}

.form .box_bg input[type=radio]:checked:after{
    content: "";
    width: 9px;
    height: 9px;
    background-color: #B2450F;
    border-radius: 50px;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* 檔案上傳 */
.form .box_bg .box .custom_file{
    padding: 0;
    overflow: hidden;
    position: relative;
}

.form .box_bg .box .custom_file input{
    height: 100%;
    width: 100%;
    transform: translateX(-80px);

    cursor: pointer;
    color: #565656;
    padding: 3px 0px;
}

.form .box_bg .box .custom_file label{
    border: 1px solid #B2450F;
    height: 100%;
    border-radius: 5px;
    color: #B2450F;
    font-size: 0.95rem;
    font-weight: 400;
    padding: 6px 10px;
    padding-top: 7px;
    margin: 0;

    position: absolute;
    top: 0;
    right: 0;
    transition: 0.3s;
    cursor: pointer;
}

.form .box_bg .box .custom_file:hover label{
    background-color: #B2450F;
    color: #fff;
}

/* 分隔線 */
.form .box_bg .box hr.line{
    border-top: 1px solid #222222;
    margin: 15px 0;
    width: 100%;
}

/* 自有住宅狀況 */
.form .box_bg .box .residence_box{
    align-items: flex-start;
    padding-right: 0;
}

.form .box_bg .box .residence_box .residence{
    margin-left: 10px;
    flex-basis: calc( 100% - 300px);
    flex-grow: 1;
}

.form .box_bg .box .residence_box .residence .check{
    margin-top: 5px;
}

.form .box_bg .box .residence_box .residence .line{
    border-color: #B2450F;
}

/* 親屬資料 */
.form .box_bg .box .list{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    margin: 15px 10px;
}

.form .box_bg .box .list li{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    position: relative;
}

.form .box_bg .box .list li .form-group{
    padding: 0;
    flex-grow: 1;
    flex-basis: 250px;

    margin-bottom: 8px;
}

.form .box_bg .box .list li.title .form-group{
    padding: 0 5px;
}

.form .box_bg .box .list li .form-group:nth-child(1){
    flex-basis: 100px;
}

.form .box_bg .box .list li .form-group:nth-child(5){
    margin-right: 50px;
}

.form .box_bg .box .list li.main .form-group label{
    display: none;
}

/* 新增 */
.form .box_bg .box .list .title .new_btn{
    border: 1px solid #B2450F;
    color: #B2450F;
    font-size: 0.9rem;
    border-radius: 5px;
    padding: 0px 10px;
    padding-top: 3px;
    background-color: transparent;
    cursor: pointer;
    transition: 0.3s;

    position: absolute;
    top: -2px;
    right: 0;
}

.form .box_bg .box .list .title .new_btn:hover{
    background-color: #B2450F;
    color: #fff;
}

.form .box_bg .box .list .main .form-control{
    flex-basis: calc(100% - 300px);
    flex-grow: 1;
    border: 1px solid #00000011;
    box-shadow: inset 2px 2px 3px #00000011;
    color: #565656;
}

.form .box_bg .box .list .main .form-control::placeholder{
    color: #929292;
    font-size: 0.9rem;
    font-weight: 300;
}

/* 刪除 */
.form .box_bg .box .list .main .cancel_btn{
    border: 1px solid transparent;
    color: #575757;
    font-size: 0.9rem;
    border-radius: 5px;
    padding: 5px 10px;
    padding-top: 7px;
    background-color: #E6E6E6;
    border: 1px solid #d1d1d1;
    cursor: pointer;
    transition: 0.3s;

    position: absolute;
    top: 1px;
    right: 0;
}

.form .box_bg .box .list .main .cancel_btn:hover{
    background-color: #575757;
    color: #E6E6E6;
}

.form .box_bg .box .list .main .cancel_btn.add{
    pointer-events: none;
    opacity: 0.7;
}

/* 20240909 新增 */
.form .box_bg .box .need_file{
    display: none;
}

/* 申請人具結聲明 */
.form .box_bg .box .text{
    font-weight: 500;
    padding: 5px;
}

/* 送出 */
.form .box_bg  + .btn_box{
    text-align: center;
    margin: 40px 0;
    margin-bottom: 80px;
}

.form .box_bg + .btn_box .send_box{
    border: 1px solid #B2450F;
    border-radius: 5px;
    background-color: transparent;
    color: #B2450F;
    padding: 3px 45px;
    padding-top: 5px;
    transition: 0.3s;
}

.form .box_bg + .btn_box .send_box:hover{
    background-color: #B2450F;
    color: #fff;
}

@media (max-width: 991.98px) {

    .form .box_bg .title_box .open_btn{
        display: none;
    }

    .form .box_bg .process_box{
        display: none !important;
    }

    .form .box_bg .check_box div{
        padding-right: 10px;
        margin-right: 20px;
    }    

    .form .box_bg .box .form-group{
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 5px 2px;
    }

    .form .box_bg .box .custom-file input{
        padding: 2px 0px;
    }

    .form .box_bg .box .residence_box .residence{
        margin-left: 0;
        margin-top: 10px;
        font-size: 0.9rem;
    }

    .form .box_bg .box .list li .form-group{
        flex-basis: 190px;
    }

    .form .box_bg .box .list li .form-group:nth-child(1){
        flex-basis: 86px;
    }

    .form .box_bg .box .list .title label{
        font-size: 0.9rem;
    }

    .form .box_bg .box .list .main .form-control{
        padding: 5px 5px;
        height: initial;
    }
}

@media (max-width: 767.98px) {
    
    .form .box_bg .check_box{
        display: flex;
        margin: 15px 10px;
        margin-top: 20px;

        flex-direction: column;
    }

    .form .box_bg .check_box div{
        padding-right: 0px;
        margin-right: 0px;
    }    

    .form .box_bg .check_box div:nth-child(1){
        border-right: none;
        border-bottom: 1px solid #222222;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .form .box_bg .box .list{
        margin: 15px 2px;
    }

    .form .box_bg .box .list li{
        flex-direction: column;
    }

    .form .box_bg .box .list li .form-group{
        flex-basis: 0;
    }

    .form .box_bg .box .list li.main .form-group label{
        display: inline-block;
    }

    .form .box_bg .box .list li.title .form-group{
        display: none;
    }

    .form .box_bg .box .list li .form-group:nth-child(1){
        flex-basis: 0;
    }

    .form .box_bg .box .list li .form-group:nth-child(5){
        margin-right: 0;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #B2450F;
    }

    .form .box_bg .box .list li:nth-last-child(1) .form-group:nth-child(5){
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .form .box_bg .box .list .title .new_btn{
        top: -7px;
        z-index: 55;
    }

    .form .box_bg .box .list .main .cancel_btn{
        padding: 0px 12px;
        padding-top: 2px;
        top: -6px;
    }

    .form .box_bg .box .list .main:nth-child(2) .cancel_btn{
        right: 55px;
    }
}

@media (max-width: 575.98px) {

    .form .box_bg{
        padding: 25px 15px;
    }

    .form .box_bg .title_box h1{
        font-size: 1.2rem;
    }
}



/* 表單2 學人宿舍借住申請書 */
/* 申請宿舍種類 */
.form_2 .box_bg .check_box .form-check span{
    color: #222222;
    font-weight: 400;
    font-size: 0.9rem;
}

.form_2 .box_bg .check_box{
    display: flex;
    margin: 15px 10px;
    margin-top: 20px;

    flex-direction: column;
}

.form_2 .box_bg .check_box div{
    padding-right: 0px;
    margin-right: 0px;
}    

.form_2 .box_bg .check_box div:nth-child(1){
    border-right: none;
    border-bottom: 1px solid #222222;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

/* 20240909 刪掉 font-size font-weight 新增 color */
.form_2 .box_bg .check_box + p{
    text-align: left;
    border-top: 1px solid #222222;
    padding: 10px 0;
    padding-top: 15px;
    margin: 10px;
    /* font-size: 1rem; */
    /* font-weight: 400; */
    color: #B2450F;
}



/* 20240909 新增 ↓ */
.form_2 .box_bg .check_box .text{
    padding-left: 18px;
    margin: 5px 0;

    position: relative;
    transition: 0.3s;
    cursor: pointer;
}

.form_2 .box_bg .check_box .text::before{
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid #222222;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 5px;
}

.form_2 .box_bg .check_box .text.add::before{
    background-color: transparent;
    border-radius: 0;
    width: 5px;
    height: 5px;
    border-top: 5px solid #B2450F;
    border-right: 5px solid #B2450F;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    left: -2px;
    top: 6px;
}

.form_2 .box_bg .check_box .text:hover{
    color: #B2450F;
}

.form_2 .box_bg .check_box .text ~ .form-check{
    display: none;
    margin-left: 18px;
}

.form_2 .box_bg .check_box div.add:nth-child(1){
    border-right: none;
    border-bottom: 1px solid #222222;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.form_2 .box_bg .check_box div:nth-child(1){
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form_2 .box_bg .check_box .room_box {
    display: flex;
    flex-wrap: wrap;
    display: none;
}

.form_2 .box_bg .check_box div.room_box .form-check{
    padding: 0px 0px;
    margin: 10px 20px 5px 18px;
    border-bottom: none;
}

.form_2 .box_bg .check_box div.room_box .form-check label{
    font-weight: 500;
    color: #222222;
}
/* 20240909 新增 ↑ */


/* 身分證號碼或護照 */
.form_2 .box_bg .box .id_box .form-group{
    padding: 0;
    flex-basis: calc( 100% -300px);
    flex-grow: 1;
}

.form_2 .box_bg .box .id_box .form-group .confirm_btn{
    border: 1px solid #B2450F;
    color: #B2450F;
    font-size: 0.9rem;
    border-radius: 5px;
    padding: 5px 12px;
    padding-top: 7px;
    background-color: transparent;
    cursor: pointer;
    transition: 0.3s;
    margin-left: 10px;
}

.form_2 .box_bg .box .id_box .form-group .confirm_btn:hover{
    background-color: #B2450F;
    color: #fff;
}

/* 20240904 新增 ↓ */
.form_2 .box_bg .box .id_box{
    position: relative;
    margin-bottom: 10px;
}

.form_2 .box_bg .box .id_box + .form-group{
    margin-bottom: 10px;
}

.form_2 .box_bg .box .id_box p{
    margin: 0;
    font-weight: 500;
    color: #B2450F;
    font-size: 0.9rem;
    position: absolute;
    bottom: -10px;
    left: 85px;
}
/* 20240904 新增 ↑ */

.form_2 .box_bg .box .date_box .form-group{
    padding: 0;
    flex-basis: calc( 100% - 300px);
    flex-grow: 1;
}

/* 借住期間 */
.form_2 .box_bg .box .date_box .form-group label{
    margin: 0 10px;
}

/* 申請事由 文字框 */
.form_2 .box_bg .box .textarea_box{
    align-items: flex-start;
}

.form_2 .box_bg .box .textarea_box .textarea{
    flex-grow: 1;
}

/* 20240909 新增 font-size line-heigh */
.form_2 .box_bg .box .textarea_p{
    margin: 0px 10px;
    font-weight: 500;
    color: #B2450F;
    font-size: 0.9rem;
    line-height: 1rem;
}

/* 隨行眷屬 */
.form_2 .box_bg .box .list li .form-group{
    flex-basis: 100px;
}

.form_2 .box_bg .box .list li .form-group:nth-child(2){
    flex-basis: 200px;
}

.form_2 .box_bg .box .list li .form-group:nth-child(5){
    flex-basis: 350px;
}

@media (max-width: 991.98px) {

    .form_2 .box_bg .box .id_box .form-group{
        flex-direction: row;
        width: 100%;
    }

    /* 20240904 新增 ↓ */
    .form_2 .box_bg .box .id_box{
        margin-bottom: 18px;
    }

    .form_2 .box_bg .box .id_box + .form-group{
        margin-bottom: 0px;
    }

    .form_2 .box_bg .box .id_box p{
        bottom: -18px;
        left: 2px;
        width: calc(100% + 14px);
    }
    /* 20240904 新增 ↑ */

    .form_2 .box_bg .box .date_box .form-group{
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .form_2 .box_bg .box .textarea_box .textarea{
        width: 100%;
    }

    .form_2 .box_bg .box .list li .form-group{
        flex-basis: 120px;
    }

    .form_2 .box_bg .box .list li .form-group:nth-child(5){
        flex-basis: 250px;
    }

    /* 20240909 新增 */
    .form_2 .box_bg .box .textarea_p{
        margin: 0;
    }
}

@media (max-width: 767.98px) {

    .form_2 .box_bg .box .list li .form-group{
        flex-basis: 0;
    }

    .form_2 .box_bg .box .list li .form-group:nth-child(2){
        flex-basis: 0px;
    }

    .form_2 .box_bg .box .list li .form-group:nth-child(5){
        flex-basis: 0px;
    }
}

@media (max-width: 575.98px) {

    .form_2 .box_bg .box .date_box .form-group{
        flex-wrap: wrap;
    }

    .form_2 .box_bg .box .date_box .form-group label{
        margin: 10px 10px;
    }
}







/* 20240920 表單2 學人宿舍 宿舍種類 圖文列表 ↓ */
.form_2_list .list li{
    display: flex;
    margin: 20px 0;

    border-bottom: 1px solid #222222;
    padding-bottom: 20px;
}

.form_2_list .list li  .slick-list.draggable{
    border-radius: 15px;
}

.form_2_list .list li .img_list{
    width: 30%;
}

.form_2_list .list li .img_list .img_box{
    height: 238px;
    position: relative;
    overflow: hidden;
    background-color: #000000ab;
    border-radius: 15px;
}

.form_2_list .list li .img_list .img_box img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.form_2_list .slick-prev , .form_2_list .slick-next{
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    opacity: 0.8;
    transition: 0.3s;
}

.form_2_list .slick-prev::before , .form_2_list .slick-next:before{
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: 12px;
    background-position: 10px center ;
    width: 30px;
    height: 30px;
    opacity: 1;
}

.form_2_list .slick-prev:hover , .form_2_list .slick-next:hover{
    opacity: 1;
}

.form_2_list .slick-prev{
    left: 10px;
    z-index: 2;
}

.form_2_list .slick-prev::before{
    transform: rotate(180deg);
    background-position: 11px center;
}

.form_2_list .list li .text_box{
    flex-grow: 1;
}

/* 20240923 刪掉class a連結 ↓ */
/* 修改 */
.form_2_list .list li .text_box{
    /* color: #222222; */
    font-weight: 400;
    /* display: inline-block; */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */
    /* width: 100%; */
    padding: 5px 15px;

    transition: 0.3s;
}

/* .form_2_list .list li .text_box:hover{ */
    /* text-decoration: none; */

    /* border-radius: 0 15px 15px 0; */
    /* box-shadow: 1px 1px 3px #b2450f38; */
    /* padding: 15px; */
/* } */

.form_2_list .list li .text_box .text h1{
    font-size: 1.3rem;
    color: #B2450F;
}

.form_2_list .list li .text_box .text h1 .tag{
    /* background-color: #fff; */
    color: #B2450F;
    border: 1px solid #B2450F;
    font-size: 1rem;

    display: inline-block;
    padding: 3px 20px;
    padding-top: 4px;
    border-radius: 5px;
    margin-right: 10px;

    transform: translateY(-2px);
}

/* 修改justify-content */
.form_2_list .list li .text_box .btn_box{
    justify-content: flex-end;
    margin: 0;
    margin-top: 5px;

    position: relative;

    overflow: hidden;
}

/* .form_2_list .list li .text_box .btn_box::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #B2450F;

    position: absolute;
    top: 50%;
    left: -100%;

    transition: 0s;
} */

/* .form_2_list .list li .text_box:hover .btn_box:before{
    left: 100%;
    transition: 1s;
} */

.form_2_list .list li .text_box .btn_box .next_btn{
    background-color: #fff;
    color: #B2450F;
    border: 1px solid #B2450F;
    border-radius: 5px;
    padding: 3px 20px;
    padding-bottom: 1px;

    transition: 0.3s;

    z-index: 1;
}

/* 修改hover位置 */
.form_2_list .list li .text_box .next_btn:hover{
    background-color: #B2450F;
    color: #fff;
}
/* 20240923 刪掉class a連結 ↑ */

/* 20240923　新增 ↓ */
.form_2_list .form-control{
    padding-left: 5px;
}
/* 日期區間 */
.form_2_list .box_bg .box .date_box .form-control{
    background-color: transparent;
}

.form_2_list .box_bg .box .date_box .search_btn{
    background-color: transparent;
    color: #B2450F;
    border: 1px solid #B2450F;
    border-radius: 5px;
    height: 100%;
    padding: 1px 15px;
    padding-top: 3px;
    margin-left: 15px;
}

.flatpickr-month{
    margin: 5px 0;
}

span.flatpickr-prev-month, span.flatpickr-next-month{
    padding: 7px 12px;
}

span.flatpickr-day.nextMonthDay{
    color: #979797;
}

/* 房間 下拉選單 */
.form_2_list .room_box.box{
    margin: 0;
    padding: 0;
    box-shadow: none;
    flex-grow: 1;
    margin-right: 15px;
}

.form_2_list .room_box.box .form-group{
    padding: 0;
    /* margin-right: 15px; */
}
/* 20240923　新增 ↑ */

@media (max-width: 1199.98px) {

    .form_2_list .list li .img_list .img_box{
        height: 192px;
    }
}

@media (max-width: 991.98px) {

    .form_2_list .list li .img_list{
        width: 40%;
    }

    /* 20230923 新增 */
    .form_2_list .box_bg .box .form-group{
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 767.98px) {

    .form_2_list .list li{
        flex-wrap: wrap;
    }

    .form_2_list .list li .img_list{
        width: 100%;
    }

    .form_2_list .list li .img_list .img_box{
        height: 343px;
    }

    /* 20240923 刪掉class a連結 ↓ */
    .form_2_list .list li .text_box{
        padding: 15px 0;
    }

    .form_2_list .list li .text_box:hover{
        box-shadow: none;
        padding: 15px 0;
    }
    /* 20240923 刪掉class a連結 ↑ */
}

@media (max-width: 575.98px) {

    .form_2_list .list li .img_list .img_box{
        height: 56vw;
    }

    /* 20240923 新增 ↓ */
    .form_2_list .box_bg .box .date_box{
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .form .box_bg .box .date_box label{
        flex-basis: 100%;
    }

    .form_2_list .box_bg .box .date_box .form-control{
        flex-basis: 100%;
    }

    .form_2_list .box_bg .box .date_box .search_btn{
        height: initial;
        margin-top: 10px;
    }

    .form_2_list .room_box.box{
        flex-basis: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    /* 20240923 新增 ↑ */
}
/* 20240920 表單2 學人宿舍 宿舍種類 圖文列表 ↑ */









/* 表單3 南菀地下停車場停車位申請表 */
.form_3 .box_bg .box .address_box{
    align-items: flex-start;
}

.form_3 .box_bg .box .address_box .form-group{
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.form_3 .box_bg .box .address_box .check{
    margin-bottom: 5px;
}

.form_3 .box_bg .box .drving_box{
    flex-direction: column;
    align-items: flex-start;
}

.form_3 .box_bg .box .drving_box .form-group{
    padding: 0;
    width: 100%;
}

.form_3 .box_bg .box .drving_box .file_box{
    width: 100%;
    border-radius: 5px;
    border: 1px solid #e6e6e6;

    position: relative;
}

.form_3 .box_bg .box .drving_box .file_box:nth-child(1){
    margin-right: 20px;
}


.form_3 .box_bg .box .drving_box .file_box input{
    width: calc( 100% + 81px);
    height: 280px;
    cursor: pointer;

    opacity: 0;
}

.form_3 .box_bg .box .drving_box .file_box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);

    opacity: 0;
    z-index: 10;
    background-color: #fff;
}

.form_3 .box_bg .box .drving_box .file_box p{
    margin: 0;
    font-size: 0.95rem;

    position: absolute;
    top: 33%;

    width: 100%;
    padding: 0 10px;
    text-align: center;
}

/* 20240909 修改class名稱 增加.drving_box */
.form_3 .box_bg .box .drving_box .file_box p span{
    font-weight: 500;
    font-size: 1.1rem;
    display: inline-block;
    margin-bottom: 5px;
}

/* 20240909 修改class名稱 增加.drving_box */
.form_3 .box_bg .box .drving_box .custom_file label{
    height: initial;
    padding: 3px 15px;
    padding-top: 5px;
    
    top: 75%;
    left: 50%;
    right: initial;
    transform: translateX(-50%);

    z-index: 11;
}

/* 20240909 修改class名稱 增加.drving_box */
.form_3 .box_bg .box .drving_box .custom_file label.add{
    background-color: #B2450F;
    color: #fff;
}

@media (max-width: 991.98px) {

    .form_3 .box_bg .box .address_box .form-group{
        width: 100%;
    }

    .form_3 .box_bg .box .drving_box .form-group{
        flex-direction: row;
    }

    .form_3 .box_bg .box .drving_box .file_box{
        margin-bottom: 15px;
    }

    .form_3 .box_bg .box .drving_box .file_box input{
        height: 200px;
    }

    .form_3 .box_bg .box .drving_box .file_box p{
        top: 22%;
    }
}

@media (max-width: 767.98px) {

    .form_3 .box_bg .box .drving_box .form-group{
        flex-direction: column;
    }

    .form_3 .box_bg .box .drving_box .file_box input{
        height: 280px;
    }

    .form_3 .box_bg .box .drving_box .file_box p{
        top: 34%;
    }
}

@media (max-width: 575.98px) {

    .form_3 .box_bg .box .drving_box .file_box input{
        height: 52vw;
    }

    .form_3 .box_bg .box .drving_box .file_box p{
        top: initial;
        bottom: 22vw;
    }
}



/* progress_list 申請進度查詢 */
.list > .bg{
    height: 300px;
}

/* 標題 */
.list .title_box{
    position: relative;
    margin-bottom: 20px;
    margin-top: 40px;
}

.list .title_box h1{
    font-size: 1.5rem;
    color: #222222;
    background-color: #F9C022;
    padding-right: 10px;
    position: relative;
    display: inline-block;
    margin: 0;
}

.list .title_box::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #222222;

    position: absolute;
    top: 12px;
}

/* 頁籤按鈕 */
.list .btn_box{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;

    margin: 0 -10px;
}

.list .btn_box li{
    padding: 12px 10px;

    flex-grow: 1;
}

.list .btn_box li .item_btn{
    width: 100%;
    background-color: #fff;
    box-shadow: 1px 2px 3px #00000011;
    border: none;
    border-radius: 8px;
    padding: 10px 5px;
    font-weight: 500;
    font-size: 1.2rem;

    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.3s;
}

.list .btn_box li .item_btn:focus{
    outline: none;
}

.list .btn_box li .item_btn:hover{
    background-color: #fff6de;
}

.list .btn_box li .item_btn.active{
    background-color: #FFF0C7;
    box-shadow: 1px 2px 3px #00000011 , inset 0px 2px 3px #00000011;

    border: 1px solid #ffffff48;
}

.list .box{
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;

    margin: 20px 0;

    box-shadow: 1px 2px 3px #00000011;
}

/* 切換內容 */
.list .list_box{
    display: none;
}

.list .list_box.show{
    display: block;
}

/* 小標 */
.list .box .title{
    background-color: #B2450F;
    color: #fff;
    padding: 10px 15px;
    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list .box .title h2{
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0;
    /* flex-basis: calc( 100% - 110px); */
}

.list .box .title h2 span{
    background-color: #fff;
    color: #B2450F;
    font-weight: 500;
    padding: 3px 12px;
    padding-bottom: 2px;
    border-radius: 5px;
    margin-bottom: 3px;
    margin-right: 5px;
    display: inline-block;
}

/* 按鈕 */
/* .progress_list .box .title .details_btn{
    background-color: transparent;
    border: none;
    color: #fff;

    transition: 0.3s;
    cursor: pointer;
    position: relative;

    padding-left: 15px;
}

.progress_list .box .title .details_btn:focus{
    outline: none;
}

.progress_list .box .title .details_btn::before{
    content: "▶";
    font-size: 0.6rem;
    margin-right: 8px;
    display: inline-block;
    transform: translateY(-2px);

    position: absolute;
    top: 8px;
    left: 0;

    transition: 0.3s;
}

.progress_list .box .title .details_btn::after{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;

}

.progress_list .box .title .details_btn:hover{
    padding-left: 0;
    padding-right: 15px;
}

.progress_list .box .title .details_btn:hover:before{
    left: calc( 100% - 10px);
} */

/* 文字內容 */
.list .box .text_box{
    display: flex;
    align-items: center;
}

/* 進度 */
.list .box .text_box .progress_box{
    margin: 0;
    padding: 0;
    list-style: none;
    flex-basis: 42%;

    display: flex;
}

.list .box .text_box .progress_box li{
    box-shadow: 1px 2px 3px #0000001e;
    border-radius: 10px;
    padding: 15px;
    padding-top: 22px;
    margin: 30px 0px;
    margin-left: 15px;
    text-align: center;

    flex-basis: 130px;
    flex-grow: 1;
}

.list .box .text_box .progress_box li.active{
    background-color: #FFF0C7;
}

.list .box .text_box .progress_box li.active.fail_box p{
    color: #D70000;
}

.list .box .text_box .progress_box li img{
    width: 60px;
}

.list .box .text_box .progress_box li p{
    margin: 0;
    font-weight: 500;
    font-size: 1.2rem;
    padding-top: 6px;
}

/* 文字 */
.list .box .text_box .text{
    flex-basis: 58%;
    margin: 10px 0;
    margin-left: 15px;

    display: flex;
    flex-wrap: wrap;
}

.list .box .text_box .text div{
    flex-basis: 50%;

    display: flex;
    /* margin: 15px; */
    padding: 8px;

    border-bottom: 1px dashed #e7e6e6;
}

.list .box .text_box .text div:nth-last-child(1){
    border-bottom: none;
}

.list .box .text_box .text div.full{
    flex-basis: 100%;
}

.list .box .text_box .text p{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    color: #303030;

    flex-basis: 95px;
}

.list .box .text_box .text p.basis_60{
    flex-basis: 60px;
}

.list .box .text_box .text p:nth-last-child(1){
    flex-grow: 1;
    /* font-size: 1.1rem; */
    font-weight: 500;
    color: #222222;
}

/* 查無資料 */
.list .list_box .none_text{
    text-align: center;
    margin: 50px 10px;
    font-size: 1.5rem;
    font-weight: 500;
}

/* 頁碼 */
.list .pagination{
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 60px;
}

.list .pagination .page-item .page-link{
    border: 1px solid #222222;
    border-radius: 50px;
    margin: 0 5px;
    color: #222222;
    padding: 4px 9px 3px 9px;

    transition: 0.3s;
}

.list .pagination .page-item .page-link:hover{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
}

.list .pagination .page-item .page-link.active{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
}

@media (max-width: 991.98px) {

    .list .btn_box li{
        flex-basis: calc( 100% / 3);
        padding: 8px 10px;
    }

    .list .box .text_box{
        flex-direction: column;
    }

    .list .box .text_box .progress_box{
        width: 100%;
    }

    .list .box .text_box .progress_box li{
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .list .box .text_box .progress_box li:nth-last-child(1){
        margin-right: 15px;
    }

    .list .box .text_box .text{
        width: 100%;
    }
}

@media (max-width: 575.98px) {

    .list > .bg{
        height: 500px;
    }

    .list .btn_box li{
        flex-basis: 50%;
        padding: 7px 10px;
    }

    .list .btn_box li .item_btn{
        padding: 12px 5px;
    }

    .list .box .title{
        padding: 10px 10px; 
    }

    .list .box .text_box .progress_box li{
        margin-left: 10px;
        padding: 10px;
        padding-top: 15px;
    }

    .list .box .text_box .progress_box li:nth-last-child(1){
        margin-right: 10px;
    }

    .list .box .text_box .progress_box li img{
        width: 45px;
    }

    .list .box .text_box .progress_box li p{
        font-size: 1rem;
    }

    .list .box .text_box .progress_box li:nth-last-child(1) p{
        font-size: 0.95rem;
        margin-top: 1px;
    }

    .list .box .text_box .text div{
        flex-basis: 100%;
    }

    .list .box .text_box .text p{
        font-size: 1.1rem;
    }

    .list .box .text_box .text p.basis_60{
        flex-basis: 95px;
    }
}


/* 訂單管理 order_list */
.order_list .box .text_box .text{
    flex-basis: 100%;
    margin: 10px 15px;
}

.order_list .box .title h2 p{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
}

.order_list .box .text_box .text div.payment_box{
    border-top: 1px solid #B2450F;
    align-items: center;
    flex-wrap: wrap;
}

.order_list .box .text_box .text div.payment_box .payment{
    border: none;
    background-color: transparent;
    display: inline-block;
    color: #B2450F;
    font-weight: 500;

    display: flex;
    padding: 5px 0;
    align-items: center;

    transform: translateY(-1px);
}

.order_list .box .text_box .text div.payment_box button.payment{
    cursor: pointer;
    transition: 0.3s;
}

.order_list .box .text_box .text div.payment_box button.payment:hover{
    transform: scale(1.05);
}

.order_list .box .text_box .text div.payment_box .payment img{
    width: 35px;
    display: inline-block;
}

.order_list .box .text_box .text div.payment_box .payment span{
    font-size: 1.15rem;
    display: inline-block;
    margin-left: 5px;
    color: #222222;
}

.order_list .box .text_box .text div.payment_box .payment .fail{
    color: #D70000;
}

.order_list .box .text_box .text div.payment_box .reason{
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    margin-left: 95px;
    color: #D70000;

    background-image: url(../img/fail_icon.svg);
    background-position: left 1px;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 22px;

    flex-basis: 100%;
}



/* list_1 列表頁 */
.list_1 > .bg{
    height: 350px;
}

.list_1 .list_box{
    margin: 40px 0;
    background-color: #fff;
    padding: 40px 25px;
    padding-bottom: 30px;
    border-radius: 10px;
    box-shadow: 1px 2px 3px #00000011;
}

/* 標題 */
.list_1 .list_box .title_box{
    position: relative;
    margin-bottom: 20px;
}

.list_1 .list_box .title_box h1{
    font-size: 1.5rem;
    color: #222222;
    background-color: #fff;
    padding-right: 10px;
    position: relative;
    display: inline-block;
    margin: 0;
}

.list_1 .list_box .title_box::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #222222;

    position: absolute;
    top: 12px;
}

.list_1 .list_box .list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.list_1 .list_box .list li a.text{
    display: flex;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 5px;
    position: relative;
    transition: 0.3s;
    font-weight: 400;
    font-size: 1.15rem;
}

.list_1 .list_box .list li a.text::before{
    content: "";
    width: 3px;
    height: 18px;
    border-radius: 50px;
    background-color: #F9C023;
    position: absolute;
    top: 14px;
    left: 1px;
    transition: 0.3s;
}

.list_1 .list_box .list li a.text:hover{
    background-color: #E5F9E2;
    text-decoration: none;
    font-weight: 500;
}

.list_1 .list_box .list li a.text:hover:before{
    background-color: transparent;
}

.list_1 .list_box .list li .text p{
    display: inline-block;
    margin: 0;
    color: #222222;
}

.list_1 .list_box .list li .text p.time{
    margin-right: 15px;
}

.list_1 .list_box .list li .text:hover .time{
    font-weight: 600;
}

/* 頁碼 */
.list_1 .pagination{
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 60px;
}

.list_1 .pagination .page-item .page-link{
    border: 1px solid #222222;
    border-radius: 50px;
    margin: 0 5px;
    color: #222222;
    padding: 4px 9px 3px 9px;

    transition: 0.3s;
}

.list_1 .pagination .page-item .page-link:hover{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
}

.list_1 .pagination .page-item .page-link.active{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
}

@media (max-width: 575.98px) {

    .list_1 .list_box .list li a.text{
        flex-direction: column;
    }

    .list_1 .list_box .list li a.text::before{
        top: 13px;
    }
    

    .list_1 .list_box .list li a.text p:nth-child(1){
        font-size: 1.05rem;
    }
}



/* 圖文列表 list_2 */
.list_2 .list_box{
    box-shadow: none;
}
.list_2 .list_box .list{
    display: flex;
    flex-wrap: wrap;
    margin: -15px -15px;
}

.list_2 .list_box .list li{
    flex-basis: calc(100% / 3);
    padding: 15px 15px;
}

.list_2 .list_box .list li a.text{
    flex-direction: column;
    padding: 0;
    height: 100%;
    box-shadow: 1px 2px 3px #00000011;
    border-radius: 10px;
    overflow: hidden;
}

.list_2 .list_box .list li a.text::before{
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(to top ,transparent , #f9f9f911 , transparent);
    top: -100%;

    transition: 0.8s;
    z-index: 11;
}

.list_2 .list_box .list li a.text:hover{
    background-color: transparent;
    text-decoration: none;
    font-weight: 400;
    box-shadow: 1px 2px 3px #0000002b;
}

.list_2 .list_box .list li a.text:hover::before{
    top: 100%;
}

.list_2 .list_box .list .text .img_box{
    overflow: hidden;
    width: 100%;
    height: 250px;
    position: relative;

    background-color: #ababab;
    margin-bottom: 5px;
}

.list_2 .list_box .list .text .img_box img{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);  
    
    transition: 0.3s;
}

.list_2 .list_box .list li a.text:hover img{
    transform: translateX(-50%) translateY(-50%) scale(1.1);   
}

.list_2 .list_box .list li .text p{
    margin: 0 10px;
    font-size: 1.1rem;
}

.list_2 .list_box .list li .text .time{
    font-size: 1rem;
}

.list_2 .list_box .list li .text:hover .time{
    font-weight: 400;
}

@media (max-width: 1199.98px) {

    .list_2 .list_box .list .text .img_box{
        height: 205px;
    }
}

@media (max-width: 991.98px) {

    .list_2 .list_box .list li{
        flex-basis: calc( 100% / 2);
    }

    .list_2 .list_box .list .text .img_box{
        height: 230px;
    }
}

@media (max-width: 767.98px) {

    .list_2 .list_box .list li{
        flex-basis: calc( 100% / 1);
    }

    .list_2 .list_box .list .text .img_box{
        height: 345px;
    }
}


@media (max-width: 575.98px) {

    .list_2 .list_box .list .text .img_box{
        height: 56.5vw;
    }
}




/* 列表內頁 list_main */
.list_main .breadcrumb_box{
    background-color: #fff;
}

.list_main > .bg{
    height: 0px;
}

/* 標題 */
.list_main .title_box{
    position: relative;
    margin-bottom: 20px;
    margin-top: 40px;
}

.list_main .title_box h1{
    font-size: 1.5rem;
    color: #222222;
    background-color: #fff;
    padding-right: 10px;
    position: relative;
    display: inline-block;
    margin: 0;
}

.list_main .title_box::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #222222;

    position: absolute;
    top: 12px;
}

.list_main .title_box .social_box{
    text-align: right;
    margin: 10px 0;
    margin-top: 5px;
    font-size: 1.1rem;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.list_main .title_box .social_box .social{
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    transition: 0.3s;
}

.list_main .title_box .social_box .social a:hover{
    opacity: 0.9;
}

.list_main .title_box .social_box .social img{
    width: 25px;
    margin: 0 3px;
    transition: 0.3s;
}

.list_main .title_box .social_box .social a:hover img{
    transform: scale(1.05);
}

.list_main .title_box .social_box p{
    margin: 0;
    margin-left: 5px;
    font-size: 1.2rem;
    transform: translateY(2px);
}

/* 輪播 */
.list_main .list_main_carousel_box{
    width: 100%;
    margin: 20px auto;
    margin-bottom: 30px;
}

.list_main .list_main_carousel .slick-list{
    border-radius: 15px;
    margin: 0 -7px;
}

.list_main .list_main_carousel .box{
    border-radius: 15px;
    height: 410px;
    overflow: hidden;

    position: relative;
    background-color: #ababab;
    margin: 0 7px;
}

.list_main .list_main_carousel .box img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.list_main .slick-prev , .list_main .slick-next{
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    opacity: 0.8;
    transition: 0.3s;
}

.list_main .slick-prev::before , .list_main .slick-next:before{
    content: "";
    background-image: url(../img/arrow.svg);
    background-size: 12px;
    background-position: 10px center ;
    width: 30px;
    height: 30px;
    opacity: 1;
}

.list_main .slick-prev:hover , .list_main .slick-next:hover{
    opacity: 1;
}

.list_main .slick-prev{
    left: 15px;
    z-index: 2;
}

.list_main .slick-prev::before{
    transform: rotate(180deg);
    background-position: 11px center;
}

.list_main .main_box .text{
    margin: 20px 0;
}

.list_main .main_box .text p{
    font-weight: 400;
    line-height: 1.8rem;
}

.list_main .main_box .download{
    margin: 20px 0; 
    margin-bottom: 40px;
}

.list_main .main_box .download h2{
    font-size: 1.2rem;
    margin: 0;
    padding: 10px 0;

    position: relative;
}

.list_main .main_box .download h2::before{
    content: "";
    width: calc( 100% - 90px);
    height: 1px;
    background-color: #222222;

    position: absolute;
    top: 21px;
    right: 0;
}

.list_main .main_box .download .file_box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.list_main .main_box .download .file_box a{
    display: flex;
    align-items: center;
    margin: 6px 0;
}

.list_main .main_box .download .file_box a:hover{
    text-decoration: none;
}

.list_main .main_box .download .file_box a p{
    margin: 0;
    color: #222222;
    font-weight: 400;
    transition: 0.3s;
    font-size: 1.1rem;

    position: relative;

    background-image: url(../img/arrow.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 10px;

    padding: 3px 3px 1px 18px;
}

.list_main .main_box .download .file_box a p::before{
    content: "";
    width: 0%;
    height: 1px;
    background-color: #B2450F;

    position: absolute;
    bottom: 2px;
    left: 18px;

    transition: 0.5s;
}

.list_main .main_box .download .file_box a p:hover{
    color: #B2450F;
}

.list_main .main_box .download .file_box a p:hover:before{
    width: calc( 100% - 18px);
}

.list_main .main_box .download .file_box .file{
    display: inline-block;
    border: 1px solid #222222;
    color: #222222;
    padding: 1px 8px;
    padding-top: 3px;
    text-align: center;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-left: 5px;

    transition: 0.3s;
}

.list_main .main_box .download .file_box a:hover .file{
    border: 1px solid #B2450F;
    background-color: #B2450F;
    color: #fff;
}

@media (max-width: 1199.98px) {
    
    .list_main .list_main_carousel .box{
        height: 340px;
    }
}

@media (max-width: 991.98px){

    .list_main .list_main_carousel .box{
        height: 250px;
    }
}

@media (max-width: 767.98px) {

    .list_main .list_main_carousel .box{
        height: 380px;
    }
}

@media (max-width: 575.98px) {

    .list_main .list_main_carousel .box{
        height: 69vw;
    }

    .list_main .slick-next{
        right: 10px;
    }

    .list_main .slick-prev{
        left: 10px;
    }
}


































@media (max-width: 575.98px) {

}

@media (max-width: 767.98px) {

}

@media (max-width: 991.98px) {

}

@media (max-width: 1199.98px) {

}