@charset "utf-8";
/* 새글 스킨 (latest) */
.lt {position: relative; }
.lt .flex_box {gap: 50px;}

.lt .flex_box .left_box {width: 40%;}
.lt .flex_box .left_box .img_box {margin-bottom: 30px; overflow: hidden; border-radius: 20px; position: relative;}
.lt .flex_box .left_box .img_box img {width: 100%; border-radius: 20px; display: block;}
.lt .flex_box .left_box .txt_box {background-color: #f9f9f9; padding: 30px; justify-content: space-between; border-radius: 20px; display: flex; gap: 30px;}
.lt .flex_box .left_box .txt_box .lt_title_wrap {width: 83%; overflow: hidden; position: relative;}
.lt .flex_box .left_box .txt_box .lt_title_wrap p {font-size: 22px; font-weight: 600; width: 100%; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.lt .flex_box .right_box .img_box .lt_sub_item {overflow: hidden; border-radius: 10px; position: relative; display: block; flex: 1; max-width: 219px; background-color: #fff;}
.lt .flex_box .right_box .img_box .lt_sub_item img {display: block; opacity: 0.6;}
.lt .flex_box .left_box .txt_box a {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #005bac;}
.lt .flex_box .left_box .txt_box a i {color: #005bac;}

.lt .flex_box .right_box {width: calc(60% - 50px);}
.lt .flex_box .right_box .text_box {}
.lt .flex_box .right_box .text_box .lt_title_wrap {position: relative; overflow: hidden;}
.lt .flex_box .right_box .text_box .lt_content_wrap {position: relative; overflow: hidden;}
.lt .flex_box .right_box .text_box h2 {font-size: 26px; margin-bottom: 30px; width: max-content; color: var(--main_color); background-color: #fff; padding: 10px 25px; border-radius: 30px;}
.lt .flex_box .right_box .text_box p {font-size: 22px; margin: 0; color: #fff; font-weight: 300;}
.lt .flex_box .right_box .text_box a {margin-top: 30px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.7);}
.lt .flex_box .right_box .text_box a i {color: rgba(255, 255, 255, 0.7);}
.lt .flex_box .right_box .main_tit_box {}
.lt .flex_box .right_box .main_tit_box span {}
.lt .flex_box .right_box .main_tit_box h2 {}
.lt .flex_box .right_box .main_tit_box p {margin: 25px 0 35px; font-size: 20px;}
.lt .flex_box .right_box .main_tit_box .btn_box {}
.lt .flex_box .right_box .main_tit_box .btn_box a {gap: 10px;}
.lt .flex_box .right_box .main_tit_box .btn_box a i {}
.lt .flex_box .right_box .nav_box {display: flex; gap: 30px; align-items: center; margin-top: 30px; justify-content: flex-end;}
.lt .flex_box .right_box .nav_box .btn_box {display: flex; gap: 6px;}
.lt .flex_box .right_box .nav_box .btn_box button {border-radius: 50%; width: 40px; aspect-ratio: 1 / 1; border: 0; background-color: rgba(255, 255, 255 , 0.2); display: flex; align-items: center; justify-content: center;}
.lt .flex_box .right_box .nav_box .btn_box button i {font-size: 20px; color: #fff;}
.lt .flex_box .right_box .nav_box .btn_box button:hover {background-color: #fff; transition: .4;}
.lt .flex_box .right_box .nav_box .btn_box button:hover i {color: var(--main_color); transition: .4s;}
.lt .flex_box .right_box .nav_box .pagination {}
.lt .flex_box .right_box .nav_box .pagination span {font-size: 14px; font-weight: 500; color: #999; letter-spacing: 4px;}
.lt .flex_box .right_box .nav_box .pagination span b {font-weight: inherit; color: #121212;}
.lt .flex_box .right_box .img_box {margin-top: 40px; display: flex; gap: 20px;}
.lt .flex_box .right_box .img_box img {width: 100%; max-width: 219px; border-radius: 10px;}


@media screen and (max-width:1400px) {
  .lt .flex_box .left_box {width: 50%;}
  .lt .flex_box .right_box {width: calc(50% - 50px);}
  /* 서브 이미지: 3개만 보이고 나머지는 가로 스크롤(스와이프) */
  .lt .flex_box .right_box .img_box {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
    scroll-snap-type: x proximity;
    padding-bottom: 14px; /* 스크롤바 자리 */
    cursor: grab;
    scrollbar-width: thin; /* firefox */
    scrollbar-color: var(--main_color) rgba(255,255,255,0.15);
  }
  .lt .flex_box .right_box .img_box.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }
  .lt .flex_box .right_box .img_box::-webkit-scrollbar {
    height: 6px;
  }
  .lt .flex_box .right_box .img_box::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
  }
  .lt .flex_box .right_box .img_box::-webkit-scrollbar-thumb {
    background: var(--main_color);
    border-radius: 10px;
  }
  .lt .flex_box .right_box .img_box .lt_sub_item {
    flex: 0 0 calc((100% - 40px) / 3); /* gap 20px * 2 제외하고 3등분 */
    max-width: none;
    scroll-snap-align: start;
  }
  .lt .flex_box .right_box .img_box img {max-width: unset;}
}

@media screen and (max-width:1200px) {
  .lt .flex_box .right_box .main_tit_box p {font-size: 18px;}
  .lt .flex_box .left_box .txt_box .lt_title_wrap p {font-size: 18px;}
}

@media screen and (max-width:1000px) {
  .lt .flex_box .left_box {width: 100%;}
  .lt .flex_box .right_box {width: 100%;}
}

@media screen and (max-width:640px) {
  .lt .flex_box {gap: 30px;}
  .lt .flex_box .right_box .main_tit_box p {font-size: 16px;}
  .lt .flex_box .left_box .img_box {margin-bottom: 10px; border-radius: 10px;}
  .lt .flex_box .left_box .txt_box {padding: 15px; border-radius: 10px;}
  .lt .flex_box .left_box .txt_box .lt_title_wrap p {font-size: 16px;}
  .lt .flex_box .right_box .img_box {gap: 10px;}

  .lt .flex_box .right_box .text_box h2 {font-size: 20px; padding: 10px 20px;}
  .lt .flex_box .right_box .text_box p {font-size: 16px;}
}

@media screen and (max-width:430px) {
  .lt .flex_box .right_box .main_tit_box p br {display: none;}
}