@charset "utf-8";
/* CSS Document */
/*【default】*/
/*-----------------------------------------------------整體預設架構-------------------------------------------------------------*/
	body{
		background-color: #020005;
	}
	header img,main img,footer img{
		width:100%;
		display: block;
	}
/*------------------------------------------------------------wrapper--------------------------------------------------*/
	#wrapper{
		width:100%;
	}
/*---------------------------------------------------header---------------------------------------*/
	header{
		position: relative;
		z-index: 10000;
	}
/*------------------------------------top---------------------------------------*/
	header .top{
		width: 98%;
		margin: 0 auto;
	}
/*------------------------------logo--------------------------------*/
	.logo{
		height: auto;
		float: left;
	}
/*-------------------------------nav--------------------------------*/
	nav{
		float: right;
	}
	nav > ul > li{
		position: relative;
		display: inline-block;
		margin: 0 30px;
	}
	nav > ul > li#n6{
		margin: 0;
	}
	ul  li .h2font{
		transition: all 0.5s ease;
	}
	ul  li .h2font:hover{
		color: #c391fd;
	}

/*子選單*/
	nav ul > li > ul{
		position: absolute;
		left: -87px;
		top:100px;
		z-index: 9999;
		width: 300px;
		padding: 30px 0;
		opacity:0;
		visibility:hidden;
		background-color: rgba(84, 63, 110, 0.9);
		text-align: center;
		transition: all 0.5s ease;
	}
	nav ul > li:hover ul{
		top:70px;
		opacity:1;
		visibility:visible;
	}
	nav ul > li > ul >li a{
		display: block;
		color: #fff;
		line-height: 70px;
	}
	nav ul > li > ul >li:hover a{
		color: #fff;
		background-color:rgba(45, 34, 58, 0.9) ;
	}

/*------------------------------sNav--------------------------------*/
	#sNav{
		display: none;
	 }
/*---------------------------------------------------footer-------------------------------------*/
	footer{
		position: relative;
		clear: both;
		font-size: 22px;
	}
/*-------------------------information----------------------------*/
	footer .information{
		width: 98%;
		margin: 0 auto;
	}
	footer .information .area{
		margin-bottom: 8px;
	}
	footer .information .area div{
		float: left;
		margin-left: 30px;
	}
	footer .information .area div:first-child{
		margin-left: 0;
	}
	footer small{
		font-size: 14px;
		letter-spacing: 1px;
	}
	footer span{
		margin-left: 30px;
	}
/*----------------------------link--------------------------------*/
	footer .link{
		position: absolute;
		right: 0;
		bottom: 10px;
		width: 320px;
	}
	footer .link img{
		position: absolute;
		top: 2px;
		left: 15px;
		width: 70px;
		height: auto;
		transition: transform 0.5s ease;
	}
	footer .link .word{
		text-align: center;
		font-weight: bold;
	}
	footer .link .word div:first-child{
		font-size: 17px;
		line-height: 1.2em;
		padding-bottom: 12px;
	}
	footer .link .word div:last-child{
		font-size: 28px;
		background-color: rgba(84, 63, 110, 0.7);
		padding: 7px 0;
	}
	footer .link:hover img{
		transform: scale(0.9);
	}
	footer .link:hover a{
		color: #fff;
	}

/*---------------------------buttonTop----------------------------*/
	footer #buttonTop {
		position: fixed;
		z-index: 1000;
		right: 0;
		bottom: 0;
		display: none;
		background:url(../img/arrow.png) center no-repeat;
		width: 50px;
		height: 50px;
		cursor: pointer;
		transition:bottom 0.5s ease;
	}
	footer #buttonTop:hover{
		bottom: 10px;
	}

/*熒幕尺寸【小於】16801時頁面顯示*/
@media (max-width:1680px) {
/*---------------------------------------------------header---------------------------------------*/
/*-------------------------------nav--------------------------------*/
	nav > ul > li{
		margin: 0 10px;
	}
	nav > ul > li .h2font{
		font-size: 26px;
	}
}

/*熒幕尺寸【小於】1441時頁面顯示*/
@media (max-width:1440px) {
/*---------------------------------------------------footer-------------------------------------*/
	footer{
		font-size: 18px;
	}
/*----------------------------link--------------------------------*/
	footer .link img{
		top: 0px;
	}
}

