header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%; width: 100%; height: 73px; background: var(--pr); z-index: 8888;}
header .container {display: flex; align-items: center; flex-flow: row-reverse; justify-content: space-between; height: 100%; max-width: 1200px; width: 100%; margin: 0 auto;}
header.on .container::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 73px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1;}
header .logo {width: 258px; height: auto;}
header .logo img {width: 100%; height: auto;}
header .mo-btn {width: 37px; height: auto;}
header .mo-btn img {width: 100%; height: auto;}

/* nav */
nav {position: fixed; top: 0; left: -415px; width: 418px; height: 100vh; padding: 20px; background: var(--pr); box-sizing: border-box; transition: all .5s; z-index: 2;}
nav.active {left: 0; transition: all .5s;}
nav:before {position: fixed; top: 0; left: -303px; content: ''; display: block; width: 303px; height: 100vh; background: #fff; z-index: 8888;}
nav .close {width: 37px; height: auto; margin: 0 calc(100% - 37px);}
nav .close img {width: 100%; height: auto;}
nav ul {display: flex; flex-flow: column; gap: 20px; padding-top: 40px;}
nav ul li {}
nav ul li a {font-size: 18px; font-weight: 400; line-height: 1.17; color: var(--wt);}
nav ul li.active a {color: var(--btn);}
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1;}