#header {
	position: relative;
	background-image: url(../img/main_bg.jpg);
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

#header:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url(../img/common_bg_loop_10.png);
	background-position: center center;
	z-index: 1;
}


#header:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 206px;
	left: 0;
	bottom: 0;
	background-image: url(../img/main_loop.png);
	background-repeat: repeat-x;
	background-position: top center;
	z-index: 2;
}



#header .inner {
  height: 864px;
  position: relative;
  z-index: 3;
}

#header .tips {
	position: absolute;
    width: 780px;
    margin: auto;
    top: 8px;
    left: 98px;
}

#header .maintitle {
	position:absolute;
	bottom: -54px;
    right: 0px;
	width: 748px;
	height: 271px;
	margin: auto;
}

#header .maintitle img{
	position: absolute;
	display: block;
	width: 100%;
	height: auto;
}


#header .maintitle img.i1{
	width:99.468085106%; 
	left: 0;
	top: 0;
	z-index: 998;
}

#header .maintitle img.i2 {
	width: 40.755007704%;
    top: 62.916605%;
    left: 51.824468%;
	z-index: 999;
}


#header .character {
}

#header .character img {
	display: block;
	height: auto;
	position: absolute;
}

#header .character .life {
	width: 637px;
	left: -161px;
    top: 127px;
}

#header .character .tech {
	width: 609px;
	right: -169px;
    top: 93px;
}


#header .character .sub {
	width: 202px;
	left: 50%;
	top: 50%;
	z-index: 1;
	margin-top: -300px;
	margin-left: -100px;
}


#whatjam {
	position: relative;
	background-color:none;
	margin-top: 0;
	color: #fff;
	background-color:#083388;
	z-index: 0;
}

#whatjam .inner {
	position: relative;
	padding:83px 0 80px 0;
	height:auto;
	box-sizing: border-box;
}



#whatjam .inner .splash_2nd img{
	width: 100%;
	height: auto;
}


#whatjam .inner .titles{
	position: relative;
	width: 380px;
	margin: 0 0 30px 0;
}

#whatjam .inner .titles h3{
	position: relative;
	margin: 0 0 30px 0;
	z-index: 1;
}

#whatjam .inner .titles .desc{
	position: relative;
	z-index: 2;
	font-size: 16px;
	line-height: 170%;
}

#whatjam .inner .titles .splash{
	position: absolute;
	left: -85px;
    top: -80px;
	width: 243px;
	z-index: 0;
}

#whatjam .inner .btn {
	width: 218px;
}

#whatjam .inner .btn a {
	display: block;
	transform: scale(1);
	transition: transform .2s cubic-bezier(.17,.67,.53,1.42);
}

#whatjam .inner .btn a:hover{
transform: scale(1.08);
}

#whatjam .inner .image {
	position: absolute;
	right: 0;
	top: 20px;
	width: 678px;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
# Smart Phone ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width:767px){

	#header {
	position: relative;
	background-image: url(../img/main_bg.jpg);
	background-size: cover;
	background-position: center center;
	z-index: 1;
	}

	#header:after {
	background-size: 63px 63px;
	}


	#header:before {
	width: 100%;
	height: 31.25vw;
	background-image: url(../img/main_loop.png);
	background-size: 75px 500px;
	z-index: 2;
	}


	#header .inner {
		width: 100%;
  height:125vw;
  position: relative;
  overflow: hidden;
}

#header .tips {
	position:relative;
	width: 79.6875vw;
	margin:auto;
	top: 1.78125vw;
	left: 0;
}

#header .maintitle {
	position:absolute;
	bottom: 1px;
	left: 0;
	width: 83.59375vw;
	height: 0;
	padding-top: 36.24288425%;
	margin: auto;
	z-index: 9999;
}

#header .maintitle img.i2 {
	width: 40.755007704%;
    top: 55.916605%;
    left: 51.824468%;
}

#header .character {
	position:absolute;
	top: 14.0625vw;
	left:0;
	width: 100%;
	height: 0;
	padding-top: 92.1875%;
	margin: auto;
}

#header .character img {
	display: block;
	height: auto;
	position: absolute;
}



#header .character .life {
	width: 59.223489167%;
	left: -9%;
	top: 22%;
	z-index: 1;
}

#header .character .sub {
	width: 26.90625vw;
	top: 43%;
	z-index: 2;
	margin-top:-34.609375vw;
	margin-left: -10.453125vw;
}

#header .character .tech {
	width: 57.057012542%;
	right: -56px;
	top: 0%;
	z-index:0;
}

	#whatjam {
	color: #fff;
}

#whatjam .inner {
	position: relative;
	padding:8.75vw 0 9.375vw 0;
	height: auto;
	box-sizing: border-box;
}


#whatjam .inner .titles{
	position: relative;
	width: 90%;
	margin: 0 auto 0 auto;
}

#whatjam .inner .titles h3{
	position: relative;
	margin: 0 0 5.78125vw 0;
	z-index: 1;
}

#whatjam .inner .titles .desc{
	position: relative;
	z-index: 2;
	font-size: 3.4375vw;
	line-height: 170%;
	margin:0 0 5.78125vw 0;
}

#whatjam .inner .titles .splash{
	position: absolute;
	left: -6.875vw;
    top: -5vw;
	width: 21.40625vw;
	z-index: 0;
}

#whatjam .inner .btn {
	width: 60%;
	margin:auto;
}

#whatjam .inner .image {
	position:relative;
	right: 0;
	top: 0;
	width: 100%;
	margin:0 0 5.78125vw 0;
}

}