@charset "utf-8";
@import url(../css/reset.css);
@import url(../css/style.css);
@import url(../css/jquery.fullpage.css);
@import url(../css/animate.css);

/* Reset CSS
 * --------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td  {margin:0; padding:0;}

html, body {
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif;
  background: url('../images/bg.jpg') center center no-repeat;
  background-size: cover;
}

table {border-spacing: 0;}

fieldset,img {border: 0;}

address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal; font-style: normal;}

strong{font-weight: bold;}

ol,ul {list-style: none; margin:0; padding:0;}

ul, li {display:block; list-style-type:none;}

caption,th {text-align: left;}

q:before,q:after {content:'';}

abbr,acronym { border: 0;}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
}

h1 {font-size: 5em; font-weight: 900; font-style: normal;}
h2 {font-size: 3em; font-weight:bold;}
h3 {font-size: 2em; font-weight:normal;}
h4 {font-size: 1.2em; font-weight:normal;}
h5 {font-size: 0.875em; font-weight:normal;}

/* Reset CSS
 * --------------------------------------- */

/*border: 1px solid #616161;*/

/*----main visual----*/
/*--------btns--------*/
#btns {margin: 0 auto; width: 100%; height: 115px; position: absolute; top:1%;z-index: 998;}
#btns ul {width: 875px; height: 115px; margin: 0 auto;}
#btns ul li {display: inline-block; float: right; width: 73px; height: 73px; margin: 30px 10px 10px 10px;}
#btns ul li {background-size: 100% auto;}
#btns ul li.btn_fb {background: url('../images/btn_fb.png') center top no-repeat;}
#btns ul li.btn_fb:hover {background: url('../images/btn_fb.png') center bottom no-repeat;}
#btns ul li.btn_baha {background: url('../images/btn_baha.png') center top no-repeat;}
#btns ul li.btn_baha:hover {background: url('../images/btn_baha.png') center bottom no-repeat;}
#btns ul li.btn_apk {background: url('../images/btn_apk.png') center top no-repeat;}
#btns ul li.btn_apk:hover {background: url('../images/btn_apk.png') center bottom no-repeat;}
#btns ul li.btn_gp {background: url('../images/btn_gp.png') center top no-repeat;}
#btns ul li.btn_gp:hover {background: url('../images/btn_gp.png') center bottom no-repeat;}
#btns ul li.btn_ios {background: url('../images/btn_ios.png') center top no-repeat;}
#btns ul li.btn_ios:hover {background: url('../images/btn_ios.png') center bottom no-repeat;}
#btns ul li.btn_pc {background: url('../images/btn_pc.png') center top no-repeat;}
#btns ul li.btn_pc:hover {background: url('../images/btn_pc.png') center bottom no-repeat;}
/*--------btns--------*/

/*--------logo--------*/
div.logo {width: 100%; height:150px; position: absolute; top:14%; z-index: 100;}
div.logo img {width: auto; height:150px;}
div.logo ul {margin: 0 auto; width: 900px; height:155px;padding-right: 100px;}
div.logo li {float: right; display: inline-block; }
/*--------logo--------*/

/*--------go down--------*/
div.godown {width: 100%; height:138px; position: absolute; bottom:17%; z-index: 110;}
div.godown div {margin: 0 auto; width: 1000px; height:138px; text-align: left;}
div.godown img {width: 195px; height:131px;}
div.godown img:hover {width: 206px; height:138px;}
/*--------go down--------*/

/*--------parallax--------*/
.container {
  margin: 0 auto;
  width: 100%; height: 900px;
  position: relative; top:-100px;
	z-index: 10;
}

.scene {margin: 0 auto; padding: 0;}

.scene div{margin: 0 auto;}

.scene div.bg1 {
  width: 1200px; height: 700px; z-index: 10;
  background: url('../images/bg_city.png') center 160px no-repeat;
  background-size: 100% auto;
}

.scene div.bg2 {
  clear:both; margin: 0 auto;
  width: 100%;height: 1000px; z-index: 20;
  background: url('../images/role_01.png') center top no-repeat;
}

.scene div.bg3 {
  width: 100%; height: 1000px; z-index: 30;
  background: url('../images/bg_road.png') center 50px no-repeat;
  background-size: cover;
}

.scene div.bg4 {
  width: 100%; height: 850px; z-index: 60;
  background: url('../images/slogan.png') center bottom no-repeat;
  background-size: 939px 278px;
  }

.scene div.bg5 {
  width: 100%; height: 400px; z-index: 40; margin-top: 250px;
  background: url('') center center no-repeat;
  background-size: cover;
}

