@charset "utf-8"; .border-left-radius-0{border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;} .border-right-radius-0{border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important;} .border-left-radius{border-top-left-radius: 0.25rem;border-bottom-left-radius: 0.25rem;} .border-right-radius{border-top-right-radius: 0.25rem;border-bottom-right-radius: 0.25rem;} .border-radius-0 {border-radius: 0 !important;} .font-wt-300 {font-weight: 300 !important;} .font-wt-400 {font-weight: 400 !important;} .font-wt-500 {font-weight: 500 !important;} .font-wt-600 {font-weight: 600 !important;} .font-wt-700 {font-weight: 700 !important;} .font-wt-bold {font-weight: bold !important;} /* 메인페이지 동영상 */ .dafl_main_top_video_wrap {width: 100%; position: relative;} .dafl_main_top_video {width: 100%; height: 0; padding-bottom: 28.125%; position: relative;} .dafl_main_top_video > video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;} .dafl_main_top_video_wrap a {position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 1.125rem; text-shadow: 0px 0px 3px rgba(255,255,255,1); padding: 0.25rem; display: none; font-weight: bold;} @media (max-width: 1024px) { .dafl_main_top_video {padding-bottom: 56.25%;} } .JS-imgPrduListWrap {display: block;} .JS-imgPrduListWrap>li{display: inline-block;width: 20%;position: relative;} .JS-imgPrduListWrap>li .JS-imgResizeBtn{position: absolute;right:15px;top:15px;background-color: #FFF;border:1px solid #DDD;padding: 5px 10px;border-radius: 0.25rem;} .JS-imgPrduListWrap>li>a p{display: block;border:1px solid #DDD;margin:5px; height: 120px;background-size: 100%;background-position: center;background-repeat: no-repeat;transition: all 0.2s ease-in-out;} .JS-imgPrduFrame > div{display: block; background-size: 100% auto;background-position: center;background-repeat: no-repeat;transition: all 0.2s ease-in-out;} .JS-imgPrduFrame > div:hover{background-size: 150% auto;} .JS-imgPrduFrame .JS-imgResizeBtn{position: absolute;right:15px;top:15px;background-color: #FFF;border:1px solid #DDD;padding: 5px 10px;border-radius: 0.25rem;} .JS-imgPrduListWrap>li>a h6{text-align: center;padding: 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .JS-imgPrduListWrap>li>a:hover p{background-size: 150%;} .JS-imgPrduListWrap.JS-itemCnt2>li{width: 50%;} .JS-imgPrduListWrap.JS-itemCnt2>li>a p{height: 80px;} .JS-imgPrduListWrap.JS-frameWrthList>li{width: 33.3%;} .JS-imgPrduListWrap.JS-frameWrthList>li>a p{height: 220px;} .JS-imgPrduListWrap.JS-wrthDialogList>li{width: 20%;} .JS-imgPrduListWrap.JS-wrthDialogList.JS-itemCnt2>li{width: 50%;} .JS-imgPrduListWrap.JS-wrthDialogList>li>a p{height: 220px;} .JS-imgPrduListWrap.JS-wrthDialogList.JS-itemCnt2>li>a p{height: 300px;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList {padding: 0.5rem;margin-bottom: 0.3rem;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dt {font-size: 1.75rem; font-weight: 500;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd {margin-top: 0.5rem;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd > table {border-top-color: #000; border-bottom-color: #c4c4c4;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd > table > tbody > tr > th {font-size: 1.25rem; font-weight: 300;} #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd > table > tbody > tr > td {text-align: left; padding: 0.5rem 1.5rem;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li{padding: 5px 0;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li > dl > dt{font-size: 1.4rem;font-weight: bold;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li > dl > dt > i{} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li > dl > dd{margin-top: 0.5rem;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li > dl > dd > ul > li{margin-top: 0.5rem;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasItemList > li > dl > dd > ul > li > dl > dd{margin-top: 0.1rem;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasDetWrap > li > .card{border: 1px solid rgba(0, 0, 0, .125) !important;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasDetWrap > li > .card > .card-body > ul > li {margin-top: 0.5rem;} #okflagDeliveryUsrReqBas ul.JS-okflagDeliveryUsrReqBasDetWrap > li > .card > .card-body > ul > li > dl > dd{margin-top: 0.1rem;} .JS-addTypeFormCloseBtn {display: inline-block; padding: 0.5rem; color: #ff9797; font-size: 2rem; line-height: 0; margin-right: 0.5rem;} .JS-daflMngtPrdOptn > ul{margin-right: -10px;margin-left: -10px;} .JS-daflMngtPrdOptn > ul > li {padding: 0; display: inline-block; width:25%;margin:0px; padding:0 10px;position: relative;} .JS-daflMngtPrdOptn > ul > li > label {cursor: pointer; padding: 1rem 0; width: 100%; display: block; border: 1.5px solid #ced4da; text-align: center; background-color: #fff; font-weight: 300; font-size: 1.25rem; position: relative;} .JS-daflMngtPrdOptn > ul > li > label:hover {border-color: #3366B9; color: #3366B9; z-index: 0;} .JS-daflMngtPrdOptn > ul > li > div {display: none; width: 0; height: 0; position: absolute; top: 0; right: 10px; z-index: 1; border-right: 1.5rem solid #3366B9; border-bottom: 1.5rem solid transparent; border-left: 1.5rem solid transparent; border-top: 1.5rem solid #3366B9;} .JS-daflMngtPrdOptn > ul > li > div > i {color: #fff; position: absolute; top: -17px; right: -17px;} .JS-daflMngtPrdOptn > ul > li > input[type="checkbox"] {display: none;} .JS-daflMngtPrdOptn > ul > li > input[type="checkbox"]:checked + label {background-color: #fff; font-weight: 500; color: #000; border-color: #3366b9; z-index: 1; box-shadow: 0px 0px 7px rgba(30, 152, 215, 0.35);} .JS-daflMngtPrdOptn > ul > li > input[type="checkbox"]:checked ~ div {display: block;} .JS-wrthPrdLstWrap { padding: 0.75rem;} .JS-wrthPrdLstWrap .ui-checkboxradio-label {display: inline-block; width: calc(20% + 0.8px - 0.6rem); border: 1px solid #d6d6d6; border-radius: 0; padding: 0.5rem; margin: 0 0 0.75rem; text-align: left; font-weight: 500 !important; font-family: "Noto Sans KR", sans-serif; position: relative; background-color: #fff;} .JS-wrthPrdLstWrap > .ui-checkboxradio-label:not(:nth-child(5n)) {margin-right: 0.75rem;} .JS-wrthPrdLstWrap > .ui-checkboxradio-label:nth-child(n+16) {margin-bottom: 0;} .JS-wrthPrdLstWrap > .ui-checkboxradio-label:nth-child(5n) {margin-right: -1px;} .JS-wrthPrdLstWrap > .ui-checkboxradio-label:not(:nth-child(5n+1)) {margin-left: -1px;} .JS-wrthPrdLstWrap .ui-checkboxradio-label:hover {border: 1px solid #3366b9; z-index: 2;} .JS-wrthPrdLstWrap .ui-checkboxradio-label .JS-origPr {font-size: 0.9rem; font-weight: 300;} .JS-wrthPrdLstWrap .ui-checkboxradio-label .JS-imgResizeBtn {position: absolute; top: 0.5rem; right: 0.5rem; color: #454545 !important; padding: 0.375rem 0.5rem; margin-right: 0; border-top-right-radius: 0.25rem; border: 0; background-color: #f6f6f6; box-shadow: -1px 1px 3px rgba(0,0,0,0.35);} .JS-wrthPrdLstWrap .ui-checkboxradio-label .JS-imgResizeBtn:hover {color: #000 !important; opacity: 1; background-color: #f6f6f6;} .JS-wrthPrdLstWrap .ui-icon-background {background-image: none; display: block; border: 0; border-radius: 0.5rem; background-color: #FFF; background-repeat: no-repeat; width: 100%; padding-bottom: 100%; background-size: 100% 100%; background-position: center center; margin: 0px; box-shadow: inherit; transition: all 0.2s ease-in-out; margin-bottom: 0.5rem; } .JS-wrthPrdLstWrap .ui-checkboxradio-label:hover .ui-icon-background {background-size: 150% 150%;} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked {background-color: #3366b919; border-color: #3366b9; z-index: 2; box-shadow: inherit; color: #000; border-width: 3px;} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked > dl > dt {padding-top: 0;} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon-background {border: 0 !important; filter: brightness(1.1);} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon-background, .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon-background {width: 100%; padding-bottom: 100%; border: 1px solid #DDD;} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked dl > dt {font-weight: 700 !important;} .JS-wrthPrdLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .orig_pr {color: #000;} .JS-wrthPrdLstWrap .orig_pr {text-decoration:line-through;} .dd-option-image, .dd-selected-image { max-height: 40px !important; padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; } #okflagDeliveryUsrReqBas #ddslickDivyWrthDetInfoSxnCd .dd-selected { padding: 3px; } #okflagDeliveryUsrReqBas #ddslickDivyWrthDetInfoSxnCd .dd-select { border: 1px solid #ced4da; border-radius: 0.25rem; } #okflagDeliveryUsrReqBas th{font-weight: bold !important;} #okflagDeliveryUsrReqBas .card{border:1px solid rgba(0, 0, 0, 0.125) !important;} #okflagDeliveryUsrReqBas .card-body{background-color: transparent !important;padding: 1rem !important;} .JS-selectItemWrth .JS-selectItemBtn{padding: 3rem 1.5rem !important;} .JS-selectItemWrth .JS-selectItemBtn h1{font-size: 2rem;} .JS-selectItemWrth .JS-selectItemBtn p{font-size: 1rem;} .JS-selectItemFrameWrth .JS-selectItemBtn{padding: 3rem 1.5rem !important;} .JS-selectItemFrameWrth .JS-selectItemBtn h1{font-size: 2rem;} .JS-selectItemFrameWrth .JS-selectItemBtn p{font-size: 1rem;} /* dntPrdDivyInstlReqForm - 배송설치요청 (사용자/관리자 공통) */ .dnt_prd_divy_instl_req_form label {cursor: pointer;} .dnt_prd_divy_instl_req_form {max-width: 100%; overflow-x: hidden; box-sizing: border-box;} .dnt_prd_divy_instl_req_form.is-dnt-prd-init-pending #JS-okflagDeliveryUsrReqBasWrap, .dnt_prd_divy_instl_req_form.is-dnt-prd-init-pending > .dnt_prd_sel_cta_bar, .dnt_prd_divy_instl_req_form.is-dnt-prd-init-pending #JS-dntPrdEvtBranchGate {visibility: hidden;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap {display: block; width: 100%; max-width: 100%; overflow: hidden;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap.JS-dntPrdSelGridWrap {overflow: visible;} .dnt_prd_divy_instl_req_form .JS-dntPrdSelGridWrap > ul.product-selection-grid {gap: 1.25rem; overflow: visible;} /* 배송설치요청 - 선택 상품 미리보기 (사용자/관리자 공통) */ .addn_ty_lst_preview {display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 1rem; margin: 0; padding: 0; list-style: none;} .addn_ty_lst_preview > li {position: relative; text-align: center; width: 5rem; min-width: 5rem; max-width: 5rem; list-style: none;} .addn_ty_lst_preview > li > i.JS-addnTyLstPreviewImg {display: block; width: 3rem; height: 3rem; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 50%; margin: 0 auto; font-style: normal;} .addn_ty_lst_preview > li > span {display: block; max-width: 100%; margin-top: 0.25rem; color: #000; font-weight: 500; font-size: 0.85rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .addn_ty_lst_preview > li > em {position: absolute; top: 0; right: 0.25rem; font-weight: bold; color: #000; background-color: #ffffffcc; width: 1.25rem; height: 1.25rem; text-align: center; border-radius: 50%; cursor: pointer; font-style: normal;} .addn_ty_lst_preview > li > em > i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* 배송설치요청 - 상품 선택 그리드 */ .dnt_prd_divy_instl_req_form .JS-dntPrdSelGridWrap {overflow: visible;} .dnt_prd_divy_instl_req_form .product-selection-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; padding: 0.75rem 0.5rem; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; } .dnt_prd_divy_instl_req_form .product-selection-grid li { list-style: none; min-width: 0; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-item { padding: 0.625rem; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card { display: flex; flex-direction: column; height: 100%; min-width: 0; box-sizing: border-box; background: #fff; border: 2px solid #cbd5e1; border-radius: 14px; overflow: visible; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14); transition: box-shadow 0.28s ease, transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease; position: relative; white-space: normal; cursor: pointer; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card:not(.is-disabled):hover { border-color: #94a3b8; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16); transform: translateY(-2px); z-index: 1; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected { background: #f3f4f6; border-color: transparent; box-shadow: 0 2px 6px rgba(0, 69, 150, 0.22); transform: translateY(-2px); z-index: 2; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected::after { content: ''; position: absolute; inset: 0; border: 2px solid #004596; border-radius: 14px; pointer-events: none; z-index: 6; box-sizing: border-box; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected:not(.is-disabled):hover { box-shadow: 0 2px 8px rgba(0, 69, 150, 0.28); transform: translateY(-2px); z-index: 3; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected:not(.is-disabled):hover::after { border-color: #003a7a; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-disabled { opacity: 0.42; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); transform: none; cursor: not-allowed; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-disabled:hover { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); transform: none; z-index: auto; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_visual { position: relative; width: 100%; border-radius: 12px 12px 0 0; overflow: hidden; background-color: #f3f4f6; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_img { display: block; width: 100%; height: 0; padding-bottom: 125%; background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: #f3f4f6; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected .product-selection-card_visual, .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected .product-selection-card_img { background-color: #e5e7eb; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_visual .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_visual .ui-checkboxradio-create-icon-badge { position: absolute; top: 5px; left: 5px; z-index: 3; } .dnt_prd_divy_instl_req_form .product-selection-grid .JS-dntPrdSelCheckBadge { position: absolute; top: 8px; right: 8px; z-index: 7; display: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: #28a745; color: #fff; font-size: 0.8125rem; line-height: 1; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.38); } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card.is-selected .JS-dntPrdSelCheckBadge { display: flex; animation: dntPrdSelCheckBadgeIn 0.22s ease-out; } @keyframes dntPrdSelCheckBadgeIn { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt { padding: 0.625rem 0.375rem; border-bottom: 2px solid #e2e8f0; text-align: center; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; transition: all 0.3s ease; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt-fixed { flex-direction: row; flex-wrap: nowrap; gap: 0.125rem; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt em { white-space: nowrap; line-height: 1.2; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt em:first-child { font-size: 0.8125rem; font-weight: 700; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt-fixed em:first-child { text-decoration: line-through; color: #9ca3af; font-size: 0.75rem; font-weight: 500; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt em:nth-child(2) { color: #9ca3af; font-size: 0.75rem; font-weight: 500; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt em:nth-child(3), .dnt_prd_divy_instl_req_form .product-selection-grid .label-amt-fixed em:nth-child(3) { font-size: 0.875rem; font-weight: 700; color: #ef4444; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-text { padding: 0.75rem 0.5rem 0.25rem; text-align: center; font-weight: 600; color: #1f2937; flex: 1; width: 100%; min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.4; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-text-sm { font-size: 0.9rem; } .dnt_prd_divy_instl_req_form .product-selection-grid .label-text em { font-style: normal; display: block; width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0.5rem; margin-top: auto; } .dnt_prd_divy_instl_req_form .product-selection-grid .product-selection-card_actions .btn { font-size: 0.6875rem; font-weight: 700; padding: 0.4375rem 0.25rem; line-height: 1.2; white-space: nowrap; } .dnt_prd_divy_instl_req_form .product-selection-grid.is-cart-active .product-selection-card_actions { grid-template-columns: 1fr; } .dnt_prd_divy_instl_req_form .product-selection-grid.is-cart-active .JS-dntPrdSelDirectReqBtn { display: none; } .dnt_prd_divy_instl_req_form .product-selection-card_accml_pint {color: #004596; font-weight: 600;} .dnt_prd_divy_bottom_banner_wrap {margin-top: 1rem; padding: 0 0.5rem;} .dnt_prd_divy_bottom_banner_link {display: block; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); border-radius: 0.5rem; overflow: hidden;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; width: 100%; max-width: 100%; box-sizing: border-box;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li {padding: 0; width: 100%; min-width: 0; float: none;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label {font-size: 1.125rem; height: 100%; min-width: 0; box-sizing: border-box; overflow: hidden;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label:hover {opacity: 1; background-color: transparent; color: #000; position: relative;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label:focus {box-shadow: none;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap .ui-checkboxradio-det-view-btn {display: none;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label > .ui-icon-background {width: 100%; height: 0; padding-bottom: 125%; background-size: contain; margin-bottom: 0.5rem; background-color: transparent;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label:not(.ui-state-disabled):hover:before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #000000b3; z-index: 1;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label:not(.ui-state-disabled):hover:after {content: ""; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; text-align: center; z-index: 11; white-space: normal; font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; word-break: keep-all;} /* 근조 문구 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2001"]:not(.ui-state-disabled):hover:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 근조깃발입니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2005"]:not(.ui-state-disabled):hover:after {content: "리본이 있어 근조기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2105"]:not(.ui-state-disabled):hover:after {content: "근조기와 함께 홍삼과 위로 편지를 보내 유족에게 기운을 전해줄 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2205"]:not(.ui-state-disabled):hover:after {content: "근조기로 고인을 추모하고 고인이나 유족 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2004"]:not(.ui-state-disabled):hover:after {content: "고인의 평소사진이나 작품사진으로 고인을 추모하는 액자화환 입니다.";} /* 축하 문구 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1001"]:not(.ui-state-disabled):hover:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 축하깃발입니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1005"]:not(.ui-state-disabled):hover:after {content: "리본이 있어 축하기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1205"]:not(.ui-state-disabled):hover:after {content: "축하기로 결혼을 축하하고 신랑신부 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1004"]:not(.ui-state-disabled):hover:after {content: "결혼식 청첩장의 신랑 신부 사진이나 정기총회 등에서 지난 행사 사진 등으로 액자를 만들어 갤러리 같은 분위기 연출로 행사 분위기를 올려줍니다.";} /* 문구 없어서 예외 처리 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1002"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1002"]:hover:after, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2002"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2002"]:hover:after, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2003"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2003"]:hover:after {display: none;} /* 친환경 뱃지*/ .ui-checkboxradio-icon-badge {position: absolute; top: 5px; left: 5px; z-index: 2; border: 1px solid #2cb12c; color: #2cb12c; background-color: #f2fff2; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold;} .ui-checkboxradio-icon-badge:after {content: "친환경"; display: inline-block;} .ui-checkboxradio-create-icon-badge {position: absolute; top: 5px; left: 5px; z-index: 2; border: 1px solid #007bff; color: #007bff; background-color: #cbe4ffe0; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold;} .ui-checkboxradio-create-icon-badge:after {content: "보관상품"; display: inline-block;} .dnt_prd_lst_cont .ui-checkboxradio-icon-badge {position: static; transform: none; display: inline-block;} /* 친환경 뱃지 예외 처리 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2002"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2016"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2026"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2036"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2046"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1016"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1026"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2003"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1002"] .ui-checkboxradio-icon-badge {display: none;} /* 배송설치요청 - 제품상세보기 다이얼로그 */ .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_info {width: 100%; display: table; table-layout: fixed;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_info > * {display: table-cell; vertical-align: middle;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_img_wrap {position: static; transform: none; width: 10rem; padding-left: 1rem;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_img {width: 100%; padding-bottom: 125%; background-size: contain; background-repeat: no-repeat; background-position: center center;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_info .card:hover {border: 1px solid #ccc !important; box-shadow: 1px 1px 3px rgba(0,0,0,0.15) !important; background-color: transparent;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_info .dnt_prd_lst_cont > dl > dd {font-size: 1.125rem;} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2001"] .dnt_prd_lst_cont > dl > dt:after {content: "근조기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2001"] .dnt_prd_lst_cont > dl > dd:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 근조깃발입니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2001"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2001.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2005"] .dnt_prd_lst_cont > dl > dt:after {content: "리본 근조기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2005"] .dnt_prd_lst_cont > dl > dd:after {content: "리본이 있어 근조기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2005"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2005.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2105"] .dnt_prd_lst_cont > dl > dt:after {content: "홍삼 근조기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2105"] .dnt_prd_lst_cont > dl > dd:after {content: "근조기와 함께 홍삼과 위로 편지를 보내 유족에게 기운을 전해줄 수 있습니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2105"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2105.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2205"] .dnt_prd_lst_cont > dl > dt:after {content: "쌀기부 근조기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2205"] .dnt_prd_lst_cont > dl > dd:after {content: "근조기로 고인을 추모하고 고인이나 유족 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2205"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2205.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2004"] .dnt_prd_lst_cont > dl > dt:after {content: "근조액자"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2004"] .dnt_prd_lst_cont > dl > dd:after {content: "고인의 평소사진이나 작품사진으로 고인을 추모하는 액자화환 입니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2004"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2004.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2002"] .dnt_prd_lst_cont > dl > dt:after {content: "근조화환"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2002"] .dnt_prd_lst_cont > dl > dd:after {content: "";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2002"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2002.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2003"] .dnt_prd_lst_cont > dl > dt:after {content: "용품"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2003"] .dnt_prd_lst_cont > dl > dd:after {content: "";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="2003"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/2003.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1001"] .dnt_prd_lst_cont > dl > dt:after {content: "축하기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1001"] .dnt_prd_lst_cont > dl > dd:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 축하깃발입니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1001"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/1001.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1005"] .dnt_prd_lst_cont > dl > dt:after {content: "리본 축하기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1005"] .dnt_prd_lst_cont > dl > dd:after {content: "리본이 있어 축하기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1005"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/1005.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1205"] .dnt_prd_lst_cont > dl > dt:after {content: "쌀기부 축하기"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1205"] .dnt_prd_lst_cont > dl > dd:after {content: "축하기로 결혼을 축하하고 신랑신부 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1205"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/1205.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1004"] .dnt_prd_lst_cont > dl > dt:after {content: "축하액자"} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1004"] .dnt_prd_lst_cont > dl > dd:after {content: "결혼식 청첩장의 신랑 신부 사진이나 정기총회 등에서 지난 행사 사진 등으로 액자를 만들어 갤러리 같은 분위기 연출로 행사 분위기를 올려줍니다.";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1004"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/1004.png");} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1002"] .dnt_prd_lst_cont > dl > dt:after {content: "축하화환";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1002"] .dnt_prd_lst_cont > dl > dd:after {content: "";} .okflag_delivery_usr_req_bas_item_det_view_form[data-product-code="1002"] .dnt_prd_lst_img {background-image: url("/common/css/images/add-type-images/1002.png");} /* 친환경 상품 소개 - 요금조회 다이얼로그 */ .dnt_prd_amt_info {font-family: "Noto Sans KR", sans-serif; padding: 1.25rem !important;} /* 가격안내 - 화환 */ .divy_flwr_pr_lst {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-height: 80vh; overflow-y: auto;} .divy_flwr_pr_lst.type_02 {grid-template-columns: repeat(3, 1fr);} .divy_flwr_pr_lst > li .card {box-shadow: 1px 1px 3px rgba(0,0,0,0.15); border: 1px solid #ccc !important;} .divy_flwr_pr_lst > li .card > .card-body {background-color: transparent; padding: 0.75rem;} .divy_flwr_pr_lst.type_02 > li .card > .card-body {padding: 0.5rem;} .divy_flwr_pr_lst > li .divy_flwr_pr_lst_img_wrap {width: 60%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden; margin: 0 auto;} .divy_flwr_pr_lst > li.type_02 .divy_flwr_pr_lst_img_wrap {width: 100%; height: 0; padding-bottom: 125%;} .divy_flwr_pr_lst > li .divy_flwr_pr_lst_img_wrap > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; width: 100%; height: 100%;} .divy_flwr_pr_lst > li dl {margin-top: 0.75rem; margin-bottom: 0; text-align: center;} .divy_flwr_pr_lst > li dl > dt {font-size: 1.25rem;} .divy_flwr_pr_lst.type_02 > li dl > dt {font-size: 1.125rem;} .divy_flwr_pr_lst > li dl > dd {margin-top: 0.25rem; font-weight: bold; font-size: 1.125rem;} .divy_flwr_pr_lst.type_02 > li dl > dd {font-size: 0.9rem;} .divy_flwr_pr_lst > li dl > dd > span:nth-child(1) {text-decoration: line-through; color: #6c757d; font-weight: 500;} .divy_flwr_pr_lst > li dl > dd > span:nth-child(2) {margin-left: 0.375rem; margin-right: 0.375rem;} .divy_flwr_pr_lst.type_02 > li dl > dd > span:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .divy_flwr_pr_lst > li dl > dd > span:nth-child(3) {color: #dc3545; font-size: 1.25rem;} .divy_flwr_pr_lst.type_02 > li dl > dd > span:nth-child(3) {font-size: 1rem;} @media (max-width: 600px) { .divy_flwr_pr_lst.type_02 {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 480px) { .divy_flwr_pr_lst > li .card > .card-body {padding: 0.5rem;} .divy_flwr_pr_lst > li dl > dd {font-size: 0.9rem; white-space: nowrap;} .divy_flwr_pr_lst.type_02 > li dl > dd {font-size: 0.85rem;} .divy_flwr_pr_lst > li dl > dd > span:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .divy_flwr_pr_lst > li dl > dd > span:nth-child(3) {color: #dc3545; font-size: 1rem;} .divy_flwr_pr_lst.type_02 > li dl > dd > span:nth-child(3) {font-size: 0.9rem;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_info {display: flex; flex-direction: column-reverse;} .okflag_delivery_usr_req_bas_item_det_view_form .dnt_prd_lst_img_wrap {width: 80%; padding-left: 0;} } /* 배송설치요청 - 상품소개 */ .dnt_prd_divy_instl_req_form .label-amt, .dnt_prd_divy_instl_req_form .label-text {display: block; text-align: center; word-break: keep-all; overflow-wrap: anywhere;} .dnt_prd_divy_instl_req_form .label-text > em {display: block;} .dnt_prd_divy_instl_req_form .label-amt > em {font-weight: 500; font-size: 1rem;} .dnt_prd_divy_instl_req_form .label-text {font-weight: bold;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em {font-size: 0.9rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(1) {text-decoration: line-through; color: #6c757d; font-weight: 500;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(3) {font-size: 1rem; color: #dc3545;} .dnt_prd_divy_instl_req_form {padding-bottom: 0;} #JS-okflagDeliveryUsrReqBasStep2Wrap:not(.d-none) {padding-bottom: 0.75rem;} .dnt_prd_sel_cta_bar.is-step2 {padding-bottom: 1rem;} .dnt_prd_ltst_ord_sec {padding: 1rem 0.375rem 0.75rem; margin-bottom: 0.25rem; box-sizing: border-box; overflow: visible;} .dnt_prd_ltst_ord_sec_head {margin-bottom: 0.875rem;} .dnt_prd_ltst_ord_sec_title {margin: 0 0 0.375rem; font-size: 1rem; font-weight: 700; color: #0f172a; word-break: keep-all;} .dnt_prd_ltst_ord_sec_title i {color: #004596;} .dnt_prd_ltst_ord_sec_desc {margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #64748b; word-break: keep-all;} .dnt_prd_ltst_ord_lst {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0.125rem; list-style: none; overflow: visible;} .dnt_prd_ltst_ord_item {min-width: 0; list-style: none; overflow: visible; height: 100%;} .dnt_prd_ltst_ord_card {display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; height: 100%; min-height: 100%; padding: 0.75rem; border-radius: 0.875rem; border: 1px solid #eef2f7; background-color: #fff; box-shadow: none; transition: border-color 0.2s ease; position: relative; box-sizing: border-box; overflow: hidden;} .dnt_prd_ltst_ord_card:hover {border-color: #93c5fd;} .dnt_prd_ltst_ord_card_top {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0;} .dnt_prd_ltst_ord_type_badge {display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; width: fit-content; max-width: calc(100% - 4.5rem); padding: 0.1875rem 0.4375rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .dnt_prd_ltst_ord_type_badge.is-funeral {background-color: #e2e8f0; color: #334155;} .dnt_prd_ltst_ord_type_badge.is-celebration {background-color: #dbeafe; color: #004596;} .dnt_prd_ltst_ord_appl_dt {flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: #64748b; line-height: 1.2; white-space: nowrap; letter-spacing: -0.01em;} .dnt_prd_ltst_ord_card_main {display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; min-width: 0; flex: 1 1 auto;} .dnt_prd_ltst_ord_visual {flex: 0 0 4rem; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box;} .dnt_prd_ltst_ord_visual.is-stack {position: relative; flex: 0 0 4rem; width: 4rem; height: 4rem;} .dnt_prd_ltst_ord_img {display: block; width: 4rem; height: 4rem; border-radius: 0.625rem; border: 1px solid #e5e7eb; background-color: #f3f4f6; object-fit: cover; object-position: center;} .dnt_prd_ltst_ord_visual.is-stack .dnt_prd_ltst_ord_img {position: absolute; width: 2.625rem; height: 2.625rem; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); object-fit: cover; object-position: center;} .dnt_prd_ltst_ord_visual.is-stack .dnt_prd_ltst_ord_img.is-stack-0 {top: 0; left: 0; z-index: 2;} .dnt_prd_ltst_ord_visual.is-stack .dnt_prd_ltst_ord_img.is-stack-1 {right: 0; bottom: 0; z-index: 1;} .dnt_prd_ltst_ord_stack_plus {position: absolute; top: 50%; left: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #3366b9 0%, #004596 100%); color: #fff; font-size: 0.5rem; line-height: 1; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); transform: translate(-50%, -50%); pointer-events: none;} .dnt_prd_ltst_ord_stack_plus i {display: block; font-size: 0.4375rem; line-height: 1;} .dnt_prd_ltst_ord_body {flex: 1; min-width: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 0.25rem;} .dnt_prd_ltst_ord_prd_nm {display: block; max-width: 100%; font-size: 0.8125rem; font-weight: 700; color: #0f172a; line-height: 1.35;} .dnt_prd_ltst_ord_prd_sub {display: block; margin-top: 0.125rem; margin-bottom: 0.375rem; color: #64748b; font-size: 0.6875rem; word-break: keep-all;} .dnt_prd_ltst_ord_plc {display: block; margin-top: 0; min-width: 0; text-align: left;} .dnt_prd_ltst_ord_plc_area {display: block; max-width: 100%; font-size: 0.6875rem; font-weight: 600; color: #64748b; line-height: 1.35; text-align: left;} .dnt_prd_ltst_ord_plc_nm {display: block; max-width: 100%; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 600; color: #334155; line-height: 1.4; text-align: left;} .dnt_prd_ltst_ord_rcvr {display: block; max-width: 100%; margin-top: 0; padding-top: 0; border-top: none; color: #64748b; font-size: 0.6875rem; text-align: left;} .dnt_prd_ltst_ord_card .JS-dntPrdLtstOrdReorderBtn {margin-top: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 800; padding: 0.5rem 0.625rem; border: none; border-radius: 0.625rem; background: linear-gradient(135deg, #3366b9 0%, #004596 100%); box-shadow: none; transition: opacity 0.15s ease;} .dnt_prd_ltst_ord_card .JS-dntPrdLtstOrdReorderBtn:hover, .dnt_prd_ltst_ord_card .JS-dntPrdLtstOrdReorderBtn:focus {transform: none; box-shadow: none; color: #fff; opacity: 0.92;} .dnt_prd_ltst_ord_card .JS-dntPrdLtstOrdReorderBtn i {font-size: 0.9375rem; line-height: 1;} .dnt_prd_ltst_ord_divider {display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.25rem; color: #94a3b8; font-size: 0.8125rem; font-weight: 600;} .dnt_prd_ltst_ord_divider::before, .dnt_prd_ltst_ord_divider::after {content: ''; flex: 1; height: 1px; background-color: #e2e8f0;} .dnt_prd_ltst_ord_divider span {white-space: nowrap; word-break: keep-all;} .dnt_prd_ltst_ord_empty {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; border-radius: 0.875rem; border: 1px dashed #dbeafe; background-color: #f8fafc; text-align: center; box-sizing: border-box;} .dnt_prd_ltst_ord_empty_icon {display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.875rem; border-radius: 50%; background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%); color: #64748b; font-size: 1.375rem; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);} .dnt_prd_ltst_ord_empty_icon.is-login {color: #004596;} .dnt_prd_ltst_ord_empty_msg {margin: 0 0 0.875rem; font-size: 0.875rem; line-height: 1.55; color: #64748b; word-break: keep-all;} .dnt_prd_ltst_ord_empty_msg:last-child {margin-bottom: 0;} .dnt_prd_ltst_ord_empty_msg_em {display: block; margin: 0 0 0.375rem; font-size: 0.9375rem; font-weight: 700; color: #0f172a; line-height: 1.45;} .dnt_prd_ltst_ord_empty .dnt_prd_ltst_ord_empty_msg_em:only-of-type, .dnt_prd_ltst_ord_empty > .dnt_prd_ltst_ord_empty_msg_em:last-child {margin-bottom: 0;} .dnt_prd_ltst_ord_empty .COMMON_LOGIN_FORM_BTN {margin-top: 0.125rem; font-weight: 700;} .dnt_prd_ltst_ord_sec.is-mo {padding: 0.75rem 0.25rem 0.625rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_sec_head {margin-bottom: 0.75rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_sec_title {font-size: 0.9375rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_sec_desc {font-size: 0.75rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_lst {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; padding: 0.125rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_card {gap: 0.375rem; height: 100%; padding: 0.5rem 0.625rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_card_main {gap: 0.625rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_visual {flex: 0 0 3rem; width: 3rem; height: 3rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_visual.is-stack {flex: 0 0 3rem; width: 3rem; height: 3rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_img {width: 3rem; height: 3rem; border-radius: 0.5rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_visual.is-stack .dnt_prd_ltst_ord_img {width: 2rem; height: 2rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_stack_plus {width: 0.9375rem; height: 0.9375rem; border-width: 1.5px; font-size: 0.4375rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_stack_plus i {font-size: 0.375rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_body {gap: 0.125rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_prd_nm {line-height: 1.3;} .dnt_prd_ltst_ord_sec.is-mo .JS-dntPrdLtstOrdReorderBtn {margin-top: auto; width: 100%; min-height: 1.875rem; font-size: 0.75rem; padding: 0.25rem 0.375rem;} .dnt_prd_ltst_ord_sec.is-mo .dnt_prd_ltst_ord_divider {margin: 1rem 0 0.125rem; font-size: 0.75rem; gap: 0.75rem;} .dnt_prd_evt_branch_gate {display: block; padding: 2rem 1rem 2.25rem; margin-bottom: 1rem; box-sizing: border-box; background-color: transparent; border: none; border-radius: 0;} .dnt_prd_evt_branch_gate.d-none {display: none !important;} .dnt_prd_evt_branch_gate_inner {width: 100%; max-width: 42rem; margin: 0 auto; text-align: center;} .dnt_prd_evt_branch_gate_lbl {margin: 0 0 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3366b9;} .dnt_prd_evt_branch_gate_title {margin: 0 0 0.625rem; font-size: 1.75rem; font-weight: 800; line-height: 1.35; color: #0f172a; word-break: keep-all;} .dnt_prd_evt_branch_gate_desc {margin: 0 0 1.75rem; font-size: 0.9375rem; line-height: 1.5; color: #64748b; word-break: keep-all;} .dnt_prd_evt_branch_gate_btns {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border: none; border-radius: 0; overflow: visible; background-color: transparent; box-shadow: none;} .dnt_prd_evt_branch_gate_btn {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; min-width: 0; min-height: 11rem; padding: 1.25rem 1rem; border: 1px solid #e2e8f0; border-radius: 1rem; background-color: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); cursor: pointer; transition: box-shadow 0.15s ease, background-color 0.15s ease; position: relative; overflow: hidden;} .dnt_prd_evt_branch_gate_btn:hover {background-color: #f8fafc; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);} .dnt_prd_evt_branch_gate_btn.is-funeral .dnt_prd_evt_branch_gate_btn_icon {background-color: #475569; box-shadow: 0 6px 16px rgba(71, 85, 105, 0.22);} .dnt_prd_evt_branch_gate_btn.is-celebration .dnt_prd_evt_branch_gate_btn_icon {background-color: #3366b9; box-shadow: 0 6px 16px rgba(51, 102, 185, 0.22);} .dnt_prd_evt_branch_gate_btn_icon {display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; color: #fff; font-size: 1.5rem;} .dnt_prd_evt_branch_gate_btn_icon i {font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased;} .dnt_prd_evt_branch_gate_btn_title {font-size: 1.1875rem; font-weight: 800; line-height: 1.25; color: #0f172a;} .dnt_prd_evt_branch_gate_btn_desc {font-size: 0.8125rem; line-height: 1.45; color: #64748b; word-break: keep-all;} .dnt_prd_evt_branch_gate_btn .JS-dntPrdEvtBranchGateCheckBadge {position: absolute; top: 10px; right: 10px; z-index: 3; display: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: #28a745; color: #fff; font-size: 0.8125rem; line-height: 1; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.38);} .dnt_prd_evt_branch_gate_btn.is-active {border-color: transparent;} .dnt_prd_evt_branch_gate_btn.is-active .JS-dntPrdEvtBranchGateCheckBadge {display: flex; animation: dntPrdEvtBranchGateCheckIn 0.22s ease-out;} .dnt_prd_evt_branch_gate_btn.is-active::after {content: ''; position: absolute; inset: 0; border: 2px solid #004596; border-radius: inherit; pointer-events: none; z-index: 2; box-sizing: border-box;} .dnt_prd_evt_branch_gate_btn.is-funeral.is-active::after {border-color: #334155;} .dnt_prd_evt_branch_gate_btn.is-celebration.is-active::after {border-color: #004596;} @keyframes dntPrdEvtBranchGateCheckIn {from {transform: scale(0.55); opacity: 0;} to {transform: scale(1); opacity: 1;}} body.is-dnt-prd-gate-revealed .dnt_prd_divy_instl_req_form_top_label_wrap, body.is-dnt-prd-gate-revealed .JS-okflagDeliveryUsrReqBasItemList > dd > .input-group:first-child {display: none;} body.is-dnt-prd-gate-revealed .JS-okflagDeliveryUsrReqBasItemList > dt {display: none;} .dnt_prd_evt_branch_gate.is-selected {padding: 1rem 1rem 1rem; margin-bottom: 0; border-bottom: 1px solid #e2e8f0;} .dnt_prd_evt_branch_gate.is-selected .dnt_prd_evt_branch_gate_btn.is-active {background-color: #f3f4f6;} .dnt_prd_evt_branch_gate.is-selected .dnt_prd_evt_branch_gate_btn:not(.is-active) {opacity: 0.45;} #JS-okflagDeliveryUsrReqBasStep1Wrap.is-gate-revealed {animation: dntPrdStep1GateReveal 0.45s ease-out;} @keyframes dntPrdStep1GateReveal {from {opacity: 0; transform: translateY(16px);} to {opacity: 1; transform: translateY(0);}} body.is-dnt-prd-divy-instl-req-form .quick {z-index: 10001;} body.is-dnt-prd-divy-instl-req-form .quick:not(.on) {bottom: 12rem;} body.is-dnt-prd-divy-instl-req-form .notify.notify__bottom-right {bottom: var(--dnt-prd-toast-bottom, 12rem) !important; z-index: 10003;} .dnt_prd_sel_cta_bar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 10002; background-color: rgba(255, 255, 255, 0.93); border-top: 4px solid #3366b9; box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.08); padding: 0.625rem 0 0.875rem;} .dnt_prd_sel_cta_bar.d-none {display: none !important;} .dnt_prd_sel_cta_bar_inner {position: relative; width: 100%; padding: 0 1rem 0 4.75rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;} .dnt_prd_sel_cta_cart_badge {position: absolute; top: -0.25rem; left: 0.75rem; z-index: 3; width: 3.75rem; height: 3.75rem; display: flex; align-items: center; justify-content: center; border-radius: 1rem; background: linear-gradient(145deg, #fff 0%, #f0fdf4 100%); border: 4px dashed #28a745; box-shadow: 0 6px 20px rgba(40, 167, 69, 0.18); pointer-events: none;} .dnt_prd_sel_cta_cart_icon {display: block; font-family: "Font Awesome 5 Duotone"; font-weight: 900; font-style: normal; font-size: 2rem; line-height: 1; color: #28a745; --fa-primary-color: #1e7e34; --fa-secondary-color: #28a745; --fa-secondary-opacity: 0.45; -webkit-font-smoothing: antialiased;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_cart_icon {--fa-primary-color: #155724; --fa-secondary-color: #34ce57; --fa-secondary-opacity: 0.5;} .dnt_prd_sel_cta_cart_cnt {position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.375rem; height: 1.375rem; padding: 0 0.3rem; border-radius: 999px; background-color: #dc3545; border: 2px solid #fff; color: #fff; font-size: 0.6875rem; font-weight: 800; line-height: 1rem; text-align: center; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.45);} .dnt_prd_sel_cta_cart_plus {position: absolute; top: -0.35rem; right: -0.35rem; width: 1.375rem; height: 1.375rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background-color: #dc3545; border: 2px solid #fff; color: #fff; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.45);} .dnt_prd_sel_cta_cart_plus i {display: block; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; font-size: 0.625rem; line-height: 1; -webkit-font-smoothing: antialiased;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_cart_plus {display: none;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_cart_cnt {display: none !important;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_cart_badge {background: linear-gradient(145deg, #ecfdf5 0%, #bbf7d0 100%); box-shadow: 0 8px 24px rgba(40, 167, 69, 0.32);} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_cart_badge {animation: dntPrdSelCtaCartPulse 2.4s ease-in-out infinite;} @keyframes dntPrdSelCtaCartPulse {0%, 100% {transform: translateY(0); box-shadow: 0 6px 20px rgba(40, 167, 69, 0.18);} 50% {transform: translateY(-3px); box-shadow: 0 10px 28px rgba(40, 167, 69, 0.28);}} .dnt_prd_sel_cta_body {display: flex; align-items: stretch; justify-content: space-between; gap: 0.75rem; width: 100%;} .dnt_prd_sel_cta_info {flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;} .dnt_prd_sel_cta_title {display: block; margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: #0f172a; word-break: keep-all;} .dnt_prd_sel_cta_status {margin: 0.2rem 0 0; font-size: 0.75rem; color: #64748b; line-height: 1.4; word-break: keep-all;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_title, .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_status {display: none;} .dnt_prd_sel_cta_info .addn_ty_lst_preview {flex-wrap: nowrap; overflow-x: auto; gap: 0.75rem; margin: 0; padding: 0.125rem 0; max-width: 100%; -webkit-overflow-scrolling: touch;} .dnt_prd_sel_cta_info .addn_ty_lst_preview > li {width: 4.25rem; min-width: 4.25rem; max-width: 4.25rem;} .dnt_prd_sel_cta_info .addn_ty_lst_preview > li > i.JS-addnTyLstPreviewImg {width: 2.75rem; height: 2.75rem;} .dnt_prd_sel_cta_info .addn_ty_lst_preview > li > span {display: block; max-width: 100%; margin-top: 0.25rem; color: #0f172a; font-weight: 500; font-size: 0.6875rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .dnt_prd_sel_cta_info .addn_ty_lst_preview > li > em {position: absolute; top: -0.2rem; right: 0; width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; font-weight: bold; font-style: normal; color: #fff; background-color: #dc3545; border: 2px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 4px rgba(220, 53, 69, 0.5);} .dnt_prd_sel_cta_info .addn_ty_lst_preview > li > em > i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;} .dnt_prd_sel_cta_btn_wrap {display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; align-self: center;} .dnt_prd_sel_cta_bar.is-step2 .dnt_prd_sel_cta_btn_wrap {flex-direction: row; align-items: stretch; gap: 0.5rem; width: 100%; max-width: 28rem;} .dnt_prd_sel_cta_bar.is-step2 .dnt_prd_sel_cta_btn_wrap > .dnt_prd_sel_cta_btn {flex: 1 1 0; min-width: 0; align-self: stretch;} .dnt_prd_sel_cta_bar.is-step2 .JS-okflagDeliveryUsrReqBasTestDivyBtn {background-color: #6c757d; border: none; color: #fff; font-size: 1rem; font-weight: 700; box-shadow: 0 4px 16px rgba(108, 117, 125, 0.35);} .dnt_prd_sel_cta_bar.is-step2 .JS-okflagDeliveryUsrReqBasTestDivyBtn:hover {color: #fff; opacity: 0.92;} .dnt_prd_sel_cta_btn {flex-shrink: 0; margin: 0; align-self: center; min-width: 11rem; min-height: 3.5rem; border-radius: 0.75rem !important; font-weight: 800; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; letter-spacing: -0.02em;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabel {display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; line-height: 1.2;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabelText {display: inline-flex; align-items: center; gap: 0.5rem;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabelText::before {font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; display: inline-block; line-height: 1; -webkit-font-smoothing: antialiased;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabelText.is-empty::before {content: "\f058"; font-weight: 300; font-size: 1.25em; color: #94a3b8;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabelText.is-ready.is-divy-req::before {content: "\f067"; font-weight: 900; font-size: 1.35em; color: #fff;} .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnArrow {font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; font-size: 0.9375em; flex-shrink: 0; opacity: 0.9; display: inline-block; -webkit-font-smoothing: antialiased;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_btn {box-shadow: none; font-size: 1rem; font-weight: 700; min-height: 3.25rem;} .dnt_prd_sel_cta_bar.is-ready {background-color: rgba(255, 255, 255, 0.93); box-shadow: 0 -16px 40px rgba(51, 102, 185, 0.12);} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_btn.btn-primary {background: linear-gradient(135deg, #3366b9 0%, #004596 100%); border: none; color: #fff; min-width: 14rem; min-height: 4.25rem; font-size: 1.5rem; box-shadow: 0 8px 24px rgba(0, 69, 150, 0.4);} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_btn.btn-primary:hover {transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 69, 150, 0.48); color: #fff; opacity: 1;} @media (max-width: 991px) { .dnt_prd_evt_branch_gate {padding: 1.25rem 0 1.75rem; margin-bottom: 0.5rem;} .dnt_prd_evt_branch_gate_inner {max-width: none;} .dnt_prd_evt_branch_gate_title {font-size: 1.375rem;} .dnt_prd_evt_branch_gate_desc {margin-bottom: 1.25rem; font-size: 0.8125rem;} .dnt_prd_evt_branch_gate_btns {grid-template-columns: 1fr 1fr; gap: 0.75rem;} .dnt_prd_evt_branch_gate_btn {min-height: 7.5rem; padding: 0.75rem 0.375rem; border-radius: 0.875rem;} .dnt_prd_evt_branch_gate_btn_icon {width: 3rem; height: 3rem; font-size: 1.25rem;} .dnt_prd_evt_branch_gate_btn_title {font-size: 0.875rem;} .dnt_prd_evt_branch_gate_btn_desc {font-size: 0.625rem;} .dnt_prd_evt_branch_gate.is-selected {padding: 0.75rem 0 0.75rem;} .dnt_prd_sel_cta_bar {padding: 0.5rem 0 0.625rem; border-top: 4px solid #3366b9; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);} .dnt_prd_sel_cta_bar_inner {padding: 0.375rem 0.75rem 0.625rem; display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto; gap: 0.5rem 0.5rem; align-items: center;} .dnt_prd_sel_cta_cart_badge {position: relative; top: auto; left: auto; grid-row: 1; grid-column: 1; width: 3rem; height: 3rem; align-self: center;} .dnt_prd_sel_cta_body {grid-row: 1; grid-column: 2;} .dnt_prd_sel_cta_cart_icon {font-size: 1.625rem;} .dnt_prd_sel_cta_body {flex-direction: column; align-items: stretch; gap: 0.5rem;} .dnt_prd_sel_cta_bar.is-step2 {padding-bottom: 0.875rem;} .dnt_prd_sel_cta_bar.is-step2 .dnt_prd_sel_cta_body {align-items: stretch;} .dnt_prd_sel_cta_bar.is-step2 .dnt_prd_sel_cta_btn_wrap {max-width: none;} .dnt_prd_sel_cta_bar.is-step2 .JS-okflagDeliveryUsrReqBasTestDivyBtn {min-height: 3.625rem; font-size: 0.875rem; padding: 0.625rem 0.75rem;} .dnt_prd_sel_cta_info {display: flex; flex-direction: column; gap: 0.3rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; background-color: rgba(248, 250, 252, 0.88); border: 1px solid rgba(226, 232, 240, 0.95);} .dnt_prd_sel_cta_title {display: none;} .dnt_prd_sel_cta_status {display: block; margin: 0; font-size: 0.6875rem; line-height: 1.45;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_info {background-color: rgba(238, 244, 255, 0.92); border-color: rgba(191, 219, 254, 0.85);} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_status {display: block;} .dnt_prd_sel_cta_btn {width: 100%; min-width: 0; align-self: stretch; min-height: 3.25rem; font-size: 1rem; padding: 0.625rem 1rem; border-radius: 0.625rem !important;} .dnt_prd_sel_cta_bar.is-empty {padding: 2px 0;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_bar_inner {padding-top: 2px;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_btn {min-height: 3.125rem; font-size: 0.9375rem;} .dnt_prd_sel_cta_bar.is-ready .dnt_prd_sel_cta_btn.btn-primary {min-height: 3.625rem; min-width: 0; width: 100%; font-size: 1.1875rem;} body.is-dnt-prd-divy-instl-req-form .notify.notify__bottom-right {bottom: var(--dnt-prd-toast-bottom, 7rem) !important;} } @media (min-width: 992px) { .sub_body .dnt_prd_sel_cta_bar_inner, .tiles-mngt-default .dnt_prd_sel_cta_bar_inner {width: 1250px; max-width: 100%; margin: 0 auto; padding-left: calc(250px + 4.75rem); padding-right: 1rem;} .sub_body .dnt_prd_sel_cta_cart_badge, .tiles-mngt-default .dnt_prd_sel_cta_cart_badge {left: 250px;} } /* 관리자 - 상품 hover data-label */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="1007"]:not(.ui-state-disabled):hover:after {content: attr(data-label);} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label[data-product-code="2007"]:not(.ui-state-disabled):hover:after {content: attr(data-label);} body.is-dnt-prd-divy-instl-req-form.tiles-mngt-default .dafl-mngt-body-wrap {min-height: calc(100vh - 86px); padding-bottom: 0;} body.is-dnt-prd-divy-instl-req-form.tiles-mngt-default .dnt_prd_sel_cta_bar {bottom: 0 !important;} body.is-dnt-prd-divy-instl-req-form.tiles-mngt-default .notify.notify__bottom-right {bottom: var(--dnt-prd-toast-bottom, 7rem) !important;} /* 모바일 - 상단 라벨 / 저장 버튼 / 페이지 여백 */ .dnt_prd_divy_instl_req_form_top_label_wrap .input-group-append, .dnt_prd_divy_instl_req_form_top_label_wrap .input-group-text {flex: 1;} .dnt_prd_divy_instl_req_form_top_label_wrap .input-group-text {background-color: #fff; padding: 0.5rem 0.75rem;} .dnt_prd_divy_instl_req_form_top_label_wrap label {flex: 1; font-size: 1.125rem; font-weight: bold; display: flex; justify-content: center; align-items: center; gap: 0.25rem;} .dnt_prd_divy_instl_req_form_top_label_wrap label input[type="radio"] {width: 1.25rem; height: 1.25rem; margin: 0;} .dnt_prd_divy_instl_req_form_top_label_wrap label input[type="radio"]:checked + div {color: #3366b9;} .save_okflag_delivery_usr_req_bas_btn_wrap {position: fixed; bottom: 4.875rem; left: 0; right: 0; width: 100%; z-index: 10002; background-color: #fff; border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);} .save_okflag_delivery_usr_req_bas_btn_wrap .btn-group {display: flex !important; flex-wrap: nowrap; width: 100%;} .save_okflag_delivery_usr_req_bas_btn_wrap .btn-group > .btn {flex: 1 1 0; min-width: 0; width: auto !important; box-sizing: border-box;} .save_okflag_delivery_usr_req_bas_btn_wrap a.btn {border-radius: 0 !important;} body.is-dnt-prd-divy-instl-req-form .wrapper_cont {min-height: 0;} body.is-dnt-prd-divy-instl-req-form .app_instl_popup_form_mask {z-index: 10003;} body.is-dnt-prd-divy-instl-req-form .save_okflag_delivery_usr_req_bas_btn_wrap {bottom: 0 !important;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_btn {background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #64748b !important;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_btn .JS-okflagDeliveryUsrReqBasStep2WrapBtnLabelText.is-empty {color: #64748b !important;} .dnt_prd_sel_cta_bar.is-empty .dnt_prd_sel_cta_btn.is-disabled {opacity: 1;} @media (max-width: 991px) { .dnt_prd_divy_instl_req_form {margin-top: 1rem;} .dnt_prd_divy_instl_req_form #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList {padding: 0;} .dnt_prd_divy_instl_req_form #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd > ul > li:not(:first-child) {margin-top: 1rem;} .dnt_prd_divy_instl_req_form #okflagDeliveryUsrReqBas dl.JS-okflagDeliveryUsrReqBasItemList > dd > ul > li > dl > dd {margin-top: 0.5rem;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap ul > li label {padding: 0.75rem 0.75rem 0.25rem; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 0.9rem; height: 100%; margin: 0; white-space: nowrap;} .dnt_prd_divy_instl_req_form .JS-okflagDeliveryUsrReqBasItemList > dt {margin-top: 1.5rem;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap {display: block;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; width: 100%;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li {width: 100%; float: none; padding: 0;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li label {white-space: normal; height: 100%;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul > li > label > .ui-icon-background {height: 0; padding-bottom: 125%;} .dnt_prd_divy_instl_req_form .label-amt, .dnt_prd_divy_instl_req_form .label-text {display: block; text-align: center;} .dnt_prd_divy_instl_req_form .label-amt > em {font-weight: 500; font-size: 1.125rem;} .dnt_prd_divy_instl_req_form .label-text {font-weight: bold; font-size: 1.25rem; position: static !important; margin-left: -0.75rem; margin-right: -0.75rem; width: calc(100% + 1.5rem) !important; overflow: hidden; font-family: "Noto Sans KR", sans-serif;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em {font-size: 1rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(1) {text-decoration: line-through; color: #6c757d; font-weight: 500;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(3) {font-size: 1.125rem; color: #dc3545;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul {grid-template-columns: repeat(3, 1fr);} .dnt_prd_sel_cta_bar {bottom: 4.875rem;} .dnt_prd_divy_instl_req_form .dnt_prd_sel_cta_bar, .dnt_prd_divy_instl_req_form ~ .dnt_prd_sel_cta_bar {bottom: 0;} } @media (max-width: 767px) { .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap > ul {grid-template-columns: repeat(2, 1fr);} .dnt_prd_divy_instl_req_form .label-text {font-size: 1.125rem;} .dnt_prd_divy_instl_req_form .label-amt > em {font-weight: 500; font-size: 1rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em {font-size: 0.9rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(3) {font-size: 1rem;} } @media (max-width: 380px) { .dnt_prd_divy_instl_req_form .label-text {font-size: 1.125rem;} .dnt_prd_divy_instl_req_form .label-amt > em {font-weight: 500; font-size: 0.9rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em {font-size: 0.8rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed > em:nth-child(3) {font-size: 0.9rem;} } @media (min-width: 992px) { .sub_body .save_okflag_delivery_usr_req_bas_btn_wrap, .tiles-mngt-default .save_okflag_delivery_usr_req_bas_btn_wrap {box-sizing: border-box; padding-left: calc(50% - 375px); padding-right: calc(50% - 625px);} }