@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

:focus {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  width: 100%;
  image-rendering: -webkit-optimize-contrast;
  display: block;
}

a, img {
  border: none;
}

a {
  text-decoration: none;
  outline: none;
}
a:hover {
  text-decoration: none;
} 

h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

.b-box {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/*wow*/
.wow:first-child {
    visibility: hidden;
}


#web-outer {
    clear: both;
    overflow: hidden;
    min-height: 3000px;
}


.header {
    clear: both;
    overflow: hidden;
}

.header-bg {
    background: url("../img/saga_bg.jpg")top no-repeat;
    height: 820px;
    margin: 0 auto;
    z-index: 50;
}

.mainpic {
    max-width: 900px;
    position: relative;
    margin: 0 auto;
}

.header-title {
    max-width: 450px;
    position: absolute;
    top: 130px;
    left: -10px;
    z-index: 99;
}

.photo-01 {
    max-width: 760px;
    position: absolute;
    top: 40px;
    right: -300px;
    z-index: 30;
}

.photo-02 {
    max-width: 387px;
    position: absolute;
    top: 440px;
    left: 20px;
    z-index: 50;
}

.photo-03 {
    max-width: 409px;
    position: absolute;
    top: 190px;
    right: -500px;
    z-index: 60;
}

.photo-04 {
    max-width: 367px;
    position: absolute;
    top: 280px;
    left: -400px;
    z-index: 50;
}

.photo-05 {
    max-width: 291px;
    position: absolute;
    top: 50px;
    left: -400px;
    z-index: 50;
}

.photo-06 {
    max-width: 285px;
    position: absolute;
    top: 550px;
    right: -600px;
    z-index: 60;
}

.photo-07 {
    max-width: 136px;
    position: absolute;
    top: 190px;
    right: -40px;
    z-index: 60;
}


.floating {
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: rotate(-6deg);
    }

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

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

@-webkit-keyframes floating {
    0% {
        -webkit-transform: rotate(-6deg);
    }

    50% {
        -webkit-transform: rotate(4deg);
    }

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

.header-md {
    display: none;
    max-width: 768px;
}

/*-------------------------------------選單---------------------------------------------*/
#main-nav {
    z-index: 990;
    overflow: hidden;
    clear: both;
}

.block_menu {
    z-index: 990;
    width: 100%;
    text-align: center;
    font-family: "微軟正黑體", "黑體", Arial, Helvetica, sans-serif;
    height: 88px;
    padding-top: 0;
    background: url("../img/nav_bg.jpg") top no-repeat;
}

.sticky {
    top: 40px;
}

#nav {
    position: relative;
}

#nav ul {}

#nav li {
    display: inline-block;
    margin-right: 10px;
}

#nav li a {
    display: inline-block;
}

.menu_box {}

.menu {}

.menu01 {}

.menu01 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") 0 0 no-repeat;
}

.menu01 a:hover,
.menu01 a.active {
    background: url("../img/nav.png") 0 -88px;
}

.menu02 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -90px 0 no-repeat;
}

.menu02 a:hover,
.menu02 a.active {
    background: url("../img/nav.png") -90px -88px;
}

.menu03 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -180px 0 no-repeat;
}

.menu03 a:hover,
.menu03 a.active {
    background: url("../img/nav.png") -180px -88px;
}

.menu04 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -270px 0 no-repeat;
}

.menu04 a:hover,
.menu04 a.active {
    background: url("../img/nav.png") -270px -88px;
}

.menu05 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -360px 0 no-repeat;
}

.menu05 a:hover,
.menu05 a.active {
    background: url("../img/nav.png") -360px -88px;
}

.menu06 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -450px 0 no-repeat;
}

.menu06 a:hover,
.menu06 a.active {
    background: url("../img/nav.png") -450px -88px;
}

.menu07 a {
    width: 90px;
    height: 88px;
    text-indent: -5000px;
    background: url("../img/nav.png") -540px 0 no-repeat;
}

.menu07 a:hover,
.menu07 a.active {
    background: url("../img/nav.png") -540px -88px;
}

.active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.header-content {
    width: 100%;
    margin-top: -15px;
}

.header-pic {}

/*錨點*/
.block-first {
    overflow: hidden;
    padding-top: 80px;
    margin-top: -80px;
}

.block-first02 {
    overflow: hidden;
    padding-top: 150px;
    margin-top: -120px;
}

.left {
    float: left;
}

.right {
    float: right;
}


.big-title {
    max-width: 180px;
    margin: 0 auto;
    padding: 0 0 30px 0;
}

