@charset "utf-8";
/* CSS Document */

#contentsArea img {
}

body#home #contentsArea {
	width:100%;
	background:#fff;
	margin: 0;
	padding: 0;
}

body#home #contentsArea p,
body#home #contentsArea h2 {
	margin: 0;
	padding: 0;
}

body#home #contentsArea h2 {
	font-size: 150%;
	text-align: left;
	line-height: normal;
	background: none;
}

body#home #contentsArea h2:before,
body#home #contentsArea h2:after {
	display: none;
}

#contentsArea .contents-inner{
	overflow:visible;
	margin: 0 auto;
	min-height:666px;
	width:980px;
}

div.contents-outer{
	width:100%;
	position:relative;
	min-height:665px;
	overflow: hidden;
}


#contentsArea .preLoader{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: all ease-out .3s;
}
#contentsArea .preLoader.active{
	opacity: 0.5;
	transition: all ease-out .6s;
}

#contentsArea [id^="item-"]{
	position: absolute;
	display: none;
}

#contentsArea [id^="item-"].active{
	display: block;
}
#contentsArea [id^="item-"] a:hover img{
	opacity: 1;
}

#contentsArea #nav-right{
	position: absolute;
    right: -100%;
    top: -10px;
    left: auto;
    bottom: auto;
    margin: auto;
	width: 53.3%;
    min-width: 480px;
	height: 676px;
    z-index: 1900;
    overflow: visible;
}
@media only screen and (min-width: 1500px) { 
#contentsArea #nav-right{
	width: 52%;
}
}

#contentsArea #nav-right.active{
	right: 0;
	transition: all ease-out .9s;
}

#contentsArea #nav-right .background-l{
    position: absolute;
    left: 192px;
    top: 0;
	bottom: 0;
	width: 200px;
	background: url(/about/investors/ir_library/ar/ar2016/img/top/index_0_navbg.png) no-repeat 0 bottom;
}

#contentsArea #nav-right .background-l.active{
    left: -9px;
}

#contentsArea #nav-right .background-r{
	position: absolute;
	left: 190px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
	border-left: 22px solid #fff;
}

#contentsArea #nav-right .navTitle{
	position: absolute;
	left: 67px;
	right: 0;
	top: 291px;
	bottom: 0;
	margin: auto;
	opacity: 0;
	margin-left: 24px;
}

#contentsArea #nav-right .navTitle.active{
	margin-left: 0;
	opacity: 1;
	transition: all ease-out .3s;
}

#contentsArea #nav-right .navControl {
	position: absolute;
	width: 270px;
	overflow: hidden;
	left: 272px;
	top: 65px;
	bottom: 0;
	margin-left: 24px;
	opacity: 0;
}
#contentsArea #nav-right .navControl.active{
	margin-left: 0;
	opacity: 1;
	transition: all ease-out .4s;
}
#contentsArea #nav-right .navControl ul {
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
#contentsArea #nav-right .navControl ul li{
	height: 91px;
	border-bottom: #0066cc dotted 1px;
	position: relative;
}
#contentsArea #nav-right .navControl ul li:nth-of-type(1){
	height: 103px;
}
#contentsArea #nav-right .navControl ul li:nth-of-type(4){
	height: 131px;
}
#contentsArea #nav-right .navControl ul li:nth-of-type(5){
	height: 64px;
}
#contentsArea #nav-right .navControl ul li a{
	display: flex;
	width: 100%;
	height: 100%;
	-webkit-align-items: center;
 	align-items: center;
	outline: none;
}

#contentsArea #nav-right .navControl-now {
	position: absolute;
	width: 600px;
	height: 100%;
    left: 542px;
	top: 62px;
}
#contentsArea #nav-right .navControl-now{
	position: relative;
	height: 100%;
}
#contentsArea #nav-right .navControl-now li {
	position: absolute;
	width: 1024px;
	height: 93px;
	left: 100%;
	transition: all ease-out .6s;
}

#contentsArea #nav-right .navControl-now li:nth-child(1){
	height: 116px;
	top: 19px;
}

#contentsArea #nav-right .navControl-now li:nth-child(2){
	top: 134px;
}
#contentsArea #nav-right .navControl-now li:nth-child(3){
	top: 227px;
}
#contentsArea #nav-right .navControl-now li:nth-child(4){
	height: 133px;
	top: 318px;
}
#contentsArea #nav-right .navControl-now li a{
    display: block;
    outline: none;
}
#contentsArea #nav-right .navControl-now li a:hover img{
	opacity: 1;
}
#contentsArea #nav-right .navControl-now li a img:first-child{
    position: absolute;
    left: 0px;
    top: 0px;
}

#contentsArea #nav-right .navControl-now li[class^="active"]{
	transition: all ease-in-out .7s;
}

#contentsArea #nav-right .navControl-now li.active-01{
	left: -78.5%;
}

#contentsArea #nav-right .navControl-now li.active-02{
	left: -87.5%;
}
#contentsArea #nav-right .navControl-now li.active-03{
	left: -91.7%;
}
#contentsArea #nav-right .navControl-now li.active-04{
	left: -87.3%;
}

#contentsArea #nav-right .navControl-now li a:after{
	position: absolute;
	left: 45px;
	bottom: -30px;
    display: block;
    content: url(/about/investors/ir_library/ar/ar2016/img/top/index_nav_detail.png);
    width: 130px;
    height: 30px;
    background: #fff;
	padding: 0 0 0 25px;
    transition: all ease-in-out 1.0s;
}
#contentsArea #nav-right .navControl-now li.active-01 a:after{
    transition: all ease-in-out 1.0s;
}
#contentsArea #nav-right .navControl-now li.active-02 a:after{
	left: 37px;
    transition: all ease-in-out 1.0s;
}
#contentsArea #nav-right .navControl-now li.active-03 a:after{
	left: 57px;
	padding: 0;
    transition: all ease-in-out 1.0s;
}
#contentsArea #nav-right .navControl-now li.active-04 a:after{
	left: 102px;
	background: none;
	padding: 0;
    transition: all ease-in-out 1.0s;
}

#contentsArea [id^="item-"]{
	width: 100%;
	height:666px;
	margin: 0 auto 0 auto;
	top: 0;
}

#contentsArea [id^="item-"] [class^="photo-"] {
    position: absolute;
    opacity: 0;
    overflow: visible;
    margin: auto;
    padding: 0;
    width: 980px;
}
#contentsArea [id^="item-"] [class^="photo-"] img {
	position: absolute;
	left: -100%;
	right: -100%;
	margin: auto;
}
#contentsArea [id^="item-"] [class^="photo-"].active{
	opacity: 1;
	transition: all linear .8s;
}
#contentsArea [id^="item-"] .photo-01{
    left: 0;
    right: 0;
	top: 0;
	bottom: auto;
}
#contentsArea [id^="item-"] .photo-02{
    left: 0;
    right: 0;
	top: 324px;
	bottom: auto;
}
#contentsArea [id^="item-"] .photo-03{
    left: 0;
    right: 0;
	top: 324px;
    bottom: 0;
}
#contentsArea [id^="item-"] .photo-04{
    left: 0;
    right: 0;
	top: 324px;
	bottom: auto;
}
#contentsArea [id^="item-"] .photo-05{
    left: 0;
    right: 0;
	top:  0px;
	bottom: auto;
}
#contentsArea [id^="item-"] .photo-06{
    left: 0;
    right: 0;
    top: 0;
	bottom: auto;
}