@charset "utf-8";

a{outline:none;}

html{/*overflow-y:hidden;*/}

/* ------------------------------------------------------
 Academy main
------------------------------------------------------ */
#historyMain{ width:100%; position:relative; background:url(../img/main_bg_rep.jpg) center top repeat-x #000;}
	#historyMainBg{ width:100%; min-height:715px; text-align:center; margin:0 auto; position: absolute; left:0; top:0; background:url(../img/main_bg.jpg) center top no-repeat; z-index:5;}
#historyMainWrap{ width:920px; margin:0 auto; padding-bottom:119px; position:relative; text-align: center;z-index:7;}

#historyMainCover{ width:100%; height:100%; background:#000; z-index:800; position:fixed; left:0; top:0; }

#historyMain .title{ padding-top:50px; margin-bottom:356px;opacity:0.0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";-moz-opacity:0.0;-khtml-opacity: 0.0;}
#historyMain .titleSub{ }
#historyMain #copy{ }

/*#historyMainBg,*/
#mainCar{opacity:0.0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";-moz-opacity:0.0;-khtml-opacity: 0.0}


	/* Social Button
	------------------------------------------------------ */
	#socialBtnHis{height:40px; position:absolute; left:344px;bottom:40px; }
	#socialBtnHis ul {width: 223px;height: 40px;list-style: none;position: relative;}
	#socialBtnHis ul li {top: 0px;	position: absolute;}
	
	#socialBtnHis ul li .iconSns { text-align: left;}
	#socialBtnHis ul li .iconSns a { display: block;width: 40px;height: 40px;background: url(../img/social/icon_sns.png) no-repeat;font-size: 0px;text-indent: -9999px;line-height: 0;}
	
	#socialBtnHis ul .snsF {left: 0px;}
	#socialBtnHis ul .snsG {left: 61px;}
	#socialBtnHis ul .snsT {left: 122px;}
	#socialBtnHis ul .snsM {left: 183px;}
	
	#socialBtnHis ul .snsF .iconSns a {background-position: 0px 0px;}
	#socialBtnHis ul .snsF .iconSns a:hover {background-position: 0px -40px;}
	
	#socialBtnHis ul .snsG .iconSns a {background-position: -61px 0px;}
	#socialBtnHis ul .snsG .iconSns a:hover {background-position: -61px -40px;}
	
	#socialBtnHis ul .snsT .iconSns a {background-position: -122px 0px;}
	#socialBtnHis ul .snsT .iconSns a:hover {background-position: -122px -40px;}
	
	#socialBtnHis ul .snsM .iconSns a {background-position: -183px 0px;}
	#socialBtnHis ul .snsM .iconSns a:hover {background-position: -183px -40px;}
	
	#socialBtnHis ul li .popSns {
		height: 46px; width:210px;text-align: center;
		margin: -75px 0px 0px -85px;	padding: 0px 10px;
		background: url(../img/social/bg_sns_f.png) no-repeat;
		/*display: none;*/
		margin-left:-9999px;
	}
	#socialBtnHis ul .snsF .popSns {}
	#socialBtnHis ul li .popSnsIn {	margin: 0px auto;	width: 103px;	padding-top: 9px;text-align: center;display: block;}


/* ------------------------------------------------------
 History Contents
------------------------------------------------------ */
#historyCont{ background-color:#232323;}
#historyContWrap{ width:1000px; margin:0 auto; position: relative;}

#historyTimeline{ height:3200px; }

	/* Table
	------------------------------------------------------ */
	#historyTable{ width:340px; float:left; padding-top:80px; background: url(../img/table/cTable_bg.png) no-repeat; position:relative; z-index:5;}
	#historyTable dt,#historyTable dd{ opacity:0.0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";-moz-opacity:0.0;-khtml-opacity: 0.0;}

	#historyTable dt{ width:110px; float:left; clear:both;}
	#historyTable dd{ width:230px; float:right; margin-bottom:0px;}

	#historyTable #hTableCover{ width:340px; height: inherit; position: absolute; left:0; top:0; z-index:6;} 
	
	/* Panels
	------------------------------------------------------ */
	#historyPanels{width:620px; float:right; position:relative; margin-top:80px;z-index:10;}
	#historyPanels .hPanel,#historyPanels .hBanner,#historyPanels .hThumb{ width:290px; position:absolute; opacity:0.0;filter: alpha(opacity=0);-ms-filter: "alpha(opacity=0)";-moz-opacity:0.0;-khtml-opacity: 0.0;}/* */
		#historyPanels .hPanel{ height:190px;}
			#historyPanels .hPanel .item,#historyPanels .hBanner .item{ width:inherit; height:inherit; position:relative;}
			#historyPanels .hPanel .item img,#historyPanels .hBanner .item img{
				-moz-transition: -moz-transform 0.2s linear;
				-webkit-transition: -webkit-transform 0.2s linear;
				-o-transition: -o-transform 0.2s linear;
				-ms-transition: -ms-transform 0.2s linear;
				transition: transform 0.2s linear;}
			#historyPanels .hPanel.focusOn .item img,#historyPanels .hBanner.focusOn .item img{
				/*-moz-transform: rotate(-2deg);
				-webkit-transform: rotate(-2deg);
				-o-transform: rotate(-2deg);
				-ms-transform: rotate(-2deg);*/
				/*-webkit-transform: scale(1.01);
				-moz-transform: scale(1.01);
				-o-transform: scale(1.01);
				-ms-transform: scale(1.01);
				transform: scale(1.01);*/}
			#historyPanels .hPanel.focusOut .item img,#historyPanels .hBanner.focusOut .item img{
				-webkit-transform: scale(0.98);
				-moz-transform: scale(0.98);
				-o-transform: scale(0.98);
				-ms-transform: scale(0.98);
				transform: scale(0.98);}
			#historyPanels .hPanel .item .cover,#historyPanels .hBanner .item .cover{ width:inherit; height:inherit; position: absolute; left:0; bottom:0;}
			#historyPanels .hBanner .item .cover{min-height:330px;}

			#historyPanels #hPanel1{ left:0px; top:0px;}
			#historyPanels #hPanel2{ left:330px; top:220px;}
			#historyPanels #hPanel3{ left:0px; top:255px;}
			#historyPanels #hPanel4{ left:0px; top:550px;}
			#historyPanels #hPanel5{ left:330px; top:700px;}
			#historyPanels #hPanel6{ left:0px; top:1050px;}
			#historyPanels #hPanel7{ left:330px; top:1330px;}
			#historyPanels #hPanel8{ left:0px; top:1580px;}
			#historyPanels #hPanel9{ left:330px; top:1970px;}
			#historyPanels #hPanel10{ left:0px; top:2140px;}
			#historyPanels #hPanel11{ left:330px; top:2400px;}
			#historyPanels #hPanel12{ left:330px; top:2630px;}
			#historyPanels #hPanel13{ left:0px; top:2770px;} 

		#historyPanels .hBanner{ min-height:300px;}
			#historyPanels #hBanner1{ left:330px; top:1000px;}
			#historyPanels #hBanner2{ left:330px; top:1630px;}
			#historyPanels #hBanner3{ left:0px; top:2380px;}

		#historyPanels .hThumb{ min-height:200px;}
			#historyPanels #hThumb1{ left:330px; top:-10px;}
			#historyPanels #hThumb2{ left:330px; top:495px;}
			#historyPanels #hThumb3{ left:0px; top:830px;}
			#historyPanels #hThumb4{ left:0px; top:1345px;}
			#historyPanels #hThumb5{ left:0px; top:1875px;}
			#historyPanels #hThumb6{ left:330px; top:2185px;}
			#historyPanels #hThumb7{ left:330px; top:2905px;}

	/* Inherited Technology
	------------------------------------------------------ */
	#inheritedTech{ clear:both; width:920px; margin:0 auto; padding:50px 0;}


