body ,.row,a{
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Noto Sans TC', sans-serif;
}
img{width:100%;}
.wrapper{
	/*max-width:1200px;*/
	height:auto;
	margin: 0 auto;
	overflow:hidden;	
}
.container{
	max-width:1400px !important;
}

.position{position:relative;}
header {
  width: 100%;
  height: 68px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: space-between;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.9); }

header h1 {
  width: 120px;
  padding: 15px 0 0 30px;
  display: block; }

header h1 img {
  width: 120px;
  height: auto;
  display: block; }

header .header_right {
  width: 778px; }

header .header_right .gnav {
  /*width: 710px;*/
  float: left; }

header .header_right .gnav ul li {
  position: relative;
  display: inline-block;
  padding-left: 40px;
  padding-right: 40px;
  line-height: 70px; }

header .header_right .gnav ul li:first-child {
  padding-left: 0; }

header .header_right .gnav ul li:not(:last-child):after {
  content: '|';
  display: block;
  position: absolute;
  right: -4px;
  top: 0; }

header .header_right .gnav a {
  font-size: 17px;
  color: #9B2E8E; }

header .header_right .gnav a:hover {
  opacity: 0.75; }

header .header_right .headbtn {
  width: 210px;
  height: 68px;
  float: right;
  margin: 0;
  background: #FFE900;
  line-height: 70px; }

header .header_right .headbtn a {
  width: 100%;
  height: 100%;
  /*padding: 40px 0;*/
  line-height: 68px;
  position: relative;
  z-index: 5;
  display: block;
  color: #FFF;
  text-align: center;
  font-size: 17px;
  font-weight: 700; }

header .header_right .headbtn a span {
  position: relative;
  z-index: 5; }

header .header_right .headbtn a::before {
  width: 0px;
  height: 68px;
  content: '';
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFE900;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease; }

header .header_right .headbtn a:hover {
  color: #9C308D; }

header .header_right .headbtn a:hover::before {
  width: 100%; }

/* =footer
-------------------------------------------------------------- */
footer {
  background: #9c308d; }

.footer_contents {
  width: 1200px;
  margin: 0 auto;
  padding: 41px 0 26px;
  text-align: center; }

.footer_contents .copyright {
  padding: 40px 0; }

.footer_contents .copyright img {
  display: block;
  width: auto;
  height: 12px;
  margin: 0 auto; }

.footer_contents .sns-list {
  width: 1200px;
  height: 30px;
  margin: 0 auto 45px;
  text-align: center; }

.footer_contents .sns-list li {
  display: inline-block;
  padding-right: 15px;
  padding-left: 15px; }

.footer_contents .sns-list li a {
  color: #fff; }

.footer_contents .sns-list li a:hover {
  opacity: 0.5; }

.footer_contents .sns-list li img {
  width: 30px;
  height: 30px; }

.footer_contents small {
  font-family: Verdana, “Droid Sans”, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-indent: .06em;
  color: #fff; }
  
#section .title .btns {
    position: absolute;
    right: 0;
    top: 0;
  }

  #section .title .btns a {
    width: 3.875em;
    height: 3.875em;
    margin: 0 0.375em;
  }  
  
 .header_right {
  top: 0;
  right: 0;
  position: absolute;
}

.headbtn a {
  background-color: #a12b8c;
  color: #FFF;
}

.headbtn a:hover {
  text-decoration: none;
}

header {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid #a12b8c;
}




/*main css*/
.mainAnimate{
	width:100%;
	height:1080px;
	overflow:hidden;
}

.sec1Title{
	width:12%;
	display:block;
	margin:5% auto 0;
}
.sec1Title2{
	width:27%;
	display:block;
	margin:5% auto 0;
}
.sec1Title3{
	width:32%;
	display:block;
	margin:3% auto 0;
}
.sec1Title4{
	width:19%;
	display:block;
	margin:3% auto 0;
}
.subsec1Title{
	width:35%;
	display:block;
	margin:2% auto;
}
.subsec3Title{
	width:40%;
	display:block;
	margin:2% auto;
}
.subsec4Title{
	width:50%;
	display:block;
	margin:2% auto;
}
.maincontent{
	width:85%;
	display:block;
	margin:3% auto;
	position:relative;
}
.maincontent2{
	width:80%;
	display:block;
	margin:3% auto;
	position:relative;
}
.gotobtn{
	width:6%;
	display:block;
	margin:-8% 0 0 92%;
	position:absolute;
	z-index:5;
	
}

.downloadarea{
	background:url(../images/purplebg.png) left top;
	width:100%;
	height:250px;
	background-size:cover;
	display:block;
}


.iosbtn,.googlebtn{
	width:60%;
	display:block;
	margin:5% auto;
}


 a:hover .iosbtn,a:hover .googlebtn,.gotobtn a:hover img,.flipbtn a:hover img,.flipbackbtn a:hover img{
	animation:btnhover 1s linear;
	
}

@keyframes btnhover{
	0%{
		transform:translate(0px,0px);
		
	}
	50%{
		transform:translate(0px,-15px);
	}
	100%{
		transform:translate(0px,0px);
		
	}

}
.flipbox1,.flipbox2{
	width:85%;
	
	position:relative;
}
.flipbox1{
	display:block;
	margin:3% auto ;
	
}
.flipbox2{
	display:none;
	margin:3% auto;
	
}
.scooter{
	width:95px;
	height:114px;
	display:block;
	position:absolute;
	z-index:90;
	background:url(../images/scooter.png) no-repeat;
	background-size:100% auto;
	animation:flashlight 2.5s  linear infinite;
}
.scooterDark{
	width:95px;
	height:114px;
	display:block;
	position:absolute;
	z-index:90;
	background:url(../images/scooterDark.png) no-repeat;
	background-size:100% auto;
}
.scooter1{
	margin: -2% 0 0 65%;
}
.scooter2{
	margin: 13% 0 0 -2%;
}
.scooter3{
	margin: 30% 0 0 95%;
}
.scooter4{
	margin: 30% 0 0 -2%;
}
.scooter5{
	margin: 65% 0 0 25%;
}

.scooter11{
	    margin: 13% 0 0 95%;
}
.scooter12{
	margin: -2% 0 0 25%;
}
.scooter13{
	margin: 65% 0 0 65%;
}
.scooter14{
	margin: 54% 0 0 -2%;
}
.scooter15{
	margin: 53% 0 0 95%;
}




.scooter6{
	 margin: -2% 0 0 65%;
}
.scooter7{
	margin: 13% 0 0 -2%;
}
.scooter8{
	margin: 30% 0 0 95%;
}
.scooter9{
	margin: 30% 0 0 -2%;
}

.scooter10{
	margin: 58% 0 0 25%;
}
.scooter16{
	 margin: 13% 0 0 95%;
}
.scooter17{
	margin: -2% 0 0 25%;
}
.scooter18{
	margin: 58% 0 0 65%;
}
.scooter19{
	margin: 54% 0 0 -2%;
}

.scooter20{
	margin: 53% 0 0 95%;
}

@keyframes flashlight{
	0%{
		background:url(../images/scooter.png) no-repeat;
		background-size:100% auto;
		
	}
	50%{
		background:url(../images/scooter2.png) no-repeat;
		background-size:100% auto;
	}
	100%{
		background:url(../images/scooter.png) no-repeat;
		background-size:100% auto;
		
	}

}


.gtabtn{
	width:25%;
	display:block;
	margin: -12% 0 0 38%;
	position:absolute;
	z-index:5;
}
.flipbtn,.flipbackbtn{
	width:6%;
	display:block;
	margin: 65% 0 0 90%;
	position:absolute;
	
}
.btntext{
	width: 15%;
    display: block;
    margin: -8% 0 0 74.5%;
    position: absolute;
    z-index: 86;
	
}
.flipbtn3{
	width:6%;
	display:block;
	margin: -10% 0 0 90%;
	position:absolute;
	
}
.flipbtn{
	z-index:86;
}
.flipbackbtn{
	z-index:85;
}
.flipcontent1,.flipcontent2{
	position:absolute;
	z-index:80;
}
.flipcontent3{
	position:relative;
	margin: 80% 0 0 0;
}
.flipcontent1{
	opacity:1;
	transform: rotateY(0deg);
	display:block;
	transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
	transition-duration: .9s;
	transition-property: transform, opacity;
}
.flipcontent2{
	opacity: 0;
	transform: rotateY(0deg);
	display:block;
	transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
	transition-duration: .9s;
	transition-property: transform, opacity;
}


.backflip {
	opacity: 1;
	transform: rotateY(0deg);
}

.frontflip{
	transform: rotateY(180deg);
	opacity: 0;

}


.linebg{
	background:url(../images/purplebg2.png) left top;
	width:100%;
	height:80px;
	background-size:cover;
	display:block;
}
.linebg2{
	background:url(../images/purplebg2.png) left top;
	width:100%;
	height:25px;
	background-size:cover;
	display:block;
	margin-top:-11px;
}
.marginT{margin-top:50%;}
#sec3{
	background:#bbe2f1;
}
.wheelpoint{
	position:absolute;
	width: 3.5%;
    margin: 7.2% 0 0px 47.5%;
	display:block;
	z-index:10;
}
.wheelbtn{
	position:absolute;
	width:8%;
	margin: 27.2% 0 0 45.5%;
	display:block;
	z-index:10;
	cursor:pointer;
}
.wheel{
	position:absolute;
	width:45%;
	margin:8% 0 0 27%;
	display:block;
	z-index:5;
	cursor:pointer;
}
.rotatewheel{
	animation:rotatewheel 2s ease-in-out forwards;
}
@keyframes rotatewheel{
	0%{
		transform:rotate(0deg);
	}
	
	100%{
		transform:rotate(1170deg);
		
	}
}
.map{
	width:100%;
	height:868px;
	overflow:hidden;
	margin: 2% auto 0;
}



#section07 {
  position: relative;
}

#section07 .btns {
  width: 38%;
  position: relative;
  margin: 0 auto 20%;
}

