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

/* login */
/*=======================================================================================*/
.login_wrap {
    background: url(../images/BG_LOGIN.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    height: 100%;
}

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

.login_wrap .logo {
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    margin: 0 auto 5px;
    max-width: 180px;
}

.login_wrap .logo::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 4px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background: #c4c1c0;
}

.login_wrap h2 {
    font-size: 26px;
    margin-bottom: 15px;
    text-align: center;
}

.login_wrap h2 span {
    font-weight: 500;
    letter-spacing: -0.5px;
}

.login_wrap .desc {
    text-align: center;
    margin-bottom: 30px;
    font-size: 14px;
}

.login_wrap .inner_form {
    max-width: 320px;
    margin: 0 auto;
}

.login_wrap .form_element_wrap {
    margin-bottom: 8px;
}

.login_wrap .form_element_wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b5c58;
}

.login_wrap .form_element_wrap .form_input {
    padding-left: 40px;
}

.login_wrap .lost_password {
    margin-bottom: 10px;
}

.login_wrap .btn {
    display: block;
    width: 100%;
    border-radius: 16px;
    height: 36px;
    line-height: 36px;
}

.login_wrap .bottom_txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    color: #808080;
    text-align: center;
}


/* 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;
    font-family: "Poppins", sans-serif;
}

.pageing_wrap ul li.active a {
    background: #168eea;
    border-radius: 13px;
    color: #fff;
}



/* table */
/*=======================================================================================*/
.table_wrap {
    border-bottom: 2px solid #726963;
}

.table_wrap:has(.table.type2) {
    height: auto;
}

.table_wrap.h_auto {
    height: auto;
}

.table {
    border-spacing: 0;
    width: 100%;
}

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

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

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

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

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

.table tbody td {
    padding: 10px 0;
    word-break: keep-all;
    text-align: center;
    height: 70px;
}

.table tbody tr {
    position: relative;
    background: #fff;
}

.table tbody tr:nth-child(2n) {
    background: #f6f7f9;
}

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

.table tbody td.left {
    text-align: left;
}

.table tbody td:first-child {
    border-radius: 4px 0 0 4px;
}

.table tbody td:last-child {
    border-radius: 0 4px 4px 0;
}

.table tbody tr:last-child td:first-child {
    border-radius: 4px 0 0 0;
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 4px 0 0;
}

.table tbody td.font_red {
    color: #e2065e;
}

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

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

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


/* table - type2 */
.table.type2 thead th {
    font-size: 12px;
}

.table.type2 tbody td {
    height: 50px;
}

/* ic_file */
.table tbody td .ic_file {
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    line-height: 17px;
    color: #fff;
    background: #a49791;
    border-radius: 8px;
    font-size: 10px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    padding: 0 6px;
    box-shadow: 0 0 6px inset rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.ic_encoding {
    display: flex;
    gap: 3px;
    align-items: center;
    border-radius: 14px;
    height: 32px;
    line-height: 31px;
    width: 74px;
    text-align: left;
    padding-left: 4px;
}

.ic_encoding i {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 2px dotted #fff;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.16);
    margin-right: 2px;
}

.ic_encoding span {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #fff;
}

.ic_encoding.fail {
    background: #e63e27;
}

.ic_encoding.ing {
    background: #1290d2;
}

.ic_encoding.complate {
    background: #449803;
}

.ic_encoding.upload {
    background: #02b4ab;
}

/* list */
.table_data tbody td .list li,
.table tbody td .list li {
    text-indent: -9px;
    padding-left: 9px;
}

.table_data tbody td .list li::before,
.table tbody td .list li::before {
    content: "-";
    padding-right: 3px;
}

.table_data tbody td .list_num,
.table tbody td .list_num {
    counter-reset: li;
}

.table_data tbody td .list_num li,
.table tbody td .list_num li {
    margin-bottom: 2px;
}

.table_data tbody td .list_num li:last-child,
.table tbody td .list_num li:last-child {
    margin-bottom: 0;
}

.table_data tbody td .list_num li::before,
.table tbody td .list_num li::before {
    display: inline-block;
    vertical-align: middle;
    content: counter(li);
    counter-increment: li;
    background: #ab114f;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 17px;
    text-align: center;
    margin-right: 5px;
    overflow: hidden;
    font-size: 10px;
}

/* 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;
}

/* img */
.table tbody td.img {
    font-size: 0;
    line-height: 0;
}

.table tbody td .img_thumb {
    display: inline-block;
    aspect-ratio: 17/14;
    font-size: 0;
    line-height: 0;
    width: 60px;
    box-sizing: border-box;
    position: relative;
    background: #c8c6c6;
    border-radius: 4px;
    box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.table tbody td .img_thumb::before {
    content: "준비중";
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 12px;
    font-weight: 900;
}

.table tbody td .img_thumb img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 2;
}

/* btn */
.table tbody td.tb_btn_wrap {
    font-size: 0;
    line-height: 0;
}

.table tbody td.tb_btn_wrap .btn {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 12px;
}

/* over_wrap */
.table tbody tr:hover td.over_wrap {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.table tbody tr td.over_wrap {
    visibility: hidden;
    opacity: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.26);
    padding: 0 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

.table tbody tr td.over_wrap .txt {
    color: #827672;
}

.table tbody tr td.over_wrap .btn_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.table tbody tr td.over_wrap .btn_wrap .btn {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 11px;
}

/* search_box */
/*=======================================================================================*/
.search_box {
    border: 1px solid #e3dedc;
    margin: 0 auto;
    position: relative;
    padding: 15px 20px;
    background: #f9f7f6;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

.search_box .row {
    display: flex;
    align-items: center;
    gap: 10px 25px;
    flex-wrap: wrap;
}

.search_box .form_cont_wrap>label {
    min-width: auto;
    padding-right: 15px;
}

.search_box .form_cont_wrap>.form_cont {
    min-width: 130px;
}

.search_box .form_cont_wrap>.form_cont .form_element_wrap {
    max-width: inherit;
    min-width: inherit;
}

.search_box>.btn {
    margin-left: auto;
    height: 36px;
    padding: 0 20px;
    border-radius: 16px;
    min-width: 100px;
    font-size: 14px;
}

/* item_view_wrap */
/*=======================================================================================*/
.item_view_wrap {
    padding-bottom: 10px;
}

.item_view_wrap .tit {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #726963;
    border-radius: 4px;
}

.item_view_wrap .tit h3 {
    color: #fff;
}

.item_view_wrap .cont {
    background: #f9f7f6;
    height: calc(100vh - 362px);
    border-bottom: 2px solid #726963;
    padding: 20px 0;
}

.item_view_wrap .cont .none_data {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #948c87;
}

.item_view_wrap .cont .inner {
    height: calc(100% - 26px);
    overflow-y: auto;
    margin: 0 10px;
    padding: 0 10px;
}

.item_view_wrap .cont .inner .row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.item_view_wrap .cont .inner .row .column {
    flex: 1;
}

.item_view_wrap .cont .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e6dcd5;
    padding: 10px 20px 0;
    gap: 4px;
}

.item_view_wrap .cont .bottom .txt {
    font-size: 12px;
    color: #574a48;
}

.item_view_wrap .cont .bottom .btn {
    height: 26px;
    line-height: 24px;
    border-radius: 11px;
    padding: 0 20px;
}

.item_view_wrap .cont .bottom .btn_view_close {
    display: none;
}


/* normal_data_wrap */
.normal_data_wrap {
    background: #fff;
    border: 1px solid #e3dedc;
    padding: 10px 15px;
    font-size: 12px;
}

.normal_txt_wrap {
    margin-left: 15px;
    padding-left: 15px;
    position: relative;
}

.normal_txt_wrap::before {
    content: "";
    width: 1px;
    height: 14px;
    background: #ccc7c7;
    position: absolute;
    top: 2px;
    left: 0;
}

/* table_data_wrap */
.table_data_wrap {
    background: #fff;
    border-top: 1px solid #e3dedc;
    border-left: 1px solid #e3dedc;
    display: flex;
}

.table_data_wrap.depth2 {
    margin-left: 30px;
    position: relative;
}

.table_data_wrap.depth2::before {
    content: "";
    width: 4px;
    height: calc(50% - 10px);
    background: #cccac9;
    position: absolute;
    left: -30px;
    top: calc(50% - 20px);
}

.table_data_wrap.depth2::after {
    content: "";
    width: 18px;
    height: 4px;
    background: #cccac9;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}


.table_data {
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
    flex: 1;
}

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

.table_data tbody th {
    border-bottom: 1px solid #e3dedc;
    color: #949baa;
    position: relative;
    font-weight: 500;
    padding-left: 20px;
}

.table_data tbody th::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #e3dedc;
    width: 1px;
    height: 14px;
}

.table_data tbody td {
    padding: 7px 20px;
    border-bottom: 1px solid #e3dedc;
    border-right: 1px solid #e3dedc;
    text-align: left;
}

.table_data tbody td .over-y {
    overflow-y: auto;
}

.table_data tbody td .over-y.h_subtile {
    height: 49px;
    word-break: keep-all;
}

/* tag_list */
.tag_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag_list ul li {
    height: 24px;
    line-height: 23px;
    color: #fff;
    background: #5e79d4;
    border-radius: 10px;
    padding: 0 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 6px inset rgba(38, 90, 167, 0.16);
}

/* tag_list */
.ic_color_violet,
.ic_color_white {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid;
    margin-right: 2px;
}

.ic_color_violet {
    background: #8064a2;
    border-color: #674b8a;
}

.ic_color_white {
    background: #fff;
    border-color: #d2cecc;
}


/* up_file_list */
/*=======================================================================================*/
.up_file_list {
    margin: -10px -15px;
}

.up_file_list ul {
    overflow-y: auto;
    max-height: 70px;
}

.up_file_list ul li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e3dedc;
    padding: 5px 15px;
    box-sizing: border-box;
}

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

.up_file_list ul li .name em {
    display: inline-block;
    vertical-align: middle;
    background: #a49791;
    color: #fff;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    border-radius: 7px;
}

.up_file_list ul li .name span {
    display: inline-block;
    vertical-align: middle;
}

/* box_table_wrap */
/*=======================================================================================*/
.box_table_wrap {
    background: #f9f7f6;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.06);
}

.box_table_wrap.set2 {
    height: calc(100% - 100px);
}

/* cctv_view_wrap */
/*=======================================================================================*/
.cctv_view_wrap {
    aspect-ratio: 250/176;
    background: #948880;
    border-radius: 4px;
}

.cctv_view2_wrap {
    aspect-ratio: 350/210;
    background: #363230;
    border-radius: 4px;
}

/* use_timeset_wrap */
/*=======================================================================================*/
.use_timeset_wrap {
    border: 1px solid #e3dedc;
}

.use_timeset_wrap ul {
    overflow-y: auto;
}

.use_timeset_wrap ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px dashed #e3dedc;
    padding: 5px 15px;
}

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

