@charset "UTF-8";
/******************************** 회원 **********************************/
.mb_wrap { width: 90%; max-width: 500px; margin: auto; }
.mb_wrap .mb_sec { margin-bottom: 3em; }
.mb_wrap .mb_sec:last-child { margin-bottom: 0; }
.mb_wrap .mb_tit { margin-bottom: 1em; }
.mb_wrap .mb_tit h3 { font-size: 1.25em; font-weight: 700; }
.mb_wrap .mb_tit p { font-size: 1em; color: #777; margin-top: 0.5em; }
.mb_wrap .btn_confirm > * { width: 100%; height: 3em; line-height: 3; }

/* 로그인 */
#mb_login { text-align: center; max-width: 360px; }
#mb_login .mb_login_info { margin-top: 0.5em; display: flex; justify-content: space-between; }
#mb_login #sns_login {margin-top:0;border-color:#edeaea;padding:25px}
#mb_login #sns_login:after {display:block;visibility:hidden;clear:both;content:""}
#mb_login #sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#mb_login #sns_login .sns-wrap {margin:0 !important}
#mb_login #sns_login .sns-icon {width:49% !important;float:left !important}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:2%}
#mb_login #sns_login .txt {font-size:0.95em;padding-left:5px !important;border-left:0 !important}

/* 회원약관 */
#mb_join_agree .btn_confirm { display: flex; justify-content: space-between; }
#mb_join_agree .btn_confirm * { width: 49%; }
#mb_join_agree #fregister_chkall { width: 100%; margin-bottom: 1em; }
#mb_join_agree #fregister_chkall label { width: 100%; padding: 0.875em; background-color: var(--light1); border: 1px solid var(--light2); color: var(--theme); }

/* 회원가입 */
#mb_join .btn_confirm { display: flex; justify-content: space-between; }
#mb_join .btn_confirm * { width: 49%; }


/* 회원가입완료 */
#mb_join_result { text-align: center; }
#mb_join_result .mb_con p { margin-bottom: 1em; line-height: 1.5; color: #777; }

/* 비밀번호 확인 */
#mb_confirm { text-align: center; }

/* 쪽지 */
#memo_write .frm_01 { margin-top: 1em; }

/******************************** 게시판 ********************************/
.bo_wrap .btn_confirm { margin-top: 3em; }
.bo_wrap .btn_confirm > * { font-size: 1.125em; padding: 0 2em; margin: 0 0.25em; height: 2.6em; line-height: 2.6; }
.bo_wrap .bo_top { display: flex; justify-content: space-between; align-items:flex-end; margin-bottom: 1em; }
.bo_wrap .bo_btn_wrap { display: flex; justify-content: center; align-items: center; }
.bo_wrap .bo_btn_wrap li { position: relative; }
.bo_wrap .bo_btn_wrap .btn { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; color: #bbb; background-color: transparent; border: 0; border-radius: 0.5em; margin-left: 0.5em; }
.bo_wrap .bo_btn_wrap .btn:hover { color: #666; }
.bo_wrap .bo_btn_opt { font-size: 0.875em; white-space: nowrap; position: absolute; right: 0; top: 100%; background-color: #fff; border: 1px solid #ccc; padding: 0.15em 0.25em; border-radius: 0.5em; display: none; z-index: 5; }
.bo_wrap .bo_btn_opt .btn { border: 0; border-radius: 0; width: auto; margin-left: 0; padding: 0 0.5em; }
.bo_wrap .bo_btn_opt .btn i { width: 1em; height: 1em; margin-right: 0.25em; }

/* 임시저장기능 */
.auto-save { position: relative; }
.auto-save .frm_input:not(.full_input) { width: calc(100% - 9.5em); }
.auto-save .btn_frmline { width: 9em; margin-left: 0.25em; }
.auto-save-popup { width: 28em; position: absolute; border: 1px solid #aaa; background-color: #fff; right: 0; top: 100%; margin-top: 0.5em; display: none; z-index: 99; }
.auto-save-popup::before,
.auto-save-popup::after { content: ""; position: absolute; right: 3em; width: 0; height: 0; border-style: solid; border-width: 0 0.375em 0.5em 0.375em; }
.auto-save-popup::before {top: -0.5em; border-color:transparent transparent #aaa transparent; }
.auto-save-popup::after { top: -0.4375em; border-color:transparent transparent #fff transparent; }
.auto-save-popup strong { display: none; }
.auto-save-popup .autosave_close { display: block; border: 0; border-top: 1px solid #ccc; text-align: center; height: 2em; width: 100%; background-color: #fff; color: #666; }
.auto-save-popup ul { padding: 0.875em; height: 8em; overflow-y: scroll; display: block; }
.auto-save-popup li { font-size: 0.9em; background-color: #f5f5f5; display: flex; justify-content: space-between; padding: 0.5em; margin-bottom: 0.2em; align-items: center; }
.auto-save-popup span {display:block; font-size:0.875em; color:#999; }
.auto-save-popup .autosave_del { background:url(../img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:1em;width:1em; border: 0; vertical-align: top; }

/* 작성 */
#bo_write .frm_01 > ul { display: flex; flex-wrap: wrap; justify-content: space-between; }

/* 상세 */
.bo_view_tag { margin-bottom: 1em; }
.bo_view_tag span { font-size: 1em; line-height: 1.8; padding: 0 0.8em; display: inline-block; border-radius: 0.5em; margin-right: 0.5em; }
.bo_view_tag span:nth-child(1) { background-color: var(--theme); color: #fff; }
.bo_view_tag span:nth-child(2) { background-color: var(--theme); color: #fff; }
.bo_view_tit { font-size: 1.5em; font-weight: 700; }
.bo_view_info span { font-size: 0.875em; color: #777; margin-right: 0.75em; display: inline-block; }
.bo_view_info span i { margin-right: 0.2em; }
.bo_view_content { border-top: 1px solid #ddd; padding: 1.5em 0; text-align: center; line-height: 1.6; font-size: 1em; }
.bo_view_content * { line-height: 1.6; }
.bo_view_content img { max-width: 100%; }
.bo_view_other { font-size: 0.9em; }
.bo_view_other li { padding: 1em 1.5em; position:relative; margin-top: 1em; border:1px solid #dfdfdf;border-radius:5px; box-shadow:1px 1px 5px 0 rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: flex-start; }
.bo_view_other li i {color:#b2b2b2;font-size:1.875em;margin-right:0.5em}
.bo_view_other a {display:block; word-wrap:break-word; color:#000}
.bo_view_other .cnt {color:#b2b2b2;font-size:0.875em}
.bo_view_other a:focus,
.bo_view_other a:active,
.bo_view_other li:hover a {color:var(--theme);}
.bo_view_other li:hover {border-color:var(--theme);color:var(--theme);}
.bo_view_other li:hover i {color:var(--theme);}
.bo_view_other li:hover .cnt {color:var(--theme);}

/* 목록 */
.bo_list_total { font-size: 0.9em; }
.bo_list_cate { margin-bottom: 2em; }
.bo_list_cate ul { display: flex; flex-wrap:wrap; }
.bo_list_cate ul li { line-height: 2.2; padding: 0 1em; border: 1px solid #ddd; color: #999; border-radius: 5em; margin-right: 0.5em; margin-bottom: 0.5em; }
.bo_list_cate ul li:hover { border-color: var(--theme); color: var(--theme); }
.bo_list_cate ul li.active { background-color: var(--theme); border-color: var(--theme); color: #fff; }
#bo_list .tbl_wrap th,
#bo_list .tbl_wrap td { position: relative; }
#bo_list .tbl_wrap .chk_box { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

/* 검색 */
.bo_search { max-width: 600px; width: 90%; margin: 2em auto 0; }
.bo_sch_area { max-width: 100%; display: flex; justify-content: center; }
.bo_sch_child { border: 1px solid #ddd; height: 2.6em; margin-right: 0.5em; }
.bo_sch_select { width: 30%; padding: 0 0.5em; }
.bo_sch_box { width: 70%; display: flex; }
.bo_sch_box > * { background-color: transparent; border: 1px solid transparent; }
.bo_sch_box .bo_sch_input { width: calc(100% - 2.6em); padding: 0 0.5em; border: 0; }
.bo_sch_box .bo_sch_btn { width: 2.6em; }

/******************************** 쇼핑몰 ********************************/
/* 상품 - 옵션선택 */
.option_wr { margin-bottom: 1.25em; }
.option_wr h3 { font-weight: 600; }
.option_wr > div { font-size: 0.9em; margin-bottom: 0.5em; }
.option_wr > div:last-child { margin-bottom: 0; }
.option_wr label { display: block; margin-bottom: 0.3em; }
.option_wr select { width: 100%; }

/* 상품 - 선택된옵션 */
#sit_opt_added { border-top: 2px solid #000; }
#sit_opt_added li { padding: 0.75em 0; border-bottom: 1px solid #ddd; position: relative; }
#sit_opt_added .opt_name { font-size: 0.9em; margin-bottom: 0.875em; }
#sit_opt_added .opt_count { display: flex; align-items: center; }
#sit_opt_added .opt_count button,
#sit_opt_added .opt_count input { font-size: 0.75em; height: 2.5em; border: 1px solid #ddd; }
#sit_opt_added .opt_count button { width: 2.5em; background-color: #f7f7f7; color: #aaa; }
#sit_opt_added .opt_count input { width: 4em; text-align: center; border-left: 0; border-right: 0; }
#sit_opt_added .opt_count .sit_opt_prc { margin-left: auto; }
#sit_opt_added .opt_count .sit_opt_del { font-size: 0.875em; position: absolute; top: 0; right: 0; background-color: transparent; color: #222; border: 0; }

/* 상품 - 합계 */
#sit_tot_price { font-size: 1.125em; display: flex; align-items: center; margin: 1em 0; }
#sit_tot_price span { font-size: 1em; margin-right: auto; }
#sit_tot_price strong { font-size: 1.25em; margin-right: 0.2em; }

/* 찜한상품 */
.list_02 ul { display: flex; flex-wrap: wrap; }
.list_02 li { width: 23%; margin: 0 1% 2%; position: relative; }
.list_02 .sod_ws_img { width: 100%; margin-bottom: 0.5em; }
.list_02 .sod_ws_img img { width: 100% !important; height: auto !important; }
.list_02 .info_link { font-size: 1em; }
.list_02 .info_date { font-size: 0.875em; margin-top: 0.3em; color: #777; }

#sod_ws .wish_info { position: relative; padding: 0 2.25em; }
#sod_ws .wish_chk,
#sod_ws .wish_del { font-size: 1.125em; width: 2em; position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
#sod_ws .wish_chk { left: 0; }
#sod_ws .wish_del { right: 0; border: 1px solid #ccc; background-color: #f7f7f7; color: #777; border-radius: 0.3em; }
#sod_ws .wish_del:hover { background-color: #fafafa; }

/* 주문 및 장바구니 공통 */
.sod_img { display: inline-block; vertical-align: top; margin-right: 0.5em; }
.sod_img img { width: 5em !important; height: auto !important; }
.sod_name { display: inline-block; vertical-align: top; }
.sod_opt { font-size: 0.9em; }
.sod_option_btn { margin-top: 0.5em; position: relative; }
.sod_act { text-align: center; margin-top: 2em; }
.sod_act > * { width: 10em; height: 3em; line-height: 3; padding: 0; vertical-align: top; }
.sod_total ul { color: #fff; }
.sod_total li { font-size: 1em; display: flex; align-items: center; padding: 0.75em 1em; background-color: var(--light3); }
.sod_total li.sod_bsk_desc { flex-wrap: wrap; }
.sod_total li.sod_bsk_desc > div { width: 100%; margin-top: 0.3em; font-size: 0.875em; text-align: right; opacity: 0.7; }
.sod_total li.sod_tot_price { background-color: var(--theme); }
.sod_total li:last-child { border-bottom: 0; background-color: var(--dark2); }
.sod_total li > span:nth-child(1) { margin-right: auto; font-size: 0.95em; }
.sod_total li strong { font-size: 1.125em; }
.sod_flex { margin-top: 2em; display: flex; align-items: flex-start; }
.sod_flex section { margin-bottom: 2em; }
.sod_flex h3 { font-size: 1.125em; font-weight: 700; margin-bottom: 0.5em; }
.sod_left { width: calc(100% - 25em); }
.sod_right { width: 23em; margin-left: auto; }
.sod_right h3 { border-bottom: 2px solid #000; padding-bottom: 0.5em; }

/* 장바구니 */
#sod_bsk .btn_cart_del { margin: 1em 0; }
#sod_bsk .sod_total ul { display: flex; }
#sod_bsk .sod_total li { width: 33.3333%; padding: 1em; }
#sod_bsk .sod_total .sod_bsk_pt { border-left: 1px solid var(--dark1); }
#sod_bsk .mod_option_bg { width: 100%; height: 100vh; background-color: rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 999; }
#sod_bsk #mod_option_frm { width: 86%; max-width: 500px; padding: 1em; border: 1px solid #ccc; background-color: #fff; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9999; border-radius: 1em; overflow: hidden; }
#sod_bsk #mod_option_frm h2 { display: none; }
#sod_bsk #mod_option_frm #sit_sel_option { max-height: 11.35em; overflow-y: scroll; }
#sod_bsk #mod_option_frm #mod_option_close { width: 2.5em; height: 2.5em; position: absolute; top: 0; right: 0; border: 0; }
#sod_bsk #mod_option_frm .btn_submit { padding: 0 3em; height: 2.8em; }

/* 주문 작성 */
#sod_frm .order_choice_place { line-height: 2.5; }
#sod_frm_pt_alert { color: #333; }
#sod_frm_paysel { display: flex; flex-wrap: wrap; margin-top: 1em; }
#sod_frm_paysel input[type='radio'] { display: none; }
#sod_frm_paysel .lb_icon { width: 48%; padding: 1em; border: 1px solid #ddd; background-color: #fff; display: inline-block; position: relative; text-align: center; margin: 1%; }
#sod_frm_paysel input:checked + label { background-color: var(--theme); border: 1px solid var(--theme); color: #fff; }
#sod_frm_paysel #settle_bank { width: 98%; background-color: #fff; padding: 0.75em 1em; color: #555; border: 1px solid #ddd; margin: 1%; }
#sod_frm_paysel #settle_bank span { margin-top: 0.5em; display: flex; align-items: center; }
#sod_frm_paysel #settle_bank #od_deposit_name { flex-grow: 1; border: 1px solid #ddd; height: 2.25em; padding: 0 0.5em; margin-left: 0.5em; }
#display_pay_button > * { width: 100%; font-size: 1.125em; height: 3em; line-height: 3; padding: 0; margin-bottom: 0.5em; }

/* 주문 상세 */
#sod_fin_no { font-size: 1.25em; margin-bottom: 1em; color: var(--theme); }
#sod_sts_wrap { text-align: right; margin-top: 1em; position: relative; }
#sod_sts_explan { display: none; position: absolute; right: 0; top: 3em; background-color: #fff; border: 1px solid #ddd; border-radius: 0.5em; padding: 0.5em 1em; width: 100%; max-width: 300px; }
#sod_fin_legend { font-size: 0.9em; text-align: left;  line-height: 2; display: flex; flex-wrap: wrap; }
#sod_fin_legend dt { width: 3em; font-weight: 600; }
#sod_fin_legend dd { width: calc(100% - 4em); }
#sod_fin_cancel .btn_submit { width: 100%; font-size: 1.125em; height: 3em; line-height: 3; padding: 0; margin-bottom: 0.5em; }
#sod_fin_cancelfrm { display: none; }
#sod_fin_cancelfrm form { display: flex; }
#sod_fin_cancelfrm form .frm_input { width: calc(100% - 5.5em); }
#sod_fin_cancelfrm form .btn_frmline { width: 5em; margin-left: 0.5em; }

/* 주문 조회 */
#sod_v td { text-align: center; }
#sod_v td a { font-weight: 700; }
[class*='status'] { display: inline-block; padding: 0 0.5em; line-height: 1.375; font-size: 0.9em; border-radius: 0.3em; }
.status_01 {background:#edfbde;color:#8cc152;}
.status_02 {background:#84c93a;color:#fff;}
.status_03 {background:#e2f6f2;color:#16b494;}
.status_04 {background:var(--light2);color:var(--theme);}
.status_05 {background:var(--theme);color:#fff;}
.status_06 {background:#fff;color:red;}

/* 마이페이지 */
#smb_my section { margin-bottom: 2em; }
#smb_my h2 { font-size: 1.25em; font-weight: 700; }
#smb_my .smb_my_more { width: 10em; line-height: 2.8; background-color: var(--theme); color: #fff; border-radius: 0.3em; text-align: center; display: block; margin: 1em auto 0; }
#smb_my_ov .my_ov_act ul { display: flex; justify-content: flex-end; }
#smb_my_ov .my_ov_act li { margin-left: 0.5em; }
#smb_my_ov .my_ov_act a { display: inline-block; }
#smb_my_ov .my_ov_info { margin-top: 0.5em; border: 1px solid #ddd; padding: 0.5em; border-radius: 0.5em;}
#smb_my_ov .my_ov_info dl { display: flex; flex-wrap: wrap; }
#smb_my_ov .my_ov_info dt,
#smb_my_ov .my_ov_info dd { padding: 0.5em; }
#smb_my_ov .my_ov_info dt { width: 8em; }
#smb_my_ov .my_ov_info dd { width: calc(50% - 8em); }
#smb_my_od h2 { margin-bottom: 0.5em; }
#smb_my_od td { text-align: center; }
#smb_my_od td a { font-weight: 700; }
#smb_my_wish h2 { margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 2px solid #000; }