/* custom css */

/* TABLE OF CONTENTS

1) Typography 排版
2) Layout 布局
3) Pages
4) Template Components 模版組件(按鈕、表單)
5) Navigations 導航
6) Blocks/Widgets 區塊/小工具、裝置
7) bxslider
8) Slick
9) Owl carousel

*/

/* 1 Typography
----------------------------------------------------------------------------- */

* {
    outline: none;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.aligin-items-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-content-center {
    -ms-flex-line-pack: center;
    align-content: center;
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-glow-1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.pl-10{
    padding-left: 10px;
}

.pr-15{
    padding-right: 15px;
}

@media (max-width: 767px) {
    .order-xs-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    .order-xs-12 {
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }
}

.visible-xxs {
    display: none;
}

@media (max-width: 480px) {
    .visible-xxs {
        display: block;
    }
}


/* 2 Layout
----------------------------------------------------------------------------- */

/*header*/

.header-top {
    background-color: #1a1a1a;
    padding: 0;
    position: relative;
    width: 100%;
}

.header-link a {
    color: #fff;
}

.header-link a:hover {
    color: #de7388;
}

.header-link a:hover i {
    color: #fff;
}

.header-link span {
    color: #fff;
}

.link-r .list-inline li > a {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-weight: 300;
}

.link-r .list-inline li:hover > a.btn {
    color: #050a19;
    background: #fff;
    font-weight: 400;
}

.banner {
    position: absolute;
    top: 0;
    z-index: 1;
    background: url(../../_images/son/banner-in.jpg) no-repeat center center;
    min-height: 550px;
}

body.home .banner {
    background-image: none;
    min-height: auto;
    height: 100vh;
}

@media (max-width:1024px) {
    .logo {
        display: none;
    }
}

@media (max-width: 991px) {
    .banner {
        min-height: 300px;
        background: url(../../_images/son/banner-in.jpg) no-repeat top center;
    }
}

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

/*submenu*/

.content-son {
    background-color: #fff;
    position: relative;
    z-index: 8;
    padding-top: 60px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 250px;
}

.submenu {
    padding-bottom: 60px;
    min-height: 150px;
}

.submenu-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 0;
}

.submenu-tabs::-webkit-scrollbar {
    display: none
}

body.order.index .submenu-tabs {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.submenu-tabs > li > a {
    width: 150px;
    height: 150px;
    padding: 20px;
    text-align: center;
    background-color: hsl(0, 0%, 95%);
    overflow: hidden;
    margin-right: 30px;
    border-radius: 0;
    border: 0;
}

.submenu-tabs > li:last-child > a {
    margin-right: 0;
}

.submenu-tabs > li > a:before {
    content: "";
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 75px;
    width: 75px;
    display: block;
    margin: 0 auto;
}

.submenu-tabs > li.active > a,
.submenu-tabs > li:hover > a {
    background-color: #eed24a;
    border: 0;
}

.submenu-tabs > li.active:hover > a {
    background-color: #e2c331;
    border: 0;
}

.submenu-tabs > li:hover > a:after,
.submenu-tabs > li.active > a:after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    left: 50%;
    bottom: 0px;
    border: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid #fff;
    border-top: 0 solid;
    z-index: 3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.submenu-tabs > li > a > p {
    font-size: 18px;
    line-height: 18px;
    margin-top: 0px;
    color: hsl(0, 0%, 0%);
    letter-spacing: 4px;
}

.submenu-tabs > li:hover > a > p,
.submenu-tabs > li.active > a > p {
    color: #fff;
}

.submenu-tabs > li > a > img {
    max-width: 100%;
    height: 60px;
}

.icon-history:before {
    background-image: url(../../_images/about/tabicon-history.png);
}

li:hover .icon-history:before,
li.active .icon-history:before,
li.active:hover .icon-history:before {
    background-image: url(../../_images/about/tabicon-history-w.png);
}

.icon-facility:before {
    background-image: url(../../_images/about/tabicon-facility.png);
}

li:hover .icon-facility:before,
li.active .icon-facility:before,
li.active:hover .icon-facility:before {
    background-image: url(../../_images/about/tabicon-facility-w.png);
}

.icon-design:before {
    background-image: url(../../_images/about/tabicon-design.png);
}

li:hover .icon-design:before,
li.active .icon-design:before,
li.active:hover .icon-design:before {
    background-image: url(../../_images/about/tabicon-design-w.png);
}

/*event*/

.icon-event:before {
    background-image: url(../../_images/news/tabicon-event.png);
}

li:hover .icon-event:before,
li.active .icon-event:before,
li.active:hover .icon-event:before {
    background-image: url(../../_images/news/tabicon-event-w.png);
}

/*media*/

.icon-media:before {
    background-image: url(../../_images/news/tabicon-media.png);
}

li:hover .icon-media:before,
li.active .icon-media:before,
li.active:hover .icon-media:before {
    background-image: url(../../_images/news/tabicon-media-w.png);
}

/*news other*/

.icon-other:before {
    background-image: url(../../_images/news/tabicon-news.png);
}

li:hover .icon-other:before,
li.active .icon-other:before,
li.active:hover .icon-other:before {
    background-image: url(../../_images/news/tabicon-news-w.png);
}

/*info*/

.icon-route:before {
    background-image: url(../../_images/info/tabicon-route.png);
}

li:hover .icon-route:before,
li.active .icon-route:before,
li.active:hover .icon-route:before {
    background-image: url(../../_images/info/tabicon-route-w.png);
}

.icon-time:before {
    background-image: url(../../_images/info/tabicon-time.png);
}

li:hover .icon-time:before,
li.active .icon-time:before,
li.active:hover .icon-time:before {
    background-image: url(../../_images/info/tabicon-time-w.png);
}

.icon-ticket:before {
    background-image: url(../../_images/info/tabicon-ticket.png);
}

li:hover .icon-ticket:before,
li.active .icon-ticket:before,
li.active:hover .icon-ticket:before {
    background-image: url(../../_images/info/tabicon-ticket-w.png);
}

.icon-notice:before {
    background-image: url(../../_images/info/tabicon-notice.png);
}

li:hover .icon-notice:before,
li.active .icon-notice:before,
li.active:hover .icon-notice:before {
    background-image: url(../../_images/info/tabicon-notice-w.png);
}

.icon-refund:before {
    background-image: url(../../_images/info/tabicon-refund.png);
}

li:hover .icon-refund:before,
li.active .icon-refund:before,
li.active:hover .icon-refund:before {
    background-image: url(../../_images/info/tabicon-refund-w.png);
}

/*high-speed-rail*/

.icon-high_speed_rail:before {
    background-image: url(../../_images/traffic/tabicon-location-01.png);
}

li:hover .icon-high_speed_rail:before,
li.active .icon-high_speed_rail:before,
li.active:hover .icon-high_speed_rail:before {
    background-image: url(../../_images/traffic/tabicon-location-w-01.png);
}

/*train*/

.icon-train:before {
    background-image: url(../../_images/traffic/tabicon-location-02.png);
}

li:hover .icon-train:before,
li.active .icon-train:before,
li.active:hover .icon-train:before {
    background-image: url(../../_images/traffic/tabicon-location-w-02.png);
}

/*transport*/

.icon-transport:before {
    background-image: url(../../_images/traffic/tabicon-location-03.png);
}

li:hover .icon-transport:before,
li.active .icon-transport:before,
li.active:hover .icon-transport:before {
    background-image: url(../../_images/traffic/tabicon-location-w-03.png);
}

/*Bus*/

.icon-Bus:before {
    background-image: url(../../_images/traffic/tabicon-location-04.png);
}

li:hover .icon-Bus:before,
li.active .icon-Bus:before,
li.active:hover .icon-Bus:before {
    background-image: url(../../_images/traffic/tabicon-location-w-04.png);
}

/*drive*/

.icon-drive:before {
    background-image: url(../../_images/traffic/tabicon-location-05.png);
}

li:hover .icon-drive:before,
li.active .icon-drive:before,
li.active:hover .icon-drive:before {
    background-image: url(../../_images/traffic/tabicon-location-w-05.png);
}

/*attr*/

.icon-attr:before {
    background-image: url(../../_images/attractions/tabicon-attr-01.svg);
}

li:hover .icon-attr:before,
li.active .icon-attr:before,
li.active:hover .icon-attr:before {
    background-image: url(../../_images/attractions/tabicon-attr-w-01.svg);
}


/*coupon*/
.icon-travelfair:before {
    background-image: url(../../_images/coupon/tabicon-travelfair.png);
}

li:hover .icon-travelfair:before,
li.active .icon-travelfair:before,
li.active:hover .icon-travelfair:before {
    background-image: url(../../_images/coupon/tabicon-travelfair-w.png);
}

.icon-alliance:before {
    background-image: url(../../_images/coupon/tabicon-alliance.png);
}

li:hover .icon-alliance:before,
li.active .icon-alliance:before,
li.active:hover .icon-alliance:before {
    background-image: url(../../_images/coupon/tabicon-alliance-w.png);
}

.icon-spring:before {
    background-image: url(../../_images/coupon/tabicon-spring.png);
}

li:hover .icon-spring:before,
li.active .icon-spring:before,
li.active:hover .icon-spring:before {
    background-image: url(../../_images/coupon/tabicon-spring-w.png);
}

.icon-onlinetravel:before {
    background-image: url(../../_images/coupon/tabicon-onlinetravel.png);
}

li:hover .icon-onlinetravel:before,
li.active .icon-onlinetravel:before,
li.active:hover .icon-onlinetravel:before {
    background-image: url(../../_images/coupon/tabicon-onlinetravel-w.png);
}



.breadcramb {
    display: none;
}

/*banner*/

.banner {
    position: relative;
}

/*title son*/

.title-son {
    position: absolute;
    z-index: 99;
    text-align: center;
    width: 100%;
    left: 50%;
    top: 180px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    text-shadow: 0 0 10px rgba(5, 10, 25, .8);
}

.title-son.title-son-style p {
    color: #fff;
    margin-bottom: 5px;
}

.title-son-style p {
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 10px;
}

.title-son-style p.en {
    font-size: 46px;
    font-family: 'Yrsa', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 1em;
}

.title-son-content.title-son-style p {
    color: #050a19;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 5px;
}

.title-son-content {
    position: static;
    top: inherit;
    margin-bottom: 60px;
}

.style-black {
    color: #050a19;
}

@media(max-width:991px) {
    .content-son {
        margin-top: 0px;
        padding-top: 40px;
    }
    .title-son {
        top: 150px;
    }
}

@media(max-width:767px) {
    /*.title-son{
        top:77px;
    }*/
    .title-son-content {
        margin-bottom: 30px;
    }
}

@media(max-width:480px) {
    .title-son-style p.en {
        font-size: 36px;
        letter-spacing: 2px;
    }
}

/*main*/

.content {
    min-height: 800px;
}

body.service .content-son .container,
body.order.index .content-son .container,
body.refund .content-son .container,
body.news.show .content-son .container {
    max-width: 900px;
}

.content img.img-responsive {
    margin: 0 auto;
}

/*footer*/

.subfooter {
    background-color: #050a19;
    margin-top: 100px;
}

.copyright {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin: 30px 0;
    text-align: center;
    font-weight: 200;
}

.copyright a {
    color: #fff;
}

.subfooter .m-other .btn {
    letter-spacing: 3px;
    width: 120px;
    font-weight: 400;
    height: 34px;
    overflow: hidden;
}

.subfooter .m-other .btn:hover {
    background: #fff;
    color: #050a19;
}

.subfooter .m-other .btn img {
    width: 53px;
}

.subfooter .m-other .btn:hover img {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

.subfooter .m-info ul.nav > li {
    margin-bottom: 15px;
}

.subfooter .m-info ul.nav > li > p.title {
    font-size: 13px;
    font-weight: 200;
    line-height: 16px;
}

.subfooter .m-info ul.nav > li > p,
.subfooter .m-info ul.nav > li > p > a {
    color: #fff;
    margin-bottom: 0px;
    line-height: 24px;
    font-size: 15px;
}

.subfooter .m-info ul.nav > li > p > a:hover {
    text-decoration: underline;
}

.subfooter .nav > li > a {
    color: #fff;
    display: inline-block;
    padding: 0;
}

.menu-list {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
}

.menu-list ul.nav > li > a {
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.menu-list ul.nav > li > a:before {
    content: "";
    display: inline-block;
    width: 10px;
    margin-right: 10px;
    background-color: transparent;
    height: 1px;
    vertical-align: middle;
}

.menu-list ul.nav > li:hover > a {
    color: #fff;
    text-decoration: none;
}

.menu-list ul.nav > li:hover > a:before {
    background-color: #fff;
}

@media (min-width:768px) {
    .content-son {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        min-height: 250px;
    }
}

@media (min-width:992px) {
    .content-son {
        width: 1000px;
        margin-top: -220px;
    }

}

@media (min-width:1200px) {
    .content-son {
        width: 1200px;
    }
}

@media (min-width:1400px) {
    .content-son {
        width: 1400px;
    }
}

@media (min-width:1600px) {
    .content-son {
        width: 1600px;
    }
}

@media (max-width:900px) {
    body.service .content-son .container,
    body.order.index .content-son .container,
    body.refund .content-son .container {
        width: 100%;
    }
}

@media (max-width:768px) {
    .submenu-tabs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-bottom: 0;
        overflow-x: scroll;
        padding: 0 30px;
    }
    body.info .submenu-tabs,
    body.news .submenu-tabs,
    body.about .submenu-tabs,
    body.traffic .submenu-tabs,
    body.coupon .submenu-tabs,
    body.member.step1 .submenu-tabs {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .submenu-tabs > li > a {
        margin-right: 10px;
    }
    .content {
        min-height: auto;
    }
}


/* 3 Pages
----------------------------------------------------------------------------- */

/*home*/

.ticket-prices-box {
    background: url(../../_images/all/bg-ticket.jpg) no-repeat center center;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 120px;
}

@media (min-width: 1200px) {
    .ticket-prices-box .container {
        width: 1330px;
    }
}

.ticket-prices-title {
    text-align: center;
    margin-bottom: 45px;
}

.ticket-prices-title .title-son-style p {
    color: #fff;
}

.ticket-prices-title .title-son-style p.en {
    margin-bottom: 15px;
}

.ticket-prices-body {
    max-width: 620px;
    margin: auto;
}

.ticket-prices-item{
    background: #fff;
    letter-spacing: 1px;
    height: 80px;
    overflow: hidden;
    margin: 0 -1px 25px 0;
    position: relative;
}

.ticket-prices-item div{
    padding: 15px 0;
}

.ticket-prices-item p,
.ticket-prices-item ul{
    margin: 0;
    line-height: inherit;
}

.ticket-prices-item .route{
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}

.ticket-prices-item .time{
    text-align: center;
    font-size: 12px;
    color: #ea5d48;
}

.ticket-prices-item .time i{
    margin-right: 2px;
}

.ticket-prices-item ul.station{
    list-style-type: none;
}

.ticket-prices-item ul.station li:first-of-type:before{
    content: '發車';
    position: absolute;
    left: 8px;
}

.ticket-prices-item ul.station li:nth-of-type(2):before{
    content: '往返';
    position: absolute;
    left: 8px;
}

.ticket-prices-item .bg-black{
    background: #050a19;
    color: #fff;
    padding-left: 15px;
}

.ticket-prices-item .price-title{
    font-size: 14px;
}

.ticket-prices-item .price{
    font-size: 21px;
    font-weight: 600;
}

.ticket-prices-item .price span{
    font-size: 15px;
    font-weight: 500;
    padding-left: 4px;
}

.ticket-prices-item .bg-black.row{
    padding-left: 5px;
    margin: 0;
}

.ticket-prices-item .bg-black .col-xs-4 {
    padding: 10px 0px 10px 10px;
    border-right: 1px solid rgba(255,255,255,.3);
}

.ticket-prices-item .bg-black .col-xs-4:last-of-type {
    border-right: none;
}

.ticket-prices-item .bg-black .col-xs-4 .price {
    font-size: 17px;
}

.ticket-prices-item .bg-black .col-xs-4 .price span {
    font-size: 12px;
    padding-left: 2px;
}

.ticket-prices-body .no-open:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: hsla(225, 67%, 6%, 0.85);
    z-index: 2;
}

.ticket-prices-body .no-open:after {
    content: "試運轉未開放";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 15px;
    color: #fff;
    text-align: center;
    letter-spacing: 5px;
    z-index: 3;
}

.no-padding {
    padding: 0;
}


@media (max-width: 1300px) {
    .ticket-prices-title {
        margin-left: -50%;
    }
    
    .ticket-prices-body {
        margin-left: -25%;
    }
}

@media (max-width: 1200px) {
    .ticket-prices-title,
    .ticket-prices-body {
        margin-left: inherit;
    }
    .ticket-prices-item {
        height: 160px;
        margin-bottom: 20px;
    }
    .ticket-prices-item div {
         padding: 10px;
    }
}

@media (max-width: 991px) {
    .ticket-prices-box {
        padding-top: 40px;
    }
    .ticket-prices-body{
        max-width: none;
    }
    .ticket-prices-item {
        height: 80px;
    }
    .ticket-prices-item div {
         padding: 15px 10px;
    }
}

@media (max-width: 767px) {
    .ticket-prices-item {
        height: auto;
        margin-bottom: 20px;
    }
    .ticket-prices-item div {
         padding: 10px;
    }
}

/*about-info-box*/

.about-info-box {
    margin-top: -100px;
    /*margin-bottom: 100px;*/
}

.about-info-box .infobox-item .item-title a {
    width: 390px;
    height: 390px;
    background-color: #fff;
    text-align: center;
    position: relative;
}

.about-info-box .infobox-item .item-title a:before {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: 50%;
    right: -30px;
    border: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 25px solid #fff;
    border-top: 0 solid;
    z-index: 3;
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.about-info-box .infobox-item .item-title.facility a:before {
    right: inherit;
    left: -30px;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}

.about-info-box .infobox-item .item-title a .textbox {
    width: 100%;
}

.about-info-box .infobox-item .item-title a p.number {
    font-size: 40px;
    width: auto;
    position: static;
    color: #050a19;
    font-family: 'Yrsa', serif;
    font-weight: 600;
    margin-bottom: 0;
}

.about-info-box .infobox-item .item-title a p.text {
    font-size: 22px;
    color: #050a19;
    letter-spacing: 6px;
}

.about-info-box .infobox-item .item-title a p.icon {
    width: 140px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 20px;
}

.about-info-box .infobox-item .item-title a:hover {
    background-color: #eed24a;
}

.about-info-box .infobox-item .item-title a:hover:before {
    border-bottom-color: #eed24a;
}

.about-info-box .infobox-item .item-title a:hover p.number,
.about-info-box .infobox-item .item-title a:hover p.text {
    color: #fff;
}

.item-title .icon-history {
    background-image: url(../../_images/index/icon-history.png);
}

.item-title .icon-facility {
    background-image: url(../../_images/index/icon-facility.png);
}

.item-title .icon--location {
    background-image: url(../../_images/index/icon-location.png);
}

.item-title a:hover .icon-history {
    background-image: url(../../_images/index/icon-history-w.png);
}

.item-title a:hover .icon-facility {
    background-image: url(../../_images/index/icon-facility-w.png);
}

.item-title a:hover .icon--location {
    background-image: url(../../_images/index/icon-location-w.png);
}

.title-son-style p {
    color: #050a19;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 5px;
}

.title-index-content {
    position: static;
    top: inherit;
    padding-top: 95px;
    margin-bottom: 60px;
}

.i-newsboxbg {
    background: url(../../_images/index/bg-news.jpg) no-repeat center center;
    background-size: cover;
    padding-bottom: 70px;
}

.i-newsboxbg .listbox a {
    background-color: rgba(255, 255, 255, .65);
}

.i-newsboxbg .listbox:hover a {
    background-color: rgba(255, 255, 255, 1);
}

.i-newsboxbg .news-carousel {
    margin-top: 30px;
}

.good-link {
    padding: 20px 0;
    margin-bottom: -100px;
}

.good-link .item {
    width: 240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100px;
}

@media (max-width:1199px) {
    .infobox-item {
        overflow: hidden;
        height: 300px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .item-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    .about-info-box .infobox-item .item-title a {
        width: 300px;
        height: 300px;
    }
    .about-info-box .infobox-item .item-title a p.icon {
        width: 110px;
        height: 110px;
        margin-bottom: 10px;
    }
}

@media (max-width:991px) {
    .infobox-item {
        height: 250px;
    }
    .about-info-box .infobox-item .item-title a {
        width: 250px;
        height: 250px;
    }
    .about-info-box .infobox-item .item-title a p.icon {
        width: 90px;
        height: 90px;
        margin-bottom: 5px;
    }
}

@media (max-width:767px) {
    .infobox-item {
        height: auto;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .item-title {
        position: relative;
        width: 100%;
    }
    .about-info-box {
        margin-bottom: 0;
    }
    .about-info-box .infobox-item .item-title a {
        width: 100%;
    }
    .about-info-box .infobox-item .item-title a:before {
        top: 100%;
        right: auto;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .about-info-box .infobox-item .item-title a p.number {
        font-size: 40px;
        font-weight: 400;
    }
    .title-index-content {
        padding-top: 60px;
    }
    .i-newsboxbg {
        padding-bottom: 40px;
    }
    .good-link .owl-carousel .owl-item img {
        -o-object-fit: contain;
        object-fit: contain;
     	width: 135px; 
        height: auto;
    }

}

/*info
-----------------------------------*/

.info .title-son-content {
    margin: 135px 0 60px;
}

.info--textbox {
    width: 900px;
    margin: 0 auto 60px;
}

.info--textbox ul.nav li,
.ticket-note ul.nav li {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    padding: 5px 0;
    letter-spacing: 1.5px;
}

.info--textbox ul.nav li .remark,
.ticket-note ul.nav li .remark {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 10px;
}

.table-defult {
    margin: 20px 0;
    width: 100%;
}

.table-defult th {
    background-color: #f3f3f3;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.table-defult th .red {
    font-size: 15px;
    margin-left: 5px;
}

.table-defult td ul.nav li:before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #050a19;
    display: inline-block;
    =vertical-align: middle;
    margin-right: 5px;
}

.table-defult td ul.nav li p {
    padding-left: 10px;
    color: rgba(5, 10, 25, 0.4);
    font-size: 15px;
    display: inline-block;
    font-weight: 500;
}

.table-defult th,
.table-defult td {
    border-right: 1px dashed rgba(0, 0, 0, 0.2);
    padding: 8px 10px;
    color: #050a19;
}

.table-defult td {
    vertical-align: top;
}

.table-defult th:last-child,
.table-defult td:last-child {
    border-right: 0;
}

.table-2 td {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
    text-align: center;
    vertical-align: middle !important;
}

.table-2 tr:last-child td {
    border-bottom: 0;
}

.info--textbox ul.nav li ul.nav li,
.ticket-note ul.nav li ul.nav li {
    margin-left: 10px;
}

.info--textbox .table tr > td:first-child {
    text-align: center;
}

@media (max-width:900px) {
    .info--textbox {
        width: 100%;
        margin: 0 auto 60px;
    }
}

@media (max-width:767px) {
    .info .title-son-content {
        margin: 90px 0 30px;
    }
    .table-defult {
        margin: 0;
    }
}

/*timetable*/
.TandF-title{
    font-size: 32px;
    font-weight: 600;
    padding-left: 5px;
}

.route-item,
.price-item,
.bus-item,
.car-item{
    position: relative;
    padding: 5px 0 10px;
    padding-left: 80px;
    margin: 10px 0;
    letter-spacing: 1px;
    border-bottom: 1px solid #eee;
}
.route-item:before,
.price-item:before,
.bus-item:before,
.car-item:before{
    content: '';
    display: block;
    height: 54px;
    width: 54px;
    position: absolute;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.route-item:before{
    background: url(../../_images/info/tabicon-route.png) no-repeat center center;
    background-size: contain;
}
.price-item:before{
    background: url(../../_images/info/tabicon-ticket.png) no-repeat center center;
    background-size: contain;
}
.bus-item:before{
    background: url(../../_images/traffic/tabicon-location-03.png) no-repeat center center;
    background-size: 48px;
}
.car-item:before{
    background: url(../../_images/traffic/tabicon-location-05.png) no-repeat center center;
    background-size: contain;
}

.route-item .route-title,
.price-item .price-title,
.bus-item .bus-title,
.car-item .car-title,
.timetable-title{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0;
}

/*.route-item > span,
.price-item > span,
.bus-item > span,
.car-item > span{
    color: rgba(5,10,25,.7);
}*/

.route-item .route-title .fa-exchange{
    color: #eed24a;
    padding: 0 8px;
}

.price-item .price-title span{
    font-size: 24px;
    letter-spacing: 0;
}

.timetable{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.timetable th,
.timetable td{
    width: 33.3333%;
}

.timetable th{
    background: #050a19;
    color: #fff;
    text-align: center;
    font-weight: 500;
}

.timetable tr:nth-of-type(odd){
    background: #f5f5f5;
}

.timetable i{
    padding-right: 5px;
}

.timetable tr{
    position: relative;
    display: inline-table;
    width: 100%;
}
.timetable tr.no-open:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: hsla(225, 67%, 6%, 0.85);
    z-index: 2;
}
.timetable tr.no-open:after {
    content: "十月開放訂票";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: 15px;
    color: rgb(255, 255, 255);
    text-align: center;
    letter-spacing: 5px;
    z-index: 3;
}

@media (max-width: 480px) {
    .timetable i {
        display: none;
    }
}

/*spot-intro*/
.spot-intro{
    background: url(../../_images/info/spot_bg.jpg) no-repeat center center;
    background-size: cover;
    letter-spacing: 1px;
    padding: 25px 35px 10px;
    margin-top: 10px;
}

.spot-intro p{
    font-size: 17px;
    font-weight: 600;
    line-height: 34px;
}

.spot-intro p span.spot-title{
    background: #050a19;
    color: #fff;
    font-weight: 500;
    margin-right: 15px;
    padding: 6px 18px;
}

.spot-intro ul{
    list-style-type: decimal;
    line-height: 28px;
    margin-top: 15px;
    padding-left: 30px;
}

@media (max-width: 480px){
    .spot-intro{
        padding: 25px 20px 10px;
    }
}


/*news
-----------------------------------*/

.news--box .date {
    font-family: 'Yrsa', serif;
    line-height: 18px;
}

.news--box .listbox .imgbox,
.news--box .listbox .infobox {
    display: inline-block;
}

.news--box .listbox .imgbox {
    max-width: 175px;
    height: 160px;
    float: left;
	min-height: 140px;
}

/*.news--box .listbox .infobox {
    width: calc(100% - 160px);
    height: 160px;
}*/

@media (min-width: 481px) {
	.news--box{
		height: 170px;
	}
	
	.new-box-img-style{
		min-width: 175px;
		min-height: 150px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		margin: -1px!important;
	}
	
	.new-box-img-480{
		display: none!important;	
	}
}

.news--box .listbox .infobox {
    width: calc(60%);
    height: 160px;
}

.news--box .listbox a {
    color: #050a19;
    -webkit-transition: 0s;
    transition: 0s;
}

.news--box .imgbox img {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
.news--box a:hover .imgbox img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.listbox a {
    background-color: #f3f3f3;
}

.listbox:hover a {
    background-color: transparent;
}

.subject-box {
    margin-bottom: 30px;
}

.subject-title {
    width: 150px;
    height: 150px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-align: center;
    background-color: #eed24a;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    float: left;
}

.subject-body {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: calc(100% - 170px);
    padding-left: 20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 150px;
    -ms-flex-line-pack: center;
    align-content: center;
    overflow: hidden;
}

.subject-title i:before {
    content: "";
    display: block;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 75px;
    width: 75px;
    margin: 0 auto;
}

.subject-title:after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    right: -4px;
    top: 50%;
    border: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid #fff;
    border-top: 0 solid;
    z-index: 3;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}

.subject-title p {
    font-size: 18px;
    margin: 0px;
    color: #fff;
    letter-spacing: 5px;
}

.subject-title i.icon-event:before {
    background-image: url(../../_images/news/tabicon-event-w.png);
}

.subject-title i.icon-media:before {
    background-image: url(../../_images/news/tabicon-media-w.png);
}

.subject-title i.icon-other:before {
    background-image: url(../../_images/news/tabicon-other-w.png);
}

body.news.show .subject-body .subject {
    font-size: 28px;
    font-weight: 500;
    border: 0;
    color: #050a19;
    width: 100%;
}

body.news.show .subject-body .date {
    position: static;
    font-family: 'Yrsa', serif;
    font-size: 22px;
    color: #050a19;
    background-color: transparent;
}

body.news.show .date:before {
    content: none;
}

@media(max-width:767px) {
    body.news.show .subject-body .subject {
        font-size: 24px;
        margin-bottom: 0;
    }
}

@media(max-width:480px) {
    .news--box .listbox .imgbox,
    .news--box .listbox .infobox {
        display: block;
    }
    .news--box .listbox .imgbox {
        max-width: none;
        max-height: 200px;
        float: none;
        width: 100%;
    }
    .news--box .listbox .infobox {
        width: 100%;
        height: auto;
    }
    .news--box .imgbox img {
        /* position: absolute;
        top: 50%; */
        /* -webkit-transform: scale(1) translateY(-50%);
        transform: scale(1) translateY(-50%); */

        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@media(max-width:425px) {
    .subject-box {
        margin-bottom: 0px;
    }
    .subject-title {
        width: 100%;
        height: auto;
        float: none;
        padding: 5px 0;
    }
    .subject-title p {
        margin-left: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .subject-body {
        width: 100%;
        padding-left: 0;
    }
}

/*about
-----------------------------------*/

body.about #history h4 {
    letter-spacing: 6px;
}

body.about #history p {
    letter-spacing: 5px;
}

.history--box {
    position: relative;
    margin: 0 auto;
    text-align: center;
    background: url(../../_images/about/img-about-04.jpg) center top;
    min-height: 720px;
    background-size: cover;
}

.history--box img {
    margin: 0 auto;
}

.textbox-w {
    position: absolute;
    left: 40%;
    right: 0;
    padding: 40px 80px 20px;
    text-align: left;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    margin-bottom: 0;
}

.textbox-w-mb {
    padding: 5px;
    margin-top: 20px;
}

.big-t {
    font-size: 30px;
    font-weight: 600;
}

.history--box2 {
    padding: 80px 0;
}

.history--box2 img.img-responsive {
    margin: 0;
}

.ver-t {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.hor-t {
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
}

.right--box {
    padding: 20px;
}

.right--box h4 {
    margin-top: 0;
}

.right--box p {
    height: 435px;
    margin-left: 20px
}

.history--box3 {
    position: relative;
}

.textbox-w2 {
    padding-bottom: 20px;
}

.icon-railbike {
    background: url(../../_images/all/icon-railbike.png) no-repeat 0 0;
    width: 87px;
    height: 100px;
    background-size: cover;
    position: relative;
    margin-top: 100%;
}

.facility--box {
    position: relative;
    margin-top: 200px;
    margin-bottom: 50px;
}

.textbox-w3 {
    width: 245px;
    padding: 20px 0px 0px 0px;
    position: absolute;
    top: 120px;
    right: -50px;
    letter-spacing: 3px;
}

.design--box {
    position: relative;
    margin-top: 200px;
    margin-bottom: 50px;
}

.design--row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.design--l,
.design--r {
    border: 1px solid #eee;
    padding: 40px;
    margin: 20px;
    width: calc(50% - 40px);
}

.design--row ul.nav > li {
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 34px;
}

.design--row .gray {
    font-weight: 600;
    line-height: 26px;
    opacity: .5;
    margin-left: 30px;
}

@media(max-width:1199px) {
    .icon-railbike {
        width: 65px;
        height: 65px;
        margin-top: auto;
        position: absolute;
        bottom: -40px;
    }
    .textbox-w3 {
        top: 90px;
    }
}

@media(max-width:1024px) {
    .textbox-w3 {
        right: -20px;
    }
}

@media(max-width:991px) {
    .textbox-w {
        padding: 30px 30px 15px;
    }
    .right--box {
        padding: 0 20px;
        position: relative;
        -webkit-writing-mode: lr;
        -ms-writing-mode: lr;
        writing-mode: lr;
        float: right;
    }
    .right--box p {
        height: auto;
        margin-left: 0;
    }
    .icon-railbike {
        margin-top: auto;
        right: 0;
    }
    .textbox-w2 {
        padding-bottom: 0px;
    }
    .facility--box {
        margin-top: 100px;
    }
    .design--box {
        margin-top: 150px;
    }
    .textbox-w3 {
        right: 0;
    }
}

@media(max-width:767px) {
    body.about #history h4 {
        margin-top: 20px;
    }
    .textbox-w {
        right: 0;
        padding: 30px 80px;
    }
    .history--box2 {
        padding: 20px 0;
    }
    .textbox-w3 {
        width: 100%;
        position: relative;
        top: -30px;
    }
    .right--box {
        width: 100%;
    }
    .facility--box,
    .design--box {
        margin-top: 60px;
    }
    .design--row {
        display: block;
    }
    .design--l,
    .design--r {
        border: 1px solid #eee;
        margin: 20px 0;
        width: 100%;
    }

}

@media (max-width: 480px) {
    .design--l,
    .design--r {
        padding: 20px;
    }
}

/*交通指南*/

.traffic .title-son-content {
    margin-bottom: 0px;
}

.traffic .info--textbox {
    margin: 0 auto 100px;
}

.traffic .info--textbox h3 {
    margin-top: 20px;
}

.traffic .info--textbox ul.nav > li {
    border-bottom: 1px solid #eee;
    line-height: 1.5em;
    padding: 10px 0;
}

@media (max-width: 767px) {
    .traffic .info--textbox {
        margin: 0 auto 40px;
    }
}

/*service
-----------------------------------*/

fieldset.box--md {
    width: 500px;
    margin: 0 auto;
}

.form-group label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.form-control {
    background-color: #f3f3f3;
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 32px;
}

.contact-info .contact-item {
    margin: 20px 0;
}

.contact-info .icon img {
    width: 40px;
    margin-right: 10px;
}

.contact-info .info-list p {
    margin-bottom: 0px;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 1px;
}

.contact-info .info-list p.title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(5, 10, 25, .7);
}

.contact-form {
    margin-top: 75px;
}

.contact-form footer {
    text-align: center;
}

@media(max-width:500px) {
    fieldset.box--md {
        width: 100%;
        margin: 0 auto;
    }
}

/*refund
-----------------------------------*/

body.refund .refu--box {
    margin-bottom: 100px;
}

/*order
-----------------------------------*/

.stepbox > span {
    color: #050a19;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2.5px;
    margin: 0 40px;
    position: relative;
    opacity: 0.2;
}

.stepbox > span.active {
    opacity: 1;
}

i.moon-icon-play3 {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 18px;
    right: -50px;
}

.no-before .submenu-tabs > li > a:before {
    content: none;
}

.traveler-types-box .submenu-tabs > li > a p {
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    line-height: 30px;
}

.traveler-types-box .submenu-tabs > li > a p.font-24 {
    font-size: 24px;
    width: 100%;
    font-weight: 600;
}

.traveler-types-box .submenu-tabs > li > a p.en {
    letter-spacing: 0.75px;
    font-family: 'Yrsa', serif;
}

.traveler-types-box .submenu-tabs > li > a {
    width: 180px;
    height: 180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 10px;
}

body.order.index .traveler-types-box i.fa-caret-down {
    font-size: 24px;
}

.traveler-types-box .btn-black{
    margin-bottom: 20px;
}

.order-select-item {
    border-bottom: 2px dashed rgba(5, 10, 25, .3);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.order-select-item:last-of-type {
    border-bottom: none;
}

.order-title-box {
    margin-bottom: 20px;
}

.order-title-box i {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
}

.order-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.icon-pic {
    margin-right: 10px;
    width: 50px;
    height: 50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.pic-date {
    background-image: url(../../_images/order/icon-date.jpg);
}

.pic-line {
    background-image: url(../../_images/order/icon-line.jpg);
}

.pic-time {
    background-image: url(../../_images/order/icon-time.jpg);
}

.pic-notice {
    background-image: url(../../_images/order/icon-notice.jpg);
}

.pic-ticket {
    background-image: url(../../_images/order/icon-ticket.jpg);
}

.pic-order {
    background-image: url(../../_images/order/icon-order.jpg);
}

.pic-pay {
    background-image: url(../../_images/order/icon-pay.jpg);
}

.pic-key {
    background-image: url(../../_images/order/icon-key.jpg);
}

.pic-shop {
    background-image: url(../../_images/order/icon-shop.jpg);
}

#order-calendar {
    max-width: 900px;
    margin: 0 auto;
}

.order-calendar .fc-toolbar h2 {
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}

.order-calendar .fc-state-default {
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.order-calendar th.fc-day-header {
    background-color: #050a19;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0;
}

.order-calendar .fc-event,
.order-calendar .fc-event-dot {
    background-color: transparent;
    border: 0;
    letter-spacing: 1px;
    font-size: 1em;
    text-align: center;
}

.order-calendar .fc-highlight {
    background-color: #eed24a;
}

.fc-unthemed td.fc-today {
    background: rgba(238, 210, 74, .5);
}

.ticket-info {
    font-size: 14px;
    color: rgba(5, 10, 25, 0.6);
    position: absolute;
    top: 0;
    right: 0;
}

.order-select-item .radio {
    margin: 20px 0;
}

.order-select-item .radio label,
.order-select-item .checkbox label {
    font-size: 16px;
    padding-left: 30px;
}

.order-select-item .radio label input[type="radio"],
.order-select-item .checkbox label input[type="checkbox"] {
    width: 20px;
    height: 24px;
    margin-left: -25px;
}

.checkbox a{
    font-size: 16px;
}

.ticket-note p {
    font-size: 15px;
    line-height: inherit;
}

.ticket-type-box {
    border: 1px solid #050a19;
    padding: 20px;
}

.ticket-type-box .list-item {
    font-size: 16px;
    margin-bottom: 10px;
}

.ticket-type-box span.left-title {
    color: rgba(5, 10, 25, .5);
    font-weight: 600;
    padding: 0 5px;
    width: 60px;
    display: inline-block;
}

.ticket-type-box span.routename {
    display: inline-block;
    width: calc(100% - 65px);
    vertical-align: top;
}

.order-select-item span.left-title {
    color: rgba(5, 10, 25, .5);
    font-weight: 600;
    padding: 0 5px;
    width: 80px;
    display: inline-block;
}

.order-result {
    border-bottom: 2px dashed rgba(5, 10, 25, .3);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.ticket-type-item,
.quantity {
    display: inline-block;
}

.ticket-type-item {
    width: calc(100% - 100px);
}

.quantity {
    width: 100px;
    text-align: right;
    font-size: 18px;
    font-weight: 600;
}

.quantity .input-group {
    max-width: none;
}

.quantity .input-group .btn {
    padding: 0;
    border: 0;
    line-height: 30px;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    height: 30px;
    width: 30px;
    text-align: center;
    background-color: #f3f3f3;
    color: #050a19;
}

.quantity .input-group .btn:hover,
.quantity .input-group .btn:focus {
    background-color: #050a19;
}

.quantity .input-group .btn:hover > i,
.quantity .input-group .btn:focus > i {
    color: #fff;
}

.quantity input.form-control {
    background-color: transparent;
    font-size: 16px;
    color: #050a19;
}

.ticket-buy-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 5px;
}

.ticket-type-item h4 {
    margin-bottom: 3px;
}

.ticket-type-item p {
    color: rgba(5, 10, 25, 0.75);
    font-weight: 600;
    line-height: 18px;
}

.ticket-add-item {
    border-top: 2px solid rgba(5, 10, 25, .6);
}


.totalbox .list-total {
    display: inline-block;
}

.totalbox .list-total.title {
    float: left;
    text-align: left;
}

.totalbox .list-total.subtotal {
    float: right;
}

.totalbox .list-total.subtotal .price {
    text-align: right;
    font-size: 24px;
    font-weight: 600;
    color: #050a19;
}

.totalbox .list-total.subtotal .price:before {
    font-size: 16px;
    font-weight: 600;
    color: rgba(5, 10, 25, .5);
    content: "NT$";
}

.cartlist .totalbox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-align: end;
    -webkit-box-align: end;
    align-items: flex-end;
    margin: 40px 0;
}

.cartlist .totalbox .list-total{
    float: none;
    padding: 0;
}

.ticket-type-box.fixed {
    position: fixed;
    width: 360px;
    top: 40px;
    background-color: #fff;
}

.contact-form.m-t-0 {
    margin-top: 0;
}

.success-container {
    max-width: 900px;
    margin: 0 auto;
}

.success-box {
    background-color: #f3f3f3;
    padding: 20px;
    margin-bottom: 20px;
}

.list-item {
    margin-bottom: 20px;
}

.order-content .info {
    margin: 50px 0;
}

@media (max-width: 1199px) and (min-width: 768px){
    .ticket-type-item,
    .quantity {
        width: 100%;
        text-align: left;
    }
}

@media (max-width:480px) {
    .stepbox > span {
        margin: 0;
    }
    .ticket-type-item,
    .quantity {
        width: 100%;
        text-align: left;
    }
}

/*member
-----------------------------------*/

.agency-notice h2 {
    padding-bottom: 10px;
}

.agency-notice h4 {
    margin-bottom: 0px;
}

.agency-notice ul {
    list-style: none;
    -webkit-padding-start: 0px;
}

.agency-notice ul.nav > li {
    display: inline-table;
    margin: 10px;
    padding: 0 10px;
    border-top: 5px solid #f5f5f5;
    width: calc(33.3333% - 30px);
}

.traveler .step1 {
    background-image:
}

.register-form {
    width: 900px;
}

.register-form .form-group label {
    text-align: right;
}

.register-form .form-group label.text-left {
    text-align: left;
}

.twzipcode {
    text-align: left;
}

.ticket-type-box .btnbox {
    margin-bottom: 0;
}

.btn-login {
    background-color: transparent;
}

.stepok--box {
    padding: 20px 0;
    background-color: #f3f3f3;
    text-align: center;
}

.stepok--box h3.color-purple {
    font-size: 18px;
    margin-top: 10px;
}

.line-at{
    margin: 60px 0;
}

.line-at .btn {
    height: 34px;
    overflow: hidden;
}

.line-at .btn img {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    width: 53px;
}

.line-at .btn:hover img,
.line-at .btn:focus img {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.filter-box .label{
    color: #939191;
    font-size: 100%;
    display: block;
    text-align: left;
    padding-left: 0;
    font-weight: normal;
}

@media (max-width:900px) {
    .register-form {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .agency-notice ul.nav > li {
        width: calc(50% - 30px);
    }
    .line-at {
        margin-bottom: 40px;
    }
}

@media (max-width:480px) {
    .agency-notice ul.nav > li {
        width: calc(100% - 30px);
    }
    .register-form .form-group label {
        text-align: left;
    }
}

/*attractions
-----------------------------------*/

figure.listbox {
    /*border: 1px solid #fff;*/
    margin-bottom: 50px;
}

.attr-title {
    padding: 20px 10px 5px 10px;
    font-size: 16px;
    height: 48px;
    line-height: 1.5;
    overflow: hidden;
}

.attr-text {
    padding: 0px 10px 20px 10px;
}

.attr-text p {
    font-size: 14px;
    height: 42px;
    line-height: 1.5;
    overflow: hidden;
    margin-bottom: 0;
    color: #444;
}

.attr-text a {
    background-color: transparent;
}

figure.listbox:hover .attr-text p,
figure.listbox:hover .attr-title {
    color: #050a19;
}

/* 4 Template Components
----------------------------------------------------------------------------- */

.imgzoom .img {
    position: relative;
    overflow: hidden;
}

.imgzoom:hover .img:before {
    background-color: rgba(238, 210, 74, 0.75);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.imgzoom:hover .img:after {
    content: "";
    background: url(../../_images/all/icon-railbike-w.png) no-repeat 0 0;
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
}

.pagination > li > a,
.pagination > li > span {
    font-size: 22px;
    font-family: 'Yrsa', serif;
    ;
    padding: 0;
    width: 30px;
    height: 30px;
}

.pagination > li:first-child > a > i,
.pagination > li:last-child > a > i {
    background: url(../../_images/all/page-defult.png) no-repeat 0 0;
    width: 10px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

.pagination > li:first-child > a:hover > i,
.pagination > li:last-child > a:hover > i {
    background: url(../../_images/all/page-hover.png) no-repeat 0 0 transparent;
}

.pagination > li:last-child > a > i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.pagination > li:first-child > a:hover,
.pagination > li:first-child > span:hover,
.pagination > li:first-child > a:focus,
.pagination > li:first-child > span:focus,
.pagination > li:last-child > a:hover,
.pagination > li:last-child > span:hover,
.pagination > li:last-child > a:focus,
.pagination > li:last-child > span:focus {
    background-color: transparent;
    border-color: transparent;
}

.btn {
    line-height: normal;
    font-weight: 400;
}

.btn-back {
    border: 1px solid #050a19;
    color: #050a19;
    min-width: 160px;
    font-size: 14px;
}

.btn-sm{
    min-width: auto;
}

.btn-md {
    font-size: 15px;
    letter-spacing: 2px;
    min-width: 160px;
}

.btn-lg {
    width: 100%;
    font-size: 18px;
    letter-spacing: 2px;
}

.btn-black {
    border: 1px solid #050a19;
    color: #050a19;
}

.btn-back:hover,
.btn-black:hover {
    background: #050a19;
    color: #fff;
}

.btn-bg-black,
.btn-bg-black:focus{
    background-color: #050a19;
    color: #fff;
    border: 0;
}

.btn-bg-black:hover {
    background-color: #fff;
    color: #050a19;
    border: 1px solid #050a19;
}

.btn-bg-yellow,
.btn-bg-yellow:focus {
    background-color: #eed24a;
    color: #fff;
}

.btn-bg-yellow:hover{
    background-color: #050a19;
    color: #fff;
}

.btn-nb:hover,
.btn-nb:focus {
    color: hsla(255, 0%, 60%, 1);
    background-color: transparent;
    outline: none;
}

.btn-black i.fa-angle-left {
    margin-right: 5px;
    font-size: 18px;
}

.error::before {
    content: none;
}

.form-group .col-sm-9 .error {
    right: 16px;
}

.input-captcha .error {
    right: 100px;
}

.input-captcha.col-sm-9 .error {
    right: 118px;
}

.has-error .form-control {
    border-color: #eed24a;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #efd973;
}

.has-error .form-control:focus {
    border-color: #eed24a;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #efd973;
}

.underline{
    text-decoration: underline;
}

/* 5 Navigations
----------------------------------------------------------------------------- */

.nav-menu .navbar-nav > li {
    font-weight: 300;
    opacity: .9;
}

.nav-menu .navbar-nav > li:hover .dropdown-menu {
    display: block;
}

.navbar-nav > li > .dropdown-menu {
    min-width: 100px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.9);
    border: 0;
    border-radius: 0;
    padding: 5px;
}

.navbar-nav > li > .dropdown-menu > li > a {
    color: #fff;
    padding: 5px 10px;
    font-size: 15px;
    text-align: center;
    letter-spacing: 2.5px;
    font-weight: 300;
    line-height: normal;
}

.navbar-nav > li > .dropdown-menu > li:last-child > a {
    border-bottom: 0;
}

.navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-nav > li > .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #eed24a;
    text-decoration: none;
    background-color: transparent;
}

.header-link.link-r.nav-menu .navbar-nav > li.language-text {
    letter-spacing: 2.5px;
}

.son-menu_left li a {
    font-size: 16px;
}

.son-menu_left i {
    float: right;
}

.son-menu_left .dropdown.open .icon-plus:before {
    content: "\e81a";
}

ul.dropdown-menu > li > a {
    padding: 5px 30px;
}

ul.dropdown-menu > li > a.active {
    color: #de7388;
}

.mh-head {
    background: transparent;
    color: #fff;
    width: 100%;
    height: auto;
    padding: 5px 0;
}

.mh-head .hamburger {
    -webkit-transform: scale(.6, .6) translateY(-50%);
    transform: scale(.6, .6) translateY(-50%);
}

.mh-head .hamburger-inner,
.mh-head .hamburger-inner:after,
.mh-head .hamburger-inner:before {
    background: #fff;
}

.mm-panels > .mm-panel.mm-hasnavbar {
    padding-top: 60px;
}

.mm-panels > .mm-panel.mm-hasnavbar#mm-1 {
    padding-top: 0px;
}

.mm-btn {
    width: 40px;
    height: 60px;
}

nav.mm-menu .mm-navbar {
    height: 60px;
    padding: 10px 0;
}

nav.mm-menu .mm-navbar .mm-title {
    width: 266px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /*background-image: url(../../_images/all/logo.svg);*/
    text-indent: -9999px;
    display: inline-block;
    padding: 0;
}

.mm-menu.mm-theme-dark {
    background: #050a19;
    border-color: transparent;
    color: rgba(255, 255, 255, .8);
}

.mm-listview > li,
.mm-listview > li .mm-next,
.mm-listview > li .mm-next:before,
.mm-listview > li:after {
    border-color: hsla(225, 47%, 12%, 1);
}

.mm-listview > li > a,
.mm-listview > li > span {
    font-size: 120%;
    letter-spacing: 1.5px;
    padding: 20px;
}

.mm-next:after,
.mm-prev:before {
    width: 12px;
    height: 12px;
}

.mm-menu.mm-theme-dark .mm-listview > li .mm-next:after,
.mm-menu.mm-theme-dark .mm-btn:after,
.mm-menu.mm-theme-dark .mm-btn:before {
    border-color: rgba(255, 255, 255, .8);
}

.mm-listview > li:not(.mm-divider):after {
    left: 0px;
}

.language-body {
    position: relative;
}

.language-body:after {
    content: 'Language';
    font-family: 'Yrsa', serif;
    font-size: 13px;
    letter-spacing: 1px;
    position: absolute;
    top: 22px;
}

.language-body > a {
    margin-top: 10px;
    min-width: 60px;
}

.navbar-nav > li.language-body > .dropdown-menu {
    top: calc(100% - 7px);
}

.navbar-nav>li.language-body:before{
    bottom: 6px;
}

@media(max-width:1024px) {
    .language-body:after {
        top: 20px;
    }
    .language-body > a {
        margin-top: 8px;
    }
}

@media(max-width:1024px) {
    .mobile-menu {
        height: 70px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .m-logo a {
        display: block;
        width: 200px;
        height: 40px;
        margin: 0 auto;
    }
}

@media(max-width:1440px) {
    .nav-menu .navbar-nav > li {
        padding: 25px 10px;
    }
}

@media(max-width:1366px) {
    .header-link.link-r.nav-menu .navbar-nav > li {
        padding: 28px 2px 18px;
    }
    .header-link.link-r.nav-menu .navbar-nav > li .btn {
        min-width: 80px;
    }
    li.language-text {
        display: none;
    }
    li.language-body {
        margin-left: 5px;
    }
    .language-body:after {
        top: 26px;
    }
}

@media (max-width: 1200px) {
    .navbar-nav>li.language-body:before{
        bottom: 8px;
    }
}

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

/* 6 Blocks/Widgets
----------------------------------------------------------------------------- */

.editor {
    margin-top: 0;
}

.editor h2 {
    border: 0;
}


/*-----browing-history-----*/

.browsing-header {
    background-color: hsl(0, 0%, 10%);
    text-align: center;
    padding: 5px;
}

.btn-clear {
    color: hsl(0, 0%, 100%);
    font-size: 13px;
    padding: 3px 5px;
    background-color: hsl(0, 0%, 65%);
    width: 100%;
    font-weight: 200;
    letter-spacing: 1px;
    margin-top: 10px;
}

@media(max-width:1199px) {
    .btn-clear {
        font-size: 110%;
        padding: 10px;
        width: auto;
        margin: 20px;
        display: block;
    }
}

/*-----map-----*/

.map {
    width: 100%;
    min-height: 300px;
}

.maplabels {
    color: #de7388;
}


/*order ticket*/

.call-icon-box{
    position: relative;
    height: 250px;
}

.call-icon {
    position: absolute;
    visibility: hidden;
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 999 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    transition: visibility .5s;
}

.call-icon > a {
    display: block;
    height: 100%;
}

.shop-cart {
    right: -40px;
    top: 400px;
}

.shop-cart i {
    width: 60px;
    height: 60px;
    background: #050a19;
    border-radius: 50%;
    color: #fff;
    line-height: 60px;
    text-align: center;
    display: block;
    font-size: 20px;
}

.phone {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 20px;
}
.online-travel .phone {
    left: 50%;
    transform: translateX(-50%);
}
.circle-center .phone{
    left: 50%;
    transform: translateX(-50%);
}

.banner .phone{
    left: calc(50% - 90px);
}

.banner .online-travel .phone{
    left: calc(50% + 90px);
}

.mesg {
    right: 30px;
    top: 200px;
}

.phone.show,
.mesg.show,
.shop-cart.show {
    visibility: visible;
}

.ph-circle {
    width: 180px;
    height: 180px;
    top: 0px;
    left: 10px;
    position: absolute;
    background-color: #eed24a;
    border-radius: 100%;
    border: 0px solid rgba(30, 30, 30, 0.4);
    border: 0px solid #bfebfc 9;
    opacity: .1;
    -webkit-animation: circle-anim 1.2s infinite ease-in-out;
    animation: circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.ph-img-circle {
    width: 120px;
    height: 120px;
    top: 30px;
    left: 50%;
    position: absolute;
    background-color: rgba(238, 210, 74, 0.02);
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .7;
    /* -webkit-animation:circle-img-anim 1s infinite ease-in-out;
    -moz-animation: circle-img-anim 1s infinite ease-in-out;
    -ms-animation: circle-img-anim 1s infinite ease-in-out;
    -o-animation: circle-img-anim 1s infinite ease-in-out;
    animation: circle-img-anim 1s infinite ease-in-out;*/
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ph-circle-fill {
    width: 140px;
    height: 140px;
    top: 20px;
    left: 30px;
    position: absolute;
    background-color: #050a19;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .1;
    -webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;
    animation: circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.phone.green .ph-circle {
    border-color: #eed24a;
    opacity: .1;
}
.phone.purple .ph-circle{
    border-color: #a34af7;
    background-color: #a34af7;
}

.phone.green .ph-img-circle {
    background-color: #eed24a;
    opacity: 1;
}
.phone.purple .ph-img-circle{
    background-color: #a34af7;
}

.phone.green .ph-circle-fill {
    background-color: #eed24a;
    opacity: .3!important;
}
.phone.purple .ph-circle-fill{
    background-color: #a34af7;
}

.green:hover .ph-circle {
    border-color: #ddd;
    background-color: #ddd;
    opacity: .5;
}

.green:hover .ph-img-circle,
.purple:hover .ph-img-circle {
    background-color: #050a19;
    opacity: 1;
}

.shop-cart:hover i {
    background-color: #050a19;
    opacity: .75 !important;
}

.phone.green:hover .ph-circle-fill,
.purple:hover .ph-circle-fill {
    background-color: #050a19;
}

.ph-img-circle .order-box {
    position: relative;
    width: 120px;
    height: 120px;
}

.order-text,
.order-text-eng {
    color: #fff;
    text-align: center;
    width: 100%;
}

.order-text {
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.order-text-eng {
    font-family: 'Yrsa', serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.75px;
    margin-bottom: 0;
    display: block;
}

/*
@media (max-width: 767px) {
    .phone {
        bottom: 10px;
        left:20%;
        transform: translateX(-20%);
    }
    .purple.phone{
        left:80%;
        transform: translateX(-80%);
    }
}
*/


@media (max-width: 480px) {
    .phone {
        bottom: -20px;
    }
    .banner .phone {
        left: calc(50% - 65px);
    }
    .banner .online-travel .phone {
        left: calc(50% + 65px);
    }
    .order-text {
        font-size: 14px;
        line-height: 24px;
    }
    .order-text-eng {
        font-size: 20px;
        line-height: 24px;
    }
    .ph-img-circle .order-box {
        width: 90px;
        height: 90px;
    }
    .ph-img-circle {
        width: 90px;
        height: 90px;
    }
    .ph-circle-fill {
        width: 110px;
        height: 110px;
        left: 45px;
    }
    .ph-circle {
        width: 150px;
        height: 150px;
        left: 25px;
    }
}

@-webkit-keyframes circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        -webkit-opacity: .1
    }
    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        -webkit-opacity: .5
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: .1
    }
}

@-webkit-keyframes circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@-webkit-keyframes circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@keyframes circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-webkit-keyframes circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@keyframes circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }
}


/*跑馬燈*/

.marquee {
    position: absolute;
    bottom: -14px;
    width: 100%;
    z-index: 2;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 38px;
}

.marquee img {
    height: 20px;
    width: auto;
    margin-right: 5px;
}


/*重大公告彈窗*/

#alert-w .modal-backdrop.in,
#alert-w2 .modal-backdrop.in {
    filter: alpha(opacity=80);
    opacity: .8;
}

#alert-w .btn-close,
#alert-w2 .btn-close {
    background: none;
    position: absolute;
    right: 0px;
    font-size: 20px;
    z-index: 9999;
    border: none;
    color: #050a19;
    min-width: auto;
}

#alert-w .modal-content,
#alert-w2 .modal-content {
    background: #fff;
    color: #050a19;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 15px;
}

#alert-w .modal-header,
#alert-w2 .modal-header {
    min-height: 100px;
    padding: 10px;
    border-bottom: none;
    background: #eed24a;
}

#alert-w .modal-header .title-img,
#alert-w2 .modal-header .title-img{
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
}

#alert-w .modal-header .title-img img,
#alert-w2 .modal-header .title-img img {
    width: 100%;
}

#alert-w .modal-header .modal-title,
#alert-w2 .modal-header .modal-title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 8px;
    margin-top: 15px;
}

#alert-w .modal-header .modal-title .en,
#alert-w2 .modal-header .modal-title .en {
    display: block;
    font-size: 24px;
    font-family: 'Yrsa', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#alert-w .modal-body,
#alert-w2 .modal-body {
    padding: 40px;
}

@media (max-width: 375px) {
    #alert-w .modal-header .modal-title .en,
    #alert-w2 .modal-header .modal-title .en {
        font-size: 18px;
    }
}

