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


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

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

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

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

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

    position: relative;

    padding-top: 90px;
    padding-bottom: 90px;
}

button{
    cursor: pointer;
}

button:focus{
    outline: none;
}

/* 頭 */
nav.navbar{
    position: fixed;
    width: 100%;
    background-color: #fff;

    z-index: 999;
}

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

/* 漢堡紐 */
nav .menu_btn{
    position: relative;
    width: 25px;
    height: 20px;
    z-index: 2;

    background-color: transparent;
    border: none;

    margin-right: 10px;
}

nav .menu_btn span{
    display: inline-block;
    background-color: #000;
    width: 25px;
    height: 2px;

    position: absolute;
}

nav .menu_btn .line1{
    top: 0;
    left: 0;
}

nav .menu_btn .line2{
    top: 9px;
    left: 0;
}

nav .menu_btn .line3{
    bottom: 0;
    left: 0;
}

/* 選單 */
nav .menu{
    position: absolute;
    top: 0;
    left: -100%;
    /* padding: 20px; */
    background-color: #fff;
    /* height: 100%; */
    width: 80%;
    border-radius: 0px 30px 30px 0 ;

    box-shadow: 1px 1px 3px #00000018;

    transition: 0.3s;

    z-index: 2;
}

nav .menu.show{
    left: 0;
}

/* 選單背景 */
.bg{
    background-color: #0000002f;
    width: 100vw;
    height: 100vh;

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

    opacity: 0;
    pointer-events: none;
    transform: 0.3s;
    /* z-index: 1; */
    z-index: 998;
}

.bg.show{
    opacity: 1;
    pointer-events: initial;
}

/* 選單內 會員名稱 */
nav .member_box{
    display: flex;
    align-items: center;
    padding: 15px;
}

nav .member_box div{
    display: inline-block;
    background-color: #DEDEDE;
    border-radius: 50px;
    padding: 10px 14px;
}

nav .member_box p{
    margin: 0;
    margin-left: 10px;
}

/* 選單樣式 */
nav .menu .nav-link{
    color: #000;
    font-weight: 600;
    padding: 15px;
    border-top: 1px solid #7070703c;
}

nav .menu .nav-link::after{
    /* display: none; */
}

nav .menu .nav-link img{
    transform: translateY(-2px);
    margin-right: 5px;
    width: 20px;
}

nav .menu .nav-item .dropdown-menu{
    border: none;
    margin: 0;
    padding: 15px;
    padding-top: 0;
    padding-left: 20px;
    background-color: transparent;
}

nav .menu .nav-item .dropdown-menu a{
    padding: 6px 24px;
}

.dropdown-item.active, .dropdown-item:active{
    background-color: #f8f9fa;
    color: #000;
}


/* logo */
nav .navbar-brand{
    margin: 0;
    width: 90px;
}

nav .navbar-brand img{
    width: 100%;
}

/* 會員登入 */
nav .btn_box button{
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
}

nav .btn_box button img{
    width: 17px;    
}

nav .btn_box button p{
    margin: 0;
    margin-left: 5px;
    font-size: 1.2rem;
    transform: translateY(2px);
}



/* iframe */
iframe{
    /* width: 100%; */
    /* height: 100%; */

    /* margin-top: 86px; */
    /* margin-bottom: 80px; */
    height: 100vh;
}



/* banner */
.carousel .box img{
    width: 100%;
}

.slick-dotted.slick-slider{
    margin: 0;
}

/* 跑馬燈 */
marquee{
    margin: 5px 0;
}

marquee p{
    margin: 0;
    font-size: 1.1rem;
}

/* 套票種類 */
.package{
    background-color: #F1F1F1;
    padding: 15px;
}

