


#header {position:fixed; left:0; top:0; width:100%; z-index:100;}
#header.sticky {background-color: rgba(242,240,234, 0.8); backdrop-filter: blur(10px);} 

#header .Inner {max-width:1820px; width:95%; margin:auto; display:flex; padding: 0 1rem; align-items:center; justify-content:space-between;}
#header .Logo {position:relative; z-index:120; padding: .7rem 0;}
#header .LogoImg {width: 10.875rem;}
#header .blind {overflow: hidden; display: inline-block; position: absolute; z-index: -1; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}

#header .Menu {display:flex; align-items:center; gap:1rem; width:55%; justify-content:space-between;}
#header .Menu a {padding:1.5rem 0; text-transform:uppercase; font-family: var(--pointfont); font-size: .9375rem; font-weight: 600; position: relative;}

#header .Menu > li {position:relative;}
#header .Menu > li > ul {position:absolute;top:170%; left:50%; transform:translateX(-50%); min-width:220px; padding:15px 0; display:none; background:rgba(242,240,234, 0.95); backdrop-filter:blur(10px); border-radius:10px;}
#header .Menu > li > ul li {width:100%;}
#header .Menu > li > ul .depth02 {display:block; padding:.9rem 1.5rem; font-size:.9rem; text-transform:none; white-space:nowrap; position: relative; padding-left: 1.5rem; font-family: var(--mainfont); font-weight: 400;}
#header .Menu > li > ul .depth02:after {content:''; width: .36rem; height: .36rem; border-radius: 50%; background-color: transparent; transition: .3s; position: absolute; left: 1rem; top: 0; bottom: 0; margin: auto;}
#header .Menu > li > ul .depth02:hover:after {background-color: var(--pointcolor); transition: .3s;}

#header .M_MenuBtn {display:none; width:2.5rem; height:2.5rem; padding:0; border:0; background:none; cursor:pointer; position:relative; z-index:120;}
#header .M_MenuBtn svg {width:100%; height:100%;}

#header .hamburger path {fill:none; stroke:var(--black); stroke-width:1; stroke-linecap:round;}

@media (min-width:769px){
    #header .Menu {display:flex !important; transform:none !important;}
 

    #header .Menu a:after {content:''; width: 0; height: 1px; background-color: var(--pointcolor); position: absolute; bottom:20px; left: 50%; transform: translateX(-50%); transition: width .3s;}
    #header .Menu a:hover:after {width: 100%; transition: width .3s;}
}

@media(max-width:768px){
    #header .LogoImg {width: 16rem;}

    #header .M_MenuBtn {display:flex; align-items:center; justify-content:center;}
    #header .Menu {position:fixed; left:0; top:0; width:100%; height:100vh; display:none; flex-direction:column; justify-content:center; align-items:flex-start; gap:1rem; padding:7rem 8% 0; background:#E6E2D9; z-index:90; overflow:hidden;}

    #header .Menu li {list-style:none; overflow:hidden;}
    #header .Menu a {display:block; padding:0; font-size:22px;}

    #header .Menu {justify-content:flex-start;}
    #header .Menu>li {width:100%;}
    #header .Menu .depth01 {display:flex; justify-content:space-between; align-items:center; width:100%; padding:.6rem 0;}
    #header .Menu>li>ul {display:none; position:static; transform:none; background:none; border-radius:0; padding:.8rem 0 0 1rem; min-width:100%;} 
    #header .Menu>li>ul .depth02 {padding:.7rem 0; font-size:18px; opacity:.75;}

    body.menu-open {overflow:hidden;}
}



/* quick */
#quick {position: fixed; z-index: 999; right: 1rem; bottom:10%; display: flex; align-items: center; flex-direction: column; gap: .5rem; max-width: 8.125rem; word-wrap: 100%;}
#quick li {width: 100%;}
#quick li a {display: flex; align-items: center; gap:1rem; padding: .7rem 1.25rem; background-color: rgba(114,169,164,.9);  color: var(--white); cursor: pointer; font-size: .875rem; /* backdrop-filter:blur(10px); */ border-radius: var(--radius);}
#quick li a img {width: .875rem;}
@media(max-width:768px){
    #quick {flex-direction: row; right: auto; left: 50%; transform: translateX(-50%); max-width: 100%; bottom: 1rem; background-color: rgba(114,169,164,.99); padding: .5rem 1rem; border-radius: 1.875rem;}
    #quick li {flex: 1;}
    #quick li a {justify-content: center; background-color: rgba(114,169,164,0); font-size: 12px; gap: .5rem;}
    #quick li a img {width: 15px; font-weight: 500;}
}


