@charset "utf-8";
/* CSS Document */
body {
	box-sizing:border-box;
	Font-family:微軟正黑體,Arial;
  	margin:0 auto;
  	padding:0;
	overflow-x:hidden;
	background:#ffffff;

	}
	
*,::before,::after{box-sizing:inherit}
a{color:#de507d;text-decoration:none}
a:hover{ color:#0CC}
.gp{display:inline-block}
#roll{position:fixed; width:60vw; height:60vw; top:0vw; left:0vw;animation:roll 50s infinite linear ;}
	@keyframes roll {
		from{ transform:rotate(0deg)}
		to{ transform:rotate(360deg)}
	}
#bg{width:100%; height:100%; position:fixed; top:0; margin:0; z-index:0;}

#social{ min-height:5vh; text-align:center; margin-bottom:0;z-index:100; width:100%; position:relative}
#social a:hover{color:#0CC;animation: 1s linear 0s normal none infinite jello-horizontal;}
#social a{ margin:2%;font-size:1.2em; display:inline-block;text-decoration:none}
#social a div{height:1.2em; width:1.2em;}
#copy{width:100%; display:block; clear:both; position:relative;text-align:center; bottom:0; font-size:.8em; color:#fff; text-shadow:#000 0 0 5px}
#copy img{ height:1.6em; margin:1em 2em}
@-webkit-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);
  }
}
/*東立選單結束*/

/*主視覺*/
.pc{ display:block}
.mobi{ display:none}
#cover{
	position:relative;
	z-index:50;
	width:100%;	
	text-align:center;
	margin:0 auto;
	
	
	}
	#cover img{max-width:1000px; width:100%;}
 	#cs{position:absolute; z-index:1}
	#title{position:absolute; z-index:2}
	#logo{ position:relative; z-index:3;}
