@import url('sub.css'); 

.mw { max-width: 1590px; margin: 0 auto; }
.en { font-family: var(--eng); }
.small_eng {font-weight: 500; color:var(--main); letter-spacing: 0.18px; font-size:1rem;}
.c-black { color: var(--black); }


/* =========================
   Hero (@subtop)
   ========================= */
.brandHero { position:relative; overflow:hidden; text-align:center; padding:60px 5%; height:calc(var(--vh) - 170px);  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  color: var(--white); box-sizing:border-box; z-index:10;}
.brandHero .bg {background: url("/brand/img/brand_bg01.jpg")no-repeat center / cover; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);  animation: m_vsImg 2.7s forwards;}
.brandHero__inner { position: relative; box-sizing:border-box; text-align:center;}
.brandHero__kicker { margin: 0; font-weight: 600; color: var(--white); }
.brandHero__title { font-weight: 200;  line-height: 1.15; letter-spacing: -0.04em; color: var(--white);  margin:30px 0;}
.brandHero__desc { color:rgba(255,255,255,0.6);}

/* =========================
   Section title (공통)
   ========================= */
.sec_tit_box { margin: 0 auto 60px; }
.sec_tit_box .en { margin: 0; font-size: 1rem; line-height: 177%; letter-spacing: .18px; color: var(--main); font-weight: 500; }
.sec_tit_box__tit { margin: 15px 0 0; font-weight: 200; line-height: 125%; letter-spacing: -1.2px;}
.sec_tit_box--white .en { color: rgba(255,255,255,.85);}
.sec_tit_box--white .sec_tit_box__tit { color: var(--white); }



/* =========================
   CEO
   ========================= */
.ceoIntro { display: flex; gap: 0 100px; align-items: center; }
.ceoIntro__txt { flex: 1;}
.ceoIntro__lead { margin: 0 0 20px; font-weight: 300; line-height: 1.45; }
.ceoIntro__body p { margin: 0 0 20px; }
.ceoIntro__body p:last-child { margin-bottom: 0; }
.ceoIntro__media { flex: 0 0 auto; margin: 0; position: relative; max-width:645px; flex-shrink: 0;  width:42%;}
.ceoIntro__media img {width:100%;}
.ceoIntro__mark { position: absolute; left: -60px; top: 50px; width: 120px; aspect-ratio: 120 / 239; background: url('/brand/img/ceo_img02.png') center/contain no-repeat; pointer-events: none;}

/* =========================
   Timeline base (bar fill)
   ========================= */
[data-barfill] { --p: 0; }
.timelineBox {margin:60px 0 0; background:rgba(238, 242, 240, 0.90) url("/brand/img/ceo_img03.png")no-repeat center / cover; padding: clamp(30px, 4.2vw, 80px); display: grid; grid-template-columns: 325px 1px 1fr; gap: clamp(15px, 3vw, 50px); align-items: start; }
.timelineBox > * { position: relative; }
.timelineBox__tit p { margin: 0; }
.timelineBox__tit h3 { margin: 5px 0 0; font-weight: 200; letter-spacing: -0.02em; }
.timelineBox__bar { position: relative; width: 1px; height: 100%; }
.timelineBox__track { position: absolute; inset: 0; background: var(--border); }
.timelineBox__fill { position: absolute; left: -1px; top: 0; width: 3px; height: 100%; background: var(--main); transform-origin: top; transform: scaleY(var(--p)); transition:all 0.5s ease;}
.timelineBox__list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.timelineRow { display: flex; gap: 20px; align-items: flex-start; font-size: 1rem;}
.timelineRow__y { width: 50px; flex: 0 0 50px; color: var(--main); font-weight: 600; }
.timelineRow__t { color: var(--basic); }

/* =========================
   Pride
   ========================= */
   #pride .mw {width:90%;}
