header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 15px;
  z-index: 9999;
}
header .header-wrap {
  padding: 15px 0;
  border-bottom: 1px solid #fff;
}
header .header-wrap .logo {
  text-align: right;
}
header .header-wrap .logo a img {
  max-width: 110px;
}
header .header-wrap .toggle-menu {
  position: absolute;
  top: 50%;
  width: 25px;
  height: 22px;
  left: 15px;
  margin-top: -10px;
  background: url('/m/en/images/common/menu_icon.png') 50% 50% no-repeat;
  background-size: cover ;
}
header .header-wrap .toggle-menu.active {
  background: url('/m/en/images/common/menu_icon02.png') 50% 50% no-repeat;
  background-size: cover ;
}
header .header-wrap nav {
 display: none;
 position: absolute;
 top:50%;
 margin-top:-10px;
 right:35%;
 z-index:1000;
}
header .header-wrap nav.active {
 display: block;
}
header .header-wrap nav ul li.lan a {
  text-align: left;
  padding-right: 18px;
  background: url(/images/common/arrow_icon02.png) no-repeat;
  background-position: right 3px center;
  border: 1px solid #000;
  color:#000;
  padding-left:5px;
}
header .header-wrap nav ul li.lan ul {
  display: none;
  position: absolute;
  top: 21px;
}
header .header-wrap nav ul li.lan ul li a {
  background: #fff;
  color: #212121;
  padding-left: 0;
  text-align: center;
  border-color: #404040;
}
header .header-wrap nav ul li.lan ul li:last-child a {
  border-top: none;
}
header .header-wrap nav ul li.lan:hover a,
header .header-wrap nav ul li.lan.on a {
  color: #212121;
  border-color: #404040;
 background: url(/images/common/arrow_icon02.png) no-repeat;
  background-position: right 3px center;
  border: 1px solid #000;
  color:#000;
  padding-left:5px;
}
header .header-wrap nav ul li.lan:hover ul li a,
header .header-wrap nav ul li.lan.on ul li a {
  background: none;
  background-color: #fff;
}
header .gnb {
  position: absolute;
  display: none;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 30px;
  left: 0;
  z-index: 999;
}
header .gnb dl {
  height: 100%;
  overflow-y: auto;
  max-height: 380px;
}
header .gnb dl dt {
  color: #3a3a3a;
  padding: 7px 20px;
  font-size: 1.1rem;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 400;
  background: url('/m/en/images/common/gnb_icon01.png') 95% 50% no-repeat;
}
header .gnb dl dt.on {
  background: url('/m/en/images/common/gnb_icon02.png') 95% 50% no-repeat;
  border-bottom: 1px solid #a42a59;
}
header .gnb dl dd {
  background: #f5f5f5;
  padding: 0 20px;
  display: none;
}
header .gnb dl dd ul li {
  border-bottom: 1px solid #fff;
}
header .gnb dl dd ul li a {
  display: block;
  font-size: 15px;
  color: #3a3a3a;
  padding: 10px;
}
header .gnb .go_site {
  overflow: hidden;
  padding: 20px 20px 0;
}
header .gnb .go_site li {
  float: left;
  width: 100%;
  box-sizing: border-box;
}
header .gnb .go_site li a img {
  width: 100%;
  display: block;
}
header .gnb .sns-area {
  background: #e1e1e1;
  margin: 0 20px;
  padding: 20px;
  vertical-align: middle;
  overflow: hidden;
}
header .gnb .sns-area strong {
  display: block;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 5px;
}
header .gnb .sns-area span {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 33.3333%;
  text-align: center;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
header .gnb .sns-area span:before {
  content: "";
  display: inline-block;
  background: #c8c8c8;
  width: 1px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -20%;
}
header .gnb .sns-area span.first:before {
  display: none;
}
header.active {
  background: #fff;
}
header.active .header-wrap {
  border-color: #ebebeb;
}
header.on {
  background: #fff;
}
header.on .header-wrap {
  border-color: #ebebeb;
}
header.on .header-wrap .toggle-menu {
  background: url('/m/en/images/common/menu_icon03.png') 50% 50% no-repeat;
  background-size: cover;
}
header.on .header-wrap .toggle-menu.active {
  background: url('/m/en/images/common/menu_icon02.png') 50% 50% no-repeat;
  background-size: cover ;
}
footer {
  background: rgba(130, 130, 130, 0.6);
  padding: 0px 0px 10px;
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: block;
}
footer .f-toggle {
  position: relative;
}
footer .f-toggle .icon {
  position: absolute;
  width: 50px;
  height: 20px;
  line-height: 20px;
  background: rgba(130, 130, 130, 0.6);
  text-align: center;
  top: -20px;
  left: 50%;
  margin-left: -25px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
footer .f-toggle .icon img {
  transition: all ease .35s;
}
footer .f-toggle .fix-area {
  display: block;
  overflow: hidden;
  padding: 15px 10px 5px;
}
footer .f-toggle .fix-area .logo {
  display: inline-block;
  float: left;
}
footer .f-toggle .fix-area .logo a img {
  max-width: 100px;
  display: block;
}
footer .f-toggle .fix-area nav {
  float: right;
  position: relative;
  top: 0px;
}
footer .f-toggle .fix-area nav ul li {
  float: left;
  margin-right: 10px;
}
footer .f-toggle .fix-area nav ul li a {
  color: #ebe8e9;
  display: block;
  font-size: 12px;
  line-height: 21px;
}
footer .f-toggle .fix-area nav ul li:hover a {
  color: #9e1c4e;
}
footer .f-bottom {
  display: none;
}
footer .f-bottom .family-site {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
footer .f-bottom .family-site a {
  display: block;
  color: #ebe8e9;
  padding: 11px 13px;
  font-size: 13px;
  background: url("/m/en/images/common/arrow_icon02.png") no-repeat;
  background-position: 95% 50%;
  background-color: #767475;
}
footer .f-bottom .family-site a.on {
  background: url("/m/en/images/common/arrow_icon03.png") no-repeat;
}
footer .f-bottom .family-site ul {
  position: absolute;
  width: 100%;
  top: 39px;
  display: none;
  background: #949494;
}
footer .f-bottom .family-site ul li {
  margin: 0;
  float: none;
}
footer .f-bottom .family-site ul li a {
  display: block;
  color: #fff;
  padding: 8px 13px;
  background: none;
  background-color: transparent;
  line-height: inherit;
}
footer .f-bottom .family-site ul li:hover a {
  background-color: #767475;
}
footer .f-bottom .footer-wrap {
  padding: 10px 10px 0;
}
footer .f-bottom .footer-wrap h1 {
  margin: 0;
}
footer .f-bottom .footer-wrap h1 a img {
  max-width: 100px;
  display: block;
}
footer .f-bottom .footer-wrap .info nav {
  border-bottom: 1px solid #aeaeae;
  height: 40px;
}
footer .f-bottom .footer-wrap .info nav ul li {
  float: left;
  margin-right: 10px;
}
footer .f-bottom .footer-wrap .info nav ul li a {
  color: #ebe8e9;
  display: block;
  font-size: 12px;
  line-height: 40px;
}
footer .f-bottom .footer-wrap .info nav ul li:hover a {
  color: #9e1c4e;
}
footer .f-bottom .footer-wrap .info .addr {
  padding-top: 20px;
  color: #d3d3d3;
  font-size: 11px;
  line-height: 20px;
  font-weight: 100;
  letter-spacing: -0.5px;
}
footer .f-bottom .footer-wrap .info .addr .copyright {
  color: #ababab;
}
footer .f-bottom .footer-wrap .info .addr .sns {
  margin-top: 10px;
}
footer .f-bottom .footer-wrap .info .addr .sns strong {
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 400;
  margin-right: 8px;
  position: relative;
  top: -3px;
}
footer .f-bottom .footer-wrap .info .addr .sns span {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
  width: 25px;
}
footer.active {
  background: #828282;
}
footer.active .f-toggle .icon {
  background: #828282;
}
footer.active .f-toggle .icon img {
  transform: rotate(180deg);
}
footer.active .f-toggle .fix-area {
  display: none;
}