/*--------HYT 選單大版樣式改版--------*/

footer{
    visibility: hidden;
}
footer.loaded {
    visibility: visible;
}

/*搜尋按鈕樣式*/
header .main-menu .menu-area-01 > ul #website-search {
    padding-top: 25px;
}

/* 首頁及選單樣式改版 */
.menu-area-01 .search-input {
    right: auto !important;
}

/*首頁精選推薦底色*/
.home-recommend .swiper-container {
    background-color: #f9f9f9;
}

/*主選單第二層標題*/
header .main-menu .main-menu-frame .menu-lv2 > .container > ul > li .title {
    font-weight: 400;
}

/*大版主選單*/
header .main-menu .main-menu-frame .menu-lv1 > li .menulv1-title {
    white-space: nowrap;
}

/*搜尋輸入欄位樣式*/
.menu-area-01 .search-input {
    z-index: 99;
    right: auto !important;
}

.no-border {
    border: none !important;
}

/*字體大小按鈕樣式*/
.btn-font-size {
    border: 1px solid #999;
    padding: 0;
    margin-right: 5px;
    cursor: pointer;
    background: #fff;
    color: #666;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

/*字體大小按鈕hover效果*/
.btn-font-size:hover {
    border: 1px solid transparent;
    background: #ca4f0f;
    color: #ffffff;
}

/*字體大小按鈕文字樣式 - 小*/
.btn-font-size.small {
    font-size: 1rem;
}

/*字體大小按鈕文字樣式 - 大*/
.btn-font-size.large {
    font-size: 1.2rem;
}

/*字體大小按鈕選擇樣式*/
.btn-font-size.selected {
    border: 1px solid transparent;
    background: #ca4f0f;
    color: #ffffff;
}

.train-alert.font-size-lg {
    transform: scale(1.05);
}

.train-alert.font-size-sm {
    transform: scale(1);
}

/*大版語系切換Icon樣式*/
header .main-menu .menu-area-02 ul li .dropdown-toggle .icon {
    margin-right: 5px;
    font-size: 1.4rem;
    vertical-align: middle;
}

/*大版語系切換選單樣式*/
header .main-menu .menu-area-02 ul li .dropdown-toggle {
    padding: 0;
    color: #666;
    font-size: .9rem;
    line-height: 32px;
    font-weight: 400;
    align-items: center;
    border: none;
}

/*日文大版語系切換選單樣式*/
.jp header .main-menu .menu-area-02 ul li .dropdown-toggle {
    line-height: 1.3rem;
}

/*語系切換選單後面的箭頭樣式*/
#dropdownMenuButton::after {
    border-top: none;
    border-left: none;
    margin-right: 3px;
    content: "\25BC";
    vertical-align: revert;
    transform: scale(0.5);
    border-bottom: none !important;
    border-right: none !important;
    width: auto;
    height: auto;
}

/*語系切換的icon位置*/
#dropdownMenuButton .icon {
    margin-right: 5px;
}

/*大版語系切換的選項樣式*/
header .dropdown-menu .dropdown-item {
    line-height: 32px;
}

/*小版選單返回不顯示*/
.menu-backTo,
.menu-breadcrumb {
    display: none;
}

.crowd-control{
    display: none;
}

/*選單廣告區塊*/
.menu-advertise {
    position: relative;
    padding: 30px 0 30px 0;
}

.menu-ad-active .menu-content > li {
    flex: 0 0 20% !important;
}

header .main-menu .main-menu-frame .menu-lv1-label {
    display: none;
}

/*大字體熱門服務中文不換行*/
.fixed-service .title {
    padding: 8px 4px;    
}

/*----------HYT 首頁的小板至頂TOP----------*/
/*小版固定置頂Top區塊樣式*/
.fixed-func {
    width: 50px;
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 899;
}

/*小版置頂Top按鈕位置*/
.gotopbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

/*小版置頂Top按鈕樣式*/
.func-arrow-upward {
    padding: 1.5rem 1.5rem;
    background-color: rgb(102,102,102,50%);
}

/*小版置頂Top箭頭樣式*/
.func-arrow-upward:before {
    content: '';
    width: 12px;
    height: 12px;
    border: solid #fff;
    border-width: 2px 2px 0 0;
    transform: translate(-50%, -50%) rotate(315deg) scale(1.5);
    left: 50%;
    top: 1.75rem;
    position: absolute;
}