.use_timeset_wrap ul li .txt {
    padding-left: 15px;
    position: relative;
}

.use_timeset_wrap ul li .txt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: #e3dedc;
}

.use_timeset_wrap ul li .form_element_wrap {
    margin-left: auto;
}

.btn_timeset_save {
    margin-left: auto;
    height: 26px;
    line-height: 24px;
    border-radius: 11px;
    padding: 0 15px;
}

/* button_control_wrap */
/*=======================================================================================*/
.button_control_wrap {
    background: #f9f7f6;
    border: 1px solid #e3dedc;
}

.button_control_wrap ul {
    display: flex;
    justify-content: space-around;
    padding: 0 15px;
}

.button_control_wrap ul li {
    flex: 1;
    text-align: center;
    padding: 15px 0;
}

.button_control_wrap ul li .txt {
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 3px;
}

.button_control_wrap ul li .btn_wrap {
    display: inline-block;
}

.button_control_wrap ul li .btn {
    display: block;
    width: 60px;
    height: 62px;
    border-radius: 28px;
    position: relative;
}

.button_control_wrap ul li .btn i {
    display: block;
    color: #fff;
    font-size: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.button_control_wrap ul li .btn::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 60px;
    height: 58px;
    border-radius: 28px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.button_control_wrap ul li .btn::after {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 60px;
    height: 58px;
    border-radius: 28px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4px;
    z-index: 1;
}

.button_control_wrap ul li .btn.color01::before {
    background: #6b615d;
}

.button_control_wrap ul li .btn.color01::after {
    background: #584f4b;
}

.button_control_wrap ul li .btn.color02::before {
    background: #c9165e;
}

.button_control_wrap ul li .btn.color02::after {
    background: #ab114f;
}

.button_control_wrap ul li .btn.color03::before {
    background: #1290d2;
}

.button_control_wrap ul li .btn.color03::after {
    background: #0c78b1;
}



/* default_img_uploader */
/*=======================================================================================*/
.default_img_uploader {
    border: 1px solid #e3dedc;
}

.default_img_uploader ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px dashed #e3dedc;
}

.default_img_uploader ul li .btn {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    height: 26px;
    line-height: 25px;
    border-radius: 11px;
    padding: 0 15px;
}

.default_img_uploader ul li input {
    display: none;
}

.default_img_uploader ul li span {
    margin-left: auto;
    padding-right: 10px;
}

.default_img_uploader ul li span.complate {
    color: #429404;
}

.default_img_uploader ul li span.ready {
    color: #df092d;
}

/* volume_control_wrap */
/*=======================================================================================*/
.volume_control_wrap {
    border: 1px solid #e3dedc;
    background: #f9f7f6;
}

.volume_control {
    display: flex;
}

.volume_control input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    flex: 1;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    /*  overflow: hidden;  remove this line*/

    /* New additions */
    height: 6px;
    background: #fff;
}

/* Thumb: webkit */
.volume_control input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 17px;
    width: 10px;
    background: linear-gradient(to right, #847a7a 50%, #6a5e5e 51%);
    box-sizing: 0 0 6px;
    border-radius: 3px;
    border: none;

    /* box-shadow: -407px 0 0 400px #CF470B; emove this line */
    transition: 0.2s ease-in-out;
}

/* Thumb: Firefox */
.volume_control input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 10px;
    background-color: #6a5e5e;
    border-radius: 3px;
    border: none;

    /* box-shadow: -407px 0 0 400px #CF470B; emove this line */
    transition: 0.2s ease-in-out;
}

/* Hover, active & focus Thumb: Webkit */

.volume_control input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 6px rgba(255, 85, 0, 0.1);
}

.volume_control input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 9px rgba(255, 85, 0, 0.2);
}