.small-title {
    max-width: 314px;
    padding: 10px 10px 30px 10px;
}

.bg-blank {
    background: url("../img/bg_blank.jpg") top no-repeat;
}

.bg-blank02 {
    background: url("../img/bg_blank.jpg") bottom no-repeat;
}

.bg-line {
    background: url("../img/bg_line.png") top repeat;
}

.bg-01 {
    width: 100%;
    background-color: #f4efe4;
}

.bg-02 {
    width: 100%;
    background-color: #f9eee5;
    margin-top: -120px;
}

.bg-03 {
    width: 100%;
    background-color: #f3eedc;
    margin-top: -120px;
}

.bg-04 {
    width: 100%;
    background: #e9efe0 url("../img/leaf.png") top no-repeat;
    margin-top: -120px;
}

.bg-05 {
    width: 100%;
    background: #feecec url("../img/bg_01.png") top repeat;
}

.bg-06 {
    width: 100%;
    background: url("../img/bg_02.png") left no-repeat;
}

.common {
    padding: 60px 0 0 0;
}

.common-02 {
    padding: 80px 0 0 0;
}

.common-03 {
    padding: 170px 0 0 0;
}

/*旅行*/
.tour_from {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 80px 0;
}

.tour_list_box ul {
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

.tour_list_box li {
    font-size: 18px;
    line-height: 1.2em;
    border-bottom: 1px solid #ccbea0;
    padding: 10px 0;
}

.tour_list_box p.txt {
    margin-top: 10px;
    display: inline-block;
    font-size: 15px;
    color: #fff;
    background-color: #318ba1;
    border-radius: 10px;
    font-weight: bold;
    padding: 8px 10px;

}

.tour_list_box p.txt2 {
    margin-top: 10px;
    display: inline-block;
    font-size: 15px;
    color: #fff;
    background-color: #7aa62d;
    border-radius: 10px;
    font-weight: bold;
    padding: 8px 10px;
}

.tour_list_box p.txt3 {
    margin-top: 10px;
    display: block;
    font-size: 15px;
    color: #318ba1;
    border-radius: 10px;
    font-weight: bold;
    padding: 8px 10px;

}

.tour_list_box p.txt4 {
    margin-top: 10px;
    display: inline-block;
    font-size: 15px;
    color: #fff;
    background-color: #c1af4a;
    border-radius: 10px;
    font-weight: bold;
    padding: 8px 10px;
}


.tour_list_box li em {
    color: #318ba1;
    font-style: normal;
    padding-left: 6px;
    font-size: 15px;
}

.tour_list_box li em2 {
    color: #73a527;
    font-style: normal;
    padding-left: 6px;
    font-size: 15px;
}

.tour_list_box .price {
    font-size: 15px;
    line-height: 1.2em;
    color: #be1430;
    font-weight: bold;
    float: right;
}

.tour_list_box .price strong {
    font-size: 18px;
    line-height: 1.2em;

}

.tour_list_box li a {
    color: #505050;
    text-decoration: none;
    display: block;
    overflow: hidden;
    padding: 3px 5px;
    font-weight: bold;
    border-left: #9e936c 3px solid;
}

.tour_list_box li a:hover {}

/*景色*/
.main-box {
    max-width: 1500px;
    margin: 0 auto;
}

.spot_top {
    width: 100%;
    background: url("../img/spot_bg01.png") top repeat-x;
    height: 19px;
}

.spot_bottom {
    width: 100%;
    background: url("../img/spot_bg02.png") bottom repeat-x;
    height: 19px;
}

.tab_wrap {
    margin: 0 auto;
}

ul.etabs {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    clear: both;
    overflow: hidden;
}

ul.etabs li {
    /*float: left;
	position: relative;
	text-indent:-5000px;*/
    display: inline-block;
    margin: 10px 5px;
    text-align: center;
    overflow: hidden;
    clear: both;
}

ul.etabs li p {
    font-size: 18px;
    line-height: 40px;
    height: 40px;
}

ul.etabs li span {
    font-size: 18px;
    line-height: 25px;
    height: 50px;
}

ul.etabs li a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #d8d8d8;
}

ul.etabs li a:hover {
    color: #424242;
    background-color: #d0e8e2;
}

ul.etabs li .active {
    color: #424242;
    background-color: #d0e8e2;
}

.tab_container {
    max-width: 90%;
    margin: 0 auto;
}

div.tab_container {
    clear: both;
    overflow: hidden;
    width: 100%;
}

div.tab_container .tab_content {
    background-color: #fff;
}

