/* 苹方字体 */
/* PingFang-Bold */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC Bold'),  
         url('/fonts/PingFang-Bold_min.woff') format('woff');  
    font-weight: bold;
    font-style: normal;  
}  
  
/* PingFang-ExtraLight */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC ExtraLight'),  
         url('/fonts/PingFang-ExtraLight_min.woff') format('woff');  
    font-weight: 200;
    font-style: normal;  
}  
  
/* PingFang-Heavy */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC Heavy'),  
         url('/fonts/PingFang-Heavy_min.woff') format('woff');  
    font-weight: 900;
    font-style: normal;  
}  
  
/* PingFang-Light */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC Light'),  
         url('/fonts/PingFang-Light_min.woff') format('woff');  
    font-weight: 300;
    font-style: normal;  
}  
  
/* PingFang-Medium */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC Medium'),  
         url('/fonts/PingFang-Medium_min.woff') format('woff');  
    font-weight: 500;
    font-style: normal;  
}  
  
/* PingFang-Regular */  
@font-face {  
    font-family: 'PingFangSC';  
    src: local('PingFang SC Regular'),  
         url('/fonts/PingFang-Regular_min.woff') format('woff');  
    font-weight: normal; /* 也可以使用 400 */  
    font-style: normal;  
}  


/*  element-plus 官网滚动条样式 */
:root {
    --h-checkbox-color: #2296F3;
}

*{
    font-family: PingFangSC, Helvetica neue, Inter, Roboto, Arial, Arial-Regular;
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar:horizontal {
    height: 6px
}

::-webkit-scrollbar-track {
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: #0000004d
}

/* ------------多选框样式------------ */
.h-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.h-checkbox {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

.h-checkbox .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1em;
    width: 1em;
    border: 1px solid #ccc;
    transition: all 0.3s;
    border-radius: 3px;
}

.h-checkbox input:checked~.checkmark {
    background-color: var(--h-checkbox-color);
    /* animation: pop 0.5s;
    animation-direction: alternate; */
    border: none;
}

.h-checkbox input:checked .h-checkbox {
    border: none;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.h-checkbox input:checked~.checkmark:after {
    display: block;
}

.h-checkbox .checkmark:after {
    left: 0.32em;
    top: 0.10em;
    width: 0.4em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* ------------结束------------ */

/* ------------手提琴效果------------ */

.accordion button[aria-expanded='false'] .icon {
    transform: rotate(180deg);
}

.accordion button[aria-expanded='true']+.accordion-content {
    opacity: 1;
    max-height: 36em;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: auto;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

/* ------------结束------------ */
/* ------------鼠标悬浮切换图片------------ */
.h-hover-icon:hover .img1 {
    display: none;
}

.h-hover-icon:hover .img2 {
    display: block;
}

.h-hover-icon.active .img1 {
    display: none;
}

.h-hover-icon.active .img2 {
    display: block;
}


/* ------------结束------------ */
/* ------------下拉框样式------------ */
.h-select:focus~.arrow {
    transform: rotate(180deg);
}
/* ------------结束------------ */


/* ------------上传组件------------ */

.k-upload-card {
    background: transparent;
    border-radius: 8px;
    border: 2px dashed #B1C5CE;
    cursor: pointer;
    display: block;
    max-width: 300px;
}
.k-upload-card.hover,
.k-upload-card:hover {
    background: #F5FAFF;
    border: 2px dashed rgba(0, 136, 194, 0.5);
}

.k-upload-card.hover .h-hover-icon .img1,
.k-upload-card:hover .h-hover-icon .img1 {
    display: none;
}

.k-upload-card.hover .h-hover-icon .img2,
.k-upload-card:hover .h-hover-icon .img2 {
    display: block;
}

.k-upload-card.hover .content .icon,
.k-upload-card.hover .description .highlight {
    color: #2296F3;
}

.k-upload-card .content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 38px 0;
    box-sizing: content-box;
    text-align: center;
}

.k-upload-card .content .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-upload-card .description {
    margin-top: 21px;
    font-size: 12px;
    font-weight: 500;
    color: #6E6E6E;
    line-height: 17px;
}

.k-upload-card .description .highlight {
    color: #333333;
}
/* ------------结束------------ */

.select-appearance-none {
    -moz-appearance: none; /* Firefox */  
    -webkit-appearance: none; /* Safari and Chrome */  
}

.select-appearance-none::-ms-expand {
    display: none
}

@media (max-width: 639.99px) {
    body:has(.phone-filter-warp.active) {
        overflow-y: hidden;
    }
}

/* 隐藏滚动条样式 */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


/* 弹窗样式修改 */
.swal2-title {
    padding-top: 42px;
}

.swal2-confirm {
    padding: 8px 36px;
}