/* ------------------------------------------------------
 History Footer
------------------------------------------------------ */
#historyFooter{ background:#000; padding-top:25px;}
#historyFooterWrap{ width:920px; margin:0 auto;}

.relLinks{ width:920px; margin:0 auto;}
	.relLinks .clm1{ }
	.relLinks .clm1 li{ width:440px; margin-left:auto; margin-right:auto;}

	.relLinks .clm2{ }
	.relLinks .clm2 .li{ width:440px;}
	.relLinks .clm2 .left{ float:left; clear:both;}
	.relLinks .clm2 .right{ float:right;}

	.relLinks .conv{ }
	.relLinks .conv li{ display:block; width:230px; height:130px; float:left;}

#historyFooter .relLinks{ padding-bottom:60px;}

#historyFooter #footCopy{ position:relative;}
#historyFooter #copyright{ text-align:center;}
#historyFooter #page-top{ position:absolute; right:0; top:40px;}


/* ------------------------------------------------------
SP Mode Jump btn
------------------------------------------------------ */
#spJumpBtn{ width:100%; height:110px; background:#000; text-align:center; position:relative; z-index:999;}
#spJumpBtn a{ display:block; font-size:32px; font-weight:bold; color:#FFF; text-decoration:none;line-height:110px; width:100%; position:absolute; left:0; top:0;
background: #3d3d3d; /* Old browsers */
background: -moz-linear-gradient(top,  #3d3d3d 0%, #2b2b2b 11%, #232323 50%, #000000 51%, #000000 51%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(11%,#2b2b2b), color-stop(50%,#232323), color-stop(51%,#000000), color-stop(51%,#000000), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3d3d3d 0%,#2b2b2b 11%,#232323 50%,#000000 51%,#000000 51%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3d3d3d 0%,#2b2b2b 11%,#232323 50%,#000000 51%,#000000 51%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3d3d3d 0%,#2b2b2b 11%,#232323 50%,#000000 51%,#000000 51%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #3d3d3d 0%,#2b2b2b 11%,#232323 50%,#000000 51%,#000000 51%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
}


/*-----------------------------------------------------------------------------
 colorBox
-----------------------------------------------------------------------------*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
#cboxOverlay{overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer; outline:none;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
#cboxContent{margin-top:35px;background:#FFF; padding:0px;
/*border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;behavior: url("http://mb-live.jp/share/cms/css/PIE.htc");*/}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{ background:#fff;}
#cboxLoadedContent img{ margin:0;}
#cboxTitle{position:absolute; top:102%;/*top:-20px;*/ left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; display:none !important;}
#cboxLoadingGraphic{background:url(../../../../share/cms/img/asset/loadimg.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}

#cboxPrevious,#cboxNext{background:url(../../../../share/cms/img/asset/btn_cbox_control.png) no-repeat;}
#cboxPrevious{position:absolute; top:50%; left:-38px; margin-top:-32px; width:28px; height:65px; text-indent:-9999px;background-position:top left;outline:none;}
#cboxPrevious:hover{background-position:bottom left; outline:none;}
#cboxNext{position:absolute; top:50%; right:-38px; margin-top:-32px; width:28px; height:65px; text-indent:-9999px;background-position:top right;outline:none;}
#cboxNext:hover{background-position:bottom right; outline:none;}

#cboxClose{position:absolute; top:-35px; right:0px; display:block; background:url(../img/close.png) no-repeat top center; width: 25px;height: 25px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}