@media (max-width:600px){#cover{ padding-top:3em}}

/*主視覺結束*/

/*標題樣式*/	
/**/
	header{position:fixed; width:100vw;background: rgba(0,0,0,.7); box-shadow: rgba(0,0,0,.7) 0 2px 10px;display:flex;align-items: center;justify-content: space-around;text-align: center; z-index:999;}
header:hover{background: rgba(0,0,0,.9); box-shadow: rgba(0,0,0,.9) 0 2px 10px;}
.fo-tab {
    position: relative;
    grid-row-start: 1;
    display: inline-flex;
    font-weight: 700;
    text-transform: uppercase;
    height: 2rem;
    font-size: 1em;
    line-height: 2.25rem;
    cursor: pointer;
    user-select: none;
    appearance: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(var(--fo-fg));
    border-color: rgb(var(--fo-fg));
    border-bottom-width: 2px;
}
.fo-glow {
    text-shadow: 0 0 .25rem rgb(var(--fo-fg)), 0 0 1rem rgb(var(--fo-fg));
}
.fo-glow a:hover{color:#FFF;text-shadow: 0 0 .25rem rgb(var(--fo-fg2)), 0 0 1rem rgb(var(--fo-fg2));}
:root {
    --fg-pb-green: 26, 255, 128;
    --fg-pb-blue: 46, 207, 255;
    --fg-pb-amber: 255, 182, 66;
    --fg-pb-white: 192, 255, 255;

    --fo-fg: var(--fg-pb-amber);
	--fo-fg2: var(--fg-pb-white);
    --fo-bg: var(--fg-pb-green), 0.25;
}
/**/	
/*各內容區塊樣式*/
main{ position:relative; z-index:10;background: url(../images/bgLT.png) left top no-repeat fixed,url(../images/bgLB.png) left bottom no-repeat fixed,url(../images/bgRT.png) right top no-repeat fixed,url(../images/bgRB.png) right bottom no-repeat fixed; background-size:auto, auto, auto , auto}
@media (max-width:600px){main{background: url(../images/bgLT.png) left top no-repeat fixed,url(../images/bgLB.png) left bottom no-repeat fixed,url(../images/bgRT.png) right top no-repeat fixed,url(../images/bgRB.png) right bottom no-repeat fixed; background-size: contain, contain, contain , contain}}
@keyframes bobg {
		0%{ background-position:0 bottom}
		100%{ background-position:200% bottom}
	}
.block{
	position:relative;
	padding:1% 10%; 
	padding-top:2em;
	padding-bottom:3em;
	margin:0 auto; 
	width:100%;
	text-align:center;
	z-index:5;
	}
	.block h1{ color:#C93 ; text-shadow: #fff 0 0 5px, #63C 0 0 15px ; margin:1em auto; margin-top:1.5em}
	.b2{background:linear-gradient(0deg, #000, rgba(0,0,0,.5) )}
	.b2 h1{color:#666}
.block p{color:#fff; margin:2em auto; letter-spacing:0.1em}


.block .imp{background: linear-gradient(225deg, #EC578B, #F90, #09C, #EC578B ); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bg2 50s infinite linear ; font-weight:bold;-webkit-filter:brightness(1.2); height:auto;}


@keyframes bt {
		from{ background-position:0 0;}
		to{ background-position:3000px 0;}
	}
@keyframes bg2 {
		from{ background-position:0 0;}
		to{ background-position:100px -100vh;}
	}
@keyframes bg3 {
		from{ background-position: 0 0,center center;}
		to{ background-position: -50px -100vh,center center;}
	}	
@keyframes bg4 {
		from{ background-position: 0 0,0 0;}
		to{ background-position: 200% 0,0 0;}
	}	

/*按鈕效果*/
.readlink{
    color: #FC6;
	display:inline-block;
	font-weight:bold;
    font-size: 1.5em;
    text-transform: uppercase;
	text-shadow:#000 0 0 10px;
    border:2px solid #FC6;
	margin-left:0.5em;
	margin-right:0.5em;
	margin-top:1em;
	margin-bottom:1em;
    padding:1% 5%;
    border-radius: 20px 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.1s;
	background:linear-gradient(0deg, rgba(0,0,0,.7),rgba(153,51,204,.1));
	background-size:auto;
}
@media (max-width:600px){.readlink{display:block; margin:1em auto}}
.readlink:hover{
    color: #fff;
    background: linear-gradient(0deg, rgba(102,204,204,1),rgba(51,204,153,.5));
	background-size:cover;
    border-radius: 0;
	text-shadow: #369 0 0 5px, #69C 0 0 10px;
	border:2px solid  #Fff;
	opacity:1;
	
}
.readlink:before,
.readlink:after,
.readlink span:before,
.readlink span:after{
    content: "";
    background-color:#fff;
    width: 0;
    height: 2px;
    position: absolute;
    top: -2px;
    right: 0;
    transition: all 0.3s ease;
}
.readlink:after,
.readlink span:after{
    width: 2px;
    height: 0;
    right: -2px;
    transition: 0.45s ease;
}
.readlink span:before{
    width: 0;
    top: auto;
    bottom: -2px;
    right: auto;
    left: 0;
}
.readlink span:after{
    right: auto;
    left: -2px;
    bottom: -2px;
    top: auto;
}
.readlink:hover:before,
.readlink:hover span:before{
    width: 100%;
}
.readlink:hover:after,
.readlink:hover span:after{
    height: 108%;
}

	


@media (max-width:900px){

}
@media (max-width:600px){

}
@media (max-width:700px){
	.mobi{ display:block}
	.pc{ display:none}
	

}	


/*neon link*/
.neonlink
{
	position: relative;
	display: inline-block;
	padding: 0.2em 1em;
	margin: 2em  auto;
	margin-left:0.2em;
	margin-right:0.2em;
	color: #C66;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	border: rgba(153,204,255,.3) 0.5px solid;
	overflow: hidden;
	transition: 0.5s;
	letter-spacing: 0.2em;
	-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.neonlink:hover
{
	background: linear-gradient(45deg, rgba(204,153,255,.7), rgba(102,204,255,1), rgba(204,153,255,.7));;
	color: #fff;
	box-shadow: 0 0 5px #6CC,
				0 0 25px #6CC,
				0 0 50px #6CC,
				0 0 200px #6CC;
}
.neonlink span
{
	position: absolute;
	display: block;
}
.neonlink span:nth-child(1)
{
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #03e9f4);
	animation: animate1 1s linear infinite;
}
@keyframes animate1
{
	0%
	{
		left: -100%;
	}
	50%, 100%
	{
		left: 100%;
	}
}
.neonlink span:nth-child(2)
{
	top: -100px;
	right: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, transparent, #03e9f4);
	animation: animate2 1s linear infinite;
	animation-delay: 0.25s;
}
@keyframes animate2
{
	0%
	{
		top: -100%;
	}
	50%, 100%
	{
		top: 100%;
	}
}
.neonlink span:nth-child(3)
{
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(270deg, transparent, #03e9f4);
	animation: animate3 1s linear infinite;
	animation-delay: 0.5s;
}
@keyframes animate3
{
	0%
	{
		right: -100%;
	}
	50%, 100%
	{
		right: 100%;
	}
}
.neonlink span:nth-child(4)
{
	bottom: -100%;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(360deg, transparent, #03e9f4);
	animation: animate4 1s linear infinite;
	animation-delay: 0.75s;
}
@keyframes animate4
{
	0%
	{
		bottom: -100%;
	}
	50%, 100%
	{
		bottom: 100%;
	}
}

.light{animation:light 2s infinite linear ;}
	@keyframes light{
		0%{ box-shadow:rgba(255,255,255,.5) 0 0 10px;-webkit-filter:brightness(1);-webkit-filter:hue-rotate(0deg);}
		50%{ box-shadow:rgba(255,255,255,1) 0 0 20px;-webkit-filter:brightness(2);-webkit-filter:hue-rotate(90deg);}
		0%{ box-shadow:rgba(255,255,255,.5) 0 0 10px;-webkit-filter:brightness(1);-webkit-filter:hue-rotate(0deg);}
		
		}
		
/*項目*/
.item{color:#fff; font-weight:bold; text-shadow: #63C; padding:0 0.5em; margin-right:0.5em; border-radius:2em;
	background-size: 10px 10px;
    	background-color: #3CC;
    	background-image: 
        linear-gradient(
            45deg,
            rgba(255, 255, 255, .2) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, .2) 50%, 
            rgba(255, 255, 255, .2) 75%, 
            transparent 75%, 
            transparent);}		

/*書籍介紹*/
.bookcover {
	width:25%;
	max-width:300px;
	display:inline-block; 
	vertical-align:middle;
	margin:0 auto;
	position:relative; }
.bookcover img{
	max-width:100%;}
.storyinfo{
	width:65%;
	max-width:550px;
	padding:0 2%;
	line-height:1.8em;
	display:inline-block;
	vertical-align:middle;
	text-align:left;
	color: #000;
	margin:0 auto;
	position:relative;
	}
.gift{ position:relative; margin:2em auto; text-align:center; width:100%; max-width:800px;}
	.gift img{ width:100%}
@media (max-width:600px){
.storyinfo{width:90%;padding:2%;display:block;margin:0 auto; text-align:center;}
.bookcover{ display:block; text-align:center;width:60%;margin:0 auto;}
}
@media (max-width:300px){.bookcover{ display:block; text-align:center;width:80%;margin:0 auto;}}			
/*標題樣式*/	
	.text-effect{ text-align: center;text-transform: uppercase; margin-top:8vh}
			.text-effect span{
				display: inline-block;
				animation: animate 1.4s infinite;
			}
			.text-effect span:nth-child(2){ animation-delay: 0.1s; }
			.text-effect span:nth-child(3){ animation-delay: 0.2s; }
			.text-effect span:nth-child(4){ animation-delay: 0.3s; }
			.text-effect span:nth-child(5){ animation-delay: 0.4s; }
			.text-effect span:nth-child(6){ animation-delay: 0.5s; }
			.text-effect span:nth-child(7){ animation-delay: 0.6s; }
			.text-effect span:nth-child(8){ animation-delay: 0.7s; }
			.text-effect span:nth-child(9){ animation-delay: 0.8s; }
			.text-effect span:nth-child(10){ animation-delay: 0.9s; }
			@keyframes animate{
				50%, 100%{ transform: translate(0, 0); }
				0%{ transform: translate(0, 0); }
				50%{ transform: translate(0, -40px); }
			}




.big_title{background:linear-gradient(90deg, #FC6, #FC6, #FFF, #C96,#FC6); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 50s infinite linear ; font-weight:bold;-webkit-filter:brightness(1); height:auto; letter-spacing:0.2em}
	.bt2{background:linear-gradient(90deg, #6CC, #9FC, #FFF, #6CF, #3CC, #3F9, #6CC); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 50s infinite linear ; font-weight:bold; height:auto; font-weight:bold;text-shadow:none; margin-bottom:1em}


.gradient-text {
	display:block;
	width:100%;
	margin: 0;
  padding: 0;
  font-size:5vw;
  line-height:2.5em;
  color: transparent;
  background: conic-gradient(
     #960 12%, 
     #C96 12%, #C96 33%, 
     #FC9 33%, #FC9 55%, 
     #966 55%, #966 70%, 
     #C96 70%, #C96 87%, 
     #960 87%);
  background-size: 5%;
  background-clip: text;  
  -webkit-background-clip: text;
  animation: expand-rev 0.5s ease forwards;
  cursor: pointer;
  text-shadow:rgba(204,153,102,.5) 0 0 1px;
  -webkit-filter:brightness(1.2);
}

@media (max-width:700px){
	.gradient-text {font-size:6vw;}

}


.gradient-text:hover {
  animation: expand 0.5s ease forwards;
}

@keyframes expand {
  0% {
    background-size: 5%;
    background-position: 0 0;
  }
  20% {
    background-size: 20%;
    background-position: 0 5%;
  }
  100% {
    background-size: 105%;
    background-position: -5% 5%;
  }
}

@keyframes expand-rev {
  0% {
    background-size: 105%;
    background-position: -5% -5%;
  }
  20% {
    background-size: 20%;
    background-position: 0 5%;
  }
  100% {
    background-size: 5%;
    background-position: 0 0;
  }
}

#story p{line-height:3em; color:#FFF; text-shadow: #000 0 0 5px, #039 0 0 10px, #609 0 0 15px; max-width:600px; margin:0 auto}

#Character, #Link{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index:1;
}

#Character .card, #Link .card{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255,255, 255, 0.5);
    border-left: 1px solid rgba(255,255, 255, 0.5);
    height: 400px;
    width:280px;
    backdrop-filter:blur(5px) ;
    background:rgba(255,255, 255, 0.1);
    overflow: hidden;
    box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
    margin:30px;
	border-radius:20px;
}

.card:hover .content{
    transform: translateY(0px);
    opacity:1;
}
.content{
    text-align: center;
    padding:20px;
    color: white;
    transition: 0.5s;
    transform: translateY(100px);
    opacity: 0;
	height:100%;
	background:rgba(0,0,0,.5);
	justify-content: center;
    align-items: center;
	display: flex;
	flex-direction:column;

}



.infocard{ 
	position:relative;
	border-radius:0.5em;
	margin:2em auto;
	margin-left:0.5em;
	margin-right:0.5em;
    height: 500px;
    width:300px;
    border-radius:15px;
	border-top: 1px solid rgba(255,255, 255, 0.5);
    border-left: 1px solid rgba(255,255, 255, 0.5);
    backdrop-filter:blur(5px) ;
    background:rgba(255,255, 255, 0.1);
    box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
	color:#fff;
	vertical-align:top;
	text-align:center;
	display:inline-block;
	text-shadow: #000 0 0 5px,#036 0 0 10px;
	}
	.infoicon{width:150px; height:150px; border-radius:100%; margin:1em auto;border: #FAB8B8 5px solid}
	.infocard p{padding:0 2em; line-height:2em}
	@media (max-width:700px){.infocard{margin:2em auto;margin-left: auto;margin-right: auto; width:100%;}.infoicon{width:150px; height:150px;}}

.aulink{text-align:center; width:100%; line-height:3em;}
.aulink a{color:#FFF; font-weight:bold}
.aulink a:hover{color:#FC6; font-weight:bold; transform:scale(1.1)}