/* 7 bxslider
----------------------------------------------------------------------------- */

/* 8 Slick
----------------------------------------------------------------------------- */

.history-slick .item {
    border: 1px solid #ddd;
    width: 80px !important;
    height: 80px !important;
}

.photo {
    position: relative;
}

.history-slick .item:hover {
    border: 1px solid #de7388;
}

.photo .slider-for {
    width: 900px;
}

.photo .slider-nav {
    position: absolute;
    bottom: 50px;
    right: -50px;
    width: 380px;
    height: 120px;
}

.photo .slider-nav .item.slick-slide {
    position: relative;
    cursor: pointer;
}

.photo .slider-nav .item.slick-slide:hover:before {
    background-color: rgba(238, 210, 74, 0.75);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 5px;
    z-index: 2;
}

.photo .slider-nav .item.slick-slide:hover:after {
    content: "";
    background: url(../../_images/all/icon-railbike-w.png) no-repeat 0 0;
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
}

.photo .slider-nav .slick-current img {
    border: 1px solid rgba(255, 255, 255, 0);
}

.photo .slider-nav .slick-active img {
    border: 1px solid #fff;
}

.slick-slide img {
    max-width: 100%;
}

.photo .slick-dots {
    bottom: -35px;
}

@media(max-width:1199px) {
    .photo .slider-for {
        width: 700px;
    }
}

