@charset "UTF-8";
@import url("reset.css");
@import url("motion.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

@font-face
{
font-family: din-s;
src: url(DINPro-Light.ttf);
}
@font-face
{
font-family: din-m;
src: url(DINPro-Medium.ttf);
}
@font-face
{
font-family: din-l;
src: url(DINPro-Bold.ttf);
}


* {
    box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html,body {
	margin: 0;
	padding: 0;
	width:100%;
	height: 100%;
	-webkit-text-size-adjust:none;
	color:#000;
	line-height:1.8;
	min-width:1200px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Noto Sans TC';
	background-color:#FFFFFC;
}
a {
	color: #898989;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #9F9FA0;
}
::-moz-selection { color: #FFF; background-color: #C30D23; }
::selection { color: #FFF; background-color: #C30D23; }

/*NAV*/
.nav {
	width:200px;
	height:370px;
	position:fixed;
	left:0px;
	top:10px;
	font-family:din-m;
	z-index:9999;
}
h1.logo {
	width:110px;
	height:180px;
	padding-top:10px;
	padding-left:30px;
}
h1.logo a {
	width:110px;
	height:180px;
	display:block;
	background-image:url(../img/logo.png);
	background-repeat:no-repeat;
	background-size:100% auto;
	text-indent:-9999px;
}
h1.logo a:hover {
	opacity:0.3;
}
.nav ul {
	padding-top:15px;
}
.nav ul li {
	padding-left:30px;
	line-height:34px;
	display:block;
	height:30px;
	
}
.nav ul li:hover {
	background-image:url(../img/dot.png);
	background-repeat:no-repeat;
	background-size:30px auto;
	background-position:5px 0px;
	-webkit-animation-name:logo;
	-webkit-animation-duration:0.5s;
	-webkit-animation-timing-function:steps(1);
	-webkit-animation-iteration-count:infinite;
	animation-name:logo;
	animation-duration:0.1s;
	animation-timing-function:steps(1);
	animation-iteration-count:infinite;
}
.nav ul li a {
	color:#000;
	display:block;
}
.nav ul li a:hover {
	color:rgba(0,0,0,0.3);
}

.nav ul li a.10th-nav {
	color:#9F9FA0;
}


/*
------------------ #nav_switch --------------------
*/

#nav_switch{
	display: none;
	cursor: pointer;
	position: fixed;
	top: 59px;
	right: 10px;
	width: 48px;
	height: 40px;
	background-color:#FFF;
}
#nav_switch .bar{ 
	width: 48px; 
	height: 1px;  
	position: absolute; 
	left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#nav_switch .bar.bar01{ 
	top: 0;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	-ms-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	background-color:#000;
}
#nav_switch .bar.bar02{ 
	top: 14px;
	background-color:#000;
}
#nav_switch .bar.bar03{ 
	top: 28px;
	-webkit-transform-origin: 30% 50%;
	-moz-transform-origin: 30% 50%;
	-o-transform-origin: 30% 50%;
	-ms-transform-origin: 30% 50%;
	transform-origin: 30% 50%;
	background-color:#000;
}

#nav_switch.active .bar.bar01{ 
	left: 6px;
	top: 2px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color:#C30D23;
}
#nav_switch.active .bar.bar02{ 
	display: none;
}
#nav_switch.active .bar.bar03{
	left: 2px;
	top: 26px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background-color:#C30D23;
}

.copyright {
	font-family:din-s;
	font-size:11px;
	transform: rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	position:fixed;
	left:-80px;
	top:500px;
	z-index:9999;
}
.copyright b {
	font-family:din-l;
	font-size:14px;
}



/*FOR MOBILE*/
@media screen and (max-width: 767px) {
	* {
		box-sizing:border-box;
		-webkit-box-sizing: border-box;
	}
	html,body {
		min-width:100%;
	}
	/*HEADER*/
	/*NAV*/
	.nav {
		width:100%;
		height:100px;
		position:fixed;
		left:0px;
		top:0px;
		font-family:din-m;
		z-index:9999;
		background-color:#FFF;
	}
	h1.logo {
		width:50px;
		height:80px;
		padding-top:10px;
		padding-left:10px;
		margin-bottom:20px;
	}
	h1.logo a {
		width:50px;
		height:80px;
		display:block;
		background-image:url(../img/logo.png);
		background-repeat:no-repeat;
		background-size:100% auto;
		text-indent:-9999px;
	}
	.nav ul {
		background-color:rgba(255,255,255,0.9);
		display:block;
		margin-top:20px;
		padding-top:0px;
		display:none;
	}
	.nav ul li {
		padding-left:10px;
		line-height:40px;
		display:block;
		height:40px;
	}
	.nav ul li:hover {
		background-image:none;
		border-bottom:#C30D23 solid 2px;
	}
	.nav ul li a {
		color:#000;
		display:block;
	}
	.nav ul li a:hover {
		color:rgba(0,0,0,1);
	}
	#nav_switch{
		display: block;
		z-index:99999;
	}
	/*COPY*/
	.copyright {
		font-family:din-s;
		font-size:11px;
		transform: rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		position: relative;
		left:10px;
		top:0px;
		z-index:9999;
		padding-top:30px;
		clear:both;
		display:inline-block;
	}
	.copyright b {
		font-family:din-l;
		font-size:14px;
	}

	

}
/*FOR TABLET*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
}