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;/* 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{  }
.header-inner > div{display: flex;align-items: center;justify-content: space-between;height: 80rem;}
.header-logo{position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);will-change: transform;}
.header-logo img{height: 22rem;display: block;}
.header-menu{display: inline-block;}
.header-menu > div{display: inline-block;}
.header-social{display: flex;align-items: center;gap: 32rem;}
.header-social > li{}
.header-social > li > a{font-weight: 500;font-size: 14rem;display: flex;}
.header-search{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #fff;display: flex;align-items: center;opacity: 0;visibility: hidden; transform: translateY(-100%); transition: opacity 0.3s, visibility 0.3s, transform 0.3s;z-index: 101;display: none;}
.header-search.active{opacity: 1;visibility: visible;transform: translateY(0);}
.header-search > div{display: flex;align-items: center;justify-content: space-between;}
.header-search .search-icon{display: flex;align-items: center;width: 90%;}
.header-search .search-icon svg{width: 24rem;height: 24rem;flex-shrink: 0;}
.header-search .search-icon input{width: 100%;border: none;font-size: 16rem;line-height: 1.4;}
.header-search .search-icon input::placeholder{color: var(--color-neutral-4);}
.header-search .close{display: flex;align-items: center;justify-content: center;cursor: pointer;width: 24rem;height: 24rem;}

#header .menu-items{font-size: 0;display: flex;align-items: center;gap: 40rem;}
#header .menu-items > li{display: inline-block;position: relative;}
#header .menu-items > li > a{display: block;font-weight: 500;font-size: 14rem;position: relative;line-height: 80rem;}

#header .menu-items > li > ul{display: none;position: absolute;min-width: 150rem;z-index: 10;top:calc(100%);left: 50%;transform: translateX(-50%);padding: 12rem 0 28rem;}
#header .menu-items > li > ul > li{font-size: 16rem;font-weight: 300;width: auto;text-align: center;}
#header .menu-items > li > ul > li.current-menu-item{color: var(--color-primary);}
#header .menu-items > li > ul > li > a{padding: 10rem 12rem;display: block;white-space: nowrap;color: var(--color-neutral-5);transition: color 0.3s;}
#header .menu-items > li > ul > li > a:hover{color: var(--color-primary);}
#header .menu-items > li > ul > li > ul{display: none;}



.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{display: none;}
.mo-icon-button a{display: flex;align-items: center;justify-content: center;}
.mo-icon-button svg{width: 24rem;height: 24rem;}

@media all and (max-width:1023px) {
    .header-social,
    .header-menu{display: none;}
    .header-logo img{height: 18rem;}
    .header-inner > div{height: 60rem;}
    .header-search{display: flex;}

    .mo-icon-button{display: flex;font-size: 0;align-items: center;justify-content: center;gap: 8rem;}
}


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

.aside-header{display: flex;align-items: center;justify-content: center;position: absolute;top: 16rem;right: 16rem;}
.aside-header .close{font-size: 0;}
.aside-header .close svg{width: 24rem;}


.aside__gnb{position: absolute;bottom: 0;left: 0;width: 100%;}
.aside__gnb > ul{display: flex;align-items: center;justify-content: center;gap: 24rem;padding-block: 30rem;}
.aside__gnb > ul > li{position: relative;}
.aside__gnb > ul > li > a{color: var(--color-neutral-4);font-size: 14rem;line-height: 1.4;}

.aside-body{height: 100%;overflow-y: scroll;display: flex;justify-content: center;align-items: center;}

#aside .menu-items{}
#aside .menu-items > li{position: relative;}
#aside .menu-items > li > a{font-size: 24rem;padding: 12rem 16rem;display: block;text-align: center;font-weight: 500;}
#aside .menu-items > li > ul{background: var(--color-bg-2);color: var(--color-neutral-5);display: none;}
#aside .menu-items > li > ul > li{}
#aside .menu-items > li > ul > li > a{font-size: 16rem;padding: 15rem 16rem;display: block;}
#aside .menu-items > li > span{position: absolute;top:0;right: 0;width: 46rem;height: 46rem;display: flex;align-items: center;justify-content: center;transition: transform 0.3s;display: none;}
#aside .menu-items > li.open > span{transform: rotate(180deg);}