@charset "utf-8";

/* CSS Document */

/* @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); */
:root {
    --main-color: #00653b;
    --main-color-white: #ffffff;
    --main-color-333: #333333;
    --main-color-555: #555555;
    --main-color-666: #666666;
    --main-color-999: #999999;
    --main-color-888: #888888;
    --main-transition: all ease 0.4s;
    --main-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --main-linear: linear-gradient(45deg, #79bd28 0%, #00653b 100%);
}
/*@font-face {
    font-family: 'bt';
    src: url(../fonts/EarlySummerSerif-Bold.ttf);
}*/



body {
    height: 100%;
    margin: 0px;
}

html {
    height: 100%;
    margin: 0px;
}

body {
    font-size: 100%;
    line-height: 1.25em;
    color: #444;
    text-decoration: none;
    font-family: 'Noto Sans TC', sans-serif;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8d8172+0,c7b6a0+100 */
    background: #8d8172;
    /* Old browsers */
    background: -moz-linear-gradient(top, #8d8172 0%, #c7b6a0 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #8d8172 0%, #c7b6a0 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #8d8172 0%, #c7b6a0 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8d8172', endColorstr='#c7b6a0', GradientType=0);
    /* IE6-9 */
    background-attachment: fixed;
    background-size: 100% 100%;
}

body.fixed {
    overflow: hidden;
}

h1 {
    font-size: 3.4em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25em;
    margin-bottom: 0.25em;
    /* font-family: "Microsoft JhengHei","NSimSun", "SimSun", "PMingLiU", "STSong", "LiSong Pro Light", "Apple LiSung Light", serif;*/
    font-weight: normal;
    font-family: 'Noto Sans TC', sans-serif;
}

a {
    color: #666;
    text-decoration: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

a:hover,
a:active,
a:focus {
    color: #A0876B;
    text-decoration: none;
    outline: none;
}

strong {
    font-weight: bold;
}

.page-wrapper {
    position: relative;
    z-index: 10;
}

.global-bg {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
/*    background: url(../images/mainallbg.jpg) no-repeat center top;
    background-size: 100% 100%;
    background-attachment: fixed;*/
	background-color: #FBFAF7;
}

.attr-mapbg {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: url(../images/mainallbg.jpg) no-repeat center center;
    background-size: 100% auto;
    background-attachment: fixed;
}

.attr-detailbg {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: url(../images/mainallbg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 1em 0;
    min-height: 100vh;
}

.attr-toprange {
    padding-top: 20px;
}

.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* 全站均使用此限寬為內容最大寬度 / 勿加其它屬性 */

.whitebg {
    background: #fff;
    padding: 10px;
}

.red {
    color: #BD3032
}

.tours-sidewrap {
    position: relative;
    left: 1280px;
    top: 0;
}
.tours-sidewrap.player-style{
    left:unset;
}
.tours-sidewrap.player-style ul{
    right:0;
}
.tours-sidewrap ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 70px;
    position: fixed;
    z-index: 100;
    margin-top: 160px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bb936f+0,6f593c+100 */
    background: #bb936f;
    /* Old browsers */
    background: -moz-linear-gradient(top, #bb936f 0%, #6f593c 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #bb936f 0%, #6f593c 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #bb936f 0%, #6f593c 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bb936f', endColorstr='#6f593c', GradientType=0);
    /* IE6-9 */
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    box-shadow: 3px 1px 5px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 3px 1px 5px rgba(0, 0, 0, 0.21);
    -webkit-box-shadow: 3px 1px 5px rgba(0, 0, 0, 0.21);

}

/* .tours-sidewrap li {
    background-image: url(../images/tours-sideline.png);
    background-repeat: no-repeat;
    background-position: center bottom;
} */

.tours-sidewrap li.btmline {
    background-image: url(../images/tours-sideline.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}


.tours-sidewrap .over {
    display: block;
    width: 70px;
    height: 80px;
    background: url(../images/tours-n-side01.svg) no-repeat center center;

}

.tours-sidewrap .feature {
    display: block;
    width: 70px;
    height: 70px;
    background: url(../images/tours-n-side02.svg) no-repeat center center;

}

.tours-sidewrap .date {
    background: url(../images/tours-n-side03.svg) no-repeat center center;
    display: block;
    width: 70px;
    height: 70px;

}

.tours-sidewrap .join {
    background: url(../images/tours-n-side05.svg) no-repeat center center;
    display: block;
    width: 70px;
    height: 70px;

}

.tours-sidewrap .top {
    background: url(../images/tours-n-side06.svg) no-repeat center center;
    display: block;
    width: 70px;
    height: 70px;
}

.tours-sidewrap .ask {
    background: url(../images/tours-n-side07.svg) no-repeat center center;
    display: block;
    width: 70px;
    height: 70px;
}

.tours-sidewrap .talk {
    background-image: url(../images/tours-n-side04.svg);
    background-color: #39AE41;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    /*  width: 70px; */
    height: 70px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;


}

.tours-sidewrap li:nth-of-type(1) {
    /*  order:1;  */
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}

.tours-sidewrap li:nth-of-type(2) {
    order: 2;
}

.tours-sidewrap li:nth-of-type(3) {
    order: 3;
}

.tours-sidewrap li:nth-of-type(4) {
    order: 4;
}

/* .tours-sidewrap .service {
    background-image: url(../images/tours-n-side04.svg);
    background-color: #09357E;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 70px;
    height: 70px;
   
} */
.tours-sidewrap a:hover {
    opacity: 0.9;
}

.tours-sidewrap .serv-navi {
    width: 70px;
    border: 1.5px solid #81603B;
    /* border-radius: 10px; */
    text-align: center;
    position: absolute;
    left: -73px;
    background-color: #F1EFE7;
    z-index: 999;
    top: 0;
    display: none;
}

/* .tours-sidewrap .serv-navi .title-all {
    padding: 10px 0 8px 0;
    border-bottom: 1.5px solid #81603B;
    position: relative;
} */

/* .tours-sidewrap .serv-navi .title-all img {
    width: 112px;
    height: 26px;
} */


/* .tours-sidewrap .serv-nvai .title-all:before{ content: ''; display: inline-block; width: 20px;height: 20px;position: absolute;top: 0;right: 0;background-image:url(../images/serv-close.svg); background-repeat: no-repeat; background-position: center center ; } */

.tours-sidewrap .serv-navi .serv-close {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    display: inline-block;
    background-image: url(../images/serv-close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.tours-sidewrap .serv-navi .cont {
    padding: 5px;
    text-align: left;
}

.tours-sidewrap .serv-navi .cont div {
    margin: 5px 0;
}

.tours-sidewrap .serv-navi.open {
    display: block;
    transition: All .2s linear;
}

.tours-sidewrap .serv-navi.close {
    display: none;
    transition: All .2s linear;
}

.global-mNav {
    display: block;
    overflow: hidden;
    width: 270px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: inset -3px 0 5px #CCC;
}

.global-mNav a {
    display: block;
}

.global-mNav>ul {
    padding-bottom: 30px;
}

.global-mNav>ul>li {
    line-height: 1.5em;
    padding: 0.5em 0;
    border-top: 1px solid #e2e2e2;
    margin: 0 20%;
    text-align: center;
}

.global-mNav>ul>li.btmline {
    border-bottom: 1px solid #e2e2e2;
}

.global-mNav>ul>li:nth-of-type(1) {
    border-bottom: 1px solid #e2e2e2 !important;
}

/* .global-mNav>ul>li:nth-of-type(3){ border-bottom: 1px solid #e2e2e2!important;} */
.global-mNav>ul>li:last-child {
    border-bottom: 1px solid #e2e2e2;
}

.global-mNav>ul>li.no-btmline {
    border: none;
}

.global-mNav>ul>li>ul {
    display: block;
    padding-top: 0.5em;
}

.global-mNav .mmnav-icon {
    margin: 0 20%;
    width: 60%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.global-mNav .mmnav-icon a {
  margin:0 5px;
}

.global-mNav .mmnav-icon a:hover {
    opacity: 0.6;
}

.global-mNav .mmnav-icon a:first-child {
  
}

.global-mNav .mmnav-icon .ig{
    /* background: url(../images/i-ig-brown.svg)no-repeat left top; */
    width: 30px;
    height: 30px;
}
.global-mNav .mmnav-icon .podcast{
    /* background: url(../images/i-podcast-brown.svg)no-repeat left top; */
    width: 30px;
    height: 30px;
}
.global-mNav .mmnav-icon .yt{
    /* background: url(../images/i-yt-brown.svg)no-repeat left top; */
    width: 30px;
    height: 30px;
}
.global-mNav .mmnav-icon .fb{
    /* background: url(../images/i-fb-brown.svg)no-repeat left top; */
    width: 30px;
    height: 30px;
}


#nav-toggle {
    display: block;
    overflow: hidden;
    position: absolute;
    cursor: pointer;
    box-sizing: border-box;
    width: 50px;
    height: 45px;
    padding: 0;
    left: 0;
    top: 0;
    z-index: 999;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

#nav-toggle span,
#nav-toggle:before,
#nav-toggle:after {
    height: 2px;
    width: 30px;
    top: 47%;
    left: 50%;
    margin-left: -15px;
    background: white;
    position: absolute;
    display: block;
    content: '';
    text-indent: -9999px;
    background-color: #fff;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 5px #000;
    /* 陰影為暫時作為醒目顯示 */
}

#nav-toggle:before {
    margin-top: -7px;
}

#nav-toggle:after {
    margin-top: 7px;
}

#nav-toggle.show span {
    opacity: 0;
}

#nav-toggle.show:before {
    margin-top: 0;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-toggle.show:after {
    margin-top: 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

html.show,
body.show {
    overflow: hidden;
}

.global-mNav>ul>li>ul.menu-toggle li {
    padding-bottom: 5px;
}

.global-mNav>ul>li>ul.menu-toggle li a {
    opacity: 0.8;
}

.page-wrapper {
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-webkit-transition: all 0.3s ease;
}

.page-wrapper.show {
    -webkit-transform: translateX(265px);
    -moz-transform: translateX(265px);
    transform: translateX(265px);
}

.global-mNav {
    position: fixed;
    left: -265px;
    top: 0;
    margin: 0;
    width: 265px;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    z-index: 990;
    overflow-y: auto;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.global-mNav.show {
    -webkit-transform: translateX(265px);
    -moz-transform: translateX(265px);
    transform: translateX(265px);
}

.mask {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 900;
    left: 0;
    top: 0;
}


/* global 
------------------------------------*/

.global-Header {
    /*background-color: #40382A;*/
  /*  background-image: url(../images/global-bg-dark-brown.png);*/
    padding: 0;
    position: relative;
}

.global-Header a img{ max-width:100%; vertical-align:bottom}
.global-Header:after {
    content: '';
    display: block;
    overflow: hidden;
    clear: both;
}

.logo {
    font-size: 0;
    /* background: url(../images/gh-logo-w.svg) no-repeat top center; */
    background-size: 100% auto;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 20px;
    left: 2.5rem;
    height: 45px;
}

.logo a {
    width: 190px;
    height: 45px;
    /* padding-top: 45px; */
    display: block;
    box-sizing: border-box;
}

.global-Header a {}

.global-Header .mbnv-search {
    position: absolute;
    right: 10px;
    top: 13px;
}

.global-topNav {
    overflow: hidden;
    float: right;
    width: 100%;
    text-align: right;
    height: 4.5em;
    box-sizing: border-box;
    padding-top: 1em;
    line-height: 3em;
}

.global-topNav>li {
    display: inline-block;
    margin-left: 0.5em;
    line-height: 35px;
}

.global-topNav>li.tours-btn {
    padding: 0 2em;
    border-radius: 1.5em 0 0 1.5em;
    color: #A59F96;
}

.global-topNav a {
    color: #333
}

.global-topNav>li:last-child {
    padding: 0 1.5em 0 1.5em;
    color: #fff;
    border-right: 1px solid #564837;
    border-top: 1px solid #C5B8A7;
    border-bottom: 1px solid #272117;
}

.global-topNav>li:last-child a {
    color: #E9E4DF;
}

.global-topNav>li a:hover {
    color: #DCD9D6;
}

.global-topNav .rightline {
    position: relative;
}

.global-topNav .rightline:after {
    position: absolute;
    content: '';
    display: inline-block;
    right: -15px;
    top: 5px;
    width: 1px;
    height: 13px;
    border-right: 1px solid #ADA191;
    margin-right: 0.5rem;
}

.global-topNav .Lrange {
    margin-left: 1rem;
}

.global-Nav {
    float: right;
    width: 100%;
    text-align: right;
    height: 3.5em;
    display: flex;
	background-color: #40382A;
}

.global-Nav>li {
    display: inline-block;
    line-height: 3.5em;
    /* border-left: 1px solid rgba(255,255,255,0.3); */
    position: relative;
    background: url(../images/menu-line.png) no-repeat left bottom;
    flex: 1;
    text-align: center;
}

.global-Nav>li>a {
    /* padding: 0 2.2em; */
    color: #fff;
    /*font-weight:bold;*/
}

.global-Nav>li>ul {
    display: none;
    position: absolute;
    left: 0;
    z-index: 888;
    background: #f0f0f0 url(../images/menu-shadow.png) no-repeat left bottom;
    width: 150px;
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    background-size: 100%;
}

.global-Nav>li:hover>ul:before {
    content: '';
    width: 11px;
    height: 7px;
    display: block;
    position: absolute;
    z-index: -1;
    top: -7px;
    left: 47%;
    background: url(../images/menu-triangle.png) no-repeat left top;
}

.global-Nav>li>ul>li {
    border-bottom: 1px solid #D5D5D5;
    border-top: 1px solid #F9F9F9;
}

.global-Nav>li:hover>ul {
    display: block;
    text-align: center;
    width: 260px;
    left: -73px;
}

.global-Nav>li:hover>ul a {
    color: #666;
    display: block;
    margin: 5px;
    font-size: 15px;
    line-height: 30px;
    border: 1px solid transparent;
}

.global-Nav>li:hover>ul a:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cdaf94+1,765e3f+96 */
    background: #cdaf94;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cdaf94 1%, #765e3f 96%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cdaf94', endColorstr='#765e3f', GradientType=0);
    /* IE6-9 */
    color: #fff;
    border: 1px solid #A88C70;
}

.tour-Header {
    overflow: hidden;
    padding: 0;
    border-bottom: 1px solid #FFF;
    position: relative;
}

.tour-Nav {
    overflow: hidden;
    float: right;

    height: 5em;
    text-align: right;
}

.tour-Nav a {
    /* padding: 0 1em; */
    line-height: 5em;
    color: #FFF;
    margin-right: .5em;
}

.tour-Nav a:hover {
    opacity: .8;
}

.tour-Nav .Lrange {
    margin-left: 1rem;
}

.tour-Nav .rightline {
    position: relative;
}

.tour-Nav .rightline:after {
    position: absolute;
    content: '';
    display: inline-block;
    right: -15px;
    top: 5px;
    width: 1px;
    height: 13px;
    border-right: 1px solid #ADA191;
    margin-right: 0.5rem;
}

.gf-companywrap {
    display: block;
}

.foot-fb,
.foot-ig,
.foot-youtube,
.foot-podcast {
    /* background-image: url(../images/foot-icon2.svg); */
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    opacity: .4;
}

.foot-fb:hover,
.foot-ig:hover,
.foot-youtube:hover,
.foot-podcast:hover {
    opacity: .8;
}

.foot-ig {
    background-position: 0 -32px;

}

.foot-fb {

    background-position: 0 0;

}

.foot-youtube {

    background-position: 0 -64px;

}

.foot-podcast {

    background-position: 0 -96px;

}

.gf-company {
    line-height: 30px;
    display: inline-block;
    vertical-align: top;
    height: 30px;
}


/* global Footer
------------------------------------*/

.global-Footer {
    /*margin-bottom: 30px;*/
}

.gf-shortcut1 {
    padding: 1.3em 2%;
    text-align: center;
    background: url(../images/global-bg-gray1n.png) no-repeat left top;
}

.gf-shortcut1 ul {}

.gf-shortcut1 li {
    background: url(../images/footline.png) no-repeat right center;
    display: inline-block;
    width: 11.5%;
    text-align: center;
}

.gf-shortcut1 li a {
    color: #333;
}

.gf-shortcut1 li a:hover {
    color: #A0876B;
}

.gf-shortcut1 li:last-child {
    background: none;
}

.gf-content {
    font-size: 0.875em;
    padding: 0;
    color: #FFF;
    border-radius: 0 0 8px 8px;
    position: relative;
    overflow: hidden;
    /*background: url(../images/footer-bg2.png) no-repeat left bottom;*/
	background: #000;
    padding: 5px;
}


/*.gf-shortcut1 select{ padding:5px; background-color:#FFF; border:solid 1px #EAEAEA; box-sizing:border-box; box-shadow:inset 2px 5px 2px rgba(221,221,221,0.15);
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.gf-shortcut1 select:focus{ box-shadow:0 0 2px #B28500; outline:none; background-color: #FFF; border: 1px solid #B28500; } */

.gf-shortcut1 select {
    width: 172px;
    height: 42px;
    letter-spacing: 0.2em;
}

.gf-shortcut1 select:focus {
    color: #000;
}

.gf-shortcut1 div.jqTransformSelectWrapper {
    width: 100%;
    box-sizing: border-box;
    background: none;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-webkit-transition: 0.5s;
    text-align: center;
    position: relative;
}

.gf-shortcut1 div.jqTransformSelectWrapper:hover {}

.gf-shortcut1 .jqTransformSelectWrapper a.jqTransformSelectOpen {
    width: 30px;
    height: 30px;
    background: url(../images/arrow_down2.png) no-repeat 10px 13px;
    border: transparent;
    padding: 0;
}

.gf-shortcut1 .jqTransformSelectWrapper ul {
    top: 30px;
    left: 0;
    width: 160px;
    overflow-x: hidden;
    height: 240px;
}

.gf-shortcut1 .jqTransformSelectWrapper div span {
    font-size: 1em;
    height: 30px;
    line-height: 30px;
    padding: 0;
    width: 100%;
}

.gf-shortcut1 .jqTransformSelectWrapper div span:hover {
    color: #A0876B;
}

.gf-shortcut1 .jqTransformSelectWrapper ul a {
    font-size: 1em;
}

.gf-shortcut1 .jqTransformSelectWrapper ul a.selected {
    background: #A0876B;
    color: #fff;
}

.gf-shortcut1 .jqTransformSelectWrapper ul a:hover,
.jqTransformSelectWrapper ul a.selected:hover {
    background: #B9A588;
    color: #fff;
}

.gf-shortcut1 .jqTransformSelectWrapper div span {
    left: 0;
}

.gf-shortcut1 .lang li {
    width: 100%;
    text-align: right;
}

.gf-shortcut1 .lang2 li {
    width: 100%;
    text-align: right;
}

.gf-shortcut1 .lang2 select {
    width: 152px;
}

.gf-shortcut1 .jqTransformSelectWrapper a.jqTransformSelectOpen {
    right: 0;
}

.gf-shortcut1 .lang2 .jqTransformSelectWrapper ul {
    left: 20px;
}

.gf-link {
    width: 30%;
    float: left;
}
.gf-content .cr{width: 30%;
    float: left;}
.gf-content .cr ul{ display: flex; justify-content: center;  align-items: center;}
.gf-content .cr ul li{ width: 48%; text-align: center;  margin: 0 1vw;}
.gf-content .cr ul li .img{ width: 100%;}
.gf-content .cr ul li .img img{ width: 100%; vertical-align: bottom;}
.gf-content .cr ul li .h1{ display:block; list-style: 1.5; font-size: 14px;  margin-top: 1vh;}
.gf-link li{ display: flex; align-items: center;}
.gf-link li .img{ width:30px; height:30px; display: flex; justify-content: center;  align-items: center; margin-right:4px}
.gf-link li .img img{ max-width:100%; max-height:100%; vertical-align:bottom;}
.gf-link li span {
    overflow: hidden;
}

.gf-link li {
    font-size: 12px;
}

.gf-link .name {
    display: inline-block;
    padding-right: 10px;
    overflow: hidden;
}

.gf-link .tel {
    display: inline-block;
    padding-right: -1px;
    color: #cacaca;
}

.gf-link .fax {
    display: inline-block;
    color: #cacaca;
}

.gf-link a {
    color: #A3A3A1;
}

.gf-info {
    width: 40%;
    float: right;
    text-align: right;
}

.gf-company {
    color: #cacaca;
    font-size: 15px;
}

.gf-copyright {
    color: #4C4A46;
}

.gf-copyright a {
    color: #4C4A46;
}

.gf-number {
    font-size: 15px;
    color: #cacaca;
    position: relative;
    top: -5px;
}


/* tag <i> icon  / btn
------------------------------------*/

.btn {
    background: #765E3F url(../images/btn-bg1.png) no-repeat top left;
    padding: 2px;
    background-size: 100% 100%;
    color: #FFF;
    display: inline-block;
    vertical-align: middle;
}


/*icon必加*/

.icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/icon-sprite.svg) no-repeat top left;
    /*相容新瀏覽器 */
    background: url(../images/icon-sprite.png) no-repeat top left \9;
    /* 相容IE 舊瀏覽器*/
    background-size: 47px 1980px;
    /* SVG Sprite 必加尺寸才能顯示 */
}

.icon-flight-w {
    width: 27px;
    height: 26px;
    background-position: -10px -10px;
}

.icon-boat-w {
    width: 27px;
    height: 26px;
    background-position: -10px -46px;
}

.icon-bus-w {
    width: 27px;
    height: 26px;
    background-position: -10px -82px;
}

.icon-food-w {
    width: 27px;
    height: 26px;
    background-position: -10px -118px;
}

.icon-moon-w {
    width: 27px;
    height: 26px;
    background-position: -10px -154px;
}

.icon-player {
    width: 27px;
    height: 24px;
    background-position: -10px -190px;
}

.icon-facebook {
    width: 24px;
    height: 24px;
    background-position: -10px -224px;
}

.icon-poi {
    width: 27px;
    height: 24px;
    background-position: -10px -258px;
}

.icon-lectures {
    width: 27px;
    height: 24px;
    background-position: -10px -294px;
}

.icon-tours {
    width: 24px;
    height: 24px;
    background-position: -10px -328px;
}

.icon-tours-y {
    width: 24px;
    height: 24px;
    background-position: -10px -360px;
}

.icon-tours-b {
    width: 27px;
    height: 24px;
    background-position: -10px -394px;
}

.icon-lectures-b {
    width: 24px;
    height: 24px;
    background-position: -10px -428px;
}

.icon-full-b {
    width: 27px;
    height: 24px;
    background-position: -10px -465px;
}

.icon-candidate-b {
    width: 28px;
    height: 24px;
    background-position: -10px -497px;
}

.icon-sign-now-b {
    width: 24px;
    height: 24px;
    background-position: -10px -530px;
}

.icon-pay-b {
    width: 27px;
    height: 24px;
    /* background-position: -10px -566px; */
    background-position: -10px -1947px;
}

.icon-search {
    width: 24px;
    height: 24px;
    background-position: -12px -1708px;
}

.all-tours:hover .icon-search {
    width: 28px;
    height: 24px;
    width: 24px;
    background-position: -12px -600px;
}

.icon-search-w {
    width: 24px;
    height: 24px;
    background-position: -12px -600px;
}

.icon-down {
    width: 24px;
    height: 24px;
    background-position: -10px -632px;
}

.icon-up {
    width: 24px;
    height: 24px;
    background-position: -10px -666px;
}

.icon-pre {
    width: 24px;
    height: 24px;
    background-position: -10px -700px;
}

.icon-next {
    width: 24px;
    height: 24px;
    background-position: -10px -734px;
}

.icon-pre-b {
    width: 24px;
    height: 24px;
    background-position: -10px -768px;
}

.icon-next-b {
    width: 24px;
    height: 24px;
    background-position: -10px -802px;
}

.icon-time {
    width: 24px;
    height: 24px;
    background-position: -10px -836px;
}

.icon-facebook-g {
    width: 24px;
    height: 24px;
    background-position: -10px -870px;
}

.icon-calendar-b {
    width: 24px;
    height: 24px;
    background-position: -10px -904px;
}

.icon-morning-b {
    width: 24px;
    height: 24px;
    background-position: -10px -938px;
}

.icon-noon-b {
    width: 24px;
    height: 24px;
    background-position: -10px -972px;
}

.icon-night-b {
    width: 24px;
    height: 24px;
    background-position: -10px -1006px;
}

.icon-train-w {
    width: 27px;
    height: 26px;
    background-position: -10px -1040px;
}

.icon-lectures-c {
    width: 28px;
    height: 24px;
    background-position: -10px -1082px;
}

.icon-home {
    width: 27px;
    height: 24px;
    background-position: -10px -1118px;
}

.icon-list {
    width: 29px;
    height: 24px;
    background-position: -10px -1156px;
}

.icon-talk {
    width: 28px;
    height: 24px;
    background-position: -10px -1196px;
}

.icon-home-b {
    width: 28px;
    height: 24px;
    background-position: -10px -1236px;
}

.icon-facebook-b {
    width: 27px;
    height: 24px;
    background-position: -10px -1276px;
}

.icon-edm {
    width: 28px;
    height: 24px;
    background-position: -10px -1310px;
}

.all-tours:hover .icon-edm {
    width: 28px;
    height: 24px;
    background-position: -10px -1910px;
}

.icon-gift {
    width: 28px;
    height: 24px;
    background-position: -10px -1350px;
}

.icon-mv {
    width: 28px;
    height: 24px;
    background-position: -10px -1390px;
}

.icon-heart {
    width: 28px;
    height: 24px;
    background-position: -10px -1430px;
}

.icon-heart-w {
    width: 28px;
    height: 24px;
    background-position: -10px -1470px;
}

.icon-discount {
    width: 28px;
    height: 24px;
    background-position: -10px -1510px;
}

.icon-close {
    width: 28px;
    height: 24px;
    background-position: -10px -1551px;
}

.icon-fb-nv {
    width: 35px;
    height: 35px;
    background-position: -7px -1585px;
}

.icon-youtube-nv {
    width: 35px;
    height: 35px;
    background-position: -3px -1625px;
}

.icon-youtube {
    width: 35px;
    height: 35px;
    background-position: -5px -1865px;
}

.icon-line-nv {
    width: 35px;
    height: 35px;
    background-position: -5px -1665px;
}

.icon-serv {
    width: 35px;
    height: 35px;
    background-position: -10px -1705px;
}

.icon-race {
    width: 35px;
    height: 35px;
    background-position: -5px -1787px;
}

.icon-share {
    width: 27px;
    height: 27px;
    background-position: -10px -1830px;
}

.icon2 {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/icon2-sprite.svg) no-repeat top left;
    /*相容新瀏覽器 */
    background: url(../images/icon2-sprite.png) no-repeat top left \9;
    /* 相容IE 舊瀏覽器*/
    background-size: 47px 1310px;
    /* SVG Sprite 必加尺寸才能顯示 */
    margin-top: 2px;
    width: 22px;
    height: 24px;
    background-size: auto 20px;
}

.icon-facebook-b2 {
    width: 28px;
    height: 27px;
    background: url(../images/icon2-sprite.svg) no-repeat top right;
}


/* background material
------------------------------------*/

.gray1 {
    background: #EEE url(../images/global-bg-gray1.png) repeat top left;
}

.lite-yellow {
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
}

.bg-gold1 {
    background: #E9E6E2 url(../images/btn-bg3.png) no-repeat top left;
}

.bg-dark-brown {
    background: #5E4E38 url(../images/global-bg-dark-brown.png) repeat-x top left;
    background-size: auto 100%;
}

.icon-next-c {
    background-position: 45px 210px;
    width: 45px;
    height: 105px;
    display: inline-block;
    background-image: url(../images/index-arrow-next.png);
    left: 3px;
}

.icon-next-c:hover {
    background-position: 45px 105px;
}

.icon-perv-c {
    background-position: 45px 210px;
    width: 45px;
    height: 105px;
    display: inline-block;
    background-image: url(../images/index-arrow-perv.png);
    left: -3px;
}

.icon-perv-c:hover {
    background-position: 45px 105px;
}

.icon-perv-d {
    background-position: 35px 150px;
    width: 35px;
    height: 75px;
    display: inline-block;
    background-image: url(../images/tour-arrow-prev.png);
    left: 0px;
    position: absolute;
    top: 100px;
}

.icon-perv-d:hover {
    background-position: 35px 75px;
}

.icon-next-d {
    background-position: 35px 150px;
    width: 35px;
    height: 75px;
    display: inline-block;
    background-image: url(../images/tour-arrow-next.png);
    right: 0;
    position: absolute;
    top: 100px;
}

.icon-next-d:hover {
    background-position: 35px 75px;
}


/*-----------------------------------
  index 首頁

  包括以下區塊
  1. index-banner
  2. index-shortcut1
  3. index-shortcut2

------------------------------------*/

.index {}

.index-banner {
    background-color: #fff;
}

.index-shortcut1 {
    background-color: #fff;
    padding: 2em 0;
    position: relative;
}

.index-shortcut2 {
    background-color: rgba(0, 0, 0, 0.30);padding: 1em;
	
}
.titgle{ color:#fff}
	.titgle .h1{ font-size:1.5em;font-family: 'bt';}
	.titgle .h2{ font-size:1em; display:block; margin-top:1%}


/* index-slide1
------------------------------------*/

.index-slide1 {
    background-color: #CCC;
}

.index-slide1 .item {
    position: relative;
    height: 80vw;
    max-height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.index-slide1 .item .pc{ display: block;}
.index-slide1 .item .md{ display:none;}
.index-slide1 .item .img{ display:block; width: 100%;}
.index-slide1 .item .img img{ width: 100%; vertical-align:bottom;}

@media only screen and (max-width: 980px) {
    .index-slide1 .item .pc{ display:none;}
.index-slide1 .item .md{ display: block;}
}

.index-slide1 a {
    color: #FFF;
}

.index-slide1 .slide-content {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    text-indent: -9999em;
}

.index-slide1 .s1 {}

.index-slide1 .s2 {}

.index-slide1 .s3 {}

.index-slide1 .s4 {}

.index-slide1 .s5 {}

.index-slide1 .s6 {}

.index-slide1 .s7 {}

.index-slide1 .s8 {}

.index-slide1 .s9 {}

.index-slide1 .slide-content h3 {}

.index-slide1 .slide-content .subtitle {
    display: block;
}

.index-slide1 .slide-content .title {}


/* slide arrow */

.index-slide1 a.pre,
.index-slide1 a.next {
    width: 50px;
    height: 100%;
    display: inline-block;
    text-align: center;
    position: absolute;
    z-index: 88;
    top: 0;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
}

.index-slide1 a i {
    position: relative;
    top: 42%;
}

.index-slide1:hover a {
    opacity: 0.8;
    filter: alpha(opacity=90);
}

.index-slide1 .pre {
    left: 0;
}

.index-slide1 .next {
    right: 0;
}


/* slick 調整 */

.index-slide1.slick-slider {
    margin-bottom: 0;
}

.index-slide1 .slick-dots {
    bottom: 20px;
}


/* index-shortcut1
------------------------------------*/

.index-shortcut1:before,
.index-shortcut1:after {
    content: '';
    width: 60px;
    height: auto;
    display: block;
    position: absolute;
    top: 10px;
    bottom: 11px;
    z-index: 999;
    background-image: url(../images/bg-shadow2.png);
    background-size: 80px 100%;
}

.index-shortcut1:before {
    background-position: top left;
    left: 1px;
}

.index-shortcut1:after {
    background-position: top right;
    right: 1px;
}

.index-slide2 {
    padding: 0 2em;
}

.index-slide2:before,
.index-slide2:after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #c5c5c5;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
}

.index-slide2:before {
    top: -1.5em;
}

.index-slide2:after {
    bottom: -1.5em;
}

.index-slide2.slick-slider {
    margin-bottom: 0;
}

.index-slide2 .item {
    box-sizing: border-box;
    padding: 0 0.5em;
}

.index-slide2 .item>a {
    overflow: hidden;
}

.index-slide2 .pic {
    width: 30%;
    max-width: 124px;
    max-height: 124px;
    padding: 6px;
    box-sizing: border-box;
    margin: 0 10% 0.5em 0;
    box-shadow: 1px 1px 3px #999;
    display: block;
    float: left;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
}

.index-slide2 .pic img {
    display: block;
    width: 100%;
    height: auto;
}

.index-slide2 .hot img {
    display: inline-block;
    margin-left: 10px;
    position: relative;
    top: -3px;

}

.index-slide2 .slide-content {
    width: 60%;
    max-width: 220px;
    display: block;
    float: left;
}

.index-slide2 h3 {
    display: block;
    margin-bottom: 0.5em;
}

.index-slide2 h3:after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 0.25em;
    background-repeat: no-repeat;
    background-image: url(../images/decorative-line-gold1.png);
}

.index-slide2 p {
    line-height: 1.5em;
    max-height: 4.5em;
    overflow: hidden;
    padding: 5px;
    color: #696969;
}

.index-slide2 p a {
    color: #696969;
}

.index-slide2 p a:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cdaf94+1,765e3f+96 */
    background: #cdaf94;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cdaf94 1%, #765e3f 96%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cdaf94', endColorstr='#765e3f', GradientType=0);
    /* IE6-9 */
    color: #fff;
    padding: 5px;
}


/* slide arrow */

.index-slide2 a.pre {
    width: 80px;
    height: 80px;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -40px;
    cursor: pointer;
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    background: url(../images/arrow-perv.png) no-repeat right center;
    box-shadow: 0 0 5px #666;
    border-radius: 50%;
    z-index: -1;
}

.index-slide2 a.pre:hover {
    background: url(../images/arrow-perv-on.png) no-repeat left center;
}

.index-slide2 a.next {
    width: 80px;
    height: 80px;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -40px;
    cursor: pointer;
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    background: url(../images/arrow-next.png) no-repeat left center;
    box-shadow: 0 0 5px #666;
    border-radius: 50%;
    z-index: -1;
}

.index-slide2 a.next:hover {
    background: url(../images/arrow-next-on.png) no-repeat left center;
}

.index-slide2 .pre {
    left: -40px;
}

.index-slide2 .next {
    right: -40px;
}


/* 共用的 ICON 位置修正 */

.index-slide2 i {
    margin-top: 28px;
}

.index-slide2 .pre i {
    margin-right: 20px;
}

.index-slide2 .next i {
    margin-left: 20px;
}

.index-slide2.slick-slider {
    margin-bottom: 0;
}

.index-slide2 .slick-dots {
    bottom: -15px;
    left: 0;
}


/* index-shortcut2
------------------------------------*/

.shortcut2-list {}

.shortcut2-list:after {
    content: '';
    clear: both;
    display: block;
}

.shortcut2-list li {
    min-height: 300px;
    display: block;
    float: left;
}

.shortcut2-list a {
    padding: 0.6em;
    box-sizing: border-box;
    display: block;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    height: 350px;
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
}

.shortcut2-list .pic {
    width: 100%;
    background-color: #CCC;
}

.shortcut2-list .pic img {
    display: block;
    width: 100%;
        height: 178px;
    object-fit: cover;
}

.shortcut2-content {
    padding: 1em;
}

.shortcut2-list h3 {
    line-height: 120%;
    margin-bottom: 0.5em;
    position: relative;
    min-height: 70px;
	text-align: center;
	    font-size: 20px;
		font-family: 'bt';
}

.shortcut2-list h3:after {
    content: '';
    width: 1.25em;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    /*background-color: #AAA;*/
}

.shortcut2-list p {
    line-height: 1.75em;
    max-height: 5em;
    overflow: hidden;
	    font-style: italic;
    color: #9E7B4B;
    font-weight: bold;
}

.shortcut2-content:hover {
    color: #A0876B;
}

.index-absfoot {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: block;
    z-index: 999;
    height: 60px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cdaf94+1,765e3f+96 */
    background: #cdaf94;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cdaf94 1%, #765e3f 96%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cdaf94', endColorstr='#765e3f', GradientType=0);
    /* IE6-9 */
    color: #fff;
    /* border: 1px solid #A88C70; */
}

.index-absfoot a {
    padding-top: 35px;
    width: 20%;
    float: left;
    font-size: 8px;
    color: #fff;
    text-align: center;
    -webkit-text-size-adjust: none;
    transform: scale(1.2);
    position: relative;
}

.index-absfoot a:nth-of-type(1) .icon-player {

    background-position: -10px -190px;
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: -10px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
}

.index-absfoot a:nth-of-type(2) .icon-share {
    background-position: -10px -1830px;
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: -10px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
}

.index-absfoot a:nth-of-type(3) .icon-lectures {
    background-position: -10px -294px;
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: -10px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
}

.index-absfoot a:nth-of-type(4) .icon-discount {
    background-position: -10px -1510px;
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: -10px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
}

.index-absfoot a:nth-of-type(5) {
    background-color: #001e52;
    height: 60px;
}

.index-absfoot a:nth-of-type(5) .icon-serv {
    background-position: -6px -1748px;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
}


/* .index-absfoot a:nth-of-type(5) .icon-facebook{background-position:-10px -224px; position: absolute;top:8px;left:50%; margin-left:-15px; content: '';display: inline-block; width:35px;height: 35px;} */

/* .index-absfoot a:nth-of-type(6) .icon-talk {
    background-position: -10px -1196px;
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -15px;
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
} */



.index-absfoot .serv-navi2 {
    width: 150px;
    border: 1.5px solid #81603B;
    border-radius: 10px;
    text-align: center;
    position: absolute;
    right: 0;
    background-color: #F1EFE7;
    z-index: 999;
    bottom: 60px;
    display: none;
}

.index-absfoot .serv-navi2 .title-all {
    padding: 10px 0 8px 0;
    border-bottom: 1.5px solid #81603B;
    position: relative;
}

.index-absfoot .serv-navi2 .title-all img {
    width: 112px;
    height: 26px;
}


/* .index-absfoot .serv-nvai2 .title-all:before{ content: ''; display: inline-block; width: 20px;height: 20px;position: absolute;top: 0;right: 0;background-image:url(../images/serv-close.svg); background-repeat: no-repeat; background-position: center center ; } */

.index-absfoot .serv-navi2 .title-all .serv-close2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(../images/serv-close.svg);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}



