/* BASIC css start */
html, body {
  overscroll-behavior: none;  height: 100%;
}

footer {margin:0 !important; background: #f7f7f7; z-index: 200;
        position: relative;}

:root {
  --event-white: #F7F7F5;
  --event-black: #272727;
  --event-gray: #666;
  --event-main: #006c5e;
}
html {
  scroll-behavior: smooth;
}

#overlay_layer {display:none;}
.detail {background:linear-gradient(to top,#fff,#efebea); padding-top: 60dvh;}
.detail .section h {font-size: 2rem; font-weight: 700; color:var(--event-black);}
.detail .section p {font-size: 1.2rem; font-weight: 400; color:var(--event-gray); margin-top:11px;}
.detail .section {padding-bottom:10rem; text-align:center; z-index: 200; position: relative; background: #f7f7f7;}
.detail .title {padding:4rem 0;}

#wrap01 {position: fixed; width:100%; top: 0px; height: 60dvh; z-index:10;}
#wrap01 .icon {position: absolute; top: 20px; left: 20px; z-index: 20;}
#wrap01 .icon img {filter: invert(1);}
#wrap01 .title {position:relative; background: url('//lilu2012.img11.kr/song_re/page/banner_01.jpg'); background-size:cover; background-position: center;  height:60dvh; color:var(--event-white); text-align:center; align-content:center;}
#wrap01 .title::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); z-index: 0;}
#wrap01 .title h { position: relative; z-index: 1; font-size: 2.5rem; font-weight: 700;}
#wrap01 .title p { position: relative; z-index: 1; font-size: 1.5rem; font-weight: 400;}

#wrap02 {background:var(--event-main); position:sticky; top:0; z-index:22;}
#wrap02 .event-tab {width: 1200px; max-width:100%; margin: 0 auto; font-size: 1.2rem; display: flex; text-align: center; height: 60px; align-items: center;}
#wrap02 .event-tab a {flex:0 25%; color:var(--event-white);}

#wrap03 {}
#wrap03 .thumb {width:40%; margin:0 auto;}
#wrap03 .thumb img {width:100%;}
#wrap03 .description {color:var(--event-gray); font-size:1.2rem; line-height: 2.8rem; margin:2rem 0;}
#wrap03 .description span {color:var(--event-main); font-weight: 700; font-size: 1.6rem;}

#wrap04{overflow: hidden;}
#wrap04 .slider{width:330px; max-width:70%; margin:20px auto; position:relative; height:600px; display:flex; flex-direction:column; justify-content:flex-start;}
#wrap04 .slides{flex:1; display:flex; transition:transform .7s cubic-bezier(.22,.61,.36,1);}
#wrap04 .slide{min-width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:.4; transform:scale(.92); transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .4s;}
#wrap04 .slide.active{opacity:1; transform:scale(1);}
#wrap04 .thumb {width:250px; max-width:70%; aspect-ratio:1/1; overflow:hidden; border-radius:30px; transition:width .45s cubic-bezier(.22,.61,.36,1),aspect-ratio .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1); cursor:pointer;}
#wrap04 .thumb img{width:100%; height:100%; object-fit:cover;}
#wrap04 .slide.active .thumb{width:330px; max-width:100%; aspect-ratio:auto; transform:scale(1.05); box-shadow: 0 8px 34px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); border: 2.5px solid #e1e1e1c9;}
#wrap04 .name{text-align:center; font-weight:600; font-size: 1rem; margin-top: 1px;}
#wrap04 .dsc{display:none; text-align:center;font-size:14px; opacity:.8; font-size: 1rem;}
#wrap04 .slide.active .dsc {display:block;}
#wrap04 .slide.active .name {margin-top:20px; font-size:1.3rem;}
#wrap04 .progress-wrap{display:flex;align-items:center;gap:10px;margin-top:12px;}
#wrap04 .progress-bar{width:100%;height:4px;background:#ccc;position:relative;border-radius:2px;overflow:hidden;}
#wrap04 .progress{height:100%;width:10%;background:#000;transition:width .4s;}
#wrap04 .page-num{min-width:50px;font-size:14px;}
#wrap04 .slide .go-first{margin-top:8px; padding:6px 14px; font-size:13px; border-radius:20px; border:1px solid #000; background:#fff; cursor:pointer; transition:.2s; display:none;}
#wrap04 .slide .go-first:hover{ background:#000; color:#fff;}
#wrap04 .slide.active .go-first {display:block;}


#wrap05 .discount-card {width: 1000px; max-width:100%; display:flex; margin: 55px auto 0; gap:4%;}
#wrap05 .discount-card .product-thumb {flex:0 45%; aspect-ratio: 1 / 1; }
#wrap05 .discount-card .product-info {flex:0 50%; text-align: left; align-content: center;}
#wrap05 .discount-card .product-info .product-title {font-size: 1.5rem; font-weight: 600; color: var(--event-black); position:relative;}
#wrap05 .discount-card .product-info .product-title .download { font-size: 1rem; border: 1px solid #ccc; padding: 4px 10px; font-weight: 400; margin-left: 11px; right: 0; top: 1px; position: absolute; transition: color 0.3s ease; cursor: pointer;}
#wrap05 .discount-card .product-info .product-title .download:hover {background:var(--event-black); color:var(--event-white); border-color:var(--event-black);}
#wrap05 .discount-card .product-info .product-title .download a {position:absolute; top:0; left:0; right:0; bottom:0;}
#wrap05 .discount-card .product-info .product-desc {font-size:1rem; color: var(--event-gray); margin: 10px 0;}
#wrap05 .discount-card .product-info .product-price {font-size:1rem; margin:5px 0 20px 0;}
#wrap05 .discount-card .product-info .product-price span {margin-right: 5px;}
#wrap05 .discount-card .product-info .product-price .per {font-size: 1.5rem; font-weight: 600; color: var(--event-main);}
#wrap05 .discount-card .product-info .product-price .price {font-size: 1.5rem; font-weight: 600;}
#wrap05 .discount-card .product-info .product-price .consumer {color: #d5d5d5;}
#wrap05 .product-thumb { position: relative; width: 100%;}
#wrap05 .thumb-slider { position: relative; width: 100%; overflow: hidden;}
#wrap05 .slides { display: flex; transition: transform 0.5s ease;}
#wrap05 .slides img { width: 100%; flex-shrink: 0; object-fit: cover;}
#wrap05 .dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;}
#wrap05 .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s;}
#wrap05 .dot.active { background: #fff; width: 20px; border-radius: 10px;}
.thumb-prev,
.thumb-next { transform: scaleX(0.5); position: absolute; top: 50%; transform: translateY(-50%); background: none; color: #b9adaa; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; z-index: 2; font-size: 30px; font-weight: 100;}
.thumb-prev { left: 0px; } 
.thumb-next { right: 0px; }
.benefit-box { width: 100%; max-width: 600px; padding: 30px; border: 1px solid #ddd; background: #fff;}
.benefit-list {list-style: none; padding: 0; margin: 0;}
.benefit-list li {display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1rem; color: #555;}
.divider { height: 1px; background: #e5e5e5; margin: 20px 0;}
.benefit-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 600; color: #0f6b5c; margin-bottom: 20px;}
.benefit-notice { background: #f5f5f5; padding: 18px 20px; border-radius: 12px; font-size: 14px; color: #888; line-height: 1.6;}


#wrap06 .faq-list {width: 1000px; max-width: 100%; margin: 0 auto; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa;}
#wrap06 .faq-list .faq-item {text-align: left; width: 100%; border-bottom: 1px solid rgb(230, 230, 230); align-content: center;}
#wrap06 .faq-list .faq-item:last-child {border:none;}
#wrap06 .faq-list .faq-item .faq-question {color: var(--event-black); width: 100%; text-align: left; border: none; background: none; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; font-weight: 300; padding:15px 10px;}
#wrap06 .faq-list .faq-item .faq-answer {width: 100%; font-size: 1rem; font-weight: 300; color: var(--event-gray); background: #f5f5f5; padding: 20px 10px; box-sizing: border-box;}
#wrap06 .faq-item .faq-question:after {content:"\2304"; margin-left: auto; transform: scaleY(0.6); color: #aaa;}
#wrap06 .faq-item.active .faq-question:after {transform: scaleY(-0.6);}
#wrap06 .faq-answer { display: none;}
#wrap06 .faq-item.active .faq-answer { display: flex; align-items: center; gap:8px;}
#wrap06 .faq-item strong {font-size:1.5rem; font-weight:700; margin-right:5px;}
#wrap06 .faq-item .faq-question strong {color:#ccc;}
#wrap06 .faq-item .faq-answer strong {color:#006c5e63;}



/* ¸ð¹ÙÀÏ */
@media (max-width: 767.98px) {
.detail .section h {font-size:1.8rem;}
.detail .section p {font-size:1.1rem;}
.detail .section {padding-bottom: 3rem;}
.detail .section {padding-left:1rem; padding-right:1rem;}
#wrap01 .title {}
#wrap02 .event-tab {font-size:1.1rem; padding:0 15px;}
#wrap03 .description {font-size:1.1rem; line-height:2.2rem;}
#wrap01 .title h {font-size:2rem;}
#wrap01 .title p {font-size:1.1rem;}
#wrap03 .thumb {width:100%;}
#wrap05 .discount-card {display:block; margin:0;}
#wrap05 .discount-card .product-info {margin-top:20px;}
#wrap05 .discount-card .product-info .product-title .download {top: 35px; letter-spacing: -1.3px; padding: 4px 10px; background: var(--event-black); color: #fff; border-color: var(--event-black);}
#wrap05 .discount-card .product-info .product-title {font-size:1.1rem;}
.benefit-box {padding:30px 20px;}
}
/* BASIC css end */