@charset "UTF-8";

/* ----------------------------------------------------------------
    Layout
----------------------------------------------------------------- */

/* header
------------------------------------------------ */
#headerArea{
	position:fixed;
	width:100%;
	background:url(/oitrack/common/images/bg_headerarea.png) repeat-x top left;
	z-index:100000000000;
}

#headerAreaBody{
	max-width:984px;
	margin:0 auto;
	overflow:hidden;
}

#headerAreaBody #logo{
	float:left;
	margin:0 1.016% 0 0;
}

.logoType2{
	display:none;
}

#headerAreaBody #app1,
#headerAreaBody #googlePlay1,
#headerAreaBody #apk1{
	float:right;
	margin:17px 0 21px 0.609%;
}

#headerAreaBody #menuArea{
	float:right;
	position:relative;
	margin:21px 0.813% 0 1.524%;
}

#headerAreaBody #menuArea ul li#normal{
	display :block;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	cursor:pointer;
}

#headerAreaBody #menuArea ul li#normal ul li#language{
	position:absolute;
	top:4px;
	left:15px;
	font-size:88%;
}

#headerAreaBody #menuArea ul li#active{
	padding:0 0 10px 0;
	display:none;
	position:absolute;
	top:0;
	left:-5px;
	max-width:165px;
	overflow:hidden;
	background:url(/oitrack/common/images/bg_pulldown_03.png) no-repeat bottom left;
}

#headerAreaBody #menuArea ul li#active p{
	cursor:pointer;
}

#headerAreaBody #menuArea ul li#active p{
	padding:5px 0 0 20px;
	min-height:27px;
	background:url(/oitrack/common/images/bg_pulldown_01.png) no-repeat top left;
	font-size:88%;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane{
	max-width:165px;
    height:203px;
	overflow:hidden;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane ul li{
	padding:5px 0 0 25px;
	font-size:88%;
	background:url(/oitrack/common/images/bg_pulldown_02.png) repeat-y top left ;
	cursor:pointer;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane ul li.focus{
	color:#3d72b3;
	background:url(/oitrack/common/images/bg_pulldown_02_o.png) repeat-y top left;
	cursor:pointer;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane .jspVerticalBar{
    max-width:8px;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane .jspTrack{
    background:#d5d5d5;
}

#headerAreaBody #menuArea ul li#active div#scroll-pane .jspDrag{
    background:#3b6ead;
}

@media screen and (max-width:760px){	
	#headerAreaBody{
		margin:0;
		padding:0;
	}

	#headerAreaBody #logo{
		margin:0;
	}

	.logoType1{
		display:none;
	}

	.logoType2{
		display:block;
	}

	#headerAreaBody #app1,
	#headerAreaBody #googlePlay1,
	#headerAreaBody #apk1{
		float:none;
		display:none;
	}

	#headerAreaBody #menuArea{
		 margin:10px 0.813% 0 0;
	}
}


/* footer
------------------------------------------------ */
#footerArea{
	width:100%;
	background:#fff url(/oitrack/common/images/bg_footer.jpg) repeat-x top left;
}

#footerAreaBody{
	margin:0 auto;
	padding-bottom:18px;
	max-width:984px;
	line-height:1.2;
}

#footerAreaBody ul.listSocialArea{
	position:relative;
	float:left;
	padding:18px 0 0 0;
	width:30.487%;	
	text-align:left;
	letter-spacing:-0.4em;
}

#footerAreaBody ul.listSocialArea li{
	display:inline-block;
	*display:inline;
	font-size:6px;
	vertical-align:top;
	letter-spacing:normal;
	*zoom:1;
}

#footerAreaBody ul.listSocialArea li.twitter{
	margin-left:1.524%;
}

#footerAreaBody ul.listSocialArea li.fbLike{
   margin-left:1.524%;
}

#footerAreaBody ul#copyArea{
	float:right;
	margin:15px 0 0 0;
	width:68.731%;
	text-align:right;
	letter-spacing:-0.4em;
}