.index-absfoot .serv-navi2.open {
    display: block;
    transition: All .2s linear;
}

.index-absfoot .serv-navi2.close {
    display: none;
    transition: All .2s linear;
}


/*-----------------------------------
  tours 行程

  包括以下單元
  1. 行程總覽頁 overview
  2. 克羅埃西亞出團表 list
  3. 行程介紹   intro
  4. 詳細行程（地圖展開）itinerary

------------------------------------*/

.tours {}

.tours-bg {
    background-color: #333;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


/* 行程總覽頁 tours-ov
------------------------------------*/

.tours-ov {
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.tours {
    padding: 0;
}

.tours h1 {
    font-size: 2em;
    line-height: 3em;
    text-align: center;
}

.tours-title {
    text-align: center;
    box-sizing: border-box;
}


/* 飾線群組 */

.decorative:before,
.decorative:after {
    content: '';
    display: inline-block;
    width: 100px;
    height: 5px;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-top: -0.2em;
}

.decorative:before {
    background-position: left center;
    margin-right: 1em;
}

.decorative:after {
    background-position: right center;
    margin-left: 1em;
}


/* 灰色 */

.decorative.line-gray1:before,
.decorative.line-gray1:after {
    background-image: url(../images/decorative-line-gray1.png);
}


/* 白色 */

.decorative.line-white1:before,
.decorative.line-white1:after {
    background-image: url(../images/decorative-line-white1.png);
}


/*選單*/

.tours-ov-menu {
    text-align: center;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 2em;
    position: relative;
}

.tours-ov-menu.left {
    text-align: left;
}

.tours-ov-menu:after {
    content: '';
    width: 100%;
    height: 3px;
    display: block;
    background-color: #CCC;
    box-shadow: 0 1px 10px #999;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}

.tours-ov-menu a {
    padding: 0 3em;
    display: inline-block;
    line-height: 3.5em;
    position: relative;
}

.tours-ov-menu a:focus {
    background: url(../images/btn-bg4.png) no-repeat left top;
    color: #fff;
}

.tours-ov-menu a:focus:before,
.tours-ov-menu a:focus+a:before {
    display: none;
}

.tours-ov-menu a:current {
    background: url(../images/btn-bg1.png) no-repeat left top;
}

.tours-subon {
    background: #765E3F url(../images/tours-subonbg.png) no-repeat left top;
    background-size: 100% 100%;
}

.tours-ov-menu .selected {
    color: #FFF;
    background: #765E3F url(../images/btn-bg1.png) no-repeat top left;
    background-size: 100% 100%;
}

.tours-ov-menu .selected:hover {}

.tours-ov-menu a+a:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 50%;
    background-color: #CCC;
    border-left: 1px solid #FFF;
    position: absolute;
    left: 0;
    top: 25%;
}


/*選取樣式前後都隱藏間分隔線*/

.tours-ov-menu a.selected:before,
.tours-ov-menu a.selected+a:before {
    display: none;
}


/*連結 - 所有單一行程*/

.tours-ov-link {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 2em;
}

.all-tours {
    padding: 0.25em 1em;
    display: inline-block;
    border: 1px solid #fff;
    outline: 1px solid #EEE;
    background-color: #f5f5f5;
    float: right;
    margin-left: 10px
}

@media screen and (max-width: 768px) {
    .all-tours {
        float: left;
        margin-left: 0;
        margin-right: 8px;
        margin-bottom: 5px;
    }

    .all-tours.size-to01 {
        font-size: 0.9rem;
    }
}

.all-tours:hover {
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff
}


/*出團列表*/

.tours-ov-list {
    clear: both;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.tours-ov-list>ul {
    padding: 2em 0;
}

.tours-ov-list>ul:after {
    content: '';
    display: block;
    clear: both;
}

.tours-ov-list>ul>li {
    background-color: #F2EFEB;
    overflow: hidden;
    margin: 0 auto 1.5em;
    box-shadow: 0px 0px 3px #AAA;
}


/*行程區塊*/

.tours-ov-list .info-block,
.tours-ov-list .pic-block {
    box-sizing: border-box;
}

.tours-ov-list .pic-block img {
    display: block;
    width: 100%;
    height: 306px;
    max-width: 400px;
    margin: 0 auto;
	    object-fit: cover;
}

.tours-ov-list .tours-info {
    position: relative;
}

.tours-ov-list h2 {
    font-size: 1.5em;
    max-height: 5em;
    overflow: hidden;
	font-family: 'bt';
}

.tours-ov-list h2 a {
    color: #222;
}


/*日期*/

.tours-ov-list .tours-days {
    position: absolute;
    top: 1em;
    text-align: center;
}

.tours-ov-list .tours-days span {
    display: block;
}

.tours-ov-list .tours-days .num {
    font-size: 3.4em;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-style: italic;
    line-height: 1.7em;
    width: 1.7em;
    height: 1.7em;
    background: url(../images/tours-days.svg) no-repeat center center;
    background-size: 100% 100%;
}

.tours-ov-list .tours-days .day {
    font-size: 0.8125em;
}


/*概述 p */

.tours-ov-list .tours-outline {
    max-height: none;
    overflow: hidden;
    margin: 5px 0
}


/*價格*/

.tours-ov-list .tours-price {
    display: block;
    color: #9E7B4B;
}

.tours-ov-list .tours-price .symbol,
.tours-ov-list .tours-price .num {
    font-size: 2.4em;
    line-height: 1em;
    font-style: italic;
}

.tours-ov-list .tours-price .text {
    font-size: 0.5em;
}

.tours-ov-list .dlpic-wrap {
    float: left;
    width: 52%;
    padding: 10px 5%;
    box-sizing: border-box;
}

.tours-ov-list .dlpic-wrap .rwdpic img {
    width: 100%;
    height: auto;
}

.tours-ov-list .dlinfo-wrap {
    width: 48%;
    float: left;
}


/*出團時間*/

.departure-time {
    border-top: 1px solid #CCC;
    padding: 0.75em 1em;
    position: relative;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
}
.departure-time .wd{        display: inline-block;
        height: 2.25em; max-width:400px}

.departure-time:before {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.departure-time h3 {
    font-size: 1em;
    line-height: 2em;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    color: #FFF;
    width: 8em;
    margin: 0 1.5em;
    border-radius: 1.5em;
    background: #765E3F url(../images/btn-bg1.png) no-repeat top left;
    background-size: 100% 100%;
    font-family: 'Noto Sans TC', sans-serif;
}

.departure-time h3 a {
    color: #fff;
    text-decoration: none;
    font-family: 'Noto Sans TC', sans-serif;
}

.departure-time ul {
    display: inline-block;
}

.departure-time li {
    display: inline-block;
}

.departure-time li+li {
    margin-left: 1em;
}

.departure-time .month {
    font-size: 2em;
    line-height: 1em;
    font-style: italic;
    margin: 0 0 0 0;
}

.departure-time a {
    font-size: 1.1em;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 0;
    text-decoration: underline;
}

.departure-time .more {
    text-decoration: none;
    font-size: 1em;
}

.departure-time .callsun {
    color: #765E3F;
    font-weight: bold;
    display: inline-block;
}

.departure-time .callsun a {
    text-decoration: none;
    margin: 0;
    font-family: Microsoft JhengHei;
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #9E7B4B;
    border-radius: 1.5em;
}

.departure-time .callsun a:hover {
    background: #765E3F url(../images/btn-bg1.png) no-repeat top right;
    color: #fff;
    display: inline-block;
    border: 1px solid #9E7B4B;
    border-radius: 1.5em;
}

.travel-time .callsun {
    border: 1px solid #9E7B4B;
    color: #765E3F;
    border-radius: 1.5em;
    line-height: 1.2em;
    padding: 5px 1em;
    font-weight: bold;
}

.travel-time .callsun a {
    text-decoration: none;
    margin: 0;
    font-weight: bold;
}

.size-to01 {
    font-size: 1.1em;
}


/* 單一區域出團表 tours-region
------------------------------------*/

.tours-region {
    background-color: #fff;
}

.tours-filter {
    text-align: center;
    border: 1px solid #EEE;
    background-color: #EEE;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 1em;
    box-sizing: border-box;
    padding: 0.5em 2em;
    line-height: 2em;
    box-shadow: 1px 1px 3px #CCC;
    position: relative;
}

.tours-filter:before,
.tours-filter:after {
    content: '';
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(../images/bg-shadow1.png);
    background-size: auto 100%;
}

.tours-filter:before {
    background-position: left top;
    left: 0;
}

.tours-filter:after {
    background-position: right top;
    right: 0;
}

.tours-filter ul {}

.tours-filter li {
    display: inline-block;
}

.tours-filter li+li {
    margin-left: 1em;
}


/*搜尋條件*/

.tours-filter .tm-flight {}

.tours-filter .tm-date {}

.tours-filter .tm-month {}


/*功能按鈕*/

.tours-filter .btn {
    font-size: 0;
    background-color: #765E3F;
    border-radius: 5px;
    color: #FFF;
    line-height: 1.8em;
    display: inline-block;
}


/*按鈕群組*/

.tours-filter .search {
    padding: 2px 20px;
}


/*搜尋*/

.tours-filter .month-nav {
    padding: 2px 10px;
}


/*月份群組*/

.tours-filter .pre {
    margin-right: 20px;
}


/*上一月*/

.tours-filter .next {
    margin-left: 20px;
}


/*下一月*/

.tours-filter .sort {
    text-align: center;
    background: #765E3F url(../images/btn-bg1.png) no-repeat center center;
    border-radius: 1.5em;
    top: 2px;
    line-height: 27px;
    font-size: 13px;
    min-width: 95px;
    background-size: 100% 100%;
}

.tours-filter .sort a {
    color: #fff;
}


/* from */

.tours-filter .form-group {
    display: inline-block;
    margin-bottom: 0;
}

.tours-filter label {
    display: inline-block;
    line-height: 1.8em;
}

.tours-filter .col {
    display: inline-block;
}

.tours-filter {}

.tours-filter .form-group input[type="text"],
.tours-filter .form-group input[type="date"] {
    height: 2.2em;
}

.tours-list {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.tours-list ol {
    padding-bottom: 2em;
}

.tours-list li {
    background-color: #F5F2EC;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 1px 1px 3px #CCC;
    font-size: 0;
    display: flex;
    flex-direction: column;
   
    
}
@media screen and (min-width: 1024px){
    .tours-list li {
        display: flex;
        flex-wrap:nowrap;
        flex-direction: row;
    }
}

.tours-list li {
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
}

.tours-list .tl-header {
    background: none;
    font-weight: 500;
    padding: 0.5em 1rem;
    margin-bottom: 0.5rem;
    box-shadow: none;
    font-size: 0;
}

.tours-list p {
    font-size: 0.875rem;
    display: block;
    line-height: 1.75em;
}

.tours-list .tl-itinerary,
.tours-list .tl-flight,
.tours-list .tl-tours {
    width: 100%;
}

.tours-list span {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding-right: 1em;
    word-break: break-all;
}

.tours-list .tl-flight .del {
    text-decoration: line-through;
    color: #999;
}

.tl-itinerary>span:nth-of-type(1) {
    width: 24%;
}

.tl-itinerary>span:nth-of-type(2) {
    width: 64%;
    padding-right: 2em;
}

.tl-itinerary>span:nth-of-type(3) {
    width: 12%;
}

.tl-itinerary a {
    display: block;
}

.tl-itinerary>span:nth-of-type(2) span {
    width: 100%;
    margin: 0 0 0 auto;
    display: block;
    font-size: 1em;
    color: #9e7b4b;
}

.tl-itinerary a {
    display: block;
    font-size: 0.9rem;
}

.tl-flight span:nth-of-type(1) {
    width: 50%;
}

.tl-flight span:nth-of-type(2) {}

.tl-tours {}

.tl-tours span:nth-of-type(1) {
    width: 25%;
    display: none;
}

.tl-tours span:nth-of-type(2) {
    width: 30%;
}

.tl-tours span:nth-of-type(3) {
    width: 30%;
}

.tl-tours span:nth-of-type(4) {
    width: 30%;
    text-align: center;
}
.tl-tours span:nth-of-type(5) {
  
    text-align: center;
    width: 40%;
}
.tl-tours .allotment,
.tl-tours .no-Sub {}

.tl-tours a {
    display: inline-block;
    padding: 0.25em 0.5em 0.25em 0.2em;
    min-width: 6em;
    background-color: #765E3F;
    color: #FFF;
    border-radius: 1.5em;
}

.pointfont {
    color: #A0876B;
    padding-left: 15px;
    display: inline-block;
}


/* 行程介紹 tour-intro
------------------------------------*/

.tour-intro {
    position: relative;
}

.tour-hero {
    text-align: center;
    padding: 3em;
}

.tour-hero h2 {
    color: #FFF;
}

.tour-hero p {
    color: #FFF;
}

.tour-hero .tours-title {
    display: inline-block;
    position: relative;
    padding: 0 120px;
    box-sizing: border-box;
}

.tour-hero .tours-title:before,
.tour-hero .tours-title:after {
    position: absolute;
    top: 50%;
    margin-top: -2px;
}

.tour-hero .tours-title:before {
    left: 0;
}

.tour-hero .tours-title:after {
    right: 0;
}


/*日期*/

.tour-hero .tours-days {
    font-size: 1.5em;
    width: 5em;
    height: 5em;
    display: block;
    margin: 0 auto 1em;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-style: italic;
}

.tour-hero .tours-days:before {
    content: '';
    width: 5.8em;
    height: 5.8em;
    display: block;
    border-radius: 50%;
    background: url(../images/tours-days.svg) no-repeat center center;
    background-size: 5em 5em;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin: -2.9em auto auto -2.9em
}

.tour-hero .tours-days:after {
    content: '';
    width: 170px;
    height: 170px;
    display: block;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    margin: -3.5em auto auto -3.5em;
    background: url(../images/round-serrated.svg) no-repeat center center;
    background-size: 100% 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.tour-hero .tours-days span {
    display: block;
}

.tour-hero .tours-days .num {
    font-size: 3em;
    line-height: 1.25em;
    color: #000;
}

.tour-hero .tours-days .day {
    font-size: 0.75em;
    line-height: 0.75em;
    color: #856A50;
}

.tour-hero .td-bg {
    display: block;
    border-radius: 50%;
    background: url(../images/round-serrated.svg) no-repeat center center;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-size: 100% 100%;
}

.tour-menu {
    width: 100%;
    /* text-align: center; */
    background-color: #6F593C;
    background-image: url(../images/btn-bg2.png);
    background-repeat: repeat-x;
    background-position: left top;
    background-size: auto 100%;
    position: absolute;

    box-sizing: border-box;
}

.tour-menu:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid #6F593C;
    box-shadow: 0 1px 3px #666;
    opacity: 0.8;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,1+35,1+62,0+100 */
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.tour-menu .tour-menubox {
    /* width: 1000px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 10px;
    height: 48px;
    padding-right: 10px;
    width: max-content;
    width: inherit;

}

.tour-menu .tour-menulink {
    color: #FFF;
    flex: none;

}

.tour-menu .tour-menulink a {
    padding: 10px 15px;
    box-sizing: border-box;

}

.tour-menubox .spfbwrap {
    padding-left: 15px;
}

.tour-menu .tour-menulink a.backtxt:before {
    position: relative;
    content: '回行程';
    display: inline-block;

}

.tour-menu .lang.tour-menulink select {
    padding-left: 15px;
    padding-right: 20px;
    background: url(../images/arrow_down3.png) no-repeat 85px center;

}

.tour-menu .tour-menulink:last-child {
    /*  width: 12%; */
}

.tour-menu .tour-menulink>a {
    color: #fff;
}

.tour-menu .tour-menulink>a:hover {
    cursor: pointer;
    color: #FFD659;
}

.tour-menu .jqTransformSelectWrapper ul {
    width: 120px;
}

.tour-menu .tour-menulink:last-child {
    margin: 0;
}

.tour-menu .tour-menulink>a {

    /*   position: relative;
    padding: 0 25px; */
}

.tour-menu .tour-menulink>a:focus {
    background: url(../images/btn-bg6.png) no-repeat center;
    color: #fff;
}

.tour-menu .tour-menulink>a:focus:before,
.tour-menu .tour-menulink>a:focus+a:before {
    display: none;
}

.tour-menu .tour-menulink a.backtxt:focus:before {
    display: inline-block;
}


.tour-menu .tour-menulink>a:current {
    background: url(../images/btn-bg1.png) no-repeat left top;
}

.tours-subon {
    background: #765E3F url(../images/tours-subonbg.png) no-repeat left top;
    background-size: 100% 100%;
}

.tour-menu select {
    width: 138px;
    height: 42px;
    letter-spacing: 0.2em;
}

.tour-menu select:focus {
    color: #000;
}

.tour-menu div.jqTransformSelectWrapper {
    width: 105px;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
    background: none;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-webkit-transition: 0.5s;
    text-align: left;
}

.tour-menu div.jqTransformSelectWrapper:hover {}

.tour-menu .jqTransformSelectWrapper a.jqTransformSelectOpen {
    width: 30px;
    height: 30px;
    background: url(../images/arrow_down3.png) no-repeat 10px 10px;
    border: transparent;
    padding: 0;
    right: 0;
    top: 0;
}

.tour-menu .jqTransformSelectWrapper ul {
    top: 40px;
    left: -30px;
    width: 100%;
    clear: both;
    overflow: hidden;
}

.tour-menu .jqTransformSelectWrapper div span {
    font-size: 1em;
    height: 30px;
    line-height: 28px;
    padding: 0;
    width: 100%;
    text-align: left;
    margin: 0;
    left: 0;
}

.tour-menu .jqTransformSelectWrapper div span:hover {
    color: #fff;
}

.tour-menu .jqTransformSelectWrapper ul a {
    font-size: 1em;
}

.tour-menu .jqTransformSelectWrapper ul a.selected {
    background: #A0876B;
    color: #fff;
}

.tour-menu .jqTransformSelectWrapper ul a:hover,
.jqTransformSelectWrapper ul a.selected:hover {
    background: #B9A588;
    color: #fff;
}

.tour-menu .jqTransformSelectWrapper li {
    padding: 0;
    margin: 0;
}

.tour-menu .jqTransformSelectWrapper li a {
    line-height: 150%;
}

.tour-menu .lang li {
    width: 100%;
    text-align: center;
    margin: 0;
}

.fixedcc {
    position: fixed;
    z-index: 9999;
    background-color: #FFFFFF;
    top: 0;
    padding: 0;
    margin: 0 auto 20px auto;
    width: 1280px;
    filter: alpha;
    filter: alpha(Opacity=100, Style=0);
    -moz-opacity: 1;
    opacity: 1;
}

.fixednn {
    position: absolute;
}

.fixedcc2 {
    position: fixed;
    z-index: 9999;
    background-color: #FFFFFF;
    top: 0;
    padding: 0;
    margin: 0 3em;
    width: 1280px;
    filter: alpha;
    filter: alpha(Opacity=90, Style=0);
    -moz-opacity: 0.9;
    opacity: 0.9;
}

.fixednn2 {
    position: static;
}

.tour-sidewrap {
    display: block;
    right: 0;
    top: 50%;
    width: 150px;
    position: fixed;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.7);
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    padding: 12px 18px;
    margin-top: -60px;
    border-radius: 6px 0 0 6px;
}

.tour-sidewrap ul {}

.tour-sidewrap li {}

.tour-sidewrap li.sign {}

.tour-sidewrap li.sign {}

.tour-sidewrap li.date {}

.tour-intro .mtoprange {
    top: -40px;
}


/*行程特色*/

.tour-features {
    background-color: #fff;
    padding: 3em;
    overflow: hidden;
    margin-top: 45px;
}

.tf-group {
    overflow: hidden;
    clear: both;
}

.tf-group .editor {
    border-bottom: 1px solid #FFF;
    clear: both;
}

.tf-group .editor .rwdpic {
    width: 100%;
}

.tf-group .editor .rwdpic img,
.tf-group .editor img {
    width: 100% !important;
    display: block;
    height: auto !important;
}

.tf-group .tf-item {
    border-bottom: 1px solid #FFF;
    /* background-color: #EEE; */
}

.tf-group#intro-xslinkC3 .tf-item {
    border-bottom: 1px solid transparent;
}

.tf-iterduce {
    display: inline-block;
    width: auto;
    margin: 1em 0;
}

.tf-iterduce a {
    display: inline-block;
    padding: 5px 25px;
}

.tf-iterduce a:hover {
    opacity: 0.8;
    display: inline-block;
    padding: 5px 25px;
}


/*行程國家*/

.tf-nation {
    text-align: center;
}

.tf-nation a {
    border: 1px solid #FFF;
    color: #FFF;
    padding: 0.5em 2em;
    display: inline-block;
}

.tf-nation .go {
    margin: 1em 0;
}


/*行程事項*/

.tour-issues {
    margin-top: 2em;
    padding: 1em 0;
    background-color: #413829;
    border-radius: 5px;
    overflow: hidden;
}

.tour-issues .issues {
    color: #FFF;
    position: relative;
}

.tour-issues .issues+.issues:before {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    background-color: rgba(255, 255, 255, 0.1);
}

.tour-issues a {
    padding: 1em 2em;
    padding-left: 10em;
    color: #FFF;
    display: block;
}

.tour-issues a p {
    color: #C5C2BF;
}

.offered,
.tourist-info {
    width: 3em;
    height: 3em;
    display: block;
    overflow: hidden;
    position: absolute;
    left: 2em;
    background-image: url(../images/tour-issues-icon.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.offered {
    background-position: top center;
}

.tourist-info {
    background-position: bottom center;
}

.intimate-note {
    background-color: #fff;
    padding: 2em 4em;
    border-top: 1px solid #CCC;
    color: #000;
}

.intimate-note h4 {
    color: #9E7B4B;
    margin-bottom: 1em;
    font-weight: bold;
}

.intimate-note h5 {
    display: block;
    margin-bottom: 0.5em;
    color: #000;
    font-weight: bold;
}

.intimate-note p {}

.intimate-note ol,
.intimate-note ul {
    font-size: 0.8125em;
    padding-left: 3.5em;
    margin-bottom: 2em;
    color: #333;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}

.intimate-note ol {
    list-style: outside decimal;
}

.intimate-note ul {
    list-style: outside square;
}

.intimate-note li {
    line-height: 1.75em;
    margin-bottom: 0.25em;
}

.intimate-note ul ul,
.intimate-note ol ul {
    list-style: none;
    padding-left: 1.5em;
    padding-top: 0.5em;
    color: #666;
}

.intimate-note ol ul li {
    text-indent: -1em;
}


/*晴天玩家*/

.sunday-players {
    background-color: #DFC1A0;
    background-image: url(../images/global-bg-yellow1.png);
    background-repeat: repeat;
    background-position: left top;
    overflow: hidden;
    position: relative;
}

.sunday-players:before {
    content: '';
    width: 50%;
    height: 700px;
    background: url(../images/global-bg-map.png) no-repeat right -100px;
    position: absolute;
}

.sunday-players:after {
    content: '';
    width: 253px;
    height: 211px;
    background: url(../images/camera.png) no-repeat right top;
    position: absolute;
    bottom: 2em;
    left: 8em;
}

.sunday-players-flag {}

.sunday-players h3 {
    text-align: center;
    position: relative;
    z-index: 10;
}

.sunday-players .articles-list {}

.articles-list ul {
    text-align: center;
    position: relative;
    z-index: 10;
}

.articles-list ul:after {
    content: '';
    display: block;
    clear: both;
}

.articles-list li {
    box-sizing: border-box;
    padding: 0.5em 0.5em 1em;
    display: inline-block;
    text-align: left;
    box-shadow: 1px 1px 3px #999;
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
}

.articles-list .pic {
    background-color: #EEE;
    width: 100%;
    height: 150px;
    margin-bottom: 1em;
}

.articles-list h4 {
    margin-bottom: 1.5em;
    position: relative;
    padding: 0 0.5em;
}

.articles-list h4:after {
    content: '';
    width: 3em;
    height: 1px;
    display: block;
    background-color: #999;
    position: absolute;
    bottom: -0.7em;
}

.articles-list p {
    padding: 0 0.5em;
    line-height: 1.5em;
}


/*區域出團表*/

.tour-intro .tours-region {
    background-color: #fff;
    padding: 0;
}


/* 詳細行程（地圖展開） itinerary
------------------------------------*/

.itinerary {}

.itinerary-hero {
    background-color: #f5f5f5;
    position: relative;
    min-height: 400px;
}

.itinerary-hero:before {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 9;
    border-bottom: 1px solid #e5e5e5;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c1a068+5,c1a068+13,5a4025+32,c1a068+36,c1a068+53,5a4025+74,c1a068+77,c1a068+78,5a4025+100 */
    background: #c1a068;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c1a068', endColorstr='#5a4025', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.itinerary-hero:after {
    content: '';
    clear: both;
    display: block;
}


/*行程主要*/

.itinerary-hero .hero-content {
    float: left;
    padding: 2em 2em 2em 0;
    box-sizing: border-box;
}

.itinerary-hero .hero-content:after {
    content: '';
    clear: both;
    display: block;
}


/*日程資訊*/

.tour-num {}

.itinerary-hero h1 {
    text-align: left;
    line-height: 1.25em;
}

.tour-location {
    margin-bottom: 1em;
}

.tour-seminar,
.tour-pdf {
    font-size: 0.8125em;
    padding: 0.5em 1.5em;
    display: inline-block;
    background: #765E3F url(../images/btn-bg1.png) no-repeat top left;
    background-size: 100% 100%;
    border-radius: 1.5em;
    color: #FFF;
}

.tour-seminar {
    margin-right: 0.5em;
}

.tour-seminar a:hover {
    color: #fff;
}


/*行程價格*/

.hero-content .tours-price {
    color: #9E7B4B;
    display: inline-block;
    float: right;
    font-size: 2.2em;
    line-height: 1em;
    vertical-align: middle;
    position: relative;
    padding-top: 10px;
}

.hero-content .tours-price .symbol {
    color: #999;
    text-decoration: line-through;
    font-size: 18px;
    display: block;
    line-height: 120%;
    position: absolute;
    top: -10px;
    padding-left: 0;
}

.hero-content .tours-price .num {
    font-style: italic;
    padding-top: 10px;
}

.hero-content .tours-price .text {
    font-size: 0.5em;
    font-style: inherit;
}


/*好康*/

.hero-content .tour-newbox {
    display: inline-block;
    padding-top: 10px;
    vertical-align: middle;
}

.hero-content .tour-sale {
    display: inline-block;
    background-image: url('../images/tours-subonbg2.jpg');
}

.hero-content .tour-sale a,
.hero-content .tour-sunday a,
.hero-content .tour-honey a,
.hero-content .tour-meeting a {
    color: #fff;
    cursor: pointer;
}

.hero-content .tour-sunday,
.hero-content .tour-meeting {
    display: inline-block;
    background-image: url('../images/tours-subonbg.png')
}

.hero-content .tour-honey {
    display: inline-block;
    background-image: url('../images/tours-subonbg3.jpg')
}

.hero-content .meeting {
    display: inline-block;
    background-image: url('../images/tours-subonbg.png')
}

.hero-content .tour-sale,
.hero-content .tour-sunday,
.hero-content .tour-honey,
.hero-content .tour-meeting {
    box-shadow: 1px 1px 3px #999;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 5px 10px 5px 5px;
}


/*線上說明會*/


/* 行程燈箱效果 */

.black_overlay {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    -moz-opacity: 0.9;
    opacity: .90;
    filter: alpha(opacity=90);
    display: none;
}

.white_content {
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1002;
    overflow: visible;
    font-size: 1.625rem;
    line-height: 150%;
    padding-top: 2.5vw;
    display: none;

}



.white_content .close {
    right: 2%;
    top: 20px;
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url('../images/icon-x.png');
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: 9999em;
}


/*scrollbar style*/

.jspContainer {
    overflow: hidden;
    position: relative;
    width: 100% !important;
}

.jspPane {
    position: absolute;
    width: 100% !important;
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 3.5%;
    width: 10px;
    height: 100%;
}

.jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: red;
}

.jspCap {
    display: none;
}

.jspHorizontalBar .jspCap {
    float: left;
}

.jspTrack {
    background: #534334;
    position: relative;
    width: 2px;
}

.jspDrag {
    background: #E1CCB7;
    position: relative;
    top: 0;
    left: -2px;
    cursor: pointer;
    width: 5px;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.36);
    -moz-box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.36);
    -webkit-box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.36);
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.jspArrow.jspDisabled {
    cursor: default;
    background: #80808d;
}

.jspVerticalBar .jspArrow {
    height: 16px;
}

.jspHorizontalBar .jspArrow {
    width: 16px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}

.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}


/* Yuk! CSS Hack for IE6 3 pixel bug :( */

* html .jspCorner {
    margin: 0 -3px 0 0;
}

.scroll-pane {
    width: 100% !important;
    height: 500px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.horizontal-only {
    height: auto;
    max-height: 500px;
}

.special-box {
    padding: 0 7% 2% 5%;
    text-align: left;
    font-size: 1rem;
    line-height: 1.25em;
    box-sizing: border-box;
}

.special-box ul {}

.special-box li {
    position: relative;
    list-style-type: disc;
    margin-left: 25px;
    margin-bottom: 5px;
}

.special-box li.title {
    font-size: 1.125em;
    margin-bottom: 10px;
    color: #9E7B4B;
}

.special-box li.title:before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-size: 1.5em;
    color: #9E7B4B;
}

.paTB30 {
    padding-bottom: 30px;
    padding-top: 30px;
}

.special-wrap {
    box-shadow: 1px 1px 6px #999;
    background: url(../images/global-bg-light-yellow1.png) repeat left top;
    position: relative;
    width: 90%;
    max-width: 960px;
    margin: 0 auto 2em;
    box-sizing: border-box;
    overflow: hidden;
    border: 3px solid #5A4025;
    -moz-border-image: -moz-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image: linear-gradient(to bottom right, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image-slice: 1;
}

.special-wrap h2 {
    font-size: 1.75rem;
    text-align: left;
    padding-left: 5%;
    color: #816741;
}

.special-wrap h3 {
    font-size: 1.375rem;
    margin-bottom: 20px;
    color: #816741;
}


/*出團時間(行程時間)*/

.travel-time {
    padding: 2em 0;
    position: relative;
    clear: both;
    margin-bottom: 1em;
}

.travel-time:before,
.travel-time:after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    background-color: #FFF;
    border-top: 1px solid #CCC;
    position: absolute;
}

.travel-time:before {
    margin-top: -1em;
}

.travel-time:after {
    bottom: 0em;
}

.travel-time .title {
    margin-bottom: 0.5em;
}

.travel-time p {
    display: inline-block;
    position: relative;
}

.travel-time span {
    display: inline-block;
    vertical-align: top;
    height: 50px;
}

.travel-time .departure-date {}

.travel-time .return-date {
    margin-left: 3em;
}

.travel-time .year {
    font-size: 0.7125em;
    position: absolute;
    right: 0;
    top: 0;
}

.travel-time .month {
    line-height: 80px;
    margin-bottom: -0.5em;
}

.travel-time .day {
    line-height: 80px;
    padding-top: 20px;
}

.travel-time .num {
    line-height: 60px;
    font-size: 2.5em;
}

.travel-time .day.num {
    margin-left: 0.5em;
}

.travel-time .day.num:before {
    content: '';
    width: 1px;
    height: 80px;
    display: inline-block;
    position: absolute;
    top: 5px;
    margin-left: -0.35em;
    background-color: #666;
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -moz-transform: rotate(45deg);
    /* Firefox */
    -webkit-transform: rotate(45deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(45deg);
    /* Opera */
    transform: rotate(45deg);
}

.travel-time .for {
    line-height: 1.75em;
    color: #FFF;
    text-align: center;
    width: 1.75em;
    height: 1.75em;
    background-color: #755535;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -0.75em;
    right: -2.5em;
}


/* 全域-旗標 */

.gold-flag {
    background-image: url(../images/gold-flag-main.png);
    background-position: bottom center;
    background-size: 100% auto;
    position: relative;
}

.gold-flag:before,
.gold-flag:after {
    content: '';
    display: block;
    background-size: 100% auto;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.gold-flag:before {
    background-image: url(../images/gold-flag-shadow.png);
    background-position: top center;
    top: 0;
    left: 0;
    height: 60px;
}

.gold-flag:after {
    background-image: url(../images/gold-flag-bottom.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom: -80px;
    left: 0;
    height: 90px;
}


/* 行程介紹-旗標 */

.hero-flag {
    text-align: center;
    position: absolute;
    left: 3.5%;
    top: 0;
    padding: 2em 3em 0;
    background-color: #fff;
    box-sizing: border-box;
}

.hero-flag .tours-days {
    font-size: 1.5em;
    width: 5em;
    height: 5em;
    display: block;
    margin: 0 auto 1em;
    background: url(../images/tours-days.svg) no-repeat center center;
    background-size: 100% 100%;
}

.hero-flag .tours-days span {
    display: block;
}

.hero-flag .tours-days .num {
    font-size: 3em;
    line-height: 1.25em;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-style: italic;
}

.hero-flag .tours-days .day {
    font-size: 0.8125em;
}

.hero-flag .quota {
    margin-bottom: 1em;
}

.hero-flag .quota span {
    display: block;
}

.hero-flag .quota .num {
    font-size: 1.5em;
    line-height: 1.25em;
}

.hero-flag .join {
    line-height: 1.2em;
    color: #FFF;
    width: 5em;
    height: 5em;
    margin-bottom: -40px;
    display: inline-block;
    border-radius: 50%;
    background-color: #755535;
    box-sizing: border-box;
    padding: 1.4em;
    text-align: center;
    position: relative;
    z-index: 10;
    box-shadow: 1px 2px 3px #999;
}

.hero-flag .join:before {
    content: '';
    width: 4em;
    height: 4em;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: 0.45em;
    top: 0.45em;
    border: 1px solid #FFF;
    box-shadow: inset 0 0 3px #333;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.hero-flag .phone-call {
    background-image: url(../images/phone-white.svg);
    background-position: center center;
    background-size: 35px auto;
    width: 40px;
    height: 40px;
    display: inline-block;
}


/*天氣資訊板*/

.weather-board {
    max-width: 400px;
    float: left;
    padding: 1.5em;
    margin-top: 2em;
    box-shadow: 1px 1px 5px #AAA;
    box-sizing: border-box;
    border: 5px solid #C1A068;
    -moz-border-image: -moz-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image: linear-gradient(to bottom right, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image-slice: 1;
    /* display: none!important; */
}

.weather-board .hero {
    overflow: hidden;
    margin-bottom: 1em;
}

.weather-board .hero p {}

.weather-board .col {
    float: left;
    display: block;
}

.weather-board .col1 {
    width: 60%;
    display: block;
}

.weather-board .col2 {
    width: 40%;
}

.weather-board .title {
    text-align: center;
}

.weather-board .img {
    width: 120px;
    height: 80px;
    margin: auto;
    display: block;
}

.weather-board .location {}

.weather-board .hero-temp {}

.weather-board .hero-time {
    font-size: 0.8125em;
}

.weather-board .week-list {
    overflow: hidden;
    clear: both;
}

.weather-board .week {
    color: #FFF;
    line-height: 1.75em;
    width: 1.75em;
    height: 1.75em;
    margin-bottom: 0.5em;
    background-color: #222;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
}

.hero-temp span {
    display: inline-block;
    vertical-align: top;
}

.hero-temp .num {
    font-size: 5em;
    line-height: 1em;
    font-weight: 300;
}

.hero-temp .deg {}

.hero-time .date {
    margin-right: 1em;
}

.hero-time .week {}

.hero-time .time {
    display: block;
}

.week-list li {
    width: 20%;
    float: left;
    box-sizing: border-box;
    text-align: center;
}

.week-list li+li {
    border-left: 1px solid #CCC;
}

.week-list span {
    display: block;
    margin-bottom: 0.2em;
}

.week-list .date {}

.week-list .week {
    font-size: 0.8125em;
}

.week-list .weather {}

.week-list .highest-temp {}

.week-list .minimum-temp {}


/*航班地圖資訊*/

.itinerary-flight {
    background-color: #F5f5f5;
    position: relative
}

.itinerary-flight:before {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    background-color: #FFF;
    border-top: 1px solid #CCC;
}

.itinerary-flight:after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 2px #CCC;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c1a068+0,c1a068+50,5a4025+98 */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c1a068+5,c1a068+13,5a4025+32,c1a068+36,c1a068+53,5a4025+74,c1a068+77,c1a068+78,5a4025+100 */
    background: #c1a068;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c1a068', endColorstr='#5a4025', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.itinerary-flight h1 {
    font-size: 1.5em;
    line-height: 3em;
    text-align: left;
    cursor: pointer;
    padding: 0 2em;
    font-weight: bold;
    margin-bottom: 1em;
    position: relative;
    box-sizing: border-box;
}

.itinerary-flight .arrow-down {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin-right: 0.5em;
    background-color: #9E7B4B;
    vertical-align: middle;
    margin-bottom: 0.5em;
    border-radius: 5px;
    position: relative;
    background: url(../images/btn-bg3.png) no-repeat center center;
    box-shadow: 1px 1px 3px #999;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.itinerary-flight .arrow-down i {
    position: absolute;
    top: 0.2em;
    left: 0.2em;
}

.route-map {
    box-shadow: 1px 1px 6px #999;
    background-color: #FFF;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 2em;
    box-sizing: border-box;
    overflow: hidden;
    border: 5px solid #5A4025;
    -moz-border-image: -moz-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image: linear-gradient(to bottom right, #C1A068 0%, #5A4025 40%, #C1A068 55%, #5A4025 100%);
    border-image-slice: 1;
}

.route-map .map-pic {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    float: left;
    overflow: hidden;
}

.route-map .map-pic img {
    display: block;
    width: 100%;
    height: auto;
}

.route-map figcaption {
    display: none;
}


/*航班表*/

.flight-list {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 2em;
}

.flight-list ol {
    padding-bottom: 2em;
}

.flight-list li {
    padding: 1em 0 1em 1em;
    margin-bottom: 0.75em;
    background-color: rgba(255, 255, 255, 0.7);
}

.flight-list .fl-header {
    background: none;
    font-weight: 500;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
}

.flight-list p {
    display: block;
    line-height: 1.75em;
}

.flight-list .fl-fist,
.flight-list .fl-sec {
    width: 100%;
}

.flight-list span {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding-right: 1em;
    word-break: break-all;
}

.flight-list .fl-notice {
    text-align: right;
    font-size: 15px;
    display: block;
}


/*日行程列表*/

.itinerary-plan {
    background-color: #fff;
}

.itinerary-list {
    width: 92%;
    max-width: 1180px;
    margin: auto;
    padding: 2em 0 2em 200px;
    box-sizing: border-box;
    height: 100%;
    display: block;
    position: relative;
}

.itinerary-list:before {
    content: '';
    display: inline-block;
    height: 100%;
    min-height: 100%;
    width: 1px;
    background-color: #ccc;
    overflow: hidden;
    position: absolute;
    left: 90px;
    right: 0;
    top: 0;
    bottom: 0;
}

.itinerary-list>li {
    position: relative;
}


/*.itinerary-list > li+li:before { content:''; width: 1.5em; height: 1.5em; background-color: #fff; border: 2px solid #CCC; border-radius: 50%; box-sizing:border-box; position:absolute; left: -7.6em; top: -3em; }*/


/*.itinerary-list > li+li:before { content:''; border-radius: 50%; box-sizing:border-box; position:absolute; left: -7.65em; top: -3em;
background: #FFF url(../images/icon-sprite.png) no-repeat top left; background:url(../images/icon-sprite.svg) no-repeat top left; background-size:47px 1080px;  display: inline-block; vertical-align: middle; width:24px; height:24px; background-position:-10px -836px;}*/

.itinerary-list h2 {
    font-style: italic;
    width: 5em;
    height: 5em;
    line-height: 5em;
    text-align: center;
    position: absolute;
    z-index: 888;
    left: -6em;
    background-color: #FFF;
    border-radius: 50%;
    font-family: Arial;
    word-spacing: -8px;
}

.itinerary-list h2:before,
.itinerary-list h2:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
}


/*.itinerary-list h2:before { width:4.6em;height:4.6em;top: 0.22em;left: 0.22em; background:#fff; }*/

.itinerary-list h2:before {
    width: 4.8em;
    height: 4.8em;
    top: 0.105em;
    left: 0.105em;
    background: url(../images/global-bg-gray2.png) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 3px #999;
}

.itinerary-list h2:after {
    width: 5em;
    height: 5em;
    top: 0;
    left: 0;
    background: url(../images/tours-days-star.svg) no-repeat center center;
    background-size: 100% 100%;
    border: 1px solid #CFBFAF;
    border-radius: 50%;
}

.report-info {
    margin-bottom: 1em;
}

.report-info li {
    margin-bottom: 0.25em;
    position: relative;
    overflow: hidden
}

.report-info h3 {
    text-align: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    padding-top: 7px;
    box-sizing: border-box;
    background: #765E3F url(../images/btn-bg1.png) no-repeat center center;
    color: #FFF;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    top: 0;
    background-position: center 0;
}

.report-info span {}

.report-info p {
    padding: 0.2em 1em 0.2em 10px;
    margin-left: 40px;
    box-sizing: border-box;
    line-height: 1.75em;
    min-height: 40px;
    background: #EEE url(../images/global-bg-gray1.png) repeat top left;
}

.report-info i {
    vertical-align: top;
}

.report-distance {}

.report-distance h3 {}

.report-distance .traffic {
    width: 50%;
    display: inline-block;
    overflow: hidden;
    position: inherit;
    float: left;
}

.report-distance .traffic h3 {
    text-align: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    padding-top: 7px;
    box-sizing: border-box;
    background: #765E3F url(../images/btn-bg1.png) no-repeat center center;
    color: #FFF;
    margin-bottom: 0;
    background-position: center 0;
}

.report-distance .traffic p {
    line-height: 1.75em;
    min-height: 40px;
}

.report-distance .traffic-full {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    position: inherit;
    float: left;
}

.report-distance .traffic-full h3 {
    text-align: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    padding-top: 7px;
    box-sizing: border-box;
    background: #765E3F url(../images/btn-bg1.png) no-repeat center center;
    color: #FFF;
    margin-bottom: 0;
    background-position: center 0;
}

.report-distance .traffic-full p {
    line-height: 1.75em;
    min-height: 40px;
}

.report-distance .hr,
.report-distance .km {
    font-size: 0.8125em;
}

.report-distance .num {
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.9em;
}

.report-distance .hr.num {
    width: 3em;
    text-align: right;
    margin: 0 0.25em 0 0;
}

.report-distance .km.num {
    width: 5em;
    text-align: right;
    margin: 0 0.25em 0 1.5em;
}

.report-food {}

.report-food h3 {}

.report-food span {
    padding-right: 2em;
    line-height: 2em;
    display: inline
}

.report-food p i {
    vertical-align: middle;
}

.report-stay {}

.report-stay h3 {}

.itinerary-content {
    line-height: 1.75em;
    margin-bottom: 1em;
    /* padding: 1rem; */
    /* background-color: #f5f5f5; */
}

.itinerary-notice {
    padding: 1rem;
    background-color: #f5f5f5;
    margin-bottom: 2rem;
    line-height: 1.75em;
}

.itinerary-notice font {
    color: #122955;
    font-size: 1.25rem;
}


.itinerary-content h3 {
    margin-bottom: 0.5rem;
    color: #816741;
    font-weight: 500;
}

.itinerary-content p {
    margin-bottom: 1em;
}

.itinerary-surprise {
    margin-bottom: 1em;
}

.itinerary-surprise ul {
    overflow: hidden;
    margin: 1em -1em;
}

.itinerary-surprise li {
    float: left;
    display: block;
    padding: 1em;
    box-sizing: border-box;
}

.itinerary-surprise li.col2 {
    width: 50%;
}

.itinerary-surprise figure {
    min-height: 150px;
    margin-bottom: 1em;
}

.itinerary-surprise img {
    display: block;
    width: 100%;
    height: auto;
}

.surprise-content {}

.surprise-content h4 {
    color: #9E7B4B;
}

.surprise-content p {
    font-size: 0.8125em;
    line-height: 1.75em;
}

.surprise-content {}

.surprise-content {}

.surprise-content {}


/* 備註 itinerary note */

.itinerary-note {
    /* background-color: #f5f5f5;
    padding: 1em; */
}

.itinerary-note h4 {
    font-size: 1em;
    color: #666;
    margin-bottom: 1.2em
}

.itinerary-note p {
    font-size: 0.95em;
    color: #5d5d5d;
}


/*日程 - 景點 itinerary attractions */

.itinerary-attractions {
    margin-bottom: 1.5em;
}

.itinerary-attractions ul {
    overflow: hidden;
    margin: 0 -0.5em;
}

.itinerary-attractions li {
    float: left;
    display: block;
    padding: 0.5em;
    box-sizing: border-box;
    overflow: hidden;
}

.itinerary-attractions li.col2 {
    width: 50%;
}

.itinerary-attractions li.col3 {
    width: 33.3333%;
    box-sizing: border-box;
    overflow: hidden;
}

.itinerary-attractions li.col4 {
    width: 25%;
}

.itinerary-attractions li.col5 {
    width: 20%;
}

.itinerary-attractions .col2:nth-child(2n+1) {
    clear: both;
}

.itinerary-attractions .col3:first-child {
    clear: both;
}

.itinerary-attractions li a {
    display: block;
    position: relative;
}

.itinerary-attractions figure {
    position: relative;
    /* background-color: #000; */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
   
}


/*
.itinerary-attractions figure:hover {opacity:0.7; filter: alpha(opacity=70);}
.itinerary-attractions img { display:block; width:100%; height:auto;}
.attractions-content { position:absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,0.7); height:3em;  color: #fff; box-sizing:border-box; padding: 0.5em 0; 
-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.itinerary-attractions figure:before { content:''; width: 100%; height: 2px; background-color:#C1A068; display: block; position:absolute; bottom: 0; left: 0; z-index: 100; }
.itinerary-attractions li:hover .attractions-content{ height: 100%;}
.attractions-content h4 { font-size:0.875em; margin-bottom: 1.5em;}
.attractions-content h4 span { font-size: 0.8em; font-style:italic; display: block; font-family: Arial, "Microsoft JhengHei", Helvetica, sans-serif;}
.attractions-content p { font-size: 0.8125em;}
*/

.itinerary-attractions figure {
    min-height: 200px;
}

.itinerary-attractions img {
    display: block;
    width: 100%;
    height: auto;
}

.attractions-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    height: 4em;
    color: #fff;
    box-sizing: border-box;
    padding: 0.5em 1em;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.attractions-content.attractions-height {
    height: auto;
}

.attractions-content:before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #C1A068;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.attractions-content .unesco {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url(../images/unesco-icon.svg);
    background-repeat: no-repeat;
    background-size: 36px auto;
    background-position: center bottom;
    position: absolute;
    top: 5px;
    right: 10px;
}

.itinerary-attractions li:hover .attractions-content {
    height: 100%;
}

.attractions-content h4 {
    margin-bottom: 1.5em;
}

.attractions-content.attractions-height h4 {
    margin-bottom: 0;
}

.attractions-content .writer-title {
    margin: .1em 0 .1em 0;
    font-size: 1.25em;
    line-height: 120%;
}

.attractions-content .tag {
    color: #D3B272;
    margin-bottom: 1rem;
    font-size: 0.95em;
}

.attractions-content h4 span {
    font-size: 0.7em;
    font-style: italic;
    display: block;
    font-family: Arial, "Microsoft JhengHei", Helvetica, sans-serif;
}

.attractions-content p {
    font-size: 0.8125em;
}

.attraction-scenic {
    overflow: hidden;
    display: block;
    line-height: 1.75em;
    margin-bottom: 2em;
}

.attraction-scenic h3 {
    margin-bottom: 0.5em;
}

.attraction-scenic h4 {
    margin-bottom: 0.5em;
}

.attraction-scenic ul {}

.attraction-scenic p {
    margin-right: 10px;
    display: inline-block;
}

.attraction-scenic .as-place a {
    background: #E4E4E4;
    display: inline-block;
    padding: 7px 25px;
    color: #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    float: left;
}

.attraction-scenic .as-place a:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2d2c4+0,846f53+100 */
    background: #e2d2c4;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #e2d2c4 0%, #846f53 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #e2d2c4 0%, #846f53 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #e2d2c4 0%, #846f53 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e2d2c4', endColorstr='#846f53', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    color: #fff;
    padding: 7px 25px;
    display: inline-block;
}

.attraction-scenic .as-mv {
    background-image: url(../images/icon-mv.png);
    background-position: 42px -84px;
    width: 42px;
    height: 42px;
    display: inline-block;
}

.attraction-scenic .as-mv a {
    width: 42px;
    height: 42px;
    display: inline-block;
}

.attraction-scenic .as-mv:hover {
    background-position: 42px -42px;
    display: inline-block;
    width: 42px;
    height: 42px;
    background-image: url(../images/icon-mv.png);
    cursor: pointer;
}


/* 行程特色 16種Layout位置樣式 
------------------------------------*/

.style1,
.style2,
.style3,
.style4,
.style5,
.style6,
.style7,
.style8,
.style9,
.style10,
.style11,
.style12,
.style13,
.style14-2,
.style15,
.style16 {
    overflow: hidden;
    width: 100%;
    background-size: auto 67.5vw;
    background-repeat: no-repeat;
    background-position: center top;
    float: left
}

.style18,
.style19 {
    background-size: 100% auto;
    width: 100%;
}

.style14-3,
.style17-4 {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    float: left
}

.style1 div,
.style2 div,
.style3 div,
.style4 div,
.style5 div,
.style6 div,
.style7 div,
.style8 div,
.style9 div,
.style10 div,
.style11 div,
.style12 div,
.style13 div,
.style14-2 div,
.style14-3 div,
.style15 div,
.style16 div,
.style17 div,
.style18 div,
.style19 div {
    width: 90%;
    padding: 70vw 5% 8vw 5%;
}

.style1 div h3,
.style2 div h3,
.style3 div h3,
.style4 div h3,
.style5 div h3,
.style6 div h3,
.style7 div h3,
.style8 div h3,
.style9 div h3,
.style10 div h3,
.style11 div h3,
.style12 div h3,
.style13 div h3,
.style14 div h3,
.style14-2 div h3,
.style14-3 div h3,
.style15 div h3,
.style16 div h3,
.style17 div h3,
.style17-2 div h3,
.style17-3 div h3,
.style17-4 div h3,
.style18 div h3,
.style19 div h3 {
    font-size: 1.15rem;
    line-height: 1.3rem;
    margin-bottom: 6px;
    font-weight: bold
}

.style1 div h4,
.style2 div h4,
.style3 div h4,
.style4 div h4,
.style5 div h4,
.style6 div h4,
.style7 div h4,
.style8 div h4,
.style9 div h4,
.style10 div h4,
.style11 div h4,
.style12 div h4,
.style13 div h4,
.style14 div h4,
.style14-2 div h4,
.style15 div h4,
.style16 div h4,
.style17 div h4,
.style17-2 div h4,
.style17-3 div h4,
.style17-4 div h4,
.style14-2 div h4,
.style18 div h4,
.style19 div h4 {
    font-size: 0.9rem;
    line-height: 1rem;
    margin-bottom: 6px;
    font-weight: lighter
}

.style1 div p,
.style2 div p,
.style3 div p,
.style4 div p,
.style5 div p,
.style6 div p,
.style7 div p,
.style8 div p,
.style9 div p,
.style10 div p,
.style11 div p,
.style12 div p,
.style13 div p,
.style14 div p,
.style14-2 div p,
.style14-3 div p,
.style15 div p,
.style16 div p,
.style17 div p,
.style17-2 div p,
.style17-3 div p,
.style17-4 div p,
.style18 div p,
.style19 div p {
    font-size: 0.9rem;
    font-weight: lighter
}

.style1,
.style2,
.style3 {
    background-size: auto 67.5vw;
    background-position: right top
}

.style7,
.style8,
.style9,
.style14 {
    background-size: auto 67.5vw;
    background-position: left top
}

.style12,
.style13 {
    background-size: 100vw auto;
    background-position: right 0
}

.style12 div,
.style13 div {
    padding: 70vw 5% 8vw 5%
}

.style17 {
    overflow: hidden;
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    float: left
}

.style17-2,
.style17-3,
.style17-4 {
    overflow: hidden;
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
}

.style14-2,
.style14-3 {
    overflow: hidden;
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
}

.style14 {
    overflow: hidden;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    float: left;
}

.style17-2 div {
    width: 100%;
    padding: 65vw 5% 8vw 5%;
}


/*.style14 div{ padding: 33vw 0 0 0;display: none;-webkit-background-size: cover;background-size: cover;}*/

.style17-2 div h3,
.style17-2 div h4,
.style17-2 div p,
.style14 div h3,
.style14 div h4,
.style14 div p,
.style14-2 div h3,
.style14-2 div h4,
.style14-2 div p,
.style18 div h3,
.style18 div h4 {
    width: 100%;
}

.style19 div h3,
.style19 div h4 {
    width: 100%;
}

.style18 div p,
.style19 div p {
    width: 100%;
}

.style17-3 div {
    width: 100%;
    padding: 120vw 5% 8vw 5%;
}

.style17-3 div h3,
.style17-3 div h4,
.style17-3 div p {
    width: 90%;
}

.style18 {
    overflow: hidden;
    background-image: none;
}

.style18 div {
    margin: 2.5% 0;
    padding: 1% 2% 1% 4%;
}

.style19 {
    overflow: hidden;
}

.style19 div {
    margin: 2.5% 0;
    padding: 1% 2% 1% 4%;
    text-align: center;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    //padding-top: 25px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #816741;
    color: #816741;
    line-height: 165%;
}

@media (min-width: 479px) {

    /*.style17-2,.style17-3{overflow: hidden;background-size: 395px auto; background-position: center top; }    
.style17-2 div { width: 100%; padding: 60vw 5% 8vw 5%; }
.style17-3 div{padding: 110vw 5% 8vw 5%;}   */
    .style17c {
        overflow: hidden;
        background-size: 394px auto;
        background-position: center top;
    }

    .style17c div {
        padding: 140vw 5% 8vw 5%;
    }

    .style14-3 div {
        padding: 67vw 5% 8vw 5%;
    }

    /*.style14{overflow: hidden;background-size: 100% auto; background-position: center top;}*/
}

@media (min-width: 620px) {

    .style14-2,
    .style14-3 {
        background-size: 100% auto;
        background-position: center top;
    }

    .style14-3 div {
        padding: 68vw 5% 8vw 5%;
    }

    .style14-2 {
        width: 50%;
    }

    .style17-2 div {
        padding: 45vw 5% 3vw 5%;
    }

    .style17-3 div {
        padding: 83vw 5% 8vw 5%;
    }

    .style17c div {
        padding: 89vw 5% 8vw 5%;
    }
}

@media (min-width: 700px) {

    .style1 div>p,
    .style2 div>p,
    .style3 div>p,
    .style4 div>p,
    .style5 div>p,
    .style6 div>p,
    .style7 div>p,
    .style8 div>p,
    .style9 div>p,
    .style10 div>p,
    .style11 div>p,
    .style12 div>p,
    .style13 div>p,
    .style14 div>p,
    .style15 div>p,
    .style16 div>p,
    .style17 div>p,
    .style18 div>p,
    .style19 div>p {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .style-bkbg {
        background: none;
    }

    .style-wbg {
        background: none;
    }

    .style17-2 div {
        padding: 90vw 5% 3vw 5%;
    }

    .style17-3 div {
        padding: 70vw 5% 8vw 5%;
    }

    .style18 {
        /*min-height:148px;*/
        width: 100%;
    }

    .style18 div {
        margin: 1.5% 0 0 0;
        padding: 1% 2% 1% 4%;
        float: left;
    }

    .style19 {
        /*min-height:148px;*/
        width: 100%;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

    .style19 div {
        margin: 1.5% auto 0 auto;
        padding: 1% 2% 1% 4%;
    }
}

@media (min-width: 900px) {

    .style1,
    .style2,
    .style3,
    .style4,
    .style5,
    .style6,
    .style7,
    .style8,
    .style9,
    .style10,
    .style11,
    .style12,
    .style13,
    .style14,
    .style15,
    .style16,
    .style17 {
        height: 62vw;
        background-size: cover;
        background-position: center top;
        position: relative;
    }

    .style1 div,
    .style2 div,
    .style3 div,
    .style4 div,
    .style5 div,
    .style6 div,
    .style7 div,
    .style8 div,
    .style9 div,
    .style10 div,
    .style11 div,
    .style12 div,
    .style13 div,
    .style14 div,
    .style15 div,
    .style16 div,
    .style17 div,
    .style18 div {
        width: 45%;
        padding: 0;
        margin: 0
    }

    .style1 div h3,
    .style2 div h3,
    .style3 div h3,
    .style4 div h3,
    .style5 div h3,
    .style6 div h3,
    .style7 div h3,
    .style8 div h3,
    .style9 div h3,
    .style10 div h3,
    .style11 div h3,
    .style12 div h3,
    .style13 div h3,
    .style14 div h3,
    .style15 div h3,
    .style16 div h3,
    .style17 div h3,
    .style17-2 div h3,
    .style17-3 div h3,
    .style17c div h3,
    .style14-2 div h3,
    .style18 div h3,
    .style19 div h3 {
        font-size: 2.5rem;
        line-height: 2.8rem
    }

    .style1 div h4,
    .style2 div h4,
    .style3 div h4,
    .style4 div h4,
    .style5 div h4,
    .style6 div h4,
    .style7 div h4,
    .style8 div h4,
    .style9 div h4,
    .style10 div h4,
    .style11 div h4,
    .style12 div h4,
    .style13 div h4,
    .style14 div h4,
    .style15 div h4,
    .style16 div h4,
    .style17 div h4,
    .style17-2 div h4,
    .style17-3 div h4,
    .style17c div h4,
    .style14-2 div h4,
    .style18 div h4,
    .style19 div h4 {
        font-size: 1.4rem;
        line-height: 2rem
    }

    .style1 div p,
    .style2 div p,
    .style3 div p,
    .style4 div p,
    .style5 div p,
    .style6 div p,
    .style7 div p,
    .style8 div p,
    .style9 div p,
    .style10 div p,
    .style11 div p,
    .style12 div p,
    .style13 div p,
    .style14 div p,
    .style15 div p,
    .style16 div p,
    .style17 div p,
    .style17-2 div p,
    .style17-3 div p,
    .style17c div p,
    .style14-2 div p,
    .style18 div pm.style19 div p {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .editor h3 {
        font-size: 2.5rem;
        line-height: 2.8rem
    }

    .editor h4 {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .editor p {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .style19 div {
        width: 45%;
        margin: 1% auto;
    }

    .style1 div {
        padding: 1% 2% 1% 5%;
        margin-top: 5%;
    }

    .style2 div {
        padding: 1% 2% 1% 5%;
        margin-top: 25%;
    }

    .style3 div {
        padding: 1% 2% 1% 5%;
        bottom: 5%;
        position: absolute;
    }

    .style4 div {
        padding: 4% 2% 1% 2%;
        margin: 0 auto;
        width: 52%;
    }

    .style5 div {
        padding: 1% 2% 1% 2%;
        margin: 25% auto 0 auto;
        width: 52%;
    }

    .style6 div {
        padding: 1% 2% 4% 2%;
        bottom: 0;
        position: absolute;
        left: 25%;
        width: 52%;
    }

    .style7 div {
        padding: 1% 2.5% 1% 2.5%;
        margin-top: 3%;
        float: right;
    }

    .style8 div {
        padding: 1% 2.5% 1% 2.5%;
        margin-top: 25%;
        float: right;
    }

    .style9 div {
        padding: 1% 2.5% 1% 2.5%;
        bottom: 4.5%;
        position: absolute;
        right: 0;
    }

    .style10 {
        background-size: 50% auto;
        background-position: right center
    }

    .style10 div {
        width: 45%;
        padding: 6% 6% 6% 3%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .style11 {
        background-size: 50% auto;
        background-position: left center
    }

    .style11 div {
        width: 45%;
        padding: 6% 3% 6% 6%;
        float: right;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }

    .style12::after,
    .style13::after {
        content: '';
        display: block;
        clear: both;
    }

    .style12 div,
    .style13 div {
        width: 39%;
        padding: 6% 3%;
        box-sizing: border-box;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        background: none;
    }

    .style12 div::before,
    .style13 div::before {
        height: 400%;
        content: " ";
        width: 100%;
        position: absolute;
        top: -100%;
        left: 0;
        z-index: 1;
    }

    .style12 div h3,
    .style12 div h4,
    .style12 div p,
    .style13 div h3,
    .style13 div h4,
    .style13 div p {
        position: relative;
        z-index: 2;
    }

    .style12 div.style-bkbg::before,
    .style13 div.style-bkbg::before {
        background: url(../images/black30.png) repeat left top;
    }

    .style12 div.style-wbg::before,
    .style13 div.style-wbg::before {
        background: url(../images/white30.png) repeat left top;
    }

    .style13 div {
        float: right;
    }

    .style14 {
        width: 50%;
        /*min-height:614px;*/
    }

    /*.style14 div { width: 80%; margin:8% auto 0 auto; padding:6% 2% 2% 2%; }

.style14 div h3 { font-size: 1.8rem; line-height: 2.2rem; text-align: center }
.style14 div h4 { font-size: 1.25rem; line-height: 1.8rem; text-align: center }
.style14 div p { font-size: 1rem; line-height: 1.5rem; text-align: center }*/
    .style14-2,
    .style14-3 {
        overflow: hidden;
        width: 50%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        float: left;
        /*min-height:307px;*/
        border-left: 1px solid #fff;
        box-sizing: border-box
    }

    .style14-2 div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6% 2% 2% 2%;
    }

    .style17-4 div {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 6%;
    }

    .style14-3 div h3,
    .style17-4 div h3 {
        font-size: 1.5em;
        font-weight: normal;
    }

    .style15::after,
    .style16::after {
        content: '';
        display: block;
        clear: both;
    }

    .style15 div,
    .style16 div {
        width: 64%;
        height: auto;
        padding: 6% 3%;
        box-sizing: border-box;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        background: none;
    }

    .style15 div::before,
    .style16 div::before {
        height: 400%;
        content: " ";
        width: 100%;
        position: absolute;
        top: -100%;
        left: 0;
        z-index: 1;
    }

    .style15 div h3,
    .style15 div h4,
    .style15 div p,
    .style16 div h3,
    .style16 div h4,
    .style16 div p {
        position: relative;
        z-index: 2;
    }

    .style15 div.style-bkbg::before,
    .style16 div.style-bkbg::before {
        background: url(../images/black30.png) repeat left top;
    }

    .style15 div.style-wbg::before,
    .style16 div.style-wbg::before {
        background: url(../images/white30.png) repeat left top;
    }

    .style16 div {
        float: right;
    }

    .style17,
    .style17-4 {
        /*width:33.33%;*/
        /* height:100vh;*/
        border-left: 1px solid #fff;
        height: 203px;
        background-size: 100% auto;
        box-sizing: border-box;
    }

    .style17-4 {
        height: 450px;
    }

    .style17:nth-child(3n+1),
    .style17-4:nth-child(3n+1) {
        margin: 0;
    }

    .style17 div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6%;
    }

    .style17-2 {
        overflow: hidden;
        /*width: 33.33%;*/
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        float: left;
        /*min-height:506px;*/
    }

    .style17-2:nth-child(3n+1) {
        margin: 0;
    }

    .style17-2 div {
        width: 80%;
        padding: 6% 2% 2% 2%;
        margin: 8% auto 0 auto;
    }

    .style17-3 {
        overflow: hidden;
        /*width: 33.33%;*/
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        float: left;
        /*min-height:392px;*/
    }

    .style17-3 div {
        width: 80%;
        padding: 6% 2% 2% 2%;
        margin: 8% auto 0 auto;
    }

    .style17-3:nth-child(3n+1) {
        margin: 0;
    }

    .style17c {
        overflow: hidden;
        width: 33%;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        float: left;
        min-height: 502px;
        margin-left: 0.5%;
    }

    .style17c div {
        padding: 6% 2% 2% 2%;
        box-sizing: border-box;
        width: 80%;
        margin: 8% auto 0 auto;
    }

    .style17c:nth-child(3n+1) {
        margin: 0;
    }

    .style-bkbg {
        background: url(../images/black30.png)repeat left top;
    }

    .style-wbg {
        background: url(../images/white30.png)repeat left top;
    }

    .style18 {
        /*min-height:184px;*/
        background-position: left top;
        background-size: 100% auto;
    }

    .style18 div {
        padding: 1% 2% 1% 4%;
        float: left;
    }

    .style19 {
        /*min-height:184px;*/
        background-position: left top;
        background-size: 100% auto;
    }

    .style19 div {
        padding: 1% 2% 1% 4%;
    }
}

@media (min-width: 1100px) {
    #itinerary-remark {
        padding-bottom: 50px;
        border-radius: 0 0 10px 10px
    }

    .style1,
    .style2,
    .style3,
    .style4,
    .style5,
    .style6,
    .style7,
    .style8,
    .style9,
    .style10,
    .style11,
    .style12,
    .style13,
    .style15,
    .style16 {
        max-height: 680px
    }

    .style1 div h3,
    .style2 div h3,
    .style3 div h3,
    .style4 div h3,
    .style5 div h3,
    .style6 div h3,
    .style7 div h3,
    .style8 div h3,
    .style9 div h3,
    .style10 div h3,
    .style11 div h3,
    .style12 div h3,
    .style13 div h3,
    .style14 div h3,
    .style15 div h3,
    .style16 div h3,
    .style17 div h3,
    .style17-2 div h3,
    .style17-3 div h3,
    .style17c div h3,
    .style14-2 div h3,
    .style18 div h3,
    .style19 div h3 {
        font-size: 2.5rem;
        line-height: 2.8rem;
        padding-bottom: 10px;
        font-weight: normal
    }

    .style1 div h4,
    .style2 div h4,
    .style3 div h4,
    .style4 div h4,
    .style5 div h4,
    .style6 div h4,
    .style7 div h4,
    .style8 div h4,
    .style9 div h4,
    .style10 div h4,
    .style11 div h4,
    .style12 div h4,
    .style13 div h4,
    .style14 div h4,
    .style15 div h4,
    .style16 div h4,
    .style17 div h4,
    .style17-2 div h4,
    .style17-3 div h4,
    .style17c div h4,
    .style14-2 div h4,
    .style18 div h4,
    .style19 div h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        padding-bottom: 10px;
        font-weight: normal
    }

    .editor h3 {
        font-size: 2.5rem;
        line-height: 2.8rem;
        padding-bottom: 10px
    }

    .editor h4 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        padding-bottom: 10px;
        opacity: 0.8
    }

    .style10 {
        background-size: 40% auto;
        background-position: 90% center
    }

    .style10 div {
        width: 40%;
        padding: 6% 3%;
        margin-left: 8%;
    }

    .style11 {
        background-size: 40% auto;
        background-position: 10% center
    }

    .style11 div {
        width: 40%;
        padding: 6% 3%;
        margin-right: 8%;
    }

    .style14 {
        width: 50%;
        /*max-height: 781px*/
    }

    .style14 div h3 {
        /*font-size: 1.8rem; line-height: 2.2rem*/
    }

    .style14 div h4 {
        /*font-size: 1.25rem; line-height: 1.8rem*/
    }

    /*.style14-2{min-height:387px;}*/
    .style17,
    .style17-4 {
        position: relative;
        background-size: 100% auto;
        /*height:266px;*/
    }

    .style17-2 {
        /*min-height: 637px;*/
        position: relative;
    }

    .style17-3 {
        /*min-height: 494px;*/
        position: relative;
    }

    .style17c {
        min-height: 633px;
        position: relative;
        max-height: 658px;
    }

    /*.style18{ min-height:233px;}*/
    .style18 div {
        margin: 3% 0 0 0;
        padding: 1% 2% 1% 4%;
        float: left;
    }

    /*.style19{ min-height:233px;}*/
    .style19 div {
        margin: 3% auto 0 auto;
        padding: 1% 2% 1% 4%;
    }
}

@media (min-width: 1400px) {

    .style1,
    .style2,
    .style3,
    .style4,
    .style5,
    .style6,
    .style7,
    .style8,
    .style9,
    .style10,
    .style11,
    .style12,
    .style13,
    .style14,
    .style15,
    .style16 {
        max-height: 800px;
        position: relative;
    }

    .style1 div,
    .style2 div,
    .style3 div,
    .style4 div,
    .style5 div,
    .style6 div,
    .style7 div,
    .style8 div,
    .style9 div,
    .style10 div,
    .style11 div,
    .style12 div,
    .style13 div,
    .style14 div,
    .style17 div,
    .style17-2 div,
    .style17-3 div,
    .style17c div,
    .style18 div {
        width: 40%
    }

    .style1 div h3,
    .style2 div h3,
    .style3 div h3,
    .style4 div h3,
    .style5 div h3,
    .style6 div h3,
    .style7 div h3,
    .style8 div h3,
    .style9 div h3,
    .style10 div h3,
    .style11 div h3,
    .style12 div h3,
    .style13 div h3,
    .style14 div h3,
    .style15 div h3,
    .style16 div h3,
    .style17 div h3,
    .style17-2 div h3,
    .style17-3 div h3,
    .style17c div h3,
    .style14-2 div h3,
    .style18 div h3,
    .style19 div h3 {
        font-size: 2.875rem;
        line-height: 3rem;
        padding-bottom: 10px
    }

    .style1 div h4,
    .style2 div h4,
    .style3 div h4,
    .style4 div h4,
    .style5 div h4,
    .style6 div h4,
    .style7 div h4,
    .style8 div h4,
    .style9 div h4,
    .style10 div h4,
    .style11 div h4,
    .style12 div h4,
    .style13 div h4,
    .style14 div h4,
    .style15 div h4,
    .style16 div h4,
    .style17 div h4,
    .style17-2 div h4,
    .style17-3 div h4,
    .style17c div h4,
    .style14-2 div h4,
    .style18 div h4,
    .style19 div h4 {
        font-size: 1.5rem;
        line-height: 1.8rem;
        padding-bottom: 10px;
        opacity: 0.8;
        font-weight: normal
    }

    .style1 div p,
    .style2 div p,
    .style3 div p,
    .style4 div p,
    .style5 div p,
    .style6 div p,
    .style7 div p,
    .style8 div p,
    .style9 div p,
    .style10 div p,
    .style11 div p,
    .style12 div p,
    .style13 div p,
    .style14 div p,
    .style15 div p,
    .style16 div p,
    .style17 div p,
    .style17-2 div p,
    .style17-3 div p,
    .style17c div p,
    .style14-2 div p,
    .style18 div p,
    .style19 div p {
        font-size: 1.2rem;
        line-height: 1.625rem
    }

    .style17-2 {
        /*max-height: 267px;*/
        position: relative;
    }

    .style1 div,
    .style2 div,
    .style3 div,
    .style4 div,
    .style5 div,
    .style6 div,
    .style7 div,
    .style8 div,
    .style9 div,
    .style18 div,
    .style19 div {
        width: 45%
    }

    .style1 div {
        padding: 1% 2% 1% 4%;
        margin-top: 3%;
    }

    .style2 div {
        padding: 1% 2% 1% 4%;
        margin-top: 25%;
    }

    .style3 div {
        padding: 1% 2% 1% 4%;
        bottom: 4.5%;
        position: absolute;
    }

    .style4 div {
        padding: 4% 2% 1% 2%;
        margin: 0 auto;
    }

    .style5 div {
        padding: 1% 2% 1% 2%;
        margin: 25% auto 0 auto;
    }

    .style6 div {
        padding: 1% 2% 4% 2%;
        bottom: 0;
        position: absolute;
        left: 25%;
    }

    .style7 div {
        padding: 1% 2.5% 1% 2.5%;
        margin-top: 3%;
        float: right;
    }

    .style8 div {
        padding: 1% 2.5% 1% 2.5%;
        margin-top: 25%;
        float: right;
    }

    .style9 div {
        padding: 1% 2.5% 1% 2.5%;
        bottom: 4.5%;
        position: absolute;
        right: 0;
    }

    .style10 {
        background-size: 40% auto;
        background-position: 86% center
    }

    .style10 div {
        width: 38%;
    }

    .style11 {
        background-size: 40% auto;
        background-position: 14% center
    }

    .style11 div {
        width: 38%;
    }

    .style14 {
        width: 50%;
        /*max-height: 800px*/
    }

    /*.style14 div { width: 80%; margin:8% auto 0 auto; padding:6% 2% 2% 2%;}*/
    /*.style14 div h3 { font-size: 2rem; line-height: 2.4rem }*/
    /*.style14 div h4 { font-size: 1.5rem; line-height: 1.9rem }*/
    /*.style14-2,.style14-3{min-height:400px;}*/
    /*.style14 div h3{font-size: 2rem; }*/
    .style17 div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6% 2% 2% 2%;
    }

    .style17-2 div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6% 2% 2% 2%;
    }

    .style17-3 div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6% 2% 2% 2%;
    }

    .style17c div {
        width: 80%;
        margin: 8% auto 0 auto;
        padding: 6% 2% 2% 2%;
    }

    /*.style15 div { padding: 10% 0 0 8%; width: 64% }
.style16 div { padding: 10% 0 0 18%; width: 64% }*/
    /*.style17-2{min-height: 658px;}*/
    /*.style17-3{min-height: 509px; }*/
    .style17c {
        height: 656px;
        width: 393px;
        margin-left: 2px;
    }

    /*.style18{ min-height:240px;}*/
    .style18 div {
        margin: 1.5% 0 0 0;
    }

    /*.style19{ min-height:240px;}*/
    .style19 div {
        margin: 1.5% auto 0 auto;
    }
}

@media (min-width: 1680px) {}


/*-----------------------------------
attractions 景點

  包括以下單元
  1. 景點地圖 map
  2. 文章列表 list
  3. 景點介紹 detail
------------------------------------*/

.attractions {}


/* 景點導覽列 nav 
------------------------------------*/

.attractions-nav {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 1em 1em;
    width: 100%;
    display: block;
}

.attractions-flag {
    padding: 2em 1em;
    max-width: 240px;
    margin-bottom: 5em;
    box-sizing: border-box;
}

.attractions-flag h2 {
    line-height: 1em;
    text-align: center;
}

.attractions-flag p {
    text-align: center;
    margin-bottom: -50px;
    position: relative;
    z-index: 10;
}

.attr-title {}

.attr-subtitle {
    display: block;
}

.attr-visit {}

.attr-visit-num {
    font-size: 3.5em;
    line-height: 1em;
    font-style: italic;
}

.attr-visit-nation {}

.attractions-filter {
    text-align: center;
}

.attr-filter-title {
    text-align: center;
    display: block;
    margin-bottom: 0.5em;
}

.attractions-filter select {
    font-size: 1.125em;
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
    padding: 0.25em;
}

.attractions-filter input {
    font-size: 1.125em;
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
    padding: 0.25em;
    box-sizing: border-box;
}

.attractions-filter option {}

.attractions-filter .line {
    border-bottom: 1px solid #fff;
    margin: 20px 0;
}

.attr-filter-search {
    padding: 0.5em 2em;
    display: block;
    background-color: #765E3F;
    color: #FFF;
    border-radius: 5px;
    text-align: center;
    margin: auto;
}

.attr-filter-search a:hover {
    color: #fff;
}


/* 景點地圖 map
------------------------------------*/

.attractions-map {
    box-sizing: border-box;
}

#map_canvas {
    height: 100vh;
    width: 100vw;
}

#map_wrap {
    width: 100vw;
    height: 100vh;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.attractions-map .maparea {}

.attractions-map .maparea ul {}

.attractions-map .returnhome {
    position: absolute;
    right: 2em;
    top: 2em;
    z-index: 999;
}


/*icon必加*/

.attractions-map .returnhome .back {
    padding: 0.5em 1.5em;
    display: inline-block;
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    position: relative;
}

.attractions-map .returnhome .back:before {
    content: '';
    display: block;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/icon-sprite.svg) no-repeat top left;
    /*相容新瀏覽器 */
    background: url(../images/icon-sprite.png) no-repeat top left \9;
    /* 相容IE 舊瀏覽器*/
    background-size: 47px 1980px;
    /* SVG Sprite 必加尺寸才能顯示 */
    width: 28px;
    height: 24px;
    background-position: -10px -1120px;
}