@media(max-width:1024px) {
    .photo .slider-nav {
        bottom: 0;
        right: 0;
        width: 380px;
        height: 90px;
    }
}

@media(max-width:991px) {
    .photo .slider-for {
        width: calc(100% - 285px);
    }
    .photo .slider-nav {
        display: none;
    }
}

@media(max-width:767px) {
    .photo .slider-for {
        width: 100%;
    }
    .photo .slider-for .item {
        padding-right: 0;
    }
    .photo .slick-dots li button {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}

/* 9 Owl carousel
----------------------------------------------------------------------------- */

#myVideo {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}

@media(max-width:767px) {
    #myVideo {
        display: none;
    }
}

body.home .banner .owl-nav .owl-prev,
body.home .banner .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    color: transparent;
    background: url(../../_images/index/btn-nav.png) no-repeat center center;
    opacity: .5;
    width: 60px;
    height: 60px;
}

body.home .banner .owl-nav .owl-prev:hover,
body.home .banner .owl-nav .owl-next:hover {
    opacity: 1;
}

body.home .banner .owl-nav .owl-prev {
    right: 0;
}

body.home .banner .owl-nav .owl-next {
    left: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}


body.home .banner .owl-carousel .owl-item .item {
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 100vh;
}

@media(max-width:767px) {
    body.home .banner .owl-carousel .owl-item .item {
        background-size: cover;
        background-position: center;
    }
    .owl-carousel .item-video {
        height: 100vh;
        background-size: cover;
        background-position: center;
    }
}

