/* sub3_3 콘텐츠 */

/* 서브 메뉴 영역 */
.visual .sub_nav ul li{width: 33.33%;}



/* 브랜드 로고 */
#content .content_area .brand_logo_box{width: 100%;}
#content .content_area .brand_logo_box img{width: 100%; height: 140px; object-fit: contain; object-position: center;}
#content .content_area .brand_logo_box p{text-align: center; font-size: 1.2rem; margin-top: 50px;}

#content .content_area hr{height: 1px; background: #ccc; border: 0; margin: 60px auto; width: 85%;}
#content .content_area h3{font-size: 1.5rem; color: var(--font-color-main); text-align: center; font-weight: 700;}


/* Brand Story */

#content .content_area .brand_story_box>strong{font-size: 1.6rem; text-align: center; display: block;
margin: 6px 0 20px;}
#content .content_area .brand_story_box>p{text-align: center; padding: 0 30px; font-size: 1.1rem;
margin-bottom: 50px;}

#content .content_area .brand_story_box>img{width: 100%; height: 300px; object-fit: cover; object-position: center;}



#content .content_area .brand_story_box .brand_story_1{background: black; color: #fff; padding: 50px 0;}
#content .content_area .brand_story_box .brand_story_1>strong{display: block; text-align: center;
font-size: 1.7rem; margin-bottom: 25px;}
#content .content_area .brand_story_box .brand_story_1>p{display: block; text-align: center; padding: 0 30px;}

.swiper1 {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }
.swiper1 .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 250px;
      height: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #fff;
    }
#content .content_area .swiper-pagination-bullet-active{background: var(--font-color-main);}
.swiper1 .swiper-pagination-bullet{background: #fff;}

.swiper1 .swiper-slide img{width: 200px; border: 10px solid rgb(117, 0, 0); border-radius: 50%;}
.swiper1 .swiper-slide strong{font-size: 1.6rem;}





.swiper2{
      width: 100%;
      height: 100%;
      transition: background .5s ease-in-out;
    }
.swiper2 .swiper-slide{
      text-align: center;
      font-size: 18px;
      background: transparent;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.swiper2 .swiper-slide>img{width: 50%; margin-top: 100px;}
.swiper2 .swiper-slide>strong{font-size: 2rem; margin: 30px 0 15px;}

.swiper2 .swiper-slide:nth-of-type(2),
.swiper2 .swiper-slide:nth-of-type(2) div p,
.swiper2 .swiper-slide:nth-of-type(3),
.swiper2 .swiper-slide:nth-of-type(3) div p{text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}

.swiper2 .swiper-slide:nth-of-type(1),
.swiper2 .swiper-slide:nth-of-type(1) div p,
.swiper2 .swiper-slide:nth-of-type(4),
.swiper2 .swiper-slide:nth-of-type(4) div p{color: #fff; text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}

/* 이미지와 텍스트 겹치는 영역 */
.swiper2 .swiper-slide div {
  position: relative;   /* p태그의 기준점 */
  display: inline-block; /* 크기를 이미지에 맞게 */
}

.swiper2 .swiper-slide div img {
  width: 50%;
  height: auto;
  display: block;
  margin: 100px auto;
}

/* 공통 스타일 */
.swiper2 .swiper-slide div p {
  position: absolute;
  color: #000;       /* 글자 색 */
  font-size: 14px;
  font-weight: 600;
  transform: translate(-50%, -50%); /* 중앙 기준 보정 */
}

/* 원하는 좌표값을 % 단위로 지정 */
.swiper2 .swiper-slide div p:nth-child(1) { top: 20%; left: 50%; }  /* 위 중앙 */
.swiper2 .swiper-slide div p:nth-child(2) { top: 41%; left: 78%; }  /* 오른쪽 중앙 */
.swiper2 .swiper-slide div p:nth-child(3) { top: 77%; left: 65%; }  /* 아래 중앙 */
.swiper2 .swiper-slide div p:nth-child(4) { top: 77%; left: 35%; }  /* 왼쪽 중앙 */
.swiper2 .swiper-slide div p:nth-child(5) { top: 41%; left: 22%; }  /* 임의 위치 */


.swiper-button-next, .swiper-button-prev{color: #fff; text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{top: 250px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{top: 250px;}