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


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

@charset "utf-8";
/* CSS Document */
.anchor {
	margin: 0;
	padding: 0;
	margin-top: -122px;
	*margin-top: -90px;
	display: block;
	visibility: hidden;
	float: left;
}
	
#togglenav {
    display: none;
    z-index: 9999;
    position: fixed;
    right: 0;
    overflow: hidden;
    line-height: 35px;
    width: 100%;
    cursor: pointer;
	background:#10F4D5;
}

body{
	margin:0;
	padding:0;
	background:#10F4D5;
	background:url(img/bg2.png);}

#container02{
	width:auto;
	height:auto;
	background:url(img/bg.jpg) center top no-repeat;
	font-family:微軟正黑體,arial;
	}
	
#container1{
	max-width:960px;
	height:auto;
	margin:0 auto;
	overflow:hidden;
	}
#header{
height:590px;
background:url(img/header.png) center top no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
position:relative;}
#header2{
height:590px;
background:url(img/header2.png) center top no-repeat;
background-position: 50% 50%;
background-size: 100% auto;
position:relative;}
#header #vedio{
	position: absolute;
	top: 401px;
	left: 666px;
	z-index: 100;
}
h1,h2,h3{
	display:none;}
#main{width:100%;display: flex;flex-wrap: wrap;flex-direction: row;justify-content:center;}
.goodtravel{
	display:block;
	width:100%;
	font-size:15px;
	text-align:left;
	height:40px;
	line-height:40px;
	margin-bottom:10px;
	margin-top:5px;
	padding-left:10%;
	}


.title{
	display:block;
	margin-top:30px;
	float:left;}	
.pic{width: 100%;}
.tour{
	width:45%;
	height:auto;
	background: #FFFFFF;
	padding:10px;
	margin-bottom:30px;
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
  align-items: center;}

.tour a{text-decoration: none;display: block;width: 100%;}
.tour a:hover{background: #FCFBEF;}
.tour .tour-name{
	display:block;
	line-height:34px;
	color:#3ECCBB;
	font-size:22px;
	font-weight:bold;}
.tour .note{
	display:block;
	height:90px;
	font-size:14px;
	line-height:20px;
	color:#3A534D;}
.tour .go{
	display:block;
	width: 100%;
	text-align:center;
	color: #F86C6E;
	height:40px;
	font-size:20px;
	font-weight:bold;
	line-height:40px;
	text-decoration:none;
	border-bottom: solid 2px #3ECCBB;
	padding-bottom: 10px;}	
.tour .go strong{font-size:30px;margin-left: 3px;}


.city{font-size: 15px;color: #6F6F6F;}

.tour .area{
	display:block;
	text-align:right;
	font-size:13px;
	line-height:30px;
	border: 0;
	letter-spacing: 2px;
	text-align:right;
	color: #686868;}

.tour .video{
	display:block;
	float: left;
	max-width: 25px;
}	




/*下拉後出現的輔助按鈕*/	
#nav {
	width: 100%;
	background:url(img/nav.png);
	height: 103px;
	position: fixed;
	top: 30px;
	left: 0;
	z-index: 999;
	padding-left:30%;
}
#nav ul {
	display:block;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}
#nav li {
	width:99px;
	height:103px;
	text-align:center;
	float:left;
	margin-left:15px;
	
}
#nav li a{
	width: 100%;
	height: 100%;
	display: block;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	line-height:83px;
	color:#FFFFFF;
}
#nav li strong{
	color:#FFFACD;}
#nav li a:hover {border-bottom:groove #E3FBCD 1px;background:url(img/menu-h2.png);}

#nav li.on{background:url(img/menu-h.png);}



#walk{
	width:90%;
	margin:0 auto;
	margin-bottom:20px;}
.wt{
	font-size:16px;
	line-height:28px;
	color:#0B423F;}	

.wt strong{
	font-weight:bold;}

.walk-box{
	display:block;
	width:95%;
	height:auto;
	background:#FFFFFF;
	padding:15px;
	margin-top:15px;
	overflow:hidden;
	clear:both;}	
.walk-box p{
	font-size:14px;
	line-height:24px;
	margin-bottom:15px;}	
.photo{
	display:block;
	width:50%;
	height:300px;
	float:left;}	
	




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


@media screen and (min-width:960px){
.pushy{display:none;}
#phone-title{display:none;}
#togglenav { display:none;}
.menu-btn{display:none;}
}


/*---平板-----*/
@media only screen and (min-width: 769px) and (max-width:960px) {
.pushy{display:none;}
#phone-title{display:none;}
#togglenav { display:none;}
.menu-btn{display:none;}
.goodtravel{display:none;}
}

@media only screen and (max-width:768px) {
	.tour{
	width:80%;}
}
/*---平板-----*/
@media only screen and (min-width: 481px) and (max-width:768px) {
#container02{background-image:none;}
#header{
background:url(img/header1.png) center top no-repeat;
background-position: 50% 0;
background-size: 100% auto;
height:400px;}
#header2{
background:url("img/header2.jpg") center top no-repeat;;
background-position: 50% 0;
background-size: 100% auto;
height:450px;}

.photo{
	width:100%;
	height:auto;
	float:none;}	

#nav{display:none;}	
ul.tabs li.active  {background-image:none;}	
#walk{
	width:100%;
	margin:0 auto;
	margin-bottom:20px;}
.goodtravel{display:none;}	
.tour .video{display:none;}	
}

/*---手機版-----*/
@media only screen and  (min-width: 321px) and (max-width:480px) {
#container02{background-image:none;}
#header{
background:url(img/header1.png) center top no-repeat;;
background-position: 50% 0;
background-size: 100% auto;
height:250px;}
#header2{
background:url("img/header2.jpg") center top no-repeat;;
background-position: 50% 0;
background-size: 100% auto;
height:250px;}

.tour{
	margin:0 auto;
	width:90%;
	height:auto;
	padding:10px;
	margin-left:0;
	float:left;
	margin-top:10px;
	margin-left:1%;}	
.tour .tour-name{
	display:block;
	line-height:30px;
	color:#3ECCBB;
	font-size:14px;
	font-weight:bold;}
.tour .note{
	display:block;
	height:auto;
	font-size:15px;
	line-height:22px;
	letter-spacing: 1px;}

.photo{
	width:100%;
	height:auto;
	float:none;}	

.goodtravel{display:none;}
}

/*---手機版-----*/
@media only screen and (max-width:321px) {
#container02{background-image:none;}
#header{
background:url(img/header1.png) center top no-repeat;;
background-position: 50% 0;
background-size: 100% auto;
height:150px;}
#header2{
background:url("img/header2.jpg") center top no-repeat;;
background-position: 50% 0;
background-size: 100% auto;
height:150px;}
	
.tour{
	display:block;
	width:90%;
	height:auto;
	padding:10px;
	margin-left:0;
	float:left;
	margin-top:10px;
	margin-left:1%;}	
.tour .tour-name{
	display:block;
	line-height:34px;
	color:#3ECCBB;
	font-size:16px;
	font-weight:bold;}
.tour .note{
	display:block;
	height:auto;
	font-size:14px;
	line-height:20px;}
.photo{
	width:100%;
	height:auto;
	float:none;}	

#nav{display:none;}	
ul.tabs li.active  {background-image:none;}	
#walk{
	width:100%;
	margin:0 auto;
	margin-bottom:20px;}

.goodtravel{display:none;}	
			
}