@charset "utf-8";
/* CSS Document */

@import 'reset.css';

html,body{overflow-x:hidden;}
body{
	font:1em/2 "STHeiti Light ", "Heiti TC", '微軟正黑體', "Microsoft JhengHei", sans-serif;
	letter-spacing:0.5px;
}
.en{font:1em/2 Arial, Helvetica, sans-serif;}
.en2{font:1em/2 Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#FFF;}

/*Loading*/
.loading{
	position:fixed;
	z-index:999;
	top:-15%;
	left:0;
	right:0;
	bottom:-15%;
	background:#000;
}
.box2{
	width:80px;
	height:80px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-40px 0 0 -40px;
	border-radius:50%;
	color:#FFF;
	font-size:0.6em;
	text-align:center;
	line-height:80px;
}

.box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 1px 1px 0px white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin:-40px 0 0 -40px;
  -moz-animation: spin 0.7s linear infinite;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*intro photo*/
.section{
	background:#000;
}
.open{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#000;
}
.bg{
	position:absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
	
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);

}
.open.showNow .bg{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	-ms-transform:scale(1,1);
	-o-transform:scale(1,1);
	transform:scale(1,1);
}
.open:nth-child(2n) .bg{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	-ms-transform:scale(1,1);
	-o-transform:scale(1,1);
	transform:scale(1,1);
}
.open:nth-child(2n).showNow .bg{
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
.txt{
	position:absolute;
	color:#FFF;
	max-width:600px;	
}
.txtRB{
	right:100px;
	bottom:150px;
}
.txtLT{
	left:100px;
	top:40%;
}
.txtLB{
	left:100px;
	bottom:150px;
}
.t1{
	position:relative;
	font-size:2em;
	line-height:1em;	
	padding-left:10px;
	margin-left:-10px;
	border-left:#ea601a solid 2px;
	
	opacity:0;
}
.t2{
	position:relative;
	font-size:1.2em;
	line-height:1.5em;
	padding-left:10px;
	margin-left:-10px;
	border-left:#ea601a solid 2px;
	
	opacity:0;
}
.t3{
	position:relative;
	font-size:0.8em;
	color:#CCC;
	margin:10px 0;
	
	opacity:0;
	top:40px;
}
.showNow .t1{
	opacity:1;	
	transition:all 0.6s linear 1.3s;
}
.showNow .t2{
	opacity:1;	
	transition:all 0.6s linear 1s;
}
.showNow .t3{
	opacity:1;
	top:0px;	
	transition:all 0.6s linear 1.6s;
}

.scroll{
	position:absolute;
	bottom:40px;
	left:50%;
	width:30px;
	height:30px;
	z-index:3;
	margin-left:-15px;
	cursor:pointer;	
	border-bottom:#FFF solid 1px;
	border-left:#FFF solid 1px;
	
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

/*main*/
.top{	
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:10;		
}
header{
	background:rgba(0,0,0,0.2);
	padding:10px 100px;
}
.logo{
	height:50px;
}
.mainMenu, .mainMenu ul{
	float:right;
	position:relative;
}
.mainMenu li{
	float:left;
	padding-left:40px;
	height:50px;
	position:relative;
	line-height:50px;
	font-size:0.9em;
	text-align:center;
}
.mainMenu li a .en2{
	font-weight:300;
}
.mainMenu li a .tw{	
	opacity:0;
	position:absolute;
	left:50%;
	width:64px;
	margin-left:-12px;
	font-weight:bold;
}
.mainMenu li a:hover .en2{
	opacity:0;
}
.mainMenu li a:hover .tw{
	opacity:1;
}
.menuBar{
	position:absolute;
	left:100%;
	bottom:-8px;
	height:1px;
	width:1px;
	background:#900;
	opacity:0;
	
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-ms-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}

.mobileBtn{
	position:absolute;
	top:50px;
	right:40px;
	display:none;
	cursor:pointer;
}
.mobileBar{
	width:30px;
	height:2px;
	margin:5px 0;
	background:#FFF;
}

.subMenu{
	position:fixed;
	left:100px;
	top:50%;
	font-size:0.8em;
	opacity:0;
	z-index:9;
	
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
}
.subMenu.show{
	opacity:1;
}

.subMenu a{
	color:#000;	
}
.subMenu li{
	padding-left:20px;
	position:relative;
	cursor:pointer;
}
.subMenu li:hover{
	background:#FFF;
}
.subMenu li::before{
	content:'';
	position:absolute;
	left:0;
	top:50%;
	margin-top:-3px;
	width:7px;
	height:7px;
	background:#999;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
.subMenu li.on::before{
	background:#900;
}
.subMenu li .en2{
	opacity:0;
}
.subMenu li:hover .en2{
	opacity:1;
}
.subMenu .tw{
	display:none;
}

.top.fixed{
	position:fixed;
	top:-26px;
	left:0;
}
.fixed header{
	background:#222;
	-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.5);
	-moz-box-shadow:0 1px 5px rgba(0,0,0,0.5);
	-o-box-shadow:0 1px 5px rgba(0,0,0,0.5);
	box-shadow:0 1px 5px rgba(0,0,0,0.5);
}

.topLink, .bottomLink{
	background:rgba(0,0,0,0.2);
	padding:2px 100px;
	margin-bottom:1px;
	overflow:hidden;
}
.bottomLink{
	background:none;
}
.topLink ul,.bottomLink, .bottomLink ul{
	float:right;
}
.topLink li, .bottomLink li{
	float:left;
	margin-left:10px;
	width:20px;
	height:20px;
	overflow:hidden;
}
.topLink li img, .bottomLink li img{
	-webkit-transition:margin 0.3s ease-out;
	-moz-transition:margin 0.3s ease-out;
	-ms-transition:margin 0.3s ease-out;
	-o-transition:margin 0.3s ease-out;
	transition:margin 0.3s ease-out;
}
.topLink li:hover img, .bottomLink li:hover img{
	margin-top:-20px;
}

.main{
	padding:0 100px;
	overflow:hidden;
}
.content{
	margin:200px auto;
	max-width:1200px;
}
/*內頁背景*/
.bg2{
	width:100%;
	height:100%;
	overflow:hidden;
	background-size:cover;
	background-position:center;
	opacity:1;
}
/*內頁標題*/
.pageTitle{
	/*position:absolute;
	top:50%;
	left:0;	
	width:100%;*/
	/*margin-top:-55px;*/
	text-align:center;
	/*text-shadow:0 0 10px rgba(0,0,0,0.5);*/
	z-index:3;
	margin-bottom:100px;
}
.pageTitle .en2{
	color:#FFF;
	font-size:3em;
	line-height:1.5em;
}
h1{
	color:#FFF;
	font-size:1.2em;
	font-size:1em;
	line-height:1em;
	font-weight:normal;
}
h1::before,h1::after{
	content:'';
	width:50px;
	height:1px;
	background:#FFF;
	display:inline-block;
	margin:5px 10px;
}

.subTitle{
	text-align:center;
	margin-bottom:80px;
}
.typeTitle{
	/*font-size:1.5em;*/
	font-size:2em;
	line-height:1.5em;
	text-align: center;
}
.subTitle .en2{
	/*font-size:1.5em;*/
	font-size:2em;
	line-height:1.5em;
}
h2{
	font-size:0.9em;
	line-height:1.5em;
	color:#ea601a;
	font-weight:normal;
}
h2::before,h2::after{
	content:'';
	width:200px;
	height:1px;
	background:#ea601a;
	display:inline-block;
	margin:5px 10px;
}
.triTitle{
	margin-bottom:20px;
}
.triTitle .en2{
	color:#ea601a;
	font-size:0.9em;
}
.triTitle .en2::after{
	content:'';
	display:inline-block;
	height:1px;
	width:15px;
	background:#ea601a;
}
h3{
	line-height:1.5em;
}
.article p{
	color:#fff;
	font-size:0.8em;
}

footer{
	font-size:0.8em;
	background:#000;
	padding:10px 0 10px 100px;
	height:20px;	
}
footer .en2, footer a{
	color:#ddd;
	line-height:20px;
}

.goTop{
	position:fixed;
	z-index:10;
	right:100px;
	bottom:55px;
	opacity:0;
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-ms-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
	
	width:25px;
	height:25px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.goTop a{
	display:block;
	-webkit-transform:rotate(-45deg) translate(-3px,-5px);
	transform:rotate(-45deg) translate(-3px,-5px);
}
.goTop.show{
	opacity:1;
}

/*wechat*/
.wechat{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	z-index:11;
	text-align:center;
	display:none;
}
.wechat::before{
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:100%;
}
.wechat img{
	display:inline-block;
	vertical-align:middle;
	width:150px;
}
.wechat .closeQr{
	width:20px;
	position:absolute;
	right:20px;
	top:20px;
	cursor:pointer;
}

/*color*/
.purple{background:#8c67a9;}
.green{background:#0c9d7b;}
.darkgreen{background:#074a59;}
.yellow{background:#f4eb2b;}
.orange{background:#ea601a;}

.purpleL{background:#baa4cb;} /*rgba(186,164,203,1)*/
.greenL{background:#6dc4b0;} /*rgba(109,196,176,1)*/
.darkgreenL{background:#6a929b;} /*rgba(106,146,155,1)*/
.yellowL{background:#f8f380;} /*rgba(248,243,128,1)*/
.orangeL{background:#f2a076;} /*rgba(242,160,118,1)*/