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

html, body 											{ margin:0; padding:0; border:0; font-size:12px; /*line-height:1.2em; */ line-height: auto!important;
														vertical-align:baseline; height:100%;}
body												{ font-family: 'Lato', Arial,'微軟正黑體',sans-serif;
													  width:100%; height:auto; overflow-y:scroll; -webkit-text-size-adjust: none; 
													}
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; color: inherit;}
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; }
.hidemenu											{ display: none; }

.left												{ float:left;}
.right												{ float:right; }
.inline 											{ display: inline;}
.block 												{ display: block;}
.blockletter 										{ text-transform: uppercase;}
.cursor	 											{ cursor: pointer;}

.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; }

/* ===================== 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; }

/* h */
h1 													{ font-size: 48px; }
h2 													{ font-size: 36px; }
h3 													{ font-size: 24px; }
h4 													{ font-size: 16px; }
h5 													{ font-size: 12px; }
h6 													{ font-size: 10px; }
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; }


/* ==================================== Structure ==================================== */
#wrap												{ position:relative; width: 1920px; overflow: hidden;/*margin-left: 113px; padding-right: 200px;*/} 

/* header */
#wrapper-header 									{ 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: 0;}

/* bg */
.bgsma 												{ background:url('../img/bg1.jpg') no-repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmb 												{ background:url('../img/bg2.jpg') no-repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmc 												{ background:url('../img/bg3.jpg') repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmd 												{ background:url('../img/bg4.jpg') repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsme 												{ background:url('../img/bg5.jpg') repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}
.bgsmf 												{ background:url('../img/bg6.jpg') repeat top left fixed #0d5c96; /*-webkit-transition: background-image 1s ease-in-out; transition: background-image 1s ease-in-out;*/}

/* deco */

.deco 
.sma01												{ position: absolute; width: 340px; height: 374px; top: 0; left: 1034px; background:url('../img/sma01.png') no-repeat center center; z-index: -1;}
.sma02												{ position: absolute; width: 456px; height: 595px; top: 0; right: 268px; background:url('../img/sma02.png') no-repeat center center; z-index: -2;}
.sma03												{ position: absolute; width: 502px; height: 479px; bottom: 0; right: 458px; background:url('../img/sma03.png') no-repeat center center; z-index: -3;}
.sma04												{ position: absolute; width: 413px; height: 350px; top: 350px; right: 0px; background:url('../img/sma04.png') no-repeat center center; z-index: -4;}
.sma05												{ position: absolute; width: 443px; height: 375px; bottom: 0; right: 108px; background:url('../img/sma05.png') no-repeat center center; z-index: -5;}

.sma1bg												{ position: absolute; width: 887px; height: 1012px; top: 0; right:0; background:url('../img/sma1.png') no-repeat center center; z-index: -1;}
.sma2bg												{ position: absolute; width: 1026px; height: 655px; top: 210px; right: 0; background:url('../img/sma2.png') no-repeat center center; z-index: -1;}
.sma3bg												{ position: absolute; width: 1026px; height: 655px; top: 210px; right: 0; background:url('../img/sma3.png') no-repeat center center; z-index: -1;}
.sma4tbg											{ position: absolute; width: 80%; height: 80%; bottom: 120px; left: 950px;background-size:contain; background-repeat: no-repeat; z-index: 10001; }
.sma4tbg:hover 										{ width: 90%; height: 90%; /*margin-left: 50px; margin-top: 100px;*/ margin-left: -2.5%; margin-top: -2.5%;}
.sma4t1bg											{ background-image:url('../img/cert1.jpg'); }
.sma4t2bg											{ background-image:url('../img/cert2.jpg'); }
.sma4t3bg											{ background-image:url('../img/cert3.jpg'); }
.sma4t4bg											{ background-image:url('../img/cert4.jpg'); }
.sma4t5bg											{ background-image:url('../img/cert5.jpg'); }
.sma4t6bg											{ background-image:url('../img/cert6.jpg'); }
.sma4t7bg											{ background-image:url('../img/cert7.jpg'); }

.deco .ribbon .rib_top								{ position: absolute; width: 299px; height: 343px; top: 0; right: 76px; background:url('../img/ribbon.png') no-repeat center center; z-index: -1;}
.deco .ribbon .rib_btm								{ position: absolute; width: 299px; height: 343px; bottom: 0; right: 76px; background:url('../img/ribbon.png') no-repeat center center; z-index: -1;}
.ribbon .rib_footer 								{ position: absolute; width: 624px; height: 66px; bottom: 0; left: 0; background:url('../img/rib_footer.png') no-repeat center center; z-index: 1;}


/* heading */
#heading											{ width:100%; max-width: 1080px; color: #fff; font-size: 22px; line-height: 38px; vertical-align: middle; position:absolute; top:50px; left: 57px;}
#heading img										{ width:100%; max-width: 67px; margin-right: 20px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}
#heading span 										{ vertical-align:middle; /*display:table-cell;*/}
#heading a											{ display: inline-block; }

/* meuns - menu & submenu */
.menus												{ width:100%; max-width: 1080px; color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.5px; vertical-align: middle; text-transform: uppercase;}
.menus img											{ width:100%; max-width: 45px; margin: 0 30px 15px 10px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}
.menus span 										{ vertical-align:middle; text-transform: uppercase; display: inline-block;}
.menus span.item 									{ border: 2px solid #539dd1; border-radius: 25px; padding: 12.5px 20px; margin-right: 15px; margin-bottom: 15px; cursor: pointer;} 
.menus span.item.active								{ border: 2px solid #fff; background: rgba(83,159,209, 0.7);} 
.menusplain											{ width:100%; max-width: 1080px; color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 0.5px; vertical-align: middle; display:inline; text-transform: uppercase; text-decoration: underline; margin-left: 20px; cursor: pointer;}
.menusplain .item.active 							{ background: none;}
.menusplain .item:after 							{ content: '|'; padding: 0 10px; }
.menusplain .item:last-of-type:after				{ content: ''; padding: 0;}

.menus .bsma:hover:before, .menus .bsmb:hover:before { position: absolute; z-index: 100000; content: ''; top: 40px; width:48px; height:30px; cursor:pointer; background:url('../img/mobile-menu-arrow-down.png') center center no-repeat; text-align:center;}
.menus .bsma:before                     { margin-left: 15px;}
.menus .bsmb:before                     { margin-left: 15px;}


/* menu */
#menu												{ position:absolute; top:140px; left: 57px; }
/* submenu */
.submenu											{ position:absolute; top:70px;}
.submenu:before 									{ content: ''; width: 2px; height: 25px; background: #539dd1; position: absolute; bottom: 100%; margin-left: 30px; top: -25px;}
.submenu .item:after  								{ content: ''; width: 18px; height: 2px; background: #539dd1; position: absolute; bottom: 100%; margin-left: 22px; top: 24px;}
.submenu .item:last-of-type:after					{ width: 0;}

.submenu.sma 									        	{ margin-left: 30px; }
.submenu.smb 									        	{ margin-left: 30px; }

/* language */
#language-desktop									{ float:right; width: auto; margin-right: 30px; padding: 0 10px; }
#language-desktop>li 								{ display:inline-block; /*float:left;*/ margin: 0; }
#language-desktop>li:first-child 					{ content:"|"; /*border-right: 1px solid #fff;*/ }
#language-desktop>li>a								{ display:block; color:#fff; font-size:12px; padding: 12px 10px; }
#language-desktop>li>a:hover						{ color:#fe1f25; }
#language-desktop>li.midline 						{ font-weight: normal; font-size: 8px;}


#wrapper-content 									{ min-height: 920px; /*position: absolute;*/}

.content 											{ float:left;/* display: inline-block; */}

.content img 										{ width:100%;}
.content.text										{ color: #fff; margin-top: 300px; /*padding-bottom: 5%;/*margin-right: 100px; position:absolute; */}
.content .texts										{ margin-left: 140px;}
	
.content.text .title								{ color: #fff;  font-size: 60px; line-height:58px; font-weight: 300; margin-top:-10px; text-shadow: 2px 2px 3px #000;}
.content.text .texts 								{ 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.text.smtbl 								{ max-width: 1130px; margin-bottom: 60px;}
.content.text.smtbl.sma0 .subtext 					{ margin: 18px 0;}
.content.text.smtbl.sma3							{ max-width: 940px;}
.content.text.smtbl.sma4							{ max-width: 800px;}
.content.text.smtbl.smc0,.content.text.smtbl.sme0	{ max-width: 1920px;}

.content.text.smtbl .subtitle						{ margin: 36px 0 0;}
.content.text.smtbl .subtext						{ margin: 36px 0; padding-left: 50px; border-left: 1px solid #dedcdc;}
.content.text.smtbl .subtext h1 					{ font-size: 18px; font-weight: bold;}

.content.text.smtbl .subsubmenu 					{ padding: 36px 0 18px;}
.content.text.smtbl .smb1t							{ margin-bottom: 120px;}
.content.text.smtbl .smb1t4,
.content.text.smtbl.smb2,
.content.text.smtbl.smb3							{ margin-bottom: 120px;}

.content a 											{ color:#fff; text-decoration: underline;}
.content .highlight a 								{ color:#fe1f25; text-decoration: underline;}

.content .world 									{ padding: 36px 0 0;}
.content .world .area 								{ position:absolute; }
.content .world .area:hover 						{ opacity:0.2;}

.content .world .area.world1a						{ left: 270px; top: 80px; width: 270px; height: 222px;}
.content .world .area.world1b						{ left:600px; top: 250px; width:120px;	height:32px;}
.content .world .area.world1c						{ left:640px; top: 480px; width:150px;	height:32px;}
.content .world .area.world2a						{ left:720px; top: 90px; width:400px; height:182px;}
.content .world .area.world2b						{ left:1000px; top: 340px; width:110px;	height:32px;}
.content .world .area.world3q						{ left: 840px; top: 273px; width: 160px; height: 110px;}
.content .world .area.world4q						{ left: 970px; top: 443px; width: 260px; height: 170px;}

.content .desc .subtext 							{ position: absolute; text-transform: uppercase;}
.content .desc .world1 .subtext 					{ left: 800px; top: 300px;}
.content .desc .world2 .subtext 					{ left: 500px; top: 300px;}
.content .desc .world3 .subtext 					{ left: 600px; top: 300px;}
.content .desc .world4 .subtext 					{ left: 200px; top: 300px;}

.content .highlight 								{ color: #fe1f25;}
.content .strong 									{ font-weight: bold;}

/* footer */
#wrapper-footer										{ position:absolute; margin:0 auto; /*max-width:1920px;*/ width:100%; bottom: 0px; padding:30px 0 60px; color: #a0a0a0; z-index: 1000;}
/*#footer 											{ position:absolute; left:0px; padding: 35px 0px; background-color:#000; text-align:left; font-size:14px; }*/
#footer												{ position:absolute; left:0px; top: 35px; text-indent:200px; width:100%; color: #fff; text-align:left; font-family: Arial; font-size:11px; line-height:16px; text-transform:uppercase;/*text-shadow: 1px 1px 10px #e4e4e4;*/}
.footicon											{ position:absolute; left:80px; /*padding: 35px 0px;*/ font-size:14px; margin-top: 8px;}

.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: 18px;}

.footicon>ul>li>a.mail								{ width:25px; background:url('../img/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:25px; background:url('../img/mail.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; }


/* mobile */
											  
/* slide menu */
.mobile-menu-btn									{ position: absolute; top: 70px; right:50px; width: 20px; height: 18px; display: none; z-index: 10003;
													  background:url('../img/mobile-menu-btn.png') center center no-repeat; cursor: pointer; }
.mobile-menu-btn.active								{ background:url('../img/mobile-menu-close.png') center center no-repeat; }

#mobile-plane										{ position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer;
													  background:#be2222; z-index:10001; display:none; }
.wrapper-slide-menu									{ position: fixed; top: 120px; bottom: 0; width: 100%; overflow: auto; z-index: 10002;}

.m-menu 											{ display: none;}
.m-logo												{ position:absolute; top:40px; left: 37px;  z-index: 10004; display: none;}
.m-logo img								  			{ width:100%; max-width: 67px; margin-right: 20px; /*filter: drop-shadow(1px 1px 1px #e4e4e4);*/}	
.m-image 											{ display: none;}

.slide-menu											{ width: 100%; height:auto; position:relative; display:none; }
.slide-menu>li										{ display:block; position:relative;  }
.slide-menu>li:first-child							{ border-top:none; }
.slide-menu>li>span									{ display:block; position:absolute; right:36px; top:18px; width:48px; height:30px; 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;  padding: 25px 0; font-size:15px; text-align:center; cursor: pointer;}
.slide-menu>li>a:hover								{ color:#fff; text-decoration:none; }
.slide-menu>li>ul									{ display:none; }
.slide-menu>li>ul>li								{ display:block; }
.slide-menu>li>ul>li>a								{ display:block; color:#fff; padding: 25px 0; font-size:14px; text-align:center; text-decoration:none; cursor: pointer; background: #0d5c96;}
.slide-menu>li>ul>li>a:hover						{ color:#fff; }

/* mobile language */
#language-mobile									{ padding: 15px 0; text-align:center; font-size:15px; color:#fff;  }
#language-mobile span								{ display:inline-block; margin: 0 10px; }
#language-mobile span a,
#language-mobile span a:hover						{ color:#fff; text-decoration:none; }


@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;}
}