@charset "utf-8";

/* header */
#header {width:100%;height:100px;position:fixed;left:0;top:0;z-index:150;overflow:visible;transition:height .3s ease, background-color .3s ease, box-shadow .3s ease;}
#header::after {position:absolute;left:0;top:100px;content:'';display:block;width:0;border-bottom:1px solid #ddd;z-index:-1;}
#header .header_wrap {padding:0 10px;position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;height:100px;margin:0 auto;padding:0;max-width:1296px;box-sizing:border-box;}

#header.fixed {box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);top:0;height:100px;}

#header .header_wrap .logo {width:200px;top:0px;position:relative;z-index:150;}
#header .header_wrap .logo img {height:50px;}
#header .logoc {display:none;}
#header.fixed .logoc {display:block;}
#header.fixed .logow {display:none;}

#header.on {transition:height .3s ease, background-color .3s ease;height:334px;background-color:#fff;border-bottom:1px solid #ddd;}
#header.on .logoc {display:block;}
#header.on .logow {display:none;}
#header.on::after {width:100%;background-color:#ddd;transition:width .3s ease;}
#header.on .header_wrap .gnb > .gnb_wrap > .menu > a {color:#222;}

#header .header_wrap .gnb {position:absolute;right:0;top:0;}
#header .header_wrap .gnb > .gnb_wrap {display:flex;}
#header .header_wrap .gnb > .gnb_wrap > .menu {position:relative;}
#header .header_wrap .gnb > .gnb_wrap > .menu > a {position:relative;padding:0 30px;display:block;font-size:1.13rem;line-height:98px;font-weight:700; letter-spacing:-0.05em;white-space:nowrap;background:#fff;color:transparent;-webkit-background-clip:text;transition:color .2s ease;text-align:center;}
/* sel 적용 */
#header .header_wrap .gnb > .gnb_wrap > .menu > a.sel {font-weight:900;}

#header .header_wrap .gnb > .gnb_wrap > .menu > a::after {position:Absolute;left:0;bottom:- 1px;z-index:1;transition:width .2s ease;content:'';display:block;width:0;height:3px;background-color:var(--color-secondary);}

#header .header_wrap .gnb > .gnb_wrap > .menu:hover > a::after {width:100%;}
#header .header_wrap .gnb > .gnb_wrap > .menu.on > a::after {width:100%;}
#header .header_wrap .gnb > .gnb_wrap > .menu > a.sel::after {width:100%;}
#header.fixed .header_wrap .gnb > .gnb_wrap > .menu > a {color:#222;}

/* PC 번역 메뉴 - 다른 대메뉴 높이(98px)와 완벽히 일치 */
#header .header_wrap .gnb > .gnb_wrap > .menu-lang-li {display:flex;align-items:center;height:98px;padding:0 10px 0 20px;}

/* 소메뉴 (평상시 엄격히 숨김 및 마우스 간섭 방지) */
#header > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu {
    padding:40px 0 0 0;
    display:none;
    opacity:0;
    text-align:center;
    visibility:hidden;
    pointer-events:none;
    height:0;
    overflow:hidden;
    transition:opacity .2s linear;
}

#header:not(.on) > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu {
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    height:0 !important;
    overflow:hidden !important;
}

/* 마우스 오버로 #header.on이 되었을 때만 소메뉴 노출 */
#header.on > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    height:auto !important;
    overflow:visible !important;
}

#header > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu > li {padding-bottom:15px;}
#header > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu > li > a {font-size:0.94rem;line-height:1.6;color:#5B5B5B;}
#header > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu > li > a:hover {transition:all .3s linear;opacity:1;}
/* sel 적용 */
#header > .header_wrap .gnb > .gnb_wrap > .menu > .sub_menu > li > a.sel {font-size:0.94rem;line-height:1.6;color:var(--color-secondary);}


#header.fixed {transition:all .3s linear;background-color:#fff;}
#header.fixed::after {width:100%;background-color:#ddd;}

@media all and (max-width:1400px) {
  #header {height:74px;}
  #header::after {top:74px;}
  
  #header.header-scrolled {box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.1);top:0;height:74px;}

  #header .header_wrap {height:74px;padding:0 20px;}
  #header .header_wrap .logo img {height:40px;}
  #header .header_wrap .gnb {display:none;}
}




/* 모바일 header */
html.sideShow {height:100%;overflow:hidden;}
.mobile_btn {display:none;}
.mobile_right_btns {display:none !important;}
#header_m {display:none;z-index:999999 !important;}