body.home .banner .owl-carousel .owl-item .item a {
    display: block;
    width: 100%;
}

.owl-carousel .item-video {}

.owl-carousel .owl-video-tn {
    background-size: cover !important;
}

.dot-top .owl-dots {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -75px;
    bottom: inherit;
}

.dot-top .owl-dot span {
    width: 10px;
    height: 10px;
}

.dot-top .owl-dot.active span,
.dot-top .owl-dot:hover span,
.dot-top .owl-dot:focus span {
    background-color: #050a19;
    border: 0;
}

.attractions-carousel {
    margin-top: 90px;
}

.attractions-carousel .item a {
    position: relative;
    display: block;
}

.attractions-carousel .item a:hover:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(238, 210, 74, 0.75);
    z-index: 9;
}

.attractions-carousel .item a .item--hover {
    opacity: 0;
    display: none;
}

.attractions-carousel .item a:hover .item--hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.item--hover .icon-img {
    width: 80px;
    margin-bottom: 20px;
}

.item--hover p.name {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
}

.item--hover .morebox {
    position: absolute;
    bottom: 50px;
    color: #fff;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.item--hover .morebox:hover {
    color: #050a19;
}

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

#searchBox .input-search {
    margin-bottom: 20px;
}


.mm-listview > li.search-menu {
    width: 100%;
    padding: 20px 15px 10px;
    display: inline-block;
}