div.cute_role {margin: 0 auto; width: 1000px;height: 400px;}
div.cute_role01 {position: relative; top:150px; left:480px; z-index: 44;}
div.cute_role02 {position: relative; top:-200px; left:650px; z-index: 43;}
div.cute_role01talk {position: relative; top:-400px; left:280px; z-index: 44;}
div.cute_role02talk {position: relative; top:-600px; left:780px; z-index: 43;}
div.cute_role01talk {
  -webkit-animation: round 5s linear infinite;
          animation: round 5s linear infinite;
  }
  @-webkit-keyframes round {
  16% {opacity: 1; filter: alpha(opacity=100);}
  30% {opacity: 1; filter: alpha(opacity=100);}
  10% {opacity: 0; filter: alpha(opacity=0);}
  }
  @keyframes round {
  16% {opacity: 1; filter: alpha(opacity=100);/*淡入*/}
	30% {opacity: 1; filter: alpha(opacity=100);/* 靜止*/}
	10% {opacity: 0; filter: alpha(opacity=0);/*淡出*/}
  }
div.cute_role02talk {
  -webkit-animation: round2 5s linear infinite;
          animation: round2 5s linear infinite;
  }
  @-webkit-keyframes round2 {
  16% {opacity: 0; filter: alpha(opacity=0);}
  20% {opacity: 1; filter: alpha(opacity=100);}
  24% {opacity: 1; filter: alpha(opacity=100);}
  }
  @keyframes round2 {
  16% {opacity: 0; filter: alpha(opacity=0);/*淡入*/}
  20% {opacity: 1; filter: alpha(opacity=100);/* 靜止*/}
  24% {opacity: 1; filter: alpha(opacity=100);/*淡出*/}
  }


.layer:nth-child(1) {opacity: 0.8;}
.layer:nth-child(2) {opacity: 1;}
.layer:nth-child(3) {opacity: 1;}
.layer:nth-child(4) {opacity: 1;}
.layer:nth-child(5) {opacity: 1;}
.layer:nth-child(5) button {-webkit-transform: rotate(30deg);}
/*--------parallax--------*/
/*----main visual----*/



/*----nav:bottom menu----*/
nav {
	z-index:999;
	margin:0 auto;
	width: 100%; height: 60px;
	display:block; position:fixed; bottom:0px;
	padding: 10px 0 0 0;
	background: #333;
	text-align:center;
	color: #f2f2f2;}

.menus {
	margin:0 auto;
	width: 1000px; height: 50px;
	margin-bottom: 15px;
}
.menus ul#menus_logo {width: 250px; height: 50px; float: left;}
.menus ul#menus_logo img {height: 47px;}
.menus li{display:inline-block;}
.menus li h2 {font-size: 3.5em; font-weight: 100; color: #fff; letter-spacing: 10px;}

#menu{width: 749px; height: 50px; float: right;}

#menu li {
	display:inline-block;
	margin: 10px 5px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.1);
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}

#menu li.active{background:#666; background: rgba(255,255,255, 1); color: #fff;}
#menu li a{text-decoration:none; color: #000;}
#menu li.active a:hover{color: #000;}
#menu li:hover{background: rgba(255,255,255, 0.7);}
#menu li a, #menu li.active a{padding: 9px 18px; display:block;}
#menu li.active a{color: #000;}
/*----nav:bottom menu----*/



/* Backgrounds will cover all the section
* --------------------------------------- */
#section0, #section1, #section2, #section3, #section4, #section5 { }

/* Defining each sectino background and styles
* --------------------------------------- */
#section0{background-image: url('../images/bg_blue.jpg');}
#section1{
	background: url('../images/role_02.png') 70% top no-repeat,url('../images/bg_triangle_01.png') center center no-repeat;
	background-size: auto 80%, 100% auto;
 }

#section2{
	background: url('../images/role_03.png') 15% top no-repeat,url('../images/bg_triangle_02.png') center center no-repeat;
	background-size: auto 90%, 100% auto;
}

#section3{
	background: url('../images/role_04.png') 130% top no-repeat,url('../images/bg_triangle_03.png') center center no-repeat;
	background-size: auto 90%, 100% auto;
}

#section4{
	background:url('../images/bg_triangle_04.png') center center no-repeat;
	background-size: 100% auto;
}

#section5{
	background:url('../images/bg_triangle_05.png') center center no-repeat;
	background-size: 100% auto;
}

#section3 a, #section5 a {color: #0036ff; text-decoration:none;}
#section3 a:hover, #section5 a:hover {color: rgb(255,253,108); background-color: #0036ff;}

.role_cute_03 {
	width: 180px; height: auto;
	position: absolute; right:10%; top: 48%; z-index: 150;}
.role_cute_03 img {width: 100%; height: auto;}