/*車站人潮資訊樣式*/
header .menu-area-02 ul li.corwd-control {
    border-right: 1px solid #ddd;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
}

/* 精選推薦icon區塊與pagination的間距 */
.home-recommend .home-recommend-container {
    padding-bottom: 9px;
}

/*---------HYT 首頁rwd樣式調整-----------*/
@media (max-width: 1023px) {
    /*時刻票、網路訂票、銷售資訊tab的區塊樣式*/
    .home-action-tab-area {
        top: -30px !important;
    }

        /*時刻票、網路訂票、銷售資訊tab的箭頭樣式*/
        .home-action-tab-area .nav-item a::after {
            content: "\25BA";
            color: #ca4f0f;
            display: inline-block;
            position: relative;
            transform: scale(0.4, 0.8);
            line-height: 1rem;
        }

    .ha-nav-tab ul {
        background-color: #fff;
        border-bottom: 1px solid #dedede;
    }

    .ha-nav-tab.xs {
        display: block !important;
        margin-bottom: 15px;
    }

    .ha-nav-tab ul li a {
        font-size: 1rem !important;
    }

    /* 縮小'美好從這裡出發'的字體 */
    .home-content > .title-01 {
        font-size: 1.5rem;
    }

    .home-recommend ul {
        background: #f9f9f9;
    }

    /* 推薦連結按鈕樣式 */
    .home-recommend li.swiper-slide {
        border: 1px solid #dedede;
        border-radius: 10px;
        margin-bottom: 9px;
        margin-top: 0px !important;
        box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
    }

    /* 精選推薦icon區塊與pagination的間距 */
    .home-recommend .home-recommend-container {
        padding-bottom: 0px;
    }

    /*頁籤陰影(靜態頁面或車站頁交通)*/
    li.nav-item.swiper-slide {
        border-radius: unset;
        box-shadow: none;
        border: 0px;
    }
}

/*----------HYT 手機板rwd樣式----------------*/
@media (max-width: 360px) {
    header .main-menu {
        width: 100vw !important;
    }
}

@media(max-width: 575px) {
    .home-recommend {
        margin-left: 6px;
    }
}

@media(max-width: 767px) {
    /*首頁的美好，從這裡出發*/
    .ha-nav-tab.xs {
        margin-bottom: 0px !important;
    }
    /*首頁的App下載區塊*/
    .contact-frame .app-download {
        margin-left: 0 !important;
    }

    /*小版美好從這裡出發間距*/
    .title-01 {
        margin-bottom: 20px !important;
    }

    /*中文小版時刻表與票價按鈕*/
    .home-content .ha-nav-tab ul{
        white-space: nowrap;
    }

    .en .home-content .ha-nav-tab ul,
    .jp .home-content .ha-nav-tab ul {
        white-space: break-spaces;
        line-height: 1.2;
    }

    .home-action-tab-area .xs .nav-item {
        width: 20%;
    }

    .home-recommend ul li a {
        padding: 4px 1px 10px 1px;
    }
}

@media (min-width: 1199px){
    /*大版不顯示置頂Top按鈕*/
    .fixed-func {
        display: none !important;
    }

    /*大版不顯示此處切換語系及切換語系*/
    .menu-area-01 .setting-font-size,
    .menu-area-01 .setting-lang-select {
        display: none !important;
    }

    /*大版切換語系圖示*/
    .kyicon-icon_worldwide1:before {
        position: relative;
        bottom: 2px;
    }

    .en .kyicon-icon_worldwide1:before,
    .jp .kyicon-icon_worldwide1:before {
        vertical-align: middle;
    }

    /*列車運行正常時的中英日顯示位置 (頁首選單寬度 + 原本與頁首選單間距)*/
    .train-alert iframe {
        right: calc(636.273px + 51.39px);
    }

    .train-alert iframe.corwdControlData-corwd {
        right: calc(636.273px + 51.39px + 130px);
    }

    .en .train-alert iframe {
        right: calc(613.72px + 114.27px);
    }

    .en .train-alert iframe.corwdControlData-corwd {
        right: calc(613.72px + 114.27px + 130px);
    }

    .jp .train-alert iframe {
        right: calc(327.98px + 126px);
    }

    .jp .train-alert iframe.corwdControlData-corwd {
        right: calc(327.98px + 126px + 130px);
    }
}