.package .title_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.package .title_box h1{
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.package .title_box h1 span{
   color: #EA5350; 
}

.package .title_box .more_box{
    display: flex;
    align-items: center;
    color: #000;
}

.package .title_box .more_box p{
    margin: 0;
    margin-right: 5px;
}

.package .main{
    overflow: hidden;
    width: 100%;
    overflow-x: auto;
}

.package .main ul{
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
}

.package .main .box{
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 25px;
    box-shadow: 1px 1px 5px #00000018;

    width: 300px;
}

.package .main .box .img_box{
    position: relative;
    overflow: hidden;
    padding-bottom: 67%;
    border-radius: 20px;
}

.package .main .box .img_box img{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.package .main .box h2{
    font-size: 1.3rem;
    margin: 10px 0;
    font-weight: 600;
}

.package .main .box .text{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 0;
}

.package .main .box .transportation_icon .img_box{
    background-color: #5CC2CF;
    display: inline-block;
    border-radius: 50px;
    padding: 4px 10px;
}

.package .main .box .transportation_icon img{
    width: 25px;
    margin: 3px;
    position: initial;
}

.package .main .box .transportation_icon p{
    margin: 0;
    font-size: 0.95rem;
    color: #9A9A9A;
}

.package .main .box .circle{
    border-radius: 50px;
    border: 1px solid #5CC2CF;
    padding: 7px 9px;
    margin: 0 5px;
}

.package .main .box .price{
    text-align: left;
    margin-left: 5px;
}

.package .main .box .price p:nth-child(1){
    margin: 0;
    color: #9A9A9A;
    text-decoration: line-through;
}

.package .main .box .price p:nth-child(2){
    margin: 0;
    color: #EA5350;
    font-size: 1.4rem;
    font-weight: 600;
    transform: translateY(-8px);
}

.package .main .box .btn{
    position: relative;
    width: 100%;
}

.package .main .box .btn button{
    background-color: #EA5350;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 5px 25px;
    font-size: 1.3rem;
    font-weight: 500;

    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
}



/* 最新訊息 */
.news{
    padding: 15px;
}

.news .title_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.news .title_box h1{
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.news .title_box h1 span{
   color: #EA5350; 
}

.news .title_box .more_box{
    display: flex;
    align-items: center;
    color: #000;
}

.news .title_box .more_box p{
    margin: 0;
    margin-right: 5px;
}

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

.news .list li{
    border-bottom: 1px solid #DBDBDB;
    padding: 10px 0;
}

.news .list li:nth-last-child(1){
    border-bottom: none;
}

.news .list a{
    color: #000;
    font-weight: 500;
}

.news .list a p{
    margin: 0;
}

.news .list a p.time{
    color: #848484;
}



/* 交通資訊 */
.information_btn{
    background-color: #F1F1F1;
    padding: 15px;
}

.information_btn .btn_box{
    margin: 0;
    padding: 0;
    list-style: none;

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

.information_btn .btn_box li a{
    display: inline-block;
    background-color: #fff;
    color: #000;
    border-radius: 50px;
    width: 100px;
    height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.information_btn .btn_box li a img{
    height: 45px;
}

.information_btn .btn_box li a p{
    margin: 0;
    margin-top: 3px;
}









/* 下方固定選單 */
footer{
    padding: 15px 5px;

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 5px #3939391d;
}

footer .menu_box{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;
    margin: 0;
    list-style: none;
}

footer .menu_box li a{
    color: #AEAEAE;

    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .menu_box li a img{
    width: 30px;
    margin-bottom: 5px;
}

footer .menu_box li a p{
    margin: 0;
    font-size: 0.9rem;
}

footer .menu_box li:nth-child(3) a{
    color: #000;
    transform: scale(1.1);
}










/* transportation 交通資訊 */
.return_btn{
    border: none;
    background-color: transparent;
    padding: 15px;
}

.navbar-brand p{
    margin: 0;
    color: #000;
    font-weight: 500;
}


.transportation{
    background-color: #F2F2F2;
    min-height: 100%;
}


/* 交通運具選項 */
.transportation .btn_box{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;

    overflow: hidden;
    overflow-x: auto;

    background-color: #fff;
    box-shadow: 1px 1px 5px #00000028;

    /* scrollbar-width: none; */
    margin-top: 86px;
}

.transportation .btn_box::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}

.transportation .btn_box li a{
    display: inline-block;
    color: #565151;
    padding: 5px;
    padding-bottom: 0;
    /* margin-bottom: 5px; */

    width: 70px;
    text-align: center;
}

.transportation .btn_box li a.weight_90{
    width: 90px;
}

.transportation .btn_box li a.weight_130{
    width: 130px;
}

.transportation .btn_box li a:hover{
    text-decoration: none;
    border-bottom: 4px solid #4CB7C6;
}

.transportation .btn_box li a.active{
    color: #4CB7C6;
    font-weight: 500;
    border-bottom: 4px solid #4CB7C6;
}

.transportation .btn_box li a p{
    margin: 0;
    /* padding: 0; */
    font-size: 1.1rem;
}




/* 公車選項 */
.transportation .bus_btn{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;

    overflow: hidden;
    overflow-x: auto;

    /* scrollbar-width: none; */
}

.transportation .bus_btn::-webkit-scrollbar{
    width: 0px;
    height: 0px;
}


.transportation .bus_btn li button{
    display: inline-block;
    color: #565151;
    padding: 8px 5px;
    padding-bottom: 7px;

    font-weight: 400;
    margin: 15px 8px;

    width: 120px;
    text-align: center;

    background-color: #fff;
    border-radius: 50px;
    border: none;

    position: relative;
}

.transportation .bus_btn li button:hover{
    text-decoration: none;
}

.transportation .bus_btn li button:hover:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;

    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    bottom: -8px;
    left: 50%;
}

.transportation .bus_btn li button.active{
    background-color: #FBB15B;
}

.transportation .bus_btn li button.active::after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #FBB15B;

    transform: rotate(45deg) translateX(-50%);
    position: absolute;
    bottom: -8px;
    left: 50%;
}

.transportation .bus_btn li button p{
    margin: 0;
}



.transportation .search_box{
    margin: 0 15px;

    position: relative;
}

.transportation .search_box img{
    position: absolute;
    top: 50%;
    left: 15px;

    transform: translateY(-50%);

    width: 16px;
    pointer-events: none;
}

.transportation .search_box input{
    border: none;
    border-radius: 50px;
    padding: 5px 15px;
    padding-top: 6px;
    padding-left: 40px;
    width: 100%;
}

.transportation .search_box input::placeholder{
    font-size: 0.9rem;
    font-weight: 300;
    color: #B2B2B2;
}



/* 公車路線 */
.transportation .list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;

    display: none;
}

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

.transportation .list a{
    display: flex; 
    align-items: center;
    justify-content: space-between;
    
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #D8D8D8;
}

.transportation .list a .box{
    display: flex; 
    align-items: center;
}

.transportation .list a .box img{
    width: 50px;
    margin-right: 10px;
}

.transportation .list a .text p{
    margin: 0;
    color: #565151;
    display: flex;
    flex-wrap: wrap;
}

.transportation .list a .text p:nth-child(1){
    color: #000;
    font-weight: 600;
    margin-left: 5px;
}

.transportation .list a .text p span{
    margin: 0 5px;
    transform: translateY(2px);
}

.transportation .list a .arrow_box{
    padding: 0 15px;
}


/* 公車內頁 公車目的地 */
.transportation .destination{
    display: flex;
    margin: 15px;
}

.transportation .destination .box{
    background-color: #fff;
    padding: 15px;
    margin: 0 7px;
    border-radius: 15px;
    border: 2px solid #FBB15B;
    width: 100%;

    position: relative;
}

.transportation .destination .box img{
    position: absolute;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);

    width: 20px;
}

.transportation .destination .box:nth-last-child(1){
    text-align: right;
}

.transportation .destination .box:nth-last-child(1) img{
    left: initial;
    right: -10px;
    transform: rotate(180deg) translateY(50%);
}

.transportation .destination .box p{
    margin: 0;
    font-weight: 500;
}

.transportation .destination .box p:nth-child(2){
    font-weight: 300;
    font-size: 0.9rem;
}


/* 公車內頁 公車路線 */
.transportation .stop_list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;
}

