@charset "UTF-8";

:root{
  --fixed-btn-bottom : 20px;
}

/* �ε� �˾� */
.com_loading_popup{width: 100vw;height: 100vh;position: fixed;z-index: 9990;display: none;}
.com_loading_popup.on{display: block;}
.com_loading_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}
.com_loading_popup .con_box{width: 300px;height: 200px;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;z-index: 10;box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.com_loading_popup .con_box .txt_box{width: 100%;height: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.com_loading_popup .con_box .ic_loading{width: 50px;margin-bottom: 20px}
.com_loading_popup .con_box .big_txt{font-size: 22px;font-weight: bold;color: #333;}


/* ȸ������ �̺�Ʈ �˾� */
.layer_pop_wrap.join_pop{
    display:none;
    justify-content:center;align-items:center;
}
.layer_pop_wrap.join_pop.on{display:flex}
.layer_pop_wrap.join_pop .con_box{
    width:468px;height:579px;position:relative;z-index:1000;
    background:url(../img/join_coupon_img.png) no-repeat;
}
.layer_pop_wrap.join_pop .con_box .close{
    display:inline-block;
    width:48px;height:48px;background:url(../img/join_coupon_btn_close.png) no-repeat center;
    position:absolute;left:393px;top:49px;
}
.layer_pop_wrap.join_pop .con_box .shop{
    display:inline-block;
    width:294px;height:60px;background:url(../img/join_coupon_btn_shop.png) no-repeat center;
    position:absolute;left:101px;top:458px;
}
.layer_pop_wrap.join_pop .con_box .coupon{
    display:inline-block;
    width:294px;height:62px;background:url(../img/join_coupon_btn_coupon.png) no-repeat center;
    position:absolute;left:101px;top:517px;
}


/* 오른쪽 고정영역 */
.right_fix_box{position: fixed;right: 0;top: 0;width: 235px;height: 100vh;background: var(--bg-fff); z-index: 450;border-left: 1px;padding: 20px 20px 0 20px;transition: all 0.3s ease; border-left: 1px solid rgb(var(--color-100))}
.right_fix_box.on{right: -235px}
.right_fix_box .login .txt_link{font-size: 12px;text-align: right;padding-right: 3px;margin-bottom: 3px}
.right_fix_box .login .txt_link a:first-child{margin-right: 13px;position: relative;}
.right_fix_box .login .txt_link a:first-child::after{content: "";display: inline-block;width: 1px;height: 9px;background-color: #e2e2e2;position: absolute;right: -8px;top: 3px;}
.right_fix_box .login input{width: 100%;height: 34px;font-size: 12px; margin-bottom: 6px;padding: 0 7px;}
.right_fix_box .login input::placeholder{}
.right_fix_box .login button{width: 100%;height: 34px;line-height: 34px;text-align: center;color: rgb(var(--color-fff));background-color: var(--bg-111);font-size: 14px;font-weight: bold;}
.right_fix_box h3{font-size: 12px;font-weight: bold;padding-bottom: 11px;line-height: 1;margin-bottom: 15px;margin-top: 25px;position: relative;}
.right_fix_box h3::after{content: "";display: block;width: 29px;height: 1px;background-color: #c4c4c4;position: absolute;left: 0;bottom: 0;}
.right_fix_box .quick_button ul{display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 5px}
.right_fix_box .quick_button li{}
.right_fix_box .quick_button li a{display: block;height: 30px;text-align: center;line-height: 30px;font-size: 14px;}
.right_fix_box .quick_button li a:hover{text-decoration: underline;}
.right_fix_box .cs_center span{display: block;margin-bottom: 8px;}
.right_fix_box .cs_center .number{font-size: 38px;font-weight: bold;margin-bottom: 15px;}

.today_view_wrapper{overflow: hidden;height: 330px}
.today_slide li{height: auto;text-align: center;}
.today_slide li a{display: block;}
.today_view_wrapper li img{width: 160px}

.today_view{position: relative;}
.today_view .control{width: 33px;height: 17px;border-radius: 2px;border:1px solid rgb(var(--color-300));display: flex;position: absolute;right: 0;top: 0;justify-content: space-between;}
.today_view .control::after{content: "";display: inline-block;width: 1px;height: 100%;background-color: rgb(var(--color-300));position: absolute;left: 50%;top: 0;}
.today_view .control button{width: 50%;position: relative;text-indent: -9999px; background: transparent;}
.today_view .control button::after{content: "";display: inline-block;background-image: url(../img/com_img.png);background-repeat: no-repeat;position: absolute;width: 5px;height: 7px;top: 4px;}
.today_view .control button.today_btn_prev::after{background-position: -111px -49px;left: 4px;}
.today_view .control button.today_btn_next::after{background-position: -126px -49px;right: 4px;}

.right_fix_box .left_btn_box{position: absolute; top: 50%; right: 100%; transform: translate(-10px, -50%);}
.sns_list{display: flex;flex-direction: column; gap: 10px; align-items: flex-end;}
.sns_list li{border-radius: 20px; box-shadow: 1px 1px 3px var(--box-shadow-color-10); transition: all .3s; display: flex; gap:10px; box-shadow: none; }
.sns_list li:hover{width: fit-content;}
.sns_list li a{width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; position: relative;  gap: 10px; }
.sns_list li a .icon{display: block; width: 40px; height: 40px; background: #f9f9f9; border-radius: 50%; overflow: hidden; flex-shrink: 0; z-index: 2; position: relative; border: 1px solid rgb(var(--color-100)); }
.sns_list li a.youtube .icon{background: #f00; border-color: #f00}
.sns_list li a.instar .icon{background: transparent; border-color: transparent}
.sns_list li a.naver .icon{background: #2db400; border-color: #2db400}
.sns_list li a.kakao .icon{background: #fddc3f; border-color: #fddc3f}
.sns_list li a.facebook .icon{background: #3b5998; border-color: #3b5998}
.sns_list li a.sns_x .icon{background: #000; border-color: #000}
.sns_list li a.tiktok .icon{background: #000; border-color: #000}
.sns_list li a.mail .icon{background: #000; border-color: #000}

.right_fix_box.on .left_btn_box li a.btn_close::after{transform: rotate(180deg);}
.sns_list li a .icon i{display: block; width: 100%; height: 100%; background: url(../img/arrow_ic.svg) no-repeat center / 12px auto; filter: none !important;}
.sns_list li a.qrcode .icon i{background-image: url(../img/qrcode-scan.svg); background-size: 20px auto; border: 0px solid transparent; }
.sns_list li a.youtube .icon i{background-image: url(../img/ic_youtube3.png); background-size: cover;filter: none}
.sns_list li a.instar .icon i{background-image: url(../img/ic_instargram.png); background-size: 100% auto; filter: none}
.sns_list li a.naver .icon i{background-image: url(../img/ic_naver.svg); background-size: 16px auto; filter: none}
.sns_list li a.kakao .icon i{background-image: url(../img/ic_kakao.svg); background-size: 32px auto; filter: none}
.sns_list li a.facebook .icon i{background-image: url(../img/ic_sns_facebook.png); background-size: 28px auto; filter: none}
.sns_list li a.sns_x .icon i{background-image: url(../img/ic_sns_x.png); background-size: 24px auto; filter: none}
.sns_list li a.user_link .icon i{background-image: url(../img/ic_link.png); background-size: 24px auto; }
.sns_list li a.tel_link .icon i{background-image: url(../img/ic_tel.png); background-size: 24px auto; }
.sns_list li a.home_btn .icon i{background-image: url(../img/ic_home.png); background-size: 24px auto; }
.sns_list li a.telegram .icon i{background-image: url(../img/ic_telegram.png); background-size: cover; }
.sns_list li a.tiktok .icon i{background-image: url(../img/ic_tiktok.jpg); background-size: 28px auto; }
.sns_list li a.mail .icon i{background-image: url(../img/ic_mail2.png); background-size: cover}
.sns_list li a .txt{position: absolute; top: 0; right: 0; line-height: 40px; font-size: 12px; width: 40px; z-index: 1; background: #f9f9f9; padding: 0 10px; border-radius: 20px; text-align: right; transition: all .3s; overflow: hidden; white-space: nowrap; color: #333}
.sns_list li:hover a .txt{width: fit-content; padding-right: 50px; }




@media all and (max-width: 1024px){
  /* sns 아이콘 */
  .sns_wrapper{display: flex; position: fixed; bottom: var(--fixed-btn-bottom); right: 20px; transition: all .3s; flex-direction: column-reverse; gap: 10px; z-index: 51;}
  .sns_wrapper.on{bottom: calc(var(--fixed-btn-bottom) + 50px)}
  .sns_wrapper.bottom{bottom: calc(var(--fixed-btn-bottom) + 100px)}
  .sns_wrapper.shop_view{bottom: 60px;}
  .sns_wrapper.shop_view.on{bottom: 110px;}
  .sns_wrapper>button{width: 40px;height: 40px; border-radius: 50%; border : 1px solid var(--input-border-color);  background: #fff no-repeat center / 24px auto; }
  .sns_wrapper .home_btn{background-image: url(../img/ic_home.png)}
  .sns_wrapper .qrcode_open_btn{background-image: url(../img/qrcode-scan.svg)}
  .sns_wrapper .sns_open_btn{background-image: url(../img/ic_share2.png)}
  .sns_wrapper .sns_list{pointer-events: none; opacity: 0; transition: all .3s; transform: translateY(100px); ; z-index: -1; position: absolute; bottom: 100%; right: 0;}
  .sns_wrapper .sns_list.on{pointer-events: all; opacity: 1; transform: translateY(-10px);}
  .sns_wrapper .sns_list li a{flex-direction: row-reverse; background: #f6f6f6; border-radius: 20px}
  .sns_wrapper .sns_list li a span{width: 300%; padding-left: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; text-align: right}

	.right_fix_box{display:none}
}



/* 로그인 했을때 */
.login_box2{width: 100%;}
.login_box2 .logout{display: block;text-align: right;margin-bottom: 7px;font-size: 13px;color: #888}
.login_box2 .mem_box{width: 100%;height: 42px;font-size: 17px;color: #47484c;border: 1px solid #47484c;border-radius: 5px;line-height: 42px;text-align: center;font-weight: bold;}
.login_box2 .mem_box span{display: inline-block;position: relative;}
/* 
.login_box2 .mem_box span::before{content: "";display: inline-block;width: 20px;height: 100%;background: url(../img/ic_mem_basic.jpg) center center no-repeat;position: absolute;left: 0;top: 0;}
 */
.login_box2 .mem_box.ragular{border-color: #e44647;color: #e44647;}
.login_box2 .mem_box.ragular.regular2{border-color: #409b29;color: #409b29;}
.login_box2 .mem_box.ragular.regular3{border-color: #3c74dc;color: #3c74dc;}
.login_box2 .mem_box.ragular span::before{background-image: url(../img/ic_mem_ragular.jpg);}
.login_box2 .mem_box.ragular.regular2 span::before{background-image: url(../img/ic_mem_ragular1.jpg);}
.login_box2 .mem_box.ragular.regular3 span::before{background-image: url(../img/ic_mem_ragular2.jpg);}
.login_box2 .office_link{width: 100%;height: 42px;line-height: 42px;border-radius: 5px;background-color: #47484c;color: #fff;font-size: 17px;text-align: center;display: block;font-weight: bold;margin-top: 8px;}
.login_box2 .office_link.ragular{display: block;background-color: #e44647;}
.login_box2 .office_link.ragular.regular2{background-color: #409b29;}
.login_box2 .office_link.ragular.regular3{background-color: #3c74dc;}
.login_box2 .office_link span{padding-right: 20px;display: inline-block;position: relative;height: 100%}
.login_box2 .office_link span::after{content: "";display: inline-block;width: 7px;height: 100%;background: url(../img/arrow_white.svg) center center no-repeat;position: absolute;right: 0;top: 0;}
.login_box2 .welcome{display: block;margin-top: 8px;color: #888;font-size: 13px;padding-left: 3px}
.login_box2 .welcome span{font-weight: bold;color: #333;}
.login_box2 .welcome .coupon_save{display: flex;width: 100%;flex-direction: column;align-items:flex-start}
.login_box2 .welcome p{margin-bottom: 2px}
.login_box2 .welcome .coupon_save a:first-child{margin-bottom:7px;}
.login_box2 .welcome .coupon_save a{display: flex;color: #333;font-weight: 500;text-align: center;font-size: 14px;justify-content:space-between;width:100%}



/* 맨위로 */
.btn_move_top{width: 40px;height: 40px;position: fixed;border-radius: 50%;bottom: var(--fixed-btn-bottom);right: 20px;cursor: pointer;z-index: 51;background: var(--bg-primary); transform: translateY(100%); transition: all .3s; opacity: 0;}
.btn_move_top .icon{display: block; width: 10px; height: 10px; background:  url(../img/arrow.svg)  no-repeat center / cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg)}
.btn_move_top.white .icon{filter: brightness(0) invert(1)}
.btn_move_top.on{opacity: 1; transform: translateY(0)}
.btn_move_top.bottom{bottom: calc(var(--fixed-btn-bottom) + 50px)}
.btn_move_top.shop_view{bottom: 60px;}

/* 찜하기 팝업 */
.com_like_popup{width: 100vw;height: 100vh;position: fixed;z-index: 1500;display: none;}
.com_like_popup.on{display: block;}
.com_like_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}
.com_like_popup .con_box{width: 400px;height: auto;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: var(--bg-fff);z-index: 10;box-shadow: 0 0 10px var(--box-shadow-color-20);padding-top: 70px;padding-bottom:30px}
.com_like_popup .con_box .btn_close{width: 26px;height: 26px;position: absolute;top: 20px;right: 20px;text-indent: -9999px;background: url(../img/close_ic_black.svg) no-repeat center/contain;}

.com_like_popup .con_box .txt_box{width: 100%;display:block;text-align:center;font-size:18px;color:var(--color-default);padding:0 30px}
.com_like_popup .con_box .txt_box .ic_check{width: 50px;height: 50px;margin-bottom: 10px;}
.com_like_popup .con_box .txt_box .ic_check circle{stroke: #333;fill: none;}
.com_like_popup .con_box .txt_box .ic_check polyline{stroke: #5ca848;fill: none;}
.com_like_popup .con_box .btn_box{width: 100%;margin-top:40px;display: flex;justify-content: center;padding:0 30px}
.com_like_popup .con_box .btn_box button{flex:1}
.com_like_popup .con_box .big_txt{font-size: 28px;font-weight: bold;margin-bottom: 10px;color: #333;}
.com_like_popup .con_box .sm_txt{font-size: 16px;color: #888}


/* 장바구니 옵션선택 */
.com_option_popup{width: 100vw;height: 100vh;position: fixed;z-index: 500;display: none;}
.com_option_popup.on{display: block;}
.com_option_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}
.com_option_popup .con_box{width:500px;height:auto;position: fixed;background-color: #fff;z-index: 10;box-shadow: 0 0 10px var(--box-shadow-color-20);padding-bottom: 60px;padding: 30px}
.com_option_popup .con_box .top_box{width: 100%;border-bottom: 1px solid #333;padding-bottom: 10px;font-size: 20px;font-weight: bold;color: #333;}
.com_option_popup .con_box .prod_box{display: flex;margin: 15px 0}
.com_option_popup .con_box .prod_box .img_box{width: 70px;height: 70px;margin-right: 20px}
.com_option_popup .con_box .prod_box .txt_box span{display: block;}
.com_option_popup .con_box .prod_box .subject{font-weight: bold;font-size: 15px;}
.com_option_popup .con_box .prod_box .option{color: #888;font-size: 13px}
.com_option_popup .con_box .option_box{margin-bottom: 15px}
.com_option_popup .btn_box{margin-bottom: 0;display: flex;justify-content: center;}


/* 정회원 신청 팝업 */
.regular_ask_popup{width: 100vw;height: 100vh;position: fixed;z-index: 500;display: none;}
.regular_ask_popup.on{display: block;}
.regular_ask_popup .con_box{width:500px;height:auto;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;z-index: 10;box-shadow: 0 0 10px var(--box-shadow-color-20);padding-bottom: 60px;padding: 30px}
.regular_ask_popup .con_box .top_box{width: 100%;border-bottom: 1px solid #333;padding-bottom: 10px;font-size: 20px;font-weight: bold;color: #333;margin-bottom: 20px}
.regular_ask_popup .recommender{margin-bottom: 10px;display: flex;align-items: center;}
.regular_ask_popup dt{font-size: 15px;font-weight: bold;color: #333;margin-right: 10px}
.regular_ask_popup textarea{resize: none;width: 100%;height: 100px;}
.regular_ask_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}


@media all and (max-width:1024px){
	.com_like_popup .con_box{max-width:90%}
}




@media all and (max-width: 1024px) {
}

/* 하단 고정 팝업 */
.footer_move_popup{position: relative;z-index: 1000;}
.footer_move_popup .con_box{z-index: 10;position: fixed;left: 0;bottom: 0;width: 100%;text-align: center;transform: translateY(100%)}
.footer_move_popup .con_box .img_box{display: inline-block;position: relative;}
.footer_move_popup .con_box .img_box a{display: block;}
.footer_move_popup .con_box img{}
.footer_move_popup_bg{width: 100vw;height: 100vh;position: fixed;background: rgba(0,0,0,0.6);left: 0;top: 0;opacity: 0;z-index: -1;}

.footer_move_popup.on .con_box{animation-name: move_up;animation-fill-mode: both;animation-duration: 0.4s;animation-delay: 0.7s;}
.footer_move_popup.on .footer_move_popup_bg{z-index: 1;animation-name: fadeIn;animation-fill-mode: both;animation-duration: 0;animation-delay: 0.7s;}

.footer_move_popup .btn_close{width: 40px;height: 40px;background-color: #111;position: absolute;right: 10px;top: 10px;cursor: pointer;border-radius: 50%;}
.footer_move_popup .btn_close::before{content: "";display: inline-block;width: 1px;height: 24px;background-color: #fff;transform: rotate(45deg);position: absolute;left: 20px;top: 9px;}
.footer_move_popup .btn_close::after{content: "";display: inline-block;width: 1px;height: 24px;background-color: #fff;transform: rotate(-45deg);position: absolute;left: 20px;top: 9px;}

.footer_move_popup.off .con_box{animation-name: move_down;animation-fill-mode: both;animation-duration: 0.3s;animation-delay: 0s;}
.footer_move_popup.off .footer_move_popup_bg{display: none;}

@keyframes move_up{
  from{
    transform: translateY(100%)
  }
  to{
    transform: translateY(0)
  }
}
@keyframes move_down{
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(100%);
  }
}
@keyframes fadeIn{
  from{
    opacity: 0;z-index: -1;
  }
  to{
    opacity: 1;z-index: 1;
  }
}


@media all and (max-width: 768px){
  .use_navbar{
    /* --fixed-btn-bottom : 70px;*/
  }
  .use_navbar .sns_wrapper,
  .use_navbar .sns_wrapper.on{bottom : 70px}

}