/* sub3_2콘텐츠 */

/* 서브 메뉴 영역 */
.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{color: #fff; background: url(../images/sub3_2/brand_story_bg.png); padding: 50px 0;}
#content .content_area .brand_story_box .brand_story strong{display: block; font-size: 2rem; text-align: center; margin-bottom: 30px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(1){text-align: center; margin-bottom: 20px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(2){text-align: center; color: yellow; margin-bottom: 70px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(3){font-size: 4.5rem; font-weight: 700;
text-align: center; line-height: 4rem; margin-bottom: 30px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(4){text-align: center; line-height: 2rem; margin-bottom: 30px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(5){text-align: center; font-size: 1.3rem; line-height: 2rem;
margin: 90px 0 70px; position: relative;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(5) span{color: yellow; font-weight: 500;}

#content .content_area .brand_story_box .brand_story p:nth-of-type(5)::before,
#content .content_area .brand_story_box .brand_story p:nth-of-type(5)::after{content: ""; display: block; width: 40px; height: 40px;
position: absolute;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(5)::before{background: url(../images/sub3_2/quotes_top.svg) no-repeat;
top: -30px; left: 30px;}
#content .content_area .brand_story_box .brand_story p:nth-of-type(5)::after{background: url(../images/sub3_2/quotes_bottom.svg) no-repeat;
top: -30px; right: 30px;}

#content .content_area .brand_story_box .brand_story>img{width: 230px; display: block; margin: 0 auto;}

#content .content_area .brand_story_box .brand_story .egg_box{background: url(../images/sub3_2/white_egg.png) no-repeat;
width: 100%; height: 500px; background-size: cover; background-position: center; position: relative;}
#content .content_area .brand_story_box .brand_story .egg_box img{display: block; width: 30%;
position: absolute; top: 50%; left: 50%;
animation: sway-icon 2s infinite ease-in-out; transform-origin: bottom center;}

@keyframes sway-icon {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) rotate(5deg); }
  50%  { transform: translate(-50%, -50%) rotate(-5deg); }
  70%  { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}


/* History */

#content .content_area .brand_story_box .history{background: linear-gradient(143deg,rgba(214, 64, 74, 1) 0%, rgba(215, 0, 15, 1) 100%);
padding: 40px 0 15px;}
#content .content_area .brand_story_box .history h3{color: yellow;}
#content .content_area .brand_story_box .history strong{font-size: 1.6rem; text-align: center; display: block; color: black; margin-top: 6px;
padding: 0 30px;}


.swiper1{
      width: 100%;
      height: 500px;
    }
.swiper1 .swiper-slide{
      text-align: center;
      font-size: 18px;
      position: relative;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -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;
    }

.swiper1 .swiper-slide img{width: 100%;}
.swiper1 .swiper-slide p{color: #fff; font-size: 1.5rem; width: 300px;
  position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, -50%); text-shadow: 2px 2px 10px rgba(0, 0, 0, .3);}

.swiper-container-horizontal>.swiper-scrollbar{width: 90%; height: 8px; left: 50%; transform: translate(-50%, -50%);}
.swiper-scrollbar-drag{background: yellow;}



/* Product */

#content .content_area .brand_story_box .product{background: black; color: #fff; padding: 40px 0;}
#content .content_area .brand_story_box .product h3{color: yellow;}
#content .content_area .brand_story_box .product>strong{font-size: 2.5rem; line-height: 2.5rem; text-align: center; display: block; color: black; margin-top: 6px;
padding: 0 30px; color: #fff;}
#content .content_area .brand_story_box .product>p{padding: 0 30px; margin-top: 30px; text-align: center; font-size: 1.2rem;}


#content .content_area .brand_story_box .product .buldak_box{width: 85%; height: 100px; background: linear-gradient(143deg,rgba(214, 64, 74, 1) 0%, rgba(215, 0, 15, 1) 100%);
border-radius: 15px; margin: 30px auto 10px; display: flex; justify-content: center; align-items: center;}
#content .content_area .brand_story_box .product .buldak_box img{width: 140px; display: block;}

.swiper2 {
  width: 85%;
  margin: 0 auto;
  position: relative;
}
.swiper2 .swiper-slide {
  text-align: center;
  background: linear-gradient(143deg,rgba(255, 255, 255, 1) 0%, rgba(230, 230, 230, 1) 100%);
  border-radius: 15px;
  padding: 30px 0;
}

.swiper2 .swiper-slide strong{color: rgb(215, 0, 15); font-size: 2rem; margin-bottom: 20px; display: block;}
.swiper2 .swiper-slide p{color: var(--font-color2); line-height: 2.4rem; font-size: 1.2rem; font-weight: 500;}
.swiper-button-next, .swiper-button-prev{color: rgb(215, 0, 15);}




/* Gallery */

.gallery{background: black; padding-top: 50px;}
#content .content_area .brand_story_box .gallery h3{color: yellow; margin-bottom: 25px; font-size: 2rem;}
.gallery .gallery-top,
.gallery .gallery-thumbs{
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      background: black;
    }
  .swiper3 .swiper-slide {
      background-size: cover;
      background-position: center;
      border-radius: 15px;
      border: 2px solid rgb(120, 0, 0);
      box-sizing: border-box;
    }
    .gallery-top {
      height: 80%;
      height: 400px;
    }
    .gallery-thumbs {
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-wrapper{height: 200px;}
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 50%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }