body.fixed {
   width: 100%;
   height: 100%;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   overflow: hidden;
   position: fixed;
}
header{
   padding: 2.375rem 0;
   width: 100%;
   max-height: 6.25rem;
   background-color: transparent;
   position: sticky;
   top: 0;
   transition: .3s;
   z-index: 200;
}
header.main {
   background: #fff;
   border-bottom: none;
}
.hd_inner{
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}
header .lang{
   display: flex;
   gap: .3125rem;
   align-items: center;
}
header .lang > a{
   display: block;
   border-radius: 5px;
   padding: .25rem .8125rem;
   transition: 0.3s all;
}
header .lang > a:hover{
   background-color: var(--main-color);
   color: #fff;
}
header .lang > a.on{
   background-color: var(--main-color);
   color: #fff;
}
header .logo{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
header .menu ul{
   display: flex;
   align-items: center;
   gap: .625rem;
}
html:lang(en) header .menu ul{
   gap: 2.5rem;
}
header .menu ul li > a{
   font-size: .875rem;
}
html:lang(en) header .menu ul li > a{
   font-size: 1rem;
}
.hd-util{
   position: relative;
}
.menu-icon {
   cursor: pointer;
   position: relative;
   display: block;
   width: 16px;
   height: 16px;
   padding: .5rem;
   box-sizing: content-box;
}
.menu-icon span {
   position: absolute;
   display: block;
   width: 16px;
   height: 2px;
   background: #222;
   transition: .3s;
}

.menu-icon .line1{
   top: 10px;
   transform: rotate(0);
}
.menu-icon .line2{
   top: 50%;
   transform: translatey(-50%);
}
.menu-icon .line3{
   bottom: 10px;
   transform: rotate(0);
}

.menu-icon.active .line1{
   top: 16px;
   transform: rotate(-45deg);
}
.menu-icon.active .line2{
   width: 0;
   transform: translatey(-50%);
}
.menu-icon.active .line3{
   top: 16px;
   transform: rotate(45deg) ;
}

.full-menu {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   background: #fff;
   width: 100%;
   z-index: 999;
   height: 0;
   overflow: hidden;
   transition: 0.3s ease-in;
   box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.full-menu.active{
   height: 100%;
}
.logo , .hd-util {
   z-index: 1000;
}
.hd-util{
   display: none;
}
.mo-inner{
   max-width:800px;
   width: calc(100% - 1.875rem);
   margin: 0 auto;
   padding: 11.25rem 0 0;
}
.full-menu .mo-lang{
   display: flex;
   gap: .625rem;
}
.full-menu .mo-lang a{
   display: block;
   font-size: .875rem;
   line-height: 1.5;
   border-radius: 5px;
   padding: .0625rem .3125rem;
}
.full-menu .mo-lang a.on{
   color: #fff;
   background-color: var(--main-color);
}
.full-menu .full-ul{
   margin: 1.25rem 0 0;
   text-align: center;
   border-top: 1px solid var(--main-color);
}
.full-menu .full-ul li{
   border-bottom: 1px solid #E8E8E8;
}
.full-menu .full-ul li > a{
   display: block;
   padding: 1.25rem 0;
   font-size: 1.125rem;
}



@media (max-width:1200px){
   header{
      max-height: 3.75rem;
      padding: .9375rem 0;
      background: #fff;
      border-bottom:1px solid #EEEEEE;
      z-index: 1000;
   }
   header.main{
      border-bottom:1px solid #EEEEEE;
   }
   header .lang{
      display: none;
   }
   header .menu ul{
      display: none;
   }
   .hd_inner{
      justify-content: flex-end;
   }
   .hd_inner .logo > img{
      width: 6.875rem;
   }
   .full-menu {
      display: block;
   }
   .hd-util{
      display: block;
   }
}

@media (max-width:1024px){

}