.web { display: flex; flex-direction: column; height: 100%; min-height: 100vh; } .web { position: relative; } .main { flex: 1 0 auto; position: relative; } .web { padding-top: 66px; } @media (min-width: 768px) { .web { padding-top: 78px; } } @media (min-width: 1170px) { .web { padding-top: 106px; } } .home .web { padding-top: 0 !important; } .header { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; transition: all .2s ease-in-out; } /* .header { background-color: #414141; } .home:not(.scrolled) .header { background: transparent; } */ .scrolled .header, .nonhp .header { background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .3) } .header__in { position: relative; width: 100%; max-width: 1170px; margin: auto; padding: 0 10px; } .header__in { display: flex; align-items: center; justify-content: space-between } .header-logo { margin: 0 auto 0 0; width: 175px; padding: 5px 10px 8px; background-color: #fff; } .header-logo { border-radius: 0 0 10px 10px; } /*.scrolled .header-logo { box-shadow: 0 0 10px rgba(0, 0, 0, .3) }*/ .menu-toggle { flex-shrink: 0; position: relative; z-index: 10; display: block; width: 40px; height: 40px; } .menu-toggle { background-color: #fff; border-radius: 5px; } .menu-toggle span { position: relative; left: 9px; top: 19px; display: block; background-color: #181719; } .menu-toggle span:after, .menu-toggle span:before { content: ""; position: absolute; left: 0; background-color: #181719; } .menu-toggle span:before { top: -9px; } .menu-toggle span:after{ top: 9px; } .menu-toggle span, .menu-toggle span:after, .menu-toggle span:before { width: 22px; height: 2px; transition: all 0.3s; backface-visibility: hidden; } .menu-toggle.on span { transform: translateX(-1px); background-color: transparent; } .menu-toggle.on span:before { width: 25px; transform: rotate(45deg) translate( 6px, 7px); } .menu-toggle.on span:after { width: 25px; transform: rotate(-45deg) translate( 6px, -7px); } .header__in, .header__in > * { transition: all .2s ease-in-out; } @media (max-width: 1170px) { .header__in > .header-nav { transition: none } } @media (min-width: 768px) { .header-logo { width: 220px; } } @media (min-width: 1170px) { .header__in { } .scrolled .header__in { } .header-logo { width: 290px; padding: 15px 25px; } .scrolled .header-logo { width: 200px; padding: 10px; } .menu-toggle { display: none; } } @media (min-width: 1200px) { .header__in { padding-left: 0 !important; padding-right: 0 !important; } } /* 888b 88 db 8b d8 8888b 88 d88b `8b d8' 88 `8b 88 d8'`8b `8b d8' 88 `8b 88 d8' `8b `8b d8' 88 `8b 88 d8YaaaaY8b `8b d8' 88 `8b 88 d8""""""""8b `8b d8' 88 `8888 d8' `8b `888' 88 `888 d8' `8b `8' */ .header-nav ul { list-style: none; } .header-nav ul { margin: 0; } .header-nav li { margin: 0; } .header-nav .menu a { text-decoration: none; } @media (max-width: 1169px) { .header-nav { display: none; position: absolute; top: 100%; top: calc(100% + 10px); z-index: 10; } .header-nav { max-height: 90vh; overflow-y: auto; } .header-nav { background-color: #414141; border-radius: 10px; } .header-nav .menu { padding: 8px; } .header-nav .menu ul { } .header-nav .menu a { display: block; padding: 7px 10px; color: #fff; } .header-nav .menu a { font-size: 18px; } .header-nav .sub-menu { } .header-nav .sub-menu a { padding-left: 30px; } } @media (max-width: 499px) { .header-nav { left: 10px; right: 10px; height: auto } } @media (min-width: 500px) and ( max-width: 1169px) { .header-nav { left: auto; right: 10px; width: 300px; } } @media (min-width: 500px) and ( max-width: 1169px) and (min-height: 500px) { .header-nav { padding: 30px; } } @media (min-width: 1170px) { .header-nav { display: block !important; margin: 0; } .header-nav { flex: 0 0 auto; } .header-nav .menu { display: flex; align-items: center; justify-content: space-between; } .header-nav > ul > li { flex: 1 1 auto; margin: 0 4px; text-align: center; } .header-nav > ul > li:first-child { margin-left: 0 } .header-nav > ul > li:last-child { margin-right: 0 } .header-nav > ul > li > a { display: block; padding: 16px 10px; font-size: 16px; line-height: 1; color: #fff; } .scrolled .header-nav > ul > li > a, .nonhp .header-nav > ul > li > a { color: #000; } .header-nav > ul > li > a:hover, .header-nav > ul > li.current-menu-item > a, .header-nav > ul > li:hover > a { text-decoration: underline; } .header-nav > ul > li.menu-item-has-children > a > span { position: relative; /* padding-right: 18px; */ } /* .header-nav > ul > li.menu-item-has-children > a > span:after { content: ''; display: block; width: 10px; height: 5px; } .header-nav > ul > li.menu-item-has-children > a > span:after { position: absolute; right: 0; top: 50%; background: url(img/arr-d.svg) center center / contain no-repeat; } .header-nav > ul > li.menu-item-has-children > a > span:after { transform: translateY(-50%); } .header-nav > ul > li.menu-item-has-children > a > span:after { transition: all .2s ease-in-out; } .header-nav > ul > li.menu-item-has-children > a:hover > span:after { transform: rotate(180deg) translateY(50%) ; } */ .header-nav > ul > li { position: relative; } /* .header-nav > ul > li > .sub-menu { display: block !important; visibility: hidden; opacity: 0; } .header-nav > ul > li > .sub-menu { position: absolute; left: 50%; top: 125%; z-index: 10; transform: translateX(-50%); min-width: 200px; transition: all .2s ease-in-out; } .header-nav > ul > li:hover > .sub-menu, .header-nav > ul > li > a:focus > .sub-menu, .header-nav > ul > li:focus-within > .sub-menu { display: block !important; z-index: 20; top: 100%; visibility: visible; opacity: 1; } .header-nav > ul > li > .sub-menu { background-color: #fff; border-radius: 5px; padding: 10px 0; box-shadow: 0 0 30px rgba( 0, 0, 0, .08 ); } .header-nav > ul .sub-menu li { text-align: center; } .header-nav > ul .sub-menu li a { display: block; padding: 8px 15px; color: var(--color-primary); font-size: 12px; line-height: 1.3; font-weight: bold; } .header-nav > ul .sub-menu .sub-menu { margin-left: 20px; } */ } @media (min-width: 1400px) { .header-nav > ul > li > a { padding: 16px 14px; font-size: 18px; } } @media (min-width: 1600px) { .header-nav > ul > li > a { padding: 16px 18px; } }