@charset "utf-8";
* {font-family:Arial,"Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU, Helvetica, sans-serif;}
body {background:url(../images/bg.png);font-size:12px;}

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

#masthead_promo{font-size:13px;min-width: 990px;}
a{ color:#039;}
#area{width:980px; margin:0 auto;position:relative; z-index:2;font-size:18px;}
#masthead_hotel,#footer_zhtw_mobile,
.clear.mo{ display:none;}

#header{position:relative; height:191px;z-index:1}
#header h1 a{position:absolute;left: 2.5em;top:0; width:650px; height:95px;display:block;}
#header img{float:left;}
#header p{position:absolute;top:130px;left:85px;color:#fff;line-height:150%; width:580px; font-size:0.9em;}
#header .p1{background:url(../images/header.png); position:absolute;top:0;right:10px; width:286px; height:198px; z-index:5;}
#header .Social_area{position:absolute;top:0.2em;right:30%;}
#header .Social_area img{ float:left; margin:0 0.2em 0 0;}
/*
#header .language{position:absolute;top:5px;right:7px; z-index:2;padding:5px 10px;background:url(../images/w_bg.png) 0 -50px;border-radius:5px;box-shadow:2px 2px 5px -3px #000;}
#header .language a{color:#000; margin:0 3px 0 3px;}
#header .language a:hover{color:#900;}
#share{position:absolute; top:5px; right:205px;}
#share img{ margin:0 5px 0 0;}*/

#content{position:relative; margin:0 0 2em 0;z-index: 2;}
#search{border:2px dashed #fff; border-radius:15px;position:relative; z-index:4}
#search .txt{border-radius:10px; font-size:0.9em; margin:5px; background:#ffc200;position:relative; overflow:hidden;}
#search .p2{position:absolute;top:-70px;left:20px;z-index:5;}
#search form{ }
#search form ul{margin:1em 1.7em;}
#search form ul::after{content:" "; display:block; clear:both;}
#search form li{ float:left; width:23%; margin:0 1%;}
#search li > select,
#search li > input,
#search li > button{ border:2px solid #999;border-radius:0.3em; width: 100%;font-size: 1em; height: 2.6em;line-height:1.5em;padding:0.3em;vertical-align:middle; }
#search input{ background: #FFF url(../images/m.png) no-repeat  95% 50%;}
#search li > button{background:#EEE;cursor:pointer;}
#search li > button:hover{background:#DDD;}
.list{position:relative;}
.link{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:9}

.price{color:#000;font-size:0.8em; line-height:1.1em; vertical-align:middle;}
.price em{ color:#C00; font-style:normal; font-size:1.8em;line-height:1em; position:relative;margin:0 0.1em;vertical-align:middle;}
.booking{ display:block;color:#039; text-decoration: underline;border-radius:0.3em}
.booking:hover{color:#C00;}
.region{font-size:0.9em; line-height:1.5em;text-align:center;}
.region a{color:#fff; display:block;}

#hot{position:relative; margin:1em 0 0 0; padding:1em 0 1.3em 0; font-size:0.85em; line-height:1.3em}
#hot .bg1,
#hot .bg2{ z-index:2;background:url(../images/bg3.png); position:absolute; bottom:0px; left:15px; width:480px; height:220px;}
#hot .bg2{ left: inherit;    right: -10px;}
#hot .p1{position:absolute;top:-1em;right:0px;z-index:5;}
#hot .p2{position:absolute;top:-1em;left: -1em;z-index:5;}
#hot .aged,
#hot .pet{height: 34.2em;background:#fff585;float:left; width:480px;position:relative; z-index:3;}
#hot .aged{ background:#fcc; margin:0 20px 0 0;}
#hot h2{ text-align:center; border:2px solid #005685; border-radius:10px;font-family:Arial,'Microsoft JhengHei',PMingLiU, Helvetica, sans-serif; margin:0.6em; overflow:hidden;font-size: 2em; line-height:2em; font-weight:normal;}
#hot .list{margin:0 20px 10px 20px;}
#hot .pic{width:210px; float:left; margin:0 10px 0 0; transition:opacity 0.3s }
#hot .list:hover .pic{ opacity:0.7}
#hot .pic img{width:100%;}
#hot .txt{overflow:hidden;}
#hot h3 {margin:0 0 0.3em 0; font-size:1.2em;line-height:1.3em; font-weight:normal;}
#hot h3 a{ color:#000;}
#hot .booking{ position:absolute;bottom:0.1em;right:0;}
#hot .txt .booking{bottom:0; right:0.3em;}
#hot .list li{ padding:0 0 0.3em 0}
#hot .list .rname{ display:block;line-height:1.3em;  color:#039}
#hot .list a:hover .rname{color:#036}
#hot .list .price{display:block; }
#hot .list .region{ position:absolute; top:10px; left:-5px; font-size:1em;}
#hot .region a{display:block; text-align:center; width:3em}
#hot .pet .region{border:1px solid #fff585}
#hot .pet .region a{background:#f58a00;}
#hot .pet .region a:hover{background:#e76d00;}
#hot .aged .region{border:1px solid #fcc}
#hot .aged .region a{background:#DB4D50;}
#hot .aged .region a:hover{background:#ca3235;}
#hot .ul{margin:0 20px 10px 20px;}
#hot .ul li{border-bottom:1px dashed #999;}
#hot .ul li:hover{border-bottom:1px solid #666;}
#hot .ul li > a{display:block; position:relative; line-height:1.5em; padding:0.6em 0.3em 0.6em 0;}
#hot .ul .hname{ color:#000; font-size:1.2em;line-height:1.3em;}
#hot .ul .price{ position:absolute; right:0; bottom:0.7em;}
#hot .ul .region{ display:block; float:left;margin:0.6em 0.2em 0 0; line-height:1.7em;border:0px none}
#hot .more{ display:block; text-align:right;font-size: 0.9em;padding: 0 1.1em 0 0;}



.box2 article, #hotspring{margin:1em 0 2em 0; display:block; position:relative;overflow:hidden; box-shadow:5px 5px 10px -5px #000;line-height:1.6em}
.box2 .w{ margin:1em; overflow:hidden; background:#FFF; border-radius:10px; padding:1em 0 0.5em 1em;}
.box2 h2{font-family:Arial,'Microsoft JhengHei',PMingLiU, Helvetica, sans-serif;line-height:1.4em;font-weight:normal;font-size: 2em;}
.box2 .p3{position:absolute;top:0;right:0;z-index:5;}

#hotspring{background:url(../images/bg2.png);}
#hotspring .w{padding: 1em 0 0.5em;}
#hotspring h2 {padding: 0 0 0 0.5em;}
#hotspring ul{margin: 0 0 0.5em; overflow:hidden; font-size:0.91em;}
#hotspring li{float: left; line-height:1.5em; margin:0 0.1em 0 0}
#hotspring li a{ display:block; border-radius:0.5em; padding:0 0.48em; color:#000;}
#hotspring li a:hover{background:#ccc;}
#hotspring li.on a{background:#fcc;}
#hotspring .turnturn{position:relative; margin:0.5em 0 0 0;}
#hotspring .prev,
#hotspring .next{ cursor:pointer; position:absolute;top:50%; margin-top:-2em; z-index:2; background:#f65 url(../images/prevnext.png) no-repeat 0 1.4em; background-size: 2em auto; width: 2em; height:4em;}
#hotspring .prev:hover,
#hotspring .next:hover{ background-color:#f43;}
#hotspring .prev{left:0; border-radius:0 0.5em 0.5em 0}
#hotspring .next{right:0; border-radius:0.5em 0 0 0.5em; background-position:0 -4.6em}
#hotspring .lists{ display:none; width:94%; margin:0 0 0 3%;}
#hotspring .lists > div{float:left; width:33.333%; position:relative;}
#hotspring .list{width:272px; margin:0 auto 1em; transition:background-color 0.2s}
#hotspring .list:hover{ background-color:rgba(0,0,0,0.05)}
#hotspring .region{position:absolute;width: 5em; background:#f65;top:1em; left:-0.3em; z-index:3}
#hotspring h3 a{ font-weight:normal;color:#000;font-size:1.2em; line-height:2em;overflow:hidden; display:block;text-overflow: ellipsis;white-space: nowrap;}
#hotspring h3 a:hover{ color:#039;}
#hotspring .pic{width:100%;transition:opacity 0.2s}
#hotspring .list:hover .pic{ opacity:0.8;}
#hotspring .pic img{width:100%;}
#hotspring .rname{font-size:0.95em; line-height:1.2em; overflow:hidden; display:block;text-overflow: ellipsis;white-space: nowrap;}
#hotspring .rname a:hover{ color:#000;}
#hotspring .rate{ display:block; text-align: right; color:#666; font-size:0.9em; line-height:1.5em;}
#hotspring .types{padding: 0.5em 0 0 0;display:block;}
#hotspring .before_price{ display: inline-block;text-decoration: line-through;font-kerning: initial;font-size: 1.2em;}
#hotspring .price{display: inline-block;color: #cc0000; font-size:1em;}
#hotspring .price em{ vertical-align: text-bottom;}
#hotspring .booking{ position:absolute; font-size:0.9em;right:0.2em; bottom:0.2em;}
#hotspring .more{ text-align:right; margin:0 20px 0 0}
#hotspring .more a{}
#hotspring .more a:hover{ color:#000;}

#nccc{background:url(../images/bg1.png);}
#nccc .lists{}
#nccc .list{float:left; width:32.3333%;margin:0.5% 1% 1.5% 0;padding: 0.5em 0.5em 0.5em 0;transition:background-color 0.2s}
#nccc .list:hover{background-color:rgba(0,0,0,0.05);}
#nccc .region a{margin: 0 0.3em 0 0;float:left;width:3em;background:#93b90f;}
#nccc h3 a{ font-weight:normal;color:#000;font-size:1.2em;overflow:hidden; display:block;text-overflow: ellipsis;white-space: nowrap; margin:0 0 0.3em 0;}
#nccc h3 a:hover{ color:#039;}
#nccc .pic{float:left; margin:0 0.5em 0 0;transition:opacity 0.2s}
#nccc .list:hover .pic{ opacity:0.8;}
#nccc .pic a{width:90px; height:71px; display:block; background-size:cover; background-position:center center;}
#nccc .price{ display:block; position:absolute; left:6.8em; bottom:0.5em;}
#nccc .price em{ vertical-align: baseline;}
#nccc .rname{font-size:0.95em; line-height:1.2em}
#nccc .rname a:hover{ color:#000;}
#nccc .booking{ position:absolute; font-size:0.9em;right:0.2em; bottom:0.2em;}
#nccc .more{ text-align:right; margin:0 20px 0 0}
#nccc .more a{}
#nccc .more a:hover{ color:#000;}


#promotions{background:url(../images/bg2.png);margin:2em 0 0 0;}
#promotions ul{margin: 0.5em 0 1em; overflow:hidden; font-size:0.91em;}
#promotions li{float: left; line-height:1.5em; margin:0 0.1em 0 0;}
#promotions li a{ display:block; border-radius:0.5em; padding:0 0.48em; color:#000;}
#promotions li a:hover{background:#ccc;}
#promotions li.on a{background:#fcc;}
#promotions .list{border-top:1px dashed #ccc; margin: 0 20px 0 0;padding:0.4em;transition:background-color 0.2s}
#promotions .list:hover{background-color:rgba(0,0,0,0.05);}
#promotions .list h3{display:block;font-weight:normal;float:left; width:13em; font-size:1em; line-height:1.3em;}
#promotions .list h3 a{ color:#000;}
#promotions .list h3 a:hover{ color:#039;}
#promotions .list .rname{display:block;float:left;font-size:1em; line-height:1.3em;}
#promotions .list .rname a:hover{ color:#000;}
#promotions .list .price{ display:block;margin: 0.1em 0 -0.1em 0; position:relative;color:#000;font-weight:normal; float:right;}
#promotions .list .booking{font-weight:normal; float:right; margin:0 0 0 1em}
#promotions .loading {
	background: url(../images/searchloading.gif) no-repeat center center;
	height: 114px;
	width:100%;
	margin: 0;
	overflow: hidden;
	text-align: center;
}

.roomsearch{background:url(../images/bg2.png);margin:2em 0 0 0;margin:1em 0 0 0; display:block; position:relative;overflow:hidden; box-shadow:5px 5px 10px -5px #000;line-height:1.6em}
#search_rooms{ font-size:15px; margin:1em; overflow:hidden; background:#FFF; border-radius:10px; padding:1em 0 0.5em 1em;}
#search_rooms .search_header,
#search_rooms .rooms_search{ position:relative; width:99%;}
#search_rooms .price{font-size:1em; line-height:1.5em}
#search_rooms .td_booking input{ background-size: auto 4em; } 
#search_rooms .td_booking input:hover{background-position: 0 -2em;}
#search_rooms img { 
    vertical-align: middle;
}
#actweb_roomsrh .search_header{background: #fff; border-bottom:0;}
#actweb_roomsrh{margin: 1em 0 0;}

.box3{ margin:2em 0 0 0; width:100%; overflow:hidden;}
#banner{ width:150%;}
#banner img{ float:left; margin:0 12px 0 0;height: 115px;}

#qr{ position:relative; float:left; background:#fff;width:246px;}
#qr img{ float:left; margin:5px;}
#qr h2{line-height: 1.5em;font-size: 15px;margin: 45px 0 0;}
#qr .qr_bg{display: none;background:url(../images/qr_bg.png) no-repeat; width:144px; height:170px; position:absolute; right:-144px; top:-11px;}

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

.svg_icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7));}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */

.icon-p7 {
  width: 1.0390625em;font-size:8em;
}

.icon-p1 {
  width: 0.994140625em;font-size: 6.5em;
}

.icon-p2 {
  width: 2.04296875em;
}

.icon-p3 {
  width: 0.7880859375em;font-size: 5.3em; transform:rotate(-14deg);
}

.icon-p6 {
  width: 1.255859375em; font-size: 7.5em;
}

.icon-paid-leave_logo {
  width: 4.26171875em;font-size: 8.4em;
}

	#top_bar {font-size:4em;}
@media screen and (min-width: 1366px){
#masthead_promo .mast_width,
#area{width:1300px;}
#header h1 a{left: 95px;}
#header .p1{width: 546px;}
#header p{ left: 135px;}
#header .p2{left: 40px;}
#header .Social_area{right:43.5%;}
#hot{font-size:1em;}
#hot .aged, #hot .pet{width: 640px;}
#hot .bg1 {left: 175px;}
#hot .bg2 {left: 835px;}
#hot .pic {width: 250px;}
#hot .txt{line-height:1.4em}
#hotspring .turnturn{}
#hotspring .list{width:372px;}
#nccc .list{width:23.9%;}
#promotions .inner{}
#banner img{margin:0 20px 0 0;height: 150px;}
#qr{width:290px;}
#qr img{margin:15px;}
#qr h2{font-size: 18px;}
#qr .qr_bg{ display:block;}
}
@media screen and (orientation: portrait),(max-width: 700px){
body {font-size:17px;}
#area{width:85%;font-size:1em;}
#masthead_hotel,#footer_zhtw_mobile,
.clear.mo{ display:block}
#masthead_promo,#new-nav{ display:none;}
#header{ height: auto;}
#header h1 a{position: relative;left: 0;top: 0em;width: 100%;height: auto;}
.icon-paid-leave_logo{    font-size: 6.4em;width: 100%;}
#header .p1 { display:none;}
#header p{ display:none;}
#header .Social_area{ display:none;}
#search .txt{height: auto;}
#search .p2 {top:-4em; left:auto; right:0;}
#search form {  margin:0; font-size:1.3em;}
#search form ul{margin: 1em;}
#search form li{ float:none; width:auto; margin:0 0 0.5em 0}

.link{ display: block;}
.box2 .p3{width:5em; height:4em; background-size:100% auto;}

#hot{ font-size:1em}
#hot .aged, #hot .pet {width: 100%; box-shadow:5px 5px 10px -5px #000; height:auto;}
#hot .pet { margin:2em 0 0 0;}
#hot .bg1, #hot .bg2{ display:none;}
#hot .pic {width: 13em;}
#hot .p1 {}
#hot .p2 {}
.box2{ font-size:1.1em}
#hotspring .lists > div{width:100%;float: none;}
#hotspring .list { width:96%; height:auto; margin:0 auto 2em;}
#hotspring .pic { width:100%;}
#hotspring .rname{ margin:0 0 1.5em;}
#hotspring .turnturn {}
#hotspring h3 a{ margin:0 8em 0 0.2em;}
#hotspring .rname{margin:0 11em 0 0;}
#hotspring .rate{position: absolute;right:0;bottom:0;}

#nccc .lists{font-size:1em;width:99%}
#nccc .list { width:100%;line-height:1.3em; margin: 0.3em 0 0.9em 0;}
#nccc .pic a{height: 3.1em; width:4.4em;}
#nccc .rname {font-size: 1em; line-height:1.5em;overflow:hidden; display:block;text-overflow: ellipsis;white-space: nowrap;}
#nccc .price {left:6em;}
#promotions .inner{ font-size:1em;}
#promotions ul{ font-size:1em}
#promotions .list{padding: 0.7em 0.4em 0.5em 0.4em;}
#promotions .list h3,
#promotions .list .rname{ float:none; width:auto;}
 #promotions .list h3 a{font-size:1.2em;}
 #promotions .list .rname{overflow:hidden; display:block;text-overflow: ellipsis;white-space: nowrap; margin:0 6em 0 0;}
 #promotions .list .price{ position:absolute; right:0; bottom:0.6em;}
#banner{float: none; text-align:center; width:auto;}
#banner img{height: auto; width:46%;margin: 0 2% 4%;}
#qr{ display:none;}
	#top_bar {font-size:3em;}
}
@media screen and (max-width: 600px){
#area{width:95%;}
#search .p2 {top:-2em;}
.icon-p3{font-size: 4.3em}
.icon-p6{font-size: 6em}
.icon-p7{font-size: 5.5em}
#hot h2{ font-size:1.4em}
#hot .list{ margin: 0 0 1em 0}
#hot .ul{ margin: 0}
#hot .ul li{padding: 0 0.5em;}
#hot .pic{width: 10em;}
#hot .p2 { left:-0.5em;}
.box2 h2{font-size:1.4em}
.box2 .w{ margin:0.7em}
#hotspring h3 a{ margin:0 0 0 0.2em;}
#hotspring .rname{margin:0 0 0 0;}
#hotspring .rate{ position:relative;}

}
@media screen and (max-width: 400px){body {font-size:14px;}
}