@charset "utf-8";
html, body{background:#000;}
/* 基本設定 */

/* demo box */
.demowrap{position:relative;text-align:center;display:inline-block;width:66%;margin:0 auto;}
.demoboxsize{position:relative;opacity:0;z-index:0;width:100%;opacity:0;}
.demowrapin{position:absolute;perspective: 35vw;top:0px;height:100%;width:100%;left:50%;transform:translateX(-50%);}
.demobox{position:absolute;transition:opacity 1s,transform 1s;overflow:hidden;top:0;;top:0px;height:100%;width:100%;left:0;border-radius:10px;border:1px solid rgba(255,255,255,0.3);transform-origin: 50% 50%;background:rgba(255,255,255,0.9);}
.demobox img{width:100%;}
.demobox.backend{opacity:0;z-index:1;}
.demobox.center{opacity:1;z-index:9;transform:rotateY(0) translate3d(0px, 0px, 0px);}
.demobox.left{transform: rotateY(-10deg) translate3d(-15%, 0px, 0px);opacity:0.6;z-index:8;/*left:calc(38% - 450px);*/}
.demobox.right{transform: rotateY(10deg) translate3d(15%, 0px, 0px);opacity:0.6;z-index:8;/*left:calc(62% - 450px);*/}
.demobox.farleft{transform: rotateY(-15deg) translate3d(-30%, 0px, 0);opacity:0.4;z-index:6;/*left:calc(15% - 450px);*/}
.demobox.farright{transform: rotateY(15deg) translate3d(30%, 0px, 0);opacity:0.4;z-index:6;/*left:calc(85% - 450px);*/}
.demobox.rightbk{opacity:0;z-index:1;transform: rotateY(25deg) translate3d(50%, 0px, 0);/*left:calc(85% - 450px);*/}
.demobox.leftbk{opacity:0;z-index:1;transform: rotateY(-25deg) translate3d(-50%, 0px, 0);/*left:calc(85% - 450px);*/}
.demolink{position:absolute;right:0;bottom:0;display:inline-block;font-size:16px;line-height:40px;color:#222;border:1px solid #999;border-radius:20px;padding:0 20px;}
.demolink:hover{background:#999;color:#fff;}
.demobgwhite{}
.demorotate{position:absolute;top:calc(50% - 30px);z-index:10;}
.demorotate i{font-size:60px;color:rgba(255,255,255,0.7);text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.5);}
.demorotate i:hover{color:rgba(255,255,255,1);}
.demorotate.left{left:3%;}
.demorotate.right{right:3%;}
.demosplit{position:relative;height:calc(100% - 50px);width:44%;margin:25px 3%;float:left;}
.demosplit img{max-width:100%;max-height:100%;margin:0 auto;}
.demosplit h1{color:#222;text-align:left;font-size:20px;line-height:30px;margin-top:10px;}
.demosplit h1:nth-child(1){margin-top:0;}
.demosplit p{color:#555;text-align:left;font-size:15px;line-height:22px;margin-top:10px;}



/* 1200 以下改手機板  */
@media screen and (max-width: 1200px) {
  .demowrap{perspective: 200vw;width:80%;display:inline-block;margin:0 auto;text-align:center;}
  .demobox{position:absolute;transition:opacity 1s,transform 1s;overflow:hidden;border-radius:2vw;border:1px solid rgba(255,255,255,0.3);transform-origin: 50% 50%;background:rgba(255,255,255,0.9);}
.demobox.left{transform: rotateY(-8deg) translate3d(-16%, 0px, 0);opacity:0.6;z-index:8;/*left:calc(38% - 450px);*/}
.demobox.right{transform: rotateY(8deg) translate3d(16%, 0px, 0);opacity:0.6;z-index:8;/*left:calc(62% - 450px);*/}
.demobox.farleft{transform: rotateY(-15deg) translate3d(-37%, 0px, 0px);opacity:0.4;z-index:6;/*left:calc(15% - 450px);*/}
.demobox.farright{transform: rotateY(15deg) translate3d(37%, 0px, 0px);opacity:0.4;z-index:6;/*left:calc(85% - 450px);*/}
.demobox.leftbk{opacity:0;z-index:1;transform: rotateY(-25deg) translate3d(-60%, 0px, -10vw);/*left:calc(85% - 450px);*/}
.demobox.rightbk{opacity:0;z-index:1;transform: rotateY(25deg) translate3d(60%, 0px, -10vw);/*left:calc(85% - 450px);*/}



  .demolink{position:absolute;right:0;bottom:0;display:inline-block;font-size:16px;line-height:40px;color:#222;border:1px solid #999;border-radius:20px;padding:0 20px;}
  .demolink:hover{background:#999;color:#fff;}
  .demobgwhite{}
  .demorotate{position:absolute;top:calc(50% - 30px);z-index:10;}
  .demorotate i{font-size:10vw;}
  .demorotate.left{left:0;}
  .demorotate.right{right:0;}
  .demosplit{position:relative;height:40vw;width:80%;margin:3vw 10%;float:left;}
  .demosplit img{max-width:100%;max-height:100%;}
  .demosplit h1{color:#222;text-align:left;font-size:5vw;line-height:8vw;margin-top:2vw;}
  .demosplit h1:nth-child(1){margin-top:0;}
  .demosplit p{color:#555;text-align:left;font-size:3vw;line-height:5vw;margin-top:2vw;}
	/*側面menu*/
}