/* 메인 배너 컨테이너에 대한 CSS */
#main_bn {
    /* 메인 배너 컨테이너에 대한 사용자 정의  */
  }

  /* 메인 배너 이미지에 대한 CSS */
  .main_image_area .main_banner_owl .item img {
    max-width: 100%;
  }

  /* 왼쪽 배너에 대한 CSS */
  .left-banner {
    max-width: 220px;
    max-height: 200px;
    margin-bottom:100px;
    transition: transform 0.7s ease;
  }

  .left-banner:hover {
    /* 왼쪽 배너를 마우스로 올렸을 때의 사용자 정의  */
    transform: scale(1.0);
  }

  /* 오른쪽 배너에 대한 CSS */
  .right-banner {
    /* 오른쪽 배너에 대한 사용자 정의  */
    max-width: 260px;
    max-height: 120px;
    margin-bottom: 120px;
    transition: transform 0.7s ease;
  }

  .right-banner:hover {
    /* 오른쪽 배너를 마우스로 올렸을 때의 사용자 정의  */
    transform: scale(1.2);
  }

  /* 푸터 배너에 대한 CSS */
  .footer-banner {
    /* 푸터 배너에 대한 사용자 정의  */
    max-width: 500px;
    max-height: 80px;
    margin-bottom: 120px;
  }



/* 슬라이더 컨테이너에 대한 CSS */
.main_banner_owl {
    /* 슬라이더 컨테이너에 대한 사용자 정의  */
    max-width: 100%;
    overflow: hidden;
    /* 컨테이너 높이 자동 조정을 위한 추가 스타일 */
    height: auto;
  }
  /* 각 슬라이더 아이템에 대한 CSS */
  .main_banner_owl .item {
    /* 각 슬라이더 아이템에 대한 사용자 정의  */
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 슬라이더 내부 이미지에 대한 CSS */
  .main_banner_owl img {
    /* 슬라이더 내부 이미지에 대한 사용자 정의  */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 슬라이더 페이저 도트에 대한 CSS */
  .main_banner_owl .owl_pager .carousel-custom-dots .owl-dot a {
    /* 슬라이더 페이저 도트에 대한 사용자 정의  */
    /* 예를 들어, 도트의 색상과 크기를 변경하려면: */
    width: 10px;
    height: 10px;
    background: #e3e5e8;
    border-radius: 50%;
  }

  .main_banner_owl .owl_pager .carousel-custom-dots .owl-dot a.active {
    /* 활성화된 슬라이더 페이저 도트에 대한 사용자 정의  */
    background: #3a8afd;
  }
/* 메인배너 */
#main_bn {border:1px solid #e3e5e8;position:relative;margin:0px 0 5px}
#main_bn:after {display:block;visibility:hidden;clear:both;content:""}
#main_bn .slide-wrap {padding:0;margin:0}
#main_bn .slide-wrap img {max-width:100%;height:auto}
#main_bn .owl_pager {position:absolute;bottom:0px;left:0;width:100%;background:#fff;border-top:1px solid #e3e5e8}
#main_bn .owl_pager ul:after {display:block;visibility:hidden;clear:both;content:""}
#main_bn .owl_pager li {float:left;position:relative;width:20%;border-left:1px solid #e3e5e8;text-align:center;line-height:45px;font-size:1.2em}
#main_bn .owl_pager li:first-child {border-left:0}
#main_bn .owl_pager li a {display:block}
#main_bn .owl_pager li a:after {content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:#e3e5e8}
#main_bn .owl_pager li.active a {color:#3a8afd}
#main_bn .owl_pager li.active a:after {background:#3a8afd;top:-1px}
  .btn_wr {background:rgba(0,0,0,0.5);display:inline-block;position:absolute;right:20px;bottom:65px;border-radius:30px;padding:3px 5px}
  #main_bn .btn_wr{z-index:2}
  .btn_wr .pager-prev {margin-left:5px;font-weight:bold}
  .btn_wr .pager-next {margin-right:5px;font-weight:bold}
  .btn_wr .pager-prev, .btn_wr .pager-next, #slide-counter {float:left;display:inline-block;padding:5px;color:#fff}

  /* 슬라이드 카운터에 대한 CSS */
  #slide-counter {
    /* 마진과 글자 색상을 추가하려면: */
    margin: 0 5px;
    color: #fff;
  }
/* 서브배너 */
#sbn_side {
  position: relative;
  width: 100%;
  margin: 0; /* 아래쪽과 위쪽 간격을 0으로 설정 */
}

.sb_bn {}

.sb_bn img {
  width: 100%;
  height: auto;
}

#sbn_side h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

#sbn_side .bx-controls {
  position: absolute;
  bottom: 10px;
  left: 15px;
}

#sbn_side .bx-pager-item {
  display: inline-block;
}

#sbn_side .bx-pager-item a {
  float: left;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: #fff;
  text-indent: -9999px;
  opacity: 0.5;
}

#sbn_side .bx-pager-item a.active {
  opacity: 1;
}

#sbn_side .bx-controls-direction {
  display: none;
}



/* 재생/정지/이전/다음 버튼 */
.sctrl {margin:0;padding:0;list-style:none}
.sctrl:after {display:block;visibility:hidden;clear:both;content:""}
.sctrl li {position:relative;float:left}
.sctrl button {position:relative;margin:0;padding:0;width:20px;height:20px;border:0;cursor:pointer;overflow:hidden}
.sctrl button span {position:absolute;top:0;left:0;width:20px;height:20px;border:0;background:url('img/is_button.gif') no-repeat}
.sctrl button.sctrl_play span {background-position:-60px 0}
.sctrl button.sctrl_play span.sctrl_on {background-position:-60px -30px}
.sctrl button.sctrl_stop span {background-position:-90px 0}
.sctrl button.sctrl_stop span.sctrl_on {background-position:-90px -30px}
.sctrl button.sctrl_prev span {background-position:-120px 0}
.sctrl button.sctrl_prev span.sctrl_on {background-position:-120px -30px}
.sctrl button.sctrl_next span {background-position:-150px 0}
.sctrl button.sctrl_next span.sctrl_on {background-position:-150px -30px}