@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*
   Globel
*/
*{
	margin: 0;
	padding: 0; 
	box-sizing: border-box;
	position: relative;
	font-family: 'Poppins', 'Noto Sans TC', sans-serif;
}

html{
	scroll-behavior: smooth;
}

body{
	background-color: #0f3622; /*ctrl+shift+C*/
	color: #ffffff;
	font-family: 'Roboto','Noto Sans TC', sans-serif;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
/*	cursor: crosshair;*/
}

a:hover{

}

h1{
	margin: 0;
}

/*
	Layout
*/

.wrapper{
	display: block;
	max-width: 2480px;
	margin: 0 auto;
	padding: 0;
}


.container{
	width: 100%;
	margin: 0 auto;
	float: left;
}



.row{
}

.col{
	float: left;
	/*border: 1px solid green;*/

	padding-left: 0px;
	padding-right: 0px;
}

.col-12{width: 100%;}
.col-8{width: 66.6666666%;}
.col-6{width: 50%;}
.col-4{width: 33.3333333%;}
.col-3{width: 25%;}
.col-2{width: 16.66666666%}

@media screen and (max-width: 1024px){
	.col-12-l{width: 100%;}
	.col-8-l{width: 66.6666666%;}
	.col-6-l{width: 50%;}
	.col-4-l{width: 33.3333333%;}
	.col-3-l{width: 25%;}
}

@media screen and (max-width: 860px){
	.col-12-m{width: 100%;}
	.col-8-m{width: 66.6666666%;}
	.col-6-m{width: 50%;}
	.col-4-m{width: 33.3333333%;}
	.col-3-m{width: 25%;}
}

@media screen and (max-width: 500px){
	.col-12-s{width: 100%;}
	.col-8-s{width: 66.6666666%;}
	.col-6-s{width: 50%;}
	.col-4-s{width: 33.3333333%;}
	.col-3-s{width: 25%;}
}

.col-12-square{width: 100%;}
.col-8-square{width: 66.6666666%;}
.col-6-square{width: 50%;}
.col-4-square{width: 33.3333333%;}
.col-3-square{width: 25%;}

.hero-200{margin-top:200px;}
.hero-170{ margin-top: 170px;}
.hero-120{ margin-top: 120px;}
.hero-100{ margin-top: 100px;}
.hero-70{margin-top: 70px;}
.hero-60{margin-top: 60px;}
.hero-50{margin-top: 50px;}
.hero-30{margin-top: 30px;}
.hero-20{margin-top: 20px;}
.hero-17{margin-top: 17px;}
.hero-10{margin-top: 10px;}

.max-width-1920{max-width: 1920px;}
.max-width-1400{max-width:1400px;}
.max-width-1280{max-width:1280px;}
.max-width-1200{max-width:1200px;}
.max-width-1024{max-width:1024px;}
.max-width-768{max-width: 768px;}



/*
   componet & section sytle
*/
header{
	width: 100vw;
	padding-bottom: 50%;
	top:0; left: 0;
	position: absolute;

	z-index: 9999;

/*	border: 1px solid red;*/
}


header .top-controll{
	display: block;
	position: absolute;
	width: 100%;
	height: 140px;

	top:0; left:0;

	padding-top: 80px;
	padding-left: 75px;
	padding-right: 75px;	

/*	border: 1px solid red;*/


	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}


header .logo-link{
	width: 335px; height: 45px;
}

header .logo-link img{
	width: 100%;height: 100%;
}

header .shop-link{
	width: 28px; height: 65px;
}

header .logo-link img{
	width: 100%;height: 100%;
}



header .nav-box{
	display: flex;
	position: absolute;

	left: calc(75px - 38px);
	bottom: 80px;

/*	border: 1px solid red;*/

	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;


}


