@charset "utf-8";

header button  {
    border: none;
    background:transparent;
}

header .poppins {
    font-family:"Poppins", sans-serif;
    font-weight: 400;
}

header.header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background:#fff;
    border-radius: 0 0 40px 40px;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05);
    transition:all 0.3s;
    z-index:11;
}

header.header.no-br{
    border-radius: 0;
    border-bottom: 1px solid #eeeeee;
}

header.header .header_container {
    position: relative;
    width: 100%;
    max-width:1630px;
    padding: 0 15px;
    margin: 0 auto;
}

header.header .header_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.header .header_logo {
    width: 140px;
    height: auto;
}

header.header .header_logo a {
    display: block;
    width:100%;
    height:100%;
}

header.header .header_logo img {
    width: 100%;
    height:100%;
    object-fit: cover;
}

/* 드롭메뉴 및 전체메뉴 */
header.header .header_right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 24px;
}

header.header .menu_ul {
    display: flex;
}

header.header .depth1_li {
    position: relative;
    padding: 0;
    cursor: pointer;
}

header.header .depth1_a {
    display: block;
    font-size: 18px;
    /*padding: 2.60vw 1.41vw;*/
    padding: 50px 1.41vw;
    color:#1c1c1c;
    transition: all .3s ease-in-out;
}

header.header .depth1_li:hover .depth1_a {
    color:#fbae25;
}

header.header .depth2 {
    display: none;
    position: absolute;
    /* top: 100px; */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    min-width: 140px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    background:#fff;
}

header.header .depth2_ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px 0;
}

header.header .depth2_li {
    width: 100%;
}

header.header .depth2_a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 400;
    color:#1c1c1c;
    background: #fff;
    transition: all .3s ease-in-out;
    white-space: nowrap;
} 


header.header .depth2_a:hover {
    color:#fff;
    background: #fbae25;
}

/* 다국어, 검색, 전체메뉴 버튼 */
header.header .header_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0 24px;
}


/* 다국어 */

header.header .lang_btn_box {
    position: relative;
}

header.header .header_btn .lang_btn {
    padding: 5px;
}


header.header .header_btn .lang_icon  {
    width: 23px;
    height: 23px;
}
header.header .header_btn .lang_icon img {
    width: auto;
    height: 100%;
    object-fit: cover;
    color:#222;
}

header.header .header_btn .lang_select_box {
    display: none;
    position: absolute;
    /* top: 60px; */
    left: 50%;
    transform: translateX(-50%);   
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    background:#fff;
}


header.header .header_btn .lang_ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px 0;
}

header.header .header_btn .lang_a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 400;
    color:#1c1c1c;
    background: #fff;
    transition: all .3s ease-in-out;
} 

header.header .header_btn .lang_a:hover {
    color:#fff;
    background: #fbae25;
}


/* 검색 */

header.header .search_btn {
    padding: 5px;
}

header.header .search_icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
}

/* header.header .search_icon img {
    width: 100%;
    height: 100%;
} */

header.header .search_icon .serach_yes {
    display: none;
}

header.header .search_icon.active .serach_yes {
    display: block;
    width: 20px;
    height: 20px;
}

header.header .search_icon.active .serach_no {
    display: none;
}


header.header .header_search {
    display: block;
    position: absolute;
    top: 101%;
    left: 0;
    width: 100%;
    padding: 60px 0;
    text-align: center;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

header.header .header_search.active {
    opacity: 1;
    visibility: visible;
}

header.header #search {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

header.header #search input {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border:none;
    font-size: 16px;
    border-bottom: 1px solid #333333;
    color:#1c1c1c;
}

header.header #search input::placeholder {
    color:#999999;
}

header.header #search button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    text-align: center;
    background: #fbae25;
    border: 0;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center; 
}

header.header #search .s2_search {
    width: 20px;
    height: 21px;
    position: relative;
}


header.header #search .circle {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    border: 2px solid #fff;
    border-radius: 50%;
}

header.header #search .line {
    width: 2px;
    height: 6px;
    display: block;
    position: absolute;
    bottom: 2px;
    right: 3px;
    background: #fff;
    transform: rotate(-45deg);
}

header.header .header_keyword {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px 0;
}

header.header .keyword_tite {
    font-weight: 500;
    font-size: 16px;
    color:#1c1c1c;
}


/* 전체메뉴 버튼 */

header.header .all_btn {
    padding: 5px;
    padding-right: 0;
}

 
header.header .all_icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
}

header.header .all_btn .all_yes {
    display: none;
}

header.header .all_btn.active .all_yes {
    display: block;
    width: 20px;
    height: 20px;
}
header.header .all_btn.active .all_no {
    display: none;
}


