#top_imgs{
    height:800px;
    height:100vh;
}
#top_imgs-inner{
	position:absolute;
	position:fixed;
	left:0;right:0;top:0;
    background-color: #000;
    height:800px;
    height:100vh;
}
.top_img{
	position: absolute;
	left:0;right:0;top:0;bottom:0;
    background-size: cover;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
	opacity: 0;
}

#top_img1.on{
	background-image: url(/grandprix/2018/images/top_img_1_pc.jpg);
}
#top_img2.on{
	background-image: url(/grandprix/2018/images/top_img_2_pc.jpg);
}
#top_img3.on{
	background-image: url(/grandprix/2018/images/top_img_3_pc.jpg);
}
#top_img4.on{
	background-image: url(/grandprix/2018/images/top_img_4_pc.jpg);
}
#top_img5.on{
	background-image: url(/grandprix/2018/images/top_img_5_pc.jpg);
}
.top_t{
	position: absolute;
	left:0;right:0;top:0;bottom:0;
    background-size: 800px auto;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
	opacity: 0;
}
#top_t1.on{
	background-image: url(/grandprix/2018/images/top_img_t1.png);
}
#top_t2.on{
	background-image: url(/grandprix/2018/images/top_img_t2.png);
}
#top_t3.on{
	background-image: url(/grandprix/2018/images/top_img_t3.png);
}
#top_imgs #flare{
	position: absolute;
	left:50%;
	top:50%;
	width:818px;
	height:818px;
	margin: -595px 0 0  -530px;
	background: url(/grandprix/2018/images/top_img_flare.png) no-repeat;
	background-size:100%;
	opacity: 0;
}
#top_logo{
	position: absolute;
	left:50%;
	top:50%;
	width:800px;
	height:520px;
	margin: -290px 0 0 -400px;
	background: url(/grandprix/2018/images/top_img_logo.png?ver=3) no-repeat;
	background-size:100%;
	opacity: 0;
}
#top_logo img{
    width:100%;
    height:auto;
}

/*-- for IE9以下 ---*/
body.ie .top_img,body.ie .top_t{
	display: none;
}
body.ie #top_img5,body.ie #top_logo,body.ie #top_imgs #flare{
	display: block;
	opacity: 1;
}
body.ie #top_img5{
	background-image: url(/grandprix/2018/images/top_img_5_pc.jpg);
}


@media screen and (max-width:767px) {

	#top_imgs{
	    height:100vh;
	}
	#top_imgs-inner{	
		height:100vh;
	}
	.top_img{	
	}
	#top_img1.on{	
		background-image: url(/grandprix/2018/images/top_img_1_sp.jpg);
	}
	#top_img2.on{	
		background-image: url(/grandprix/2018/images/top_img_2_sp.jpg);
	}
	#top_img3.on{	
		background-image: url(/grandprix/2018/images/top_img_3_sp.jpg);
	}
	#top_img4.on{	
		background-image: url(/grandprix/2018/images/top_img_4_sp.jpg);
	}
	#top_img5.on{
		background-image: url(/grandprix/2018/images/top_img_5_sp.jpg);
	}
	.top_t{
		background-size: 100% auto;
	}
	
	#top_imgs #flare{
	    left:0;
	    width:101%;
	    height:auto;
	    padding:101% 0 0;
	    margin: -81% 0 0  -13%;
	}
	#top_logo{
		left: 0;
		width:100%;
		height:auto;
		padding:60% 0 0;
		margin: -45% 0 0;
		overflow: hidden;
	}
}

.top_img.on{
  -webkit-animation: image_in ease-out 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: image_in ease-out 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: image_in ease-out 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: image_in ease-out 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  animation: image_in ease-out 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
	animation-delay: 0s;
}
#top_logo.on{
  -webkit-animation: image_in ease-out 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: image_in ease-out 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: image_in ease-out 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: image_in ease-out 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  animation: image_in ease-out 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
	animation-delay: 0s;
}


.top_t.on{
  animation: text_inout linear 5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: text_inout linear 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: text_inout linear 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: text_inout linear 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: text_inout linear 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
#flare.on{
  animation: text_inout linear 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: text_inout linear 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: text_inout linear 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: text_inout linear 3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: text_inout linear 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes text_inout{
  0% {
    opacity:0;
    transform:  scaleX(0.90) scaleY(0.90) ;
  }
  25% {
    opacity:1;
    transform:  scaleX(0.94) scaleY(0.94) ;
  }
  67% {
    opacity:1;
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-moz-keyframes text_inout{
  0% {
    opacity:0;
    -moz-transform:  scaleX(0.90) scaleY(0.90) ;
  }
  25% {
    opacity:1;
    -moz-transform:  scaleX(0.94) scaleY(0.94) ;
  }
  67% {
    opacity:1;
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -moz-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-webkit-keyframes text_inout {
  0% {
    opacity:0;
    -webkit-transform:  scaleX(0.90) scaleY(0.90) ;
  }
  25% {
    opacity:1;
    -webkit-transform:  scaleX(0.94) scaleY(0.94) ;
  }
  67% {
    opacity:1;
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -webkit-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-o-keyframes text_inout {
  0% {
    opacity:0;
    -o-transform:  scaleX(0.90) scaleY(0.90) ;
  }
  25% {
    opacity:1;
    -o-transform:  scaleX(0.94) scaleY(0.94) ;
  }
  67% {
    opacity:1;
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -o-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}

@-ms-keyframes text_inout {
  0% {
    opacity:0;
    -ms-transform:  scaleX(0.90) scaleY(0.90) ;
  }
  25% {
    opacity:1;
    -ms-transform:  scaleX(0.94) scaleY(0.94) ;
  }
  67% {
    opacity:1;
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -ms-transform:  scaleX(1.10) scaleY(1.10) ;
  }
}