@charset "utf-8";

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

.content_wrap { background: url(../img/common/main_bg.jpg) repeat-y top left; background-size: contain;}
.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;}
.rolling_wrap .mv_wrap { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.mv_wrap .mvBg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,.4); display: block; z-index:1}
.mv_wrap video { position: relative; }
.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.pop_02 { z-index: 6;}
.rolling_wrap li.pop_01 { 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.pop_02 .btn1 { display: block; width: 47%; height: 12%; position: absolute; top: 78%; left: 27%; background: url(../img/common/ir_img.gif) repeat top left;}
.rolling_wrap li.pop_02 .btn2 { display: block; width: 47%; height: 12%; position: absolute; top: 78%; left: 23%; 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%; z-index: 2;}
.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 .link_wrap {width: 100%; height: 13px; text-align: center; position: absolute; bottom: 25px; left: 0px; z-index: 9;}	
.visual_wrap .link_wrap a { display: inline-block; width: 15px; height: 15px; background: url(../img/main/bulit_off.png) no-repeat top left; background-size: cover; margin-left: 3px; margin-right: 3px;}
.visual_wrap .link_wrap a.on { background-image: url(../img/main/bulit_on.png);}

.visual_wrap .prev_btn { width: 38px; height: 38px; display: block; position: absolute; bottom: 10px; left: 30%; z-index: 10;}
.visual_wrap .next_btn { width: 38px; height: 38px; display: block; position: absolute; bottom: 10px; right: 30%; z-index: 10;}

.vr_wrap { width: 100%; height: 100%; z-index: 8; position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,.3);}
.vr_wrap .wrap { widtH: 100%; position: absolute; left: 0px; top: 25%;}.vr_wrap .wrap .pbg{ display: block; width: 100%;}
.vr_wrap iframe { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.vr_wrap .cBtn { position: absolute; top: -40px; right: 0px; width: 40px;}
.vr_wrap .cBtn img { widtH: 100%;}

.prBtn { width: 10%; max-width: 73px; position: absolute; top: 10%; left: 60%;}
.prBtn img { display: block; width: 100%;}
.prBtn a {
	width: 50%;
	height: 100%;
	display: block;
	background: url(../img/common/ir_img.gif) repeat top left;
	position: absolute;}

.prBtn a.nth_01 { top: 0px; left: 0%;}
.prBtn a.nth_02 { top: 0px; right: 0%;}


	.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 .wrap { width: 100%; height: auto; overflow: hidden; position: relative;}
.pr_wrap .wrap ul { width: 400%; position: relative; margin-bottom: 30px;}

.pr_wrap li { width: 25%; position: relative; float: left; }
.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: 80%; max-width: 80px; position: absolute; bottom: 15%; left: 7%; z-index: 9;}
.pr_wrap .btnWrap a { display: block; width: 50%; height:100%; position: absolute; top: 0px;}
.pr_wrap .btnWrap a.prev { left: 0px;}
.pr_wrap .btnWrap a.next { right: 0px;}
.pr_wrap .btnWrap img { width: 100%;}

.pr_wrap .view_btn { width: 25%; display: block; margin: 0px auto 50px;}
.pr_wrap .view_btn img { width: 100%;}

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

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

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

.banner a.nth_01 { top: 28%; left: 2%;}
.banner a.nth_02 { top: 28%; left: 23%;}
.banner a.nth_03 { top: 28%; left: 41%;}
.banner a.nth_04 { top: 28%; left: 61%;}
.banner a.nth_05 { top: 28%; left: 80%;}
.banner a.nth_06 { bottom: 0px; right: 0px;}
	
.bn1 { width: 100%; max-width: 640px; position: relative; margin: 0px auto;}
.bn1 img { display: block; width: 100%;}

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

.bn1 a.nth_01 { top: 8%; left: 7%;}
.bn1 a.nth_02 { top: 52.5%; right: 7%;}
	
.bn2 { width: 100%; max-width: 640px; position: relative; margin: 0px auto;}
.bn2 img { display: block; width: 100%;}

.bn2 a {
	width: 50%;
	height: 100%;
	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 { top: 0px; right: 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%;}

.popupWrap { width: 100%; height: 100%; position: fixed; top: 0%; left: 0%; padding-top: 60px; z-index: 100; background-color: rgba(0,0,0,.3)}
.popupWrap ul { width: 80%; position: relative; background-color: #fff; margin: 0px auto 0px; max-width: 495px;}
.popupBox {width: 100%;	position: absolute; top: 0px; left: 0px; opacity:0; transition: all .5s; background-color: #fff;}
.popupWrap .view { opacity: 1; transition: opacity .5s; z-index: 102; position: relative;}
		
	.popupBox .imgWrap { display: block; width: 100%; max-width: 600px; position: relative;}
	.popupBox img { display: block; widtH: 100%;}
	#popup1 .imgWrap a.btn_01 {width: 62%; height: 10%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 40%; left: 19%;}
	#popup1 .imgWrap a.btn_02 {width: 62%; height: 10%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 87%; left: 19%;}
	
	#popup2 .imgWrap a.btn_01 {width: 73%; height: 10.5%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 31.5%; left: 14%;}
	#popup2 .imgWrap a.btn_02 {width: 73%; height: 10.5%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 42.5%; left: 14%;}
	#popup2 .imgWrap a.btn_03 {width: 73%; height: 10.5%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 53.5%; left: 14%;}

	#popup3 .imgWrap a.btn_01 {width: 73%; height: 13%; display: block; background: url(../img/common/ir_img.gif) repeat top left; position: absolute; top: 77%; left: 14%;}
	
	.popupBox .pcBtn { display: block; width: 100%; text-align: center; padding: 15px 0px; background-color: #fff; font-size: 20px; line-height: 24px; position: fixed; bottom: 0px; left: 0px; color: #000; border-bottom: 1px solid #000;}

.popupWrap .btnWrap { width: 80%; max-width: 495px; height: 30px; margin: 0px auto; position: relative; top: 0px; left: 0px; background-color: #979797;}
.popupWrap .btnWrap a { color: #fff; font-size: 14px; font-weight: 400; line-height: 30px;}
.popupWrap .closeBtn { position: absolute; top: 0px; right: 10px;}
.popupWrap .cookieBtn { position: absolute; top: 0px; left: 10px;}

.popupWrap .btnWrap2 { width: 100%; position: absolute; top: 30%; left: 0px; z-index: 101;}
.popupWrap .btnWrap2 a { display:block; width: 10%;}
.popupWrap .btnWrap2 a.nextBtn { position: absolute; top: 0px; right: 0px;} 
.popupWrap .btnWrap2 a img { widtH: 100%;}