@charset "utf-8";

/* ==================================================
| 헤더 
================================================== */
#wrap {position: relative;}
#header {
    z-index: 13;
    position: relative;
    background-color: #fff;
}

#header .header-body {
    display: flex;
    flex-direction: column;
}

#header .header-row {
    border-bottom: 1px solid #eeeeee;
}

#header .header-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

#header .header-row2 .header-column {
    display: flex;
    align-items: center;
}

#header .inner-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19.5px 0;
}

.social-list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-list li:not(.museumshop) a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #C8B18B;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .3s ease-out;
}

.social-list li.instagram a {
    background-image: url('/userContent/images/common/ico/ico_sns.svg');
}

.social-list li.youtube a {
    background-image: url('/userContent/images/common/ico/ico_youtube.svg');
}

.social-list li.facebook a {
    background-image: url('/userContent/images/common/ico/ico_facebook.svg');
}

.social-list li.instagram a:hover {
    background-image: url('/userContent/images/common/ico/ico_sns_on.svg') !important;
}

.social-list li.youtube a:hover {
    background-image: url('/userContent/images/common/ico/ico_youtube_on.svg') !important;
}

.social-list li.facebook a:hover {
    background-image: url('/userContent/images/common/ico/ico_facebook_on.svg') !important;
}

.social-list li.museumshop a {
    display: block;
    width: 142px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .3s ease-out;
    background-image: url('/userContent/images/common/ico/museumshop.svg');
}

.social-list li.museumshop a:hover {
    background-image: url('/userContent/images/common/ico/museumshop_on.svg') !important;
}

.social-list a:hover {
    border-color: #0096D7 !important;
}

#header .logo {
    position: relative;
    z-index: 1;
    display: block;
}

#header .util-box {
    display: flex;
    align-items: center;
}

#header .util-list {
    display: flex;
    align-items: center;
    gap: 30px;
}

#header .util-list li.login a,
#header .util-list li.members a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.8rem;
    font-weight: 500;
    color: #444444;
    line-height: 22px;
}
#header .util-list li.login a {gap:0; padding-left: 23px;}
#header .util-list li.login a {background-repeat: no-repeat; background-position: left center;}
#header .util-list li.login .logout-btn {
    background-image: url('/userContent/images/common/ico/ico_logout.svg');
}
#header .util-list li.login .login-btn {
    background-image: url('/userContent/images/common/ico/ico_login.svg');
}
#header .util-list li.lang > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

#header .util-list > li.login,
#header .util-list > li.members {
    position: relative;
}

#header .util-list > li.login::after,
#header .util-list > li.members::after {
    position: absolute;
    display: block;
    content: '';
    clear: both;
    width: 1px;
    height: 10px;
    background: #4444444D;
    top: 50%;
    margin-top: -5px;
    left: calc(100% + 15px);
}

#lang_select ~ .ss-main {
    height: 22px !important;
    line-height: 22px !important;
    border-radius: unset !important;
    border: unset !important;
    padding: 0 !important;
    min-height: unset !important;
    align-items: center;
}

#lang_select ~ .ss-main .ss-values {
    line-height: 22px;
    font-size: 1.8rem;
}

#lang_select ~ .ss-main .ss-arrow {
    width: 16px;
    height: 16px;
    margin: 0 0 0 5px;
    background-image: url('/userContent/images/common/ico/ico_world_arrow.svg');
}

.lang_select.ss-content .ss-list .ss-option {
    height: 34px !important;
    line-height: 34px !important;
}

#header .header-column.max-box {
    padding: 0 40px 0 20px;
}

#header .depth1 {
    display: flex;
    justify-content: space-between;
}

#header .depth1 > .dropdown {
    display: flex;
    align-items: center;
    position: relative;
}

#header .depth1 > li > a {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 20px;
}

#header .depth1 > li > a > span {
    font-size: 1.8rem;
    font-weight: 500;
    color: #101010;
    line-height: 22px;
    transition: .2s ease-out;
}

#header .depth1 > li > a > span i {
    transition: .2s ease-out;
}
#header .depth2 {
    display: none;
}
#header .header-nav.pc .depth2 {
    width: 100%;
    padding: 30px 0 40px;
    position: absolute;
    top: 100%;
    left: 0;
}

#header .depth2 li + li {
    margin-top: 20px;
}

#header .depth2 li {
    text-align: center;
    line-height: 19px;
}