.sec--pride { background: var(--main); color: var(--white); }
.prideList { display: flex; flex-direction: column; gap: clamp(30px, 6vw, 60px); }
.prideItem { display: flex; align-items: center; gap: clamp(26px, 6vw, 100px); }
.prideItem--rev { flex-direction: row; }
.prideItem__txt { flex: 1;}
.prideItem__badge { margin: 0 0 15px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 20px; border-radius: 999px; background: var(--white); color: var(--main); font-size: 1rem; line-height: 32px; font-weight: 500; letter-spacing: .18px; }
.prideItem__tit { margin: 0; color: var(--white); font-weight: 100; margin:0 0 35px; line-height: 125%; letter-spacing: -1.2px;}
.prideItem__quote { margin: 20px 0 0; color: var(--white);}
.prideItem__desc { margin: 20px 0 0; opacity: .7; color: var(--white); }
.prideItem__media { margin: 0; flex:1; aspect-ratio: 78 / 60;}
.prideItem__media .mediaMask {width:100%; height:100%;}
.prideItem__media img {display: block; width: 100%;}

/* =========================
   Awards (bar fill)
   ========================= */
#awards .mw {width:90%;}
.sec--awards { background: rgba(238,242,240,.9); }
.awardWrap { --barX: 270px; padding-top: 80px; position: relative; display: grid; grid-template-columns: 1fr 655px; gap: clamp(26px, 4vw, 60px);  align-items: start;  z-index:10;}
.awardWrap__bar { position: absolute; left: var(--barX); top: 0; bottom: 0; width: 1px; }
.awardWrap__bar::after {content:''; width:1px; height:100%; background: linear-gradient(180deg, rgba(17, 17, 17, 0.15) 85%, rgba(17, 17, 17, 0.00) 100%); position:absolute; top:0; left:0; z-index:-1;}

.awardWrap__track { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,0) 85%); }
.awardWrap__fill { position: absolute; inset: 0; background: var(--main); transform-origin: top; transform: scaleY(var(--p)); transition:all 0.5s ease;}
.awardWrap__rows { display: flex; flex-direction: column; gap: 60px; }
.awardRow { display: grid; grid-template-columns: 200px 1fr; gap: 155px; align-items: start; position: relative;}
.awardRow .dot_ico { position: absolute; left: calc(var(--barX) - 19px); top: 7px; width: 39px; aspect-ratio: 1 / 1; border-radius:100%; background:rgba(27,58,42,0.1);  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; opacity:0.3; transition:all 0.5s ease;}
.awardRow .dot_ico::after {content:''; width: 9px; aspect-ratio: 1 / 1; border-radius:100%; background:var(--main);}
.awardRow.active .dot_ico {opacity:1; transition:all 0.5s ease;}
.awardRow__year { margin: 0; font-size: 2.222rem; line-height: 130%; font-weight: 600; color: var(--main); }
.awardRow__list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 1rem; color: var(--basic); }
.awardRow__list li { position: relative; padding-left: 13px; }
.awardRow__list li:before { content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 50%; background: rgba(115,115,115,.9); }
.awardWrap__imgs { position: sticky;  top: 190px;  pointer-events: none; aspect-ratio: 1 / 1;}
.awardImg { position: absolute; pointer-events: auto; }
.awardImg--lg { right: 0; top: 0; }
.awardImg--sm { left: 0; top: 380px; }
.awardImg--sm2 {left: 280px; top: 590px; }

/* =========================
   Road (bar fill)
   ========================= */
.roadWrap { --barX: 270px; padding-top: 80px; position: relative; display: grid; grid-template-columns: 1fr 655px; gap: clamp(26px, 4vw, 60px); align-items: start; z-index:10;}
.roadWrap__bar { position: absolute; left: var(--barX); top: 0; bottom: 0; width: 1px; }
.roadWrap__bar::after {content:''; width:1px; height:100%; background: linear-gradient(180deg, rgba(17, 17, 17, 0.15) 85%, rgba(17, 17, 17, 0.00) 100%); position:absolute; top:0; left:0; z-index:-1;}
.roadWrap__track { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,0) 85%); }
.roadWrap__fill { position: absolute; inset: 0; background: var(--main); transform-origin: top; transform: scaleY(var(--p)); transition:all 0.5s ease;}
.roadWrap__rows { display: flex; flex-direction: column; gap: 60px; }
.roadRow { display: grid; grid-template-columns: 200px 1fr; gap: 155px; align-items: start; position: relative; }
.roadRow .dot_ico { position: absolute; left: calc(var(--barX) - 19px); top: 7px; width: 39px; aspect-ratio: 1 / 1; border-radius:100%; background:rgba(27,58,42,0.1);  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;opacity:0.3;}
.roadRow .dot_ico::after {content:''; width: 9px; aspect-ratio: 1 / 1; border-radius:100%; background:var(--main);}
.roadRow.active .dot_ico {opacity:1; transition:all 0.5s ease;}
.roadRow__cat { margin: 0; font-size: 1.777rem; line-height: 140.625%; font-weight: 600; color: var(--main); }
.roadRow__list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 1rem; color: var(--basic); }
.roadRow__list li { position: relative; padding-left: 13px; }
.roadRow__list li:before { content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 50%; background: rgba(115,115,115,.9); }
/* =========================
   Road (Images - Sticky)
   ========================= */