#footerAreaBody ul#copyArea li{
    display:inline;
	padding:0 8px;
	background:url(/oitrack/common/images/dotline_01.gif) repeat-y 0 0;
	font-size:68.75%;
	letter-spacing:normal;
    white-space:nowrap;
}

#footerAreaBody ul#copyArea li:first-child,
#footerAreaBody ul#copyArea li.first{
	padding-left:0;
	background:none repeat scroll 0 0 transparent;
}

@media screen and (max-width:640px){	
	#footerAreaBody{
		height:auto;
	}

	#footerAreaBody ul.listSocialArea{
		float:none;
		margin:0 0 10px 0;
		width:100%;
		text-align:center;
	}

	#footerAreaBody ul#copyArea{
		float:none;
		margin:0 0 10px 0;
		width:100%;
		text-align:center;
	}

	#footerAreaBody ul#copyArea li{
		display:block;
		padding:0 0 0 0;
		width:100%;
		background:none;
		font-size:48%;
	}
}


/* container
------------------------------------------------ */
#container p{
	margin-bottom:20px;
}

@media screen and (max-width:640px){	
	#container p{
		margin-bottom:3%;
	}
}


/* mainvisual
------------------------------------------------ */
#mainvisual{
	width:100%;
	background:url(/oitrack/images/index_bg_main.jpg) no-repeat top center;
	background-size:auto 100%;
}

#mainvisualBody{
	margin:0 auto;
	padding:190px 0 36px 0;
	width:984px;
}

#mainvisualBody ul li.leftAreaType1{
	float:left;
	margin-left:6.097%;
	width:43.902%;
}

#mainvisualBody ul li.leftAreaType1 ul li#title{	
	margin:10px 0 0 0;
	color:#231815;
	font-size:162.5%;
	font-weight:bold;
	line-height:1.3;
	text-shadow:2px 2px 2px #fff, 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff;
}

#mainvisualBody ul li.leftAreaType1 ul li#app{
	display:none;
}

#mainvisualBody ul li.rightAreaType1{
	float:right;
	margin-right:5.792%;
	width:42.886%;
}

#mainvisualBody ul li.rightAreaType1 img{
	max-width:100%;
}

@media screen and (max-width:1001px){	
	#mainvisualBody{
		width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
}

@media screen and (max-width:760px){
	#mainvisualBody{
		padding:124px 5.081% 18px 5.081%;
	}

	#mainvisualBody ul li.leftAreaType1,
	#mainvisualBody ul li.rightAreaType1{
		float:none;
		width:100%;
	}
	
	#mainvisualBody ul li.leftAreaType1{
		margin-left:0;		
	}

	#mainvisualBody ul li.leftAreaType1 ul li#app{
		margin-top:10px;
		display:block;
	}
	
	#mainvisualBody ul li.leftAreaType1 ul li#app ul li{
		margin:0 10px 10px 0;
		float:left;
	}
	
	#mainvisualBody ul li.leftAreaType1 ul li#app ul li img{
		max-width:100%;
	}

	#mainvisualBody ul li.rightAreaType1{
		margin-top:7%;
		margin-right:0;
	}
}



