.header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;
  padding:0 50px;
  height:80px;
  background-color:#2005eb;
  display:flex;
  justify-content: space-between;
  align-items: center;
  transition: .2s ease-in-out;
}

.header .logo a {
  display:block;
  width:70px;
  height:33px;
  background:url('/assets/images_flex/logo_sub.svg') center center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/logo_sub.png') type("image/png"));
  background-size:100%;
  text-indent:-9999px;
}

.header .sub-menu {
  display:none;
  position:absolute;
  top:40px;
  background-color:#ffffff;
  border-radius: 4px;
  overflow:hidden;
  box-shadow: 0 12px 15px 0 rgba(0, 9, 67, 0.08);
  z-index: 2;
}

.header .sub-menu li{
  border-bottom:1px solid #edeef3;
}

.header .sub-menu li a{
  display:block;
  padding:12px ;
}

.header .sub-menu li:last-child{
  border:none;
}

.header .gnb-pc .main-menu>li{
  display:inline-block;
  padding:0 30px;
  position:relative;
}

.header .gnb-pc .main-menu>li>a{
  color:#ffffff;
  font-size: 18px;
  font-weight:600;
  transition: color .2s ease-in-out;
}

.header .gnb-pc .main-menu>li>a:hover{
  color:#f6ff00;
}

.header .gnb-pc .main-menu .on>a{
  color:#f6ff00;
}

.header .gnb-pc .sub-menu{
  width:120%;
  left:0;
}

.header .gnb-pc .sub-menu li a{
  font-size: 14px;
  font-weight: 500;
  color: #222222;
}

.header .util .user-profile, .header .util .user-more{
  display:inline-block;
  vertical-align: middle;
}

.header .util .user-profile a{
  display:flex;
  align-items: center;
}

.header .util .user-profile-img{
  display:inline-block;
  position:relative;
}

.header .util .user-profile-img img{
  width:38px;
  height:38px;
  border-radius: 19px;
  overflow:hidden;
}

.header .util .user-profile-badge{
  display:inline-block;
  display:none;
  width:20px;
  height:20px;
  line-height:20px;
  font-weight:700;
  font-size:13px;
  text-align:center;
  color:#FFFFFF;
  overflow:hidden;
  border-radius:18px;
  background:#F60472;
  position:absolute;
  right:0;
  top:50%;
}

