@charset "utf-8";
/* 공통 */
.hide    { position: absolute; text-indent: -999999999px;}
.wrap    { overflow: hidden; position: relative; max-width: 768px; min-width: 360px; margin: 0 auto; background-color: #fff;}
.inner   { padding: 0 20px;}
.is_open { display: block !important;} /*팝업열기위해*/
.is_body { overflow: hidden;}

/* 공통 btn */
.btn-orange          { color: #fff; background: #FF9400;}
.btn-middle          { width: 180px; height: 45px; line-height: 45px; font-size: 16px; font-weight: 700;}
.btn-radius          { border-radius: 28px;}
.btn-arrow:after     { display: inline-block;width: 20px;height: 20px;margin-left: 4px; background: url('../images/arrow_more_white_2x.png') no-repeat 0 1px;background-size: cover;vertical-align: sub;content: '';}
.btn_datum           { display: inline-block; position: relative; padding-right: 12px;  text-align: center; font-size: 14px; font-weight: 700; color: #569AFF;}
.btn_datum::after    { display: inline-block; position: absolute; top: 4px; right: 2px; width: 5px; height: 5px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: solid #569AFF; border-width: 0 2px 2px 0; content: "";}
.btn_check              { display: block !important; width: 100%; height: 40px; line-height: 38px; margin-top: 10px; border-radius: 6px; background-color: #C88994; font-size: 16px !important; font-weight: 700 !important; color: #fff; opacity: 0.2;}
.btn_check:hover,
.btn_check.is_active    { background-color: #FF4B6A !important; opacity: 1;}
.btn_complete           { width: 100%; height: 60px;color: #fff;font-size: 20px;font-weight: 700; background-color: #ccc}
.btn_complete.is_active { background-color: #FF9400;}

/* 공통 btn ▶▶▶ footer */
.btn_sample         { display: inline-block; width: 40%; height: 100%; background: #71737E;}
.btn_sample span    { font-size: 18px; font-weight: 700; color: #fff;}
.btn_design         { display: inline-block; width: 60%; height: 100%; background: #FF9400;}
.btn_design::before { content: ''; display: inline-block; width: 19px; height: 19px; background: url('../images/icon_design.png') no-repeat center; vertical-align: middle;}
.btn_design span    { margin-left: 6px; font-size: 18px; font-weight: 700; color: #fff;}
.btn_re             { display: inline-block; width: 40%; height: 100%;  background: #71737E;}
.btn_re span        { font-size: 18px; font-weight: 700; color: #fff;}
.btn_do             { display: inline-block; width: 60%; height: 100%; background: #FF9400;}
.btn_do::before     { content: ''; display: inline-block; width: 20px; height: 20px; background: url('../images/icon_share.png') no-repeat center; vertical-align: middle;}
.btn_do span        { margin-left: 6px; font-size: 18px; font-weight: 700; color: #fff;}

/* quick */
.quick              { position: fixed; right: 0; left: 0; bottom: 80px; max-width: 768px; min-width: 360px; z-index: 50; margin: 0 auto; padding-right: 20px;}
.quick .quick_top   { float: right;}
.quick .quick_top a { display: block; width: 60px; height: 60px; background: #fff url(../images/quick_top.png) no-repeat center; border-radius: 50%; box-shadow: 0 3px 15px rgba(0,0,0,0.1);}

/* header =====================================================================================*/
.header_main        { display: flex; justify-content: start; align-items: center; height: 62px; padding: 0 20px; background-color: #fff;}
.header_main a      { display: block; font-size: 0;}
.header             { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; z-index: 10; max-width: 768px; min-width: 360px; width: 100%; height: 62px; padding: 0 20px; background-color: #fff;}
.header .header_menu{ display: block; font-size: 0;}
.header .header_tit { line-height: 1; font-size: 18px; font-weight: 700; }

/* footer ===================================================================================== */
footer.footer                                 { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; max-width: 768px; min-width: 360px; margin: 0 auto; background-color: #fff; }
.wrap-type2 footer.footer::before             { position: absolute; top: -20px; left: 0; right: 0; z-index: 0; width: 100%; height: 20px; background-image: linear-gradient(to top, rgba(0,0,0,0.07), rgba(0,0,0,0)); object-fit: contain; content: '';}
.wrap-type2.is_topfixed footer.footer::before { display: none;}
.wrap-type3 footer.footer::before             { position: absolute; top: -20px; left: 0; right: 0; z-index: 0; width: 100%; height: 20px; background-image: linear-gradient(to top, rgba(0,0,0,0.07), rgba(0,0,0,0)); object-fit: contain; content: '';}
.wrap-type3.is_topfixed footer.footer::before { display: none;}
footer.footer .inner                          { background-color: #fff;}
footer.footer .footer_info                    { line-height: 18px; padding: 12px 0 12px 41px; background: url(../images/icon_footer_info.png) no-repeat 4px 12px; font-size: 13px; letter-spacing: -0.5px; color: #666;}
footer.footer .footer_wrap                    { display: block; height: 60px; font-size: 0;}

/* 샘플 페이지 ================================================================================== */
.sample                                  { position: relative; width: auto; margin: 0 auto; text-align: center; font-size: 0;}
.sample .sample_bg                       { max-width: 390px; width: 100%;}
.sample .sample_header                   { display: block; position: relative; max-width: 390px; padding: 26px 0 30px; margin: 0 auto; background: #fff; border: 1px solid #eee;}
.sample .sample_header::before           { position: absolute; bottom: -30px; left: 0; right: 0; z-index: 1; width: 100%; height: 30px; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) -30%, rgba(0, 0, 0, 0) 79%); object-fit: contain; content: '';}
.sample .sample_header > p               { line-height: 28px; margin-bottom: 17px; font-size: 20px; color: #333;}
.sample .sample_header > div             { font-size: 0;}
.sample .sample_header .btn_sample_close { line-height: 1; min-width: 150px; padding: 12px 16px; border-radius: 20px; background: #656782; font-size: 16px; font-weight: 700; color: #fff;}
.sample .sample_header .btn_sample_start { line-height: 1; min-width: 150px; padding: 12px 16px; border-radius: 20px; background: #FAA41A; font-size: 16px; font-weight: 700; color: #fff;}

/* 모달 ===================================================================================== */
.modal      { display: none;}
.modal .dim { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%);; transform: translateX(-50%); z-index: 10; max-width: 768px; min-width: 360px; width: 100%; height: 100%; background: none;}
.modal_wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; width: 350px; background-color: #fff; border: 1px solid #555; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); -webkit-box-sizing: border-box; box-sizing: border-box;}
.modal_header                  { position: relative; padding: 25px 30px 20px 30px;}
.modal_header::before          { display: none; position: absolute; bottom: -10px; left: 0; right: 0; height: 10px; object-fit: contain; background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.1), rgba(34, 34, 34, 0)); content: '';}
.modal_header .tit             { display: block; width: calc(100% - 20px); line-height: 26px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.modal_header .orange_box      { margin-top: 20px;}
.modal_header .orange_box dl   { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 20px; background-color: #FFF8F1; border-radius: 6px;}
.modal_header .orange_box dt   { font-size: 12px; color: #666;}
.modal_header .orange_box dd   { font-size: 0;}
.modal_header .orange_box span { font-size: 16px; font-weight: 700; color: #FE7600;}
.modal_close         { display: block; position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; font-size: 0;}
.modal_close::before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.modal_close::after  { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%) rotate(-45deg); transform: translate(-50%,-50%) rotate(-45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.modal_body                                     { overflow-y: scroll; overflow: auto; max-height: 310px; margin: 2px 10px 25px 10px; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.modal_body .modal_area .modal_list+.modal_list { margin-top: 10px;}
.modal_body .modal_area .head .option           { line-height: 18px; font-size: 12px; font-weight: 700; color: #F89000;}
.modal_body .modal_area .head .tit              { display: block; line-height: 18px; font-size: 12px; font-weight: 700; color: #333;}
.modal_body .modal_area .cont .txt              { display: block; line-height: 18px; margin-top: 2px; font-size: 12px; color: #666;}

    /* modal header가 fixe일때 */
    .modal.is_fixed .modal_header::before { display: block;}
    .modal.is_fixed .modal_body           { margin: 20px 10px 25px 10px; max-height: 292px;}


/* 레이어팝업 ▶▶▶ graph(통계정보) ≒ layer_full(보종선택) ===================================================================================== */
.layer_full                                      { display: none;}
.layer_full .layer_wrap                          { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; height: 100%; max-width: 768px; min-width: 360px; margin: 0 auto; background-color: #F3F4F6; transform: translateZ(0); -webkit-transform: translateZ(0);}
.layer_full .layer_header                        { height: 80px; padding: 0 70px 0 20px;}
.layer_full .layer_header .tit                   { line-height: 80px; font-size: 20px; color: #333; font-weight: 700;}
.layer_full .layer_close                         { display: block; position: absolute; top: 15px; right: 18px; width: 50px; height: 50px; font-size: 0;}
.layer_full .layer_close::before                 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.layer_full .layer_close::after                  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.layer_full .layer_body                          { overflow-y: scroll; overflow: auto; padding: 0 20px 20px 20px; height: calc( 100vh - 140px); -webkit-box-sizing: border-box; box-sizing: border-box;}
.layer_full .layer_footer                        { position: absolute;bottom: 0;left: 0;right: 0;}
.layer_full .prd_list li                         { vertical-align: top;}
.layer_full .prd_list li+li                      { margin-top: 10px;}
.layer_full .prd_list input + label              { display: block; min-height: 78px; padding: 13px 20px; border-radius: 10px; background-color: #fff; border: 2px solid #fff; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; cursor: pointer;}
.layer_full .prd_list input:checked + label      { border: 2px solid #FE7600; box-shadow: 0 8px 8px rgba(0,0,0,0.08);}
.layer_full .prd_list input:checked + label .prd_tit:after { display: inline-block; position: relative; top: 2px; width: 16px;height: 16px;margin-left: 5px; background: url('../images/icon_check-orange.png') no-repeat center; content: '';}
.layer_full .prd_list .prd_box                   { display: inline-block; width: 100%; padding-left: 60px; vertical-align: top;}
.layer_full .prd_list li:nth-of-type(1) .prd_box { background: #fff url(../images/icon_prd1.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(2) .prd_box { background: #fff url(../images/icon_prd2.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(3) .prd_box { background: #fff url(../images/icon_prd3.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(4) .prd_box { background: #fff url(../images/icon_prd4.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(5) .prd_box { background: #fff url(../images/icon_prd5.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(6) .prd_box { background: #fff url(../images/icon_prd6.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(7) .prd_box { background: #fff url(../images/icon_prd7.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(8) .prd_box { background: #fff url(../images/icon_prd8.png) no-repeat left top;}
.layer_full .prd_list li:nth-of-type(9) .prd_box { background: #fff url(../images/icon_prd9.png) no-repeat left top;}
.layer_full .prd_list .prd_tit                   { font-size: 18px; font-weight: 500;}
.layer_full .prd_list .prd_txt                   { font-size: 15px;}
    /* 비활성화 */
    .layer_full input:disabled + label { opacity: 0.3; box-shadow: none; cursor: auto;}

/* 레이어팝업 ===================================================================================== */
/* 모바일 최저 width 360px ~ */
.layer                           { display: none; position: fixed; left: 0; top: 0; z-index: 1000; width: 100vw; height: 100vh;}
.dim_replace                     { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; width: 100%; height: 100%;}
.layer .dim                      { max-width: 768px; min-width: 360px; width: 100%; height: 100%; margin: 0 auto; background: rgba(0,0,0,0.5); }

.layer .layer_wrap               { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; border-radius: 20px; background: #fff; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 8px 30px rgba(0,0,0,0.25); font-size: 0;}
.layer.layer-comfirm .layer_wrap { padding: 30px 34px; width: 330px;}
.layer.layer-loading .layer_wrap { width: 100%; border-radius: 0; background: transparent; box-shadow: none;}
.layer.layer-again .layer_wrap   { width: 350px; padding: 40px 0;}
.layer.layer-do .layer_wrap      { width: 350px; padding: 25px 20px;}   
/* .layer.layer-ask .layer_wrap     { width: 320px; padding: 40px 0;} */
.layer_tit1                      { line-height: 30px; font-size: 20px;font-weight: 500; color: #333;letter-spacing: -0.65px;}
.layer_tit1 span                 { font-weight: 700; color: #ffa400;}
.layer_tit2                      { letter-spacing: -0.55px; font-size: 20px; font-weight: 700; color: #444;}
.layer.layer-again .layer_tit1   { margin-top: 20px;}
.layer_txt1                      { margin: 10px 0 20px; font-size: 14px; color: #444; letter-spacing: -0.4px;}
.layer_txt2                      { line-height: 24px; font-size: 16px;font-weight: 500; color: #444;}
.layer_txt3                      { margin-top: 5px; font-size: 16px; letter-spacing: -0.35px; color: #444;}
.layer_txt4                      { margin-top: 5px; font-size: 16px; letter-spacing: -0.35px; color: #fff;}
.layer.layer-comfirm .layer_txt2 { margin-bottom: 24px;}

/* 레이어팝업 버튼 */
.layer_btn1             { width: 100%; height: 42px; line-height: 41px; background-color: #666; border-radius: 28px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.5px;}
.layer_btn2             { width: 100%; height: 42px; line-height: 41px; background-color: #FF9400; border-radius: 28px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.5px;}
.layer_btn_wrap         { display: flex; justify-content: center; margin-top: 20px;}
.layer_btn_wrap > li    { width: calc((100% - 10px) / 2);}
.layer_btn_wrap > li+li { margin-left: 10px;}

    /* layer-do : 보험료 결과 저장(공유)하기  */
    .layer_noti           { width: 100%; margin: 20px auto 0; text-align: left;}
    .layer_noti li        { position: relative; line-height: 1.4; padding-left: 7px; font-size: 13px;color: #999;letter-spacing: -0.35px;}
    .layer_noti li::after { position: absolute; top: 7px; left: 0; width: 3px; height: 3px; background-color: #999; border-radius: 50%; content: '';}

    /* layer-loading : 처리중입니다. 로딩 */
    .layer-loading .layer_render { width: 170px;}
    .icon-spinner { margin-bottom: 15px; animation: spinner 1s infinite ease-out;}
    @keyframes spinner {
        0%   { transform: rotate(0);}
        100% { transform: rotate(360deg);}
    }

/* 레이어팝업 ▶▶▶ message ===================================================================================== */
.message                            { display: none;}
.message .dim                       { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; max-width: 768px; min-width: 360px; width: 100%; height: 100%; background: none;}
.message .message_wrap              { position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); width: 280px; padding: 30px; border: 1px solid #333; border-radius: 6px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.2); text-align: center; font-size: 0;}
.message .message_wrap img          { margin-bottom: 20px;;}
.message .message_wrap .message_txt { font-size: 16px;color: #444; letter-spacing: -0.5px;}

/* 레이어팝업 ▶▶▶ layer-do : form2 보험료 결과 저장(공유)하기 ===================================================================================== */
.form2                                  { margin-top: 20px; text-align: left;}
.form2 li+li                            { margin-top: 10px;}
.form2 .form_box                        { position: relative; min-height: 63px;; padding: 12px 10px 12px 15px; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd; vertical-align: top;}
.form2 .form_box > div                  { height: 18px;}
.form2 .tit                             { display: block; line-height: 1; margin-bottom: 7px; font-size: 12px; font-weight: 500; color: rgb(68 68 68);}
.form2 input[type="text"],
.form2 input[type="tel"]                { width: 100%; height: 18px; line-height: 18px; border: 0; font-size: 16px; outline: none;}
.form2 input[type="text"]::placeholder,
.form2 input[type="tel"]::placeholder   { font-size: 16px; color: #BEBEBE;}


    
/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                                                    content
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



/* wrap ===================================================================================== */                          
/* wrap ▶▶▶ wrap-type1 */
.wrap-type1 main   { padding-bottom: 62px;}

/* wrap ▶▶▶ wrap-type2 */
.wrap-type2        { padding-top: 62px;}
.wrap-type2 main   { padding-bottom: 165px;}
.wrap-type2 .quick { bottom: 170px;}

/* wrap ▶▶▶ wrap-type3 */
.wrap-type3        { padding-top: 62px;}
.wrap-type3 main   { padding-bottom: 260px;}
.wrap-type3 .quick { bottom: 285px;}


/* main ==================================================================================================================== */
main         { padding-bottom: 70px;}
.cont_tit    { line-height: 1; font-size: 26px;font-weight: 600;}
.cont_subtit { margin: 12px 0 30px; letter-spacing: -0.8px; font-size: 16px;font-weight: 500;color: rgb(68 68 68);}
.main_info   { margin-top: 20px; padding: 16px 0 16px 24px; line-height: 18px; background: #F3F6FA; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; color: #666;}
.form_area   { padding: 30px 0 20px;}

/* main ▶▶▶ main_visual */
.main_visual                    { padding: 36px 0 22px; -webkit-box-sizing: border-box; box-sizing: border-box; background:linear-gradient(150deg,#FEFAF2, #FEE3C8);}
.main_visual .tit               { line-height: 1.3333; font-size: 36px; font-weight: 500; color: #444;}
.main_visual .tit span          { font-weight: 900; color: #FAA41A;}
.main_visual .txt               { margin-top: 13px; letter-spacing: -0.9px; font-size: 18px;}
.main_visual .btn               { margin-top: 63px;}
.main_visual .btn button        { position: relative; width: 100%; height: 60px; line-height: 58px; padding: 0 50px 0 20px; border: 2px solid #F89000; border-radius: 12px; background: #fff url('../images/icon_more.png') no-repeat right 12px center; box-shadow: 0 0 15px rgba(255, 119, 0, 0.2); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 18px; color: #FA8A1A; font-weight: 700; text-align: left;}
.main_visual .btn button:before { position: absolute;top: -72px;right: 22px; display: inline-block;width: 97px; height: 79px;background: url('../images/olchi_02.png') no-repeat;content: '';}
.main_visual ul            { overflow: hidden; margin-top: 13px;}
.main_visual ul li         { float: left;margin-right: 8px;margin-bottom: 8px;}
.main_visual ul li a       { display: inline-block; padding: 10px 13px 10px 20px; background: #FE7600; border-radius: 22px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #fff;}
.main_visual ul li a:after { display: inline-block; width: 20px;height: 20px; margin-left: 5px; background: url('../images/icon_x_white.png') no-repeat 0 0; vertical-align: middle; content: '';}

/* main ▶▶▶ main_login */
.main_login                    { padding: 30px 0; border-bottom: 10px solid #F3F4F6}
.main_login .btn_kakao         { display: block; width: 100%; line-height: 50px; border-radius: 6px; background-color: #FEE500; font-size: 16px; font-weight: 600;}
.main_login .btn_kakao::before { display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url('../images/icon_kakao.png') no-repeat center 3px; vertical-align: text-bottom; content: '';}
.main_login .btn_naver         { display: block; width: 100%; line-height: 50px; border-radius: 6px; background-color: #25C700; font-size: 16px; font-weight: 600; color: #fff; background: #25C700;}
.main_login .btn_naver::before { display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url('../images/icon_naver.png') no-repeat center 4px; vertical-align: text-bottom; content: '';}
.main_login button+button      { margin-top: 10px;}

/* main ▶▶▶ form1 */
.form1                                  { margin-top: 30px; text-align: left;}
.form1 li+li                            { margin-top: 10px;}
.form1 .form_box                        { position: relative; min-height: 63px;; padding: 12px 10px 12px 15px; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd; vertical-align: top;}
.form1 .form_box > div                  { height: 18px;}
.form1 .tit                             { display: block; line-height: 1; margin-bottom: 7px; font-size: 12px; font-weight: 500; color: rgb(68 68 68);}
.form1 input[type="text"],
.form1 input[type="tel"]                { width: 100%; height: 18px; line-height: 18px; border: 0; font-size: 16px; outline: none;}
.form1 input[type="text"]::placeholder,
.form1 input[type="tel"]::placeholder   { font-size: 16px; color: #BEBEBE;}

    /* 요청시 */
    /* .form_area .form_box:not(.gender_chk):active,
    .form_area .form_box:not(.gender_chk):focus,
    .form_area .form_box:not(.gender_chk):visited,
    .form_area .form_box:not(.gender_chk):focus-within { border: 1px solid #FAA41A;} */

    /* 기본정보입력 : 이름 */
    .form_name                                               { font-size: 0;}
    .form_name .form_box:nth-of-type(1)                      { display: inline-block; width: calc(100% - 135px);}
    .form_name .form_box+.form_box                           { margin-left: 10px;}
    .form_name .gender_chk                                   { overflow: hidden; display: inline-block; position: relative; width: 125px; padding: 0; border: none; border-radius: 0;}
    .form_name .gender_chk span                              { display: inline-block; position: relative; width: 50%; height: 100%;}
    .form_name .gender_chk span+span                         { left: -1px;}
    .form_name .gender_chk span:nth-of-type(1) input + label { border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
    .form_name .gender_chk span:nth-of-type(2) input + label { border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
    .form_name .gender_chk input + label                     { position: relative; display: inline-block; width: 100%; line-height: 61px; border: 1px solid #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; color: #BEBEBE; text-align: center; cursor: pointer; }
    .form_name .gender_chk input:checked + label             { z-index: 3; background: #FFF9F3; border: 1px solid #FAA41A; color: #FAA41A;}

    /* 기본정보입력 : 인증 */
    .form_num .btn_send   { position: absolute; right: 10px; bottom: 9px; height: 29px; line-height: 29px; padding: 0 20px; background: #EBEBEB; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; color: #444; text-align: center;}
    
    /* 기본정보입력 : 인증번호 */
    .form_confirm .btn_verify            { position: absolute; right: 10px; bottom: 9px; height: 29px; line-height: 29px; padding: 0 20px; background: #FAA41A; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; color: #fff; text-align: center;}
    .form_confirm .form_confirm-time     { position: absolute; bottom: 10px; right: 85px; line-height: 25px; color: #FA8A1A; }
    .form_confirm .form_box:active,
    .form_confirm .form_box:focus,
    .form_confirm .form_box:visited,
    .form_confirm .form_box:focus-within { border: 1px solid #FAA41A;}

    /* 기본정보입력 : 보기 */
    .form_bottom                                   { margin: 12px 0 20px;}
    .form_bottom .agree_area                       { font-size: 14px; text-align: left;}
    .form_bottom .agree_area input + label         { display: inline-block; line-height: 30px; padding: 0 0 0 40px; background: url('../images/checkbox1.png') no-repeat 0 0; background-size: 30px auto; color: #666; cursor: pointer;}
    .form_bottom .agree_area input:checked + label { background-position: 0 bottom;}
    .form_bottom .agree_area a                     { display: inline-block; line-height: 1; border-bottom: 1px solid #000; color: #333;}

/* search ========================================================= */
/* search_customer */
.search .search_customer                                  { position: relative; padding: 10px 0 16px;}
.search .search_customer ul                               { font-size: 0;}
.search .search_customer li                               { position: relative; display: inline-block; font-size: 0;}
.search .search_customer li i                             { line-height: 1; margin: 0 1px; font-style: normal; font-size: 18px; color: #666;}
.search .search_customer li span                          { line-height: 1; font-size: 18px; color: #666;}
.search .search_customer .search_customer_name            { display: block; margin-bottom: 12px;}
.search .search_customer .search_customer_name span       { line-height: 1; font-size: 20px; font-weight: 900; color: #333;}
.search .search_customer .search_customer_name span::after{ position: relative; left: 2px; font-size: 20px; font-weight: 500; color: #333; content: '님';}
.search .search_customer .search_customer_img             { position: absolute; top: 10px; right: 10px;}
.search .search_customer .search_customer_img div         { overflow: hidden; width: 60px; height: 60px; border: 1px solid #FFF3E8; background-color: #FFF9F3; border-radius: 50%;}
.search .search_customer .search_customer_img div img     { width: 100%; height: 100%;}

/* search_customer2 */
.search .search_customer2                { margin-bottom: 16px;}
.search .search_customer2 li             { display: inline-block;}
.search .search_customer2 li:first-child { margin-right: 35px;}
.search .search_customer2 li:last-child  { display: block;}
.search .search_customer2 li strong      { display: inline-block; line-height: 28px; margin-right: 10px; font-size: 16px; font-weight: 700; color: #FB921B;}
.search .search_customer2 li span        { display: inline-block; line-height: 28px; font-size: 16px; color: #666;}

/* search_category */
.search .search_category                           { padding: 16px 0 20px; background-color: #FFF9F3;}
.search .search_category .search_category_tit      { padding: 2px 20px 10px; color: #666;}
    /* swiper_add */
    .swiper_add         { overflow: hidden;}
    .swiper_add li      { display: flex;width: auto; border: none;}
    .swiper_add li span { display: block; min-width: 65px; height: 38px; line-height: 38px; padding:0 20px; -webkit-box-sizing: border-box; box-sizing:border-box; border-radius: 6px; background: #FFA400; text-align: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.7px;}

/* result ========================================================= */
.result                  { position: relative;  }
.item_wrap               { position: relative; margin: 0 40px 0 19px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff;}
.item_wrap .swiper       { overflow: visible;}
 
/* top */
.top            { position: relative; }
.top .top_total { padding: 10px 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.top_total .base         { position: relative; top: 0; z-index: 2; display: flex; align-items: center; height: 50px; line-height: 1.2; padding-left: 72px; font-size: 14px;}
.top_total .base::before { position: absolute; bottom: -10px; left: 9px; width: 53px; height: 51px; background: url(../images/total_olchi.png) no-repeat center; content: '';}
.top_total .base span    { display: contents; color: #FB921B; font-weight: 900;}
.top_total .self               { position: relative; z-index: 2; font-size: 14px;}
.top_total .self::before       { position: absolute; top: 9px; left: 9px; width: 53px; height: 51px; background: url(../images/total_olchi.png) no-repeat center; content: '';}
.top_total .self .left         { display: flex; align-items: center; height: 50px; line-height: 18px; padding-left: 72px; background-image: linear-gradient(to right, #ddd 50%, rgba(255,255,255,0) 0%); background-position: center bottom; background-size: 8px 1px; background-repeat: repeat-x;}
.top_total .self .left b       { color: #FB921B;}
.top_total .self .right        { margin-top: 20px; line-height: 48px; background-color: #F6F6F6; border: 1px solid #F3F3F3; border-radius: 18px; font-size: 14px; text-align: center;}
.top_total .self .right strong { font-weight: 900;}
.top_total .self .right span   { margin: 0 10px 0 5px;}

 
/* item_top ================================================================================== */
.item_top                { padding: 20px 20px 16px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0;}
.item_top .item_logo     { display: inline-block; font-size: 0;}
.item_top .item_logo img { width: auto; max-width: 100px; height: 30px; object-fit: contain;}
.item_top .item_tit      { height: 52px; line-height: 26px; margin-top: 7px; font-size: 18px; font-weight: 700; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.item_top .item_detail { margin-top: 9px;}
.item_top .item_detail .detail_expr         {  font-size: 0;}
.item_top .item_detail .detail_expr dt      { display: inline-block; line-height: 20px; font-size: 16px; color: #999; vertical-align: top;}
.item_top .item_detail .detail_expr dd      { display: inline-block; margin-left: 10px; vertical-align: top;}
.item_top .item_detail .detail_expr dd span { display: inline-block; position: relative; line-height: 20px; font-size: 16px; font-weight:700; color: #666;}
.item_top .item_detail .detail_expr dd span+span         { margin-left: 6px; padding-left: 6px;}
.item_top .item_detail .detail_expr dd span+span::before { position: absolute; top: 3px; left: 0; width: 1px; height: 12px; background-color: #ccc; content: '';}

.item_top .item_total { display: flex; width: 100%; justify-content: space-between; margin-top: 28px;;}
.item_top .item_total .total_left         { display: inline-block; font-size: 0; text-align: left; }
.item_top .item_total .total_left em      { display: inline-block; line-height: 32px; margin-right: 3px; font-size: 13px; font-weight: 700; color:#999;}
.item_top .item_total .total_left span    { display: inline-block; line-height: 32px; font-size: 16px; font-weight: 700; color:#333;}
.item_top .item_total .total_right        { display: inline-block; text-align: right; font-size: 0;}
.item_top .item_total .total_right .total { display: inline-block; line-height: 32px; font-size: 28px; font-weight: 900; color: #FE7600;}
.item_top .item_total .total_right .unit  { display: inline-block; line-height: 20px; margin-left: 4px; font-size: 16px; font-weight: 700; color: #333; }

/* 직접설계하기 버튼 */
.item_go                         { display: block; position: relative; margin-top: 15px;}
.item_go a                       { display: block; height: 50px; line-height: 51px; border-radius: 6px; text-align: center; cursor: pointer; background: #FFF2E5 }
.item_go a b                     { padding-right: 22px; background: url(../images/icon_info_yellow.png) no-repeat right center; font-size: 18px; font-weight: 700; color: #F89000;}
.item_go .tooltip                { display: block; position: absolute; top: -58px; left: 50%; transform: translateX(-50%); width: 250px; line-height: 20px; padding: 9px 11px; background: #F9F9F9; border: 1px solid #BBB; border-radius: 6px; box-shadow: 5px 4px 12px rgb(0 0 0 / 20%); font-size: 14px; font-weight: 500; color: #666; letter-spacing: -0.65px;}
.item_go .tooltip::before        { display: inline-block; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); bottom: -6px; width: 10px; height: 10px; margin-left: 52px; background: #F9F9F9; border-right: 1px solid #BBB; border-bottom: 1px solid #BBB; content: '';}
.item_go .tooltip button         { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; font-size: 0;}
.item_go .tooltip button::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 16px; height: 1.5px; background-color: #ccc; border-radius: 5px; content: '';}
.item_go .tooltip button::after  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 16px; height: 1.5px; background-color: #ccc; border-radius: 5px; content: '';}

/* item_cont ================================================================================== */
.btn_item_search{ display: inline-block; position: relative; top: 0; width: 22px; height: 22px; background: url(../images/btn_item_search.png) no-repeat; font-size: 0; vertical-align: top;}
.item_cont                       { padding: 0 20px 20px 20px; min-height: 230px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.item_cont .item_list            { display: flex; justify-content: space-between; position: relative; padding: 12px 0 10px;}
.item_cont .item_list+.item_list { background-image: linear-gradient(to right, #DDD 60%, rgba(255,255,255,0) 0%); background-position: left top; background-size: 7px 1px; background-repeat: repeat-x;}
.item_cont .item_list *          { letter-spacing: -0.5px;}
.item_cont .item_list .left               { width: calc(100% - 100px); text-align: left;}
.item_cont .item_list .left .tit          { font-size: 0;}
.item_cont .item_list .left .tit span     { overflow: hidden; display: inline-block; line-height: 23px; max-width: calc(100% - 24px); padding-right: 5px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #333;}
.item_cont .item_list .left .amount       { display: block; line-height: 25px; font-size: 14px; font-weight: 700; color: #999; vertical-align: top;}
.item_cont .item_list .right                           { width: 95px; text-align: right;}
.item_cont .item_list .right .amount                   { line-height: 23px; font-size: 16px; font-weight: 700; color: #FB921B;}
.item_cont .item_list .right .detail                   { position: absolute; right: 0; bottom: 15px; font-size: 0;}
.item_cont .item_list .right .detail span              { position: relative; display: inline-block; line-height: 20px; font-size: 14px; font-weight: 700; color: #999; vertical-align: top}
.item_cont .item_list .right .detail span+span         { margin-left: 5px; padding-left:5px;}
.item_cont .item_list .right .detail span+span::before { position: absolute; top: 4px; left: 0; width: 1px; height: 10px; background-color: #ccc; content: '';}

/* swiper base =============================================== */
.swiper-wrapper { display: flex !important; flex: 1 !important; width: 100% !important; height: 100% !important;}
.swiper-slide   { height: auto !important; background: #fff; border: 1px solid #E6E6E6; border-radius: 6px; font-size: 20px;}







/* 보험료 셀프설계 페이지 ================================================================================== */

/* 셀프설계 */
.top_self                { display: block; padding: 15px 20px 20px; font-size: 0; text-align: center;}
.top_self .self_logo     { display: inline-block; width: 140px;}
.top_self .self_logo img { width: auto; max-width: 130px; height: 36px; object-fit: contain;}
.top_self .self_tit      { overflow: hidden; line-height: 28px; margin: 10px 0 12px; font-size: 20px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.top_self .detail_expr                      { font-size: 0;}
.top_self .detail_expr dt                   { display: inline-block; line-height: 20px; font-size: 16px; color: #999; vertical-align: top;}
.top_self .detail_expr dd                   { display: inline-block; margin-left: 10px; vertical-align: top;}
.top_self .detail_expr dd span              { display: inline-block; position: relative; line-height: 20px; font-size: 16px; font-weight:700; color: #666;}
.top_self .detail_expr dd span+span         { margin-left: 6px; padding-left: 6px;}
.top_self .detail_expr dd span+span::before { position: absolute; top: 3px; left: 0; width: 1px; height: 14px; background-color: #ccc; content: '';}

/* 셀프설계 ▶▶▶ 결과값 */
.result_item                       { padding: 0 20px 20px 20px; min-height: 230px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.result_item .item_list            { display: flex; justify-content: space-between; position: relative; padding: 12px 0 10px;}
.result_item .item_list+.item_list { background-image: linear-gradient(to right, #DDD 60%, rgba(255,255,255,0) 0%); background-position: left top; background-size: 7px 1px; background-repeat: repeat-x;}
.result_item .item_list *          { letter-spacing: -0.5px;}
.result_item .item_list .left                 { width: calc(100% - 125px); text-align: left;}
.result_item .item_list .left .tit            { font-size: 0;}
.result_item .item_list .left .tit span       { overflow: hidden; display: inline-block; line-height: 23px; max-width: calc(100% - 24px); padding-right: 5px; word-wrap: normal; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; color: #333;}
.result_item .item_list .left .item_guarantee { display: block; height: 27px; font-size: 14px; font-weight: 700;}
.result_item .item_list .right                           { width: 120px; text-align: right;}
.result_item .item_list .right .amount                   { line-height: 23px; font-size: 16px; font-weight: 700; color: #FB921B;}
.result_item .item_list .right .detail                   { position: absolute; right: 0; bottom: 15px; font-size: 0;}
.result_item .item_list .right .detail span              { position: relative; display: inline-block; line-height: 20px; font-size: 14px; font-weight: 700; color: #999; vertical-align: top}
.result_item .item_list .right .detail span+span         { margin-left: 5px; padding-left:5px;}
.result_item .item_list .right .detail span+span::before { position: absolute; top: 4px; left: 0; width: 1px; height: 10px; background-color: #ccc; content: '';}

/* 셀프설계 ▶▶▶ 월 보험료 ================================================================================== */
.self_total                 { position: relative; display: flex; flex-wrap: wrap; align-items: end; padding-top: 34px;}
.self_total *               { display: inline-block; font-size: 0; font-weight: 700; vertical-align: bottom;}
.self_total em              { line-height: 30px; margin-right: 2px; font-size: 13px; color: #999;}
.self_total span            { line-height: 30px; font-size: 16px; color: #333;}
.self_total .total          { line-height: 34px; margin-left: auto; margin-right: 3px; font-size: 30px; color: #FF4B6A; font-weight: 900;}
.self_total .tooltip        { display: inline-block; position: absolute; top: -16px; right: 10px; line-height: 1; padding: 11px 13px; background-color: #EBF3FF; border-radius: 8px; font-size: 14px; color: #569AFF;}
.self_total .tooltip::after { display: inline-block; position: absolute; right: 5px; bottom: -8px; width: 0; height: 0;  border-bottom: 4px solid transparent; border-top: 4px solid #EBF3FF; border-left: 6px solid #EBF3FF; border-right: 6px solid transparent; content: '';}

/* 셀프설계 ▶▶▶ graph(통계정보) ≒ layer_full(보종선택) ================================================================================== */
.graph                         { display: none; position: fixed; left: 0; right: 0;top: 0; z-index: 60; max-width: 768px; min-width: 360px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; transform: translateZ(0); -webkit-transform: translateZ(0);}
.graph .graph_wrap             { position: relative; height: 100%; background-color: #F3F4F6;}
.graph .graph_header           { height: 80px; padding: 0 70px 0 20px;}
.graph .graph_header .tit      { line-height: 80px; font-size: 20px; color: #333; font-weight: 700;}
.graph .graph_close            { display: block; position: absolute; top: 15px; right: 18px; width: 50px; height: 50px; font-size: 0;}
.graph .graph_close::before    { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.graph .graph_close::after     { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); width: 26px; height: 2px; background-color: #555; border-radius: 10px; content: '';}
.graph .graph_body             { overflow-y: scroll; overflow: auto; padding: 0 20px 20px 20px; height: calc(100vh - 80px); -webkit-box-sizing: border-box; box-sizing: border-box;}
.graph .graph_box              { padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; background: #fff;}
.graph .graph_box+.graph_box   { margin-top: 20px;}
.graph .graph_tit              { line-height: 1; margin-bottom: 10px; font-size: 16px;font-weight: 700; color: #FF8A00;}
.graph .graph_txt              { line-height: 1; font-size: 16px; color: #000;}
.graph .graph_area             { position: relative; margin-top: 20px;}
.graph .graph_area .graph_unit { position: absolute; top: -34px; right: 0; font-size: 12px;}

    /* chart : radar */
    #chart_radar                   { display: inline-block; vertical-align: top;}
    .graph .graph_box1 .graph_area { text-align: center;}

    /* chart : bar */
    #chart_bar                          { position: relative; width: 100%;}
    #chart_bar ul li                    { display: flex;justify-content: space-between;align-items: center; margin-bottom: 9px;}
    #chart_bar ul .chart_bar_tit        { display: inline-block; width: 40px; font-size: 14px; color: #000;}
    #chart_bar ul .chart_bar_tit > span { margin-left: 20px;}
    #chart_bar ul .chart_bar_value      { font-size: 12px;color: #7e7e7e;}
    #chart_bar .chart_bar_list          { width: calc(100% - 180px); margin: -145px 0 0 95px;}
    #chart_bar .chart_bar               { height: 10px; line-height: 10px; margin-bottom: 20px; background-color: rgba(0,0,0,0.1); border-radius: 5px; font-size: 0; color: #fff;}
    #chart_bar .chart_bar *             { transition: all 0.5s ease;}
    #chart_bar .chart_bar div           { position: relative; padding-left: 0; width: 0; background:linear-gradient(to left, #fda326, #ffc767); border-radius: 5px; font-size: 0; text-indent: -99999999px;}
    #chart_bar .chart_bar span          { display: block; position: absolute; right: 0; top: 0; height: 100%; padding: 0 5px 0 10px; background-color: #1a1a1a; border-radius: 0 2px 2px 0;}
    #chart_bar .chart_bar span:before   { position: absolute; top: 50%; left: -3px; transform: rotate(45deg); width: 6px; height: 6px; margin-top: -3px; background-color: #1a1a1a; content: "";}

    /* chart : list */
    #chart_list            { margin-top: 20px;}
    #chart_list li         { height: 40px;  padding: 0 20px; font-size: 0;}
    #chart_list li+li      { border-top: 1px solid #eaeaea;}
    #chart_list li em      { display: inline-block; width: 15px; line-height: 40px; font-size: 18px; color: #999; text-align: center;}
    #chart_list li span    { display: inline-block; width: calc(100% - 15px); line-height: 40px; padding-left: 28px; font-size: 14px; color: #999; vertical-align: top;}
    #chart_list li.is_on * { color: #ff8a00; font-weight: 700; }



/* fixed ================================================================================== */
/* fixed ▶▶▶ fixed_item -보험료 비교설계 */
.fixed_item                                           { display: block; position: fixed; top: -5000px; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%; max-width: 768px; min-width: 360px; padding: 10px 0 20px; background-color: #fff;}
.is_topfixed .fixed_item                              { top: 62px;}
.fixed_item::before                                   { position: absolute; bottom: -20px; left: 0; right: 0; z-index: 1; width: 100%; height: 20px; background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.08), rgba(34, 34, 34, 0)); object-fit: contain; content: '';}
.fixed_item .top                                      { overflow: hidden;}
.fixed_item .top .top_total                           { padding: 0 0 0 20px;}
.fixed_item .top .top_total .base                     { height: 27px; padding-left: 54px;}
.fixed_item .top .top_total .base::before             { bottom: -8px; width: 36px; height: 35px; background: url(../images/total2_olchi.png) no-repeat center; background-size: 100% auto;}
.fixed_item .item_top                                 { padding: 12px 20px 16px 20px;}
.fixed_item .item_top .item_tit                       { line-height: 24px; font-size: 16px; margin-top: 7px;}
.fixed_item .item_top .item_total                     { margin-top: 12px;}
.fixed_item .item_top .item_total .total_right .total { line-height: 20px; font-size: 18px;}
.fixed_item .item_top .item_total .total_right .unit  { font-size: 14px;}
.fixed_item .item_top .item_total .total_left em      { line-height: 20px; font-size: 12px;}
.fixed_item .item_top .item_total .total_left span    { line-height: 20px; font-size: 14px;}
.fixed_item .item_go                                  { margin-top: 8px;}
.fixed_item .item_go a                                { height: 30px; line-height: 30px;}
.fixed_item .item_go a b                              { font-size: 14px;}
.fixed_item .item_go .tooltip                         { top: -64px;}
.fixed_item .item_go .tooltip::before                 { margin-left: 41px;}

/* fixed ▶▶▶ fixed_self - 보험료 셀프설계 */
.fixed_self                                             { display: block; position: fixed; top: -1000px; left: 50%; transform: translateX(-50%); z-index: 10; max-width: 768px; min-width: 360px; width: 100%; background-color: #fff;}
.is_topfixed .fixed_self                                { top: 62px;}
.fixed_self .top_self                                   { padding: 0 20px 17px; border-bottom: 1px solid #DDD; text-align: left;}
.fixed_self .top_self .self_tit                         { line-height: 24px; margin: 8px 0 4px; font-size: 16px; text-align: left;}
.fixed_self .top_self .detail_expr dt                   { font-size: 14px;}
.fixed_self .top_self .detail_expr dd span              { font-size: 14px;}
.fixed_self .top_self .detail_expr dd span+span::before { height: 12px;}