@media (min-width: 770px) {
    .wrap { display: block;}
    .m_wrap { display: none;}
}

@media (max-width: 770px) {
	.wrap { display: block;}
    .m_wrap { display: none;}
    
}


* { margin: 0; padding: 0; font-family: var(--font-body); }
.footer a, .m_footer a { text-decoration: none; color: var(--neutral-400);}
.footer_nav { cursor: pointer; }

.inner_text_area { position: absolute; top: 180px; left: calc(50% - 357px/2 - 271.5px);}

.header { height: 62px; display: flex ; justify-content: space-evenly; background: var(--color-surface); border-bottom: 1px solid var(--color-border);}
/* P0 lockup is letterboxed inside the original 192x75 canvas (ink = 87.5%w / 38.7%h).
   Height drives the slot and width stays auto, so the canvas ratio can never be stretched;
   54px canvas renders the wordmark at ~21px in the 62px header. */
.header_logo { margin-right: 70px; align-self: center; height: 54px; width: auto; cursor: pointer;}
.head_nav { display: flex; width: 244px; align-items: center; justify-content: space-between;}
.head_nav > .nav_item { cursor: pointer; font-family: var(--font-ui); font-weight: 500; color: var(--neutral-900);}
.head_nav > .nav_item > a { text-decoration: none; color: var(--neutral-900);}
.head_nav > .nav_item.selected {font-weight: 600; color: var(--color-brand);}


.footer { position: relative; height: 341px; background: var(--color-surface); border-top: 1px solid var(--color-border);}
.footer_name { font-family: var(--font-ui); font-weight: 600; color: var(--neutral-600);}
.footer_info { margin-top: 20px; margin-bottom: 30px; color: var(--neutral-400); line-height: 24px; }
.f_info_item { margin-right: 15px;}

/* scroll bar */
::-webkit-scrollbar { width: 5px; height: 5px;}
::-webkit-scrollbar-track { background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius: 3px; background: var(--neutral-200);}
::-webkit-scrollbar-button { width: 0; height: 0; }