@charset "utf-8";
html, body{background:#000;}
/* 基本設定 */
.show400{display:none;}
.hide400{}
.btn{cursor: pointer;}
.fullcutwrap{text-align:center;background-size: cover;}
.fullcutwrap span.sampleword{position:absolute;     display:inline-block;     top:50%; left:50%;    margin-top:-50px;font-size:100px;line-height;100px;color:#fff;}
.cutwrap,.fullcutwrap{position:relative;width:100%;overflow: auto;}
/*架構*/
.centerwarp{position:relative;width:84%;max-width:1300px;margin:0 auto;z-index:2;}
#header{position:fixed;top:0;left:0;width:100%;height:70px;background:rgba(0,0,0,0.5);z-index:99;}
.navlogo{width:260px;padding-top:12px; }
#footer{position:fixed;z-index:98;bottom:0;left:0;width:100%;background:url(../img/b70.png);border-top:1px solid #888;text-align: center;}
#footerin{padding:5px 20px;font-size:12px;color:#fff;line-height:24px;}
#footerin span{display:inline-block;margin:0 10px;}
.sq00{top:0;left:0;}
.sq01{top:0;left:10%;}
.sq02{top:0;left:20%;}
.sq03{top:0;left:30%;}
.sq04{top:0;left:40%;}
.sq05{top:0;left:50%;}
.sq06{top:0;left:60%;}
.sq07{top:0;left:70%;}
.sq08{top:0;left:80%;}
.sq09{top:0;left:90%;}
.sq10{top:20%;left:0;}
.sq11{top:20%;left:10%;}
.sq12{top:20%;left:20%;}
.sq13{top:20%;left:30%;}
.sq14{top:20%;left:40%;}
.sq15{top:20%;left:50%;}
.sq16{top:20%;left:60%;}
.sq17{top:20%;left:70%;}
.sq18{top:20%;left:80%;}
.sq19{top:20%;left:90%;}
.sq20{top:40%;left:0;}
.sq21{top:40%;left:10%;}
.sq22{top:40%;left:20%;}
.sq23{top:40%;left:30%;}
.sq24{top:40%;left:40%;}
.sq25{top:40%;left:50%;}
.sq26{top:40%;left:60%;}
.sq27{top:40%;left:70%;}
.sq28{top:40%;left:80%;}
.sq29{top:40%;left:90%;}
.sq30{top:60%;left:0;}
.sq31{top:60%;left:10%;}
.sq32{top:60%;left:20%;}
.sq33{top:60%;left:30%;}
.sq34{top:60%;left:40%;}
.sq35{top:60%;left:50%;}
.sq36{top:60%;left:60%;}
.sq37{top:60%;left:70%;}
.sq38{top:60%;left:80%;}
.sq39{top:60%;left:90%;}
.sq40{top:80%;left:0;}
.sq41{top:80%;left:10%;}
.sq42{top:80%;left:20%;}
.sq43{top:80%;left:30%;}
.sq44{top:80%;left:40%;}
.sq45{top:80%;left:50%;}
.sq46{top:80%;left:60%;}
.sq47{top:80%;left:70%;}
.sq48{top:80%;left:80%;}
.sq49{top:80%;left:90%;}
/*內容共用*/
.movetitle{position:absolute;top:80px;left:0;color:#fff;font-size:70px;line-height:90px;text-align:left;}
.bk .movetitle{color:#292929;}
.movetitle span{display:block;height:25px;font-size:16px;line-height:24px;margin-left:10px;}
.cutcontent{position:relative;padding-top:100px;margin-left:400px;min-height:80px;margin-right:30px;text-align:left;margin-bottom:50px;}
.cutcontent2{position:relative;text-align:left;margin-bottom:50px;margin-top:-10px;}
.cutcontenthead{position:relative;min-height:30px;overflow:hidden;}
.cutcontenthead div.tagitem{cursor: pointer;font-weight: bold;position: relative;font-size: 15px;color: #FFF;line-height: 30px;padding: 5px 0px;width: 110px;text-align: center;float: left;border: 1px solid #ccc;	}
.cutcontenthead2{position:relative;min-height:30px;overflow:hidden;}
.cutcontenthead2 div.tagitem{display:inline-block;margin:10px;min-width:90px;font-size: 15px;	color: #FFF;	line-height: 30px;padding:5px 10px;text-align:center;border-radius:5px;border:1px solid #fff;background:rgba(0,0,0,0.5);}
.bk .cutcontenthead div.tagitem,.bk .cutcontenthead2 div.tagitem{color:#292929;}
.cutcontenthead div.tagleft,.cutcontenthead2 div.tagleft{position:relative;height:31px;padding:5px 0;;float:left;border-bottom:1px solid #ccc;}
.tagitem:hover{background: rgba(180,80,50,0.6);}
.tagitem.on{color:#fff!important;border-bottom:none!important;background: rgba(180,80,50,0.9)!important;}
.cutcontenthead2 .tagitem:hover{background: rgba(180,80,50,0.3);}
.cutcontenthead2 .tagitem.on{border:1px solid #fff!important;}
.tagwrap{display:none;}
.tagwrap:nth-child(1){display:block;}
.tagwrap h1{font-size:22px;color:#fff;line-height:30px;margin-top:10px;}
.tagwrap h1:nth-child(1){margin-top:0px;}
.tagwrap p{font-size:16px;color:#fff;line-height:26px;}
.tagfarm{padding:20px 40px;border:1px solid #ccc;border-top:none;margin-top:-1px;background: rgba(100,80,50,0.7);}
/*.cutcontent2 .tagfarm{ background:rgba(0,0,0,0.6);border:none;margin:0;padding:50px;   -moz-box-shadow: 1px 1px 10px 2px rgba(255,255,255,0.2);	-webkit-box-shadow: 1px 1px 10px 2px rgba(255,255,255,0.2);	box-shadow: 1px 1px 10px 2px rgba(255,255,255,0.2);	}*/
.cutcontent2 .tagfarm{background:none;border:none;margin:0;padding:50px 0; }
.cutcontent2 .tagfarm.type2{margin-left:400px;padding:20px 0;}
.cutfullbgwrap{position:absolute;z-index:0;top:0;left:0;height:100%;width:100%;overflow:hidden;}

/*menu*/
#navwrap{position:relative;padding:0;}
.navitem{float:right;min-width:100px;height:55px;padding-top:10px;color:#fff;font-size:18px;line-height:25px;cursor:pointer;}
.navitem span{display:block;height:25px;font-size:12px;line-height:25px;}
.navitem:hover{border-bottom:5px solid #fff;}
.navitem.on{border-bottom:5px solid #F55;}
.navlogo{float:left;}
/*區塊設定*/
/*banner*/
#cut1{background-image:url('../img/web-3_02.jpg'); }
.arrl{position:absolute;bottom:10%;left:3%;max-width:8%;z-index:99;cursor:pointer;}
.arrr{position:absolute;bottom:10%;right:3%;max-width:8%;z-index:99;cursor:pointer;}
/*about*/
#cut2{background-image:url('../img/aboutbg.jpg'); background-attachment: fixed;}
.bk{color:#292929!important;}
#cut2bgwrap{position:absolute;z-index:0;top:0;left:0;height:100%;width:100%;overflow:hidden;background: rgb(0,0,0);background: linear-gradient(180deg, rgba(25,25,50,1) 0%,rgba(15,15,30,1) 20%,rgba(0,0,0,1) 45%,rgba(0,0,0,1) 65%,rgba(5,5,10,1) 90%, rgba(10,10,20,1) 100%);}
.cut2f0{width:0.3vw;height:200%;position:absolute;top:0;left:0;font-size:3vw;color:#fff;word-wrap:break-word;}
.cut2f1{width:0.3vw;height:200%;position:absolute;top:0;left:0;font-size:1.5vw;color:#fff;word-wrap:break-word;}
.cut2f2{width:0.1vw;height:200%;position:absolute;top:0;left:0;font-size:1vw;color:#fff;word-wrap:break-word;}
.cut2f3{width:0.1vw;height:200%;position:absolute;top:0;left:0;font-size:1vw;color:#fff;word-wrap:break-word;}
.stopcut2{position:absolute!important;right:0!important;top:0!important;border-radius:5px!important;	cursor: pointer;	font-weight: bold;	font-size: 15px;	color: #FFF;	line-height: 24px;	padding: 5px 0px;	width: 120px;	text-align: center;border:1px solid #fff;}
.stopcut2:hover{background: rgba(248,80,50,0.6);}
/*service*/
#cut3{background-image:url('../img/workbg.jpg'); background-attachment: fixed;}
.cut3bgwrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-image:url('../img/workbg.jpg');background-size: cover;background-attachment: fixed;}
.glitch {
  z-index:1;
  transform-origin: 50% 50%;
  animation: glitch 6s 6s infinite;
}
@keyframes glitch {
  1%{
    transform: rotateX(5deg) skewX(20deg);
  }
  1.2%{
    transform: rotateX(0deg) skewX(0deg);
  }
  19.8%{
    transform: rotateX(0deg) skewX(0deg);
  }
  20%{
    transform: rotateX(-5deg) skewX(-10deg);
  }
  20.2%{
    transform: rotateX(0deg) skewX(0deg);
  }
}

@keyframes noise-1 {
  $steps: 30;
  @for $i from 1 through $steps {
    #{percentage($i*(1/$steps))} {
      $top: random(100);
      $bottom: random(101 - $top);
      clip-path: inset(#{$top}px 0 #{$bottom}px 0);
    }
  }
}

@keyframes noise-2 {
  $steps: 30;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      $top: random(100);
      $bottom: random(101 - $top);
      clip-path: inset(#{$top}px 0 #{$bottom}px 0);
    }
  }
}
@keyframes glitch-2 {
  1%{
    transform: rotateX(10deg) skewX(70deg);
  }
  2%{
    transform: rotateX(0deg) skewX(0deg);
  }
}

/* case */
#cut4{background:#000;background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(50,50,50,1) 30%,rgba(255,255,255,1) 100%);/*background-image:url('../img/work2bg.jpg');  */}
#cut4bgwrap{background-image:url('../img/work2bg.jpg');  background-size: cover; -webkit-transition: all 1s; transition: all 1s;}
#cut4bgwrap.blur{filter:blur(7px);opacity:0.8;}
.casebox{position:relative;width:calc(23% - 2px);margin:10px 1%;overflow:hidden;float:left;border:1px solid #777;}
.casebox:hover{border:1px solid #ccc;}
.casebox img{width:100%;}
.casebox .casedes{position:absolute;bottom:0px;;left:0;width:100%;background:url(../img/b70.png);height:48px;display:none;z-index:5;    -moz-box-shadow: 0px 0px 6px #000;-webkit-box-shadow: 0px 0px 6px #000;	box-shadow: 0px 0px 6px #000;	}
.casebox h1{font-size:15px;line-height:24px;color:#fff;width:90%;padding:0 5%;margin-bottom:4px;background:#e54c00;}
.casebox p{font-size:14px;line-height:20px;color:#fff;width:90%;padding:0 5%;}
.casebox p .hovertext{color:#fff;position:relative;display:inline-block;margin-right:5px;font-size:12px;line-height:16px;cursor:pointer;}
.casebox p .hovertext i{margin:0 3px;}
.casebox a{display:block;margin:0!important;padding:0!important;}
.casebox a img{display:block;margin:0!important;padding:0!important;}
.casebox p a.hovertext span{display:none;}
.casebox p a.hovertext:hover span{display:block;position:absolute;top:-16px;left:0px;padding:0 3px;;width:30px;height:16px;font-size:12px;line-height:16px;background:url(../img/w70.png);color:#000;}
#cut5{background-color:#eee;background-image:url('../img/contactbg.jpg');  background-attachment: fixed;}
#cut5bgwrap{background-image:url('../img/contactbg.jpg');  background-size: cover; -webkit-transition: all 1s; transition: all 1s;}
#cut5bgwrap.blur{filter:blur(7px);}
/* qa */
#cut6{background: rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(50,50,50,1) 45%, rgba(50,50,50,1) 100%); }
#cut6bgwrap{background-image:url('../img/qabg.jpg');  background-size: cover; -webkit-transition: all 1s; transition: all 1s;opacity:0.6}
.qabox{padding:15px 10px;border:1px solid #fff;margin:15px 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background:rgba(0,0,0,0.5);  -webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;}
.qaq{font-size:18px;line-height:30px;color:#fff;cursor:pointer;}
.qabox:hover{background:rgba(248,80,50,1);}
.qabox.on{background:rgba(248,80,50,0.9)!important;}
.qaq i{margin-right:10px;}
.qaa{display:none;color:#fff;margin-top:10px;font-size:14px;line-height:20px;}
/* demo box */
#cut7{background-image:url('../img/modbg.jpg');  }
.demowrap{perspective: 800px;width:100%;height:450px;padding:60px 0;margin-top:-80px;text-align:center;overflow:hidden;}
.demobox{position:absolute;transition:left 1s,opacity 1s,transform 1s;top:60px;height:450px;width:900px;left:calc(50% - 450px);border-radius:10px;border:1px solid rgba(255,255,255,0.3);transform-origin: 50% 50%;background:rgba(255,255,255,0.9);}
.demobox.backend{opacity:0;z-index:1;}
.demobox.center{opacity:1;z-index:9;transform:rotateY(0) translate3d(0, 0px, 0)}
.demobox.left{transform: rotateY(-15deg) translate3d(-230px, 0px, -30px);opacity:0.4;z-index:8;/*left:calc(38% - 450px);*/}
.demobox.right{transform: rotateY(15deg) translate3d(230px, 0px, -30px);opacity:0.4;z-index:8;/*left:calc(62% - 450px);*/}
.demobox.farleft{transform: rotateY(-30deg) translate3d(-660px, 0px, -50px);opacity:0.2;z-index:6;/*left:calc(15% - 450px);*/}
.demobox.farright{transform: rotateY(30deg) translate3d(660px, 0px, -50px);opacity:0.2;z-index:6;/*left:calc(85% - 450px);*/}
.demobox.rightbk{opacity:0;z-index:1;transform: rotateY(45deg) translate3d(900px, 0px, -100px);/*left:calc(85% - 450px);*/}
.demobox.leftbk{opacity:0;z-index:1;transform: rotateY(-45deg) translate3d(-900px, 0px, -100px);/*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;}
/*transition: transform 1s;*/
/*
.demobox.center{opacity:1;z-index:9;left:20%;}
.demobox.face1{opacity:0.6;z-index:8;left:15%;   transform: translate3d(0px, 0px, -50px);}
*/

/*
.face1 {
    animation-name: rotateY;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes rotateY{
  0% {
      transform: rotateY(0deg);
  }
  100% {
      transform: rotateY(360deg);
  }
}
*/


/* scroll */
.fullscrollwrap{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.fullscrollitem{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.fullscrollitemimg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.fullscrollitemtext{position:absolute;top:20%;left:0;text-shadow:2px 2px 0.7vw rgba(0,0,0,0.6);opacity:0;font-size:500px;color:#fff;z-index:3;width:100%;text-align:center;-webkit-transition: all 1s;transition: all 1s;}
.fullscrollitemtext.on{position:absolute;top:40%;left:0;text-shadow:2px 2px 0.7vw rgba(0,0,0,0.6);opacity:1;font-size:50px;color:#fff;z-index:3;width:100%;text-align:center;-webkit-transition: all 1s;transition: all 1s;}
.fullscrollitemsubtext{font-size:18px;line-height:20px;color:#fff;font-family:Microsoft JhengHei;}
.spblock{position:absolute;width:10%;height:20%;z-index:1;}
/* FORM  */
.formline{position:relative;min-height:30px;padding-bottom:20px;margin:5px 0;}
.formerr{position:absolute;left:0;bottom:-16px;font-size:13px;color:#f99;line-height:16px;display:none;}
.formtitle{position:relative;font-size:25px; line-height:30px;color:#595959;min-height:30px;font-weight:bold;}
.formitem{position:relative;float:left;font-size:18px; line-height:30px;color:#fff;min-height:30px;}
.bk .formitem{color:#292929;}
.formitem:first-child{text-align:right;width:15%;}
.formitem:nth-child(2){width:78%;margin-left:5%;}
.formitem input[type=text]{font-size:15px;color:#fff;line-height:30px;width:95%;padding:0 2%;background:url(../img/w30.png);border:1px solid #999;}
.bk .formitem input[type=text]{color:#292929;}
.formitem textarea{width:95%;padding:0 2%;height:80px;font-size:15px;color:#fff;line-height:20px;background:url(../img/w30.png);border:1px solid #999;}
.bk .formitem textarea{color:#292929;}
.formitem input[type=submit]{font-size:16px;color:#fff;line-height:40px;width:100px;height:40px;width:200px;text-align:center;background:rgba(248,80,50,1);border:1px solid #999;border-collapse:collapse;cursor:pointer;}
.formitem input[type=submit]:hover{color:rgba(248,80,50,1);background:#fff;}
.bk .formitem input[type=submit]:hover{color:rgba(248,80,50,1);}
/*側面menu*/
#sidenavwrap{position:fixed;top:50%;right:20px;transform:translateY(-50%);z-index:99;width:50px;text-align:center;}
#sidenavwrap a{display:block;margin:10px 0;font-size:14px;line-height:20px;color:#fff;padding:0 5px;transition: all 0.5s}
#sidenavwrap a:hover{border-right:3px solid #999;}
#sidenavwrap a.on{border-right:3px solid #F55!important;font-size:18px;line-height:22px;font-weight:bold;}
#sidenavwrap.dk a{color:#000;}
#sidenavwrap.dk i{color:#000;}
#sidenavwrap i{font-size:6px;line-height:10px;color:#fff;}


@media screen and (max-width: 1400px) {
	.tagwrap h1{font-size:20px;color:#fff;line-height:28px;margin-top:10px;}
	.tagwrap p{font-size:14px;color:#fff;line-height:22px;}
  .casebox h1{font-size:15px;line-height:24px;color:#fff;width:90%;padding:0 5%;margin-bottom:4px;background:#e54c00;}
  .casebox p{font-size:14px;line-height:20px;color:#fff;width:90%;padding:0 5%;}
}
/* 1200 以下改手機板  */
@media screen and (max-width: 1200px) {
  .hide400{display:none!important;}
  /*menu*/
  #header{position:fixed;top:0;left:0;width:100%;height:12vw;background:rgba(0,0,0,0.7);}
  #navwrap{padding-top:1vw;height:11vw;}
  .navitem{float:right;min-width:13vw;height:10vw;padding-top:0;color:#fff;font-size:3.2vw;line-height:5vw;cursor:pointer;}
  .navitem span{display:block;height:3.5vw;font-size:2.2vw;line-height:5vw;}
  .navitem:hover{border-bottom:1vw solid #fff;}
  .navitem.on{border-bottom:1vw solid #F55;}
  .navlogo{width:auto;height:7vw;padding-top:1vw; }
  #footerin{padding:1vw 4vw;font-size:3vw;color:#fff;line-height:5vw;}
  #footerin span{display:inline-block;margin:0 2vw;}



	.centerwarp{width:94%;}
	.cutcontent{position:relative;padding-top:220px;margin:0px 30px;text-align:left;margin-bottom:50px;}

	.fullscrollitemtext{font-size:20vw;}
  /*共用項目*/
	.movetitle{top:15vw;font-size:8vw;line-height:10vw;text-align:left;margin-left:0px;}
  .movetitle span{height:5vw;font-size:3vw;line-height:5vw;margin-left:2vw;}
  .cutcontent{position:relative;padding-top:35vw;margin-left:0;min-height:auto;margin-right:0;text-align:left;margin-bottom:10vw;}
  .cutcontent2{position:relative;text-align:left;margin-bottom:10vw;margin-top:-5vw;}
  .cutcontenthead{position:relative;min-height:5vw;overflow:hidden;}
  .cutcontenthead div.tagitem{cursor: pointer;font-weight: bold;position: relative;font-size: 3.2vw;color: #FFF;line-height: 5vw;padding: 1vw 0px;width:16vw;min-width:16vw;text-align: center;float: left;border: 1px solid #ccc;	}
  .cutcontenthead2{position:relative;min-height:5vw;overflow:hidden;}
  .cutcontenthead2 div.tagitem{display:inline-block;margin:0 1vw;min-width:15vw;font-size: 3.2vw;	color: #FFF;	line-height: 5vw;padding:1vw 2vw;text-align:center;border-radius:1vw;border:1px solid #fff;background:rgba(0,0,0,0.5);}
  .bk .cutcontenthead div.tagitem,.bk .cutcontenthead2 div.tagitem{color:#292929;}
  .cutcontenthead div.tagleft,.cutcontenthead2 div.tagleft{position:relative;margin-top:1px;height:5vw;padding:1vw 0;float:left;border-bottom:1px solid #ccc;}
  .tagitem:hover{background: rgba(180,80,50,0.6);}
  .tagitem.on{color:#fff!important;border-bottom:none!important;background: rgba(180,80,50,0.9)!important;}
  .cutcontenthead2 .tagitem:hover{background: rgba(180,80,50,0.3);}
  .cutcontenthead2 .tagitem.on{border:1px solid #fff!important;}
  .tagwrap{display:none;position:relative;}
  .tagwrap:nth-child(1){display:block;}
  .tagwrap h1{font-size:5vw;color:#fff;line-height:8vw;margin-top:2vw;}
  .tagwrap h1:nth-child(1){margin-top:0px;}
  .tagwrap p{font-size:3.2vw;color:#fff;line-height:5vw;}
  .tagfarm{padding:3vw 5vw;}
  .cutcontent2 .tagfarm{padding:0; 	}
 .cutcontent2 .tagfarm.type2{margin-left:0; 	}


	.cut2f0{width:0.3vw;height:200%;position:absolute;top:0;left:0;font-size:7vw;color:#fff;word-wrap:break-word;}
	.cut2f1{width:0.3vw;height:200%;position:absolute;top:0;left:0;font-size:4vw;color:#fff;word-wrap:break-word;}
	.cut2f2{width:0.1vw;height:200%;position:absolute;top:0;left:0;font-size:2vw;color:#fff;word-wrap:break-word;opacity:0.3!important;}
	.cut2f3{width:0.1vw;height:200%;position:absolute;top:0;left:0;font-size:2vw;color:#fff;word-wrap:break-word;opacity:0.1!important;}
	.show400{display:block;}
	.hide400{display:none;}
	#cut1{background-image:url('../img/web-3_02.jpg'); }
	#cut2{background-image:url('../img/aboutbgm.jpg'); background-attachment: fixed;}
	.stopcut2{display:none;}
	#cut3{background-image:url('../img/workbgm.jpg'); background-attachment: fixed;}
	#cut4{background-image:url('../img/work2bgm.jpg');   }
  /* case */
  #cut4{background-image:url('../img/work2bg.jpg');  }
  .casebox{position:relative;width:calc(46% - 2px);margin:10px 2%;overflow:hidden;float:left;border:1px solid #777;}
  .casebox .casedes{background:url(../img/b70.png);height:50px;bottom:-50px;}
  .casebox h1{font-size:14px;line-height:25px;margin-bottom:1vw;}
  .casebox p{font-size:10px;line-height:20px;}
  .casebox p .hovertext{color:#fff;position:relative;display:inline-block;margin-right:5px;font-size:12px;line-height:16px;cursor:pointer;}
  .casebox p .hovertext i{margin:0 3px;}
  .casebox a{display:block;margin:0!important;padding:0!important;}
  .casebox a img{display:block;margin:0!important;padding:0!important;}
  .casebox p a.hovertext span{display:none;}
  .casebox p a.hovertext:hover span{display:block;position:absolute;top:-16px;left:0px;padding:0 3px;;width:30px;height:16px;font-size:12px;line-height:16px;background:url(../img/w70.png);color:#000;}
  #cut5{background-image:url('../img/contactbg.jpg');  background-attachment: fixed;}

	#cut5{background-image:url('../img/contactbgm.jpg');  background-attachment:fixed;}
	#cut6{background-image:url('../img/qabgm.jpg'); }
	.formitem:first-child{text-align:right;width:25%;}
	.formitem:nth-child(2){width:68%;margin-left:5%;}

	#qe{left:-5%;bottom:-10%;}
  .qabox{padding:2vw;margin:3vw 0;-webkit-border-radius: 1vw;-moz-border-radius: 1vw;border-radius: 1vw;}
  .qaq{font-size:4vw;line-height:6vw;}
  .qaq i{margin-right:2vw;}
  .qaa{margin-top:2vw;font-size:3vw;line-height:5vw;}

  .demowrap{perspective: 200vw;width:100%;height:100vw;padding:10vw 0;margin-top:-20vw;text-align:center;overflow:hidden;}
  .demobox{position:absolute;transition:left 1s,opacity 1s,transform 1s;top:10vw;height:100vw;width:70vw;left:calc(50% - 35vw);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(-15deg) translate3d(-11vw, 0px, -5vw);opacity:0.4;z-index:8;/*left:calc(38% - 450px);*/}
  .demobox.right{transform: rotateY(15deg) translate3d(11vw, 0px, -5vw);opacity:0.4;z-index:8;/*left:calc(62% - 450px);*/}
  .demobox.farleft{transform: rotateY(-30deg) translate3d(-27vw, 0px, -8vw);opacity:0.2;z-index:6;/*left:calc(15% - 450px);*/}
  .demobox.farright{transform: rotateY(30deg) translate3d(27vw, 0px, -8vw);opacity:0.2;z-index:6;/*left:calc(85% - 450px);*/}
  .demobox.rightbk{opacity:0;z-index:1;transform: rotateY(45deg) translate3d(40vw, 0px, -11vw);/*left:calc(85% - 450px);*/}
  .demobox.leftbk{opacity:0;z-index:1;transform: rotateY(-45deg) translate3d(-40vw, 0px, -11vw);/*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*/
}