@charset "utf-8";
#preloadbox{position:fixed;z-index:999;top:0;left:0;height:100vh;width:100%; background:#000;transition:all 1s;}
#preloadbox.on{z-index:0;opacity:0;}
#preloadbox img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5vw;}
.mx100{max-width:100%;}
/* 比例版 */ 
html, body{background:#6db0d2;}
body{}
#logo{position:fixed;top:5%;right:1.5%;width:17%;z-index:99;opacity:0;transition:all 1s;}
#logo.on{opacity:1;}
#logol{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;z-index:90;transition:all 1s;opacity:1;animation: danceme 8s infinite;}
#logol.on{z-index:0;opacity:0;}
.allbg{position:fixed;top:0;left:0;width:100%;height:100%;}
.allbgabs{position:absolute;top:0;left:0;width:100%;height:100%;}
.allbg .img1{position:fixed;top:0;left:0;width:100%;height:100%;}
.allbg .img2{position:fixed;top:-2%;left:-2%;width:104%;height:104%;transition:all 1s;animation: floatme 12s infinite;}
.allbg .img3{position:fixed;top:-2%;left:-2%;width:104%;height:104%;transition:all 1s;animation: floatme2 15s infinite;}
#logov{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;opacity:1;transition:all 1s;}
#logov.off{opacity:0;}
.pagewrap{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1;transition:all 1s;transform:scale(0);transform-origin: center;}

.pagewrap.on{opacity:1;z-index:3;transform:scale(1);}
.pagewrap.base{opacity:1;z-index:2;transform:scale(1);}
.pagecenterwrap{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100vh;height:100%;}
.pagecenterwrapu{position:fixed;top:0;left:54%;transform:translateX(-54%);width:104vh;height:100%;}
.pagecenterwrapu.type2{position:fixed;top:0;left:50%;transform:translateX(-50%);width:118vh;height:100%;}
#pageu .textbox{position:absolute;top:28.5vh;left:0;width:100%;overflow-x:auto;margin-top:50vh;font-size:5.4vh;font-weight:800;line-height:12.8vh;letter-spacing:0.5vh;color:#fff;opacity:0;transition:all 1s;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
#pageu  .pagecenterwrapu.type2 .textbox{position:absolute;top:50%;transform:translateY(-50%);font-size:5.4vh;line-height:10.5vh;text-align:center;}
#pageu  .pagecenterwrapu.type2 .textbox.sc2{font-size:4vh;line-height:6vh;}
#pageu .textbox .textline{height:12.8vh;position:relative;;}
#pageu .textbox .textline.sc2{font-size:4vh;line-height:6.4vh;width:100%;}
#pageu .textbox .textline.sc3{font-size:3vh;line-height:4.267vh;width:100%;}
#pageu .textbox .textline.abs .fbox{position:absolute;left:0;top:50%;transform:translateY(-50%);}
#pageu .textbox .textline .fbox {padding:0 1vh;};
#pageu .textbox .textline .fbox span{transition:all 0.5s;}
#pageu .textbox .textline .fbox span.off{opacity:0;}



#pageu .textbox.on{margin-top:0;opacity:1;}
#pageu .qbox{position:absolute;top:16.5vh;left:-4vh;width:300%;transform:translateY(-50%);font-size:7vh;font-weight:800;line-height:7.7vh;color:#fff;opacity:0;transition:all 1s;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
#pageu .qbox.on{font-size:7vh;line-height:7.7vh;font-weight:800;opacity:1;width:104%;}
#pageu .qbox.on.sc2{font-size:4.4vh;line-height:5vh;font-weight:800;opacity:1;}
#pageu .textbox .textline{position:relative;margin-top:20vh;opacity:0;width:auto;transition:all 1s;    text-shadow: 0.2vh 0.2vh 0 #6c6c3973, 0.3vh 0.3vh 0 #6c6c3973, 0.3vh 0.3vh 1.5vh #6c6c3973;}
#pageu .textbox .textline.on{margin-top:0;opacity:1;}
#pageu .textbox .textline.test{width:max-content!important;}
#pageu .qbox.test{width:max-content;}

#pageu .textbox .textline.on.show{opacity:0.4;}
#pageu .textbox .textline.on.c.show{    color: #eda625 !important;
    opacity: 1;
    text-shadow: 0.2vh 0.2vh 0 #6c6c3973, 0.3vh 0.3vh 0 #6c6c3973, 0.3vh 0.3vh 1.5vh #6c6c3973;  }
#pageu .textbox .textline.sc2.on.c.show{color:#ffff00;opacity:1;text-shadow: -0.1vh -0.1vh 0 black,0.15vh 0.15vh 0 black,0.15vh 0.15vh 0.7vh black}
#pageu .textbox .textline.sc3.on.c.show{color: #eda625 !important;opacity:1;text-shadow: 0.2vh 0.2vh 0 #6c6c3973, 0.3vh 0.3vh 0 #6c6c3973, 0.3vh 0.3vh 1.5vh #6c6c3973; }
#pageu .textbox .textline.on.d.showb{border-radius:2vh;background:#82d27b;}



.pagewrap.close{opacity:0;margin-top:-100vh;;}
.full-mountain-image{position:absolute;  background:url('../img/bg00.jpg') center no-repeat;  width: 100%;  height: 100%;  background-size: cover;}
#pagevideobox{position:absolute;width:90%;height:91%;left:5%;top:6%;}
#pagevideo{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);min-width:84%;min-height:80%;max-width:86%;max-height:86%;background:#000;z-index:2;opacity:0.7;transition:all 1s;}
#pagevideo1{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);min-width:84%;min-height:80%;max-width:86%;max-height:86%;background:#000;opacity:0.7;transition:all 1s;z-index:1;}
#pagevideo.on{opacity:1;z-index:3;}
#pagevideo1.on{opacity:1;z-index:4;}
.ca50049{color:#a50049!important;}
.c205eb3{color:#205eb3!important;}
.c2D6F50{color:#33934a!important;}
.c74266D{color:#913190!important;}




/* STARS */
.star{position:absolute;z-index:2;transform:translate(-50%,-50%);transform-origin:center;}
.st1{left:4.8%;top:18.3%;width:6.35%;animation: rotme 2.2s infinite;}
.st2{left:36.48%;top:5.19%;width:5.39%;animation: rotme 3s infinite;}
.st3{left:71.33%;top:5.96%;width:4.69%;animation: rotme 2.8s infinite;}
.st4{left:95.52%;top:25.19%;width:5.39%;animation: rotme 2s infinite;;}
.st5{left:3.31%;top:42.16%;width:5.16%;animation: rotme 4s infinite;;}
.st6{left:3.8%;top:74.12%;width:3.88%;animation: rotme 2.4s infinite;}
.st7{left:94.64%;top:71.57%;width:5.42%;animation: rotme 3.6s infinite;}
.st8{left:5.1%;top:91.11%;width:7.55%;animation: rotme 2.5s infinite;}
.st9{left:92.84%;top:90.37%;width:9.38%;animation: rotme 5s infinite;}
/*
.lst1{width:5.4%;left:21.3%;top:4%;animation: rotme 2.2s infinite;}
.lst2{width:6%;left:75%;top:5.5%;animation: rotme 3s infinite;}
.lst3{width:7.1%;left:94%;top:30.1%;animation: rotme 2.8s infinite;}
.lst4{width:7.2%;left:3%;top:76%;animation: rotme 4s infinite;}
.lst5{width:4.5%;left:95%;top:77%;animation: rotme 2.2s infinite;}
.lst6{width:8.7%;left:7%;top:90%;animation: rotme 3.8s infinite;}
.lst7{width:3%;left:20%;top:96%;animation: rotme 2.8s infinite;}
.lst8{width:5.9%;left:85%;top:94%;animation: rotme 3.2s infinite;}
*/
.lst1{width:5.4%;left:3%;top:22%;animation: rotme 2.4s infinite;}
.lst2{width:6%;left:75%;top:5.5%;animation: rotme 3s infinite;}
.lst3{width:7.1%;left:94%;top:30.1%;animation: rotme 2.8s infinite;}
.lst4{width:7.2%;left:5%;top:70%;animation: rotme 4s infinite;}
.lst5{width:4.5%;left:95%;top:77%;animation: rotme 2.2s infinite;}
.lst6{width:8.7%;left:7%;top:90%;animation: rotme 3.8s infinite;}
.lst7{width:3%;left:20%;top:96%;animation: rotme 2s infinite;}
.lst8{width:5.9%;left:90%;top:92%;animation: rotme 3.2s infinite;}
.rst1{width:6%;left:3%;top:18%;animation: rotme 2s infinite;}
.rst2{width:4.5%;left:18%;top:5%;animation: rotme 2.8s infinite;}
.rst3{width:8%;left:75%;top:8%;animation: rotme 4s infinite;}
.rst4{width:6.5%;left:5.5%;top:38%;animation: rotme 3.2s infinite;}
.rst5{width:6%;left:94%;top:30%;animation: rotme 2.5s infinite;}
.rst6{width:6%;left:5.8%;top:75%;animation: rotme 3s infinite;}
.rst7{width:8%;left:4.6%;top:90%;animation: rotme 2.2s infinite;}
.rst8{width:5%;left:94%;top:70%;animation: rotme 3s infinite;}
.rst9{width:7.5%;left:93%;top:88%;animation: rotme 3.4s infinite;}
.rst10{width:4%;left:85%;top:95%;animation: rotme 4.3s infinite;}
.gst1{width:5%;left:3%;top:25%;animation: rotme 2.4s infinite;}
.gst2{width:7%;left:75%;top:6%;animation: rotme 3.6s infinite;}
.gst3{width:5%;left:5%;top:35%;animation: rotme 4.3s infinite;}
.gst4{width:5%;left:94%;top:28%;animation: rotme 2.8s infinite;}
.gst5{width:6%;left:95%;top:75%;animation: rotme 3s infinite;}
.gst6{width:7%;left:4%;top:90%;animation: rotme 4s infinite;}
.gst7{width:4%;left:14%;top:94%;animation: rotme 2s infinite;}
.gst8{width:4.8%;left:75%;top:94%;animation: rotme 3s infinite;}
.gst9{width:8.6%;left:93%;top:90%;animation: rotme 3.2s infinite;}


/*圖層 */
.z001{z-index:1;}
.z002{z-index:2;}
.z003{z-index:3;}
.z004{z-index:4;}
.z005{z-index:5;}
/* winline*/
.winline{position:absolute;z-index:2;opacity:0;transition:all 1s;}

.winline.b{background:rgba(55,55,240,0.8);}
.winline.r{background:rgba(255,0,155,0.8);}
.winline.h1{top:14%;left:5%;height:1%;width:90%}
.winline.h2{top:38%;left:5%;height:1%;width:90%}
.winline.h3{top:62%;left:5%;height:1%;width:90%}
.winline.h4{top:86%;left:5%;height:1%;width:90%}
.winline.v1{top:5%;left:12.5%;width:1%;height:90%;}
.winline.v2{top:5%;left:37.5%;width:1%;height:90%;}
.winline.v3{top:5%;left:62.5%;width:1%;height:90%;}
.winline.v4{top:5%;left:87.5%;width:1%;height:90%;}
.winline.c1{top:-11%;left:48%;transform:rotate(-45deg);transform-origin:center;width:1%;height:123%;}
.winline.c2{top:-11%;left:50%;transform:rotate(45deg);transform-origin:center;width:1%;height:123%;}
.winline.on{opacity:1;box-shadow:0.1vw 0.1vw 0.5vw rgba(0,0,0,0.9);}
/* numberbox */
.numberbox{position:absolute;width:25%;z-index:1;transition:all 1s;}
.numberbox#pos1{top:14%;left:0;}
.numberbox#pos2{top:14%;left:25%;}
.numberbox#pos3{top:14%;left:50%;}
.numberbox#pos4{top:14%;left:75%;}
.numberbox#pos5{top:38%;left:0;}
.numberbox#pos6{top:38%;left:25%;}
.numberbox#pos7{top:38%;left:50%;}
.numberbox#pos8{top:38%;left:75%;}
.numberbox#pos9{top:62%;left:0;}
.numberbox#pos10{top:62%;left:25%;}
.numberbox#pos11{top:62%;left:50%;}
.numberbox#pos12{top:62%;left:75%;}
.numberbox#pos13{top:86%;left:0;}
.numberbox#pos14{top:86%;left:25%;}
.numberbox#pos15{top:86%;left:50%;}
.numberbox#pos16{top:86%;left:75%;}
.numbericon{position:absolute;top:50%;left:0;width:100%;z-index:1;opacity:0;transition:all 1s;transform:translateY(-50%) rotateY(0deg);transform-origin: center;}
.numbericon.on{opacity:1;z-index:2;transform:translateY(-50%) rotateY(720deg);}
.numbericon.op{opacity:0.3;}
.numbericon.show{animation: blinkme 1s 6;   transform: translateY(-50%) rotateY(1440deg);}
.numberbox.open{position:absolute;z-index:2;width:80%;left:50%!important;top:50%!important;transform:translate(-50%,-50%) rotateY(720deg);}

@keyframes danceme {
  4%{
    margin-top:-1%;
  }
  7%{
    margin-top:1.2%;
  }
  10%{
    margin-top:-1.6%;
  }
  13%{
    margin-top:1.5%;
  }
  18%{
    margin-top:-1.2%;
  }
  22%{
    margin-top:0.8%;
  }
  25%{
    margin-top:0.5%;
  }
  28%{
    margin-top:0%;
  }
}
@keyframes floatme {
  4%{
    margin-top:-0.3%;
	margin-left:-0.1%;
  }
  12%{
    margin-top:0.4%;
	margin-left:0%;
  }
  34%{
    margin-top:-0.2%;
	margin-left:-0.4%;
  }
  40%{
    margin-top:0.1%;
	margin-left:0.2%;
  }
  67%{
    margin-top:-0.2%;
	margin-left:-0.1%;
  }
  74%{
    margin-top:0.3%;
	margin-left:0.3%;
  }
  82%{
    margin-top:-0.1%;
	margin-left:-0.1%;
  }
  92%{
    margin-top:0.1%;
	margin-left:0.2%;
  }
}
@keyframes floatme2 {

  4%{
    margin-top:-0.2%;
	margin-left:-0.4%;
  }
  12%{
    margin-top:0.1%;
	margin-left:0.1%;
  }
  26%{
    margin-top:-0.4%;
	margin-left:-0.3%;
  }
  41%{
    margin-top:0.3%;
	margin-left:0%;
  }
  49%{
    margin-top:-0.2%;
	margin-left:-0.1%;
  }
  68%{
    margin-top:0.1%;
	margin-left:0.2%;
  }
  74%{
    margin-top:-0.2%;
	margin-left:-0.1%;
  }
  89%{
    margin-top:0.1%;
	margin-left:0.2%;
  }
}
@keyframes blinkme {
	0%{
		filter: brightness(1);
	}	
	30%{
		filter: brightness(1.2);
	}
	80%{
		filter: brightness(1);
	}	
}
@keyframes rotme {
	0%{
		transform:translate(-50%,-50%) rotate(0);
	}
	10%{
		transform:translate(-50%,-50%) rotate(15deg);
	}	
	20%{
		transform:translate(-50%,-50%) rotate(15deg);
	}
	30%{
		transform:translate(-50%,-50%) rotate(-25deg);
	}	
	40%{
		transform:translate(-50%,-50%) rotate(-25deg);
	}	
	50%{
		transform:translate(-50%,-50%) rotate(18deg);
	}	
	70%{
		transform:translate(-50%,-50%) rotate(18deg);
	}	
	80%{
		transform:translate(-50%,-50%) rotate(-18deg);
	}	
	90%{
		transform:translate(-50%,-50%) rotate(-18deg);
	}		
	100%{
		transform:translate(-50%,-50%) rotate(0deg);
	}	
}