/* Heading
------------------------------------------------ */
.hdgLv1{
	background-color:#f8f8f8;
	background-image: -webkit-linear-gradient(top, #f8f8f8 95%, #f2f2f2);
	background-image: linear-gradient(to bottom, #f8f8f8 95%, #f2f2f2);
}

.hdgLv1Body{
	margin:0 auto;
	padding:134px 0 64px 0;
	width:984px;
}

.hdgLv1Body .hdg{
	font-size:281.25%;
	font-weight:bold;
	line-height:1.2;
}

.hdgLv1Body .hdg span{
	color:#4cd964;
	font-size:128.888%;	
}

@media screen and (max-width:1001px){
	.hdgLv1Body{
		padding-left:5.081%;
		padding-right:5.081%;
		width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
}

@media screen and (max-width:760px){
	.hdgLv1Body{
		padding:70px 5.081% 28px 5.081%;
	}
	
	.hdgLv1Body .hdg{
		font-size:175%;
	}
	
	.hdgLv1Body .hdg span{
		display:block;
		font-size:100%;
	}
}


/* Text
------------------------------------------------ */
.em01{
	color:#4cd964;
	font-size:125%;
	font-weight:bold;
	line-height:1.2;
}


/* List
------------------------------------------------ */
.listNotice01{
	margin-bottom:20px;
}

.listNotice01 > li{
	color:#312926;
	font-size:87.5%;
	text-indent: -10px;
	padding-left: 10px;
}


/* Btn
------------------------------------------------ */
.btn{
	margin:0;
	padding:12px 40px;
	border:1px solid #c2c2c2;
	display:inline-block;	
	border-radius:4px;
	background-color:#fff;
	text-align:center;
	text-decoration:none;
	font-size:100%;
	font-weight:bold;
	box-shadow:0 2px 1px #c2c2c2;
}

.btn span{
	padding-right:19px;
	display:block;
	background:url(/oitrack/common/images/icon_arrow_01.gif) no-repeat 100% 0.4em;
}

.btn.back{
	padding-left:50px;
	padding-right:50px;
}

.btn.back span{
	padding-right:0;
	padding-left:23px;
	background:url(/oitrack/common/images/icon_arrow_02.gif) no-repeat 0 0.3em;
}


/* Section
------------------------------------------------ */
.section{
	width:100%;
	background:url(/oitrack/common/images/bg_section.gif) no-repeat bottom center;	
}

.sectionBody{
	margin:0 auto;
	padding:60px 20px 40px 35px;
	width:929px;	
}

.sectionBody .hdg{
	margin-bottom:10px;
	font-size:250%;
	line-height:1.2;	
}

.sectionBody .hdg2{
	margin-bottom:15px;
	color:#4cd964;
	font-size:187.5%;
	font-weight:bold;
	line-height:1.2;
}

.sectionBody .colLayout .colLeft{
	float:left;
	width:49.192%;	
}

.sectionBody .colLayout .colLeft .em01{
	margin-bottom:20px;
}

.sectionBody .colLayout .colRight{
	float:right;
	width:47.362%;
}

.sectionBody .colLayout .colLeft img,
.sectionBody .colLayout .colRight img{
	max-width:100%;	
}

.sectionBody .colLayout.col2 .colLeft{
	margin-right:4.198%;
	width:47.9%;
}

.sectionBody .colLayout.col2 .colRight{
	width:47.9%;
}

@media screen and (max-width:1001px){
	.sectionBody{
		width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
}

@media screen and (max-width:640px){	
	.sectionBody{
		padding:5% 4% 2%;
	}
	
	.sectionBody .colLayout .colLeft,
	.sectionBody .colLayout .colRight,
	.sectionBody .colLayout.col2 .colLeft,
	.sectionBody .colLayout.col2 .colRight{
		float:none;
		width:100%;
	}
	
	.sectionBody .colLayout.col2 .colLeft{
		margin-right:0;
	}
	
	.sectionBody .colLayout .colLeft img,
	.sectionBody .colLayout .colRight img{
		width:100%;
	}
}


/* contentArea1
------------------------------------------------ */
#contentArea1Body > .image{
	float:left;
	width:288px;
}

#contentArea1Body > .image img{
	max-width:100%;	
}

#contentArea1Body > .column{
	float:right;
	width:100%
}

@media screen and (max-width:1001px){
	#contentArea1Body > .image{
		width:31.001%;
	}
	
	#contentArea1Body > .column{
		width:100%
	}
}

@media screen and (max-width:640px){
	#contentArea1Body > .image,
	#contentArea1Body > .column{
		float:none;
		width:100%;
	}
	
	#contentArea1Body > .image img{
		width:100%;
	}
}

#carousel{
float: right;
position:relative;
width:440px;
height:310px;
padding:0;
}

#carousel_area{
overflow:hidden;
width:440px;
}

#carousel_area ul{
position:relative;
}

.carousel_item{
float:left;
width:440px;
height:100%;
text-align:center;
}

