html,
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

input[type='text'] {
    outline: none;
    border: none;
}

.header {
    width: 100%;
    height: 3.125rem;
    background-color: #ff4272;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 .625rem;
    box-sizing: border-box;
    /* position: fixed;
    z-index: 9999; */
}

.header a>.angle-left {
    width: 0.8rem;
    height: 0.8rem;
}

.header .add {
    width: 1.5625rem;
    height: 1.5625rem;
    border-radius: 50%;
}

.search {
    width: 100%;
    padding: .625rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .625rem;
    background-color: #fff;
    font-size: .875rem;
    color: #666;
}

.search .search-input {
    flex: 1;
    border-radius: .3125rem;
    box-sizing: border-box;
    height: 25px;
    margin-left: .625rem;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .875rem;
    box-shadow: 1px 1px 2px #999;
}

.search .search-input>img {
    width: .9375rem;
    height: .9375rem;
    margin-right: .3125rem;
}

.cond-search {
    width: 100%;
    padding: .9375rem .625rem;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 0.625rem; */
}

.cond-search .c-s-right>input {
    border: .0625rem solid #999;
    padding-bottom: .1875rem;
    width: 4.5rem;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 6%;
    height: 20px;
}

.cond-search .c-s-right>span {
    font-size: .875rem;
    color: #333;
}

.cond-search .s-btn {
    width: 4.375rem;
    text-align: center;
    line-height: 1.25rem;
    height: 1.25rem;
    background-color: #ff4272;
    box-shadow: 1px 1px 2px #ff4272;
    border-radius: .1875rem;
    color: #fff;
    font-size: .875rem;
    /* margin-right: 1.875rem; */
}

.img-btn {
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 0.625rem;
}

.img-btn>img {
    width: .9375rem;
    height: .4375rem;
    position: absolute;
    top: 0;
    z-index: 10;
}

.img-btn .category {
    width: 100%;
    position: absolute;
    background-color: #fffffb;
    border-top: .0625rem solid #e2e2e2;
}

.img-btn .category>div {
    padding: .3125rem 1.875rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: .0625rem solid #e2e2e2;
}

.category>div>span {
    font-size: .875rem;
    text-align: left;
    color: #333;
    width: 3.75rem;
    margin-right: .8rem;
    white-space: nowrap;
}

.category>div>.cat-two {
    width: 5.75rem;
    height: 1.5625rem;
    box-sizing: border-box;
    border: .0625rem solid #e2e2e2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.5625rem;
}

.category>div>.cat-two > select {
    width: 100%;
    height: 100%;
    border: none;
}


.category>div>.cat-two>span:nth-child(1) {
    flex: 1;
    text-align: center;
    font-size: .875rem;
}

.category>div>.cat-two>span:nth-child(2) {
    background-color: #eeeeee;
    border-left: .0625rem solid #e2e2e2;
    width: .9375rem;
}

.category .put {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.category .put>input {
    text-align: center;
    width: 5rem;
    height: 1.25rem;
    border: .0625rem solid rgb(212, 212, 212);
    margin-right: .3125rem;
}

.category .put>div {
    width: 1.875rem;
    height: .0625rem;
    margin-right: .3125rem;
    background-color: rgb(212, 212, 212);
}

.table {
    width: 100%;
}

.table .tr {
    width: 100%;
    height: 3.5rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .625rem;
}
.table .bgc {
    background-color: #e4e4e4;
}

.tr .th,
.tr .td {
    width: 100%;
    color: #ff4272;
    font-size: .9375rem;
    text-align: center;
}

.tr .td {
    color: #333;
}

.tr .td>span {
    padding: .3125rem;
    width: 95%;
    /* height: 1rem; */
    box-sizing: border-box;
    display: flex;
    text-align: left;
    /* padding: 0 2px; */
    /* text-align: center; */
    border-radius: .1875rem;
    box-shadow: 1px 1px 2px #999;
    background-color: #fff;
}
.tr .td>input  {
    padding: .3125rem;
    width: 95%;
    /* height: 1rem; */
    box-sizing: border-box;
    display: flex;
    text-align: left;
    /* padding: 0 2px; */
    /* text-align: center; */
    border-radius: .1875rem;
    box-shadow: 1px 1px 2px #999;
    background-color: #fff;
    border: none
}
.tr .edit>div {
    width: 80%;
    padding: .125rem 0;
    background-color: #999999;
    border-radius: .1875rem;
    margin-left: 5px;
}

.tr .editactive>div {
    width: 80%;
    padding: .125rem 0;
    background-color: #ff4272;
    border-radius: .1875rem;
    color: #fff;
    margin-left: 5px;
}

.addList {
    width: 16.25rem;
    height: 11.875rem;
    position: fixed;
    top: 40%;
    background-color: #fff;
    border-radius: .3125rem;
    box-sizing: border-box;
    border: .0625rem solid #8b9cac;
    padding: .9375rem;
    left: 50%;
    margin-left: -8.125rem;
}

.addList>img {
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    position: absolute;
    right: -.8rem;
    top: -.8rem;
}

.addList .single {
    width: 100%;
    margin-bottom: .9375rem;
    /* 15 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.addList .single>span {
    font-size: .9375rem;
    flex: 1;
    text-align: left;
}

.addList .single>input {
    width: 8.75rem;
    height: 1.5rem;
    border: .0625rem solid #8b9cac;
    border-radius: 3px;
    padding: 0 .3125rem;
    box-sizing: border-box;
    margin-left: 1.25rem;
}

.addList input[type='submit'] {
    width: 100%;
    height: 1.875rem;
    background-color: #8b9cac;
    border-radius: .1875rem;
    color: #fff;
    text-align: center;
    outline: none;
    border: none;
}

.isedit {
    width: 16.25rem;
    height: 6rem;
    position: fixed;
    top: 48%;
    background-color: #fff;
    border-radius: .3125rem;
    box-sizing: border-box;
    border: .0625rem solid #8b9cac;
    padding: .9375rem;
    left: 50%;
    margin-left: -8.125rem;
    text-align: center;
    font-size: 0.85rem;
}

.isedit>img {
    width: 1.6875rem;
    height: 1.6875rem;
    border-radius: 50%;
    position: absolute;
    right: -.8rem;
    top: -.8rem;
}

.isedit .bottom>div {
    margin-top: 20px;
    display: inline-block;
    width: 30%;
    padding: .125rem 0;
    background-color: #8b9cac;
    color: #fff;
    height: 1.5rem;
    border-radius: 0.3rem;
    line-height: 1.5rem;
}