html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body, table, p, div, span, form, input, textarea, select, pre, button { font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Microsoft JhengHei", "新細明體", "PMingLiU"; overflow:hidden; } 

body,html {background:#37add2; height: 100%;}

a {	font-family: \5FAE\8EDF\6B63\9ED1\9AD4, "Microsoft JhengHei", "新細明體",#ffd540; text-decoration: none; }
a:visited, a:link {  COLOR: #333333; text-decoration:none }
a:hover { COLOR:#9b7705; text-decoration: underline }

.icon_bike { background-image:url('../img/icon/icon_bike.png'); height:20px; width: 20px }
.icon_fb { background-image:url('../img/icon/icon_fb.png');  }
.icon_gp { background-image:url('../img/icon/icon_gp.png');  }
.icon_finish { background-image:url('../img/icon/icon_finish.png');  }
.icon_gp, .icon_fb, .icon_bike, .icon_finish { display: inline-block; width:35px; height: 35px;vertical-align: middle; }

#body_contact { overflow:hidden; }
#body_front { background-image: url('../img/bg/grid_bg.png'); left:0; top:0; }
#body_map {
	display: inline-block;
	left: -1px;
	top: 859px;
}

#body_msg1 { background-image: url('../img/contact/msg_r.png'); margin-left:2px; margin-top:-2px; }
#body_msg2 { background-image: url('../img/contact/msg_l.png'); margin-left:2px; margin-top:-2px; }
#body_msg3 { background-image: url('../img/contact/msg_l.png'); margin-left:2px; margin-top:-2px; }
#body_msg4 { background-image: url('../img/contact/msg_r.png'); position:absolute; }
#body_msg5 { background-image: url('../img/contact/msg_l.png'); margin-left:2px; margin-top:-2px; }
#body_msg6 { background-image: url('../img/contact/msg_l.png'); margin-left:2px; margin-top:-2px; }
#body_msg1,#body_msg2,#body_msg3,#body_msg4,#body_msg5,#body_msg6 { position: absolute; display: inline-block; width:195px; height:160px; text-align:center; font-size:16px; font-weight:800; overflow:hidden; color:#15659e; display:none }

#body_msg_m1 {  }
#body_msg_m2 {  }
#body_msg_m3 { margin-left:2px; margin-top:-2px; }
#body_msg_m4 {  }
#body_msg_m1,#body_msg_m2,#body_msg_m3,#body_msg_m4 { position: absolute; display: inline-block; width:340px; height:50px; text-align:center; font-size:16px; font-weight:800; overflow:hidden; color:#15659e; display:none; background-color:#ffffff; opacity:0.8; }

#body_map { position:relative;z-index:50; }
#body_front { z-index:51; }
#cloud1 { z-index: 61; }
#cloud2 { z-index: 62; }
#cloud3 { z-index: 63; }
#cloud4 { z-index: 64; }
#cloud5 { z-index: 65; }
#bottom_info { z-index: 70; }
#bottombar { z-index: 80;  }
#body_texture { z-index:85; }
#body_area { z-index: 200; }
#body_title { z-index: 110; }
#body_title_rideman { z-index: 111; }

/*
#icon_taipei { z-index:151; }
#icon_chcg { z-index:152; }
*/

#body_msg1 { z-index: 179; }
#body_msg2 { z-index: 178; }
#body_msg3 { z-index: 177; }
#body_msg4 { z-index: 176; }

#body_msg_m1 { z-index: 175; }
#body_msg_m2 { z-index: 174; }
#body_msg_m3 { z-index: 173; }
#body_msg_m4 { z-index: 172; }

#body_snapmap  { z-index: 170; }




#body_map { background-image:url('../img/contact/map_w2600.jpg'); display:inline-block; width:2600px; height:1024px;} 
#body_contact {
	height: 100%;
	width: 100%;
}

#area_taipei,#area_ntpc,#area_tycg,#area_hccg,#area_taichung,#area_chcg {
	cursor:pointer;
	width: 70px;
	background-repeat: no-repeat;
	margin-bottom:30px; 
	background-size: auto 100%;
}

#area_ntpc { 
    height: 120px; 
	background-image: url('../img/contact/area_newtaipei.png');
}

#area_ntpc:hover { height: 120px;background-image: url('../img/contact/area_newtaipei_over.png');  }

#area_taipei { height:110px; background-image: url('../img/contact/area_taipei.png');  }
#area_taipei:hover { height:110px;background-image: url('../img/contact/area_taipei_over.png'); }

#area_chcg { height: 110px; background-image: url('../img/contact/area_chcg.png');}
#area_chcg:hover { height: 110px;background-image: url('../img/contact/area_chcg_over.png'); }

#area_taichung { height: 110px; background-image: url('../img/contact/area_taichung.png');}
#area_taichung:hover {height: 110px; background-image: url('../img/contact/area_taichung_over.png'); }

#area_tycg { height: 110px; background-image: url('../img/contact/area_tycg.png');}
#area_tycg:hover { height: 110px;background-image: url('../img/contact/area_tycg_over.png'); }
#area_hccg { height: 110px; background-image: url('../img/contact/area_hccg.png'); }
#area_hccg:hover { height: 110px;background-image: url('../img/contact/area_hccg_over.png'); }

:root #area_ntpc,:root #area_taipei,:root #area_chcg,:root #area_taichung{
	padding:0px;
}
.icon_point { }
#icon_taipei { position:relative; margin-top:300px; margin-left:1400px; }
/*#icon_taipei { position:absolute; top:50%; left:50%;  margin-top: -52px;}*/
#icon_ntpc { position:relative; margin-top:-130px; margin-left:1420px; }
/*#icon_ntpc { position:absolute; top:50%; left:50%; margin-top: -52px; }*/

