@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.ev_00 { z-index: 7;}
.rolling_wrap li.ev_01 { z-index: 6;}
.rolling_wrap li.ev_02 { z-index: 5;}
.rolling_wrap li.list_01 { z-index: 4;}
.rolling_wrap li.list_02 { z-index: 3;}
.rolling_wrap li.list_03 { z-index: 2;}
.rolling_wrap li.list_04 { z-index: 1;}
.rolling_wrap li.ev_00 .btn_01 { display: block; width: 68%; height: 13%; position: absolute; top: 34%; left: 16%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li.ev_00 .btn_02 { display: block; width: 68%; height: 13%; position: absolute; top: 47.5%; left: 16%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li.list_04 .btn { display: block; width: 64%; 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;}
	
	.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: 20%;
		max-width: 104px;
		position: absolute;
		bottom: 1px;
		right: 0px;
		z-index: 9;}
		
		.visual_wrap .btn_wrap img { display: block; width: 100%;}
		 
		.visual_wrap .btn_wrap a { display: block; width: 50%; height: 100%; position: absolute; top: 0px;}
		
		.visual_wrap .btn_wrap a.prev_btn { left: 0px;}
		.visual_wrap .btn_wrap a.next_btn { right: 0px;}

.pr_wrap { width: 100%; max-width: 640px; margin: 0px auto; position: relative;}		
.pr_wrap img { display: block; width: 100%;}
.pr_wrap li { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; transition: all .5s}
.pr_wrap li.nth-child(1) { z-index: 6;}
.pr_wrap li.nth-child(2) { z-index: 5;}
.pr_wrap li.nth-child(3) { z-index: 4;}
.pr_wrap li.view { opacity: 1; transition: all .5s; z-index: 7;}
.pr_wrap .btnWrap { width: 16%; height: 17%; position: absolute; top: 70%; left: 6%; z-index: 9;}
.pr_wrap .btnWrap a { display: inline-block; width: 50%; height: 100%; background: url(../img/common/ir_img.gif) repeat top left;}

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

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

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

.banner a.nth_01 { top: 0px; left: 0%;}
.banner a.nth_02 { top: 0px; left: 33.3%;}
.banner a.nth_03 { top: 0px; right: 0%;}
.banner a.nth_04 { bottom: 0px; left: 0%;}
.banner a.nth_05 { bottom: 0px; left: 33.3%;}
.banner a.nth_06 { bottom: 0px; right: 0px;}
	
.bn2 { width: 100%; max-width: 640px; position: relative; margin: 0px auto;}

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

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

.bn2 a.nth_01 { top: 0px; left: 0%;}
.bn2 a.nth_02 { bottom: 0px; left: 0%;}
	
	.num_list { 
		width: 90px;
		height: 15px;
		position: absolute;
		bottom: 25px;
		left: 50%;
		margin-left: -40px;
		text-align: center;}
		
		.num_list a {
			width: 15px;
			height: 15px;
			margin-right: 2px;
			display: inline-block;
			background: url(../img/main/bulit_off.png) no-repeat top left;}
			
		.num_list a.on { background-image: url(../img/main/bulit_on.png);}
		
	.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;}

					
.ev_wrap { position: relative; width: 100%; max-width: 640px; margin: 0px auto;}

.ev_wrap img,
.ev_wrap a { display: block; width: 100%;}
					


 .kko_btn {
	display: block;
	width: 100%;
	margin-bottom: 10px;}
	
	.kko_btn img { width: 100%;}

 .emh_btn {
	display: block;
	width: 100%;
	padding-top: 4px;
	margin-bottom: 10px;}
	
	.emh_btn img { width: 100%;}


.popup_wrap {
	width: 84%;
	position: absolute;
	top: 5%;
	left: 8%;
	z-index: 9;}
	
	.popup_wrap img { width: 100%; display: block;}

	.popup_wrap .btn_01 {
		width: 60%;
		height: 14%;
		display: block;
		background: url(../img/common/ir_img.gif) repeat top left;
		position: absolute;
		top: 74%;
		left: 20%;}

	.popup_wrap .close_btn {
		width: 7%;
		height: 7%;
		display: block;
		background: url(../img/common/ir_img.gif) repeat top left;
		position: absolute;
		top: 0px;
		right: 0px;}

	.popup_wrap .cookie_btn {
		width: 100%;
		height: 9%;
		display: block;
		background: url(../img/common/ir_img.gif) repeat top left;
		position: absolute;
		bottom: 0px;
		left: 0px;}