.roadWrap__imgs { position: sticky; top: 190px; pointer-events: none; aspect-ratio: 1 / 1; }
.roadImg { position: absolute; pointer-events: auto; }
.roadImg--lg { right: 0; top: 0; }
.roadImg--sm { left: 0; top: 380px; }
.roadImg--sm2 { left: 280px; top: 590px; }
/* .roadWrap__imgs { position: relative; top: 0;  pointer-events: none; }
.roadImg { position: absolute; pointer-events: auto; }
.roadImg--lg { right: 0; top: 225px; }
.roadImg--sm { left: 0; top: -20px; } */

/* =========================
   Brand Story (slick)
   ========================= */
  #brand_story {background: rgba(238, 242, 240, .9);  height:var(--vh);}
  #brand_story .mw {width:90%; padding-top:70px;}
  
/* .sec--brandStory { background: rgba(238,242,240,.9); } */
.brandStory { position: relative;}
/* .brandStory__roll { overflow: hidden; } */
.brandSlide { position: absolute; inset: 0; display: flex !important; align-items: center; gap: clamp(20px, 6vw, 100px); }
.brandSlide__media {flex:1; max-width:780px;}
.brandSlide__media img {width:100%;}
.brandSlide__txt { flex: 1;}
.brandSlide__chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 20px; border-radius: 999px; background: var(--main); color: var(--white); margin: 0 0 20px; font-size: 1rem; line-height: 32px; font-weight: 500; letter-spacing: .18px; }
.brandSlide__tit { margin: 0; color: var(--black); font-size: 2.222rem; font-weight: 300; line-height: 130%;}
.brandSlide__lead { margin: 20px 0 0; }
.brandSlide__desc { margin: 20px 0 0; }
.brandStory__dots { position: absolute; right: 0; top: 30px; display: flex; gap: 15px; align-items: center; justify-content: center;}
.brandStory__dots .brandStory__dots {position:absolute; top:30px; right:0;  z-index:990;}
.brandStory__dots .brandDots {display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 15px; position:relative; z-index:99;}
.brandStory__dots .brandDots span {font-size:0; border:0; margin:0; padding:0; background:var(--black); display:block; width:8px; aspect-ratio: 1 / 1; cursor:pointer; opacity:0.2; border-radius:100%;}
.brandStory__dots .brandDots span.active {opacity:1; background:var(--main);}






/* =========================
   Diet info (slick)
   ========================= */
.dietInfo {position:absolute; top:50%; left:0; z-indeX:10; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; transform:translateY(-50%);}
#diet_info {}
#diet_info .sec_tit_box {position:relative; }
.dietInfo__roll { width: 100%; }
.dietInfo__roll .slick-list {margin-left:-30px;}
.dietCard {position:relative; margin-left:30px; }
.dietCard::after {content:''; width:100%; height:1px; background:rgba(17,17,17,.15); position:absolute; bottom:1px; left:0;}
.dietCard__in { display: flex; flex-direction: column;  text-decoration: none;}
.dietCard__img { width: 100%; overflow: hidden; aspect-ratio: 1 / 1;}
.dietCard__img img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.5s ease;}
.dietCard:hover .dietCard__img img  {transform:scale(1.1); transition:all 0.5s ease;}
.dietCard__tit { margin: 0; text-align: center; padding:30px; box-sizing:border-box;}
.dietInfo__arr {}
.dietInfo__arr::before {content:'\e2ea'; opacity:.3; font-size:50px; display:block; line-height:1; font-family:var(--icon); color:var(--black); transition:all 0.3s linear;}
.dietInfo__arr:hover::before {opacity:1; transition:all 0.3s linear;}
.dietInfo__arr--prev {}
.dietInfo__arr--next {transform: scaleX(-1);}



