header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 115px;
  background: #fff;
  z-index: 10000;
  border-bottom: 1px solid #C1C1C1;
}

header.main_header { border: 0;}
.headerWrap { max-width: 1200px; margin: 0 auto; padding: 0 15px;}
.headerWrap:after { content: ''; clear: both; display: block;}
.headerWrap .logo { float: left; margin: 30px 30px 0px 0; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.headerWrap .logo a { display: block;}
.headerWrap .logo a img { display: block; width: 203px; height: auto;}
.headerWrap .menubox {float: left;margin-top: 45px;width: calc(100% - 540px);}
.headerWrap .menubox .mmenu {float: left;width: 100%;margin: auto auto;}
.headerWrap .menubox .mmenu:after {content: ""; clear: both; display: block;}
.headerWrap .menubox .mmenu li{float: left;width: 25%;text-align: center;}
.headerWrap .menubox .mmenu li a {}
.headerWrap .menubox .mmenu li a span {color: #000;font-family: notoM;font-size: 18px; }
.headerWrap .menubox .mmenu li a:hover span, .headerWrap .menubox .mmenu li a.on span {color: #438CFD;font-family: notoB;}

.rightbox { float: right; margin: 40px 0;}
.rightbox .langOption { line-height: 35px; float: left;}
.rightbox .langOption ul { float: left;}
.rightbox .langOption li {  float: left;  position: relative;}
.rightbox .langOption li:first-child:after {  content:'|';  position: absolute;  top: 0px;  right: 8px;  color: #999; font-family: poppinsR;  font-size: 11px;}
.rightbox .langOption li a {  display: block;  color: #999;  font-family: 'poppinsB';  font-size: 14px;  line-height: 35px;}
.rightbox .langOption li a:nth-of-type(1) {  margin-right: 10px;  padding-right: 10px;}
.rightbox .langOption li a img {display: none;}
.rightbox .langOption li.active a, .rightbox .langOption li:hover a {  color: #020202;}

.rightbox .loginbox { float: left;}
.rightbox .loginbox ul { border-radius: 5px; }
.rightbox .loginbox ul::after {content: ''; display: block; clear: both;}
.rightbox .loginbox ul.login { background: #2F5A72; }
.rightbox .loginbox ul.logout {background: #438CFD;padding: 0 11px;}
.rightbox .loginbox ul li { float: left; ;}
.rightbox .loginbox ul li a {display: block; }
.rightbox .loginbox ul.login li a {padding: 0 31px;}
.rightbox .loginbox ul.logout li:first-child a {padding-right: 10px;margin-right: 10px;}
.rightbox .loginbox ul.logout li:first-child a span::after {  content:'|';  position: relative;  top: 0px;  right: -10px;  color: #fff;  font-family: poppinsR;  font-size: 13px; }
.rightbox .loginbox ul li a span {color: #FFF;font-family: poppinsSB;font-size: 14px;display: block;height: 35px;line-height: 35px;}
.mobile_menu {display: none;}


@media all and (max-width: 1024px) { 
  header { height: 103px;}
  .headerWrap .logo {margin: 24px 0px 0px 0;}
  .headerWrap .menubox {margin-top: 39px;width: calc(100% - 310px);}

  .rightbox {display: block;margin: 34px 0 0px 0;width: 90px;}
  .rightbox:after {content: ''; display: block; clear: both;}
  .rightbox .langOption {float: left;/* width: 25px; */}
  .rightbox .langOption ul {position: relative;width: 25px;min-height: 25px;height: auto;top: 5px;}
  .rightbox .langOption ul:hover li:not(.active) { padding-top: 30px;}
  .rightbox .langOption ul li {position: absolute;top: 0; animation-duration: 0.5s;}
  .rightbox .langOption ul li:first-child:after {  content:''; }
  .rightbox .langOption ul li a {position: relative;display: block;font-size: 0;line-height: 1;}
  .rightbox .langOption ul li.active a {z-index: 100;}
  .rightbox .langOption ul li a img {display: block;width: 25px;height: 25px;}
  
  .rightbox .loginbox ul {width: 60px;}
  .rightbox .loginbox ul:after {content: ''; display: block; clear: both;}
  .rightbox .loginbox ul.login { background: 0;}
  .rightbox .loginbox ul.logout {padding:0;background: 0;}
  .rightbox .loginbox ul.logout li:first-child {display:none; } 
  .rightbox .loginbox ul li {width: 100%;text-align: center;position: relative;}
  .rightbox .loginbox ul li a {display: block;width:30px;height: 30px;border-radius: 5px;margin: auto;}
  .rightbox .loginbox ul.login li a {background: #2F5A72 url(/resources/common/images/main/icon/icon_login.png) no-repeat center / 22px 22px;padding: 0;}
  .rightbox .loginbox ul.logout li a {background: #438CFD url(/resources/common/images/main/icon/icon_mypage.png) no-repeat center / 22px 22px;}
  .rightbox .loginbox ul li a span {width: 100%;height: auto;color: #666;font-size: 10px;line-height: 1;position: absolute;top: 35px;left: 50%;transform: translateX(-50%);}
} 


@media all and (max-width: 767px) {
  header {height: 60px;}
  .headerWrap {  padding: 0 15px 0 5px;}
  .headerWrap .logo {margin: 5px 0 0 0;}  
  .headerWrap .logo a img {width: 175px;height: 50px;}

  .menubox, .rightbox { display: none;}
  .menubtn { float: right; position: relative; top: 16px; width: 24px; height: 24px;} 
  .menubtn img {width: 100%;height: auto;display: none;} 
  .menubtn img.on { display:block;} 
 
  .mobile_menu {display: block;position: absolute;right: 0;top: 59px;width: 180px;height: 100vh;background: #fff;transform: translateX(100%);transition: 0.5s;transition-timing-function: ease-in-out;z-index: 10000;}
  .mobile_menu.on {transform: translateX(0px);}
  .mobile_menu .inner {position: relative;z-index: 100;padding: 10px;}
 
  .mobile_menu .langOption { margin-bottom: 10px;}
  .mobile_menu .langOption ul {}
  .mobile_menu .langOption ul::after { content: ''; display: block; clear: both;}
  .mobile_menu .langOption ul li {float: left;width: calc(50% - 5px);}
  .mobile_menu .langOption ul li:nth-of-type(1) { margin-right: 10px;}
  .mobile_menu .langOption ul li a {display: block;width: 100%;padding: 8px 0 7px 0;border-radius: 5px;border: 1px solid #CFCFCF;background: #CFCFCF;color: #fff;font-family: robotoB;font-size: 14px;text-align: center;}
  .mobile_menu .langOption ul li.active a {border: 1px solid #438CFD; background: #fff; color: #438CFD;}
  
  .mobile_menu .loginbox { margin-bottom: 10px;}
  .mobile_menu .loginbox ul {width: 100%;border-radius: 5px;padding: 11px 0 12px 0;}
  .mobile_menu .loginbox ul::after { content: ''; display: block; clear:both; }
  .mobile_menu .loginbox ul.login { background: #2F5A72; }
  .mobile_menu .loginbox ul.logout { background: #438CFD;  }
  .mobile_menu .loginbox ul li { position: relative; text-align: center;}
  .mobile_menu .loginbox ul li a {display: block;width: 100%;color: #FFF;font-family: robotoM;font-size: 14px;}
  .mobile_menu .loginbox ul.logout li { float: left; width: 50%; }
  .mobile_menu .loginbox ul.logout li:first-child::after {content: '';width: 1px;height: 18px;background-color: #fff;position: absolute;top: 0px;right: 0;}
  .mobile_menu .loginbox ul.logout li a {}

  .mobile_menu .mmenu {}
  .mobile_menu .mmenu li {width: 100%; margin-bottom: 10px;}
  .mobile_menu .mmenu li a {display: block;width: 100%;padding: 9px 15px 8px 15px;border-radius: 50px;border: 1px solid #E0E7EC;color: var(--basic-text);font-family: notoR;font-size: 15px;}

  .mobile_bg {display: none;position:fixed;top: 60px;left:0;width: 100%;height: 100%;background-color:rgba(0,0,0,0.4);z-index:1000;}
  .mobile_bg.on {display: block;}

}