header {line-height: 30px;border-bottom: 1px solid #ededed;padding: 25px 30px;}
.header_wrap {display: flex; justify-content: space-between;align-items: center;}
header img {height: 23px;margin-right: 5px;display: inline-block;vertical-align: middle;}
header .logo {display: inline-block; font-size: 15px; font-family: 'Pretendard-light';}
header .main_menu {display: flex; justify-content: space-evenly; align-items: center;width: 30%;}
.header_right .mobile {display: none;}

/* 踰꾪듉 hover */
header .main_menu li {overflow: hidden;}
header .main_menu li a {position: relative;overflow: hidden;transition: color 0.5s cubic-bezier(1, 0, 0, 1);}
header .main_menu li a::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: #555;
  /* background: linear-gradient(to left, #6060c3, #444459); */
  background-position: calc(100% - 1em) calc(100% - 0.25em);
  display: block;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
header .main_menu li:hover >  a::before {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  box-shadow: inset 00px 100px 0px 0px #6060c3;
}
header .main_menu li:hover >  a {color: #6060c3;}

header .logo span {font-family: 'Pretendard-semibold'; font-size: 16px; margin-right: 3px;}
header .header_right {display: inline-block; float: right;}
header .header_right .mypage_btn{padding: 10px;}
header .header_right .mypage_btn:hover{background-color: #f4f4f4; transition: .3s; border-radius: 10px;}
/* header .header_right .mem_logout:hover{background-color: #f4f4f4; transition: .3s; border-radius: 10px;} */
header .header_right i {margin: 0 10px;font-size: 20px;vertical-align:middle;}
header .mo_btn, header .main_menu_m {display: none;}
header .mem_logout{  display: inline-block;margin-left: 10px; color: #000;}


/* �쒕툝由� */
@media screen and (max-width:1200px){
  header .pc_btn, header .header_right .mypage_btn, .header_right .pc{display: none;}
  header .mo_btn {display: inline-block; cursor: pointer;}
  header .header_right i {font-size: 28px; margin: 0;vertical-align: top;}
  header .mem_logout{vertical-align: middle;}
  header .mobile {display: inline-block!important; margin-right: 10px;vertical-align: top;}

  /* 紐⑤컮�� 硫붾돱 */
  header .main_menu_m {position: relative; width: 100%;height: 100%;position: fixed;top: 0;bottom: 0;right: -100%;background-color: #fff;z-index: 9999;padding: 20px; transition: 1s; display: block;}
  header .main_menu_m .mobile_header {margin-bottom: 21px;display: inline-block;width: 100%;}
  header .main_menu_m .mobile_header img {height: 60px;}
  header .main_menu_m .mobile_header i {font-size: 30px;margin: 20px;float: right;}
  header .main_menu_m .mobile_menu {padding: 20px 40px 40px;}
  header .main_menu_m .mobile_menu li a {display: inline-block;font-size: 30px;padding: 10px 15px;margin-bottom: 41px;width: 100%;color: #333;}
  header .main_menu_m .mobile_menu li a i {font-size: 32px;vertical-align: middle; margin-right: 8px;color: #b7b7ed;}
  /* header .main_menu_m .mobile_menu li:nth-child(1) a i {color: #b7b7ed;}
  header .main_menu_m .mobile_menu li:nth-child(2) a i {color: #99a1d3;}
  header .main_menu_m .mobile_menu li:nth-child(3) a i {color: #97a3dd;}
  header .main_menu_m .mobile_menu li:nth-child(4) a i {color: #a9a5e4;} */
  header .mobile_menu_bottom {position: absolute; display: block; bottom: 19px; left: 0; right: 0; width: 100%; text-align: center; margin: 0 auto;}
  .mem_logout {display: none;}
}

/* 紐⑤컮�� */
@media screen and (max-width:767px){
  header {padding: 24px 15px 15px;}
  header img {vertical-align: text-bottom;}
  header .header_right i {margin: 0 3px;font-size: 21px;vertical-align: sub;}

  /* 紐⑤컮�� 硫붾돱 */
  header .main_menu_m .mobile_header {margin: 0;}
  header .main_menu_m .mobile_header i {font-size: 20px;margin: 5px;}
  header .main_menu_m .mobile_menu {padding: 0;margin-top: 20px;}
  header .main_menu_m .mobile_menu li a {font-size: 16px;padding: 10px 15px;margin-bottom: 5px;}
  header .main_menu_m .mobile_menu li a i {font-size: 27px;}
}