/* 시연용 */
.tabletWrap{width:100%; margin: 0 auto;}

.wrap{width: 100%; overflow: hidden; }

body{overflow: hidden}

/* 로그인 */
.orderIntro{}
.orderIntro a{position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: url(../images/intro.png) no-repeat center / cover;}

.loginForm_wrap{display: flex; align-items: center; position: absolute; width: 100%; height: 100%;}
.loginForm{width: 420px; margin: 0px auto;}
.loginForm:not(.focus){width: 420px; margin: 0px auto;}
.loginForm .loginLogo{text-align: center; margin-bottom: 30px;}
.loginForm .loginLogo img{width: 60%; }
.loginForm .loginInput{position: relative; margin-bottom:15px;}
.loginForm .loginInput label{position: absolute; left: 12px; top: 0; line-height: 50px; color: #989ca9; transition: all 0.2s;}
.loginForm .loginInput input{width: 100%; height: 50px;}
.loginForm .loginInput input.on + label,
.loginForm .loginInput input:focus + label{left:12px ; top: -15px; background: #fff; padding: 0 10px; line-height: 30px;}
.loginForm button[type="submit"]{width: 100%; margin-top: 20px;}
.loginForm .loginIdpw{text-align: center;}
.loginForm .loginIdpw a{display: inline-block; margin-top: 30px; padding:0 14px; color: #777; position: relative; font-size: 13px;}
.loginForm .loginIdpw a:hover{color:var(--fontDefultColor)}
.loginForm .loginIdpw02{display: flex;gap:12px;justify-content: center;}
.loginForm .loginIdpw02 a{position: relative; padding: 0;}
.loginForm .loginIdpw02 a:after{content:'';position: absolute;right: -7px;top: 50%;transform: translateY(-50%); width: 1px;height: 13px;background: #ddd;}
.loginForm .loginIdpw02 a:last-child:after{display: none;}
.loginDesc{font-size: 14px; color: var(--mainColor); margin-top: 10px;}
.orderDesc{font-weight: 800; font-size: 16px; margin-top: 30px; color: var(--mainColor); text-align: center;}

/* 회원가입, 비밀번호 */
.contentForm_wrap{height: calc( 100vh - 60px ); overflow-y: auto; }
.contentForm{width: 90%; max-width: 450px; margin: 0px auto;}
.contentForm .notice_box{background: #ecfaff;border: 1px solid var(--mainColor);line-height: 1.2;font-size: 14px;color: #666;margin: 10px 0;border-radius: 12px;padding: 10px;}
.contentForm.wfull{width: 100%; max-width: unset; }
.contentForm h2{margin: 30px 0; height: 35px; text-align: center; font-weight: 700; color: var(--fontDefultColor)}
.contentForm h3{margin-bottom: 10px; text-align: left; font-weight: 700; font-size: 1.8rem; }
.contentForm .inputBox_wrap{display: flex; gap: 10px; }
.contentForm .inputBox_wrap.btnBox .inputBox{width: calc( 100% - 85px) }
.contentForm .inputBox_wrap.btnBox .btn{width: 120px; padding: 0; height: 50px; line-height: 50px;}
.contentForm .inputBox{position: relative; margin-bottom:15px;}
.contentForm .inputBox label{position: absolute; left: 12px; top: 0; line-height: 50px; color: #989ca9; transition: all 0.2s;}
.contentForm .inputBox input{width: 100%; height: 50px;}
.contentForm .inputBox input.on + label,
.contentForm .inputBox input:focus + label{left:12px ; top: -15px; background: #fff; padding: 0 10px; line-height: 30px;}
.contentForm .selectBox{width: 100%; margin-bottom: 15px;}
.contentForm .selectBox select{width: 100%; height: 50px; background-position: right -135px top -157px; }
.contentForm .selectBox select.s_sel{width: 100%; font-size: 1.3rem; }
.contentDesc{font-size: 12px; color: #bb2d3b; margin-top: -10px; margin-bottom: 20px; text-decoration: underline;}
.contentForm .btnWrap{display: flex; gap: 10px;}
.contentForm .btnWrap .btn{width: calc( 50% - 5px); }

/* 카페관리 */
.cafeList{border-top: 1px solid #ddd;  }
.cafeList li{ display: flex; gap: 10px; border-bottom: 1px solid #ddd; padding: 10px 0; align-items: center;}
.cafeList li .cafeInfo{ width: calc( 100% - 105px); }
.cafeList li .cafeInfo .name{font-size: 18px; font-weight: bold;}
.cafeList li .cafeInfo .address{font-size: 12px; color: #999; }
.cafeList li .cafeBtn{ width: 105px; display: flex; gap: 5px;}
.cafeList li .cafeBtn .btn{padding: 0;}
.cafeList li .cafeBtn .btn.bgMain{pointer-events: none}
.cafeList li .cafeBtn .btn:nth-of-type(1){width: 60px;}
.cafeList li .cafeBtn .btn:nth-of-type(2){width: 40px;}
.cafeList + .btnWrap{margin-top: 20px;}
.storeAdd{}
.storeAdd .contentForm_wrap{height: auto;}
.storeAdd .contentForm{width: 100%}
.storeAdd .swal2-confirm{width: 100%; }
.storeAdd .swal2-actions{margin: 0 1.6em; }
.storeAdd .swal2-confirm{height: 48px; line-height: 48px; padding: 0; margin: 0; font-size: 1.6rem; }

/* 주문내역 */
.orderView{padding: 10px; border: 1px solid var(--mainColor); background: #f7f7f7; border-radius: 12px; margin-bottom: 40px;}
.orderView.nobd{border: none; margin-bottom: 20px;}
.orderView > li{padding: 10px 0; display: flex; font-weight: 500;  font-size: 1.4rem;  }
.orderView li .title{width: 90px; padding-right: 10px; text-align: right; font-weight: 500; color: #111 }
.orderView li .cont{color: #666; width: calc( 100% - 105px); text-align: left; padding-left: 10px; }
.orderView li .cont span{font-size: 1.2rem; color: #999}
.orderView li .cont.order{}
.orderView li .cont.order ul{}
.orderView li .cont.order ul li{}
.orderView li .cont.order ul li + li{margin-top: 3px;}

.orderHistory{ border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.orderHistory li{ display: flex; gap: 10px;  padding: 15px; align-items: center; border-top: 1px solid #ddd; }
.orderHistory li:nth-of-type(even){background: #f7f7f7;}
.orderHistory li .orderInfo{ width: calc( 100% - 90px); font-size: 1.2rem; color: #666; display: flex; flex-wrap: wrap;  gap: 5px; }
.orderHistory li .orderInfo .name{ font-size: 1.3rem; font-weight: bold; color: #111; width: 100%; }
.orderHistory li .cafeBtn{ width: 85px; display: flex; gap: 5px;}
.orderHistory li .cafeBtn .btn{padding: 0;}

/* 마이페이지 */
.mypageInfo{  height: 70px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 10px solid #f7f7f7; }
.mypageInfo .myInfo{font-size: 2rem; }
.mypageInfo .myInfo strong{font-weight: bold; color: var(--mainColor); }

.pointList_wrap{padding: 20px;}
.totalPoint{padding:0 20px; height: 80px;  border: 1px solid var(--mainColor); background: #f7f7f7; display: flex; align-items: center; justify-content: center;  border-radius: 12px; font-size: 2rem; margin-bottom: 20px; }
.totalPoint strong{ font-weight: 900; font-size: 2.4rem; margin-left: 5px; }
.pointList{ border-top: 1px solid #ddd; height: calc( 100vh - 420px); overflow-y: auto; }
.pointList li{ display: flex; gap: 10px;  padding: 15px; flex-direction: column; border-bottom: 1px solid #ddd; }
.pointList li:nth-of-type(even){background: #f7f7f7;}
.pointList li .pointInfo{ font-size: 1.3rem; color: #666; justify-content: space-between;     display: flex; }
.pointList li .pointInfo .name{width: calc( 100% - 90px);  font-weight: bold; color: #111; width: calc( 100% - 100px);  }
.pointList li .pointInfo .name span{  font-weight: normal; color: #999;  }
.pointList li .pointInfo .point{ font-size: 1.3rem; font-weight: bold; width: 100px; text-align: right; }
.pointList li .pointInfo .point.add{ color: #bb2d3b; }
.pointList li .pointInfo .point.subtract{ color: #2a58d4; }
.pointList li .pointDesc{font-size: 1.2rem; color: #666; display: flex; gap: 10px; }

.withdrawal{ height: 45px; text-align: center; line-height: 45px; color: #999; text-decoration: underline; }


/* 상, 하단 */
.subHeader{line-height: 60px; text-align: center; font-size: 2.4rem; background: var(--mainColor); color: #fff;}
.subHeader .back{position: absolute; float: left; display: inline-block; width: 60px; height: 60px; left: 0; text-align: center;}
.subHeader .back::after{content: "\e317"; font-family: 'Material Icons'; color: #fff; font-size:30px}
.subHeader .cartClose{position: absolute; display: inline-block; width: 60px; height: 60px; left: 0; text-align: center;}
.subHeader .allDelete{position: absolute; display: inline-block; width: 60px; height: 60px; right: 0; text-align: center;}
.subHeader .cartClose::after{content: "\e317"; font-family: 'Material Icons'; color: #fff; font-size:30px}
.subHeader .allDelete::after{content: "\e928"; font-family: 'Material Icons'; color: #fff; font-size:30px}
.footBtn {position: absolute; bottom: 0; padding: 0; left: 0; right: 0; background: #fff;  }
.footBtn a{height: 65px !important; line-height: 65px !important; font-size: 2.4rem; border-radius: 0;}

.loginFooter{ position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 13px; }
.loginFooter p{}

.loginFooter p span:after{content: ""; display: inline-block; height: 10px; width: 1px; background: #ccc; margin: 0 13px; }
.loginFooter p span:last-child:after{display: none}

/* 버튼 */
.btn{border-radius: 4px; text-align: center; display: inline-block; position: relative; font-size: inherit;}
.btn.sizeSS{padding: 0 12px; height: 26px; line-height: 26px; font-size: 1.2rem;}
.btn.sizeS{padding: 0 12px; height: 32px; line-height: 32px; font-size: 1.2rem;}
.btn.sizeM{padding: 0 20px; height: 40px; line-height: 40px; }
.btn.sizeL{padding: 0 28px; height: 48px; line-height: 48px;}

.btn.bgMain{background: var(--mainColor); color: #fff;}
.btn.bgMain:hover{background: var(--subColor); box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bgMain:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgMain:disabled:hover{box-shadow: none;}

.btn.bdMain{background: #fff; color: var(--subColor); border:1px solid var(--mainColor);}
.btn.bdMain:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdMain:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdMain:disabled:hover{box-shadow: none;}

.btn.bdGray{background: #fff; color: #777; border:1px solid #dfe2ed;}
.btn.bdGray.on,
.btn.bdGray:hover{background: #fff; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}
.btn.bdGray:disabled{background: #dfe2ed; color: #c3c6cf;}
.btn.bdGray:disabled:hover{box-shadow: none;}

.btn.bgGreen{background: #328343; color: #fff;}
.btn.bgGreen:hover{background: #38a24e; box-shadow: 0 0 10px rgba(39, 235, 114, 0.2);}
.btn.bgGreen:disabled{background: #edf0f9; color: #bbbec8;}
.btn.bgGreen:disabled:hover{box-shadow: none;}

.btn.bgGray{background: #989ca9; color: #fff;}
.btn.bgGray.on,
.btn.bgGray:hover{background: #bbbec9; box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);}
.btn.bgGray:disabled{background: #dfe2ed; color: #fff;}
.btn.bgGray:disabled:hover{box-shadow: none;}

.btn.bgPurple{background: #9353a4; color: #fff;}
.btn.bgPurple:hover{background: #9353a4; box-shadow: 0 0 10px rgba(39, 91, 235, 0.2);}


/* 상세 */
.productsView{max-width:1024px; margin:0 auto; padding:0 20px; }
.productsView_top{padding: 50px 0; }
.productsView_top .productsView_inner{display: flex; justify-content: space-between;}
.productsView_top .viewImg{width: 300px; height: 300px; border-radius: 20px; overflow: hidden;}
.productsView_top .viewImg img{ width:100%; }
.productsView_top .viewInfo {width: calc( 100% - 350px);}
.viewInfo .stat{font-weight: 700; font-size: 2rem; }
.viewInfo .title{font-weight: 500; font-size: 2rem; margin-top: 10px;}
.viewInfo .desc{font-size: 1.4rem; color: #9b9b9b; margin-top: 10px;}
.viewInfo .itemCounter_wrap{display: flex; justify-content: space-between; padding-top: 25px; margin-top: 40px; border-top: 1px solid #eef0f5;}
.viewInfo .itemCounter_wrap .itemCounter{ overflow: hidden; border-radius: 8px; border: 1px solid #d3d5dc; font-size:0;}
.viewInfo .itemCounter_wrap .itemCounter input{border: none; width: 80px; text-align: center; font-size: 1.8rem;}
.viewInfo .itemCounter_wrap .itemCounter button {width: 40px;  height: 40px; font-size: 2.2rem;}
.viewInfo .itemCounter_wrap .itemCounter button.countM{border-right : 1px solid #d3d5dc;}
.viewInfo .itemCounter_wrap .itemCounter button.countP{border-left : 1px solid #d3d5dc;}
.viewInfo .itemCounter_wrap .itemCounter button.countM:disabled{color: #999;}
.viewInfo .itemCounter_wrap .itemPrice{}
.viewInfo .itemCounter_wrap .itemPrice input{border: 0; font-size: 2.2rem; text-align: right; font-weight: 900; color: #9353a4;}
.viewInfo .viewBtn{margin-top: 25px; display: flex; justify-content: space-between;}
.viewInfo .viewBtn a,
.viewInfo .viewBtn button{height: 56px; line-height: 56px; text-align: center; border-radius: 8px;}
.viewInfo .viewBtn .cart{border: 1px solid #110d64; width: 45%; }
.viewInfo .viewBtn .order{width: 53%; background: #110d64; font-weight: 700; color: #fff;}

.productsView_bottom {padding: 50px 0; text-align:center;  overflow:hidden; padding:0 20px;}
.productsView_bottom.open{height:auto;}
.productsView_bottom img{}
.prodict_more{text-align:center; background:#fafafa; height:60px; line-height:60px; border-top:1px solid #ddd; margin-top:5px;}



/* 주문완료 */
.formWrap{overflow-y: auto; height: 900px;}
.formWrap .rowWrap{border-bottom: 10px solid #e7e7e7;}
.formWrap .rowWrap:nth-last-child(1){border-bottom: 0;}
.formWrap .rowWrap.orderResult{border-bottom: 0;}
.formWrap .row input, .formWrap .row textarea,
.formWrap .row{ font-size: 2rem;}
.formWrap .rowWrap.price{ padding:15px 20px;}
.formWrap .rowWrap.price .row{ display: flex;  justify-content: space-between;  font-size: 2rem;}
.formWrap .rowWrap.price .row + .row {margin-top: 15px;}
.formWrap .rowWrap.price .row:nth-last-child(1){font-size:2.4rem; font-family: 'notoSansB'; padding-top: 15px; border-top: 1px solid #333;}
.formWrap .row .title{background: #f5f5f5;  font-family: 'notoSansB'; padding: 15px 20px;}
.formWrap .row .cont{padding: 20px;}
.formWrap .row .cont div + div{margin-top: 10px;}
.formWrap .row .cont.item{}
.formWrap .row .cont.item + .cont{border-top: 1px solid #ddd;}
.formWrap .row .cont.item div{display: flex; justify-content: space-between;}
.formWrap .row .cont.item div + div{margin-top: 5px;}
.orderResult{padding: 20px; color: var(--mainColor); font-size: 3rem; text-align: center; font-family: 'notoSansB';}


/* 레이어팝업 */
.layerPopupWrap{display: none; position: fixed; z-index: 50; top: 0; left: 0; right: 0; bottom: 0;  background: rgba(37, 39, 43, 0.4); }
.layerPopup{position: relative; overflow: hidden; border-radius: 8px;  background: #fff; width: 80%;  top: 50%; left: 50%; transform: translate(-50%, -50%);}
.layerPopup .title{text-align: center; margin-top: 30px; font-size: 20px;}
.layerPopup .content{padding: 20px;}
.layerPopup .popupClose{position: absolute; width: 40px; height: 40px; top: 30px; right: 20px; color: #696d76;}


/* gnb */
.gnb{ width: 100%;  background: #0a0a0c; position: relative;}
.gnb h1{text-align: left; height: 60px; line-height: 60px; padding:0 20px; color: #fff; font-size: 23px; font-weight: 600; border-bottom: 1px solid #2a2a2a;}
.gnb h1 img{height: 30px; margin-right: 10px; filter: brightness(0) invert(1); vertical-align: middle;}
.gnb .gnb_wrap{font-size: 0; height: 50px; width: 100%; overflow: hidden; overflow-x: auto; white-space: nowrap; padding: 0;}
.gnb .gnb_wrap div{display:inline-block; height: 50px; padding: 0 20px; line-height: 50px;  padding:0 20px;  font-size: 1.8rem; color: #ccc;}
.gnb .gnb_wrap div + div{border-top: 1px solid #2a2a2a;}
.gnb .gnb_wrap div.on{background: var(--mainColor); color: #fafafa;}
.gnb .odList{position: absolute; bottom: 0; width:100%; height: 50px; line-height: 50px; text-align: center; font-size: 1.8rem; background: #d7d7d7}
.gnb  .btn_call{width: 40px; height: 40px; background: #fff; border: 1px solid #000; color: var(--mainColor); position: absolute; right: 60px; top: 10px; border-radius: 50%;}
.gnb  .btn_call i{color:#9353a4;}
.gnb .cartToggle{background:#fff url("../images/icon_cart.svg") no-repeat center / 25px auto; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; text-indent: -9999px;}
.gnb .cartToggle.u{background:#fff url("../images/icon_cart.svg") no-repeat left 7px center / 25px auto;}
.gnb .cartToggle span{
    position: absolute;
    right: -3px;
    top: 3px;
    color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 12px;
    background: red;
    text-indent: 0;
}

/* 주문메인 */
.productList_wrap{  background: #161620; overflow-y: auto}

.storeInfo{height: 60px; line-height: 60px; width: 100%; background: #161620; padding: 0 10px; box-sizing: border-box; color: #ccc; font-size: 1.4rem; text-align: right; position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; }
.storeInfo .orderArea{width: calc( 100% - 90px); text-align: left;  }
.storeInfo .orderArea p {font-size: 1.6rem; font-weight: bold; color: #fff; border-bottom: 1px solid #3b3b3b; height: 40px; line-height: 40px; }
.storeInfo .orderArea select{ width: 100%; font-weight: bold; background-color: #161620; color: #fff; border: 0; font-size: 1.6rem; border-radius: 0; border-bottom: 1px solid #3b3b3b; padding: 0; background-position: right -145px top -164px;}
.storeInfo .orderType{ font-size: 1.6rem; display: flex; align-items: center; justify-content: center;  border: 1px solid #3b3b3b; color: #fff; font-weight: 500;  height: 40px; width: 70px; }

.productList{ padding:0 10px 10px 10px; overflow: hidden}
.productList li:not(.show){display:none;}
.productList li.show{float: left;  width: calc( (100% - 10px ) / 2 ); padding:10px; overflow: hidden; background: #fff; margin:0 10px 10px 0;}
/* .productList .show:nth-of-type(2n+2){margin-right: 0;} */
.productList li .img{ }
.productList li .img img{ width: 100%; min-height: 100%}
.productList li .cart{margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; text-align: right;}
.productList li .txt{font-size: 1.4rem; padding: 5px 0;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.productList li .cost{font-size: 1.6rem; font-weight: 600; color: #bc2626 ;}
.productList li .cost button{background: #9353a4; color: #fff;float: right;font-size: 14px; margin-top: 2px; padding:0 5px;}

/* 장바구니 */
.cartWrap_pop{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 50}
.cartWrap_pop .cartHead{height: 50px; line-height: 50px; position: relative; background: #0a0a0c; font-weight: 600; font-size: 1.8rem; color: #fff; padding: 0 10px;  border-bottom: 3px solid #2a2a2a}
.cartWrap_pop .cartHead .cartX{ position: absolute; width: 30px; height: 30px; right: 10px; top: 6px; text-indent: -9999}
.cartWrap_pop .cartHead .cartX:before{
    content: "\e5cd";
    font-family: 'Material Icons';
    font-size: 2.4rem;
    color: #fff;
}
.cartWrap_pop .cartHead .allDelete{ position: absolute; width: 30px; height: 30px; right: 50px; top: 6px; text-indent: -9999}
.cartWrap_pop .cartHead .allDelete:before{
    content: "\e872";
    font-family: 'Material Icons';
    font-size: 2.4rem;
    color: #fff;
}

.cartWrap{width: 100%; position: relative;}
.cartItemList_wrap{overflow: auto; height: calc(100vh - 295px) !important; background: #0a0a0c;}
.cartItemList{ overflow-y: auto; }
.cartItemList li{display: flex; position: relative; padding: 10px; position: relative; border-bottom: 1px solid #2a2a2a;}
.cartItemList li > div{justify-content: space-between;}
.cartItemList li .tumbler{background: url(../images/tumbler.svg) no-repeat center; text-indent: -9999px; display: inline-block; width: 20px; }
.cartItemList li .img{width: 100px; height: 100px; margin-right: 20px; border-radius: 5px; overflow: hidden;}
.cartItemList li .img img{width: 100%;}
.cartItemList li .txt{font-size: 1.6rem; color: #ccc; padding-right:5px; width: 100%}
.cartItemList li .cartItemBottom{margin-top: 15px; display: flex; justify-content: space-between;}
.cartItemList li .cartItemBottom .itemCounter{font-size: 0; border: 1px solid #2a2a2a;}
.cartItemList li .cartItemBottom .itemCounter input{border: none; width: 40px; height: 30px; text-align: center; font-size: 1.6rem; padding: 0; border-radius: 0; background: #0a0a0c; color: #ccc;}
.cartItemList li .cartItemBottom .itemCounter button {width: 30px;  height: 30px;  line-height: 30px; font-size: 1.8rem; background: #0a0a0c; color: #ccc;}
.cartItemList li .cartItemBottom .itemCounter button.countM{}
.cartItemList li .cartItemBottom .itemCounter button.countM:disabled{color: #999;}
.cartItemList li .cartItemBottom .itemPrice{width: calc(100% - 130px); }
.cartItemList li .cartItemBottom .itemPrice input{border: 0; font-size: 1.8rem; width: 100%; height: 30px; background: transparent; text-align: right; padding: 0; background: #0a0a0c; color: #ccc;}
.cartItemList li .del{ width: 35px; height: 35px;  position: absolute; right: 5px; top: 5px; color: #ccc;}
.cartItemList li .del::after{content: "\e5cd"; font-family: 'Material Icons'; font-size: 2rem}

.cartBottom{ border-top: 5px solid #2a2a2a; padding: 10px;}
.orderCost{font-size: 2.4rem; overflow: hidden; text-align: right;}
.orderCost span{ font-weight: 600; color: #bc2626;}
.orderCost input{border: none; padding: 0; font-size: 2.5rem; text-align: right; vertical-align: baseline; font-family: 'notoSansB';}
.cartBottom textarea{ height:60px; line-height: 1; min-height: 60px; border-radius: 0; padding: 5px; font-size: 1.4rem;}
.cartBottom .payType{padding: 10px 5px; font-size: 1.4rem;}
.cartBottom .cartbtn{display: flex; justify-content: space-between}

.cartBottom .cartbtn a{display: inline-block; width: 100%; height: 50px !important; line-height: 50px !important; font-size: 2.2rem; border-radius: 0; text-align: center; background: var(--mainColor); color: #fff; font-weight: 600;}



.install_wrap{display: flex; justify-content: center; width: 1200px; }

.install_wrap{width: 100%; max-width: 1280px; height: 800px; position: relative; }

.install_wrap .download_wrap{  position: absolute; z-index: 1000;  left: 50%; top: 230px; transform: translateX(-50%); display: flex;  gap: 10px; }
.install_wrap .download_wrap a{display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; width: 150px; height: 150px; text-align: center; }
.install_wrap .download_wrap a span{display: block; width: 50px; height: 50px; margin:30px auto 15px; font-size: 50px;}
.install_wrap .download_wrap a:nth-of-type(1){background: url(/common/order/images/mainBtn3.png) no-repeat center / contain; }
.install_wrap .download_wrap a:nth-of-type(2){background: url(/common/order/images/mainBtn2.png) no-repeat center / contain; }
.install_wrap .download_wrap a:nth-of-type(3){background: url(/common/order/images/mainBtn3.png) no-repeat center / contain; }
.install_wrap .download_wrap a:nth-of-type(4){background: url(/common/order/images/mainBtn4.png) no-repeat center / contain; }


.install_wrap .visualTxt{position: absolute; z-index: 1000; top: 230px; left: 40px;}
.install_wrap .visualLogo{position: absolute; z-index: 1000; top: 30px; left: 50%; transform: translateX(-50%); text-align: center; }
.install_wrap .visualLogo img{width:80%;height:auto;}
.detailPop{max-height: 500px; overflow-y: auto;}
.detailPop img{width:100% !important;}
.swiper-slide img{width: 1400px;height: auto;}
.swiper-slide .visualTxt img{width: auto; height: auto;}
.swiper-slide a{display: block}


.mobileFooterWrap{height: 60px; display: flex; width: 100%; background: #3b3b3b; justify-content: center;  }
.mobileFooterWrap > a{color: #fff; width: 25%;  display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: center; }
.mobileFooterWrap > a img{height: 20px; object-fit: contain; filter:brightness(0) invert(1); margin-top: 5px; }
.mobileFooterWrap > a span{ font-size: 1.2rem; }

.nofoot + .mobileFooterWrap,
.loginForm_wrap + .mobileFooterWrap{display: none;}
.orderDetail_wrap + .mobileFooterWrap{display: none;}

/* 목록 */
.tblBasic{width:100%; word-break:break-all; border-top:2px solid var(--mainColor)}
.tblBasic th, .tblBasic td{ vertical-align:middle; text-align:center; border-bottom:1px solid #d6d6d6; background:#fff;}
.tblBasic th{border-bottom:1px solid #c6c6c6; background:#e5e5e5; padding:10px 5px; text-align:center; vertical-align:middle;}
.tblBasic td{padding:15px;}
.tblBasic .noData td{padding: 40px 0; background: #f7f7f7}

.tblBasic tfoot td{text-align: right; font-size: 1.8rem; padding-right: 20px; font-weight: 700;}

#payPrice.sale{text-decoration: line-through}
.pointUse_wrap{display: flex; justify-content: space-between;}
.pointUse_wrap input{height: 32px; line-height: 32px; width: 100%; margin-left:5px;}
.residuumPoint{text-align: right; margin-top: 5px; font-size: 1.4rem;}










/* bx */
.bx-wrapper {position: relative;margin: 0 auto 60px;padding: 0;*zoom: 1; }
.bx-wrapper img {max-width: 100%;display: block; }
.bx-wrapper .bx-viewport {-webkit-transform: translatez(0);-moz-transform: translatez(0);    -ms-transform: translatez(0);    -o-transform: translatez(0);    transform: translatez(0); }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {position: absolute;bottom: -30px;width: 100%; }

/* PAGER */
.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;padding-top: 20px; }
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline; }
.bx-wrapper .bx-pager.bx-default-pager a {background: #666;text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;outline: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {background: #000; }

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {left: 10px;background: url(images/controls.png) no-repeat 0 -32px; }
.bx-wrapper .bx-next {right: 10px;background: url(images/controls.png) no-repeat -43px -32px; }
.bx-wrapper .bx-prev:hover {background-position: 0 0; }
.bx-wrapper .bx-next:hover {background-position: -43px 0; }
.bx-wrapper .bx-controls-direction a {position: absolute;top: 50%;margin-top: -16px;outline: 0;width: 32px;height: 32px;text-indent: -9999px;z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled {display: none; }

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {text-align: center; }
.bx-wrapper .bx-controls-auto .bx-start {display: block;text-indent: -9999px;width: 10px;height: 11px;outline: 0;background: url(images/controls.png) -86px -11px no-repeat;margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {background-position: -86px 0; }
.bx-wrapper .bx-controls-auto .bx-stop {display: block;text-indent: -9999px;width: 9px;height: 11px;outline: 0;background: url(images/controls.png) -86px -44px no-repeat;margin: 0 3px; }
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {background-position: -86px -33px; }

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left;width: 80%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0;width: 35px; }

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {position: absolute;bottom: 0;left: 0;background: #666;background: rgba(80, 80, 80, 0.75);width: 100%; }
.bx-wrapper .bx-caption span {color: #fff;font-family: Arial;display: block;font-size: .85em;padding: 10px; }

.bxslide_wrap{width:100%; /*max-width: 1280px;*/ height: 800px;}




.tumblerPop .swal2-modal{width: 700px;}
.tumblerBox > div{font-weight: bold; font-size: 2rem; line-height: 1;}
.tumblerBox > p.check_txt{word-break: keep-all;margin-top: 20px;font-size: 18px;}
.tumblerBox > .descList{margin-top: 30px;}
.tumblerBox > .descList li{text-align: left; font-size: 1.4rem; position: relative; padding-left: 8px; }
.tumblerBox > .descList li + li{margin-top: 8px;}
.tumblerBox > .descList li:before{content: ""; position: absolute; width: 2px; height: 2px; background: #8d8d8d; border-radius: 50%; left: 0; top: 10px;}



/* terms_wrap 이용약관 페이지*/
.terms_wrap{padding: 20px;overflow-y: scroll;height: 100vh;}
.terms_wrap h4{text-align: center;margin: 30px 0;font-size: 24px;}
.terms_wrap .tit{position: relative;font-size: 18px;padding-left: 15px;margin-top: 20px;font-weight: 600;}
.terms_wrap .tit:nth-child(2){margin-top: 0;}
.terms_wrap .tit:after{position: absolute;content: ''; left: 0;top: 50%;transform: translateY(-50%);width: 5px;height: 5px;background: #000;border-radius: 50%;}
.terms_wrap .txt p{margin: 15px 0;font-size: 15px;}
.terms_wrap .txt span{display: block; font-size: 14px;}
.terms_wrap .txt span.mt01{margin-top: 15px;}
.terms_wrap .loginFooter{position: relative;bottom: 0;margin-top: 30px;padding: 0;}



/* terms_page 이용약관 동의 페이지*/
.terms_page{padding: 20px;overflow-y: scroll;height: 100vh;}
.terms_page .terms_form h3{text-align: center;margin: 30px 0;font-size: 24px;}
.terms_page .terms_form ul li:not(:last-child){margin-bottom: 20px;}
.terms_page .terms_form ul li .c_box{display: flex;align-items: center;gap:5px;}
.terms_page .terms_form ul li .c_box label{font-weight: 600;font-size: 15px;}
.terms_page .terms_form ul li .txt_box{margin-top: 10px;height: 200px;border: 1px solid #ddd;padding: 10px;overflow-y: scroll;}
.terms_page .terms_form ul li .txt_box h4{font-size: 15px;margin-bottom: 15px;}
.terms_page .terms_form ul li .txt_box .tit{position: relative;font-size: 14px;padding-left: 10px;margin-top: 13px;font-weight: 500;}
.terms_page .terms_form ul li .txt_box .tit:nth-child(1){margin-top: 0;}
.terms_page .terms_form ul li .txt_box .tit:after{position: absolute;content: ''; left: 0;top: 50%;transform: translateY(-50%);width: 4px;height: 4px;background: #000;border-radius: 50%;}
.terms_page .terms_form ul li .txt_box .txt p{margin: 7px 0;font-size: 12px;}
.terms_page .terms_form ul li .txt_box .txt span{display: block; font-size: 11px;}
.terms_page .terms_form ul li .txt_box .txt span.mt01{margin-top: 7px;}
.terms_page .terms_form ul li .txt02 p{font-size: 12px;font-weight: 500;margin-bottom: 3px;}
.terms_page .terms_form ul li .txt02 span{display: block;position: relative;font-size: 11px;padding-left: 10px;margin-bottom: 10px;}
.terms_page .terms_form ul li .txt02 span:after{content:'';position: absolute;left: 0;top: 7px;width: 3px;height: 3px;border-radius: 50%;background: #000;}
.terms_page .terms_form .btn_box{margin-top: 30px;display: flex;gap:10px;justify-content: center;}
.terms_page .terms_form .btn_box a,
.terms_page .terms_form .btn_box button{display: block;line-height: 30px;width: 100px;border-radius: 4px;color: #fff;text-align: center;background: var(--mainColor);font-size: 14px;}
.terms_page .terms_form .btn_box button{background: #9353a4;}
.terms_page .loginFooter{position: relative;bottom: 0;margin-top: 30px;padding: 0;}

/* privacy_wrap 개인정보처리방침*/
.privacy_wrap{padding: 20px;overflow-y: scroll;height: 100vh;}
.privacy_wrap h4{text-align: center;margin: 30px 0;font-size: 24px;}
.privacy_wrap ul li:not(:last-child){margin-bottom: 15px;}
.privacy_wrap ul li p{font-size: 16px;margin-bottom: 5px;font-weight: 600;}
.privacy_wrap ul li span{position: relative; font-size: 14px;padding-left: 10px;}
.privacy_wrap ul li span:after{content:'';position: absolute;left: 0;top: 8px;width: 4px;height: 4px;border-radius: 50%;background: #000;}
.privacy_wrap ul li:last-child span{padding-left: 0;}
.privacy_wrap ul li:last-child span:after{display: none;}
.privacy_wrap .loginFooter{position: relative;bottom: 0;margin-top: 30px;padding: 0;}