/* 
===================== LAYOUT ===================== 
*/
/* ==================================== General ==================================== */

html, body 											{ margin:0; padding:0; border:0; font-size:12px; /*line-height:1.2em; */ line-height: auto!important;
														font-family: 'robotoregular', Arial,'微軟正黑體',sans-serif; vertical-align:baseline; height:100%;}
body												{ height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; 
													  width:100%; background: #000!important;}
body * 												{ outline:none; }

table 												{ border-collapse:collapse; border-spacing:0; width:100%; }

td													{ vertical-align:top; }
ol, ul 												{ /*list-style:none;*/ margin:0; padding:0; }
dl, dt, dd											{ margin:0; padding:0; }
a 													{ margin:0; padding:0; border:0; text-decoration:none;  
														word-wrap: break-word;}
a:hover												{ text-decoration: underline; }
a img 												{ border:none; }
h1,h2,h3,h4,h5,h6									{ font-weight:normal; margin:0; padding:0; }
strong 												{ font-weight:bold; }
em 													{ font-style:italic; }
.hide												{ display: none; }

.left												{ float:left;}
.right												{ float:right; }
.inline 											{ display: inline;}

.clearfix											{ zoom:1; }
.clearfix:after										{ content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; }

::-webkit-input-placeholder 						{ color: #fff; font-size:16px; }
:-moz-placeholder 									{ color: #fff; font-size:16px; }
::-moz-placeholder 									{ color: #fff; font-size:16px; }
:-ms-input-placeholder 								{ color: #fff; font-size:16px; }

.grey												{ color:#999999; }
.mobile												{ display: none; }

.only-desktop										{ display:block!important; }
.only-mobile										{ display:none!important; }

/* ==================================== Structure ==================================== */
#wrap												{ padding: 0; position:relative; /*margin-left: 113px; padding-right: 200px;*/} 
#mobile-plane										{ position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer;
														background:url('../img/bg-black-50.png') 0 0 repeat; z-index:999; display:none; }

/* header */
#wrapper-header 									{ margin-top: -30px; z-index:1001;}
/*
#wrapper-header										{ width:100%; height:auto; position:fixed; top:0; z-index:1000; background:rgba(0,0,0,0.8);}
#header												{ position:relative; margin:0 auto; max-width:1920px; height:80px; }
*/
.margin 											{ position: relative; margin-left: 113px; padding-right: 200px; }


/* logo */
#logo												{ width:319px; position:absolute; top:80px; left: 0;/*width:212px; position:absolute; top:55px; left: 0;*/ }
#logo a												{ display:block; }
#logo img											{ width:100%; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}

/* language */
#language-desktop									{ display:none; float:right; width: auto; margin: 20px 0 0 0; padding: 0 10px; background-color:#000; }
#language-desktop>li 								{ display:block; float:left; margin: 0 0 0 0; }
#language-desktop>li:first-child					{ margin:0; }
#language-desktop>li>a								{ display:block; color:#fff; font-size:12px; padding: 12px 10px; }
#language-desktop>li>a:hover						{ color:#25b0d9; }

/* main menu */
#menu-btn{ 
	position:absolute; 
	/*bottom:26px;*/ 
	right:100px; 
	top:100px; 
	z-index:1000;
}
#menu-btn #lines,
#menu-btn #menu{ 
	position:absolute; 
	top:0; 
	right:0px;
	z-index:1000; 
	
	display:block;
}
#menu-btn #lines{
	opacity:1;
}
#menu-btn #menu{ 
	opacity:0;
	width:100px;
	height:184px;
}

#menu-btn #menu>ul{ 
	display:block; 
	text-align:center; 
}
#menu-btn #menu>ul>li{ 
	display:block; 
	color:#fff;  
	margin:0px; 
	
	-webkit-transition: height 0.3s; 
	transition: height 0.3s;
	
	overflow-y: hidden;
	overflow-x: visible;
	height:6px;	
	
	margin-bottom:8px;
}
#menu-btn #menu>ul>li:first-child{
	height:0px;
	-webkit-transition: height .5s; 
	transition: height .5s;
	margin-bottom:0px;
}
#menu-btn #menu>ul>li:nth-child(2){
	margin-bottom:7px;
}
#menu-btn #menu>ul>li a{ 
	display:block; 
	font-size:16px; 
	color:#FFF;
	/*padding: 4px 0 4px;*/ 
	/*color: transparent;*/ 
	text-decoration:none; 
	font-family: 'robotoblack'; 
	text-align: right; 
	width:100px; 
	/*margin-left:-60px;*/
	padding-top:6px;
}

