#header {position: fixed; z-index: 9999; width: 95%; left: 0; right: 0; margin: auto; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;}
#header .Inner {max-width: 1720px; width: 100%; padding: 0 2rem; margin: auto; display: flex; align-items: center; justify-content: space-between;}
#header .Menu {display: flex; align-items: center; gap:2rem;}
#header .Menu a {color:#fff; padding: 1.5rem 2rem; display: block; font-size: 16px;}

#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 .Logo img {height: 2.5rem;}
 
.nav_btn {display: none; position: absolute;}


#header.sticky {backdrop-filter: blur(50px); width: 95%; top:.5rem; background-color: rgba(3, 110, 184, .7); border-radius: 50px; transition: all ease-in .3s;}
#header.hide {
    transform: translateY(-120%);
   
  }


@media(max-width:768px) {
    #header .nav_btn {display: block; position: relative;}

    #header .ham {display: block; width: 30px; padding: 1rem 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
    #header .hamRotate.active {transform: rotate(45deg);}
    #header .hamRotate180.active {transform: rotate(180deg);}
    #header .line {fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#fff; stroke-width:2; stroke-linecap:round;}

    #header .ham .top {stroke-dasharray: 40 82;}
    #header .ham .middle {stroke-dasharray: 40 111;}
    #header .ham .bottom {stroke-dasharray: 40 161;}
    #header .ham.active .top {stroke-dasharray: 17 82; stroke-dashoffset: -62px;}
    #header .ham.active .middle {stroke-dashoffset: 23px;}
    #header .ham.active .bottom {stroke-dashoffset: -83px;}

    #header .Menu {display: none; position: absolute; backdrop-filter: blur(50px); border-radius: 50px 0; flex-direction: column; padding: 2rem; background-color: rgba(3, 110, 184, .9); top:0; right: 0;}
    #header .Menu.on {display: block;} 
    #header .Menu a {width: 35vw; color:#fff;}
}


/* quick */
#quick {position: fixed; z-index: 9997; bottom:40%; right:1vw}
#quick ul {padding: 1.5rem 0; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50px; background-image: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(172,205,227,.85));}
#quick a {padding: .7rem .6rem; display: block; color: var(--pointcolor); font-weight: 500; font-size: 14px; letter-spacing: 0;}
#quick a:hover {color: #0d619c;}
@media(max-width:500px) {
    #quick {bottom: 1rem; right: 0; left: 0; margin: auto; width: fit-content;}
    #quick ul {flex-direction: row; padding: 0 1.5rem;}   
    #quick a {padding: 1rem .6rem; font-size: 12px;}
}


/* modal */
.modal_overlay {position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: .3s ease;}

.modal {position: fixed; left: 50%; top: 50%; z-index: 9999; width: calc(100% - 40px); max-width: 900px; max-height: 80vh; padding: 2rem; background: #fff; transform: translate(-50%, -45%); opacity: 0; visibility: hidden; overflow-y: auto; transition: .3s ease; color: #000;}
.modal.on, .modal_overlay.on {opacity: 1; visibility: visible;}
.modal.on {transform: translate(-50%, -50%);}

.modal-title {margin-bottom: 20px; font-weight: 700;}

.close-icon {position: sticky; top: -1.875rem; float: right; width: 36px; height: 36px; margin: -20px -20px 20px 20px; border: 0; border-radius: 50%; cursor: pointer;}
.close-icon::before,
.close-icon::after {content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #000;}
.close-icon::before {transform: translate(-50%, -50%) rotate(45deg);}
.close-icon::after {transform: translate(-50%, -50%) rotate(-45deg);}

html.modal-open {overflow: hidden;}