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

#bg2{
	background:url(../images/imui.svg) center center no-repeat; 
	background-size:contain;
	animation:bg 50s infinite linear ;
	position:fixed;
	top:-10vw; 
	right:-10vw;
	opacity:0.5;
	width:60vw;
	height:60vw;
	z-index:1;
	}
	@keyframes bg {
		0%{ transform:rotate(0deg)}
		100%{ transform:rotate(360deg)}
	}



	
a{color:#de507d;text-decoration:none}
a:hover{ color:#0CC}
.gp{display:inline-block}
/*東立選單*/	
.btn{
	position:fixed;
	top:0;
	width:100%;
	z-index:999;
	width:100%;
	background:rgba(0,0,0,.7);
	margin:0 auto;
	opacity: 0.9;
	text-align:center;
	vertical-align:middle;
	padding:0.2em 0;
	}
.btn a{ font-size:1em; font-weight:bold; color:#FF6; margin:0 auto; margin-left:1em; margin-right:1em;  letter-spacing:0em;}

#nav{ min-height:5vh; text-align:center; margin-bottom:0;z-index:9999;}
#nav a:hover{color:#0CC;animation: 1s linear 0s normal none infinite jello-horizontal;}
#nav a{ margin:2%;font-size:1.1em; display:inline-block;text-decoration:none}
#social{ min-height:5vh; text-align:center; margin-bottom:0;z-index:9999; 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;}

@-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}

#item{position:absolute; top:0; width:100vw; z-index:1;}	
#item img{width:100%}
#cover{
	position:relative;
	z-index:50;
	width:100%;
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	}
	#cover img{max-width:100%; max-height:110vh; margin:0 auto}
	
	
	
#go{position:fixed; bottom:0;right:0; z-index:51}
	#go img{width:25vw; max-width:250px;animation: animate 1.4s infinite;}
	@media (max-width:600px){#go img{width:30vw; max-width:250px}}

/*主視覺結束*/

/*標題樣式*/	
	.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); }
			}


/*各內容區塊樣式*/

.block{
	position:relative;
	padding:1% 2%; 
	padding-top:2em;
	padding-bottom:3em;
	margin:3em auto; 
	width:80%;
	border-top: 1px solid rgba(255,255, 255, 1);
    border-left: 1px solid rgba(255,255, 255, 1);
	border-radius:15px;
    backdrop-filter:blur(5px) ;
    background: rgba(255,255, 255,.5);
	background-size:contain;
    box-shadow:2px 10px 30px #666666;
	text-align:center;
	z-index:5;
	color: #000;
	line-height:2.5em;
	}


.event2{ background:rgba(255,255, 255, 0.1);box-shadow:5px 20px 50px #FFCCCC;}	
	@media (max-width:700px){
	.block{width:90%;box-shadow:0 10px 5px #abced8;}
	.event1{ box-shadow:0 5px 5px #000000;}
	.event2{ box-shadow:0 5px 5px #FFCCCC;}
	}

.block h1{ color:#1D2086 ; /*text-shadow: #CBD900 0px 0px 10px ;*/ margin:1em auto; margin-top:1.5em}
.block .imp{background: linear-gradient(225deg, #EC578B, #F90, #09C, #EC578B ); background-clip:text;-webkit-background-clip: text; color: transparent;animation:bt 50s infinite linear ; font-weight:bold;-webkit-filter:brightness(1.2); height:auto;}

@keyframes bt {
		from{}
		to{ background-position:3000px 500px;}
	}

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


#copy{text-align:center; bottom:0; font-size:.9em; color:#333}
#copy img{ height:1.6em; margin:1em 2em}
@media (max-width:900px){

}
@media (max-width:600px){
	#cover{padding-top:3em}
}
@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: #CBD900;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	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(29,32,134,.2), rgba(0,258,231,.8), rgba(29,32,134,.2));;
	color: #fff;
	box-shadow: 0 0 5px #CBD900,
				0 0 25px #CBD900,
				0 0 50px #CBD900,
				0 0 200px #CBD900;
}
.neonlink span
{
	position: absolute;
	display: block;
}
.neonlink span:nth-child(1)
{
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #CBD900);
	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, #CBD900);
	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, #CBD900);
	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, #CBD900);
	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);}