/* MAIN
============================================== */

/* main rolling visual
----------------------------------------------
#main-rolling
	.visual
		.slider
			ul
				li * 4
					.system
						img
						a * 6
							span
							em
	.menu
		.arow
		.pager
			a * 4
---------------------------------------------- */

#content { min-height: 0; }

#main-rolling { position: relative; width: 100%; height: 667px; margin-top: 25px; }
#main-rolling .visual { 
	position: absolute; top: 0; z-index: 1; 
	overflow: hidden; width: 100%; height: 469px; 
	/*background-color: #ffffff; */
}

#main-rolling .system { position: relative; width: 1024px; height: 469px; }
#main-rolling .system img { display: block; }
#main-rolling .system a,
#main-rolling .system a span,
#main-rolling .system a em   { 
	display: block; position: absolute; z-index: 1; left: 0; top: 0;
	width: 180px; height: 180px; line-height: 180px; overflow: hidden; 
	text-indent: -999em;
}

#main-rolling .system a {}
#main-rolling .system a span,
#main-rolling .system a em   { 
	background: url("main/main-system-icons.png") no-repeat; 
	-webkit-transition: all 200ms ease-in-out;
	   -moz-transition: all 200ms ease-in-out;
	     -o-transition: all 200ms ease-in-out;
	        transition: all 200ms ease-in-out;
}
#main-rolling .system a span { z-index: 1; opacity: 1; transform: scale(1.0); }
#main-rolling .system a em   { z-index: 2; opacity: 0; transform: scale(0.833); }

#main-rolling .system a.active,
#main-rolling .system a:hover { z-index: 10; }
#main-rolling .system a.active span,
#main-rolling .system a:hover  span { z-index: 1; opacity: 0; transform: scale(1.2); }
#main-rolling .system a.active em,
#main-rolling .system a:hover  em   { z-index: 2; opacity: 1; transform: scale(1.0); }

#main-rolling .system a.menu-1 { left: 50px; top:  150px; }
#main-rolling .system a.menu-1 span { background-position: 0    0; }
#main-rolling .system a.menu-1 em   { background-position: 100% 0; }

#main-rolling .system a.menu-2 { left: 200px;  top: 150px; }
#main-rolling .system a.menu-2 span { background-position: 0    20%; }
#main-rolling .system a.menu-2 em   { background-position: 100% 20%; }

#main-rolling .system a.menu-3 { left: 350px; top: 150px; }
#main-rolling .system a.menu-3 span { background-position: 0    40%; }
#main-rolling .system a.menu-3 em   { background-position: 100% 40%; }

#main-rolling .system a.menu-4 { left: 500px; top: 150px; }
#main-rolling .system a.menu-4 span { background-position: 0    60%; }
#main-rolling .system a.menu-4 em   { background-position: 100% 60%; }

#main-rolling .system a.menu-5 { left: 650px; top: 150px; }
#main-rolling .system a.menu-5 span { background-position: 0    80%; }
#main-rolling .system a.menu-5 em   { background-position: 100% 80%; }

#main-rolling .system a.menu-6 { left: 800px; top: 150px; }
#main-rolling .system a.menu-6 span { background-position: 0    100%; }
#main-rolling .system a.menu-6 em   { background-position: 100% 100%; }

#main-rolling .slider { position: relative; overflow: hidden; }
#main-rolling .slider ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }
#main-rolling .slider li { float: left; }

#main-rolling .menu { 
	position: absolute; bottom: 0; z-index: 2;
	width: 100%; padding-top: 4px; background-color: #ff8000; 
}
#main-rolling .menu .arrow {
	position: absolute; top: -6px; left: 132px;
	width: 12px; height: 6px; font-size: 0; overflow: hidden;
	background: url("main/rolling-menu-arrow.png") no-repeat;
}

/*#main-rolling .menu:before {
	content:"";
	position: absolute;
	top: -8px; left: 130px;
	border-width: 0 8px 8px;
	border-style: solid;
	border-color: #ff8000 transparent;
	display: block; width: 0;
}*/

#main-rolling .menu .pager { width: 100%; overflow: hidden;	height: 194px;   }
#main-rolling .menu .item {
	display: block; width: 256px; height: 194px; float: left;
	line-height: 194px; text-indent: -999em; overflow: hidden; 
	background: url("main/rolling-menu.png") no-repeat;
	-webkit-transition: background-position 250ms ease;
	   -moz-transition: background-position 250ms ease;
	     -o-transition: background-position 250ms ease;
	        transition: background-position 250ms ease;
}

#main-rolling .menu .item-1 { background-position: 0      100%; }
#main-rolling .menu .item-2 { background-position: -256px 100%; }
#main-rolling .menu .item-3 { background-position: -512px 100%; }
#main-rolling .menu .item-4 { background-position: -768px 100%; }

#main-rolling .menu .item-1.active { background-position: 0      0; }
#main-rolling .menu .item-2.active { background-position: -256px 0; }
#main-rolling .menu .item-3.active { background-position: -512px 0; }
#main-rolling .menu .item-4.active { background-position: -768px 0; }

#main-rolling img.mobile { display: none; }
#main-rolling img.pc { display: block; width: 1024px; height: 469px; }



/* English Version */

.en #main-rolling .system a span,
.en #main-rolling .system a em   { 
	background-image: url("../en/i/main/main-system-icons.png"); 
}
.en #main-rolling .menu .item {
	background-image: url("../en/i/main/rolling-menu.png");
}


/* Smartphone */

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

/*@media screen and (max-device-width : 800px) {*/

	#content .container { width: 100%; }

	#main-rolling img.mobile { display: block; max-width: 100%; height: auto !important; }
	#main-rolling img.pc { display: none; }

	#main-rolling .system { display: none; }

	#main-rolling { margin-top: 0; height: auto; min-height: 344px; }
	#main-rolling .visual { height: auto; }

	#main-rolling .system { position: relative; width: 100%; height: auto; }	

	#main-rolling .menu { 
		bottom: 5%; left: 50%;
		width: 0; overflow: visible; 
	}
	#main-rolling .menu .arrow { display: none; }
	#main-rolling .menu .pager { width: 320px; margin-left: -60px; overflow: visible; height: auto; }
	#main-rolling .menu .item, .en #main-rolling .menu .item {
		float: left; text-indent: -999em; font-size: 1px; overflow: hidden; 
		width: 16px; height: 16px; line-height: 16px; border-radius: 8px;
		margin: 0 5px;
		
		background: #fff;
		background: -webkit-linear-gradient(#fff, #ccc);
		background:         linear-gradient(#fff, #ccc);
		box-shadow: 0 0 2px 1px rgba(0,0,0,0.5);

	}

	#main-rolling .menu a.item:hover,
	#main-rolling .menu a.item.active { 
		background: #ffa200; 
		background: -webkit-linear-gradient(#ffd002, #ff5600);
		background:         linear-gradient(#ffd002, #ff5600);
	}

}