.mm-listview > li.search-menu .form-control,
.mm-listview > li.search-menu .btn-search {
    width: auto;
}

.mm-listview > li.search-menu .form-control {
    width: calc(100% - 100px);
    margin-right: 10px;
}

.mm-listview > li.search-menu .btn.btn-search {
    margin-top: 0;
    padding: 7.5px;
}




/*coupon 優惠券----------------------*/

/*登錄序號*/
.serinum-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 2px dashed rgba(5, 10, 25, .3);
    padding: 20px 0;
    position: relative;
}

.serinum-item .sort{
    color: #939191;
    margin: 20px;
}

.serinum-item .judge-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.serinum-item .judge-icon{
    font-family: 'fontAwesome';
    line-height: 18px;
    margin: 0 15px;
}

.serinum-item .judge-icon.judge-success:before{
    content: '\f00c';
    font-size: 18px;
    color: #afcd5f;
}

.serinum-item .judge-icon.judge-fail:before{
    content: '\f00d';
    font-size: 20px;
    color: #ea5d48;
}

.serinum-item .judge-txt{
    width: 100%;
    margin-top: 5px;
}

.serinum-item .form-group{
    margin-bottom: 0;
}

.serinum-item .form-group .input{
    display: inline-block;
    margin-bottom: 0;
}