.dietInfo__arr.slick-disabled { opacity: .12; cursor: default; pointer-events: none; }

/* slick gap 보정 */
.slick-slide { outline: none; }


@media (prefers-reduced-motion: reduce) {
  .timelineBox__fill, .awardWrap__fill, .roadWrap__fill { transition: none !important; }
}





/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1700px) { 

.ceoIntro br {display:none;}
.prideItem br {display:none;}


.awardWrap {--barX: 148px; grid-template-columns: 1fr 40%;}
.awardWrap__imgs img {max-width:100%;}
/* .awardImg--lg {width:65%; position:relative; margin:0 0 0 auto; top:0;} */
.awardImg--sm {width:45%; top:auto; bottom:0; transform:translateY(50%);}
.awardImg--sm2 {width:30%; top:auto; bottom:0; transform:translateY(120%); left:28%;}
.awardRow {grid-template-columns: 140px 1fr; gap:50px;}


.roadWrap {--barX: 148px; grid-template-columns: 1fr 40%;}
.roadWrap__imgs img {max-width:100%;}
/* .roadImg--lg {width:75%; position:relative; margin:0 0 0 auto; top:0; transform:translateY(50%);} */
.roadImg--sm {width:55%; top:0;}
.roadRow {grid-template-columns: 140px 1fr; gap:50px;}
.roadRow__cat {font-size:1.22rem;}
.roadRow .dot_ico {top:-3px;}
.roadRow__list {margin:0;}


.brandSlide br {display:none;}



}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

.ceoIntro {align-items:flex-start;}
.ceoIntro__mark {max-width:26%; left:0; transform:translateX(-50%); }


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


