#header{position:fixed;left:0;top:0;width:100%;height:100px;z-index:1000;}
#header .header_inner{position:relative;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 200px);height:100%;margin:0 auto;z-index:2;}
#header::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,.06);transform:translateY(-100%);transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:1;}
#header .logo img{display:block;width:250px;filter:brightness(0) invert(1);transition:filter .4s ease;}
#header .gnb{width:1300px;}
#header .gnb ul{display:flex;justify-content:space-between;align-items:center;}
#header .gnb a{font-size:17px;font-weight:600;color:#fff;transition:color .4s ease;}

/* 스크롤 200px 이상 */
#header.scrolled::before{transform:translateY(0);}
#header.scrolled .logo img{filter:none}
#header.scrolled .gnb a{color:#222;}

#mb_header{display:none;}

@media(max-width:1800px){
#header .header_inner {width: calc(100% - 100px);}
  #header .gnb{width:1150px}
}

@media(max-width:1600px){
  #header .logo img{width:200px}
  #header .gnb{width:1000px}
  #header .gnb a{font-size:16px;}
}

@media(max-width:1400px){
  #header .header_inner {width:1400px;}
}


@media(max-width:768px){
  #header{display:none;}
 #mb_header{position:fixed;left:0;top:0;display:block;width:100%;height:70px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,.06);z-index:1000;}
  #mb_header .mb_header_inner{position:relative;display:flex;align-items:center;justify-content:space-between;width:90%;height:100%;margin:0 auto;z-index:3;}
  #mb_header .mb_logo img{display:block;width:170px;}

  #mb_header .mb_menu_btn{position:relative;width:24px;height:20px;padding:0;background:none;border:0;z-index:3;}
  #mb_header .mb_menu_btn i{position:absolute;left:0;display:block;width:100%;height:2px;background:#222;transition:all .35s ease;}
  #mb_header .mb_menu_btn i:nth-child(1){top:0;}
  #mb_header .mb_menu_btn i:nth-child(2){top:8px;}
  #mb_header .mb_menu_btn i:nth-child(3){top:16px;}

  #mb_header .mb_menu_btn.on i:nth-child(1){top:10px;transform:rotate(45deg);}
  #mb_header .mb_menu_btn.on i:nth-child(2){opacity:0;}
  #mb_header .mb_menu_btn.on i:nth-child(3){top:10px;transform:rotate(-45deg);}

  #mb_header .mb_nav{position:fixed;right:-100%;top:70px;width:100%;height:calc(100vh - 70px);height:calc(100dvh - 70px);padding:30px 5% 50px;background:#fff;overflow-y:auto;transition:right .5s cubic-bezier(.22,1,.36,1);z-index:2;}
  #mb_header .mb_nav.on{right:0;}
  #mb_header .mb_nav li{border-bottom:1px solid #eee;}
  #mb_header .mb_nav a{display:block;padding:20px 0;font-size:18px;font-weight:600;color:#222;}
}