/* CSS Document */
@import url(../admin/_css/reset.css);
@charset "utf-8";

#d1024x768	{ width:1024px; height:50px; position:fixed; left:0; top:0; border:1px solid red;  display:none; }
#big-logo	{ width:412px; height:80px; position:fixed; left:50%; top:50%;
				margin-left:-206px; margin-top:-40px; display:none; }
#big-logo img	{ width:100%; }
.mobile-element	{ display:none; }
.lg-backdrop	{ background:rgba(0,0,0,.9); }

/* global settings */
a 						{ text-decoration:none; color:#606060; }
a:hover					{ }
a.active				{ }
a img					{ border:none; }
a						{ noFocusline:expression(this.onFocus=this.blur()); outline: 0;}
.error					{ color:#C00; margin-left:20px; }
strong					{ font-weight:bold; }
em						{ font-style:italic; }
.no-bold				{ font-weight:normal !important; }

/* font */
html, body 				{ font-family:"微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Arial,  "新細明體", "Microsoft YaHei", "Lucida Grande", "Lucida Sans Unicode",  sans-serif; font-size:12px; -webkit-text-size-adjust:none; }


/* structure */
#container				{ position:relative; padding:1px 0; margin:0 30px; /*Fix IE7*/ zoom:1; }
#bg						{ position:absolute; left:30px; top:100px; right:30px; z-index:-1; overflow:hidden; display:none; width:auto !important; }
#main-wrapper			{ margin:160px 0 80px 0; padding:1px 0; }

/* header */
#header-wrapper			{ height:100px; width:100%; position:absolute; left:0; top:0; }
#header-inner			{ padding-top:20px; }
#header-wrapper h1		{ width:368px; height:56px; }
#header-wrapper h1 a	{ width:100%; height:100%; display:block; background:url(images/logo.svg?update=20251222) no-repeat 0 50%; background-size:contain; text-indent:-999px; overflow:hidden;}

/* main */


/* toolbar */
#toolbar-wrapper		{ float:right; position:absolute; right:0; top:20px; width:240px; }
#fb-button				{ float:right; margin-right:15px; }
#share-button			{ float:right; margin-right:0; }
.langBar				{ float:left; }
.langBar .label			{ display:none; }
.langBar li				{ display:inline; margin-right:25px; color:#333; }
.langBar li img			{ display:none; }
.langBar li a			{ color:#ccc; }
.langBar li a:hover		{ color:#666; }

/* footer */
#footer-wrapper						{ overflow:hidden; height:50px; width:100%; position:absolute; bottom:0; right:0; }
#footer-wrapper p 					{ float:right; font-size:0.85em; color:#666; margin-right:0; margin-top:15px; }
#footer-wrapper p a					{ color:#999; }
#footer-wrapper p a:hover 			{ color:#666;  }
#footer-wrapper #keyboard			{ display:none; width:132px; height:22px; margin-left:0; margin-top:15px; float:left; 
										background:url(images/keyboard.jpg) no-repeat; }

/* nav */
#nav-wrapper							{ display:none; }

#nav									{ border-top:1px solid #bbb/*#DBDBDB*/; overflow:hidden; }
#nav .top-item							{ background:rgb(252,252,252); background:rgba(252,252,252,0.85) /*#FCFCFC*/; border-bottom:1px solid #C1C1C1/*#DBDBDB*/; position:relative; overflow:hidden; clear:both; /*Fix IE7*/vertical-align: bottom; /*Fix IE6*/zoom:1; }
#nav .top-item.alpha-fix				{ background:url(images/bg252a85.png) repeat;}
#nav .top-item-button					{ float:left; display:block; /*text-align:right;*/ width:64px; margin:8px 0 0 240px; padding-bottom:8px;  font-weight:bold; font-size:1.2em;  /*Fix IE6*/display:inline; }
#nav .top-item:hover					{ background:rgb(255,255,255); background:rgba(255,255,255,0.95) /*#F1F2F2*/;}
#nav .top-item.alpha-fix:hover			{ background:url(images/bg255a95.png) repeat;}
#nav .top-item.active					{ background:rgb(242,242,242); background:rgba(242,242,242,0.95) /*#F1F2F2*/; }
#nav .top-item.alpha-fix.active			{ background:url(images/bg242a95.png) repeat; }
#nav .top-item.active .top-item-button 	{ color:#BE1E2D; }
#nav .top-item .top-item-button:hover 	{ color:#BE1E2D; }
#nav .tabs								{ position:absolute; left:380px; top:8px; }
#nav .tabs a							{ margin-right:20px; font-weight:bold; font-size:1.2em; }
#nav .tabs a:hover						{ color:#BE1E2D; }
#nav .tabs a.active						{ color:#BE1E2D; }

#nav .top-news-item  .top-item-button	{ width:auto; text-align:left; margin-left:380px; }
#nav .first-top-news					{ margin-top:36px; border-top:1px solid #DBDBDB; }
#nav, #nav .last-item					{ box-shadow: 0 2px 2px -1px rgba(0,0,0,.15); }

.sub-nav									{ clear:both; }
.sub-nav .sub-item							{ background:#fff; border-top:1px solid #DBDBDB; overflow:hidden; position:relative; /*Fix IE7*/vertical-align: bottom; /*Fix IE6*/zoom:1; }
.sub-nav .sub-item-button					{ float:left; display:block; margin:6px 0 0 380px; padding-bottom:6px; font-size:1.2em; line-height:1.1em; font-weight:bold; /*Fix IE6*/display:inline;}
.sub-nav .sub-item:hover					{ background:#f9f9f9;}
.sub-nav .sub-item.active					{ background:#f9f9f9; }
.sub-nav .sub-item.active .sub-item-button 	{ color:#BE1E2D; }
.sub-nav .sub-item.focus  .sub-item-button 	{ color:#ccc; } 
.sub-nav .sub-item .sub-item-button:hover 	{ color:#BE1E2D; }
.sub-nav .sub-item .date					{ float:left; width:90px; }
.sub-nav .sub-item .name					{ width:130px; float:left; }
.sub-nav .sub-item .position				{ margin-left:10px; font-weight:normal; }

.top-item-loading 	{ width:16px; height:16px; position:absolute; right:20px; top:8px; display:none; background:url(images/loading-small.gif);}
.sub-item-loading 	{ width:16px; height:16px; position:absolute; right:20px; top:5px; display:none; background:url(images/loading-small.gif);}

.content-holder							{ clear:both; background:#fff; border-top:1px solid #DBDBDB; overflow:hidden; zoom:1;}
.content-holder.has-image				{ overflow:visible; height:460px; }
.content-holder .info					{ float:left;  width:17%; padding:30px 20px 30px 60px; text-align:right; }
.content-holder .info p					{ line-height:1.8em; }
.content-holder .contents 				{ float:left; padding:30px 0 30px 30px; max-width:640px; }
.content-holder .contents p 			{ line-height:1.8em; }
.content-holder .contents strong 		{ font-size:1.2em; }
.content-holder .justify				{ text-align:justify; text-justify:inter-ideograph;  }
.content-holder .images					{ float:left; margin-left:30px; height:460px; position:relative; width:70%; }
.content-holder .images .mask 			{ height:100%; position:relative; overflow-x:auto; width:100%;}
.content-holder .images ul				{ height:100%; overflow:hidden; width:9999px; /*position:absolute; left:0; top:0;*/ }
.content-holder .images li				{ float:left; height:100%; border-right:1px solid #fff; position:relative; }
.content-holder .images li.last-img		{ border-right:none !important; }
.content-holder .images li.loading 		{ background:url(images/loading-square.gif) no-repeat 50% 50%; }
.content-holder .images li .progress	{ position:absolute; left:50%; top:50%; display:block; width:32px; height:24px; margin-left:-18px; margin-top:-12px; font-family:Arial, Helvetica, sans-serif; font-size:1.2em; text-align:center; color:#999; display:none; }
.content-holder .images li .zoom		{ position:absolute; right:0; top:0; width:30px; height:30px; background:url(images/zoom.png) no-repeat 50% 50%; background-size:cover; opacity:0; transition:opacity .5s; }
.content-holder .images li.active:hover .zoom  { opacity:.5; }
.content-holder .image-pager			{ position:absolute; right:0; top:-28px; display:none; }
.content-holder .image-pager	a 		{ float:left; width:26px; height:20px; padding-top:8px; text-align:center; 
											border-left:1px solid #DBDBDB; color:#ccc; font-weight:bold; }
.content-holder .image-pager a:hover	{ color:#666; }
.content-holder .image-pager a.active 	{ color:#BE1E2D;}	
.content-holder .image-pager .prev 		{ background:url(images/arrow-small-left.png) no-repeat 50% 50%; text-indent:-9999px; overflow:hidden; }
.content-holder .image-pager .next 		{ background:url(images/arrow-small-right.png) no-repeat 50% 50%; text-indent:-9999px; overflow:hidden; }
.content-holder .image-slider-prev 		{ display:none; width:31px; height:48px; position:absolute; left:5px; top:50%; margin-top:-24px;
											background:url(images/arrow-left.png) no-repeat; text-indent:-9999px; }										
.content-holder .image-slider-next 		{ display:none; width:31px; height:48px; position:absolute; right:5px; top:50%; margin-top:-24px;
											background:url(images/arrow-right.png) no-repeat; text-indent:-9999px; }
.top-news-item .content-holder .image-pager { top:-33px; }
.top-news-item .content-holder .image-pager a { height:22px; padding-top:10px; }

.content-holder .scroller-view  		{ height:400px; overflow-y:auto; }
.content-holder .p_contents				{ margin-top:20px; }
.content-holder .p_link					{ margin-top:20px; }
.content-holder .p_link a				{ border-bottom:1px dotted #666; }
.content-holder .p_link a:hover			{ color:#999; }
.download-link							{ color:#BE1E2D; margin-bottom:0; }


#philosophy-content .contents			{ height:370px; width:760px; max-width:none; }
#philosophy-content .contents p			{ font-size:1.3em; text-transform:capitalize; font-family:Georgia, "Times New Roman", Times, serif, "微軟正黑體", "Microsoft JhengHei", "新細明體", "Microsoft YaHei"; width:200px; float:left; }
#philosophy-content .contents img		{ float:left; }
#awards-content .contents 				{ }
#awards-content .contents p				{ line-height:2em !important; margin-bottom:40px; }
#nav-associates	.images					{ width:460px; }
#nav-contact	.images					{ width:300px; }


/* contact-form */
#contact-form								{}
#contact-form p								{ margin-bottom:6px; }
#contact-form label							{ margin-right:20px; width:64px; float:left; padding-top:3px; }
#contact-form input							{ background:#F1F2F2; border:none; width:180px; padding:3px; }
#contact-form textarea						{ background:#F1F2F2; border:none; width:280px; height:200px; padding:3px; }
#contact-form #send-button					{ overflow:hidden; }
#contact-form #send-button input			{ background:#000; color:#fff; width:auto; padding:3px 15px; float:left; }
#contact-form #send-button input.disabled	{ background:#666; }
#contact-form #send-button input:hover		{ background:#666; }
#contact-form .error						{ display:block; margin-left:80px; }
#contact-form .msg							{ color:#C00; margin-left:80px; margin-top:25px; display:block; font-weight:bold; }
#contact-form .sending						{ display:none; width:16px; height:16px; float:left; margin:5px 0 0 10px; 
												background:url(images/loading-small.gif) no-repeat right 0; }

.mCSB_scrollTools	{ right:-30px !important; margin:0 !important; }


#check_field	{ display:none; }


/* for 600px or less */
@media screen and (max-width: 600px) {

.mobile-element			{ display:block; }
				
#menu-button			{ position:absolute; right:0; top:35px; cursor:pointer; width:24px; height:12px; z-index:9; }
#menu-button div		{ position:absolute; left:0; width:24px; height:2px; background:#000; }
#menu-button #bar-1		{ top:0; }
#menu-button #bar-2		{ top:6px; }
#menu-button #bar-3		{ top:12px; }
#back-button			{ position:absolute; left:-40px; top:30px; cursor:pointer; z-index:9; }
#back-button.show		{ left:0; }

#bg						{ top:75px; left:15px; right:15px; width:auto !important; }
#container				{ margin:0 15px; height:auto !important; }
#main-wrapper			{ margin:75px 0 0 0 !important; padding:20px 0 0 0; }
	
#header-wrapper			{ height:75px; position:fixed; left:15px; right:15px; top:0; background:#fff; z-index:999; width:auto; border-bottom:1px solid #979797; }
#header-inner			{ margin:0; padding-top:18px;  width:auto; }
#header-wrapper h1		{ display:none; }
#header-wrapper #mobile-logo		{ height:38px; display:inline; margin-top:2px; }
#header-wrapper #mobile-logo.hide	{ margin-left:-300px; }

#nav-container			{ position:fixed; left:15px; right:15px; top:75px; z-index:999; display:none; border-top:3px solid #000; }
#nav-wrapper			{ position:absolute; left:0; top:0; width:100%; overflow:hidden;  }
#nav-inner				{ position:absolute; left:0; top:0; width:100%; }
#nav-wrapper li			{ border-bottom:1px solid #979797; }
#nav-wrapper li a		{ padding:14px 15px; font-size:14px; display:block; color:#666; }
#nav-wrapper .nav-ul-wrapper	{ position:absolute; top:0; width:100%; background:#fff; box-shadow:0 2px 2px rgba(0,0,0,.25); }
#nav-wrapper .nav-ul-wrapper.lv-1	{ left:0; }
#nav-wrapper .nav-ul-wrapper.lv-2	{ left:101%; }
#nav-wrapper .nav-ul-wrapper.lv-3	{ left:101%; }
#nav-wrapper li.active > a		{ color:#BE1E2D; }


#toolbar-wrapper					{ float:none; position:static; width:auto; height:20px; padding-top:10px; border-top:1px solid #979797; }

#footer-wrapper						{ position:static; height:40px; }
#footer-wrapper p					{ float:none; margin-top:10px; }
#footer-wrapper #keyboard			{ display:none !important; }


#nav									{ border-top:none; }
#nav .top-item							{ display:none !important; border:none; }
#nav .top-item.active					{ display:block !important; background:none; }
#nav .top-item .top-item-button,
#nav .top-item .tabs,
#nav .top-item .top-item-loading		{ display:none; }
#nav, #nav .last-item					{ box-shadow:none; }
#nav .first-top-news					{ margin-top:0; }

.sub-nav .sub-item						{ display:none; border:none; }
.sub-nav .sub-item.active				{ display:block; background:none; }
.sub-nav .sub-item .sub-item-button,
.sub-nav .sub-item .sub-item-loading	{ display:none; }

.content-holder							{ border:none; height:auto !important; background:none; }
.content-holder.has-image				{ height:auto !important; }
.content-holder .info					{ float:none;  width:auto !important; padding:0; text-align:left; margin-bottom:20px; }
.content-holder .info h1				{ font-size:18px; margin-bottom:20px; }
.content-holder .contents 				{ float:none; padding:0; margin-bottom:30px; max-width:none; height:auto !important; width:auto !important; }
.content-holder .scroller-view  		{ height:auto !important; }

.content-holder .images					{ float:none; margin-left:0; height:auto !important; width:auto !important; }
.content-holder .images .mask 			{ height:auto !important; width:auto !important; }
.content-holder .images ul				{ height:auto !important; width:auto !important; position:static !important; }
.content-holder .images li				{ float:none; height:auto !important; width:auto !important; border-right:none; position:static !important;  margin:0 0 5px 0 !important; }
.content-holder .images li img			{ height:auto !important; width:100% !important; margin:0 !important; opacity:1  !important; display:block;  }
.content-holder .image-pager,
.content-holder .image-slider-prev,
.content-holder .image-slider-next		{ display:none !important; }


#philosophy-content .contents			{ background:none; max-width:none; text-align:center; }
#philosophy-content .contents p			{ width:auto; float:none; }
#philosophy-content .contents img		{ float:none; width:100%; margin:20px 0;  }
.associates-content img					{ width:100%; height:auto; margin-bottom:20px; }

.download-link								{ color:#fff; background:#000; padding:10px 30px; }
.contact-content .images					{ padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #979797; }
.contact-content .images img 				{ display:none; }
.contact-content .images img.mobile-element { display:block; width:100%; max-width:460px; }
#contact-form p								{ margin-bottom:8px; }
#contact-form label							{ display:none; }
#contact-form input							{ background:none; border:1px solid #ccc; width:95%; padding:2%; font-size:16px; font-family:inherit;  }
#contact-form textarea						{ background:none; border:1px solid #ccc; width:95%; padding:2%; height:180px; font-size:16px; font-family:inherit;  }
#contact-form #send-button input			{ display:block; width:100%; padding:2% 0; text-align:center; float:none; font-size:14px; border:none; }
#contact-form .error						{ margin-left:0; }
#contact-form .msg							{ margin-left:0; }
#contact-form .sending						{ display:none !important; }
}


/* for 420px or less */
@media screen and (max-width: 420px) {
#big-logo	{ width:90%; height:auto; position:fixed; left:5%; top:50%; margin:auto; margin-top:-40px; }	
}