/* 경조 서비스 안내 */ .cdlc_srv_flow_box_wrap{width:858px; margin:0 auto 3rem;} .cdlc_srv_flow_box_wrap > div{display:inline-block; vertical-align:middle;} .cdlc_srv_flow_box_wrap .cdlc_srv_desc_box_wrap{width:330px; min-height:70px; padding:0.8rem 0; text-align:center; background-color:#2157d0; color:#fff; border:1px solid #2157d0; border-radius:5px; box-shadow:-2px 2px 10px rgba(0, 0, 0, 0.2);} .cdlc_srv_flow_box_wrap .cdlc_srv_desc_box_wrap em{font-size:1.5rem;} .cdlc_srv_flow_box_wrap .cdlc_srv_desc_box_wrap span{display:block; font-size:1.125rem;} .cdlc_srv_flow_box_wrap .cdlc_srv_desc_box_out_info{display:block; margin-top:0.3rem; padding-left:45px; font-size:0.9rem; color:#999;} .cdlc_srv_flow_box_wrap .cdlc_srv_desc_icon{margin:0 5rem; font-size:1.5rem;} .cdlc_srv_flow_img_sm_wrap{width:722px; margin:0 auto 5rem;} .cdlc_srv_flow_img_sm_wrap > div{display:inline-block; vertical-align:middle;} .cdlc_srv_flow_img_sm_wrap .cdlc_srv_desc_img p{font-size:1.5rem; text-align:center;} .cdlc_srv_flow_img_sm_wrap .img_sttl_exps{position:relative; min-width:230px;} .cdlc_srv_flow_wrap{margin-bottom:3rem; padding-top:3rem; background-color:#fdfdfd; border:1px solid #ddd; border-radius:5px;} .cdlc_srv_flow_img_sm_wrap .img_sttl_exps span{display:block; width:84px; height:118px; margin:0.5rem auto 0; text-indent:-9999px; background:url('/common/css/img/icon_pay.png') no-repeat center; background-size:contain;} .cdlc_srv_flow_img_sm_wrap .img_sttl_exps p{margin-top:6px;} .cdlc_srv_flow_img_sm_wrap .img_minus{margin:0 7rem;} .cdlc_srv_flow_img_sm_wrap .img_minus span{display:block; width:25px; height:8px; text-indent:-9999px; background:url('/common/css/img/icon_minus.png') no-repeat center; background-size:contain;} .cdlc_srv_flow_img_sm_wrap .img_divy_exps{position:relative;} .cdlc_srv_flow_img_sm_wrap .img_divy_exps span{display:block; width:151px; height:100px; text-indent:-9999px; background:url('/common/css/img/icon_divy.png') no-repeat center; background-size:contain;} .cdlc_srv_flow_img_sm_wrap .img_divy_exps p{margin-top:0.5rem; margin-bottom:-0.8rem;} .cdlc_srv_flow_img_lg_wrap{margin:0 auto 3rem;} .cdlc_srv_flow_img_lg_wrap .cdlc_srv_desc_icon{position:relative;} .cdlc_srv_flow_img_lg_wrap .cdlc_srv_desc_icon span{position:absolute; top:112.5px; margin-left:220px; display:block; width:26px; height:25px; text-indent:-9999px; background:url('/common/css/img/icon_groh.png') no-repeat center; background-size:contain;} .cdlc_srv_flow_img_lg_wrap .cdlc_srv_desc_img{width:250px; margin:0 auto; text-align:center;} .cdlc_srv_flow_img_lg_wrap .cdlc_srv_desc_img h3{margin-bottom:0.8rem; font-weight:bold; font-size:2rem; color:#2157d0;} .cdlc_srv_flow_img_lg_wrap .cdlc_srv_desc_img span{display:block; width:196px; height:186px; text-indent:-9999px; background:url('/common/css/img/icon_dnat.png') no-repeat center; background-size:contain;} .cdlc_srv_info{margin:0 auto 3rem;} .cdlc_srv_info span{display:block; font-weight:bold;} #cdlcSrvClbDetInfo textarea{ width:100%; height:150px; max-height:150px; overflow-y:scroll;} .cdlcSrvSttlAmtLstWrap {display: block;width: 100%;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-icon {display: block !important;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label { background-color: #FFF; width: 100%; padding: 0px;border: 0px; margin: 0; border:1px solid #DDD; border-radius: 0.25rem;padding: 0.75rem 0.75rem 0.25rem;font-size: 0.8rem; } .cdlcSrvSttlAmtLstWrap .ui-icon-background { background-image: none; display: block; border: 0px; border-radius: 0px; background-color: #FFF; background-repeat: no-repeat; width: 100%; height: 150px; background-size: contain ; padding: 0px; background-position: center center; margin: 0px;box-shadow: inherit; transition: all 0.2s ease-in-out ; margin-bottom: 0.5rem; } .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label.ui-checkboxradio-checked { background-color: #2196f3; color: #FFF; z-index: 0;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label.ui-checkboxradio-checked .ui-icon-background{ width: 100% !important; height: 150px !important; border: 1px solid #DDD; } .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label, .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label span {box-shadow: none !important;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-disabled.ui-state-disabled {position: relative; opacity: 1;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-disabled.ui-state-disabled .prdNm {z-index: 2; opacity: 0.35;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-disabled.ui-state-disabled:before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #ffffffa6; z-index: 1;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-disabled.ui-state-disabled:after {content: "해당 상품은 선택하신 상품과 중복 신청이 불가능합니다."; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 90%; opacity: 1; z-index: 3; color: #ff0019; white-space: normal; word-break: keep-all; filter: brightness(1.1); font-weight: 500; font-size: 1rem;} .cdlc_srv_apl_form{margin-bottom:0;} .cdlc_srv_apl_check_form_wrap p{margin-bottom:0;} .cdlc_srv_apl_form_check{margin-bottom:3rem;} .cdlc_srv_apl_form_check label:hover{cursor:pointer;} .cdlc_srv_apl_form_check .all_check{margin-top:0.5rem; font-size:1.125rem; text-decoration:underline;} .cdlc_srv_apl_form_check h1{font-size:1.125rem; font-weight:bold;} .cdlc_srv_apl_form_check h1 .badge_mand{display:inline-block; margin-top:-3px; padding:0.1rem 0.3rem; font-size:0.8rem; font-weight:normal; text-align:center; background-color:#4da13d; color:#fff; border:1px solid #4da13d; border-radius:5px; vertical-align:middle;} .cdlc_srv_apl_form_check .textarea{padding:0.8rem 0.5rem; background-color:#f5f5f5; border:1px solid #ddd;} .cdlc_srv_apl_form_check .form_radio_wrap{margin-top:0.5rem;} .cdlc_srv_apl_form_check .form_radio_wrap label{margin-left:1rem;} .cdlc_srv_apl_form_wrap{margin-bottom:1.5rem;} .cdlc_srv_apl_form_wrap h1{margin-bottom:0.8rem; font-size:1.125rem; font-weight:bold;} .cdlc_srv_apl_form_wrap table{width:100%; border-top: 1px solid #bbb;} .cdlc_srv_apl_form_wrap table tr{border-bottom:1px solid #efefef;} .cdlc_srv_apl_form_wrap table tr td{padding:0.5rem 0.3rem 0.5rem 0.8rem;} .cdlc_srv_apl_form_wrap table .form_ttl{width:15%; padding-left:1rem; font-weight:bold; background-color:#f5f5f5;} .cdlc_srv_apl_form_wrap input:not(:input[type='radio']), .cdlc_srv_apl_form_wrap textarea{width:100%; padding-left:8px; border:1px solid #ddd; outline:0;} .cdlc_srv_apl_form_wrap input#dlvDt{width:20%;} .cdlc_srv_apl_form_wrap textarea{height:100px; overflow-y:scroll;} .cdlc_srv_apl_form_wrap .sttl_mthd li input{width:auto; margin-right:5px;} .cdlc_srv_apl_finl_amt{width:100%; margin-bottom:1.5rem; text-align:center;} .cdlc_srv_apl_finl_amt p{margin-bottom:0; font-size:1.125rem;} .cdlc_srv_apl_finl_amt p em{font-weight:bold; font-size:1.5rem; border-bottom:2px solid #ff0000;} .cdlc_srv_apl_form_wrap .form_det{font-size:0.85rem; color:#36F;} .cdlcDntSrvList {margin-bottom: 5rem;} .cdlcDntSrvList .card { border: 0px !important; } .cdlcDntSrvList .card>.card-body { background-color: #f4f4f4; padding: 30px 30px 25px; font-size: 1rem; border-radius: 0.25rem; } .cdlcDntSrvList .card .card-title { border-left: 5px solid #0384f2; padding-left: 10px; color: #4d66b9; font-size: 21px; margin-bottom: 15px; } .cdlcDntSrvList .card .card-footer { color: #6288d6; border-radius: 0; padding: 0; background-color: inherit; border-top: 0; margin-top: 0.5rem; } .club_flag_list { list-style: none; margin: 0px; padding: 0px; } .club_flag_list>li { display: inline-block; width: 150px; padding: 5px; } .club_flag_list:after { display: block; clear: both; content: ""; } .cdlcSrvSttlAmtLstItem { border: 1px solid #DDD; padding: 1rem; border-radius: 0.25rem; display: block; position: relative; } .cdlcSrvSttlAmtLstItemImgWrap { height: 120px; width: 100%; transition: all 0.2s ease-in-out; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } .cdlcSrvSttlAmtLstItem i { border-top: 6px solid #082278; border-right: 6px solid transparent; border-left: 6px solid transparent; position: absolute; top: 17px; left: 7px; } .cdlcSrvSttlAmtLstItem .prdNm { position: absolute; top: -7px; background-color: #082278; color: #FFF; border-radius: 0.25rem; padding: 1px 5px; font-size: 0.7rem; } .cdlcSrvSttlAmtLstItem .prdNm span { max-width: 98px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user_list .cdlcSrvSttlAmtLstItem .prdNm i { border-top: 6px solid #707070; } .user_list .cdlcSrvSttlAmtLstItem .prdNm { position: absolute; background-color: #707070; color: #FFF; } .cdlcSrvSttlAmtLstItemImgWrap:hover { background-size: 150% 150%; } .cdlcSrvSmry { font-size: 0.9rem; } .JS-imgPrduListWrap {display: block;} .JS-imgPrduListWrap>li{display: inline-block;width: 50%;position: relative;} .JS-imgPrduListWrap>li .JS-imgResizeBtn{position: absolute;right:15px;top:15px;background-color: #FFF;border:1px solid #DDD;padding: 5px 10px;border-radius: 0.25rem;} .JS-imgPrduListWrap>li>a p{display: block;border:1px solid #DDD;margin:5px; height: 120px;background-size: 100%;background-position: center;background-repeat: no-repeat;transition: all 0.2s ease-in-out;} .JS-imgPrduFrame > div{display: block;border:1px solid #DDD; height: 190px;background-size: 100%;background-position: center;background-repeat: no-repeat;transition: all 0.2s ease-in-out;} .JS-imgPrduFrame > div:hover{background-size: 150%;} .JS-imgPrduFrame .JS-imgResizeBtn{position: absolute;right:15px;top:15px;background-color: #FFF;border:1px solid #DDD;padding: 5px 10px;border-radius: 0.25rem;} .JS-imgPrduListWrap>li>a h6{text-align: center;padding: 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .JS-imgPrduListWrap>li>a:hover p{background-size: 150%;} .JS-imgPrduListWrap.JS-itemCnt2>li{width: 50%;} .JS-imgPrduListWrap.JS-itemCnt2>li>a p{height: 80px;} .JS-imgPrduListWrap.JS-frameWrthList>li{width: 33.3%;} .JS-imgPrduListWrap.JS-frameWrthList>li>a p{height: 220px;} .JS-imgPrduListWrap.JS-wrthDialogList>li{width: 20%;} .JS-imgPrduListWrap.JS-wrthDialogList.JS-itemCnt2>li{width: 50%;} .JS-imgPrduListWrap.JS-wrthDialogList>li>a p{height: 220px;} .JS-imgPrduListWrap.JS-wrthDialogList.JS-itemCnt2>li>a p{height: 300px;} #cdlcSrvAplForm .form-control {height: 38px; padding: 6px 15px !important;} .dafl_cdlc_srv_apl_bnft_form label {margin-bottom: 0;} .dafl_cdlc_srv_apl_bnft_form .card + .card {margin-top: 0.5rem;} .dafl_cdlc_srv_apl_bnft_form .input-group + .input-group {margin-top: 0.5rem;} .dafl_cdlc_srv_apl_bnft_form .card > .card-body {padding: 0.75rem;} .dafl_cdlc_srv_apl_bnft_form .ui-controlgroup > .ui-controlgroup-item:focus, .dafl_cdlc_srv_apl_bnft_form .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {z-index: 10;} .dafl_cdlc_srv_apl_bnft_form .form-group > label {font-weight: bold; margin-bottom: 0.5rem;} .dafl_cdlc_srv_apl_bnft_form .form-group + .form-group {margin-top: 2rem;} .dafl_cdlc_srv_apl_bnft_form .form-control.w-120px {width: 30% !important; max-width: 120px;} .dafl_cdlc_srv_apl_bnft_form .frame_wrth_det_ty {display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0; margin-bottom: 0;} .dafl_cdlc_srv_apl_bnft_form .frame_wrth_det_ty > li {list-style: none;} .dafl_cdlc_srv_apl_bnft_form .frame_wrth_img_optn {display: flex; justify-content: flex-start; align-items: center; gap: 1rem;} .cdlc_srv_apl_finl_amt em {font-style: normal; margin-left: 0.5rem;} .frame_wrth_sze_optn {display: inline-block; position: relative;} .frame_wrth_sze_optn > ul {display: inline-block; padding-left: 0;} .frame_wrth_sze_optn > ul > li {list-style: none;} .frame_wrth_sze_optn > ul > li:not(:first-child) {margin-top: 0.5rem;} .frame_wrth_sze_optn > a {position: absolute; top: 3px; right: -1rem; transform: translateX(100%);} .divy_req_evt_sxn_cd_wrap > li:not(:last-child) {margin-bottom: 0.5rem;} .pinfo_clct_util_agr {padding-bottom: 10rem;} /* 친환경 기부상품 상품소개 */ .cdlcDntSrvList .dnt_prd_info {margin-top: 1rem;} .cdlcDntSrvList .dnt_prd_info > ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 1rem;} .cdlcDntSrvList .dnt_prd_info > ul > li {width: 100%; padding: 0;} .cdlcDntSrvList .dnt_prd_info > ul > li:after {display: none; } .cdlcDntSrvList .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);} .cdlcDntSrvList .dnt_prd_info .card > .card-body {position: relative; background-color: transparent; padding: 1.5rem 2rem;} .cdlcDntSrvList .dnt_prd_info .card > .card-body dl {margin-bottom: 0;} .cdlcDntSrvList .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;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_num > span {position: absolute; top: 40%; left: 40%; transform: translate(-50%, -50%);} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info {width: 60%;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont {margin-top: 2.5rem;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont > dl > dt {font-size: 1.75rem;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont > dl > dd {margin-top: 0.5rem; font-size: 1rem; line-height: 1.5rem; word-break: keep-all;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont a.btn {width: 80%;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont a.btn:hover {opacity: 1; filter: brightness(1.25); background-color: #3366b9 !important; border-color: #3366b9 !important;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric {margin-bottom: 0.5rem;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span {font-weight: bold; font-size: 1.125rem; color: #000;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(1) {text-decoration: line-through;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(2) {margin-left: 0.375rem; margin-right: 0.375rem;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(3) {color: black; font-size: 1.25rem;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span:nth-child(3) > em {font-size: 1rem; margin-left: 0.25rem; display: inline-block; vertical-align: top; font-style: normal;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > span:last-of-type {text-decoration: none;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info_pric > a {display: inline-block; vertical-align: top;} .cdlcDntSrvList .dnt_prd_lst_img_wrap {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 35%; display: block;} .cdlcDntSrvList .dnt_prd_lst_img_wrap > img {width: 100%; max-height: 250px; object-fit: contain;} .cdlcDntSrvList .dnt_prd_lst_img_wrap:hover, .cdlcDntSrvList .dnt_prd_lst_img_wrap:focus {opacity: 1;} .cdlcDntSrvList .dnt_prd_lst_img_wrap a {position: absolute; right: 0; top: -0.5rem; background-color: #FFF; border: 1px solid #DDD; padding: 5px 10px; border-radius: 0.25rem;} .cdlcDntSrvList .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);} .cdlcDntSrvList .dnt_prd_info .card:hover .dnt_prd_lst_num {background-color: #3366b9; color: #fff; transition: all 0.15s ease-in-out;} @media (max-width: 991px) { .cdlcDntSrvList .dnt_prd_info > ul {grid-template-columns: repeat(1, 1fr); grid-auto-rows: inherit;} .cdlcDntSrvList .dnt_prd_lst_img_wrap > img {max-height: 200px;} } @media (max-width: 480px) { .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_info {width: 100%; display: flex; flex-direction: column-reverse;} .cdlcDntSrvList .dnt_prd_lst_img_wrap {position: relative; transform: none; width: 80%; margin: 0 auto; max-width: 200px; right: auto;} .cdlcDntSrvList .dnt_prd_lst_img_wrap a {transform: translateX(50%);} .cdlcDntSrvList .dnt_prd_info > ul {grid-auto-rows: inherit;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont a.btn {width: 100%;} .cdlcDntSrvList .dnt_prd_info .dnt_prd_lst_cont {margin-top: 1.5rem;} } /* 제휴/협찬 서비스 신청하기 */ .dafl_cdlc_srv_apl_bnft_form .btn-success {color: #fff !important;} .dafl_cdlc_srv_apl_bnft_form .ui-checkboxradio-det-view-btn {display: inline-block; padding: 0.5rem; font-weight: 400; font-size: 0.9rem; font-weight: 500; text-decoration: underline;} .cdlcSrvSttlAmtLstWrap .ui-checkboxradio-label {position: relative;} /* 상품 리스트 슬라이드 기능 추가 */ .addn_ty_lst_button_set_slide {padding-left: 1rem; padding-right: 1rem;} .addn_ty_lst_button_set_slide > ul {align-items: stretch !important; padding-top: 1rem;} .addn_ty_lst_button_set_slide > ul > li {padding: 0;} .addn_ty_lst_button_set_slide .swiper-button-next, .addn_ty_lst_button_set_slide .swiper-button-prev {width: 1.25rem; height: 3.5rem; background-size: 100% 100%;} .addn_ty_lst_button_set_slide .swiper-button-prev {background-image: url("/common/css/images/main_arrow_left.png"); left: 0;} .addn_ty_lst_button_set_slide .swiper-button-next {background-image: url("/common/css/images/main_arrow_right.png"); right: 0;} .addn_ty_lst_button_set_slide.non_slide > ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: 1fr;} .addn_ty_lst_button_set_slide.non_slide .swiper-button-prev, .addn_ty_lst_button_set_slide.non_slide .swiper-button-next {display: none;} .addn_ty_lst_button_set_slide .prdNm {font-size: 1rem; font-weight: 500; margin-top: 0.5rem;} @media (max-width: 767px) { .addn_ty_lst_button_set_slide.non_slide > ul {grid-template-columns: repeat(3, 1fr);} } @media (max-width: 480px) { .addn_ty_lst_button_set_slide.non_slide > ul {grid-template-columns: repeat(2, 1fr);} } /* 친환경 뱃지*/ .ui-checkboxradio-icon-badge {position: absolute; top: 0; left: -5px; transform: translateY(-50%); z-index: 2; border: 1px solid #2cb12c; color: #2cb12c; background-color: #f2fff2; padding: 0.25rem 0.4rem; font-size: 0.85rem; font-weight: bold; font-style: normal;} .ui-checkboxradio-icon-badge:after {content: "친환경"; display: inline-block;} .dnt_prd_lst_cont .ui-checkboxradio-icon-badge {position: static; transform: none; display: inline-block;} /* 친환경 뱃지 예외 처리 */ .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap ul > li > label[data-product-code="2002"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap ul > li > label[data-product-code="2003"] .ui-checkboxradio-icon-badge, .dnt_prd_divy_instl_req_form .JS-addnTyLstButtonSetWrap ul > li > label[data-product-code="1002"] .ui-checkboxradio-icon-badge {display: none;}