header .nav-box .nav-list{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

header .nav-box .nav-list .divider{
	display: block;
	width: 26px;height: 1px;
	background-color: #ebbc74;

	margin: 12px 0 12px 38px;

}


header .nav-box .nav-item{
	padding: 6px 0;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}


header .nav-box .nav-item .nav-link{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

header .nav-box .nav-item .nav-link img{
	display: block;
	height: 14px;
	padding: 0 10px;

	opacity: 0;

	transition: .7s;
}

header .nav-box .nav-item .nav-link p{
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #ebbc74;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 14px;

	transform: .7s;


	text-shadow: 2px 2px #000;;
}


header .nav-box .nav-item .nav-link:hover img{
	opacity: 1;
}
header .nav-box .nav-item .nav-link:hover p{
	font-weight: 700;
}

@media screen and (max-width:1024px) {
	header{
		width: 100vw;
		padding-bottom: 100vh;
		top:0; left: 0;
		position: absolute;
	}


	header .top-controll{
		top:0; left:0;
		padding-top: 70px;
		padding-left: 60px;
		padding-right: 60px;	

	}

}

@media screen and (max-width: 500px){
	header .top-controll{
		top:0; left:0;
		padding-top: 60px;
		padding-left: 32px;
		padding-right: 32px;	

	}

	header .logo-link{
		width: 250px; height: auto;
	}

	header .shop-link{
		display: none;
	}

	header .nav-box{
		display: flex;
		position: absolute;

		left: 0;
		bottom: 60px;

	/*	border: 1px solid red;*/

		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;


	}
}


.banner{
	display: block;
	width: 100v; padding-bottom: 50%;

/*	border: 1px solid green;*/

	overflow: hidden;
}

.banner .carousel{
	width: 100%; height: 100%;
	display: block;
	position: absolute;
	top: 0; left: 0;
}


.banner .carousel .carousel-cell{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;

	overflow: hidden;
}

.banner .carousel .carousel-cell img{
	width: 101%;
	display: block;
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


@media screen and (max-width:1024px) {
	.banner{
		width: 100vw; padding-bottom: 100vh;
	}

	.banner .carousel .carousel-cell img{
		height: 100vh;		
		width: auto;
	}
}

.about{
	width: 100%;
	background-image: url('../images/about-bg.jpg');
	background-position: center;
	background-size: cover;

	padding: 80px 0px;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}


.about::before{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	top: 0;
	left: 50%;
}

.about::after{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	bottom: 0;
	left: 50%;
}

.about .about-slogan{
	width: 500px;
	margin-top: 80px;
	margin-bottom: 80px;
}

.about .about-title img{
	width: 100%;
}

.about .about-text{
	width: 500px;

	maring-bottom: 60px;
}

.about .about-text h1,
.about .about-text p{
	font-family: 'Noto Serif TC', serif;
	color: #ccc;
	font-size: 14px;
	font-weight: 200;

	line-height: 28px;
	letter-spacing: 4px;
	margin-bottom: 28px;
}


@media screen and (max-width: 500px){
	.about  .about-slogan{
		width: 350px;
		margin-bottom: 40px;
	}

	.about .about-text{
		width: 300px;
		maring-bottom: 40px;
	}
}

.about .about-title{
	height: 28px;
	margin-top: 80px;
	margin-bottom: 60px;
}

.about .about-title img{
	height: 100%;
}

.about .about-wave{
	width: 100%;
	display: block;
	position: absolute;

	bottom: 250px;
}

.about .about-wave img{
	width: 100%;
}


.wavebox {
  position: relative;
  height: 100vh;
  text-align: center;
  background-color: #102316; /* 墨綠色背景 */
  color: white;
}

.waves {
/*  margin-top:30vh;*/
  position: relative;
  width: 100%;
  height: 20vh;
  margin-bottom: -7px; /* Fix for Safari gap */
  min-height: 100px;
  max-height: 150px;
  opacity: .7;
}

.wave-line > use {
  animation: wavemotion 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  fill: none; /* 不填充顏色 */
  stroke: #ebbc74; /* 金色線條 */
  stroke-width: 0.2px; /* 線條寬度設為 2px */
}

.wave-line > use:nth-child(1) {
	display: none;
  animation-delay: -2s;
  animation-duration: 7s; /* 第一條線條動畫持續時間 */
}

.wave-line > use:nth-child(2) {
	display: none;
  animation-delay: -3s;
  animation-duration: 10s; /* 第二條線條動畫持續時間 */
}

.wave-line > use:nth-child(3) {
	display: none;
  animation-delay: -4s;
  animation-duration: 13s; /* 第三條線條動畫持續時間 */
}

.wave-line > use:nth-child(4) {

  animation-delay: -5s;
  animation-duration: 20s; /* 第四條線條動畫持續時間 */
}

@keyframes wavemotion {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Shrinking for mobile */
@media (max-width: 768px) {
  .waves {
    height: 15vh;
    min-height: 70px;
  }
  .content {
    height: 30vh;
  }
 
}



.cutscene{
	width: 100%;
	padding-bottom:40%;
	background-image: url('../images/bubble.jpg');
	background-size: cover;
}


@media screen and (max-width: 500px){
	.cutscene{
		width: 100%;
		padding-bottom:100%;
		background-image: url('../images/bubble.jpg');
		background-size: cover;
		background-position: center;
	}

}


.product{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}


.product .product-title-box{
	width: 100%;
	padding-bottom: 30%;

	overflow: hidden;
}





.product .product-title-box::before{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	top: 0;
	left: 50%;

	z-index: 100;
}

.product .product-title-box::after{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	bottom: 0;
	left: 50%;

	z-index: 100;
}


.product .product-title-box .bg-img{
	width: 100%;

	display: block;
	position: absolute;
	top: 50%;
	left:0 ;
	transform: translateY(calc(-50% + 40px));
}

.product .product-title-box .bg-img-s{
	display: none;
}

.product .product-title-box .product-title-icon{
	height: 28px;
	display: block;
	position: absolute;


	top: 120px;
	left: 50% ;
	transform: translateX(-50%);
}

@media screen and (max-width: 1024px){
	.product .product-title-box{
		width: 100%;
		padding-bottom: 52%;

		overflow: hidden;
	}

	.product .product-title-box .bg-img{
		transform: translateY(calc(-50% + 20px));
	}

}


@media screen and (max-width: 500px){
	.product .product-title-box{
		padding-bottom: 100%;
	}

	.product .product-title-box .bg-img{
		display: none;
	}

	.product .product-title-box .bg-img-s{
		height: 100%;
		width: auto;

		display: block;
		position: absolute;
		top: 50%;
		left: 50% ;
		transform: translate(-50%, -50%);
	}

}


.product .product-box{
	width: 100%;
   padding: 70px 0 70px 0;
	overflow: hidden;

	background-image: url('../images/59_bg3.jpg');
	background-position: center;
	background-size: cover;
}


.product .product-box::before{
	width: 100%; height: 100%;
	display: block;
	content: '';
	position: absolute;
	top: 0; left: 0;
	background-color: #031D11;
	opacity: .5;
}

.product .product-info-box{
	display: block;
	position: relative;

	width: 100%; height: 100%;
	left:0; top: 0;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

.product .product-info-box .product-nav{
	width: 100%;	
	margin-top: 70px;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
}


.product .product-info-box .product-nav .product-item{
	margin: 0 16px;

	cursor: pointer;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.product .product-info-box .product-nav .product-item::before{
	display: block;
	position: absolute;
	content: '';

	width: 0px;
	height: 1px;
	background-color: #ebbc74;
	
	transition: .7s;	
}

.product .product-info-box .product-nav .product-item:hover::before{
	
	width: 100%;
	height: 1px;
	background-color: #ebbc74;
	
}




.product .product-info-box .product-nav .product-item .tc-name{
	display: block;
	padding: 12px 16px;

	font-family: 'Noto Sans TC', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #ebbc74;
	letter-spacing: 3px;

	text-align: center;


}

.product .product-info-box .product-nav .product-item .en-name{
	display: block;
	padding: 12px 16px;

	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 200;
	color: #ccc;
	letter-spacing: 2px;

	text-align: center;

}


@media screen and (max-width: 1024px){
	.product .product-info-box .product-nav{
		width: 700px;	
		margin-top: 0px;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
	}

	.product .product-info-box .product-nav .product-item{
		margin: 0 12px;
		margin-top: 16px;

		cursor: pointer;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}


	.product .product-info-box .product-nav .product-item .tc-name{
		display: block;
		padding: 6px 0px;

		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: #ebbc74;
		letter-spacing: 3px;

		text-align: center;


	}

	.product .product-info-box .product-nav .product-item .en-name{
		display: block;
		padding: 6px 0px;

		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		font-weight: 200;
		color: #ccc;
		letter-spacing: 2px;

		text-align: center;

	}
}

@media screen and (max-width: 500px){
	.product .product-box{
		padding-top: 30px;
	}

	.product .product-info-box .product-nav{
		width: 100%;
		margin-top: 0px;
		margin-bottom: 35px;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
	}


	.product .product-info-box .product-nav::after{
		display: block;
		content:'';
		position: absolute;

		width: calc(100% - 64px);
		height: 1px;
		background-color: #ebbc74;

		bottom: -32px;
		left: 50%; transform: translateX(-50%);
	}

	.product .product-info-box .product-nav .product-item{
		margin: 0 12px;
		margin-top: 32px;

		cursor: pointer;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}


	.product .product-info-box .product-nav .product-item .tc-name{
		display: block;
		padding: 6px 0px;

		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14px;
		font-weight: 500;
		color: #ebbc74;
		letter-spacing: 3px;

		text-align: center;


	}

	.product .product-info-box .product-nav .product-item .en-name{
		display: block;
		padding: 6px 0px;

		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		font-weight: 200;
		color: #ccc;
		letter-spacing: 2px;

		text-align: center;

	}
}

.product .product-box .carousel{
	width: 100%;
}


.product .product-box .carousel .flickity-button,
.product .product-box .carousel .flickity-page-dots{
	display: none;
	width: 0%;height: 0;
}


.product .product-box .carousel .carousel-cell{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}



.product .product-info-box .product-intro{
	width: 100%;
/*	height: 300px;*/
	max-width: 1024px;

	margin-top: 100px;
	margin-bottom: 50px;

/*	border: 1px solid red;*/

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
}




.product .product-info-box .product-intro .product-pic-box{
	width: 50%;
	height: 300px;
}

.product .product-info-box .product-intro .product-pic-box .prod-pic
{
	display: block;
	width: 250px;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.product .product-info-box .product-intro .product-pic-box .prod-sketch
{
	display: block;
	width: 350px;

	position: absolute;
	bottom:0;
	left: 0;
/*	transform: translateX(-50%);*/
}

.product .product-info-box .product-intro .product-intro-box{
	width: 50%;
/*	height: 200px;*/
	
/*	border: 1px solid red;*/

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	padding-left: 60px;
}


@media screen and (max-width: 1024px){
	.product .product-info-box .product-intro{
		width: 700px;

		margin-top: 70px;
		margin-bottom: 0;
	}

	.product .product-info-box .product-intro .product-pic-box .prod-pic
	{
		display: block;;
		width: 200px;

		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.product .product-info-box .product-intro .product-pic-box .prod-sketch
	{
		display: block;
		width: 300x;

		position: absolute;
		top:0;
		left: 50%;
		transform: translateX(calc(-50% - 30px));
	}

	.product .product-info-box .product-intro .product-intro-box{
		padding-left: 0;
	}

}

@media screen and (max-width: 500px){
	.product .product-info-box .product-intro{
		width: 100%;
		margin-top: 70px;
		margin-bottom: 50px;


		display: flex;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: flex-start;
	}


	.product .product-info-box .product-intro .product-pic-box{
		width: 100%;
		padding-bottom: 60%;


	}

	.product .product-info-box .product-intro .product-intro-box{
		width: 100%;

		padding: 0 40px;
		margin-bottom: 60px;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;

	}


}


.product .product-intro-box .prod-title-box{
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-itmes: flex-start;

	margin-bottom: 60px;
}

.product .product-intro-box .prod-name-tc{
	display: block;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 28px;
	font-weight: 500;
	color: #ebbc74;

	letter-spacing: 3px;

	margin-right: 32px;
}

.product .product-intro-box .prod-name-en{
	padding-top: 10px;
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 100;
	color: #ccc;

	letter-spacing: 2px;
}

.product .product-intro-box .prod-text{
	width: 100%;
	margin-bottom: 60px;
}

.product .product-intro-box .prod-text p{
	width: 100%;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 200;
	color: #ccc;
	letter-spacing: 2px;
	line-height: 28px;
}

.product .product-intro-box .prod-shop{
	width: 100%;
}

.product .product-intro-box .prod-shop .prod-shop-link{
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #ccc;
	letter-spacing: 2px;
	line-height: 50px;

	transition: .7s;
}

.product .product-intro-box .prod-shop .prod-shop-link::before{
	display: block;
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #ccc;
	bottom: -10px;
	left: 0;
}

.product .product-intro-box .prod-shop .prod-shop-link:hover{
	font-weight: 500;
}


.product .product-wave-line{
	width: 100%;
	position: relative;

	margin-top: -100px;

/*	border: 1px solid red;*/
}

.product  .product-wave-line img{
	display: block;
	width: 100%;
}


@media screen and (max-width: 500px){
	.product .product-intro-box .prod-title-box{
		margin-bottom: 40px;
	}

	.product .product-intro-box .prod-text{
		width: 100%;
		margin-bottom: 40px;
	}
}



/* contact  */
.contact{
	width: 100%;
	padding: 80px 0;

	background-image: url('../images/contact-bg.jpg');
	backgroudn-size: cover;
	background-position: cneter;

	display: flex;
	flex-direction: column;
	flex-warp: nowrap;
	justify-content: flex-start;
	align-items: center;

}

.contact::before{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	top: 0;
	left: 50%;
}

.contact::after{
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 80px;
	background-color: #ebbc74;

	bottom: 0;
	left: 50%;
}



.contact .contact-box{
	padding: 56px 0;
	width: 384px;

	display: flex;
	flex-direction: column;
	flex-warp: nowrap;
	justify-content: flex-start;
	align-items: center;
}


.contact .contact-box .form-title{
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #ebbc74;

	line-height: 20px;
	letter-spacing: 3px;
	text-align: center;

	margin-bottom: 56px;
}


.contact .form-box{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

.contact .form-box form{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}



.contact .form-box form .field-group{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;	

	margin-bottom: 28px;
}

.contact .form-box form .field-group p{
	display: block;
	width: 112px;
	height: 28px;
	letter-spacing: 2px;

	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	color: #ccc;
	font-weight: 200;
	line-height: 26px;
}



.contact .form-box form .field-group input{
	display: block;
	width: 272px;
	height: 28px;

	letter-spacing: 2px;

	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	color: #ccc;
	font-weight: 200;
	line-height: 26px;

	border: none;
	background-color: rgba(0,0,0,0);

	outline: none;
}

.contact .form-box form .field-group textarea{
	display: block;
	width: 272px;

	letter-spacing: 2px;

	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	color: #ccc;
	font-weight: 200;
	line-height: 26px;

	border: none;
	background-color: rgba(0,0,0,0);

	outline: none;
}




.contact .form-box form .field-group::after{
	display: block;
	content: '';
	position: absolute;
	width: 271px;
	height: 1px;
	background-color: #ccc;
	bottom: 0;
	right: 0;
}



.contact .form-box form  .submit-btn{
	display: block;


	letter-spacing: 2px;

	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	color: #ccc;
	font-weight: 900;
	line-height: 26px;

	border: none;
	background-color: rgba(0,0,0,0);


	cursor: pointer;

	transition: .7s;
}

.contact .form-box form .submit-btn:hover{
	color: #ebbc74;
}


@media screen and (max-width: 500px){
	.contact .form-box form .field-group{
		padding: 0 32px;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;	

		margin-bottom: 28px;
	}

	.contact .form-box form .field-group p{
		display: block;
		width: 100%;
	}



	.contact .form-box form .field-group input{
		display: block;
		width: 100%;
	}

	.contact .form-box form .field-group textarea{
		display: block;
		width: 100%;
	}




	.contact .form-box form .field-group::after{
		display: block;
		content: '';
		position: absolute;
		width: calc(100% - 64px);
		height: 1px;
		background-color: #ccc;
		bottom: 0;
		left: 50%; transform: translateX(-50%);
	}

}


.footer-cutscene{
	width: 100%;
	padding-bottom: 50%;

	background-image: url('../images/footer-cutscene-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.footer-cutscene .footer-slogan{
	width: 100%;
	display: block;
	position: absolute;
	top: 180px;

	font-family: 'Noto Sanc', sans-serif;
	font-weight: 200;
	font-size: 16px;
	color: #ebbc74;
	letter-spacing: 3px;

	text-align: center;
}


@media screen and (max-width: 1024px){
	.footer-cutscene{
		width: 100%;
		padding-bottom: 100%;
	}

	.footer-cutscene .footer-slogan{
		top: 150px;
	}
}

.footer{
	width: 100%;
	padding: 75px;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;

	background-image: url('../images/about-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (max-width: 500px){
	.footer-cutscene .footer-slogan{
		top: 70px;
		font-size: 12px;
	}
}


.footer .footer-control{
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-warp: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.footer .footer-control .footer-logo{
	width: 335px; height: 45px;
	display: block;
}

.footer .footer-control .footer-logo img{
	width: 100%; height: 100%;
}



.footer .nav-box{
	display: flex;


/*	border: 1px solid red;*/
	
	width: 103px;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;


}


.footer .nav-box .nav-list{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.footer .nav-box .nav-list .divider{
	display: block;
	width: 26px;height: 1px;
	background-color: #ebbc74;

	margin: 12px 0 12px 38px;

}


.footer .nav-box .nav-item{
	padding: 6px 0;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}


.footer .nav-box .nav-item .nav-link{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.footer .nav-box .nav-item .nav-link img{
	display: block;
	height: 14px;
	padding: 0 10px;

	opacity: 0;

	transition: .7s;
}

.footer .nav-box .nav-item .nav-link p{
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #ebbc74;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 14px;

	transform: .7s;
}


.footer .nav-box .nav-item .nav-link:hover img{
	opacity: 1;
}
.footer .nav-box .nav-item .nav-link:hover p{
	font-weight: 700;
}


.footer .footer-copyright{
	width: 100%;
	margin-top: 72px;

	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #ccc;
	font-weight: 100;
 	letter-spacing: 2px;
	text-align: center;
	line-height: 12px;
}


@media screen and (max-width: 1024px){
	.footer{
		padding: 70px 60px;
	}
}

@media screen and (max-width: 500px){
	.footer{
		padding: 40px 32px;
	}

	.footer .footer-control .footer-logo{
		width: 250px; height: auto;
		display: block;
	}
}