body {
    margin: 0;
    padding: 0;
    font-family: Onsite standard Medium;
    overflow-x: hidden;
    position: relative;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

::selection {
    background-color: #172e63;
    color: #fff;
}

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

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

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

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

img {
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

ul {
    list-style: none;
}

h2 {
    font-size: var(--50px--);
}

h3 {
    font-size: var(--40px--);
}

h4 {
    font-size: var(--36px--);
}

h5 {
    font-size: var(--30px--);
}

h6 {
    font-size: var(--24px--);
}

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

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

/* font */
@font-face {
    font-family: gilroy Medium;
    src: url('/src/fonts/gilroy/Gilroy-Medium.otf');
}

@font-face {
    font-family: gilroy black;
    src: url('/src/fonts/gilroy/gilroy-black.otf');
}

@font-face {
    font-family: gilroy regular;
    src: url('/src/fonts/gilroy/gilroy-regular.otf');
}

@font-face {
    font-family: gilroy bold;
    src: url('/src/fonts/gilroy/gilroy-bold.otf');
}


@font-face {
    font-family: Onsite standard Bold;
    src: url('/src/fonts/Onsite-Standard/Onsite-Standard-TRIAL-Extrabold.ttf');
}

@font-face {
    font-family: Onsite standard Light;
    src: url('/src/fonts/Onsite-Standard/Onsite-Standard-TRIAL-Light.ttf');
}

@font-face {
    font-family: Onsite standard Medium;
    src: url('/src/fonts/Onsite-Standard/Onsite-Standard-TRIAL-Medium.ttf');
}

/* 通用样式 */

.white {
    color: #fff;
}

.black {
    color: #000;
}

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

.pagination>li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(83, 83, 83, 0.2);
    font-size: var(--16px--);
    border-radius: 4px;
    transition: all .6s;
}

.pagination>li:hover {
    border: 1px solid #073190;
}

.pagination>li>* {
    font-family: 思源黑体 CN Regular;
    /* font-size: var(--24px--); */
    width: 100%;
    height: 100%;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination>.active {
    /* background-color: #347236; */
    border: 1px solid #073190;
}

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

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

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

/* .pagination>li:first-child {
    transform-origin: center center;
    transform: rotate(180deg);
    border-color: #ccc;
} */

/* .pagination>.disabled,
.pagination>.active {
    border: 0px;
} */

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

.crumb>* {
    font-family: 思源黑体 CN Regular;
    color: #fff;
    font-size: var(--18px--);
}

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

.pro_fx span {
    display: inline-flex;
    align-items: center;
    color: #333;
    cursor: pointer;
    font-size: var(--21px--);
    font-weight: 400;
}

.pro_fx svg.icon {
    fill: #03172e;
    width: 30px;
    margin-left: 10px;
}

.pro_fx p {
    position: absolute;
    left: 90px;
    top: 0;
    transition: all .5s ease;
    opacity: 1;
    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%;
}

/* 按钮 */
.pro-prev,
.pro-next {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #073190;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .6s ease;
    user-select: none;
}

.pro-next.swiper-button-disabled,
.pro-prev.swiper-button-disabled {
    border: 1px solid #EFF1F2;
    background-color: #EFF1F2;
    display: flex !important;
}

.swiper-pagination-bullet-active {
    background-color: #073190 !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: #073190 !important;
}

/* 移动端导航栏按钮 */
.Hamburg {
    display: none;
    align-items: center;
}

.Headcheckbox {
    display: none;
}

.toggle {
    position: relative;
    width: 35px;
    height: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition-duration: .5s;
}

.bars {
    width: 100%;
    height: 4px;
    background-color: rgb(27, 89, 194);
    border-radius: 4px;
}

#bar2 {
    transition-duration: .8s;
}

#bar1,
#bar3 {
    width: 70%;
}

#Headcheckbox:checked+.toggle .bars {
    position: absolute;
    transition-duration: .5s;
}

#Headcheckbox:checked+.toggle #bar2 {
    transform: scaleX(0);
    transition-duration: .5s;
}

#Headcheckbox:checked+.toggle #bar1 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s;
}

#Headcheckbox:checked+.toggle #bar3 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s;
}

#Headcheckbox:checked+.toggle {
    transition-duration: .5s;
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    .page1>.info {
        width: 90%;
    }

    .page1>.info>h3 {
        line-height: 100%;
    }

    .invalid {
        left: 130px !important;
    }
}

