/* *******************************************************
 * filename : contents.css
 * description : 기본 레이아웃 및 컨텐츠 CSS
 * date : 2023-06-10
******************************************************** */

/* login */
/*=======================================================================================*/
.login_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.login_form {
    width: 400px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: #fff;
    padding: 10px 0 20px;
}

.login_form .contact {
    text-align: center;
}

.login_form .contact i {
    display: inline-block;
    vertical-align: middle;
}

.login_form .contact span {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    margin-right: 5px;
}

.login_form .contact em {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #cedde2;
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
    padding: 0 10px;
}

.login_form .inner {
    padding: 60px 40px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e4e4e4;
}

.login_form .inner h3 {
    text-align: center;
}

.login_form .inner h3 img {
    width: 156px;
    margin-bottom: 10px;
}

.login_form .inner .desc {
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #889094;
}

.login_form .inner .form_element_wrap {
    margin-bottom: 8px;
}

.login_form .inner .lost_password {
    margin-bottom: 10px;
}

.login_form .inner .btn {
    display: block;
    width: 100%;
    border-radius: 10px;
    height: 36px;
    line-height: 36px;
}
.login_form .inner .IDPW_wrap {
    display: flex;
    padding-top: 5px;
    gap: 5px;
}

.login_form .copyright {
    text-align: center;
    font-size: 12px;
    color: #889094;
    line-height: 1.6;
}



/* layer_pop_wrap */
/*=======================================================================================*/
.pop_desc {
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.06);
    padding: 15px;
    margin-bottom: 10px;
    line-height: 1.5;
    border-radius: 10px;
}

.pop_desc li {
    text-indent: -18px;
    padding-left: 15px;
    margin-bottom: 3px;
    word-break: keep-all;
}

.pop_desc li:last-child {
    margin-bottom: 0;
}

.pop_desc li::before {
    content: "※";
    padding-right: 5px;
}

/* board_list_wrap */
/*=======================================================================================*/
.board_list_wrap {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    padding: 20px;
    height: calc(100% - 85px);
    overflow-y: auto;
}

/* board_bottom_wrap */
.board_bottom_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 36px;
}

.board_bottom_wrap .btn {
    display: inline-block;
    vertical-align: middle;
    height: 36px;
    line-height: 35px;
    border-radius: 6px;
    padding: 0 20px;
    min-width: 120px;
}

