@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: 90%;
    display: flex;

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

    position: relative;

}

button{
    cursor: pointer;
}
button:focus{
    outline: none;
}



/* 標題 */
.title h1{
    font-size: 24px;
    color: #0097d6;
    display: inline-block;
    padding: 0 5px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-left: 3px solid #3db3c6;

    position: relative;
    z-index: 1;
}

.title h1::before{
    content: "";
    display: block;
    width: 110%;
    height: 3px;
    background-color: #ed9e27;
    position: absolute;
    left: -6px;
    bottom: 3px;
    z-index: 0;
}

/* 頁籤按鈕 */
.title + .btn-box{
    text-align: center;
    padding: 0;
    margin: 10px 0;
}

.title + .btn-box li{
    background-color: #fbecd4;
    border-radius: 8px;
    padding: 3px 3px;
    display: inline-block;
    z-index: 0;

    position: relative;
}

.title + .btn-box button{
    background:transparent;
    color: #ed9e27;
    border: none;
    border-radius: 8px;
    padding: 2px 20px;
    font-size: 18px;
    cursor: pointer;

    transform: 0.5s;
}

.title + .btn-box button:focus{
    outline: none;
}

.title + .btn-box button.active{
    color: #fff;
    transition: 0.5s;
    pointer-events: none;
}