#header .depth2 a {
    font-size: 1.6rem;
    font-weight: 500;
    color: #999999;
    line-height: 19px;
    transition: .2s ease-out;
    white-space: nowrap;
}

#header .header-nav.pc .depth1 > li:hover > a > span,
#header .header-nav.pc .depth1 > li > a.on > span,
#header .depth2 a:hover,
#header .depth2 a.on {
    color: #C8B18B;
}

#header .depth1 > li:hover > a > span i,
#header .depth1 > li > a.on > span i {
    background-color: #C8B18B;
}

.gnb_bg {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
}

.dep_bg {
    display: none;
    box-shadow: -5px 0px 10px 0px rgba(33, 32, 28, 0.03);
    width: 100%;
    height: 284px;
    top: 190px;
    background: #fff;
    position: absolute;
    z-index: 10;
    padding: 60px;
}

#header .header-nav.pc {
    flex-grow: 1;
}
.translation-links{
    transform: translateX(22px);
    z-index: 100;
    padding: 3px 12px;
    position: absolute !important;
    display: none;
    border: 1px solid #ddd;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 8px;
    margin: 5px 0 0 !important;
}
.lang-btn.lang-btn2 {
    position: relative;
    display: inline-block; cursor: pointer;
    background: url('/userContent/images/common/ico/ico_world_arrow.svg');
    background-repeat: no-repeat;
    background-position: bottom 40% right 2px;
    /* background-color: #f2f2f2;; */
    padding: 0 21px 0 23px;
    font-size:1.8rem; font-weight:500; line-height:22px; color:#444444 !important;
    
}
.lang-btn.lang-btn2:before {
    position:absolute; display:block; content:''; clear:both;
    width:18px; height:18px; background:url('/userContent/images/common/ico/ico_world.svg') no-repeat center center;
    left:0; top:50%; margin-top:-9px;
}
.translation-links li {
    cursor: pointer;
    display: block !important;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    color: #444444 !important;
    transition: .2s ease-out;
    height: 40px;
    line-height: 40px;
}
.translation-links li + li {border-top: 1px solid #eeeeee;}
.translation-links li:hover {  color:#0096d7 !important; }
@media screen and (max-width:760px){
    .translation-links{
        color:#000;
        display: none; /* 기본적으로 숨김 */
        position: absolute; /* 위치 조정 */
        bottom: 100%; /* 버튼 위에 위치 */
        left: 0; /* 왼쪽 정렬 */
        transform: translateX(0px);
    }
    .lang-btn.lang-btn2 {color:#000; padding: 0 20px 0 8px !important;}
}
#goog-gt-tt{display: none !important;}
#header .search-btn {
    flex-shrink: 0;
    margin-left: 44px;
}

#header .search-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #C8B18B;
}

#header .search-btn a:hover {
    background-color: #0096D7;
}
.srch-search .main-search {margin:0 auto;}
.main-search-wrap {display: none; position: absolute; top:70px; left:0; width:100%; background-color: #E7E5D3;}
.main-search-wrap .main-search-box { position: relative; width: 100%; max-width: 1520px; height:300px; display: flex; align-items: center; justify-content: center; padding:0 40px; margin:0 auto;}
.main-search {display: flex;  width: 100%; max-width:952px;}
.main-search input {width:inherit;  border-radius: 0 !important;}
.main-search input,
.org-search input[name="keyword"],
.part-search input[name="keyword"],
.srch-search input[name="keyword"] {flex-grow:1; font-size:1.8rem; height:60px; background-color: #fff; border:1px solid #eeeeee; padding:0 15px;}
.part-search input[name="keyword"] {width: inherit; border-radius: unset !important;}
.main-search input::placeholder,
.org-search input[name="keyword"]::placeholder,
.part-search input[name="keyword"]::placeholder,
.srch-search input[name="keyword"]::placeholder {font-size:1.8rem !important;}
#header .main-search-wrap .search-btn,
.org-search .search-input-btn,
.part-search .search-input-btn,
.srch-search .search-input-btn {margin-left: 0; width:98px; height:60px; background-color: #101010; color:#fff; display: flex; align-items: center; justify-content: center; padding-right:27px; font-size:1.8rem; font-weight: 500; line-height: 25px; background-image:url('/userContent/images/common/ico/ico_search.svg'); background-repeat: no-repeat; background-position: right 20px center; flex-shrink: 0;}
.srch-search .search-input-btn {position: static;}
#header .main-search-wrap .search-btn:hover,
.org-search .search-input-btn:hover,
.part-search .search-input-btn:hover,
.srch-search .search-input-btn:hover {background-color: #695E4A;}
.main-search-wrap .search-close {position: absolute; top:30px; right:40px; width:32px; height:32px; border:1px solid #101010; background-color: #fff;  background-image:url('/userContent/images/common/btn/close_black.svg'); background-repeat: no-repeat; background-position: center;}
.popup-box .search-close{position: absolute; top:15px; right:15px; width:22px; height:22px; border:1px solid #101010; background-color: #fff;  background-image:url('/userContent/images/common/btn/close_black.svg'); background-repeat: no-repeat; background-position: center; background-size: 18px;}
.main-search-wrap .search-close:hover,
.popup-box .search-close:hover {background-color: #101010; background-image:url('/userContent/images/common/btn/close_wht.svg');}
.srch-search .total-result {font-size: 1.5rem; font-weight: 400; line-height: 25px; text-align: center; margin-top: 30px; margin-bottom: 60px;}
.srch-search .total-result span {font-size: 1.8rem; font-weight: 600; color:#695E4A; line-height: 25px;}

/* ==================================================
| 푸터 
================================================== */
#footer {
    background-color: #101010;
    padding: 50px 0;
    box-sizing: border-box;
}

#footer .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
}

#footer .foot-link {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

#footer .foot-link {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 17px;
    color: #ffffff;
}

#footer .foot-info {
    margin-top: 25px;
}

#footer .foot-info,
#footer .foot-info2 {
    display: flex;
    gap: 20px;
}

#footer .foot-info2 {
    margin-top: 8px;
}

#footer .foot-info li {
    min-width: 139px;
}

#footer .foot-info li,
#footer .footer-copy {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 14px;
    color: #999999;
}