.serinum-item .form-group .form-control{
    width: 90px;
}

.serinum-item .del{
    color: #939191;
    font-size: 18px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    min-width: auto;
    border: none;
}

.serinum-item .del:hover{
    color: #050a19;
}

.serinum-box .btnbox{
    margin: 40px 0 20px;
}
.serinum-item.online-travel .form-group .form-control{
    width: 100%;
}

@media (max-width: 767px){
    .serinum-item .sort{
        margin: 0 10px 0 5px;
    }
    .serinum-item .judge-txt{
        width: calc(100% - 40px);
    }
    .serinum-item .form-group .form-control{
        width: 60px;
    }
}

@media (max-width: 425px){
    .serinum-item .sort{
        width: 100%;
        margin: 0 0 5px 0;
    }
    .serinum-item{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .serinum-item .judge-icon {
        position: absolute;
        top: 22px;
        left: 5px;
    }
    .serinum-item .judge-txt{
        width: 100%;
    }
    .serinum-item .del{
        top: 12px;
        -webkit-transform: none;
        transform: none;
    }
}



/*datepicker 日期套件----------------------*/

.ui-widget {
  font-family: 'Arial', 'Helitica', 'WenQuanYi Zen Hei', 'Microsoft JhengHei', 'Heiti TC', 'Droid Sans', 'Open Sans', sans-serif;
}

.ui-datepicker.ui-widget.ui-widget-content {
  border: 1px solid #dcdce6;
  border-top: none;
  border-radius: 0;
  padding: 0;
}

.ui-datepicker .ui-datepicker-header {
  border: none;
  border-radius: 0;
  background: #050a19;
  color: #ffffff;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ui-datepicker .ui-datepicker-prev {
  background: #ffffff;
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .15s ease-in-out;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  cursor: pointer;
  left: 5px;
  -webkit-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
}

.ui-datepicker .ui-datepicker-prev:hover {
  border: none;
  opacity: .8;
}

.ui-datepicker .ui-datepicker-prev span {
  position: static;
  background: url(../../_images/all/icon-arrow.svg) no-repeat center center;
  background-size: 20px 20px;
  margin: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker .ui-datepicker-next {
  background: #ffffff;
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .15s ease-in-out;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  cursor: pointer;
  right: 5px;
}

.ui-datepicker .ui-datepicker-next:hover {
  border: none;
  opacity: .8;
}

.ui-datepicker .ui-datepicker-next span {
  position: static;
  background: url(../../_images/all/icon-arrow.svg) no-repeat center center;
  background-size: 20px 20px;
  margin: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker tr {
  border-bottom: 1px solid #f5f5f5;
}

.ui-datepicker tr:last-child {
  border-bottom: none;
}

.ui-datepicker tr th {
  padding: 5px;
  background: #f3f3f3;
}

.ui-datepicker tr td {
  padding: 5px;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  border: none;
  border-radius: 0;
  background: none;
  color: #050a19;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-align: center;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  color: #fff;
  background: #eed24a;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: #fff;
  background: #eed24a;
}


.during-txt{
    display: inline-block;
    margin: 5px;
}



.ui-datepicker.ui-widget.ui-widget-content {
  border: 1px solid #dcdce6;
  border-top: none;
  border-radius: 0;
  padding: 0;
}

.ui-datepicker .ui-datepicker-header {
  border: none;
  border-radius: 0;
  background: #0e1420;
  color: #ffffff;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ui-datepicker .ui-datepicker-prev {
  background: #ffffff;
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .15s ease-in-out;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  cursor: pointer;
  left: 5px;
  -webkit-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
}

.ui-datepicker .ui-datepicker-prev:hover {
  border: none;
  opacity: .8;
}

.ui-datepicker .ui-datepicker-prev span {
  position: static;
  background: url(../_images/all/icon-arrow.svg) no-repeat center center;
  background-size: 20px 20px;
  margin: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker .ui-datepicker-next {
  background: #ffffff;
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  transition: .15s ease-in-out;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  cursor: pointer;
  right: 5px;
}

.ui-datepicker .ui-datepicker-next:hover {
  border: none;
  opacity: .8;
}

.ui-datepicker .ui-datepicker-next span {
  position: static;
  background: url(../_images/all/icon-arrow.svg) no-repeat center center;
  background-size: 20px 20px;
  margin: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker tr {
  border-bottom: 1px solid #dcdce6;
}

.ui-datepicker tr:last-child {
  border-bottom: none;
}

.ui-datepicker tr th {
  font-size: 0.75rem;
  padding: 5px;
  background: #f5f5f8;
}

.ui-datepicker tr td {
  padding: 5px;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  border: none;
  border-radius: 3px;
  background: none;
  color: #0e1420;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-align: center;
}

.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  color: #0e1420;
  background: #fabe2c;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  color: #0e1420;
  background: #dcdce6;
}



.tag-box{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: flex-start;
    align-items: flex-start;
    border-top: 3px solid #e98b41;
}

.tag-box .tag-title{
    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -o-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 22px;
    color: #fff;
    background: #e98b41;
    padding: 2px 40px 5px 15px;
    margin-right: 15px;
    position: relative;
}

.tag-box .tag-title:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}

@media (max-width: 575px){
    .tag-box{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* 20191210新增 */

.banner .phone {
    left: calc(50% - 400px);
}
.banner .online-travel .phone {
    left: calc(50% - 240px);
}
.banner .food .phone {
    left: calc(50% - 80px);
}
.banner .entertain .phone {
    left: calc(50% + 80px);
}
.banner .accommodation .phone {
    left: calc(50% + 240px);
}
.banner .travel-map .phone {
    left: calc(50% + 400px);
}

.phone.yellow .ph-circle {
    border-color: #eed24a;
    background-color: #eed24a;
}
.phone.yellow .ph-img-circle {
    background-color: #eed24a;
}
.phone.yellow .ph-circle-fill {
    background-color: #eed24a;
}

.phone.red .ph-circle {
    border-color: #EA5D49;
    background-color: #EA5D49;
}
.phone.red .ph-img-circle {
    background-color: #EA5D49;
}
.phone.red .ph-circle-fill {
    background-color: #EA5D49;
}

.order-ticket .phone.green .ph-circle {
    border-color: #A8C95E;
    background-color: #A8C95E;
}
.order-ticket .phone.green .ph-img-circle {
    background-color: #A8C95E;
}
.order-ticket .phone.green .ph-circle-fill {
    background-color: #A8C95E;
}

.phone.orange .ph-circle {
    border-color: #EB8C3C;
    background-color: #EB8C3C;
}
.phone.orange .ph-img-circle {
    background-color: #EB8C3C;
}
.phone.orange .ph-circle-fill {
    background-color: #EB8C3C;
}

.phone.blue .ph-circle {
    border-color: #62CCC2;
    background-color: #62CCC2;
}
.phone.blue .ph-img-circle {
    background-color: #62CCC2;
}
.phone.blue .ph-circle-fill {
    background-color: #62CCC2;
}

.ph-img-circle {
    opacity: .9;
}

.call-icon:hover .ph-img-circle, 
.order-ticket .call-icon.green:hover .ph-img-circle {
    background-color: #050a19;
    opacity: 1;
}

.bg-box {
    width: 100%;
    height: 90px;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 37px;
    z-index: 99;
}

.order-btn-pad {
    position: absolute;
    z-index: 999;
    bottom: 4%;
    width: 100%;
    display: flex;
}

.order-btn-pad a {
    color: #fff;
    width: 25%;
    margin: 0;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-shadow: 2px -2px 5px rgba(51, 51, 51, 0.5);
}

.order-btn-pad a:focus, .order-btn-pad a:hover {
    box-shadow: 1px -1px 2px rgba(51, 51, 51, 0.8);
}

.order-btn-pad a.food {
    background: #EA5D49;
}
.order-btn-pad a.entertain {
    background: #A8C95E;
}
.order-btn-pad a.accommodation {
    background: #EB8C3C;
}
.order-btn-pad a.travel-map {
    background: #62CCC2;
}

.food .order-box img, 
.entertain .order-box img, 
.accommodation .order-box img, 
.travel-map .order-box img {
    position: relative;
    left: -4px;
    top: -12px;
    width: 60px;
    display: block;
    margin: 24px auto 6px;
}

.food .order-box p.order-text, 
.entertain .order-box p.order-text, 
.accommodation .order-box p.order-text, 
.travel-map .order-box p.order-text {
    top: 38%;
    transform: translateY(0);
}

.order-btn-pad a img {
    width: 25px;
    margin-right: 8px;
}

.icon-food:before {
    background-image: url(../../_images/sightsee/food-b.png);
}
li:hover .icon-food:before, li.active .icon-food:before, li.active:hover .icon-food:before {
    background-image: url(../../_images/index/food.png);
}

.icon-play:before {
    background-image: url(../../_images/sightsee/enterainer-b.png);
}
li:hover .icon-play:before, li.active .icon-play:before, li.active:hover .icon-play:before {
    background-image: url(../../_images/index/enterainer.png);
}

.icon-hotel:before {
    background-image: url(../../_images/sightsee/hotel-b.png);
}
li:hover .icon-hotel:before, li.active .icon-hotel:before, li.active:hover .icon-hotel:before {
    background-image: url(../../_images/index/hotel.png);
}

.food .imgzoom:hover .img:after {
    content: "";
    background: url(../../_images/index/food.png) no-repeat 0 0;
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-size: contain;
}

.food .news--box .listbox .imgbox {
    max-width: 160px;
}

#alert-w3 .modal-content {
    background: #fff;
    color: #050a19;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 15px;
}
#alert-w3 .modal-header {
    min-height: 100px;
    padding: 10px;
    border-bottom: none;
    background: #eed24a;
}
#alert-w3 .modal-header .title-img {
    width: 80px;
    height: 80px;
    float: left;
    margin-right: 10px;
}
#alert-w3 .modal-header .title-img img {
    width: 100%;
}
#alert-w3 .modal-header .modal-title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 8px;
    margin-top: 15px;
}
#alert-w3 .modal-header .modal-title .en {
    display: block;
    font-size: 24px;
    font-family: yrsa,serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#alert-w3 .modal-body {
    padding: 40px;
}