/* 文章列表 list
------------------------------------*/

.attractions-list {
    box-sizing: border-box;
}

.attractions-list:after {
    content: '';
    display: block;
    clear: both;
}

.attr-list-header {
    padding: 0 1em;
    margin: 1em 0;
    position: relative;
}

.attr-list-header h1 {
    font-size: 2em;
    background-color: #fff;
    text-align: center;
    padding: 0.5em;
    box-sizing: border-box;
}

.attr-list-header h1 span {
    line-height: 1em;
    display: block;
    font-size: 25px;
    font-family: 'Tinos', serif;
    color: #A0876B;
}

.attr-list-header .back {
    padding: 0.5em 1.5em;
    display: inline-block;
    position: absolute;
    right: 10em;
    top: 50%;
    margin-top: -1em;
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
}

.attr-list-header .back:before {
    content: '';
    display: block;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/icon-sprite.svg) no-repeat top left;
    /*相容新瀏覽器 */
    background: url(../images/icon-sprite.png) no-repeat top left \9;
    /* 相容IE 舊瀏覽器*/
    background-size: 47px 1980px;
    /* SVG Sprite 必加尺寸才能顯示 */
    width: 28px;
    height: 24px;
    background-position: -10px -1120px;
}

.attr-list-header .tolist {
    padding: 0.5em 1.5em;
    display: inline-block;
    position: absolute;
    right: 2em;
    top: 50%;
    margin-top: -1em;
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
}