.header .util .user-profile-name{
  padding: 0 32px 0 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.header .util .user-more{
  position:relative;
}

.header .util .user-more>a{
  display:block;
  width:32px;
  height:18px;
  background:url('/assets/images_flex/btn_gnb_more.svg') center center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/btn_gnb_more.png') type("image/png"));
  text-indent: -9999px;
  transition: background-image .2s ease-in-out;
}

.header .util .on>a{
  background-image: url('/assets/images_flex/btn_gnb_more_on.svg');
  background-image: -webkit-image-set(url('/assets/images_flex/btn_gnb_more_on.png') type("image/png"));
}

.header .util .user-more .sub-menu{
  right:0;
}

.header .util .user-more .sub-menu a{
  min-width:96px;
  padding-left:48px;
  font-size:13px;
  font-weight: 600;
  color:#6c707f;
}

.header .util .user-more .subscription{
  text-align:center;
  background-color:#F6FF00;
}

.header .util .user-more .subscription a{
  padding:13px 10px;
  color:#2005EB;
  font-weight:800;
}

.header .util .user-more .subscription a:hover{
  color:#EC0F69;
}

.header .util .settings a{
  background:url('/assets/images_flex/icon_settings.svg') 12px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_settings.png') type("image/png"));
  background-size: 24px;
}

.header .util .order a{
  background:url('/assets/images_flex/icon_order.svg') 12px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_order.png') type("image/png"));
  background-size: 24px;
}

.header .util .faqs a{
  background:url('/assets/images_flex/icon_faqs.svg') 14px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_faqs@2x.png') type("image/png"));
  background-size: 20px;
}

.header .util .language a{
  background:url('/assets/images_flex/icon_language.svg') 12px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_language@2x.png') type("image/png"));
  background-size: 24px;
}

.header .util .logout a{
  background:url('/assets/images_flex/icon_logout.svg') 12px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_logout.png') type("image/png"));
  background-size: 24px;
}

.header .util .order-history a{
  background:url('/assets/images_flex/icon_order_history.svg') 12px center no-repeat;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_order_history.png') type("image/png"));
  background-size: 24px;
}

.header .gnb-mobile-btn, .header .gnb-mobile-layer{
  display:none;
}

/* logout - pc */
.header-logout{
  background: #ffffff;
}

.header-logout .logo a {
  background:url('/assets/images_flex/logo.svg') no-repeat center center;
  background-image: -webkit-image-set(url('/assets/images_flex/logo.png') type("image/png"));
  background-size: 100%;
}

.header-logout .gnb-pc .main-menu>li>a{
  color:#222222;
  font-weight: 700;
}

.header-logout .gnb-pc .main-menu>li>a:hover{
  color:#2005EB;
}

.header-logout .gnb-pc .main-menu .on>a{
  color:#2005EB;
}

.header-logout .util .login a{
  display: block;
  width:120px;
  line-height: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: Montserrat, sans-serif;
  color:#2005EB;
  border:1px solid #2005EB;
  transition: .2s ease-in-out;
}

.header-logout .util .login:hover a{
  transform: translateY(-3px);
  background-color: #2005eb;
  color:#ffffff;
  box-shadow: 0 10px 16px 0 rgba(0, 22, 162, .3);
}

/* Floating Fixed Header */
.gnb_fixed .header-logout {
  box-shadow:0px 10px 19px 0px rgba(0, 22, 162, 0.1);
}

/* language 추가 */
.header .util .user-more .language a{
  position: relative;
}

.header .util .user-more .language a::after{
  content:"";
  width:8px;
  height:8px;
  position: absolute;
  right:15px;
  top:50%;
  transform: translateY(-50%);
  background: url('/assets/images_flex/ico_list_open.svg') no-repeat center center;
  background-image: -webkit-image-set(url('/assets/images_flex/ico_list_open.png') type("image/png"));
  background-size: contain;
}

.header .util .user-more .language.on a::after{
  background-image: url('/assets/images_flex/ico_list_close.svg');
  background-image: -webkit-image-set(url('/assets/images_flex/ico_list_close.png') type("image/png"));
}

.header .util .user-more .language .language-list{
  display: none;
  padding:10px 0;
}

.header .util .user-more .language li{
  padding-top:8px;
  text-indent: 46px;
  border-bottom: none;
}

.header .util .user-more .language li:first-child{
  padding-top: 0px;
}

.header-logout .util {
  display: flex;
}

.header-logout .util .language{
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.header-logout .util .language .lang-btn{
  display: flex;
  align-items: center;
}

.header-logout .util .language .lang-btn span{
  display: inline-block;
  width:24px;
  height: 24px;
  background: url('/assets/images_flex/icon_language.svg') no-repeat center center;
  background-image: -webkit-image-set(url('/assets/images_flex/icon_language@2x.png') type("image/png"));
  background-size: contain;
}

.header-logout .util .language .lang-btn i{
  content:"";
  display: inline-block;
  width:8px;
  height:8px;
  margin-left: 12px;
  background: url('/assets/images_flex/ico_list_open.svg') no-repeat center center;
  background-image: -webkit-image-set(url('/assets/images_flex/ico_list_open.png') type("image/png"));
  background-size: contain;
}

.header-logout .util .language.on .lang-btn i{
  background-image: url('/assets/images_flex/ico_list_close.svg');
  background-image: -webkit-image-set(url('/assets/images_flex/ico_list_close.png') type("image/png"));
}

.header-logout .util .language-list{
  position: absolute;
  right:0;
  bottom:0;
  transform: translateY(100%);
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: none;
}

.header-logout .util .language-list li{
  padding:12px 16px;
  border-top: 1px solid #EDEEF3;
}

.header-logout .util .language-list li:first-child{
  border-top: none;
}

.header-logout .util .language-list li button{
  width:100%;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color:#6C707F;
}

/*########### 미디어쿼리 ##########*/
@media all and (min-width:1024px) and (max-width:1366px) {
  .header{
    padding:0 20px;
  }
  
  .header .util .user-profile-name{
    width: 55px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    padding: 0 32px 0 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
  }

  .header .gnb-pc .main-menu>li{
    padding:0 1.5vw;
  }

  .header .gnb-pc .main-menu>li>a{
    font-size: 16px;
  }
}

@media all and (max-width:1023px) {
  .header{
    width:100%;
    height:54px;
    box-sizing: border-box;
    padding:0 16px;
    position:fixed;
    left:0;
    top:0;
    z-index:10;
  }

  .header .logo a {
    width:38px;
  }

  .header .util .user-profile-img img{
    width:28px;
    height:28px;
    border-radius: 14px;
  }

  .header .util .user-profile-badge{
    width:10px;
    height:10px;
    text-indent:-9999px;
  }

  .header .gnb-pc, .header .util .user-profile-name, .header .util .user-more{
    display:none;
  }

  .header .gnb-mobile-btn{
    display:inline-block;
    width:36px;
    height:36px;
    margin-left:5px;
    vertical-align: middle;
  }

  .header .gnb-mobile-btn button{
    width:100%;
    height:100%;
    text-indent: -9999px;
    background:url('/assets/images_flex/btn_menu.svg') center center no-repeat;
    background-image: -webkit-image-set(url('/assets/images_flex/btn_menu.png') type("image/png"));
  }

  .header .gnb-mobile-btn .on{
    background-image:url('/assets/images_flex/btn_menu_close.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/btn_menu_close.png') type("image/png"));
  }

  .header .gnb-mobile-layer{
    position:fixed;
    left:0;
    top:54px;
    width:calc(100% - 32px);
    height:calc(100% - 54px);
    padding:0 16px;
    background-color:#2005eb;
    overflow:auto;
  }

  .header .gnb-mobile-layer ul{
    padding:50px 0 30px;
  }

  .header .gnb-mobile-layer li{
    padding-top:18px;
  }

  .header .gnb-mobile-layer li:first-child{
    padding:0;
  }

  .header .gnb-mobile-layer .language{
    padding-top: 20px;
  }

  .header .gnb-mobile-layer .language a{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  .header .gnb-mobile-layer .language a i{
    font-style: normal;
    position: relative;
  }

  .header .gnb-mobile-layer .language a i::after{
    content:"";
    width:8px;
    height: 8px;
    position: absolute;
    right:-20px;
    top:50%;
    transform: translateY(-50%);
    background:url('/assets/images_flex/ico_list_open_blue.svg') no-repeat center center;
    background-image: -webkit-image-set(url('/assets/images_flex/ico_list_open_blue@2x.png') type("image/png"));
    background-size: contain;
  }
  
  .header .gnb-mobile-layer .language.on a i::after{
    background-image:url('/assets/images_flex/ico_list_close_blue.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/ico_list_close_blue@2x.png') type("image/png"));
  }

  .header .gnb-mobile-layer .language a .lang-now{
    color: #f6ff00;
    font-weight: 600;
  }

  .header .gnb-mobile-layer .language a .lang-now::after{
    content:attr(data-lang-now);
  }

  .header .gnb-mobile-layer .language .language-list{
    width:100vw;
    padding:8px 0;
    margin-top: 10px;
    margin-left: -16px;
    background-color: #5844F0;
    display: none;
    box-shadow: none;
    border-radius: 0;
  }

  .header .gnb-mobile-layer .language .language-list li{
    padding-top:10px;
    text-indent: 42px;
  }

  .header .gnb-mobile-layer .language .language-list li:first-child{
    padding-top: 0;
  }
  
  .header .gnb-mobile-layer .language .language-list button{
    font-size: 14px;
    color:#FFFFFF;
  }

  .header .gnb-mobile-layer a{
    color:#ffffff;
  }

  .header .gnb-mobile-layer .subscription a{
    color:#f6ff00;
  }

  .header .gnb-mobile-layer .gnb-mobile{
    font-size:24px;
    font-weight:600;
    border-bottom:1px solid #3846fa;
  }

  .header .gnb-mobile-layer .util{
    font-size:16px;
    color:#d9e2ff;
  }

  .header .gnb-mobile-layer .util a{
    display:block;
    width: 100%;
    background-position:right center;
    background-repeat: no-repeat;
  }

  .header .gnb-mobile-layer .profile a{
    background-image:url('/assets/images_flex/icon_profile_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_profile_m.png') type("image/png"));
  }

  .header .gnb-mobile-layer .setting a{
    background-image:url('/assets/images_flex/icon_setting_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_setting_m.png') type("image/png"));
  }

  .header .gnb-mobile-layer .faqs a{
    background-image:url('/assets/images_flex/icon_faqs_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_faqs_m.png') type("image/png"));
    background-position: right 3px center;
  }

  .header .gnb-mobile-layer .order a{
    background-image:url('/assets/images_flex/icon_order_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_order_m.png') type("image/png"));
  }

  .header .gnb-mobile-layer .language a{
    background: none;
  }

  .header .gnb-mobile-layer .logout a{
    background-image:url('/assets/images_flex/icon_logout_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_logout_m.png') type("image/png"));
  }

  .header .gnb-mobile-layer .order-history a{
    background-image:url('/assets/images_flex/icon_order_history_m.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/icon_order_history_m.png') type("image/png"));
  }

  /* logout - mobile */
  .util .login{
    display: none;
  }

  .header-logout.on{
    background-color: #EAECF3;
  }

  .header-logout .gnb-mobile-btn button{
    width:100%;
    height:100%;
    text-indent: -9999px;
    background:url('/assets/images_flex/btn_gnb_menu_dark.svg') center center no-repeat;
    background-image: -webkit-image-set(url('/assets/images_flex/btn_gnb_menu_dark.png') type("image/png"));
    background-size: 20px;
  }
  
  .header-logout .gnb-mobile-btn .on{
    background-image:url('/assets/images_flex/btn_gnb_close.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/btn_gnb_close.png') type("image/png"));
  }

  .header-logout .gnb-mobile-layer{
    background-color: #EAECF3;
  }

  .header-logout .gnb-mobile-layer a{
    color:#222222;
  }
  
  .header-logout .gnb-mobile-layer .user {
    padding-top:30px;
  }

  .header-logout .gnb-mobile-layer .user .box {
    padding:16px 18px;
    border-radius:8px;
    background:#FFFFFF;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  }

  .header-logout .gnb-mobile-layer .user .txt{
    font-size: 14px;
  }

  .header-logout .gnb-mobile-layer .user .txt strong{
    font-size: 18px;
  }

  .header-logout .gnb-mobile-layer .user .btns{
    display: flex;
    justify-content: space-between;
    padding:12px 0 0;
  }

  .header-logout .gnb-mobile-layer .user .btns li {
    width:48%;
    padding:0;
  }

  .header-logout .gnb-mobile-layer .user .btns li a{
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    color:#6c707f;
    background: #eaecf3;
  }

  .header-logout .gnb-mobile-layer .user .btns li .btn-login{
    color:#ffffff;
    background-color: #2005eb;
  }

  .header-logout .gnb-mobile-layer .gnb-mobile{
    border-color: #c3c5cc;
    font-size: 20px;
    font-weight: 700;
    text-indent: 16px;
  }

  .header-logout .gnb-mobile-layer .sns-link{
    display: flex;
    padding-left: 16px;
  }

  .header-logout .gnb-mobile-layer .sns-link li{
    padding-top:0;
    padding-right: 8px;
  }

  .header-logout .gnb-mobile-layer .sns-link a{
    width:36px;
    height: 36px;
    border-radius: 50%;
    background-color: #222222;
    text-indent: -9999px;
    background-position: center center;
    background-size: auto 50%;
  }

  .header-logout .gnb-mobile-layer .sns-link .instagram a{
    background-image:url('/assets/images_flex/m_ico_sns_instagram.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/m_ico_sns_instagram.png') type("image/png"));
  }
  
  .header-logout .gnb-mobile-layer .sns-link .facebook a{
    background-image:url('/assets/images_flex/m_ico_sns_facebook.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/m_ico_sns_facebook.png') type("image/png"));
  }
  
  .header-logout .gnb-mobile-layer .sns-link .youtube a{
    background-image:url('/assets/images_flex/m_ico_sns_youtube.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/m_ico_sns_youtube.png') type("image/png"));
  }
  
  .header-logout .gnb-mobile-layer .sns-link .twitter a{
    background-image:url('/assets/images_flex/m_ico_sns_twitter.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/m_ico_sns_twitter.png') type("image/png"));
  }

  /* 비로그인 language */
  .header-logout .util .language{
    display: none;
    margin: 0;
  }
  
  .header-logout .util,
  .header-logout .gnb-mobile-layer .language{
    display: block;
  }
  
  .header-logout .gnb-mobile-layer .language a{
    padding:0 16px;
    box-sizing: border-box;
  }
  
  .header-logout .gnb-mobile-layer .language a i::after{
    background-image:url('/assets/images_flex/ico_list_open_dark.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/ico_list_open_dark.png') type("image/png"));
  }
  
  .header-logout .gnb-mobile-layer .language.on a i::after{
    background-image:url('/assets/images_flex/ico_list_close_dark.svg');
    background-image: -webkit-image-set(url('/assets/images_flex/ico_list_close_dark.png') type("image/png"));
  }
  
  .header-logout .gnb-mobile-layer .language a .lang-now{
    color: #2005eb;
  }
  
  .header-logout .gnb-mobile-layer .language-list{
    position: static;
    transform: none;
    background-color: #ffffff !important;
  }

  .header-logout .gnb-mobile-layer .language .language-list li,
  .header-logout .gnb-mobile-layer .language .language-list li:first-child{
    padding:10px 0;
    border-top: none;
  }

  .header-logout .gnb-mobile-layer .language .language-list button{
    color:#5D6B7E;
  }
  

  /* Floating Fixed Header */
  .gnb_fixed .header {
    height:45px;
  }

  .gnb_fixed .header .gnb-mobile-layer{
    height: calc(100% - 45px);
    top:45px;
  }
}