/* Universal tags */
* {
    box-sizing: border-box;
}
/* all text */
.t_red {
    font-weight: var(--weight-basic-bold);
    color: var(--color-red);
}
.pa_space {
    padding: 30px 0;
}
.tx_c {
    text-align: center;
}
.h4_title {
    padding: 0 0 8px 5px;
    color: var(--color-blue);
    font-size: var(--font-medium);
    font-weight: var(--weight-basic-bold);
    letter-spacing: -0.1em;
}
/****************  input style  **/
.input_style_01 {
    width: 100%;
    height: 48px;
    line-height: 46px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-input_line);
    border-radius: var(--size-r8);
    background: var(--color-white);
}
.input_style_02 {
    width: 100%;
    height: 38px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-dark-black);
    background: var(--color-white);
}

.input_style_02::placeholder {
    color: var(--color-blue);
    font-size: var(--font-basic);
    font-weight: var(--weight-basic-small);
    opacity: 1;
}
.input_style_03 {
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-indent: 8px;
    font-size: var(--font-basic);
    background: var(--color-white);
    border: none;
}
.input_style_03:hover {
    background: var(--color-input_line);
}
.search_bbs_input {
    width: 100%;
    max-width: 250px;
    height: 42px;
    line-height: 40px;
    text-indent: 8px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.search_input {
    width: 100%;
    height: 38px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.search_input_70 {
    float: right;
    width: 90%;
    height: 38px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.search_input_v2 {
    width: 100%;
    max-width: 120px;
    height: 38px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.search_input_30 {
    width: 30%;
    height: 38px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.search_date {
    width: calc(50% - 12px);
    height: 38px;
    text-indent: 5px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.select_w1 {
    width: 100%;
    max-width: 150px;
    height: 38px;
    text-indent: 5px;
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.if_select {
    width: 100%;
    max-width: 200px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-dark-black);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.if_select_list {
    width: 100%;
    max-width: 80px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-dark-black);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.input_number {
    width: 100%;
    max-width: 80px;
    height: 42px;
    font-size: var(--font-basic);
    text-align: center;
    color: var(--color-dark-black);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
.input_text_box {
    width: 100%;
    max-width: 220px;
    height: 48px;
    text-indent: 15px;
    font-size: var(--font-basic);
    border: 1px solid var(--color-input_line);
    border-radius: var(--size-r8);
    background: var(--color-white);
}
.category_textarea {
    padding: 12px;
    width: 100%;
    min-height: 250px;
    line-height: 160%;
    font-size: var(--font-basic);
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
    outline-color: var(--color-line_grey);
}
textarea.category_textarea::-webkit-input-placeholder {
    font-size: 1.05em;
    font-weight: 400;
}
textarea.category_textarea:-ms-input-placeholder {
    font-size: 1.05em;
    font-weight: 400;
}

.cy_sp2 {
    width: 100%;
    display: inline-block;
}
.cy_sp2 .bt_input1 {
    float: left;
    width: 33.33333%;
    height: 38px;
    color: var(--color-white);
    background: var(--color-black);
    border: none;
}
.cy_sp2 .bt_input2 {
    float: left;
    width: 33.33333%;
    height: 38px;
    color: var(--color-white);
    background: var(--color-dack-blue);
    border: none;
}
.cy_sp2 .bt_input3 {
    float: left;
    width: 33.33333%;
    height: 38px;
    color: var(--color-white);
    background: var(--color-dark-red);
    border: none;
}

.category_death_textarea {
    width: 20%;
    max-width: 150px;
    height: 38px;
    text-indent: 5px;
    border: 1px solid var(--color-line_grey);
    background: var(--color-white);
}
/*************** btn style **/
button.btn_login {
    width: 100%;
    height: 48px;
    font-size: var(--font-basic);
    letter-spacing: 0.05em;
    border-radius: var(--size-r8);
    font-weight: var(--weight-basic-bold);
    color: var(--color-white);
    background: var(--color-red);
    border: none;
}
button.btn_login:hover {
    background: var(--color-dark-red);
}
button.btn_button_ok {
    width: 100%;
    max-width: 200px;
    height: 48px;
    border-radius: var(--size-r8);
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-dark-red);
    background: var(--color-point_color);
}
button.btn_button_ok2 {
    width: 100%;
    max-width: 200px;
    height: 48px;
    border-radius: var(--size-r8);
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    background: var(--color-black);
}
button.btn_button_ok3 {
    width: 100%;
    max-width: 200px;
    height: 48px;
    border-radius: var(--size-r8);
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-blue);
    background: var(--color-blue);
}
.btn_search {
    width: 100%;
    max-width: 180px;
    height: 42px;
    font-weight: var(--weight-basic-bold);
    font-size: var(--font-basic);
    color: var(--color-white);
    background: var(--color-blue);
    border: 1px solid var(--color-blue);
}
.btn_excel {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-slightly-dack-green);
    border: 1px solid var(--color-slightly-dack-green);
    background: var(--color-white);
}
.btn_reg {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: #000;
    border: 1px solid var(--color-slightly-dack-green);
    background: var(--color-white);
}
.btn_del {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-dark-red);
    border: 1px solid var(--color-dark-red);
    background: var(--color-white);
}
.btn_list {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-black);
    border: 1px solid var(--color-blue);
    background: var(--color-white);
}
.btn_ok {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    background: var(--color-black);
}
.btn_st1 {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-dark-black);
    background: var(--color-dark-black);
}
.btn_st2 {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-dark-red);
    background: var(--color-dark-red);
}
.btn_st3 {
    width: 100%;
    max-width: 160px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-white);
    border: 1px solid var(--color-blue);
    background: var(--color-blue);
}
.btn_small_download {
    padding: 5px 15px;
    width: 100%;
    font-size: var(--font-basic);
    color: var(--color-white);
    border-radius: 15px;
    border: 1px solid var(--color-blue);
    background: var(--color-blue);
}
.btn_close {
    width: 100%;
    max-width: 150px;
    height: 42px;
    font-size: var(--font-basic);
    color: var(--color-grey);
    border: 1px solid var(--color-grey)!important;
    background: var(--color-white)!important;
}