#icon_taichung { position:relative; margin-top:400px; margin-left:1320px; }

#icon_chcg { position:relative; margin-top:440px; margin-left:1300px; }
#icon_tycg { position:absolute; width:60px; margin-top:320px; margin-left:1360px; }
#icon_hccg { position: relative;margin-top: -28px;margin-left: 1341px; }
#body_title { background-image: url('../img/contact/intro_logo.png'); width: 332px; height: 332px;
max-width: 30%;
background-size:100% auto;
background-repeat: no-repeat;
background-position: center; 
 }
#body_title_rideman { background-image: url('../img/contact/icon_rideman.png'); width: 332px; height: 332px; 
max-width: 30%;
background-size:100% auto;
background-repeat: no-repeat; 
background-position: center;}

#icon_taipei,#icon_chcg,#body_snapmap { position: absolute; display: inline-block;  }

#body_front,#body_texture,#bottom_info,#bottombar,#body_area,#body_title,#body_title_rideman,
#cloud1,#cloud2,#cloud3,#cloud4,#cloud5 ,#body_snapmap { position: absolute; display: inline-block;  }

#body_snapmap { display:none; background-image:url(../img/contact/intro_map_1.png); width:500px; height:683px; padding-left:50px; }

#btn_enterarea { margin-top:64px; margin-left:96px; width:70px; height:16px; background-image:url('../img/contact/gotoweb.gif'); display:inline-block }
#btn_enterarea:hover { background-image:url('../img/contact/gotoweb_over.gif') }

#btn_entermap { background-image:url('../img/contact/map_taipei.jpg');width:450px;height:518px;margin-top:12px; display:inline-block }

#bottom_info { 
	height:80px; 
	line-height: 35px; 
	font-size: 14px; 
	font-weight: 600; 
	padding: 1%; 
	color: #fafafa; 
	width: 96% !important; 
	opacity: 0.9;

	position: fixed \9;
	bottom: 40px \9;
	height:40px \9;
	line-height: 35px \9;
}
#bottom_ride { float: left ;  z-index:5;}
#bottom_share { float: right ; display:inline-block; }
#bottombar { background-color: #f5f0f0; height:40px; text-align:right; width: 99%; line-height: 40px; font-size: 10px; padding-right: 1% ; }


