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

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


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

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

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

#web-outer {
	max-width: 2000px;
	overflow: hidden;
    background:#f9f9f9;
}

/*h1,h2,h3 { display:none; }*/

/*----header------*/

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

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

.bg-main-top { background: url("../images/header-deco01.jpg") center top no-repeat ;}
.bg-main-bom { background: #dfeef5 url("../images/header-deco02.png") center bottom no-repeat; padding-bottom: 50px; }

.main-outer { width: 100%;  margin:0 auto; /*padding-bottom: 50px; display: block;*/ }

.main-title { position: relative; display:inline-block; width:32%; z-index: 300; vertical-align:top; }
.main-title p { text-align: right; margin-right: 33%; margin-top: 50px; }

.main-pic { position: relative;  display:inline-block; width:76%;  z-index: 100; margin-left: -10%;}
.main-pic span { display: block; margin-right: 16%;}
.main-pic p { margin-top: -90px; margin-left: 8%; text-align: right; }

/*.main-title p img , .main-pic p img  { max-width: 100%; display: inline-blocks;}*/

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


.first { padding-top:120px; margin-top: -120px;}
.second { padding-top:90px; margin-top: -90px;}

#map { position: relative;  margin:0 auto; background: #ffffff; }
.bg-map { background: #ffffff url("../images/bg-map.png") center bottom no-repeat; padding:50px 0; }

.block-center {
	width: 100%;
	margin: auto;
	clear: both;
	position: relative;  
}
/*商品區塊*/

.block-product {
	width: 100%;
	clear: both;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#map.block-product {
	padding: 0 0 0 0;
}
.map-title { display: inline-block; position: absolute; right: 0; }
.map-title-xs { display: none;}
.map-space {
	width: 100%;
	clear: both;
   /* margin: 36px 0;*/
}

.map-space .block-center {
	max-width: 768px;
	min-height: 642px;
	background:url("../images/map-line.png") center center no-repeat;
}

a.map-pin {
	position: absolute;
	display: inline-block;
	max-width: 207px;
	height: 207px;
	width: 100%;
}

.map-location1 {
	left: 0px;
    top: 20px;
}

.map-location2 {
	right: 50px;
    top: 280px;
}

.map-location3 {
	left: 20px;
    top: 350px;
}

.map-pin img {
	border-radius: 15px;
	border: 1px solid #dfeef5;
}

.map-pin span {
	border: 2px solid #ffffff;
	color: #7a7a7a;
	text-align: center;
	border-radius: 0 20px;
	display: grid;
    align-items: center;
    padding:12px 10px;
	font-size: 18px;
	font-weight: bold;
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif; 
    z-index: 1;
    margin-bottom: 6px;
}
.map-pin span.light-orange {
    background: #e6d9c7;
}
a.map-pin:hover span.light-orange {
	background: #cb9448;
}

.map-pin span.green {
    background: #ced7ab;
}
a.map-pin:hover span.green {
	background: #7f8b4e;
}

.map-pin span.blue {
    background: #bcdde6;
}
a.map-pin:hover span.blue {
	background: #34a5c4;
}

a.map-pin:hover span {
	border: 2px solid #050505;
	color: #ffffff;
}
.map-space a { text-decoration: none;}

.bg-n-top,.bg-c-top,.bg-s-top  { background: url("../images/bg-ct.jpg") left top repeat-x; padding-top:50px;}
.bg-n-bom { background: #f7f1e8 ; padding-bottom: 50px; }
.bg-c-bom { background: #f1f4e6 ; padding-bottom: 50px; }
.bg-s-bom { background: #def2f7 ; padding-bottom: 50px; }

/*.spot-box { display: flex; flex-wrap: nowrap; margin:0 auto; max-width: 1860px; }
.n-title { flex:0 0 37%; align-items:flex-start;  align-content: stretch;}
.n-spot { flex:0 0 63%; align-items:flex-start;  align-content: stretch; }*/

.spot-box { margin:0 auto; max-width: 1860px; }
.n-title,.c-title,.s-title { display:inline-block; width:34%; vertical-align:top; padding-top: 8%; }
.n-spot,.c-spot,.s-spot { display:inline-block; width:64%; vertical-align:top; }

/*.spot-slider {clear: both;}*/

.bg-n { background: url("../images/bg-n.png") left top no-repeat; }
.bg-c { background: url("../images/bg-c.png") left top no-repeat; }
.bg-s { background: url("../images/bg-s.png") left top no-repeat; }

.tour-box-in { border-radius: 160px 0 0 0; background: #ffffff; margin-top:100px;  margin-left: 13%; padding:20px 100px; }

.n-tour-title,.c-tour-title,.s-tour-title { text-align: center;}
.n-tour-icon,.c-tour-icon,.s-tour-icon { text-align: right; padding-top: 15px;}

.tour-list { text-align: left;  margin:0 1%;  margin-top:20px;}

.tour-list li  { 
    font: 700 17px "微軟正黑體" ; color: #39342c; 
    line-height: 1.8em;
    overflow:hidden;
    border-bottom: 1px solid #d0c594;
    margin-bottom:10px;
    padding:7px 15px;
}

.tour-list li a span.name_l::before {
  content: url('../images/icon01.png');
  padding-right: 6px;
}
.tour-list li a { 
    color: #39342c; text-decoration:none; width: 100%; height:100%; display:flex; 
}
.name_l { width:80%; padding-left: 28px; text-indent: -28px; }
.price_r { width:20%;  text-align: right; color: #39342c; font: 600 13px "微軟正黑體"; }

.tour-list li a span.name_l span { font-style: normal; font: 600 14px "微軟正黑體" ; color:#f45609; text-decoration: none; padding-left:6px; }
  
.tour-list li a span.price_r span { font: 600 24px "微軟正黑體"; color:#f45609;  padding:0 2px; font-family: 'Barlow', sans-serif; }

.more { color: #39342c; font: 600 16px '微軟正黑體'; display: inline-block; float: right;  z-index: 990; }
.more a {color:#fff;background-color: #b9b9b9; border-radius: 0 15px 0 0; padding:5px 10px;text-decoration: none;}
.more a:hover {} 


/*----slick 自訂-----*/

.slick-box .slick-title { 	
    font-size: 28px;
	font-weight: 600;
    color:#000000; 
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif; 
    background: url("../images/curly-line.png") right bottom no-repeat;
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-align: right;
 }
 .slick-box .slick-title span { 	
    font-size: 20px;
	font-weight: 600;
    color:#ba9c19;
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif; 
 }

.slick-box .txt { padding: 15px 0 0px 0; text-align: left; line-height: 26px; color:#000000; font-size: 16px;}


* {
    box-sizing: border-box;
  }

  .slider {
      width: 90%;
      margin: 20px auto;   
      overflow:visible;  
  }

  .slick-slide {
    margin: 0px 20px;
    padding:10px 28px 20px 28px; background: #ffffff;
    box-shadow: rgba(246, 236, 192, 1) 4px 0px 0px;
    border-radius: 0 0 30px 0;
  }

  .slick-slide img {
    width: 100%;
    border-left:6px solid #f6ecc0;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }


  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
  }
  
  .slick-active {
    opacity: 1;
  }

  .slick-current {
    opacity: 1;
  }

.color-c .slick-title { background: url("../images/curly-line-c.png") right bottom no-repeat;}
.color-c .slick-title span { color:#7f9a00; }
.color-c .slick-slide { box-shadow: rgba(229, 237, 191, 1) 4px 0px 0px;} 
.color-c .slick-slide img { border-left:6px solid #e5edbf;}

.color-s .slick-title { background: url("../images/curly-line-s.png") right bottom no-repeat;}
.color-s .slick-title span { color:#0eb1bb; }
.color-s .slick-slide { box-shadow: rgba(195, 227, 236, 1) 4px 0px 0px;} 
.color-s .slick-slide img { border-left:6px solid #cbe6ee;}


  @media only screen and ( max-width:1300px)
  { 
    .slider { width: 96%;}    
    .slick-box .slick-title span {  font-size: 15px; }
    .slick-box .slick-title { font-size: 24px; }
}

  @media only screen and ( max-width:1100px)
  { 
    .slider { width: 100%;}    
    .slick-slide { padding:10px 15px 15px 15px; margin: 0px 15px; }
    .slick-box .txt { font-size: 15px;}   
  }

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


@media only screen and ( max-width:1400px) 
{ 
    .bg-main-top { background: url("../images/header-deco01.jpg") center -160px no-repeat ;}
    .map-title { right: -50px;}

}
@media only screen and ( max-width:1200px) 
{ 
    .map-title { right: -100px; top:-30px}


}

@media only screen and ( max-width:1024px) 
{ 
    .main-title { width:36%; }
    .main-pic {  margin-left: -14%;}
    .main-pic p { margin-top: -40px; }
    .main-title p { margin-right: 40%; }
    .map-title { right: -150px; }
    .map-title img { max-width: 80%; }
}

@media only screen and ( max-width:900px) 
{
    .bg-main-top { background: url("../images/header-deco01.jpg") center -260px no-repeat ;}
    .map-title { right: -170px; }
    .map-title img { max-width: 70%; }
    .n-title,.c-title,.s-title {  width:26%; vertical-align:top; padding-top: 8%; }
    .n-spot,.c-spot,.s-spot { width:72%; vertical-align:top; }
    .bg-n-top,.bg-c-top,.bg-s-top { background: url("../images/bg-ct.jpg") left -300px repeat-x; }
    .slick-slide { margin: 0px 10px;}

    
}
@media only screen and ( max-width:812px) 
{ 
    .main-title { margin-top: 30px; }
    .map-title { display:none; } 
    .map-title-xs { display:block;  text-align: right; }
    .bg-map { padding:0 0 50px 0;  } 
    .map-space { margin-left: 2%; margin-top: -30px;}  
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:0px; margin-top: 0px;}
    .second { padding-top:0px; margin-top: 0px;}
    .map-space { margin-left: 0; margin-top: 0;}  
    a.map-pin {
		position: relative;
        display: inline-block;
        margin: 10px;
        left: unset;
        top: unset;
        bottom: unset;
        right: unset;
	}
	.map-space .block-center {
		display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
		background: transparent;
		min-height: unset;
	}
.main-pic p { margin-top: -20px; }
.main-title p { display: none; }
.bg-main-top { background: url("../images/header-deco01.jpg") center -360px no-repeat ;}

.bg-n-top,.bg-c-top,.bg-s-top  { background: url("../images/bg-ct.jpg") left -160px repeat-x; }
.n-title,.c-title,.s-title { display:block; width:90%; padding-top: 2%; text-align: center;}
.n-spot,.c-spot,.s-spot { display:block; width:100%;}

.tour-box-in { margin-left: 5%; padding:20px 15px; }
.tour-list li a { display: block;}
.name_l { width: 95%; display: block; }
.price_r { width: 100%; display: block; padding-top:10px; text-align: right;}

}

/*---手機版-----*/

@media only screen and (max-width:480px) 
{
    .main-title { width:100%; padding-left: 0px; padding-right: 15px; margin-top: 0px; }
    .main-pic {  width:100%; margin-left: 0; padding-left: 15px;}
    .main-pic span { margin-right: 0;}
    .map-title-xs { padding-left: 30%; }
    a.map-pin {
    width: 100%;
    height: auto;
}
.map-space {
	width: 100%;
	clear: both;
    margin: 16px 0;
}
}

    
@media only screen and (max-width:380px) 
{
    a.map-pin {
        width: 90%;
        height: auto;
    }
}