/* */ @charset "UTF-8"; /* 초기화 및 초기 세팅 */ :root { /* 버튼 및 인풋 폼 높이 세팅 */ --hd_height: 50px; --hd_height_m: 50px; --ic_date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cg id='ic_calenda' transform='translate(-0.214)'%3E%3Crect id='사각형_9174' data-name='사각형 9174' width='25' height='25' transform='translate(0.214)' fill='none'/%3E%3Cpath id='calendar_month_FILL0_wght400_GRAD0_opsz24' d='M122.193-858.068a2.112,2.112,0,0,1-1.549-.644,2.112,2.112,0,0,1-.644-1.549v-15.352a2.112,2.112,0,0,1,.644-1.549,2.112,2.112,0,0,1,1.549-.644h1.1V-880h2.193v2.193h8.773V-880h2.193v2.193h1.1a2.112,2.112,0,0,1,1.549.644,2.112,2.112,0,0,1,.644,1.549v15.352a2.112,2.112,0,0,1-.644,1.549,2.112,2.112,0,0,1-1.549.644Zm0-2.193h15.352v-10.966H122.193Zm0-13.159h15.352v-2.193H122.193Zm0,0v0Zm7.676,6.58a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,129.869-866.841Zm-4.386,0a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,125.483-866.841Zm8.773,0a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,134.256-866.841Zm-4.386,4.386a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,129.869-862.454Zm-4.386,0a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,125.483-862.454Zm8.773,0a1.061,1.061,0,0,1-.781-.315,1.061,1.061,0,0,1-.315-.781,1.061,1.061,0,0,1,.315-.781,1.061,1.061,0,0,1,.781-.315,1.061,1.061,0,0,1,.781.315,1.061,1.061,0,0,1,.315.781,1.061,1.061,0,0,1-.315.781A1.061,1.061,0,0,1,134.256-862.454Z' transform='translate(-116.786 882)' fill='%23585e65'/%3E%3C/g%3E%3C/svg%3E%0A"); --ic_time:url("data:image/svg+xml,%3Csvg id='ic_clock' xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Crect id='사각형_9176' data-name='사각형 9176' width='25' height='25' fill='none'/%3E%3Cpath id='schedule_FILL0_wght400_GRAD0_opsz24_1_' data-name='schedule_FILL0_wght400_GRAD0_opsz24 (1)' d='M94.319-864.173l1.507-1.507-3.984-3.984v-4.953H89.69v5.814Zm-3.553,5.706a10.484,10.484,0,0,1-4.2-.848,10.873,10.873,0,0,1-3.418-2.3,10.873,10.873,0,0,1-2.3-3.418,10.484,10.484,0,0,1-.848-4.2,10.484,10.484,0,0,1,.848-4.2,10.873,10.873,0,0,1,2.3-3.418,10.875,10.875,0,0,1,3.418-2.3,10.485,10.485,0,0,1,4.2-.848,10.485,10.485,0,0,1,4.2.848,10.875,10.875,0,0,1,3.418,2.3,10.872,10.872,0,0,1,2.3,3.418,10.484,10.484,0,0,1,.848,4.2,10.484,10.484,0,0,1-.848,4.2,10.873,10.873,0,0,1-2.3,3.418,10.873,10.873,0,0,1-3.418,2.3A10.484,10.484,0,0,1,90.766-858.467ZM90.766-869.234Zm0,8.613a8.3,8.3,0,0,0,6.1-2.517,8.3,8.3,0,0,0,2.517-6.1,8.3,8.3,0,0,0-2.517-6.1,8.3,8.3,0,0,0-6.1-2.517,8.3,8.3,0,0,0-6.1,2.517,8.3,8.3,0,0,0-2.517,6.1,8.3,8.3,0,0,0,2.517,6.1A8.3,8.3,0,0,0,90.766-860.62Z' transform='translate(-78 882)' fill='%23585e65'/%3E%3C/svg%3E%0A"); } div::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; } div::-webkit-scrollbar-thumb { background-color: var(--border100); border-radius: 100px; } html { font-size:10px;} body { margin: 0 auto; padding: 0; overflow: hidden scroll; background: var(--light); color: var(--text); } .mobile_wr{ max-width:576px; margin:0 auto; background: #fff; box-shadow: 0 0 1.5rem rgb(0 0 0 /2%);} /* 하단메뉴 높이만큼 padding값 추가 */ .mobile_wr:has(.bt_menu){ padding-bottom: 5.3rem;} /* 카테고리 페이지는 제외 */ .mobile_wr:has(.category_pg){ padding-bottom: 0;} .mobile_wr:has(.bt_menu) .go_top2{bottom: 6.3rem;} /* bar */ .bar{ height: 10px; background-color: var(--bg-light);} html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block } ul, dl,dt,dd { margin:0; padding:0; list-style:none } 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;} input[type="submit"] {cursor:auto;} button {cursor: auto;word-break: keep-all;} select {margin:0} p { margin:0; padding:0;} hr { display:none } a { text-decoration:none;} a:hover { text-decoration: none; } .un_reboot_a { color: var(--text); text-decoration: underline; } *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; word-break: normal; word-wrap: break-word; } img { max-width:100%; display:inline-block; height: auto; } .container-fluid {max-width: 2560px;} .mobile_wr { /*border-left: 1px solid #F2F2F2; border-right: 1px solid #F2F2F2;*/ box-sizing: content-box; min-height: 100vh; } /**************************************************/ /* 공통 class 설정 */ /**************************************************/ .flex_center{ justify-content: center; align-items: center;} .no_shadow{ box-shadow: none !important;} .vh_min100{min-height:100vh;} .vh_100_vh{height:100vh;} .w-auto{width:auto;} .w_80px{ width: 8.0rem;} .cursor_pointer{cursor: pointer;} .cursor_default{ cursor: default !important;} .over_hidden{overflow:hidden;} .text_dynamic{ white-space: pre-line;} .text-black{color:#121212;} .bg-primary-light{background:var(--primary-light);} .bg-light-50{ background: var(--light-50);} .dot_style_ul{ /*list-style-position: inside;*/ line-height: 1.3em; padding-left: 1.0rem;} .dot_style_ul > li::marker{content: "· "} .dot_style_ul > li:not(:last-of-type){ margin-bottom: 0.8rem;} .table_style{ border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .table_style th, .table_style td{ padding: 0.8rem 1.5rem; line-height: 1.3;} .table_style th{ background: var(--bg-light); text-align: center; } .table_style td{ border-bottom: 1px solid var(--border); } .table_style tr:last-child td{ border-bottom: 0; } /* 스크롤바 none */ .scroll_bar_none { -ms-overflow-style: none; scrollbar-width: none;} .scroll_bar_none::-webkit-scrollbar { display: none; } /*테이블 반응형때*/ .touch_scroll { overflow-x: auto; overflow-y: hidden; } .zd_2{position:relative;z-index:2;} .flex-center{ align-items: center; justify-content: center;} /* gap */ .gap_5{ gap: 0.5rem;} .gap_6{ gap:0.6rem;} .gap_8{ gap:0.8rem;} .gap_10{ gap:1.0rem;} .gap_12{ gap:1.2rem;} .gap_15{ gap:1.5rem;} .gap_16{ gap:1.6rem;} .gap_25{ gap:2.5rem;} .gap_30{ gap:3.0rem;} .price_count{ display: inline-flex; word-break: break-all; text-align: right;} .img_fil_gray_400{ filter: invert(57%) sepia(8%) saturate(324%) hue-rotate(160deg) brightness(93%) contrast(86%);} .icon_6{ width: 0.6rem; flex-shrink: 0;} .icon_7{ width: 0.7rem; flex-shrink: 0;} .icon_10{ width: 1.0rem; flex-shrink: 0;} .icon_12{ width: 1.2rem; flex-shrink: 0;} .icon_14{ width: 1.4rem; flex-shrink: 0;} .icon_15{ width: 1.5rem; flex-shrink: 0;} .icon_16{ width: 1.6rem; flex-shrink: 0;} .icon_18{ width: 1.8rem; flex-shrink: 0;} .icon_20{ width: 2.0rem; flex-shrink: 0;} .icon_26{ width: 2.6rem; flex-shrink: 0;} .icon_30{ width: 3.0rem; flex-shrink: 0;} .icon_35{ width: 3.5rem; flex-shrink: 0;} .icon_36{ width: 3.6rem; flex-shrink: 0;} .icon_40{ width: 4.0rem; flex-shrink: 0;} .icon_60{ width: 6.0rem; flex-shrink: 0;} .absol_a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;} .text_deco_through{ text-decoration: line-through;} .text_deco_underline{ text-decoration: underline;} /**************************************************/ /* 텍스트 설정 / 폰트 커스텀 */ /**************************************************/ .line_h1 { line-height:1.0em; } .line_h1_1 { line-height:1.1em; } .line_h1_2 { line-height:1.2em; } .line_h1_3 { line-height:1.3em; } .line_h1_4 { line-height:1.4em; } .line_h1_5 { line-height:1.5em; } .line_h1_6 { line-height:1.6em; } .line_h1_7 { line-height:1.7em; } .line_h1_8 { line-height:1.8em; } .line_h1_9 { line-height:1.9em; } .line_h2 { line-height:2.0em; } /*폰트커스텀 기본사이즈 10px*/ /* 페이지 타이틀 : .page_tit 검색 */ .tit_h1 { font-size: 2.0rem; font-weight: 700; line-height: 130%;} .tit_h2 { font-size: 1.8rem; font-weight: 700; line-height: 130%;} .tit_h3 { font-size: 1.6rem; font-weight: 700; line-height: 130%;} .sm_tit1{ font-size: 1.4rem; font-weight: 400; line-height: 130%; color: var(--gray-300);} .sm_tit2{ font-size: 1.4rem; font-weight: 400; line-height: 130%; color: var(--gray-400);} /* 상품 리스트 제목 */ .product_tit{ font-size: 1.5rem; font-weight: 400; line-height: 130%;} .fs_8 { font-size: 0.8rem; } .fs_9 { font-size: 0.9rem; } .fs_10 { font-size: 1.0rem; } .fs_11 { font-size: 1.1rem !important; } .fs_12 { font-size: 1.2rem !important; } .fs_13 { font-size: 1.3rem !important; } .fs_14 { font-size: 1.4rem !important; } .fs_15 { font-size: 1.5rem !important; } .fs_16 { font-size: 1.6rem !important; } .fs_17 { font-size: 1.7rem !important; } .fs_18 { font-size: 1.8rem !important; } .fs_19 { font-size: 1.9rem !important; } .fs_20 { font-size: 2.0rem !important; } .fs_21 { font-size: 2.1rem !important; } .fs_22 { font-size: 2.2rem; } .fs_23 { font-size: 2.3rem; } .fs_24 { font-size: 2.4rem; } .fs_25 { font-size: 2.5rem; } .fs_26 { font-size: 2.6rem; } .fs_27 { font-size: 2.7rem; } .fs_28 { font-size: 2.8rem; } .fs_29 { font-size: 2.9rem; } .fs_30 { font-size: 3.0rem; } .fw_100 { font-weight: 100; } .fw_200 { font-weight: 200; } .fw_300 { font-weight: 300; } .fw_400 { font-weight: 400; } .fw_500 { font-weight: 500; } .fw_600 { font-weight: 600; } .fw_700 { font-weight: 700; } .fw_800 { font-weight: 800; } .fw_900 { font-weight: 900; } .wh_pre { white-space: pre-line; } .keep_all{ word-break: keep-all;} .wh_nowrap { white-space: nowrap; } .break_all{word-break: break-all;} /*글자 줄임말/자르기*/ .line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;word-break: break-all;} .line1_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all;} .line2_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-break: break-all;} .line3_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;word-break: break-all;} /* 폰트컬러 */ /* 부트스트랩 class는 --var값으로 설정이 되어 있지 않아서 따로 만들었습니다. 필요시 추가해서 사용 */ .fc_primary{color: var(--primary);} .fc_secondary{color: var(--secondary);} .fc_text{color: var(--text);} .fc_gray_100{color: var(--gray-100);} .fc_gray_200{color: var(--gray-200);} .fc_gray_300{color: var(--gray-300);} .fc_gray_400{color: var(--gray-400);} .fc_gray_500{color: var(--gray-500);} .fc_gray_600{color: var(--gray-600);} .fc_gray_700{color: var(--gray-700);} .fc_red{color: var(--red);} .text-black{color:#000;} /**************************************************/ /* 공통요소 설정 */ /**************************************************/ /*노데이터*/ .no_data { display: flex; align-items: center; justify-content: center; flex-direction: column; } .no_data img{ width: 10.6rem;} .no_data_txt:has(p) h5{ margin-bottom: 1.0rem;} .no_data_txt h5{ font-size: 1.8rem; font-weight: 700; line-height: 1.4em; text-align: center; } .no_data_txt p{ color: var(--gray-300); line-height: 1.4em; } .dot_list li { list-style: none; margin-bottom:1.0rem; display: flex; } .dot_list li:before { content:"·"; vertical-align:middle; margin-right:0.5rem; } .dot_list li:last-child{margin-bottom:0;} .dot_list.fs_10 li{margin-bottom:0.3rem;} .ul_list{} .ol_list{padding-left: 2rem;} .ol_list li{margin-bottom:0.5rem;line-height: 140%;} /* 폼 사각형 */ .sq_guide { display:flex; flex-wrap: wrap; } .sq_guide li { width: 80px; height: 40px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0.5rem; } /* 버튼 */ /*바텀버튼*/ .bottom_btn { position: fixed; left: 50%; bottom: 0; width: 100%; padding: 1.0rem; max-width: 576px; transform: translateX(-50%); z-index: 1040; background: #fff; } /* 고탑버튼 */ .go_top2 { width: 4.0rem; height: 4.0rem; background: url(../img/go_top.png)no-repeat center; background-color: #fff; background-size: 1.9rem auto; z-index: 1000; border-radius: 50%; display: none; position: fixed; right: 50%; bottom: 7.6rem; transform: translateX(272px); border: 1px solid var(--border); box-shadow: rgb(0 0 0 / 7%) 0 0.3rem 0.6rem; } .go_top2.show{display: block;} /* 고탑버튼 설정 : wrap에 해당 클래스 넣어주면 됩니다. 바텀 메뉴 있는 경우가 기본설정입니다. */ .mobile_wr:has(.no_go_top) .go_top2.show{display: none;} /*.mobile_wr:has(.with_bt_menu) .go_top2{bottom: 7.6rem;}*/ .mobile_wr:has(.with_bt_btn) .go_top2{bottom: 8.0rem;} .mobile_wr:has(.no_bt_btn) .go_top2{bottom: 1.5rem;} .btn { height: var(--height);display: inline-flex;justify-content: center; align-items: center;border-radius: 1.0rem;font-size: 1.4rem;font-weight:500;padding-left:1.5rem;padding-right:1.5rem;word-break: keep-all;} .btn-sm {height: var(--height_sm);border-radius: 0.6rem;font-size: 1.2rem;padding-left:1.0rem;padding-right:1.0rem;} .btn-md { height: var(--height_md);border-radius: 0.8rem;font-size: 1.3rem;} .btn-lg { height: var(--height_lg);font-weight:700;font-size: 1.6rem;} .btn-link{height:auto;padding:0;cursor: pointer;display: flex;align-items: center;border-radius: 0;background: transparent;flex-shrink: 0;border: 0;} .btn-icon{height:auto;padding:0;cursor: pointer;display: flex;align-items: center;border-radius: 0;background: transparent;flex-shrink: 0;border: 0;} .btn-icon img{flex-shrink: 0;} .btn-light-primary{background:var(--primary-light);border-color:var(--primary-light);color:var(--primary);} .btn-light-primary:hover, .btn-light-primary:focus{color:var(--primary);} .btn-naver{background:#1CC800;border-color:#1CC800;color:#fff;} .btn-naver:hover, .btn-naver:focus{background:#1ABB00;border-color:#1ABB00;} .btn-kakao{background:#FFDD00;border-color:#FFDD00;color:#333;} .btn-kakao:hover, .btn-kakao:focus{background:#FFCC00;border-color:#FFCC00;} .btn-apple{background:#000;border-color:#000;color:#fff;} .btn-apple:hover, .btn-apple:focus{background:#222;border-color:#222;} .btn.disabled, .btn:disabled { opacity: 1; color: var(--gray-200) !important; background: var(--border100); border-color: var(--border100); } .btn-group-toggle .btn-outline-light:not(:disabled):not(.disabled).active, .btn-group-toggle .show > .btn-outline-light.dropdown-toggle { color: var(--primary); background-color: #fff; border-color: var(--primary); } .btn-group-toggle .btn-light:not(:disabled):not(.disabled).active, .btn-group-toggle .show > .btn-light.dropdown-toggle { color: #000; background-color: #fff; border-color: #000; } .btn-group-toggle .btn{margin-right:0.6rem;} .btn-group-toggle .btn:last-child{margin-right:0;} .btn-group-toggle .btn input[type=radio], .btn-group-toggle .btn input[type=checkbox], .btn-group-toggle .btn-group .btn input[type=radio], .btn-group-toggle .btn-group .btn input[type=checkbox] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .btn-group-full{display:flex;} .btn-group-full .btn{display:flex;padding-left:0.4rem;padding-right:0.4rem;} .btn_toggle_primary .btn-outline-light{border-color:#D6DAE5;} .btn_toggle_primary .btn-outline-light:not(:disabled):not(.disabled).active{color: var(--primary);background-color: #fff;border-color: var(--primary);font-weight:600;} /* 인풋 자동완성 초기화 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset; box-shadow: 0 0 0px 1000px var(--bg) inset; transition: background-color 5000s ease-in-out 0s; } input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset; box-shadow: 0 0 0px 1000px var(--bg) inset; transition: background-color 5000s ease-in-out 0s; } /* 입력 인풋 */ .form-control {height: var(--height);} .form-control-sm {height: var(--height_sm);border-radius: 0.6rem;} .form-control-md {height: var(--height_md);border-radius: 0.8rem;} .form-control-lg {height: var(--height_lg);} .form-control-auto {height: auto;} .form-control:focus{ border-color: var(--secondary);} .form-control:disabled, .form-control[readonly]{ border-color: var(--bg-light); color: var(--gray-400);} /* 인증번호 타이머 */ .code_input{ display: flex; align-items: center; padding: 0 1.5rem; background: #fff; } .code_input input[type="text"]{ border: 0; padding-right: 0; padding-left: 0; background: unset; } .code_input:has(input[type="text"]:focus){ border-color: var(--secondary); } .code_timer{ color: var(--red);} /* margin-left: 1.0rem; */ input.form-control{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;} .ip_wr .ip_tit { margin-bottom: 1.0rem; padding-left: 0.2rem;} .ip_tit h5 {font-size: 1.4rem;font-weight: 500; display: inline-block;position: relative;color: #000;} .ip_tit.required h5::after{ content: "*"; position: absolute;color: var(--primary);top: 0; right: -1.0rem;} .ip_wr .form-row .col-3{flex: 0 0 30.4%; max-width: 30.4%;} /* form-text */ .form-text { display: none; margin-top: 0.8rem; margin-left: 0.5rem; font-size:1.2rem; color: var(--text); } .form-text.ip_help{ display: block;} .ip_invalid .ip_invalid{display: flex; color: var(--danger);} .ip_invalid input.form-control{border-color: var(--danger); color: var(--danger);} .ip_valid .ip_valid{display: flex; color: var(--success);} /*.form-row*/ .form-row{margin-left:-0.5rem;margin-right:-0.5rem;} .form-row > .col, .form-row > [class*=col-]{padding-left:0.5rem;padding-right:0.5rem;} .form-row > .col-3 .btn{padding-left:0.5rem;padding-right:0.5rem;} /* textarea 높이 */ textarea.form-control { min-height: 16rem; padding: 1.5rem 1.5rem; line-height: 130%; resize: none; } .form-control textarea{min-height: 14rem; padding: 0; line-height: 130%;border:0;width:100%;} .form-control textarea:focus { color: var(--text); background-color: var(--bg); border-color: var(--gray); outline: 0; box-shadow: 0 0 0 0 var(--border); } .form-control textarea::placeholder { color: var(--input_placeholder); opacity: 1; } .form-control textarea:disabled, .form-control textarea[readonly] { background-color: var(--input_disabled); opacity: 1; } /* 셀렉트 박스 */ .custom-select, .custom-select2 { padding-right: 3.5rem; background-size: 2.0rem; padding-left: 1.5rem; font-size: 1.4rem; font-weight: 400; color: #000; min-width: 13.5rem; text-align: left; position:relative; } .custom-select{background: url(../img/ic_select.svg)no-repeat center right 1.5rem;background-size: 2.0rem;} .custom-select2:after{content:'';display:block;width:2.0rem;height:2.0rem;background: url(../img/ic_select.svg)no-repeat center center;background-size:cover;position:absolute;right:1.5rem;top:50%;transform: translateY(-50%);} .custom-select2[aria-expanded="true"]{border-radius:1rem 1rem 0 0;border-color: var(--gray);} .custom-select2[aria-expanded="true"]:after{transform: translateY(-50%) rotate(180deg);} .custom-select2 + .dropdown-menu{min-width: 100%;margin: -1px 0 0;border-color:var(--border);font-size: 1.5rem;border-radius: 0 0 1rem 1rem;border-color:var(--gray);border-top-color:var(--border);max-width: 100%;} .custom-select2 + .dropdown-menu a{padding:1.0rem 1.5rem;white-space: break-spaces;word-break: break-all;} .custom-select2 + .dropdown-menu a:hover{color: var(--primary);background: var(--light);} .custom-select option:disabled{ display: none;} /* 날짜 선택 */ input.form-control[type="date"], input.form-control[type="time"]{position: relative;} input.form-control[type="date"]::-webkit-calendar-picker-indicator, input.form-control[type="time"]::-webkit-calendar-picker-indicator{ -webkit-appearance: none; background: none; width: 100%; height: 100%; cursor: pointer; position: absolute; left: 0; top: 0; } input.form-control[type="date"]::before, input.form-control[type="time"]::before{ content: ''; display: block; width: 2.4rem; height: 2.4rem; position: absolute; top: 50%; transform: translateY(-50%); right: 1.6rem; background: var(--gray); cursor: pointer; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } input.form-control[type="time"]::before{ -webkit-mask: var(--ic_time); mask: var(--ic_time); } input.form-control[type="date"]::before{ -webkit-mask: var(--ic_date); mask: var(--ic_date); } /* .no-icon */ input.form-control.no-icon[type="date"]::before, input.form-control.no-icon[type="time"]::before{ display: none;} /*검색*/ .sch_ip {display: flex;border:1px solid var(--border);background: #fff;padding: 0 1.5rem 0 1.5rem;border-radius: 1.0rem;} .sch_ip .form-control{height:4.8rem;padding: 0.5rem 0;} .sch_ip .form-control:focus {background-color: transparent;} .sch_ip button{width:3.0rem;height:3.0rem;border:0;background: transparent;} /*회색 검색*/ .sch_gray.sch_ip{background: var(--light);border:0; border-radius: 5.0rem; padding-left: 2.0rem; height: 4.0rem;} .sch_gray.sch_ip .form-control{ background: transparent; font-size: 1.4rem; height: 4.0rem;} /* 검색어 삭제 버튼 */ input[type=search]::-ms-clear, input[type=search]::-ms-reveal { display:none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration{ display:none; } .sch_ip .sch_clear_btn{ width: 2.4rem; height: 2.4rem; display: none; } .sch_ip .sch_clear_btn img{ width: 2.4rem; height: 2.4rem; } /* 헤더 검색창 */ .sch_outline_secondary.sch_ip{ border-color: var(--secondary); padding: 0 0.4rem 0 1.6rem; } .sch_outline_secondary.sch_ip .form-control{ height: 3.6rem; padding: 0.4rem 0; background-color: transparent !important; } .sch_outline_secondary.sch_ip .btn_search{ background: var(--secondary); border-color: var(--secondary); width: 4.2rem; height: 2.8rem; padding: 0; } .sch_outline_secondary.sch_ip .btn_search img{ filter: invert(99%) sepia(70%) saturate(80%) hue-rotate(336deg) brightness(108%) contrast(100%); width: 1.8rem; } /* 체크박스*/ .checks_wr{display: flex; flex-wrap: wrap; margin-bottom: -1rem; } .checks_wr .checks{margin-right: 3rem; margin-bottom: 1rem;} .checks label{display: flex; align-items: center; cursor: pointer;} .checks label.chk_right{flex-flow: row-reverse; justify-content: flex-end;} .checks input{display: none;} .checks .ic_box { display: inline-block; width: 2.2rem; height: 2.2rem; border:1px solid var(--border100); border-radius:0.6rem; background-image: url(../img/check01_off.png); background-position: center; background-size: 1.0rem auto; background-repeat: no-repeat; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 0.8rem; flex-shrink: 0; } .checks input:checked + .ic_box{background-image:url(../img/check01_on.png);background-color:var(--primary);border-color:var(--primary);} .chk_right .ic_box{margin-right: 0; margin-left: 0.8rem;} input:checked ~ .chk_p{ color: var(--text);} .chk_p{padding-top:0.1rem; font-size: 1.5rem; color: var(--gray-400);} .checks.primary_checks .ic_box{background-color: #eae9f0;border-radius: 50%;background-image:none;} .checks.primary_checks input:checked + .ic_box{background-image: url(../img/check01_on.png);} .radios_wr{display: flex; flex-wrap: wrap;} .radios_wr .radios:not(:last-of-type){margin-right: 2rem;} .radios label{display: flex; align-items: center; cursor: pointer;} .radios label.chk_right{flex-flow: row-reverse; justify-content: flex-end;} .radios input{display: none;} .radios .ic_box { display: inline-flex; flex-shrink: 0; position: relative; width: 2.2rem; height: 2.2rem; text-align: center; background-color: #fff; display: flex; align-items: center; justify-content: center; margin-right: 0.8rem; border-radius: 2.0rem; border: 1px solid var(--border100); } .radios input:checked + .ic_box{border-color: var(--primary);} .radios input:checked + .ic_box:after { content: ''; display: block; width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: var(--primary); border: 0.03rem solid #fff; } /* 이미지 업로드 */ .touch_scroll:has(.image_upload) .container{ width: max-content;} .image_upload{display: inline-block;position: relative;margin-right:1.0rem;} .image_upload:last-of-type{ margin-right: 0;} .upload_box{ width: 11rem; border: 1px solid var(--border); overflow: hidden; cursor: pointer; background: url(../img/btn_add_img.png) no-repeat center top 35% / 4.0rem; border-radius: 1.0rem; position: relative; } .upload_box .max_img { position: absolute; bottom: 20%; width: 100%; left: 0; font-size: 1.3rem; text-align: center; color: var(--gray-300); font-weight:500; } .image_upload.on .upload_box{background: none;} .upload_del { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: transparent; padding: 0 !important; display: none; } .upload_del img{width:100%;} .image_upload.on .upload_del{display: flex;} /* 페이지네이션 */ .pagination {display: flex; justify-content: center; align-items: center; } .pagination li { height: 100%; } .pagination a { color: #000; font-weight: 500; margin: 0 0.4rem; width: 2.8rem;height: 2.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .pagination a.on { background-color: var(--primary);color:#fff; font-weight: 400; color: #fff; } .pagination a.arrow{background-color: #fff;color: #626C79;} .pagination a.arrow{margin:0;} .pagination a.arrow.disabled img{opacity:0.3;} /* 페이저 */ .pager { background: #ffffff; border-radius: 15rem; display: flex; justify-content: center; align-items: center; width: 170px; height: 45px; margin: 3rem auto 0; border: 1px solid var(--border); } /* 테이블 */ .table_01 {width:100%; border-collapse: collapse; border-bottom:1px solid #e3e3e3;border-top: 1px #eee solid;line-height: 140%;} .table_01 th { border-bottom: 1px solid #eee; color: #1C1C1E; font-weight: 500; padding: 0.7rem 1.2rem 0.7rem 1.2rem; background: #F8F8F8; vertical-align: top; } .table_01 td {border-bottom:1px solid #eee; padding:0.7rem 1.2rem;color: #1C1C1E;} /* 테이블 슬래쉬 */ .table_01 th.slash { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } .table_01 th.backslash { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } .table_01 th.slash, .table_01 th.backslash { text-align: left; } .slash div, .backslash div { text-align: right; } /*테이블 반응형때*/ .table_scroll { overflow-x: auto; overflow-y: hidden; padding: 0px !important; } /* 이미지 크롭 */ .rect{width: 100%;position: relative;overflow: hidden; } .rect:after{content: "";display: block;padding-bottom: 100%; } .rect img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} .rect2{width: 100%;position: relative;overflow: hidden; } .rect2:after{content: "";display: block;padding-bottom:24.212%; } .rect2 img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} .rect3 {width: 100%;overflow: hidden;position: relative;display: block;} .rect3::after { content: '';display: block; padding-bottom:58.255%;} .rect3 img {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} .rect4{width: 100%;position: relative;overflow: hidden; } .rect4:after{content: "";display: block;padding-bottom:67.962%; } .rect4 img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} /* 380 * 300 사이즈 기획전 리스트/슬라이드 배너 */ .rect5 {width: 100%;overflow: hidden;position: relative;display: block;} .rect5::after { content: '';display: block; padding-bottom: calc(300/380*100%);} .rect5>img {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} /* 365 * 129 비율 메인 슬라이드 배너 */ .rect6 {width: 100%;overflow: hidden;position: relative;display: block;} .rect6::after { content: '';display: block; padding-bottom: calc(129/365*100%);} .rect6>img {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);} /* 뱃지 */ .badge { display: flex; align-items: center; width: fit-content; -webkit-width: fit-content; padding: 0.2rem 0.6rem; border-radius: 1.0rem; font-weight: 500; font-size: 1.3rem; flex-shrink: 0; } .badge-outline-primary { color: var(--primary); border: 1px solid var(--primary);} .badge-outline-border100 { color: var(--gray-400); border: 1px solid var(--border100);} .badge-primary{ background: var(--primary); color: #fff;} .badge-primary50{ background: #F3E6FC; color: var(--primary);} .badge-disabled{ color: var(--gray-400); background: var(--border100); border-color: var(--border100);} .badge-md { font-size: 1.4rem; font-weight: 600; line-height: 1.4rem; padding: 0 1.2rem; border-radius: 0.6rem; height: 2.8rem; display: inline-flex; align-items: center; } .badge-sm { flex-shrink: 0; padding: 0.3rem 0.7rem; font-size: 1.2rem; border-radius: 0.4rem; } /*터치*/ .touch_scroll { overflow-x: auto; overflow-y: hidden; } /* List Style */ .list_style_1 li {display: flex;padding-bottom: 0.7rem;line-height: 1.4;} .list_style_1 li:last-child{padding-bottom:0;} .list_style_1 li > span{display: inline-block; width:8.0rem; padding-right: 0.5rem;flex-shrink: 0;} .list_style_2 li{display: flex; padding-bottom:0.8rem;} .list_style_2 li:before{content:'-';display: inline-block;margin-right:1.0rem;} .list_style_3 li {display: flex;justify-content: space-between;flex-wrap: wrap;} .list_style_3 li:last-child{margin-bottom:0 !important;} .list_style_3 li div{} /*탭*/ .tab_sticky{ position: sticky; top: var(--hd_height_m); z-index: 1001; height: fit-content; } /*nav-tabs*/ .nav-tabs { background: #F5F6F8; border-radius: 0.8rem; padding: 0.8rem; border: 0; flex-wrap: nowrap; } .nav-tabs .nav-link { height: 4.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #999; border: 0; margin-bottom: 0px; padding-left: 0.2rem; padding-right: 0.2rem; border-radius: 0.8rem; font-weight: 600; word-break: keep-all; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #495057; background: #fff; color: #000; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.06); } /*nav-pills*/ .nav-pills{ margin-left:-0.4rem; margin-right:-0.4rem; flex-wrap: nowrap; } .nav-pills .col{ padding-left:0.4rem; padding-right:0.4rem; } .nav-pills .nav-link { background: none; border: 0; border-radius: 1rem; background: #AAB1B7; color: #fff; } /*nav_tab_line*/ .nav_tab_line{ width: 100%; margin: 0; background-color: #fff; } .nav_tab_line { border: unset; border-bottom:1px solid var(--border100); } .nav_tab_line .nav-item{ text-align: center; background-color: #fff; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; width: 100%; } .nav_tab_line .nav-link { border: 1px solid white; color: var(--gray-300); height: 4.5rem; padding: 1.0rem 0.1rem; width: 100%; font-size: 1.6rem; font-weight: 600; background: transparent; } .nav_tab_line .nav-link.active, .nav_tab_line .nav-item.show .nav-link { border-bottom: 0.1rem solid var(--secondary); color: var(--secondary); transform: translateY(0.1rem); padding-bottom:1.2rem; } /*드롭다운*/ .dropdown-menu{padding-top:1.0rem;padding-bottom:1.0rem;} .dropdown-menu .dropdown-item{padding-top:0.7rem;padding-bottom:0.7rem;} .dropdown-menu .dropdown-item:hover{background:#F5F6F8;} /*커스텀 스위치*/ .custom-switch { padding: 0; width: 5.9rem; height: 3.2rem; } .custom-switch .custom-control-label::after { width: 2.6rem; height: 2.6rem; background-color: #fff; border-radius: 3rem; top: 0.3rem; left: 0.3rem; box-shadow: rgb(0 0 0 / 5%) 0 0 2px; } .custom-control-label::after { position: absolute; top: 0.3rem; display: block; width: 1rem; height: 1rem; content: ""; cursor: pointer; } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; left: 2.2rem; } .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: var(--primary); background-color: var(--primary); } .custom-control-label::before { background-color: #E3E3E3; border: 0; top: 0; cursor: pointer; } .custom-switch .custom-control-label::before { left: 0; width: 5.9rem; height: 3.2rem; border-radius: 2rem; } /* 초기 상태에서는 화살표 아래 아이콘을 보여줌 */ .collapse_wr .collapse_btn[aria-expanded="false"] img.arrow{transform: rotate(0deg);} /* 펼쳐진 상태에서는 화살표 위 아이콘을 보여줌 */ .collapse_wr .collapse_btn[aria-expanded="true"] img.arrow{transform: rotate(180deg);} .collapse_btn{ width: 100%; height: auto;} /* arrow 이미지를 가진 collapse 버튼인 경우에만 space-between으로 변경 */ .collapse_btn:has(img.arrow){ justify-content: space-between;} .collapse_btn img.arrow{ width: 2.0rem;} /* 아이템 카운터 */ .item_opt_counter { position: relative; width: 11.0rem; height: 3.0rem; line-height: 3.0rem; border-radius: 0.5rem; /* border: 1px solid var(--border);*/ flex-shrink: 0; display: flex; align-items: center; z-index:2; } .item_opt_counter_btn { width: 3.0rem; height: 3.0rem; vertical-align: top; padding: 0; border: 1px solid var(--border); border-radius: 0; flex-shrink: 0; } .item_opt_up_btn{ border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;} .item_opt_down_btn{ border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;} .item_opt_counter_btn.disabled, .item_opt_counter_btn:disabled{ border-color: var(--border200); background: var(--border100); } .item_opt_counter_btn.disabled img, .item_opt_counter_btn:disabled img{ filter: invert(73%) sepia(8%) saturate(215%) hue-rotate(156deg) brightness(91%) contrast(90%); } .item_opt_counter .quantity{ min-width: 3.0rem; height: 100%; vertical-align: top; color: #333333; font-size: 1.6rem; font-weight: bold; line-height: 4.4rem; text-align: center; border: unset; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: #fff; padding: 0 0.5rem; } .item_opt_counter .quantity:focus{outline: 0;} .item_opt_counter.time_counter { width: 15.0rem; height: 4.7rem; line-height: 4.7rem; border-radius: 3.6rem; border: 1px solid #E3E3E3; } .item_opt_counter.time_counter .quantity {color: #000;font-size: 1.8rem;} .item_opt_counter.disabled .quantity{color:#999;} .item_opt_counter.disabled .item_opt_counter_btn{opacity: 0.3;} /*에디터스타일*/ .edit_style{} .edit_style .h1, .edit_style h1{font-weight:700;font-size:3.5rem;margin-bottom:0.5rem;} .edit_style .h2, .edit_style h2{font-weight:700;font-size:2.5rem;margin-bottom:0.5rem;} .edit_style .h3, .edit_style h3{font-weight:700;font-size:1.8rem;margin-bottom:0.5rem;} .edit_style .h4, .edit_style h4{font-weight:700;font-size:1.5rem;margin-bottom:0.5rem;} .edit_style img { max-width: 100%; width: auto !important; margin: 0 auto; display: inline-block; } .edit_style p{white-space: pre-line;line-height: 160%;} .edit_style ol, .edit_style ul{padding-left: 1.4rem;line-height: 160%;} /* 찜하기 버튼 */ .like_btn img{ display: none;} .like_btn img.like_off{ display: unset;} .like_btn.active img.like_off{display: none;} .like_btn.active img.like_on{display: unset;} .btn-outline-border100.like_btn.active, .btn-outline-border100.like_btn:hover{ border-color: var(--border100) !important; color: var(--text) !important;} /**************************************************/ /* modal / 모달 */ /**************************************************/ /*기본모달*/ body{} body.modal-open{position: fixed; top: 0px; overflow-y: scroll; width: 100%;} body.modal-open[style]{padding-right: 0px !important;} .modal{padding-right: 0px !important;} .modal-dialog {max-height: 100%;height: 100%;} /* modal-sm */ .modal-sm { max-width: 33rem; margin: 0 auto; padding: 1.5rem; padding: 0rem 1.6rem; } /* modal-md */ .modal-md { max-width: 44rem; margin: 0 auto; padding: 1.5rem; padding: 0rem 1.6rem; max-height: calc(100% - 3.5rem); min-height: calc(100% - 3.5rem); } .modal-default{max-width:57.6rem;margin: 0 auto;padding-left:0;padding-right:0;padding: 2.0rem 1.6rem;} .modal{overflow-y: auto;} /* modal-header */ .modal .modal-header{align-items: center;padding: 2.0rem 2rem 1.6rem;justify-content: space-between;} .modal .modal-header .modal-title {font-weight: 700;font-size: 1.9rem;flex: 1 1 auto;} .modal .modal-header .close{text-shadow: none;opacity: 1; /*width:2.1rem;*/ padding: 0;margin: 0;} .modal .modal-content {border: 0;border-radius: 2.0rem; overflow: hidden;} /* modal-body */ .modal .modal-body { position: relative; flex: 1 1 auto; padding:3.5rem 1.0rem 3.0rem; text-align: center;} .modal .modal-body.with_img{ padding-top: 3.0rem;} .modal .modal-body .close_bar{width:4.4rem;height:0.4rem;background:#E3E3E3;border-radius:1.0rem;margin:0 auto 1.0rem;border: 0;display: block;} .modal-body .modal_img{ width: 6.4rem; margin-bottom: 2.0rem;} /* modal-footer */ .modal .modal-footer > *{margin:0;} .modal .modal-footer {padding: 0;border:0;display: block;} .modal .modal-footer .form-row{margin-right: -0.4rem; margin-left: -0.4rem;} .modal .modal-footer .btn{ border-radius: 0;} .modal-sm .modal-footer{} .modal-md .modal-footer{} .modal .modal-sm .modal-header{padding: 1.5rem 2rem;} .modal .modal-sm .modal-header .modal-title{font-size: 1.7rem;} .modal .modal-sm .modal-body{border:0;} .modal .modal-md .modal-header{} /*전체사이즈*/ .modal_full.modal{overflow-y: auto;} .modal_full.modal .modal-header { width: 100%; background: #fff; padding: 0rem 1.6rem; display: flex; align-items: left; justify-content: space-between; height: var(--hd_height_m); } .modal_full.modal .modal-header button{border:0;background:transparent;width:3.0rem;} .modal_full.modal .modal-content {border-radius: 0;max-height: 100vh;height: 100vh;} .modal_full.modal .modal-dialog{margin:0 auto;max-width:57.6rem;transform: translate(0%, 0);max-height: 100%;} .modal_full.modal .modal-body{border:0;padding: 2.0rem; text-align: left;} .modal_full.modal .modal-footer{padding-top:1.4rem;padding-bottom:1.4rem;display: block;padding-left: 1.6rem;padding-right: 1.6rem;} .modal_full.modal .modal-footer .form-row{margin-left: -5px;margin-right: -5px;} .modal_full.modal .modal-footer .btn{ border-radius: 1.0rem;} .modal_full.modal .bg-black .modal-title{background:#000;} /*하단 팝업*/ .modal_bottom.modal{padding-right:0 !important;overflow-y: hidden;} .modal_bottom.modal.fade{} .modal_bottom.modal.show .modal-dialog{padding-right:0 !important;transform: translate(-50%, 0);} .modal_bottom.modal .modal-dialog {transform: translate(0, 5rem);position: fixed; bottom: 0; width: 100%; max-width:100%; transform: translate(-50%, 5rem); left: 50%; } .modal_bottom.modal .modal-title button{border:0;background:transparent;width:3.2rem;position:absolute;right:2.0rem;top:1.6rem;} .modal_bottom.modal .modal-dialog{justify-content: flex-end;margin: 0 auto;min-height: 100%;max-width:57.6rem;} .modal_bottom.modal .modal-content{border-radius: 2.0rem 2.0rem 0 0;margin-top: 3.0rem;} .modal_bottom.modal .modal-body{border-bottom:0;padding: 2rem 1.6rem 2.0rem;} .modal_bottom.modal .modal-footer {padding: 1.0rem 1.6rem 1.5rem;} .modal-backdrop {left: 50%; width: 100%;transform: translateX(-50%);max-width:57.6rem;} .modal_bottom.modal .modal-dialog-scrollable .modal-content{ max-height: 50vh;} .modal_bottom.modal .modal-dialog-scrollable .modal-content .modal-body{ -ms-overflow-style: none;} .modal_bottom.modal .modal-dialog-scrollable .modal-content .modal-body::-webkit-scrollbar { display: none; } .modal_bottom.modal .modal-header{ border-color: var(--border50);} .modal_bottom.modal .modal-footer .btn{ border-radius: 1.0rem;} .scroll_text_modal .modal-dialog-scrollable .modal-body{ max-height: 400px; padding: 2.0rem 2.0rem 2.5rem; text-align: unset; } /* 토스트팝업 */ /* toast */ .toast{ display: flex; justify-content: center; position: fixed; top: 4.0rem; left: 0; left: 50%; transform: translateX(-50%); padding: 0 1.4rem; box-shadow: none; z-index: 9999; border: 0; background: transparent; font-size: 1.4rem; color: #fff; font-weight: 400; width: 100%; max-width: 57.6rem; } .toast-body { width: fit-content; -webkit-width: fit-content; max-width: 100%; min-width: 30.0rem; padding: 1.4rem 2rem; background-color: rgba(0, 0, 0, 0.8); border-radius: 2.2rem; text-align: center; } .toast-body p{ display: flex; align-items: center; line-height: 1.3; justify-content:center; } .toast-body p i{ margin-right: 0.6rem; } /**************************************************/ /* 패딩 마진 여백값 */ /**************************************************/ /*마진*/ .mt_1{margin-top:0.1rem;} .mt_7{margin-top:0.7rem;} .mt_8{margin-top:0.8rem;} .mt_12{margin-top:1.2rem;} .mt_16{margin-top:1.6rem;} .mt_20{margin-top:2.0rem;} .mt_25{margin-top:2.5rem;} .mt_40{margin-top:4.0rem;} .mt_60{margin-top:6.0rem;} .mb_1{margin-bottom:0.1rem;} .mb_4{margin-bottom:0.4rem;} .mb_6{margin-bottom:0.6rem;} .mb_7{margin-bottom:0.7rem;} .mb_8{margin-bottom:0.8rem;} .mb_10{margin-bottom:1.0rem;} .mb_12{margin-bottom:1.2rem;} .mb_20{margin-bottom:2.0rem !important;} .mb_25{margin-bottom:2.5rem;} .mb_30{margin-bottom:3.0rem;} .mb_40{margin-bottom:4.0rem;} .mb_50{margin-bottom:5.0rem;} .mb_60{margin-bottom:6.0rem;} .mr_3{margin-right:0.3rem;} .mr_4{margin-right:0.4rem;} .mr_6{margin-right:0.6rem;} .mr_7{margin-right:0.7rem;} .mr_8{margin-right:0.8rem;} .mr_12{margin-right:1.2rem;} .mr_16{margin-right:1.6rem;} .mr_20{margin-right:2.0rem;} .mr_40{margin-right:4.0rem;} .ml_3{margin-left:0.3rem;} .ml_4{margin-left:0.4rem;} .ml_6{margin-left:0.6rem;} .ml_7{margin-left:0.7rem;} .ml_8{margin-left:0.8rem;} .ml_16{margin-left:1.6rem;} .ml_20{margin-left:2.0rem;} .my_8{ margin-top: 0.8rem; margin-bottom: 0.8rem;} .my_12{ margin-top: 1.2rem; margin-bottom: 1.2rem;} .my_20{ margin-top: 2.0rem; margin-bottom: 2.0rem;} .mx_n16{margin-left:-1.6rem;margin-right:-1.6rem;} .mx_n20{margin-left:-2.0rem;margin-right:-2.0rem;} /*패딩*/ .pt_1{padding-top:0.1rem;} .pt_6{padding-top:0.6rem;} .pt_8{padding-top:0.8rem;} .pt_16{ padding-top: 1.6rem;} .pt_20{ padding-top: 2.0rem;} .pt_25{padding-top:2.5rem;} .pt_30{padding-top:3.0rem;} .pt_40{ padding-top: 4.0rem;} .pt_50{ padding-top: 5.0rem;} .pt_60{ padding-top: 6.0rem;} .pb_8 { padding-bottom: 0.8rem;} .pb_15{padding-bottom:1.5rem;} .pb_16{padding-bottom:1.6rem;} .pb_18{padding-bottom:1.8rem;} .pb_20{padding-bottom:2.0rem;} .pb_25{padding-bottom:2.5rem;} .pb_40{padding-bottom:4.0rem;} .pb_50{padding-bottom:5.0rem;} .pb_60{padding-bottom:6.0rem;} .pb_70{padding-bottom:7.0rem;} .pl_16 { padding-left: 1.6rem;} .pl_20 { padding-left: 2.0rem;} .pr_16{padding-right:1.6rem;} .py_6{ padding-top: 0.6rem; padding-bottom: 0.6rem;} .py_8{ padding-top: 0.8rem; padding-bottom: 0.8rem;} .py_16{ padding-top: 1.6rem; padding-bottom: 1.6rem;} .py_20{padding-top:2.0rem !important; padding-bottom:2.0rem !important;} .py_35{padding-top:3.5rem;padding-bottom:3.5rem;} .px_8{padding-left:0.8rem;padding-right:0.8rem;} .px_12{padding-left:1.2rem;padding-right:1.2rem;} .px_15{padding-left:1.5rem;padding-right:1.5rem;} .px_16{padding-left:1.6rem;padding-right:1.6rem;} .px_18{padding-left:1.8rem;padding-right:1.8rem;} .px_20{padding-left:2.0rem;padding-right:2.0rem;} .p_6{ padding: 0.6rem;} .p_16{ padding: 1.6rem;} .p_20{ padding: 2rem;} .px_16_py_12{ padding: 1.2rem 1.6rem;} .px_16_py_20{ padding: 2.0rem 1.6rem;} .px_16_py_30{ padding: 3.0rem 1.6rem;} /**************************************************/ /* header / 헤더 */ /**************************************************/ .hd_m { display: flex; align-items: center; justify-content: space-between; height: var(--hd_height_m) !important; width: calc(100% + 2px); max-width: 576px; background: #fff; position: fixed; top: 0; left: 50%; transform: translateX(-50%); padding: 0 1.6rem; z-index: 1000; /* border-bottom: 1px solid #F6F6F6;*/ box-shadow: 0 0 0.6rem rgb(0 0 0 / 5%); } .hd_m .logo{ flex-shrink: 0;} .hd_m .logo img{width:7.5rem; display:flex; margin-right: 0.7rem;} .hd_m .log_txt{font-size:1.4rem;padding-left:0.5rem;} .hd_m .log_txt span {padding: 0 0.5rem;} .hd_m button{border:0; background: transparent;} .hd_m button img, .hd_m a img{ max-height:3.0rem;} .page_tit{ font-size: 1.8rem; font-weight: 600; color: var(--text); } .hd_m .hd_btn, .modal-header .hd_btn {display: flex;align-items: center;} .hd_m .hd_btn button{ position: relative; width: 3.0rem; margin-left: 1.5rem; } .hd_arrow_down img{ width: 2.0rem; height: auto;} /* 장바구니 아이템 갯수 */ .hd_cart_btn span{ display: none;} .hd_cart_btn.count span{ position: absolute; top: -0.3rem; right: -0.3rem; color: #fff; font-size: 0.9rem; font-weight: 500; background: var(--primary); display: block; border-radius: 0.8rem; padding: 0.2rem 0.5rem; } /* 알림 있음 표시 */ .hd_notification_btn::after{ content: ""; display: block; width: 0.5rem; height: 0.5rem; background: var(--primary); position: absolute; right: 0.0rem; top: 0.3rem; border-radius: 1.0rem; } .hd_notification_btn.no_alert::after{ display: none;} /* 모바일 메뉴 */ .hd_menu_btn {font-size: 2rem;} .m_menu_wr { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 50%; width: 100%; height: 100%; max-width: 57.6rem; z-index: 99999; transition: all 0.5s ease-in-out; display: flex; justify-content: flex-end; overflow: hidden; transform: translateX(-50%); } /* x버튼 */ .close_btn_wr{display: none; opacity: 0;} .m_nav .close_btn_wr{display: flex; justify-content: flex-end; opacity: 0;} .menu_on .m_nav .close_btn_wr{opacity: 1;} .close_btn{font-size: 2rem; border:0; height: auto; } .close_btn img{width:3.0rem;} /* 메뉴 열렸을때 외부 */ .menu_on .m_menu_wr{visibility: visible; opacity: 1; } .m_nav{position: relative; width: 100%; height: 100%; z-index: 99999; background: #fff; transition: all 0.4s ease-in-out; max-width: 0; transform: translateX(100%); visibility: hidden; opacity: 0; } .menu_on .m_nav { transform: translateX(0%); visibility: visible; opacity: 1; max-width: 57.6rem; width: 80%; } .menu_bg{position: fixed; left: 50%; top: 0; background: rgba(0,0,0,0.6); transition: all 0.4s ease-in-out; width: 100%; height: 100%; z-index: 99998; visibility: hidden; opacity: 0; transform: translateX(-50%); max-width:57.6rem;} .menu_on .menu_bg{visibility: visible; opacity: 1;} /* 메뉴 열렸을때 내부 */ .m_nav .nav_wr{height: auto;} .m_nav .nav_ul{display: block;} .m_nav .nav_li{height: 100%; position: relative;} .m_nav .nav_a{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 1.2rem 1.6rem;} .m_nav .nav_a i{display: inline-block;} .m_nav .nav_a img{width:2.0rem;} .m_nav .nav_ul2{display: none;background: var(--light);} .m_nav .nav_ul2 a{display: block; padding: 1.2rem 1.6rem; white-space: nowrap;} /*하단메뉴*/ .bt_menu { width: calc(100% + 2px); max-width: 576px; background: #fff; position: fixed; bottom: -1px; left: 50%; transform: translateX(-50%); z-index: 1000; display: block; } .bt_menu ul { display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 0 1.0rem; height: 5.4rem; /* border-top: 1px solid var(--border);*/ box-shadow: rgb(0 0 0 / 5%) 0 0 0.6rem; } .bt_menu ul li{width:20%;max-width:6.0rem;} .bt_menu ul li a { display: inline-block; color:var(--gray-600); font-weight:600; font-size:1.1rem; padding-bottom: 1px; } .bt_menu ul li .ico { width: 2.4rem; display: block; margin: 0 auto; margin-bottom: 0.5rem; } .bt_menu ul li .img_on{display:none;} .bt_menu ul li.on a{color:var(--primary);} .bt_menu ul li.on .img_on{display:block;} .bt_menu ul li.on .img_off{display:none;} /**************************************************/ /* footer / 푸터 */ /**************************************************/ .ft { background: var(--bg-light); color: var(--gray-500); padding: 3.0rem 0 4.0rem; } .ft .fnb a{ display: inline-block; font-size: 1.4rem; } .ft span.line{margin:0 2.0rem;} .ft p{ font-size: 1.2rem; font-weight: 300; } /**************************************************/ /* 메인 페이지 */ /**************************************************/ .mobile_wr:has(.idx_pg) .hd_m{ box-shadow: unset;} .idx_pg { min-height: calc(100vh - var(--hd_height_m)); padding-top: var(--hd_height_m);} /* 추천인 코드 모달 */ .round_btn_modal.modal .modal-body{ padding: 2.0rem; } .round_btn_modal.modal .modal-footer{ padding: 1.0rem 2.0rem 2.0rem; } .round_btn_modal.modal .modal-footer .btn{ border-radius: 1.0rem; min-width: 12.0rem; } /* 비회원 불가 모달 */ .no_login_modal.modal_bottom.modal .modal-dialog-scrollable .modal-content{ max-height: unset; } .no_login_modal.modal_bottom.modal .modal-header{ border-bottom: 0; padding: 1.0rem 2.0rem;} .no_login_modal.modal_bottom.modal .modal-footer{ padding: 0;} .no_login_modal .sns_login_btn{ height: 5.0rem; border-radius: 0.6rem; font-size: 1.7rem; color: var(--text); border: 1px solid var(--border100); background-position: 16px 50%; background-repeat: no-repeat; } .no_login_modal .sns_login_btn.kakao_login{ background-image: url('../img/no_login_kakao.png'); background-color: #FEE500; border-color: #FEE500; } .no_login_modal .sns_login_btn.google_login{ background-image: url('../img/no_login_google.png'); background-color: #fff; border-color: #D5D5D5; } .no_login_modal .sns_login_btn.apple_login{ background-image: url('../img/no_login_apple.png'); background-color: #000; border-color: #000; color: #fff; } /* 메인 모달 */ .modal .main_modal .modal-body{ padding: 0;} .idx_top_sticky{ position: sticky; top: var(--hd_height_m); left: 0; width: 100.03%; z-index: 999; background: #fff; padding-top: 1px; } /* 상단 탭 */ .main_top_tab.shadow{ box-shadow: 0 0 0.6rem rgb(0 0 0 / 5%) !important;} .main_top_tab ul{ width: max-content; gap:1.2rem; padding-top: 1.8rem; } .main_top_tab ul li{ flex-shrink: 0; font-size: 1.5rem; font-weight: 400; } .main_top_tab ul a { display: block; position: relative; padding: 0 0.4rem 0.8rem; } .main_top_tab ul a span{ font-size: 1.5rem;} .main_top_tab ul .on a span{ font-weight: 700;} .main_top_tab ul .on a span::after{ content: ""; width: 100%; height: 0.3rem; position: absolute; bottom: 0; left: 0; background: var(--secondary); } /* 메인 슬라이드 */ .main_slide_sect{ padding-top: 1.0rem; } .main_slide { position: relative;} .main_slide_wr .swiper-slide{ padding-right: 1.6rem; padding-left: 1.6rem;} .main_slide_wr .swiper-slide img{ border-radius: 1.3rem;} .main_slide_wr .swiper-pagination{ bottom: 1.0rem; right: 2.6rem; left: unset; } /* 메인 퀵메뉴 */ .main_quick_menu{ padding: 1.5rem 0;} .main_quick_menu ul{ width: max-content;} .main_quick_menu ul > li{ cursor: pointer; flex-shrink: 0; } .main_quick_menu ul img{ width: 5.0rem; margin-bottom: 0.8rem; flex-shrink: 0; } .main_quick_menu ul p{ font-size: 1.3rem; font-weight: 500; } /* 기획전 슬라이드 */ .event_slide_sect .swiper-slide{ padding-right: 1.6rem; padding-left: 1.6rem;} /* 기획전 텍스트 슬라이드 */ .event_text_slider{ background: var(--light); padding-top: 5.0rem;} .event_text_slide .event_text h3{ font-size: 2.2rem; font-weight: 700; line-height: 1.4em; margin-bottom: 0.8rem; word-break: keep-all;} .event_text_slide .event_text p{ font-size: 1.3rem; font-weight: 300; line-height: 1.4em; color: var(--gray-400); word-break: keep-all;} /* 기획전 이미지 슬라이드 */ .evnet_img_slider{ background: linear-gradient(0deg, rgba(255,255,255,1) 70%, rgba(245,246,248,1) 70%);} .evnet_img_slide .rect5{ border-radius: 2.0rem;} /* 기획전 슬라이드 버튼 */ .event_slider_btn{ background: var(--light); padding: 1.6rem 1.6rem 2.0rem;} .event_slider_btn .slide_btn_wr .btn{ width: 3.8rem; height: 3.8rem;} /* 기획전 섹션 */ .event_sect{ background-repeat: no-repeat; background-position: top left; background-size: cover; padding-bottom: 2.0rem; } /* 기획전 섹션 제목영역 */ .event_sect .sect_tit_wr{ margin-bottom: 0.5rem;} .event_sect .sect_tit_wr a{ display: block; height: 7.0rem; width: 100%; } .event_sect .product_list_wr{ width: max-content;} .event_sect .product_list_wr .prod_list{ width: 17.0rem; transition-property: width; transition-duration: .5s;} .event_sect .product_list_wr .prod_list:not(:last-of-type){ margin-right: 0.8rem;} /***** 메인 신상품 페이지 *****/ /* 카테고리 */ .main_cate_wr .main_cate_ul{ display: flex; gap: 0.3rem; width: max-content; padding-top: 1.6rem; padding-bottom: 1.2rem; } .main_cate_ul a{ display: flex; flex-direction: column; align-items: center; width: 7.8rem; } /* 카테고리 아이콘 */ .main_cate_ul .cate_icon_box { width: 6.0rem; height: 6.0rem; background: var(--bg-light); margin-bottom: 0.6rem; padding: 1.0rem; } .main_cate_ul .cate_icon_box img { /* 이미지 드래그 방지 */ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } /* 카테고리 텍스트 */ .main_cate_ul li p{ font-size: 1.2rem; color: var(--text); line-height: 1.3em; letter-spacing: -1px; text-align: center; } /* 선택했을 때 */ .main_cate_ul li.active p{ color: var(--primary); font-weight: 600; } .cate_2dep_menu li.active p{ color: var(--primary); font-weight: 600; } .main_cate_ul li.active .cate_icon_box{} .main_cate_ul li.active .cate_icon_box img{} /***** 기획전 페이지 *****/ .event_list_wr ul li:not(:last-of-type){ margin-bottom: 1.5rem;} .event_list_wr ul li a{ position: relative; border-radius: 2.0rem; } .event_list_wr ul li a::before{ content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(36,40,59,0.35) 0%, rgba(36,40,59,0) 100%); position: absolute; top: 0; left: 0; z-index: 1; } .event_list_wr .event_text{ width: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; text-align: center; color: #fff; padding: 1.0rem 2.0rem 3.0rem; text-shadow: 0 0 0.2rem rgb(0 0 0 / 10%); line-height: 1.4em; } .event_list_wr .event_text h3{ font-size: 2.0rem; font-weight: 800; margin-bottom: 0.8rem;} .event_text h3, .event_text p{ word-break: keep-all;} /***** 기획전 상세 페이지 *****/ .event_text_wr{ } .event_text_wr h3, .event_text_wr p{ word-break: keep-all; line-height: 1.4em;} /**************************************************/ /* 서브 페이지 */ /**************************************************/ /*서브*/ .sub_tit { position: relative; } .sub_pg { min-height: 100vh; background: #fff; padding-top: var(--hd_height_m); position: relative; } .mobile_wr:has(.bt_menu) .sub_pg{ min-height: calc(100vh - 5.3rem);} .sect_tit{ margin-bottom: 2.0rem;} /***** 로그인 페이지 *****/ .login_pg{ background: linear-gradient(0deg, rgba(253,254,255,1) 0%, rgba(250,243,255,1) 100%);} .login_layout > .container{ padding-top: 4.0rem;} .login_layout .logo_img{ width: 18.0rem; margin-bottom: 4.0rem; margin-top: 2.0rem;} .login_menu{ font-size: 1.4rem; margin-top: 2.5rem;} .sns_login .btn{ max-width: 6.0rem;} /***** 회원가입: 약관동의 페이지 *****/ .join_layout > .container { padding-bottom: 10.0rem; padding-top: 4.0rem;} .join_pg .checks_wr{ display: unset;} .join_pg .checks_wr .checks{ margin-right: 0; margin-bottom: 2.0rem;} .join_pg .checks_wr .checks.with_terms{ display: flex; justify-content: space-between; align-items: center;} .checks .view_terms{ width: 2.0rem;} /* 전체동의 체크박스 */ .join_pg .all_chk{ border: 1px solid var(--border100); border-radius: 1.0rem; padding: 2.0rem 1.5rem; } .join_pg .all_chk .chk_p{ font-size: 1.7rem; font-weight: 700;} /***** 회원가입: 회원가입 완료 페이지 *****/ .done_layout{ height: calc(100vh - 8.0rem); min-height: unset;} .done_layout > .container{ height: 100%;} .done_layout .done_img{ width: 7.5rem; margin-bottom: 2.5rem;} /***** 상품 상세 페이지 *****/ /* 바텀버튼 */ .go_cart_btn{ width: 5.0rem; padding: 0.5rem; margin-right: 0.8rem; } .mobile_wr:has(.product_dt_layout){ padding-bottom: 7.0rem;} .prod_sec_tit_wr{margin-bottom: 1.5rem; line-height: 1.3;} .prod_sec_tit{ font-size: 1.8rem; font-weight: 700;} .prod_sec_tit_wr .sm_tit{ font-size: 1.4rem; color: var(--gray-400); margin-top: 0.8rem;} /* 상품사진 슬라이드 */ .slide_wr{ overflow: hidden; position: relative;} .thumbnail_slide{ position: relative;} .thumbnail_slide .swiper-slide img{ aspect-ratio: 1 / 1; object-fit: cover; } /* .thumbnail_slide_wr .swiper-pagination-bullet{ background: var(--border100); opacity: 1;} .thumbnail_slide_wr .swiper-pagination-bullet-active{ background: var(--primary);} .thumbnail_slide_wr .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .thumbnail_slide_wr .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 var(--swiper-pagination-bullet-horizontal-gap,5px)} */ .naver_price_btn{ background: #03C75A; color: #fff; font-size: 1.2rem; font-weight: 500;} .naver_price_btn:hover{ color: #fff;} .slide_pagination_style{ display: inline-block; width: auto; padding: 0.6rem 1.2rem; background: rgb(0 0 0 / 50%); color: #fff; font-size: 1.2rem; font-weight: 500; } .thumbnail_slide .swiper-pagination{ left: 1.6rem; bottom: 1.6rem; } /* 찜버튼 */ .thumbnail_slide .like_btn{ position: absolute; bottom: 1.6rem; right: 1.6rem; background: rgb(0 0 0 / 50%); border-radius: 50%; z-index: 10; width: 2.4rem; height: 2.4rem; } /* 상품 이름 */ .product_dt_tit{ font-size: 1.8rem; font-weight: 600; line-height: 1.4em; margin-bottom: 1.0rem; } /* 평균 별점 */ .review_average_sm{ display: flex; align-items: center; font-size: 1.1rem; margin-bottom: 1.5rem; } .review_average_sm img{ width: 1.4rem; margin-right: 0.2rem; } /* 상품 가격 */ .price .cost{ color: var(--gray-300); font-size: 1.2rem; text-decoration: line-through; margin-bottom: 0.3rem; } .price strong{ font-size: 2.0rem; font-weight: 700; } .price .discount_rate{ color: #DB1C0C; margin-right: 0.5rem; } /*** 상품 상세 페이지 : 탭버튼 ***/ /* .product_dt_layout .tab_btn_group .nav_tab_line .nav-link{ padding: 0 0.1rem; height: 5.6rem !important; } */ /*** 제품 디테일 탭 영역 ***/ /* 상품정보 */ .editor_cont_wr { /* padding: 3.0rem 0; */ height: 40.0rem; overflow: hidden; line-height: 1.4em; } .prdt_dt_wr .editor_cont_wr figure { max-width: 100%; } .editor_cont_wr > p, .editor_cont_wr > [class*=h], .editor_cont_wr > span, .editor_cont_wr > b, .editor_cont_wr > strong, .editor_cont_wr > i, .editor_cont_wr > pre{ padding-left: 1.6rem; padding-right: 1.6rem;} /* 상품 정보 더보기 버튼 */ .prdt_dt_more{ position: absolute; bottom: 0; left: 0; padding: 6.5rem 1.6rem 0; width: 100%; background: linear-gradient(0deg, rgba(255,255,255,1) 58%, rgba(255,255,255,0) 100%); } /* 더보기 버튼 클릭시 */ .editor_cont_wr.show{ height: unset; overflow: unset; } .editor_cont_wr.show ~ .prdt_dt_more{ display: none;} /* 상품정보제공고시 */ .prdt_info_notice{ width: 100%; } .prdt_info_notice .row_line:not(:last-of-type){ padding-bottom: 1.5rem;} .prdt_info_notice .col_box{ font-size: 1.3rem; line-height: 1.4em;} .prdt_info_notice .col_box.tit{ color: var(--gray-400); font-weight: 500; padding-right: 2.0rem;} /* 매장정보 */ .store_info_wr{} .store_info_wr .store_info_top{ margin-bottom: 2.0rem;} .store_info_wr .store_img{ width: 7.4rem; margin-right: 1.0rem;} .store_info_wr .store_tit{ font-size: 1.5rem; font-weight: 600; margin-bottom: 1.0rem; } .store_info_wr .store_address{ font-size: 1.3rem; color: var(--gray-400); margin-bottom: 1.0rem; } .store_info_wr .store_number{ font-size: 1.3rem; color: var(--gray-400); } .store_info_wr .store_number span{ color: var(--text); margin-left: 0.5rem;} .store_info_wr .store_number span.line{ display: block; width: 0.1rem; height: 0.8rem; background: var(--border200); margin: auto 0.8rem; } /* 매장정보 버튼 영역 */ .store_info_btn{ margin-bottom: 2.0rem;} /* 매장정보 지도 영역 */ .store_info_map .map_wr{ width: 100%; height: 15.0rem; margin-bottom: 1.5rem; } /* 지도 마커 아이콘 */ .map_marker{ width: 2.5rem;} /* 매장 정보 */ .map_info_wr li{ display: flex; align-items: start; font-size: 1.4rem; line-height: 1.3em; } .map_info_wr li:not(:last-child){ margin-bottom: 1.0rem;} .map_info_wr li img{ margin-right: 0.7rem;} .map_info_wr .holiday_notice{ flex-shrink: 0;} /* 리뷰 */ .rivew_average_wr{ padding-bottom: 2.0rem;} /* 평균별점 */ .star_grade{position:relative; width: fit-content;} .star_grade .star_on{display:block;overflow: hidden;position: absolute;} .star_grade .star_off{display:block;} .star_grade .star_on img, .star_grade .star_off img { width: 13.0rem; max-width: 13.0rem; display: block; } /* 상품 갯수 / 필터선택 영역 */ .count_wr{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.0rem; } .count_wr .count_num{ font-size: 1.4rem;} .count_wr .count_num span{ font-weight: 500; color: var(--primary);} /* 필터 선택 버튼 */ .filter_btn{ font-size: 1.5rem; font-weight: 300;} .filter_btn img{ width: 1.8rem; margin-right: 0.5rem;} /* 리뷰 내용 */ article.review{ padding: 1.6rem; } article.review:first-of-type{ padding-top: 0;} article.review:not(:last-of-type){ border-bottom: 1px solid var(--border100);} article.review .user_id{ display: block; font-size: 1.2rem; color: var(--gray-300);} .review .profile_circle_box{ width: 2.2rem; height: 2.2rem; margin-right: 0.4rem;} .review_info{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.0rem; } .rv_star{display:flex;} .rv_star img{width:1.6rem;} .rv_info { font-size: 1.2rem; color: var(--gray-300); display: flex; } .rv_info .btn{ font-size: 1.2rem; color: var(--gray-300);} /* 리뷰 이미지 */ .review_img{ margin-bottom: 1.5rem;} .review_img .img_col_box:nth-child(3) .rect::before{ content: "+ 더보기"; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; color: #fff; font-size: 1.5rem; background: rgb(0 0 0 / 60%); } .review_img .img_col_box .rect{ border-radius: 1.0rem; cursor: pointer;} /* 리뷰 내용 */ .review_text p{ line-height: 1.4em; cursor: pointer; } .review_text p.show{ white-space: pre-line; overflow: unset; text-overflow: unset; display: unset; -webkit-line-clamp: unset; -webkit-box-orient: unset; word-break: break-all; cursor: default; } .more_btn_sm{ min-width: 12.8rem; height: 3.9rem; font-size: 1.4rem; font-weight: 600; } /* 상품 문의 */ /* 문의하기 버튼 */ .inquiry_btn_wr + #inquiry_list_wr .inquiry_list_wr{ margin-top: 1.6rem; border-top: 1px solid var(--border); } .inquiry_list_wr .collapse_btn{ padding: 2.0rem 1.6rem; flex-direction: column; align-items: start; border-bottom: 1px solid var(--border100); height: 8.5rem !important; } /* 비밀글 아이콘 */ .inquiry_list_wr .secret_ico{ margin-right: 0.3rem; flex-shrink: 0; display: none;} .inquiry_list_wr .secret_inq .secret_ico{ display: unset;} /* 문의글 제목 */ .inq_tit{ font-size: 1.5rem; line-height: 1.4em; text-align: left;} .inquiry_list_wr .collapse_btn span.line{ color: var(--border100); margin: 0 0.5rem;} /* 처리상태 */ .inquiry_list_wr .collapse_btn span.inquiry_status{ font-weight: 500;} .inquiry_list_wr .collapse_btn span.inquiry_status.done{ color: var(--primary); } /* 문의 내용 */ .inquiry_list_wr .collapse_cont{ background: var(--bg-light);} .inquiry_list_wr .user_cont_wr{ padding: 2.5rem 1.6rem; line-height: 1.4em; border-bottom: 1px solid var(--border100);} .inquiry_list_wr .user_cont { white-space: pre-line;} .inquiry_list_wr .user_tit{ font-weight: 600; margin-bottom: 1.5rem;} .inquiry_list_wr .store_cont_wr{ padding: 2.5rem 1.6rem; line-height: 1.4em; border-bottom: 1px solid var(--border100);} .inquiry_list_wr .store_name{ font-weight: 600; margin-bottom: 1.5rem;} .inquiry_list_wr .store_cont{ white-space: pre-line; margin-bottom: 1.5rem;} .inquiry_list_wr .store_date{ color: var(--gray-300); font-size: 1.3rem;} /* 상품 안내 */ .prdt_notice_wr li{ margin-bottom: 2.0rem;} .collapse_btn .sect_tit{ margin-bottom: 0;} .prdt_notice_wr .collapse_btn{ padding: 1.0rem 0; padding-bottom: 2.0rem; justify-content: space-between; align-items: center; } .prdt_notice_wr .prdt_notice_cont{ background: var(--light); padding: 2.0rem; border-radius: 1.0rem; line-height: 1.4em; font-size: 1.3rem; } /*** 신고하기 모달 ***/ #report_modal .report_radio_wr .radios{ margin-bottom: 1.5rem;} /*** 리뷰 이미지 모달 ***/ #img_view.modal_full .modal-content{ -ms-overflow-style: none; scrollbar-width: none;} #img_view.modal_full .modal-content::-webkit-scrollbar { display: none;} #img_view.modal_full .modal-body{ position: relative; padding: 0; background: #000; -ms-overflow-style: none; scrollbar-width: none; } #img_view.modal_full .modal-body::-webkit-scrollbar { display: none;} #img_view.modal_full .modal-header{ position: fixed; width: 100%; top: 0; left: 0; z-index: 9999; background: unset; border: 0; } #img_view.modal_full .modal-header button img{filter: invert(99%) sepia(3%) saturate(403%) hue-rotate(346deg) brightness(115%) contrast(100%);} .review_img_slide .swiper-slide { display: flex; justify-content: center; align-items: center; height: 100vh; } .review_img_slide .swiper-slide img { max-height: 100%; } .review_img_slide .swiper-pagination{ color: #fff; z-index: 9999; bottom: 3.0rem; } /*** 옵션 선택 모달 ***/ .select_option.modal .modal-header{ border: 0;} .select_option.modal .modal-body{ padding: 0 1.6rem; text-align: left;} .select_option.modal .modal-footer{ padding: 1.0rem 1.6rem;} .select_option.modal .modal-footer .btn{ border-radius: 1.0rem;} /* 옵션 선택 셀렉트 */ .select_opt_wr .option_drop:not(:last-of-type){ margin-bottom: 1.5rem;} .option_drop{ border: 1px solid var(--border100); border-radius: 1.0rem; overflow: hidden; } .option_drop .select_opt_btn{ width: 100%; text-align: left; justify-content: start; border-bottom: 1px solid var(--border100); border-radius: 0; margin-bottom: -1px; font-size: 1.4rem; font-weight: 400; height: 4.8rem; } .select_opt_btn:disabled img.arrow{ filter: invert(76%) sepia(4%) saturate(415%) hue-rotate(155deg) brightness(89%) contrast(88%); } .option_drop .option_list_wr .option_list{ display: block; padding: 1.6rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border50); font-size: 1.4rem; font-weight: 300; line-height: 1.3em; } .option_drop .option_list_wr li:last-of-type .option_list{ border-bottom: 0;} /* 옵션 선택 결과 */ .select_opt_result{ margin-top: 1.5rem; margin-bottom: 2.0rem; position: relative;} .select_opt_result .item_opt_counter{ max-width: 11.0rem;} .result_box{ padding: 2.0rem; border-radius: 1.0rem; background: var(--light); } .result_box:not(:last-of-type){ margin-bottom: 1.5rem;} .result_box .selected_options{ width: calc(100% - 2.0rem); } /* 선택한 옵션 삭제 버튼 */ .opt_del_btn{ width: 1.0rem; height: 1.0rem; position: absolute; top: 2.0rem; right: 1.9rem; } /* 옵션 개수 조절 */ .option_modal .item_opt_counter_btn{ background: #fff;} .option_modal .item_opt_counter_btn.disabled, .option_modal .item_opt_counter_btn:disabled{ background: var(--border100); } /* 옵션 가격 */ .opt_price{ flex-grow: 1; text-align: right;} .opt_price p{ display: inline-flex; word-break: break-all; margin-left: 1.0rem; } .total_result{ padding-top: 2.0rem; border-top: 1px solid var(--light); } .total_result .tt_rs_line{ margin-bottom: 1.5rem;} /*** 단일옵션 모달 ***/ #one_option .modal-header{ border: 0;} #one_option .modal-body{ padding: 0 1.6rem; text-align: left;} #one_option .modal-footer{ padding: 1.0rem 1.6rem;} #one_option .modal-footer .btn{ border-radius: 1.0rem;} /*** 정렬 필터 선택 모달 ***/ .filter_modal.modal .modal-body{ text-align: center; padding: 0;} .filter_modal .radios_wr{ flex-direction: column;} .filter_modal .radios_wr .radios{ margin: 0;} .filter_modal .radios_wr .radios label { display: block; width: 100%; padding: 1.5rem 1.6rem; } .filter_modal .radios_wr .radios:not(:last-of-type) label{ border-bottom: 1px solid var(--border50);} .filter_modal .chk_p{ color: var(--text);} .filter_modal input:checked ~ .chk_p{ color: var(--primary); font-weight: 600;} /***** 주문결제 페이지 *****/ .pay_pg{ padding-bottom: 7.0rem;} .group_wr{ padding: 2.0rem 1.6rem;} /* 아이템 그룹 */ .items_collapse .items_group_box{ margin-bottom: 2.0rem;} .group_wr:not(:has(.inquiry_list_wr)) .collapse_btn{ padding: 2.0rem 0; height: auto; border-radius: 0; border: 0; } /* #ordered_items{ padding-bottom: 2.0rem;} */ .items_group_box{ border: 1px solid var(--border100); border-radius: 1.5rem; overflow: hidden; /* margin-bottom: 2.0rem; */ } .items_group_box:not(:last-of-type){ margin-bottom: 2.0rem;} .items_group_box .group_box_header{ display: flex; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border50); } .items_group_box .group_box_header .store_name{ font-size: 1.5rem;} /* 아이템 */ .item{ padding: 2.0rem 1.5rem; position: relative;} .item:not(:last-of-type){ border-bottom: 1px solid var(--border50);} /* 아이템 이미지 */ .item .item_img{ width: 7.8rem; margin-right: 1.0rem; flex-shrink: 0;} .item .item_img .rect{ border-radius: 0.6rem;} .item_img_border{ /* border: 1px solid var(--bg-light); */ } /* 아이템 텍스트 */ .item_text .item_prd_tit{ font-size: 1.4rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.5rem;} .item .option{ max-width: 50%;} /* 매장정보 확인하기 아코디언 */ .store_collapse_wr{ padding: 0 1.5rem 2.0rem;} .collapse_btn.view_store_info_btn{ background: var(--light); padding: 1.2rem 1.0rem; width: 100%; border-radius: 0; text-align: left; } .store_collapse_wr .view_store_info_btn .arrow{ width: 1.6rem; filter: invert(58%) sepia(8%) saturate(300%) hue-rotate(160deg) brightness(91%) contrast(94%);} /* 배송비 */ .deli_cost{ flex-shrink: 0; font-weight: 400;} .deli_cost img{ filter: invert(55%) sepia(3%) saturate(876%) hue-rotate(160deg) brightness(97%) contrast(86%);} /* 주문하기 버튼 */ .order_btn{ min-width: 16.0rem;} /***** 쿠폰 선택 페이지 *****/ .coupon_list_wr{} .coupon{ display: flex; width: 100%; align-items: start !important; padding: 2.0rem; border: 1px solid var(--border100); border-radius: 1.5rem; } .coupon .price{ font-size: 2.2rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--primary); } .coupon ul li.fc_text{ font-size: 1.5rem; font-weight: 600; margin-bottom: 0.3rem; line-height: 1.3; } .coupon:has(input:checked){ border-color: var(--primary);} /***** 주문완료 페이지 *****/ .pay_done_img{ width: 11.4rem; margin-bottom: 2.5rem;} /***** 장바구니 페이지 *****/ body:has(.cart_pg) .hd_m{ box-shadow: none;} .cart_pg{ background: var(--light);} .cart_top_sticky{ position: sticky; top: var(--hd_height_m); left: 0; z-index: 999; } .cart_tab .nav-link span.count{ margin-left: 0.3rem;} .cart_tab .nav-link.active span.count{ color: var(--primary);} .cart_top_btn{ padding: 1.5rem 1.6rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 0.6rem rgb(0 0 0 / 5%); background: #fff; } .cart_top_btn .btn img{ margin-right: 0.5rem;} .cart_tab_cont{} .cart_tab_cont .items_area{ padding: 2.0rem 1.6rem; min-height: calc(100vh - 34.5rem); } /* 장바구니 아이템 카드 */ .cart_items_group_box{ border: 0; background: #fff; box-shadow: 0 0 0.6rem rgb(0 0 0 / 5%); margin-bottom: 0; } .cart_items_group_box .checks_wr .checks{ margin-right: 0;} .cart_pg .chk_p{ color: var(--text);} .cart_items_group_box .view_store_info_btn{ margin-top: 1.5rem;} .cart_items_group_box .item{ display: flex; position: relative; } .cart_items_group_box .item .checks{ flex-shrink: 0;} .cart_items_group_box .item .checks .ic_box{ margin-right: 1.0rem;} .cart_items_group_box .item_text { flex-grow: 1;} .cart_items_group_box .item_text a{ display: block;} .cart_items_group_box .item .prdt_info{ max-width: calc(100% - 3.2rem);} .cart_items_group_box .item .item_text .item_prd_tit{ margin-bottom: 0;} .cart_items_group_box .item .item_img{ width: 8.1rem;} .cart_item_btn, .item_btn{ margin-top: 1.5rem;} .cart_item_btn .btn-md{ height: 3.0rem;} .cart_item_btn .item_opt_counter{ width: 100%;} .cart_item_btn .item_opt_counter .quantity{ flex-grow: 1;} .cart_items_group_box .opt_del_btn{ position: unset; width: 1.6rem; height: 1.6rem;} .cart_items_group_box + .cart_items_group_box{ margin-top: 1.5rem;} .items_group_box .group_box_footer{ padding: 1.5rem; background: var(--light); } .item_opt:not(:last-of-type){ margin-bottom: 1.5rem;} /* 옵션 변경 버튼 */ .change_opt_btn{ height: 3.0rem; border-radius: 0.5rem;} /*** 배송방법 변경 팝업 ***/ #change_deli .modal-body{ text-align: left; padding: 0;} /*** 옵션 변경 팝업 ***/ #change_option .result_box .selected_options{ width: 100%;} /***** 마이페이지 *****/ /* 내정보 영역 */ .mypage_pg .mp_user_info .profile_circle_box ~ div p, .mypage_info .mp_user_info p, .mypage_change_info .ip_wr img ~ p{ word-wrap: break-word; word-break: break-all; } /* 프로필사진 */ .profile_circle_box{ width: 6rem; height: 6rem; background-image: url(../img/img_no_profile.png); background-position: top center; background-repeat: no-repeat; background-size: cover; background-color: #F5F6F8; flex-shrink: 0; border: 1px solid var(--border100); } .mp_user_info{ display: flex; align-items: center; justify-content: space-between; } .regular_store{ display: flex; align-items: center; color: var(--primary); font-size: 1.5rem; } .regular_store.no_regular_store{ color: var(--gray-400); } /* 상단 아이콘 메뉴 영역 */ .mp_top_menu .mp_top_menu_link{ display: flex; flex-direction: column; align-items: center; } .mp_top_menu .mp_top_menu_link img{ width: 3.5rem; margin-bottom: 0.5rem;} .mp_top_menu .mp_top_menu_link .count{ color: var(--primary); margin-top: 0.5rem;} /* 마이페이지 메뉴 전체 */ .mp_menu .menu_tit{ color: var(--gray-300); margin-bottom: 1.2rem;} .mp_menu a{ display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0; font-size: 1.5rem; } .mp_menu nav > ul > li{ margin-bottom: 1.2rem;} /***** 마이페이지 : 내 정보 수정 *****/ .mypage_change_info .custom-select{ min-width: unset;} /*프로필 사진 업로드*/ .profile_upload .upload_box{ border: none; position: relative; background: none; } .profile_upload .upload_box .profile_circle_box{ width: 10rem; height: 10rem; background-image: url(../img/img_no_profile.png); background-position: top center; background-repeat: no-repeat; background-size: cover; } .profile_upload .upload_kamera_ico { position: absolute; bottom: 0; right: 0; width: 3.2rem; height: 3.2rem !important; border-radius: 50%; background-color: transparent; padding: 0 !important; /* display: none; */ } .profile_upload .upload_kamera_ico img{width:100%;} .profile_upload.on .upload_kamera_ico{display: flex;} .profile_upload.on .upload_box .profile_circle_box{background: none;} /* 회원탈퇴 버튼 */ .del_account_btn{ text-decoration: underline; width: fit-content; text-align: right; font-size: 1.5rem; } .del_account_btn:hover{ text-decoration: underline;} /***** 푸쉬 알림 페이지 *****/ .push_list { position: relative; display: flex; padding: 2.0rem 1.6rem; border-bottom: 1px solid var(--border100); cursor: pointer; } .push_list .push_img{ width: 4.5rem; flex-shrink: 0; margin-right: 1.0rem; } .push_list .push_text { margin-right: 1.0rem; display: flex; flex-direction: column; flex-grow: 1; } .push_list .push_text p{ font-size: 1.5rem; margin-bottom: 0.6rem; line-height: 1.4em;} .push_list .push_text span{ font-size: 1.3rem; color: var(--gray-400);} .push_list .arrow { width: 2.2rem; height: 2.2rem; filter: invert(57%) sepia(10%) saturate(237%) hue-rotate(160deg) brightness(92%) contrast(91%); flex-shrink: 0; } .push_list a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .push_list.show .push_text p{ white-space: normal; overflow: unset; text-overflow: unset; word-wrap: break-word; display: unset; -webkit-line-clamp: unset; -webkit-box-orient: unset; word-break: break-all; } .push_list.show .arrow{ transform: rotate(180deg);} /***** 주문배송 조회 > 주문배송 리스트 페이지 *****/ /* 주문처리 상태 */ .status_text{ font-size: 1.4rem; font-weight: 600; margin-bottom: 0.8rem;} .status_text.order_status{ color: var(--primary);} .status_text.return_status{ color: var(--red);} .order_items_group_wr{ margin-top: 2.0rem;} .order_items_group_wr .item_btn .form-row{ margin-left: -0.3rem; margin-right: -0.3rem;} .order_items_group_wr .item_btn .form-row > .col, .order_items_group_wr .item_btn .form-row > [class*=col-]{ padding-left: 0.3rem; padding-right: 0.3rem;} .item_btn .review_btn img{ filter: invert(20%) sepia(49%) saturate(6557%) hue-rotate(271deg) brightness(82%) contrast(122%);} .item_btn .review_btn:hover img{ filter: invert(100%) sepia(0%) saturate(7438%) hue-rotate(338deg) brightness(115%) contrast(101%);} /*** 메뉴 더보기 팝업 ***/ /*.menu_more_modal .modal-header{ padding: 1.6rem 1.6rem 1.0rem;}*/ .menu_more_modal .modal-header .modal-title{ font-size: 1.6rem;} .menu_more_modal .item{ padding: 0;} .menu_more_modal .item .item_img{ width: 5.0rem;} .menu_more_modal.modal_bottom.modal .modal-body{ padding: 0;} .menu_more_modal.modal_bottom.modal .modal-body .btn{ height: 4.8rem;} .menu_more_modal.modal_bottom.modal .modal-body .btn:not(:last-of-type){ border-bottom: 1px solid var(--border50);} /***** 주문배송 조회 > 매장정보 페이지 *****/ .order_stroe_info .store_info_wr{ padding: 2.0rem 0;} .order_stroe_info .store_info_wr .map_wr{ height: 25.0rem;} .menu_more_btn{ width: 3.8rem;} .store_dt .store_info_wr{} /***** 주문배송 조회 > 교환요청 페이지 *****/ .exchange_pg, .return_pg{ padding-bottom: 7.0rem;} /***** 취소/교환/반품 조회 페이지 *****/ .mini_img_gr{ display: flex; gap:1.0rem;} .mini_img_gr > div{ width: calc((100% - 4.0rem) / 5); border-radius: 0.6rem;} /***** 배송지관리 페이지 *****/ .add_address > .container{ padding-bottom: 9.0rem;} .address_list { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.5rem 1.6rem; line-height: 1.2em; border-bottom: 1px solid var(--border100); } .address_list .name{ display: flex; align-items: center; flex-wrap: wrap; } .address_list .name:has(.badge) p{ margin-right: 0.7rem;} .address_list .name p{ font-size: 1.5rem; font-weight: 700;} .address_list .message{ color: var(--gray-400);} .address_list .btn_group{ margin-top: 0.2rem;} /* 선택됨 뱃지 */ .selected_badge{ height: var(--height_sm); border: 1px solid var(--border); background: var(--border); color: var(--text); display: flex; justify-content: center; align-items: center; padding: 0 1.0rem; border-radius: 0.5rem; font-weight: 500; text-align: center; cursor: default; } /***** 리뷰 내역 페이지 *****/ .review_layout .order_items_group_wr{ margin-top: 0;} .group_box_body article.review{ padding-top: 2.0rem; border-top: 1px solid var(--border50);} .group_box_body article.review .mini_img_gr .rect{ cursor: pointer;} .review_star_lg img{ width: 4.0rem; margin: 0.5rem; cursor: pointer;} .review_star_lg .pmd-material-rating{ cursor: default !important;} .review_layout textarea.form-control{ height: 20.0rem;} .review_write{ padding-bottom: 9.0rem;} /***** 리뷰 상세 페이지 *****/ .review_detail .rv_star img{ width: 2.0rem; } /* .review_detail .review_img .img_col_box:nth-child(3) .rect::before{ display: none;} */ /***** 문의 내역 페이지 *****/ .inquiry_layout .order_items_group_wr{ margin-top: 0;} .inquiry_layout .order_items_group_wr .item{ border-bottom: 1px solid var(--border50);} .inquiry_layout .collapse_btn { padding: 2.0rem 1.5rem; border-bottom: 0;} .inquiry_layout .inquiry_list_wr .store_cont_wr{ border-bottom: 0; border-top: 1px solid var(--border100);} .inquiry_layout .inquiry_list_wr .user_cont{ border-bottom: 0;} .inquiry_layout .item_text .item_prd_tit{ margin-bottom: 0;} /***** 1:1 문의하기 페이지 *****/ .write_layout > .container{ padding-top: 2.0rem; padding-bottom: 9.0rem;} /***** 각종 약관 페이지 *****/ .term_layout > .container{ padding: 2.0rem 1.6rem 4.0rem;} .term_layout .editor_cont{ line-height: 1.5em;} /***** FAQ 페이지 *****/ /* 상단 카테고리 */ .cate_wr{ overflow: hidden; padding: 1.0rem 0;} .cate_wr #cate_cont{ overflow-y: scroll;} .cate_wr .btn-group{ width: max-content;} .cate_wr .btn{ font-size: 1.4rem; font-weight: 400; flex-shrink: 0;} .btn-outline-border100:not(:disabled):not(.disabled):active, .btn-outline-border100:not(:disabled):not(.disabled).active, .show > .btn-outline-border100.dropdown-toggle{ border-color: var(--primary); background-color: #fff; color: var(--primary); } /* 게시물 */ .faq_list_wr .collapse_btn{ padding: 2.0rem 1.6rem; border-bottom: 1px solid var(--border100);} .faq_list_wr .collapse_btn .faq_tit { font-size: 1.5rem; font-weight: 500; margin-right: 1.0rem; } .faq_list_wr .text_wr { line-height: 1.4em; background: var(--light-50); padding: 2.5rem 1.6rem; border-bottom: 1px solid var(--border100); } .faq_list_wr .faq_cont{ white-space: pre-line;} .faq_list_wr .collapse_cont .faq_tit { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.4em; } /***** 공지사항 페이지 *****/ .notice_list_wr >li{ border-bottom: 1px solid var(--border100);} .notice_list_wr .notice_link{ display: flex; align-items: center; justify-content: space-between; padding: 2.0rem 1.6rem; } .notice_list_wr .notice_link .notice_tit{ font-size: 1.5rem; font-weight: 500; margin-bottom: 0.8rem;} .notice_list_wr .notice_link .date{ font-size: 1.2rem; color: var(--gray-300);} .notice_list_wr .notice_link .arrow{ width: 2.0rem; margin-left: 1.0rem;} /***** 공지사항 상세 페이지 *****/ .notice_top{ padding: 2.0rem 0; line-height: 1.4em;} .notice_bottom{ padding: 2.0rem 0 3.0rem; line-height: 1.4em;} .notice_top .notice_tit{ margin-bottom: 1.0rem;} .notice_top .date{ color: var(--gray-300);} /***** 매장 목록 페이지 *****/ .store_list{ position: relative; padding: 2.0rem 1.6rem; border-bottom: 1px solid var(--border100); } .store_list .store_info_wr .store_info_top{ margin-bottom: 0;} .store_list .store_info_wr{ max-width: calc(100% - 4.6rem);} .store_list .like_btn{ position: absolute; right: 1.6rem; top: 50%; transform: translate(0, -50%); z-index: 2; } .store_list > a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .store_list .store_tit{ margin-bottom: 0;} /***** 지역설정 페이지 *****/ .search_list_wr .search_list { display: flex; flex-direction: column; padding: 1.5rem 1.6rem; border-bottom: 1px solid var(--border100); cursor: pointer; } .search_list_wr .search_list .tit { margin-bottom: 0.5rem; font-size: 1.5rem; font-weight: 600; } .search_list_wr .search_list .address:first-of-type{ margin-bottom: 0.3rem;} /* 현재위치로 찾기 */ .sub_pg.full_screen_layout{ padding: 0 !important;} .full_screen_layout .map_wr{ width: 100%; height: 100vh;} .bottom_fixed_address{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.5rem 1.6rem 2.0rem; background: #fff; border-top-left-radius: 2.0rem; border-top-right-radius: 2.0rem; box-shadow: 0 0 0.6rem rgb(0 0 0 / 5%); line-height: 1.3em; } .bottom_fixed_address p{ margin-bottom: 0.5rem;} /***** 매장상세 페이지 *****/ /* 단골설정 버튼 */ .regular_store_btn span{ display: flex; align-items: center; } .regular_store_btn span img{ width: 1.4rem;} .regular_store_btn .ic_plus{ filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(164deg) brightness(103%) contrast(103%);} .regular_store_btn .regular_store_on, .regular_store_btn.active .regular_store_off{ display: none;} .regular_store_btn .regular_store_off, .regular_store_btn.active .regular_store_on{ display: block;} .regular_store_btn.active{ background: #fff !important; color: var(--primary) !important; border-color: var(--primary) !important;} /* 매장 설명 */ .store_intro{ line-height: 1.4em;} .store_intro.show{ white-space: normal; overflow: unset; text-overflow: unset; word-wrap: break-word; display: unset; -webkit-line-clamp: unset; -webkit-box-orient: unset;word-break: break-all;} .store_info_text{ margin-bottom: 2.0rem;} .store_info_text .more_btn{ text-decoration: underline; color: var(--gray-400); margin-top: 0.5rem;} /*** 상품 리스트 item ***/ .product_list_wr{ padding: 0 1.6rem;} .product_list_wr .row{ margin-right: -0.4rem; margin-left: -0.4rem;} .product_list_wr .col{ padding-right: 0.4rem; padding-left: 0.4rem; margin-bottom: 3.0rem;} .product_item{ position: relative; height: 100%;} /* 썸네일 */ .product_item .pr_img{ position: relative;} .product_item .pr_img .rect{ border-radius: 1.0rem;} /* 찜버튼 */ .product_item .pr_img .like_btn{ position: absolute; bottom: 1px; right: 1px; width: 4.5rem; height: 4.5rem; z-index: 2; } .product_item .pr_img .like_btn img{ width: 4.5rem;} /* 할인율 표시 */ .product_item .discount_rate{ display: none;} .product_item.discount .discount_rate{ display: block;} .product_item .pr_img .discount_rate{ position: absolute; left: 0; top: -1px; width: 5.0rem; height: 5.0rem; z-index: 1; } .product_item .pr_img .discount_rate .number{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; } .product_item .pr_img .discount_rate .number span{ font-size: 1.8rem; font-weight: 700;} /* 상품 텍스트 */ .product_item .pr_text{ padding-top: 0.8rem;} .product_item .pr_text .review_average_sm{ color: var(--gray-400); margin-bottom: 0;} /* 무료배송 뱃지 */ .prd_badge{ display: none; font-size: 1.0rem; font-weight: 500; padding: 0.1rem 0.3rem; border-radius: 0.2rem; background: var(--primary); color: #fff; flex-shrink: 0; margin-right: 0.3rem; align-items: center; } .badge_on .prd_badge{ display: flex;} /* 장바구니 담기 버튼 */ .cart_btn{ position: absolute; border: 1px solid var(--border100); background: #fff; width: 2.8rem; height: 2.8rem; top: 0; right: 0; z-index: 2; } /***** 검색 페이지 *****/ /* 최근 검색어 */ .keyword_gr_wr{ } .keyword_badge{ display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-bottom: 0.8rem; margin-right: 0.8rem; padding:0; } .keyword_badge .btn{ height: 100%;} .keyword_badge .keyword_text{ padding-left: 1.5rem; margin-right: 0.5rem;} .keyword_badge .keyword_del_btn{ padding-right: 1.5rem;} /*.keyword_badge .keyword_del_btn{ margin-left: 0.5rem;}*/ .keyword_badge .keyword_del_btn img{ width: 1.4rem;} /***** 검색 결과 페이지 *****/ .scroll_tab{ overflow-x: scroll;} .scroll_tab .nav{ flex-wrap: nowrap; width: max-content; min-width: 100%;} .scroll_tab .nav-item { min-width: 8.3rem; width: auto; flex-grow: unset; flex-basis: unset; } .scroll_tab .nav-item .nav-link{ padding-right: 1.0rem; padding-left: 1.0rem;} /***** 카테고리 페이지 *****/ .category_pg .con_top{ padding-top: calc(var(--hd_height_m) + 5px); padding-bottom: 5.3rem;} /* 카테고리 페이지 헤더 검색바 */ body:has(.category_pg) .sch_outline_secondary.sch_ip .form-control{ height: 3.8rem; } body:has(.category_pg) .sch_outline_secondary.sch_ip .btn_search{ width: 4.7rem; height: 3.2rem; } /* 카테고리 탑 메뉴 */ .cate_top_menu{ padding-bottom: 1.0rem; border-bottom: 1px solid var(--border50); text-align: center; } .cate_top_menu a{ display: inline-block;} .cate_top_menu img{ height: 3.6rem; margin-bottom: 0.6rem; } .cate_top_menu p{ font-size: 1.2rem; font-weight: 500; } .category_pg .row.scrollspy_wr{ margin-right: 0; margin-left: 0; border-top: 1px solid var(--border);} .v_cate_nav { width: 12.0rem; background: var(--light); flex-shrink: 0; } /*.v_cate_nav .sticky-top{ top: var(--hd_height_m);}*/ .v_cate_nav .nav-link { width: 100%; min-height: 3.9rem; padding: 0.5rem 0.5rem 0.5rem 1.6rem; color: var(--text); font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; border-radius:0; border: 0; word-wrap: break-word !important; word-break: keep-all !important; } .v_cate_nav .nav-link.active{background:#fff;color:var(--primary);} .v_cate_nav{ max-height: calc(100vh - 50px - 5px - 54px); overflow: scroll; } .v_cate_cont { max-height: calc(100vh - 50px - 5px - 54px); overflow: scroll; padding-right: 1.6rem; padding-left: 2.0rem; } .v_cate_cont .tit_wr { display: flex; align-items: center; padding-top: 1.6rem; padding-bottom: 1.6rem; margin-bottom: 1.0rem; } .v_cate_cont .tit_wr a{ display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 800; } .v_cate_cont .tit_wr a img{ width: 0.8rem; } .v_cate_cont .cate_icon_box{ width: 2.9rem; border-radius: 0.5rem; background-color: var(--gray-400); overflow: hidden; display: flex; justify-content: center; align-items: center; margin-right: 1.0rem; } .v_cate_spy .tit_h3{ font-size: 1.4rem; } .v_cate_spy + .v_cate_spy{ margin-top: 2.4rem;} /* .v_cate_cont > div.v_cate_spy:not(:last-of-type){ border-bottom: 1px solid var(--border100);} */ /* 2차 카테고리 */ .v_cate_cont .main_cate_2st > ul{ display: grid; grid-template-columns: repeat(3, minmax(34.33%, 1fr)); row-gap: 4.0rem; } .v_cate_cont .main_cate_2st > ul > li{ width: 100%; display: flex; justify-content: center; /* margin-bottom: 4.0rem; */ } .v_cate_cont .main_cate_2st > ul > li > a{ width: 100%; display: inline-block; padding: 0 0.5rem; text-align: center; font-size: 1.1rem; line-height: 1.2; } .v_cate_cont .main_cate_2st > ul > li > a img{ width: 6.0rem; margin-bottom: 1.0rem; } .v_cate_cont .main_cate_2st > ul > li > a p{ word-wrap: break-word; word-break: keep-all; } /***** 카테고리 상세 페이지 *****/ .categpry_dt .scroll_tab .nav-item{ min-width: unset; flex-shrink: 0;} .cate_tab_btn .nav-item .btn{ position: relative; padding: 1.6rem 1.0rem; font-size: 1.6rem; font-weight: 600; } .cate_tab_btn .nav-item .btn.active::after{ content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background: var(--primary); } /***** 1차 카테고리 페이지 *****/ .cate_2dep_menu{ text-align: center; font-size: 1.2rem; line-height: 1.2; } .cate_2dep_menu li{ margin-bottom: 2.0rem;} .cate_2dep_menu a{ display: inline-block;} .cate_2dep_menu img{ width: 6.0rem; margin-bottom: 0.9rem; } /***** 2차 카테고리 페이지 *****/ .cate_3dep_menu{} .cate_3dep_menu .btn-group-toggle{ width: max-content;} .cate_3dep_menu .btn-group-toggle .btn{ margin-right: 0; flex-shrink: 0;} /* 3차 카테고리 버튼 */ .cate_tab_3th_wr{ width: 100%; background: var(--light); padding: 1.6rem; } .cate_tab_3th_wr .nav{ display: flex; gap: 1.6rem; width: max-content; } .cate_tab_3th_wr ul li{ flex-shrink: 0;} .cate_tab_3th_wr .nav-item .nav-link{ font-weight: 600; color: var(--gray-300); padding: 0; } .cate_tab_3th_wr .nav-item .nav-link.active{ color: var(--text); } /********************************************************/ /*체크포인트*/ .sub_pg.check_event_pg{ background: linear-gradient(0deg, rgba(255, 255, 255, 1 ) 0%, rgba(250, 243, 255, 1) 100%);} .ck-point-list ul{display: flex; flex-wrap: wrap; gap: 10px;} .ck-point-list ul li{width: calc((100% / 3) - 7px); display: flex; flex-wrap: wrap; padding: 11px; aspect-ratio: 1 / 1; align-items: center; justify-content: center; border-radius: 15px; background-color: #fff; box-shadow: 0px 3px 6px rgba(135, 10, 224, 0.05);} .ck-point-list ul li.on{background-color:#870AE0;} .ck-point-list ul li p{width:100%; text-align:center;} .ck-point-list ul li:nth-child(3n) p:last-child{ color: var(--primary); } .ck-point-list ul li.on p{color:#fff !important; } /*검색*/ .keyword_gr_wr ul li{padding:15px 0;} .keyword_gr_wr ul li p{font-weight:500;} .cart_btn2{border: 1px solid var(--border100); background: #fff; width: 2.8rem; height: 2.8rem; top: 0; right: 0; z-index: 2;} /*고객센터*/ .customer-service{padding:20px; display:flex; flex-wrap:wrap; gap:15px; background-color:#F5F6F8;border-radius: 10px; margin: 16px 0 20px;} .customer-service .d-flex{width:100%;} .customer-service .d-flex p:nth-child(1){width:30%;} .customer-service .d-flex p:nth-child(2){width:70%;} /*쿠폰*/ .coupon-ul{display: flex; flex-wrap: wrap; gap: 10px;} .coupon-ul .coupon.off{align-items: center !important; justify-content: space-between; gap: 10px; background-color: #F5F6F8;} .coupon-ul .coupon.off .expired{ color: #fff; background-color: rgba(161, 169, 173, 1); padding: 26px 9px; border-radius: 50%;text-wrap-mode: nowrap;} .coupon-ul .coupon.off .complete{color: #fff; background-color: rgba(135, 10, 224, 1); padding: 26px 9px; border-radius: 50%;text-wrap-mode: nowrap;} /*포인트*/ .point-list li{padding: 16px; border-bottom: 1px solid #E8E9EB;} .point-list li .p-plus{font-size:16px; font-weight:700; color:#870AE0;} .point-list li .p-minus{font-size:16px; font-weight:700; color:#828A8F} /**************************************************/ /* 반응형 */ /**************************************************/ /*반응형 max 1200 xl*/ @media (max-width: 1199.98px) { } /*반응형 max 992px lg*/ @media (max-width: 991.98px) { } /*반응형 max 767px md*/ @media (max-width: 767.98px) { /* 모바일 메뉴 */ .m_menu_wr{width: 100%; left: 50%; transform: translate(-50%); max-width:57.6rem;} .menu_bg{width: 100%; left: 50%;} .menu_on .m_nav{max-width: 80%;} } /*반응형 max 576px sm*/ @media (max-width: 575.98px) { .mobile_wr { border-left: 0; border-right: 0; } .go_top2 { right: 1.6rem; transform: translateX(0); } } /*반응형 max 420px sm*/ @media (max-width: 419.98px) { .event_sect .product_list_wr .prod_list{ width: 16.0rem;} } /*반응형 max 390px*/ @media (max-width: 390px) { .v_cate_nav { width: 9.6rem; } .event_sect .product_list_wr .prod_list{ width: 15.0rem;} } /*반응형 max 375px*/ @media (max-width: 375px) { /* html { font-size:9.4px; } */ .cart_top_btn .btn img{ margin-right: 0.3rem;} .event_sect .product_list_wr .prod_list{ width: 14.0rem;} .cart_btn{ width: 2.2rem; height: 2.2rem; } .cart_btn img{ width: 1.2rem; } } /*반응형 max 340px*/ @media (max-width: 340px) { .event_sect .product_list_wr .prod_list{ width: 13.0rem;} } .container:has(.image_upload){ margin-right: unset; margin-left: unset;} /* 추가한 부분이라 지우지마세요 */ .editer_info{ font-family: initial; font-size: initial; line-height: initial; border: none; } /* 25.05.08 추가 */ /* 기획전 배너에 글자가 없을 시 상단에 여백 추가 */ .event_sect.no_banner{ padding-top: 2.0rem;} /* 기획전 슬라이드 끝에 더보기 버튼 추가 */ .event_sect .touch_scroll .product_list_wr{ display: flex; align-items: stretch; } .event_sect .product_list_wr .event_more_btn{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 1.0rem; margin-left: 0.8rem; font-size: 1.4rem; font-weight: 500; color: var(--text); } /* 25.05.27 추가 */ /* 쿠폰 다운로드 버튼 아이콘 */ /* .coupon_dl_btn:not(:disabled) img{ filter: invert(15%) sepia(83%) saturate(5752%) hue-rotate(275deg) brightness(86%) contrast(113%); } .coupon_dl_btn:not(:disabled):hover img, .coupon_dl_btn:not(:disabled):focus img, .coupon_dl_btn:not(:disabled):active img{ filter: invert(100%) sepia(0%) saturate(7495%) hue-rotate(296deg) brightness(109%) contrast(100%); } */ /* 25.05.29 추가 */ /* 쿠폰 다운로드 버튼 */ .nds_cp .coupon{ align-items: center !important; justify-content: space-between; text-align: left; } .nds_cp .coupon .price{ font-size: 2.2rem;} .nds_cp .coupon ul li.fc_text{ font-size: 1.5rem; font-weight: 600; margin-bottom: 0.3rem; line-height: 1.3;} .nds_cp .coupon .download_btn{ width: 4.4rem; height: 4.4rem; border-radius: 50%; margin-left: 2.0rem; } .nds_cp .coupon .download_btn:not(:disabled){ background: rgb(243 230 252 / 80%); } .nds_cp .coupon .download_btn:disabled{ background: var(--light); cursor: default; } /* 상품 상세페이지 쿠폰 다운로드 영역 */ .coupon_dl_wr{ display: flex; border: 1px solid rgb(135 10 224 / 50%); border-radius: 1.0rem; background-color: #F5EBFC; margin-top: 1.5rem; } .coupon_dl_wr .cp_count{ flex-grow: 1; margin: 1.2rem 0 1.2rem 1.5rem; padding-right: 1.0rem; font-size: 1.4rem; font-weight: 500; color: var(--primary); border-right: 1px solid rgb(135 10 224 / 50%); } .go_cp_download{ flex-shrink: 0; padding: 0.5rem 1.5rem 0.5rem 1.0rem; color: var(--primary); } .go_cp_download:hover{ color: var(--primary);} /* 쿠폰 다운로드 모달 */ .download_coupon.modal_bottom.modal .modal-dialog-scrollable .modal-content{ max-height: 85vh; } /* 25.06.10 추가 */ /* 스토어 배너 비율 */ .store_dt .store_bnr{ width: 100%; aspect-ratio: 412 / 180; } .store_dt .store_bnr img{ width: 100%; aspect-ratio: 412 / 180; } .store_dt .group_wr:has(.store_info_wr){ padding-top: 1.0rem; padding-bottom: 1.0rem; border-bottom: 1px solid var(--border50); } .store_dt .store_info_wr .store_info_top{ margin-bottom: 0;} .store_dt .store_info_top{ justify-content: space-between; } .store_info_wr .store_img{ width: 5.5rem; } .store_info_wr .coupon_dl_btn{ border: 1px solid rgb(135 10 224 / 50%); background-color: #F5EBFC; } .store_info_wr .coupon_dl_btn:not(:disabled):hover{ color: var(--primary); } .store_dt .store_info_wr .store_tit{ margin-bottom: 0.8rem;} .store_gray_box{ border-radius: 1.5rem; margin: 1.2rem 1.6rem; padding: 2.0rem; display: flex; background: var(--light); } .store_gray_box > div{ width: 50%; text-align: center; } .store_gray_box > div:first-child{ border-right: 1px solid var(--gray-200);} .store_gray_box > div p{ font-size: 2.1rem; font-weight: 600; margin-bottom: 0.8rem; display: flex; align-items: center; justify-content: center; } .store_gray_box > div img{ width: 2.0rem;} .store_gray_box > div span{ font-size: 1.4rem; color: var(--gray-400); font-weight: 500; }