@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; margin: initial;} #renew .banner_event { margin-top: 24px; padding: initial; border-bottom: none;} #renew .banner_event a { display: block;} #renew .newChatBanner { display: none;} /* 포인트 색상(기존 소스) */ #renew .point_red, #renew .txt_red { color: #de4738 !important;} /* 상담로봇 몬디 */ #renew >#chatbot_wrap .chattion_win { width: 398px !important; height: 648px !important; transition: bottom .2s ease-out} #renew >#chatbot_wrap .chattion_win.resizeBottom { bottom: 160px !important;} /* 보장분석 팝업 - 더좋은 어린이보험 */ #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;} /* 공통 요소 *****************************************/ /* 크기 설정 */ #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 .p_tit { font-size: 24px; font-weight: 600; color: #de4738;} #renew .p_tit_sub { position: relative; z-index: 2; font-size: 16px; font-weight: 400; color: #999;} #renew .bxmydirect { position: relative; z-index: 1; height: 102px; padding: 47px 0 0 30px; background: url(/default/images/renew/cta_head_bg.png) no-repeat -30px 0;} #renew .bx_mydirect2 { position: relative; margin-top: -2px;} #renew .bx_mydirect2::after { content: ''; display: block; position: absolute; right: -68px; top: -79px; width: 195px; height: 65px; background: url(/default/images/renew/cta_head_character.png) no-repeat;} #renew .bx_mydirect2 .brd { border: 2px solid #fd796d; border-radius: 0 0 24px 24px; box-shadow: 8px 16px 40px #dfd7d6;} #renew .bx_mydirect2 .frmbox { margin-top: -7px; padding: 0 30px 24px; background-color: transparent;} #renew .frmbox .group>label { width: 80px; height: 37px; font-size: 16px; font-weight: 500; color: #656565;} #renew .cta_new_wrap { float: initial; width: 400px; margin-top: -56px;} #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) 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) 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 .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 { display: flex; align-items: center;} #renew .cta_new_wrap .info_sex input { width: initial;} #renew .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 #ccc;} #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"] + label {width: 52px;justify-content: flex-start;padding-left: 8px;font-size: 16px;font-weight: 500;color: #656565;background-color: #fff; cursor: pointer;} #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: 0;} #inform .color_point { color: #ef3b24;} #inform .inform_subtitle { padding: 0; font-size: 24px; font-weight: 700 !important; line-height: inherit; background: none;} #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: 32px;} #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 { 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; width: 400px; 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 .tabpanel { display: none;} #inform .tabpanel.open { display: block;} #inform .position_sticky { 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; margin: 0 auto;} #inform .cgroup .number { display: flex; flex-direction: column; justify-content: center; width: 205px; 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: 410px; 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; flex: 1; height: 70px;} #inform .cgroup .join p { font-size: 24px; font-weight: 700; color: #fff;} #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);} /* 상품정보 */ #inform .form { padding: 0px 80px 50px;} #renew #inform .dlpo_wrap { width: initial; padding-left: 60px;} #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 32px 0 60px;} #inform .article_body { display: flex; justify-content: space-between;} #inform .article_body ~ .article_body { margin-top: 120px;} #inform .article_body >div { width: 460px;} #inform .article_body .wp100 { width: 100%;} #inform .article_body .inform_title { padding: 0; font-size: 36px; font-weight: 700 !important; color: #111; line-height: 48px; word-break:keep-all; background: none; letter-spacing: -1px;} #inform .article_body .inform_title small { font-weight: 400 !important;} #inform .article_body .inform_title b { font-weight: 700 !important;} #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 .inform_img { text-align: right;} #inform .inform_img img { max-width: 100%; height: auto;} #inform .preconfirm { display: flex; 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; margin-top: 80px;} #inform .trust_design .identity_logo { display: flex; align-items: center; justify-content: center; margin-right: 72px;} #inform .trust_design .identity_logo i { display: block; width: 126px; height: 65px; background: url(/default/images/renew/img_identity_logo.png) no-repeat;} #inform .trust_design .identity_logo i span._hide_txt { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } #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: rgba(0,0,0,0.3);} #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: 50px; text-align: center;} #inform .etc_bann_design a { display: block;} /* 보장내용 */ #inform .form_other { padding: 82px 40px 0;} #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; line-height: 20px; border-color: #ddd;} #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 .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 { background-position-y: 7px;} #inform .form_other .list_type02 dd li { line-height: 20px;} /* 내게 맞는 보험찾기 *****************************************/ /* 공통 */ #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.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: #f35c5c; 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;} #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 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 .radio_style { position: relative;} #insearch .radio_list .radio_style.focus { outline: none;} #insearch .radio_list .radio_style.on input { opacity: 1;} #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 .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 { width: 308px; 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::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;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 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;} /* 동의 팝업 라디오 용 */ #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;} #insearch .step1 .chk_list .input_radio ~ .input_radio { margin-left: 24px;} #insearch .step1 .radio_list input { right: 10px; top: 10px;} /* 스텝 2 */ #insearch .ins_step.step2 { padding: 0 28px;} #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;} /* 스텝 3 */ #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 .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 .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 .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;} #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;} #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 .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; font-weight: 700;} #insearch .pop_meritztalk_inner a .txt { display: block; margin-top: 4px; font-size: 16px; font-weight: 400;} #insearch .pop_meritztalk_inner .pop_m_chatting { width: 584px;} #insearch .pop_meritztalk_inner .pop_m_chatting a { background-color: #c5efb2;} #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: #d8ceff;} #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;} .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;}