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

/* 比例版 */
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%;}
.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:50%;transform:translateX(-50%);width:126vh;height:100%;}
#pageu .textbox{margin-top:50%;font-size:7.5vh;font-weight:600;line-height:1.8;letter-spacing:0.5vh;color:#fff;text-shadow: -0.1vh -0.1vh 0 black,0.2vh 0.2vh 0 black,0.2vh 0.2vh 1vh #000;opacity:0;transition:all 1s;}
#pageu .textbox.on{margin-top:24%;opacity:1;}
#pageu .qbox{position:absolute;top:18.4vh;left:0;transform:translateY(-50%);font-size:1vh;font-weight:600;line-height:1.1;color:#fff;text-shadow: -0.1vh -0.1vh 0 black,0.2vh 0.2vh 0 black,0.2vh 0.2vh 1vh #000;opacity:0;transition:all 1s;}
#pageu .qbox.on{font-size:7vh;font-weight:600;opacity:1;}
#pageu .textbox .textline{margin-top:20vh;opacity:0;transition:all 1s;}
#pageu .textbox .textline.on{margin-top:0;opacity:1;}
#pageu .textbox .textline.on.show{opacity:0.4;}
#pageu .textbox .textline.on.c.show{color:#ffff00;opacity:1;text-shadow: -0.2vh -0.2vh 0 black,0.3vh 0.3vh 0 black,0.3vh 0.3vh 1.5vh black}
.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;}
#pagevideo{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;max-width:105%;max-height:105%;background:#000;z-index:2;opacity:0.7;transition:all 1s;}
#pagevideo1{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;max-width:105%;max-height:105%;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;}
/*圖層 */
.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;}
.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);
	}	
}