@import url("reset.css");
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
	letter-spacing: 1px;
}
body{
	display: none;
}
html,body{
	‐webkit‐text‐size‐adjust: none;
	background-color: #fff;
}
html{
	font-size: 18px;
	line-height: 1.6em;
}
img{
	display: block;
}
/* ------------------------------------ */
#loading{
	position: fixed;
	background-color: #fff;
	color: #1ea8ff;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	text-align: center;
}
.loader {

  	height: auto;
  	margin: 0 auto;
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
}
.loader > div{
	margin-top: 1em; 
}
/*
  Set the color of the icon
*/
svg path,svg rect{
  fill: #1ea8ff;
}
/* ------------------------------------ */
#app{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.navbar{
	display: none;
}
/* --------------------------------- */
#app > header{
	width: 100%;
	height: auto;
}
#app > header > .header-top{
	padding: 20px 0;
	width: 80%;
  	margin: 0 auto;
	background-color: #fff;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
}
#app > header > .header-top > .main-nav{
	width: auto;
	height: 100%;
}
#app > header > .header-top > .main-nav > ul{
    display: flex;
    margin: 0;
}
#app > header > .header-top > .main-nav > ul > li{
	list-style: none;
	line-height: 70px;
}
#app > header > .header-top > .main-nav > ul > li > a{
	text-decoration: none;
	font-size: 18px;
	color: #404040;
	padding: 0 30px;
	transition: 0.4s;
	border-bottom: solid 3px transparent;
}
#app > header > .header-top > .main-nav > ul > li > a:hover{
	border-bottom: solid 3px #ff8300;
}
#app > header > .header-top > a{
	display: block;
	height: 70px;
	width: auto;
}
#app > header > .header-top > a > img{
	height: 100%;
	width: auto;
}
/* --------------------------------- */

#app > header > .header-bottom{
	height: auto;
	width: 100%;
	background: linear-gradient(#002ea3,#0b1d75);
	z-index: 10;
}
#app > header > .header-bottom > #pd-nav{
	width: 100%;
	height: 100%;
	color: #fff;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll::-webkit-scrollbar{
	display: none;
}
#app > header > .header-bottom > #pd-nav > .layer-1{
	width: 90%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
    list-style: none;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li{
	width: auto;
	padding: 0 10px;
	z-index: 999;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li:hover{
	background-color: #0b1d75;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > a{
	display: block;
	width: 100%;
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 80px;
	font-size: 18px;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > a > i{
	transition: transform 0.5s;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > .layer-2{
	position: absolute;
	width: auto;
	min-width: 120px;
	overflow: visible;
	clear: left;
	background-color: #09175b;
	transform: translateX(-10px);
	opacity: 0.9;
	display: none;
	text-align: center;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > .layer-2 > li{
	padding: 0 10px;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > .layer-2 > li:hover{
	background-color: #13257c;
}
#app > header > .header-bottom > #pd-nav > .layer-1 > li > .layer-2 > li > a{
	display: block;
	line-height: 80px;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
}
#pd-nav > .layer-1 > li:hover > a > i{
	transform: rotate(180deg);
}
/* ------------------------------------------------- */
#app > footer{
	width: 100%;
	height: auto;
	background: linear-gradient(#002ea3,#0b1d75);
}
#app > footer > div{
	width: 80%;
	margin: 0 auto;
	padding: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#app > footer > div > #footer-logo{
	width: 30%;
	color: #fff;
	font-size: 14px;
}
#app > footer > div > #footer-logo > img{
	width: 100%;
}
#app > footer > div > #footer-logo > p{
	margin: 1em 0;
}
#app > footer > div > #footer-info > ul{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#app > footer > div > #footer-info > ul > li{
	display: flex;
	color: #fff;
	font-size: 16px;
	line-height: 2em;
}
#app > footer > div > #footer-info > ul > li > .info{
	width: 100px;
}
/* ------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1357px){
	#app > header > .header-top{
		width: 90%;
		height: auto;
		padding: 12px 0;
	}
	#app > header > .header-top > .main-nav{
		width: 55%;
		height: auto;
	}
	#app > header > .header-top > .main-nav > ul{
		justify-content: space-between;
		margin-bottom: 0;
	}
	#app > header > .header-top > .main-nav > ul > li > a{
		padding: 0 14px;
		font-size: 16px;
	}
	#app > header > .header-top > a{
		width: 45%;
		height: auto;
		max-width: 366px;
	}
	#app > header > .header-top > a > img{
		width: 100%;
		height: auto;
	}
	#app > header > .header-bottom > #pd-nav > .layer-1{
		width: 100%;
	}
	#app > header > .header-bottom > #pd-nav > .layer-1 > li > a{
		font-size: 16px;
		line-height: 60px;
	}
	#app > header > .header-bottom > #pd-nav > .layer-1 > li > a > i{
		display: none;
	}
	#app > header > .header-bottom > #pd-nav > .layer-1 > li > .layer-2{
		visibility: hidden;
	}
	#app > footer > div{
		width: 90%;
	}
	#app > footer > div > #footer-info > ul{
		margin: 0;
	}
	#app > footer > div > #footer-info > ul > li{
		font-size: 14px;
	}
}

@media only screen and (max-width: 767px) {

	.navbar{
		display: block;
	}
	#app > header{
		display: none;
	}
	/* footer */
	#app > footer > div{
		display: block;
		width: 90%;
		padding: 1em; 
		margin: 0 auto;
	}
	#app > footer > div > #footer-logo{
		width: 100%;
		font-size: 12px;
	}
	#app > footer > div > #footer-logo > img{
		width: 60%;
	}
	#app > footer > div > #footer-info > ul{
		margin: 0;
		display: block;
	}
	#app > footer > div > #footer-info > ul > li{
		font-size: 10px;
	}
	#app > footer > div > #footer-info > ul > li > .info{
		width: 23%;
	}
	
}