:root {
    --adaptation--: 16px;
}

html {
    font-size: var(--adaptation--) !important;
}

/* @media (min-width: 768px) { */
:root {
    --12px--: max(12px, 0.625vw);
    --14px--: max(14px, 0.73vw);
    --16px--: max(16px, 0.8333333333vw);
    --18px--: max(18px, 0.9375vw);
    /* --12px--: max(10px, 0.625vw);
    --14px--: max(12px, 0.73vw);
    --16px--: max(14px, 0.8333333333vw);
    --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(30px, 1.78vw);
    --36px--: max(32px, 1.875vw);
    --38px--: max(34px, 1.98vw);
    --40px--: max(36px, 2.0833333333333vw);
    --42px--: max(36px, 2.1875vw);
    --44px--: max(36px, 2.3vw);
    --46px--: max(36px, 2.4vw);
    --48px--: max(36px, 2.5vw);
    --50px--: max(36px, 2.6042vw);
    --60px--: max(40px, 3.125vw);
    --72px--: max(40px, 3.75vw);
    --100px--: max(60px, 5.208333333333vw);
    --160px--: max(160px, 13.8vw);
    --s40px--: max(30px, 2.0833333333333vw);
    --width--: 1520px;
    --top--: 60px;
    --navTop--: calc(50px + var(--top--));
    --distance--: 60px;
    --gutterSpacing--: calc((100% - var(--width--))/2);
}

@media (max-width: 1600px) {
    :root {
        --width--: 80%;
    }

    /* .head{
        width: 90%;
    } */
}

@media(max-width:768px) {
    :root {
        --30px--: max(22px, 1.5625vw);
        --32px--: max(22px, 1.67vw);
        --34px--: max(22px, 1.78vw);
        --36px--: max(24px, 1.875vw);
        --38px--: max(26px, 1.98vw);
        --40px--: max(28px, 2.0833333333333vw);
        --42px--: max(28px, 2.1875vw);
        --44px--: max(28px, 2.3vw);
        --46px--: max(28px, 2.4vw);
        --48px--: max(28px, 2.5vw);
        --50px--: max(28px, 2.6042vw);
        --160px--: max(160px, 13.8vw);
        --s40px--: max(30px, 2.0833333333333vw);
    }
}

@media (max-width: 480px) {
    :root {

        --distance--: 30px;
    }
}

/* @media (max-height: 750px) {
    :root {
        --top--: 20px;
    }
} */

/* } */

/* 移动端字号适配 */
/* @media (max-width: 768px) {
    :root {
        --12px--: 0.75rem;
        --14px--: 0.875rem;
        --16px--: 1rem;
        --18px--: 1.125rem;
        --20px--: 1.25rem;
        --21px--: 1.3125rem;
        --22px--: 1.375rem;
        --24px--: 1.5rem;
        --26px--: 1.625rem;
        --28px--: 1.75rem;
        --30px--: 1.875rem;
        --32px--: 2rem;
        --34px--: 2.125rem;
        --36px--: 2.25rem;
        --38px--: 2.375rem;
        --40px--: 2.5rem;
        --42px--: 2.625rem;
        --44px--: 2.75rem;
        --46px--: 2.875rem;
        --48px--: 3rem;
        --50px--: 3.125rem;
        --160px--: 10rem;
        --s40px--: 2.5rem;
    }
} */

/* 表单验证 */
.required {
    position: relative;
}

.invalid {
    /* max-width: 100px; */
    padding: 8px 10px;
    position: absolute !important;
    top: calc(50% + 20px);
    left: 20%;
    transform: translateY(-50%);
    background-color: #ff5c13;
    border-radius: 5px;
    font-size: var(--14px--);
    color: #fff;
    white-space: nowrap;
    /* overflow: hidden; */
    user-select: none;
    animation: invalidW 1s forwards;
}

.message>.invalid {
    /* top: calc(15% + 15px); */
    top: 13px;
    left: 25%;
    transform: translateY(0);
}

.verifyBox>.invalid {
    top: 50%;
}

.invalid::before {
    content: '';
    border-right: 10px solid #ff5c13;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
}

@keyframes invalidW {
    0% {
        max-width: 0;
        /* overflow: hidden; */
        white-space: nowrap;
    }

    100% {
        max-width: 300px;
        overflow: visible;
        grid-template-rows: repeat();
    }
}

@keyframes restinvalidW {
    0% {
        max-width: 300px;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        max-width: 0px;
    }
}

/* 自定义select */