@charset "utf-8"; @import url('mob_reset.css'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); /* ============== variables ============== */ :root{ /* coler */ --white: #fff; --black: #000; --red: #e83d45; --text-default: #333333; --text-footer: #999999; --input-placeholder: #666666; --text-active: #969696; --bg-default: #f5f5f7; --bg-modal: #f3f3f3; --bg-checkbox: #e8e8e8; --bg-btn-disabled: #b0b0b0; --bg-btn: #262626; --bg-btn-02: #929292; --bg-isp: #cfcfcf; --border-tab: #d7d7d9; --border-input: #d3d3d4; --border-box: #a5a5a5; --border-btn-02: #747474; /* font */ --font-family: 'Pretendard'; /* font-size */ --font-size-12: 0.75rem; /* 12px */ --font-size-13: 0.813rem; /* 13px */ --font-size-14: 0.875rem; /* 14px */ --font-size-16: 1rem; /* 16px */ --font-size-18: 1.125rem; /* 18px */ --font-size-20: 1.25rem; /* 20px */ --font-size-21: 1.313rem; /* 21px */ --font-size-22: 1.375rem; /* 22px */ --font-size-24: 1.5rem; /* 24px */ --font-size-26: 1.625rem; /* 26px */ --font-size-28: 1.75rem; /* 28px */ --font-size-30: 1.875rem; /* 30px */ --font-size-32: 2rem; /* 32px */ --font-size-34: 2.125rem; /* 34px */ --font-size-36: 2.25rem; /* 36px */ --font-size-40: 2.5rem; /* 40px */ --font-size-46: 2.875rem; /* 46px */ --font-size-50: 3.125rem; /* 50px */ /* font-size */ --font-w-light: 300; --font-w-normal: 400; /* --font-w-medium: 500; */ --font-w-semibold: 600; --font-w-bold: 700; --font-w-exbold: 800; /* padding */ --main-p: 3.125rem; /* modal */ --modal-color: #000000; --modal-bg-overlay: rgba(0, 0, 0, 0.7); } /* ============== common ============== */ /* 241128 수정 */ body { width: 100%; background-color: var(--white); font-family: var(--font-family), -apple-system, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; font-size: var(--font-size-28); font-weight: 400; line-height: 1.2; letter-spacing: -1px; word-wrap: break-word; overflow-x: hidden; color: var(--text-default); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .text-box { padding: 1.625rem 2.375rem; width: 100%; background-color: var(--bg-default); border-radius: 0.375rem; font-size: var(--font-size-26); line-height: 2.875rem; color: var(--bg-btn); } .text-red { color: var(--red); } .mb-0 { margin-bottom: 0px !important; } .p-0 { padding: 0 !important; } /* input_style */ input[type=text], input[type=password], input[type=tel], input[type=number], input[type=email], select { padding: 0 1.875rem; width:100%; height:100%; border-radius: 0.375rem; background-color: transparent; border: 0; font-size: inherit; font-weight: inherit; color:var(--text-default); appearance: none; -moz-appearance: none; -webkit-appearance: none; } /* placeholder color */ input::-ms-input-placeholder, input::-webkit-input-placeholder, input::-moz-placeholder, textarea::-ms-input-placeholder, textarea::-webkit-input-placeholder, textarea::-moz-placeholder { color: var(--input-placeholder); opacity: 1; } .custom-input { position: relative; width: 100%; height: 5.625rem; border: 1px solid var(--border-input); border-radius: 0.375rem; font-size: var(--font-size-28); overflow: hidden; } .custom-input select { font-size: var(--font-size-28); color: var(--text-default); } .custom-input select option[value=""][disabled] { display: none; } .custom-input a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /* 240715 접근성 수정 */ .custom-input.custom-arrow { position: relative; overflow: visible; } .custom-input.custom-arrow::after { content: ''; display: block; position: absolute; top: 50%; right: 1.875rem; margin-top: -0.438rem; width: 1.5rem; height: 0.875rem; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url('/img/mob/i-arrow.png'); } .custom-input.custom-arrow.top::after { transform: rotate(180deg); } /* 240531 추가 */ /* 241029 배경색과 너무 달라 주석처리 by namwon.kim */ /*.custom-input input[readonly] {*/ /* background-color: var(--bg-modal);*/ /* color: var(--input-placeholder);*/ /*}*/ /* checkbox */ .custom-checkbox { cursor: pointer; display: block; width: fit-content; } .custom-checkbox input + span { position: relative; display: inline-block; padding-left: 3.125rem; font-weight: var(--font-w-semibold); line-height: 2.25rem; } /* 240715 접근성 수정 */ .custom-checkbox input:focus + span, .custom-checkbox input:focus-visible + span { outline: 5px auto -webkit-focus-ring-color; } .custom-checkbox input + span::before, .custom-checkbox input + span::after { content: ''; display: block; position: absolute; } .custom-checkbox input + span::before { top: 0; left: 0; width: 2.25rem; height: 2.25rem; background-color: var(--bg-checkbox); border-radius: 0.25rem; } .custom-checkbox input + span::after { top: 0.688rem; left: 0.563rem; width: 1.188rem; height: 0.813rem; background-repeat: no-repeat; background-size: cover; background-image: url('/img/mob/i-checkbox.png'); } .custom-checkbox input:checked + span::before { background-color: var(--bg-btn); } .custom-checkbox input:checked + span::after { background-image: url('/img/mob/i-checkbox_act.png'); } .custom-checkbox.round input + span::before { border-radius: 100%; } .custom-input .custom-checkbox { margin: 1.625rem 1.875rem; margin-right: 3.375rem; } /* ============== modal ============== */ .modal{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: calc(var(--vh, 1vh) * 100); overflow: hidden; z-index: -1000; } /* 241128 수정 */ .modal.show { /* z-index: 1050; */ } .modal .modal-overlay { width: 100%; height: 100%; background-color: var(--modal-bg-overlay); } .modal .modal-content { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; padding: var(--main-p); background-color: var(--white); border-radius: 1.875rem 1.875rem 0 0; transform: translateY(100%); transition: 0.3s 0.3s transform; } .modal .modal-content .btn-modal-close { width: 100%; height: 7.5rem; background-color: var(--bg-btn); border-radius: 0.375rem; font-size: var(--font-size-32); font-weight: var(--font-w-semibold); color: var(--white); } .modal .custom-checkbox input + span { padding-left: 4rem; line-height: 2.75rem; } .modal .custom-checkbox input + span::before { width: 2.75rem; height: 2.75rem; } .modal .custom-checkbox input + span::after { top: 0.875rem; left: 0.625rem; width: 1.5rem; height: 1rem; } /* ============== skipNav ============== */ #skipNav{ position:relative; z-index:9999; } #skipNav a{ position: absolute; top: -200px; left:0; width: 100%; background-color: var(--white); font-size: var(--font-size-12); font-weight: var(--font-w-semibold); line-height: 30px; color: var(--text-default); text-align: center; } #skipNav a:focus, #skipNav a:active{ top: 0;} /* ============== header ============== */ .header { position: relative; display: flex; align-items: center; padding: 0 var(--main-p); height: 7.188rem; } .header .header-inner { width: 100%; } .header .header-inner h1 { width: 100%; font-size: var(--font-size-36); font-weight: var(--font-w-bold); } .header .header-inner .btn-close { position: absolute; top: 50%; right: var(--main-p); width: 1.75rem; height: 1.688rem; background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30px' height='29px'%3E%3Cpath fill-rule='evenodd' fill='rgb(38, 38, 38)' d='M29.037,25.917 L26.959,28.080 L14.998,16.579 L3.037,28.080 L0.958,25.917 L12.834,14.499 L0.958,3.080 L3.037,0.917 L14.998,12.418 L26.959,0.917 L29.037,3.080 L17.162,14.499 L29.037,25.917 Z'/%3E%3C/svg%3E"); transform: translateY(-50%); } /* ============== footer ============== */ /* 240531 수정 */ .footer { padding: 0 var(--main-p); padding-top: 1.875rem; text-align: center; } .footer .custom-arrow { margin-bottom: 1.875rem; } .footer .footer-txt { line-height: 1; } .footer .footer-btn { margin-top: 1.875rem; padding: 0 2.375rem; /*금액 이슈로 인해 변경*/ width: 100%; height: 11.875rem; border-radius: 2rem; background-color: var(--bg-btn); color: var(--white); } .footer .footer-btn:disabled { background-color: var(--bg-btn-disabled); } .footer .footer-btn > span { display: block; font-size: var(--font-size-24); line-height: 1.2; } .footer .footer-btn .footer-txt-name { width:100%; font-size: var(--font-size-30); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .footer .footer-btn .footer-txt-price { font-size: var(--font-size-40); font-weight: var(--font-w-light); } .footer .footer-btn .footer-txt-price b { font-size: var(--font-size-50); } .footer .footer-address { color: var(--text-footer); line-height: 4.25rem; } /* 약관 팝업 */ .all-checkbox { height: 6.25rem; background-color: var(--bg-modal); border-color: var(--bg-modal); border-radius: 1rem; } .all-checkbox .custom-checkbox { margin: 0; padding: 0 1.25rem; /* 2024-10-29 내부 변경 */ width: 100%; border-radius: 0.375rem; font-size: var(--font-size-32); line-height: 6.25rem; } .checkbox-list { padding: 2rem 0; /* 2024-10-29 내부 변경 */ } .checkbox-list li { position: relative; margin-bottom: 2.5rem; padding: 0 1.25rem; } .checkbox-list li:last-of-type { margin-bottom: 0; } .checkbox-list .custom-checkbox { position: relative; z-index: 1; } .checkbox-list .custom-checkbox input + span { font-weight: var(--font-w-normal); } .checkbox-list li a { position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; } .checkbox-list li a::after { content: ''; display: block; position: absolute; top: 50%; right: 0; width: 0.75rem; height: 1.375rem; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url('/img/mob/i-arrow-r.png'); transform: translateY(-50%); } /* ============== main ============== */ #main { padding: 0 var(--main-p); } #main section { margin-bottom: 1.875rem; } #main section:last-child { margin-bottom: 0; } /* 아이콘 */ .i-point, .i-interest { display: inline-block; width: 1.875rem; border-radius: 0.5rem; font-style: normal; font-size: var(--font-size-16); font-weight: var(--font-w-bold); line-height: 1.875rem; color: var(--white); text-align: center; } .i-point { background-color: #222a8f; } .i-interest { background-color: #f55914; } /* 리스트 */ /* 기본 레이아웃 (한줄 3개) */ .list-style-01 { display: flex; flex-wrap: wrap; margin: 0 -0.5rem -1rem; } .list-style-01 li { flex: 0 0 33.3333%; margin-bottom: 1rem; padding: 0 0.5rem; } .list-style-01 li > * { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 5.625rem; border: 1px solid var(--border-input); border-radius: 0.375rem; font-size: var(--font-size-26); color: var(--input-placeholder); text-align: center; } /* 240531 수정 */ .list-style-01 li.act > * { border-width: 1px; font-weight: var(--font-w-bold); border-color: var(--bg-btn); color: var(--text-default); z-index: 1; } .list-style-01 li.w-100 { flex: 0 0 100%; } /* 붙어있는 스타일 */ .list-style-01.list-style-02 { display: block; margin: 0; padding-left: 1px; width: calc(100% + 4px); } .list-style-01.list-style-02::after { content: ""; display: block; clear: both; } .list-style-01.list-style-02 li { float: left; width: 25%; margin-top: -1px; margin-left: -1px; margin-bottom: 0; padding: 0; } .list-style-01.list-style-02 li > * { border-radius: 0; } /* s :: 241128 수정 2차 */ .list-style-01.list-style-02 > li:first-child > *{ border-top-left-radius: 0.625rem; } .list-style-01.list-style-02 > li:nth-child(4) > * { border-top-right-radius: 0.625rem; } .list-style-01.list-style-02 > li:nth-last-child(4) > * { border-bottom-left-radius: 0.625rem; } .list-style-01.list-style-02 > li:last-child > * { border-bottom-right-radius: 0.625rem; } /* e :: 241128 수정 2차 */ /* 결제 수단 리스트 */ .pay-list > li { overflow: hidden; } .pay-list > li button { background-position: center center; background-repeat: no-repeat; } .pay-list li.pay-item-01 button { background-size: 5.438rem 1.625rem; background-image: url('/img/mob/img-kakaopay.png'); } .pay-list li.pay-item-02 button { background-size: 6.438rem 1.438rem; background-image: url('/img/mob/img-payco.png'); } .pay-list li.pay-item-03 button { background-size: 10rem 1.438rem; background-image: url('/img/mob/img-samsung.png'); } .pay-list li.pay-item-04 button { background-size: 6.813rem 2.063rem; background-image: url('/img/mob/img-toss.png'); } .pay-list li.pay-item-05 button { background-size: 6.375rem 2.25rem; background-image: url('/img/mob/img-skpay.png'); } .pay-list li.pay-item-06 button { background-size: 5.375rem 1.875rem; background-image: url('/img/mob/img-lpay.png'); } /* 240805 수정 */ .pay-list li.pay-item-07 button { background-size: 6.25rem 2.25rem; background-image: url('/img/mob/img-npay.png'); } /* 카드 종류 결재 리스트 */ /* 241128 수정 2차 */ .list-style-01.visible-none li:nth-child(4n+9) > * { border-bottom-left-radius: 0.375rem; } .list-style-01 li.hidden-pay { display: none; } .list-style-01 li .btn-card-add i { display: inline-block; margin-left: 0.75rem; width: 0; height: 0; border-top: 0.438rem solid var(--input-placeholder); border-bottom: 0 solid transparent; border-left: 0.313rem solid transparent; border-right: 0.313rem solid transparent; vertical-align: middle; transition: transform 0.2s; } .list-style-01 li:hover .btn-card-add i, .list-style-01 li:focus .btn-card-add i, .list-style-01 li:active .btn-card-add i { border-top-color: var(--black); } .list-style-01 li .btn-card-add.act i { transform: rotate(180deg); } .list-style-01 .i-point, .list-style-01 .i-interest { position: absolute; top: 0; right: 0; border-radius: 0; } /* 카드 아이콘 리스트 */ .pay-icon-box { margin-bottom: 0.625rem; text-align: right; } .pay-icon-box p { display: inline-block; font-size: var(--font-size-22); line-height: 1.875rem; color: var(--input-placeholder); } .pay-icon-box > p + p { margin-left: 1.875rem; } .pay-icon-box p i { margin-right: 0.563rem; } /* 현금영수중 체크박스 */ .receipt-box { display: none; } .receipt-box.show { display: block; } /* s :: 240531 수정 */ .receipt-box .toggle-list { margin-top: 1.25rem; } .receipt-box .toggle-list li { width: 33.3333%; } .receipt-box .toggle-list li { width: 33.3333%; } .receipt-box .toggle-list li:first-child > * { border-radius: 0.375rem 0 0 0.375rem; } .receipt-box .toggle-list li:last-child > * { border-radius: 0 0.375rem 0.375rem 0; } .receipt-box > div { margin-top: 1.25rem; } .receipt-box .custom-input.custom-arrow { margin-bottom: 1.25rem; } .receipt-box .inline-list { margin-bottom: 0; } .receipt-box .inline-list p { margin: 0 1.25rem; font-size: var(--font-size-28); color: var(--input-placeholder); } /* e :: 240531 수정 */ /* 에스크 입력 폼 */ .escrow-box { margin-bottom: 1.25rem; } .escrow-box h2 { margin-bottom: 1.25rem; font-size: var(--font-size-30); font-weight: var(--font-w-bold); line-height: 1; } /* 상단에 위치한 결제정보 */ .purchase-info { padding: 2.25rem 1.75rem; border: 1px solid var(--border-box); border-radius: 0.563rem; line-height: 1; } .purchase-info p + p { margin-top: 1.25rem; } .purchase-info .purchase-tit { font-size: var(--font-size-32); font-weight: var(--font-w-bold); } .purchase-info .purchase-txt { font-size: var(--font-size-22); } .purchase-info .purchase-price { font-size: var(--font-size-26); letter-spacing: -0.025em; } .purchase-info .purchase-price span { font-size: var(--font-size-40); font-weight: var(--font-w-bold); } /* 하이픈이 있는 input */ .input-form { display: flex; align-items: center; padding: 0 2.5rem; } .input-form > *:first-child { position: relative; flex: 0 0 auto; width: 8.5rem; margin-right: 2.5rem; } .input-form > *:first-child::before { content: ''; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 1.875rem; background-color: var(--border-input); transform: translateY(-50%); } .input-form > *:first-child + .row input { padding: 0; text-align: center; } .input-form > *:first-child + input { padding: 0; } .input-form .custom-input.custom-arrow { border: none; width: 33.3333%; } .input-form .row { display: flex; align-items: center; } .input-form .row.input-validity .col { flex: 0 0 auto; color: var(--input-placeholder); } .input-form .row.input-validity .col input { padding: 0; width: 2.875rem; } .inline-list { display: flex; align-items: center; margin-bottom: 1.875rem; } .inline-list li + li { margin-left: 3.125rem; } .inline-list .custom-checkbox input + span { font-weight: var(--font-w-normal); } /* isp 설치 */ .isp-box { padding-top: 2.75rem; font-size: var(--font-size-26); text-align: center; color: var(--bg-btn); } .isp-box h1 { margin-bottom: 6.875rem; font-size: var(--font-size-32); font-weight: var(--font-w-bold); line-height: 1; } .isp-box p { line-height: 2.25rem; } .isp-box p span { font-weight: var(--font-w-bold); } .isp-box .btn-isp { margin: 3.438rem 0; width: 31.25rem; height: 6.25rem; background-color: var(--red); border-radius: 0.625rem; font-size: var(--font-size-32); font-weight: var(--font-w-bold); color: var(--white); } .isp-btn-box { display: flex; justify-content: space-between; } .isp-btn-box button { height: 6.25rem; border-radius: 0.625rem; font-size: var(--font-size-32); } .isp-btn-box .btn-cancle { width: 13.75rem; background-color: var(--bg-isp); color: var(--black); } .isp-btn-box .btn-payment { width: 25.625rem; background-color: var(--bg-btn); font-weight: var(--font-w-bold); color: var(--white); } .isp-btn-box + .footer-address { line-height: 5rem; } .resele-box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.125rem; } .resele-box h2 { font-size: var(--font-size-30); font-weight: var(--font-w-bold); } .resele-box .btn { width: 9.375rem; height: 3.125rem; background-color: var(--bg-btn); border: 1px solid var(--border-btn-02); border-radius: 0.375rem; font-size: var(--font-size-24); color: var(--white); } /* 로딩 페이지 */ .loading { position:fixed; left:0px; top:0px; display: flex; justify-content: center; align-items: center; width:100vw; height: calc(var(--vh, 1vh) * 100); background: var(--modal-bg-overlay); text-align: center; color: #fff; z-index:1000; } .loading img { display: block; margin-bottom: 1rem; width: 10rem; height: 10rem; } /* 에러 페이지 */ /* 240416 추가 */ .error { display: flex; flex-direction: column; } .error .error-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } .error .error-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; color: #262626; } .error .error-content h2 { font-size: var(--font-size-32); font-weight: var(--font-w-bold); text-align: center; } .error .error-content p { margin-top: 2rem; margin-bottom: 3.125rem; font-size: var(--font-size-28); } /* KPN 생성 */ .error .error-content .message1 { font-size: var(--font-size-24); width: 80%; text-align: left; margin: 3.125rem 0 1rem 0; } .error .error-content .message2 { font-size: var(--font-size-24); width: 80%; text-align: left; margin: 0 0 1.125rem 0; } .error .error-content .btn { margin: 0 auto; min-width: 25.625rem; height: 6.25rem; background-color: #262626; border-radius: .625rem; color: var(--white); } /* 240531 추가 */ /* ============== tab ============== */ .tab-content .tab-pane { display: none; } .tab-content .tab-pane.act { display: block; } .hide { display: none; } /* 240605 추가 */ h2.page-tit { position: relative; margin-bottom: 2.5rem; font-size: var(--font-size-34); font-weight: var(--font-w-bold); letter-spacing: -0.025em; line-height: 5.625rem; } h2.page-tit::before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background-color: #f6f6f6; z-index: -1; transform: translateX(-50%); } h2.page-tit::after { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; background-color: var(--border-input); transform: translateX(-50%); } /* 240805 수정 */ .npay-box h2 { margin-bottom: 1.25rem; font-weight: var(--font-w-bold); font-size: var(--font-size-28); color: var(--bg-btn); } .npay-box > .list-style-01 li { /* 우리에 맞게 수정함. margin-bottom: 2.5rem; */ width: 50%; } .npay-box > .list-style-01 li:first-child button { border-radius: 0.625rem 0 0 0.625rem; } .npay-box > .list-style-01 li:last-child button { border-radius: 0 0.625rem 0.625rem 0; } .npay-box .receipt-box { display: block; } .npay-box .receipt-box p:first-child { margin-bottom: 1.5625rem; font-size: var(--font-size-28); font-weight: var(--font-w-semibold); }