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

filename : main_navigation.css

update : 2018/01

----------------------------------------------------------- */


/*-----------------*/
/* main navigation */
/*-----------------*/

#navigation {
    width:950px;
    margin:10px auto 15px;
}
#navigation ul {
    display:table;
    table-layout:fixed;
    width:100%;
}
#navigation ul li {
    position:relative;
    display:table-cell;
    box-sizing:border-box;
    text-align:center;
}
#navigation ul li.sp {
	display: none;
}
#navigation ul li a {
    display:block;
    position:relative;
    border-bottom:2px solid #fff;
    vertical-align:middle;
    line-height:30px;
    font-size:1.4rem;
    color:#7f7f7f !important;
}
#navigation ul li:hover a {
    color:#000 !important;
}
#navigation ul li a span {
    display:block;
    margin-bottom:8px;
    border-right:1px solid #7f7f7f;
}
#navigation ul li:first-child > a span {border-left:1px solid #7f7f7f;}
#navigation ul li a:hover {text-decoration:none !important;}
#navigation ul li:hover {
    cursor:pointer;
}

#navigation ul li.single:hover a {border-bottom:2px solid #6982d2;}

#navigation ul li#aboutus:hover > a {border-bottom:2px solid #00009a;}
#navigation ul li#emergencies:hover > a {border-bottom:2px solid #d40000;}
#navigation ul li#procedures:hover > a {border-bottom:2px solid #ff7c00;}
#navigation ul li#safety:hover > a {border-bottom:2px solid #46ac46;}


/* current */
#aboutus #navigation ul li#aboutus > a {border-bottom:2px solid #00009a;}
#emergencies #navigation ul li#emergencies > a {border-bottom:2px solid #d40000;}
#procedures #navigation ul li#procedures > a {border-bottom:2px solid #ff7c00;}
#investors #navigation ul li#investors > a {border-bottom:2px solid #6982d2;}
#sustainability #navigation ul li#sustainability > a {border-bottom:2px solid #6982d2;}
#r_d #navigation ul li#r_d > a {border-bottom:2px solid #6982d2;}
#safety #navigation ul li#safety > a {border-bottom:2px solid #46ac46;}



/* level2 */
#navigation ul li ul {
    display:block;
    visibility:hidden;
    position:absolute;
    width:auto;
    min-width:100%;
    background:#fff;
    margin:0;
    padding:0;
    text-align:center;
    z-index:100;
    box-shadow:4px 4px 4px 0px #666;
}
#navigation ul li:hover ul {
    visibility:visible;
    top:40px;
    left:0;
    text-align:left;
    opacity:1;
}
#navigation ul li ul li {
    display:block;
    width:100%;
    background:#ffffff;
    margin:0;
    padding:0;
    border-bottom:none;
    vertical-align:bottom;
    text-align:left;
    white-space:nowrap;
}
#navigation ul li ul a {
    display:block;
    padding:0.5em 1em;
    border:none;
    line-height:1.2;
}
#navigation ul li:hover ul a {
    color:#7f7f7f !important;
}
#navigation ul li:hover ul li:hover a {
    background:#e5e5e5;
    color:#000 !important;
}


/* toggle */
#toggle {display:none;}


/*-----------------*/
/* side navigation */
/*-----------------*/
#sideNav {
    width:210px;
    margin-bottom:30px;
    box-shadow:4px 4px 4px 0px #666;
    line-height:2.0;
    font-size:1.4rem;
}
#sideNav .category {
    background:#808080;
    padding:0 1em;
    line-height:2.0;
    color:#fff;
}
#sideNav ul li a {
    display:block;
    padding:0 1em;
    line-height:2.0;
    color:#7f7f7f;
}
#sideNav ul li a:hover {
    background:#e5e5e5;
    color:#000;
    text-decoration:none !important;
}
#sideNav ul li a.current {
    background:#e5e5e5;
    color:#000;
}

#contents.purchasing #sideNav ul li.purchasing a,
#contents.payment #sideNav ul li.payment a {
    background:#e5e5e5;
    color:#000;
}



/*==================================================
Responsive for SP 2017/01
==================================================*/
@media only screen and (max-width: 767px) {

/*-----------------*/
/* main navigation */
/*-----------------*/

#header-area #navigation {
	width: 240px;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	margin: 0;
	z-index: -1;
	overflow: auto;
	background: #fff;
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
	-moz-box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
	-webkit-box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
	visibility: hidden;
}
#navigation .close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
}
#navigation .close:before,
#navigation .close:after {
	content: "";
	width: 28px;
	height: 4px;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: -2px auto 0;
	background: #00009a;
}
#navigation .close:before {
	transform: rotate(-45deg);
}
#navigation .close:after {
	transform: rotate(45deg);
}
#navigation .navi_logo {
	width: 130px;
	height: 48px;
	padding: 14px 10px;
}

#navigation > ul {
	width: 100%;
	margin-bottom: 30px;
	background: #f1f3f5;
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
}
#navigation > ul > li {
    display:block;
    width:auto;
    text-align:left;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}
