@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-08-06
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. HEADER
    02. FOOTER
    03. MEDIA QUERIES
---------------------------------------------------
*/

/* ------------------------------
 * HEADER
------------------------------ */
#header {position:fixed; top:0; left:0; right:0; height:80px; z-index:990; border-bottom: 1px solid transparent; background-color: transparent; transition: top .3s, border-color .3s}
body:not(.main) #header {border-color: var(--grey-200); background-color: var(--white)}
#header .col-logo .logo a {display: block; width: 100px; padding-bottom: 40.35%; background-image: url(../images/common/logo.png); background-size: 100%; background-position: center; background-repeat: no-repeat}
#header .col-nav > nav {padding-left: 48px}
#header .col-nav > nav > ul {font-size:0}
#header .col-nav > nav > ul > li {position:relative; display:inline-block}
#header .col-nav > nav > ul > li > a {display: block; font-size:18px; font-weight:600; color: var(--grey-900); padding: 0 16px}
#header .col-nav > nav > ul > li > .subnav {position:absolute; top:auto; left:0; width:200px; padding:12px; border-radius: 16px; background-color:#fff; z-index:10; box-shadow:0 4px 16px -4px rgb(0 0 0 / 12%); opacity:0; visibility: hidden; transition: all 0.3s ease}
#header .col-nav > nav > ul > li:hover > a {color: var(--secondary)}
#header .col-nav > nav > ul > li:hover > .subnav {opacity:1; visibility: visible}
#header .col-nav > nav > ul > li > .subnav > li > a {display: block; font-size:14px; font-weight: 500; color:var(--grey-700); padding: 10px 16px; border-radius: 10px}
#header .col-nav > nav > ul > li > .subnav > li > a:hover {color: var(--black); background-color: var(--grey-100)}
#header .col-membership {font-size: 0}
#header .col-membership .tooltip-wrapper {position: relative; display: inline-block}
#header .col-membership .tooltip-wrapper .required-tooltip {position: absolute; top: calc(100% + 12px); left: 50%; width: 220px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--grey-800); text-align: left; border: 1px solid var(--grey-200); border-radius: 10px; background-color: var(--white); box-shadow: 0 4px 8px -2px rgba(0,0,0,.08); z-index: 10; transform: translateX(-50%); animation: required-pop 1.5s linear infinite}
#header .col-membership .tooltip-wrapper .required-tooltip::before, #header .col-membership .tooltip-wrapper .required-tooltip::after {content: ''; position: absolute; top: -14px; left: 50%; border: 6px solid transparent; border-bottom-color: var(--grey-200); transform: translateX(-50%)}
#header .col-membership .tooltip-wrapper .required-tooltip::before {border-width: 7px}
#header .col-membership .tooltip-wrapper .required-tooltip::after {top: -12px; border-bottom-color: var(--white)}
#header .col-membership .tooltip-wrapper .required-tooltip .tooltip-close {position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; font-size: 11px; color: var(--grey-700); line-height: 1; padding: 0; border: 0; border-radius: 3px; background-color: transparent; outline: 0}
#header .col-membership .tooltip-wrapper .required-tooltip .tooltip-close:hover {background-color: var(--grey-200)}
/* #header.sticky {border-color: var(--grey-200)} */
#header.nav-up {top: -80px}

@keyframes required-pop {
    0% {opacity: 1; transform: translate(-50%,6px)}
    50% {opacity: .6; transform: translate(-50%,0)}
    100% {opacity: 1; transform: translate(-50%,6px)}
}

/* ------------------------------
 * FOOTER
------------------------------ */
#footer {background-color:#f5df4d}
#footer .top-box {padding: 20px 0; border-bottom:1px solid #5a5a5a}
#footer .top-box ul {font-size: 0; text-align: center}
#footer .top-box ul li {display: inline-block; margin: 0 10px}
#footer .top-box ul li a {font-size: 14px; color: #000; font-weight:700}
#footer .info-box {padding-top: 20px; padding-bottom: 48px}
#footer .info-box .grid-logo img {width: 100px; margin-bottom:20px;}
#footer .info-box p {font-size: 14px; color: #000; font-weight: 500; line-height: 1.66}
#footer .info-box p span {display: inline-block; margin-right: 20px}

