@charset "UTF-8";

/* **************************************************

Name: rotation_banner.css

Description: CSS for Rotation Banner Module - 965px

Create: 2014.XX.XX
Update: XXXX.XX.XX

Copyright 2014 Hitachi, Ltd.

***************************************************** */



/* content===========================================

[-] Rotation banner module

===================================================== */



/* [-] Rotation banner module
=========================================================================================== */

#RotationBanner {
	padding: 25px 0 10px 0;
	background-color: #f2f2f2;
	border-top: solid 1px #fff;
	overflow: hidden;
	zoom: 1;
}

.JS #RotationBanner {
	padding-bottom: 25px;
}

#RotationBanner #SliderArea {
	position: relative;
	width: 965px;
	margin: 0 auto;
	overflow: hidden;
}

#RotationBanner ul {
	width: 980px;
}

.JS #RotationBanner ul {
	position: relative;
	width:5000px;
}

#RotationBanner ul:after {
	content: "";
	display: block;
	clear: both;
}

#RotationBanner li {
	float: left;
	width: 230px;
	margin: 0 15px 15px 0;
}

.JS #RotationBanner li {
	margin-bottom: 0;
}

#RotationBanner a {display: block;}
#RotationBanner a:link,
#RotationBanner a:visited,
#RotationBanner a:hover,
#RotationBanner a:active {text-decoration: none;}

#RotationBanner strong {
	display: block;
	font-size: 90%;
	line-height: 120%;
	color: #fff;
	background-image: url(../../../image/jp/r1/icon/icon_link_right_l_white.gif);
	background-repeat: no-repeat;
	background-position: right center;
	height:43px; overflow:hidden;
}
* html #RotationBanner strong {cursor: pointer;}
*:first-child+html #RotationBanner strong {cursor: pointer;}

#RotationBanner a:link strong,
#RotationBanner a:visited strong {
	padding: 0 22px 0 15px;
	background-color: #e60027;
	border-right: solid 3px transparent;
}

#RotationBanner a:hover strong,
#RotationBanner a:active strong {
	padding: 0 24px 0 15px;
	background-color: #b1000e;
	border-right: solid 1px transparent;
}
* html #RotationBanner a:link strong,
* html #RotationBanner a:visited strong {
	padding: 0 24px 0 15px;
	background-position: 98.5% 50%;
	border-right: none 0;
}
* html #RotationBanner a:hover strong,
* html #RotationBanner a:active strong {
	padding: 0 24px 0 15px;
	background-position: 99.5% 50%;
	border-right: none 0;
}
*:first-child+html #RotationBanner a:link strong,
*:first-child+html #RotationBanner a:visited strong {
	padding: 0 24px 0 15px;
	background-position: 98.5% 50%;
	border-right: none 0;
}
*:first-child+html #RotationBanner a:hover strong,
*:first-child+html #RotationBanner a:active strong {
	padding: 0 24px 0 15px;
	background-position: 99.5% 50%;
	border-right: none 0;
}

#RotationBanner span {
	display: table-cell;
	height: 3em;
	vertical-align: middle;
}

* html #RotationBanner span {
	display: block;
	padding-top: 5px;
}

*:first-child+html #RotationBanner span {
	display: block;
	padding-top: 5px;
}

#RotationBanner #SlideButton {
	width: 85px;
	margin: 10px auto -15px;
	overflow: hidden;
}

#RotationBanner #SlideButton div {
	float: left;
	width: 25px;
	height: 25px;
	overflow: hidden;
}

#RotationBanner #SlideButtonStop,
#RotationBanner #SlideButtonRight {
	margin-left: 5px;
}

#RotationBanner #SlideButton div a {
	display: block;
	width: 25px;
	height: 50px;
}

#RotationBanner #SlideButton div a:link,
#RotationBanner #SlideButton div a:visited { margin-top: 0; }
#RotationBanner #SlideButton div a:hover,
#RotationBanner #SlideButton div a:active { margin-top: -25px; }








/**/
#RotationMenu {
	min-width: 965px;
	padding:5px 0 0;
	overflow: hidden;
	zoom: 1;
}

.JS #RotationMenu {
	padding-bottom: 25px;
}

#RotationMenu #menuSliderArea {
	position: relative;
	width: 965px;
	margin: 0 auto;
	overflow: hidden;
}

#RotationMenu ul {
	width: 980px;
}

.JS #RotationMenu ul {
	position: relative;
	width: 5000px;
}

#RotationMenu ul:after {
	content: "";
	display: block;
	clear: both;
}

#RotationMenu li {
	overflow:hidden;
	float: left;
	width: 230px;
	height: 230px;
	margin: 0 15px 15px 0;
	border-radius:5px;
}

.JS #RotationMenu li {
	margin-bottom: 0;
}

#RotationMenu a {display: block;}
#RotationMenu a:link,
#RotationMenu a:visited,
#RotationMenu a:hover,
#RotationMenu a:active {text-decoration: none;}

#RotationMenu strong {
	display: block;
	font-size: 90%;
	line-height: 120%;
	color: #fff;
	background-image: url(../../../image/ko/r1/icon/icon_link_right_l_white.html);
	background-repeat: no-repeat;
	background-position: right center;
}
* html #RotationMenu strong {cursor: pointer;}
*:first-child+html #RotationMenu strong {cursor: pointer;}

#RotationMenu a:link strong,
#RotationMenu a:visited strong {
	height:45px;
	padding: 0 22px 0 15px;
	background-color: #000;
	border-right: solid 3px transparent;
	position:relative;
	top:-45px;
}

#RotationMenu a:hover strong,
#RotationMenu a:active strong {
	padding: 0 24px 0 15px;
	background-color: #b1000e;
	border-right: solid 1px transparent;
}
* html #RotationMenu a:link strong,
* html #RotationMenu a:visited strong {
	padding: 0 24px 0 15px;
	background-position: 98.5% 50%;
	border-right: none 0;
}
* html #RotationMenu a:hover strong,
* html #RotationMenu a:active strong {
	padding: 0 24px 0 15px;
	background-position: 99.5% 50%;
	border-right: none 0;
}
*:first-child+html #RotationMenu a:link strong,
*:first-child+html #RotationMenu a:visited strong {
	padding: 0 24px 0 15px;
	background-position: 98.5% 50%;
	border-right: none 0;
}
*:first-child+html #RotationMenu a:hover strong,
*:first-child+html #RotationMenu a:active strong {
	padding: 0 24px 0 15px;
	background-position: 99.5% 50%;
	border-right: none 0;
}

#RotationMenu span {
	display: table-cell;
	height: 3em;
	vertical-align: middle;
}

* html #RotationMenu span {
	display: block;
	padding-top: 5px;
}

*:first-child+html #RotationMenu span {
	display: block;
	padding-top: 5px;
}

#RotationMenu #menuSlideButton {
	width: 85px;
	margin: 10px auto -15px;
	overflow: hidden;
}

#RotationMenu #menuSlideButton div {
	float: left;
	width: 25px;
	height: 25px;
	overflow: hidden;
}

#RotationMenu #menuSlideButtonStop,
#RotationMenu #menuSlideButtonRight {
	margin-left: 5px;
}

#RotationMenu #menuSlideButton div a {
	display: block;
	width: 25px;
	height: 50px;
}

#RotationMenu #menuSlideButton div a:link,
#RotationMenu #menuSlideButton div a:visited {
	margin-top: 0; 
}
#RotationMenu #menuSlideButton div a:hover,
#RotationMenu #menuSlideButton div a:active {
	margin-top: -25px;
}