/* -------------------------------------------------------------- main -------------------------------------------------------------------------- */

.sec_01 {contain: paint; backface-visibility: hidden; position: relative; min-height:calc(var(--vh) * 100); overflow: hidden;}
.sec_01 .hero-stage { position: relative; width: 100%; min-height:calc(var(--vh) * 100); overflow: hidden;}
/* .sec_01 .hero-stage::after {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3);  z-index: 1; } */
.sec_01 .scene__media {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none;}
.sec_01 .scene__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 5; color: #fff; padding: 0 5vw; word-break: keep-all;}
.sec_01 .scene__overlay h2 .char {font-family: "Lora", serif; font-size: clamp(46px, 7vw, 110px); line-height: 1.0; margin: 0; overflow: hidden; font-weight: 500; padding-bottom: 0.15em; word-break: keep-all;}
.sec_01 .scene__overlay h2 { overflow: hidden; }
.sec_01 .scene__overlay h2 .char { display:inline-block; transform: translateZ(0); word-break: keep-all;}
.sec_01 .scene__overlay .line-2 { margin-top: 0.3em;}
.sec_01 .scene__overlay p {font-size: clamp(16px, 2vw, 22px); opacity: 0.9; margin-top: 1.2rem; letter-spacing: 0.3px; font-weight: 300;}
#hero .line-1, #hero .line-2 { visibility: hidden;}
video.scene__media {filter: brightness(0.8) contrast(1.3) saturate(1.2);  }

/* -------- sec_02 -------- */  

