body {
    margin: 0;
    padding: 0;
}

a {
    color: black;
    text-decoration: none;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Plus Jakarta Sans Bold';
    box-sizing: border-box;
}

img {
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
    display: block;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #8b8b8b;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #636363;
}

li {
    list-style: none;
}

/* zt */

@font-face {
    font-family: PingFang Regular;
    src: url("/src/font/PingFang Regular.ttf");
}

@font-face {
    font-family: PingFang Light;
    src: url("/src/font/PingFang Light.ttf");
}

@font-face {
    font-family: PublicSans Regular;
    src: url('/src/font/PublicSans Regular.otf');
}

@font-face {
    font-family: Plus Jakarta Sans ExtraBold;
    font-weight: 800;
    src: url('/src/font/Plus Jakarta Sans-ExtraBold.ttf');
}

@font-face {
    font-family: Plus Jakarta Sans Bold;
    src: url('/src/font/plus-jakarta-sans-bold.ttf');
}

@font-face {
    font-family: Plus Jakarta Sans Regular;
    src: url('/src/font/Plus Jakarta Sans Regular.ttf');
}

@font-face {
    font-family: Poppins Bold;
    src: url('/src/font/Poppins-Bold.ttf');
}

@font-face {
    font-family: Poppins Regular;
    src: url('/src/font/Poppins-Regular.ttf');
}

:root {
    --12px--: max(10px, 0.625vw);
    --14px--: max(12px, 0.73vw);
    --16px--: max(14px, 0.84vw);
    --18px--: max(16px, 0.9375vw);
    --20px--: max(18px, 1.05vw);
    --21px--: max(19px, 1.09375vw);
    --22px--: max(20px, 1.15vw);
    --24px--: max(22px, 1.25vw);
    --26px--: max(24px, 1.36vw);
    --28px--: max(26px, 1.46vw);
    --30px--: max(28px, 1.5625vw);
    --32px--: max(30px, 1.67vw);
    --34px--: max(32px, 1.78vw);
    --36px--: max(34px, 1.875vw);
    --38px--: max(36px, 1.98vw);
    --40px--: max(38px, 2.084vw);
    --42px--: max(38px, 2.1875vw);
    --44px--: max(38px, 2.3vw);
    --46px--: max(38px, 2.4vw);
    --48px--: max(38px, 2.5vw);
}

a:active,
a:hover,
a:focus,
a:visited {
    outline: none !important;
    text-decoration: none;
}

button {
    border: none;
    outline: none;
    background-color: transparent;
}

/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination>li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    width: 40px;
    height: 40px;
    border: 1px solid #d2d2d2;
    font-size: var(--16px--);
}

.pagination>li>* {
    width: 100%;
    height: 100%;
    color: #1b1b1b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination>.active {
    background-color: #0050b1;
}

.pagination>.active>span {
    color: #fff;
}

.pagination>.disabled {
    background-color: #ccc;
}

.pagination>.disabled svg path {
    fill: #fff;
}

.pagination>li:first-child {
    transform-origin: center center;
    transform: rotate(180deg);
}

/* 面包屑 */
.crumb {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
}

.crumb>* {
    font-family: Plus Jakarta Sans Regular;
    color: #fff;
    font-size: var(--18px--);
}

/* 分享 */
.pro_fx {
    display: flex;
    align-items: center;
    position: relative;
}

.pro_fx span {
    display: inline-flex;
    align-items: center;
    color: #333;
    cursor: pointer;
}

.pro_fx svg.icon {
    fill: #828282;
    width: 22px;
    margin-right: 10px;
}

.pro_fx p {
    position: absolute;
    left: 0;
    top: 0;
    transition: all .5s ease;
    opacity: 0;
    display: flex;
    margin: 0;
}

.pro_fx:hover p {
    opacity: 1;
    left: 120px;
}

.pro_fx p svg:hover {
    fill: #0057b8;
}

.relPro>div:nth-child(1) {
    display: flex;
    align-items: center;
    margin-bottom: 3%;
}