/*==================================================
 * VISIBILITY
 * ================================================*/
#hamburgericon-item {
  display: none !important;
}

@media screen and (max-width: 65em) {
 
  #navi-main > .inner,
  .sideNaviArea {
    display: none !important;
  }
  #hamburgericon-item {
    display: block !important;
  }
}


/*==================================================
 * HAMBURGER ICON
 * ================================================*/
#hamburgericon {
  padding: 10px;
}
#hamburgericon-item {
	position: absolute;
  right: 15px;
  top: 14px;
  width: 41px;
  height: 36px;
  padding: 9px 8px;
  background-color: #006699;
  text-align: center;
  box-sizing: border-box;
}
#hamburgericon-item span,
#hamburgericon-item span:before,
#hamburgericon-item span:after {
  cursor: pointer;
  border-radius: 0px;
  height: 2px;
  width: 24px;
  background: white;
  position: absolute;
  display: block;
  content: '';
  text-indent: -9999em;
  margin-top: 0px;
  z-index: 500;
}
.contentTop-nonexists #hamburgericon-item span,
.contentTop-nonexists #hamburgericon-item span:before,
.contentTop-nonexists #hamburgericon-item span:after {
  background: #414447;
}
#hamburgericon-item span:before {
  top: 8px;
}
#hamburgericon-item span:after {
  bottom: -16px;
}
#hamburgericon-item span,
#hamburgericon-item span:before,
#hamburgericon-item span:after {
  transition: all 500ms ease-in-out;
}
#hamburgericon-item.active span {
  background-color: transparent;
}
#hamburgericon-item.active span:before,
#hamburgericon-item.active span:after {
  top: 0;
}
#hamburgericon-item.active span:before {
  transform: rotate(45deg);
}
#hamburgericon-item.active span:after {
  transform: rotate(-45deg);
}
/* 768 px */
@media screen and (min-width: 48.000em) {
  #hamburgericon {
    width: 41px;
    padding-left: 20px;
  }
  #hamburgericon-item {
    position: static;
  }
}


/*==================================================
 * CLOSE ICON
 * ================================================*/
.close {
  position: absolute;
  right: 17px;
  top: 10px;
  width: 32px;
  height: 32px;
  opacity: 1;
  text-indent: -9999em;
  font-size: 0px;
  color: transparent;
  display: block;
  cursor: pointer;
}
.close:hover {
  opacity: 1;
}
.close:before,
.close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 3px;
  background-color: #FFFFFF;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}


/*==================================================
 * MOBILE NAVI
 * ================================================*/
#mobileNavi {
  height: auto !important;
}
#mobileNavi .mm-navbars-top {
	height: 60px;
}
#mobileNavi.mm-hasnavbar-top-1 .mm-panels {
	top: 60px;
}
#mobileNavi li {
  display: block !important;
  padding: 0px !important;
}
#mobileNavi li:before {
	display: none;
}
#mobileNavi li a,
#mobileNavi li span {
	color: #FFFFFF;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0px !important;
}
.mm-panel.mm-vertical,
.mm-listview.mm-next,
.has-dropdown.mm-opened a,
.mm-opened a {
  background-color: transparent !important;
}

#mobileNavi .mm-listview .mm-next {
	display: block;
	background-color: #fff;
	z-index: 100;
	background-image: url('../Icons/icon-next-white.png') !important;
	background-position: bottom !important;
	background-repeat: no-repeat !important;
	width: 44px !important;
	height: 44px !important;
	background-size: 32px 32px !important;
	position: absolute;
	top: 0px !important;
	right: 11px !important;
}
#mobileNavi .mm-listview .mm-opened > .mm-next {
	background-image: url('../Icons/icon-down-white.png') !important;
}
#mobileNavi .mm-listview .mm-next span,
#mobileNavi .mm-listview .mm-next:before,
#mobileNavi .mm-listview .mm-next:after {
	display: none;
}
#mobileNavi ul.level2 {
  position: relative;
}
#mobileNavi .mm-listview > li:not(.mm-divider)::after {
	left: 0px;
}
#mobileNavi li.mm-opened > .mm-panel {
	background-color: #73a8c9 !important;
}
#mobileNavi li.mm-opened > .mm-panel li.mm-opened > .mm-panel {
	background-color: #72a1c2 !important;
}

#mobileNavi li.current > a,
#mobileNavi li.current > a > span {
  color: #b3d1e1;
}
#mobileNavi li.mm-opened > .mm-panel li.current > a,
#mobileNavi li.mm-opened > .mm-panel li.current > a > span {
  color: #006699;
}
#mobileNavi li.mm-opened > .mm-panel li.mm-opened > .mm-panel li.current > a,
#mobileNavi li.mm-opened > .mm-panel li.mm-opened > .mm-panel li.current > a > span {
  color: #006699;
}

