@charset "UTF-8";

body,html { overflow-x: hidden}
.contentWrap { position: relative; width: 100%; max-width: 1668px; margin: 0 auto; }

/*
* **********************  헤더  **********************
*/
.headerMobile { display: none;}
.header { display: flex; justify-content: space-between; align-items: center; padding: 30px 0 20px; box-sizing: border-box;}
.header .leftArea { display: flex; align-items: center;}
.header .leftArea .logoArea { margin-right: 20px}
.header .leftArea .headerList { display: flex; align-items: center; }
.header .leftArea .headerList .list { font-size: 18px; font-family: 'PretendardB'; margin-right: 29px;}
.header .leftArea .headerList .list:last-child { margin-right: 0;}
.header .leftArea .headerList .list a { color: #4F4F4F;}
.header .leftArea .headerList .list.review a{ color: #007FFF;}

.header .rightArea .loginInfoArea { display: flex; justify-content: flex-end; align-items: center;}
.header .rightArea .loginInfoArea .list { font-size: 16px; font-family: 'PretendardM'; }
.header .rightArea .loginInfoArea .list a {color: #666;}
.header .rightArea .loginInfoArea .line { width: 1px; height: 11px; background-color: #D9D9D9; margin-left: 10px; margin-right: 15px;}
.header .rightArea .searchArea { position: relative; width: 420px; padding:10px 20px; box-sizing: border-box; margin-top: 25px; border: 1.5px solid rgba(0, 127, 255, 0.25); border-radius: 50px; box-sizing: border-box;}
.header .rightArea .searchArea .searchBtn { position: absolute; top: 50%;transform: translateY(-50%); right: 4.7619%; background: url("/app/layout/web/images/searchIcon.png") no-repeat; width: 22px; height: 22px; cursor: pointer;}
.header .rightArea .searchArea input { width: 100%; height: 100%; padding-right: 22px;box-sizing: border-box; font-size: 18px; color: rgba(0, 127, 255, 0.50);font-family: 'PretendardSB';}
.header .rightArea .searchArea input::placeholder { color: rgba(0, 127, 255, 0.50); }

/* 모바일 메뉴 리스트*/
.mobileMenuWrap { display: none;}

/*
* **********************  푸터  **********************
*/
.footerWrap .mobileInfo { display: none;}
.footerWrap .footerArea{ background: #41484F;padding: 60px 0; box-sizing: border-box; }
.footerWrap .footer { display: flex; align-items: center; font-size: 16px; color: #AAA; font-family: 'PretendardR';}
.footerWrap .footer .brNon { display: none;}
.footerWrap .footer a { color: #AAA;}
.footerWrap .footer .bold { font-family: 'PretendardEB';}
.footerWrap .footer .text { margin-bottom: 15px;}

.footerWrap .footer .leftArea { padding: 30px 60px; box-sizing: border-box; border-right: 1px solid #C9C9C9; margin-right: 49px;}
.footerWrap .footer .leftArea .footerLogo { margin-bottom: 30px;}

.footerWrap .footer .rightArea {flex: 1; display: flex; align-items: center; /*gap: 17.1017%;*/ justify-content: space-between}
.footerWrap .footer .rightArea .left li { margin-bottom: 20px;}
.footerWrap .footer .rightArea .left li:last-child { margin-bottom: 0;}

.footerWrap .footer .rightArea .middle .title { font-size: 17px; color: #ccc;font-family: 'PretendardBlk';}
.footerWrap .footer .rightArea .middle .snsArea { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; margin-bottom: 30px;}
.footerWrap .footer .rightArea .right .titleArea { margin-bottom: 40px; color: #ccc;}
.footerWrap .footer .rightArea .right .titleArea .title { font-size: 22px; margin-bottom: 10px;}
.footerWrap .footer .rightArea .right .titleArea .number { font-size: 40px; font-family: 'PretendardB';}
.footerWrap .footer .rightArea .right .textArea { margin-bottom: 20px;}
.footerWrap .footer .rightArea .right .info { color: #007FFF;}

/*
* **********************  gnb  **********************
*/
.main .gnbWrap { height: 244px;}
.gnbWrap { position: relative; width: 100%; height: 184px; pointer-events: none}
.gnbWrap .gnb { position: absolute;left: 50%; transform: translateX(-50%); overflow: hidden; padding: 30px 0 395px ;/*padding: 30px 30px 395px 80px;*/ box-sizing: border-box; z-index: 99}
.gnbWrap .gnb .gnbSwiper { pointer-events: auto;}
.gnbWrap .gnb .swiper-wrapper { justify-content: center;}
.gnbWrap .swiper-slide { position: relative; width: auto; cursor: pointer; pointer-events: auto;}
.gnbWrap .swiper-slide:last-child { margin-right: 0 !important;;}

.gnbWrap .swiper-slide .depth { display: none; position: absolute; width: 190px; left: 50%; transform: translateX(-50%); text-align: center; background-color: #fff; border-radius: 0 0 10px 10px; box-sizing: border-box; border:2px solid #007FFF; z-index: 10}

.gnbWrap .swiper-slide .depth li { font-size: 18px; font-family: 'PretendardM'; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #007FFF;}
.gnbWrap .swiper-slide .depth li:last-child { border-bottom: none;}
.gnbWrap .swiper-slide .depth li a { color: #007FFF}
.gnbWrap .swiper-slide .depth li:hover { background-color: #007FFF;}
.gnbWrap .swiper-slide .depth li:hover a { color: #fff}
.gnbWrap .swiper-slide:hover .depth { display: block;}
.gnbWrap .swiper-slide:hover .title { color: #007FFF;}

.gnbWrap .slideArea { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-bottom: 10px;}
.gnbWrap .slideArea .title { font-size: 20px; color: #333; font-family: 'PretendardB';}

/* 메인 gnb depth 위치가 다름 */
/*.main .gnbWrap .gnb { padding: 380px 30px 60px 80px; margin-top: -310px;}*/
.main .gnbWrap .gnb { padding: 380px 0 60px; margin-top: -310px;}
.main .gnbWrap .swiper-slide .depth { bottom: 100%; border-radius: 10px 10px 0 0;}
.main .gnbWrap .slideArea { padding-bottom: 0;}

/* 모바일 gnb */
.gnbMobileWrap { display: none;}

/*
* ********************** quick 메뉴  **********************
*/

.quickMenuWrap { position: fixed; bottom: 71px; right: 30px; z-index: 99 }
.quickMenuWrap .menuList { width: 80px;}
.quickMenuWrap .menuList .list { display: flex; justify-content: center; align-items: center; height: 70px; font-size: 20px; font-family: 'PretendardB'; background-color: #007FFF}
.quickMenuWrap .menuList .list.kakao{ background-color: #FFE812}
.quickMenuWrap .menuList .list.shopping{ background-color: #06C;}
.quickMenuWrap .menuList .list a{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100% ; color: #fff}
.quickMenuWrap .menuList .arrowArea .btn { display: flex; justify-content: center; align-items: center; height: 50px; background-color:#39F; box-sizing: border-box; cursor: pointer;}
.quickMenuWrap .menuList .arrowArea .btn.upBtn { border-bottom: 2px solid #007FFF;}

/*
* **********************  메인 비주얼  **********************
*/
.mainVisualWrap .swiper-slide { filter:grayscale(75%)}
.mainVisualWrap .swiper-slide.swiper-slide-active { filter:grayscale(0%)}
.mainVisualWrap .swiper-slide img { width: 100%}
.mainVisualWrap .swiper-button-next { right: 0;}
.mainVisualWrap .swiper-button-prev { left: 0;}
.mainVisualWrap .swiper-button-prev,
.mainVisualWrap .swiper-button-next { width: 60px; height: 60px; margin-top: 0; transform: translateY(-50%);}
.mainVisualWrap .swiper-button-prev:after,
.mainVisualWrap .swiper-button-next:after { width: 60px; height: 60px;}
.mainVisualWrap .swiper-button-prev:after{ background: url("/app/layout/web/images/main/arrowIconL.png") no-repeat; content: ''}
.mainVisualWrap .swiper-button-next:after{ background: url("/app/layout/web/images/main/arrowIconR.png") no-repeat; content: ''}
.mainVisualWrap .swiper-pagination { display: none;}

/*
* **********************  메인 베스트 셀러 **********************
*/
.bestSeller { padding: 100px 0; background-color: #EEF6FF; box-sizing: border-box;}
.bestSeller .contentWrap { overflow: hidden}
.bestSeller .cl_titleArea { margin-bottom: 60px;}
.bestSeller .sellerSwiper { position: relative; padding: 0 30px; box-sizing: border-box}
.bestSeller .sellerSwiper .swiper-wrapper { align-items: center; padding: 60px 0; box-sizing: border-box; }
/*.bestSeller .sellerSwiper { overflow: hidden;  }*/
.bestSeller .sellerSwiper .swiper-slide{  position: relative ;cursor: pointer; border-radius: 21px; overflow: hidden;}
/*
.bestSeller .sellerSwiper .swiper-slide.swiper-slide-active { transform: scale(1.25); transform-origin: center center}
*/
.bestSeller .sellerSwiper .swiper-slide.swiper-slide-active:hover{ transform: scale(1.3);z-index: 2; transition: all 0.25s ease-out;}
.bestSeller .sellerSwiper .swiper-slide img { width: 100% }

.bestSeller .sellerSwiper .swiper-slide .hoverText { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; border-radius: 21px; box-sizing: border-box; background-color:rgba(0,0,0,0.7) ;text-align: center; color: #fff;font-family: 'PretendardB';}
.bestSeller .sellerSwiper .swiper-slide .hoverText .textArea { display: flex; justify-content: center; align-items: center; flex-direction: column}
.bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .new { width: 90px; height: 30px; display: flex; justify-content: center ;align-items: center; font-size: 18px; background-color: #007FFF; border-radius: 20px;box-sizing: border-box; margin-bottom: 30px;}
.bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .title {font-size: 28px; font-family: 'PretendardM';}
.bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .subTitle {font-size: 20px; }
.bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .subTitle .num { font-size: 50px;}
.bestSeller .sellerSwiper .swiper-slide:hover .hoverText { display: flex}


.bestSeller .swiper-button-next { right: 0;}
.bestSeller .swiper-button-prev { left: 0;}
.bestSeller .swiper-button-prev,
.bestSeller .swiper-button-next { width: 60px; height: 60px; margin-top: 0; transform: translateY(-50%);}
.bestSeller .swiper-button-prev:after,
.bestSeller .swiper-button-next:after { width: 60px; height: 60px;}
.bestSeller .swiper-button-prev:after{ background: url("/app/layout/web/images/main/arrowIconL.png") no-repeat; content: ''}
.bestSeller .swiper-button-next:after{ background: url("/app/layout/web/images/main/arrowIconR.png") no-repeat; content: ''}



/*
* **********************  trendingCategory **********************
*/

.trendingCategory { padding: 150px 0; box-sizing: border-box;}
.trendingCategory .categoryArea { margin-bottom: 50px;}
.trendingCategory .moreBtnArea { display: flex; justify-content: center}

/*
* **********************  eventWrap **********************
*/
.eventWrap { margin: 50px 0;}
.eventWrap img { width: 100%;}


/*
* **********************  SaleItemWrap **********************
*/
.SaleItemWrap { padding: 150px 0 70px; box-sizing: border-box;}


/*
* ********************************************  서브페이지 상품 리스트 ********************************************
*/
.categoryListWrap .subVisual { margin-top: 50px;}
.categoryListWrap .subVisual img { width: 100%;}

.categoryListWrap .listArea { margin-top: 90px; margin-bottom: 100px;}
.categoryListWrap .listArea .titleArea { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.categoryListWrap .listArea .titleArea.bottom { align-items: flex-end}
.categoryListWrap .listArea .titleArea .rightArea { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 15px;}
.categoryListWrap .listArea .titleArea .rightArea .listText { margin-right: 20px; font-size: 20px; color: #666;font-family: 'PretendardM'; cursor: pointer;}
.categoryListWrap .listArea .titleArea .rightArea .listText.on { color: #007FFF}
.categoryListWrap .listArea .titleArea .rightArea .listText:last-child { margin-right: 0;}

.categoryListWrap .cl_pagination { margin-top: -40px;}



/*
* ********************************************  서브페이지 디테일 상품 정보 및 주문 ********************************************
*/
.detailWrap { padding-top: 50px; padding-bottom: 100px;}
.detailWrap .contentWrap { max-width: 1500px;}
.detailWrap .detail { display: flex; gap: 100px; margin-bottom: 50px;}
.detailWrap .detail .detailSwiperWrap { position: relative; width: 600px}
.detailWrap .detail .detailSwiper { overflow: hidden;}
.detailWrap .detail .detailSwiper .swiper-slide { border-radius: 30px;}
.detailWrap .detail .detailSwiper .swiper-slide img { width: 100%;}
.detailWrap .detail .swiper-button-next { right: -30px;}
.detailWrap .detail .swiper-button-prev { left: -30px;}
.detailWrap .detail .swiper-button-prev,
.detailWrap .detail .swiper-button-next { width: 60px; height: 60px; margin-top: 0; transform: translateY(-50%); filter: drop-shadow(0px 0px 10px rgba(7, 129, 182, 0.25))}
.detailWrap .detail .swiper-button-prev:after,
.detailWrap .detail .swiper-button-next:after { width: 60px; height: 60px;}
.detailWrap .detail .swiper-button-prev:after{ background: url("/app/layout/web/images/main/arrowIconL.png") no-repeat; content: ''}
.detailWrap .detail .swiper-button-next:after{ background: url("/app/layout/web/images/main/arrowIconR.png") no-repeat; content: ''}

.detailWrap .detail .swiper-pagination { width: 100%; left: 50%; transform: translateX(-50%);}
.detailWrap .detail .swiper-pagination .swiper-pagination-bullet { width: 70px; height: 5px; border-radius: 20px; margin-right: 7px; }
.detailWrap .detail .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0;}
.detailWrap .detail .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #007FFF;}

.detailWrap .detail .title { font-size: 45px; color: #333; font-family: 'PretendardSB'; margin-bottom: 20px;}

.detailWrap .detail .infoArea { font-size: 20px; color: #999; font-family: 'PretendardM'; margin-bottom: 50px;}
.detailWrap .detail .infoArea .flex { display: flex; align-items: center; margin-bottom: 20px; gap: 15px;}
.detailWrap .detail .infoArea .flex .line { width: 1px; height: 12px; background-color: #c8c8c8;}
.detailWrap .detail .infoArea .price { font-size: 30px; color: #f00; font-family: 'PretendardSB';}

.detailWrap .detail .itemArea { margin-bottom: 50px;}
.detailWrap .detail .itemArea .itemTit { font-size: 20px; color: #333; font-family: 'PretendardSB'; margin-bottom: 20px;}

/*.detailWrap .detail .itemArea .gridWrapper {  overflow:hidden;}
.detailWrap .detail .itemArea .grid {display:flex; flex-wrap:wrap; padding:5px 0 0 5px; margin:-5px}
.detailWrap .detail .itemArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 5);
    border:0 solid transparent;
    border-width:0 5px 5px 0;
}*/
.detailWrap .detail .itemArea .gridWrapper { width: 680px;}
.detailWrap .detail .itemArea .grid { display: flex; flex-wrap: wrap; gap: 20px;}
.detailWrap .detail .itemArea .grid .gridCell { width: 120px;}
.detailWrap .detail .itemArea .grid .gridCell img{ width: 100%}

.detailWrap .detail .orderBtnArea .orderText { display: flex; align-items: center; gap: 10px; font-size: 20px; color: #FF5E5E; font-family: 'PretendardSB'; margin-bottom: 20px;}

.detailWrap .estimateWrap { width: 100%; border: 2px solid #e9e9e9; box-sizing: border-box; padding: 40px; margin-bottom: 50px;}
.detailWrap .estimateWrap .quotationTit { font-size: 34px; color: #333; font-family: 'PretendardSB'; margin-bottom: 50px;}

.detailWrap .estimateWrap .estimate { display: flex; align-items: flex-end; gap: 24px; font-size: 18px; color: #333; font-family: 'PretendardSB';}
.detailWrap .estimateWrap .estimate .quantityArea,
.detailWrap .estimateWrap .estimate .designArea,
.detailWrap .estimateWrap .estimate .makingArea { width: 20%}
.detailWrap .estimateWrap .estimate .tit { margin-bottom: 20px;}
.detailWrap .estimateWrap .estimate .textArea {  height: 263px; overflow-y: auto; padding: 20px 5px 0 0; box-sizing: border-box; border-top: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;}
.detailWrap .estimateWrap .estimate .textArea .flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; font-size: 16px; color: #4f4f4f; font-family: 'PretendardM';}


.detailWrap .estimateWrap .estimate .totalArea{ padding: 15px 0; text-align: right; font-size: 20px;}
.detailWrap .estimateWrap .estimate .totalText{ padding: 10px 0; text-align: right; font-size: 20px;}
.detailWrap .estimateWrap .estimate .totalText .totalNum { font-size: 40px;}
.detailWrap .estimateWrap .estimate .totalText .text { color: #333;}
.detailWrap .estimateWrap .estimate .totalText span { color: #f00;}
.detailWrap .estimateWrap .estimate .totalTextM { display: none;}

.detailWrap .detailImgArea { text-align: center}

.detailWrap .detailBtnArea { display: flex; gap: 20px; margin-bottom: 100px;}
.detailWrap .detailBtnArea .cl_button { width: 26.6%;}
.detailWrap .detailBtnArea .cl_button.orderBtn { width: 44%;}


/*
* ********************************************  주문 페이지 팝업  ********************************************
*/

.detailPopupWrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; }
.detailPopupWrap .popup { position: absolute; left: 50%; transform: translateX(-50%); padding: 30px 20px 30px 50px; box-sizing: border-box; border: 6px solid #007FFF; border-radius: 10px; width: 100%; max-width: 1000px; background-color: #fff; }
.detailPopupWrap .detailPopup { top: 100px; bottom: 100px; }
.detailPopupWrap .detailCloseBtn { text-align: right; margin: 10px 0; padding-right: 30px;}
.detailPopupWrap .detailCloseBtn img { cursor: pointer;}

.detailPopupWrap .detailPopup .orderTitle { text-align: center; margin-top: 70px; padding-right: 30px;}
.detailPopupWrap .detailPopup .orderTitle .tit { font-size: 30px; color: #333; font-family: 'PretendardB'; margin-bottom: 10px;}
.detailPopupWrap .detailPopup .orderTitle .subTxt { font-size: 20px; color: #999; font-family: 'PretendardM'; }

.detailPopupWrap .detailPopup .selectArea { margin-top: 50px; margin-bottom: 70px; overflow-y: auto; height: calc(100% - 360px);padding-right: 20px; box-sizing: border-box}

/* 아래의 모든 코드는 영역::코드로 사용 */
.detailWrap .scrollArea::-webkit-scrollbar,
.detailPopupWrap .scrollArea::-webkit-scrollbar,
.payAccount::-webkit-scrollbar {
    width: 10px;  /* 스크롤바의 너비 */
}

.detailWrap .scrollArea::-webkit-scrollbar-thumb,
.detailPopupWrap .scrollArea::-webkit-scrollbar-thumb,
.payAccount::-webkit-scrollbar-thumb{
    background: #007FFF; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.detailWrap .scrollArea::-webkit-scrollbar-track,
.detailPopupWrap .scrollArea::-webkit-scrollbar-track,
.payAccount::-webkit-scrollbar-track{
    background: #D9D9D9;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px !important;
}

.detailPopupWrap .detailPopup .selectArea .selectGrid {overflow:hidden;}
.detailPopupWrap .detailPopup .selectArea .grid {display:flex; flex-wrap:wrap; padding:20px 0 0 20px; margin:-20px}
.detailPopupWrap .detailPopup .selectArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 4);
    border:0 solid transparent;
    border-width:0 20px 30px 0;
}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 10px; padding: 10px 0; margin-bottom: 20px;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px;  border: 1px solid #C8C8C8; box-sizing: border-box; z-index: 1}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea:hover:before { border-width: 3px; border-color: #007FFF;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea img { width: 100%;}

/* 주문확인 후 최종 상품확인 창  */
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(0,0,0,0.6); border-radius: 10px; z-index: 99; color: #fff; padding: 10px; box-sizing: border-box;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText { display: flex; justify-content: flex-end; align-items: center; flex-direction: column; height: 100%; text-align: center;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .hideBr { display: none;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder { font-size: 14px; font-family: 'PretendardSB';}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText { line-height: 24px; margin-bottom: 50px;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText .makingOption { margin-bottom: 10px;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText .orderPrice { font-size: 20px; color: #FEE;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .retouchBtn { padding: 10px 20px;  border-color: #F00; background-color: #fff; height: auto; font-size: 16px;}
.detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .retouchBtn a { color: #f00}

.detailPopupWrap .detailPopup .selectArea .grid .selectBtn { padding: 10px 20px; box-sizing: border-box; height: auto; margin-top: 10px; font-size: 16px;  z-index: 2}

.detailPopupWrap .detailPopup .selectArea .grid .textArea { text-align: center;}
.detailPopupWrap .detailPopup .selectArea .grid .textArea .text { font-size: 16px; color: #666; font-family: 'PretendardM'; margin-bottom: 5px;}
.detailPopupWrap .detailPopup .selectArea .grid .textArea .price { font-size: 20px; color: #333; font-family: 'PretendardSB';}

.detailPopupWrap .detailPopup .orderSaveBtn { display: flex; justify-content: center; padding-right: 30px;}




.detailPopupWrap .customPopupWrap {display: none; position: absolute; top: 0;left: 0; width: 100%; height: 100%; background: transparent;z-index: 99999}
.detailPopupWrap .customPopup { top: 50%; left: -6px;width: 102%; transform: translate( 0,-50%); z-index: 9999;   }
.detailPopupWrap .customPopup .customBtnArea { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 44px; padding-right: 30px;box-sizing: border-box;}
.detailPopupWrap .customPopup .customBtnArea img { cursor: pointer;}

.detailPopupWrap .customPopup .customListArea { display: flex; justify-content: center; align-items: center; padding-right: 30px;}
.detailPopupWrap .customPopup .customListArea .list {position: relative; display: flex; align-items: center; flex-direction: column; ;margin-right: 120px; text-align: center; cursor:pointer;}
.detailPopupWrap .customPopup .customListArea .list:last-child { margin-right: 0;}
.detailPopupWrap .customPopup .customListArea .list:last-child .listDot:before { display: none;}

.detailPopupWrap .customPopup .customListArea .list .listTit { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); white-space: nowrap; ;font-size: 16px; color: #D2D2D2; font-family: 'PretendardM'; margin-bottom: 5px;}
.detailPopupWrap .customPopup .customListArea .list .listDot { position: relative; width: 18px; height: 18px; background-color: #D2D2D2; border-radius: 100%;}
.detailPopupWrap .customPopup .customListArea .list .listDot:before { content: ''; position: absolute; top:50%;left: 100%; transform: translateY(-50%); width: 120px; height: 1px ; background-color: #D2D2D2}

.detailPopupWrap .customPopup .customListArea .list.active .listTit { font-size: 20px ;color: #333; font-family: 'PretendardSB'; top: -45px}
.detailPopupWrap .customPopup .customListArea .list.active:before { content: ''; position: absolute; top: -12px; left: -13px;  background: url("/app/layout/web/images/customActiveIcon.png") no-repeat; width: 43px; height: 42px; z-index: 999}

.detailPopupWrap .customPopup .customListArea .list.end .listTit { color: #4F8BC7}
.detailPopupWrap .customPopup .customListArea .list.end .listDot { background-color: #007FFF}
.detailPopupWrap .customPopup .customListArea .list.end .listDot:before { background-color: #007FFF}

/*상품 옵션을 선택하고 난 뒤에 보여야 할 체크 아이콘*/
.detailPopupWrap .customPopup .customListArea .list .checkIcon { display: none; position: absolute; left: 50%; transform:translateX(-50%); top: -55px;}

/* 커스텀 팝업에서 저장 안하고 닫을 경우 alert팝업  */

.detailPopupWrap .customPopupWrap .alertPopupWrap { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius:10px ;box-sizing: border-box;  background: #fff; font-family: 'PretendardSB'; padding: 38px; border: 2px solid #007FFF}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea { display: flex; justify-content: space-between; border-bottom: 1px solid #C8C8C8; margin-bottom: 30px;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea { display: flex; padding-bottom: 30px; }
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .imgArea { margin-right: 15px;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .text { font-size: 20px; color: #333;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .info { font-size: 16px; color: #999; margin-top: 30px;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .closeBtn { cursor: pointer;}


.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea { display: flex; justify-content: flex-end; align-items: center; font-size: 20px; color: #7A7A7A;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea > div { cursor: pointer;}
.detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea .save { color:#007FFF; margin-left: 30px; }


/*
    *** 커스텀 팝업 공통
*/
.detailPopupWrap .flexDirectionColumn {flex-direction: column;}
.detailPopupWrap .flexDirectionRow {flex-direction: row;}

.detailPopupWrap .customPopup .customPop { display: none}
.detailPopupWrap .customPopup .customPop.on { display: block;}

.detailPopupWrap .customPopup .customPop .contentArea { display: flex; justify-content: space-between; padding-right: 30px; margin-top: 50px;}
.detailPopupWrap .customPopup .customPop .imgBox {position: relative; display: flex; justify-content:center;align-items: center; border-radius: 10px; border: 1px solid #c8c8c8; box-sizing: border-box; padding: 10px 0;}
.detailPopupWrap .customPopup .customPop .imgBox img { display: block;}

.detailPopupWrap .customPopup .customPop .popupBtnArea { display: flex; justify-content: center; align-items: center; margin-top: 70px; padding-right: 30px; box-sizing: border-box;}
.detailPopupWrap .customPopup .customPop .popupBtnArea > div:first-child { margin-right: 20px}

.detailPopupWrap .customPopup .customPop .popupTitle { margin-top: 60px; text-align: center; padding-right: 30px;}
.detailPopupWrap .customPopup .customPop .popupTitle .title { font-size: 30px; color: #333; font-family: 'PretendardSB'; margin-bottom: 10px;}
.detailPopupWrap .customPopup .customPop .popupTitle .title .step { color: #007FFF;}
.detailPopupWrap .customPopup .customPop .popupTitle .subText { font-size: 20px; color: #999; font-family: 'PretendardM';}

.detailPopupWrap .customPopup .customPop .rightArea { display: flex; align-items: flex-end; flex-direction: column; font-family: 'PretendardSB';}
.detailPopupWrap .customPopup .customPop .rightArea.mobile { display: none}
.detailPopupWrap .customPopup .customPop .rightArea .text { font-size: 24px; color: #333; margin-bottom: 40px;}

.detailPopupWrap .customPopup .customPop .printBtn { width: 440px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #C8C8C8; font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; margin-bottom: 30px; cursor: pointer;}

.detailPopupWrap .customPopup .customPop .radioArea { display: flex; margin-top:25px; margin-bottom: 50px;}
.detailPopupWrap .customPopup .customPop .radioArea .radio { display: flex; align-items: center; margin-right: 20px; font-size: 20px; color: #333; font-family: 'PretendardSB';}
.detailPopupWrap .customPopup .customPop .radioArea .radio:last-child { margin-right: 0;}
.detailPopupWrap .customPopup .customPop .radioArea .radio input { margin-right: 10px;}
.detailPopupWrap .customPopup .customPop .radioArea .radio .radioText span { color: #666; font-family: 'PretendardM';}

.detailPopupWrap .customPopup .customPop .type2 .radioArea { margin-bottom: 30px;}
.detailPopupWrap .customPopup .customPop .type2 .printInfo { color: #FF7D7D; font-size: 18px; font-family: 'PretendardM';}
.detailPopupWrap .customPopup .customPop .type2 .imgBox { padding: 0;}
.detailPopupWrap .customPopup .customPop .type2 .imgBox img { border-radius: 10px;}

/* 커스텀 사이즈 팝업*/
.detailPopupWrap .customPopup .sizePopup .contentArea { padding-right: 20px;}
.detailPopupWrap .customPopup .sizePopup .rightArea .text { padding-right: 10px;}
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea {height: 180px; overflow-y: auto; padding-right: 10px;}
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 30px;  color: #4F4F4F; font-size: 30px; text-align: center;}
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list:last-child { margin-bottom: 0;}
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list .size { width: auto; margin-right: 70px; }
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list .number {width: 24px; text-align: center; margin:0 20px; }
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list img { display: block;}
.detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list .count { cursor: pointer;}

.detailPopupWrap .customPopup .sizePopup .rightArea .sizeInfo { display: flex; justify-content: center; align-items:center; width: 400px; height: 50px; border: 1px solid #FF7D7D; border-radius: 10px; font-size: 20px; color: #FF7D7D; font-family: 'PretendardM'; cursor: pointer; margin-top: 50px; margin-right: 10px; }

.detailPopupWrap .customPopup .sizePopup .sizeInfoPopupWrap { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999}
.detailPopupWrap .customPopup .sizePopup .sizeInfoPopup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 622px; border: 15px solid #007FFF; box-sizing: border-box; background: #fff; z-index: 999999}
.detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .btnArea { margin-top: 30px; margin-right: 23px; margin-bottom: 10px;text-align: right; }
.detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .btnArea .closeBtn { cursor: pointer;}
.detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .imgArea img{ width: 100%;}

.detailPopupWrap .customPopup .contentBoxWrap { display: none;}
.detailPopupWrap .customPopup .contentBoxWrap.type1 { display: block;}

/* 커스텀 인쇄선택 팝업*/

.detailPopupWrap .customPopup .printPopup .type2 .contentArea { margin-bottom: 30px;}
.detailPopupWrap .customPopup .printPopup .rightArea .text { margin-bottom: 30px;}
.detailPopupWrap .customPopup .printPopup .commonPrintPositionCell {display:flex; margin-top:20px;}
.detailPopupWrap .customPopup .printPopup .commonPrintPositionCell:first-child {margin-top:0;}
.detailPopupWrap .customPopup .printPopup .commonPrintPositionCell .imgBox {margin-right:20px;}

.detailPopupWrap .customPopup .printPopup .printImgArea {overflow-y: auto; height: 102px; padding-right: 5px; width: 100%}
.detailPopupWrap .customPopup .printPopup .printImgArea .printImg{ display: flex; align-items: center; justify-content: space-between }
.detailPopupWrap .customPopup .printPopup .printImgArea .printImg .txt { display: flex;}
.detailPopupWrap .customPopup .printPopup .printImgArea img { display: block;}
.detailPopupWrap .customPopup .printPopup .printImgArea .img { margin-right: 180px;}
.detailPopupWrap .customPopup .printPopup .printImgArea .logoText { font-size: 20px; color: rgba(79, 79, 79, 0.96); font-family: 'PretendardM'; margin-right: 20px;}
.detailPopupWrap .customPopup .printPopup .printImgArea .closeBtn  { cursor: pointer;}


.detailPopupWrap .customPopup .printPopup .type2 .popupBtnArea .cl_button { padding: 0 30px;}
.detailPopupWrap .customPopup .printPopup .type2 .imgBox img {max-width:142px;}

.tableSelect select {
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
}
.tableSelect select::-ms-expand{
    display:none;/*for IE10,11*/
}
.tableArea .tableSelect select {background:url('/app/layout/web/images/selectArrow.png') no-repeat 97% 50%;}

.detailPopupWrap .customPopup .customTable { padding-right: 30px; margin-right: 30px;  font-size: 16px; color: #4f4f4f; font-family: 'PretendardM';overflow-y: auto; overflow-x: hidden;height: 300px; }
.detailPopupWrap .customPopup .customTable .tableArea { display: flex; align-items: center; justify-content: space-between; padding:10px 0; box-sizing: border-box; border-bottom: 1px solid #C8C8C8;}
.detailPopupWrap .customPopup .customTable .tableArea .tableLeft,
.detailPopupWrap .customPopup .customTable .tableArea .tableRight { display: flex; align-items: center;}
.detailPopupWrap .customPopup .customTable .tableArea .tableNumber,
.detailPopupWrap .customPopup .customTable .tableArea .tableSize { width: 45px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #333; font-family: 'PretendardSB'; margin-right: 5px;}
.detailPopupWrap .customPopup .customTable .tableArea .borderBox {display: flex; justify-content: center; align-items: center; width: 250px; height: 44px; border: 1px solid #c8c8c8; box-sizing: border-box; border-radius: 5px; background: #fff; cursor: pointer}
.detailPopupWrap .customPopup .customTable .tableArea .tableSelect { margin-right: 10px;  box-sizing: border-box; }
.detailPopupWrap .customPopup .customTable .tableArea select { width: 100%; height: 100%; font-size: 16px;  font-family: 'PretendardM'; border: none; padding: 0 15px; box-sizing: border-box; cursor: pointer; color: #4f4f4f}
.detailPopupWrap .customPopup .customTable .tableArea select:invalid  { color: #C8C8C8; }
.detailPopupWrap .customPopup .customTable .tableArea select option {color: #4f4f4f;}

.detailPopupWrap .customPopup .customTable .tableArea .tableFile { cursor: pointer;}
.detailPopupWrap .customPopup .customTable .tableArea .tableInfo { color: #666; margin-right: 20px;}
.detailPopupWrap .customPopup .customTable .tableArea .tableCloseBtn { cursor: pointer;}
.detailPopupWrap .customPopup .customTable .tableArea .tableCloseBtn img { display: block;}

/* 커스텀 앰블럼 팝업*/
.detailPopupWrap .customPopup .emblemPopup .type2 .contentArea { margin-bottom: 30px;}
.detailPopupWrap .customPopup .emblemPopup .rightArea .text { margin-bottom: 30px;}

.detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon { position: absolute; width: 49px; height: 47px; background-color: rgba(242,242,242,0.6);}
.detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon.img { background-color: transparent;}

.detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon.left { top: 90px; left: 197px;}
.detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon.right { top: 59px; left: 73px;}

.detailPopupWrap .customPopup .emblemPopup .customTable .tableArea .customTableSelect { display: flex;}

.detailPopupWrap .customPopup .selectBtnArea .borderBox { display: flex; justify-content: center; align-items: center; width: 400px; height: 50px; border: 1px solid #c8c8c8; border-radius: 10px; box-sizing: border-box; margin-bottom: 30px; cursor: pointer; font-family: 'PretendardM'; color: #4f4f4f;}
.detailPopupWrap .customPopup .selectBtnArea .borderBox:last-child { margin-bottom: 0;}
.detailPopupWrap .customPopup .selectBtnArea .tableSelect select { width: 100%; height: 100%; padding: 0 20px; box-sizing: border-box; font-size: 18px; border-radius: 10px;  font-family: 'PretendardM'; cursor: pointer; background:url('/app/layout/web/images/selectArrowL.png') no-repeat 97% 50%; color: #4f4f4f;}
.detailPopupWrap .customPopup .selectBtnArea .tableSelect select:invalid  { color: #C8C8C8; }
.detailPopupWrap .customPopup .selectBtnArea .tableSelect select option {color: #4f4f4f;}
.detailPopupWrap .customPopup .selectBtnArea .tableFile { font-size: 20px;}

/* 커스텀 마킹 팝업*/

.detailPopupWrap .customPopup .makingPopup  .imgBox { padding: 5px;}
.detailPopupWrap .customPopup .makingPopup .customTable { height: 200px; margin-top: 50px;}
.detailPopupWrap .customPopup .makingPopup .popupBtnArea { margin-top: 40px;}
.detailPopupWrap .customPopup .makingPopup .selectBtnArea .makingTxt { color: #FF7D7D; border-color: #FF7D7D}

.detailPopupWrap .customPopup .makingPopup .titleArea { display: flex; ; font-size: 24px; color: #333; font-family: 'PretendardM'; text-align: center;}
.detailPopupWrap .customPopup .makingPopup .titleArea .leftTxt { display: flex;}
.detailPopupWrap .customPopup .makingPopup .titleArea .rightTxt { display: flex; border: none; padding: 0; margin-bottom: 10px;}
.detailPopupWrap .customPopup .makingPopup .titleArea .titleNum { margin-right: 10px;}
.detailPopupWrap .customPopup .makingPopup .titleArea .titleSize { margin-right: 17px;}
.detailPopupWrap .customPopup .makingPopup .titleArea .titleMaking { width: 180px; margin-bottom: 10px;}

.detailPopupWrap .customPopup .makingPopup .tableArea .tableNumber{width: 40px;  margin-right: 10px;}
.detailPopupWrap .customPopup .makingPopup .tableArea .tableSize{ width: 62px; margin-right: 19px;}
.detailPopupWrap .customPopup .makingPopup .tableArea .borderBox { width: 180px;}
.detailPopupWrap .customPopup .makingPopup .tableArea .tableNumber.opacity,
.detailPopupWrap .customPopup .makingPopup .tableArea .tableSize.opacity { opacity: 0}
.detailPopupWrap .customPopup .makingPopup .tableArea input[type="text"] { font-size: 16px; color: #4f4f4f; font-family: 'PretendardM'; width: 100%; padding: 0 10px; box-sizing: border-box;}

.detailPopupWrap .customPopup .makingPopup .makingAlertWrap { display: none;position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999;}
.detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 15px solid #007FFF; border-radius: 10px; box-sizing: border-box;}
.detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert .alertImg { display: block; width: 100%;}
.detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert .closeBtn { position: absolute; top: 15px; right: 15px; cursor: pointer;}

/* 커스텀 주문확인*/

.detailPopupWrap .customPopup .checkPopup .imgBox { padding: 0; border: none;}
.detailPopupWrap .customPopup .checkPopup .contentArea { align-items: center;}
.detailPopupWrap .customPopup .checkPopup .popupBtnArea > div:first-child { margin-right: 0;}

.detailPopupWrap .customPopup .checkPopup .customTable { height: auto; overflow-y: hidden; margin-right: 0; margin-top: 20px;}
.detailPopupWrap .customPopup .checkPopup .customTable.mobile { display: none;}
.detailPopupWrap .customPopup .checkPopup .titleArea { display: flex; align-items: center; font-size: 20px; color: #333; font-family: 'PretendardSB'; text-align: center;}

.detailPopupWrap .customPopup .checkPopup .titleArea .titleNum { margin-right: 3px;}
.detailPopupWrap .customPopup .checkPopup .titleArea .titleMaking { width: 190px; margin: 0 10px;}
.detailPopupWrap .customPopup .checkPopup .titleArea .titleMaking.price { width: 110px;}
.detailPopupWrap .customPopup .checkPopup .tableArea .tableNumber{width: 40px; margin-right: 5px;}
.detailPopupWrap .customPopup .checkPopup .tableArea .tableSize{ width: 40px; margin-right: 0;}
.detailPopupWrap .customPopup .checkPopup .tableArea .txt { width: 190px; margin: 0 11px; text-align: center; font-size: 16px; color: #999; font-family: 'PretendardM'; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.detailPopupWrap .customPopup .checkPopup .tableArea .txt.priceTxt { width: 110px; color: #333;}
.detailPopupWrap .customPopup .checkPopup .scrollArea { height: 510px; overflow-y: auto; margin-right: 30px; padding-bottom: 50px;}


.detailPopupWrap .customPopup .checkPopup .totalArea { display: flex; justify-content: center; align-items: flex-end; gap: 30px; padding: 20px 0; box-sizing: border-box; font-size: 16px; color: #333; font-family: 'PretendardM'; margin-top: 20px; margin-right: 30px; border: 1px solid #c8c8c8; }
.detailPopupWrap .customPopup .checkPopup .totalArea .totalLeft{ display: flex; justify-content: center; align-items: center;gap: 30px;}
.detailPopupWrap .customPopup .checkPopup .totalArea .price { font-size: 20px; color: #F00;}


/*
* ********************************************  로그인  ********************************************
*/

.loginWrap { display: flex; justify-content: center; align-items: center;}
.loginWrap .loginArea { width: 100%; max-width: 600px; padding: 50px 0; border-width: 2px;}
.loginWrap .loginArea .title { text-align: center; font-size: 30px ;color: #333; font-family: 'PretendardSB'; margin-bottom: 30px;}
.loginWrap .loginArea .login { padding: 0 100px; box-sizing: border-box;}
.loginWrap .loginArea .login .loginTit { font-size: 20px; color: #4f4f4f; font-family: 'PretendardSB'; margin-bottom: 5px;}
.loginWrap .loginArea .login .inputArea { margin-bottom: 20px}
.loginWrap .loginArea .login .lostPass { font-size: 16px; color: #999; font-family: 'PretendardM'; margin-bottom: 30px; }
.loginWrap .loginArea .login .lostPass a { color: #999;}

.loginWrap .loginArea .login .loginBtnArea { margin-bottom: 30px;}
.loginWrap .loginArea .login .loginBtnArea .cl_button{ margin-bottom: 10px;}
.loginWrap .loginArea .login .loginBtnArea .cl_button:last-child { margin-bottom: 0;}

.loginWrap .loginArea .snsLoginTxtWrap { display: flex; justify-content: center; align-items: center; padding: 0 30px; margin-bottom: 30px; box-sizing: border-box;}
.loginWrap .loginArea .snsLoginTxtWrap .text { font-size: 18px; color: #999; font-family: 'PretendardSB'; margin: 0 31px;}
.loginWrap .loginArea .snsLoginTxtWrap .line { border-top: 2px dashed #E0E0E0; flex: 1;}
.loginWrap .loginArea .snsLoginWrap { display: flex; justify-content: space-between; align-items: center; padding: 0 100px; box-sizing: border-box;}

/*
* ********************************************  회원가입  ********************************************
*/

.membershipWrap { display: flex; justify-content: center; align-items: center; }
.membershipWrap .membershipArea { width: 100%; max-width: 1000px; padding: 50px 70px;box-sizing: border-box; border-width: 2px;}
.membershipWrap .membershipArea .title { text-align: center; font-size: 30px ;color: #333; font-family: 'PretendardSB'; margin-bottom: 50px;}

.membershipWrap .membershipArea .membership { display: flex; justify-content: space-between; margin-bottom: 70px; gap: 60px}
.membershipWrap .membershipArea .membership > div{ flex: 1; }

.membershipWrap .membershipArea .membership .memberBox { position: relative; margin-bottom: 30px;}
.membershipWrap .membershipArea .membership .memberBox:last-child { margin-bottom: 0;}

.membershipWrap .membershipArea .membership .memberBox .tit { font-size: 20px; color: #4f4f4f; font-family: 'PretendardSB'; margin-bottom: 5px;}

.membershipWrap .membershipArea .membership .memberBox .input { font-size: 16px;}
.membershipWrap .membershipArea .membership .memberBox .input::placeholder { font-size: 16px;}


.membershipWrap .membershipArea .membership .memberBox.idArea .inputArea { display: flex; align-items: center; gap: 20px;}
.membershipWrap .membershipArea .membership .memberBox.idArea .chkBox { display: flex; justify-content: center; align-items: center; border: 2px solid #c8c8c8; border-radius: 8px; padding: 10px 20px; box-sizing: border-box; font-size: 20px; color: #4f4f4f;  font-family: 'PretendardM'; white-space: nowrap; cursor: pointer;}
.membershipWrap .membershipArea .membership .memberBox.idArea .chkBox.mobile { display: none;}


.membershipWrap .membershipArea .membership .memberBox .infoTxt { position: absolute; top: 104%;display: none; font-size: 14px; font-family: 'PretendardM';}
.membershipWrap .membershipArea .membership .memberBox .infoTxt.on { display: block;}
.membershipWrap .membershipArea .membership .memberBox .infoTxt img { margin-right: 5px; vertical-align: text-top;}
.membershipWrap .membershipArea .membership .memberBox .infoTxt.possible { color: #22C55E}
.membershipWrap .membershipArea .membership .memberBox .infoTxt.impossible,
.membershipWrap .membershipArea .membership .memberBox .infoTxt.samePass { color: #FF7D7D}

.membershipWrap .membershipArea .btnArea { display: flex; justify-content: center; align-items: center;}
.membershipWrap .membershipArea .btnArea .cl_button{ width: 400px;}


/*
* ********************************************  약관동의  ********************************************
*/
.privacyAgreeWrap .agreeArea { padding: 50px 30px; box-sizing: border-box; margin-bottom: 50px;}
.privacyAgreeWrap .agreeArea .agreeTit { font-size: 30px; color: #333; font-family: 'PretendardSB'; margin-bottom: 20px;}
.privacyAgreeWrap .agreeArea .textArea { height: 300px; font-size: 16px; color: #999; font-family: 'PretendardM'; padding: 20px 10px; box-sizing: border-box; overflow-y: auto; background-color: #F5F5F5;  margin-bottom: 20px;}

/* 아래의 모든 코드는 영역::코드로 사용 */
.privacyAgreeWrap .agreeArea .textArea::-webkit-scrollbar {
    width: 5px;  /* 스크롤바의 너비 */
}

.privacyAgreeWrap .agreeArea .textArea::-webkit-scrollbar-thumb {
    background: #007FFF; /* 스크롤바의 색상 */
    border-radius: 10px;
}

.privacyAgreeWrap .agreeArea .textArea::-webkit-scrollbar-track {
    background: #C8C8C8;  /*스크롤바 뒷 배경 색상*/
    border-radius: 10px !important;
}
.privacyAgreeWrap .agreeArea .cl_checkbox { justify-content: flex-start}
.privacyAgreeWrap .agreeArea .cl_checkbox input.small[type="checkbox"] + label { color: #666;}

.privacyAgreeWrap .allAgree .buttonArea { display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.privacyAgreeWrap .allAgree .cl_checkbox input.small[type="checkbox"] + label span{ font-family: 'PretendardB';}


/*
* ********************************************  주문 조회 및 faq  ********************************************
*/
.orderInquiryWrap .cl_pagination,
.faqWrap .cl_pagination { margin-top: 50px;}

.orderInquiryWrap .inputArea,
.faqWrap .inputArea { position: relative }

.orderInquiryWrap .inputArea .inputSearch,
.faqWrap .inputArea .inputSearch { display: none;}

.faqWrap .wordBtn.m { display: none;}

/*
* ********************************************  장바구니  ********************************************
*/
.shopCartWrap.section { padding-top: 0;}
.shopCartWrap .shopCart { padding: 50px 30px; box-sizing: border-box; margin-bottom: 30px;}
.shopCartWrap .btnArea { display: flex; justify-content: center; align-items: center; gap: 30px;}
.shopCartWrap .btnArea .deleteOrder { background-color: #FF7D7D; border-color: #FF7D7D}
.shopCartWrap .shopCart .title { font-size: 40px; color: #000; font-family: 'PretendardSB'; margin-bottom: 50px; }

.shopCartWrap .shopCart .shopping:first-child { padding-top: 0;}
.shopCartWrap .shopCart .shopping:last-child { padding-bottom: 0;}
.shopCartWrap .shopCart .shopping { display: flex; align-items: center; justify-content: space-between; padding: 70px 0; box-sizing:border-box;}
.shopCartWrap .shopCart .shopping .leftArea { margin-right: 20px;}
.shopCartWrap .shopCart .shopping .leftArea input[type="checkbox"] { width: 28px; height: 28px;}
.shopCartWrap .shopCart .shopping .rightArea { position: relative; display: flex; align-items: flex-end; justify-content: space-between; flex: 1;}
.shopCartWrap .shopCart .shopping .rightArea:before { content: '';position: absolute; bottom: -70px; left: 0; width: 100%; max-width:1500px; height: 1px; background-color: #C8C8C8;}
.shopCartWrap .shopCart .shopping:last-child .rightArea:before { display: none;}

.shopCartWrap .shopCart .shopping .rightArea .shopList { display: flex; align-items: center; margin-right: 15px;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .imgArea { margin-right: 45px;}

.shopCartWrap .shopCart .shopping .rightArea .shopList .listTit { font-size: 30px; color: #000; font-family: 'PretendardM'; margin-bottom: 20px;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .listTxt { font-size: 22px; color: #4f4f4f; font-family: 'PretendardSB'; margin-bottom: 5px;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .listNum { display: flex; align-items: center; gap: 20px; font-size: 18px; color: #999;; font-family: 'PretendardM'; margin-bottom: 5px;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .listOption {  font-size: 18px; color: #4f4f4f;; font-family: 'PretendardM'; }
.shopCartWrap .shopCart .shopping .rightArea .shopList .listOption .opTit > span {  color: #999;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .listOption .com:last-child,
.shopCartWrap .shopCart .shopping .rightArea .shopList .listOption .slash:last-child { display: none;}
.shopCartWrap .shopCart .shopping .rightArea .shopList .listPrice { margin-top: 75px; font-size: 32px; color: #f00; font-family: 'PretendardSB';}

.shopCartWrap .shopCart .shopping .rightArea .deleteBtn { display: none;}
.shopCartWrap .shopCart .shopping .rightArea .optionBtn { white-space: nowrap;}


.section { padding-bottom: 100px; padding-top: 50px; box-sizing: border-box; }

/*
    ********* search 타이틀 공통  ********
*/


.cl_searchTitle { display: flex; align-items: center; justify-content: space-between; }
.cl_searchTitle .searchArea { display: flex; align-items: center; justify-content: center; gap: 20px; }
.cl_searchTitle .searchArea .checkboxArea { display: flex; align-items: center; justify-content: center; gap: 20px; }
.cl_searchTitle .cl_title { margin-bottom: 0; }



/*
*  ********************************************리뷰페이지*******************************************

/***
* *** 리뷰list
*/

/*리뷰배너*/
.reviewList .section { padding-top: 90px;}
.reviewList .reviewBanner { position: relative; width: 100%; margin-top: 50px; }
.reviewList .reviewBanner .imgArea img { width: 100%; }
.reviewList .reviewBanner .textArea { position: absolute; bottom: 5vw; right: 5vw; color: #fff; text-align: right; }
.reviewList .reviewBanner .textArea .mainText { font-size: 40px; font-family: 'PretendardB'; }
.reviewList .reviewBanner .textArea .subText { font-size: 26px; font-family: 'PretendardM'; color: rgba(255, 255, 255, 0.80); margin-top: 40px; }
.reviewList .reviewBanner .textArea .subText.bold { color: #fff; font-family: 'PretendardB'; }

/*그리드*/
.reviewList .gridWrapper {overflow:hidden; margin-bottom: 50px;}
.reviewList .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 20px; margin:-20px}
.reviewList .grid .gridCell { box-sizing:border-box; width:calc(100% / 4); border:0 solid transparent; border-width:0 20px 10px 0; border-radius: 30px 30px 0px 0px; padding: 20px 0; box-sizing: border-box; cursor: pointer; }
.reviewList .grid .gridCell .imgArea img { width: 100%; border-radius: 30px 30px 0px 0px; }
.reviewList .grid .gridCell .textArea { margin-top: 25px; font-family: 'PretendardM'; font-size: 20px; }
.reviewList .grid .gridCell .textArea .mainText { font-size: 30px; color: #4F4F4F; font-family: 'PretendardSB'; }
.reviewList .grid .gridCell .textArea .name { color: #999; margin-top: 20px; }
.reviewList .grid .gridCell .textArea .date { color: #666; margin-top: 20px; }

/***
* *** 리뷰view
*/

/*리뷰헤더*/
.reviewView .section { padding-top: 60px;}
.reviewView .reviewHeader { display: flex; align-items: center; justify-content: space-between; font-family: 'PretendardM'; font-size: 20px;
    border-radius: 10px; background: #EEF6FF; padding: 10px 20px; box-sizing: border-box; }
.reviewView .reviewHeader .info { display: flex; align-items: center; justify-content: center; gap: 44px; }
.reviewView .reviewHeader .info > li { position: relative; color: #4F4F4F; }
.reviewView .reviewHeader .info > li:nth-child(1):after { display: none; }
.reviewView .reviewHeader .info > li:after { content: ''; position: absolute; top: 50%; left: -33px; transform: translateY(-50%); width: 24px; height: 24px; background-image: url("/app/layout/web/images/sub/slashIcon.png"); background-repeat: no-repeat;  }
.reviewView .reviewHeader .viewCount { color: #999; }
/*리뷰컨텐트*/
.reviewView .reviewContent { padding: 50px 0; box-sizing: border-box; }
.reviewView .reviewContent .imgArea { width: 100%; max-width: 800px; margin: 0 auto; }
.reviewView .reviewContent .imgArea img { width: 100%; }
.reviewView .reviewContent .contentText { width: 100%; max-width: 800px; font-size: 20px; color: #333; font-family: 'PretendardM'; text-align: left; margin: 0 auto;  margin-top: 30px; }
/*버튼*/
.reviewView .buttonArea { display: flex; align-items: center; justify-content: center; gap: 30px; }

/***
* *** 리뷰form
*/
.reviewForm .section { padding-top: 60px;}
.reviewForm .formArea { padding-bottom: 50px; box-sizing: border-box; }
.reviewForm .formCol { display: flex; align-items: center; margin-bottom: 11px; }
.reviewForm .formCol:nth-last-child(1) { margin-bottom: 0; }
.reviewForm .formCol .attach { display: flex; align-items: center; gap: 20px; }
.reviewForm .formCol .title { width: 200px; color: #4F4F4F; font-size: 20px; font-family: 'PretendardM'; }
.reviewForm .formCol .title span { position: relative; }
.reviewForm .formCol .title span:before { content: '*'; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); color: #007FFF; font-size: 20px; }

.reviewForm .buttonArea { display: flex; align-items: center; justify-content: center; margin-top: 50px; }


/*
* ********************************************  주문자 정보  ********************************************
*/

.orderInformationWrap .privacyAgreeWrap .agreeArea .agreeTit,
.orderInformationWrap .privacyAgreeWrap .agreeArea .textArea { margin-bottom: 40px;}
.orderInformationWrap .privacyAgreeWrap .agreeArea input[type="checkbox"] + label{ font-size: 18px;}
.orderInformationWrap .privacyAgreeWrap .agreeArea .cl_checkbox{ gap: 20px;}

.orderInformationWrap .cl_borderBox{ padding: 50px 30px; box-sizing: border-box; margin-bottom: 50px;}
.orderInformationWrap .orderInformation:last-child { margin-bottom: 0;}
.orderInformationWrap .orderInformation .orderTit { font-size: 30px; color: #333; font-family: 'PretendardSB'; margin-bottom: 40px;}

.orderInformationWrap .orderInformation .orderText { display: flex; align-items: center;font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; margin-bottom: 20px; gap: 50px;}
.orderInformationWrap .orderInformation .orderText.align { align-items: flex-start;}
.orderInformationWrap .orderInformation .orderText.align .textArea { margin-top: 17px;}
.orderInformationWrap .orderInformation .orderText:last-child { margin-bottom: 0;}
.orderInformationWrap .orderInformation .orderText .textArea { width: 200px; }
.orderInformationWrap .orderInformation .orderText .textArea .star{ color: #007FFF}

.orderInformationWrap .orderInformation .orderText .inputArea { flex: 1}
.orderInformationWrap .orderInformation .orderText .inputArea .hyphen { display: inline-block; width: 10px; height: 2px; border-radius: 10px; background-color: #c8c8c8; margin: 0 5px; vertical-align: middle}
.orderInformationWrap .orderInformation .orderText .inputArea.name input{ width: 300px;}
.orderInformationWrap .orderInformation .orderText .inputArea.number input,
.orderInformationWrap .orderInformation .orderText .inputArea.phone input{ width: 100px;}
.orderInformationWrap .orderInformation .orderText .inputArea.email input{ width: 400px;}
.orderInformationWrap .orderInformation .orderText .inputArea.address input,
.orderInformationWrap .orderInformation .orderText .inputArea.orderHope input { width: 600px;}
.orderInformationWrap .orderInformation .orderText .addressArea .addressText >span { opacity: 0;}
.orderInformationWrap .orderInformation .orderText .inputArea.address input::placeholder,
.orderInformationWrap .orderInformation .orderText .inputArea.orderHope input::placeholder { color: transparent;}

.orderInformationWrap .orderInformation .orderText .inputArea.address { margin-top: 10px;}

.orderInformationWrap .orderInformation .orderTextArea .nameChk.mobile { display: none;}
.orderInformationWrap .orderInformation .orderText .orderArea { display: flex; align-items: center; gap: 20px;}
.orderInformationWrap .orderInformation .orderText .orderArea.name input[type="checkbox"] + label { font-size: 18px; color: #4f4f4f;}
.orderInformationWrap .orderInformation .orderText .textBox { display: flex; align-items:center; width: 200px; height: 54px; padding: 10px 20px; box-sizing: border-box; background-color: #f2f2f2;border-radius: 8px;  color: #999; font-family: 'PretendardM'; }
.orderInformationWrap .orderInformation .orderText button { display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 8px; border: 2px solid #c8c8c8; background-color: #fff; font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; cursor: pointer;}
.orderInformationWrap .orderInformation .orderText .exText { margin-left: 20px; color: #999;}

.orderInformationWrap .orderInformation.order2 .input { color: #999;}
.orderInformationWrap .orderInformation.order3 { display: flex; justify-content: space-between; gap: 68px;}
.orderInformationWrap .orderInformation.order3 .leftArea  { width: 59.9520%;}
.orderInformationWrap .orderInformation.order3 .rightArea  { width: 35.9712%;}

.orderInformationWrap .orderInformation .paymentArea { display: flex; align-items: center; gap: 40px; margin-bottom: 40px;}
.orderInformationWrap .orderInformation .paymentArea  input[type="radio"] { width: 15px; height: 15px; cursor: pointer;}
.orderInformationWrap .orderInformation .paymentArea  input[type="radio"] + label { font-size: 22px; color: #4f4f4f;  font-family: 'PretendardM';}

.orderInformationWrap .orderInformation  .paymentPage.mobile { display: none;}
.orderInformationWrap .orderInformation  .paymentPage .payPage { display: none; font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; margin-bottom: 40px;}
.orderInformationWrap .orderInformation  .paymentPage .payPage.on { display: block;}
.orderInformationWrap .orderInformation  .paymentPage .payPage .flexBox { margin-bottom: 20px; }
.orderInformationWrap .orderInformation  .paymentPage .payPage .flexBox:last-child { margin-bottom: 0; }

.orderInformationWrap .orderInformation .paymentPage select {
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
}
.orderInformationWrap .orderInformation .paymentPage select::-ms-expand{
    display:none;/*for IE10,11*/
}
.orderInformationWrap .orderInformation .paymentPage select {background:url('/app/layout/web/images/paymentArrow.png') no-repeat 97% 50%;}

.orderInformationWrap .orderInformation .paymentPage select { width: 100%; height: 100%; font-size: 20px;  font-family: 'PretendardM'; border: none; padding: 0 20px; box-sizing: border-box; cursor: pointer; color: #4f4f4f}
.orderInformationWrap .orderInformation .paymentPage select:invalid  { color: #C8C8C8; }
.orderInformationWrap .orderInformation .paymentPage option {color: #4f4f4f;}


.orderInformationWrap .orderInformation .paymentPage .flex { display: flex; align-items: center; gap: 20px; }
.orderInformationWrap .orderInformation .paymentPage .flex.phoneArea { gap: 10px;}
.orderInformationWrap .orderInformation .paymentPage .flex.align { align-items: flex-start;}
.orderInformationWrap .orderInformation .paymentPage .flex .titleArea { width: 150px; padding: 10px; box-sizing: border-box; }
.orderInformationWrap .orderInformation .paymentPage .flex .titleArea .hideBr { display: none;}
.orderInformationWrap .orderInformation .paymentPage .flex.align .titleArea { margin-top: 4px;}

.orderInformationWrap .orderInformation .paymentPage .listText { margin-top: 40px; font-size: 20px; color: #666; font-family: 'PretendardM';}
.orderInformationWrap .orderInformation .paymentPage .listText li { position: relative; padding-left: 30px; box-sizing: border-box; line-height: 34px;}
.orderInformationWrap .orderInformation .paymentPage .listText li:before { content: '' ; position: absolute; top: 50%; transform: translateY(-50%); left: 15px;width: 4px; height: 4px; border-radius: 100%; background-color: #4f4f4f;}

.orderInformationWrap .orderInformation .paymentPage .selectArea { width: 200px; height: 54px; border-radius: 8px; border: 1px solid #c8c8c8; box-sizing: border-box;}

.orderInformationWrap .orderInformation .paymentPage .inputArea { width: 300px;}
.orderInformationWrap .orderInformation .paymentPage .inputArea .input { width: 100%;}
.orderInformationWrap .orderInformation .paymentPage .inputArea.number { width: 400px; margin-bottom: 20px;}
.orderInformationWrap .orderInformation .paymentPage .inputArea.period { width: 200px;}
.orderInformationWrap .orderInformation .paymentPage .inputArea.cvc { width: 100px;}
.orderInformationWrap .orderInformation .paymentPage .inputArea.phone { width: 100px;}
.orderInformationWrap .orderInformation .paymentPage .inputArea.payName,
.orderInformationWrap .orderInformation .paymentPage .inputArea.payCnt { width: 150px;}


.orderInformationWrap .orderInformation .paymentPage .tabPayPage { display: none;}
.orderInformationWrap .orderInformation .paymentPage .tabPayPage.on { display: block;}

.orderInformationWrap .orderInformation .paymentPage .tabArea { display: flex; align-items: center; gap: 20px; margin-bottom: 40px;}
.orderInformationWrap .orderInformation .paymentPage .tabArea .tabPayBtn { display: flex; justify-content: center; align-items: center; height: 54px; font-size: 20px; color: #4f4f4f; font-family: 'PretendardM'; padding: 0 20px; box-sizing: border-box; border-radius: 8px; border: 2px solid #c8c8c8; cursor: pointer;}
.orderInformationWrap .orderInformation .paymentPage .tabArea .tabPayBtn.on { color:#007FFF; border-color: #007FFF; }

.orderInformationWrap .orderInformation .paymentPage .hyphen {display: inline-block;width: 10px;height: 2px;border-radius: 10px;background-color: #c8c8c8;vertical-align: middle;}
.orderInformationWrap .orderInformation .paymentPage .accountTxt { display: flex; justify-content: center; align-items: center; height: 54px; padding:0 20px; box-sizing: border-box; border-radius: 8px; background-color: #f2f2f2; }
.orderInformationWrap .orderInformation .paymentPage .accountTxt .hideBr { display: none;}
.orderInformationWrap .orderInformation .paymentPage .hopeText,
.orderInformationWrap .orderInformation .paymentPage .depositDay { display: flex; align-items: center; width: 200px; height: 54px; padding: 0 20px; box-sizing: border-box; background-color: #f2f2f2; border-radius: 8px; color: #999;}
.orderInformationWrap .orderInformation .paymentPage .hopeBtn { display: flex; align-items: center; height: 54px; padding: 0 20px; box-sizing: border-box; background-color: #fff;border:2px solid #c8c8c8; border-radius: 8px; cursor: pointer;}
.orderInformationWrap .orderInformation .paymentPage .infoTxt { font-size: 18px; color: #4796E5; margin-bottom: 40px;}
.orderInformationWrap .orderInformation .paymentPage .exText { font-size: 18px; color: #999;}

.orderInformationWrap .orderInformation .paymentPage .paymentCount img { display: block; cursor: pointer;}
.orderInformationWrap .orderInformation .paymentPage .countText { width: 24px; text-align: center; font-size: 30px;  font-family: 'PretendardSB';}

.orderInformationWrap .orderInformation .paymentPage .payAccount { height: 140px;padding-bottom: 10px;  overflow-y: auto; padding-right: 10px; box-sizing: border-box;}
.orderInformationWrap .orderInformation .paymentPage .payAccount .won { margin-left: -10px;}


.orderInformationWrap .orderInformation .payInfo { display: flex; align-items: center; font-size: 18px; color: #FF7D7D; font-family: 'PretendardM'; gap: 10px; margin-bottom: 20px;}
.orderInformationWrap .orderInformation .orderAgree { justify-content: flex-start; gap: 20px;}
.orderInformationWrap .orderInformation .orderAgree input[type="checkbox"] + label { font-size: 18px; color: #666;}

.orderInformationWrap .orderInformation.order3 .rightArea .orderTit { margin-bottom: 100px;}
.orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText { display: flex; justify-content: space-between; align-items: center; font-size: 22px; color: #4f4f4f; font-family: 'PretendardM'; margin-bottom: 30px;}
.orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText .totalCnt { font-size: 34px; color: #f00;}

.orderInformationWrap .orderInformation.order3 .rightArea .totalAgree { justify-content: flex-start; margin-bottom: 20px;}
.orderInformationWrap .orderInformation.order3 .rightArea .totalAgree input[type="checkbox"] + label { font-size: 18px; color: #666;}



/*
 *********************  주문자 정보 ( 날짜 팝업 )
*/
.orderInformationWrap .dayPopupWrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;}
.orderInformationWrap .dayPopupWrap .dayPopup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; border-radius: 10px; width: 560px;}

.orderInformationWrap .dayPopupWrap .dayPopup .titleArea { display: flex; align-items: center; justify-content: space-between; ;padding: 30px; box-sizing: border-box; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);}
.orderInformationWrap .dayPopupWrap .dayPopup .titleArea .title { font-size: 20px; color: #999; font-family: 'PretendardSB';}
.orderInformationWrap .dayPopupWrap .dayPopup .titleArea .closeBtn { cursor: pointer;}

.orderInformationWrap .dayPopupWrap .dayPopup .dayArea { padding: 30px 80px; box-sizing: border-box; }
.orderInformationWrap .dayPopupWrap .dayPopup .dayArea .dayBtn { margin-top: 20px;}

@media (max-width: 1668px) {
    .contentWrap { padding-right: 20px; padding-left: 20px; box-sizing: border-box;}

    /*
    * **********************  푸터  **********************
    */

    .footerWrap .footer .leftArea { padding: 20px 30px; margin-right: 39px;}
    .footerWrap .footer .leftArea .footerLogo { margin-bottom: 20px;}
    .footerWrap .footer .rightArea .left li { margin-bottom: 15px;}

    /*
    * **********************  gnb  **********************
    */
    /*.gnbWrap .gnb { padding: 30px 80px 395px 80px; }*/
    .gnbWrap .gnb { padding: 30px 15px 395px  }
    /*.gnbWrap .gnb .swiper-wrapper { justify-content: flex-start;}*/
    /* 메인 gnb depth 위치가 다름 */
    /*.main .gnbWrap .gnb { padding: 380px 80px 30px 80px; margin-top: -325px;}*/
    .main .gnbWrap .gnb { padding: 380px 15px 30px ; margin-top: -325px;}

    /*
    * **********************  메인 비주얼  **********************
    */

    .mainVisualWrap .contentWrap { padding: 0;}
    .mainVisualWrap .swiper-button-next { right: 40px;}
    .mainVisualWrap .swiper-button-prev { left: 40px;}

    /*
    * **********************  메인 베스트 셀러 **********************
    */
    .bestSeller { padding: 80px 0; }
    .bestSeller .cl_titleArea { margin-bottom: 40px;}
    .bestSeller .sellerSwiper { padding: 0 ;}
    .bestSeller .sellerSwiper .swiper-wrapper { padding: 60px 0; }

    .bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .title {font-size: 24px; ;}
    .bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .subTitle {font-size: 18px; }
    .bestSeller .sellerSwiper .swiper-slide .hoverText .textArea .text .subTitle .num { font-size: 40px;}



    /*
    * **********************  trendingCategory **********************
    */

    .trendingCategory { padding: 120px 0;}

    /*
    * **********************  SaleItemWrap **********************
    */
    .SaleItemWrap { padding: 120px 0 50px; }

    /*
    * ********************************************  서브페이지 상품 리스트 ********************************************
    */

    .categoryListWrap .cl_categorySwiper {  padding-left: 0; padding-right: 10px; justify-content: flex-start;}
    .categoryListWrap .listArea .leftArea { flex: 1; margin-right: 20px;}
    .categoryListWrap .cl_pagination { margin-top: -40px;}


    /*
    * ********************************************  서브페이지 디테일 상품 정보 및 주문 ********************************************
    */

    .detailWrap .detail { justify-content: space-between ; padding-left: 20px; box-sizing: border-box;}
    .detailWrap .detail .detailSwiperWrap { width: 500px;}
    .detailWrap .detail .itemArea .gridWrapper { width: 100%;}
    .detailWrap .estimateWrap { padding: 20px;}
    .detailWrap .estimateWrap .estimate {  gap: 20px;}
    .detailWrap .estimateWrap .estimate .totalText .text { display: block;}




    /*
     *  ********************************************리뷰페이지*******************************************
     */

    /***
    * *** 리뷰list
    */

    /*리뷰 리스트*/
    .reviewList .grid .gridCell .textArea { font-size: 18px; margin-top: 20px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 26px; }


    /***
    * *** 리뷰view
    */

    /*리뷰헤더*/
    .reviewView .reviewHeader { font-size: 18px; }
    /*리뷰컨텐트*/
    .reviewView .reviewContent .contentText { font-size: 18px; }

    /***
    * *** 리뷰form
    */
    .reviewForm .formArea { padding-bottom: 40px; }
    .reviewForm .formCol .title { font-size: 18px; }


    /*
    * ********************************************  주문자 정보  ********************************************
    */


    .orderInformationWrap .orderInformation.order3 { gap: 20px;}
    .orderInformationWrap .orderInformation.order3 .leftArea  { width: 63.9520%;}
    .orderInformationWrap .orderInformation.order3 .rightArea  { width: 32.9712%;}

    .orderInformationWrap .orderInformation .paymentPage select { padding: 0 10px;}

    .orderInformationWrap .orderInformation .paymentPage .inputArea .input { padding: 10px;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea { width: 230px;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payName,
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payCnt { width: 100px;}

    .orderInformationWrap .orderInformation .paymentPage .accountTxt { font-size: 18px; padding: 0 10px;}
    .orderInformationWrap .orderInformation .paymentPage .hopeText,
    .orderInformationWrap .orderInformation .paymentPage .depositDay { padding: 0 10px;}




}
@media (max-width: 1500px) {
    .gnbWrap .gnb { padding: 30px 60px 395px 80px; }
    .gnbWrap .gnb .swiper-wrapper { justify-content: flex-start;}
    .main .gnbWrap .gnb { padding: 380px 60px 30px 80px; margin-top: -325px;}
}

@media (max-width: 1200px) {
    /*
    * **********************  헤더  **********************
    */
    .header {  padding: 20px 15px; }
    .header .leftArea .logoArea { width: 180px;}
    .header .leftArea .logoArea img { width: 100%;}
    .header .leftArea .headerList .list { font-size: 16px; margin-right: 15px;}
    .header .rightArea .loginInfoArea .line { margin-left: 5px; margin-right: 10px;}
    .header .rightArea .searchArea { width: 300px; padding:5px 15px; margin-top: 15px; }
    .header .rightArea .searchArea input { font-size: 16px; }

    /*
    * **********************  푸터  **********************
    */
    .footerWrap .footerArea{ padding: 30px 0; }
    .footerWrap .footer { font-size: 15px;}
    .footerWrap .footer .text { margin-bottom: 10px;}

    .footerWrap .footer .leftArea {flex: 1; padding: 15px; margin-right: 20px;}
    .footerWrap .footer .leftArea .footerLogo { margin-bottom: 15px; width: 150px;}
    .footerWrap .footer .leftArea .footerLogo img { width: 100%}
    .footerWrap .footer .rightArea {flex: 2; gap: 10px}
    .footerWrap .footer .rightArea .left li { margin-bottom: 10px;}

    .footerWrap .footer .rightArea .middle .title { font-size: 16px;}
    .footerWrap .footer .rightArea .middle .snsArea { gap: 15px; margin-top: 15px; margin-bottom: 15px;}
    .footerWrap .footer .rightArea .right .titleArea { margin-bottom: 20px; }
    .footerWrap .footer .rightArea .right .titleArea .title { font-size: 18px; margin-bottom: 5px;}
    .footerWrap .footer .rightArea .right .titleArea .number { font-size: 27px; }

    /*
    * ********************** quick 메뉴  **********************
    */

    .quickMenuWrap { position: fixed; bottom: 71px; right: 30px; z-index: 99 }
    .quickMenuWrap .menuList { width: 60px;}
    .quickMenuWrap .menuList .list { height: 50px; font-size: 16px; }
    .quickMenuWrap .menuList img { width: 25px}
    .quickMenuWrap .menuList .arrowArea .btn { height: 40px;}



    /*
     * **********************  메인 비주얼  **********************
     */

    .mainVisualWrap .contentWrap { padding: 0;}
    .mainVisualWrap .swiper-button-next { right: 5%;}
    .mainVisualWrap .swiper-button-prev { left: 5%;}
    .mainVisualWrap .swiper-button-next,
    .mainVisualWrap .swiper-button-prev { width: 40px; height: 40px;}
    .mainVisualWrap .swiper-button-prev:after,
    .mainVisualWrap .swiper-button-next:after { width: 40px; height: 40px; background-size: 40px;}


    /*
    * **********************  메인 베스트 셀러 **********************
    */

    .bestSeller { padding: 50px 0; }
    .bestSeller .cl_titleArea { margin-bottom: 25px;}
    .bestSeller .sellerSwiper { padding: 0 ;}
    .bestSeller .sellerSwiper .swiper-slide.swiper-slide-active:hover{ transform: scale(1.2); }

    .bestSeller .swiper-button-next { right: 10px;}
    .bestSeller .swiper-button-prev { left: 10px;}
    .bestSeller .swiper-button-next,
    .bestSeller .swiper-button-prev { width: 40px; height: 40px;}
    .bestSeller .swiper-button-prev:after,
    .bestSeller .swiper-button-next:after { width: 40px; height: 40px; background-size: 40px;}


    /*
    * ********************************************  서브페이지 상품 리스트 ********************************************
    */
    .categoryListWrap .subVisual { margin-top: 30px;}
    .categoryListWrap .listArea { margin-top: 50px; margin-bottom: 60px;}
    .categoryListWrap .listArea .titleArea {  margin-bottom: 20px;}
    .categoryListWrap .listArea .titleArea .rightArea .listText { margin-right: 10px; font-size: 16px; }
    .categoryListWrap .cl_pagination { margin-top: -20px;}


    /*
    * ********************************************  서브페이지 디테일 상품 정보 및 주문 ********************************************
    */
    .detailWrap { padding-top: 30px; padding-bottom: 60px;}

    .detailWrap .detail { gap: 50px; margin-bottom: 30px;}
    .detailWrap .detail .detailSwiperWrap { width: 400px}

    .detailWrap .detail .swiper-button-next { right: -20px;}
    .detailWrap .detail .swiper-button-prev { left: -20px;}
    .detailWrap .detail .swiper-button-prev,
    .detailWrap .detail .swiper-button-next { width: 40px; height: 40px; }
    .detailWrap .detail .swiper-button-prev:after,
    .detailWrap .detail .swiper-button-next:after { width: 40px; height: 40px;}
    .detailWrap .detail .swiper-button-prev:after{ background-size: 40px}
    .detailWrap .detail .swiper-button-next:after{ background-size: 40px}

    .detailWrap .detail .swiper-pagination .swiper-pagination-bullet { width: 50px;  }


    .detailWrap .detail .title { font-size: 35px; }

    .detailWrap .detail .infoArea { font-size: 18px; margin-bottom: 30px;}
    .detailWrap .detail .infoArea .price { font-size: 26px; }
    .detailWrap .detail .itemArea { margin-bottom: 30px;}
    .detailWrap .detail .itemArea .itemTit { font-size: 18px; }


    .detailWrap .detail .itemArea .grid .gridCell { width: 100px;}

    .detailWrap .detail .orderBtnArea .orderText { font-size: 16px; }

    .detailWrap .estimateWrap { margin-bottom: 30px;}
    .detailWrap .estimateWrap .quotationTit { font-size: 28px; }

    .detailWrap .estimateWrap .estimate { gap: 2px; font-size: 16px; justify-content: space-between;}
    .detailWrap .estimateWrap .estimate .textArea .flex { gap: 5px;}
    .detailWrap .estimateWrap .estimate .quantityArea,
    .detailWrap .estimateWrap .estimate .designArea,
    .detailWrap .estimateWrap .estimate .makingArea { flex: 1}



    .detailWrap .estimateWrap .estimate .totalArea{ font-size: 16px;}
    .detailWrap .estimateWrap .estimate .totalText{ font-size: 16px;}
    .detailWrap .estimateWrap .estimate .totalText .totalNum { font-size: 26px;}

    .detailWrap .detailImgArea { padding: 0 20px; box-sizing: border-box;}
    .detailWrap .detailImgArea img { width: 100%;}
    .detailWrap .detailBtnArea { margin-bottom: 50px;}







    /*
    * ********************************************  주문자 정보  ********************************************
    */

    .orderInformationWrap .cl_borderBox{ padding: 40px 20px;  margin-bottom: 30px;}
    .orderInformationWrap .privacyAgreeWrap .agreeArea .agreeTit { font-size: 22px; margin-bottom: 30px;}
    .orderInformationWrap .orderInformation .orderTit { font-size: 22px; margin-bottom: 30px;}

    .orderInformationWrap .orderInformation .orderText .textArea { width: 140px;}
    .orderInformationWrap .orderInformation .orderText .inputArea.address input,
    .orderInformationWrap .orderInformation .orderText .inputArea.orderHope input { width: 470px;}
    .orderInformationWrap .orderInformation .orderText .inputArea.address { margin-top: 10px;}
    .orderInformationWrap .orderInformation .orderText .exText { font-size: 16px; display: block; margin-left: 0; margin-top: 10px;}



    .orderInformationWrap .orderInformation.order3 .leftArea  { width:71%}
    .orderInformationWrap .orderInformation.order3 .rightArea  { width: 310px;}

    .orderInformationWrap .orderInformation .paymentArea { gap: 20px; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] { width: 12px; height: 12px;}
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] + label { font-size: 18px;}

    .orderInformationWrap .orderInformation  .paymentPage .payPage { font-size: 16px;  margin-bottom: 30px;}


    .orderInformationWrap .orderInformation .paymentPage select { font-size: 16px;}



    .orderInformationWrap .orderInformation .paymentPage .flex { gap: 10px; }
    .orderInformationWrap .orderInformation .paymentPage .flex.phoneArea { gap: 5px;}

    .orderInformationWrap .orderInformation .paymentPage .flex .titleArea { width: 130px; }

    .orderInformationWrap .orderInformation .paymentPage .flex.align .titleArea { margin-top: 5px;}

    .orderInformationWrap .orderInformation .paymentPage .listText { margin-top: 20px; font-size: 16px; }
    .orderInformationWrap .orderInformation .paymentPage .listText li { padding-left: 20px; line-height: 34px;}
    .orderInformationWrap .orderInformation .paymentPage .listText li:before { left: 9px;}

    .orderInformationWrap .orderInformation .paymentPage .selectArea { width: 150px;}


    .orderInformationWrap .orderInformation .paymentPage .inputArea { width: 200px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input {  font-size: 16px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input::placeholder { font-size: 16px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.number { width: 270px; }
    .orderInformationWrap .orderInformation .paymentPage .inputArea.period { width: 150px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.cvc { width: 70px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.phone { width: 100px;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea { width: 200px;}


    .orderInformationWrap .orderInformation .paymentPage .tabArea { margin-bottom: 30px; gap: 10px;}
    .orderInformationWrap .orderInformation .paymentPage .tabArea .tabPayBtn { font-size: 18px;  padding: 0 15px; }


    .orderInformationWrap .orderInformation .paymentPage .accountTxt { font-size: 16px; }
    .orderInformationWrap .orderInformation .paymentPage .accountTxt .hideBr { display: block;}
    .orderInformationWrap .orderInformation .paymentPage .infoTxt { font-size: 16px; margin-bottom: 40px;}
    .orderInformationWrap .orderInformation .paymentPage .exText { font-size: 16px;}

    .orderInformationWrap .orderInformation .paymentPage .paymentCount img { width: 30px;}
    .orderInformationWrap .orderInformation .paymentPage .countText { width: 20px; font-size: 22px;}

    .orderInformationWrap .orderInformation .paymentPage .payAccount .won { margin-left: -5px}


    .orderInformationWrap .orderInformation .payInfo {  font-size: 16px; margin-bottom: 15px;}
    .orderInformationWrap .orderInformation .orderAgree { gap: 10px;}
    .orderInformationWrap .orderInformation .orderAgree input[type="checkbox"] + label { font-size: 16px; }

    .orderInformationWrap .orderInformation.order3 .rightArea .orderTit { margin-bottom: 60px;}
    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText {  font-size: 16px; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText .totalCnt { font-size: 24px; }


    .orderInformationWrap .orderInformation.order3 .rightArea .totalAgree input[type="checkbox"] + label { font-size: 14px; }










}

@media (max-width: 1024px) {
    /*
    * **********************  헤더  **********************
    */
    .header {  padding: 20px 15px; }
    .header .leftArea .logoArea { width: 130px;}
    .header .leftArea .headerList .list { font-size: 14px; margin-right: 15px;}
    .header .rightArea .loginInfoArea .line { margin-left: 5px; margin-right: 10px;}
    .header .rightArea .loginInfoArea .list { font-size: 14px;}
    .header .rightArea .searchArea { width: 240px;  margin-top: 10px; }
    .header .rightArea .searchArea .searchBtn { width: 18px; height: 18px; background-size: 18px;}
    .header .rightArea .searchArea input { font-size: 14px; }
    .header .rightArea .searchArea input::placeholder { font-size: 14px;}

    /*
     * **********************  푸터  **********************
     */
    .footerWrap .footer .brNon { display: block;}
    .footerWrap .footer .leftArea {padding: 10px 10px 10px 0;margin-right: 10px;}
    .footerWrap .footer .rightArea .middle .snsArea { gap: 10px;}

    /*
    * **********************  gnb  **********************
    */
    .gnbWrap  { height: 100px;}
    .main .gnbWrap { height: 120px;}
    .gnbWrap .gnb {  padding: 20px 60px 235px 60px;}

    .gnbWrap .swiper-slide .depth { width: 130px; }
    .gnbWrap .swiper-slide .depth li { font-size: 14px;  padding: 10px 0;}

    .gnbWrap .slideArea {  padding-bottom: 10px;}
    .gnbWrap .slideArea img { width: 50px;}
    .gnbWrap .slideArea .title { font-size: 14px; }

    /* 메인 gnb depth 위치가 다름 */
    .main .gnbWrap .gnb { padding: 230px 60px 20px 60px; margin-top: -206px;}



    /*
    * **********************  trendingCategory **********************
    */

    .trendingCategory { padding: 80px 0; }
    .trendingCategory .categoryArea { margin-bottom: 30px;}

    /*
    * **********************  eventWrap **********************
    */
    .eventWrap { margin: 30px 0;}
    .eventWrap img { width: 100%;}


    /*
    * **********************  SaleItemWrap **********************
    */
    .SaleItemWrap { padding: 150px 0 70px; box-sizing: border-box;}

    /*
      * ********************************************  서브페이지 상품 리스트 ********************************************
      */

    .categoryListWrap .cl_title { text-align: center;}
    .categoryListWrap .cl_categorySwiper { padding-right: 0;}
    .categoryListWrap .listArea .leftArea {  margin-right:0;}
    .categoryListWrap .listArea .titleArea .rightArea{ display: none;}
    .categoryListWrap .cl_pagination { margin-top: -20px;}




    /*
    * ********************************************  서브페이지 디테일 상품 정보 및 주문 ********************************************
    */
    .detailWrap .detail { padding-left: 0;}
    .detailWrap .detail .detailSwiperWrap { width: 300px}

    .detailWrap .detail .swiper-button-next { right: -15px;}
    .detailWrap .detail .swiper-button-prev { left: -15px;}
    .detailWrap .detail .swiper-button-prev,
    .detailWrap .detail .swiper-button-next { width: 30px; height: 30px; }
    .detailWrap .detail .swiper-button-prev:after,
    .detailWrap .detail .swiper-button-next:after { width: 30px; height: 30px;}
    .detailWrap .detail .swiper-button-prev:after{ background-size: 30px}
    .detailWrap .detail .swiper-button-next:after{ background-size: 30px}

    .detailWrap .detail .swiper-pagination .swiper-pagination-bullet { width: 30px;  }


    .detailWrap .detail .title { font-size: 28px; margin-bottom: 15px;}

    .detailWrap .detail .infoArea { font-size: 16px; margin-bottom: 15px;}
    .detailWrap .detail .infoArea .flex { margin-bottom: 15px;}
    .detailWrap .detail .infoArea .price { font-size: 20px; }
    .detailWrap .detail .itemArea { margin-bottom: 15px;}
    .detailWrap .detail .itemArea .itemTit { font-size: 16px; }

    .detailWrap .detail .itemArea .grid { gap: 15px;}
    .detailWrap .detail .itemArea .grid .gridCell { width: 80px;}

    .detailWrap .detail .orderBtnArea .orderText { font-size: 16px; }

    .detailWrap .estimateWrap .quotationTit { font-size: 24px; margin-bottom: 30px;}

    .detailWrap .estimateWrap .estimate { gap: 2px; font-size: 16px; justify-content: space-between;}
    .detailWrap .estimateWrap .estimate .textArea .flex { gap: 5px;}
    .detailWrap .estimateWrap .estimate .quantityArea,
    .detailWrap .estimateWrap .estimate .designArea,
    .detailWrap .estimateWrap .estimate .makingArea { flex: 1}
    .detailWrap .estimateWrap .estimate .icon { margin-bottom: 6px;}
    .detailWrap .estimateWrap .estimate .icon img { width: 30px;}


    .detailWrap .estimateWrap .estimate .totalArea{ font-size: 16px;}
    .detailWrap .estimateWrap .estimate .totalText{ font-size: 16px;}
    .detailWrap .estimateWrap .estimate .totalText .totalNum { font-size: 22px;}






    /*
    * ********************************************  주문 페이지 팝업  ********************************************
    */

    .detailPopupWrap .popup {  padding: 20px 10px 20px 20px; }
    .detailPopupWrap .detailPopup {top: 50px; bottom: 50px; max-width:730px;}
    .detailPopupWrap .detailCloseBtn { margin: 0; padding-right: 15px;}

    .detailPopupWrap .detailPopup .orderTitle { margin-top: 50px; padding-right: 10px; }
    .detailPopupWrap .detailPopup .orderTitle .tit { font-size: 24px; }
    .detailPopupWrap .detailPopup .orderTitle .subTxt { font-size: 18px; }

    .detailPopupWrap .detailPopup .selectArea { margin-top: 30px; margin-bottom: 40px; height: calc(100% - 300px);padding-right: 10px;}
    .detailPopupWrap .detailPopup .selectArea .grid { padding:10px 0 0 10px; margin:-10px}
    .detailPopupWrap .detailPopup .selectArea .grid .gridCell {border-width:0 10px 20px 0;}
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea {  margin-bottom: 10px;}
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea:hover:before { border-width: 2px; }
    .detailPopupWrap .detailPopup .selectArea .grid .textArea .price { font-size: 18px; }
    .detailPopupWrap .detailPopup .orderSaveBtn { padding-right: 10px;}

    /* 주문확인 후 최종 상품확인 창  */
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .hideBr { display: block;}
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText {  margin-bottom: 20px;}



    .detailPopupWrap .customPopup { width: 101.5%}
    .detailPopupWrap .customPopup .customBtnArea { padding-right: 10px;}

    .detailPopupWrap .customPopup .customListArea { padding-right: 10px;}
    .detailPopupWrap .customPopup .customListArea .list {;margin-right: 100px;  }
    .detailPopupWrap .customPopup .customListArea .list .listTit { top: -25px;  ;font-size: 16px; margin-bottom: 5px;}
    .detailPopupWrap .customPopup .customListArea .list .listDot {  width: 15px; height: 15px; }
    .detailPopupWrap .customPopup .customListArea .list .listDot:before { width: 100px; }

    .detailPopupWrap .customPopup .customListArea .list.active .listTit { top: -35px; font-size: 18px  }
    .detailPopupWrap .customPopup .customListArea .list.active:before { top: -8px; left: -7px; width: 31px; height: 30px; background-size: 31px 30px;}
    .detailPopupWrap .customPopup .customListArea .list .checkIcon { top: -50px;}

    /* 커스텀 팝업에서 저장 안하고 닫을 경우 alert팝업  */
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup {  padding: 25px 15px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea { padding-bottom: 15px; margin-bottom: 15px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .imgArea { margin-right: 10px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .imgArea img { width:  30px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .text { font-size: 16px}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .info { font-size: 14px; margin-top: 15px;}

    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea { font-size: 16px; }
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea .save {  margin-left: 15px; }


    /*
        *** 커스텀 팝업 공통
    */

    .detailPopupWrap .customPopup .customPop .contentArea { padding-right: 10px; margin-top: 30px;}
    .detailPopupWrap .customPopup .customPop .imgBox { width: 50%; padding: 5px 0; margin-right: 10px;}
    .detailPopupWrap .customPopup .customPop .imgBox img { width: 100%}

    .detailPopupWrap .customPopup .customPop .popupBtnArea {  margin-top: 40px; padding-right: 10px;}
    .detailPopupWrap .customPopup .customPop .popupBtnArea > div:first-child { margin-right: 20px}

    .detailPopupWrap .customPopup .customPop .popupTitle { margin-top: 30px; padding-right: 10px;}
    .detailPopupWrap .customPopup .customPop .popupTitle .title { font-size: 26px; }

    .detailPopupWrap .customPopup .customPop .popupTitle .subText { font-size: 18px; }

    .detailPopupWrap .customPopup .customPop .rightArea .text { font-size: 20px; margin-bottom: 20px;}

    .detailPopupWrap .customPopup .customPop .printBtn { width: 280px; height: 40px; font-size: 16px; margin-bottom: 20px; }

    .detailPopupWrap .customPopup .customPop .radioArea { margin-bottom: 30px;}
    .detailPopupWrap .customPopup .customPop .radioArea .radio { margin-right: 15px; font-size: 16px;}

    .detailPopupWrap .customPopup .customPop .radioArea .radio input { margin-right: 5px;}

    .detailPopupWrap .customPopup .customPop .type2 .radioArea { margin-bottom: 20px;}
    .detailPopupWrap .customPopup .customPop .type2 .printInfo { font-size: 15px; }
    .detailPopupWrap .customPopup .customPop .type2 .imgBox { padding: 0; width: auto; margin-right: 0;}
    .detailPopupWrap .customPopup .customPop .type2 .imgBox img { border-radius: 10px;}

    /* 커스텀 사이즈 팝업*/

    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea {height: 160px;}
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list {  margin-bottom: 15px; font-size: 24px; }
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list .count img { width: 30px;}
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeInfo { width: 250px; height: 40px; font-size: 18px; margin-top: 30px; margin-right: 10px; }

    .detailPopupWrap .customPopup .sizePopup .sizeInfoPopup { border: 10px solid #007FFF;}
    .detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .btnArea { margin-top: 20px; margin-right: 20px; }


    /* 커스텀 인쇄선택 팝업*/

    .detailPopupWrap .customPopup .printPopup .type2 .contentArea { margin-bottom: 20px;}
    .detailPopupWrap .customPopup .printPopup .rightArea .text { margin-bottom: 20px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .img { margin-right: 65px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .img img{ width: 80px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .logoText { font-size: 16px;  margin-right: 10px;}




    .detailPopupWrap .customPopup .customTable { padding-right: 15px; margin-right: 0; height: 300px; }


    .detailPopupWrap .customPopup .customTable .tableArea .tableNumber,
    .detailPopupWrap .customPopup .customTable .tableArea .tableSize { width: 25px; font-size: 16px;}
    .detailPopupWrap .customPopup .customTable .tableArea .borderBox { width: 200px; }
    .detailPopupWrap .customPopup .customTable .tableArea select { padding: 0 10px;}


    .detailPopupWrap .customPopup .customTable .tableArea .tableInfo { margin-right: 15px; margin-left: 5px;}



    /* 커스텀 앰블럼 팝업*/
    .detailPopupWrap .customPopup .emblemPopup .type2 .contentArea { margin-bottom: 20px;}
    .detailPopupWrap .customPopup .emblemPopup .rightArea .text { margin-bottom: 20px;}


    .detailPopupWrap .customPopup .selectBtnArea .borderBox {  width: 250px; height: 40px; margin-bottom: 20px;}

    .detailPopupWrap .customPopup .selectBtnArea .tableSelect select { padding: 0 15px;  font-size: 16px; background-size: 25px; }

    .detailPopupWrap .customPopup .selectBtnArea .tableFile { font-size: 16px;}

    /* 커스텀 마킹 팝업*/

    .detailPopupWrap .customPopup .makingPopup  .imgBox { padding: 5px;}
    .detailPopupWrap .customPopup .makingPopup .customTable {  margin-top: 30px;}
    .detailPopupWrap .customPopup .makingPopup .popupBtnArea { margin-top: 30px;}

    .detailPopupWrap .customPopup .makingPopup .titleArea { font-size: 16px;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .titleNum { margin-right: 10px;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .titleSize { margin-right: 11px;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .titleMaking { width: 160px; margin-bottom: 5px;}

    .detailPopupWrap .customPopup .makingPopup .tableArea .tableNumber{width: 27px;  }
    .detailPopupWrap .customPopup .makingPopup .tableArea .tableSize{ width: 43px; margin-right: 10px;}
    .detailPopupWrap .customPopup .makingPopup .tableArea .borderBox { width: 160px;}


    .detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert .closeBtn { top: 10px; right: 10px; width: 25px;}

    /* 커스텀 주문확인*/
    .detailPopupWrap .customPopup .checkPopup .imgBox { width: auto;}


    .detailPopupWrap .customPopup .checkPopup .titleArea { font-size: 16px; ;}

    .detailPopupWrap .customPopup .checkPopup .titleArea .titleNum { margin-right: 3px;}
    .detailPopupWrap .customPopup .checkPopup .titleArea .titleMaking { width: 130px; }

    .detailPopupWrap .customPopup .checkPopup .tableArea .tableNumber{width: 25px; margin-right: 10px;}
    .detailPopupWrap .customPopup .checkPopup .tableArea .tableSize{ width: 33px; }
    .detailPopupWrap .customPopup .checkPopup .tableArea .txt { width: 130px; }

    .detailPopupWrap .customPopup .checkPopup .scrollArea { margin-right: 0px; padding-bottom: 30px;}

    .detailPopupWrap .customPopup .checkPopup .totalArea { gap: 20px; padding: 15px 0; margin-right: 15px;  }
    .detailPopupWrap .customPopup .checkPopup .totalArea .totalLeft { gap:20px;}
    .detailPopupWrap .customPopup .checkPopup .totalArea .price { font-size: 18px;}


    /*
    * ********************************************  회원가입  ********************************************
    */
    .membershipWrap.section { padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
    .membershipWrap .membershipArea .membership { gap: 20px;}
    .membershipWrap { padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
    .membershipWrap .membershipArea .membership .memberBox .inputArea.idArea .chkBox { padding: 10px 5px; font-size: 16px;}


    /*
    * ********************************************  장바구니  ********************************************
    */
    .shopCartWrap.section { padding-top: 20px;}
    .shopCartWrap .shopCart { padding: 30px 15px; ;}
    .shopCartWrap .btnArea { gap: 15px;}
    .shopCartWrap .shopCart .title { font-size: 26px;  margin-bottom: 30px; }

    .shopCartWrap .shopCart .shopping {  padding: 40px 0; }
    .shopCartWrap .shopCart .shopping .leftArea input[type="checkbox"] { width: 20px; height: 20px;}

    .shopCartWrap .shopCart .shopping .rightArea:before { bottom: -40px;}


    .shopCartWrap .shopCart .shopping .rightArea .shopList { margin-right: 15px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .imgArea { margin-right: 20px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .imgArea img { width: 250px;}

    .shopCartWrap .shopCart .shopping .rightArea .shopList .listTit { font-size: 24px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listTxt { font-size: 18px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listNum { gap: 10px; font-size: 16px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listOption { font-size: 16px;}

    .shopCartWrap .shopCart .shopping .rightArea .shopList .listPrice { margin-top: 50px; font-size: 26px; }
    .shopCartWrap .shopCart .shopping .rightArea .optionBtn { padding: 0 20px;}


    .section { padding: 50px 0 80px 0; }

    /*
        ********* search 타이틀 공통  ********
    */
    .cl_searchTitle .searchArea { gap: 10px; }

    /*
    *  ********************************************리뷰페이지*******************************************
    */

    /***
    * *** 리뷰list
    */
    /*리뷰배너*/
    .reviewList .section { padding-top: 50px;}
    .reviewList .reviewBanner { margin-top: 30px; }

    /*리뷰 리스트*/
    .reviewList .grid .gridCell { width: calc(100%/2); }
    .reviewList .grid .gridCell .textArea { font-size: 16px; margin-top: 10px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 24px; }
    .reviewList .grid .gridCell .textArea .name { margin-top: 10px; }
    .reviewList .grid .gridCell .textArea .date { margin-top: 10px; }

    /***
    * *** 리뷰view
    */

    /*리뷰헤더*/
    .reviewView .section { padding-top: 50px;}
    .reviewView .reviewHeader { font-size: 16px; }

    /***
    * *** 리뷰form
    */
    .reviewForm .section { padding-top: 50px;}


    /*
 * ********************************************  주문자 정보  ********************************************
 */
    .orderInformationWrap .orderInformation .orderText .inputArea.name input { width: 250px;}



    .orderInformationWrap .orderInformation .orderText .textArea { width: 125px;}


    .orderInformationWrap .orderInformation.order3 .leftArea  { width:71%}
    .orderInformationWrap .orderInformation.order3 .rightArea  { width: 310px;}

    .orderInformationWrap .orderInformation .paymentArea { gap: 15px; }
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] { width: 10px; height: 10px;}
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] + label { font-size: 16px;}

    .orderInformationWrap .orderInformation  .paymentPage .payPage { font-size: 14px; margin-bottom: 20px;}


    .orderInformationWrap .orderInformation .paymentPage select { font-size: 14px;}



    .orderInformationWrap .orderInformation .paymentPage .flex.phoneArea { gap: 5px;}

    .orderInformationWrap .orderInformation .paymentPage .flex .titleArea { width: 90px; }
    .orderInformationWrap .orderInformation .paymentPage .flex .titleArea.auto { width: auto;}
    .orderInformationWrap .orderInformation .paymentPage .flex.align .titleArea { margin-top: 0}

    .orderInformationWrap .orderInformation .paymentPage .listText { margin-top: 20px; font-size: 14px; }
    .orderInformationWrap .orderInformation .paymentPage .listText li { padding-left: 15px; line-height: 20px;}
    .orderInformationWrap .orderInformation .paymentPage .listText li:before { left: 8px; top:6px; transform: translateY(0)}

    .orderInformationWrap .orderInformation .paymentPage .selectArea { width: 130px; height: 44px;}


    .orderInformationWrap .orderInformation .paymentPage .inputArea { width: 155px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input { font-size: 14px; height: 44px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input::placeholder { font-size: 14px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.number { width: 235px; }
    .orderInformationWrap .orderInformation .paymentPage .inputArea.period { width: 115px;}

    .orderInformationWrap .orderInformation .paymentPage .inputArea.phone { width: 70px;}


    .orderInformationWrap .orderInformation .paymentPage .hopeBtn { height: 44px; padding: 0 10px;}
    .orderInformationWrap .orderInformation .paymentPage .hopeText,
    .orderInformationWrap .orderInformation .paymentPage .depositDay{ width: 140px; height: 44px;}

    .orderInformationWrap .orderInformation .paymentPage .tabArea { margin-bottom: 20px; gap: 10px;}
    .orderInformationWrap .orderInformation .paymentPage .tabArea .tabPayBtn { font-size: 14px;  padding: 0 10px; height: 44px; }


    .orderInformationWrap .orderInformation .paymentPage .accountTxt { font-size: 14px; }

    .orderInformationWrap .orderInformation .paymentPage .infoTxt { font-size: 14px; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation .paymentPage .exText { font-size: 14px;}

    .orderInformationWrap .orderInformation .paymentPage .paymentCount img { width: 25px;}
    .orderInformationWrap .orderInformation .paymentPage .countText {  font-size: 18px;}




    .orderInformationWrap .orderInformation .paymentPage .payAccount .won { margin-left: -5px}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .flexBox { display: block;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .flexBox .textArea { flex-direction: column; align-items: flex-start;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea { width: 100%;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payName,
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payCnt { width: 50%;}


    .orderInformationWrap .orderInformation .payInfo { font-size: 14px; margin-bottom: 10px;}
    .orderInformationWrap .orderInformation .payInfo img { width: 18px;}
    .orderInformationWrap .orderInformation .orderAgree { gap: 10px;}
    .orderInformationWrap .orderInformation .orderAgree input[type="checkbox"] + label { font-size: 14px; }

    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText {  font-size: 14px; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText .totalCnt { font-size: 20px; }


    .orderInformationWrap .orderInformation.order3 .rightArea .totalAgree input[type="checkbox"] + label { font-size: 14px; }





}



@media (max-width: 768px) {
    /*
    * **********************  헤더  **********************
    */
    .header.pc { display: none;}
    .headerMobile { display: flex;justify-content: space-between; align-items: center; height: 52px; padding: 5px 20px; border-bottom: 1px solid #F2F2F2; box-sizing: border-box; }
    .headerMobile .btn { cursor: pointer;}
    .headerMobile .off { display: none;}
    .headerMobile .on { display: block;}
    .headerMobile .search {position: relative; width: 250px; height: 38px; padding: 0 20px; box-sizing: border-box; border-radius: 30px; background-color: #fff;}
    .headerMobile .search input { width: 100%; height: 100%; padding-right: 20px;box-sizing: border-box; font-size: 14px; color: rgba(0, 127, 255, 0.50); font-family: 'PretendardSB'; }
    .headerMobile .search input::placeholder { color: rgba(0, 127, 255, 0.50)}
    .headerMobile .search .searchBtn { position: absolute; top:11px; right: 20px;}
    .headerMobile .search .searchBtn img { width: 18px;}
    .headerMobile .rightArea { display: flex; align-items: center;}
    .headerMobile .rightArea .joinArea { margin-left: 15px; cursor: pointer;}

    .headerMobile.on { background-color: #007FFF}
    .headerMobile.on  .off { display: block;}
    .headerMobile.on  .on { display: none;}

    /* 모바일 메뉴 */
    .mobileMenuWrap { position: fixed; top: 0; left: 0;width: 100%; height: 100%; background-color: #fff; display: none; overflow-y: auto;}
    .mobileMenuWrap.on { display: block; z-index: 9999}
    .mobileMenuWrap .menuJoinArea { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; box-sizing: border-box;}
    .mobileMenuWrap .menuJoinArea .leftArea { display: flex; align-items: center;}
    .mobileMenuWrap .menuJoinArea .leftArea .joinIcon { margin-right: 10px;}
    .mobileMenuWrap .menuJoinArea .leftArea .textArea { font-family: 'PretendardM';}
    .mobileMenuWrap .menuJoinArea .leftArea .textArea .title { font-size: 16px; color: #333; margin-bottom: 15px;}
    .mobileMenuWrap .menuJoinArea .leftArea .textArea .joinBtn { display: flex; justify-content: center; align-items: center;font-size: 14px;  box-sizing: border-box; border-radius: 30px; background-color: #007FFF;}
    .mobileMenuWrap .menuJoinArea .leftArea .textArea .joinBtn a { color: #fff; display: block; width: 100%; height: 100%; text-align: center; padding: 10px 20px; box-sizing: border-box;}
    .mobileMenuWrap .menuJoinArea .rightArea.closeBtn { cursor: pointer;}

    .mobileMenuWrap .pageListArea { display: flex; align-items: center; justify-content: space-around; padding: 10px; box-sizing: border-box; background-color: #248AFF; margin-bottom: 20px;}
    .mobileMenuWrap .pageListArea .line { width: 2px; height: 50px; background-color: rgba(255, 255, 255, 0.20); }
    .mobileMenuWrap .pageListArea .list > a { display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 15px; color: #fff; font-family: 'PretendardM';}
    .mobileMenuWrap .pageListArea .list > a img { margin-bottom: 10px;}

    .mobileMenuWrap .gnbMenuList .listArea { position: relative; display: flex; align-items: center; height: 55px; padding: 10px 20px;box-sizing: border-box; cursor: pointer; border-top: 1px solid #E1E1E1; }
    .mobileMenuWrap .gnbMenuList .listArea .imgArea { width: 34px; display: flex; justify-content: center ;align-items: center}
    .mobileMenuWrap .gnbMenuList .listArea .imgArea img { width: 100%}
    .mobileMenuWrap .gnbMenuList .listArea:before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; background: url("/app/layout/web/images/menuDown.png") no-repeat; width: 24px; height: 24px;}
    .mobileMenuWrap .gnbMenuList .listArea.on:before { background: url("/app/layout/web/images/menuUp.png") no-repeat; }
    .mobileMenuWrap .gnbMenuList .listArea.non:before { background: none;}

    .mobileMenuWrap .gnbMenuList > li:first-child .listArea { border-top: none;}
    .mobileMenuWrap .gnbMenuList .listArea .title { font-size: 16px; color: #333; font-family: 'PretendardSB'; margin-left: 20px; }
    .mobileMenuWrap .gnbMenuList .subList { display: none;background-color: #EEF6FF; padding: 10px 0 20px 75px; box-sizing: border-box;  border-top: 1px solid #E1E1E1; }
    .mobileMenuWrap .gnbMenuList .subList > li { font-size: 14px; font-family: 'PretendardM';line-height: 34px;}
    .mobileMenuWrap .gnbMenuList .subList > li a { color: #666;}

    .mobileMenuWrap .buttonArea { padding: 20px 20px 50px; box-sizing: border-box;}
    .mobileMenuWrap .buttonArea .buttonList { display: flex; gap: 15px; margin-bottom: 15px;}
    .mobileMenuWrap .buttonArea .kakaoBtn { border: none;}
    .mobileMenuWrap .buttonArea .kakaoBtn img { margin-right: 20px;}

    /*
    * **********************  푸터  **********************
    */
    .footerWrap .mobileInfo { display: block; padding-top: 30px;}
    .footerWrap .mobileInfo li { font-size: 14px; font-family: 'PretendardM'; padding: 20px; box-sizing: border-box; border-top: 1px solid #C8C8C8}
    .footerWrap .mobileInfo li a { color: #666;}

    .footerWrap .footerArea{ padding: 40px 0; }
    .footerWrap .footer { flex-direction: column-reverse; align-items: flex-start; font-size: 14px; padding: 0 20px; box-sizing: border-box; }
    .footerWrap .footer .text { margin-bottom: 5px;}
    .footerWrap .footer .brNon { display: none;}

    .footerWrap .footer .leftArea { padding: 0; border-right: none; margin-right: 0;}
    .footerWrap .footer .leftArea .footerLogo { margin-bottom: 20px; width: auto;}
    .footerWrap .footer .leftArea .footerLogo img { width: auto;}
    .footerWrap .footer .rightArea {flex: auto; flex-direction: column-reverse; align-items: flex-start; justify-content: center;}
    .footerWrap .footer .rightArea .left { display: none;}

    .footerWrap .footer .rightArea .middle .title {  font-size: 18px; margin-top: 35px;}
    .footerWrap .footer .rightArea .middle .snsArea { justify-content: flex-start;  gap: 15px; margin-top: 15px; margin-bottom: 35px;}
    .footerWrap .footer .rightArea .right .titleArea { margin-bottom: 20px; }
    .footerWrap .footer .rightArea .right .titleArea .title { display: inline-block; font-size: 18px; margin-bottom: 0; margin-right: 10px;}
    .footerWrap .footer .rightArea .right .titleArea .number { display: inline-block; font-size: 18px;}
    .footerWrap .footer .rightArea .right .textArea { margin-bottom: 0;}
    .footerWrap .footer .rightArea .right .info { margin-bottom: 35px;}

    /*
     * **********************  gnb  **********************
     */

    /* pc gnb 가림 */
    .gnbWrap { display: none;}

    .gnbMobileWrap { display: block; width: 100%;padding: 20px  0; box-sizing: border-box; overflow: hidden; border-bottom: 2px solid #F2F2F2;}
    .gnbMobileWrap .swiper-slide { width: auto; font-size: 16px; font-family: 'PretendardSB';}
    .gnbMobileWrap .swiper-slide a { color: #4F4F4F;}

    /*
    * ********************** quick 메뉴  **********************
    */
    .quickMenuWrap { display: none;}

    /*
     * **********************  메인 비주얼  **********************
     */
    .mainVisualWrap .mainSwiperBtn { display: none;}
    .mainVisualWrap .swiper-pagination { display: block; bottom: 5px;}
    .mainVisualWrap .swiper-pagination-bullet {width: 40px;height: 4px;display: inline-block;border-radius:38px; background: #fff;opacity: 0.5;}
    .mainVisualWrap .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity: 1}
    .mainVisualWrap .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px;}

    /*
    * **********************  메인 베스트 셀러 **********************
    */

    .bestSeller .cl_titleArea { margin-bottom: 25px;}
    .bestSeller .sellerSwiper { padding: 0 ;}
    .bestSeller .sellerSwiper .swiper-wrapper { padding:  0; }
    .bestSeller .sellerSwiper .swiper-slide.swiper-slide-active:hover{ transform: scale(1); }

    .bestSeller .swiper-button-next { right: 10px;}
    .bestSeller .swiper-button-prev { left: 10px;}
    .bestSeller .swiper-button-next,
    .bestSeller .swiper-button-prev { width: 40px; height: 40px;}
    .bestSeller .swiper-button-prev:after,
    .bestSeller .swiper-button-next:after { width: 40px; height: 40px; background-size: 40px;}
    .bestSeller .sellerSwiper .swiper-slide:hover .hoverText { display: none;}
    .bestSeller .sellerSwiperBtn { display: none;}

    /*
    * **********************  trendingCategory **********************
    */

    .trendingCategory { padding: 50px 0; }
    .trendingCategory .moreBtnArea { margin-top: 20px;}
    /*
    * **********************  eventWrap **********************
    */
    .eventWrap { margin: 20px 0;}

    /*
    * **********************  SaleItemWrap **********************
    */
    .SaleItemWrap { padding: 50px 0 30px; }

    /*
    * ******************************************** 서브페이지 상품 리스트 ********************************************
    */

    .categoryListWrap .subVisual  { padding: 0; margin-top: 0;}
    .categoryListWrap .listArea { margin-top: 50px; margin-bottom: 50px;}
    .categoryListWrap .listArea .titleArea.bottom { justify-content: flex-start}
    .categoryListWrap .listArea .titleArea { margin-bottom: 30px;}
    .categoryListWrap .listArea .leftArea {flex: auto; width: 100%;}
    .categoryListWrap .cl_title { margin-bottom: 20px;}

    .categoryListWrap .cl_pagination { margin-top: 15px;}

    /*
    * ********************************************  서브페이지 디테일 상품 정보 및 주문 ********************************************
    */

    .detailWrap { padding-top: 40px; padding-bottom: 40px;}

    .detailWrap .detail { display: block; margin-bottom: 50px;}
    .detailWrap .detail .detailSwiperWrap { width: 100%}

    .detailWrap .detail .detailSwiper .swiper-slide { border-radius: 10px;}

    .detailWrap .detail .swiper-button-prev,
    .detailWrap .detail .swiper-button-next { display: none;}
    .detailWrap .detail .swiper-pagination { display: none;}


    .detailWrap .detail .title { font-size: 26px; text-align: center; margin-bottom: 30px;}

    .detailWrap .detail .infoArea { color: #666;}
    .detailWrap .detail .infoArea .info.showBlockM { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; box-sizing: border-box; border: 1px solid #c8c8c8;}
    .detailWrap .detail .infoArea { font-size: 16px; margin-bottom: 30px; margin-top: 30px;}
    .detailWrap .detail .infoArea .flex { display: block; margin-bottom: 0; gap: 0;}
    .detailWrap .detail .infoArea .flex > div { margin-bottom: 20px;}
    .detailWrap .detail .infoArea .flex > div:last-child { margin-bottom: 0;}
    .detailWrap .detail .infoArea .flex .line { display: none;}
    .detailWrap .detail .infoArea .name { font-size: 18px; color: #333; font-family: 'PretendardSB';}

    .detailWrap .detail .infoArea .price { font-size: 16px; font-family: 'PretendardM'; color:#666;}
    .detailWrap .detail .infoArea .price span { color: #F00;}

    .detailWrap .detail .itemArea { margin-bottom: 30px;}
    .detailWrap .detail .itemArea .itemTit { font-size: 18px; }

    .detailWrap .detail .itemArea .grid { gap: 20px;}
    .detailWrap .detail .itemArea .grid .gridCell { width: 70px;}


    .detailWrap .detail .orderBtnArea .orderText { justify-content: center; gap: 5px; font-size: 14px; margin-bottom: 10px;}
    .detailWrap .detail .orderBtnArea .orderText img { width: 15px;}
    .detailWrap .detail .orderBtnArea .popOrderBtn { width: 100%}



    .detailWrap .estimateWrap {  border: 1px solid #e9e9e9;  padding: 40px 20px; margin-bottom: 50px;}
    .detailWrap .estimateWrap .quotationTit { font-size: 18px; margin-bottom: 50px;}

    .detailWrap .estimateWrap .estimate { display: block; gap: 0; font-size: 18px; font-family: 'PretendardM'; color: #4f4f4f;}
    .detailWrap .estimateWrap .estimate .quantityArea,
    .detailWrap .estimateWrap .estimate .designArea,
    .detailWrap .estimateWrap .estimate .makingArea { width: 100%}
    .detailWrap .estimateWrap .estimate .tit { margin-bottom: 20px;  font-family: 'PretendardSB'; color: #333;}
    .detailWrap .estimateWrap .estimate .textArea {  height: auto; overflow-y: hidden;  border-bottom: none; margin-bottom: 10px;}
    .detailWrap .estimateWrap .estimate .textArea .flex { margin-bottom: 20px; font-size: 14px; }
    .detailWrap .estimateWrap .estimate .textArea .flex.design { margin-bottom: 10px;}
    .detailWrap .estimateWrap .estimate .textArea .flex .rightQuan { font-size: 18px;}

    .detailWrap .estimateWrap .estimate .icon,
    .detailWrap .estimateWrap .estimate .totalArea,
    .detailWrap .estimateWrap .estimate .totalText{ display: none;}
    .detailWrap .estimateWrap .estimate .totalTextM { display: block; text-align: center; font-size: 20px; color: #666;  font-family: 'PretendardM';}
    .detailWrap .estimateWrap .estimate .totalTextM .totalNum{  font-size: 30px; color: #f00;  font-family: 'PretendardSB';}

    .detailWrap .detailImgArea { padding: 0;}

    .detailWrap .detailBtnArea { flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin-bottom: 100px;}
    .detailWrap .detailBtnArea .cl_button { width:100%;}
    .detailWrap .detailBtnArea .cl_button.orderBtn { width: 100%;}



    /*
    * ********************************************  주문 페이지 팝업  ********************************************
    */

    .detailPopupWrap .popup {  padding: 20px 10px 20px 20px; }
    .detailPopupWrap .detailPopup { max-width:95%; top: 15px; bottom: 15px; border-radius: 0; border-width: 5px;}
    .detailPopupWrap .detailCloseBtn { padding-right: 10px;}
    .detailPopupWrap .detailCloseBtn img { width: 25px;}

    .detailPopupWrap .detailPopup .orderTitle { margin-top: 25px; padding-right: 10px; }
    .detailPopupWrap .detailPopup .orderTitle .tit { font-size: 18px; font-family: 'PretendardSB'; }
    .detailPopupWrap .detailPopup .orderTitle .subTxt { font-size: 14px; }

    .detailPopupWrap .detailPopup .selectArea { height: calc(100% - 300px);padding-right: 10px;}

    .detailPopupWrap .detailPopup .selectArea .grid { padding:10px 0 0 10px; margin:-10px}
    .detailPopupWrap .detailPopup .selectArea .grid .gridCell {border-width:0 10px 10px 0;   width:calc(100% / 2);}
    .detailPopupWrap .detailPopup .selectArea .grid .selectBtn { padding: 5px 15px; margin-top: 5px;}
    .detailPopupWrap .detailPopup .selectArea .grid .textArea .text { font-size: 14px;}
    .detailPopupWrap .detailPopup .selectArea .grid .textArea .price { font-size: 20px; }
    .detailPopupWrap .detailPopup .orderSaveBtn { padding-right: 0;}
    .detailPopupWrap .detailPopup .orderSaveBtn .cl_button { width: 100%; margin-right: 10px;}

    /* 주문확인 후 최종 상품확인 창  */
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText { justify-content: center; }
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder { font-size: 12px; }
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText { line-height: 22px; margin-bottom: 20px;}
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText .makingOption { margin-bottom: 5px;}
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .totalOrder .orderText .orderPrice { font-size: 18px; }
    .detailPopupWrap .detailPopup .selectArea .grid .imgArea .totalOrderWrap .totalOrderText .retouchBtn { padding: 5px 15px;  font-size: 16px;}

    .detailPopupWrap .customPopup { left: 0; width: 100%; height: 100%; padding: 20px 5px 20px 20px; border-radius: 0; border-width: 5px;}
    .detailPopupWrap .customPopup .customBtnArea {  margin: 0 0 40px; padding-right: 15px;}
    .detailPopupWrap .customPopup .customBtnArea img { width: 25px;}

    .detailPopupWrap .customPopup .customListArea { padding-right: 15px; margin-bottom: 30px;}
    .detailPopupWrap .customPopup .customListArea .list { margin-right: 45px; }
    .detailPopupWrap .customPopup .customListArea .list .listTit { top: -20px; font-size: 12px;}
    .detailPopupWrap .customPopup .customListArea .list .listDot:before { width: 45px;}
    .detailPopupWrap .customPopup .customListArea .list.active .listTit { top: -30px; font-size: 16px  }
    .detailPopupWrap .customPopup .customListArea .list .checkIcon { top: -44px;}


    /* 커스텀 팝업에서 저장 안하고 닫을 경우 alert팝업  */
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup {  padding: 10px; width: 95%; }
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea { margin-bottom: 15px; }
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea { padding-bottom: 8px; margin-bottom: 8px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .imgArea { margin-right: 5px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .imgArea img { width:  20px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .text { font-size: 16px}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .leftArea .info { font-size: 14px; margin-top: 8px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .textArea .closeBtn img{ width: 15px;}
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea { font-size: 14px; }
    .detailPopupWrap .customPopupWrap .alertPopupWrap .alertPopup .buttonArea .save {  margin-left: 10px; }


    /*
        *** 커스텀 팝업 공통
    */

    /* 아래의 모든 코드는 영역::코드로 사용 */
    .detailPopupWrap .scrollArea::-webkit-scrollbar,
    .detailPopupWrap .customPopup .customPop::-webkit-scrollbar {
        width: 8px;  /* 스크롤바의 너비 */
    }
    .detailPopupWrap .scrollArea::-webkit-scrollbar-thumb,
    .detailPopupWrap .customPopup .customPop::-webkit-scrollbar-thumb {
        background: #007FFF; /* 스크롤바의 색상 */
        border-radius: 5px;
    }
    .detailPopupWrap .scrollArea::-webkit-scrollbar-track,
    .detailPopupWrap .customPopup .customPop::-webkit-scrollbar-track {
        background: #D9D9D9;  /*스크롤바 뒷 배경 색상*/
        border-radius: 5px !important;
    }


    .detailPopupWrap .customPopup .customPop.on { height: calc(100% - 100px);overflow-y: auto; }

    .detailPopupWrap .customPopup .customPop .contentArea { padding-right: 15px;  margin-top: 0; flex-direction: column; justify-content: flex-start; }
    .detailPopupWrap .customPopup .customPop .contentArea .mTitle { text-align: center; margin-top: 40px;}
    .detailPopupWrap .customPopup .customPop .type2 .contentArea .mTitle .imgTitleM{ margin-bottom: 10px}
    .detailPopupWrap .customPopup .customPop .contentArea .mTitle .imgTitleM{ font-size: 20px; color: #333; font-family: 'PretendardSB'; margin-bottom: 20px;}
    .detailPopupWrap .customPopup .customPop .contentArea .mTitle .printInfoM{ font-size: 14px; color: #FF7D7D; font-family: 'PretendardM'; margin-bottom: 20px;}
    .detailPopupWrap .customPopup .customPop .imgBox { width: 100%; margin-right: 0; margin-bottom: 20px;}

    .detailPopupWrap .customPopup .customPop .popupBtnArea { margin-top: 40px; padding-right: 15px; padding-bottom: 5px; }
    .detailPopupWrap .customPopup .customPop .popupBtnArea > div:first-child { margin-right: 10px}
    .detailPopupWrap .customPopup .customPop .popupBtnArea > div { width: 100%; padding: 0 10px;}

    .detailPopupWrap .customPopup .customPop .popupTitle { margin-top: 20px; padding-right: 15px;}
    .detailPopupWrap .customPopup .customPop .popupTitle .title { font-size: 26px; }

    .detailPopupWrap .customPopup .customPop .popupTitle .subText { font-size: 14px; }
    .detailPopupWrap .customPopup .customPop .rightArea.pc .radioArea { display: none;}
    .detailPopupWrap .customPopup .customPop .rightArea.mobile { display: flex; margin: 0;}
    .detailPopupWrap .customPopup .customPop .rightArea { align-items: center; margin:  0;}
    .detailPopupWrap .customPopup .customPop .rightArea .text { display: none;}
    .detailPopupWrap .customPopup .customPop .printBtnArea { width: 100%;}
    .detailPopupWrap .customPopup .customPop .printBtn { width: 100%; height: 50px; font-size: 16px; margin-bottom: 20px; }

    .detailPopupWrap .customPopup .customPop .radioArea { margin-bottom: 0; margin-top: 20px;}
    .detailPopupWrap .customPopup .customPop .radioArea .radio { margin-right: 20px; font-size: 18px;}

    .detailPopupWrap .customPopup .customPop .radioArea .radio input { margin-right: 5px;}

    .detailPopupWrap .customPopup .customPop .type2 .radioArea { margin-bottom: 0;}
    .detailPopupWrap .customPopup .customPop .type2 .printInfo { font-size: 15px;  display: none;}
    .detailPopupWrap .customPopup .customPop .type2 .imgBox { margin-bottom: 50px;}
    .detailPopupWrap .customPopup .customPop .type2 .imgBox img { border-radius: 10px;}

    /* 커스텀 사이즈 팝업*/
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea {height: auto; margin-top: 30px;}
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list {  margin-bottom: 20px; font-size: 20px; }
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeArea .list .count img { width: 25px;}
    .detailPopupWrap .customPopup .sizePopup .rightArea .sizeInfo { width: 100%; height: 50px; font-size: 16px; margin-top: 50px; margin-right: 0; box-sizing: border-box; }

    .detailPopupWrap .customPopup .sizePopup .sizeInfoPopup { border: 5px solid #007FFF; width: 100%}
    .detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .btnArea { margin-top: 10px; margin-right: 10px; }
    .detailPopupWrap .customPopup .sizePopup .sizeInfoPopup .btnArea img { width: 15px;}

    /* 커스텀 인쇄선택 팝업*/
    .detailPopupWrap .customPopup .printPopup .type2 .contentArea { margin-bottom: 0;}
    .detailPopupWrap .customPopup .printPopup .printImgArea {overflow-y: hidden; height: auto; width: 100%; padding-right: 5px;}

    .detailPopupWrap .customPopup .printPopup .printImgArea .img { margin-right: 80px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .img img{ width: 80px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .logoText { font-size: 16px;  margin-right: 10px;}
    .detailPopupWrap .customPopup .printPopup .printImgArea .closeBtn img { width: 18px;}
    .detailPopupWrap .customPopup .printPopup .type2 .popupBtnArea .cl_button { padding: 0 10px;}


    .tableArea .tableSelect select { background-size: 18px;}

    .detailPopupWrap .customPopup .customTable { height: auto;  font-size: 14px;}

    .detailPopupWrap .customPopup .customTable .tableArea { flex-direction: column; align-items: flex-end}
    .detailPopupWrap .customPopup .customTable .tableArea .tableLeft { width: 100%; justify-content: space-between; margin-bottom: 10px;}
    .detailPopupWrap .customPopup .customTable .tableArea .hideText { display: none;}
    .detailPopupWrap .customPopup .customTable .tableArea .tableNumber,
    .detailPopupWrap .customPopup .customTable .tableArea .tableSize { width: auto; font-size: 16px; margin-right: 15px;}
    .detailPopupWrap .customPopup .customTable .tableArea .borderBox { width: 100%; }
    .detailPopupWrap .customPopup .customTable .tableArea select { padding: 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 14px;}

    .detailPopupWrap .customPopup .customTable .tableArea .tableInfo { margin-right: 5px;}
    .detailPopupWrap .customPopup .customTable .tableArea .tableCloseBtn img { width: 10px; }


    /* 커스텀 앰블럼 팝업*/
    .detailPopupWrap .customPopup .emblemPopup .type2 .contentArea { margin-bottom: 0}

    .detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon { width: 40px; height: 40px; }

    .detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon.left { top: 26%; left: auto; right: 29%}
    .detailPopupWrap .customPopup .emblemPopup .type1 .leftArea .emblemIcon.right { top:16%; left: 21%;}

    .detailPopupWrap .customPopup .selectBtnArea { width: 100%}
    .detailPopupWrap .customPopup .selectBtnArea .borderBox { width: 100%; height: 50px;}

    .detailPopupWrap .customPopup .selectBtnArea .tableSelect select { padding: 0 10px;  background-size: 20px; }

    .detailPopupWrap .customPopup .emblemPopup .selectBtnArea .tableFile { display: none;}
    .detailPopupWrap .customPopup .emblemPopup .type2 .customTable .tableArea .tableLeft { margin-bottom: 0; }
    .detailPopupWrap .customPopup .emblemPopup .type2 .customTable .tableArea .tableRight { display: none;}

    .detailPopupWrap .customPopup .emblemPopup .customTable .tableArea .customTableSelect { flex-direction: column; width: 100%}
    .detailPopupWrap .customPopup .emblemPopup .customTable .tableArea .customTableSelect .tableSelect { margin-bottom: 5px;}
    .detailPopupWrap .customPopup .emblemPopup .customTable .tableArea .customTableSelect .tableSelect:last-child { margin-bottom: 0;}

    /* 커스텀 마킹 팝업*/
    .detailPopupWrap .customPopup .makingPopup  .imgBox { padding: 5px;}
    .detailPopupWrap .customPopup .makingPopup .customTable {  margin-top: 0; height: auto; overflow-y: hidden}
    .detailPopupWrap .customPopup .makingPopup .popupBtnArea { margin-top: 30px;}

    .detailPopupWrap .customPopup .makingPopup .customTable .tableArea .tableLeft { gap: 5px; margin-bottom: 0;}
    .detailPopupWrap .customPopup .makingPopup .titleArea { font-size: 16px; justify-content: center;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .leftTxt {display: none;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .rightTxt {  margin:50px 0; width: 100%; padding: 0 10px; box-sizing: border-box;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .rightTxt .rightMaking{ display: flex; align-items: center; width: 100%; margin-bottom: 10px;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .rightTxt .rightMaking:last-child { margin-bottom: 0;}
    .detailPopupWrap .customPopup .makingPopup .titleArea .rightTxt .rightMaking .tableSelect { flex: 1}
    .detailPopupWrap .customPopup .makingPopup .titleArea .titleMaking { width: auto;text-align: left; margin:0; flex: 1}

    .detailPopupWrap .customPopup .makingPopup .tableArea .tableNumber{width: 27px;  }
    .detailPopupWrap .customPopup .makingPopup .tableArea .tableSize{ width: 43px; margin-right: 10px;}
    .detailPopupWrap .customPopup .makingPopup .tableArea .borderBox { width: 100%; margin-right: 0;}
    .detailPopupWrap .customPopup .makingPopup .tableArea input[type="text"] { font-size: 14px;}
    .detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert { border: 5px solid #007FFF; width:80%; border-radius: 0;}
    .detailPopupWrap .customPopup .makingPopup .makingAlertWrap .makingAlert .closeBtn {  width: 15px; top: 5px; right:5px;}

    /* 커스텀 주문확인*/

    .detailPopupWrap .customPopup .checkPopup .customTable.pc { display: none;}

    .detailPopupWrap .customPopup .checkPopup .imgBox { width: auto; border: 1px solid #c8c8c8; border-radius: 10px; box-sizing: border-box; margin-bottom: 0; margin-right: 15px;}
    .detailPopupWrap .customPopup .checkPopup.customPop .contentArea { flex-direction: row; justify-content: center;}
    .detailPopupWrap .customPopup .checkPopup.customPop .rightArea .text {display: block; font-size: 16px;}

    .detailPopupWrap .customPopup .checkPopup .titleArea { font-size: 16px; ;}

    .detailPopupWrap .customPopup .checkPopup .titleArea .titleNum { margin-right: 3px;}
    .detailPopupWrap .customPopup .checkPopup .titleArea .titleMaking { width: 130px; }

    .detailPopupWrap .customPopup .checkPopup .tableArea .tableNumber{width: 25px; margin-right: 10px;}
    .detailPopupWrap .customPopup .checkPopup .tableArea .tableSize{ width: 33px; }
    .detailPopupWrap .customPopup .checkPopup .tableArea .txt { width: 130px; }

    .detailPopupWrap .customPopup .checkPopup .scrollArea { padding-bottom: 0; height: auto; overflow-y: hidden}

    .detailPopupWrap .customPopup .checkPopup .totalArea { flex-direction: column; justify-content: center; align-items: center; gap:10px;  }
    .detailPopupWrap .customPopup .checkPopup .totalArea .totalLeft { gap: 10px;}
    .detailPopupWrap .customPopup .checkPopup .totalArea .price { font-size: 18px;}

    .detailPopupWrap .customPopup .checkPopup.customPop .popupBtnArea > div { width: auto; padding: 0 20px; margin-right: 0;}

    .detailPopupWrap .customPopup .checkPopup .customTable.mobile { display: block; font-size: 14px; font-family: 'PretendardM'; color: #333;}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea { display: flex; align-items: center; border-bottom: 1px solid #c8c8c8; padding: 10px 0; box-sizing: border-box}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .tableAreaM { flex: 1}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .flexArea { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .flexArea:last-child {  margin-bottom: 0;}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .flexArea .txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;text-align: right; color: #999}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .flexArea .txt.priceTxt { color: #333;}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .flexArea .titleMaking { margin-right: 10%; }

    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .tableNumber,
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .tableSize{ font-family: 'PretendardSB'; }
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .tableNumber { margin-right: 10px;}
    .detailPopupWrap .customPopup .checkPopup .customTable.mobile .checkTableArea .tableSize { margin-right: 15px;}


    /*
    * ********************************************  로그인  ********************************************
    */

    .loginWrap.section{ padding-left:  20px; padding-right: 20px; box-sizing: border-box}
    .loginWrap .loginArea { padding: 40px 0; border-width: 1px;}
    .loginWrap .loginArea .title { font-size: 26px;}
    .loginWrap .loginArea .login { padding: 0 20px;}
    .loginWrap .loginArea .login .loginTit { font-size: 18px;}
    .loginWrap .loginArea .login .loginBtnArea .cl_button{ margin-bottom: 20px;}

    .loginWrap .loginArea .snsLoginTxtWrap { padding: 0 20px;}
    .loginWrap .loginArea .snsLoginTxtWrap .text { font-size: 14px;  margin: 0 19px;}
    .loginWrap .loginArea .snsLoginTxtWrap .line { border-top: 1px dashed #E0E0E0; }
    .loginWrap .loginArea .snsLoginWrap { padding: 0 20px; justify-content: space-around;}
    .loginWrap .loginArea .snsLoginWrap img { width: 50px;}


    /*
    * ********************************************  회원가입  ********************************************
    */


    .membershipWrap{ padding: 40px 20px ; box-sizing: border-box}
    .membershipWrap .membershipArea { padding: 40px 25px; border-width: 2px;}
    .membershipWrap .membershipArea .title { font-size: 26px; margin-bottom: 30px;}

    .membershipWrap .membershipArea .membership { flex-direction: column; align-items: center; justify-content: center; margin-bottom: 50px; gap: 30px}
    .membershipWrap .membershipArea .membership > div{ width: 100%; }
    .membershipWrap .membershipArea .membership .memberBox .tit { font-size: 18px; }

    .membershipWrap .membershipArea .membership .memberBox.idArea { margin-bottom: 40px;}
    .membershipWrap .membershipArea .membership .memberBox.idArea .tit { display: flex; justify-content: space-between; align-items: center;}
    .membershipWrap .membershipArea .membership .memberBox.idArea .chkBox.mobile { display: flex;;  height: 40px; border: 1px solid #c8c8c8; border-radius: 10px; padding: 0 25px; font-size: 16px;}
    .membershipWrap .membershipArea .membership .memberBox.idArea .inputArea { justify-content: space-between; gap: 0;}
    .membershipWrap .membershipArea .membership .memberBox.idArea .inputArea .chkBox { display: none;}

    .membershipWrap .membershipArea .membership .memberBox .infoTxt {   font-size: 12px;}

    .membershipWrap .membershipArea .membership .memberBox .infoTxt img { margin-right: 3px; vertical-align: text-top;}

    .membershipWrap .membershipArea .btnArea .cl_button{ width: 100%;}


    /*
    * ********************************************  약관동의  ********************************************
    */
    .privacyAgreeWrap { padding-top: 40px;}
    .privacyAgreeWrap .agreeArea { padding: 40px 20px;  margin-bottom: 30px;}
    .privacyAgreeWrap .agreeArea .agreeTit { font-size: 26px; margin-bottom: 30px; text-align: center;}
    .privacyAgreeWrap .agreeArea .textArea { font-size: 14px;  padding: 18px 10px;  margin-bottom: 30px;}

    .privacyAgreeWrap .cl_checkbox input[type="checkbox"] + label { font-size: 14px;}

    .privacyAgreeWrap .allAgree .buttonArea {  margin-top: 25px;}
    .privacyAgreeWrap .allAgree .buttonArea .cl_button { width: 100%;}

    /*
    * ********************************************  주문 조회 및 faq  ********************************************
    */
    .orderInquiryWrap .cl_pagination,
    .faqWrap .cl_pagination { margin-top: 30px;}

    .orderInquiryWrap .inputArea,
    .faqWrap .inputArea { width: 100% }

    .orderInquiryWrap .inputArea .input,
    .faqWrap .inputArea .input{ padding-right: 35px;}

    .orderInquiryWrap .inputArea .inputSearch,
    .faqWrap .inputArea .inputSearch { display: block; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); cursor: pointer; width: 18px;}


    .faqWrap .wordBtn.pc { display: none;}
    .faqWrap .wordBtn.m { display: flex; margin-top: 30px;}


    /*
    * ********************************************  장바구니  ********************************************
    */
    .shopCartWrap.section { padding-top: 40px;}
    .shopCartWrap .shopCart { padding: 40px 20px; }
    .shopCartWrap .btnArea { flex-direction: column-reverse; gap: 20px;}
    .shopCartWrap .btnArea .deleteOrder { display: none;}
    .shopCartWrap .btnArea > div { width: 100%}
    .shopCartWrap .btnArea .selectOrder { background-color: #fff; border-color: #007FFF; color: #007FFF;}

    .shopCartWrap .shopCart .title { text-align: center; }

    .shopCartWrap .shopCart .shopping { flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px 0 0; }
    .shopCartWrap .shopCart .shopping .leftArea { margin-right: 0; margin-bottom: 20px; width: 100%; text-align: center;}
    .shopCartWrap .shopCart .shopping .leftArea .cl_checkbox { display: none;}
    .shopCartWrap .shopCart .shopping .leftArea .listTit { font-size: 18px; color: #000; font-family: 'PretendardSB';}

    .shopCartWrap .shopCart .shopping .rightArea { width: 100%; flex-direction: column; align-items: flex-start; justify-content: center;}
    .shopCartWrap .shopCart .shopping .rightArea:before { display: none;}


    .shopCartWrap .shopCart .shopping .rightArea .shopList { justify-content: flex-start; align-items: flex-start; margin-right:0;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .imgArea { margin-right: 10px; width: 80px; border-radius: 10px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .imgArea img { width: 80px; border-radius: 10px;}

    .shopCartWrap .shopCart .shopping .rightArea .shopList .listTit { display: none;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listTxt { font-size: 12px; margin-bottom: 0; }
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listNum { font-size: 12px; margin-bottom: 3px;}
    .shopCartWrap .shopCart .shopping .rightArea .shopList .listOption {  font-size: 12px;}

    .shopCartWrap .shopCart .shopping .rightArea .shopList .listPrice { margin-top: 15px; font-size: 16px; }


    .shopCartWrap .shopCart .shopping .rightArea .listBtnArea { display: flex; width: 100%; justify-content: center; gap: 10px; margin-top: 30px;}
    .shopCartWrap .shopCart .shopping .rightArea .listBtnArea > div { height: 40px; padding: 0; width: 100%}
    .shopCartWrap .shopCart .shopping .rightArea .listBtnArea .deleteBtn { display: flex; width: 100px; background-color: #fff; border-color: #FF5E5E;}
    .shopCartWrap .shopCart .shopping .rightArea .listBtnArea .deleteBtn a { color: #FF5E5E}

    .section { padding: 40px 0; }
    /*
        ********* search 타이틀 공통  ********
    */
    .cl_searchTitle .searchArea { width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 30px; }
    .cl_searchTitle .searchArea .checkboxArea { display: flex; align-items: center; gap: 15px; }


    /*
    *  ********************************************리뷰페이지*******************************************
    */

    /***
    * *** 리뷰list
    */
    /*리뷰배너*/
    .reviewList .section { padding-top: 40px;}
    .reviewList .reviewBanner { margin-top: 0; }
    .cl_searchTitle { flex-direction: column; }
    /*리뷰 리스트*/
    .reviewList .listArea { padding-bottom: 40px; }

    .reviewList .grid { padding: 10px 0 0 10px; margin: -10px; }
    .reviewList .grid .gridCell { border-radius: 20px 20px 0 0; border-width: 0 10px 10px 0; padding: 10px 0; }
    .reviewList .grid .gridCell .imgArea img { border-radius: 20px 20px 0 0; }
    .reviewList .grid .gridCell .textArea { font-size: 12px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 18px; }

    /***
    * *** 리뷰view
    */
    /*리뷰헤더*/
    .reviewView .section { padding-top: 40px;}
    .reviewView .reviewHeader { font-size: 14px; padding: 10px; }
    .reviewView .reviewHeader .info { gap: 15px; }
    .reviewView .reviewHeader .viewCount { font-size: 12px; }
    .reviewView .reviewHeader .info > li:after { width: 15px; height: 15px; background-size: 15px 15px; left: -15px; }
    /*리뷰content*/
    .reviewView .reviewContent { padding: 30px 0; }
    .reviewView .reviewContent .contentText { font-size: 14px; }
    /*리뷰버튼*/
    .reviewView .buttonArea { flex-direction: column; gap: 20px; }
    .reviewView .buttonArea .cl_button.padding { width: 100%; }

    /***
    * *** 리뷰form
    */

    .reviewForm .section { padding-top: 40px;}
    .reviewForm .formArea { padding-bottom: 30px; }
    .reviewForm .formCol { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
    .reviewForm .formCol .title { margin-bottom: 10px; }
    .reviewForm .formCol .input.default { width: 90%; }

    .reviewForm .buttonArea { margin-top: 30px; }
    .reviewForm .buttonArea .cl_button { width: 100%; }


    /*
    * ********************************************  주문자 정보  ********************************************
    */
    .orderInformationWrap .privacyAgreeWrap .agreeArea .agreeTit { font-size: 26px;}
    .orderInformationWrap .orderInformation .orderTit { font-size: 26px;}

    .orderInformationWrap .privacyAgreeWrap .agreeArea .agreeTit,
    .orderInformationWrap .privacyAgreeWrap .agreeArea .textArea { margin-bottom: 30px;}
    .orderInformationWrap .privacyAgreeWrap .agreeArea input[type="checkbox"] + label{ font-size: 14px;}
    .orderInformationWrap .privacyAgreeWrap .agreeArea .cl_checkbox{ gap: 5px;}


    .orderInformationWrap .cl_borderBox{ padding: 40px 20px; box-sizing: border-box; margin-bottom: 30px;}

    .orderInformationWrap .orderInformation .orderTit { font-size: 26px; text-align: center; margin-bottom: 30px;}

    .orderInformationWrap .orderInformation .orderText { display: block; font-size: 16px; }
    .orderInformationWrap .orderInformation .orderText.align .textArea { margin-top: 17px;}
    .orderInformationWrap .orderInformation .orderText .textArea { width: auto; margin-bottom: 5px; font-size: 18px;}

    .orderInformationWrap .orderInformation .orderText .inputArea .hyphen { width: 8px; height: 2px;}
    .orderInformationWrap .orderInformation .orderText .inputArea input { font-size: 16px; padding: 10px;}
    .orderInformationWrap .orderInformation .orderText .inputArea.name input{ width: 100%;}
    .orderInformationWrap .orderInformation .orderText .inputArea.number,
    .orderInformationWrap .orderInformation .orderText .inputArea.phone { display: flex; align-items: center;}
    .orderInformationWrap .orderInformation .orderText .inputArea.number input,
    .orderInformationWrap .orderInformation .orderText .inputArea.phone input{ flex: 1;}
    .orderInformationWrap .orderInformation .orderText .inputArea.email input{ width: 100%}
    .orderInformationWrap .orderInformation .orderText .inputArea.address input,
    .orderInformationWrap .orderInformation .orderText .inputArea.orderHope input { width: 100%;}
    .orderInformationWrap .orderInformation .orderText .addressArea .addressText >span { opacity: 1;}
    .orderInformationWrap .orderInformation .orderText .inputArea.address input::placeholder,
    .orderInformationWrap .orderInformation .orderText .inputArea.orderHope input::placeholder { color: #999;}

    .orderInformationWrap .orderInformation .orderTextArea .nameChk.mobile { display: flex; justify-content: flex-start; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation .orderTextArea .nameChk.pc { display: none;}
    .orderInformationWrap .orderInformation .orderText .orderArea {  justify-content: space-between; gap: 10px;}
    .orderInformationWrap .orderInformation .orderText .textBox {  width: 100%; padding: 10px; flex: 1}
    .orderInformationWrap .orderInformation .orderText button {  height: 54px; padding: 10px 25px; font-size: 16px; }
    .orderInformationWrap .orderInformation .orderText .exText { display: none;}




    .orderInformationWrap .orderInformation  .paymentPage.mobile { display: block; margin-top: 30px;}
    .orderInformationWrap .orderInformation  .paymentPage.pc { display: none;}




    .orderInformationWrap .orderInformation .orderText .textArea { width: 125px;}

    .orderInformationWrap .orderInformation.order3 { display: block;}
    .orderInformationWrap .orderInformation.order3 .leftArea  { width:100%}
    .orderInformationWrap .orderInformation.order3 .rightArea  { width:100%}


    .orderInformationWrap .orderInformation .paymentArea .payment { width: 100%;}
    .orderInformationWrap .orderInformation .paymentArea { gap: 20px; flex-direction: column; align-items: flex-start; }
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] { width: 15px; height: 15px;}
    .orderInformationWrap .orderInformation .paymentArea  input[type="radio"] + label { font-size: 20px;}

    .orderInformationWrap .orderInformation  .paymentPage .payPage { font-size: 16px; margin-bottom: 20px;}


    .orderInformationWrap .orderInformation .paymentPage select { font-size: 16px;}


    .orderInformationWrap .orderInformation .paymentPage .flex.flexBox { display: block;}
    .orderInformationWrap .orderInformation .paymentPage .flex.bankArea .flex { display: block;}
    .orderInformationWrap .orderInformation .paymentPage .flex.phoneArea { gap: 5px;}

    .orderInformationWrap .orderInformation .paymentPage .flex .titleArea { width: auto; font-size: 18px; padding: 0; margin-bottom: 10px;}

    .orderInformationWrap .orderInformation .paymentPage .flex.align .titleArea { margin-top: 0}

    .orderInformationWrap .orderInformation .paymentPage .listText { margin-top: 30px; }

    .orderInformationWrap .orderInformation .paymentPage .listText li { line-height: 24px;}
    .orderInformationWrap .orderInformation .paymentPage .listText li:before { left: 5px; top:8px;}

    .orderInformationWrap .orderInformation .paymentPage .selectArea { width: 100%; height: 54px; margin-bottom: 10px;}
    .orderInformationWrap .orderInformation .paymentPage .selectArea:last-child { margin-bottom: 0;}

    .orderInformationWrap .orderInformation .paymentPage .inputArea { width: 100%;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input { font-size: 16px; height: 54px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea .input::placeholder { font-size: 16px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.number { width: 100%; }
    .orderInformationWrap .orderInformation .paymentPage .inputArea.period { width: 100px;}
    .orderInformationWrap .orderInformation .paymentPage .inputArea.cvc { width: 80px;}

    .orderInformationWrap .orderInformation .paymentPage .inputArea.phone { width: 100%; flex: 1}


    .orderInformationWrap .orderInformation .paymentPage .hopeBtn { height: 54px; padding: 0 20px;}
    .orderInformationWrap .orderInformation .paymentPage .hopeText,
    .orderInformationWrap .orderInformation .paymentPage .depositDay{ width: 100%; height: 54px; flex: 1}

    .orderInformationWrap .orderInformation .paymentPage .tabArea { margin-bottom: 30px; }
    .orderInformationWrap .orderInformation .paymentPage .tabArea .tabPayBtn { font-size: 16px;  padding: 0 20px; height: 54px; }


    .orderInformationWrap .orderInformation .paymentPage .accountTxt { font-size: 16px; }

    .orderInformationWrap .orderInformation .paymentPage .infoTxt { font-size: 14px; margin-bottom: 20px;}
    .orderInformationWrap .orderInformation .paymentPage .exText { font-size: 16px; margin-top: 10px;}

    .orderInformationWrap .orderInformation .paymentPage .paymentBtn { gap: 30px; margin: 20px 0;}
    .orderInformationWrap .orderInformation .paymentPage .paymentCount img { width: 25px;}
    .orderInformationWrap .orderInformation .paymentPage .countText { width: 24px; font-size: 20px;}

    .orderInformationWrap .orderInformation .paymentPage .payAccount { height: auto;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .flexBox .textArea .flex { display: block; width: 100%;}

    .orderInformationWrap .orderInformation .paymentPage .payAccount .won { margin-left: 5px; font-size: 20px;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .flexBox { display: block; }
    .orderInformationWrap .orderInformation .paymentPage .payAccount .flexBox .textArea { flex-direction: column; align-items: flex-start;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea { width: 100%;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payName,
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payCnt { width: 150px;}
    .orderInformationWrap .orderInformation .paymentPage .payAccount .inputArea.payCnt { display: inline-block; margin-top: 10px;}

    .orderInformationWrap .orderInformation .payInfo { font-size: 12px; margin-bottom: 10px; gap: 5px;}
    .orderInformationWrap .orderInformation .payInfo img { width: 16px;}
    .orderInformationWrap .orderInformation .orderAgree { gap: 10px;}
    .orderInformationWrap .orderInformation .orderAgree input[type="checkbox"] + label { font-size: 14px; }

    .orderInformationWrap .orderInformation.order3 .rightArea {border: none; padding: 0;}
    .orderInformationWrap .orderInformation.order3 .rightArea .totalBorder { padding: 40px 10px; border: 1px solid #c8c8c8; border-radius: 15px; box-sizing: border-box; margin-bottom: 30px;}

    .orderInformationWrap .orderInformation.order3 .rightArea .orderTit { margin-bottom: 30px;}
    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText {  font-size: 16px;}
    .orderInformationWrap .orderInformation.order3 .orderTotalArea .totalText .totalCnt { font-size: 30px; }

    .orderInformationWrap .orderInformation.order3 .rightArea .totalAgree { margin-bottom: 30px;}
    .orderInformationWrap .orderInformation.order3 .rightArea .totalAgree input[type="checkbox"] + label { font-size: 14px; }










    /*
     *********************  주문자 정보 ( 날짜 팝업 )
    */
    .orderInformationWrap .dayPopupWrap .dayPopup { border-radius: 0; width: 380px;}
    .orderInformationWrap .dayPopupWrap .dayPopup .titleArea { padding: 30px 20px; }
    .orderInformationWrap .dayPopupWrap .dayPopup .titleArea .title { font-size: 16px; }
    .orderInformationWrap .dayPopupWrap .dayPopup .titleArea .closeBtn img{ width: 18px;}
    .orderInformationWrap .dayPopupWrap .dayPopup .dayArea { padding: 30px 20px; }



}