@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
    background-color: #ffecd1;    
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.8em;
	font-size:15px;
    color:#363636;
    background: url("images/bg.png") center top repeat;
}

h1,h2,h3 { display:none; }


/*======================
====Main CSS=====
=======================*/

#theme-nav { margin-top: 30px;  overflow: hidden; }

.col20 { width:20% ; display: inline-block; vertical-align: top;  margin-right: -4px; background: #fd7035; height: 90px;  }
.col80 { width:80% ; display: inline-block; vertical-align: top;  margin-right: -4px; background: #e66677; height: 90px; }
.logo { padding: 1.5vh 2.5vw; line-height: 90px; }

.theme-list li { 
    display: inline-block;/*padding-right: 25px; */
    color: #ffffff; font: 500 22px "微軟正黑體";   line-height: 90px; vertical-align:middle;padding-right: 10px;
}
.icon {  padding-left:6px; vertical-align:text-bottom;}
.icon02 { padding-left:10px; padding-right:0;}    

.theme-list li a { 
    color: #ffffff; width:100%; height: 100%; text-decoration:none;
}
.theme-list li a:hover { 
    color:#ffc600;
}


.mainpic { overflow: hidden;   }
.mainpic-xs { display: none; max-width: 100%;}
.main-bg {  
    background:url('images/bg-header.jpg') no-repeat; background-size: Contain; background-size: 100% auto ; 
    padding-bottom:20px;
  }

.mainpic-in { max-width: 100%; }

.ct50 { width:50%; display: inline-block; margin-right: -4px; vertical-align:middle; }

.p1 { margin-top:30vh; padding-left: 1.5vw; max-width: 45%;  }
.p2 { padding-left: 1.2vw; margin-top:2%; max-width: 43%;  }
.p3 { padding-left: 5vw; max-width: 43%; }

.main-title { margin-left: 6vw; padding-right: 10vw; margin-top:-20px; }


/*======================
====nav CSS=====
=======================*/

#main-nav {
    z-index: 990;
    overflow: hidden;
 }
 
 .block_menu {
     width: 100%;
     text-align:center;
     font-family:'Noto Serif TC', serif,Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     height: 77px;
     background:#fcf9ef;
     z-index: 990;
 }
 
 .sticky { top: 30px; }
 
#nav li { display:inline-block;  }
#nav li a { display: inline-block;  }
#nav li img { vertical-align:middle; margin-top: -10px; padding-right: 8px;}
 
 .menu {  margin-right: 8px; line-height: 77px;  }
 .menu a { color: #443500; text-decoration:none; font: 600 18px "微軟正黑體";  }
 .menu a:hover, .menu a.active { color:#ff4b00;  }
 
 .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);
 }
  /*------------*/

#hotel-top { padding-top:130px; margin-top: -130px; }
  
/* #hotel-north,#hotel-central,#hotel-south,#hotel-east,#hotel-island,#travel-top,#travel-north,#travel-central,#travel-south,#travel-east,#travel-island { padding-top:110px; margin-top: -110px; } */

/*---------hotel-top------*/

.row { max-width: 960px; margin:0 auto; background: #e66677;}

.ct40 { width: 40%; display: inline-block; vertical-align: middle;  margin-right: -4px;}
.ct60 { width: 60%; display: inline-block; vertical-align: middle;  margin-right: -4px;}

.hotel-title { position:relative; z-index: 500;}

.hotel-top-box {
    background:url('images/hotel-bg.png') 0 0 no-repeat; background-size: Contain; background-size: 100% auto ;   
    min-height: 900px; 
    margin-top:-200px;
    padding-bottom:50px;
}

.travel-top-box {
    background:url('images/travel-bg.png') 0 0 no-repeat; background-size: Contain; background-size: 100% auto ;   
    min-height: 900px; 
    margin-top:-200px;
    padding-bottom:50px;
}

.box40 { width:40%; display: inline-block; margin-right: -4px; vertical-align:text-top; }
.box50 { width:50%; display: inline-block; margin-right: -4px; vertical-align:text-top; }

.box-in { margin:1vh 1vw;  }
.box-in a { text-decoration: none; width: 100%;}
.box-left { margin-left: 9%; }
.box-right { margin-right: 9%; }

.content { margin-top:-80px; z-index: 200; position:relative; }
.h-icon span  { font: 500 24px "微軟正黑體"; color:#fff;   }
.h-icon { 
    background:url('images/style-icon01.png') center top no-repeat;  width: 94px; height: 113px; text-align: center; 
    padding-top:14px; line-height: 1.6em; z-index: 300; position: relative; margin-left: 75%;
 }


 .pt01 { margin-top:30px;}

.h-pic { max-width: 800px;  }
.h-name { margin-top:-8px; background: #535353; color:#fff; font: 600 28px "微軟正黑體"; line-height: 48px; border-bottom:6px #fd7035 solid; text-align: right; padding: 2px 10px; }
.pink01 { border-bottom:6px #d40f7d solid; }

.h-price { background: #ffe4c3;  padding:2px 10px;   }
.pink02 { background: #ffd3ec;}

.p-name { color:#616161; font: 600 18px "微軟正黑體"; width: 70%; display: inline-block; margin-right: -4px;  vertical-align:middle; }

.price { color:#ff4b00; font: 600 16px "微軟正黑體"; width: 30%; display: inline-block; margin-right: -4px; vertical-align:middle;  text-align: right;}
.pink03 { color:#d40f7d; }
.price span { font: 600 32px "微軟正黑體"; }

.h-info { background: #fff7ed; font: 500 15px "微軟正黑體"; padding:20px; color:#313131; }
.pink04 { background: #ffebf6;}

/*-------------hotel-------*/

#bg-yallow-dark { background:#ffd8a4; }

.h-n-bg { background: url('images/hotel-bg04.png')  no-repeat right 50px;  }
.h-n-bg2 { background: url('images/hotel-bg05.png')  no-repeat right 50px;  }
.h-n-bg3 { background: url('images/travel-bg01.png')  no-repeat right 600px;  }
.h-n-bg4 { background: url('images/hotel-bg06.png')  no-repeat right 100px;  }

.hotel-area-box {
    background:url('images/hotel-bg02.png') 0 0 no-repeat; background-size: Contain; background-size: 100% auto ;   
    min-height: 1566px; 
    padding-bottom:50px;
}
.hotel-area-box2 {
    background:url('images/hotel-bg03.png') 0 0 no-repeat; background-size: Contain; background-size: 100% auto ;   
    min-height: 1566px; 
    padding-bottom:50px;
    }
.hotel-area-box > .box:nth-child(2n+1) ,.hotel-area-box2 > .box:nth-child(2n+1) { margin-left: 20%; max-width:28%; }
.hotel-area-box > .box:nth-child(2n) ,.hotel-area-box2 > .box:nth-child(2n)  {  margin-right: 20%;  max-width:28%; margin-top:40px; }

.h-subtitle {
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
}
.t-subtitle { padding:20px; margin-bottom: 20px; text-align: right;}

.g-sytle span { background: #009a44; padding:6px 10px; display: inline; color:#fff; font: 600 18px "微軟正黑體"; }
.b-sytle span { background: #005eb8; padding:6px 10px; display: inline; color:#fff; font: 600 18px "微軟正黑體"; }

.box-border {  
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6bcb82+1,63c0ce+24,bbca69+43,917fdf+62,93b5dd+80,82cfee+100 */
    background: #6bcb82; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #6bcb82 1%, #63c0ce 24%, #bbca69 43%, #917fdf 62%, #93b5dd 80%, #82cfee 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #6bcb82 1%,#63c0ce 24%,#bbca69 43%,#917fdf 62%,#93b5dd 80%,#82cfee 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #6bcb82 1%,#63c0ce 24%,#bbca69 43%,#917fdf 62%,#93b5dd 80%,#82cfee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6bcb82', endColorstr='#82cfee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding:6px; margin-top:6px;
}
.box-white { background: #fff; padding:8px;}
.h-ct { background: #aef2df; text-align: right; padding:10px 15px; margin-top:-10px;}
.h-name02 { color:#363636; font: 600 28px "微軟正黑體"; line-height: 40px; margin-bottom: 5px;}
.p-name02  { color:#363636; font: 600 15px "微軟正黑體"; }
.p-name02 span.p { color:#fff; background: #46b446; padding:2px 4px; margin-right: 6px;  }
.blue span.p { color:#fff; background: #558ff0; padding:2px 4px; margin-right: 6px;  }

.price02 { color:#ff4b00; font: 600 15px "微軟正黑體";}
.price02 span { font: 600 28px "微軟正黑體"; }

.blue2 { background: #b1e0f3;}


/*----tour-box---*/

.pd01 { margin:0 auto; text-align: center;}
.travel-area-box { padding-bottom:50px;}

.box33 { width:33%; display: inline-block;  vertical-align:middle; }

.travel-area-box > .box33:nth-child(4)  { margin-top: -160px; }
.travel-area-box > .box33:nth-child(5)  { margin-top: -160px; }

.travel-w-bg { margin-top:-250px; position: relative; max-width: 90%;}
.t-ct {  position:relative; top:-350px;  text-align: center; max-width: 70%; margin-left: 10%;   }
.t-ct2 {  position:relative; top:-320px;  text-align: center; max-width: 70%; margin-left: 10%;   }

.t-name {  color:#fff; font: 600 28px "微軟正黑體"; line-height: 1.4em;  padding: 2px 10px; }
.t-info { color:#fff; font: 500 15px "微軟正黑體"; line-height: 26px; }
.t-info2 { color:#fff581; font: 500 15px "微軟正黑體"; line-height: 26px;}
.price03 { color:#ffc600; font: 600 16px "微軟正黑體"; padding-top:6px;}
.price03 span { font: 600 36px "微軟正黑體"; }
.line { max-width: 8%; border-top:4px solid #ccc; margin-left: 45%; margin-top:12px;  }

/*生活市集+松果購物活動*/
#active-detail {
    width: 100%;
    clear: both;
    background:url('images/active_bk.png')  #ffdbce top center no-repeat;
    padding: 80px 0;
}

.active-box {
    padding: 30px;
    background: #ffffff;
    margin: 0 auto;
    width: 90%;
    max-width: 970px;
    border: 5px solid #fcba2f;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.active-box ul {
    margin: 0 0 0 20px;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.active-box li {
    list-style: disc;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.active-text {
    margin: 10px 0 0 0;
}

.product-block {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 0 0 0;
}

#pkg {background: #ffd8a4;}

/*------media query----------*/

@media only screen and ( max-width:1850px)
{  
    .p1 { margin-top:25vh; }   
    .main-bg { padding-bottom: 10px; }    
}


@media only screen and ( max-width:1750px)
{  
    .p1 img,.p3 img { max-width: 65%;  }
    .p2 img { max-width: 55%;  }
    .t-ct {  top:-320px; }
    .t-ct2 {  top:-300px; }     
}

@media only screen and ( max-width:1750px)
{  
    .p1 { margin-top:130px;  padding-bottom::80px; }
    .main-bg { padding-bottom:40px;}       
    .t-ct {  top:-300px; }
    .t-ct2 {  top:-280px; }     
    .hotel-area-box ,.hotel-area-box2  { min-height: 1328px; }
}

@media only screen and ( max-width:1500px)
{   
    .logo { padding: 1.3vh 2.5vw; }  
    .hotel-top-box,.travel-top-box { margin-top:-150px; }
    .hotel-top-box {  min-height: auto; padding-bottom:120px;  } 
    .travel-top-box {  min-height: auto; padding-bottom:120px;} 
    .hotel-area-box > .box:nth-child(2n+1) ,.hotel-area-box2 > .box:nth-child(2n+1)  { margin-left: 15%; max-width:33%; }
    .hotel-area-box > .box:nth-child(2n) ,.hotel-area-box2 > .box:nth-child(2n) {  margin-right: 15%;  max-width:33%; }
    .travel-w-bg { margin-top:-150px; }    
    .p-name02 span.w { display:block; line-height: 30px; }
    .p-name02 span.p { margin-right: 0;   }
    .t-ct {  top:-280px; }
    .t-ct2 {  top:-250px; }  
    .pt01 { margin-top:60px;}   
}


@media only screen and ( max-width:1250px)
{
    .travel-w-bg { margin-top:-90px; }
    .t-ct {  top:-250px; }
    .t-ct2 {  top:-220px; }  
    .t-name {  font: 600 24px "微軟正黑體"; line-height: 1.3em; }
    .line { display: none; }
    .price03 { padding-top:0px;}   
}

@media only screen and ( max-width:1150px)
{
   .hotel-top-box,.travel-top-box { margin-top:-120px; }
   .hotel-top-box { background:url('images/hotel-bg-md.png')  0 100px no-repeat;  } 
   .travel-top-box { background:url('images/travel-bg-md.png')  0 100px no-repeat; } 
   .hotel-area-box { background:url('images/hotel-bg02-md.png') 0 0 no-repeat;  }
   .hotel-area-box2 { background:url('images/hotel-bg03-md.png') 0 0 no-repeat;  }
   .h-n-bg { background: url('images/hotel-bg04-md.png')  no-repeat right 50px;  }
   .h-n-bg2 { background: url('images/hotel-bg05-md.png')  no-repeat right 50px;  }   
   .h-n-bg4 { background: url('images/hotel-bg06-md.png')  no-repeat right 50px;  }   
   .h-icon { margin-left: 65%;}
   .h-name { font-size:22px; line-height:40px; }
   .p-name { font-size:15px; }
   .price { font-size:13px; }
   .price span { font-size:24px; }
   .h-info { font-size:14px;  padding:10px 15px; line-height: 1.7em;  }
   .hotel-area-box > .box:nth-child(2n+1) ,.hotel-area-box2 > .box:nth-child(2n+1) { margin-left: 10%; max-width:38%; }
   .hotel-area-box > .box:nth-child(2n) ,.hotel-area-box2 > .box:nth-child(2n) {  margin-right: 10%;  max-width:38%; }
   .t-ct {  top:-220px; }
   .t-ct2 {  top:-190px; }  
   .t-name {  font-size:20px; line-height: 1.2em; }
   .t-info { font-size:13px; line-height: 18px; padding-top:6px;}
   .t-info2 { font-size:12px; line-height: 18px; padding-top:2px;}
   .price03 {font-size:12px; }
   .price03 span { font-size:24px; }  
   .menu a { font-size:16px;  }
}

@media only screen and ( max-width:1024px)
{
    .logo { line-height: 70px;}
    .col20 { width:25%; height: 70px;}
    .col80 { width:75%; height: 70px;}
    .theme-list li { font-size:20px; }
    .icon { max-width:80%;  }  
    .t-ct {  top:-200px; }
    .t-ct2 {  top:-180px; } 
}

@media only screen and ( max-width:960px)
{
    .menu a { font-size:15px;  }
    .p1 { margin-top:130px;  padding-bottom::40px;}  
    .main-bg { padding-bottom:20px;}    
}

@media only screen and ( max-width:900px)
{
    .box33 { width:40%;   }
    .travel-area-box > .box33:nth-child(3)  { margin-top: -160px; }
    .h-n-bg { background: none; }
    .h-n-bg2 { background: none; }  
    .menu a { font-size:13px;  }
    
}

@media only screen and ( max-width:850px)
{
    .box50,.box40 { width:100%; display:block;  }
    .box-left { margin-left: 5%; max-width: 90%; }
    .box-right { margin-left: 5%; max-width: 90%;}
    .hotel-top-box,.travel-top-box { background:none; } 
    .menu {  margin-right: 5px;   }
    .h-icon { margin-left: 70%;}
    .box { width:100%; display:block; max-width: 100%;  }
    .hotel-area-box > .box:nth-child(2n+1) ,.hotel-area-box2 > .box:nth-child(2n+1) { margin-left: 10%; margin-top:40px; max-width: 100%; }
    .hotel-area-box > .box:nth-child(2n) ,.hotel-area-box2 > .box:nth-child(2n) {  margin-right: 0%; margin-left: 10%; max-width: 100%; }
    .hotel-area-box,.hotel-area-box2 { padding-right:15%; }   
    .main-bg { padding-bottom:0px;}    
}
/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .p1 { margin-top:12vh; }  
    #main-nav { display: none;} 
    #theme-nav { display: none; }  
    .main-bg { padding-bottom: 0px; }  
    .h-icon { margin-top:50px;}
    .box33 { width:100%; display:block;  }
    .travel-w-bg { margin-top:-280px; }
    .t-ct {  top:-350px; }
    .t-ct2 {  top:-320px; }  
    .t-name {  font-size:28px; line-height: 1.4em; }
    .t-info { font-size:16px; line-height: 26px; }
    .t-info2 { font-size:16px; line-height: 26px; }
    .price03 span { font-size:32px; }
    .travel-area-box > .box33:nth-child(2)  { margin-top: -160px; }
    .travel-area-box { padding-right:5%; padding-left: 5%;}
    .ct40 { width: 75%;}
    .ct60 { width: 25%;}
}

@media only screen and ( max-width:650px) 
{ 
    .mainpic { display: none;}    
    .mainpic-xs { display: block;}
}

@media only screen and ( max-width:600px) 
{
    .t-ct {  top:-330px; }
    .t-ct2 {  top:-290px; }
    .travel-w-bg { margin-top:-250px; }
    
}

@media only screen and ( max-width:550px) 
{ 
    .t-ct {  top:-300px; }
    .t-ct2 {  top:-260px; }  
    .travel-w-bg { margin-top:-230px; }    
    .hotel-top-box , .travel-top-box { background:none; } 
    .hotel-area-box { background:none; }
    .hotel-area-box2 { background:none; }   
}


@media only screen and ( max-width:500px) 
{ 
    .t-name {  font-size:24px; line-height: 1.3em; }
    .t-info { font-size:13px; line-height: 16px; }
    .t-info2 { font-size:13px; line-height: 16px; }
    .t-ct {  top:-270px; }
    .t-ct2 {  top:-240px; }  
    .travel-area-box > .box33:nth-child(5),.travel-area-box > .box33:nth-child(4) ,.travel-area-box > .box33:nth-child(3),.travel-area-box > .box33:nth-child(2) { margin-top: -110px; }
    .travel-w-bg { margin-top:-160px; }  
    #active-detail {padding: 20px 0;}  
    .product-block {
        padding: 20px 0;
    }   
}
/*---手機版-----*/


@media only screen and ( max-width:480px) 
{ 
    .t-ct {  top:-250px; }
    .h-name02 { font-size:24px; line-height: 32px;}  
    .p-name02 { font-size:14px;  }
    .p-name02 span.w { line-height: 1.3em; margin-top:6px; }
    .p-name02 span.p { line-height: 1.3em;  }
    
}



@media only screen and ( max-width:420px) 
{
    .travel-w-bg { margin-top:-180px; }    
    .t-ct {  top:-220px; }
    .t-ct2 {  top:-210px; }  
    .t-name {  font-size:20px; line-height: 1.3em; }
    .t-info { font-size:12px; line-height: 16px; }
    .t-info2 { font-size:12px; line-height: 16px; }
}


@media only screen and ( max-width:380px) 
{
    .travel-w-bg { margin-top:-140px; }    
    .t-ct {  top:-210px; }
    .t-ct2 {  top:-190px; }  
    .p-name, .price { display: block; width: 100%; text-align: center; }   
}

@media only screen and ( max-width:340px) 
{
    .travel-w-bg { margin-top:-130px; }    
    .t-ct {  top:-200px; }
    .t-ct2 {  top:-180px; }  
    .t-name {  font-size:15px; line-height: 1.3em; }
    .price03 span { font-size:24px; }   
}


@media only screen and ( max-width:320px) 
{
    .travel-w-bg { margin-top:-120px; }    
    .t-ct {  top:-190px; }
    .t-ct2 {  top:-170px; }  
}

@media only screen and ( max-width:300px) 
{
    .travel-w-bg { margin-top:-110px; }    
    .t-ct {  top:-170px; }
    .t-ct2 {  top:-150px; }  
}