@charset "utf-8";

.top-bar .top-bar-btn .language-button ul {opacity:0; pointer-events:none; position:absolute; left:0; top:100%; width:100%; background: var(--white-color);box-shadow: 0px 3px 16px 2px rgba(0,0,0,0.14);-webkit-transition: opacity 0.3s ease;transition: opacity 0.3s ease;border-radius: 0.4em;z-index: 1;}
.top-bar .top-bar-btn .language-button ul li {margin-left:0;}
.top-bar .top-bar-btn .language-button ul li a {display: none;font-size: 0.8125rem;text-align: center;width: 100%; transition-property: background-color,color;}
.top-bar .top-bar-btn .language-button ul li:not(.active) a:hover {color:#d74f2e;background-color:#ffffff;}
.top-bar .top-bar-btn .language-button ul li.active a {color:#d74f2e;}
.top-bar .top-bar-btn .language-button.open ul {opacity: 1;pointer-events: auto;overflow: hidden;}
.top-bar .top-bar-btn .language-button.open ul li a {display: block;}

.top-bar .top-bar-btn .language-button ul {width:100px; left:2px; border-radius:16px !important;}
.top-bar .top-bar-btn .language-button ul li {margin:2px 0px; padding:0px 10px;}
.top-bar .top-bar-btn .language-button ul li a {font-weight:600; font-family:'Noto Sans KR', 'Nanum Gothic','나눔고딕', sans-serif; font-size:14px;}
.top-bar .top-bar-btn .language-button ul li:nth-of-type(1){margin:8px 0px 2px 0px;}
.top-bar .top-bar-btn .language-button ul li:nth-of-type(4){margin:2px 0px 8px 0px;}


@media (max-width: 640px) {
    .header .top-bar .top-bar-btn .language-button {width: auto;height: auto;padding:10px 0;display: flex;}
    .top-bar {padding-right: 0;}

    .top-bar .top-bar-btn {align-items: center;}
    .top-bar .top-bar-btn .language-button ul {border-radius: 1em;width: 70px;transform: translateX(-50%);left: 50%;}
    .top-bar .top-bar-btn .language-button .btn-hd {text-indent: -9999px;width: 23px;height: 23px;background-size: contain;}
    .top-bar .top-bar-btn .language-button ul li a {font-size: 15px;height: 2em;    line-height: 2em;}
    .top-bar .top-bar-list {margin-top: 0;}
    
    .top-bar .top-bar-btn .language-button ul {width:70px; left:0px; margin-left:10px; font-size:1.2rem; border-radius:0.4em !important;}
    .top-bar .top-bar-btn .language-button ul li {margin:4px 0px; padding:0px 4px;}
    .top-bar .top-bar-btn .language-button ul li a {font-size:14px;}

    body.menuOpen .top-bar .top-bar-btn .language-box .lang-item{color:rgba(0,0,0,0.3);}
    body.menuOpen .top-bar .top-bar-btn .language-box .lang-item.active{color:rgba(0,0,0,1);}
    body.menuOpen .top-bar .top-bar-btn .language-box::before{background-image: url("/image/common/icon-lang-on.png");}
}