#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

#header .header-container {
  position: relative;
  padding: 32px 36px;
  -webkit-transition: background-color 500ms ease-out;
  -moz-transition: background-color 500ms ease-out;
  -ms-transition: background-color 500ms ease-out;
  -o-transition: background-color 500ms ease-out;
  transition: background-color 500ms ease-out;
  z-index: 2;
}

#header .header-inner {
  position: relative;
}

#header .brand {
  display: block;
}

#header .brand a {
  width: 11rem;
  display: block;
}

#header .brand a span {
  text-indent: -999em;
  overflow: hidden;
  background: 50% 50% no-repeat;
  background-size: contain;
  padding-top: 13.6363636363636%;
  font-size: 0;
  display: block;
}

#header #nav {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: -.1em;
}

#header #nav .gnb {
  text-align: center;
  display: flex;
}

#header #nav .gnb li {
  margin:0 28px;
}

#header #nav .gnb li a span {
  font-size: 1.375rem;
  display: block;
  position: relative;
  -webkit-transition: color 400ms ease-out;
  -moz-transition: color 400ms ease-out;
  -ms-transition: color 400ms ease-out;
  -o-transition: color 400ms ease-out;
  transition: color 400ms ease-out;
  white-space: nowrap;
}

#header #nav .gnb li a span:after {
  content: '';
  background: #e35b0a;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -.6rem;
  width: 0%;
  opacity: 0;
  -webkit-transition: all 400ms ease-out;
  -moz-transition: all 400ms ease-out;
  -ms-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
}

#header #nav .gnb li.active a span {
  color: #e35b0a;
}

#header #nav .gnb li.active a span:after {
  width: 100%;
  opacity: 1;
}

#header.gnb-sub-menu-opened .header-container,
#header.search-opened .header-container,
.header-opaque-at-mobile-nav-opened #header .header-container,
#header.opaque .header-container {
  background: rgba(20, 20, 20, 0.9);
}

.utils {
  text-align: right;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.utils .menu {
  font-size: 0;
}

.utils .menu li {
  display: inline-block;
  vertical-align: middle;
  margin:0 8px;
}

.utils .menu li.split {
  font-size: 0.875rem;
  opacity: .3;
  border-right: 1px solid #fff;
  font-size: 0;
  text-indent: -999em;
  overflow: hidden;
  width: 0;
}

.utils .menu li.search {margin-right:0;}

.utils .menu li.toggle-menu {
  display: none;
}

.utils .menu li span {
  font-size: 14px;
}

.utils .menu .btn-search {
  text-indent: -999em;
  display: block;
  background: 50% 50% no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  width:26px;
  height:26px;
}

.utils .menu .btn-close {
  text-indent: -999em;
  display: block;
  background: 50% 50% no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  width: 1.375rem;
  height: 1.375rem;
  position: relative;
}

.utils .menu .btn-close svg {
  width: 1.3125rem;
  height: 1.3125rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.utils .btn-global {
  display: block;
  background: 50% 50% no-repeat;
  background-size: contain;
  width: 1.5rem;
  height: 1.5rem;
  text-indent: -999em;
  overflow: hidden;
}

.utils .language {
  position: relative;
}

.utils .language a.current {
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  display: block;
  padding-right:8px;
}

.utils .language a.current:after {
  background: 50% 50% no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  content: '';
  position: absolute;
  top: 50%;
  right: 0rem;
  width: 0.5rem;
  height: 0.3125rem;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.utils .language .langs {
  position: absolute;
  top: -14px;
  left: -24px;
  z-index: 2;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 300ms ease-out, visibility 300ms ease-out;
  -moz-transition: opacity 300ms ease-out, visibility 300ms ease-out;
  -ms-transition: opacity 300ms ease-out, visibility 300ms ease-out;
  -o-transition: opacity 300ms ease-out, visibility 300ms ease-out;
  transition: opacity 300ms ease-out, visibility 300ms ease-out;
}

.utils .language .langs li {
  background: #333;
  border-bottom: 1px solid #444;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

.utils .language .langs li:last-child {
  border-bottom: 0;
}

.utils .language .langs li:hover {
  background: #222;
}

.utils .language .langs li a span {
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  display: block;
  padding: .85rem;
  text-align:center;
}

.utils .language.active a.current:after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}

.utils .language.active .langs {
  opacity: 1;
  visibility: visible;
}

#header .utils .menu.on .language a.current {
  color: #007acc;
}

.btn-toggle-menu {
  display: block;
  width: 18px;
  height: 12px;
  position: relative;
}

.btn-toggle-menu span {
  height: 1px;
  background: #fff;
  display: block;
  position: absolute;
  top: 50%;
  text-indent: -999em;
  left: 50%;
  width: 18px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: -moz-transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -ms-transition: -ms-transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: -o-transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 300ms cubic-bezier(0.86, 0, 0.07, 1);
}

.btn-toggle-menu span:before, .btn-toggle-menu span:after {
  width: 18px;
  height: 1px;
  background: #fff;
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.86, 0, 0.07, 1), width 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: -moz-transform 300ms cubic-bezier(0.86, 0, 0.07, 1), width 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -ms-transition: -ms-transform 300ms cubic-bezier(0.86, 0, 0.07, 1), width 300ms cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: -o-transform 300ms cubic-bezier(0.86, 0, 0.07, 1), width 300ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 300ms cubic-bezier(0.86, 0, 0.07, 1), width 300ms cubic-bezier(0.86, 0, 0.07, 1);
}

.btn-toggle-menu span:before {
  -webkit-transform: translate(-50%, -5px);
  -moz-transform: translate(-50%, -5px);
  -ms-transform: translate(-50%, -5px);
  -o-transform: translate(-50%, -5px);
  transform: translate(-50%, -5px);
}

.btn-toggle-menu span:after {
  -webkit-transform: translate(-50%, 5px);
  -moz-transform: translate(-50%, 5px);
  -ms-transform: translate(-50%, 5px);
  -o-transform: translate(-50%, 5px);
  transform: translate(-50%, 5px);
}

.btn-toggle-menu.active span {
  width: 0;
  -webkit-transform: translateY(-2px) rotate(-180deg);
  -moz-transform: translateY(-2px) rotate(-180deg);
  -ms-transform: translateY(-2px) rotate(-180deg);
  -o-transform: translateY(-2px) rotate(-180deg);
  transform: translateY(-2px) rotate(-180deg);
}

.btn-toggle-menu.active span:after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  -o-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-toggle-menu.active span:before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
  -o-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

#header .gnb-sub-menus {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}

#header .gnb-sub-menus .gnb-sub-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: -1;
  visibility: hidden;
  -webkit-transition: visibility 350ms ease-out, z-index 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: visibility 350ms ease-out, z-index 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: visibility 350ms ease-out, z-index 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: visibility 350ms ease-out, z-index 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: visibility 350ms ease-out, z-index 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

#header .gnb-sub-menus .gnb-sub-menu ul {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  background: #d9570a;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding:24px;
  font-size: 0;
  text-align: center;
  -webkit-transition: opacity 350ms ease-out, -webkit-transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 350ms ease-out, -moz-transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 350ms ease-out, -ms-transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 350ms ease-out, -o-transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 350ms ease-out, transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 1;
  white-space:nowrap;
  overflow-x:auto;
}