.mm-panel .mm-panel {
	padding-left: 5%;
}
.mm-listview ul li:before {
  content: none;
}
.mm-menu {
  color: #ffffff;
  background-color: #006699;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 9999;
}
.mm-menu>.mm-navbar {
  background-image: none;
  background-color: transparent;
  background: none;
}
.mm-menu .mm-listview>li .mm-next:after,
.mm-menu .mm-listview>li .mm-arrow:after {
  border-color: #FFFFFF !important;
}
.mm-listview.mm-vertical>li {
  font-size: 25px;
}
.mm-listview.level2.dropdown>li {
  font-size: 20px;
}
.mm-listview.level1 {
  margin-top: 0px !important;
}
.mm-navbar {
  border: 0px;
}
.mm-listview > li > a,
.mm-listview > li > span {
  padding: 17px 10px 17px 27px;
  text-align: left;
}
.mm-listview .level2 {
  margin: 0px !important;
}
.level1 .mm-panel {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.mm-prev:before,
.mm-next:after,
.mm-arrow:after {
  border-width: 3px;
  display: inline-block;
  width: 13px;
  height: 13px;
  right: 26px;
  top: 24px !important;
}

.mm-vertical .mm-listview>li>.mm-next,
.mm-listview>li.mm-vertical>.mm-next {
  height: 60px;
}

.mm-hasnavbar-top-1 .mm-panels,
.mm-navbar-top-2 {
  background-color: transparent;
  background-image: none;
}

html.mm-opened body {
  overflow: hidden;
}


/*==================================================
 * MAIN NAVI: GLOBAL
 * ================================================*/
.navi-main-item {
  display: table;
  /* table-layout: fixed; */
  /* width: 100%; */
  position: relative;
  bottom: 0px;
}
.navi-main-item li {
  list-style: none;
}
.navi-main-item li:before {
  display: none;
}
.navi-main-item a {
  text-decoration: none;
}
.navi-main-item .title {
  font-size: 15px;
  text-decoration: none;
	font-weight: 600;
}
.navi-main-item .title:hover {
  text-decoration: none;
}


/*==================================================
 * MAIN NAVI: LEVEL 1
 * ================================================*/
.navi-main-item {
	float: right;
}
.navi-main-item > ul.level1 {
  display: table-row;
  float: none !important;
  padding: 0;
}
.navi-main-item ul.level1 > li {
  display: table-cell;
  vertical-align: middle;
  padding: 0;
  float: none !important;
  height: 100%;
  position: relative;
  text-align: center !important;
  padding: 0 10px;
}
.navi-main-item ul.level1 > li.has-extended-submenu {
  position: static;
}
.navi-main-item ul.level1 > li > a {
	text-decoration: none;
	padding-bottom: 35px;
	display: inline-block;
}

.navi-main-item ul.level1 > li > a > .title,
.navi-main-item ul.level1 > li > .title { 
  background-color: transparent;
  text-align: left;
  margin: 0;
  position: relative;
  display: block;
  white-space: nowrap;
  color: #006699;
}
.navi-main-item ul.level1 > li > a > .title,
.navi-main-item ul.level1 > li > .title { 
  font-size: 15px;
  font-size: 0.938rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
}
.navi-main-item ul.level1 > li.SUB > a > .title,
.navi-main-item ul.level1 > li.SUB > .title { 
	padding-right: 25px;
}
.navi-main-item ul.level1 > li.SUB > a > .title:after,
.navi-main-item ul.level1 > li.SUB > .title:after {
	display: block;
	content: "";
	background-image: url('../Icons/icon-arrow-down.png');
	background-image: url('../Icons/icon-arrow-down.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 17px;
	height: 17px;
	position: absolute;
	right: 3px;
	top: 50%;
	margin-top: -8px;
}

@media screen and (max-width: 63.938em) {
  .navi-main-item ul.level1 > li > a {
    text-align: center;
  }
  .navi-main-item ul.level1 > li > a > span {
    padding: 0 !important;
  }
}

/* 1280px */
@media screen and (min-width: 80.000em) {
	.navi-main-item ul.level1 > li > a > span {
		font-size: 20px;
		font-size: 1.250rem;
	}
}


/* ACTIVE STATUS
 * ----------------------------------------------- */
.navi-main-item ul.level1 > li:hover > a > span,
.navi-main-item ul.level1 > li:hover > span,
.navi-main-item ul.level1 >li.current > a > span,
.navi-main-item ul.level1 >li.current > span,
.navi-main-item ul.level1 >li.active > a > span,
.navi-main-item ul.level1 >li:hover > a > span {
  opacity: 0.5;
}

/* HOVER
 * ----------------------------------------------- */
@media screen and (min-width: 64.000em) {
  .navi-main-item ul.level1 > li:hover > a,
  .navi-main-item ul.level1 > li.CUR > a,
  .navi-main-item ul.level1 > li.ACT > a {
    opacity: 0.5;
  }
}



/*==================================================
 * MAIN NAVI: LEVEL 2
 * ================================================*/
.navi-main-item ul.level2 {
  display: none;
  margin: 0;
  padding: 8px 45px 25px 20px;
  list-style: none;
  position: absolute;
}
.navi-main-item ul.level1 > li:hover ul.level2 {
	display: block;
}
.navi-main-item ul.level1 > li.has-extended-submenu:hover ul.level2 {
	display: table;
	table-layout: fixed;
}
.navi-main-item ul.level1 > li.has-extended-submenu:hover ul.level2:after {
	content: "";
	display: table-cell;
}
.navi-main-item ul.level2 li {
  padding: 0px;
}
.navi-main-item ul.level2 li a {
  display: block;
  color: #666666;
  padding: 0px;
}
.navi-main-item ul.level2 li.first a:first-child {
  border: 0px;
}
.navi-main-item ul.level2 .title {
	font-size: 15px;
  font-size: 0.938rem;
  white-space: nowrap;
}


@media screen and (min-width: 64.000em) {
  .navi-main-item ul.level2 {
    background-color: #FFFFFF;
  }
}


/* ACTIVE STATUS
 * ----------------------------------------------- */

.navi-main-item ul.level2 li.current > a,
.navi-main-item ul.level2 li.current > a > span,
.navi-main-item ul.level2 li.active > a,
.navi-main-item ul.level2 li.active > a > span {
  color: #006699 !important;
  text-decoration: none;
}


/* HOVER
 * ----------------------------------------------- */
.navi-main-item ul.level2 li a:hover {
  text-decoration: none;
	color: #006699;
}


/* 1024px */
@media screen and (min-width: 80.000em) {
  .navi-main-item ul.level2 {
    text-align: left;
  }
}


/*==================================================
 * MAIN NAVI: LEVEL 2 EXTENDED
 * ================================================*/
.navi-main-item ul.level2.extended {
	position: absolute;
	padding-bottom: 25px;
	padding-top: 8px;
  padding-left: 0px;
  padding-right: 0px;
}
.navi-main-item ul.level2.extended > li {
  display: table-cell;
	padding: 0px 47px 0px 20px;
}
.navi-main-item ul.level2.extended li a {
	text-align: left;
	padding: 0px 0px;
}
.navi-main-item ul.level2.extended ul {
	margin: 0px;
}
.navi-main-item ul.level2.extended .extended-col {
	padding: 0px;
	padding-bottom: 20px;
}
.navi-main-item ul.level2.extended .extended-col > a {
  text-transform: uppercase;
	color: #006699;
}


/*==================================================
 * SUB NAVI: LEVEL 2
 * ================================================
#subNavi {
  margin-bottom: 30px;
}
#subNavi ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  background-color: #2C3134;
}
#subNavi li {
  border-bottom: 1px solid #494b4c;
}
#subNavi ul li:before {
  display: none;
}
#subNavi a {
  padding: 10px;
  display: block;
  text-decoration: none;
  color: #fff;
}
#subNavi li.ACT a,
#subNavi li.CUR a,
#subNavi a:hover,
#subNavi a:focus {
  background-color: #494b4c;
}

*/

/*==================================================
 * SUBMENU
 * ================================================*/
.menu {
  margin-bottom: 40px;
}
.menu li {
  list-style: none;
  padding: 5px 0px;
}
.menu li:before {
  display: none;
}
.menu a {
  text-decoration: none;
  padding: 0px 5px;
  display: block;
}
.menu span {
	color: #666666;
	letter-spacing: 0.02em;
}
*/

/* LEVEL1
 * ----------------------------------------------- */
.menu .level1 > li {
  border-top: 1px solid #006699;
}
.menu .level1>li:last-child {
  border-bottom: 1px solid #006699;
}
.menu li.has-dropdown ul {
  display: none;
}


/* LEVEL1: ACTIVE STATUS
 * ----------------------------------------------- */
.menu li.active,
.menu li.current {
  background-color: #006699;
}
.menu li:hover {
  background-color: rgba(0,102,153,0.3);
}
.menu li.active span,
.menu li.current span,
.menu li:hover span {
  color: #fff;
}
.menu li.has-dropdown.active ul,
.menu li.has-dropdown.current ul{
  display: block;
}
  display: block;
}
.menu li.has-dropdown.active,
.menu li.has-dropdown.current {
  padding-bottom: 0px;
}
.menu li.has-dropdown.active a,
.menu li.has-dropdown.current a {
  padding-bottom: 5px;
}


/* LEVEL2
 * ----------------------------------------------- */
.menu .level2 {
  background-color: #006699;
  margin: 0px;
}
.menu .level2 a {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
.menu .level2 span {
  color: #000 !important;
	font-size: 14px;
	font-size: 0.875rem;
}

 
 
/* LEVEL2: ACTIVE STATUS
 * -----------------------------------------------*/ 
.menu .level2 li.active,
.menu .level2 li.current,
.menu .level2 li:hover {
  background-color: #006699 !important;
}
.menu .level2 li.active span,
.menu .level2 li.current span,
.menu .level2 li:hover span  {
  color: #006699 !important;
}
.menu .level2 li.has-dropdown.active ul,
.menu .level2 li.has-dropdown.current ul {
  display: block;
}
.menu .level2 li.has-dropdown.active,
.menu .level2 li.has-dropdown.current {
  padding-bottom: 0px;
}
.menu .level2 li.has-dropdown.active a,
.menu .level2 li.has-dropdown.current a {
  padding-bottom: 5px;
}
