/*變數*/
@import url('var.css');



/* CSS Document */
html{height:100%;}
body{
	font-size:15px;line-height:1.8;color:#333;
	font-family:var(--en),var(--jp), sans-serif;
	font-weight:400;letter-spacing:.1em; 
	height:100%;
}

/*****************************Layout*****************************************/

.wrapper{}

#fullpage{height:inherit;}

#fullpage>.section{
	height:inherit;
	background-size:cover;
	position:relative;
	overflow:hidden;
	opacity: 1;
	transition:all .7s;
}

#fullpage>.section.active,#fullpage>.section .slide.active{
	opacity: 1;
}


#fullpage>.section .content{display:contents;}
.iScrollIndicator{background: rgb(0 0 0 / 8%)}


/*****************************Header Start*****************************************/
header{position:fixed;right:30px;top:40px;z-index:9999;display: flex;}

header article{text-align:right;}
header article h4{
						font-family: 'Montserrat', serif;
						font-weight: 200;
						color:#fff;
						font-size:3em;
						letter-spacing:0;
						text-shadow: 0 0 5px rgba(0,0,0,.5);
						transition: all .5s;
						line-height:1em;
						text-transform:uppercase;
						margin-bottom:.3em;

					}

header article:after{
	width:80px;
	height: 1px;
	background:#fff;
	content: "";
	display: block;
}



/*主選單**********************************/

.mainNav{
	position:fixed;
	left:50px;
	height:100%;
	display:flex;
	align-items:center;
	z-index: 99;
}

.mainNav ul{
	position:relative;
	padding-right: 30px;
}
.mainNav a{
				display:block;
				position:relative;
				width: 25px;
				height:22px;
				background:#eee;
				clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
				transform:scale(.8);
				filter:var(--shadow);

				}

.mainNav li{
	margin-bottom:5px;
}

.mainNav li .txt{
	position:absolute;
	right: 0;
	top:0;
	writing-mode: vertical-lr;
	color:#fff;
	height: 100%;
	display:flex;
	align-items: center;

}

.mainNav li .txt b{
	opacity: 0;
	transform:translateY(-9px);
}

.mainNav li .txt:after{
	flex: 0;
	content: "";
	width:1px;
	background:#fff;
	margin-top: 5px;
	margin-left:3px;
}

.mainNav li.active a{
	background-color:#42b5d4;transform:scale(1);
}

.mainNav li.active .txt b{
	opacity:1;
	transform:translateY(0);
}

.mainNav li.active .txt:after{
		flex: 1;
		transition:all .4s .2s;
}

.mainNav li:hover a{
	background-color:orange;
}

.mainNav li:hover .txt{
	right:-.1em;
}

.mainNav li:hover .txt b{
	opacity:1;
	transform:translateY(0);
	background:orange;
	z-index: 99;
	padding:1.5em .1em;
	color:#fff;
	transition:all .2s;
}


/*特殊規格時變色*/
.fp-viewing-features .mainNav a,
.fp-viewing-features .mainNav li .txt:after,
.fp-viewing-caution .mainNav a,
.fp-viewing-caution .mainNav li .txt:after,
.fp-viewing-home .mainNav a,
.fp-viewing-home .mainNav li .txt:after
{
	background:#999;
}

.fp-viewing-features .mainNav  .txt b,
.fp-viewing-caution .mainNav  .txt b,
.fp-viewing-home .mainNav  .txt b
{
	color:#666;
}


/*txt**********************************/

.title{
	filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, .2));
	height:90px;
}


/*kv*/
.caution{background-image:url(../images/kv/caution.jpg);}
.gallery{background-image:url(../images/kv/gallery.jpg);}
.features{background-image:url(../images/kv/features.jpg);background-position:left bottom;}
.bonus{
	background-image:url(../images/kv/bonus.jpg);
	background-position:left bottom;
}	

/*Nav************************************/
.topLogo{
	position:absolute;
	left:50px;
	top:30px;
	z-index: 9999;
	transition: all .7s;
	transition-timing-function:var(--easeBack);
	height: 100px;
	filter:var(--shadow);
	transform:translateY(calc(-100% - 40px));
}

.topLogo:not(.fp-viewing-home  .topLogo){
	transform:translateY(0);
}



