/* ------------------------------------------------------------------------------------------- */
/* Main */
.con01 {    
    width: 100%;
    height: 100%;
}

.con01_out {
    margin: 10px;    
    width: calc(100% - 20px);
    height: 95%;
}

/* ------------------------------------------------------------------------------------------- */
/* Header */
.con01_head {
    margin: 10px;

    width: calc(100% - 20px);
    height: 50px;

    background-color: var(--color-back-box1);
    border: 1px solid var(--color-bord1);
    border-radius: 5px;    

    display: grid;
    grid-template-columns: 1250px max-content;
}

.con01_head_grd1 {
    display: grid;
    grid-template-columns: 
        5px  80px   5px  /* Refresh */
        70px        5px  /* Date */
        70px 70px   5px  /* Close, Vol */
        70px 50px   5px  /* Limit : Cost, Cnt */
        30px 30px  /* KS */
        30px 30px  /* TM */
        30px 30px    5px /* SEL */
        12px 40px 12px 40px   5px /* sum avg */
        30px 30px 30px 30px 30px 30px 30px 30px 30px 30px /* BOL, RSI, DOL, DIV, KUR */
        ;

    column-gap: 5px;
}

.con01_head_grd2 {
    margin: 0;

    /* display: grid;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 1px; */
}

.con01_head_grd2_box1,
.con01_head_grd2_box2 {
    /* transform: translateY(-14px); */
    
    height: 15px;

    display: grid;
    grid-template-columns:
        20px 40px 50px 50px 50px  /* Cnt        */        
        20px 40px 50px 50px 50px  /* Total      */
        45px 65px 65px 95px       /* Income     */        
        45px 85px 85px 115px      /* Income 2   */        
        ;

    column-gap: 10px;
}

#id_txt_con01_00,
#id_txt_con01_01,
#id_txt_con01_02,
#id_txt_con01_03,
#id_txt_con01_04 {
    font-size: 11px;
    text-align: right;
    padding-right: 5px;
}

.con01_head_grd1 span {
    font-size: 12px;
    font-weight: 600;
}

.spn_con01_rsi {
    /* color: var(--color-red1); */
    color: var(--color-blue1);
}


/* ------------------------------------------------------------------------------------------- */
/* Main */
.con01_main {
    margin: 10px;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    /* display: grid;
    grid-template-columns: 55% 45%;
    column-gap: 10px; */
}

.con01_main_grd1 { 
    margin-bottom: 10px;

    /* width: 100%; */

    height: calc(100% - 10px);

    background-color: var(--color-back-box1);

    border: 1px solid var(--color-bord1);
    border-radius: 5px;

    overflow-x: auto; /* 위 아래 모두 있어야 함 */
    overflow-y: auto; /* 위 아래 모두 있어야 함 */
}

.con01_main_tbl1_out {
    margin: 10px;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    background-color: var(--color-back-box1);

    overflow-x: auto; /* 위 아래 모두 있어야 함 */
    overflow-y: auto; /* 위 아래 모두 있어야 함 */
}

.con01_main_tbl1 tbody tr td {
    cursor: pointer;
}

.con01_main_tbl1 th:first-child { 
    position: sticky; 
    left: 0;
}

.con01_main_tbl1 th:nth-child(2) { 
    position: sticky; 
    left: 30px;
}

.con01_main_tbl1 th:nth-child(3) { 
    position: sticky; 
    left: 60px;
}

.con01_main_tbl1 th:nth-child(4) { 
    position: sticky; 
    left: 65px;
}

.con01_main_tbl1 td:first-child { 
    position: sticky; 
    left: 0;

    background-color: var(--color-back-tbl1);
}

.con01_main_tbl1 td:nth-child(2) { 
    position: sticky; 
    left: 30px;

    background-color: var(--color-back-tbl1);
}

.con01_main_tbl1 td:nth-child(3) { 
    position: sticky; 
    left: 60px;

    background-color: var(--color-back-tbl1);
}

.con01_main_tbl1 td:nth-child(4) { 
    position: sticky; 
    left: 65px;

    background-color: var(--color-back-tbl1);
}

.con01_main_tbl1 thead tr th svg {
    position: absolute;
    
    cursor: pointer;
    fill : var(--color-updown);
    
    width: 10px;
    margin-left: 3px;
    /* margin-top: 8px; */

    border: none;
}

.con01_main_tbl1 thead tr th .search-input {      
    margin: auto;
    width: 90%;
    font-size: 12px;
    font-weight: 700;

    text-align: left;    
    
    background-color: var(--color-back-search);

    /* padding-left: 14px;     */
    padding-left: 1px;    
    border: none;
    outline: none;
}

.con01_main_tbl1 thead tr th input::placeholder {    
    color: var(--color-font-search2);
}

.con01_main_tbl1 thead tr .col_Sum {
    text-align: right;
    padding-right: 5px;
    font-weight: 700;

    background-color: var(--color-col_Sum);
}

.con01_main_tbl1 tbody tr .col_Y {
    text-align: right;
    padding-right: 5px;
    font-weight: 700;    
}

/* ------------------------------------------------------------------------------------------- */
