@charset "utf-8";
html,body{ position:relative; height:100%;}
body{font-size:13px; font-family:Arial,'Microsoft JhengHei', Helvetica, sans-serif; }
a{ color:#360;}
p{ margin:0 0 1.2em 0;overflow:hidden;}
h3{ margin:0.5em 0 0.3em 0; overflow:hidden;}
.wrapper{position:relative;font-size:0.9em; line-height:1.2em; overflow:hidden;/*min-height:100%;*/}
.icon{ font-size:1.8em; background:url(images/menuicon.png) no-repeat 0 0; background-size:2em auto; width:1em; height:1em; display:block; margin:0 auto;}
.traffic .icon{background-position:0 0;}
.hotel .icon{background-position:0 -1em;}
.attraction .icon{background-position:0 -2em;}
.route .icon{background-position:0 -3em;}
.specialty .icon{background-position:0 -4em;}
.news .icon{background-position:0 -5em;}
.about .icon{background-position:0 -6em;}
#masthead {font-size:2em;}
.header{position:relative; z-index:3; height:11.3em;}
.header .fixed{ position: fixed; top:0; width:100%; background:#fff;}
#header{ position:relative; background:no-repeat center center; background-size:cover;font-size:0.8em;}
#header .logo a{ display:block; width:20em; height:8.5em; background:url(../../images/logo.png); background-size: 20em auto; margin:0;text-indent: -9999px; position: relative;}
#header nav{ position:absolute; right:0; bottom:0.5em;}
#header nav li{ float:left; margin:0 0.5em 0 0;}
#header nav li a{display:block; background:#9fb200; border:0.15em solid #FFF; color:#FFF; text-align:center;
font-size:1.7em; padding:0.3em 0;width:3em; line-height:1.2em; border-radius:0.3em; font-weight:bold;}
#header nav li a:hover{background:#F60;}
#content{ font-size:1em; margin:0 0 2em 0; position:relative; z-index:2;}

#menu{position: relative;width:100%; font-size:0.6em; background:#FFF; box-shadow:0 0 0.5em 0 #000; border-top:1px solid #fff; z-index:3; overflow:hidden;}
#menu ul{ height:100%; position:relative;}
#menu li{ float:left; width:25%;position:relative;}
#menu li a{display:block;border-left:1px solid #FFF;border-bottom:1px solid #FFF; color:#FFF; text-align:center;position:relative;font-weight:bold;
font-size:2em; padding:0.4em 0em; line-height:1.2em;}
#menu li .icon{ display:none;}
#default #menu{box-shadow: none;font-size:1em;}
#default #menu li .icon{ display: block;}
#default #menu li{height: 100%;}
#default #menu li a{height: 100%;font-size:2.6em;}
#default #menu li a.landscape{font-size:2.0em;}
#default #menu li a > span{ position: absolute; top:50%; margin:-2.1em 1em 0; left:0; right:0;}
#default #menu li a.landscape > span{ margin:-1.6em 0 0;}


/* menu 3個字在上方時 加上 class="menu-small" */
#default #menu li a > .menu-small{margin:-2.1em 0.5em 0;}
#default #menu li a.landscape > .menu-small{ margin:-1.6em 0 0;}

