@charset "utf-8";
/* CSS Document */
* {font-family:"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;}

html,body {
	width:100%;
	height:100%;
	overflow:hidden;
}
#wrapper {
	margin:0;
	padding: 0 0 150px 0;
	height:inherit;
	width:100%;
	position:relative;
	overflow:hidden;
}
#header{position:relative;background:#fff;transition:box-shadow 0.5s;}
#header::after,
#header .search::after{content:"";display:block;clear:both;}
#header .logo{font-size:20px;height:90px;width: 250px; float:left;text-align:center;letter-spacing:5px;}
#header .logo a{color:#000}
#header .logo img{height:50px;display: block;margin:5px auto}
#header .search{height:inherit;overflow:hidden;position:relative;padding:15px 5px 40px}
#header .active{float:left;}
#header .active.inhere{}
#header h3{font-weight: normal; padding:5px 0.65vw;color:#666;position:relative;z-index:2;background:#fff;cursor: pointer;}
#header h3:hover{color:#000;}
#header .active.inhere h3{font-size:1.05em;font-weight:bold;cursor: pointer;border:1px solid #C00;border-bottom:0px solid #C00;color:#000}
#header .inner{border-top: 1px solid #c00;display:none;position:absolute;height:30px;left:0;padding:5px 15px 5px 5px;background:#fff;right:0;margin:-1px 0 0;width:100%;max-width: 950px;}
#header .active.inhere .inner{display:flex;}
#header .inner > *{flex:3 3 auto;margin: 0 0 0 10px; align-items:center;}
#header .search input,
#header .search select{border:1px solid #666;font-size:1em;height:inherit;flex:3;}
#header .search input{padding: 1px 4px;}
#header .search select{background:#fff;}
#header .search label{height:inherit;display:flex;position: relative}
#header .bar{position:absolute;right:0;top:0;}
#header input.put{flex:0 0 auto;width:4em;background:#F90;border:1px solid #F90;color: #fff;}
#header input.put:hover{background:#F60;border:1px solid #F60;}
#header .icon-calendar{border:0;background:rgba(255,255,255,0);font-size: 16px;color: #777;position: absolute;right: 0;top:50%;margin-top:-6px}
ul.share_bar{right:10px;}

.content{display:flex;
	height:inherit;
}
#map_area {display:block;flex:2;order:2;
	height:inherit;
}

#side {display:block;flex:0 0 auto;border-top: 1px solid #ccc;order:1;overflow: auto;font-size:15px;width:250px;height: inherit;line-height: 1.4;}
.hotel{display:flex;flex-direction:column;}
#HotelFnTitle {
	color:#000;
	margin:0px;
	padding:10px 15px;
	font-weight:normal;
	background:#f2f2f2;
}
#side h3 {
	z-index:9;
	right:10px;
	top:42px;
	margin:0px;
	padding:0px;
}
#side h3 .put {
	background-repeat:no-repeat;
	background-position:left top;
	color:#FFFFFF;
	display:block;
	height:18px;
	border:0px none #FFFFFF;
	text-align:center;
	width:125px;
}
#side h3 .put:hover {
	background-position:right top;
}
#HotelFnTitle b{display: block;}
#divHotelList{margin:0 5px}
#side li{border-bottom:1px solid #ccc;}
#side li a{color:#333;
	font-size:1em;
	margin:0px;
	padding:9px 10px;
	text-decoration:none;
	display:block;transition:background 0.5s;
}
#side li a:hover{background-color:#Fd3;}
#side .hotel h3 .put {
	background-image:url(images/title_buttona.html);
}
#bubble{display:none;cursor:pointer;}
#new-footer{z-index: 2}
@media screen and (max-width:990px) {
	#wrapper {padding: 0;}
html, body {
    width:auto;
    height:auto;
    overflow:inherit;
}
#header{position: fixed;top: 0;left: 0;right: 0;z-index:4;box-shadow:0 0 5px 0 #000}
#header .logo{height:70px;width: auto;letter-spacing: 0;font-size: 16px;}
	#header .logo img{height: 45px; /* max-height:10.5vw;display: inline-block; */ vertical-align:-9px;margin:2px auto 0;}
	#header h3{padding: 5px 15px;}
.content{display:block;}
	#header .active{float:none;}
	#header .inner{overflow:hidden; position: relative;height:auto;display: block;max-height: 0;transition:max-height 0.5s,padding 0.5s;padding:0;}
	#header .active.inhere .inner{display: block;max-height:17em;padding:0 0 15px;}
	#header .inner > *{margin: 0 0 10px 3%;width: 94%}
#header .search input,
#header .search select{padding:7px 5px;}
	#header .search{padding: 0}
	#header h3{transition:background 0.5s;padding: 15px 3%;border-top:1px solid #ccc;background:#f2f2f2;}
	#header h3::after{transition:opacity 0.5s;content:"";display:inline-block;width:0;height:0;border:5px solid currentColor;border-bottom:none;border-left-color:transparent;border-right-color:transparent;margin:0 0 3px 5px;opacity:1}
	#header .active.inhere h3{color: #c00; border:0;border-top:1px solid #ccc;background:#fff;}
	#header .active.inhere h3::after{opacity:0}
	#header input.put{width: 94%}
.menu_bar{top:70px;}
#map_area{position:fixed;top:70px;left:0;width:100%;z-index:1;bottom:0;}

#side {overflow: inherit;background:#fff;flex:0;order:2;position:relative;z-index:3;width:100%;top:0; margin:0;height:auto;}
.hotel{position: relative; transition:padding 0.5s;}
.hotel.to{margin:0 0 0 0;top:0}
.hotel.bo{flex-direction:column-reverse;}
#HotelFnTitle{padding: 3px 15px 10px 15px;border-top: 20px solid #ccc;margin:0;top: 0; position: relative; bottom:-100px;transition:bottom 0.5s;cursor:pointer;}
.to #HotelFnTitle{position: fixed;top:auto;bottom: 0;left: 0;right: 0;}
/*.bo #HotelFnTitle{position: fixed;top:auto;bottom:50px;left: 0;right: 0;}*/
#HotelFnTitle::before{position: relative;content:"";display:block;width:10px;height:10px;border: 2px solid currentColor;border-width:2px 2px 0 0;transform: rotate(-45deg);margin:-15px auto 5px;}
#HotelFnTitle.bo::before{transform: rotate(135deg);margin:-20px auto 10px;}
	
#bubble{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);transition:background 0.5s;z-index:11;}
#bubble.on{display:block;background:rgba(0,0,0,0.8);}
#bubble .box{background:#fff;width:290px;border-radius:10px;padding: 20px 0;margin:-100px auto 0 auto;text-align:center;position:relative;top:50%;}
#bubble .box img{width: 40px;vertical-align: -10px;margin:0 5px 0 0;}
#bubble .box h3{font-size:1.2em;margin:0 0 10px;color:#C00}
#bubble .box button{font-size:1.1em;background:#c00;color:#FFF;border: 0;border-radius:5px;margin:10px auto 0 auto;display:block;width:230px;padding:5px 0;cursor: pointer;}
#bubble .box button:hover{background:#A00}
}
@media screen and (min-width:1000px) {
#header .search{padding:15px 10px 40px}
	#header h3{padding: 5px 10px;}
}
@media screen and (min-width:1100px) {
	#header h3{padding: 5px 15px;}
}
@media screen and (min-width:1150px) {
	#header h3{padding: 5px 20px;}
}