.header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 90rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s ease;
    z-index: 96;
}
.header.hide {
    transform: translateY(-100%);
}
.header.white {
    background-color: #fff;
}

.gnb {
    width: 1400rem;
    display: flex;
    align-items: center;
}

.gnb-left {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35rem;
}

.menu {
    display: flex;
    gap: 50rem;
}

.menu-item {
    position: relative;
}

.menu-item a:first-child {
    color: #333;
    padding: 15rem 0;
    font-size: 18rem;
    font-weight: 500;
    letter-spacing: -0.5rem;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 5px;
}

.menu-item a:first-child:hover {
    color: var(--main-color);
}

.menu-item a:first-child i {
    font-weight: lighter;
    display: none;
}

.menu-hover {
    position: absolute;
    top: 50rem; left: 50%;
    transform: translate(-50%, 0);
    width: 120rem;
    padding: 7rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 7rem;
    border: 2px solid var(--main-color);
    background-color: #fff;
    display: none;
}

.menu-item .menu-hover li {
    position: relative;
    width: 100%;
    text-align: center;
}

.menu-item .menu-hover li a {
    width: 100%;
    padding: 7rem;
    font-size: 16rem;
    display: block;
    border-radius: 5px;
}

.menu-item .menu-hover li a:hover {
    color: var(--main-color);
}

.menu-item .mi-head i {
    display: flex !important;
}

.logo {
    width: 130rem;
}

.gnbBtn-m,
#check,
.menuBtns {
    display: none;
}

.gnbBtn {
    width: 130rem;
    color: #fff;
    padding: 10rem 0;
    font-size: 17rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5rem;
    background-color: var(--main-color);
}

.gnb-actions {
    display: flex;
    align-items: center;
    gap: 20rem; /* 언어 버튼과 제품문의 간격 */
}

.gnb-right {
    display: flex;
    align-items: center;
}

.language-dropdown-wrapper {
    position: relative;
}

.lang-trigger {
    padding: 8rem 10rem;
    border: none;
    background: none;
    color: #333;
    font-size: 16rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5rem;
    transition: all 0.3s ease;
}

.lang-trigger:hover {
    color: var(--main-color);
}

.lang-trigger i {
    font-size: 14rem;
    transition: transform 0.3s ease;
}

.lang-trigger.active i {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 5rem);
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4rem;
    min-width: 100rem;
    display: none;
    overflow: hidden;
    z-index: 1000;
    box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.1);
}

.lang-dropdown-menu.show {
    display: block;
}

.lang-item {
    padding: 10rem 16rem;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15rem;
    font-weight: 500;
}

.lang-item:hover {
    color: var(--main-color);
}

.lang-item.active {
    color: var(--main-color);
    font-weight: 600;
}


/*==================================================*/
@media (max-width: 1450px) {
    .gnb {
        width: 100%;
        padding: 0 20px;
    }
}


@media (max-width: 768px) {
    .gnbBtn {
        display: none;
    }
    
    .gnb-right {
        margin-left: auto;
        margin-right: 20rem;
        z-index: 999;
    }
    
    .language-dropdown-wrapper {
        position: static;
    }
    
    .lang-trigger {
        padding: 6rem 12rem;
        font-size: 16rem;
        border: none;
        background: none;
        color: #333;
    }
    
    .lang-trigger i {
        display: none; /* 모바일에서 화살표 숨김 */
    }
    
    .lang-dropdown-menu {
        position: absolute;
        top: calc(100% + 10rem);
        right: 0;
        display: none !important; /* 모바일에서 기본적으로 닫힘 */
        min-width: 80rem;
        border: 1px solid #ddd;
        border-radius: 4rem;
        box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.15);
    }
    
    .lang-dropdown-menu.show {
        display: block !important; /* show 클래스가 있을 때만 표시 */
    }
    
    .lang-item {
        padding: 12rem 16rem;
        font-size: 15rem;
    }
    
    .gnbBtn-m {
        position: fixed;
        bottom: 40rem; left: 50%;
        transform: translate(-50%, 0);
        color: #fff;
        width: 90%;
        padding: 20rem 0;
        font-size: 22rem;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 7px;
        background-color: var(--main-color);
        z-index: 999;
    }
    
    .header.white {
        background-color: #fff;
    }
    
    .menu {
        position: relative;
        position: fixed;
        top: 90rem; left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid #ddd;
        background-color: #fff;
        display: none;
    }
    .menu.show {
        display: flex;
    }
    
    .menu-item {
        border-bottom: 1px solid #ddd;
    }
    
    .menu-item a:first-child {
        height: 80rem;
        padding: 0 30rem;
        font-size: 25rem;
        font-weight: 600;
        justify-content: space-between;
    }
    
    .menu-item a:first-child i {
        font-size: 24rem;
    }
    
    .menu-item a:first-child:hover {
        background-color: transparent;
    }
    
    .menu-hover {
        position: static;
        transform: unset;
        width: 100%;
        padding: 25rem;
        gap: 10rem;
        border: none;
        box-shadow: none;
        border-radius: 0;
        background-color: #f2f2f2;
        display: none;
    }

    .menu-hover.on {
        display: flex !important;
        flex-direction: column;
    }

    .mh-mobile {
        display: flex;
    }
    
    .menu-item .menu-hover li {
        width: 100%;
        text-align: left;
    }

    .menu-item .menu-hover li a {
        height: unset !important;
        padding: 10rem 20rem;
        font-size: 23rem;
        font-weight: 500;
        border-bottom: none;
    }
    
    .menu-item .menu-hover li a:hover {
        background-color: transparent;
    }
    
    .menuBtns {
        display: inline-block;
    }
    
    .bar1,
    .bar2,
    .bar3 {
        width: 24px;
        height: 2px;
        margin: 6px 0;
        background-color: #222;
        transition: .3s ease;
    }

    .change .bar1 {
        transform: rotate(-45deg) translate(-5px, 2px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        transform: rotate(45deg) translate(-9px, -6px);
    }
}


@media (max-width: 550px) {
    .gnbBtn-m {
        padding: 30rem 0;
        font-size: 30rem;
    }
    
    .header {
        height: 100rem;
    }
    
    .logo {
        width: 150rem;
    }
    
    .menu {
        top: 100rem;
    }
    
    .bar1,
    .bar2,
    .bar3 {
        width: 24px;
        height: 2px;
        margin: 3px 0;
        transition: .3s ease;
    }

    .bar2 {
        opacity: 0;
        visibility: hidden;
    }

    .change .bar1 {
        transform: rotate(-45deg) translate(-3px, 3px);
    }

    .change .bar3 {
        transform: rotate(45deg) translate(-4px, -4px);
    }
}