/******************  타이틀 **/
.master_title {
    margin: 0 0 15px 0;
    padding: 5px 0 7px 3px;
    letter-spacing: -0.05em;
    font-size: var(--font-subtitle);
    border-bottom: 1px solid var(--color-line_grey);
}
.master_title span {
    color: var(--color-grey);
}
.title_h1 {
    margin: 0 0 15px 0;
    padding: 5px 0 7px 3px;
    letter-spacing: -0.05em;
    font-size: var(--font-subtitle);
    border-bottom: 1px solid var(--color-line_grey);
}
.title_h1 span {
    padding-left: 15px;
    font-size: 0.7em;
    color: var(--color-blue);
    font-weight: var(--weight-basic);
}
.title_h2 {
    padding: 20px 0 7px 3px;
    letter-spacing: -0.05em;
    font-size: var(--font-subtitle);
    border-top: 1px solid var(--color-line_grey);
}
.product_h3 {
    margin: 20px 0 10px 0;
    width: 100%;
    height: 42px;
    text-indent: 15px;
    line-height: 42px;
    font-size: var(--font-basic);
    font-weight: var(--weight-basic-small);
    color: var(--color-point_bg);
    background: var(--color-dark-black);
}
.product_h3 span {
    font-size: 0.9em;
    color: var(--color-white);
}
/******************  Table **/
.search_table {
    width: 100%;
    font-size: 0.9em;
    border: 0px solid var(--color-line_grey);
}
.search_table tbody tr th {
    padding: 10px;
    font-weight: var(--weight-basic);
    background: var(--color-very-bright-blue);
    border: 0px solid var(--color-line_grey);
}
.search_table tbody tr td {
    padding: 10px;
    font-weight: var(--weight-basic-small);
    border-bottom: 0px solid var(--color-line_grey);
}