#header .gnb-sub-menus .gnb-sub-menu ul li {
  display: inline-block;
  margin:0 16px;
}

#header .gnb-sub-menus .gnb-sub-menu ul li a {
  display: block;
}

#header .gnb-sub-menus .gnb-sub-menu ul li a span {
  font-size:16px;
  display: block;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  -webkit-transition: color 300ms ease-out;
  -moz-transition: color 300ms ease-out;
  -ms-transition: color 300ms ease-out;
  -o-transition: color 300ms ease-out;
  transition: color 300ms ease-out;
}

#header .gnb-sub-menus .gnb-sub-menu ul li a span:after {
  background: #fff;
  opacity: 0;
  left: 0;
  position: absolute;
  bottom: -.5rem;
  height: 1px;
  content: '';
  width: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

#header .gnb-sub-menus .gnb-sub-menu ul li a:hover span {
  color: #fff;
}

#header .gnb-sub-menus .gnb-sub-menu ul li a:hover span:after {
  width: 100%;
  opacity: 1;
}

#header .gnb-sub-menus .gnb-sub-menu.active {
  z-index: 2;
  visibility: visible;
}

#header .gnb-sub-menus .gnb-sub-menu.active ul {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

#header #search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  height: 0;
  overflow: hidden;
  height: 100vh;
  /*opacity: 0;*/
  visibility: hidden;
  -webkit-transition: opacity 800ms cubic-bezier(0.86, 0, 0.07, 1), visibility 800ms ease-out;
  -moz-transition: opacity 800ms cubic-bezier(0.86, 0, 0.07, 1), visibility 800ms ease-out;
  -ms-transition: opacity 800ms cubic-bezier(0.86, 0, 0.07, 1), visibility 800ms ease-out;
  -o-transition: opacity 800ms cubic-bezier(0.86, 0, 0.07, 1), visibility 800ms ease-out;
  transition: opacity 800ms cubic-bezier(0.86, 0, 0.07, 1), visibility 800ms ease-out;
}

