html, body{background:var(--page_color);}
.wrap{position:relative; overflow:hidden; width:100%;}

/* header */
#header{position:fixed !important; top:0; left:0; width:100%; background:var(--page_color); z-index:99; pointer-events:all !important; transform:none !important; opacity:1 !important;}
#header .inr{display:flex; margin:auto; padding:3rem 0; justify-content:space-between; align-items:center; width:94.8%; border-bottom:2px solid var(--c_000); transition:0.3s ease;}
#header .logo{display:block; height:auto; width:19.5rem; transition:0.3s ease;}
#header .logo img{width:100%;}
#header .logo_dark{display:none;}
#header.fixed .inr{padding:1.5rem 5rem; width:100%;}
#header.fixed .logo{width:14.5rem;}
/*
@supports(background:var(--page_color)){
    #header{background:none; backdrop-filter:blur(100px); -webkit-backdrop-filter:blur(100px);}
}
*/

/* dark&light */
#header .tab_mode{display:flex; position:relative; width:10rem; border-radius:2rem; background:var(--c_f5f5f5);}
#header .tab_mode:before{content:''; display:block; position:absolute; top:0; left:0; width:5rem; height:100%; border-radius:2rem; transition:0.3s ease; background:var(--primary);}
#header .tab_mode li{display:flex; position:relative; align-items:center; justify-content:center; height:4rem; width:5rem; z-index:2; cursor:pointer; text-align:center;}
#header .tab_mode li svg{display:inline-block; vertical-align:middle; width:auto; height:2rem; transition:0.3s ease;} 
#header .tab_mode li.btn_light svg{fill:#fff;}
#header .tab_mode li.btn_dark svg{opacity:0.5;}

/* pc gnb */
#header .gnb_wrap{display:flex; align-items:center;}
#header .gnb_wrap .gnb{display:flex; margin-right:8rem;}
#header .gnb_wrap .gnb > li+li{margin-left:8rem;}
#header .gnb_wrap .gnb > li > a{display:block; font-size:2rem; color:var(--c_111); font-family:'Montserrat', sans-serif; text-transform:uppercase; font-weight:bold; transition:0.3s ease;}

/* mobile gnb */
.m_gnb{display:none;}

/* menu_btn */
.btn_menu{display:none;}


@media(hover:hover){
    #header .gnb_wrap .gnb > li > a:hover{opacity:0.6;}
}
@media(max-width:1280px){
    #header .inr{padding:2rem 0; width:96%;}
    #header.fixed .inr{padding:1.2rem 2%;}
    #header .logo{width:18rem;}
    #header .gnb_wrap .gnb{6rem;}
    #header .gnb_wrap .gnb > li+li{margin-left:6rem;}
}
@media(max-width:1024px){
    #header .gnb_wrap nav{display:none;}
}