.transportation .stop_list li{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    /* position: relative; */
}

.transportation .stop_list li .time{
    background-color: #CCCCCC;
    padding: 3px 0px;
    padding-bottom: 2px;
    border-radius: 50px;
    /* width: 80px; */
    text-align: center;

    flex-basis: 80px;
    /* flex-grow: 1; */
}

.transportation .stop_list li .circle{
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background-color: #fff;
    border: 5px solid #AAAAAA;
    margin: 0 15px;

    position: relative;

    /* flex-grow: 1; */

    flex-basis: 18px;
}

.transportation .stop_list li .circle::after{
    content: "";
    display: inline-block;
    width: 3px;
    height: calc( 100% + 40px);
    background-color: #AAAAAA;
    position: absolute;
    left: 50%;
    /* bottom: 0px; */
    top: 100%;
    transform: translateX(-50%);
}

.transportation .stop_list li p{
    margin: 0;

    /* flex-grow: 1; */

    flex-basis: calc( 100% - 98px);
}

/* 公車路線 換顏色 */
.transportation .stop_list li.red .time{
    background-color: #E23C3E;
    color: #fff;
}

.transportation .stop_list li.red .circle{
    background-color: #E23C3E;
    border: 5px solid #E23C3E;
}

.transportation .stop_list li.red .circle::after{
    background-color: #E23C3E;
}

