html{margin-top: 0 !important;}
#wpadminbar{display: none !important;}

#header{position: fixed; top:0; left: 0; width: 100%; z-index: 99; background: #fff; transition: transform 0.4s, background 0.4s;/* box-shadow: 0px 0px 16px rgb(50 50 50 / 12%); */}
#header.hide { transform: translate(0,-100%) !important; } 

@media all and (max-width:660px) {
    #header{box-shadow: none;}
}

.header-top-banner { text-align: center; font-size: 13rem; background: #333; color: #fff; } 
.header-top-banner .swiper { } 
.header-top-banner .swiper .swiper-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; line-height: 1.4; padding: 0 40rem; } 
.header-top-banner .swiper .swiper-wrapper .swiper-slide .close { position: absolute; top:50%; right: 10rem; transform: translate(0,-50%); cursor: pointer; line-height: 1; } 
.header-top-banner .swiper .swiper-wrapper .swiper-slide .close svg { width: 16rem; opacity: 0.5; } 

.header-inner{/* border-bottom: 1rem solid #e8e8e8; */ }
.header-inner > div{position: relative;display: flex;align-items: center;justify-content: space-between;height: 80rem;}
.header-logo{/* position: absolute; top:50%; left: 0; transform: translateY(-50%); */ position: relative;}
.header-logo img{height: 21rem;}
.header-logo img[alt="logo_color"]{position: absolute;top: 0;left: 0;opacity: 0;}

@media all and (max-width:1024px) {
    .header-logo img{height: 18rem;}
}