.volume_control input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 9px rgba(255, 85, 0, 0.2);
}

/* Hover, active & focus Thumb: Firfox */

.volume_control input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 6px rgba(255, 85, 0, 0.1);
}

.volume_control input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 9px rgba(255, 85, 0, 0.2);
}

.volume_control input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 9px rgba(255, 85, 0, 0.2);
}

.volume_control .volume_range {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    height: 60px;
    width: 85%;
}

.volume_control .volume_value {
    font-size: 12px;
    text-align: center;
    line-height: 17px;
    width: 33px;
    text-align: center;
}

.volume_control .volume_value:after {
    content: "%";
}

.volume_control .ic_volume_min {
    display: block;
    width: 23px;
    height: 18px;
    background: url(../images/IC_SOUND_MIN.png) no-repeat;
}

.volume_control .ic_volume_max {
    display: block;
    width: 23px;
    height: 18px;
    background: url(../images/IC_SOUND_MAX.png) no-repeat;
}

/* subtitle_view_wrap */
/*=======================================================================================*/
.subtitle_view_wrap {
    display: flex;
}

.subtitle_view_wrap>div {
    flex: 1;
}

.subtitle_view_wrap .subtit_txt {
    border-top: 1px solid #e3dedc;
    border-left: 1px solid #e3dedc;
    border-bottom: 1px solid #e3dedc;
    padding: 7px 20px;
    word-break: keep-all;
}

/* preview_wrap */
/*=======================================================================================*/
.preview_wrap {
    margin-bottom: 20px;
}

.preview_wrap h4 {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 6px;
}

.preview_wrap .video {
    aspect-ratio: 520/246;
    background: #393939;
    border-radius: 4px;
    position: relative;
}

/* schedule_list_wrap */
/*=======================================================================================*/
.schedule_list_wrap ul {
    overflow-y: auto;
    max-height: 142px;
}

.schedule_list_wrap ul li {
    border: 1px solid #d2cecc;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 8px 15px;
    box-sizing: border-box;
}

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

.schedule_list_wrap ul li .category {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    background: #ebe7e5;
    border-radius: 7px;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
}

.schedule_list_wrap ul li .tit {
    margin-right: auto;
    padding-left: 10px;
}

.schedule_list_wrap ul li .btn {
    font-size: 12px;
    color: #fff;
    height: 26px;
    line-height: 26px;
    padding: 0 15px;
    border-radius: 11px;
}

/* file_preview_wrap */
/*=======================================================================================*/
.file_preview_wrap .video {
    margin-bottom: 10px;
}

.file_preview_wrap .video video {
    width: 100%;
    max-height: 50%;
}

.file_preview_wrap .step {
    background: #f9f7f6;
    box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.06);
    padding: 20px 35px 55px;
}

.file_preview_wrap .step ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file_preview_wrap .step ul>i {
    font-size: 16px;
    color: #afa09e;
}

.file_preview_wrap .step ul li {
    position: relative;
}

.file_preview_wrap .step ul li i {
    display: block;
    background: #b9afac;
    border-radius: 21px;
    color: #fff;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
}

.file_preview_wrap .step ul li span {
    display: block;
    text-align: center;
    font-size: 12px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    width: 100px;
    white-space: nowrap;
    line-height: 1.3;
}

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

.file_preview_wrap .step ul li.on i {
    background: #e64325;
}

.file_preview_wrap .step ul li.on span {
    color: #e64325;
}

/* layform_preview_wrap */
/*=======================================================================================*/
.layform_preview_wrap {
    margin-bottom: 20px;
}

.layform_preview_wrap h4 {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 6px;
}

.layform_preview_wrap .preview {
    aspect-ratio: 520/246;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d4d4d4;
    overflow: hidden;
}

.preview_layform_set {
    height: 100%;
}

.preview_layform_set.h11 {
    display: flex;
}

.preview_layform_set.h11>div {
    flex: 1;
}

.preview_layform_set.h11>div img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}

/* file_list_wrap */
/*=======================================================================================*/
.file_list_wrap ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f7f6;
    border: 1px solid #ebe9e8;
    border-radius: 4px;
    padding: 13px 20px;
    margin-bottom: 8px;
}

.file_list_wrap ul li .tit span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    border-radius: 7px;
    background: #a49791;
    box-shadow: 0 0 6px inset #a49791;
    color: #fff;
    font-size: 12px;
    padding: 0 8px;
    margin-bottom: 5px;
    font-weight: 900;
}

.file_list_wrap ul li .tit em {
    display: block;
}

.file_list_wrap ul li .info {
    display: flex;
    gap: 20px;
}

.file_list_wrap ul li .info .category {
    position: relative;
}

.file_list_wrap ul li .info .category i {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    border-radius: 7px;
    background: #f6b488;
    box-shadow: 0 0 6px inset rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 10x;
    padding: 0 8px;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    margin-left: 3px;
}

.file_list_wrap ul li .info .category::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 12px;
    background: #d8d3d3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -10px;
}

/* widget_list_wrap */
/*=======================================================================================*/
.widget_list_wrap>ul {
    overflow-y: auto;
    max-height: calc(100vh - 315px);
}

.widget_list_wrap>ul>li {
    background: #f9f7f6;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 0;
    line-height: 0;
}

/* layerform_screen_preview */
/*=======================================================================================*/
.layerform_screen_preview .screen {
    margin-bottom: 10px;
}

.layerform_screen_preview .control {
    background: #f9f7f6;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.layerform_screen_preview .control .volume_control_wrap {
    border: none;
    background: none;
    min-width: 260px;
}

.layerform_screen_preview .control>.btn {
    display: block;
    min-width: 100px;
    height: 36px;
    line-height: 36px;
    border-radius: 16px;
}

/* layerform_setting_area */
.layerform_setting_area {
    aspect-ratio: 840/471;
    display: flex;
    gap: 4px;
}

.layerform_setting_area>div {
    flex: 1;
    position: relative;
    background: #393939;
    border-radius: 4px;
}

.layerform_setting_area>div:nth-child(2) {
    flex: 2;
}

.layerform_setting_area>div::before {
    content: "Drop Here";
    color: #706a68;
    font-size: 30px;
    font-family: "Poppins", sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.layerform_setting_area>div img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.layerform_setting_area .over_btnset {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layerform_setting_area .over_btnset .inner .btn {
    display: block;
    min-width: 100px;
    height: 36px;
    line-height: 36px;
    border-radius: 16px;
    margin-bottom: 10px;
}

.layerform_setting_area .over_btnset .inner .btn i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    font-size: 15px;
}

.layerform_setting_area .over_btnset .inner .btn span {
    display: inline-block;
    vertical-align: middle;
}

/* cctv_board_list_wrap */
/*=======================================================================================*/
.cctv_board_list_wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.cctv_board_list_wrap ul li {
    width: calc(20% - 16px);
}

.cctv_board_list_wrap ul li .video {
    aspect-ratio: 320/210;
    font-size: 0;
    line-height: 0;
}

.cctv_board_list_wrap ul li .video video {
    width: 100%;
    height: 100%;
}

.cctv_board_list_wrap ul li .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f7f6;
    border-bottom: 1px solid #efecec;
    border-right: 1px solid #efecec;
    border-left: 1px solid #efecec;
    padding: 10px 15px;
}

