@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; */
}

.container {
    padding-left: 10px;
    padding-right: 10px;
}

img {
    width: 100%;
}

p {
    margin: 0;
}

button {
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;

    background: linear-gradient(to bottom, #E4EAF0 40%, #EFF3F6 40%);
}

@media (min-width: 992px) {

    .wrapper {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: hidden;

        background: none;
        background-image: url(../img/bg-5.png);
        background-blend-mode: multiply;
        background-size: cover;

        animation: kk 20s ease-in-out infinite;

        justify-content: space-between;

    }

    @keyframes kk {
        40% {
            background-color: rgba(223, 226, 162, 0.347);
            background-image: url(../img/bg-5.png);
        }

        60% {
            background-image: url(../img/bg-7.png);
            background-color: rgba(91, 145, 186, 0.497);
        }
    }

    .wrapper::after {
        content: "";
        display: block;
        width: 100%;
        height: 250px;
        background-size: cover;

        position: absolute;
        bottom: -100px;
        left: 0px;

        z-index: -1;
    }

    @keyframes circle {
        0% {
            transform: rotate(0deg) scale(0);
            opacity: 1;
        }

        60% {
            transform: rotate(360deg) scale(1.5);
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }
}

.wrapper {
    position: relative;
}

.wrapper::before {
    content: "";
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
    width: 260px;
    height: 260px;
    border-radius: 260px;
    position: absolute;
    top: -100px;
    right: -100px;

    animation: circle-after 5s linear infinite;
}

@keyframes circle-after {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.navbar .box {
    z-index: 1;
    display: flex;
    align-items: center;
}

/* 0801 */
.navbar .box .btn-box button {
    background-color: #354F61;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 2px 9px;
    padding-top: 3px;
    /* margin-right: 10px; */
    margin-top: 4px;
}

.navbar {
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 99;
}

.navbar .logo-box {
    width: 140px;
}

/* 0801 */
@media (min-width: 576px) {
    .navbar .box .btn-box button {
        margin-right: 10px;
    }
}

/* 底部固定選單 */
.nav-menu {
    position: fixed;
    background-color: #fff;
    width: 100%;
    bottom: 0;
    z-index: 999;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
}

.nav-menu .menu-box {
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: flex-end;
    padding: 3px 0;
    margin: 0;
    height: 68px;
}

.nav-menu .menu-box a {
    display: block;
    text-align: center;
    color: #173042;
}

.nav-menu .menu-box a:hover {
    text-decoration: none;
}

.nav-menu .menu-box img {
    display: block;
    width: initial;
    margin: 0 auto;
}

.nav-menu .menu-box p {
    font-size: 12px;
    margin-top: 2px;
}

.menu-active .icon path {
    fill: #F58635;
}

.menu-active p {
    color: #F58635;
    font-weight: 500;
}

.nav-menu .menu-box .menu-qrcode .img-box {
    transform: translateY(-20px);
    position: relative;
}

.nav-menu .menu-box .menu-qrcode .img-box::after {
    content: "";
    background-color: #fff;
    border-radius: 100px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    width: 65px;
    height: 65px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-52%);
    z-index: -1;
}

.nav-menu .menu-box .menu-qrcode a p {
    font-size: 10px;
}

/* 彈跳視窗 ↓ */
.modal-header {
    border-bottom: 1px dashed #B9CCDF;
    padding: 10px 0px;
    padding-bottom: 5px;
    margin: 0px 15px;
}

.modal-header .close {
    color: #173042;
    opacity: 0.8;
}

.modal-body {
    padding: 20px 40px;
}

.modal-body .btn-box {
    text-align: right;
}

.modal-body button {
    background-color: #173042;
    color: #fff;
    font-size: 16px;
    padding: 3px 25px;
    padding-top: 4px;
    border: none;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10px;
}

@media (min-width: 576px) {

    .modal-dialog {
        max-width: 400px;
        ;
    }
}

/* 彈跳視窗 ↑ */


/* 底部加高 fixed的高度*/
.nav-menu-bg {
    width: 100%;
    height: 120px;
    display: flex;
}

/* 網頁板選單 ↓ */
.web-menu {
    display: none;
}

.web-menu .menu-box {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-right: 10px;
}

.web-menu .menu-box li a {
    display: flex;
    color: #173042;
    align-items: center;
    padding: 0 5px;
    margin-right: 10px;
}

.web-menu .menu-box li a:hover {
    color: #F58635;
    font-weight: 500;
    text-decoration: none;
}

.web-menu .menu-box li a svg {
    width: 35px;
    transform: translateX(2px);
}

.web-menu .menu-box li:nth-child(1) svg {
    transform: translateX(-4px);
}

.web-menu .menu-box li a:hover object {
    filter: drop-shadow(#F58635 0px 100px);
    transform: translate(0px, -100px);
}

.web-menu .menu-box li a p {
    transform: translateY(3px);
    font-size: 16px;
}

.home .news-box {
    display: none;
}

/* 0719 */
.web-menu img.svg.icon {
    width: 35px;
}

/* 網頁板選單 ↑ */

/* 網頁板右下角QR扣 */
.navbar+.qrcode-box {
    display: none;
}

.home .main {
    z-index: 2;
}

/* 網頁板首頁調整 ↓ */
@media (min-width: 768px) {

    .wrapper .nav-menu {
        display: none;
    }

    .wrapper .web-menu {
        display: block;
    }

    .home .nav-menu-bg {
        height: 30px;
    }

    .home .ticket .box {
        padding: 20px 15px;
    }

    .home .ticket .card-box h2 {
        font-size: 18px;
    }

    .home .ticket .card-box p {
        font-size: 16px;
    }

    .home .ticket .bike-box p:nth-last-child(1) {
        font-size: 14px;
    }

    .home .ticket hr {
        margin-top: 10px;
        margin-bottom: 5px;
        border-image: linear-gradient(to left, transparent 0%, transparent 15%, #A67FD2 15%, #A67FD2 100%);
        border-image-slice: 1;
    }

    .home .ticket .bike-box h2 button {
        margin-left: 5px;
    }

    /* .home .ticket-type .type-box{
        padding: 10px 40px;
    } */

    .wrapper .qrcode-box {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 30px;
        padding: 10px;
        background-color: #fff;
        border-radius: 50px;
        box-shadow: 0px 1px 3px rgb(0 0 0 / 10%);
        z-index: 99;
    }

    .wrapper .qrcode-box:hover {
        background-color: #fff;
        box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
    }

}

@media (min-width: 992px) {

    /* 0801 */
    .home .nav-menu-bg {
        display: none;
    }

    .nav-menu-bg {
        display: none;
    }

    .navbar {
        margin: 20px auto;
        width: 992px;
    }

    .navbar::after {
        content: "";
        background-color: transparent;
        background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.456) 60%, rgba(255, 255, 255, 0.456) 80%, transparent 100%);
        width: 100%;
        height: 60px;

        border-radius: 50px;
        position: absolute;
        z-index: -1;
    }

    .home .main {
        width: 992px;
        height: 900px;
        margin: 0px auto;
        margin-top: 80px;

        position: relative;
    }

    .home .ticket {
        position: absolute;
        top: 95px;
        left: initial;
        right: 0;
        width: 40%;
        margin-top: 25px;
    }

    .home .ticket .box-bg {
        display: none;
    }

    /* 0704 修改 */
    .home .ticket .box .card-main h2 {
        height: 34px;
        display: flex;
        align-items: center;
    }

    .home .ticket hr {
        margin-top: 5px;
        margin-bottom: 0;
        border-image: linear-gradient(to left, transparent 0%, transparent 28%, #A67FD2 28%, #A67FD2 100%);
        border-image-slice: 1;
    }

    .home .ticket .box {
        padding: 10px 15px;
    }

    .home .ticket .card-box {
        overflow: initial;
    }

    .home .ticket .card-box .btn-box {
        bottom: 36px;
    }

    .home .banner {
        position: absolute;
        top: 0px;
        left: 0%;
        width: 60%;
        margin-top: 25px;
    }

    .home .ticket-type {
        position: absolute;
        top: 10px;
        right: 0;
        width: 40%;
    }

    /* .home .ticket-type .type-box{
        padding: 5px 32px;
    } */

    /* 20230523 */
    .home .apply-card {
        /* position: absolute; */
        /* top: 340px; */
        /* right: 0; */
        /* width: 30%; */
    }

    /* 20230523 */
    .apply-card .card-box .text-box {
        /* min-height: 130px; */
    }

    .home .apply-card .card-box .text-box .reason {
        transform: translateY(0px);
    }

    /* 網頁板最新消息 */
    /* 20230523 */
    .home .news-box {
        display: block;
        /* position: absolute; */
        /* top: 355px; */
        /* left: 0; */
        /* width: 70%; */

        padding-right: 0;
    }

    .home .news-box .box-bg {
        background-color: #F0F0F0;
        border-radius: 10px;
        padding: 5px;
        box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
    }

    .home .news-box .box {
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        /* height: 150px; */

        /* position: relative; */
    }

    .home .news-box .title-box {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 1px dashed #B9CCDF;
        padding: 5px;
        padding-top: 10px;
    }

    .home .news-box .title-box h1 {
        font-size: 18px;
        margin: 0;
    }

    .home .news-box .title-box a {
        color: #F58635;
        font-size: 14px;
    }

    .home .news-box a:hover {
        font-weight: 600;
        text-decoration: none;
    }

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

    /* 0808 刪除display */
    .home .news-box .text-box li {
        /* position: absolute; */
        /* width: 95%; */
        padding-left: 10px;
        /* display: none; */
        top: 40%;
    }

    /* 0808 新增margin-top */
    .home .news-box .text-box a {
        display: flex;
        color: #173042;
        margin: 30px 0;
        /* margin-top:15px ; */
        height: 25px;
        overflow: hidden;
    }

    .home .news-box .text-box li:hover {
        opacity: 0.9;
    }

    .home .news-box .text-box a p {
        font-size: 16px;
        flex-grow: 1;
        flex-basis: 100px;
    }

    .home .news-box .text-box a .time {
        flex-grow: 0;
    }

    .home .apply-card .apply-box .box {
        padding-bottom: 188px;
    }
}


@media (min-width: 1200px) {

    .navbar {
        width: 1200px;
    }

    /* 20230523 */
    .home .main {
        width: 1200px;
        /* height: 970px; */
    }

    .home .ticket {
        position: absolute;
        top: 123px;
        left: initial;
        right: 0;
        width: 40%;
        margin-top: 25px;
    }

    .home .ticket hr {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .home .ticket .box {
        padding: 20px 15px;
    }

    .home .ticket .card-box {
        overflow: hidden;
    }

    .home .ticket .box-bg {
        display: block;
    }

    .home .ticket .card-box .btn-box {
        bottom: -55px;
    }

    .home .buy-box .btn-box .line-box {
        padding: 20px 0;
    }

    .home .banner {
        position: absolute;
        top: 0px;
        left: 0%;
        width: 60%;
    }

    .home .ticket-type {
        position: absolute;
        /* top: 270px; */
        right: 0;
        width: 40%;
    }

    /* .home .ticket-type .type-box{
        padding: 10px 32px;
    } */

    /* .home .ticket-type .type-box li{
        width: 65px;
    } */

    /* 20230523 */
    .home .apply-card {
        /* position: absolute; */
        /* top: 400px; */
        /* width: 25%; */
    }

    .home .apply-card .bg.apply-box {
        /* height: 175px; */
    }

    .home .apply-card .apply-box .box {
        padding: 15px;
        padding-bottom: 188px;
    }

    /* 20230523 */
    .home .news-box {
        display: block;

        /* position: absolute; */
        /* top: 415px; */
        /* left: 0; */
        /* width: 75%; */
    }

    .home .news-box .box {
        /* height: 165px; */
    }
}

/* 網頁板首頁調整 ↑ */




/* 套票資訊/線上購買 */
.ticket {
    margin-top: 20px;
}

.ticket .box {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.ticket .box-bg {
    background-color: rgba(240, 240, 240, 0.4);
    width: 200px;
    height: 350px;
    position: absolute;
    top: -20px;
    right: -100px;
    transform: rotate(30deg);
}

/* 套票資訊 card-box */
.ticket .card-box h2 {
    position: relative;
    font-size: 16px;
}

.ticket .card-box p {
    font-size: 14px;
}

.ticket hr {
    margin: 0;
    margin-top: 5px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to left, transparent 0%, transparent 25%, #A67FD2 25%, #A67FD2 100%);
    border-image-slice: 1;
}

.ticket .bike-box {
    display: inline-block;
    margin-top: 10px;
}

.ticket .bike-box h2 button {
    font-size: 10px;
    color: #6E6E6E;
    background-color: #F0F0F0;
    border: none;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 300;
    box-shadow: 1px 1px 4px rgba(219, 219, 219, 0.1);
    transform: translateY(-1px);
}

.ticket .bike-box p {
    font-size: 13px;
    position: relative;
}

.ticket .bike-box p:nth-last-child(1) {
    color: #BB2525;
    font-weight: 500;
    font-size: 13px;
    margin-top: 6px;
    background-color: #f9f9f9;
    display: inline-block;
    padding: 2px;
    padding-left: 0;
    border-radius: 0 20px 20px 0;
    position: relative;
    box-shadow: 1px 1px 4px rgba(219, 219, 219, 0.1);
}

.ticket .bike-box p:nth-last-child(1):before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    background-color: #f9f9f9;
    height: 25px;
    width: 10px;
}

/* 20230707 修改 position: relative; */
.ticket .card-box .btn-box {
    float: right;
    /* position: relative; */
    bottom: 0px;
    right: -15px;
    margin-top: 5px;
}

/* 20230707 修改 */
.ticket .card-box .btn-box img {
    width: initial;
    position: absolute;
    /* top: -34px; */
    right: 15px;

    animation: scale-img 1.5s linear infinite;

    bottom: 15px;
}

.ticket .card-box .btn-box button {
    background-color: #173042;
    font-size: 14px;
    color: #fff;
    border: none;
    border-radius: 20px 0 0 20px;
    padding: 6px 18px;
    padding-right: 12px;
}

/* 0704 套票切換 */

.ticket .container>.btn {
    position: relative;
    /* float: right; */
    /* margin-left: 5px; */
    padding: 0;
    z-index: 55;
    top: -10px;
    /* left: 5px; */
    /* right: 10px; */
    display: flex;
    justify-content: flex-end;
}

.ticket .container>.btn button {
    background-color: #fff;
    font-size: 14px;
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 1px 15px;
    padding-left: 17px;
    /* padding-right: 12px; */
    display: none;

    /* position: absolute; */
    /* top: -10px; */
    /* right: 10px; */

    transition: 0.5s;
    opacity: 1;
}

.ticket .container>.btn .day-btn {
    /* left: 75px; */
}

.ticket .container>.btn button.show {
    display: block;
    background-color: #F58635;
    color: #fff;
    z-index: 55;
}

.ticket .container>.btn button:focus {
    outline: none;
}

.ticket .card-box .card-main {
    display: none;
}

.ticket .card-box .card-main.show {
    display: block;
}

.ticket .card-box .day-main .btn-box img {
    top: 48px;
}

.ticket .card-box .card-main h2+p span {
    display: block;
}

/* 0718 新增 */
.ticket .card-box p .renew {
    background-color: #173042;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 1px 15px;
    padding-top: 2px;
    margin-left: 5px;
    font-weight: 100;
    font-size: 14px;
    position: relative;
    z-index: 55;
}



/* 線上購票 buy-box */
.ticket .box.buy-box {
    background-color: #F0F0F0;
    padding: 7px;
}

.ticket .buy-box .box-bg {
    background-color: rgba(255, 255, 255, 0.4);
}

.ticket .buy-box .bg {
    background: linear-gradient(to top, #fff 30%, rgba(193, 219, 245, 0.44) 80%);

    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.ticket .buy-box .bg::before {
    content: "";
    display: block;
    background-color: #F0F0F0;
    width: 45px;
    height: 45px;
    border-radius: 30px;
    box-shadow: inset 1px 1px 4px rgba(164, 164, 164, 0.1);

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

.ticket .buy-box .title-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ticket .buy-box h2 {
    font-size: 20px;
    color: #173042;
    margin-top: 15px;
}

.ticket .buy-box .btn-box .line-box {
    margin: 0 10px;
    padding-left: 10px;
}

.ticket .buy-box .line-box .line {
    height: 1px;
    width: 60px;
    background-color: #e3ddc3;
    margin: 10px 0;
}

.ticket .buy-box .title-box .line-box {
    margin-bottom: 10px;
}

.ticket .buy-box .title-box .line-box .line {
    background-color: #F58635;
}

.ticket .buy-box .line-box .line:nth-child(3n+1) {
    width: 80px;
}

.ticket .buy-box .line-box .line:nth-child(3n+3) {
    width: 90px;
}

.ticket .buy-box .btn-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
}

.ticket .buy-box img {
    width: initial;
    margin-bottom: 4px;
    margin-right: 5px;
}

.ticket .buy-box .btn-box img {
    animation: scale-img 1.5s linear infinite;
}

@keyframes scale-img {
    0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

.ticket .buy-box .btn-box button {
    background-color: #173042;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    border: none;
    border-radius: 20px 0 0 20px;
    padding: 3px 15px;
    position: absolute;
    right: 0;
    line-height: 30px;
    bottom: 30px;
}


/* 20230707 新增 文字 */
.ticket .aa p {
    background-color: #BB2525;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 55;
    /* width: calc(100% - 110px); */
    transform: translateY(-10px);
    margin-bottom: 10px;
}




/* 375調整位置 */
@media (min-width: 375px) {

    /* 0721 */
    .ticket .card-box .btn-box {
        /* bottom: -35px; */
    }

    /* 0704 */
    .ticket .box {
        padding: 10px;
        padding-top: 20px;
    }

    /* 0704 */
    .ticket .card-box .day-main .btn-box img {
        top: 12px;
    }
}

@media (min-width: 413px) {

    /* 0721 */
    .ticket .card-box .btn-box {
        bottom: -35px;
    }

}


@media (min-width: 576px) {
    .ticket .buy-box .bg {
        padding: 10px 25px;
    }

    .ticket .buy-box h2 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .ticket .buy-box h2+img {
        margin-left: 2px;
    }

    .ticket .buy-box .btn-box button {
        font-size: 20px;
        padding: 8px 30px;
        border-radius: 25px 0 0 25px;
    }
}

@media (min-width: 992px) {

    .ticket .buy-box .bg {
        padding: 10px;
    }

    .ticket .buy-box h2 {
        font-size: 22px;
    }

    /* 0704 */
    .ticket .card-box .card-main h2+p span {
        display: inline-block;
        margin-left: 5px;
    }

    .ticket .container>.btn {
        width: 100%;
        top: -36px;
    }

    .ticket .container>.btn .month-btn {
        transform: translateY(27px);
    }

    .ticket .card-box .day-main .btn-box img {
        top: 100px;
    }

    /* 20230707 新增 文字 */
    .ticket .aa p {
        transform: translateY(-10px);
    }
}

@media (min-width: 1200px) {

    .ticket .buy-box .bg {
        padding: 10px 25px;
    }

    .ticket .buy-box h2 {
        font-size: 24px;
    }

    /* 0704 */
    .ticket .container>.btn {
        width: 100%;
        top: -10px;
    }

    .ticket .container>.btn .month-btn {
        transform: translateY(0px);
    }

    .ticket .card-box .day-main .btn-box img {
        top: 15px;
    }

    /* 20230707 新增 文字 */
    .ticket .aa p {
        transform: translateY(-15px);
    }
}


/* banner */
.banner {
    margin-top: 10px;
}

.banner .slider-for .slick-list {
    border-radius: 10px;
}

.banner .slider-for .box.slick-slide {
    height: 190px;
}

.banner .box img {
    border-radius: 10px;
    width: initial;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 翻頁數字和向右按鈕 */
.slider-nav.slick-initialized.slick-slider {
    top: 10px;
}

.slider-nav .slick-slide {
    text-align: center;
    padding-right: 28px;
}

.banner .total {
    transform: translateX(17px) translateY(-5px);
    text-align: center;
}

.banner .total p {
    display: inline-block;
    font-size: 16px;
    position: relative;
}

.banner .total p::before {
    content: "";
    display: block;
    height: 18px;
    width: 1px;
    background-color: #000;
    transform: rotate(30deg);

    position: absolute;
    top: 0px;
    left: -12px;
}

.banner .slick-prev {
    z-index: -1;
}

.banner .slick-next {
    background: linear-gradient(to right, transparent 0%, transparent 10%, #fff 100%);
    width: 20vw;
    border-radius: 20px;
    right: 0;
    top: initial;
    bottom: -15px;
    box-shadow: 1px 1px 4px rgba(219, 219, 219, 0.1);
    z-index: 99;
}

.banner .slick-next:before {
    content: ">";
    color: #BB2525;
    width: initial;
    height: initial;
    text-align: right;
    padding-right: 8px;
    padding-bottom: 2px;
    font-size: 18px;
}

@media (min-width: 425px) {

    .banner .slider-for .box.slick-slide {
        height: 250px;
    }
}

@media (min-width: 768px) {

    .banner .slider-for .box.slick-slide {
        height: 330px;
    }
}

@media (min-width: 992px) {

    .banner .slider-for .box.slick-slide {
        height: 265px;
    }
}

@media (min-width: 1200px) {

    .banner .slider-for .box.slick-slide {
        height: 325px;
    }
}



/* 票券種類icon選單 */
.ticket-type {
    margin: 15px 0;
}

.ticket-type .type-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ticket-type .type-box {
    display: flex;
    justify-content: space-between;
    /* padding: 10px 30px; */
    list-style: none;
    margin: 0;
    padding: 0;

    flex-wrap: wrap;
}

/* 0417 */
.ticket-type .type-box li {
    text-align: center;
    /* padding-top: 5px; */
    /* width: 50%; */
    width: calc(100%/3);
}

/* 0417 */
.ticket-type .type-box li a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 12px 0; */

    transition: 0.3s;

    flex-direction: column;
    padding: 6px 0;

    border-right: 1px solid #E0E7EE;
}

.ticket-type .type-box li:nth-last-child(1) a {
    border-right: none;
}

/* .ticket-type .type-box li a:nth-child(1){
    border-right: 1px solid #E0E7EE;
} */


.ticket-type .type-box li p {
    margin-top: 5px;
    color: #000;
    font-size: 18px;
}

.ticket-type .type-box li img {
    width: 50px;
}

.ticket-type .type-box li a:hover {
    text-decoration: none;
    opacity: 0.9;
    background-color: #173042;
}

.ticket-type .type-box li a:hover p {
    color: #fff;
}

/* 動畫 */
.ticket-type .type-box li.title {
    width: 100%;
    padding: 2px 10px;
    padding-top: 4px;
    /* text-align: left; */
    /* font-weight: 500; */
    border-bottom: 1px dashed #B9CCDF;
    background-color: #b995e1;
    color: #fff;
}

.ticket-type .type-box li:nth-child(2) {
    animation: aa 3s 1s linear infinite;
}

.ticket-type .type-box li:hover {
    animation: none;
}

.ticket-type .type-box li:nth-child(3) {
    animation: aa 3s 2s linear infinite;
}

@keyframes aa {

    0% {
        opacity: 1;
    }

    20% {
        opacity: 0.7;

    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* 0417 */
@media (min-width: 576px) {

    .ticket-type .type-box li a {
        flex-direction: initial;
        padding: 12px 0;
    }
}


@media (min-width: 992px) {

    .ticket-type .type-box li.title {
        padding: 2px 10px;
        padding-top: 4px;
    }

    .ticket-type .type-box li a {
        padding: 6px 0;
    }

}

@media (min-width: 1200px) {

    .ticket-type .type-box li.title {
        padding: 5px 10px;
        padding-top: 8px;
    }

    .ticket-type .type-box li a {
        padding: 12px 0;
    }

}

/* 20230523 */
.home .framed {
    /* position: absolute; */
    /* top: 410px; */
    width: 100%;
}

.home .framed .row {
    display: block;
}

/* 20230523 */
.framed .apply-card .title-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px dashed #B9CCDF;
    padding: 5px;
    padding-top: 10px;
}

/* 20230523 */
.framed .apply-card .title-box h1 {
    font-size: 18px;
    margin: 0;
}

/* 20230523 */
@media (min-width: 992px) {

    .home .framed {
        position: absolute;
        top: 360px;
        /* width: 100%; */
    }

    .framed {
        margin-top: 20px;
    }

    .home .framed .row {
        display: flex;
    }
}

/* 20230523 */
@media (min-width: 1200px) {

    .home .framed {
        position: absolute;
        top: 410px;
        /* width: 100%; */
    }
}


/* 申請卡片/卡片狀態 */
/* 20230523 */
.apply-card {
    /* margin-top: 10px; */
    /* padding-left: 0; */
}

.apply-card .bg {
    background-color: #F0F0F0;
    padding: 1px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.apply-card .bg-2 {
    background-color: #99C955;
    width: 260px;
    height: 80px;
    position: absolute;
    top: -45px;
    left: -50px;
    transform: rotate(-15deg);
}

/* 卡片狀態 card-box */
/* 20230523 */
.apply-card .box {
    margin: 3px;
    padding: 15px 5px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;

}

.apply-card .card-box .img-box {
    padding: 15px 0px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.apply-card .card-box .img-box img {
    height: 130px;
    width: initial;
    display: inline-block;
    margin: 0 auto;
}

/* 20230523 */
.apply-card .card-box .text-box {
    padding: 0;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */

    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 10px;
    /* min-height: 100px; */
    /* height: calc(100% - 95px); */
}

/* 20230523 */
.apply-card .card-box .text-box p {
    display: flex;
    align-items: center;
    font-size: 16px;
    /* margin-top: 10px; */
    margin: 10px 0;
}

.apply-card .card-box .text-box p span {
    font-size: 14px;
}

.apply-card .card-box .text-box p img {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    margin-bottom: 2px;
}

/* 20230523 */
.apply-card .card-box .text-box .reason {
    font-size: 14px;
    transform: translateY(-3px);

    margin: 0;
    margin-left: 70px;
}

/* 20230523 */
.apply-card .card-box .text-box hr {
    border-top: 1px dashed #E0E7EE;
    width: 100%;
    margin: 5px 0;
    /* margin: 10px 0; */
}

/* 20230523 */
.apply-card .card-box .text-box button {
    display: block;
    text-align: center;
    background-color: #173042;
    color: #fff;
    padding: 3px 5px;
    padding-bottom: 2px;
    border-radius: 20px;
    font-size: 16px;
    width: 100%;
    border: none;
    margin: 5px 0;
}

.apply-card .card-box .text-box button span {
    float: right;
    margin-right: 5px;
}


/* 申請卡片 apply-box */
.apply-card .bg.apply-box {
    background-image: url(../img/apply-box-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;

    animation: ww 3s linear infinite;

    /* height: 161px; */
}

@keyframes ww {
    50% {
        opacity: 0.7;
    }
}

.apply-card .apply-box .bg-2 {
    background-color: #D6ECF0;
}

.apply-card .apply-box .box {
    background-color: rgba(255, 255, 255, 0.5);

    padding: 15px;
    padding-bottom: 30px;
}

.apply-card .apply-box h2 {
    font-size: 18px;
    color: #173042;
    padding: 5px;
    margin-bottom: 70px;
    padding-left: 10px;
}

.apply-card .apply-box button {
    background-color: #173042;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 30px 0 0 30px;
    padding: 3px 20px;

    position: absolute;
    right: -5px;
    bottom: 10px;
}

@media (min-width: 576px) {
    .apply-card .bg {
        padding: 3px;
    }

    .apply-card .box {
        padding: 7px;
    }

    /* 20230523 */
    .apply-card .card-box .text-box {
        padding-left: 15px;
        padding-right: 15px;
    }

    .apply-card .card-box .text-box p span {
        font-size: 16px;
    }

    .apply-card .card-box .text-box p img {
        margin-left: 7px;
    }

    .apply-card .card-box .text-box .reason {
        font-size: 14px;
        /* transform: translateY(-12px); */
        margin-left: 80px;
    }
}

/* 20230523 */
@media (min-width: 992px) {

    .apply-card {
        padding-left: 0;
    }


    .apply-card .bg {
        height: 100%;
    }

    .apply-card .box {
        height: 99%;
    }

    .apply-card .card-box .text-box {
        height: calc(100% - 95px);
    }

    .apply-card .box {
        background-image: url(../img/apply-card-tree.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }
}

/* 20230523 ↑ */

/* 減碳足跡 */
.carbon-footprint {
    padding-bottom: 30px;
    background-color: #E3E3E3;
}

.carbon-footprint .carbon-box {
    position: relative;
    text-align: right;
    padding: 15px 0;
}

.carbon-footprint p {
    background-color: #fff;
    color: #F58635;
    padding: 5px 20px;
    display: inline-block;
    margin-right: 60px;
    font-size: 16px;
    border-radius: 20px;
}

.carbon-footprint img {
    width: initial;
    position: absolute;
    right: 10px;
    bottom: -8px;
}












/* 內頁 */

/* 箭頭 */
.arrow {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 0;
    border: 2px solid #173042;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);

    position: relative;
    top: 10px;
}

.arrow:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;

    border: 2px solid #173042;
    border-left: none;
    border-bottom: none;

    position: absolute;
    bottom: -4px;
    left: -4px;
}

.arrow:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;

    border: 2px solid #173042;
    border-left: none;
    border-bottom: none;

    position: absolute;
    top: -6px;
    right: -6px;
}

/* 分隔線 */
.line {
    border-color: #fff;
    margin: 12px 20px;
}




/* 卡片資料 頭 */
.card .title-box {
    z-index: 1;
}

.card .title-box h1 {
    font-size: 18px;
    padding-left: 18px;
    margin: 20px 0;

    background-image: url(../img/icon-circle.png);
    background-repeat: no-repeat;
    background-position: left 2px;
}

.card .title-box .progress-box {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

.card .title-box .progress-box li {
    font-size: 15px;
    color: #173042;
    text-align: center;
    padding: 3px 0px;
    margin: 0 4px;
}

.card .title-box .progress-box li:nth-child(2n+1) {
    flex-grow: 1;
    border-radius: 5px;
}

.card .title-box .progress-box li.active {
    color: #fff;
    background-color: #354F61;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* card-information-1 基本資料 */
.card .information-box {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    padding: 18px 15px;
}

.card .information-box h2 {
    font-size: 20px;
    color: #173042;
    font-weight: 300;
    margin: 0;
}

.card .information-box hr {
    margin-top: 5px;
    margin-bottom: 18px;
    border-top: 1px dashed #E0E7EE;
}

.card .information-box .notice {
    font-size: 12px;
    color: #BB2525;
    margin-top: 2px;
}

.card .information-box .form-group {
    display: flex;
    margin: 0;
    margin-top: 12px;
}

.card .information-box .form-group label {
    flex-grow: 1;
    flex-basis: 100px;
    margin: 0;
    margin-top: 3px;
}

.card .information-box .form-group .form-control {
    flex-grow: 5;
    flex-basis: 100px;
    height: initial;
    padding: 5px 5px;
}

/* 0805 */
.card .information-box .form-group select {
    /* width: 100%; */
}

.card .information-box .form-control::placeholder {
    color: #E8E8E8;
}


/* 下一步 */
.card .next-btn {
    overflow: hidden;
}

.card .next-btn button {
    background-color: #173042;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 30px;
    padding-right: 25px;
    border: none;
    border-radius: 30px 0 0 30px;
    float: right;
    margin-top: 24px;
}

.card .prev-btn button {
    background-color: #173042;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 30px;
    padding-right: 25px;
    border: none;
    border-radius: 0 30px 30px 0;
    float: left;
    /* margin: 15px 0; */
    margin-top: 24px;
}

/* card-information-2 上傳身分證正反面 */
.card .notice-box .notice {
    font-size: 14px;
    margin-top: 12px;
}

.card .id h2 {
    text-align: left;
    margin-top: 10px;
}

.card .box+h2 {
    margin-top: 30px;
}

.card .information-box .box {
    height: 200px;
    background-color: #F9F9F9;
    border-radius: 10px;
    margin: 12px 0;
}

.card .information-box .box p {
    font-size: 12px;

    padding-top: 60px;
    width: 220px;
    margin: 0 auto;
}

.card .information-box .custom-file {
    width: initial;
    height: initial;
    left: 50%;
    transform: translateX(-50%);

    background-color: #F58635;
    color: #fff;
    font-size: 14px;
    padding: 3px 20px;
    padding-top: 5px;
    border-radius: 10px;
    margin-top: 20px;
}

.card .information-box .custom-file-input {
    position: absolute;
    height: initial;
    left: 0;
}

/* card-information-3 上傳證件照片 */
.card .id-photo .box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.card .id-photo p {
    font-size: 12px;
}

.card .id-photo .img-box p {
    padding: 0;
    margin: 0;
    width: initial;
    text-align: center;
}

.card .id-photo .text-box p {
    width: 150px;
    padding-top: 20px;
}

/* 提交 */
.card .done-btn {
    text-align: center;
}

.card .done-btn button {
    background-color: #173042;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 2px 50px;
    padding-top: 5px;
    border: none;
    border-radius: 30px;
    margin-top: 24px;
}


/* 0322 */
.information-box .btn-box {
    border: 1px solid #173042;
    border-radius: 5px;
    margin-bottom: 20px;
}

.information-box .btn-box button {
    width: 100%;
    background-color: transparent;
    border: none;
    border-radius: 3px;
    padding: 2px 0;
}

.information-box .text-box {
    display: none;
}

.information-box .btn-box button.add {
    background-color: #173042;
    color: #fff;
}

.information-box .text-box.add {
    display: block;
}

/* 0407 */
.information-box .photograph {
    /* overflow: hidden; */
    position: relative;
    min-height: 20px;
    text-align: right;
}

.information-box .photograph button {
    background-color: #F58635;
    color: #fff;
    padding: 3px 0;
    /* padding-top: px; */
    border-radius: 5px;
    border: none;
    float: right;
    font-weight: 300;
    /* width: 100%; */
    width: 37px;
    margin-top: 5px;
    position: absolute;
    right: 0;
    /* top: -20px; */
}

.information-box .photograph button:nth-last-child(2) {
    right: 40px;
}

.information-box .photograph button img {
    width: 23px;
    margin: 0 5px;
    /* margin-bottom: 5px; */
}

/* .information-box .photograph .id-img .id-img{
    margin: 10px 0; 
} */

/* .information-box .photograph .id-img{
    transform: translateY(-20px);
} */


.information-box .text-box .check-box {
    display: flex;
    justify-content: flex-end;
}

.information-box .text-box .check-box p {
    padding: 0 5px;
    margin-top: 3px;
}

.information-box .text-box .expiration {
    transition: 0.3s;
}

.information-box .text-box .expiration.add {
    /* display: none; */
    opacity: 0.3;
    pointer-events: none;
}

.card-information-3 .information-box input,
.card-information-3 .information-box select {
    text-align: right;
}

.information-box input[readonly] {
    background-color: #fafafa;
}

.card #date[readonly] {
    flex-direction: row-reverse;
}

/* 0407 */
.information-box .photograph p.btn {
    font-size: 14px;
    color: #BB2525;
    padding: 0px;
    font-weight: 300;
    margin-top: 30px;

    transition: 0.3s;
}

.information-box .photograph p.btn:hover {
    opacity: 0.8;
}

.information-box .photograph p.btn img {
    width: 12px;
    margin-bottom: 2px;
}

.card-information-2 .modal-body {
    padding: 20px 20px;
    padding-bottom: 0;
}

.card-information-2 .modal-body img {
    border-radius: 10px;
}

.card-information-2 .modal-body .text {
    padding-left: 25px;
    margin: 20px 10px;
    margin-right: 20px;
    list-style: auto;
    text-align: justify;
}

.card-information-2 .modal-body .text li {
    margin: 15px 0;
    font-size: 16px;
}

.card-information-2 .modal-footer button {
    background-color: #F58635;
    color: #fff;
    padding: 1px 25px;
    padding-top: 3px;
    border-radius: 5px;
    border: none;

    font-weight: 300;

    transition: 0.3s;
}


@media (min-width: 576px) {

    .card .container {
        width: 540px;
    }

    .card .title-box .progress-box li {
        margin: 0 12px;
    }

    .card .line {
        width: 480px;
        margin: 12px auto;
    }

    .card .next-btn {
        text-align: center;
    }

    .card .next-btn button {
        float: none;
        border-radius: 30px;
        margin: 0 10px;
        margin-top: 24px;
    }

    .card .btn-box {
        display: flex;
        justify-content: center;
    }

    #step_2 .btn-box .prev-btn button,
    #step_3 .btn-box .prev-btn button {
        border-radius: 30px;
        margin: 0 10px;
        margin-top: 24px;
    }

    .card .btn-box .prev-btn button,
    .card .btn-box .prev-btn button {
        border-radius: 30px;
        margin: 0 10px;
        margin-top: 24px;
    }


    .card .information-box .form-group .form-control {
        flex-grow: 1;
    }

    .information-box .text-box .photograph button {
        /* width: 50%; */
        /* width: 40px; */
    }

    /* 0407 */
    .card-information-2 .modal-dialog {
        max-width: 500px;
    }

    .card-information-2 .modal-body .text li {
        font-size: 18px;
    }

}

@media (min-width: 992px) {

    .card .next-btn,
    .card .done-btn {
        margin-bottom: 30px;
    }
}






/* 交通資訊 traffic */

/* 頭 */
.traffic::after {
    display: none;
}

.traffic {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.traffic .navbar {
    justify-content: space-between;
    position: absolute;
    width: 100%;
    padding: 20px;
    z-index: 99;
}

/* 0720 */
.traffic .navbar .box {
    background-color: rgba(23, 48, 66, 0.8);
    border-radius: 10px;
    /* padding: 10px; */

    width: 35px;
    height: 35px;
    justify-content: center;

}

/* 0720 */
.traffic .navbar .box span {
    color: #fff;
    line-height: 15px;

    display: inline-block;
    transform: translateX(-1px) translateY(1px);
}


/* 下方運具選項 */

/* 0707 新增 */
.traffic .text-btn {
    text-align: center;
    width: 100%;

    position: absolute;
    top: 10%;
    z-index: 999;
}

/* 0707 新增 */
.traffic .text-btn button {
    /* display: inline-block; */
    background-color: #F58635;
    color: #fff;
    border: none;
    padding: 3px 25px;
    padding-top: 4px;
    border-radius: 20px;

    transition: 0.5s;
}

/* 0707 新增 */
.traffic .text-btn button:hover {
    background-color: #e57627;
}

.traffic .traffic-bg {
    background-color: rgba(200, 212, 224, 0.9);
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.traffic .traffic-box {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 576px;
}

.traffic .traffic-box li {
    width: 75px;
    height: 80px;
    background-color: #fff;
    margin: 15px 10px;
    padding: 5px 3px;
    border-radius: 10px;

    position: relative;

    background-position: center 3px;
    background-repeat: no-repeat;
}

.traffic .traffic-box .btn-0 {
    background-size: 40px;
    background-position: center;
    background-image: url(../img/umaji-icon.png);
}

.traffic .traffic-box .btn-0:hover {
    background-image: url(../img/umaji-icon-w.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-1 {
    background-image: url(../img/traffic-all.png);
}

.traffic .traffic-box .btn-1:hover {
    background-image: url(../img/traffic-all-o.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-2 {
    background-image: url(../img/traffic-mrt.png);
}

.traffic .traffic-box .btn-2:hover {
    background-image: url(../img/traffic-mrt-o.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-3 {
    background-image: url(../img/traffic-lrt.png);
}

.traffic .traffic-box .btn-3:hover {
    background-image: url(../img/traffic-lrt-o.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-4 {
    background-image: url(../img/traffic-bus.png);
}

.traffic .traffic-box .btn-4:hover {
    background-image: url(../img/traffic-bus-o.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-5 {
    background-image: url(../img/traffic-bike.png);
}

.traffic .traffic-box .btn-5:hover {
    background-image: url(../img/traffic-bike-o.png);
    background-color: #173042;
}

.traffic .traffic-box .btn-6 {
    background-image: url(../img/traffic-ferry.png);
}

.traffic .traffic-box .btn-6:hover {
    background-image: url(../img/traffic-ferry-o.png);
    background-color: #173042;
}

/* 1103 */
.traffic .traffic-box .btn-7 {
    background-image: url(../img/traffic-train.png);
}

.traffic .traffic-box .btn-7:hover {
    background-image: url(../img/traffic-train-o.png);
    background-color: #173042;
}

/* 0707 */
.traffic .traffic-box li a {
    display: inline-block;
    width: 100%;
    height: 100%;

    text-align: center;
}

/* 0707 */
.traffic .traffic-box li p {
    margin: 0 auto;
    padding: 0;
    color: #000;
    font-size: 12px;

    position: absolute;
    bottom: 2px;
    /* left: 50%; */
    /* transform: translateX(calc(-50% - 1px)); */

    width: 90%;
    transform: translateX(-1px);
}

.traffic .traffic-box li:hover p {
    color: #fff;
}

@media (min-width: 576px) {

    .traffic .traffic-box {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 768px;
    }

    .traffic .traffic-box li {
        width: 95px;
        margin: 15px 15px;
        padding: 10px 3px;
    }

}



/* 交通資訊 全部運具 traffic-all */

/* 透明背景 上下滑動效果*2 */
.traffic-all {
    overflow: hidden;
}

/* 0712 */
.transparent-bg {
    position: absolute;
    bottom: 0px;
    width: 100%;
    /* height: 480px; */
    border-radius: 15px 15px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 0712 */
.top-box {
    /* height: 300px; */
}

/* 0712 */
.traffic-all .traffic-bg {
    position: initial;
    border-radius: 15px 15px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 20px;

    height: 270px;
    transition: 0.5s;

}

/* 0712 */
.traffic-all .traffic-bg.aa {
    height: 360px;
}

.traffic-bus-2 .traffic-bg.bb {
    height: 450px;
}

.traffic-all .traffic-bg .btn-line {
    height: 2px;
    width: 30px;
    background-color: #354F61;
    margin: 0 auto;
}

/* 0712 */
.traffic-all .back {
    position: relative;
    /* z-index: 55; */
}

/* 0712 */
.traffic-all .back a {
    display: inline-block;
    color: #173042;
    background-color: rgb(188, 205, 223);
    border: none;
    transform: translateX(1px) translateY(3px);
    border-radius: 15px;
    padding: 2px 15px;
    font-size: 14px;

    position: absolute;
    z-index: 55;
}

/* 0712 */
.traffic-all .back a:hover {
    text-decoration: none;
    color: #fff;
    background-color: #F58635;
    border-radius: 15px;
}

.traffic-all .logo-icon {
    position: relative;
    height: 20px;
}

.traffic-all .traffic-bg .logo-icon img {
    width: 30px;
    position: absolute;
    right: 0px;
    top: 0;
}

.traffic-all .logo-icon-2 {
    position: relative;
}

.traffic-all .traffic-bg .logo-icon-2 img {
    width: 30px;
    position: absolute;
    left: 15px;
    top: 0;
}

.traffic-all.traffic-bike .logo-icon-2 img {
    top: 10px;
}


/* 標題欄 */
.traffic-all .title-box {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

.traffic-all .traffic-bg .title {
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 12px;
}

.traffic-all .traffic-bg img {
    width: initial;
    margin-right: 12px;
}

.traffic-all .title img {
    width: 50px;
}

.traffic-all .title h1 {
    font-size: 18px;
    margin: 0;
}

/* ul */
.traffic-all .transparent-bg .box {
    padding: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    margin: 20px 0;
    list-style: none;
}

.traffic-all .transparent-bg .box a {
    color: #173042;
}

/* 籃底標題欄 li */
.traffic-all .box .title-box {
    background-color: rgba(23, 48, 66, 0.9);
    border-radius: 20px 20px 0 0;
}

.traffic-all .box .title img {
    width: 45px;
}

.traffic-all .box .title img:nth-child(2) {
    width: 20px;
    margin-right: 5px;
}

.traffic-all .box .title p {
    color: #fff;
}

/* 白底時間欄 li */
.traffic-all .time-box {
    padding: 10px 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.traffic-all .time-box:nth-last-child(1) {
    border-radius: 0 0 20px 20px;
}

.traffic-all .time-box a {
    color: #173042;
    display: inline-block;
    width: 100%;
}

.traffic-all .time-box p {
    font-size: 14px;
    line-height: 25px;
    float: left;
}

.traffic-all .time-box>p {
    transform: translateY(5px);
}

.traffic-all .time-box .arrow {
    top: 15px;
    left: -20px;
}

.traffic-all .time-box .time {
    margin-left: 30px;
    text-align: right;
    float: right;
}

.traffic-all .time-box .time p {
    font-size: 16px;
    color: #BB2525;
    font-weight: 700;
    min-width: 50px;
}

.traffic-all .time-box .time p span {
    font-size: 10px;
    color: #000;
    font-weight: 300;
}

.traffic-all .bus-box p span {
    border: 1px solid #173042;
    border-radius: 10px;
    padding: 3px 10px;
}

/* 交通資訊 公車頁 traffic-bus-2 */
.traffic-bus-2 .top-box {
    height: 0px;
}

.traffic-bus-2 .box .title-box {
    position: relative;
    padding: 10px 12px;
}

.traffic-bus-2 .traffic-bg .title {
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 5px;
    justify-content: space-between;
}

.traffic-bus-2 .traffic-bg .title img {
    width: initial;
    margin-right: 0;
}

.traffic-bus-2 .traffic-bg .title p {
    border: 1px solid #fff;
    padding: 1px 15px;
    padding-top: 2px;
    border-radius: 10px;
    letter-spacing: 0.5;
    margin-right: 10px;
    font-weight: 400;
}

.traffic-bus-2 .box .title-box .stop-sign {
    width: 100%;
}

.traffic-bus-2 .box .title-box .terminal {
    float: right;
    color: #fff;
    padding-top: 10px;
    padding-left: 10px;
}

.traffic-bus-2 .time-box.active {
    background-color: #FFE74D;
}

/* 交通資訊 捷運輕軌頁 traffic-mrt-lrt */

/* 右上站點資訊按鈕 */
.traffic-mrt-lrt .station-btn {
    display: inline-block;

    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    transform: translateY(8px);
    font-weight: 500;
}

.traffic-mrt-lrt .station-btn a {
    color: #354F61;
}

.traffic-mrt-lrt .station-btn a:hover {
    text-decoration: none;
}

/* 藍底標題 */
.traffic-mrt-lrt .title-box {
    font-size: 18px;
    display: block;
    overflow: hidden;
    padding: 15px 0;
}

.traffic-mrt-lrt .traffic-bg .title {
    float: left;
    padding: 0;
    padding-left: 12px;
}

.traffic-mrt-lrt .title-box .title img {
    width: 30px;
}

.traffic-mrt-lrt .box .station {
    display: flex;
    align-items: center;
    float: right;
}

.traffic-mrt-lrt .box .station p {
    color: #fff;
    margin-right: 10px;
    font-size: 16px;
    padding: 3px 0;
}

/* 白底欄 */
.traffic-mrt-lrt .time-box>p {
    float: none;
    border-bottom: 1px solid #354F61;
    position: relative;
    transform: translateY(0px);
}

.traffic-mrt-lrt .time-box>p::after {
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background-color: #354F61;
    transform: rotate(30deg);

    position: absolute;
    right: 0;
    bottom: 2px;
}

.traffic-mrt-lrt .time-box .time {
    margin-left: 0px;
    float: none;
}

.traffic-mrt-lrt .time-box .time>p {
    transform: translateY(5px);
}

.traffic-mrt-lrt .time-box .next {
    margin-left: 25px;
    float: right;
}


/* 交通資訊 腳踏車 traffic-bike */

/* 腳踏車和空位 切換按鈕 */
.traffic-bike .btn-box {
    display: flex;
    justify-content: flex-end;
    transform: translateY(10px);
}

.traffic-bike .btn-box button {
    border: none;
    background-color: #fff;
    border-radius: 10px;
    margin-left: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.traffic-bike .btn-box button:focus {
    outline: none;
}

.traffic-bike .btn-box button.btnadd {
    background-color: #FFD04D;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset;
}

.traffic-bike .btn-box button img {
    display: inline-block;
    margin: 0 auto;
    padding: 3px 8px;
}

.traffic-bike .bike-box .title img {
    padding-left: 3px;
}

.traffic-bike .bike-box .time-box span {
    display: inline-block;
    border: 1px solid #173042;
    border-radius: 10px;
    margin-right: 10px;
    transform: translateY(-1px);
}

.traffic-bike .bike-box .time-box span img {
    padding: 1px 7px;
    margin-right: 0;
}

.traffic-bike .time-box .time p {
    color: #fff;
    min-width: 40px;
    text-align: center;
    background-color: #173042;
    border-radius: 10px;
    padding: 1px 0;
    margin-left: 5px;
    transform: translateY(-3px);
}

.traffic-bike .time-box .time p.warn {
    background-color: #BB2525;
}

.traffic-all .box .title-box.title-only {
    border-radius: 20px;
    padding: 5px 0;
}


@media (min-width: 576px) {

    /* 0712 */
    .top-box {
        /* height: 75vh; */
    }

    .traffic-bus-2 .top-box {
        /* height: 75vh; */
    }

    .traffic .transparent-bg {
        right: 0;
        width: 62%;
        /* height: 100vh; */
    }

}

@media (min-width: 768px) {

    .traffic .transparent-bg {
        width: 47%;
    }
}

@media (min-width: 992px) {

    /* 0712 */
    .traffic-all .traffic-bg:hover {
        height: 360px;
    }

    .traffic-bus-2 .traffic-bg:hover {
        height: 450px;
    }
}



@media (min-width: 1200px) {

    .traffic .transparent-bg {
        right: 0;
        width: 33%;
    }
}




/* 會員登入 註冊 忘記密碼 */
.member-box .box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
    margin-top: 100px;
}

.member-box .box h1 {
    font-size: 20px;
    text-align: center;
}

.member-box .box hr {
    margin: 0;
    border-top: 1px dashed #E0E7EE;
}

/* 表單選項 */
.member-box .form-group {
    display: flex;
    margin: 20px 0;
    align-items: center;
}

.member-box .form-group label {
    width: 120px;
    margin: 0;
}

.member-box .form-control {
    height: initial;
    padding: 5px;
}

/* 手機 */
.member-box .form-group .phone {
    width: 100%;
    display: flex;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

.member-box .phone-box .form-control:nth-last-child(2) {
    width: 90px;
    border-radius: 5px 0 0 5px;
    padding: 3px 5px;
    margin-right: 5px;
    border: none;
}

.member-box .phone-box .form-control:nth-last-child(1) {
    border-radius: 0 5px 5px 0;
    border: none;
    border-left: 1px solid #ced4da;
}

.member-box .phone-box .form-control:nth-last-child(2):focus {
    border: none;
}

.member-box .phone-box .form-control:nth-last-child(1):focus {
    border: none;
    border-left: 1px solid #ced4da;
}

/* 點擊框線 */
.member-box .form-group .form-control:focus {
    border: none;
    box-shadow: none;
    border: 1px solid #ced4da;
}

.member-box .form-group .form-control::placeholder {
    color: #E0E7EE;
    font-size: 14px;
}

/* 按鈕 */
.member-box button {
    display: block;
    width: 100%;
    background-color: #173042;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 10px;
    padding: 5px;
    margin: 20px 0;
}

.member-box .btn-box {
    text-align: right;
}

.member-box .code-btn {
    width: initial;
    font-size: 14px;
    padding: 4px 20px;
    display: inline-block;
    margin: 0;
    background-color: #F58635;
}

.member-box .note {
    display: block;
    color: #B9CCDF;
    text-align: right;
    margin-bottom: 2px;
}

.member-box .other-btn {
    color: #82C9C7;
}

.member-box .other-btn span {
    display: inline-block;
    transform: translateX(5px);
}

.member-box .note:hover {
    text-decoration: none;
}

/* 註冊頁 */
.register .question-box p {
    margin-top: 20px;
    font-size: 14px;
}

.register .question-box .form-group {
    display: block;
    overflow: hidden;
}

.register .question-box .form-group label {
    width: initial;
    padding-bottom: 5px;
    float: left;
}

.register .question-box .form-control {
    width: 30%;
    float: right;
    padding: 6px 3px;
    height: initial;
    color: #707070;
}

/* 0629 修改 */
.register .code-box .code-img {
    text-align: right;
    margin: 20px 0;
    margin-top: 0;
}

.register .code-box .code-img div {
    display: inline-block;
    width: 100px;
    height: 25px;
    background-color: #ccc;
}

.register .code-box+p {
    font-size: 14px;
    text-align: center;
}

.register .code-box+p a {
    color: #BB2525;
}



@media (min-width: 576px) {
    .member-box .container {
        width: 540px;
    }

    .member-box .box {
        margin-top: 150px;
    }

    .member-register .member-box .box {
        margin-top: 100px;
    }

    .member-box button {
        display: block;
        width: 100%;
        background-color: #173042;
        color: #fff;
        font-weight: 500;
        border: none;
        border-radius: 10px;
        padding: 5px;
        margin: 20px auto;
    }

    .member-box .form-group {
        margin: 30px 0;
    }

    /* .register .code-box .code-img{
        margin-top: 0;
    } */

}




/* 0628 0629 新增 登入頁按鈕修改 舊會員登入頁 */
.member-singin .member-box button {
    margin: 10px auto;
}

.member-singin .btn-box button:nth-last-child(1) p {
    font-size: 12px;
}

.member-singin .code-box .form-group,
.member-box .code-box .form-group {
    margin-bottom: 10px;
}

.member-singin .code-box .code-img {
    text-align: right;
    margin-bottom: 25px;
}

.member-singin .code-box .code-img div {
    display: inline-block;
    width: 100px;
    height: 25px;
    background-color: #ccc;
}

.member-singin-old .member-box button {
    margin: 20px auto;
}


/* google的按鈕 不能用 */
/* .S9gUrf-YoZ4jf:before{
    content: "Google 登入";
    position: absolute;
    background-color: #cf2121;
    width: 98%;
    left: 0;
    height: 100%;
    z-index: 5;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
}

.S9gUrf-YoZ4jf:before:hover{
    opacity: 0.9;
}

.qJTHM div#container{
    width: 100%;
    transform: translateX(10px);
    opacity: 0;
} */

/* 0417 */
.member-box button:nth-child(3) {
    /* background-color: #1a73e8; */
}

/* 0417 */
.member-box button:nth-child(4) {
    /* background-color: #5edf36; */
    /* margin-bottom: 20px; */
}



/* 0417 */
.member-singin .member-box button:nth-child(1) {
    padding: 10px 0;
}

.member-singin .btn-box .phone {
    float: left;
    width: 49%;
    margin-top: 0;
    margin-bottom: 15px;
    height: 52px;
}

.member-singin .btn-box .old {
    float: right;
    width: 49%;
    margin-top: 0;
    margin-bottom: 15px;

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

.member-singin .btn-box .old p {
    font-size: 12px;
}

.member-singin .btn-box .circle-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    float: left;
    width: 100%;
    margin-bottom: 10px;

    border-top: 1px dashed #B9CCDF;
    padding: 0 5px;
    padding-top: 15px;

    text-align: left;
}

.member-singin .btn-box .circle-btn p {
    width: 100%;
    margin-bottom: 5px;
}

.member-singin .btn-box .circle-btn button {
    border-radius: 100px;
    width: 40px;
    height: 40px;
    margin: 0px 10px;
    margin-bottom: 5px;
}

.member-singin .btn-box .circle-btn button.fb {
    background-color: #1a73e8;
}

.member-singin .btn-box .circle-btn button.line {
    background-color: #5edf36;
}

.member-singin .btn-box .circle-btn button img {
    width: 30px;
}

/* 0417 */




/* 0417 */
@media (min-width: 576px) {

    .member-singin .btn-box button:nth-last-child(2) {
        /* float: left; */
        /* width: 49%; */
        /* margin-bottom: 15px; */
    }

    .member-singin .btn-box button:nth-last-child(1) {
        /* float: right; */
        /* width: 49%; */
        /* margin: 0; */
        /* margin-bottom: 10px; */
        /* margin-bottom: 15px; */
        /* display: flex; */
        /* align-items: flex-end; */
        /* justify-content: center; */
    }

    .member-singin .btn-box .circle-btn {
        /* width: 50%; */
    }

    .member-singin .btn-box button:nth-child(3) p {
        /* margin-left: 5px; */
        /* margin-bottom: 1px; */
    }

    .member-singin .btn-box .circle-btn p {
        width: initial;
    }

    .member-singin .btn-box .circle-btn button {
        margin-bottom: 0px;
    }
}

/* 0628 新增 登入頁按鈕修改 */







/* 套票頁 package-list */

/* 標題 選票按鈕 */
.package-list .title-box h1 {
    font-size: 18px;
    padding-left: 18px;
    margin: 20px 0;
    background-image: url(../img/icon-circle.png);
    background-repeat: no-repeat;
    background-position: left 2px;
}

/* 0701 */
.package-list .month-btn {
    position: absolute;
    top: -40px;
    z-index: 55;
}

.package-list .main-box .btn-box {
    margin-bottom: 30px;
}

/* 0701 */
.package-list .btn {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 15px;
}

.package-list .btn button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
    padding: 3px 0px;
    padding-top: 5px;
    margin: 0 5px;
    margin-bottom: 10px;
    width: 85px;

    background-position: 15px center;
    transition: 0.3s;
}

.package-list .btn.all button {}

.package-list .btn button img {
    width: 50px;
}

/* 0701 */
/* .package-list .month-btn .btn button{
    width: initial;
    padding: 3px 10px;
} */

.package-list .btn button:focus {
    outline: none;
}

.package-list .btn .btnadd {
    background-color: #354f61;
    color: #fff;
    box-shadow: inset 2px 2px 3px #00000016, 1px 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #d6dbe1;
}

.package-list .btn.area-btn .btnadd {
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 12px;
    padding-left: 10px;

    background-color: #f06200;
    color: #fff;

    box-shadow: inset 2px 2px 3px #ffffff16, 1px 1px 4px rgba(0, 0, 0, 0.05);
}

.package-list .btn.card-btn .btnadd {
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 10px;
    padding-left: 10px;

    background-color: #F58635;
    color: #fff;

    box-shadow: inset 2px 2px 3px #ffffff16, 1px 1px 4px rgba(0, 0, 0, 0.05);
}

.package-list .tag {
    /* display: flex; */
    /* flex-wrap: wrap; */
}

.package-list .tag .line {
    margin: 10px 5px;
    background-color: #354f61;
    height: 15px;
    width: 1px;
}

.package-list .btn.card-btn::before {
    content: "";
    display: inline-block;
    margin: 10px 5px;
    background-color: #354f61;
    height: 15px;
    width: 1px;
    display: none;
}

.package-list .title-box .btn-box button img {
    width: initial;
}

.package-list .main-box {
    /* transform: translateY(15px); */
    min-height: 800px;
}

/* 輪播 box */
.package-list .carousel-box,
.package-list .carousel-box-2 {
    display: flex;
    position: relative;
}

.package-list .carousel,
.package-list .carousel-2 {
    width: 100%;
    opacity: 0;
}

.package-list .carousel.show,
.package-list .carousel-2.show {
    opacity: 1;
}

.package-list .box {
    position: relative;
}

.package-list .box>img {
    width: 95%;
    border-radius: 10px;

    position: relative;
    z-index: 3;
}

.package-list .box .text-box {
    background-color: #fff;
    margin-left: 20px;
    padding: 10px;
    padding-top: 100px;
    border-radius: 10px;
    transform: translateY(-80px);
    overflow: hidden;
}

.package-list .carousel .box .text-box {
    min-height: 230px;
}

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

.package-list .box .text-box h2 {
    font-size: 18px;
    text-align: left;

    color: #010101;
}

.package-list .box .text-box img {
    width: initial;
}

.package-list .box .text-box .price {
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
}

.package-list .box .text-box .price p:nth-child(1) {
    color: #838383;
    font-size: 14px;
    text-decoration: line-through;
    padding-right: 5px;
}

.package-list .box .text-box .price p:nth-child(2) {
    color: #173042;
    font-size: 16px;
}

.package-list .box .text-box .price p:nth-child(3) {
    color: #FC6B53;
    font-size: 20px;
    font-weight: 600;
    margin-left: 5px;
}

.package-list .box .shopping-cart {
    position: absolute;
    right: -80px;
    bottom: -80px;

    width: 150px;
    height: 150px;
    background-color: #FCD5B8;
    border-radius: 150px;

    transition: 0.3s;
}

.package-list .box .shopping-cart img {
    position: absolute;
    top: 30px;
    left: 28px;
}

.package-list .box .shopping-cart:hover {
    right: -75px;
    bottom: -75px;
    box-shadow: -1px -1px 4px rgba(255, 0, 0, 0.1)
}


/* 點點數字 */
.package-list .carousel-box .slick-slide {
    text-align: center;
    height: initial;
}

.carousel>div:nth-child(2) .slick-slide {
    padding-right: 28px;
}

.carousel-2>div:nth-child(2) .slick-slide {
    padding-right: 28px;
}

.package-list .package-nav-first,
.package-list .package-nav-first-2,
.package-list .package-nav-second,
.package-list .package-nav-third {
    top: -62px;
    font-weight: 600;
}

.package-list .total {
    transform: translateX(18px) translateY(-80px);
    text-align: center;
}

.package-list .total p {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    position: relative;
}

.package-list .total p::before {
    content: "";
    display: block;
    height: 18px;
    width: 1px;
    background-color: #000;
    transform: rotate(30deg);

    position: absolute;
    top: 0px;
    left: -12px;
}

/* 向右邊按鈕 */
.package-list .slick-prev {
    z-index: -1;
}

.package-list .slick-next {
    background: linear-gradient(to right, transparent 0%, transparent 10%, #fff 100%);
    width: 20vw;
    border-radius: 20px;
    right: 0;
    top: initial;
    bottom: -6px;
    box-shadow: 1px 1px 4px rgba(219, 219, 219, 0.1);
    z-index: 99;
}

.package-list .slick-next:before {
    content: ">";
    color: #BB2525;
    width: initial;
    height: initial;
    text-align: right;
    padding-right: 8px;
    padding-bottom: 2px;
    font-size: 18px;
}

section.main-box {
    min-height: 500px;
}

/* 熱門套票 */
/* .package-list .hot-package{
    transform: translateY(-40px);
}

.package-list .hot-package h3{
    font-size: 18px;
    padding-left: 22px;
    margin: 20px 0;
    margin-top: 0;
    background-image: url(../img/icon-star.png);
    background-repeat: no-repeat;
    background-position: left -2px;
}

.package-list .hot-package .box .text-box{
    width: 100%;
    margin-left: 0px;
    padding: 20px 10px;
    transform: translateY(0px);
    display: flex;
}

.package-list .hot-package .text-box > img{
    display: none;
} */


.package-list .main-box .row {
    /* display: none; */
}



@media (min-width: 576px) {

    /* 0701 */
    .package-list .month-btn .btn button {
        width: 85px;
        /* padding: 3px 15px; */
    }

    .package-list .btn button {
        margin: 0 10px;
        width: 90px;
    }
}

@media (min-width: 768px) {
    .package-list .container {
        width: 540px;
    }

    /* 0523 新增 */
    .package-list .slick-slide {
        padding: 0 10px;
    }

    /* 0615 新增 */
    .package-list .carousel-2 {
        margin-top: 25px;
    }

    /* 0701 */
    .package-list .month-btn {
        top: -20px;
    }

    /* .package-list .btn{
        margin-bottom: 15px;
    } */
}

@media (min-width: 992px) {

    .package-list .container {
        width: 100%;
    }

    .package-list .hot-package {
        transform: translateY(-50px);
    }

    .package-list .hot-package .text-box>img {
        display: block;
        width: 250px;
        border-radius: 10px;
        margin: 0 10px;
        margin-right: 20px;
    }


    .package-list .tag {
        display: flex;
        flex-wrap: wrap;
    }

    .package-list .btn.card-btn::before {
        display: inline-block;
    }
}


/* 套票內頁 package-main */
.package-main .main .img-box {
    margin-top: 30px;
    margin-left: 15px;
    position: absolute;
    z-index: 5;
}

.package-main .main .img-box img {
    border-radius: 10px;
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.05));
    height: 150px;
}

.package-main .main .box {
    padding-top: 100px;
}

.package-main .title-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    padding-top: 100px;
}

.package-main .box h1 {
    font-size: 18px;
}

.package-main .box h1+img {
    width: initial;
}

.package-main .box .price {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 10px;
}

.package-main .box .price p:nth-child(1) {
    color: #838383;
    font-size: 16px;
    text-decoration: line-through;
    padding-right: 5px;
}

.package-main .box .price p:nth-child(2) {
    color: #FC6B53;
    font-size: 22px;
    transform: translateY(2px);
}

.package-main .box .price p:nth-child(3) {
    color: #FC6B53;
    font-size: 40px;
    font-weight: 600;
    transform: translateY(6px);
}

.package-main .box hr {
    border-color: #fff;
    margin: 12px 12px;
}

.package-main .text-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
}

.package-main .text-box h2 {
    font-size: 20px;
    text-align: center;
    font-weight: 300;

    border-bottom: 1px dashed #B9CCDF;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.package-main .box .text {
    line-height: 1.8;
}

.package-main .text-box hr {
    border-top: 1px dashed #B9CCDF;
    margin: 12px 0;
}

.package-main .btn-box {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.package-main .box button {
    background-color: #173042;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 10px;
    padding: 2px 35px;
    padding-top: 4px;
}

.package-main .title-box hr {
    border-top: 1px dashed #B9CCDF;
    margin: 12px 0;
}

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

.package-main .main-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.package-main .main-box li div:nth-child(1) {
    font-size: 18px;
}

.package-main .main-box li>div:nth-child(2) {
    border: 1px solid #173042;
    padding: 2px 10px;
    border-radius: 10px;
}

.package-main .main-box li.total>div:nth-child(2) {
    height: 38px;
    padding: 2px 0;
}

.package-main .title-box .main-box li .count {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
}

.package-main .main-box li .count div {
    background-color: #173042;
    color: #fff;
    width: 30px;
    padding: 1px 0px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    padding-top: 4px;
}

.package-main .main-box li .count .num {
    font-size: 16px;
    background-color: #fff;
    color: #000;
    width: 60px;
    padding: 2px;
    line-height: 30px;
}

.package-main .main-box li .count div:hover {
    opacity: 0.8;
}

.package-main .main-box li .count .num:hover {
    opacity: 1;
}

.package-main .title-box .main-box .total div:nth-child(2) {
    border: none;
    color: #FC6B53;
    font-weight: 600;
}

.package-main .title-box .main-box .total span {
    font-size: 28px;
}

.package-main .btn-web {
    display: none;
}

.package-main .title-box h1 {
    margin-top: 25px;
}

.package-main .title-box>h1 {
    margin-top: 0;
}

.package-main .form-group {
    margin-bottom: 20px;
}

.package-main .form-group.form-check-box {
    display: flex;
}

.package-main .form-check-inline {
    flex-grow: 1;
}


@media (min-width: 768px) {

    .package-main .container {
        width: 540px;
    }
}

@media (min-width: 992px) {

    .package-main .container {
        width: 992px;
        position: relative;
    }

    .package-main .main .box {
        display: flex;
        align-items: flex-start;
    }

    .package-main .title-box {
        order: 2;
        flex-basis: 35%;
        margin-left: 20px;
        margin-top: 100px;
    }

    .package-main .text-box {
        flex-basis: 65%;
    }

    .package-main .btn-web {
        display: block;
    }

    .package-main .btn-app {
        display: none;
    }

    .package-main .main .img-box {
        right: 26px;
        margin-top: 100px;
    }

    .package-main .main .img-box img {
        height: 180px;
    }
}

@media (min-width: 1200px) {

    .package-main .title-box {
        margin-top: 110px;
    }

    .package-main .main .img-box img {
        height: 187px;
    }
}




/* 套票付款 package-pay */

/* 共用 */
.pay .pay-box {
    margin-top: 100px;
}

.pay .pay-box .box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
}

.pay h1 {
    font-size: 20px;
    font-weight: 300;
    margin: 0;
}

.pay hr {
    margin: 12px 15px;
    border-color: #fff;
}

.pay .box hr {
    margin: 8px 0;
    border-top: 1px dashed #E0E7EE;
}

.pay p {
    font-size: 16px;
}

.pay span {
    color: #BB2525;
    font-size: 14px;
}

/* 付款資訊 */
.package-pay .card-number {
    display: flex;
    flex-wrap: wrap;
}

.package-pay .card-number p {
    font-size: 18px;
    margin-right: 5px;
}

.package-pay .card-number+.form-group {
    margin: 20px 0;
    margin-bottom: 10px;
}

.package-pay .card-number+.form-group div {
    display: flex;
    align-items: center;
}

.package-pay .card-number+.form-group .form-control {
    width: 150px;
    height: initial;
    padding: 2px 5px;
    padding-left: 10px;
    margin-right: 10px;
}

/* 付款方式 */
.pay .form-check-box {
    margin: 0;
    display: flex;
}

.pay .form-check {
    margin: 10px 0;
    flex-grow: 1;
    flex-basis: 100px;
}

.pay input[type=radio]:checked:before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 20px;
    background-color: #173042;
    position: absolute;
    top: 8px;
    left: 2px;
}

/* 付款總結區 */
.pay .title-box {
    overflow: hidden;
    margin: 15px 0;
}

.pay .title-box h1 {
    float: left;
    font-size: 18px;
}

.pay .title-box p {
    float: right;
    margin-top: 5px;
    margin-left: 10px;
}

.package-pay .points {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.package-pay .points+.form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.package-pay .points+.form-group .form-control {
    width: 88%;
    height: initial;
    padding: 2px 5px;
}

.package-pay .points+.form-group .form-control::placeholder {
    color: #E0E7EE;
}

.package-pay .points+.form-group button {
    background-color: transparent;
    border: none;
    padding: 0;
}

.package-pay .points+.form-group button:focus {
    outline: none;
}

.package-pay .points+.form-group img {
    width: initial;
}

.package-pay .coupon {
    overflow: hidden;
    display: none;
    transition: 0.3s;
}

.package-pay .couponadd {
    display: block;
}

.package-pay .coupon p:nth-child(1) {
    float: left;
}

.package-pay .coupon p:nth-child(2) {
    float: right;
    margin-left: 10px;
}

.pay .total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 20px 0;
}

.pay .total p:nth-last-child(1) {
    color: #F58635;
    font-size: 20px;
    font-weight: 600;
}

/* 按鈕 */
.pay .btn-box {
    text-align: center;
    margin: 20px 0;
}

.pay .btn-box button {
    background-color: #173042;
    color: #fff;
    font-weight: 500;
    border: none;
    border-radius: 10px;
    padding: 2px 35px;
    padding-top: 4px;
}

.pay .btn-box+p {
    font-size: 14px;
}

@media (min-width: 576px) {

    .pay .container {
        width: 540px;
    }

    .package-pay .card-number+.form-group .form-control {
        width: 45%;
    }

    .package-pay .points+.form-group .form-control {
        width: 92%;
    }
}

/* 卡片審核通過後的付款 */
.package-pay-2 .flex-box {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.package-pay-2 .flex-box .form-control {
    width: 50%;
    height: initial;
    padding: 2px 5px;
}

.package-pay-2 .station {
    display: none;
}

.package-pay-2 .send {
    display: none;
}

.package-pay-2 .stationadd {
    display: block;
}

.package-pay-2 .sendadd {
    display: block;
}

.package-pay-2 .send .form-group .form-control::placeholder {
    color: #E0E7EE;
}

.package-pay-2 .freight {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}



/* 旅遊推薦 列表頁 travel-list 圖文列表 travel-list-2 內容頁 travel-main */

/* 頁碼 */
.page {
    margin-top: 50px;
}

.page ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.page ul li a {
    border-radius: 50px;
    padding: 5px 10px;
    margin: 5px;
    color: #173042;
    font-size: 18px;
}

.page ul li a:hover {
    text-decoration: none;
    background-color: #173042;
    color: #fff;
}

.page ul li .page-active {
    background-color: #173042;
    color: #fff;
}

.page ul .page-active a {
    background-color: #173042;
    color: #fff;
}

.travel .travel-list-box,
.travel .travel-main-box {
    margin-top: 50px;
}

.travel .travel-list-box .box,
.travel .travel-main-box .box {
    background-color: #fff;
    padding: 15px;
    padding-top: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 5%);
}

.travel .title-box h1 {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 10px;
    line-height: 1.7rem;
}

.travel hr {
    border-top: 1px dashed #E0E7EE;
    margin: 0;
}

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

.travel-list .list-box li a {
    display: block;
    color: #173042;
    padding: 20px 0;

    border-bottom: 1px dotted #ebebeb;
}

.travel-list .list-box li:nth-child(3n) a {
    border-bottom: 1px dashed #e1dede;
}

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

.travel-list .list-box li a:hover {
    font-weight: 600;
    text-decoration: none;
}

.travel-list .list-box li a p {
    flex-grow: 1;
    flex-basis: 120px;
}

.travel-list .list-box li a .time {
    flex-grow: 0;
    padding-bottom: 5px;
}

/* 圖文列表頁 travel-list-2 */
/* 跑馬燈 */
.travel-list-2 .marquee-box {
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    overflow: hidden;
    height: 40px;
    align-items: center;
}

.travel-list-2 .marquee-box .img-box {
    padding: 10px 8px;
    padding-left: 12px;
    height: 100%;
    box-shadow: 1px 0px 5px #E0E7EE;
}

.travel-list-2 .marquee-box .img-box img {
    transform: rotate(-10deg);
    width: 85%;
}

/* 分隔線 */
.travel-list-2 hr {
    border-top: 1px solid #fff;
    margin: 12px;
}

.travel-list-2 .box hr {
    border-top: 1px dashed #E0E7EE;
    margin: 0;
}

.travel-list-2 .container .box {
    padding: 25px;
}

.travel .travel-list-2 .container .box.title-box {
    padding: 10px 30px;
    padding-top: 23px;
    margin-bottom: 15px;
}

.travel-list-2 .box .row .hot {
    background-color: #F58635;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 2px 12px;
    padding-top: 3px;
    border-radius: 10px;
    border: 1px dashed #bb25253c;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);

    position: absolute;
    right: 30px;
    top: -3px;
    z-index: 55;
}

.travel-list-2 .box .row a {
    display: block;
    margin: 10px 0;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.travel-list-2 .box .row a:hover .img-box::before {
    background: none;
}

.travel-list-2 .box .row a:hover h2 {
    background-color: #7188a09b;
}

.travel-list-2 .box .row .img-box::before {
    content: '';
    background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(165, 165, 165) 80%);
    width: 100%;
    height: 100%;
    position: absolute;
}

.travel-list-2 .box .row .img-box img {
    opacity: 0.8;
}

/* 0721 */
.travel-list-2 .box .row h2 {
    font-size: 18px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #28282887;
    width: 100%;
    line-height: 25px;
    text-align: center;
    padding: 10px;
}

@media (min-width: 576px) {

    .travel-list-2 .box .row .hot {
        font-size: 16px;
        padding: 3px 15px;
        padding-top: 4px;
        top: -5px;
    }

    .travel-list-2 .box .row .img-box {
        height: 240px;
    }

    .travel-list-2 .box .row .img-box img {
        height: 100%;
        width: initial;
    }

    .travel-list-2 .box .row h2 {
        font-size: 20px;
    }
}

@media (min-width: 768px) {

    .travel-list-2 .title-box {
        margin-bottom: 30px;
    }

    .travel .travel-list-2 .container .box.title-box {
        padding: 10px 45px;
        padding-top: 20px;
    }

    .travel-list-2 .box .row .img-box {
        height: 270px;
    }
}




/* 旅遊內文頁 */
.travel-main .title-box {
    overflow: hidden;
}

.travel-main .title-box .share-box {
    display: flex;
    align-items: center;
    float: right;
    margin-bottom: 5px;
}

.travel-main .title-box .share-box .share {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 5px;
    transform: translateY(-2px);
}

.travel-main .title-box .share-box .share li {
    margin-left: 5px;
}

.travel-main .title-box .share-box .share li a svg {
    width: 25px;
    height: 25px;
}

.travel-main .title-box .share-box .share li a:hover path {
    fill: #F58635;
}

/* 輪播 */
.travel.travel-main .single-item .box {
    padding: 20px 0;
    padding-bottom: 10px;
    box-shadow: none;
    margin-bottom: 20px;
    background-color: transparent;
}

.travel-main .single-item .box .img-box {
    border-radius: 10px;
    overflow: hidden;
}

.travel-main .slick-prev {
    z-index: -1;
}

.travel-main .slick-next {
    background: linear-gradient(to right, transparent 0%, transparent 10%, #E4EAF0 100%);
    width: 20vw;
    border-radius: 20px;
    right: 0;
    top: initial;
    bottom: -15px;
    box-shadow: 1px 1px 4px rgba(219, 219, 219, 0.1);
    z-index: 99;
}

.travel-main .slick-next:before {
    content: ">";
    color: #F58635;
    width: initial;
    height: initial;
    text-align: right;
    padding-right: 8px;
    padding-bottom: 2px;
    font-size: 18px;
}

.travel-main .text-box {
    margin: 25px 0;
}

.travel-main .text-box p {
    line-height: 2rem;
}

.travel-main .download-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    padding-top: 20px;
    margin: 20px 0;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 5%);
}

.travel-main .download-box h2 {
    font-size: 20px;
    font-weight: 300;
    border-bottom: 1px dashed #B9CCDF;
    padding-bottom: 5px;
}

.travel-main .download-box .download {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.travel-main .download-box .download a {
    display: block;
    color: #173042;
    padding: 5px 10px;
}

.travel-main .download-box .download a:hover {
    text-decoration: none;
    background-color: #EFF3F6;
    border-radius: 10px;
}



@media (min-width: 576px) {

    .travel .travel-list-box,
    .travel .travel-main-box {
        margin-top: 100px;
    }

    .travel-list .list-box li a {
        display: flex;
    }
}

@media (min-width: 768px) {

    .travel .travel-list-box .box,
    .travel .travel-main-box .box {
        padding: 40px;
    }

    .travel-main .download-box {
        padding: 30px 40px;
        padding-bottom: 10px;
    }

    .travel-main .title-box .share-box .share li a svg {
        width: 30px;
        height: 30px;
        margin-left: 5px;
    }

    .travel .page {
        margin-top: 70px;
    }
}

@media (min-width: 992px) {

    .travel .container {
        max-width: 992px;
    }

    .travel-main .single-item.slick-initialized.slick-slider {
        width: 65%;
        margin: 30px auto;
    }
}

@media (min-width: 1200px) {

    .travel .container {
        max-width: 1200px;
    }
}




/*　會員中心 */
.member .container .btn-box {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    position: relative;
    z-index: 99;
    margin-top: 20px;
}

.member .btn-box li {
    flex-grow: 1;
    flex-basis: calc(100% / 3);
    padding-right: 10px;
}

/* 0411 */
.member .btn-box li button {
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 5px 0;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    height: 92%;
    justify-content: space-evenly;
}

.member .btn-box li button.active {
    background-color: #f1f8ff76;
    box-shadow: inset 2px 2px 3px #00000016, 1px 1px 4px rgb(0 0 0 / 5%);
    border: 1px solid #d6dbe1;
}

.member .btn-box li button img {
    width: initial;
}

.member .bg-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
}

.member .container .bg-box:nth-child(2) {
    margin-top: 20px;
}

.member .bg-box h1 {
    font-size: 20px;
    color: #173042;
    font-weight: 300;
    margin: 0;
}

.member hr {
    margin: 12px 15px;
    border-color: #fff;
}

.member .bg-box hr {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 18px;
    border-bottom: 1px dashed #E0E7EE;
}

.member .text-box {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

.member .text-box li {
    margin: 15px 0;
    overflow: hidden;
}

.member .text-box li:nth-last-child(1) {
    margin-bottom: 0;
}

.member .text-box li>div {
    margin: 5px 0;
}

.member .text-box li div:nth-child(1) {
    float: left;
    margin-right: 10px;
    color: #212529;
}

.member .text-box li div:nth-last-child(1) {
    float: right;
}

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

.member .box button {
    margin-left: 10px;
    font-size: 14px;
    color: #fff;
    background-color: #173042;
    font-weight: 300;
    border: none;
    border-radius: 10px;
    padding: 2px 15px;
    padding-top: 4px;
}

.member label {
    margin-bottom: 0;
}

.member .form-control {
    width: 190px;
    height: initial;
    padding: 3px 5px;
    font-size: 14px;
}

.member .form-control::placeholder {
    color: #E8E8E8;
}

.member .notice-box {
    font-size: 14px;
}

.member .notice-box span {
    color: #BB2525;
    margin-top: 2px;
}

.member .done-btn {
    text-align: center;
}

.member .done-btn button {
    background-color: #173042;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 2px 50px;
    padding-top: 5px;
    border: none;
    border-radius: 30px;
    margin-top: 24px;
}

/* 0721 */
.member .search-box .search {
    display: flex;
    align-items: center;
}

.member .search-box .search .form-control {
    padding: 0 1px;
    width: 45%;
}

.member .search-box .search p {
    font-size: 18px;
    padding: 5px;
}

.member .search-box .box {
    display: block;
    text-align: right;
}

.member .search-box .box button {
    background-color: #173042;
    color: #fff;
    padding: 2px 15px;
    padding-top: 5px;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
}

.member .result-box,
.member-record .bg-box+hr {
    display: none;
}

.member .main .result-boxadd {
    display: block;
}

.member .result p {
    margin-bottom: 15px;
}

.member .result .text-box {
    border-top: 1px dashed #E0E7EE;
    padding-top: 10px;
}

.member .result .text-box li {
    margin: 0;
}

.member .result .text-box li div:nth-last-child(1),
.member-card-information-main .text-box li div:nth-last-child(1) {
    color: #BB2525;
}

.member .code-box {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
}

.member .main .code-box .codeadd {
    display: flex;
}

.member .code-box .form-control {
    margin: 5px 0;
    display: none;
}

.member .code-box .send-code {
    display: none;
}

.member .text-box .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin: 0;
    position: relative;
    z-index: 99;
}

.member .name-box div {
    border: 1px solid;
    border-color: transparent;
    padding: 0px 15px;
    border-radius: 5px;
}

.member .name-box .finish {
    display: none;
}

.member .text-box .point-exchange {
    font-size: 14px;
    color: #B9CCDF;
    border: 1px solid #B9CCDF;
    border-radius: 5px;
    padding: 2px 6px;
    margin-left: 5px;
}

.member-card-information-main .text-box li img {
    width: 80%;
    border-radius: 10px;
    margin-bottom: 5px;
}


/* 會員資料 */
.member .main .phone-change {
    flex-direction: column;
    align-items: flex-end;
}

.member .main li .phone-change div {
    display: flex;
    margin-right: 0;
}

.member .main .phone-change .phone .form-control {
    border-radius: 0 5px 5px 0;
}

.member .main .phone-change .phone .form-control:nth-child(1) {
    width: 32%;
    border-radius: 5px 0 0 5px;
}

.member .main .password-change button {
    margin-top: 10px;
}

.member .main .password-change {
    flex-direction: column;
    align-items: flex-end;
}

/* 會員資料 */


/* member-order */
/* 按鈕們 */
.member-order .box .btn-more {
    background-color: #F58635;
    padding: 1px 10px;
    padding-top: 2px;
}

.member-order .box button span {
    display: inline-block;
    height: 12px;
    font-size: 10px;
    transform: translateY(3px);
}

.member-order .text-box .order-btn {
    display: flex;
    justify-content: flex-end;
}

.member-order .content .ticket-number button {
    padding: 2px 10px;
    padding-top: 4px;
    background-color: #B9CCDF;
}

.member-order .content .ticket-number button span {
    transform: translateY(0px);
    height: 10px;
}

.member-order .content button:focus {
    outline: none;
}

.member-order .text-box li:nth-child(1) {
    margin: 5px 0;
}

.member-order .text-box li div p {
    display: inline-block;
    border: 1px solid #B9CCDF;
    border-radius: 20px;
    padding: 0px 10px;
    color: #7188A0;
    margin-left: 5px;
    float: right;
}

.member-order .content li {
    margin: 5px 0;
}

.member-order .detail {
    padding-left: 50%;
}

.member-order .text-box .detail li {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color: #7188A0;
    margin-right: 42px;
}

.member-order .content {
    display: none;
}

.member-order .contentadd {
    display: block;
}

.member-order .detail-box {
    display: none;
}

.member-order .detail-boxadd {
    display: block;
}

.member-order .box button span.spanadd {
    transform: rotate(180deg);
}


/* 我的套票的訂單詳情內頁 member-order-main */
.member-order-main .text-box li div:nth-child(2) {
    color: #7188A0;
}

.member-order-main .text-box .title {
    margin-top: 5px;
}

.member-order-main .text-box .title div:nth-child(2) {
    color: #173042;
}

.member-order-main .main .text-box .circle-border {
    color: #F58635;
    border: 1px solid #FFBF2A;
    border-radius: 20px;
    padding: 2px 15px;
}

.member-order-main .main .text-box .total {
    color: #F58635;
    font-weight: 600;
    font-size: 18px;
}

.member-order-main .main .text-box .qr-box {
    text-align: center;
    position: relative;
    margin-right: 0;
    width: 100%;
}

.member-order-main .text-box .qr-box img {
    width: 30%;
    opacity: 0.7;
    margin: 0 auto;
}

.member-order-main .text-box .qr-box p {
    background-color: #7188A0;
    color: #fff;
    padding: 3px 30px;
    padding-top: 5px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.member-order-main .main .text-box .single-item .slick-track {
    float: none;
    margin: 0 auto;
}

.member-order-main .main .text-box .single-item .slick-list {
    float: none;
}

.member-order-main .slick-prev {
    left: 0;
    z-index: 55;
}

.member-order-main .slick-prev:before {
    content: '<';
    width: 30px;
    height: 30px;
    border-radius: 0 30px 30px 0;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}

.member-order-main .slick-next {
    right: 10px;
    z-index: 55;
}

.member-order-main .slick-next:before {
    content: '>';
    width: 30px;
    height: 30px;
    border-radius: 30px 0 0 30px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}

.member-order-point .text-box .title {
    margin-top: 5px;
}

/* 卡片資料 修改 */
.member-card-information .text-box .title-box {
    display: block;
}

.member-card-information .title-box .box button {
    margin: 7px 0px;
    margin-left: 10px;
}

/* 套票兌換 修改 */
.member-coupon .main .bg-box h2 {
    /* display: inline-block; */
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 0;
}

.member-coupon .bg-box hr {
    margin: 5px 0;
}

.member-coupon .main .bg-box .coupon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    margin-top: 30px;
    padding: 30px;
    border-radius: 10px;
    max-width: 350px;
    background-color: #e0e7ee9a;
}

.member-coupon .main .bg-box .coupon-box input {
    margin: 15px 0;
    border: none;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    width: 100%;
}

.member-coupon .coupon-box button {
    background-color: #173042;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    padding: 2px 20px;
    padding-top: 5px;
    border: none;
    border-radius: 10px;
    /* margin-left: 10px; */
    margin-top: 5px;
}

/* 0620 新增 套票頁 時數票 修改輪播　增加按鈕  ↓ */
.member-order-main .single-item ul.slick-slide {
    padding: 0;
}

.member-order-main .slick-prev,
.member-order-main .slick-next {
    top: 12%;
}

.member .text-box li.btn-box {
    text-align: center;
    float: initial;
    display: block;
}

.member .text-box li.btn-box button {
    background-color: #F58635;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    width: 100px;
    padding: 2px 0px;
    padding-top: 5px;
    border: none;
    border-radius: 10px;
    margin: 10px 10px;
}

.member .text-box li.btn-box button:hover {
    background-color: #173042;
}

.member .text-box li.btn-box button:focus {
    outline: none;
}

@media (min-width: 576px) {

    .member-order-main .slick-prev,
    .member-order-main .slick-next {
        top: 20%;
    }

    .member .text-box li.btn-box button {
        width: 120px;
        padding: 2px 0px;
        padding-top: 5px;
        margin: 10px 20px;
    }
}

/* 0620 新增 套票頁 時數票 修改輪播　增加按鈕  ↑ */


@media (min-width: 768px) {

    /* 0428 */
    .member .container {
        /* max-width: 800px; */
        width: 800px;
    }

    .member .container .btn-box {
        float: left;
        flex-direction: column;
    }

    .member .btn-box li button {
        justify-content: center;
        width: 130px;
        height: 90px;
        margin: 0;
        margin-bottom: 15px;
    }

    .member .btn-box li button img {
        margin-bottom: 5px;
    }

    .member .main {
        float: right;
        width: 80%;
        margin-top: 20px;
    }

    .member .main .bg-box {
        padding: 20px 30px;
    }

}


/* 其他說明 member-other */
.member-other .member-box {
    position: relative;
    z-index: 55;
}

.member-other .member-box .btn-box {
    display: flex;
    justify-content: space-between;
}

.member-other .member-box .btn-box button {
    flex-grow: 1;
    font-weight: 300;
    background-color: #fff;
    color: #000;
    border: none;
    font-size: 14px;
}

.member-other .member-box .btn-box button:nth-child(2) {
    margin: 20px 10px;
}

.member-other .member-box .btn-box button:focus {
    outline: none;
}

.member-other .member-box .btn-box button.active {
    background-color: #f1f8ff76;
    box-shadow: inset 2px 2px 3px #00000016, 1px 1px 4px rgb(0 0 0 / 5%);
    border: 1px solid #d6dbe1;
}

.member-other .main-box .main {
    display: none;
}

.member-other .main-box .main.show {
    display: block;
}


/* 問答 */
/* 問答切換 */
.member-other .qa-btn {
    display: flex;
}

.member-other .qa-btn button {
    flex-grow: 1;
    font-weight: 300;
    background-color: #fff;
    color: #000;
    border: none;
    font-size: 14px;
    margin-right: 10px;
}

.member-other .qa-btn button:nth-last-child(1) {
    margin-right: 0;
}

.member-other .qa-btn button.qa-active {
    background-color: #f1f8ff76;
    box-shadow: inset 2px 2px 3px #00000016, 1px 1px 4px rgb(0 0 0 / 5%);
    border: 1px solid #d6dbe1;
}

.member-other .qa-btn button:focus {
    outline: none;
}

.member-other .qa {
    list-style: none;
    padding: 0;
    width: 100%;
    display: none;
}

.member-other .qa.show {
    display: block;
}

.member-other .box {
    margin: 15px 0;
}

.member-other .qa .box h2 {
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
    margin: 0;
}

.member-other .qa .box h2 span {
    border: 1px solid #BB2525;
    border-radius: 15px;
    color: #F58635;
    padding: 2px 15px;
    margin-right: 5px;
}

.member-other .qa .box .answer hr {
    margin: 10px 0;
}

.member-other .qa .box .answer p {
    font-size: 14px;
}

.member-other .qa .box .answer {
    display: none;
}

/* 服務條款 */
.member-other .serve .box.title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

.member-other .serve .box h2 {
    font-size: 20px;
    font-weight: 300;
    margin: 0;
}

.member-other .serve .box.title-box p {
    font-size: 14px;
}

.member-other .serve .btn-box {
    display: flex;
    justify-content: flex-end;
}

.member-other .serve .btn-box .btn {
    background-color: #7188A0;
    color: #fff;
    width: initial;
    margin: 0;
    padding: 0px 12px;
    padding-bottom: 4px;
    font-size: 14px;
    border-radius: 20px;
    line-height: 15px;
    flex-grow: initial;
    cursor: pointer;
}

@media (min-width: 576px) {

    .member-other .qa .box h2 {
        font-size: 18px;
    }

    .member-other .qa .box .answer p {
        font-size: 16px;
    }

    .member-other .member-box .btn-box button {
        font-size: 16px;
    }
}

@media (min-width: 992px) {

    /* 0701 */
    .member-other .member-box .container {
        width: 720px;
    }
}

/* 其他說明 member-other ↑ */




/* 申請退款按鈕 彈跳視窗 ↓ */
.member-order-main .text-box {
    position: relative;
}

.member-order-main .text-box .refund-btn {
    position: absolute;
    bottom: -45px;
    right: 0;
    z-index: 55;
}

.member-order-main .text-box li.refund-btn button {
    background-color: #7188A0;
    width: initial;
    padding: 2px 15px;
    padding-top: 5px;
    margin: 0;
}

.member-order-main .text-box li.refund-btn button:hover {
    background-color: #8399b2;
    opacity: 1;
}

.refund-box .modal-body {
    padding: 20px 15px;
}

.refund-box .modal-body h2 {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    transform: translateY(2px);
}

.refund-box .modal-body p {
    font-size: 14px;
    margin-top: 5px;
}

.refund-box .modal-body input {
    width: 15%;
    margin-left: 10px;
}

.refund-box .modal-body button:hover {
    color: fff;
}

#staticBackdrop2 .modal-body {
    text-align: center;
}

#staticBackdrop2 .modal-body h2 {
    margin: 10px 0;
    margin-top: 15px;
}

#staticBackdrop2 .modal-body img {
    max-width: 150px;
}

#staticBackdrop2 .modal-body .btn-box {
    text-align: center;
}

/* 申請退款按鈕 彈跳視窗 ↑ */





/* qrcode使用中的頁面 qrcode-main ↓ */
.qrcode-main .main .container {
    margin-top: 50px;
}

.qrcode-main .main .box {
    background-color: #fff;
    padding: 20px 25px;
    border-radius: 10px;
}

.qrcode-main .main .box h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 300;
}

.qrcode-main .main .box h2 span {
    display: inline-block;
    font-size: 14px;
    border: 1px solid #173042;
    border-radius: 10px;
    padding: 2px 8px;
    margin-left: 5px;
    transform: translateY(-2px);
}

.qrcode-main .main hr {
    border-top: 1px solid #fff;
    margin: 12px;
}

.qrcode-main .main .box hr {
    border-top: 1px dashed #E0E7EE;
    margin: 10px 0;
}

/* QR扣 */
.qrcode-main .main .time-box {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px auto;
    margin-bottom: 8px;
}

.qrcode-main .main .time-box p {
    font-size: 14px;
    color: #173042;
    flex-basis: 30%;
    line-height: 50px;
    background-color: #F9F9F9;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
}

.qrcode-main .main .time-box .time {
    font-size: 30px;
    color: #FC6B53;
    flex-basis: 70%;
    letter-spacing: 2.5;
}

.qrcode-main .main .red-text {
    overflow: hidden;
}

.qrcode-main .main .red-text p {
    color: #BB2525;
    float: right;
    margin: 0px 5px;
    font-size: 14px;
}

.qrcode-main .main .qr-box {
    margin: 15px auto;
    width: 90%;
    text-align: center;
}

.qrcode-main .main .qr-box p {
    display: inline-block;
    margin-top: 15px;
    padding-left: 17px;
    font-size: 14px;
    color: #354F61;

    background-image: url(../img/f5-r.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 13px;
}

/* 詳細資訊 */
.qrcode-main .main .text-box {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qrcode-main .main .text-box hr {
    border-top: 1px dashed #e0e7ee8a;
    margin: 0px;
}

.qrcode-main .main .text-box li {
    overflow: hidden;
    margin: 20px 0;
}

.qrcode-main .main .text-box li:nth-last-child(1) {
    margin-bottom: 0px;
}

.qrcode-main .main .text-box li div {
    float: left;
}

.qrcode-main .main .text-box li div:nth-child(2) {
    float: right;
    margin-left: 10px;
}

.qrcode-main .main .text-box .red-color {
    color: #FC6B53;
}


/* 按鈕 */
.qrcode-main .main .text-box .btn {
    float: right;
    font-size: 12px;
    color: #6E6E6E;
    background-color: #F0F0F0;
    border-radius: 20px;
    padding: 1px 6px;
    cursor: pointer;
    margin: 5px 0;
}

.qrcode-main .main .text-box .btn:hover {
    opacity: 0.8;
}


@media (min-width: 576px) {

    .qrcode-main .container {
        max-width: 540px;
    }

    .qrcode-main .main .time-box {
        margin-bottom: 8px;
        width: 70%;
    }

    .qrcode-main .main .red-text p {
        margin-right: 70px;
    }

    .qrcode-main .main .qr-box {
        margin: 30px auto;
        width: 70%;
    }

    .qrcode-main .main .text-box .btn {
        font-size: 14px;
        padding: 2px 8px;
    }
}

/* qrcode使用中的頁面 qrcode-main ↑ */



/* 返回鍵按鈕 ↓ */
/* 0720 */
.back-btn {
    position: fixed;
    bottom: 75px;
    left: 5px;
    z-index: 999;

    width: 50px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* 0720 */
.back-btn button {
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
    /* padding: 8px 12px; */
    /* border-radius: 40px; */
    /* box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); */

    transform: translateY(4px);
}

@media (min-width: 768px) {
    .back-btn {
        bottom: 30px;
        left: 20px;
    }
}

@media (min-width: 992px) {
    .back-btn {
        display: none;
    }
}

/* 返回鍵按鈕 ↑ */




/* 0721 */
/* 停機公告 notice */

.notice .main {
    margin: 10px;
    position: relative;
}

.notice .text-box {
    background-color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    /* margin: 0 5px; */
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}

.notice .text-box img {
    border-radius: 10px;
    /* margin-bottom: 10px; */
}

@media (min-width: 992px) {

    .notice .text-box {
        display: flex;
        align-items: center;
        max-width: 990px;
        padding: 30px;
    }

    .notice .text-box img {
        width: 40%;
        margin-right: 30px;
    }

    .notice .text-box hr:nth-child(1) {
        display: none;
    }
}

/* 0725 */
/* 停機公告 notice-2 */

.notice-2 .text-box .text {
    /* text-align: center; */
}

.notice-2 .text-box .text img {
    width: 100px;
    display: block;
    /* text-align: center; */
    margin: 0 auto;
    margin-top: 10px;
}

.notice-2 .text-box p {
    text-align: right;
    margin-top: 10px;
}

.notice-2 .text-box .btn-box {
    display: flex;
    flex-wrap: wrap;
}

.notice-2 .text-box .btn-box button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 5px 10px;
    width: 46%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px;
    border-radius: 10px;

    font-size: 18px;

}

.notice-2 .text-box .btn-box button img {
    width: initial;
    border-radius: 0;
    margin: 3px 0;
}

@media (min-width: 576px) {

    .notice-2 .text-box .btn-box {
        display: flex;
        flex-wrap: nowrap;
    }

}

@media (min-width: 992px) {

    .notice-2 .main .text-box {
        display: block;
        align-items: center;
        max-width: 700px;
        padding: 30px;
    }
}

/* 0801 其他資訊 others-list */
.others-list .main .row {
    margin-top: 20px;
}

.others-list .main .box {
    text-align: center;
}

.others-list .main .box .img-box {
    display: inline-block;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 200px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: 0.5s;
}

.others-list .main .box p {
    margin: 10px 0;
    color: #000;
}

.others-list .main a:hover {
    text-decoration: none;
}

.others-list .main a:hover .img-box {
    transform: scale(1.1);

    transition: 0.5s;
}

@media (min-width: 576px) {

    .others-list .main .box .img-box {
        width: 150px;
        height: 150px;
    }
}

@media (min-width: 768px) {
    .others-list .main .row {
        margin-top: 80px;
    }
}


/* 0801 網頁頁尾 */
footer {
    display: none;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    margin-top: 20px;
}

footer .container {
    padding: 0 20px;
}

.footer-box {
    display: flex;
    justify-content: space-between;
}

.footer-box .text-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10px;
    font-size: 14px;
}

.footer-box .text-box p:nth-last-child(1) {
    margin-top: 20px;
}

.footer-box .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-box .download {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-box .download a {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 10px;
}

.footer-box .social {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-box .social li {
    width: 35px;
    margin-left: 10px;
}

.footer-box .box a:hover {
    opacity: 0.8;
}

footer .div {
    /* height: 30px; */
}

/* 0428 */
@media (min-width: 576px) {

    .wrapper footer .container {
        width: initial;
    }
}


@media (min-width: 992px) {
    footer {
        display: block;
    }

    .footer-box .text-box {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .footer-box .download {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

}



/* 0811 網站維護中頁 maintenance */

.maintenance .space {
    text-align: center;
    padding-top: 30px;
}

.maintenance .logo {
    width: 200px;
}

.maintenance .main {
    margin: 0 auto;
}

.maintenance .text-box {
    background-color: transparent;
    margin: 0 10px;
    margin-top: 30px;

    display: inline-block;
    text-align: center;
}

.maintenance .text-box img {
    width: 80px;
    margin: 20px 0;
}

.maintenance .text-box h2 {
    /* font-size: 28px; */
    margin: 0;
}

.maintenance .text-box hr {
    margin: 0;
    margin-bottom: 10px;
    border-top: 1px dashed #B9CCDF;
}

.maintenance .doll {
    width: 50px;
    margin-left: 10px;
}

@media (min-width: 992px) {
    .maintenance .space {
        text-align: center;
        padding-top: 80px;
    }

    .maintenance .logo {
        width: 300px;
    }

    .maintenance .text-box {
        text-align: left;
    }

    .maintenance .text-box img {
        margin: 0;
        margin-right: 30px;
        float: left;
    }

    .maintenance .text-box .text {
        float: right;
    }

    .maintenance .doll {
        width: 70px;
    }
}






/* 0906 首頁新增跑馬燈 */
.home .marquee-box {
    margin-top: 20px;
}

.home .marquee-box .container>a {
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);

    display: flex;
    height: 40px;
    align-items: center;
    overflow: hidden;
}

.home .marquee-box .container>a:hover {
    color: #173042;
    text-decoration: none;
    opacity: 0.9;
}

.home .marquee-box .img-box {
    padding: 10px 8px;
    padding-left: 12px;
    height: 100%;
    box-shadow: 1px 0px 5px #e0e7ee;
}

.home .marquee-box .img-box img {
    transform: rotate(-10deg);
    width: 85%;
}

@media (min-width: 992px) {

    /* 0919 */
    .home .marquee-box {
        position: absolute;
        top: -85px;
        left: 0;
        /* width: 70%; */
        margin-top: 50px;

        width: 60%;
    }

    /* 0406 修改 */
    .home .marquee-box .container {
        margin: 0;
        max-width: 100%;
    }

    .home .marquee-box .container>a {
        /* width: 972px; */
    }
}

@media (min-width: 1200px) {

    .home .marquee-box .container>a {
        /* width: 1180px; */
    }

    /* 0919 */
    .home .marquee-box {
        /* width: 75%; */
        width: 60%;
    }
}



/* 0912 新增 減碳量  */

/* 20230523 */
.carbon-box {
    margin: 15px 0;
    padding: 0 15px;
}

.carbon-box .box {
    background-color: #fff;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
}

/* 20230523 */
.carbon-box .box .img-box {
    display: flex;
    align-items: flex-end;
}

.carbon-box .box .img-box img {
    width: 30px;
    padding: 3px;
    margin-right: 5px;
}

.carbon-box .box p {
    font-size: 18px;
}

/* 20230523 */
.carbon-box .box p span {
    margin-right: 10px;
    margin-left: 3px;
}


@media (min-width: 768px) {
    .carbon-box .box {
        padding: 20px 30px;
    }
}

@media (min-width: 992px) {

    /* 20230523 */
    .carbon-box {
        position: absolute;
        bottom: 0px;
        /* top: 675px; */
        right: 30px;
        /* width: 330px; */
        /* width: 30%; */
        /* display: none; */

        padding: 0;
    }

    /* 20230523 */
    .carbon-box .box {
        /* background-color: transparent; */
        padding: 3px 10px;
        padding-top: 4px;
        padding-left: 8px;
    }

    /* 20230523 */
    .carbon-box .box .img-box {
        align-items: center;
    }

    /* 20230523 */
    .carbon-box .box .img-box img {
        margin-right: 3px;
    }
}

@media (min-width: 1200px) {

    /* 20230523 */
    .carbon-box {
        /* top: 735px; */
        /* width: 25%; */
    }
}


/* 0913 會員 減碳計算 */
.member-carbon .img-box {
    position: relative;
    margin-right: 10px;
}

/* 0412 */
.member-carbon .img-box .text-box {
    /* position: absolute; */
    /* top: 15%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */

    /* width: 270px; */
    position: relative;
    padding: 0 50px;

    background-image: url(../img/tree-card-03-3.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
    background-size: cover;
}

.member-carbon .img-box .text-box h2 {
    font-size: 20px;
}

/* 0412 */
.member-carbon .img-box .text-box .text {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-size: 18px;

    flex-wrap: wrap;
    align-items: center;
}

/* 0412 */
.member-carbon .img-box .text-box .text p {
    flex-grow: 1;
    flex-basis: 150px;
}

.member-carbon .img-box .text-box .text p:nth-last-child(1) {
    /* background-color: #8AB52D; */
    background: linear-gradient(90deg, #8AB52D 0%, #5C9A34 100%);
    /* padding: 1px 20px; */
    width: 150px;
    text-align: center;
    padding-top: 2px;
    /* margin-left: 10px; */
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
}

.member-carbon .img-box .text-box>p {
    font-size: 16px;
}

.member-carbon .img-box .text-box>p span {
    font-weight: 500;
}

@media (min-width: 576px) {

    /* 0412 */
    .member-carbon .img-box .text-box {
        /* top: 20%; */
        /* width: 450px; */
    }

    .member-carbon .img-box .text-box .text {
        margin: 30px 0;
    }

    .member-carbon .img-box .text-box .text p:nth-last-child(1) {
        width: 200px;
    }

}

@media (min-width: 768px) {

    .member-carbon .img-box .text-box .text {
        margin: 40px 0;
    }
}












/* 0406 首頁 新增 會員編號 */
.member-number {
    margin: 15px 0;
}

.member-number .box {
    background-color: #fff;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
}


.member-number .box p {
    font-size: 16px;
}

.member-number .box p:nth-child(1) {
    padding-right: 5px;
}

@media (min-width: 768px) {
    .member-number .box {
        padding: 10px 15px;
    }

    .member-number .box p {
        font-size: 18px;
    }
}

@media (min-width: 992px) {

    /* 0919 */
    .member-number {
        position: absolute;
        top: -50px;
        right: 0;
        /* width: 30%; */
        width: 40%;
    }

    .member-number .box {
        background-color: #fff;
        padding: 7px 12px;
    }
}

@media (min-width: 1200px) {

    /* 0919 */
    .member-number {
        /* width: 25%; */
        width: 40%;
    }
}



/* 0718 首頁 日文版 */
.main.japanese .ticket {
    top: 0;
}

.main.japanese .ticket .title h2 {
    display: flex;
    align-items: center;
    margin: 0;
    margin-top: 15px;
    font-weight: 600;
    font-size: 1.6rem;

    border-bottom: 2px solid #F58635;
    padding-right: 25px;

    position: relative;
}

.main.japanese .ticket .title h2::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 2px;
    border-radius: 10px;
    background-color: #F58635;
    position: absolute;
    right: 0;
    bottom: 1px;
    transform: rotate(30deg);
}

.main.japanese .ticket .title h2 img {
    width: 50px;
    transform: translateX(-5px);
    margin-right: 0;
}

.main.japanese .ticket .title h2+img {
    margin-top: 10px;
}

.main.japanese .ticket .btn-box .doll {
    position: absolute;
    top: -40px;
    right: 10px;
    animation: none;
}

.main.japanese .ticket .buy-box .bg {
    background-image: url(../img/bgimg-2.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center -10px;
    background-color: #fff;
}

.main.japanese .ticket .buy-box .box-bg {
    top: 30px;
    right: -50px;
}

.main.japanese .news-box {
    padding: 0 15px;
}

.main.japanese .news-box .container {
    max-width: 100%;
}



@media (min-width: 576px) {
    .main.japanese .ticket .btn-box .doll {
        right: 20px;
    }

    .main.japanese .ticket .buy-box .bg {
        background-position: center -25px;
    }
}

@media (min-width: 992px) {
    .main.japanese .ticket .box.buy-box {
        height: 265px;
    }

    .main.japanese .ticket .buy-box .bg {
        height: 100%;
    }

    .main.japanese .ticket .buy-box .bg {
        background-size: 110%;
        background-position: center -10px;
    }

    .main.japanese .framed {
        top: 330px;
    }
}

@media (min-width: 1200px) {

    .main.japanese .ticket .box.buy-box {
        height: 325px;
    }

    .main.japanese .ticket .box-bg {
        display: none;
    }

    .main.japanese .framed {
        top: 395px;
    }

}


/* 0718 首頁 語言切換 */
/* 0904 新增 */
.navbar div.box {
    position: initial;
}

/* 0904 改class 去掉.home ↓ */
/* 0919 */
.navbar .btn-box .form-group {
    display: flex;
    align-items: center;
    margin: 0;
    /* margin-right: 20px; */

    margin-right: 30px;
}

.navbar .btn-box .form-group label {
    margin: 0;
    margin-right: 5px;
}

.navbar .btn-box .form-group label img {
    width: 25px;
}

/* 新增 width */
.navbar .btn-box .form-group .form-control {
    padding: 0px 2px;
    background-color: transparent;
    color: #354F61;
    border: 1px solid #354f61aa;
    border-radius: 20px;
    line-height: normal;
    height: 25px;
    font-size: 0.9rem;

    width: 100%;
}

.navbar .box .img-box img {
    width: 50px;
    position: absolute;
    top: 10px;
    right: 0;
}

@media (min-width: 768px) {
    .navbar .btn-box .form-group {
        margin-right: 0px;
    }

    .navbar .box .img-box img {
        position: initial;
    }
}

/* 改class 去掉.home ↑ */









/* 20231025 .traffic-train 火車 */
/* 1106　↓ */
.traffic-train .traffic-bg .btn_box {
    display: flex;
    justify-content: flex-end;
}

.traffic-train .traffic-bg .btn_box button {
    font-size: 0.9rem;
    background-color: transparent;
    border: 1px solid rgba(23, 48, 66, 0.9);
    border-radius: 50px;
    padding: 3px 25px;
    padding-top: 4px;
    margin: 0px;
    margin-top: 10px;
    margin-bottom: -10px;
    margin-left: 10px;

    transition: 0.3s;
}

.traffic-train .traffic-bg .btn_box button.add {
    background-color: rgba(23, 48, 66, 0.9);
    color: #fff;
    font-weight: 500;
}

.traffic-train .traffic-bg .btn_box button:hover {
    opacity: 0.9;
}

/* 1106 ↑ */


.traffic-train.traffic-all .transparent-bg .box {
    background-color: transparent;
    display: none;
}

/* 1106 */
.traffic-train.traffic-all .transparent-bg .box.show {
    display: block;
}

.traffic-train.traffic-all .time-box {
    background-color: #fff;
}

.traffic-train.traffic-mrt-lrt .time-box>p {
    /* font-size: 1rem; */
    font-weight: 400;
}

.traffic-train.traffic-all .time-box .time p span {
    font-size: 0.9rem;
    /* letter-spacing: 1px; */
    background-color: #FFE74D;
    border-radius: 50px;
    padding: 2px 10px;
    font-weight: 400;
}

.traffic-train.traffic-mrt-lrt .time-box .time>p {
    font-size: 1.1rem;
}

.traffic-train.traffic-all .time-box .time p {
    font-size: 1.1rem;
}

.traffic-train.traffic-mrt-lrt .title-box .title img {
    width: 50px;
}

.traffic-train.traffic-mrt-lrt div.title-box {
    padding: 5px 0;
}




















/* 20250526 新增css */
/* 會員 訂閱資訊 */
.member .text-box li div.subscription {
    font-size: 1.2rem;
    margin-bottom: 3px;

    font-weight: 400;
    color: #173042;
}

.period_box div:nth-last-child(1) {
    display: inline-block;
    border: 1px solid #798fa5;
    border-radius: 10px;
    padding: 0 15px;
    padding-top: 1px;
    font-size: 1.1rem;
}

.period_box div span:nth-child(1) {
    font-weight: 600;
}


/* 首頁 通知鈴鐺 */
.home .marquee-box {
    display: flex;
}

.home .marquee-box .container {
    display: flex;
}

.home .marquee-box .container>a {
    width: 100%;
}

.home .marquee-box .container .notify_btn {
    background-color: #fff;
    border-radius: 50px;
    padding: 0 8px;

    position: relative;

    margin-right: 30px;
    box-shadow: 1px 1px 5px #00000016;

    overflow: initial;
    width: initial;
    transform: scale(1.2);
}

.home .marquee-box .notify_btn img {
    width: 24px;
    transform: rotate(-3deg);
}

.home .marquee-box .notify_btn p {
    position: absolute;
    right: -18px;
    top: -5px;
    background-color: #BB2525;
    border-radius: 50px;
    padding: 0 5px;
    padding-top: 1px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 1px 1px 5px #00000016;
    width: 45px;
    text-align: center;
}

@media (max-width: 991.98px) {

    .home .marquee-box .container .notify_btn {
        order: 2;
        margin-left: 30px;
        margin-right: 0;
    }

    .home .marquee-box .notify_btn p {
        right: 8px;
    }
}


/* 通知內頁 */
.notify .box .tab_box {
    margin: 10px -5px;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
}

.notify .box .tab_box .tab_btn {
    border: 1px solid #e7e7e7;
    font-weight: 300;
    border-radius: 50px;
    background-color: transparent;
    padding: 5px 15px;
    padding-top: 6px;
    margin: 5px 5px;

    transition: 0.3s;
}

.notify .box .tab_box .tab_btn:hover {
    background-color: #354f61;
    color: #fff;
}

.notify .box .tab_box .tab_btn.add {
    background-color: #354f61;
    color: #fff;
}

.notify .box .list-box {
    display: none;
}

.notify .box .list-box.show {
    display: block;
}

.notify .box .list-box a {
    display: flex;
    align-items: center;
    padding: 10px 0;

    position: relative;
}

.notify .box .list-box .img_box {
    border: 1px solid #e7e7e7;
    border-radius: 50px;
    padding: 5px;
}

.notify .box .list-box .img_box img {
    display: inline-block;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.notify .box .list-box .text_box {
    flex-grow: 1;
    margin: 0 10px;
}

.notify .box .list-box .text_box p {
    font-weight: 400;
}

.notify .box .list-box .text_box p:nth-child(1) {
    font-size: 1.2rem;
    font-weight: 400;
    border-bottom: 1px dotted #354f61;
    margin-bottom: 5px;
    padding-right: 10px;
}

.notify .box .list-box .dot {
    width: 8px;
    height: 8px;
    background-color: #BB2525;
    border-radius: 50px;
    position: absolute;
    top: 19px;
    right: 10px;
}

.notify.travel-list-box {
    margin-bottom: 100px;
}

/* 20250526 新增css */





input#activeDate {
    background-color: #fff;
    cursor: pointer;

    /* position: relative; */

    background-image: url(../img/start_date.svg);
    background-repeat: no-repeat;
    background-size: 28px;
    background-position: calc(100% - 5px) 6px;
    padding-right: 32px;

    transition: 0.3s;
}

input#activeDate:hover {
    background-color: #17304209;
}

.package-main .form-group {
    margin-bottom: 0;
}

.package-main .form-group.form-check-box {
    flex-direction: column;
}

.package-main .form-check-inline {
    margin: 5px 0;
}

.package-main .form-check-label {
    padding: 6px 0;
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: left 0px;
    padding-left: 40px;
}

.package-main label[for="payTypeOfCreditCard"] {
    background-image: url(../img/pay_card.svg);
}

.package-main label[for="payTypeOfLINEPay"] {
    background-image: url(../img/pay_line.svg);
}

.package-main label[for="payTypeOfSubscription"] {
    background-image: url(../img/pay_year.svg);
}

/* .package-main .form-group[style="display: none;"]+span {
    color: #173042 !important;
    padding: 7px 0;
    display: inline-block;
    font-size: 0.92rem;
} */

.package-main span.pay_notes {
    color: #173042 !important;
    padding: 7px 0;
    display: inline-block;
    font-size: 0.92rem;
}

.package-main span.pay_notes_time {
    color: #fc6b53;
    font-weight: 600;
    font-size: 1.15rem;
}


















/* 20250625 */
/* 八個大按鈕調整 */
.member .rwd_img img {
    display: none;
}

@media (max-width: 767.98px) {
    .member .container .btn-box {
        margin: 15px -5px;
    }

    .member .btn-box li {
        padding: 0 5px;
        flex-basis: calc(100% / 4);
    }
}

@media (max-width: 575.98px) {

    .member .btn-box li {
        flex-basis: calc(100% / 3);
    }

    .member .btn-box li button {
        padding: 5px 3px;
    }

    .member .rwd_img div {
        text-align: center;
        position: relative;
        overflow: hidden;

        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
        background: linear-gradient(40deg, #c4d1d9 0%, #bdd6e7 50%, #a5cde8 100%);
        border-radius: 10px;
        margin: 5px 0;
        padding: 5px 4px;
    }

    .member .rwd_img div::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 220px;
        height: 220px;
        border-radius: 0px;
        background: linear-gradient(40deg, #ffffffa7 0%, #ffffff6e 50%, #ffffff2b 100%);

        animation: rwd_img 5s infinite;
    }

    @keyframes rwd_img {
        100% {
            transform: translateX(-50%) translateY(-50%) rotate(360deg);
        }
    }

    .member .rwd_img img {
        display: inline-block;
        height: 66px;
        position: relative;
        z-index: 1;
    }
}



/* 優惠券頁面 */
/* 注意事項文字 */
.member_coupon .bg-box .text_notice {
    color: #173042;
    font-size: 0.9rem;
}

/* 頁籤 */
.member_coupon .tabs_box {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
}

.member_coupon .tabs_box .btn_tab {
    border: 1px solid #e7e7e7;
    font-weight: 300;
    border-radius: 50px;
    background-color: transparent;
    padding: 2px 15px;
    padding-top: 4px;
    margin: 5px 5px;
    transition: 0.3s;
    font-size: 0.95rem;
}

.member_coupon .tabs_box .btn_tab:hover {
    background-color: #354f61;
    color: #fff;
}

.member_coupon .tabs_box .btn_tab.active {
    background-color: #354f61;
    color: #fff;
}

.member_coupon .tab_main {
    display: none;
}

.member_coupon .tab_main.show {
    display: block;
}

/* 優惠券 標題 文字 */
.member_coupon .bg-box .list {
    margin: 0 0px;
    padding: 0;
    list-style: none;
}

.member_coupon .bg-box .list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.member_coupon .bg-box .list .img_box {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    border: 1px solid #e7e7e7;

    display: flex;

    position: relative;
}

.member_coupon .bg-box .list .img_box img {
    width: 100%;
    padding: 10px;
    transform: translateY(-1px);
}

.member_coupon .bg-box .list .img_box .expiring{
    position: absolute;
    border: 1px solid #FC6B53;
    border-radius: 7px;
    color: #FC6B53;
    font-weight: 600;
    width: 100%;
    text-align: center;
    padding-top: 1px;
    font-size: 0.9rem;
    bottom: -12px;
    transform: rotate(-3deg);
}

.member_coupon .bg-box .list .img_box .used{
    position: absolute;
    background-color: #ffffffd8;
    border: 1px solid #9e9e9e;
    border-radius: 7px;
    /* color: #9e9e9e; */
    font-weight: 600;
    width: 100%;
    text-align: center;
    padding-top: 1px;
    /* font-size: 0.9rem; */

    top: 50%;
    transform:translateY(-50%) rotate(-5deg);
}

.member_coupon .bg-box .list .text {
    padding-left: 8px;
    flex-basis: calc(100% - 80px);
}

.member_coupon .bg-box .list .text h2 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #E0E7EE;
    color: #173042;

    display: flex;
    align-items: center;
}

.member_coupon .bg-box .list .text p {
    font-weight: 400;
    margin: 10px 0;
}

.member_coupon .bg-box .list .text p.time {
    font-size: 0.9rem;
    font-weight: 300;
    margin: 5px 0;
    margin-bottom: 0px;
}

/* 代碼 按鈕 */
.member_coupon .bg-box .list .btn_box {
    border-top: 1px dashed #E0E7EE;
    padding-top: 15px;
    margin-top: 10px;

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

.member_coupon .bg-box .list .btn_box p {
    font-size: 0.9rem;
}

.member_coupon .bg-box .list .btn_box span {
    display: inline-block;
    font-size: 1rem;
    transform: translateY(1px);
}

.member_coupon .bg-box .list .btn_box .btn_coupon {
    border: none;
    background-color: #173042;
    color: #fff;
    width: 65px;
    padding: 3px 0px 1px 0px;
    border-radius: 10px;
    margin-left: 5px;
    font-size: 0.9rem;
    font-weight: 300;

    transition: 0.3s;
}

.member_coupon .bg-box .list .btn_box .btn_coupon.add {
    background-color: #354f61;
}

.member_coupon .bg-box .list li.none {
    color: #9e9e9e;
}

.member_coupon .bg-box .list li.none h2 {
    color: #9e9e9e;
}

.member_coupon .bg-box .list li.none img {
    opacity: 0.5;
}

.member_coupon .bg-box .list li.none .btn_box .btn_coupon {
    background-color: #9e9e9e;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 575.98px) {

    .member_coupon .bg-box .list .img_box {
        width: 70px;
        height: 70px;
    }

    .member_coupon .bg-box .list .text {
        flex-basis: calc(100% - 70px);
    }

    .member_coupon .bg-box .list .text h2 {
        font-size: 1rem;
    }

    .member_coupon .bg-box .list .text p {
        font-size: 0.95rem;
    }

    .member_coupon .bg-box .list .text p.time {
        font-size: 0.85rem;
    }

    .member_coupon .bg-box .list .btn_box p {
        font-size: 0.85rem;
    }

    .member_coupon .bg-box .list .btn_box span {
        font-size: 0.95rem;
    }
}

/* 優惠券內頁 */
.member_coupon_main .main{
    float: initial;
    margin: 0 auto;
}

.member_coupon_main .bg-box{
    margin-bottom: 20px;
}

.member_coupon_main .bg-box .img_box {
    max-width: 220px;
    text-align: center;
    margin: 0 auto;
}

.member_coupon_main .bg-box p.time {
    text-align: center;
    margin: 5px 0;
}

.member_coupon_main .bg-box p.time span {
    font-weight: 500;
    color: #FC6B53;
    font-size: 1.1rem;
}

.member_coupon_main .bg-box .text_notice {
    margin-top: 20px;
}

.member_coupon_main .bg-box .text_notice h2 {
    font-size: 1rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #E0E7EE;
    color: #173042;
    font-weight: 400;

    display: flex;
    align-items: center;
}

.member_coupon_main .bg-box .btn_box {
    border-top: 1px dashed #E0E7EE;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-top: 10px;

    text-align: center;
}

.member_coupon_main .bg-box .btn_box .btn_coupon_use {
    border: none;
    background-color: #173042;
    color: #fff;
    padding: 4px 30px 2px 30px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 300;

    transition: 0.3s;
}

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




/* 邀請朋友 */
.member_friends .bg-box .text_title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 400;
    color: #173042;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #E0E7EE;
}

.member_friends .bg-box .img_box {
    text-align: center;
    padding: 15px 0;
}

.member_friends .bg-box .img_box img {
    max-width: 300px;
}

.member_friends .bg-box .text_box {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #E0E7EE;

    text-align: center;
}

.member_friends .bg-box .btn_box {
    margin: 10px 0;
    margin-top: 20px;

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

.member_friends .bg-box .btn_box .btn_friends {
    border: none;
    background-color: #173042;
    color: #fff;
    width: 180px;
    padding: 7px 0px 5px 0px;
    border-radius: 10px;
    font-weight: 400;
    margin: 5px 15px;

    animation: btn_friends 3s infinite;
    transition: 0.3s;
}

.member_friends .bg-box .btn_box .btn_friends:hover {
    animation: none;
    transform: scale(1.1);
    background-color: #206698;
}

@keyframes btn_friends {

    10% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        background-color: #206698;
    }
}

.member_friends .number_box {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1;
    margin: 20px 0px;
    margin-top: 40px;
}

.member_friends .number_box::before {
    content: "";
    width: 73%;
    height: 10px;

    background-image: url(../img/waveline.svg);
    background-repeat: repeat-x;
    background-size: 150px;

    position: absolute;
    z-index: -1;
}

.member_friends .number_box div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 15px;
    background-color: rgb(255, 252, 252);

    border: 1px solid #a3c6de;
    border-radius: 10px;

    animation: number_box_bg 3s infinite;
}

@keyframes number_box_bg {

    50% {
        background-color: #f8fbfc;
    }
}

.member_friends .number_box p {
    padding: 0 5px;
    color: #173042;
    font-weight: 400;
}

.member_friends .number_box p.number {
    font-weight: 800;
    color: #FC6B53;
    font-size: 1.5rem;

    transform: translateY(-1px);
}


.member_friends .text_Steps .text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.member_friends .text_Steps .text p {
    width: 280px;
    padding-left: 10px;
    text-align: left;

    display: flex;
    align-items: flex-start;
}

.member_friends .text_Steps p span.step {
    display: inline-block;
    border: 1px solid #7188A0;
    color: #173042;
    border-radius: 6px;
    padding: 2px 8px 0px 8px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 1.1rem;

    transform: translateY(-4px);
}

.member_friends .text_Steps .img_box img {
    max-width: 150px;
}


.member_friends .text_Steps .text {
    flex-direction: column;
}

.member_friends .text_Steps .img_box img {
    max-width: 200px;
}

.member_friends .text_Steps .text p {
    font-weight: 400;
}

@media (max-width: 991.98px) {

    .member_friends .number_box::before {
        width: 83%;
    }
}

@media (max-width: 575.98px) {

    .member_friends .bg-box .btn_box {
        flex-direction: column;
    }

    .member_friends .bg-box .btn_box .btn_friends {
        width: 100%;
        max-width: 300px;
    }

    .member_friends .number_box::before {
        width: 100%;
        max-width: 300px;
    }

    .member_friends .text_Steps .img_box img {
        max-width: 120px;
    }
}




.member_coupon_main .modal-dialog{
    max-width: 500px;
}

.member_coupon_main .modal-content{
    padding: 20px;
}

.member_coupon_main .modal-body {
    padding: 15px 0px;
    margin: 0 20px;
    text-align: center;
}

.member_coupon_main .modal-body .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.member_coupon_main .modal-body .title h2{
    font-size: 1.3rem;
    margin: 0;
}

.member_coupon_main .modal-body .title .cancel_btn {
    margin: 0;
    padding: 1px 10px 0 10px;
    background-color: #707070;
}

.member_coupon_main .modal-body img {
    width: 70px;
    margin-bottom: 10px;
}

.member_coupon_main .modal-body p{
    font-weight: 400;
}

.member_coupon_main .modal-footer {
    margin: 0 20px;
    padding: 15px 0;
    justify-content: center;
}

.member_coupon_main .modal-content button {
    border: none;
    background-color: #FC6B53;
    color: #fff;
    padding: 4px 20px 2px 20px;
    border-radius: 8px;
    font-weight: 300;
    transition: 0.3s;
}

/* .member_coupon_main .modal-footer .cancel_btn{
    background-color: #707070;
} */

@media (max-width: 575.98px){
    .member_coupon_main .modal-content{
        padding: 10px 0;
    }
}