/* page1 상품소개 탭메뉴 정렬 */
.product { --sec-box-pd:7.8rem; }
@media screen and (max-width: 786px){
  .product { --sec-box-pd:4.8rem; }
  .product .sub-tit-wr .img-blur {object-position: 16%;}
}

/* page1 섹션 전체 배경 */
.page1 .sec1,
.page1 .sec2 { background: #F7F7F7; } 

/* page1 - sec1 봄앤향 전체상품 */
 .page1 .sec2 { margin-top: 4.7rem; } 

/* page1 - sec2 상품별 썸네일 */
.sec2 { --s2-pt: 8rem; --s2-pb: 12rem; --s2-col-gap: 2.8rem; --s2-row-gap: 3.2rem; --s2-rd: 2rem; --s2-bd: #E2E2E2; --s2-bg: #FFFFFF; --s2-pad-x: 2.8rem; --s2-pad-pt: 2rem; --s2-pad-pb: 2.8rem; --s2-cat-mb: 1rem; --s2-tt-mb: 1.2rem; --s2-ds-mb: 2.6rem; --s2-btn-h: 5.6rem; --s2-btn-rd: 5rem; --s2-img-ratio: 1 / 0.86; } 
.sec2 .s2-grd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 3rem; } 
.sec2 .s2-it { overflow: hidden; border: 0.1rem solid var(--s2-bd); border-radius: var(--s2-rd); background: var(--s2-bg); } 
.sec2 .s2-thm { display: block; aspect-ratio: var(--s2-img-ratio); overflow: hidden; background: #eee; } 
.sec2 .s2-thm img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.sec2 .s2-tx { padding: var(--s2-pad-pt) var(--s2-pad-x) var(--s2-pad-pb); } 
.sec2 .s2-cat { margin: 0 0 var(--s2-cat-mb); color: #75AB39; font-family: "Pretendard", sans-serif; font-size: 1.4rem; font-weight: 600; } 
.sec2 .s2-tt { margin: 0 0 var(--s2-tt-mb); color: #332F2D; font-family: "Pretendard", sans-serif; font-size: 2rem; font-weight: 700; } 
.sec2 .s2-ds { min-height: 5rem; margin: 0 0 var(--s2-ds-mb); color: #77736A; font-family: "Pretendard", sans-serif; font-size: 1.8rem; line-height: 1.5; } 
.sec2 .s2-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--s2-btn-h); border: 0.1rem solid #E2E2E2; border-radius: var(--s2-btn-rd); background: #FFFFFF; color: #242021; font-family: "Pretendard", sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1; text-decoration: none; transition: .3s; position: relative; z-index: 50; pointer-events: auto; } 
.sec2 .s2-btn:hover,
.sec2 .s2-it.on .s2-btn { background: #24462F; border-color: #24462F; color: #FFFFFF; } 
@media screen and (max-width: 1024px){
 .sec2 { --s2-pt: 7rem; --s2-pb: 10rem; --s2-col-gap: 2rem; --s2-row-gap: 2.4rem; --s2-pad-x: 2rem; --s2-pad-pt: 1.8rem; --s2-pad-pb: 2.2rem; --s2-ds-mb: 2rem; } 
 .sec2 .s2-grd { gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 .sec2 .s2-tt,
 .sec2 .s2-ds { font-size: 1.8rem; } 
 }
@media screen and (max-width: 786px){
 .sec2 { --s2-pt: 6rem; --s2-pb: 8rem; --s2-row-gap: 2rem; --s2-pad-x: 1.8rem; --s2-btn-h: 5rem; } 
 .sec2 .s2-grd { grid-template-columns: 1fr; } 
 .sec2 .s2-tt { font-size: 2rem; } 
 .sec2 .s2-btn { font-size: 1.7rem; } 
 .sec2 .s2-ds { min-height: auto; } 
 .sec2 .s2-cat { margin: 0 0 .5rem; font-size: 1.6rem; } 
 .sec2 .s2-thm { aspect-ratio: auto; height: 41rem; }  
 }
@media screen and (max-width: 576px){
 .sec2 .s2-thm { height: 27rem; } 
 }


/* page2 - sec1 상품 상세설명(공통) */
.product .pd-sec1 { --s1-pt: 7rem; --s1-pb: 12rem; --s1-wr-gap: 5.2rem; --s1-gal-gap: 2rem; --s1-thm-w: 11rem; --s1-thm-gap: 1.9rem; --s1-rd-lg: 2.4rem; --s1-rd-sm: 1rem; --s1-brd: #D8DDD6; --s1-tt-mb: 1.6rem; --s1-ds-mb: 2rem; --s1-div-mb: 2.4rem; --s1-sub-mb: 1.8rem; --s1-spc-gap-x: 3rem; --s1-spc-gap-y: 1.5rem; --s1-spi-px: 1.5rem; --s1-spi-h: 6.3rem; --s1-btn-mt: 4.7rem; --s1-btn-h: 7rem; --s1-btn-rd: 998px; --s1-tt-c: #332F2D; --s1-ds-c: #4A4643; --s1-sub-c: #242021; --s1-spi-c: #24462F; --s1-btn-bg: #24462F; } 
.product .pd-sec1 .s1-pd { position: relative; } 
.product .pd-sec1 .s1-rdo { position: absolute; opacity: 0; pointer-events: none; } 
.product .pd-sec1 .s1-wr { display: grid; grid-template-columns: minmax(0, 1fr) 64rem; gap: var(--s1-wr-gap); align-items: start; } 
.product .pd-sec1 .s1-gal { display: grid; grid-template-columns: var(--s1-thm-w) minmax(0, 1fr); gap: var(--s1-gal-gap); align-items: start; } 
.product .pd-sec1 .s1-thm { display: grid; gap: var(--s1-thm-gap); } 
.product .pd-sec1 .s1-tmb { display: block; overflow: hidden; border: 0.1rem solid transparent; border-radius: var(--s1-rd-sm); cursor: pointer; transition: border-color .2s ease, transform .2s ease; } 
.product .pd-sec1 .s1-tmb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } 
.product .pd-sec1 .s1-vw { position: relative; overflow: hidden; border-radius: var(--border-ra); background: #F8F4E8; aspect-ratio: 1 / 1.02; } 
.product .pd-sec1 .s1-img { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease; } 
.product .pd-sec1 .s1-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.product .pd-sec1 .s1-inf { padding-top: 0.6rem; } 
.product .pd-sec1 .s1-tt { margin: 0 0 var(--s1-tt-mb); color: var(--s1-tt-c); font-family: var(--font-fm-gg), serif; font-size: 3rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; word-break: keep-all; } 
.product .pd-sec1 .s1-ds { margin-bottom: var(--s1-ds-mb); color: var(--s1-ds-c); font-family: "Pretendard", sans-serif; font-size: 2rem; font-weight: 400; line-height: 1.9; letter-spacing: -0.03em; word-break: keep-all; } 
.product .pd-sec1 .s1-ds p { margin: 0; } 
.product .pd-sec1 .s1-ds p + p { margin-top: 0.8rem; } 
.product .pd-sec1 .s1-div { height: 0.1rem; margin-bottom: var(--s1-div-mb); background: #B9B9B9; } 
.product .pd-sec1 .s1-sub { margin: 0 0 var(--s1-sub-mb); color: var(--s1-sub-c); font-family: "Pretendard", sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1.4; } 
.product .pd-sec1 .s1-spc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1-spc-gap-y) var(--s1-spc-gap-x); margin: 0; padding: 0; list-style: none; } 
.product .pd-sec1 .s1-spi { display: flex; align-items: center; gap: 1.6rem; min-height: var(--s1-spi-h); padding: 0 var(--s1-spi-px); border: 0.1rem solid var(--s1-spi-c); border-radius: 0.6rem; box-sizing: border-box; } 
.product .pd-sec1 .s1-spi-ic { display: block; flex: 0 0 4rem; width: 4rem; height: 4rem; padding: 0.9rem; border-radius: 50%; background: #24462F; box-sizing: border-box;overflow: visible;} 
.product .pd-sec1 .s1-spi strong { color: var(--s1-spi-c); font-family: "Pretendard", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; } 
.product .pd-sec1 .s1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; width: 100%; min-height: var(--s1-btn-h); margin-top: var(--s1-btn-mt); border-radius: var(--s1-btn-rd); background: var(--s1-btn-bg); color: #fff; font-family: "Pretendard", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; text-decoration: none; } 
.product .pd-sec1 .s1-btn-ic { width: 3rem; height: 3rem; } 
.product .pd-sec1 .s1-btn:hover { background: var(--s1-btn-bg); color: #fff; } 
.product .pd-sec1 .s1-rdo:nth-of-type(1):checked ~ .s1-wr .s1-vw .s1-img:nth-child(1),
.product .pd-sec1 .s1-rdo:nth-of-type(2):checked ~ .s1-wr .s1-vw .s1-img:nth-child(2),
.product .pd-sec1 .s1-rdo:nth-of-type(3):checked ~ .s1-wr .s1-vw .s1-img:nth-child(3),
.product .pd-sec1 .s1-rdo:nth-of-type(4):checked ~ .s1-wr .s1-vw .s1-img:nth-child(4),
.product .pd-sec1 .s1-rdo:nth-of-type(5):checked ~ .s1-wr .s1-vw .s1-img:nth-child(5) { opacity: 1; visibility: visible; } 

.product .pd-sec1 .s1-rdo:nth-of-type(1):checked ~ .s1-wr .s1-thm .s1-tmb:nth-child(1),
.product .pd-sec1 .s1-rdo:nth-of-type(2):checked ~ .s1-wr .s1-thm .s1-tmb:nth-child(2),
.product .pd-sec1 .s1-rdo:nth-of-type(3):checked ~ .s1-wr .s1-thm .s1-tmb:nth-child(3),
.product .pd-sec1 .s1-rdo:nth-of-type(4):checked ~ .s1-wr .s1-thm .s1-tmb:nth-child(4),
.product .pd-sec1 .s1-rdo:nth-of-type(5):checked ~ .s1-wr .s1-thm .s1-tmb:nth-child(5) { border-color: #24462F; } 

.product .page9 .pd-sec1 .s1-spc ,
.product .page8 .pd-sec1 .s1-spc ,
.product .page7 .pd-sec1 .s1-spc ,
.product .page4 .pd-sec1 .s1-spc { grid-template-columns: auto; } 

@media screen and (max-width: 1600px){
 .product .pd-sec1 .s1-gal { gap: 1rem; grid-template-columns: 1fr; } 
 .product .pd-sec1 .s1-vw { order: 1; } 
 .product .pd-sec1 .s1-thm { order: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 8.8rem)); justify-content: start; gap: 1rem; } 
 .product .pd-sec1 .s1-wr { grid-template-columns: minmax(0, 1fr) 56rem; } 
 }
@media screen and (max-width: 1280px){
 .product .pd-sec1 { --s1-wr-gap: 3.6rem; --s1-thm-w: 10rem; } 
 .product .pd-sec1 .s1-wr { grid-template-columns: minmax(0, 1fr) 46rem; } 
 }
@media screen and (max-width: 1024px){
 .product .pd-sec1 { --s1-pt: 6rem; --s1-pb: 8rem; --s1-tt-mb: 2.8rem; --s1-ds-mb: 3.6rem; --s1-div-mb: 3rem; --s1-btn-mt: 3.6rem; --s1-gal-gap: 1.8rem; --s1-thm-gap: 1.2rem; } 
 .product .pd-sec1 .s1-wr { grid-template-columns: 1fr; } 
 
 .product .pd-sec1 .s1-inf { padding-top: 0; } 
 }
@media screen and (max-width: 768px){
 .product .pd-sec1 { --s1-gal-gap: 1.6rem; --s1-thm-w: 100%; --s1-thm-gap: 1rem; --s1-spc-gap-x: 1.2rem; --s1-spc-gap-y: 1.2rem; --s1-spi-px: 1.6rem; --s1-spi-h: 6.8rem; } 
 .product .pd-sec1 .s1-vw { aspect-ratio: auto; width: 100%; height: 46rem; } 
 
 .product .pd-sec1 .s1-tt { margin-bottom: 1rem; font-size: 2.5rem;letter-spacing: 0; } 
 .product .pd-sec1 .s1-ds { font-size: 1.8rem; } 
 .product .pd-sec1 .s1-ds p br {display: none;} 
 .product .pd-sec1 .s1-sub { font-size: 2.1rem; } 
 .product .pd-sec1 .s1-spi strong,
 .product .pd-sec1 .s1-btn { font-size: 1.8rem; } 
 .product .pd-sec1 .s1-spc { grid-template-columns: 1fr; gap: 1rem; } 
 }
 @media screen and (max-width: 576px){
   .product .pd-sec1 .s1-vw {height: 33rem;}
 }

 /* page2 - sec2 check point (공통) */
.product .pd-sec2 { --s2c-pt: 7rem; --s2c-pb: 8rem; --s2c-tt-mb: 3rem; --s2c-col-gap: 3rem; --s2c-row-gap: 2rem; --s2c-card-min-h: 26rem; --s2c-card-px: 2.8rem; --s2c-card-pt: 2.8rem; --s2c-card-pb: 2.8rem; --s2c-card-rd: 2rem; --s2c-card-bg: #E4E8E5; --s2c-nm-size: 2.4rem; --s2c-ds-size: 2rem; --s2c-line-mt: 8rem; --s2c-line-color: #24462F; } 
.product .pd-sec2 .s2c-wr { width: 100%; } 
.product .pd-sec2 .s2c-tt { margin: 0 0 var(--s2c-tt-mb); color: #332F2D; font-family: var(--font-fm-gg), serif; font-size: 3rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; } 
.product .pd-sec2 .s2c-ls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2c-row-gap) var(--s2c-col-gap); margin: 0; padding: 0; list-style: none; } 
.product .pd-sec2 .s2c-it { display: flex; flex-direction: column; justify-content: space-between; min-height: var(--s2c-card-min-h); padding: var(--s2c-card-pt) var(--s2c-card-px) var(--s2c-card-pb); border-radius: var(--border-ra); background: var(--s2c-card-bg); box-sizing: border-box; } 
.product .pd-sec2 .s2c-nm { display: block; color: #24462F; font-family: "Pretendard", sans-serif; font-size: var(--s2c-nm-size); font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; } 
.product .pd-sec2 .s2c-ds { margin: 0; color: #424242; font-family: "Pretendard", sans-serif; font-size: var(--s2c-ds-size); font-weight: 700; line-height: 1.6; letter-spacing: -0.03em; text-align: right; word-break: keep-all; } 
.product .pd-sec2 .s2c-line { height: 0.1rem; margin-top:var(--sec-box-pd); background: var(--s2c-line-color); } 
@media screen and (max-width: 1280px){
 .product .pd-sec2 { --s2c-col-gap: 2rem; --s2c-card-min-h: 23rem; --s2c-card-px: 2.2rem; --s2c-card-pt: 2.2rem; --s2c-card-pb: 2.2rem; } 
 }
@media screen and (max-width: 1024px){
 .product .pd-sec2 { --s2c-pt: 6rem; --s2c-pb: 7rem; --s2c-tt-mb: 3rem; --s2c-line-mt: 6rem; } 
  }
@media screen and (max-width: 786px){
 .product .pd-sec2 { --s2c-card-min-h: 15rem; --s2c-nm-size: 2rem; --s2c-ds-size: 1.7rem; --s2c-line-mt: 4rem; } 
 .product .pd-sec2 .s2c-ls { gap: 1rem; grid-template-columns: 1fr; } 
 .product .pd-sec2 .s2c-tt {margin-bottom: 2rem;}
 .product .pd-sec2 .s2c-ds {text-align: left;}
 }

/* page2 - sec3 이럴때 드셔보세요(공통) */
.product .pd-sec3 { --s3-pt: 7rem; --s3-pb: 8rem; --s3-col-gap: 7rem; --s3-tt-mb: 5.4rem; --s3-ls-gap: 4rem; --s3-it-gap: 2.2rem; --s3-ic-size: 8rem; --s3-ic-img: 4.2rem; --s3-ic-bg: #D7DEDA; --s3-nm-mb: 0.8rem; --s3-line-mt: 6.4rem; --s3-line-color: #24462F; padding-top: 0 !important; } 
.product .pd-sec3 .s3-wr { display: grid; grid-template-columns: 52rem minmax(0, 1fr); gap: var(--s3-col-gap); align-items: center; padding-top:var(--sec-box-pd); } 
.product .pd-sec3 .s3-lf { min-width: 0; } 
.product .pd-sec3 .s3-tt { margin: 0 0 var(--s3-tt-mb); color: #332F2D; font-family: var(--font-fm-gg), serif; font-size: 3rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; } 
.product .pd-sec3 .s3-ls { display: grid; gap: var(--s3-ls-gap); margin: 0; padding: 0; list-style: none; } 
.product .pd-sec3 .s3-it { display: grid; grid-template-columns: var(--s3-ic-size) minmax(0, 1fr); gap: var(--s3-it-gap); align-items: start; } 
.product .pd-sec3 .s3-ic { display: flex; align-items: center; justify-content: center; width: var(--s3-ic-size); height: var(--s3-ic-size); border-radius: 50%; background: var(--s3-ic-bg); } 
.product .pd-sec3 .s3-ic img { display: block; width: var(--s3-ic-img); height: var(--s3-ic-img); } 
.product .pd-sec3 .s3-nm { display: block; margin-bottom: var(--s3-nm-mb); color: #24462F; font-family: "Pretendard", sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; } 
.product .pd-sec3 .s3-ds { margin: 0; color: #424242; font-family: "Pretendard", sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 1.6; letter-spacing: -0.03em; word-break: keep-all; } 
.product .pd-sec3 .s3-rg { margin: 0; } 
.product .pd-sec3 .s3-rg img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 2rem; } 
.product .pd-sec3 .s3-line { height: 0.4rem; margin-top: var(--sec-box-pd); background: var(--s3-line-color); } 
@media screen and (max-width: 1280px){
 .product .pd-sec3 { --s3-col-gap: 4rem; } 
 .product .pd-sec3 .s3-wr { grid-template-columns: 46rem minmax(0, 1fr); } 
 }
@media screen and (max-width: 1024px){
 .product .pd-sec3 { --s3-pt: 6rem; --s3-pb: 7rem; --s3-tt-mb: 4rem; --s3-ls-gap: 3rem; --s3-line-mt: 5rem; } 
 .product .pd-sec3 .s3-wr { grid-template-columns: 1fr; } 
 }
@media screen and (max-width: 786px){
 .product .pd-sec3 { --s3-col-gap: 2.4rem; --s3-ls-gap: 2.4rem; --s3-it-gap: 1.6rem; --s3-ic-size: 6.8rem; --s3-ic-img: 3.4rem; } 
 .product .pd-sec3 .s3-tt { margin-bottom: 2rem; font-size: 2.5rem; } 
 .product .pd-sec3 .s3-nm,
 .product .pd-sec3 .s3-ds { font-size: 1.8rem; } 
 }

/* page2 - sec4 another product slider (common) */
.product .pd-sec4 { --s4-pt: 7rem; --s4-pb: 8rem; --s4-tt-mb: 4rem; --s4-gap: 3rem; --s4-card-w: 47rem; --s4-rd: 2rem; --s4-dur: 42s; padding-top: var(--sec-box-pd) !important; } 
.product .pd-sec4 .s4-tt { margin: 0 0 var(--s4-tt-mb); color: #332F2D; font-family: var(--font-fm-gg), serif; font-size: 3rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; } 
.product .pd-sec4 .s4-marq { position: relative; } 
.product .pd-sec4 .s4-vp { overflow: hidden; } 
.product .pd-sec4 .s4-trk { display: flex; width: max-content; gap: var(--s4-gap); animation: s4Marq var(--s4-dur) linear infinite; will-change: transform; } 
.product .pd-sec4 .s4-marq.is-stop .s4-trk { animation-play-state: paused; } 
.product .pd-sec4 .s4-ls { display: flex; gap: var(--s4-gap); margin: 0; padding: 0; list-style: none; } 
.product .pd-sec4 .s4-it { flex: 0 0 var(--s4-card-w); width: var(--s4-card-w); } 
.product .pd-sec4 .s4-link { display: block; position: relative; overflow: hidden; border-radius: var(--s4-rd); text-decoration: none; color: #fff; } 
.product .pd-sec4 .s4-link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%); } 
.product .pd-sec4 .s4-img { display: block; } 
.product .pd-sec4 .s4-img img { display: block; width: 100%; aspect-ratio: 1.49 / 1; object-fit: cover; transition: transform .4s ease; } 
.product .pd-sec4 .s4-link:hover .s4-img img { transform: scale(1.04); } 
.product .pd-sec4 .s4-nm { position: absolute; left: 2.4rem; bottom: 2rem; z-index: 1; color: #fff; font-family: "Pretendard", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; } 
@keyframes s4Marq { 
 from { transform: translate3d(0, 0, 0); } 
 to { transform: translate3d(calc(-50% - (var(--s4-gap) / 2)), 0, 0); } 
 }
@media screen and (max-width: 1280px){
 .product .pd-sec4 { --s4-card-w: 39rem; --s4-gap: 2rem; } 
 }
@media screen and (max-width: 768px){
 .product .pd-sec4 { --s4-pt: 6rem; --s4-pb: 7rem; --s4-tt-mb: 3rem; --s4-card-w: 30rem; --s4-dur: 32s; } 
 .product .pd-sec4 .s4-tt { font-size: 2.5rem; } 
 .product .pd-sec4 .s4-nm { left: 1.8rem; bottom: 1.6rem; font-size: 1.8rem; } 
 }