/* intro */
.intro{display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; width: 65%; min-width: 1100px; margin: auto; gap: 2rem; height: 95vh;}

.left-box a{border-radius: 1rem; overflow: hidden;}
/* 6개일때 */
.left-box:has(> :nth-child(6)){grid-template-columns: repeat(3,1fr);}
.left-box:has(> :nth-child(6))>div:first-of-type{grid-column: 1 / span 3;}
.left-box:has(> :nth-child(6))>div:nth-of-type(2){grid-column: 1 / span 2;}
.right-box{overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 1rem; padding: 2rem; background-color: #fff;}
.right-box h1 img{width: 40%; margin: auto;}
.intro-banner img{border-radius: 0.5rem;}

.intro-btns{display: flex; align-items: center; justify-content: center; gap: 10px; margin: 1rem auto;}
.intro-btns li a{display: inline-block; background-color: #eee; padding: 0.5rem 1rem; border-radius: 0.3rem;}
.intro-btns li a:hover{background-color: #333; color: #fff;}



.login-num {display: flex; align-items: center; justify-content: space-between; padding: 1rem; margin: 1rem auto; background: #fff; border-radius: 0.8rem; border: 1px solid #eee; box-shadow:0 2px 3px rgba(0,0,0,0.04)}
.login-num h4{font-size: 1.05rem;padding-left: 1rem;position: relative;}
.login-num h4::before{content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 5px;height: 1.2rem;border-radius: 3px;background-color: #8ec251;}
.login-num p{display: flex;align-items: center; gap: 1.5rem;}
.login-num span {position: relative;display: flex;align-items: center; gap: 0.5rem;}
.login-num span:first-child::after {content: ''; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); width: 1px; height: 1rem; background: #ddd;}
.login-num span u{font-size: 0.85rem; background-color: #444; color: #fff; text-decoration: none; padding: 2px 0.3rem; border-radius: 0.3rem;}
.login-num span b {font-size: 1.2rem;font-weight: 600;color: #8ec251;}

.intro-slide{ visibility: hidden; overflow: hidden; margin: 0 -0.5rem;}
.intro-slide.slick-initialized{visibility: visible;}
.intro-slide img{border-radius: 1rem;}
.intro-slide .slick-slide{ margin: 0 0.5rem;}

.intro-login {display: grid; grid-template-columns: 1fr 110px; gap: 2rem; align-items: center; background: #f9f9f9; border-radius: 0.8rem; padding: 1rem; border: 1px solid #eee; margin: 1rem auto;}
.login-info li {display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;}
.login-info li:last-child {margin-bottom: 0;}

.login-info input[type="text"],.login-info input[type="password"] {width: 70%; padding: 0.7rem; border-radius: 0.5rem; border: 1px solid #dcdcdc; background: #fff; transition: all .1s ease;}
.login-info input:focus { outline: none; border-color: #8ec251;}
.login-info label { font-size: 0.9rem; color: #777; white-space: nowrap;}
.login-btn {display: flex; flex-direction: column; gap: 0.5rem;}
.login-btn li {width: 100%;}
.login-btn button {width: 100%; border-radius: 0.5rem;border: none; font-weight: 600; padding: 0.7rem; transition: all .1s ease;}

.login-btn li:first-child button { background-color: #444;color: #fff;}
.login-btn li:first-child button:hover{background-color: #333;}
.login-btn li:last-child button {background-color: #8ec251; color: #fff;}
.login-btn li:last-child button:hover{background-color: #87b94d !important;}

/* main */
main{margin: 0.5rem auto;}
.main-full-slide{overflow: hidden; visibility: hidden;}
.main-full-slide.slick-initialized {visibility: visible;}
.main-full-slide a{border-radius: 0.8rem; overflow: hidden;}
.main-full-slide .slick-dots{position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem;}
.main-full-slide .slick-dots button{font-size: 0; background-color: rgba(255, 255, 255, 0.4); width: 0.7rem; height: 0.7rem; border-radius: 1rem; transition: 0.1s;}
.main-full-slide .slick-dots .slick-active button{background-color: #fff; width: 1.8rem;}
.m-main-full-slide{overflow: hidden; display: none; visibility: hidden;}
.m-main-full-slide.slick-initialized {visibility: visible;}
.m-main-full-slide a{border-radius: 0.8rem; overflow: hidden;}
.m-main-full-slide .slick-dots{position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.3rem;}
.m-main-full-slide .slick-dots button{font-size: 0; background-color: rgba(255, 255, 255, 0.4); width: 0.6rem; height: 0.6rem; border-radius: 1rem; transition: 0.1s;}
.m-main-full-slide .slick-dots .slick-active button{background-color: #fff; width: 1.2rem;}

.main-wrap{display: grid; grid-template-columns: repeat(10,1fr); width: 100%; gap: 1rem;}
.main-container{}
.main-container h2{font-size: 1.2rem; text-align: left;}
.main-container h2 small{float: right; color: #777; font-weight: 400; font-size: 0.9rem;}

#mc1{grid-column: 1 / span 4;}
#mc2{grid-column: 5 / span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;}
#mc3{grid-column: 7 / span 4; }
#mc4{grid-column: 1 / span 5;}
#mc5{grid-column: 6 / span 5;}
#mc6{grid-column: 1 / span 10;}
#mc7{grid-column: 1 / span 10; display: grid; grid-template-columns: repeat(4,1fr); gap: 0.8rem;}
#mc8{grid-column: 1 / span 5;}
#mc9{grid-column: 6 / span 5;}
#mc10{grid-column: 1 / span 10;}

/* #mc8,#mc9{border: 1px solid #8ec251; border-radius: 0.8rem;} */

#mc2 a,#mc7 a{border-radius: 0.5rem; overflow: hidden;}

#mc1,#mc3,#mc8,#mc9{text-align: left; border: 1px solid #eee; padding: 0.6rem 0.8rem; border-radius: 0.8rem;}
#mc1 ul,#mc3 ul{border-top: 2px solid #8ec251; margin-top: 0.5rem; padding-top: 0.6rem;}

#mc1 ul li{background-color: #f9f9f9; margin-bottom: 0.5rem; padding: 0.4rem;}
#mc1 ul b{font-weight: 400; background-color: #999; color: #fff; width: 16px; padding: 0.2rem; border-radius: 0.2rem; display: inline-block; font-size: 0.9rem; margin-right: 0.5rem;}
#mc1 ul li:nth-child(-n+3) b{background-color: #8ec251;}
#mc3 ul li{margin-bottom: 1rem;}
#mc3 ul li:last-child{margin-bottom: 0;}
#mc5 h2{margin-bottom: 1rem;}

.sale-item-tab{display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; position: relative; text-align: center;}
.sale-item-tab:after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #8ec251;}
.sale-item-tab li{background-color: #fff; color: #8ec251; font-weight: 500; border-radius: 0.5rem 0.5rem 0 0; padding: 0.5rem 0.8rem; cursor: pointer; background-color: #f0f7ea; min-height: 32px;}
.sale-item-tab li img{width: 1.2rem; display: none; vertical-align: top; margin-left: 1px;}
.sale-item-tab li:hover{background-color: #e9f3e1;}
.sale-item-tab li.active{background-color: #8ec251; border: 1px solid #8ec251; color: #fff; z-index: 2;}
.sale-item-tab li.active img{display: inline-block;}
.sale-item-slide{overflow: hidden; visibility: hidden; opacity: 0; height: 0;}
.sale-item-slide.slick-initialized {visibility: visible;}
.sale-item-slide .slick-track{display:flex;margin:0.5rem 0;}
.sale-item-slide .slick-slide{margin: 0 0.3rem; height:auto;}
.sale-item-slide.active{opacity: 1; height: auto;}
.sale-item-slide .slick-dots{display: flex; gap: 0.3rem; align-items: center; justify-content: center; margin-top: -0.5rem;}
.sale-item-slide .slick-dots button{font-size: 0; background-color: #ccc; width: 8px; height: 8px; border-radius: 1rem; transition: 0.1s;}
.sale-item-slide .slick-dots .slick-active button{background-color: #8ec251; width: 16px;}

.sale-item-list{border-radius:1rem; padding:0.6rem; transition:all .2s ease; height:100%; cursor: pointer; box-shadow: 0 0 3px rgba(0,0,0,0.06); overflow: hidden;}
.sale-item-list:hover{transform:translateY(-1px); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.sale-item-list ul{text-align: left; display:flex; flex-direction:column; height:100%; gap: 0.1rem;}
.si-img{aspect-ratio: 1 / 1; width: 100%; margin: 0 auto;}
.si-img img{object-fit: contain; border-radius:0.5rem; transition:transform .2s ease;}
.si-name{font-weight: 500; line-height: 1.2rem; word-break: break-word; overflow-wrap: anywhere;}
.si-ea{color: #999; font-size: 0.9rem; margin-bottom: 0.2rem;}
.si-price{margin-top:auto;}
.si-price span{font-size: 1.1rem; font-weight: 600;}
.si-price del{display: inline-block; color: #999; font-size: 0.9rem;}
.si-price p{font-size: 1.1rem; font-weight: 600;}
.si-price b{font-weight: 600; color: #da2727; padding-right: 5px;}

.no-item{text-align: center;display: none;}
.no-item.active{display: block;}
.no-item img{width: 4rem; margin: auto; margin-top: 5rem;}
.no-item p{margin-top: 0.5rem; margin-bottom: 2rem;}

.event-banner-wrap{display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px;}
.event-banner-wrap a{border-radius: 0.5rem; overflow: hidden;}

.youtube{height: 100%; border-radius: 0.5rem; overflow: hidden;}
.youtube iframe{width: 100%; height: 100%;}

.review-slide {margin: 0 -5px; text-align: left;}
.review-slide .slick-slide{margin: 0 5px;}
.review-slide h6{font-size: 1rem; margin: 0.7rem auto;}
.review-slide p{font-size: 0.9rem; max-height: 90px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2rem; line-clamp: 5; -webkit-line-clamp: 5; }

.recipe-slide{margin: 0 -10px;}
.recipe-slide .slick-slide{margin: 0 10px;}
.recipe-slide img{padding: 0.5rem;}
.recipe-slide p{border-top: 1px solid #333; padding-top: 0.5rem; word-break: break-all;}


/* 메인 팝업 */
.main-popup{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 40;}
.m-pop-content{display: flex;  align-items: center; justify-content: center;  flex-direction: column; height: 100%; width: fit-content; margin: auto;}
.m-pop-slide{display: flex; max-width: 1200px;}
.m-pop-btn{display: flex; justify-content: space-between; align-items: center; background-color: #333; width: 100%; padding: 0.5rem 1rem; color: #fff; margin-top: -4px;}
.m-pop-btn .close-btn{background-color: #111; padding: 0.5rem 0.7rem; border-radius: 0.3rem;}
#main_popup{margin-right: 5px;}


/* 반응형 */
@media screen and (max-width: 1500px){
  .sale-item-tab{gap: 5px;}
}
@media screen and (max-width: 1280px){
  .intro{min-width: 1000px; gap: 1rem;}

  #mc1{order: 1; grid-column: 1 / span 5;}
  #mc2{order: 4; grid-column: 8 / span 3;}
  #mc3{order: 2; grid-column: 6 / span 5;}
  #mc4{order: 3; grid-column: 1 / span 7; height: 27vw;}
  #mc5{order: 5; grid-column: 1 / span 10;}
  #mc6{order: 6;}
  #mc7{order: 7;}

  #mc1 ul b{width: 13px;}
  .review-slide p{line-clamp: 3; -webkit-line-clamp: 3;}
}

@media screen and (max-width: 1024px){
  .intro{grid-template-columns: 1fr; min-width: auto; width: 90%; height: auto; margin: 2rem auto;}
  .left-box{order: 2;}
  .right-box{order: 1;}
  .m-pop-slide{display: block; width: 300px;}
  #mc4{height: 35vw;}
  .m-pop-btn{margin-top: 0;}
}

@media screen and (max-width: 820px){
  .right-box{box-shadow: none; padding: 0;}

  #mc2{display: none;}
  #mc4{grid-column: 1 / span 10; height: 50vw;}
  #mc7{grid-template-columns: repeat(2,1fr);}
  .recipe-slide p{font-size: 0.9rem;}
}

@media screen and (max-width: 680px){
  .right-box h1 img{width: 60%;}
  .intro-login{grid-template-columns: 1fr; gap: 1rem;}
  .login-btn{flex-direction: row;}
  .login-num span b{font-size: 1.1rem;}

  .main-wrap{gap: 0.5rem;}
  .main-full-slide{display: none;}
  .m-main-full-slide{display: block;}

  #mc1{grid-column: 1 / span 10;}
  #mc3{grid-column: 1 / span 10;}
  #mc8,#mc9{grid-column: 1 / span 10; padding: 0.6rem;}
  #mc1 ul li:nth-of-type(n+4){display: none;}
  #mc3 ul li:nth-of-type(n+5){display: none;}

  .sale-item-list{padding: 0.4rem;}
  .sale-item-list ul{gap: 0.1rem;}
  .si-img img{width: 114%; margin-left: -7%;}
  .si-name{font-size: 0.9rem;}
  .si-ea{font-size: 0.8rem;}
  .si-price p{font-size: 1rem;}
  .si-price span{font-size: 1rem;}

  .event-banner-wrap{grid-template-columns:1fr;}
  /* 6개일때 */
  .event-banner-wrap:has(> :nth-child(6)){grid-template-columns: repeat(3,1fr);}
  .review-slide p{line-clamp: 2; -webkit-line-clamp: 2;}
  

}