/*.wrap .top-info{
    margin-top:15px;
}*/

.wrap .date-box{
    display: flex;
    width: calc(100% - 20px);
    margin-left: 10px;
    max-width: 500px;
    /*margin-top:15px;*/
    border-radius: 5px;
    border: 1px solid #EAEAEA;
    background-color: #F6F6F6;
    height:45px;
}

.wrap .page .date-box{
    width : 100%;
    margin-left:0;
    margin-bottom:10px;
}

.wrap .date-box .tit-info{
    display:flex;
    flex: 0.35;
    border-right: 1px solid #D5D5D5;
    padding:12px;
}

.wrap .date-box .tit-info i.icon{
    display: block;
    width:20px;
    height:20px;
    background: url(/images/icon_calendar.png) no-repeat center;
    background-size: 100% 100%;
    margin-right:10px;
}

.wrap .date-box .tit-info span{
    font-size:13px;
}

.wrap .date-box .date-info{
    flex:1;
    position: relative;
}

.wrap .date-box input{
    border:none;
    margin-bottom:0px;
    width: 100%;
    height:42px;
    background-color: #F6F6F6;
    font-size:13px;
    font-weight: 500;
}

.wrap .date-box input[type="date"]{
    width: 0px;
    background: none;
    top: 0;
    left:0;
    position: absolute;
    padding:0;
}


.wrap .data-list-box{
    margin-top:10px;
    padding:10px;
    height: calc(100% - 125px);
    overflow: auto;
}

.wrap .data-list-box ul.data-list li {
/* border: 1px solid #b3b3b3; */
    box-shadow: 2px 2px 10px 5px #b3b3b3;
    border-radius: 5px;
}

.wrap .data-list-box ul.data-list li.on {
    box-shadow: 2px 2px 10px 5px #e97132;
}

.wrap .data-list-box ul.data-list li.none{
    width: 100%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    /*margin-top:50px;*/
    margin-top: 40%;
}

.wrap .data-list-box ul.data-list li.none img{
    width: 50px;
    margin-right:20px;
}

.wrap .data-list-box ul.data-list li.none span{
    display: block;
    margin-top: 10px;
    font-size: 17px;
    color: #5D6069;
}

.wrap .data-list-box ul.data-list li a{
    display: block;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    position: relative;
    padding: 10px;
}

.wrap .data-list-box ul.data-list li .info-list{
    display: flex;
    flex-direction: column;
}
.wrap .data-list-box ul.data-list li .info-list .row{
    height: 35px;
    display: flex;
}

.wrap .data-list-box ul.data-list li .info-list .row + .row{
    margin-top: 5px;
}

.wrap .data-list-box ul.data-list li .info-list .row.big{
    height: 45px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item.bl{
    width: 42%;
}
.wrap .data-list-box ul.data-list li .info-list .row .item.time{
    width: 30%;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.smpading{
    padding: 10px 2px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: flex;
}
.wrap .data-list-box ul.data-list li .info-list .row .item.bl-color{
    width: 15%;
    border-radius: 10px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #F4F6F9;
    padding: 10px;
    border-radius: 5px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.center{
    justify-content: center;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.bg-w{
    background-color: #fff;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span.tit.imp{
    font-size: 12px;
    width: 25px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span.tit{
    font-size: 11px;
    width: 40px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span{
    font-size: 12px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span + span{
    margin-left: 5px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span.ellip{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wrap .data-list-box ul.data-list li .info-list .row .item.bl .info-box span.txt{
    width: calc(100% - 40px);
}

.wrap .data-list-box ul.data-list li .info-list .row .item.w58per{
    width: 58%;
}

.wrap .data-list-box ul.data-list li .info-list .row .item + .item{
    margin-left: 5px;
}

.wrap .data-list-box ul.data-list li .info-list .row .item .color-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    font-size: 13px;
    border-radius: 5px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.w100 {
    width: 100%;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.borrgt-none{
    border-end-end-radius: 0px;
    border-start-end-radius: 0px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.gray{
    background-color:#F4F6F9;
    color:#000;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.purple{
    background-color:#ECD9FF;
    color:#9326FF;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.orange{
    background-color:#FFF1E7;
    color:#FFA05B;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.red{
    background-color:#FFEDED;
    color:#FF6060;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.blue{
    background-color:#DCEAF7;
    color:#072665;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.blue2{
    background-color:#E7ECFF;
    color:#4442FF;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .color-box.green{
    background-color:#E1F8F1;
    color:#3FD1A5;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.spa{
    justify-content: space-around;
    padding: 0;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.bg-w{
    background-color: #fff;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.bg-w span{
    font-size: 16px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box i + span{
    margin-left: 10px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box.smpading i + span{
    margin-left: 5px;
}
.wrap .data-list-box ul.data-list li .info-list .row .item .info-box span.time{
    font-size:13px;
    margin-top: 2px;
}
.wrap .data-list-box ul.data-list li .info-list .row.big .item .info-box span{
    word-break: break-all;
}
.wrap .data-list-box ul.data-list li .info-list .row.big .item .info-box i.icon-arrow{
    width: 30px;
    height: 20px;
    background: url(/images/arrow_double.png) no-repeat center / 30px 20px;
}
.wrap .data-list-box ul.data-list li .info-list .row.big .item .info-box i.icon-calender {
    width: 20px;
    height: 20px;
    background: url(/images/icon_calendar.png) no-repeat center / 100% 100%;
}
.wrap .data-list-box ul.data-list li .info-list .row.big .item .info-box i.icon-time{
    width: 20px;
    height: 20px;
    background: url(/images/icon_time.png) no-repeat center / 100% 100%;
}
/* IOS 기기예외처리*/
@supports (-webkit-touch-callout: none) {
    .wrap .data-list-box.iphone{
        height: calc(100% - 185px);
    }
    .wrap .data-list-box.ipad{
        height: calc(100% - 115px);
    }
}

@media (max-width: 500px) {
    .wrap .date-box{
        margin-top:15px;
    }
    .wrap .data-list-box ul.data-list li + li{
        margin-top:20px;
    }
    .table-container .bord-btn-list ul li + li{
        margin-top:0px;
    }
}

@media (min-width: 501px){
    .wrap .top-info{
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
        margin-top:0px;
    }

    .wrap .top-info .flex-box{
        display: flex;
        flex:1;
        justify-content: start;
        align-items: center;
        height: 75px;
    }

    .wrap .top-info .flex-box div + div{
        margin-left:3%;
    }

    .wrap .top-info .flex-box .process-box{
        flex:1;
        min-width: 350px;
    }

    .wrap .date-box{
        max-width:350px;
    }

    .wrap .data-list-box{
        /*margin-top:0px;*/
        /*height: calc(100vh - 210px);*/
        height: calc(100vh - 303px);
    }

    .wrap .data-list-box ul.data-list{
        display: flex;
        flex-wrap: wrap;
        flex:1;
        
    }

    .wrap .data-list-box ul.data-list li{
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        width: 49.5%;
    }
    .wrap .data-list-box ul.data-list li:nth-child(2n){
        margin-left: 1%;
    }
}