/*社群選單*/
.socialIco{
	position:fixed;right:40px;top:40px;z-index: 999;
	text-align:center;
	filter:var(--shadow);
	transition: all .7s;
}

.socialIco img{
	width:100px;
	margin-bottom:10px;
	/* border:2px solid #fff;border-radius:18px; */
}

.socialIco a{display:block;}
.socialIco a:hover{
	transform:translateY(10px);
}

.socialIco h5{
	color:#fff;font-weight:400;font-size:13px;letter-spacing:0;
	font-family:var(--cn);
}


.fp-viewing-home .socialIco h5,
.fp-viewing-caution .socialIco h5,
.fp-viewing-features .socialIco h5
{
	color:#333;font-weight:600;
}

.fp-viewing-gallery .socialIco{
	transform:translateX(150%);
}

/*右側選單*/
.btnMove{position:absolute;z-index: 10;bottom:50px;right: 50px;transition:all .5s;}
.btnMove a{display:block;}
.btnMove img{width:70px;}

.fp-viewing-home .btnTop,
.btnNext:not(.fp-viewing-home .btnNext)
{
	transform:translateY(150%);opacity:0;
}


/*animate*/

@keyframes moveBack {
  from {}
  to {transform:translate3d(0,10%,0);}
}

.moveBack {
	animation-name:moveBack;
	animation-iteration-count: infinite;
	animation-duration: .7s;
	animation-direction: alternate;  
}


/*storeDownload*/
.storeDownload{
	position:fixed;z-index: 999;
	text-align:center;transition:all .7s;
	width:180px;
	right:40px;
	bottom: 130px;
}

.storeDownload .store a{display:block;margin-bottom:10px;}
.storeDownload .store img{
	filter:var(--shadow);
}
.storeDownload.ft{transform:translateY(-70px);}
.storeDownload.none{transform:translateX(150%);}

.storeDownload .btnIOS img{
	height: 54px;
}


/*btnVideo*/
.btnVideo{display:block;position:relative;}
.btnVideo:before{
	width:80px;
	height: 80px;
	left: 50%;
	top: 50%;
	position:absolute;
	transform:translate3d(-50%, -50%, 0px);
	content: "";
	background:no-repeat center center ;
	background-image:url(../images/ico/play.svg);
	z-index: 10;
	transition: all .3s;
}

.btnVideo:hover:before{
	transform:translate3d(-50%, -50%, 0px) scale(1.2) ;
}


/*****************************Header End*****************************************/

/*****************************Footer Start*****************************************/
footer{
	        color:#fff;
			position: fixed;
			text-align:center;
			width:100%;left:0;bottom:0;
			font-size:12px;
			transform:translateY(calc(100% + 95px));
			transition:all .7s;
			height:45px;
			background-color:#ededed;
			color:#333;
		}

footer .footerLogo{text-align:left;padding-left:30px;;flex:1;}
footer .footerLogo img{margin-top:-80px;}
footer .footerLogo p{font-size:12px;letter-spacing: 0}

footer .grade{text-align:right;flex:2;justify-content: flex-end;padding-right:30px;line-height: 1.2;}
footer .grade img{height:45px;margin-left:30px;}

footer.active{	transform:translateY(0);}

footer:before{
	content:"";
	background-image:url(../images/share/ft-shadow.png);
	width: 417px;
	height:100px;
	position:absolute;
	top:-95px;
	right:20px;
	filter: brightness(0) invert(.92);
}


/* fancyBox*****************************/
.fancybox-is-open .fancybox-bg{
	opacity: .95;
}

.fancybox-navigation .fancybox-button{
	width:50px;
	height: 50px;
	background:#4185b0;
}

.fancybox-button{
	width:60px;
	height: 60px;
}

.fancybox-button--zoom{display:none !important;}



/*1450x800*/	
@media (max-width:1450px) and (max-height: 800px) {
	.topLogo{height: 70px;}
	.title{height:70px;}
	.btnMove img{width:50px;}

	.storeDownload{bottom: 80px;}
	.storeDownload.ft{transform: translateY(-100px);}

	.mainNav{left: 20px;}

	.fp-viewing-original .storeDownload{display:none;}

	#fullpage>.section{
		min-height:700px;
	}

}