/*--------------------------------------------------------------------------------------------------------------------------
                                                엔딩노트 CSS 정리 부분
--------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------
                공통요소 -기본
------------------------------------------------*/


/*자동으로 채워지는 현상 막기*/
/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { 
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #fff !important;
}*/

[v-cloak] > * {
    display: none;
}

a {
    cursor: pointer;
}

i {
    font-style: normal;
}

img {
    height: inherit;
}

table {
    width: 100%;
}

th, tr {
    font-weight: normal;
}


/* ---- 로딩 화면(액션) ----*/

.step.loading {
    justify-content: center;
    text-align: center;
    height: 100%;
}

.page_login_member .step.loading {
    display: flex;
    align-items: center;
}


.step.loading .logo img {
    width: 165px;
    margin-bottom: 2rem;
}

.step.loading .positioning, .loading.loading_warp .positioning {
    margin: 50px auto;
    position: relative;
}

.step.loading .loader-spinner, .loading.loading_warp .loader-spinner {
    width: 10rem;
    height: 10rem;
    margin: 50px auto;
}

    .step.loading .loader-spinner div, .loading.loading_warp .loader-spinner div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .loader-spinner div:before {
        display: block;
        width: 15%;
        height: 15%;
        margin: 0 auto;
        content: "";
        border-radius: 100%;
        background-color: #feb52b;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-animation: spinner 1.2s infinite ease-in-out both;
        animation: spinner 1.2s infinite ease-in-out both;
    }

    .loader-spinner div:nth-child(2) {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .loader-spinner div:nth-child(2):before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .loader-spinner div:nth-child(3) {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .loader-spinner div:nth-child(3):before {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .loader-spinner div:nth-child(4) {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .loader-spinner div:nth-child(4):before {
        -webkit-animation-delay: -.9s;
        animation-delay: -.9s;
    }

    .loader-spinner div:nth-child(5) {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .loader-spinner div:nth-child(5):before {
        -webkit-animation-delay: -.8s;
        animation-delay: -.8s;
    }

    .loader-spinner div:nth-child(6) {
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .loader-spinner div:nth-child(6):before {
        -webkit-animation-delay: -.7s;
        animation-delay: -.7s;
    }

    .loader-spinner div:nth-child(7) {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .loader-spinner div:nth-child(7):before {
        -webkit-animation-delay: -.6s;
        animation-delay: -.6s;
    }

    .loader-spinner div:nth-child(8) {
        -webkit-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .loader-spinner div:nth-child(8):before {
        -webkit-animation-delay: -.5s;
        animation-delay: -.5s;
    }

    .loader-spinner div:nth-child(9) {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .loader-spinner div:nth-child(9):before {
        -webkit-animation-delay: -.4s;
        animation-delay: -.4s;
    }

    .loader-spinner div:nth-child(10) {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .loader-spinner div:nth-child(10):before {
        -webkit-animation-delay: -.3s;
        animation-delay: -.3s;
    }

    .loader-spinner div:nth-child(11) {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .loader-spinner div:nth-child(11):before {
        -webkit-animation-delay: -.2s;
        animation-delay: -.2s;
    }

    .loader-spinner div:nth-child(12) {
        -webkit-transform: rotate(330deg);
        transform: rotate(330deg);
    }

    .loader-spinner div:nth-child(12):before {
        -webkit-animation-delay: -.1s;
        animation-delay: -.1s;
    }

    @-webkit-keyframes spinner {
        0% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        10% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        50% {
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        90% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        100% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }
    }

    @keyframes spinner {
        0% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        10% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        50% {
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        90% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }

        100% {
            -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
        }
    }





/* ----------
    font 관련 
  ---------- */

.co_gray82, .c_82 {
    color: #828282 !important;
}

.co_gray66, .c_66 {
    color: #666666 !important;
}
.c_99{
    color:#999 !important;
}

.co_black {
    color: #000 !important;
}

.co_orange {
    color: #fe7a57 !important;
}

.co_blue {
    color: #4e6dec !important;
}

.co_blue2 {
    color: #5d7cf9 !important;
}


.co_green {
    color: #2ebfa2 !important;
}
.c_31 {
    color: #313131 !important;
}

.c_fff {
    color: #fff !important;
}

.c_13 {
    color: #131313 !important;
}

.c_a6 {
    color: #a6a6a6 !important;
}

.c_9a {
    color: #9a9fa8 !important;
}

.c_blue {
    color: #5d7cf9 !important;
}

.c_d9 {
    color: #d9e1ff !important;
}

.c_bd {
    color: #bdfff2 !important;
}

.c_75 {
    color: #754a13 !important;
}

.c_09 {
    color: #09ba97 !important;
}

.c_a1 {
    color: #a1a1a1 !important;
}
.bg_w {
    background: #fff !important;
}

.c_yellow {
    color: #fbb100 !important;
}
.c_yellow2 {
    color: #ffd800 !important;
}
.c_yellow3 {
    color: #FFCD09 !important;
}
.c_orange {
    color: #fc8e00 !important;
}
.c_b9 {
    color: #b9b9b9 !important;
}
.c_brown {
    color: #311d0c!important;
}

.c_endingplan {
    color: #ffcd09;
}

.c_testament {
    color: #6964ff;
}

.c_bucket {
    color: #3dc4a9;
}

/*
   - 폰트 정리 - 
    lg_title : 2.5rem
    m_title_22 : 2.2rem
    title_2 / m_title_2 : 2rem
    m_title : 1.8rem
    text_2 / p_text_2 : 1.7rem;
    text / p_text : 1.6rem
    text_unit : 1.5rem
    subtext_2 / .subtext_2b: 1.4rem
    subtext / .subtext_b : 1.3rem
    infoText_2 / .infoText_2b : 1.2rem
    infoText : 1.1rem
*/


.lg_title {
    word-break: break-all;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.4;
}

.lg_title_b {
    word-break: break-all;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.4;
}
.lg_title_l {
    word-break: break-all;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.4;
}

.m_title_22b {
    word-break: break-all;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.45;
}

.title_2, .m_title_2, .m_title_22 {
    word-break: break-all;
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
}
.title_2_l {
    word-break: break-all;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.4;
}
.title_2b, .m_title_2b {
    word-break: break-all;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.5;
}
.m_title_2b_l {
    word-break: break-all;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.5;
}

    .m_title {
        word-break: break-all;
        font-size: 1.8rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.5;
    }

.m_title_b {
    word-break: break-all;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.5;
}


.text_2, .p_text_2 {
    word-break: break-all;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.65;
}

.text_2b, .p_text_2b {
    word-break: break-all;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.65;
}

.text, .p_text {
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.65;
}

.text_b, .p_text_b {
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.65;
}
.text_b5 {
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 500;
}

    .text_unit {
        word-break: break-all;
        font-size: 1.55rem;
        font-weight: 400;
        line-height: 1.65;
    }

.text_unit_b {
    word-break: break-all;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.65;
}


.subtext_2b, .infoText_2b {
    word-break: break-all;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.65;
}
.subtext_2m {
    word-break: break-all;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.65;
}

.subtext_2, .infoText_2 {
    word-break: break-all;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.65;
}

    .subtext_2l{
        font-size: 1.4rem;
        letter-spacing:-0.01em;
    }

    .subtext, .infoText {
        word-break: break-all;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.65;
    }
.subtext_m {
    word-break: break-all;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.65;
}

.subtext_b {
    word-break: break-all;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.65;
}

.tit {
    font-size: 2rem;
    font-weight: 600;
    color: #131313;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.tit2 {
    font-size: 2rem;
    font-weight: 600;
}

.tit_l {
    font-size: 2rem;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.txt_b {
    font-size: 1.3rem;
    color: #313131;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.txt {
    font-size: 1.3rem;
    color: #313131;
    letter-spacing: -0.01em;
}

.txt_15 {
    font-size: 1.55rem;
    color: #313131;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.txt_15_b {
    font-size: 1.6rem;
    color: #131313;
    font-weight: 600;
}
.txt_15_b2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.txt_14_b {
    font-size: 1.45rem;
    color: #131313;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.txt_14_m {
    font-size: 1.45rem;
    color: #131313;
    font-weight: 400;
}
.txt_14_m2 {
    font-size: 1.45rem;
    color: #131313;
    font-weight: 500;
}
.txt_11 {
    font-size: 11.5px;
    color: #313131;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.txt_m {
    font-size: 1.3rem;
    color: #313131;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.txt_w {
    font-size: 1.45rem;
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.txt_12 {
    font-size: 1.35rem;
    color: #828282;
    line-height: 1.6;
    margin-bottom: 1.4rem;
    font-weight: 400;
}

/* ----------
    btn 관련 
  ---------- */
.i_close {
    background-image: url(/Images/icon/i_close.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    text-indent: -9999px;
    font-size: 0px;
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}

.i_setting {
    background-image: url(/Images/icon/i_setting.png);
    background-repeat: no-repeat;
    background-size: 19px;
    background-position: center;
    text-indent: -9999px;
    font-size: 0px;
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}

.i_arrow_r {
    background-image: url(/Images/icon/i_arrow_right_gray.png);
    background-repeat: no-repeat;
    background-size: 6px;
    width: 1rem;
    height: 1.8rem;
    background-position: center;
    text-indent: -9999px;
    font-size: 0px;
    cursor: pointer;
}

.i_arrow_r_w {
    background-image: url(/Images/icon/i_arrow_right_w.png);
    background-repeat: no-repeat;
    background-size: 6px;
    width: 1rem;
    height: 1.8rem;
    background-position: center;
    text-indent: -9999px;
    font-size: 0px;
    cursor: pointer;
    padding-top:4.5px;
}

.i_arrow_l {
    background-image: url(/Images/icon/i_arrow_left.png);
    background-repeat: no-repeat;
    background-size: 7px;
    width: 1rem;
    height: 1.8rem;
    background-position: center;
    text-indent: -9999px;
    font-size: 0px;
    cursor: pointer;
}


.cs_search {
    position: relative;
    margin-bottom: 2rem;
}

.cs_search input {
    box-sizing: border-box;
    width: 100%;
    border-radius: 10px;
    height: 4rem;
    text-align: center;
    padding: 0 5rem;
    background:#fff;
}

.cs_search img {
    position: absolute;
    height: 2rem;
    top: 9px;
    right: 16px;
}

.cs_search input::placeholder {
    font-weight: 500;
    font-size: 13px;
}

.cs_q_detail {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background-image: url(/Images/layout/home_banner_bg_red.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
}

.cs_q_detail .txt_wrap .info {
    margin-bottom: 0.3rem;
}

.cs_q_detail .img {
    height: 5.4rem;
    padding-right: 1.5rem;
}

.cs_select {
    display: flex;
}

.cs_select .csc {
    margin-right: 0.5rem;
}

    .cs_select .csc select {
        box-sizing: border-box;
        border: 1px solid #bebebe;
        border-radius: 5px;
        padding: 0.4rem 2rem 0.4rem 1rem;
        cursor: pointer;
        background-image: url(/Images/icon/i_select_arrow.png);
        background-position: 88% 56%;
        background-size: 7px;
        text-align: center;
        min-width: 8rem;
        background-color: #fff;
    }

    .cs_select .csc .cot2 {
        box-sizing: border-box;
        border: 1px solid #bebebe;
        border-radius: 5px;
        padding: 0.4rem 0rem 0.4rem 0.7rem;
        cursor: pointer;
        min-width: 8.5rem;
        text-align: center;
        background: #fff url(/Images/icon/i_distance.png) no-repeat;
        background-size: 15.5px;
        background-position: 10% 55.5%;
        position:relative;
    }

        .cs_select .csc .cot2::after {
            content: "";
            width: 6px;
            height: 12px;
            position: absolute;
            top: 8.5px;
            right: 6px;
            background: url(/Images/icon/i_arrow_right_g.png) no-repeat center/cover;
        }
    .cs_select .co_tag cot {
        box-sizing: border-box;
        border: 1px solid #bebebe;
        border-radius: 5px;
        padding: 0.4rem 2rem 0.4rem 1rem;
        cursor: pointer;
        text-align: center;
        min-width: 8rem;
    }

    .cs_tab {
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        margin-bottom: 3rem;
        overflow: hidden;
    }

.cs_tab .ctab_head {
    box-sizing: border-box;
    display: flex;
    padding-bottom: 1.5rem;
}

.cs_tab .ctab_head .cth {
    width: 50%;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding: 0.8rem 0rem;
    color: #828282;
}

.cs_tab .ctab_head .cth.on {
    color: #5d7cf9;
}

.cs_tab .ctab_head .cth.on:after {
    position: absolute;
    content: '';
    width: 50%;
    height: 3px;
    background-color: #5d7cf9;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.cs_tab .ctab_cont {
    box-sizing: border-box;
    padding: 0.5rem 2rem 2rem;
}

.cs_tab .ctab_cont .table .ta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.cs_tab .ctab_cont .table .ta:last-child {
    margin-bottom: 0;
}

.cs_tab .ctab_cont .table .ta.ta_sub {
    box-sizing: border-box;
    padding-left: 1.5rem;
    margin-bottom: 0;
    flex-direction: column;
}

.cs_tab .ctab_cont .table .ta_sub .tas {
    display: flex;
    justify-content: space-between;
}

.cs_tab .ctab_cont .table .ta_sub .tas:last-child {
    margin-bottom: 2rem;
}

.cs_tab .ctab_cont .ctab_c .map {
    margin: -0.5rem -2rem -2rem;
}

.cs_tab .ctab_cont .ctab_c .map img {
    width: 100%;
    height: auto;
}

    .cs_tab .ctab_cont .ctab_c img.e_Img {
        width: 60px;
        margin-bottom: 10px;
    }

    .cs_tab .ctab_cont .ctab_c .ctab_txt{
        margin-bottom:30px;
        font-size:1.15rem;
    }

    .cs_tab .ctab_cont .ctab_c .ctab_btn {
        padding: 8px 50px;
        color: #fff;
        background: #aeb3ba url(/Images/icon/i_arrow_right_w.png) no-repeat center right 15px/ 6px 12px;
        border-radius: 50px;
        display: block;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        font-size: 1.3rem;
    }


/* --------------------------------------
          common 전체 페이지
-------------------------------------- */
body > form, .pages {
   height:100%;
}
/* iOS only */
@supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
}
.h100vh{
    height:100vh;
}
.p_co {
    box-sizing: border-box;
    padding: 2.5rem;
    padding-bottom: 10rem;
    overflow: auto;
}

.p_co {
    background: #f2f3f5;
}

    .p_co .cs_common {
        padding-top:5px;
        display: flex;
        justify-content: space-between;
        
    }

.p_co .cs_common .cs_logo {
    height: 1.2rem
}

.p_co .cs_common .cs_menu {
    height: 1.4rem;
}
        .p_co .cs_common img {
            vertical-align: inherit;
            padding-top: 1px;
        }
        .p_co .cs_common .cs_menu .bx_alarm{
            display:inline-block;
            position:relative;
        }
        .p_co .cs_common .cs_menu img.alarm {
            width: 15px;
            height: auto;
            margin-top: -1px;
        }
        .p_co .cs_common .cs_menu .bx_alarm .d_new {
            top: -4px;
            right: -7px;
            width: 6px;
            height: 6px;
        }
        .p_co .cs_common .cs_menu img {
            padding: 0 0 0px 8px;
            margin-left: 9px;
        }
.p_home .c_cont .cc_title {
    margin-right: -2.5rem;
    margin-left: -2.5rem;
}

.p_funeral .s_view .cs_common.v2 {
    margin-right: -2.5rem;
    margin-left: -2.5rem;
    margin-top: -2.5rem;
}

.p_co .cs_common.v2 {
    position: relative;
    box-sizing: border-box;
    padding: 2.5rem;
    height: 25rem;
    background-image: url(/Images/layout/layout_ex.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.p_co .cs_common.v2 .cs_arrow {
    height: 2rem;
    cursor: pointer;
}
.p_funeral .cs_common.v2 .cs_arrow {
    width: 17px;
    height: 27px;
}
/* --------------------------------------
                Home.aspx
-------------------------------------- */
.p_home .c_cont .cc_title {
    margin-bottom: 4rem;
    background-image: url(/Images/layout/home_top_bg.png);
    background-size: contain;
    background-position: bottom right;
    margin-top: 1.5rem;
    padding: 8rem 2rem 3rem;
}

.p_home .c_cont .cc_title .tit, .p_home .c_cont .cc_title .tit span {
    letter-spacing: -0.04em;
    display: inline-block;
}

.p_home .c_cont .cc_title .tit_fl {
    font-weight: 300;
    line-height: 1.4;
}

.p_home .c_cont .cc_title .txt_mt {
    margin-top: 1rem;
}

.p_home .c_cont .cc_story .name {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .p_home .c_cont .cc_story .name .text_2b {
        font-weight: 700;
        margin-right: 1rem;
    }

.p_home .c_cont .cc_story .name img {
    height: 2.8rem;
    width:auto;
    margin-right: 1.2rem;
}

    .p_home .c_cont .cc_story .name a img{
        height:1.3rem;
        margin-top:-1.5px
    }

    .p_home .c_cont .cc_story .box_wrap .box {
        box-sizing: border-box;
        background: #fff;
        padding: 1.5rem;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
        margin-bottom:1.5rem;
    }

.p_home .c_cont .cc_story .box_wrap .progress .p_tit {
    text-align: center;
    margin-bottom: 1.5rem;
}
.p_home .c_cont .cc_story .box_wrap .progress .p_box {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    text-align: center;
}
.p_home .c_cont .cc_story .box_wrap .progress .p_box li .p_rel {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    text-align: center;
    background: conic-gradient( rgb(255, 182, 2) var(--angle), #f2f3f5 0 360deg );
}
.p_home .c_cont .cc_story .box_wrap .progress .p_box li:nth-child(2) .p_rel {
    background: conic-gradient( rgb(104, 100, 255) var(--angle), #f2f3f5 0 360deg );
}
.p_home .c_cont .cc_story .box_wrap .progress .p_box li:nth-child(3) .p_rel {
    background: conic-gradient( rgb(61, 196, 169) var(--angle), #f2f3f5 0 360deg );
}
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


        .p_home .c_cont .cc_story .box_wrap .progress .p_box li .p_rel > *{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%)
        }
        .p_home .c_cont .cc_story .box_wrap .progress .p_box li .p_rel span {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            display: block;
            transform: skew(-0.03deg) translate(-50%, -50%);
        }

        .p_home .c_cont .cc_story .box_wrap .progress .p_box li .p_rel p{
            z-index:3;
            width:50px;
        }
        .p_home .c_cont .cc_story .box_wrap .progress .p_box li .p_rel .ani {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            animation: chart;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            z-index:10;
        }
        @keyframes chart {
            0% {
                background: conic-gradient(rgb(202, 210, 221) 0%, rgb(202, 210, 221) 75%, rgb(202, 210, 221) 75%, rgb(202, 210, 221) 100%);
            }
            100% {
                background: conic-gradient(#00000000 0%, #00000000 75%, rgb(202, 210, 221) 75%, rgb(202, 210, 221) 100%);
            }
        }
        .p_home .c_cont .cc_story .box_wrap .bw_wrap {
            display: flex;
            justify-content: space-between;
            gap:15px;
        }

.p_home .c_cont .cc_story .box_wrap .bw_wrap .price {
    margin-right: 1.5rem;
}

.p_home .c_cont .cc_story .box_wrap .progress {
    margin-bottom: 1.5rem;
}
.p_home .c_cont .cc_story .box_wrap .share {
    margin-bottom: 5rem;
}

.p_home .c_cont .cc_story .box_wrap .bw_wrap .bww {
    width: 50%;
}

.p_home .c_cont .cc_story .box_wrap .bo_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p_home .c_cont .cc_story .box_wrap .bo_info {
    margin-top: 0.3rem;
}

.p_home .c_cont .cc_story .box_wrap .bo_img {
    position: absolute;
    right: 14px;
    bottom: 14px;
    height: 2.2rem;
}

.p_home .c_cont .cc_story .box_wrap .bw_wrap .sh_in .box {
    min-height: 8.6rem;
}

.p_home .c_cont .cc_guide .cc_box {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

    .p_home .c_cont .cc_guide .cc_box > div {
        width: 50%;
        border-radius: 10px;
        position: relative;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
        cursor:pointer;
    }

        .p_home .c_cont .cc_guide .cc_box > div .imgBox {
            height: 85px;
            background: #4260d0;
            position: relative;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

            .p_home .c_cont .cc_guide .cc_box > div .imgBox img {
                position: absolute;
                top: 53%;
                left: 50%;
                transform: translate(-50%,-50%);
            }

        .p_home .c_cont .cc_guide .cc_box > div .txtBox {
            padding: 16px;
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

.p_home .c_cont .cc_facility .cs_emergency .img {
    background: #fff;
}

 .c_cont .co_tit {
    margin-bottom: 2rem;
}

.cc_facility .box {
    background: #fff;
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.cc_facility .ban_icon {
    height: 4.8rem;
}

.cc_facility .ban_info {
    margin-top: 0.3rem;
}

.p_home .c_cont .cc_issue .box {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    cursor:pointer;
}

.p_home .c_cont .cc_issue .box:last-child {
    margin-bottom: 0;
}

.p_home .c_cont .cc_issue .box .bo_img {
    /*background: #fff;*/
    width: 10rem;
    min-width: 10rem;
    height: 10rem;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 1.5rem;
    text-align:center;
}

.p_home .c_cont .cc_issue .box .bo_img img {
    width: 100%;
}
    .p_home .c_cont .cc_issue .box .bo_txt{
        width:100%;
    }

    .p_home .c_cont .cc_issue .box .bo_txt .info {
        margin-bottom: 0.5rem;
    }

.p_home .c_cont .cc_issue .box .bo_txt .tit {
    line-height: 1.4;
}

.p_home .c_cont .cc_issue .btn_all a {
    background: #fff;
    display: block;
    border-radius: 10px;
    text-align: center;
    padding: 1rem 0;
    margin: 3rem 0 0;
    box-shadow: 1.5px 2px 4px 0px rgb(0 0 0 / 15%);
    position:relative
}
    .p_home .c_cont .cc_issue .btn_all a img {
        width: 6px;
        height: 12px;
        transform: rotate(90deg);
        padding-right: 20px;
        position:absolute;
        top:60%;
        right:20px;
    }

    .p_home .c_cont .cc_facility {
        margin-bottom: 2rem;
    }

.p_home .c_cont .cc_issue{
    margin-bottom:5rem;
}

.p_home .cc_question .banner {
    height: 16rem;
    margin-bottom: 3rem;
    overflow:hidden;
}

.p_home .cc_question .banner .swiper {
    width: 100%;
    height: 100%;
}

.p_home .cc_question .banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 145px;
    border-radius: 10px;
    overflow: hidden;
    background-image: url(/Images/layout/home_banner_bg_blue.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1.5rem;
    cursor: pointer;
}

    .p_home .cc_question .banner .swiper-slide.ss_2 {
        background-image: url(/Images/layout/home_banner_bg_green.png);
    }

    .p_home .cc_question .banner .swiper-slide.ss_3 {
        background-image: url(/Images/layout/home_banner_bg_yellow.png);
    }

.p_home .cc_question .banner .sws_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.p_home .cc_question .banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p_home .cc_question .banner .ss_1 {
    color: #d4ddff;
}

    .p_home .cc_question .banner .ss_2 {
        color: #b4fff0;
    }

    .p_home .cc_question .banner .ss_3 {
        color: #774c08;
    }

.p_home .cc_question .banner .ss_1 .sws_tit, .p_home .cc_question .banner .ss_2 .sws_tit {
    color: #fff;
}

.p_home .cc_question .banner .ss_3 .sws_tit {
    color: #000;
}

.p_home .cc_question .banner .sws_tit {
    text-align: left;
}

.p_home .cc_question .banner .sws_tag {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.p_home .first_pup {
    height: 80px;
    bottom: -100px;
    top: auto;
    margin: 0 auto;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.75);
    position: fixed;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc( 100% - 50px );
    max-width: 670px;
    z-index: 9999;
    transition: bottom 0.3s;
}
    .p_home .first_pup.on {
        bottom: 80px;
    }
    .p_home .first_pup > div {
        bottom: -100px;
    }
    .p_home .first_pup.on > div {
        bottom: 0;
    }
.p_home .main_pup {
    height: 0;
    bottom: 0;
    top: auto;
}
.p_co .cs_common img.i_pop {
    width: 120px;
    height: auto;
}
.popup_b.main_pup > div {
    padding: 40px 25px 25px;
}

.p_home .main_pup.on {
    width: 100%;
    height: 100%;
    z-index: 10001;
    bottom: 0;
}
.p_home .main_pup > div {
    bottom: -205px;
}
    .p_home .main_pup.on>div {
        bottom: 0;
    }
    .p_home .main_pup a{
        display:block;
    }

        .p_home .main_pup a img {
            margin: -2.5px 0 0 1rem;
            width: 9px;
            height: 15px;
            vertical-align: middle; 
        }

/* 매거진 팝업 */
.mg_popup.on {
    width: 100%;
    height: 100%;
    visibility: visible;
}
.mg_popup {
    width: 0%;
    height: 0%;
    background: #fff;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 50%;
    max-width: 720px;
    transform: translateX(-50%);
    visibility: hidden;
}
    .mg_popup .topBox {
        padding: 2rem 2.5rem 2.5rem;
        box-sizing: border-box;
    }
    .mg_popup .topBox img.back {
        width: 13px;
        height: 18.5px;
        padding-right:20px;
        cursor:pointer;
    }
    .mg_popup .contBox {
        background: #eee;
        height: calc(100% - 126px);
        height: calc((100% - 126px) - env(safe-area-inset-bottom));
        height: calc((100% - 126px) - constant(safe-area-inset-bottom));
        width: 100%;
    }
.p_home .c_new {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 20px;
    height: auto;
    display:none;
}
    .p_home .c_new.on{
        display:block;
    }
.p_home .d_new {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 8px;
    height: 8px;
    display: none;
    background: #ffb602;
    border-radius: 50%;
}

    .p_home .d_new.on {
        display: block;
    }
    /* --------------------------------------
             home_매거진/ F & Q
-------------------------------------- */
    .magazine .titBox.cs_common img {
        width: 25px;
        height: 42.5px;
    }
.magazine .topBox img.back {
    width: 13px;
    height: 18.5px;
    padding-right:20px;
    cursor:pointer;
}

.magazine .titBox .df_start {
    display: flex;
    justify-content: start;
}

.magazine .titBox .ic_q {
    width: 16px;
    height: 17px;
    filter: brightness(0.4);
    margin: 3.5px 16px 0 0;
}

.magazine .titBox .ct_txt {
    padding: 6px 11px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #c6c9d2;
    width: fit-content;
    margin-left: 31px;
}

.magazine .boxList li {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    padding: 20px 24px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}


    .magazine .boxList li::before {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000040;
        position: absolute;
        z-index: -1;
    }

    .magazine .boxList li img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height:auto;
        z-index: -2;
    }

    .magazine .boxList li .bottom_txt {
        padding: 4px 14px 6px;
        box-sizing: border-box;
        background: #00000090;
        border-radius: 50px;
        width: fit-content;
        position: absolute;
        bottom: 22px;
        left: 25px;
    }

.magazine .inputBox, .magazine .inputBox input {
    height: 40px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    position: relative;
}

    .magazine .inputBox input::placeholder {
        font-size: 12px;
    }

    .magazine .inputBox p {
        position: absolute;
        top: 5px;
        right: 17px;
    }

        .magazine .inputBox p img {
            width: 20px;
            height: 19px;
        }

.magazine .section_w {
    padding: 24px 0;
    border-top: 1px solid #e1e4e9;
}

    .magazine .section_w .flex_cate {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
    }

        .magazine .section_w .flex_cate li {
            padding: 6px 11px;
            box-sizing: border-box;
            border-radius: 6px;
            background: #fff;
            border: 1px solid #c6c9d2;
            margin-right: 5.5px;
            margin-bottom: 8px;
        }

            .magazine .section_w .flex_cate li.current {
                background: #ffcc02;
                color: #313131;
            }

    .magazine .section_w.tab-content {
        display: none;
    }

        .magazine .section_w.tab-content.current {
            display: inherit;
        }

    .magazine .section_w .q_list li {
        padding-left: 25px;
        position: relative;
    }

    .magazine .section_w .dot_list li {
        padding-left: 20px;
        position: relative;
    }

    .magazine .section_w .q_list li::before {
        content: "";
        position: absolute;
        top: 4.7px;
        left: 0;
        width: 12px;
        height: 13px;
        background: url(/Images/icon/i_question.png) no-repeat center/cover;
    }

    .magazine .section_w .dot_list li::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 2px;
        width: 4px;
        height: 4px;
        background: #828282;
        border-radius: 50%;
    }
/* --------------------------------------
             home_작성가이드
-------------------------------------- */
.wt_guide .tab_wrap {
    display: flex;
    width: 100%;
    height: 50px;
    margin-bottom:40px;
}
    .wt_guide .tab_wrap div {
        width: 50%;
        color: #A4A7AE;
        text-align: center;
        border-bottom: 2px solid #C6C9D2;
        padding: 10px 0;
        box-sizing: border-box;
    }
        .wt_guide .tab_wrap div.on {
            color: #000000;
            border-bottom: 2px solid #FFCC02;
        }
.wt_guide .tab_1_cont,
.wt_guide .tab_2_cont {
    display: none;
}
    .wt_guide .tab_1_cont.on,
    .wt_guide .tab_2_cont.on {
        display: block;
        margin-bottom:100px;
    }
.wt_guide .tab_1_cont .stepBox {
    padding-top: 60px;
    box-sizing: border-box;
}
    .wt_guide .tab_1_cont .stepBox:first-child{
        padding-top:0;
    }
    .wt_guide .tab_1_cont .stepBox img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        overflow: hidden;
    }
.wt_guide .wt_wrap .wt_tit .imgbox {
    width: 30px;
    margin-right: 7px;
}
.wt_guide .wt_wrap .wt_tit .imgbox img {
    width: 32px;
    height: auto;
}
.wt_guide .wt_wrap .wt_tit {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
    align-items: center;
}
.wt_guide .wt_wrap ul {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    padding: 3px 20px 4px;
    box-sizing: border-box;
}
    .wt_guide .wt_wrap ul li {
        padding: 12px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .wt_guide .wt_wrap ul li:last-child {
            border-bottom:none;
        }
        .wt_guide .wt_wrap ul li img {
            width: 8px;
            height: auto;
        }
        /* --------------------------------------
              p_funeral
-------------------------------------- */
        .p_funeral .s_list .c_cont {
            padding-top: 4rem;
        }

.p_funeral .s_view .c_cont {
    padding-top: 2.5rem;
}

.p_funeral .co_tit {
    margin-bottom: 2rem;
}

.p_funeral .cc_option .cs_search {
    margin-bottom: 1.5rem;
}


.p_funeral .cc_list_box .li_box:first-child {
    margin-top: 3rem;
}

.p_funeral .cc_list_box .li_box {
    margin-top: 4rem;
}

.p_funeral .cc_list_box .li_box .txt_wrap {
    margin-bottom: 1.5rem;
}


.p_funeral .cc_list_box .li_box .txt_wrap .info {
    margin-bottom: 0.5rem;
}

.p_funeral .cc_list_box .li_box .txt_wrap .location {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
}

.p_funeral .cc_list_box .li_box .txt_wrap .location .tit {
    display: flex;
    align-items: center;
}

.p_funeral .cc_list_box .li_box .txt_wrap .location .tit img {
    height: 2rem;
    margin-left: 1rem;
    margin-top:3px;
}

.p_funeral .co_tag {
    display: flex;
    align-items: center;
}

    .p_funeral .co_tag .cot {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 3px;
        padding: 0.3rem 0.9rem ;
        margin-left: 0.5rem;
        text-align:center;
    }

    .p_funeral .co_tag .cot.ic {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #fff url(/Images/icon/i_distance.png) no-repeat;
        background-size: 15.5px;
        background-position: 14% 55%;
        border-radius: 3px;
        padding: 0.3rem 0.6rem 0.3rem 2rem;
        margin-left: 0.5rem;
        text-align: right;
    }

.p_funeral .co_tag .cot:first-child {
    margin-left: 0;
}

.p_funeral .co_tag .cot img {
    height: 1.6rem;
}


    .p_funeral .cc_list_box .li_box .box_wrap {
        position: relative;
    }


        .p_funeral .cc_list_box .li_box .box_wrap .bwrap {
            border-radius: 10px;
            background: #fff;
            overflow: hidden;
            margin-bottom:2.5rem
        }

.p_funeral .cc_list_box .li_box .box_wrap .b_img {
    height: 20rem;
    position: relative;
    background-image: url(/Images/layout/layout_ex.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_img .tag {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #fff;
    background: #5d7cf9;
    box-sizing: border-box;
    padding: 0.3rem 1.5rem;
    border-radius: 23px;
}

.p_funeral .tag_love {
    position: absolute;
    top: 17px;
    right: 15px;
    width: 2.8rem;
    height: 2.4rem;
    background-image: url(/Images/icon/i_love2_on.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.p_funeral .tag_love.on {
    background-image: url(/Images/icon/i_love2.png);
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt {
    box-sizing: border-box;
    padding: 1.5rem;
    cursor: pointer;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt .b_tit {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt .location {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt .location img {
    height: 2.2rem;
    margin-right: 0.5rem;
}

.p_funeral .highlight {
    font-weight: 500;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt .price .pr {
    display: flex;
}

.p_funeral .cc_list_box .li_box .box_wrap .b_txt .price .prb {
    background: #f2f3f5;
    box-sizing: border-box;
    padding: 0.3rem 1rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.p_funeral .cc_list_box .li_box .box_map {
    width: fit-content;
    position: fixed;
    bottom: 70px;
    bottom: calc(70px + constant(safe-area-inset-bottom) );
    bottom: calc(70px + env(safe-area-inset-bottom) );
    left: 50%;
    transform: translateX(-50%);
}

    .p_funeral .cc_list_box .li_box .box_map .btxt_wrap {
        display: flex;
        color: #fff;
        background: #5d7cf9;
        box-sizing: border-box;
        padding: 0.3rem 1.3rem;
        border-radius: 23px;
        align-items: center;
        cursor: pointer;
        width: 73px;
    }

.p_funeral .cc_list_box .li_box .box_map .btxt_wrap img {
    height: 1.4rem;
    margin-right: 0.5rem;
}

@keyframes alarm{
    0% {
        width: 100%;
        opacity: 1;

    }
    100% {
        width: 100%;
        opacity: 0;
    }
}
.p_funeral .cc_list_box .li_box .b_alarm.on {
    width: 0%;
    opacity: 0;
    animation: alarm;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    position: fixed;
    bottom: 110px;
    width: 100%;
    color: #fff;
    left: 50%;
    transform: translate(-50%, 0);
}

    .p_funeral .cc_list_box .li_box .b_alarm.on .ball {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.7);
        box-sizing: border-box;
        padding: 0.5rem 4rem;
        border-radius: 15px;
    }
    .p_funeral .cc_list_box .li_box .b_alarm {
        position: fixed;
        bottom: 110px;
        width: 0%;
        color: #fff;
        left: 50%;
        opacity: 0;
        transform: translate(-50%, 0);
    }

.p_funeral .cc_list_box .li_box .b_alarm .bal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p_funeral .cc_list_box .li_box .b_alarm .ball {
    /*display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    box-sizing: border-box;
    padding: 0.5rem 4rem;
    border-radius: 15px;*/
    display:none;
}



.p_funeral .cc_list_box .li_box .b_alarm img {
    height: 1.4rem;
    margin-right: 0.5rem;
}

.p_funeral .s_view .cs_common.v2 .tag_love {
    top: 27px;
    right: 25px;
}

.p_funeral .s_view .cc_info {
    margin-bottom: 3rem;
}

.p_funeral .s_view .cc_info .co_tag {
    margin-bottom: 1rem;
}
    .p_funeral .s_view .cc_info .df_sb {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
        .p_funeral .s_view .cc_info .df_sb img {
            width: 30px;
            height: auto;
        }
        .p_funeral .s_view .cc_info .txt_wrap .t_tit {
            margin-bottom: 1rem;
        }

.p_funeral .s_view .cc_info .txt_wrap .t_info .tin {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.p_funeral .s_view .cc_info .txt_wrap .t_info .tin:last-child {
    margin-bottom: 0;
}


.p_funeral .s_view .cc_info .txt_wrap .t_info img {
    height: 1.3rem;
    margin-right: 0.7rem;
}

.p_funeral .s_view .cc_info .txt_wrap .t_info .location img {
    height: 1.3rem;
    padding-left:2.5px;
    padding-right:1.5px;
}

    .p_funeral .s_view .cc_info .txt_wrap .t_info .phone img, .p_funeral .s_view .cc_info .txt_wrap .t_info .space img, .p_funeral .s_view .cc_info .txt_wrap .t_info .space2 img {
        padding-left: 3px;
    }
        .p_funeral .s_view .cc_info .txt_wrap .t_info .space img{
            padding-right:0.1rem;
        }

        .p_funeral .s_view .cc_info .txt_wrap .t_info .car img {
            width: 14px;
            height: 11px;
            margin: 0 0.6rem 0 0.1rem;
        }

    .p_funeral .s_view .cc_info .txt_wrap .t_info .space3 img {
        width: 16px;
        height: 7px;
        margin-right:0.5rem;
    }

.p_funeral .s_view .cc_info .txt_wrap .t_info .space .txt {
    display: flex;
    align-items: center;
}

.p_funeral .s_view .cc_info .txt_wrap .t_info .space .txt p:first-child {
    margin-right: 1rem;
}

.p_funeral .s_view .cc_more .more_info {
    text-align: center;
    margin-bottom: 3rem;
}

.p_funeral .s_view .cc_more .cs_q_detail {
    background-image: url(/Images/layout/layout_banner_bg_blue.png);
}

.p_funeral .s_view .cc_more .cs_q_detail .info {
    color: #ffe6df;
}

.p_funeral .cs_q_popup .popup_top .popup_input div:focus-within {
    border-color: #5d7cf9;
}

.p_funeral .cs_q_popup .popup_top .popup_input input.date:focus-within {
    border-color: #5d7cf9;
}

.p_funeral .cs_q_popup .popup_top .popup_input div select {
    color: #5d7cf9;
}

.p_funeral .cs_q_popup .popup_top .popup_input input.date {
    color: #5d7cf9;
}

.s_map {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 50%;
    max-width: 720px;
    transform: translateX(-50%);
    overflow: hidden;
}

.s_map .topBox {
    position: absolute;
    top: 0rem;
    top: calc(constant(safe-area-inset-top) );
    top: calc(env(safe-area-inset-top) );
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 100%;
    padding: 2.5rem 2.5rem 2rem;
    background: #fff;
    height: fit-content;
    max-width: 720px;
    z-index: 1;
    border-bottom:1px solid #c6c9d2;
}

.s_map .topBox img.back {
    width: 13px;
    height: 18.5px;
}

.s_map .mapBox {
    height: calc( 100% - 113.5px - calc(constant(safe-area-inset-top)));
    height: calc( 100% - 113.5px - calc(env(safe-area-inset-top)));
    width: 100%;
    margin-top: 113.5px;
    margin-top: calc( 113.5px + calc(constant(safe-area-inset-top)));
    margin-top: calc( 113.5px + calc(env(safe-area-inset-top)));
}
        .s_map .mapBox>*{
            position:absolute;
        }
        .s_map .mapBox .my_l {
            bottom: 9.5rem;
            left: 2rem;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: url(/Images/icon/icon_floc.png);
            z-index: 10;
        }
        .s_map .mapBox .s_pop {
            margin: 1.5rem 1rem;
            width: calc(100% - 2rem);
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px #00000040;
            left: 0;
            bottom: 60px;
            padding: 2rem;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 10;
        }
            .s_map .mapBox .s_pop .top{
                display:flex;
                justify-content:space-between;
            }
                .s_map .mapBox .s_pop .top img{
                    height:1.5rem;
                    margin-top:3px;
                }
                .s_map .mapBox .s_pop .location {
                    display: flex;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                .s_map .mapBox .s_pop .location img {
                    height: 2.2rem;
                    margin-right: 0.5rem;
                }
            .s_map .mapBox .s_pop .box_txt {
                background: #f2f3f5;
                box-sizing: border-box;
                padding: 0.3rem 1rem;
                margin-bottom: 0.5rem;
                display: block;
                width:fit-content;
            }
            
            
            
/* --------------------------------------
              p_Burialground
-------------------------------------- */
            .cs_q_popup {
                width: 0%;
                height: 0%;
                display: none;
            }

                .cs_q_popup.on {
                    display: block;
                    width: 100vw;
                    height: 100vh;
                    position: fixed;
                    z-index: 10000;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    min-height: 81%;
                    max-width: 720px;
                    background: #00000040;
                    overflow-y: scroll;
                }
                .cs_q_popup > div {
                    margin-bottom: 150px;
                }
                .cs_q_popup .popup_top {
                    width: calc(100% - 5rem);
                    padding: 15px 19px 42px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    margin: 6rem 2.5rem 10px;
                    background: #fff;
                }
        .cs_q_popup .popup_top .close {
            margin: 0 0 0 auto;
            width:fit-content;
        }
            .cs_q_popup .popup_top .close img {
                width: 16.5px;
                height: 16.5px;
                padding: 5px 0 5px 10px;
            }

        .cs_q_popup .popup_top .tit {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 22px;
            letter-spacing: -0.5px;
        }

        .cs_q_popup .popup_top .popup_input {
            width: 100%;
        }

            .cs_q_popup .popup_top .popup_input textarea {
                width: 100%;
                border-radius: 5px;
                border: 1px solid #c6c9d2;
                padding: 12px 12px;
                box-sizing: border-box;
                font-size: 1.4rem;
                font-weight: 400;
            }
                .cs_q_popup .popup_top .popup_input textarea:focus {
                    border-color: #ffce00;
                    outline: none;
                }
            .cs_q_popup .popup_top .popup_input input {
                margin-bottom: 13px;
                width: 100%;
                border-radius: 5px;
                border: 1px solid #c6c9d2;
                padding: 12px 12px;
                box-sizing: border-box;
                font-size: 1.4rem;
                font-weight: 400;
                height: 46px;
                position: relative;
                padding-left: 36%;
                background: none;
            }
                .cs_q_popup .popup_top .popup_input input.date {
                    margin-top: 0 !important;
                    color: #fc8e00;
                    text-align: left;
                }
            .cs_q_popup .popup_top .popup_input input::-webkit-date-and-time-value {
                text-align: left;
            }
                    .cs_q_popup .popup_top .popup_input input.date:before {
                        content: "날짜";
                        position: absolute;
                        top: 13px;
                        left: 12px;
                        color: #a9a9a9;
                    }
            .cs_q_popup .popup_top .popup_input .pos_r{
                position:relative;
            }
            .cs_q_popup .popup_top .popup_input p.tel {
                position: absolute;
                top: 13px;
                left: 12px;
                color: #a9a9a9;
                font-size: 1.4rem;
                font-weight: 400;
            }
            .cs_q_popup .popup_top .popup_input p.name {
                position: absolute;
                top: 13px;
                left: 12px;
                color: #a9a9a9;
                font-size: 1.4rem;
                font-weight: 400;
            }
            .cs_q_popup .popup_top .popup_input input.fo{
                padding-left:12px;
            }
                .cs_q_popup .popup_top .popup_input input.fo:focus {
                    border-color: #ffce00;
                    outline: none;
                }
                .cs_q_popup .popup_top .popup_input input.date:focus-within {
                    border-color: #5d7cf9;
                    outline: none;
                }

            .cs_q_popup .popup_top .popup_input div:not(.pos_r) {
                margin-bottom: 13px;
                width: 100%;
                border-radius: 5px;
                border: 1px solid #c6c9d2;
                padding: 2px 12px;
                box-sizing: border-box;
                font-size: 1.4rem;
                font-weight: 400;
                color: #9a9fa8;
                line-height: 40px;
                height: 45px;
            }
                    .cs_q_popup .popup_top .popup_input div:focus-within {
                        border-color: #ffce00;
                    }
                    .cs_q_popup .popup_top .popup_input input.date:focus-within {
                        border-color: #ffce00;
                    }
::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0px;
    top: 13px;
    transform: translateX(-10px);
    padding-left: 3000px;
    height: 100%;
}
.cs_q_popup .popup_top .popup_input div select {
    width: 79%;
    margin: 0 0 0 auto;
    height: 100%;
    float: right;
    padding-left: 15%;
    box-sizing: border-box;
    border: none;
    background: none;
    color: #fc8e00;
    font-size: 14px;
}
                    .cs_q_popup .popup_top .popup_input div .calen {
                        float: right;
                        width: auto;
                        height: 14.5px;
                        padding: 13px 7px;
                    }
                    .cs_q_popup .popup_top .popup_input .subtxt {
                        color: #9a9fa8;
                        font-size: 1.3rem;
                        font-weight: 300;
                    }

.cs_q_popup .popup_top .popup_btn {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 47px;
    color: #311d0c;
    background: #ffcd09;
    border-radius: 5px;
    margin-top: 23px;
    font-weight: 400;
}

    .cs_q_popup .popup_bot {
        padding: 18px 25px;
        box-sizing: border-box;
        border-radius: 10px;
        background: #fff url(/Images/icon/i_arrow_right_gray.png) no-repeat center right 25px /7.5px 14px;
        width: calc(100% - 5rem);
        margin: 0 2.5rem;
        display: flex;
        justify-content: flex-start;
    }

        .cs_q_popup .popup_bot img{
            width:37.5px;
            height:35px;
        }
        .cs_q_popup .popup_bot .p_b_flex {
            display: flex;
            flex-direction: column;
            padding-left: 26px;
        }

            .cs_q_popup .popup_bot .p_b_flex p:first-child {
                font-size: 1.5rem;
                font-weight: 500;
                color: #313131;
            }

            .cs_q_popup .popup_bot .p_b_flex p {
                font-size: 1.15rem;
                color: #9a9fa8;
                font-weight:300;
            }
/*---------------------------------------------------------------------------------
                                  popupBox
----------------------------------------------------------------------------------*/
body::after {
    width: 100vw;
    height: 100vh;
    content: "";
    position: absolute;
    background: #00000040;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}

.popup_b {
    background: #00000040;
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 10000;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 720px;
    width: 100%;
    height:100%;
}

.popup_b>div{
    background: #fff;
    border-radius: 25px 25px 0 0;
    position: fixed;
    left: 0%;
    bottom: 0;
    padding: 25px;
    box-sizing: border-box;
    transition: bottom 0.4s;
    width:100%;
}

    .popup_b.on {
        bottom: 60px;
    }



.popup_b .close {
    width: 16.5px;
    height: 16.5px;
    cursor: pointer;
    float: right;
}
.popup {

}

.popup_c {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000040;
    z-index: 52;
}
    .popup_c > div {
        background: #fff;
        border-radius: 15px;
        position: fixed;
        left: 50%;
        top: 35%;
        padding: 28px 22px 20px;
        box-sizing: border-box;
        transition: bottom 0.4s;
        z-index: 10000;
        text-align: center;
        width: calc(100% - 5rem);
        transform: translateX(-50%);
        max-width: 670px;
    }
    .popup_c .bottom_btn {
        text-align: center;
        line-height: 40px;
        height: 40px;
        border-radius: 6px;
        width: 100%;
    }
    .popup_c .select_flex li {
        width: 48%;
        background: #ffcd09;
        padding: 9px 0px;
        border-radius: 4px;
        color: #311d0c;
    }
    .popup_c .text_2{
        cursor:pointer;
    }

    .popup_c2 {
        background: #00000040;
        position: fixed;
        left: 50%;
        top: 0%;
        transform: translateX(-50%);
        z-index: 10000;
        width: 100%;
        height: 100%;
    }

    .popup_c2 > div {
        border-radius: 15px;
        padding: 28px 22px 20px;
        box-sizing: border-box;
        background: #fff;
        position: fixed;
        left: 50%;
        top: 35%;
        width: calc( 100% - 5rem);
        margin: 0 auto;
        transform: translateX(-50%);
        max-width: 670px;
        text-align: center;
    }

    .popup_c2 .bottom_btn {
        text-align: center;
        line-height: 50px;
        height: 50px;
        border-radius: 6px;
        width: 100%;
    }

.popup_c3{
    background: #00000040;
    position: fixed;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 100%;
    height: 100%;
}

    .popup_c3 > div {
        border-radius: 15px;
        padding: 20px 22px 20px;
        box-sizing: border-box;
        background: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        width: calc( 100% - 5rem);
        margin: 0 auto;
        transform: translate(-50%, -50%);
        max-width: 670px;
        text-align: center;
    }
.popup_c4 > div {
    width: calc(100% - 5rem);
    padding: 20px 22px 20px;
    max-width:260px;
}
    .popup_c4 > div .p_top{
        text-align:center;
    }
        .popup_c4 > div .p_top img {
            width: 16.5px;
            height: 16.5px;
            padding: 0px 0 5px 10px;
            float: right;
            margin-top: -23px;
        }
    .popup_c4 > div .share_l {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .popup_c4 > div .share_l li{
            width:28%;
            gap:8%
        }
        .popup_c4 > div .share_l li img {
            width: 90%;
            height: auto;
            margin-bottom:5px;
        }
        /*---------------------------------------------------------------------------------
                                  index-회원가입,튜토리얼
----------------------------------------------------------------------------------*/
        .page_login_member {
            height: 100vh;
            max-width: 720px;
        }
.page_login_member .s_tutorial .b_tutorial {
    height: 100%;
    width: 100%;
    position:relative;
}
    .page_login_member .s_tutorial .b_tutorial .swiper_tutorial {
        position: relative;
        height: 100%;
        width: 100%;
    }
        .page_login_member .swiper {
    width: 100%;
    height: 100%;
}
    .page_login_member .step, .page_est_box .step, .page_login_member .step {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .page_login_member .s_tutorial .swiper-container-horizontal > .swiper-pagination-bullets, .page_login_member .s_tutorial .swiper-pagination-custom, .page_login_member .s_tutorial .swiper-pagination-fraction {
        top: 40px;
    }
 .page_preference .s_space_detail .c_wrap {
    padding-bottom: 7rem;
}

.page_login_member .swiper-slide {
    background: #fff;
    height:100vh;
    z-index:0;
    /* Center slide text vertically */

}

    .page_login_member .swiper-slide .titBox {
        width: 100%;
        height: fit-content;
        margin: 90px 0 0 2.5rem;
    }
    .page_login_member .swiper-slide .imgBox{
        position:relative;
        height:100%;
        overflow:hidden;
    }
    .page_login_member .swiper-slide .imgBox img {
        display: block;
        position: absolute;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
    }
        .page_login_member .swiper-slide .imgBox.s1 img:nth-child(1) {
            width: 90%;
            height: auto;
            right: 0;
            bottom: 23%;
            max-width: 320px;
        }
        .page_login_member .swiper-slide .imgBox.s1 img:nth-child(2) {
            width: 25%;
            height: auto;
            left: 24%;
            bottom: calc(47% + 270px);
            animation-name: s1i2;
            animation-duration: 1.4s;
            max-width: 90px;
        }
        .page_login_member .swiper-slide .imgBox.s1 img:nth-child(3) {
            width: 20%;
            height: auto;
            right: 35px;
            top: 40%;
            animation-name: s1i3;
            animation-duration: 1.7s;
        }
        .page_login_member .swiper-slide .imgBox.s1 img:nth-child(4) {
            width: 26%;
            height: auto;
            left: 45px;
            top: 45%;
            animation-name: s1i4;
            animation-duration: 1.3s;
            animation-timing-function: ease-in-out;
        }
        @keyframes s1i2{
            0% {
                bottom: calc(47% + 270px);
            }
            50% {
                bottom: calc(46% + 270px);
            }
            100% {
                bottom: calc(47% + 270px);
            }
        }

@keyframes s1i3 {
    0% {
        top: 40%;
    }

    25% {
        top: 43%;
        right:26px;
        transform:rotate(20deg);
    }
    50% {
        top: 40%;
        right: 18px;
        transform: rotate(40deg);
    }
    75% {
        top: 43%;
        right: 26px;
        transform: rotate(20deg);
    }

    100% {
        top: 40%;
    }
}
@keyframes s1i4 {
    0% {
        left: 45px;
        top: 45%;
    }

    50% {
        width: 29%;
        left: 50px;
        top: 43%;
        transform:rotate(-5deg);
    }

    100% {
        left: 45px;
        top: 45%;
    }
}

.page_login_member .swiper-slide .imgBox.s2 img:nth-child(1) {
    width: 64%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 41%;
    max-width: 234px;
}
.page_login_member .swiper-slide .imgBox.s2 img:nth-child(2) {
    width: 46%;
    height: auto;
    right: 0%;
    bottom: 41%;
    max-width: 160px;
}
.page_login_member .swiper-slide .imgBox.s2 img:nth-child(3) {
    width: 27%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40%;
    max-width: 100px;
}

.page_login_member .swiper-slide .imgBox.s2 ul {
    width: 85%;
    position: absolute;
    left: 47%;
    bottom: calc( 60% - 150px);
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: flex-start;
    max-width: 354px;
    max-height: 439px;
}
    .page_login_member .swiper-slide .imgBox.s2 ul li {
        border-radius: 25px;
        border: 1px solid #e6e9f2;
        background: #fff;
        padding: 4px 5%;
        box-sizing: border-box;
        width: fit-content;
        margin-bottom: 5.8%;

    }
.page_login_member .swiper-slide.swiper-slide-active .imgBox.s2 ul li {
    animation-name: s2li;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    opacity: 0;
}
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(1) {
            position: absolute;
            right: 0;
            top: -14.9%;
            background: #fec72e;
            animation-delay: 0.9s;
        }

        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(2) {
            position: absolute;
            top: -25%;
            left: 40%;
            animation-delay: 0.8s;
        }

        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(3) {
            position: absolute;
            left: 28px;
            top: -14.9%;
            animation-delay: 0.7s
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(4) {
            animation-delay: 0.6s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(5) {
            animation-delay: 0.5s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(6) {
            animation-delay: 0.4s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(7) {
            animation-delay: 0.3s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(8) {
            background: #313131;
            color: #fff;
            animation-delay: 0.2s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:nth-child(9) {
            animation-delay: 0.1s;
        }
        .page_login_member .swiper-slide .imgBox.s2 ul li:last-child {
            background: #f0f1f5;
            animation-delay: 
            
        }
        @keyframes s2li{
            0%{opacity:0}
            50%{opacity:0.3}
            100%{opacity:1}
        }
.page_login_member .swiper-slide .imgBox.s3:before {
    width: 200px;
    height: 200px;
    background: #4260d0;
    content: "";
    left: -21%;
    top: 7%;
    position: absolute;
    border-radius: 50%;
}
.page_login_member .swiper-slide .imgBox.s3::after {
    width: 150px;
    height: 150px;
    background: #f4f5f9;
    content: "";
    left: 13.5%;
    top: 1.5%;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}
.page_login_member .swiper-slide .imgBox.s3 ul {
    position: absolute;
    width: 390px;
    height: 100%;
    left: 50%;
    top: 1%;
    transform: translateX(-50%) scale(88%);
}
.page_login_member .swiper-slide.swiper-slide-active .imgBox.s3 ul li {
    width: 285px;
    height: fit-content;
    position: absolute;
    animation-name: s3li;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}
        .page_login_member .swiper-slide .imgBox.s3 ul li img{
            width:100%;
            height:auto;
        }

        .page_login_member .swiper-slide .imgBox.s3 li:nth-child(1) {
            left: 34px;
        }
.page_login_member .swiper-slide .imgBox.s3 li:nth-child(2) {
    left: 240px;
    top: 0%;
    animation-delay: 0.1s;
}

.page_login_member .swiper-slide .imgBox.s3 li:nth-child(3) {
    left: -85px;
    top: 155px;
    animation-delay: 0.2s;
}

.page_login_member .swiper-slide .imgBox.s3 li:nth-child(4) {
    left: 200px;
    top: 285px;
    animation-delay: 0.3s;
}


    @keyframes s3li {
        0% {
        opacity:0;
        transform:translate(60px ,70px);
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0px,0px);
    }
}
.page_login_member .swiper-slide .imgBox.s4:before {
    width: 200px;
    height: 200px;
    background: #fec72e;
    content: "";
    right: -21%;
    top: 1.5%;
    position: absolute;
    border-radius: 50%;
}

.page_login_member .swiper-slide .imgBox.s4::after {
    width: 150px;
    height: 150px;
    background: #f4f5f9;
    content: "";
    right: 13.5%;
    top: 7%;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}
.page_login_member .swiper-slide .imgBox.s4 .scrollBox {
    width: 75%;
    height: 49%;
    border-radius: 15px 15px 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 41%;
    box-shadow: 1px 0 7px #00000020;
}

    .page_login_member .swiper-slide .imgBox.s4 .scrollBox:before {
        content: "";
        width: 119%;
        height: 70px;
        background: linear-gradient(to top,#fff 10%,#ffffff40 60%,#ffffff00);
        z-index: 10;
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    .page_login_member .swiper-slide .imgBox.s4 .scrollBox div {
        overflow: hidden;
        width: 100%;
        height: 100%;
        border-radius: 15px 15px 0 0;
    }
    .page_login_member .swiper-slide .imgBox.s4 .scrollBox div img {
        width: 100%;
        height: auto;
        position: static;
    }
.page_login_member .swiper-slide.swiper-slide-active .imgBox.s4 .scrollBox img {
    animation-name: s4i1;
    animation-duration: 1.9s;
    animation-fill-mode: forwards;
    animation-iteration-count: initial;
}
.page_login_member .swiper-slide .imgBox.s4 .scrollBox p {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 2px 2px 10px #00000030;
    position: absolute;
    top: 30px;
    right: 10%;
}
.page_login_member .swiper-slide.swiper-slide-active .imgBox.s4 .scrollBox p {
    animation-name: s4i2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: initial;
}

@keyframes s4i1 {
    0% {
        transform:translateY(0);
    }

    100% {
        transform: translateY(-43%);
    }
}
@keyframes s4i2 {
    0% {
        opacity:1;
        transform: translateY(600%);
    }
    60%{
        opacity:1;
    }

    100% {
        opacity: 0;
        transform: translateY(0%);
    }
}
        .page_login_member .swiper-pagination-bullet {
            background: #cad2dd;
            opacity: 1;
        }

    .page_login_member .swiper-pagination-bullet-active {
        opacity: 1;
        border-radius: 20px;
    }
.page_login_member .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
    background: #0aba96;
}

.page_login_member .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
    background: #ffc800;
}
.page_login_member .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {
    background: #4260d0;
}
.page_login_member .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active {
    background: #ffc900;
}

.page_login_member .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}


.page_login_member .s_tutorial, .page_login_member .s_tutorial .swiper-slide {
    max-width: 600px;
}

.page_login_member .s_tutorial {
    margin: 0 auto;
}
    .page_login_member .s_tutorial .demo_btn {
        position: absolute;
        top: 84px;
        z-index: 150;
        right: 17px;
        background: #73757b;
        border-radius: 14px;
        padding: 14px 12px;
        cursor: pointer;
        text-align: center;
        line-height: 1.2;
        font-size: 22px;
        /* font-weight: 500; */
        color: #fff;
    }
    .page_login_member .step.s_tutorial, .page_login_member .s_tutorial .c_wrap.c_list_center .wrap.new_1 {
        padding: 0;
    }


    .page_login_member .s_tutorial .wrap {
        overflow: hidden;
    }

.page_login_member .ending_btn_bg {
    z-index: 1;
}
.page_login_member .s_tutorial .sec_btn a {
    background-color: #fec72e;
    color: #313131;
}

.page_login_member .s_tutorial .third_btn a {
    background-color: #4260d0;
    color: #fff;
}

.page_login_member .s_tutorial .last_btn a{
    background-color: #fec72e;
    color: #313131;
}

.page_custom .search_wrap, .search_wrap {
    position: relative;
}
.ending_btn_bg {
    text-align: center;
    box-sizing: border-box;
    color: #000;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 3;
    padding:2.5rem;
    max-width:720px;
    transform:translateX(-50%);
}

    .ending_btn_bg a {
        display: block;
        padding: 1.6rem 0rem;
        cursor: pointer;
        margin: 0 auto;
        width: 100%;
        height: 58px;
        background-color: #0aba96;
        color: #fff;
        box-sizing: border-box;
        border-radius: 8px;
    }
    .ending_btn_bg.next{
        display:none;
    }
    .ending_btn_bg.next.on{
        display: block;
    }
/*---------------------------------------------------------------------------------
                                  p_share - 공유하기
----------------------------------------------------------------------------------*/

.po_back {
    position: absolute;
    top: 20px;
    z-index: 10;
}
.step_bg {
    background: #fff url(/Images/layout/login_intro_bg3.png) no-repeat 0 0 /100%;
    padding: 0;
    margin: -25px;
    height: fit-content;
    position:relative
}
.p_share .step_bg:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: -1;
    content: "";
}
    .p_share .step .ic_q {
        height: 22.5px;
        width: auto;
        margin-left: 5px;
        margin-top: -3px;
    }

.p_share .logo {
    padding: 21% 0 20%;
    box-sizing: border-box;
    text-align: center;
    position:relative;
}
    .p_share .logo img.l_close {
        width: 13px;
        height: 18.5px;
        padding: 0 10px 10px 0;
        position: absolute;
        top: 2.5rem;
        left: 2.5rem;
    }
    .p_share .logo img {
        height: 5.5rem;
        width: auto;
        margin-bottom: 10px;
    }

.p_share .shareWrap {
    background: #fff;
    border-radius: 25px 25px 0 0;
    padding: 35px 30px 38px;
    max-width: 720px;
    margin-bottom: -40px;
}
        .p_share .shareWrap .topTxt{
            text-align:center;
        }
            .p_share .shareWrap .topTxt img{
                width:20px;
                height:auto;
            }
.p_share .b_btn {
    width: 100%;
    display: block !important;
    text-align: center;
    padding: 15px !important;
    box-sizing: border-box;
    background: #ffcc03;
    border-radius: 5px;
}
        .p_share .b_btn.bubble {
            background: #eaedf0;
            width: fit-content;
            margin: 0 0 25px auto;
            padding: 9px 13px !important;
            position: relative;
            animation-name: bubble;
            animation-duration: 0.9s;
            animation-iteration-count:infinite;
            animation-timing-function:linear;
        }
            .p_share .b_btn.bubble:after {
                content: "";
                position: absolute;
                bottom: -10px;
                left: 50%;
                width: 10px;
                height: 10px;
                background: url(/Images/icon/i_txtbox_g.png) no-repeat 0 0 / cover;
            }
            @keyframes bubble{
                0%{
                    transform:translateY(7px);
                }
                50% {
                    transform: translateY(0px);
                }
                100% {
                    transform: translateY(7px);
                }
            }
.p_share .borderList{
    display:flex;
    justify-content:space-between;
}
    .p_share .borderList li {
        width: 47%;
        border-radius: 10px;
        border: 1px solid #e1e4e9;
        padding:17px 20px;
        box-sizing:border-box;
        position:relative;
        height:125px;
    }
        .p_share .borderList li img{
            width:23px;
            height:auto;
            position:absolute;
            bottom:18px;
            right:18px;
        }
        .p_share .borderList li .c_new{
            position:absolute;
            left:18px;
            bottom:18px;
        }
        .p_share .step .topBox img {
            width: 13px;
            height: 18.5px;
        }

.p_share .step .explanList li {
    padding: 23px 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #fff;
    border-radius: 10px;
    align-items: center;
}

        .p_share .step .explanList li img{
            height:65px;
            width:auto;
            display:block;
            margin-right:16px;  
        }
    .p_share .step .explanList li div p {
        line-height: 1.4;
    }
.p_share .step .pa_flex.f_wrap {
    width: 100%;
    max-width: initial;
    margin-right:0;
}
.p_share .step .pa_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 148px;
    min-width: 137px;
    width: 51%;
    margin-right: 17px;
}
.p_share .step .btnList {

}
    .p_share .step .btnList li {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
    }
        .p_share .step .btnList li .shareBtn {
            max-width: 145px;
            width: 58%;
            line-height: 53px;
            align-items: center;
            display: grid;
        }
            .p_share .step .btnList li.off .shareBtn .offtxt {
                display: block;
                text-align:center;
            }
            .p_share .step .btnList li.off .shareBtn .btnList {
                display: none;
            }
        .p_share .step .btnList li.donation.off .c_toggle {
            display: none;
        }
                .p_share .step .btnList li .shareBtn .btnList {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                    .p_share .step .btnList li .shareBtn .btnList > div {
                        height: 35px;
                    }
                    .p_share .step .btnList li .shareBtn .offtxt {
                        display: none;
                    }

/*toggleSwitch*/
.toggleSwitch {
    width: 60px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #d7d7d7;
    cursor: pointer;
}

    .toggleSwitch.active {
        background: #ffcc02;
    }


        .toggleSwitch.active .toggleButton {
            left: calc(100% - 23px);
        }
        .toggleSwitch .toggleButton {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            left: 3px;
            transform: translateY(-50%);
            border-radius: 50%;
            background-image: url(/Images/icon/i_toggle_bg.png);
            background-position: center;
            background-size: 100%;
            background-color: #fff;
        }
            .toggleSwitch, .toggleButton {
                transition: all 0.2s ease-in;
            }
                .toggleSwitch .off_txt {
                    display: block;
                    margin: 0px 8.5px 0px auto;
                    line-height: 1.8;
                    float: right;
                }
                .toggleSwitch.active .off_txt {
                    display: none;

                }
                .toggleSwitch.active .on_txt {
                    display: block;
                    margin: 0px 0 0px 10px;
                    line-height: 1.8;
                }
                .toggleSwitch .on_txt {
                    display: none;
                }


                    .p_share .step .btnList li .shareBtn > div > div.on img:first-child {
                        display: none;
                    }
.p_share .shareBtn input[type=radio] {
    display: none;
}

    .p_share .shareBtn input[type=radio] + label {
        display: inline-block;
        cursor: pointer;
        height: 35px;
        width: 35px;
        background: url(/Images/icon/i_check_g2.png) no-repeat 0 0 /cover;
    }

    .p_share .shareBtn input[type=radio]:checked + label {
        background: url(/Images/icon/i_check_y.png) no-repeat 0 0 /cover;
    }
.p_share .step .subjectList {
    margin-bottom: 170px;
    margin-bottom: calc(170px + constant(safe-area-inset-bottom) );
    margin-bottom: calc(170px + env(safe-area-inset-bottom) );
}
    .p_share .step .subjectList .sl_li {
        padding: 14px 18px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
        margin-bottom:10px;
        position:relative;
    }
.p_share .step .c_new {
    padding: 2.6px 8px;
    border-radius: 6px;
    background: #ffed00;
    display: none;
}
    .p_share .step .c_new.on {
        display: block;
    }
.p_share .step .d_new {
    position: absolute;
    right: 15px;
    top: 14px;
    width: 9px;
    height: 9px;
    display: none;
    background: #ffb602;
    border-radius: 50%;
}

.p_share .step .d_new.on {
    display: block;
}

.p_share .step .subjectList .sl_li:last-child {
    margin-bottom: 0;
}
.p_share .step .subjectList .sl_li > div {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 6px;
    text-align: center;
}
.p_share .step .subjectList .sl_li > div.p_no {
    padding: 0;
    text-align: left;
}
    .p_share .step .subjectList .sl_li > div.p_no img{
        width:20px;
        height:auto;
    }
.p_share .step .subjectList .sl_li > div p img {
    width: 7px;
    height: auto;
    margin-top: -2.8px;
    margin-left: 9px;
}
.p_share .step .bottomBox {
    padding-right: 2.5rem;
    width: 100%;
}
    .p_share .step .bottomBox.po_f2 {
        position: fixed;
        bottom: calc(100vh - (100vh - 85px) );
        bottom: calc(100vh - (100vh - 85px) + constant(safe-area-inset-bottom) );
        bottom: calc(100vh - (100vh - 85px) + env(safe-area-inset-bottom) );
        z-index: 10;
        max-width: 720px;
        right: 0%;
        box-sizing: border-box;
        width: fit-content;
    }
.p_share .step .bottomBox .txt_m {
    width: fit-content;
    padding: 11px 15px;
    border-radius: 6px;
    background: #ffcc03;
    margin: 0 15px 15px auto;
    position: relative;
    animation-name: bubble;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.p_share .step .bottomBox .txt_m::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: -10px;
    right: 45px;
    background: url(/Images/icon/i_txtbox_y.png)no-repeat center /cover;
}
.p_share .step .addBtn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffcc03;
    margin: 0 3px 3px auto;
    position: relative;
    box-shadow: 3px 3px 0 #e2e5ed;
    cursor: pointer;
}
    .p_share .step .addBtn span {
        display: block;
        width: 30px;
        height: 2.5px;
        border-radius: 5px;
        background: #131313;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
        .p_share .step .addBtn span.b {
            width: 2.5px;
            height: 30px;
        }
.p_share .step .contBox {
    padding: 22px 22px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
}
    .p_share .step .contBox .contBox_tit{
        text-align:center;
    }
.p_share .step .df_sb_s {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.p_share .step .contBox .profileBox {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f2f3f5;
    box-sizing: border-box;
    position:relative;
}
    .p_share .step .contBox .profileBox p {
        overflow: hidden;
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }
    .p_share .step .contBox .profileBox p img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    .p_share .step .contBox .profileBox img.write {
        position: absolute;
        height: 2.4rem;
        width: auto;
        bottom: 0;
        right: 0;
        cursor:pointer;
    }
    .p_share .step .border_line {
        width: 100%;
        height: 1px;
        background: #313131;
    }
.p_share .step .dotList li{
    padding-left:15px;
    box-sizing:border-box;
    position:relative;
    letter-spacing:-0.5px;
}
    .p_share .step .dotList li:before {
        content: "";
        position: absolute;
        top:9px;
        left: 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #cad2dd;
    }
.p_share .step .contBox .contBox_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    position:relative;
}
    .p_share .step .contBox .contBox_list li {
        border-radius: 16px;
        border: 1px solid #e1e4e9;
        width: 31%;
        margin-right: 3.5%;
        margin-bottom:3.5%;
        text-align: center;
        padding: 14px 11px 12px;
        box-sizing: border-box;
        line-height: 1.2;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        min-height: 99px;
        position:relative;
    }
        .p_share .step .contBox .contBox_list li .d_new {
            width: 8px;
            height: 8px;
            margin: 0;
            right: 10px;
            top: 10px;
        }
        .p_share .step .contBox .contBox_list li.pp {
            padding: 14px 4px 12px;
        }
        .p_share .step .contBox .contBox_list li.no_file {
            width: fit-content;
            height: fit-content;
            min-height: auto;
            position: absolute;
            top: -38px;
            right: 0px;
            border: none;
            padding: 5px 22px 5px 12px;
            border-radius: 6px;
            margin: 0;
            background: #eee url(/Images/icon/i_arrow_right_b.png) no-repeat 80px 8px /5.5px;
            display: none;
        }
        .p_share .step .contBox .contBox_list.off li.no_file {
            display: block;
        }
            .p_share .step .contBox .contBox_list li:nth-child(3n) {
                margin-right: 0%;
            }
    .p_share .step .contBox .contBox_list li div {
        height:30px;
        margin-bottom:8px
    }
        .p_share .step .contBox .contBox_list li div img{
            height:100%;
        }
            .p_share .step .contBox .contBox_list.off li div img {
                filter: grayscale(1) brightness(0.8);
            }
.p_share .step .contBox .c_numberlist {
    padding-left: 5px;
    box-sizing: border-box;
}
.p_share .step .contBox .c_numberlist span {
    display: block;
    padding-left: 13px;
    box-sizing: border-box;
}
.p_share .step .snsBox {
    padding: 0 3%;
    box-sizing: border-box;
}
.p_share .step .snsBox li {
    width: 48%;
    max-width:160px;
}
    .p_share .step .snsBox li img{
        width:100%;
        height:auto;
    }
.p_share .step .settingImg {
    float: right;
    width: 50%;
    min-width: 146px;
    margin-top: -3%;
}
.p_share .step .setList {
    display: flex;
    justify-content: space-between;
    margin-top:-5px;
}
    .p_share .step .setList li {
        border: 1px solid #e1e4e9;
        border-radius: 16px;
        background: #fff;
        padding: 16px 15px 13px;
        width: 48.5%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
    }
        .p_share .step .setList li div {
            height: 31%;
            margin:0 auto;
        }
            .p_share .step .setList li div img {
                height: 100%;
            }
        .p_share .step .setList li p {
            text-align: center;
            line-height: 1.4;
        }
.p_share .step .flex_cont {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .p_share .step .flex_cont div {
        width: 47%;
        border-radius: 10px;
        background: #c2c8d5;
        padding: 2.5rem;
        box-sizing: border-box;
        text-align: center;
    }
        .p_share .step .flex_cont div.p100 {
            width: 100%;
            padding: 2.2rem;
            margin-top: 5%;
        }

        .p_share .step .flex_cont div img {
            width: 49px;
            margin-bottom: 12px;
        }

        .p_share .step .flex_cont div:last-child img {
            width: 43px;
            margin: 3px 0 17px;
        }

        .p_share .step .flex_cont div p {
            text-align: center;
        }
.p_share .step .fileBox {
    width: 100%;
    height: 70px;
    border-radius: 8px;
    background: #e3e3e3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.3rem 1.2rem;
    box-sizing: border-box;
    gap: 1%;
}
    .p_share .step .fileBox .i_pdf {
        width: 40px;
        height: auto;
    }
    .p_share .step .fileBox > div {
        width: calc( 100% - 56px);
        height: 100%;
    }
        .p_share .step .fileBox > div .name {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
            .p_share .step .fileBox > div .name .subtext_2m span:first-child{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 75%;
                display:inline-block;
            }
            .p_share .step .fileBox > div .name .subtext_2m{
                overflow:hidden;
            }
            .p_share .step .fileBox > div .name img {
                width: 28px;
                height: auto;
            }
        .p_share .step .fileBox > div .loading {
            margin-top:-5px;
        }
.p_share .step .imgLine {
    width: 100%;
    height: 1px;
    background: #dedede;
}
.p_share .step .imgB_wrap {
    display: flex;
    justify-content: space-between;
    gap: 6%;
    flex-wrap: wrap;
}
    .p_share .step .imgB_wrap.multi .imgBox {
        width: 47%;
        height: 110px;
    }
        .p_share .step .imgB_wrap.multi .imgBox .close {
            top: 12px;
            right: 12px;
        }
.p_share .step .imgBox {
    width: 100%;
    height: 228px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #e3e4e7
}

    .p_share .step .imgBox .close {
        width: 28px;
        height: 28px;
        background: url(/Images/icon/i_c_close.png) no-repeat center/cover;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1;
    }

    .p_share .step .imgBox img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
.p_share .popup_c.p_inp > div {
    padding: 20px 22px 20px;
}
.p_share .popup_c .ic_close {
    height: 1.4rem;
    width: auto;
    margin: 0 0 10px auto;
    display: block;
}
.p_share .popup_c p {
    line-height: 1.4;
}
    .p_share .popup_c p.text_b5 {
        text-align: left;
    }
.popup_c .select_flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    .p_share .popup_c .select_flex li {
        width: 48%;
        background: #ffcd09;
        padding: 9px 0px;
        border-radius: 4px;
    }
.p_share .popup_c input{
    margin-bottom: 13px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #c6c9d2;
    padding: 12px 12px;
    box-sizing: border-box;
    font-size: 1.4rem;
    font-weight: 400;
    height: 46px;
}

.p_share .pop_topBox {
    position: absolute;
    left: 50%;
    top: calc(0px + constant(safe-area-inset-top) );
    top: calc(0px + env(safe-area-inset-top) );
    padding: 2.1rem 2.5rem 2.5rem;
    width: 100%;
    box-sizing: border-box;
    background: #f2f3f5;
    z-index: 10;
    border-radius: 0;
    transform: translateX(-50%);
    text-align: initial;
    max-width: 720px;
}
    .p_share .pop_topBox img.back {
        width: 13px;
        height: 18.5px;
        padding-right: 20px;
        cursor: pointer;
    }

    .p_share .pop_topBox .t_tit {
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 21px;
        transform: translateX(-50%);
    }
/*-------------------------------------------------
                .page_emergency
---------------------------------------------------*/
.p_emerge .c_top {
    color: #000;
    background: url(/Images/layout/login_intro_bg2.jpg) no-repeat 0 0 / 100%;
    height: 230px;
    padding: 2.5rem;
    box-sizing: border-box;
}
.p_emerge .topBox img {
    width: 13px;
    height: 18.5px;
    padding: 0 20px 20px 0;
    cursor:pointer;
}
.p_emerge .wrap {
    background: #fff;
    border-radius: 25px 25px 0 0;
    margin-top: -25px;
}

.p_emerge .c_top .c_intro_top {
    margin-bottom: 2rem;
}

    .p_emerge .c_top .tit_wrap {
        display: flex;
        justify-content: space-between;
    }

        .p_emerge .c_top .tit_wrap .t_img {
            height: 12rem;
            position: relative;
            bottom: 3px;
        }


.p_emerge .no_em {
    text-align: center;
    margin-top: 3rem;
}
.p_emerge .tb_wrap {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.p_emerge .tb_row {
    display: table-row;
}
.p_emerge .tb_wrap .tb_cell {
    box-sizing: border-box;
    padding: 1.3rem;
    border: 1px solid #e6e9f2;
    width: 50%;
    position: relative;
    cursor: pointer;
    display: table-cell;
}
    .p_emerge .tb_wrap .icon_check i {
        background-image: url(/Images/icon/i_check_g3.png);
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        width: 2.6rem;
        height: 2.6rem;
        display: flex;
    }
    .p_emerge .tb_wrap .tb_cell.active .icon_check i {
        background-image: url(/Images/icon/i_check_y2.png);
    }
.p_emerge .tb_wrap .co_check.active .icon_check i {
    background-image: url(/Images/icon/i_check_y2.png);
}
    .p_emerge .tb_wrap .tb_cell.active:after {
        border: 1px solid #feb52b;
    }
.p_emerge .co_check .icon_check {
    margin-right: 1rem;
}
    .p_emerge .tb_wrap .tb_cell:after {
        content: '';
        border: 1px solid transparent;
        width: 100%;
        height: 99%;
        position: absolute;
        right: 0;
        top: -1px;
    }
.p_emerge .tb_wrap .tb_cell .check_text {
    margin-top: -1px;
}
.p_emerge .co_check {
    display: flex;
    align-items: center;
}
.p_emerge .list_local {
    display: flex;
    width: 100%;
    text-align: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
    .p_emerge .list_local ul {
        height: 26rem;
        overflow-x: auto;
    }
    .p_emerge .list_local .tit_local {
        width: 38%;
        background-color: #eceef2;
    }
    .p_emerge .list_local .sub_local {
        width: 62%;
    }
    .p_emerge .list_local ul li {
        padding: 1rem 0;
        cursor: pointer;
    }
    .p_emerge .list_local .tit_local .active {
        background-color: #000;
        color: #fff;
    }
    .p_emerge .list_local .sub_local .active {
        background-color: #feb52b;
        color: #000;
    }
.p_emerge .b_btn {
    width: 100%;
    display: block !important;
    text-align: center;
    padding: 15px !important;
    box-sizing: border-box;
    background: #ffcc03;
    border-radius: 5px;
}
.p_emerge .input_wrap input {
    margin-top: 13px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #c6c9d2;
    padding: 12px 12px;
    box-sizing: border-box;
    font-size: 1.4rem;
    font-weight: 400;
    height: 46px;
}
    .p_emerge .input_wrap input:focus {
        border: 1px solid #ffcc03;
    }
.p_emerge .popup_c .select_flex {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
}
    .p_emerge .popup_c .select_flex li {
        width: 48%;
        text-align: center;
        background: #edf0ff;
        color: #ffcd09;
        padding: 9px 0;
        border-radius: 4px;
    }
        .p_emerge .popup_c .select_flex li:last-child {
            background: #ffcd09;
            color: #311d0c;
        }
    .c_check_custom .chiller_cb label {
        height: 2.4rem;
        padding-top: 1px;
        display: flex;
        align-items: center;
        z-index: 2;
        position: relative;
        cursor: pointer;
        margin-bottom: 0;
        padding-left: 35px;
    }
.c_check_custom .chiller_cb input:checked ~ span {
    background: #feb52b;
}
.chiller_cb input:checked ~ span {
    background: #feb52b;
    border-color: #e2e2e2;
}
.c_check_custom .chiller_cb span {
    border: 0px solid #ccc;
    background: #e7e9ee;
    top: 0px;
}
.chiller_cb span {
    display: inline-block;
    position: absolute;
    transition: all 0.1s;
    z-index: 1;
    box-sizing: content-box;
    left: 0;
    border-radius: 50%;
}
    .c_check_custom .chiller_cb span:before, .c_check_custom .chiller_cb span:after {
        background: #fff;
    }
    .c_check_custom .chiller_cb span:before {
        transform: rotate(-50deg);
        top: 1.6rem;
        left: 1rem;
    }
.c_check_custom .chiller_cb input ~ span:before {
    width: 1.2rem;
    height: 0.15rem;
    transition: width 0.1s;
    transition-delay: 0.1s;
}
.c_check_custom .chiller_cb input ~ span:after {
    width: 0.9rem;
    height: 0.15rem;
    transition: width 0.1s;
    transition-delay: 0.1s;
}
.c_check_custom .chiller_cb span:after {
    transform: rotate(45deg);
    bottom: 1.3rem;
    left: 0.6rem;
}
.chiller_cb span:before, .chiller_cb span:after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 0;
    height: 0.2rem;
    position: absolute;
    transform-origin: 0% 0%;
}
.c_check_custom .chiller_cb span {
    width: 2.4rem;
    height: 2.4rem;
}
.c_check_custom{
    height:24px;
}
/*---------------------------------------------------------------------------------
                                    alarm
----------------------------------------------------------------------------------*/

.alarm .topBox {
    position: fixed;
    left: 0%;
    top: 0;
    padding: 2.1rem 2.5rem 2.5rem;
    width: 100%;
    box-sizing: border-box;
    background: #f2f3f5;
    z-index: 10;
}
.alarm .t_tit {
    display: inline-block;
    position: absolute;
    left: 50%;
    top:19px;
    transform: translateX(-50%);
}
.alarm .no_chatlist {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: fit-content;
    text-align: center;
    display:none;
}
    .alarm .no_chatlist.on{
        display:block;
    }
    .alarm .no_chatlist img {
        width: 60px;
        height: auto;
        margin-bottom: 15px;
    }
    .alarm .no_chatlist p {
        line-height: 1.6;
    }
    /* left */
.alarm .chat_wrap.on{
    display:block;
}
.alarm .chat_wrap {
    margin-top: 50px;
    display: none;
}
.alarm .c_pad {
    padding: 12.5px 0;
    box-sizing: border-box;
    width: 100%;
}
.alarm .chat_wrap .chat_box .left .profile {
    margin-bottom: 10px;
    height: 40px;
}

        .alarm .chat_wrap .chat_box .left .profile img {
            height: 100%;
        }

    .alarm .chat_wrap .chat_box .left .txtBox {
        background: #fff;
        border-radius: 10px;
        width: 87%;
        padding: 18px 20px;
        box-sizing: border-box;
        position: relative;
    }
.alarm .chat_wrap .chat_box .t_line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
    margin: 12px 0 8px;
}
.alarm .chat_wrap .chat_box .t_go {
    cursor: pointer;
    width: fit-content;
    margin-bottom: -5px;
}
.alarm .chat_wrap .chat_box .t_go img {
    width: 7px;
    height: auto;
    margin: -2.5px 0 0 6px;
}
    .alarm .chat_wrap .chat_box .left .txtBox.double::before {
        display: none;
    }

        .alarm .chat_wrap .chat_box .left .txtBox::before {
            content: "";
            width: 22.5px;
            height: 15px;
            position: absolute;
            top: 0;
            left: -10px;
            background: url(/Images/layout/testament_ic_chat_l.png) no-repeat top left;
            background-size: cover;
        }

/*---------------------------------------------------------------------------------
                                  p_banner
----------------------------------------------------------------------------------*/
.p_banner{
    position:relative;
}
    .p_banner img{
        width:100%;
        height:auto;
    }
    .p_banner .btn_delete {
        position: fixed;
        top: 12px;
        top: calc(12px + constant(safe-area-inset-top) );
        top: calc(12px + env(safe-area-inset-top) );
        right: 20px;
        z-index: 2;
        background-color: #e6e9f2;
        border-radius: 50%;
        background-image: url(/Images/icon/i_close.png);
        background-repeat: no-repeat;
        background-size: 11px;
        background-position: center;
        text-indent: -9999px;
        font-size: 0px;
        width: 2.6rem;
        height: 2.6rem;
        cursor: pointer;
    }


/*---------------------------------------------------------------------------------
                                  p_withdraw
----------------------------------------------------------------------------------*/
.p_withdraw .topBox img.back {
    width: 13px;
    height: 18.5px;
    padding-right: 20px;
}
.p_withdraw .popup_c .select_flex li:first-child {
    background: #fffae4;
    color: #fbb100;
}
.p_withdraw .po_f {
    position: fixed;
    bottom: calc(55px);
    bottom: calc(55px + constant(safe-area-inset-bottom) );
    bottom: calc(55px + env(safe-area-inset-bottom) );
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 100%;
    background: none;
    height: auto;
    max-width: 720px;
    padding: 1rem 2.5rem 2.5rem;
    z-index: 3;
}
.p_withdraw .bottom_btn {
    background: #ffcd09;
    text-align: center;
    line-height: 50px;
    height: 50px;
    border-radius: 6px;
    width: 100%;
}
.p_withdraw .popup_bot {
    padding: 25px;
    box-sizing: border-box;
    background: #fff url(/Images/icon/i_arrow_right_gray.png) no-repeat center right 25px /7.5px 14px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #e9e9e9;
}
    .p_withdraw .popup_bot img {
        width: 37.5px;
        height: 35px;
    }
    .p_withdraw .popup_bot .p_b_flex {
        display: flex;
        flex-direction: column;
        padding-left: 26px;
    }
        .p_withdraw .popup_bot .p_b_flex p:first-child {
            font-size: 1.5rem;
            font-weight: 500;
            color: #313131;
        }
        .p_withdraw .popup_bot .p_b_flex p {
            font-size: 1.15rem;
            color: #9a9fa8;
            font-weight: 300;
        }
.p_withdraw .popup_btn {
    width: 100%;
    text-align: center;
    height: 50px;
    line-height: 47px;
    color: #311d0c;
    background: #ffcd09;
    border-radius: 5px;
    margin-top: 23px;
    font-weight: 400;
}
/*---------------------------------------------------------------------------------
                                  p_mypage
----------------------------------------------------------------------------------*/
.p_mypage {
    overflow-y: scroll;
}
.p_mypage img.back {
    width: 13px;
    height: 18.5px;
}
.p_mypage .mc_member {
    padding-bottom: 30px;
    border-bottom: 1px solid #c6c9d2;
}
.p_mypage .mc_member .pic .img {
    width: 100px;
    height: 100px;
}
.p_mypage .mc_member .pic .img p{
    width: 100px;
    height: 100px;
}
    .p_mypage .mc_member .pic .img .write {
        height:3.4rem;
    }


.p_mypage .basic_info .df_fs {
    display: flex;
    justify-content: flex-start;
}
    .p_mypage .basic_info .df_fs ul li {
        margin-bottom: 20px;
    }
.p_mypage .df_sb_s {
    display: flex;
    justify-content: space-between;
}
            .p_mypage .basic_info .df_fs ul li.num div {
                border-radius: 50px;
                padding: 2px 12px;
                box-sizing: border-box;
                background: #fff5cc;
                color: #ff9f00;
                margin-top: -2px;
            }
    .p_mypage .basic_info .df_fs ul:first-child {
        width: 36%;
    }
    .p_mypage .basic_info .df_fs ul:last-child {
        width: 64%;
    }
.p_mypage .inputBox {
    position: relative;
    margin-bottom: 33px;
}
.p_mypage .inputBox input {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #e7e7e7;
    caret-color: #ffcc03;
    letter-spacing: -0.4px;
}
    .p_mypage .inputBox input:focus, .x_login .inputBox.i_50 input:focus {
        border-color: #ffcc03;
        outline: none;
    }
.p_mypage .input_popup {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #e7e7e7;
    caret-color: #ffcc03;
    letter-spacing: -0.4px;
}

    .p_mypage .input_popup:focus {
        border-bottom: 2px solid #ffcc03;
    }
.p_mypage .input_popup span {
    display: block;
    height: 50px;
    line-height: 50px;
}

    .p_mypage .input_popup span::after {
        content: "";
        width: 14px;
        height: 7.5px;
        position: absolute;
        top: 60%;
        right: 3px;
        cursor: pointer;
        background: url(/Images/icon/icon_arrow_down2.png) no-repeat center/cover;
        transform: translateY(-50%);
    }
.p_mypage .inputBox.b_gray_50 span {
    width: 48%;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    letter-spacing: -0.4px;
    display: block;
    line-height: 50px;
}
.p_mypage .inputBox.b_gray span {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    letter-spacing: -0.4px;
    display: block;
    line-height: 50px;
}
    .p_mypage .bottom_btn {
        background: #ffcc03;
        text-align: center;
        line-height: 50px;
        height: 50px;
        border-radius: 6px;
        width: 100%;
    }
/* popup chk_tel on */
.p_mypage .popup_b {
    z-index: 1000000;
}
.p_mypage .chk_tel {
    height: 380px;
    padding: 35px 25px;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

    .p_mypage .chk_tel ul li {
        margin-bottom: 6px;
        padding: 8px 5px;
        border-radius: 6px;
        margin-left: -5px;
    }

        .p_mypage .chk_tel ul li:hover {
            background: #efefef;
        }

    .p_mypage .chk_terms ul {
        overflow: hidden;
        margin-bottom: 40px;
    }

        .p_mypage .chk_terms ul li {
            margin-bottom: 22px;
            padding: 0 15px;
            box-sizing: border-box;
            height: 25px;
            line-height: 25px;
            width: 100%;
            position: relative;
            display: flex;
            justify-content: flex-start;
        }

            .p_mypage .chk_terms ul li:first-child {
                height: 50px;
                line-height: 50px;
                background: #f2f3f5;
                border-radius: 5px;
            }

            .p_mypage .chk_terms ul li img {
                position: absolute;
                top: 6px;
                right: 8px;
                width: auto;
                height: 14px;
                cursor: pointer;
            }

            .p_mypage .chk_terms ul li:first-child::after {
                display: none;
            }

            .p_mypage .chk_terms ul li span {
                display: block;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: #cad2dd url(/Images/icon/icon_chk_w.png) no-repeat 3.5px 7.5px/17px 11px;
                margin-right: 8px;
            }

            .p_mypage .chk_terms ul li.on span {
                background: #ffcc03 url(/Images/icon/icon_chk_w.png) no-repeat 3.5px 7.5px/17px 11px;
            }

            .p_mypage .chk_terms ul li:first-child span {
                margin-top: 12px;
            }

    .p_mypage .chk_termstxt {
        height: 80vh;
    }

        .p_mypage .chk_termstxt table {
            border-top: 2px solid #313131;
            border-bottom: 2px solid #313131;
            border-collapse: collapse;
        }

            .p_mypage .chk_termstxt table tr td {
                border-bottom: 1px solid #999;
                padding: 2px 6px;
                box-sizing: border-box;
            }

                .p_mypage .chk_termstxt table tr td:first-child {
                    width: 36%;
                    background: #eee;
                    padding: 12px 6px;
                }
    .p_mypage .a_iframe {
        width: 100vw;
        position: relative;
        height: calc(100% - 40px);
        left: 50%;
        transform: translateX(-50%);
    }

    .p_mypage .inputBox.i_6 img {
        width: 23.5px;
        height: 23.5px;
        margin-right: 12px;
    }

        .p_mypage .inputBox.i_6 img.remms {
            width: 20px;
            height: 22px;
            margin-right: 10px;
        }

    .p_mypage .inputBox.i_6 p.c_yellow {
        display: inline-block;
        padding-top: 1px;
    }

    .p_mypage .inputBox.i_6 span {
        padding-top: 1px;
        display: inline-block;
    }

    .p_mypage .inputBox.i_6 .d_flex {
        justify-content: flex-start;
    }

        .p_mypage .inputBox.i_6 .d_flex input {
            width: 11.5%;
            margin-right: 10px;
            font-size: 30px;
            text-align: center;
        }

    .p_mypage .inputBox.i_6_c .d_flex {
        justify-content: center;
    }

        .p_mypage .inputBox.i_6_c .d_flex li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #d8dce2;
            margin-right: 15px;
            font-size: 30px;
            text-align: center;
            border: none;
        }

            .p_mypage .inputBox.i_6_c .d_flex li:last-child {
                margin: 0;
            }

            .p_mypage .inputBox.i_6_c .d_flex li.on {
                background: #fbc800;
            }
    /*---------------------------------------------------------------------------------
                                  scroll motion
----------------------------------------------------------------------------------*/
    @keyframes up {
        0% {
                opacity: 0;
                transform: translateY(20px);
            }

            30% {
                opacity: 0;
                transform: translateY(20px);
            }
        }

        .p_home .c_cont .cc_title .tit.motion, .p_home .c_cont .cc_title .txt.motion, .p_home .c_cont .cc_story .box_wrap .bw_wrap.motion, .p_home .c_cont .cc_facility .box.motion, .cs_q_detail.motion, .cc_title .txtBox .m_tit.motion, .cc_title .m_img.motion, .cc_box.motion, .cc_tax .taxBox.motion{
    animation-name: up;
    animation-duration: 0.8s;
}


.p_home .c_cont .cc_story .box_wrap .progress.motion,
.cc_service a.motion {
    animation-name: up;
    animation-duration: 0.6s;
}


.p_home .c_cont .cc_guide .cc_box.motion,
.p_home .c_cont .cc_facility .box.ban_2.motion,
.cc_title .txtBox .m_txt.motion,
.cc_title .txt.motion,
.cc_reference.motion {
    animation-name: up;
    animation-duration: 1s;
}
/*---------------------------------------------------------------------------------
                                  input type range 
----------------------------------------------------------------------------------*/
input[type="range"] {
    font-size: 1.5rem;
    width: 102vw;
    max-width: 720px;
}

input[type="range"] {
    color: #5d7cf9;
    --thumb-height: 1.125em;
    --track-height: 0.125em;
    --track-color: rgba(0, 0, 0, 0.2);
    --clip-edges: 0.125em;
}

    input[type="range"].win10-thumb {
        color: #5d7cf9;
        --thumb-height: 1.375em;
        --thumb-width: 0.5em;
        --clip-edges: 0.0125em;
    }


/* === range commons === */
input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}


    input[type="range"]:disabled {
        filter: grayscale(1);
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* === WebKit specific styles === */
    input[type="range"],
    input[type="range"]::-webkit-slider-runnable-track,
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: var(--thumb-height);
        border-radius:50px;
    }

        input[type="range"]::-webkit-slider-runnable-track,
        input[type="range"]::-webkit-slider-thumb {
            position: relative;
        }

        input[type="range"]::-webkit-slider-thumb {
            --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
            --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
            --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
            --clip-further: calc(100% + 1px);
            --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
            width: var(--thumb-width, var(--thumb-height));
            background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
            background-color: currentColor;
            box-shadow: var(--box-fill);
            border-radius: var(--thumb-width, var(--thumb-height));
            filter: brightness(100%);
            clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
        }


        input[type="range"]::-webkit-slider-runnable-track {
            background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
        }

        input[type="range"]:disabled::-webkit-slider-thumb {
            cursor: not-allowed;
        }

        /* === Firefox specific styles === */
        input[type="range"],
        input[type="range"]::-moz-range-track,
        input[type="range"]::-moz-range-thumb {
            appearance: none;
            height: var(--thumb-height);
        }

            input[type="range"]::-moz-range-track,
            input[type="range"]::-moz-range-thumb,
            input[type="range"]::-moz-range-progress {
                background: #fff0;
            }

            input[type="range"]::-moz-range-thumb {
                background: currentColor;
                border: 0;
                width: var(--thumb-width, var(--thumb-height));
                border-radius: var(--thumb-width, var(--thumb-height));
                cursor: grab;
            }


            input[type="range"]::-moz-range-track {
                width: 100%;
                background: var(--track-color);
            }

            input[type="range"]::-moz-range-progress {
                appearance: none;
                background: currentColor;
                transition-delay: 30ms;
            }

            input[type="range"]::-moz-range-track,
            input[type="range"]::-moz-range-progress {
                height: calc(var(--track-height) + 1px);
                border-radius: var(--track-height);
            }

            input[type="range"]::-moz-range-thumb,
            input[type="range"]::-moz-range-progress {
                filter: brightness(100%);
            }


            input[type="range"]:active::-moz-range-thumb,
            input[type="range"]:active::-moz-range-progress {
                filter: brightness(var(--brightness-down));
            }

            input[type="range"]:disabled::-moz-range-thumb {
                cursor: not-allowed;
            }
.page_policy .p_main_title, .page_policy .p_wrap .c_main_title, .page_policy .p_wrap .text_box {
    margin-bottom: 2rem;
}
.page_policy .p_main_title {
    text-align: center;
}
.page_policy .p_wrap .text_box .c_title {
    margin-bottom: 1rem;
}
.page_policy .hr {
    border: 0;
    border-top: solid 1px #ddd;
    margin: 3rem 0;
}
.footer {
    background: #fff;
    width: 100vw;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    max-width: 720px;
    min-width: 320px;
    margin-top: 40px;
    padding-bottom: 50px;
}
    .footer .f_time{
        padding:1px 6px 2px;
        box-sizing:border-box;
        background:#eee;
        width:fit-content;
    }
    .footer .f_txtbox{
        line-height:1.6;
    }
    .footer span {
        display: inline-block;
        width: 1px;
        height: 13.5px;
        background: #999;
        margin: 5px 10px 0;
    }
    .footer img{
        position:absolute;
        bottom:90px;
        right:2.5rem;
        width:100px;
        height:auto;
    }
    /*---------------------------------------------------------------------------------
                                  Media Query - Max
----------------------------------------------------------------------------------*/
    @media (max-width: 400px) {
    }


@media (max-height: 700px) {


}