.sec_02 {position: relative; background-color: #fff; overflow: hidden; margin: 0 auto; }
.sec_02 .tit_show {position: relative; text-align:center; margin-inline: auto; color: #222; margin-top: 130px;}
.sec_02 .tit_show h2 {font-family: 'Lora', serif; font-size: clamp(52px, 10vw, 140px); line-height: 1; color: #222; position: sticky; }
.sec_02 .tit_show p  {font-size: clamp(18px, 2vw, 24px); margin-top: .8rem; color: #666; font-weight: 300;}
.sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-top:100px; margin-bottom:50px;}
.sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_02 .v-line-main {width: 1px; height:100px;  background-color: #d8d7d7;  margin: 0 auto; margin-top: 150px;}

@media (max-width: 768px){
    .sec_02 .tit_01 {margin-bottom:100px; margin-top: 50px;}
    .sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .sec_02 .v-line-main {margin-top: 50px;}


}

/* -------- sec_03 -------- */
.sec_03 { width: 100%; position: relative; background-color: #000; margin: 0 auto; padding: 150px 20px 250px 20px; margin-top: 100px;}
.sec_03 .parallax__item { position: relative; width: 100%; max-width: 1560px; margin: 0 auto;  }
.sec_03 .parallax__item__imgWrap {
    max-width: 64%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 80px;
    border-top-right-radius: 80px;
    margin-left: auto;
    z-index: 1;
}
.sec_03 .parallax__item__img { width: 100%; height: 100%; background-image: url(../img/main_pro_02.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec_03 .tit_01 {width: 100%; font-family: 'Lora', serif; font-size: clamp(48px, 10vw, 140px); position: absolute;  word-break: keep-all; color: #fff; z-index: 2; left:0; top:0px;}
.sec_03 .sub_01 {width: 100%; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; position: absolute; word-break: keep-all; color: #c7c7c7; z-index: 2; left:0; top:300px;}
.sec_03 p {margin-top: 20px;}

@media (max-width: 768px){
    .sec_03 { padding: 100px 20px 250px 20px; margin-top: 0px;}
    .sec_03 .parallax__item__imgWrap {max-width: 100%;}
    .sec_03 .btn-more {gap:.15em; padding:0.8em 1.5em; font-weight: 400;}
    .sec_03 .sub_01 {top:250px;}
}

/* -------- sec_04 -------- */
.sec_04 { width: 100%; position: relative; background-color: #000;  margin: 0 auto; padding: 0 20px; padding-bottom: 250px; }
.sec_04 .parallax__item { position: relative; width: 100%; max-width: 1560px; margin: 0 auto;  }
.sec_04 .parallax__item__imgWrap {
    max-width: 64%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 80px ; 
    border-top-left-radius: 80px;
    margin-right: auto;
    z-index: 1;
}
.sec_04 .parallax__item__img { width: 100%; height: 100%; background-image: url(../img/main_cosmetics_03.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sec_04 .tit_01 {width: 100%; font-family: 'Lora', serif; font-size: clamp(48px, 10vw, 140px); position: absolute;  word-break: keep-all; color: #fff; z-index: 5; right:0; top:0px; text-align: right;}
.sec_04 .sub_01 {width: 100%; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; position: absolute; word-break: keep-all; color: #c7c7c7; z-index: 5; right:0; top:300px; text-align: right;}
.sec_04 p {margin-top: 20px;}
.parallax__item__imgWrap[data-anim="fade-left"],
.parallax__item__imgWrap[data-anim="fade-right"] {
  isolation: isolate;         
  transform-style: preserve-3d; 
  will-change: transform;
  position: relative;
  z-index: 1;
  transform: translate(0,0) !important;
}

@media (max-width: 768px){
    .sec_04 .parallax__item__imgWrap {max-width: 100%;}
    .sec_04 .btn-more {gap:.15em; padding:0.8em 1.5em; font-weight: 400;}
    .sec_04 .sub_01 {top:250px;}
}

/* -------- sec_ad -------- */
.sec_ad {width:100%; position: relative; background-color: #fff; overflow: hidden; margin: 0 auto; padding: 50px 0 200px 0; }
.sec_ad .tit_show {position: relative; text-align:center; margin-inline: auto; color: #222; margin-top: 130px;}
.sec_ad .tit_show h2 {font-family: 'Lora', serif; font-size: clamp(32px, 5vw, 80px); line-height: 1.3; color: #222;  }
.sec_ad .tit_show p  {font-size: clamp(18px, 2vw, 24px); margin-top: .8rem; color: #666; font-weight: 300;}
.sec_ad .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-top:100px; margin-bottom:50px;}
.sec_ad .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.sec_ad .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 50px; color: #666; font-weight: 300; line-height: 30px;}

@media (max-width: 768px){
    .sec_ad {padding: 50px 0 100px 0; }
    .sec_ad .tit_show {margin-top: 80px;}
    .sec_ad .tit_01 {margin-top:50px; margin-bottom:50px;}
    .sec_ad .tit_01 p:last-child  {margin-top: 30px; }
}

/* -------- sec_05 -------- */

.sec_05 {overflow:hidden}
.sec_05 .wrapper{height:100vh; position:relative}
.sec_05 .list{height:100%; display:flex; align-items:center; justify-content:flex-start; position:relative; padding:.2rem;  }
.sec_05 .item{ position:absolute; inset:0; display:flex; width:100vw; height:100%; overflow:hidden; box-shadow:0 8px 24px rgba(149,157,165,.2); background:#fff; will-change:transform, border-radius, scale;  }
.sec_05 .item_content{width:100%; height:100%; position: relative;}
.sec_05 .item_con {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);  text-align:center;  width:80%;  z-index:2; }
.sec_05 .item_content h2 {font-size: clamp(32px, 10vw, 100px); line-height: 1.2; word-break: keep-all; color: #fff; }
.sec_05 .item_content p {font-size: clamp(16px, 2vw, 26px); line-height: 1.4; word-break: keep-all; color: #fff; margin-top: 20px ;}
.sec_05 .item_content img {
  position:absolute; 
  top:0; left:0; width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.sec_05 .item_content video {
  position:absolute; 
  top:0; left:0; width:100%; height:100%;
  object-fit:cover;
  z-index:1;}



/* -------- sec_06 -------- */
.sec_06 { position:relative; width:100%; padding: 150px 0 200px; background:#f6f4f2; overflow:hidden;   
    --sec6-gutter: clamp(24px,6vw,100px);
    --sec6-left-extra: 80px;
    --sec6-gutter-left:  calc(var(--sec6-gutter) + var(--sec6-left-extra));
    --sec6-gutter-right: var(--sec6-gutter);
}
.sec6_head{ padding:0 var(--sec6-gutter) 20px var(--sec6-gutter-left); }
.sec6_title{ font-family: 'Lora', serif; font-weight:400; font-size:clamp(28px, 8vw, 100px); color:#222; margin-bottom: 50px;}

/* Swiper 컨테이너: 패딩 없음 (좌우 여백은 JS의 slidesOffsetBefore/After로 맞춤) */
/* 슬라이드 카드 크기(부분 노출) */
.sec_06 .swiper-wrapper { align-items:stretch; }
.sec_06 .swiper-slide { width: clamp(260px, 28vw, 420px); height: auto;}
.sec6_swiper,
.sec_06 .swiper-wrapper,
.sec_06 .swiper-slide{ overflow: visible; }
.product{ position: relative; z-index: 1; }
.product:hover{ z-index: 10; }
.sec6_head{ position: relative; z-index: 0; }

/* 카드 */
.product{
  display:flex; flex-direction:column;
  background:#f6f4f2;   
  overflow:hidden; height:100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
/* .product:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.12); } */

.product_img{ width:100%; aspect-ratio: 4/3; background:#fafafa; display:block; }
.product_img img{ width:100%; height:100%; object-fit:cover; display:block; }

.product_txt{ padding:24px; text-align: center;}
.product_name{ font-size: clamp(16px,1.4vw,20px); color:#111; margin:0 0 8px; }
.prodcut_info{ font-size: clamp(13px,1.1vw,15px); color:#60656d; line-height:1.6; }

/* 진행 바(progressbar) — 좌우 여백을 섹션 공통과 동일하게 */
.sec6_progress {
  position:relative;
  height:4px; border-radius:4px;
  background:rgba(0,0,0,.08);
  margin: clamp(16px,3vw,28px) var(--sec6-gutter-right) 0 var(--sec6-gutter-left);
  margin-top: 80px;
}
.sec6_progress .swiper-pagination-progressbar-fill{
  background:#111; border-radius:4px;
}

/* 드래그 커서 (데스크톱 전용) */
.drag-cursor{
  position:fixed; left:0; top:0; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
   background:rgba(0,0,0,.78); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.06em;
  pointer-events:none; user-select:none;
  opacity:0; transition: opacity .25s ease, transform .2s ease;
  z-index:9999;
}
.drag-cursor.is-active{ opacity:1; }
.drag-cursor.is-drag{ transform:translate(-50%,-50%) scale(0.9); background:rgba(211,152,118,.82); }

/* 큰 태블릿~노트북: 살짝만 추가 */
@media (max-width: 1280px){
  .sec_06{ --sec6-left-extra: 24px; }
}
/* 태블릿: 거의 동일 처리 */
@media (max-width: 992px){
  .sec_06{ --sec6-left-extra: 12px; }
}
/* 모바일: 좌/우 동일 16px로 고정(넓히지 않음) */
@media (max-width: 768px){
  .sec_06{
    padding: 50px 0 72px;
    --sec6-left-extra: 0px;
    --sec6-gutter-left: 16px;
    --sec6-gutter-right:16px;
  }
  .sec6_title{ margin-bottom: 0px;}
  .sec6_head{ padding: 0 var(--sec6-gutter-right) 20px var(--sec6-gutter-left); }
  .sec6_progress{ margin: clamp(16px,3vw,28px) var(--sec6-gutter-right) 0 var(--sec6-gutter-left); }
  .sec_06 .swiper-slide{ width: 78vw; }
  .sec6_swiper { touch-action: pan-x; }
}

/* ----------- sec_07 -------------- */
.sec_07 {position: relative; width: 100%; overflow: hidden; text-align: center;}
.map_wrap {max-width: 1580px; margin: 100px auto; position: relative;}
.map_img { position: relative; width: 100%; height: auto; line-height: 0;}
.map_img img {width: 100%; height: 100%; display: block;}
.map_svg {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;  z-index: 2;}
.sec_07 .map_tt {font-family: "Lora", serif; font-weight: 400; font-size: clamp(28px, 8vw, 100px); color: #222; line-height: 1.5;}
.sec_07 .map_st { font-weight: 300; font-size: clamp(16px, 2vw, 24px); color: #222; line-height: 1.8;}
.pulse { transform-origin: center center; will-change: transform, opacity, r;}
@media (max-width: 768px){
  .sec_07 .map_st { margin-bottom: 50px;}
}

/* ----------------------------------------------------- sub_top_visual -------------------------------------------------------------- */

.sub-visual_01 { width:100%; position:relative; min-height:calc(var(--vh) * 100); overflow:hidden; background:#fff; Padding: 0; Margin: 0; line-height: 0; font-size: 0;}
.sub-visual_01__bg { width:100%; position:absolute; inset:0; z-index:0; transform-origin:center center; Padding: 0; Margin: 0; line-height: 0; background:#fff;font-size: 0; contain: size layout style paint; }
.sub-visual_01__bg.black::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 1;}
.sub-visual_01__bg img {width:100%;height:100%; object-fit:cover; display:block; background:#fff; font-size: 0; transform: scale(1.2); will-change: transform;}
.sub-visual_01__bg video { width:100%; height:100%; object-fit:cover; display:block; background:#fff;font-size: 0;}
video.dark {filter: brightness(0.8) contrast(1.3) saturate(1.2);  }
.sub-visual_01__veil{ position:absolute; inset:0; background:#fff; opacity:0; z-index:1; pointer-events:none;}
.sub-visual_01__center {position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; top:45%; text-align:center; color:#fff; padding:0 var(--pad);}
.sub-visual_01__center.black {color:#111; }
.sub-visual_01__eyebrow { font-family: 'Lora', serif; font-size: clamp(52px, 10vw, 100px);  margin-bottom:1.8rem; font-weight: 400; }
.sub-visual_01__title { font-family: 'Lora', serif; font-size: clamp(18px, 2vw, 22px);  line-height: 1.8; margin:.1rem 0; font-weight: 300; }
.sub-visual_01__subtitle { font-size:clamp(14px,1.6vw,18px); margin-top: 20px; font-weight: 300; }
.sub-visual_01__banner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    color: #111;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.0s ease;
    top:45%;
}
/*  story page  */
.sub-visual_01__center.position {top:53%;}
.sub-visual_01__banner.position {top:53%;}
.sub-visual_01.is-compact .sub-visual_01__banner { opacity: 1; pointer-events: auto;}
.sub-visual_01__banner-inner { max-width: var(--max); padding: 0 var(--pad);}
.sub-visual_01__banner-title { font-family: 'Lora', serif; font-size: clamp(52px, 10vw, 100px);  margin-bottom:1.8rem; font-weight: 400; }
.sub-visual_01__banner-sub { font-family: 'Lora', serif; color: #222; font-size: clamp(18px, 2vw, 22px); line-height: 1.8; font-weight: 300;}

@media (max-width: 768px){
    .sub-visual_01 { min-height: calc(var(--vh) * 100);}
    .sub-visual_01__center {top:35%;}
    .sub-visual_01__banner {top:35%;}


}



/* ----------------------------------------------------- sub_story -------------------------------------------------------------- */

.story_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:200px; margin-top: 50px;}
.story_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.story_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_marquee {width: 100%; position: relative; overflow: hidden; margin: 0 auto;}
.sec_marquee .marquee_wrap {position: relative;}
.sec_marquee .marquee {white-space: nowrap; display: flex}
.sec_marquee .marquee_txt {font-family: "Lora", serif; font-size: clamp(52px, 10vw, 160px); line-height: 1.2; font-weight: 300; -webkit-text-stroke: #dfdfdf;  -webkit-text-stroke-width: 1px; -webkit-text-fill-color: transparent}
.sec_marquee .marquee_txt span {font-size: clamp(52px, 10vw, 160px); -webkit-text-fill-color: #dfdfdf; font-family: "Lora", serif; font-weight: 600;}
.sec_marquee .marquee.dir_left {transform: translateX(10%)}
.sec_marquee .marquee.dir_right {justify-content: flex-end; transform: translateX(-5%)}
.sec_bs_birth { position: relative; width: 100%; overflow: hidden; clear: both;}
.sec_bs_birth__inner { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start;  justify-content: flex-start;;}
.sec_bs_birth__img-top { width: 25%; margin-left:15%;}
.sec_bs_birth__img-top img { width: 100%; height: auto; display: block;}
.sec_bs_birth__text-right { position: absolute; top: 20%; right: 20%; width: 30%; text-align: left;  color: #222;}
.sec_bs_birth__text-right p { font-size: clamp(16px, 2vw, 26px); line-height: 1.6; font-weight: 300;  }
.sec_bs_birth__center { margin-top: 150px; margin-left: 20%; text-align: left;  color: #111;}
.sec_bs_birth__center .title { font-family: 'Lora', serif; font-size: clamp(40px, 8vw, 100px); font-weight: 400; line-height: 1.2;}
.sec_bs_birth__center .desc { font-size: 18px; margin-top: 10px; color: #222; font-weight: 300;}
.sec_bs_birth__text-left { position: absolute; bottom: 15%; left: 15%; width: 30%; text-align: left;  color: #222;}
.sec_bs_birth__text-left p { font-size: clamp(16px, 2vw, 26px); line-height: 1.6; font-weight: 300;  }
.sec_bs_birth__img-bottom { width: 54%; align-self: flex-end; margin-right: 0%; }
.sec_bs_birth__img-bottom img { width: 100%; height: auto; display: block;}
.story_sec_pic { position: relative; width: 100%; overflow: visible; display:block;}
.story_sec_pic .sec_pic_inner {position: relative; min-height:calc(var(--vh) * 100); overflow: hidden;}
.story_sec_pic .sec_pic_title { position: absolute; inset: 0; display: grid; top: 20%; z-index: 1; pointer-events: none; text-align: center;}
.story_sec_pic .sec_pic_title h2 { font-family: 'Lora', serif; font-size: clamp(40px, 10vw, 100px); font-weight: 400; line-height: 1.2; color: #111;}
.story_sec_pic .sec_pic_img_wrap { width: 100%; position: absolute; inset: 0; top:0 ; left:0; overflow: hidden; z-index: 2; }
.story_sec_pic .sec_pic_img {width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.5s ease;  will-change: transform;}
.story_sec_pic .sec_pic_overlay { position: absolute; top: 41%; left: 50%; width: 90%; max-width: 900px; transform: translatex(-50%); color: #fff; text-align: center; opacity: 0;  z-index: 3;}
.story_sec_pic .sec_pic_overlay .ko_title { font-size:clamp(28px, 4vw, 80px); font-weight: 600;  margin-bottom: 1rem;}
.story_sec_pic .sec_pic_overlay .ko_sub { font-size:clamp(18px, 2vw, 28px); line-height: 1.6; font-weight: 300;}
.sec_bs_eternal { width:100%; padding:200px 0 0 0; background:#000; overflow: visible;}
.sec_bs_eternal__inner { max-width:1500px; margin:0 auto; position:relative; min-height:800px; }
.sec_bs_eternal .eternal_img { position:absolute; border-radius:18px; overflow:hidden; }
.sec_bs_eternal .eternal_img img { display: block; width: 100%; height: auto;  object-fit: contain;}
.sec_bs_eternal .eternal_img.imga { left:0;   top:15%;    width:min(36vw,520px);}
.sec_bs_eternal .eternal_img.imgb { right:0;  top:40%;    width:min(32vw,460px); }
.sec_bs_eternal .eternal_img.imgc { right:6%; bottom:-10%; width:min(42vw,620px);}
.sec_bs_eternal .eternal__copyblock { position:relative; z-index:2; margin: 0 auto; text-align:center; }
.sec_bs_eternal .copyblock__title { font-family: 'Lora', serif; font-size: clamp(40px, 10vw, 100px); font-weight: 400; line-height: 1; color: #fff;}
.sec_bs_eternal .copyblock__desc { font-size: 22px; margin-top: 50px; color: #999; font-weight: 300; line-height: 1.8; }
.bs-values__container { position: relative; width: 100%; margin: 0 auto; margin-top: 250px; margin-bottom: 200px; isolation: isolate; contain: layout paint; overflow: visible !important; transform: translate3d(0, 0, 0);}
.bs-values__container svg { width: 100%; height: auto;}
.bs-values__line { width: 100%; height: auto; display: block;}
.bs-values__list { position: absolute; inset: 0; pointer-events: none;}
.bs-values__item { position: absolute; width: 320px; text-align: center; color: #111; left: 0; top: 0; transform: translate(-50%, -50%); opacity: 0;}
.bs-values__head h3 { text-align: center; font-family: 'Lora', serif; font-size: clamp(40px, 10vw, 100px); font-weight: 400; line-height: 1.35; margin-bottom: 50px; color: #111;}
.bs-values__item h4 { font-size: clamp(14px, 1.8vw, 40px); margin-bottom: 20px; color: #111; display: block;}
.bs-values__item p { color: #555; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.8;}
.bs-values__line line, .bs-values__line circle { fill: none; stroke: #333; stroke-width: 0.5; stroke-dasharray: 1200; stroke-dashoffset: 1200;}

@media (max-width: 1500px) {
    .sec_bs_birth__text-right { width: 35%; }
    .sec_bs_birth__center { margin-top: 150px; margin-left: 16%; text-align: left;  color: #111;}
    .sec_bs_birth__text-left { position: absolute; bottom: 15%; left: 15%; width: 35%; text-align: left;  color: #222; z-index: 5;}
    .sec_bs_eternal { padding:200px 20px 0 20px; }
}
@media (max-width: 1200px) {
    .sec_bs_birth__inner { display: block; position: relative; padding: 40px 20px; }
    .sec_bs_birth__img-top, .sec_bs_birth__img-bottom { width: 80% !important;  margin: 0 auto 40px !important;   position: static !important;  }
    .sec_bs_birth__text-right, .sec_bs_birth__text-left, .sec_bs_birth__center { position: static !important;  width: 100% !important;  margin: 0 auto 80px !important; text-align: center !important;}
    .sec_bs_birth__text-right p, .sec_bs_birth__text-left p {  font-size: 20px !important;  line-height: 1.7; }
    .sec_bs_birth__center .title { font-size: 60px !important; }
    .sec_bs_birth__center .desc {  font-size: 18px !important; bottom: 0% !important;}
    
}
@media (max-width: 1024px) {
    .sec_bs_eternal { width:100%; padding:150px 20px 0 20px;}
    .sec_bs_eternal .eternal_img { position:absolute; border-radius:18px; overflow:hidden; }
    .sec_bs_eternal .eternal_img img { display: block; width: 100%; height: auto;  object-fit: contain;}
    .sec_bs_eternal .eternal_img.imga { left:0;   top:15%;    width:min(36vw,520px);}
    .sec_bs_eternal .eternal_img.imgb { right:0;  top:40%;    width:min(32vw,460px); }
    .sec_bs_eternal .eternal_img.imgc { right:6%; bottom:15%; width:min(42vw,620px);}
    .sec_bs_eternal .eternal__copyblock { position:relative; z-index:2; margin: 0 auto; text-align:center; }
    .sec_bs_eternal .copyblock__title { font-size: 60px;}
    .sec_bs_eternal .copyblock__desc { font-size: 20px;  }
    .bs-values__head h3 { font-size: 60px;}
    }
@media (max-width: 768px) {
    .sub-visual_01 { min-height: 100svh;}
    .story_sec_02 .tit_01 {margin-bottom:100px; margin-top: 50px;}
    .story_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .story_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .sec_bs_birth__text-right p, .sec_bs_birth__text-left p {  font-size: 16px !important;  line-height: 1.7; }
    .sec_bs_birth__center .title { font-size: 30px !important; }
    .sec_bs_birth__center .desc {  font-size: 16px !important; line-height: 1.5; }
    .sec_bs_birth__img-top, .sec_bs_birth__img-bottom { width: 96% !important;  margin: 0 auto 40px !important;   }
    .story_sec_pic .sec_pic_title { top: 12%;}
    .sec_bs_eternal {padding: 150px 10px 150px 10px; }
    .sec_bs_eternal__inner { max-width: 100%; margin: 0 auto; min-height:380px; }
    .sec_bs_eternal .eternal__copyblock { margin: 0 auto 32px; text-align: center; }
    .sec_bs_eternal .copyblock__title { font-size: 30px !important;}
    .sec_bs_eternal .copyblock__desc { font-size: 16px; margin-top: 20px;}
    .sec_bs_eternal .eternal_img.imga {top:5%;  width:min(42vw);}
    .sec_bs_eternal .eternal_img.imgb {top:70%;  width:min(40vw);}
    .sec_bs_eternal .eternal_img.imgc {bottom:-18%;  width:min(70vw);}
    .bs-values { width: 100%; position: relative; padding: 70px 20px 100px 20px;}
    .bs-values__container { margin-top: 0px; margin-bottom: 0px;}
    .bs-values__head h3 { margin-bottom: 30px; font-size: 32px;}    
    /* PC용 SVG 라인/원 숨기기 */
    .values__list, .bs-values__line { display: none !important; }
    /* 모바일 박스 래퍼 */
    .bs-values-mobile { display: flex; flex-direction: column; gap: 30px; margin-top: 0px; padding: 0px; }
    .bs-values-mobile__box { background: #fff; border: 1px solid #333; border-radius: 16px; padding: 24px 20px; text-align: center; opacity: 0; transform: translateY(30px); transition: all .6s ease; }
    .bs-values-mobile__box.on { opacity: 1; transform: translateY(0); }
    .bs-values-mobile__title { font-size: 20px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; color: #222;}
    .bs-values-mobile__desc { font-size: 15px; color: #666; line-height: 1.55; }


    .story_sec_pic { display: none;}
}






/* -------------------------------------------------------- sub vision ---------------------------------------------------------------- */

.vision_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:200px; margin-top: 50px;}
.vision_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.vision_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_vision_02 {width: 100%; position: relative; overflow: hidden; margin: 0 auto; z-index: 1; }
.sec_vision_02 .sec_vision_02_wrap { max-width: 1400px; position: relative; margin: 0 auto; z-index: 10; margin-top: 380px; }
.sec_vision_02 .sec_vision_02_list { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(30px,2vw,30px); }
.sec_vision_02 .sec_vision_02_item {position: relative;  overflow: hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: clamp(25px,1.8vw,25px); }
.sec_vision_02 .sec_vision_02_img {width: 100%;}
.sec_vision_02 .sec_vision_02_img img {width: 100%; object-fit:cover;}
.sec_vision_02 .sec_vision_02_item span { font-size: clamp(26px,1.8vw,40px); margin: 20px 0; display: block; }
.sec_vision_02 .sec_vision_02_item p{ color:#555; font-size: clamp(16px,1.2vw,16px); line-height: 1.8;}
.sec_marquee.two {width: 100%; position: absolute; top:0px; z-index: 2;}
.sec_marquee.two .marquee_wrap2 {position: relative;}
.sec_marquee.two .marquee {white-space: nowrap; display: flex}
.sec_marquee.two .marquee_wrap2 .marquee_txt {font-family: "Lora", serif; font-size: clamp(52px, 10vw, 160px); line-height: 1.2; font-weight: 300; -webkit-text-stroke: #e9e8e8;  -webkit-text-stroke-width: 1px; -webkit-text-fill-color: transparent}
.sec_marquee.two .marquee_wrap2 .marquee_txt span {font-size: clamp(52px, 10vw, 160px); -webkit-text-fill-color: #e9e8e8; font-family: "Lora", serif; font-weight: 400;}
.sec_marquee.two .marquee.dir_left {transform: translateX(10%)}
.sec_marquee.two .marquee.dir_right {justify-content: flex-end; transform: translateX(-5%)}
.sec_bs_slo { width:100%; position:relative; padding:200px 0 200px 0; background:#000; overflow-x: hidden;}
.sec_bs_slo__inner { width:100%; max-width:1400px; margin:0 auto; position:relative;  }
.sec_bs_slo .slo__copyblock { position:relative; z-index:2; margin: 0 auto; text-align:center; }
.sec_bs_slo .copyblock__title { font-family: 'Lora', serif; font-size: clamp(28px, 4vw, 100px); font-weight: 400; line-height: 1.3; color: #fff;}
.sec_bs_slo .copyblock__desc { font-size: 22px; margin-top: 50px; color: #999; font-weight: 300; line-height: 1.8; }
.slo__cards {display: flex;justify-content: center;align-items: stretch; gap: 40px; margin-top: 100px; flex-wrap: wrap;}
.slo__card { position: relative; width: 300px; height: 280px; background-image: var(--bg); background-size: cover; background-position: center; border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.5s ease; text-align: center; display: flex; align-items: center;  justify-content: center;  z-index: 1;}
.slo__card p { font-size: 20px; color: #fff; font-weight: 600; transition: all 0.5s ease; position: absolute; top:48%; left: 50%; transform: translateX(-50%); z-index: 10;}
.slo__card::before {content: ""; position: absolute; inset: 0; background-image: var(--bg); filter: brightness(0.8) ; background-size: cover; background-position: center; opacity: 1; transform: scale(1); transition: all 0.8s ease; z-index: 1;}
.slo__card:hover::before {opacity: 1; transform: scale(1.1);}
.slo__card:hover p {color: #fff; transform: translate(-50%, -10px);}
.slo__icon{ position:absolute; top:36%; left: 50%; transform: translateX(-50%); width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; z-index:10; transition:transform .5s ease, opacity .5s ease, color .5s ease;  color:#fff;  opacity:1;}
.slo__icon svg{ width:100%; height:100%; display:block; }
.slo__card:hover .slo__icon{ transform: translate(-50%, -6px); color:#fff; opacity:1;}

@media (max-width: 1024px){
    .sec_vision_02 .sec_vision_02_list{ grid-template-columns:repeat(2,1fr); }
    .slo__card::before { transform: scale(1) !important; }
    .slo__card:hover::before { transform: scale(1) !important; }
}
@media (max-width: 768px){
    .vision_sec_02 .tit_01 {margin-bottom:100px; margin-top: 50px;}
    .vision_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .vision_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .sec_vision_02 .sec_vision_02_wrap { margin-top: 140px;;}
    .sec_vision_02 .sec_vision_02_list{ grid-template-columns:1fr; gap: clamp(50px,2vw,50px);}
    .sec_vision_02 .sec_vision_02_item span { font-weight: 500; }
    .sec_bs_slo { padding:80px 0 100px 0; }
    .sec_bs_slo .copyblock__desc { font-size: 16px; margin-top: 20px; line-height: 1.8; }
    .slo__cards {margin-top: 40px;}
    .sec_bs_slo__inner { width:100%;  }
}



/* ------------------------------------------------------------- network ------------------------------------------------------------------ */

.network_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:50px; margin-top: 50px;}
.network_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.network_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_07.network .map_wrap {max-width: 1580px; margin: 0 auto; position: relative;}
.sec_07.network .map_txt { text-align: center; max-width: 1400px; margin: 0 auto ; padding: 0 20px;}
.sec_07.network .map_txt .desc p { font-size: clamp(14px, 2vw, 18px); line-height: 30px; color: #666; font-weight: 300; margin-bottom: 50px;}
.sec_07.network .map_txt .countries {width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 80px; margin-bottom: 200px ; border-top: 1px solid #dedede; padding-top: 100px;}
.sec_07.network .map_txt .country {display: flex; flex-direction: column; align-items: center; gap: 16px;}
.sec_07.network .map_txt .country img { width: 80px; height: auto; border-radius: 6px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);  transition: transform 0.35s ease;}
.sec_07.network .map_txt .country img:hover { transform: scale(1.05);}
.sec_07.network .map_txt .country span { font-size: clamp(14px, 1vw, 16px); color: #222; font-weight: 400;}

@media(max-width:768px) {
    .network_sec_02 .tit_01 {margin-bottom:80px; margin-top: 50px;}
    .network_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .network_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}    
    .sec_07.network .map_txt .country img { width: 60px;}
    .sec_07.network .map_txt .countries {gap: 30px 50px; margin-bottom: 80px ; padding-top: 50px;}
}


/* ------------------------------------------------------------- sub pro ------------------------------------------------------------------ */

.pro_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:50px; margin-top: 50px;}
.pro_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.pro_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.pro_certification { max-width: 1000px; margin:0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: center; justify-items: center; padding: 40px 0; margin-bottom:200px;}
.pro_certification img {width: 100%; max-width: 160px; height: auto; object-fit: contain;}
.pro_sec_03 { width: 100%; display: flex; flex-direction: column; position: relative;}
.pro_sec_03 .pro_item{background-color:#111;display:flex;align-items:stretch;justify-content:center;width:100%;margin:0 auto;}
.pro_sec_03 .pro_item.reverse{flex-direction:row-reverse;background-color:#fff;}
.pro_sec_03 .pro_img{flex:1;width:50%;height:auto;position:relative;overflow:hidden;}
.pro_sec_03 .pro_img img{width:100%;height:100%;object-fit:cover;display:block;vertical-align:bottom;transform:scale(1.15);opacity:0;transition:transform 1.3s cubic-bezier(0.77,0,0.175,1),opacity 1s ease;}
.pro_sec_03 .pro_text{width:50%;flex:1;text-align:center;position:relative;z-index:3;transition:transform 0.3s ease-out;will-change:transform;display:flex;flex-direction:column;justify-content:center; }
.pro_sec_03 .pro_text .pro_icon{width:64px;height:64px;margin:0 auto 20px;color:#333;transition:color 0.3s ease,transform 0.3s ease;}
.pro_sec_03 .pro_text .pro_icon svg{width:100%;height:100%;}
.pro_sec_03 .pro_text:hover .pro_icon{color:#f0773c;transform:scale(1.05);}
.pro_sec_03 .pro_text h3{font-size: clamp(22px, 3vw, 45px);font-weight:600;margin-bottom:30px;letter-spacing:0.5px;color:#fff; }
.pro_sec_03 .pro_text p{font-size: clamp(14px, 2vw, 18px);color:#fff;line-height:2.2;margin:0 auto; max-width: 80%; word-break: keep-all;  }
.pro_sec_03 .pro_text p > span{font-size: clamp(14px, 2vw, 24px);color:#fff;line-height:1.6;}
.pro_img::before{content:'';position:absolute;inset:0;background:#111;z-index:2;transform-origin:left center;transform:scaleX(1);transition:transform 1.2s cubic-bezier(0.77,0,0.175,1);}
.pro_item.reverse .pro_img::before{transform-origin:right center;background:#fff;}
.pro_item.reverse .pro_text h3 {color:#111 !important;}
.pro_item.reverse .pro_text p {color:#555 !important;}
.pro_item.visible .pro_img::before{transform:scaleX(0);}
.pro_item.visible .pro_img img{transform:scale(1);opacity:1;}
.pro_sec_03 .btn-more { margin-top: 20px;}

.pro_sec_pic { position: relative; width: 100%; overflow: visible; }
.pro_sec_pic .sec_pic_inner {position: relative; min-height:calc(var(--vh) * 100); overflow: hidden;}
.pro_sec_pic .sec_pic_title { position: absolute; inset: 0; display: grid; top: 25%; z-index: 1; pointer-events: none; text-align: center;}
.pro_sec_pic .sec_pic_title h2 { font-family: 'Lora', serif; font-size: clamp(40px, 10vw, 100px); font-weight: 400; line-height: 1.2; color: #111;}
.pro_sec_pic .sec_pic_img_wrap { width: 100%; position: absolute; inset: 0; top:0 ; left: 0; overflow: hidden; z-index: 2; }
.pro_sec_pic .sec_pic_img {width: 100%;height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.5s ease; will-change: transform;}
.pro_sec_pic .sec_pic_overlay { position: absolute; top: 30%; left: 50%; width: 100%; max-width: 1300px; transform: translatex(-50%); color: #fff; text-align: center; opacity: 0;  z-index: 3;}
.pro_sec_pic .sec_pic_overlay .ko_title { font-size:clamp(28px, 4vw, 80px); font-weight: 600;  margin-bottom: 1rem; line-height: 80px;}
.pro_sec_pic .sec_pic_overlay .ko_sub { font-size:clamp(18px, 2vw, 28px); line-height: 1.6; font-weight: 300; }

.pro_sec_04 {width:100%; margin: 0 auto; position: relative; padding:150px 0 200px 0;text-align:center; background-color: #f8f8f8;}
.pro_sec_04 h1 { font-size: clamp(22px, 3vw, 45px); color: #222; margin-bottom: 70px; font-weight: 400;}
.pro_sec_04 .pro_sec_wrap { max-width: 1500px; margin: 0 auto;}
.pro_sec_04 .pro_items {display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap; text-align: left; }
.pro_sec_04 .pro_item {flex:1 1 calc(33.333% - 60px);min-width:280px; padding: 0 20px; max-width: 450px;}
.pro_sec_04 .pro_item img {width:100%;height:auto;display:block; max-width: 450px;}
.pro_sec_04 .pro_item h3 {width:100%; font-size:clamp(20px,3vw,26px);color:#111;font-weight:500;margin-bottom:12px; text-align: center; border-bottom: 1px solid #dedede; line-height: 65px;  }
.pro_sec_04 .pro_item hr {width:100%;margin:0 auto ; border:none; }
.pro_sec_04 .pro_item ul {list-style:none;padding:0;margin:0;text-align:left;line-height:1.8;color:#333; margin-top: 30px;}
.pro_sec_04 .pro_item ul li {margin-bottom:16px; font-size:16px; text-indent: 5px; }

@media(max-width:1024px) {
    .pro_sec_03 .pro_text { padding: 60px 20px; }
    .pro_items{ gap:40px;  }
}
@media(max-width:768px) {
    .pro_sec_02 .tit_01 {margin-bottom:20px; margin-top: 50px;}
    .pro_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .pro_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .pro_certification { margin-bottom:50px;}
    .pro_sec_03 { width: 94%; margin: 0 auto; }
    .pro_sec_03 .pro_item, .pro_sec_03 .pro_item.reverse { flex-direction: column;  }
    .pro_sec_03 .pro_img, .pro_sec_03 .pro_text { width: 100%;}
    .pro_sec_03 .pro_text { padding: 60px 0px; }
    .pro_sec_03 .pro_text p{max-width: 98%; word-break: keep-all;  }
    .pro_sec_pic {display: none;}
    /* .pro_sec_pic .sec_pic_title { top: 15%;}
    .pro_sec_pic .sec_pic_overlay { top: 25%;} */
    .pro_items { flex-direction:column; align-items:center; }
    .pro_item { width:100%; max-width:500px; }
    .pro_certification {max-width: 300px;  gap: 10px}
    .pro_certification img {max-width: 100px; }
    .pro_certification { grid-template-columns: repeat(2, 1fr);  gap: 10px; }
    .pro_sec_pic .sec_pic_overlay .ko_title { line-height: 36px;}
    .pro_sec_04 {padding:80px 0 100px 0;}
}
 



/* ---------------------------------------------------------- sub cosmetics ------------------------------------------------------------------- */

.cosmetics_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:200px; margin-top: 50px;}
.cosmetics_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif; }
.cosmetics_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_cosmetics_02 {width: 100%; position: relative; overflow: hidden; margin: 0 auto; z-index: 1; }
.sec_marquee.three {width: 100%; position: absolute; top:0px; z-index: 2;}
.sec_marquee.three .marquee_wrap2 {position: relative;}
.sec_marquee.three .marquee {white-space: nowrap; display: flex}
.sec_marquee.three .marquee_wrap2 .marquee_txt {font-family: "Lora", serif; font-size: clamp(52px, 10vw, 160px); line-height: 1.2; font-weight: 300; -webkit-text-stroke: #e9e8e8;  -webkit-text-stroke-width: 1px; -webkit-text-fill-color: transparent}
.sec_marquee.three .marquee_wrap2 .marquee_txt span {font-size: clamp(52px, 10vw, 160px); -webkit-text-fill-color: #e9e8e8; font-family: "Lora", serif; font-weight: 400;}
.sec_marquee.three .marquee.dir_left {transform: translateX(10%)}
.sec_marquee.three .marquee.dir_right {justify-content: flex-end; transform: translateX(-5%)}
.sec_cosmetics_02 .sec_cosmetics_02_wrap { max-width: 1400px; position: relative; margin: 0 auto; z-index: 10; margin: 0 auto; margin-top: 380px;}
.sec_cosmetics_02 .sec_cosmetics_02_list { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(30px,2vw,30px); }
.sec_cosmetics_02 .sec_cosmetics_02_item {position: relative; overflow: hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: clamp(25px,1.8vw,25px); }
.sec_cosmetics_02 .sec_cosmetics_02_img {width: 100%;}
.sec_cosmetics_02 .sec_cosmetics_02_img img {width: 100%; object-fit:cover;}
.sec_cosmetics_02 .sec_cosmetics_02_item span { font-size: clamp(26px,1.8vw,40px); margin: 20px 0; display: block; letter-spacing: -2px; }
.sec_cosmetics_02 .sec_cosmetics_02_item p{ color:#555; font-size: clamp(16px,1.2vw,16px); line-height: 1.8;}
.cosmetics_sec_pic { position: relative; width: 100%; overflow: visible; }
.cosmetics_sec_pic .sec_pic_inner {position: relative; min-height:calc(var(--vh) * 100); overflow: hidden;}
.cosmetics_sec_pic .sec_pic_title { position: absolute; inset: 0; display: grid; top: 10%; z-index: 1; pointer-events: none; text-align: center;}
.cosmetics_sec_pic .sec_pic_title h2 { font-family: 'Lora', serif; font-size: clamp(40px, 10vw, 100px); font-weight: 400; line-height: 1.2; color: #111;}
.cosmetics_sec_pic .sec_pic_img_wrap { width: 100%; position: absolute; inset: 0; top:0 ; left: 0; overflow: hidden; z-index: 2; }
.cosmetics_sec_pic .sec_pic_img {width: 100%;height: 100%; object-fit: cover; transform-origin: center center; transition: transform 0.5s ease; will-change: transform;}
.cosmetics_sec_pic .sec_pic_overlay { position: absolute; top: 30%; left: 13%; width: 90%; max-width: 900px; color: #fff; text-align: left; opacity: 0;  z-index: 3;}
.cosmetics_sec_pic .sec_pic_overlay .ko_title { font-size:clamp(28px, 4vw, 80px); font-weight: 600;  margin-bottom: 1rem;}
.cosmetics_sec_pic .sec_pic_overlay .ko_sub { font-size:clamp(18px, 2vw, 28px); line-height: 1.6; font-weight: 300;}
.cosmetics_sec_03 { width: 100%; padding: 230px 0; text-align: center; background: #000;}
.cosmetics_sec_03 .icon_grid {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 60px; max-width: 1200px; margin: 0 auto;}
.cosmetics_sec_03 .icon_item {width: 110px; display: flex; flex-direction: column; align-items: center; gap: 15px; transition: transform 0.3s ease, opacity 0.3s ease;}
.cosmetics_sec_03 .icon_item svg { width: 64px; height: 64px; stroke: #f8f8f8; transition: stroke 0.3s ease, transform 0.3s ease; transform-origin: center center;}
.cosmetics_sec_03 .icon_item p { font-size: 15px; color: #f8f8f8; font-weight: 400; letter-spacing: -0.3px;}
.cosmetics_sec_03 .icon_item:hover svg, .cosmetics_sec_03 .icon_item:hover svg * {stroke: #fff; transform: scale(1.05); transform-origin: center center;}
.cosmetics_sec_03 h1 { font-size: clamp(22px, 3vw, 45px); color: #fff; margin-bottom: 70px; font-weight: 400;}
@media (max-width: 1024px){
    .sec_cosmetics_02 .sec_cosmetics_02_wrap { max-width: 900px; margin-top: 180px;}
    .sec_cosmetics_02 .sec_cosmetics_02_list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){
    .cosmetics_sec_02 .tit_01 {margin-bottom:100px; margin-top: 50px;}
    .cosmetics_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem; line-height: 30px}
    .cosmetics_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .sec_cosmetics_02 .sec_cosmetics_02_wrap { margin-top: 140px;}
    .sec_cosmetics_02 .sec_cosmetics_02_list{ grid-template-columns:1fr; gap: clamp(50px,2vw,50px);}
    .sec_cosmetics_02 .sec_cosmetics_02_item span { font-weight: 500; }
    .cosmetics_sec_pic .sec_pic_title { top: 22%; }
    .cosmetics_sec_pic .sec_pic_overlay { top: 25%; left: 8%;}    
    .cosmetics_sec_03 { width: 100%; padding: 80px 0; text-align: center; }
    .cosmetics_sec_03 .icon_grid {gap: 30px;}
    
}
.c_product {
  --gap: 52px;
  --elev: 24px;
  --dur: .5s;
  --ease: cubic-bezier(.22,.61,.36,1);
  width: 100%;
  max-width: 1280px;
  margin: 100px auto;
  padding: 60px 20px;
}
.c_product-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);}

@media (max-width: 1024px) {
  .c_product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .c_product-grid { grid-template-columns: 1fr; }
  .c_product { margin: 0 auto; }
}

/* ========== 카드 ========== */
.c_card { position: relative; overflow: hidden; background: #fff; transform: translateY(0); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.c_link { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; height: 100%;}
.c_media { position: relative; aspect-ratio: 3 / 3.78;   overflow: hidden; background: #f6f6f6;}
.c_media img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* 이미지 비율 그대로 유지 */
  object-position: center center;
  transform: translateY(0) scale(1);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  will-change: transform;
}
.c_body { display: grid; gap: 10px; padding: 28px 22px 34px;}
.c_name { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.35; font-weight: 400; color: #222;}
.c_info {font-size: clamp(13px, 1.2vw, 15px); line-height: 1.7; color: #6a6a6a; min-height: 2.6em;}
.c_cta { margin-top: 6px; }
.c_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;              
  margin: 0 auto;
  padding: 14px 0;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 1;
  position: relative;
  overflow: hidden;
}
.c_btn span { display: inline-block; }

/* Hover 효과 */
.c_card:hover,
.c_card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 var(--elev) 40px rgba(0,0,0,.10);
}

.c_card:hover .c_media img,
.c_card:focus-within .c_media img {
  transform: translateY(-4px) scale(1.05);
  filter: saturate(1.02);
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .c_card, .c_media img, .c_btn { transition: none; }
}




/* ------------------------------------------------------------ sub materials ----------------------------------------------------------- */

.material_sec_02 .tit_01 {position: relative; text-align:center; margin-inline: auto; margin-bottom:250px; margin-top: 50px;}
.material_sec_02 .tit_01 p:first-child  {font-size: clamp(18px, 3vw, 45px); margin-top: 1.3rem; color: #222; font-family: 'Lora', serif;}
.material_sec_02 .tit_01 p:last-child  {font-size: clamp(16px, 2vw, 18px); margin-top: 100px; color: #666; font-weight: 300; line-height: 30px;}
.sec_material .ma_wrap {max-width: 1560px; margin: 0 auto; padding: 0px 20px 150px 20px;}
.sec_material ul {width:100%;}
.sec_material ul:after {content:""; display:block; clear:both;}
.sec_material ul li {display:block; position:relative; width:100%; margin:0 0 50px 0;}
.sec_material ul li:after {content:""; display:block; clear:both;}
.sec_material .img {width:40%; overflow:hidden; position: relative;will-change: transform; }
.sec_material .img::before{ content:""; position:absolute; inset:0; background:#fff; transform: scaleX(1); transform-origin: left;  transition: transform 1.1s cubic-bezier(0.77,0,0.175,1);  will-change: transform;  z-index: 2;}
.sec_material .img.visible::before{transform:scaleX(0);}
.sec_material .img.visible img{ transform:scale(1);opacity:1;}
.sec_material .img img {width:100%; position: relative;z-index: 1; object-fit:cover; display:block; vertical-align:bottom; transform:scale(1.15);  opacity:0;  transition: transform 1.3s cubic-bezier(0.77,0,0.175,1), opacity   0.9s ease;}
.sec_material .txt {position:absolute; left:50%; top:30%; word-break:keep-all;}
.sec_material .txt .tt span {display:block; font-size: clamp(24px, 4vw, 60px); color:#111; font-weight:500; letter-spacing:-0.5px; line-height:1.2;}
.sec_material .txt .tx span {display:block; font-size: clamp(14px, 2vw, 20px); color:#333; line-height:1.8;}
.sec_material .txt .tx {margin-top: 20px;}
.sec_material ul li.reverse .txt {left:10%; width:60%;}
.sec_material ul li.reverse .img {float:right;}
.sec_material ul li.reverse .img::before{ transform-origin: right;}
/* @media (prefers-reduced-motion: reduce){
    .sec_material .img::before,
    .sec_material .img img{ transition:none !important; }
} */
@media (max-width: 768px){
    .material_sec_02 .tit_01 {margin-bottom:100px; margin-top: 50px;}
    .material_sec_02 .tit_01 p:first-child  {margin-top: 1.3rem;}
    .material_sec_02 .tit_01 p:last-child  {margin-top: 30px; line-height: 30px;}
    .sec_material .ma_wrap{ padding: 0 20px 80px 20px; }
    .sec_material ul li{ margin-bottom: 60px; display: block; }
    .sec_material .img{ width: 100%; float: none !important; margin-bottom: 22px;}
    .sec_material ul li.reverse .img{ float: none !important;}
    .sec_material .img img{ width: 100%; height: auto; transform: scale(1.15); }
    .sec_material .txt{ position: static; width: 100%; left: auto; top: auto; transform: none; text-align: left; margin-top: 10px;}
    .sec_material ul li.reverse .txt{ position: static; width: 100%; left: auto; text-align: left;}
    .sec_material .txt .tt span{font-size: 28px;line-height: 1.3;}
    .sec_material .txt .tx{ margin-top: 14px; }
    .sec_material .txt .tx span{ font-size: 15px; line-height: 1.6; }    
}



/* ------------------------------------------------------------ sub result ----------------------------------------------------------- */
.sec_material.result .txt .tt span {display:block; font-size: clamp(22px, 4vw, 40px); color:#111; font-weight:500; letter-spacing:-0.5px; line-height:1.2;}



/* ----------------------------------------------------- sub_contact -------------------------------------------------------------- */

.conwrap {width: 100%; background-color: #f8f8f8; padding: 100px 0 ; }
.contact-section { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.contact-section .field { display: grid; gap: 8px; margin-bottom: 30px; }
.contact-section .field.last { margin-top: 80px; }
.contact-section .btn-wrap { display: flex; justify-content: flex-end; padding-right: 0; }
.contact-section .btn-submit { display: inline-flex;  padding: 12px 18px; border: 0; border-radius: 12px; background:#222; color:#fff; font-weight:600; cursor:pointer; margin: 0;}
.contact-section .form-msg { margin-top: 10px; font-size:14px; }
*, *::before, *::after { box-sizing: border-box; }
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #a8a8a8;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}
.contact-section textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #a8a8a8;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}
.contact-section input:focus,
.contact-section textarea:focus,
.contact-section input:focus-visible {outline: none; box-shadow: none; border-bottom-color: #222;}
.contact-section textarea:focus-visible { box-shadow: none; border-color: #222; }
.contact-section textarea { resize: vertical;}
.contact-section input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset; -webkit-text-fill-color: #222;}

@media (max-width: 768px){
    .conwrap {padding: 50px 0 ; }
}



/* ----------------------------------------------------- etc. -------------------------------------------------------------- */

.v-line {width: 1px; height:200px;  background-color: #d8d7d7;  margin: 0 auto; margin-top: 100px;}
@media (max-width: 768px) {
    .v-line {height:180px; margin: 0 auto; margin-top: 50px;}
}