#alert-w3 .btn-close {
    background: none;
    position: absolute;
    right: 0px;
    font-size: 20px;
    z-index: 9999;
    border: none;
    color: #050a19;
    min-width: auto;
}

.sp-img img {
    max-width: 100%;;
}

.sp-img2 {
    width: 100%;;
}

.mt-60 {
    margin-top: 60px;
}

.mt-200 {
    margin-top: 200px;
}

.mt-100 {
    margin-top: 100px;
}

.products--box {
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
}

#feature .feature_text p, #intro .feature_text p {
    letter-spacing: 3px;
    font-size: 15px;
    font-weight: 600;
}

.m-0 {
    margin: 0px;
}

.sp1 {
    margin: 14px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.pdt-item .infobox {
    margin: 12px;
}

.pdt-item .subject {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.pdt-item .listbox a {
    background-color: #fff;
}

.pdt-item .imgzoom:hover .img:after {
    content: "";
    background: url(../../_images/index/food.png) no-repeat 0 0;
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 3;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
}

.pdt-item .listbox a:hover {
    color: #0e1420;
}

#alert-w3 .modal-dialog {
    width: 50%;
    margin: 30px auto;
}

#alert-w3 .modal-body span {
    margin-bottom: 7px;
    display: inline-block;
}

#alert-w3 .modal-body span.price {
    color: #EA5D49;
}

.sp2 {
    list-style-type: decimal;
    margin-bottom: 100px;
}

ul.sp2>li {
    margin: 15px 0;
    letter-spacing: 5px;
    font-weight: 600;
}

.discount--box {
    margin-top: 100px;
}

.sp3 {
    margin-top: 60px;
    margin-bottom: 100px;
}

.btn-bg-black, .btn-bg-black:focus {
    background-color: #050a19;
    color: #fff;
    border: 1px solid #050a19;
}

/* .news--box .listbox .infobox {
    width: calc(100% - 160px);
} */

.news--box .listbox a {
    display: flex;
}

.search_server .modal-dialog {
    width: 600px;
}

.search_server .modal-title {
    font-size: 27px;
    font-weight: 700;
    text-align: center;
}