.attr-list-header .tolist:before {
    font-family: FontAwesome;
    content: '\f024';
    width: 24px;
    height: 24px;
    display: inline-block;
}

.attr-article-list {
    padding: 0 0.5em;
}

.attr-article-list:after {
    content: '';
    display: block;
    overflow: hidden;
    clear: both;
}

.attr-article-list a {
    display: block;
    padding: 0.75em;
    margin: 0 0 1em;
    background-color: #fff;
}

.attr-article-list .column {
    padding: 0 0.5em;
    box-sizing: border-box;
}

.attr-article-list img {
    display: block;
    width: 100%;
    height: auto;
}

.attr-article-list .pic {
    margin-bottom: 0.5em;
}

.attr-article-list p {
    margin-bottom: 0.5em;
}

.article-content {}

.article-content .no {
    display: inline;
    line-height: 30px;
    font-size: 20px;
    vertical-align: top;
}

.article-content .unesco {
    display: inline-block;
    background-image: url(../images/unesco-brown.svg);
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-position: center bottom;
    width: 30px;
    height: 30px;
}

.article-content .title-ch-name {
    display: inline;
    vertical-align: top;
    line-height: 30px;
    font-size: 20px;
    color: #000;
    word-wrap: break-word;
    word-break: break-all;
    margin-right: 5px;
}

.article-content .title-en-name {
    display: inline;
    font-size: 18px;
    font-family: 'Tinos', serif;
    color: #A0876B;
    vertical-align: top;
    line-height: 30px;
}


/* 景點介紹 detail
------------------------------------*/

.attractions-detail {}

.attractions-detail section {
    padding: 2.5em;
    box-sizing: border-box;
    overflow: hidden;
}


/* 主要內容區 */

.attr-article-hero {
    overflow: hidden;
    border: 1px solid #E0E0E0;
    background: #f5f5f5 url(../images/attrshadowbg.png) no-repeat center top;
    position: relative;
}

.attr-article-hero:after {
    content: '';
    background: url(../images/attrshadowbg2.png) no-repeat left bottom;
    position: absolute;
    bottom: 0;
    width: 1280px;
    height: 50px;
    display: block;
    left: 0;
}


/* 內容 */

.attr-article-main {
    padding: 0.5em;
    box-sizing: border-box;
    background-color: #f5f5f5;
}

.attr-article-side {
    padding: 0.5em;
    box-sizing: border-box;
    background-color: #f5f5f5;
}

.attr-article-side .attr-iconwrap {
    position: relative
}

.attr-article-side .attr-backfont:before {
    clear: both;
    position: absolute;
    right: 65px;
    top: 10px;
    font-family: FontAwesome;
    content: '\f024';
    width: 24px;
    height: 24px;
    display: inline-block;
    color: #fff;
}

.attr-article-side .attr-backfont,
.attr-article-side .i-prev {
    text-align: center;
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 10px 15px 10px 30px;
    display: inline-block;
    color: #000;
    background: #bbb;
    position: relative
}

.attr-article-side .attr-backfont:hover,
.attr-article-side .i-prev:hover,
.attr-article-side .i-next:hover {
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    margin: 0 0 10px 10px;
}

.attr-article-side .i-next {
    text-align: center;
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 10px 35px 10px 15px;
    display: inline-block;
    color: #000;
    background: #bbb;
    position: relative
}

.attr-article-side .i-next:before {
    content: '';
    background: url(../images/icon-arrow-right.png) no-repeat left top;
    height: 16px;
    width: 7px;
    position: absolute;
    right: 15px;
    top: 13px;
    display: inline-block;
}

.attr-article-side .i-prev:before {
    content: '';
    background: url(../images/icon-arrow-left.png) no-repeat left top;
    height: 16px;
    width: 7px;
    position: absolute;
    left: 15px;
    top: 13px;
    display: inline-block;
}

.attr-article-side .attr-backfont a,
.attr-article-side .i-prev a,
.attr-article-side .i-next a {
    color: #fff;
    float: right;
}

.attr-article-side:after {
    content: '';
    display: block;
    clear: both;
}

.attr-article-content {}

.attr-article-content h1 {
    font-size: 2em;
}

.attr-article-content .unesco {
    display: inline-block;
    background-image: url(../images/unesco-brown.svg);
    background-repeat: no-repeat;
    background-size: 40px auto;
    background-position: center bottom;
    width: 40px;
    height: 40px;
}

.attr-article-content .title-ch-name {
    display: inline;
    vertical-align: text-bottom;
    line-height: 50px;
    font-size: 30px;
    color: #000;
    word-wrap: break-word;
    word-break: break-all;
    margin-right: 5px;
    text-align: left;
    margin-left: -10px;
}

.attr-article-content .title-en-name {
    display: inline;
    font-size: 20px;
    vertical-align: bottom;
    line-height: 50px;
    color: #999;
    font-style: italic;
    font-weight: 400;
    font-family: Arial;
    margin-right: -5px;
}

.attr-article-content h1 span {
    padding: 0;
    margin: 0;
}

.attr-article-content .abox {
    text-align: right;
}

.attr-article-content .attr-audio a {
    color: #fff;
    float: right;
}

.attr-article-content .attr-audio:before {
    content: '';
    display: block;
    background-image: url(../images/icon-audio.png);
    width: 16px;
    height: 16px;
    position: absolute;
    left: 15px;
    top: 10px;
}

.attr-article-content .attr-audio {
    text-align: center;
    margin-bottom: 10px;
    padding: 10px 20px 10px 40px;
    display: inline-block;
    position: relative;
    background: #bbb;
    color: #000;
    border-radius: 5px;
}

.attr-article-content .attr-audio:hover {
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
}

.attr-slide {
    margin-bottom: 10px;
}

.attr-slide figure {
    /*max-width:835px; max-height:560px;*/
}

.attr-slide figcaption {
    display: none;
}

.attr-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.attr-slide .pre,
.attr-slide .next {
    position: absolute;
}

.attr-slide .pre {
    left: 20px;
}

.attr-slide .next {
    right: 20px;
}

.slick-slider {}

.slick-next.slick-arrow {
    right: 20px;
    z-index: 900;
}

.slick-prev.slick-arrow {
    left: 20px;
    z-index: 900;
}

.attr-slide .slick-dots {
    bottom: -20px;
}

.attr-description {
    font-size: 0.875em;
    line-height: 2em;
}


/* 分享 */

.share {}


/* 關聯景點 */

.related-attractions {
    background-color: #fff;
    padding: 1em;
    margin-bottom: 1em;
}

.related-attractions h3 {
    text-align: center
}

.related-attr-list {
    padding: 1em;
    overflow: hidden;
}

.related-attr-list li {
    width: 33.33333%;
    padding: 0.5em;
    box-sizing: border-box;
    float: left;
}

.related-attr-list a {
    background-color: #CCC;
    display: block;
    min-height: 1em;
    overflow: hidden;
}

.related-attr-list img {
    display: block;
    width: 100%;
    height: auto;
}


/* 捷徑 */

.related-shortcut {
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.related-shortcut img {
    display: block;
    width: 100%;
    height: auto;
}


/* 關聯行程 */

.related-itinerary {
    background-color: #fff;
}

.related-itinerary h3 {
    text-align: center
}

.related-itinerary-list {}

.related-itinerary-list li {
    padding: 0.5em 2em;
    background-color: #F0F0F0;
    border-bottom: 1px solid #E5E5E5;
}

.related-itinerary-list li+li {
    border-top: 1px solid #FFF;
}

.related-itinerary-list span {
    padding-right: 2em;
}


/* 回應 */

.responses {
    background-color: #fff;
}


/*-----------------------------------
  線上報名 registration

  1. 選擇報名方式 select-registration
  2. 確認行程及條款 confirm-tours
  3. 填寫基本資料 registration-info
  4. 確認連絡資訊 confirm-info
  5. 完成報名 complete-registration
  6. 聯絡專員介紹行程 contact-staff
------------------------------------*/

.registration {
    background-color: #fff;
}

.registration-title {
    text-align: center;
    max-width: 820px;
    margin: auto;
    padding: 1em 0;
}

.registration .tours-info {}

.registration section {
    max-width: 820px;
    margin: auto;
    padding: 2em 0;
}

.registration section+section {}

.registration section.tours-ov-list {
    max-width: 1100px;
    list-style: none;
}

.registration section+section a {
    color: #9E7B4B;
}


/* step navigation */

.step-nav {
    margin-bottom: 2em;
}

.step-nav ol {
    max-width: 820px;
    margin: auto;
    text-align: center;
    list-style: none;
    position: relative;
    z-index: 10;
}

.step-nav ol:before {
    content: '';
    width: 50%;
    height: 1px;
    display: block;
    background-color: #CCC;
    margin: auto;
    position: absolute;
    top: 50%;
    z-index: -1;
    left: 50%;
    margin-left: -25%;
}

.step-nav li {
    display: inline-block;
    width: 10em;
    height: 10em;
    padding: 1.5em;
    position: relative;
    box-sizing: border-box;
}

.step-nav li:before {
    content: '';
    display: inline-block;
    width: 10em;
    height: 10em;
    padding: 1.5em;
    background: #EEE url(../images/global-bg-gray1.png) repeat top left;
    border: 3px solid #FFF;
    box-shadow: 0 1px 3px #999;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    margin: 0 0 0 -5em;
}

.step-nav li+li {
    margin-left: 3%;
}

.step-nav span {
    display: block;
    line-height: 1.5em;
}

.step-nav .num {
    font-size: 3em;
    line-height: 1em;
    font-style: italic;
}

.step-nav .current {
    position: relative;
    z-index: 20;
}

.step-nav .current:before {
    border: 1px solid #FFF;
    box-shadow: none;
}

.step-nav .current:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 0;
    z-index: -2;
}

.step-nav .current:after {
    width: 10.6em;
    height: 10.6em;
    margin: -0.3em 0 0 -5.3em;
    box-shadow: 0 1px 4px #666;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5a4025+1,5a4025+13,5a4025+13,c1a068+19,5a4025+60,c1a068+69,c1a068+99 */
    background: #5a4025;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #5a4025 1%, #5a4025 13%, #5a4025 13%, #c1a068 19%, #5a4025 60%, #c1a068 69%, #c1a068 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #5a4025 1%, #5a4025 13%, #5a4025 13%, #c1a068 19%, #5a4025 60%, #c1a068 69%, #c1a068 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #5a4025 1%, #5a4025 13%, #5a4025 13%, #c1a068 19%, #5a4025 60%, #c1a068 69%, #c1a068 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5a4025', endColorstr='#c1a068', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.step-nav .current .num {}


/* 文本樣式 */

.registration h3 {
    margin-bottom: 1em;
    font-weight: bold;
}

.registration p {
    line-height: 2em;
    margin-bottom: 0.5em;
}

.registration .unordered-list {
    list-style: square outside;
    padding-left: 1.5em;
}

.registration .ordered-list {
    list-style: decimal outside;
    padding-left: 1.5em;
}

.registration .unordered-list li,
.registration .ordered-list li {
    margin-bottom: 0.75em;
    line-height: 1.75em;
}

.join-notice {
    height: 170px;
    overflow: auto;
    padding: 2%;
    border: 1px solid #CDB387;
}

.registration .jn-title {
    font-weight: bold;
    font-size: 1.5em;
    margin: 0;
}


/* 行程概要 (與行程總覽列表共用樣式)*/

.registration .tours-ov-list {}

.registration .tours-ov-list>ul {
    padding: 0;
}

.registration .tours-ov-list>ul>li {
    margin: 0 auto;
    box-shadow: 1px 1px 3px #CCC;
}

.registration .tours-summary {
    padding: 2em 4em;
    box-sizing: border-box;
}

.registration .tours-summary li {
    line-height: 2em;
}

.registration .tours-summary span {
    font-weight: bold;
}


/* 表單 form */

.registration-form {}

.registration-form ul {}

.registration-form li {}

.registration-form input[type=checkbox] {
    width: 20px;
    height: 20px;
    vertical-align: text-top;
}


/*.registration-form input[type=checkbox]:checked+label:after{ content:''; background:#fc0;width:18px; height:18px; position:absolute; top:0; left:0;}*/

.checkbox {
    margin-top: 3em;
    text-align: center;
    font-size: 1.25em;
    line-height: 120%;
}

.topline {
    border-top: 1px solid #ccc;
}


/* global 表單欄位群組
------------------------------------*/

.form-group {
    margin-bottom: 1em;
}

.form-group label {
    display: inline-block;
    vertical-align: top;
    color: #666;
    padding: 5px;
}

.form-group>label {}

.form-group .col {
    display: inline-block;
    vertical-align: top;
}

.form-group .col>p {
    font-size: 0.825em;
    color: #999;
    padding: 5px 0;
}

.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    padding: 5px;
    background-color: #FFF;
    border: solid 1px #EAEAEA;
    box-sizing: border-box;
    box-shadow: inset 2px 5px 2px rgba(221, 221, 221, 0.15);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 2px #B28500;
    outline: none;
    background-color: #FFF;
    border: 1px solid #B28500;
}

.form-group .tourperson {
    display: inline-block;
    padding: 5px;
    vertical-align: top;
}


/*報名表單*/

.info-form .form-group {
    padding: 0.25em;
    border: 1px solid #CDB387;
    border-radius: 6px;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,ffffff+100 */
    background: #f0f0f0;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
}

.info-form input[type="password"],
.info-form input[type="text"],
.info-form input[type="date"],
.info-form input[type="email"],
.info-form input[type="tel"],
.info-form select,
.info-form textarea {
    background: transparent;
    border: solid 1px transparent;
    box-shadow: none;
}

.info-form input[type="password"]:focus,
.info-form input[type="text"]:focus,
.info-form input[type="date"]:focus,
.info-form input[type="email"]:focus,
.info-form input[type="tel"]:focus,
.info-form select:focus,
.info-form textarea:focus {
    box-shadow: none;
    outline: none;
    background-color: transparent;
    border: solid 1px transparent;
}

.info-form .radio {
    margin-bottom: 1em;
}

.info-form input[type="text"]:focus input {
    color: #fff;
}


/* 個別欄位 */