/*熒幕尺寸【小於】1281時頁面顯示*/
@media (max-width:1280px) {
/*---------------------------------------------------header---------------------------------------*/
/*------------------------------------top---------------------------------------*/
	header .top{
		width: 100%;
	}
/*------------------------------logo--------------------------------*/
	.logo {
		float: none;
		margin: 0 auto;
	}
/*-------------------------------nav--------------------------------*/
	nav{
		display: none;
	}
/*------------------------------sNav--------------------------------*/
	#sNav {
		display: block;
		text-align: center;
	}
/*---------------sNav_button------------------*/
	#sNav_button {
		position: absolute;
		z-index: 101;
		top:10%;
		right: 1%;
		width: 80px;
		height: 50px;
	}
	#sNav_button .h2font {
		color: #fff;
		background-color: rgba(195, 145, 253, 0.5);
		padding: 0 10px;
		line-height: 1.3em;
		cursor: pointer;
		transition: all 0.3s ease;
	}
/*---click MENU後，出現的X---*/
	#sNav_button .cancel {
		display: none;
		position: absolute;
		top: 10%;
		right: 0;
		cursor: pointer;
	}
	#sNav_button .cancel .line {
		width: 40px;
		height: 2px;
		background-color: #fff;
	}
	#line1 {
		transform: rotate(45deg);
	}
	#line2 {
		transform: rotate(-45deg) translate(0, -2px);
	}
/*----------------sNav_menu-------------------*/
	#sNav_menu {
		display: none;
		position: absolute;
		z-index: 100;
		width: 104%;
		background-color: #000;
		top: 0;
		left: 0;
		opacity: 0;
	}
	.scrollWork {
		overflow-y: scroll;
	}
	#sNavScroll {
		height: 100vh;
	}
	#sNav_menu > #sNavScroll > ul {
		position: relative;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 60%;
		transform: translate(-50%, -50%);
	}
	#sNav_menu > #sNavScroll > ul > li {
		margin-bottom: 50px;
	}
	#sNav_menu > #sNavScroll > ul > li:last-child {
		margin-bottom: 0;
	}
	#sNavClose{
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100vh;
	}
	/*子選單*/
	.sNavItem{
		display: none;
		border-top: 1px solid #81798a;
		padding: 15px 0;
		margin: 20px 0;
	}
	.sNavItem li{
		padding: 15px 0;
	}
/*---------------------------------------------------footer-------------------------------------*/
	footer .information div{
		margin-bottom: 15px;
	}
	footer .information .area {
		margin-bottom: 0;
	}
	footer .information .area div{
		float: none;
		margin-left: 0;
	}
	footer span {
		display: block;
		margin-left: 0;
		margin-top: 7px;
	}
/*----------------------------link--------------------------------*/
	footer .link{
		top: -40%;
	}
}

/*熒幕尺寸【小於】1025時頁面顯示*/
@media (max-width:1024px) {
/*---------------------------------------------------header---------------------------------------*/
/*------------------------------sNav--------------------------------*/
/*---------------sNav_button------------------*/
	#sNav_button {
		right: 3%;
	}
/*---------------------------------------------------footer-------------------------------------*/
	footer{
		padding-top: 80px;
		padding-bottom: 70px;
	}
/*----------------------------link--------------------------------*/
	footer .link{
		position: relative;
		float: right;
	}
	footer .link:hover img{
		transform: scale(1);
	}
/*-----------------------information------------------------------*/
	footer .information{
		width: 94%;
		float: initial;
		margin-top: 150px;
	}
}

/*熒幕尺寸【小於】769時頁面顯示---平板*/
@media (max-width:768px) {
/*---------------------------------------------------footer-------------------------------------*/
	footer{
		border-top: 1px solid #81798a;
	}
/*---------------------------buttonTop----------------------------*/
	footer #buttonTop:hover{
		bottom: 0;
	}
}

/*熒幕尺寸【小於】481時頁面顯示---手機*/
@media (max-width: 480px) {
/*---------------------------------------------------footer-------------------------------------*/
	footer {
		padding-top: 50px;
		padding-bottom: 40px;
		font-size: 15px;
	}
/*-------------------------information----------------------------*/
	footer .information{
		margin-top: 100px;
	}
	footer small{
		font-size: 8px;
	}
/*----------------------------link--------------------------------*/
	footer .link {
		width: 250px;
	}
	footer .link img {
		width: 60px;
		left: 9px;
	}
	footer .link .word div:first-child{
		font-size: 14px;
	}
	footer .link .word div:last-child{
		font-size: 22px;
	}
}