.icon-flight{width:55%;margin:0 auto;}

.section a {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -ms-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}



/*輪播CSS*/

#owl-demo .item1,#owl-demo .item2{
  padding:0;
  margin:0;
  width:100%;
  z-index:105;
}
.customNavigation{
  text-align: center;
}

.customNavigation a{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.owl-dots{display:none;}


#owl-demo .item1,#owl-demo .item2 {
    /*cursor: move; */
    cursor: pointer;
   /* cursor: -moz-grab;
    cursor: -webkit-grab;*/
	
}

  (Optional) Apply a "closed-hand" cursor during drag operation. 
#owl-demo .item:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}










































 


@media  (max-width:1680px){
	.mainAnimate{
		width:100%;
		height:860px;
	}
	#animation_container,#canvas,#dom_overlay_container{
		width:100% !important;
		height:860px  !important;
	}
	.marginT{margin-top:63%;}
}



@media (min-width:1201px) and (max-width:1400px){
	


	}




@media (min-width:1025px) and (max-width:1200px){
	
	
}
@media (max-width:1024px){

}
@media (max-width:992px){
	
}

@media (max-width:768px){

}

@media (max-width:640px){


	
}
@media (max-width:480px){

	
}

@media (max-width:414px){

	
}
@media (max-width:375px){

	
}