.select-registration .form-group select,
.select-registration .form-group input[type="text"] {
    display: inline-block;
    width: 10em;
    border: 1px solid #CDB387;
    border-radius: 6px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,ffffff+100 */
    background: #f0f0f0;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
    /* Firefox v3.5+ */
    -moz-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
    /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.select-registration .form-group p {
    font-size: 0.875em;
    padding: 0 5px;
}

.select-registration .form-group textarea {
    width: 100%;
}


/* 資料表單 */

.info-form {}

.info-form:after {
    content: '';
    display: block;
    clear: both;
}

.info-form li {
    margin-bottom: 1em;
}

.info-form .clear {
    clear: both;
}

.info-form .col1 {
    width: 33.33333%;
    float: left;
}

.info-form .col2 {
    width: 66.66666%;
    float: left;
}


/* 按鈕面板 */

.btn-panel {
    padding: 2em 0;
}

.btn-panel.center {
    text-align: center;
}

.btn-panel.right {
    text-align: right;
}

.btn-panel.left {
    text-align: left;
}

.btn-panel .btn {
    line-height: 30px;
    padding: 0 1em;
    min-width: 3em;
    display: inline-block;
    text-align: center;
    margin: 0 0.5em;
    background-color: #EEE;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
}

.btn-panel .gold {
    color: #FFF;
    border: 1px solid #77644B;
    border-top-color: #C7B5A6;
    border-left-color: #C7B5A6;
    margin-bottom: 10px;
    /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#66000000,Positive=true)";
    zoom: 1;
    filter: progid: DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#66000000, Positive=true);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3d3c6+0,cdaf94+19,765e3f+99 */
    background: #e3d3c6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e3d3c6 0%, #cdaf94 19%, #765e3f 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e3d3c6 0%, #cdaf94 19%, #765e3f 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e3d3c6 0%, #cdaf94 19%, #765e3f 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3d3c6', endColorstr='#765e3f', GradientType=0);
    /* IE6-9 */
}


/*  選擇報名方式 select registration
------------------------------------*/

.select-registration {}


/*  確認行程及條款 confirm tours
------------------------------------*/

.confirm-tours {}

.contract {
    padding: 1.5em;
    box-sizing: border-box;
    border: 1px solid #CDB387;
    margin-bottom: 1em;
    max-height: 11em;
    overflow-y: auto;
    /* Firefox v3.5+ */
    -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
    /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
}


/*  填寫基本資料 registration info
------------------------------------*/

.registration-info {}

.registration-info section {
    border-top: 1px solid #CDB387;
}

.registration-info {}


/* 個別欄位 */

.designation {}


/* 指定 人員 */

.assignment {}


/* 系統 指派 */

.info-form li {
    box-sizing: border-box;
}

.info-form .form-group {
    margin-bottom: 0;
}

.info-form .name {
    padding-right: 0.5em;
}

.info-form .travelers {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.info-form .phone {
    padding-right: 0.5em;
}

.info-form .mobile {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.info-form .email {
    padding-left: 0.5em;
}

.info-form .area {
    padding-right: 0.5em;
}

.info-form .address {
    padding-left: 0.5em;
}

.info-form .notes {}

.info-form .other {}

.info-form .subject {
    padding-right: 0.5em;
}

.info-form .phone input[type="tel"] {
    max-width: 170px;
}

.info-form .notes input[type="checkbox"] {
    display: none;
}

.info-form .msgfrom input[type="checkbox"] {
    display: none;
}

.info-form .notes .col label {
    padding: 0.5em 0.5em;
    margin: 0 0.25em 0.25em;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    min-width: 5em;
}

.info-form .notes .col label:before {
    font-family: FontAwesome;
    content: '\f1db';
}

.info-form .notes .col label {
    text-align: left;
}

.info-form .notes input[type="checkbox"]:checked+label {
    border: 1px solid #CDB387;
    background-color: #CDB387;
    color: #FFF;
}

.info-form .notes input[type="checkbox"]:checked+label:after {
    background: #666;
    color: #fff;
}

.info-form .notes input[type="checkbox"]:checked+label input[type="text"] {
    color: #fff;
}

.info-form .notes .col label .bgcolor {
    background: #666;
    color: #fff;
}

.info-form .notes input[type="checkbox"]:checked+label:before {
    font-family: FontAwesome;
    content: '\f058';
    color: #FFF;
}

.info-form .notes {
    background: none;
    box-shadow: none;
    border: solid 1px transparent;
}

.info-form .other .col {
    width: 100%;
}

.info-form .other textarea {
    width: 100%;
}

.info-form .msgfrom .col label {
    padding: 0.5em 0.5em;
    margin: 0 8px 8px 0;
    border: 1px solid #CDB387;
    float: left;
    height: 22px;
    border-radius: 6px;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
    background: #f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=0);
}

.info-form .msgfrom .col label:before {
    font-family: FontAwesome;
    content: '\f1db';
}

.info-form .msgfrom .col label {
    text-align: left;
}

.info-form .msgfrom input[type="checkbox"]:checked+label {
    border: 1px solid #CDB387;
    background: #CDB387;
    color: #FFF;
}

.info-form .msgfrom input[type="checkbox"]:checked+label:after {
    background: #666;
    color: #fff;
}

.info-form .msgfrom input[type="checkbox"]:checked+label input[type="text"] {
    color: #fff;
}

.info-form .msgfrom .col label .bgcolor {
    background: #666;
    color: #fff;
}

.info-form .msgfrom input[type="checkbox"]:checked+label:before {
    font-family: FontAwesome;
    content: '\f058';
    color: #FFF;
}

.info-form .msgfrom {
    background: none;
    box-shadow: none;
    border: solid 1px transparent;
    margin: 0;
    padding: 0;
}

.info-form .msgfrom label {
    padding: 0;
    margin: 0;
}

.maB10 {
    margin-bottom: 10px;
}

.info-form .msgfrom .col label:nth-of-type(1) {
    width: 185px;
}

.info-form .msgfrom .col label:nth-of-type(2) {
    width: 270px;
}

.info-form .msgfrom .col label:nth-of-type(3) {
    width: 163px;
    margin-right: 0;
}

.info-form .msgfrom .col label:nth-of-type(4) {
    width: 185px;
}

.info-form .msgfrom .col label:nth-of-type(5) {
    width: 270px;
}

.info-form .msgfrom .col label:nth-of-type(6) {
    width: 163px;
    margin-right: 0;
}


/*  確認連絡資訊 confirm info
------------------------------------*/

.confirm-info {}

.confirm-info section {
    border-top: 1px solid #CDB387;
}

.info-check .form-group {
    border: none;
    background: #f5f5f5;
    box-shadow: none;
    border-radius: 6px;
    padding: 0.75em 0.25em;
}

.info-check .other .col {
    font-size: 0.975em;
    padding: 0.25em;
}

.info-check .col>p {
    font-size: 1em;
    line-height: 1.25em;
    color: #000;
}


/*  完成報名 complete registration
------------------------------------*/

.complete-registration {}

.complete-registration section {
    border-top: 1px solid #CDB387;
    text-align: center;
}


/*  聯絡專員介紹行程 contact staff
------------------------------------*/

.contact-staff {}

.contact-form .form-group.name {
    display: block;
}


/*  欄位警示  */

.warning .form-group {
    border: solid 1px #F00;
}

.warning label {
    color: #FF0004;
}

.warning input,
.warning select {
    outline: none;
    border-bottom: 1px solid #CCC;
}

.warning p {
    font-size: 0.8125em;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #FF5558;
}

.warning .form-group.verificationcode img {
    vertical-align: middle;
    margin-left: 0.5em;
}

.warning span {
    font-size: 1em;
    color: #FF5558;
}


/*clearfix 
------------------------------------*/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-block;
}


/* start commented backslash hack \*/

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

.clear {
    clear: both;
}


/* close commented backslash hack */

.edm-Style p {
    line-height: 100%;
}


/*=====>> page top css <<=====*/

#scroll-top {}

.scroll-top {
    position: fixed;
    bottom: 100px;
    right: 10px;
    z-index: 10;
    display: none;
    z-index: 999;
    background-color: #fff;
    border-radius: 5px;
    height: 40px;
    width: 40px;
}

.scroll-top.ind {
    height: 40px;
}

.scroll-top a {
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}


.scroll-top a:nth-of-type(1) {
    width: 40px;
    height: 40px;
    display: block;
    background: url(../images/top.svg) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    border-bottom: 1px solid rgba(156, 140, 119, .5);
}

/* .scroll-top a:nth-of-type(2),.scroll-top.ind a:nth-of-type(1) {
    width: 40px;
    height: 40px;
    display: block;
    background: url(../images/top.svg) no-repeat center center;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    border-bottom: none;
} */

.scroll-top a:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}



/*-----------------------------------
player 晴天玩家

  包括以下單元
  1. 晴天活動列表 even-list
  2. 晴天活動內頁 even-detail 
  3. 作家列表 writer-list
  4. 講座列表 lecture-list
  5. 講座列表 lecture-detail
------------------------------------*/

.player-head {
    background: url(../images/player/player-headbg.jpg) repeat-x left top;
}

.player-Header {
    background-image: url(../images/player/player-headbg.jpg);
    background-repeat: repeat-x;
    padding: 0;
    position: relative;
    height: 80px;
    /* border:1px solid #900; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.player-Header:after {
    /* content: '';
    display: block;
    overflow: hidden;
    clear: both; */
}

.player-logo {
    font-size: 0;
    background: url(../images/player/player-logo.png) no-repeat top center;
    background-size: 100% auto;
    margin-left: 2.5rem;
    width: 15%;
    max-width: 190px;
    height: 50px;
    position: relative;
    top:13.5px
}

.player-logo a {
    width: 190px;
    height: 50px;
    padding-top: 45px;
    display: block;
    box-sizing: border-box;
}

.player-Nav {
    /* text-align: center; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 58%;
    align-items: center;
    justify-content: center;
    /* border:1px solid #099; */
    margin: 0 2.5%;
    max-width: 900px;
    
}

.player-Nav>li {
   
    /* width: 100px; */
    text-align: center;
    font-size: 14px;
    height: 80px;
    line-height: 80px;
    flex:1;
}

.player-Nav>li a {
    color: #352D20;
    display: inline-block;
    /* width: 100px; */
    height: 80px;
    line-height: 80px;
   
    
}

.player-Nav>li a:hover {
    background-image: url(../images/player/player-menuon.png);
    background-size: cover;
    display: inline-block;
    width: 100%;
}

.player-Nav>li.current {
    background-image: url(../images/player/player-menuon.png);
    background-size: cover;
}

.player-Nav>li.bluebg {
    /* background-color:#001e52 ; */
    background: url(../images/pbluebg2.png);
    background-size: cover;


}

.player-Nav>li.bluebg a {
    color: #fff;
}

.player-Nav>li.bluebg a:hover {
    color: #352D20;


}
@media (min-width: 1440px){
    .player-Nav>li{
        font-size:1.125rem;
    }
    .player-Nav>li a{}
}





.player-topNav {
    width: 28%;
    max-width: 360px;
    position: relative;
    /* top: 0;
    right: 0; */
    height: 80px;
    background-image: url('../images/player/player-menuon.png');
    background-repeat: repeat-x;
    /* border:1px solid #909; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    z-index: 999;

}

.player-topNav>li {
    padding: 0;
    margin: 0;
    position: relative;
    max-width: 60px;
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    height: 80px;
    flex:1;
}

.player-topNav>li:before {
    position: absolute;
    border-right: 1px solid rgba(255, 255, 255, .5);
    right: 0;
    top: 0;
    content: '';
    display: inline-block;
    height: 100%;
    width: 1px;
}

.player-topNav>li> a {
    display: inline-block;
    /* text-indent: 9999em; */
    width: 100%;
    height: 80px;
    display: block;
    cursor: pointer;
}

.player-topNav>li:hover {
    opacity: 0.9;
}

.player-topNav>li:nth-child(1) {
    background-image: url(../images/player/p-home.svg);
}

.player-topNav>li:nth-child(2) {
    background-image: url(../images/player/i-line-b.svg);
}

.player-topNav>li:nth-child(3) {

    background-image: url(../images/player/p-fb.svg);
}

.player-topNav>li:nth-child(4) {
    background-image: url(../images/player/i-ig-b.svg);
}

.player-topNav>li:nth-child(5) {
    background-image: url(../images/player/p-mv.svg);
}

.player-topNav>li:nth-child(6) {
    background-image: url(../images/player/i-podcast-b.svg);
}

.player-content {
    background: url(../images/player/player-contentbg.jpg) repeat left top;
    overflow: hidden;
    padding-bottom: 80px;

}
.player-line .player-line-all {
    display: none;
    padding:10px;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    background: #fff;
}
.player-line.is-active .player-line-all{ display: flex;}
.player-line-all{
    position: absolute;
    width: 100px;
    left:50%;
    transform: translateX(-50%);
}
.player-line-all a{
    font-size:15px;
    text-align: center;
    padding: 5px;
}
.player-line-all.open{
    display: block;
}
.player-line-all.close{
    display: none;
    
}

.player-content2 {
    background: url(../images/player/player-contentbg.jpg) repeat left top;
    overflow: hidden;
    padding-bottom: 3%;
    min-height: 720px;

}

.pc-subnavi {
    text-align: center;
    margin: 30px auto 10px auto;
}

.pc-subnavi li {
    display: inline-block;
    margin: 0;
    font-size: 16px;
}

.pc-subnavi li a {
    padding: 10px 15px;
    display: inline-block;
    color: #3A3224;
}

.pc-subnavi li a:hover {
    background: url(../images/tours-subonbg.png) no-repeat left top;
    padding: 10px 15px;
    display: inline-block;
    color: #fff;
}

.pc-subnavi li.current a {
    background: url(../images/tours-subonbg.png) no-repeat left top;
    display: inline-block;
    color: #fff;
}

.pc-subnavi2 {
    text-align: center;
    margin: 30px auto 10px auto;
}

.pc-subnavi2 li {
    display: inline-block;
    margin: 0;
    font-size: 16px;
}

.pc-subnavi2 li a {
    padding: 10px 15px;
    display: inline-block;
    color: #3A3224;
}

.pc-subnavi2 li a:hover {
    background: url(../images/tours-subonbg.png) no-repeat left top;
    padding: 10px 15px;
    display: inline-block;
    color: #fff;
}

.pc-subnavi2 li.current a {
    background: url(../images/tours-subonbg.png) no-repeat left top;
    display: inline-block;
    color: #fff;
}

/*HEAD*/


/*.pc-each{ width:98%;padding:0 1%; box-sizing:content-box;}
.pc-each li{ width:22.5%; padding:1%; box-sizing:content-box; float:left; list-style:none;}
.pc-each .pc-eachpic{ margin-bottom:20px;}
.pc-each .pc-eachpic img{ display:block; width:100%; height:auto;}
.pc-each .pc-eachtitle{ font-size:22px;margin-bottom:10px; line-height:140%;}



.pc-each .pc-eachtitle .sicon { display:inline-block; left:0; bottom:0;background:#765E3F url(../images/btn-bg5.png) no-repeat top left; color:#fff; display:inline-block; padding:0 0.5em; min-width:55px; text-align:center; font-size:16px;word-break:break-all;border-radius: 1.5em; margin-right:10px;}

.pc-each .pc-eachdes{ font-size:15px; line-height:160%;}*/


/*HEAD*/

.lecture-each {
    width: 100%;
    padding: 0;
    box-sizing: content-box;
    margin: 0 auto;
    border-top: 1px solid #E8E8E8;
}

.lecture-each li {
    width: 48%;
    box-sizing: content-box;
    float: left;
    margin: 2em 2% 0 0;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 40px;
    list-style: none;
}

.lecture-each li:nth-of-type(2n+1) {}

.lecture-each li.full {
    width: 100%;
    margin: 5% 0 0 0;
    border-bottom: none;
    border-top: 1px solid #E8E8E8;
    padding: 40px 0 0 0;
}

.lecture-each li.full .pc-backicon {
    display: inline-block
}

.lecture-each li.full .pc-iconposition {
    right: 0;
    top: 20px;
    position: absolute;
    z-index: 9
}

.lecture-each li.full .pc-sign {
    display: inline-block
}

@media screen and (min-width: 680px) {
    .lecture-each .num {
        line-height: 60px;
        font-size: 3em;
        font-family: 'Droid Serif', serif;
        font-weight: 400;
        font-style: italic;
        color: #000;
        margin-right: 10px;
    }

    .lecture-each .year {
        font-size: 0.7125em;
        position: absolute;
        left: 195px;
        top: 10px;
        font-family: 'Droid Serif', serif;
        font-weight: 400;
        color: #333;
    }

    .lecture-each .year-c {
        display: none;
    }

    .lecture-each .month {
        font-size: 13px;
        width: 60px;
        display: inline-block;
    }

    .lecture-each .month:after {
        content: '';
        width: 1px;
        height: 50px;
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 110px;
        margin-left: -0.35em;
        background-color: #666;
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .lecture-each .date {
        font-size: 13px;
    }
}

.lecture-each .loc {
    background: #998063;
    display: inline-block;
    padding: 5px 20px;
    font-size: 15px;
    color: #fff;
    line-height: 110%;
    border-radius: 20px;
    margin-right: 10px;
}

.lecture-each .time {
    color: #998063;
    font-style: italic;
}

.lecture-each p {
    position: relative;
}

.lecture-each .span {
    display: inline-block;
    height: 50px;
    vertical-align: top;
}

.lecture-each .le-eachtitle {
    font-size: 22px;
    margin: 20px 0 10px 0;
    line-height: 140%;
    color: #000;
}

.lecture-each .le-eachdes {
    font-size: 15px;
    line-height: 160%;
    display: none;
}

.lecture-each .edit {
    font-size: 0.875em;
    line-height: 2em;
    margin-bottom: 1em;
}

.lecture-tourwrap {
    max-width: 900px;
    width: 100%;
    margin: 3em auto;
    border-top: 1px solid #ccc;
    padding-top: 2em
}

.lecture-tourwrap .related-itinerary {
    background: none;
}

.lecture-tourwrap .related-itinerary h3 {
    margin-bottom: 1em;
}

.player-footer {
    background-image: url(../images/player/player-footbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 80px;
    line-height: 80px;
    padding: 0 2%;
}

.player-footer ul {
    width: 50%;
    float: left;
    text-align: center;
}

.player-footer li {
    display: inline-block;
    padding: 0 20px;
}

.player-footer li a {
    color: #524535;
}

.player-footer .pf-copyright {
    color: #524535;
    text-align: left;
    /* width: 25%; */
    float: left;
    font-size: 13px;
}

.player-footer .pf-copyright2 {
    display: none;
}

.player-footer .pf-webdesign {
    text-align: right;
    width: 25%;
    float: right;
    font-size: 13px;
}

.pc-content {
    background: url(../images/player/player-contentbg.jpg) repeat left top;
    overflow: hidden;
}

.pc-outerwrap {
    width: 100%;
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.pc-wrap {
    background-color: #f5f5f5;
    position: relative;
    min-height: 400px;
    margin: 0 auto 0 auto;
    padding: 50px 70px;
    box-sizing: border-box;
    width: 1280px;
    overflow: hidden;
}

.pc-wrap:before {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 9;
    border-bottom: 1px solid #e5e5e5;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c1a068+5,c1a068+13,5a4025+32,c1a068+36,c1a068+53,5a4025+74,c1a068+77,c1a068+78,5a4025+100 */
    background: #c1a068;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c1a068 5%, #c1a068 13%, #5a4025 32%, #c1a068 36%, #c1a068 53%, #5a4025 74%, #c1a068 77%, #c1a068 78%, #5a4025 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c1a068', endColorstr='#5a4025', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.pc-wrap:after {}

.pc-wrap h2 {
    width: 80%;
    float: left;
}

.pc-wrap h2 .sicon {
    display: inline-block;
    background: #cccccc;
    color: #fff;
    padding: 0 1em;
    text-align: center;
    font-size: 16px;
    word-break: break-all;
    border-radius: 1.5em;
    margin-right: 10px;
    line-height: 2.5em
}

.pc-wrap h2 .sicon:hover {
    opacity: 0.9;
}

.pc-backicon {
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 5px 20px 10px 40px;
    z-index: 9;
    color: #fff;
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
    position: relative;
    /* float: right; */
}

.pc-backicon a {
    color: #fff;
}

.pc-backicon:hover {
    background: #bbb;
}

.pc-backicon:before {
    content: '';
    background: url(../images/icon-arrow-left.png) no-repeat left top;
    height: 16px;
    width: 7px;
    position: absolute;
    left: 25px;
    top: 8px;
    display: inline-block;
}

.pc-sign {
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 5px 20px 10px 20px;
    z-index: 9;
    color: #fff;
    background-image: url(../images/tours-subonbg.png);
    background-size: 100% 100%;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
}

.pc-iconposition .pc-sign {
    /* float: right; */
}

.pc-sign a {
    color: #fff;
}

.pc-sign:hover {
    /* background: #bbb; */
}

.pc-signG {
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 5px 20px;
    z-index: 9;
    color: #fff;
    background: #bbb;
    position: relative;
    top: 8px;
}

.icon-wait {
    background-color: #5c2320;
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 5px 20px 10px 20px;
    z-index: 9;
    color: #fff;
    border-radius: 5px;
    display: inline-block;

}

a.icon-wait:hover {
    color: #ffffff;
    opacity: 1;
}

/* .icon-wait:hover{ 
    color:#ffffff;
    cursor: pointer;
    background-color: #bbb;
} */
.icon-enroll {
    background-color: #001e52;
    margin: 0 0 10px 10px;
    border-radius: 5px;
    padding: 5px 20px 10px 20px;
    z-index: 9;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
}

a.icon-enroll:hover {
    color: #ffffff;
    opacity: 1;
}

.titlebtmline {
    border-bottom: 1px solid #e8e8e8;
    /* overflow: hidden; */
    padding-bottom: 10px;
    margin-bottom: 20px;
}


/*.titlebtmline h2:after{content:''; background:url(../images/player/even-detail-right.png) no-repeat left top; width:120px; height:120px; display:inline-block; right:1px; top:1px; position: absolute; z-index:0;}*/


/*.titlebtmline h2:before{content:''; background:url(../images/player/even-detail-left.png) no-repeat left top; width:120px; height:120px; display:inline-block; left:1px; top:1px; position: absolute;}*/

.pc-wrap .pc-backicon h2:before {
    content: '';
    display: block;
    clear: both;
    background: url(../images/icon-arrow-left.png) no-repeat left top;
    height: 16px;
    width: 7px;
    position: absolute;
    left: 20px;
    top: 10px;
}

.pc-editwrap {
    overflow: hidden;
    clear: both;
    font-size: 0.875em;
    line-height: 2em;
}

.pc-editwrap .pic {
    width: 100%;
    line-height: 0;
}

.pc-editwrap p {
    line-height: 160%;
}

.pc-editwrap img {
    display: inline;
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.center {
    text-align: center;
}

.b70 {
    background-color: rgba(0, 0, 0, 0.7)
}

.writer-pagetitle {
    overflow: hidden;
    text-align: center;
    clear: both;
}

.writer-pagetitle h2 {
    width: 100%;
    display: block;
}

.writer-pagetitle h2:after {
    content: '';
    background: url(../images/player/even-detail-right.png) no-repeat left top;
    width: 120px;
    height: 120px;
    display: inline-block;
    right: 1px;
    top: 1px;
    position: absolute;
    z-index: 0;
}

.writer-pagetitle h2:before {
    content: '';
    background: url(../images/player/even-detail-left.png) no-repeat left top;
    width: 120px;
    height: 120px;
    display: inline-block;
    left: 1px;
    top: 1px;
    position: absolute;
}

.player-content .lecture-each .edit {}

.player-content .lecture-each .edit img {
    width: 100%;
    height: auto;
}

.player-content .lecture-each .pic {
    width: 100%;
}

.player-content .lecture-each .pic img {
    display: block;
    width: 100%;
    height: auto;
}

.player-newswrap {
    max-width: 900px;
    padding: 0 1%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px auto 0 auto;
    width: 100%;
}

.player-newswrap img {
    max-width: 900px;
    height: auto;
    display: block;
    width: 100%;
}



.player-newswrap li {
    display: flex;
    border-bottom: 1px solid #E1DAD2;
    padding: 1.5em 0;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.player-newswrap span.date {
    width: 30%;
    max-width: 130px;
    color: #000;
    font-size: 1.125rem;
    font-family: 'Droid Serif', serif;

    text-align: center;

}

.player-newswrap li.titlebg {
    width: 100%;
    border-bottom: 1px dotted #E1DAD2;
    padding: 1em 0;
    box-sizing: border-box;
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
}

.player-newswrap li.titlebg span.date {
    font-size: 0.9375em;
    font-family: 'Noto Sans TC', sans-serif;
    color: #333;
}

.player-newswrap span.des {
    font-size: 1.25em;
    color: #333;
    /*  width: 55%; */
    /*  max-width: 650px; */

}

.player-newswrap span.sort {
    width: 15%;
    max-width: 43px;
    margin-right: 7px;
}


.player-newswrap span.sort .sort-box {
    border: 1px solid #977E60;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 13px;
    box-sizing: border-box;
    display: inline-block;
    line-height: 120%;
    margin-bottom: 5px;
}

.player-newswrap span.sort .sort-box2 {
    border: 1px solid transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 13px;
    box-sizing: border-box;
    display: inline-block;
    line-height: 120%;
    background-color: #977E60;
    color: #fff;
    margin-bottom: 5px;
}



.player-newswrap li.titlebg span.sort {
    font-size: 0.9375em;
    font-family: 'Noto Sans TC', sans-serif;
    color: #333;
    padding-right: 20px;
    text-align: center;
}

/* 
.player-newswrap .des a {
    width: 70%;
    display: inline-block;
    color: #333;
    font-weight: normal;
} */

.player-newswrap .des:hover {
    color: #998063;
}

.player-newswrap li.titlebg span.des {
    font-size: 0.9375em;
}

.player-newswrap li.titlebg span.des:hover {
    color: #333
}

.pn-pagestyle {
    text-align: center;
    margin: 30px 0;
    display: block;
    position: relative;
}

.pn-pagestyle ul {}

.pn-pagestyle li {
    list-style: none;
    display: inline-block;
    font-size: 12px;
}

.pn-pagestyle li a {
    color: #333;
    padding: 5px 7px
}

.pn-pagestyle li a:hover {
    color: #fff;
    text-decoration: none;
    background: #998063;
    border-radius: 10px;
    padding: 5px 7px
}

.pn-pagestyle li.onpage a {
    color: #fff;
    text-decoration: none;
    background: #998063;
    border-radius: 10px;
    padding: 5px 7px
}

.pn-newdetail {}

.pn-titlewrap {
    border-bottom: 1px solid #E1DAD2;
    margin: 50px auto 15px auto;
    padding-bottom: 15px
}

.pn-titlewrap .date {
    width: 12%;
    display: inline-block;
    vertical-align: top;
    padding-top: 5px
}

.pn-titlewrap .name {
    width: 67%;
    display: inline-block;
    font-size: 22px;
    color: #333;
    line-height: 140%;
    padding-right: 3%;
    text-align: left;
}

.pn-titlewrap .back {
    width: 15%;
    display: inline-block;
    font-size: 15px;
    color: #333;
    text-align: center;
    vertical-align: top;
}

.pn-titlewrap .back .pc-backicon {
    position: relative;
    left: 0;
    top: 0;
    font-size: 17px;
}

.pn-titlewrap .back a:hover {
    color: #fff;
}


/*.pn-titlewrap .pc-backicon:before{top:15px;}*/

.contact-wrap {
    clear: both;
    width: 100%;
    max-width: 690px;
    margin: 0 auto;
    overflow: hidden;
}

.cw-des {
    max-width: 670px;
    text-align: center;
    margin: 20px auto;
}

.cw-navi {}

.cw-navi {
    clear: left;
    margin: 2em 0;
    font-size: 0.9em;
}

.cw-navi ul.tabs {
    width: 100%;
    margin-bottom: 1em;
    max-width: 690px;
    box-sizing: border-box;
    display: inline-block
}

.cw-navi ul.tabs:after {
    content: '';
    width: 98%;
    height: 5px;
    display: block;
    background-color: #CCC;
    box-shadow: 0 1px 8px #999;
    z-index: -1;
    top: 45px;
    left: 1%;
    position: relative;
}

.cw-navi ul.tabs li {
    width: 25%;
    text-align: center;
    position: relative;
    display: inline-block;
    line-height: 3.5em;
    float: left;
}

.cw-navi ul.tabs li.active {
    background: url(../images/btn-bg4.png) no-repeat left top;
    color: #fff;
}

.cw-navi ul.tabs .active a {
    color: #fff;
}

.cw-navi ul.tabs li+li:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 50%;
    background-color: #CCC;
    border-left: 1px solid #FFF;
    position: absolute;
    left: 0;
    top: 25%;
}

.cw-navi ul.tabs li.active:before,
.cw-navi ul.tabs li.active+li:before {
    display: none;
}

.cw-navi .tab_container {}

.cw-navi .tab_container .tab_content {
    padding: 0;
}

.contact-wrap .info-form .col1 {
    width: 50%;
}

.contact-wrap .info-form .email {
    padding: 0;
    width: 100%;
}

.contact-wrap .info-form .passcode {
    padding: 0;
    width: 100%;
}

.contact-wrap .info-form .phone {
    padding-right: 0;
}

.contact-wrap .btn-panel {
    padding: 0;
}

.contact-wrap .passcode .col {
    max-width: 250px;
}

.contact-wrap .subject2 .col {
    width: 100%;
}

.info-form ul.person4 {
    display: block;
    float: left;
    width: 100%;
}

.info-form ul.person4 .form-group {}

.info-form ul.person4 li:lst-child {
    padding-right: 0;
}

.contact-wrap .info-form .col4 {
    width: 25%;
    display: inline-block;
    float: left;
}

.pc-signwrap {
    max-width: 900px;
    margin: 80px auto 0px auto;
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
    border-top: 1px solid #E1DAD2;
    border-bottom: 1px solid #E1DAD2;
    padding: 40px 105px 40px 105px;
    box-sizing: border-box;
    width: 100%;
}

.pc-signwrap .infowrap {}

.pc-signwrap .infowrap ul {
    margin-bottom: 1em;
}

.pc-signwrap .infowrap ul:after {
    content: '';
    display: inline-block;
    width: 100%;
    background-color: #CCC;
    border-top: 1px solid #D6CCC0;
    border-bottom: 1px solid #fff;
    position: relative;
    left: 0;
    top: -10px;
}

.pc-signwrap .infowrap li {
    margin: 1.5em 0;
}

.pc-signwrap .infowrap p {
    display: inline-block;
}

.pc-signwrap .infowrap .sort {
    width: 15%;
    vertical-align: top;
}

.pc-signwrap .infowrap .name {
    font-size: 1.375em;
    width: 85%;
    line-height: 120%;
}

.pc-signwrap .infowrap .capable {
    font-size: 1.375em;
    width: 85%;
    line-height: 120%;
}

.pc-signwrap .infowrap .date {
    width: 85%;
}

.pc-signwrap .infowrap .no {
    font-size: 1.875em;
    font-family: 'Droid Serif', serif
}

.pc-signwrap .infowrap .week {
    font-size: 1.125em;
    width: 85%;
}

.pc-signwrap .infowrap .time {
    font-size: 1.375em;
    width: 85%;
}

.pc-signwrap .infowrap .time .icon-enroll {
    font-size: 1rem;
}

.pc-signwrap .infowrap .time .icon-wait {
    font-size: 1rem;
}

.pc-signwrap .infowrap .location {
    font-size: 1em;
    width: 85%;
}

.pc-signwrap .infowrap .place {
    font-size: 1.375em;
}

.newlecturewrap {
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

#switchbox {
    margin: 0;
    padding: 0;
    overflow: inherit;
    position: relative;
    top: -25px;
    overflow: hidden;
}

#switchbox ul {
    list-style: none;
}

#switchbox .buttons {
    width: 30%;
    display: inline-block;
    left: 70%;
    bottom: 10px;
    position: relative;
    text-align: right;
    z-index: 99
}

#switchbox .buttons p {
    display: inline-block;
    cursor: pointer;
}

#switchbox .buttons p+p:before {
    content: '';
    display: inline-block;
    border-right: 1px solid #ccc;
    border-left: 1px solid #fff;
    position: relative;
    left: -42px;
    top: 10px;
    height: 25px;
}

#switchbox .buttons .switch-list {
    background: url(../images/player/lecture-list.png) no-repeat right 5px;
    width: 50px;
    height: 40px;
    border: none;
    margin-right: 1%;
    outline: none;
}

#switchbox .buttons .switch-list-on {
    background: url(../images/player/lecture-list-on.png) no-repeat right 5px;
    width: 50px;
    height: 40px;
    border: none;
    margin-right: 1%;
    outline: none;
}

#switchbox .buttons .switch-grid {
    background: url(../images/player/lecture-grid.png) no-repeat right 5px;
    width: 50px;
    height: 40px;
    border: none;
    margin-right: 1%;
    outline: none;
}

#switchbox .buttons .switch-grid-on {
    background: url(../images/player/lecture-grid-on.png) no-repeat right 5px;
    width: 50px;
    height: 40px;
    border: none;
    margin-right: 1%;
    outline: none;
}

#switchbox .switch-sort {
    color: #666;
    font-size: 15px;
    width: 80px;
    height: 40px;
    vertical-align: top;
    position: relative;
    top: 10px
}

#switchbox .sortwrap {
    margin-bottom: 1em;
    display: none;
    border-top: 1px solid #E1DAD2;
    border-bottom: 1px solid #E1DAD2;
    padding: 1em 0;
    display: block;
}

#switchbox .sortwrap dl {
    overflow: hidden;
}

#switchbox .sortwrap dd {
    float: left;
    margin-bottom: 0.5em;
    font-size: 0.875em;
    box-sizing: border-box;
}

#switchbox .sortwrap dd a {
    color: #333;
    padding: 0.2em 0.5em;
    display: inline-block;
    border-radius: 0.5em;
}

#switchbox .sortwrap dd a:hover {
    background: #B7A58E;
    color: #fff;
}

#switchbox .sortwrap dd:focus {
    background: #B7A58E;
    color: #fff;
}

#switchbox .sortwrap dd input[type="checkbox"] {
    display: none;
}

#switchbox .sortwrap dd label {
    padding: 0.5em 0.5em;
    margin: 0 0.25em 0.25em;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    min-width: 5em;
}

#switchbox .sortwrap dd label:before {
    font-family: FontAwesome;
    content: '\f1db';
}

#switchbox .sortwrap dd label {}

#switchbox .sortwrap dd input[type="checkbox"]:checked+label {
    border: 1px solid #CDB387;
    background-color: #CDB387;
    color: #FFF;
}

#switchbox .sortwrap dd input[type="checkbox"]:checked+label:after {
    background: #666;
    color: #fff;
}

#switchbox .sortwrap dd input[type="checkbox"]:checked+label input[type="text"] {
    color: #fff;
}

#switchbox .sortwrap dd .bgcolor {
    background: #666;
    color: #fff;
}

#switchbox .sortwrap dd input[type="checkbox"]:checked+label:before {
    font-family: FontAwesome;
    content: '\f058';
    color: #FFF;
}

#switchbox .sortwrap dd {
    background: none;
    box-shadow: none;
    border: solid 1px transparent;
}

#switchbox .switch-list li {
    width: 100%;
    border-bottom: 1px solid #E1DAD2;
    padding: 1.5em 0;
    box-sizing: border-box;
}

#switchbox .switch-list .pic {
    display: none;
}

#switchbox .switch-list .first {
    width: 17%;
    vertical-align: top;
}

#switchbox .switch-list .first .date {
    font-size: 1.125em;
    font-family: 'Droid Serif', serif;
    color: #000;
}

#switchbox .switch-list .first .week {
    font-size: 1em;
}

#switchbox .switch-list .first .sign {
    display: none;
}

.newlecturewrap .pc-subnavi {
    text-align: left;
    margin: 40px auto 0 auto;
    position: relative;
    z-index: 9;
}

#switchbox .switch-list p {
    display: inline-block;
}

#switchbox .switch-list span {
    display: inline-block;
}

#switchbox .switch-list .second {
    font-size: 1.25em;
    width: 40%;
}

#switchbox .switch-list .second2 {
    font-size: 1.25em;
    width: 40%;
}

#switchbox .switch-list .second a,
#switchbox .switch-list .second2 a {
    color: #333
}

#switchbox .switch-list .second a:hover,
#switchbox .switch-list .second2 a:hover {
    color: #A0876B;
}

#switchbox .switch-list .third {
    width: 40%;
    vertical-align: top;
}

#switchbox .switch-list .third .location {
    font-size: 1em;
    width: 35%;
}

#switchbox .switch-list .third .time {
    font-size: 1em;
    width: 35%;
}
#switchbox .switch-list .third .length {
    font-size: 1em;
    width: 30%;
}
#switchbox .switch-list .forth {
    font-size: 0.875em;
    vertical-align: top;
}

#switchbox .switch-list .forth .sign a {
    background: #765E3F url(../images/btn-bg5.png) no-repeat top left;
    color: #fff;
    display: inline-block;
    padding: 0.2em 0.5em;
    min-width: 50px;
    text-align: center;
    word-break: break-all;
    border-radius: 1.5em;
}

#switchbox .switch-list .forth .sign a:hover {
    opacity: 0.9;
}