.r5 { margin-right: 5px; }
.r25 { margin-right: 25px;   display: inline;}

#link_finish a { text-decoration:none; font-weight:800; color:#FFFFFF; }
#link_finish a:hover { color:#f9f9c0; }

@font-face{font-family:icomoon;src:url(../webfonts/icomoon/icomoon.woff);font-weight:400;font-style:normal}
[class^=ico-],[class*=" ico-"]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ico-map:before{content:"\e645"}

/*yecapee add*/

@media screen and (max-width: 725px) {
	#bottom_msg li{  
	font-size: 0.8em; 
}

	#bottom_msg{ 
	transition:.3s; 
	z-index: 0;
	width: 100%;
	padding-top: 2px;
	}
	#bottom_share { float: right ; display:none; }
	#bottom_info { 
		bottom: 40px;
		height:170px; 
		line-height: 35px; 
		line-height: 35px; 
		font-size: 14px; 
		font-weight: 600; 
		padding: 1%; 
		color: #fafafa; 
		width: 96% !important; 
		opacity: 0.9; }


}
@media (min-width: 726px) and (max-width: 1180px) {
		#bottom_msg li{  
	font-size: 1.1em; 
}
	#bottom_msg{ 
	transition:.3s; 
	z-index: 0;
	width: 100%;
	padding-top: 2px;
	}
	#bottom_share { float: right ; display:inline-block; }
	#bottom_info {
		bottom: 60px;
		height:100px; 
		line-height: 35px; 
		line-height: 35px; 
		font-size: 14px; 
		font-weight: 600; 
		padding: 1%; 
		color: #fafafa; 
		width: 96% !important; 
		opacity: 0.9; }

}

@media screen and (min-width: 1181px) {
	#bottom_msg li{  
		font-size: 1.1em; 
	}
	#bottom_msg{ 
		position:absolute;
		position:static \9;
		display: flex; 
		transition:.3s; 	
		z-index: -1;
		width: 100%;
	}
	#bottom_share { float: right ; display:inline-block;     margin-left: 15px; }
	#bottom_info {
		position: fixed;
		bottom: 40px;
		height:25px; 
		height:80px \9;
		line-height: 35px; 
		font-size: 14px; 
		font-weight: 600; 
		padding: 1%; 
		color: #fafafa; 
		width: 96% !important; 
		opacity: 0.9;
	}

}
.footer_info{
	    padding:0 20px;
		color:#222222;
		background-color: #ffff80;
		position: fixed;
	    bottom: 50px;
	    right: 250px;
	}		

#bottom_msg li{  
	background-color: #ffff80;
	background-color:rgba(255, 255, 128,1.0); 
	padding: 2px; 
	padding-right: 10px; 
	padding-left: 10px; 
	list-style: none; 
	margin: auto; 
	color:#222222;
	color:rgba(0, 0, 0,.8); 
	border-width: 0px; 
	border-style: solid; 
	border-color:#FFFFFF; 
}

@media screen and ( max-height: 830px){
	#area_taipei,#area_ntpc,#area_tycg,#area_hccg,#area_taichung,#area_chcg {
		cursor:pointer;
		background-repeat: no-repeat;
		margin-bottom:30px; 
		background-size: auto 100%;
	}
	#area_taichung { background-size: auto 82%;}
	#body_area{
		width: 140px !important;
	}
	
	#area_ntpc{position:relative;top:-32px;left:85px;}
	#area_taipei{position:relative;top:-32px;left:85px;}
	#area_tycg{position:relative;top:-32px;left:85px;}
	#area_hccg{height: 125px;position:relative;top:-472px;left:0px;}
	#area_hccg:hover{height: 125px;}
	#area_taichung{ height: 130px;position:relative;top:-470px;left:0px;}
	#area_taichung:hover{ height: 130px;}
	#area_chcg{position:relative;top:-490px;left:0px;}
}