@charset "utf-8";
@font-face{
	font-family: "Marzo W00 Regular";
	src:url("../font/1e6ec96c95301fa73aa1d026f161a269.eot");
	src:url("../font/1e6ec96c95301fa73aa1d026f161a269.eot?#iefix") format("embedded-opentype"), url("../font/1e6ec96c95301fa73aa1d026f161a269.woff2") format("woff2"), url("../font/1e6ec96c95301fa73aa1d026f161a269.woff") format("woff"), url("../font/1e6ec96c95301fa73aa1d026f161a269.ttf") format("truetype"), url("../font/1e6ec96c95301fa73aa1d026f161a269.svg#Marzo W00 Regular") format("svg");
}
body{
	color:#fff;
	font-family:"Noto sans","微軟正黑體",sans-serif;
}
.slide{
	width:100%;
	height:100vh;
	text-align:center;
	font-size:0;
}
.slide:before{
	content:"";
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
.center{
	display:inline-block;
	vertical-align:middle;
}
#home{
	background:#000 url(../images/stars.png) no-repeat top center;
	z-index:0;
}
#home div.center{
	width:786px;
	height:878px;
	background:url(../images/home-bg.png);
}
h1{
	margin:0 auto;
	width:560px;
	height:500px;
	line-height:878px;
	letter-spacing:2px;
	font-family:"Marzo W00 Regular", sans-serif;
	color:#87bcc9;
	font-size:65px;
}
#home div.wrapper{
	overflow:hidden;
	position:relative;
	margin:0 auto;
	width:169px;
	height:29px;
}
#home img{
	position:absolute;
	left:0;
	transform: translateX(-100%);
	animation:slide-in forwards;
	animation-delay:2s;
	animation-duration:.5s;
}
@keyframes slide-in{
	from{transform:translateY(-100%);}
	100%{transform:translateY(0);}
}
#home ul{
	position:fixed;
	top:calc(50vh - 85px);
	right:0;
	text-align:right;
	color:#87bcc9;
	font-size:18px;
}
#home ul li{
	margin:0 40px 60px 0;
}
#home ul li:after{
	content:"";
	display:inline-block;
	width:14px;
	height:14px;
	margin:-1px 0 0 30px;
	vertical-align:middle;
	background:rgba(255,255,255,.2);
	border:solid 2px #87bcc9;
	border-radius:7px;
}
#about{
	position:relative;
	background-color:#111;
	text-align:center;
	padding:100px 0;
}
#about .bg1{
	position:absolute;
	top:0;
	right:0;
	width:1200px;
	height:800px;
	background-image:url(../images/44464-O4DTK2.png);
	background-position:right top;
	background-repeat:no-repeat;
}
#about .bg2{
	position:absolute;
	bottom:0;
	left:0;
	width:1200px;
	height:800px;
	background-image:url(../images/44464-O4DTK22.png);
	background-position:left bottom;
	background-repeat:no-repeat;
}
#about .topic p{
	margin-bottom:50px;
}
#about .content p{
	text-align:left;
	margin-bottom:30px;
	font-size:18px;
	line-height:24px;
	color:#f1f1f1;
}
#lectures-menu{
	overflow:auto;
	background-color:#111;
	background-image: linear-gradient(rgba(135,188,201,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(135,188,201,.1) 1px, transparent 1px);
	background-size:40px 40px, 40px 40px, 8px 8px, 8px 8px;
	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
#lectures-menu .topic{
	margin:0 auto;
	text-align:center;
	width:550px;
	height:242px;
	background-image:url(../images/lectures-bg.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.topic p{
	padding:20px 0 0 ;
	letter-spacing:2px;
	font-family:"Marzo W00 Regular","微軟正黑體",sans-serif;
	font-size:60px;
}
.timeline{
	margin:0 auto;
	width:1px;
	height:120px;
	background:#87bcc9;
}
.content{
	clear:both;
	overflow:auto;
	margin:0 auto;
	width:1280px;
	text-align:center;
	letter-spacing:2px;
	font-family:"Marzo W00 Regular","微軟正黑體",sans-serif;
	font-size:30px;
}
.content p:nth-child(odd){
	margin-top:40px;
	color:#87bcc9;
}
.content p:nth-child(even){
	margin:10px 0 40px 0;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	width:20%;
	height:50px;
	z-index:10;
}
.nav-trigger{
	display:inline-block;
	position:relative;
	margin:30px 0 0 20px;;
	padding-left:50px;
	font-size:24px;
	font-family:"Marzo W00 Regular","微軟正黑體",sans-serif;
	transition:.3s;
}
.nav-trigger:before{
    position:absolute;
    top:2px;
    left:10px;
    width:24px;
    height:4px;
    background:#fff;
    box-shadow:0 4px transparent, 0 8px #fff, 0 12px transparent, 0 16px #fff;
    content:'';
	transition:.3s;
}
.nav-trigger:hover{
	color:#87bcc9;
}
.nav-trigger:hover.nav-trigger:before{
    background:#87bcc9;
    box-shadow:0 4px transparent, 0 8px #87bcc9, 0 12px transparent, 0 16px #87bcc9;
}
.nav-trigger-active:hover{
	color:#111;
}
.nav-trigger-active:hover.nav-trigger:before{
    background:#111;
    box-shadow:0 4px transparent, 0 8px #111, 0 12px transparent, 0 16px #111;
}
#masthead{
	position:fixed;
	top:0;
	left:0;
	width:20%;
	height:100vh;
	padding-top:50px;
	background:#111;
	z-index:1;
}
.masthead-content{
	width:80%;
	margin:60px 30px;
}
.masthead-content a{
	display:block;
	width:120px;
	height:120px;
	margin:0 auto;
	background:url(../images/logo.png) no-repeat;
	background-size:contain;
}
.masthead-content p{
	margin-top:30px;
	text-align:center;
	line-height:24px;
	font-size:16px;
	color:#bbb;
}
#side-nav{
	position:fixed;
	top:0;
	width:20%;
	height:100vh;
	background:#87bcc9;
	z-index:2;
}
.side-nav{
	left:-20%;
	transition:.3s;
}
.side-nav-active{
	left:0;
}
#side-nav ul{
	margin:80px 20px 0 30px;
	color:#555;
	font-size:16px;
	line-height:22px;
}
#side-nav li{
	list-style:none;
}
#side-nav li:hover{
	color:#111;
}
#side-nav ul li{
	margin-top:10px;
}
#side-nav ul li ul{
	margin:0 0 0 20px;
}
#side-nav ul li li{
	margin-top:3px;;
}
#lecture-wrap{
	position:absolute;
	top:0;
	right:0;
	width:80%;
	overflow:auto;
	background-color:#111;
	background-image: linear-gradient(rgba(135,188,201,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(135,188,201,.1) 1px, transparent 1px);
	background-size:40px 40px, 40px 40px, 8px 8px, 8px 8px;
	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
#lecture-content{
	width:80%;
	margin:5% auto;
}
.lecture-name{
	padding:20px 0 0 ;
	letter-spacing:2px;
	font-family:"Marzo W00 Regular","微軟正黑體",sans-serif;
	font-size:48px;
}
.lecture-name span{
	color:#87bcc9;
}
.w-content{
	clear:both;
	min-width:960px;
	margin:60px auto 0;
	padding:20px;
	text-align:center;
	background:rgba(135,188,201,.2);
	border:solid 1px #87bcc9;
	border-radius:8px;
}
.w-content p{
	margin:0 0 20px 0;
	text-align:left;
	font-family:"Noto sans","微軟正黑體",sans-serif;
	font-size:18px;
	line-height:24px;
}
.w-content p:nth-last-child(3n){
	font-size:24px;
	font-weight:bold;
}
.w-content iframe{
	margin:0 0 60px 0;
}
.w-content a{
	text-decoration:underline;
}
.w-content a:hover{
	color:#87bcc9;
}
.doc-dl a{
	display: inline-block;
	text-indent: -100px;
	margin-left: 100px;
}