#switchbox .switch-list .switch-title {
    width: 63%;
}

#switchbox .switch-list .switch-title2 {
    width: 18%;
}

#switchbox .switch-list .switch-title2 span.time {
    width: 100%;
}

#switchbox .switch-head {
    width: 100%;
    border-bottom: 1px dotted #E1DAD2;
    padding: 1em 0;
    box-sizing: border-box;
    font-size: 0.9375em;
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left
}

#switchbox .switch-head .first {
    width: 17%;
}

#switchbox .switch-head .first .date {
    font-size: 0.9375em;
    font-family: inherit;
    padding-left: 10px;
}

#switchbox .switch-head .first .week {
    font-size: 0.9375em;
}

#switchbox .switch-head p {
    display: inline-block;
}

#switchbox .switch-head span {
    display: inline-block;
}

#switchbox .switch-head .second {
    width: 40%;
    font-family: inherit;
    font-size: 0.9375em;
    padding: 0;
}

#switchbox .switch-head .third {
    width: 40%;
}

#switchbox .switch-head .third .location {
    width: 35%;
}

#switchbox .switch-head .third .time {
    width: 32%;
}

#switchbox .switch-head .third .length {
    width: 30%;
}

#switchbox .switch-head .forth {}

#switchbox .switch-head .switch-title {
    width: 63%;
}

#switchbox .switch-head .switch-title2 {
    width: 17%;
}

#switchbox .switch-grid li {
    float: left;
    width: 30%;
    margin: 0 0 5% 5%;
}


/*#switchbox .switch-grid li:nth-of-type(3n+1){ clear:both;margin-left:0;}*/

#switchbox .switch-grid li:nth-of-type(1) {
    margin-left: 0;
}

#switchbox .switch-grid li img {
    width: 100%;
    height: auto
}

#switchbox .switch-grid .switch-head {
    display: none;
}

#switchbox .switch-grid .pic {
    display: block;
    margin-bottom: 1em;
}

#switchbox .switch-grid .first {
    width: 100%;
}

#switchbox .switch-grid .first .date {
    font-size: 1.875em;
    font-family: 'Droid Serif', serif
}

#switchbox .switch-grid .first .week {
    font-size: 1em;
}

#switchbox .switch-grid .first .sign {
    position: relative;
    right: 0;
    top: 0;
    display: inline-block;
}

#switchbox .switch-grid .first .sign a {
    position: absolute;
    left: 20px;
    bottom: 0;
    background: #765E3F url(../images/btn-bg5.png) no-repeat top left;
    color: #fff;
    display: inline-block;
    padding: 0.2em 0.5em;
    min-width: 55px;
    text-align: center;
    font-size: 0.8125em;
    word-break: break-all;
    border-radius: 1.5em;
}

#switchbox .switch-grid .first .sign a:hover {
    opacity: 0.9;
}

#switchbox .switch-grid .first .full {
    position: relative;
    right: 0px;
    top: 0;
    background: #765E3F url(../images/btn-bg5.png) no-repeat top left;
    color: #fff;
    display: inline-block;
    padding: 0.2em 0.5em;
    min-width: 55px;
    text-align: center;
    font-size: 0.8125em;
    word-break: break-all;
    border-radius: 1.5em;
}

#switchbox .switch-grid .first .cancel {
    position: relative;
    right: 0;
    top: 0;
    display: inline-block;
    background: #ccc;
    color: #fff;
    padding: 0.2em 0.5em;
    min-width: 55px;
    text-align: center;
    font-size: 0.8125em;
    word-break: break-all;
    border-radius: 1.5em;
}

#switchbox img:hover {
    opacity: 0.9;
}

#switchbox .switch-grid p {
    display: inline-block;
    margin: 0.4em 0
}

#switchbox .switch-grid span {
    display: inline-block;
}

#switchbox .switch-grid .second {
    font-size: 1.25em;
    width: 100%;
}

#switchbox .switch-grid .second a {
    color: #333
}

#switchbox .switch-grid .second a:hover {
    color: #A0876B;
}

#switchbox .switch-grid .third {
    width: 100%;
}

#switchbox .switch-grid .third .location {
    font-size: 1em;
    width: auto;
    padding-right: 1em;
}

#switchbox .switch-grid .third .location:after {
    content: '';
    display: inline-block;
    border-right: 1px solid #ccc;
    position: relative;
    left: 7px;
    top: 0;
    height: 10px;
}

#switchbox .switch-grid .third .time {
    font-size: 1em;
    width: auto;
    padding-right: 1em;
}
#switchbox .switch-grid .third .time:after{
    content: '';
    display: inline-block;
    border-right: 1px solid #ccc;
    position: relative;
    left: 7px;
    top: 0;
    height: 10px;
}
#switchbox .switch-grid .third .length {
    font-size: 1em;
    width: auto;
}
#switchbox .switch-grid .forth {
    display: none;
}

.privacyedit {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 3em;
    line-height: 1.75em;
    box-sizing: border-box;
    overflow: hidden;
}

.privacyedit ul {}

.privacyedit li {
    list-style: decimal;
    margin-left: 20px
}

.privacyedit .dlpic-wrap {
    float: left;
    width: 52%;
    padding: 10px 5%;
    box-sizing: border-box;
}

.privacyedit .dlpic-wrap .rwdpic img {
    width: 100%;
    height: auto;
}

.privacyedit .dlinfo-wrap {
    width: 48%;
    float: left;
}


/* =============================================
   RWD 調整區域
================================================ */

@media (min-width: 1280px) {
    #nav-toggle {
        display: none;
    }

    .global-bg {
        padding: 50px 0;
        min-height: 100%;

    }

    .global-Header {
        border-radius: 8px 8px 0 0;
    }

    .index-absfoot {
        display: none;
    }

    .global-Header .mbnv-search {
        display: none;
    }

    .attr-article-content .abox {
        padding-right: 20px;
    }
}

@media (max-width: 1279px) {

    .global-Nav,
    .global-topNav {
        display: none;
    }

    .global-Header {
        height: 50px;
    }

    .logo {
        left: 50%;
        top: 5px;
        margin-left: -75px;
    }

    .logo a {
        width: 150px;
        height: 39px;
        display: block;
    }

    .player-Header {
        height: 50px;
    }

    .player-logo {
        left: 50%;
        top: 5px;
        margin-left: -75px;
        height: 39px;
        width: 170px;
    }

    .player-logo a {
        width: 150px;
        height: 39px;
        display: block;
    }

    .player-topNav,
    .player-Nav {
        display: none;
    }

    .pc-wrap {
        max-width: 1180px;
        padding: 3%
    }

    .fixedcc {
        width: 100%;
    }

    .fixedcc2 {
        width: 100%;
        margin: 0;
        max-width: none;
    }

    .privacyedit {
        padding: 0 3em;
        width: auto;
    }
}

@media screen and (max-width: 1440px) {
    .tours-sidewrap {
        top: 0;
        left: 0;
    }

    .tours-sidewrap ul {
        right: 0;
        margin-top: 0;
        /* bottom: 5px; */
    }

}

@media screen and (min-width: 1200px) {

    /* 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。 */
    .flight-list .departure {
        width: 32%;
    }

    .foot-iconposition {
        position: relative;
        left: -10px;
        top: 10px;
    }

    /* index-shortcut2
------------------------------------*/
    .shortcut2-list li {
        width: 23%;
        margin: 1em 1%;
    }

    .shortcut2-list li:nth-of-type(4n+1) {
        margin-left: 0.5%;
        clear: both;
    }

    .shortcut2-list li:nth-of-type(4n) {
        margin-right: 0.5%;
    }

    /* 行程總覽頁 tours-ov
------------------------------------*/
    .tours-ov-list>ul>li {
        width: 100%;
        max-width: 1180px;
    }

    .tours-ov-list .tours-info {
        min-height: 8em;
        overflow: hidden;
    }

    .tours-ov-list .info-block {
        float: right;
        width: 66%;
        max-width: 780px;
    }

    .tours-ov-list .pic-block {
        float: left;
        width: 34%;
        max-width: 400px;
    }

    .tours-ov-list .tours-info {
        padding: 1em 1em 1em 12em;
    }

    .tours-ov-list .tours-price {
        display: inline-block;
        float: right;
    }

    .tours-ov-list .tours-days {
        left: 3em;
    }

    .departure-time ul {
        display: inline-block;
        height: 2.25em;
    }

    /* 詳細行程（地圖展開） itinerary
------------------------------------*/
    .itinerary-hero .hero-content {
        width: 50%;
    }

    .weather-board {
        width: 50%;
    }

    .weather-repeat {
        width: 100%;
    }

    /*-----------------------------------
  attractions 景點
------------------------------------*/
    .attractions {}

    /* 景點導覽列 nav 
------------------------------------*/
}

@media (min-width: 901px) and (max-width: 1200px) {

    /* index-shortcut2
------------------------------------*/
    .shortcut2-list li {
        width: 31.3333%;
        margin: 1em 1%;
    }

    .shortcut2-list li:nth-of-type(3n+1) {
        margin-left: 0.5%;
        clear: both;
    }

    .shortcut2-list li:nth-of-type(3n) {
        margin-right: 0.5%;
    }

    .itinerary-hero {
        padding-left: 34%;
    }

    .hero-flag {
        width: 24%;
        padding: 1em 1em 0;
    }

    .fixedcc {
        width: 100%;
    }

    .fixedcc2 {
        width: 100%;
    }

    .gf-content {
        padding: 1em;
    }

    .gf-link .name {
        width: 280px;
    }

    .gf-link .tel {
        width: 125px;
    }
}