/*  */
h1.title{ border-bottom:0.15em solid #9fb200; font-size:1.5em; line-height:1.3em; overflow:hidden;
padding:0.6em 0 0 0.1em; background:#fff;}
h1.title a{color:#000;}
.title .icon{ float:left; position:relative; height:0.89em; margin:-0.2em 0.1em 0 0; font-size:1.9em;}
#traffic .title .icon{background-position:-1em -0em;}
#hotel .title .icon{background-position:-1em -1em;}
#hotel_search .title .icon{background-position:-1em -1em;}
#attraction .title .icon{background-position:-1em -2em;}
#route .title .icon{background-position:-1em -3em;}
#specialty .title .icon{background-position:-1em -4em;}
#news .title .icon{background-position:-1em -5em;}
#abouts .title .icon{background-position:-1em -6em;}

/*  */
#search{ font-size:1em; padding:0.5em 0.5em;line-height: 2.5em;position:relative;}
select,
option,
input{font-family:Arial,'Microsoft JhengHei', Helvetica, sans-serif; font-size:1em;line-height:1.2em; border-radius:0.3em; vertical-align:middle;}
select,
input{border:1px solid #999; padding:0.1em 0.3em; height:2em;}
select:focus,
input:focus{}
#attraction #search select{ width:49%;}
#attraction #search input[type='text']{width:80.5%;border-radius:0.3em 0 0 0.3em;}
#attraction #search input[type='button']{ background:#FFF url(images/search.png) no-repeat center center; background-size:auto 1.7em;width:17%;border-radius:0 0.3em 0.3em 0; border-left:1px solid #CCC;text-indent: -9999px;}
#attraction #search .top{ display:block; width:50%; position:absolute; top:-2.8em; right:0;}
#hotel #search select,
#hotel_search #search select{ margin:0 0 0.2em 0.2em; width:10.5em;}
#hotel #search input,
#hotel_search #search input{margin:0 auto; width:80%; padding: 0.1em 0;display:block;}
#hotel #search input:hover,
#hotel_search #search input:hover{ background:#CCC;}
#search .room_name input[type='text']{width:90%;border-radius:0.3em 0 0 0.3em;float: left;}
#hotel #search .room_name input[type='button'],
#hotel_search #search .room_name input[type='button']{text-indent: -9999px; background:#FFF url(images/search.png) no-repeat center center; background-size:auto 1.7em;width:8%;border-radius:0 0.3em 0.3em 0; border-left:1px solid #CCC;margin:0 0 0.2em 0;}
#search_rooms .booking{ display:none;}


/*  */
#spot{ font-size:1.18em; line-height:1.5em;}
#spot h2{ font-size:1.2em; padding:0 0 2% 2%;}
#spot li{ float:left; width:96%; margin:0 0 2% 2%; position:relative;}
#spot a{ display:block; padding:0.3em;color:#333;border-radius:0.5em;background:#fff; box-shadow:0px 0px 7px -2px #333; border:1px solid #999;}
#spot a:hover{box-shadow:0px 0px 7px -2px #819000; border:1px solid #ab0;}
#spot img{  height:11.4em;width:100%;border-radius:0.5em;margin:0 0 0 0;}

/*  */
#specialty .lists{ font-size:1.2em; line-height:1.5em;}
#specialty .list{padding:0.3em; border-bottom:1px solid #ccc; overflow:hidden;}
#specialty .pic{ float: right; margin:0 0 0 0.3em;}
#specialty .pic img{ width:6em;}
#specialty .name{ color:#360; font-size:1.2em;}
#specialty .name strong{ display:none;}

/*  */
#about .menus{ font-size:1em; line-height:1.4em; overflow:hidden; position: relative;width:100%; margin:0.4em 0;}
#about .menus a{ display:block; float:left; width:25%; text-align:center; border-left:1px solid #CCC; position:relative; left:-1px; color:#333;text-decoration:underline;}
#about .menus a:hover{text-decoration: none;}
#about div#abouts{ padding:0em 0 1em 0;}
#about div#route,
#about div#specialty,
#about div#traffic{ padding:0em 0 1em 0;}
#tourmap iframe{ border-bottom:1px solid #CCC;}

/* abouts */
#abouts .txt{margin:0.5em 1em; overflow:hidden; font-size:1.1em; line-height:1.5em;}

/* traffic */
#traffic .txt{ margin:0.5em 1em; overflow:hidden; font-size:1.1em; line-height:1.5em;}
#traffic .map a{display:block;width:100%;}
#traffic .map img{width:100%;}

/* route */
#route .lists ul{ font-size:1.4em; line-height:1.5em;}
#route .lists li{  overflow:hidden;padding:0.3em 0.8em; background:#EEE; }
#route .lists .even{ background:#fff;}
#route .lists a{/* padding:0.3em 0.8em; display:block; */ color:#000;}
#route .lists a:hover{text-decoration:underline;}
#route .lists span{display:block; color:#333; font-size:0.8em;}
#route .lists span strong{display:inline-block; background:#777; color:#fff; margin:0 0 0.3em 0; padding:0 0.3em;font-size:0.9em;line-height:1.5em;}
#route .lists img{vertical-align:middle; height:0.8em;}


#news{}
#news .tab{margin:0.5em; overflow:hidden;font-size:1.2em; line-height:1.3em;}
#news .tab h2{ margin:0 0 0.2em;}
#news .tab table{ font-size:1em; width:100%;}
#news .tab td,
#news .tab th{ border:1px solid #999; padding:0.2em; text-align:left;}
#news .tab th{ background:#ccc;}

.gotoTL {
float: right;
margin: 0px 20px;
}

/*  */
#hotel_deals{ padding:0.5em; font-size:1em; line-height:1.5em;}
#hotel_deals h2{font-size:1.5em; line-height:1.5em; border-bottom:2px solid #ccc; }
#hotel_deals .list{padding:0.3em 0; border-bottom:1px solid #ccc; overflow:hidden; position:relative;}
#hotel_deals .list:hover{ background:#EEE;}
#hotel_deals .list a{height:100%;left:0;position:absolute;top:0;width:100%;z-index:2;}
#hotel_deals .pic{position:relative;float:left; margin:0 1% 0 0; width:27%}
#hotel_deals .pic img{width:100%}
#hotel_deals .txt{ float:left; width:72%;}
#hotel_deals h3{ margin:0;font-size:1.1em; line-height:1.5em; color:#036;font-weight: normal;}
#hotel_deals p{margin:0;color:#666;}
#hotel_deals .white{ display:inline-block; width:7.5em; height:1em;}
#hotel_deals .prices{ margin:0; position:absolute; bottom:0.1em; right:0; color:#C00;font-size:1.3em; line-height:1.5em;}

/*  */

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/_inc/js/bootstrap3.1.1/fonts/glyphicons-halflings-regular.eot');
  src: url('/_inc/js/bootstrap3.1.1/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/_inc/js/bootstrap3.1.1/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/_inc/js/bootstrap3.1.1/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/_inc/js/bootstrap3.1.1/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.ui-datepicker {font-size: 0.6em;line-height: 1.2em;}
.ui-datepicker-trigger:before{content: "\e109";}
.ui-datepicker-trigger{ background-image:none;padding:0 !important;display: inline-block;font-family: 'Glyphicons Halflings'; font-size:1em;background: #EEE !important;font-style: normal;font-weight:400;color: #555;text-align: center;border: 1px solid #CCC !important; border-radius:0.3em;position: relative;top: 1px;vertical-align: baseline;text-indent: 0; height:auto !important; width:2em !important;line-height: 1.9em; }

#default #menu li{ width:50%;height: 50%;}
@media screen and (orientation: landscape) and (min-width: 600px){
.wrapper{ font-size:0.32em;}
.header{ height:auto;}
.header .fixed{ position: relative;}
#header{font-size:1.2em;}
#menu{}
#default #menu li{ width:25%;height: 100%;}
#default #menu li a{padding:0 1em;font-size:3.6em;}
#search .hide{ clear:none; display:inline-block; height:1em; width:1em;}
#hotel #search input, #hotel_search #search input{display: inline-block;width:20%;}
#spot{ font-size:1.5em;}
#spot li{width:47%;}
#news_lc_show .picTN{float:left; width:33%;}
#hotel_deals .list{ width:48%; float:left; margin:0 1%;}
#tourmap_hotel li{ float:left; width:50%;}
#top_bar {font-size:1.2em;}
#top_bar .navbar{ width:5em;}
#top_bar .navbar li{ float: left;}
}