.cctv_board_list_wrap ul li .info .left .category {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    border-radius: 8px;
    background: #0671db;
    color: #fff;
    font-size: 11px;
    padding: 0 8px;
}

.cctv_board_list_wrap ul li .info .left .tit {
    display: inline-block;
    vertical-align: middle;
}

/* cctv_video_view */
/*=======================================================================================*/
.cctv_video_view .video {
    aspect-ratio: 320/210;
    font-size: 0;
    line-height: 0;
}

.cctv_video_view .video video {
    width: 100%;
    height: 100%;
}

/* side_schedule_list */
/*=======================================================================================*/
.side_schedule_list {
    padding: 15px 0 0;
    height: calc(100% - 15px);
}

.side_schedule_list h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 20px 15px;
    color: #807572;
}

/* search_schedule */
.search_schedule {
    border-bottom: 1px solid #e1dedd;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.search_schedule .row {
    display: flex;
    padding: 0 20px;
    gap: 10px;
}

.search_schedule .row .column {
    flex: 1;
    padding-bottom: 10px;
}

.search_schedule .row:last-child .column {
    padding-bottom: 0;
}

.search_schedule .form_cont_wrap {
    display: block;
}

.search_schedule .form_cont_wrap>label {
    margin-bottom: 8px;
    min-width: auto;
}

/* side_caption */
.side_caption {
    text-align: center;
    padding-top: 15px;
}

.side_caption span {
    background: #4bacc6;
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}

/* side_list_media */
.side_list_media {
    padding: 10px 20px;
    max-height: calc(100% - 220px);
    overflow-y: auto;
}

.side_list_media ul li {
    display: flex;
    gap: 10px;
    border-bottom: 2px dotted #e1d8d8;
    padding: 10px 0;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.side_list_media ul li:active {
    transform: translateY(1px) scale(0.97);
}

.side_list_media ul li::before,
.side_list_media ul li::after {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}

.side_list_media ul li::before {
    content: "";
    border: 3px dashed #ee144f;
    border-radius: 8px;
    width: calc(100% + 20px);
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.97);
}

.side_list_media ul li::after {
    content: "";
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 13px;
    color: #fff;
    background: #ee144f;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Sharp";
    font-weight: 500;
    content: "\f105";
    z-index: 3;
    font-size: 18px;
}

.side_list_media ul li.active::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.side_list_media ul li.active::after {
    opacity: 1;
    right: -19px;
}

.side_list_media ul li .img_thumb {
    width: 110px;
    aspect-ratio: 110/100;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.side_list_media ul li .img_thumb img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}

.side_list_media ul li .cont {
    flex: 1;
    position: relative;
}

.side_list_media ul li .cont .category {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: #0671db;
    border-radius: 4px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    margin-bottom: 3px;
}

.side_list_media ul li .cont .tit {
    word-break: keep-all;
}

.side_list_media ul li .cont .status {
    position: absolute;
    left: 0;
    bottom: 0;
}

.side_list_media ul li .cont .status {
    font-size: 12px;
}

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

.today_schedule_wrap>.top {
    height: 60px;
    position: relative;
    border-bottom: 1px solid #e3dedc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.today_schedule_wrap>.top .btn {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 6px;
    background: #948880;
}

.today_schedule_wrap>.top .btn i {
    color: #fff;
}

.today_schedule_wrap>.top span {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
}

.today_schedule_wrap>.top .desc {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.today_schedule_wrap .cont {
    height: calc(100% - 60px);
}

.today_schedule_wrap .cont .time_area {
    height: 100%;
    overflow-y: auto;
}

.today_schedule_wrap .cont .time_area .inner {
    display: flex;
}

.today_schedule_wrap .cont .time_area .time {
    width: 80px;
    height: 100%;
}

.today_schedule_wrap .cont .time_area .inner>ul {
    background: url(../images/BG_TIME.jpg) repeat;
    flex: 1;
    height: 100%;
}

.today_schedule_wrap .cont .time_area .inner>ul>li {
    border-bottom: 1px dashed #d2d0d0;
    height: 30px;
    position: relative;
}

.today_schedule_wrap .cont .time_area ul li::before {
    position: absolute;
    left: -46px;
    top: -9px;
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_00::before {
    content: "00:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_01::before {
    content: "01:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_02::before {
    content: "02:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_03::before {
    content: "03:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_04::before {
    content: "04:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_05::before {
    content: "05:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_06::before {
    content: "06:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_07::before {
    content: "07:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_08::before {
    content: "08:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_09::before {
    content: "09:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_10::before {
    content: "10:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_11::before {
    content: "11:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_12::before {
    content: "12:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_13::before {
    content: "13:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_14::before {
    content: "14:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_15::before {
    content: "15:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_16::before {
    content: "16:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_17::before {
    content: "17:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_18::before {
    content: "18:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_19::before {
    content: "19:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_20::before {
    content: "20:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_21::before {
    content: "21:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_22::before {
    content: "22:00";
}

.today_schedule_wrap .cont .time_area .inner>ul>li.clock_23::before {
    content: "23:00";
}

/* schedule_box_wrap */
.schedule_box_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 20px);
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    z-index: 2;
}

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

.schedule_box_wrap .box {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    max-height: 40px;
    height: 100%;
    padding: 0 10px 0 40px;
    width: 300px;
    position: relative;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow: hidden;
}

.schedule_box_wrap .box.active {
    max-height: 450px;
    z-index: 100;
}

