/** PC 헤터**/
header {width: 100%; background:rgba(0, 0, 0, 0.6) ; position: absolute; left: 0; top: 0; backdrop-filter: blur(30px); z-index:99; }
header div.header_container {width: 100%; max-width: 1300px; margin:0 auto; box-sizing: border-box;}
div.gnb_wrap {display: flex; justify-content: space-between ;align-items: center   ; height: 5rem ;}
div.gnb_wrap div.logo a {color:#fff; min-height:50px; font-weight: bold; display: block; text-align: center; padding-left: 60px; background: url(../img/logo.png) no-repeat left top; }  
div.gnb_wrap div.logo a p {font-size: 2rem; font-weight: bold; margin-bottom: 0.2rem; ;}
div.gnb_wrap div.logo a span {display: block; font-size: 0.9rem; letter-spacing: 1.5px; ;;}

div.gnb_wrap div.quick_link { display: flex; gap:0.5rem; ;}
div.gnb_wrap div.quick_link a.link {background:#0fa4dc; color:#ffff; border-radius: 5px; display: block;  height:50px; line-height:50px; ; font-weight: bold; font-size: 1rem; padding: 0 0.8rem; ; }

.gnb ul.gnb_inner {display: flex; ;}
.gnb ul.gnb_inner > li > a:hover {color:#f4b800}
.gnb a {display: block;color: #fff; padding: 15px; font-size: 1.125rem; } 
.dropdown {position: relative;}
.dropdown-content { display: none; position: absolute; background-color: #555; min-width: 120px; opacity: 0; transition: opacity 0.5s ease;}
.dropdown:hover .dropdown-content { display: block; opacity: 1;}
.dropdown-content li { }
.dropdown-content a {  color: #fff;   font-size: 1rem; ;}
.dropdown-content a:hover {   color:#f4b800}

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

@media screen and (max-width:1024px){
   .gnb {display: none; } 
   header div.header_container {padding: 0 1rem; }
}
 

 

 /**   header mobile
  ************************************************/
  .header__btn-gnb {display:flex; align-items: center; justify-content: center; gap: 2.0556rem;  outline:0; background-color:#0fa4dc; color:#fff; cursor:pointer; white-space: nowrap;   width:50px; height:50px; ;}
  .header__btn-gnb .bar{display: flex; flex-direction: column; justify-content: space-between; width:18px; height:14px}
  .header__btn-gnb .bar > span{position: relative; width:100%; height:2px; background-color:#fff; overflow:hidden; transition: background 300ms}
  .header__btn-gnb .bar > span:after{content:''; position:absolute; left:0; top:0; width:0; height:2px; background-color:#fff; transition: width 300ms}
  .header__btn-gnb .bar > span:nth-child(1){transition-delay:.2s}
  .header__btn-gnb .bar > span:nth-child(2){transition-delay:.4s}
  .header__btn-gnb .bar > span:nth-child(3){transition-delay:.6s}
  .header__btn-gnb:hover .bar > span{background-color:transparent}
  .header__btn-gnb:hover .bar > span:after{width:100%;  transition-delay: 0.2s;}
  .header__btn-gnb:hover .bar > span:nth-child(1):after{transition-delay:.4s}
  .header__btn-gnb:hover .bar > span:nth-child(2):after{transition-delay:.6s}
  .header__btn-gnb:hover .bar > span:nth-child(3):after{transition-delay:.8s}


  @media screen and (max-width: 400px) { 
   .header__btn-gnb {width:40px; height: 40px; }
   div.gnb_wrap div.quick_link a.link {height:40px; line-height:40px; padding: 0 0.3rem;  }
   header div.header_container {padding: 0 0.5rem; }
   div.gnb_wrap div.logo a p {padding-top:0.2rem; }
  }


  .header-mobile__overlay{z-index:9999; position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
  .header-mobile-wrap {z-index:9999; position:fixed; top:0; right:-100%; display:none; background-color:#0fa4dc; padding:5em 0 2em; max-width:960px; width:80%; height:100%; box-sizing:border-box; overflow-y:auto;}
  .header-mobile-wrap.is-active{right:0;}
  .header-mobile__close-button{position:absolute; top:1em; right:1em; width:50px; height:50px; text-indent:-9999em; overflow:hidden; cursor:pointer; border:none; background:rgba(0, 0, 0, 0.3); }
  .header-mobile__close-button div{position:absolute; width:0; height:2px; background-color:#fff; top:50%; left:50%;}
  .header-mobile__close-button:hover div{background:#fff;}
  .header-mobile__close-button div:first-child{transform:translate(-50%, -50%) rotate(45deg); transition:width 0.4s 0.5s, background-color 0.2s;}
  .header-mobile__close-button div:last-child{transform:translate(-50%, -50%) rotate(-45deg); transition:width 0.4s 0.7s, background-color 0.2s;}
  .header-mobile__close-button.is-active div{width:60%;}
  .header-mobile__sta{display: flex; align-items: center; margin: 1rem 2rem;}
  .header-mobile__sta a{display:block; font-size:1.125rem; color:#fff; border-right:1px solid #fff;  } 
  .header-mobile__sta a:last-child {border-right: 0;  }
  .header-mobile__sta__signup{position:relative; width:auto !important; padding-right:1.5em; margin-right:1.5em;}

  .header-mobile__gnb{}
  .header-mobile__gnb-item:first-child {border-top:1px solid rgba(255,255,255,.4);}
  .header-mobile__gnb-item{border-bottom:1px solid rgba(255,255,255,.4); cursor: pointer;}
  .header-mobile__gnb-link{position:relative; display:block; padding:1.5em 2em; font-size:1.125rem; color:#fff; font-weight:500}
  .header-mobile__gnb-link .icon-arrow{position:absolute; right:2em; top:50%; margin-top:-10px; width:20px; height:20px}
  .header-mobile__gnb-link .icon-arrow:before,
  .header-mobile__gnb-link .icon-arrow:after{content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background-color:#fff; transition:transform 300ms}
  .header-mobile__gnb-link a {color:#fff; }
  .header-mobile__gnb-link .icon-arrow:before{transform:rotate(90deg)}
  .header-mobile__gnb-link.is-active .icon-arrow:before{transform:rotate(180deg)}
  .header-mobile__gnb-link.is-active .icon-arrow:after{transform:rotate(180deg)}
  .header-mobile__gnb-depth{display:none; background-color:#fff;}
  .header-mobile__gnb-depth__link{display:block; padding:1.5em 2.35em; border-bottom:1px solid rgba(0,0,0,.1)}