@charset "utf-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 메인 슬라이드 */ .dafl_main_top_banner_wrap {width: 1250px; padding: 2.5rem 1rem; margin: 0 auto;} .dafl_main_top_banner_wrap > div {box-shadow: 3px 3px 4px rgba(0,0,0,0.3); border-radius: 1rem; overflow: hidden;} .dafl_main_top_banner_wrap ul > li > .layout_dafl_main_banner_img_wrap {width: 100%; height: 0; padding-bottom: 30%; position: relative; display: block;} .dafl_main_top_banner_wrap ul > li > .layout_dafl_main_banner_img_wrap:hover {opacity: 1; filter: brightness(1.1);} .dafl_main_top_banner_wrap ul > li > .layout_dafl_main_banner_img_wrap > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;} .dafl_main_top_banner_wrap ul > li.zoom_in.swiper-slide-active > div > img {transform: translate(-50%, -50%) scale(1.25); transition: all 10s ease-out;} .dafl_main_top_banner_wrap ul {display: flex;} .dafl_main_top_banner_wrap ul > li:not(.zoom_in) img {display: none;} .dafl_main_top_banner_wrap .swiper-container-initialized ul > li img {display: block;} .layout_dafl_main_banner_text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; font-size: 3rem; width: 100%; text-align: center; line-height: 5rem; font-weight: 500; text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;} /* 메인 슬라이더 컨테이너 */ /* 메인페이지 상단 버튼 */ .main-section-body {padding: 2.5rem 1rem;} .main-section > .main-section-wrap:nth-child(2) .main-section-body {padding-left: 1rem; padding-right: 1rem;} #layout_top_banner_wrap > ul > li:first-child {position: relative;} #layout_top_banner_wrap > ul > li:first-child > div {width: 90%; position: absolute; bottom: 0;} #layout_top_banner_wrap > ul > li:first-child > div span {display: flex; justify-content: space-between; align-items: center;} #layout_top_banner_wrap > ul > li:first-child > div span > i {margin-right: 0 !important;; font-size: 1.75rem !important; color: #000 !important;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd {padding: 0.5rem 1.5rem 1rem;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row:first-child {border-bottom: 1px solid #d9d9d9;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row:last-child {margin-top: -1px;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6 {padding: 0;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6:first-child {border-right: 1px solid #d9d9d9;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6:last-child {margin-left: -1px;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6 > a {padding: 1rem; font-size: 1.25rem; font-weight: 700;} #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6 > a:hover, #layout_top_banner_wrap > ul > li:first-child .card.h-100 dl > dd > .row > .col-6 > a:focus {color: #3366b9; background-color: #3366b91a;} #layout_top_banner_wrap .card {border-radius: 1rem; overflow: hidden; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); background-color: transparent; text-align: left;} #layout_top_banner_wrap .card:hover:not(.h-100) {transform: translateY(-5px); transition: all 0.25s; box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.2);} #layout_top_banner_wrap .card:hover:not(.h-100) .card-body {filter: brightness(1.15); background-color: #3366b91a;} #layout_top_banner_wrap .card-body {background-color: #ffffff80; padding: 1rem 1.5rem;} #layout_top_banner_wrap a:hover, #layout_top_banner_wrap a:focus {opacity: 1;} #layout_top_banner_wrap .row {margin-left: -0.5rem; margin-right: -0.5rem;} #layout_top_banner_wrap .row > * {padding-left: 0.5rem; padding-right: 0.5rem;} #layout_top_banner_wrap a >.card > .card-body {padding: 0.75rem 2rem;} #layout_top_banner_wrap a > .card > .card-body > span {font-size: 1.375rem;} #layout_top_banner_wrap a > .card > .card-body > span > i {color: #3366b9; margin-right: 1.25rem; font-size: 1.75rem;} #layout_top_banner_wrap a > .card > .card-body > span > em {font-weight: 700;} #layout_top_banner_wrap a:hover > .card > .card-body > span > em {color: #3366b9;} #layout_top_banner_wrap dl {margin-bottom: 0;} #layout_top_banner_wrap dl > dt {font-size: 1.25rem;} #layout_top_banner_wrap dl > dt > span {font-size: 0.9rem; color: #3366B9;} #layout_top_banner_wrap dl > dd {font-size: 0.9rem;} .main_top_slide_tool_bar_wrap {position: absolute; left: 65%; bottom: 5%; z-index: 20;} .main_top_slide_tool_bar {display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.4375rem 0.3125rem 0.3125rem; border-radius: 999px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(241, 245, 249, 0.82) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);} .main_top_slide_tool_btn {display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #475569; font-size: 0.8125rem; line-height: 1; transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;} .main_top_slide_tool_btn:hover {opacity: 1; color: #3366b9; background-color: rgba(51, 102, 185, 0.1);} .main_top_slide_tool_btn:active {transform: scale(0.94);} .main_top_slide_tool_btn--toggle {color: #334155;} .main_top_slide_tool_btn--toggle .main_top_slide_icon_play {display: none; font-size: 0.75rem;} .main_top_slide_tool_btn--toggle .main_top_slide_icon_pause {font-size: 0.8125rem;} .main_top_slide_pause_btn.play .main_top_slide_icon_pause {display: none;} .main_top_slide_pause_btn.play .main_top_slide_icon_play {display: block;} .main_top_slide_tool_divider {width: 1px; height: 1.25rem; background: linear-gradient(180deg, transparent, rgba(100, 116, 139, 0.35), transparent); flex-shrink: 0;} .main_top_slide_tool_nav {display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem; border-radius: 999px; background: rgba(15, 23, 42, 0.05);} .main_top_slide_pagination {display: inline-flex; align-items: baseline; justify-content: center; gap: 0.1875rem; min-width: 4.75rem; padding: 0 0.375rem; font-family: Pretendard Variable, sans-serif; font-variant-numeric: tabular-nums; line-height: 1;} .main_top_slide_pagination_current {font-size: 1rem; font-weight: 700; color: #3366b9; letter-spacing: -0.02em;} .main_top_slide_pagination_sep {font-size: 0.75rem; font-weight: 500; color: #94a3b8;} .main_top_slide_pagination_total {font-size: 0.8125rem; font-weight: 600; color: #64748b;} .main_top_slide_pagination > span.swiper-pagination-current {font-size: 1rem !important; font-weight: 700 !important; color: #3366b9 !important;} .main_top_slide_pagination > span.swiper-pagination-total {font-size: 0.8125rem !important; font-weight: 600 !important; color: #64748b !important;} /* ISO 인증 미니 팝업 */ .iso_mini_popup {position: absolute; top: 1.5rem; right: 1.5rem; z-index: 15; width: 15rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.25); border-radius: 0.5rem; overflow: hidden; background-color: #ffffff80; transition: all 0.3s ease; border: 2px dashed #4a90e2;} .iso_mini_popup a {display: block; padding: 0.5rem;} .iso_mini_popup img {width: 100%; height: auto; display: block;} .iso_mini_popup:hover {transform: translateY(-0.375rem); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3); border-color: #357abd; filter: brightness(1.125);} .iso_mini_popup:hover a {opacity: 0.95;} /* 메인 다플샵 배너 + 만족도 (한 줄기) */ .main-section > .main-section-wrap:nth-child(3) .main-section-body {padding-top: 1.25rem; padding-bottom: 1.25rem;} .dafl_main_mid_satft_stack {display: flex; flex-direction: column; gap: 0.75rem; width: 100%;} /* 메인 중간 다플샵 배너 (이미지 링크) */ .dafl_main_mid_banner_link {box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); overflow: hidden;} .dafl_main_mid_banner_link:hover {opacity: 1; filter: brightness(1.03);} .dafl_main_mid_banner_link > img {display: block; width: 100%; height: auto; vertical-align: top;} /* 메인 고객 만족 평가 */ .main_cus_satft_eval_form_wrap.dafl_main_cus_satft_panel {margin: 0; width: 100%;} .main_cus_satft_eval_star_point {color: #e2e8f0; white-space: nowrap; line-height: 1; font-size: 0.8125rem;} .main_cus_satft_eval_star_point_checked {position: absolute; top: 0; left: 0; color: #f59e0b; overflow: hidden; white-space: nowrap; line-height: 1; font-size: 0.8125rem;} .dafl_main_cus_satft_card {position: relative; box-sizing: border-box; border-radius: var(--radius-md); border: 1px solid rgba(51, 102, 185, 0.12); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 48%, #fffbeb 100%); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07); overflow: hidden;} .dafl_main_cus_satft_card::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #3366b9, #f59e0b, #09c7c7);} .dafl_main_cus_satft_card::after {content: ''; position: absolute; right: 0.625rem; bottom: 0; width: 6rem; height: 4.75rem; background: url("/common/css/images/cus_satft_eval_img.png") no-repeat right bottom / contain; opacity: 0.8; pointer-events: none;} .dafl_main_cus_satft_card_body {position: relative; z-index: 1; padding: 0.875rem 5.75rem 0.875rem 0.875rem;} .dafl_main_cus_satft_top {display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem 1rem; margin-bottom: 0.625rem;} .dafl_main_cus_satft_head {display: flex; align-items: flex-start; gap: 0.625rem; flex: 1 1 18rem; min-width: 0; margin: 0;} .dafl_main_cus_satft_head_icon {flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(145deg, rgba(51, 102, 185, 0.14) 0%, rgba(245, 158, 11, 0.12) 100%); color: #3366b9; font-size: 1.0625rem;} .dafl_main_cus_satft_eyebrow {display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; color: #3366b9; margin-bottom: 0.125rem;} .dafl_main_cus_satft_title {margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: #1e293b; letter-spacing: -0.02em; word-break: keep-all;} .dafl_main_cus_satft_lead {margin: 0; font-size: 0.8125rem; line-height: 1.55; color: #64748b; word-break: keep-all;} .dafl_main_cus_satft_lead_sub {margin-top: 0.375rem;} .dafl_main_cus_satft_lead strong {color: #334155; font-weight: 600;} .dafl_main_cus_satft_highlights {display: flex; flex: 1 1 16rem; gap: 0.5rem; min-width: 0; align-items: stretch;} .dafl_main_cus_satft_highlight {flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 7.25rem; padding: 0.5625rem 0.75rem; border-radius: var(--radius-sm); background: linear-gradient(145deg, #eff6ff 0%, #fff 100%); border: 1px solid rgba(51, 102, 185, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);} .dafl_main_cus_satft_highlight--month {background: linear-gradient(145deg, #fffbeb 0%, #fff 100%); border-color: rgba(245, 158, 11, 0.22);} .dafl_main_cus_satft_highlight--month .dafl_main_cus_satft_highlight_perc {color: #d97706;} .dafl_main_cus_satft_highlight_label {font-size: 0.6875rem; font-weight: 600; color: #64748b;} .dafl_main_cus_satft_highlight_perc {font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: #3366b9; letter-spacing: -0.03em; margin: 0.125rem 0;} .dafl_main_cus_satft_highlight_score {display: inline-flex; align-items: baseline; gap: 0.125rem; margin-bottom: 0.1875rem;} .dafl_main_cus_satft_highlight_num {font-size: 0.875rem; font-weight: 700; color: #334155; line-height: 1;} .dafl_main_cus_satft_highlight_of {font-size: 0.6875rem; color: #94a3b8; font-weight: 500;} .dafl_main_cus_satft_highlight_stars {line-height: 1; margin-bottom: 0.1875rem;} .dafl_main_cus_satft_highlight_meta {font-size: 0.6875rem; color: #94a3b8; text-align: center; line-height: 1.25;} .dafl_main_cus_satft_foot {display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;} .dafl_main_cus_satft_trust_lst {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 0.625rem; flex: 1 1 14rem; min-width: 0;} .dafl_main_cus_satft_trust_lst > li {display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.6875rem; font-weight: 600; color: #475569;} .dafl_main_cus_satft_trust_lst > li > i {color: #3366b9; font-size: 0.6875rem;} .dafl_main_cus_satft_action {flex: 0 0 auto; margin-left: auto; text-align: right;} .dafl_main_cus_satft_cta_hint {margin: 0 0 0.375rem; font-size: 0.6875rem; line-height: 1.4; color: #94a3b8; word-break: keep-all;} .dafl_main_cus_satft_cta {display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.9375rem; border-radius: 999px; background: linear-gradient(135deg, #3366b9 0%, #1d4ed8 100%); color: #fff; font-size: 0.75rem; font-weight: 600; box-shadow: 0 4px 14px rgba(51, 102, 185, 0.32); transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap;} .dafl_main_cus_satft_cta:hover {color: #fff; opacity: 1; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(51, 102, 185, 0.38);} .dafl_main_cus_satft_cta i {font-size: 0.6875rem; transition: transform 0.2s ease;} .dafl_main_cus_satft_cta:hover i {transform: translateX(2px);} .keep_mngt_apl_fn {margin: 2rem auto 0; width: 65%;} .make_qust_apl_fn {margin: 2rem auto 0; width: 45%;} .keep_mngt_apl_fn .card > .card-body, .make_qust_apl_fn .card > .card-body {background-color: #fff;} .keep_mngt_apl_fn .card > .card-body > h4 + p, .make_qust_apl_fn .card > .card-body > h4 + div {margin-top: 2rem;} .COMMON_MAIN_LEFT_BANNER_WRAP {width: 1250px; margin: 0 auto;} .COMMON_MAIN_LEFT_BANNER {position: absolute; z-index: 10; top: 890px; margin-left: -270px; box-shadow: 0 0 3px rgba(0,0,0,20%);} .COMMON_MAIN_LEFT_BANNER_IMG {width: 160px; height: 600px; background-size: contain; background-repeat: no-repeat;} @media (max-width: 1800px) { .COMMON_MAIN_LEFT_BANNER_WRAP {display: none;} } .login_type > div {width: 100px; margin: 0 auto; text-align: left;} .login_type > div > span {vertical-align: sub; margin-left: 0.25rem;} /* 배송지 검색 팝업 */ .divy_plac_srch_popup {position: fixed !important; top: 20% !important;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item {border-top: 1px solid #dbdbdb;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item:hover > div > .text-secondary {background-color: #318989; color: white !important; cursor: pointer;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item:hover > div > span span.text-primary {color: #ff885f !important;} .cmn_srch_addr_item_wrap .cmn_srch_lst_wrap {overflow-y: scroll; height: 250px;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item:hover {background-color: #318989;color: white !important;cursor: pointer;} /* 22.11.29 다플 요청사항 */ .divy_tm_det_guid_btn_wrap {position: relative;} .divy_tm_det_guid_btn_wrap ul > li, .divy_tm_det_guid_btn_wrap ul > li span {font-size: 1rem;} .divy_tm_det_guid_btn_wrap li > strong {vertical-align: 2px;} .divy_tm_det_guid_btn_wrap .divy_tm_det_guid_btn {font-size: 0.8rem; padding: 0.125rem 0.625rem; margin-top: -0.125rem; margin-left: 0.5rem;} .divy_tm_det_guid_btn_wrap .card {position: absolute; top: 30px; box-shadow: 4px 5px 20px 2px rgb(0 0 0 / 12%); z-index: 1;} .divy_tm_det_guid_btn_wrap .divy_tm_det_guid_close_btn {position: absolute; top: 0; right: 9px; font-size: 1.25rem; color: #999; padding: 0.25rem;} .divy_tm_det_guid_btn_wrap .card > .card-body {position: relative;} .cmn_srch_addr_item_wrap .cmn_srch_lst_wrap {overflow-y: scroll; height: 250px;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item:hover {background-color: #318989;color: white !important;cursor: pointer;} /* 23.02.21 [개인 정보 수집 동의 폼] */ #pinfoAgrFormWrap .pinfo_agr_form dl, #pinfoAgrFormWrap .pinfo_agr_form ul {margin-bottom: 0; padding-left: 0;} #pinfoAgrFormWrap .pinfo_agr_form ul > li {list-style: none;} #pinfoAgrFormWrap .pinfo_agr_form > dl {margin-bottom: 2rem;} #pinfoAgrFormWrap .pinfo_agr_form > dl > dt {font-size: 1.125rem;} #pinfoAgrFormWrap .pinfo_agr_form > dl > dd {margin-top: 0.5rem;} #pinfoAgrFormWrap .pinfo_agr_text_form {padding: 1rem 2rem; max-height: 200px; overflow-y: auto; border: 1px solid #dcdcdc; color: #404044;} #pinfoAgrFormWrap .pinfo_agr_text_form > p, #pinfoAgrFormWrap .pinfo_agr_text_form > ul > li {margin-bottom: 0.25rem;} #pinfoAgrFormWrap .pinfo_agr_text_form > ul > li > dl > dt {font-weight: 500;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap {margin-top: 1.5rem;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap > ul {text-align: center;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap > ul > li {display: inline-block; padding: 0rem 0.5rem;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap > ul > li > label {cursor: pointer;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap > ul > li > label > input {display: inline-block; width: 20px; height: 20px; margin-right: 0.25rem; cursor: pointer; vertical-align: middle;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap > ul > li > label > span {font-size: 1.125rem; display: inline-block; vertical-align: middle;} /* 사용자 리뷰 */ .usr_rvw_form_top_wrap .card-body {padding: 1.25rem 2rem; border-radius: 0;} .usr_rvw_form_top_wrap .card-body dl {margin-bottom: 0;} .usr_rvw_form_top_wrap .card-body > ul > li:last-child {padding-left: 3rem;} .usr_rvw_form_top_wrap .card-body > ul > li > dl {text-align: center; border-right: 2px solid #ddd;} .usr_rvw_form_top_wrap .card-body > ul > li > dl > dd {margin-top: 0.5rem;} .usr_rvw_form_top_wrap .card-body > ul > li > dl > dd i {font-size: 1.75rem;} .usr_rvw_point_wrap > li {padding: 0 0.5rem;} .usr_rvw_point_wrap > li > dl > dt {position: relative; height: 80px;} .usr_rvw_point_wrap > li > dl > dt > div:not(.usr_rvw_cnt) {width: 6px; border-radius: 2rem; margin: 0 auto; left: 50%; transform: translateX(-50%);} .usr_rvw_point_wrap > li > dl > dd {font-size: 0.8rem; color: #8C8C8C;} .usr_rvw_bst_point {position: absolute; background-color: #e6e6e6; height: 80px;} .usr_rvw_point {position: absolute; background-color: #e6e6e6; height: 80px;} .usr_rvw_point_checked {position: absolute; background-color: #09c7c7; height: 0px; bottom: 0;} .usr_rvw_bst_point_checked {position: absolute; background-color: #09c7c7; height: 0px; bottom: 0;} .usr_rvw_form_main_toolbar {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 3rem;} .usr_rvw_form_main_menu {margin-top: 0;} .usr_rvw_form_main_menu > li > a {font-size: 1.125rem; font-weight: 300; color: #000;} .usr_rvw_form_main_menu > li.active > a {font-weight: 500; color: #09C7C7;} .usr_rvw_form_main_menu > li:not(:first-child):before {content: "·"; display: inline-block; margin-right: 0.5rem;} .usr_rvw_form_main_filter {flex: 0 0 auto;} .usr_rvw_form_main_filter_grp {display: flex; flex-wrap: nowrap; align-items: stretch; box-sizing: border-box;} .usr_rvw_form_main_filter_grp > * {float: none !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important;} .usr_rvw_form_main_filter_ico {display: flex; align-items: center; justify-content: center; flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.5rem; background-color: #f5f5f5; border: 1px solid #ced4da; border-right: 0; border-radius: 0.25rem 0 0 0.25rem; color: #495057;} .usr_rvw_form_main_filter_sel {flex: 0 0 auto; width: 10.5rem !important; min-height: 2.5rem; border-radius: 0 0.25rem 0.25rem 0 !important;} .usr_rvw_form_main_card_wrap {border-top: 1px solid #000; margin-top: 0.5rem; padding-top: 1rem;} .usr_rvw_form_main_card_wrap > ul {margin-left: -0.5rem; margin-right: -0.5rem;} .usr_rvw_form_main_card_wrap > ul > li {padding: 0.5rem;} .usr_rvw_form_main_card_wrap > ul > li > .card:hover {transform: translateY(-5px); transition: all .3s ease; box-shadow: 1px 2px 5px rgba(0,0,0,0.35);} .usr_rvw_form_main_card_wrap > ul > li a:hover {opacity: 1;} .usr_rvw_form_main_card_wrap .card {border-radius: 1.25rem; box-shadow: 0px 0px 5px rgba(86, 86, 86, 0.35);} .usr_rvw_form_main_card_wrap .card-body {background-color: transparent; padding: 0.75rem 0.75rem 1.25rem 1.25rem;} .usr_rvw_form_main_card_star {color: #ffbc00; font-size: 1.25rem;} .usr_rvw_form_main_card_cus_info > li:first-child {padding-right: 0.5rem;} .usr_rvw_form_main_card_cus_info > li:first-child:after {content: ""; display: inline-block; width: 1px; height: 12px; background-color: #ddd; margin-left: 1rem;} .usr_rvw_form_main_card_cus_info > li:last-child {font-weight: 300; padding-left: 0.5rem;} .usr_rvw_form_top_left_form {width: 200px;} .usr_rvw_form_main_card_img {width: 70px; height: 70px; border: 1px solid #dee2e6; border-radius: 0.5rem; background-position: center; background-size: 100% 100%; transition: all 0.2s ease-in-out;} .usr_rvw_form_main_card_img:hover {background-size: 150% 150%;} .usr_rvw_form_main_top_wrap {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.75rem; flex: 1 1 20rem; min-width: 0;} .usr_rvw_form_main_top_msg {font-size: 0.9rem; line-height: 1.5; color: #6c757d; word-break: keep-all;} .usr_rvw_cnt {position: absolute; white-space: nowrap; background-color: #fff; padding: 0rem 0.25rem; box-shadow: 0px 0px 3px rgba(0,0,0,0.35); display: none; left: 1.125rem; z-index: 10;} .usr_rvw_point, .usr_rvw_point_checked {cursor: pointer;} .usr_rvw_point:hover ~ .usr_rvw_cnt, .usr_rvw_point_checked:hover + .usr_rvw_cnt {display: block;} .dafl_usr_rvw_rply_form {margin: 1rem 0.5rem 0rem 0rem; background-color: #ededed; padding: 0.75rem; border-radius: 0.25rem; color: #333;} .dafl_usr_rvw_rply_form > ul > li:first-child {width: 1.5rem;} .dafl_usr_rvw_rply_form > ul > li > dl {margin-bottom: 0;} /* 표준 보상안 */ .std_cpst_lst dl {margin-bottom: 0;} .std_cpst_lst > ul > li > dl {padding: 1rem;} .std_cpst_lst > ul > li > dl > dd {background-color: #fff; padding: 1rem; border-radius: 0.5rem; margin-top: 1rem;} .curr_login{top: 60px; position: absolute; left: 50%; transform: translateX(-50%);} /* 배송신청 다이얼로그 */ .divy_recv_optn_info_popup {position: fixed !important; top: 6.5rem !important; z-index: 10002;} .divy_recv_optn_info {padding: 2rem 1rem !important; font-family: "Noto Sans KR", sans-serif;} .divy_recv_optn_info a {display: block;} .divy_recv_optn_info a:hover, .divy_recv_optn_info a:focus {opacity: 1;} .divy_recv_optn_info .card {border-radius: 1rem; overflow: hidden; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);} .divy_recv_optn_info .card:hover {box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.2); transform: translateY(-5px); transition: all 0.25s;} .divy_recv_optn_info .card > .card-body {padding: 1rem 2.5rem;} .divy_recv_optn_info ul > li:not(:first-child) {margin-top: 1rem;} .divy_recv_optn_info .divy_recv_optn_item {display: flex; justify-content: flex-start; align-items: center;} .divy_recv_optn_info .divy_recv_optn_item > i {font-size: 2.5rem; color: #39bfbf; width: 50px; font-weight: 500; margin-right: 1rem;} .divy_recv_optn_info .divy_recv_optn_item > dl {margin-bottom: 0;} .divy_recv_optn_info .divy_recv_optn_item > dl > dt {font-size: 1.375rem;} .divy_recv_optn_info .divy_recv_optn_item > dl > dd {font-size: 1.125rem; font-weight: 300; margin-top: 0.25rem;} .login_guid_popup + .ui-dialog-buttonpane .btn {font-weight: 600; line-height: 2;} .login_guid_popup + .ui-dialog-buttonpane .btn {margin: 0.5rem;} /* 메인페이지 최근설치내역 수정 */ .main_instl_photo_lst {margin-left: -0.5rem; margin-right: -0.5rem;} .main_instl_photo_lst > li {width: calc(100% / 12.4); position: relative; margin-bottom: 1rem; padding-right: 0.5rem; padding-left: 0.5rem;} .main_instl_photo_lst > li > a {padding-bottom: calc(100% - 2px); position: relative; box-shadow: 2px 2px 3px rgba(0,0,0,0.2);} .main_instl_photo_lst > li > a:after {content: ""; width: 100%; height: 100%; position: absolute; backdrop-filter: blur(1px); border-radius: 1rem;} .main_instl_photo_lst > li > a + span.badge {font-size: 0.85rem; padding: 0.375rem 0.5rem; font-weight: 500;} .main_instl_photo_lst > li:nth-child(n+13) {margin-bottom: 0;} /* ========== PC 푸터 고객소통함 (dafl_foot_cus_req_bas_*) ========== */ footer .dafl_foot_cus_req_bas_wrap { padding: 1.125rem 0 1.375rem; background: linear-gradient(180deg, #f6f7fb 0%, #eef1f6 100%); border-top: 2px solid #09c7c7; } footer .dafl_foot_cus_req_bas_container { box-sizing: border-box; width: 1250px; max-width: 100%; margin: 0 auto; padding: 0 1rem; } footer .dafl_foot_cus_req_bas_panel { box-sizing: border-box; padding: 1rem 1.125rem 0.875rem; border-radius: var(--radius-md); border: 1px solid rgba(0, 69, 150, 0.08); background: #fff; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); } footer .dafl_foot_cus_req_bas_head { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 0.875rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--index-border-color); } footer .dafl_foot_cus_req_bas_head_icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(145deg, rgba(0, 69, 150, 0.14) 0%, rgba(14, 165, 233, 0.12) 100%); color: var(--index-primary-color); font-size: 1.35rem; } footer .dafl_foot_cus_req_bas_head_copy { flex: 1; min-width: 0; } footer .dafl_foot_cus_req_bas_title { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--index-text-dark); letter-spacing: -0.02em; } footer .dafl_foot_cus_req_bas_lead { margin: 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.55; color: var(--index-text-gray); } footer .dafl_foot_cus_req_bas_lead strong { color: var(--index-primary-color); font-weight: 600; } footer .dafl_foot_cus_req_bas_note { margin: 0.375rem 0 0; font-size: 0.75rem; line-height: 1.45; color: #9ca3af; } footer .dafl_foot_cus_req_bas_note a { color: var(--index-primary-color); text-decoration: underline; text-underline-offset: 2px; } footer .dafl_foot_cus_req_bas_note a:hover { color: #003a78; } footer .dafl_foot_cus_req_bas_compose { width: 100%; } footer .dafl_foot_cus_req_bas_compose_inner { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0.25rem 0.25rem 0.25rem 0; border: 1px solid var(--index-border-color); border-radius: var(--radius-md); background: #fafbfc; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } footer .dafl_foot_cus_req_bas_compose_inner:focus-within { border-color: var(--index-primary-color); background: #fff; box-shadow: 0 0 0 3px rgba(0, 69, 150, 0.1); } footer .dafl_foot_cus_req_bas_input { display: block; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 2.75rem; max-height: 7rem; margin: 0; padding: 0.5625rem 0.75rem 0.5625rem 1rem; border: 0; border-radius: 0; background: transparent; font-family: inherit; font-size: 0.875rem; line-height: 1.45; color: var(--index-text-dark); } footer .dafl_foot_cus_req_bas_input::placeholder { color: #9ca3af; } footer .dafl_foot_cus_req_bas_input:focus { outline: 0; } footer .dafl_foot_cus_req_bas_input.VALIDATE_ERROR_MSG { color: var(--index-text-dark); } footer .dafl_foot_cus_req_bas_compose_inner:has(.dafl_foot_cus_req_bas_input.VALIDATE_ERROR_MSG) { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); } footer .dafl_foot_cus_req_bas_submit { display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: 0.375rem; flex-shrink: 0; min-width: 6.75rem; min-height: 2.375rem; margin: 0 0.25rem 0 0; padding: 0 1.125rem; border: 0; border-radius: calc(var(--radius-md) - 2px); background: linear-gradient(135deg, #004596 0%, #0060c9 100%); color: #fff; font-family: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } footer .dafl_foot_cus_req_bas_submit i { font-size: 0.75rem; opacity: 0.92; } footer .dafl_foot_cus_req_bas_submit:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(0, 69, 150, 0.35); } footer .dafl_foot_cus_req_bas_submit:active { transform: translateY(1px); } footer .dafl_foot_cus_req_bas_submit:focus { outline: 0; box-shadow: 0 0 0 3px rgba(0, 69, 150, 0.25); } footer .dafl_foot_cus_req_bas_meta { margin: 0.4375rem 0 0 1rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: #9ca3af; } .form_surv_wrap ul {margin-top: 0.5rem;} .form_surv_wrap ul > li {display: inline-block;} .form_surv_wrap ul > li:last-child {margin-left: -1px;} .form_surv_wrap ul > li > label {cursor: pointer; display: inline-block; padding: 0.5rem 4rem; border: 1px solid #dedede; background-color: #fff; position: relative;} .form_surv_wrap ul > li > label:hover {border-color: #3366B9; color: #3366B9; z-index: 2;} .form_surv_wrap ul > li:first-child > label {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .form_surv_wrap ul > li:last-child > label {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .form_surv_wrap ul > li > label > i {position: absolute; font-size: 1.25rem; top: 50%; left: 2.5rem; transform: translate(-50%, -50%); display: none;} .form_surv_wrap ul > li > input:checked + label > i {display: block;} .form_surv_wrap ul > li > input {display: none;} .form_surv_wrap ul > li > input:checked + label {border-color: #3366b9; background-color: #3366b926; color: #3366B9; z-index: 1; font-weight: 600;} .form_surv_wrap .surv_item {margin-top: 0.5rem;} /* 고객소통함 다이얼로그 */ .divy_relat_popup {padding: 1.25rem !important; font-family: "Noto Sans KR", sans-serif;} .divy_relat_popup + .ui-dialog-buttonpane button {min-width: 120px;} /* 배송 조회 */ .dafl_divy_inq_info dl {margin-bottom: 0;} .dafl_divy_sta_words > dl > dt {font-size: 2rem;} .dafl_divy_sta_words > dl > dd {margin-top: 0.5rem; font-size: 1.25rem; font-weight: 500;} .dafl_divy_sta_info {margin-top: 3rem;} .dafl_divy_sta_info > li > span {display: inline-block; width: 150px; background-color: #f2f2f2; text-align: center; padding: 0.75rem 0; border-radius: 0.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.5px;} .dafl_divy_sta_info > li.active > span {background-color: #09c7c7; color: #fff; font-weight: 700;} .dafl_divy_sta_det_info {margin-top: 1.5rem;} .dafl_divy_sta_det_info > .card {background-color: transparent; border: none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35); border-radius: 0.75rem;} .dafl_divy_sta_det_info > .card > .card-body {background-color: transparent;} .dafl_divy_sta_det_info > .card > .card-body h4 {margin-bottom: 0;} .dafl_divy_sta_det_info > .card > .card-body > ul {margin-top: 1rem;} .dafl_divy_sta_det_info > .card > .card-body > ul > li:not(:first-child) {margin-top: 1rem;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl {font-size: 1.125rem;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dt {font-weight: 500; width: 150px;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd > ul > li:not(:first-child) {margin-top: 0.5rem;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd span {font-weight: 500;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd span > em {margin-left: 0.25rem; color: #333; font-weight: 400;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd > ul > li > span > em {color: #959ecb;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd > ul.d-table > li:last-child {width: 120px; text-align: right;} .dafl_divy_sta_det_info > .card > .card-body > ul > li > dl > dd > ul.d-table > li:last-child > a {color: #3366b9; font-weight: 500; border-bottom: 1px solid #3366b9;} .dafl_instl_photo_wrap {border-radius: 0.75rem; overflow: hidden;} .dafl_instl_photo_wrap ul > li > a.btn {border-radius: 0;} /* 배송신청하기 */ .dafl_mngt_divy_form span.text-danger {display: none;} .dafl_mngt_divy_form_btn_group > li {display: inline-block;} .dafl_mngt_divy_form_btn_group > li:not(:first-child) {margin-left: -1px;} .dafl_mngt_divy_form_btn_group > li:first-child > a {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .dafl_mngt_divy_form_btn_group > li:last-child > a {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .dafl_mngt_divy_form_btn_group > li > a {padding: 0.5rem 2rem; display: block; background-color: #e9ecef; font-weight: 300; border: 1px solid #ced4da; position: relative; overflow: hidden; text-align: center;} .dafl_mngt_divy_form_btn_group > li > a:hover {border-color: #000; z-index: 1;} .dafl_mngt_divy_form_btn_group > li > a:hover, .dafl_mngt_divy_form_btn_group > li > a:focus {opacity: 1;} .dafl_mngt_divy_form_btn_group > li > a.active {font-weight: 500; border-color: #000; z-index: 1;} .dafl_mngt_prd_optn > ul > li {padding: 0; display: inline-block; position: relative;} .dafl_mngt_prd_optn > ul > li > label {cursor: pointer; padding: 1rem; width: 250px; display: block; border: 1.5px solid #ced4da; text-align: center; background-color: #fff; font-weight: 300; font-size: 1.25rem; position: relative;} .dafl_mngt_prd_optn > ul > li > label:hover {border-color: #3366B9; color: #3366B9; z-index: 0;} .dafl_mngt_prd_optn > ul > li > div {display: none; width: 0; height: 0; position: absolute; top: 0; right: 0; 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;} .dafl_mngt_prd_optn > ul > li > div > i {color: #fff; position: absolute; top: -17px; right: -17px;} /* .dafl_mngt_prd_optn > ul > li:first-child > label {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .dafl_mngt_prd_optn > ul > li:last-child > label {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} */ .dafl_mngt_prd_optn > ul > li:not(:first-child) {margin-left: 0.75rem;} .dafl_mngt_prd_optn > ul > li > input[type="checkbox"] {display: none;} .dafl_mngt_prd_optn > 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);} .dafl_mngt_prd_optn > ul > li > input[type="checkbox"]:checked ~ div {display: block;} .dafl_mngt_prd_optn_det_form {padding-top: 0.5rem;} .dafl_mngt_prd_optn_det_form > div {margin-top: 1rem;} .dafl_mngt_prd_optn_det_form .card {border: 0;} .dafl_mngt_prd_optn_det_form .card > .card-body {background-color: #f2f2f27f; position: relative;} .dafl_mngt_prd_optn_det_form .card > .card-body > ul > li:first-child {vertical-align: top; width: 100px; text-align: center; padding-right: 1.25rem;} .dafl_mngt_prd_optn_det_form .card > .card-body > ul > li:first-child > a {display: inline-block; padding: 0.5rem;} .dafl_mngt_prd_optn_det_form .card > .card-body > ul > li:first-child i {color: #ff9797; font-size: 2rem; display: inline-block;} .dafl_mngt_prd_optn_det_form .card > .card-body > ul > li > dl > dt {font-size: 1.25rem;} .dafl_mngt_prd_optn_det_form .card > .card-body > ul > li > dl > dd dl > dt {font-weight: 500;} .articl_divy_qt_lst > li {display: inline-block; width: 50%; vertical-align: top;} .articl_divy_qt button {width: 30px; height: 30px; border-radius: 50%; text-align: center; border-width: 1px; background-color: #fff;} .articl_divy_qt button[disabled] {color: #ddd;} .articl_divy_qt input {width: 50px; height: 30px; text-align: right;} /* 고객 신청 공통 폼 */ .dafl_mngt_cus_apl_form {padding: 0.5rem;} .dafl_mngt_cus_apl_form > dt {font-size: 1.75rem; font-weight: 500;} .dafl_mngt_cus_apl_form > dd {margin-top: 1rem;} .dafl_mngt_cus_apl_form > dd > table {border-top-color: #000; border-bottom-color: #c4c4c4;} .dafl_mngt_cus_apl_form > dd > table > tbody > tr > th {font-size: 1.25rem; font-weight: 300;} .dafl_mngt_cus_apl_form > dd > table > tbody > tr > td {text-align: left; padding: 0.5rem 1.5rem;} .dafl_mngt_cus_apl_form > dd > table > tbody > tr > td > div {width: 450px;} .dafl_mngt_cus_apl_form > dd > table > tbody > tr > td > div.input-group {width: 100%;} /* 최근 이용 문구 다이얼로그 */ .dalf_mngt_ltst_use_words_lst {margin-top: 1.5rem;} .dalf_mngt_ltst_use_words_lst > li:not(:first-child) {margin-top: 0.75rem;} .dalf_mngt_ltst_use_words_lst > li {padding: 1.25rem 1rem; border-radius: 0.75rem; border: 1px solid #c7c7c7; cursor: pointer;} .dalf_mngt_ltst_use_words_lst > li:hover {box-shadow: 0px 0px 5px rgba(0,0,0,0.35);} .dalf_mngt_ltst_use_words_lst dl {margin-bottom: 0;} .fl_ribbon_sample_dialog {padding: 1.5rem !important;} /* 깃발 상세 */ ul > li.dafl_mngt_flag_det_lst:nth-child(2n - 1) {padding-right: 0.5rem;} ul > li.dafl_mngt_flag_det_lst:nth-child(2n) {padding-left: 0.5rem;} .dafl_mngt_flag_det_lst {display: inline-block; width: 50%;} .dafl_mngt_flag_det_lst label {display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;} /* 화환 상세 */ .img_layout_wrap {max-height: 80vh !important;} .dafl_mngt_wrth_det_form {background-color: #fff;} .cdlcSrvSttlAmtLstWrap {border: 1px solid #ced4da; padding: 0.75rem;} .cdlcSrvSttlAmtLstWrap .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;} .cdlcSrvSttlAmtLstWrap > .ui-checkboxradio-label:not(:nth-child(5n)) {margin-right: 0.75rem;} .cdlcSrvSttlAmtLstWrap > .ui-checkboxradio-label:nth-child(n+16) {margin-bottom: 0;} .cdlcSrvSttlAmtLstWrap > .ui-checkboxradio-label:nth-child(5n) {margin-right: -1px;} .cdlcSrvSttlAmtLstWrap > .ui-checkboxradio-label:not(:nth-child(5n+1)) {margin-left: -1px;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label:hover {border: 1px solid #3366b9; z-index: 2; opacity: 1;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label .orig_pr {font-size: 0.9rem; font-weight: 300;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label .img_resize_btn {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);} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label .img_resize_btn:hover {color: #000 !important; opacity: 1; background-color: #f6f6f6;} .cdlcSrvSttlAmtLstWrap .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;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label:hover .ui-icon-background {background-size: 150% 150%; filter: brightness(1.05);} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked {background-color: #3366b919; border-color: #3366b9; z-index: 2; box-shadow: inherit; color: #000; border-width: 3px;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked > dl > dt {padding-top: 0;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon-background {border: 0 !important; filter: brightness(1.1);} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon-background, .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon-background {width: 100%; padding-bottom: 100%; border: 1px solid #DDD;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked dl > dt {font-weight: 700 !important;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .orig_pr {color: #000;} .cdlcSrvSttlAmtLstWrap .orig_pr {text-decoration:line-through;} /* 깃발 제품 목록(근조·축하·단체·우승) — 카테고리 탭 */ .flg_prdu_lst_cat_tab_wrap {width: 100%; box-sizing: border-box;} .flg_prdu_lst_cat_tab.nav-tabs {display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.625rem; width: 100%; margin: 0; padding: 0.5rem; list-style: none; border: 1px solid #e0e0e0; border-radius: 0.875rem; background-color: #f5f5f5; box-sizing: border-box;} .flg_prdu_lst_cat_tab.nav-tabs > .nav-item {flex: 1 1 calc(25% - 0.5rem); min-width: 6.25rem; float: none !important; margin: 0 !important; position: relative; display: block;} .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; box-sizing: border-box; margin: 0 !important; padding: 0.6875rem 1rem; text-align: center; line-height: 1.35; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; background-color: #fff; border: 1px solid #ced4da !important; border-radius: 0.625rem !important; box-shadow: none; transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;} .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link:hover, .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link:focus {text-decoration: none; color: #3366b9; border-color: #3366b9 !important; background-color: #3366b91a; box-shadow: 0 1px 4px rgba(51, 102, 185, 0.12);} .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link.active, .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link.active:hover, .flg_prdu_lst_cat_tab.nav-tabs > .nav-item > .nav-link.active:focus {color: #fff !important; font-weight: 600; cursor: default; border-color: #3366b9 !important; background: linear-gradient(135deg, #3366b9 0%, #1d4ed8 100%); box-shadow: 0 2px 8px rgba(51, 102, 185, 0.28);} @media (max-width: 991.98px) { .flg_prdu_lst_cat_tab.nav-tabs > .nav-item {flex: 1 1 calc(50% - 0.375rem); min-width: 0;} .flg_prdu_lst_cat_tab.nav-tabs {gap: 0.5rem; padding: 0.4375rem;} } /* 배송설치요청 깃발검색 */ .divy_instl_req_step1_list .bst_logo {padding: 0.5rem 1.25rem; font-size: 1.25rem;} .divy_instl_req_step1_list .dafl-flag-item .dafl-flag-item-image {padding-bottom: 133.33%; height: 0;} .divy_instl_req_step1_list .dafl-flag-item:hover, .divy_instl_req_step1_list .dafl-flag-item:focus {border: 1px solid #DDD; opacity: 1;} .divy_instl_req_step1_list .dafl-flag-item:hover::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #3366b9; z-index: 10;} .divy_instl_req_step1_list .dafl-flag-item h4 {overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap;} /* 액자화환 소개 */ .dafl_cont_intro_top_badge {background-color: #ffa555; padding: 0.5rem 1rem; display: inline-block;} .dafl_cont_intro_top_badge > em {border-left: 5px solid #fff; padding-left: 0.625rem; color: #fff;} .frame_wrth_info dl {margin-bottom: 0;} .frame_wrth_info table {border-top-color: #000;} .frame_wrth_intro_top_bg {background-image: url("/common/css/images/frame_wrth/dafl_frame_wrth_intro_top_bg.jpg"); width: 100%; height: 0; padding-bottom: 37.5%; background-size: cover; position: relative;} .frame_wrth_intro_top_bg > img {position: absolute; top: 50%; right: 3rem; transform: translateY(-50%); width: 320px;} .frame_wrth_intro_top_cont {position: absolute; top: 50%; left: 3rem; transform: translateY(-50%); width: 60%;} .frame_wrth_intro_top_cont dl > dt {font-size: 1.875rem;} .frame_wrth_intro_top_cont dl > dd {margin-top: 1.75rem;} .frame_wrth_intro_top_cont dl > dd > ul > li:first-child {font-size: 1.25rem; font-weight: bold;} .frame_wrth_intro_top_cont dl > dd > ul > li:not(:first-child) {margin-top: 1.75rem;} .frame_wrth_title {font-size: 1.5rem; font-weight: bold; margin-top: 5rem;} .frame_wrth_intro_main_img {margin-top: 1.25rem;} .frame_wrth_intro_main_img .col-4 dl {width: 90%;} .frame_wrth_intro_main_img img {width: 100%; margin-top: 1rem;} .frame_wrth_intro_main_info {margin-top: 3rem;} .frame_wrth_intro_main_info_lst > li:not(:first-child) {margin-top: 1rem;} .frame_wrth_intro_main_info_lst > li > dl > dt {font-weight: 400} .frame_wrth_intro_main_info_lst > li > dl > dd {margin-top: 0.25rem; color: #6c757d; font-size: 0.9rem;} .frame_wrth_use_ex_form_wrap {margin-top: 1rem;} .frame_wrth_use_ex_form_wrap > ul > li > dl > dt {font-weight: 500; font-size: 1.25rem;} .frame_wrth_use_ex_form_wrap > ul > li > dl > dd {margin-top: 0.75rem;} .frame_wrth_use_ex_form_wrap img {object-fit: contain;} .frame_wrth_use_eplg .row {margin-top: 1.25rem;} .frame_wrth_recv_guid_lst > li:not(:first-child) {margin-top: 3rem;} /* 작품 사진 목록 */ /* .prdt_photo_det_lst {display: grid; grid-template-columns: repeat(3, 1fr);} */ .prdt_photo_det_lst > li {display: inline-block; width: calc(100% / 3); padding: 0.625rem; vertical-align: top;} .prdt_photo_det_lst > li:nth-child(n+4) {margin-top: 1.25rem;} .prdt_photo_det_lst > li > a:focus {opacity: 1;} .prdt_photo_det_lst > li > a:hover {filter: brightness(1.1);} .prdt_photo_det_lst > li > div {margin-top: 0.25rem;} /* .prdt_photo_list .img_wrap {width: 100%; height: 0; padding-bottom: 56.25%; position: relative;} .prdt_photo_list .img_lg .img_wrap {padding-bottom: 134%;} */ /* .prdt_photo_det_lst > li > p {margin-top: 0.625rem; font-weight: 500; height: 3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%;} */ /* 앱 다운로드 안내 */ .dafl_app_dl_guid_form_wrap {padding-top: 4.5rem; padding-bottom: 4.5rem; color: #000;} /* 메인 하단 앱 안내 */ .dafl_main_app_dl_section {padding-top: 2rem; padding-bottom: 2.25rem;} .dafl_main_app_dl_section .dafl_main_app_dl_container {position: relative; max-width: 100%;} .dafl_main_app_dl_inner {display: flex; align-items: center; gap: 1.5rem;} .dafl_main_app_dl_copy {flex: 1 1 auto; min-width: 0; max-width: calc(100% - 22rem);} .dafl_main_app_dl_eyebrow {display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: #3366b9; margin-bottom: 0.625rem;} .dafl_main_app_dl_brand {display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;} .dafl_main_app_dl_logo {width: 4.5rem; height: auto; flex-shrink: 0;} .dafl_main_app_dl_title {margin: 0 0 0.375rem; font-size: 1.375rem; font-weight: 400; line-height: 1.35; color: #1e293b; letter-spacing: -0.02em; word-break: keep-all;} .dafl_main_app_dl_title strong {font-size: 1.5rem; font-weight: 700; color: #004596;} .dafl_main_app_dl_lead {margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #64748b; word-break: keep-all;} .dafl_main_app_dl_feat_grid {list-style: none; margin: 0 0 0.875rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.625rem;} .dafl_main_app_dl_feat_grid > li {display: flex; align-items: center; gap: 0.4375rem; min-height: 2.375rem; padding: 0.375rem 0.625rem; border-radius: 0.625rem; background: #f8fafc; border: 1px solid #e8edf5; font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.35; word-break: keep-all;} .dafl_main_app_dl_feat_grid > li > i {flex-shrink: 0; width: 1.125rem; text-align: center; font-size: 0.9375rem; color: #3366b9;} .dafl_main_app_dl_store_note {margin: 0 0 0.75rem; font-size: 0.8125rem; color: #94a3b8; font-weight: 500;} .dafl_main_app_dl_section .dafl_main_app_dl_btn_lst {margin-top: 0; text-align: left;} .dafl_main_app_dl_section .dafl_main_app_dl_btn_lst .dafl_app_dl_guid_form_btn_row {display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.625rem 0.875rem;} .dafl_main_app_dl_section .dafl_main_app_dl_btn_lst .dafl_app_dl_guid_form_btn_row > li {display: flex; align-items: center;} .dafl_main_app_dl_section .dafl_app_dl_btn > img {height: 62px; width: auto; display: block;} .dafl_main_app_dl_section .dafl_main_app_dl_intro_btn.dafl_app_intro_page_mv_btn {box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-width: 9.5rem; height: 62px; margin: 0; padding: 0 1rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); background-color: #fff; color: #334155;} .dafl_main_app_dl_section .dafl_main_app_dl_intro_btn.dafl_app_intro_page_mv_btn:hover {background-color: #1e293b; border-color: #1e293b; color: #fff;} .dafl_main_app_dl_section .dafl_main_app_dl_intro_btn.dafl_app_intro_page_mv_btn:hover > i {color: #fff !important;} .dafl_main_app_dl_section .dafl_main_app_dl_intro_btn > i {flex-shrink: 0; font-size: 1.125rem !important;} .dafl_main_app_dl_section .dafl_main_app_dl_intro_btn > span {margin-left: 0.375rem !important; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;} .dafl_main_app_dl_visual_wrap {flex: 0 0 20rem; max-width: 38%; display: flex; align-items: center; justify-content: center;} .dafl_main_app_dl_visual {width: 100%; max-width: 20rem; height: auto;} .dafl_app_dl_guid_form_logo > img {width: 200px;} .dafl_app_dl_guid_form_title {margin-top: 1.25rem;} .dafl_app_dl_guid_form_title p {font-size: 1.5rem;} .dafl_app_dl_guid_form_title strong {font-size: 2rem;} .dafl_app_dl_guid_form_title p + p {margin-top: 0.25rem;} .dafl_app_dl_guid_form_cont {margin-top: 3.5rem;} .dafl_app_dl_guid_form_cont dl {margin-bottom: 0;} .dafl_app_dl_guid_form_cont dl > dd {font-size: 1.25rem; margin-top: 0.75rem;} .dafl_app_dl_guid_form_wrap .container {position: relative;} .dafl_app_dl_guid_form_wrap .container .dafl_app_dl_guid_form_copy {max-width: calc(100% - 26rem); padding-right: 1.5rem;} .dafl_app_dl_guid_form_wrap .container .dafl_app_dl_guid_form_visual {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 400px; max-width: 42%;} .dafl_app_dl_guid_form_btn_lst {margin-top: 1rem;} .dafl_app_dl_guid_form_wrap .container .dafl_app_dl_guid_form_btn_lst {text-align: center;} .dafl_app_dl_guid_form_wrap .container .dafl_app_dl_guid_form_btn_lst .dafl_app_dl_guid_form_btn_row {display: inline-flex; justify-content: center; vertical-align: top;} .dafl_app_dl_guid_form_wrap .dafl_app_dl_guid_form_btn_lst > ul:not(.dafl_app_dl_guid_form_btn_row) {margin-left: -0.625rem;} .dafl_app_dl_guid_form_wrap .dafl_app_dl_guid_form_btn_lst > ul:not(.dafl_app_dl_guid_form_btn_row) > li {padding-left: 0.625rem; padding-right: 0.625rem;} .dafl_app_intro_page_mv_btn {background-color: #fff; display: flex; justify-content: center; align-items: center; width: 200px; color: #000; text-align: center; padding-top: 0.375rem; padding-bottom: 0.375rem; border: 1px solid #A6A6A6; border-radius: 0.5rem; box-shadow: 0px 0px 4px rgba(0,0,0,0.35); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;} .dafl_app_intro_page_mv_btn:hover {background-color: #000; color: #fff;} .dafl_app_intro_page_mv_btn > i {font-size: 2.5rem;} .dafl_app_intro_page_mv_btn > span {font-weight: bold; margin-left: 0.5rem;} .dafl_app_dl_btn {display: block;} .dafl_app_dl_btn > img {height: 62px; margin: 0 auto;} .dafl_app_dl_guid_qr_code_form {margin-top: 1rem;} .dafl_app_dl_guid_qr_code_form dl {text-align: center;} .dafl_app_dl_guid_qr_code_form dl > dt {margin-top: 0.5rem; text-align: center; font-size: 1.125rem;} .dafl_app_dl_guid_qr_code_form img {width: 10rem;} /* 다퀵 버튼 추가 */ .dafl_top_header .daquick_hp_mv_btn {padding-top: 0.125rem; padding-bottom: 0.125rem; width: 110px; border-radius: 0.25rem; background-color: #EB5F3B; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; border: 1px solid #EB5F3B; border-radius: 0.25rem; box-shadow: 0px 0px 4px rgba(0,0,0,0.35); transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;} .dafl_top_header .daquick_hp_mv_btn:hover {opacity: 1; filter: brightness(1.25);} .dafl_top_header .daquick_hp_mv_btn > i {font-size: 1rem;} .dafl_top_header .daquick_hp_mv_btn > p {margin-left: 0.375rem; line-height: 1.2; font-weight: 400; font-size: 11px; margin-right: 0.5rem;} .dafl_top_header .dafl_app_dl_guid_form_btn_lst {margin-top: 0;} .dafl_top_header .dafl_app_dl_btn > img {height: 31.6px;} .dafl_top_header .dafl_app_intro_page_mv_btn {font-size: 10px; font-weight: 500; padding-top: 0.125rem; padding-bottom: 0.125rem; width: 100px; border-radius: 0.25rem;} .dafl_top_header .dafl_app_intro_page_mv_btn:hover {background-color: #000; color: #fff;} .dafl_top_header .dafl_app_intro_page_mv_btn > i {font-size: 1.25rem;} .dafl_top_header .dafl_app_intro_page_mv_btn > span {line-height: 1.3; margin-left: 0.375rem;} .app_dl_guid_info .dafl_app_dl_guid_form_wrap {position: relative; padding-left: 2.5rem; padding-right: 2.5rem;} .app_dl_guid_info .dafl_app_dl_guid_form_wrap > img {position: absolute; top: 40%; right: 1.5rem; transform: translateY(-50%); width: 250px;} .app_dl_guid_info .dafl_app_dl_guid_form_title p {font-size: 1.25rem;} .app_dl_guid_info .dafl_app_dl_guid_form_title strong {font-size: 1.5rem;} .app_dl_guid_info .dafl_app_dl_guid_form_cont {margin-top: 1.5rem;} .app_dl_guid_info .dafl_app_dl_guid_subtitle {font-size: 1rem; color: #6c757d; font-weight: 400; margin-bottom: 0.75rem;} .app_dl_guid_info .dafl_app_dl_guid_desc {font-size: 1.125rem; font-weight: 500; line-height: 1.6;} .dafl_app_dl_guid_det_info_wrap {margin-top: 5rem} .dafl_app_dl_guid_det_info_wrap > dl > dt {font-size: 2rem; text-align: center;} .dafl_app_dl_guid_det_info_wrap > dl > dd {margin-top: 4rem;} .dafl_app_dl_guid_det_info > li {width: 50%; position: relative; vertical-align: top;} .dafl_app_dl_guid_det_info > li > img {width: 45%; position: relative; z-index: 1; display: inline-block;} .dafl_app_dl_guid_det_info > li > .card {display: inline-block; position: absolute;} .dafl_app_dl_guid_det_info > li > .card > .card-body {font-weight: bold; font-size: 1.125rem; line-height: 2.25rem; white-space: nowrap;} .dafl_app_dl_guid_det_info > li:first-child > .card {top: 10%; left: 35%;} .dafl_app_dl_guid_det_info > li:first-child > .card > .card-body {background-color: #E3F7FF; border: 2px solid #BDECFF; border-radius: 0.75rem; padding: 1.25rem 2.5rem 1.25rem 5rem;} .dafl_app_dl_guid_det_info > li:last-child {margin-top: 6rem; text-align: right;} .dafl_app_dl_guid_det_info > li:last-child > .card {bottom: 10%; right: 35%;} .dafl_app_dl_guid_det_info > li:last-child > .card > .card-body {background-color: #3366B9; border: 2px solid #2B5290; border-radius: 0.75rem; color: #fff; padding: 1.25rem 5rem 1.25rem 2.5rem;} .dafl_app_dl_guid_det_info + .dafl_app_dl_guid_det_info {margin-top: 6rem;} @media (min-width: 1425px) { .app_dl_guid_info .dafl_app_dl_guid_form_wrap > img {width: 300px; right: 2.5rem; top: 50%;} } /** 액자화환 */ .divyFrameWrthLst > li{display: block;margin-bottom: 1rem;} .divyFrameWrthLst > li > dl{border:1px solid #DDD;padding: 0.5rem;border-radius: 0.25rem;margin: 0px;} .divyFrameWrthLst > li > dl >dt, .divyFrameWrthLst > li > dl >dd{display: block;line-height: inherit; padding: 0.5rem; vertical-align: middle;} .divyFrameWrthLst > li > dl >dt>em{border:3px solid #0dc7c7;padding: 1px 10px; color: #0dc7c7; margin-right: 0.5rem;vertical-align: middle;} .divyFrameWrthLst > li > dl >dt>span{font-size: 1.8rem;vertical-align: middle;} .divyFrameWrthLst .divyFrameWrthImgWrap{background: #EEE;padding: 1rem;border:1px solid #EEE; border-radius: 0.25rem;} .divyFrameWrthLst .divyFrameWrthImgWrap > img{border-radius: 0.25rem;width: 100%;} .divyFrameWrthLst .divyFrameWrthImgWrap > p{margin-top: 0.5rem;font-weight: bold; font-size: 0.9rem;} .divyFrameWrthLst .divyFrameWrthImgList {margin-top: 1rem;} .divyFrameWrthLst .divyFrameWrthImgList img{border-radius: 0.25rem;width: 100%;} /** 친환경상품 */ .dntPrdLst > li{width: 50%; float: left;padding: 0.5rem;} .dntPrdLst > li:after{content: "";clear: both;display: block} .dntPrdLst > li > dl >dt, .dntPrdLst > li > dl >dd{display: block;line-height: inherit; padding: 0.5rem;vertical-align: middle;} .dntPrdLst > li > dl >dt h5 em{border:3px solid #0dc7c7;padding: 1px 10px; color: #0dc7c7; margin-right: 0.5rem;vertical-align: middle;} .dntPrdLst > li > dl >dt h5 span{font-size: 1.8rem;vertical-align: middle;} .dntPrdLst > li .no-image{background-color: #EEE;height: 220px;display: block;padding: calc( 50% - 48px ) 0;text-align: center;border:1px solid #DDD;} /* 배송상태 - 액자화환 */ .divy_dsc_info_tap_cont_sample_img_lst:has(.frame_wrth_frame_img_wrap) {max-width: 100%;} .divy_dsc_info_tap_cont_sample_img_lst:has(.frame_wrth_frame_img_wrap) h5.text-secondary {display: none !important;} .divy_dsc_info_tap_cont_sample_img_lst .frame_wrth_frame_img_wrap {display: inline-block; width: 40%; vertical-align: top;} .divy_dsc_info_tap_cont_sample_img_lst .frame_wrth_frame_img_wrap + .frame_wrth_frame_img_wrap {margin-left: 0.75rem;} /* 배송설치요청 - 신청방법 선택 */ .divy_frame_wrth_optn_form_wrap {width: 80%; margin: 0 auto;} .divy_frame_wrth_optn_form_wrap .card {width: 80%; margin: 0 auto; position: relative; box-shadow: 3px 3px 4px rgba(0,0,0,0.35);} .divy_frame_wrth_optn_form_wrap .card > img {width: 60px; position: absolute; top: 0; left: 0; transform: translate(-50%, -30%);} .divy_frame_wrth_optn_form_wrap .card > .card-body {display: table; table-layout: fixed; width: 100%; padding: 1.5rem 2rem;} .divy_frame_wrth_optn_form_wrap .card > .card-body > * {display: table-cell; vertical-align: top;} .divy_frame_wrth_optn_form_wrap .card > .card-body .divyFrameWrthImgWrap {border: 5px solid #fff; padding: 0.75rem;} .divy_frame_wrth_optn_form_wrap .card > .card-body .divyFrameWrthImgWrap p {word-break: keep-all; font-size: 0.8rem;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:first-child {width: 151px;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:last-child {padding-left: 2rem;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:last-child p {font-size: 1.25rem; margin-top: 1.5rem; font-weight: 500;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:last-child dl {margin-top: 0.5rem; margin-bottom: 0;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:last-child dl > dt {font-size: 1.375rem;} .divy_frame_wrth_optn_form_wrap .card > .card-body > div:last-child dl > dd {font-size: 1.25rem; margin-top: 0.5rem;} .divy_frame_wrth_optn_form_wrap > p {font-size: 2rem; text-align: center; font-weight: bold; margin-top: 4rem; margin-bottom: 5rem;} /* 개인정보처리방침 */ .pinfo_clct_util_agr_info_lst, .pinfo_clct_util_agr_info_lst ul, .pinfo_clct_util_agr_info_lst dl {margin-bottom: 0; padding-left: 0;} .pinfo_clct_util_agr_info_lst > *, .pinfo_clct_util_agr_info_lst ul > * {list-style: none;} .pinfo_clct_util_agr_info_lst > li {margin-top: 3rem;} .pinfo_clct_util_agr_info_lst > li > dl > dt {font-size: 1.375rem;} .pinfo_clct_util_agr_info_lst > li > dl > dd {margin-top: 1.5rem;} .pinfo_clct_util_agr_info_lst > li > dl > dd > ul > li {margin-top: 0; margin-left: 0;} .pinfo_clct_util_agr_info_lst > li > ul > li {margin-top: 0;} .pinfo_clct_util_agr_info_lst > li > ul > li > dl > dt {font-size: 1.125rem; font-weight: 500;} .pinfo_clct_util_agr_info_lst > li > ul > li dl > dt {font-weight: 500;} .pinfo_clct_util_agr_info_lst > li > ul > li > dl > dd {margin-top: 0;} .pinfo_clct_util_agr_info_lst > li > ul > li > dl > dd > ul > li {margin-top: 0; margin-left: 1.5rem; display: block;} .pinfo_clct_util_agr_info_lst > li > dl > dd > ul.sub-item-list {margin-left: 0.75rem;} .pinfo_clct_util_agr_info_lst > li > dl > dd > ul.sub-item-list + .sub-detail-list {margin-left: 1.25rem;} .pinfo_clct_util_agr_info_lst table {table-layout: fixed;} .pinfo_clct_util_agr_info_lst table > tbody > tr > th, .pinfo_clct_util_agr_info_lst table > tbody > tr > td {border-color: #ced4da; text-align: center; vertical-align: middle; font-size: 1rem; padding: 0.5rem; word-break: break-all;} .pinfo_clct_util_agr_info_lst table > tbody > tr > td ul > li:not(:first-child) {margin-top: 0.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst > li {margin-top: 1.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst > li > dl > dt {font-size: 1.125rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst table {border-top-color: #000;} #JS-okflagDeliveryUsrReqBasAgreeForm .pinfo_agr_text_form, #JS-flgMakeKeepQustAgreeForm .pinfo_agr_text_form, #JS-keepMngtAplAgreeForm .pinfo_agr_text_form {max-height: 420px; overflow-y: auto;} /* 개인정보처리방침 개정 내용 팝업 */ .pinfo_proc_meth_info_fixed_form {position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: calc(100% - 2rem) !important; max-width: 800px !important;} .pinfo_proc_meth_info_fixed_form .ui-dialog-content {max-height: 80vh !important; overflow-y: scroll;} .pinfo_proc_meth_info_fixed_form table {width: 100%; table-layout: fixed;} .pinfo_proc_meth_info_fixed_form table > thead > tr > th {border-bottom-width: 1px;} .pinfo_proc_meth_info_fixed_form table > tbody > tr > td {font-size: 0.9rem; word-break: break-all; text-align: left; vertical-align: top;} .pinfo_proc_meth_info_fixed_form table table > tbody > tr > td {vertical-align: middle;} .pinfo_proc_meth_info_fixed_form dl > dd dl > dt {font-weight: 400;} /* 친환경 기부상품 상품소개 */ .dnt_prd_info > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;} .dnt_prd_info > ul > li {width: 100%; padding: 0;} .dnt_prd_info > ul > li:after {display: none; } .dnt_prd_info .card {border: 1px solid #ccc !important; width: 100%; height: 100%; border-radius: 0.5rem; box-shadow: 1px 1px 3px rgba(0,0,0,0.15);} .dnt_prd_info .card > .card-body {position: relative; background-color: transparent; padding: 1.5rem 2rem;} .dnt_prd_info .card > .card-body dl {margin-bottom: 0;} .dnt_prd_info .dnt_prd_lst_num {position: absolute; top: -1px; left: -1px; display: inline-block; width: 4rem; height: 4rem; border: 2px solid #3366b9; color: #3366b9; background-color: #fff; font-size: 1.5rem; border-bottom-right-radius: 100px;} .dnt_prd_info .dnt_prd_lst_num > span {position: absolute; top: 40%; left: 40%; transform: translate(-50%, -50%);} .dnt_prd_info .dnt_prd_lst_info {width: 60%;} .dnt_prd_info .dnt_prd_lst_cont {margin-top: 2.5rem;} .dnt_prd_info .dnt_prd_lst_cont > dl > dt {font-size: 1.75rem;} .dnt_prd_info .dnt_prd_lst_cont > dl > dd {margin-top: 0.5rem; font-size: 1rem; color: #6c757d; line-height: 1.5rem; word-break: keep-all;} .dnt_prd_info .dnt_prd_lst_cont a.btn {width: 80%;} .dnt_prd_info .dnt_prd_lst_cont a.btn:hover {opacity: 1; filter: brightness(1.25); background-color: #3366b9 !important; border-color: #3366b9 !important;} .dnt_prd_info .dnt_prd_lst_info_pric {margin-bottom: 0.5rem;} .dnt_prd_info .dnt_prd_lst_info_pric > span {font-weight: bold; font-size: 1.125rem; color: #000;} .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(1) {text-decoration: line-through;} .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(2) {margin-left: 0.375rem; margin-right: 0.375rem;} .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(3) {color: #dc3545; font-size: 1.25rem;} .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(3) > em {font-size: 1rem; margin-left: 0.25rem; display: inline-block; vertical-align: top;} .dnt_prd_info .dnt_prd_lst_info_pric > span:last-of-type {text-decoration: none; font-size: 1.25rem;} .dnt_prd_info .dnt_prd_lst_info_pric > a {display: inline-block; vertical-align: top;} .dnt_prd_lst_img_wrap {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 35%; display: block; text-align: center;} .dnt_prd_lst_img_wrap:hover, .dnt_prd_lst_img_wrap:focus {opacity: 1;} .dnt_prd_lst_img_wrap:hover:before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #00000099;} .dnt_prd_lst_img_wrap:hover:after {content: "클릭 시 확대보기"; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;} .dnt_prd_lst_img_wrap img {max-height: 250px; object-fit: contain;} .dnt_prd_info .card:hover {border-color: #3366b9 !important; background-color: #3366b91a; transition: all 0.15s ease-in-out; box-shadow: 3px 3px 4px rgba(0,0,0,0.35);} .dnt_prd_info .card:hover .dnt_prd_lst_num {background-color: #3366b9; color: #fff; transition: all 0.15s ease-in-out;} /* 가격안내 수정사항 */ .divy_fee_chart_title {font-size: 1.25rem; font-weight: bold; margin-top: 1rem; margin-bottom: 0.5rem;} /* 배송설치요청 */ .addn_ty_lst_preview {display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 1rem;} .addn_ty_lst_preview > li {position: relative; text-align: center; min-width: 5rem;} .addn_ty_lst_preview > li > i {display: block; width: 3rem; height: 3rem; overflow: hidden; background-size: cover; background-repeat: no-repeat; border-radius: 50%; margin: 0 auto;} .addn_ty_lst_preview > li > span {color: #000; font-weight: 500; font-size: 0.85rem;} .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;} .addn_ty_lst_preview > li > em > i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* 경조 깃발 소개 */ .cdlc_flg_intro_info_img_wrap {width: 100%; max-width: 860px; margin: 0 auto; position: relative;} .cdlc_flg_intro_info_img_wrap > a.btn {position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); border-radius: 3rem !important; width: 300px; max-width: 100%;} .JS-addnTyLstButtonSetWrap > ul{width: 100%;display: block;} .JS-addnTyLstButtonSetWrap > ul > li{float:left;padding: 5px;width: 20%;} .JS-addnTyLstButtonSetWrap > ul > li > label{background: none;border:1px solid #DDD;position: relative;display: block; font-weight: 500; font-family: "Noto Sans KR", sans-serif;} .JS-addnTyLstButtonSetWrap > ul > li > label > .ui-icon-background{display: block;width: 100%;height: 150px;background-size: 100% 100%;background-position: center center;background-size: 100% auto;box-shadow:none;background-repeat: no-repeat;} .JS-addnTyLstButtonSetWrap > ul > li > label:hover, .JS-addnTyLstButtonSetWrap > ul > li > label.ui-state-active {border:1px solid #6288d6;color:#000;} .JS-addnTyLstButtonSetWrap > ul > li > label.ui-state-active {border:1px solid #3366b9 !important; background-color: #3366b91a !important; color: #000 !important;} .JS-addnTyLstButtonSetWrap > ul > li > label > .ui-checkboxradio-icon-space{position: absolute;right:2px;top:-5px; z-index: 2;} .JS-addnTyLstButtonSetWrap > ul > li > label > .ui-checkboxradio-icon-space:after{content: "\f058";font-family: "Font Awesome 5 Pro";font-weight: 300;color: #ddd;font-size: 2em;} .JS-addnTyLstButtonSetWrap > ul > li > label.ui-state-active > .ui-checkboxradio-icon-space:after{content: "\f058";font-family: "Font Awesome 5 Pro";font-weight: 900;color: #2cb12c;font-size: 2em;} /* 배송설치요청 - 포인트 사용 */ .pint_use_form {border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1rem 1.25rem; background-color: #fff;} .pint_use_form_bal {padding-bottom: 0.75rem; border-bottom: 1px solid #eee;} .pint_use_form_bal > .pint_use_form_bal_lbl {display: block; font-size: 0.875rem; color: #6c757d;} .pint_use_form_bal > .pint_use_form_bal_amt {display: block; font-size: 1.75rem; font-weight: bold; line-height: 1.3; color: #004596;} .pint_use_form_bal > .pint_use_form_bal_hint {display: block; font-size: 0.8125rem; color: #dc3545;} .pint_use_form_bal > .pint_use_form_bal_hint:empty {display: none;} .pint_use_form .btn.disabled {pointer-events: none; opacity: 0.5;} .pint_use_form_note {margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: #6c757d;} .pint_use_form_note > li {position: relative; padding-left: 0.7rem; line-height: 1.6;} .pint_use_form_note > li::before {content: ""; position: absolute; left: 0; top: 0.65em; width: 3px; height: 3px; background-color: currentColor; border-radius: 50%;} .pint_use_form_note > li.pint_use_form_note_warn {color: #dc3545; font-weight: 500;} /* 배송내역 상세정보 개선사항 */ .dafl_divy_inq_info {max-width: 1000px; margin: 0 auto;} .divy_dsc_info_tap_cont_sample_img_lst {margin-top: 3rem;} .divy_dsc_info_tap_cont_img_lst {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem;} .divy_dsc_info_tap_cont_img_lst > * {flex: 1;} .divy_dsc_info_tap_cont_img_lst .swiper-slide {width: 100% !important;} .divy_dsc_info_tap_cont_sample_img_lst h5, .divy_dsc_info_tap_cont_img_lst h5 {margin-bottom: 0.5rem !important; font-weight: 500; color: #414141 !important;} .divy_dsc_info_tap_cont_sample_img_lst {max-width: 33.33%;} .dafl_instl_img_wrap {position: relative; width: 100%; height: 0; padding-bottom: 133%; overflow: hidden; background-color: #f1f1f1;} .dafl_instl_img_wrap > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;} .divy_dsc_info_tap_cont_img_lst .swiper-button-next, .divy_dsc_info_tap_cont_img_lst .swiper-button-prev {width: 0.75rem; height: 2rem; background-size: 100% 100%;} .divy_dsc_info_tap_cont_img_lst .swiper-button-prev {background-image: url("/common/css/images/icon/main_arrow_left.png"); left: 0.5rem;} .divy_dsc_info_tap_cont_img_lst .swiper-button-next {background-image: url("/common/css/images/icon/main_arrow_right.png"); right: 0.5rem;} /* 메인페이지 메인배너 리뉴얼 */ /* 스와이퍼 초기화 */ .dafl_main_banner_item {background-color: #f9f9f9;} .dafl_main_banner_container {max-width: 1250px; margin: 0 auto; padding: 0rem 1rem;} .dafl_main_banner_cont {display: flex; justify-content: space-between; align-items: stretch;} .dafl_main_banner_cont > * {flex: 1;} /* .dafl_main_banner_cont_left {position: relative; z-index: 1; padding-bottom: 5rem;} */ .dafl_main_banner_cont_left > img {position: absolute; width: 36rem; z-index: -1; object-fit: contain; left: -11rem; top: -5rem;} .dafl_main_banner_item.type_01 .dafl_main_banner_cont_left > img {opacity: 0; transform: translateX(-50px);} .dafl_main_banner_cont_left {padding: 5rem 0 9rem;} .dafl_main_banner_cont_left > span {font-weight: bold; color: #09C7C7; font-size: 1.125rem;} .dafl_main_banner_cont_left > dl {margin-top: 0.75rem; margin-bottom: 0;} .dafl_main_banner_cont_left > dl > dt {font-size: 3rem;} .dafl_main_banner_cont_left > dl > dt > span {font-weight: bold; color: #09C7C7;} .dafl_main_banner_cont_left > dl > dd {margin-top: 1.5rem; line-height: 2rem; font-size: 1.25rem; letter-spacing: -0.25px;} .dafl_main_banner_cont_left > a.btn {padding: 0.625rem 1.5rem; border-radius: 3rem; margin-top: 1.5rem; font-size: 1.125rem; box-shadow: none;} .dafl_main_banner_cont_right {padding: 3rem 0;} .swiper-container-initialized .dafl_main_banner_item.type_01 .dafl_main_banner_cont_left > img {opacity: 1; transition-delay: 0.5s; transform: translateX(0); transition: all 1.5s ease-in;} .main_banner_pagination_wrap {max-width: 1250px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; width: 100%; position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 10; padding: 0 1rem;} .main_banner_pagination_wrap .swiper-pagination {position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; width: 56px;} .main_banner_pagination_wrap .swiper-pagination-bullet-active {width: 2.5rem; border-radius: 2rem; background: #09C7C7; transition: width 0.3s ease-in-out;} .main_banner_pagination_wrap .swiper_count_wrap {color: #2C2C2C; font-weight: bold; letter-spacing: 0px;} .dafl_main_banner_cont_right {position: relative;} .dafl_main_banner_img_wrap {position: absolute; width: 100%; height: 100%; top: 0; right: 0;} .dafl_main_banner_item.type_01 .dafl_main_banner_img_wrap > img {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; object-fit: contain;} .dafl_main_banner_item.type_02 .dafl_main_banner_img_wrap > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; object-fit: contain;} /* 배송 불가 상품 안내 품 */ .dafl_ord_impss_form {margin-bottom: 3rem;} .dafl_ord_impss_form > .card {border-radius: 1rem; overflow: hidden;} .dafl_ord_impss_form > .card > .card-body {text-align: center; background-color: #ced4da;} .dafl_ord_impss_form > .card > .card-body > i {font-size: 3rem;} .dafl_ord_impss_form > .card > .card-body > p {margin-top: 1rem; font-size: 1.5rem; font-weight: bold;} .dafl_ord_impss_form > a.btn {display: block; margin-top: 0.75rem;} .total_product_list { width: 800px; padding: 20px; font-family: "Noto Sans KR", sans-serif;} .total_product_list ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; } .total_product_list li { text-align: center; } .total_product_list label { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 10px; border-radius: 8px; transition: all 0.3s ease; position: relative; } .total_product_list label.active:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .total_product_list img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 10px; } .total_product_list .label-text { width: 100%; text-align: center; } .total_product_list .label-text em { display: block; font-style: normal; font-size: 1rem; color: #333; margin-top: 0.5rem; word-break: keep-all; font-weight: bold;} .total_product_list .reject-mark { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #00000080; color: #fff; cursor: not-allowed;} .total_product_list .reject-mark > span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; text-align: center; font-size: 1.5rem; letter-spacing: 2px; font-weight: 500;} /* 청구서 상세보기 */ .dafl_bil_det_view_wrap {background-color: #FAFAFA; border-top: 2px solid #3366b9; padding: 1.5rem; margin-top: 1.5rem;} .dafl_bil_det_view_wrap .card {border: 1px solid #C5C5C5 !important; border-radius: 0.5rem; overflow: hidden;} .dafl_bil_det_view_wrap .card > .card-body {padding: 1rem; background-color: #fff;} .dafl_bil_det_view_wrap a.btn {display: block; width: 100%; padding: 0.5rem 1rem !important; border-radius: 0.5rem; font-size: 1.125rem;} .dafl_bil_det_view_top {display: flex; justify-content: space-between; align-items: flex-start;} .dafl_bil_det_view_top .card:first-of-type > .card-body {padding: 0.75rem 1rem;} .dafl_bil_det_view_top .card:first-of-type span {display: block; font-weight: bold; font-size: 1.1875rem;} .dafl_bil_det_view_top .card:first-of-type span + span {font-size: 1.375rem; color: #3366b9; font-weight: 900;} .dafl_bil_det_view_top dl {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .dafl_bil_det_view_top dl > dt {font-weight: 500;} .dafl_bil_det_view_top dl > dd {flex: 1; text-align: right;} .bil_tot_rqut_amt_wrap {margin-top: 1.75rem;} .bil_tot_rqut_amt_wrap .card {margin-top: 0.5rem;;} .bil_tot_rqut_amt_wrap .card > .card-body {padding: 1.5rem;} .bil_tot_rqut_amt_wrap .card > .card-body dl {display: flex; justify-content: flex-start; align-items: center; gap: 2rem;} .bil_tot_rqut_amt_wrap .card > .card-body dl > dt {font-weight: 500; font-size: 1.125rem;} .bil_tot_rqut_amt_wrap .card > .card-body dl > dd > span:first-of-type {font-weight: bold; font-size: 1.5rem; color: #3366b9;} .bil_tot_rqut_amt_wrap .card > .card-body dl > dd > span + span {font-size: 1.125rem; margin-left: 0.5rem;} .bil_tot_rqut_amt_btn_lst {margin-top: 0.5rem;} .bil_tot_rqut_amt_top {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;} .bil_tot_rqut_amt_btn_lst > ul {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .bil_tot_rqut_amt_btn_lst > ul > li {flex: 1;} .bil_sttl_info_wrap {margin-top: 1.75rem;} .bil_sttl_info_wrap > dl > dt {font-size: 1.125rem;} .bil_sttl_info_wrap > dl > dd {margin-top: 0.75rem;} .bil_sttl_info_wrap .card > .card-body {padding: 1.5rem;} .bil_sttl_info_wrap .card > .card-body ul > li:not(:first-child) {margin-top: 0.5rem;} .bil_sttl_info_wrap .card > .card-body dl {display: flex; justify-content: flex-start; align-items: center; gap: 2rem;} .bil_sttl_info_wrap .card > .card-body dl > dt {font-weight: 500; width: 4.25rem; display: flex; justify-content: space-between; align-items: center;} .bil_sttl_info_wrap .card > .card-body dl > dd {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .bil_sttl_info_wrap .card > .card-body dl > dd > a:first-of-type {display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem;} .bil_divy_lst_wrap {margin-top: 1.75rem;} .bil_divy_lst_wrap > dl > dt {font-size: 1.125rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;} .bil_divy_lst_wrap > dl > dt > span {font-weight: bold;} .bil_divy_lst_wrap > dl > dt > p {font-size: 1rem;} .bil_divy_lst_wrap > dl > dd {margin-top: 0.5rem;} .bil_divy_lst_wrap .card > .card-body {padding: 1.5rem;} .bil_divy_lst_top_srch_wrap {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;} .bil_divy_lst_top_srch_wrap > .form-control {border-radius: 0.5rem !important; background-color: #fff !important;} .bil_divy_lst_top_srch_wrap > select {flex: 0 0 12.5rem;} .bil_divy_lst_top_srch_wrap > [data-type="date"] {flex: 0 0 10rem;} .bil_divy_lst_top_srch_wrap > a.btn {flex: 0 0 5rem; padding: 0.5rem 1.25rem !important; font-size: 1rem !important;} .bil_divy_lst_form_list {margin-top: 0.5rem;} .bil_divy_lst_form_list > li:not(:first-child) {margin-top: 0.5rem;} .bil_divy_lst_form_top_info > ul {display: flex; justify-content: flex-start; align-items: center; gap: 1.25rem;} .bil_divy_lst_form_top_info > ul > li {line-height: 1.5;} .bil_divy_lst_form_top_info > ul > li:last-child {position: relative;} .bil_divy_lst_form_top_info > ul > li:last-child:before {content: ""; width: 2px; height: 1rem; background-color: #D9D9D9; position: absolute; top: 50%; left: -0.625rem; transform: translate(-50%, -50%);} .bil_divy_lst_form_top_info > ul > li:last-child > span {font-weight: bold; font-size: 1.125rem;} .bil_divy_lst_form_det_info {margin-top: 1rem; display: flex; justify-content: space-between; align-items: stretch; gap: 0.5rem;} .bil_divy_lst_form_det_info .card {border: none !important; flex: 1} .bil_divy_lst_form_det_info .card > .card-body {padding: 1rem 1.5rem; background-color: #F5F5F5;} .bil_divy_lst_form_det_info_top ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;} .bil_divy_lst_form_det_info_top dl {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .bil_divy_lst_form_det_info_top dl > dt {font-weight: 400; flex: 0 0 3.25rem; display: flex; justify-content: space-between; align-items: center;} .bil_divy_lst_form_det_info_top dl > dd {font-weight: 500;} .bil_divy_lst_form_det_info_bottom {margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #EAEAEA;} .bil_divy_lst_form_det_info_bottom dl {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .bil_divy_lst_form_det_info_right {flex: 0 0 7.5rem; display: flex; justify-content: space-between; flex-direction: column;} .bil_divy_lst_form_det_info_right > .img-wrap {width: 100%; height: 6.25rem; position: relative; overflow: hidden; background-color: #f7f4ee; border-radius: 0.5rem;} .bil_divy_lst_form_det_info_right > .img-wrap > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; width: 100%; height: 100%;} .bil_divy_lst_form_det_info_right a.btn {padding: 0.25rem 0.5rem !important; font-size: 1rem !important;} .dafl_bil_det_view_wrap .pagination-wrap > nav > ul.pagination > .page-item.active > a.page-link {background-color: #3366b9; border-color: #3366b9;} .dafl_bil_det_view_wrap .pagination-wrap > nav > ul.pagination > .page-item >a.page-link:hover {background-color: #3366b9; border-color: #3366b9;} /* 25.09.01 메인 슬라이드 투명도 조정 */ .swiper-slide > a:hover, .swiper-slide > a:focus, .swiper-slide > a:active { opacity: 1; } .sttl_btn_group {display: flex; justify-content: center;} .sttl_btn_group > a { display: flex; align-items: center; justify-content: center; width: 20%; height: 46px; gap: 4px; border-radius: 8px;} .sttl_btn_group .naver_btn { background-color: #00DE5A; } .sttl_btn_group .kakao_btn { background-color: #FFEB00; } .sttl_btn_group .card_btn { background-color: #3366B9; } .sttl_btn_group > a > span {font-size: 16px;} .sttl_btn_group .card_btn > span {color: #fff;} /* kispgCardPymtg — 결제 페이지(PC) */ .kispg_card_pymtg {--kispg-blue: #3366b9; --kispg-teal: #09c7c7; --kispg-ink: #0f172a; --kispg-muted: #64748b; --kispg-line: #e8ecf1; max-width: 920px; margin: 0 auto;} .kispg_card_pymtg .kispg_guide_card.keep_mngt_apl_guide_card {box-sizing: border-box; margin: 0 0 1.25rem; padding: 1.125rem 1.25rem; border: 1px solid rgba(51, 102, 185, 0.12); border-radius: 0.5rem; background: #eef2f7;} .kispg_card_pymtg .keep_mngt_apl_guide_title {margin: 0 0 0.75rem; padding: 0; font-size: 1.125rem; font-weight: 700; color: #1e293b; line-height: 1.4; letter-spacing: -0.02em;} .kispg_card_pymtg .keep_mngt_apl_guide_body {display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.875rem;} .kispg_card_pymtg .keep_mngt_apl_guide_para {margin: 0; font-size: 0.9375rem; font-weight: 400; color: #334155; line-height: 1.6; letter-spacing: -0.02em;} .kispg_card_pymtg .keep_mngt_apl_guide_steps {margin: 0 0 0.875rem; padding: 0 0 0 1.375rem; font-size: 0.9375rem; color: #334155; line-height: 1.6;} .kispg_card_pymtg .keep_mngt_apl_guide_note_foot {margin: 0; padding-top: 0.875rem; border-top: 1px solid rgba(51, 102, 185, 0.12); font-size: 0.875rem; font-weight: 700; color: #687fcb; line-height: 1.55;} .kispg_card_pymtg .kispg_form_panel {padding: 1.375rem 1.5rem 1.25rem; border: 1px solid var(--kispg-line); border-radius: 0.5rem; background: #fff; box-shadow: 0 0.375rem 1.25rem rgba(15, 23, 42, 0.06);} .kispg_card_pymtg .kispg_form_panel_hd {margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kispg-line);} .kispg_card_pymtg .kispg_form_panel_title {margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--kispg-ink); letter-spacing: -0.03em;} .kispg_card_pymtg .kispg_form_panel_lead {margin: 0.4375rem 0 0; font-size: 0.9375rem; color: var(--kispg-muted); line-height: 1.55; letter-spacing: -0.02em;} .kispg_card_pymtg .kispg_form_block + .kispg_form_block {margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px dashed rgba(51, 102, 185, 0.16);} .kispg_card_pymtg .kispg_field_lbl {display: block; margin: 0 0 0.4375rem; font-size: 0.875rem; font-weight: 600; color: #334155; letter-spacing: -0.02em;} .kispg_card_pymtg .kispg_field_req {margin-left: 0.125rem; color: #dc3545; font-weight: 700;} .kispg_card_pymtg .kispg_guide_pick_emph {padding: 0.625rem 0.875rem; border-radius: 0.5rem; background: rgba(51, 102, 185, 0.1); border: 1px solid rgba(51, 102, 185, 0.22); font-weight: 600; color: #1e3a5f;} .kispg_card_pymtg .kispg_form_block.kispg_goods_pick_block {margin-top: 0; padding: 1.125rem 1.25rem 1.25rem; border: 2px solid rgba(51, 102, 185, 0.38); border-radius: 0.625rem; background: linear-gradient(180deg, rgba(51, 102, 185, 0.08) 0%, #fff 52%);} .kispg_card_pymtg .kispg_goods_pick_hd {margin-bottom: 0.75rem;} .kispg_card_pymtg .kispg_goods_pick_step {display: inline-block; margin-bottom: 0.4375rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; background: linear-gradient(90deg, #3366b9 0%, #09c7c7 100%);} .kispg_card_pymtg .kispg_goods_pick_title {margin: 0; font-size: 1.1875rem; font-weight: 800; color: var(--kispg-ink); letter-spacing: -0.03em; line-height: 1.35;} .kispg_card_pymtg .kispg_goods_pick_lead {margin: 0.4375rem 0 0; font-size: 0.9375rem; font-weight: 500; color: #475569; line-height: 1.55;} .kispg_card_pymtg .kispg_goods_pick_lead strong {color: #b45309; font-weight: 700;} .kispg_card_pymtg .kispg_goods_pick_status {display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.6875rem 0.875rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d;} .kispg_card_pymtg .kispg_goods_pick_status.is-picked {color: #1e40af; background: #eff6ff; border-color: rgba(51, 102, 185, 0.35);} .kispg_card_pymtg .kispg_goods_pick_status_ico {flex-shrink: 0; margin-top: 0.125rem; font-size: 1.0625rem;} .kispg_card_pymtg .kispg_goods_pick_box {padding: 0.75rem; border-radius: 0.5rem; border: 2px dashed #f59e0b; background: #fff;} .kispg_card_pymtg .kispg_goods_pick_box.is-picked {border-style: solid; border-color: rgba(51, 102, 185, 0.4); background: rgba(51, 102, 185, 0.03);} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip_lst {display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none;} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip_lst > li {margin: 0; padding: 0;} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; min-height: 0; margin: 0; padding: 0.875rem 1rem; border: 2px solid #cbd5e1; border-radius: 0.5rem; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_radio {position: static; flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin: 0; opacity: 1; accent-color: #3366b9; cursor: pointer;} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip_txt {flex: 1 1 0; min-width: 0; font-size: 0.9375rem; font-weight: 600; color: #475569; line-height: 1.4; letter-spacing: -0.03em; text-align: left; word-break: keep-all; pointer-events: none;} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip:has(.kispg_goods_radio:checked) {border-color: rgba(51, 102, 185, 0.45); background: linear-gradient(90deg, rgba(51, 102, 185, 0.08) 0%, rgba(9, 199, 199, 0.05) 100%); box-shadow: 0 0 0 0.125rem rgba(51, 102, 185, 0.12);} .kispg_card_pymtg .kispg_goods_pick_box .kispg_goods_chip:has(.kispg_goods_radio:checked) .kispg_goods_chip_txt {color: var(--kispg-blue); font-weight: 700;} .kispg_card_pymtg .kispg_field_stack {display: flex; flex-direction: column; gap: 1rem;} .kispg_card_pymtg .kispg_field_row--2col {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;} .kispg_card_pymtg .kispg_field_inp.form-control {max-width: 100%; height: calc(2.375rem + 2px); padding: 0.4375rem 0.75rem; font-size: 0.9375rem; border: 1px solid #dbe3ee; border-radius: 0.375rem; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);} .kispg_card_pymtg .kispg_field_inp.form-control:focus {border-color: rgba(51, 102, 185, 0.55); box-shadow: 0 0 0 0.1875rem rgba(51, 102, 185, 0.14); outline: 0;} .kispg_card_pymtg .kispg_amt_card {margin-top: 1.25rem; padding: 1.125rem 1.25rem; border-radius: 0.5rem; background: linear-gradient(135deg, rgba(51, 102, 185, 0.07) 0%, rgba(9, 199, 199, 0.05) 100%); border: 1px solid rgba(51, 102, 185, 0.18);} .kispg_card_pymtg .kispg_amt_lbl {display: block; margin: 0 0 0.5625rem; font-size: 0.9375rem; font-weight: 700; color: var(--kispg-ink);} .kispg_card_pymtg .kispg_amt_inp_wrap {display: flex; align-items: center; gap: 0.5rem; max-width: 320px;} .kispg_card_pymtg .kispg_amt_inp.form-control {flex: 1 1 0; min-width: 0; height: calc(2.875rem + 2px); font-size: 1.5rem; font-weight: 700; text-align: right; color: var(--kispg-blue); border: 1px solid rgba(51, 102, 185, 0.28); border-radius: 0.375rem;} .kispg_card_pymtg .kispg_amt_unit {font-size: 1.0625rem; font-weight: 600; color: #475569;} .kispg_card_pymtg .kispg_pay_panel {margin-top: 1.5rem; padding: 1.25rem 1rem 0.5rem; border-top: 1px solid var(--kispg-line);} .kispg_card_pymtg .kispg_pay_panel_title {margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--kispg-ink); text-align: center; letter-spacing: -0.03em;} .kispg_card_pymtg .kispg_pay_panel_lead {margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--kispg-muted); text-align: center; line-height: 1.45;} .kispg_card_pymtg .kispg_pay_ico_lst.sttl_btn_group {display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 1.5rem; margin: 1.125rem 0 0; padding: 0; list-style: none;} .kispg_card_pymtg .kispg_pay_ico_lst > li {flex: 0 0 auto; margin: 0; padding: 0;} .kispg_card_pymtg .kispg_pay_ico_lst .payCdBtn {display: flex; flex-direction: column; align-items: center; gap: 0.5625rem; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; background: transparent !important; text-decoration: none !important;} .kispg_card_pymtg .kispg_pay_ico_lst .payCdBtn:hover {opacity: 0.92;} .kispg_card_pymtg .kispg_pay_ico_lst .kispg_pay_ico {display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 0.25rem 0.625rem rgba(15, 23, 42, 0.12); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;} .kispg_card_pymtg .kispg_pay_ico_lst .payCdBtn:hover .kispg_pay_ico {transform: translateY(-2px); box-shadow: 0 0.375rem 0.875rem rgba(15, 23, 42, 0.14);} .kispg_card_pymtg .kispg_pay_ico_lst .naver_btn .kispg_pay_ico {background-color: #00de5a;} .kispg_card_pymtg .kispg_pay_ico_lst .kakao_btn .kispg_pay_ico {background-color: #ffeb00;} .kispg_card_pymtg .kispg_pay_ico_lst .card_btn .kispg_pay_ico {background: linear-gradient(145deg, var(--kispg-blue) 0%, var(--kispg-teal) 100%); color: #fff; font-size: 1.875rem; line-height: 1;} .kispg_card_pymtg .kispg_pay_ico_lst .payCdBtn img {display: block; max-width: 68%; max-height: 1.75rem; width: auto; height: auto; object-fit: contain;} .kispg_card_pymtg .kispg_pay_ico_lst .kispg_pay_lbl {font-size: 0.8125rem; font-weight: 600; color: #475569; letter-spacing: -0.03em; white-space: nowrap;} /* kispgCardPymtgFnInfo — 결제 결과(PC) */ .kispg_card_pymtg .kispg_fn_panel {margin-top: 0.5rem; padding: 2.5rem 2rem 2rem; border: 1px solid var(--kispg-line); border-radius: 0.5rem; background: #fff; box-shadow: 0 0.375rem 1.25rem rgba(15, 23, 42, 0.06); text-align: center;} .kispg_card_pymtg .kispg_fn_panel--success {border-color: rgba(51, 102, 185, 0.22); background: linear-gradient(180deg, rgba(51, 102, 185, 0.04) 0%, #fff 42%);} .kispg_card_pymtg .kispg_fn_panel--fail {border-color: rgba(220, 53, 69, 0.18); background: linear-gradient(180deg, rgba(220, 53, 69, 0.04) 0%, #fff 42%);} .kispg_card_pymtg .kispg_fn_icon_ring {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin: 0 auto 1.25rem; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.08);} .kispg_card_pymtg .kispg_fn_panel--success .kispg_fn_icon_ring {background: linear-gradient(145deg, rgba(51, 102, 185, 0.12) 0%, rgba(9, 199, 199, 0.1) 100%); color: var(--kispg-blue);} .kispg_card_pymtg .kispg_fn_panel--fail .kispg_fn_icon_ring {background: rgba(220, 53, 69, 0.08); color: #dc3545;} .kispg_card_pymtg .kispg_fn_icon {font-size: 2.25rem; line-height: 1;} .kispg_card_pymtg .kispg_fn_title {margin: 0 0 0.75rem; font-size: 1.375rem; font-weight: 700; color: var(--kispg-ink); letter-spacing: -0.03em; line-height: 1.35;} .kispg_card_pymtg .kispg_fn_lead {margin: 0 auto; max-width: 32rem; font-size: 0.9375rem; font-weight: 400; color: var(--kispg-muted); line-height: 1.6; letter-spacing: -0.02em; word-break: keep-all;} .kispg_card_pymtg .kispg_fn_reason {margin: 1.125rem auto 0; max-width: 28rem; padding: 0.875rem 1rem; border-radius: 0.375rem; background: #f8fafc; border: 1px solid var(--kispg-line); font-size: 0.875rem; color: #334155; line-height: 1.55; text-align: left;} .kispg_card_pymtg .kispg_fn_reason_lbl {display: inline-block; margin-right: 0.5rem; font-weight: 700; color: #64748b;} .kispg_card_pymtg .kispg_fn_actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 1.75rem; padding-bottom: 0.5rem;} /* 제작 문의하기 */ .flg_make_keep_qust_sian_guide {box-sizing: border-box; margin-bottom: 0.25rem; padding: 1.375rem 1.5rem 1.5rem; border: 1px solid #e8ecf1; border-radius: 0.75rem; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);} .flg_make_keep_qust_sian_guide_head {margin-bottom: 1.125rem;} .flg_make_keep_qust_sian_guide_eyebrow {display: block; margin-bottom: 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; color: #3366b9;} .flg_make_keep_qust_sian_guide_title {margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 700; color: #0f172a; letter-spacing: -0.03em; line-height: 1.3;} .flg_make_keep_qust_sian_guide_lead {font-size: 0.9375rem; font-weight: 400; color: #64748b; line-height: 1.6; letter-spacing: -0.01em;} .flg_make_keep_qust_sian_guide_grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;} .flg_make_keep_qust_sian_guide_tile {position: relative; display: flex; align-items: center; gap: 0.875rem; min-height: 4.75rem; padding: 0.875rem 1rem; border-radius: 0.625rem; border: 1px solid #eef2f7; background: #fafbfc; text-decoration: none !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;} .flg_make_keep_qust_sian_guide_tile:hover {transform: translateY(-2px); border-color: rgba(51, 102, 185, 0.22); background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);} .flg_make_keep_qust_sian_guide_tile_icon {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; font-size: 1.125rem;} .flg_make_keep_qust_sian_guide_tile.is-tone-slate .flg_make_keep_qust_sian_guide_tile_icon {background: #f1f5f9; color: #475569;} .flg_make_keep_qust_sian_guide_tile.is-tone-teal .flg_make_keep_qust_sian_guide_tile_icon {background: #ecfdf5; color: #0d9488;} .flg_make_keep_qust_sian_guide_tile.is-tone-blue .flg_make_keep_qust_sian_guide_tile_icon {background: #eff6ff; color: #3366b9;} .flg_make_keep_qust_sian_guide_tile_body {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem;} .flg_make_keep_qust_sian_guide_tile_label {font-size: 0.9375rem; font-weight: 700; color: #1e293b; letter-spacing: -0.02em; line-height: 1.3;} .flg_make_keep_qust_sian_guide_tile_hint {font-size: 0.75rem; font-weight: 500; color: #94a3b8; letter-spacing: -0.01em;} .flg_make_keep_qust_sian_guide_tile:hover .flg_make_keep_qust_sian_guide_tile_hint {color: #64748b;} .flg_make_keep_qust_sian_guide_tile_arrow {flex: 0 0 auto; font-size: 0.875rem; color: #cbd5e1; transition: color 0.22s ease, transform 0.22s ease;} .flg_make_keep_qust_sian_guide_tile:hover .flg_make_keep_qust_sian_guide_tile_arrow {color: #3366b9; transform: translate(2px, -2px);} @media (max-width: 991.98px) { .flg_make_keep_qust_sian_guide {padding: 1.125rem 1rem 1.25rem;} .flg_make_keep_qust_sian_guide_grid {grid-template-columns: 1fr; gap: 0.625rem;} .flg_make_keep_qust_sian_guide_tile {min-height: 0;} } .flg_make_keep_qust_sel_optn {box-sizing: border-box; margin-bottom: 0.25rem; padding: 1.375rem 1.5rem 1.5rem; border: 1px solid #e8ecf1; border-radius: 0.75rem; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);} .flg_make_keep_qust_sel_optn_head {margin-bottom: 1.125rem;} .flg_make_keep_qust_sel_optn_body {display: flex; align-items: flex-start; gap: 1.375rem;} .flg_make_keep_qust_sel_optn_visual {flex: 0 0 auto;} .flg_make_keep_qust_sel_optn_img {display: block; width: 8.75rem; height: 8.75rem; object-fit: cover; border-radius: 0.625rem; border: 1px solid #e8ecf1; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); background: #f8fafc;} .flg_make_keep_qust_sel_optn_detail {flex: 1 1 auto; min-width: 0;} .flg_make_keep_qust_sel_optn_name {margin: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 700; color: #1e293b; letter-spacing: -0.02em; line-height: 1.4;} .flg_make_keep_qust_sel_optn_price {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.625rem; margin: 0 0 1rem; padding: 0.6875rem 0.875rem; border-radius: 0.5rem; background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%); border: 1px solid rgba(51, 102, 185, 0.16);} .flg_make_keep_qust_sel_optn_price_lbl {font-size: 0.8125rem; font-weight: 600; color: #64748b; letter-spacing: -0.01em;} .flg_make_keep_qust_sel_optn_price_val {font-size: 1.3125rem; font-weight: 700; color: #3366b9; letter-spacing: -0.03em;} .flg_make_keep_qust_sel_optn_specs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.625rem; margin: 0;} .flg_make_keep_qust_sel_optn_spec {margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: #fafbfc; border: 1px solid #eef2f7;} .flg_make_keep_qust_sel_optn_spec > dt {margin: 0 0 0.1875rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.01em; color: #64748b;} .flg_make_keep_qust_sel_optn_spec > dd {margin: 0; font-size: 0.9375rem; font-weight: 600; color: #1e293b; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all;} @media (max-width: 991.98px) { .flg_make_keep_qust_sel_optn {padding: 1.125rem 1rem 1.25rem;} .flg_make_keep_qust_sel_optn_body {flex-direction: column; align-items: center; gap: 1rem;} .flg_make_keep_qust_sel_optn_visual {width: 100%; text-align: center;} .flg_make_keep_qust_sel_optn_img {width: 7.5rem; height: 7.5rem; margin: 0 auto;} .flg_make_keep_qust_sel_optn_detail {width: 100%;} .flg_make_keep_qust_sel_optn_specs {grid-template-columns: 1fr 1fr;} } .flg_make_keep_qust_agree_card {box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 0.625rem; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;} .flg_make_keep_qust_agree_card.is-checked {border-color: rgba(51, 102, 185, 0.45); background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 2px 12px rgba(51, 102, 185, 0.12);} .flg_make_keep_qust_agree_label {display: flex; align-items: center; gap: 0.875rem 1rem; margin: 0; padding: 1rem 1.125rem; cursor: pointer; box-sizing: border-box;} .flg_make_keep_qust_agree_inp {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;} .flg_make_keep_qust_agree_box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border: 2px solid #cbd5e1; border-radius: 0.375rem; background: #fff; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;} .flg_make_keep_qust_agree_check_icon {font-size: 0.75rem; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;} .flg_make_keep_qust_agree_card.is-checked .flg_make_keep_qust_agree_box {border-color: #3366b9; background: #3366b9; box-shadow: 0 0 0 3px rgba(51, 102, 185, 0.15);} .flg_make_keep_qust_agree_card.is-checked .flg_make_keep_qust_agree_check_icon {opacity: 1; transform: scale(1);} .flg_make_keep_qust_agree_body {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem;} .flg_make_keep_qust_agree_title {font-size: 0.9375rem; font-weight: 700; color: #1e293b; letter-spacing: -0.02em; line-height: 1.35;} .flg_make_keep_qust_agree_req {display: inline-block; margin-left: 0.375rem; padding: 0.125rem 0.4375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: #3366b9; vertical-align: middle; background: rgba(51, 102, 185, 0.1); border-radius: 0.25rem;} .flg_make_keep_qust_agree_desc {font-size: 0.8125rem; font-weight: 400; color: #64748b; line-height: 1.5; letter-spacing: -0.01em;} .flg_make_keep_qust_agree_action {flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.4375rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #3366b9; letter-spacing: -0.02em; background: rgba(51, 102, 185, 0.08); border-radius: 999px; transition: background-color 0.15s ease, color 0.15s ease;} .flg_make_keep_qust_agree_label:hover .flg_make_keep_qust_agree_action {background: rgba(51, 102, 185, 0.14);} .flg_make_keep_qust_agree_card.is-checked .flg_make_keep_qust_agree_action {color: #1d4ed8; background: rgba(51, 102, 185, 0.16);} .flg_make_keep_qust_form_foot {margin-top: 1.375rem; padding-top: 1.375rem; border-top: 1px solid #e8ecf1;} .flg_make_keep_qust_form_foot_inner {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.625rem 0.75rem;} .flg_make_keep_qust_form_foot_back {display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; min-height: 2.875rem; padding: 0 1.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: #475569 !important; opacity: 1 !important; text-decoration: none !important; background-color: #fff; border: 1px solid #cbd5e1; border-radius: 0.5rem; box-sizing: border-box; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;} .flg_make_keep_qust_form_foot_back:hover, .flg_make_keep_qust_form_foot_back:focus {color: #334155 !important; opacity: 1 !important; border-color: #94a3b8; background-color: #f8fafc; text-decoration: none !important;} .flg_make_keep_qust_form_foot_back i {color: #64748b !important; opacity: 1 !important;} .flg_make_keep_qust_form_foot_back:hover i, .flg_make_keep_qust_form_foot_back:focus i {color: #475569 !important;} .flg_make_keep_qust_form_foot_submit {display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; min-width: 12rem; padding: 0 1.625rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #fff !important; opacity: 1 !important; text-decoration: none !important; background: linear-gradient(135deg, #3366b9 0%, #1d4ed8 100%); background-color: #3366b9; border: none; border-radius: 0.5rem; box-shadow: 0 4px 14px rgba(51, 102, 185, 0.28); box-sizing: border-box; transition: transform 0.15s ease, box-shadow 0.15s ease;} .flg_make_keep_qust_form_foot_submit:hover, .flg_make_keep_qust_form_foot_submit:focus {color: #fff !important; opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(51, 102, 185, 0.34); text-decoration: none !important;} .flg_make_keep_qust_form_foot_submit span, .flg_make_keep_qust_form_foot_submit i {color: #fff !important; opacity: 1 !important;} @media (max-width: 575.98px) { .flg_make_keep_qust_form_foot_inner {flex-direction: column-reverse; align-items: stretch;} .flg_make_keep_qust_form_foot_back, .flg_make_keep_qust_form_foot_submit {width: 100%; min-width: 0;} } .flg_make_keep_qust_apl_notice {box-sizing: border-box; border: 1px solid rgba(51, 102, 185, 0.16); border-radius: 0.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 100%); box-shadow: 0 1px 4px rgba(51, 102, 185, 0.06);} .flg_make_keep_qust_apl_notice_inner {display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.9375rem 1.125rem;} .flg_make_keep_qust_apl_notice_icon {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 0.5rem; background: rgba(51, 102, 185, 0.12); color: #3366b9; font-size: 1.125rem;} .flg_make_keep_qust_apl_notice_body {flex: 1 1 auto; min-width: 0;} .flg_make_keep_qust_apl_notice_title {margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 700; color: #1e293b; letter-spacing: -0.02em; line-height: 1.35;} .flg_make_keep_qust_apl_notice_desc {font-size: 0.875rem; font-weight: 400; color: #64748b; line-height: 1.55; letter-spacing: -0.01em;} /* 상단 안내 배너 */ .flg_make_keep_qust_banner_wrap > a {position: relative; display: block;} .flg_make_keep_qust_banner_pointer {position: absolute; bottom: 2rem; right: 17%; transform: translateY(50%);} .flg_make_keep_qust_banner_pointer img {width: 5rem;} /* 손가락 터치 애니메이션 */ .flg_make_keep_qust_banner_pointer img { position: relative; animation: fingerTouch 2s infinite; } @keyframes fingerTouch { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } /* 메인페이지 - 전체 화면 비디오 팝업 스타일 */ .video-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 10001; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease-in-out; } .video-popup-overlay.fade-in { opacity: 1; } .video-popup-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1250px; padding: 0rem 1rem; } .video-popup-container video { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } .video-popup-close { position: absolute; top: -3rem; right: 1rem; background: none; border: none; color: white; font-size: 30px; cursor: pointer; z-index: 10000; text-decoration: none; display: inline-block; } .video-popup-close:hover { color: #ccc; text-decoration: none; } .video-popup-skip-today { position: absolute; top: -3rem; left: 1rem; background: rgba(0, 0, 0, 0.7); border: 1px solid #ccc; color: white; padding: 5px 10px; cursor: pointer; z-index: 10000; border-radius: 4px; font-size: 14px; text-decoration: none; display: inline-block; } .video-popup-skip-today:hover { background: rgba(0, 0, 0, 0.9); color: white; text-decoration: none; } /* 비디오 팝업 열기 버튼 스타일 */ .video-popup-trigger { position: fixed; bottom: 20px; right: 20px; background-color: #007bff; color: white; border: none; border-radius: 50px; padding: 15px 20px; cursor: pointer; font-size: 16px; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); text-decoration: none; display: inline-block; } .video-popup-trigger:hover { background-color: #0056b3; color: white; text-decoration: none; } /* 전역 변수 */ :root { --index-primary-color: #004596; --index-secondary-color: #0ea5e9; --index-accent-color: #f59e0b; --index-success-color: #10b981; --index-text-dark: #1f2937; --index-text-gray: #6b7280; --index-bg-light: #f9fafb; --index-border-color: #e5e7eb; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; } /* ========== 배송신청 섹션 스타일 ========== */ #layout_dafl_srch_wrap {border-radius: 0; position: relative; background-color: #fff;} #layout_dafl_srch_wrap::before {content: ''; position: absolute; top: -4rem; right: -2rem; width: 16rem; height: 16rem; background: radial-gradient(circle, rgba(51, 102, 185, 0.08) 0%, rgba(51, 102, 185, 0) 70%); border-radius: 50%; pointer-events: none;} #layout_dafl_srch_wrap::after {content: ''; position: absolute; bottom: -3rem; left: -2rem; width: 14rem; height: 14rem; background: radial-gradient(circle, rgba(9, 199, 199, 0.07) 0%, rgba(9, 199, 199, 0) 70%); border-radius: 50%; pointer-events: none;} #layout_top_banner_wrap.dafl_top_banner_hub {position: relative; z-index: 1;} .dafl_top_banner_hub_inner {display: flex; align-items: stretch; gap: 1.25rem;} .dafl_top_banner_hub_primary {flex: 0 0 42%; max-width: 42%; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 2rem 2.25rem; border-radius: 1.25rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.92) 100%); border: 1px solid rgba(51, 102, 185, 0.12); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); position: relative; overflow: hidden;} .dafl_top_banner_hub_primary::before {content: ''; position: absolute; top: -3rem; right: -3rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0) 70%); pointer-events: none;} .dafl_top_banner_hub_primary::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3366b9, #0ea5e9, #09c7c7);} .dafl_top_banner_hub_eyebrow {display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: #3366b9; margin-bottom: 0.75rem;} .dafl_top_banner_hub_title {font-size: 2rem; font-weight: 700; line-height: 1.25; color: #1e293b; margin: 0 0 0.75rem; letter-spacing: -0.03em;} .dafl_top_banner_hub_desc {font-size: 1.0625rem; line-height: 1.65; color: #64748b; margin: 0 0 1rem; word-break: keep-all;} .dafl_top_banner_hub_desc strong {color: #334155; font-weight: 700;} .dafl_top_banner_hub_point_lst {list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.4375rem;} .dafl_top_banner_hub_point_lst > li {display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: #475569; word-break: keep-all;} .dafl_top_banner_hub_point_lst > li > i {flex-shrink: 0; margin-top: 0.1875rem; font-size: 0.8125rem; color: #3366b9;} .dafl_top_banner_hub_cta {display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 15rem; margin-top: auto; padding: 0.875rem 1.25rem; border-radius: 999px; background: linear-gradient(135deg, #3366b9 0%, #1d4ed8 100%); color: #fff; font-weight: 600; box-shadow: 0 10px 24px rgba(51, 102, 185, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease;} .dafl_top_banner_hub_cta:hover {color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(51, 102, 185, 0.42);} .dafl_top_banner_hub_cta i {font-size: 1rem; transition: transform 0.25s ease;} .dafl_top_banner_hub_cta:hover i {transform: translateX(4px);} .dafl_top_banner_hub_quick_grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: auto;} .dafl_top_banner_hub_quick_link {display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-weight: 600; font-size: 0.9375rem; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;} .dafl_top_banner_hub_quick_link:hover {color: #fff; opacity: 1; background: #3366b9; border-color: #3366b9; transform: translateY(-2px);} .dafl_top_banner_hub_services {flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; padding: 2rem 1.25rem 1.25rem; border-radius: 1.25rem; background: #f8fafc; border: 1px solid #e8edf5;} .dafl_top_banner_hub_services_head {flex-shrink: 0; margin-bottom: 1rem; padding-left: 0.25rem;} .dafl_top_banner_hub_services_title {font-size: 1.125rem; font-weight: 700; color: #1e293b; margin: 0; letter-spacing: -0.02em;} .dafl_top_banner_hub_tile_grid {flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.75rem; min-height: 0;} .dafl_top_banner_hub_tile {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; min-height: 0; height: 100%; padding: 1rem 0.75rem; border-radius: 1rem; background: #fff; border: 1px solid #eef2f7; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;} .dafl_top_banner_hub_tile:hover {opacity: 1; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); border-color: rgba(51, 102, 185, 0.25);} .dafl_top_banner_hub_tile_icon {display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; font-size: 1.375rem; transition: transform 0.28s ease;} .dafl_top_banner_hub_tile:hover .dafl_top_banner_hub_tile_icon {transform: scale(1.08);} .dafl_top_banner_hub_tile_label {font-size: 0.9375rem; font-weight: 700; color: #334155; text-align: center; line-height: 1.35; word-break: keep-all;} .dafl_top_banner_hub_tile.is-tone-blue .dafl_top_banner_hub_tile_icon {background: #eff6ff; color: #2563eb;} .dafl_top_banner_hub_tile.is-tone-indigo .dafl_top_banner_hub_tile_icon {background: #eef2ff; color: #4f46e5;} .dafl_top_banner_hub_tile.is-tone-amber .dafl_top_banner_hub_tile_icon {background: #fffbeb; color: #d97706;} .dafl_top_banner_hub_tile.is-tone-green .dafl_top_banner_hub_tile_icon {background: #ecfdf5; color: #059669;} .dafl_top_banner_hub_tile.is-tone-rose .dafl_top_banner_hub_tile_icon {background: #fdf2f8; color: #db2777;} .dafl_top_banner_hub_tile.is-tone-cyan .dafl_top_banner_hub_tile_icon {background: #ecfeff; color: #0891b2;} /* 주요 서비스 섹션 스타일 */ #layout_dafl_mn_srv_body h4 { font-size: 2.25rem; color: var(--index-text-dark); font-weight: 400; letter-spacing: -0.5px; } #layout_dafl_mn_srv_body h4 strong { color: var(--index-primary-color); font-weight: 700; } #layout_dafl_mn_srv_body > .text-center p { font-size: 1.1rem; color: var(--index-text-gray); } /* 서비스 그리드 */ .service-grid { margin-top: 2rem; } .service-grid .col-3 { padding: 0 1rem; } /* 서비스 카드 */ .service-card { background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; min-height: 380px; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 69, 150, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .service-card:hover::before { opacity: 1; } .service-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); border-color: rgba(0, 69, 150, 0.1); } /* 서비스 아이콘 */ .service-icon-wrap { width: 100px; height: 100px; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 69, 150, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%); border-radius: 50%; transition: all 0.4s ease; position: relative; } .service-icon-wrap::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid transparent; transition: all 0.4s ease; } .service-card:hover .service-icon-wrap { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, rgba(0, 69, 150, 0.15) 0%, rgba(14, 165, 233, 0.15) 100%); } .service-card:hover .service-icon-wrap::after { border-color: rgba(0, 69, 150, 0.3); transform: rotate(-5deg); } .service-icon-wrap i { display: block; transition: transform 0.4s ease; } .service-card:hover .service-icon-wrap i { transform: scale(1.1); } /* 서비스 컨텐츠 */ .service-content { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } .service-title { font-size: 1.35rem; font-weight: 700; color: var(--index-text-dark); margin-bottom: 1.25rem; line-height: 1.4; transition: color 0.3s ease; } .service-card:hover .service-title { color: var(--index-primary-color); } .service-desc { font-size: 0.95rem; color: var(--index-text-gray); line-height: 1.8; margin: 0; transition: color 0.3s ease; word-break: keep-all; } .service-card:hover .service-desc { color: var(--index-text-dark); } /* 각 서비스별 색상 구분 */ .service-grid .col-3:nth-child(1) .service-card:hover .service-icon-wrap { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(0, 69, 150, 0.15) 100%); } .service-grid .col-3:nth-child(1) .service-card:hover .service-icon-wrap::after { border-color: rgba(59, 130, 246, 0.4); } .service-grid .col-3:nth-child(2) .service-card:hover .service-icon-wrap { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.15) 100%); } .service-grid .col-3:nth-child(2) .service-card:hover .service-icon-wrap::after { border-color: rgba(236, 72, 153, 0.4); } .service-grid .col-3:nth-child(3) .service-card:hover .service-icon-wrap { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%); } .service-grid .col-3:nth-child(3) .service-card:hover .service-icon-wrap::after { border-color: rgba(245, 158, 11, `0.4); } .service-grid .col-3:nth-child(4) .service-card:hover .service-icon-wrap { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%); } .service-grid .col-3:nth-child(4) .service-card:hover .service-icon-wrap::after { border-color: rgba(16, 185, 129, 0.4); } /* 이용약관 26.01.19 */ .terms-list {word-break: keep-all;} .terms-list > li:not(:first-child) {margin-top: 2rem;} .terms-list > li > dl {margin-bottom: 0;} .terms-list > li > dl > dt {font-size: 1.375rem;} .terms-list > li > dl > dt + dd {margin-top: 0.5rem; font-size: 1.25rem;;} .terms-list li div {display: flex; justify-content: flex-start; align-items: baseline; gap: 0.75rem;} .terms-list li p {line-height: 1.5; color: #333;} .terms-depth1 {font-size: 1.125rem;} .terms-depth1 > li:not(:first-child) {margin-top: 0.75rem;} .terms-depth2 {margin-left: 0.75rem; margin-top: 0.375rem; font-size: 1.0625rem;} .terms-depth2 > li:not(:first-child) {margin-top: 0.5rem;} .terms-depth3 {margin-left: 0.75rem; margin-top: 0.375rem; font-size: 1.0625rem;} .terms-depth3 > li:not(:first-child) {margin-top: 0.5rem;} .terms-depth2 > li div, .terms-depth3 > li div {gap: 0.5rem;} .terms-depth3 > li span {font-weight: 500;} /* 26.06.16 앱 공유하기 */ .dafl_app_share_benefit_list {display: flex; justify-content: center; gap: 0.5rem; align-items: stretch;} .dafl_app_share_benefit_list > li {width: 25%; flex: 0 0 25%;} .dafl_app_share_benefit_list .card, .dafl_app_share_benefit_list .card-body {height: 100%;} .dafl_app_share_benefit_list .card-body {padding: 1.5rem;} .dafl_app_share_benefit_list .card-body > p {word-break: keep-all;} /* 26.07.28 가격안내 가격인상 부분 */ .new_price_table tr > th {border: 1px solid #bebebe !important; } .new_price_table thead > tr:first-child > th:first-child {border-left: 0 !important;} .new_price_table thead > tr:first-child > th:last-child {border-right: 0 !important;} .new_price_table thead > tr:last-child > th:last-child {border-right: 0 !important;} .new_price_table tbody > tr > td:not(:last-child) {border-right: 1px solid #bebebe;} .new_price_table tbody > tr > td:nth-child(4), .new_price_table tbody > tr > td:nth-child(5) {background-color: #f5f9fc;} .new_price_table tbody > tr > td h4, .new_price_table tbody > tr > td h5 {font-weight: 700;} .new_price_table tbody > tr > td:nth-child(2) h4, .new_price_table tbody > tr > td:nth-child(3) h4 {color: #748091;} .divy_fee_chart_title + table h4 {font-size: 1.25rem; margin-bottom: 0;} /* 배송설치요청 - 적립 미리보기 / 비로그인 안내 */ .pint_use_form_guest {color: #6c757d; font-size: 0.9375rem;} .pint_accml_prvw {margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.5;} .pint_accml_prvw:empty {display: none;} .pint_accml_prvw.is_accml {background-color: #eef4ff; color: #004596;} .pint_accml_prvw.is_accml strong {font-weight: bold;} .pint_accml_prvw.is_none {background-color: #f5f5f5; color: #6c757d;} .pint_accml_prvw.is_bnft {background-color: #fff6e5; color: #8a5a00;} /* PC 청구서 - 발전기금 적립 안내 */ #prtWrap .bill-advfd-guide { margin: 0 auto; max-width: 630px; padding: 14px 16px; border: 2px solid #ffcd9e; border-radius: 8px; background: #fffaf5; text-align: left; box-sizing: border-box; } #prtWrap .bill-advfd-guide-head { margin-bottom: 10px; text-align: left; } #prtWrap .bill-advfd-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; font-size: 0.85rem; font-weight: 800; padding: 4px 11px 4px 9px; border-radius: 20px; box-shadow: 0 2px 8px rgba(217,119,6,0.45); vertical-align: middle; margin-right: 6px; } #prtWrap .bill-advfd-guide-title { font-size: 1rem; font-weight: 700; color: #92400e; vertical-align: middle; } #prtWrap .bill-advfd-guide-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #prtWrap .bill-advfd-guide-text { flex: 1; min-width: 0; text-align: left; } #prtWrap .bill-advfd-guide-org { font-size: 1.05rem; font-weight: 700; color: #1f2937; line-height: 1.5; } #prtWrap .bill-advfd-guide-desc { margin-top: 4px; font-size: 0.92rem; color: #4b5563; line-height: 1.5; } #prtWrap .bill-advfd-guide-amt-wrap { flex-shrink: 0; text-align: right; white-space: nowrap; } #prtWrap .bill-advfd-guide-amt-label { font-size: 0.88rem; color: #6b7280; margin-bottom: 4px; } #prtWrap .bill-advfd-guide-amt-value { font-size: 1.35rem; font-weight: 800; color: #d97706; line-height: 1.4; } /* 고객 청구서 URL - 발전기금 적립 안내 */ .dafl_divy_inq_info .bill_form_advfd-wrap { margin-bottom: 1rem; } .dafl_divy_inq_info .bill_form_advfd { border: 1px solid #ffcd9e; background: #fffaf5 !important; border-radius: 0.25rem; } .dafl_divy_inq_info .bill_form_advfd-head { margin-bottom: 0.75rem; text-align: left; } .dafl_divy_inq_info .bill_form_advfd-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; font-size: 0.85rem; font-weight: 800; padding: 4px 11px 4px 9px; border-radius: 20px; box-shadow: 0 2px 8px rgba(217,119,6,0.45); vertical-align: middle; margin-right: 6px; } .dafl_divy_inq_info .bill_form_advfd-title { font-size: 1rem; font-weight: 700; color: #92400e; vertical-align: middle; } .dafl_divy_inq_info .bill_form_advfd-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .dafl_divy_inq_info .bill_form_advfd-text { flex: 1; min-width: 0; text-align: left; } .dafl_divy_inq_info .bill_form_advfd-org { font-size: 1rem; font-weight: 700; color: #1f2937; line-height: 1.5; } .dafl_divy_inq_info .bill_form_advfd-desc { margin-top: 4px; font-size: 0.875rem; color: #4b5563; line-height: 1.5; } .dafl_divy_inq_info .bill_form_advfd-amt { flex-shrink: 0; text-align: right; white-space: nowrap; } .dafl_divy_inq_info .bill_form_advfd-amt-label { font-size: 0.8125rem; color: #6b7280; margin-bottom: 4px; } .dafl_divy_inq_info .bill_form_advfd-amt-value { font-size: 1.25rem; font-weight: 800; color: #d97706; line-height: 1.4; } /* 불편·건의 — 목록 검색 (안내 .card 회색과 구분: 흰 배경 + 그림자, card 클래스 미사용) */ #cusSprtSearch {width: 100%;} .pint_accml_dsc_list_header.list-header > dt > .list-header-title, .bil_recpt_list_header.list-header > dt > .list-header-title {font-size: 1.125rem; font-weight: 600; color: #343a40; line-height: 1.45;} .pint_accml_dsc_srch_valu, .bil_recpt_srch_valu {color: #3366b9; font-weight: 700; word-break: break-all;} .pint_accml_dsc_list_actions, .bil_recpt_list_actions {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;} .pint_accml_dsc_list_actions .btn, .bil_recpt_list_actions .btn {font-weight: 600; white-space: nowrap;} .bil_recpt_srch_dt_flt {flex: 0 0 9.5rem; width: 9.5rem; max-width: 9.5rem;} .bil_recpt_srch_dt_flt .form-control {width: 100%;} .bil_recpt_srch_bar {flex-wrap: wrap;} #divyOrdReqList thead > tr > th, #divyOrdReqList tbody > tr > td {vertical-align: middle !important;} #divyOrdReqList tbody > tr > td.text-left > p {margin-bottom: 0;} #divyOrdReqList thead > tr > th.divy_ord_req_aplc_th, #divyOrdReqList tbody > tr > td.divy_ord_req_aplc_td {text-align: center !important; vertical-align: middle;} #divyOrdReqList tbody > tr > td.divy_ord_req_aplc_td > p, #divyOrdReqList tbody > tr > td.divy_ord_req_aplc_td > small {text-align: center;} .divy_instl_req_reg_dt_th, .divy_instl_req_reg_dt_td {min-width: 160px; white-space: nowrap;} #cusInconvincPpslList thead > tr > th, #cusInconvincPpslList tbody > tr > td {vertical-align: middle !important;} .cus_inconvinc_ppsl_wr_dt_th, .cus_inconvinc_ppsl_wr_dt_td {min-width: 160px; white-space: nowrap;} .board_list_item_new {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 1.0625rem; height: 1.0625rem; padding: 0 0.1875rem; border-radius: 0.3125rem; font-size: 0.5625rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; color: #be123c; background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%); border: 1px solid rgba(190, 18, 60, 0.22); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); vertical-align: middle;} #bilRecptList thead > tr > th, #bilRecptList tbody > tr > td {vertical-align: middle !important;} #bilRecptList tbody > tr > td > p {margin-bottom: 0;} #bilRecptList thead > tr > th.text-right, #bilRecptList tbody > tr > td.text-right {text-align: right !important; font-variant-numeric: tabular-nums;} #bilRecptList thead > tr > th.bil_recpt_act_th, #bilRecptList tbody > tr > td.bil_recpt_act_td {text-align: center !important; vertical-align: middle;} #bilRecptList tbody > tr > td.bil_recpt_act_td .bil_recpt_recpt_wait {display: inline-block; margin: 0;} a.bil_recpt_recpt_lnk {font-weight: 600; color: #6c757d !important; text-decoration: underline; text-underline-offset: 0.125rem; opacity: 1 !important;} a.bil_recpt_recpt_lnk:hover, a.bil_recpt_recpt_lnk:focus {color: #495057 !important; opacity: 1 !important;} a.pint_accml_dsc_inq_lnk, a.bil_recpt_inq_lnk {font-weight: 600; color: #3366b9 !important; text-decoration: underline; text-underline-offset: 0.125rem; opacity: 1 !important;} a.pint_accml_dsc_inq_lnk:hover, a.pint_accml_dsc_inq_lnk:focus, a.bil_recpt_inq_lnk:hover, a.bil_recpt_inq_lnk:focus {color: #1d4ed8 !important; opacity: 1 !important;} #pintAccmlDscList thead > tr > th, #pintAccmlDscList tbody > tr > td {vertical-align: middle !important;} #pintAccmlDscList thead > tr > th.text-left, #pintAccmlDscList tbody > tr > td.text-left {text-align: left !important;} #pintAccmlDscList thead > tr > th.pint_accml_dsc_inq_th {font-size: 1.125rem; color: #495057;} #pintAccmlDscList thead > tr > th.pint_accml_dsc_inq_th .fa-cog {vertical-align: middle;} @media (max-width: 767.98px) { .pint_accml_dsc_list_header.list-header > dt, .pint_accml_dsc_list_header.list-header > dd, .bil_recpt_list_header.list-header > dt, .bil_recpt_list_header.list-header > dd {display: block; text-align: left;} .pint_accml_dsc_list_actions, .bil_recpt_list_actions {justify-content: flex-start; margin-top: 0.75rem;} .pint_accml_dsc_list_actions .btn, .bil_recpt_list_actions .btn {flex: 1 1 auto; min-width: calc(50% - 0.25rem);} .bil_recpt_srch_dt_flt {flex: 1 1 calc(50% - 0.625rem); width: auto; max-width: none;} } .cus_inconvinc_ppsl_srch_card {width: 100%; box-sizing: border-box; background-color: #fff; border: 1px solid #e9ecef; border-radius: 0.25rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);} .cus_inconvinc_ppsl_srch_bar {width: 100%; box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0.75rem 1.25rem; padding: 1rem 1.25rem;} .cus_inconvinc_ppsl_srch_lbl {display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: #495057; line-height: 1.2;} .cus_inconvinc_ppsl_srch_flt {flex: 0 0 10.5rem; width: 10.5rem; max-width: 10.5rem;} .cus_inconvinc_ppsl_srch_cat {width: 100%;} .cus_inconvinc_ppsl_srch_qry {flex: 1 1 auto; min-width: 0; width: 100%;} .cus_inconvinc_ppsl_srch_qry_grp {width: 100%; flex-wrap: nowrap;} .cus_inconvinc_ppsl_srch_qry_grp > .form-control {flex: 1 1 auto; width: 1%; min-width: 0;} .cus_inconvinc_ppsl_srch_btn {font-weight: 600; white-space: nowrap;} .cus_inconvinc_ppsl_srch_reset {white-space: nowrap;} @media (max-width: 767.98px) { .cus_inconvinc_ppsl_srch_bar {flex-wrap: wrap; flex-direction: column; align-items: stretch;} .cus_inconvinc_ppsl_srch_flt {flex: 1 1 100%; width: 100%; max-width: none;} .cus_inconvinc_ppsl_srch_qry_grp {flex-wrap: wrap;} .cus_inconvinc_ppsl_srch_qry_grp > .form-control {flex: 1 1 100%; width: 100%; border-radius: 0.25rem 0.25rem 0 0;} .cus_inconvinc_ppsl_srch_qry_grp > .input-group-append {flex: 1 1 100%; width: 100%; margin-left: 0; display: flex;} .cus_inconvinc_ppsl_srch_qry_grp > .input-group-append .btn {flex: 1 1 auto;} } /* ========== 메인 게시판 카드 (index · myPage 공통) ========== */ .board_list_wrap {padding: 0; max-width: 100%;} .board_list_wrap .row {margin-left: 0; margin-right: 0;} .board_list_wrap .col-6 {padding-left: 0; padding-right: 0;} .board_list_wrap .col-6 + .col-6 {padding-left: 1.5rem;} .board_list_card {box-sizing: border-box; max-width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 1.25rem 1rem 1rem; transition: box-shadow 0.3s ease;} .board_list_card:hover {box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);} .board_list_header {display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--index-border-color); position: relative;} .board_list_icon {width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 69, 150, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%); border-radius: var(--radius-md); flex-shrink: 0;} .board_list_icon i {font-size: 1.75rem; color: var(--index-primary-color);} .board_list_title_wrap {flex: 1; min-width: 0;} .board_list_title {font-size: 1.5rem; font-weight: 700; color: var(--index-text-dark); margin-bottom: 0.5rem;} .board_list_desc {margin: 0; line-height: 1.6;} .board_list_desc .text-primary {color: var(--index-primary-color) !important; font-weight: 500; font-size: 0.95rem;} .board_list_desc .text-muted {display: block; margin-top: 0.25rem; margin-left: 0 !important; color: var(--index-text-gray) !important; font-size: 0.85rem;} .board_list_content {flex: 1;} .board_list_items {list-style: none; padding: 0; margin: 0;} .board_list_item {border-bottom: 1px solid var(--index-border-color);} .board_list_item:last-child {border-bottom: none;} .board_list_item:nth-child(even) .board_list_link {background: rgba(0, 69, 150, 0.02);} .board_list_link {display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.5rem; margin: 0 -0.25rem; text-decoration: none; transition: all 0.2s ease; border-radius: var(--radius-sm); gap: 0.75rem;} .board_list_link:hover {background: linear-gradient(135deg, rgba(0, 69, 150, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%) !important; transform: translateX(5px);} .board_list_link.my_page_row_static {cursor: default;} .board_list_link.my_page_row_static:hover {transform: none;} .board_list_item_content {flex: 1; display: flex; align-items: center; gap: 0.5rem; overflow: hidden; min-width: 0;} .board_list_item_category {color: var(--index-text-gray); font-size: 0.9rem; font-weight: 400; flex-shrink: 0;} .board_list_item_sta {display: inline-block; box-sizing: border-box; width: 6rem; min-width: 6rem; max-width: 6rem; font-size: 0.6875rem; font-weight: 700; line-height: 1.25; padding: 0.25rem 0.1875rem; border-radius: 999px; flex-shrink: 0; letter-spacing: -0.04em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .board_list_item_sta--recv {background: #f1f5f9; color: #475569;} .board_list_item_sta--prep {background: #fef3c7; color: #b45309;} .board_list_item_sta--rsrv {background: #e0f2fe; color: #0369a1;} .board_list_item_sta--ing {background: #dbeafe; color: #1d4ed8;} .board_list_item_sta--done {background: #dcfce7; color: #15803d;} .board_list_item_title {color: var(--index-text-dark); font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .board_list_link:hover .board_list_item_title {color: var(--index-primary-color);} .board_list_item_time {color: var(--index-text-gray); font-size: 0.8125rem; font-weight: 500; flex-shrink: 0; min-width: 5rem; text-align: right; white-space: nowrap; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;} .my_page_sns_provider {display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;} .my_page_sns_provider img {display: block; border-radius: 0.375rem;} .my_page_sns_provider_nm {font-size: 0.875rem; font-weight: 600; color: var(--index-text-dark);} .my_page_sns_row_meta {display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0;} .my_page_sns_row_dates {font-size: 0.75rem; color: var(--index-text-gray); white-space: nowrap; font-variant-numeric: tabular-nums;} /* myPageMain — 메인 허브·게시판 톤 */ .my_page_page {margin: 0 0 2rem;} .my_page_page .my_page_section_wrap--board {margin-top: 1.5rem;} .my_page_account_hub {position: relative; padding: 2rem 2.25rem; border-radius: 1.25rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.92) 100%); border: 1px solid rgba(51, 102, 185, 0.12); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); overflow: hidden;} .my_page_account_hub::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3366b9, #0ea5e9, #09c7c7);} .my_page_account_hub_eyebrow {display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: #3366b9; margin-bottom: 0.75rem;} .my_page_account_hub_title {font-size: 1.75rem; font-weight: 700; line-height: 1.25; color: #1e293b; margin: 0 0 0.5rem; letter-spacing: -0.03em;} .my_page_account_hub_id {font-size: 1.125rem; font-weight: 600; color: var(--index-primary-color); margin: 0 0 0.75rem;} .my_page_account_hub_desc {font-size: 0.9375rem; line-height: 1.65; color: #64748b; margin: 0; word-break: keep-all;} .my_page_account_hub_actions {margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center;} .my_page_account_hub_actions .btn {font-weight: 600;} .my_page_board_note {margin-top: 1rem; padding: 0.875rem 1rem; font-size: 0.8125rem; line-height: 1.55; color: #475569; word-break: keep-all; background: rgba(255, 255, 255, 0.85); border-radius: var(--radius-sm); border: 1px solid var(--index-border-color);} .my_page_withdraw_foot {margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--index-border-color); font-size: 0.8125rem; color: var(--index-text-gray); line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;} .my_page_withdraw_foot a {font-weight: 600; color: #64748b !important; text-decoration: underline; text-underline-offset: 0.125rem;} .my_page_withdraw_foot a:hover {color: #334155 !important;} .board_list_wrap--single .col-12 {padding: 0;} .my_page_group_lst {list-style: none; margin: 0; padding: 0;} .my_page_group_item {padding: 0.875rem 0.5rem; border-bottom: 1px solid var(--index-border-color);} .my_page_group_item:last-child {border-bottom: none;} .my_page_group_item--current {background: rgba(51, 102, 185, 0.06); border-radius: var(--radius-sm); margin: 0 -0.25rem; padding-left: 0.75rem; padding-right: 0.75rem;} .my_page_group_row {display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;} .my_page_group_nm {flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--index-text-dark); line-height: 1.45; word-break: keep-all;} .my_page_group_badge {flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; line-height: 1.2; padding: 0.1875rem 0.5rem; border-radius: 999px; background: #dbeafe; color: #1d4ed8;} .my_page_group_role {margin: 0.375rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--index-text-gray);} .my_page_group_empty {padding: 2.5rem 1rem; text-align: center; font-size: 0.9375rem; color: var(--index-text-gray);}