@charset "utf-8";

/* ================================
   [A] 공용: latest(새글 스킨) 기본
   ================================ */
.lt { position: relative; }

/* tl_business_now_box_warp (기존 유지) */
.tl_business_now_box_warp .lt .lt_title { display: none; }
.tl_business_now_box_warp .lt .lt_more { display: none; }
.tl_business_now_box_warp .lt .a-item { padding: 0; border:0; background-color:#fff; min-height:390px; word-break:break-all; }
.tl_business_now_box_warp .lt .a-item .img-box { position:relative; overflow:hidden; cursor:pointer; }
.tl_business_now_box_warp .lt .a-item .img-box img { -webkit-transform:scale(1); transform:scale(1); transition:all 1s ease; -webkit-transition:all 1s ease; }
.tl_business_now_box_warp .lt .a-item .img-box img:hover { -webkit-transform:scale(1.1); transform:scale(1.1); }
.tl_business_now_box_warp .lt .a-item .info { text-decoration:none; }
.tl_business_now_box_warp .lt .a-item .info .subject { text-align:center; font-weight:700; font-size:20px; }
.tl_business_now_box_warp .lt .a-item .info .substance { text-align:center; color:#555; margin-top:10px; font-size:16px; letter-spacing:-0.02em; font-weight:400; line-height:1.75; }
.tl_business_now_box_warp .lt .a-item .info .time { color:tomato; font-size:0.9em; text-align:right; }
.tl_business_now_box_warp .lt .a-item .more { width:141px; margin:20px auto 0; border:1px solid #ddd; padding:14px 0; line-height:14px; font-size:14px; background:#f2f2f2; text-align:center; display:block; }
.tl_business_now_box_warp .lt .a-item .more:hover { background:#697dc4; border-color:#697dc4; color:#fff; cursor:pointer; opacity:1; transition:all .5s; }

.tl_business_now_box_warp .latest-carousel .owl-nav { position:absolute; top:50%; margin-top:-25px; width:100%; display:block; }
.tl_business_now_box_warp .latest-carousel .owl-nav .owl-prev { width:45px; height:45px; line-height:45px; left:-25px; background:#32373a; margin:0; position:absolute; cursor:pointer; color:#fff; padding:0; }
.tl_business_now_box_warp .latest-carousel .owl-nav .owl-next { width:45px; height:45px; line-height:45px; right:-25px; background:#32373a; margin:0; position:absolute; cursor:pointer; color:#fff; padding:0; }
.tl_business_now_box_warp .latest-carousel .owl-nav .owl-prev:hover,
.tl_business_now_box_warp .latest-carousel .owl-nav .owl-next:hover { background:#4a78bc; color:#fff; }
.tl_business_now_box_warp .latest-carousel .owl-dots { display:none; }

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

/* ================================
   [B] 가나안소식(기존 갤러리) 참고
   - 여긴 기존 스타일 그대로 두면 됩니다.
   - 배경 어둡고, 제목/텍스트 흰색 전제
   ================================ */
/* 예: 
.tl_main_gallery_wrap { ... } 
(이미 사용 중이면 수정 X)
*/

/* ================================
   [C] 가나안편지 섹션 (검정 타이틀 버전)
   latest('theme/tl_slide_gallery', ...) 에서
   <h2 class="lat_title"><span>서브</span></h2> 구조가 나옴
   → lat_title을 정확히 찍어 스타일링
   ================================ */

/* 레이아웃 */
.tl_main_letter_wrap {
  width:100%;
  padding:100px 0;
  background:#eee; /* 밝은 배경 */
}
.tl_main_letter_wrap > .inner {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden;
}

/* 제목 (검정 버전) */
.tl_main_letter_wrap .lat_title {
  text-align:center;
  font-size:30px;
  color:#222;        /* 메인 타이틀: 진한 검정 */
  font-weight:700;
  line-height:1.3;
  word-break:keep-all;
  margin-bottom:50px;
}
.tl_main_letter_wrap .lat_title:before {
  display:block;
  content:"";
  width:30px;
  height:6px;
  background:#222;
  margin:0 auto 20px;
  border-radius:10px;
}
.tl_main_letter_wrap .lat_title span {
  display:block;
  padding:20px 0 0;
  color:#555;        /* 서브 타이틀: 중간톤 */
  opacity:.9;
  font-size:16px;
  font-weight:400;
}

/* 가나안편지 내부 카드/링크 호버 컬러(검정 톤 유지) */
.tl_main_letter_wrap a { color:inherit; text-decoration:none; }
.tl_main_letter_wrap a:hover { color:#222; }

/* 반응형 */
@media screen and (max-width:1024px) {
 .lt {padding:0 20px;}
}

@media screen and (max-width:1024px) {
  .tl_main_letter_wrap { padding:80px 0; }
}
@media screen and (max-width:768px) {
  .tl_main_letter_wrap { padding:60px 0; }
  .tl_main_letter_wrap .lat_title { font-size:24px; }
  .tl_main_letter_wrap .lat_title span { font-size:15px; }
}

/* ================================
   [D] (옵션) 가나안편지 배경 이미지를 쓰고 싶다면
   아래 주석 해제해서 사용 (밝은 이미지 권장)
   ================================ */
/*
.tl_main_letter_wrap {
  background:url(../img/tl_main_letter_bg.jpg) center / cover no-repeat;
}
*/

/* 컨테이너를 relative로 만들어 nav의 absolute 배치 기준 확보 */
.latest-carousel{ position:relative; }

/* nav 자체가 어딘가에서 display:none 되는 경우가 있어 강제 노출 */
.latest-carousel .owl-nav{
  display:block !important;
  pointer-events:none;
  z-index: 30; /* 카드/이미지 위에 */
}
.latest-carousel .owl-nav button{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:#fff; border:1px solid #d9dee5;
  box-shadow:0 6px 18px rgba(2,6,23,.12);
  display:flex; align-items:center; justify-content:center;
  z-index: 31;
}

/* 바깥으로 삐져나가면 부모 overflow에 잘릴 수 있으니 안쪽으로 */
.latest-carousel .owl-nav .owl-prev{ left:8px; }
.latest-carousel .owl-nav .owl-next{ right:8px; }

/* disabled 되어도 시각적으로는 보이도록(필요시 주석처리 가능) */
.latest-carousel .owl-nav.disabled{ display:block !important; opacity:1 !important; }

.latest-carousel .owl-nav button:hover{
  border-color:#b7beca; transform:translateY(-50%) translateY(-1px);
}
.latest-carousel .owl-nav-arrow{
  display:inline-block; line-height:1; font-size:18px; color:#111;
}

@media (max-width: 640px){
  .latest-carousel .owl-nav .owl-prev{ left:4px; }
  .latest-carousel .owl-nav .owl-next{ right:4px; }
}

.img-box {padding:10px 0; background:#fff;}