#footer .footer-copy {
    margin-top: 40px;
}

#footer .footer-row2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

#footer .social-list li:not(.museumshop) a {
    border-color: #999999;
}

#footer .social-list li.instagram a {
    background-image: url('/userContent/images/common/ico/ico_sns_footer.svg');
}

#footer .social-list li.youtube a {
    background-image: url('/userContent/images/common/ico/ico_youtube_footer.svg');
}

#footer .social-list li.facebook a {
    background-image: url('/userContent/images/common/ico/ico_facebook_footer.svg');
}

#footer .social-list li.museumshop a {
    background-image: url('/userContent/images/common/ico/museumshop_footer.svg');
}

.ss-main.family_select {
    border-radius: unset !important;
    background: transparent !important;
    border-color: #eeeeee !important;
    height: 36px !important;
    width: 201px !important;
    padding: 0 15px !important;
    color: #fff;
}

.ss-main.family_select .ss-values {
    line-height: 34px;
}

.ss-main.family_select .ss-arrow {
    flex: unset;
    display: block;
    margin-left: 5px;
    background-image: url('/userContent/images/common/ico/arrow_down_footer.png');
}

.ss-content.family_select .ss-list {
    margin-bottom: 10px;
}
.popup-box {
    position: fixed;
    width:100%; height:100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .6);
    display: none;
}
.popup-box .popup-inner {   
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 20px;
}
.popup-box .popup-content-wrap {   
    max-width: 469px;
    width:100%;
    position: relative;
    background: #fff;
    border: 1px solid #EEEEEE;
}
.popup-box .popup-header {
    padding-top: 50px;
    padding-left:20px; padding-right:20px;
}

.popup-box .popup-header i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 26px;
    cursor: pointer;
}

.popup-box .popup-header h3 {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: 14.5px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 14.5px;
    text-align: center;
}

.popup-box .popup-content {
    padding: 0 30px 30px 30px;
}

.popup-box .popup-content p {
    font-size: 1.4rem; font-weight: 400; color:#444444; line-height: 20px;
}
.popup-box .gobtn {margin: 30px auto 0 auto; height: 33px;
width: 110px;
font-size: 1.2rem;
line-height: 17px;
padding: 0 15px;}
.popup-box .gobtn .img {
    width: 14px;
    height: 14px;
    background-image: url('/userContent/images/common/ico/add_sm.svg');
}.popup-box .gobtn:hover .img {
    background-image: url('/userContent/images/common/ico/add_sm_wht.svg');

}