@charset "utf-8";
header{background:rgba(0, 0, 0, 0.3)}


.popup{width:100dvw; height:100dvh; background:rgba(0, 0, 0, 0.6); position: fixed; z-index:999; left:0; top:0; display:flex; align-items: center; justify-content: center;}
.popLink{line-height: 0;}
.popContent{width:30dvw;}
.popupImg{border-radius: 20px 20px 0 0;}
.popContent img{width:100%}
.popBtn{width:-webkit-avable; display:flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding:12px 20px ; background:#fefefe; border-radius: 0 0 20px 20px;}
.popBtn p{cursor: pointer;}



.mainBanner{background-image: url(/img/mainBanner.jpg); background-size:cover; background-position:right;}
.mainFootBox{border-right: 1px solid #ccc;}
.mainFootTxt{bottom:10px; right:3dvw;}
.Benefit{background: linear-gradient(180deg, #FAFAFA, #FAEFEF);}
.reviewSlider{margin-left:5dvw; overflow: hidden;}
.listBox{border:1px solid #f9f9f9f9;}

.product_left{box-sizing: border-box; position: sticky; top:200px; height: fit-content; /* 콘텐츠에 맞는 높이 */    flex-shrink: 0; /* 크기 줄어들지 않도록 */}



/************** product ***************/
.tabs { background-color: #f4f4f4;  }
.tab {    flex: 1;   text-align: center;    cursor: pointer; background-color: #f4f4f4;   transition: background-color 0.3s, border-bottom 0.3s;  }
.tab.active {    background-color: #c12214;   color:#fff; }
.content {    display: none;  }
.content.active {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 1rem;   }
.item {    border: 1px solid #ddd;    border-radius: 5px;    text-align: center;}

.productBox{border:1px solid #ccc; border-radius: 8px; overflow: hidden;}

.faqCnt {  cursor: pointer;  transition: all 0.3s ease;}
.faqArrow:after {  content: '';  display: block;  width: 12px;  height: 12px;  border: 1px solid #222;  border-width: 0 2px 2px 0;  position: relative;  transform: rotate(45deg);  top: -5px;  transition: transform 0.3s ease;}
.faqAnswer {  height: 0;  overflow-y: hidden;  transition: height 0.3s ease;}
.faqCnt.active .faqArrow:after {  transform: rotate(-135deg); /* 화살표 위로 */  top: 0;}
.faqCnt.active .faqAnswer {  height: auto;  margin-top: 20px;}


/*************** online ***************/
.onlineModal{left:0; top:0; min-height:100dvh; }
.onlineInput{left:-9999px}
.onlineLabel{background:#eeeef0; cursor: pointer; color:#5d606c; transition: ease-in-out 0.3s;}
.onlineInput:checked + label{background:#c12214; color:#fefefe}

.onlineForm{min-height:100dvh; max-height:100dvh;overflow-y:auto}


.choiceInput{left:-99999px;}
.choiceLabel{border:1px solid #737784; transition: ease-in-out 0.2s; cursor: pointer;}
.choiceInput:checked + label, .choiceLabel:hover{border:1px solid #c12214; background:#c12214}
.choiceInput:checked + label p, .choiceLabel:hover p{color:#fefefe}

.onlineBtnBox{bottom:0dvh; left:0}
.onlineBtnBox > button {cursor: pointer; border:0}

.policyCheck{left:-999999px;}
.policyCheck + label{cursor: pointer;}
.policyCheck + label:before{content:'✓'; color:#d5d5d5; margin-right:12px; transition: ease-in-out 0.3s;width:26px; height:26px; display:flex; align-items: center; justify-content: center; line-height: 1; background:#eee; border-radius:4px}
.policyCheck:checked + label:before{color:#fefefe; background:#c12214}
.onlineBtn{cursor: pointer;}

.select{background:url('https://stunningw.com/img/arrow.svg') no-repeat #eeeef0 !important; background-position: 94% center !important; background-size:12px 12px!important}
.addressBtn{border:0; cursor: pointer;}