@charset "utf-8";

@import "reset.css";
@import "default.css";
@import "base.css";


.visual_wrap {
	width: 100%;
	max-width: 640px;
	margin: 0px auto;
	position: relative;}
.visual_wrap .vsBg { display: block; width: 100%;}	
.rolling_wrap {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; }
.rolling_wrap li {	width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; display: block; overflow: hidden; background-color: #000;}
.layout { width: 100%; height: 100%; position: relative;}
.bgWrap { width: auto; position: relative; overflow: hidden;}

.rolling_wrap li.view {}
.rolling_wrap li.list_01 { z-index: 5;}
.rolling_wrap li.list_02 { z-index: 4;}
.rolling_wrap li.list_03 { z-index: 3;}
.rolling_wrap li.list_02 .btn { display: block; width: 54%; height: 9%; position: absolute; top: 57%; left: 23%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li.list_03 .btn { display: block; width: 60%; height: 9%; position: absolute; top: 89%; left: 20%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li img.vsImg {display: block;	position: relative; display: block; width: 100%;}
.rolling_wrap li .bg1 { display: block; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 2;}
.rolling_wrap li .bg2 { display: block; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); z-index: 1;}
.rolling_wrap li.view .bg1 { transition: right .3s; right: 100%;}
.rolling_wrap li.view .bg2 { transition: right .8s, opacity 1s; right: 100%; opacity:0;}
.rolling_wrap li .mainTxt { display: block; position: absolute; bottom: 20px; left: 434px;}

.rolling_wrap li.list_01 img.vsTxt1 {display: block; position: absolute; top: 125px; left: 50%; opacity: 0; margin-left: -175px; transition: all 1s;}
.rolling_wrap li.list_01 img.vsTxt2 {display: block; position: absolute; top: 697px; left: 50%; opacity: 0; margin-left: -193px;  transition: all 2s ease .3s;}
.rolling_wrap li.list_01 img.vsTxt3 {display: block; position: absolute; top: 612px; left: 50%; opacity: 0; margin-left: -112px;  transition: all 2s ease .6s;}
	
.rolling_wrap li.list_02 img.vsTxt1 {display: block; position: absolute; top: 125px; left: 50%; opacity: 0; margin-left: -175px; transition: all 1s;}
.rolling_wrap li.list_02 img.vsTxt2 {display: block; position: absolute; top: 697px; left: 50%; opacity: 0; margin-left: -300px;  transition: all 2s ease .3s;}
.rolling_wrap li.list_02 img.vsTxt3 {display: block; position: absolute; top: 598px; left: 50%; opacity: 0; margin-left: -47px;  transition: all 2s ease .6s;}

/*.rolling_wrap li.view img.vsImg { width: 2000px; margin-left: -1000px; transition: width 4s, margin-left 4s;}*/
.rolling_wrap li.view.list_01 img.vsTxt1 { opacity:1;  margin-left: -225px; transition: all 1s;}
.rolling_wrap li.view.list_01 img.vsTxt2 { opacity:1;  margin-left: -243px; transition: all 2s ease .3s;}
.rolling_wrap li.view.list_01 img.vsTxt3 { opacity:1;  margin-left: -162px; transition: all 2s ease .6s;}

.rolling_wrap li.view.list_02 img.vsTxt1 { opacity:1;  margin-left: -225px; transition: all 1s;}
.rolling_wrap li.view.list_02 img.vsTxt2 { opacity:1;  margin-left: -350px; transition: all 2s ease .3s;}
.rolling_wrap li.view.list_02 img.vsTxt3 { opacity:1;  margin-left: -97px; transition: all 2s ease .6s;}

.content_wrap .link_wrap { width: 100%; height: 12px; text-align: center; position: absolute; bottom: 10px; left: 0px; z-index: 9;}
.content_wrap .link_wrap a { display: inline-block; width: 10px; height: 10px; background: url(../img/main/bulit2_off.png) no-repeat top left;; margin-left: 3px; margin-right: 3px; background-size: contain} 
.content_wrap .link_wrap a.on { background-image: url(../img/main/bulit2_on.png);}
	
	.visual_wrap .bg {
		width: 100%;
		height: 40px;
		margin: 0px auto;
		max-width: 640px;
		position: absolute;
		bottom: 0px;
		background: url(../img/main/bg.png) repeat top left}
		
	.visual_wrap .paper {
		width: 28%;
		display: block;
		position: absolute;
		top: 0px;
		right: 0px;}
		
		.visual_wrap .paper img { width: 100%;}
	
	.visual_wrap .btn_wrap {
		width: 100%;
		height: 19px;
		padding: 10px 0px;
		margin: 0px auto;
		max-width: 640px;
		background-color: rgba(0,0,0,.4);
		position: absolute;
		bottom: 0px;}
		 
		.visual_wrap .btn_wrap li { width: 13px; height: 19px;}
		
		.visual_wrap .btn_wrap li.list_01 { float: left; margin-left: 10px;}
		.visual_wrap .btn_wrap li.list_02 { float: right; margin-right: 10px;}
	
	.num_list { 
		width: 60px;
		height: 13px;
		position: absolute;
		bottom: 15px;
		left: 50%;
		margin-left: -10px;}
		
		.num_list a {
			width: 13px;
			height: 13px;
			margin-right: 2px;
			display: inline-block;
			background: url(../img/main/bulit_off.png) no-repeat top left;
			background-size: cover;}
			
		.num_list a.on { background-image: url(../img/main/bulit_on.png);background-size: cover;}
		
	.menu_wrap {
		max-width: 640px;
		margin: 0px auto;
		position: absolute;
		top: 10px;
		left: 0px;}
		
		.menu_wrap img { width: 100%;}
		
		.menu_wrap .btn {
			width: 19%;
			height: 40%;
			display: block;
			background: url(../img/common/ir_img.gif) repeat top left;
			position: absolute;}
			
		.menu_wrap .btn_01 { top: 41%; left: 12%;}
		.menu_wrap .btn_02 { top: 13%; left: 42%; width: 18%;}
		.menu_wrap .btn_03 { top: 41%; right: 12%;}
			
.visual_wrap .vr_btn {
	width: 98px;
	display: block;
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: -94px}

.visual_wrap .vr_btn2 {
	width: 98px;
	display: block;
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: 12px;}

					
.banner { width: 100%; max-width: 640px; margin: 0px auto;}

.banner img { display: block; width: 100%;}

.banner a {
	width: 25%;
	height: 100%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.banner a.btn_01 { top: 0px; left: 0px;}
.banner a.btn_02 { top: 0px; left: 25%;}
.banner a.btn_03 { top: 0px; left: 50%;}
.banner a.btn_04 { top: 0px; right: 0px;}