.schedule_box_wrap .box .line {
    width: 20px;
    height: calc(100% - 12px);
    background: url(../images/LINE_DASH_VERTICAL.png) repeat-y center;
    border-radius: 7px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.schedule_box_wrap .box .box_inner {
    width: 100%;
    position: relative;
}

.schedule_box_wrap .box .box_inner .top {
    display: flex;
    align-items: center;
    line-height: 40px;
    height: 40px;
}

.schedule_box_wrap .box.active .box_inner .top {
    border-bottom: 1px solid #e3e0dd;
}

.schedule_box_wrap .box .box_inner .top .tit {
    font-size: 14px;
}

.schedule_box_wrap .box .box_inner .top .category {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    height: 20px;
    border-radius: 7px;
    padding: 0 8px;
    background: #a49791;
    color: #fff;
}

.schedule_box_wrap .box.active .box_inner ul {
    opacity: 1;
}

.schedule_box_wrap .box .box_inner ul {
    opacity: 0;
    padding: 8px 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.schedule_box_wrap .box .box_inner ul li {
    position: relative;
    padding-left: 15px;
}

.schedule_box_wrap .box .box_inner ul li::before {
    content: "";
    background: #e56616;
    width: 4px;
    height: 2px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.schedule_box_wrap .box .box_inner .bottom {
    border-top: 1px solid #e3e0dd;
    padding: 8px 0 12px;
}

.schedule_box_wrap .box .box_inner .bottom .btn {
    display: inline-block;
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    padding: 0 15px;
    border-radius: 11px;
}

/* program_btn_wrap */
.program_btn_wrap {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid #d1cdcb;
}

.program_btn_wrap .btn {
    font-size: 13px;
    height: 26px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 11px;
    min-width: 100px;
}

/* program_cont_wrap */
.program_cont_wrap {
    height: calc(100% - 48px);
    position: relative;
    overflow-y: auto;
}

.program_cont_wrap.time {
    height: calc(100% - 363px);
}

.program_cont_wrap .section {
    padding: 20px;
    border-bottom: 1px solid #d1cdcb;
}

.program_cont_wrap .section:first-child {
    height: calc(100% - 141px);
    overflow-y: auto;
}

.program_cont_wrap .section.time:first-child {
    height: 100%;
}

.program_cont_wrap .section:last-child {
    border-bottom: none;
}

.program_cont_wrap .table_wrap {
    height: auto;
}

/* none_list */
.program_cont_wrap .none_list {
    text-align: center;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

.program_cont_wrap .none_list:active {
    transform: translate(-50%, -50%) scale(0.97);
}

.program_cont_wrap .none_list img {
    width: auto;
    margin-bottom: 10px;
}

.program_cont_wrap .none_list .txt {
    color: #9c908e;
    font-size: 16px;
    line-height: 2;
}

.program_cont_wrap .none_list .txt span {
    display: inline-block;
    background: linear-gradient(217deg, #e25c17, #ee8712);
    color: #fff;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 24px;
}

.program_cont_wrap .none_list .t1 {
    margin-bottom: 10px;
}

/* program_regist_btn_wrap */
/*=======================================================================================*/
.program_regist_btn_wrap {
    padding: 20px 0;
}

.program_regist_btn_wrap ul {
    display: flex;
    justify-content: space-evenly;
}

.program_regist_btn_wrap ul li a {
    display: block;
}

.program_regist_btn_wrap ul li a .icon {
    width: 90px;
    height: 90px;
    border-radius: 40px;
    background: #df8326;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto 10px;
}

.program_regist_btn_wrap ul li a .icon::before {
    content: "";
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 47px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 40px;
}

.program_regist_btn_wrap ul li a .icon i {
    color: #fff;
    font-size: 40px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
}

.program_regist_btn_wrap ul li a .tit {
    font-size: 18px;
    margin-bottom: 5px;
}

.program_regist_btn_wrap ul li a .desc {
    color: #776d69;
    line-height: 1.6;
}

/* subtitle_loc_wrap */
/*=======================================================================================*/
.subtitle_loc_wrap {
    background: #393939;
    aspect-ratio: 100/59;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 4px;
}

.subtitle_loc_wrap .txt {
    flex: 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

.subtitle_loc_wrap .btn {
    height: 50px;
    line-height: 50px;
    background: #4d4d4d;
    border-radius: 20px;
}

.subtitle_loc_wrap .btn i {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 17px;
    margin-right: 3px;
}

.subtitle_loc_wrap .btn i.ic_top {
    background: url(../images/SVG/IC_TOP.svg) no-repeat;
    background-size: 100% 100%;
}

.subtitle_loc_wrap .btn i.ic_bottom {
    background: url(../images/SVG/IC_BOTTOM.svg) no-repeat;
    background-size: 100% 100%;
}

.subtitle_loc_wrap .btn span {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
}

.subtitle_loc_wrap .btn_subtite_top input {
    display: none;
}

.subtitle_loc_wrap .btn_subtite_top label {
    display: block;
    height: 40px;
    line-height: 40px;
    background: #4d4d4d;
    border-radius: 20px;
    text-align: center;
}

.subtitle_loc_wrap .btn_subtite_top input:checked~label {
    background: #e25c17;
}

.subtitle_loc_wrap .btn_subtite_bottom input {
    display: none;
}

.subtitle_loc_wrap .btn_subtite_bottom label {
    display: block;
    height: 40px;
    line-height: 40px;
    background: #4d4d4d;
    border-radius: 20px;
    text-align: center;
}

.subtitle_loc_wrap .btn_subtite_bottom input:checked~label {
    background: #e25c17;
}

/* subtitle_direction_wrap */
/*=======================================================================================*/
.subtitle_direction_wrap {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f9f7f6;
    padding: 0 15px;
}

.subtitle_direction_wrap .btn {
    width: 60px;
    height: 36px;
    line-height: 36px;
    border-radius: 16px;
    background: #6b615d;
}

.subtitle_direction_wrap .btn.direc_left {
    left: 15px;
}

.subtitle_direction_wrap .btn.direc_right {
    right: 15px;
}

.subtitle_direction_wrap .btn i {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #fff;
}

/* marquee */
/*=======================================================================================*/
.marquee {
    padding: 20px 0;
    overflow: hidden;
    flex: 1;
}

.marquee p {
    margin: 0;
    padding-left: 450px;
    display: inline-block;
    white-space: nowrap;
}

.marquee.left p {
    -webkit-animation-name: marquee_left;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: marquee_left;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: marquee_left;
    -ms-animation-timing-function: linear;
    -ms-animation-duration: 10s;
    -ms-animation-iteration-count: infinite;
    -o-animation-name: marquee_left;
    -o-animation-timing-function: linear;
    -o-animation-duration: 10s;
    -o-animation-iteration-count: infinite;
    animation-name: marquee_left;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.marquee.right p {
    -webkit-animation-name: marquee_right;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: marquee_right;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: marquee_right;
    -ms-animation-timing-function: linear;
    -ms-animation-duration: 10s;
    -ms-animation-iteration-count: infinite;
    -o-animation-name: marquee_right;
    -o-animation-timing-function: linear;
    -o-animation-duration: 10s;
    -o-animation-iteration-count: infinite;
    animation-name: marquee_right;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes marquee_left {
    from {
        -webkit-transform: translate(0%);
    }

    99%,
    to {
        -webkit-transform: translate(-100%);
    }
}

@-moz-keyframes marquee_left {
    from {
        -moz-transform: translate(0%);
    }

    99%,
    to {
        -moz-transform: translate(-100%);
    }
}

@-ms-keyframes marquee_left {
    from {
        -ms-transform: translate(0%);
    }

    99%,
    to {
        -ms-transform: translate(-100%);
    }
}

@-o-keyframes marquee_left {
    from {
        -o-transform: translate(0%);
    }

    99%,
    to {
        -o-transform: translate(-100%);
    }
}

@keyframes marquee_left {
    from {
        transform: translate(0%);
    }

    99%,
    to {
        transform: translate(-100%);
    }
}

/* right */
@-webkit-keyframes marquee_right {
    from {
        transform: translate(-100%);
    }

    99%,
    to {
        transform: translate(0%);
    }
}

@-moz-keyframes marquee_right {
    from {
        transform: translate(-100%);
    }

    99%,
    to {
        transform: translate(0%);
    }
}

@-ms-keyframes marquee_right {
    from {
        transform: translate(-100%);
    }

    99%,
    to {
        transform: translate(0%);
    }
}

@-o-keyframes marquee_right {
    from {
        transform: translate(-100%);
    }

    99%,
    to {
        transform: translate(0%);
    }
}

@keyframes marquee_right {
    from {
        transform: translate(-100%);
    }

    99%,
    to {
        transform: translate(0%);
    }
}

/* today_schedule_over_func */
/*=======================================================================================*/
.today_schedule_over_func {
    position: fixed;
    top: 116px;
    left: calc(100% - 200px);
    max-width: 1430px;
    width: 100%;
    height: calc(100% - 116px);
    z-index: 88;
    border-left: 1px solid #d1cdcb;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.today_schedule_over_func.active {
    left: calc(100% - 1200px);
}

.today_schedule_over_func .today_schedule_wrap {
    background: #fff;
}

.today_schedule_over_func>.btn_wrap {
    position: absolute;
    left: 0;
    top: -30px;
}

.today_schedule_over_func>.btn_wrap .btn {
    display: block;
    border-radius: 14px 14px 6px 6px;
    width: 36px;
    height: 30px;
    line-height: 32px;
}

.today_schedule_over_func>.btn_wrap .btn i {
    font-size: 18px;
}

/* program_detail_wrap */
/*=======================================================================================*/
.program_detail_wrap {
    padding-bottom: 20px;
    border-bottom: 1px dashed #d1cdcb;
    margin-bottom: 20px;
}

.program_detail_wrap.bb_none {
    border-bottom: none;
    padding-bottom: 0;
}

.program_detail_wrap h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

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

.program_cont_wrap .table_wrap .tb_top_wrap .btn_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.program_cont_wrap .table_wrap .tb_top_wrap .btn_wrap .btn {
    height: 30px;
    line-height: 30px;
    border-radius: 11px;
    padding: 0 15px;
}

.program_detail_wrap .bottom_desc {
    color: #e8352c;
    text-align: center;
    padding-top: 10px;
}

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

.subtitle_preview_wrap .top h3 {
    font-size: 16px;
    color: #807572;
    font-weight: 700;
}

.subtitle_preview_wrap .top .btn {
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 11px;
}

.btm_btn_wrap {
    text-align: center;
    border-top: 1px dashed #d6d1ce;
    padding-top: 10px;
}

.btm_btn_wrap .btn {
    display: inline-block;
    height: 26px;
    height: 26px;
    padding: 0 15px;
    border-radius: 11px;
}

/* subtitle_preview_wrap */
/*=======================================================================================*/
.immediate_tranmission {
    margin-bottom: 20px;
}

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

.immediate_tranmission>.top h3 {
    font-size: 16px;
    color: #807572;
    font-weight: 700;
}

.immediate_tranmission>.top h3 span {
    font-size: 12px;
    padding-left: 15px;
    color: #ef0a31;
}

.immediate_tranmission>.top .btn_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.immediate_tranmission>.top .btn_wrap .btn {
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 11px;
}

.immediate_tranmission>.cont {
    padding: 15px;
    background: #f9f7f6;
    -webkit-animation-name: dashed_sparkling;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: dashed_sparkling;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: dashed_sparkling;
    -ms-animation-timing-function: linear;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -o-animation-name: dashed_sparkling;
    -o-animation-timing-function: linear;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    animation-name: dashed_sparkling;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.immediate_tranmission>.cont .table_data_wrap {
    background: #fff;
}

@-webkit-keyframes dashed_sparkling {
    0% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }

    50% {
        border: 3px dashed rgba(226, 130, 146, 1);
    }

    100% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }
}

@-moz-keyframes dashed_sparkling {
    0% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }

    50% {
        border: 3px dashed rgba(226, 130, 146, 1);
    }

    100% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }
}

@-ms-keyframes dashed_sparkling {
    0% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }

    50% {
        border: 3px dashed rgba(226, 130, 146, 1);
    }

    100% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }
}

@-o-keyframes dashed_sparkling {
    0% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }

    50% {
        border: 3px dashed rgba(226, 130, 146, 1);
    }

    100% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }
}

@keyframes dashed_sparkling {
    0% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }

    50% {
        border: 3px dashed rgba(226, 130, 146, 1);
    }

    100% {
        border: 3px dashed rgba(226, 130, 146, 0);
    }
}

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

