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

@import 'reset.css';
@import url(https://fonts.googleapis.com/css?family=Hind:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Niconne);

html,body{height:100%; 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:400 1em/2 'Hind', sans-serif;}
.en3{font:400 1em/2 'Niconne', cursive;}
a{text-decoration:none;}

/*Loading*/
.loading{
	position:fixed;
	background:url(../images/loading1.png) no-repeat center #000;
	width:120%;
	height:120%;
	top:-10%;
	left:-10%;
	z-index:999;
}
.pLoading{
	position:absolute;
	top:50%;
	left:50%;
	background:url(../images/loading2.png) no-repeat left center;
	width:0px;
	height:90px;
	margin:-45px 0 0 -60px;
}
.loadingTxt{
	position:absolute;
	top:50%;
	left:50%;
	width:120px;
	text-align:center;
	margin:65px 0 0 -60px;
	font-size:0.8em;
	color:#fff;
}

/*main*/
#wrapper{
	position:relative;
	margin:50px;		
	background:rgba(0,0,0,0.3);
	z-index:5;
}

header{
	position:fixed;
	top:50px;
	left:0px;
	right:0px;
	height:60px;
	padding:5px 0;
	z-index:10;
	background:none;
	box-shadow:none;
}
header.whiteMask{
	background:#000;
	box-shadow:0 2px 5px rgba(0,0,0,0.3);
}
.logo{
	position:relative;
	display:block;
	width:80px;
	margin:0 auto;
	z-index:11;
}
.logo img{
	width:100%;
}
.menu{
	position:fixed;
	top:0px;
	left:-180px;
	width:130px;
	height:100%;
	background:rgba(51,51,51,0.9);
	padding:25px;
	
	-webkit-transition:left 0.6s ease-out;
	-moz-transition:left 0.6s ease-out;
	-ms-transition:left 0.6s ease-out;
	-o-transition:left 0.6s ease-out;
	transition:left 0.6s ease-out;
	z-index:10;
}
.menu.menuOpen{
	left:0;
}
.menu::before{
	content:'';
	width:0;
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
.menu ul{
	width:100%;
	display:inline-block;
	vertical-align:middle;
}
.menu li{
	margin:10px 0;
}
.menu a{
	position:relative;
	color:#ccc;
	font-size:0.8em;
	line-height:3;
	display:block;
}
.menu a:hover, .menu li.on a{
	color:#FFF;
}
.menu a::after{
	position:absolute;
	top:50%;
	right:0;
	content:'';
	width:0px;
	height:1px;
	background:#FFF;
	
	-webkit-transition:width 0.3s linear;
	-moz-transition:width 0.3s linear;
	-ms-transition:width 0.3s linear;
	-o-transition:width 0.3s linear;
	transition:width 0.3s linear;
}
.menu a:hover::after, .menu li.on a::after{
	width:30px;
}
.menu a .tw, .menu a:hover .en2{
	display:none;
}
.menu a:hover .tw{
	display:block;
}


.indexMenu{
	left:15px;
	top:90px;
	width:100%;
	height:auto;
	padding:0;
	background:none;
	
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	-o-transition:none;
	transition:none;
	
	text-align:center;
	transform:translateY(-28%);
}
.indexMenu li{
	position:relative;
	display:inline-block;
	margin:0 2%;
	vertical-align:top;
}
.indexMenu li:nth-child(3){
	margin-right:12%;
}
.indexMenu a::after,.indexMenu li.on a::after{
	right:50%;
	width:100%;
	margin:10px -50% 0 0;	
	opacity:0;
	background:#fff;
}
.indexMenu li.on a::after{
	opacity:0.3;
}
.indexMenu a:hover::after , .indexMenu li.on a:hover::after{
	width:60px;
	margin:10px -30px 0 0;	
	opacity:0.3;
}
.indexMenu .tw{
	position:absolute;
	top:0;
	left:50%;	
	width:60px;
	
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
}
.indexMenu a:hover .en2{
	display:inline-block;
	opacity:0;
}
.indexMenu a{
	color:#ccc;
}
.indexMenu a:hover, .indexMenu li.on a{
	color:#fff;
}

.menuBtn{
	position:absolute;
	z-index:11;
	display:none;
}
.menuBar{
	background:#666;
	width:25px;
	height:2px;
	margin:5px 0;
	
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}
.menuBtn.closeBtn .menuBar:nth-child(1){
	margin-top:12px;
	background:#FFF;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.menuBtn.closeBtn .menuBar:nth-child(2){
	opacity:0;
}
.menuBtn.closeBtn .menuBar:nth-child(3){
	margin-top:-14px;
	background:#FFF;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

.content{
	margin-top:80px;	
	width:100%;
	display:inline-block;
}

.subMenu{
	position:absolute;
	width:100%;
	bottom:0;
	text-align:center;
	padding:50px 0;
}
.subMenu li{
	position:relative;
	display:inline-block;
	margin:0 3%;
}
.subMenu a{
	font-size:0.9em;
	color:#fff;
}
.subMenu a::after{
	content:'';
	width:0px;
	height:1px;
	background:#fff;
	position:absolute;
	left:50%;
	top:50%;
	margin:10px 0 0 -30px;
	
	-webkit-transition:width 0.3s linear;
	-moz-transition:width 0.3s linear;
	-ms-transition:width 0.3s linear;
	-o-transition:width 0.3s linear;
	transition:width 0.3s linear;
}
.subMenu li.on a::after{
	width:100%;
	margin:10px 0 0 -50%;
}
.subMenu a:hover::after, .subMenu li.on a:hover::after{
	width:60px;
	margin:10px 0 0 -30px;
}
.subMenu a .tw{
	position:absolute;
	top:50%;
	left:50%;	
	width:60px;
	display:none;
	
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.subMenu a:hover .tw{
	display:block;
}
.subMenu a:hover .en2{
	display:block;
	opacity:0;
}

.title{
	margin:30px 0;
}
.title h1{
	font-weight:300;
	letter-spacing:0;
	font-size:1.7em;	
	line-height:1;
	color:#bbb;
}

footer.en{
	position:fixed;
	bottom:15px;
	left:0;
	width:100%;
	text-align:center;
	color:#fff;
	font-size:0.75em;
	line-height:1;
	z-index:10;
	opacity:0.3;
}
footer a{color:#fff;}

/*bg*/
.bg,.bg2{
	position:fixed;
	top:0;
	left:0px;
	bottom:0px;
	right:0;
	z-index:0;
}
.bg li,.bg2 li{
	position: absolute;
	width: 100%;
	height: 100%;
	background:center;
	background-size:cover;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.bg li:nth-child(even){
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.bg li.showNow{
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	
	-webkit-transition: -webkit-transform 11000ms ease-out;
	-moz-transition: -moz-transform 11s ease-out;
	-ms-transition: -ms-transform 11s ease-out;
	-o-transition: -o-transform 11s ease-out;
	transition: transform 11s ease-out;
}
.bg li:nth-child(even).showNow{
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#size{
	position:fixed;
	bottom:0;
	left:50px;
	z-index:9999;
	border:#C90 2px solid;
	color:#F00;
}