@charset "utf-8";

/*基礎框架 */
#pagewrap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:56.25vh;height:100%;overflow:hidden;}
.section{position:absolute;top:0;left:0;width:100%;height:100%;transition:all 1s;}
.section.on{position:absolute;top:0!important;left:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;filter: none!important;}
.section.sec9.on{opacity:0.3!important;}
.hcenter{position:absolute;top:50%;transform: translateY(-50%);}
.nomargin{margin:0!important;}
.z000{z-index: 0;}
.z001{z-index: 1;}
.z002{z-index: 2;}
.z003{z-index: 3;}
.z004{z-index: 4;}
.z005{z-index: 5;}
.z006{z-index: 6;}
.z007{z-index: 7;}
.z008{z-index: 8;}
.z009{z-index: 9;}
.z010{z-index: 10;}
.z011{z-index: 11;}
.sec1{animation: sec1move 40s infinite;}
.sec2{animation: sec2move 10s infinite;}
.sec3{animation: sec3move 30s infinite;}
.sec4{animation: sec1move 28s infinite;}
.sec6{animation: sec6move 45s infinite;}
.sec7{opacity:1;animation: sec7move 15s infinite;}
.sec72{opacity:1;animation: sec72move 15s infinite;transform-origin:  50% 30%;}
.sec8{animation: sec8move 20s infinite;transform-origin:  50% 50%;}
.sec9{animation: sec9move 20s infinite;transform-origin:  50% 50%;}
.sec10{animation: sec10move 50s infinite;transform-origin:  50% 50%;}
.sec11 p{position:absolute;width:200%;text-align:right;bottom:70%;right:-100%;height:13vh;font-size:8.6vh;line-height:1.5;color:#fff;font-weight:bold;font-stretch: 40%;opacity:0;transition:all 1s;}
.sec11 p.s{font-size:4vh;line-height:1.5;height:6vh;bottom:69%;}
.sec11 p.s2{font-size:3vh;line-height:1.5;height:4.5vh;bottom:69.5%;}
.sec11.on p{right:3%;opacity:1;}
/* css 動態 */
@media (max-aspect-ratio: 10/16) {
	#pagewrap{position:absolute;top:0;left:0;transform:none;width:100%;height:100%;}
}
@keyframes sec2move {
  30%{
	top:0;
	left:0;
  }
  31%{
	top:-0.2vh;
	left:0;
  }
  32%{
	top:0.4vh;
	left:0;
  }
  33%{
	top:0;
	left:0;
  }
  38%{
	top:0;
	left:0;
  }
  39%{
	top:0;
	left:-0.4vh;
  }
  40%{
	top:;
	left:0.6hh;
  }
  41%{
	top:0;
	left:0;
  }
}
@keyframes sec3move {
  20%{
	left:0;
	opacity:1;
  }
  50%{
	left:40%;
	opacity:0.3;
  }
  60%{
	left:40%;
	opacity:0.3;
  }
  75%{
	left:0;
	opacity:1;
  }

}
@keyframes sec6move {
  30%{
	top:0;
	opacity:1;
	filter: none;
  }
  40%{
	top:40%;
	filter: blur(0.3vh);
	opacity:0;
  }
  50%{
	top:40%;
	filter: blur(0.3vh);
	opacity:0;
  }
  60%{
	top:0;
	opacity:1;
	filter: none;
  }
}
@keyframes sec1move {
  30%{
	filter:brightness(1);
  }
  35%{
	filter:brightness(1.5);
  }
  40%{
	filter:brightness(1);
  }
  60%{
	filter:brightness(1);
  }
  65%{
	filter:brightness(1.8);
  }
  68%{
	filter:brightness(0.5);
  }
  72%{
	filter:brightness(1.2);
  }
  75%{
	filter:brightness(1);
  }
}
@keyframes sec7move {
  25%{
	left:0;
	opacity:1;
  }
  50%{
	left:-12%;
	opacity:0.5;
  }
  75%{
	left:0%;
	opacity:1;
  }
}
@keyframes sec72move {
  10%{
	top:0;
	left:0;
	width:100%;
	height:100%;
    filter: blur(0.3vh);
	opacity:0.1;
  }
  30%{
	 top:-15%;
	 left:0%;
	width:150%;
	height:130%;
    filter: blur(0.8vh);
	opacity:0.3;
  }	
  60%{
	 top:-10%;
	 left:15%;
	width:130%;
	height:120%;
    filter: blur(0.7vh);
	opacity:0.2;
  }	
  90%{
	  top:0;
	  left:0;
	width:100%;
	height:100%;
    filter: blur(0.3vh);
	opacity:0.1;
  }
}
@keyframes sec8move {
  0%{
	top:0;
  }
  20%{
   top:0;
   opacity:1;
   filter: none;
  }
  35%{
   top:-10%;
   opacity:0.1;
   filter: blur(1vh);
  }
  45%{
   top:-10%;
   opacity:0.1;
   filter: blur(1vh);
  }
  60%{
   top:0;
   opacity:0.7;
   filter: blur(0.2vh);
  }
  75%{
    top:10%;
	opacity:0.1;
	filter: blur(1vh);
  }
  85%{
    top:10%;
	opacity:0.1;
	filter: blur(1vh);
  }
  100%{
	top:0;
	opacity:1;
	filter: none;
  }
}
@keyframes sec9move {
  0%{
   top:0;
   opacity:0.3;
  }
  30%{
   top:3%;
   opacity:0.2;
  }
  60%{
    top:-3%;
	opacity:0.2;
  }
  100%{
	top:0;
	opacity:0.3;
  }
}
@keyframes sec10move {
  8%{
   top:0;
   opacity:1;
   filter: none;
	width:100%;
	height:100%;
   }
  10%{
   top:0;
   opacity:0.4;
   filter: blur(1vh);
   width:150%;
   height:150%;
  }
  30%{
   top:-30%;
   opacity:0.2;
  }
  40%{
    top:-30%;
	opacity:0.2;
  }
  60%{
	top:0;
	opacity:1;
	filter: none;
	width:100%;
	height:100%;
  }
 
}