.header-menu{display: flex;align-items: center;justify-content: center;gap: 0 120rem;}
.header-menu > ul{display: flex;align-items: center;justify-content: center;gap: 0 24rem;}
.header-menu > ul > li{font-size: 16rem;font-weight: 500;cursor: pointer;}
.header-menu > ul > li > a{color: inherit;text-decoration: none;}
.header-menu > ul > li.button{background: var(--color-primary);color: #fff;padding: 7rem 16rem;border-radius: 25rem;}
.header-menu .close{display: none;}

.header-menu-mobile{display: none;}
.header-menu-mobile .hamburger-btn{display: flex;flex-direction: column;justify-content: space-between;width: 24rem;height: 18rem;background: none;border: none;cursor: pointer;padding: 0;position: relative;}
.header-menu-mobile .hamburger-btn span{display: block;width: 100%;height: 2px;background: #121212;border-radius: 2rem;transition: all 0.3s;position: relative;}

@media all and (max-width:860px) {
    .header-menu-mobile{display: block;}
    .header-menu{display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #fff;z-index: 9999;padding: 0;transform: translateX(100%);transition: transform 0.4s, visibility 0.4s;visibility: hidden;pointer-events: none;}
    .header-menu.on{transform: translateX(0);visibility: visible;pointer-events: auto;}
    .header-menu > ul{display: block;text-align: center;}
    .header-menu > ul > li{font-size: 24rem;margin-bottom: 24rem;}
    .header-menu > ul > li.button{background: var(--color-primary);color: #fff;padding: 7rem 16rem;border-radius: 25rem;}
    .header-menu .close{display: block;position: absolute;top: 0;right: 16rem;display: flex;align-items: center;justify-content: center;cursor: pointer;min-height: 60rem;display: flex;align-items: center;}
    .header-menu .close svg{width: 30rem;height: 30rem;}

}


.menu-additional{display: inline-block;}
.menu-additional > ul{font-size: 0;}
.menu-additional > ul > li{display: inline-block;}
.menu-additional > ul > li > a{display: block;padding: 30rem 50rem;font-weight: 400;font-size: 18rem;}
.menu-additional > ul > li > a img{width: 20rem;}

.header-member{position: absolute; top:50%; right: 0; transform: translateY(-50%);}
.header-member > ul{font-size: 0;}
.header-member > ul > li{display: inline-block;margin-left: 18rem;}
.header-member > ul > li:first-child{margin-left: 0;}
.header-member > ul > li > a{display: block;font-weight: 600;font-size: 18rem;}

.wide-sub-menu[data-style="1"]{}
.wide-sub-menu[data-style="1"] > div{text-align: right;}
.wide-sub-menu[data-style="1"] > div > ul{display: inline-block;padding: 0 50rem;}
.wide-sub-menu[data-style="1"] > div > ul > li{}

.wide-sub-menu[data-style="2"]{display: none;}

.mo-icon-button{}
.mo-icon-button > ul{display: flex;align-items: center;gap:0 17rem;}
.mo-icon-button > ul > li{display: flex;align-items: center;justify-content: center;cursor: pointer;}
.mo-icon-button > ul > li.ms-mo{display: none;}
.mo-icon-button > ul > li > svg{width: 24rem;height: 24rem;}
.mo-icon-button > ul > li.global{position: relative;padding: 10rem 0;}
.mo-icon-button > ul > li.global > ul{position: absolute;background: #000;color:#fff;padding: 10rem 20rem;border-radius: 10rem;top: calc(100%);left: 50%;transform: translateX(-50%);display: none;filter: invert(1) !important;}
.mo-icon-button > ul > li.global:hover > ul{display: block;}
.mo-icon-button > ul > li.global > ul > li{font-size: 16rem;font-weight: 300;width: auto;text-align: center;margin-bottom: 6rem;}
.mo-icon-button > ul > li.global > ul > li:last-child{margin-bottom: 0;}

@media all and (max-width:1366px) {
    #header .menu-items{gap: 60rem;}
    #header .menu-items > li > a{font-size: 16rem;}
}

@media all and (max-width:1340px) {
    .header-member{right: 20rem;}
}

/* @media all and (max-width:1152px) {
    #header .menu-items > li > a{font-size: 16rem;padding: 20rem 40rem;}
    #header .menu-items > li > ul{padding: 12rem 0 38rem;}
    #header .menu-items > li > ul > li{font-size: 14rem;}
} 

@media all and (max-width:1023px) {
    #header .menu-items > li > a{font-size: 16rem;padding: 20rem 30rem;}
} */

@media all and (max-width:1023px) {
    .header-inner > div{height: 60rem;}
    .mo-icon-button > ul > li.ms-mo{display: flex;}
    .mo-icon-button > ul > li.ms-pc{display: none;}
    .mo-icon-button > ul > li.global > ul > li{font-size: 14rem;}
}

@media all and (max-width:860px) {
    .header-inner > div{min-height: 46rem;}
}



/* full */
.header__full { position: absolute; top: 100%; z-index: 99; background: #fff; width: 100%; border-block: 1rem solid #e8e8e8; opacity: 0; visibility: hidden; transition: all 0.4s; } 
.header__full.on { opacity: 1; visibility: visible; } 

.header__full > div .category { word-break: break-all; max-height: 50vh; overflow-y: auto; line-height: 1.4; margin-block: 50rem; } 
.header__full > div .category > ul { display: flex; justify-content: center; gap: 7%; flex-wrap: wrap; position: relative; } 
.header__full > div .category > ul > li { font-size: 15rem; } 
.header__full > div .category > ul > li > span{display: none;}
.header__full > div .category > ul > li > a { display: block;; font-weight: 600; font-size: 16rem; margin-bottom: 20rem; color: #000; } 
.header__full > div .category > ul > li > ul { } 
.header__full > div .category > ul > li > ul > li { margin-bottom: 10rem; font-size: 15rem; color: #666; } 
.header__full > div .category > ul > li > ul > li:last-child { margin-bottom: 0; } 
.header__full > div .category > ul > li > ul > li > ul { display: none; } 

@media all and (max-width:1340px) {
    .header__full > div .category > ul{gap: 10%;}
}



/* side */
#aside{position: fixed;top: 0;left: -100%;width: 100%;max-width: 450rem;height: 100vh;z-index: 101;background: #fff;transition: left 0.6s ease;}
#aside.active{left: 0 !important;}

.aside-header{display: flex;flex-direction: column; gap: 14rem; background: var(--color-bg-2);padding: 15rem 15rem 23rem;}
.aside-header > img{height: 30rem;}
.aside-header .close{font-size: 0;width: 24rem;cursor: pointer;}
.aside-header .close svg{width: 100%;}
.aside-header > ul{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 5rem;}
.aside-header > ul > li{}
.aside-header > ul > li > a{display: flex;align-items: center;justify-content: center;height: 44rem;border-radius: 25rem;background: var(--color-gradient);color: var(--color-neutral-1);font-size: 14rem;font-weight: 400;}
.aside-header > ul > li:last-child > a{background: var(--color-neutral-1);color: var(--color-sub-3);}
.aside-header > p{font-size: 13rem;color: var(--color-neutral-7);position: absolute;top: 20rem;right: 15rem;}

.aside-body{height: 100%;overflow-y: auto;padding-bottom: 20rem;padding-top: 10rem;}

#aside .menu-items{}
#aside .menu-items > li{position: relative;}
#aside .menu-items > li > a{font-size: 18rem;padding: 15rem 25rem;display: block;font-weight: 600;}
#aside .menu-items > li > ul{background: var(--color-bg-2);display: none;padding-block: 10rem;margin-block: 5rem;}
#aside .menu-items > li > ul > li{}
#aside .menu-items > li > ul > li > a{font-size: 16rem;padding: 10rem 25rem;display: block;}
#aside .menu-items > li > ul > li > ul{color: var(--color-neutral-4);display: block;padding-bottom: 5rem;}
#aside .menu-items > li > ul > li > ul > li{}
#aside .menu-items > li > ul > li > ul > li > a{font-size: 15rem;padding: 7rem 35rem;display: block;}
#aside .menu-items > li > span{position: absolute;top:0;right: 0;width: 60rem;height: 46rem;display: flex;align-items: center;justify-content: center;cursor: pointer;}

#aside .menu-items > li.open > a{color: var(--color-sub-3);}
#aside .menu-items > li.open > span{transform: rotate(180deg);}
#aside .menu-items > li.open > span svg path{stroke: var(--color-sub-3);}

@media all and (max-width:660px) {
    #aside{width: 90vw;}
}