@charset "UTF-8";

/* �ε� �˾� */
.com_loading_popup{width: 100vw;height: 100vh;position: fixed;z-index: 5000000;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);box-shadow: -5px 0 12px var(--box-shadow-color-10);z-index: 450;border-left: 1px;padding: 20px 20px 0 20px;transition: all 0.2s ease;}
.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;border:1px solid var(--bg-f6f6f6);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: 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: inline-block;width: 29px;height: 1px;background-color: #c4c4c4;position: absolute;left: 0;bottom: 0;}
.right_fix_box .quick_button ul{display: flex;flex-wrap: wrap;}
.right_fix_box .quick_button li{margin-bottom: 4px;margin-right: 5px}
.right_fix_box .quick_button li:nth-child(2n+2){margin-right: 0;}
.right_fix_box .quick_button li a{display: inline-block;width: 95px;height: 30px;border:1px solid var(--bg-f6f6f6);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 #d0d0d0;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: #d0d0d0;position: absolute;left: 50%;top: 0;}
.today_view .control button{width: 50%;position: relative;text-indent: -9999px}
.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;left: -45px;top: 325px;}
.sns_list{display: flex;flex-direction: column; gap: 10px;}
.sns_list li{overflow: hidden; width: 40px;}
.sns_list li a{width: 100%; height: 40px; background: #fff;display: block; position: relative; text-indent: -999px; font-size: 0; box-shadow: 1px 1px 3px var(--box-shadow-color-10); border-radius: 50%; overflow: hidden;}
.sns_list li a::after{content: ""; display: block; width: 100%; height: 100%; background: url(../img/arrow_ic.svg) no-repeat center / 12px auto; position: absolute; top: 0; left: 0;}
.right_fix_box.on .left_btn_box li a.btn_close::after{transform: rotate(180deg);}
.sns_list li a.youtube::after{background-image: url(../img/ic_youtube_white.png); background-size: 20px auto; background-color: #f00;}
.sns_list li a.instar::after{background-image: url(../img/ic_instargram.png); background-size: 100% auto;}
.sns_list li a.naver::after{background-image: url(../img/ic_naver.svg); background-color: #2db400; background-size: 16px auto;}
.sns_list li a.kakao::after{background-image: url(../img/ic_kakao.svg); background-size: 28px auto; background-color: #fddc3f;}
.sns_list li span{white-space: nowrap; overflow: hidden; display: block; font-size: 9px; margin-top: 5px;}

@media all and (max-width: 1024px){
	.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;padding-left: 26px;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: -100px;right: 20px;cursor: pointer;z-index: 51;background: #d5d5d5 url(../img/arrow_white.svg) center center no-repeat;background-size: 8px auto; transform: rotate(-90deg) translateX(20px); transition: all .2s;}
.btn_move_top.on{bottom: 0px;}
.btn_move_top.shop_view{transform: rotate(-90deg) translateX(68px);}

/* 찜하기 팝업 */
.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: #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:#333;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%}
}



/* 하단 고정 팝업 */
.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{}
.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;
  }
}