@charset "utf-8";

.top_con { position:relative; min-width:1400px; height:917px; background:url('../images/vol321_01.jpg') center no-repeat; background-size:cover; }
.top_con .tit_area { position:absolute; top:50%; left:50%; margin:-106px 0 0 -242px; width:485px; height:212px; }
	.tit_area span { opacity:0; position:absolute; bottom:128px; }
	.tit_area span:nth-child(1) { left:0px; }
	.tit_area span:nth-child(2) { left:65px; }
	.tit_area span:nth-child(3) { left:192px; }
	.tit_area span:nth-child(4) { left:300px; }
	.tit_area span:nth-child(5) { left:470px; }
		.tit_area.action span { opacity:1; }
		.tit_area.action span:nth-child(1) { animation: tit_obj 0.7s ease; }
		.tit_area.action span:nth-child(2) { animation: tit_obj 1.8s ease; }
		.tit_area.action span:nth-child(3) { animation: tit_obj 2.2s ease; }
		.tit_area.action span:nth-child(4) { animation: tit_obj 1.4s ease; }
		.tit_area.action span:nth-child(5) { animation: tit_obj 1.5s ease; }
		/* action */
		@keyframes tit_obj
		{
		  0% { opacity:0; }
		  100% { opacity:1; }
		}
	.tit_area p { position:absolute; left:0px; bottom:0px; overflow:hidden; height:110px; }
	.tit_area p img { position:relative; bottom:485px; }
	.tit_area.action p.action img { animation: tit_321 1.4s ease; bottom:0px; }
		/* action */
		@keyframes tit_321
		{
		  0% { bottom:485px; }
		  100% { bottom:0px; }
		}
	/* .tit_area.action p:before { content:""; position:absolute; top:0px; right:-485px; width:0px; height:1px; background:#fff; animation: line_321 5s ease; opacity:0.5; } */
	@keyframes line_321
		{
		  0% { width:0px; right:485px; }
		  25% { width:100%; left:auto; right:0px; }
		  100% { left:auto; right:-485px; }
		}
	