/* 店家名稱、帳號、密碼、連絡人、連絡電話、店家地址、營業項目、項目分類(複選) */

.search_server ul {
    padding: 0;
}

.search_server ul > li {
    margin: 15px;
    line-height: 24px;
    color: #555;
    list-style: none;
}

.agree {
    margin: 10px;
}

.search_server .btn-primary {
    border-color: #222;
}

.search_server .btn-primary:hover, .search_server .btn-primary:focus {
    background-color: #222;
}

.star {
    color: rgb(253, 103, 103);
}

.form-check-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem;
}

/* 轉盤 */

body.roulette {
    /* background-color: #d9aa8f; */
    background: url('../../_images/roulette/30830001.jpg') 100% 50% no-repeat;
    background-size: 100%;
}

@keyframes shiny {
    0% {fill: #FFB10F;}
    50% {fill: #ffe3a8;}
    100% {fill: #FFF;}
}

@keyframes go {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.roulette .main {
    padding-top: 130px;
    margin: 0 auto;
    font-family: '微軟正黑體', sans-serif;
    /* background-color: #3dbfbb; */
    max-width: 100%;
    min-width: 400px;
    overflow: hidden;
}

section.turntable {
    position: relative;
    margin: auto;
    max-width: 700px;
    max-height: 1000px;
}

section.turntable div.list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 70%;
    height: 70%;
    text-align: center;
    box-shadow: none;
}

section.turntable button.turntable_btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none;
    border: none;
    outline: none;
    font-weight: 900;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    font-size: 70px;
    color: #0080C0;
    background-color: #ca1814;
    cursor: pointer;
}

section.turntable button.turntable_btn:active, 
section.turntable button.turntable_btn:focus {
    cursor: default;
}

section.turntable button.turntable_btn::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #ffe3a8;
    z-index: -1;
    box-shadow: 1px 2px 4px #754f00;
}

section.turntable svg g.bottom {
    fill: rgba(0, 0, 0, 0.4);
}

section.turntable svg g.polyline polyline {
    /* fill: #0080C0; */
    fill: #f79101;
}

section.turntable svg g.polyline polyline:nth-child(odd) {
    /* fill: #00A2F3; */
    fill: #ffdb2a;
}

section.turntable svg > circle {
    fill: none;
    stroke: #4cb4e1;
    stroke-width: 5px;
    /*filter: drop-shadow(25px 25px 10px #000);*/
    /* box-shadow: 3px 3px 10px #000; */
}

section.turntable svg g.circle circle {
    fill: #fff;
    stroke: none;
    box-shadow: 0px 2px 5px #ccc;
}

section.turntable svg g.circle circle:nth-child(odd) {
    animation: shiny 0.8s linear infinite;
    -webkit-animation: shiny 0.8s linear infinite;
}

section.turntable svg g.circle circle:nth-child(even) {
    animation: shiny 0.8s 0.5s linear infinite;
    -webkit-animation: shiny 0.8s 0.5s linear infinite;
}

section.turntable svg g.mark circle {
    fill: #ca1814;
}

section.turntable svg g.mark polyline {
    fill: #ca1814;
    stroke: none;
}

section.turntable svg g.mark circle.round {
    fill: none;
    stroke: #ffebc2;
}

section.turntable div.list ul {
    list-style: none;
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    padding: 0;
}

section.turntable div.list ul li {
    color: #fff;
    font-size: 22.4px;
    position: absolute;
    width: 100%;
    height: 100%;
}

section.turntable div.list ul li p {
    font-size: 21px;
    line-height: 30px;
    margin-top: 25px;
    color: #6c3607;
    font-weight: 600;
}

section.turntable div.list ul li:nth-child(2) {
    transform: rotate(315deg);
}
section.turntable div.list ul li:nth-child(3) {
    transform: rotate(270deg);
}
section.turntable div.list ul li:nth-child(4) {
    transform: rotate(225deg);
}
section.turntable div.list ul li:nth-child(5) {
    transform: rotate(180deg);
}
section.turntable div.list ul li:nth-child(6) {
    transform: rotate(135deg);
}
section.turntable div.list ul li:nth-child(7) {
    transform: rotate(90deg);
}
section.turntable div.list ul li:nth-child(8) {
    transform: rotate(45deg);
}

section.turntable div.list ul.go {
    animation: go 0.8s linear 4;
    -webkit-animation: go 0.8s linear 4;
}

section.turntable button.turntable_btn:active, section.turntable button.turntable_btn:disabled {
    cursor: default;
}

section.turntable button.turntable_btn:active::after, section.turntable button.turntable_btn:disabled::after {
    box-shadow: none;
    margin-top: 2px;
    background-color: #ffda8f;
}

section.turntable svg g.polyline.go {
    animation: go 0.8s linear 4;
    -webkit-animation: go 0.8s linear 4;
}

section.turntable svg g.circle circle:nth-child(odd).go {
    animation: go 0.8s linear 4, shiny 0.8s linear infinite;
    -webkit-animation: go 0.8s linear 4, shiny 0.8s linear infinite;
}

/* .enter_nnum .main {
    padding-top: 130px;
} */

.enter_nnum .form-control {
    height: 34px;
    border: 1px solid #ccc;
    background: #fff;
}

@media (min-width: 768px) {
    .enter_nnum .form-inline .form-control {
        display: inline-block;
        width: 30%;
        vertical-align: middle;
    }
}

.enter_nnum .content {
    min-height: 500px;
}

button.btn.btn-bg-black.btn-rou {
    font-family: '微軟正黑體';
    background: #ffe151;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
    border: 0;
}

button.btn.btn-bg-black.btn-rou:hover {
    background: #eecf34;
}

/* RWD */

@media (max-width: 1199px) {

    iframe {
        height: 200px;
    }

    body.roulette {
        background: url(../../_images/roulette/30830001.jpg) 50% 50% no-repeat;
        height: 1400px;
        background-size: cover;
    }

    .roulette .main {
        padding-top: 300px;
    }

}

@media (max-width: 991px) {

    .roulette .main {
        padding-top: 130px;
    }

    .banner .phone {
        left: calc(50% - 100px);
        bottom: 6%;
    }
    .banner .online-travel .phone {
        left: calc(50% + 100px);
        bottom: 6%;
    }

    .bg-box {
        display: none;
    }

    .order-btn-pad a {
        padding: 12px 10px;
    }

    .order-btn-pad {
        bottom: 3%;
    }

    /* .food .news--box .listbox .imgbox {
        max-width: 100%;
    }

    .news--box .imgbox img {
        width: 100%;
    } */

    section.turntable div.list ul li p {
        font-size: 20px;
        line-height: 26px;
    }

    section.turntable button.turntable_btn {
        font-size: 60px;;
    }

    #alert-w3 .modal-dialog {
        width: 60%;
        margin: 30px auto;
    }

    section.turntable {
        max-width: 1000px;
    }

    body.roulette {
        height: 1024px;
        background-size: cover;
    }

}

@media (max-width: 767px) {

    .banner .phone {
        left: calc(50% - 100px);
        bottom: 4%;
    }
    .banner .online-travel .phone {
        left: calc(50% + 100px);
        bottom: 4%;
    }

    .bg-box {
        display: none;
    }

    /* body .list-food .submenu-tabs {
        justify-content: center;
    } */

    .store_info {
        margin-top: 20px;
    }

    #alert-w3 .modal-dialog {
        width: 70%;
        margin: 30px auto;
    }

    .search_server .modal-dialog {
        width: 500px;
    }

    .modal-backdrop.in {
        height: 1300px !important;
    }
    
}

@media (max-width: 575px) {

    section.turntable button.turntable_btn {
        font-size: 55px;
    }

    section.turntable div.list ul li p {
        font-size: 17px;
        line-height: 20px;
    }

    #alert-w3 .modal-dialog {
        width: 90%;
        margin: 30px auto;
    }

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

@media (max-width: 480px) {

    .banner .phone {
        left: calc(50% - 80px);
        bottom: 2%;
    }
    .banner .online-travel .phone {
        left: calc(50% + 80px);
        bottom: 2%;
    }

    .bg-box {
        display: none;
    }

    .order-btn-pad a {
        font-size: 12px;
        padding: 12px 2px;
    }

    .order-btn-pad a img {
        width: 20px;
        margin-right: 4px;
    }

    .order-btn-pad {
        bottom: 5%;
    }

    .news--box .imgbox img {
        /* position: absolute;
        top: 15%; */
        width: 100%;
    }

    /* .submenu-tabs {
        display: block;
    } */

    .submenu-tabs>li:last-child>a {
        margin-right: auto;
    }

    .submenu-tabs>li>a {
        margin: auto;
    }

    .store_info {
        margin-top: 20px;
    }

    .nav-tabs>li {
        float: none;
        margin: 5px;
    }

    .news--box .listbox a {
        display: block;
    }

    .food .news--box .listbox .imgbox {
        max-width: 100%;
    }

    .news--box .imgbox img {
        width: 100%;
    }

    section.turntable div.list ul li p {
        font-size: 12px;
        line-height: 14px;
    }

    section.turntable button.turntable_btn {
        font-size: 35px;
    }

    iframe {
        height: 400px;
    }

    #alert-w3 .modal-dialog {
        width: 100%;
        margin: 30px auto;
    }

    .search_server .modal-dialog {
        width: 300px;
    }

}

@media (width: 375px) {
    .order-btn-pad {
        bottom: 4%;
    }

    .search_server .modal-dialog {
        width: 280px;
    }
}

/* 20200302新增 */

@media (max-width:768px) {

    .submenu-tabs {
        padding: 0;
    }

    .info .title-son-content {
        margin: 0 0 30px;
    }

    .news .title-son-content {
        margin-top: 60px;
    }

    a.tab-left, a.tab-right {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: .5;
        width: 15%;
    }

    a.tab-right {
        right: 0;
    }

    a.tab-left {
        left: 0;
    }

    .nav-tabs>li {
        margin: 0;
    }

    .submenu-tabs > li > a {
        margin-right: 10px;
    }
}

.submenu {
    padding-bottom: 0;
}

.row.food {
    margin-top: 90px;
}

.news--box .listbox .infobox {
    height: 149px;
}

/* .news--box .listbox .imgbox {
    height: 147px;
} */

.news--box .listbox .imgbox {
    height: 100%;
}

@media (max-width:768px) {
    
    .news--box .listbox .infobox {
        height: 142px;
    }
}

@media (max-width: 480px) {

    .news--box .listbox .imgbox {
        max-height: 300px;
    }
}

.fixed-right{
	position: fixed;
	bottom: 50px;
	right: 0px;
	z-index: 1000;
}

.fixed-right-1{
	position: relative;
	max-width: 100px;
	right: 7px;
	cursor: pointer;
}

.fixed-right-2{
	position: relative;
	max-width: 85px;
	bottom: 10px;
	right: 0px;
	cursor: pointer;
}

@media only screen and (max-width: 767px){
	.fixed-right-1{
		
		max-width: 80px;
	}
	
	.fixed-right-2{
		
		max-width: 65px;
	}
}