#menu>ul>li a:hover,
#menu>ul>li a.active { 
	/*text-shadow: 1px 1px 1px #e4e4e4;*/ 
	font-weight:bold; 
	text-decoration:none; 
	text-indent: -200px; 
	background:none;
}


#menu>ul>li .white									{ background: #fff; color: #fff; width:60px; height: 10px; 
														margin:0px; position:relative; top: 40px; left:130px;}
#menu>ul>li .grey									{ background: #c3c5c7; color: #c3c5c7; width:60px; height: 10px; 
														margin:0px; position:relative; top: 90px; left:66px;}
#menu>ul>li .black									{ background: #000; color: #000; width:60px; height: 10px; 
														margin:0px; position:relative; top: 140px; left:3px;}

/* menu-btn */
#menu-btn ul>li .line:before{ 
	content:"";
	background: #fff; 
	color: #fff; 
	width:36px; 
	height: 6px; 
	line-height:8px; 
	margin:0px; 
	position:relative;
	display:block;
}
#menu-btn>#lines>ul									{ display:block; text-align:center; }
#menu-btn>#lines>ul>li								{ list-style-type: none; padding-bottom:8px;}
#menu-btn>#lines>ul>li:first-child					{ margin:0;}
#menu-btn>#lines>ul>li .line.line0 					{ opacity:0; margin-top: -15px;}
#menu-btn>#lines>ul>li .line.line1 					{ /*animation:5s ease-out 0s infinite slideInFromTop;*/}														  
#menu-btn>#lines>ul>li .line.line2.anim 					{ /*margin-left: -5px;*/ animation: 5s ease-in-out 0s infinite slideInFromLeft;}		
#menu-btn>#lines>ul>li .line.line3.anim 					{ /*margin-right: 5px;*/ animation: 5s ease-out 0s infinite slideInFromRight;}															  
													  
#menu-btn.show #lines, 
#menu-btn.show #lines .line 						{ opacity:0;top:1px;}
#menu-btn.active>#lines>ul>li .line.line2 					{ animation-play-state:initial;}		
#menu-btn.schow>#lines>ul>li .line.line3 					{ animation-play-state:initial;}	
#menu-btn #menu >ul>li .line:before,
#menu-btn.active #menu >ul>li .line:before{
	position:absolute;
	right:0px;
}
#menu-btn #menu										{
	/*animation: fade-out .1s !important; animation-fill-mode: forwards!important;
	animation-delay: 1.9s;*/
}
#menu-btn.show #menu{ 
	/*animation: fade-in .95s !important; animation-fill-mode: forwards!important;*/
	opacity:1; 
	margin-left:0px; 
	display:block;
	top:-1px;
} 
#menu-btn.active #menu>ul>li{
	height:46px;
}
#menu>ul>li>div>a:hover span 						{ opacity: 1!important;}
#menu-btn.active div.line a {color:#FFF;}
#menu-btn.show div.line:hover a{
	color:#ffdc2d !important;
}
#menu-btn.show div.line:hover:before{
	background-color:#ffdc2d;
}

@keyframes fade-out {
	0% { opacity: 1;/* transform: scale(1);*/}
	95% {opacity: 0;/* transform: scale(1);*/}
	100% { opacity: 0;}
}
@keyframes fade-in {
	0% { opacity: 0;/* transform: scale(.1);*/}
	5% {opacity: 0;/* transform: scale(0.95);*/}
	100% { opacity: 1; /*transform: scale(1);*/}
}
												  