/* ------------------------------
 * MEDIA QUERIES
------------------------------ */
@media (min-width: 768px) {
    #header .col-button {display: none}
    #mobile-header {display: none}
}

@media (max-width: 767px) {
    #header {height: 60px}
    #header .col-logo .logo a {width: 80px}
    #header .col-nav {display: none}
    #header .col-membership {display: none}
    #header .button-hamburger {display: -ms-flexbox; display: flex; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background-color: transparent; outline: 0}
    #header .button-hamburger svg {height: 100%}
    #header .button-hamburger .line {fill: none; stroke: var(--black); stroke-width: 2; transition: stroke-dasharray 300ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1)}
    #header .button-hamburger .line1 {stroke-dasharray: 60 207; stroke-width: 2}
    #header .button-hamburger .line2 {stroke-dasharray: 60 60; stroke-width: 2}
    #header .button-hamburger .line3 {stroke-dasharray: 60 207; stroke-width: 2}
    #header .button-hamburger.active .line1 {stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 2}
    #header .button-hamburger.active .line2 {stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 2}
    #header .button-hamburger.active .line3 {stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 2}
    #mobile-header {position: fixed; z-index: 1100}
    #mobile-header .backdrop {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.65); z-index: 5}
    #mobile-header .nav-body {position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background-color: var(--white); z-index: 10; transform: translateX(280px); transition: transform .45s cubic-bezier(.77,0,.17,1)}
    #mobile-header .nav-body header {position: relative; padding: 1.75rem 1.125rem 1rem 2.25rem; text-align: right}
    #mobile-header .nav-body header .button-close {width: 2.5rem; height: 2.5rem; font-size: 1.625rem; color: var(--black); line-height: 1; margin-top: -0.5rem; padding: 0; border: 0; background-color: transparent; outline: 0}
    #mobile-header .nav-body .body {padding: 2.5rem 2.25rem; height: calc(100% - 8.125rem); overflow-y: auto}
    #mobile-header .nav-body .body > ul > li > a {position: relative; display: block; font-size: 1.25rem; font-weight: 700; color: var(--grey-900); padding: 0.625rem 0}
    #mobile-header .nav-body .body > ul > li.has-child-menu > a::after {content: '\e941'; position: absolute; top: 50%; right: 0; font-family: 'xeicon'; font-size: 1rem; font-weight: normal; color: var(--grey-600); margin-top: -0.6875rem; transition: transform .3s}
    #mobile-header .nav-body .body > ul > li > .subnav {display: none; padding-top: 0.625rem; padding-bottom: 0.875rem}
    #mobile-header .nav-body .body > ul > li > .subnav > li + li {margin-top: 0.75rem}
    #mobile-header .nav-body .body > ul > li > .subnav > li > a {font-size: 1rem; font-weight: 300; color: var(--grey-600)}
    #mobile-header .nav-body .body > ul > li > .subnav > li > a.active {color: var(--primary-700)}
    #mobile-header .nav-body .body > ul > li > .subnav > li > a:before {content: '- '; color: #aaa}
    #mobile-header .nav-body .body > ul > li.open > a, #mobile-header .nav-body .body > ul > li > a.active {color: var(--primary-700)}
    #mobile-header .nav-body .body > ul > li.open.has-child-menu > a::after {transform: rotate(180deg)}
    #mobile-header .nav-body .body > .membership-menus {margin-top: 3rem}
    #header.nav-open ~ #mobile-header .nav-body {transform: translateX(0); transition-delay: .2s}

    #footer .top-box ul {text-align: left}
    #footer .info-box .grid-logo {margin-bottom: 20px}
    #footer .info-box .grid-logo img {width: 90px}
    #footer .info-box .grid-copy {margin-top: 16px}
}

@media (max-width: 575px) {
    #footer .top-box .menu-container {overflow-x: auto; -webkit-overflow-scrolling: touch}
    #footer .top-box ul {white-space: nowrap}
}