/* Header */
#header{margin-top: 26px;}
#header .head{display: flex;align-items: center;height: 54px;padding: 8px 24px;margin-bottom: 18px;}
#header .head .head-right i{font-size: 110px;height: 32px;vertical-align: bottom;}
#header .head .head-left{display: flex;align-items: center;margin-right: auto;}
#header .head .head-left .date{font-size: 14px;color: var(--gray-5);}

#header .head .head-left .change-lang{position: relative; z-index: 9}
#header .head .head-left .change-lang label{position: absolute;top: -4px;cursor: pointer;width: 100%;height: 34px;z-index: 10;}
#header .head .head-left .change-lang label i{position: absolute;top: 6px; right: 8px;color: var(--gray-5);}
#header .head .head-left .change-lang>ul{display: block;}
#header .head .head-left .change-lang>ul{padding-right: 40px;}
#header .head .head-left .change-lang ul li a{font-size: 15px;color: var(--gray-5);border-bottom: 1px solid var(--gray-5);padding: 4px;}
#header .head .head-left .change-lang ul li a i{line-height: 0;margin-right: 4px; transform: translateY(-4px);}
#header .head .head-left .change-lang ul ul{display: none;background-color: var(--light-3);z-index: 1;}
#header .head .head-left .change-lang ul ul a{ display: block;padding: 4px 16px;text-align: center;}
#header .head .head-left .change-lang #Change-Lang:checked + ul ul{position: absolute;display: block;left: 0;top: calc(100% + 4px);}


/* Main Menu */
#header .menu-wrapper{display: flex;background-color: var(--light-3);height: 72px;}
#header .menu-wrapper .main-menu{display: flex;align-items: center;}
#header .menu-wrapper .main-menu #toggleLargMenu:checked + label[for="toggleLargMenu"] span:nth-child(1){transform: rotate(45deg) translate(2px, -2px);}
#header .menu-wrapper .main-menu #toggleLargMenu:checked + label[for="toggleLargMenu"] span:nth-child(2){opacity: 0;}
#header .menu-wrapper .main-menu #toggleLargMenu:checked + label[for="toggleLargMenu"] span:nth-child(3){transform: rotate(-45deg) translate(2px, 2px);}
#header .menu-wrapper .main-menu label[for="toggleLargMenu"]{display: none;flex-direction: column; justify-content: space-evenly;width: 72px;height: 72px;padding: 24px;cursor:pointer;}
#header .menu-wrapper .main-menu label[for="toggleLargMenu"] span{width: 100%;height: 1px;background-color: var(--brown);transition: 0.25s;transform-origin: 3px 0px;}

#header .menu-wrapper .main-menu ul{display: flex; padding:0 24px;}
#header .menu-wrapper .main-menu ul li{position: relative;}
#header .menu-wrapper .main-menu ul li:not(:last-child):after{content: "|";position: absolute;color: var(--brown);top: 25px;left: -1px;}
#header .menu-wrapper .main-menu ul li a{display: flex;align-items: center;height: 72px;font: var(--font-menu);color: var(--dark-1);padding: var(--padding-main-menu-item);}

#header .menu-wrapper .logo-wrapper{display: flex;margin-right: auto;}
#header .menu-wrapper .logo-wrapper>div{position: relative;width: 72px;height: 72px;}
#header .menu-wrapper .logo-wrapper>div:not(:last-child):after{position: absolute;content: "";width: 1px;height: 50%;top: 25%;left: 0;background-color: rgb(44 48 49 / 0.25);}
#header .menu-wrapper .logo-wrapper>div a{display: flex;align-items: center;justify-content: center;height: 100%;color: var(--dark-4);}
#header .menu-wrapper .logo-wrapper>div a i{font-size: 28px;}
#header .menu-wrapper .logo-wrapper .logo{height: 100%;width: auto;}
#header .menu-wrapper .logo-wrapper .logo a{display: flex;align-items: center;height: 100%;padding: 0 24px;}
#header .menu-wrapper .logo-wrapper .logo a svg{fill: var(--blue);width: 158px;height: 33px;font-size: 36px;line-height: 50px;}