.transportation .stop_list li.blue .time{
    background-color: #4CB7C6;
    color: #fff;
}

.transportation .stop_list li.blue .circle{
    /* background-color: #fff; */
    border: 5px solid #E23C3E;
}

.transportation .stop_list li.blue .circle::after{
    background-color: #E23C3E;
}

.transportation .stop_list li:nth-last-child(1) .circle::after{
    content: none;
}


/* ibike */
/* 搜尋 */
.transportation .search_box .ibike_search{
    position: absolute;
    right: 8px;
    top: 3px;

    background-color: transparent;
    border: none;
}

.transportation .search_box .ibike_search img{
    width: 20px;
    pointer-events: initial;
    position: initial;
    transform: initial;
}

/* 標題 */
.transportation .ibike_title{
    display: flex;
    align-items: center;
    padding: 15px;
    padding-bottom: 0;
}

.transportation .ibike_title div{
    width: 10px;
    height: 10px;
    background-color: #FBB15B;
    border-radius: 50px;
    margin-right: 8px;
}

.transportation .ibike_title p{
    margin: 0;
    font-weight: 500;
}

/* 腳踏車站列表 */
.transportation .ibike_list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;

    display: none;
}

.transportation .ibike_list.show{
    display: block;
}

.transportation .ibike_list li .box{
    background-color: #fff;
    box-shadow: 1px 1px 6px #0000001c;
    border-radius: 10px;
    margin-bottom: 15px;
}

.transportation .ibike_list .box .title{
    flex-wrap: wrap;
    padding: 10px;

    border-bottom: 2px solid #D8D8D8;
}

.transportation .ibike_list .box .title p{
    margin: 0;
    font-weight: 400;
}

.transportation .ibike_list .box .title p span{
    background-color: #94C621;
    border-radius: 50px;
    padding: 3px 8px;
    padding-top: 4px;
    color: #fff;
    font-weight: 300;
    margin-left: 5px;
}

.transportation .ibike_list .box .title button{
    width: 100%;
    border: none;
    background-color: transparent;
    padding: 0;
    margin-top: 5px;

    display: flex;
}

.transportation .ibike_list .box .title button p{
    font-weight: 600;
    font-size: 1.15rem;
    margin-right: 8px;
}

.transportation .ibike_list .box .text{
    display: flex;
}

.transportation .ibike_list .box .text div{
    flex-grow: 1;
    text-align: center;
    padding: 0 10px;
    margin: 10px 0;
}

.transportation .ibike_list .box .text div:nth-child(1){
    border-right: 1px solid #D8D8D8;
}