@media (max-width: 1199px) {

    /*搜尋欄位*/
    .open-srh {
        width: 110px;
    }
    .open-srh .search-input {
        left: -60px;
    }

    .main-menu {
        background-color: #fff !important;
    }

    /*小版選單可滑動*/
    .open-menu header .main-menu:not(:has(.open-ma02)) {
        min-width: 350px;
        overflow: scroll !important;
    }

    /*小版選單第一層樣式*/
    header .main-menu .header-sub-block {
        min-height: 500px;
    }

    header .main-menu.active-lv2 .header-sub-block {
        display: none;
    }

    /*移除舊版熱門服務右側展開*/
    body.open-service-menu .wrapper {
        left: 0px !important;
    }
    /*不顯示舊版熱門服務按鈕*/
    .xs-menu-toggle-02 {
        display: none !important;
    }

    /*小版選單展開位置*/
    .open-menu header .main-menu {
        /*header小版的高度*/
        top: 61px !important;
    }

    /*小版選單header移除遮蓋*/
    .open-menu header:before {
        display: none;
    }

    /*小版選單展開後顯示關閉icon*/
    .open-menu .kyicon-icon_navtoggle:before {
        content: "\e5cd";
    }

    /*小版選單熱門服務區塊樣式*/
    header .main-menu .menu-area-service {
        display: flex;
        margin-right: 0px;
        vertical-align: middle;
        order: 3;
        height: auto;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    /*小版選單主選單位置*/
    header .main-menu .main-menu-frame .menu-lv2 {
        top: calc(60px + 120px + 40px);
    }

    /*小版熱門服務區塊*/
    .fixed-service {
        right: 0 !important;
        position: relative;
        width: 100% !important;
        /*row*/
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 1rem;
        height: fit-content;
        box-shadow: 1px 2px 1px rgb(238,238,238, 0.5) !important;
    }

        /*小版選單熱門服務至頂按鈕*/
        .fixed-service .backtopbutton {
            display: none !important;
        }

        /*小版熱門服務標題字樣式*/
        .fixed-service .h5 {
            align-items: center;
            margin: 0px 0px 0px 10px;
            background-color: inherit !important;
            color: inherit !important;
            padding: 0 !important;
            display: flex;
            justify-content: start;
            position: relative;
            width: 100%;
            height: 2rem;
            color: #999 !important;
            font-weight: 400;
            font-size: 0.9rem;
        }

    /*小版熱門服務按鈕區塊*/
    .fservice-list {
        display: inline-flex;
        position: relative;
        width: 100%;
        justify-content: center;
        margin: auto 0;
    }

        .fservice-list li {
            border: 1px solid #dedede;
            border-radius: 10px;
            box-shadow: 0 3px rgb(0 0 0 / 10%);
            padding: 0 !important;
            margin: 0 5px;
        }

        /*小版熱門服務按鈕樣式*/
        .fservice-list a {
            margin: 10px 15px;
        }

    /*小版語系切換、搜尋、字體大小區塊*/
    .setting-ul {
        background-color: inherit !important;
        /* color: rgb(102, 102, 102) !important;*/
        position: relative;
        list-style: none;
        display: inline-flex;
        padding: 10px 10px !important;
        margin: 0;
        width: 100%;
    }

        .setting-ul li {
            margin-top: auto !important;
            margin-bottom: auto !important;
        }


        .setting-ul .search-area {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            margin: auto;
            padding: 0 1rem;
        }

        .setting-ul .btn.dropdown-toggle {
            color: rgb(102, 102, 102) !important;
        }

        .setting-ul .icon.search {
            color: rgb(102, 102, 102) !important;
            padding-left: 10px;
            padding-right: 10px;
        }

    /*小版搜尋區塊顯示樣式*/
    .open-srh .search-input {
        width: 250% !important;
        top: -13px !important;
        height: 54px !important;
        background: #eee !important;
    }



    .setting-font-size {
        white-space: nowrap;
        margin-left: 8px !important;
    }

    /*小版隱藏主選單的切換語系及字體大小*/
    .menu-area-02 .setting-lang-select,
    .menu-area-02 .setting-font-size {
        display: none !important;
    }

    /*小版選單功能列樣式*/
    .menu-area-setting {
        background-color: rgb(240, 240, 240);
    }

    /*小版選單功能列搜尋按鈕的兩旁分隔線*/
    header .main-menu .menu-area-01 > ul > li:after {
        background-color: #fff !important;
    }

    /*小版選單第一層樣式*/
    header .main-menu .main-menu-frame .menu-lv1,
    header .main-menu .menu-area-02, header.fixed .main-menu .menu-area-02, .home header .main-menu .menu-area-02 {
        padding-right: 0 !important;
    }

    /*小版選單第二階層樣式*/
    header .main-menu .main-menu-frame .open-lv2 .menu-lv2 {
        display: block !important;
        left: 0;
        width: auto;
        top: 0 !important;
        z-index: 999 !important;
        height: auto;
    }

    /*小版選單第二階層的麵包屑區塊*/
    .menu-breadcrumb {
        display: block !important;
        width: auto;
        padding: 10px 10px;
        background-color: rgb(240, 240, 240);
    }

    /*小版選單第二階層返回區塊*/
    .menu-backTo {
        margin: 20px 0 20px 0;
        display: block !important;
        min-height: 300px;
        /* justify-content: center;*/
    }

    .menu-backTo .backToMenu {
        margin: 0 auto;
    }

    /* 廣告 */
    .menu-lv2 .container {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /*小版*/
    header .main-menu .main-menu-frame .menu-lv2 > .container > ul {
        padding-bottom: 0px !important;
    }

    header .main-menu .main-menu-frame .menu-lv1-label {
        display: inherit !important;
        padding-left: 10px;
        font-size: 1.2rem;
        margin: 0;
    }

    h5.m_info_subtitle {
        color: #999 !important;
        font-size: 0.9rem !important;
        padding-top: 10px;
        font-weight: 400;
    }

    header .main-menu .menu-area-02 ul {
        display: grid;
    }

    header .main-menu .menu-main-lv1 {
        padding-left: 12px !important;
    }

    /*小版選單第二階層版型樣式*/
    header .main-menu .menu-area-02 .open-ma02 .lv2 {
        display: block !important;
        left: 0;
        width: auto;
        top: 0 !important;
        z-index: 999 !important;
        padding: 0;
        height: auto;
    }

        /*小版選單第二階層下的功能*/
        header .main-menu .menu-area-02 .open-ma02 .lv2 > li:not(.li-mb) {
            padding: 0 10px;
        }

    header .menu-area-02 ul li .lv2 {
        display: none !important;
    }

    /*小版選單第二階層麵包屑區塊*/
    .li-mb {
        text-align: start !important;
    }

    .menu-sitemap {
        display: none!important;
        order: 1;
        border-top: 1px solid rgb(240, 240, 240) !important;
        border-bottom: 1px solid rgb(240, 240, 240) !important;
    }

    /*小版主選單底線*/
    header .main-menu .main-menu-frame .menu-lv1 > li .menulv1-title,
    header .main-menu .menu-area-02 .menu-main-lv1 > a {
        border-bottom: 1px solid #dedede !important;
        margin-right: 12px;
        width: auto !important;
        font-size: 1.125rem !important;
    }

    header .main-menu .main-menu-frame .menu-lv2 > .container > ul > li .title {
        border-bottom-color: #dedede !important;
        font-size: 1.125rem;
    }

    /*小版選單搜尋區塊高度*/
    header .main-menu .menu-area-01 > ul #website-search {
        padding-top: 5px;
    }

    .menu-advertise{
        width: 100%;
    }

    /*小版recaptcha認證位置*/
    .grecaptcha-badge{
        bottom: 140px!important;
    }

    /*小版字體切換大時會壓到列車運行字樣*/
    .status-warning .train-alert.font-size-lg,
    .status-attention .train-alert.font-size-lg {
        padding-left: 2%;
    }

    /*小板選單第三層樣式*/
    header .main-menu .main-menu-frame .menu-lv3 li a {
        font-size: 1rem;
        padding-top: 10px;
    }

    .train-alert{
        height: 48px;
    }
}