@charset "utf-8";
/* CSS Document */
body {
	box-sizing:border-box;
	Font-family:微軟正黑體,Ari;
  	margin:0 auto;
  	padding:0;
	overflow-x:hidden;}
*,::before,::after{box-sizing:inherit}
a{color:#de507d;text-decoration:none}
a:hover{ color:#0CC}
.gp{display:inline-block}

#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.5em; display:inline-block;text-decoration:none}
#social a div{height:1.5em; width:1.5em;}
#copy{width:100%; display:block; clear:both; position:relative;text-align:center; bottom:0; font-size:.9em; color:#000}
#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}
canvas#canvas {
		  display: block;
		  position:fixed;
		  width:100%;
		  height:100%;
		  z-index:1;
		}
#bg{width:100%; height:100%; position:fixed; top:0; margin:0 auto; z-index:0;}
#Carousel{ position:relative; z-index:10}
/*主視覺結束*/

/*標題樣式*/	

/*各內容區塊樣式*/

.block{
	position:relative;
	padding:1% 5%; 
	padding-top:2em;
	padding-bottom:3em;
	margin:0 auto; 
	width:100%;
	text-align:center;
	z-index:10;
	color: #000;
	line-height:2.5em;
	}
	.block h1{ color:#fff ; text-shadow: #6CC 0px 0px 10px ; margin:1em auto; margin-top:1.5em}
	.b2{background:linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,1) );}
	.b2 h1{color:#FFF}

	.bob {text-align:center; margin:1em}	
	.bob span:hover{animation: 1s linear 0s normal none infinite jello-horizontal;}
	.bob span{width:1.5em; height:1.5em; display:inline-flex; background:#FFF; border-radius:100%; color:#6CC; text-shadow:none; font-size:1em; text-align:center;justify-content:center;align-items:center; margin: auto -0.1em; letter-spacing:normal; box-shadow:rgba(51,51,51,.2) 0 15px 5px}


.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 bg1 {
		from{ background-position:0 center,left top,right bottom,center center;}
		to{ background-position:120% center,left top,right bottom,center center;}
	}	
@keyframes bg2 {
		from{ background-position:center center,0% 0, left top, right bottom;}
		to{ background-position:center center,120% 0, left top, right bottom;}
	}
@keyframes bg3 {
		from{ background-position: 0 0, center bottom;}
		to{ background-position: -200% -200%, center bottom;}
	}	
@keyframes bg4 {
		from{ background-position: 0 0,0 0;}
		to{ background-position: 200% 0,0 0;}
	}	

/*按鈕效果*/
.readlink{
    color: #000;
	display:inline-block;
	font-weight:bold;
    font-size: 1.5em;
    text-transform: uppercase;
    border:1px solid #000;
	margin-left:0.5em;
	margin-right:0.5em;
	margin:2em auto;
    padding:1% 5%;
    border-radius: 20px 0;
    position: relative;
    z-index: 1;
	background:#FC0;
    transition: all 0.3s ease 0.1s;
}
.readlink:hover{
    color: #000;
    background:linear-gradient(to right,rgba(255,102,102,1),rgba(255,51,51,1));
    border-radius: 0;
	text-shadow: #F99 0 0 2px;
}
.readlink:before,
.readlink:after,
.readlink span:before,
.readlink span:after{
    content: "";
    background-color: #F99;
    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%;
}



/*連結樣式*/		
	.bn{color: #F7D595; font-weight:bold; text-align:center; padding:0.5em 1.5em; border:1px solid #F7D595; cursor:pointer; margin:1em auto; margin-left:1em; margin-right:1em;  display:inline-block; text-shadow:#000 0 0 10px; font-weight:300; background:rgba(0,0,0,.8); z-index:90; position:relative}
	.bn:hover{ animation:bnhover 0.3s linear forwards}
	@keyframes bnhover{
		0%{}
		100%{ transform: scale(1.1);font-weight:bold; text-shadow: none; text-decoration:none}
		}
/*連結樣式結束*/		

/*活動彙整BOX*/
.eventbox{ width:45%; max-width:450px; min-width:280px; display:inline-block; margin:2em auto; text-align:center; color:#C96;background: linear-gradient(90deg, rgba(255,255,255,0.5),#fff,rgba(255,255,255,0.1));border: #C96 3px solid;}
.eventbox img{width:100%}
.eventbox:hover{ color:#F69;border: #F69 3px solid; transform:scale(1.1)}
.video{ position:relative; width:25%; min-width:200px; min-height:150px;  margin:.5em auto; margin-left:1em; margin-right:1em; display:inline-flex;justify-content:center; text-align:center;align-items:center; background:linear-gradient(90deg,rgba(0,0,0,0.9), rgba(52,1,1,0.7),rgba(0,0,0,0.9)); border:rgba(204,0,0,1) 2px solid; box-shadow:#666 0 10px 10px, inset #000 0 0 15px; color:#FFF; text-shadow:#000 0 0 5px; padding-top:2.5em;flex-direction:column }
.video span{ line-height:2.5em;display:block; background:rgba(204,0,0,1); width:100%; color:#FFF; text-shadow:#09C 0 0 5px; font-weight:bold; top:0; position:absolute}
.video .play{ opacity:.5;background:rgba(255,255,255,.3); border-radius:100%; display:flex; width:2em; height:2em; justify-content:center; text-align:center;align-items:center; margin:.5em auto}
.video:hover{ transform:scale(1.1);-webkit-filter:sepia(1);}



@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:#FFF;
	text-shadow: #000 0 0 10px;
	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;
	font-weight:bold;
	backdrop-filter:blur(5px) ;
    background:repeating-radial-gradient(circle at center, #000, rgba(0,0, 0, 0.5));
	-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.neonlink:hover
{
	background: linear-gradient(45deg, rgba(255,102,102,1), rgba(255,153,204,.7));
	backdrop-filter:blur(5px) ;
	color: #fff;
	text-decoration: none;
	text-shadow: #F66 0 0 10px;
	box-shadow: 0 0 5px #FF6699,
				0 0 25px #FF99CC,;
}
.neonlink span
{
	position: absolute;
	display: block;
}
.neonlink span:nth-child(1)
{
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #000);
	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, #000);
	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, #000);
	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, #000);
	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);}
		
		}
		
/*緞帶標*/
.hbar{color:#000; font-weight:bold; text-shadow:none; padding:0.2em;clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%); text-align:center; margin:0.2em auto; width:15em; max-width:90vw;
	background-size: 50px 50px;
    	background-color:#F0D197;
    	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%;
	display:inline-block; 
	vertical-align:middle;
	margin:0 auto;
	position:relative; }
.bookcover img{
	max-width:100%;}
.storyinfo{
	width:65%;
	padding:0 2%;
	line-height:2em;
	display:inline-block;
	vertical-align:middle;
	text-align:left;
	color: #000;
	margin:0 auto;
	position:relative;
	}
@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;}}