.transportation .ibike_list .box .text p{
    margin: 0;
}

.transportation .ibike_list .box .text p:nth-last-child(1){
    font-weight: 800;
    font-size: 2rem;
}

/* 搜尋 彈跳視窗 */
#ibike_search .modal-content{
    background-color: transparent;
    border: none;
}

/* 標題 */
#ibike_search .modal-header{
    background-color: #4CB7C6;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    border: none;
}

#ibike_search .modal-header h5{
    font-size: 1.3rem;
    color: #fff;
}

/* 選項 */
#ibike_search .modal-body{
    background-color: #fff;
}

#ibike_search .modal-body .check_box{
    display: flex;
    flex-wrap: wrap;
}

#ibike_search .modal-body .check_box .form-check.full{
    flex-basis: 100%;
}

#ibike_search .modal-body .check_box .form-check{
    flex-basis: calc( 100% / 3);
    margin: 0;
    padding: 4px 0;
}

#ibike_search .modal-body .check_box .form-check label{
    font-size: 1.1rem;
    padding-left: 6px;
}

#ibike_search .modal-body .check_box .form-check input::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #F2F2F2;
    border: 1px solid #D5D5D5;
    border-radius: 4px;
    transform: translateX(-1px) translateY(-4px);
}

#ibike_search .modal-body .check_box .form-check input[type=checkbox]:checked:after{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/checked_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;

    position: absolute;
    top: 7px;
    left: -1px;
    z-index: 2;
}

/* 按鈕 */
#ibike_search .modal-footer{
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    border: none;
    padding-top: 0;
}

#ibike_search .modal-footer button{
    background-color: #5B6497;
    border-radius: 50px;
    border: none;
    color: #fff;
    font-weight: 300;
    padding: 8px 20px;
    padding-top: 9px;
    flex-basis: 50%;
}


/* 彈跳視窗 腳踏車站點地圖 */
.modal-dialog-centered{
    /* margin-top: 86px; */
    z-index: 555;
}
#ibike_location .modal-body{
    padding: 0;
}

#ibike_location .modal-body .map_icon{
    margin: 0;
    padding: 15px;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
}

#ibike_location .modal-body .map_icon li{
    flex-basis: 50%;
    margin-bottom: 5px;
}

#ibike_location .modal-body .map_icon li:nth-last-child(1){
    flex-basis: 100%;
    display: flex;
    align-items: flex-start;
}

#ibike_location .modal-body .map_icon img{
    margin-right: 3px;
}

#ibike_location .modal-body iframe{
    height: 50vh;
    margin: 0;
}

/* 國道客運 */
/* 啟程到達站 */
.transportation .stop_box{
    display: flex;
    align-items: center;
}

.transportation .stop_box .box{
    flex-basis: 50%;
}

.transportation .stop_box p{
    margin: 0;
    padding: 15px;
    padding-bottom: 5px;
}

.transportation .stop_box img{
    transform: translateY(20px);
}

.transportation .stop_box .form-group{
    background-color: #fff;
    border-radius: 50px;
    padding: 6px 20px;
    padding-top: 8px;
    text-align: center;
    margin: 0 15px;
    position: relative;
}

.transportation .stop_box .form-group select{
    border: none;
    background-color: #fff;
}

.transportation .stop_box .form-group select:focus{
    box-shadow: none;
}

.transportation .stop_box .form-group::after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 搜尋 */
.transportation .search_box{
    text-align: center;
}

.transportation .search_box .intercity_bus_search{
    background-color: #5B6497;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 30px;
    padding-top: 10px;
    margin: 20px 0;

    font-size: 1.2rem;
    font-weight: 300;
}

/* 路線列表 */
.transportation .intercity_bus_list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;
}

