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

/********** popup **********/
.modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;}
  /* 팝업창 본체 */
  .modal {background: #fff;max-width: 400px; border-radius:12px;}
  /* 이미지 스타일 */
  .modal img {height: auto; border-radius: 10px 10px 0 0;}
  /* 버튼 스타일 */
  .modal button {background:#fff; border:none; cursor:pointer; padding:12px 20px; border-radius:0 0 10px 10px;}

/********** header **********/
header{left:0; top:0; background:#fefefe; overflow-y:hidden}

/********** 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%}

/********** intro **********/
.intro{background:url('/img/aboutBg.jpg')center center no-repeat; background-size: cover}
.intro .wpA{right:0; bottom:0}
.intro .point{background:url('/img/labelWhite.svg')center center no-repeat}
.introCntBg1 {background:url('/img/about-001.jpg')center center no-repeat; background-size: cover}
.introCntBg2 {background:url('/img/about-002.jpg')center center no-repeat; background-size: cover}
.introCntBg3 {background:url('/img/about-003.jpg')center center no-repeat; background-size: cover}
.introCntBg4 {background:url('/img/about-004.jpg')center center no-repeat; background-size: cover}

/********** brand **********/
.brand{background:url('/img/cometenceBg.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}
/* =========================
   BRAND 섹션 그리드
   파일: /css/common.css
   ========================= */

/* 데스크톱: 3열 */
#brand .inner > .wdf.wFw {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;  /* 가로 간격 (wg24와 동일 체감) */
    row-gap: 24px;     /* 세로 간격 */
  }
  
  /* 태블릿 이하: 1열 */
  @media (max-width: 1199.98px) {
    #brand .inner > .wdf.wFw {
      grid-template-columns: 1fr;
    }
  }
  
  /* (선택) 모바일에서 간격 살짝 촘촘하게 조정하고 싶다면 */
  @media (max-width: 767.98px) {
    #brand .inner > .wdf.wFw {
      row-gap: 4px;
      column-gap: 4px;
    }
  }
  
  /* 그리드 안 자식 카드: 기존 width/margin 유틸 무력화(그리드 간격 사용) */
  #brand .inner > .wdf.wFw > .brandCnt {
    width: auto !important;
    margin: 0 !important;
  }
  
  /* 이미지는 너비 100% 유지 */
  #brand .brandCnt img {
    width: 100%;
    height: auto;
    display: block;
  }
  

/********** product **********/
.product{background:url('/img/menuBg.jpg')center center no-repeat; background-size:cover}
.product .point{background:url('/img/labelRed.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;}
/********** process **********/
.process{background:url('/img/stepBg.jpg')center center no-repeat; background-size:cover}
.process .point{background:url('/img/labelWhite.svg')center center no-repeat}
.processCnt{width:calc(25% - 45px)}
.processIcon{width:100%; background:#FAECDA;}

/********** price **********/
.price{background:url('/img/priceBg.jpg')center center no-repeat; background-size:cover}
.price .point{background:url('/img/labelRed.svg')center center no-repeat}
.tableBg{border:1px solid #91949F;}
.tableBg tbody td{border-bottom:1px solid #E9E9EC}
.pricetableline {border-left: 1px solid #E9DAD5;}
/* ======================================
   Speech Bubble Tail (말풍선 꼬리)
   파일: /css/common.css
   ====================================== */

/* 카드 본체: tail이 밖으로 나가므로 상대 위치 지정 */
.speechTail {position: relative; filter: drop-shadow(0 0px 8px rgba(0,0,0,.25))}
  
  /* 꼬리 (다이아몬드형) — 카드 하단 중앙에 배치 */
  .speechTail::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    bottom: -10px;                   /* 꼬리가 카드 바깥으로 10px 내려옴 */
    width: 20px;
    height: 20px;
    background: inherit;             /* 부모 배경색(bco_gray0) 그대로 사용 */
    z-index: 1;                      /* 다른 요소보다 위로 */
  }
  
  /* (선택) 좌측/우측에 꼬리를 붙이고 싶을 때: 아래 중 하나만 추가 클래스 부여
     사용 예: <div class="... speechTail speechTail--left"> */
  .speechTail--left::after  { left: 24px; transform: rotate(45deg); }
  .speechTail--right::after { left: auto; right: 24px; transform: rotate(45deg); }
  
  /* (선택) 모바일에서 꼬리를 중앙 정렬로 통일하고 싶으면 */
  @media (max-width: 767.98px) {
    .speechTail::after {
      left: 50%;
      right: auto;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  

/********** 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;}
  

/********** online **********/
.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}
.online{background:url('/img/contactBg.jpg')center center no-repeat; background-size:cover}
.online .point{background:url('/img/labelRed.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;}
.online textarea{resize:none; box-sizing: border-box;}
.online input[type="checkbox"]{left:-9999px;}
.online input[type="checkbox"] + label{cursor: pointer; }
.online 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}
.online 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;}


/********** login **********/
.loginBg {background:url('/img/loginBg.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}