.tab_box {
    width: 100%;
    padding: 20px 0;
    clear: both;
    overflow: hidden;
}

.tab_box_l {
    width: 38%;
    float: left;
    padding-top: 3%;
    padding-left: 10px;
    padding-right: 10px;
}

.tab_box_l span {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2em;
    color: #64b19c;
    display: flex;
}

.tab_box_l span img{
    width: auto;
}

.tab_box_l p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 2em;
    color: #424242;
}

.tab_box_l .small {
    margin-top: 5%;
}

.tab_box_r {
    width: 60%;
    float: right;
}

.tab_box_r img {
    border-radius: 10px;
}

/*共同*/
.saga_from {
    max-width: 1700px;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
}

.saga_from02 {
    max-width: 1600px;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
}

.saga_left {
    float: left;
}

.saga_right {
    float: right;
}

/*泡湯*/
.hot_box {
    width: 100%;
    padding: 150px 10px 30px 10px;
    clear: both;
    overflow: hidden;
}

.hot_box_txt {
    width: 45%;
}

.hot_box_txt .text_hot_box {
    width: 98%;
    clear: both;
    overflow: hidden;
}

.text_hot_box .girl01 {
    float: left;
    width: 38%;
    padding-right: 1%;
    padding-left: 1%;
}

.text_hot_box .text {
    float: right;
    width: 60%;
    padding-top: 5%;
}

.text_hot_box .text span {
    max-width: 168px;
}

.text img{
    width: auto;
}

.text_hot_box .text p {
    color: #424242;
    font-size: 15px;
    line-height: 2em;
    border-left: #bd9575 1px solid;
    padding: 5px 5px 5px 10px;
}

.hot_box_img {
    padding: 30px 10px 10px 10px;
}

.hot_box_ph {
    width: 55%;
}

/*器皿*/
.porcelain_box {
    width: 100%;
    padding: 150px 10px 30px 10px;
    clear: both;
    overflow: hidden;
}

.porcelain_box_txt {
    width: 46%;
}

.porcelain_box_txt .text_por_box {
    width: 98%;
    clear: both;
    overflow: hidden;
}

.text_por_box .girl01 {
    float: left;
    width: 37%;
    padding-right: 1%;
    padding-left: 2%;
}

.text_por_box .text {
    float: right;
    width: 60%;
    padding-top: 5%;
}

.text_por_box .text span {
    max-width: 168px;
}

.text_por_box .text p {
    color: #424242;
    font-size: 15px;
    line-height: 2em;
    border-left: #9a906c 1px solid;
    padding: 5px 5px 5px 10px;
}

.por_box_img {
    padding: 30px 10px 10px 10px;
}

.porcelain_ph {
    width: 53%;
}

/*茶香*/
.tea_box {
    width: 100%;
    padding: 150px 10px 30px 10px;
    clear: both;
    overflow: hidden;
}

.tea_box_txt {
    width: 48%;
}

.tea_box_txt .text_tea_box {
    width: 98%;
    clear: both;
    overflow: hidden;
}

.text_tea_box .girl01 {
    float: left;
    width: 37%;
    padding-right: 1%;
    padding-left: 2%;
}

.text_tea_box .text {
    float: right;
    width: 60%;
    padding-top: 2%;
}

.text_tea_box .text span {
    max-width: 168px;
}

.text_tea_box .text p {
    color: #424242;
    font-size: 15px;
    line-height: 2em;
    border-left: #8ea270 1px solid;
    padding: 5px 5px 5px 10px;
}

.tea_box_img {
    padding: 30px 10px 10px 10px;
}

.tea_ph {
    width: 51%;
}

/*美食*/
.food-from {
    max-width: 1500px;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
    text-align: center;
    padding: 30px 0 80px 0;
}

.ct30 {
    width: 28%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-right: 15px;
}

.food-box {}

.food-ph {}

.food-txt {
    width: 80%;
    background-color: #fff;
    padding: 50px 5% 5% 5%;
    margin: -40px auto 0;
    border-radius: 10px;
    min-height: 180px;
}

.food-txt .title {
    max-width: 311px;
}

.food-txt p {
    color: #424242;
    font-size: 15px;
    font-weight: 600;
    line-height: 2em;
    padding-top: 10px;
}

.food-txt span {
    background-color: #424242;
    color: #fff;
    display: block;
    padding: 5px;
    margin-top: 10px;
    line-height: 1.8em;
}

.food-txt span a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.food-txt span a:hover {
    padding-left: 10px;
}