.transportation .intercity_bus_list li.title{
    background-color: #4CB7C6;
    text-align: center;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.transportation .intercity_bus_list li.title p{
    margin: 0;
    padding: 0;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
}

.transportation .intercity_bus_list li{
    background-color: #fff;
    /* padding: 10px; */
}

.transportation .intercity_bus_list li:nth-last-child(1){
    border-radius: 0 0 10px 10px;
}

.transportation .intercity_bus_list li div{
    border-bottom: 1px solid #DFDFDF;
    padding: 10px 0;
    margin: 0 10px;
}

.transportation .intercity_bus_list li:nth-last-child(1) div{
    border-bottom: none; 
}

.transportation .intercity_bus_list li p{
    margin: 0;
    font-size: 0.9rem;
    padding-top: 5px;
}

.transportation .intercity_bus_list li p span{
    border: 1px solid #5B6497;
    border-radius: 50px;
    padding: 5px 10px;
    padding-bottom: 4px;
    margin-left: 8px;
}

.transportation .intercity_bus_list li button{
    border: none;
    background-color: transparent;
    text-align: left;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0;
    padding-top: 10px;
}

.transportation .intercity_bus{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px;
    padding-bottom: 0;
}

.transportation .intercity_bus p{
    font-weight: 500;
}

.transportation .intercity_bus p:nth-child(2){
    transform: translateY(-2px);
    padding: 0 3px;
}

.transportation .intercity_bus + .stop_list li .circle:after{
    height: calc( 100% + 35px);
}

.transportation .intercity_bus + .stop_list li p{
    flex-basis: calc(100% - 18px);
}


/* 高鐵 */
/* 搜尋日期 */
.transportation .search_box .date{
    margin-top: 20px;
    padding: 10px 15px;
    position: relative;
}

.transportation .search_box .date::after{
    content: "";
    background-image: url(../img/date_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-position: 100%;
    width: 20px;
    height: 20px;
    
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 標題 */
.transportation .high_speed_rail_title{
    padding: 0 15px;
}

.transportation .high_speed_rail_title p{
    margin: 0;
    margin-bottom: 3px;
}

.transportation .high_speed_rail_title p:nth-child(1){
    font-weight: 600;
    margin-left: -5px;
    margin-right: -5px;
}

.transportation .high_speed_rail_title p span{
    display: inline-block;
    transform: translateY(2px);
    margin: 0 5px;
}

/* 車次時間列表 */
.transportation .high_speed_rail_list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;
    padding-top: 0;
}

.transportation .high_speed_rail_list li.title{
    background-color: #4CB7C6;
    border-radius: 10px 10px 0 0;
}

.transportation .high_speed_rail_list li{
    background-color: #fff;
}

.transportation .high_speed_rail_list li:nth-last-child(1){
    border-radius: 0 0 10px 10px;
}

.transportation .high_speed_rail_list li div{
    border-bottom: 1px solid #DFDFDF;
    padding: 15px 0;
    margin: 0 10px;

    display: flex;
    align-items: center;
}

.transportation .high_speed_rail_list li.title div{
    border-bottom: none;
    padding-bottom: 12px;
}

.transportation .high_speed_rail_list li:nth-last-child(1) div{
    border-bottom: none; 
}

.transportation .high_speed_rail_list li p{
    margin: 0;
    flex-basis: calc( 100% / 4);
    text-align: center;

    font-weight: 600;
    font-size: 1.25rem;
}

.transportation .high_speed_rail_list li.title p{
    color: #fff;
    font-weight: 300;
    font-size: 1rem;
}

.transportation .high_speed_rail_list li.title p:nth-child(2){
    transform: translateY(-1px);
}

.transportation .high_speed_rail_list li p.number{
    display: flex;
    justify-content: center;
}

.transportation .high_speed_rail_list li p.number span{
    font-size: 0.9rem;
    font-weight: 300;
    border-radius: 50px;
    border: 1px solid #5B6497;
    color: #5B6497;
    padding: 2px 0;
    padding-bottom: 1px;
    width: 70px;
}

/* 火車 */
.transportation .train_list{
    margin: 0;
    padding: 0;
    list-style: none;
    padding: 15px;
    padding-top: 0;
}

.transportation .train_list li.title{
    background-color: #4CB7C6;
    border-radius: 10px 10px 0 0;
}

.transportation .train_list li{
    background-color: #fff;
}

.transportation .train_list li:nth-last-child(1){
    border-radius: 0 0 10px 10px;
}

.transportation .train_list li .box{
    border-bottom: 1px solid #DFDFDF;
    padding: 10px 0;
    margin: 0 10px;

    display: flex;
    align-items: center;
}

.transportation .train_list li.title .box{
    border-bottom: none;
    padding-bottom: 8px;

    justify-content: space-between;
}

.transportation .train_list li:nth-last-child(1) .box{
    border-bottom: none; 
}

.transportation .train_list li.title button{
    background-color: #F2F2F2;
    border-radius: 50px;
    font-weight: 500;
    border: none;
    padding: 5px 20px;
    padding-top: 6px;
}

.transportation .train_list li p{
    margin: 0;
}

.transportation .train_list li.title p{
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 3px;
}

.transportation .train_list li.title .box div p:nth-child(1){
    margin-left: -5px;
    margin-right: -5px;
}

.transportation .train_list li.title .box div p:nth-child(1) span{
    display: inline-block;
    transform: translateY(2px);
    margin: 0 5px;
}

.transportation .train_list li .box .time{
    text-align: center;
    color: #565151;
}

.transportation .train_list li .box div:nth-last-child(1) p{
    font-weight: 600;
    font-size: 1.2rem;

    margin: 0px 10px;
    margin-right: 0;
    margin-bottom: 5px;
}

.transportation .train_list li .box div:nth-last-child(1) p span{
    margin: 0 5px;
    display: inline-block;
    transform: translateY(2px);
}

.transportation .train_list li .box div p.number{
    font-size: 0.95rem;
    font-weight: 400;
    border-radius: 50px;
    border: 1px solid #5B6497;
    color: #5B6497;
    padding: 4px 10px;
    padding-bottom: 3px;
    margin-left: 15px;
    text-align: center;
}



/* 火車票價 彈跳視窗 */
#train_price .modal-content{
    background-color: transparent;
    border: none;
}

/* 標題 */
#train_price .modal-header{
    background-color: #4CB7C6;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    border: none;
}

