@charset "utf-8";

/*基礎框架 */
.cutwrap{position:relative; margin:0 auto;}

/*css class */
.btn{cursor: pointer;}



.hcenter{position:absolute;top:50%;transform: translateY(-50%);}
.z001{z-index: 1;}
.z002{z-index: 2;}
.z003{z-index: 3;}
.z004{z-index: 4;}

/* css 動態 */
.mover{transition: all 1s;margin-top:100px;opacity:0;}
.moverleft{margin-top:0;margin-left:100px;opacity:0;}
.moverright{margin-top:0;margin-left:-100px;opacity:0;}
.mover.on{margin-top:0px;opacity:1;}
.moverleft.on{margin-left:0px;}
.moverright.on{margin-left:0px;}

/* FONT */
.fbold{font-weight:bold;}
/* color */
.fcolorfff{color:#fff;}
.fcolor000{color:#000;}
.fcolor60{color:#606060;}
/*SIZE */
.fsize48{font-size:3vw;line-height:1.5;}
.fsize44{font-size:2.75vw;line-height:1.5;}
.fsize40{font-size:2.5vw;line-height:1.5;}
.fsize36{font-size:2.25vwx;line-height:1.5;}
.fsize32{font-size:2vw;line-height:1.5;}
.fsize30{font-size:1.875vw;line-height:1.5;}
.fsize28{font-size:1.75vw;line-height:1.5;}
.fsize26{font-size:1.625vw;line-height:1.5;}
.fsize24{font-size:1.5vw;line-height:1.5;}
.fsize22{font-size:1.375vw;line-height:1.5;}
.fsize20{font-size:1.25vw;line-height:1.5;}
.fsize18{font-size:1.125vw;line-height:1.5;-webkit-text-size-adjust: none;}
.fsize16{font-size:1vw;line-height:1.5;-webkit-text-size-adjust: none;}
.fsize14{font-size:0.875vw;line-height:1.5;-webkit-text-size-adjust: none;}
.fsize12{font-size:0.75vw;line-height:1.5;-webkit-text-size-adjust: none;}
.fsize14s{font-size:16px;line-height:1.5;-webkit-text-size-adjust: none;}
.fsize12s{font-size:14px;line-height:1.5;-webkit-text-size-adjust: none;}
.fonts{line-height:1!important;}/*設定相等於字高*/
.fonts2{line-height:1.2!important;}/*設定相等於1.2倍 字高*/
.fontl{line-height:1.8!important;}/*設定相等於字高*/
/* bgcolor */
.bgcolorfff{background:#fff;}
.bgcolor000{background:#000;}

.op10{opacity:0.1;}
.op15{opacity:0.15;}
.op20{opacity:0.2;}
.op25{opacity:0.25;}
.op30{opacity:0.30;}
.op35{opacity:0.35;}
.op40{opacity:0.40;}
.op45{opacity:0.45;}
.op50{opacity:0.5;}
.op55{opacity:0.55;}
.op60{opacity:0.6;}
.op65{opacity:0.65;}
.op70{opacity:0.7;}
.op75{opacity:0.75;}
.op80{opacity:0.8;}
.op85{opacity:0.85;}
.op90{opacity:0.9;}
.op95{opacity:0.95;}

/* width */

.w100{width:100%;}
.mx100{max-width:100%;}
/* height */
.h100{height:100%;}

/*切換 */
.show400{display:none!important;}
.hide400{}

/* preoload */
#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;}

/* cut 1 */
.cut1{height:100vh;min-height:35vw;background:url("../img/cut1bg.jpg");Background-size:cover;background-attachment: fixed;background-position: center;}
.cut1 .img11{position:fixed;top:0;left:0;width:100%; z-index:2;margin-top:-20%;opacity:0;transition:all 1s;}
.cut1 .img11.on{margin-top:0;opacity:1;}
.cut1 .cut1btn{position:fixed;top:28vw;left:10vw;margin-left:-10vw;opacity:0;border:1px solid #fff;width:8vw;z-index:3; transition:all 1s;}
.cut1 .cut1btn.on{margin-left:0;opacity:1;}
.fixbg{position:fixed!important;z-index:1!important;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;min-width:100%;min-height:100%;}
/* cut2*/
.cut2{}
.cut2in{position:relative; margin:0 auto;padding: 7.5vw 0;} 
.cut2in1{position:relative; margin:0 auto;width:33%;} 
.cut2in1 p,.cut2in2 p{padding: 3vw 0;} 
.cut2in2{position:relative; margin:0 auto;width:33%;} 
.cut2imgbox{position:relative;overflow:hidden;}
.cut2imgbox img{width:33.334%;float:left;}
.cut2imgbox img:nth-child(3){margin-right:-5%;}
/* cut3 */
.cut3in{position:relative; margin:0 auto;padding: 4vw 0;} 
.cut3left{width:50%;float:left;}
.cut3right{width:50%;float:left;}
.cut3leftin{width:50%;margin:0 auto;}
.cut3leftin .title{width:70%;}
.cut3in p{padding: 3vw 0 0 0;} 
.cut3right img{width:50%;float:left;}
/* cut4 */
.cut4in{position:relative; margin:0 auto;width:75%;padding: 4vw 0;} 
.c4title{width:42%;}
.c4box{position:relative;padding:1.5vw 0;}
.c4item{width:28.3%;margin-right:7.5%;float:left;}
.c4item:nth-child(3){margin-right:0;}
.cut4in p{padding: 1vw 0 0 0;} 
.c4item .stimg{padding:1vw 0 2vw 0;}
.cut4in a{font-weight:bold;color:#cccccc;}
.cut4in a:link,.cut4in a:visited{color:#dd5f22;}
/* cut5 */
.cut5in{position:relative; margin:0 auto;width:75%;padding: 4vw 0;} 
.c5title{width:42%;}
.c5box{position:relative;padding: 2vw 0;} 
.c5box a{display:inline-block;padding:1.5vw 0;width:85%;}
.c5box a img{float:left;margin-right:0.3vw;width:1vw;margin:0.1vw 0.3vw 0.1vw 0;}
.c5box a span{display:inline-block;width:calc(100% - 1.7vw);}
.c5scan{position:absolute;bottom:3vw;right:0;width:20vw;}
.c5scan img{position:absolute;width:100%;right:0;bottom:3vw;}
/* footer */
footer{position:relative;padding:4vw 0;}
/* 平板 */
@media screen and (max-width: 1070px) {
	.fsize14s{font-size:12px;line-height:1.5;-webkit-text-size-adjust: none;}
	.fsize12s{font-size:10px;line-height:1.5;-webkit-text-size-adjust: none;}
}
/* 手機板  */
@media screen and (max-width: 600px) {

	.show400{display:block!important;}
	.hide400{display:none!important;}
	/* css 動態 */
	.mover{margin-top:calc(100vw / 6);}
	.moverright{margin-top:0;margin-left:-calc(100vw / 6);}
	.moverleft{margin-top:0;margin-left:calc(100vw / 6);}
	
	
	/*SIZE */
	.fsize48{font-size:calc(48vw / 6);}
	.fsize44{font-size:calc(44vw / 6);}
	.fsize40{font-size:calc(40vw / 6);}
	.fsize36{font-size:calc(36vw / 6);}
	.fsize32{font-size:calc(32vw / 6);}
	.fsize30{font-size:calc(30vw / 6);}
	.fsize28{font-size:calc(28vw / 6);}
	.fsize26{font-size:calc(26vw / 5.5);}
	.fsize24{font-size:calc(24vw / 5.5);}
	.fsize22{font-size:calc(22vw / 5);}
	.fsize20{font-size:calc(20vw / 5);}
	.fsize18{font-size:calc(18vw / 4.5);}
	.fsize16{font-size:calc(16vw / 4.5);}
	.fsize14{font-size:calc(14vw / 4.5);}
	.fsize12{font-size:calc(12vw / 4.5);}	
	.fsize14s{font-size:calc(14vw / 4.5);}
	.fsize12s{font-size:calc(12vw / 4.5);}	
	/* preoload */
	#preloadbox img{width:20vw;}
	/* cut 1 */
	.cut1{height:auto;min-height:auto;background:none;overflow:hidden;}
	.cut1 .img11{position:absolute;top:0;left:0;width:100%; z-index:2;margin-top:-20%;opacity:0;transition:all 1s;}
	.cut1 .img11.on{margin-top:0;opacity:1;}
	.cut1 .cut1btn{position:absolute;top:auto;bottom:5vw;left:10vw;margin-left:-10vw;opacity:0;border:1px solid #fff;width:20vw;z-index:2; transition:all 1s;}
	.cut1 .cut1btn.on{margin-left:0;opacity:1;}
	/* cut2*/
	.cut2{}
	.cut2in{padding: 10vw 0;} 
	.cut2in1{width:70%;padding-bottom:8vw;} 
	.cut2in1 p,.cut2in2 p{padding: 5vw 0;} 
	.cut2in1 p.fsp0{padding-top:0;}
	.cut2in2{width:86%;} 
	.cut2imgbox{position:relative;overflow:hidden;}
	.cut2imgbox img{width:100%;float:none;}
	.cut2imgbox img:nth-child(3){margin-right:0;}
	/* cut3 */
	.cut3in{padding:5vw  0;} 
	.cut3left{width:100%;float:none;margin:0 auto;padding:0 0 8vw 0;}
	.cut3right{width:100%;float:none;}
	.cut3leftin{width:70%;margin:0 auto;}
	.cut3in p{padding: 3vw 0 0 0;} 
	.cut3right img{width:100%;float:none;}	
	/* cut4 */
	.cut4in{padding: 10vw 0;} 
	.c4title{width:100%;}
	.c4box{position:relative;padding:0;}
	.c4item{width:100%;margin-right:0;float:none;padding:5vw 0;}
	.c4item:nth-child(3){margin-right:0;}
	.cut4in p{padding: 3vw 0 0 0;} 
	.c4item .stimg{padding:3vw 0 5vw 0;}	
	.c4item .stnimg{width:75%!important;}
	/* cut5 */
	.cut5in{width:70%;padding: 8vw 0;} 
	.c5title{width:100%;}
	.c5box{position:relative;padding: 5vw 0;} 
	.c5box a{display:inline-block;padding:5vw 0;width:100%;}
	.c5box a img{float:left;width:4vw;margin:0.2vw 1vw 0.2vw 0;}
	.c5box a span{width:calc(100% - 6vw);}
	.c5scan{position:relative;width:65%;margin:-15vw 0 5vw auto;bottom:auto;right:auto;padding:0;text-align:center;}
	.c5scan img{position:relative;width:100%;margin:0 auto;right:auto;bottom:auto;}
	/* footer */
	footer{position:relative;padding:10vw 0;}
}


@keyframes danceme {
  5%{
    margin-bottom:-20px;
  }
  15%{
    margin-bottom:0px;
  }
  20%{
    margin-bottom:-8px;
  }
  25%{
    margin-bottom:0px;
  }
  30%{
    margin-bottom:-5px;
  }
  35%{
    margin-bottom:0px;
  }
}