@keyframes slideInFromTop {
  0% {transform: translateY(-30%);}
  50% {transform: translateY(0);}
  100% {transform: translateY(-30%);}
}													  
@keyframes slideInFromLeft {
  0% {transform: translateX(0);}
  50% {transform: translateX(-10%);}
  100% {transform: translateX(0);}
}
@keyframes slideInFromRight {
  0% {transform: translateX(0);}
  50% {transform: translateX(20%);}
  100% {transform: translateX(0);}
}
@keyframes slideDown1 {
  0% {transform: translateY(0);}
  100% {transform: translateY(48px);}
}
@keyframes slideDown2 {
  0% {transform: translateY(0);}
  100% {transform: translateY(80px);}
}		
@keyframes slideDown3 {
  0% {transform: translateY(0);}
  100% {transform: translateY(110px);}
}
@keyframes slideUp1 {
  0% {transform: translateY(48px);}
  100% {transform: translateY(0);}
}
@keyframes slideUp2 {
  0% {transform: translateY(80px);}
  100% {transform: translateY(0);}
}		
@keyframes slideUp3 {
  0% {transform: translateY(110px);}
  100% {transform: translateY(0);}
}

@keyframes text-in {
  0% {transform: translateY(-10%); opacity:1;}
  100% {transform: translateY(0); opacity:1;}
}
@keyframes text-out {
  0% {transform: translateY(0); opacity:1;}
  100% {transform: translateY(-10%); opacity:1;}
}
																	  
													  
/* slide menu */
.mobile-menu-btn									{ position: absolute; top: 11px; right:30px; width: 20px; height: 30px; display: none; 
														background:url('../img/mobile-menu-btn.png') center center no-repeat; cursor: pointer; }
.mobile-menu-btn.active								{ background:url('../img/mobile-menu-btn.png') center center no-repeat; }

.wrapper-slide-menu									{ position: fixed; top: 50px; width: 100%; overflow: auto; }

