@charset "utf-8";

body {background:#fff url(../images/bg.jpg) repeat-x fixed center 0px; font-size:13px; font-family:Arial, Helvetica, sans-serif;}

#area{width:990px; margin:0 auto; position:relative; z-index:9;}

#header{position:relative;}
#header h1 a{position:relative;top: 42px; margin:0 0 42px 0;; width:660px; height:50px; background:url(../images/logo.png) no-repeat center center;background-size: contain; display:block;}
#header img{float:left;}
#header h2{position:relative;padding: 0 0 40px 160px; color:#fff; font-size:18px;font-weight: normal;}
#header h3{position:relative; margin: 0 0 10px 15px;color:#fd0; font-size:30px;font-weight: normal;}
#header p{position:relative;color:#fff; font-size:14px;width:460px;margin: 0 0 20px 15px;}
#share{position:absolute; top:35px; right:10px;z-index:2;}
#header .language{position:absolute;top:15px;left:340px; z-index:2;padding:5px 10px;background:rgba(255,255,255,0.8);border-radius:5px;box-shadow:2px 2px 5px -3px #000;}
#header .language li{float: left;}
#header .language a{color:#000; margin:0 10px;}
#header .language a:hover{color:#900;}
#share img{ margin:0 5px 0 0;}

#content{position:relative;}
.r{position: relative;}
#balloon{ background:rgba(255, 255, 255, 0.8);box-shadow:-20px -30px 60px -50px rgba(0, 0, 50, 0.3), 20px -30px 60px -50px rgba(0, 0, 50, 0.3);width:630px;float:left; position:relative;padding: 20px;min-height:390px;transition:height 0.5s;z-index: 1}

#balloon h1{ color:#7c0472; margin:0px 0 5px 0;font-size:26px}
#balloon h1::before{content:" ";background: url(../images/i_10.png);background-size:cover;display: inline-block;width:60px;height: 74px;  margin:-50px 0 -10px -23px;}
#balloon .nav{display:flex;border-top:1px solid #999;border-left:1px solid #999;overflow:hidden;}
#balloon .nav li{display:block;flex: auto}
#balloon .nav li a{line-height:2em;display:block;color:#333;text-align:center;border-right:1px solid #999;}
#balloon .nav li a em{font-style: normal;}
#balloon .nav li.open2 a{color:#fff; background:#7c0472;}
#balloon .list{border:1px solid #999; position:absolute; left:0; top:0;margin:78px 20px 20px 20px; padding:10px; line-height:130%;opacity: 0;transition:opacity 0.5s;z-index: 1}
#balloon .list.open1{opacity:1;z-index: 3}
#balloon .pic{float:left; margin:0 10px 0 0;}
#balloon .pic img{ width:200px}
#balloon h2{font-size:15px; color:#606}
#balloon p{padding:5px 0 0px 0;line-height:140%;}
#balloon a{ color:#069;}
#balloon .project{margin: 0.5em}
#balloon .project h3{color:#606;}
#balloon .project li a{padding: 2px 6em 2px 15px; background:url(../images/icon.png) no-repeat -5px 0; display:block;text-decoration: underline; position: relative;color:#000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#balloon .project li a:hover{ text-decoration:none;color:#069}
#balloon .project .price{ position:absolute; bottom:0px; right:0px;}
#balloon .more {display: block;text-align: right;}
#balloon .more em{font-style: normal;}


#search{margin: 2em 0 0 0; background-image:url(../images/search.png); color:#FFF;height: 60px;border-radius:5px;  line-height:130%;z-index: 4;position: relative}
#search h1{float:left;width:200px;padding:11px 30px 0 0px;text-align:right;font-size:15px; line-height:130%;}
#search .txt * {vertical-align: middle;}
#search .txt{ padding: 19px 0 10px 10px;overflow:hidden; font-size:15px;}
#search em{font-style: normal;}
#search a{ color:#000;background:rgba(255,255,255,0.7); border-radius:5px; margin:0 0 0 5px;padding:2px 8px; }
#search a:hover,#search a.open{background:rgba(255,255,255,0.9);}
#search .button a{color:#fff; text-decoration: none;padding:5px 15px; background:#069; border-radius:5px; border:1px solid #999; margin:0 0 0 10px;}
#search .button a:hover{ background:#036;}
#search input {border-radius:5px; padding:1px 3px; margin:0 0 0 5px; width:110px;}
#search select {font-size: 1em}
#search ul{ display:inline-block;}
#search .fast{ position:absolute; bottom:1px; font-size:12px; left:205px; background:url(../images/icons_fff.png) no-repeat left -31px; padding: 0 0 0 18px;}
#search .fast a{color:#fff;background:none; border-radius:0px; margin:0;padding:0;}
#search .fast a:hover{color:#FF0;}

#map{position: absolute;right: 0;width: 370px;top: -200px; margin:0; overflow:hidden;padding:0;}
#map svg{width: 370px;margin: 0 0 0 }
#map ul{}
#map li a{ position:absolute; color:#333; background:url(../images/w_bg.png) 0 0px;border-radius:5px; display:block; padding:3px 15px;box-shadow:2px 2px 5px -3px #000;text-align:center;}
#map path{transition:fill 0.5s,stroke 0.5s;}
#map .land{fill:rgba(0, 82, 106, 0.6);stroke:rgba(219, 220, 220, 0.6);}
#map .li{cursor: pointer;}
#map .li .land{stroke:rgba(219, 220, 220,1);}
#map .st2{fill:rgba(255,255, 255, 0.7);}
#map .li.open3 .st2{fill:rgba(255,255, 255, 1);}
#map .li g .st2{fill:rgba(255,255, 255,1);}
#map .li0 .land{fill:#61ae00;}
#map .li1 .land{fill:#ffb600;}
#map .li2 .land{fill:#ce6d00;}
#map .li3 .land{fill:#c7cf00;}
#map .li4 .land{fill:#ff8a00;}
#map .li0.open3 .land{fill:#569b00;}
#map .li1.open3 .land{fill:#ff8400;}
#map .li2.open3 .land{fill:#b86100;}
#map .li3.open3 .land{fill:#b7be00;}
#map .li4.open3 .land{fill:#ff6600;}
#map li.open3 a{ background:#fff;}
/* 地圖熱氣球 */
#map .li .st1{fill:#A3C125;}
#map .li .st3{fill:#FF7295;}
#map .li .st4{fill:#FF214D;}
#map .li .st5{fill:#FFE62F;}
#map .li .st6{fill:#00A7D2;}
#map .li .st7{fill:#FFBA00;}
#map .li .st8{fill:#007FBB;}
#map .li .st9{fill:#005EB1;}
#map .li .st10{fill:#814300;}
#map .li .st11{fill:#002EB1;}
#map .li.open3 .st1{fill:#54a700;}
#map .li.open3 .st3{fill:#ff5672;}
#map .li.open3 .st4{fill:#ff112d;}
#map .li.open3 .st5{fill:#ffe421;}
#map .li.open3 .st6{fill:#0096bd;}
#map .li.open3 .st7{fill:#ffa800;}
#map .li.open3 .st8{fill:#0070a5;}
#map .li.open3 .st9{fill:#00529a;}
#map .li.open3 .st10{fill:#6f3a00;}
#map .li.open3 .st11{fill:#002898;}

#map .st13{font-size:12px;}
#map .st14{fill:none;stroke:#000000;stroke-width:0.2;}
#map .st15{fill:none;stroke:#000000;stroke-width:0.1;}
#map .st16{fill:none;stroke:#000000;stroke-width:0.3;}
#map .st17{fill:none;stroke:#000000;stroke-width:0.5;}
#map .st18{fill:none;stroke:#000000;stroke-width:0.2048;}

/* #map{float:left; margin:-200px -15px 0px -15px; overflow:hidden; position:relative;}
#map img{border-radius:5px;}
#map ul{}
#map li a{
	position: absolute;
	color: #333;
	background: url(../images/w_bg.png) 0 0px;
	border-radius: 5px;
	display: block;
	padding: 3px 10px;
	box-shadow: 2px 2px 5px -3px #000;z-index:2;
}
#map .sunmoonlake{left: 95px;top: 275px;}
#map .taitung{left: 156px;top: 405px;}
#map .taoyuan{left:200px;top:65px;}
#map .hsinchu{left:130px;top:100px;}
#map .tainan{left: 20px;top: 370px;}
#map .hualien{left: 210px;top: 300px;}
#map .kaohsiung{left: 22px;top: 511px;} 
#map li.open3 a{ background:#fff;}*/
.room{margin:0;padding:1em 0;background:rgba(255, 255, 255, 0.5);}
.sort {border-top: 1px solid #666;}
#hotels{margin:0px 30px 0 25px; line-height:130%;}
#featured{ font-size:12px; padding:5px 45px; background:url(../images/w_bg2.png) repeat-y center 0;}
#featured h2{ color:#069; border-bottom:1px solid #ccc; font-size:13px; padding:5px 0 2px 0; margin:0 0 2px 0;}
#featured .txt{ padding:0 0 5px 1px;}
#featured .price_txt{float:right; padding:0px 5px 0 0;}
#hotels .list{ border:1px solid #ccc;border-radius:5px;-moz-box-shadow:0px 0px 5px -3px #000;
-webkit-box-shadow:0px 0px 5px -3px #000;box-shadow:0px 0px 5px -3px #000; margin:0px 5px 20px 5px; position:relative; background-color:#fff;}
#hotels h3{float: left;font-size: 15px;padding: 7px 10px;}
#hotels h3 a{ color: #09d;}
#hotels .level{float: left;padding: 7px 0 0 8px;}	
#hotels .more {float: right;padding: 7px 8px 0 0;}
#hotels .more a{color:#069; text-decoration:underline;}
#hotels .more a:hover{color:#F60;}
#hotels .pic{float: left;padding:10px; border-top:1px solid #ccc;  height:90px;border-right:1px solid #ccc; position:relative;}
#hotels .pic img{float: left;}
#hotels .pic .p_pic{z-index: 2;position:absolute; top:-55px;left:140px;border:1px solid #CCC; padding:5px; background-color:#fff;-moz-box-shadow:2px 2px 5px -3px #000;-webkit-box-shadow:2px 2px 5px -3px #000;box-shadow:2px 2px 5px -3px #000; border-radius:5px;}
#hotels .list .txt{float: left; width:600px; border-top:1px solid #ccc;border-right:1px solid #ccc;padding:5px 10px;}
#hotels .table{ display:table-cell; vertical-align:middle; height:100px;}
#hotels .booking_area{padding:20px 5px;border-top:1px solid #ccc;height:70px;overflow: hidden;}
#hotels .booking_area span a {
	background: url(../images/booking.png) left top no-repeat;
	color: #FFFFFF;
    display: block;
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    margin: 0 auto;
    padding: 25px 0 0;
    text-align: center;
    width: 120px; line-height:15px;}
#hotels .booking_area span a:hover{ background-position:left bottom}
#hotels .booking_area p { text-align: center;
}
#hotels .booking_area em {color: #f00;font-style: normal;}
#hotels .address a{color:#069; text-decoration:underline;}
#hotels .address a:hover{color:#F60;}
#hotels .program{border-top:1px solid #ccc;padding:5px 10px 10px 10px; color:#900}
#hotels .program ul{ list-style:disc; padding:0 0 0 25px;}
#hotels .program a{color:#900;}
#hotels .program a:hover{color:#F60;}

