@charset "utf-8";
/* 새글 스킨 (latest) */
.lt {position: relative;}
.lt .lt_title {display: none;}
.lt .lt_more {display: none;}
.lt .a-item {padding: 0; border:0; background-color:#fff; word-break: break-all;}
.lt .a-item .img-box { position:relative; overflow:hidden;}
.lt .a-item .img-box img { -webkit-transform: scale(1); transform: scale(1);transition: all 0.4s ease;-webkit-transition: all 1s ease;width: 100%;display: block;}
.lt .a-item .img-box img:hover { -webkit-transform: scale(1.1); transform: scale(1.1);}
.lt .a-item .info {display: block;text-decoration: none;padding:30px;}
.lt .a-item .info .subject {font-weight: var(--bold-weight);text-align: center;font-size: var(--submenu-txt);word-break: keep-all;min-height: 60px;}
.lt .a-item .info .substance {color:#555; margin-top:10px; font-size:var(--normal-txt); line-height:1.6;text-align: center;}
.lt .a-item .info .time {color:tomato; font-size:0.9em;text-align:right;}


.lt .a-item .img-box .more-hex {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-darkgray);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  text-decoration: none;
  overflow: hidden;
  z-index: 3;
  transition: transform 0.45s ease, background 0.3s ease, opacity 0.3s ease;
  backdrop-filter: blur(2px);
}

.lt .a-item .img-box .more-hex:hover {
  background: var(--color-red);
}

/* 화살표 기본 영역 */
.lt .a-item .img-box .more-hex .arrow {
  position: relative;
  width: 18px;
  height: 14px;
  display: block;
  overflow: hidden;
}

/* 화살표 2개를 겹쳐서 교체 애니메이션 */
.lt .a-item .img-box .more-hex .arrow::before,
.lt .a-item .img-box .more-hex .arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 14px;
  transform: translateY(-50%);
  transition: transform 0.45s ease, opacity 0.45s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 현재 화살표 */
.lt .a-item .img-box .more-hex .arrow::before {
  left: 0;
  opacity: 1;
  transform: translate(0, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'><path d='M1 7H15' stroke='white' stroke-width='1.8' stroke-linecap='round'/><path d='M10.5 1.5L16 7L10.5 12.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}

/* 다음 화살표: 왼쪽 바깥 대기 */
.lt .a-item .img-box .more-hex .arrow::after {
  left: 0;
  opacity: 0;
  transform: translate(-24px, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'><path d='M1 7H15' stroke='white' stroke-width='1.8' stroke-linecap='round'/><path d='M10.5 1.5L16 7L10.5 12.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
}

/* hover 시:
   기존 화살표는 오른쪽으로 빠져나감
   새 화살표는 왼쪽에서 들어옴 */
.lt .a-item .img-box .more-hex:hover .arrow::before {
  opacity: 0;
  transform: translate(24px, -50%);
}

.lt .a-item .img-box .more-hex:hover .arrow::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.lt .latest-carousel .owl-nav {position: absolute;top: 40%;margin-top: -25px; width:100%; display:block}
.lt .latest-carousel .owl-nav .owl-prev,
.lt .latest-carousel .owl-nav .owl-next{width:40px;height:40px;display: flex;
    justify-content: center;
    align-items: center;}
.lt .latest-carousel .owl-nav .owl-prev {line-height:40px; position:absolute;left:-50px;color:#fff; border:0; text-align:center; background-color:rgb(39 39 42); opacity: 0.3; cursor:pointer; transition: all .4s;}
.lt .latest-carousel .owl-nav .owl-next {line-height:40px; position:absolute;right:-50px;color:#fff; border:0; text-align:center; background-color:rgb(39 39 42); opacity: 0.3;  cursor:pointer; transition: all .4s;}
.lt .latest-carousel .owl-nav .owl-prev:hover { opacity: 1;}
.lt .latest-carousel .owl-nav .owl-next:hover { opacity: 1;}
.lt .latest-carousel .owl-nav i { font-size:18px;}

@media screen and (max-width: 768px){
  .lt .latest-carousel .owl-nav .owl-prev{left: 0;}
  .lt .latest-carousel .owl-nav .owl-next{right: 0;}
}