.slide-menu											{ width: 100%; height:auto; position:relative; display:none; }
.slide-menu>li										{ display:block; position:relative; border-top: #fff solid 1px; }
.slide-menu>li:first-child							{ border-top:none; }
.slide-menu>li>span									{ display:block; position:absolute; right:0; top:0; width:79px; height:44px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.png') center center no-repeat; text-align:center; }	
.slide-menu>li>span.active							{ background:url('../img/mobile-menu-arrow-up.png') center center no-repeat; }
.slide-menu>li>a									{ display:block; color:#fff; background:url('../img/bg-black-50.png') 0 0 repeat; padding: 15px 0; font-size:15px; text-align:center; }
.slide-menu>li>a:hover								{ color:#fff; text-decoration:none; }
.slide-menu>li>ul									{ display:none; }
.slide-menu>li>ul>li								{ display:block; border-top: #8cc8d9 solid 1px; }
.slide-menu>li>ul>li>a								{ display:block; background-color:#25b0d9; padding: 15px 0; font-size:14px; text-align:center; text-decoration:none; }
.slide-menu>li>ul>li>a:hover						{ color:#fff; }

/* mobile language */
#language-mobile									{ padding: 15px 0; text-align:center; font-size:15px; color:#fff; background:url('../img/bg-black-50.png') 0 0 repeat; }
#language-mobile span								{ display:inline-block; margin: 0 10px; }
#language-mobile span a,
#language-mobile span a:hover						{ color:#fff; text-decoration:none; }

/* footer */
#wrapper-footer										{ position:absolute; margin:0 auto; /*max-width:1920px;*/ width:100%; bottom: 0px; padding:30px 0 60px; background-color:#141414; color: #a0a0a0; }
/*#footer 											{ position:absolute; left:0px; padding: 35px 0px; background-color:#000; text-align:left; font-size:14px; }*/
#footer												{ position:absolute; left:0px; text-indent:113px; width:100%; color: #636363; text-align:left; font-size:14px; line-height:19px; font-family: 'robotoregular'; margin-top:-10px; /*text-shadow: 1px 1px 10px #e4e4e4;*/}
.footicon											{ position:absolute; right:5px; /*padding: 35px 0px;*/ font-size:14px; margin-top: -30px;}

.footicon											{ float:right; /*margin: 0 20px 0 0; padding: 25px 0 0;*/ }
.footicon>ul										{ display:inline-block; vertical-align: middle;}
.footicon>ul>li										{ display:inline-block; /*float:left; margin: 0 0 0 30px;*/ border-left: 1px solid #292929;}
.footicon>ul>li>a									{ display:block; height: 90px;}

.footicon>ul>li>a.mail								{ width:90px; background:url('../img/i_mail.png') center center no-repeat; }
.footicon>ul>li>a.utube								{ width:90px; background:url('../img/i_utube.png') center center no-repeat; }
.footicon>ul>li>a.facebook							{ width:90px; background:url('../img/i_fb.png') center center no-repeat; }

.footicon>ul>li>a.mail:hover						{ width:90px; background:url('../img/i_mail_v.png') center center no-repeat; }
.footicon>ul>li>a.utube:hover						{ width:90px; background:url('../img/i_utube_v.png') center center no-repeat; }
.footicon>ul>li>a.facebook:hover					{ width:90px; background:url('../img/i_fb_v.png') center center no-repeat; }

/* 
===================== SHARING ===================== 
*/
/* grid */
.full												{ width:100%; }
.half												{ width:50%; }
.one_third											{ width:33.33%; }
.two_third											{ width:66.66%; }
.forty												{ width:40%; }
.sixty												{ width:60%; }

/* sep */
.sep-10												{ height: 0px; clear:both; padding: 5px 0; }
.sep-15												{ height: 0px; clear:both; padding: 8px 0 7px; }
.sep-0												{ height: 0px; clear:both; padding: 0 0; }
.sep-for-4											{ height: 0px; clear:both; padding: 0 0; }
.sep-for-3											{ height: 0px; clear:both; padding: 0 0; }
.sep-for-2											{ height: 0px; clear:both; padding: 0 0; }
.sep-line											{ height: 1px; clear:both; padding: 0 0; margin: 0 10px 0 0; background-color:#fff; }

/* heading */
h1 													{ font-size: 48px; }
h2 													{ font-size: 36px; }
h3 													{ font-size: 16px; }
h4 													{ font-size: 12px; }
h1,h2,h3,h4											{ line-height:1.2em; margin:0; color:#009fdf; display:block;  }
p													{ /*font-size:14px; line-height:2em; margin:0; color:#333;*/ }
hr													{ padding:0; height:1px; border:0; width: 100px; margin: 1em 0; 
														background-color: #fff; text-align:left; }
/* form */
dl													{ padding:0; }
dl dt												{ width:20%; float:left; padding:2px 0; text-transform:uppercase; }
dl dd												{ width:80%; float:left; }

select												{ border:none; /*background:#606 url('../img/bg-purple-80.png') 0 0 repeat; */
														color:#606; padding:2px 10px; -webkit-appearance: menulist; }

input[type=text], textarea							{ padding:15px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color:#fff; font-size:16px;
            											box-sizing: border-box; width:100%; background:url('../img/bg-white-30.png') 0 0 repeat; border:none; }
textarea											{ height:130px; }
input[type=text].error, textarea.error				{ border: red solid 1px; }
.error-msg											{ color: red; font-size:16px; text-align:left; margin:4px 0 0 0; }
.message_box										{ color:red; font-size:16px; margin: 20px 0 0 0; }

/* pager */
.pager												{ margin:0 0 0 0 !important; padding:0; }
.pager li											{ float:left; margin:0 0 0 5px; padding:0; list-style:none; }
.pager li:first-child								{ margin:0; }
.pager a											{ display:block; width:22px; text-align:center; font-size:11px; 
														color:#606; background:url('../img/bg-white-30.png') 0 0 repeat; 
														border:1px solid #c2bfa4; padding-top:1px;}
.pager a:hover, .pager a.active 					{ background:url('../img/bg-purple-80.png') 0 0 repeat; color:#fff;}

.pager a.first, .pager a.prev, 
.pager a.next, .pager a.last						{ background:url('../img/pager.png') no-repeat; text-indent:-9999px;}
.pager a.first										{ background:url('../img/pager.png') no-repeat left top;}
.pager li:hover a.first								{ background-position:left bottom;}
.pager a.prev										{ background:url('../img/pager.png') no-repeat -20px top;}
.pager li:hover a.prev								{ background-position:-20px bottom;}
.pager a.next										{ background:url('../img/pager.png') no-repeat -40px top;}
.pager li:hover a.next								{ background-position:-40px bottom;}
.pager a.last										{ background:url('../img/pager.png') no-repeat right top;}
.pager li:hover a.last								{ background-position:right bottom;}

/* buttons */
.button-warp										{ padding: 0; position: relative; text-align:left; }
.button												{ display:inline-block; padding: 2px 26px; color:#333; 
														border:solid 1px #333; text-transform:uppercase; }
.button:hover										{ border:solid 1px #fff; color:#fff; background-color:#333; }


/* 
===================== MODULES ===================== 
*/
/* ==================================== Homepage ==================================== */

#wrapper-content 									{ min-height: 100vh; margin-bottom:250px; /*position: absolute;*/}

.content 											{ float:left;/* display: inline-block; /*margin-bottom: 160px;*/}

.content.slogan										{ width:50%; /*margin-right: 60px;*/ margin-top: 280px; }
.content.slogan img 								{ width:100%;}
.content.text										{ width:50%; color: #d8d8d8; margin-top: 280px; /*padding-bottom: 5%;/*margin-right: 100px; position:absolute; */ text-shadow: 1px 1px 1px #000;}
.content .texts										{ margin-left: 60px; padding-bottom: 200px;}
	
.content.text .title								{ color: #fefefe; font-family: 'robotoblack'; font-size: 26px; line-height:58px; font-weight: bold; margin-top:-10px;}
.content.text .subtitle	 							{ color: #ffdc2d; font-family: 'robotobold'; font-size: 16px; margin: 5px 0 30px; padding-top: 0!important; min-height:30px;}
.content.text .sep									{ background: #ffdc2d; width:115px; height: 8px; margin:42px 0 104px;}
.content.text .sub  								{ font-weight:bold; margin-right: 10px;}
.content.text .und 									{ text-decoration: underline;}

.content.text .pup 									{ font-family: 'robotobold'; color: #fff; font-size: 21px; font-weight: bold; display:inline-block;}
.content.text .add 									{ font-family: 'Microsoft Jhenghei'; color: #000; font-size: 21px; font-weight: bold; display:inline-block;}
.content.text .chi 									{ font-family: 'Microsoft Jhenghei'; font-size: 20px; line-height: 36px; font-weight: bold; 
													  margin-bottom: 30px;}
.content.text .eng 									{ font-family: 'robotoregular'; font-size: 16px; line-height: 26px; font-weight: normal;
													  }
.content.text .map 									{ margin-left: 10px; background: url('../img/map.png'); width:19px; height:25px; display:inline-block;}
.content.text .map:hover 							{ background: url('../img/map_v.png');}


.content a 											{ color:#fff!important}
.content.text a 									{ color:#fff!important; text-decoration:none;}
.content.text a:hover 								{ color:#ffdc2d!important; text-decoration:none;}

.grey 												{ background: #1b1b1b;} 
.aboutus 											{ background: url(../img/aboutus.jpg) no-repeat center top fixed #1b1b1b;
													  -webkit-background-size: cover;
													  -moz-background-size: cover;
													  -o-background-size: cover;
													  background-size: cover;}

.services 											{ background: url(../img/service.jpg) no-repeat left top fixed #1b1b1b; 
													  -webkit-background-size: cover;
													  -moz-background-size: cover;
													  -o-background-size: cover;
													  background-size: cover;}

.contactus 											{ background: url(../img/contactus.jpg) no-repeat left top fixed #1b1b1b; 
													  -webkit-background-size: cover;
													  -moz-background-size: cover;
													  -o-background-size: cover;
													  background-size: cover;}
													  
/* ==================================== Other pages ==================================== */

#brand 												{ clear:both; margin-left: 100px; margin-top:-200px; /*padding-bottom: 25%;*/ display:inline-block} 
.brand 												{ margin: 30px 10px 0;}
.brand img 											{ width: 100%;}

.brand.text .title									{ color: #ffdc2d; font-family: 'robotoblack'; font-size: 28px; font-weight: bold; margin-top:-10px;}
.brand.text .subtitle	 							{ color: #ffdc2d; font-family: 'robotoregular'; font-size: 18px; margin: 5px 0 30px; padding-top: 0!important;}
.brand.text .sep									{ /*background: #ffdc2d; width:115px; height: 8px; margin:42px 0 104px;*/}
.brand.text .eng 									{ font-family: 'robotoregular'; font-size: 18px; line-height: 28px; font-weight: normal; color:#d8d8d8; border-left: 1px solid #ffdc2d; padding-left:35px; margin-top: 40px}