div.full-out-header {
    height: calc(100% - 24px)
}

.section-con {
    width     : 100%;
    background: rgba(#314351, 0.2);
    box-shadow: inset 0 0 100px rgba(#000, 0.3);
}

.section-con:hover {
    box-shadow: inset -10px 10px 100px rgba(#000, 0.3), 0 0 4px rgba(#fff, 0.2);
}

.section-title {
    display    : inline-block;
    background : linear-gradient(to right, #c2a071, transparent, transparent);
    height     : 18px;
    width      : calc(100% - 50px);
    line-height: 18px;
    font-style : oblique;
    font-weight: 700;
    text-shadow: 1px 1px 2px #000;
    font-size  : 14px;
    margin-top : 10px;
    color      : #fff;
}

.section-title-img {
    margin-top  : 10px;
    margin-left : 4px;
    margin-right: 4px;
    width       : 14px;
    height      : 14px;
}

.equipment-item-content {
    width     : 100%;
    display   : flex;
    flex-wrap : wrap;
    margin-top: 10px;

    .equipment-item {
       
        width          : calc(33.33%);
        height         : calc(50% - 22px);
        box-sizing     : border-box;
        display        : flex;
        justify-content: center;
        align-items    : center;

        .eq-item-con {
            width: 90%;
            box-sizing     : border-box;
            padding         : 8px 20px;
            background-color: rgba(#188df0, 0.2);
            border          : 1px solid rgba(#188df0, 0.6);
            cursor          : pointer;
        }

        .eq-item-con:hover {
            background-color: rgba(#ff9a00, 0.1);
            border          : 1px solid rgba(#ff9a00, 0.6);
        }
    }

    .eq-item-name {
        span {
            font-size  : 16px;
            font-weight: 700;
            color      : #b7c6d8;
        }

        .eq-item-icon {
            font-size  : 20px;
            margin-left: 10px;
            color      : #188df0;
        }

        .eq-item-total {
            font-size  : 26px;
            font-weight: bold;
            color      : #188df0;
            font-family: 'electronicFont';
            margin-top : 6px;

            i {
                font-style : normal;
                margin-left: 6px;
            }
        }

    }

    .eq-item-detail {
        >div {
            margin   : 2px 12px 0 0;
            font-size: 16px;
        }

        .eq-item-kind {
            font-size: 14px;
            color    : #b7c6d8;
        }

        .eq-item-num {
            font-size  : 18px;
            font-weight: bold;
            margin-top : 4px;
            color      : #b7c6d8;
        }
    }

    .eq-item-con:hover {
        .eq-item-name span {
            color: #ffdfc6;
        }

        .eq-item-icon {
            color: #ff9a00;
        }

        .eq-item-total {
            color: #ff9a00;
        }

        .eq-item-kind {
            color: #ffdfc6;
        }

        .eq-item-num {
            color: #ffdfc6;
        }
    }
}

.explain {
    position : absolute;
    right    : 20px;
    bottom   : 6px;
    font-size: 10px;
    color    : #9c9c9c;
}
.explain.top {
    top   : 6px;
}

.bar-item {
    width          : 100%;
    display        : flex;
    justify-content: space-around;
    align-items    : center;

    span {
        display    : inline-block;
        font-size  : 16px;
        font-weight: 700;
    }

    .name {
        width     : 80px;
        text-align: right;
        color     : #adb9c4;
    }

    .num {
        width     : 50px;
        text-align: left;
        color     : #309cfa;
        font-size : 18px;
    }

    .icon-num {
        width     : calc(100% - 140px);
        height    : 16px;
        padding   : 4px;
        box-sizing: border-box;
        display   : flex;
        margin    : 0 10px;
        border    : 1px solid rgba(0, 132, 251, .25);
        background: rgba(0, 132, 251, .1);
        position  : relative;
    }

    .icon-num-inner {
        height    : 6px;
        background: #0084fb;
    }

    .icon-num-sub {
        display  : none;
        position : absolute;
        bottom   : 150%;
        left     : 50%;
        transform: translateX(-50%);
        color    : #adb9c4;
    }
}

.bar-item:hover {
    .icon-num-sub {
        display: block;
    }
}

.type-btn-group {
    position: absolute;
    right   : 10px;
    top     : 10px;
}

.type-btn-item {
    display       : inline-block;
    font-weight   : 700;
    letter-spacing: 1px;
    padding       : 2px 8px;
    color         : #badeff;
    font-size     : 10px;
    background    : linear-gradient(to right, transparent, #0574d4, transparent);
    font-style    : oblique;
    margin        : 0 2px;
    cursor        : pointer;
    text-shadow   : 1px 1px 2px rgb(58, 58, 58);
    vertical-align: middle;
}

.type-btn-item:hover,
.type-btn-item.active {
    color     : #f1e5d2;
    background: linear-gradient(to right, transparent, #c2a071, transparent);
}

.col-flex {
    display        : flex;
    flex-direction : column;
    justify-content: space-evenly;
    align-items    : center;
}

.padding {
    padding   : 10px 20px;
    box-sizing: border-box;
}

.order-type.bar-item {
    justify-content: start;

    .order {
        width          : 20px;
        height         : 24px;
        font-size      : 14px;
        font-weight    : 700;
        color          : #ff9a00;
        background     : url('../../assets/img/order_icon.png');
        background-size: 100% 100%;
        text-align     : center;
        line-height    : 26px;
        font-style     : oblique;
        margin-right   : 10px;
        padding-right  : 2px;
        flex-grow      : 0;
        flex-shrink    : 0;
    }

    .name {
        text-align : left;
        flex-grow  : 0;
        flex-shrink: 0;
    }

    .icon-num {
        text-align: left;
    }

    .icon-num-inner {
        background-color: #0084fb;
        // background: linear-gradient(to right, transparent, #0084fb);
    }

    .icon-num-inner {
        width: 100%
    }
}

.order-type:nth-of-type(1),
.order-type:nth-of-type(2),
.order-type:nth-of-type(3) {
    .icon-num {
        border    : 1px solid rgba(255, 154, 0, .15);
        background: rgba(255, 154, 0, .1);
    }

    .icon-num-inner {
        background-color: #ff9a00;
        // background: linear-gradient(to right, transparent, #ff9a00);
    }

    .num {
        color: #ffdaa5;
    }
}

.order-type:nth-of-type(4),
.order-type:nth-of-type(5) {
    .order {
        color      : #bde0ff;
        background : none;
        line-height: 28px;
    }

}

.scroll-table {
    .scroll-table-header {
        width          : 100%;
        display        : flex;
        justify-content: space-around;
        background     : rgba(#0574d4, 0.8);
        background     : rgba(92, 88, 79, 0.6);
        height         : 36px;
        line-height    : 36px;
        padding        : 0 10px;
        box-sizing     : border-box;

    }

    .scroll-table-body {
        height  : calc(100% - 36px);
        overflow: hidden;
    }

    .header-item,
    .column-item {
        text-align: left;
    }

    .scroll-table-column {
        width          : 100%;
        display        : flex;
        justify-content: space-around;
    }

    .header-item {
        font-size  : 16px;
        font-weight: 700;
        color      : #d8dddd;
    }

    .scroll-table-column {
        padding      : 6PX 10px;
        box-sizing   : border-box;
        border-bottom: 1px solid rgba(0, 132, 251, .2);
    }

    .scroll-table-column:nth-of-type(2n) {
        background-color: rgba(0, 132, 251, .1);
    }

    .column-item {
        font-size    : 12px;
        color        : #dbdbdb;
        padding-right: 4px;
        box-sizing   : border-box;
    }

    .column-item-icon {
        display         : inline-block;
        width           : 10px;
        height          : 10px;
        line-height     : 12px;
        background-color: #ff9a00;
        border-radius   : 100%;
        margin-right    : 4px;
    }
}


.pop-modal {
    display   : flex;
    margin-top: 40px;

    .pop-modal-item {
        position     : relative;
        width        : 200px;
        border       : 1px solid #309cfa;
        padding      : 10px 20px;
        margin-bottom: 16px;
        box-shadow   : inset -5px 5px 40px rgba(68, 162, 245, 0.2), inset -5px -5px 40px rgba(68, 162, 245, 0.2), inset 5px -5px 40px rgba(68, 162, 245, 0.2), inset 5px 5px 40px rgba(68, 162, 245, 0.2);
        box-sizing   : border-box;
        margin-right : 20px;
    }

    .pop-modal-item:before {
        content : '';
        position: absolute;
        width   : 100%;
        height  : 100%;
        left    : 2px;
        top     : 2px;
        border  : 1px solid #309cfa;
    }

    .title {
        font-size  : 18px;
        font-weight: 700;
        color      : #b4c8df;
    }

    .num {
        font-size : 12px;
        margin-top: 10px;
        color     : #aebdd1;

        span {
            font-size   : 26px;
            font-family : 'electronicFont';
            color       : #ff9a00;
            margin-right: 6px;
        }
    }

    .eq-item-icon {
        font-size  : 18px;
        color      : #ff9a00;
        margin-left: 6px;
    }
}