#header_m {padding:0px;box-sizing:border-box;}

.header_m_logo {padding-left:20px;padding-bottom:20px;}
.header_m_logo img {height:40px;}


/* 모바일 닫기 버튼 */
#header_m .close_btn {position:absolute;right:30px;top:30px;}
#header_m .close_btn button {border:0;background-repeat:no-repeat;background-color:transparent;background-image:url(../img/btn_close.png);display:block;width:18px;height:17px;background-size:cover;overflow:hidden;text-indent:-9999px;}

/* 모바일 대메뉴 */
#gnb_m {padding:0;}
#gnb_m>ul>li>a {display:block;font-size:1.00rem;font-weight:700;line-height:16px;padding:20px 20px;border-bottom:1px solid #e7e7e7;box-sizing:border-box;}
#gnb_m>ul>li>a.menu_m {position:relative;}
#gnb_m>ul>li>a.menu_m:after {content:'';transition:0.3s ease-out;display:block;background-image:url(../img/icon_depth_arrow.png);background-repeat:no-repeat;background-size:cover;background-position:center;width:16px;height:8px;position:absolute;right:30px;top:50%;}
#gnb_m>ul>li>a.menu_m.active:after {transform:rotate(180deg);}
#gnb_m>ul>li>.sub_menu_m {background-color:#f6f6f6;display:none;}
#gnb_m>ul>li>a.menu_m.no-sub:after {display:none;} /* 대메뉴만 있을 때 메뉴 우측 아이콘 없애기 */

/* 모바일 소메뉴 */
#gnb_m>ul>li>.sub_menu_m ul li a {display:block;color:#777777;font-size:0.88rem;padding:10px 30px;}
#gnb_m>ul>li>.sub_menu_m ul li a.cur {color:#9e8621;}
/* sel 적용 */
#gnb_m>ul>li>.sub_menu_m ul li a.sel {display:block;color:var(--color-secondary);font-size:0.88rem;padding:10px 30px;}

@media all and (max-width:1400px) {
  #header_m {display:block;position:fixed;right:-120%;padding:17px 0 0 0;top:0;bottom:0;overflow:auto;width:720px;z-index:160;background-color:#fff;}
  /* 모바일 우측 버튼 래퍼 */
  .mobile_right_btns {display:flex !important;align-items:center;gap:12px;position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:150;}
  /* 모바일 메뉴 버튼 */
  .mobile_btn {display:block !important;float:none !important;padding:0 !important;}
  .mobile_btn a {overflow:hidden;display:block;text-indent:-9999px;width:20px;height:20px;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:url(../img/btn_menu.png);transition:0.4s ease-out;}
  body[role=sub] .mobile_btn a, #header.fixed .mobile_btn a {background-image:url(../img/btn_black.png) !important;}
}

/* ==========================================================================
   다국어 번역 버튼 및 드롭다운 스타일 (quick 스타일 반영)
   ========================================================================== */
