<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @font-face { font-family: "GmarketSans"; font-weight: 300; src: url('/common/css/fonts/GmarketSansLight.woff2') format(woff2); } @font-face { font-family: "GmarketSans"; font-weight: 500; src: url('/common/css/fonts/GmarketSansMedium.woff2') format(woff2); } @font-face { font-family: "GmarketSans"; font-weight: 800; src: url('/common/css/fonts/GmarketSansBold.woff2') format(woff2); } /* 메인 슬라이드 */ .dafl_main_top_banner_wrap {width: 1250px; padding: 2.5rem 1rem; margin: 0 auto; border-radius: 1.25rem; overflow: hidden;} .dafl_main_top_banner_wrap &gt; div {box-shadow: 3px 3px 4px rgba(0,0,0,0.3); border-radius: 1rem; overflow: hidden;} .dafl_main_top_banner_wrap ul &gt; li &gt; .layout_dafl_main_banner_img_wrap {width: 100%; height: 0; padding-bottom: 23%; position: relative; display: block;} .dafl_main_top_banner_wrap ul &gt; li &gt; .layout_dafl_main_banner_img_wrap:hover {opacity: 1; filter: brightness(1.05);} .dafl_main_top_banner_wrap ul &gt; li &gt; .layout_dafl_main_banner_img_wrap &gt; img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; border-radius: 1.25rem;} .dafl_main_top_banner_wrap ul &gt; li.zoom_in.swiper-slide-active &gt; div &gt; 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 &gt; li:not(.zoom_in) img {display: none;} .dafl_main_top_banner_wrap .swiper-container-initialized ul &gt; li img {display: block; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } .dafl_main_top_banner_wrap .swiper-container-initialized ul &gt; li &gt; a {touch-action: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } .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_top_slide_tool_bar_wrap { position: relative; justify-content: center; align-items: center; right: 14px; margin-top: 0.75rem;} .main_top_slide_tool_bar_wrap &gt; ul {display: flex; justify-content: center; align-items: center;} .main_top_slide_tool_bar_wrap &gt; ul &gt; li &gt; a {display: block;} .main_top_slide_tool_bar_wrap &gt; ul &gt; li &gt; a &gt; img {width: 1.5rem; height: 1.5rem;} .main_top_slide_tool_bar_wrap &gt; ul &gt; li &gt; a:hover {opacity: 0.8; transition: all 0.15s ease-in-out;} .main_top_slide_pause_btn &gt; i {background-image: url("/common/css/images/icon/pause.png"); width: 1.5rem; height: 1.5rem; display: block; background-size: contain; background-repeat: no-repeat;} .main_top_slide_pause_btn.play &gt; i {background-image: url("/common/css/images/icon/play.png");} .main_top_slide_pagination { width:5.5rem; text-align: center; font-family: Pretendard Variable; font-size: 0.875rem; font-weight: 500;color: #323232; padding: 8px 0; letter-spacing: 1px; margin: 0 -0.75rem;} .main_top_slide_pagination &gt; span {color: #323232; font-size: 0.875rem !important;} /* 메인페이지 상단 버튼 */ .main-section-body {padding: 2rem 1rem;} #layout_top_banner_wrap &gt; ul &gt; li:first-child {position: relative;} #layout_top_banner_wrap &gt; ul &gt; li:first-child &gt; div {width: 90%; position: absolute; bottom: 0;} #layout_top_banner_wrap &gt; ul &gt; li:first-child &gt; div span {display: flex; justify-content: space-between; align-items: center;} #layout_top_banner_wrap &gt; ul &gt; li:first-child &gt; div span &gt; i {margin-right: 0 !important;; font-size: 1.75rem !important; color: #000 !important;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd {padding: 0.5rem 1.5rem 1rem;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row:first-child {border-bottom: 1px solid #d9d9d9;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row:last-child {margin-top: -1px;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6 {padding: 0;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6:first-child {border-right: 1px solid #d9d9d9;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6:last-child {margin-left: -1px;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6 &gt; a {padding: 1rem; font-size: 1.25rem; font-weight: 700;} #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6 &gt; a:hover, #layout_top_banner_wrap &gt; ul &gt; li:first-child .card.h-100 dl &gt; dd &gt; .row &gt; .col-6 &gt; 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 &gt; * {padding-left: 0.5rem; padding-right: 0.5rem;} #layout_top_banner_wrap a &gt;.card &gt; .card-body {padding: 0.75rem 2rem;} #layout_top_banner_wrap a &gt; .card &gt; .card-body &gt; span {font-size: 1.375rem;} #layout_top_banner_wrap a &gt; .card &gt; .card-body &gt; span &gt; i {color: #3366b9; margin-right: 1.25rem; font-size: 1.75rem;} #layout_top_banner_wrap a &gt; .card &gt; .card-body &gt; span &gt; em {font-weight: 700;} #layout_top_banner_wrap a:hover &gt; .card &gt; .card-body &gt; span &gt; em {color: #3366b9;} #layout_top_banner_wrap dl {margin-bottom: 0;} #layout_top_banner_wrap dl &gt; dt {font-size: 1.25rem;} #layout_top_banner_wrap dl &gt; dt &gt; span {font-size: 0.9rem; color: #3366B9;} #layout_top_banner_wrap dl &gt; dd {font-size: 0.9rem;} #layout_top_banner_wrap &gt; dl &gt; dt {font-size: 2rem;} #layout_top_banner_wrap &gt; dl &gt; dd {margin-top: 1.5rem;} .layout_top_banner_btn_lst {display: flex; justify-content: space-between; gap: 1.5rem;} .layout_top_banner_btn_lst &gt; li {flex: 1;} .layout_top_banner_btn_lst &gt; li &gt; a {display: block;} .layout_top_banner_btn_lst &gt; li &gt; a &gt; div {display: block; width: 150px; height: 150px; position: relative; background-color: #fff; border-radius: 50%; overflow: hidden; box-shadow: 2px 2px 3px rgba(0,0,0,0.15);} .layout_top_banner_btn_lst &gt; li &gt; a &gt; div &gt; img {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; object-fit: contain;} .layout_top_banner_btn_lst &gt; li &gt; a &gt; p {font-size: 1.25rem; text-align: center; font-weight: 500; margin-top: 0.5rem; width: 150px;} .layout_top_banner_btn_lst &gt; li &gt; a:hover &gt; div &gt; img {transform: translate(-50%, -50%) scale(1.5); transition: all 0.3s ease-in-out;} .layout_top_banner_btn_lst &gt; li &gt; a:hover &gt; p {font-weight: bold;} /* 메인 고객 만족 평가 */ .main_cus_satft_eval_form_wrap {margin-top: 2rem; margin-bottom: 1.5rem;} .main_cus_satft_eval_form {background-image: url("/common/css/images/cus_satft_eval_img.png"); width: 100%; height: 175px; position: relative; box-shadow: 3px 3px 3px rgba(0,0,0,0.2); background-repeat: no-repeat; background-position-x: -5rem; background-position-y: center; background-color: #f2f2f2;} .main_cus_satft_eval_form &gt; .main_cus_satft_eval_cont {width: 65%; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);} .main_cus_satft_eval_form &gt; .main_cus_satft_eval_cont &gt; p {font-size: 1.5rem; font-weight: 300;} .main_cus_satft_eval_star_point {color: #ddd;} .main_cus_satft_eval_star_point_checked {position: absolute; top: 0; left: 0; color: #ffbc00; width: 100%; overflow: hidden; white-space: nowrap;} .main_cus_satft_eval_btn {border-radius: 2rem; padding: 0.375rem 1.25rem; background-color: #8a8a8a; color: #fff;} .main_cus_satft_eval_btn_wrap {position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);} .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 &gt; .card-body, .make_qust_apl_fn .card &gt; .card-body {background-color: #fff;} .keep_mngt_apl_fn .card &gt; .card-body &gt; h4 + p, .make_qust_apl_fn .card &gt; .card-body &gt; 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 &gt; div {width: 100px; margin: 0 auto; text-align: left;} .login_type &gt; div &gt; span {vertical-align: sub; margin-left: 0.25rem;} /* 메인페이지 공통 타이틀 */ .main-section-body &gt; dl {margin-bottom: 0;} .main-section-body &gt; dl &gt; dt {font-size: 1.75rem;} .main-section-body &gt; dl &gt; dd {margin-top: 0.5rem;} /* 메인 - 상품 구매 */ .main_prd_lst {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; grid-auto-rows: 1fr;} .main_prd_lst .card {height: 100%;} .main_prd_lst .card &gt; .card-body {padding: 1.25rem 1.25rem 3rem; height: 100%;} .main_prd_lst .card &gt; .card-body a.btn {position: absolute; bottom: 1.25rem; left: 1.25rem;} .main_body .dnt_prd_lst_img_wrap {background-color: #fff; border-radius: 50%; width: 40%; padding-bottom: 40%; height: 0; overflow: hidden; box-shadow: 2px 2px 3px rgba(0,0,0,0.15);} .main_body .dnt_prd_lst_img_wrap &gt; img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; height: 85%; object-fit: contain;} .main_body .dnt_prd_lst_img_wrap:before, .main_body .dnt_prd_lst_img_wrap:after {z-index: 1;} .main_body .dnt_prd_lst_cont &gt; dl {margin-top: 0.5rem;} .main_body .dnt_prd_lst_cont &gt; dl &gt; dt {font-size: 1.25rem;} .main_body .dnt_prd_lst_cont &gt; dl &gt; dd {margin-top: 0.25rem;} .dafl_badge + .dafl_badge {margin-left: 0.25rem;} .dafl_badge {padding: 0.25rem 0.35rem; font-size: 0.75rem; font-weight: bold; position: relative; z-index: 1;} .dafl_badge.dafl_sharp_prd {border: 1px solid #162b7d; color: #162b7d; background-color: #f3f6ff;} .dafl_badge.dafl_prd {border: 1px solid #09c7c7; background-color: #ecffff; color: #09c7c7;} .dafl_badge.eco_prd {border: 1px solid #2cb12c; color: #2cb12c; background-color: #f2fff2;} /* 최근 설치 내역 */ .layout_dafl_board_title &gt; h5 {font-weight: bold;} /* 메인 - 고객 리뷰 */ .usr_rvw_point_wrap dl {margin-bottom: 0;} .main_body .usr_rvw_form_top_left_form {width: 250px; text-align: center;} /* 메인 - 하단배너 */ #layout_dafl_bottom_banner_wrap a {box-shadow: 0px 0px 4px rgba(0,0,0,0.35);} /* 배송지 검색 팝업 */ .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 &gt; div &gt; .text-secondary {background-color: #318989; color: white !important; cursor: pointer;} .cmn_srch_addr_item_wrap .cmn_srch_addr_item:hover &gt; div &gt; 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 &gt; li, .divy_tm_det_guid_btn_wrap ul &gt; li span {font-size: 1rem;} .divy_tm_det_guid_btn_wrap li &gt; 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 &gt; .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 &gt; li {list-style: none;} #pinfoAgrFormWrap .pinfo_agr_form &gt; dl {margin-bottom: 2rem;} #pinfoAgrFormWrap .pinfo_agr_form &gt; dl &gt; dt {font-size: 1.125rem;} #pinfoAgrFormWrap .pinfo_agr_form &gt; dl &gt; 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 &gt; p, #pinfoAgrFormWrap .pinfo_agr_text_form &gt; ul &gt; li {margin-bottom: 0.25rem;} #pinfoAgrFormWrap .pinfo_agr_text_form &gt; ul &gt; li &gt; dl &gt; dt {font-weight: 500;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap {margin-top: 1.5rem;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap &gt; ul {text-align: center;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap &gt; ul &gt; li {display: inline-block; padding: 0rem 0.5rem;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap &gt; ul &gt; li &gt; label {cursor: pointer;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap &gt; ul &gt; li &gt; label &gt; input {display: inline-block; width: 20px; height: 20px; margin-right: 0.25rem; cursor: pointer; vertical-align: middle;} #pinfoAgrFormWrap .pinfo_agr_btn_wrap &gt; ul &gt; li &gt; label &gt; span {font-size: 1.125rem; display: inline-block; vertical-align: middle;} /* 고객 리뷰 */ .usr_rvw_form_top_wrap .card-body {padding: 1.25rem; border-radius: 0;} .usr_rvw_form_top_wrap .card-body dl {margin-bottom: 0;} .usr_rvw_form_top_wrap .card-body &gt; ul &gt; li:last-child {padding-left: 2rem;} .usr_rvw_form_top_wrap .card-body &gt; ul &gt; li &gt; dl {text-align: center; border-right: 2px solid #ddd;} .usr_rvw_form_top_wrap .card-body &gt; ul &gt; li &gt; dl &gt; dd {margin-top: 0.5rem;} .usr_rvw_form_top_wrap .card-body &gt; ul &gt; li &gt; dl &gt; dd i {font-size: 1.75rem;} .usr_rvw_point_wrap &gt; li {padding: 0 0.5rem;} .usr_rvw_point_wrap &gt; li &gt; dl &gt; dt {position: relative; height: 80px;} .usr_rvw_point_wrap &gt; li &gt; dl &gt; dt &gt; div:not(.usr_rvw_cnt) {width: 6px; border-radius: 2rem; margin: 0 auto; left: 50%; transform: translateX(-50%);} .usr_rvw_point_wrap &gt; li &gt; dl &gt; 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: #3366b9; height: 0px; bottom: 0;} .usr_rvw_bst_point_checked {position: absolute; background-color: #3366b9; height: 0px; bottom: 0;} .usr_rvw_form_main_menu {margin-top: 3rem;} .usr_rvw_form_main_menu &gt; li &gt; a {font-size: 1.125rem; font-weight: 300; color: #000;} .usr_rvw_form_main_menu &gt; li.active &gt; a {font-weight: 500; color: #162b7d;} .usr_rvw_form_main_menu &gt; li:not(:first-child):before {content: "·"; display: inline-block; margin-right: 0.5rem;} .usr_rvw_form_main_card_wrap {border-top: 1px solid #000; margin-top: 0.5rem; padding-top: 1rem;} .usr_rvw_form_main_card_wrap &gt; ul {margin-left: -0.5rem; margin-right: -0.5rem;} .usr_rvw_form_main_card_wrap &gt; ul &gt; li {padding: 0.5rem;} .usr_rvw_form_main_card_wrap &gt; ul &gt; li &gt; .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 &gt; ul &gt; 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: 0.9rem;} .main_body .usr_rvw_form_main_card_star {font-size: 1.25rem;} .usr_rvw_form_main_card_cus_info &gt; li:first-child {padding-right: 0.5rem;} .usr_rvw_form_main_card_cus_info &gt; 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 &gt; 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 &gt; ul {display: inline-block;} .usr_rvw_form_main_top_wrap &gt; p {display: inline-block; margin-left: 0.5rem; vertical-align: sub; line-height: 26px; font-size: 0.9rem; color: #6c757d;} .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 &gt; ul &gt; li:first-child {width: 1.5rem;} .dafl_usr_rvw_rply_form &gt; ul &gt; li &gt; dl {margin-bottom: 0;} .dafl_usr_rvw_rply_form &gt; ul &gt; li &gt; dl &gt; dd.main {text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden;} /* 표준 보상안 */ .std_cpst_lst dl {margin-bottom: 0;} .std_cpst_lst &gt; ul &gt; li &gt; dl {padding: 1rem;} .std_cpst_lst &gt; ul &gt; li &gt; dl &gt; 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 &gt; .card-body {padding: 1rem 2.5rem;} .divy_recv_optn_info ul &gt; 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 &gt; i {font-size: 2.5rem; color: #39bfbf; width: 50px; font-weight: 500; margin-right: 1rem;} .divy_recv_optn_info .divy_recv_optn_item &gt; dl {margin-bottom: 0;} .divy_recv_optn_info .divy_recv_optn_item &gt; dl &gt; dt {font-size: 1.375rem;} .divy_recv_optn_info .divy_recv_optn_item &gt; dl &gt; 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 {display: grid; grid-template-columns: repeat(10, 1fr); gap: 1.5rem 1rem; margin-left: 0 !important; margin-right: 0 !important;} .main_instl_photo_lst &gt; li {position: relative; padding-right: 0rem !important; padding-left: 0rem !important; display: block; padding-top: 0.5rem; overflow-x: hidden;} .main_instl_photo_lst &gt; li &gt; a {padding-bottom: calc(100% - 2px); position: relative; background-size: cover; background-repeat: no-repeat;} .main_instl_photo_lst &gt; li &gt; a:after {content: ""; width: 100%; height: 100%; position: absolute; backdrop-filter: blur(1px); border-radius: 1rem;} .main_instl_photo_lst &gt; li &gt; a + span.badge {font-size: 0.85rem; padding: 0.375rem 0.5rem; font-weight: 500; top: 0 !important;} /* 고객소통함 */ .form_surv_wrap ul {margin-top: 0.5rem;} .form_surv_wrap ul &gt; li {display: inline-block;} .form_surv_wrap ul &gt; li:last-child {margin-left: -1px;} .form_surv_wrap ul &gt; li &gt; label {cursor: pointer; display: inline-block; padding: 0.5rem 4rem; border: 1px solid #dedede; background-color: #fff; position: relative;} .form_surv_wrap ul &gt; li &gt; label:hover {border-color: #3366B9; color: #3366B9; z-index: 2;} .form_surv_wrap ul &gt; li:first-child &gt; label {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .form_surv_wrap ul &gt; li:last-child &gt; label {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .form_surv_wrap ul &gt; li &gt; label &gt; i {position: absolute; font-size: 1.25rem; top: 50%; left: 2.5rem; transform: translate(-50%, -50%); display: none;} .form_surv_wrap ul &gt; li &gt; input:checked + label &gt; i {display: block;} .form_surv_wrap ul &gt; li &gt; input {display: none;} .form_surv_wrap ul &gt; li &gt; 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 &gt; dl &gt; dt {font-size: 2rem;} .dafl_divy_sta_words &gt; dl &gt; dd {margin-top: 0.5rem; font-size: 1.25rem; font-weight: 500;} .dafl_divy_sta_info {margin-top: 3rem;} .dafl_divy_sta_info &gt; li &gt; 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 &gt; li.active &gt; span {background-color: #162b7d; color: #fff; font-weight: 700;} .dafl_divy_sta_det_info &gt; .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 &gt; .card &gt; .card-body {background-color: transparent;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body h4 {margin-bottom: 0;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul {margin-top: 1.5rem;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li:not(:first-child) {margin-top: 1rem;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl {font-size: 1.125rem;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dt {font-weight: 500; white-space: nowrap; } .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul:not(.dafl_divy_sta_det_info_top_lst) &gt; li &gt; dl &gt; dt {width: 120px;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd &gt; ul &gt; li:not(:first-child) {margin-top: 0.5rem;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd span {font-weight: 500;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd span &gt; em {margin-left: 0.25rem; color: #333; font-weight: 400;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd &gt; ul &gt; li &gt; span &gt; em {color: #959ecb;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd &gt; ul.d-table &gt; li:last-child {width: 120px; text-align: right;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd &gt; ul.d-table &gt; li:last-child &gt; 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 &gt; li &gt; a.btn {border-radius: 0;} .dafl_divy_sta_det_info &gt; .card &gt; .card-body &gt; ul.dafl_divy_sta_det_info_top_lst &gt; li &gt; dl &gt; dd span &gt; em {margin-left: 0.75rem; font-size: 1rem;} /* 배송신청하기 */ .dafl_mngt_divy_form span.text-danger {display: none;} .dafl_mngt_divy_form_btn_group &gt; li {display: inline-block;} .dafl_mngt_divy_form_btn_group &gt; li:not(:first-child) {margin-left: -1px;} .dafl_mngt_divy_form_btn_group &gt; li:first-child &gt; a {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .dafl_mngt_divy_form_btn_group &gt; li:last-child &gt; a {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .dafl_mngt_divy_form_btn_group &gt; li &gt; 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 &gt; li &gt; a:hover {border-color: #000; z-index: 1;} .dafl_mngt_divy_form_btn_group &gt; li &gt; a:hover, .dafl_mngt_divy_form_btn_group &gt; li &gt; a:focus {opacity: 1;} .dafl_mngt_divy_form_btn_group &gt; li &gt; a.active {font-weight: 500; border-color: #000; z-index: 1;} .dafl_mngt_prd_optn &gt; ul &gt; li {padding: 0; display: inline-block; position: relative;} .dafl_mngt_prd_optn &gt; ul &gt; li &gt; 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 &gt; ul &gt; li &gt; label:hover {border-color: #3366B9; color: #3366B9; z-index: 0;} .dafl_mngt_prd_optn &gt; ul &gt; li &gt; 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 &gt; ul &gt; li &gt; div &gt; i {color: #fff; position: absolute; top: -17px; right: -17px;} /* .dafl_mngt_prd_optn &gt; ul &gt; li:first-child &gt; label {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .dafl_mngt_prd_optn &gt; ul &gt; li:last-child &gt; label {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} */ .dafl_mngt_prd_optn &gt; ul &gt; li:not(:first-child) {margin-left: 0.75rem;} .dafl_mngt_prd_optn &gt; ul &gt; li &gt; input[type="checkbox"] {display: none;} .dafl_mngt_prd_optn &gt; ul &gt; li &gt; 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 &gt; ul &gt; li &gt; input[type="checkbox"]:checked ~ div {display: block;} .dafl_mngt_prd_optn_det_form {padding-top: 0.5rem;} .dafl_mngt_prd_optn_det_form &gt; div {margin-top: 1rem;} .dafl_mngt_prd_optn_det_form .card {border: 0;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body {background-color: #f2f2f27f; position: relative;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body &gt; ul &gt; li:first-child {vertical-align: top; width: 100px; text-align: center; padding-right: 1.25rem;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body &gt; ul &gt; li:first-child &gt; a {display: inline-block; padding: 0.5rem;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body &gt; ul &gt; li:first-child i {color: #ff9797; font-size: 2rem; display: inline-block;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dt {font-size: 1.25rem;} .dafl_mngt_prd_optn_det_form .card &gt; .card-body &gt; ul &gt; li &gt; dl &gt; dd dl &gt; dt {font-weight: 500;} .articl_divy_qt_lst &gt; 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;} .cupn_bas_btn strong {text-decoration: underline;} /* 신청 - 회원 혜택 */ .usr_dis_bnft_info_wrap .card {border-radius: 0.5rem; overflow: hidden;} .usr_dis_bnft_info_wrap .card &gt; .card-header {display: flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: #F4F9FF; border-bottom: 0; padding: 1.125rem;} .usr_dis_bnft_info_wrap .card &gt; .card-header h5 {color: #004596; font-weight: bold;} .usr_dis_bnft_info_wrap .card &gt; .card-body {padding: 1.5rem; text-align: center;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; img {width: 2rem; height: 2rem; margin-bottom: 0.5rem;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; p {font-size: 1.125rem; line-height: 1.5;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; ul {display: flex; justify-content: center; align-items: center; gap: 1.5rem;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; ul &gt; li {line-height: 1.5; font-size: 1.125rem; position: relative;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; ul &gt; li:not(:first-child)::before {content: ""; position: absolute; top: 50%; left: -0.75rem; transform: translateY(-50%); width: 1px; height: 1.25rem; background-color: #000; opacity: 0.25;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; p strong {font-weight: 700;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; p strong.text-primary-type_02 {color: #004596; font-weight: 700;} .usr_dis_bnft_info_wrap .card &gt; .card-body &gt; ul &gt; li strong {color: #004596; font-weight: 700;} .usr_dis_bnft_info_ico {width: 1.5rem; height: 1.5rem;} .usr_dis_bnft_info_pric_wrap {display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 1.125rem;} .usr_dis_bnft_info_pric_wrap &gt; span {padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: #F0F0F0;} .usr_dis_bnft_info_pric_wrap &gt; span.price_discounted_wrap {background-color: #E6F1FF; color: #004596; font-weight: 700;} .usr_dis_bnft_info_bottom {margin-top: 1.5rem;} /* 고객 신청 공통 폼 */ .dafl_mngt_cus_apl_form {padding: 0.5rem;} .dafl_mngt_cus_apl_form &gt; dt {font-size: 1.75rem; font-weight: 500;} .dafl_mngt_cus_apl_form &gt; dd {margin-top: 1rem;} .dafl_mngt_cus_apl_form &gt; dd &gt; table {border-top-color: #000; border-bottom-color: #c4c4c4;} .dafl_mngt_cus_apl_form &gt; dd &gt; table &gt; tbody &gt; tr &gt; th {font-size: 1.25rem; font-weight: 300;} .dafl_mngt_cus_apl_form &gt; dd &gt; table &gt; tbody &gt; tr &gt; td {text-align: left; padding: 0.5rem 1.5rem;} .dafl_mngt_cus_apl_form &gt; dd &gt; table &gt; tbody &gt; tr &gt; td &gt; div {width: 450px;} .dafl_mngt_cus_apl_form &gt; dd &gt; table &gt; tbody &gt; tr &gt; td &gt; div.input-group {width: 100%;} /* 최근 이용 문구 다이얼로그 */ .dalf_mngt_ltst_use_words_lst {margin-top: 1.5rem;} .dalf_mngt_ltst_use_words_lst &gt; li:not(:first-child) {margin-top: 0.75rem;} .dalf_mngt_ltst_use_words_lst &gt; li {padding: 1.25rem 1rem; border-radius: 0.75rem; border: 1px solid #c7c7c7; cursor: pointer;} .dalf_mngt_ltst_use_words_lst dl {margin-bottom: 0;} .fl_ribbon_sample_dialog {padding: 1.5rem !important;} /* 깃발 상세 */ ul &gt; li.dafl_mngt_flag_det_lst:nth-child(2n - 1) {padding-right: 0.5rem;} ul &gt; 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 &gt; .ui-checkboxradio-label:not(:nth-child(5n)) {margin-right: 0.75rem;} .cdlcSrvSttlAmtLstWrap &gt; .ui-checkboxradio-label:nth-child(n+16) {margin-bottom: 0;} .cdlcSrvSttlAmtLstWrap &gt; .ui-checkboxradio-label:nth-child(5n) {margin-right: -1px;} .cdlcSrvSttlAmtLstWrap &gt; .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 &gt; dl &gt; 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 &gt; dt {font-weight: 700 !important;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-radio-label.ui-checkboxradio-checked .orig_pr {color: #000;} .cdlcSrvSttlAmtLstWrap .orig_pr {text-decoration:line-through;} /* 배송설치요청 깃발검색 */ .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 &gt; 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 &gt; 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 &gt; dt {font-size: 1.875rem;} .frame_wrth_intro_top_cont dl &gt; dd {margin-top: 1.75rem;} .frame_wrth_intro_top_cont dl &gt; dd &gt; ul &gt; li:first-child {font-size: 1.25rem; font-weight: bold;} .frame_wrth_intro_top_cont dl &gt; dd &gt; ul &gt; 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 &gt; li:not(:first-child) {margin-top: 1rem;} .frame_wrth_intro_main_info_lst &gt; li &gt; dl &gt; dt {font-weight: 400} .frame_wrth_intro_main_info_lst &gt; li &gt; dl &gt; 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 &gt; ul &gt; li &gt; dl &gt; dt {font-weight: 500; font-size: 1.25rem;} .frame_wrth_use_ex_form_wrap &gt; ul &gt; li &gt; dl &gt; 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 &gt; li:not(:first-child) {margin-top: 3rem;} /* 작품 사진 목록 */ /* .prdt_photo_det_lst {display: grid; grid-template-columns: repeat(3, 1fr);} */ .prdt_photo_det_lst &gt; li {display: inline-block; width: calc(100% / 3); padding: 0.625rem; vertical-align: top;} .prdt_photo_det_lst &gt; li:nth-child(n+4) {margin-top: 1.25rem;} .prdt_photo_det_lst &gt; li &gt; a:focus {opacity: 1;} .prdt_photo_det_lst &gt; li &gt; a:hover {filter: brightness(1.1);} .prdt_photo_det_lst &gt; li &gt; 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 &gt; li &gt; 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_app_dl_guid_form_logo &gt; 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 &gt; 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 &gt; img {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 400px;} .dafl_app_dl_guid_form_btn_lst {margin-top: 1rem;} .dafl_app_dl_guid_form_wrap .dafl_app_dl_guid_form_btn_lst &gt; ul {margin-left: -0.625rem;} .dafl_app_dl_guid_form_wrap .dafl_app_dl_guid_form_btn_lst &gt; ul &gt; 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 &gt; i {font-size: 2.5rem;} .dafl_app_intro_page_mv_btn &gt; span {font-weight: bold; margin-left: 0.5rem;} .dafl_app_dl_btn {display: block;} .dafl_app_dl_btn &gt; 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 &gt; 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 &gt; i {font-size: 1rem;} .dafl_top_header .daquick_hp_mv_btn &gt; 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 &gt; 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 &gt; i {font-size: 1.25rem;} .dafl_top_header .dafl_app_intro_page_mv_btn &gt; 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 &gt; 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 dl &gt; dt {font-size: 1.25rem !important} .app_dl_guid_info .dafl_app_dl_guid_form_cont dl &gt; dd {font-size: 1rem; margin-top: 0.5rem;} .dafl_app_dl_guid_det_info_wrap {margin-top: 5rem} .dafl_app_dl_guid_det_info_wrap &gt; dl &gt; dt {font-size: 2rem; text-align: center;} .dafl_app_dl_guid_det_info_wrap &gt; dl &gt; dd {margin-top: 4rem;} .dafl_app_dl_guid_det_info &gt; li {width: 50%; position: relative; vertical-align: top} .dafl_app_dl_guid_det_info &gt; li &gt; img {width: 45%; position: relative; z-index: 1; display: inline-block;} .dafl_app_dl_guid_det_info &gt; li &gt; .card {display: inline-block; position: absolute;} .dafl_app_dl_guid_det_info &gt; li &gt; .card &gt; .card-body {font-weight: bold; font-size: 1.125rem; line-height: 2.25rem; white-space: nowrap;} .dafl_app_dl_guid_det_info &gt; li:first-child &gt; .card {top: 10%; left: 35%;} .dafl_app_dl_guid_det_info &gt; li:first-child &gt; .card &gt; .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 &gt; li:last-child {margin-top: 6rem; text-align: right;} .dafl_app_dl_guid_det_info &gt; li:last-child &gt; .card {bottom: 10%; right: 35%;} .dafl_app_dl_guid_det_info &gt; li:last-child &gt; .card &gt; .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 &gt; img {width: 300px; right: 2.5rem; top: 50%;} } /** 액자화환 */ .divyFrameWrthLst &gt; li &gt; dl &gt;dt, .divyFrameWrthLst &gt; li &gt; dl &gt;dd{display: block;line-height: inherit;} .divyFrameWrthLst &gt; li &gt; dl &gt;dd {margin-top: 1rem;} .divyFrameWrthLst &gt; li &gt; dl &gt;dt&gt;em{border:3px solid #004596;padding: 1px 10px; color: #004596; margin-right: 0.5rem;vertical-align: middle;} .divyFrameWrthLst &gt; li &gt; dl &gt;dt&gt;span{font-size: 1.25rem;vertical-align: middle;} .divyFrameWrthLst .divyFrameWrthImgWrap{background: #EEE;padding: 1rem;border:1px solid #EEE; border-radius: 0.25rem;} .divyFrameWrthLst .divyFrameWrthImgWrap &gt; img{border-radius: 0.25rem;width: 100%;} .divyFrameWrthLst .divyFrameWrthImgWrap &gt; p{margin-top: 0.5rem;font-weight: bold; font-size: 0.9rem; word-break: keep-all;} .divyFrameWrthLst .divyFrameWrthImgList img{border-radius: 0.25rem;width: 100%;} .frame_wrth_lst_wrap &gt; ul {margin-top: 1.5rem;} .frame_wrth_lst_wrap &gt; ul &gt; li:not(:first-child) {margin-top: 3rem;} .frame_wrth_lst_wrap &gt; ul &gt; li &gt; dl &gt; dt {display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.5rem;} .frame_wrth_lst_wrap &gt; ul &gt; li &gt; dl &gt; dt &gt; em {margin-top: 0.25rem;} .frame_wrth_lst_wrap &gt; ul &gt; li &gt; dl &gt; dt span {font-size: 1.25rem; margin-bottom: 0.25rem; display: inline-block;} .frame_wrth_lst_wrap &gt; ul &gt; li &gt; dl &gt; dt p {font-weight: 400;} .divy_frame_wrth_lst_item_wrap {display: flex; justify-content: flex-start; align-items: center; gap: 2rem;} .divy_frame_wrth_lst_item_wrap &gt; div:first-of-type {flex: 1;} .divy_frame_wrth_lst_item_wrap &gt; div:last-of-type {flex: 3;} /** 친환경상품 */ .dntPrdLst &gt; li{width: 50%; float: left;padding: 0.5rem;} .dntPrdLst &gt; li:after{content: "";clear: both;display: block} .dntPrdLst &gt; li &gt; dl &gt;dt, .dntPrdLst &gt; li &gt; dl &gt;dd{display: block;line-height: inherit; padding: 0.5rem;} .dntPrdLst &gt; li &gt; dl &gt;dt h5 em{border:3px solid #0dc7c7;padding: 1px 10px; color: #0dc7c7; margin-right: 0.5rem;vertical-align: middle;} .dntPrdLst &gt; li &gt; dl &gt;dt h5 span{font-size: 1.8rem;vertical-align: middle;} .dntPrdLst &gt; li .no-image{background-color: #EEE;height: 220px;display: block;padding: calc( 50% - 48px ) 0;text-align: center;border:1px solid #DDD;} /* 배송상태 - 액자화환 */ .frame_wrth_top_img {width: 55%; margin: 0 auto; border-radius: 0.5rem; box-shadow: 0px 0px 5px 3px rgba(0,0,0,9%); overflow: hidden;} .frame_wrth_body_img_wrap {width: 50%; margin: 0 auto; position: relative;} .frame_wrth_body_img_wrap .frame_wrth_frame_img {width: 100%; position: relative;} .frame_wrth_body_img_wrap .frame_wrth_det_img {width: 70%; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%);} .divy_sta_img_lst_wrap .frame_wrth_frame_body_img {display: block; width: 60%; margin: 0 auto;} /* 배송설치요청 - 신청방법 선택 */ .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 &gt; img {width: 60px; position: absolute; top: 0; left: 0; transform: translate(-50%, -30%);} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body {display: table; table-layout: fixed; width: 100%; padding: 1.5rem 2rem;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; * {display: table-cell; vertical-align: top;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body .divyFrameWrthImgWrap {border: 5px solid #fff; padding: 0.75rem;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body .divyFrameWrthImgWrap p {word-break: keep-all; font-size: 0.8rem;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:first-child {width: 151px;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:last-child {padding-left: 2rem;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:last-child p {font-size: 1.25rem; margin-top: 1.5rem; font-weight: 500;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:last-child dl {margin-top: 0.5rem; margin-bottom: 0;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:last-child dl &gt; dt {font-size: 1.375rem;} .divy_frame_wrth_optn_form_wrap .card &gt; .card-body &gt; div:last-child dl &gt; dd {font-size: 1.25rem; margin-top: 0.5rem;} .divy_frame_wrth_optn_form_wrap &gt; 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 &gt; *, .pinfo_clct_util_agr_info_lst ul &gt; * {list-style: none;} .pinfo_clct_util_agr_info_lst &gt; li {margin-top: 3rem;} .pinfo_clct_util_agr_info_lst &gt; li &gt; dl &gt; dt {font-size: 1.375rem;} .pinfo_clct_util_agr_info_lst &gt; li &gt; dl &gt; dd {margin-top: 1.5rem;} .pinfo_clct_util_agr_info_lst &gt; li &gt; ul &gt; li {margin-top: 1.25rem;} .pinfo_clct_util_agr_info_lst &gt; li &gt; ul &gt; li &gt; dl &gt; dt {font-size: 1.125rem; font-weight: 500;} .pinfo_clct_util_agr_info_lst &gt; li &gt; ul &gt; li dl &gt; dt {font-weight: 500;} .pinfo_clct_util_agr_info_lst &gt; li &gt; ul &gt; li &gt; dl &gt; dd {margin-top: 0.75rem;} .pinfo_clct_util_agr_info_lst table {table-layout: fixed;} .pinfo_clct_util_agr_info_lst table &gt; tbody &gt; tr &gt; th, .pinfo_clct_util_agr_info_lst table &gt; tbody &gt; tr &gt; 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 &gt; tbody &gt; tr &gt; td ul &gt; li:not(:first-child) {margin-top: 0.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst &gt; li {margin-top: 1.5rem;} .pinfo_agr_text_form .pinfo_clct_util_agr_info_lst &gt; li &gt; dl &gt; 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 {max-height: 500px; overflow-y: scroll;} /* 개인정보처리방침 개정 내용 팝업 */ .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 &gt; thead &gt; tr &gt; th {border-bottom-width: 1px;} .pinfo_proc_meth_info_fixed_form table &gt; tbody &gt; tr &gt; td {font-size: 0.9rem; word-break: break-all; text-align: left; vertical-align: top;} .pinfo_proc_meth_info_fixed_form table table &gt; tbody &gt; tr &gt; td {vertical-align: middle;} .pinfo_proc_meth_info_fixed_form dl &gt; dd dl &gt; dt {font-weight: 400;} /* 친환경 기부상품 상품소개 */ .dnt_prd_info &gt; ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;} .dnt_prd_info &gt; ul &gt; li {width: 100%; padding: 0;} .dnt_prd_info &gt; ul &gt; 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 &gt; .card-body {position: relative; background-color: transparent; padding: 1.5rem 2rem; display: flex; align-items: center; height: 100%;} .dnt_prd_info .card &gt; .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 &gt; 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 &gt; dl &gt; dt {font-size: 1.75rem;} .dnt_prd_info .dnt_prd_lst_cont &gt; dl &gt; 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_lst_info_pric + .dnt_prd_lst_info_pric {margin-top: 0.5rem;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span {font-weight: bold; font-size: 1.125rem; color: #000;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span:nth-child(1) {text-decoration: line-through;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span:nth-child(2) {margin-left: 0.375rem; margin-right: 0.375rem;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span:nth-child(3) {color: #dc3545; font-size: 1.25rem;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span:nth-child(3) &gt; em {font-size: 1rem; margin-left: 0.25rem; display: inline-block; vertical-align: top;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; span:last-of-type {text-decoration: none; font-size: 1.125rem;} .dnt_prd_info .dnt_prd_lst_info_pric &gt; 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 &gt; li {position: relative; text-align: center; min-width: 5rem;} .addn_ty_lst_preview &gt; li &gt; 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 &gt; li &gt; span {color: #000; font-weight: 500; font-size: 0.85rem;} .addn_ty_lst_preview &gt; li &gt; 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 &gt; li &gt; em &gt; 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 &gt; a.btn {position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); border-radius: 3rem !important; width: 300px; max-width: 100%;} .JS-addnTyLstButtonSetWrap &gt; ul{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; grid-auto-rows: 1fr;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label{background: none;border:1px solid #DDD;position: relative;display: block; font-weight: 500; font-family: "Noto Sans KR", sans-serif; height: 100%;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label &gt; .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 &gt; ul &gt; li &gt; label:hover, .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label.ui-state-active {border:1px solid #6288d6;color:#000;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label.ui-state-active {border:1px solid #3366b9 !important; background-color: #3366b91a !important; color: #000 !important;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label &gt; .ui-checkboxradio-icon-space{position: absolute;right:2px;top:-5px; z-index: 2;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label &gt; .ui-checkboxradio-icon-space:after{content: "\f058";font-family: "Font Awesome 5 Pro";font-weight: 300;color: #ddd;font-size: 2em;} .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label.ui-state-active &gt; .ui-checkboxradio-icon-space:after{content: "\f058";font-family: "Font Awesome 5 Pro";font-weight: 900;color: #2cb12c;font-size: 2em;} .dnt_prd_divy_instl_req_form label {cursor: pointer;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap {display: block; width: 100%;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label {font-size: 1.125rem;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label:hover {opacity: 1; background-color: transparent; color: #000; position: relative;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label:focus {box-shadow: none;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap .ui-checkboxradio-det-view-btn {display: none;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label &gt; .ui-icon-background {width: 100%; height: 0; padding-bottom: 125%; background-size: contain; margin-bottom: 0.5rem; background-color: transparent;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label:not(.ui-state-disabled):hover:before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #000000b3; z-index: 1;} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label:not(.ui-state-disabled):hover:after {content: ""; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; text-align: center; z-index: 11; white-space: normal; font-weight: 500; font-size: 1.125rem; line-height: 1.75rem; word-break: keep-all;} /* 근조 문구 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2001"]:not(.ui-state-disabled):hover:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 근조깃발입니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2005"]:not(.ui-state-disabled):hover:after {content: "리본이 있어 근조기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2105"]:not(.ui-state-disabled):hover:after {content: "근조기와 함께 홍삼과 위로 편지를 보내 유족에게 기운을 전해줄 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2205"]:not(.ui-state-disabled):hover:after {content: "근조기로 고인을 추모하고 고인이나 유족 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2004"]:not(.ui-state-disabled):hover:after {content: "고인의 평소사진이나 작품사진으로 고인을 추모하는 액자화환 입니다.";} /* 축하 문구 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1001"]:not(.ui-state-disabled):hover:after {content: "벨벳 재질에 이름을 새겨 당사에 보관된 축하깃발입니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1005"]:not(.ui-state-disabled):hover:after {content: "리본이 있어 축하기를 제작할 필요 없이 누구나 배송신청 가능합니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1205"]:not(.ui-state-disabled):hover:after {content: "축하기로 결혼을 축하하고 신랑신부 이름으로 어려운 이웃에게 쌀을 기부하실 수 있습니다.";} .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1004"]:not(.ui-state-disabled):hover:after {content: "결혼식 청첩장의 신랑 신부 사진이나 정기총회 등에서 지난 행사 사진 등으로 액자를 만들어 갤러리 같은 분위기 연출로 행사 분위기를 올려줍니다.";} /* 문구 없어서 예외 처리 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1002"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1002"]:hover:after, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2002"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2002"]:hover:after, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2003"]:hover:before, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2003"]:hover:after {display: none;} /* 친환경 뱃지*/ .ui-checkboxradio-create-icon-best-badge {position: absolute; top: 5px; left: 5px; z-index: 3; border: 1px solid #ff4947; color: #ff4947; background-color: #ffe8e8; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold;} .ui-checkboxradio-create-icon-best-badge + .ui-checkboxradio-icon-badge {left: 4.625rem;} .ui-checkboxradio-icon-badge {position: absolute; top: 5px; left: 5px; z-index: 2; border: 1px solid #2cb12c; color: #2cb12c; background-color: #f2fff2; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold;} .ui-checkboxradio-icon-badge:after {content: "친환경"; display: inline-block;} .ui-checkboxradio-icon-badge.dafl{border: 1px solid #09c7c7;background-color: #ecffff; color: #09c7c7;} .ui-checkboxradio-icon-badge.dafl:after {content: "다아몬드플래그"; display: inline-block;} .ui-checkboxradio-create-icon-badge {position: absolute; top: 5px; left: 5px; z-index: 2; border: 1px solid #007bff; color: #007bff; background-color: #cbe4ffe0; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold;} .ui-checkboxradio-create-icon-badge:after {content: "다이아몬드플래그"; display: inline-block;} .dnt_prd_lst_cont .ui-checkboxradio-icon-badge {position: static; transform: none; display: inline-block;} /* 친환경 뱃지 예외 처리 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2002"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2016"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2026"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2036"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2046"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1016"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1026"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="2003"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap &gt; ul &gt; li &gt; label[data-product-code="1002"] .ui-checkboxradio-icon-badge {display: none;} /* 친환경 상품 소개 - 요금조회 다이얼로그 */ .dnt_prd_amt_info {font-family: "Noto Sans KR", sans-serif; padding: 1.25rem !important;} /* 가격안내 - 화환 */ .divy_flwr_pr_lst {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-height: 80vh; overflow-y: auto;} .divy_flwr_pr_lst.type_02 {grid-template-columns: repeat(3, 1fr);} .divy_flwr_pr_lst &gt; li .card {box-shadow: 1px 1px 3px rgba(0,0,0,0.15); border: 1px solid #ccc !important;} .divy_flwr_pr_lst &gt; li .card &gt; .card-body {background-color: transparent; padding: 0.75rem;} .divy_flwr_pr_lst.type_02 &gt; li .card &gt; .card-body {padding: 0.5rem;} .divy_flwr_pr_lst &gt; li .divy_flwr_pr_lst_img_wrap {width: 60%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden; margin: 0 auto;} .divy_flwr_pr_lst &gt; li.type_02 .divy_flwr_pr_lst_img_wrap {width: 100%; height: 0; padding-bottom: 125%;} .divy_flwr_pr_lst &gt; li .divy_flwr_pr_lst_img_wrap &gt; img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; width: 100%; height: 100%;} .divy_flwr_pr_lst &gt; li dl {margin-top: 0.75rem; margin-bottom: 0; text-align: center;} .divy_flwr_pr_lst &gt; li dl &gt; dt {font-size: 1.25rem;} .divy_flwr_pr_lst.type_02 &gt; li dl &gt; dt {font-size: 1.125rem;} .divy_flwr_pr_lst &gt; li dl &gt; dd {margin-top: 0.25rem; font-weight: bold; font-size: 1.125rem;} .divy_flwr_pr_lst.type_02 &gt; li dl &gt; dd {font-size: 0.9rem;} .divy_flwr_pr_lst &gt; li dl &gt; dd &gt; span:nth-child(1) {text-decoration: line-through; color: #6c757d; font-weight: 500;} .divy_flwr_pr_lst &gt; li dl &gt; dd &gt; span:nth-child(2) {margin-left: 0.375rem; margin-right: 0.375rem;} .divy_flwr_pr_lst.type_02 &gt; li dl &gt; dd &gt; span:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .divy_flwr_pr_lst &gt; li dl &gt; dd &gt; span:nth-child(3) {color: #dc3545; font-size: 1.25rem;} .divy_flwr_pr_lst.type_02 &gt; li dl &gt; dd &gt; span:nth-child(3) {font-size: 1rem;} /* 배송설치요청 - 상품소개 */ .dnt_prd_divy_instl_req_form .label-amt, .dnt_prd_divy_instl_req_form .label-text {display: block; text-align: center;} .dnt_prd_divy_instl_req_form .label-amt &gt; em {font-weight: 500; font-size: 1rem;} .dnt_prd_divy_instl_req_form .label-text {font-weight: bold;} .dnt_prd_divy_instl_req_form .label-amt-fixed &gt; em {font-size: 0.9rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed &gt; em:nth-child(1) {text-decoration: line-through; color: #6c757d; font-weight: 500;} .dnt_prd_divy_instl_req_form .label-amt-fixed &gt; em:nth-child(2) {margin-left: 0.25rem; margin-right: 0.25rem;} .dnt_prd_divy_instl_req_form .label-amt-fixed &gt; em:nth-child(3) {font-size: 1rem; color: #dc3545;} /* 청구관리 */ .calc_dsc_main_top_tabs {margin-top: 3rem;} .calc_dsc_main_top_tabs .row {margin-left: -0.5rem; margin-right: -0.5rem;} .calc_dsc_main_top_tabs .row &gt; .col-6 {padding: 0 0.5rem;} .calc_dsc_main_top_tabs a {display: block; text-align: center; border: 1px solid #c2c2c2; font-weight: 400; font-size: 1.125rem; padding: 0.5rem 3rem; border-radius: 2rem;} .calc_dsc_main_top_tabs a.active {border-color: #3366b9; color: #3366b9; font-weight: 500; background-color: #e1e8f5;} .daflsharp_evt_info_popup {min-height: 600px !important; top: 0 !important;} /* 마이페이지 */ .dafl-mngt-main-wrap {margin-top: 1.5rem;} .dafl-mngt-main-wrap .card {border-radius: 0.5rem; overflow: hidden; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);} .dafl-mngt-main-wrap .card-body {padding: 2rem;} .dafl-mngt-main-wrap .dafl_mngt_main_top_title {font-size: 1.75rem; font-weight: 700;} .dafl-mngt-main-top-left .dafl_mngt_main_top_info {margin-top: 1.25rem; padding: 0.5rem 1rem; background-color: #fff; border-radius: 0.5rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_info a {display: block;} .dafl-mngt-main-top-left .dafl_mngt_main_top_info span {background-color: #162b7d; border-radius: 3rem; display: inline-block; text-align: center; padding: 0rem 0.5rem; color: #fff; font-weight: 500;} .dafl-mngt-main-top-left .dafl_mngt_main_top_info &gt; ul &gt; li:not(:first-child) {margin-left: 1rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap .card {overflow: visible;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap {margin-top: 1.25rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li {width: 50%;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li:first-child {padding-right: 0.5rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li:nth-child(2) {padding-left: 0.5rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li .card:hover {transform: translateY(-5px); transition: all 0.25s; box-shadow: 0px 2px 3px 2px rgba(0,0,0,0.2);} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li .card:hover &gt; .card-body {filter: brightness(1.15); background-color: #3366b91a;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li .card-body {padding: 0;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a {display: block; text-align: center; padding: 1.25rem; position: relative;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a:hover {opacity: 1;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; i {display: block; font-size: 2.5rem; color: #3366b9;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; span {display: inline-block; margin-top: 0.75rem; font-size: 1.125rem; font-weight: 500;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; dl {text-align: left;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; dl &gt; dt {font-weight: 500; font-size: 1.25rem; position: relative;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; dl &gt; dt &gt; i {position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); font-size: 1.5rem;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a &gt; dl &gt; dd {color: #797979; font-weight: 400; margin-top: calc(0.5rem + 1.29px); font-size: 0.9rem; letter-spacing: -0.4px;} .dafl-mngt-main-top-left .dafl_mngt_main_top_btn_wrap ul &gt; li a .dafl_speech_bubble_wrap {right: 0.25rem;} .dafl-mngt-main-top-right {padding-left: 1.25rem; vertical-align: top;} .dafl-mngt-main-top-right .dafl_mngt_main_top_title + div {margin-top: 1rem;} .dafl-mngt-main-top-right .dafl_mngt_main_top_bil_info {border-top: 1px solid #cfcfcf; margin-top: 1.5rem; padding-top: 1.625rem;} .dafl-mngt-main-top-right .dafl_mngt_main_top_bil_btn_group {margin-top: 1.5rem;} .dafl-mngt-main-top-right .dafl_mngt_main_top_bil_btn_group a.btn {display: block; border-radius: 0.5rem;} .dafl-mngt-main-top-right .dafl_mngt_main_top_bil_btn_group a.btn:not(:hover) {background-color: #fff;} .dafl-mngt-main-bottom-body {margin-top: 3rem;} /* 마이페이지 배송 예정 내역 카드폼 */ .dafl_mngt_divy_dsc_card_form {margin-left: -0.5rem; margin-right: -0.5rem;} .dafl_mngt_divy_dsc_card_form &gt; li {padding: 0.5rem; width: 50%; display: inline-block; vertical-align: top;} .dafl_mngt_divy_dsc_card_form &gt; li a {display: block; padding: 1.25rem;} .dafl_mngt_divy_dsc_card_form &gt; li &gt; .card:hover {transform: translateY(-5px); transition: all 0.25s ease-out; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.35);} .dafl_mngt_divy_dsc_card_form &gt; li a:focus, .dafl_mngt_divy_dsc_card_form &gt; li a:hover {opacity: 1;} .dafl_mngt_divy_dsc_card_form .badge-lg {font-size: 0.9rem !important; padding: 0.125rem 1rem; vertical-align: text-top;} .dafl_mngt_divy_dsc_card_form_img_wrap {width: 100%; height: 0; padding-bottom: 133%; position: relative; border-radius: 0.5rem; overflow: hidden;} .dafl_mngt_divy_dsc_card_form_img_wrap &gt; img {display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;} /* 다플샵 리뉴얼 */ /* 메인페이지 - 상단 버튼 리스트 */ .main_menu_btn_lst_wrap &gt; dt &gt; dl {text-align: center;} .main_menu_btn_lst_wrap &gt; dt &gt; dl &gt; dt {font-size: 2rem; color: #162b7d;} .main_menu_btn_lst_wrap &gt; dt &gt; dl &gt; dd {font-size: 1.5rem; color: #a9abae; font-weight: 500; margin-top: 0.625rem;} .main_menu_btn_lst {display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, auto); gap: 1.25rem;} .main_menu_btn_lst &gt; li:nth-child(1), .main_menu_btn_lst &gt; li:nth-child(2) {grid-column: span 3; grid-row: 1;} .main_menu_btn_lst &gt; li:nth-child(3), .main_menu_btn_lst &gt; li:nth-child(4), .main_menu_btn_lst &gt; li:nth-child(5) {grid-column: span 2; grid-row: 2;} .main_menu_btn {display: block; padding: 2.5rem 1rem 2rem; box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.35); border-radius: 1.25rem; position: relative; min-height: 205px;} .main_menu_btn:after {content: ""; display: block; width: 90px; height: 0.5rem; background-color: #dfe4ef; top: 0; left: 50%; position: absolute; transform: translateX(-50%);} .main_menu_btn:hover, .main_menu_btn:focus {opacity: 1;} .main_menu_btn &gt; * {text-align: center;} .main_menu_btn span {font-size: 2rem; font-weight: 700; color: #162b7d; letter-spacing: 1px;} .main_menu_btn_img_wrap {margin-top: 0.5rem;} .main_menu_btn_img_wrap &gt; img {width: 90%; max-width: 160px; display: block; object-fit: contain; margin: 0 auto; max-height: 120px;} .main_menu_btn_lst &gt; li:nth-child(1) .main_menu_btn_img_wrap &gt; img, .main_menu_btn_lst &gt; li:nth-child(2) .main_menu_btn_img_wrap &gt; img {max-height: 180px;} .main_menu_btn:hover:after {background-color: #162b7d; transition: 0.25s all ease-in-out;} .main_menu_btn_lst &gt; li:nth-child(1) .main_menu_btn, .main_menu_btn_lst &gt; li:nth-child(2) .main_menu_btn {display: flex; justify-content: center; align-items: center; gap: 5rem;} .main_menu_btn_lst &gt; li:nth-child(1) .main_menu_btn:after, .main_menu_btn_lst &gt; li:nth-child(2) .main_menu_btn:after {width: 150px;} /* 상품목록 */ .divy_prd_list {padding-bottom: 5rem;} .divy_prd_list_det_wrap {margin-top: 1.25rem;} .divy_prd_list_det_form {margin-top: 1.25rem; border-top: 1px solid #c0c0c0; position: relative; padding-bottom: 2rem;} .divy_prd_list_item_lst {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; grid-auto-rows: 1fr; padding-top: 3rem; padding-bottom: 2rem; gap: 3rem 2rem;} .divy_prd_list_item_wrap input[type="checkbox"] {display: none;} .divy_prd_list_item_optn_btn {display: block; padding: 0.375rem 0; display: block; border: 1px solid #3072dd; width: 80%; margin: 0 auto; text-align: center; color: #3366b9; border-radius: 0.5rem; cursor: pointer;} .divy_prd_list_item_wrap:not(.disabled) .divy_prd_list_item_optn_btn:hover {background-color: #3366b9eb; color: #fff; transition: all 0.15s ease-in-out; opacity: 0.8;} .divy_prd_list_item_wrap input[type="checkbox"]:checked ~ .divy_prd_list_item_info .divy_prd_list_item_optn_btn {background-color: #3366b9eb; color: #fff; opacity: 1;} .divy_prd_list_item_img_wrap {width: 90%; margin: 0 auto; padding-bottom: 90%; height: 0; position: relative; display: block;} .divy_prd_list_item_img_wrap &gt; img {height: 90%;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;} .divy_prd_list_item_info {margin-top: 0.5rem; text-align: center;} .divy_prd_list_item_info .badge {padding: 0.375rem 0.5rem; font-size: 0.85rem;} .divy_prd_list_item_info &gt; dl {text-align: center; margin-top: 0.5rem;} .divy_prd_list_item_info label {margin-top: 1rem; display: block;} .dnt_prd_lst_info_pric {text-align: left;} .dnt_prd_lst_info_pric &gt; span:nth-of-type(1) {font-weight: 500; color: #8c8c8a;} .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) {margin-right: 0.25rem; margin-left: 0.25rem; font-weight: 500;} .dnt_prd_lst_info_pric &gt; span:nth-of-type(3) {color: #dc3545 !important;} .dnt_prd_lst_info_pric &gt; span:last-of-type {font-size: 1.125rem; font-weight: bold; text-decoration: none; color: #333;} .dnt_prd_lst_info_pric_wrap { height: 78px; display: flex; align-items: center; width: 100%; margin-top: 0.25rem;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric {text-align: right; display: block; flex: 1; max-width: 80%; margin: 0 auto;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:not(:nth-of-type(1)) {display: block;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; em {color: #dc3545; margin-right: 0.25rem; font-weight: bold; font-size: 0.9rem;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(1) {margin: 0; font-weight: bold; font-size: 1.125rem; display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2), .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(3) {margin: 0; font-weight: bold; font-size: 1.125rem; display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) &gt; em:first-of-type, .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(3) &gt; em:first-of-type {font-weight: 400; font-size: 0.75rem;} .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) &gt; em:last-of-type {text-decoration: line-through; font-size: 1.0625rem;} /* .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(1) &gt; em:last-of-type {text-decoration: line-through; font-size: 1.0625rem;} */ .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:last-of-type &gt; em:last-of-type {text-decoration: none; font-size: 1.125rem;} .divy_prd_list_item_wrap.active .divy_prd_list_item_img_wrap {position: relative;} .divy_prd_list_item_wrap.active .divy_prd_list_item_img_wrap:before {content: ""; width: 100%; height: 100%; border: 2px solid #3366b9c2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 0.5rem; background-color: #eef4ffc2;} .divy_prd_list_purch_btn_wrap {position: fixed; width: 100%; max-width: 1250px; bottom: 5rem; left: 50%; transform: translateX(-50%); padding-left: 250px;} .divy_prd_list_purch_btn {text-align: center; display: block; padding: 0.5rem 0; color: #44588d; font-size: 1.25rem; font-weight: 500; border: 1px solid #44588d; border-radius: 0.5rem; background-color: #c8d7ffbf; box-shadow: 0px 0px 3px rgba(0,0,0,0.35);} .divy_prd_list_purch_btn:hover {opacity: 1; color: #44588d;} .divy_prd_list_purch_btn_wrap.static {position: static; transform: none; padding-left: 0;} .divy_prd_list_purch_btn.active {background-color: #1a458ae0; border-color: #1a458ae0; color: #fff;} .divy_prd_list_purch_btn.active:hover {filter: brightness(1.25); transition: all 0.15s ease-in-out;} /* disabled */ .divy_prd_list_item_wrap.disabled a:hover {opacity: 1;} .divy_prd_list_item_wrap.disabled .divy_prd_list_item_info &gt; span, .divy_prd_list_item_wrap.disabled .divy_prd_list_item_info &gt; dl {opacity: 0.5;} .divy_prd_list_item_wrap.disabled .divy_prd_list_cat_badge {opacity: 0.7;} .divy_prd_list_item_wrap.disabled .divy_prd_list_item_img_wrap &gt; img {opacity: 0.3;} .divy_prd_list_item_wrap.disabled .divy_prd_list_item_img_wrap:after {content: "해당 상품은 중복 선택이 불가능 합니다."; display: inline-block; white-space: nowrap; padding: 0.5rem 1rem; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.9rem; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .divy_prd_list_item_wrap.disabled .divy_prd_list_item_info &gt; label &gt; span {cursor: not-allowed;} .divy_prd_list_item_wrap.disabled .divy_prd_list_item_optn_btn {border-color: #bbb; background-color: #bbb; color: #fff;} /* 상품상세 */ .divy_prd_info .card &gt; .card-body {padding: 1.25rem;} .divy_prd_info_top {display: table; table-layout: fixed; width: 100%; margin-top: 2rem;} .divy_prd_info_top &gt; * {display: table-cell; vertical-align: top;} .divy_prd_info_top_img_wrap {width: 40%; height: 0; position: relative;} .divy_prd_info_top_img_wrap &gt; img {position: absolute; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); object-fit: contain;} .divy_prd_info .dnt_prd_lst_info_pric {text-align: right; font-size: 1.125rem;} .divy_prd_info .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) {margin-left: 0.5rem; margin-right: 0.5rem;} .divy_prd_info .dnt_prd_lst_info_pric &gt; span:last-of-type {font-size: 1.25rem;} .divy_prd_info_top_det_info .badge {padding: 0.5rem 0; font-size: 0.9rem; border-radius: 0.25rem; min-width: 100px;} .divy_prd_info_top_det_info {padding-left: 2rem;} .divy_prd_info_top_det_info &gt; dl:first-of-type {margin-top: 1.25rem;} .divy_prd_info_top_det_info &gt; dl:first-of-type &gt; dt {padding-bottom: 1.25rem;} .divy_prd_info_top_det_info &gt; dl:first-of-type &gt; dt &gt; span {font-size: 1.5rem;} .divy_prd_info_top_det_info &gt; dl:first-of-type &gt; dd {margin-top: 1.25rem; padding-bottom: 1.25rem;} .divy_prd_info_top_det_info &gt; dl:last-of-type {display: flex; justify-content: space-between; align-items: center;} .divy_prd_info_top_det_info &gt; dl:last-of-type &gt; dt {font-size: 1.25rem; font-weight: 500;} .divy_prd_info_top_det_info &gt; dl:last-of-type &gt; dd {font-size: 1.5rem; font-weight: bold; color: #dc3545;} .divy_prd_info_top_det_info &gt; dl:last-of-type &gt; dd em {font-size: 1.25rem; font-weight: 500; color: #333;} .divy_prd_info_top_det_info &gt; a {display: block; padding: 0.75rem 0; font-size: 1.125rem;} .divy_prd_info .dnt_prd_lst_info_pric_wrap {margin-top: -22px;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric {text-align: right; max-width: 100%;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(1) {font-size: 1.125rem;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) {margin: 0; margin-top: 0.5rem;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2), .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(3) {justify-content: flex-end; gap: 1rem;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) &gt; em:last-of-type, .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(3) &gt; em:last-of-type {min-width: 120px;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:nth-of-type(2) &gt; em:last-of-type {font-size: 1.125rem;} .divy_prd_info .dnt_prd_lst_info_pric_wrap .dnt_prd_lst_info_pric &gt; span:last-of-type &gt; em:last-of-type {font-size: 1.25rem;} .divy_prd_info_bottom {margin-top: 5rem; position: relative; padding-bottom: 6rem;} .divy_prd_info_bottom .COMMON_TABS &gt; .ui-widget-header {border-bottom-color: #ddd; margin-bottom: 1rem;} .divy_prd_info_bottom .COMMON_TABS.ui-tabs .ui-tabs-nav &gt; li {margin-bottom: 0; margin-right: 1rem; border: none; background-color: transparent;} .divy_prd_info_bottom .COMMON_TABS.ui-tabs .ui-tabs-nav &gt; li &gt; a {font-weight: bold; padding: 0.5rem 1.25rem; font-size: 1.125rem; opacity: 1 !important;} .divy_prd_info_bottom .COMMON_TABS.ui-tabs .ui-tabs-nav &gt; .ui-tabs-active {background-color: transparent; border: none; border-bottom: 4px solid #ad8b48;} .divy_prd_info_bottom .COMMON_TABS.ui-tabs .ui-tabs-nav &gt; .ui-tabs-active &gt; a {color: #ad8b48;} .divy_prd_info_bottom_cont_wrap {padding-left: 0.75rem; padding-right: 0.75rem;} .divy_prd_info_bottom_cont_wrap .card &gt; .card-body {padding: 1.25rem 2.5rem;} .divy_prd_info_bottom_cont_wrap .card-body dl + dl {margin-top: 3rem;} .divy_prd_info_bottom_cont_wrap .card-body dl &gt; dd {margin-top: 0.5rem; font-size: 0.95rem;} .divy_prd_info_bottom_cont_wrap .card-body dl &gt; dd ul &gt; li:not(:first-child) {margin-top: 0.25rem;} /* 상품주문,신청 */ .divy_prd_form_dl + .divy_prd_form_dl {margin-top: 3rem;} .divy_prd_form_dl {padding-left: 0.75rem; padding-right: 0.75rem;} .divy_prd_form_dl &gt; dt {font-size: 1.375rem !important; padding: 0 0.5rem 0.75rem; border-bottom: 2px solid #333; font-weight: 500; position: relative;} .divy_prd_form_dl &gt; dt &gt; label {position: absolute; top: calc(50% - 0.375rem); right: 0.5rem; transform: translateY(-50%); font-size: 1rem;} .divy_prd_form_dl &gt; dt &gt; label input[type="checkbox"] {width: 1.125rem; height: 1.125rem; vertical-align: -0.1875rem; margin-right: 0.375rem;} .divy_prd_form_dl &gt; dd {margin-top: 1rem !important;} .divy_prd_form_dl &gt; dd &gt; ul &gt; li &gt; ul &gt; li:not(:first-child) {margin-top: 0.75rem;} .divy_prd_form_dl &gt; dd &gt; .table {margin-top: -1rem; border-top: none;} .ord_prd_lst {padding: 0 1rem 0.5rem; border-bottom: 2px solid #bfbfbf;} .ord_prd_lst &gt; li:not(:first-child) {border-top: 1px solid #eaeaea;} .ord_prd_lst + div {margin-top: 2rem; padding-right: 1rem;} .ord_prd_lst + div &gt; dl {display: flex; justify-content: flex-end; gap: 1.5rem; align-items: center;} .ord_prd_lst + div &gt; dl &gt; dt {font-size: 1.25rem; font-weight: 500;} .ord_prd_lst + div &gt; dl &gt; dd {font-size: 1.375rem; font-weight: bold; color: #dc3545;} .ord_prd_lst + div &gt; dl &gt; dd &gt; span {margin-left: 0.25rem; font-size: 1.5rem;} .ord_prd_form {padding: 1rem 1rem 1rem 5rem; position: relative;} .ord_prd_form &gt; a {position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); font-size: 2rem; padding: 0.5rem; line-height: 1; color: #929292;} .ord_prd_form &gt; ul {display: table; table-layout: fixed; width: 100%;} .ord_prd_form &gt; ul&gt; li {display: table-cell; vertical-align: middle;} .ord_prd_form &gt; ul&gt; li:last-child, .ord_prd_form &gt; ul&gt; li:last-child .dnt_prd_lst_info_pric {text-align: right;} .ord_prd_form_img_wrap {width: 150px; height: 150px; position: relative; display: block;} .ord_prd_form_img_wrap &gt; img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;} .ord_prd_form &gt; ul &gt; li .badge {padding: 0.375rem 0.5rem; font-size: 0.85rem;} .ord_prd_form &gt; ul &gt; li dl {margin-top: 0.25rem;} .ord_prd_form &gt; ul &gt; li dl &gt; dt {font-size: 1.125rem;} .ord_prd_form &gt; ul &gt; li dl &gt; dd {margin-top: 0.25rem;} .divy_prd_form_dl &gt; dd &gt; ul &gt; li &gt; ul &gt; li .input-group-text {min-width: 100px; justify-content: center;} .rpst_apl_checkbox {width: 1.25rem; height: 1.25rem;} .rpst_apl_checkbox + span {display: inline-block; vertical-align: 0.25rem;} .prd_divy_prd_form_scroll_btn_wrap {position: fixed; width: 1000px; bottom: 2.5rem; z-index: 50; display: none;} .prd_divy_prd_form_scroll_btn_wrap.static {position: absolute; bottom: 2rem;} .prd_divy_prd_form_scroll_btn_wrap &gt; a {display: block; padding: 0.75rem 0; font-size: 1.125rem;} .img_exist {width: 200px; height: 200px;} .invt_card_file_path_lst_wrap {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 0.75rem;} .invt_card_file_path_lst_wrap &gt; li &gt; div {width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;} .invt_card_file_path_lst_wrap &gt; li &gt; div img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;} .rcv_sms_form {display: none;} /* 레이아웃 개선 */ .dafl_v3_body:not(.main_body) #layout_content_body_wrap {display: flex; justify-content: center; align-items: flex-start; gap: 1rem; max-width: 1000px;} #layout_content_body_wrap:after {display: none;} #layout_content_body_wrap &gt; * {float: none;} #layout_content_body_left {padding-right: 0;} #layout_content_body_right {max-width: 1000px; width: 100%; padding-bottom: 3rem;} /* 레이아웃 - 상단메뉴 */ .dafl_top_header {display: none;} #layout_top_wrap {top: 0 !important;} .top_menu_fixed {max-width: 1000px;} #layout_top_wrap {top: 0 !important;} .layout_top_logo_wrap {padding-top: 1rem; padding-bottom: 1rem;} .scrol-down .top_menu_fixed .layout_top_logo_wrap {padding-top: 0; padding-bottom: 0;} #layout_top_wrap #layout_top_menu_wrap {height: auto;} .top_menu_fixed {display: flex; justify-content: space-between; align-items: center; position: relative; gap: 1.5rem;} .layout_top_menu_nm {font-weight: bold; letter-spacing: 1px; transition: font-size 0.1s ease-in-out; position: absolute; top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%);} .top_menu_fixed:after {display: none;} .scrol-down .layout_top_menu_nm {font-size: 1.5rem; transition: font-size 0.2s ease-in-out;} /* 상단 헤더 리뉴얼 */ .layout_top_menu_nm_lst {display: flex; flex: 1; justify-content: space-between; gap: 1.5rem; align-items: center;} .layout_top_menu_nm_lst &gt; li &gt; a {font-size: 1.125rem; font-weight: 500; transition: font-size 0.1s ease-in-out; white-space: nowrap;} .layout_top_menu_nm_lst &gt; li &gt; a &gt; div {display: block; line-height: 1;} .layout_top_menu_nm_lst &gt; li.active &gt; a {color: #3366B9; font-weight: bold;} .layout_top_menu_nm_lst &gt; li.active {position: relative;} .layout_top_menu_nm_lst &gt; li.active:after {content: ""; position: absolute; bottom: calc(-1.5rem + 5px); left: 50%; transform: translatex(-50%); width: calc(100% + 1rem); height: 4px; background-color: #3366B9;} .scrol-down .layout_top_menu_nm_lst &gt; li.active:after {bottom: calc(-0.5rem + 1px);} .layout_top_func_menu {margin-right: -1.25rem;} .layout_top_func_menu &gt; ul {white-space: nowrap;} .layout_top_func_menu &gt; ul &gt; li {display: inline-block; padding: 0 0.625rem; position: relative;} .layout_top_func_menu &gt; ul &gt; li:not(:first-child):before {content: ""; width: 2px; height: 50%; background-color: #e0e0e0; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .layout_top_func_menu &gt; ul &gt; li &gt; a {display: block; padding: 0.25rem; color: #696969; font-weight: 500; font-size: 0.9rem; transition: font-size 0.1s ease-in-out;} .scrol-down .layout_top_menu_nm_lst &gt; li &gt; a {font-size: 1rem; transition: font-size 0.2s ease-in-out;} .scrol-down .layout_top_func_menu &gt; ul &gt; li &gt; a {font-size: 0.85rem; transition: font-size 0.2s ease-in-out;} .main_body #layout_content_body_wrap {padding-top: 110px;} .main_body .main-section-wrap &gt; * {max-width: calc(1000px + 2rem);} .form_surv_wrap .container {max-width: calc(1000px + 2rem);} .footer_wrap {max-width: calc(1000px + 2rem);} /* 메인페이지 */ .dafl_main_top_banner_wrap {width: 1000px; max-width: none !important; padding: 0;} .dafl_main_top_banner_wrap &gt; div {box-shadow: none; border-radius: 0;} .dafl_main_top_banner_wrap &gt; div &gt; ul &gt; li:not(.swiper-slide-active) img {filter: blur(1px);} .dafl_main_top_banner_wrap .swiper-button-prev, .dafl_main_top_banner_wrap .swiper-button-next {background-image: none; font-family: "Font Awesome 5 Pro"; top: auto; top: 50%; transform: translateY(-50%); width: auto; height: auto; margin-top: 0;} .dafl_main_top_banner_wrap .swiper-button-prev {left: 30px;} .dafl_main_top_banner_wrap .swiper-button-next {right: 30px;} .dafl_main_top_banner_wrap .swiper-button-prev:after {content: "\f053"; color: #fff; font-size: 1.125rem; font-weight: 300;} .dafl_main_top_banner_wrap .swiper-button-next:after {content: "\f054"; color: #fff; font-size: 1.125rem; font-weight: 300;} .dafl_main_top_banner_wrap .swiper_func_wrap {position: absolute; display: inline-block; width: auto; left: 79.5%; bottom: 0; transform: translate3d(-50%, 0, 0); color: #fff; padding: 0.375rem 3rem; background-color: #0009; z-index: 10; font-size: 0.9rem;} .dafl_main_top_banner_wrap .swiper-pagination {position: static;} .main_menu_btn_lst {gap: 1.25rem;} .main_menu_btn {padding: 1.75rem 1rem 1.25rem;} .main_menu_btn span {font-size: 1.75rem; white-space: nowrap; color: #333;} .main_menu_btn:hover {box-shadow: 0px 0px 13px 0px #162b7d; transition: 0.25s all ease-in-out;} .main_menu_btn:hover span {color: #162b7d; transition: 0.25s all ease-in-out;} /* 서브페이지 */ .sub_body #layout_content_body_wrap {padding-top: 100px;} #layout_content_body_nav {display: none;} .divy_prd_list_purch_btn_wrap {max-width: 1000px; padding-left: 0; display: none;} /* 액자화환 */ .frame_wrth_intro_top_cont {left: 2rem;} .frame_wrth_intro_top_cont dl &gt; dd &gt; ul &gt; li:first-child {word-break: keep-all;} .frame_wrth_intro_top_bg {padding-bottom: 47.5%;} .frame_wrth_intro_top_bg &gt; img {width: 250px; right: 2rem;} /* 앱 다운로드 안내 */ .app_dl_guid_info .dafl_app_dl_guid_form_wrap {padding-top: 2rem; padding-left: 0; padding-right: 0;} /* 배송상세 페이지 수정 작업 */ .dafl_divy_sta_words &gt; .alert {margin-top: 1rem; text-align: center;} .dafl_divy_sta_words &gt; .alert &gt; dl {color: #333; display: inline-block; text-align: left; letter-spacing: 0.5px;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dt {font-size: 1.75rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd {margin-top: 0.75rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dt {font-weight: 500; font-size: 1.125rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dd {display: flex; justify-content: space-between; align-items: center;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dd:first-of-type {margin-top: 0.5rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dd:last-of-type {margin-top: 0.25rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dd &gt; span:first-of-type {font-size: 1rem;} .dafl_divy_sta_words &gt; .alert &gt; dl &gt; dd &gt; dl &gt; dd &gt; span:last-of-type {font-size: 1.25rem; font-weight: bold; color: #162b7d;} .dafl_divy_sta_det_info_top_lst &gt; li &gt; dl {display: flex; justify-content: flex-start; align-items: center; gap: 1.25rem;} .dafl_divy_sta_det_info_top_lst &gt; li:not(:first-child) {margin-top: 0.5rem !important;} .divy_sta_img_lst_form {margin-top: 2rem;} .divy_sta_img_lst_wrap &gt; dt {font-size: 1.125rem;} .divy_sta_img_lst_wrap &gt; dd {margin-top: 0.75rem;} li:not(.addn_cfg_item) .divy_sta_img_lst_wrap &gt; dd &gt; ul &gt; li:not(:first-child) {margin-top: 1rem;} .wrth_img_wrap, .frame_wrth_img_wrap {padding: 2%;} .wrth_info_img_wrap, .frame_wrth_info_img_wrap {padding: 0.25rem; position: relative; width: 100%; padding-bottom: 100%; height: 0;} .wrth_info_img_wrap img, .frame_wrth_info_img_wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 0.5rem); height: calc(100% - 0.5rem); object-fit: contain;} .divy_sta_img_lst_wrap .dafl_instl_photo_wrap {border: 1px solid #dee2e6;} .divy_sta_img_lst_container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; grid-auto-rows: 1fr;} .divy_sta_img_lst_container .addn_cfg_item {grid-column: span 2;} .divy_sta_img_lst_container .addn_cfg_item .divy_sta_img_lst_wrap &gt; dd &gt; ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; grid-auto-rows: 1fr;} .JS-addTypeForm + .JS-addTypeForm {margin-top: 1rem;} /* 액자화환 작품선택 다이얼로그 */ .img_prdu_list_wrap {display: grid; grid-template-columns : repeat(4, 1fr); gap: 1.5rem 0.75rem;} .img_prdu_list_wrap &gt; li {position: relative; overflow: hidden;} .img_prdu_list_wrap &gt; li &gt; h6 {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .img_resize_btn {position: absolute;right:0;top:0;background-color: #FFF;border:1px solid #DDD;padding: 5px 10px;border-radius: 0.25rem;} .okflag_frame_wrth_prd_btn {position: relative; width: 100%; padding-bottom: 66%; height: 0;} .okflag_frame_wrth_prd_btn &gt; p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; width: 100%; height: 100%; background-size: contain; background-position: center center;} /* 리본 문구 */ .wrth_img_wrap {position: relative;} .wrth_img_wrap &gt; img {width: 100%;} .wrth_cont {font-weight: bolder; font-size: 1.25rem; position: absolute; background-color: transparent; padding: 0.75rem 0 2rem; white-space: nowrap; line-height: 1;} .wrth_cont &gt; div {color: #241917; letter-spacing: 3px; word-spacing: -10px; text-shadow: 0px 0px 1px rgba(0,0,0,0.5); writing-mode: vertical-rl; text-orientation: upright;} .wrth_cont &gt; div &gt; span {display: inline-block; width: 100%;} .wrth_cont &gt; div &gt; span &gt; font {display: flex; justify-content: space-around; width: 100%; align-items: center;} .wrth_cont &gt; div &gt; span &gt; font em {min-width: 0.25rem; min-height: 0.25rem;} .wrth_left_cont {transform-origin: top left; height: 0;} .wrth_right_cont {transform-origin: top right; height: 0;} .wrth_left_cont &gt; div, .wrth_right_cont &gt; div {position: absolute; height: 100%; top: 0; width: 100%;} /* 홍삼근조기 리본문구 */ .wrth_img_wrap[data-number="2105"] .wrth_left_cont {top: 20%; left: 10.9%; transform: rotate(0deg); padding-bottom: 126%; width: 10%;} .wrth_img_wrap[data-number="2105"] .wrth_right_cont {top: 20%;right: 11%; transform: rotate(0deg); padding-bottom: 126%; width: 11%;} /* 리본근조기 리본문구 */ .wrth_img_wrap[data-number="2005"] .wrth_left_cont {top: 19%; left: 10%; transform: rotate(0deg); padding-bottom: 128%; width: 10%;} .wrth_img_wrap[data-number="2005"] .wrth_right_cont {top: 19%;right: 13.1%; transform: rotate(0deg); padding-bottom: 128%; width: 10%;} /* 리본축하기 리본문구 */ .wrth_img_wrap[data-number="1005"] .wrth_left_cont {top: 19%; left: 10.9%; transform: rotate(0deg); padding-bottom: 121%; width: 10%;} .wrth_img_wrap[data-number="1005"] .wrth_right_cont {top: 19%;right: 12.5%; transform: rotate(0deg); padding-bottom: 121%; width: 10%;} /* 근조화환(3단) 리본문구 */ .wrth_img_wrap[data-number="2016"] .wrth_left_cont {top: 18%; left: 31.9%; transform: rotate(6.7deg); padding-bottom: 115%; width: 8%;} .wrth_img_wrap[data-number="2016"] .wrth_right_cont {top: 18%;right: 30.9%; transform: rotate(-7.5deg); padding-bottom: 115%; width: 8%;} /* 근조화환(4단) 리본문구 */ .wrth_img_wrap[data-number="2026"] .wrth_left_cont {top: 18%; left: 31.9%; transform: rotate(10.6deg); padding-bottom: 115%; width: 7%;} .wrth_img_wrap[data-number="2026"] .wrth_right_cont {top: 18%;right: 35.9%; transform: rotate(-8.3deg); padding-bottom: 115%; width: 7%;} /* 축하화환(3단) 리본문구 */ .wrth_img_wrap[data-number="1016"] .wrth_left_cont {top: 18%; left: 30.4%; transform: rotate(10.9deg); padding-bottom: 115%; width: 8%;} .wrth_img_wrap[data-number="1016"] .wrth_right_cont {top: 18%;right: 32.5%; transform: rotate(-11.5deg); padding-bottom: 115%; width: 8%;} /* 축하화환(3단) 리본문구 */ .wrth_img_wrap[data-number="1026"] .wrth_left_cont {top: 18%; left: 32.8%; transform: rotate(12.9deg); padding-bottom: 115%; width: 8%;} .wrth_img_wrap[data-number="1026"] .wrth_right_cont {top: 18%;right: 32.1%; transform: rotate(-12.5deg); padding-bottom: 115%; width: 8%;} /* 액자화환 문구 */ .frame_wrth_img_wrap {position: relative;} .frame_wrth_cont_wrap {position: absolute; top: 35.25%; left: 48%; transform: translateX(-50%); width: 32.5%; height: 28.75%;} .frame_wrth_cont {display: flex; flex-direction: column; justify-content: space-between; height: 100%;} .frame_wrth_cont_top {font-weight: bold; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2; word-break: keep-all;} .frame_wrth_cont_middle {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; line-clamp: 4; text-align: center;} .frame_wrth_cont_bottom {font-weight: bold; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2; word-break: keep-all;} #okflagGroupIndvdlMemAftCalcAplInfo ul &gt; li:first-child .form-control {padding: 0.1875rem 0.75rem;} #okflagGroupIndvdlMemAftCalcAplInfo .input-group-prepend &gt; span {width: 200px; justify-content: center;} #okflagGroupIndvdlMemAftCalcAplInfo .input-group-append &gt; a.btn {width: 120px; text-align: center;} /* 추천인 + 포인트적립내역 */ .dafl_rcmdr_info_form &gt; ul {display: flex; justify-content: flex-start; align-items: center; gap: 1rem;} .dafl_rcmdr_info_form &gt; ul &gt; li:first-child {font-size: 1.25rem;} .dafl_rcmdr_info_form &gt; ul &gt; li &gt; dl {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; color: #6c757d;} .dafl_rcmdr_info_form &gt; ul &gt; li:last-child &gt; dl &gt; dt {font-weight: 500;} .dafl_rcmdr_sys_guid &gt; div:first-of-type {padding-bottom: 0.5rem; border-bottom: 1px solid #6C757D;} .dafl_rcmdr_sys_guid &gt; div:first-of-type span {font-weight: bold;} .dafl_rcmdr_sys_guid &gt; div:first-of-type em {text-decoration: underline;} .dafl_rcmdr_sys_guid &gt; div:last-of-type {margin-top: 0.5rem; text-align: right;} .dafl_rcmdr_sys_guid &gt; div:last-of-type &gt; dl {display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; font-size: 1.5rem;} .dafl_rcmdr_sys_guid &gt; div:last-of-type &gt; dl &gt; dt {font-weight: 400;} .dafl_rcmdr_sys_guid &gt; div:last-of-type &gt; dl &gt; dd {font-weight: bold;} .dafl_rcmdr_info_table thead &gt; tr &gt; th {font-size: 0.9rem;} .dafl_rcmdr_info_table tbody &gt; tr &gt; td {font-size: 0.9rem;} .dafl_rcmdr_info_table tbody &gt; tr &gt; td a.btn {font-size: 0.75rem;} .dafl_poss_cupn_lst {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; grid-auto-rows: 1fr;} .dafl_poss_cupn_lst .card {border-radius: 0.75rem; box-shadow: 0px 0px 4px rgba(0,0,0,0.25); height: 100%;} .dafl_poss_cupn_lst .card &gt; .card-body {background-color: transparent; padding: 1rem;} .dafl_poss_cupn_top {display: flex; justify-content: flex-start; align-items: center; gap: 1rem;} .dafl_poss_cupn_top ul &gt; li:not(:first-child) {margin-top: 0.375rem;} .dafl_poss_cupn_top dl {font-size: 0.85rem;} .dafl_poss_cupn_top dl &gt; dt {color: #6c757d;} .dafl_poss_cupn_top dl &gt; dd {margin-top: 0.25rem; font-weight: bold;} .dafl_poss_cupn_bottom {margin-top: 0.5rem; font-weight: bold; font-size: 0.95rem; color: #6c757d; word-break: keep-all;} /* 상품 주문, 신청 페이지 레이아웃 및 폼 수정 */ .dnt_prd_divy_instl_req_form { justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 10rem !important;} .dnt_prd_divy_instl_req_left_form {flex: 1;} .dnt_prd_divy_instl_req_right_form {width: 280px; position: relative;} .dnt_prd_divy_instl_req_sttl_info_wrap {position: fixed; top: 100px; left: 50%; transform: translateX(-50%); width: 1000px; transition: top 0.1s ease-in-out;} .scrol-down .dnt_prd_divy_instl_req_sttl_info_wrap {top: 70px; transition: top 0.1s ease-in-out;} .dnt_prd_divy_instl_req_sttl_info {position: absolute; width: 280px; top: 0; right: 0; background-color: #EDEDED; padding: 0.625rem; border-radius: 0.75rem; overflow: hidden; box-shadow: 2px 2px 4px rgba(0,0,0,0.15);} .dnt_prd_divy_instl_req_sttl_info_top {padding: 0.5rem 0.75rem; background-color: #D8DDE2;} .dnt_prd_divy_instl_req_sttl_info_top &gt; dl &gt; dt {font-size: 1.125rem;} .dnt_prd_divy_instl_req_sttl_info_top &gt; dl &gt; dd {margin-top: 0.25rem;} .dnt_prd_divy_instl_req_sttl_info_top &gt; dl &gt; dd &gt; dl &gt; dt {font-weight: 500;} .dnt_prd_divy_instl_req_sttl_info_top &gt; dl &gt; dd &gt; dl &gt; dd {margin-top: 0.125rem; color: #6C757D; font-size: 0.85rem;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li {margin-top: 0.5rem;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; dl {display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; dl &gt; dt {font-weight: 500;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; dl &gt; dd {font-weight: 500;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li:nth-child(2) &gt; dl &gt; dd {color: #FF0000;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; ul &gt; li {margin-top: 0.5rem;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; ul &gt; li &gt; dl {display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: #6C757D;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; ul &gt; li &gt; dl &gt; dt {font-weight: 400;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; ul &gt; li &gt; dl &gt; dt &gt; span {font-weight: 300;} .dnt_prd_divy_instl_req_sttl_info_middle &gt; ul &gt; li &gt; ul &gt; li &gt; dl &gt; dd {font-size: 0.9rem; letter-spacing: 0.25px;} .dnt_prd_divy_instl_req_sttl_info_bottom {padding-top: 0.75rem; margin-top: 0.5rem; border-top: 1px dashed #8C9399; padding-bottom: 0.25rem;} .dnt_prd_divy_instl_req_sttl_info_bottom &gt; dl {display: flex; justify-content: space-between; align-items: center; color: #004596;} .dnt_prd_divy_instl_req_sttl_info_bottom &gt; dl &gt; dt {font-size: 1.25rem; font-weight: 500;} .dnt_prd_divy_instl_req_sttl_info_bottom &gt; dl &gt; dd {font-weight: bold; font-size: 1.5rem; letter-spacing: 0.25px;} .dnt_prd_divy_apl_meth_lst {display: flex; justify-content: flex-start; align-items: center; gap: 1.25rem;} .dnt_prd_divy_apl_meth_lst input[type="radio"] {width: 1.125rem; height: 1.125rem; vertical-align: -0.1875rem;} .rcmdr_guid_cont {font-size: 0.85rem; color: #6C757D;} .rcmdr_guid_cont span {font-weight: bold;} .rcmdr_guid_cont em {text-decoration: underline;} .rcmdr_guid_cont + a {font-weight: 500; color: #6C757D; font-size: 0.9rem;} .pint_use_set_form {display: flex; justify-content: flex-start; align-items: flex-end; gap: 0.5rem;} .pint_use_set_form &gt; * {width: auto;} .pint_use_set_form &gt; div:last-of-type {font-size: 0.9rem; color: #6C757D; font-weight: 500; letter-spacing: 0.15px;} .dnt_prd_divy_instl_req_bottom_form {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; border-top: 2px solid #D4D4D4; box-shadow: 0px -2px 3px rgba(0,0,0,0.15); background-color: #fff; z-index: 100;} .dnt_prd_divy_instl_req_bottom_form_body {max-width: 1000px; margin: 0 auto; padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul {display: flex; justify-content: flex-end; align-items: stretch; gap: 0.5rem;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li &gt; a {padding: 0.5rem 1rem; border-radius: 0.25rem; min-width: 15rem; height: 100%;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li:first-child &gt; a {background-color: #004596; border: 2px solid #004596; color: #fff;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li:last-child &gt; a {border: 2px solid #004596; color: #004596; display: flex; align-items: center; justify-content: center;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li:first-child &gt; a:hover {opacity: 1; filter: brightness(1.25); transition: all 0.15s ease-in-out;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li:last-child &gt; a:hover {opacity: 1; background-color: #004596; color: #fff; transition: all 0.15s ease-in-out;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li &gt; a &gt; dl {text-align: center;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li &gt; a &gt; dl &gt; dt {font-size: 1.125rem;} .dnt_prd_divy_instl_req_bottom_form_body &gt; ul &gt; li &gt; a &gt; dl &gt; dd {color: #FFC107; font-size: 0.9rem;} /* 상품 주문/신청 쿠폰 선택 폼 추가 */ .cupn_cupn_prd_selt_form {padding: 0.5rem; margin-top: 0.5rem;} .cupn_cupn_prd_selt_form &gt; dl &gt; dt {font-size: 1.125rem; font-weight: 500;} .cupn_cupn_prd_selt_form &gt; dl &gt; dd {margin-top: 1rem;} .cupn_cupn_prd_selt_form &gt; dl &gt; dd &gt; ul &gt; li {position: relative; padding: 0.5rem;} .cupn_cupn_prd_selt_form &gt; dl &gt; dd &gt; ul &gt; li:not(:first-child) {border-top: 1px dashed #ddd;} .cupn_cupn_prd_selt_lst_wrap {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .cupn_cupn_prd_selt_lst_wrap &gt; label {display: block; flex: 1;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul {display: flex; justify-content: space-between; align-items: center; gap: 2rem;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(2) {width: 100px;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(3) {text-align: center;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(3), .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) {flex: 1;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) {display: flex; justify-content: center; align-items: center; gap: 1rem;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) &gt; span:nth-of-type(1) {color: #6c757d; text-decoration: line-through;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) &gt; dl {display: flex; justify-content: center; align-items: center; gap: 0.5rem; color: #dc3545;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) &gt; dl &gt; dt {font-weight: 400;} .cupn_cupn_prd_selt_lst_wrap &gt; label &gt; ul &gt; li:nth-child(4) &gt; dl &gt; dd {font-weight: bold; font-size: 1.125rem;} .cupn_cupn_prd_selt_lst_wrap &gt; input[type="radio"]:checked + label:before {content: ""; position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #162b7d1a;} .cupn_cupn_prd_selt_lst_wrap .ord_prd_form_img_wrap {width: 5rem; height: 5rem;} .cupn_cupn_prd_selt_info_form {padding: 3rem 0.75rem 0; border-top: 0.75rem solid #f2f2f2; margin-top: 5rem !important;} .cupn_cupn_prd_selt_info_form &gt; ul &gt; li:not(:first-child) {margin-top: 1rem;} .cupn_cupn_prd_selt_info_form &gt; ul &gt; li &gt; dl {display: flex; justify-content: space-between; align-items: center;} .cupn_cupn_prd_selt_info_form &gt; ul &gt; li &gt; dl &gt; dt {font-size: 1.375rem; font-weight: 500;} .cupn_cupn_prd_selt_info_form &gt; ul &gt; li &gt; dl &gt; dd {font-size: 1.5rem; font-weight: bold;} /* * 멤버십 */ .memshp-info .premium-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .memshp-info .promotion-banner { background: linear-gradient(135deg, #1a237e, #000051); color: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-bottom-left-radius: 0; border-bottom-right-radius: 0;} .memshp-info .membership-card { background: white; border: none; border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);} .memshp-info .membership-card.card &gt; .card-body {padding: 1.25rem;} .memshp-info .card-header {padding: 0;} .memshp-info .product-card { border: none; border-radius: 15px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; overflow: hidden; } .memshp-info .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .memshp-info .product-card img { width: 100%; height: 250px; object-fit: contain; transition: transform 0.3s ease; z-index: 1; } .memshp-info .product-card:hover img { transform: scale(1.05); } .memshp-info .discount-badge { position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #d32f2f, #b71c1c); color: white; padding: 8px 15px; border-radius: 25px; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 2; } .memshp-info .discount-badge:hover { transform: scale(1.05); } .memshp-info .product-card .card-body { padding: 20px; background: white; height: 170px; } .memshp-info .original-price { text-decoration: line-through; color: #9e9e9e; font-size: 0.95em; margin-bottom: 5px; } .memshp-info .discount-price { color: #d32f2f; font-weight: bold; font-size: 1.3em; margin-bottom: 0; } .memshp-info .btn-premium { background: linear-gradient(135deg, #24292e, #000000); border: none; padding: 12px 30px; border-radius: 30px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s ease; } .memshp-info .btn-premium:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .memshp-info .custom-control-label::before { background-color: #f8f9fa; border: 2px solid #24292e; } .memshp-info .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #24292e; border-color: #24292e; } .memshp-info .section-title { font-size: 2em; font-weight: 700; margin-bottom: 30px; color: #24292e; text-align: center; position: relative; padding-bottom: 15px; } .memshp-info .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(135deg, #24292e, #000000); } .memshp-info .membership-price { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, #f8f9fa, #ffffff); border-radius: 10px; margin: 0 0 20px; word-break: keep-all;} .memshp-info .premium-sub-container { margin: 0 auto; } .memshp-info .cancel-card { background: white; border: none; border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); margin-bottom: 40px; } .memshp-info .warning-header { background: linear-gradient(135deg, #d32f2f, #b71c1c); color: white; padding: 25px; border-radius: 15px 15px 0 0; text-align: center; } .memshp-info .benefits-section { background: linear-gradient(135deg, #1a237e, #000051); color: white; padding: 30px 0; border-radius: 15px; margin-bottom: 40px; } .memshp-info .section-title { font-size: 2em; font-weight: 700; margin-bottom: 30px; text-align: center; position: relative; padding-bottom: 15px; } .memshp-info .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: white; } .memshp-info .btn-cancel { background: #d32f2f; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s ease; } .memshp-info .btn-cancel:hover { background: #b71c1c; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .memshp-info .btn-keep { background: #24292e; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s ease; } .memshp-info .btn-keep:hover { background: #000000; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .memshp-info .product-slide { background: white; border-radius: 15px; padding: 20px; margin: 10px; text-align: center; } .memshp-info .product-slide img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; } .memshp-info .carousel-control-prev, #memshp-info .carousel-control-next { width: 40px; height: 40px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; top: 50%; transform: translateY(-50%); } .memshp-info .original-price { text-decoration: line-through; color: #9e9e9e; font-size: 0.95em; } .memshp-info .discount-price { color: #d32f2f; font-weight: bold; font-size: 1.3em; } .memshp-info .discount-badge { background: linear-gradient(135deg, #d32f2f, #b71c1c); color: white; padding: 5px 10px; border-radius: 15px; font-size: 0.9em; margin-bottom: 10px; display: inline-block; } .memshp-info .benefits-list { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 30px; margin-bottom: 30px; } .memshp-info .benefit-item { margin-bottom: 15px; font-size: 1.1em; } .memshp-info .benefit-item i { margin-right: 10px; color: #ffd700; } /* 최상위 컨테이너 */ #memshp-kispg-info .kispg-page { max-width: 500px; border: 1px solid #ccc; padding: 3px; position: relative; font-family: sans-serif;} /* 테이블 스타일 */ #memshp-kispg-info .kispg-page table { width: 100%; border-collapse: collapse; } #memshp-kispg-info .kispg-page th, #memshp-kispg-info .kispg-page td { border: 1px solid #ccc; padding: 8px; vertical-align: middle; } #memshp-kispg-info .kispg-page th { width: 120px; background: #f8f8f8; text-align: left; } /* 입력 요소 기본 스타일 조금 부여 (선택사항) */ #memshp-kispg-info .kispg-page input[type="text"], #memshp-kispg-info .kispg-page input[type="password"], #memshp-kispg-info .kispg-page select { width: 150px; padding: 5px; margin-right: 4px; box-sizing: border-box; border: 1px solid #ccc; outline: none; } /* 버튼 스타일 (확인 버튼 / 키패드 버튼) */ #memshp-kispg-info .kispg-page .btn { cursor: pointer; padding: 5px 10px; border: 1px solid #aaa; background: #e9e9e9; margin: 2px; box-sizing: border-box; } #memshp-kispg-info .kispg-page .btn:hover { background: #ddd; } /* 메인 확인 버튼 전체 폭 사용 */ #memshp-kispg-info .kispg-page .btn-block { width: 100%; text-align: center; } /* 보안키패드: absolute, 정사각형 크기 */ #securityKeypad { position: absolute; width: 218px; display: none; border: 1px solid #ccc; background: #f9f9f9; padding: 5px; z-index: 999999; } /* 키패드 내부 버튼 컨테이너 */ #securityKeypad .keypad-body { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 100%; height: calc(100% - 60px); box-sizing: border-box; margin-bottom: 5px; } /* 숫자 버튼: 정사각형 */ #securityKeypad .keypad-digit { width: 35px; height: 30px; margin: 3px; border: 1px solid #aaa; background: #fff; cursor: pointer; text-align: center; } #securityKeypad .keypad-digit:hover { background: #eee; } /* 키패드 기능 버튼들 */ #securityKeypad .keypad-func { margin: 0 2px; } /* 멤버십 이용약관 */ .memshp-agr-info-body { font-family: 'Noto Sans KR', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; height: 600px; overflow-y: auto } .memshp-agr-info-h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #3498db; } .memshp-agr-info-article { background-color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .memshp-agr-info-article-title { font-weight: bold; margin-bottom: 15px; color: #2c3e50; font-size: 18px; } .memshp-agr-info-clause { margin-bottom: 10px; } .memshp-agr-info-sub-clause { padding-left: 20px; } .memshp-agr-info-item { padding-left: 40px; } .memshp-agr-info-footer { text-align: center; margin-top: 30px; font-size: 14px; color: #7f8c8d; } .memshp-agr-info-ul { list-style-type: none; padding-left: 0; } .memshp-agr-info-li { margin-bottom: 5px; } /* 멤버십 인트로 페이지 */ .membership_intro_info {margin-bottom: 5rem;} .membership_intro_info_btn_wrap .btn {background-color: #5D5FCB; color: #fff; font-size: 1.375rem; padding: 1.25rem; display: block; font-weight: bold; border-radius: 0;} .membership_intro_info_btn_wrap .btn &gt; i {margin-left: 1rem;} /* 소개하신분 등록 폼 */ .okflag_rcmdr_form_wrap {padding: 0 0.75rem; margin-top: 3rem;} .okflag_rcmdr_form_wrap .card &gt; * {padding: 1rem;} .okflag_rcmdr_form_wrap .card &gt; .card-header {border-bottom: none;} .okflag_rcmdr_form_wrap .card &gt; .card-header .okflag_rcmdr_form_title {display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem;} .okflag_rcmdr_form_wrap .card &gt; .card-body {border-top: 1px solid rgba(0, 0, 0, 0.125);} .okflag_rcmdr_form_wrap .okflag_rcmdr_intro_event_info_btn {display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem; color: #0182b8; font-size: 0.9rem;} .okflag_rcmdr_form_wrap .okflag_rcmdr_intro_event_info_btn &gt; span {text-decoration: underline;} .okflag_rcmdr_form_wrap .okflag_rcmdr_lst_input_wrap {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;} .okflag_rcmdr_form_wrap .okflag_rcmdr_lst_input_wrap &gt; input {flex: 1;} .okflag_rcmdr_form_wrap .okflag_rcmdr_lst_input_wrap &gt; a.btn {width: 10rem;} .okflag_rcmdr_intro_event_info_popup {position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%);} .okflag_rcmdr_intro_event_info {max-height: 80dvh !important; overflow-y: scroll;} /* 고객 리뷰 정보 */ .cus_satft_inv_info .usr_rvw_form_main_card_wrap {margin-top: 0; padding-top: 0; border-top: none;} .cus_satft_inv_info .usr_rvw_form_main_card_wrap .card {border-radius: 0; box-shadow: none;} .cus_satft_inv_info .dafl_usr_rvw_rply_form &gt; ul &gt; li &gt; dl &gt; dd.main {text-overflow: inherit; display: block; overflow: visible;} /** 주문 CSS */ .JS-stepProgressWrap { display: flex; align-items: center; justify-content: space-between; max-width: 800px; margin: 40px auto; } .step-circle { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; } .step-circle .circle { width: 60px; height: 60px; border-radius: 50%; background-color: #ddd; color: #555; display: flex; justify-content: center; align-items: center; font-weight: bold; } .step-circle.active .circle { background-color: #1a237e; color: #fff; } .step-circle .label { margin-top: 10px; font-size: 14px; text-align: center; color: #222; } .step-line { flex: 1; height: 3px; background-color: #ccc; margin: 0 10px; position: relative; top: -12px; } .divyPrdOrdStepWrap { display: none; } .divyPrdOrdStepWrap.active { display: block; } .JS-recvTypeWrap { display: none; } .JS-recvTypeWrap.active { display: block; } /* ------입력 정보 요약 CSS ------ */ .order-summary-box { background-color: #eee; border-radius: 8px; padding: 20px; margin-top: 20px; margin-bottom: 30px; font-size: 14px; } .order-summary-title { display: flex; align-items: center; justify-content: space-between; /* 또는 margin-left: auto를 활용해도 됨 */ font-weight: bold; font-size: 16px; margin-bottom: 10px; } .order-summary-title .toggle-summary { margin-left: auto; text-decoration: none; font-size: 14px; color: #666; } .order-summary-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; /* 요소 간 여백 */ background-color: #fff; padding: 10px; border-radius: 4px; } .order-summary-item { font-size: 16px; flex: 0 0 48%; /* 각 항목이 48% 너비 = 한 줄에 2개 */ min-width: 200px; word-break: keep-all; } .order-summary-row:last-child { margin-bottom: 0; } .order-summary-divider { border-top: 1px dashed #ccc; } .order-summary-message-group { background-color: #fff; padding: 10px; border-radius: 4px; } .order-summary-message { font-size: 16px; margin-bottom: 10px; line-height: 1.6; } .order-summary-product-name { font-weight: bold; font-size: 15px; margin-bottom: 6px; color: #333; } /* 공통 로그인/인증 폼 래퍼 */ .auth_form_wrap, .order_form_wrap { width: 600px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; position: relative; padding: 50px 20px; font-family: Pretendard Variable !important; } .login_container { margin: 20px auto; border-radius: 10px; background-color: #fff; z-index: 1; width: 432px; display: flex; flex-direction: column; align-items: center; } .login_container .form-control { width: 100%; } .login_container .form-control:focus { -webkit-box-shadow: none !important; box-shadow: none !important; border-color: #3366B9 !important; } .login_container .btn-block { width: 100%; padding: 12px 20px; } .login_container .d-flex { width: 100%; } .login_container .form-group { width: 100%; max-width: 432px; align-self: center; } .login_container .form-group.text-center { width: 100%; max-width: 432px; align-self: center; } .login_container .social-login { width: 100%; max-width: 432px; align-self: center; } .login_container .login_ico_lst { display: flex !important; justify-content: center !important; align-items: center; margin: 0 0 24px !important; padding: 0; gap: 40px !important; } .login_container .login_ico_lst .list-inline-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .login_container .login_ico_lst a { width: 48px !important; height: 48px !important; display: block !important; border-radius: 8px !important; background-size: 100% 100%; box-shadow: none !important; } .login_container .login_ico_lst .list-inline-item p { font-size: 16px; margin-top: 8px; margin-bottom: 0; white-space: nowrap; } .auth_form_wrap .bg-blue, .order_form_wrap .bg-blue { background-color: #3366B9; color: #fff; border: none; } .auth_form_wrap .bg-blue:focus, .order_form_wrap .bg-blue:focus { opacity: 1 !important; box-shadow: none !important; } .auth_form_wrap .separator, .order_form_wrap .separator { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; align-self: stretch; margin-bottom: 24px; } .separator::before, .separator::after { content: ""; flex: 1; height: 1px; background-color: #E9EBEC; width: 100%; } .separator span { padding: 0 24px; color: #3F3F3F; font-size: 16px; font-weight: 500; white-space: nowrap; } .blue_box { background-color: #F0F5FD; text-align: center; border-radius: 5px; font-size: 16px; color: #3F3F3F; width: 100%; max-width: 432px; padding: 8px; box-sizing: border-box; align-self: center; } .blue_box p { color: #3F3F3F; font-weight: 500; } .blue_border_box { text-align: center; border: 1px solid #3366B9; border-radius: 8px; padding: 12px; background-color: #fff; width: 100%; max-width: 432px; box-sizing: border-box; align-self: center; cursor: pointer; } .blue_border_box:hover, .blue_border_box:focus { background-color: #F0F5FD; border-color: #3366B9; opacity: 1 !important; } .blue_border_box p { display: flex; align-items: center; justify-content: center; color: #3366B9; font-size: 16px; font-weight: 500 !important; transition: color 0.2s ease; } .blue_border_box:hover p { color: #3366B9 !important; } .auth_form_wrap small, .order_form_wrap small { font-size: 14px; color: #3F3F3F; margin: 8px 0 24px; text-align: center; } .login_container .phone_label { font-size: 16px; font-weight: 500; } .login_container .phone_input_wrap { display: flex; flex-direction: column; gap: 0.5rem; } .login_container .phone_input { border-radius: 8px; height: 48px; } .login_container .login_btn { border-radius: 8px; font-size: 16px; color: #fff !important; height: 48px; text-align: center; } .login_container .login_btn:hover, .login_container .login_btn:focus, .login_container .login_btn:active { opacity: 1 !important; } .login_container .checkbox_label { color: #3F3F3F; } .login_container .signup_link { text-decoration: underline; color: #3F3F3F; } .auth_form_wrap .login_container .form-group { max-width: 600px; } .auth_form_wrap .login_container dt.login_title { font-size: 2rem; font-weight: 700; margin-bottom: 16px; } .login_desc { font-size: 16px; font-weight: 400; margin-bottom: 32px; } .auth_form_wrap .login_container .phone_input_wrap { width: 432px !important; } .auth_form_wrap .login_container .login_btn { width: 432px !important; } .order_form_wrap .login_container dt.login_title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; } /* 주문상품 정보 컨테이너 */ .order_form_wrap .order_product_container { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; border-radius: 8px; position: absolute; right: -56%; top: 9%; width: 340px; border: 1px solid #D2D2D2; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1); padding: 16px; } .order_form_wrap .order_product_header { text-align: center; width: 100%; max-width: 272px; } .order_form_wrap .order_product_title { color: #000; font-size: 18px; font-weight: 600;} .order_form_wrap .product_list_container { background-color: #ECF0F6; border-radius: 8px; text-align: left; width: 292px; padding: 16px 16px 8px 16px; margin-top: 16px;} .order_form_wrap .product_list { list-style: none; padding: 0; margin: 0; } .order_form_wrap .product_item { display: flex; align-items: center; padding-bottom: 8px; } .order_form_wrap .product_number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: #3366B9; color: white; font-weight: 800; font-size: 14px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; } .order_form_wrap .product_name { color: #000; font-size: 16px; font-weight: 500; max-width: 260px; } .order_form_wrap .price_info_container { text-align: center; margin-top: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .order_form_wrap .price_box { background-color: #EFEFEF; border: 1px solid #BABABA; border-radius: 8px; padding: 8px 50px; width: 292px; } .order_form_wrap .price_text { color: #3F3F3F; font-size: 16px; margin-right: 4px;} .order_form_wrap .membership_price_text { color: #3366B9; font-size: 16px; margin-right: 4px; } .order_form_wrap .arrow_container { margin: 4px; } .order_form_wrap .purchase_info_text { font-size: 16px; color: #3F3F3F; margin-top: 14px; text-align: center;} .order_form_wrap .purchase_info_text .strong { font-weight: 600;} /* 이벤트 랜딩 페이지 */ .evt_info_gud_lst {margin-top: 1.5rem;} .evt_info_gud_lst &gt; li:not(:first-child) {margin-top: 1.25rem;} .evt_info_gud_lst &gt; li &gt; dl &gt; dt {font-size: 1.25rem; font-weight: bold;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd {font-size: 1.125rem; margin-top: 0.5rem; padding-left: 0.5rem;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd &gt; p {font-size: 1.125rem; margin-top: 0.5rem; font-weight: 500;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd &gt; p + ul {margin-top: 0.25rem;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd &gt; ul &gt; li {font-size: 1rem; font-weight: 400; display: flex; align-items: flex-start; gap: 0.25rem; justify-items: flex-start; line-height: 0;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd &gt; ul &gt; li &gt; em {font-weight: bold; font-size: 2rem; line-height: 1.5rem;} .evt_info_gud_lst &gt; li &gt; dl &gt; dd &gt; ul &gt; li &gt; span {line-height: 1.5; word-break: keep-all;} .dafl_prd_intro_form .divy_prd_list_item_lst {grid-template-columns: repeat(4, 1fr); gap: 2rem;} .dafl_prd_intro_form .dnt_prd_lst_info_pric {max-width: 100%; margin-top: 0.5rem;} .dafl_prd_intro_form .divy_prd_list_cat_badge_wrap {top: 0; right: 0;} .evt_info_gud_bottom_lst .main_instl_photo_lst {grid-template-columns: repeat(8, 1fr);} .rcmdr_intro_info .dafl_title_form {margin-top: 5rem;} /* 메인페이지 리뉴얼 */ .main_top_menu_btn_lst {display: flex; justify-content: flex-start; align-items: center; gap: 1.5rem;} .main_top_menu_btn_lst &gt; li {flex: 1;} .main_top_menu_btn_lst &gt; li &gt; a {display: block;} .main_top_menu_btn_img_wrap {width: 100%; height: 0; padding-bottom: 100%; position: relative; border-radius: 50%; overflow: hidden;} .main_top_menu_btn_img_wrap &gt; img {width: 75%; height: 75%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .main_top_menu_btn_lst &gt; li:nth-child(1) .main_top_menu_btn_img_wrap {background-color: #FFF7F3;} .main_top_menu_btn_lst &gt; li:nth-child(2) .main_top_menu_btn_img_wrap {background-color: #f3f3f3;} .main_top_menu_btn_lst &gt; li:nth-child(3) .main_top_menu_btn_img_wrap {background-color: #faf8f6;} .main_top_menu_btn_lst &gt; li:nth-child(4) .main_top_menu_btn_img_wrap {background-color: #f9f5e8;} .main_top_menu_btn_lst &gt; li:nth-child(5) .main_top_menu_btn_img_wrap {background-color: #eef2f4;} .main_top_menu_btn_img_wrap + div {margin-top: 1rem; font-size: 1.25rem; font-weight: 500; text-align: center;} /*이벤트 페이지 영역 수정 25.06.18*/ .evtInfoTopWrap{position: relative; text-align: center; background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_background_img.png'); background-size: cover; height: 500px; display: flex; justify-content: center; align-items: center;} .evtInfoTopWrap-inner{display: flex; flex-direction: column; justify-content: center; align-items: center; height: 74%;} .evtInfoTopWrap-inner h1{font-family: GmarketSans; font-size: 2.5rem; font-weight: 700; margin-bottom: 0.625rem; color: #3366B9;} .evtInfoTopWrap-inner p{font-family: GmarketSans; font-size: 1rem; font-weight: 500; color: #3366B9; margin-bottom: 1rem;} .evtInfoTopWrap-inner dd {background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_cp_img.png'); background-size: cover; height: 100%; margin-top: 1.25rem;} .evtInfoTopWrap-inner ul{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 580px; height: 100%;} .evtInfoTopWrap-inner ul li{font-size: 1rem; font-weight: 500; line-height: 1.5; margin-bottom: 1rem; font-family: Pretendard Variable;} .evtInfoMiddleWrap &gt; dl &gt; dt{display: block; background-color: #3366B9; border-radius: 0.5rem; padding: 1rem; text-align: center; color: #fff; font-size: 1.25rem; font-weight: 700; font-family: Pretendard Variable; } .evtInfoMiddleWrap &gt; dl &gt; dd{display: block; margin-top: -0.5rem;} .evtInfoType1Wrap dl{display: flex; justify-content: center; align-items: center; margin: 1rem 10rem;} .evtInfoType1Wrap dl dt{flex: 0 0 35%; display: flex; justify-content: flex-start; align-items: center; font-size: 1.25rem; gap: 1.25rem; font-weight: 1000; font-family: Pretendard Variable; color: #3366B9;} .evtInfoType1Wrap h4{font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; color: #3366B9; display: flex; justify-content: flex-start; align-items: center;} .evtInfoType1Wrap p {font-size: 1rem; font-family: Pretendard Variable; line-height: 1.5;} .evtInfoType1Wrap p strong {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; line-height: 1.5;} .evtInfoType1Wrap dl dd{flex: 0 0 65%; padding: 1rem; margin-left: 1.25rem;} .evtInfoType1Wrap &gt; ul &gt; li{background-color: #F0F5FD;margin: 0rem 0 1rem 0; border-radius: 1rem;} .evtInfoType2Wrap dl{display: flex; justify-content: center; align-items: center; margin: 1rem 8rem;} .evtInfoType2Wrap dl dd{flex: 0 0 70%; padding: 1rem; margin-left: 1.25rem;} .evtInfoType2Wrap h4{font-size: 1.25rem; font-weight: 700; font-family: Pretendard Variable; color: #3366B9; display: flex; justify-content: flex-start; align-items: center;} .evtInfoType2Wrap p {font-size: 1rem; font-family: Pretendard Variable; line-height: 1.5; display: flex; align-items: flex-start; } .evtInfoType2Wrap p strong {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; line-height: 1.5;} .evtInfoType2Wrap p small {font-size: 1rem; font-weight: 300; font-family: Pretendard Variable; color: #707070; line-height: 1.5;} .evtInfoType2Wrap dl dt{flex: 0 0 30%; display: flex; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-size: 1.25rem; gap: 0.5rem; font-weight: 700; font-family: Inter; color: #3366B9;} .evtInfoType2Wrap &gt; ul &gt; li{background-color: #F0F5FD;margin: 0rem 0 1rem 0;border-radius: 1rem;} .evtInfoType2Wrap .badge-primary-bg{width: 1.5rem; height: 1.5rem; font-size: 0.75rem; font-weight: 700; font-family: Pretendard Variable; color: #FFFFFF; background-color: #3366B9; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative;} .evtInfoType2Wrap .badge-primary-num{font-size: 0.75rem; font-weight: 700; font-family: Pretendard Variable; display: inline-block; transform: translateX(-0.5px);} .evtInfo_btn_wrap {color: #fff; font-family: Pretendard Variable; font-size: 1.375rem; display: block; font-weight: bold; border-radius: 0; margin-top: 1rem;} .evtInfo_btn_wrap .btn {background-color: #3366B9; color: #fff; padding: 0.625rem 9rem; text-align: center; border-radius: 0.5rem;} .evtInfo_btn_wrap .btn .tabler--mood-plus { display: inline-block; vertical-align: text-bottom; width: 1.5rem; height: 1.5rem; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M20.985 12.528a9 9 0 1 0-8.45 8.456M16 19h6m-3-3v6M9 10h.01M15 10h.01'/%3E%3Cpath d='M9.5 15c.658.64 1.56 1 2.5 1s1.842-.36 2.5-1'/%3E%3C/g%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; margin-right: 0.5rem; } .evtCoponWrap_type{display: block; background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_cp_type_img.png'); background-size: cover; width: 226px; height: 142px; text-align: center; padding-right: 2.625rem;} .evtCoponWrap_type .evtCoponBody{display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;} .evtCoponWrap_type h4 {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; color: #3F3F3F; margin-bottom: 0.5rem;} .evtCoponWrap_type h5 {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; color: #3F3F3F; margin-bottom: -0.5rem;} .evtCoponWrap_type p {font-size: 1.375rem; font-weight: 1000; font-family: Pretendard Variable; color: #3366B9; line-height: 1;} .evtCoponWrap_type p strong {font-size: 2.75rem; font-weight: 1000; font-family: Pretendard Variable; color: #3366B9; margin-bottom: -1.25rem;} .evtCoponWrap small {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; color: #3366B9;} .tooltip {position: relative; cursor: pointer;} .tooltip .tooltiptext {visibility: hidden; width: 400px; background-color: #264D8B; color: #fff; text-align: center; border-radius: 8px; padding: 12px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; white-space: pre-line; } .tooltip .tooltiptext::after {content: ""; position: absolute; top: 90%; left: 50%; transform: translateX(-50%); border-width: 12px 10px 0 10px; border-style: solid; border-color: #264D8B transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .evtInfoType3Wrap .row {display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; background-color: #F0F5FD; border-radius: 0.5rem; gap: 2rem;} .card-evt {width: 100%; max-width: 320px; margin: 1.5rem auto; background-color: #fff; border-radius: 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center;} .card-title-evt {font-size: 1rem; font-weight: 700; font-family: Pretendard Variable; color: #3F3F3F; text-align: center; margin-bottom: 1.5rem; margin-top: 0.75rem;} .card-body-mary-img, .card-body-fnrl-img, .card-body-evt-img, .card-body-cel-img {width: 170px; height: 170px; margin: 0.5rem auto 0.75rem auto; background-size: cover; object-fit: cover; display: flex; align-items: center; justify-content: center;} .card-body-mary-img {background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_mary_img.png');} .card-body-fnrl-img {background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_fnrl_img.png');} .card-body-evt-img {background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_evt_img.png');} .card-body-cel-img {background-image: url('/common/css/images/evtInfo/daflsharp_evtInfo_cel_img.png');} .card-footer-evt &gt; a {width: 170px; background-color: #3366B9; color: #fff; border-radius: 0.5rem; padding: 0.344rem 2.781rem; margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 600; font-family: Pretendard Variable; text-align: center; display: flex; align-items: center; justify-content: center;} .link_share_form_evt {padding: 1.5rem !important;} .link_share_tool_evt_wrap &gt; ul {display: flex; justify-content: space-evenly; align-items: center; gap: 1.5rem;} .link_share_tool_evt_wrap &gt; ul &gt; li &gt; a &gt; img {width: 4rem; height: 4rem; object-fit: contain;} .link_share_tool_evt_wrap &gt; ul &gt; li &gt; a &gt; span {display: block; text-align: center; margin-top: 0.5rem; color: #FFFFFF;} .link_share_form_evt &gt; ul {display: flex; justify-content: center; align-items: center; gap: 1.75rem;} .link_share_form_evt &gt; ul &gt; li &gt; a {display: block; width: 15rem; padding: 0.75rem 0; text-align: center; font-size: 1.25rem; border: 1px solid #3366B9; border-radius: 0.5rem; color: #FFF; background-color: #3366B9;} .link_share_form_evt &gt; ul &gt; li &gt; a.link_share_btn {border: 1px solid #3366B9; border-radius: 0.5rem; color: #3366B9; background-color: #FFF;} .link_share_form_evt &gt; ul &gt; li &gt; a &gt; i {margin-left: 0.5rem;} .link_share_form_evt &gt; ul &gt; li &gt; a:hover, .link_share_form_evt &gt; ul &gt; li &gt; a:focus {opacity: 1; transition: all 0.15s ease-in-out; color: #3366B9; background-color: #FFF;} .link_share_form_evt &gt; ul &gt; li &gt; a.link_share_btn:hover, .link_share_form_evt &gt; ul &gt; li &gt; a.link_share_btn:focus {color: #FFF; background-color: #3366B9;} .link_addr_form_wrap {margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 0.25rem;} .link_addr_form_wrap &gt; input.form-control {flex: 1;} /* 앱 이벤트 팝업 폼 */ .app_evt_popup_form_mask {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10002; display: flex; justify-content: center; align-items: center;} .app_evt_popup_form {position: relative; width: 100%; max-width: 548px; height: 100%; max-height: 598px; background-size: 100%; background-repeat: no-repeat; border-radius: 16px; padding: 32px 24px 48px 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); color: white; text-align: center; animation: popupSlideIn 0.3s ease-out; overflow: hidden;} @keyframes popupSlideIn { from {transform: scale(0.8); opacity: 0;} to {transform: scale(1); opacity: 1;} } .app_evt_popup_close_btn_type_01 {position: absolute; top: 16px; right: 16px; background: none; border: none; color: #575757; width:100%; height:100%; max-width: 24px; max-height: 24px; display: flex; align-items: center; justify-content: center;} .app_evt_popup_form.slide-01 .app_evt_popup_title {width: fit-content; text-align: center; padding: 10px 24.5px 6px; margin: 0 auto 32px; color: white; background-color: #6437BF; opacity: 0.82; border-radius: 48px; font-size: 28px; font-weight: 800; font-family: 'GmarketSans';} .app_evt_popup_form.slide-02 .app_evt_popup_title {width: fit-content; text-align: center; padding: 10px 24.5px 6px; margin: 0 auto 60px; color: white; background-color: #35B2C0; opacity: 0.82; border-radius: 48px; font-size: 28px; font-weight: 800; font-family: 'GmarketSans';} .app_evt_popup_form.slide-03 .app_evt_popup_title {width: fit-content; text-align: center; padding: 10px 24.5px 6px; margin: 0 auto 60px; color: white; background-color: #E5502B; opacity: 0.82; border-radius: 48px; font-size: 28px; font-weight: 800; font-family: 'GmarketSans';} .app_evt_popup_form.slide-04 .app_evt_popup_title {width: fit-content; text-align: center; padding: 10px 24.5px 6px; margin: 0 auto 38px; color: white; background-color: #177ED2; opacity: 0.82; border-radius: 48px; font-size: 28px; font-weight: 800; font-family: 'GmarketSans';} .app_evt_popup_content {height: 320px; overflow: hidden; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center;} .app_evt_popup_content_item_type_01 {width: 80%; margin: 0 auto; background: rgba(255, 255, 255, 0.28); border-radius: 8px; padding: 16px; margin-bottom: 8px; backdrop-filter: blur(2px);} .app_evt_popup_content_item_type_02 {width: 80%; margin: 0 auto; background: transparent; padding: 16px; margin-bottom: 8px;} .app_evt_popup_content_desc {font-size: 20px; font-weight: 500; color: #2C1853; text-align: center; line-height: 1.5; font-family: 'GmarketSans';} .app_evt_popup_content_desc strong {font-size: 20px; font-weight: 800;} .app_evt_popup_form.slide-02 .app_evt_popup_content_desc {font-size: 28px; color: #0D4242;} .app_evt_popup_form.slide-02 .app_evt_popup_content_desc strong {font-size: 28px; font-weight: 800;} .app_evt_popup_form.slide-03 .app_evt_popup_content_desc {font-size: 28px; color: #3C180E;} .app_evt_popup_form.slide-03 .app_evt_popup_content_desc strong {font-size: 28px; font-weight: 800; line-height: 1.5; } .app_evt_popup_form.slide-04 .app_evt_popup_content_desc medium {font-size: 20px; font-weight: 800; color: #2C1853; text-align: center; line-height: 1.5; font-family: 'GmarketSans';} .app_evt_popup_form.slide-04 .app_evt_popup_content_desc strong {font-size: 24px; font-weight: 800;} .app_evt_popup_main_btn_wrap {position: absolute; bottom: 106px; left: 50%; transform: translateX(-50%); width: 90%; text-align: center;} .app_evt_popup_form.slide-01 .app_evt_popup_btn {width: 400px; padding: 14px 24px; background: white; color: #6437BF; border-radius: 8px; font-size: 18px; font-family: Pretendard Variable; font-weight: 800; cursor: pointer; } .app_evt_popup_form.slide-02 .app_evt_popup_btn {width: 400px; padding: 14px 24px; background: white; color: #35B2C0; border: none; border-radius: 8px; font-size: 18px; font-family: Pretendard Variable; font-weight: 800; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);} .app_evt_popup_form.slide-03 .app_evt_popup_btn {width: 400px; padding: 14px 24px; background: white; color: #E5502B; border: none; border-radius: 8px; font-size: 18px; font-family: Pretendard Variable; font-weight: 800; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);} .app_evt_popup_form.slide-04 .app_evt_popup_btn {width: 400px; padding: 14px 24px; background: white; color: #177ED2; border: none; border-radius: 8px; font-size: 18px; font-family: Pretendard Variable; font-weight: 800; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);} .app_evt_popup_form.slide-01 .app_evt_popup_btn:hover {background: #AC91E2; color: white; opacity: 1 !important;} .app_evt_popup_form.slide-02 .app_evt_popup_btn:hover {background: #CCE4E7; color: #35B2C0; opacity: 1 !important;} .app_evt_popup_form.slide-03 .app_evt_popup_btn:hover {background: #F1DBD6; color: #E5502B; opacity: 1 !important;} .app_evt_popup_form.slide-04 .app_evt_popup_btn:hover {background: #E9EEF2; color: #177ED2; opacity: 1 !important;} .app_evt_popup_pagination {position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: fit-content; margin: 0; padding: 1.5px 8px; font-size: 16px; background-color: rgba(0, 0, 0, 0.2); color: #fff; font-weight: 500; font-family: 'Pretendard Variable'; border-radius: 20px;} .app_evt_popup_btn_wrap {position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; height: 100%; max-height: 52px; overflow: hidden; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;} .app_evt_popup_today_btn {width: 100%; padding: 14px 24px; background: white; color: #4A4A4A; border: none; border-right: 1px solid #E2E2E2; font-size: 16px; font-family: Pretendard Variable; font-weight: 700; cursor: pointer;} .app_evt_popup_close_btn_type_02 {width: 100%; padding: 14px 24px; background: white; color: #4A4A4A; border: none; font-size: 16px; font-family: Pretendard Variable; font-weight: 700; cursor: pointer;} .app_evt_popup_prev_btn_wrap, .app_evt_popup_next_btn_wrap {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10003;} .app_evt_popup_prev_btn_wrap {left: 16px;} .app_evt_popup_next_btn_wrap {right: 16px;} .app_evt_popup_prev_btn, .app_evt_popup_next_btn {border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease;} .app_evt_popup_prev_btn:active, .app_evt_popup_next_btn:active {transform: scale(1.1);} .app_evt_popup_prev_btn:disabled, .app_evt_popup_next_btn:disabled {opacity: 0.5; cursor: not-allowed;} .app_evt_popup_prev_btn:disabled:active, .app_evt_popup_next_btn:disabled:active {transform: none;} /* 인증번호 입력 폼 스타일 */ .auth_code_form_wrap { margin: 0 auto; padding: 40px 20px; font-family: Pretendard Variable !important; } .auth_code_form_wrap .card { margin: 20px auto; border-radius: 10px; border: none; box-shadow: none; max-width: 400px; } .auth_code_form_wrap .card-body { padding: 20px; background-color: #fff; } .auth_code_form_wrap h2 { font-size: 1.5rem; font-weight: 500; color: #3F3F3F; margin-bottom: 32px; } .auth_code_form_wrap .font-lg {border-radius: 8px; background-color: #F8F8F8; padding: 16px; } .auth_code_form_wrap .font-lg p { font-size: 1.125rem; font-weight: 500; color: #3F3F3F; line-height: 1.4; } .auth_code_form_wrap .separator { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; align-self: stretch; margin: 24px 0; height:1px; background-color: #E9EBEC;} /* 인증코드 입력 영역 */ .auth_code_form_wrap .JS-authCodeWrap .d-flex { align-items: center !important; margin-bottom: 0.75rem; } .auth_code_form_wrap .JS-authCodeWrap .d-flex span { font-size: 1.125rem; font-weight: 500; color: #3F3F3F; } .auth_code_form_wrap .JS-authCodeWrap .form-control { height: 48px; font-size: 1rem; border: 1px solid #C9C9C9; border-radius: 8px; padding: 0 80px 0 16px; } .auth_code_form_wrap .JS-authCodeWrap .form-control:focus { -webkit-box-shadow: none !important; box-shadow: none !important; border-color: #3366B9 !important;} .auth_code_form_wrap .JS-authCodeWrap .text-primary { font-size: 1rem; color: #3366B9 !important; text-decoration: none; } .auth_code_form_wrap .JS-authCodeWrap .text-blue { font-size: 1rem; color: #3366B9; text-align: center; margin-bottom: 1rem; } /* 타이머 및 재전송 버튼 영역 */ .auth_code_form_wrap .auth-input-group { position: relative; width: 432px;} .auth_code_form_wrap .auth-timer { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: #3366B9; font-weight: 400; } .auth_code_form_wrap .gap-2 { gap: 0.5rem; } .auth_code_form_wrap .resend-btn { font-size: 1rem; color: #3366B9; background: transparent; border: 1px solid #3366B9; padding: 12px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; height: 48px; display: flex; align-items: center; } .auth_code_form_wrap .resend-btn:hover, .auth_code_form_wrap .resend-btn:active, .auth_code_form_wrap .resend-btn:focus { background-color: #F0F5FD !important; opacity: 1 !important;} .auth_code_form_wrap .d-flex.gap-2 { margin-bottom: 1rem; } /* 버튼 스타일 */ .auth_code_form_wrap .btn { height: 48px; font-size: 1.125rem; font-weight: 600; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .auth_code_form_wrap .btn-light { background-color: #F0F5FD !important; color: #3366B9 !important; box-shadow: none !important; border: none;} .auth_code_form_wrap .btn-secondary { background-color: #EEEEEE !important; color: #959595 !important; box-shadow: none !important; border: none; cursor: not-allowed;} .auth_code_form_wrap .btn-primary { background-color: #3366B9 !important; color: #fff !important; box-shadow: none !important; border: none;} .auth_code_form_wrap .btn-light:hover, .auth_code_form_wrap .btn-light:active { background-color: #F0F5FD; color: #3366B9 !important; opacity: 1 !important;} .auth_code_form_wrap .btn-secondary:hover, .auth_code_form_wrap .btn-secondary:active, .auth_code_form_wrap .btn-secondary:focus { background-color: #EEEEEE !important; color: #959595 !important; opacity: 1 !important;} .auth_code_form_wrap .btn-primary:hover { background-color: #3366B9 !important; color: #fff !important; } /* 하단 안내 문구 */ .auth_code_form_wrap .text-muted { font-size: 1.125rem; font-weight: 500; color: #3F3F3F !important; line-height: 1.5; background-color: #F8F8F8 !important; padding: 16px; border-radius: 8px;} /* 비밀번호 설정 폼 스타일 */ .pwd_chg_container { max-width: 432px; margin: 32px auto; border: none; box-shadow: none; font-family: Pretendard Variable !important; } .pwd_chg_container .card-body { background-color: #fff; border-radius: 0; } /* 비밀번호 설정 헤더 영역 */ .pwd_header { text-align: center; margin-bottom: 32px; } .pwd_title { font-size: 24px; font-weight: 700; color: #3F3F3F; margin-bottom: 8px; line-height: 1.3; } .pwd_description { font-size: 16px; color: #3F3F3F; font-weight: 400; margin-bottom: 16px; line-height: 1.5; } .pwd_phone_number { font-size: 16px; color: #3366B9; font-weight: 500; margin: 0; padding: 16px; background-color: #F0F5FD; border-radius: 8px; } .pwd_chg_container .separator { margin: 32px 0; border: 1px solid #E9EBEC; } /* 비밀번호 설정 폼 섹션 */ .pwd_form_section { margin-top: 40px; } .section_title { font-size: 20px; font-weight: 600; color: #3F3F3F; margin-bottom: 16px; text-align: left; } .pwd_form_section .form_label { display: block; font-size: 16px; font-weight: 500; color: #3F3F3F; margin-bottom: 8px; cursor: auto; } .pwd_form_section .form_control { width: 100%; height: 48px; padding: 0 20px; border: 1px solid #C9C9C9; border-radius: 8px; box-sizing: border-box; transition: all 0.2s ease; } .pwd_form_section .form_control::placeholder { color: #979797; } .pwd_form_section .form_control:focus { outline: none; border-color: #3366B9 !important; background-color: #fff; } .feedback_message { margin-top: 8px; margin-bottom: 16px; font-size: 0.875rem; color: #dc3545; min-height: 0; } .feedback_message:not(:empty) { margin-bottom: 16px; min-height: 20px; } .btn_submit { width: 100%; height: 56px; background-color: #3366B9 !important; color: #fff; border: none; border-radius: 12px; margin-top: 16px; font-size: 16px; font-weight: 400; cursor: auto; transition: all 0.2s ease; } .btn_submit:hover, .btn_submit:focus { background-color: #3366B9 !important; opacity: 1 !important; box-shadow: none !important;} .security_notice { text-align: center; font-size: 16px; color: #3F3F3F; font-weight: 400; margin: 0; } /* 공통 컨테이너 */ .auth_container, .member_join_container { width: 432px; margin: 58px auto; background-color: #ffffff; font-family: "Pretendard Variable"; } /* 공통 제목 */ .auth_title, .member_join_title { font-size: 24px; font-weight: 700; color: #3F3F3F; text-align: center; line-height: 1.5; } /* 공통 설명 */ .auth_description, .member_join_description { font-size: 16px; color: #3F3F3F; text-align: center; margin-bottom: 32px; line-height: 1.5; font-weight: 400; } /* 공통 섹션 제목 */ .auth_section_title, .section_title { font-size: 18px; font-weight: 600; color: #3F3F3F; margin-bottom: 16px; line-height: 1.5; } /* 분리선 */ .separator { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; align-self: stretch; } .separator::before, .separator::after { content: ""; flex: 1; height: 1px; background-color: #E9EBEC; width: 100%; } .separator span { padding: 0 24px; color: #3F3F3F; font-size: 16px; font-weight: 500; white-space: nowrap; } /* 공통 인풋 그룹 */ .auth_input_group, .input_group { margin-bottom: 16px; } .auth_input_row, .input_row { display: flex; gap: 8px; align-items: flex-start; } .auth_input_title, .input_title { font-size: 16px; font-weight: 500; color: #3F3F3F; margin-bottom: 8px; line-height: 1.5; } /* 공통 인풋 필드 */ .auth_input, .input_field { width: 100%; height: 48px; padding: 12px 16px; border: 1px solid #C9C9C9; border-radius: 8px; font-size: 16px; font-weight: 400; color: #3F3F3F; background-color: #ffffff; transition: border-color 0.2s ease; font-family: "Pretendard Variable"; } .auth_input::placeholder, .input_field::placeholder { color: #979797; } .auth_input:focus, .input_field:focus { outline: none; border-color: #3366B9; } .auth_input.error, .input_field.error { border-color: #FF3333; border-bottom: 1px solid #FF3333 !important; } .auth_input.error:focus, .input_field.error:focus { border-bottom: 1px solid #FF3333 !important; } .auth_input.verified, .input_field.verified { background-color: #F0F5FD; border-color: #C9C9C9; color: #3F3F3F; } /* 공통 버튼 기본 */ .auth_btn, .btn_primary, .btn_outline { height: 48px; border-radius: 8px; font-size: 16px; font-weight: 400; cursor: pointer; font-family: "Pretendard Variable"; transition: all 0.2s ease; white-space: nowrap; } /* 공통 기본 버튼 */ .auth_btn_primary, .btn_primary { background-color: #3366B9; color: #ffffff; border: none; padding: 0 16px; } .auth_btn_primary:disabled, .btn_primary:disabled { background-color: #E9ECEF; color: #999999; cursor: not-allowed; } /* 공통 외곽선 버튼 */ .auth_btn_outline, .btn_outline { background-color: #ffffff; color: #3366B9; border: 1px solid #3366B9; width: 100%;} .auth_btn_outline:disabled, .btn_outline:disabled { background-color: #F8F9FA; color: #999999; border-color: #EEEEEE; cursor: not-allowed; } .auth_btn_outline:focus-visible, .btn_outline:focus-visible { outline: none; border-color: #3366B9; } /* 공통 전체폭 버튼 */ .auth_btn_full, .btn_full { width: 100%; } /* 공통 메시지 */ .auth_message, .error_message, .success_message { font-size: 16px; margin-top: 8px; line-height: 1.4; display: flex; align-items: center; gap: 4px; } .auth_message.error, .error_message { color: #FF3333; } .auth_message.success, .success_message { color: #0C8260; } /* 공통 체크박스 */ .auth_checkbox { appearance: none; width: 16px; height: 16px; border: 2px solid #EEEEEE; border-radius: 50%; margin-right: 8px !important; position: relative; cursor: pointer; background-color: #ffffff; transition: all 0.2s ease; } .auth_checkbox:checked { background-color: #3366B9; border-color: #3366B9; } .auth_checkbox:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px; font-weight: bold; border-radius: 2px; } /* 간편 가입 폼 */ .simple_join_title { margin-bottom: 8px; } .phone_auth_btn { padding: 0 16px; margin-bottom: 16px; } .sns_login_title { font-size: 16px; font-weight: 500; color: #3F3F3F; text-align: center; margin: 24px 0; } .sns_btn { display: flex; align-items: center; justify-content: center; padding: 0 20px; text-decoration: none; margin-bottom: 12px; } .sns_btn_kakao { background-color: #FEE500; color: #371C1D; margin-top: 24px; } .sns_btn_kakao:hover, .sns_btn_kakao:focus, .sns_btn_kakao:active { text-decoration: none; opacity: 1; color: #371C1D !important; } .sns_btn_naver { background-color: #03C75A; color: #ffffff; } .sns_btn_naver:hover, .sns_btn_naver:focus, .sns_btn_naver:active { text-decoration: none; opacity: 1; color: #ffffff !important; } .sns_btn_google { background-color: #ffffff; color: #3F3F3F; border: 1px solid #EEEEEE; } .sns_btn_google:hover, .sns_btn_google:focus, .sns_btn_google:active { text-decoration: none; opacity: 1; color: #3F3F3F !important; } .sns_btn_apple { background-color: #000000; color: #ffffff; } .sns_btn_apple:hover, .sns_btn_apple:focus, .sns_btn_apple:active { text-decoration: none; opacity: 1; color: #ffffff !important; } .sns_btn_icon { width: 24px; height: 24px; margin-right: 16px; } .login_link_container { text-align: center; margin-bottom: 24px; font-size: 16px; font-weight: 400; } .login_link_text { color: #666666; } .login_link { color: #3F3F3F; text-decoration: underline; cursor: pointer; } .login_link:hover { text-decoration: underline !important; } .contact_info { text-align: center; color: #3F3F3F; background-color: #F0F5FD; padding: 8px; border-radius: 8px; font-size: 16px; font-weight: 500; } /* 약관 동의 폼 */ .terms_agreement_title { margin-bottom: 32px; } .terms_all_agree { margin-bottom: 16px; } .terms_checkbox_item { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .terms_checkbox_item::last-child { padding: 8px 0; } .terms_checkbox_left { display: flex; align-items: center; flex: 1; } .terms_checkbox_input { border-radius: 4px; } .terms_checkbox_label { font-size: 16px; font-weight: 400; color: #3F3F3F; cursor: pointer; flex: 1; } .terms_required { color: #FF3333; font-weight: 400; } .terms_optional { color: #3F3F3F; font-weight: 400; } .terms_view_link { color: #3366B9 !important; text-decoration: underline !important; font-size: 16px; font-weight: 400; cursor: pointer; } .terms_view_link:hover {opacity: 1 !important; } .terms_notice_text { font-size: 14px; color: #3F3F3F; line-height: 1.5; margin: 4px 0 24px; } .terms_button_container { display: flex; gap: 12px; margin-bottom: 24px; } .terms_button_prev { flex: 1; background-color: #F0F5FD; color: #3366B9; } .terms_button_agree { flex: 1; background-color: #E9ECEF; color: #999999; border: none; cursor: not-allowed; } .terms_button_agree.active { background-color: #3366B9; color: #ffffff; cursor: pointer; } .terms_button_agree.active ~ .terms_button_prev, .terms_button_container .terms_button_prev.enabled { background-color: #E9ECEF; color: #999999; } .terms_bottom_notice { text-align: center; color: #3F3F3F; background-color: #F8F8F8; padding: 8px; border-radius: 8px; font-size: 16px; font-weight: 500; margin-top: 24px; } .terms_age_notice { font-size: 14px; color: #3F3F3F; line-height: 1.5; margin-top: 16px; } /* 회원가입 폼 */ .member_join_title { margin-bottom: 8px; } .member_join_description { margin-bottom: 32px; } .section_title { margin: 24px 0 16px; } .auth_timer { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #3366B9; font-size: 16px; font-weight: 400; background-color: transparent; } .auth_timer.error_state { top: 30%; right: 16px; } .auth_input_wrapper { position: relative; flex: 1; } .flex_1 { flex: 1; } .w_88 { width: 88px; } .w_104 { width: 104px; } .hidden { display: none !important; } /* 유효성 검사 */ form .VALIDATE_ERROR_MSG { border-bottom: 1px solid #C9C9C9 !important; } form .VALIDATE_ERROR_MSG:focus { border-bottom: 1px solid #3366B9 !important; } /* 기본 폰트 설정 */ .dafl_list_sect_form dt, .dafl_list_sect_form dd { font-family: 'Pretendard Variable' !important; } .dafl_list_sect_form dt &gt; div &gt; p { font-size: 24px; font-weight: 700; } /* 친구 추천 혜택 안내 */ .frnd_recmd_bnft_guid { background-color: #F0F5FD !important; border-radius: 8px; margin-bottom: 16px; padding: 24px; position: relative; overflow: hidden; font-family: 'Pretendard Variable'; } .frnd_recmd_bnft_guid h3 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 20px; color: #3366B9; margin-bottom: 30px; } .frnd_recmd_bnft_guid .subtitle { color: #4A90E2; font-size: 18px; font-weight: 600; margin-bottom: 25px; } .frnd_recmd_bnft_guid .benefit_item { margin-bottom: 20px; display: flex; align-items: center; } .frnd_recmd_bnft_guid .benefit_item .benefit_label { color: #3F3F3F; font-size: 16px; font-weight: 700; margin-right: 20px; min-width: 120px; } .frnd_recmd_bnft_guid .benefit_item .benefit_desc { color: #3F3F3F; font-size: 16px; } .frnd_recmd_bnft_guid .text_content { max-width: 70%; } .frnd_recmd_bnft_guid .benefit_image { position: absolute; right: 18px; bottom: 0; } .frnd_recmd_bnft_guid .benefit_image img { width: 100%; max-width: 325px; } /* 나의 추천인 코드 &amp; 친구에게 링크 공유하기 컨테이너 */ .rcmdr_actions_container { display: flex; gap: 16px; font-family: 'Pretendard Variable'; } /* 친구에게 링크 공유하기 */ .frnd_link_pubos { background-color: #f8f9fa; border-radius: 8px; padding: 16px 24px; flex: 0 0 60%; display: flex; flex-direction: column; justify-content: center; } .frnd_link_pubos h6 { color: #3F3F3F; font-size: 16px; font-weight: 700; margin-bottom: 16px; text-align: center; } .frnd_link_pubos .share_buttons { display: flex; gap: 8px; justify-content: center; } .frnd_link_pubos .kakao_share_btn, .frnd_link_pubos .sms_share_btn, .frnd_link_pubos .link_copy_btn { height: 48px; border: none; border-radius: 8px; font-size: 16px; font-weight: 400; flex: 1; padding: 12px 0; } .frnd_link_pubos .kakao_share_btn { background-color: #FEE601; color: #371C1D; } .frnd_link_pubos .sms_share_btn, .frnd_link_pubos .link_copy_btn { background-color: #3366B9; color: white; } .frnd_link_pubos .kakao_share_btn span, .frnd_link_pubos .link_copy_btn span { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; } /* 나의 추천인 코드 */ .my_rcmdr_cd_form { background-color: #f8f9fa; border-radius: 8px; padding: 16px 24px; text-align: center; flex: 0 0 40%; display: flex; flex-direction: column; justify-content: center; } .my_rcmdr_cd_form h6 { color: #3F3F3F; font-size: 16px; font-weight: 700; margin-bottom: 16px; } .my_rcmdr_cd_form .code_container { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 0; } .my_rcmdr_cd_form .code_input { background-color: white; border: 2px solid #DDDEE0; border-radius: 8px; font-size: 16px; font-weight: 700; letter-spacing: 1px; padding: 12px 16px; text-align: center; width: 180px; color: #3F3F3F; font-family: 'Pretendard Variable'; } .my_rcmdr_cd_form .copy_btn, .my_rcmdr_cd_form .create_btn { background-color: #3366B9; border: none; border-radius: 8px; color: white; font-size: 16px; font-weight: 400; } .my_rcmdr_cd_form .copy_btn { padding: 12px 24px; } .my_rcmdr_cd_form .create_btn { padding: 12px 84px; } .my_rcmdr_cd_form .create_btn:hover, .my_rcmdr_cd_form .create_btn:active, .my_rcmdr_cd_form .create_btn:focus { opacity: 1 !important; box-shadow: none !important; } /* 공통 컨테이너 스타일 */ .main_image, .invite_message, .benefit_list, .code_input_wrap { max-width: 580px; margin: 0 auto; border-radius: 8px; } .evtInfoWrap img { width: 100%; height: auto; display: block; } .main_image { overflow: hidden; } /* 초대 메시지 */ .invite_message { height: 59px; display: flex; align-items: center; justify-content: center; background: rgba(240, 245, 253, 0.8); font-size: 18px; font-weight: 500; font-family: 'GmarketSans'; } .invite_message strong { color: #7F66FF; font-weight: 800; } /* 혜택 영역 */ .evtInfoWrap .benefit_list { padding: 24px; background: #F8F8F8; font-size: 24px; font-weight: 800; color: #7F66FF; font-family: 'GmarketSans'; } /* 혜택 컨테이너 및 아이템 */ .benefit_items_container { position: relative; max-width: 320px; margin: 0 auto; } .benefit_item_new { display: flex; align-items: center; margin-bottom: 8px; position: relative; padding: 16px 24px; background: #fff; border-radius: 8px; } .benefit_item_new:last-child { margin-bottom: 0; } /* 혜택 아이콘 */ .benefit_icon { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 24px; flex-shrink: 0; position: relative; z-index: 2; } .benefit_item_new:nth-child(1) .benefit_icon img { width: 100%; max-width: 48px; } .benefit_item_new:nth-child(2) .benefit_icon img { width: 100%; max-width: 49px; } .benefit_item_new:nth-child(3) .benefit_icon img { width: 100%; max-width: 52px; } .benefit_icon.yellow_bg { background: #FCF7DA; } .benefit_icon.blue_bg { background: #CAE8F8; } .benefit_icon.pink_bg { background: #EFD2E9; } /* 혜택 콘텐츠 */ .benefit_content { flex: 1; text-align: left; color: #3F3F3F; } .benefit_content h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; line-height: 1.5; } .benefit_content p { font-size: 16px; font-weight: 400; margin: 0; line-height: 1.5; } /* 연결선 */ .benefit_connector_left { position: absolute; left: 52px; bottom: -14px; width: 8px; height: 20px; background: #D9D9D9; border-radius: 8px; z-index: 1; } .benefit_connector_right { position: absolute; right: 52px; bottom: -14px; width: 8px; height: 20px; background: #D9D9D9; border-radius: 8px; z-index: 1; } /* 버튼 스타일 */ .btn-purple { max-width: 580px; width: calc(100% - 40px); margin: 0 auto; padding: 12px; display: flex; background: #7F66FF; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; align-items: center; justify-content: center; gap: 10px; font-family: 'Pretendard Variable'; } .btn-purple-border { border: 1px solid #2F13BE; padding: 14px !important; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .bottom_btn_wrap { display: flex; align-items: center; justify-content: center; flex-direction: column; } .bottom_btn_wrap .btn-purple { font-weight: 400; } .bottom_btn_wrap .btn_purple_text { font-size: 16px; font-weight: 500; font-family: 'Pretendard Variable'; margin-top: 12px; } /* 코드 입력 영역 */ .code_input_wrap { padding: 16px 24px; background: #F8F8F8; font-family: 'Pretendard Variable'; } .code_input_wrap div &gt; p { margin-bottom: 0; font-size: 16px; font-weight: 700; } .code_input_wrap div &gt; small { font-size: 14px; font-weight: 400; } .code_input_wrap_inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .code_input_wrap input { width: 100%; height: 48px; padding: 12px 24px; border: 1px solid #C9C9C9; border-radius: 8px; background: #EBEBEB; text-align: center; font-size: 16px; font-family: 'Pretendard Variable'; } .code_input_wrap button { width: 100%; max-width: 80px; height: 48px; padding: 12px; border: 1px solid #2F13BE; border-radius: 8px !important; background: #fff; color: #2F13BE; font-size: 16px !important; font-weight: 400; } /* 회원가입 완료 추천인 다이얼로그 */ .memJoin_fn_rcmdr_popup_wrap { max-width: 480px; padding: 32px 23px !important; margin: 0 auto; text-align: center; overflow: hidden !important; font-family: 'Pretendard Variable' !important; } .memJoin_fn_close_btn { position: absolute; top: 8px; right: -1px; cursor: pointer; z-index: 10; } .memJoin_fn_header { display: flex; flex-direction: row; gap: 12px; align-items: center; justify-content: center; margin-bottom: 16px; } .memJoin_fn_img { width: 32px; height: auto; } .memJoin_fn_title { color: #3F3F3F; font-size: 24px; font-weight: 700; } .memJoin_fn_desc { color: #3F3F3F; font-size: 16px; font-weight: 500; padding: 16px 0; } .memJoin_fn_invite_text { font-size: 16px; font-weight: 500; color: #3F3F3F; padding-top: 16px; border-top: 1px solid #C9C9C9; } .memJoin_fn_input { width: 100%; height: 48px; border-radius: 8px; border-color: #C9C9C9; margin: 0 auto; font-family: 'Pretendard Variable' !important; } .memJoin_fn_input:focus { border-color: #3366B9 !important; box-shadow: none !important; } .memJoin_fn_btn_wrap { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: center; margin-top: 24px; font-family: 'Pretendard Variable' !important; } .memJoin_fn_btn { font-weight: 400 !important; font-size: 16px !important; width: 100%; margin: 0 !important; } .memJoin_fn_btn:hover { opacity: 1 !important; } .memJoin_fn_btn_wrap .btn:active { color: #3366B9 !important; } /* 꽃집청년들 css */ .dafl_outsi_prd_wrap .container { width: 100%; max-width: 800px; margin: 0 auto; } .dafl_outsi_prd_wrap .row {margin-left: 0; margin-right: 0;} .dafl_outsi_prd_wrap .d23-img { position: relative; } .dafl_outsi_prd_wrap .d23-img .img-text { position: absolute; top: 0; left: 0; padding: 5rem; } .dafl_outsi_prd_wrap h1 { font-size: 4rem; font-weight: bold; line-height: 1.5; } .dafl_outsi_prd_wrap h3 {font-size: 1.5rem; font-weight: bold; line-height: 1.5; margin-bottom: 1rem;} .dafl_outsi_prd_wrap h4 { font-size: 1.125rem; font-weight: 700; word-break: keep-all; } .dafl_outsi_prd_wrap h4 span { font-size: 1.125rem !important; display: block; } .dafl_outsi_prd_wrap .d23-img .img-text h4 { color: #000; font-weight: 300; } .dafl_outsi_prd_wrap .d23-img img { display: block !important; object-fit : cover; max-width: 100%; object-fit: cover; } .dafl_outsi_prd_wrap .d23-text { padding: 5rem 2.5rem; background-color: #f3f3f3; } .dafl_outsi_prd_wrap .d23-text-box { padding: 2.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08); } .dafl_outsi_prd_wrap .d23-text-item { display: flex; align-items: flex-start; gap: 5rem; align-self: stretch; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image { width: 5rem; height: 5rem; border-radius: 5rem; background: #D9D9D9; overflow: hidden; } .dafl_outsi_prd_wrap .d23-text-profile p { color: rgba(0, 0, 0, 0.50); font-size: 0.75rem; text-align: center; } .dafl_outsi_prd_wrap .d23-text-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; flex: 1 0 0; } .dafl_outsi_prd_wrap .d23-text-text p { color: rgba(0, 0, 0, 0.50); font-size: 1.125rem; } .dafl_outsi_prd_wrap .detail-2023 p { font-size: 1rem; color: rgba(0, 0, 0, 0.50); } .dafl_outsi_prd_wrap .division { display: flex; padding: 5rem 0; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; } .dafl_outsi_prd_wrap .d23-text-text&gt;.division { padding: 0; } .dafl_outsi_prd_wrap .division-box { display: flex; align-items: flex-start; gap: 4px; } .dafl_outsi_prd_wrap .division-line { width: 2.5rem; height: 3px; } .dafl_outsi_prd_wrap .d23-text-text .division-line { width: 2rem; height: 2px; } .dafl_outsi_prd_wrap .division-line:nth-child(1) { background-color: #FBCA17; } .dafl_outsi_prd_wrap .division-line:nth-child(2) { background-color: #52B1E4; } .dafl_outsi_prd_wrap .division-line:nth-child(3) { background-color: #70A100; } .dafl_outsi_prd_wrap .detail-2023 h4 { font-size: 1.125rem; } .dafl_outsi_prd_wrap .d23-text-text&gt;h4 { line-height: 1.6; } .dafl_outsi_prd_wrap .detail-2023 span { font-size: 0.75rem; } .dafl_outsi_prd_wrap .d23-text-text&gt;span { color: #777; font-size: 0.75rem; } .dafl_outsi_prd_wrap .one-item p { font-size: 1rem; columns: #777; } .dafl_outsi_prd_wrap .d3-list {margin-left: 1rem;} .dafl_outsi_prd_wrap .d3-list &gt; li {color: #777; font-size: 0.875rem; list-style-type: disc; font-weight: 400; line-height: 1.6;} .dafl_outsi_prd_wrap .d23-text-sm {font-size: 0.875rem; color: #777; padding: 0.5rem 0;} .dafl_outsi_prd_wrap .d23-text-sm &gt; span {font-size: 1rem !important;} .dafl_outsi_prd_wrap .d23-img-size {position: absolute; left: 2.5rem; top: 2.5rem;} .dafl_outsi_prd_wrap .d23-img-size-item {width: 7.5rem; height: 7.5rem; padding: 1rem; display: flex; flex-wrap: wrap; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: center; background-color: rgba(256, 256, 256, 0.4); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.02); border-radius: 999px; font-size: var(--font-size-md); font-weight: 400; color: #000; text-align: center; word-break: keep-all;} .dafl_outsi_prd_wrap .d23-img-size-item i {font-size: 1.5rem; display: block; text-align: center; color: #333;} .dafl_outsi_prd_wrap .modal-option-table table { margin: 0 0 1.25rem 0; padding: 0; width: 100%; } .dafl_outsi_prd_wrap .modal-option-table table th, .dafl_outsi_prd_wrap .modal-option-table table td { border: 1px solid #E5E5E5; padding: 0.625rem; font-size: 0.875rem; color: #777; text-align: center; } .dafl_outsi_prd_wrap .modal-option-table table th { font-weight: 700; background-color: #F0F0F0; } .dafl_outsi_prd_wrap .modal-option-table table td { background-color: #FFF; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f7 { background: url("https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f7.jpg") no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m2 { background: url("https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m2.jpg") no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f1 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f1.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f2 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f2.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f3 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f3.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f4 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f4.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f5 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f5.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f6 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f6.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f7 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f7.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f8 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f8.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f9 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f9.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f10 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f10.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-f11 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-f11.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m1 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m1.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m2 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m2.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m3 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m3.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m4 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m4.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m5 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m5.jpg') no-repeat; background-size: cover; } .dafl_outsi_prd_wrap .d23-text-profile .profile-image-m6 { background: url('https://www.f-mans.com/data/images/detail/2023/detail/profile-image-m6.jpg') no-repeat; background-size: cover; }</pre></body></html>