.loadingBox.type1 {
    /* opacity: 0.5; */
    /* display: none; */
    background-color: rgba(0,0,0,0.01);
}

/* .tableBody {
    overflow-y: scroll;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
} */

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    height: 0;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: 1px solid #dbdbdb;
    background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 769px) {

    #app {
        width: 90%;
        max-width: 1200px;
        min-height: 60vh;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .main {
        flex: 1;
    }
    body [tem-img-list].imgListBox .imgItem {
        margin-bottom: 60px;
    }
    .dropbox_wrap.type2 {
        width: 260px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {

    #app {
        width: 100%;
    }
    .actions {
        flex-direction: column;
    }
    .dropbox_wrap {
        margin-bottom: 20px;
    }
    .actions .dropbox_wrap{
        width: 30%;
    }
    body .dropbox_wrap.type3 {
        width: 30%;
    }
}
@media screen and (max-width: 768px) {
    .device {
        min-height: 100%;
    }
    #app {
        height: 100vh;
        padding: 10px;
    }
    .container {
        flex-direction: column;
    }
    .leftBox {
        width: auto;
        padding-right: 0;
        padding-bottom: 4%;
    }
    [tem-img].imgBox {
        width: 60%;
        margin: 0 auto;
        margin-bottom: 4%;
    }
    [tem-text].textBox {
        font-size: 12px;
    }
    .rightBox {
        border-left: none;
        box-shadow: none;
        padding-left: 0;
    }
    [tem-img-list].imgListBox .imgItem {
        width: 100%;
    }
    [tem-img-list].imgListBox .imgItem.noLeftBorder {
        border-left: 1px solid #ccc;
    }
    body [tem-img-list].imgListBox .imgItem {
        margin-bottom: 60px;
    }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dropbox_wrap {
    width: 200px;
    position: relative;
    margin-right: 10px;
}
.dropbox_wrap.type3 {
    width: 160px;
}


.dropbox_box {
    position: relative;
    width: 100%;
    border: 1px solid #c7c7c7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}
.dropbox_box:hover {
    border: 1px solid #f9b5b5;
    display: flex;
    justify-content: space-between;
}
.form_item.error .dropbox_box {
    border-color: #b92020;
}
.dropbox_box ._input {
    border: none;
    outline: none;
    flex: 1;
    text-indent: 10px;
    height: 36px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dropbox_box i {
    height: 100%;
    padding: 6px;
    display: flex;
    align-items: center;
}
.dropbox_box i svg {
    width: 16px;
    height: 16px;
    fill: #cfcfcf;
}

.dropbox {
    position: absolute;
    top: 60px;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-top: none;
    background-color: white;
    z-index: 11;
    box-sizing: border-box;
}
.dropbox ul {
    max-height: 240px;
    overflow-y: auto;
}
.dropbox.level2 {
    left: 100%;
}
.dropbox.level3 {
    left: 200%;
}
.dropbox .title {
    text-align: center;
    /* background-color: #f6f6f6; */
    padding: 6px 0;
    background-image: linear-gradient(#f1f1f1, #e2e2e2,#f1f1f1);
}
.dropbox .nodata {
    padding: 10px;
    text-align: center;
}
.dropbox li {
    padding: 6px;
    border-bottom: 1px solid #0000000d;
}
.dropbox li.selected {
    background-color: #f6f6f6;
}
.dropbox li:not(.title):hover {
    background-color: #fcfcfc;
}

@media screen and (max-width: 768px) {
    .dropbox_wrap {
        width: 100%;
        margin-right: 0;
        margin-top: 10px;
    }
    .dropbox_wrap.type3 {
        width: 100%;
    }
    /* .dropbox {
        width: 33%;
    }
    .dropbox.level2 {
        left: 33%;
    }
    .dropbox.level3 {
        left: 66%;
    } */
    .dropbox {
        transition: all 0.2s ease-in-out;
    }
    .dropbox_wrap[data-cols="1"] .dropbox{
        width: 100%;
    }
    .dropbox_wrap[data-cols="2"] .dropbox{
        width: 50%;
    }
    .dropbox_wrap[data-cols="2"] .dropbox.level2{
        left: 50%;
    }
    .dropbox_wrap[data-cols="3"] .dropbox{
        width: 33.3333%;
    }
    .dropbox_wrap[data-cols="3"] .dropbox.level2{
        left: 33.3333%;
    }
    .dropbox_wrap[data-cols="3"] .dropbox.level3{
        left: 66.6666%;
    }

    .loadingBox img {
        width: 30px;
    }
    .loadingBox div {
        font-size: 14px;
    }
}
.c-swiper-btn_prev2, .c-swiper-btn_next2 {
    width: 40px;
    height: 40px;
    /* background-color: rgba(0,0,0,0.2); */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 111;
    opacity: 0.6;
    border-radius: 50%;
    font-family: iconfont;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}
.swiper-container-horizontal [class*="c-swiper-btn_"] {
    display: flex;
}
.swiper-button-disabled {
    opacity: 0.2;
}

.c-swiper-btn_prev2 {
    left: 0;
}

.c-swiper-btn_next2 {
    right: 0;
}

.swiperItem .header {
    height: auto;
}


/* pad 端样式修正 */
.tableBody, .hzs-card, .hzs-letter-list {
    scrollbar-width: thin;
}
.hzs-letter-list {
    overflow-y: auto;
}