header{z-index:1;justify-content:space-between;align-items:center;width:clamp(640px,35%,800px);margin:0 auto;padding:24px;display:flex;position:fixed;top:0;left:0;right:0}header h1{height:64px}header h1 img{object-fit:cover;width:auto;height:100%;display:block}header .menu-wrapper{position:relative}header .menu-wrapper .menu-icon{cursor:pointer;z-index:11;background:#fff;border:2px solid #3cb750;flex-direction:column;justify-content:center;gap:6px;width:56px;height:56px;padding:12px;display:flex;position:relative}header .menu-wrapper .menu-icon span{border:2px solid #3cb750;width:100%;transition:all .4s;display:block}header .menu-wrapper .menu-icon:hover{background:#e8ffec}header .menu-wrapper #menu-toggle:checked+.menu-icon span:first-child{transform:translateY(10px)rotate(45deg)}header .menu-wrapper #menu-toggle:checked+.menu-icon span:nth-child(2){opacity:0}header .menu-wrapper #menu-toggle:checked+.menu-icon span:nth-child(3){transform:translateY(-10px)rotate(-45deg)}header .menu-wrapper .overlay{opacity:0;pointer-events:none;z-index:9;background:#00000080;height:100vh;transition:all .4s;position:fixed;inset:0}header .menu-wrapper #menu-toggle:checked~.overlay{opacity:1;pointer-events:auto}header .menu-wrapper .menu{z-index:10;background:#3cb750;width:81.5vw;height:100vh;transition:right .4s;position:fixed;top:0;right:-100%;overflow-y:auto;box-shadow:-2px 0 8px #0003}header .menu-wrapper .menu ul.main,header .menu-wrapper .menu ul.sub{flex-direction:column;display:flex}header .menu-wrapper .menu ul.main,header .menu-wrapper .menu .icon_wrap{width:clamp(640px,35%,800px)}header .menu-wrapper .menu ul.main{text-align:start;gap:28px;margin:0;padding:100px 24px 24px 56px;font-size:20px;font-weight:700;list-style:none}header .menu-wrapper .menu ul.main li a{color:#fff}header .menu-wrapper .menu ul.main li a:hover{text-decoration:underline}header .menu-wrapper .menu ul.main ul.sub{gap:16px;margin-top:16px;margin-left:24px;list-style:outside}header .menu-wrapper .menu ul.main ul.sub li{font-size:16px;font-weight:300}header .menu-wrapper .menu ul.main ul.sub li::marker{color:#fff}header .menu-wrapper .menu .icon_wrap{padding:40px 24px 24px 56px}header .menu-wrapper #menu-toggle:checked~.menu{right:0}header .menu-wrapper .icon_wrap .icon{width:42px;height:42px}header .menu-wrapper .icon_wrap .icon img{width:100%}@media (max-width:768px){header,header .menu-wrapper .menu ul.main,header .menu-wrapper .menu .icon_wrap{width:100%}header .menu-wrapper .menu ul.main{padding:56px 24px 24px 56px}header .menu-wrapper .menu ul.main li{font-size:20px}header .menu-wrapper .menu ul.main li .sub{font-size:14px}}