.table_container {
    width: 100%;
    overflow: auto;
}
.table_container .bbs_master_qu {
    background: var(--color-input_line);
}
.table_container table {
    width: 100%;
    font-size: 0.9em;
    border: 1px solid var(--color-line_grey);
}
.table_container table thead tr th,
.table_container table thead tr td {
    padding: 10px 5px;
    font-weight: var(--weight-basic);
    background: var(--color-very-bright-blue);
    border: 1px solid var(--color-line_grey);
    white-space: nowrap; /*기본값*/
    text-overflow: clip;
}
.table_container table tbody tr th,
.table_container table tbody tr td {
    width: auto;
    min-width: 80px;
    padding: 10px 5px;
    letter-spacing: -0.05em;
    font-weight: var(--weight-basic-small);
    border: 1px solid var(--color-line_grey);
    white-space: nowrap; /*기본값*/
    text-overflow: clip; /*기본값*/
}
.table_container table tbody tr th a,
.table_container table tbody tr td a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
#pr_prod_file img {
    width: 100%;
    max-width: 100px;
}
.table_container table tbody tr:hover {
    background: var(--color-very-bright-grey);
}

.table_container .date {
    width: auto;
    font-size: 0.85em;
}
.table_container .th_checkbox {
    padding: 0;
    min-width: 30px;
    background: var(--color-white);
}

.table_container_div {
    padding: 30px 0;
    border-top: 1px solid var(--color-dack-blue);
}
.table_container_div > ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
.table_container .fas {
    margin: 0 15px;
    font-size: 0.9em;
    color: var(--color-red);
}
.table_container .por_img {
    width: 100%;
    max-width: 80px;
}
.input_table tbody tr th {
    text-align: center;
    color: var(--color-white) !important;
    background: var(--color-dark-black) !important;
    border: 1px solid var(--color-black) !important;
}
.input_table tbody tr td {
    padding: 0 !important;
    /* border: 1px solid var(--color-black) !important; */
}

.dragdiv {
    cursor: move;
}

.bbs_div_view {
}
.bbs_div_view .view_title {
    padding: 38px 0 20px 0;
    text-align: center;
    font-size: var(--font-subtitle);
}
.bbs_div_view .view_date {
    display: inline-block;
    width: 100%;
    border-top: 1px solid var(--color-input_line);
    border-bottom: 1px solid var(--color-input_line);
    background: var(--color-dark-black);
}
.bbs_div_view .view_date > ul {
    margin: 0 auto;
    width: 95%;
    font-weight: var(--weight-basic-bold);
}
.bbs_div_view .view_date > ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}
.bbs_div_view .view_date > ul > li {
    line-height: 42px;
    height: 44px;
    width: 50%;
    color: var(--color-input_line);
    font-size: 0.9em;
}
.bbs_div_view .view_date > ul > li:nth-child(1) {
    float: left;
}
.bbs_div_view .view_date > ul > li:nth-child(2) {
    float: right;
    text-align: right;
}
.bbs_div_view .view_date .tx1 {
    display: inline;
    margin-right: 20px;
    font-weight: var(--weight-basic-small);
}
.bbs_div_view .view_date .tx_li {
    padding: 15px 0;
    width: 100%;
    height: auto;
    line-height: 100%;
    border-bottom: 1px solid var(--color-grey);
}
.bbs_div_view .view_date .btn_st1 {
    color: var(--color-point_bg);
}

