@charset "utf-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"); @font-face { font-family: 'GmarketSans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/css/font/GmarketSansLight.otf) format('opentype'); } @font-face { font-family: 'GmarketSans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/css/font/GmarketSansMedium.otf) format('opentype'); } @font-face { font-family: 'GmarketSans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/css/font/GmarketSansBold.otf) format('opentype'); } /* 초기화 */ html {overflow-y:scroll; box-sizing: border-box;} body {margin:0;padding:0;font-size:0.75em;font-family:var(--font-family--default); line-height: 1.6; color: var(--font-color--default); word-break:keep-all; box-sizing: border-box; position: relative; min-height: 100vh;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard','Malgun Gothic', dotum, sans-serif} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul {margin:0;padding:0;list-style:none} ol,li,dl,dt,dd {margin:0;padding:0} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle} input, button {margin:0;padding:0;/*font-family:'Pretendard','Malgun Gothic', dotum, sans-serif;*/font-size:1em} button {cursor:pointer} textarea, select {/*font-family:'Pretendard','Malgun Gothic', dotum, sans-serif;*/font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#000;text-decoration:none} * {font-family:var(--font-family--default), 'Malgun Gothic', 'Sans-serif' ; box-sizing: border-box;} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; word-break:keep-all; color: var(--font-color--default); } input[type=text],input[type=password], textarea { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none; } input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { -webkit-box-shadow:0 0 5px #9ed4ff; -moz-box-shadow:0 0 5px #9ed4ff; box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important; } .placeholdersjs {color:#aaa !important} #hd, #wrapper, #ft {min-width:1200px} #hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {width:1200px} /* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:1200px;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops img {max-width:100%} .hd_pops_con {} .hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button {padding:10px;border:0;color:#fff} .hd_pops_footer .hd_pops_reject {background:#000;text-align:left} .hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0} /* 상단 레이아웃 */ #hd {background:#212020} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding:30px 0 0} .hd_sch_wr {/*float:left;*/padding:30px 0;width:445px;margin-left:65px} #hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_sch {border-radius:30px;overflow:hidden} #hd_sch #sch_str {float:left;width:385px;height:45px;padding-left:15px;/*border-radius:30px 0 0 30px;*/background:#2c2c2c;border:0;border-right:0;font-size:1.2em;color:#fff} #hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px} #tnb {border-bottom:1px solid #383838;margin:0 auto} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb .inner {margin:0 auto} #hd_define {float:left} #hd_define:after {display:block;visibility:hidden;clear:both;content:""} #hd_define li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_define li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_define li a {display:inline-block;color:#919191} #hd_define li.active a {color:#fff} #hd_qnb {float:right;text-align:right} #hd_qnb:after {display:block;visibility:hidden;clear:both;content:""} #hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_qnb li a {display:inline-block;color:#919191} .hd_login {position:absolute;right:0;top:45px} .hd_login>li {float:left;position:relative;margin:0 5px} .hd_login>li.login a {color:#3a8afd;padding:10px;border-radius:3px;border:1px solid #3a8afd} .hd_login>li a {color:#fff} .hd_login>li.shop_login {margin-top:-15px} .hd_login .fa-shopping-cart {font-size:1.6em} .hd_login .count {display:inline-block;position:absolute;top:-5px;right:-10px;line-height:12px;padding:0 5px;border-radius:10px;background:#ff1a21;color:#fff;min-width:16px;height:14px;font-size:0.85em} #menu_list {position:relative;background:#000;width:1200px;margin:0 auto} #menu_list:after {display:block;visibility:hidden;clear:both;content:""} #menu_list button#menu_open {float:left;width:265px;height:50px;border:0;background:#3a8afd;text-align:left;color:#fff;padding:0 20px;font-weight:bold;font-size:1.167em} .menu_list {float:left;display:inline-block;width:935px;font-size:1.083em} .menu_list:after {display:block;visibility:hidden;clear:both;content:""} .menu_list li {float:left;width:20%;padding:12px 0;line-height:26px;text-align:center} .menu_list li:last-child a {border-right:0} .menu_list li a {display:block;color:#fff;border-right:1px solid #333} /*사이드 메뉴*/ #side_menu {height:100%;position:fixed;top:0;right:0;background:#fff;border-left:1px solid #e5e7ea;z-index:120;padding-left:50px;-webkit-box-shadow:0 1px 5px #d6d6d6; -moz-box-shadow:0 1px 5px #d6d6d6; box-shadow:0 1px 5px #d6d6d6} #quick {position:absolute;top:50%;left:0;width:50px;margin-top:-157.5px} #quick li {position:relative} #quick li button {width:50px;height:50px;border:0;font-size:1.325em;background:#fff;color:#495057} #quick .qk_tit {display:none;position:absolute;top:12px;right:60px;white-space:pre;padding:0 15px;line-height:30px;background:#8b929c;color:#fff;font-size:0.75em;border-radius:5px} #quick .qk_tit:after {content:"";position:absolute;top:10px;right:-8px;display:inline-block;width:0;height:0;border-style:solid;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #8b929c;color:transparent} #quick li:hover .qk_tit {display:block} #tabs_con {height:100%;text-align:left} .side_mn_wr1 {display:none;width:230px;overflow-y:auto;height:100%} .side_mn_wr2 {display:none;width:230px;overflow-y:auto;height:100%} .side_mn_wr3 {display:none;width:230px;overflow-y:auto;height:100%} .side_mn_wr4 {display:none;width:230px;overflow-y:auto;height:100%} .btn_sm_on i {color:#3a8afd} .qk_con {display:none;position:relative;width:230px;height:100%;background:#fff;border-left:1px solid #f0f0f0} .qk_con h2.s_h2 {position:relative;margin:0;font-size:1.25em;padding:15px;border-bottom:1px solid #e5e7ea} .qk_con h2.s_h2 span {display:inline-block;min-width:20px;padding:2px 8px;border-radius:30px;text-align:center;background:#eff5ff;color:#3b8afc;font-size:0.7em;font-weight:normal;vertical-align:text-bottom} .qk_con_wr {padding:0;height:100%;overflow-y:auto} .qk_con_wr .btn_side_shop {position:relative;width:100%;height:30px;background:none;border:0;text-align:left;font-weight:bold} .qk_con_wr .btn_side_shop span {position:absolute;top:5px;right:0;padding:0 5px;line-height:20px;border-radius:10px;color:#fff;background:#ed1c24} .qk_con_wr .con_close {position:fixed;top:0;right:230px;width:50px;height:50px;border:0;background:none;font-size:25px;color:#dedede} .qk_con_wr .con_close:hover {color:rgba(0,0,0,0.8)} .qk_con_wr .side_tnb {padding:25px} .qk_con_wr .side_tnb li a {display:block;line-height:28px;color:#465168;padding:5px 0} .qk_con_wr .side_tnb li:hover a {color:#3a8afd} #category {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2); -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2); box-shadow:0 2px 5px rgba(0,0,0,0.2)} #category h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef} #category ul:after {display:block;visibility:hidden;clear:both;content:""} #category ul li:nth-child(5n+1) {border-left:0} #category .cate_li_1 {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef} #category .cate_li_1_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd} #category .cate_li_2 {line-height:2em} #category .cate_li_2 a {color:#555} #category .close_btn {position:absolute;top:0;right:0;width:50px;height:50px;background:#fff;color:#b6b9bb;border:0;vertical-align:top;font-size:18px} #category_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999} #category .no-cate{text-align:center;padding:15px} /* 중간 레이아웃 */ /* #wrapper {z-index:5;margin:0 auto;width:1200px;position:relative} */ #wrapper {/*z-index:5;*/position:relative;width:100%;} #wrapper.is_community{background:#fff} #wrapper:after {display:block;visibility:hidden;clear:both;content:""} #wrapper_title {padding:20px 0;font-size:2em;font-weight:bold} .lt_wr {width:49%} .lt_wr:nth-child(2n+1) {clear:both} /* aside + wrapper */ #aside {position:absolute;top:0;left:0;margin:0 10px 0 0;width:265px} #side_pd {position:relative;border:1px solid #dde7e9;background:#fff;border-radius:3px;margin-bottom:15px} #side_pd h2 {border-bottom:1px solid #e8e8e8;padding:15px} #side_pd .bx-wrapper {padding-bottom:10px;height:400px;overflow:hidden} #side_pd .bx-controls {display:inline-block;position:absolute;right:10px;top:12px} #side_pd .bx-prev {display:inline-block;width:20px;height:20px;text-indent:-9999em;background:url('../img/btn_prev.png') no-repeat} #side_pd .bx-next {display:inline-block;width:20px;height:20px;text-indent:-9999em;background:url('../img/btn_next.png') no-repeat} #container {position:relative;margin:0 auto;width:1200px;min-height:500px;height:auto !important} #container:after {display:block;visibility:hidden;clear:both;content:""} #container .shop-content {position:relative;padding:1px 0} #container .is_index {margin-left:285px} .shop-content #bo_v{margin-top:20px} #idx_hit {overflow:hidden} #idx_hit:after {display:block;visibility:hidden;clear:both;content:""} #idx_hit .owl-prev {position:absolute;top:50%;left:0;width:36px;height:36px;margin-top:-20px;text-indent:-9999em;background:url('../img/btn_idx_left.png') no-repeat} #idx_hit .owl-next {position:absolute;top:50%;right:0;width:36px;height:36px;margin-top:-20px;text-indent:-9999px;background:url('../img/btn_idx_right.png') no-repeat} .sale_prd h2 {font-size:1.167em;margin:20px 0 10px} .st_bg {display:inline-block;width:1px;height:10px;margin:0 10px;background:#e2e1e0;vertical-align:-1px} /* 텍스트 크기 조절 */ #text_size {display:none;position:absolute;top:-31px;left:-1px} #text_size button {padding:0 10px;height:30px;border:1px solid #cfded8;border-bottom:0;background:#000;color:#fff;cursor:pointer} /* 하단 레이아웃 */ #ft {background:#212020;margin:0 auto;text-align:center} #ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ft_wr {max-width:1240px;margin:0;padding:40px 0;position:relative;display:inline-block;text-align:left} #ft_wr:after {display:block;visibility:hidden;clear:both;content:""} #ft_wr .ft_cnt {width:25%;float:left;padding:0 20px} #footer_link {text-align:left} #footer_link a {display:block;color:#fff;line-height:2em;font-weight:bold} #footer_company h2 {font-size:1.2em;margin-bottom:20px} #footer_company {font-weight:normal;color:#e3e3e3;line-height:2em} #ft_catch {margin:20px 0 10px} #ft_copy {text-align:center;width:1200px;margin:0 auto;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838} #top_btn {position:absolute;bottom:0;left:0;border:0;border-top:1px solid #e5e7ea;margin-top:-25px;width:50px;height:50px;background:none;font-size:20px;color:#dedede} #top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff} /* 쇼핑몰 회원가입 */ #container .register{margin-bottom:30px} #register_form .register_form_inner{background:#fff} .register #register_form{background-color:initial} /* 쇼핑몰 비회원 주문조회 */ #mb_login_od_wr {margin:20px auto 0;border:1px solid #dde7e9;width:360px;background:#fff;text-align:center} #mb_login_od_wr h2 {font-size:1.25em;margin:20px 0 10px} /*#mb_login_od_wr #mb_login_od {padding:0 35px}*/ #mb_login_od_wr .frm_input {width:100%;margin:10px 0 0} #mb_login_od_wr .btn_submit {width:100%;margin:10px 0 0;height:45px;font-weight:bold;font-size:1.25em} #mb_login_od_wr p {background:#f3f3f3;margin:20px 0 0;padding:15px 20px;line-height:1.5em} #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_login_notmb {width:360px;margin:30px auto;padding:20px 30px;background:#fff;border:1px solid #dde7e9} #mb_login_notmb h2 {font-size:1.25em;margin:10px 0;text-align:center} #mb_login_notmb p {text-align:left} #mb_login_notmb label {text-align:left} #guest_privacy {border:1px solid #ccc;text-align:left;line-height:1.6em;color:#666;background:#fafafa;padding:10px;height:150px;margin:10px 0;overflow-y:auto} #mb_login_notmb .btn_submit {display:block;text-align:center;margin-top:10px;line-height:45px} /* 쇼핑몰 로그인 */ .mb_log_cate h2 {width:50%;float:left;padding:20px 0;text-align:center} .mb_log_cate .join {width:50%;float:left;padding:20px 0;text-align:center;background:#f7f7f7;color:#6e6e6e} .mb_log_cate:after {display:block;visibility:hidden;clear:both;content:""} .mbskin .chk_box input[type="checkbox"] + label span{position:relative} /* 새글 */ .is_community .tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;border-left:0 none;line-height:1.4em;height:60px;word-break:break-all} /* 글쓰기 및 글보기 */ .is_community .chk_box input[type="checkbox"] + label span{top:2px;left:0} .is_community .bo_fx{margin-bottom:20px} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important; width:0 !important; height: 0 !important; clip-path:circle(0);} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* 이미지 등비율 리사이징 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* ckeditor 단축키 */ .cke_sc {margin:0 0 5px;text-align:right} .btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc !important;background:#fafafa !important;color:#000 !important;text-decoration:none !important;line-height:1.9em;vertical-align:middle} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f2f5f9;text-align:center} .cke_sc_def dl {margin:0 0 5px;text-align:left} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} .cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dd {width:30%} /* ckeditor 태그 기본값 */ #bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con li {display:list-item} /* Mobile화면으로 */ #mobile_cng {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} /* 목록 바로가기 */ .sanchor {margin:30px 0 20px;padding:0} .sanchor:after {display:block;visibility:hidden;clear:both;content:""} .sanchor li {float:left;width:20%;text-align:center;list-style:none} .sanchor li a {display:block;position:relative;height:60px;margin-left:-1px;background-color:#f7f7f7;border:1px solid #cdcdcd;border-bottom:1px solid #000;font-size:1.25em;color:#666;line-height:58px;text-align:center;z-index:1} .sanchor li .sanchor_on {margin:0 0 0 -1px;border:1px solid #000;background:#fff;z-index:2;border-bottom-color:#fff;color:#000;font-weight:bold} .sanchor li a .item_qa_count,.sanchor li a .item_use_count {display:inline-block;background:#aaa;padding:0 5px;line-height:23px;border-radius:15px;color:#fff;min-width:23px;font-size:12px} .sanchor li .sanchor_on .item_qa_count,.sanchor li .sanchor_on .item_use_count {background:#55bfb1} /* 콘텐츠별 스타일 */ .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold} /* 버튼 */ a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em; -webkit-transition:background-color 0.3s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} a.btn01 {display:inline-block;padding:7px;border:1px solid #bababa;border-radius:3px;background:#fff;color:#717171;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;background:#3a8afd;color:#fff;border-radius:3px;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:center} /* 서식단계 진행 */ .btn_submit {border:1px solid #1c70e9;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px} .btn_submit:hover {background:#2375eb} .btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff} a.btn_close {text-align:center;line-height:50px} a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} .btn_cancel:hover {background:#aaa} a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {} button.btn_frmline {font-size:1em} a.btn_frmline {line-height:24px} /* 게시판용 버튼 */ a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} .btn_b01:hover, .btn_b01:hover {color:#000} a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle} a.btn_b02:hover, .btn_b02:hover {background:#0025eb} a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ .btn_admin:hover, a.btn_admin:hover {color:#ff3746} /* 선택수정 버튼 */ .btn_list {margin:0 auto;width:93%} .btn_list input, .btn_list button {background:none repeat scroll 0 0 #617D46;border:0 none;color:#FFFFFF;height:28px;line-height:2.2em;padding:0 15px;vertical-align:middle} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 0 10px} .tbl_head01 table {} .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:12px 0;border-top:2px solid #000;border-bottom:1px solid #d3d3d3;background:#fff;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head01 thead a {color:#383838} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .tbl_head01 td {padding:15px 5px;border-top:1px solid #f3f3f3;border-left:1px solid #f3f3f3;line-height:1.5em;word-break:break-all} .tbl_head01 td:first-child {border-left:0} .tbl_head01 a {} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:7px;background:#f3f3f3;border-top:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .tbl_head02 td {padding:5px 3px;border-bottom:1px solid #e9e9e9;line-height:1.4em;word-break:break-all} .tbl_head02 a {} .tbl_head03 {margin:0 0 10px} .tbl_head03 table {border-bottom:1px solid #d3d3d3} .tbl_head03 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head03 thead th {padding:20px 0;border-top:2px solid #959da6;border-bottom:1px solid #d3d3d3;color:#383838;font-size:1.2em;text-align:center;letter-spacing:-0.1em; line-height: 22px;} .tbl_head03 thead a {color:#383838} .tbl_head03 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head03 tfoot th, .tbl_head03 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head03 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .tbl_head03 td {background:#fff;background-clip:padding-box;/*padding:25px 15px;*/padding: 1.563rem 0.938rem; border-top:1px solid #ccd2d9;border-left:1px solid #f6f6f6;line-height:1.5em;word-break:break-all} .tbl_head03 td:first-child {border-left:0} .tbl_head03 a {} /* 폼 테이블 */ .tbl_frm01 {margin:0 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:90px;padding:5px 10px;background:none;text-align:right;font-weight:normal} .tbl_frm01 td {padding:5px 10px;background:transparent} .wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075)} .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input {height:45px} .full_input, .frm_address {width:100%} .half_input {width:49.5%} .tbl_frm01 textarea {width:100%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_address {margin-top:5px} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} /*기본리스트*/ .list_01 li {position:relative;border:1px solid #dbdbdb;border-radius:3px;margin:8px 0;padding:10px 15px;list-style:none} .list_01 li:after {display:block;visibility:hidden;clear:both;content:""} .list_01 li:hover {background:#f9f9f9} .list_02 ul{display:flex;gap:2rem 1rem;flex-wrap:wrap;} .list_02 ul:after {display:block;visibility:hidden;clear:both;content:""} .list_02 li {float:left;width:225px;} .list_02 li{width:calc(25% - (1rem * 3 / 4));} /*.list_02 li:nth-child(5n+1) {clear:both;margin-left:0}*/ /*폼 리스트*/ .form_01 h2 {margin:0 0 10px;font-size:1.25em} .form_01 li {margin:10px 0} .form_01 li:after {display:block;visibility:hidden;clear:both;content:""} .form_01 li .right_input {float:right} .form_01 textarea {height:100px;width:100%} .form_01 .frm_label {display:inline-block;width:130px} .form_01 .form_left {float:left;width:49.5%} .form_01 .form_right {float:right;width:49.5%} /* 자료 없는 목록 */ .empty_table {padding:50px 0 !important;text-align:center;color:#777 !important} .empty_list, .empty_li {padding:20px 0 !important;text-align:center !important;color:#777 !important} /* 필수입력 */ .required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important} /* 테이블 그리드 padding 0 5px 고려한 넓이 */ .grid_1 {width:40px} .grid_2 {width:90px} .grid_3 {width:140px} .grid_4 {width:190px} .grid_5 {width:240px} .grid_6 {width:290px} .grid_7 {width:340px} .grid_8 {width:390px} .grid_9 {width:440px} .grid_10 {width:490px} .grid_11 {width:540px} .grid_12 {width:590px} .grid_13 {width:640px} .grid_14 {width:690px} .grid_15 {width:740px} .grid_16 {width:790px} .grid_17 {width:840px} .grid_18 {width:890px} /* 테이블 항목별 정의 */ .td_board {width:120px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_default {width:60px;text-align:center} .td_dvr {width:100px;text-align:center} .td_group {width:100px;text-align:center} .td_imgsmall {width:60px;text-align:center} .td_num {width:80px;text-align:center} .td_numbig {width:100px;text-align:center} .td_nick {width:100px;text-align:center} .td_name {width:100px;text-align:left} .td_namesmall {width:50px;text-align:left} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_mngsmall {width:100px;text-align:center} .td_statsmall {width:50px;text-align:center} .text_left {text-align:left !important} .text_center {text-align:center !important} .text_right {text-align:right !important} /* 새창 기본 스타일 */ .new_win {position:relative;background:#fff} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); -moz-box-shadow:0 1px 10px rgba(0,0,0,.1); box-shadow:0 1px 10px rgba(0,0,0,.1)} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {margin-bottom:15px;padding:0 20px} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px} .new_win .win_ul li:first-child {margin-left:0} .new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3} .new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5} .new_win .win_ul .selected a {color:#fff;font-weight:bold} .new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px} .new_win .win_desc i {font-size:1.2em;vertical-align:baseline} .new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px} .new_win .frm_info {font-size:0.92em;color:#919191} .new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px} .new_win .new_win_con {margin:20px 0;padding:20px} .new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} .new_win .new_win_con2 {margin:20px 0 0} .new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_btn {text-align:center;padding-bottom:30px} .new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer} .new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {display:inline-block;position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646;background:#111} .sv_wrap .sv a {display:inline-block !important;margin:0 !important;padding:3px !important;width:94px;border-bottom:1px solid #283646;color:#fff !important} .sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none !important} .sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto !important} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {margin:10px 0 30px;text-align:center} .pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} .pg {text-align:center} .pg_page, .pg_current,.qa_page {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page,.qa_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px} .pg_page:hover,.qa_page:hover {background-color:#fafafa} .pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa} .pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px} /* 팁 */ .tooltip_icon {display:inline-block;vertical-align:middle;color:#b3b5b8;border:0;font-size:1.4em;background:transparent;cursor:pointer} .tooltip_icon:hover {color:#448bf5} .tooltip {position:relative;width:auto;color:#fff;background:#000;padding:10px;font-size:small;line-height:18px;display:none;position:absolute;z-index:9;font-weight:normal;margin-left:15px;margin-top:20px} .tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid #000} .tooltip_txt {position:relative;text-align:left;color:#fff;height:50px;line-height:50px;font-size:1.1em;background:#f2838f;margin:0 0 10px;padding:0 20px;border-radius:5px;font-weight:bold} .tooltip_txt:before {content:"";position:absolute;top:0;left:0;width:5px;height:50px;border-radius:5px 0 0 5px;background:#da4453} .tooltip_txt i {font-size:1.2em;vertical-align:middle} /* ########## 쇼핑몰 컨텐츠 ########## */ /* 인덱스 이미지 출력 */ #sidx_img {margin:0 0 20px} #sidx_img img {max-width:100%;height:auto} /* 상품 메일 추천하기 */ #sit_rec_new {} #sit_rec_new th, #sit_rec_new td {display:block;width:100%} #sit_rec_new th {text-align:left;margin-top:20px;margin-bottom:5px} #sit_rec_new textarea {width:100%;min-height:100px} #sit_rec_new .win_btn {margin:20px 0} /* 마이페이지 */ #smb_my {position:relative} #smb_my_ov {margin:0 0 20px;position:relative} #smb_my_ov h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #smb_my_ov .my_ov_name{display:block;background:#fff;border:1px solid #ccc;line-height:45px;padding:0 20px;font-size:1.167em;} #smb_my_ov .my_ov_name img{width:20px;border-radius:50%} #smb_my_act {position:absolute;top:-35px;right:0;zoom:1} #smb_my_act:after {display:block;visibility:hidden;clear:both;content:""} #smb_my_act ul {float:right;margin:0;padding:0;list-style:none} #smb_my_act li {float:left;margin:0 0 0 4px} #smb_my_act li a{line-height:25px;padding:0 5px} #smb_my_act li .btn_admin{height:27px;} #smb_my_ov .cou_pt{position:absolute;top:0 ;right:0;} #smb_my_ov .cou_pt dt{float:left;width:90px;line-height:45px;} #smb_my_ov .cou_pt dd{float:left;width:110px;text-align:right;padding:0 20px 0 0 ;line-height:45px;} #smb_my_ov .cou_pt dd a{color:#ff2b64;font-weight:bold;font-size:1.167em} #smb_my_ov .op_area{background:#fff;border:1px solid #ccc;border-top:0;padding:10px 15px;line-height:18px;color:#555} #smb_my_ov .btn_admin {display:inline-block;background:#d13f4a;color:#fff;text-decoration:none;vertical-align:middle;border-radius:3px} #smb_my_ov .op_area:after {display:block;visibility:hidden;clear:both;content:""} #smb_my_ov .op_area dt{float:left;width:10%;margin:3px 0;font-weight:bold} #smb_my_ov .op_area dd{float:left;width:40%;;margin:3px 0} .my_ov_btn{text-align:center;} .my_ov_btn button{background:#fff;border:1px solid #ccc;vertical-align:top;border-top:0;padding:0 20px;height:25px} .my_ov_btn button:hover{background:#f3f3f3} #smb_my_ovaddd{width:90%} #smb_my_ovaddt {border-bottom:0 !important} #smb_my_ovaddd {width:590px !important;border-bottom:0 !important} #smb_my_od {margin:0 0 50px;position:relative} #smb_my_od h2 {margin:0 0 10px;font-size:1.25em;} #smb_my_od td{text-align:center} #smb_my_od td a{font-weight:bold} #smb_my_wish{position:relative;} #smb_my_wish h2 {margin:0 0 10px;font-size:1.25em;padding:0 0 10px;border-bottom:2px solid #000} .smb_my_img{margin:0 0 5px;} .smb_my_tit{margin:5px 0 ; font-size:1.167em;font-weight:bold} .smb_my_date{font-size:0.92em;color:#777} .smb_my_more {position:absolute;top:0;right:0;} #smb_my_wish .list_02 .smb_my_img{float:none;margin:0} .smb_my_more a{display:block;background:url('../img/more-btn.gif') no-repeat 0 2px;padding-left:20px;height:30px} .smb_my_img a{display:block} .smb_my_img a img{max-width:100%;height:auto} /* 마이페이지 list */ #smb_my_list {float:left;width:915px} #smb_my_od h2 {margin:0 0 10px;font-size:1.25em} #smb_my_od {position:relative;margin:0 0 50px} .smb_my_od {background:#fff} .smb_my_od li {padding:15px;border-bottom:1px solid #ececec} .smb_my_od li:last-child {border-bottom:0} .smb_my_od li:after {display:block;visibility:hidden;clear:both;content:""} .smb_my_od li:hover {background:#fff6f6} .smb_my_od .smb_my_od_li {float:left;line-height:18px} .smb_my_od .smb_my_od_li1 {width:140px;text-align:center} .smb_my_od .smb_my_od_li2 {width:75%;padding:0 20px} .smb_my_od .smb_my_od_li3 {width:80px;float:right;text-align:center} .smb_my_od .ord_num, .smb_my_od .ord_name {font-size:1.2em;font-weight:bold;letter-spacing:-0.5px} .smb_my_od .date {color:#b5b5b5} .smb_my_od .cost {color:#3a8afd;font-weight:bold} .smb_my_od .misu {color:#6d6d6d} #smb_my_wish {position:relative;margin-bottom:30px} #smb_my_wish h2 {font-size:1.25em;padding:0 0 20px;border-bottom:1px solid #d9dde2} #smb_my_wish li {position:relative;background:#fff;border-bottom:1px solid #ececec;padding:15px} #smb_my_wish li:after {display:block;visibility:hidden;clear:both;content:""} #smb_my_wish .smb_my_chk {display:inline-block;float:left;margin-right:10px;color:red} #smb_my_wish .smb_my_img {float:left;margin-right:20px} #smb_my_wish .smb_my_tit {margin:5px 0;font-size:1.167em;font-weight:bold} #smb_my_wish .smb_my_price {font-weight:bold;font-size:1.2em;margin-bottom:30px} #smb_my_wish .smb_my_date {font-size:1em;color:#777} .smb_my_more {position:absolute;top:0;right:0} .smb_my_more a {display:block;background:url('../img/more-btn.gif') no-repeat 0 2px;padding-left:20px;height:30px} #smb_my_wish li .wish_del {position:absolute;right:20px;top:50px;font-size:1.4em;color:#b2b2b2} #smb_ws_act {text-align:center;margin:20px 0 30px} #smb_ws_act .btn01 {width:180px;height:50px;font-weight:bold;font-size:1.167em;border:1px solid #98a3b3;border-radius:3px} #smb_ws_act .btn02 {width:180px;height:50px;font-weight:bold;font-size:1.167em;border:1px solid #1c70e9;border-radius:3px;background:#3a8afd} /* 장바구니 주문서 공통 */ .od_prd_list .td_chk {} .od_prd_list .td_prd {border-left:0;position:relative;padding-left:120px;min-height:100px} .od_prd_list .td_prd .sod_img {position:absolute;top:25px;left:20px} .od_prd_list .td_prd .sod_name {min-height:80px} .od_prd_list .td_prd .prd_name {font-size:1.2em;} .od_prd_list .total_prc {color:#000;font-weight:bold;font-size:1.4em} .sod_opt {margin:5px 0} .sod_opt ul {display:inline-block;margin:0;padding:0;list-style:none} .sod_opt li {color:#000;padding:3px 0;line-height:1.3em; font-size:0.9em;} .sod_opt li:before {content:"옵션";display:inline-block;margin:1px 5px 2px 0;padding:3px;border-radius:3px;background:#e2eaf6;line-height:1em;color:#3a8afd} .sod_option_btn .mod_options {height:30px;margin:5px 0 0;padding:0 5px;border:1px solid #d4d6db;color:#606060;background:#fff;border-radius:3px} .cp_btn {padding:0 10px;border:1px solid #d4d6db;color:#3a8afd;background:#fff;height:26px;border-radius:3px} .cp_cancel {padding:0 10px;border:1px solid #aaa;color:#666;background:#fff;height:26px;border-radius:3px} /* 장바구니 */ #sod_bsk {margin-bottom:30px} .btn_cart_del {padding:20px 0;border-bottom:1px solid #ccd2d9} .btn_cart_del button {height:30px;padding:0 10px;border:1px solid #d4d6db;border-radius:5px;background:#fff;color:#666} #sod_bsk_list {position:relative;} #sod_bsk_list .cart_right{} #sod_bsk_list .cart_right #sod_bsk_total{margin:0;padding: 38px 30px 30px;background: #FCFBFA; border: 1px solid #E6DDD5;margin-bottom: 1rem;} #sod_bsk_list .cart_right #sod_bsk_total li{color:#222; font-size:1.1rem;display:flex;justify-content: space-between;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_num{} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_price{} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_dvr{} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_cnt{} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_pt{} #sod_bsk #sod_bsk_tot {border:1px solid #212a37;margin:20px 0} #sod_bsk #sod_bsk_tot ul:after {display:block;visibility:hidden;clear:both;content:""} #sod_bsk #sod_bsk_tot li {float:left;width:33.333%;background:#4a505a;color:#fff;border-left:1px solid #212a37;text-align:right;padding:25px;font-size:1.167em} #sod_bsk #sod_bsk_tot li:first-child {border:0} #sod_bsk #sod_bsk_tot li span {display:inline-block;float:left} #sod_bsk #sod_bsk_tot .sod_bsk_cnt {width:33.335%;background:#212a37} #sod_bsk_act {text-align:center;margin-bottom:30px} #sod_bsk_act .btn_submit {height:3.125rem;padding:0 10px;width:160px;font-weight:bold;font-size:1.25em} #sod_bsk_act .btn01 {height:3.125rem;line-height:3.125rem;padding:0 10px;width:160px;font-weight:bold;font-size:1.25em} #sod_bsk_act p {margin:0 0 10px} /* 장바구니 선택사항수정 */ #sod_bsk_list #mod_option_frm {z-index:10000;position:fixed;top:50%;left:50%;max-width:540px; width: 90%; height:auto !important;height:500px;max-height:500px;/*margin-left:-280px;*/ /*margin-top:-150px;*/transform: translate(-50%,-50%); border:1px solid #dde7e9;border-radius:3px;background:#fff;overflow-y:auto;overflow-x:inherit} #sod_bsk_list .mod_option_bg {content:"";position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.1);display:block;z-index:9999} #mod_option_frm h2 {border-bottom:1px solid #e8e8e8;padding:0 20px;line-height:50px;font-size:1.25em} .option_wr {padding:20px 20px 0} .option_wr h3 {font-size:1.167em;margin-bottom:10px} .option_wr .get_item_options, .option_wr .get_item_supply {margin-bottom:10px} .option_wr label {display:block;margin:10px 0 5px} .option_wr select {width:100%;border:1px solid #d4d4d4;height:48px} #sit_opt_added {margin:0;padding:0;border-bottom:0;list-style:none} #sit_opt_added li {padding:10px 15px;background:#f9f9f9;border:1px solid #e6e9ed;margin:10px 0;position:relative} #sit_opt_added li:after {display:block;visibility:hidden;clear:both;content:""} #sit_opt_added li .opt_name {line-height:28px;font-weight:bold} #sit_opt_added li .opt_count {} #sit_opt_added button {float:left;width:30px;height:30px;border:1px solid #bdc9dc;border-radius:0;background:#fff;color:#666;font-size:0.92em} #sit_opt_added button:hover {color:#000} #sit_opt_added .num_input {float:left;border:0;height:30px;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;text-align:center} #sit_opt_added .sit_opt_del {position:absolute;right:0;top:0;font-size:15px;border:0;border-left:1px solid #e6e9ed;border-bottom:1px solid #e6e9ed} #sit_opt_added .sit_opt_del:hover {color:#be334a} #sit_opt_added .sit_opt_prc {display:block;float:right;width:100px;padding:0 3px;text-align:right;line-height:30px;font-size:1.183em;font-weight:bold} #mod_option_frm #sit_sel_option {margin:20px 20px 10px} #mod_option_frm #sit_tot_price {float:left;display:inline-block;margin:0 20px 20px} #mod_option_frm #sit_opt_added {} #mod_option_frm .btn_confirm {float:right;display:inline-block;margin:0 20px 20px;background:yellow} #mod_option_frm .btn_confirm .btn_submit {width:100px;height:40px;font-size:1.167em;font-weight:bold;cursor:pointer} #mod_option_frm .btn_confirm .btn_close {position:absolute;top:0;right:0;width:50px;height:50px;border:0;background:none;font-size:1.25em;border-radius:0} #mod_option_frm .btn_confirm .btn_close:hover {background:#f3f3f3} /* 주문서 작성 */ #sod_frm {} #sod_frm:after {display:block;visibility:hidden;clear:both;content:""} #sod_frm p {margin:0 0 10px} #sod_frm .od_prd_list {margin-bottom:20px} #sod_list {position:relative} #sod_list #cp_frm {z-index:10000;position:absolute;top:50%;left:50%;width:540px;height:auto !important;height:500px;max-height:500px;margin-left:-270px;margin-top:-150px;border:1px solid #dde7e9;border-radius:3px;background:#fff;overflow-y:auto;overflow-x:inherit} .od_coupon h3{border-bottom: 1px solid #cdcdcd;padding: 0 20px;line-height: 50px;margin: 0 0 15px;font-size: 1.25em;text-align:left; -webkit-box-shadow: 1px 2px 2px #eee; -moz-box-shadow: 1px 2px 2px #eee; box-shadow: 1px 2px 2px #eee;} .od_coupon .btn_close {position: absolute;top: 0;right: 0;width: 50px;height: 50px;border: 0;background: none;border-left: 1px solid #cdcdcd;font-size: 1.25em;} .od_coupon .btn_close:hover{background:#f3f3f3} .od_coupon .tbl_head02{margin:20px} .od_coupon .cp_apply{padding: 0 5px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 23px;line-height: 21px;} .od_coupon td,#sod_frm_pay .od_coupon td{text-align:left;border-left:0;padding:7px} #sod_frm_pay .od_coupon th{width:auto;text-align:center;padding: 7px;background: #f3f3f3;border-top: 1px solid #d3d3d3;border-bottom: 1px solid #d3d3d3;} .od_coupon .td_numbig,#sod_frm_pay .od_coupon .td_numbig{text-align:center;} .od_coupon .td_mngsmall{width:60px} /* 주문서 작성 - 왼쪽 */ .sod_left {display:inline-block;float:left;width:840px;margin-right:20px;vertical-align:top} /* 주문서 작성 - 주문하시는 분 */ #sod_frm .tbl_frm01 {padding:20px 10px} #sod_frm .tbl_frm01 th,#sod_frm .tbl_frm01 td {text-align:left;padding:10px;vertical-align:top} #sod_frm .tbl_frm01 th{padding:0px 10px} #sod_frm .tbl_frm01 td input {width:100%} #sod_frm .tbl_frm01 td .addr input {width:20%} #sod_frm .tbl_frm01 td .addr button {background:#434a54;color:#fff;width:128px;height:45px;border:0;border-radius:3px} /* 주문서 작성 - 받으시는 분 */ #sod_frm_taker .tbl_frm01 {padding:20px 10px} #sod_frm_taker .tbl_frm01 .choice_place {display:block;background:#edf3fc;padding:10px 15px;border:1px solid #d1ddee;margin:0 10px 10px} #sod_frm_taker .tbl_frm01 .choice_place:after {display:block;visibility:hidden;clear:both;content:""} #sod_frm_taker .tbl_frm01 .choice_place .chk_box {float:left;display:inline-block;width:85%;line-height:30px} #sod_frm_taker .tbl_frm01 .choice_tit {float:left;display:inline-block;width:15% !important;line-height:30px} #sod_frm_taker .tbl_frm01 .choice_place input[type="radio"] + label span {top:7px} #sod_frm_taker .tbl_frm01 .choice_place input, #sod_frm_taker .tbl_frm01 .choice_place label {margin-left:10px} #sod_frm_taker .tbl_frm01 .btn_frmline {padding:0;width:80px;height:30px;line-height:28px;background:#fff;border:1px solid #d4d6db;color:#606060;text-align:center;float:right} #sod_frm_taker .tbl_frm01 td input {width:100%} #sod_frm_taker .tbl_frm01 td .addr input {width:20%} #sod_frm_taker .tbl_frm01 td .addr button {background:#434a54;color:#fff;width:128px;height:45px;border:0;border-radius:3px} #sod_frm_taker .tbl_frm01 td .ad_choice {padding:5px 0} #sod_frm_taker .tbl_frm01 td .ad_choice input {width:auto} /* 주문서 작성 - 공통 */ #sod_frm_orderer, #sod_frm_taker {margin:0 0 30px;border:1px solid #e3e5e8;background:#fff} #sod_frm section h2 {border-bottom:1px solid #e2e4e7;font-size:1.167em;padding:20px} #sod_frm_orderer #od_addr_jibeon, #sod_frm_taker #od_b_addr_jibeon {display:inline-block;margin:5px 0 0} /* 5.4.1.3 버전이후 추가 css */ #sod_frm div.tbl_frm01, #sod_frm_taker div.tbl_frm01{padding:0px 10px !important} #sod_frm .tbl_frm01 th, #sod_frm .tbl_frm01 td{padding:10px;line-height:45px} #sod_frm .tbl_frm01 th{width:94px} #sod_frm #od_name,#sod_frm #od_tel,#sod_frm #od_hp,#sod_frm #od_pwd,#sod_frm #od_b_name,#sod_frm #od_b_tel,#sod_frm #od_b_hp,#sod_frm #ad_subject,#sod_frm #od_hope_date{width:40%} #sod_frm #od_zip,#sod_frm #od_b_zip{width:90px} #sod_frm .tbl_frm01 td .btn_address {background:#434a54;color:#fff;width:128px;height:45px;border:0;border-radius:3px} #sod_frm #od_memo{min-height:100px} #sod_frm_taker .order_choice_place{position:relative;background:#edf3fc;border:1px solid #d1ddee;padding-left:10px} #sod_frm_taker .tbl_frm01 .btn_frmline{float:none;position:absolute;top:8px;right:10px} #sod_frm #sod_bsk_tot:after {display:block;visibility:hidden;clear:both;content:""} #sod_frm #sod_bsk_tot li{position:relative;float:left;background:#fff;width:33.333%;height:70px;text-align:center;border-bottom:1px solid #e7ebf1;padding:15px 0} #sod_frm #sod_bsk_tot li:after {display:block;visibility:hidden;clear:both;content:""} #sod_frm #sod_bsk_tot li span{display:block;color:#777;margin-bottom:5px;font-weight:bold} #sod_frm #sod_bsk_tot .sod_bsk_sell,#sod_frm #sod_bsk_tot .sod_bsk_coupon{border-right:1px solid #e7ebf1} #sod_frm #sod_bsk_tot .sod_bsk_point,#sod_frm #sod_bsk_tot .sod_bsk_cnt{width:100%;clear:both;height:40px;padding:0 15px;line-height:40px;text-align:right} #sod_frm #sod_bsk_tot li:last-child {border-bottom:0 none} #sod_frm #sod_bsk_tot .sod_bsk_point span,#sod_frm #sod_bsk_tot .sod_bsk_cnt span {float:left;margin:0} #sod_frm #sod_bsk_tot .sod_bsk_coupon:before{display:block;content:"-";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#ff006c;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size: 16px;line-height: 14px;} #sod_frm #sod_bsk_tot .sod_bsk_dvr:before{display:block;content:"+";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#ff006c;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size: 16px;line-height: 14px;} #sod_frm #sod_bsk_tot .sod_bsk_cnt strong{color:#ff006c;font-size:1.25em} #sod_frm_pay {position:relative;margin:10px 0} #sod_frm #sod_frm_pay h2 {position:absolute;border:0;font-size:0;line-height:0;content:""} #sod_frm_pay .pay_tbl table{width:100%;border-collapse:collapse} #sod_frm_pay .pay_tbl th{text-align:left;padding:10px;width:80px;/*border-bottom:1px solid #e7ebf1;*/background:#fff;font-weight:bold;color:#777} #sod_frm_pay .pay_tbl td{text-align:right;padding: 10px;height:30px;border-bottom:1px solid #e7ebf1;background:#fff} #sod_frm_pay .pay_tbl td .cp_cancel{margin:0 0 0 2px} #sod_frm_pay .pay_tbl td .btn_frmline{padding: 0 7px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 26px;line-height: 21px;margin: 0;width:auto;} #od_tot_price{margin:10px 0;background:#fff;line-height:40px;text-align:right;padding:0 10px} #od_tot_price span{float:left;font-weight:bold} #od_tot_price strong{font-size:1.5em;color:#ff006c} #sod_frm #sod_frm_pt_alert {margin:5px 0;color:#38b2bb } #od_pay_sl h3{font-size:1.167em;margin:20px 0 5px} #od_pay_sl input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index: -1;} #od_pay_sl .lb_icon {display: inline-block;float:left;width:50%;background:#fff;border:1px solid #eceff4;margin:-1px 0 0 -1px;cursor: pointer;height:60px;position:relative;padding-left:65px;padding-top:20px;z-index:1} #od_pay_sl input[type="radio"]:checked+.lb_icon {border:1px solid #ff006c;z-index:3} #sod_frm_paysel {} #sod_frm_paysel legend {position:absolute;font-size:0;line-height:0;overflow:hidden} #sod_frm_paysel .KPAY{background:url('../img/kpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .PAYNOW{background:url('../img/paynow.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .PAYCO, #sod_frm_paysel .paycopay_icon{background:url('../img/payco.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .inicis_lpay, #sod_frm_paysel .lpay_icon{background:url('../img/lpay_logo.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .inicis_kakaopay{position:relative;overflow:hidden;text-indent:-999px} #sod_frm_paysel .inicis_kakaopay em{position:absolute;top:15px;left:45px;width:70px;height:30px;background:url('../img/kakao.png') no-repeat 50% 50% #ffeb00;overflow:hidden;text-indent:-999px;border-radius:30px} #sod_frm_paysel .kakaopay_icon{background:url('../img/kakao.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .naverpay_icon{background:url('../img/ico-default-naverpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #sod_frm_paysel .samsungpay_icon{background:url('../img/samsungpay.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px} #sod_frm_paysel .ssgpay_icon{background:url('../img/ssgpay_icon.png') no-repeat 50% 50% #fff;display:inline-block;overflow:hidden;text-indent:-999px} #sod_frm_paysel .skpay_icon{background:url('../img/skpay11_icon.png') no-repeat 50% 50% #fff; background-size: 70px;display:inline-block;overflow:hidden;text-indent:-999px} #sod_frm_paysel .bank_icon{background:url('../img/pay_icon1.png') no-repeat 15px 50% #fff} #sod_frm_paysel .vbank_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px} #sod_frm_paysel .iche_icon{background:url('../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px} #sod_frm_paysel .hp_icon{background:url('../img/pay_icon3.png') no-repeat 24px 50% #fff} #sod_frm_paysel .card_icon{background:url('../img/pay_icon4.png') no-repeat 17px 50% #fff} #forderform .sod_right #sod_bsk_tot {border:1px solid #e3e5e8} #forderform .od_pay_buttons_el{margin-top:20px;border:1px solid #e3e5e8;background:#fff;padding:10px} #forderform .od_pay_buttons_el h3{font-size:1.167em;margin:0px 0 1rem;} #forderform #sod_frm_pt{border-top:1px solid #e3e5e8} .sod_right .pay_tbl{border:1px solid #e3e5e8;border-bottom:0 none} .sod_right #od_tot_price{border:1px solid #e3e5e8} #sod_frm_pay .od_pay_buttons_el:after{display:block;visibility:hidden;clear:both;content:""} #sod_frm_pay .sod_frm_point{margin-top:20px;border:1px solid #e3e5e8;margin-bottom:20px;} #sod_frm_pay .sod_frm_point div{background:#fff;padding:10px;text-align:left;text-align:right;font-size:0.9rem;} #sod_frm_pay .sod_frm_point div:after {display:block;visibility:hidden;clear:both;content:''} #sod_frm_pay .sod_frm_point div label{float:left;line-height:30px;font-weight:bold} #sod_frm_pay .sod_frm_point div span{display:block;margin-bottom:5px;} #sod_frm_pay .sod_frm_point div span:after {display:block;visibility:hidden;clear:both;content:''} #sod_frm_pay .sod_frm_point div strong{float:left;color:#666;font-weight:500;} #sod_frm_pay .sod_frm_point .max_point_box em{font-style:normal !important} #sod_frm_pay .sod_frm_point #od_temp_point{height:30px;text-align:right;padding:0 5px;border:1px solid #ccc;border-radius:5px;} /* 주문서 작성 - 오른쪽 */ .sod_right {display:inline-block;float:left;width:340px;height:100%;vertical-align:top} .sod_right #sod_bsk_tot {border:1px solid #3a8afd} .sod_right #sod_bsk_tot:after {display:block;visibility:hidden;clear:both;content:""} .sod_right .sod_info li {position:relative;float:left;background:#fff;width:33.333%;height:70px;text-align:center;border-bottom:1px solid #e7ebf1;padding:15px 0} .sod_right .sod_info li:after {display:block;visibility:hidden;clear:both;content:""} .sod_right .sod_info li span {display:block;color:#777;margin-bottom:5px;font-weight:bold;color:#000} .sod_right .sod_info .sod_bsk_sell, .sod_right .sod_info .sod_bsk_coupon {border-right:1px solid #e7ebf1} .sod_right .sod_info .sod_bsk_coupon:before {display:block;content:"-";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#9da6c9;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size:16px;line-height:14px} .sod_right .sod_info .sod_bsk_dvr:before {display:block;content:"+";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#9da6c9;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size:16px;line-height:14px} .sod_right .sod_info .sod_bsk_cnt strong {font-size:1.25em} .sod_right .sod_info_bt {clear:both;padding:10px 15px;background:#fff} .sod_right .sod_info_bt:after {display:block;visibility:hidden;clear:both;content:""} .sod_right .sod_info_bt li {} .sod_right .sod_info_bt li:after {display:block;visibility:hidden;clear:both;content:""} .sod_right .sod_info_bt li span {display:inline-block;float:left;width:50%;line-height:28px;text-align:left;font-weight:bold;color:#000} .sod_right .sod_info_bt li strong {display:inline-block;float:left;width:50%;line-height:28px;text-align:right} .sod_right .sod_info_option {clear:both;border-top:1px solid #e7ebf1} .sod_right .sod_info_option h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .sod_right .sod_info_option ul {padding:10px 15px;background:#fff} .sod_right .sod_info_option li {margin-bottom:5px} .sod_right .sod_info_option li:after {display:block;visibility:hidden;clear:both;content:""} .sod_right .sod_info_option .sod_ifop_tit {display:inline-block;float:left;width:50%;line-height:28px;text-align:left;font-weight:bold} .sod_right .sod_info_option .sod_ifop_tit .btn_frmline {width:auto;height:30px;color:#3a8afd;background:#fff;border:1px solid #d4d6db} .sod_right .sod_info_option .sod_ifop_tit .cp_cancel {width:auto;height:30px;border:1px solid #d4d6db;padding:0 5px;margin-left:5px;color:#b1b1b1;vertical-align:baseline} .sod_right .sod_info_option .sod_ifop_tit .od_coupon {z-index:10000;position:absolute;top:50%;left:50%;min-width:300px;height:auto !important;height:500px;max-height:500px;margin-left:-200px;margin-top:-150px;border:1px solid #dde7e9;border-radius:3px;background:#fff;overflow-y:auto;overflow-x:inherit} .sod_right .sod_info_option .sod_ifop_tit .od_coupon>td {text-align:left} .sod_right .sod_info_option>td, .sod_right .sod_info_option .sod_ifop_t {display:inline-block;float:left;width:50%;line-height:28px;text-align:right} .sod_right .sod_info_option>td {text-align:right;padding:10px;height:30px} .sod_right .sod_info_option>td .cp_cancel {margin:0 0 0 2px} .sod_right .sod_info_option>td .btn_frmline {padding:0 7px;border:1px solid #38b2b9;color:#38b2b9;background:#fff;height:23px;line-height:21px;margin:0} /* 주문서 작성 - 포인트사용 */ #sod_point {clear:both;background:#fff;margin-top:10px;border:1px solid #e3e5e8} #sod_point h2 {font-size:1.167em;padding:15px;border-bottom:1px solid #e3e5e8} #sod_point h2:after {display:block;visibility:hidden;clear:both;content:''} #sod_point .point_tit {vertical-align:baseline;float:left;line-height:28px} #sod_point .point_tit label {vertical-align:baseline} #sod_point .point_ipt {float:right;display:inline-block;margin-left:35px;text-align:left;text-align:right;font-weight:normal} #sod_point .point_ipt:after {display:block;visibility:hidden;clear:both;content:''} #sod_point .point_ipt #od_temp_point {width:100px;height:30px;text-align:right;padding:0 5px;border:1px solid #d0d3db;border-radius:3px} #sod_frm_pt {padding:20px} /* #sod_frm_pt strong {display:inline-block;width:45%;color:#000;line-height:28px;text-align:left} #sod_frm_pt span {display:inline-block;width:55%;color:#000;text-align:right} #sod_frm_pt span:after {display:block;visibility:hidden;clear:both;content:''} */ #sod_frm_pt .max_point_box em {font-style:normal !important} /* 주문서 작성 - 결제수단 */ /* #sod_frm_pay {position:relative;margin:10px 0 0;background:#fff;border:1px solid #e3e5e8} */ #sod_frm_pay {position:relative;margin:10px 0 0} #sod_frm_pay h2 {font-size:1.167em;padding:15px;border-bottom:1px solid #e3e5e8} #sod_frm_pay .tooltip_txt {height:auto;line-height:18px;font-weight:normal;font-size:1em;padding:10px 20px;margin:10px} #sod_frm_pay .tooltip_txt i {float:left;line-height:36px;font-size:2em;margin-right:15px} #sod_frm_pay .tooltip_txt:before {height:100%} #sod_frm_pay input[type="radio"] {} #sod_frm_pay .lb_icon {display:inline-block;position:relative;cursor:pointer;z-index:1} #sod_frm_pay input[type="radio"]:checked+.lb_icon {color:#3a8afd;z-index:3} #sod_frm_pay input[type="radio"] + label span {top:7px} #sod_frm_paysel {} #sod_frm_paysel legend {position:absolute;font-size:0;line-height:0;overflow:hidden} /* #sod_frm_paysel .PAYCO {display:inline-block;width:75px;background:url('../img/payco.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px;border:1px solid #fa1417} #sod_frm_paysel .PAYNOW {display:inline-block;width:75px;background:url('../img/paynow.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px;border:1px solid #c01734} #sod_frm_paysel .kakaopay_icon {display:inline-block;width:60px;background:url('../img/kakao.png') no-repeat 50% 50% #ffeb00;overflow:hidden;text-indent:-999px;border-radius:30px} #sod_frm_paysel .KPAY {display:inline-block;width:58px;background:url('../img/kpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px;border:1px solid #22096a} #sod_frm_paysel .inicis_lpay {display:inline-block;width:50px;background:url('../img/lpay_logo.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px;border:1px solid #009bd7} */ #sod_frm_paysel ul.pay_way {margin:0;padding:15px} #sod_frm_paysel ul.pay_way input[type="radio"] + label span {top:7px} #sod_frm_paysel ul:after {display:block;visibility:hidden;clear:both;content:""} #sod_frm_paysel li {position:relative;line-height:28px;text-align:left;list-style:none} #settle_bank {border:1px solid #e3e5e8;border-top:0 none;background:#fff;padding:10px;clear:both;line-height:32px} #settle_bank:after {display:block;visibility:hidden;clear:both;content:''} #settle_bank label {float:left;width:30%;line-height:30px} #settle_bank select, #settle_bank input {width:70%;height:32px;margin:0 0 5px;border:1px solid #e3e5e8;border-radius:3px;text-align:left} #settle_bank option {padding:3px 0} #settle_bank #od_deposit_name {height:32px;padding:0 5px;border:1px solid #e3e5e8} #display_pay_button {background:#fff;padding:20px;border:1px solid #e3e5e8;border-top:0} #display_pay_button .btn_submit {width:100%;height:50px;font-weight:bold;font-size:1.25em;cursor:pointer;border:1px solid #3a8afd} #display_pay_button .btn01 {width:100%;height:50px;line-height:38px;font-weight:bold;font-size:1.25em;margin:5px 0;border:1px solid #ccd1d9} .display_setup_message {margin:0 0 10px;padding:15px;border:1px solid #fccdff;background:#ffeef9} .display_setup_message strong {display:block;margin:0 0 10px} #sod_frm_taker td input[type="radio"], #sod_frm_taker td input[type="checkbox"]{width:auto;-webkit-appearance:radio;-webkit-border-radius:initial} #sod_frm_taker label {display:inline-block;font-weight:normal;margin-right:1em} #sod_frm_same {margin:0 0 10px} #sod_frm #display_pay_process {text-align:center} #sod_frm #display_pay_process span {display:block;margin:5px 0 0} #od_tot_price {background:#e5f0ff;line-height:20px;text-align:right;padding:15px} #od_tot_price span {float:left;font-weight:bold} #od_tot_price strong {font-size:1.5em;color:#ff006c} #sod_frm_pay_info {margin:0 0 10px} #sod_frm_pay #sc_coupon_frm, #sod_frm_pay #od_coupon_frm {z-index:10000;position:absolute;top:0;right:0;width:500px;height:auto !important;height:500px;max-height:500px;border:1px solid #000;background:#fff;overflow-y:auto} #sod_frm_deli {position:relative;line-height:2em} #sod_frm_escrow {margin:30px 0 0} #sod_frm #sod_frm_escrow h2 {margin:0;border:0} #sod_frm #sod_frm_escrow p {margin:5px 0} #display_pay_process {padding:20px;text-align:center} /* 위시리스트 */ #sod_ws {} .sod_ws_img {width:90px;text-align:center} #sod_ws_act {text-align:center;margin:20px 0 30px} #sod_ws_act button {height:50px;width:180px;font-weight:bold;font-size:1.167em;border-radius:3px} #sod_ws li .info_link {display:block;text-overflow: ellipsis; overflow: hidden; word-break: keep-all;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;font-weight:600;font-size:1rem;line-height:1.4; } #sod_ws li .info_date {color:#646464;font-size:0.92em} #sod_ws li .wish_chk {position:relative;width:40px;text-align:center;font-size:0.9rem;display:block;} #sod_ws li .wish_chk .noitem{color:#fff; background:#f00;padding:5px;} #sod_ws li .wish_chk .chk_box input[type="checkbox"] + label span{top:-3px; } #sod_ws li .wish_info {position:relative;margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:0.4rem;padding:10px 0;} #sod_ws li .wish_del {position:relative;width:35px;text-align:center;background:#e6e6e6;display:block;font-size:1.25em;color:#777;padding:5px;font-size:0.9rem;} #sod_ws li .wish_del:hover {background:#777;color:#fff} /* 배송지 목록 */ #sod_addr .tbl_wrap {margin:30px} #sod_addr .td_mng .sel_address {color:#fff;background:#fff;border:1px solid #19bc9b;color:#19bc9b;padding:0 5px;height:26px;border-radius:3px} #sod_addr .td_mng .del_address {display:inline-block;border:1px solid #aaa;color:#888;padding:0 5px;height:26px;line-height:24px;vertical-align:middle;border-radius:3px} #sod_addr input[type="radio"] {position:absolute;left:0;z-index:-1;visibility:hidden;width:0;height:0;overflow:hidden;text-indent:-999px} #sod_addr .default_lb {display:inline-block;background:#fff;border:1px solid #1c70e9;color:#3a8afd;cursor:pointer;position:relative;padding:0 5px;height:26px;line-height:24px;border-radius:3px} #sod_addr input[type="radio"]:checked+.default_lb {background:#3476be;color:#fff} #sod_addr td {height:40px;vertical-align:top} #sod_addr .td_name {width:100px} #sod_addr .frm_input {height:30px} #sod_addr .td_sbj {width:155px;text-align:left} #sod_addr .td_sbj .chk_box {display:inline-block;float:left} #sod_addr .td_sbj .chk_box input[type="checkbox"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px} #sod_addr .ad_tel {display:block;color:#666} #sod_addr .td_mng {width:100px;padding:10px} #sod_addr .td_mng .mng_btn {width:100%;margin:2px 0} /* 주문내역 */ #sod_v {margin-bottom:30px} #sod_v:after {display:block;visibility:hidden;clear:both;content:''} #sod_v td {text-align:center} #sod_v td a {font-weight:bold} #sod_v .basic_tbl {text-align:center} .status_01 {display:inline-block;background:#edfbde;color:#8cc152;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} .status_02 {display:inline-block;background:#84c93a;color:#fff;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} .status_03 {display:inline-block;background:#e2f6f2;color:#16b494;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} .status_04 {display:inline-block;background:#e2eaf6;color:#3a8afd;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} .status_05 {display:inline-block;background:#3a8afd;color:#fff;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} .status_06 {display:inline-block;background:#fff;color:red;padding:0 5px;line-height:20px;font-size:0.92em;border-radius:5px} /* 주문상세내역 */ #sod_fin {} #sod_fin th{padding:8px} #sod_fin .th_line th{border-top:1px solid #ddd;} #sod_fin_no {margin:0 0 20px;padding:15px;border:1px solid #d6e2f4;background:#edf3fc;font-size:1.2em;border-radius:5px;color:#3a8afd} #sod_sts_wrap {margin:0 0 10px;text-align:right} #sod_sts_explan {display:none} #sod_fin_legend {padding:10px;background:#fff;margin:10px 0;border:1px solid #e9e9e9;text-align:left;zoom:1} #sod_fin_legend:after {display:block;visibility:hidden;clear:both;content:''} #sod_fin_legend dt {clear:both;float:left;margin:0 0 5px;width:50px;font-weight:bold} #sod_fin_legend dd {float:left;margin:0} #sod_fin #sod_bsk_tot li{background:#fff;border-bottom:1px solid #e7ebf1;height: 40px;;padding:0 15px;line-height:40px;text-align:right} #sod_fin #sod_bsk_tot li span{float:left;clear:both;color: #777;} #sod_fin #sod_bsk_tot li strong{} #sod_fin #sod_bsk_tot .sod_bsk_cnt strong{color:#ff006c;font-size:1.25em} #request_form {position:relative} #request_form div {display:none;z-index:10000;position:absolute;top:23px;left:0;padding:20px 0;width:520px;border:1px solid #000;background:#f2f5f9;text-align:center} #request_form .frm_input {width:300px;background:#fff !important} #request_form .btn_frmline, #request_form .btn_cancel {vertical-align:middle !important} #request_form .btn_frmline {padding:0 10px;line-height:1.6em} #sod_req_btn {margin:0 0 10px} #sod_req_btn button {background:#626870} #sod_req_log {margin:0 0 20px} #sod_req_log ul {margin:0;padding:0;border-top:1px solid #e9e9e9;background:#f2f5f9;list-style:none} #sod_req_log li {padding:10px 10px 20px;border:1px solid #e9e9e9;border-top:0} #sod_req_log h3 {margin:20px 0 10px} .sod_req_log_view table {margin:0} .sod_req_log_view caption {padding:10px 0;font-size:1em;font-weight:bold;text-align:left;line-height:1em} .sod_req_log_view caption span {color:#ff3061} .sod_req_log_view th {border-top:1px solid #e9e9e9;background:#f7f7f7 !important;color:#000 !important;text-align:center} .sod_req_log_view td {background:#fff;color:#000} .sod_req_log_view p {padding:10px 15px;border-bottom:1px solid #e9e9e9;background:#fff;color:#000} .sod_req_log_view .sod_req_it {width:270px} .sod_req_log_view button {margin:0;padding:0;border:0;background:transparent;color:#ff3061;text-decoration:underline;vertical-align:middle;cursor:pointer} #sod_fin_list h2 {margin:0 0 10px} #sod_fin_list .td_bdno{border-left:0} #sod_fin_list .td_bdno a{font-weight:bold} #sod_fin_view {border:1px solid #e9e9e9} #sod_fin_view h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #sod_fin_view h3 {margin:0 0 10px} #sod_fin_view .basic_tbl th {padding:0 10px;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#f2f5f9;text-align:left} #sod_fin_pay {margin:0 0 30px} #sod_fin_orderer {margin:0 0 30px} #sod_fin_receiver {margin:0 0 30px;} #sod_fin_dvr {} #sod_fin .sod_left h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #sod_fin .sod_left h3 {background:#fff;font-size:1.167em;padding:15px 10px;border-top:1px solid #e3e5e8;border-bottom:0} #sod_fin .sod_left .tbl_head01 {} #sod_fin .sod_left th{padding:10px;border:0;border-top:1px solid #f3f3f3;text-align:left;width:100px;color:#666;background:#fff} #sod_fin .sod_left td{padding:10px;border:0;border-top:1px solid #f3f3f3;background:#fff} #sod_fin_dvr .dvr_link {color:#ff3061;text-decoration:underline} #sod_fin_tot {margin:10px 0} #sod_fin_tot h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #sod_fin_tot ul {margin:0;padding:0;list-style:none} #sod_fin_tot li {padding:10px;background:#38b2b9;border-bottom:1px solid #5ec2c7;color:#fff;zoom:1} #sod_fin_tot li:after {display:block;visibility:hidden;clear:both;content:""} #sod_fin_tot #alrdy {border-bottom:0 !important} #sod_fin_tot #alrdy .right{margin-top:10px;text-align:right;color:#f3f3f3;font-size:0.9em} #sod_fin_tot #alrdy .right p{position:relative} #sod_fin_tot #alrdy .right .title{position:absolute;left:0;padding-left:8px} #sod_fin_tot strong {float:right} #sod_fin_cancel {text-align:center} #sod_fin_cancel h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #sod_fin_cancel button {height:40px;border:1px solid #5e6b6f;font-weight:bold;width:100%;background:none;color:#5e6b6f} #sod_fin_cancel button:hover{background:#fff} #sod_fin_cancelfrm {display:none;margin:10px 0 0;text-align:center;background:#fff;padding:15px} #sod_fin_cancelfrm .frm_input {background:#fff;margin: 0 0 5px;width:100%} #sod_fin_cancelfrm .btn_frmline{background:#5e6b6f;color:#fff;border:0;padding:10px;width:100%;cursor:pointer} #sod_fin_test {padding:10px} /* 주문상세내역 중 현금영수증 발급 */ #scash {} #scash section {padding:10px 0} #scash h2 {margin:0 0 10px;text-align:center} #scash .basic_tbl th {padding:0 10px;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#f2f5f9;text-align:left} #scash_apply {padding:10px 0 20px;text-align:center} #scash_apply button {padding:10px;border:0;background:#565e60;color:#fff} #scash_copy {text-align:center} /* 배너 인덱스 출력 */ #sbn_idx {} /* 쇼핑몰 이벤트 */ #sev {} .sev_admin {margin:0 0 10px;text-align:right} .sev_admin a {line-height:35px;padding:0 10px} /* 쿠폰 */ #coupon {text-align:center} #coupon h1 {text-align:left} #coupon ul:after {display:block;visibility:hidden;clear:both;content:""} #coupon li {padding:15px;border-bottom:1px solid #ececec;text-align:left} #coupon .cou_top {margin-bottom:10px} #coupon .cou_tit {font-size:1.25em;font-weight:bold} #coupon .cou_pri {font-size:1.25em;color:#3a8afd;font-weight:bold;float:right} #coupon .cou_target {color:#8cc152;background:#edfbde;padding:5px;line-height:20px;font-size:0.92em;border-radius:5px} #coupon .cou_date {float:right;color:#888d92} #coupon .btn_close {margin:20px auto} /* 모바일일때 피시버전 주문폼 */ .sod_frm_mobile .sod_list{margin:10px 0} .sod_frm_mobile .sod_list .sod_li{background:#fff;border-bottom:1px solid #e5e5e5;margin:10px 0} .sod_frm_mobile .sod_list .li_name{font-size:1.083em} .sod_frm_mobile .sod_list .li_op_wr{position:relative;padding:10px 10px 0 110px;min-height:75px} .sod_frm_mobile .sod_list .li_op_wr .chk_box{position:absolute;top:10px;left:10px} .sod_frm_mobile .sod_list .total_img{position:absolute;top:10px;left:35px} .sod_frm_mobile .sod_list .mod_options{padding:0 7px;border:1px solid #d4d6db;border-radius:3px;color:#606060;background:#fff;line-height:24px;margin:5px 0 0;font-size:.923em} .sod_frm_mobile .sod_list .li_prqty{padding:10px;border-top:1px solid #f8f8f8} .sod_frm_mobile .sod_list .li_prqty:after{display:block;visibility:hidden;clear:both;content:''} .sod_frm_mobile .sod_list .li_prqty_sp{float:left;width:50%;display:block;line-height:20px;padding:0 5px;text-align:right} .sod_frm_mobile .sod_list .li_prqty_sp span{float:left;color:#696969} .sod_frm_mobile .sod_list .prqty_sc,.sod_frm_mobile .sod_list .prqty_price{border-right:1px solid #e5e5e5} .sod_frm_mobile .sod_list .total_price{background:#f2f7ff;display:block;clear:both;margin:0 10px 10px;text-align:right;padding:5px 10px;line-height:20px} .sod_frm_mobile .sod_list .total_price span{float:left} .sod_frm_mobile .sod_list .total_price strong{font-size:1.25em;color:#3a8afd} .sod_frm_mobile .sod_opt{padding:5px 10px 5px 35px} .sod_frm_mobile .sod_opt li{color:#777;margin:3px 0;line-height:1.3em} .sod_frm_mobile .sod_opt li:before{content:"옵션";display:inline-block;margin:1px 5px 2px 0;font-size:11px;padding:0 5px;border-radius:3px;background:#e2eaf6;line-height:20px;color:#3a8afd} .sod_frm_mobile .sod_opt .opt_name:before{content:"옵션";display:inline-block;margin:1px 5px 2px 0;font-size:11px;padding:0 5px;border-radius:3px;background:#e2eaf6;line-height:20px;color:#3a8afd} .sod_frm_mobile #sod_frm_orderer,.sod_frm_mobile #sod_frm_taker{margin:0 0 30px;border:1px solid #e3e5e8;background:#fff} .sod_frm_mobile #sod_frm_orderer #od_addr_jibeon,.sod_frm_mobile #sod_frm_taker #od_b_addr_jibeon{display:inline-block;margin:5px 0 0} .sod_frm_mobile #m_sod_bsk_tot{background:#4a505a;color:#fff} .sod_frm_mobile #m_sod_bsk_tot:after{display:block;visibility:hidden;clear:both;content:""} .sod_frm_mobile #m_sod_bsk_tot dt{float:left;width:40%;padding:10px;line-height:20px;clear:both} .sod_frm_mobile #m_sod_bsk_tot dd{float:left;width:60%;padding:10px;text-align:right;line-height:20px} .sod_frm_mobile #m_sod_bsk_tot .sod_bsk_cnt{font-weight:700;margin-top:5px;line-height:25px;background:#212a37} .sod_frm_mobile #m_sod_bsk_tot .sod_bsk_cnt strong{color:#3a8afd;font-size:1.25em} .sod_frm_mobile .sod_list .li_op_wr{padding-left:100px} .sod_frm_mobile .sod_list .total_img{left:10px} .sod_frm_mobile .sod_opt{padding-left:10px} .sod_frm_mobile #m_sod_frm_paysel{margin:10px 0} .sod_frm_mobile #m_sod_frm_paysel h3{background:#fff;padding:15px 10px;border:1px solid #e3e5e8;border-bottom:0} .sod_frm_mobile #m_sod_frm_paysel ul{margin:0;background:#fff;padding:10px;border:1px solid #e3e5e8} .sod_frm_mobile #m_sod_frm_paysel ul:after{display:block;visibility:hidden;clear:both;content:""} .sod_frm_mobile #m_sod_frm_paysel li{float:left;padding:5px;width:46%;height:25px} .sod_frm_mobile #m_sod_frm_paysel .KPAY{background:url(../img/kpay.png) no-repeat;width:37px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%} .sod_frm_mobile #m_sod_frm_paysel .PAYNOW{background:url(../img/paynow.png) no-repeat;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%} .sod_frm_mobile #m_sod_frm_paysel .PAYCO{background:url(../img/payco.png) no-repeat 1px;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%} .sod_frm_mobile #m_sod_frm_paysel .inicis_lpay{background:url(../img/lpay_logo.png) no-repeat;width:35px;height:12px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%} .sod_frm_mobile #m_sod_frm_paysel .inicis_kakaopay{background:url(../img/kakao.png) no-repeat 50% 50% #f4dc34;border-radius:30px;height:22px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:35px auto} .sod_frm_mobile #m_sod_frm_paysel .kakaopay_icon{background:url(../img/kakao.png) no-repeat 50% 50% #f4dc34;border-radius:30px;height:22px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:35px auto} .sod_frm_mobile #m_sod_frm_paysel .applepay_icon{background:url(../img/ico-mobile-applepay.png) no-repeat 50% 50% #fff;border-radius:30px;height:23px;width:50px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:35px auto} .sod_frm_mobile #m_sod_frm_paysel .samsung_pay{margin-left:-23px;background:url(../img/samsungpay.png) no-repeat 24px 3px;height:25px;width:106px;display:inline-block;overflow:hidden;text-indent:-999px} .sod_frm_mobile #sod_frm_pay{border-top:1px solid #f3f3f3} .sod_frm_mobile #sod_frm_pay h2{margin:10px 0;font-size:1.25em} .sod_frm_mobile #sod_frm_pay .cp_btn1,.sod_frm_mobile #sod_frm_pay .cp_cancel1{margin-top:0} .sod_frm_mobile .odf_tbl{position:relative} .sod_frm_mobile .odf_tbl table{background:#fff;width:100%;border-collapse:collapse;border-bottom:1px solid #ccc} .sod_frm_mobile .odf_tbl table th{border-top:1px solid #eceff4;padding:10px;text-align:left;width:120px;font-weight:400} .sod_frm_mobile .odf_tbl table td{border-top:1px solid #eceff4;padding:7px 10px;text-align:right} .sod_frm_mobile#sod_frm #sod_frm_pt_alert{margin:10px 0;text-align:left;color:#fff;line-height:18px;background:#f2838f;padding:10px 10px 10px 13px;border-radius:5px;position:relative} .sod_frm_mobile #sod_frm_pt_alert::before{content:"";position:absolute;top:0;left:0;width:5px;height:50px;border-radius:5px 0 0 5px;background:#da4453;height:100%} .sod_frm_mobile#sod_frm .sod_frm_point{padding:10px 0;clear:both;border:0 none} .sod_frm_mobile .sod_frm_point div{background:#fff;border:1px solid #e3e5e8;padding:10px;text-align:right} .sod_frm_mobile .sod_frm_point div:after{display:block;visibility:hidden;clear:both;content:''} .sod_frm_mobile .sod_frm_point div label{float:left;line-height:30px} .sod_frm_mobile .sod_frm_point div span{display:block;margin:5px 0} .sod_frm_mobile .sod_frm_point div span:after{display:block;visibility:hidden;clear:both;content:''} .sod_frm_mobile .sod_frm_point .max_point_box em{font-style:normal!important} .sod_frm_mobile .sod_frm_point div strong{float:left;color:#666;font-weight:400} .sod_frm_mobile .sod_frm_point #od_temp_point{height:30px;border:1px solid #d0d3db;text-align:right;background:#fff;border-radius:3px;-webkit-box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1);box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1)} .sod_frm_mobile #settle_bank{background:#fff;border:1px solid #e3e5e8;padding:10px;clear:both;line-height:30px} .sod_frm_mobile #settle_bank:after{display:block;visibility:hidden;clear:both;content:''} .sod_frm_mobile #settle_bank select{height:30px;margin:0 0 5px;width:100%;border:1px solid #d0d3db} .sod_frm_mobile #settle_bank #od_deposit_name{height:30px;border:1px solid #d0d3db;text-align:center;border-radius:3px;float:right;-webkit-box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1);box-shadow:inset 1px 1px 5px rgba(0,0,0,0.1)} .sod_frm_mobile #settle_bank label{float:left;line-height:30px} .sod_frm_mobile #sod_frm_pt_info{border-top:0} .sod_frm_mobile .od_coupon{position:absolute;top:0;left:0;background:#fff;width:100%;z-index:99;border-radius:0 0 3px 3px;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.4);box-shadow:1px 1px 5px rgba(0,0,0,0.4)} .sod_frm_mobile .od_coupon h3{height:45px;line-height:45px;font-size:1.167em;background:#333;color:#fff;padding:0 15px;text-align:left} .sod_frm_mobile .od_coupon .tbl_head02 .btn_frmline{background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px} .sod_frm_mobile .od_coupon .tbl_head02 td{text-align:left} .sod_frm_mobile .od_coupon .tbl_head02 th{width:auto!important} .sod_frm_mobile .od_coupon .tbl_head02 .td_mngsmall{width:60px;text-align:center} .sod_frm_mobile .od_coupon .tbl_head02 .td_numbig{width:80px;text-align:right} .sod_frm_mobile .od_coupon .btn_confirm{margin:20px} .sod_frm_mobile .od_coupon .btn_confirm .btn_submit{height:40px;font-size:1.167em;font-weight:700;width:100%} .sod_frm_mobile .od_coupon .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#fff;font-size:1.25em} .sod_frm_mobile .cp_btn,.sod_frm_mobile .cp_btn1{padding:0 7px;border:1px solid #d4d6db;border-radius:3px;color:#3a8afd;background:#fff;line-height:24px;margin:5px 0 0;font-size:.923em} .sod_frm_mobile .cp_apply{padding:0 5px;border:1px solid #3a8afd;color:#3a8afd;background:#fff;height:23px;line-height:21px} .sod_frm_mobile .cp_cancel,.sod_frm_mobile .cp_cancel1{padding:0 7px;border:1px solid #d4d6db;border-radius:3px;color:#aaa;background:#fff;line-height:24px;margin:5px 0 0 2px;font-size:.923em} .sod_frm_mobile #sod_frm_escrow{margin:10px} .sod_frm_mobile #sod_frm_escrow h2{font-size:1.25em} .sod_frm_mobile #od_pay_sl h3{font-size:1.25em} .sod_frm_mobile .sod_list .li_name{border-bottom:1px solid #dcdcdc;line-height:1.3em;padding:10px;font-size:1.083em} #sod_frm.sod_frm_mobile .odf_list .frm_input{width:100%!important} #sod_frm.sod_frm_mobile input[type="radio"],.sod_frm_mobile #sod_frm.sod_frm_mobile input[type="checkbox"]{width:auto;-webkit-appearance:radio;-webkit-border-radius:initial} #sod_frm.sod_frm_mobile #od_memo{min-height:50px} .sod_frm_mobile .od_prd_list{margin:10px;background:#fff;padding:15px} .sod_frm_mobile .od_prd_list .td_chk{border-left:0} .sod_frm_mobile .od_prd_list .td_prd{border-left:0;position:relative;padding-left:90px;min-height:100px} .sod_frm_mobile .od_prd_list .td_prd .sod_img{position:absolute;top:15px;left:0} .sod_frm_mobile .od_prd_list .td_prd .sod_name{min-height:80px} .sod_frm_mobile .od_prd_list .td_prd .prd_name{font-size:1.167em} .sod_frm_mobile .od_prd_list .total_prc{color:#ff006c;font-weight:700;font-size:1.167em} .sod_frm_mobile #sod_frm_orderer{padding:10px;border-bottom:1px solid #d6d3d3} .sod_frm_mobile #sod_frm_taker{padding:10px;border-bottom:1px solid #d6d3d3;border-top:1px solid #f3f3f3} .sod_frm_mobile #sod_frm_taker h2,.sod_frm_mobile #sod_frm_orderer h2{margin:10px 0;font-size:1.25em} .sod_frm_mobile .odf_list label,.sod_frm_mobile .odf_list strong{display:block;margin:7px 0 5px;color:#444;font-weight:400} .sod_frm_mobile .odf_list .frm_input{width:100%;margin:0 0 5px} .sod_frm_mobile .odf_list .dlv_slt{background:#edf3fc;position:relative;border:1px solid #d1ddee;margin:5px 0;padding:10px} .sod_frm_mobile .odf_list .dlv_slt strong{margin:0;font-weight:700;line-height:30px} .sod_frm_mobile .odf_list .dlv_slt div label{display:inline-block;margin:3px 0;color:#000} .sod_frm_mobile #order_address{display:block;position:absolute;top:5px;right:5px;text-align:center;border:1px solid #d4d6db;background:#fff;border-radius:3px;color:#606060;height:30px;line-height:28px;margin:5px 0 0;padding:0 5px} .sod_frm_mobile .odf_list .ad_default{display:inline-block;margin:0} .sod_frm_mobile .odf_list .btn_addsch{position:absolute;top:5px;right:5px;border-radius:3px;height:30px} .sod_frm_mobile .odf_list .add_num{position:relative;display:block} .sod_frm_mobile .odf_list textarea{border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;width:100%;height:70px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)} .sod_frm_mobile .sod_ta_wr{background:#fff;margin-bottom:1em} .sod_frm_mobile .btn_confirm{margin:0 0 10px} .sod_frm_mobile .btn_submit{width:100%;height:45px;font-size:1.167em;font-weight:700;margin:5px 0;border-radius:4px} .sod_frm_mobile .btn_cancel,.sod_frm_mobile .btn01{width:100%;height:45px;line-height:43px;font-size:1.167em;font-weight:700;padding:0;border-radius:4px} .sod_frm_mobile #sod_frm_escrow{margin:10px} .sod_frm_mobile #sod_frm_escrow h2{font-size:1.25em} .sod_frm_mobile #od_pay_sl h3{font-size:1.25em} .sod_frm_mobile #od_tot_price{background:none;font-weight:700} html.no-overflowscrolling #sc_coupon_frm, html.no-overflowscrolling #od_coupon_frm {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */ #sod_frm_pay_info {margin:0 0 10px} /* 네이버페이 */ .itemform-naverpay {margin:15px 0;clear:both} .cart-naverpay {margin-top:15px} /* theme.config.php 파일에서 G5_COMMUNITY_USE 를 false로 한 경우 1:1 문의와 게시판 css 처리 */ #bo_list table td, #fqalist table td {border-left:0;border-right:0} #bo_v_top .btn_admin, #bo_list .btn_admin {padding-top:0} /* 개인결제 */ .pesonal {background:#fff;border:1px solid #e3e5e8;margin-bottom:30px} .pesonal h2 {border-bottom:1px solid #e2e4e7;font-size:1.167em;padding:20px} .pesonal .tbl_frm01 {padding:20px 10px;margin:0} .pesonal th {text-align:left} .pesonal td {text-align:left;font-weight:bold} .pesonal td input {width:100%} .pesonal .half_tr {width:50%} #personal_pay {background:#fff;border:1px solid #e3e5e8} #personal_pay h2 {background:#fff;border-bottom:1px solid #e2e4e7;font-size:1.167em;padding:20px} #personal_pay input[type="radio"] {} #personal_pay .lb_icon {position:relative;display:inline-block;cursor:pointer;z-index:1} #personal_pay input[type="radio"]:checked+.lb_icon {z-index:3} #personal_pay legend {position:absolute;font-size:0;line-height:0;overflow:hidden} #personal_pay .KPAY {width:58px;background:url('../img/kpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px} #personal_pay .PAYNOW {width:75px;background:url('../img/paynow.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px} #personal_pay .PAYCO {width:75px;background:url('../img/payco.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px;border-radius:30px} #personal_pay .kakaopay_icon {width:60px;background:url('../img/kakao.png') no-repeat 50% 50% #ffeb00;overflow:hidden;text-indent:-999px;border-radius:30px} #personal_pay .pay_way {border-bottom:1px solid #e2e4e7} #personal_pay #display_pay_button {border:0} /* input, radio */ .selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden} .chk_box {position:relative} .chk_box input[type="checkbox"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden} .chk_box input[type="checkbox"] + label {position:relative;padding-left:22px;color:#676e70} .chk_box input[type="checkbox"] + label:hover{color:#2172f8} .chk_box input[type="checkbox"] + label:hover{color: inherit; cursor: pointer;} .chk_box input[type="checkbox"] + label span {position:absolute;/*top:2px;*/top:0; left:0;width:22px;height:22px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border:none;background:url('../img/chk_before.svg') no-repeat 50% 50% / cover; cursor:pointer;} .chk_box input[type="checkbox"]:checked + label {color:#000} .chk_box input[type="checkbox"]:checked + label span {background:url('../img/chk.svg') no-repeat 50% 50% / cover;border:none;} th.chk_box input[type="checkbox"] + label span,td.chk_box input[type="checkbox"] + label span{top: -2px;} .radio_box{position:relative;} .radio_box input[type="radio"] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden; cursor: pointer;} .radio_box input[type="radio"] + label {position:relative;padding-left:23px;display:inline-block;color:#676e70; cursor: pointer;} .radio_box input[type="radio"] + label span {position:absolute;top:50%; transform: translateY(-50%); left:0;width:18px;height:18px;display:block;background:#fff;border:1px solid #cdd6df;border-radius:50%} .radio_box input[type="radio"]:checked + label {color:var(--main-color);} .radio_box input[type="radio"]:checked + label span:before {/*width:7px;height:7px;*/width: 100%; height: 100%; scale: 0.55; background:var(--main-color);content:'';position:absolute;/*top:3px;left:3px;*/border-radius:50%} @media all and (max-width: 768px) { .chk_box input[type="checkbox"] + label span {width:18px;height:18px;} } /* ================================= reset ================================= */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ================================= // reset ================================= */ /* ================================= common ================================= */ /* 폰트사이즈 세팅 */ html{ font-size:16px; color:var(--b-color); } .hidden1440{} .visible1440{display:none;} .hidden1200{} .visible1200{display:none;} .hidden1024{} .visible1024{display:none;} .hidden768{} .visible768{display:none;} .hidden480{} .visible480{display:none;} .hide{display:none !important;} @media all and (max-width: 1440px) { html{ /* font-size:15px; */ } .hidden1440{display:none !important;} .visible1440{display:block;} } @media all and (max-width: 1200px) { .hidden1200{display:none !important;} .visible1200{display:block;} } @media all and (max-width: 1024px) { html{ font-size:15px; } .hidden1024{display:none !important;} .visible1024{display:block;} } @media all and (max-width: 768px) { html{ /* font-size:14px; */ font-size:15px; } .hidden768{display:none !important;} .visible768{display:block;} } @media all and (max-width: 570px) { html{ /* font-size:13px; */ } } @media all and (max-width: 480px) { .hidden480{display:none !important;} .visible480{display:block;} html{font-size: 13px;} } @media all and (max-width: 390px) { html{ font-size: 3.4vw; /* font-size: clamp(14px, 3.4vw, 15px); */ } } /* --------------------- */ input,textarea{color: var(--font-color--default); border-radius: var(--border-radius--default);} button, a, ::after, ::before{color: inherit; line-height: inherit;} address{font-style: normal;} input, select{font-size: 0.95rem; padding: 0 0.8rem;} .star { color: var(--main-color);} .frm_input { height: 2.625rem; font-size: 0.95rem; color: var(--font-color--default); margin-bottom: 0; border-radius: 0.3em; padding: 0 0.8rem; } .sch_word{color: var(--main-color);} /* media */ @media all and (max-width: 1440px) { /* .tbl_head03 td {padding-left: 0.625rem; padding-right: 0.625rem;} */ } @media all and (max-width: 768px) { } /* ================================= // common ================================= */ /* ================================= header ================================= */ :root { --primary-color: #333; /* 대분류 및 주요 텍스트 색상 */ --secondary-color: #555; /* 중분류, 소분류 텍스트 색상 */ --bg-primary: #fff; /* 기본 배경 */ --bg-hover: #f7f7f7; /* 마우스 오버 시 배경 */ --bg-active: #eaeaea; /* 활성화된 항목 배경 */ --border-color: #ddd; /* 구분선 색상 */ /* header 높이 */ --header-height:3.75rem; } @media all and (max-width: 768px) { :root{ --header-height:3.34rem; /* header 높이 */ } } #header{z-index: 1000; position: sticky; top: 0; left: 0; color: var(--font-color--default); background-color: #fff; /*border-bottom: 1px solid #d9d9d9;*/} #header>#header_container>div>.inner, #header>.m_header>.inner{position: relative; max-width: var(--content--max-width--default); width: 90%; margin: 0 auto;} #header_container{display: block;} #header a{transition: color 0.2s ease-in-out ;} .menu_list li a{color: inherit;} .menu_list{} .hd_sch_wr{} /* header_middle */ #header_middle{padding-top: 1.4rem;} #header_middle>.inner{display: flex; justify-content: space-between; align-items: center; } /* 로고 */ #logo{float: unset; padding: 0; flex: 1 0 0; max-width: 340px;} #logo a{display: inline-block;} #logo img{display: block; width: 200px;} /* 검색 */ .hd_sch_wr{float: unset; padding: 0; max-width: 630px; width: auto; flex: 1 0 auto; margin-left: 0;} #hd_sch form{position: relative; display: flex; justify-content: center; align-items: center; margin: 0 3em;} #hd_sch #sch_str{ float: unset; width: 100%; height: 3rem; padding: 0 3.4rem 0 1.6rem; display: flex; align-items: center; background: #fff; border: 2px solid var(--main-color); color:var(--font-color--default);border-radius:50px;} #hd_sch #sch_submit{position: absolute; right: 1rem; top: 50%; width: 2.5rem; height: 2.5rem; background-color: transparent; border-radius: 0; color: var(--main-color); font-size: 1rem;transform:translateY(-50%);} #hd_sch #sch_submit::before{content: ""; position: absolute; width: 1px; height: 0.7rem; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--main-color);} #hd_sch #sch_submit i{color: var(--main-color); transform: translateY(-0.04rem);} ::placeholder{font-size: 0.9rem;} /* 로그인 전 */ .hd_login>li.login, .hd_login>li.register{width: auto;} .hd_login>li.login a, .hd_login>li.register a{display: flex; justify-content: center; align-items: center; border: 0; color: var(--font-color--default); font-weight: 500; padding: 0;} /* .hd_login>li.register a{} */ /* 로그인 후 */ .hd_login{position: relative; top: 0; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex: 1 0 0; max-width: 340px;} .hd_login>li{width: 2.5rem;height: 2.5rem;} .hd_login>li a, .hd_login>li button{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0.95rem; color: var(--font-color--default); } .hd_login>li a img{width:22px;} .hd_login>li a svg{display:none;} .hd_login>li.shop_login{margin-top: 0; width: auto;} .btn_member_mn{min-width: unset; display: flex; justify-content: center; align-items: center; color: inherit;} .btn_member_mn_on{border: 0;} .btn_member_mn .profile_name{line-height: 1; max-width: 150px; font-weight: 500;} .btn_member_mn i{margin-left: 0.6em;} .member_mn { left: auto; right:0; transform: translateX(-50%); transform:none; width: max-content; background: #fff; z-index: 1500; border-radius: 20px; box-shadow:0 3px 6px rgba(0,0,0,.16); width:25rem; overflow:hidden; top:130%; border:none !important; } #ol_after{} #ol_after .member_modal{padding:1.4rem 2rem;padding-bottom:0 !important;} #ol_after .member_modal .member_info{display:flex;justify-content: space-between;align-items: flex-start;border-bottom:1px solid #ebebeb;padding-bottom:0.6rem;margin-bottom:1rem;} #ol_after .member_modal .welcome_message{font-family:'GmarketSans','Pretendard','맑은 고딕','San-serif' !important;font-size:1.1rem;letter-spacing:-0.6px; font-weight:700;line-height:1.5; flex: 1 0 auto;} #ol_after .member_modal .welcome_message strong{color:#0032c1;font-weight:700;font-family:inherit;} #ol_after .member_modal .welcome_message span{font-size:1.25em; vertical-align: bottom;font-family:inherit;line-height:1.3;} #ol_after .member_modal .member_info a{ font-size:0.8rem;display:inline-flex;align-items:flex-end; color:#707070;justify-content: flex-end; } #ol_after .member_modal .member_info a img{width:1rem;margin-right:0.3rem;} #ol_after .member_modal .member_info a span{border-bottom:1px solid #707070;} #ol_after .member_modal{} #ol_after .member_status{text-align:center;} #ol_after .member_status .unverified_message{color:#6B6B6B; font-size:0.8rem; letter-spacing:-0.2px;line-height:1.4;} #ol_after .member_benefits{display:flex; padding:0.5rem 0;width:100%;border:1px solid #ebebeb;margin:1.4rem 0;} #ol_after .member_benefits li{flex:1 1 0;border-right:1px solid #ebebeb;} #ol_after .member_benefits li:last-child{border-right:0 !important;} #ol_after .member_benefits li a{display:block; font-size:0.9rem; color:#222;line-height:1.5;} #ol_after .member_benefits li a strong{font-weight:700;} #ol_after .member_actions{width:100%;display:flex;} #ol_after .member_actions > div{width:50%;} #ol_after .member_actions .mypage_link{background:#0032c1;display:block;} #ol_after .member_actions .mypage_link a{color:#fff;} #ol_after .member_actions .logout_link{background:#F3F3F3; } #ol_after .member_actions .logout_link a{color:#A8A8A8;} #ol_after .member_actions > div a{display:block;height:100%;padding:1rem 0;text-align:center;} #ol_after_private a{font-size: 0.9rem; padding: 0.5em 0.9em; line-height: 1.6;} .hd_login .count{z-index: 1; top: unset; bottom: -0.2em; right: -0.2em; height: 1.1rem; background-color: var(--main-color); text-align: center; line-height: 1.3rem; width:1.3rem;height:1.3rem;vertical-align: middle;padding:0;} /* 메뉴 */ #header_menu{margin-top: 0.7rem;border-bottom:1px solid #eee; overflow-x: auto; overflow-y: clip;} #header_menu>.inner{padding: 1.2rem 0; display: flex; justify-content: center; align-items: center;padding-top:2.4rem;} #menu_open{position: absolute; left: 0;} #menu_open,#m_menu_open{position: absolute; left: 0; width: 2.5rem; height: 2.5rem; border: 0; background-color: transparent;} #menu_open::before, #menu_open::after, #menu_open i::after,#m_menu_open::before, #m_menu_open::after, #m_menu_open i::after{content: ''; position: absolute; left: 50%; transform: translate(-50%,-50%); width: 70%; height: 2px; background-color: #222;} #menu_open::before,#m_menu_open::before{top:calc( 50% - 8px);} #menu_open::after,#m_menu_open::after{ top:calc( 50% + 8px);} #menu_open i::before,#m_menu_open i::before{display: none;} #menu_open i::after,#m_menu_open i::after{top: 50%;} .menu_list{float: unset; width: 100%; max-width: 925px; display: flex; justify-content: space-around; align-items: center; margin-left: 1.5rem;} .menu_list::after{display: none;} .menu_list li{width: auto; padding: 0; line-height: 1; font-size: 1rem;/*margin: 0 2.2rem;*/} .menu_list li a{border-right: 0; padding:0.4rem 0; font-weight: 600;position:relative;} .menu_list li.event{color:var(--main-color);font-weight:700; position:relative;} .menu_list li.event span{ position: absolute; background: #0032c1; border-radius: .4em; color:#fff; bottom: 120%; left: 130%; white-space: nowrap; padding: 0.5em; font-size:0.7rem; transform:translateX(-50%); } .menu_list li.event span:after { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: 0.6em solid transparent; border-top-color: #0032c1; border-bottom: 0; border-left: 0; margin-left: -2em; margin-bottom: -4em; } .menu_list li a:after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px; background:#0032c1;} .menu_list li a:hover{color: var(--main-color);transition:0.2s;} .menu_list li a:hover:after{width:100%;transition:0.2s;} /* header_qnb */ #header_qnb{ display: flex; align-items: center; font-size: 0.95rem;} #header_qnb li{ color: var(--font-color--default); line-height: 1;} #header_qnb li a{ padding:0 1.3em;} #header_qnb li a:hover{color: var(--main-color); } /* nav */ .nav{z-index: 2000; opacity: 0; /*display: none;*/ position: fixed; top: 0; left: -100vw; min-width: 100vw; min-height: 100vh; background-color: rgba(0,0,0,0.7);} .nav.active{/*display: block;*/ left: 0; opacity: 1; transition:opacity 0.2s ease-in-out;} .nav .layer_inner{display: flex; flex-direction: column; z-index: 1; position: absolute; top: 0; left: 0; width: auto; /*min-height: 100vh;*/ height: 100%; background-color: #fff;} /* nav 상단 */ .nav_header{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; padding: 0.625rem 1rem; gap: 1.5rem; } .user_box{ flex: 1 1 auto; min-height: 4.875rem; display: flex; justify-content: space-between; align-items: stretch; padding: 0.625rem 1rem; border: 1px solid #d9d9d9; border-radius: 0.6em; background-color: #fafafa;} .user_box .member_info {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;} .user_box .member_info .welcome_message{font-family: 'GmarketSans', 'Pretendard', '맑은 고딕', 'San-serif' !important; font-size: 1.1rem; letter-spacing: -0.6px; font-weight: 700; line-height: 1.5; flex: 1 0 auto;} .user_box .member_info .welcome_message strong { color: #0032c1; font-weight: 700; font-family: inherit;} .user_box .member_info .welcome_message span , .user_box .register_text { font-size: 1.15em; vertical-align: bottom; font-family: inherit; line-height: 1.3;} #ol_after .member_info .member_status{text-align: left; font-size: 0.95rem;} #ol_after .member_info .unverified_message{font-size: 0.95rem;} .user_box_right {display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: flex-end;margin-left:3rem;} .user_box_right .btn_edit{order: 2;} .user_box_right .btn_edit a{ display: flex; align-items: center; gap: 0.2em;} .user_box_right .bottom{order: 1; font-size: 0.95rem; line-height: 1.4;} .user_box .user_menu, .user_box .m_user_menu{display: flex; align-items: center; font-size: 0.95rem; line-height: 1.4;} .user_box .user_menu li:not(:first-child), .user_box .m_user_menu li:not(:first-child){position: relative; margin-left: 0.625rem; padding-left: 0.625rem;} .user_box .user_menu li:not(:first-child)::before, .user_box .m_user_menu li:not(:first-child)::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 0.95rem; background-color: #d9d9d9;} .user_box .login, .user_box .m_login {font-size: 0.95rem; line-height: 1.4; font-weight: 800; color: var(--main-color);} .user_box .m_login, .user_box .m_user_menu{display: none;} .user_box .register_text{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: #999;} .user_box .register{font-size: 1.1em; font-weight: 600; margin: 0; color: inherit;} .user_box .register i{margin-left: 0.5rem; color: inherit;} .nav .btn_close{top: 0; right: 0; width: 3.125rem; height: 3.125rem; border: 0; flex-shrink: 0; font-size: 1.25em; border-radius: 0; display: block; z-index: 10; position: relative; width: 2rem; height: 2rem; background: url("/img/close_btn2.png") no-repeat center center /contain;} .m_member_mn{display: none;} /* 카테고리 */ #header_cate{flex: 1 1 100%; overflow-y: auto; overflow-x:hidden; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;} #category{height: 100%; display: block; position: relative; border: 0; box-shadow:none;} .category_wr{display: flex; align-items: stretch;min-height: 100%;} .category_wr .left{min-width:130px; width: 20%; flex-shrink: 0; background-color: #f7f7f7; border-right: 1px solid #d9d9d9;} .category_wr .right{width: calc(100% - 120px); background-color: #fff; padding-bottom: 1rem;} .category_wr li{display: block;} .category_wr a:hover, .category_wr a:hover{color: var(--main-color); cursor: pointer;} /* 대분류 (1뎁스) – 가로형 네비게이션 */ .category-1depth { border:0; width: 100%; } .category-1depth > li { min-height: 3.5rem; display: flex; align-items: center; cursor: pointer; transition: background-color 0.3s ease; border-bottom: 1px solid var(--border-color); } .category-1depth > li:hover,.category-1depth > li.active{ background-color: var(--bg-hover); } .category-1depth > li>a { text-decoration: none; font-size: 1rem; padding: 1rem 2rem; } .category-1depth > li:hover a,.category-1depth > li.active a{ font-weight:700; color: var(--main-color); } /* 중분류 (2뎁스) – 세로 목록 스타일 */ .category-2depth { border:0; width: 100%; } .category-2depth > li { padding: 0 1rem; display: flex; flex-direction: column; } .category-2depth > li:hover, .category-2depth > li.active { font-weight:600; cursor: pointer; } .category-2depth > li, .cat_2depth{min-height: 3.5rem;} .cat_2depth{width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0;} .category-2depth > li a { text-decoration: none; font-size: 1.13rem; font-weight:700; } .category-2depth .cat_2depth.active > a,.category-2depth .cat_2depth.active > a{ font-weight:700; color:var(--main-color); } .category-2depth > li.cat_all{ display: inline-flex; padding: 1rem; display: flex; align-items: flex-start; justify-content: center; } .category-2depth > li.cat_all:hover{cursor: default;} .category-2depth>li .cat_2depth.active + .category-3depth{border-top: 1px solid var(--border-color);} /* 소분류 (3뎁스) – 세로 목록 스타일 */ .category-3depth { width: 100%; padding:1rem 0 1rem 1rem; border-bottom: 0; line-height: 1.4; } .category-3depth > li:not(:last-child) { margin-bottom: 0.625rem; } .category-3depth > li a { text-decoration: none; color: inherit; font-size: 1rem; font-weight: 400; transition:color 0s; color:#777; } .category_wr .btn_toggle{font-size: 1.2rem; margin-right: 1rem; border:0; background:transparent; transition: all .3s ease-in-out;} .category_wr .cat_2depth.active .btn_toggle{transform: rotate(180deg);} /* nav 하단 게시판 버튼 */ .bottom_link{flex: 1 0 4rem; background-color: #f1f5ff; max-height: 4rem; } .bottom_link ul{display: flex; align-items: center; width: 100%; height: 100%;} .bottom_link ul li{flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1rem;font-weight:600;} .bottom_link ul li:not(:last-child){border-right: 1px solid #999;} .bottom_link ul li a:hover{font-weight: 600;} /* 모바일 헤더 */ #m_menu_open{display: none;} .m_util{display: none; gap: 0.625rem;} .m_util button, .m_util .shop_cart{width: 2rem; height: 2rem;} .m_util .shop_cart{position: relative;} .m_util .shop_cart a img{width:1.27rem;} .m_util .shop_cart a{display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0.95rem; color: var(--font-color--default);} .m_util .count{z-index: 1; position: absolute; top: unset; bottom: -0.2em; right: -0.2em; height: 1.1rem; background-color: var(--main-color); text-align: center; line-height: 1.3rem; width:1.3rem;height:1.3rem;vertical-align: middle;padding:0; color: #fff; border-radius: 50%;} /* 검색하기 */ .sch_open_btn{font-size: 1.47rem; border: 0; background-color: transparent; color: var(--main-color);} .sch_open_btn i{color:inherit;} .hd_sch_wr .btn_close{ position: absolute; top: 0; right: 0; width:50px; height: 50px; border: 0; background: none; font-size: 1.25em; border-radius: 0; display: none; } /* media */ @media all and (max-width: 1200px) { } @media all and (max-width: 1024px) { #header>#header_container>div>.inner{height: 100%; } .sch_layer_inner{width: 90%; position: relative; margin: 0 auto; padding-top: 50px;} #m_menu_open{display:block;} /* 검색하기 */ #header_middle{height: var(--header-height); padding-top: 0;} .hd_sch_wr{display: none; z-index: 10; position: fixed; top: 0; left: 0; max-width: unset; width: 100%; height: calc(var(--header-height) * 2.5); background-color: #fff; border-bottom: 1px solid #d9d9d9;} .hd_sch_wr.active{ display: block;} .hd_sch_wr .btn_close{display: block;} #hd_sch form{margin: 0;} .hd_login{display: none;} #menu_open{display: none;} #header_menu{margin-top: 0; height: var(--header-height);} #header_menu>.inner{padding: 1rem;} .menu_list{margin-left: 0; gap: 1.5rem;} #logo{flex: unset; margin: 0 auto; padding-top: 0.7em;} #logo img{width: auto; height: 1.67rem;} .m_util{display: flex; align-items: center; position: absolute; right: 0;} .menu_list li.event span{display:none;} } /* 반응형 고려 – 화면이 좁아지면 대분류를 세로형으로 전환 */ @media (max-width: 768px) { #header>#header_container #header_menu>.inner{width: auto; padding: 1rem 0 1rem 6%;} #header_menu>.inner .menu_list li:last-child{padding-right: 6%;} /* nav */ .nav .layer_inner{width: 100%;} .nav_header{gap: 0.8rem;} /* 카테고리 */ .category-1depth > li { min-height: 3rem; } .category-2depth > li, .cat_2depth{min-height: 3rem;} .category-2depth > li.cat_all{padding-top: 0; padding-bottom: 0;} .category-1depth > li > a{padding: 10px 15px;} /* nav 하단 게시판 버튼 */ .bottom_link{height: 2.8rem;} } @media (max-width: 480px) { /* nav 상단 */ .user_box{padding:0.525rem 0.8rem; flex-wrap:wrap; flex-direction: column-reverse;} .user_box .member_info .welcome_message{font-size: 1.1rem;} .user_box .member_info .welcome_message span{font-size: 1em; vertical-align: unset;} .user_box_left{padding-right: 6rem;} .user_box_right{flex-direction: row-reverse; position: relative;} .user_box_right .btn_edit{position: absolute; right: 0; top: 0;} .user_box .login, .user_box .user_menu{display: none;} .user_box .m_login, .user_box .m_user_menu{display: flex; margin-top: 0.8rem;} } /* ================================= // header ================================= */ /* ================================= main ================================= */ :root{ --quick-bottom : 9.667rem; } .quick{position: fixed; right: 2rem; bottom: 2rem; transition: bottom .3s ease-in-out;} .quick.bottom{/*bottom: 9.667rem;*/ bottom: calc(var(--quick-bottom) + 1.2rem);} .quick a{display: block; width: 5rem; height: 5rem; margin-top: 0.625rem; border-radius: 50%; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 6px 1px; } .quick .btn_kakao{ background: url("/img/quick_kakao.png") no-repeat center center /100%; } .quick .btn_admin{ background: url("/adm/img/menu-1-1.png") no-repeat center center /15px; background-color: #fff;} .btn_kakao{background-color:var(--sns-color--kakao) !important;} @media (max-width: 768px) { .quick{right: 1.4rem; bottom: 3.3rem; } .quick a{width: 4rem; height: 4rem;} } /* ================================= // main ================================= */ /* ================================= footer ================================= */ #footer{position: sticky; top: 100%; color: #fff; background-color: #222; font-size: 0.95rem; line-height: 1.4; font-weight: 300;} #footer>#footer_container>div>.inner{max-width: var(--content--max-width--default); width: 90%; margin: 0 auto;} #footer *{color: inherit; font-weight: inherit; font-size: inherit; line-height: inherit;} /* footer_top */ #footer_top{padding: 1.1em 0 1em; border-bottom: 1px solid #3d3d3d;} #footer_link{display: flex; gap: 1em;} #footer_link a{font-weight: 300; line-height:1; font-size: 0.95rem;} /* footer_middle */ #footer_middle{padding: 1.2em 0 1.8em; } #footer_middle>.inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;} /* footer_company */ #footer_company{flex: 1 0 auto; line-height: 1.8;} .footer_info p{display: flex; align-items: center; flex-wrap: wrap;} .footer_info b{ margin-right: 0.1rem; display: inline-block;} .footer_info b::after{content: " :"; line-height: inherit; display: inline-block; margin:-0.06rem 0 0 0.15rem;} .footer_info span{display: inline-block;} .footer_info span+span, .footer_info br[class^="visible"]+span{position: relative; margin-left: 0.4rem; padding-left: calc(0.5rem + 1px);} .footer_info span+span::before,.footer_info br[class^="visible"]+span::before{content: ''; width: 1px; height: 0.7rem; position: absolute; left:0; top: 50%; transform: translateY(-50%); background-color:#717171;} #copyright{margin-top: 1.7rem; flex:2 0 100%; font-size: 0.9rem; color: #999;} /* 인증마크 */ #footer .certification{flex: 1 0 0;} /* media */ @media all and (max-width: 1200px) { /* footer_company */ .footer_info br.visible1200+span{margin-left:0; padding-left:0;} .footer_info br.visible1200+span::before{display: none;} } @media all and (max-width: 1024px) { /* footer_middle */ #footer_middle>.inner{display: block;} /* footer_company */ .footer_info br.visible1024+span{margin-left:0; padding-left:0;} .footer_info br.visible1024+span::before{display: none;} /* 인증마크 */ #footer .certification{ margin: 1.5em 0;} } @media all and (max-width: 768px) { /* footer_company */ .footer_info br.visible768+span{ margin-left: 0; padding-left: 0;} .footer_info br.visible768+span::before{display: none;} } /* ================================= // footer ================================= */ /* ================================= index ================================= */ /* #wrapper{display: none;} */ #wrapper{min-width: unset; /*min-height: calc(100vh - 340px);*/} #container{min-width: unset; width: 100%; max-width:unset;} #container>div>.inner{width: 90%; max-width: var(--content--max-width--default); margin: 0 auto;} .inner{width: 90%; max-width: var(--content--max-width--default); margin: 0 auto;} /* 임시 root */ :root{ /* --border-radius--default : 0.3rem; */ } #container .shop-content.is_index{margin-left: 0; padding-bottom: 0;} /* #container .shop-content */ /* 메인 비주얼 */ #main_visual{margin-top:2rem;} #main_visual .swiper-wrapper{gap: 0.625rem; margin-left: -1.25rem;} #main_visual .swiper-slide{ max-width: var(--content--max-width--default); margin: 0 auto; border-radius: var(--border-radius--default); overflow: hidden;opacity:0.4;} #main_visual .swiper-slide.swiper-slide-active{opacity:1;} #main_visual .swiper-slide img{display: block; width: 100%;} #main_visual .inner{z-index: 1; position: absolute; width:100%; max-width: calc(var(--content--max-width--default) + (3% + 3rem) * 2); top: 50%; left: 50%; transform: translateX(-50%);} .main_visual-next, .main_visual-prev, .main_visual-pagination{z-index: 1;} #main_visual .main_visual-next, #main_visual .main_visual-prev{width: 3rem; height: 3rem; background: url("/img/main_visual_arrow.png") no-repeat center center /contain;} #main_visual .main_visual-next:hover, #main_visual .main_visual-prev:hover, #main_visual .swiper-button-disabled{opacity: 0.4;} #main_visual .main_visual-next::after,#main_visual .main_visual-prev::after{display: none;} #main_visual .main_visual-next{left:unset; right: 2%; transform: rotate(180deg);} #main_visual .main_visual-prev{left:2%; right: unset;} #main_visual .main_visual-pagination{width: 60%; padding: 1rem 1.1rem 0.6rem; left: 50%; transform: translateX(-50%); bottom: 0.8rem; font-size: 0.95rem; background: rgb(30 30 30 / 70%);border-radius: 5px;} .main_visual-pagination span{color: inherit;} .content_sec {margin-bottom: 0;overflow:hidden;} .content_sec h2{float: unset; text-align: center; display: block; font-size: 2rem; margin-bottom: 2rem; font-weight: 700;} .section_header_type2 h2{font-size: 1.4rem; text-align: left; font-weight: 700; margin-bottom: 1.25rem; } .section_header_type2.flexbox{margin-bottom: 1.25rem;} .section_header_type2.flexbox h2{margin-bottom: 0;} .content_sec .more_link{font-size: 0.95rem; line-height: 1; color: #999;} .content_sec .lt_more{color:#454545;font-size:1rem;word-breaK:keep-all;font-weight:600;width:auto;display:inline-flex;align-items:center;gap:0.4rem;position:relative;} .content_sec .lt_more:before{content:'';position:absolute;top:50%;left:0;transform:translate(-50%,-50%);background:#0032c10f;border-radius:50%;width:2rem;height:2rem;opacity:1;transition:0.3s;} .content_sec .lt_more:hover{color:#454545;} .content_sec .lt_more:hover:before{transform:translate(-50% , -50%);left:100%;} /*.content_sec .Swiper-container{overflow:visible;}*/ .content_sec .sct_li{padding:0;margin-bottom:0; margin-right:0;} .section_header_type2 .lt_more{right:1rem;} /* 상품 */ .smt{margin-right: -10px; margin-left: -10px;display:flex;gap:1rem;margin:0;} .smt .sct_li{width: auto; margin-bottom: 3.5rem; margin-right:0; padding: 0px;margin-bottom:0;} .list_show4 .sct_wrap .sct_li{width: calc(25% - (1rem * 3 / 4)); } .list_show5{background:#f9faff;padding:6rem 0;} .list_show5 .flexbox{justify-content: space-between;} .list_show5 .sct_wrap{width:70%;margin-bottom:0;} .list_show5 .sct_wrap .sct_li{width: 20%; } .list_show5.content_sec h2{text-align:left; line-height:1.4;} .list_show5 .lt_more{margin-left:1rem;margin-top:2rem;} .list_show5 .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:-2rem;} .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{background:var(--main-color);} .content_sec .swiper-button-prev, .content_sec .swiper-button-next{width: 2.8rem; height: 2.8rem; background: url("/img/main_visual_arrow.png") no-repeat center center /contain;filter:contrast(0.8);} .content_sec .swiper-button-prev::after, .content_sec .swiper-button-next::after{display: none;} .content_sec .swiper-button-next{left:unset; right: -4.5rem; transform: rotate(180deg);} .content_sec .swiper-button-prev{left:-4.5rem; right: unset;} .list_show5 .sct_img img{border-radius:var(--border-radius--default);} .list_show5 .Swiper-container{overflow:hidden;} .list_show6 .Swiper-container{overflow:hidden;} .smt_40{border: 0; padding: 0;} .progressbar-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; } .progressbar-item { position: relative; flex: 1; text-align: center; cursor:pointer; opacity:0.4; padding:1rem 0 0; } .progressbar-item.active{opacity:1;} .progressbar-title { position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); font-size: 0.85em; font-weight: 700; color: #fff; white-space: nowrap; display:none; } .progressbar-item:hover {opacity:1;transition:0.2s;} .progressbar-item:hover .progressbar-title{display:block;} .progressbar-item.active .progressbar-title{display:block;} .progressbar-line { background: rgba(255,255,255,0.6); height: 3px; width: 100%; position: relative; overflow: hidden; } .progressbar-fill { background: #fff; height: 100%; width: 0%; } .progressbar-fill.progress-anim { animation: progressBarAnim 5s linear forwards; } @keyframes progressBarAnim { from { width: 0%; } to { width: 100%; } } @media all and (max-width:768px) { #main_visual .main_visual-pagination{display:none;} .progressbar-title{display:none;} .progressbar-item.active .progressbar-title{display:none !important;} } @media all and (max-width:570px) { .list_show5 .Swiper-container{overflow:visible} } @media all and (max-width:480px) { .content_sec .lt_more img{height:10px;} } /* 상품 카테고리 */ /* .category_tab */ .tab li:hover{cursor: pointer;} .category_tab_menu{display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex-wrap: wrap; transition: gap .2s ease-in-out;} .category_tab li{display: flex; justify-content: center; align-items: center; font-size: 0.95rem; color: #999; height: 2.1rem; border: 1px solid #dbdbdb; padding:0.5rem 1.4rem; box-sizing: border-box; border-radius: 5px; font-weight: 500; transition: all .1s ease-in-out; } .category_tab li:hover, .category_tab li.on{ background: #333; color: #fff; border:1px solid #fff; } /* .tab_conents .smt{display: none;} */ /* .tab_conents .smt.show{display: block;} */ /*.sct_img{overflow: hidden; margin-bottom: 1.4rem; border: 1px solid #d9d9d9; border-radius:var(--border-radius--default) ; box-sizing: border-box; transition: all .3s ease-in-out;} .sct_img img{width: 100%; height: auto;} .sct_li{transition: width .3s ease-in-out;} .sct_li:hover .sct_img{box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 6px 1px; }*/ .sct_img{overflow: hidden; margin-bottom: 1.4rem;box-sizing: border-box; position:relative;} .sct_img img{width: 100%; height: auto;transition:0.3s;} .sct_li{transition: width .3s ease-in-out;border:1px solid #e4e4e4;padding:0 1rem;border-radius:var(--border-radius--default);overflow:hidden;} .sct_li:hover {box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 4px 1px; } .sct_li:hover .sct_img img{transform:scale(1.05);} .sct_li:hover .sct_id{text-decoration:underline;} /* 상품 아이템 버튼 */ .sct_wrap .sct_op_btn{position: absolute; display: flex; align-items: center; bottom: 0.4rem; right: 0.5rem; gap: 0.625rem;} .sct_wrap .sct_op_btn .sct_cart{display: block; background: url("/img/btn_cart.svg") no-repeat center center /52%; background-color: #fff;} .sct_wrap .sct_cart i{display: none;} .sct_wrap .sct_op_btn>button{position:unset; padding: 0; border: 1px solid #D9D9D9; background-color: #fff; height: 2.625rem; width: 2.625rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1); transition: all .3s ease-in-out;} .sct_wrap .sct_op_btn>button:hover{background-color: var(--color--grayf0);} .sct_wrap .sct_li.overlay .sct_cart{display: block !important;} .sct_wrap .sct_op_btn .btn_wish{display: block; background: url("/img/btn_wish.svg") no-repeat center center /52%; background-color: #fff;} .sct_wrap .btn_wish i {display: none;} .sct_cartop_wr{font-size: 0.95rem; padding: 0.8rem; z-index: 1;} .sct_cartop_wr > form {max-height: 100%; overflow-x: hidden; overflow-y: auto;} .sct_cartop_wr label{display: inline-block; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.6; margin: 0.625rem 0.8rem ;} .sct_cartop_wr .it_option{height: 2.5rem; border-radius: 0.3em; margin-bottom: 0.625rem;} .sct_cartop_wr .cartopt_cart_btn, .sct_cartop_wr .cartopt_close_btn{padding: 0.625rem 0.8rem; font-weight: 500; transition: all 0.3s ease-in-out; border-radius: 0.3em;} .sct_cartop_wr .cartopt_cart_btn{ color: #fff; background-color: var(--main-color); margin-bottom: 0.625rem;} .sct_cartop_wr .cartopt_close_btn{border: 1px solid #dcdcdc; color: var(--font-color--default);} /* 상품 텍스트 */ .sct_wrap .sct_txt {margin: 0; padding:0; border: 0;} .sct_wrap .sct_txt a{padding: 0.5rem 0 0.7rem; display: block;} .sct_maker{font-size: 0.85rem; margin-bottom: 0.4em; display: block; font-weight: 500; color: #999; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .sct_id{font-size: 1rem; line-height: 1.4; font-weight: 500; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;min-height:3rem;word-break:keep-all;} .sct_wrap .sct_cost{font-size: 1.2rem; font-weight: 700; margin: 0 0 0.6rem; text-align: left;padding-top:1rem;border-top:1px solid #ededed;} span.sit_icon{display: flex; justify-content: flex-start;margin-bottom:0.4rem;gap:0.2rem;flex-wrap:wrap;} /* 자주 구매한 상품 */ .freq_products_sec .owl-carousel{margin-left: 0;} .freq_products_sec .owl-carousel .owl-nav{position: absolute; top: 35%; left: 0; width: 100%; max-width: var(--content--max-width--default); left: 50%; transform: translateX(-50%);} .freq_products_sec .owl-carousel .owl-nav button.owl-prev, .freq_products_sec .owl-carousel .owl-nav button.owl-next{position: absolute; width: 3.75rem; height: 3.75rem; background: url("/img/main_visual_arrow.png") no-repeat center center /contain;} .freq_products_sec .owl-carousel .owl-nav button.owl-prev:hover, .freq_products_sec .owl-carousel .owl-nav button.owl-next:hover{opacity: 0.4;} .freq_products_sec .owl-carousel .owl-nav button.owl-prev{right:100% ; } .freq_products_sec .owl-carousel .owl-nav button.owl-next{left:100% ; transform: rotate(180deg);} .freq_products_sec .owl-carousel .owl-nav button span{display: none;} .freq_products_sec .smt .owl-item .sct_li{width: 100% !important; margin-right: 0; margin-left: 0;} /* 공지사항 & 고객센터 */ .center_flexbox {gap: 1.875rem;} .center_flexbox>section{flex:1 0 auto; width:calc(50% - (1.875rem / 2)) ; padding:2rem;} /* 공지사항 */ .notice_sec{border:1px solid #f5f5f5;border-radius:20px;box-shadow:2px 2px 8px 1px rgba(0, 0, 0, 0.1);} .notice_sec .section_header_type2{ padding:0 1.25rem; justify-content: space-between; align-items: baseline;} .notice_sec .notice{padding: 0.625rem 1.25rem 0; border-top: 1px solid #D9D9D9; box-sizing: border-box;} .notice_sec .notice h2{display: none;} .notice_sec .notice ul li{box-sizing: border-box; border-bottom: 0; display: flex; align-items: center; gap: 0.3rem; font-weight: 500; font-size: 1rem; } .notice_sec .notice li .new_icon{flex: 1 0 auto; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; font-size: 0.9rem; color:var(--sub-color--yellow); background-color: var(--main-color);} .notice_sec .notice li .new_icon + a{width: calc(100% - 1.5rem);} .notice_sec .notice ul li a{flex-shrink: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5em;} .notice_sec .notice ul li strong{width: 100%; font-weight: 500;} .notice_sec .notice ul li .datetime{flex-shrink:0; text-align: center; font-weight: 400; color: #999; font-size: 0.95rem;} /* 고객센터 */ .center_sec{ padding-left: 1.25rem; font-size: 1rem; box-sizing: border-box;background:#f5f5f5;border-radius:20px;} .center_info{line-height: 1.4; font-weight: 500; padding-top: 0.625rem;border-top: 1px solid #D9D9D9;} .center_info .tel{display: block; font-size: 2rem; font-weight: 700; margin-bottom: 0.5em; color:#0032c1;} .center_info .btn_wrap {margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid #aaa;} .center_info .btn_wrap ul{display: flex; align-items: center; gap: 0.625em;} .center_info .btn_wrap li{flex:1; height: 3.5rem;} .center_info .btn_wrap li a{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding-top: 0.15em; line-height: 1; color: #000;border-radius:5px;} .center_info .btn_wrap li .btn_faq{background-color:#0032c1;color:#fff;} .center_info .bankaccount{background:#0032c122;padding:1rem;border-radius:5px;margin-top:1rem;text-align:Center;} .center_info .btn_wrap li .btn_kakao{background-color:var(--sns-color--kakao);} /* 제휴사 */ .partners_sec{/*width: 100vw;*/ overflow: hidden; border-top: 1px solid #d9d9d9; display: flex; align-items: center;} .partners_sec .partners_slides{display: flex; align-items: center; flex-shrink: 0;width: auto;background:#0032c10f;} .partners_sec .rolling_slide{padding:1.8rem 0;padding-left: 2rem; display: flex; align-items: center; gap: 2rem; will-change: transform; animation-duration: 60s; animation-timing-function: linear; animation-iteration-count: infinite;} .partners_sec .rolling_slide:nth-child(1){animation-name: transX;} .partners_sec .rolling_slide:nth-child(2){animation-name: transX2;} .partners_sec .rolling_slide img{ max-height: 2.2vw; min-height: 1.8rem; display: block;} @keyframes transX { 0% { transform: translateX(0); } 50% { transform: translateX(-100%); } 50.01% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes transX2 { 0% { transition: translateX(0); } 100% { transform: translateX(-200%); } } /* */ @media all and (max-width:1280px) { /* 자주 구매한 상품 */ .freq_products_sec .sct_wrap{padding: 0 3rem;} .content_sec .swiper-button-next{left:unset; right: -1rem; transform: rotate(180deg);} .content_sec .swiper-button-prev{left:-1rem; right: unset;} } @media all and (max-width: 1024px) { /* 비주얼 */ #main_visual .main_visual-next, #main_visual .main_visual-prev{width: 2.5rem;} /* 상품 */ .smt .sct_li{margin-bottom: 2rem;} .smt.smt_10 .sct_li {width: 50%;} .list_show5 .sct_wrap {width: 60%;} /* 자주 구매한 상품 */ .freq_products_sec .sct_wrap{padding: 0 1rem;} .freq_products_sec .owl-carousel .owl-nav button.owl-prev, .freq_products_sec .owl-carousel .owl-nav button.owl-next{width: 2.5rem; height: 2.5rem;} /* 공지사항 & 고객센터 */ .center_flexbox{flex-direction: column;} .center_flexbox>section{width:100%;} } @media all and (max-width: 768px) { /* 비주얼 */ #main_visual .main_visual-next, #main_visual .main_visual-prev{width: 2rem;} /* 탭 */ .category_tab_menu{gap: 0.625rem;} .category_tab li{padding: 0 1.2rem; height: 2rem;} /* 상품 */ .sct_cartop_wr label{margin: 0.2rem 0.6rem;} /* 자주 구매하는 상품 */ .freq_products_sec .owl-carousel .owl-nav button.owl-prev, .freq_products_sec .owl-carousel .owl-nav button.owl-next{width: 2rem; height: 2rem;} /* 공지사항 */ .center_flexbox>section{padding: 1.4rem 1.6rem;} /* .center_flexbox .notice_sec{padding: 1rem;} */ .notice_sec .section_header_type2{padding:0 0.625rem;} .notice_sec .notice{padding-right:0.625rem; padding-left: 0.625rem;} .notice_sec .notice ul li a{gap: 0;} .notice_sec .notice li a{padding: 0.625rem 0;} } @media all and (max-width: 570px) { .list_show5 .flexbox{display:block;} .list_show5 .lt_more{margin-top:0.6rem;} .list_show5 .sct_wrap {width: 100%;margin-top:2rem;} } @media all and (max-width: 480px) { .category_tab li {padding: 0 0.8rem;} } /* ================================= // index ================================= */ /* ================================= sub ================================= */ select:hover{cursor: pointer;} /* ================================= // sub ================================= */ /* ================================= 상품리스트 ================================= */ #sct .sub_title{text-align: center; font-size: 3rem; font-weight: 800; margin-bottom: 2rem; line-height: 1.3;} /* location */ #sct_location{position: unset; float: unset; display: flex; align-items: center; font-size: 0.9rem; color:#999; line-height: 1.6; padding: 0;} #sct_location .go_home{display: block; height: 100%; min-width: 3rem; min-height: 1rem; font-size:inherit; padding: 0 1rem; color: inherit; line-height: inherit; background: url("/img/icon_home.svg") no-repeat center center/contain;} .shop_select_to_html {max-width: 30%;} .shop_select_to_html .category_title{display: block; padding: 0.5rem 0.8rem; font-size: inherit; color:#999; } .shop_select_to_html .category_title i{ margin-left: 0.6em;} .shop_select_to_html .category_title b{color: inherit; font: inherit;} #sct_location.is_list i{color: inherit; vertical-align:baseline; line-height: inherit;} #sct_location .go_home:hover, .shop_select_to_html:hover .category_title, .shop_select_to_html:hover .category_title i{color: var(--font-color--default);} #sct_location i.dividing-line{margin: 0 0.2em; color: #d9d9d9; font-size: 0.9rem;} .shop_select_to_html .menulist{left: 0; right: unset; opacity: 1; top: 100%; margin-top:0; padding: 0; border: 1px solid #d9d9d9;} /* .is_right .shop_select_to_html .menulist{right: unset; } */ .shop_select_to_html .option {line-height: inherit; min-height:auto;} .shop_select_to_html .option a{padding: 0.5rem 1rem ; color:#999;} .shop_select_to_html .option.selected, .shop_select_to_html .option.selected a{font-weight: inherit; color: var(--main-color);} .shop_select_to_html .option:hover, .shop_select_to_html .option.focus, .shop_select_to_html .option.selected.focus{ background-color: transparent;} .shop_select_to_html .option:hover a, .shop_select_to_html .option.focus a, .shop_select_to_html .option.selected.focus a{color: var(--main-color); background-color: var(--color--grayf0);} /* 상품 카테고리 */ .sct_ct{border: 0; padding: 0; margin:0 0 1.5rem; background-color: transparent;} #sct_ct_1 .sct_tab_menu {border-top:2px solid #999; padding: 0.8rem 1rem 0;} #sct_ct_1 li{ width: 16.6%; border: 0; padding: 0 0.625rem 0.8rem 0; font-weight: 600; font-size: 1rem; line-height: 1.6;} #sct_ct_1 .sct_tab_menu li a{position: relative; display: inline-block; width: auto; padding: 0; line-height: inherit; transition: all .3s ease-in-out;} #sct_ct_1 .sct_tab_menu li a:hover, #sct_ct_1 .sct_tab_menu li a.on{color: var(--main-color);} /* 상품 정렬방식 sort + count */ #sct_sortlst{display: flex; justify-content: space-between; align-items: center; border: 0; padding: 0 0.625rem; border-bottom: 1px solid #d9d9d9;} .sct_count{flex: 1 0 auto; font-size: 0.95rem; line-height: 1.6;} .total{font-weight: 700; color: var(--main-color); display: inline-block; margin: 0 0.1em;} #sct_sort{position: relative; float: unset; width: auto; padding: 0.625rem 0; font-size: 0.95rem;} #ssch_sort, #ssch_sort_all{float: right; width:auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem;} #sct_sort ul:after{display: none;} #sct_sort li{padding: 0; height: auto; line-height: 1;} #sct_sort li a{border: 0; color: #999; transition: color .3s ease-in-out;} #sct_sort li a:hover,#sct_sort li a.on{color: var(--font-color--default);} #ssch_sort li:hover:after, #ssch_sort_all li:hover:after{display: none;} .btn_sort{display: none; width: 110px; padding: 0.625rem 0.8em; border-radius: 0.3em; border: 1px solid #d9d9d9; background-color: transparent;} .btn_sort i{margin-left: 0.625rem;} /* 상품 */ .sct_wrap .sct{margin-top: 2.5rem;} .sct .sct_li{margin-bottom: 3.5rem;} .sct_wrap .sct_cost {letter-spacing: -0.02em;} .sct_wrap .sct_cost .sct_per{margin-right: 0.1em; font-weight: 400; color: var(--main-color);} .sct_wrap .sct_cost span{display: inline-block;} .sct_wrap .sct_cost .sct_cust_price{color:#aaa;font-size:0.8em;font-weight:300;text-decoration: line-through;margin-left:0.2em;} .sct_wrap .sct_cost .sct_dict{display: block; margin-top: 0.3064em; color: #999;} .sct_basic{font-size: 0.9rem; margin-bottom:0.375rem;} /* 품절 상품 */ .shop_icon_soldout{line-height: 1; font-size: 1.1rem;} .shop_icon_soldout .soldout_txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: unset; color: inherit;} /* 등록된 상품이 없습니다. */ .sct_noitem{padding: 6rem 0; font-size: 1.1rem; font-weight: 500;} /* 페이징 */ .pg_page, .pg_current{position: relative; /*width: 2em; height: 2rem; line-height: 2em;*/font-weight: 400; font-size: 0.95rem; border: 1px solid #d9d9d9; color: #999; background: transparent;} .pg_current,.pg_page:hover{ border: 1px solid var(--main-color); color: var(--main-color); background-color: transparent;} .pg_page:hover svg path{stroke:var(--main-color);} .pg_start svg, .pg_end svg, .pg_prev svg, .pg_next svg{position: absolute; top: 50%; height: 0.9rem;} .pg_start svg, .pg_prev svg{left: 20%; transform: translateY(-50%);} .pg_end svg, .pg_next svg{right: 20%; transform: translateY(-50%) rotate(180deg);} @media all and (min-width: 769px) { /* 상품 정렬방식 */ #ssch_sort, #ssch_sort_all{display: flex !important;} } @media all and (max-width: 1440px) { /* 상품 카테고리 */ #sct_ct_1 li{width: 25%;} } @media all and (max-width: 1024px) { /* 상품 카테고리 */ #sct_ct_1 li{width: 33.333%;} } @media all and (max-width: 768px) { /* location */ .shop_select_to_html .category_title {display: flex; justify-content: space-between; align-items: center;} #sct_location .go_home{min-width: 2rem; display: none;} #sct_location .go_home+.dividing-line{display: none;} /* 상품 카테고리 */ #sct_ct_1{margin-bottom: 0;} #sct_ct_1 .sct_tab_menu{padding-left: 0.625rem; padding-right: 0.625rem;} #sct_ct_1 li{width: 50%; font-size: 0.95rem;} /* 상품 정렬방식 */ #sct_sortlst{padding: 0.625rem;} #sct_sort{padding: 0;} .btn_sort{display: flex; justify-content: space-between; align-items: center;} #ssch_sort{display: none; z-index: 1; float: unset; position: absolute; top: calc(100% + 0.625rem); right: 0; gap: 0; flex-wrap: wrap; width: 100%; border-radius: 5px; background-color:#fff; border: 1px solid #d9d9d9; box-shadow: 1px 2px 5px 0px rgb(0 0 0 / 14%); transition: all .2s ease-in-out;} #ssch_sort li{float: unset; width: 100%; flex: 1 0 100%;} #ssch_sort li a{padding: 0.5rem 1rem;} /* 페이징 */ .pg_page, .pg_current{font-size: 1rem;} } /* ================================= // 상품리스트 ================================= */ /* ================================= 상품 상세 ================================= */ /* location */ #sct_location.view_location{display: flex;} /* 상단 */ #sit_ov_from{border: 0;} #sit_ov_wrap{width: 100%; padding: 1.875rem 0 1.25rem; display: flex; gap: 2rem; align-items: flex-start; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;} #sit_ov_wrap:after{display: none;} /* 상단 상품 이미지 슬라이드 */ #sit_pvi{float: unset; flex: 1 0 45%; line-height: 1.6;max-width:600px;} #sit_pvi_big{overflow: hidden; float: unset; border: 1px solid #d9d9d9; border-radius: var(--border-radius--default); box-sizing: border-box;} #sit_pvi_big img{width: 100%; aspect-ratio: 1 / 1; object-fit: contain;} #sit_pvi_thumb{float: unset; display: flex; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; padding-right: calc(0.625rem + 2.667rem);} #sit_pvi_thumb li{overflow: hidden; width:calc(20% - 0.625rem); max-width: 72px; border: 1px solid #d9d9d9; border-radius:0.7em; box-sizing: border-box; margin: 0 0.625rem 0.625rem 0; flex-shrink: 0;} /* #sit_pvi_thumb li:nth-child(4n + 4){margin-right: 0;} */ #sit_pvi_thumb li:hover{} #sit_pvi_thumb img{border:0; width: 100%; display: block; height: auto;} #sit_pvi_thumb img:hover{border: 0;} #sit_pvi_big #popup_item_image{width: 2.667rem; height: 2.667rem; bottom: 0.625rem; transform: translateY(0); /* top: calc(100% - 2.667rem - 1.25rem); bottom: 0.625rem; transform: translateY(-50%);*/ border:1px solid #d9d9d9; border-radius: 50%; } /* 상단 상품 상세 텍스트 */ #sit_ov{flex: 1 1 auto; width: auto; padding: 1.25rem 0 0;} #sit_title{font-size: 1.875rem; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.4;} #sit_desc{font-size: 1rem; color: #999; margin-bottom: 1.25rem; line-height: 1.4;} .sit_info{border: 0; margin: 0; padding: 0;} .sit_ov_tbl th{font-weight: 600;} .sit_ov_tbl th,.sit_ov_tbl td{padding: 0.5625em 0; font-size: 1rem; line-height: inherit;} .sit_info .tr_price{border-bottom: 0;} .sit_info .tr_price th, .sit_info .tr_price td{padding: 0.5625em 0; vertical-align: middle;} /* .sit_ov_tbl td{padding-left: 0.625rem;} */ .sit_ov_tbl td strong{color: inherit; display: block; font-size: 1.875rem; font-weight: 600; line-height: inherit;} .sit_ov_tbl td strong .currency{font-size: 1.25rem;} .currency{display: inline-block; line-height: inherit; font: inherit; color: inherit;} .sit_info .tr_cust_price th, .sit_info .tr_cust_price td{border-bottom: 1px solid #d9d9d9; padding-bottom: 1.125em;} .sit_info .tr_cust_price + tr th , .sit_info .tr_cust_price + tr td{padding-top: 1.125em;} /* 선택 옵션 */ .sit_option{margin: 0; padding: 0.5625em 0; font-size: 1rem; line-height: 1.6;} #sit_ov h3{font-size: 1rem; font-weight: 600; margin: 0 0 10px;} .get_item_options, .get_item_supply{display: flex; align-items: flex-start; } .sit_option label, .get_item_options label, .get_item_supply label{width: 140px; line-height: 2.625rem; font-weight: 500; font-size: 0.95rem; margin-bottom: 0;} .sit_option label+span, .get_item_options label+span, .get_item_supply label+span{flex: 1 0 0;} .sit_option select, .get_item_options select, .get_item_supply select{height:2.625rem; font-size: 0.95rem; color: var(--font-color--default); margin-bottom:0; border-radius: 0.3em; padding: 0 0.8rem; background-color: #fff;} .get_item_options+.get_item_options{margin-top: 0.625rem;} .get_item_supply+.get_item_supply{margin-top: 0.625rem;} /* 선택된 옵션 */ #sit_sel_option, .sit_sel_option{ line-height: 1.6;} #sit_sel_option h3, .sit_sel_option h3{display: none;} #sit_opt_added li, .sit_opt_added li{ padding:0.625rem 2rem 0.8rem 0.9rem; margin: 0.5625em 0 0; border: 1px solid #d9d9d9; background-color: #fff; line-height: 1.6; } #sit_ov #sit_opt_added li:first-child, .sit_opt_added li:first-child{margin-top: 1.6875em;} #sit_ov #sit_opt_added li:first-child::before, .sit_opt_added li:first-child::before{content: ''; position: absolute; top: -1.25em; left: 0; width: 100%; height: 1px; display: block; border-top: 1px solid #d9d9d9;} #sit_opt_added li .opt_name, .sit_opt_added li .opt_name{margin-bottom: 0.625rem; font-size:1.125rem; font-weight: 500; line-height: inherit;} #sit_opt_added li .opt_name span, .sit_opt_added li .opt_name span{line-height: inherit;} #sit_opt_added button.sit_opt_del, .sit_opt_added button.sit_opt_del{top: 0; right: 0; border:0; border-radius: 0; font-size: 0.95rem; text-align: center;} #sit_opt_added button.sit_opt_del:hover, .sit_opt_added button.sit_opt_del:hover{background-color: #f3f3f3;} #sit_opt_added .num_input, .sit_opt_added .num_input{/*width: 3.125rem;*/width: 5rem; height: 2rem; margin: 0 0.2em; font-size: 0.95rem; border: 1px solid #d9d9d9;} #sit_opt_added li .opt_count,.sit_opt_added li .opt_count{overflow: hidden;} #sit_opt_added button, .sit_opt_added button{width: 2rem; height: 2rem; font-size: 0.6rem; border-radius: 50%; border: 1px solid #d9d9d9;} #sit_opt_added button.sit_qty_minus{} #sit_opt_added button.sit_qty_plus{} #sit_opt_added .sit_opt_prc, .sit_opt_added .sit_opt_prc{display: none;} #sit_opt_added .sit_prc, .sit_opt_added .sit_prc{ display: block; float: right; font-size: 1.25rem; font-weight: 500; vertical-align: bottom; line-height: 2rem;} /* 총 금액 */ #sit_tot_price, .sit_tot_price{display: flex; justify-content: space-between; align-items: center; /*padding: 1.25em 0 1em;*/ line-height: inherit; font-size: 1rem; color: var(--main-color);} #sit_tot_price:after, .sit_tot_price:after{display: none;} #sit_tot_price>span , .sit_tot_price>span{display: block; float: unset; font-weight: 700; padding: 1.25em 0 1em; color: var(--font-color--default);} #sit_tot_price strong, .sit_tot_price strong{font-size: 1.5625rem; font-weight: 700; color: var(--main-color) ; letter-spacing: -0.02em;} #sit_tot_price .currenc, .sit_tot_price .currency{float: unset; font-size: 0.8em;} #sit_tot_price span{float: unset;} /* 상단 상세 버튼 */ #sit_ov_btn, .sit_order_btn {display: flex; align-items: center; gap: 0.375rem; margin-top:0.375rem;} /* #sit_ov_btn::after, .sit_order_btn::after{display: none;} */ /* #sit_ov_btn button{border-radius: 0; font-weight: 500; font-size: 1rem; } */ #sit_ov_btn button, #sit_ov_btn a, .sit_order_btn button, .sit_order_btn a, #sit_btn_alm{display: flex; justify-content: center; align-items: center; flex: 1 0 auto; float: unset; width: auto; height: 3.625rem; margin: 0; border-radius: 0; font-weight: 500; font-size: 1rem; transition: all 0.3s ease-in-out;} .sit_btn_cart, .sit_btn_wish{border:1px solid #d9d9d9;} .sit_btn_cart:hover,.sit_btn_wish:hover{background-color: var(--color--grayf0);} .sit_btn_buy{border: 1px solid var(--main-color); background-color: var(--main-color);} .sit_btn_buy:hover{border-color: #032483; background-color: #032483;} .sit_btn_wish{max-width: 3.625rem; width: 3.625rem; background: url("/img/btn_wish.svg") no-repeat center center /52%;} .sit_btn_wish i{display: none;} /* 품절 */ #sit_ov_soldout{font-weight: 500; font-size: 0.95rem; background:transparent; text-align: left; margin: 1.5rem 0; padding:0; line-height: 1.6;} /* 이전/다음 상품 버튼 */ #sit_siblings{border-bottom: 1px solid #d9d9d9;} #sit_siblings a{font-size: 0.9rem; margin: 0; font-weight: 500;} #sit_siblings a:hover{color: var(--font-color--default); transition: all .3s ease-in-out;} #sit_siblings a#siblings_next,#sit_siblings a#siblings_prev{ padding:0.3rem 1rem; } #sit_siblings a#siblings_next:after, #sit_siblings a#siblings_prev:after{display: none;} #sit_siblings a .fa-angle-right{margin-left: 0.6em; color: inherit;} #sit_siblings a .fa-angle-left{margin-right: 0.6em; color: inherit;} /* 하단 상세 */ #sit_info{width: 100%; margin-top: 2rem; margin-bottom: 0; padding-bottom: 4.625rem; border: 0; border-top: 2px solid #999; border-bottom: 1px solid #d9d9d9; } /*.info_toggle{max-height: 500px; overflow: hidden; }*/ .btn_info_toggle{position: absolute; bottom: 1rem; width: 100%; height: 3.625rem; font-size: 1rem; text-align: center; font-weight: 500; border-radius: 0; color:#222; border: 1px solid #d9d9d9; background-color: #fff;} #sit_inf_explan{margin-bottom: 2rem;} #sit_inf_open th, #sit_inf_open td{padding: 0.625rem 0.8rem; font-size: 0.95rem;} #sit_inf_open th {width: 30%; background: #4d4d4d; color: #fff; font-weight: 500; border-top: 0; letter-spacing: -0.05em; /* font-size: 1rem; */ border-bottom: 1px solid #ccd2d9; } #sit_inf_open td{border-bottom: 1px solid #ccd2d9;} /* 탭 */ #sit_tab{width: 100%; } #sit_tab .tab_tit{display: flex; align-items: center; font-size: 1rem; padding: 0;} #sit_tab .tab_tit li{float: unset; flex: 1 0 auto;} #sit_tab .tab_tit li button{padding: 0.4rem 0; font-size: 1rem; font-weight: 500; position: relative;} #sit_tab .tab_tit li .selected{font-weight: 600; color: var(--main-color);} #sit_tab .tab_tit li .selected::before{content: ''; position: absolute; bottom: 100%; left: 0; width: 100%; height: 2px; background-color: var(--main-color);} #sit_tab .tab_tit li .selected:after{height: 1px; bottom: -1px; background-color: var(--main-color);} /* 탭 콘텐츠 */ #sit_tab .tab_con{font-size: 0.95rem; padding: 0;} #sit_tab .tab_con>li{padding: 1.5rem 0; margin: 0;} #sit_tab .tab_con>li div *{word-break: break-all;} #sit_tab .tab_con>li #sit_inf_explan table{margin:0 auto !important;width:100%;} /* 관련 상품 */ #sit_rel{margin-top: 2rem; padding: 1.2rem 1.875rem 1.875rem; border: 1px solid #d9d9d9; border-top:2px solid #999;} #sit_rel h2{font-weight: 600; font-size:1.375rem; text-align: left; line-height: 2.75rem; margin-bottom: 1.25rem;} #sit_rel .swiper-btn-wrap{position: absolute; top: 1.2rem; right: 1.875rem; height: 2.75rem; display: flex; align-items: center; flex-direction: row-reverse; gap: 0.5em;} #sit_rel .swiper-button-prev, #sit_rel .swiper-button-next{position: unset; border: 1px solid #d9d9d9; border-radius: 50%; width: 2.75rem; height: 2.75rem; margin: 0; background: url("/img/main_visual_arrow.png") no-repeat center center /contain;} #sit_rel .swiper-button-next:after, #sit_rel .swiper-button-prev:after{display: none;} #sit_rel .swiper-button-prev:hover, #sit_rel .swiper-button-next:hover, #sit_rel .swiper-button-prev.disabled, #sit_rel .swiper-button-next.disabled{opacity: 0.4;} .disabled{cursor: default !important;} #sit_rel .swiper-button-next{ transform: rotate(180deg);} #sit_rel .bx-wrapper {max-width:unset !important;} .bx-wrapper, .bx-viewport{font-size: 1rem;} .sct_cost{text-align: right;} .scr_10 .sct_txt{ padding: 0.5rem 0 0.7rem; margin: 0;} /* 품절 */ .empty_table{width: 100%; font-size: 0.95rem; padding-right: 0.8rem !important; padding-left: 0.8rem !important;} #sod_ws .empty_table{width: 100%; } /* 모바일 - 하단 고정 구매하기 팝업 */ #sit_buy {display:none;position:fixed;bottom:0;left:0;width:100%;background:#fafafa;z-index:600; -webkit-box-shadow:0 0 9px rgba(0,0,0,0.2); -moz-box-shadow :0 0 9px rgba(0,0,0,0.2); box-shadow:0 0 6px rgba(0,0,0,0.2); border-top: 1px solid #d9d9d9;} .sit_buy_inner{padding: 0.625rem 1rem 1rem;} #sit_buy .sl_option {max-height:240px;overflow-y:auto;padding:10px} #sit_buy h3 {margin-bottom:10px} #sit_buy .btn_toggle {position:relative;top:0;left:0;width:100%;height:2.667rem; border:0; border-radius:0; background-color: transparent;} /* #sit_buy .btn_toggle:hover{background-color: var(--color--grayf0);} */ #sit_buy .btn_toggle.open i{transform: rotate(179deg);} .btn_cart_op {width:100%;text-align:center;font-weight:bold} .btn_option_wr {display: none; position:fixed;bottom:0;left:0;width:100%;padding:1rem;background:#fff;border-top:1px solid #999;z-index:88; -webkit-box-shadow:0 0 9px rgba(0,0,0,0.2); -moz-box-shadow:0 0 9px rgba(0,0,0,0.2); box-shadow:0 0 6px rgba(0,0,0,0.2)} .btn_option_wr .btn_cart_op {width: 100%; height: 3.625rem; border-radius: 0; font-weight: 500; font-size: 1rem; transition: all 0.3s ease-in-out;} #sit_buy #sit_ov_btn{margin-top: 0;} #sit_ov_btn:after{display: none;} .sit_side_option {padding: 0.625rem 0; border-bottom: 0;} .sit_op_sl , .sit_side_option {width:100%;border-collapse:collapse} .sit_op_sl th, .sit_side_option th {font-weight:normal;text-align:left;padding:0 0 0 10px} .sit_op_sl td, .sit_side_option td {text-align:left;padding:9px 10px 9px 0} .it_supply{} .sit_sel_btn {position:relative;top:-15px;right:-2px} /* 선택옵션용 추가 버튼 */ .sit_order_btn .sit_btn_cart{margin-bottom: 0;} #sit_buy #sit_ov_soldout{margin: 0; flex: 1;} #sit_buy .sit_sel_option{height: auto;} /* #sit_buy .sit_buy_con{ height: auto;} */ #sit_buy .sit_buy_options{overflow: auto; height: auto; max-height: 50vh;} #sit_buy .sum_section{padding: 0; } @media all and (max-width: 1024px) { /* 상품 상세 상단 */ #sit_ov_wrap{gap: 1.5rem;} /* 상단 상품 이미지 슬라이드 */ /* #sit_pvi{flex-basis: 50%;} */ #sit_pvi_thumb{padding-right: 0;} #sit_pvi_big #popup_item_image{display: none;} /* 상단 상품 상세 텍스트 */ #sit_title{font-size: 1.625rem; margin-bottom: 1rem;} #sit_desc{margin-bottom: 0.625rem;} .sit_ov_tbl td strong{font-size: 1.467rem;} .sit_info .grid_3{width: 120px;} .sit_ov_tbl td, .sit_info .tr_price td{padding-left: 0.625rem;} /* 선택된 옵션 */ #sit_opt_added li .opt_name{font-size: 1.1rem;} /* 상단 상세 버튼 */ #sit_ov_btn button, .sit_sel_btn button{width: auto;} /* 선택 옵션 */ .sit_option label, .get_item_options label, .get_item_supply label{width: 120px;} } @media all and (max-width: 768px) { #container .shop-content.is_item{padding-top: 1rem;} /* 상품 상세 상단 */ #sit_ov_wrap{flex-direction: column;} /* 상단 상품 이미지 슬라이드 */ #sit_pvi{flex-basis: 100%;} #sit_ov{padding-top: 0; flex-basis: 100%; width: 100%;} /* 상단 상품 상세 텍스트 */ #sit_title{font-size: 1.4rem;} .sit_ov_tbl td strong{font-size: 1.267rem;} /* 하단 상세 */ #sit_inf_open th, #sit_inf_open td { display: block; width: 100%; } /* 관련 상품 */ #sit_rel{padding: 1.2rem;} /* 모바일 - 하단 고정 구매하기 팝업 */ #sit_buy {display:block;} .sit_buy_con{display: none;} .btn_option_wr{display: block;} } @media all and (max-width: 390px) { #sit_pvi_thumb li{max-width: 70px; flex: 1; aspect-ratio: 1 / 1;} } /* ================================= // 상품 상세 ================================= */ /* ================================= 상품 상세 - 새창 팝업 ================================= */ /* 새창 팝업 공통 */ .new_win{padding-bottom: 2rem;} .new_win .win_btn {font-size: 0.9rem;} .new_win .btn_close{height: 2.813rem;} /* 상품 상세 이미지 */ #sit_pvi_nwbig img{max-width: 520px; height: auto;} /* ================================= // 상품 상세 - 새창 팝업 ================================= */ /* ================================= 장바구니 ================================= */ #sod_bsk_list .tbl_head03{width:100%;} #sod_bsk_list .cart_right{display:inline-block;width:30%;vertical-align: top;position:sticky;top:200px;right:0;float:right;z-index:10;} #sod_bsk_list .cart_right #sod_bsk_total{font-size:1rem;background:#fafafa;} #sod_bsk_list .cart_right #sod_bsk_total li{margin-bottom:1.2rem;padding:0 0.4rem;font-size:inherit;} #sod_bsk_list .cart_right #sod_bsk_total li:last-child{margin-bottom:0 !important;} #sod_bsk_list .cart_right #sod_bsk_total li span{font-weight:700;} #sod_bsk_list .cart_right #sod_bsk_total li.dvr_price *{font-weight:400;color:#999;font-size:0.9em;} #sod_bsk_list .cart_right #sod_bsk_total li strong{font-weight:300;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_num{font-size:1.2em;font-weight:700;border-bottom:1px solid #999;padding-bottom:1.2rem;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_num strong{color:#0032c1;font-size:1.4em;font-weight:700;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_cnt{padding-top:1rem; border-top:1px solid #999;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_cnt span,#sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_cnt strong{font-size:1.2em;font-weight:700;} #sod_bsk_list .cart_right #sod_bsk_total .sod_bsk_pt *{color:#777;font-weight:400;} #sod_bsk_act{display:flex;gap:5px;} #sod_bsk_act .btn01{width:50%;} #sod_bsk_act .btn_submit{width:50%;} .tbl_cart{margin-bottom:3rem;} #sod_bsk .page_title_box{margin-bottom:1rem;} #sod_bsk .tbl_wrap + .page_title_box{margin-top: 2rem;} #sod_bsk .page_sub_title{margin-bottom:0 !important;} #sod_bsk .render_cart_table{width:calc(100% - 30% - 20px);display:inline-block;} /* 장바구니 선택사항수정 */ #mod_option_frm #sit_tot_price{display: flex; float: unset; font-weight: 500;} #mod_option_frm .btn_confirm{float: unset; display: flex; justify-content: center; background-color: transparent;} /* 선택 옵션 */ .option_wr { padding-bottom: 0.5625em;} .option_wr:not(:nth-of-type(1)) {padding-top: 0.5625em;} .get_item_options+.get_item_options{margin-top: 0.625rem;} .get_item_supply+.get_item_supply{margin-top: 0.625rem;} .option_wr label{margin: 0;} .option_wr h3{font-weight: 600;} .option_wr + #sit_sel_option .sit_opt_list:first-child::before {content: ''; border-top: 1px solid #d9d9d9;} .option_wr .get_item_options, .option_wr .get_item_supply{margin-bottom:0;} .option_wr + #sit_sel_option #sit_opt_added li:first-child{margin-top: 1.6875em;} .option_wr + #sit_sel_option #sit_opt_added li:first-child::before{content: ''; position: absolute; top: -1.25em; left: 0; width: 100%; height: 1px; display: block; border-top: 1px solid #d9d9d9;} /* 주문합계 */ #sod_bsk_list .cart_right #sod_bsk_total{padding: 2.375rem 1.875rem 1.875rem;} /* #sod_bsk_list .cart_right #sod_bsk_act{justify-content: center;} */ #sod_bsk_list .cart_right .sod_bsk_inner{width: 100%;} /* 모바일 - 장바구니 리스트 */ .m_sod_bsk_list{display: none;} .m_sod_bsk_list .sod_list + .page_title_box{margin-top: 2rem;} /* 모바일 - (장바구니, 주문서 공통) */ .m_sod_bsk_list #sod_chk {font-size: 1rem;} .m_sod_bsk_list #sod_chk input[type="checkbox"] + label{display: flex; padding: 0.625rem; align-items: center; line-height: 1.6; background: #ececec;} .m_sod_bsk_list #sod_chk input[type="checkbox"] + label span{position: relative; margin-right: 0.5rem;} .m_sod_bsk_list .sod_list .sod_li { padding: 1.2rem 0 0.625rem; border-bottom:1px solid #ccd2d9;} .m_sod_bsk_list .sod_list .li_name {font-size:1.1rem; line-height: 1.4;} .m_sod_bsk_list .sod_list .li_op_wr {position:relative;padding:0 1rem 0 calc(22px + 1rem + 0.5rem);min-height:80px} .m_sod_bsk_list .sod_list .li_op_wr .chk_box {position:absolute;top:2px; left:0.625rem} .m_sod_bsk_list .sod_list .total_img{float: left; margin-right: 0.8rem; margin-bottom: 0.625rem;} .m_sod_bsk_list .sod_list .li_prqty {padding:0.625rem 0;border-top:1px solid #f6f6f6; display: flex; align-items: center;} .m_sod_bsk_list .sod_list .li_prqty_sp {line-height:1.4; flex: 1; display: flex; justify-content: space-between; padding: 0 1rem; font-size: 0.95rem;} .m_sod_bsk_list .sod_list .li_prqty_sp:not(:last-child){border-right:1px solid #f6f6f6;} .m_sod_bsk_list .sod_list .li_prqty_sp span {font-weight: 600;} .m_sod_bsk_list .sod_list .total_price { text-align:right; padding:0.625rem 1rem; line-height:1.4; background:#fafafa;} .m_sod_bsk_list .sod_list .total_price span {float:left; font-size: 1rem; font-weight: 600;} .m_sod_bsk_list .sod_opt {padding-left: calc(22px + 0.625rem + 0.5rem); margin: 0.625rem 0; font-size: 0.9rem;} .m_sod_bsk_list .sod_opt li {font-size: 0.9rem;} .m_sod_bsk_list .sod_option_btn .mod_options{margin-top: 0.625rem; font-size: 0.9rem;} /* .group_title{margin-top: 2rem; font-size: 1.3rem; font-weight: 700; border-bottom: 1px solid #ddd; padding-bottom: 0.6rem;} */ /* media */ @media all and (max-width: 1024px) { /* 장바구니 리스트 */ #sod_bsk_list .tbl_head03{width: 100%;} /* 주문합계 */ #sod_bsk_list .cart_right{width: 100%; margin-top: 1rem;} /* 장바구니 리스트 */ #sod_bsk_list .tbl_head03{display: none;} .m_sod_bsk_list{display: block;} #sod_bsk_list .cart_right{position: unset; float: unset;} #sod_bsk_list .cart_right #sod_bsk_total{margin-bottom: 0;} /* 모바일 하단 고정 주문하기 */ #sod_bsk_act {position:fixed;bottom:0;left:0;width:100%;background:#fafafa;z-index:1000; -webkit-box-shadow:0 0 9px rgba(0,0,0,0.2); -moz-box-shadow :0 0 9px rgba(0,0,0,0.2); box-shadow:0 0 6px rgba(0,0,0,0.2); border-top: 1px solid #d9d9d9; margin-bottom: 0;} .sod_bsk_inner{display: flex; align-items: center; padding: 0.625rem 1rem 1rem;} } @media all and (max-width: 768px) { .m_sod_bsk_list .sod_list .li_prqty {flex-direction: column; align-items: stretch; gap: 0.4rem;} .m_sod_bsk_list .sod_list .li_prqty_sp{} .m_sod_bsk_list .sod_list .li_prqty_sp:not(:last-child){border: 0;} } /* ================================= // 장바구니 ================================= */ /* ================================= 주문서 작성 ================================= */ /* 공통 */ #sod_frm section h2, #sod_fin .sod_left section h3 { background: #4d4d4d; color: #fff; font-weight: 600; border-top: 0; letter-spacing: -0.05em; font-size: 1.3em; padding: 1.25rem 20px; border-bottom:0; } #od_name, #od_hp{min-width: 140px;} /* 주문 항목 */ /* 주문하시는 분 */ .sod_left{width: calc(70% - 20px);} #sod_frm section .tbl_wrap{border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9;} #sod_frm_orderer, #sod_frm_taker{border:0; border-bottom: 1px solid #d9d9d9;} #sod_frm div.tbl_frm01, #sod_frm_taker div.tbl_frm01{padding: 0 0 1rem !important; margin-bottom: 0;} #sod_frm .tbl_frm01 th, #sod_frm .tbl_frm01 td{ /*padding: 0.625rem 20px 0;*/ line-height: 2.625rem;} #sod_frm .tbl_frm01 th{ width: 25%; font-size: 1rem; font-weight: 500; line-height: 2.625rem; padding: 0.625rem 10px 0 20px; } #sod_frm .tbl_frm01 td{padding: 0.625rem 20px 0 10px;} #sod_frm .tbl_frm01 th label{font: inherit;} .wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input{padding: 0 0.8rem;} #daum_juso_pageod_zip,#daum_juso_pagemb_zip{max-height: 500px;} /* 배송지 정보 (받으시는 분) */ #sod_frm #sod_frm_taker .full_input{width: 100%;} .tbl_frm01 .flexbox .chk_box{flex-shrink: 0; margin-left: 0.8rem;} .tbl_frm01 .flexbox .chk_box input[type="checkbox"] + label{padding-left: calc(22px + 0.525rem); font-size: 0.9rem;} .tbl_frm01 .flexbox .chk_box input[type="checkbox"] + label span{top: 50%; transform: translateY(-50%);} /* #sod_frm .tbl_frm01 th:not(:has(.star)){padding-left:1.73rem;} */ #sod_frm .tbl_frm01 td .btn_address{ margin-left: 0.6rem; height: 2.625rem; padding: 0.4em 1em; border-radius: 0.3em; background: #222; color: #fff; font-size: 0.9rem; width: auto; display: inline-flex; line-height: 1; text-align: center; justify-content: center; align-items: center; vertical-align:unset; cursor: pointer; min-width:78px; } #sod_frm_taker .order_choice_place{display: flex; align-items: center; font-size: 0.9rem; padding-left: 0.8rem; border:0; background-color: transparent;} #sod_frm_taker .tbl_frm01 .btn_frmline{position: unset; width: auto; height: auto; display: flex; align-items: center; justify-content: center; padding: 0 1em; border: 1px solid #d9d9d9; color: var(--font-color--default);} .tbl_frm01 .frm_address{margin-top: 0.625rem;} /* 결제정보 */ .sod_right{width:30%;} #sod_frm #sod_frm_pay h2{background-color: transparent;} .sod_right strong i{font-style: normal; font:inherit; color: inherit;} .sod_right #sod_bsk_tot { margin: 0; padding: 2.375rem 1.875rem 1.875rem; background: #FCFBFA; border: 1px solid #E6DDD5; margin-bottom: 1rem; font-size: 1rem; background: #fafafa; } #sod_frm #sod_bsk_tot li, #sod_fin #sod_bsk_tot li { float: unset; background:transparent; width: auto; height: auto; border-bottom:0; display: flex; justify-content: space-between; margin-bottom: 1.2rem; padding: 0 0.4rem; font-size: inherit; line-height: 1; color: var(--font-color--default); } #sod_frm #sod_bsk_tot li:last-child, #sod_fin #sod_bsk_tot li:last-child { margin-bottom: 0 !important; } #sod_frm #sod_bsk_tot .sod_bsk_point, #sod_frm #sod_bsk_tot .sod_bsk_cnt, #sod_fin #sod_bsk_tot .sod_bsk_cnt{height: auto; line-height: 1; padding: 0 0.4rem;} #sod_frm #sod_bsk_tot .sod_bsk_sell, #sod_frm #sod_bsk_tot .sod_bsk_coupon{border-right: 0;} #sod_frm #sod_bsk_tot .sod_bsk_cnt, #sod_fin #sod_bsk_tot .sod_bsk_cnt {padding-top: 1rem; margin-top: -0.2rem; border-top: 1px solid #999;} #sod_frm #sod_bsk_tot li:after{display: none;} #sod_frm #sod_bsk_tot .sod_bsk_coupon:before,#sod_frm #sod_bsk_tot .sod_bsk_dvr:before{display: none;} #sod_frm #sod_bsk_tot li span, #sod_fin #sod_bsk_tot li span { color: inherit; font-weight: 700; line-height: inherit; } #sod_frm #sod_bsk_tot .sod_bsk_point span, #sod_frm #sod_bsk_tot .sod_bsk_cnt span, #sod_fin #sod_bsk_tot .sod_bsk_point span, #sod_fin #sod_bsk_tot .sod_bsk_cnt span{float: unset;} #sod_frm #sod_bsk_tot li.dvr_price *, #sod_fin #sod_bsk_tot li.dvr_price *{font-weight:400;color:#999;font-size:0.9em;} #sod_frm #sod_bsk_tot li p {margin: 0; padding: 0; line-height: inherit; font-size: inherit; font-weight: 300;} #sod_frm #sod_bsk_tot li strong, #sod_fin #sod_bsk_tot li strong { font-weight: 300; line-height: inherit; font-size: inherit; } #sod_frm #sod_bsk_tot .sod_bsk_cnt span, #sod_frm #sod_bsk_tot .sod_bsk_cnt strong, #sod_fin #sod_bsk_tot .sod_bsk_cnt span, #sod_fin #sod_bsk_tot .sod_bsk_cnt strong { font-size: 1.2em; font-weight: 700; color: inherit; } #od_tot_price strong{color:inherit ;} /* #od_tot_price p{font-size: 1.2em; font-weight: 700;} */ #sod_frm #sod_bsk_tot .sod_bsk_point *, #sod_fin #sod_bsk_tot .sod_bsk_point * { color: #777; font-weight: 400; } #sod_bsk_act, #sod_bsk_list .sod_bsk_inner { display: flex; gap: 5px; } #sod_bsk_act { text-align: center; margin-bottom: 30px; } /* 결제정보 */ .sod_right .pay_tbl, .sod_right #od_tot_price, #forderform .od_pay_buttons_el{ margin: 0; padding:1.563rem 1.875rem 1.25rem; border: 1px solid #E6DDD5; margin-bottom: 1rem; font-size: 1rem; color: var(--font-color--default); background: transparent; } #sod_frm_pay .pay_tbl th,#sod_frm_pay .pay_tbl td{padding: 0.6rem 0.4rem;height: 1.6em; line-height:1.6em;} #sod_frm_pay .pay_tbl th{ display: block; color: inherit; margin-bottom: 10px; font-weight: bold; } #sod_frm_pay .pay_tbl td{border-bottom: 0; color: inherit;} #sod_frm_pay .pay_tbl #od_coupon_frm th,#sod_frm_pay .pay_tbl #sc_coupon_frm th{display:table-cell;} #sod_frm_pay .pay_tbl #od_coupon_frm td,#sod_frm_pay .pay_tbl #sc_coupon_frm td{text-align:left; border-bottom: 1px solid #e7ebf1;} #sod_frm_pay .pay_tbl td p { margin: 0; padding: 0; line-height: inherit; } #sod_frm_pay .pay_tbl td strong { font-weight: 300; line-height: inherit; } #sod_frm_pay .pay_tbl .send_cost2 td,#sod_frm_pay .pay_tbl .send_cost2 th{border-bottom: 0;} #sod_frm_pay .pay_tbl .send_cost2 p{font-size: inherit; font-weight: 300;} #sod_frm_pay .pay_tbl .col2 td{text-align: left; font-size: 0.85rem; color: #999;} .sod_right #od_tot_price{display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; background: #fafafa;} .sod_right #od_tot_price span{float: unset;} .sod_right #od_tot_price p{margin: 0;} .sod_right #od_tot_price span, .sod_right #od_tot_price strong{ float: unset; font-size: 1.2em; font-weight: 700; } #forderform .od_pay_buttons_el{line-height: 1.6;} #sod_frm #sod_frm_pt_alert{font-size: 0.9rem; margin: 0.625rem 0; color: #999;} #sod_frm #sod_frm_pt_alert strong{font-weight: 500; } #sod_frm_pay .lb_icon{width: 100%; height: 3.75rem; padding-top: 1rem;} #od_pay_sl .lb_icon{font-size: 0.95rem; padding-top: 18px;} #od_pay_sl .lb_icon:hover,#od_pay_sl input[type="radio"]:checked+.lb_icon{color: var(--main-color); border-color: var(--main-color); transition: all .2s ease-in-out;} #settle_bank{border:0; line-height: normal; padding: 0.625rem 0;} #settle_bank .od_bank{line-height: 1.4; margin-bottom: 0.625rem; display: block; background: #fafafa; padding: 0.625rem 1rem;} #settle_bank label{padding-left: 1rem; font-size: 0.95rem;} /* 버튼 */ #display_pay_button{display: flex; align-items: center; gap: 5px; border:0; padding: 0;} #display_pay_button .btn_submit, #display_pay_button a{transition: all .2s ease-in-out;} #display_pay_button .btn_submit, #display_pay_button .btn01{height: 3.125rem;} #display_pay_button .btn_submit{background-color: var(--main-color); } #display_pay_button .btn_submit:hover{ background-color: var(--color--blue03);} #display_pay_button .btn01{line-height: 1; display: flex; justify-content: center; align-items: center; margin: 0;} #settle_bank #od_deposit_name{padding:0 0.8em;} /* 커스텀 모달 */ #custom_modal {display: none; z-index:10000;position:fixed;top:50%;left:50%; transform: translate(-50%,-50%); max-width: 540px; width: 90%; height:auto !important; margin: 0; border:1px solid #dde7e9;border-radius:3px;background:#fff;overflow-y:auto;overflow-x:inherit; padding-top: 50px;} .custom_modal_bg {content:"";position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.1);display:block;z-index:9999} #custom_modal.on{display: block;} #custom_modal .option_wr{font-size: 1rem; font-size: 1rem; line-height: 1.6;} #custom_modal .option_wr:nth-child(1){padding-top: 0;} #custom_modal .btn_confirm .btn_close { position: absolute; top: 0; right: 0; width: 50px; height: 50px; border: 0; background: none; font-size: 1.25em; border-radius: 0; } #custom_modal .btn_confirm .btn_close:hover { background: #f3f3f3; } #custom_modal .btn_confirm { float: unset; display: flex; justify-content: center; background-color: transparent; margin: 0 20px 20px; } #custom_modal .btn_confirm .btn_href { width: auto; min-width: 60px; height: 40px; font-size: 1.167em; font-weight: bold; cursor: pointer; color: #fff; padding: 0.4rem 1rem; background: var(--main-color); display: flex; justify-content: center; align-items: center; text-align: center; line-height: normal; box-sizing: border-box; border: 1px solid #d9d9d9; vertical-align: middle; border-radius: 0.3em; } #custom_modal .btn_confirm .btn_href:hover { background: #002eb1; transition: 0.2s; color: #fff; } #custom_modal .btn_href{height:2.5rem;} .btn_kakao.btn_href{ border-color: var(--sns-color--kakao) !important; position: relative; color: #191919 !important;} .btn_kakao.btn_href::before{content: ''; width: 1.2rem; height: 1.2rem; display: inline-block; margin-right: 0.625rem; background:url("/img/btn_kakao_symbol.png") no-repeat center center/contain;} .address_pop{text-align: center;} .address_pop h3{font-size: 1.2rem; font-weight: 700;} /* 모바일 */ .m_sod_bsk_list .od_prd_list .li_op_wr, .m_sod_bsk_list .od_prd_inq .li_op_wr{margin-bottom: 0.625rem; padding-left:1rem ;} .m_sod_bsk_list .od_prd_list .sod_opt, .m_sod_bsk_list .od_prd_inq .sod_opt{padding-left: 0;} @media all and (max-width: 1200px) { /* 배송지 정보 */ .sod_left{width: calc(60% - 20px);} /* 결제정보 */ .sod_right{width:40%;} } @media all and (max-width: 1024px) { /* 주문 리스트 */ .tbl_wrap.od_prd_list {display: none;} /* 배송지 정보 */ .sod_left{width: 100%; margin-right: 0;} #sod_frm .tbl_frm01 th{width: 20%; min-width: 120px;} /* 결제정보 */ .sod_right{width:100%;} #sod_frm_pay #sc_coupon_frm, #sod_frm_pay #od_coupon_frm{width:100%;} } /* ================================= // 주문서 작성 ================================= */ /* ================================= 주문 완료 ================================= */ #sod_fin{overflow: hidden;} /* 주문번호 */ #sod_fin_no { margin: 0 0 20px; padding: 0.625rem 20px; border: 1px solid var(--main-color); line-height: 1.6; background: #fafafa; font-size: 0.95rem; font-weight:700; border-radius: 0.3em; color: var(--main-color); } #sod_fin_no strong{ padding-left: 2.2rem; font-weight: 400; margin-left: 2rem; border-left: 1px solid #d9d9d9; } /* 주문하신 상품 */ #sod_fin_list {} #sod_fin_list th{padding: 20px 0; font-weight: 600; border-top: 0; letter-spacing: -0.05em; font-size: 1.3em;} #sod_fin_list .td_imgsmall.td_bdno + .td_bd{border-left: 0; border-right: 1px solid #f6f6f6;} #sod_fin_list td{font-size: 0.85rem; border-top: 1px solid #f6f6f6;} #sod_fin_list .tr_bd + tr td{border-top: 1px solid #d9d9d9;} #sod_fin_list .td_itname{ width: 15rem; font-size: 1.2em;} #th_itpt,.td_itpt{width: 7%;} /* .sod_opt li:before, */ .td_itopt{width:12rem;} .td_itopt:before{ content: "옵션"; display: inline-block; margin: 1px 5px 2px 0; padding: 3px; border-radius: 3px; background: #e2eaf6; line-height: 1em; color: #3a8afd; } .od_prd_inq .total_prc { color: #000; font-weight: bold; font-size: 1.4em; } /* 상태설명 */ #sod_sts_wrap{margin-bottom: 3rem;} a.btn_frmline, button.btn_frmline{padding: 0.4em 1em; border-radius: 0.3em; background: #222; color: #fff; font-size: 0.9rem; height: 2.5rem; } #sod_fin_legend{ padding: 1.563rem 1.875rem; font-size: 1rem; line-height: 1.6; border: 1px solid #d9d9d9; background-color: #fafafa;} #sod_fin_legend dt{width: auto; margin-bottom: 0.625rem;} #sod_fin_legend dt:last-of-type{margin-bottom: 0;} #sod_fin_legend dd{padding-left: 2.2rem; font-weight: 400; margin-left: 2rem; font-size: 0.95rem; border-left: 1px solid #d9d9d9;} /* 결제정보 */ #sod_fin .sod_left tr:not(:last-child){border-bottom: 1px solid #d9d9d9;} #sod_fin .tbl_head01{border-bottom: 2px solid #999;} #sod_fin .tbl_head01 th, #sod_fin .tbl_head01 td { line-height: 1.6; font-size: 1rem; border:0; color: var(--font-color--default); } #sod_fin .sod_left th{ width: 25%; min-width: 80px; font-weight: 500; padding: 0.625rem 10px 0.625rem 20px; } #sod_fin .sod_left td{ font-weight: 400; padding: 0.625rem 20px 0.625rem 10px; } /* 결제합계 */ #sod_fin_tot{padding: 1.563rem 1.875rem;; border: 1px solid #999; margin-bottom: 1rem; font-size: 1rem; color: var(--font-color--default); background: transparent;} #sod_fin_tot li { height: auto; font-weight: 500; margin-bottom: 0.8rem; background: transparent; padding: 0 0.4rem 0.8rem; color: inherit; font-size: 1rem; border-bottom: 1px solid #d9d9d9; } #sod_fin_tot li:last-child{margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom:0;} #sod_fin_tot #alrdy{color: var(--main-color); font-weight: 600;} #sod_fin_tot #alrdy strong{color: inherit;} #sod_fin_tot .currency{padding-left: 0.25em;} /* 주문 취소 */ #sod_fin_cancel button{ width: 100%; height: 3.125rem; line-height: 38px; font-weight: bold; font-size: 1.25em; margin: 5px 0; border: 1px solid #d9d9d9; color: var(--font-color--default); line-height: 1; } #sod_fin_cancelfrm{padding: 1.25rem; border: 1px solid #d9d9d9; } #sod_fin_cancelfrm .frm_input{margin-bottom: 0.625rem; padding: 0 0.8em;} #sod_fin_cancelfrm .btn_frmline{border-radius: 0; background: #222;} /* 주문 취소 문구 */ #sod_fin_cancel p{color: inherit; font-size: 0.95rem; line-height: 1.6; color: #999;} /* 모바일 - 주문 리스트 */ .m_sod_bsk_list .od_prd_inq .prqty_stat{margin: 0.625rem 0 0.8rem; font-size: 0.95rem; line-height: 1;} .stat_tit{margin-right: 1rem; padding-right: 0.625rem; color: #999; line-height: 1; border-right: 1px solid #d9d9d9;} .m_sod_bsk_list .od_prd_inq .prqty_stat b{font-weight: 600;} /* media */ @media all and (max-width: 1024px) { /* 주문 리스트 */ #sod_fin_list .tbl_wrap{display: none;} .opt_name{line-height: 1.4; word-break:break-all;} /* 상태설명보기 */ #sod_sts_wrap{display: flex; flex-direction: column-reverse; margin-top: 1rem;} #sod_sts_wrap .btn_frmline{align-self: flex-end;} #sod_sts_explan .btn_frmline{display: none;} } @media all and (max-width: 768px) { /* 주문번호 */ #sod_fin_no strong{padding-left: 1.2rem; margin-left: 1rem;} /* 상태설명보기 */ #sod_fin_legend dd{padding-left: 1.2rem; margin-left: 1rem;} } /* ================================= // 주문 완료 ================================= */ /* ================================= faq ================================= */ /*faq*/ .sub_content_title {font-size: 2.4rem;font-weight: 700;text-align: center; margin-bottom: 3rem;} .faq_content { padding-bottom: 8rem; } .faq-tabs { max-width: var(--innersize); margin: 0 auto; width: 90%; } .tab-content { margin-top: 3rem; border: 1px solid #ddd; background: #fdfdfd; border-radius: 20px; } .tab-nav { width: 100%; display: flex; justify-content: center; gap: 0.6rem; } .tab-nav .tab { text-align: center; padding: 0.6rem 1.2rem; cursor: pointer; color: #666; font-weight: 500; font-size: 1.0rem; border-radius: 50px; border: 1px solid #d9d9d9; background: #fff; } .tab-nav .tab.active { color: #fff; background: var(--color--blue03); font-weight: 700; border: none; } .tab-pane { display: none; padding: 3rem 4rem; border-radius: 10px; } .tab-pane.active { display: block; } .tab-pane ul { list-style: none; padding: 0; margin: 0; } .tab-pane ul li { padding: 2rem 2.4rem; margin-bottom: 1rem; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #fff; transition: 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor:pointer;} .tab-pane ul li:last-child { margin-bottom: 0 !important; } .tab-pane ul li.active { border: 1px solid #a0a0a0; } .tab-pane ul li:hover { } .tab-pane ul li strong { font-size: 1.1rem; font-weight: 500; color: #333; display: block; line-height: 1.37; } .tab-pane ul li.active strong { color: var(--color--blue03); font-weight: 700; font-size: 1.4rem; } .tab-pane ul li p { font-size: 1rem; line-height: 1.65; color: #000; display: none; margin-top: 1.2rem; padding-top: 1.6rem; border-top: 1px solid #dfdfdf; font-weight: 400; opacity: 0.9; } .tab-pane ul li.active p { display: block; } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1024px) { .tab-pane { padding: 2rem; } .tab-nav .tab{ /*font-size:1.4vw;*/ flex-shrink: 0; } } @media screen and (max-width: 768px) { .faq-tabs { width: 100%; } /* .tab-nav .tab{font-size:1.0rem;}*/ .tab-nav { flex-wrap: wrap; } .tab-pane ul li { padding: 1.6rem 2rem; } .tab-pane ul li p { margin-top: 1rem; padding-top: 1rem; } .sub_content_title { margin-bottom: 2.2rem;} } @media screen and (max-width: 570px) { } @media screen and (max-width: 480px) { .tab-content { border-radius: 10px; } .tab-pane { padding: 1rem; } .tab-pane ul li { padding: 1.2rem 1.4rem; } .tab-pane ul li.active strong { font-size: 1.3rem; } } /* ================================= // faq ================================= */ /* ================================= 회원가입 ================================= */ .cen800 { max-width: 800px; width: ; margin: 0 auto;} .cen380 { max-width: 380px; width: ; margin: 0 auto;} .register_title_box .title, #register .register_title_box .title, #reg_result .register_title_box .title { text-align: center; font-size: 3rem; font-weight: 900; margin-bottom: 2rem; } .register_title_box .sub_title, #register .register_title_box .sub_title, #reg_result .register_title_box .sub_title { font-size: 1rem; font-weight: 400; word-break: keep-all; line-height: 1.6; text-align: center; } #register p , #reg_result p{background-color: transparent; color: inherit;} #register p:before, #reg_result p:before{display: none;} /* 프로그래스 */ .register .register_progress_tab { width: 100%; display: flex; justify-content: center; margin: 3.5rem 0 2.5rem; gap: 1.8rem; padding: 1rem 0 0.7rem; } .register .register_progress_tab li { position: relative; text-align: center; font-size: 1.2rem; font-weight: 600; padding: 0 1rem; color: #999; } .register .register_progress_tab li.active { border: none; color: var(--main-color); padding-bottom: 0.3em; text-decoration: 2px underline; text-underline-offset: 0.3em; } .register .register_progress_tab .icon_arrow { max-width: 1.5rem; padding: 0;} .register .register_progress_tab .icon_arrow i, #reg_result .register_progress_tab .icon_arrow i{font-size: 1.1rem; color: #999;} /* 하단버튼 */ .btn_confirm.mt-50 .btn_submit, .btn_confirm.mt-50 .btn_close, .btn_confirm_reg .reg_btn_submit{font-weight: 500; font-size: 1rem; transition: all 0.3s ease-in-out; cursor: pointer;} .reg_btn_submit{border:0; width: 100%; max-width: 280px; height: 3.5625rem; line-height:3.5625rem; } .register .btn_confirm .btn_submit, .register .btn_confirm .btn_close{height:3.125rem !important ; } .register .btn_confirm .btn_close{line-height:calc(3.125rem - 2px) } /* 약관동의 */ #fregister_private div{padding: 0;} #fregister section{border: 0; margin: 1rem 0 0;} .fregister_agree { right: unset; left: 0; position: relative; background: none; display: flex; align-items: center; height: 3.75rem; background: #fafafa; } .fregister_agree input[type="checkbox"] + label { display: flex; align-items: center; padding:0 1.2rem; font-size: 1.1rem; position: relative; font-weight: 400; color: var(--font-color--default); line-height: 1.6; text-align: left; } .chk_box input[type="checkbox"] + label:hover{color: inherit; cursor: pointer;} .fregister_agree input[type="checkbox"] + label span {position: unset; top: 0; left: 0; margin-right:0.5rem; display: block;} .fregister_agree input[type="checkbox"] + label strong { color: var(--main-color); font-weight: 400; line-height: inherit; } #fregister_chkall{height: auto; margin-top:1.6rem; padding-top: 1.4rem; background-color: transparent; border: 0; border-radius: 0; border-top: 1px solid #d9d9d9;} .fregister_agree.chk_all input[type="checkbox"]+ label { font-weight: 600; line-height: 4rem; width: 100%; letter-spacing: -0.01em; color: #222; background: #ececec; } .fregister_agree.chk_all input[type="checkbox"]:checked + label {color: #fff; background-color:var(--main-color); transition: background .2s ease-in-out;} .btn_toggle{position: relative; cursor: pointer;} .btn_toggle .toglge_arrow{font-size: 1.2rem; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); transition: all .3s ease-in-out;} .btn_toggle.on .toglge_arrow{transform: translateY(-50%) rotate(180deg);} .toggle_target{overflow: hidden; padding: 0;} #fregister textarea { font-size: 0.9rem; line-height: 1.6; font-weight: 400; padding: 0.625rem 1rem; border: 1px solid #d9d9d9; color: inherit; border-radius: 0; } /* 정보입력 */ .register_form_inner{border: 0; border-top: 2px solid #999; border-radius: 0;} .register_form_inner ul { padding: 0; } .register_form_inner ul li { display: flex; border-bottom: 1px solid #d9d9d9; margin-bottom: 0; } .form_01 .register_form_inner li{margin: 0;} #fregisterform .register_form_inner ul li div { margin: 0; } .register_form_inner ul li .register_form_left, .register_form_inner ul li .register_form_right{padding: 0.625rem 1rem;} .register_form_inner ul li .register_form_left { width: 25%; padding-left: 1rem; display: inline-flex; /* align-items: center; */ align-items: flex-start; font-size: 1rem; font-weight: 500; } .register_form_inner ul li .register_form_left span.star { color: var(--main-color); } .register_form_inner ul li .register_form_right { width: 75%; display: inline-flex; flex-wrap: wrap; align-items: center; } .register_form_inner label { margin-bottom: 0; line-height: 2.625rem; } .register_form_inner ul li .register_form_right .info_text{margin-top:5px;word-break:keep-all; color:#999; line-height: 1.4; flex:1 0 100%;} .register_form_inner ul li .register_form_right .info_text + .info_text{margin-top:2px;} .register_form_inner ul li .register_form_right .form_flex{display:flex;width:100%; flex-wrap: wrap;} .address_div{padding: 0; display: flex; align-items: center;} #fregisterform .frm_address{margin-top: 0.625rem ;} #daum_juso_pagemb_zip{margin: 0.625rem 0 0 !important;} .filebox{position: relative; width: 100%; display: flex; align-items: center; flex-wrap: wrap; } .filebox input{width: calc(100% - 5.2rem - 0.6rem);} #fregisterform .register_form_inner .upload-thumb-wrap1{ margin-right:0.6rem;} .address_div button,.filebox label{ margin-left: 0.6rem; height: 2.625rem; padding: 0.4em 1em; border-radius: 0.3em; background: #222; color: #fff; font-size: 0.9rem; display: inline-flex; line-height: 1; text-align: center; justify-content: center; align-items: center; vertical-align:unset; cursor: pointer; width: 5.2rem; /* min-width:79px; */ } .user_shop input[type="file"]{display: none;} .upload-display1 {padding-top: 0.625rem;} .upload-display1 img{display: block; max-height: 250px; margin-bottom: 0.625rem;} /* 가입 완료 */ #reg_result{padding: 0; border: 0; background-color: transparent; border-radius:0;} #reg_result p{line-height: inherit;} .reg_result_text { font-weight: 500; margin: 0 0 1.6rem; line-height: 1.6; } .reg_result_text p:nth-child(1){margin-bottom: 0.625rem; padding-bottom: 0.625rem; font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid #d9d9d9;} .reg_result_text p:nth-child(2){font-size: 1rem;} .reg_result_info { background: #fafafa; padding:1rem 1.8rem; line-height: 1.6; } .reg_result_info li { margin: 0 auto; max-width: 90%; text-align: left; display: flex; padding: 0.625rem 0; align-items: center; word-break: keep-all; } .reg_result_info .title{width: 20%; font-size: 1.1rem; font-weight: 600;} .reg_result_info .text{flex: 1 0 auto; font-size: 1rem;} .reg_btn_submit { background-color: var(--main-color);} .reg_btn_submit:hover{ background-color: var(--color--blue03);} #register .register_form_right .info_text2{font-size: 0.9rem; color: #999;} /* media */ @media all and (max-width: 1024px) { } @media (max-width: 768px) { /* 정보입력 */ .register_form_inner ul li{flex-direction: column;} .register_form_inner ul li .register_form_left{width: 100%; padding-bottom: 0;} .register_form_inner ul li .register_form_right{width: 100%; padding-top: 0.2rem;} .register_form_inner label{line-height: 1.6;} /* 가입 완료 */ .reg_result_info .title{width: 30%;} } @media all and (max-width: 570px) { /* 프로그래스 */ .register .register_progress_tab{gap: 0; justify-content: space-evenly;} } /* ================================= // 회원가입 ================================= */ /* ================================= 회원 비밀번호 확인 ================================= */ .register_confirm .reg_result_info{margin-top:3.5rem;} .user_shop input[type="password"]{height: 2.625rem;} /* ================================= // 회원 비밀번호 확인 ================================= */ /* ================================= 로그인 ================================= */ .mbskin { margin: 0 auto; width: auto; } #login_fs{padding: 0;} #mb_login .register_title_box { margin-bottom: 2.5rem; } /* .register_title_box .title { text-align: center; font-size: 45px; font-weight: 800; margin-bottom: 23px; } */ /* .register_title_box .sub_title { font-size: 18px; font-weight: 400; word-break: keep-all; line-height: 1.4; } */ #mb_login #login_fs .frm_input{height: 2.625rem; margin-bottom: 0.625rem;} #mb_login #login_fs .btn_submit{height: 2.625rem; margin-bottom:1.2rem;} .login_id_save_box { margin-bottom: 0.625rem; padding: 0.3rem 0; } .login_id_save_box.chk_box input[type="checkbox"] + label span{top: 0;} .login_id_save_box input[type="checkbox"].selec_chk + label { color: #676e70; cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--font-color--default); padding-left: 0.8em; } #login_info { display: flex; justify-content: center; } #login_info .login_if_lpl { float: unset; border-right: 1px solid #cccccc; } #login_info a { font-size: 0.95rem; padding: 0 0.625rem; } /* ================================= // 로그인 ================================= */ /* ================================= 회원정보 찾기 (비밀번호 찾기) ================================= */ #find_info p{line-height: 1.6;} #find_info .new_win_con { margin: 0; padding: 0; background: transparent; } #find_info .register_title_box { margin-bottom: 2.5rem; } #find_info .new_win_con .text_box{ text-align: center; font-size: 0.95rem; padding: 1rem 0; border-top: 1px solid #d9d9d9; } #find_info #mb_email{margin: 0 0 1.4rem;} .new_win .btn_submit{ width: 100%; height: 50px; font-weight: 500; font-size: 1rem; padding: 0.4rem 0.6rem;} .new_win .win_btn{padding-bottom: 0;} /* ================================= // 회원정보 찾기 (비밀번호 찾기) ================================= */ /*================================= 이용약관 ================================= */ .terms-wrap {margin: 0 auto;font-size: 1rem; line-height: 1.8; } .terms-wrap h1 { font-size: 2.6rem; margin-bottom: 1.5rem; font-weight: 700; text-align:center;} .terms-wrap h2 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; font-weight: 600; } .terms-wrap p { margin-bottom: 1rem; } .terms-wrap ul { padding-left: 1.5rem; margin-bottom: 1rem; } .terms-wrap ul li { margin-bottom: 0.5rem; } .terms-wrap a { color: #0073e6; text-decoration: underline; } /*================================= // 이용약관 ================================= */ /* ================================= 공지사항 ================================= */ /* ----------- 목록 ----------- */ /* 상단 목록 수 */ #bo_list_total{font-size: 0.95rem; display: flex; align-items: center; margin-left: 0.625rem;} #bo_list_total p{padding-right: 0.625rem; margin-right: 0.625rem; border-right: 1px solid #d9d9d9; line-height: 1;} #bo_list_total .total{ margin: 0 0.1em;} /* 검색 */ .bo_sch_wrap{z-index: 1100;} .bo_sch{width: 90%; max-width: 330px; margin-left: 0; margin-top:0; transform: translate(-50%,-50%);} .bo_sch h3{font-size: 0.95rem;} .bo_sch select{ border-radius: 0.3em;} .bo_sch .sch_bar{border-radius: 0.3em;} .bo_sch .sch_input{padding-left: 0.8rem; border-radius: 0;} /* 목록 테이블 */ #bo_list table thead th {border-bottom: 0;} #bo_list table thead th a{color: inherit;} #bo_list td{line-height: 1.6; font-size: 0.95rem; padding-top: 0.8em; padding-bottom:0.8em;} #bo_list .td_chk{border-color: #ccd2d9; line-height: 22px;} /* #bo_list .tbl_wrap .td_subject{width: 55%;} */ #bo_list .tbl_wrap .td_name {text-align: center;} /* #bo_list tbody td{font-weight: 400;} */ #bo_list tbody .even td{background-color: transparent;} #bo_list tbody .bo_notice td{border-color: #ccd2d9; background-color:#fafafa !important;} .notice_icon{font-weight: 800;} .notice_icon::before{content: '['; display: inline-block; transform: translateY(-0.05em); padding-right: 0.1em;} .notice_icon::after{content: ']'; display: inline-block; transform: translateY(-0.05em); padding-left: 0.1em;} /* #bo_list tbody td:first-child{position: relative;} #bo_list tbody .bo_notice td:first-child::before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: var(--main-color);} */ /* #bo_list tbody .bo_notice td.td_chk {border-left: 2px solid var(--main-color);} */ #bo_list tbody td:first-child{position: relative; } #bo_list tbody tr td:first-child::before{/*transition:all .1s ease-in-out;*/ content: ''; display: block; position: absolute; left: 0; top: 0; opacity: 0; width: 3px; height: 100%; background-color: var(--main-color);} #bo_list tbody tr:hover td:first-child::before{opacity: 0.8;} /* #bo_list tbody td.td_chk {border-left: 2px solid var(--main-color);} */ #bo_list tbody tr{border-left: 0;} #bo_list tbody tr:hover{border-left: 0;} .bo_tit{font-weight: 500; } .bo_tit .ellipsis{width: 100%;} .bo_notice td a{line-height: inherit;} .td_datetime, #bo_list .td_num {color: #999;} .bo_notice td a{font-weight: 600;} #bo_list .td_num2,#bo_list .td_num{font-size: 0.9rem;} /* ----------- // 목록 ----------- */ /* ----------- 읽기 ----------- */ .shop-content #bo_v{margin: 0; border-top: 2px solid #999;} #bo_v_title{padding: 1.2rem 0.625rem 0.6rem;} #bo_v_title .bo_v_tit{text-align: center; font-size: 1.6rem; line-height: 1.6; margin: 0; word-break: keep-all;} #bo_v_title .notice_icon{ margin-right: 0.625rem; display: inline-block; line-height: 1.4; } #bo_v_info{color: var(--font-color--default); padding: 0.625rem; display:flex; justify-content: flex-end; align-items: flex-end;} #bo_v_info:after{display: none;} #bo_v_top{} #bo_v_info .profile_info{margin: 0;float: unset; display: flex; align-items: center; justify-content: flex-end;} #bo_v_info .profile_info .profile_info_ct{float: unset; line-height:1; font-size: 0.95rem; display: flex; align-items: center;} /* #bo_v_info .profile_info .profile_info_ct .top{margin-bottom: 0.625rem;} */ /* #bo_v_info .sv_member{color: inherit;} */ #bo_v_info .profile_info .profile_info_ct strong{color: #999; padding-right: 0.8rem; margin-right: 0.8rem; border-right: 1px solid #d9d9d9;} #bo_v_info .profile_info .profile_info_ct strong:last-child{border-right:0; padding-right:0;} .profile_info_title{font-weight: 600; margin-right: 0.625rem;} .profile_info_ct .fa:before{margin-right: 0.1rem;} #bo_v_top .bo_v_com{ margin: 0; padding: 0;} #bo_v_top .bo_v_com{} .btn_bo_user li{width: auto;} .btn_bo_user .btn{height: 35px;} a.btn_type01, button.btn_type01{border:1px solid var(--color--blue00);} a.btn, .btn{font-weight: 500;} .more_opt li button, .more_opt li a{display: flex; align-items: center; flex-direction: row; justify-content: space-between;} .more_opt li button i, .more_opt li a i{order: 2;} button.btn_type03{line-height: 35px; padding-top: 0; padding-bottom: 0;} /* #bo_v_share{padding: 0;} */ /* #bo_v_share .btn{line-height: 1; height: auto; width: auto; padding: 0.5rem 0.8rem; border: 1px solid #d9d9d9; font-size: 0.85rem;} */ #bo_v_img{margin: 1.6rem 0;} #bo_v_img a.view_image{width: auto; display: inline-block;} #bo_v_atc { font-size: 1.1rem; text-align: center; margin: 2rem 0; /* min-height: 200px; */ /* height: auto !important; */ /* height: 200px; */ } #bo_v_img img { margin-bottom: 20px; max-width: 100%; height: auto; } /* #bo_v_con{font-size: 1rem; } */ .bo_v_nb{font-size: 1.1rem;} /* .bo_v_com a.btn_type03, .bo_v_com button.btn_type03 { font-size: 1rem; font-weight: 500; color: #fff; display: block; padding: 0.4rem 0.6rem; background: #444; height: auto; line-height: normal; width: auto; text-align: center; min-width: 60px; border: none; box-sizing: border-box; } */ .bo_v_nb li {padding:1rem 1.2rem; display: flex; align-items: center;} .bo_v_nb li p{display: inline-block; flex: 1; padding-right: 1.2rem;} .bo_v_nb li a{font-weight: 500;} .bo_v_nb li .nb_tit{padding-right: 2rem; display: flex; align-items: center;} .bo_v_nb li .nb_tit,.bo_v_nb li .nb_date{color: #999; font-weight: 400; flex-shrink: 0;} .bo_v_nb li .nb_date{font-size: 0.95rem;} .bo_v_nb li i{font-size: 0.75rem; margin-right: 1rem; transform: translateY(-0.1em);} .btn_prv i{} #bo_list .pg_wrap{margin-top: ;} .pg_prev svg {left: 30%;} .pg_next svg {right: 30%;} /* ----------- // 읽기 ----------- */ /* ----------- 쓰기 ----------- */ #bo_w .bo_v_option{padding-left: 0.8rem;} #autosave_wrapper{width: 100%; display: flex; align-items: center;} #autosave_wrapper #btn_autosave{width: auto; margin-left: 0.625rem;} #autosave_wrapper #autosave_count{color: inherit; padding: 0 0.1em;} #autosave_pop{top: calc(100% + 10px);} #autosave_pop li{padding: 0.6rem 0.7rem 0.4rem; line-height: 1.4; border-width: 5px; background: #f0f0f0;} #autosave_pop span{font-style: normal; margin-top: 0.4rem;} .autosave_close{color: var(--font-color--default); font-size: 0.9rem;} .autosave_close:hover{color:inherit;} #bo_w .bo_w_tit .frm_input{padding:0.8em;} #bo_w .bo_w_tit #btn_autosave{position: unset; position: unset; flex: 1 0 auto; height: auto;} #bo_w .cke_sc{display: none;} /* #bo_w .write_div{overflow: hidden;} */ /* #bo_w .write_div:after{display: none;} */ .write_div .chk_box input[type="checkbox"] + label{font-size: 0.9rem;} .write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span{border: inherit;} /* #bo_w .bo_w_flie .file_wr{display: flex; align-items: center; border: 0; border-radius: 0; padding: 0;} #bo_w .bo_w_flie .file_wr label{margin-left: 0.6rem; height: 2.625rem; padding: 0.4em 1em; border-radius: 0.3em; background: #222; color: #fff; font-size: 0.9rem; width: auto; display: inline-flex ; line-height: 1; text-align: center; justify-content: center; align-items: center; vertical-align: unset; cursor: pointer; min-width: 78px;} #bo_w .bo_w_flie .file_wr input{margin-top: 0;} */ /* .write_div .upload-hidden{display: none;} */ /* .btn_confirm.write_div {gap: ;} */ #bo_w .bo_w_flie .frm_file{margin-top: 0;} #bo_w input[type="file"]{display: block !important;} #bo_w .bo_w_flie .file_del{font-size: 0.9rem;} /* #bo_w .bo_w_flie .file_del .del_text{} */ #bo_w .btn_cancel{ width: 40%; font-weight: 500; font-size: 1rem; transition: all 0.3s ease-in-out; cursor: pointer; text-align: center; border: 1px solid #dcdcdc; line-height: 50px; border-radius: 3px; color: #999; background: #fff; height: 50px; } #bo_w .btn_submit{ width: 40%; font-weight: 500; display: inline-block; padding: 0.4rem 0.6rem; cursor: pointer; text-align: center; height: 50px; font-size: 1rem; transition: all 0.3s ease-in-out; color: #fff; background: var(--main-color); } .board_noti #wr_content{ padding:0.8rem; } /* ----------- // 쓰기 ----------- */ /* media */ @media all and (max-width: 1024px) { /* 목록 */ #bo_list .td_datetime{ font-size:0.8rem; } #bo_list .td_num{ /* display:none;*/ } #bo_v_top .btn_bo_user .btn{ height:2rem; font-size:0.95rem; line-height:2rem; } } @media (max-width: 768px) { /* 목록 */ #bo_list .tbl_head03{ display:none; } /* 목록 */ #bo_list .all_chk {text-align: right; line-height: 1.6; font-size: 0.95rem; margin-bottom: 0.625rem;} #bo_list tbody td:first-child{ min-width:66px; } #bo_list .td_datetime{ font-size:0.7rem; } #bo_list .visible768 { padding: 15px 0; /* background: #f9f9f9;*/ } #bo_list .board_list { list-style: none; margin: 0; padding: 0; } #bo_list .board_list li { background: #fff; margin-bottom: 1rem; padding: 14px 16px 16px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 21%); font-family: 'Helvetica Neue', sans-serif; position: relative; } #bo_list .board_list li.bo_notice { /* border-left: 5px solid #ff5e5e;*/ background: #fafafa !important; } #bo_list .board_list .chk_box { position: absolute; top: 15px; right: 15px; } #bo_list .board_list .item_num { font-weight: bold; color: #777; margin-bottom: 1.1em; font-size: 1.2em; display:inline-block; background:var(--main-color); text-align:center; padding: 0.3em 0.4em; border-radius:5px 5px 5px 5px; color:#fff; } #bo_list .bo_notice .item_num{ background:none; } #bo_list .board_list .notice_icon { color: #d9534f; font-weight: bold; font-size: 14px; background:none; } #bo_list .board_list .item_title { font-size: 16px; font-weight: 600; margin-bottom:0.5em; color: #333; } #bo_list .board_list .item_title a { color: inherit; text-decoration: none; word-break: keep-all; display:block; width:100%; } #bo_list .board_list .item_title a:hover { text-decoration: underline; } #bo_list .board_list .item_date, #bo_list .board_list .item_views, #bo_list .board_list .item_good, #bo_list .board_list .item_nogood { font-size: 12px; color: #999; margin-top: 4px; display: inline-block; margin-right: 10px; } #bo_list .empty_list { text-align: center; padding: 30px 0; color: #aaa; font-size: 14px; } /* 읽기 */ #bo_v_top .btn_bo_user .btn{ /* height:2rem; font-size:0.8em; line-height:2rem; */ } #bo_v_info{ flex-direction: column; gap:0.5em; } #bo_v_info .profile_info .profile_info_ct strong{ margin-right:0; margin-left:0.8rem; /* padding-left: 0.8rem; */ } /* 쓰기 */ #bo_w .bo_w_flie .file_wr{border: 0; height: auto; min-height: 40px;} #bo_w .bo_w_flie .file_del{position: relative; top: 0; right: 0; padding: 0 10px; text-align: right; display: block;} .bo_w_flie.write_div{border:1px solid #ccc; padding-bottom: 10px;} } /* ================================= // 공지사항 ================================= */ /* ================================= 검색결과 ================================= */ /* 상품 체크박스 검색창임 #ssch{ } #ssch .fa-search{ font-size:1rem; color:#fff; margin-right:0.3em; } #ssch .chk_box input[type="checkbox"]:checked + label { color: #000; line-height: 1.5; height: auto; display: inline-block; margin-right:1em; } #ssch .chk_box input[type="checkbox"]:checked + label span{ display:inline-block; margin-right:0.8em; position:unset; } 상품 체크박스 검색창임 */ #ssch_frm{ border:none; } #ssch_cate{ padding:0; border-bottom:none; } #ssch h2{padding:0 0.8rem} #ssch h2 strong{color: var(--main-color);} #ssch_cate li span{font-weight:unset;} #ssch_cate li{border-right:unset; width:auto;} /* 상품 카테고리 */ .sct_ct{border: 0; padding: 0; margin:0 0 1.5rem; background-color: transparent;} #ssch_cate .sct_tab_menu {border-top:2px solid #999; padding: 0.8rem 1rem 0; margin: 0 0 1.5rem;} #ssch_cate .sct_tab_menu li{ width: 16.6%; border: 0; padding: 0 0.625rem 0.8rem 0; font-weight: 600; font-size: 1rem; line-height: 1.6; font-weight:700;} #ssch_cate .sct_tab_menu li a{position: relative; display: inline-block; width: auto; padding: 0; line-height: inherit; transition: all .3s ease-in-out;} #ssch_cate .sct_tab_menu li:nth-child(1),#ssch_cate .sct_tab_menu li:nth-child(1) span {color: var(--main-color);} #ssch_cate .sct_tab_menu li a:hover, #sct_ct_1 .sct_tab_menu li a.on{color: var(--main-color);} /* 상품 정렬방식 sort + count */ /* #sct_sortlst == .total_product */ /* #ssch_sort == #ssch_sort_all */ .total_product{display: flex; justify-content: space-between; align-items: center; border: 0; padding: 0 0.625rem; border-bottom: 1px solid #d9d9d9;} .sct_count{flex: 1 0 auto; font-size: 0.95rem; line-height: 1.6;} .total{font-weight: 700; color: var(--main-color); display: inline-block; margin: 0 0.1em;} #sct_sort{position: relative; float: unset; width: auto; padding: 0.625rem 0; font-size: 0.95rem;} #ssch_sort_all{float: right; width:auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem;} #sct_sort ul:after{display: none;} #sct_sort ul{z-index:10;} #sct_sort li{padding: 0; height: auto; line-height: 1;} #sct_sort li a{border: 0; color: #999; transition: color .3s ease-in-out;} #sct_sort li a:hover,#sct_sort li a.on{color: var(--font-color--default);} #ssch_sort_all li:hover:after{display: none;} #ssch_sort_all li a{line-height: inherit;} .total_product .btn_sort{display: none; width: 110px; padding: 0.625rem 0.8em; border-radius: 0.3em; border: 1px solid #d9d9d9; background-color: transparent;} .total_product .btn_sort i{margin-left: 0.625rem;} .total_product{display: flex; justify-content: space-between; align-items: center; border: 0; border-bottom: 1px solid #d9d9d9; position:relative; } .total_product p{ font-size: 0.95rem; line-height: 1.6; color:var(--font-color--default)!important; font-weight:400; border-bottom:none !important; padding:0 0 0 15px !important; flex:1; } .total_product p span{font-weight: 700; color: var(--main-color); display: inline-block; margin: 0 0.1em;} @media all and (min-width: 769px) { /* 상품 정렬방식 */ /* #ssch_sort_all{display: flex !important;}*/ } @media all and (max-width: 1440px) { /* 상품 카테고리 */ #ssch_cate .sct_tab_menu li{width: 25%;} } @media all and (max-width: 1024px) { .total_product p{ /*flex:0.5;*/ #ssch_cate .sct_tab_menu li{width: 33.333%;} } } @media all and (max-width: 768px) { /* 검색결과 카테고리 */ #ssch_cate{margin-bottom: 0;} #ssch_cate .sct_tab_menu{padding-left: 0.625rem; padding-right: 0.625rem;} #ssch_cate .sct_tab_menu li{width: 50%; font-size: 0.95rem;} .total_product p{font-size: 0.85rem;} /* 상품 정렬방식 */ .total_product{padding: 0;} .total_product .btn_sort{display: flex; justify-content: space-between; align-items: center;} #ssch_sort_all{display: none; z-index: 1; float: unset; position: absolute; top: calc(100% + 0.025rem); right: 0; gap: 0; flex-wrap: wrap; width: 100%; border-radius: 5px; background-color:#fff; border: 1px solid #d9d9d9; box-shadow: 1px 2px 5px 0px rgb(0 0 0 / 14%); transition: all .2s ease-in-out;} #ssch_sort_all li{float: unset; width: 100%; flex: 1 0 100%;} #ssch_sort_all li a{padding: 0.5rem 1rem; } } /* ================================= // 검색결과 ================================= */ /* ================================= nims ================================= */ #remote-hero{position: relative; height: 460px; background-color: #d5e5f5; overflow: hidden;} #remote-hero .remote_banner_textbox{position:absolute;top:50%;left:50%;width:90%;text-align:center;transform:translate(-50%,-50%);} #remote-hero .remote_banner_textbox p{font-size:1.1rem;margin-bottom:1rem;color:#6f6f6f;} #remote-hero .remote_banner_textbox h3{font-size:1.8rem;margin-bottom:3rem;color:#222; line-height: 1.3;} #remote-hero .remote_banner_textbox h3 span{font-size:1.4em; color:#0032c1;} #remote-hero .remote_banner_textbox .btn{ color: #fff; background: #222; font-weight: 600; border: none; text-align: center; padding: 0rem 1.8rem; height:42px; line-height:42px; cursor: pointer; font-size: 1.2rem; border-radius: 50px; } /* Container */ #nims.sub_content_wr { background-color: var(--bg-light); font-family: var(--font-main); color: #333; padding: 0; } /* Inner content wrapper */ .nims_content { width: 100%; /* padding: 4rem 0; */ } /* nims_section common */ .nims_section { background: #fff; border-radius: 20px; margin-bottom: 8rem; } .nims_section .t_box{width:100%;position:relative;margin-bottom:2rem;} .nims_section .t_box .cate{font-size:1rem;font-weight:700;color:var(--main-color);line-height:1.4;margin-bottom:0.4rem;} .nims_section .t_box .title{font-size:2.6rem;font-weight:700;color:#222;line-height:1.4; padding-bottom: 0.8rem; /* margin-bottom: 0.8rem; */ /* border-bottom: 1px solid #bababa; */ } .nims_section .core_ul{display:flex;gap:2rem;margin-top:2rem; justify-content: space-between;} .nims_section .core_ul li{display:flex;background:#fafafa;border-radius:0.5rem;padding:2rem;flex-direction: column;gap:3rem;width:calc(33.33% - 1rem);} .nims_section .core_ul li .b{font-size: 1.4rem; font-weight: 700;color: #222; width:100%;text-align:center;position:relative; word-break: keep-all;} .nims_section .core_ul li .b:after{content:'';position:absolute;width:20%;height:1px; background:#999;top:calc(100% + 1.2rem);left:50%;transform:translateX(-50%);} .nims_section .core_ul li .t{font-size: 1.05rem; font-weight: 300; line-height: 1.75; color: #333;word-break: keep-all;} .platfrom_flex{ display:flex; justify-content: space-between; } .platfrom_flex_child{ width:49%; text-align:center; display: flex; flex-direction: column; align-items: center; border: 1px solid #f5f5f5; border-radius: 20px; box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.1); padding:2.4em 2.2em 2em; justify-content: space-between; } .platfrom_flex_child_sub_title{font-size:1.5rem; margin-bottom: 1.1rem;} .platfrom_flex_child_sub_title b{} .platfrom_flex_child .platfrom_flex_child_sub_title_number{display: block; font-size: 2rem; font-weight: 700; /* margin-bottom: 0.5em; */ color: #0032c1;} .platfrom_flex_child .platfrom_flex_child_sub_title_time{font-size:1.4rem;} .platfrom_flex_child .btn{display: flex; justify-content: center; align-items: center; width: 100%; height: 3.5rem; padding-top: 0; line-height: 1; color: #000; border-radius: 5px; margin-top: 0.625rem; } .platfrom_flex_child .btn_remote_support{color: #fff; background-color: #222;} /* Titles */ .nims_section h2 { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 3rem; } /* Button */ .btn-primary { display: inline-block; padding: 1rem 2rem; font-size: 1rem; font-weight: 500; color: #fff; background: var(--color--orange01); text-decoration: none; border-radius: 50px; transition: opacity 0.3s ease; } .btn-primary:hover { opacity: 0.9; } /* Process */ .nims_section#process .step_ul{ display: flex; flex-wrap: wrap; gap: 1.6rem;} .nims_section#process .step_ul li { width: calc(33.33% - (1.6rem * 2 / 3)); padding: 1.8rem; background: #f5f5f5; border-radius: 10px; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.06); } .nims_section#process .step_ul li .title{font-size:1.4rem; font-weight:700;padding-bottom:0.8rem;margin-bottom:0.8rem;border-bottom:1px solid #bababa; color: var(--main-color);} .nims_section#process .step_ul li .text{font-size:1.0rem;line-height:1.47;word-break: keep-all;} .nims_section#process .step_ul li .text span{font-weight:700;} /* Platform info */ /* Platform Info base */ .platform-info { display: flex; align-items: center; /* gap: 1rem; */ justify-content: space-between; flex-direction: column; } .platform-info img { width: 80px; } .platform-info span { /* font-size: 1.4rem; */ font-weight: 500; } .platform-info p { font-size: 1rem; line-height: 1.6; } .platform-info a{color:#222} /* platform 섹션 전용 유니크 스타일 */ .nims_section.platform { /* background-color: #f9f9fb;*/ padding: 1.8rem; } .nims_section.platform .t_box{text-align:center;} .nims_section.platform .platform-info, .nims_section.platform .platform-auth { margin-bottom: 2.5rem; } .nims_section.platform .platform-info .info-text, .nims_section.platform .platform-auth .auth-text { font-size: 1rem; color: #555; margin-bottom: 1.2rem; line-height:1.6; word-break: keep-all; } .nims_section.platform .btn.btn-primary { display: inline-block; padding-top: 0.15em; height:3.5rem; width:100%; font-size: 16px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; line-height:1; /* margin-bottom:15px;*/ display: flex; justify-content: center; align-items: center; } /* .nims_section.platform .btn.btn-primary[href*="kakao"] { background-color: #fae100; color: #3c1e1e; } */ /* .nims_section.platform .btn.btn-primary[href*="kakao"]:hover { background-color: #e5cc00; } */ /* .nims_section.platform .btn.btn-primary[href*="757.co.kr"] { background-color: #000; color: #fff; } */ /* .nims_section.platform .btn.btn-primary[href*="757.co.kr"]:hover { background-color: #d14c3a; } */ /* Responsive */ @media screen and (max-width: 1024px) { /* .nims_section { padding: 2rem; } */ .features .feature { width: 45%; margin-bottom: 2rem; } .nims_section#process .step_ul li{ width:calc(50% - (1.6rem * 2 / 3)); } } @media screen and (max-width: 768px) { .nims_content { width: 100%; } .features .feature { width: 100%; margin: 1rem 0; } .nims_section h2 { margin-bottom: 2rem; } .nims_section .core_ul{ align-items: center; flex-direction: column; } .nims_section .core_ul li{ align-items: center; width:100%; } .nims_section .t_box .title{ font-size: 1.6rem; } .nims_section#process .step_ul{ justify-content: center; } .nims_section#process .step_ul li{ width:100%; } .platfrom_flex{flex-direction: column;} .platfrom_flex_child{width:100%;} .nims_section.platform {padding: 0;} .nims_section.platform .platform-info, .nims_section.platform .platform-auth { margin-bottom: 1.6rem; } } @media screen and (max-width: 480px) { .nims_section { padding: 1.5rem; border-radius: 10px; } .btn-primary { padding: 0.8rem 1.6rem; } .features .feature i { font-size: 2.4rem; } } /* ================================= //nims ================================= */