@charset "UTF-8";
/*html{
	height:100%;
}*/
body{
	height:100%;
	border-top:#f6ab00 20px solid;
	padding:20px 0 0 0;
}
#top .breadcrumbs{
	text-align:center;
	padding-left:40px;
}
#top span{
	display:block;
	margin-right:16px;
	float:left;
}
#top span:last-child{
	margin-right:0;
}
#top span.small{
	padding-top:30px;
	width:43px;
	height:39px;
}
#top span.large{
	padding-top:60px;
	width:53px;
	height:44px;
}
#top .start{
	width:140px;
	margin-left:-5px;
}
#top .goal{
	width:156px;
	margin-right:-15px;
}
#content{
	padding:20px 0;
}
#qhead{
	position:relative;
	margin-bottom:-50px;
	z-index: 2;
	text-align:center;
}
#qBox .inner{
	box-sizing:border-box;
	background:url(../images/indexBg_dotted.png) repeat 0 0;
	position:relative;
	text-align:center;
	z-index: 1;
	border:#0063a5 10px solid;
	border-radius:20px;
	box-shadow:0 4px 4px rgba(0,0,0,0.2);
	overflow:hidden;
	padding-bottom:70px;
}
#qBox .txt{
	font-size:4rem;
	line-height:1.4;
	font-weight:bold;
	padding:120px 0 90px 0;
}
.zoomInAnimated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.zoomInAnimated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.zoomInAnimated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
@-webkit-keyframes zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
	}
}
@keyframes zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
	}
}
.zoomInDown {
	-webkit-animation-name: zoomInDown;
	animation-name: zoomInDown
}
#qBox .btns .contentLeft,
#qBox .btns .contentRight{
	width:50%;
	position:relative;
}
#qBox .btns .contentLeft img,
#qBox .btns .contentRight img{
	position:absolute;
	top:0;
}
#qBox .btns .contentLeft img{
	left:5px;
	z-index: 1;
}
#qBox .btns .contentRight img{
	right:5px;
	z-index: 1;
}
#qBox .btns .contentLeft a,
#qBox .btns .contentRight a{
	width:368px;
	height:96px;
	display:block;
	box-sizing:border-box;
	background:#fff;
	padding:6px;
	border:#f6ab00 4px solid;
	line-height:76px;
	border-radius:96px;
	color:#fff;
	box-shadow:0 5px 5px rgba(0,0,0,0.3);
	
}
#qBox .btns .contentLeft a:hover,
#qBox .btns .contentRight a:hover{
	border:#facd66 4px solid;
	color:#b98000;
}
#qBox .btns .contentLeft a{
	margin-left:auto;
	margin-right:25px;
}
#qBox .btns .contentRight a{
	margin-right:auto;
	margin-left:25px;
}
#qBox .btns .contentLeft a span,
#qBox .btns .contentRight a span{
	display:block;
	box-sizing:border-box;
	background:#f6ab00;
	border-radius:96px;
	font-size:2.4rem;
	font-weight:bold;
	letter-spacing:-0.1em;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#qBox .btns.btns-0 .contentLeft a span,
#qBox .btns.btns-0 .contentRight a span{
	font-size:4.4rem;
}
#qBox .btns.btns-1 .contentLeft a span,
#qBox .btns.btns-1 .contentRight a span{
	font-size:4.4rem;
}
#qBox .btns.btns-2 .contentLeft a span,
#qBox .btns.btns-2 .contentRight a span{
	font-size:3.2rem;
}
#qBox .btns.btns-3 .contentLeft a span,
#qBox .btns.btns-3 .contentRight a span{
	font-size:3.4rem;
}
#qBox .btns.btns-4 .contentLeft a span,
#qBox .btns.btns-4 .contentRight a span{
	font-size:3.4rem;
}
#qBox .btns .contentLeft a:hover span,
#qBox .btns .contentRight a:hover span{
	background:#facd66;
}
#qBox #zorori{
	left:-220px;
	top:20px;
	position:absolute;
}
#siteFooter{
	width:100%;
	/*position:absolute;
	bottom:0;
	left:0;*/
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    -ms-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    -ms-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    -ms-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    -ms-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}