.con { text-align:center; }
	.con img,
	.con video { vertical-align:top; }
	.con video { padding-bottom:140px; }
	.con .inside_b,
	.con .inside_w { min-width:1400px; width:100%; }
	.con .inside_b { background:#000; }
	.con .inside_w { background:#fff; }
	
.con p  { overflow:hidden; }
.con p img { opacity:0; position:relative; top:70px; animation: vol_action_done 1s ease; }
.con p.current img { opacity:1; top:0px; animation: vol_action 1s ease; }
	
	@keyframes vol_action
	{
	  0% { opacity:0; top:70px; }
	  100% { opacity:1; top:0; }
	}
	@keyframes vol_action_done
	{
	  0% { opacity:1; top:0; }
	  100% { opacity:0; top:-70px; }
	}

.con .made_area { position:relative; min-width:1400px; height:720px; background:#000 url('../images/vol321_15.jpg') top center no-repeat; }
	.made_area .made_name { position:absolute; top:290px; left:50%; margin-left:-352px; width:705px; }
	.made_area .made_name li { margin-top:20px; text-align:center; }
	.made_area .made_name li:first-child { margin-top:0px; }
	.made_area .copy_right { position:absolute; top:515px; left:50%; margin-left:-110px; width:225px; text-align:center; }
	

	/* action */
	.made_name li { position:relative; opacity:0; animation: made_321_done 0.2s ease; }
	.made_name.current li { opacity:1; }
	.made_name.current li:nth-child(1) { animation: made_321 0.2s ease; }
	.made_name.current li:nth-child(2) { animation: made_321 0.5s ease; }
	.made_name.current li:nth-child(3) { animation: made_321 0.8s ease; }
	.made_name.current li:nth-child(4) { animation: made_321 1.2s ease; }
	.made_name.current li:nth-child(5) { animation: made_321 1.5s ease; }
	@keyframes made_321
	{
	  0% { opacity:0; bottom:-50px; }
	  100% { opacity:1; bottom:0; }
	}
	@keyframes made_321_done
	{
	  0% { opacity:1; bottom:0; }
	  100% { opacity:0; bottom:-50px; }
  	}
	  
	  
	  
	/* **************** action 12  *********** */
	.action_obj_area { position:relative; }
	.action_obj { position:absolute; top:0px; left:50%; margin-left:-700px; display:block; width:1400px; height:3763px; }
	.action_obj img { position:absolute; opacity:0; }
	.action_obj span.obj01 img:nth-child(1) { bottom:2988px; left:106px; animation: action_obj0101_done 0.2s ease; }
	.action_obj span.obj01 img:nth-child(2) { bottom:3215px; right:116px; animation: action_obj0102_done 0.2s ease; }
	.action_obj span.obj02 img { bottom:2088px; left:106px; animation: action_obj0201_done 0.2s ease; }
	.action_obj span.obj03 img:nth-child(1) { bottom:1420px; left:0px; animation: action_obj0301_done 0.2s ease; }
	.action_obj span.obj03 img:nth-child(2) { bottom:1017px; right:0px; animation: action_obj0302_done 0.2s ease; }
	.action_obj span.obj04 img { bottom:180px; left:0px; animation: action_obj0401_done 0.2s ease;  } 
	
	.action_obj span.action img { opacity:1; }
	.action_obj span.action.obj01 img:nth-child(1) { animation: action_obj0101 0.4s ease; }
	.action_obj span.action.obj01 img:nth-child(2) { animation: action_obj0102 0.8s ease; }
	.action_obj span.action.obj02 img { animation: action_obj0201 0.4s ease; }
	.action_obj span.action.obj03 img:nth-child(1) { animation: action_obj0301 0.4s ease; }
	.action_obj span.action.obj03 img:nth-child(2) { animation: action_obj0302 1.5s ease; }
	.action_obj span.action.obj04 img { animation: action_obj0401 0.4s ease; } 
	
	@keyframes action_obj0101
	{
	  0% { opacity:0; bottom:2918px; }
	  100% { opacity:1; bottom:2988px; }
	}
	@keyframes action_obj0102
	{
	  0% { opacity:0; bottom:3145px; }
	  100% { opacity:1; bottom:3215px; }
	}
	@keyframes action_obj0201
	{
	  0% { opacity:0; bottom:2017px; }
	  100% { opacity:1; bottom:2088px; }
	}
	@keyframes action_obj0301
	{
	  0% { opacity:0; bottom:1350px; }
	  100% { opacity:1; bottom:1420px; }
	}
	@keyframes action_obj0302
	{
	  0% { opacity:0; bottom:947px; }
	  100% { opacity:1; bottom:1017px; }
	}
	@keyframes action_obj0401
	{
	  0% { opacity:0; bottom:110px; }
	  100% { opacity:1; bottom:180px; }
	}
	
	
	
	@keyframes action_obj0101_done
	{
	  0% { opacity:1; bottom:2988px; }
	  100% { opacity:0; bottom:2918px; }
	}
	@keyframes action_obj0102_done
	{
	  0% { opacity:1; bottom:3215px; }
	  100% { opacity:0; bottom:3145px; }
	}
	@keyframes action_obj0201_done
	{
	  0% { opacity:1; bottom:2017px; }
	  100% { opacity:0; bottom:2088px; }
	}
	@keyframes action_obj0301_done
	{
	  0% { opacity:1; bottom:1350px; }
	  100% { opacity:0; bottom:1420px; }
	}
	@keyframes action_obj0302_done
	{
	  0% { opacity:1; bottom:1017px; }
	  100% { opacity:0; bottom:947px; }
	}
	@keyframes action_obj0401_done
	{
	  0% { opacity:1; bottom:180px; }
	  100% { opacity:0; bottom:110px; }
	}