.data_add_btn_wrap .txt {
    color: #ef0a31;
}

.data_add_btn_wrap .btn_wrap {
    text-decoration-skip: flex;
    align-items: center;
}

.data_add_btn_wrap .btn_wrap .btn {
    height: 26px;
    line-height: 26px;
    border-radius: 11px;
    padding: 0 15px;
}

/* time_media_list_wrap */
/*=======================================================================================*/
.time_media_list_wrap {
    background: #f9f7f6;
    height: 316px;
    position: relative;
    padding: 20px;
}

/* none_list */
.time_media_list_wrap>.none_list {
    color: #9c908e;
    font-size: 16px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    cursor: pointer;
}

.time_media_list_wrap>.none_list:active {
    transform: translate(-50%, -50%) scale(0.97);
}

.time_media_list_wrap>.none_list span {
    display: inline-block;
    background: linear-gradient(217deg, #e25c17, #ee8712);
    color: #fff;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 24px;
}

/* list */
.time_media_list_wrap>h3 {
    font-size: 16px;
    color: #807572;
    font-weight: 700;
    margin-bottom: 10px;
}

.time_media_list_wrap>ul {
    display: flex;
    gap: 15px;
    overflow-x: auto;
}

.time_media_list_wrap>ul>li>a {
    display: block;
    width: 200px;
}

.time_media_list_wrap>ul>li>a .card_box {
    filter: none;
    border: 1px solid #d4d4d4;
}

.time_media_list_wrap>ul>li>a .card_box:hover {
    transform: scale(1);
}

/* file_uploading */
/*=======================================================================================*/
.file_uploading {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file_uploading .file_uploading_inner .icon_motion {
    width: 40px;
    height: 42px;
    background: url(../images/IMG_DISK.png) no-repeat;
    background-size: 100% 100%;
    animation: moveUpFadeOut 1.4s infinite ease-out;
    margin: 0 auto 10px;
}

.file_uploading .file_uploading_inner .txt {
    color: #fff;
    animation: moveUpFadeOutTxt 1.4s infinite;
    text-align: center;
}

@keyframes moveUpFadeOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translateY(-16px);
        opacity: 0;
    }
}

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

    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}

