/*공통*/
:root {
    --main_txt_color: #ddba94;
    --main_btn_col: #d2bba4;
    --main_btn_txt_col: #49392e;
    --tone_down_gold: #c0a885;
    --txt_col: #3B312C;

    --txt_gray: #6B6B6B;
    --txt_light_brown: #927E74;

    --con_sub_tit_mt: 80px;
    --con_sub_tit_bo: 36px;
    --con_sub_tit: 32px;

    --sub_con_30: 30px;
    --sub_con_28: 28px;
    --sub_con_24: 24px;
    --sub_con_20: 20px;
    --sub_con_19: 19px;
    --sub_con_18: 18px;
    --sub_con_17: 17px;

    --pagi_btn: 40px;
}

.wrap_1120 {
    width: 100%;
    max-width: 1160px;
    padding-inline: 20px;
    margin-inline: auto;
}

.only_M {
    display: none;
}

.only_768 {
    display: none;
}

.ellipsis {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.ellipsis_2 {
    text-overflow: ellipsis;
    width: 100%;
    /* white-space: nowrap; */
    overflow: hidden;
    display: inline-block;
    word-break: break-word;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sec_pad {
    padding-bottom: 80px;
}

.sub_page_tit_wrap {
    margin-top: var(--con_sub_tit_mt);
    padding-bottom: 20px;
    border-bottom: 1px solid #CECECE;
}

.sub_page_tit_wrap h3 {
    font-size: var(--con_sub_tit);
    font-weight: 600;
    color: var(--txt_col);
}

.sub_sec[class^="board_"] .sub_page_tit_wrap h3 {
    font-size: var(--con_sub_tit_bo);
    font-weight: 600;
    font-family: sans-serif;
}

.chkbox_wrap :where(input[type="checkbox"], input[type="radio"]) {
    display: none;
}

.chkbox_wrap :where(input[type="checkbox"], input[type="radio"])+em {
    width: 24px;
    height: 24px;
    border: 1px solid #CECECE;
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 3px;
    cursor: pointer;
}

.chkbox_wrap label+label {
    margin-left: 20px;
}

.chkbox_wrap :where(input[type="checkbox"], input[type="radio"]):checked+em {
    background-color: var(--main_btn_txt_col);
    border: 1px solid var(--main_btn_txt_col);
}

.chkbox_wrap.disable :where(input[type="checkbox"], input[type="radio"]):checked+em {
    background-color: #6B6B6B;
    border: 1px solid #6B6B6B;
}

.chkbox_wrap :where(input[type="checkbox"], input[type="radio"]):checked+em::before {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(../images/user/chk_icon.png);
    position: absolute;
    top: 5px;
    left: 2px;
    background-repeat: no-repeat;
    background-size: contain;
}

form li.require .form_tit::after {
    content: "*";
    color: #FF0000;
    font-size: var(--sub_con_19);
    font-weight: 600;
}

.mt_30 {
    margin-top: 30px;
}

textarea {
    font-family: sans-serif;
    font-size: var(--sub_con_18);
    color: var(--txt_col);
}
.custom_scroll::-webkit-scrollbar{
    width: 6px; 
    cursor: pointer;
}
.custom_scroll::-webkit-scrollbar-thumb{
    background: var(--main_btn_txt_col);
    /* background: rgba(109, 94, 81, 0.733); */
    border-radius: 10px;
    cursor: pointer;
}
.custom_scroll::-webkit-scrollbar-track{
    background: #eaeaea;
    cursor: pointer;
    background: rgba(109, 94, 81, 0.733);
}
/*공통*/

/*로그인, 회원가입*/
.main.login .wrap_1400 {
    justify-content: flex-start;
    padding-top: var(--con_sub_tit_mt);
}

.login_wrap {
    width: 100%;
    padding: 40px 40px 60px;
    max-width: 544px;
    color: var(--main_txt_color);
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
}

.login_wrap h2 {
    margin-bottom: 10px;
    max-width: 344px;
    font-size: var(--sub_con_28);
    font-weight: 700;
}

.login_wrap h2._left {
    max-width: unset;
    font-size: var(--sub_con_28);
    font-weight: 700;
    width: 100%;
    text-align: left;
}

.login_wrap h2 img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.login_wrap form {
    max-width: 344px;
    display: inline-block;
    width: 100%;
}

.login_wrap form ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.login_wrap form ul li {
    width: 100%;
    height: 46px;
}

.login_wrap form ul li input {
    height: 100%;
    width: 100%;
    display: inline-block;
    border: 1px solid #cecece;
    padding: 0px 25px;
    font-weight: 500;
    font-family: sans-serif;
    font-size: var(--sub_con_17);
}

.login_wrap form ul li input::placeholder {
    color: #6b6b6b;
}

.login_wrap .submit_btn {
    display: inline-flex;
    width: 100%;
    height: 46px;
    background-color: var(--main_btn_col);
    color: var(--main_btn_txt_col);
    font-weight: 600;
    font-size: var(--sub_con_17);
    transition: 0.2s;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-content: center;
}

.login_wrap .submit_btn:hover {
    background-color: #e6c5a4;
    transition: 0.2s;
}

.login_wrap.donation_form_wrap {
    border-bottom: 0;
}

.login_wrap.donation_form_wrap .submit_btn_wrap {
    margin-top: 10px;
    border-top: 1px solid #e6e6e6;
    padding-top: 20px;
    text-align: center;
}

.login_wrap.donation_form_wrap .submit_btn {
    max-width: 177px;
}

.login_wrap .user_utility {
    width: 100%;
    max-width: 344px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.login_wrap .user_utility a {
    font-size: 15px;
    font-weight: 500;
}

.login_wrap .user_utility span.divider {
    color: var(--main_btn_col)
}

.login_wrap .user_utility a:hover {
    text-decoration: underline;
}

p.form_info {
    color: #927E74;
    font-size: 14px;
    margin-top: 4px;
    margin-left: 190px;
    font-weight: 500;
    text-align: left;
}

.login_wrap p.pw_chk_info {
    opacity: 0;
}

.main .wrap_1400 .login_wrap .find_tit {
    font-weight: 600;
    font-size: var(--sub_con_20);
    color: var(--txt_col);
    text-align: left;
    margin-bottom: 30px;
}

.login_wrap.find_form p.form_info {
    margin-left: 150px;
}

.login_wrap.donation_form_wrap {
    max-width: 800px;
}

.login_wrap.donation_form_wrap form {
    max-width: unset;
}

.login_wrap.donation_form_wrap form ul {
    gap: 15px;
}

.login_wrap.donation_form_wrap form ul li input {
    height: 40px;
    padding: 0px 15px;
    font-weight: 400;
}

.login_wrap.donation_form_wrap form ul li {
    flex-wrap: wrap;
    align-items: center;
    height: unset;
}

.login_wrap.donation_form_wrap form ul li.has_info {
    margin-bottom: 0;
}

.login_wrap.donation_form_wrap form ul li.default_wrap input {
    width: 344px;
    padding-inline: 15px;
}

.login_wrap.donation_form_wrap .email_wrap .select_wrap {
    width: 159px;
}

.add_li_wrap .add_wrap .form_btn {
    vertical-align: bottom;
}

.main .wrap_1400 .help_btn_wrap {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    max-width: 348px;
}

.main .wrap_1400 .donation_form_wrap .help_btn_wrap {
    display: flex;
    padding: 10px 15px;
    margin-top: -20px;
    margin-bottom: 10px;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    max-width: unset;
    background-color: #F5F4F4;
}

.help_btn_wrap+form {
    border-top: 1px solid #cecece;
    padding-top: 20px;
}

.main .wrap_1400 .help_btn_wrap p {
    color: var(--txt_col);
    font-size: var(--sub_con_19);
    font-weight: 500;
}

.help_btn_wrap .help_btn {
    display: inline-flex;
    width: 100px;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: var(--txt_col);
    font-size: var(--sub_con_19);
    font-weight: 500;
    height: 40px;
}

.login_wrap.donation_form_wrap.find_wrap {
    max-width: 737px;
    padding: 0;
}

.login_wrap.donation_form_wrap.find_wrap .form_tit {
    min-width: 130px;
    font-weight: 600;
    font-size: var(--sub_con_19);
    margin-right: 20px;
    letter-spacing: -0.5px;
}

.find_wrap .form_wrap {
    padding: 40px;
    width: 100%;
}

.login_menu_box {
    display: flex;
    height: 65px;
    width: 100%;
}

.login_menu_box a {
    display: inline-flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: var(--txt_col);
    color: var(--main_btn_col);
    font-size: var(--sub_con_24);
    font-weight: 600;
}

.login_menu_box a.active {
    background-color: #fff;
    color: var(--txt_col);
}

.login_wrap .find_result_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    display: none;
}

.main .wrap_1400 .login_wrap .find_result {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
}

.main .wrap_1400 .login_wrap .find_result p {
    color: var(--txt_col);
    line-height: 1.3;
    font-size: var(--sub_con_24);
        text-align: center;
}

.main .wrap_1400 .login_wrap .find_result p span {
    font-weight: 600;
}

/*로그인, 회원가입*/

/* 오시는길 */
.map_wrap {
    padding-block: 30px;
    border-bottom: 1px solid #CECECE;
}

.map_wrap .map {
    width: 100%;
    height: 450px;
    background-color: #ccc;
}

.add_info_wrap li {
    padding-block: 30px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    gap: 45px;
}

.add_info_wrap li .li_tit {
    min-width: 105px;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-left: 35px;
}

.add_info_wrap li .li_tit img {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: absolute;
    left: 0;
}

.add_info_wrap li .li_tit span {
    font-size: var(--sub_con_19);
    font-weight: 600;
}

.add_info_wrap>li>div:last-child {
    color: var(--txt_gray);
    font-size: 17px;
    width: 100%;
    line-height: 1.5;
    word-break: keep-all;
}

.add_info_wrap .shuttle_area span {
    color: var(--txt_col);
    font-size: 17px;
    font-weight: 500;
}

.add_info_wrap .shuttle_area img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
}

.add_info_wrap .shuttle_way {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 125px;
    margin-block: 30px;
}

.add_info_wrap .shuttle_way::before {
    content: "";
    width: calc(100% - 114px);
    height: calc(100% - 30px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #CECECE;
}

.add_info_wrap .shuttle_way span {
    width: 156px;
    color: var(--txt_light_brown);
    border: 1px solid var(--txt_light_brown);
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    display: inline-block;
    position: absolute;
    background-color: #fff;
    height: 30px;
    line-height: 28px;
}

.add_info_wrap .shuttle_way i.po_top {
    display: inline-block;
    width: 10px;
    height: 17px;
    background-image: url(../images/user/right_arrow.png);
    position: absolute;
    left: 25%;
    top: 15px;
    transform: translateY(-50%);
}

.add_info_wrap .shuttle_way i.po_top:nth-of-type(2) {
    right: 25%;
    left: unset;
}

.add_info_wrap .shuttle_way i.po_bottom {
    display: inline-block;
    width: 10px;
    height: 17px;
    background-image: url(../images/user/right_arrow.png);
    position: absolute;
    right: 25%;
    bottom: 15px;
    transform: translateY(50%) rotate(180deg);
}

.add_info_wrap .shuttle_way i.po_bottom:nth-of-type(4) {
    left: 25%;
    right: unset;
}

.add_info_wrap .shuttle_way span.bg_col {
    color: #fff;
    border: 1px solid var(--txt_light_brown);
    background-color: var(--txt_light_brown);
    width: 113px;
    text-align: center;
    font-weight: 300;
}

.add_info_wrap .shuttle_way span.po_top {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.add_info_wrap .shuttle_way span.po_left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.add_info_wrap .shuttle_way span.po_right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.add_info_wrap .shuttle_way span.po_bottom {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.add_info_wrap .table_ul {
    border-top: 1px solid var(--txt_light_brown);
}

.add_info_wrap .table_ul li {
    height: 40px;
    line-height: 40px;
    align-items: center;
    padding-block: 0;
    gap: 0;
    text-align: center;
    border-bottom: 0;
    flex-direction: row;
}

.add_info_wrap .table_ul li div {
    flex: 1;
    border-bottom: 1px solid #e6e6e6;
    height: 100%;
    border-left: 1px solid #e6e6e6;
}

.add_info_wrap .table_ul li div:last-child {
    border-right: 1px solid #e6e6e6;
}

.add_info_wrap .table_ul li .li_th {
    background-color: #F5F4F4;
    font-weight: 500;
    font-size: 17px;
    color: #191919;

}

.add_info_wrap .table_ul li .li_td {
    font-weight: 400;
    color: #6b6b6b;
    font-size: 17px;
}

.add_info_wrap .table_ul li .li_td.li_th {
    background-color: #fff;
    font-weight: 500;
    color: #191919;
}

.add_info_wrap .table_ul li .li_short {
    max-width: 190px;
}

.add_info_wrap .subway .how_to {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    gap: 10px;
}

.add_info_wrap .subway .how_to .left_space:nth-of-type(1) {
    margin-bottom: 10px;
}

.add_info_wrap .subway .left_space {
    padding-left: 34px;
    position: relative;
    color: #6B6B6B;
    font-size: 17px;
    word-break: keep-all;
}

.add_info_wrap .subway .left_space span {
    background-color: #833EDB;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    border-radius: 50px;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.add_info_wrap .subway .left_space:nth-last-child(2) span {
    background-color: #CEA43A;
}

.add_info_wrap .subway .how_to img {
    display: inline-block;
    margin-inline: 10px 3px;
    vertical-align: middle;
    margin-top: -4px;
}

.add_info_wrap .bus_info_wrap {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    max-width: 845px;
}

.add_info_wrap .bus_info_wrap .bus_info span {
    font-size: var(--sub_con_19);
    color: #6b6b6b;
    font-weight: 400;
}

.add_info_wrap .bus_info_wrap .bus_info span.bus_type {
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    background-color: #248801;
    display: inline-block;
    margin-right: 5px;
}

.add_info_wrap .bus_info_wrap .bus_info span.bus_type._navy {
    background-color: #3556A7;
}

.add_info_wrap .bus_info_wrap .bus_info span.bus_type._blue {
    background-color: #3D7DAD;
}

.add_info_wrap .bus_info_wrap .bus_info span.bus_type._red {
    background-color: #DA353B;
}

.add_info_wrap .bus_info_wrap .bus_info_group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 오시는길 */

/*온라인 기증의사 등록*/
.sign_pad_bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #00000057;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    z-index: 1;
    display: none;
}

.sign_pad_wrap {
    width: 100%;
    max-width: 440px;
    padding: 20px;
    position: relative;
    background-color: #fff;
}

.sign_pad_wrap p {
    font-size: var(--sub_con_20);
    font-weight: 600;
    color: #927E74;
}

.sign_pad_wrap .close_btn {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.sign_pad_wrap .close_btn:hover img {
    filter: brightness(2);
    transition: 0.2s;
}

.sign_pad_wrap .close_btn img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: inline-block;
    transition: 0.2s;
}

.sign_pad {
    width: 100%;
    aspect-ratio: 2/1;
    margin-top: 20px;
    border: 1px solid #927e749c;
}

.sign_pad canvas {
    width: 100%;
}

.sign_pad_wrap .btn_wrap {
    text-align: center;
}

.sign_pad_wrap .sign_ok {
    margin-top: 20px;
    width: 100%;
    max-width: 150px;
    border: 1px solid #A1928B;
    color: #927E74;
    font-size: var(--sub_con_17);
    font-weight: 600;
    height: 40px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sign_pad_wrap .sign_ok:hover {
    background-color: #927e74bd;
    color: #fff;
    transition: 0.2s;
}

.sub_page_tit_wrap.do_form {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
}

.sub_page_tit_wrap.do_form h3 {
    font-size: var(--con_sub_tit);
    font-weight: 600;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
}

.step_box {
    display: flex;
    gap: 10px;
}

.step_box span {
    display: inline-block;
    border: 1px solid var(--txt_light_brown);
    color: #B1B1B1;
    font-size: 17px;
    font-weight: 500;
    border-radius: 50px;
    height: 35px;
    padding-inline: 20px;
    line-height: 31px;
}

.step_box span.active {
    font-weight: 600;
    color: #fff;
    background-color: var(--txt_light_brown);

}

.step_box span.step_pass {
    color: #fff;
    background-color: #CECECE;
    border-color: #CECECE;
}

.testament_info {
    padding-block: 40px 20px;
    border-bottom: 2px solid #927E7480;
}

.testament_info h4 {
    font-weight: 600;
    font-size: var(--con_sub_tit);
    line-height: 1.3;
    text-align: center;
    color: var(--txt_col);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.testament_info .con p {
    font-weight: 400;
    font-size: var(--sub_con_19);
    line-height: 1.6;
    word-break: keep-all;
    margin-bottom: 20px;
}

.testament_info .con b {
    font-size: var(--sub_con_19);
    font-weight: 600;
    text-decoration: underline;

}

.testament_info._center h4 {
    justify-content: center;

}

.testament_info._center p {
    text-align: center;

}

.testament_info._center .con {
    margin-bottom: 40px;
}

.testament_info .info_wrap {
    border-block: 1px solid #CECECE;
    padding-block: 20px;
    text-align: center;
}

.testament_info .info_wrap p {
    font-size: var(--sub_con_19);
}

.testament_info .info_wrap p ._bold {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 24px;
    display: inline-block;
}

.testament_info._last {
    border-bottom: 0;
    margin-bottom: 10px;
    padding-block: 40px 20px;
}

.testament_call {
    margin-top: 30px;
    padding: 30px 40px;
    background: #F5F4F4;
    word-break: keep-all;
}

.testament_call p {
    font-weight: 500;
    font-size: var(--sub_con_19);
    line-height: 1.5;
    word-break: keep-all;
}

.testament_call span {
    font-weight: 600;
    font-size: var(--sub_con_24);
    line-height: 1.5;
    display: inline-block;
    margin-inline: 10px 2px;
}

.testament_call span img {
    vertical-align: sub;
    margin-right: 5px;
}


.donation_form_wrap {
    padding-block: 40px 20px;
    /* border-bottom: 2px solid #927E7480; */
}

.donation_form_wrap form>ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.donation_form_wrap form>ul:not(.relation_form) {
    padding-bottom: 20px;
}


.donation_form_wrap form>ul+ul {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #927E7480;
}

.donation_form_wrap form>ul.relation_form+ul.relation_form {
    border-top: 1px solid #cecece;
    padding-top: 30px;
    margin-top: 30px;
}

.donation_form_wrap form>ul+.form_type_tit {
    margin-top: 10px;
    padding-top: 30px;
    border-top: 2px solid #927E7480;
}

.donation_form_wrap .form_type_tit {
    font-weight: 600;
    font-size: var(--sub_con_24);
    color: #927E74;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 30px;
}

.donation_form_wrap .form_type_tit span {
    color: #ff0000;
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
}

.donation_form_wrap form>ul>li {
    display: flex;
}

.donation_form_wrap .input_wrap {
    display: flex;
    align-items: center;
}

.donation_form_wrap .form_tit {
    min-width: 150px;
    font-weight: 600;
    font-size: var(--sub_con_19);
    margin-right: 40px;
    letter-spacing: -0.5px;
}

.donation_form_wrap label :where(input[type="text"], input[type="password"]) {
    height: 40px;
    padding: 10px 15px;
    border: 1px solid #CECECE;
    font-weight: 400;
    font-size: var(--sub_con_19);
    width: 344px;
    padding: 3px 15px 0px;
    display: inline-block;
}

.donation_form_wrap .form_btn._full {
    max-width: 344px;
    width: 100%;
}

.donation_form_wrap .add_wrap {
    max-width: 528px;
    gap: 10px;
    font-size: 0;
    display: none;
}

.donation_form_wrap .add_wrap input[type="text"] {
    height: 40px;
    padding: 10px 15px;
    border: 1px solid #CECECE;
    font-weight: 400;
    font-size: var(--sub_con_19);
    width: 100%;
    padding: 3px 15px 0px;
    display: inline-block;
    margin-top: 10px;
    color: var(--txt_col);
}

.donation_form_wrap .add_wrap input[type="text"]:first-of-type {
    width: calc(100% - 184px);
    margin-top: 0px;
}

.donation_form_wrap label input::placeholder {
    color: #6B6B6B;
}

.donation_form_wrap .input_deco {
    margin-inline: 30px;
}

.donation_form_wrap .user_ph .input_deco {
    margin-inline: 11px;
}

.donation_form_wrap .religion_wrap .input_wrap {
    width: 100%;
}

.donation_form_wrap .religion_wrap .select_wrap {
    width: 140px;
    margin-right: 10px;
}

.donation_form_wrap .religion_wrap input {
    width: calc(100% - 150px);
    max-width: 380px;
    display: none;
}

.donation_form_wrap .email_wrap .input_deco {
    margin-inline: 11px;
}

.donation_form_wrap .user_code input {
    width: 140px;
}

.donation_form_wrap .user_ph input {
    width: 100px;
}

.donation_form_wrap .email_wrap input {
    width: 153px;
}

.donation_form_wrap .select_wrap {
    width: 90px;
    position: relative;
}

.donation_form_wrap .email_wrap .select_wrap {
    width: 174px;
    margin-right: 10px;
}

.donation_form_wrap .select_wrap .form_selectes_val {
    border: 1px solid #CECECE;
    padding-inline: 10px 25px;
    width: 100%;
    height: 40px;
    background-image: url(../images/user/form_select_icon.png);
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) 50%;
    color: #3B312C;
    text-align: left;
}

.donation_form_wrap .select_wrap button {
    font-weight: 400;
    font-size: var(--sub_con_19);
    color: #6B6B6B;
    cursor: pointer;
}


.donation_form_wrap .select_wrap ul {
    position: absolute;
    top: 40px;
    border: 1px solid #e6e6e6;
    display: none;
    z-index: 1;
    width: 100%;
}

.donation_form_wrap .select_wrap button+ul {
    border-top: 0;
}

.donation_form_wrap .select_wrap ul li {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #e6e6e6;
    background-color: #fff;
    font-size: 16px;

}

.donation_form_wrap .select_wrap ul li+li {
    border-top: 1px solid #e6e6e6;

}

.donation_form_wrap .select_wrap ul li button {
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    padding-inline: 10px;
    text-align: left;
}

:where(.login_form, .donation_form_wrap) form ul li input[id$='_email_txt'] {
    display: none;
}

.donation_form_wrap :where(input, label)+.form_btn {
    margin-left: 10px;
}

.donation_form_wrap .form_btn {
    width: 174px;
    border: 1px solid #A1928B;
    color: #927E74;
    font-size: var(--sub_con_17);
    font-weight: 600;
    height: 40px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sign_chk_wrap {
    display: none;
    width: 174px;
    height: 40px;
    justify-content: space-between;
    align-items: center;
}

.sign_chk_wrap img {
    display: inline-block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.sign_chk_wrap>img {
    height: 100%;
    max-width: calc(100% - 30px);
    aspect-ratio: 3/2;
}

.sign_chk_wrap button {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: #927E74;
    cursor: pointer;
    transition: 0.2s;
}


.sign_chk_wrap button img {
    filter: brightness(10);
    width: 90%;
}

.sign_chk_wrap button:hover {
    background-color: #9b8b82;
    transition: 0.2s;
}

.donation_form_wrap .form_btn:hover {
    background-color: #927e74bd;
    color: #fff;
    transition: 0.2s;
}

.donation_form_wrap .form_btn img {
    transition: 0.2s;
    object-fit: contain;
    height: 17px;
    filter: brightness(1.5);
    vertical-align: baseline;
    margin-left: 3px;
}

.donation_form_wrap .form_btn:hover img {
    filter: brightness(5);
    transition: 0.2s;
}

ul+.donation_wrap {
    margin-top: 20px;
    border-top: 2px solid #927E7480;
}

.donation_wrap {
    padding-block: 20px 40px;
    border-bottom: 2px solid #927E7480;
}

.donation_wrap._last {
    padding-block: 20px;
    border-bottom: 1px solid #CECECE;
    margin-bottom: 20px;
}

.donation_wrap._last .chkbox_wrap {
    border-top: 1px solid #CECECE;
    padding-top: 20px;
}

.donation_wrap._last .chkbox_wrap .p_tit {
    font-weight: 600;
    font-size: var(--sub_con_19);
    margin-right: 20px;
}

.donation_wrap .con_tit {
    font-weight: 600;
    font-size: var(--sub_con_24);
    line-height: 1.5;
    letter-spacing: -0.5px;
    color: #927E74;
    margin-bottom: 20px;
    word-break: keep-all;
}

.donation_wrap .con_tit.left_space span {
    color: #927E74;

}

.donation_wrap .con p {
    font-weight: 400;
    font-size: var(--sub_con_19);
    line-height: 1.6;
    word-break: keep-all;
}

.donation_wrap .con textarea {
    border: 1px solid #CECECE;
    height: 238px;
    padding: 20px;
    width: 100%;
}

.donation_wrap .con .chkbox_wrap {
    display: flex;
    margin-top: 20px;
    gap: 10px;
    align-items: center;
}

.donation_wrap .con .chkbox_wrap p {
    line-height: 1.3;
}

.donation_form_wrap form>ul.relation_form+.form_btn_wrap {
    margin-top: 30px;

}

.form_btn_wrap {
    display: flex;
    justify-content: space-between;
}

.form_btn_wrap._right {
    justify-content: flex-end;
}

.form_btn_wrap._last {
    justify-content: center;
}

.form_btn_wrap .tmp_save {
    display: inline-flex;
    min-width: 150px;
    height: 45px;
    background-color: var(--main_btn_col);
    color: var(--main_btn_txt_col);
    font-weight: 600;
    font-size: var(--sub_con_19);
    transition: 0.2s;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-content: center;
    padding-inline: 30px;
}

.form_btn_wrap .tmp_save:hover {
    background-color: #e6c5a4;
    transition: 0.2s;
}

.dir_btn {
    display: inline-flex;
    gap: 20px;
}

.dir_btn :where(button, a) {
    display: inline-flex;
    height: 45px;
    border: 1px solid var(--txt_col);
    color: var(--txt_col);
    font-weight: 600;
    font-size: var(--sub_con_19);
    min-width: 115px;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-content: center;
}

.dir_btn :where(button, a) :hover {
    color: #fff;
    background-color: #3b312cde;
    transition: 0.2s;
}

/*온라인 기증의사 등록*/

/*게시판*/
.pagination {
    display: flex;
    margin-top: 40px;
    justify-content: center;
}

td.bo_notice {
    font-weight: 600;
}

.pagination a:not(.arrow) {
    font-size: var(--sub_con_19);
    width: var(--pagi_btn);
    height: var(--pagi_btn);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.pagination span.on {
    font-size: var(--sub_con_19);
    color: #fff;
    background-color: var(--txt_col);
    width: var(--pagi_btn);
    height: var(--pagi_btn);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.pagination a.arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--pagi_btn);
    height: var(--pagi_btn);
    background-image: url(../images/user/pagi.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #E6E6E6;
}

.pagination a.arrow.first {
    background-image: url(../images/user/pagi_d.png);
}

.pagination .first+.prev {
    border-left: 0;

}

.pagination a.arrow.next {
    transform: rotate(180deg);
}

.pagination a.arrow.last {
    background-image: url(../images/user/pagi_d.png);
    transform: rotate(180deg);
    border-right: 0;
}

.pagination a.arrow img {
    display: none;
}

.sch_box_wrap {
    display: flex;
    justify-content: flex-end;
    margin-block: 20px;
}

.sch_box_wrap .sch_box {
    display: flex;
}

.sch_box_wrap .sch_box input {
    border: 1px solid #cecece;
    height: 46px;
    width: 300px;
    font-size: var(--sub_con_19);
    padding: 10px;
    color: var(--txt_col);
    border-right: 0;
}

.sch_box_wrap .sch_box input::placeholder {
    color: #6b6b6b;
}

.sch_box_wrap .sch_box button {
    background-color: var(--main_btn_col);
    color: var(--main_btn_txt_col);
    width: 115px;
    height: 46px;
    font-size: var(--sub_con_19);
    font-weight: 500;
    cursor: pointer;
}

.col_no {
    width: 85px;
}

.col_date {
    width: 145px;
}

.col_subject {
    width: calc(100% - 280px);
}

.list_table_wrap table {
    border-top: 1px solid var(--txt_col);
    width: 100%;
    table-layout: fixed;
}

.list_table_wrap table th {
    background-color: #f5f4f4;
    height: 50px;
    border-bottom: 1px solid #cecece;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    font-size: var(--sub_con_19);
    font-weight: 600;
}

.list_table_wrap table td {
    height: 70px;
    border-bottom: 1px solid #cecece;
    font-size: var(--sub_con_19);
    text-align: center;
    padding: 15px;
    vertical-align: middle;
}

.td_subject {
    overflow: hidden;

}

.list_table_wrap table :where(td, th):first-of-type {
    padding-left: 30px;
}

.list_table_wrap table :where(td, th):last-of-type {
    padding-right: 30px;
}

.gallery_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.gallery_list ul li {
    flex: 1 1 30%;
    max-width: calc((100% - 80px)/ 3);
}

.gallery_list ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.gallery_list .con_img_wrap {
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 3 / 2;
    background-color: #CECECE;
    background-image: url(../images/user/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.gallery_list .con_img_wrap img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.gallery_list .con_desc_wrap {
    margin-top: 12px;
    border-block: 1px solid #cecece;
    padding-block: 10px;
}

.gallery_list .con_desc_wrap p {
    font-size: var(--sub_con_19);
    color: #414141;
    font-weight: 500;
    line-height: 1.3;
}

.gallery_list .con_desc_wrap p.con_date {
    font-size: 15px;
    color: #414141;
    font-weight: 400;
    margin-top: 5px;
}

.view_wrap {
    margin-block: 30px;
    border-bottom: 1px solid var(--txt_col);
}

.view_wrap .con_tit {
    background-color: #F5F4F4;
    border-block: 1px solid var(--txt_col);
    padding: 20px 30px;
    line-height: 1.3;
    font-size: var(--sub_con_24);
    color: #414141;
    word-break: keep-all;
}

.view_wrap .con_desc {
    padding: 30px;
    color: #414141;
    font-size: var(--sub_con_19);
    line-height: 1.3;
    word-break: keep-all;
}

.view_wrap .con_date {
    margin-top: 30px;
    font-size: 15px;
    color: #6B6B6B;
}

.view_wrap .con_file {
    border-top: 1px solid #CECECE;
    padding: 20px 30px;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.view_wrap .con_file>span {
    font-weight: 600;
    font-size: var(--sub_con_19);
}

.view_wrap .file_wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

.view_wrap .con_file .file_down {
    display: inline-block;
    font-weight: 400;
    font-size: var(--sub_con_19);
    word-break: keep-all;
    line-height: 1.3;
}

.view_wrap .con_file .file_down img {
    display: inline-block;
    object-fit: contain;
    width: 25px;
    vertical-align: sub;
    transition: 0.2s;
    margin-left: 3px;
}

.view_wrap .con_file .file_down:hover {
    text-decoration: underline;
}

.view_wrap .con_file .file_down:hover img {
    filter: brightness(0.7);
    transition: 0.2s;
}

.page_wrap {
    display: flex;
    flex-direction: column;
    border-block: 1px solid #cecece;
}

.page_wrap>a {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    font-size: var(--sub_con_19);
    padding-inline: 30px;
}

.page_wrap>a+a {
    border-top: 1px solid #cecece;
}

.page_wrap>a span {
    font-weight: 600;
    font-size: var(--sub_con_19);
    color: var(--txt_col);
    min-width: 55px;
}

.page_wrap>a p {
    font-weight: 400;
}

.page_wrap>a:hover p {
    font-weight: 500;
    transition: 0.2s;
}

.page_wrap .icon_wrap {

    display: inline-block;
    min-width: 14px;
    height: 12px;
    margin-inline: 5px 25px;
}

.page_wrap .next_page .icon_wrap img {
    transform: rotate(-90deg);
}

.page_wrap .icon_wrap img {
    display: inline-block;
    width: 100%;
    object-fit: contain;
    transform: rotate(90deg);
    vertical-align: super;
}

/*게시판*/

/*마이페이지*/
.donate_link_wrap {
    display: inline-flex;
}

.donate_link_wrap a {
    color: #927E74;
}

.donate_link_wrap a:where(:hover, .active) {
    color: #A06C4B;
    font-weight: 500;
}

.donate_link_wrap span.divider {
    color: #927E74;
    margin-inline: 5px;
}

.sub_page_tit_wrap.mypage_form {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    align-items: center;
}

.donation_form_wrap.mypage_form .add_wrap {
    display: inline;
}

input:read-only {
    background-color: #e6e6e6;
    color: #555;
}

.mypage_form .pw_wrap {
    flex-direction: column;
}

.mypage_form #user_email_txt {
    display: inline-block;
}

.pw_chk_info {
    opacity: 0;
}

.form_view_wrap {
    border-bottom: 2px solid #927E7480;
    padding-block: 40px;
}

.form_view_wrap ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form_view_wrap ul li {
    display: flex;
    align-items: baseline;
}

.form_view_wrap ul li .view_tit {
    font-size: var(--sub_con_19);
    font-weight: 600;
    color: var(--txt_col);
    min-width: 150px;
    margin-right: 40px;
}

.form_view_wrap ul li .view_ans {
    display: flex;
    align-items: center;
    gap: 30px;
}

.form_view_wrap ul li .view_ans .zip_code {
    color: #6B6B6B;
}

.form_view_wrap ul li.email_wrap .view_ans {
    display: flex;
    gap: 10px;
}

.form_view_wrap ul li .view_ans._col {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.form_view_wrap ul li .view_ans span {
    color: var(--txt_col);
    font-size: var(--sub_con_19);
}

.form_view_wrap ul li.name_wrap .view_ans_span {
    min-width: 80px;
}

.form_view_wrap ul li .view_ans span.form_btn {
    width: 174px;
    background-color: #CECECE;
    color: #fff;
    font-size: var(--sub_con_17);
    height: 40px;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form_view_wrap ul+.view_type_tit {
    margin-top: 35px;
    padding-top: 30px;
    border-top: 2px solid #927E7480;
}

.form_view_wrap .view_type_tit {
    font-weight: 600;
    font-size: var(--sub_con_24);
    color: #927E74;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 30px;
}

.form_view_wrap ul+ul {
    border-top: 1px solid #cecece;
    padding-top: 30px;
    margin-top: 30px;
}
.form_view_wrap .sign_wrap{
    width: 174px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #927E7480;
}
.form_view_wrap .sign_wrap img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: inline-block;
}
.d_condition{
    display: inline-block;
    font-size: 16px;
    padding: 5px 10px;
    background-color: #999;
    border-radius: 5px;
    color: #fff;
    vertical-align: bottom;
    margin-left:8px;
    font-weight: 500;
}
.state_deny{
    background-color: #a58575;
}
.state_complete{
    background-color: var(--main_btn_txt_col);
}
/*마이페이지*/

/*커뮤니티*/
/*커뮤니티*/

/*온라인 추모관*/
.main.online {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.main.online .wrap_1400 {
    justify-content: flex-start;
    padding-top: calc(var(--con_sub_tit_mt) - 50px);
}

.online_wrap {
    width: 100%;
    max-width: 480px;
    padding: 50px;
    background-color: #120b07a9;
    border: 1px solid #82643b;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    font-family: var(--noto_serif);
}

.online_wrap h2 {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.online_wrap h2 span {
    font-size: var(--sub_con_30);
    color: var(--main_btn_col);
    font-family: var(--noto_serif);
    font-weight: 600;
    margin-top: -6px;
    margin-left: 7px;
}

.online_wrap h2 img {
    width: 44px;
    height: 42px;
    display: inline-block;
    object-fit: contain;
}

.online_wrap form {
    width: 100%;

}

.online_wrap form>ul {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.online_wrap form>ul li {
    display: flex;
    width: 100%;
}

.online_wrap form>ul li:not(.radio_wrap) label {
    display: flex;
    align-items: center;
    width: 100%;
}

.online_wrap form .form_tit {
    display: inline-block;
    min-width: 100px;
    font-size: var(--sub_con_18);
    font-family: var(--pretendard);
    font-weight: 500;
    color: #fff;
}

.online_wrap form input[type="text"] {
    background-color: #fff;
    border: none;
    height: 46px;
    padding-inline: 10px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--pretendard);
    width: calc(100% - 100px);
}

.chk_span {
    display: inline-block;
    color: #fff;
    font-size: var(--sub_con_18);
}

.radio_wrap :where(input[type="checkbox"], input[type="radio"]) {
    display: none;
}

.radio_wrap :where(input[type="checkbox"], input[type="radio"])+em {
    width: 14px;
    height: 14px;
    background: #fff;
    position: relative;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 30px;
}

.radio_wrap label+label {
    margin-left: 20px;
}

.radio_wrap :where(input[type="checkbox"], input[type="radio"]):checked+em::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 2px;
    left: 2px;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 30px;
    background-color: #120b07;
}

.online_wrap .submit_btn {
    display: inline-flex;
    width: 100%;
    height: 46px;
    background-color: var(--main_btn_col);
    color: var(--main_btn_txt_col);
    font-weight: 600;
    font-size: var(--sub_con_17);
    transition: 0.2s;
    cursor: pointer;
    transition: 0.2s;
    align-items: center;
    justify-content: center;
}

.online_memorial_wrap {
    width: 100%;
    max-width: 990px;
    padding: 30px 50px 50px;
    background-color: #120b07a9;
    border: 1px solid #82643b;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    font-family: var(--noto_serif);
}

.online_memorial_wrap .tit_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
    width: 100%;
}

.online_memorial_wrap h2 {
    display: flex;
    align-items: center;
    gap: 5px;
}

.online_memorial_wrap h2 img {
    width: 44px;
    height: 42px;
    display: inline-block;
    object-fit: contain;
    filter: brightness(1.1);
}

.online_memorial_wrap h2 span {
    font-size: var(--sub_con_30);
    color: var(--main_btn_col);
    font-family: var(--noto_serif);

    font-weight: 500;
}

.online_memorial_wrap .do_info {
    display: inline-flex;
    gap: 15px;
}

.online_memorial_wrap .do_info>div {
    font-size: var(--sub_con_20);
    color: var(--main_btn_col);
}

.online_memorial_wrap .do_info>div span {
    font-weight: 600;
    color: var(--main_btn_col);
}

.online_memorial_wrap .memorial_con {
    display: flex;
    gap: 25px;
}

.online_memorial_wrap .gall_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 330px;
}

.online_memorial_wrap .main_img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 6 / 6.7;
    padding: 5px 10px;
    width: 100%;
}

.online_memorial_wrap .main_img img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.online_memorial_wrap .main_img::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../images/user/frame.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

.online_memorial_wrap .gall_preview {
    display: flex;
    gap: 5px;
    width: 100%;
}

.online_memorial_wrap .gall_preview div {
    flex: 1;
    overflow: hidden;
}

.online_memorial_wrap .gall_wrap .btn_wrap {
    display: flex;
    gap: 5px;
    padding-inline: 20px;
    justify-content: center;
    width: 100%;
}

.online_memorial_wrap .gall_wrap .btn_wrap :where(a, button) {
    display: inline-flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    color: var(--tone_down_gold);
    border: 1px solid var(--tone_down_gold);
    padding: 7px;
}

.online_memorial_wrap .msg_wrap {
    display: flex;
    flex-direction: column;
    width: 540px;
    justify-content: space-between;
}

.online_memorial_wrap .msg_wrap>div {
    width: 100%;
}

.online_memorial_wrap .msg_wrap.list_none {
    justify-content: center;
}

.online_memorial_wrap .msg_wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.online_memorial_wrap .msg_wrap ul li {
    display: inline-block;
    max-width: calc((100% - 15px) / 2);
    flex: 1 1 45%;
}

.online_memorial_wrap .msg_wrap ul li:hover a {
    border: 1px solid var(--main_btn_col);
    background-color: #ffffff15;
    transition: 0.2s;
}

.online_memorial_wrap .msg_wrap ul li a {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid var(--tone_down_gold);
    padding: 20px 30px;
    align-items: flex-start;
    transition: 0.2s;
    line-height: 1.2;
}

.online_memorial_wrap .msg_wrap ul li .ellipsis {
    margin-bottom: 10px;
    font-size: var(--sub_con_18);
    color: #fff;
    font-weight: 400;
}

.online_memorial_wrap .msg_wrap ul li p {
    color: var(--tone_down_gold);
    font-size: var(--sub_con_18);
}

.om_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
}

.om_pagination :where(a, span) {
    border: 1px solid var(--main_btn_col);
    width: 18px;
    height: 18px;
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
}

.om_pagination :where(a, span).on {
    border: 1px solid var(--main_btn_col);
    background-color: var(--main_btn_col);
}

.online_memorial_wrap .msg_wrap .btn_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.online_memorial_wrap .msg_wrap.list_none .btn_wrap {
    margin-top: 0;
}
.online_memorial_wrap .msg_wrap .btn_wrap p {
    color: #fff;
    font-size: var(--sub_con_18);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
}

.online_memorial_wrap .msg_wrap .btn_wrap p span {
    color: var(--main_btn_col);
    font-weight: 500;
}

.online_memorial_wrap .write_letter_btn {
    font-size: var(--sub_con_18);
    color: var(--txt_col);
    background-color: var(--main_btn_col);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    height: 40px;
    max-width: 180px;
    width: 100%;
    transition: 0.2s;
    cursor: pointer;
}
.online_memorial_wrap :where(a, button).go_list_btn {
    font-size: var(--sub_con_18);
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    height: 40px;
    max-width: 180px;
    width: 100%;
    transition: 0.2s;
    cursor: pointer;
    background-color: var(--main_btn_txt_col);
}
.online_memorial_wrap .write_letter_btn:hover {
    background-color: #e6c5a4;
    transition: 0.2s;
}
.online_memorial_wrap .go_list_btn:hover {
    background-color:#604d40;
    transition: 0.2s;
}
.online_memorial_wrap .msg_form {
    width: 100%;
}
.online_memorial_wrap .msg_form ul{
    display: flex;
    flex-direction: column;
}
.online_memorial_wrap .msg_wrap .msg_form ul li{
    border: 1px solid #d2b08c;
    width: 100%;
    flex: 100%;
    max-width: unset;
}
.online_memorial_wrap .msg_wrap .msg_form ul li label{
    display: inline-flex;
    align-items: baseline;
    padding: 10px 10px 10px 20px;
    width: 100%;
}
.online_memorial_wrap .msg_form ul li:first-child .form_tit{
    border-right: 1px solid #fff;
}
.online_memorial_wrap .msg_form ul li:first-child input{
    height: 30px;
    padding-left: 15px;
    background-color: transparent;
    border: none;
    width: 100%;
    display: block;
    color: #fff;
    font-weight: 400;
    font-size: var(--sub_con_18);
}
.online_memorial_wrap .msg_form ul .form_tit{
    min-width: 80px;
    display: inline-block;
    color: #fff;
    font-size: var(--sub_con_20);
    text-align: center;
        padding-right: 20px;
}
.online_memorial_wrap .msg_form ul textarea{
    height: 278px;
    width: 100%;
    padding: 10px 15px;
    resize: none;
}






/*온라인 추모관*/

@media(max-width: 1400px) {

    /*공통 1400px*/
    /*공통 1400px*/

    /*로그인, 회원가입 1400px*/
    /*로그인, 회원가입 1400px*/

    /* 오시는길 1400px*/
    .add_info_wrap li {
        gap: 20px;
        flex-direction: column;
    }

    .add_info_wrap li .li_tit {
        min-width: unset;
        justify-content: flex-start;
        padding-left: 0;
    }

    .add_info_wrap li .li_tit img {
        position: unset;
        margin-right: 6px;
    }

    .add_info_wrap .bus_info_wrap .bus_info span.bus_type {
        height: 28px;
        line-height: 26px;
        font-size: 16px;
    }

    .add_info_wrap .bus_info_wrap .bus_info span {
        font-size: 17px;
    }

    .add_info_wrap .bus_info_wrap .bus_info_group {
        gap: 15px;
    }

    /* 오시는길 1400px*/

    /*온라인 기증의사 등록 1400px*/
    /*온라인 기증의사 등록 1400px*/

    /*게시판 1400px*/
    /*게시판 1400px*/

    /*마이페이지 1400px*/
    /*마이페이지 1400px*/

    /*커뮤니티 1400px*/
    /*커뮤니티 1400px*/


    /*온라인 추모관 1400px*/
    /*온라인 추모관 1400px*/

}

@media(max-width: 1024px) {

    /*공통 1024px*/
    :root {
        --con_sub_tit_mt: 60px;
        --con_sub_tit_bo: 32px;
        --con_sub_tit: 26px;
        --sub_con_30: 26px;
        --sub_con_28: 24px;
        --sub_con_24: 21px;
        --sub_con_20: 18px;
        --sub_con_19: 17px;
        --sub_con_18: 17px;
        --sub_con_17: 17px;

        --noto_serif: "Noto Serif KR", serif;
        --pretendard: "Pretendard Variable", Pretendard, sans-serif;
    }

    .D_only {
        display: none;
    }

    .only_M {
        display: revert;
    }

    .chkbox_wrap input[type="checkbox"]+em {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }

    .chkbox_wrap label+label {
        margin-left: 15px;
    }

    .chkbox_wrap input[type="checkbox"]:checked+em::before {
        height: 16px;
        top: 3px;
        left: 1px;
    }

    .sec_pad {
        padding-bottom: 60px;
    }

    /*공통 1024px*/

    /*로그인, 회원가입 1024px*/
    .login_wrap h2 {
        margin-bottom: 25px;
        max-width: 300px;
    }

    .login_wrap.donation_form_wrap .form_tit {
        min-width: 120px;
        margin-right: 20px;
    }

    .login_wrap p.form_info {
        margin-left: 145px;
    }

    .login_wrap.donation_form_wrap .default_wrap .form_btn {
        width: 140px;
    }

    .find_wrap.donation_form_wrap form>ul {
        padding-bottom: 10px;
    }

    .find_wrap.donation_form_wrap .submit_btn_wrap {
        margin-top: 0;
    }

    /*로그인, 회원가입 1024px*/

    /* 오시는길 1024px*/
    .add_info_wrap>li>div:last-child {
        font-size: 16px;
    }

    .add_info_wrap .shuttle_way span {
        font-size: 16px;
    }

    .add_info_wrap .table_ul li .li_th {
        font-size: 16px;
    }

    .add_info_wrap .table_ul li .li_td {
        font-size: 17px;
    }

    .add_info_wrap .subway .left_space {
        font-size: 16px;
    }

    .add_info_wrap .bus_info_wrap {
        flex-direction: column;
    }

    .add_info_wrap .bus_info_wrap .bus_info_group {
        flex-direction: row;
    }

    .add_info_wrap .bus_info_wrap .bus_info {
        flex: 1;
    }

    .add_info_wrap .bus_info_wrap .bus_info span.bus_type {
        width: 50px;
    }

    .add_info_wrap .bus_info_wrap .bus_info span {
        font-size: 16px;
    }

    .add_info_wrap .bus_info_wrap .bus_info span.bus_type {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
    }

    .add_info_wrap .subway .how_to img {
        display: inline-block;
        margin-inline: 10px 3px;
        vertical-align: middle;
        margin-top: -2px;
        width: 8px;
    }

    /* 오시는길 1024px*/

    /*온라인 기증의사 등록 1024px*/
    .testament_info h4 {
        margin-bottom: 20px;
    }

    .testament_info h4 img {
        object-fit: contain;
        width: 24px;
    }

    /*온라인 기증의사 등록 1024px*/

    /*게시판 1024px*/
    .col_no {
        width: 55px;
    }

    .col_date {
        width: 115px;
    }

    .col_subject {
        width: calc(100% - 180px);
    }

    .list_table_wrap table {
        border-top: 1px solid var(--txt_col);
        width: 100%;
        table-layout: fixed;
    }

    .list_table_wrap table th {
        background-color: #f5f4f4;
        height: 45px;
        border-bottom: 1px solid #cecece;
        padding: 5px;
        text-align: center;
        vertical-align: middle;
    }

    .list_table_wrap table td {
        height: 50px;
        border-bottom: 1px solid #cecece;
        font-size: var(--sub_con_19);
        text-align: center;
        padding: 5px;
        vertical-align: middle;
    }

    .td_subject {
        overflow: hidden;

    }

    .list_table_wrap table :where(td, th):first-of-type {
        padding-left: 10px;
    }

    .list_table_wrap table :where(td, th):last-of-type {
        padding-right: 10px;
    }

    .gallery_list ul {
        gap: 40px 20px;
    }

    .gallery_list ul li {
        max-width: calc((100% - 40px) / 3);
    }

    .view_wrap .con_tit {
        padding: 15px 20px;
    }

    .view_wrap .con_desc {
        padding: 20px;
    }

    .view_wrap .con_file {
        padding: 20px 20px;
    }

    .page_wrap>a {
        padding-inline: 10px;
    }

    .view_wrap .con_file .file_down img {
        width: 20px;
    }

    .page_wrap>a {
        width: 100%;
        height: 50px;
    }

    /*게시판 1024px*/

    /*마이페이지 1024px*/
    /*마이페이지 1024px*/

    /*커뮤니티 1024px*/
    /*커뮤니티 1024px*/


    /*온라인 추모관 1024px*/
    .main.online .wrap_1400 {
        padding-top: calc(var(--con_sub_tit_mt) + 20px);
    }

    .online_memorial_wrap {
        padding: 30px 30px 40px;
    }

    .online_memorial_wrap .main_img {
        min-width: 250px;
    }

    .online_memorial_wrap .memorial_con {
        gap: 15px;
        width: 100%;
    }

    .online_memorial_wrap .gall_wrap {
        width: 270px;
    }

    .online_memorial_wrap .msg_wrap {
        display: flex;
        flex-direction: column;
        width: calc(100% - 285px);
        justify-content: space-between;
    }

    .online_memorial_wrap .msg_wrap ul li a {
        padding: 15px;
    }

    /*온라인 추모관 1024px*/
}

@media(max-width: 768px) {

    /*공통 768px*/
    :root {
        --con_sub_tit_mt: 50px;
        --con_sub_tit_bo: 26px;
        --con_sub_tit: 22px;
        --sub_con_30: 24px;
        --sub_con_28: 22px;
        --sub_con_24: 19px;
        --sub_con_20: 16px;
        --sub_con_19: 16px;
        --sub_con_18: 16px;
        --sub_con_17: 16px;
        --noto_serif: "Noto Serif KR", serif;
        --pretendard: "Pretendard Variable", Pretendard, sans-serif;
    }

    .only_768 {
        display: revert;
    }

    .sec_pad {
        padding-bottom: 40px;
    }

    /*공통 768px*/

    /*로그인, 회원가입 768px*/
    .main.login .wrap_1400 {
        min-height: calc(100vh - var(--header_h));
        height: auto;
        padding-top: 60px;
    }

    .main .wrap_1400 .login_wrap .find_tit {
        margin-bottom: 15px;
    }

    .login_wrap.donation_form_wrap form ul li.default_wrap {
        align-items: flex-end;
    }

    .login_wrap.donation_form_wrap form ul li.id_wrap label {
        width: calc(100% - 150px);
    }

    .login_wrap p.form_info {
        margin-left: 0;
    }

    .login_wrap.donation_form_wrap .input_wrap {
        width: 100%;
    }

    .login_wrap.donation_form_wrap form ul li.default_wrap input {
        width: 100%;
    }

    .find_wrap .form_wrap {
        padding: 30px 20px;
    }

    .login_menu_box {
        height: 50px;
    }

    /*로그인, 회원가입 768px*/

    /* 오시는길 768px*/
    .add_info_wrap li {
        gap: 15px;
    }

    .add_info_wrap li .li_tit span {
        font-size: 17px;
    }

    .add_info_wrap .bus_info_wrap .bus_info_group {
        flex-direction: column;
        gap: 10px;
    }

    .add_info_wrap .bus_info_wrap {
        display: flex;
        gap: 10px;
    }

    .add_info_wrap .subway .how_to img {
        margin-inline: 5px 2px;
        vertical-align: middle;
        margin-top: -3px;
        width: 8px;
    }

    /* 오시는길 768px*/

    /*온라인 기증의사 등록 768px*/
    .sub_page_tit_wrap.do_form {
        align-items: center;
    }

    .step_box span {
        font-size: 15px;
        padding-inline: 12px;
    }

    .testament_info {
        padding-block: 20px 20px;
    }

    .testament_info h4 {
        margin-bottom: 10px;
    }

    .donation_form_wrap form>ul>li {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .donation_form_wrap .input_wrap {
        flex-wrap: wrap;
    }

    .donation_form_wrap .form_tit {
        margin-right: 10px;
        width: 100%;
        margin-bottom: 10px;
    }

    .donation_form_wrap .input_deco {
        margin-inline: 10px !important;
    }

    .donation_form_wrap label :where(input[type="text"], input[type="password"]) {
        width: 100%;
    }

    .form_btn_wrap .tmp_save {
        min-width: 120px;
        height: 40px;
    }

    .dir_btn {
        gap: 10px;
    }

    .dir_btn button {
        height: 40px;
        min-width: 80px;
    }

    .testament_call span img {
        object-fit: contain;
        width: 22px;
    }

    .donation_wrap .con .chkbox_wrap {
        gap: 5px;
    }

    .testament_call {
        margin-top: 10px;
        padding: 15px 25px;
    }

    .testament_call span {
        margin-inline: 0;
    }

    .dir_btn :where(button, a) {
        height: 40px;
        min-width: 70px;
    }

    /*온라인 기증의사 등록 768px*/

    /*게시판 768px*/
    .sch_box_wrap .sch_box input {
        height: 40px;
        width: 250px;
    }

    .sch_box_wrap .sch_box button {
        height: 40px;
        width: 95px;
    }

    .gallery_list ul li {
        flex: 1 1 50%;
        max-width: calc((100% - 20px) / 2);
    }

    /*게시판 768px*/

    /*마이페이지 768px*/
    .form_view_wrap {
        padding-block: 20px;
    }

    .form_view_wrap ul li .view_tit {
        font-size: var(--sub_con_19);
        font-weight: 600;
        color: var(--txt_col);
        min-width: 120px;
        margin-right: 20px;
    }

    .form_view_wrap ul li .view_ans {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .form_view_wrap ul li.email_wrap .view_ans {
        display: flex;
        gap: 10px;
    }

    .form_view_wrap ul li .view_ans._col {
        flex-direction: column;
        align-items: flex-start;
    }

    .form_view_wrap ul li .view_ans span {
        color: var(--txt_col);
        font-size: var(--sub_con_19);
    }

    .form_view_wrap ul li.name_wrap .view_ans_span {
        min-width: 40px;
    }

    .form_view_wrap ul li .view_ans span.form_btn {
        width: 150px;
        height: 35px;
    }

    .form_view_wrap ul+ul {
        border-top: 1px solid #cecece;
        padding-top: 20px;
        margin-top: 15px;
    }

    /*마이페이지 768px*/

    /*커뮤니티 768px*/
    /*커뮤니티 768px*/

    /*온라인 추모관 768px*/
    .main.online .wrap_1400 {
        padding-top: calc(var(--con_sub_tit_mt));
        height: unset;
    }

    .online_wrap {
        padding: 30px 25px;
    }

    .online_wrap h2 {
        margin-bottom: 20px;
    }

    .online_wrap h2 img {
        width: 38px;
        height: 36px;
    }

    .online_wrap form>ul {
        gap: 15px;
    }

    .online_wrap form input[type="text"] {
        height: 40px;
        width: calc(100% - 90px);
    }

    .online_wrap form .form_tit {
        display: inline-block;
        min-width: 90px;
    }

    .online_wrap .submit_btn {
        height: 40px;
    }

    .online_memorial_wrap .tit_wrap {
        flex-direction: column;
        gap: 15px;
    }

    .online_memorial_wrap h2 img {
        width: 38px;
        height: 36px;
    }

    .online_memorial_wrap .memorial_con {
        gap: 30px;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .online_memorial_wrap .gall_wrap {
        width: 100%;
        max-width: 340px;
    }

    .online_memorial_wrap .msg_wrap {
        width: 100%;
    }

    .online_memorial_wrap .do_info {
        gap: 7px;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 330px;
        margin-top: 20px;
    }

    /*온라인 추모관 768px*/
}

@media(max-width: 640px) {

    /*공통 640px*/
    :root {
        --con_sub_tit_mt: 26px;
        --con_sub_tit_bo: 24px;
        --con_sub_tit: 21px;
        --sub_con_30: 22px;
        --sub_con_28: 20px;
        --sub_con_24: 18px;
        --sub_con_20: 16px;
        --sub_con_19: 16px;
        --sub_con_17: 16px;
        --noto_serif: "Noto Serif KR", serif;
        --pretendard: "Pretendard Variable", Pretendard, sans-serif;
    }

    /*공통 640px*/

    /*로그인, 회원가입 640px*/
    .donation_form_wrap.find_wrap .email_wrap input {
        width: 125px;
    }

    .find_wrap.donation_form_wrap .email_wrap .select_wrap {
        width: 135px;
    }

    /*로그인, 회원가입 640px*/

    /* 오시는길 640px*/
    .map_wrap .map {
        height: 250px;
    }

    .add_info_wrap .shuttle_way i.po_top {
        left: 22%;
    }

    .add_info_wrap .shuttle_way i.po_top:nth-of-type(2) {
        right: 22%;
    }

    .add_info_wrap .shuttle_way i.po_bottom {
        right: 22%;
    }

    .add_info_wrap .shuttle_way i.po_bottom:nth-of-type(4) {
        left: 22%;
    }

    /* 오시는길 640px*/
    /*온라인 기증의사 등록 640px*/
    .sub_page_tit_wrap.do_form {
        padding-bottom: 25px;
        gap: 20px;
        flex-direction: column;
    }

    .donation_form_wrap .input_wrap {
        width: 100%;
    }

    .donation_form_wrap .add_wrap input[type="text"]:first-of-type {
        width: calc(100% - 136px);
    }

    .donation_form_wrap .name_wrap .input_wrap {
        width: calc(100% - 135px);
    }

    .donation_wrap .con .chkbox_wrap {
        align-items: flex-start;
    }

    .step_box span {
        font-size: 15px;
        height: 32px;
        line-height: 28px;
    }

    .donation_form_wrap .form_btn {
        width: 125px;
    }

    .donation_form_wrap .email_wrap input {
        width: 135px;
    }

    .donation_form_wrap .email_wrap .select_wrap {
        width: 145px;
    }

    .donation_form_wrap .input_deco {
        margin-inline: 5px !important;
    }

    .donation_wrap._last .con .chkbox_wrap {
        align-items: center;
    }

    /*온라인 기증의사 등록 640px*/

    /*게시판 640px*/
    .view_wrap .con_tit {
        padding: 15px 10px;
    }

    .view_wrap .con_desc {
        padding: 20px 10px;
    }

    .view_wrap .con_file {
        padding: 20px 10px;
    }

    .page_wrap .icon_wrap {
        margin-inline: 2px 15px;
    }

    .page_wrap>a span {
        min-width: 50px;
    }

    .view_wrap .con_file {
        flex-direction: column;
    }

    .view_wrap .file_wrap {
        gap: 5px;
    }

    /*게시판 640px*/

    /*마이페이지 640px*/
    .sub_page_tit_wrap.mypage_form {
        padding-bottom: 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .donate_link_wrap span.divider {
        margin-inline: 0;
    }

    .donation_form_wrap.mypage_form form>ul {
        padding-bottom: 0;
    }

    .donation_form_wrap.mypage_form {
        padding-block: 20px 10px;
    }

    .mypage_form+.form_btn_wrap {
        margin-top: 20px;
    }

    /*마이페이지 640px*/

    /*커뮤니티 640px*/
    /*커뮤니티 640px*/

    /*온라인 추모관 640px*/
    .online_wrap h2 img {
        width: 32px;
        height: 30px;
    }

    .online_wrap h2 span {
        margin-top: -4px;
    }

    .online_memorial_wrap h2 img {
        width: 32px;
        height: 30px;
    }

    .online_memorial_wrap h2 span {
        margin-top: -4px;
        font-weight: 700;
    }

    .online_memorial_wrap .msg_wrap ul li {
        max-width: 100%;
        flex: 100%;
    }
    .online_memorial_wrap .msg_wrap .msg_form ul li label {
        flex-direction: column;
        padding: 10px;
    }
    .online_memorial_wrap .msg_form ul .form_tit {
        margin-bottom: 10px;
        text-align: left;
    }
    .online_memorial_wrap .msg_form ul li:first-child .form_tit {
        border-right: 0;
        position: relative;
    }
    .online_memorial_wrap .msg_form ul li:first-child input {
        padding-left: 0;
    }
    .online_memorial_wrap .msg_form ul textarea {
        height: 150px;
        width: 100%;
        padding: 2px 5px;
    }
    /*온라인 추모관 640px*/
}

@media(max-width: 500px) {
    .none_500 {
        display: none;
    }

    /*로그인, 회원가입 500px*/
    .login_wrap {
        padding: 40px 30px 50px;
    }

    .login_wrap.donation_form_wrap .email_wrap .select_wrap {
        width: 100%;
    }

    .login_wrap h2 {
        max-width: 220px;
    }

    .login_wrap form ul li {
        height: 40px;
    }

    .login_wrap .submit_btn {
        height: 40px;
    }

    /*로그인, 회원가입 500px*/
    /* 오시는길 500px*/

    .add_info_wrap .shuttle_way i.po_top {
        left: 20%;
    }

    .add_info_wrap .shuttle_way i.po_top:nth-of-type(2) {
        right: 20%;
    }

    .add_info_wrap .shuttle_way i.po_bottom {
        right: 20%;
    }

    .add_info_wrap .shuttle_way i.po_bottom:nth-of-type(4) {
        left: 20%;
    }

    .login_wrap.donation_form_wrap form ul li.id_wrap label {
        width: calc(100% - 100px);
    }

    .login_wrap.donation_form_wrap .default_wrap .form_btn {
        width: 90px;
    }

    .login_wrap.donation_form_wrap .user_ph input {
        width: calc((100% - 112px) / 2);
    }

    .login_wrap.donation_form_wrap .select_wrap {
        width: 70px;
    }

    /* 오시는길 500px*/
    /*온라인 기증의사 등록 500px*/

    .donation_form_wrap .name_wrap .input_wrap {
        width: 100%;
    }

    .donation_form_wrap .name_wrap .form_btn {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }

    .donation_form_wrap .input_deco {
        margin-inline: 7px !important;
    }

    .donation_form_wrap .select_wrap {
        width: 80px;
        position: relative;
    }

    .donation_form_wrap .email_wrap .select_wrap {
        width: 142px;
        margin-right: 0;
    }

    .donation_form_wrap .email_wrap .select_wrap {
        width: 100%;
        margin-right: 0;
        margin-block: 10px;
    }

    .donation_form_wrap .email_wrap input {
        width: calc(100% - 30px);
    }

    .donation_form_wrap .email_wrap input._last {
        width: 100%;
    }

    .donation_wrap._last .con .chkbox_wrap {
        flex-wrap: wrap;
    }

    .donation_wrap._last .con .chkbox_wrap .p_tit {
        width: 100%;
    }

    .donation_form_wrap .form_btn._full {
        max-width: unset;
    }

    .testament_info h4 img {
        width: 22px;
    }

    /*온라인 기증의사 등록 500px*/

    /*게시판 500px*/
    .col_date {
        width: 95px;
    }

    .sch_box_wrap .sch_box {
        width: 100%;
    }

    .sch_box_wrap .sch_box input {
        width: calc(100% - 90px);
    }

    .list_table_wrap table th {
        font-size: 15px;
    }

    .list_table_wrap table td {
        font-size: 15px;

    }

    .list_table_wrap table :where(td, th):first-of-type {
        padding-left: 5px;
    }

    .list_table_wrap table :where(td, th):last-of-type {
        padding-right: 5px;
    }

    .gallery_list ul {
        gap: 20px 10px;
    }

    .gallery_list ul li {
        flex: 1 1 50%;
        max-width: calc((100% - 10px) / 2);
    }

    .gallery_list .con_desc_wrap {
        margin-top: 7px;
        padding-block: 7px;
    }

    .gallery_list .con_desc_wrap p {
        font-size: 15px;
    }

    /*게시판 500px*/

    /*마이페이지 500px*/
    .form_view_wrap ul li {
        flex-direction: column;
        gap: 8px;
    }

    .form_view_wrap ul li .view_ans._col {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    /*마이페이지 500px*/

    /*온라인 추모관 500px*/
    .online_wrap form>ul {
        gap: 20px;
    }

    .online_wrap form>ul li {
        flex-wrap: wrap;
        gap: 12px;
    }

    .online_wrap form>ul li:not(.radio_wrap) label {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .online_wrap form input[type="text"] {
        width: calc(100%);
    }

    .radio_wrap .form_tit {
        flex: 100%;
    }

    .online_memorial_wrap .do_info {
        margin-top: 12px;
    }

    .online_memorial_wrap {
        padding: 30px 15px 40px;
    }

    .online_memorial_wrap .gall_wrap {
        justify-content: center;
        align-items: center;
    }

    .online_memorial_wrap .gall_wrap .main_img {
        /* max-width: 250px; */
        min-width: unset;
    }

    /*온라인 추모관 500px*/
}