/*影音*/
.video-from {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 80px 0;
}

.video-box {
    width: 100%;
    border: 10px #fff solid;
}

.video {
    width: 100%;
    height: 500px;
}

@media screen and (max-width: 1700px) {
    .bg-06 {
        background: none;
    }
}

@media screen and (max-width: 1300px) {
    .tab_box_l {
        width: 35%;
    }

    .tab_box_l .small {
        display: none;
    }

    .tab_box_r {
        width: 62%;
    }

    .saga_from {
        max-width: inherit;
        width: 80%;
    }

    .saga_from02 {
        max-width: inherit;
        width: 80%;
    }

    .saga_left {
        float: inherit;
    }

    .saga_right {
        float: inherit;
    }

    .hot_box_txt {
        width: 95%;
        margin: 0 auto;
    }

    .text_hot_box .girl01 {
        width: 30%;
    }

    .text_hot_box .text {
        width: 68%;
        padding-top: 1%;
    }

    .hot_box_ph {
        width: 95%;
        margin: 0 auto;
        padding-top: 10px;
    }


    .porcelain_box_txt {
        width: 95%;
    }

    .text_por_box .girl01 {
        width: 30%;
    }

    .text_por_box .text {
        width: 67%;
        padding-top: 1%;
    }

    .porcelain_ph {
        width: 95%;
        margin: 0 auto;
        padding-top: 10px;
    }

    .tea_box_txt {
        width: 90%;
        margin: 0 auto;
    }

    .text_tea_box .girl01 {
        width: 30%;
    }

    .text_tea_box .text {
        width: 67%;
        padding-top: 1%;
    }

    .tea_ph {
        width: 85%;
        margin: 0 auto;
        padding-top: 10px;
    }

    .video-box {
        width: 90%;
        margin: 0 auto;
    }

}


@media screen and (max-width: 1000px) {
    .main-box {
        max-width: inherit;
        width: 80%;
    }

    ul.etabs {
        width: 90%;
    }

    .tab_box_l {
        width: 90%;
        float: inherit;
        margin: 0 auto;
        padding-bottom: 10px;
    }

    .tab_box_r {
        width: 95%;
        float: inherit;
        margin: 0 auto;
    }
}

@media screen and (max-width: 956px) {
    .saga_from {
        max-width: inherit;
        width: 95%;
    }

    .saga_from02 {
        max-width: inherit;
        width: 95%;
    }

    .tour_list_box li a {
        border-left: inherit;
    }

    .tour_list_box .price {
        float: inherit;
        display: block;
        text-align: center;
        margin-top: 5px;
    }

}

@media screen and (max-width: 768px) {
    .header { padding-top: 40px;}

    .header-bg {
        display: none;
    }

    .header-md {
        display: block;
    }

    #main-nav {
        display: none;
    }

    .block_menu {
        display: none;
    }

    /*錨點*/
    .block-first {
        padding-top: 0;
        margin-top: 0;
    }

    .block-first02 {
        padding-top: 0;
        margin-top: 0;
    }

    .tour_list_box li {
        font-size: 15px;
        line-height: 1.5em;
    }

    .tour_list_box li em {
        font-size: 13px;
    }

    .tour_list_box li em2 {
        font-size: 13px;
    }

    .common-02 {
        padding: 50px 0 0 0;
    }

    .main-box {
        width: 90%;
    }

    ul.etabs {
        width: 100%;
    }

    .food-from {
        max-width: inherit;
        width: 80%;
    }

    .ct30 {
        width: 90%;
        margin: 20px auto;
    }

    .food-txt {
        min-height: inherit;
    }

}

@media (max-width: 600px) {
    .text_hot_box .girl01 {
        display: none;
    }

    .text_hot_box .text {
        width: 100%;
    }

    .text_por_box .girl01 {
        display: none;
    }

    .text_por_box .text {
        width: 100%;
    }

    .text_tea_box .girl01 {
        display: none;
    }

    .text_tea_box .text {
        width: 100%;
    }

}


@media (max-width: 480px) {
    .common {
        padding: 20px 0 0 0;
    }

    .tour_list_box li em2 {
        display: block;
        padding-left: 0;
    }

    ul.etabs {
        /*text-align: left;*/
    }

    ul.etabs li p {
        font-size: 15px;
        line-height: 25px;
        height: 25px;
    }

    ul.etabs li a {
        padding: 5px;
        width: 90px;
        margin: 0px;
    }

    .food-from {
        width: 90%;
    }

    .video {
        height: 350px;
    }

}

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