@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0; margin:0}table{border-collapse:collapse; border-spacing:0}fieldset,img,abbr,acronym{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal; font-style:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6,b,u,i,big,small{font-weight:normal; font-size:100%}q:before,q:after{content:'';content:none}:focus,a{outline:0}ins{text-decoration: none;}del{text-decoration: line-through}hr{display:none}

/* common */
/* color, font, link */
body { color:#656565; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; line-height:1.75}
a { color:#656565; text-decoration:none} a:hover { color:#444}
a.insite { color:#ee3024} a.insite:hover { color:#a70a0a}
a.outgo { color:#33a6b7} a.outgo:hover { color:#027283}
h1 { margin-bottom:.2em; line-height:1.3; font-size:26px; font-weight:bold; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif; color:#010101}
	h1.ir { height:26px}
h2 { margin-bottom:.2em; line-height:1.3; font-size:20px; font-weight:bold}
	h2.ir { height:20px}
h3 { margin-bottom:.2em; line-height:1.3; font-size:15px; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif; color:#414141}
h4 { margin-bottom:.2em; line-height:1.3; font-size:15px; color:#2f2f2f}
	h4 a { color:#2f2f2f} h4 a:hover { color:#ee3024}
.dothr { height:1px; overflow:hidden; margin:1em 0; background:url(/img/common/hr-dot.png) repeat-x}
.ir { overflow:hidden; background-repeat:no-repeat; text-indent:-1000px}
.vital { color:#ee3024}
.more, .more-outgo, .gotop, .close { display:inline-block; padding-left:13px; background-repeat:no-repeat; background-position:0 50%; font-size:11px; font-size:10px\9} 
.more { background-image:url(/img/common/icon-more.png); color:#ee3024} .more:hover { color:#a70a0a}
.more-outgo { background-image:url(/img/common/icon-more-outgo.png); color:#33a6b7} .more-outgo:hover { color:#027283}
.gotop { background-image:url(/img/common/icon-gotop.png)} .gotop:hover { text-decoration:underline}
.close { background-image:url(/img/common/icon-close.png)} .close:hover { text-decoration:underline}
/* button */
.lb3d { display:inline-block; *display:inline; *zoom:1; *overflow:hidden; border:1px solid #e4e4e4; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; box-shadow:1px 1px 0 #aaa; -moz-box-shadow:1px 1px 0 #aaa; -webkit-box-shadow:1px 1px 0 #aaa; padding:1px 3px; padding:2px 3px 0 3px\9; background:#fff; text-align:center}
.cta { margin:0 1px; padding:5px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; background:#ee3024; color:#fff; line-height:1.75; white-space:nowrap; text-align:center}
	.cta:hover { background-color:#a70a0a; color:#fff}
.ctatwin .cta-left { margin-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:0; border-radius-topright:0; border-radius-bottomright:0; border-right:1px solid #a70a0a }
.ctatwin .cta-right { margin-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; border-radius-topleft:0; border-radius-bottomleft:0;  border-left:1px solid #ff918a}
.clrbtn { display:inline-block; *display:inline; *zoom:1; height:17px; *overflow:hidden; border:1px solid #656565; padding:0 3px; margin-right:-2px; background:#656565; color:#fff; line-height:17px; line-height:20px\9; *line-height:19px; text-align:center}
	.clrbtn:hover, .clrbtn.on { background:#fff; color:#656565}

/* form */
.form { *height:1%}	
	.form > li { position:relative; *float:left; *width:85%; *height:1%; padding-left:15%; margin-bottom:1em}
		.form > li > label, .form > li.twocol > div > label { position:absolute; left:0; top:0; text-align:right; color:#111}
		.form > li > label { width:14%; _width:16%}
			.form label b { position:relative; top:3px; left:-2px; color:#a70a0a; font-size:13px}
		.form > li input[type="text"], 
		.form > li textarea { width:97%} .form > li select { width:98%}
			.form > li small { display:block; width:90%; margin-top:3px; font-size:11px; font-size:10px\9; line-height:1.3}
				.form > li small.warn { color:#c00; padding-left:14px; background:url(/img/common/icon-warning.png) 0 50% no-repeat;}
	.form > li.twocol { overflow:hidden; *width:100%; *height:1%; *overflow:visible; padding-left:0}
		.form > li.twocol > div { position:relative; float:left; width:35%; *height:1%; padding-left:15%}
			.form > li.twocol > div > label { width:28%; _width:40%}
			.form > li.twocol input[type="text"], .form > li.twocol textarea { width:93%} .form > li.twocol select { width:96%}
			.form > li.twocol > div.noind { width:50%; padding-left:0!important}
	.form > li.noind { *width:100%; padding-left:0}
	.form > li.ctrl { *width:100%; padding-left:0; /*padding-top:1em;*/ text-align:center}
		.form > li.ctrl > * { margin:0 2px}
	
	.form input[type="text"], .form textarea { padding:3px 2px; border:1px solid #d2d2d2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; background:#fff;  font-family:Arial, Helvetica, sans-serif; color:#656565} 
		.form input[type="text"]:focus, .form textarea:focus, .form input[type="text"].sffocus, .form textarea.sffocus { border-color:#999; background-color:#f7f7f7}
	.form input[type="text"] { height:17px} 
	.form textarea { height:120px}
	.form input[type="radio"], .form input[type="checkbox"] { position:relative; top:2px; margin-right:2px; *margin:0 0 0 -4px} 
	.form input.ckcode { width:120px!important}
	.form img.ckcode  { vertical-align:middle; *position:relative; *top:-4px;}
	
input.button, button { border:none; padding:4px 8px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; background:#ee3024; color:#fff; font-size:12px; cursor:pointer} input.button:hover, button:hover { background-color:#a70a0a}
input.button { padding:4px 10px\9; *padding:5px 2px 2px 2px}
button { padding:2px 10px 1px 10px\9; *padding:0 2px 0 2px}
button.minor, input.button.minor { background-color:#656565!important } button.minor:hover, input.button.minor:hover { background-color:#999!important }

/* others */
.datepicker { display:inline-block; width:20px; height:26px; overflow:hidden; margin:0 -2px 0 2px; *margin-right:2px; background:url(/img/common/icon-datepicker.png); vertical-align:top}
.pager { margin:1em 0; text-align:center}
	.pager a { display:inline-block; *display:inline; *zoom:1; margin:0 1px; padding:0 5px; border-left:1px solid #999; text-decoration:none; line-height:1; vertical-align:top}
	.pager a:first-child { border-left:none}
		.pager a:hover { text-decoration:underline} .pager a.on {color:#a70a0a }
div.ctrl, p.ctrl { margin:5px 0; text-align:right}
	div.ctrl a, p.ctrl a { margin-left:5px}	
.tn-float { float:left; margin:.35em .75em 0 0}
.entry-format {}
	.entry-format p { margin-bottom:1em}
	.entry-format strong, .entry-format b { font-weight:bold} .entry-format em, .entry-format i { font-style:italic}
	.entry-format ul { margin-bottom:1em; list-style:inside disc} .entry-format ol {margin-bottom:1em;  list-style:inside decimal} .entry-format li { padding-left:1em}
	.entry-format h1,.entry-format h2,.entry-format h3,.entry-format h4,.entry-format h5,.entry-format h6 { margin-bottom:1em; font-weight:bold}
	.entry-format h1 { font-size:130%}	.entry-format h2 { font-size:125%}	.entry-format h3 { font-size:120%}	
	.entry-format h4 { font-size:115%}	.entry-format h5 { font-size:110%}	.entry-format h6 { font-size:105%}
	.entry-format blockquote { margin:1em 2em; padding-left:1em; border-left:1px solid #ddd}
/* layout */
body { width:100%} 
#wrap { min-width:950px; text-align:left}
#header { position:relative; z-index:3; width:950px; height:120px; margin:auto}
	.header-wrap { padding:0 11px}
	#header .utils { padding-top:5px; text-align:right}
		#header .utils a { margin:0 4px} #header .utils a:hover { text-decoration:underline}
		#header .utils a:last-child { margin-right:0}
	#header .logo { position:absolute; z-index:2; left:-34px; bottom:0; _bottom:-2px} #header .logo object { display:block}
		#header .logo .ch { display:block; margin-bottom:12px}
		#header .logo .en { display:block}
	#nav { position:absolute; z-index:1; right:0; bottom:0; width:100%; height:30px; overflow:hidden}
		#nav ul { text-align:right}
		#nav ul li { display:inline-block; height:30px; overflow:hidden; padding:0 6px; margin-left:-2px; *margin-right:2px; font-size:15px; color:#111; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif; text-align:left; line-height:30px}
			#nav ul li a { color:#111} #nav ul li.on {background:#a70a0a} #nav ul li.on a { color:#fff; }
.ceiling { height:27px; background:#a70a0a}
#content { position:relative; z-index:1; width:950px; margin:auto}
	.content-wrap { _height:1%; overflow:hidden; padding:0 11px}
	#main { float:left; width:694px; min-height:400px; _height:400px; padding:30px 0 25px 0}
	#side { float:right; width:196px; padding:30px 0 25px 0}
#footer { position:relative; z-index:2; height:75px; background:#ececec}
	.footer-wrap { width:918px; margin:auto; padding:10px 16px;}
	#footer .certif { float:left; margin:0 10px 0 0;}
		#footer .certif img { margin-right:10px}
	#footer .info { font-size:11px; font-size:10px\9; line-height:1.6}

/* module */
#maillist { position:absolute; z-index:100; top:30px; right:11px; width:220px; padding:12px; border:1px solid #d7d7d7; background:#fff; box-shadow:1px 1px 2px #000; -moz-box-shadow:1px 1px 2px #000; -webkit-box-shadow:1px 1px 2px #000; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2)\9}
	#maillist li { margin-bottom:0}
	#maillist input { width:150px; width:146px\9; margin-right:3px}
	#maillist small { width:100%}
	
	.tabview-menu { position:relative; z-index:2}
		.tabview-menu li { display:inline-block; *display:inline; *zoom:1; border:1px solid #e4e4e4; border-bottom:none; padding:5px 14px; margin-right:-5px; *margin-right:-1px; background:#fff;font-size:14px; line-height:14px; vertical-align:bottom}
			.tabview-menu li:hover { background-color:#f7f7f7}
				.tabview-menu li a { *position:relative; *top:-2px; color:#ee3024; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif}
				 .tabview-menu li:hover a { color:#2f2f2f}
		.tabview-menu li.on { position:relative; top:1px; padding:8px 14px; background:#f7f7f7; color:#2f2f2f}
			.tabview-menu li.on a { color:#2f2f2f}
	.tabview-cont { position:relative; z-index:1; border:1px solid #e4e4e4; padding:10px; background:#f7f7f7}
		
.addthis  { text-align:right}
	.addthis a { cursor:pointer;display:inline-block; width:14px; height:14px; margin-left:2px; overflow:hidden; background:url(/img/common/shareicons.png) no-repeat; text-indent:-9000px; text-align:left; vertical-align:top}
		.addthis .rss { background-position:0 0} .addthis .fb { background-position:-14px 0} .addthis .plurk { background-position:-28px 0} .addthis .print { background-position:-42px 0} .addthis .mail { background-position:-56px 0}
.tourwall {}
	.tourwall > li { display:inline-block; *display:inline; *zoom:1; width:222px; min-height:180px; _height:180px; margin:0 4px 15px 0; *margin-right:8px; padding:1px; border:1px solid #fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; background:#fff; vertical-align:top}
		.tourwall > li:hover { border-color:#e4e4e4; background-color:#f7f7f7}
	.tourwall > li > p { padding-bottom:.6em; background:url(/img/common/hr-dot.png) bottom repeat-x}
		.tourwall .tn { margin-bottom:.2em}
		.tourwall .info li { padding-bottom:.6em; background:url(/img/common/hr-dot.png) bottom repeat-x; line-height:1.3}
		.tourwall .info li b { color:#aaa; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif; font-size:13px}
#pBox { position:absolute; z-index:9999; width:100%; overflow:hidden}
	#pBox .pB-wrap { position:relative; left:50%; float:left}
	#pBox .pB-wrap2 { position:relative; right:50%; float:left; *float:none; padding:20px; _border:8px solid #444; _background:#fff}
		#pBox .pB-head { position:relative; z-index:5; overflow:hidden; padding-bottom:15px}
			#pB-heading { position:relative; width:90%; word-wrap: break-all; font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif; font-size:18px}
			#pB-descr { position:relative; width:90%; line-height:1.2; color:#888}
			#pBox .pB-ctrl { position:absolute; right:0; top:0; _right:20px; width:10%; text-align:right; line-height:1.3; white-space:nowrap}
		#pBox .pB-side { position:relative; z-index:4; float:left; width:130px; margin-right:-130px; border-right:1px solid #e4e4e4}
			#pB-menu li { margin-bottom:.5em; line-height:1.3}
				#pB-menu li a { display:inline-block; padding-left:14px; background:url(/img/common/icon-more.png) no-repeat 0 3px; color:#ee3024} #pB-menu li a:hover{ color:#a70a0a} 
				#pB-menu li a.on { color:#656565} 
		#pBox .pB-main { position:relative; z-index:3; padding-left:145px}
			#pBox .pB-cont { position:relative; min-width:100px; min-height:130px; _width:60px; text-align:center}
				#pB-img { position:relative; z-index:2}
				#pBox .pB-loading { position:absolute; z-index:1!important; top:40%; left:0; width:100%; text-align:center}
				#pBox .pB-picmenu { position:absolute; right:0; bottom:0; float:left}
					#pBox .pB-picmenu a { display:inline-block; *display:inline; *zoom:1; width:12px; margin:0 0 0 1px; padding:2px; border:1px solid #ddd; background:#fff; text-decoration:none; line-height:1; text-align:center} #pBox .pB-picmenu a:hover, #pBox .pB-picmenu a.on { background:#555; color:#fff}

		#pBox .pB-bd { position:absolute; z-index:2; left:8px; top:8px; right:8px; bottom:8px; _display:none; background:#fff}
		#pBox .pB-overlay { position:absolute; z-index:1; left:0; top:0; right:0; bottom:0; _display:none; background:#000; opacity:.5; -webkit-opacity:.5; filter:alpha(opacity=50)}

/* side module */
#side .hr { height:1px; overflow:hidden; margin:15px 0; background:#e4e4e4}
#side .contact { position:relative; z-index:2}
#side .contact h2 { background:url(/img/common/title-contact.png) no-repeat; text-indent:-9999px} 
#side .transport h2 { background:url(/img/common/title-transport.png) no-repeat; text-indent:-9999px}
#side .contact li { position:relative; padding-left:60px; margin-bottom:.5em; *height:1%; line-height:1.5; text-align:justify; color:#111}
	#side .contact li b { position:absolute; left:0; top:0; width:60px}
#side .contact .cta { float:right; margin-top:-30px; line-height:1.1}
#side .map { position:relative}
	#side .map .small img { display:block; border:1px solid #e4e4e4}
	#side .map .large { position:absolute; right:0; top:20px; overflow:hidden; display:none; width:500px; height:350px; border:1px solid #d7d7d7; background:#fff; box-shadow:2px 2px 5px #aaa; -moz-box-shadow:2px 2px 5px #aaa; -webkit-box-shadow:2px 2px 5px #aaa}
#side .transport li { position:relative; padding-left:14px; margin-bottom:.5em; *height:1%; line-height:1.5}
	#side .transport li b { position:absolute; left:0; top:0; width:14px}
	
/* debug 
#header { background:#ddd}
	.header-wrap { background-color:#FFFF99}
	#header .utils { background:yellow}
#content { border-bottom:2px solid red; background:#FFFFCC}
	.content-wrap { border-bottom:2px solid green; background:#FFCCCC}
	#main { border-bottom:2px solid black; background:#FFCC99}
	#side { border-bottom:2px solid yellow; background:#FFFF99}

.form > li { background:yellow}
	.form > li > label {background:#CCFF33}
		.form > li.twocol { background:#CCFFCC}
			.form > li.twocol > div { background-color:#99FF99}
				.form > li.twocol > div > label { background:#CCFF33}*/