.title + .btn-box div{
    width: 51%;
    height: 100%;
    border-radius: 8px;
    border: 3px solid #fbecd4;
    background: linear-gradient(to right , #f4c277 0% , #ed9e27 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;
}

.title + .btn-box div.add{
    left: 49%;
}

/* MORE按鈕 */
.more-box{
    text-align: right;
    margin: 20px 10px;
}

.more-box a{
    display: inline-block;
    color: #0097d6;
    border: 2px solid #0097d6;
    border-radius: 50px;
    /* padding: 5px 0px; */
    padding-top: 1px;
    width: 80px;
    text-align: center;

    transition: 0.5s;
}

.more-box a:hover{
    text-decoration: none;
    width: 100px;
    color: #fff;
    border: 2px solid #0097d6;
    background-color: #0097d6;
}

.more-box a:hover::after{
    content: "→";
    display: inline-block;
    padding-left: 5px;
    transform: translateY(-2px);
}



/* 頭 */

.subnav .container{
    display: flex;
    justify-content: space-between;
}

.subnav .container .box{
    display: flex;
    align-items: center;
}

.subnav .box ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.subnav .box .menu li{
    padding: 2px 10px;
}

.subnav .box .menu li a{
    color: #0096d7;
    background-repeat: no-repeat;
    background-position: left 1px;
    /* font-size: 16px; */

    padding-left: 18px;
    transition: 0.2s;
}

.subnav .box .menu li a:hover{
    text-decoration: none;
    opacity: 0.8;
}

/* 搜尋 */
.subnav .box .menu .search-box a.add{
    display: none;
}

.subnav .box .menu .search-box .search{
    display: flex;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: none;
}

.subnav .box .menu .search-box .search.add{
    display: block;
}

.subnav .box .menu .search-box .search input{
    height: 25px;
    width: 100px;
    border: none;
    border-radius: 3px;
}

.subnav .box .menu .search-box .search input::placeholder{
    font-size: 14px;
    padding-left: 3px;
    color: rgb(179, 179, 179);
}

.subnav .box .menu .search-box .search button{
    background-color: transparent;
    border: none;
    width: 25px;
    height: 25px;
    padding: 0;
}


/* 兩個按鈕 */
.subnav .box .btn-box li{
    padding: 2px 10px;
}

.subnav .box .btn-box li a{
    color: #fff;
    background:linear-gradient(to right , #f4cd92 0% , #ed9e27 100%);
    padding: 5px 10px;
    padding-bottom: 4px;
    border-radius: 50px;
    border: 1px solid #fff;
    transition: 0.2s;
}
.subnav .box .btn-box li:nth-last-child(1){
    padding-right: 0;
}

.subnav .box .btn-box li:nth-last-child(1) a{
    background:linear-gradient(to right , #75c9f1 0% , #0090d5 100%);
}

.subnav .box .btn-box li a:hover{
    text-decoration: none;
    background: #fff;
    color: #ed9e27;
    border: 1px solid #ed9e27;
}

.subnav .box .btn-box li:nth-last-child(1) a:hover{
    color: #0090d5;
    border: 1px solid #0090d5;
}


/* 主選單 */
.navbar{
    margin-top: 10px;
    padding: 0 1rem;
    background:linear-gradient( 135deg , transparent 15% , #0096d7 15%);

    z-index: 1;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}

.navbar .navbar-nav{
    width: 100%;
    justify-content: center;
}

.navbar .navbar-nav .nav-item{
    /* padding: 0 10px; */
    border: 1px solid #0096d7;
    /* font-size: 18px; */
}

.navbar .navbar-nav .nav-item .nav-link{
    color: #fff;
    padding: 0.5rem 20px;
    font-size: 18px;
}

.navbar .navbar-nav .nav-item .nav-link:hover{
    color: #efa744;
    background-color: #fff;
}

.navbar .navbar-nav .dropdown-menu{
    border: 1px solid #0096d7;
    border-radius: 0;
    padding: 0;
    transform: translateY(-2px) translateX(-1px);
    min-width: 102%;
}

.navbar .navbar-nav .dropdown-item{
    color: #efa744;
    padding: 0.5rem 20px;
    border-radius: 0;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover{
    background-color: #0096d7;
    color: #fff;
}

/* 按鈕 */
.navbar-toggler{
    width: 35px;
    height: 0px;
    position: relative;
    /* background-color: #90c6d644; */
    border-radius: 0;
    z-index: 1;
    top: -45px;
}

.navbar-toggler::after{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-color: #75c9f1;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}

.navbar-toggler span{
    display: block;
    height: 1px;
    width: 20px;
    background-color: #fff;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    transition: 0.3s;
}

.navbar-toggler .line1{
    top:-8px;
    position: relative;
}

.navbar-toggler .line2{
    bottom: 4px;
}

.navbar-toggler .line3{
    bottom: -4px;
}

.navbar-toggler.add{
    /* background-color: #0096d7; */
    /* margin: 5px 0; */
}

.navbar-toggler .line1.add{
    background-color: #fff;
    transform: rotate(45deg);
    left: -6px;
    top: 0px;
    height: 2px;
}

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

.navbar-toggler .line3.add{
    background-color: #fff;
    transform: rotate(-45deg);
    left: 6px;
    top: 4px;
    height: 2px;
}

.navbar .subnav{
    display: none;
}

@media (max-width: 1399.98px) {
    .navbar{
        background:linear-gradient( 135deg , transparent 10% , #0096d7 10%);
    }
}

@media (max-width: 1199.98px) {
    .navbar{
        background:linear-gradient( 135deg , transparent 6% , #0096d7 6%);
    }

    .navbar .navbar-nav .nav-item .nav-link{
        padding: 0.5rem 15px;
    }
}

@media (max-width: 991.98px) {

    nav.subnav .container .box{
        display: none;
    }

    .navbar .subnav{
        display: block;
        padding: 5px 0;
    }

    .navbar .subnav .box{
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .navbar .subnav .box ul{
        align-items: center;
        padding: 5px 0;
    }

    .navbar .subnav .box .menu li a{
        color: #fff;
    }

    .navbar .subnav .box .menu .search-box .search{
        background-color: #fff;
    }





    .navbar{
        background:#0096d7;
    }
    
    .navbar .container{
        justify-content: flex-end;
    }

    .navbar .navbar-nav .nav-item{
        padding: 5px 0;
        border: 1px solid #0096d7;
        border-bottom: 1px solid #fff;
    }

    .navbar .navbar-nav .nav-item:nth-last-child(1){
        margin-bottom: 25px;
    }

    .navbar .navbar-nav .nav-item .nav-link{
        border-radius: 5px;
    }

    .navbar .navbar-nav .dropdown-menu{
        border: none;
        background-color: transparent;
        /* border-radius: 0; */
        /* padding: 0; */
        transform: translateY(0px) translateX(0px);
        min-width: 100%;
    }

    .navbar .navbar-nav .dropdown-menu a{
        background-color: #fff;
        border-radius: 5px;
        margin: 2px 0;
        padding-left: 35px;
    }
}

@media (max-width: 767.98px) {

    .subnav .container .box{
        flex-direction: column;
        justify-content: space-evenly;
    }
}

@media (max-width: 575.98px){

    .subnav .container{
        flex-direction: column;
    }

    .subnav .container .box{
        align-items: flex-end;
    }

    .subnav .box .menu li , .subnav .box .btn-box li{
        padding: 2px 5px;
    }
}


/* 側邊選單 */
.sidebar{
    position: absolute;
    z-index: 99;
    right: 0;
    top: 20%;
}

.sidebar .btn-box{
    margin: 10px;
    margin-right: 0;
}

.sidebar .btn-box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* border-radius: 50px 0 0 50px; */
    /* margin: 20px 0; */
   /* padding-left: 30px; */
    /* width: 120px; */
    /* transform: translateX(50px); */

    /* position: relative; */
    /* transition: 0.5s; */
}

.sidebar .btn-box a{
    border-radius: 50px 0 0 50px;

    position: relative;
    padding-left: 30px;
}

.sidebar .btn-box a img{
    height: 30px;
    position: absolute;
    left: 12px;
    bottom: 8px;
    transition: 0.5s;
}

.sidebar .btn-box:nth-child(2) img{
    left: 5px;
}

.sidebar .btn-box a p{
    margin: 0;
    padding: 10px;
    color: #fff;   
    transform: 0.5s;
}

.sidebar .btn-box a p span{
    display: none;
    /* transform: translateX(-5px); */

    transition: 0.5s;
}

.sidebar .btn-box a:hover{
    text-decoration: none;
    /* padding-left: 50px; */
    /* transform: translateX(10px); */
    /* width: 150px; */
}

.sidebar .btn-box a:hover img{
    height: 45px;
    bottom: 0;
    transform: translateY(-8px) translateX(-10px);
}

.sidebar .btn-box a:hover span{
    display: inline-block;
}


@media (max-width: 575.98px) {

    .sidebar .btn-box a{
        padding-left: 0px;
        border-radius: 5px 0 0 5px;
    }

    .sidebar .btn-box a img{
        display: none;
    }

    .sidebar .btn-box a p{
        padding: 5px 0px;
        padding-left: 5px;
        width: 25px;
        font-size: 14px;
    }

    .sidebar .btn-box a p span{
        display: block;
    }
}


/* 回頂端 */

.top{
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 99;

    display: none;
}

.top.add{
    display: block;
}

.top .arrows{
    background-color: #43b2c1;
    border-radius: 50px;
    padding: 10px;

    transition: 0.5s;
}

.top .arrows:hover{
    background-color: #ed9e27 ;
}




/* banner */
.home .banner .slick-dotted.slick-slider{
    margin-bottom: 0;
}

.home .banner .slick-slide{
    height: initial;
}

.home .banner .box img{
    width: 100%;
}

/* 按鈕 */
.home .banner .slick-prev , .home .banner .slick-next{
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    left: 15px;
    z-index: 55;
}

.home .banner .slick-next{
    left: initial;
    right: 15px;
}

.home .banner .slick-prev:hover , .home .banner .slick-next:hover{
    border: 1px solid #90c6d6;
}

.home .banner .slick-prev:before , .home .banner .slick-next:before{
    width: 10px;
    height: 10px;
    background-image: none;
    border-top: 5px solid #90c6d6;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid #90c6d6;
    transform: rotate(-135deg) translateX(-8px) translateY(8px);
}

.home .banner .slick-next:before{
    transform: rotate(45deg) translateX(5px) translateY(-5px);
}

/* 點點 */
.home .banner .slick-dots{
    transform: translateY(-20px);
}

.home .banner .slick-dots li{
    width: 10px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
}

.home .banner .slick-dots li button:before{
    content: "";
    background-color: #fff;
}

.home .banner .slick-dots li.slick-active button:before{
    background-color: #0096d7;
    opacity: 1;
}







/* 最新消息 */

.home .news{
    /* padding: 25px 0; */
    padding-top: 20px;
}

/* 內容 */
.home .news .slick-dotted.slick-slider{
    margin-bottom: 0;
}

.home .news .slick-slide{
    height: initial;
}

.home .news .main-box{
    margin: 0 -10px;

    display: none;
}

.home .news .main-box.show{
    display: block;
}

.home .news .main-box .box{
    border: 1px solid #dcdcdc;
    margin: 10px;
    border-radius: 5px;

    transition: 0.5s;
}

.home .news .main-box .box:hover{
    border: 1px solid #a7a7a7;
}

.home .news .main-box .box .img-box{
    overflow: hidden;
    height: 235px;
}

.home .news .main-box .box img{
    width: 100%;
    transition: 0.5s;
}

.home .news .main-box .text-box{
    padding: 10px 20px;
    position: relative;
}

.home .news .main-box .text-box::after{
    content: "...";
    font-size: 20px;
    color: #1e0e7a;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.home .news .main-box .text-box h2{
    font-size: 20px;
    font-weight: 300;
    margin: 0;
    color: #1e0e7a;
    min-height: 85px;
    display: flex;
    align-items: center;
}

.home .news .main-box .text-box .time{
    margin: 5px 0;
    color: #1e0e7a;
}

.home .news .main-box .text-box .text{
    color: #000;
    min-height: 125px;
}

.home .news .main-box .box a{
    transition: 0.5s;
}

.home .news .main-box .box a:hover{
    text-decoration: none;
}

.home .news .main-box .box a:hover h2{
    font-weight: 500;
}

.home .news .main-box .box a:hover img{
    transform: scale(1.1);
}

/* 點點 */
.home .news .slick-dots{
    transform: translateY(0px);
}

.home .news .slick-dots li{
    width: 10px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    z-index: 55;
}

.home .news .slick-dots li button:before{
    content: "";
    background-color: #cceaf7;
}

.home .news .slick-dots li.slick-active button:before{
    background-color: #0096d7;
    opacity: 1;
}


@media (max-width: 1199.98px) {

    .home .news .main-box .box .img-box{
        height: 195px;
    }
}

@media (max-width: 991.98px) {

    .home .news .main-box .box .img-box{
        height: 220px;
    }
}


@media (max-width: 767.98px) {

    .home .news .main-box .box .img-box{
        height: initial;
    }

    .home .news .slick-track {
        display: flex;
        align-items: stretch;
    }
}




/* 活動紀錄 activity */
.home .activity{
    /* padding: 30px 0; */
}

.home .activity img{
    width: 100%;
}

.home .activity .main-box{
    margin: 20px 0;
    display: none;
}

.home .activity .main-box.show{
    display: block;
}

/* 左邊大圖 */
.home .activity .main-box .main{
    position: relative;
}

.home .activity .main-box .main a{
    overflow: hidden;
    /* display: inline-block; */

    transition: 0.5s;
}

.home .activity .main-box .main .img-box{
    /* width: 100%; */
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.home .activity .main-box .main a:hover img{
    /* transform: scale(1.1); */
}

.home .activity .main-box .main .img-box p{
    margin: 0;
    padding: 10px 15px;
    width: 100%;
    font-size: 18px;
    background-color: #161f23ad;
    color: #fff;
    position: absolute;
    bottom: 0;
    /* transform: translateY(50px); */
    display: none;
}

.home .activity .main-box .main a:hover .img-box p{
    /* transform: translateY(0); */
    display: block;
}

/* 右邊小圖 */
.home .activity .main-box  .list .row{
    margin-right: -5px;
    margin-left: -20px;
    margin-top: -5px;
    margin-bottom: -5px;
    height: 50%;
}

.home .activity .main-box  .list .col-4{
    padding: 5px;
}

.home .activity .main-box  .list a{
    transition: 0.5s;
}

.home .activity .main-box .list .img-box{
    position: relative;
    overflow: hidden;
    background-color: #161f23ad;
    height: 98%;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.home .activity .main-box .list .img-box img{
    transform: scale(1.5);
}

.home .activity .main-box .list a .img-box p{
    display: none;
}

.home .activity .main-box .list a:hover .img-box p{
    margin: 0;
    padding: 5px 15px;
    width: 100%;
    height: 100%;
    font-size: 14px;
    background-color: #161f23ad;
    color: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 991.98px){

    .home .activity .main-box .list{
        margin-top: 15px;
    }

    .home .activity .main-box .list .row{
        margin-left: -5px;
    }

}


/* 活動預告 notice */
.home .notice{
    /* padding: 30px 0; */
}

.home .notice .main-box{
    display: none;
}

.home .notice .main-box.show{
    display: block;
}

/* 內容 */
.home .notice .main-box .list-box{
    list-style: none;
    padding: 0;
}

.home .notice .main-box .list-box li a{
    display: flex;
    align-items: center;
    margin:20px 0;
    color: #000;
    border-radius: 5px;
    overflow: hidden;

    transition: 0.5s;
}

.home .notice .main-box .list-box li a:hover{
    text-decoration: none;
    color: #000;
    opacity: 0.9;
}

.home .notice .main-box .list-box li a .box{
    display: flex;
    align-items: center;
    flex-basis: 35%;
}

.home .notice .main-box .list-box li a .title-box{
    flex-basis: 65%;
}

.home .notice .main-box .list-box li a div div{
    height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.home .notice .main-box .list-box li p{
    margin: 0;
    padding: 6px 0px;
    text-align: center;
}

.home .notice .main-box .list-box li .time .one{
    color: #fff;
    background: linear-gradient( 102deg , transparent 7% ,#3db3c6 8%);
    border: none;
    border-bottom: 2px solid #3db3c6;
}

.home .notice .main-box .list-box li .time p{
    border: 1px solid transparent;
}

.home .notice .main-box .list-box li .tag{
    background-color: #0096d7;
    color: #fff;

    transition: 0.5s;
}

.home .notice .main-box .list-box li .county .one{
    color: #fff;
    background-color: #3db3c6;

    transition: 0.5s;
}

.home .notice .main-box .list-box li .county p{
    color: #3db3c6;
    border: 1px solid #3db3c6;
}

.home .notice .main-box .list-box li .location .one{
    color: #fff;
    background-color: #6d78b3;

    transition: 0.5s;
}

.home .notice .main-box .list-box li .location p{
    color: #6d78b3;
    border: 1px solid #6d78b3;
}

.home .notice .main-box .list-box li .title{
    background-color: #90c6d644;

    transition: 0.5s;
}

.home .notice .main-box .list-box li .title p{
    text-align: left;
    padding: 0 10px;
    font-size: 18px;
}

.home .notice .main-box .list-box li a:hover .time .one{
    background: linear-gradient( 102deg , transparent 7% ,#2c8391 8%);
    border-bottom: 2px solid #2c8391;
}

.home .notice .main-box .list-box li a:hover .tag{
    background-color: #004b6b;
}

.home .notice .main-box .list-box li a:hover .county p{
    background-color: #3db3c6;
    color: #fff;
    border: 1px solid #49d3e9;
}

.home .notice .main-box .list-box li a:hover .location p{
    background-color: #6d78b3;
    color: #fff;
    border: 1px solid #a0acf0;
    /* border-top: 1px solid #fff; */
}


.home .notice .main-box .list-box li a:hover .title{
    opacity: 0.8;
    background-color: #0096d7 ;
    color: #fff;
}

/* 總會調整 change-area */
.home .notice .main-box.change-area .list-box li a .box{
    flex-basis: 22%;
}

.home .notice .main-box.change-area .list-box li a .title-box{
    flex-basis: 78%;
}



@media (max-width: 991.98px){

    .home .notice .main-box .list-box li a .box{
        flex-basis: 42%;
    }
    
    .home .notice .main-box .list-box li a .title-box{
        flex-basis: 58%;
    }
}

@media (max-width: 767.98px){

    .home .notice .main-box .list-box li a{
        flex-direction: column;
        align-items: stretch;
    }

    .home .notice .main-box .list-box li a div div{
        height: 64px;
    }

    .home .notice .main-box .list-box li p{
        padding: 3px 0;
    }

    .home .notice .main-box .list-box li .time .one{
        background: linear-gradient( 103deg , transparent 5% ,#3db3c6 6%);
    }

    .home .notice .main-box .list-box li a .title{
        height: initial;
        padding: 10px 0;
    }

}




/* video 影片專區 */
.home .video{
    margin-bottom: 20px;
}

.home .video .slick-dotted.slick-slider{
    margin-bottom: 0;
}

.home .video .slick-slide{
    height: initial;
}

.home .video .carousel{
    margin-left: -10px;
    margin-right: -10px;
}

.home .video .box{
    margin: 20px 10px;
    border-radius: 8px;
    overflow: hidden;
}

.home .video .box .videobox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.home .video .box .videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home .video .box img{
    width: 100%;
}

/* 點點 */
.home .video .slick-dots{
    transform: translateY(0px);
}

.home .video .slick-dots li{
    width: 10px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    z-index: 55;
}

.home .video .slick-dots li button:before{
    content: "";
    background-color: #cceaf7;
}

.home .video .slick-dots li.slick-active button:before{
    background-color: #0096d7;
    opacity: 1;
}



/* link 相關連結 */
.home .link{
    margin-bottom: 50px;
}

.home .link .box{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 15px 0;
    /* margin-left: -5px; */
    /* margin-right: -5px; */
}

.home .link .box li{
    margin: 5px 0;
    /* overflow: hidden; */
}

.home .link .box li img{
    width: 180px;

    transition: 0.5s;
}

.home .link .box li img:hover{
    transform: scale(1.05);
}

@media (max-width: 991.98px){

    .home .link .box li img{
        width: 220px;
    }
}

@media (max-width: 767.98px){

    .home .link .box li img{
        width: 160px;
    }
}

@media (max-width: 575.98px){

    .home .link .box{
        justify-content: center;
    }

    .home .link .box li{
        margin: 5px;
    }

    .home .link .box li img{
        width: 220px;
    }
}





/* 尾 */
.footer{
    background-color: #0096d7;
    /* padding-top: 100px; */
    padding: 20px 0;
}

/* 選單 */
.footer .menu-box .box{
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    color: #fff;
}

.footer .menu-box .box li{
    margin: 20px 0;
}

.footer .menu-box .box li div{
    padding: 2px 0;
    width: 100%;
    text-align: center;
}

.footer .menu-box .box li .title{
    font-size: 18px;
    font-weight: 500;
}

.footer .menu-box .box a{
    display: inline-block;
    color: #fff;
    padding: 2px 10px;
    padding-left: 15px;
    border: 1px solid transparent;
    border-radius: 5px;

    position: relative;
    transition: 0.8s;
}

.footer .menu-box .box a::before{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    position: absolute;
    left: 6px;
    top: 10px;
}

.footer .menu-box .box a:hover{
    text-decoration: none;
    border: 1px solid #fff;
}

.footer .menu-box .box a:hover:before{
    background-color: #f4cd92;
}

/* 分隔線 */
.footer hr{
    border-top: 1px solid #fff;
}

/* 資訊連結 */
.footer .information-box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
}

.footer .information-box .logo-box{
    width: 170px;
}
.footer .information-box .logo-box img{
    width: 100%;
}

.footer .information-box .information{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.footer .information-box .information li{
    display: flex;
}

.footer .information-box .information a{
    color: #fff;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    margin-left: 5px;
    transition: 0.5s;
}

.footer .information-box .information a:hover{
    text-decoration: none;
    border: 1px solid #fff;
}

.footer .information-box .information a p{
    margin: 0;
    padding: 2px 5px;
    padding-left: 25px;

    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 5px center;
}



@media (max-width: 1199.98px) {

    .footer .information-box .information{
        justify-content: flex-end;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 991.98px){
    .footer .information-box .information{
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px){

    .footer .menu-box .box{
        flex-wrap: wrap;
    }
    .footer .menu-box .box li{
        flex-basis: calc(100%/3);
    }

    .footer .information-box{
        justify-content: center;
    }

    .footer .information-box .information{
        flex-direction: column;
    }

    .footer .information-box .information li:nth-child(1){
        flex-direction: column;
        align-items: center;
        margin-bottom: 10px;
    }
}

@media (max-width: 575.98px){

    .footer .menu-box .box li{
        flex-basis: calc(100%/2);
    }

}



/* 麵包屑 */
.breadcrumb{
    background-color: transparent;
    margin: 20px 0;
}

.breadcrumb-item+.breadcrumb-item::before{
    content: "";
    padding: 0;
    margin-left: 10px;
    margin-right: 20px;

    border-top: 4px solid #ed9e27;
    border-right: 4px solid #ed9e27;
    border-bottom: 4px solid transparent;
    border-left: 4px solid transparent;
    
    transform: rotate(45deg);
}

.breadcrumb-item.active{
    color: #0090d5;
}

.breadcrumb-item a{
    color: #000;
}

.breadcrumb-item a:hover{
    text-decoration: none;
}


/* 頁碼 */
.pagination{
    justify-content: center;
    margin: 40px 0;
}

.pagination .page-link{
    border: none;
    border-radius: 0;
    padding: 5px;
    margin: 5px;
}

.pagination .page-link:hover{
    background-color: transparent;
    border-bottom: 2px solid #0096d7;
}

.pagination .page-link.previous{
    background-color: #0096d7;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid transparent;
    margin: 5px 0;
    margin-left: 5px;
    border-radius: 3px 0 0 3px;
}

.pagination .page-link.next{
    background-color: #0096d7;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid transparent;
    margin: 5px 0;
    border-radius: 0 3px 3px 0;
}

.pagination .page-link.previous:hover , .pagination .page-link.next:hover{
    border: 1px solid #0096d7;
    background-color: #fff;
    color: #0096d7;
}


/* 內頁標題 */
.title-box{
    text-align: center;
    /* margin: 20px 0; */
}

.title-box hr{
    border-top: 1px solid #ed9e27;
    /* padding: 0; */
    margin: 0;
}

.title-box h1{
    display: inline-block;
    font-size: 24px;
    color: #ed9e27;
    border: 1px solid #ed9e27;
    border-top: 4px solid #fff;
    border-radius: 0 0 10px 10px;
    padding: 5px 30px;
    transform: translateY(-2px);
}


/* list-1 最新消息 */

/* 搜尋列 */
.list-1 .search-box{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0096d7;
    margin: 40px 0;
}

.list-1 .search-box .time{
    border: 1px solid #0096d7;
    border-radius: 50px 0 0 50px;
}

.list-1 .search-box .time label{
    padding: 0 10px;
    padding-left: 15px;
    margin: 0;
}

.list-1 .search-box .time span{
    display: inline-block;
    padding: 5px 10px;
    border-left: 1px solid #0096d7;
    height: 100%;
}

.list-1 .search-box .time input{
    padding: 3px;
    border: none;
    /* margin: 0 5px; */
}

.list-1 .search-box .time input:focus-visible{
    outline: none;
}

.list-1 .search-box .form-group{
    margin: 0;
    border: 1px solid #0096d7;

    position: relative;
}

.list-1 .search-box .time + .form-group{
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.list-1 .search-box .time + .form-group .form-control{
    padding: 7px 10px;
    padding-bottom: 8px;
    width: 120px;
}

.list-1 .search-box .time + .form-group:after{
    content: "";
    display: inline-block;

    border-top: 5px solid transparent;
    border-right: 5px solid #ed9e27;
    border-bottom: 5px solid #ed9e27;
    border-left: 5px solid transparent;

    transform: rotate(45deg);

    position: absolute;
    top: 9px;
    right: 4px;
}

.list-1 .search-box .form-group .form-control{
    width: initial;
    height: initial;
    /* border: 1px solid #0096d7; */
    border: none;
    border-radius: 0;
    padding: 5px 10px;
    color: #0096d7;
}

.list-1 .search-box .form-group .form-control:focus{
    box-shadow: none;
}

.list-1 .search-box .form-group .form-control::placeholder{
    color: #0096d7;
}

.list-1 .search-box .btn-box button{
    color: #fff;
    font-weight: 300;
    background-color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 0 50px 50px 0;
    padding: 5px 10px;
    padding-right: 15px;
}

.list-1 .search-box .btn-box button img{
    margin-left: 3px;
    margin-bottom: 2px;
}

/* 標題列表 */

.list-1 .list .box{
    list-style: none;
    padding: 0;
    margin: 40px 0;
}

.list-1 .list .box li a{
    display: flex;
    color: #000;
    font-size: 18px;
    padding: 15px 20px;
    border-radius: 5px;

    transition: 0.3s;
}

.list-1 .list .box li:nth-child(2n+1) a{
    background-color: #0091d571;
}

.list-1 .list .box li a .time{
    width: 17%;
}

.list-1 .list .box li a .text{
    width: 83%;
}

.list-1 .list .box li a:hover{
    text-decoration: none;
    color: #fff;
    background-color: #0091d5;
}

/* 頁碼 */
/* .list-1 .list .pagination{
    justify-content: center;
    margin: 40px 0;
}

.list-1 .list .pagination .page-link{
    border: none;
    border-radius: 0;
    padding: 5px;
    margin: 5px;
}

.list-1 .list .pagination .page-link:hover{
    background-color: transparent;
    border-bottom: 2px solid #0096d7;
}

.list-1 .list .pagination .page-link.previous{
    background-color: #0096d7;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid transparent;
    margin: 5px 0;
    margin-left: 5px;
    border-radius: 3px 0 0 3px;
}

.list-1 .list .pagination .page-link.next{
    background-color: #0096d7;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid transparent;
    margin: 5px 0;
    border-radius: 0 3px 3px 0;
}

.list-1 .list .pagination .page-link.previous:hover ,.list-1 .list .pagination .page-link.next:hover{
    border: 1px solid #0096d7;
    background-color: #fff;
    color: #0096d7;
} */


@media (max-width: 991.98px){

    .list-1 .search-box{
        flex-wrap: wrap;
    }

    .list-1 .search-box .time{
        border-radius: 50px;
        padding-left: 5px;
        padding-right: 20px;
        margin: 0 20px;
        margin-bottom: 10px;
    }

    .list-1 .search-box .time + .form-group{
        border-left: 1px solid #0096d7;
        border-radius: 50px 0 0 50px;
        overflow: hidden;
        margin-left: 20px;
    }

    .list-1 .search-box .time + .form-group .form-control{
        width: 170px;
    }

    .list-1 .search-box .btn-box button{
        margin-right: 20px;
    }
}

@media (max-width: 767.98px){
    .list-1 .list .box li a{
        flex-direction: column;
    }

    .list-1 .list .box li a .time , .list-1 .list .box li a .text{
        width: 100%;
    }

}


@media (max-width: 575.98px){
    .list-1 .search-box .time{
        margin: 0;
        padding: 0;
        padding-top: 5px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border-radius: 10px 10px 0 0;
    }

    .list-1 .search-box .time label{
        width: 100%;
        border-bottom: 1px solid #0096d7;
    }

    .list-1 .search-box .time span{
        width: 30%;
        border-left: none;
    }

    .list-1 .search-box .time input{
        width: 70%;
    }

    .list-1 .search-box .time + .form-group{
        margin: 0;
        width: 100%;
        border-right: 1px solid #0096d7;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-radius: 0;
    }

    .list-1 .search-box .time + .form-group .form-control{
        width: 100%;
    }

    .list-1 .search-box .form-group{
        width: 70%;
        border-radius: 0 0 0 10px;
        overflow: hidden;
    }
    .list-1 .search-box .form-group .form-control{
        width: 100%;
    }

    .list-1 .search-box .btn-box{
        width: 30%;
    }

    .list-1 .search-box .btn-box button{
        margin: 0;
        width: 100%;
        border-radius: 0 0 10px 0;
    }

}

/* list-2 圖文列表 */
.list-2 .list .col-4{
    padding-left: 10px;
    padding-right: 10px;
}

.list-2 .list .box{
    border: 1px solid #dcdcdc;
    margin: 10px 0;
    border-radius: 5px;

    transition: 0.5s;
}

.list-2 .list .box:hover{
    border: 1px solid #a7a7a7;
}

.list-2 .list .box .img-box{
    overflow: hidden;
    height: 235px;
}

.list-2 .list .box img{
    width: 100%;
    transition: 0.5s;
}

.list-2 .list .box .text-box{
    padding: 10px 20px;
    position: relative;
}

.list-2 .list .box .text-box::after{
    content: "...";
    font-size: 20px;
    color: #1e0e7a;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.list-2 .list .box .text-box h2{
    font-size: 20px;
    font-weight: 300;
    margin: 0;
    color: #1e0e7a;
    min-height: 85px;
    display: flex;
    align-items: center;
}

.list-2 .list .box .text-box .time{
    margin: 5px 0;
    color: #1e0e7a;
}

.list-2 .list .box .text-box .text{
    color: #000;
    min-height: 145px;
}

.list-2 .list .box a{
    transition: 0.5s;
}

.list-2 .list .box a:hover{
    text-decoration: none;
}

.list-2 .list .box a:hover h2{
    font-weight: 500;
}

.list-2 .list .box a:hover img{
    transform: scale(1.1);
}



@media (max-width: 1199.98px) {

    .list-2 .list .box .img-box{
        height: 195px;
    }
}

@media (max-width: 991.98px) {

    .list-2 .list .box .img-box{
        height: 220px;
    }
}

@media (max-width: 767.98px) {

    .list-2 .list .box .img-box{
        height: initial;
    }
}







/* list-main 消息內容 */

.list-main .title + .box{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #43b2c1;
    margin: 10px 0;
    padding: 2px;
}

.list-main .box p{
    margin: 0;
}

.list-main .box .btn-box{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.list-main .box .btn-box a{
    margin: 0 3px;
}

.list-main .main .text{
    padding: 2px;
    font-size: 18px;
}


.list-main .img-box{
    width: 60%;
    margin: 40px auto;
    margin-bottom: 60px;
}

.list-main .img-box img{
    width: 100%;
    border-radius: 8px;
}


/* 按鈕 */
.list-main .slick-prev , .list-main .slick-next{
    background-color: #90c6d6;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    top: 50%;
    left: -45px;
    z-index: 55;
}

.list-main .slick-next{
    left: initial;
    right: -45px;
}

.list-main .slick-prev:hover ,.list-main .slick-next:hover{
    border: 1px solid #fff;
}

.list-main .slick-prev:before ,.list-main .slick-next:before{
    width: 10px;
    height: 10px;
    background-image: none;
    opacity: 1;
    border-top: 5px solid #fff;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid #fff;
    transform: rotate(-135deg) translateX(-8px) translateY(8px);
}

.list-main .slick-next:before{
    transform: rotate(45deg) translateX(5px) translateY(-5px);
}

/* 點點 */
.list-main .slick-dots{
    transform: translateY(20px);
}

.list-main .slick-dots li{
    width: 10px;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
}

.list-main .slick-dots li button:before{
    content: "";
    background-color: #90c6d6;
}

.list-main .slick-dots li.slick-active button:before{
    background-color: #0096d7;
    opacity: 1;
}




/* list-video 影片專區 */
.list-video .video .box .videobox {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    margin: 15px 0;
    border-radius: 8px;
    overflow: hidden;
}

.list-video .video .box .videobox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}




/* ligin 登入 */

.ligin{
    background-color: #f5f5f6;
}

.ligin .box{
    background-color: #fff;
    margin: 40px auto;
    padding: 40px 100px;
    max-width: 650px;
}

.ligin .box h1{
    display: inline-block;
    padding-right: 100px;
    color: #ed9e27;
    border-bottom: 2px solid #ed9e27;
    margin-bottom: 40px;
}

.ligin .box .form-group{
    color: #0090d5;
    font-weight: 400;
    font-size: 18px;
}

.ligin .box .form-group label{
    margin: 0;
}

.ligin .box .form-group .form-control{
    height: 32px;
}

.ligin .box .form-code{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 16px;
    margin: 20px 0;
}

.ligin .box .form-code .code-box{
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}

.ligin .box .form-code .code-box img{
    margin-right: 10px;
}

.ligin .box .btn-box{
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}

.ligin .box .btn-box button{
    font-size: 18px;
    color: #fff;
    background: linear-gradient(to right , #f4cd92 0% , #ed9e27 100%);
    padding: 3px 10px;
    padding-bottom: 2px;
    border-radius: 50px;
    border: 1px solid #fff;
    cursor: pointer;
}

.ligin .box .btn-box button:hover{
    text-decoration: none;
    background: #fff;
    color: #ed9e27;
    border: 1px solid #ed9e27;
}

.ligin .box .btn-box .btn a{
    color: #979797;
    border-bottom: 1px solid #979797;
    font-size: 16px;
    margin: 0 20px;
}

.ligin .box .btn-box .btn a:hover{
    text-decoration: none;
    color: #5c5c5c;
}


@media (max-width: 575.98px){

    .ligin .box{
        margin: 40px auto;
        padding: 40px 40px;
    }

    .ligin .box .btn-box .btn a{
        margin: 0 10px;
    }

}


/* forget 忘記密碼 */
.forget .box p{
    text-align: center;
    font-size: 14px;
    color: #979797;
}


/* signup 註冊 */
.signup .box h2{
    font-weight: 300;
    font-size: 20px;
    margin: 0;
    margin-top: 30px;
    color: #fff;
    background-color: #ed9e27;
    padding: 5px 5px;
    padding-bottom: 2px;
    border-radius: 3px;
}

.signup .box h2:nth-child(2){
    margin-top: 0;
}

.signup .box h2 + hr{
    margin: 3px;
    margin-bottom: 15px;
    border-color: #f4cd92;
}

.signup .box .form-group{
    margin: 0 2px;
    margin-bottom: 16px;
    font-size: 16px;
}

.signup .box .form-group span{
    color: rgb(255, 0, 0);
}

.signup .box .form-group div{
    display: flex;
}

.signup .box .form-group div .options-group{
    position: relative;
    width: 105%;
}

.signup .box .form-group div .options-group:after {
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #ced4da;
    border-bottom: 5px solid #ced4da;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    right: 5px;
}

.signup .box .form-group div .options-group:nth-child(1){
    margin-right: 10px;
    width: 100%;
}

.signup .box .form-group div .form-control{
    width: 100%;
}


.signup .box .btn-box{
    margin-top: 40px;
}









/* member-information 會員全體資訊頁 */
.member-information .container > .box{
    overflow: hidden;
    margin-bottom: 40px;
}

/* 搜尋 */
.member-information .search-box{
    display: flex;
    align-items: stretch;
    color: #0096d7;
    float: left;
    margin: 5px 0;
}

.member-information .search-box .form-group{
    margin: 0;
    border: 1px solid #0096d7;
    display: flex;
    position: relative;
}

.member-information .search-box .form-group:after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #0096d7;
    border-bottom: 5px solid #0096d7;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 9px;
    right: 4px;
}

.member-information .search-box .form-group:nth-child(1){
    border-radius: 50px 0 0 50px;
    overflow: hidden;
}

.member-information .search-box .form-group .form-control{
    width: initial;
    height: initial;
    border: none;
    border-radius: 0;
    padding: 5px 10px;
    color: #0096d7;
}

.member-information .search-box .btn-box button{
    color: #fff;
    font-weight: 300;
    background-color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 0 50px 50px 0;
    padding: 5px 10px;
    padding-right: 15px;
}

.member-information .search-box .btn-box button img{
    margin-left: 3px;
    margin-bottom: 2px;
}


.member-information .box .pagination{
    float: right;
    margin: 0;
}

/* 內容 */
.member-information .main{
    margin-bottom: 40px;
}

.member-information .main .text-box{
    background-color: #cceaf7;
    padding: 10px;
    border-radius: 3px;
    margin: 30px 0;

    transition: 0.3s;
}

.member-information .main .text-box:hover{
    background-color: #e3f4fb;
}

.member-information .main .text-box .img-box{
    display: flex;
    align-items: center;
    transform: translateY(-30px);
}

.member-information .main .text-box .img-box img{
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    width: 40%;
}

.member-information .main .text-box .img-box div{
    width: 60%;
    padding-top: 15px;
}

.member-information .main .text-box .name{
    text-align: center;
    font-size: 20px;
    margin: 0;
}

.member-information .main .text-box .text{
    text-align: center;
    transform: translateY(-10px);
    border-top: 1px solid #29334a;
    padding-top: 15px;
}

.member-information .main .text-box .text p{
    margin: 10px 0;
}

.member-information .main .text-box .text .title{
    background-color: #ed9e27;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
    min-width: 120px;
    padding: 3px 20px;
    padding-bottom: 2px;
    margin-top: 0;
}



/* 登入後顯示 */
.member-information .main .text-box .login-information{
    min-height: 100px;
    /* display: none; */
}

.member-information .main .text-box .login-information p{
    background-color: #29334a42;
    border-radius: 3px;
    overflow: hidden;
    color: #fff;
    display: flex;
    margin: 15px 0;
}

.member-information .main .text-box .login-information p span{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis:100%;
    word-break: break-all;
    padding: 0 3px;
}

.member-information .main .text-box .login-information p span:nth-child(1){
    background-color: #0096d7;
    min-height: 32px;
    flex-basis: 32px;
}

.member-information .main .text-box .login-information p img{
    width: 18px;
}




@media (max-width: 991.98px){
    .member-information .search-box{
        width: 100%;
    }
}

@media (max-width: 767.98px){
    .member-information .container > .box{
        max-width: 380px;
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .member-information .search-box{
        flex-wrap: wrap;
    }

    .member-information .search-box .form-group{
        width: 60%;
        flex-grow: 1;
        border-radius: 0 0 0 5px;
        overflow: hidden;
    }

    .member-information .search-box .form-group:nth-child(1){
        border-radius: 5px 5px 0 0;
        width: 100%;
        padding: 3px 0;
        padding-bottom: 2px;
    }

    .member-information .search-box .form-group .form-control{
        width: 100%;
    }

    .member-information .search-box .btn-box button{
        border-radius: 0 0 5px 0;
        padding-right: 10px;
    }

    .member-information .main .text-box{
        max-width: 380px;
        margin: 30px auto;
    }
}




/* member-list 會員名錄 */
.member-list .main table{
    margin: 40px 0;
    margin-bottom: 80px;
    width: 100%;
}

/* 標題標籤 */
.member-list .main table thead{
    color: #0096d7;
}

.member-list .main table thead th{
    border-bottom: 1px solid #cdd0d4;
    font-weight: 300;
    padding: 5px 10px;
}

.member-list .main table thead th:nth-child(odd){
    border-bottom: 1px solid #0096d7;
}

/* 條列內容 */
.member-list .main tr{
    border-bottom: 1px solid #e2e4e7;
    display: flex;
    align-items: center;
}

.member-list .main tbody tr:hover{
    background-color: #fafafa83;
}

.member-list .main td{
    padding: 10px;
    font-size: 18px;
}

/* 每個項目寬度 */
.member-list .main td ,.member-list .main th{
    flex-basis: 260px;
    flex-grow: 1;
}

.member-list .main .basis-125{
    flex-basis: 125px;
}

.member-list .main .basis-55{
    flex-basis: 55px;
    flex-grow: 0;
}

/* 名字照片 */
.member-list .main td.name{
    display: flex;
    align-items: center;
}

.member-list .main td.name p{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0px;
    width: calc(100% - 80px);
}

.member-list .main td.name p span:nth-child(1){
    margin-right: 5px;
}

.member-list .main td .img-box{
    width: 80px;
    height: 80px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 10px;
}

.member-list .main td .img-box img{
    width: 100%;
    transition: 0.5s;
}

.member-list .main td:nth-last-child(1) img:hover{
    opacity: 0.6;
}


@media (max-width: 991.98px){
    .member-list .main tr{
        display: flex;
        align-items: center;
    }

    .member-list .main td ,.member-list .main th{
        flex-basis: 180px;
        font-size: 16px;
    }

    .member-list .main td.name{
        flex-direction: column;
        align-items: flex-start;
    }

    .member-list .main td.name p{
        width: 100%;
    }

    .member-list .main td .img-box{
        width: 50px;
        height: 50px;
        margin-right: 0;
    }

}


@media (max-width: 767.98px){

    .member-list thead{
        display: none;
    }

    .member-list .main tr{
        flex-direction: column;
        align-items: initial;
        border-bottom: 1px solid #0096d7;
        margin-bottom: 15px;
    }

    .member-list .container .main td{
        flex-basis: initial;
        min-height: 40px;
        border-bottom: 1px solid #e2e4e7;
        font-size: 20px;
        padding-left: 90px;
        position: relative;
    }

    .member-list .main td.name{
        flex-direction: initial;
    }

    .member-list .main td.name p{
        flex-direction: column;
        align-items: initial;
        width: calc(100% - 50px);
    }

    .member-list .main td .img-box{
        margin-right: 10px;
    }

    .member-list .container .main td:before{
        content: attr(data-th)"";
        color: #0096d7;
        font-weight: 300;
        width: 90px;
        display: inline-block;
        font-size: 16px;
        position: absolute;
        left: 5px;
    }


}


/* member-personal 會員資料 */

.member-personal{
    background-color: #ebebed;
}

/* 會員資料表 */
.member-personal .personal-box{
    display: flex;
    margin: 40px 0;
    width: 100%;
    position: relative;
}

.member-personal .personal-box .photo{
    position: absolute;
    z-index: 55;
}

.member-personal .personal-box .photo .img-box{
    width: 150px;
    height: 150px;
    border-radius: 80px;
    overflow: hidden;
}

.member-personal .personal-box .photo .img-box img{
    width: 100%;
}

.member-personal .personal-box .photo .camera{
    background-color: #0090d5;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;

    position: absolute;
    right: 5px;
    bottom: 0px;
    z-index: 55;

    transition: 0.3s;
}

.member-personal .personal-box .photo .camera:hover{
    background-color: #21b5f9;
}

.member-personal .personal-box .title-box{
    text-align: left;
    background-color: #fff;
    width: 100%;
    height: 150px;
    border-radius: 150px;
    padding: 32px 0;
    padding-left: 250px;
}

.member-personal .personal-box .title-box::before{
    content: "";
    width: 160px;
    height: 160px;
    background-color: #ebebed;
    border-radius: 150px;
    position: absolute;
    top: -5px;
    left: 5px;
}

.member-personal .personal-box .title-box h2{
    font-size: 24px;
    font-weight: 600;
}

.member-personal .personal-box .title-box p{
    margin: 0;
}

/* 標籤按鈕 */
.member-personal .btn-box{
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0;
    /* margin: 0 30px; */
}

.member-personal .btn-box button{
    color: #fff;
    background-color: #29334a;
    border: none;
    border-radius: 50px;
    padding: 3px 25px;
    padding-bottom: 2px;
    
    transition: 0.3s;
}

.member-personal .btn-box button:hover{
    background-color: #0090d5;
}

.member-personal .btn-box button.active{
    background-color: #0090d5;
}


/* main 個人資料 */
.member-personal .main{
    display: none;
}

.member-personal .main.show{
    display: block;
}
.member-personal .main .box{
    background-color: #fff;
    padding: 40px;
    margin: 40px 0;
    border-radius: 50px;
}

/* 欄位 */
.member-personal .main .form-group{
    display: flex;
    align-items: flex-start;
}

.member-personal .main .form-group label{
    width: 29%;
    margin: 0;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.member-personal .main .form-group .form-control{
    width: 71%;
    height: 32px;
    padding: 5px;
}

.member-personal .main .form-control:disabled, .member-personal .main .form-control[readonly]{
    background-color: transparent;
    border: none;
}

.member-personal .main .form-group label + div{
    display: flex;
    width: 71%;
}

.member-personal .main .form-group label + div .form-control{
    width: 100%;
}

.member-personal .main .form-group .options-group{
    width: 100%;
    position: relative;
}

.member-personal .main .form-group .options-group:after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #ced4da;
    border-bottom: 5px solid #ced4da;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 8px;
    right: 5px;
}

.member-personal .main .form-group .options-group:nth-child(2){
    margin-left: 10px;
}

.member-personal .main .form-group label + div input:nth-child(2){
    margin-left: 10px;
}

/* 公開選項寬度 */
.member-personal .main .form-group .display-btn{
    width: 150px;
}

/* 地址 */
.member-personal .main .form-group .address{
    display: flex;
    flex-direction: column;
}

.member-personal .main .form-group .address .address-options{
    display: flex;
}

.member-personal .main .form-group .address .address-options > div{
    margin-left: 10px;
    display: flex;
    width: 100%;
}

.member-personal .main .form-group .address .address-options .display-btn{
    margin-left: 0;
    width: 150px;
}

.member-personal .main .form-group .address .address-options + input{
    margin-left: 0;
    margin-top: 10px;
}

/* 必填 選填 點點和標示 */
.member-personal .main label span ,.member-personal .main .options-color span{
    display: block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    margin-bottom: 2px;
    background-color: #efa744;
}

.member-personal .main .form-group label span.blue ,.member-personal .main .options-color span.blue{
    background-color: #0090d5;
}

.member-personal .main .options-color{
    display: flex;
    justify-content: flex-end;
}

.member-personal .main .options-color p{
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: 20px;
}

/* 送出按鈕 */
.member-personal .main .btn-box.btn{
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    cursor: initial;
}

.member-personal .main .btn-box.btn button{
    background-color: transparent;
    color: #0096d7;
    border:1px solid #0096d7;
    margin: 0 20px;
    margin-bottom: 10px; 
    padding: 5px 35px;
}

.member-personal .main .btn-box.btn button:hover{
    background-color: #0096d7;
    color: #fff;
}



/* 青商經歷 experience */
.member-personal .main .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.member-personal .main .title h2{
    color: #efa744;
    font-size: 24px;
    font-weight: 600;
    padding-left: 10px;
    margin: 0;
    position: relative;
}

.member-personal .main .title h2::before{
    content: "";
    display: block;
    width: 3px;
    height: 22px;
    background-color: #efa744;
    position: absolute;
    top: 2px;
    left: 0;
}

.member-personal .main .title button{
    background-color: #efa744;
    color: #fff;
    border: none;
    padding: 0px 20px;
    padding-top: 1px;
    border-radius: 3px;
}

/* 表格 */
.member-personal .main table{
    margin-top: 10px;
    margin-bottom: 40px;
    width: 100%;
}

/* 標題標籤 */
.member-personal .main table thead{
    color: #0096d7;
}

.member-personal .main table thead th{
    border-bottom: 1px solid #cdd0d4;
    font-weight: 300;
    padding: 5px 10px;
}

.member-personal .main table thead th:nth-child(odd){
    border-bottom: 1px solid #0096d7;
}

/* 條列內容 */
.member-personal .main tr{
    border-bottom: 1px solid #e2e4e7;
    display: flex;
    align-items: center;
}

.member-personal .main tbody tr:hover{
    background-color: #fafafa83;
}

.member-personal .main td{
    padding: 10px;
    font-size: 18px;
}

/* 按鈕 */
.member-personal .main td button:hover img{
    opacity: 0.6;
}
/* 公開按鈕切換 */
.member-personal .main td button{
    background-color: transparent;
    border: none;
}

.member-personal .main td.open-btn button img{
    display: none;
}

.member-personal .main td.open-btn button img.add{
    display: block;
}

/* 每個項目寬度 */
.member-personal .main td ,.member-personal .main th{
    flex-basis: 200px;
    flex-grow: 1;
}

.member-personal .main .basis-60{
    flex-basis: 60px;
    flex-grow: 0;
    text-align: center;
}

.member-personal .main .basis-120{
    flex-basis: 120px;
    flex-grow: 0;
}

.member-personal .main .basis-200{
    flex-basis: 200px;
    flex-grow: 0;
}

/* 目前尚無資料 td-none */
.member-personal .container .main .td-none{
    text-align: center;
    padding: 20px 0;
}

/* 閱讀更多 td-more table-box */
/* 表格限制高度 */
.member-personal .main .table-box{
    height: 200px;
    overflow: hidden;
    margin-bottom: 30px;
}

.member-personal .main .table-box.add{
    height: 100%;
}

/* 展開按鈕 */
.member-personal .container .main .td-more{
    text-align: center;
    position: relative;
    z-index: 55;
}

.member-personal .container .main .td-more.add{
    display: none;
}

.member-personal .container .main .td-more > div{
    padding-top: 20px;
    position: absolute;
    width: 100%;
    background: linear-gradient( to bottom , transparent 0% , #fff 40% );
    transform: translateY(-80px);
}

.member-personal .container .main .td-more div button{
    background-color: transparent;
    border: none;
    color: #0096d7;
    font-size: 18px;
    cursor: pointer;

    position: relative;
}

.member-personal .container .main .td-more div button p{
    position: relative;
    padding: 2px 15px;
    padding-right: 35px;
    margin: 0;
    z-index: 1;
}

.member-personal .container .main .td-more div button p::after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #0096d7;
    border-bottom: 5px solid #0096d7;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
    right: 15px;
}

.member-personal .container .main .td-more div .line{
    width: 250px;
    height: 2px;
    background: linear-gradient( to right ,#0096d7 25% , transparent 25% , transparent 75%  , #0096d7 75% );
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* 報名資訊 */
.member-personal .registration .modal-dialog{
    max-width: 400px;
}

.member-personal .registration .modal-content{
    border-radius: 3px;
}

/* 內文 */
.member-personal .registration .modal-body{
    padding: 25px 25px;
    padding-bottom: 0;
}

.member-personal .registration .modal-body .text{
    list-style: none;
    padding: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #bbbbbb;
}

/* 標題 */
.member-personal .registration .modal-body .text .title-text{
    padding: 0;
}

.member-personal .registration .modal-body .title-text h1{
    display: inline-block;
    width: 100%;
    background-color: #0096d7;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    padding: 6px 10px;
    padding-bottom: 5px;
    border-radius: 3px;
    margin: 0;
}

/* 內文 */
.member-personal .registration .modal-body .text li{
    display: flex;
    align-items: center;
    padding: 0 10px;
    padding-top: 15px;
}

.member-personal .registration .modal-body .text p:nth-child(1){
    display: inline-block;
    text-align:justify;
    width: 90px;
    margin-right: 5px;
    margin: 0;
}

.member-personal .registration .modal-body .text p:nth-child(2){
    width: calc(100% - 90px);
    margin: 0;
}

.member-personal .registration .modal-body .text p:after{
    content: "";
    display: inline-block;
    width: 100%;
}


/* 按鈕 */
.member-personal .registration .btn{
    padding: 15px 0px;
    padding-top: 0;
    border: none;
    float: right;
}

.member-personal .registration .btn button{
    background-color: transparent;
    color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 30px;
    padding: 3px 20px;
    padding-bottom: 2px;
    transition: 0.3s;
}

.member-personal .registration .btn button:hover{
    background-color: #0096d7;
    color: #fff;
}


/* 訂單管理 order */

.member-personal .order .list{
    list-style: none;
    padding: 0;
    margin: 20px 0;
    /* border-bottom: 1px solid #0096d7; */

    transition: 0.3s;
    /* margin-bottom: 40px; */
}

.member-personal .order .list.add{
    box-shadow: 2px 2px 5px #00000025;
    margin-bottom: 40px;
    padding: 20px;
}

.member-personal .order .list p{
    margin: 0;
}

/* 訂單資訊 已顯示 */
.member-personal .order .list li.order-title{
    display: flex;
    align-items: center;

    /* background-color: #0096d7; */
    /* color: #fff; */
    border-bottom: 1px solid #0096d7;
    font-size: 18px;
    padding: 5px 10px;
    /* border-radius: 3px; */
}

.member-personal .order .list li.order-title div{
    display: flex;
    flex-wrap: wrap;
    flex-basis: 80px;
    flex-grow: 1;
}

.member-personal .order .list li.order-title div:nth-last-child(1){
    flex-grow: 0;
    justify-content: flex-end;
}

.member-personal .order .list li.order-title div p:nth-child(1){
    margin-right: 3px;
}

.member-personal .order .list li.order-title div button{
    border: none;
    background-color: #fff;
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: -5px;
    padding-bottom: 1px;
    font-size: 16px;

    transition: 0.3s
}

.member-personal .order .list li.order-title div button:hover{
    border: 1px solid #ed9e27;
}

.member-personal .order .list li.order-title div button.active{
    border: 1px solid #ed9e27;
}

/* 查看 詳細資料 */
.member-personal .order .list li.order-detail{
    flex-direction: column;
    display: none;
    /* margin-bottom: 50px; */
}

.member-personal .order .list li.order-detail div{
    padding: 10px 10px;
}

.member-personal .order .list li.order-detail div:nth-child(2n){
    background-color: #ededed83;
    border-radius: 3px;
}

.member-personal .order .list li.order-detail div:nth-last-child(1){
    background-color: transparent;
    border-radius: 0px;
}

/* 商品 */
.member-personal .order .list li.order-detail .product{
    display: flex;
    align-items: center;
}

.member-personal .order .list li.order-detail .product p{
    flex-basis: 10%;
}

.member-personal .order .list li.order-detail .product p:nth-child(2){
    flex-basis: 80%;
}

.member-personal .order .list li.order-detail .product p:nth-child(3){
    text-align: right;
}

/* 付款方式 */
.member-personal .order .list li.order-detail .pay-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid #efa744;
    border-bottom: 2px solid #0096d7;
}

.member-personal .order .list li.order-detail .pay-box p{
    margin-left: 25px;
    text-align: right;
}

/* 密碼強度 password */
.member-personal .main.password .box{
    padding: 80px 200px;
}

.member-personal .password .form-group label{
    width: 18%;
}

.member-personal .password .form-group .form-control{
    width: 82%;
}

.member-personal .password .form-group label + div{
    flex-direction: column;
    align-items: flex-start;
    width: 82%;
}

.member-personal .main.password .form-group label + div .form-control{
    width: 100%;
}

.member-personal .main .form-group .strength{
    display: inline-block;
    margin: 10px 5px;
    margin-left: 0px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #cdd0d4;
}

.member-personal .main .form-group .strength p{
    float: left;
    color: #cdd0d4;
    height: 32px;
    line-height: 32px;
    padding: 0px 10px;
    margin: 0;
}

.member-personal .main .form-group .strength p:nth-child(2){
    border-left: 1px solid #cdd0d4 ;
    border-right: 1px solid #cdd0d4 ;
}

.member-personal .main .form-group .strength p.active{
    background-color: #cdd0d4;
    color: #fff;
}



@media (max-width: 991.98px){

    .member-personal .main .form-group{
        flex-direction: column;
        align-items: flex-start;
    }

    .member-personal .main .form-group label{
        width: 100%;
        margin-bottom: 5px;
    }

    .member-personal .main .form-group .form-control{
        width: 100%;
    }

    .member-personal .main .form-group label + div{
        width: 100%;
    }

    .member-personal .main.password .box{
        padding: 80px 80px;
    } 

    .member-personal .main td ,.member-personal .main th{
        font-size: 16px;
    }

    .member-personal .main .basis-200{
        flex-basis: 110px;
        flex-grow: 0;
    }

    .member-personal .order .list li.order-title div{
        flex-direction: column;
    }
    
}

@media (max-width: 767.98px){
    .member-personal .personal-box .title-box{
        padding-left: 180px;
    }

    .member-personal .main .box{
        padding: 30px 40px;
    }

    .member-personal .main .form-group{
        flex-direction: column;
        align-items: flex-start;
    }

    .member-personal .main .form-group input{
        width: 100%;
    }

    .member-personal .main .form-group label + div{
        width: 100%;
    }

    .member-personal thead{
        display: none;
    }

    .member-personal .main tr{
        flex-direction: column;
        align-items: initial;
        border-bottom: 1px solid #0096d7;
        margin-bottom: 15px;
    }

    .member-personal .container .main td{
        flex-basis: initial;
        min-height: 40px;
        border-bottom: 1px solid #e2e4e7;
        font-size: 20px;
        padding-left: 90px;
        position: relative;
    }

    .member-personal .container .main td:before{
        content: attr(data-th)"";
        color: #0096d7;
        font-weight: 300;
        width: 90px;
        display: inline-block;
        font-size: 16px;
        position: absolute;
        left: 5px;
    }

    .member-personal .main .basis-60{
        text-align: left;
    }

    .member-personal .container .main .td-none{
        border-top: 1px solid #0096d7;
    }    

    .member-personal .btn-box{
        margin: 0px;
    }

    .member-personal .btn-box button{
        padding: 8px 15px;
        display: flex;
        flex-direction: column;
    }

    .member-personal .order .list li.order-title{
        flex-direction: column;
        align-items: initial;
    }

    .member-personal .order .list li.order-title div{
        flex-basis: initial;
        align-items: center;
        flex-direction: initial;
    }

    .member-personal .order .list li.order-title div p:nth-child(1){
        width: 90px;
        text-align: justify; 
    }

    .member-personal .order .list li.order-title div p:nth-child(1):after{
        content: "";
        display: inline-block;
        width: 100%;
    }
}

@media (max-width: 575.98px){
    .member-personal .personal-box{
        margin: 20px 0;
    }

    .member-personal .main .box{
        padding: 30px 40px;
        margin: 20px 0;
    }

    .member-personal .personal-box .photo{
        right: 0px;
    }

    .member-personal .personal-box .photo .img-box{
        width: 120px;
        height: 120px;
    }

    .member-personal .personal-box .title-box{
        padding-left: 12vw;
        padding-right: 12vw;
        margin-top: 75px;
        height: initial;
        border-radius: 50px;
    }

    .member-personal .personal-box .title-box::before{
        width: 136px;
        height: 136px;
        right: -8px;
        top: -8px;
        left: initial;
    }

    .member-personal .personal-box .title-box p{
        display: flex;
        flex-wrap: wrap;
    }

    .member-personal .personal-box .title-box p span{
        margin: 0 5px;
    }

    .member-personal .btn-box button{
        padding: 6px 13px;
        font-size: 15px;
    }

    .registration .modal-header h5{
        font-size: 20px;
    }

    .member-personal .main.password .box{
        padding: 30px 40px;
    }

    .member-personal .order .list li.order-title div p{
        font-size: 16px;
    }

    .member-personal .order .list li.order-title div p:nth-child(1){
        font-size: 14px;
    }

    .member-personal .order .list li.order-title div button{
        font-size: 14px;
    }

    .member-personal .order .list li.order-detail .product p:nth-child(1){
        display: none;
    }

    .member-personal .order .list li.order-detail .product p:nth-child(2){
        margin-right: 5px;
        flex-grow: 1;
    }

    .member-personal .order .list li.order-detail .pay-box p{
        font-size: 14px;
        margin-left: 10px;
    }
}



/* 網路商城 mall-index */

/* 頭 */
.subnav.mall .navbar-brand{
    display: flex;
    align-items: center;
    justify-content: center;
}

.subnav.mall .navbar-brand span{
    color: #0090d5;
    font-weight: 600;
    font-size: 24px;
    padding: 10px;
}

.navbar.mall{
    background: #43b2c1;
}

.navbar.mall .navbar-nav .nav-item{
    border-color: #43b2c1;
}

/* banner */
.mall .banner{
    padding: 40px 0;
}

.mall .banner .slick-dotted.slick-slider{
    margin-bottom: 0;
}

.mall .banner .slick-slide{
    height: initial;
}

.mall .mall-banner .box img{
    width: 100%;
}

/* 按鈕 */
.mall .banner .slick-prev , .mall .banner .slick-next{
    background-color: #fff;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    left: 15px;
    z-index: 55;
    top: 50%;
}

.mall .banner .slick-next{
    left: initial;
    right: 15px;
}

.mall .banner .slick-prev:hover , .mall .banner .slick-next:hover{
    border: 1px solid #90c6d6;
}

.mall .banner .slick-prev:before , .mall .banner .slick-next:before{
    width: 10px;
    height: 10px;
    background-image: none;
    border-top: 5px solid #90c6d6;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid #90c6d6;
    transform: rotate(-135deg) translateX(-8px) translateY(8px);
}

.mall .banner .slick-next:before{
    transform: rotate(45deg) translateX(5px) translateY(-5px);
}

/* 內容 */
.mall .main{
    background-color: #ededed;
    padding: 20px 0;
}

.mall .main .box{
    background-color: #fff;
    margin: 20px 0;
    border-radius: 5px;
    overflow: hidden;
}

.mall .main .box a:hover{
    text-decoration: none;
}

/* 圖 */
.mall .main .box .img-box{
    height: 240px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mall .main .box img{
    width: 100%;
    transition: 0.3s;
}

.mall .main .box a:hover img{
    transform: scale(1.1);
}

/* 文字 */
.mall .main .box .text{
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 230px;
    justify-content: space-between;
}

.mall .main .box .product-title{
    display: flex;
    align-items:flex-start;
    margin-top: 10px;
    flex-basis: 60px;
}

.mall .main .box .product-title h1{
    font-size: 24px;
    color: #686868;
    margin: 5px 0;
    flex-basis: 150px;
    flex-grow: 1;
}

.mall .main .box .product-title p{
    font-size: 16px;
    background-color: #efa744;
    color: #fff;
    font-weight: 300;
    border-radius: 5px;
    padding: 3px 15px;
    padding-bottom: 2px;
    margin: 5px 0;
    margin-right: 10px;
}

.mall .main .box .product-title + p{
    flex-grow: 1;
}

.mall .main .box p{
    color: #686868;
    margin: 0;
}

.mall .main .box .price{
    display: flex;
    justify-content: space-between;
}

.mall .main .box .price p:nth-child(1){
    text-decoration:line-through;
}

.mall .main .box .price p:nth-child(2){
    color: #bf3c22;
    font-size: 18px;
}

/* 按鈕 */
.mall .main .box .btn-box button{
    border: none;
    color: #fff;
    background-color: #43b2c1;
    border-radius: 5px;
    width: 100%;
    display: inline-block;
    font-size: 18px;
    padding: 3px 0;
    padding-bottom: 2px;
    margin: 10px 0;

    transition: 0.3s;
}

.mall .main .box .btn-box button:hover{
    background-color: #2d909d;
}

/* 側邊購物車 */
.mall-sidebar a{
    display: inline-block;
    background-color: #43b2c1;
    width: 100%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    box-shadow: -2px 2px 5px #00000011;

    position: relative;
    transition: 0.3s;
}

.mall-sidebar a:hover{
    background-color: #2d909d;
}

.mall-sidebar a img{
    padding: 15px 10px;
}

.mall-sidebar a .text{
    display: none;
}

.mall-sidebar a .number{
    background-color: #efa744;
    width: 25px;
    height: 25px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: -10px;
    left: -10px;
}

.mall-sidebar a .number p{
    color: #fff;
    margin: 0;
    orphans: 1px;
}



@media (max-width: 1199.98px){
    .mall .main .box .img-box{
        height: 200px;
    }
}

@media (max-width: 991.98px){
    .mall .main .box .img-box{
        height: 235px;
    }
}

@media (max-width: 767.98px){
    .mall .main .box .img-box{
        height: initial;
    }

    .mall .main .box .text{
        padding: 20px;
    }

    .mall-sidebar a img{
        display: none;
        padding: 0;
    }
    
    .mall-sidebar a .text{
        display: inline-block;
        writing-mode: vertical-lr;
        margin: 0;
        padding: 10px 5px;
        color: #fff;
    }
    
}

@media (max-width: 575.98px){
    .subnav.mall .navbar-brand{
        flex-direction: column;
    }

    .subnav.mall .navbar-brand span{
        padding: 5px;
    }
}



/* 商城商品 mall-product */
.mall-product .product{
    padding: 40px 0;
}

.mall-product .product .container{
    display: flex;
}

.mall-product .product .row{
    margin-left: -10px;
    margin-right: -10px;
}

.mall-product .product .col-md-6{
    padding: 0 10px;
}

/* 圖片 */
.mall-product .product .img-box{
    display: flex;
    height: 100%;
    justify-content: space-between;
}

.mall-product .product .img-box img{
    width: 100%;
}

.mall-product .product .img-box .big{
    flex-basis: 75%;
    display: flex;
    align-items: center;
    border: 1px solid #0090d5;
    border-radius: 3px;
    overflow: hidden;
}

.mall-product .product .img-box .small{
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -5px 0;
    margin-left: 10px;
}

.mall-product .product .img-box .small div{
    border: 1px solid #0090d5;
    border-radius: 3px;
    overflow: hidden;
    flex-basis: 50px;
    flex-grow: 1;
    overflow: hidden;

    display: flex;
    align-items: center;
    margin: 5px 0;
}

.mall-product .product .img-box .small div img{
    transform: scale(1.1);
    transition: 0.3s;
}

.mall-product .product .img-box .small div:hover img{
    transform: scale(1.2);
}

/* 標題文字 購物 */
.mall-product .product .title-text{
    background-color: #ededed;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 3px;
}

.mall-product .product .title-text h1{
    font-size: 24px;
    color: #0090d5;
}

.mall-product .product .title-text > p{
    color: #094067;
    font-size: 16px;
}

.mall-product .product .title-text .price{
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    color: #0090d5;
}

.mall-product .product .title-text .price .share{
    display: flex;
    padding: 0;
    margin: 0 -5px;
    list-style: none;
}

.mall-product .product .title-text .price .share li{
    margin: 0 5px;
}

.mall-product .product .title-text .price .share li:hover img{
    opacity: 0.8;
}

.mall-product .product .title-text hr{
    border-color: #094067;
}

.mall-product .product .title-text .shopping-box{
    overflow: hidden;
}

/* 購買商品數量 */
.mall-product .product .title-text .shopping-box .number{
    float: left;
    width: 150px;
    margin: 5px 0;

    display: flex;
    align-items: center;
    border: 1px solid #0090d5;
    border-radius: 3px;
}

.mall-product .product .title-text .shopping-box .number p{
    padding: 2px 10px;
    padding-bottom: 1px;
    margin: 0;
    cursor: pointer;
    flex-basis: 20%;
    font-size: 12px;
    line-height: 24px;

    transition: 0.3s;
}

.mall-product .product .title-text .shopping-box .number p:hover{
    background-color: #0090d5;
    color: #fff;
}

.mall-product .product .title-text .shopping-box .number .num{
    border-left: 1px solid #0090d5;
    border-right: 1px solid #0090d5;
    /* padding: 2px 25px; */
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
}

.mall-product .product .title-text .shopping-box .number .num:hover{
    background-color: transparent;
    color: #094067;
}

/* 按鈕 */
.mall-product .product .title-text .btn{
    padding: 0;
    float: right;
    margin: 5px 0;
}

.mall-product .product .title-text .btn button{
    background-color: transparent;
    color: #0090d5;
    border: 1px solid #0090d5;
    border-radius: 50px;
    padding: 2px 20px;
    padding-bottom: 1px;
    margin-left: 10px;

    transition: 0.3s;
}

.mall-product .product .title-text .btn button:hover{
    background-color: #0090d5;
    color: #fff;
}

/* 詳細內文 */
/* 頁籤按鈕 */
.mall-product .main-text .btn{
    padding: 0;
}

.mall-product .main-text .btn button{
    background-color: transparent;
    color: #0090d5;
    border: 1px solid #0090d5;
    border-radius: 50px;
    padding: 2px 20px;
    padding-bottom: 1px;
    margin-right: 10px;

    transition: 0.3s;
}

.mall-product .main-text .btn button.active{
    background-color: #0090d5;
    color: #fff;
}

.mall-product .main-text .main{
    background-color: transparent;
    padding: 40px 0;
    display: none;
}

.mall-product .main-text .main.show{
    display: block;
}

/* 閱讀更多 td-more */
/* 內文限制高度 */
.mall-product .main-text .main .text.h-600{
    height: 600px;
    overflow: hidden;
}

.mall-product .main-text .main .text.add{
    height: 100%;
}

/* 展開按鈕 */
.mall-product .main-text .main .td-more{
    text-align: center;
    position: relative;
    z-index: 55;
}

.mall-product .main-text .main .td-more.add{
    display: none;
}

.mall-product .main-text .main .td-more > div{
    padding-top: 20px;
    position: absolute;
    width: 100%;
    background: linear-gradient( to bottom , transparent 0% , #fff 40% );
    transform: translateY(-45px);
}

.mall-product .main-text .main .td-more div button{
    background-color: transparent;
    border: none;
    color: #0096d7;
    font-size: 18px;

    cursor: pointer;

    position: relative;
}

.mall-product .main-text .main .td-more div button p{
    position: relative;
    padding: 2px 15px;
    padding-right: 35px;
    margin: 0;
    z-index: 1;
}

.mall-product .main-text .main .td-more div button p::after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #0096d7;
    border-bottom: 5px solid #0096d7;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
    right: 15px;
}

.mall-product .main-text .main .td-more div .line{
    width: 250px;
    height: 2px;
    background: linear-gradient( to right ,#0096d7 25% , transparent 25% , transparent 75%  , #0096d7 75% );
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}



@media (max-width: 991.98px){
    .mall-product .product .img-box{
        height: initial;
        margin-bottom: 15px;
    }

    .mall-product .product .title-text{
        height: initial;
    }

}

@media (max-width: 767.98px){
    .mall-product .product .title-text{
        padding: 20px;
    }
}

@media (max-width: 575.98px){
    .mall-product .product .title-text .price .share li{
        margin: 0 3px;
    }

    .mall-product .product .title-text .btn button{
        padding: 2px 18px;
        margin-left: 5px;
    }
}


/* 商城 購物訂單 mall-order */
/* 訂單明細 */
.mall-order .order-box{
    padding: 60px 0;
}

.mall-order .order-box .container{
    border: 1px solid #ed9e27;
    border-radius: 3px;
}

/* 商品列表 */
.mall-order .order-box .list{
    padding: 0;
}

.mall-order .order-box .list li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e2e4e7;
}

.mall-order .order-box .list li > div{
    flex-basis: 150px;
    text-align: right;
}

.mall-order .order-box .list li > div:nth-child(1){
    flex-basis: 150px;
    text-align: left;
}

.mall-order .order-box .list li > div:nth-child(2){
    flex-basis: 100px;
    flex-grow: 1;
    text-align: left;
}

/* 商品標題 */
.mall-order .order-box .list li.title{
    border-bottom: 1px solid #e2e4e7;
    padding-bottom: 0;
}

.mall-order .order-box .list li.title div{
    color: #0096d7;
}

.mall-order .order-box .list li.title div:nth-child(odd){
    border-bottom: 1px solid #0096d7;
}

/* 數量 */
.mall-order .order-box .list li .number{
    float: right;
    width: 110px;
    margin: 5px 0;

    display: flex;
    align-items: center;
    border: 1px solid #ededed;
    border-radius: 3px;
}

.mall-order .order-box .list li .number p{
    padding: 1px 5px;
    padding-bottom: 0px;
    margin: 0;
    cursor: pointer;
    flex-basis: 20%;
    font-size: 12px;
    line-height: 24px;

    transition: 0.3s;
}

.mall-order .order-box .list li .number p:hover{
    background-color: #ed9e27;
    color: #fff;
}

.mall-order .order-box .list li .number .num{
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
}

.mall-order .order-box .list li .number .num:hover{
    background-color: transparent;
    color: #094067;
}

/* 總計 */
.mall-order .order-box .total{
    text-align: right;
    padding-bottom: 15px;
}

.mall-order .order-box .total p{
    margin: 0;
    display: inline-block;
    color: #0096d7;
    margin-left: 10px;
}

/* 付款方式 */
.mall-order .pay-box{
    padding-bottom: 60px;  
}

.mall-order .pay-box .container{
    border: 1px solid #ed9e27;
    border-radius: 3px;
}

.mall-order .pay-box .pay{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 15px 0;
    /* margin-top: 0; */
}

.mall-order .pay-box .pay button{
    background-color: transparent;
    border: 1px solid #0090d5;
    padding: 3px 12px;
    padding-bottom: 2px;
    border-radius: 8px;
    margin: 0 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;

    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 27px;

    transition: 0.3s;
}

.mall-order .pay-box .pay li > p{
    font-size: 13px;
    color: #686868;
    margin: 5px 15px;
}

.mall-order .pay-box .pay button  img{
    margin: 0 5px;
}

.mall-order .pay-box .pay button  p{
    color: #686868;
    margin: 0 5px;
}

.mall-order .pay-box .pay button:hover{
    text-decoration: none;
    opacity: 0.8;
}

.mall-order .pay-box .pay button.active{
    border: 1px solid #ed9e27;
    background-image: url(../img/pay-tick.png);
}

.mall-order .pay-box .pay button.active p{
    color: #ed9e27;
}

/* 收貨人資訊 information */
.mall-order .information{
    padding-bottom: 60px;  
}

.mall-order .information .container{
    border: 1px solid #ed9e27;
    border-radius: 3px;
}

.mall-order .information .text{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
}

.mall-order .information .form-group{
    flex-basis: 50%;
    padding: 20px;
    margin: 0;
    display: flex;
    align-items: center;
}

.mall-order .information .form-group label{
    flex-basis: 100px;
    text-align: justify;
    margin: 0;
    margin-right: 10px;
}

.mall-order .information .form-group label::after{
    content: "";
    display: inline-block;
    width: 100%;
}

.mall-order .information .form-group .form-control{
    flex-basis: calc(100% - 100px);
    height: 32px;
    padding: 5px;
}

.mall-order .information .address-box{
    flex-basis: 100%;
}

.mall-order .information .address-box .address-options{
    flex-basis: 250px;
    display: flex;
}

.mall-order .information .address-box .form-control{
    flex-basis:300px;
    flex-grow: 1;
}

.mall-order .information .address-box .address-options .form-control{
    flex-basis: 100%;
    margin-right: 10px;
}

/* 購買按鈕 */
.mall-order .btn-box .container{
    background-color: #eae9e8;
    border-radius: 3px;
    margin-bottom: 60px;
}
.mall-order .btn-box .btn{
    text-align: right;
    width: 100%;
    padding: 15px 0px;
    cursor: auto;
}

.mall-order .btn-box .btn button{
    background-color: #ed9e27;
    color: #fff;
    border: none;
    padding: 10px 60px;
    padding-bottom: 9px;
    border-radius: 3px;
    font-size: 20px;

    transition: 0.3s;
}

.mall-order .btn-box .btn p{
    font-size: 12px;
    color: #686868;
    margin-top: 5px;
    margin-bottom: 0;
}

.mall-order .btn-box .btn button:hover{
    opacity: 0.8;
}



@media (max-width: 991.98px){
    .mall-order .order-box .list li > div:nth-child(1){
        flex-basis: 80px;
    }

    .mall-order .information .address-box .address-options{
        flex-basis: 185px;
    }    
}

@media (max-width: 767.98px){
    .mall-order .order-box .list li > div{
        flex-basis: 120px;
    }

    .mall-order .order-box .list li > div:nth-child(1){
        flex-basis: 50px;
    }

    .mall-order .information .form-group{
        flex-direction: column;
        align-items: flex-start;
    }

    .mall-order .information .form-group label{
        flex-basis: initial;
    }

    .mall-order .information .address-box .address-options{
        flex-basis: initial;
        width: 48%;
        margin-bottom: 10px;
    }
    
    .mall-order .information .address-box .form-control{
        flex-basis: initial;
    }

    .mall-order .btn-box .btn{
        text-align: center;
    }
}

@media (max-width: 575.98px){
    .mall-order .order-box .list li > div{
        flex-basis: 90px;
    }

    .mall-order .order-box .list li > div:nth-child(1){
        flex-basis: 40px;
    }

    .mall-order .order-box .list li .number{
        width: 80px;
    }

    .mall-order .order-box .list li .number p{
        padding: 1px 3px;
    }

    .mall-order .pay-box .pay{
        margin-top: 0;
        margin-bottom: 30px;
    }

    .mall-order .information .text{
        flex-direction: column
    }

    .mall-order .information .address-box .address-options{
        width: calc(100% + 10px);
    }
}


/* 訂單送出成功 mall-order-finish */
.mall-order-finish{
    padding: 60px;
}

.mall-order-finish .box{
    border: 1px solid #ed9e27;
    border-radius: 3px;
    max-width: 500px;
    margin: 0 auto;
}

.mall-order-finish .text{
    list-style: none;
    padding: 30px;
    padding-bottom: 0;
}


.mall-order-finish .text li{
    display: flex;
    margin: 10px 0;
    border-bottom: 1px solid #0096d7;
}


.mall-order-finish .text li p{
    margin: 5px 0;
    font-size: 18px;
}

.mall-order-finish .text li > p:nth-child(1){
    color: #0096d7;
    font-weight: normal;
    width: 90px;
}

.mall-order-finish .text li .product{
    width: calc( 100% - 90px);
}

.mall-order-finish .text li .product p{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
}

.mall-order-finish .text li .product p:nth-last-child(1){
    border-bottom: none;
}

.mall-order-finish .text li .product p span{
    margin-left: 6px;
}

.mall-order-finish .btn{
    padding: 30px;
    padding-top: 0;
    display: flex;
    justify-content: center;
}

.mall-order-finish .btn button {
    border: none;
    color: #fff;
    background-color: #ed9e27;
    border-radius: 5px;
    font-size: 18px;
    padding: 3px 25px;
    padding-bottom: 2px;
    margin: 10px 20px;
    transition: 0.3s;
}

.mall-order-finish .btn button:hover {
    opacity: 0.8;
}


@media (max-width: 575.98px){
    .mall-order-finish .text{
        padding: 15px;
        padding-bottom: 0;
    }

    .mall-order-finish .text li{
        flex-direction: column;
    }   

    .mall-order-finish .text li .product{
        width: 100%;
    }

    .mall-order-finish .btn{
        flex-direction: column;
        padding: 15px;
        padding-top: 0;
    }

    .mall-order-finish .btn button{
        margin: 10px 0;
    }
}



/* 訂單送出成功 mall-order-detail */
.mall-order-detail{
    padding: 60px 0;
}

.mall-order-detail .box{
    border: 1px solid #ed9e27;
    border-radius: 3px;
}

.mall-order-detail .text{
    list-style: none;
    padding: 0px;
    padding: 0 40px;
}

.mall-order-detail .text li{
    margin: 15px 0;
}

.mall-order-detail .text li p{
    margin: 0;
}

.mall-order-detail .text .title{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #0096d7;
    font-size: 20px;
    font-weight: normal;
    color: #0096d7;
}

.mall-order-detail .text .title p{
    margin-right: 15px;
}

/* 資訊 */
.mall-order-detail .text .information{
    padding: 20px 0;
    padding-bottom: 10px;
    margin: 0 -10px;

    display: flex;
}

.mall-order-detail .text .information > div{
    flex-grow: 1;
    margin: 0 10px;
}

.mall-order-detail .text .information p{
    margin: 5px 0;
}

.mall-order-detail .text .information .subtitle{
    font-size: 18px;
    color: #8b8b8b;
    border-bottom: 1px solid #ccc;
    margin: 0;
    margin-bottom: 10px;
}

/* 商品 */
.mall-order-detail .text .product-box .product{
    padding: 0;
    border-top: 1px solid #0096d7;
}

.mall-order-detail .text .product-box .product li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e2e4e7;
    margin: 0;
}

.mall-order-detail .text .product-box .product li:nth-child(1){
    padding-bottom: 0;
    padding-top: 25px;
    border-bottom: 1px solid #e2e4e7;
    color: #8b8b8b;
}

.mall-order-detail .text .product-box .product li p{
    flex-basis: 125px;
    text-align: right;
}

.mall-order-detail .text .product-box .product li p:nth-child(1){
    flex-grow: 1;
    text-align: left;
    font-weight: normal;
}

.mall-order-detail .text .product-box .product li p:nth-child(2){
    flex-basis: 60px;
}

/* 總額 */
.mall-order-detail .text .total div {
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-end;
}

.mall-order-detail .text .total div p:nth-last-child(1){
    width: 125px;
    text-align: right;
}

.mall-order-detail .text .total hr{
    border-color: #0096d7;
    margin-top: 0;
}

.mall-order-detail .text .total hr + div p{
    color: #0096d7;
    font-size: 20px;
    font-weight: normal;
}



@media (max-width: 767.98px){
    .mall-order-detail .text .information{
        flex-direction: column;
        padding-top: 10px;
    }

    .mall-order-detail .text .information .subtitle{
        margin-top: 10px;
    }
}



/* activity-record 活動紀錄 */
.activity-record .main .box{
    position: relative;
    margin: 15px 0;
    height: 230px;
    border-radius: 3px;
    overflow: hidden;
}

.activity-record .main .box img{
    width: 100%;
    transition: 0.3s;
}

.activity-record .main .box p{
    color: #fff;
    background-color: #000000c1;
    padding: 3px 8px;
    margin: 0;
    width: 100%;
    min-height: 55px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    bottom: 0;
}

.activity-record .main .box a:hover img{
    transform: scale(1.1);
}

@media (max-width: 1199.98px){
    .activity-record .main .box{
        height: 190px;
    }
}

@media (max-width: 767.98px){
    .activity-record .main .box{
        height: initial;
    }
}



/* 活動預告 activity-notice */

/* 內容 */
.activity-notice .main-box .list-box{
    list-style: none;
    padding: 0;
}

.activity-notice .main-box .list-box li a{
    display: flex;
    align-items: center;
    margin:20px 0;
    color: #000;
    border-radius: 5px;
    overflow: hidden;

    transition: 0.5s;
}

.activity-notice .main-box .list-box li a:hover{
    text-decoration: none;
    color: #000;
    opacity: 0.9;
}

.activity-notice .main-box .list-box li a .box{
    display: flex;
    align-items: center;
    flex-basis: 35%;
}

.activity-notice .main-box .list-box li a .title-box{
    flex-basis: 65%;
}

.activity-notice .main-box .list-box li a div div{
    height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.activity-notice .main-box .list-box li p{
    margin: 0;
    padding: 6px 0px;
    text-align: center;
}

.activity-notice .main-box .list-box li .time .one{
    color: #fff;
    background: linear-gradient( 102deg , transparent 7% ,#3db3c6 8%);
    border: none;
    border-bottom: 2px solid #3db3c6;
}

.activity-notice .main-box .list-box li .time p{
    border: 1px solid transparent;
}

.activity-notice .main-box .list-box li .tag{
    background-color: #0096d7;
    color: #fff;

    transition: 0.5s;
}

.activity-notice .main-box .list-box li .county .one{
    color: #fff;
    background-color: #3db3c6;

    transition: 0.5s;
}

.activity-notice .main-box .list-box li .county p{
    color: #3db3c6;
    border: 1px solid #3db3c6;
}

.activity-notice .main-box .list-box li .location .one{
    color: #fff;
    background-color: #6d78b3;

    transition: 0.5s;
}

.activity-notice .main-box .list-box li .location p{
    color: #6d78b3;
    border: 1px solid #6d78b3;
}

.activity-notice .main-box .list-box li .title{
    background-color: #90c6d644;

    transition: 0.5s;
}

.activity-notice .main-box .list-box li .title p{
    text-align: left;
    padding: 0 10px;
    font-size: 18px;
}

.activity-notice .main-box .list-box li a:hover .time .one{
    background: linear-gradient( 104deg , transparent 7% ,#2c8391 8%);
    border-bottom: 2px solid #2c8391;
}

.activity-notice .main-box .list-box li a:hover .tag{
    background-color: #004b6b;
}

.activity-notice .main-box .list-box li a:hover .county p{
    background-color: #3db3c6;
    color: #fff;
    border: 1px solid #49d3e9;
}

.activity-notice .main-box .list-box li a:hover .location p{
    background-color: #6d78b3;
    color: #fff;
    border: 1px solid #a0acf0;
    /* border-top: 1px solid #fff; */
}

.activity-notice .main-box .list-box li a:hover .title{
    opacity: 0.8;
    background-color: #0096d7 ;
    color: #fff;
}

/* 總會調整 change-area */

.activity-notice .main-box .list-box li a.change-area .box{
    flex-basis: 18%;
}

.activity-notice .main-box .list-box li a.change-area .title-box{
    flex-basis: 82%;
}



@media (max-width: 991.98px){

    .activity-notice .main-box .list-box li a .box{
        flex-basis: 45%;
    }
    
    .activity-notice .main-box .list-box li a .title-box{
        flex-basis: 55%;
    }

    .activity-notice .main-box .list-box li a.change-area .box{
        flex-basis: 23%;
    }
    
    .activity-notice .main-box .list-box li a.change-area .title-box{
        flex-basis: 77%;
    }
}

@media (max-width: 767.98px){

    .activity-notice .main-box .list-box li a{
        flex-direction: column;
        align-items: stretch;
    }

    .activity-notice .main-box .list-box li a div div{
        height: 64px;
    }

    .activity-notice .main-box .list-box li p{
        padding: 3px 0;
    }

    .activity-notice .main-box .list-box li .time .one{
        background: linear-gradient( 103deg , transparent 5% ,#3db3c6 6%);
    }

    .activity-notice .main-box .list-box li .change-area .time .one{
        background: linear-gradient( 103deg , transparent 2% ,#3db3c6 3%);
    }

    .activity-notice .main-box .list-box li a .title{
        height: initial;
        padding: 10px 0;
    }

}


/* apply-index 報名系統 */
.apply-index .btn-box{
    overflow: hidden;
}

/* 按鈕 */
.apply-index .btn-box .btn{
    padding: 0;
    margin: 10px 0;
}

.apply-index .btn-box .btn button{
    background-color: #fff;
    color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 50px;
    padding: 3px 20px;
    padding-bottom: 2px;
    margin-right: 15px;

    transition: 0.3s;
}

.apply-index .btn-box .btn button:hover{
    background-color: #0096d7;
    color: #fff;
}

.apply-index .btn-box .btn button.active{
    background-color: #0096d7;
    color: #fff;
}

/* 搜尋 */
.apply-index .btn-box .search-box{
    float: right;
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.apply-index .btn-box .search-box .form-group{
    margin: 0;
}

.apply-index .btn-box .search-box input{
    border-radius: 50px 0 0 50px;
    border: 1px solid #0096d7;
    height: 31px;
    width: 150px;
}

.apply-index .btn-box .search-box button{
    background-color: #0096d7;
    color: #fff;
    border: 1px solid #0096d7;
    border-radius: 0 50px 50px 0;
    padding: 3px 15px;
    padding-bottom: 2px;
    margin-right: 15px;

    transition: 0.3s;
}

.apply-index .btn-box .search-box button:hover{
    opacity: 0.8;
}

/* 內容 */
.apply-index .main .list{
    display: none;
}

.apply-index .main .list.show{
    display: block;
}

.apply-index .main .box{
    box-shadow: 0px 3px 5px #0000001f;
    border-bottom: 5px solid transparent;
}

.apply-index .main .box:hover{
    box-shadow: 0px 3px 5px #0000002e;
    border-bottom: 5px solid #43b2c1;
}

.apply-index .main .box .img-box{
    height: 168px;
    align-items: flex-start;
}

.apply-index .main .box hr{
    margin: 0;
    border: 1px solid #43b2c1;
}

.apply-index .main .box .text{
    height: initial;
}

.apply-index .main .box .text > p{
    font-size: 18px;
    height: 60px;
    overflow: hidden;
}

.apply-index .main .box .text .time{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 10px; */
    margin: 10px 0;
}

.apply-index .main .box .text .time p{
    margin: 0;
    color: #0096d7;
    padding-top: 1px;
}

.apply-index .main .box .text .time p:nth-child(1){
    padding-left: 22px;
    background-image: url(../img/apply-time.png);
    background-repeat: no-repeat;
    background-position: center left;
}

/* 頁碼 */
.apply-index .main .pagination{
    justify-content: flex-end;
    margin-top: 15px;

}
.apply-index .main .page-link{
    background-color: transparent;
    border-radius: 0
}

.apply-index .pagination .page-link.previous{
    background-color: #0096d7;
    border-radius: 5px 0 0 5px;
}

.apply-index .pagination .page-link.next{
    background-color: #0096d7;
    border-radius: 0 5px 5px 0;
}

.apply-index .pagination .page-link.previous:hover, .apply-index .pagination .page-link.next:hover{
    background-color: transparent;
}

/* 調整 change-area */

.apply-index .main .change-area .box .text .time{
    justify-content: flex-end;
}

.apply-index .main .change-area .box:hover{
    box-shadow: 0px 3px 5px #0000002e;
    border-bottom: 5px solid #ed9e27 ;
}


.apply-index .main .change-area .box hr{
    margin: 0;
    border: 1px solid #ed9e27 ;
}



@media (max-width: 1199.98px){
    .apply-index .main .box .img-box{
        height: 138px;
    }

    .apply-index .main .box .text .time{
        margin-bottom: 0;
    }
    
}

@media (max-width: 991.98px){
    .apply-index .main .box .img-box{
        height: 218px;
    }

}

@media (max-width: 767.98px){
    .apply-index .main .box .img-box{
        height: initial;
    }
}




/* 活動報名 apply-activity */

/* 標題 banner */
.apply-activity .banner{
    background-color: #ededed;
}
.apply-activity .banner .activity-title{
    overflow: hidden;
    margin: 10px 0;
}

.apply-activity .banner .activity-title h1{
    display: inline-block;
    color: #0090d5;
    font-size: 30px;
    margin: 0;
}

.apply-activity .banner .activity-title div{
    float: right;
    display: flex;
    align-items: center;
}

.apply-activity .banner .activity-title p{
    color: #43b2c1;
    margin: 0 15px;
    font-size: 24px;
}

.apply-activity .banner .activity-title button{
    background-color: #43b2c1;
    color: #fff;
    border: none;
    /* border: 1px solid #0096d7; */
    border-radius: 3px;
    padding: 3px 20px;
    padding-bottom: 2px;

    transition: 0.3s;
}

.apply-activity .banner .activity-title button:hover{
    background-color: #2d909d;
}

/* 內文 */
.apply-activity .main{
    background-color: transparent;
    padding: 40px 0;
}

/* 頁籤按鈕 */
.apply-activity .main .btn-box button{
    background-color: transparent;
    color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 30px;
    padding: 3px 20px;
    padding-bottom: 2px;
    margin-right: 10px;

    transition: 0.3s;
}

.apply-activity .main .btn-box button.active{
    background-color: #0090d5;
    color: #fff;
}

/* 文字介紹 */
.apply-activity .main .text-box{
    display: none;
}

.apply-activity .main .text-box.show{
    display: block;
}

.apply-activity .main .text{
    margin: 20px 0;
    padding: 20px 0;
    height: 600px;

    transition: 0.3s;
}

.apply-activity .main .text.h600{
    overflow-y: scroll;
    height: 600px;
}

.apply-activity .main .text.add{
    height: 100%;
    overflow-y:auto;
}

/* 展開按鈕 */
.apply-activity .main .more{
    position: relative;
    z-index: 55;
}

.apply-activity .main .more.add{
    display: none;
}

.apply-activity .main .more > div{
    padding-top: 20px;
    position: absolute;
    width: 98%;
    background: linear-gradient( to bottom , transparent 0% , #fff 40% );
    transform: translateY(-50px);
    padding-left: 60px;
}

.apply-activity .main .more div button{
    background-color: transparent;
    border: none;
    color: #0096d7;
    font-size: 18px;
    cursor: pointer;

    position: relative;
}

.apply-activity .main .more div button p{
    position: relative;
    padding: 2px 15px;
    padding-right: 35px;
    margin: 0;
    z-index: 1;
}

.apply-activity .main .more div button p::after{
    content: "";
    display: inline-block;
    border-top: 5px solid transparent;
    border-right: 5px solid #0096d7;
    border-bottom: 5px solid #0096d7;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
    right: 15px;
}

.apply-activity .main .more div .line{
    width: 250px;
    height: 2px;
    background: linear-gradient( to right ,#0096d7 25% , transparent 25% , transparent 75%  , #0096d7 75% );
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* 報名框框 */
.apply-activity .main .box{
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    list-style: none;
    margin: 0;
}

/* 時間時程 */
.apply-activity .main .box .time{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border: 1px solid #0096d7;
    border-radius: 30px;
    text-align: center;
    padding: 8px 0;
    background: linear-gradient( 110deg , #0096d7 34.5% , transparent 35%);
}

.apply-activity .main .box .time p{
    flex-basis: 100px;
    color: #fff;
}

.apply-activity .main .box .time p:nth-child(2){
    flex-basis: calc(100% - 100px);
    color: #0096d7;
}

.apply-activity .main .box .time.orange{
    border: 1px solid #ed9e27 ;
    background: linear-gradient( 110deg , #ed9e27 34.5% , transparent 35%);
}

.apply-activity .main .box .time.orange p{
    color: #fff ;
}

.apply-activity .main .box .time.orange p:nth-child(2){
    color: #ed9e27;
}

/* 收藏按鈕 */
.apply-activity .main .box li button{
    background-color: #43b2c1;
    color: #fff;
    border: none;
    border-radius: 30px;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 15px;

    transition: 0.3s;
}

.apply-activity .main .box li button:hover{
    background-color: #2d909d;
}

/* 分享活動 */
.apply-activity .main .box .share{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.apply-activity .main .box .share p{
    margin: 0 3px;
    margin-right: 15px;
}

.apply-activity .main .box .share div{
    display: flex;
}

.apply-activity .main .box .share div a{
    margin: 0 3px;
}

.apply-activity .main .box .share div a:hover img{
    transform: scale(1);
    opacity: 0.8;
}

/* 報名 */
.apply-activity .main .box .apply div{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.apply-activity .main .box .apply div p{
    color: #43b2c1;
    font-size: 24px;
}

.apply-activity .main .box .apply div button{
    width: initial;
    border-radius: 3px;
    font-size: 18px;
    padding: 6px 25px;
    padding-bottom: 5px;
    margin: 0;
}

/* 立即報名按鈕 彈跳視窗 */
.apply-activity .modal .modal-dialog{
    max-width: 800px;
}

/* 標題 */
.apply-activity .modal .modal-dialog .modal-header{
    justify-content: space-between;
    padding: 15px 25px;
}

.apply-activity .modal .modal-dialog .modal-header h5{
    color: #0096d7;
}

.apply-activity .modal .modal-dialog .modal-header .close{
    padding: 0;
    margin: 0;
    opacity: 1;
}

.apply-activity .modal .modal-dialog .modal-header .close:hover{
    opacity: 0.8;
}

.apply-activity .modal .modal-dialog .modal-header .close span{
    color: #0096d7;
}

/* 內文 */
.apply-activity .modal .modal-dialog .modal-body{
    padding: 15px 25px;
}
.apply-activity .modal .modal-dialog .modal-body .text{
    padding: 20px;
}

.apply-activity .modal .modal-dialog .modal-body .text .check{
    display: flex;
    align-items: center;
}

.apply-activity .modal .modal-dialog .modal-body .text .check p{
    margin: 0;
    margin-top: 1px;
    margin-left:5px;
}

/* 按鈕 */

.apply-activity .modal .modal-dialog .modal-footer{
    padding: 15px 25px;
}

.apply-activity .modal .modal-dialog .modal-footer button{
    background-color: transparent;
    color: #0096d7;
    border: 1px solid #0096d7;
    border-radius: 30px;
    padding: 3px 20px;
    padding-bottom: 2px;
    margin-right: 10px;
    transition: 0.3s;
}

.apply-activity .modal .modal-dialog .modal-footer button:hover{
    background-color: #0096d7;
    color: #fff;
}

@media (max-width: 991.98px){
    .apply-activity .main .btn-box button{
        margin-right: 0;
    }
}

@media (max-width: 767.98px){
    .apply-activity .banner .activity-title h1{
        font-size: 24px;
        padding: 3px 0;
    }

    .apply-activity .main .text{
        height: initial;
    }

    .apply-activity .main .box{
        margin: 20px 0;
    }

    .apply-activity .main .box .apply div{
        justify-content: flex-end;
    }

    .apply-activity .main .box .apply div button{
        margin-left: 15px;
        padding: 6px 20px;
    }

    .apply-activity .main .box .time p{
        flex-basis: 180px;
    }
}

@media (max-width: 575.98px){
    .apply-activity .main .box .time{
        background: linear-gradient( 110deg , #0096d7 120px , transparent 121px);
    }

    .apply-activity .main .box .time.orange{
        background: linear-gradient( 110deg , #ed9e27  120px , transparent 121px);
    }

    .apply-activity .main .box .time p{
        flex-basis: 135px;
    }
}

/* 線上課程 apply-courses */
.apply-courses .courses-box{
    display: flex;
    background-color: #cae9f7;
    padding: 10px;
    border-radius: 3px;

    height: 633px;
}

/* 影片 */
.apply-courses .courses-box .video{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 3px;
    overflow: hidden;

    flex-basis: 65%;
}

.apply-courses .courses-box .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 課程列表 */
.apply-courses .courses-box .text-box{
    flex-basis: 35%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 5px;
}

/* 當前課程 */
.apply-courses .courses-box .text-box .present{
    background-color: #ed9e27;
    width: 100%;
    padding: 15px 10px;
    border-radius: 3px;
}

.apply-courses .courses-box .text-box .present h1{
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 300;
}

.apply-courses .courses-box .text-box .present div{
    position: relative;
    padding-top: 5px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.apply-courses .courses-box .text-box .present div:before{
    content: "";
    border-top: 6px solid #fff;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-radius: 4px;
    transform: rotate(45deg);

    position: absolute;
    top: 10px;
}

/* 所有文字 p */
.apply-courses .courses-box .text-box .text p{
    color: #fff;
    margin: 0;
}

.apply-courses .courses-box .text-box .text p:nth-child(1){
    padding-left: 22px;
    flex-basis: 105px;
}

.apply-courses .courses-box .text-box .text p:nth-child(2){
    flex-basis: 175px;
    margin-left: 5px;
    margin-right: 5px;
}

.apply-courses .courses-box .text-box .list li p{
    color: #0090d5;
}

/* 所有課程列表 */
.apply-courses .courses-box .text-box .list{
    list-style: none;
    padding: 0;
    padding-top: 5px;
    overflow: hidden;
    overflow-y: scroll;
    margin: 0;
}

.apply-courses .courses-box .text-box .list li a{
    display: flex;
    position: relative;
    padding: 20px 10px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;

    transition: 0.3s;
}

.apply-courses .courses-box .text-box li a:before{
    content: "";
    border-top: 6px solid #0090d5;
    border-right: 6px solid #0090d5;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-radius: 4px;
    transform: rotate(45deg);

    position: absolute;
    top: 25px;
}

.apply-courses .courses-box .text-box li a:hover{
    background-color: #fff;
    text-decoration: none; 
}

.apply-courses .courses-box .text-box li a:hover:before{
    border-top: 6px solid #ed9e27;
    border-right: 6px solid #ed9e27;
}

.apply-courses .courses-box .text-box li a:hover p{
    color: #ed9e27;
}


@media (max-width: 1199.98px){
    .apply-courses .courses-box{
        height: 532px;
    }

    .apply-courses .courses-box .text-box .text p:nth-last-child(1){
        width: 100%;
        text-align: right;
    }    
}

@media (max-width: 991.98px){
    .apply-courses .courses-box{
        flex-direction: column;
        height: initial;
    }

    .apply-courses .courses-box .text-box{
        padding-left: 0;
    }

    .apply-courses .courses-box .text-box .list{
        height: 400px;
    }

    .apply-courses .courses-box .text-box .text p:nth-child(2){
        flex-grow: 1;
    }
}





/* 報名資訊 apply-information */
.apply-information .main{
    background-color: transparent;
    padding: 60px 0;
}

.apply-information .main .container{
    border: 1px solid #ed9e27;
    border-radius: 3px;
}

.apply-information .main .title-box div{
    text-align: left;
}

.apply-information .main .title-box div p{
    margin: 10px 10px;
    margin-left: 2px;
    font-size: 20px;
}

/* 報名資訊 */
.apply-information .main .text-box h2{
    background-color: #43b2c1;
    color: #fff;
    font-size: 20px;
    padding: 5px 5px;
    border-radius: 3px;
    margin: 10px 0;
}

.apply-information .main .text-box .box{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.apply-information .main .text-box .form-group{
    flex-basis: 50%;
    padding: 10px;
    margin: 0;
}

.apply-information .main .text-box .check-box{
    display: flex;
    align-items: center;
}

.apply-information .main .text-box .check-box .form-check{
    padding: 7px 20px;
    padding-left: 1.25rem;
}

.apply-information .main .text-box .meals-box{
    flex-basis: 100%;
}

.apply-information .main .text-box .textarea-box{
    flex-basis: 100%;
    margin-bottom: 15px;
}

/* 付款方式 */
.apply-information .main .text-box .pay{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 15px 0;
    margin-bottom: 20px;
}

.apply-information .main .text-box .pay button{
    background-color: transparent;
    border: 1px solid #0090d5;
    padding: 3px 12px;
    padding-bottom: 2px;
    border-radius: 8px;
    margin: 0 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;

    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 27px;

    font-size: 20px;

    transition: 0.3s;
}

.apply-information .main .text-box .pay li > p{
    font-size: 13px;
    color: #686868;
    margin: 5px 15px;
}

.apply-information .main .text-box .pay button  img{
    margin: 0 5px;
}

.apply-information .main .text-box .pay button  p{
    color: #686868;
    margin: 0 5px;
}

.apply-information .main .text-box .pay button:hover{
    text-decoration: none;
    opacity: 0.8;
}

.apply-information .main .text-box .pay button.active{
    border: 1px solid #ed9e27;
    background-image: url(../img/pay-tick.png);
}

.apply-information .main .text-box .pay button.active p{
    color: #ed9e27;
}

/* 注意事項 */
.apply-information .main .text-box .notice-text{
    padding: 5px 5px;
}

/* 按鈕 */
.apply-information .main .text-box .btn-box{
    text-align: center;
    margin-bottom: 20px;
}

.apply-information .main .text-box .btn-box button{
    background-color: #ed9e27;
    color: #fff;
    border: 1px solid #ed9e27;
    border-radius: 30px;
    padding: 3px 20px;
    padding-bottom: 2px;
    margin-right: 10px;
    transition: 0.3s;
}

.apply-information .main .text-box .btn-box button:hover{
    opacity: 0.8;
}

/* 送出 彈跳視窗 */
.apply-information .modal-body h5{
    background-color: #43b2c1;
    color: #fff;
    font-weight: 300;
    border-radius: 3px;
    text-align: center;
    margin: 15px 0;
    margin-bottom: 20px;
}

.apply-information .modal-body .text{
    list-style: none;
    border: 1px solid #43b2c1;
    padding: 10px 20px;
    border-radius: 10px;
}

.apply-information .modal-body .text hr{
    margin: 8px 0;
}

.apply-information .modal-body .text li{
    display: flex;
}

.apply-information .modal-body .text li p{
    flex-basis: 100px;
    margin: 0;
}

.apply-information .modal-body .text li p:nth-child(1){
    flex-grow: 1;
}


@media (max-width: 767.98px){
    .apply-information .main .title-box div{
        flex-direction: column;
    }
    .apply-information .main .title-box div p{
        margin: 0;
        margin-bottom: 5px;
    }

    .apply-information .main .text-box .form-group{
        flex-basis: 100%;
    }
    
    .apply-information .main .text-box .pay button{
        font-size: 16px;
    }

}

@media (max-width: 575.98px){
    .apply-information .main .text-box .pay{
        /* margin-top: 0; */
        margin-bottom: 30px;
    }

    .apply-information .modal-body .text{
        padding: 5px 10px;
    }

    .apply-information .modal-body .text li p{
        flex-basis: 85px;
    }

    .apply-information .modal-body .text li p:nth-child(2){
        flex-basis: 55px;
        margin-left: 5px;
    }
}