@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{top:32px;margin: 0 0 32px 0; position: relative; width:570px; height:140px; background:url(../images/logo.png) no-repeat center center; display:block;}
#header img{float:left;}
#header p{width: 550px;margin:5px 0 25px 15px;color:#fff;line-height:130%;}
#share{position:absolute; top:5px; right:205px;}
#header .language{position:absolute;top:60px;left:360px; 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 li{float: left;}
#header .language a{color:#000; margin:0 3px 0 3px;}
#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 0px;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 li a.a{}
#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{color:#c00;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:190px;padding:11px 30px 0 0px;text-align:right;font-size:15px; line-height:130%;}
#search .txt{ padding: 16px 0 10px 15px;overflow:hidden; font-size:15px;}
#search em{font-style: normal;}
#search a{ color:#000;background: url(../images/w_bg.png); border-radius:5px; margin:0 5px 0 0;padding:3px 10px; }
#search a:hover,#search a.open{background: url(../images/w_bg.png) 0 -50px; }
#search .button a{display: inline-block; width: 4em; text-align: center;color:#fff; text-decoration: none;padding:5px 0; 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 10px 0 0; width:105px;}
#search select,
#search option{font-size:1em}
#search ul{ display:inline-block;}
#search .txt * {vertical-align: middle;}
#map{position: absolute;right: 0;width: 370px;top: -180px; 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 .sunmoonlake{left: 125px;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 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;}

#search_rooms{margin:0px 35px 0 35px; line-height:130%;}

#search_rooms table { background-color:#fff;}
#search_rooms td {vertical-align: middle;
}
#search_rooms .search_header {background:url(../images/w_bg2.png) repeat-y center 0;border-bottom: 0px solid #CCCCCC; margin:0;padding: 10px 35px;}

.room{margin:0;padding:1em 0;background:rgba(255, 255, 255, 0.5);}
.sort {border-top: 1px solid #666;}
#hotel_hc{margin:10px 35px 10px 35px; line-height:130%; background-color:#fff; border-radius:5px; padding:10px;}
#hotel_hc h2{margin:0 0 5px 0;}
#hotel_hc h2 strong{ color:#900;}
#hotel_hc li{ float:left;border-right: 1px solid #CCC;margin:0 10px 0 0;}
#hotel_hc li a{ width:278px;display:block;padding:3px 10px 3px 0px;color:#333;}
#hotel_hc li a:hover{ color:#069;}
#hotel_hc li .price{ float: right; color:#900;}
.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;transition: top 0.8s; z-index:1; height:330px;}

.bg1{ width:216px;background-position:0 0; top:270px; left:-238px;}
.bg2{width:174px;background-position:-216px 0;top:170px; left:-30px; display:none;}
.bg3{width:280px;background-position:-390px 0;top:55px; left:-20px;}

.hname {white-space: nowrap;}
#footer {line-height: 1.4;}


#dialog{display: none; position:fixed;top:0px; left:0px; z-index:10; width:100%;height:100%; font-size:15px;line-height:150%;}
#dialog .bg{ position:fixed; background:rgba(0,0,0,0.7); top:0px; left:0px; width:100%;height:100%;}
#dialog .dialog_content{top: 50%;left: 50%; position:absolute;background-color:#FFF; border-radius:10px;padding:15px 15px 10px 15px;margin:-76.5px 0 0 -140px}
#dialog .dialog_content a{background-color:#069; color:#fff;text-align: center;width: 10em; padding:10px 0;border-radius:5px; margin:5px auto;display: block;}
#dialog .dialog_content a:hover{background-color:#036;}
#dialog .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 32px}
	#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: 100%;background-size:95% auto;height:26vw}
	#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;}
}