@media screen and (max-width: 1200px) {

    /* 如果使用者之視窗寬度 <= 1200px，將會再載入這裡的 CSS。 */
    .pc-wrap {
        padding: 5%;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    .global-Nav>li:hover>ul a {
        line-height: 3em 0
    }

    .gf-shortcut1 li {
        font-size: 13px;
        box-sizing: border-box;
    }

    /* 行程總覽頁 tours-ov
------------------------------------*/
    .tours-ov-list>ul>li {
        width: 48%;
        float: left;
        margin: 0 1% 2em;
    }

    .tours-ov-list .tours-info {
        min-height: 10em;
        padding: 1em 1em 1em 10em;
    }

    .tours-ov-list .tours-days {
        left: 2.5em;
    }

    .tours-ov-list .tours-price {
        text-align: center;
        margin: 0 0 1em;
    }

    .departure-time {
        text-align: center;
    }

    .departure-time ul {
        display: block;
        text-align: center;
    }

    /* 詳細行程（地圖展開） itinerary
------------------------------------*/
    .itinerary-hero {}

    .hero-flag {
        padding: 1em 2em 0;
    }

    .gold-flag:after {
        bottom: -60px;
    }

    .attractions-flag {
        left: 50%;
        margin-left: -120px;
    }

    .attractions-flag:after {
        bottom: 0;
        height: 0;
    }

    .weather-board {
        /*  display: none; */
    }

    .step-nav li {
        width: 8em;
        height: 8em;
        padding: 1em;
    }

    .step-nav li+li {
        margin-left: 1em;
    }

    .step-nav li:before {
        width: 8em;
        height: 8em;
        margin-left: -4em;
    }

    .step-nav .current:after {
        width: 8.6em;
        height: 8.6em;
        margin-left: -4.3em;
    }

    .step-nav span {
        font-size: 0.8em;
    }

    .step-nav .num {
        font-size: 3em;
    }

    /* 景點地圖
------------------------------------*/
    .attractions-detail section {
        padding: 1em;
        box-sizing: border-box;
    }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .tours-ov-list>ul>li:nth-child(2n+1) {
        clear: both;
    }
}

@media screen and (min-width: 900px) {

    /* 如果使用者之視窗寬度 >= 900px，將會再載入這裡的 CSS。 */
    .pc-outerwrap {
        padding-top: 0
    }

    .pc-wrap {
        max-width: 100%;
        padding: 3%;
    }

    .shortcut2-list {
        /*padding: 2em;*/
    }

	
    .tour-menubox .spfbwrap {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9;
    }

    .tour-menubox .spfbwrap .fbicon {
        position: relative;
        width: 48px;
        height: 48px;
        display: block;
        background: #001e52 url(../images/intro-fb.svg) no-repeat center center;
        margin: 0;
        line-height: 0;
        right: 0;
        top: 0;
        text-indent: -9999em;
    }

    .tour-menubox .spfbwrap .fbicon:hover {
        cursor: pointer;
    }

    /* 行程總覽頁 tours-ov
------------------------------------*/
    .tours-ov-list .pic-block {}

    .itinerary-hero {
        padding-left: 30%;
    }

    .hero-flag {
        width: 20%;
    }

    /* 單一區域出團表 tours-region
------------------------------------*/
    .tours-list p {
        font-size: 0.875rem;
        display: inline-block;
        vertical-align: top;
    }

    .tours-list .tl-itinerary {
        width: 40%;
    }

    .tours-list .tl-flight {
        width: 25%;
    }

    .tours-list .tl-tours {
        width: 35%;
        display: flex;
        flex-wrap: nowrap;
    }

    /* 行程介紹 tour-intro
------------------------------------*/
    .tour-issues .issues {
        color: #FFF;
        float: left;
        width: 50%;
    }

    .tour-issues .issues+.issues:before {
        height: 100px;
        width: 1px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -50px;
    }

    .sunday-players {
        padding: 3em 2em;
    }

    .sunday-players-flag {
        width: 14em;
        height: 7em;
        padding: 2em;
        box-sizing: border-box;
        background-color: #FFF;
        position: absolute;
        left: 3em;
        top: 0;
    }

    .sunday-players h3 {
        font-size: 2.2em;
    }

    .sunday-players .articles-list {
        width: 75%;
        float: right;
    }

    .articles-list li {
        width: 30%;
        margin: 0 1%;
    }

    .articles-list .pic {
        background-color: #EEE;
        width: 100%;
        height: 150px;
        margin-bottom: 1em;
    }

    /*航班地圖資訊*/
    .route-map .col1 {
        width: 70%;
    }

    .route-map .col1 img {}

    .route-map .col2 {
        width: 30%;
    }

    .flight-list p {
        display: inline-block;
        line-height: 1.75em;
    }

    .flight-list .fl-fist {
        width: 35%;
    }

    .flight-list .fl-sec {
        width: 63%;
    }

    .flight-list .day-operation {
        width: 17%;
        float: left;
    }

    .flight-list .from-to {
        width: 48%;
        float: left;
    }

    .flight-list .airport {
        width: 32%;
        text-align: center;
    }

    .flight-list .airline {
        width: 20%;
    }

    .flight-list .departure {
        width: 36%;
    }

    .flight-list .departure .plane {
        width: 40%;
    }

    .flight-list .departure .plane-time {
        width: 60%;
    }

    .flight-list .duration {
        width: 15%;
        margin-right: 3%
    }

    .flight-list .note {
        /*width: 18%;*/
    }

    /* 景點介紹 detail
------------------------------------*/
    .attractions-detail {}

    /* 內容 */
    .attr-article-main {
        width: 70%;
        float: left;
    }

    .attr-article-side {
        width: 30%;
        float: left;
    }

    /*  填寫基本資料 registration info
------------------------------------*/
    .registration-info {}

    .info-form {}

    .info-form label {}

    .info-form .col {
        width: 80%;
        max-width: 160px;
    }

    .info-form .col-rw {
        width: 100%;
    }

    .info-form .co4 {
        width: 60%;
        max-width: 160px;
        display: inline-block;
    }

    .info-form .co4 input {
        width: 100%;
    }

    .info-form .other .col {
        max-width: none;
    }

    .info-form .name {}

    .info-form .travelers .col {
        max-width: 155px;
    }

    .info-form .phone {}

    .info-form .mobile {}

    .info-form .email input {
        width: 90%;
    }

    .info-form .area {}

    .info-form .address {}

    .info-form .notes .col {
        max-width: inherit;
    }

    .info-form .msgfrom .col {
        max-width: inherit;
    }

    .info-form .other {}

    .info-form .name .col {}

    .info-form .travelers .col {}

    .info-form .phone .col {}

    .info-form .email .col {
        max-width: 80%;
    }

    .info-form .mobile .col {}

    .info-form .area .col {}

    .info-form .address .col {}

    .info-form .notes .col {}

    .info-form .other .col {}
}

@media (min-width: 600px) and (max-width: 900px) {

    /* index-shortcut2
------------------------------------*/
    .shortcut2-list li {
        width: 48%;
        margin: 0.5em 1%;
    }

    .shortcut2-list li:nth-of-type(2n+1) {
        margin-left: 0.5%;
        clear: both;
    }

    .shortcut2-list li:nth-of-type(2n) {
        margin-right: 0.5%;
    }

    .pc-wrap .attractions-content {
        height: 4em;
    }

    .pc-wrap .itinerary-attractions .writer-title {
        font-size: 1.0625em;
    }
}

@media (min-width: 480px) and (max-width: 900px) {
    .pc-wrap .itinerary-attractions li.col3 {
        width: 50%
    }

    .pc-wrap .itinerary-attractions li.col4 {
        width: 50%
    }

    /*.pc-wrap .itinerary-attractions li{ padding:0;}*/
}

@media screen and (max-width: 900px) {

    /* 如果使用者之視窗寬度 <= 900px，將會再載入這裡的 CSS。 */
    /*.lecture-each{ width:94%;margin:0 3%;padding:0;}*/
    .lecture-each li:last-child {
        border: none;
    }

    .player-footer {
        height: auto;
        line-height: 120%;
        padding: 2%;
        background-repeat: repeat;
        background-size: auto 100%;
        height: 70px;
    }

    .player-footer ul {
        width: 100%;
        float: left;
        text-align: center;
    }

    .player-footer li {
        display: inline-block;
        padding: 5px;
        font-size: 14px;
    }

    .player-footer li a {
        color: #524535;
    }

    .player-footer .pf-copyright {
        display: none;
    }

    .player-footer .pf-copyright2 {
        display: block;
        width: 100%;
        color: #917A55;
        text-align: center;
        font-size: 12px;
    }

    .player-footer .pf-webdesign {
        text-align: left;
        width: 100%;
        color: #917A55;
        text-align: center;
        margin-bottom: 5px;
        font-size: 12px;
    }

    .gf-shortcut1 li {
        font-size: 13px;
    }

    .shortcut2-list {
        padding: 0.5em;
    }

    /* 行程總覽頁 tours-ov
------------------------------------*/
    .tours-ov-list>ul>li {
        width: 90%;
        margin: 0 auto 2em;
        float: none;
    }

    .tours-ov-list .tours-info {
        min-height: inherit;
    }

    .tour-features {
        padding: 0;
    }

    .tours-list .tl-header {
        display: none;
    }

    .sunday-players {
        padding: 0.5em;
    }

    .articles-list li {
        margin-bottom: 1em;
    }

    .itinerary-hero .hero-content {
        padding: 2em;
        width: 100%;
        box-sizing: border-box;
    }

    .hero-flag,
    .hero-flag:before,
    .hero-flag:after {
        background: none;
    }

    .hero-flag {
        width: auto;
        position: relative;
        left: 0;
    }

    .hero-flag .tours-days {
        font-size: 1em;
    }

    .hero-flag .tours-days,
    .hero-flag .quota,
    .hero-flag .join {
        display: inline-block;
        vertical-align: top;
        margin: 0 1em;
    }

    .tl-tours .allotment,
    .tl-tours .no-Sub {
        text-align: left;
    }

    /*
.tl-tours span:nth-of-type(1){ width: 31%; }
.tl-tours span:nth-of-type(2){ width: 31%; }
.tl-tours span:nth-of-type(3){ width: 31%; }*/
    .tl-tours .allotment:before {
        content: '總機位:';
        display: inline-block;
    }

    .tl-tours .no-Sub:before {
        content: '可售機位:';
        display: inline-block;
    }

    .tl-tours span:nth-of-type(4) {
        width: 100%;
        margin: auto;
    }

    /*.tl-tours a { margin:1em auto;}*/
    .itinerary-list {
        padding: 2em 0;
    }

    .itinerary-list:before {
        display: none;
    }

    .itinerary-list h2 {
        position: relative;
        left: 0;
    }

    /* 景點導覽列 nav 
------------------------------------*/
    .attractions-flag h2 {
        font-size: 1.5em;
    }

    .attractions-detail section {
        padding-left: 0;
        padding-right: 0;
    }

    .related-attractions {
        width: 100%;
        box-sizing: border-box;
    }

    .related-attr-list li {
        width: 16.66666%;
        padding: 0.5em;
    }

    .related-shortcut {
        width: 80%;
        max-width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .tour-menu {
        /*  text-align: center; */
    }

    .tour-menu a:focus {
        color: #fc0;
    }

    .tour-menu a {
        line-height: 140%;

    }

    .fixedcc {
        width: 100%;
    }

    .fixedcc2 {
        width: 100%;
    }

    .sptopwrap {
        position: relative;
        right: 0;
    }

    .sptopwrap .sptop {
        position: absolute;
        width: 33px;
        height: 40px;
        display: block;
        background: url(../images/sptop.png) no-repeat left top;
        margin: 0;
        line-height: 0;
        right: 10px;
        top: -30px;
    }

    .privacyedit .dlpic-wrap {
        float: none;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .privacyedit .dlpic-wrap .rwdpic img {
        width: 100%;
        height: auto;
    }

    .privacyedit .dlinfo-wrap {
        width: 100%;
        float: none;
        padding-top: 0px
    }

    .tours-ov-list .dlpic-wrap {
        float: none;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .tours-ov-list .dlpic-wrap .rwdpic img {
        width: 100%;
        height: auto;
    }

    .tours-ov-list .dlinfo-wrap {
        width: 100%;
        float: none;
        padding-top: 0px
    }
}

@media (min-width: 0) and (max-width: 992px) {
    .lecture-each li.full {
        border-top: none;
        margin: 0;
        width: 100%;
        padding: 10px 0 0 0;
    }

    .lecture-each .edit {
        margin: 0 0 5% 0;
        width: 100%;
    }

    /*.lecture-each li.full .pc-backicon{ right:-20px; top:10px;}*/
    .info-form {
        box-sizing: border-box;
    }

    .info-form .col1,
    .info-form .col2,
    .info-form .cols {
        width: 100%;
    }

    .info-form .travelers,
    .info-form .mobile,
    .info-form .email,
    .info-form .form-group,
    .info-form .address {
        padding-left: 0;
    }

    .info-form .form-group .col {
        width: 70%;
    }

    .info-form .form-group .col-rw {
        width: 100%;
    }

    .registration section {
        padding-left: 1em;
        padding-right: 1em;
    }

    .gf-content {
        background: #161511;
        padding-bottom:80px;
    }

    .gf-link {
        width: 60%;
        text-align: center;
    }

    .gf-link li span {
        overflow: hidden;
    }

    .gf-link li {
        margin-bottom: 10px;
        width: 100%;
        justify-content: center;
    }

    .gf-link .name {
        text-align: left;
        display: block;
        width: 100%;
    }

    .gf-link .tel {
        display: inline;
        padding-right: 10px;
        color: #888;
    }

    .gf-link .fax {
        display: inline;
        color: #888;
    }

    .report-food span {
        display: block;
    }

    .gf-shortcut1 {
        padding: 2% 1%;
        text-align: center;
        background: url(../images/global-bg-gray1.png) repeat;
    }

    .gf-shortcut1 li {
        background: none;
    }
}

@media (min-width: 768px) and (max-width: 860px) {
    .gf-shortcut1 {
        padding: 1em;
        text-align: center;
        background: url(../images/global-bg-gray1.png) repeat;
    }

    .gf-shortcut1 a {
        line-height: 120%;
        display: inline-block;
    }

    .gf-content {
        padding: 15px;
    }

    .gf-link li span {
        overflow: hidden;
    }

    .gf-link li {
        margin-bottom: 5px;
        /*text-align:left;*/
    }

    .gf-link .name {
        display: block;
    }

    .gf-link .tel {
        display: inline;
        padding-right: 10px;
        color: #888;
    }

    .gf-link .fax {
        display: inline;
        color: #888;
    }
}

@media (min-width: 0px) and (max-width: 768px) {
    .pc-backicon {
        text-indent: -9999em;
        right: 5%;
        top: 10%;
        padding: 5px 12px 10px 10px;
    }

    .pc-backicon:before {
        left: 15px;
    }

    .gf-link {
        text-align: center;
        overflow: hidden;
    }

    .gf-link a {
        margin: 0 2em 0 0;
    }

    .gf-info {
        overflow: hidden;
    }

    .gf-content {
        min-height: 180px;
    }

    .pc-outerwrap {
        margin-top: 0;
        padding-top: 0;
    }

    .scroll-pane {
        width: 100%;
        height: 200px;
        overflow: auto;
    }

    .horizontal-only {
        height: auto;
        max-height: 200px;
    }
}

@media (min-width: 479px) and (max-width: 599px) {

    /* index-shortcut2
------------------------------------*/
    .shortcut2-list li {
        width: 48%;
        margin: 0.5em 1%;
    }

    .shortcut2-list li:nth-of-type(2n+1) {
        margin-left: 0.5%;
        clear: both;
    }

    .shortcut2-list li:nth-of-type(2n) {
        margin-right: 0.5%;
    }
}

@media screen and (max-width: 900px) {

    /* 如果使用者之視窗寬度 <= 900px，將會再載入這裡的 CSS。 */
    .gf-company {
        display: block;
    }

    .gf-company,
    .gf-number {
        font-size: 12px;
        text-align: center;
    }

    .gf-companywrap {
        text-align: center;
    }

    .gf-content {
        /*padding:1.5em 1em 2.5em 1em; */
        overflow: hidden;
    }

    .gf-link a {
        margin: 0;
        padding: 0 5%;
        text-align: left;
    }

    .tl-tours span {
        padding: 0;
    }

    .tours-list .tl-itinerary>span {
        display: block;
        width: 100%;
        padding-left: 75px;
        position: relative;
    }

    .tl-itinerary>span:before,
    .tl-flight span:before,
    .tl-tours span:before {
        position: absolute;
        left: 0;
        top: 0;
        color: #444444;
        width: 60px;
        text-align: left;
    }

    .tl-itinerary>span:nth-of-type(1):before {
        content: "出團日期";
    }

    .tl-itinerary>span:nth-of-type(2):before {
        content: "行程";
    }

    .tl-itinerary>span:nth-of-type(3):before {
        content: "天數";
    }

    .tl-itinerary a {
        color: #000;
        font-weight: bold;
    }

    .gf-copyright {
        text-align: center;
    }

    .global-Footer {
        margin: 0;
    }

    .fl-header {
        display: none;
    }

    .flight-list {
        text-align: center;
    }

    .flight-list span {
        width: auto;
        display: block;
    }

    .flight-list span.day-operation {
        display: inline-block;
        margin: auto;
        padding: 0.25em 1em;
        border: 2px solid #CCC;
        color: #222;
        border-radius: 2em;
    }

    .related-attractions {
        width: 100%;
    }

    .step-nav ol:before {
        display: none;
    }

    .step-nav li {
        width: 4.2em;
        height: 4.2em;
        padding: 0.25em;
    }

    .step-nav li+li {
        margin-left: 0.25em;
    }

    .step-nav li:before {
        width: 4.2em;
        height: 4.2em;
        margin-left: -2.1em;
    }

    .step-nav .current:after {
        width: 4.8em;
        height: 4.8em;
        margin-left: -2.4em;
    }

    .step-nav span {
        font-size: 0.6em;
    }

    .step-nav .num {
        font-size: 1em;
    }

    .gf-info {
        text-align: center;
        width: 100%;
        padding-top: 3%
    }

    .gf-link {
        width: 100%;
        float: none;
    }

    .tl-flight {
        padding-top: 15px;
    }

    .tl-flight span {
        width: 48%;
        padding-right: 2%;
        padding-left: 75px;
        position: relative;
        box-sizing: border-box;
    }

    .tl-flight span:nth-of-type(1):before {
        content: "航空公司";
    }

    .tl-flight span:nth-of-type(2):before {
        content: "售價";
    }

    .tl-tours {
        padding-top: 5px;
    }

    .tl-tours span:nth-of-type(1),
    .tl-tours span:nth-of-type(3) {
        width: 48%;
        padding-right: 2%;
        padding-left: 75px;
        position: relative;
        box-sizing: border-box;
    }

    .tl-tours span:nth-of-type(1):before {
        content: "總機位";
    }

    .tl-tours span:nth-of-type(3):before {
        content: "出團狀況";
    }

    .tl-tours span:nth-of-type(4) {
        width: 100%;
        padding-top: 15px;
    }

    .tl-tours a {
        display: block;
        background: #765E3F;
        border-radius: 0;
    }
}

@media screen and (max-width: 480px) {

    .tl-flight span,
    .tl-flight span,
    .tl-flight span:nth-of-type(1),
    .tl-tours span:nth-of-type(1),
    .tl-tours span:nth-of-type(3) {
        width: 100%;
    }

    .tl-tours,
    .tl-flight {
        padding-top: 0;
    }
}

@media screen and (min-width: 320px) {
    .index-absfoot a {
        transform: scale(1);
    }

    .index-absfoot a:nth-of-type(1) .icon-player {
        transform: scale(1.5);
    }

    .index-absfoot a:nth-of-type(2) .icon-share {
        transform: scale(1.5);
    }

    .index-absfoot a:nth-of-type(3) .icon-lectures {
        transform: scale(1.5);
    }

    .index-absfoot a:nth-of-type(4) .icon-discount {
        transform: scale(1.3);
    }

    .index-absfoot a:nth-of-type(5) .icon-serv {
        transform: scale(1.2);
    }

    /* .index-absfoot a:nth-of-type(5) .icon-facebook{transform: scale(1.2);} */
    /*     .index-absfoot a:nth-of-type(6) .icon-talk {
        transform: scale(1.2);
    } */
    .index-absfoot a font {
        transform: scale(1.2);
    }
}

@media (min-width: 481px) and (max-width: 640px) {
    .pc-subnavi select {
        display: none;
    }

    .index-absfoot a {
        font-size: 10px;
    }
}

@media screen and (min-width: 360px) {
    .index-absfoot {
        overflow: visible;
    }

    /*  .index-absfoot a:after {
        position: absolute;
        content: '';
        display: inline-block;
        right: 0;
        bottom: 5px;
        width: 1px;
        height: 10px;
        border-right: 1px solid #fff;
    }
    .index-absfoot a:last-child:after {
        display: none;
    } */
}

@media screen and (min-width: 460px) {
    .index-absfoot a:after {
        right: 0;
    }

    .index-absfoot a {
        transform: scale(1);

    }

    .index-absfoot a:nth-of-type(4) {
        right: 0;

    }

}

@media screen and (min-width: 620px) {
    .pc-subnavi select {
        display: none;
    }
}

@media screen and (max-width: 480px) {

    /* 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。*/
    /*.tour-menu{ text-align:left; height:40px; padding:0}*/
    .tour-menu a {}

    .fixedcc {
        width: 100%;
    }

    .fixedcc2 {
        width: 100%;
    }

    .sptopwrap {
        position: relative;
        right: 0;
    }

    .sptopwrap .sptop {
        position: absolute;
        width: 33px;
        height: 40px;
        display: block;
        background: url(../images/sptop.png) no-repeat left top;
        margin: 0;
        line-height: 0;
        right: 0px;
        top: -45px;
    }

    .pc-wrap .attractions-content {
        height: 4em;
    }

    .pc-wrap .itinerary-attractions .writer-title {
        font-size: 1.0625em;
    }

    .pc-wrap .itinerary-attractions li.col3,
    .pc-wrap .itinerary-attractions li.col3 {
        width: 90%;
        margin: 2.5% 5% 2.5% 5%
    }

    .pc-wrap .itinerary-attractions li {
        padding: 0;
    }

    .pc-wrap .itinerary-attractions p {
        color: #f5f5f5;
    }

    .pc-backicon {
        top: 5%;
    }

    .lecture-each li {
        width: 90%;
        margin: 0 5% 5% 5%;
    }

    .pc-subnavi ul {
        display: none;
    }

    .pc-subnavi.news ul {
        display: block;
    }

    .pc-subnavi select {
        padding: 0.25em;
        border: 1px solid #CDB387;
        border-radius: 6px;
        box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
        background: #f0f0f0;
        background: -moz-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
        background: -webkit-linear-gradient(top, #f0f0f0 0%, #ffffff 100%);
        background: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=0);
        width: 90%;
        padding: 5px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .pc-subnavi select:focus {
        box-shadow: none;
        outline: none;
        border: 1px solid #CDB387;
    }

    /* index-shortcut2
------------------------------------*/
    .shortcut2-list li {
        width: 48%;
        margin: 0.5em 1%;
    }
	  .shortcut2-list li:nth-child(2n-1){ clear:left;}

    .tours-ov-list .tours-info {
        padding: 3em 1em 1em 1em;
    }

    .tours-ov-list .tours-days {
        position: absolute;
        top: 0;
        left: 10px;
        width: auto;
        height: auto;
        padding: 0 0 0 0.5em;
        margin-left: 0;
        text-align: center;
        border-radius: 50%;
        text-align: center;
    }

    .tours-ov-list .tours-days span {
        display: block;
    }

    .tours-ov-list .tours-days .num {
        font-size: 2em;
        line-height: 2em;
        color: #000;
        width: auto;
        height: auto;
        margin: auto;
        background: none;
        background-size: 100% 100%;
        box-shadow: none;
        border-radius: 0;
        display: inline;
        color: #9E7B4B;
    }

    .tours-ov-list .tours-days .day {
        font-size: 1em;
        color: #000;
        display: inline;
    }

    .related-attr-list li {
        width: 33.33333%;
        padding: 0.5em;
    }

    .gf-content {
        /*padding:1em 1em 1em 1em; */
        overflow: hidden;
    }
.gf-content .cr{ width:100%;}
    .gf-content .cr ul li{ width:30%}
    .gf-link a {
        margin: 0;
        padding: 0 5%;
        text-align: left;
		        color: #fff;
    }

    .gf-info {
        text-align: center;
        width: 100%;
        text-align: left;
        padding: 3% 0 0 0;
        font-size: 0.9em;
    }

    .tour-hero h2 {
        padding: 0;
        margin: 0;
    }

    .style-bkbg {
        background: none;
    }

    .style-wbg {
        background: none;
    }

    .decorative:before,
    .decorative:after {
        content: '';
        display: inline-block;
        width: 0;
        height: 5px;
        vertical-align: middle;
        background-repeat: no-repeat;
        margin-top: -0.2em;
    }

    .gf-shortcut1 li {
        width: 20%
    }
}

.info-form input[type="text"] {}

.info-form .msgfrom input[type="text"] {
    width: 65%;
    position: relative;
    top: -3px;
}

.none {
    display: none;
}

.attr-article-content .attr-slide a {
    width: 809px;
    height: 512px;
    text-align: center;
    display: block;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    outline: none;
}

.attr-article-content .attr-slide img {
    max-width: 809px;
    max-height: 512px;
    visibility: hidden;
    width: auto;
    max-width: 100%;
    height: auto;
    border: 0;
    display: none;
}

.attr-slide figure.article-gallery {
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    vertical-align: top;
    width: 835px;
    overflow: hidden;
}

@media screen and (min-width: 1200px) {
    .gf-content {
        padding: 2em 3em 75px 3em;
        min-height: 145px;
    }

    .gf-link .name {
        width: 340px;
        font-size: 15px;
        line-height: 150%;
        display: inline-flex;
        box-sizing: border-box;
    }

    .gf-link li {
        font-weight: normal
    }

    .gf-link .name a {
        color: #fff;
        padding: 5px 0;
    }

    .gf-link .name a:hover {
        padding: 5px 0;
        color: #9E7B4B;
    }

    .gf-link .tel {
        width: 130px;
        line-height: 100%;
        font-size: 13px;
    }

    .gf-link .fax {
        line-height: 100%;
        font-size: 13px;
    }

    .gn-privacy {
        color: #b3935e;
    }

    .gn-privacy a {
        color: #9E7B4B;
        padding: 5px 0;
    }

    .gn-privacy a:hover {
        padding: 5px 0;
        color: #cacaca;
    }

    /*.privacyedit .dlinfo-wrap{ padding-top:3%;}*/
}

@media screen and (min-width: 1320px) {
    .pc-outerwrap {
        padding-top: 60px
    }

    .tours-sidewrap .serv-nvai2 {
        display: none;
    }
}

.testcolor {}


/*瀑布流套件整合*/

.pc-each,
.pc-oldeach {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.pc-oldeach {}

.pc-oldeach.sortwrap {
    display: none;
    cursor: pointer;
}

.switch-sort.btmline {
    border-bottom: 1px solid #999;
    position: relative;
    padding: 1rem;
    margin: 1rem;
}

.switch-sort.btmline .close {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #FCF9F4;
    padding-right: 20px;
}

.pc-each li,
.pc-oldeach li {
    width: 25%;
    padding: 1%;
    box-sizing: border-box;
    float: left;
    list-style: none;
    display: block;
}

.pc-each li a,
.pc-oldeach li a {
    display: block;
    width: 100%;
}

.pc-each .pc-eachpic,
.pc-oldeach .pc-eachpic {
    margin-bottom: 20px;
}

.pc-each .pc-eachpic img,
.pc-oldeach .pc-eachpic img {
    display: block;
    width: 100%;
    height: auto;
}

.pc-each .pc-eachtitle,
.pc-oldeach .pc-eachtitle {
    font-size: 22px;
    margin-bottom: 10px;
    line-height: 140%;
}

.pc-each .pc-eachdes,
.pc-oldeach .pc-eachdes {
    font-size: 15px;
    line-height: 160%;
}

.pc-each .pc-eachtitle .sicon,
.pc-oldeach .pc-eachtitle .sicon {
    display: inline-block;
    left: 0;
    bottom: 0;
    background: #765E3F url(../images/btn-bg5.png) no-repeat top left;
    color: #fff;
    display: inline-block;
    padding: 0 0.5em;
    min-width: 55px;
    text-align: center;
    font-size: 16px;
    word-break: break-all;
    border-radius: 1.5em;
    margin-right: 10px;
}

.pc-each li.pc-grid-sizer,
.pc-oldeach li.pc-grid-sizer {
    width: 25%;
    display: none;
    padding: 0;
}

.pc-each .pc-eachtitle .gicon,
.pc-oldeach .pc-eachtitle .gicon {
    display: inline-block;
    left: 0;
    bottom: 0;
    background: #ccc;
    color: #fff;
    padding: 0 0.5em;
    min-width: 55px;
    text-align: center;
    font-size: 16px;
    word-break: break-all;
    border-radius: 1.5em;
    margin-right: 10px;
}


/*scrollloading設定*/

#infscr-loading {
    display: block;
    clear: both;
    position: absolute;
    bottom: -60px;
    left: 50%;
    margin-left: -86px;
    text-align: center;
}

#infscr-loading img {
    display: block;
    width: auto;
    margin: 0 auto;
}

@media screen and (max-width: 1200px) {

    /* 晴天玩家RWD
    ------------------------------------*/
    /*.pc-each{ width:100%; box-sizing:content-box;}*/
    .pc-each li,
    .pc-oldeach li {
        width: 33.33333%;
        padding: 1%;
    }

    /*.pc-each li:nth-child(3n+1){ clear:both;}
    .pc-each li:nth-child(4n+1){ clear:none;}*/
    .pc-each li.pc-grid-sizer,
    .pc-oldeach li.pc-grid-sizer {
        width: 33.33333%;
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .tour-menu .tour-menulink a.backtxt:before {
        content: '回';
        background: url(../images/w-aleft.png) no-repeat left center;

        padding-left: 15px;
    }

    #switchbox .sortwrap {
        display: none;
    }

    .pc-each li,
    .pc-oldeach li {
        width: 50%;
        padding: 1%;
    }

    /*.pc-each li:nth-child(2n+1){ clear:both;}
    .pc-each li:nth-child(3n+1){ clear:none;}
    .pc-each li:nth-child(4n+1){ clear:none;}*/
    .pc-each li.pc-grid-sizer,
    .pc-oldeach li.pc-grid-sizer {
        width: 50%;
        display: none;
    }

    .info-form .msgfrom .col label:nth-of-type(1) {
        width: 46%;
    }

    .info-form .msgfrom .col label:nth-of-type(2) {
        width: 46.35%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(3) {
        width: 46%;
        margin-right: 8px;
    }

    .info-form .msgfrom .col label:nth-of-type(4) {
        width: 46.35%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(5) {
        width: 46%;
    }

    .info-form .msgfrom .col label:nth-of-type(6) {
        width: 46.35%;
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {

    .pc-each li,
    .pc-oldeach li {
        width: 100%;
        padding: 1% 1% 20px 1%;
    }

    /*.pc-each li:nth-child(2n+1){ clear:none;}
    .pc-each li:nth-child(3n+1){ clear:none;}
    .pc-each li:nth-child(4n+1){ clear:none;}*/
    .pc-each li.pc-grid-sizer,
    .pc-oldeach li.pc-grid-sizer {
        width: 100%;
        display: none;
    }
}


/*以下RWD調整*/

.clearfix:after {
    display: block;
    content: ".";
    clear: both;
    line-height: 0;
    height: 0;
    visibility: hidden
}


/*TOP*/

@media screen and (max-width: 1024px) {
    .scroll-top {
        bottom: 60px;
    }
}


/*edit*/

@media screen and (max-width: 1024px) {
    .edit-Style img {
        max-width: 100%;
        height: auto !important;
    }

    .edit-Style iframe {
        max-width: 100%;
    }
}


/*共用表單*/

.title-xs {
    display: none;
}

@media screen and (max-width: 1280px) {
    .title-xs {
        display: block;
        line-height: 1.25em;
        margin: 0 0 20px 0;
        font-size: 2rem;
        text-align: center;
    }
}

@media screen and (max-width: 1024px) {

    .formstyle1 .col1,
    .formstyle1 .col2 {
        width: 50%;
    }

    .formstyle1 .travelers {
        padding-right: 0;
    }

    .info-formstyle1 .form-group>.col {
        width: 70%;
        max-width: none;
    }

    .info-formstyle1 .form-group>.col select,
    .info-formstyle1 .form-group>.col input {
        width: 100%;
        max-width: none;
    }

    .info-formstyle1 .form-group.notes>.col,
    .info-formstyle1 .other .form-group>.col {
        width: 87%;
        font-size: 0;
    }

    .info-formstyle1 .notes .col label {
        text-align: left;
    }

    .info-formstyle1 .notes .col label {
        width: 48%;
        max-width: none;
        margin: 0 0 15px 2%;
        font-size: 16px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 768px) {

    .formstyle1 .col1,
    .formstyle1 .col2 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .info-formstyle1 .form-group>.col,
    .info-formstyle1 .form-group.notes>.col,
    .info-formstyle1 .other .form-group>.col {
        width: 80%;
    }

    .info-formstyle1 .form-group>label {
        width: 15%;
        text-align: right;
        border-right: 1px solid #999;
        padding-right: 5px;
        padding-left: 0;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .info-formstyle1 .notes .col label {
        min-width: auto;
    }
}

@media screen and (max-width: 600px) {

    .info-formstyle1 .form-group>.col,
    .info-formstyle1 .form-group.notes>.col,
    .info-formstyle1 .other .form-group>.col {
        width: 100%;
    }

    .info-formstyle1 .form-group>label {
        width: 100%;
        font-size: 14px;
        width: 100%;
        font-size: 14px;
        border: none;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .info-formstyle1 .notes .col label {
        width: 100%;
        margin: 0 0 15px 2%;
        font-size: 14px;
    }

    .info-form.info-check .form-group {
        padding: 0;
    }

    .info-form.info-check .form-group .col {
        width: 100%;
        box-sizing: border-box;
        padding: 0 5px
    }
}


/*registration*/

@media screen and (max-width: 1200px) {
    .tours-ov-list.registration-liststyle>ul>li {
        width: 98%;
    }

    .tours-ov-list.registration-liststyle {
        max-width: 820px;
        margin: auto;
    }

    .tours-ov-list.registration-liststyle>ul>li {
        width: 100%;
    }

    .tours-ov-list.registration-liststyle .pic-block img {
        max-width: 450px;
        margin: 0 auto 40px auto;
    }
}

@media screen and (max-width: 600px) {
    .registration .tours-summary {
        padding-left: 1em;
        padding-right: 1em;
    }
}


/*首頁*/

#ytplayer {
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .index-slide1 .item {
        height: 45vw;
    }

    .gf-shortcut1 .lang2 .jqTransformSelectWrapper ul {
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 600px) {
    .gf-shortcut1 ul {
        text-align: left;
    }

    .gf-shortcut1 li {
        width: 30%;
    }
}

@media screen and (max-width: 480px) {
    .index-slide1 .item {
        height: 66vw;
    }

    .index-slide2 {
        padding: 0;
    }

    .index-slide2 .pic {
        width: 25%;
        margin: 0 5px 0.5em 0;
    }

    .index-slide2 .slide-content {
        width: 73%;
        padding-left: 15px;
    }
}


/*header*/

@media (max-width: 1279px) {
    .tour-Header {
        height: 80px;
    }

    .tour-Header .logo {
        top: 15px;
    }

    .tour-Header .nav-toggle {
        top: 5px;
    }

    .tour-Nav {
        display: none;
    }

    .menu-dropdown {
        position: relative;
    }

    .menu-dropdown:after {
        content: " ";
        position: absolute;
        right: 10px;
        width: 20px;
        height: 30px;
        top: 5px;
        background: url(../images/arrow_down2.png) center no-repeat;
        -webkit-transition: All 0.1s linear;
        -moz-transition: All 0.1s linear;
        -o-transition: All 0.1s linear;
        transition: All 0.1s linear;
    }

    .menu-dropdown.down:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    .global-mNav>ul>li>ul.menu-toggle {
        display: none;
    }
}


/*footer*/

@media screen and (max-width: 1200px) {
    .gf-content {
        background: #2d2c26;
    }
}

@media screen and (max-width: 1280px) {
    .gf-shortcut1 {
        display: none;
    }
}


/*@media screen and (max-width: 1279px) {
    .global-Header{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999999999999999999999999999999;
        width: 100%;
    }
}*/


/*about*/

@media screen and (max-width: 768px) {
    .tours-ov-menu.tours-ov-menuAbout {

        overflow-x: auto;
        overflow-y: hidden;
    }

    .tours-ov-menu.tours-ov-menuAbout ul {
        width: 600px;
    }

    .tours-ov-menu.tours-ov-menuAbout a {
        padding: 0 15px;
    }

}

@media screen and (max-width: 480px) {
    .tours-ov-menu.tours-ov-menuAbout a {
        line-height: 2.2em;
    }
}


/*contact*/

@media screen and (max-width: 600px) {

    .contact-wrap .info-form .col1,
    .contact-wrap .info-form .col4 {
        width: 100%;
        padding-right: 0;
    }

    .cw-navi .tab_container .tab_content.contact-form-paxs {
        padding: 0 1em;
    }

    .cw-navi ul.tabs li {
        width: 50%;
        line-height: 2.5em;
    }

    .cw-navi {
        margin-top: 0;
    }
}


/*attractions*/

.attr-article-list {
    width: 98%;
    position: relative;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
}

.attr-article-listLink {
    width: 25%;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (min-width: 1440px) {
    .attr-article-listLink {
        width: 20%;
    }
}

@media screen and (min-width: 1200px) {
    .attractions-nav {
        width: 20%;
        min-width: 240px;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
    }

    .attractions-list {
        float: right;
        width: 80%;
        background: url(../images/mainallbg.jpg) no-repeat left top;
    }

    .attractions-flag {
        margin-left: auto;
        margin-right: auto;
    }

    .attractions-flag h2 {
        font-size: 3em;
        margin: 0
    }

    .attractions-flag h2 span {
        display: block;
    }

    .attr-subtitle {
        font-size: 0.35em;
        line-height: 200%;
    }

    .attr-visit {
        font-size: 1.25em;
        display: block;
    }

    .attr-filter-search {
        display: inline-block;
        margin: auto;
    }

    .attractions-map {
        float: right;
        width: 80%;
        height: 100%;
    }

    .attractions-map .maparea {}

    .itinerary-attractions li.mvcol3 iframe {
        height: 210px;
    }

    .itinerary-attractions li.mvcol2 iframe {
        height: 320px;
    }
}

@media screen and (max-width: 1200px) {

    .overview.gold-flag,
    .overview.gold-flag:before,
    .overview.gold-flag:after {
        background: none;
    }

    .attractions:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .overview.gold-flag {
        left: 0;
        margin: 0;
        width: 100%;
        max-width: none;
        height: auto;
    }

    .attractions-flag p {
        margin-bottom: 0;
        display: none;
    }

    .attractions-map {
        padding: 30px;
        width: 100%;
    }

    #map_wrap {
        width: 100%;
        height: 70vh;
    }

    .attractions-map .returnhome .back {
        font-size: 0;
        padding: 5px;
    }

    .attr-list-header h1 {
        margin-bottom: 0;
    }

    .attr-list-header .back,
    .attr-list-header .tolist {
        position: relative;
        top: 0;
        right: 0;
        width: 50%;
        margin-top: 0;
        padding: 10px 0;
        /* background: none; */
        border-radius: 0;
        display: block;
        text-align: center;
        float: left;
    }

    .attractions-list {
        background: none;
    }
}

@media screen and (min-width: 1300px) {
    .tours-sidewrap.ind ul {
        bottom: auto;
        /* top: 178px; */
        z-index: 880;
    }

    .tours-sidewrap.inpage ul {
        bottom: auto;
        /* top: 280px; */
        z-index: 880;
    }

}

@media screen and (max-width: 1300px) {
    .tours-sidewrap.ind {
        display: none;
    }

    .tours-sidewrap.inpage {
        display: none;
    }

    .whitebg {
        background: #f5f5f5;
    }

    .attr-detailbg {
        background: none;
        padding: 0;
    }

    .attr-article-hero {
        overflow: hidden;
        border: 0;
        background: #f5f5f5;
    }

    .attr-article-hero:after {
        content: '';
        background: none;
        position: absolute;
        bottom: 0;
        width: 1280px;
        height: 50px;
        display: block;
        left: 0;
    }

    .attr-article-content .title-ch-name {
        margin-left: 0;
    }

    .attr-slide {
        margin-bottom: 0;
    }

    .attr-slide .slick-prev.slick-arrow {
        left: 0;
        top: 50%;
        margin-top: -52.5px;
    }

    .attr-slide .slick-next.slick-arrow {
        right: 0;
        top: 50%;
        margin-top: -52.5px;
    }

    .attr-article-content .attr-slide a {
        width: 100%;
        height: 480px;
    }
}

@media screen and (max-width: 900px) {
    .attr-article-content h1 {
        text-align: center;
    }

    .related-itinerary-list li {
        width: 96%;
        padding: 0.5em 2em;
        margin: 0 2%;
        background-color: #ffffff;
        border-bottom: 1px solid #E5E5E5;
        box-sizing: border-box;
    }

    .related-itinerary {
        background: none;
    }

    .responses {
        background: none;
    }

    .attr-article-content .attr-slide a {
        height: 520px;
    }

    .attr-article-listLink {
        width: 33.333333%;
    }
}

@media screen and (max-width: 768px) {
    .attr-article-listLink {
        width: 50%;
    }
}

@media screen and (max-width: 680px) {
    .attr-article-content .attr-slide a {
        height: 66vw;
    }
}

@media screen and (max-width: 480px) {
    .attr-article-listLink {
        width: 100%;
    }
}

@media screen and (max-width: 620px) {
    .info-form .msgfrom .col {
        box-sizing: border-box;
    }

    .info-form .msgfrom .col label:nth-of-type(1) {
        width: 96%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(2) {
        width: 96%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(3) {
        width: 96%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(4) {
        width: 96%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(5) {
        width: 96%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(6) {
        width: 96%;
        margin-right: 0;
    }
}

@media screen and (max-width: 479px) {
    .info-form .msgfrom .col {
        box-sizing: border-box;
        font-size: 0.875rem;
    }

    .info-form .msgfrom .col label:nth-of-type(1) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(2) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(3) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(4) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(5) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom .col label:nth-of-type(6) {
        width: 93%;
        margin-right: 0;
    }

    .info-form .msgfrom input[type="text"] {
        top: -2px;
    }
}


/*晴天玩家*/

.titlebtmline h2:before,
.titlebtmline h2:after {
    background: none;
}

.iscroll-box {
    overflow: visible;
}

.lecture-detail-c {
    max-width: 900px;
    margin: 0 auto;
}

.player-menuxs {
    display: none;
}

@media screen and (max-width: 1280px) {
    .player-footer {
        padding-bottom: 50px;
    }

    .player-menuxs {
        display: block;
        width: 100%;

        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99999;
        background: #bb936f;
        background: -moz-linear-gradient(top, #bb936f 0%, #6f593c 100%);
        background: -webkit-linear-gradient(top, #bb936f 0%, #6f593c 100%);
        background: linear-gradient(to bottom, #bb936f 0%, #6f593c 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bb936f', endColorstr='#6f593c', GradientType=0);
    }

    .player-menubox {

        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .player-menuC {
        flex: 1;
        color: #ddd;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;


    }

    .player-menuC:nth-of-type(5) {
        background-color: #001e52;
        color: #fff;
    }

    .player-menuC:hover {
        color: #fff;
    }

    .player-menuC br {
        display: none;
    }

    .itinerary-attractions li.mvcol3 iframe {
        height: 203px;
    }

    .itinerary-attractions li.mvcol2 iframe {
        height: 311px;
    }
}

@media screen and (max-width: 1024px) {
    .iscroll-box {
        position: relative;
        width: 100%;
        height: auto;
    }

    .iscroll-boxS {
        /*position: absolute;
        z-index: 1;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        overflow: hidden;*/
    }

    #iscroll-boxC {
        /*position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;*/
    }

    .pn-titlewrap .name {
        width: 65%;
    }

    .pn-titlewrap .back {
        display: block;
        float: right;
        width: 20%;
    }

    .pn-titlewrap {
        margin: 0 auto 15px auto;
    }
}

@media screen and (max-width: 992px) {
    .pc-signwrap {
        margin: 0 auto;
        padding: 40px 20px;
    }
}

@media screen and (max-width: 768px) {
    .pc-wrap h2 {
        font-size: 1.5rem;
    }

    .player-newswrap .date {
        width: 20%;
        font-size: 1rem;
        text-align: left;
    }

    .player-newswrap .sort {
        width: 10%;
    }

    .player-newswrap .des {
        width: 65%;
        padding-left: 5%;
        padding-right: 0;
        font-size: 1rem;
    }

    .pn-titlewrap .name {
        width: 85%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1rem;
    }

    .pn-titlewrap .back {
        width: 15%;
    }
}

@media screen and (max-width: 680px) {
    .full-date {
        font-size: 26px;
        line-height: 130%;
    }

    .lecture-each li.full .pc-iconposition {
        font-size: 16px;
        line-height: 110%;
        top: 0;
        position: relative;
    }

    .full-date .pc-iconposition .pc-sign {
        float: left;
        margin: 0;
    }

    .full-date .pc-iconposition .pc-backicon {
        padding: 5px 12px 10px 30px;
        float: left;
        text-indent: 0;
        right: 0;
        top: 0;
    }

    .pc-signwrap .infowrap .sort {
        width: 20%;
    }

    .pc-signwrap .infowrap .name,
    .pc-signwrap .infowrap .date,
    .pc-signwrap .infowrap .time,
    .pc-signwrap .infowrap .location {
        width: 80%;
    }

    .player-menuC {
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .pc-signwrap .infowrap .sort {
        width: 30%;
    }

    .pc-signwrap .infowrap .name,
    .pc-signwrap .infowrap .date,
    .pc-signwrap .infowrap .time,
    .pc-signwrap .infowrap .location {
        width: 70%;
    }

    .player-menuC {
        text-align: center;

    }

    .player-menuC br {
        display: inline;
    }
}


/*lecture*/

@media screen and (max-width: 992px) {
    .newlecturewrap {
        padding: 0 20px;
    }

    #switchbox {
        top: 0;
    }
}

@media screen and (max-width: 600px) {

    .form-style .form-group .col,
    .form-style .form-group .col input,
    .form-style .form-group .col select {
        width: 100% !important;
    }

    .info-form .msgfrom input[type="text"] {
        width: 70% !important;
    }
}


/*圖文排列*/

@media screen and (max-width: 992px) {
    #switchbox .switch-grid .first .date {
        font-size: 1em;
    }

    #switchbox .switch-grid p {
        margin: 0.2em 0;
    }
}

@media screen and (min-width: 768px) {
    #switchbox .switch-grid li:nth-of-type(3n+1) {
        clear: both;
        margin-left: 0;
    }
}

@media screen and (max-width: 768px) {
    #switchbox .switch-grid .pic {
        margin-bottom: 5px;
    }

    #switchbox .switch-grid .first {
        width: 100%;
        padding-top: 30px;
        position: relative;
    }

    #switchbox .switch-grid .first .sign {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #switchbox .switch-grid .first .sign a {
        position: relative;
        left: 0;
        width: 100%;
        background: #765E3F;
        padding: 0.2em 0;
    }

    #switchbox .switch-grid li {
        width: 48%;
        margin: 0 0 4% 4%;
    }

    #switchbox .switch-grid li:nth-of-type(2n+1) {
        clear: both;
        margin-left: 0;
    }

    #switchbox .switch-grid .second {
        font-size: 1em;
    }

    #switchbox .switch-grid .third {
        font-size: 0.8em;
    }
}


/*list*/

@media screen and (min-width: 992px) {
    #switchbox .switch-head .pchide {
        display: none;
    }

    #switchbox .switch-list .second2 .areashow {
        display: none;
    }

    .white_content .close {
        right: 2.5%;
    }
}

@media screen and (max-width: 992px) {

    #switchbox .switch-list .first .date,
    #switchbox .switch-list .first .week,
    #switchbox .switch-list .third .location,
    #switchbox .switch-list .third .time {
        font-size: 0.85em;
    }

    #switchbox .switch-list .second,
    #switchbox .switch-list .second2 {
        font-size: 1em;
    }

    #switchbox .switch-list .first {
        width: 15%;
    }
}

@media screen and (max-width: 768px) {

    #switchbox .switch-head .second,
    #switchbox .switch-head .third,
    #switchbox .switch-head .forth {
        display: none;
    }

    #switchbox .switch-head .first {
        width: 20%;
    }

    #switchbox .switch-list li {
        position: relative;
    }

    #switchbox .switch-list .first {
        width: 20%;
    }

    #switchbox .switch-list .second {
        width: 60%;
    }

    #switchbox .switch-list .second2 {
        width: 77%;
    }

    #switchbox .switch-list .third {
        width: 18%;
    }

    #switchbox .switch-list .third3 {
        width: 18%;
    }

    #switchbox .switch-list .pchide {
        display: inline-block;
    }

    #switchbox .switch-list .second2 .areashow {
        padding-top: 10px;
        font-size: 0.85em;
    }

    #switchbox .switch-list .third .areahide {
        display: none;
    }

    #switchbox .switch-list .third .location,
    #switchbox .switch-list .third .time {
        width: auto;
    }

    #switchbox .switch-list .third .location {
        padding-right: 5px;
    }

    #switchbox .switch-list .forth {
        position: absolute;
        top: 25px;
        right: 0;
    }

    #switchbox .switch-list .forth .sign a {
        background: #765E3F;
        padding: 0.2em;
        min-width: 40px;
        width: 40px;
        border-radius: 0;
    }

    #switchbox .buttons {
        width: 50%;
        float: right;
        left: 0;
    }
}

@media screen and (max-width: 480px) {

    #switchbox .switch-list .first,
    #switchbox .switch-list .second {
        width: 45%;
    }

    #switchbox .switch-list .second2 {
        width: 53%;
    }

    #switchbox .switch-list .third {
        width: 100%;
    }

    #switchbox .switch-list .forth {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        display: block;
        padding-top: 5px;
    }

    #switchbox .switch-list .forth .sign {
        display: block;
    }

    #switchbox .switch-list .forth .sign a {
        width: 100%;
        min-width: auto;
        display: block;
    }

    #switchbox .switch-head .forth {
        display: none;
    }

    #switchbox .buttons {
        width: 100%;
        float: left;
        bottom: 0;
    }

    .newlecturewrap .pc-subnavi {
        text-align: center;
    }

    .newlecturewrap .pc-subnavi select {
        width: 100%;
    }
}


/*tours*/

.tours-ov-menuxs {
    display: none;
}

@media screen and (max-width: 1024px) {
    .tours-ov-menu a {
        padding: 0 25px;
    }
}

@media screen and (max-width: 768px) {

    /*手機版下拉按鈕*/
    .js-dropdown {
        display: block;
        border: 1px solid #cbb197;
        text-align: center;
        padding: 13px;
        margin: 0 2em 15px 2em;
        cursor: pointer;
        position: relative;
    }

    .menu-iconS {
        display: block;
        position: absolute;
        width: 15px;
        height: 15px;
        top: 16px;
        right: 20px;
        -webkit-transition: All .15s linear;
        -moz-transition: All .15s linear;
        -o-transition: All .15s linear;
        transition: All .15s linear;
    }

    .menu-iconS:before,
    .menu-iconS:after {
        content: " ";
        display: block;
        height: 15px;
        width: 2px;
        background: #cbb197;
        position: absolute;
        right: 0;
        top: 0;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .menu-iconS:after {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        right: 10px;
    }

    .js-dropdown.show {
        margin: 0 2em 0 2em;
    }

    .js-dropdown.show .menu-iconS {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
    }

    .js-toggle {
        width: auto;
        margin: 0 2em 15px 2em;
        background: none;
        border-left: 1px solid #cbb197;
        border-right: 1px solid #cbb197;
        display: none;
    }

    .js-toggle a {
        display: block;
        padding: 10px;
        line-height: 120%;
        border-bottom: 1px solid #cbb197;
        background: #F3F3F3;
    }

    .js-toggle a:hover,
    .js-toggle a:focus,
    .js-toggle a:active {
        background: #C1A282;
        color: #ffffff;
    }

    .js-toggle .selected {
        background: #C1A282;
    }

    .js-toggle.show {
        display: block;
    }

    .tours-bg {
        background-position: top center;
        background-size: auto 100vh;
    }
}


/*intro*/

.jqtransformdone {
    padding: 0 25px;
}

.tour-menu .lang.tour-menulink {}

.lang.tour-menulink select {
    background: none;
    border: none;
    /*text-align: center;*/
    color: #fff;
    font-size: 100%;
    /* padding-left: 20px; */
    cursor: pointer;
    font-family: 'Noto Sans TC';
    letter-spacing: 0.05rem;
    width: 100%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../images/arrow_down3.png) no-repeat 70px center;
}

.lang.tour-menulink select::-ms-expand {
    display: none;
}

.lang.tour-menulink option {
    background: #b38f6e;
    font-size: 14px;
}

@media screen and (max-width: 1024px) {
    /*  .tour-menu .tour-menulink {
       
        width: 115px;
    } */

    /*   .tour-menu .lang.tour-menulink {
        width: 115px;
    } */


    .tour-hero .tours-title {
        font-size: 1.5em;
    }

    .tour-hero .tours-title {
        padding: 0;
    }

    .decorative.line-white1:before,
    .decorative.line-white1:after {
        background: none;
    }

    .sptopwrap {
        display: none;
    }

    .itinerary-attractions li.mvcol3 iframe {
        height: 200px;
    }

    .itinerary-attractions li.mvcol2 iframe {
        height: 232px;
    }
}

@media screen and (max-width: 900px) {

    .style18,
    .style19 {
        /* background-image: none !important; */
        height: auto !important;
        text-align: center;
    }

    .tour-menubox .spfbwrap {
        display: inline-block;
        width: 95px;
        flex: none;
    }

    .tour-menubox .spfbwrap a {
        color: #fff;
        cursor: pointer;
    }

    .tour-menubox .spfbwrap a:hover {
        color: #FFD659
    }
}

@media screen and (max-width: 480px) {
    .tour-hero {
        padding: 2em 1em;
    }

    .tour-menubox {
        width: 480px;
    }
}


/*內容*/

@media screen and (min-width: 480px) {

    .style17-2,
    .style17-3,
    .style17-4 {
        width: 33.3333333333%;
    }

    .style14,
    .style14-3 {
        width: 50%;
    }
}

@media screen and (min-width: 600px) {
    .style17 {
        width: 33.3333333333%;
    }
}

.style14 div,
.style14-2 div,
.style17 div,
.style17-2 div,
.style17-3 div {
    display: none;
}

.style14-3 {
    height: auto;
}

@media screen and (max-width: 1300px) {
    .style14-3 div {
        width: 100%;
        position: relative;
        bottom: 0;
        text-align: center;
        padding: 32vw 6% 6% 6%;
        margin: 0;
        box-sizing: border-box;
        height: 45vw;
    }
}

@media screen and (max-width: 1024px) {
    .style14-3 div {
        height: 47vw;
    }
}

@media screen and (max-width: 900px) {
    .style14-3 div {
        padding: 36vw 6% 6% 6%;
        height: 55vw;
    }

    .style14-3 div h4 {
        font-size: 1rem;
    }

    .style14-3 div p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    .style14-3 div {
        padding: 71vw 6% 6% 6%;
        height: 120vw;
    }
}

@media screen and (min-width: 1300px) {
    .style14-3 div {
        width: 100%;
        position: relative;
        bottom: 0;
        text-align: center;
        padding: 430px 6% 6% 6%;
        margin: 0;
        box-sizing: border-box;
        height: 600px;
    }
}