.lang-dropdown-wrap {
    position: relative;
    display: inline-block;
}
.lang-dropdown-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    outline: none !important;
    text-decoration: none !important;
}
.lang-dropdown-btn:hover, .lang-dropdown-btn:focus, .lang-dropdown-btn.active {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}
/* 헤더 스크롤/오버/서브페이지 시 다크 스타일 */
#header.fixed .lang-dropdown-btn,
#header.on .lang-dropdown-btn,
body[role=sub] #header .lang-dropdown-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #222222 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
#header.fixed .lang-dropdown-btn:hover,
#header.on .lang-dropdown-btn:hover,
body[role=sub] #header .lang-dropdown-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
    color: #000000 !important;
}
.lang-dropdown-btn::after {
    display: none !important;
}
.lang-flag-img {
    width: 20px;
    height: 15px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.lang-dropdown-menu {
    display: none;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    min-width: 190px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    animation: dropdownFadeIn 0.2s ease;
    z-index: 99999 !important;
    list-style: none !important;
    margin: 0 !important;
}
.lang-dropdown-menu.show {
    display: block !important;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.lang-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}
.lang-item .lang-name-text {
    font-weight: 600;
    color: #0f172a !important;
}
.lang-item:hover {
    background-color: #f1f5f9 !important;
}
.lang-item:hover .lang-name-text {
    color: #2563eb !important;
}
.lang-item.active {
    background-color: #eff6ff !important;
}
.lang-item.active .lang-name-text {
    color: #2563eb !important;
    font-weight: 800;
}
.lang-badge {
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
}
.lang-item.active .lang-badge {
    background-color: #2563eb;
    color: #ffffff;
}

/* Google Translate 기본 위젯, 상단 바, iframe 및 번역 배너 완전 차단 */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner,
.goog-te-spinner-pos,
.goog-te-spinner-animation,
.skiptranslate iframe,
iframe.skiptranslate,
body > .skiptranslate,
.goog-te-gadget-icon,
.goog-te-gadget-simple,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-aZ2wEe,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-ORHb-Oxf5td,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-SmfZ-Oxf5td,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,
[class*="VIpgJd"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

body {
    top: 0px !important;
    position: static !important;
}

#google_translate_element {
    display: none !important;
}

.goog-tooltip, .goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

@media (max-width:768px) {
  #header_m {width:100%;}
}


/* 메인상단 패턴 */
/* .pattern {height:100%;position:absolute;width:100%;z-index:3;left:0;bottom:0;background-color:rgba(0, 0, 0, 0.6);background-repeat:repeat;opacity:0.6;} */
.pattern {height:100%;position:absolute;width:100%;z-index:3;left:0;bottom:0;background: url("../img/pattern.png");background-repeat:repeat;}


/* 메인상단 스크롤 */
.down {position:absolute;width:50px;bottom:50px;left:50%;margin-left:-25px;z-index:14;}
.down img {text-align:center;z-index:14;}


/* 메인상단 마우스 스크롤 */
.scrolldown {--color:white;--sizeX:24px;--sizeY:40px;position:absolute;bottom:60px;left:50%;margin-left:-12px;z-index:14;text-align:center;width:var(--sizeX);height:var(--sizeY);margin-left:var(sizeX / 2);border:calc(var(--sizeX) / 10) solid var(--color);border-radius:50px;box-sizing:border-box;}
.scrolldown::before {content:"";position:absolute;bottom:30px;left:50%;width:6px;height:6px;margin-left:-3px;background-color:var(--color);border-radius:100%;animation:scrolldown-anim 2s infinite;
box-sizing:border-box;box-shadow:0px -5px 3px 1px #ffffff66;}

@keyframes scrolldown-anim {
  0% {opacity:0;height:6px;}
  40% {opacity:1;height:10px;}
  80% {transform:translate(0, 16px);height:10px;opacity:0;}
  100% {height:3px;opacity:0;}
}

@media (max-width:767px) {
  .scrolldown {--color:white;--sizeX:20px;--sizeY:33px;position:absolute;bottom:50px;left:50%;margin-left:-10px;z-index:14;text-align:center;width:var(--sizeX);height:var(--sizeY);margin-left:var(sizeX / 2);border:calc(var(--sizeX) / 10) solid var(--color);border-radius:50px;box-sizing:border-box;}
  .scrolldown::before {content:"";position:absolute;bottom:20px;left:50%;width:4px;height:4px;margin-left:-2px;background-color:var(--color);border-radius:100%;animation:scrolldown-anim 2s infinite;
box-sizing:border-box;box-shadow:0px -5px 3px 1px #ffffff66;}

  @keyframes scrolldown-anim {
0% {opacity:0;height:6px;}
40% {opacity:1;height:10px;}
80% {transform:translate(0, 10px);height:10px;opacity:0;}
100% {height:3px;opacity:0;}
  }
}

.chevrons {padding:4px 0 0 0;margin-left:-3px;margin-top:38px;width:24px;display:flex;flex-direction:column;align-items:center;}
.chevrondown {margin-top:-2px;position:relative;border:solid var(--color);border-width:0 3px 3px 0;display:inline-block;width:10px;height:10px;transform:rotate(45deg);}
.chevrondown:nth-child(odd) {animation:pulse 500ms ease infinite alternate;}
.chevrondown:nth-child(even) {animation:pulse 500ms ease infinite alternate 250ms;}

@media (max-width:767px) {
  .chevrons {padding:4px 0 0 0;margin-left:-2px;margin-top:31px;width:20px;display:flex;flex-direction:column;align-items:center;}
  .chevrondown {margin-top:-4px;position:relative;border:solid var(--color);border-width:0 2px 2px 0;display:inline-block;width:8px;height:8px;transform:rotate(45deg);}
}

@keyframes pulse {
  from {opacity:0;}
  to {opacity:0.5;}
}


/* 메인상단 날씨 위젯 영역 */
.main_weather {position:relative;width:100%;height:auto;z-index:15;}