.bbs_div_view .view_conteiner {
    padding: 50px 35px;
    border-bottom: 1px solid var(--color-dark-black);
}
.bbs_textarea {
    padding: 20px 15px;
    width: 100%;
    min-height: 300px;
    border: none;
}
/* 첨부파일 기능 */
.excel_file_upload {
    position: relative;
    bottom: -2px;
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.file_s1 {
    margin-bottom: 2px;
    padding-left: 18px;
    height: 42px;
    line-height: 42px;
    background: var(--color-dark-black);
    color: var(--color-white);
    border: none;
}
.file_s1 button.file {
    float: right;
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    background: var(--color-light-blue);
    color: var(--color-white);
    border: none;
}
.file_th_s1 button.file {
    float: right;
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    background: var(--color-light-blue);
    color: var(--color-white);
    border: none;
}
.file_s1 button.delete {
    float: right;
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    background: var(--color-dark-red);
    color: var(--color-white);
    border: none;
}
.file_s1 .icon {
    margin-right: 20px;
    background: none !important;
    color: var(--color-point_bg);
}
.file_s1 .text {
}
td .excel_file_upload {
    max-width: 100%;
}
td .excel_file_upload button.file,
td .excel_file_upload button.delete {
    height: 44px;
    line-height: 44px;
}
td.file_td {
    background: var(--color-line_grey) !important;
}
td.file_td .file_s1 {
    margin-bottom: 2px;
    padding-left: 18px;
    height: 42px;
    line-height: 42px;
    background: var(--color-line_grey);
    color: var(--color-dack-blue);
    border: none;
}
/* 가장 하단에 있어야 하는 CSS */

input.design_ch[type="checkbox"] {
    display: none;
}

input.design_ch[type="checkbox"] + label {
    color: #555555;
}

input.design_ch[type="checkbox"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background: url("../img/check_radio_sheet.png") left top no-repeat;
    cursor: pointer;
}

input.design_ch[type="checkbox"]:checked + label span {
    background: url("../img/check_radio_sheet.png") -19px top no-repeat;
}

input.design_ch[type="radio"] {
    display: none;
}

input.design_ch[type="radio"] + label {
    color: #555555;
}

input.design_ch[type="radio"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background: url("../img/check_radio_sheet.png") -38px top no-repeat;
    cursor: pointer;
}

input.design_ch[type="radio"]:checked + label span {
    background: url("../img/check_radio_sheet.png") -57px top no-repeat;
}

:modal { /*:modal은 모달 상태의 대화상자 박스에 대한 선택자이다. 비모달 대화상자는 dialog 태그 선택자로 정의가 가능하다. */
    border:none;
    padding: 0;
}
:modal form { /* 모달 안에 있는 서식 컨테이너를 grid로 만들겁니다. 3개의 행을 가지며, 각 행은, header, body, bottom 영역으로 나뉩니다.*/
    display: grid;
    grid-template-rows: auto 1fr auto;
}
:modal form>*{ /* 서식 컨테이너 바로 아래에 있을 각 row에 padding 여백을 주어서 보기 시원한 디자인을 만듭니다. */
    box-sizing: border-box;
    padding:0.5em;
}

:modal .header { /* header에는 display를 flex로 주고, 안에 있는 모든 내용이 옆으로 달라붙도록 합니다. */
    display: flex;
}
:modal .header>.tit {
    font-size: var(--font-subtitle);
    flex:1; /*class="tit"은 타이틀 텍스트 요소입니다. flex:1;을 주면, 이 요소가 주변 요소가 있는 자리를 침범하지 않고 .header의 대부분을 차지합니다. */
}
:modal .body {
    min-height:150px; /* 최소 세로 넓이를 150픽셀로 줘서 너무 작은 대화상자가 나오는 것을 방지합니다. */
}

:modal .bottom {
    display: flex; justify-content: end; /* bottom 영역 역시 display:flex;를 줘서 가로로 정렬되게 합니다. bottom에는 대화상자 내에 있는 버튼을 넣을겁니다. 오른쪽에 버튼이 나타나길 원하니, justify-content를 end로 줍니다.*/
}

:modal button { /* 버튼 스타일을 무력화합니다. */
    appearance:none; border:none; background-color: transparent;
    font-weight: bold;
}