#train_price .modal-header h5{
    font-size: 1.3rem;
    color: #fff;
}

/* 內容 */
#train_price .modal-body{
    background-color: #fff;
}

#train_price .modal-body .list_box{
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 1px 5px #00000039;
    margin-top: 5px;
    margin-bottom: 25px;
}

#train_price .modal-body .list_box:nth-last-child(1){
    margin-bottom: 5px;
}

#train_price .modal-body .list_box .title{
    background-color: #EBEBEB;
    text-align: center;
    padding: 10px;
}

#train_price .modal-body .list_box .title p{
    margin: 0;
    font-weight: 600;
    font-size: 1.15rem;
}

#train_price .modal-body .list_box .list{
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
}

#train_price .modal-body .list_box .list li{
    flex-basis: calc(100% / 4);
    text-align: center;

    border-right: 1px solid #D8D8D8;
    margin: 10px 0;
}

#train_price .modal-body .list_box .list p{
    margin: 0;
    color: #565151;
    font-weight: 400;
}

#train_price .modal-body .list_box .list p:nth-last-child(1){
    color: #000;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 2.5rem;
}

/* 按鈕 */
#train_price .modal-footer{
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    border: none;
    padding-top: 0;
    padding-bottom: 25px;

    justify-content: center;
}

#train_price .modal-footer button{
    background-color: #5B6497;
    border-radius: 50px;
    border: none;
    color: #fff;
    font-weight: 300;
    padding: 10px 10px;
    padding-top: 12px;
    flex-basis: 120px;
}




/* 登入 login */
.login .img_box{
    padding: 30px 0;
    text-align: center;
    padding-bottom: 0;
}

.login .img_box img{
    width: 100%;
    padding: 0 15px;
}

.login .img_box img:nth-child(1){
    width: 30%;
    transform: translateY(40px);
}