#hotels .page_center{ color:#666;text-align: center;}
#hotels .page_center a{ color:#069; text-decoration:underline;}
#hotels .page_center b{ color:#c00;}
#hotels .page_center a:hover{color:#F60;}
.bot{text-align: center; padding:15px 0 0 0;}
.bot a{ color:#069; text-decoration:underline;}

#bga{position: relative;width: 100%;height: 300vh;margin: 0 0 -300vh 0;overflow: hidden}
#bg{position: absolute; z-index:1; top:0;left:50%;}
.bg1,
.bg2,
.bg3{ background-image:url(../images/bg2.png);position: absolute; z-index:1; height:226px;}

.bg1{ width:216px;background-position:0 0; top:190px; left:-68px;}
.bg2{width:174px;background-position:-216px 0;top:205px; left:325px;}
.bg3{width:200px;background-position:-390px 0;top:120px; left:60px;}


#dialog {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#dialog .bg {
	position: fixed;
	background: url(/images/bg_a70.png);
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
	height: 100%;
}
#dialog .close {
	z-index: 2;
	position: absolute;
	right: 9%;
	width: 20px;
	height: 20px;
	top: 8%;
	margin: -20px 0 0 0;
	background: url(/images/close.png);
}
#dialog .dialog_content {
	z-index: 2;
	background: white;
	width: 81%;
	height: 84%;
	position: relative;
	top: 8%;
	margin: 0 0 0 10%;
}
#location {
	width: 100%;height: 20px;
	margin: 0;
	padding: 0;
	overflow:hidden;
	position:relative;
}
#location h3 {
	margin: 0px 5px 0px 10px;
	padding: 0px;
	overflow: hidden;
	font-size: 13px;
	line-height: 20px;
	color: black;
	font-weight: bold;
}
#location .txt {
	margin: 0px 15px 0px 5px;
	padding: 0px;
	overflow: hidden;
	font-size: 12px;
	color: #666;
}
#commentiframe1 {
	height: 96%;
	width: 98%;
	margin: 0;
	padding: 0 0 0 10px;
	border: none;
}
#commentiframe2 {
	height: 96%;
	width: 98%;
	margin: 0;
	padding: 3px 0 0 10px;
	border: none;
}



