@charset "utf-8";

/* JSL_MAIN_01 */
.JSL_MAIN_01{ width: 100%; float: left; padding: 100px 0px
}
/* 위젯 영역 레이아웃 */
.JSL_MAIN_01 .widget-area {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
  min-height: 660px;
}

/* 1번 위젯: 왼쪽 영역 - 최대 510px, 그 이하에서 자연스럽게 축소 */
.JSL_MAIN_01 .widget-area .widget-1 {
  flex: 1 1 auto;
  max-width: 510px;
  min-width: 0;
}

/* 2번 위젯: 오른쪽 그리드 영역 */
.JSL_MAIN_01 .widget-area .widget-2 {
  flex: 1;
  min-width: 0;
}

/* 태블릿 반응형 (991px 이하) - 세로 배열 */
@media only all and (max-width: 991px) {
  .JSL_MAIN_01 .widget-area {
    flex-direction: column;
    min-height: auto;
  }
  .JSL_MAIN_01 .widget-area .widget-1 {
    flex: none;
    max-width: 100%;
    width: 100%;
    min-height: 400px;
  }
  .JSL_MAIN_01 .widget-area .widget-2 {
    flex: none;
    width: 100%;
  }
}

/* 모바일 반응형 (767px 이하) - 1:0.6 비율 적용 */
@media only all and (max-width: 767px) {
  .JSL_MAIN_01 .widget-area {
    gap: 15px;
  }

  /* 왼쪽 위젯: 가로폭 대비 60% 높이 (1:0.6 비율) */
  .JSL_MAIN_01 .widget-area .widget-1 {
    position: relative;
    width: 100%;
    min-height: auto;
    height: auto;
  }

  /* 우측 그리드도 동일 비율 적용 */
  .JSL_MAIN_01 .widget-area .widget-2 {
    width: 100%;
  }
}

.content-title-box{ margin-bottom: 50px; position: relative}
.content-title-box .more{ position: absolute; right: 0px; bottom :20px; padding-right: 70px; font-size:calc(var(--tx-sm-size) * 0.9); color: #666} 
.content-title-box .more:after{width: 45px; aspect-ratio:1 / 1;border-radius: 100%;  background-color: #333; color: #fff; content: "\eb6d";    font-family: unicons-line;display: flex;  justify-content: center;  align-items: center; position: absolute; right: 0px; 

top:50%;transform: translateY(-50%);  font-size: 25px} 

.content-title-box .more:before{width:9px; aspect-ratio:1 / 1;border-radius: 100%;  background-color: #333; color: #fff; content: "";  position: absolute; right: 50px; 

top:50%;transform: translateY(-50%);  }