#header #search .btn-close {
  display: block;
  position: absolute;
  right: 35px;
  top: 25px;
  -webkit-transition: opacity 400ms ease-out;
  -moz-transition: opacity 400ms ease-out;
  -ms-transition: opacity 400ms ease-out;
  -o-transition: opacity 400ms ease-out;
  transition: opacity 400ms ease-out;
  opacity: 0;
}

#header #search .btn-close svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

#header #search .btn-close svg path {
  fill: #fff;
}

#header #search .search-container {
  background: #007acc;
  position: relative;
  -webkit-transition: width 600ms cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: width 600ms cubic-bezier(0.86, 0, 0.07, 1);
  -ms-transition: width 600ms cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: width 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: width 600ms cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
  width: 0;
  overflow: hidden;
}

#header #search .search-box {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#header #search .search-box form {
  height: 11.5rem;
  display: flex;
}

#header #search .search-box form input {
  font-size: 2rem;
  font-weight: 500;
  font-family: inherit;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  display: block;
  flex: 1;
  color: #fff;
  padding: 0;
  margin: 0;
}

#header #search .search-box form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

#header #search .search-box form input::-ms-clear {
  display: none;
}

#header #search .search-box form button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 1.6875rem;
  height: 100%;
  text-indent: -999em;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

#header #search .search-box form button svg {
  display: block;
  width: 1.6875rem;
  height: auto;
}

#header #search .search-box form button svg path {
  fill: white;
  opacity: .2;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -ms-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}

#header #search:before {
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  content: '';
  -webkit-transition: opacity 600ms ease-out;
  -moz-transition: opacity 600ms ease-out;
  -ms-transition: opacity 600ms ease-out;
  -o-transition: opacity 600ms ease-out;
  transition: opacity 600ms ease-out;
  opacity: 0;
}

#header #search.active {
  opacity: 1;
  visibility: visible;
}

#header #search.active .btn-close {
  opacity: 1;
  -webkit-transition-delay: 800ms;
  -moz-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  transition-delay: 800ms;
}

#header #search.active .search-container {
  width: 100%;
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
  -webkit-transition-duration: 800ms;
  -moz-transition-duration: 800ms;
  -ms-transition-duration: 800ms;
  -o-transition-duration: 800ms;
  transition-duration: 800ms;
}

#header #search.active:before {
  opacity: 1;
  height: 100vh;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

#header #search .search-box form button.active svg path,
.no-mobile #header #search .search-box form button:hover svg path {
  opacity: 1;
}

@media screen and (max-width: 1440px) {
  #header #nav .gnb li {
    margin: 0 1.5rem;
  }
  #header #nav .gnb li a span {
    font-size: 1.3rem;
  }
  #header .gnb-sub-menus .gnb-sub-menu ul li a span {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1280px) {
  #header .brand a {
    width: 10rem;
  }
  #header #nav .gnb li {
    margin: 0 1.15rem;
  }
  #header #nav .gnb li a span {
    font-size: 1.2rem;
  }
  #header .gnb-sub-menus .gnb-sub-menu ul li a span {
    font-size: .9rem;
  }
}

@media screen and (max-width: 1080px) {
  #header #nav .gnb li {
    margin: 0 .8rem;
  }
  #header #nav .gnb li a span {
    font-size: 1rem;
  }

  #header .gnb-sub-menus .gnb-sub-menu ul li a span {
    font-size: 13px;
  }

  #header .header-container {
    padding: 30px 16px !important;
  }
  #header .brand a {
    width:120px;
  }
  #header #nav {
    display: none;
  }
  #header .utils .menu li.search {
    display: none;
  }
  #header .utils .menu li.toggle-menu {
    display: inline-block;
    margin-right:0;
  }
  #header .hide-when-mobile {
    display: none;
  }
  #header #search {
    display: none;
  }
  #header .gnb-sub-menus .gnb-sub-menu ul li {
    margin: 0 14px;
  }

  #header .gnb-sub-menus .gnb-sub-menu ul{padding: 17.5px;}
  #header .utils .menu li{margin:0 12px;}
  .utils .menu li.split{display:none;}

  .utils .language a.current{padding-right:0;}
  .utils .language .langs{left:-35px;}
  .utils .language .langs li a span{padding:.85rem 12px;}


}

@media screen and (max-width: 766px) {

  #header .header-container {
    padding: 26px 16px !important;}

  #header .brand a {
    width: 88px;
  }

  #header .utils .menu li {
    margin: 0 16px 0 0;
  }

  .utils .language .langs{top:-12px; left:-21px;}
  .utils .language .langs li a span{padding:.85rem 8px .85rem 12px;}

}

@media screen and (max-width: 480px) {
  #header .brand a {
    width: 6.285714285714286rem;
  }
}