.board_bottom_wrap .pageing_wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* table */
/*=======================================================================================*/
.table {
    border-spacing: 0;
    width: 100%;
    background: #F8F8F8;
    box-shadow: 0px 0 16px inset rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

.table caption {
    font-size: 0;
    line-height: 0;
    display: none;
}

.table thead th {
    background: #515a60;
    padding: 10px 0;
    color: #fff;
    font-weight: 400;
    height: 20px;
}

.table thead th.checks {
    padding: 10px 5px;
}

.table thead th:first-child {
    border-radius: 8px 0 0 0;
}

.table thead th:last-child {
    border-radius: 0 8px 0 0;
}

.table tbody td {
    padding: 10px 0;
    word-break: keep-all;
    text-align: center;
    height: 60px;
    border-bottom: 1px solid #CCCFD2;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody td a {
    color: #168eea;
    text-decoration: underline;
}

/* time */
.table tbody td .time {
    line-height: 1;
}

.table tbody td .time em {
    display: block;
    color: #a29a94;
}

/* btn */
.table tbody td .btn {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
    padding: 0 15px;
    border-radius: 6px;
    font-size: 12px;
}

.table tbody td .btn i {
    vertical-align: middle;
    margin-right: 2px;
}

.table tbody td .btn span {
    vertical-align: middle;
}

/* status */
.status {
    position: relative;
    display: inline-block;
    padding-left: 18px;
}

.status::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.status.green::before {
    background: linear-gradient(#56c204, #429404);
    border: 1px solid #317002;
}

.status.red::before {
    background: linear-gradient(#d50427, #94061e);
    border: 1px solid #94061e;
}

.status.gray::before {
    background: #bfbfbf;
    border: 1px solid #a5a5a5;
}

/* thumb */
.tb_thumb {
    aspect-ratio: 1/1;
    font-size: 0;
    line-height: 0;
    width: 56px;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
    background: #726963;
}

.tb_thumb img,
.tb_thumb video {
    width: 100%;
    height: 100%;
}

/* pageing_wrap */
/*=======================================================================================*/
.pageing_wrap {
    margin: 0 auto;
}

.pageing_wrap ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.pageing_wrap ul li {
    height: 30px;
    line-height: 30px;
    width: 30px;
    position: relative;
}

.pageing_wrap ul li::after {
    content: "";
    background: #e3dedc;
    width: 1px;
    height: 12px;
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.pageing_wrap ul li:last-child::after {
    display: none;
}

.pageing_wrap ul li a {
    display: block;
    font-size: 15px;
    text-align: center;
    
}

.pageing_wrap ul li.active a {
    background: linear-gradient(217deg, #168eea, #16cdea);
    border-radius: 13px;
    color: #fff;
}

/* intro */
/*=======================================================================================*/
.intro_container {
    height: calc(100% - 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro_wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    /* background: url(../images/BG_INTRO.jpg) no-repeat;
    background-size: 100% 100%;*/
} 

.intro_top {
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0 20px;
    height: 50px;
}

.intro_top .phone i {
    display: inline-block;
    vertical-align: middle;
}

.intro_top .phone span {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    margin-right: 5px;
}

.intro_top .phone em {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #cedde2;
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
    padding: 0 10px;
}

.intro_top .btn_wrap {}
.intro_top .btn_wrap .btn {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    border-radius: 6px;
    font-size: 12px;
    padding: 0 10px;
    min-width: 80px;
}


.intro_title_wrap {
    text-align: center;
    margin-bottom: 40px;
}

.intro_title_wrap .logo {
    margin-bottom: 10px;
}

.intro_title_wrap .logo img {
    width: 120px;
}

.intro_title_wrap .tit {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 15px;
}

.intro_title_wrap .desc {
    font-size: 14px;
    text-align: center;
    line-height: 1.8;
    color: #889094;
}

.intro_title_wrap .desc span {
    font-weight: 500;
}

.intro_choice_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.intro_choice_wrap li {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.06);
    background: #fff;
    width: 360px;
    height: 400px;
    padding: 10px;
    position: relative;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    user-select: none;
    /* no-drag */
    border-radius: 20px;
    border: 1px solid #e4e4e4;
}

.intro_choice_wrap li:active {
    transform: translateY(1px) scale(0.98);
}

.intro_choice_wrap li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
    background: #fff;
    text-align: center;
    height: 100%;
    border-radius: 18px;
}

.intro_choice_wrap li a .inner .img {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.intro_choice_wrap li a .inner .img img {
    width: auto;
    height: 100%;
}

.intro_choice_wrap li a .inner .tit {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.intro_choice_wrap li a .inner .desc {
    color: #889094;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 14px;
}

.intro_choice_wrap li a .btn {
    display: inline-block;
    border-radius: 5px;
    box-sizing: border-box;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 0;
}

.intro_choice_wrap li a .btn i {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-right: 3px;
    line-height: 1;
}

.intro_choice_wrap li a .btn span {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1;
}

/* policy_check_wrap */
/*=======================================================================================*/
.policy_check_wrap {
    position: relative;
}
.policy_check_wrap .all {
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.06);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.policy_check_wrap ul li {
    margin-bottom: 5px;
    padding-left: 10px;
}

.policy_check_wrap ul li .input_checks label span a {
    color: #0e9ee8;
    text-decoration: underline;
}

/* email_authentication_wrap */
/*=======================================================================================*/
.email_authentication_wrap {
    text-align: center;
    padding: 40px 0;
}

.email_authentication_wrap .logo {
    width: 100px;
    margin: 0 auto 20px;
}

.email_authentication_wrap .t1 {
    line-height: 1.6;
    margin-bottom: 20px;
}

.email_authentication_wrap .email {
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.06);
    width: 80%;
    margin: 0 auto 20px;
    font-size: 20px;
    padding: 20px 0;
    border-radius: 8px;
}

.email_authentication_wrap .t2 {
    line-height: 1.6;
    margin-bottom: 30px;
}

.email_authentication_wrap .btn {
    height: 36px;
    line-height: 35px;
    border-radius: 6px;
    padding: 0 20px;
    min-width: 100px;
}

.bottom_join_txt {
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 8px;
}

.bottom_join_txt .phone_num {
    border: 1px solid #e3dedc;
    border-radius: 8px;
    padding: 4px 8px 2px;
}

.bottom_join_txt .phone_num i {
    display: inline-block;
    vertical-align: middle;
}

.bottom_join_txt .phone_num span {
    display: inline-block;
    vertical-align: middle;
}

/* search_box */
/*=======================================================================================*/
.search_box {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.search_box .form_element_wrap {
    margin-bottom: 20px;
}

.search_box .form_element_wrap .form_input {
    height: 40px;
    border: none;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    border-radius: 10px 0 0 10px;
    padding-left: 55px;
    border: 1px solid #e4e4e4;
}

.search_box .form_element_wrap>i {
    font-size: 18px;
    left: 20px;
    position: absolute;
}

.search_box .form_element_wrap .btn {
    height: 40px;
    line-height: 40px;
    border-radius: 0 10px 10px 0;
    padding: 0 25px;
}

.search_box .txt {
    text-align: center;
}

.search_box .txt span {
    color: #fff;
    background: #156dd6;
}

/* file_being_wrap */
/*=======================================================================================*/
.ic_layer_review {
    position: absolute;
    right: 200px;
    background: #156DD6;
    color: #fff;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ic_layer_review i {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 2px dotted rgba(255, 255, 255, 0.4);
}

.ic_layer_review span {

    font-size: 14px;
}

.file_being_wrap h3 {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}

.file_being_wrap h3 span {
    color: #7a848b;
    font-size: 12px;
    font-weight: 400;
}

.file_being_wrap ul {
    height: calc(100% - 500px);
}

.file_being_wrap ul li {
    background: #fff;
    display: flex;
    gap: 10px;
    align-items: center;
    height: 60px;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    border-radius: 20px;
    padding-right: 30px;
    margin-bottom: 8px;
    position: relative;
    border: 1px solid #e4e4e4;
    padding-left: 20px;
}

.file_being_wrap ul li:last-child {
    margin-bottom: 0;
}

.file_being_wrap ul li .bookmark {
    width: 2%;
    text-align: center;
    position: relative;
}

.file_being_wrap ul li .bookmark .ic_favorite {
    vertical-align: middle;
    font-size: 18px;
}

.file_being_wrap ul li .root span {
    display: inline-block;
    vertical-align: middle;
    background: #636b71;
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    margin-right: 30px;
    position: relative;
}

.file_being_wrap ul li .root span::after {
    font-family: "Font Awesome 6 pro";
    content: "\f105";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5bcc2;
    font-size: 18px;
}

.file_being_wrap ul li .root span:last-child {
    margin-right: 0;
}

.file_being_wrap ul li .root span:last-child::after {
    display: none;
}

.file_being_wrap ul li .tit {
    flex: 1;
    font-size: 14px;
}

.file_being_wrap ul li .tit a:hover {
    color: #01a2f5;
    text-decoration: underline;
}

.file_being_wrap ul li .step {
    font-size: 14px;
}

.file_being_wrap ul li .step .current {
    color: #f5bc00;
}

.file_being_wrap ul li .step .current::after {
    content: "/";
    color: #b9c0c5;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 6px;
}

.file_being_wrap ul li .step .all {
    color: #c4d3df;
}

/* card_wrap */
/*=======================================================================================*/
.card_wrap {
    height: 100%;
}

.card_wrap h3 {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 10px;
}

.card_wrap h3 span {
    color: #7a848b;
    font-size: 12px;
    font-weight: 400;
    margin-left: 3px;
}

.card_wrap .cont {
    background: #fff;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    border-radius: 20px;
    padding-right: 30px;
    height: 100%;
    height: calc(100% - 30px);
    padding: 20px;
    border: 1px solid #e4e4e4;
}

/* favorite_list_wrap */
/*=======================================================================================*/
.favorite_list_wrap {
    overflow-y: auto;
    height: 100%;
}

.favorite_list_wrap ul li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3ebee;
    height: 50px;
}

.favorite_list_wrap ul li .bookmark {
    padding-right: 6px;
}

.favorite_list_wrap ul li .bookmark i {
    font-size: 16px;
    vertical-align: middle;
}

.favorite_list_wrap ul li .tit {
    flex: 1;
}
.favorite_list_wrap ul li .tit a {
    display: block;
}
.favorite_list_wrap ul li .tit a:hover {
    color: #01a2f5;
    text-decoration: underline;
}

.favorite_list_wrap ul li .state.ing {
    color: #e6b204;
}

.favorite_list_wrap ul li .state.complate {
    color: #508d00;
}

.favorite_list_wrap ul li .step {
    font-size: 12px;
    font-weight: 400;
}

.favorite_list_wrap ul li .step .current {
    color: #f5bc00;
}

.favorite_list_wrap ul li .step .current::after {
    content: "/";
    color: #b9c0c5;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 6px;
}

.favorite_list_wrap ul li .step .all {
    color: #c4d3df;
}

/* favorite_list_wrap */
/*=======================================================================================*/
.file_root_list_wrap {
    overflow-y: auto;
    height: 100%;
}

.file_root_list_wrap>ul>li .root_tit {
    cursor: pointer;
    height: 30px;
    display: flex;
    align-items: center;
}

.file_root_list_wrap>ul>li .root_tit i {
    color: #c5cbce;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.file_root_list_wrap>ul>li .root_tit span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    position: relative;
}

.file_root_list_wrap>ul>li .root_tit span::after {
    font-family: "Font Awesome 6 pro";
    content: "\f105";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5bcc2;
    font-size: 14px;
}

.file_root_list_wrap>ul>li .root_tit span:last-child {
    margin-right: 0;
}

.file_root_list_wrap>ul>li .root_tit span:last-child::after {
    display: none;
}

.file_root_list_wrap>ul>li .root_cont {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.file_root_list_wrap>ul>li .root_cont {
    background: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 0 16px inset rgba(10, 59, 81, 0.06);
}

.file_root_list_wrap>ul>li .root_cont ul {
    padding: 0 20px;
}

.file_root_list_wrap>ul>li .root_cont ul li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3ebee;
    height: 40px;
}

.file_root_list_wrap>ul>li .root_cont ul li:last-child {
    border-bottom: none;
}

.file_root_list_wrap>ul>li .root_cont ul li .bookmark {
    padding-right: 6px;
}

.file_root_list_wrap>ul>li .root_cont ul li .bookmark i {
    font-size: 18px;
    vertical-align: middle;
}

.file_root_list_wrap>ul>li .root_cont ul li .tit {
    flex: 1;
}

.file_root_list_wrap>ul>li .root_cont ul li .tit a:hover {
    color: #01a2f5;
    text-decoration: underline;
}

.file_root_list_wrap>ul>li .root_cont ul li .state.ing {
    color: #e6b204;
}

.file_root_list_wrap>ul>li .root_cont ul li .state.complate {
    color: #508d00;
}


/* category_layout_wrap */
/*=======================================================================================*/
.category_layout_wrap {
    display: flex;
    height: 100%;
}

.category_layout_wrap .depth_menu_wrap {
    border-right: 1px solid #e4e4e4;
    width: 200px;
    padding: 20px;
}

.category_layout_wrap .list_wrap {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* depth_menu */
.depth_menu {
    text-align: center;
}

.depth_menu h4 {
    display: inline-block;
    background: #cccfd2;
    color: #fff;
    border-radius: 11px;
    padding: 5px 10px;
    font-size: 13px;
    margin-bottom: 20px;
}

.depth_menu ul li {
    text-align: left;
    border-bottom: 1px dashed #cccfd2;
}

.depth_menu ul li a {
    display: block;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
}

.depth_menu ul li.active a {
    color: #156dd6;
    font-weight: 500;
    position: relative;
}

.depth_menu ul li.active a::after {
    font-family: "Font Awesome 6 pro";
    content: "\f105";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* auto_creation_wrap */
/*=======================================================================================*/
.auto_creation_wrap {    
    height: 100vh;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* create_status */
.auto_creation_wrap .create_status {
    display: flex;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    gap: 10px;
}

.auto_creation_wrap .create_status .date {
    font-size: 13px;
    color: #889094;
    text-align: right;
    line-height: 1.3;
}

.auto_creation_wrap .create_status .state {
    background: #fff;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.16);
    padding: 10px;
    border-radius: 10px;
}

.auto_creation_wrap .create_status .state i {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #4eae06;
    margin-right: 2px;
}

.auto_creation_wrap .create_status .state span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

/* title */
.auto_creation_wrap .title {
    padding-top: 30px;
}

.auto_creation_wrap .title .inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auto_creation_wrap .title .inner h2 {
    font-size: 18px;
    font-weight: 500;
}

.auto_creation_wrap .title .inner .bookmark i {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.auto_creation_wrap .title .inner .bookmark span {
    display: inline-block;
    vertical-align: middle;
}

/* step */
.auto_creation_wrap .step .inner {
    max-width: 1024px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    height: 100%;
    padding: 15px 20px;
    border: 1px solid #e4e4e4;
}

.auto_creation_wrap .step .inner .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auto_creation_wrap .step .inner .top .left .stage {
    display: inline-block;
    vertical-align: middle;
    background: #636b71;
    color: #fff;    
    font-size: 14px;
    padding: 0 10px;
    border-radius: 10px;
    height: 26px;
    line-height: 26px;
    margin-right: 5px;
}

.auto_creation_wrap .step .inner .top .left .tit {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.auto_creation_wrap .step .inner .top .right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto_creation_wrap .step .inner .top .right .num {
    background: #f8f8f8;
    border-radius: 11px;
    box-shadow: 0 0 16px inset rgba(10, 59, 81, 0.06);
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
}

.auto_creation_wrap .step .inner .top .right .num span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
    color: #156dd6;
    padding: 0 10px 0 5px;
    position: relative;
}

.auto_creation_wrap .step .inner .top .right .num span:after {
    content: "/";
    color: #cccfd2;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.auto_creation_wrap .step .inner .top .right .num em {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #889094;
    padding: 0 5px 0 10px;
}

.auto_creation_wrap .step .inner .note {
    border: 1px solid #e3ebee;
    padding: 10px 15px;
    line-height: 1.5;
    color: #889094;
    margin-bottom: 5px;
    height: 250px;
    overflow-y: auto;
    border-radius: 10px;
    margin-top:10px;
}

.auto_creation_wrap .step .inner .bottom {
    text-align: right;
}

/* petition */
.auto_creation_wrap .petition {
    flex: 1;
}

.auto_creation_wrap .petition .inner {
    max-width: 1024px;
    margin: 0 auto;
    height: calc(100vh - 143px);
    position: relative;
}

.auto_creation_wrap .petition .inner.h_set01 {
    height: calc(100vh - 427px);
}

.auto_creation_wrap .petition .inner .paper_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    border-radius: 20px 20px 0 0;
}

.auto_creation_wrap .petition .inner .paper_wrap.complate {
    height: calc(100% - 372px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.auto_creation_wrap .petition .inner .paper_wrap.complate.active {
    height: calc(100% - 230px);
}

.auto_creation_wrap .petition .inner .paper_wrap .preview {
    flex: 1;
    overflow-y: auto;
}

.auto_creation_wrap .petition .inner .paper_wrap .inputform {
    border: 1px solid #889094;
    border-bottom: none;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    border-radius: 20px 20px 0 0;
}

/* petition_step */
.petition_step {
    position: absolute;
    left: -145px;
    top: 0;
    width: 130px;
    background: #fff;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.03);
    border: 1px solid #e4e4e4;
    height: 100%;
    text-align: center;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
}

.petition_step::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.petition_step ul {
    padding: 20px 0;
}

.petition_step ul li {
    position: relative;
    margin-bottom: 30px;
}


.petition_step ul li:last-child {
    margin-bottom: 0;
}

.petition_step ul li:last-child::after {
    display: none;
}

.petition_step ul li i {
    width: 50px;
    height: 50px;
    border-radius: 45%;
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin: 0 auto 10px;
}

.petition_step ul li i::before {
    opacity: 0.6;
}

.petition_step ul li i::after {
    opacity: 0.2;
}

.petition_step ul li .step {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background: #636b71;
    font-family: "Poppins";
    padding: 2px 6px 1px;
    border-radius: 8px;
    margin-bottom: 5px;
}

.petition_step ul li.on i {
    color: #156dd6;
    background: #ebf4ff;
}

.petition_step ul li.on i::before {
    opacity: 0.9;
}

.petition_step ul li.on i::after {
    opacity: 0.4;
}

.petition_step ul li.on .step {
    background: #156dd6;
}

/* petition_btnSet */
.petition_btnSet {
    position: absolute;
    right: -70px;
    top: 0;
    text-align: center;
}

.petition_btnSet ul li {
    margin-bottom: 5px;
}

.petition_btnSet ul li .btn {
    width: 60px;
    height: 60px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.petition_btnSet ul li .btn:active::before {
    border-radius: 22px;
}

.petition_btnSet ul li .btn i {
    font-size: 18px;
    margin-bottom: 4px;
}

.petition_btnSet ul li .btn span {
    display: block;
    font-size: 11px;
}

/* petition_preview */
/*=======================================================================================*/
.petition_preview {
    width: 100%;
    height: 100%;
    font-family: "MaruBuri";
    font-size: 18px;
}

/* start */
.petition_preview.start {
    display: flex;
    justify-content: center;
 /*   align-items: center;*/
    flex-direction: column;
}

.petition_preview h2 {
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

.petition_preview.start .btn {
    height: 50px;
    padding: 0 30px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.petition_preview.start .btn i {
    font-size: 17px;
}

.petition_preview.start .btn span {
    font-size: 16px;
    font-family: "NanumSquareRound";
}

/* bodyText */
.petition_preview.bodyText {
    padding: 140px 101px 100px 101px;
    overflow-y: auto;
}

.petition_preview.bodyText .titCont {
    display: flex;
    margin-bottom: 15px;
}

.petition_preview.bodyText .titCont .tit {
    width: 15%;
}

.petition_preview.bodyText .titCont .cont {
    flex: 1;
    line-height: 1.6;
}

.petition_preview.bodyText .titCont_list .tit {
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
}

.petition_preview.bodyText .titCont_list .cont ul li {
    font-size: 16px;
    font-weight: 500;
    text-indent: -15px;
    padding-left: 15px;
    margin-bottom: 10px;
    word-break: keep-all;
    line-height: 1.6;
}

.petition_preview.bodyText .titCont_list .cont ul li::before {
    content: "-";
}

.petition_preview.bodyText .titCont_list .cont ol li {
    font-size: 18px;
    font-weight: 500;
    text-indent: -15px;
    padding-left: 15px;
    margin-bottom: 10px;
    word-break: keep-all;
}

.petition_preview.bodyText .titCont_date {
    text-align: center;
}

.petition_preview.bodyText .bottom {
    text-align: right;
    padding-top: 70px;
    padding-right: 50px;
    position: relative;
}

.petition_preview.bodyText .bottom .highlight {
    background: #156dd6;
    color: #fff;
    border-radius: 4px;
    padding: 0 5px;
}

.petition_preview .sign_area {
    position: absolute;
    right: -20px;
    top: 50px;
    width: 300px;
    height: 130px;
    background: rgba(230, 12, 49, 0.15);
    border: 2px dashed #E60C31;
    z-index: 99;
}

.petition_preview .sign_area.none_bg {
    background: none;
    border: none;
}

.petition_preview .sign_area img {
    position: absolute;
    right: 0;
    top: 20px;
    width: 80px;
}

/* enter_info */
/*=======================================================================================*/
.enter_info {
    padding: 15px 20px;
}

.enter_info .cont {
    max-height: 370px;
    overflow-y: auto;
}

.enter_info .cont .form_set h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.enter_info .cont .form_set dl {
    background: #f8f8f8;
    border: 1px solid #e3ebee;
    border-radius: 16px;
}

.enter_info .cont .form_set dl dt {
    padding: 12px 20px;
    position: relative;
    border-bottom: 1px solid #e3ebee;
}
.enter_info .cont .form_set dl dt:not(:has(+ dd)) {
    border-bottom:none;
}

.enter_info .cont .form_set dl dt .form_cont_wrap {
    margin-bottom: 0;
}

.enter_info .cont .form_set dl dd {
    padding: 12px 20px;
}

.enter_info .cont .form_set dl .form_cont_wrap {
    position: relative;
}

.enter_info .cont .form_set dl .form_cont_wrap > span {
    padding-left: 10px;
}
.enter_info .cont .form_set dl .form_cont_wrap .desc {
    padding-left: 20px;
}

.enter_info .cont .form_set .upload_desc {
    font-size: 14px;
}

.enter_info .cont .form_set .upload_desc span {
    font-size: 12px;
    color: #fff;
    background: #01A2F5;    
    padding: 0 8px;
    border-radius: 8px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.enter_info .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0 0;
}

.enter_info .bottom .btn {
    height: 36px;
    line-height: 35px;
    border-radius: 10px;
    padding: 0 20px;
    min-width: 100px;
}

/* step_confirm_wrap */
/*=======================================================================================*/
.step_confirm_wrap .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.step_confirm_wrap .top .tit span {
    display: inline-block;
    vertical-align: middle;
    background: #636b71;
    color: #fff;    
    font-size: 14px;
    padding: 0 10px;
    border-radius: 10px;
    height: 26px;
    line-height: 26px;
    margin-right: 5px;
}

.step_confirm_wrap .top .tit em {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

.step_confirm_wrap .top .state {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step_confirm_wrap .top .state i {
    color: #58a500;
    font-size: 20px;
}

.step_confirm_wrap .top .state .num {
    background: #f8f8f8;
    border-radius: 11px;
    box-shadow: 0 0 16px inset rgba(10, 59, 81, 0.06);
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    
}

.step_confirm_wrap .top .state .num span {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 500;
    color: #156dd6;
    padding: 0 10px 0 5px;
    position: relative;
}

.step_confirm_wrap .top .state .num span:after {
    content: "/";
    color: #cccfd2;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.step_confirm_wrap .top .state .num em {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #889094;
    padding: 0 5px 0 10px;
}

.step_confirm_wrap .top .state .txt2::before {
    content: "|";
    color: #cccfd2;
    padding-right: 10px;
}

.step_confirm_wrap>.cont {
    background: #f8f8f8;
    border-radius: 16px;
    box-shadow: 0 0 16px inset rgba(10, 59, 81, 0.06);
    overflow-y:auto;
    max-height:70vh;
}


/* layer_pop_process_wrap */
/*=======================================================================================*/
.layer_pop_process_wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 92;
    text-align: center;
}

.layer_pop_process_wrap .img {
    font-size: 0;
    line-height: 0;
    margin-bottom: 20px;
}

.layer_pop_process_wrap .img img {
    width: auto;
    padding-left: 25px;
}

.layer_pop_process_wrap .txt {
    color: #fff;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.layer_pop_process_wrap .txt span {
   font-weight:500;
}

.layer_pop_process_wrap .btn {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 50px;
    border-radius: 10px;
}


/* form_signature_wrap */
/*=======================================================================================*/
.form_signature_wrap {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form_signature_wrap>div {
    flex: 1;
}

.form_signature_wrap .left .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.form_signature_wrap .left .tit .btn {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 8px;
}

.form_signature_wrap .left .cont {
    border: 3px solid #707070;
    border-radius: 10px;
    min-height: 250px;
    position: relative;
}

.form_signature_wrap .left .cont.ver02 {
    display: none;

}

.form_signature_wrap .left .cont .img_signture {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.form_signature_wrap .left .cont .img_signture img {
    max-height: 135px;
    object-fit: contain;
}

.form_signature_wrap .left .cont .img_signture img {
    width: auto;
}

.form_signature_wrap .left .form_cont_wrap .form_element_wrap input {
    display: none;
}

.form_signature_wrap .left .form_cont_wrap .form_element_wrap .btn {
    min-width: auto;
}

.form_signature_wrap .left .form_cont_wrap .form_element_wrap .form_input {
    line-height: 36px;
}

.form_signature_wrap .left .form_cont_wrap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
}

.signture_txt_wrap {
    display: flex;
    height: 100%;
    min-height: 244px;
}

.signture_txt_wrap .input_name {
    flex: 1;
    text-align: center;
    border-right: 2px dotted #5D6268;
}

.signture_txt_wrap .input_name .txt {
    height: 110px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.signture_txt_wrap .input_name .form_name_wrap {
    padding-top: 20px;
}

.signture_txt_wrap .input_name .form_name_wrap .form_input {
    border-radius: 0;
    border: none;
    border-bottom: 3px solid #707070;
    width: 80%;
    text-align: center;
    font-size: 28px;
    font-family: "MaruBuri";
    font-weight: 500;
}

.signture_txt_wrap .sign_preview {
    flex: 1;
    text-align: center;
}

.signture_txt_wrap .sign_preview .txt {
    height: 110px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.signture_txt_wrap .sign_preview .img_sign_preview .ic_stemp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border: 3px solid #AF2224;
    border-radius: 50%;
    color: #AF2224;
    font-size: 33px;
    font-family: "MaruBuri";
    font-weight: 600;
    line-height: 1;
    margin: 0 auto;
}

.signture_list h4 {
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px;
}

.signture_list ul {
    background: #F8F8F8;
    border: 1px solid #E7ECF1;
    overflow-y: auto;
    height: 100%;
    height: 250px;
    border-radius: 10px;
}

.signture_list ul li {
    display: flex;
    align-items: center;
    height: 57px;
    padding: 0 15px;
    border-bottom: 1px solid #DDE6E9;
    cursor: pointer;
    position: relative;
}

.signture_list ul li:last-child {
    border-bottom: none;
}

.signture_list ul li .img {
    width: 33px;
    height: 33px;
    margin-right: 10px;
}

.signture_list ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.signture_list ul li .tit {
    flex: 1;
}

.signture_list ul li .date {
    font-size: 10px;
    color: #889094;
}

.signture_list ul li .btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 45%;
    margin-left: 5px;
}

.signture_list.choice_func ul li.active::before {
    content: "선택됨";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

#image-container {
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid #ccc;
    overflow: hidden;
}

#myImage {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: move;
}

/* layer_review_wrap */
/*=======================================================================================*/
.layer_review_wrap {
    text-align: center;
    padding: 20px 0;
}

.layer_review_wrap .t1 {
    line-height: 1.6;
    margin-bottom: 15px;
}

.layer_review_wrap .t2 {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #E60C31;
}

.layer_review_wrap .t3 span {
    background: #156DD6;
    color: #fff;
}

/* payment_wrap */
/*=======================================================================================*/

/* total_price */
.total_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F8F8;
    box-shadow: 0px 0 16px inset rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    height: 70px;
    padding: 0 20px;
}


.total_price .tit span {
    font-weight: 500;
    font-size: 15px;
}

.total_price .tit em {
    font-size: 12px;
    color: #889094;
}

.total_price .cont span {
    font-size: 18px;
    color: #156DD6;
    font-weight: 500;
    letter-spacing: -0.5px;
}

/* payment_policy */

.payment_policy .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.payment_policy .tit h4 {
    font-weight: 500;
}

.payment_policy .tit a {
    font-size: 12px;
    color: #01A2F5;
    text-decoration: underline;
}

.payment_policy .cont .box {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #CCCFD2;
    padding: 10px;
    max-height: 110px;
    overflow-y: auto;
    color: #889094;
    font-size: 11px;
}

/* payment_complate_wrap */
/*=======================================================================================*/
.payment_complate_wrap {
    text-align: center;
    padding: 20px 0;
}

.payment_complate_wrap .txt.top {
    margin-bottom: 20px;
}

.payment_complate_wrap .date_box {
    background: #F8F8F8;
    box-shadow: 0px 0 16px inset rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.payment_complate_wrap .date_box em {
    font-size: 30px;
    color: #01A2F5;
    
}

/* review_note */
/*=======================================================================================*/
.review_note {
    background: #fff;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 20px;
    height: 192px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; /* 높이 변화에 대한 부드러운 전환을 설정 */
}
.review_note.active {
    height: 50px; /* active 클래스가 추가되었을 때의 높이 */
    padding-top: 15px;
}

.review_note h3 {
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.review_note.active h3 {
    margin-bottom: 20px;
}

.review_note h3 i {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    padding-right: 5px;
}

.review_note h3 span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
}

.review_note .cont {
    height: 120px;
    overflow-y: auto;
    border: 2px dashed #E3EBEE;
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
}

/* layer_card */
/*=======================================================================================*/
.layer_card {
    background: #fff;
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    border-radius: 20px;
    margin-bottom: 10px;
    padding: 0 45px 0 30px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    height: 110px;
}

.layer_card .profile {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.layer_card .profile .pic {
    width: 65px;
    height: 65px;
    border-radius: 45%;
    overflow: hidden;
}

.layer_card .profile .profile_txt span {
    display: block;
    font-size: 12px;
    line-height: 1.3;
}

.layer_card .profile .profile_txt em {
    display: block;
    font-size: 20px;
    font-weight: 500;
}

.layer_card .address span {
    display: block;
    margin-bottom: 5px;
}

.layer_card .address em {
    display: block;
    font-size: 14px;
}
.layer_card .phone::after {
    content: "";
    width: 1px;
    height: 80px;
    background: #DDE6E9;
}

.layer_card .phone span {
    display: block;
    margin-bottom: 5px;
}

.layer_card .phone em {
    display: block;
    font-size: 14px;
}

.layer_card .email::after {
    content: "";
    width: 1px;
    height: 80px;
    background: #DDE6E9;
}

.layer_card .email span {
    display: block;
}

.layer_card .email em {
    display: block;
    font-size: 16px;
}



.paper_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    
}

.paper_title .txt {
    font-size: 15px;
}

.paper_title .btn_wrap .btn {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 10px;
}


/* pay_search_box */
/*=======================================================================================*/
.pay_search_box {
    border: 1px solid #e4e4e4;
    border-radius: 20px;
    padding: 15px 20px;
    margin-bottom: 20px;
}
.pay_search_box .form_element_wrap {
    width: 50%;
}
.pay_search_box .form_element_wrap .btn {
    min-width: 80px;
}


/* policy_detail_wrap */
/*=======================================================================================*/
.policy_detail_wrap {
    position: absolute;
    left: 500px;
    bottom: -70px;    
    z-index: 92;
    background: #fff;
    border-radius: 10px;
    width: 400px;
    padding: 10px;
}
.policy_detail_wrap .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.policy_detail_wrap .top h3 {
    font-size: 15px;
    font-weight: 500;
}
.policy_detail_wrap .top .btn {
    font-size: 12px;
    padding: 0 10px;
    border-radius: 6px;
}

.policy_check_wrap .cont {
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.06);
    padding: 15px;
    margin-bottom: 10px;
    line-height: 1.5;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 790px;
}

/* ID_find_wrap */
/*=======================================================================================*/
.ID_find_wrap {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e3ebee;
}
.ID_find_wrap .btn_wrap {
    text-align: center;
    margin-bottom: 20px;
}
.ID_find_wrap .btn_wrap .btn {
    height: 36px;
    line-height: 35px;
    border-radius: 10px;
    padding: 0 20px;
    min-width: 100px;
}
.ID_find_wrap .box {
    background: #f8f8f8;
    box-shadow: 0 0 16px inset rgba(0, 0, 0, 0.06);
    width: 80%;
    margin: 0 auto 20px;
    font-size: 20px;
    padding: 20px 0;
    border-radius: 8px;
    text-align: center;
}

/* PW_find_wrap */
/*=======================================================================================*/
.PW_find_wrap {
    margin-bottom: 10px;
}
.PW_find_wrap .btn_wrap {
    text-align: center;
    margin-bottom: 20px;
}
.PW_find_wrap .btn_wrap .btn {
    height: 36px;
    line-height: 35px;
    border-radius: 10px;
    padding: 0 20px;
    min-width: 100px;
}