@charset "utf-8";
/********** 공통사항 **********/
.mainBannerPoint{width:fit-content;}
.point{background-size:100% 100% !important}

/********** popup **********/
.popup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.haoPopup{position:fixed; inset:0; z-index:9999; display:none;}
.haoPopup[aria-hidden="false"]{display:block;}
.haoPopupDim{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);}
.popup{width:min(90vw,520px); overflow:hidden;}
.haoPopupImg{display:block; width:100%; height:auto; -webkit-user-drag:none; user-select:none;}
.today,.close{cursor:pointer;}


/********** header **********/
header{left:0; top:0; overflow-y:hidden;  background: linear-gradient(to bottom,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 100%);}

/********** mainPopup ***********/
.popupBox{background:rgba(0,0,0,0.5);left:0;top:0; z-index: 99999999999;display:none}
.popupBtnBox button{background:transparent;cursor: pointer;}
.popupSwiper{width:100%}
.popupSwiper .swiper-slide{overflow:hidden; line-height: 0;}
.popupSwiperBtnBox button{background:transparent; border:1px solid #f7f8f8; cursor: pointer;}
.popupSwiperBtnBox span{border:1px solid #f7f8f8}
#popupPrev span{border-width:0px 0px 1px 1px; transform:rotate(45deg);left:2px}
#popupNext span{border-width:1px 1px 0px 0px; transform:rotate(45deg); left:-2px}

/********** mainBanner **********/
.mainBanner{background:url('/img/mainBanner.jpg')center center no-repeat; background-size:cover}
.mainBannerPoint{border-top:3px solid #E8C396; border-bottom:3px solid #E8C396; }
.mainBannerPoint p{color:#E8C396}
.mainBanner .pointP2{text-shadow: 0 0 8px rgba(0,0,0,0.8);}
.mainBannerCnt{background:url('/img/mainTxtBox.svg')center center no-repeat;background-size:100% 100%}

/********** point **********/
.intro{background:url('/img/pointBg.jpg')center center no-repeat; background-size: cover;}
.intro .point{background:url('/img/labelWhite.svg')center center no-repeat}
.introCnt1 {left:0%; top:0;}
.introCnt2 {right:0%; top:20px;}
.introCnt3 {top:0%;}
.introCnt4 {bottom:-80%;right:0}
.introTxt {text-shadow:0 0 8px rgba(170, 37, 10, 1);}


/********** brand **********/
.brand{background:url('/img/paperBg.jpg')center center no-repeat; background-size:cover}
.brand .point{background:url('/img/labelRed.svg')center center no-repeat}
.brand .wpA{right:0; bottom:0}
.brandBgIcon1 {top:0; left:0;}
.brandBgIcon2 {bottom:0; right:0;}
.brandBoxLine {border:2px solid #AF6D47;}


/********** product **********/
.product .point{background:url('/img/labelWhite.svg')center center no-repeat}
.productMenu{border-top:4px solid #FFFFFF; border-bottom:4px solid #FFFFFF; width:fit-content}
.productCnt{width:calc(33.3333% - 16px)}
.product .wpA{right:0; bottom:0}
.productBgIcon {right:0;}
.productCntBg {background:url('/img/menuBg.jpg'); background-position:center center; background-size:cover;}
.productLine {border-bottom:2px solid #26272B;}
.productBgIcon {bottom:0; right:0;}


/********** process(신규) **********/
.menuSwiper .swiper-wrapper{transition-timing-function: linear !important; will-change: transform;}
.menuSwiper .swiper-slide{width: auto; padding: 0; box-sizing: border-box;}
.menuSwiper .swiper-slide img{display:block; width:100%; height:auto; border-radius:12px;}
.menuSwiper .swiper-slide{ width: calc((100vw - 24px*3) / 4.5); margin-right: 40px;}
@media (max-width: 1024px){.menuSwiper .swiper-slide{width: calc((100vw - 16px*1) / 2.5);margin-right: 32px;}}
@media (max-width: 768px){.menuSwiper .swiper-slide{width: calc(100vw / 1.5);margin-right: 16px;}}
.menuSwiper .swiper-slide:last-child { margin-right: 0; }
  

/********** process(이전) **********/
.process{background:url('/img/stepBg.jpg')center center no-repeat; background-size:cover}
.process .point{background:url('/img/labelRed.svg')center center no-repeat}
.processCnt{width:calc(25% - 60px)}
.processIcon{width:100%; border:1px solid #C8986F;}

/********** benefit **********/
.benefit {background:url('/img/benefitBg.jpg')center center no-repeat; background-size:cover}
.benefit .point{background:url('/img/labelWhite.svg')center center no-repeat}
.benefitImg{width:calc(33.333333% - 16px); box-shadow:inset 0 0 12px 6px rgba(0,0,0,.5),0 0 16px 0 #F5340D;}
  
/********** price **********/
.price .point{background:url('/img/labelWhite.svg')center center no-repeat}
.tableBg{border:1px solid #91949F;}
.tableBg tbody td{border-bottom:1px solid #E9E9EC; border-left:1px solid #E9E9EC;}
.pricetableline {border-left: 1px solid #E9DAD5;}


/********** simulation **********/
.simulation{background:url('/img/simulationBg.jpg')center center no-repeat; background-size:cover}
.simulationCnt {background-color: rgba(38, 39, 43, 0.8); border:1px solid #5D606C;}
.simulationBg {background:#9D0000;}
.simulationTable tbody tr td{border-top:1px solid #91949F;}

/********** place **********/
.placeTit .point{background:url('/img/labelWhite.svg')center center no-repeat}
.placeSwiperCustom .swiper-slide{height: auto;box-sizing: border-box;}
/* 카드 컨테이너: 세로 플렉스로 변경 (JS가 높이를 맞춰줌) */
.placeSwiperCustom .swiper-slide > div.placeBoxLine{display: flex;flex-direction: column;box-sizing: border-box;height: auto; }
.placeSwiperCustom .swiper-slide > div.placeBoxLine > a:last-of-type{margin-top: auto;}
.placeSwiperCustom .swiper-slide > img.placeBoxLine{display:block;width:100%;height:auto;}
  

/********** contact **********/
.checkBoxLine {border:1px solid #26272B !important;}
input[type="text"]::placeholder, input[type="number"]::placeholder, textarea::placeholder{ letter-spacing: -0.05em; font-family:'SUIT', sans-serif; color:#9091a0}
.contact{background:url('/img/paperBg.jpg')center center no-repeat; background-size:cover}
.contact .point{background:url('/img/labelWhite.svg')center center no-repeat}
.shopChoice input[type="radio"]{left:-99999px}
.shopChoice input[type="radio"] + label{border:1px solid #fefefe; background:#D9DADE; transition: ease-in-out 0.3s; cursor: pointer;}
.shopChoice input[type="radio"]:checked + label{border:1px solid #B22222; background:#B22222; transition: ease-in-out 0.3s; color:#fff;}
.contact textarea{resize:none; box-sizing: border-box;}
.contact input[type="checkbox"]{left:-9999px;}
.contact input[type="checkbox"] + label{cursor: pointer; }
.contact input[type="checkbox"] + label:before{width:20px; height:20px;  content:''; transition: ease-in-out 0.3s;
    margin-right:8px;background:url('/img/chkOff.svg')center center no-repeat; background-size:cover;display:block}
.contact input[type="checkbox"]:checked + label:before{background:url('/img/chkOn.svg')center center no-repeat;}
.policyBox a{border-bottom:1px solid #fefefe}
.onlineContact input, select, textarea{border:1px solid #B8BAC1;}
.inputStyleNo {border:none !important;}
.underLine {text-decoration: underline;text-decoration-thickness: 1px;text-decoration-color: currentColor;text-decoration-skip-ink: auto;}
.contactBgIcon1 {left:0; top:0;}
.contactBgIcon2 {right:0; bottom:0;}

/********** login **********/
.loginBg {background:url('/img/paperBg.jpg')center center no-repeat; background-size:cover}
.loginFieldset input[type="text"], .loginFieldset input[type="password"]{border:1px solid #E9E9EC}
.loginBox .wpA{right:0; bottom:0; mix-blend-mode: multiply;}

.loginAuto > input[type="checkbox"]{position:absolute;}
.loginAuto > input[type="checkbox"] + label{width:100%; padding-left:24px; position:relative; }
.loginAuto > input[type="checkbox"] + label:before{content:''; background:#fff; width:16px; height:16px; border:1px solid #91949f; border-radius:2px; display:block;
position:absolute; left:-0; top:50%; transform: translateY(-50%);}
.loginAuto > input[type="checkbox"]:checked + label:after{content:''; width:5px; height:8px; border-right:1px solid #222; border-bottom:1px solid #222;
position:absolute; left:6px; top:46%; transform:translateY(-50%) rotate(45deg)}
.loginAuto > input[type="checkbox"]:checked + label:before{background:#fefefe}
#login_auto_login{left:-9999px}
.loginBoxLine {border:1px solid #D9DADE;}

/********** memberMenu **********/
.memberMenu .wpA{right:0; bottom:0; mix-blend-mode: multiply;}
.memberMenuBox{box-shadow: 12px 12px 0 #156d43;}

/********** order list **********/
.hiddenCheck{left:-99999px}
.boardListBox{overflow-x:auto}
.boardListBox table {min-width:1200px;}
.boardListBox table a{width:fit-content}
.boardListBox table tr td{border-top:1px solid #d9dade; border-bottom:1px solid #d9dade; border-right:1px solid #d9dade}
.boardListBox table tr td:nth-last-child(1){border-right:0}
.writeBtn{width:fit-content}
.orderListInput, .orderListSelect{border:1px solid #d9dade}
.orderListSelect{background:url('https://stunningw.com/img/arrow.svg') no-repeat #f7f8f8 !important; background-position:94% center !important;
background-size:12px 12px!important}
.meat-item td{border:1px solid #d5d5d5}
.meat-item th {border:1px solid #d5d5d5}
/********** order write **********/
.categoryBtn{background:transparent;transition: ease-in-out 0.3s; cursor: pointer;}
.categoryBtn.active{background:#26272b; color:#fefefe}
.productItem{border:2px solid transparent; transition: all 0.1s; cursor: pointer;}
.productItem.active{border:2px solid #222}
#orderModal{background:rgba(0, 0, 0, 0.5); position:fixed; z-index: 999; left:0; top:0;}

.cartBox{position:relative; max-height:60dvh; overflow-y:auto}
.countWrap, .cartQty{overflow:hidden}
.qtyInput, .cartQty input{border-top:1px solid #d9dade; border-bottom:1px solid #d9dade; border-radius: 0 !important;}
.cartItems, .paySaveBox{border-top:1px solid #d9dade}
.cartDel{border:1px solid #eeeef0; position:relative;}
.cartDel:before, .cartDel:after{content:''; display:block; width:1px; height:12px; background:#5d606c;position:absolute; left:50%; top:50%;}
.cartDel:before{transform:translate(-50%, -50%)rotate(45deg)}
.cartDel:after{transform:translate(-50%, -50%)rotate(-45deg)}

.modalOverlay{ background:rgba(0,0,0,0.8);  top:0; left:0; }
.modalWindow{max-height: 80dvh; overflow-y:auto;}
.etcTextarea{resize:none;border:none; box-sizing: border-box;}
.etcTextarea::placeholder{color:#91949f;  }
.orderSubmitBtn button{cursor: pointer;}
.modalCloseBtn{top:64px;right:54px; cursor: pointer;}
.modalCloseBtn:before, .modalCloseBtn:after{content:''; display:block; width:2px; height:12px; background:#222;position:absolute; left:50%; top:50%;}
.modalCloseBtn:before{transform:translate(-50%, -50%)rotate(45deg)}
.modalCloseBtn:after{transform:translate(-50%, -50%)rotate(-45deg)}

.paySaveBox input[type="radio"]{left:-9999px;}
.paySaveBox input[type="radio"] + label{border:1px solid #b8bac1; cursor: pointer; transition: ease-in-out 0.3s;}
.paySaveBox input[type="radio"]:checked + label{border:1px solid #222; color:#fefefe; background:#222}

/********** order view **********/
.listBtn{width:fit-content; border:1px solid #d9dade;}

/********** product edit **********/
.unitSelect, .priceInput, .vatInput, .baseInput{ border:1px solid #d9dade}
.priceInput, .vatInput, .baseInput{background:#F7F8F8}
.unitSelect{background:url('https://stunningw.com/img/arrow.svg') no-repeat #F7F8F8 !important;
background-position: 94% center !important;background-size: 12px 12px!important;}

/********** online **********/
.onlineLists tr td {border-left:1px solid #5D606C; border-bottom:1px solid #5D606C;}
.borderleftno {border-left:none !important;}
/********** online view **********/
.onlineView tr td{border:1px solid #5D606C; border-right:0; border-left:0}
.onlineView tr th{border:1px solid #5D606C; border-right:0; border-left:0}
.styleN {background:none; border:0;}

/********** policy **********/
.boxBottomLine {border-bottom:1px solid #26272b}
.policyTp {border-bottom:1px solid #D9DADE;}

.pg a, .pg span, .pg strong{width:32px; height:32px; background:transparent; display:flex; align-items: center; 
    justify-content: center; border-radius:4px; margin:0 8px; line-height: 1em;}
.pg strong{background:#eeeef0}

/********** pay write **********/
.payListTbl {overflow-x:auto;}
.payListTbl table {min-width:1200px;}
.payListTbl td, .payWirteTbl td{border:1px solid #d9dade;}
.payListTbl select, .payWirteTbl select{background:url('https://stunningw.com/img/arrow.svg') no-repeat #eeeef0 !important;
background-position:94% center !important; background-size:12px 12px!important;}
.payListTbl select, .payWirteTbl select, .payWirteTbl input{border:1px solid #d9dade}