@media screen and (max-width: 900px) {
    .style17-4 {
        height: 42vw;
    }

    .style17-4 div {
        width: 100%;
        margin: 0;
        padding: 23vw 6% 6% 6%;
        box-sizing: border-box;
        text-align: center;
    }

    .style17-4 div h4 {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .style17-4 div h3 {
        font-size: 0.9rem;
        line-height: 1rem;
    }

    .style17-4 div p {
        font-size: 0.8rem;
        line-height: 1rem;
    }
}

@media screen and (max-width: 700px) {
    .style17-4 {
        width: 100%;
        height: 90vw;
    }

    .style17-4 div {
        padding: 70vw 6% 6% 6%;
        ;
    }
}

@media screen and (max-width: 480px) {
    .style17-4 {
        height: 110vw;
    }

    .style17-4 div {
        padding: 72vw 6% 6% 6%;
        ;
    }
}

@media screen and (min-width: 900px) {
    .style17-4 div {
        width: 100%;
        margin: 0;
        padding: 230px 6% 6% 6%;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 900px) {
    .style17-4 div {
        width: 100%;
        margin: 0;
        padding: 230px 6% 6% 6%;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 1100px) {
    .style17-4 div {
        padding: 260px 6% 6% 6%;
        b
    }
}

@media screen and (min-width: 1300px) {
    .style17-4 div {
        padding: 290px 6% 6% 6%;
    }
}

@media screen and (min-width: 768px) {
    .intro-xslink {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .intro-xslink {
        display: block;
        width: 100%;
        padding: 10px 5px;
        font-size: 1.25rem;
        text-align: center;
        background: #b5916e;
        color: #ffffff;
        box-sizing: border-box;
        border-bottom: 1px solid #dddddd;
        cursor: pointer;
        position: relative;
        clear: both;
    }

    .intro-xslink:after {
        content: " ✚ ";
        position: absolute;
        right: 15px;
        top: 10px;
    }

    .intro-xslinkC {
        height: 1px;
        overflow: hidden;
        padding-top: 1px;
        background: #fff;
        box-sizing: border-box;
    }

    .intro-xslinkC.active {
        height: auto;
        overflow: visible;
        padding-top: 0;
        background: none;
    }

    .tour-menulink.xs-displaynone {
        display: none;
    }

    .tour-menu {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
    }


}

@media screen and (max-width: 1300px) {

    .tours h1.intro-style::before,
    .tours h1.intro-style::after {
        background: none;
        width: 0;
        margin: 0;
    }

    .tours h1.intro-style {
        line-height: 2.3rem;
        padding: 20px 7px;
    }
}

@media screen and (max-width: 768px) {
    .tours h1.intro-style {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .tours h1.intro-style {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }
}


/*itinerary*/

.itinerary-hero+.itinerary-plan {
    padding-top: 40px;
    position: relative;
}

.itinerary-hero+.itinerary-plan:before {
    content: "";
    background: #E9E6E2 url(../images/global-bg-light-yellow1.png) repeat top left;
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

@media screen and (max-width: 1400px) {
    .tours-sidewrap ul {
        border-top-right-radius: 0;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
}

@media screen and (max-width: 900px) {
    .itinerary-hero {
        padding-bottom: 30px;
    }

    .itinerary-hero .hero-content {
        float: none;
    }

    .travel-time .return-date {
        margin: 0;
    }

    .travel-time {
        padding-bottom: 15px;
    }

    .travel-time .year,
    .travel-time .num,
    .travel-time .month,
    .travel-time .day.num,
    .travel-time .day,
    .travel-time .for {
        position: relative;
        font-size: 1rem;
        line-height: 1rem;
        padding: 0;
        margin: 0;
        height: auto;
        width: auto;
        background: none;
        color: #000000;
        left: auto;
        top: auto;
        right: auto;
    }

    .travel-time .day.num:before {
        width: 0;
        height: 0;
        margin-left: 0;
    }

    .hero-content .tours-price {
        float: none;
        display: block;
        width: 100%;
    }

    .hero-content .tours-price:before {
        content: "售價 :";
    }

    .hero-flag {
        text-align: left;
        padding: 20px 0 0 0;
    }

    .hero-flag .tours-days {
        background: none;
        margin-left: 0;
        width: 25%;
    }

    .hero-flag .tours-days .num {
        display: inline-block;
    }

    .hero-flag .tours-days .day {
        display: inline-block;
        font-size: 1.5rem;
        padding-left: 10px;
    }

    .hero-flag .quota {
        width: 40%;
        padding-top: 23px;
        margin: 0 0 0 15px;
    }

    .hero-flag .quota span {
        display: inline-block;
        font-size: 1.5rem;
    }

    .hero-flag .quota .num {
        display: inline-block;
        font-size: 1.5rem;
        padding-left: 15px;
    }

    .hero-flag .join {
        float: right;
    }

    .slick-slider.weather-board {
        margin: 0 auto;
        float: none;
    }

    .itinerary-list h2.itinerary-date {
        width: 100%;
        height: auto;
        line-height: 0;
        padding: 25px 10px;
        text-align: left;
        font-size: 2.2rem;
        border-bottom: 2px solid #b68f6b;
        border-radius: 0;
        z-index: 1;
        color: #b68f6b;
    }

    .itinerary-list h2.itinerary-date:before,
    .itinerary-list h2.itinerary-date:after {
        width: 0;
        height: 0;
        border: none;
    }

    .fl-fist,
    .fl-sec {
        text-align: left;
    }

    .flight-list span {
        display: inline-block;
    }

    .flight-list span.from-to {
        padding: 7px 20px 0 0;
    }

    .flight-list span.airport {
        padding-top: 7px;
        padding-left: 50px;
        position: relative;
    }

    .flight-list span.airport::before {
        content: "機場 :";
        position: absolute;
        left: 0;
        top: 0;
        color: #bb936f;
        width: 50px;
        text-align: left;
        padding-top: 7px;
    }

    .fl-sec span {
        display: inline-block;
        padding: 7px 15px 0 80px;
        position: relative;
        min-height: 35px;
    }

    .fl-sec span::before {
        position: absolute;
        left: 0;
        top: 0;
        color: #bb936f;
        width: 80px;
        text-align: left;
        padding-top: 7px;
    }

    .fl-sec span.airline::before {
        content: "航空公司 :";
    }

    .fl-sec span.duration::before {
        content: "飛行時間 :";
    }

    .fl-sec span.note::before {
        content: "備註 :";
    }

    .fl-sec span.departure {
        padding: 7px 15px 0 115px;
    }

    .fl-sec span.departure::before {
        content: "航班編號-時間 :";
        width: 110px;
    }

    .fl-sec span.departure span {
        padding: 0 15px 0 0;
        position: relative;
    }

    .fl-sec span.departure span.plane::after {
        content: "-";
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        text-align: left;
    }
}

@media screen and (max-width: 768px) {

    .itinerary-attractions li.col3,
    .itinerary-attractions li.col4 {
        width: 50%;
    }

    .itinerary-attractions li.mvcol3 iframe,
    .itinerary-attractions li.mvcol2 iframe {
        height: 220px;
    }
}

@media screen and (max-width: 600px) {
    .itinerary-hero h1 {
        font-size: 1.5rem;
    }

    .hero-content .tours-price,
    .hero-flag .quota {
        font-size: 1.5rem;
        padding-top: 10px;
    }

    .hero-content .tours-price .symbol {
        padding-left: 70px;
    }

    .hero-flag .quota {
        width: 52%;
    }

    .hero-flag .tours-days {
        width: auto;
    }

    .hero-flag .tours-days .num {
        font-size: 1.5rem;
    }

    .hero-flag .tours-days .day,
    .hero-flag .quota span,
    .hero-flag .quota .num {
        font-size: 1.2rem;
    }

    .hero-flag .join {
        float: none;
        width: 100%;
        background: #b9916e;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        height: auto;
        padding: 15px 10px;
    }

    .hero-flag .join:before {
        width: 0;
        height: 0;
    }

    .report-distance .traffic {
        width: 100%;
    }

    .itinerary-content h3 {
        font-size: 1.25rem;
    }

    .attraction-scenic .as-mv {
        background-image: url(../images/icon-mv.png);
        background-position: 0 0;
        width: 28px;
        height: 28px;
        display: inline-block;
        background-size: cover;
    }

    .attraction-scenic .as-mv:hover {
        background-position: 0 bottom;
        width: 28px;
        height: 28px;
    }

    .attraction-scenic .as-mv a {
        width: 28px;
        height: 28px;
    }

    .attraction-scenic .as-place a {
        font-size: 0.8rem;
        padding: 0 10px;
    }

    .attraction-scenic .as-place a:hover {
        padding: 0 10px;
    }

    .tours-sidewrap ul {
        width: 45px;
    }

    .tours-sidewrap .talk,
    .tours-sidewrap .feature,
    .tours-sidewrap .date,
    .tours-sidewrap .ask,
    .tours-sidewrap .join,
    .tours-sidewrap .ind-service,
    .tours-sidewrap .top,
    .tours-sidewrap .over {

        height: 50px;
        margin: 0 auto;
        background-size: contain;
    }
}

@media screen and (max-width: 640px) {

    .itinerary-attractions li.mvcol3 iframe,
    .itinerary-attractions li.mvcol2 iframe {
        height: 200px;
    }
}

@media screen and (max-width: 480px) {

    .itinerary-attractions li.col2,
    .itinerary-attractions li.col3,
    .itinerary-attractions li.col4 {
        width: 100%;
        overflow: hidden;
        margin-bottom: 4%;
    }

    .itinerary-attractions li.mvcol3 iframe,
    .itinerary-attractions li.mvcol2 iframe {
        height: 275px;
    }

    .itinerary-content h3 {
        font-size: 1.2rem;
    }

    .tours-sidewrap ul {
        width: 100%;
        height: 50px;
        left: 0;
        bottom: 0;
        flex-wrap: nowrap;
        flex-direction: row;
        border-radius: 0;
    }

    .tours-sidewrap li {
        background: none;
        width: 25%;
        float: left;
    }

    .tours-sidewrap .ind-service {
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topright: 0;
        border-top-right-radius: 0;

    }

    .tours-sidewrap li.btmline {
        background-image: none;
    }

    .tours-sidewrap li:nth-of-type(1) {
        order: 6;
        border-radius: 0;
    }

    .tours-sidewrap li:nth-of-type(2) {
        order: 1;
    }

    .tours-sidewrap li:nth-of-type(3) {
        order: 2;
    }

    .tours-sidewrap li:nth-of-type(4) {
        order: 3;
    }


    .flight-list span {
        display: block;
    }

    .flight-list span span {
        display: inline-block;
    }

    .white_content .close {
        right: 0;
    }
}

@media screen and (max-width: 320px) {

    .itinerary-attractions li.mvcol3 iframe,
    .itinerary-attractions li.mvcol2 iframe {
        height: 200px;
    }
}


/*選單固定上方左右滑動*/


/*.menu-LRC{
    margin: 0 auto;
    font-size: 0;
}
.menu-LR-box{
    width: 140px;
    font-size: 16px;
}
.menu-remind{
    display: none;
}
@media screen and (max-width: 1024px) {
    .menu-LR{
        height: 48px;
    }
    .menu-LRC{
        height: 48px;
        position: absolute;
        left: 0;
        top: 0;
        list-style: none;
        font-size: 0;
        padding: 0;
        margin: 0;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}*/


/*出團表*/

@media screen and (max-width: 992px) {
    .tours-filter li:nth-of-type(1) {
        display: block;
    }

    .tours-filter:before,
    .tours-filter:after {
        background: none;
    }

    .hero-content .tour-newbox {
        margin-top: 20px;
    }
}

@media screen and (max-width: 600px) {

    .tours-filter li,
    .form-group label {
        display: block;
    }

    .tours-filter li+li {
        margin: 0
    }

    .tm-month {
        padding-top: 5px;
    }

    .tours-filter .form-group input[type="date"] {
        width: 100px;
        padding: 5px 0;
    }

    .ui-widget-content {
        left: 0 !important;
        width: 90% !important;
    }
}

.lightbox {
    position: fixed;
    top: -100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    z-index: 99999999999;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    overflow: hidden
}

.lightbox .lightbox-body {
    width: 90%;
    height: 0;
    background: #fff;
    color: #333;
    margin: auto;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 0%;
    max-width: 0%;
    border: 3px solid #fff;
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    -moz-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s
}

.lightbox-show.show {
    opacity: 1;
    top: 0;
    bottom: 0
}

.lightbox-show.show .lightbox-body {
    height: 670px;
    max-height: 90vh;
    max-width: 1200px
}

.lightbox-show.show .lightbox-body.lightbox-sm {
    max-width: 870px;
    height: 500px
}

@media (max-width: 1024px) {
    .lightbox-show.show .lightbox-body.lightbox-sm {
        height: auto
    }
}

.lightbox-show.show .lightbox-close {
    top: 10px
}

.lightbox-close {
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    color: #666666;
    position: absolute;
    top: 30px;
    right: 20px;
    -moz-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s
}

.lightbox-close:before,
.lightbox-close:after {
    content: " ";
    display: block;
    height: 30px;
    width: 1px;
    background: #666666;
    position: absolute;
    right: 10px;
    top: 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.lightbox-close:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.lightbox-closeC {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.lightbox-content {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: scroll
}

.lightbox-content::-webkit-scrollbar {
    width: 7px
}

.lightbox-content::-webkit-scrollbar-track {
    background-color: #ccc;
    border-left: 1px solid #ccc
}

.lightbox-content::-webkit-scrollbar-thumb {
    background-color: #999
}

.lightbox-content::-webkit-scrollbar-thumb:hover {
    background-color: #aaa
}

.lightbox-content iframe {
    width: 100%;
    height: 600px;
    max-height: 80vh;
}

.lightbox-content #js-lbtitle {
    text-align: center;
    padding: 10px;
}

@media (max-width: 768px) {
    .lightbox-content #js-lbtitle {
        text-align: center;
        padding: 5px;
        font-size: 1rem;
    }

    .lightbox-show.show .lightbox-close {
        top: 0;
    }
}

table.showborder td {
    border: solid !important;
    border-color: inherit !important;
}

.tour-menubox {}

@media (min-width: 976px) {
    .tour-menu .tour-menulink a {
        padding-right: 10px;
        padding-left: 10px;
    }

    .tours-ov-menu.left {
        text-align: center;
    }
}

@media (min-width: 1024px) {
    .tour-menu .tour-menubox {
        padding-right: 100px;
        padding-left: 100px;
        justify-content: space-around;
        width: initial;
    }

    .tour-menu .tour-menubox.totalnum {
        padding-right: 200px;
        padding-left: 200px;
    }

    .tour-menu .tour-menulink {
        margin-right: 0;
    }

    .tour-menu .tour-menulink>a {
        padding-right: 10px;
        padding-left: 10px;
    }

    .tour-menubox .spfbwrap {
        padding-left: 0;
    }
}

@media (min-width: 1280px) {
    .tour-menu .tour-menulink>a {
        padding-right: 25px;
        padding-left: 25px;
    }

    .tour-menu .tour-menubox.totalnum {
        padding-right: 250px;
        padding-left: 250px;
    }
}


@media (min-width: 2000px) {
    /* .tours-ov{
        min-height: 1000px;
    } */
}

.load-wrap {}

.load-box {
    /* width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333;
    text-align: center;
    z-index: 999999999;
    display: none; */

    width: 100%;
    /* height:100vh; */
    display: block;
    position: absolute;
    left: 0;
    top: 0;

}

/* .load-box:before{
    content: '';
    width: 0;
    height: 100%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
} */


.loader {
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

.loader .mail-txt {
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: relative;
    top: 50%;
}

.timer {
    width: 48px;
    height: 48px;
    /* background-color: #fc0; */
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 50%;
    position: relative;
    margin: 35px auto;
    top: 50%;
    margin-top: -25px;
}

.timer:after {
    width: 20px;
    height: 3px;
    top: 22px;
    left: 22px;
    position: absolute;
    -webkit-transform-origin: 1px 1px;
    -moz-transform-origin: 1px 1px;
    transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
    -moz-animation: minhand 2s linear infinite;
    animation: minhand 2s linear infinite;
    content: '';
    background-color: #fff;
}

.timer:before {
    width: 16px;
    height: 3px;
    top: 22px;
    left: 22px;
    position: absolute;
    content: '';
    -webkit-transform-origin: 1px 1px;
    -moz-transform-origin: 1px 1px;
    transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
    -moz-animation: hrhand 8s linear infinite;
    animation: hrhand 8s linear infinite;
    background-color: #fff;
}

@-webkit-keyframes minhand {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes minhand {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@keyframes minhand {
    0% {
        transform: rotate(0deg)
    }

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

@-webkit-keyframes hrhand {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes hrhand {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@keyframes hrhand {
    0% {
        transform: rotate(0deg)
    }

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

.photorace {
    display: none !important;
}

/* 20200612 */


.spots .sot-detail {
    margin-bottom: 20px;
}

.spots .sot-detail p {
    font-size: .8125rem;
    line-height: 1.5em;
    color: #666;
}

.spots {
    padding: 20px 10px 0 10px;
}

.spots figure {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 80%;
    margin: 0 10px 0 0;
}

.spots figure img {
    display: block;
    overflow: hidden;
}

.spots .my-gallery {
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.spots .spot-detail {
    margin-bottom: 20px;
    padding: 20px 0;
}

.spots .spot-detail h5 {
    color: #816741;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.25rem;
    white-space: normal;
}

.spots .spot-detail .en-name {
    color: #816741;
    margin-bottom: 20px;
    white-space: normal;
}

.spots .spot-detail p {
    line-height: 160%;
    white-space: normal;
}

.spots .spot-detail .des {
    display: none;
    font-size: .9375rem
}

/* .spots.spots-1{ padding: 0 20px 20px 20px;} */
.spots.spots-1 figure {
    margin: 0;
    width: 100%;
}

.spots .spot-detail .unesco {
    position: relative;
}

.spots .spot-detail .unesco:before {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url(../images/unesco-brown.svg);
    background-repeat: no-repeat;
    background-size: 36px auto;
    background-position: center bottom;
    position: absolute;
    top: 0;
    left: 10px;
}

@media (min-width: 768px) {
    .spots figure {
        width: 49%;
        float: left;
        margin: 0 0 2% 0;
    }

    .spots figure:nth-of-type(2n+1) {
        margin: 0 2% 2% 0;
        clear: both;
    }

    .spots .spot-detail .des {
        display: block;
    }

    .spots .my-gallery {
        display: block;
        white-space: normal;
        overflow-x: hidden;
    }

    .spots.spots-1 {
        position: relative;
    }

    .spots.spots-1 figure {
        margin: 0 0;
    }

    .spots.spots-1 figure img {
        width: 50%;
    }

    .spots.spots-1 .spot-detail {
        box-sizing: border-box;
        width: 50%;
        right: 0;
        top: 0;
        padding: 50px;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    .spots.spots-3 {}

    .spots.spots-3 figure {
        width: 32%;
        margin: 0 0 2% 2%;
    }

    .spots.spots-3 figure:nth-of-type(2n+1) {
        margin: 0 0 2% 2%;
        clear: none;
    }

    .spots.spots-3 figure:first-of-type {
        clear: both;
        margin: 0 0 2% 0;
    }
}



/* 20200713 */
.newnotice-box {
    padding: 30px 5% 50px 5%;
    line-height: 180%;
}

.newnotice-box .section-header {
    font-size: 20px;
    text-align: center;
    color: #00265D;
    line-height: 180%;
    font-weight: 400;
    margin-bottom: 20px;
    position: relative;
    letter-spacing: 5px;
}

.newnotice-box .section-header:before {
    content: "";
    display: block;
    height: 7.6mm;
    width: 7.6mm;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 2.4mm;
    background: url(../images/icon-s-header.svg) no-repeat center center;
    background-size: contain;
}

.newnotice-box .section-header:after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background-color: #00265D;
    border-radius: 3px;
    margin-top:5px;

    
}
.newnotice-box .section-header span{font-size: 13px;
    color: #bd9b6d;
    position: absolute;
    right: 0;
    font-weight: 500;
    letter-spacing: 1px;}

.newnotice-box ul li{
    position: relative;
    padding-left: 1em;
    text-justify: auto;
    text-justify: distribute;
    text-align: justify;
    text-rendering: geometricPrecision;
    text-justify: inter-ideograph;
}
.newnotice-box ul li:before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #bd9b6d;
    position: absolute;
    left: 0;
    top: 10px;
}
.newnotice-box ol li{display: list-item;}
.newnotice-box ul li ol li{list-style-type: decimal;margin-left: 20px;padding-left: 0;}
.newnotice-box ul li ol li:before{ display: none;}
@media (min-width: 1280px) {
    .newnotice-box {
        padding: 50px 10% 50px 10%;
    }
}


@media (min-width: 1024px) {
    .pc-subnavi .fornews {
        width: calc(100% - 200px);
    }
}


.tours-sidewrap .serv-navi{
    left:unset;
    right:0;
    top:unset;
    bottom:60px;
}
@media screen and (min-width: 640px) {
   
    .tours-sidewrap .serv-navi {
        right:70px;
        bottom:unset;
       
       
    }
    .tours-sidewrap .serv-navi dl{
      padding-top:10px;
    
    }
    .tours-sidewrap .serv-navi dd{
      padding:20px 10px;
      border-bottom:1px solid #81603B;
    }
    .tours-sidewrap .serv-navi dd:last-child{
        border:none;
    }
    .tours-sidewrap ul{
        bottom:unset;
        top:50%;
        transform: translateY(-50%);
        margin-top:0;
    }
}
/*20230419*/
.i-btn{
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    vertical-align: middle;
    position: relative;

}
.i-btn:hover{
    opacity: .8;
}
.i-btn:after{
    position: absolute;
    content: '';
    display: inline-block;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    border-right: 1px solid #ADA191;
    margin-right: 0.5rem;
}
.i-btn.leftRange{
    margin-left:20px;
}
.i-btn.noline:after{
    display: none;
}
.i-instagram{
    background-image: url(../images/i-ig.svg);
    width: 28px;
    height: 28px;
}
.i-podcast{
    background-image: url(../images/i-podcast.svg);
    width: 28px;
    height: 28px;
}
.i-facebook{
    background-image: url(../images/i-facebook.svg);
    width: 28px;
    height: 28px;
}
.i-youtube{
    background-image: url(../images/i-youtube.svg);
    width: 28px;
    height: 28px;
}
.i-channel{
    background-image: url(../images/i-channel.svg);
    width: 28px;
    height: 24px;
    background-position: left top;
}

.page-side-pc{

}
.player-share-social{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top:20px;
}
.player-share-social a{
    margin-right: 10px;
    opacity: .5;
}
.player-share-social a:hover{
    opacity: 1;
}
.rel{
    position: relative;
}

.mb-footer-side-navi{
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    height: 60px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cdaf94+1,765e3f+96 */
    background: #cdaf94;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cdaf94 1%, #765e3f 96%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cdaf94 1%, #765e3f 96%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#cdaf94', endColorstr='#765e3f', GradientType=0);
    /* IE6-9 */
    color: #fff;
    /* border: 1px solid #A88C70; */

    
}
.mb-footer-side-navi a{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex:1;
    /* padding: 30px 0 10px 0; */
    font-size: 8px;
    color: #fff;
    -webkit-text-size-adjust: none;
    position: relative;
}
.mb-footer-side-navi a.bluebg{
    background-color: #39AE41;
}
.mb-footer-side-navi a i{
    background-repeat: no-repeat;
    background-position: center top;
    width: 32px;
    height: 28px;
     transform: scale(1.15);
}
.mb-footer-side-navi a i.mail{
    /* background-image: url(../images/i-f-form.svg); */
}
.mb-footer-side-navi a i.share{
    /* background-image: url(../images/i-f-share.svg); */
}
.mb-footer-side-navi a i.line{
    /* background-image: url(../images/i-f-line.svg); */
}
.mb-footer-side-navi a i.lecture{
    /* background-image: url(../images/i-f-lecture.svg); */
}
.mb-footer-side-navi a i.discount{
    /* background-image: url(../images/i-f-discount.svg); */
}
.mb-footer-side-navi a i font{
    transform: scale(1);
    /* font-size:12px; */
}
.mb-line-box{}


/* .mb-line-outer{
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 100%;
    height: 0;
    left:0;
    top:-50px;
    z-index: 1;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    visibility: hidden;
    opacity: 0;
}
.mb-line-outer.is-active{
    display: flex;
    left:0;
    transition: .5s;
    visibility: visible;
    opacity: 1;
    height: 100%;
    top: 0
}
.mb-line-close{
    background: url(../images/i-line-close.svg);
    width: 50px;
    height: 50px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:30px;
    transform: translate(-50%,-50%);
    display: inline-block;
} */
/* .mb-line-location{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.mb-line-location a{
    background-color: #AE8A62;
    border-radius: 45px;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color:#fff;
    font-size:20px;
    margin:0 10px;
    opacity: 0;
    -webkit-transition: transform .4s ease, opacity .5s ease;
    -moz-transition: transform .4s ease, opacity .5s ease;
    transition: transform .4s ease, opacity .5s ease;


    
}
.mb-line-location a:nth-child(1){
    transform: translate(100px, 100px);
   
}
.mb-line-location a:nth-child(2){
    transform: translate(0, 140px);
}
.mb-line-location a:nth-child(3){
    transform: translate(-100px, 100px);
}

@media screen and (min-width: 1301px) {
   .mb-footer-side-navi{
    display: none;
   }
}
.mb-line-outer.is-active .mb-line-location a{
   
    opacity: 1;
    -webkit-transform: translate(0)!important;
    -moz-transform: translate(0)!important;
    transform: translate(0)!important;
    
}
.mb-line-outer.is-active .mb-line-location a:nth-child(1){
    margin-top: 40px;
    transition-delay: .3s;

}
.mb-line-outer.is-active .mb-line-location a:nth-child(2){
    transition-delay: .6s;
}
.mb-line-outer.is-active .mb-line-location a:nth-child(3){
   
    transition-delay: .9s;
    margin-top: 40px;
}
 */
 /* 初始通用設定（不動） */
.mb-line-location {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 40px;
}

.mb-line-top,
.mb-line-bottom {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.mb-line-location a {
    background-color: #AE8A62;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: transform .6s ease, opacity .6s ease;
}

/* 下排白色按鈕 */
.mb-line-bottom a {
    background-color: #AE8A62;
    color: #fff;
    font-weight: bold;
}

/* 飛出時位置（中間版距離） */

/* 上排左 台北 */
.mb-line-outer.is-active .mb-line-top a:nth-child(1) {
    transform: translate(calc(-90px - 50%), calc(-50px - 50%));
    opacity: 1;
    transition-delay: 0.2s;
}

/* 上排中 新竹 */
.mb-line-outer.is-active .mb-line-top a:nth-child(2) {
    transform: translate(-50%, calc(-100px - 50%));
    opacity: 1;
    transition-delay: 0.4s;
}

/* 上排右 台中 */
.mb-line-outer.is-active .mb-line-top a:nth-child(3) {
    transform: translate(calc(90px - 50%), calc(-50px - 50%));
    opacity: 1;
    transition-delay: 0.6s;
}

/* 下排左 台南 */
.mb-line-outer.is-active .mb-line-bottom a:nth-child(1) {
    transform: translate(calc(-70px - 50%), calc(50px - 50%));
    opacity: 1;
    transition-delay: 0.8s;
}

/* 下排右 高雄 */
.mb-line-outer.is-active .mb-line-bottom a:nth-child(2) {
    transform: translate(calc(70px - 50%), calc(50px - 50%));
    opacity: 1;
    transition-delay: 1s;
}

/* 背景遮罩（不變） */
.mb-line-outer {
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 100%;
    height: 0;
    left: 0;
    top: -50px;
    z-index: 1;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    visibility: hidden;
    opacity: 0;
}

.mb-line-outer.is-active {
    display: flex;
    left: 0;
    transition: .5s;
    visibility: visible;
    opacity: 1;
    height: 100%;
    top: 0;
}

.mb-line-close {
    background: url(../images/i-line-close.svg);
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}

@media screen and (min-width: 1301px) {
    .mb-footer-side-navi {
        display: none;
    }
}



.inside_con{ padding:10px 0; min-height: 300px;}

.banner04{ width: 100%;}
.banner04 img{ width: 100%; vertical-align: bottom;}

.cent02{padding: 1.5% 2%;  background-color: #252525;border-top: 4px solid #FFCC33; color: #fff; display: flex;  align-items: center;  justify-content: space-between;}
.cent02_l{}
.cent02_l .h1{display: flex;  align-items: center;}
.cent02_l .h1 h1{ font-size: 32px;font-family: 'bt';}
.cent02_l .h1 span{ font-size:22.4px; margin: 0 10px;font-family: 'bt';}
.cent02_l .h2{display: flex;  align-items: center;font-family: 'bt';}
.cent02_l .h2 span{ font-size: 16px; margin-right: 10px;}
.cent02_l .h4{ margin-left: 10px;}
.cent02_l .h4 i{ margin-right: 5px;}


.cent02_r{}
.cent02_r .h1{}
.cent02_r .h1 a{display: block;background: #39ae41;color: #fff;font-size: 19.2px;height: 38px;max-width: 300px;text-align:center;position:relative;}
.cent02_r .h1 a span{display:inline;z-index: 2;position: relative;line-height: 38px;}
.cent02_r .h1 a:before {
    background: #FFCC33 !important ;
}
.cent02_r .h1 a:before{
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  .cent02_r .h1 a:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.cent02_r .h2{ margin-top: 10px; color: #a4a4a4;}
.cent02_r .h2 a{ color: #fff;}
@media only screen and (max-width: 980px) {
    .cent02{flex-wrap: wrap; padding: 5%;}
    .cent02_l{ width: 100%;}
    .cent02_l .h1{flex-wrap: wrap; }
    .cent02_l .h2{flex-wrap: wrap;margin-top: 4%; }
    .cent02_l .h1 h1{ font-size: 20px;}
    .cent02_r { width: 100%; margin-top: 4%;}
    .cent02_r .h1 a{ }
}


.list3-bg{ background: #fff; display: flex;  flex-wrap: wrap;justify-content: space-between;}
/* .list3_r section{ height: 100vh;} */
.list3_r{width:calc(100% - 22%); box-sizing: border-box; padding-right: 2%;}
.list3{ width: 20%; background: #f2f2f2; box-sizing: border-box; padding: 2%; text-align: center;}
.list3 ul li{ padding: 3% 0;font-family: 'bt';}
.list3 ul li a{ font-size: 17.6px; color: #000;}
.list3 ul li.active a{font-weight: bold;}
.heg{ display: flex; justify-content: center;  align-items: center; border-top: 1px #ccc solid; padding-top: 10px; margin-top: 10px;}
.heg a{ width: 22px; height: auto; display:block; margin: 0  10px;}
.heg a img{ width:100%; vertical-align: bottom;}
.list3 .scroll-nav{position:sticky;top: 0; right: 0; }


.tite01{ display: flex;   align-items: center;justify-content: space-between;}
.tite01 .h1{ font-size: 25.6px; color: #000;font-family: 'bt';}
.tite01 .h2{}
.tite01 .h2 span{ font-size: 17.6px;}
.tite01 .h2 i{}
.icon-jia1:before {content: "\f067";}
.icon-jianshao:before {content: "\f068";}

@media only screen and (max-width: 980px) {
    .list3-bg{flex-wrap: wrap; }
    .list3{ width: 100%;}
    .list3 .scroll-nav{ position: relative;}
    .list3_r{ width: 100%; padding: 5%; box-sizing: border-box;}
}

.cent03{ margin-top: 3%;}
.cent03 .img{margin: 0 auto 3%; text-align:center;}
.cent03 .img img{ max-width: 100%; vertical-align: bottom;}
.ul-attribute{ margin-top: 2%;    line-height: 25px;}
.ul-attribute ul{padding: 0; margin: 0; list-style: none !important;}
.ul-attribute ul > li { background: url(../images/origin_1.png) no-repeat !important; background-size: 6px 6px !important;
background-position: 3px 10px !important;  } 
.ul-attribute ul li { line-height: 28px; background-position: 5px 10px !important;   padding-left: 17px; }
.ul-attribute ul > li ul > li { background: url(../images/origin_2.png) no-repeat !important; background-position: 3px 10px !important;  background-size: 8px 7px !important; }





.cent05{ margin-top: 3%;}
.cent05 .h1{ text-align:center;font-size: 25.6px;    border-bottom: 1px #ddd solid;    padding-bottom: 15px;
  margin-bottom: 20px; color: #000;font-family: 'bt';}

.newsclass_list { margin-top: 0.63rem;    line-height: 25px; }
.newsclass_list ul li { float: left; width: calc((100% - 40px)/3); margin: 0 0 0px 20px; background: #fff; }
.newsclass_list ul li:nth-child(3n-2) { margin-left: 0; clear: left; }
.newsclass_list ul li .nr_box {border: 1px solid #e6e6e6;/* border-radius:10px; */overflow: hidden;transition: all .3s ease;/* box-shadow: 0px 0px 15px #ccc; */}
.newsclass_list ul li:hover .nr_box {/* border-color: var(--primary-color); *//* box-shadow: 0 0 10px rgba(0,0,0,.1); */}
.newsclass_list ul li .img { padding-bottom: 70%; position: relative; overflow: hidden; background: #f9f9f9; }
.newsclass_list ul li .img img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto; transition: all .3s ease; }
.newsclass_list ul li .txtbg {color: #000;}
.newsclass_list ul li .txt {padding: 2% 4%;}
.newsclass_list ul li .txt .h2 {font-size: 16px;line-height: 1.5em;height: 1.5em;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.newsclass_list ul li .txt .h3 {font-size: 16px;display: flex;align-items: center; margin-bottom: 8px;}
.newsclass_list ul li .txt .h3 span{ margin:0 10px; display:block}
.newsclass_list ul li .txt .price{ display: flex;  align-items: center;}
.newsclass_list ul li .time { font-size: 16px; line-height: 24px; color: #666; padding-left:24px;  position: relative; }
.newsclass_list ul li .time i { width: 20px; height: 24px; background: url(../images/de.png) center no-repeat; position: absolute; left: 0; top: 0; background-size: cover; }
@media only screen and (max-width: 980px) {
.newsclass_list ul li { float: left; width: 100%; margin: 0 0 20px 0px; }
/*.newsclass_list ul li:nth-child(2n-1){ margin-left:0; clear:left;}*/
.newsclass_list ul li .txt {  }
.newsclass_list ul li .txt .h2 { font-size: 14px; line-height: 1.5em; height: 1.5em; margin-bottom: 5px; }
.newsclass_list ul li .txt .h3 { font-size: 12px;  }
}




.cent04{ margin: 3% auto;}

.inside_con{ padding:10px 40px; min-height: 300px;}
.clear{ margin:0; padding:0; font-size:0; clear:both; }

.sxd .shortcut2-list h3{ min-height:inherit; margin: 0;font-family: 'bt';}
.sxd .shortcut2-list li{ min-height:inherit}
.sxd .shortcut2-list a{ height:auto;  }