/*------------------------------------------*/
/****************footer start****************/
footer {
	margin: 0 auto; width: 100%;
	padding: 20px 0px;
	position: relative; bottom: 10%;
	z-index: 999;
}
footer ul {margin: 0 auto; width: 1000px; text-align: center;}
footer ul li {padding: 5px 0;}
footer ul.footer_logo li {height: 70px; display: inline-block; margin-right: 10px;}
footer ul.footer_logo img {width: auto; height: 90%;}
footer ul li.tip {text-align:left; line-height:24px;}

/****************footer end****************/
/*----------------------------------------*/



/*-------------RWD start-------------*/
/*當螢幕寬度在1023x~1201px -device- 之間*/
@media screen and (min-width: 1201px) and (max-width: 1599px){
	#section3{
		background: url('../images/role_04.png') 400px top no-repeat,url('../images/bg_triangle_03.png') center center no-repeat;
		background-size: auto 100%, 100% auto;
	}
}

/*當螢幕寬度在1023x~1201px -device- 之間*/
@media screen and (min-width: 320px) and (max-width: 1201px){
	div.godown {bottom:12%;}
	.container {height: 768px;}
	.scene div.bg1 {width: 1000px; height: 700px;}
	.scene div.bg2 {height: 768px;}
	.scene div.bg3 {height: 850px;}
	.scene div.bg4 {height: 800px;}
	div.cute_role01talk {position: relative; top:-550px; left:300px;}

	#section1{
		background: url('../images/role_02.png') 80% top no-repeat,url('../images/bg_triangle_01.png') center center no-repeat;
		background-size: auto 70%, 100% auto;
	 }

	#section2{
		background: url('../images/role_03.png') -90% bottom no-repeat,url('../images/bg_triangle_02.png') center center no-repeat;
		background-size: auto 100%, 100% auto;
	}

	#section3{
		background: url('../images/role_04.png') 250px top no-repeat,url('../images/bg_triangle_03.png') center center no-repeat;
		background-size: auto 100%, 100% auto;
	}
}

/*當螢幕寬度在320x~1022px -device- 之間*/
@media screen and (min-width: 320px) and (max-width: 1022px){

	h1 {font-size: 5em;}
	h2 {font-size: 4em;}
	h3 {font-size: 2.5em;}
	h4 {font-size: 1.725em;}
	h5 {font-size: 1.5em;}

	/*--------btns--------*/
	#btns {height: 150px; }
	#btns ul {width: 100%; height: 150px; margin: 0 auto; padding: 0px; text-align: center; }
	#btns ul li {float: none; width: 16%; height: 150px; margin: 0 auto;}
	#btns ul li.btn_fb, #btns ul li.btn_fb:hover ,
	#btns ul li.btn_baha, #btns ul li.btn_baha:hover,
	#btns ul li.btn_apk, #btns ul li.btn_apk:hover,
	#btns ul li.btn_gp, #btns ul li.btn_gp:hover,
	#btns ul li.btn_ios, #btns ul li.btn_ios:hover,
	#btns ul li.btn_pc, #btns ul li.btn_pc:hover {background-size: auto 200%;}
	/*--------btns--------*/

	/*--------logo--------*/
	div.logo {height:200px; top:12%; right: 85px;}
	div.logo img {height:200px;}
	div.logo ul {margin: 0 auto; width: 100%; height:200px;}
	/*--------logo--------*/

	nav {height: 130px;}
	.menus {width: 100%;}
	.menus ul#menus_logo {display: none;}
	#menu{width: 100%; height: auto; clear: both; font-size: 3em;}
	#menu li {margin: 0 auto; width: 15%; }

	div.godown {bottom:19%;}
	div.godown div {width: 90%;}

	.container {height: 1024px;}
	.scene div.bg4 {height: 1024px;}

	.role_cute_03 {position: absolute; right:5%; top: 55%;}

	footer {position: absolute; bottom: 200px;}

	#section1{
		background: url('../images/role_02.png') 65% bottom no-repeat,url('../images/bg_triangle_01.png') center center no-repeat;
		background-size: auto 70%, cover;
	 }

	#section2{
		background: url('../images/role_03.png') 90% top no-repeat,url('../images/bg_triangle_02.png') center center no-repeat;
		background-size: auto 90%, cover;
	}

	#section3{
		background: url('../images/role_04.png') 20% top no-repeat,url('../images/bg_triangle_03.png') center center no-repeat;
		background-size: auto 90%, cover;
	}

	#section4{
		background: url('../images/bg_triangle_04.png') center center no-repeat;
		background-size: cover;
	}

	#section5{
		background: url('../images/bg_triangle_05.png') center center no-repeat;
		background-size: cover;
	}
}

/*-------------RWD end-------------*/