@charset "utf-8"; /* 삭제용 */ /* 연차장님 추가소스 */ #renew.infomfixed .gnb_area { box-shadow: none;} #renew .bestset_areas { transition: all .2s ease-out;} #renew.infomfixed .bestset_areas { top: 110px !important;} /* 기존 소스 - 초기화 및 디자인 수정 *****************************************/ /* 기존 소스 초기화 */ #renew #content { float: initial; width: initial; padding: 0; min-height: initial;} #renew .fr_top.mt_gap, #renew .fr_top { margin: 0;} #renew .tm_main_h_set { height: 12px; padding: initial;} #renew .tm_main_img_set { float:initial; display:flex; flex-flow:row nowrap; align-items:center; width:680px; height:500px; margin:initial; } /* #renew .tm_main_img_set img { width: 520px; height: 500px;} */ #renew .tm_main_img_set img { width:auto; height:auto; max-height:100%; } #renew .banner_event { position:relative; margin-top: 40px; padding: initial; border-bottom: none;} #renew .banner_event a { display: block;} /* 실시간 챗봇 */ #renew .counsel_box { position:absolute; left:33%; top:-21px; display:flex; flex-flow:row nowrap; align-items:center; min-width:186px; height:40px; padding:0 20px 0 40px; font-size:17px; color:#111; background:#fff; border:1px solid #4981e9; border-radius:10px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); z-index:1; } /* #renew .counsel_box:after { position:absolute; left:30px; bottom:-5px; border-top:5px solid #e42052; border-left:5px solid transparent; border-right:5px solid transparent; content:""; } */ #renew .counsel_box:before { position:absolute; left:30px; bottom:-7px; width:14px; height:8px; background:url("/default/images/renew/ico_bell_arrow.svg") no-repeat left top; background-size:contain; content:""; z-index:2; } #renew .counsel_box em { color:#111; transform-origin:0% 100%; } #renew .counsel_box em:nth-of-type(odd) { animation:txt_mov .5s .0s infinite both ease-in; } #renew .counsel_box em:nth-of-type(even) { animation:txt_mov .5s .25s infinite both ease-in; } #renew .counsel_box em:nth-of-type(3) { margin-right:3px; } #renew .counsel_box em.point { color:#4981e9; } #renew .counsel_box span { margin-left:6px; } #renew .counsel_box .ico_bell { position:absolute; left:15px; top:9px; animation:bell_mov 1.5s infinite both ease-in; transform-origin:50% 0%; } @keyframes bell_mov { 0% { transform:rotate(0); } 25% { transform:rotate(23deg); } 65% { transform:rotate(-15deg); } 100% { transform:rotate(0); } } @keyframes txt_mov { 0% { transform:scaleY(1); } 50% { transform:scaleY(1.1); } 100% { transform:scaleY(1); } } #renew .newChatBanner { display: none;} /* 포인트 색상(기존 소스) */ #renew .point_red, #renew .txt_red { color: #de4738 !important;} /* 상담로봇 몬디 */ #renew >#chatbot_wrap .chattion_win.resizeBottom { bottom: 120px !important;} #renew >#chatbot_wrap .chattion_win { min-height: 132px;} #renew >#chatbot_wrap .chattion_win .chatbot_wrapper { border:0; border-radius:19px; } /* 보장분석 팝업 - 더좋은 어린이보험 */ #renew #inform p.tit_exm.mgt10 { margin-top: 30px;} #renew #inform p.tit_exm.mgt30 { margin-top: 30px;} #renew #inform p.tit_exm.ty02 span { color: #7030a0; border-color: #7030a0;} #renew #inform p.tit_exm.ty03 span { color: #0099cc; border-color: #0099cc;} #renew #inform p.tit_exm.ty04 span { color: #002060; border-color: #002060;} /* 자동차 법인 종료 버튼 - 홈으로 아이콘 수정 */ .pop_product_intro .btn_area .btn_h38_wh01 em { background: url(/subscribe/images/common/bg_link_arrow_bk.png) no-repeat;} /* 공통 요소 *****************************************/ /* 크기 설정 */ #renew .submain { width: 1200px; margin: 0 auto;} /* 스크롤 디자인 */ #renew .overflow_y { overflow-x: hidden; overflow-y: scroll;} #renew .scroll_design::-webkit-scrollbar { width: 4px;} #renew .scroll_design::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 2px;} #renew .scroll_design::-webkit-scrollbar-track { background-color: #eee; border-radius: 2px;} /* 상품 *****************************************/ /* CTA 스타일 수정 */ #renew .cta_new_wrap { float: initial; width: 400px; margin-top: -56px;} #renew .cta_new_wrap .bx_valid.error .width120 +.txt_error { padding-left: 120px;} #renew .cta_new_wrap .p_tit { font-size: 24px; font-weight: 600; color: #de4738;} /* #renew .cta_new_wrap .p_tit_sub { position: relative; z-index: 2; font-size: 16px; font-weight: 400; color: #999;} */ #renew .cta_new_wrap .p_tit_sub { position: relative; z-index: 2; font-size: 16px; font-weight: 400; color: #929292;} #renew .cta_new_wrap .bxmydirect { position: relative; z-index: 1; width: 415px; height: 102px; padding: 47px 0 0 30px; background: url(/default/images/renew/cta_head_bg.png) no-repeat -30px 0;} #renew .cta_new_wrap .bx_mydirect2 { position: relative; margin-top: 2px;} /* S: 25.01.13 == 접근성 작업 수정 */ .bxmydirect_img {display: block; position: absolute; right: -68px; top: 0px; width: 195px;} /* E: 25.01.13 == 접근성 작업 수정 */ #renew .cta_new_wrap .bx_mydirect2 .brd { border: 2px solid #fd796d; border-top: none; border-radius: 0 0 24px 24px; box-shadow: 8px 16px 40px #dfd7d6;} #renew .cta_new_wrap .bx_mydirect2 .frmbox { margin-top: -7px; padding: 0 30px 24px; background-color: transparent;} #renew .cta_new_wrap .frmbox .group>label { width: 80px; height: 37px; font-size: 16px; font-weight: 500; color: #656565;} #renew .cta_new_wrap .consult_btnset_w { margin-top: 24px;} #renew .cta_new_wrap .btn_block.red { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; background-color: #ed3722; border-radius: 16px;} #renew .cta_new_wrap .btn_block.red span { font-size: 20px; font-weight: 600;} #renew .cta_new_wrap .btn_block .icon { display: block; width: 24px; height: 24px; margin-left: 8px; background: url(/default/images/renew/ico_cta_arrow.png) no-repeat;} #renew .cta_new_wrap .consult_btnset { margin-top: 8px;} /* #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(1) { display: flex; align-items: center; justify-content: center; width: 50%; height: 64px; margin-right: 8px; background-color: #aaa; border-radius: 16px;} */ #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(1) { display: flex; align-items: center; justify-content: center; width: 50%; height: 64px; margin-right: 8px; background-color: #888; border-radius: 16px;} #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(1) span { font-size: 16px; font-weight: 600;} #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(1) .icon { display: block; width: 24px; height: 24px; margin-right: 4px; background: url(/default/images/renew/ico_cta_headset.png) no-repeat;} /* #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(2) { display: flex; align-items: center; justify-content: center; width: 50%; height: 64px; background-color: #828ce9; border-radius: 16px;} */ #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(2) { display: flex; align-items: center; justify-content: center; width: 50%; height: 64px; background-color: #7b71e3; border-radius: 16px;} #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(2) span { padding-left: 0; font-size: 16px; font-weight: 600;} #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(2) span::before { display: none;} #renew .cta_new_wrap .consult_btnset .btn_consult:nth-child(2) .icon { display: block; width: 25px; height: 24px; margin-right: 4px; background: url(/default/images/renew/ico_cta_chats.png) no-repeat;} #renew .cta_new_wrap .group { display: flex; align-items: center;} #renew .cta_new_wrap .group .input_box { width: 100%; padding: 0; height: inherit; border-width: 0 0 1px 0; border-color: #bbb;} #renew .cta_new_wrap .group .input_box.baby_box { flex: 1; width: initial !important;} #renew .cta_new_wrap .group .input_box.baby_box_week { display: flex; align-items: center; justify-content: center; width: initial !important; height: 38px; margin-left: 10px; padding: 0 10px; border: none; background-color: #eee; border-radius: 4px;} #renew .cta_new_wrap .group .input_box.baby_box_week .txt_abs_right, #renew .cta_new_wrap .group .input_box.baby_box_week .txt_abs_right_baby { all: unset;} #renew .cta_new_wrap .group input { height: 37px; padding: 0; font-size: 16px; line-height: 1;} #renew .cta_new_wrap .group input:focus { outline: 2px solid black; border-radius: 2px;} #renew .cta_new_wrap .ind_info02 { display: flex; align-items: center; flex: 1; width: initial;} #renew .cta_new_wrap .group .bar { top: 1px;} #renew .cta_new_wrap .bx_valid { margin: 24px 0 0;} #renew .cta_new_wrap .bx_valid .group.width120 >label { width: 120px;} #renew .cta_new_wrap .info_sex { display: flex; align-items: center;} #renew .cta_new_wrap .info_sex .flex { position:relative; display: flex; align-items: center;} #renew .cta_new_wrap .info_sex input { width: initial;} #renew .cta_new_wrap .add_placeholder {position:relative;} /* #renew .cta_new_wrap .info_sex input[type="radio"] { display: inline-block;position: relative;width: 22px;height: 22px;margin-top: -2px;vertical-align: top;border: none;outline: none;cursor: pointer;opacity: 1;appearance: none;} #renew .cta_new_wrap .info_sex input::before { content: '';position: absolute;left: 0;top: 0;width: 20px;height: 20px;background-color: #fff;border-radius: 50%;transition: border-color .2s, box-shadow .2s, background-color .5s;border: 1px solid #999;} #renew .cta_new_wrap .info_sex input::after {content: '';position: absolute;left: 50%;top: 50%;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;transform: translate(-50%, -50%);} #renew .cta_new_wrap .info_sex input:checked::before { border-color: #de4738;background-color: #de4738;box-shadow: 0 0 0 5px #de4738 inset;} #renew .cta_new_wrap .info_sex input:disabled::before { border-color: #dbdbdb;} */ #renew .cta_new_wrap .info_sex input[type="radio"] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; } #renew .cta_new_wrap .info_sex input[type="radio"] + label { position:relative; display:inline-block; margin-right:15px; font-size:16px; color:#656565; font-weight:500; white-space:nowrap; background:#fff; cursor:pointer; } #renew .cta_new_wrap .info_sex input[type="radio"] + label:before { position:relative; display:inline-block; width:20px; height:20px; margin-top:-3px; margin-right:5px; vertical-align:middle; background:#fff; border:1px solid #999; border-radius:50%; transition:border-color .2s, box-shadow .2s, background-color .5s; content:""; } #renew .cta_new_wrap .info_sex input[type="radio"] + label:after { position:absolute; left:7px; top:4px; width:8px; height:8px; background:#fff; border-radius:50%; transition:all 0.3s; content:""; } #renew .cta_new_wrap .info_sex input[type="radio"] + label small { position:absolute; display:none; left:131px; top:-23px; width:62px; height:32px; padding-top:4px; font-size:13px; text-align:center; background:url("/default/images/renew/ico_tooltip_s.svg") no-repeat left top; } #renew .cta_new_wrap .info_sex input[type="radio"] + label small.on { display:block; } #renew .cta_new_wrap .info_sex input[type="radio"]:checked + label:before { border-color:#de4738; background:#de4738; box-shadow:0 0 0 5px #de4738 inset; } /* #renew .cta_new_wrap .info_sex input[type="radio"]:checked + label:after { background:#fff; } */ /* #renew .cta_new_wrap .info_sex input[type="radio"]:focus { outline: 2px solid black; border-radius: 2px;} #renew .cta_new_wrap .info_sex input[type="radio"]:focus + label { color: #de4738;} #renew .cta_new_wrap .info_sex input[type="radio"]:focus + label::after { display: none;} #renew .cta_new_wrap .info_sex input[type="radio"]:focus::before { border-color: #de4738;background-color: #de4738;box-shadow: 0 0 0 5px #de4738 inset;} #renew .cta_new_wrap .info_sex input[type="radio"]:checked + label { color: #de4738;} #renew .cta_new_wrap .info_sex input[type="radio"]:first-child + label:before { display: none;} #renew .cta_new_wrap .info_sex input[type="radio"]:checked + label::after { display: none;} */ /* CTA 스타일 수정 - 다이렉트 등 다른형태 디자인 */ #renew .bx_mydirect2 .btn_set { margin: 26px 0 35px;} #renew .bx_mydirect2 .btn_set button { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 16px;} #renew .bx_mydirect2 .btn_set button ~ button { margin-top: 16px;} #renew .bx_mydirect2 .btn_set button.direct { height: 90px; background-color: #ed3722;} #renew .bx_mydirect2 .btn_set button.direct .span_block { display: block; text-align: left;} #renew .bx_mydirect2 .btn_set button.direct .t { display: block; font-size: 16px; font-weight: 600; color: #fff;} #renew .bx_mydirect2 .btn_set button.direct .b { display: block; position: relative; margin-top: 7px; font-size: 20px; font-weight: 600; color: #fff;} #renew .bx_mydirect2 .btn_set button.direct .b::after { content: ''; display: block; position: absolute; right: -28px; top: 3px; width: 22px; height: 22px; background: url(/default/images/renew/ico_cta_arrow_small.png) no-repeat;} #renew .bx_mydirect2 .btn_set button.direct i { display: block; width: 29px; height: 34px; margin-right: 16px; background: url(/default/images/renew/ico_cta_direct.png) no-repeat;} #renew .bx_mydirect2 .btn_set button.epilogue { height: 70px; background-color: #828ce9;} #renew .bx_mydirect2 .btn_set button.epilogue span { font-size: 20px; font-weight: 600; color: #fff;} #renew .bx_mydirect2 .btn_set button.epilogue i { display: block; width: 24px; height: 24px; margin-right: 16px; background: url(/default/images/renew/ico_cta_epilogue.png) no-repeat;} #renew .bx_mydirect2 .btn_set button.round { height: 60px; border: 1px solid #999;} #renew .bx_mydirect2 .btn_set button.round span { font-size: 20px; font-weight: 600; color: #333;} #renew .bx_mydirect2 .btn_set button.round.guaran_tee i { display: block; width: 18px; height: 22px; margin-right: 16px; background: url(/default/images/renew/ico_cta_guaran_tee.png) no-repeat;} #renew .bx_mydirect2 .btn_set button.round.show_info i { display: block; width: 22px; height: 22px; margin-right: 16px; background: url(/default/images/renew/ico_cta_show_info.png) no-repeat;} #renew .bx_mydirect2 .sub_btns { margin: 32px 0 9px; padding-left: 12px;} #renew .bx_mydirect2 .sub_btns button { display: flex; align-items: center; width: 100%;} #renew .bx_mydirect2 .sub_btns button ~ button { margin-top: 16px;} #renew .bx_mydirect2 .sub_btns button span { font-size: 16px; font-weight: 500; color: #333;} #renew .bx_mydirect2 .sub_btns button.down_pdf i { display: block; width: 24px; height: 24px; margin-right: 12px; background: url(/default/images/renew/i_cta_down_pdf.png) no-repeat;} #renew .bx_mydirect2 .sub_btns button.show_comment i { display: block; width: 22px; height: 22px; margin-right: 12px; background: url(/default/images/renew/i_cta_show_comment.png) no-repeat;} /* 공통 스타일 */ #inform { padding: 48px 0 80px;} #inform .color_point { color: #ef3b24;} #inform .inform_subtitle { padding: 0; font-size: 24px; font-weight: 700 !important; color: #000; line-height: inherit; background: none;} #inform .inform_subtitle .wyl_subtit { padding: 0; font-size: 24px; font-weight: 700 !important; color: #000; line-height: inherit; background: none;} #inform .inform_subtitle > sub { display:inline-block; margin-left:10px; font-size:20px; color:#666; vertical-align:baseline; } #inform .form .txt_review { margin: 40px 0 0; font-size: 16px; font-weight: 400; color: #888;} #inform .bottom_scroll { display: flex; justify-content: center; margin-top: 70px;} #inform .bottom_scroll .bs_body { display: flex; align-items: center; justify-content: center; width: 220px; height: 36px; border: 1px solid #ddd; border-radius: 18px;} #inform .bottom_scroll .bs_body span { display: block; margin-top: 1px; font-weight: 700; color: #777;} #inform .bottom_scroll .bs_body .icon { display: block; width: 16px; height: 16px; margin-left: 8px; background: url(/default/images/renew/ico_bottom_scroll.png) no-repeat;} #inform .tab_group { position: relative; margin-top: 40px;} #inform .tablist { display: flex; position: relative; border-bottom: 1px solid rgba(0,0,0,0.5);} #inform .tablist .wtab { display: flex; align-items: center; justify-content: center; flex: 1; height: 70px; font-size: 24px; font-weight: 700; color: #555;} #inform .tablist .wtab.active { color: #de4738;} #inform .tablist .tabbar { position: absolute; left: 0; bottom: -1px; width: 400px; height: 4px; background-color: #de4738; transition: left .2s ease-out;} #inform .tablist .tabbar.half { width: 600px;} #inform .tabpanel { display: none;} #inform .tabpanel.open { display: block;} #inform .position_sticky { position: absolute; left: 0; width: 100%; height: 70px; transition: all .1s ease-out;} body.infomfixed #inform .position_sticky { display: flex; justify-content: center; position: fixed; left: 0; top: 0; z-index: 1; width: 100%; background-color: #fff; box-shadow: 0 4px 27px rgba(0,0,0,0.15);} body.infomfixed #inform .position_sticky .tablist { width: 1200px; border: none;} body.infomfixed #inform .position_sticky + .tab_target { padding-top: 70px;} body.infomfixed #footer { padding-bottom: 80px;} #inform .consult { position: fixed; left: 0; bottom: 0; z-index: 1; width: 100%; min-width: 100%; height: 98px; padding: 14px 0; background-color: #de4738; box-shadow: 0 0 32px rgba(0,0,0,0.45); transform: translateY(130%); transition: transform .2s ease-out;} #inform .consult .cgroup { display: flex; align-items: center; width: 1200px; gap:30px; margin: 0 auto;} #inform .consult .cgroup > * { flex:1; } #inform .consult .cgroup > .title { flex:1.5; } #inform .cgroup .number { display: flex; flex-direction: column; justify-content: center; height: 70px;} #inform .cgroup .number span { font-weight: 600; color: #fff;} #inform .cgroup .number p { margin-top: 8px; font-size: 32px; font-weight: 700; color: #fffa7a;} #inform .cgroup .title { display: flex; align-items: center; justify-content: center; position: relative; width: auto; height: 70px; padding: 0 20px;} #inform .cgroup .title p { font-size: 20px; color: #fff; text-align: center; line-height: 24px;} #inform .cgroup .title::before, #inform .cgroup .title::after { content: ''; display: block; position: absolute; top: 0; width: 1px; height: 70px; background-color: #fff;} #inform .cgroup .title::before { left: 0;} #inform .cgroup .title::after { right: 0;} #inform .cgroup .join { display: flex; align-items: center; justify-content: flex-end; height: 70px;} #inform .cgroup .join p { font-size: 24px; font-weight: 700; color: #fff; white-space:nowrap; } #inform .cgroup .join .button { display: flex; align-items: center; justify-content: center; width: 240px; height: 52px; margin-left: 49px; background-color: #fff; border-radius: 26px;} #inform .cgroup .join .button span { font-size: 20px; font-weight: 700; color: #de4738;} #inform .cgroup .join .button .icon { display: block; width: 24px; height: 24px; margin-left: 4px; background: url(/default/images/renew/ico_consult_arrow.png) no-repeat;} #inform .consult.active { transform: translateY(0);} .wyl_flanding_floating { display:block; position:fixed; left:0; bottom:0; z-index:1; width:100%; height:232px; background:#FDE7E7; padding:48px 0 48px 0; box-shadow:none; transform: translateY(130%); transition:transform 0.2s ease-out; } .wyl_flanding_floating.active { transform: translateY(0); } .wyl_flanding_area { margin:0 auto; width:1200px; display:flex; gap:33px; } .wyl_flanding_area .wyl_tit_area { position:relative; width:247px; height:137px;} .wyl_flanding_area .wyl_tit_area .img_box { position:absolute; left:0px; top:-93px; width:153px; height:153px; } .wyl_flanding_area .wyl_tit_area .tit_box { position:absolute; left:0px; bottom:7px; width:247px; height:60px; line-height:38px; } .wyl_flanding_area .wyl_tit_area .tit_box .tit1 { font-size:22px; color:#111; font-weight:700; } .wyl_flanding_area .wyl_tit_area .tit_box .tit2 { font-size:30px; color:#de4738; font-weight:700; } .wyl_flanding_area .wyl_form_area { position:relative; width:920px;} .wyl_flanding_area .wyl_form_area .floor1 { display:flex; gap:10px; height:60px;} .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area { width:108px; height:60px; background:#fff; border-radius:12px; display:flex; justify-content:center; align-items: center; padding:6px; box-sizing:border-box; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area._label { position:relative; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area._label span._label_txt { position:absolute; top:-25px; left:10px; width:68px; height:23px; font-size:16px; color:#c28c8c; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area._off_b { position:relative; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area._off_b:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:14px; background:#999; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area input[type=radio] { display:none;} .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._le, .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._ri {position:relative; width:54px; height:48px; display:flex; justify-content:center; align-items: center; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._le input[type=radio]+label, .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._ri input[type=radio]+label { position:absolute; left:0; top:0; width:48px; height:48px; display:flex; justify-content:center; align-items:center; border-radius:8px; cursor:pointer; font-size:18px; font-weight:600; color:#999; } .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._le input[type=radio]:checked+label, .wyl_flanding_area .wyl_form_area .floor1 .f_gender_area ._ri input[type=radio]:checked+label { background-color:#DE4738; color:#FFF; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area { position:relative; display:flex; justify-content:space-around; gap:10px; width:100%; height:60px;} .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer { position:relative; width:232px; height:60px; background:#fff; box-sizing:border-box; border-radius:12px; cursor:pointer; border:2px solid #fff; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._brd1 { border:2px solid #111; /* box-sizing:initial; */ } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._brd1_red { border:2px solid #ff0000; box-sizing:initial; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer:last-child { width:318px; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._le { width:100%; height:60px; padding-left:17px; box-sizing:border-box; /* border:1px solid red; */ } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._le ._head ._default { display:block; position:absolute; top: 20px; display: block; font-size: 18px; color: #999; font-family: 'Pretendard'; transition:all 0.3s ease; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._le ._head ._red { display:block; position:absolute; top:13px; font-size:12px; color:#ed3722; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._le ._head ._red._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer .close { display:none; width:20px; height:20px; position:absolute; right:19px; top:50%; transform:translateY(-50%); } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer .close._on { display:block; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer .ex_mark { display:none; width:20px; height:20px; position:absolute; right:19px; top:50%; transform:translateY(-50%); } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer .ex_mark._on { display:block; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._inpt { display:none; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._on ._le ._head ._default { display:block; position: absolute; top:13px; display: block; font-size: 12px; color: #666; font-family: 'Pretendard'; transition:all 0.3s ease; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._on ._le ._head ._default._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._on ._le ._head ._default ._subtit { display:none; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._on ._le ._inpt { display:block; position:absolute; top:28px; width:75%; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer._on ._le ._inpt._inpt_ok { top:19px; } .wyl_flanding_area .wyl_form_area .floor1 .f_inpt_area .f_input_layer ._le input { width:100%; box-sizing:border-box; font-size:18px; font-weight:700; color:#111 !important; outline:none; } .wyl_flanding_area .wyl_form_area .floor2 { display:flex; gap:10px; height:60px; margin-top:16px;} .wyl_flanding_area .wyl_form_area .floor2 .submit_box {width:492px; height:60px; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button { position:relative; width:100%; height:60px; background:#e7c8c8; color:#c28c8c; border-radius:12px; overflow:hidden; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button:before { content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#DE4738; transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button._ani { position:relative; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button._ani:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#DE4738; transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button span { position:relative; z-index:2; left:-10px; color:#c28c8c; font-size:20px; transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button span:after { content: ""; position: absolute; right: -13px; top: 7px; width: 8px; height: 8px; border-style: solid; border-width: 2px 2px 0 0; border-color: #c28c8c; transform: rotate(45deg); transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button._ani span { position:relative; z-index:2; left:-10px; color:#fff; font-size:20px; transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .submit_box button._ani span:after { content: ""; position: absolute; right: -13px; top: 7px; width: 8px; height: 8px; border-style: solid; border-width: 2px 2px 0 0; border-color: #fff; transform: rotate(45deg); transition:all 0.5s ease; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area { margin:0px; width:418px; display:flex;} .wyl_flanding_area .wyl_form_area .floor2 .btn_area button { display:block; width:204px; height:60px; cursor:pointer; overflow:hidden; border-radius:12px; border:2px solid #de4738; background:#fff; display:flex; justify-content:center; align-items:center; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area button:last-child { margin-left:10px;} .wyl_flanding_area .wyl_form_area .floor2 .btn_area button span { position:relative; left:0px; font-size:18px; font-weight:600; color:#de4738; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area button span._icon1 { display:block; width:60px; padding-left:26px; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area button span._icon1:before { content:""; position:absolute; left:0px; top:0; display:block; width:19px; height:20px; background:url("/default/images/renew/detail/flad_bottom_btn1.png") no-repeat; background-size:cover; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area button span._icon2 { display:block; width:67px; padding-left:28px; } .wyl_flanding_area .wyl_form_area .floor2 .btn_area button span._icon2:before { content:""; position:absolute; left:0px; top:-2px; display:block; width:23px; height:24px; background:url("/default/images/renew/detail/flad_bottom_btn2.png") no-repeat; background-size:cover; } .wyl_flanding_area_footer { padding-bottom:232px !important; } .wyl_gender_popup_area { display:none; position:fixed; left:0; top:0; z-index:100; width:100%; height:100vh; background-color: rgba(17, 17, 17, 0.3); backdrop-filter: blur(7px); opacity: 1; } .wyl_gender_popup_area._on { display:block; } .wyl_gender_popup_area .gender_check_area { position:relative; left:50%; top:50%; z-index:100; /* display:flex; justify-content:center; */ width:340px; height:320px; transform:translate(-50%, -50%); background:#fff; border-radius:16px; padding:30px; } .wyl_gender_popup_area .gender_check_area .img_area { margin-top:17px; } .wyl_gender_popup_area .gender_check_area .text_area { width:100%; text-align:center; font-size:18px; } .wyl_gender_popup_area .gender_check_area .text_area b { font-weight:700; } .wyl_gender_popup_area .gender_check_area .btn_close2 { margin:31px auto; width:200px; height:48px; background:#de4738; font-size:16px; color:#fff; border-radius:90px; display:flex; justify-content:center; align-items:center; } .wyl_gender_popup_area .gender_check_area .btn_close { position:absolute; right:30px; top:30px; width: 16px; height: 16px; background: url(/default/images/common/chattbot/btn_close03.png) no-repeat; background-size: 16px;} /* 상품정보 */ #inform .form { padding: 160px 80px 0;} #renew #inform .dlpo_wrap { width: initial; } #renew #inform .dlpo_wrap h2 { margin: 0; font-size: 20px; font-weight: 400; color: #333; line-height: 26px;} #inform .cta_flex { display: flex; justify-content: space-between; padding:0; padding-right:32px; } #inform .article_body { display: flex; justify-content: space-between;} #inform .article_body ~ .article_body { margin-top: 120px;} #inform .article_body >div { width: 480px;} #inform .article_body .wp100 { width:100%; } #inform .article_body .wp530 { width:530px; } #inform .article_body .inform_title { padding: 0; font-size: 36px; font-weight: 700 !important; color: #111; line-height: 48px; background: none;} #inform .article_body .inform_title small { font-weight: 400 !important;} #inform .article_body .inform_title b { font-weight: 700 !important;} #inform .article_body .inform_title span { font-weight: 400;} #inform .article_body .public_list { margin-top: 32px;} #inform .article_body .public_list li { font-size: 20px; color: #656565; line-height: 32px; word-break: keep-all;} #inform .article_body .public_list li ~ li { margin-top: 4px;} #inform .article_body .public_list li.text_indent { margin: 10px 0 20px; font-size: 14px; line-height: 20px;} #inform .article_body .public_list li .ti { display: block; margin-top: 10px; padding-left: 10px; font-size: 14px; text-indent: -10px; line-height: 20px;} #inform .article_body .public_list li._small_ft { font-size:14px; } #inform .article_body .inform_img { text-align: right;} #inform .article_body .inform_img img { max-width: 100%; height: auto;} #inform .preconfirm { display: flex; justify-content: center; margin-top: 80px;} #inform .preconfirm .btnset { display: flex;} #inform .preconfirm >button ~ button { margin-left: 24px;} #inform .preconfirm >button, #inform .preconfirm .btnset >button { display: flex; align-items: center; justify-content: center; width: 334px; height: 77px; font-size: 24px; font-weight: 500; border: 1px solid #d4d4d4; border-radius: 8px;} #inform .preconfirm .btnset button { margin-left: 24px;} #inform .trust_design { display: flex; justify-content: center; height: 80px; margin-top: 80px;} #inform .trust_design .identity_logo { display: flex; align-items: center; justify-content: center; margin-right: 72px;} #inform .trust_design .identity_logo img { display: block; width: 126px; height: 65px;} #inform .trust_design .identity_logo p { margin-left: 22px; padding-left: 22px;} #inform .trust_design .identity_logo p::after { content: ''; display: block; position: absolute; left: 0; top: 34px; width: 4px; height: 4px; background-color: #ccc; border-radius: 50%;} #inform .trust_design .identity_icon { display: flex; align-items: center; justify-content: center; position: relative; padding-left: 72px;} #inform .trust_design .identity_icon::after { content: ''; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 80px; margin-top: -40px; background-color: rgba(0,0,0,0.1);} #inform .trust_design .identity_icon i { display: block; width: 146px; height: 54px; background: url(/default/images/renew/img_identity_icon.png) no-repeat;} #inform .trust_design p { position: relative; margin-left: 19px; padding-top: 13px; font-weight: 400; color: #000; line-height: 20px;} #inform .trust_design p b { font-weight: 500;} #inform .trust_design p span { margin-left: 8px; font-size: 12px; color:#888;} #inform .recommend { margin-top: 80px;} #inform .recommend_group { display: flex; justify-content: space-between; margin-top: 24px;} #inform .recommend_group a { display: block;} #inform .etc_bann_design { margin-top: 80px; text-align: center;} #inform .etc_bann_design a { display: block;} #inform .etc_bann_design a img { width: 1200px; height: 160px;} /* 보장내용 */ #inform .form_other { padding: 152px 40px 0;} #inform .form_other h3.wyl_tit { padding:10px 0 0 0; font-size:20px; font-weight:500 !important; line-height:20px; color:#333; } #inform .tbl_data01 { margin-top: 24px; border-top: 1px solid #333; border-bottom: 1px solid #333;} #inform .tbl_data01 thead th { padding: 16px 0; font-size: 18px; line-height: 20px; border-color: #333;} #inform .tbl_data01 tbody th { border-color: #ddd;} #inform .tbl_data01 tbody td { padding: 18px 0; font-size: 16px; font-weight: 400; color: #000; word-break: keep-all; line-height: 20px; border-color: #ddd;} #inform .tbl_data01 thead th.text_center, #inform .tbl_data01 tbody td.text_center { text-align: center;} #inform .tbl_data01 tbody td.vertical_top { vertical-align: top;} #inform .tbl_data01 tbody td.padding_right_v1 { padding-right: 10px;} #inform .tbl_data01 tbody td strong { font-weight: 600;} #inform .tbl_data01 tbody td .td_tit { font-weight: 700;} #inform .tbl_data01 tbody td .td_txt { line-height: 24px;} #inform .tbl_data01 tbody td .td_txt_list { line-height: 24px;} #inform .tbl_data01 tbody td .td_txt_list li { line-height: 24px;} #inform .tbl_data01 tbody td .txt_type03 { margin-top: 5px; line-height: 20px; background-position-y: 5px !important;} #inform .tbl_data01 .bold_title { padding-right: 10px; font-size: 16px !important; font-weight: 700; line-height: 22px;} #inform .tbl_data01 .bold_title b { font-weight: 700;} #inform .list_typeEx3.wrap { padding: 40px; border: none; background-color: #f5f5f5; border-radius: 8px;} #inform .list_typeEx3.wrap dt { display: flex; align-items: center; margin: 0; padding: 0; line-height: inherit; background: none;} #inform .list_typeEx3.wrap dt i { display: block; width: 24px; height: 24px; margin-top: -1px; background: url(/default/images/renew/ico_question.png) no-repeat;} #inform .list_typeEx3.wrap dt span { display: block; margin-left: 8px; font-weight: 700; color: #555;} #inform .list_typeEx3.wrap dd { margin-top: 16px; padding-left: 34px;} #inform .list_typeEx3.wrap li { position: relative; margin: 0; padding-left: 14px; font-size: 16px; font-weight: 400; color: #555; line-height: 20px; background: none;} #inform .list_typeEx3.wrap li ~ li { margin-top: 16px;} #inform .list_typeEx3.wrap li::after { content: ''; display: block; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; background-color: #555; border-radius: 50%;} #inform .list_typeEx3.wrap li:last-child { color: #555; background: none;} #inform .list_typeEx3.wrap li:last-child::after { top: 10px;} #inform .list_typeEx3.wrap li .btn_w03 { height: inherit; margin: -6px 0 0 16px; padding: 5px 16px; color: #000; line-height: inherit; border-radius: 16px;} #inform .list_typeEx3.wrap li .btn_w03 .i_pdf { width: 16px; height: 16px; background: url(/default/images/renew/ico_acrobat.png) no-repeat;} #inform .form_othertext { margin-top: 10px; text-align: right;} #inform .form_othertext span { color: #777;} #inform .form_other .justify { margin-top: 20px;} #inform .form_other .justify strong { font-size: 20px; font-weight: 600; color: #111;} #inform .form_other .list_type02 dd, #inform .form_other .list_type02 > li { line-height: 20px; background-position-y: 7px;} #inform .form_other .list_type02 dd li { line-height: 20px;} /* 유병자 건강보험 가입상담센터 */ #renew .submain.sick { width: 900px;} #renew .sick .layer_header h3 { font-size: 24px;} #renew .sick .txt_green { color: #de4738 !important;} #inform .sick_menu ul { display: flex; justify-content: center;} #inform .sick_menu ul li { float: initial;} #inform .sick_menu ul li a { height: 200px;} #inform .sick_menu ul li.menu05 a { height: inherit;} #inform .sick_menu ul li.menu05 a:first-child { margin-top: 5px;} #inform .sick_menu.active ul li > a { height: 52px !important;} #inform .sick_cont .top_tit em { color: #de4738 !important;} #inform .sick_cont .sick_view .sick_info { display: flex; justify-content: space-between;} #inform .sick_cont .sick_view .sick_info * { line-height: 22px;} #inform .sick_cont .sick_view .sick_info .sick_data { float: initial;} #inform .sick_cont .sick_view .sick_info .bx_mydirect { float: initial;} #inform .sick_cont .sick_view .sick_info .sick_data table td dl dt { color: #de4738;} #inform .sick_cont .sick_view .sick_info .txt_type04 em { color: #de4738;} #inform .sick_cont .sick_view .sick_info .list_type01 > li { background-position-y: 10px !important;} #inform .sick_cont .sick_view .sick_info .list_type02 > li { background-position-y: 8px;} #inform .sick_cont .sick_view .sick_info .bx_list ul li { width: 35%;} #inform .sick_cont .sick_view .sick_info .bx_mydirect .btn_area a { line-height: 46px;} #inform .sick_cont .sick_view .ly_mydirect { border-color: #de4738;} #inform .sick_cont .sick_view .ly_mydirect .tit_wrap { background-color: #de4738;} #inform .sick_menu.active ul li.menu05 { display: flex; align-items: center; height: 54px; padding-top: 0;} #inform .sick_menu.active ul li.menu05 a { height: inherit; margin-top: 0 !important;} #inform .sick_menu.active ul li.menu05 strong { padding-top: 0;} /* 내게 맞는 보험찾기 *****************************************/ /* 공통 */ #insearch .area { overflow: hidden; width: 1200px; margin: 0 auto; padding: 80px 0;} #insearch .area.mt_size { padding-top: 40px;} #insearch .ins_width { overflow: hidden; width: 776px; margin: 0 auto;} #insearch .ins_step { position: relative; width: 776px;} #insearch .ins_body { display: flex; width: 2328px; position: relative; padding: 40px 0 0;} #insearch .ins_body .error_meseege { position: absolute; left: 0; bottom: 62px; z-index: -1; width: 100%; text-align: center; opacity: 0; transition: opacity .4s;} /* #insearch .ins_body .error_meseege p { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 40px; font-size: 16px; font-weight: 400; color: #fff; background-color: rgba(51, 51, 51, 0.5); border-radius: 19px;} */ #insearch .ins_body .error_meseege p { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 40px; font-size: 16px; font-weight: 400; color: #fff; background-color:#888; border-radius: 19px;} #insearch .ins_body .error_meseege.active { z-index: 1; opacity: 1; animation: fadeOut 1s 2s forwards;} /* @keyframes fadeOut{ 50% { opacity: 1;} 100% { opacity: 0;} } */ #insearch .ins_header { height: 79px; margin-top: 54px; text-align: center;} #insearch .ins_header .titleh3 { font-size: 32px; font-weight: 700 !important; color: #000; text-align: center;} #insearch .ins_header .subtext { display: flex; align-items: center; justify-content: center; position: relative; width: 300px; height: 34px; margin: 13px auto 0; padding: 0 20px; font-size: 14px; font-weight: 400; color: #ee3722; background-color: #ffefeb; border-radius: 17px; opacity: 1; transition: opacity .1s ease-out} #insearch .ins_header .subtext::after { content: ''; position: absolute; left: 50%; top: -9px; z-index: 1; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #ffefeb;} #insearch .ins_header.next_active .subtext { opacity: 0;} #insearch .titleh4 { font-size: 24px; font-weight: 700 !important; text-align: center; line-height: 32px; background: none;} #insearch .titleh4_sub { margin-top: 8px; font-size: 18px; font-weight: 400; color: #888; text-align: center;} #insearch .bystep { display: flex; justify-content: flex-end; align-items: center;} #insearch .bystep .bystep { display: flex; align-items: center;} #insearch .bystep .bystep span { display: block; font-weight: 700;} #insearch .bystep .active .blet { display: block; position: relative; width: 16px; height: 16px; margin-right: 8px; background-color: #ed3722; border-radius: 50%;} #insearch .bystep .active .blet::after { content: ''; display: block; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; background-color: #fff; border-radius: 50%;} #insearch .bystep .active span { color: #ed3722;} #insearch .bystep .default .blet { display: block; position: relative; width: 16px; height: 16px; margin-right: 3px;} #insearch .bystep .default .blet::after { content: ''; display: block; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; background-color: #000; border-radius: 50%;} #insearch .bystep .default span { color: #000;} #insearch .bystep .default.blet_red .blet::after { background-color: #ed3722;} #insearch .bystep .default.blet_red span { color: #ed3722;} #insearch .bystep .visible .blet { display: block; position: relative; width: 16px; height: 16px; margin-right: 3px;} #insearch .bystep .visible .blet::after { content: ''; display: block; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; background-color: #ebebeb; border-radius: 50%;} #insearch .bystep .visible span { color: #999;} #insearch .bystep .line { display: block; height: 1px; margin: 0 8px; background-color: #ebebeb; transition: all .2s ease-out} #insearch .bystep .line.long { width: 160px;} #insearch .bystep .line.short { width: 20px;} #insearch .bystep .line.active { background-color: #de4738;} #insearch .btn_group { display: flex; justify-content: center;} #insearch .btn_group .ins_next { display: flex; align-items: center; justify-content: center; width: 240px; height: 52px; background-color: #de4738; border-radius: 26px;} #insearch .btn_group .ins_next span { display: block; font-size: 20px; font-weight: 700; color: #fff;} #insearch .btn_group .ins_next i { display: block; width: 24px; height: 24px; margin-left: 4px; background: url(/default/images/renew/ico_cta_arrow.png) no-repeat;} #insearch .radio_list .input_radio button { display: block; padding: 13px 0 14px; width: 155px; text-align: center; border: 1px solid #ccc; border-radius: 8px; transition: border-color .2s, box-shadow .2s; cursor: pointer;} #insearch .radio_list .input_radio button.on { border: 1px solid #de4738; box-shadow: 8px 16px 18px rgba(255, 203, 203, 0.25);} #insearch .radio_list .input_radio button.on::before {content: ''; display: block; position: absolute; top:10px; right: 10px; width: 20px; height: 20px; background: #de4738 url(/default/images/renew/ico_check_small.png) no-repeat center; border-radius: 50%; transition: opacity .2s; appearance: none;} #insearch .radio_list .input_radio label { display: block; padding: 13px 0 14px; text-align: center; border: 1px solid #ccc; border-radius: 8px; transition: border-color .2s, box-shadow .2s; cursor: pointer;} #insearch .radio_list .input_radio label::before { all: unset;} #insearch .radio_list .input_radio input { all: unset; position: absolute; width: 20px; height: 20px; background: #de4738 url(/default/images/renew/ico_check_small.png) no-repeat center; border-radius: 50%; transition: opacity .2s; opacity: 0; appearance: none;} #insearch .radio_list .input_radio, #insearch .radio_list .radio_style { position: relative;} #insearch .radio_list .radio_style.focus { outline: none;} #insearch .radio_list .input_radio input:checked, #insearch .radio_list .radio_style.on input { opacity: 1;} #insearch .radio_list .input_radio input:checked + label, #insearch .radio_list .radio_style.on + label { border-color: #de4738; box-shadow: 8px 16px 18px rgba(255, 203, 203, 0.25);} #insearch .radio_list input[type=checkbox]:checked { opacity: 1;} #insearch .radio_list input[type=checkbox]:checked + label { border-color: #de4738; box-shadow: 8px 16px 18px rgba(255, 203, 203, 0.25);} #insearch .radio_list .radio_style.focus + label { border-color: #de4738; box-shadow: 8px 16px 18px rgba(255, 203, 203, 0.25);} #insearch .radio_list .input_radio .ico { display: inline-block; height: 60px;} #insearch .radio_list .input_radio .ico.ico23 { width: 60px; background: url(/default/images/renew/ico_23.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico04 { width: 60px; background: url(/default/images/renew/ico_04.png) no-repeat center;} #insearch .radio_list .input_radio .ico.ico24 { width: 96px; background: url(/default/images/renew/ico_24.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico25 { width: 96px; background: url(/default/images/renew/ico_25.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico13 { width: 60px; background: url(/default/images/renew/ico_13.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico14 { width: 60px; background: url(/default/images/renew/ico_14.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico02 { width: 60px; background: url(/default/images/renew/ico_02.png) no-repeat center;} #insearch .radio_list .input_radio .ico.ico15 { width: 60px; background: url(/default/images/renew/ico_15.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico16 { width: 60px; background: url(/default/images/renew/ico_16.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico17 { width: 60px; background: url(/default/images/renew/ico_17.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico18 { width: 60px; background: url(/default/images/renew/ico_18.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico19 { width: 60px; background: url(/default/images/renew/ico_19.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico03 { width: 60px; background: url(/default/images/renew/ico_03.png) no-repeat center;} #insearch .radio_list .input_radio .ico.ico20 { width: 60px; background: url(/default/images/renew/ico_20.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico21 { width: 60px; background: url(/default/images/renew/ico_21.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico22 { width: 60px; background: url(/default/images/renew/ico_22.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico26 { width: 64px; height: 64px; background: url(/default/images/renew/ico_26.png) no-repeat;} #insearch .radio_list .input_radio .ico.ico27 { width: 64px; height: 64px; background: url(/default/images/renew/ico_27.png) no-repeat;} #insearch .radio_list em { display: block; font-size: 14px; font-weight: 400; color: #333;} #insearch .poll { margin-top: 40px;} #insearch .poll .form_group { display: flex; justify-content: center; height: 203px; margin: 41px auto 0;} #insearch .form_group .chk_list { display: flex; align-items: center;} #insearch .form_group .chk_list ~ .chk_list { margin-top: 16px;} #insearch .chk_list .info_tit { display: flex; align-items: center; width: 68px; height: 37px; font-size: 18px; font-weight: 700; color: #767676;} #insearch .chk_list .info_box { display: flex; align-items: center;} #insearch .chk_list .radio_style.focus { outline: none;} #insearch .chk_list .input_radio input[type="radio"] { display: inline-block;position: relative;width: 22px;height: 22px; margin: -1px 8px 0 0;vertical-align: top;border: none;outline: none;cursor: pointer;opacity: 1;appearance: none;} #insearch .chk_list .input_radio input[type="radio"]:focus { border: 1px dashed #666; } #insearch .chk_list .input_radio input::before { content: '';position: absolute;left: 0;top: 0;width: 20px;height: 20px;background-color: #fff;border-radius: 50%;transition: border-color .2s, box-shadow .2s, background-color .5s;border: 1px solid #ccc;} #insearch .chk_list .input_radio input::after {content: '';position: absolute;left: 50%;top: 50%;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;transform: translate(-50%, -50%);} #insearch .chk_list .input_radio input:checked::before { border-color: #de4738;background-color: #de4738;box-shadow: 0 0 0 5px #de4738 inset;} #insearch .chk_list .input_radio input:disabled::before { border-color: #dbdbdb;} #insearch .chk_list .input_radio input[type="radio"] + label {width: 52px;justify-content: flex-start;padding-left: 8px;font-size: 16px;font-weight: 500;color: #656565; white-space: nowrap; background-color: #fff;} #insearch .chk_list .input_radio input[type="radio"]:checked + label { color: #de4738;} #insearch .chk_list .input_radio input[type="radio"]:first-child + label:before { display: none;} #insearch .chk_list .input_radio input[type="radio"]:checked + label::after { display: none;} #insearch .chk_list .input_radio input[type="radio"]:focus { border: none; outline: 2px solid black; border-radius: 2px;} #insearch .chk_list .input_radio label em { font-size: 16px; color: #333;} #insearch .chk_list .info_row { position: relative; width: 160px;} #insearch .chk_list .info_row input { width: 100%; height: 37px; font-size: 16px; font-weight: 700; color: #333;} #insearch .chk_list .age_text { display: none; position: absolute; top: 10px; font-weight: 400; color: #999;} #insearch .chk_list .age_text.active { display: block;} #insearch .insearch_space { height: 200px;} #insearch .bx_valid.error .group label { color: #666;} /* 동의 팝업 라디오 용 */ /* #renew .myIns .ipt_radio input { width: 22px; height: 22px; margin-top: -2px; background: url(/default/images/renew/ico_radiobox.png) no-repeat 0 0; opacity: 1; appearance: none;} #renew .myIns .ipt_radio input:checked { background-position-y: -28px;} #renew .myIns .ipt_radio label + input { margin-left: 24px;} */ /* 스텝 1 */ #insearch .ins_step.step1 { padding: 0 42px;} #insearch .step1 .radio_list { display: flex; justify-content: space-between;} #insearch .step1 .radio_list li { width: 155px;} #insearch .step1 .error_meseege { bottom: 16px;} #insearch .step1 .chk_list .input_radio { display: flex; align-items: center; margin-right: 24px;} #insearch .step1 .radio_list input { right: 10px; top: 10px;} /* 스텝 2 */ #insearch .ins_step.step2 { padding: 0 28px;} #insearch .step2 .setp2form { padding-bottom: 114px;} #insearch .step2 .radio_list { display: flex; flex-wrap: wrap; gap: 24px;} #insearch .step2 .radio_list li { width: 100px;} #insearch .step2 .error_meseege { bottom: 24px;} #insearch .step2 .input_radio { position: relative;} #insearch .step2 .radio_list input { right: 8px; top: 8px;} #insearch .step2 .radio_list input:focus { opacity: 1; border: 1px solid #666; } /* 스텝 3 */ #insearch .step3 { padding-bottom: 100px;} #insearch .step3 .input_radio { position: relative;} #insearch .step3 .radio_list { display: flex; justify-content: space-between; gap: 24px;} #insearch .step3 .radio_list li { width: 200px;} #insearch .step3 .radio_list li.btn_list { width: 100%; flex: 1; padding: 40px 24px; border: 1px solid #ccc; border-radius: 8px; transition: padding .2s ease-out} #insearch .step3 .radio_list li.btn_list.active { padding: 24px;} #insearch .step3 .radio_list .input_radio input { right: 24px; top: 24px;} #insearch .step3 .radio_list .input_radio label { padding: 32px 27px;} #insearch .step3 .radio_list .input_radio label .titleh5 { margin-top: 16px; font-size: 20px; font-weight: 700 !important;} #insearch .step3 .radio_list .input_radio label p { margin-top: 16px; font-weight: 400; color: #656565; text-align: left; line-height: 20px;} #insearch .step3 .input_radio button {padding: 32px 27px; width: auto !important;} #insearch .step3 .input_radio button .titleh5 {display: block; margin: 16px 0 18px; font-size: 20px; font-weight: 700 !important; color:#475069;} #insearch .step3 .input_radio button span {display: block; padding-top: 16px; font-weight: 400; color: #656565; text-align: left; line-height: 20px;} #insearch .step3 .input_radio button.on::before {top: 20px !important; right: 20px !important;} #insearch .step3 .btn_groupother .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 6px;} #insearch .step3 .btn_groupother .btn ~ .btn { margin-top: 10px;} #insearch .step3 .btn_groupother .btn span { font-size: 14px; font-weight: 600; color: #fff;} #insearch .step3 .btn_groupother .btn.kakao { background-color: #fae100;} #insearch .step3 .btn_groupother .btn.kakao span { color: #371d1e;} #insearch .step3 .btn_groupother .btn.kakao i { display: block; width: 27px; height: 24px; background: url(/default/images/renew/ico_kakao.png) no-repeat;} #insearch .step3 .btn_groupother .btn.naver { background-color: #00c73c;} #insearch .step3 .btn_groupother .btn.naver i { display: block; width: 20px; height: 18px; background: url(/default/images/renew/ico_naver.png) no-repeat;} /* #insearch .step3 .btn_groupother .btn.direct_i { background-color: #aaa;} */ #insearch .step3 .btn_groupother .btn.direct_i { background-color: #888;} #insearch .step3 .error_meseege { bottom: 0px;} #insearch .step3 .cta_new_wrap { display: none; width: 100%; margin-top: 0;} #insearch .step3 .cta_new_wrap .bx_valid { margin-top: 16px;} #insearch .step3 .cta_new_wrap .bx_valid:first-child { margin-top: 24px;} #insearch .step3 .cta_new_wrap .btn_block.red { height: 52px; border-radius: 26px;} #insearch .step3 .cta_new_wrap .btn_block .icon { margin-left: 4px; background: url(/default/images/renew/ico_arrow_right.png) no-repeat;} #insearch .step3 .radio_list .input_radio input:focus { opacity:1; } /* 결과 */ #insearch .tm_evt_pop_renew2 .ttl { font-size: 24px; font-weight: 700 !important; color: #000;} #insearch .tm_evt_pop_renew2 .pop_con_w { margin-top: 40px;} #insearch .tm_evt_pop_renew2 .pih3 { display: flex; align-items: flex-end; font-size: initial;} #insearch .tm_evt_pop_renew2 .pih3 i { display: block; width: 25px; height: 31px; padding-top: 4px; text-align: center; font-style: normal; background: url(/default/images/renew/ico_badge.png) no-repeat;} #insearch .tm_evt_pop_renew2 .pih3 .sub_text { font-size: 12px; font-weight: 700; color: #fff;} #insearch .tm_evt_pop_renew2 .pih3 .text_wrap { position: relative; margin-left: 7px;} #insearch .tm_evt_pop_renew2 .pih3 .text_wrap .text { position: relative; z-index: 1; padding: 0 1px; font-size: 20px; font-weight: 700; color: #111;} #insearch .tm_evt_pop_renew2 .pih3 .text_wrap .line { display: block; position: absolute; left: 0; bottom: -2px; width: 100%; height: 12px; background-color: #fff7df;} #insearch .tm_evt_pop_renew2 .blet_list { margin-top: 15px; padding-left: 32px;} #insearch .tm_evt_pop_renew2 .blet_list li p { font-size: 16px; font-weight: 400; color: 3656565;} #insearch .tm_evt_pop_renew2 .product_banner_block { margin-top: 24px; padding-left: 32px;} #insearch .tm_evt_pop_renew2 .ai_swiper { display: flex; justify-content: space-between;} #insearch .tm_evt_pop_renew2 .list_block { overflow: hidden; width: 497px; margin-top: 40px;} #insearch .tm_evt_pop_renew2 .list_block .swiper-wrapper .swiper-slide { width:initial;} #insearch .tm_evt_pop_renew2 .ai_slide { width: 545px; padding: 24px 24px 0; border: 1px solid #bbb; border-radius: 8px;} #insearch .tm_evt_pop_renew2 .ai_ttl { padding-bottom: 16px; border-bottom: 1px solid #eee;} #insearch .tm_evt_pop_renew2 .ai_ttl dl { display: flex; align-items: center; justify-content: space-between;} #insearch .tm_evt_pop_renew2 .ai_ttl dl .ttl_dt { font-size: 18px; font-weight: 700; color: #000;} #insearch .tm_evt_pop_renew2 .ai_ttl dl .sum { display: flex; align-items: center; font-size: 16px; font-weight: 400; color: #000;} #insearch .tm_evt_pop_renew2 .ai_ttl dl .sum strong { margin: 0 2px; font-family:"Roboto" !important; color:#111; font-size: 22px; font-weight: 700; color: #de4738;} #insearch .tm_evt_pop_renew2 .ai_p_con { padding: 16px 0 40px;} #insearch .tm_evt_pop_renew2 .ai_p_con .swiper-wrapper { overflow-y: hidden; overflow-x: auto; padding-bottom: 10px;} #insearch .tm_evt_pop_renew2 .ai_p_con .swiper-wrapper::-webkit-scrollbar { height: 4px;} #insearch .tm_evt_pop_renew2 .ai_p_con .swiper-wrapper::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 2px;} #insearch .tm_evt_pop_renew2 .ai_p_con .swiper-wrapper::-webkit-scrollbar-track { background-color: #eee; border-radius: 2px;} #insearch .tm_evt_pop_renew2 .p_ttl_sub { display: flex; align-items: center;} #insearch .tm_evt_pop_renew2 .p_ttl_sub span { display: block; position: relative; font-size: 14px; color: #555;} #insearch .tm_evt_pop_renew2 .p_ttl_sub span ~ span { margin-left: 8px; padding-left: 8px;} #insearch .tm_evt_pop_renew2 .p_ttl_sub span ~ span::after { content: ''; display: block; position: absolute; left: 0; top: 1px; width: 1px; height: 12px; background-color: #ddd;} #insearch .tm_evt_pop_renew2 .btn_wrap { display: flex; justify-content: flex-end; border-top: 1px solid #eee;} #insearch .tm_evt_pop_renew2 .btn_wrap .btn { display: flex; align-items: center; justify-content: center; padding: 23px 0 24px;} #insearch .tm_evt_pop_renew2 .btn_wrap .btn .text { display: block; font-size: 16px; font-weight: 400;} #insearch .tm_evt_pop_renew2 .btn_wrap .btn .ico { display: block; width: 16px; height: 16px; background: url(/default/images/renew/ico_next16.png) no-repeat;} #insearch .tm_evt_pop_renew2 .pop_product_wrap .perfect_insurance ~ .perfect_insurance { margin-top: 40px;} #insearch .pop_meritztalk_wrap { position: fixed; left: 0; bottom: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.3); box-shadow: 8px 8px 24px rgba(0,0,0,2.25); backdrop-filter: blur(4px);} #insearch .pop_meritztalk_inner { display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; padding: 16px 0 18px;} #insearch .pop_meritztalk_inner a { display: flex; align-items: center; justify-content: space-between; height: 108px; padding: 0 40px 0 60px; border-radius: 16px;} #insearch .pop_meritztalk_inner a .ttl { display: block; font-size: 24px; color:#fff; font-weight: 700;} #insearch .pop_meritztalk_inner a .txt { display: block; margin-top: 8px; font-size: 16px; color:#fff; font-weight: 400;} #insearch .pop_meritztalk_inner a .txt > span { font-weight:inherit; } #insearch .pop_meritztalk_inner a .txt:after { display:inline-block; width:16px; height:16px; vertical-align:top; background:url("/default/images/renew/link_arrow.svg") no-repeat center center; background-size:contain; content:""; } #insearch .pop_meritztalk_inner .pop_m_chatting { width: 584px;} #insearch .pop_meritztalk_inner .pop_m_chatting a { background-color: #838dff;} #insearch .pop_meritztalk_inner .pop_m_chatting .ico { display: block; width: 70px; height: 70px; background: url(/default/images/renew/cs_bg_1_70.png) no-repeat;} #insearch .pop_meritztalk_inner .pop_m_1vs1 { width: 584px;} #insearch .pop_meritztalk_inner .pop_m_1vs1 a { background-color: #72a4ff;} #insearch .pop_meritztalk_inner .pop_m_1vs1 .ico { display: block; width: 70px; height: 70px; background: url(/default/images/renew/cs_bg_2_70.png) no-repeat;} /* 보장분석 *****************************************/ /* 운전자 보장분석 */ #renew #dlabContents.lab_contents { padding-bottom: 0;} /* F랜딩 베이비(신생아) ST*/ .wyl_flanding_area .wyl_form_area .floor1.wyl250317 { display:flex; gap:10px; height:60px;} .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area { width:108px; height:60px; background:#fff; border-radius:12px; display:flex; justify-content:center; align-items: center; padding:6px; box-sizing:border-box; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area._label { position:relative; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area._label span._label_txt { position:absolute; top:-25px; left:10px; width:68px; height:23px; font-size:16px; color:#c28c8c; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area._off_b { position:relative; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area._off_b:before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2px; height:14px; background:#999; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area input[type=radio] { display:none;} .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._le, .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._ri {position:relative; width:54px; height:48px; display:flex; justify-content:center; align-items: center; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._le input[type=radio]+label, .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._ri input[type=radio]+label { position:absolute; left:0; top:0; width:48px; height:48px; display:flex; justify-content:center; align-items:center; border-radius:8px; cursor:pointer; font-size:18px; font-weight:600; color:#999; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._le input[type=radio]:checked+label, .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_gender_area ._ri input[type=radio]:checked+label { background-color:#DE4738; color:#FFF; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area { position:relative; display:flex; justify-content:space-around; gap:10px; width:100%; height:60px;} .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer { position:relative; width:25%; height:60px; background:#fff; box-sizing:border-box; border-radius:12px; cursor:pointer; border:2px solid #fff; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._brd1 { border:2px solid #111; /* box-sizing:initial; */ } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._brd1_red { border:2px solid #ff0000; box-sizing:initial; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le { width:100%; height:60px; padding-left:17px; box-sizing:border-box; /* border:1px solid red; */ } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le ._head { display:block; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le ._head._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le ._head ._default { display:block; position:absolute; top: 20px; display: block; font-size: 18px; color: #999; font-family: 'Pretendard'; transition:all 0.3s ease; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le ._head ._red { display:block; position:absolute; top:13px; font-size:12px; color:#ed3722; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le ._head ._red._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .close { display:none; width:20px; height:20px; position:absolute; right:19px; top:50%; transform:translateY(-50%); } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .close._on { display:block; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .ex_mark { display:none; width:20px; height:20px; position:absolute; right:19px; top:50%; transform:translateY(-50%); } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .ex_mark._on { display:block; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .week_area { position:absolute; top:-8px; left:80px; display:block; color:#111; padding:10px; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer .week_area._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._inpt { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._on ._le ._head ._default { display:block; position: absolute; top:13px; display: block; font-size: 12px; color: #666; font-family: 'Pretendard'; transition:all 0.3s ease; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._on ._le ._head ._default._off { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._on ._le ._head ._default ._subtit { display:none; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._on ._le ._inpt { display:block; position:absolute; top:28px; width:75%; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer._on ._le ._inpt._inpt_ok { top:19px; } .wyl_flanding_area .wyl_form_area .floor1.wyl250317 .f_inpt_area .f_input_layer ._le input { width:100%; box-sizing:border-box; font-size:18px; font-weight:700; color:#111 !important; outline:none; } /* F랜딩 베이비(신생아) EN*/ .hide_txt_new { overflow: hidden; position: absolute; display: inline-block; width: 1px; height: 1px; font-size: 1px; line-height: 0; clip: rect(1px 1px 1px 1px); } .visually_hidden_txt { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* 네아로 */ .cta_new_wrap.naro260109 { width:400px; height:529px; padding:35px 32px 35px 32px; box-sizing:border-box; border-radius:16px; border:1px solid #e5e5e5; background:#fff; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12); margin-top:0px !important; } .cta_new_wrap.naro260109 .head { margin-bottom:35px;} .cta_new_wrap.naro260109 .head .tit { margin-bottom:5px; height:34px; font-size:26px; font-weight:700; line-height:1.3; color:#333; } .cta_new_wrap.naro260109 .head .subtit { height:22px; font-size:16px; font-weight:400; line-height:1.4; color:#666; } .cta_new_wrap.naro260109 .body { /* border:1px solid red; */ } .cta_new_wrap.naro260109 .body .naro_area { position:relative; height:56px; margin-bottom:13px;} .cta_new_wrap.naro260109 .body .naro_area:after { content:""; position:absolute; right:12px; top:-25px; width:144px; height:44px; background:url("/default/images/renew/ico_naro_flg.png") no-repeat; animation:naro_ani 1s infinite ease-in-out alternate; } .cta_new_wrap.naro260109 .body .naro_area .btn_naro { position:relative; width:100%; height:56px; display:flex; justify-content:center; align-items:center; border-radius:8px; background:#03a94d; } .cta_new_wrap.naro260109 .body .naro_area .btn_naro span { position:relative; color:#fff; font-size:18px; font-weight:700; line-height:1.4; padding-left:26px; box-sizing:border-box; } .cta_new_wrap.naro260109 .body .naro_area .btn_naro span:before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; background:url("/default/images/renew/ico_naro_n.svg") no-repeat; } .cta_new_wrap.naro260109 .body .gubun { position:relative; height:22px; display:flex; justify-content:center; align-items:center; margin-bottom:11px; } .cta_new_wrap.naro260109 .body .gubun span { font-size:16px; font-weight:400; line-height:1.4; color:#666; } .cta_new_wrap.naro260109 .body .gubun:before { content:""; position:absolute; left:0; top:50%; width:100px; height:1px; background:#e5e5e5;} .cta_new_wrap.naro260109 .body .gubun:after { content:""; position:absolute; right:0; top:50%; width:100px; height:1px; background:#e5e5e5;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container { height:192px; margin-bottom:8px; display:flex; flex-direction:column; align-items:flex-start; align-self:stretch; border-radius:8px; border:1px solid #BBB; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item { position:relative; width:100%; height:64px; display:flex; justify-content:flex-start; align-items:center; padding-left:12px; padding-right:12px; box-sizing:border-box; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#e1e1e1; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item:last-child:before { height:0px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap { display:flex; justify-content:space-between } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .bir_box { width:220px; display:flex; align-items:center; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box { position:relative; display:flex; justify-content:flex-end; width:90px; height:36px;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box._off:after { content:""; position:absolute; left:50%; top:1px; width:1px; height:34px; background:#e1e1e1; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box:before { content:""; position:absolute; left:0; top:0; width:88px; height:34px; border:1px solid #e1e1e1; border-radius:6px;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box._error:before { border:1px solid #ff4042; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio] { display:none; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio] + label { position:absolute; width:45px; height:36px; display:flex; justify-content:center; align-items:center; font-size:14px; font-weight:400; color:#999;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio] + label._le { left:0; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio] + label._ri { position:relative; right:0; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio]:disabled + label { border:0px;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio]:checked + label._le { left:0; font-weight:700; color:#df4738; background:#fff; border:2px solid #df4738; border-radius:6px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .sec_wrap .gen_box input[type=radio]:checked + label._ri { right:0; font-weight:700; color:#df4738; background:#fff; border:2px solid #df4738; border-radius:6px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box { position:relative; padding-left:36px; width:100%; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box.add_placeholder:after { content: '- 없이 입력하세요.'; display:block; position:absolute; left:69px !important; top:2px !important; z-index:-1; font-size:16px; font-weight:400; color:#999; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box:before { content:""; position:absolute; left:0; top:-3px; width:24px; height:24px;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item:nth-child(1) .input_box:before { background:url("/default/images/renew/ico_naro_user.svg") no-repeat; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item:nth-child(2) .input_box:before { background:url("/default/images/renew/ico_naro_calendar.svg") no-repeat; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item:nth-child(3) .input_box:before { background:url("/default/images/renew/ico_naro_phone.svg") no-repeat; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box ._inpt_style { font-size:16px; font-weight:500; color: #111 !important; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box ._inpt_style._error::placeholder { color:#ff4042 !important; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box ._inpt_style._error::-webkit-input-placeholder { color:#ff4042 !important; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box ._inpt_style._error::-moz-placeholder { color:#ff4042 !important; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .input_box ._inpt_style._error::-ms-input-placeholder { color:#ff4042 !important; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap {position:absolute; left:68px; top:-14px; height:37px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap._off { display:none; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap .error_box { display:block; position:relative; height:37px; background:url("/default/images/renew/error_alert_middle.png"); } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap .error_box span { position:relative; top:8px; color:#dd4042; font-size:12px; font-weight:500; line-height:1.4; padding-left:3px; padding-right:3px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap .error_box:before { content:""; position:absolute; left:-29px; top:0; width:29px; height:41px; background:url("/default/images/renew/error_alert_head.png"); } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_container .item .error_narwrap .error_box:after { content:""; position:absolute; right:-15px; top:0; width:15px; height:37px; background:url("/default/images/renew/error_alert_bottom.png"); } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box { height:60px; display:flex; justify-content:flex-start; gap:8px;} .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box ._btn { display:flex; height:60px; justify-content:center; align-items:center; border-radius:8px; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box ._btn span { font-size:18px; font-weight:700; line-height:1.4; color:#666; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box ._btn._line { width:98px; color:#fff; background:#fff; border: 1px solid #cfcfcf; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box ._btn._red { width:120px; color:#fff; background:#de4738; border:1px solid #de4738; } .cta_new_wrap.naro260109 .body .cta_naro_wrap .cta_btn_box ._btn._red span { color:#fff; } @keyframes naro_ani { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } } /* wyl260209 ST backdrop-filter: blur(7px); */ .wyl260209pop { position:fixed; top:0; left:0; right:0; bottom:0; display:none; width:100%; height:100%; z-index:101; backdrop-filter:blur(6px); } ._hidden_obj { position:absolute; left:0; top:0; width:1px; height:1px; clip:rect( 1px, 1px, 1px, 1px); overflow:hidden; } .wyl260209pop.on { display:block; } .wyl260209pop .wyl260209_modalwrap { position:fixed; left:50%; top:50%; display:block; width:560px; background:#fff; transform:translate(-50%, -50%); border-radius:16px; box-shadow: 4px 6px 8px 0 rgba(0, 0, 0, 0.12); } .wyl260209pop .wyl260209_modalwrap .modal_header { position:relative; width:100%; height:66px; display:flex; justify-content:flex-end; } .wyl260209pop .wyl260209_modalwrap .modal_header .btn_close { position:absolute; top:18px; right:24px; width:24px; height:24px; background-image: url("/petpermint/images/cmpet/common/ico_close_black.svg"); background-repeat:no-repeat; background-position: center center; background-size:80%; } .wyl260209pop .wyl260209_modalwrap .modal_body { padding:0 50px 0 50px; } .wyl260209pop .wyl260209_modalwrap .modal_body .tit { text-align:center; font-size:22px; font-style:normal; font-weight:500; color:#111; line-height:1.4; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt_time { padding:6px 0 0 0; text-align:center; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt_time span { position:relative; height:20px; margin-bottom:14px; padding-left:18px; font-size:14px; font-style:normal; font-weight:500; line-height:1.4; color:#de4738; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt_time span:before { content:""; position:absolute; top:0; left:-2px; width:16px; height:16px; background:url("/default/images/lab/common/ensure/icon_260209_Info.svg") 0 0px no-repeat; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt_infor { padding:6px 0 0 0; text-align:center; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt_infor span { font-size:14px; font-weight:400; line-height:1.4; color:#777; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt { position:relative; margin-top:14px; padding-top:14px; border-top:1px solid #e1e1e1; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt span { position:relative; font-size:20px; font-style:normal; font-weight:700; line-height:1.4; word-break:break-all; color:#de4738; } .wyl260209pop .wyl260209_modalwrap .modal_body .txt span:before { content:""; position:absolute; left:0; bottom:2px; z-index:-1; width:100%; height:7px; background:#ffe6e3; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls { margin-top:12px; display:flex; flex-direction:column; flex-wrap: wrap; gap:12px; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li { display:flex; border-radius:16px; border:1px solid #e1e1e1; padding:18px 28px 18px 28px; box-shadow:2px 2px 6px 0 rgba(0,0,0, 0.05); background:#fff; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item1 { position:relative; width:56px; display:flex; justify-content:flex-start; align-items:center; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item2 { width: calc(100% - 56px); } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item2 .tit { height:25px; margin-bottom:4px; text-align:left; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item2 span.tit2 { position:relative; font-size:18px; font-style:normal; font-weight:700; line-height:1.4; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item2 span.tit2:after { content:""; position:absolute; right:-20px; top:3px; width:16px; height:16px; background:url("/default/images/lab/common/ensure/icon_260209_arrow.svg") 0 0px no-repeat; } .wyl260209pop .wyl260209_modalwrap .modal_body .link_ls li .item2 .txt { margin-top:0px; padding:0px; border:0px; font-size:16px; font-weight:400; line-height:1.4; color:#777; } .wyl260209pop .wyl260209_modalwrap .modal_bottom { margin-top:20px; margin-bottom:34px; padding:0 50px 0 50px; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .txt { text-align:center; font-size:16px; font-weight:400; line-height:1.4; color:#333; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .txt strong { font-size:16px; font-weight:700; line-height:1.4; color:#333; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .btn_area { display:flex; justify-content:flex-start; gap:10px; margin-top:10px; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item { width:100%; height:52px; justify-content:center; align-items:center; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item .btn { width:100%; height:52px; display:flex; justify-content:center; align-items:center; border:1px solid #de4738; background:#fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); border-radius:999px; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item .btn span { position:relative; padding-left:28px; font-size:18px; font-weight:500; line-height:1.4; color:#111; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item .btn span:before { content:""; position:absolute; left:0; top:2px; width:20px; height:20px; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item:nth-child(1) .btn span:before { background:url("/default/images/lab/common/ensure/icon_260209_btn1.svg") 0 0px no-repeat; } .wyl260209pop .wyl260209_modalwrap .modal_bottom .item:nth-child(2) .btn span:before { background:url("/default/images/lab/common/ensure/icon_260209_btn2.svg") 0 0px no-repeat; } /* wyl260209 EN */