@charset "utf-8";
		* {
		transition: all .3s;
		outline: none;
		}
		html {
			font-size: 10px;
			font-family: "Lucida Grande", "Century Gothic", "Microsoft JhengHei", sans-serif;
		}
		body {
			margin: 0;
			padding: 0;
		}
		h2 {
			font-size: 5rem;
			line-height: 65px;
			margin: 10px 0;
		}
		h3 {
			font-size: 3rem;
			line-height: 40px;
			margin: 10px 0;
		}
		h4 {
			font-size: 3rem;
			line-height: 35px;
			margin: 10px 0;
		}
		p {
			font-size: 1.5rem;
			line-height: 30px;
			margin: 10px 0;
			color: #666666;
		}
		a {
			text-decoration: none;
		}
		/*前導頁*/
		/*前導頁-底*/
		aside:before{
			content: '';
			position:absolute;
			width: 130%;
			height: 130%;
			left: -10%;
			transform:rotate(10deg);
			background-color: #FFF;
		}
		aside { 
			position: fixed;
			background-color: #FFF;
			width: 100%;
			height: 100%;
			z-index: 99;
			opacity: 1;
			top: 0;
			left: 0;
			animation-name: logo_map;
			animation-duration: 0.3s;
			animation-delay:2s;
			animation-iteration-count:1;
			animation-fill-mode: both;
		}
			@keyframes logo_map {
			0% {
			opacity: 1;
			left: 0;
			}

			20%{
			opacity: 1;
			left: 50%;
			}
				
			100%{
			opacity: 0;
			left: 150%;
			z-index: -1;
			}
		}
		/*前導頁-底-END*/
		/*前導頁-LOGO*/
		.logo_img {
			width: 500px;
			height: 200px;
			position: fixed;
			margin: auto;
			left: 0; right: 0; top: 0; bottom: 0;
			background-image:url(../images/LOGO_ACT_GIF.gif);
			background-position: center;
			background-size: cover;
			animation-name: logo_img;
			animation-duration: 0.1s;
			animation-delay:2s;
 			animation-fill-mode: both;
		}
		@keyframes logo_img {
			0% {
			opacity: 1;
			}
						
			100% {
			opacity: 0;
			}
		}
		/*前導頁-LOGO-END*/
		/*前導頁-END*/
		


		/*版頭*/
		header {
			width: 100%;
			position: relative;
		}

		/*背景動畫*/

		.header_ACT {
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		.header_ACT span {
			position: absolute;
			display: block;
			width:100%;
			left: 0;right: 0;bottom: 0;top: 0;
		}
		.act_bg_a span:nth-child(1) {
			animation-delay:0s;
		}
		.act_bg_a span:nth-child(2) {
			animation-delay:6s;	
		}
		.act_bg_a span:nth-child(3) {
			animation-delay:12s;
		}

		.act_bg_a span {
			animation-name: bg_a;
			animation-duration: 18s;
 			animation-iteration-count:infinite;
			animation-direction:normal;
			opacity: 0;
			z-index: -1;
		}

		@keyframes bg_a {
			5.55% {
			opacity: 1;
			z-index: 1;
			}
			27.77% {
			opacity: 1;
			z-index: 1;
			}
			33.33% {
			opacity: 0.5;
			z-index: -1;
			}
		}

		.act_style_bg_a span a {
			display: block;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-size:cover;
			animation-name: act_bg_a;
			animation-duration: 18s;
 			animation-iteration-count:infinite;
			animation-direction:alternate;
			transform-origin:center;
		}

		@keyframes act_bg_a {
			0% {
			transform:scale(1);
			}
			
			80% {
			transform:scale(1.3);
			}
		
			100% {
			transform:scale(1);
			}
		}
		#header_BG_a {
			height: 100vh;
		}
		#header_BG_b {
			height: 550px;
		}
		#header_BG_c {
			height: 550px;
		}
		#header_BG_d{
			height: 550px;
		}
		#header_BG_e {
			height: 100vh;
		}
		#header_BG_f {
			height: 550px;
		}
		#header_BG_g {
			height: 100vh;
		}
		#header_BG_h {
			height: 100vh;
		}
		#header_BG_i {
			height: 100vh;
		}

		#header_BG_a span:nth-child(1) a {
			background-image: url(../images/index_top_bg_01.jpg);
		}
		#header_BG_a span:nth-child(2) a {
			background-image: url(../images/index_top_bg_02.jpg);
		}
		#header_BG_a span:nth-child(3) a {
			background-image: url(../images/index_top_bg_03.jpg);
		}

		#header_BG_b span:nth-child(1) a {
			background-image: url(../images/top_bg_01.jpg);
		}
		#header_BG_b span:nth-child(2) a {
			background-image: url(../images/top_bg_01.jpg);
		}
		#header_BG_b span:nth-child(3) a {
			background-image: url(../images/top_bg_01.jpg);
		}

		#header_BG_c span:nth-child(1) a {
			background-image: url(../images/top_bg_02.jpg);
		}
		#header_BG_c span:nth-child(2) a {
			background-image: url(../images/top_bg_02.jpg);
		}
		#header_BG_c span:nth-child(3) a {
			background-image: url(../images/top_bg_02.jpg);
		}

		#header_BG_d span:nth-child(1) a {
			background-image: url(../images/top_bg_03.jpg);
		}
		#header_BG_d span:nth-child(2) a {
			background-image: url(../images/top_bg_03.jpg);
		}
		#header_BG_d span:nth-child(3) a {
			background-image: url(../images/top_bg_03.jpg);
		}

		#header_BG_e span:nth-child(1) a {
			background-image: url(../images/top_bg_04.jpg);
		}
		#header_BG_e span:nth-child(2) a {
			background-image: url(../images/top_bg_04.jpg);
		}
		#header_BG_e span:nth-child(3) a {
			background-image: url(../images/top_bg_04.jpg);
		}

		#header_BG_f span:nth-child(1) a {
			background-image: url(../images/top_bg_05.jpg);
		}
		#header_BG_f span:nth-child(2) a {
			background-image: url(../images/top_bg_05.jpg);
		}
		#header_BG_f span:nth-child(3) a {
			background-image: url(../images/top_bg_05.jpg);
		}

		#header_BG_g span:nth-child(1) a {
			background-image: url(../images/top_bg_06.jpg);
		}
		#header_BG_g span:nth-child(2) a {
			background-image: url(../images/top_bg_06.jpg);
		}
		#header_BG_g span:nth-child(3) a {
			background-image: url(../images/top_bg_06.jpg);
		}

		#header_BG_h span:nth-child(1) a {
			background-image: url(../images/top_bg_07.jpg);
		}
		#header_BG_h span:nth-child(2) a {
			background-image: url(../images/top_bg_07.jpg);
		}
		#header_BG_h span:nth-child(3) a {
			background-image: url(../images/top_bg_07.jpg);
		}

		#header_BG_i span:nth-child(1) a {
			background-image: url(../images/top_bg_08.jpg);
		}
		#header_BG_i span:nth-child(2) a {
			background-image: url(../images/top_bg_08.jpg);
		}
		#header_BG_i span:nth-child(3) a {
			background-image: url(../images/top_bg_08.jpg);
		}


		/*背景動畫*/





		/*版頭-LOGO*/	
		.top_logo{
			position: absolute;
			left: 3%;
			width: 350px;
			height: 170px;
			display: block;
			background-image: url(../images/LOGO_00.png);
			background-size: cover;
			z-index: 8;
		}
		/*版頭-LOGO-END*/	

		/*版頭-選單MAP*/
		input.map_checkbox {
			position: fixed;
			left: 0; top: 0; right: 0; bottom: 0;
			margin: auto;
			opacity: 0;
		}
		label.map_bg {
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: rgba(255,255,255,0);
			z-index: -1;
			transition: all .1s,
		}
		input.map_checkbox:checked ~ label.map_bg {
			z-index: 99;
			background-color: rgba(255,255,255,0.5);
			transition: all .1s,
		}
		/*版頭-選單MAP-END*/

		/*版頭-選單*/
		.nav { 
			position: absolute;
			z-index: 9;
		}
		
		.nav ul { 
			font-size: 0;
			width: 100%;
			display:flex;
		}
		
		.nav ul li { 
			list-style: none;
			flex-direction:row;
			align-items:center;
			order:1;
			width:calc(100% / 5 + 5px);
			height: 120px;
			line-height: 120px;
		    font-size: 2.5rem;
			position: relative;
			overflow: hidden;
			background-color: #000;
			color: #FFF;
			transition: background .7s;
		}
		.nav ul li:hover { 
			background-color: #ffcc00;
			transition: background .3s;
		}
		.nav ul li:hover a { 
			color: #000;
			transition: color .3s;
		}
		.nav ul li:first-child {
			background-color: #ffcc00;
			width: 120px;
			order:2;
		}
		.nav ul li a { 
			display: block;
			width: 100%;
			height: 100%;
			text-decoration: none;	
			text-align: center;
			color: #FFF;
		}
		.nav ul li u { 
			display: block;
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.nav ul li:first-child u span {
			display: block;
			margin: auto;
			width: 50%;
			height: 0;
			border-bottom: #000 solid 5px;
			position: absolute;
			left: 0; right: 0; top: 0; bottom: 0;
		}
		.nav ul li:first-child u span:nth-child(1) {
			top: 25%;
			transition: transform .5s, top .5s .5s;
		}
		.nav ul li:first-child u span:nth-child(2) {
			transition: width .5s .5s;			
		}
		.nav ul li:first-child u span:nth-child(3) {
			bottom: 25%;
			transition: transform .5s, bottom .5s .5s;
		}
		.nav ul li:nth-last-child(-n+3) {
			display: none;
		}
		/*版頭-選單-點擊*/
		label.map_on {
			display: block;
			z-index: 9999;
			cursor: pointer;
			position: absolute;
			left: 0; right: 0;	top: 0;	bottom: 0;
			margin: auto;
		}
		input.map_checkbox ~ .nav {
			width: 700px;
			height: 120px;
			right: 0%;
			margin-right: 0%;
			background-color: #000;
			transition: height 0.3s, width 0.3s 0.3s;
		}
		input.map_checkbox:checked ~ .nav {
			width: 400px;
			height: 100%;
			position: fixed;
			top:0%;
			transform: translateY(-5%);
			right: -100%;
			margin-right: 100%;
			z-index: 100;
			transition:right 0s, margin-right 0.3s 0.1s;
		}

		input.map_checkbox:checked ~ .nav ul {
			display: block;
			height: 100%;
			overflow-y:auto;
		}

		input.map_checkbox:checked ~ .nav ul li {
			float: right;
			width:100%;
			line-height: 80px;
			height: 80px;
			position: relative;
			overflow: hidden;
			color: #FFF;
			transition: background .7s;
		}

		input.map_checkbox:checked ~ .nav ul li:first-child {
			width: 120px;
			height: 120px;
			line-height: 120px;
		}

		input.map_checkbox:checked ~ .nav ul li:first-child label u span {
			transform-origin:center center;
		}

		input.map_checkbox:checked ~ .nav ul li:first-child label u span:nth-child(1) {
			top: 0%;
			transform:rotate(45deg);	
			transition: top .5s,transform .5s .5s;
		}

		input.map_checkbox:checked ~ .nav ul li:first-child label u span:nth-child(2) {
			opacity: 0;
			width: 0%;
			transition: all .5s .5s;	
		}

		input.map_checkbox:checked ~ .nav ul li:first-child label u span:nth-child(3) {
			bottom: 0%;
			transform:rotate(-45deg);
			transition: bottom .5s,transform .5s .5s;
		}
		input.map_checkbox:checked ~ .nav ul li:nth-last-child(-n+3) {
			display:block;
		}
		/*版頭-選單-END*/



		/*版頭-標題*/
		.main_text {
			position: absolute;
			left: 5%;
			top: 35%;
			z-index: 8;
		}
		.main_text_style_2 {
			top: 35%!important;
		}
		.main_text h1 {
			font-size: 7rem;
			color: #FFF;
			margin: 0;
			padding: 0;
			line-height: 100px;
			text-transform:uppercase;
			text-shadow: 0px 1px 9.5px rgba(0, 0, 0, 0.5);
		}
		.main_text h1:nth-child(3) {
			font-size: 4.5rem;
		}
		/*版頭-標題-END*/
		/*版頭-END*/
		

@media only screen and (min-width: 1024px) and (max-width: 1219px) {

		/*版頭-LOGO*/	
		.top_logo{
			margin-top: -2%;
		}
		/*版頭-LOGO-END*/	
		/*版頭-選單-點擊*/
		input.map_checkbox ~ .nav {
			width: 600px;
		}
		input.map_checkbox:checked ~ .nav {
			width: 400px;
		}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
		/*版頭*/
		#header_BG_a {
		height: 700px;
		}
		#header_BG_b {
		height: 700px;
		}
		#header_BG_c {
		height: 700px;
		}
		#header_BG_d{
		height: 700px;
		}
		#header_BG_e {
		height: 700px;
		}
		#header_BG_f {
		height: 700px;
		}
		#header_BG_g {
		height: 700px;
		}
		#header_BG_h {
		height: 700px;
		}
		#header_BG_i {
		height: 700px;
		}
		/*版頭-LOGO*/	
		.top_logo{
			margin-top: -2%;
		}
		/*版頭-LOGO-END*/	
		/*版頭-選單*/
		.nav { 
			position: absolute;
		}
		
		.nav ul { 
			width:auto;
		}
		
		.nav ul li {
			width:0;
			height: 120px;
		}

		/*版頭-選單-點擊*/
		input.map_checkbox ~ .nav {
			width: 120px;
			height: 120px;
		}
		input.map_checkbox:checked ~ .nav {
			width: 100%;
			height: 100%;
		}

		/*版頭-選單-END*/
	

		/*版頭-標題*/
		.main_text h1 {
			font-size: 8rem;
			line-height: 90px;
		}
		.main_text h1:nth-child(3) {
			font-size: 4rem;
		}
		.main_text_style_2 {
			top: 25%!important;
		}
		/*版頭-標題-END*/
	
	
}


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

		/*前導頁-LOGO*/
		.logo_img {
			width: 300px;
			height: 150px;
		}
		/*前導頁-LOGO-END*/
	
		/*版頭*/
		#header_BG_a {
		height: 400px;
		}
		#header_BG_b {
		height: 400px;
		}
		#header_BG_c {
		height: 400px;
		}
		#header_BG_d{
		height: 400px;
		}
		#header_BG_e {
		height: 400px;
		}
		#header_BG_f {
		height: 400px;
		}
		#header_BG_g {
		height: 400px;
		}
		#header_BG_h {
		height: 400px;
		}
		#header_BG_i {
		height: 400px;
		}
		/*版頭-LOGO*/	
		.top_logo{
			width: 200px;
			height: 97px;
			margin-top: -4%;
		}
		/*版頭-LOGO-END*/	
	
		/*版頭-選單*/
		.nav { 
			position: absolute;
		}
		
		.nav ul { 
			width:auto;
		}
		
		.nav ul li {
			width:0;
			height: 60px;
		}

		/*版頭-選單-點擊*/
		input.map_checkbox ~ .nav {
			width: 60px;
			height: 60px;
		}
		input.map_checkbox:checked ~ .nav {
			width: 100%;
			height: 100%;
		}
		
		.nav ul li:first-child {
			width: 60px;
		}

		input.map_checkbox:checked ~ .nav ul li {
			line-height: 60px;
			height: 60px;
		}

		input.map_checkbox:checked ~ .nav ul li:first-child {
			width: 60px;
			height: 60px;
			line-height: 60px;
		}
		.nav ul li:first-child u span {
			border-bottom: #000 solid 3px;
		}
	
	
	
		/*版頭-選單-END*/
	

		/*版頭-標題*/
		.main_text {
			top: 30%;
		}
		.main_text_style_2 {
			top: 30%!important;
		}
		.main_text h1 {
			font-size: 3.5rem;
			line-height: 40px;
		}
		.main_text h1:nth-child(3) {
			font-size: 2rem;
		}
		/*版頭-標題-END*/
	
}