/* file_transing */
/*=======================================================================================*/
.file_transing {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file_transing .file_transing_inner .icon_motion {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 5px;
}

.file_transing .file_transing_inner .icon_motion .icon1 {
    width: 40px;
    height: 42px;
    background: url(../images/IMG_DISK.png) no-repeat;
    background-size: 100% 100%;
    animation: moveRightFadeOut 2s infinite;
}

.file_transing .file_transing_inner .icon_motion .icon2 {
    width: 45px;
    height: 35px;
    background: url(../images/IMG_VIDEO.png) no-repeat;
    background-size: 100% 100%;
    animation: moveRightFadeOut2 2s infinite;
}

.file_transing .file_transing_inner .txt {
    color: #fff;
    animation: moveUpFadeOutTxt 1.4s infinite;
    text-align: center;
}

@keyframes moveRightFadeOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    90% {
        transform: translateX(87px) rotate(180deg) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateX(87px) rotate(180deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes moveRightFadeOut2 {
    0% {
        transform: translateX(-87px) rotate(-180deg) scale(0.9);
        opacity: 0;
    }

    90% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
    }
}


/* arrangements_list_wrap */
/*=======================================================================================*/
.arrangements_list_wrap {
    padding: 0 20px;
    overflow-y: auto;
    height: calc(100% - 24px);
}

.arrangements_list_wrap .inner_menu {
    margin-bottom: 10px;
}

.arrangements_list_wrap .inner_menu h4 {
    color: #fff;
    border-radius: 6px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    position: relative;
    font-size: 15px;
}

.arrangements_list_wrap .inner_menu h4:after {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Sharp";
    content: "\f107";
    color: #fff;
    font-size: 18px;
}

.arrangements_list_wrap .inner_menu h4.active:after {
    content: "\f106";
}

.arrangements_list_wrap .inner_menu h4.normal {
    background: #8064A2;
}

.arrangements_list_wrap .inner_menu h4.event {
    background: #4BACC6;
}

.arrangements_list_wrap .inner_menu h4.signal {
    background: #4B6CC6;
}

.arrangements_list_wrap .inner_menu h4.bridge {
    background: #4BC68D;
}

.arrangements_list_wrap .inner_menu .cont ul li {
    border-bottom: 1px dashed #D1CDCB;
    box-sizing: border-box;
}

.arrangements_list_wrap .inner_menu .cont ul li:last-child {
    border-bottom: none;
}

.arrangements_list_wrap .inner_menu .cont ul li a {
    display: flex;
    align-items: center;
    height: 40px;
    padding-right: 10px;
}

.arrangements_list_wrap .inner_menu .cont ul li a .color {
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    border-radius: 4px;
    margin-right: 5px;
}

.arrangements_list_wrap .inner_menu .cont ul li a .name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 말줄임 적용 */
}

.arrangements_list_wrap .inner_menu .cont ul li a .file_num i {
    display: inline-block;
    vertical-align: middle;
    color: #9A8E8B;
    font-size: 12px;
}

.arrangements_list_wrap .inner_menu .cont ul li a .file_num span {
    display: inline-block;
    vertical-align: middle;
    color: #9A8E8B;
    font-size: 12px;
}

.arrangements_list_wrap .inner_menu .cont ul li.active a {
    background: #FBBBA2;
    padding-left: 15px;
    border-radius: 4px;
    position: relative;
}

.arrangements_list_wrap .inner_menu .cont ul li.active a:after {
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 18px solid transparent;
    border-left: 10px solid #FBBBA2;
    border-bottom: 18px solid transparent;
}

.arrangements_list_wrap .inner_menu .cont ul li.active a .file_num i,
.arrangements_list_wrap .inner_menu .cont ul li.active a .file_num span {
    color: #fff;
}

/* set_permission */
/*=======================================================================================*/
.set_permission {
    border: 2px solid #d2d6db;
    border-radius: 4px;
    background: #f6f7f9;
}

.set_permission .all {
    border-bottom: 2px dashed #d2d6db;
    padding: 10px 15px;
}

.set_permission>ul {
    padding: 5px 0;
}

.set_permission>ul>li {
    padding: 4px 15px;
    position: relative;
}

.set_permission .depth2 {
    padding-top: 5px;
    position: relative;
}

.set_permission .depth2::before {
    content: "";
    width: 2px;
    height: calc(100% - 17px);
    background: #acaeaf;
    position: absolute;
    left: 7px;
    top: 0;
}

.set_permission .depth2>li {
    padding: 3px 25px;
    position: relative;
}

.set_permission .depth2>li::after {
    content: "";
    width: 8px;
    height: 2px;
    background: #acaeaf;
    position: absolute;
    left: 9px;
    top: 14px;
}

.set_permission .box {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 15px inset rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    display: inline-block;
    padding: 4px 15px;
    margin-left: 10px;
}

.set_permission .box .input_checks {
    margin-right: 5px;
}


/* category_wrap */
/*=======================================================================================*/
.category_wrap {
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
}

.category_wrap .category_set {
    background: #f6f7f9;
    box-shadow: 0 0 15px inset rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 15px 15px;
    min-width: 280px;
}

.category_wrap .category_set h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px;
}


.category_wrap .category_set .categoy_choice {
    border: 1px solid #d2cecc;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    height: 190px;
    margin-bottom: 5px;
    overflow-y: auto;
}

.category_wrap .category_set .categoy_choice ul {
    padding: 5px 0;
}

.category_wrap .category_set .categoy_choice ul li {
    padding: 5px 10px;
    cursor: pointer;
}

.category_wrap .category_set .categoy_choice ul li.active {
    background: #168eea;
    color: #fff;
}


.category_wrap .category_set .categoy_choice .sortlist {
    padding: 5px 0;
}

.category_wrap .category_set .categoy_choice .sortlist div {
    padding: 5px 10px;
    cursor: pointer;
}

.category_wrap .category_set .categoy_choice .sortlist div.active {
    background: #168eea;
    color: #fff;
}

.category_wrap .category_set .form_element_wrap {
    margin-bottom: 6px;
}

.category_wrap .category_set .form_element_wrap .form_select {
    height: auto;
    padding: 10px 0;
}

.category_wrap .category_set .form_element_wrap .form_select option {
    padding: 5px 10px;

}

.category_wrap .category_set .form_element_wrap .form_select option:checked {
    background: #168eea;
    color: #fff;
}

.category_wrap .category_set .form_element_wrap.radio_wrap {
    display: flex;
}

.category_wrap .category_set .form_element_wrap.radio_wrap .btn {
    height: 30px;
    line-height: 30px;
    margin-left: auto;
}

.category_wrap .category_set .btn_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.category_wrap .category_set .btn_wrap .btn {
    height: 36px;
    border-radius: 16px;
    padding: 0 15px;
    flex: 1;
}

.category_wrap .category_set .btn_sequence_wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.category_wrap .category_set .btn_sequence_wrap .btn {
    height: 36px;
    border-radius: 16px;
    padding: 0 15px;
}

.category_wrap .category_set .btn_sequence_wrap .btn:first-child {
    flex: 1;
}

/* cardBorad_list_wrap */
/*=======================================================================================*/
.cardBorad_list_wrap {
    margin-bottom: 20px;
}

.cardBorad_list_wrap>ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 15px;
}

/* cardBox */
.cardBox {
    background: #f6f7f9;
    box-shadow: 0 0 15px inset rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 15px 15px;
}

.cardBox .tit {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 6px;
}

.cardBox .tit .category {
    padding: 3px 10px 0;
    border-radius: 8px;
    margin-right: 10px;
    color: #fff;
    min-width: 70px;
    text-align: center;
}

.cardBox .tit .category.green {
    background: #239c84;
    border: 1px solid #1a8f78;
}

.cardBox .tit .category.blue {
    background: #168eea;
    border: 1px solid #1487df;
}

.cardBox .tit .category.gray {
    background: #5d656b;
    border: 1px solid #4a5157;
}

.cardBox .tit span {
    display: inline-block;
    vertical-align: middle;
    padding-right: 30px;
    position: relative;
    color: #8b9297;
}

.cardBox .tit span:after {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Sharp";
    content: "\f105";
    font-size: 15px;
    color: #b5b9bd;
}

.cardBox .tit span:last-child {
    color: #2b2c30;
}

.cardBox .tit span:last-child::after {
    display: none;
}

.cardBox .cont {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.cardBox .cont .table_data_wrap {
    flex: 1;
}

.cardBox .bottom {
    display: flex;
    gap: 5px;
    justify-content: end;
}

.cardBox .bottom .btn {
    border-radius: 10px;
    padding: 0 10px;
    line-height: 24px;
    height: 26px;
    min-width: 60px;
}

/* tags */
/*=======================================================================================*/
#tagsContainer {
    padding-top: 5px;
}

#tagsContainer .tag {
    display: inline-block;
    background: #0671db;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 12px;
    padding: 0 8px;
    margin-right: 5px;
}

#tagsContainer .tag button {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 40%;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
}

#tagsContainer .tag button:after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 6 Sharp";
    content: "\f00d";
    font-size: 12px;
    color: #fff;
}


