.main-header {
z-index: 999;
background: #fff;
width: 100%;
height: 85px;
box-shadow: 0 1px 10px silver;
display: grid;
grid-template-rows: minmax(min-content, 100px) min-content;
align-items: center;
position: fixed;
transition: transform .25s .1s ease-in-out;
}
.main-header .ct {
display: grid;
place-items: center;
grid-auto-flow: column;
align-content: space-evenly;
height: 85px;
}
.logo-nav {
display: grid;
align-content: center;
justify-content: start;
justify-self: start;
padding-left: 20px;
}
.main-header .menu {
display: none;
font-size: 70px;
}
.main-header .menu:hover {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.down .main-header {
transform: translate3d(0, -95px, 0);
}
.main-header .menu-top-bar-container {
width: 100%;
padding-right: 20px;
}
.main-header .top-bar {
list-style-type: none;
margin: 0;
display: grid;
grid-auto-flow: column;
place-items: center;
justify-content: space-between;
}
.main-header .top-bar li {
margin-left: 23px;
margin-right: 23px;
}
.main-header .top-bar li a {
text-decoration: none;
color: #707070;
font-size: 23px;
transition: .25s;
}
.main-header .top-bar li a:hover {
color: #F23038;
}
.main-header .top-bar li.current_page_item a {
color: #F23038;
}
.main-header .top-bar li:last-child a {
font-weight: 600;
color: #F23038;
}
.main-header .drop {
display: none;
list-style-type: none;
background-color: #f1f1f1;
width: 100vw;
-webkit-overflow-scrolling: touch;
text-align: center;
font-size: 50px;
overflow: scroll;
}
.main-header .drop li {
padding: 0.7vh;
}
.main-header .drop li:hover {
background-color: #ffd7d7;
}
.main-header .drop li a {
color: #707070;
text-decoration: none;
padding: 40px;
width: 100%;
display: block;
}
.main-header .drop li a:hover {
color: #F23038;
}
.main-header .drop li.current_page_item a {
color: #F23038;
}
@media only screen and (max-device-width: 700px) {
.main-header {
height: 170px;
}
.down .main-header {
transform: translate3d(0, -180px, 0);
}
.main-header .menu {
display: block;
}
.main-header .ct {
height: 170px;
}
.main-header .top-bar {
display: none;
}
.page-wrap {
padding: 12rem 0;
}
.logo-nav {
width: 120px;
height: 120px;
}
.logo-nav img {
width: 120px;
height: 120px;
}
}
.m-open {
overflow: hidden;
}