#theader { position: relative; text-align: center; }
#theader::before { display: none; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #dfe8f9; }
#theader.mainver::before { display: block; }
#theader .top { height: 110px; background-color: #fff; }
/* 다크모드에서도 백그라운드 유지 */
@media (prefers-color-scheme: dark) {
  #theader .top {
    background-color: #fff;
  }
}
#theader .top .logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; height: 100%; writing-mode: vertical-lr; text-align: center; }
#theader .top .logo img { display: inline-block; width: 240px; }
@media (max-width: 1535px) {
    #theader .top { height: 103px; }
    #theader .top .logo img { width: 218.18px; }
}
@media (max-width: 1279px) {
    #theader .top { height: 93px; }
    #theader .top .logo img { width: 196.36px; }
}
@media (max-width: 1023px) {
    #theader .top { height: 83px; }
    #theader .top .logo img { width: 174.54px; }
}
@media (max-width: 767px) {
    #theader .top { height: 73px; }
    #theader .top .logo img { width: 152.72px; }
}

#theader .menu1 { display: none; z-index: 2; position: absolute; left: 0; top: 110px; width: 100%; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 4px -4px #000; border-top: 1px solid #ddd; } 
#theader.active .menu1 { display: block; }
#theader .menu1 a { display: block; padding: 11px 5px; text-align: center; font-size: 14px; color: #333; transition: background-color 0.3s; }
#theader .menu1 a:hover { background-color: #efefef; }
@media (max-width: 1535px) {
    #theader .menu1 { top: 103px; }
}
@media (max-width: 1279px) {
    #theader .menu1 { top: 93px; }
}
@media (max-width: 1023px) {
    #theader .menu1 { top: 83px; }
}
@media (max-width: 767px) {
    #theader .menu1 { top: 73px; }
}

/* hamburgerBtn */
.hamburgerBtn { z-index: 10; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); width: 20px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.hamburgerBtn > div { position: relative; width: 100%; height: 2px; background-color: #000; transition: all 0.3s ease; }
#theader.active .hamburgerBtn > div, #theader.scrollh .hamburgerBtn > div { background-color: #000; }
#theader.active .hamburgerBtn > div:nth-child(1) { transform: rotate(45deg); transform-origin: top left; }
#theader.active .hamburgerBtn > div:nth-child(2) { opacity: 0; }
#theader.active .hamburgerBtn > div:nth-child(3) { top: 0; transform: rotate(-45deg); transform-origin: bottom left; }
@media (max-width: 767px) {
    .hamburgerBtn { left: 30px; }
}
@media (max-width: 767px) {
    .hamburgerBtn { left: 20px; }
}