/* 모든 메뉴 기본 회색 */
.main-menu li a {
  color: #999;
}

/* 현재 선택된 메뉴는 검정색 */
.main-menu li.current-menu-item > a {
  color: #000;
}

/* 홈에서는 메뉴 전부 검정 */
body.home .gnb a {
  color: black ;
}

.language-switcher {
  display: inline-block;
  margin-left: 20px;
}

.language-switcher a {
  color: gray;
  margin: 0 5px;
  text-transform: uppercase;
}
.site-branding {
      display: flex
;    padding-bottom: 40px;
    height: 100svh;
    flex-direction: column;
    justify-content: space-between;
}
.language-switcher a.wpglobus-current-language {
  color: #000;
}

.gnb a {
  color: gray;         /* 기본 메뉴 회색 */
}
.gnb .current-menu-item > a {
  color: black;        /* 현재 페이지는 검정 */
}

.lang-switcher a {
  color: gray;         /* 언어 스위치 기본 회색 */
}
.lang-switcher .active a {
  color: black;        /* 현재 언어는 검정 */
}

header {position: fixed;
  top: 14px;
  left: 16px;
  height: calc(100svh - 28px);
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
}
.lang-switcher {
    display: flex;
    flex-direction: column;
}
/* HOME / news */

.home-wrap {
}

.news{  
    opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow-y: scroll;
width: 50%;
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
}
/* 보여질 때 추가되는 클래스 */
.news.show {
  opacity: 1;
  visibility: visible;
}
.news-container {

  margin: 14px 0px;
    display: flex;
    flex-direction: column;
}
.news-block {
display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    align-items: flex-end;
}

.news-img {
  margin-right: 12px;
  width: 300px;
height: auto;
}

.news-txt {
      padding-bottom: 6px;
}

.news-btn {
      position: fixed;
    z-index: 9;
    right: 16px;
}

/* 자동 세로 스크롤 */
@keyframes scroll-news-vertical {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%); /* 뉴스 높이에 맞게 조절 */
  }
}

/* 데스크탑에서 자동 세로 스크롤 */
.news.auto-scroll .news-container {
  display: flex;
  flex-direction: column;
  animation: scroll-news-vertical 50s linear infinite;
}

.news.auto-scroll.paused .news-container {
  animation-play-state: paused !important;
}


@media (max-width: 768px) {
  iframe {
    width: 100%;
    height: 200px !important;
}
  header {position: fixed;
  top: 0;
  padding: 14px 16px;
  left: 0;
  height:calc(100svh - 0px);
  width: 100vw !important;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
}
  .news {
     background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow-y: hidden;
    overflow-x: auto; /* ✅ 가로 스크롤 활성화 */
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
  }

  .news-container {
    display: flex !important;
    flex-direction: row !important;
       animation: none !important; /* ✅ 애니메이션 제거 */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0px;
    padding: 14px;
    width: max-content; /* ✅ 컨텐츠 전체 너비로 확장 */
    box-sizing: border-box;
  }

  .news-block {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: auto;
    max-width: 400px;
        display: flex
;
    flex-direction: column;
    align-items: flex-start;
  }
  .news-txt {
    margin-top: 8px;
    width: 300px;
  }
  .gnb > li {
    margin-bottom: 4px;
  }.lang-switcher > li {
    margin-top: 4px;
  }
}

.container2 {
 z-index: 9;
display: flex
;
    width: calc(100vw - 216px);
    position: absolute;
    left: 200px;
    top: 16px;
    flex-direction: row-reverse;
justify-content: flex-end;
}
.container {
  z-index: 999;
display: flex
;
    width: calc(100vw - 216px);
    position: absolute;
    left: 200px;
    top: 16px;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.content-txt > p {
  color: #aaa;
  line-height: 1.7;
}

iframe {
  width: 600px;
  height: 400px !important;
}
.view-container.view-img {
      padding-top: 4px;
}

 .view-switch {
    margin-bottom: 16px;
  }
  .view-btn {
    margin-left: 10px;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
  }
  .view-btn.active {
    color: black;
  }
  .view-container {
    display: none;
  }
  .view-container.view-img {
    display: block;
  }

  .content-txt a {
    color: #aaa;
    text-decoration: none;
  }
  .content-txt a:hover {
    color: black;
  }
.content-img {
    row-gap: 2px;
column-gap: 8px;
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
  .work-thumb > a > img {
    width: auto;
    height: 100px;
  }
    .work-thumb > a > img:hover {
  opacity: 0.2;
  }


  .view-table {
    display: flex;
    flex-direction: column;
  }
  
    .view-table > a {
      padding: 6px 0px;
    border-bottom: 1px solid #DDDDDD;
  }  
    .view-table > a:first-child {
      padding-top: 0px;
  }
  .table-container{
    width: calc(100% - 160px);
  }
.view-txt {
    width: calc(100vw - 320px);
  }

.texts-container {
      width: calc(100vw - 60px);
flex-direction: column;
}
.cate-switch {    margin-top: 3px;
      display: flex;
    margin-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
}
.cate-switch > .view-btn,
.cate-switch > .cate-btn {
 margin-left: 0 !important;
 padding-bottom: 8px !important;
}
@media (max-width: 768px) {
    
    .view-table > a {
      padding: 6px 0px ;
  }  

  .table-container {
            width: 100%;
        margin-top: 32px;
}

  iframe {
  width: 600px;
  height: 200px !important;
}
  .container {
        width: calc(100vw - 32px);
        position: absolute;
                left: 16px;
        top: 60px;}
.view-switch {
   top: 14px;
    left: 16px;
    position: fixed;
}
/* 기본적으로 안보이게 설정 */
.logo-en,
.logo-ko {
  display: none;
}

/* 메뉴 열렸을 때는 block으로 보이기 */
.menu-open .logo-en,
.menu-open .logo-ko {
  display: block;
}

.view-btn {
    margin-right:  10px;
    margin-left:  0px !important;
}
.container {
  flex-direction: row;
}
      
.content-img .work-thumb {
    margin-bottom: 0px !important;
}
.content-img {
    row-gap: 2px !important;
column-gap: 8px !important;
}
.texts-container {
      width: calc(100vw - 32px);
}
.view-txt {
    width: calc(100vw - 0px);
}
.container2 {
    left: 16px;
    top: 14px;
 width: calc(100vw - 80px);
}

}