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%);border-bottom: 1rem solid #e8e8e8;  */}
#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; position: relative; } 
.header-top-banner .swiper { height: 35rem; } 
.header-top-banner .swiper .swiper-wrapper .swiper-slide {  } 
.header-top-banner .swiper .swiper-wrapper .swiper-slide a{display: flex; align-items: center; justify-content: center; line-height: 1.4; padding: 0 40rem;height: 100%;}
.header-top-banner .close { position: absolute; top:50%; right: 10rem; transform: translate(0,-50%); cursor: pointer; line-height: 1; z-index: 10; } 
.header-top-banner .close svg { width: 16rem; opacity: 0.5; } 

.header-inner{position: relative;display: flex;align-items: center;justify-content: space-between; height: 90rem;}
.header-logo{}
.header-logo a{display: block;}
.header-logo img{height: 42rem;}
.header-menu{display: inline-block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.header-menu > div{display: inline-block;}

#header .menu-items{font-size: 0;display: flex;align-items: center;justify-content: center;gap: 80rem;}
#header .menu-items > li{display: inline-block;position: relative;}
#header .menu-items > li > a{display: flex;align-items: center;justify-content: center; font-weight: 500;font-size: 18rem;position: relative;line-height: 90rem;transition: color 0.3s;}
#header .menu-items > li:hover > a{color: var(--color-primary);}

#header .menu-items > li > ul{display: none; position: absolute;min-width: 150rem;z-index: 10;top:calc(100%);left: 50%;transform: translateX(-50%);padding: 22rem 5rem;background: var(--color-neutral-1);border: 1px solid var(--color-neutral-2);}
#header .menu-items > li > ul > li{text-align: center;}
#header .menu-items > li > ul > li > a{font-size: 16rem;padding: 10rem 12rem;display: block;white-space: nowrap;color: var(--color-neutral-7);transition: color 0.3s;}
#header .menu-items > li > ul > li > a:hover{color: var(--color-primary);}



.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;}


.icon-button{display: flex;align-items: center;gap: 12rem;}
.icon-button li{display: flex;align-items: center;justify-content: center;}
.icon-button li.mo-icon-button{display: none;}

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

@media all and (max-width:1023px) {
    .header-logo img{height: 30rem;}
    .header-inner{height: 65rem;}
    .header-menu{display: none;}

    .icon-button li.mo-icon-button{display: flex;}
}

@media all and (max-width:767px) {
    .header-top-banner .swiper{height: 30rem;}
}


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

.aside-header{padding: 22rem 16rem;text-align: right;}
.aside-header .close{font-size: 0;}
.aside-header .close svg{width: 22rem;}

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

#aside .menu-items{line-height: 1.4;}
#aside .menu-items > li{border-bottom: 1px solid var(--color-bg-2);position: relative;}
#aside .menu-items > li > a{font-size: 16rem;padding: 16rem 20rem;display: block;font-weight: 500;transition: color 0.3s;}
#aside .menu-items > li > ul{background: var(--color-bg-2);color: var(--color-neutral-7);display: none;padding: 10rem 0;}
#aside .menu-items > li > ul > li{}
#aside .menu-items > li > ul > li > a{font-size: 15rem;padding: 12rem 30rem;display: block;font-weight: 500;transition: color 0.3s;}
#aside .menu-items li > span{position: absolute;top:0;right: 0;width: 55rem;height: 55rem;display: flex;align-items: center;justify-content: center;}
#aside .menu-items li > span svg{width: 16rem;height: 16rem;}
#aside .menu-items li.open > span{transform: rotate(180deg);}
#aside .menu-items li.open > a{color: var(--color-primary);}