/*traintab*/

.traintab {
    font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Open Sans', sans-serif;
}

.traintab.ui-tabs .ui-tabs-panel {
    padding: 0;
}

.traintab.ui-widget.ui-widget-content {
    border: none;
}
 

.traintab .ui-widget-header {
    background: transparent;
    border: none;
    margin-bottom: 30px;
    margin-top: -20px;
}
 


.traintab .ui-state-default,
.traintab .ui-widget-content .ui-state-default,
.traintab .ui-widget-header .ui-state-default,
.traintab .ui-button,
html .traintab .ui-button.ui-state-disabled:hover,
html .traintab .ui-button.ui-state-disabled:active {
    border: none;
    background: transparent;

}

.ui-tabs.traintab .ui-tabs-anchor {

    background: #f4e5ef;
    color: #8445ad;
    border: 2px solid #f4e5ef;
    border-radius: 5px;
    padding: 6px 15px 7px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.ui-tabs.traintab .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs.traintab .ui-tabs-anchor:hover,
.ui-tabs.traintab .ui-tabs-active a.active {
    color: #fff;
     background: #9860b3;
}

.modal_box_contral .modal-dialog {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

/*body.son.modal-open {
    padding-right: 0 !important;
}*/

body.son.modal-open .modal {
    box-sizing: border-box;
    padding-top: 17px;
    padding-left: 17px;
    padding-right: 17px !important;
}



.click-zoom {
    margin-top: 30px;
    margin-bottom: 20px;
}

.road_info_wrapper {
    margin-top: 40px;

}

.future_road .route {
    border-style: solid;
    display: inline-block;
    border-radius: 5px;
    border-width: 3px;
    margin-right: 7px;
}

.future_road .route h4 {
    margin: 0;
    font-weight: 400;
}

.future_road h4 a {
    display: block;
    padding: 6px 12px;
}

.future_road h4 a:hover {
    color: #fff;
}

.font-16 {
    font-size: 135%;
}

.color-black {
    font-weight: 500;
    color: #464646;
}

.color_road01 {
    border-color: #FF3131;
}

.color_road01 h4 a:hover {
    background: #FF3131;
}


.color_road02 {
    border-color: #F29900;
}

.color_road02 h4 a:hover {
    background: #F29900;
}

.color_road03 {
    border-color: #23AC38;
}

.color_road03 h4 a:hover {
    background: #23AC38;
}


.color_road04 {
    border-color: #00B7EE;
}

.color_road04 h4 a:hover {
    background: #00B7EE;
}


.color_road05 {
    border-color: #6A3000;
}

.color_road05 h4 a:hover {
    background: #6A3000;
}


.color_road06 {
    border-color: #981B7F;
}

.color_road06 h4 a:hover {
    background: #981B7F;
}

.m-bottom-5 {
    margin-bottom: 5px;
}

.m-bottom-25 {
    margin-bottom: 25px;
}


.road_info_wrapper02 {
    margin-top: 30px;
}

body.son .road_info_wrapper02 h5 {
    margin-top: 20px;
}

.transfer_wrapper {
    box-sizing: border-box;
    padding: 30px 5px 0;
    display: flex;
    align-items: flex-start;

}

.tranfer_right_content .transfer_info {
    line-height: 1.5em;
}

.tranfer_left_content {
    flex: 0 0 190px;
}


.interchange-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.interchange-box p {
    width: 100%;
    text-align: center;
    font-size: 135%;
}

.interchange-box .img {
    border-radius: 5px;
}

.interchange-box .bg1 {
    background-color: #3f3f3f;
}

.interchange-box .bg2 {
    background-color: white;
}

.interchange-box .bg3 {
    background-color: #b6d3ff;
}

.interchange-box .bg4 {
    background-color: #e3e3e3;
}

.interchange-box .bg5 {
    background-color: #61c425;
}

.interchange-box .bg6 {
    background-color: #a8a8a8;
}

.interchange-box .bg7 {
    background-color: #f5db00;
}

.interchange-box .bg8 {
    background-color: #0a51a1;
}

.interchange-box .nav > li.bg8 > a > img {
    background-color: #0a51a1;
}

.tranfer_right_content .tranfer_Title {
    background: #f4e5ef;
    padding: 4px 10px;
    display: inline-block;
    margin-bottom: 15px;
      font-size: 133.33%; 
    font-weight: 400;
}

.tranfer_right_content .tranfer_list {
    float: left;
    padding-left: 22px;
    padding-right: 25px;
    position: relative;
    margin-bottom: 5px;

}

.tranfer_right_content .tranfer_list h4 {
    position: relative;
    color: #8445ad;
    font-weight: 400;
    margin: 0;
}

.tranfer_right_content .tranfer_list h4.m-bottom-5 {
    margin-bottom: 5px;
}

.tranfer_right_content .tranfer_list h4:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 12px;
    left: -10px;
    background: #8445ad;
    border-radius: 100%;
}

.tranfer_right_content .tranfer_list p.park-info-text {
    line-height: 1.6em;
    margin-top: 11px;
    margin-bottom: 12px;
}

.transfer-station {
    padding-left: 0;
}

.transfer-station li {
    float: left;
    width: 25%;
    padding-left: 23px;
    list-style: none;
}

.transfer-station li a {
    font-size: 135%;
    position: relative;
    box-sizing: border-box;
    color: #636363;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.transfer-station li a:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 11px;
    left: -11px;
    background: #8445ad;
    border-radius: 100%;
}

.transfer-station li a:hover,
.transfer-station li a:focus {
    color: #1a9fe3;
}

.tranfer_right_content .tranfer_list p {
    line-height: 1.5em;
    margin-bottom: 6px;
}

.tranfer_right_content .tranfer_list p.m-bottom-13 {
    margin-bottom: 13px;
}

.tranfer_right_content .tranfer_list a {
    color: #333;
    word-break: break-all;
}

.tranfer_right_content .tranfer_list a:hover {
    color: #1a9fe3;
}

.tranfer_right_content .tranfer_list .city_taxi {
    padding-left: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.tranfer_right_content .tranfer_list.tranfer_list_taxi {
    padding-left: 3px;
}

.tranfer_right_content .city {
    font-size: 135%;
    margin-bottom: 5px;
    color: #333;
    margin-top: 10px;
}

.tranfer_right_content .city i {
    font-size: 100%;
    padding-right: 6px;
    color: #616161;
}

.tranfer_right_content .m-bottom-20 {
    margin-bottom: 20px;
}

.tranfer_right_content .taxi-tel {
    display: inline-block;
    padding-right: 25px;
}

.park-table {
    width: 100%;
}

.park-table table {
    margin: 15px 0 15px;
}

.park-table table tr td {
    background: #f1f1f1;
    border: 2px solid #fff;
    line-height: 1.7em;
    vertical-align: middle;
}

.park-table table thead th {
    border: 2px solid #fff;
    font-weight: 500;
    vertical-align: middle;
    background: hsla(309, 36%, 78%, 0.5);
}


@media (max-width:1024px) {
    .transfer-station li {

        width: 33.3%;
    }

    .tranfer_right_content .tranfer_list {
        min-width: 36%;
    }
   
}

@media (max-width:991px){
     .tranfer_right_content .tranfer_list {
        min-width: 100%;
    }
    .transfer-station li {
    width: 50%;
}
    .interchange-box {
        display: none;}
    
    .transfer_wrapper {
        display: block;}
    
}

@media (max-width:767px) {
    .traintab .ui-widget-header {
        box-sizing: border-box;
        padding: 0;
    }

}

/*iphone5  */

@media (max-width:568px) {

    .traintab.ui-tabs .ui-tabs-nav li {
        width: 100%;
        margin-bottom: 2px;
    }
    body.son .ui-tabs.traintab .ui-tabs-anchor {
        width: 100%;
    }
}

@media (max-width:480px) { 
    .box_body .item_list {
        display: block;
    }
    .tranfer_right_content .tranfer_list {
    padding-left: 0;
        padding-right: 0;}
    .tranfer_right_content .tranfer_list h4 {
        padding-left: 10px;}
    .tranfer_right_content .tranfer_list h4:before {

        left: 0;}
    .tranfer_right_content .tranfer_list .city_taxi {
        padding-left: 11px;}
    
    .transfer_wrapper{
        padding: 25px 5px 0;
    }
    .road_info_wrapper {
    margin-top: 10px;
}
}

@media (max-width: 425px) {}

@media (max-width:375px) {}