/* ================= HERO (PC/M 공통) ================= */
.lp-hero{
  position: relative;
  width: 100%;
	height:919px;
  overflow: hidden;
}

/*.lp-hero.img-pc{ margin-top: 89px; }
.lp-hero.img-m { margin-top: 115px; }*/

/* PC/M 토글 */
.img-pc{display:block;}
.img-m{display:none;}
@media (max-width: 1500px){
  .img-pc{display:none;}
  .img-m{display:block;}
}

/* ================= HERO BG (2장 step 슬라이드) ================= */
.hero2-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}

/* 2장 + 2장 복제 = 4장 */
.hero2-track{
  display:flex;
  width:400%;
  height:100%;
  transform: translateX(0);
  transition-property: transform;
  transition-duration: .8s;
  transition-timing-function: ease;
  will-change: transform;
}

/* 한 장 = 25% (4장) */
.hero2-slide{
  flex: 0 0 25%;
  height:100%;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
 position:relative;

}

/* PC 배경 */
.lp-hero.img-pc .hero2-bg1{ background-image:url("https://nobly.kr/skin/view/sub2/img/story_01.png"); }
.lp-hero.img-pc .hero2-bg2{ background-image:url("https://nobly.kr/skin/view/sub2/img/story_011.png"); }

/* M 배경 */
.lp-hero.img-m  .hero2-bg1{ background-image:url("https://nobly.kr/skin/view/sub2/img/story_01_m.png"); }
.lp-hero.img-m  .hero2-bg2{ background-image:url("https://nobly.kr/skin/view/sub2/img/story_011_m.png"); }

/* ================= 하단 이미지 레이어 ================= */
.lp-hero-bottom{
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

@media (max-width: 1500px){
  .lp-hero-bottom{ bottom: 60px; gap: 14px; width: calc(100% - 28px); }
  .lp-hero-bottom{ width:80%; }
  .lp-tab{font-size:26px !important;}
  .nbg-title{font-size: 32px !important;}
  .nbg-sub{font-size:24px !important;}
	.lp-hero{height:55% !important;  max-height: 919px !important; margin-top: 115px !important;}
}

/* 드롭 애니메이션 */
.hero-img{
  display:block;
  opacity: 0;
  transform: translateY(-90px);
  transition: opacity .9s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.hero-img.is-show{
  opacity:1;
  transform: translateY(0);
}
.hero-img-1{ width:100%; max-width:1100px; height:auto; }
.hero-img-2{ width:100%; padding:0 2%; max-width: 850px; height:auto; margin-top:-10px; }

/* ================= TABS ================= */
.lp-wrap{ width: 100%; margin: 0 auto; padding: 0; }
.lp-tabs{
  width: 100%;
  display: flex;
  justify-content: center;
  background: #4c5248;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.lp-tabs-inner{
  width: 1200px;
  display:flex;
}
.lp-tab{
  width:100%;
  border:none;
  background:transparent;
  color:#fff;
  padding: 16px 0;
  font-weight: 800;
  cursor:pointer;
  text-align:center;
  font-size: 18px;
  letter-spacing: -1px;
}
.lp-tab.is-active{
  color:#e2d195;
  border-bottom: 5px solid #e2d195;
}

/* ================= SLIDER AREA ================= */
.nbg-wrap{
  width:100%;
  background:#f3f6f0;
  padding:40px 16px;
}
.nbg-inner{
  max-width:1200px;
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:36px;
  justify-content:center;
  box-sizing:border-box;
}
.nbg-inner.is-single{
  grid-template-columns: 1fr;
  justify-items: center;
}

.nbg-card{
  max-width:582px;
  width:100%;
  margin:0 auto;
}

.nbg-viewport{
  position:relative;
  width:100%;
  aspect-ratio: 582 / 685;
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  background:#fff;
  cursor: pointer;
}

.nbg-track{ width:100%; height:100%; position:relative; }
.nbg-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
}
.nbg-slide.is-active{ opacity:1; }

.nbg-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.nbg-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  background: rgba(255,255,255,.8);
  padding:6% 5%;
}
.nbg-title{
  font-size:25px;
  font-weight:700;
  color:#1f231f;
  line-height:1.2;
}
.nbg-sub{
  margin-top:14px;
  font-size:18px;
  color:#222;
  font-weight:500;
  opacity:.85;
}

.nbg-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:0;
  border-radius:50%;
  background: rgba(0,0,0,.2);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.nbg-prev{ left:12px; }
.nbg-next{ right:12px; }

.nbg-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px 0 0;
}
.nbg-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#afafaf;
  border:0;
  cursor:pointer;
}
.nbg-dot.is-on{ background:#4d514a; }

@media (max-width: 980px){
  .nbg-inner{ grid-template-columns: 1fr; justify-items:center; }
}


.lg11{
	position:absolute;
	bottom:10px;
	left:30px;
	max-width:140px;
	width:100%;
}


.lg22{
	position:absolute;
	top:122px;
	right:0px;
	max-width:321px;
	width:100%;
}


.lg11_m{
	position:absolute;
	bottom:20px !important;
	left:30px !important;
	max-width:150px;
	width:100%;
}


.lg22_m{
	position:absolute;
	top:36px !important;
	right:0px !important;
	max-width:290px;
	width:100%;
}