#search_for{position:fixed;top:0px; left:0px; z-index:10; width:100%;height:100%; font-size:15px;line-height:150%;}
#search_for .bg{ position:fixed; background:url(/Tools/route/images/bg_000_70.png); top:0px; left:0px; width:100%;height:100%;}
#search_for .dialog_content{position:relative;background-color:#FFF; border-radius:10px;padding:15px 15px 10px 15px; float:left;}
#search_for .close{position: absolute;width:20px; height:20px;background:url(/Tools/route/images/close.png);cursor: pointer;}
#search_for .dialog_content a{background-color:#069; color:#fff; padding:5px 25px;border-radius:5px; margin:5px 0 5px 15%; float:left;}
#search_for .dialog_content a:hover{background-color:#036;}
#search_for .dialog_content strong{ color:#C00;}


@media screen and (max-width:970px) {
	
body {font-family:"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;font-size: 16px;}
	#area{width: 100%}
	#header{height: auto}
	#header h1 a{margin: auto auto 42px;width: 570px;}
	#header h2{padding: 0 0 6vw;margin: auto; text-align: center;}
	#header h3{ margin: 0 auto 10px auto; width:550px;font-size: 26px;}
	#header p{margin: auto auto 2.5em auto; width:550px;}
	#header .language{top: 13px; right: 10px;left: auto}
	#header .language{display: none}
	.room{}
	#map{display: none;position: relative;bottom: auto}
	#balloon{background:rgba(255, 255, 255, 0); float: none;width: 100%;padding: 25px 1em; }
	#balloon .project li a{    }
	#heade{left: 16px;right: 16px;}
	#balloon .list{margin: 88px 1em 20px;right: 0}
	#search{background: #069;height: auto;}
	#search h1 {font-size: 1em; float:none;width:auto;padding: 11px 0 5px 0;text-align:center;line-height: 130%;}
	#search h1 br{display: none}
.r{position: relative;background:rgba(255, 255, 255, 0.8);}
	#search .txt {padding: 5px 1.5em 0;}
	#search .txt label{display: block;font-size: 0.8em;line-height: 1.5em;margin: 0 0 1em}
	#search .button a{width: 100%;display: block;background: #09c;margin: 0.5em 0 1em 0;border:0;}
	#search span{display: block;}
	#search input,
	#search select{margin:0 auto;padding:0.5em; width: 100%;font-size:1.3em}
}
@media screen and (max-width:570px) {
	#header h1 a{width: 97%;height:9vw}
	#header h2{font-size: 14px;width: 93%;text-align:left; }
	#header h3{width: 94%;font-size: 4.35vw}
	#header h3 br{display: none;}
	#header p{width: 94%}
	#balloon{padding:25px 0 1em;}
	#balloon .more em,
	#balloon .nav li a em{display: none}
	#balloon .list{margin: 88px 0 20px;}
	#balloon h1::before{margin: -50px 0 -10px -3px;}
	#balloon .pic{float: none;margin: 0;}
	#balloon .pic img{width: 100%;}
	#map{width: 100%;}
}

@media screen and (min-width:1180px) {
	#area{width: 1100px}
	#header {}
	#header p{width: 725px;}
	#balloon {width: 730px;}
}