.carousel_nav{
width:8%;
height:18%;
display:block;
position:absolute;
padding:2px 12px;
top:30%;
}
.carousel_nav.prev{
left:5%;
}
.carousel_nav.next{
right:5%;
}

/* contentArea3
------------------------------------------------ */
@media screen and (max-width:941px){
	#carousel{
		float: none;
		margin: 0 auto;
		width: 440px;
	}

	#contentArea3Body .colLeft{
		float: none;
		width: 100%;
	}
	#pager{
		width: 100%;
	}
}

/* contentArea7
------------------------------------------------ */
#contentArea7Body > p{
	text-align:center;
}

#contentArea7Body .listNotice01{
	margin:30px 0 20px 15px;
}

#contentArea7Body .listNotice01 li{
	font-size:81.25%;
}

/*#contentArea7Body .colLayout .colLeft{
	width:40%;
}*/

#contentArea7Body .colLayout .colLeft .os{
	margin-top:5px;
	display:block;
	color:#585858;
	text-align:center;
}

@media screen and (max-width:1056px){	
	#contentArea7Body .colLayout .colLeft,
	#contentArea7Body .colLayout .colRight{
		float:none;
		margin:0 auto;
	}
	
	#contentArea7Body .colLayout .colLeft{
		width:100%;
		text-align:center;
	}
}

@media screen and (max-width:640px){	
	#contentArea7Body .colLayout .colLeft,
	#contentArea7Body .colLayout .colRight{
		min-width:100%;
	}
	
	#contentArea7Body .colLayout .colLeft img,
	#contentArea7Body .colLayout .colRight img{
		max-width:100%;
	}
	#carousel{
		float:none;
		margin: 0 auto;
	}
	
	#contentArea7Body .listNotice01{
		margin:5% 0 3% 0;
	}
}

/* to PAGETOP
------------------------------------------------ */
#container .scrollerArea{
	display:inline-block;
	position:fixed;
	bottom:64px;
	width:100%;
	max-width:1920px;
	z-index:100;
	overflow:hidden;
}

#container .scrollerArea .scroller{
	float:right;
	max-width:60px;
}

@media screen and (max-width:640px){
	#container .scrollerArea{
		display:none;
	}
}


/* Modal Window
------------------------------------------------ */
.modalView{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	overflow:hidden;
	opacity:0.45;
	z-index:1000;
}

.modalWindowContainer{
	display:block;
	position:absolute;
	left:0;
	width:100%;
	z-index:1100;
}

.modalWindow{
	margin:0 auto;
	padding-top:13px;
	min-width:320px;
	max-width:710px;
	background:#000;
	z-index:1200;
}

.modalWindow .btnClose{
	margin-right:13px;
	text-align:right;
}

.modalContent{
	padding:7px 35px 35px;
}

.modalImage.iframe{
	padding-top:30px;
	padding-bottom:56.3%;
	position:relative;
	height:0;
	overflow:hidden;
}

.modalImage.iframe iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


/* JS Alert
------------------------------------------------ */
#jsAlert{
	position:absolute;
	top:57px;
	width:100%;
	background:#666666;
}

#jsAlertBody{
	margin:0 auto;
	padding:15px 0;
	max-width:984px;
}

#jsAlertBody p{
	color:#fff;
	font-size:75%;
	text-align:center;
}


/* Adjust
------------------------------------------------ */
.center{
	text-align:center;
}

/* ----------------------------------------------------------------
    Clearfix
----------------------------------------------------------------- */
#contentsBody:after,
#headerAreaBody:after,
#headerAreaBody #logo:after,
#headerAreaBody #app1:after,
#headerAreaBody #googlePlay1:after,
#headerAreaBody #menuArea:after,

#container .scrollerArea:after,
#container .scrollerArea .scroller:after,

#mainvisualBody ul:after,
.sectionBody:after,
.sectionBody ul:after,
.sectionBody .colLayout:after,

#footerAreaBody:after,
#footerAreaBody ul:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	font-size:0;
	line-height:0;
	visibility:hidden;
}