#modal{
	/*display:none;*/
	position:fixed;
	width:100%;
	height:100%;
	background:rgba(246,171,0,0.9);
	z-index: 99;
	top:0;
	left:0;
}
.modalInner{
	position:absolute;
	height:73.612684%;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	border-top:#0063a5 10px solid;
	border-bottom:#0063a5 10px solid;
	background:url(../images/indexBg_dotted.png) repeat 0 0;
	text-align:center;
}
.modalInner header{
	margin-top:-60px;
}
#slot{
	position:absolute;
	left:0;
	top:0;
}
#cover{
	position:absolute;
	width:385px;
	height:425px;
	left:0;
	right:0;
	bottom:0;
	top:0;
	margin:auto;
	z-index:99;
}
#coverImg{
	position:relative;
	z-index: 99;
}
#mask{
	width:232px;
	height:232px;
	position:absolute;
	border-radius:50%;
	left: 27px;
    top: 25px;
    z-index:99;
    background:#cde6f7;
    overflow:hidden;
}
@media screen and (max-width: 480px){
	html{
		min-width:100%;
		height:100%;
	}
	body{
		overflow-x:hidden;
	}
	body.home{
		background-size:630px !important;
	}
	#content{
		width:90%;
		margin:auto;
	}
	.inner{
		width:100%;
	}
	#top .start{
		width:70px;
	}
	#top .goal{
		width:78px;
	}
	#top .breadcrumbs{
		padding-left:0;
	}
	#top span{
		margin-right:0;
	}
	#top span.small{
		width:22px;
		height:20px;
		padding-top: 15px;
	}
	#top span.large{
		width:27px;
		height:22px;
		padding-top:30px;
	}
	#qBox .inner{
		border: #0063a5 5px solid;
		padding-bottom:30px;
	}
	#qhead{
		margin-bottom:-25px;
	}
	#qhead img{
		width:60%;
	}
	#qBox #zorori{
		width:169px;
		top:10px;
		left:-106px;
	}
	#qBox .txt{
		font-size:1.8rem;
		padding: 70px 0 45px 0;
		width:70%;
		margin-left:auto;
		margin-right:auto;
	}
	#qBox .btns .contentLeft img{
		width:68px;
		left:-44px;
	}
	#qBox .btns .contentRight img{
		width:70px;
		right:-45px;
	}
	#qBox .btns .contentLeft, #qBox .btns .contentRight{
		float:none;
		margin:auto;
		width:80%;
	}
	#qBox .btns .contentLeft{
		margin-bottom:1.5em;
	}
	#qBox .btns .contentLeft a,
	#qBox .btns .contentRight a{
		width:100%;
		height:54px;
		line-height:44px;
		padding: 3px;
		border: #f6ab00 2px solid;
		display:inline-block;
	}
	#qBox .btns .contentLeft a{
		margin-right:auto;
	}
	#qBox .btns .contentRight a{
		margin-left:auto;
	}
	#qBox .btns.btns-0 .contentLeft a span,
	#qBox .btns.btns-0 .contentRight a span{
		font-size:2.4rem;
	}
	#qBox .btns.btns-1 .contentLeft a span,
	#qBox .btns.btns-1 .contentRight a span{
		font-size:2.4rem;
	}
	#qBox .btns.btns-2 .contentLeft a span,
	#qBox .btns.btns-2 .contentRight a span{
		font-size:2.2rem;
	}
	#qBox .btns.btns-3 .contentLeft a span,
	#qBox .btns.btns-3 .contentRight a span{
		font-size:2.2rem;
	}
	#qBox .btns.btns-4 .contentLeft a span,
	#qBox .btns.btns-4 .contentRight a span{
		font-size:2.4rem;
	}
	#qBox .btns.btns-5 .contentLeft a span,
	#qBox .btns.btns-5 .contentRight a span{
		font-size:1.7rem;
	}
	
	
	.modalInner{
		height:65%;
	}
	.modalInner header{
		margin-top:-35px;
	}
	.modalInner header img{
		width:60%;
	}
	#cover{
		width:190px;
		height:209px;
	}
	#mask{
		width:116px;
		height:116px;
		left:13px;
		top:12px;
	}
	
	/*#siteFooter{
		position:fixed;
		bottom:0;
		left:0;
	}*/
}
@media screen and (max-width: 320px){
	#top span.small{
		width:17px;
		height:auto;
	}
	#top span.large{
		width:22px;
		height:auto;
	}
	#top .start{
		width:65px;
	}
	#top .goal{
		width:72px;
	}
	#qBox .txt{
		width:60%;
	}
	#qBox .btns .contentLeft, #qBox .btns .contentRight{
		width:85%;
	}
	#qBox .btns .contentLeft a span,
	#qBox .btns .contentRight a span{
		font-size:1.7rem;
	}
}