.login .box h1{
    text-align: center;
    font-size: 1.1rem;
    font-weight: 300;
    padding-top: 15px;
}

.login .box div{
    margin: 15px;
}

/* 欄位 */
.login .box input{
    background-color: #F2F2F2;
    border: none;
    padding: 8px 15px;
    border-radius: 50px;
    width: 100%;
}

.login .box input::placeholder{
    color: #9E9E9E;
    font-weight: 300;
    font-size: 0.9rem;
}

/* 密碼 */
.login .box .password_box{
    position: relative;
}

.login .box .password_box .eye_img{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;

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

.login .box .password_box .password_closed{
    background-image: url(../img/password_closed.svg);
}

.login .box .password_box .password_open{
    background-image: url(../img/password_open.svg);
}

/* 驗證碼 */
.login .box .input_block{
    position: relative;
}

.login .box .input_block div{
    display: flex;
    align-items: center;

    position: absolute;
    top: -10px;
    right: -8px;
}

.login .box .input_block #reBtn{
    border: none;
    background-color: transparent;
    width: 20px;
    padding: 0;
}

.login .box .input_block #reBtn img{
    width: 100%;
}

/* 聲音檔 */
.login .box figure{
    margin: 0 15px;
    height: 40px;
}

.login .box figure audio{
    width: 100%;
    height: 40px;
}

/* 忘記帳密 */
.login .box .forget_btn{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0;
}

.login .box .forget_btn button{
    border: none;
    background-color: transparent;
    padding: 5px 10px;
}

/* 按鈕 */
.login .box .btn{
    width: 100%;
    margin: 0;
    padding: 15px;
}

.login .box .btn button{
    background-color: #5B6497;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 10px;
    padding-top: 10px;
    font-size: 1.2rem;
    font-weight: 300;
    width: 100%;
}

.login .box .btn p{
    margin: 0;
    padding-top: 15px;
}

.login .box .btn a{
    display: inline-block;
    color: #4CB7C6;
    font-weight: 500;
    font-size: 1.1rem;
}

/* 其他登入方式 */
.login .box .other_box{
    text-align: center;
}

.login .box .other_box p{
    margin: 0;
    font-size: 1.1rem;
}

.login .box .other_box p::before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #000;
    transform: translateY(-5px);
    margin-right: 8px;
}

.login .box .other_box p::after{
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #000;
    transform: translateY(-5px);
    margin-left: 8px;
}

.login .box .other_box div{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login .box .other_box div a{
    display: inline-block;
    margin: 15px;
}

.login .box .other_box div a img{
    width: 100%;
}








.page .pagination a {
    margin: 0 2px;
    color: #212529;
    border: none;
}

.page .pagination li.active a{
    background-color: #4cb7c6;
}

.page .pagination a.active, .page .pagination a:hover{
    background-color: initial;
    color: initial;
    text-decoration: none;
}


.page li:nth-last-child(1) a, .page li:nth-child(1) a{
    border: 1px solid #4cb7c673;
    border-radius: 50px;
    padding: 3px 7px;
}

/* 20240815 個人專區 */
/* 頭 */
.navbar{
    box-shadow: 1px 1px 5px #00000013;
}
.navbar .title_box p{
    margin: 0;
    font-weight: 500;
    font-size: 1.2rem;
}

/* 圖片 */
.personal .img_box{
    text-align: center;
    padding-top: 70px;
}

.personal .img_box img{
    width: 100%;
    padding: 0 15px;
}

.personal .img_box img:nth-child(1){
    width: 30%;
    transform: translateY(40px);
}

/* 按鈕列表 */
.personal .list{
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 100px;
}

.personal .list li{
    margin: 20px;
}

/* 按鈕 */
.personal .list li .list_btn{
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    background-color: #4CB7C6;
    border: none;
    border-radius: 50px;
    padding: 0;
}

.personal .list li .list_btn p{
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 0 20px;
}

.personal .list li .list_btn .circle{
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 13px 20px;
}