header.header .all_menu {
    position: absolute;
    top: 101%;
    left: 0;
    width: 100%;
    min-height: 334px;
    padding:40px 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

header.header .all_menu.active {
    opacity: 1;
    visibility: visible;
}

header.header .all_menu .container_fix {
    max-width: 1430px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

header.header .all_depth1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

header.header .all_depth1_a {
    display: block;
    text-align: center;
    padding: 5px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 18px;
    color:#1c1c1c;
    transition: all .3s ease-in-out;
}

header.header .all_depth2_ul li + li{
    margin-top: 10px;
}

header.header .all_depth2_a {
    display: block;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    font-weight: 400;
    color:#999;   
    transition: all .3s ease-in-out;
}

header.header .all_depth1_li:hover .all_depth1_a,
header.header .all_depth2_ul li:hover .all_depth2_a
{
    color:#fbae25;
}


@media (max-width:1280px) {
    header.header .header_logo {
        width: 120px;
    }

    header.header .header_right,
    header.header .header_btn {
        gap:0 15px;
    }

    header.header .depth1_a {
        font-size: 16px;
        padding:40px 1.41vw;
    }

    header.header .depth2_a,
    header.header .header_btn .lang_a {
        height:40px;
        padding: 0 14px;
        font-size: 14px;
    }

    header.header .header_search {
        padding:40px 0;
    }

    header.header #search input {
        height: 50px;
        line-height:50px;
    }


    header.header .all_depth1_a {
        margin-bottom: 15px;
    }

    header.header .all_depth1_a,
    header.header .all_depth2_a {
        font-size: 16px;
    }
}

@media (max-width:991px) {
    header.header .header_logo {
        width: 96px;
    }

    header.header {
        border-radius:0;
    }

    header.header .header_wrap {
        padding:20px 0;
        height: 60px;
    }

    header.header .header_menu {
        display: none;
    }

    header.header .header_right,
    header.header .header_btn  {
        gap: 0 18px;
    }

    header.header .header_btn .lang_btn,
    header.header .search_btn,
    header.header .all_btn {
        padding: 0;
    }

    header.header .header_btn .lang_icon {
        width: 23px;
        height: 23px;
    }

    header.header .search_icon {
        width: 22px;
        height: 22px;
    }

    header.header .search_icon img {
        width: 100%;
        height: 100%;
    }

    header.header .all_icon {
        width: 22px;
        height: 22px;
    }
    header.header .all_icon img {
        width: 100%;
        height: 100%;
    }

    header.header .header_btn .lang_btn {
        position: relative;
        z-index: 100;
    }


    header.header .header_btn .lang_select_box { 
        top: -10px;
        border-radius:38.5px;
        padding: 35px 12px 17px;
    }
    header.header .header_btn .lang_a {
        height: auto;
        padding: 0px;
        font-size: 16px;
    }
    header.header .header_btn .lang_ul {
        padding-top: 12px;
        gap:12px 0;
    }

    header.header .header_btn .lang_a:hover {
        color:#fbae25;
        background: transparent;
    }


    /* 전체메뉴 */
    header.header .all_menu {
        top:100%;
        min-height: unset;
        height:calc(100vh - 60px);
        padding:0;
        overflow-y: scroll;
    }

    header.header .all_depth1 {
        flex-direction: column;
        padding-left: 5px;
    }

    header.header .all_depth1_li{
        width:100%;
    }

    header.header .all_depth1_a  {
        position: relative;
        width: 100%;
        padding: 24px 0;
        text-align: left;
        font-size: 18px;
        margin-bottom: 0;
    }

    header.header .all_depth1_a::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        transform: rotate(0) translateY(-50%);
        width: 11px;
        height: 6px;
        background: url('/img/droparrow.svg') no-repeat center center / cover;
        transition: all .3s ease-in-out;
    }

    header.header .all_depth1_li.active .all_depth1_a::after  {
        top:40%;
        transform: rotate(180deg) translateY(-50%);
    }

    header.header .all_depth1_li:hover .all_depth1_a{
        color:#fbae25;
    }

    header.header .all_depth2{
        display: none;
        margin-left: 12px;
    }


    header.header .all_depth2_a {
        padding: 22px 0 22px 10px;
        text-align: left;
        font-size: 18px;
        transition: all .3s ease-in-out;
    }

    header.header .all_depth2 li {
        background: #fff;
        transition: all .3s ease-in-out;
    }

    header.header .all_depth2_ul li + li {
        margin-top: 0;
    }
    
    header.header .all_depth2 li:hover {
        background: #fbae25;
    }

    header.header .all_depth2 li:hover .all_depth2_a {
        color:#222222;
    }

    header.header #search button {
        top: 40%;
    }


    header.header #search input {
        height: 40px;
        line-height: 40px;
    }
    
}