#navigation ul li.sp {
	display: block;
}
#navigation > ul > li .navi_acc_trigger {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
}
#navigation ul li .navi_acc_trigger:before,
#navigation ul li .navi_acc_trigger:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 10;
	background: #00009a;
}
#navigation ul li .navi_acc_trigger:before {
	width: 24px;
	height: 2px;
	margin-top: -1px;
}
#navigation ul li .navi_acc_trigger:after {
    width: 2px;
    height: 24px;
    margin-top: -12px;
}
#navigation ul li .navi_acc_trigger.open:after {
	content: none;
}
#navigation ul li .navi_acc_contents {
	display: none;
}

#navigation > ul > li > a {
    padding:0 1.5rem;
    line-height:2.4;
    font-size:1.6rem;
	border-bottom: 1px solid #fff;
}
#navigation > ul > li:hover > a {
	border-bottom: 1px solid #fff !important;
	color: #7f7f7f !important;
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
}
#navigation > ul > li > a > span {
    margin-bottom:0;
    border-right:none;
}
#navigation > ul > li:first-child > a > span {border-left:none;}

#navigation > ul > li.single:hover > a {border-bottom:none;}
#navigation > ul > li#aboutus:hover > a {border-bottom:none;}
#navigation > ul > li#emergency:hover > a {border-bottom:none;}
#navigation > ul > li#procedures:hover > a {border-bottom:none;}
#navigation > ul > li#safety:hover > a {border-bottom:none;}

#navigation ul li:hover ul li:hover a {
	background: #fff;
	color: #7f7f7f !important;
}

#navigation > ul > li > ul {
	width: 100%;
	min-height: 100%;
	position: static;
	display: none;
	visibility: visible;
	text-align: left;
	box-shadow: none;
}
#navigation > ul > li > ul > li {
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
}

#navigation #language {
	margin-top: 30px;
	background: #f1f3f5;
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
}
#navigation #language .navi_acc_trigger {
	width: 100%;
	display: block;
	height: auto;
	position: relative;
	padding: 0 1.5rem;
	line-height: 2.4;
	font-size: 1.6rem;
	color: #7f7f7f;
	border-top: 1px solid #fff;
}
#navigation #language .navi_acc_trigger:before {
	left: auto;
	right: 7px;
}
#navigation #language .navi_acc_trigger:after {
	left: auto;
	right: 18px;
}

#navigation .lang_list {
	padding-top: 10px;
	box-shadow: 9px 0px 10px -9px #c4c4c4 inset;
}
#navigation .lang_list > li {
	position: static;
    display: list-item;
    box-sizing: border-box;
}
#navigation .lang_list > li + li {
	padding-top: 5px;
}
#navigation .lang_list > li > a:lang(zh) {
	font-family: "hei", "Microsoft Yahei","PingHei" ,"sans-serif";
}
#navigation .lang_list > li > a:lang(ko) {
	font-family:"Malgun Gothic","Yoon Gothic","sans-serif";
}
#navigation .lang_list > li > a {
	display: inline;
	position: static;
	border-bottom: none;
	line-height: 1.6;
	font-size: 100%;
}

#navigation .header_link_list {
	padding: 0 10px;
	margin-bottom: 70px;
	text-align: right;
}
#navigation .header_link_list > p > a {
	color: #7f7f7f;
}
#navigation .header_link_list > p + p {
	margin-top: 10px;
}


/* current */
#aboutus #navigation ul li#aboutus > a,
#emergencies #navigation ul li#emergencies > a,
#procedures #navigation ul li#procedures > a,
#safety #navigation ul li#safety > a {border-bottom:none;}




/* toggle */
#toggle {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
}

#toggle,
#toggle span {
    display:inline-block;
    transition:all .4s;
    box-sizing:border-box;
}
#toggle div {
    position:relative;
    width:28px;
    height:28px;
}
#toggle div span {
    position:absolute;
    left:0;
    width:100%;
    height:4px;
    background-color:#00009a;
}
#toggle div span:nth-of-type(1) {
    top:0;
}
#toggle div span:nth-of-type(2) {
    top:50%;
	margin-top: -2px;
}
#toggle div span:nth-of-type(3) {
    top:100%;
	margin-top: -4px;
}

#header_en #search_toggle {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 10px;
	right: 65px;
}
#header_en #search_toggle:after {
	content: "";
	width: 4px;
	height: 15px;
	display: block;
	background: #ccc;
	position: absolute;
	transform: rotate(-45deg);
	bottom: -4px;
	right: 3px;
}
#header_en #search_toggle:before {
	content: "";
	width: 23px;
	height: 23px;
	position: absolute;
	top: 0;
	left: 0;
	border: 3px solid #ccc;
	border-radius: 50%;
}


/*-----------------*/
/* side navigation */
/*-----------------*/
#sideNav {
    width:98%;
    width:calc(100% - 5px);
}







}
/* - 767px end */


/* EOF */