@charset "utf-8";
/* CSS Document */

body {
  Font-family:微軟正黑體,Arial;
  margin:0 auto;
  padding:0;
  
}
a {text-decoration:none}

h1{border-bottom:#C96 5px double; padding:1% 2%; width:auto; margin:5% auto; letter-spacing:1vw; color:#C96; text-shadow:#000 0 0 5px,#000 0 0 10px,#000 0 0 30px;}
main{ margin-top:5vh; width:100%; margin:0 auto;}
.gp{display:inline-block}
#LB{position:fixed; left:-30vw; top:-60vh; z-index:2;}
#RB{position:fixed; right:-10vw; bottom:-25vh; z-index:2;}
#LB img{
	width:70vw; opacity:0.5; min-width:700px;
	animation:roLB 8s linear infinite}
#RB img{
	width:40vw; opacity:0.2; min-width:400px;
	animation:roRB 5s linear infinite}
@keyframes roLB {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@keyframes roRB {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
#cover{
	background:url(images/cover.png) no-repeat top center;
	background-size:contain;
	position:absolute;
	top:0;
	height:100vh;
	width:100%;
	z-index:50;
}
#coverbg{display:none;position:absolute;top:0;height:100vh;width:100%;}

#menu,#play,#how,#rule,#opinion,#comicbook{position:relative; z-index:51; text-align:center; color:#FFF}
#menu{margin:0 auto; width:100%;}
#info{position:relative; width:100%; max-width:900px; height:95vh; color:#FFF; margin:0 auto; z-index:53}

#T1{position:absolute; top:0; left:0; max-height:70vh;}
#T2{position:absolute; bottom:0; right:0; max-height:70vh;}
#how, #play, #opinion,#rule,#SP{width:80%; margin:0 auto; max-width:960px; min-width:350px;}
#how p{text-align:left; text-indent:2em;}

.page{margin:5% auto; color:#Fff; text-align:center; font-weight:bold; font-size:1em; display:block;background: linear-gradient(90deg, rgba(102,51,0,.5) 13%, #963 80%); border: #C96 10px double;clip-path: polygon(1% 0, 100% 0, 100% 80%, 99% 100%, 0 100%, 0 20%);}
.page:hover{background: linear-gradient(90deg, #963 13%, rgba(102,51,0,.5) 80%); transform:translate(0,-5px)}

#play h2{ letter-spacing:1em;text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; color:#FFF}
.item{display:inline-block; margin:2% auto; margin-left:1%; margin-right:1%; width:20vw; height:20vw; min-height:200px; min-width:200px; border:#C96 2px groove; background:linear-gradient(0deg, rgba(204,153,102,.8) 13%, rgba(251,235,221,1) 80%); vertical-align:middle}
.item img{width:100%; display:block; margin:0 auto}
.item:hover{transform: perspective(900px) rotateX(20deg) rotateY(0deg);}
.item:hover img{transform:scale(1.4) translate(0,-20px) scale(1,1.1);}
#comicbook .item:hover img{ border:#C96 2px solid; box-shadow:#000 0 0 30px}

.player{ width:30%; min-height:85vh; min-width:350px; background:rgba(0,0,0,.6); margin:2% auto; display:inline-block; padding:3%; vertical-align:middle; margin-left:1%; margin-right:1%; box-shadow: #630 0 15px 30px}
.player:hover .icon{transform: scale(1.4) translate(0,-20px);}
.player:hover h3{transform: scale(1.4);}
.player:hover{ transform:scale(1.01) translate(0,5px);box-shadow: #630 0 25px 30px}
.icon{border-radius:100%; width:100px; height:100px; box-shadow:#C96 0 0 30px; margin:0 auto}
.player h3{color:#C96; text-shadow:#000 0 0 30px; }
.player p{text-align:left; text-indent:2em; line-height:1.5em;font-size:.95em}
.player h5{ border-top:#C96 1px dotted; color:#C96; line-height:1.9em; font-size:.85em}



#page,#page2{
	background: linear-gradient(90deg, rgba(248,215,169,.95) 0%, rgba(204,153,102,.9) 80%) fixed;
	background: -moz-linear-gradient(0deg, rgba(248,215,169,.95) 0%, rgba(204,153,102,.9) 80%) fixed; 
	background: -webkit-linear-gradient(0deg, rgba(248,215,169,.95) 0%, rgba(204,153,102,.9) 80%) fixed; 
	background: -o-linear-gradient(0deg, rgba(248,215,169,.95) 0%, rgba(204,153,102,.9) 80%) fixed;
	padding-left:35%;
	width:100%; 
	height:100%; 
	padding:5% 10%;
	overflow-x:hidden;
	line-height:2em;
	text-shadow:#FC9 0 0 30px}
#page h1,#page2 h1{line-height:1.5em;text-shadow: 0px -1px 4px white, 0px -2px 10px orange, 0px -5px 20px #FF6600; color:#FFF}	
#page img{ margin:2%; max-width:20vw; min-width:200px}
@media (max-width:700px){
	#T1{height:55vh;}
	#T2{height:55vh;}}
@media (max-width:600px){
	#coverbg{
	background:url(images/cover2.png) no-repeat top center;
	background-size:contain; z-index:49; display:block}
	#cover{
	background:url(images/cover2.png) no-repeat top center;
	background-size:contain;
	animation: cover 6s linear infinite;}
	.item{display:block; margin:10% auto;width:60vw; height:60vw; min-height:280px; min-width:280px;}
	.item h3{font-size:1em}
	.player{display:block; margin-left:0; margin-right:0; width:90%; height:auto; min-height:inherit; margin:10% auto;}
	@keyframes cover {
		0%{background:url(images/cover2.png) no-repeat top center;background-size:contain;}
		30%{background:url(images/cover2.png) no-repeat top center;background-size:contain;}
		40%{background:url(images/cover3.png) no-repeat top center;background-size:contain;}
		90%{background:url(images/cover3.png) no-repeat top center;background-size:contain;}
		100%{background:url(images/cover2.png) no-repeat top center;background-size:contain;}
		}
	#T1{width:100%; height:auto}
	#T2{width:100%; height:auto}
	}	
/*選單*/	
.btn{
	position:fixed;
	top:0;
	width:100%;
	z-index:99998;
	width:100%;
	background:rgba(0,0,0,.5);
	margin:0 auto;
	opacity: 0.9;
	text-align:center}
	
#nav{background:rgba(0,0,0,.8); min-height:20vh; text-align:center; margin-bottom:2vh;z-index:99999;}
#nav a{text-decoration:none}
#nav a:hover{color:#C96;}
#nav div{ margin:1%;font-size:1.1em; display:inline-block}
#social{display:block; width:80%}
#social img{width:1.2em; margin:2% auto; margin-left:0.5em; margin-right:0.5em}
#social img:hover{animation: 1s linear 0s normal none infinite jello-horizontal; text-decoration:none}
	
	@keyframes jello-horizontal {
	  0% {
		-webkit-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1);
	  }
	  30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
				transform: scale3d(1.25, 0.75, 1);
	  }
	  40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
				transform: scale3d(0.75, 1.25, 1);
	  }
	  50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
				transform: scale3d(1.15, 0.85, 1);
	  }
	  65% {
		-webkit-transform: scale3d(0.95, 1.05, 1);
				transform: scale3d(0.95, 1.05, 1);
	  }
	  75% {
		-webkit-transform: scale3d(1.05, 0.95, 1);
				transform: scale3d(1.05, 0.95, 1);
	  }
	  100% {
		-webkit-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1);
	  }}
/*頁面內選項*/
.menu{margin:2% auto; background:rgba(80%,60%,40%,0.6); border: #630 8px double; width:25%; color:#fff; text-align:center; font-weight:bold; font-size:1.2em; display:inline-block; text-shadow:#630 0 0 5px,#630 0 0 15px; margin-left:1%; margin-right:1%;}
.menu:hover{background:rgba(80%,60%,40%,1);transform: perspective(900px) rotateX(20deg) rotateY(0deg);}
@media (max-width:600px){.menu{font-size:.9em; }}
/*各內容區塊樣式*/
.block{
	position:relative;
	color:#fff;
	padding:2%; 
	margin:5% auto; 
	text-shadow:0 0 5px rgba(0,0,0,1);
	background: rgba(204,153,102,.7);
	border: #C96 2px solid;
	width:80%;
	box-shadow:rgba(204,153,102,.7) 0 0 25px;
	}

/*雲霧*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

figure {
  margin: 0;
}

.absolute-bg {
  position:fixed;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.fog {
  position: relative;
  height: 100vh;
  width: 100%;
}
.fog__container {
  position:fixed;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.fog__img {
  position:fixed;
  height: 100vh;
  width: 300vw;
  opacity:0.8;
}
.fog__img--first {
  background: url("images/fog-1.png") repeat-x;
  background-size: contain;
  background-position: center;
  -webkit-animation: marquee 60s linear infinite;
          animation: marquee 60s linear infinite;
}
.fog__img--second {
  background: url("images/fog-2.png") repeat-x;
  background-size: contain;
  background-position: center;
  -webkit-animation: marquee 40s linear infinite;
          animation: marquee 40s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
  }
}

@keyframes marquee {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
  }
}	
#price{color:#fff; text-shadow:#000 2px 2px 5px; 
	letter-spacing:0.2em;text-align:center;
    display: block;line-height:1.5em;
	vertical-align:middle;
	font-size:2em;
	text-shadow:#F60 0 0 5px, #F90 0 0 30px;
	margin:5% auto;}
/*翻頁效果
#price:hover{ 
	color:#fff; text-shadow:#000 2px 2px 5px; 
	letter-spacing:0.2em;text-align:center;
	text-transform: capitalize;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -0.6em;
    position: relative;
    transition: transform 0.3s;
	animation-name:h3hidden;
	animation-duration:5s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-fill-mode: both;
	width:100%;
	text-shadow:#F60 0 0 5px, #F90 0 0 30px
	
	}
	@keyframes h3hidden{
		0% {}
		50%{}
		50.1% {transform: rotateX(90deg);}
		}

	#price:before{
    content: attr(data-hover);
	text-align:center; 
	font-size:2em;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    position: absolute;
	width:100%;
    top: 100%;
    left: 0;
	height:5em;
	text-shadow:#F60 0 0 5px, #F90 0 0 30px, #C00 0 0 30px;

}*/


/*購物連結*/
.shopbn{ 
	width:5.5em;
	font-size:0.8em; 
	border: rgba(255,255,255,1) 2px solid;
	text-align:center; 
	display:inline-block; 
	margin:0 1%;
	color:rgba(255,255,255,1); 
	padding:0.2em;
    text-transform: capitalize;/*翻頁效果*/
    display: inline-block;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -0.6em;
    position: relative;
    transition: transform 0.3s ease;
}	
.shopbn:hover{
    transform: rotateX(90deg);
}
.shopbn:before{/*翻頁效果*/
    content: attr(data-hover);
    color: #fff;
	font-weight:bold;
	padding:0.2em;
	text-align:center; 
    background:#C00;
    border-radius: 5px 0 5px;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    position: absolute;
    top: 100%;
    left: 0;
	width:5.5em;
}