@charset "utf-8";

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center; z-index:99999999;}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover,
#skip li a:focus,
#skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5000;color:#fff;width:100%;height:25px;padding:5px 0 0 0;}





/* 전체레이아웃 설정값 */
html,body{height: 100%; }
#wrap{ position: relative;min-width:390px; height: 100%;}
#wrap *{box-sizing: border-box !important;}

/*가운데정렬*/
.shop_layout_ac{ margin:0 10%; position:relative;}
/* 왼쪽만 들여쓰기 20픽셀 히스트뢰 h3*/
.shop_layout_top{ margin:0 20px}

#content{ margin: 40px 0 0 0;}

@media all and (max-width :1700px) {
.shop_layout_ac{ margin:0 5%;}
}
@media all and (max-width :1280px) {
#content{ margin: 20px 0 0 0;}
}
@media all and (max-width :767px) {
#content{ margin: 15px 0 0 0;}
.shop_layout_ac.slac_m0{ margin:0;}
.shop_layout_top{ margin:0}
}







/* ##################  배경공통 /게시판 & 로그인 & 마이페이지 /    ################## */

.common_box_guide01{ background: #f3f5f7; padding: 50px 10% 150px 10%;}
.common_box_guide01 .order_box01{border-radius: 20px; padding: 50px; background: #fff; border: 1px solid 
#edeff2;box-shadow: 1px 10px 10px rgba(0,0,0,0.02);position: relative;}
.common_box_guide02{padding: 30px 0 150px 0;}


.common_box_guide03{ background: #f3f5f7; padding: 50px 10% 150px 10%;}/* 리뷰&후기 & 레시피*/
.common_box_guide03 .order_box01{border-radius: 20px; padding: 50px 5% 0 5%; background: #fff; border: 1px solid 
#edeff2;box-shadow: 1px 10px 10px rgba(0,0,0,0.02);position: relative;}



/* 왼쪽메뉴 있는 가이드*/
.common_box_guide04{ padding: 30px 10% 150px 10%;display: flex; justify-content: space-between; position: relative;}
.common_box_left01{width: 270px; border-right: 1px solid #eee; padding-right: 60px;}
.common_box_left01 button{ display: none; }
.common_box_right01{width: calc(100% - 330px);}


#wrap.lj_all_bg{ background: #f3f5f7;}
.common_box_guide05{ background: #f3f5f7; padding: 70px 10% 150px 10%;}/* 로그인 */

@media all and (max-width :1700px) {
.common_box_guide01{ padding: 50px 5% 100px 5%;}
.common_box_guide02{ padding: 30px 0 100px 0;}
.common_box_guide03{ padding: 50px 5% 100px 5%;}

.common_box_guide04{ padding: 30px 5% 100px 5%;}
.common_box_left01{width: 250px; padding-right: 40px;}
.common_box_right01{width: calc(100% - 290px);}

.common_box_guide05{ padding: 50px 5% 100px 5%;}

}
@media all and (max-width :1280px) {
.common_box_guide01{padding: 30px 5% 70px 5%;}
.common_box_guide02{padding: 30px 0 70px 0;}
.common_box_guide01 .order_box01{border-radius: 15px;padding: 30px;}

.common_box_guide03{padding: 50px 5%;}
.common_box_guide03 .order_box01{border-radius: 15px;padding: 30px 30px 0 30px;}

.common_box_guide04{ padding: 10px 5% 70px 5%;}
.common_box_left01{width: 220px;}
.common_box_right01{width: calc(100% - 250px);}

.common_box_guide05{ padding: 50px 5% 70px 5%;}
}

@media all and (max-width :1024px) {
.common_box_guide01{ padding: 20px 5% 70px 5%;}
.common_box_guide02{ padding: 20px 0 70px 0;}

.common_box_guide03{ background: #fff;padding: 0 5%;}
.common_box_guide03 .order_box01{ border: 0; padding:0;box-shadow: 1px 10px 10px rgba(0,0,0,0);}

.common_box_guide04{ flex-wrap: wrap;padding: 0 5% 50px 5%;}
.common_box_left01 .leftmenu_open{ display:block; font-size: 11px;  position:absolute; left:-3px;top:-70px; border-radius: 0;writing-mode: vertical-rl; background:url("../images/shop/left_menu01.png") right top no-repeat; height: 79px; width: 24px; color: #fff;}

.common_box_left01{ border-right: 0; padding-right: 0; width: 100%;}
.common_box_right01{width: 100%;}

.common_box_guide05{ padding: 30px 5%;}
}
@media all and (max-width :767px) {
.common_box_guide01 .order_box01{ border: 0; padding:0;}
.common_box_guide02{ padding: 10px 0 70px 0;}

.common_box_guide04{ padding: 0 5% 30px 5%;}
.common_box_left01 .leftmenu_open{top:-50px; }

}






/* 히스토리 */
.history ul{ display: flex; gap:6px;align-items: center;}
.history li{ background:url("../images/shop/history_arrow.png") left center no-repeat; font-size:13px; padding-left: 10px;font-weight: 300;}
.history li:first-child{ background:none; padding: 0;}
.history .hpoint{font-weight: 400;}	

/* 서브타이틀*/
.sub_title01{margin:15px 0 20px 0;justify-content: space-between; display: flex; align-content: center;}
.sub_title01 strong{ display: inline-block;font-size:30px;font-weight: 600;}
.sub_title01 .top_sns ul{justify-content:flex-end; display: flex; gap:5px;} 
.sub_title01 .top_sns img{ width: 30px;} 

@media all and (max-width :1280px) {
.sub_title01 strong{ font-size:25px;}
}

@media all and (max-width :1024px) {
.sub_title01 strong{font-size:20px;}
}

@media all and (max-width :767px) {
.history ul{  gap:4px;}
.history li{ background-size: 3px; font-size:11px; padding-left: 6px;}
.history li img{ width: 10px;}
.sub_title01 {margin:5px 0 10px 0; align-items: flex-end;}
.sub_title01 strong{font-size:16px;margin-left: 5px;}
.sub_title01 .top_sns img{ width: 23px;} 
}




/*퀵메뉴*/
#quick{ position:absolute; right:40px; width:80px; z-index:5; text-align: center;}
#quick .quick_shop_rego{ display: block;border: 3px dotted #ff0000;border-radius: 0 24px 24px 24px; padding:50px 0 10px 0; background:#fff url("../images/shop/icon_shop_right.png") center 15px no-repeat; font-size: 13px; font-weight: 700;color: #ff0000; margin-bottom: 30px;box-shadow: 1px 10px 10px rgba(0,0,0,0.1);}

#quick ul{ border: 1px solid #e8e8e8;box-shadow: 1px 5px 5px rgba(0,0,0,0.1); border-radius: 40px;padding:20px 10px 0 10px; background: #fff;}
#quick ul dl{margin-bottom: 15px;}
#quick a{display: block;}
#quick .quick_shop_now dt{ position: relative; font-size: 11px;}
#quick .quick_shop_now dd { margin: 8px 0; font-size: 13px;}
#quick .quick_shop_now dd span{min-height: 50px; line-height: 50px; display: block; background: #f6f6f6; margin-top: 15px;border-radius: 4px;}
#quick .quick_shop_now dd a{overflow: hidden; border-radius: 4px; height: 45px;}
#quick .quick_shop_now dd a img{width: 100%; }
#quick ul li:last-child{ overflow: hidden; height: 25px;border-radius: 40px; line-height: 25px; bottom: 0;}
#quick ul li a.quick_shop_more{ background: #eee; border-radius: 50%; line-height: 25px;}

/* 툴팁스타일 */
#quick .tool_num{position: absolute;background: #ff0000;border-radius: 20px;color: #fff; font-size: 10px; padding:0 8px 0 8px; height: 20px;line-height: 20px; font-weight: 600; display: inline-block; left: 50%;transform: translateX(-50%);top:-32px;box-shadow: 1px 2px 2px rgba(0,0,0,0.1);}
#quick .tool_num:before { bottom: -9px;  content: "▼"; font-size: 12px; color: #ff0000; left: 50%;transform: translateX(-50%);  position: absolute; }

@media all and (max-width :1700px) {
#quick{right:0 !important;width:60px; } 
#quick .quick_shop_rego{border: 2px dotted #ff0000; border-radius: 0 20px 20px 20px; padding:40px 0 5px 0;font-size: 11px;background-size: 28px; background-position:center 10px; }
#quick ul{padding:20px 10px 0 10px;}
#quick .quick_shop_now dd a{ height: 35px;}
#quick .quick_shop_now dd span{min-height: 30px; line-height: 30px; font-size: 12px;}

}

@media all and (max-width :1280px) {
#quick{ display: none !important;}
}










/*배너*/
.banner_area *{ box-sizing: border-box;}
.banner_area{ padding:20px 0; font-size: 0; border-top: 1px solid #eee;border-bottom: 1px solid #eee; margin: 0 10% 100px 10%;}

.banner_area .btn_guide {position: relative;}
.banner_area .btn_guide ul{ position: absolute; width: 100%;}
.banner_area .btn_guide li{ display: inline-block; position: absolute;}
.banner_area .btn_guide li:first-child{left:0;}
.banner_area .btn_guide li:last-of-type{right:0;}

.banner_area .btn_guide li a{ display: block; width: 36px; height: 36px; text-align: center; line-height: 36px; background-color: #e5e5e5; background-repeat: no-repeat; background-position: center; border-radius: 50%; font-size:10px;color: rgba(255,255,255,.0);}
.banner_area .btn_guide .play{ background-image: url("banner_play.png");display: none;}
.banner_area .btn_guide .stop{ background-image: url("banner_stop.png"); display: none;}
.banner_area .btn_guide .prev{ background-image: url("../images/shop/arrow_prev01.png");}
.banner_area .btn_guide .next{ background-image: url("../images/shop/arrow_next01.png");}

.banner_area .banner_box{display:inline-block !important; width:calc(100% - 80px) !important; text-align:center; height:35px; overflow:hidden; vertical-align:top; margin: 0 40px;}
.banner_area .banner_box > div > div{display:inline-block !important; text-align: center; }
.banner_area .banner_box > div img{width:150px; margin: 0 auto;}

@media all and (max-width :1700px) {
.banner_area{ margin:0 5% 100px 5%;}
}
@media all and (max-width :1280px) {
.banner_area{ margin:0 5% 50px 5%;}
}

@media all and (max-width :767px) {
.banner_area{ padding:13px 0;}
.banner_area .banner_box{width:calc(100% - 60px) !important;margin: 0 30px;}
.banner_area .btn_guide li { top:5px;}
.banner_area .btn_guide li a{width: 25px; height: 25px;  line-height: 25px;}
.banner_area .banner_box > div img{width:125px;}
}




/* 푸터레이아웃 */
footer{ position: relative;}
.copyright { padding:0; border-top: 1px solid #eee; word-break: keep-all; background: #fff;}

.copy_guide01{ display: flex;justify-content: space-between; align-items: center; padding: 10px 0;}
.copy_guide01 ul{display: flex; gap:5px;}
.copy_guide01 .copy_text li a{ font-size:16px; background: url("../images/shop/point01.png") left center no-repeat; display: block; padding:12px 10px 12px 20px; background-size: 4px; font-weight: 600;}
.copy_guide01 .copy_text li:first-child a{background: none; margin-left: -20px;}
.copy_guide01 .copy_sns li a img{ width: 40px;}

@media all and (max-width:1280px){
.copy_guide01 .copy_text li a{ font-size:15px; padding:5px 5px 5px 15px; font-weight: 500;}
.copy_guide01 .copy_sns li a img{ width: 35px;}
}

@media all and (max-width:1024px){
.copy_guide01{  display: block; padding: 15px 0;}
.copy_guide01 ul{display: block;text-align: center;}
.copy_guide01 ul li { display: inline-block;}
.copy_guide01 .copy_text li a{ font-size:14px; padding:5px 5px 5px 10px;}
.copy_guide01 .copy_text li:first-child a{ margin-left: 0;}
.copy_guide01 ul.copy_sns{ margin-top: 10px;}

}






.copy_guide02{ background: #fff; padding: 50px 0 0 0;border-top: 1px solid #eee; }
.copy_guide02 .copy_cbox_guide{ display: flex; gap:50px;flex-wrap: wrap;}
.copy_guide02 .copy_cbox_guide .copy_box02{width: 260px; }
.copy_guide02 .copy_cbox_guide .copy_box03{ width: 290px;}

.copy_guide02 .copy_cbox_guide strong{ font-weight: 600; display: block; font-size: 16px}
.copy_guide02 .copy_cbox_guide p{ font-size: 20px; font-weight: 700; margin: 5px 0;}
.copy_guide02 .copy_cbox_guide span{ display: block; font-size: 13px;}
.copy_guide02 .copy_cbox_guide em{ font-size: 12px; display: block;margin-top: 15px;}
.copy_guide02 .copy_cbox_guide em > b{ font-weight: 600; color:#e10030 }

.copy_guide02 .copy_box01 li{ padding: 5px 0; font-size: 14px;}
.copy_guide02 .copy_box02 div:nth-of-type(2){ margin-top: 30px;}
.copy_guide02 .copy_box01 li > i{ color: #003ae1;font-weight: 500;}


.copy_guide02 .copy_banner{ padding: 50px 0 80px 0; margin-top: 50px; font-size: 13px;background: #f6f6f6;}
.copy_guide02 .copy_banner ul{ display: flex; gap:30px; margin-bottom: 30px;}
.copy_guide02 .copy_banner ul li a{ display: block;}

@media all and (max-width:1400px){
.copy_guide02 .copy_cbox_guide{ gap:40px}
}
@media all and (max-width:1280px){
.copy_guide02 .copy_cbox_guide{  gap:0;justify-content: space-between;}
.copy_guide02 .copy_cbox_guide .copy_box01{width:calc(100% - 640px);}

}
@media all and (max-width:1024px){
.copy_guide02 .copy_cbox_guide > div{ margin-bottom: 20px; background: #fff;}
.copy_guide02 .copy_cbox_guide .copy_box01{width: 100%; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.copy_guide02 .copy_cbox_guide .copy_box02{width: 45%;}
.copy_guide02 .copy_cbox_guide .copy_box03{ width:calc(55% - 20px);}


.copy_guide02 .copy_banner{ padding:30px 0 50px 0; margin-top: 30px; font-size: 13px; text-align: center;}
.copy_guide02 .copy_banner ul{justify-content: center;}
.copy_guide02 .copy_banner img{height: 25px;}
}

@media all and (max-width:767px){
.copy_guide02{ padding: 30px 0 0 0; background: #eee;}
.copy_guide02 .copy_cbox_guide > div{ border: 1px solid #eee; border-radius: 10px; padding:30px;}
.copy_guide02 .copy_cbox_guide .copy_box02,
.copy_guide02 .copy_cbox_guide .copy_box03{ width:100%}
.copy_guide02 .copy_cbox_guide p{ font-size: 15px;}

.copy_guide02 .copy_banner{font-size: 11px;margin-top: 0;}
.copy_guide02 .copy_banner ul{flex-wrap: wrap;gap:10px;}


}




/* 맨위로버튼 */
.first_top_go {  position: absolute; right:2%; z-index:9; bottom:50px; opacity:0.5;}












/* 메인에만 뜨는 팝업창 & 레이어창 */
.mpopup_all *{ box-sizing: border-box;}
.mpopup_all{ background: #fff;overflow: hidden; width: 450px;}

.mpopup_win{position: relative; z-index: 9999999;}
.mpopup_layer {border: 1px solid #555; position: absolute;  z-index: 9999999; box-shadow: 1px 5px 10px rgba(0,0,0,0.1); left:480px; top:0;}
.mpopup_layer *{ box-sizing: border-box;}

.mpopup_all img{ width: 100%;}
.mpopup_all .mpopup_center{ padding:  5%;}
.mpopup_all .mpopup_bottom {padding: 0 10px;font-size: 13px; background: #000; color: #fff; display: flex; justify-content:space-between; align-items: center; height: 40px;}
.mpopup_all .mpopup_bottom input{ width: 20px !important; height: 20px!important; margin-right: 5px;}
.mpopup_all .mpopup_bottom button{ font-size: 12px;padding: 5px 10px;}

@media all and (max-width:767px){
.mpopup_all{font-size: 15px;}
.mpopup_win {width: 100% !important;}
.mpopup_layer {width: calc(100% - 2px)!important; left:0 !important; top:0!important;}
}