.timelineBox {grid-template-columns: 32% 1px 1fr;}
.brandSlide {gap:0 50px;}
.awardWrap__imgs { position: sticky;  top: 170px;}
.roadWrap__imgs { position: sticky;  top: 170px;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


.brandHero {height:calc(var(--vh) - 105px);}

.ceoIntro {flex-wrap:wrap;}
.ceoIntro__txt {flex:none; width:100%; order:2; margin:50px 0 0;}
.ceoIntro__media {flex:none; width:100%; max-width:100%; order:1;}
.ceoIntro__media .mediaMasks {overflow: hidden; aspect-ratio: 4 / 3; }
.ceoIntro__media .mediaMasks img {display: block; width: 100%; height: 100%; object-fit: cover;}
.ceoIntro__mark {max-width:70px; left:5%; transform:translateY(-35%); width:26%; top:0;}


.timelineBox {display: grid; grid-template-columns: 1px 1fr;}
.timelineBox__tit {grid-column: 1 / -1; width: 100%;margin-bottom: 0;}
.timelineBox__bar {height: 100%;}

.prideItem  {flex-wrap:wrap; flex-direction: column-reverse;}
.prideItem--rev {flex-direction: row !important;}
.prideItem__media {flex:none; width:100%;}
.prideItem__txt {flex:none; width:100%;}
.prideItem__badge {line-height:26px;}

.awardWrap {--barX: 148px; grid-template-columns: 1fr; padding-top:40px;}
.awardWrap__imgs {grid-column: 1 / -1; width: 100%; order: -1; position:relative; top:0; display:none;}
.awardRow__list li:before {top:12px;}

.roadWrap {--barX: 148px; grid-template-columns: 1fr; padding-top:40px;}
.roadWrap__imgs {grid-column: 1 / -1; width: 100%; order: -1; position:relative; top:0; display:none;}
.roadRow__list li:before {top:12px;}
.roadRow__cat {padding-right:15px; box-sizing:border-box;}

#brand_story {height:auto;}
#brand_story .mw {padding-top:0;}
.brandSlide {position:relative !important; flex-wrap:wrap; gap:35px; display:block !important;}
.brandSlide__media {max-width:100%; flex:none; width:100%; margin: 0 0 30px;}
.brandSlide__txt {max-width:100%; flex:none; width:100%;}
.brandSlide__chip {line-height:26px;}
.brandStory__dots {position:relative; top:0; margin:30px 0 0;}
.brandStory__dots .brandDots {display:none !important;}
.brandStory__dots .brandDots span {display:none;}

.brandStory__dots .slick-dots {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 15px; position:relative; z-index:99;}
.brandStory__dots .slick-dots li {width:8px; aspect-ratio: 1 / 1; }
.brandStory__dots .slick-dots li button {font-size:0; border:0; margin:0; padding:0; background:var(--black); display:block; cursor:pointer; opacity:0.2; border-radius:100%; width:100%; height:100%;}
.brandStory__dots .slick-dots .slick-active button {opacity:1; background:var(--main);}



.dietInfo__roll .slick-list {margin-left:-15px;}
.dietCard {margin-left:15px;}
.dietCard__tit {padding:20px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.sec_tit_box {margin:0 auto 30px;}
.sec_tit_box__tit {margin:5px 0 0}

.mw {width:90%;}

.brandHero {height:calc(var(--vh) - 70px); background: url(/brand/img/brand_bg01.jpg) no-repeat left 30% center / cover;}
.brandHero__title {margin:15px 0;}

.ceoIntro__txt {margin:30px 0 0;}
.ceoIntro__lead {margin:0 0 10px;}
.ceoIntro__mark {max-width:50px; }
.ceoIntro__body p {margin:0 0 10px;}

.timelineBox {margin:30px 0 0; padding:20px; gap:20px 22px;}
.timelineRow {gap:0;}
.timelineBox__list {padding:12px 0;}

.prideList {gap:40px 0;}
.prideItem {gap:30px 0;}
.prideItem__tit {margin:0 0 20px;}
.prideItem__desc {margin:10px 0 0;}
.prideItem__badge {padding:2px 15px;}


.awardWrap {--barX: 0; padding-top: 20px;}
.awardRow__year {font-size:1.44rem;}
.awardRow__list {margin:4px 0 0;}
.awardWrap__rows {gap:35px; }
.awardRow {grid-template-columns: 1fr; gap:5px 30px; padding-left:30px; box-sizing:border-box;}
.awardRow .dot_ico {width:26px; left: -13px; top:0;}
.awardRow .dot_ico::after {width:6px;}
.awardRow__list li:before {top:9px;}


.roadWrap {--barX: 0; padding-top: 20px;}
.roadRow__list {margin:4px 0 0;}
.roadWrap__rows {gap:35px;}
.roadRow {grid-template-columns:  1fr; gap:5px 30px; padding-left:30px; box-sizing:border-box;}
.roadRow .dot_ico {width:26px; left: -13px; top:1px;}
.roadRow .dot_ico::after {width:6px;}
.roadRow__list li:before {top:9px;}
.roadRow__cat {font-size:1.44rem;}

.brandStory__roll .slick-track {align-items:flex-start;}
.brandSlide {display:block !important; flex-wrap:wrap; gap:20px; align-items:unset;}
.brandSlide__media {max-width:100%; flex:none; width:100%; margin:0 0 30px;}
.brandSlide__txt {max-width:100%; flex:none; width:100%;}
.brandSlide__chip {line-height:26px; padding:2px 15px; margin:0 0 15px;}
.brandSlide__lead {margin:10px 0 0;}
.brandSlide__desc {margin:10px 0 0;}
.brandStory__dots {margin:25px 0 0;}
.brandStory__dots .slick-dots {gap:0 12px; }
.brandSlide__tit {font-size:1.666rem;}


#diet_info {overflow:hidden;}
.dietInfo__arr::before {font-size:30px;}
.dietInfo__roll {overflow:visible;}
.dietInfo__roll .slick-list {overflow:visible; width:80%;}
.dietCard__tit {padding:15px;}

}