/* answer_set */
/*=======================================================================================*/

/* anwer_set_top */
.anwer_set_top {
    border: 2px solid #e6e3e1;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.anwer_set_top .btn_wrap label {
    font-weight: 500;
    padding-right: 10px;
}

.anwer_set_top .btn_wrap .btn {
    border-radius: 13px;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
    min-width: 60px;
}

/* answer_set_wrap */
.answer_set_wrap {
    margin-bottom: 20px;
}

/* answer_set */
.answer_set {
    padding: 0 0 0 0px;
    display: flex;
    margin-bottom: 10px;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
    max-height: 500px;
}

.answer_set .number {
    background: #f0eeed;
    border: 2px solid #e6e3e1;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.answer_set .number .num {
    margin-bottom: 10px;
}

.answer_set .number .num span {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 3px;
}

.answer_set .number .num em {
    display: block;
    background: #5d656b;
    border: 1px solid #4a5157;
    color: #fff;
    text-align: center;
    border-radius: 45%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    margin: 0 auto;
}

.answer_set .number .btn_wrap {
    text-align: center;
}

.answer_set .number .btn_wrap .btn {
    border-radius: 10px;
    padding: 0 10px;
    line-height: 24px;
    height: 24px;
    min-width: 30px;
    font-size: 12px;
}


.answer_set .inner {
    flex: 1;
    padding: 15px 20px;
    position: relative;
    border-top: 2px solid #e6e3e1;
    border-bottom: 2px solid #e6e3e1;
    background: #f9f7f6;
}

.answer_set .inner .row {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 2px dashed #e6e3e1;
    padding-bottom: 10px;
    gap: 10px;
}

.answer_set .inner .row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


.answer_set .inner .row .title {
    flex: 1;
}

.answer_set .inner .code {
    min-width: 180px;
}

.answer_set .inner .code h5 {
    display: block;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 5px;
}

.answer_set .inner .code .cont {
    background: #e9e9e9;
    box-shadow: 0 0 10px inset rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    position: relative;
}

.answer_set .inner .code .cont .btn {
    display: block;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    border-radius: 9px;
    padding: 0 5px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.answer_set .inner .letter_location .form_input {
    width: 320px;
}

.answer_set .inner .text_view h5 {
    display: block;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 5px;
}

.answer_set .inner .text_view .cont {

    height: 36px;
    line-height: 36px;
    position: relative;
}

.answer_set .inner .text_view .cont .btn {
    border-radius: 14px;
    padding: 0 10px;
    line-height: 36px;
    height: 36px;
    min-width: 60px;
}


.answer_set .inner .form_cont_wrap {
    display: block;
    min-height: inherit;
}

.answer_set .inner .form_cont_wrap>label {
    min-width: auto;
    margin-bottom: 5px;
}

.answer_set .inner .form_cont_wrap .form_element_wrap {
    max-width: inherit;
    min-width: inherit;
    min-height: 36px;
}


.answer_set .btn_fold_wrap {
    width: 50px;
    border: 2px solid #e6e3e1;
}

.answer_set .btn_fold_wrap .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 100%;
    height: 100%;
}

.answer_list {
    background: #fff;
    border: 2px solid #e6e3e1;
    border-radius: 36px 10px 10px 36px;
}

.answer_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #e6e3e1;
    padding: 8px 13px;
}

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

.answer_list li .num {
    background: #5d656b;
    border: 1px solid #4a5157;
    color: #fff;
    text-align: center;
    border-radius: 45%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.answer_list li .num span {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 3px;
}

.answer_list li .num em {
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}

.answer_list li .list_inner {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.answer_list li .list_inner .note {
    flex: 1;
}

.answer_set.expanded {
    max-height: 85px;
    /* Set a high enough max-height to accommodate all content */
    transition: max-height 0.6s ease-out;
}

.answer_set .btn_folding i {
    transition: transform 0.3s ease;
}

.answer_set.expanded .btn_folding i {
    transform: rotate(180deg);
}

.answer_set.depth2 {
    position: relative;
}

.answer_set.depth2 .number {
    margin-left: 48px;
}

.answer_set.depth2 .number .num em {
    width: 63px;
    border-radius: 18px;
    font-size: 16px;
}

.answer_set.depth2 .number {
    background-color: #dddad9;
    border-color: #d3d0cd;
}

.answer_set .inner .paragraph {
    flex: 1;
}



.answer_set .inner .cont {
    display: flex;
    gap: 10px;
}

/* document_cont */
/*=======================================================================================*/
.tb_data_wrap {
    max-height: 700px;
    overflow-y: auto;
}

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

.document_cont .document_paper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.document_cont .document_paper .ql-editor {
    max-height:70vh;
    min-height:40vh;
}

.document_cont .document_paper .ex_doc {
    flex: 1;
}

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

.document_cont .document_paper .ex_doc .cont {
    border: 2px solid #e6e3e1;
    height: calc(100% - 31px);
    border-radius: 12px;
    padding: 10px;
}

/* stepAnswer_wrap */
/*=======================================================================================*/
.stepAnswer_wrap {
    border: 4px solid #D2D2D2;
    margin-bottom: 10px;
}
.stepAnswer_wrap .top {
    display: flex;
    justify-content: space-between;
    align-items:center;
    background: #F1F1F1;
    padding: 10px 15px;
}
.stepAnswer_wrap .top .tit {    
    
}
.stepAnswer_wrap .top .tit span {
    background: #5d656b;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    margin-right: 5px;
}
.stepAnswer_wrap .top .btn_wrap {
}
.stepAnswer_wrap .top .btn_wrap .btn {
    padding: 5px 10px;
    border-radius: 10px;
    min-width:80px;
}
.stepAnswer_wrap > .cont {
    padding:10px 10px 0 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;
}

.stepAnswer_wrap.close .cont {
    display : none;
}
.stepAnswer_wrap .cont::before {
    content: "";
    width: 4px;
    height: calc(100% - 80px);
    background: #cccac9;
    position: absolute;
    left: 20px;
    top: 0;
}

.answer_set.depth2::before {
    content: "";
    width: 4px;
    height: 50%;
    background: #cccac9;
    position: absolute;
    left: 10px;
    top: 0;
}
.answer_set.depth2::after {
    content: "";
    width: 25px;
    height: 4px;
    background: #cccac9;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}



/* admin_2division */
/*=======================================================================================*/
.admin_2division {
    display: grid;
    grid-template-columns: 1022px 1fr;
    gap: 20px;
}
.admin_2division .left {
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    -moz-box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
}

.admin_2division .right .form_cont_wrap {
    display: block;
}
.admin_2division .right .form_cont_wrap>label {
    min-width: auto;
    margin-bottom: 5px;
}
.admin_2division .right .form_cont_wrap>.form_cont.box {
    background: #fff;
    -webkit-box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    -moz-box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    box-shadow: 0 0 16px rgba(10, 59, 81, 0.06);
    border-radius: 8px;
    padding: 15px 20px;
} 
.admin_2division .right .form_cont_wrap>.form_cont .btn{
    height: 36px;
    border-radius: 16px;
    padding: 0 20px;
    min-width: 120px;
}

/* 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 {
    flex: 1;
    min-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;
    border-radius: 10px;
    line-height: 36px;
}

.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_pop_wrap */
/*=======================================================================================*/

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

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

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