@charset "utf-8";
/* CSS Document */


.head04{
	margin-bottom: 0px;
}

#map_canvas {
    width: 100%;
    height: 800px;
}
.map{
	border: 1px solid #ccc;
}
section{
	/*padding: 50px 0 0 0;*/
}

.article{
	position: relative;
	clear: both;
	margin-bottom: 10px;
}
.panel {
	z-index:7777;
	position: absolute;
	top:110px;
	right: 10px;
	background-color: #fff;
	background-color:rgba(255,255,255,0.9);
	width: 430px;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
	border: 1px solid #ccc;
	/*display: none;
	background-image:url(../images/bg_panel.png);
	background-position:left top;
	background-repeat:repeat;*/
	/*padding: 20px 20px 30px 20px;
	filter: alpha(opacity=95);
	opacity: .95;*/}

.content{
	position: relative;
	padding:10px 10px 10px 10px;
	overflow:hidden;}
	
.route_wrap{
	display:block;
	z-index:2100;
	position: absolute;
	width:300px;
	top:110px;
	left:10px;
	height: auto;
	padding:10px;
	background-color: #fff;
	background-color:rgba(255,255,255,0.9);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	border: 1px solid #ccc;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;}
	
.panel_route {
	border:1px dashed #A7A7A7;}
	
.travel_head{
	clear:both;
	float:left;
	overflow:hidden;
	padding:0 0 0 0;}
	
#travel_mode{
	font-size:15px;
	color:#fff;
	font-weight:100;}
	
.divider{
	float:left;
	font-size:26px;
	color:#333;
	margin:0 5px;
	font-weight:100;}
	
.control_page{
	clear:both;
	overflow:hidden;
	border-bottom:1px solid #ddd;
	padding-bottom:10px;
	margin-bottom:10px;}
	
.article_page p{
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#555;
	line-height:24px;
	text-indent:14px;
	letter-spacing:1px;
	margin-bottom:10px;}
	
/*===路線規劃===*/

.sel_transport{
	overflow:hidden;
	margin-bottom:5px;}

.title_transport{
	float:left;
	/*height:26px;*/
	line-height:2;
	font-size:1.3rem;
	color:#4e4e4e;
	margin-top:5px;
	font-weight:400;
	padding-right:5px;
	padding-left:0px;}
	
.LocationTarget{
	float:left;
	padding-top:6px;
	margin-right:5px;}
	
.icon_transport{
	float:left;
	height:24px;}

.icon_transport ul{}

.icon_transport li{
	display:block;
	float:left;
	width:50px;
	height:24px;
	margin-right:5px;}
	
.icon_transport li.driving a{
	display:block;
	margin:0 auto;
	width:50px;
	height:24px;
	text-indent:-9999px;
	background-image:url(../images/mode_driving.png);
	background-position:0px 0px;
	background-repeat:no-repeat;}
	
.icon_transport li.driving a.active_mode{
	background-position:0px -48px;}
	
.icon_transport li.transit a{
	display:block;
	margin:0 auto;
	width:50px;
	height:24px;
	text-indent:-9999px;
	background-image:url(../images/mode_transit.png);
	background-position:0px 0px;
	background-repeat:no-repeat;}
	
.icon_transport li.walking a{
	display:block;
	margin:0 auto;
	width:50px;
	height:24px;
	text-indent:-9999px;
	background-image:url(../images/mode_walking.png);
	background-position:0px 0px;
	background-repeat:no-repeat;}
	
.icon_transport li.bicycling a{
	display:block;
	margin:0 auto;
	width:50px;
	height:24px;
	text-indent:-9999px;
	background-image:url(../images/mode_bicycling.png);
	background-position:0px 0px;
	background-repeat:no-repeat;}
	
.icon_transport li a:hover{
	background-position:0px -24px;}
	
.change_route{}

.change_route a{
	display:block;
	width:35px;
	height:35px;
	text-indent:-9999px;
	background-image: url(../images/route_change.png);
	background-position:left top;
	background-repeat:no-repeat;}
	
.change_route a:hover{
	background-position:left bottom;}
	
#control{
	float:left;
	/*width:300px;*/}
	
#control ul{}

#control ul li{
	display:block;
	clear:both;}
	
.refresh{
	/*width:82px;*/
	float:left;
	margin-top:5px;
	overflow:hidden;}

.refresh a{
	display:block;
	float:left;
	height:30px;
	line-height:30px;
	padding:0 10px;
	font-size:0.8125rem;
	color:#fff;
	text-decoration:none;
	text-align:center;
	background-color:#222;
	margin-right:0px;
	transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	outline:none;}
	
.refresh a.route_map{
	display:none;}

.refresh a:hover{
	background-color:#448D00;}
	
.directions{
	width:100%;
	min-height:200px;
	overflow:auto;}
	
.directions p{
	font-size:1rem;
	text-align:center;}
	
#directions-panel{
	font-size:12px;
	margin-top:-10px;
	background-color:#fff;}
	
.bg_select{
	background-color:#888;
	color:#ccc;}
	
.travel_block{
	float:left;
	margin:0 5px 5px 0;}
	
.travel_name{
	clear:both;
	overflow:hidden;
	width:120px;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color: #333;
	text-align:center;}
	
.sightseeing{
	clear:both;
	overflow:hidden;
	padding-top:5px;
	padding-bottom:5px;}
	
.pages{
	overflow:hidden;
	margin-bottom:10px;}

.pages a{
	height:30px;
	display:block;
	float:right;
	font-size:13px;
	color:#fff;
	line-height:30px;
	padding:0 10px;
	background-color:#222;
	margin:2px;
	transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	outline:none;}

.pages a:hover{
	background-color:#448D00;}
	
.InfoSource{
	float:right;
	font-size:13px;
	color:#333;
	font-weight:normal;
	padding-bottom:10px;}

.InfoSource a{
	color:#333;
	text-decoration:none;
	transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	outline:none;}
	
.InfoSource a:hover{
	color:#09a7b5;}
	
.attractions_wording{
	font-family: 'Noto Sans TC', "微軟正黑體", "Microsoft JhengHei UI", sans-serif;
	font-size:13px; 
	width:310px; 
	height:170px; 
	color:#000;
	font-weight: 400;
	line-height:1.7; 
	overflow:auto;
	}
	
.attractions_wording img {
	display:block;
	width:80px !important;
	height:80px;
	margin-left: 7px;
    margin-right: 7px;
	}
	
select{
	height:26px;}
	
.copyright{
	color:#333;}
	
/*景點訊息框*/

.gm-style .gm-style-iw-c{
	padding: 12px !important;
	border-radius: 0px !important;
}

.gm-ui-hover-effect{
	top: 0px !important;
	right: 0px !important;
}

.gm-ui-hover-effect img{
	height: 30px !important;
	width: 30px !important;
	margin: 0px !important;
}

@media screen and (max-width:1024px) {

.map{
	border: 0px;
}
.container{
	width: 90%;
}

.panel{
	position: static;
	width: 95%;
	border: 0px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

.route_wrap{
	position: static;
	width: 95%;
	border: 0px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

a.trigger{
	display: none;
}

a.trigger2{
	display: none;
}

#map_canvas {
    width: 100%;
    height: 600px;
}

.refresh a.route_map{
	display: block;
	margin-right: 5px;
}

}

@media screen and (max-width:500px) {

#map_canvas {
    height: 300px;
}

.attractions_wording {
    width: 170px;
    height: 130px;}
}