body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
        monospace;
}
body,
html {
    width: 100%;
}

* {
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

a {
    text-decoration: dashed;
    color: #337ab7;
}
button {
    cursor: pointer;
    transition: color 0.2s;
}

/* 以上都为公共样式 */

.portal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
b {
    font-size: 22px;
    display: inline-block;
    margin: 0 20px;
}
.layerSwitch .divider {
    margin: 4% 0;
    width: 100%;
    height: 1px;
    background: rgba(5, 5, 5, 0.06);
}

.portal {
    height: 100%;
}
/* 头部样式 */
@media only screen and (max-width: 730px) {
    .portalHeaders_title .logo {
        width: 12vw !important;
    }
    .portalHeaders_title .brand {
        width: 52vw !important;
    }
    div.login {
        padding: 5px 3.6vw !important;
        display: block !important;
        .login_left {
            a {
                font-size: 3vw;
            }
        }
        .login_right {
            width: 100%;
            justify-content: center;
            margin-top: 6px;
        }
    }
}
.portalHeader {
    width: 100%;
}

.portalHeader .login {
    width: 100%;
    border-bottom: 1px solid #ddd;
    background-color: #f0f1f0;
    padding: 5px 13.6vw;
    padding-left: 15vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    a {
        color: #337ab7;
        &:hover {
            text-decoration: underline;
        }
    }
    .login_left {
        img {
            margin-right: 6px;
        }
    }
    .login_right {
        display: flex;
        align-items: center;
    }
}
.portalHeader .brand {
    margin-top: 4px;
    width: 24.531vw;
}
.portalHeaders_title {
    padding: 1.56vw 15vw;
    display: flex;
    align-items: center;
}
    .portalHeaders_title h1 {
        font-family: "微软雅黑";
        font-size: 2vw;
        font-weight: bold;
        color: #1c4f9c;
        margin-top: -5px;
        letter-spacing: -1.5px;
        margin-bottom: 0;
    }
        .portalHeaders_title h1 small {
            font-size: .7vw !important;
            color: #1c4f9c;
            font-weight: bold;
            letter-spacing: 0px;
            display: inherit;
            margin-left: 3px;
            font-family: math;
            letter-spacing: .7px;
        }
.portalHeader .logo {
    width: 5.5vw;
    margin-right: 1.771vw;
    max-height: 106px;
    display: flex;
    align-items: center;
}

/* 菜单栏样式 */
.portalMenu {
    width: 100%;
    position: relative;
    z-index: 1000;
    background: #1c509c;
    box-shadow: 0 2px 8px 0 rgba(7, 67, 138, 0.3);
}
.menu {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #1c509c;
    color: #fff;
}
.menu p:nth-of-type(1) span {
    /*font-weight: bold;*/
}
    .menu p{margin:0;}
    .menu p :hover {
        transition: background 0.3s;
    }

.menuLiHover {
    background: #3172d4;
}
.menu a {
    display: block;
    padding: 0.677vw 2.1vw;
    font-size: 0.938vw;
    transition: background 0.3s;
    cursor: pointer;
    color: #fff;
}
    .menu a.select {
        font-weight: bold;
    }
    .menu span {
        position: relative;
    }
.menu b {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 0.208vw;
    background: #fff;
    bottom: -0.677vw;
    left: 0;
    z-index: 111;
    margin: 0;
}

.optionMenu {
    position: absolute;
    top: 2.604vw;
    z-index: -1;
    padding: 25px 25px;
    width: 62.3%;
    background: rgba(42, 91, 164, 0.9);
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    display: none;
    transition: opacity 0.3s;

    li {
        width: 9%;
        margin: 10px 24px;
        background: transparent;
    }

    a {
        display: inline;
        padding: 0;
        color: #fff;
        font-size: 0.833vw;
        border-bottom: 1px solid transparent;

        &:hover {
            border-bottom: 1px solid #fff;
            background: transparent;
        }
    }
}
.menuHover {
    display: flex !important;
}
.menu_icon {
    width: 45px;
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1111;
    display: none;
    cursor: pointer;
    text-align: center;
    line-height: 68px;
    img {
        width: 24px;
    }
    &:focus-visible {
        outline: none;
    }
}
.optionMenuHover {
    display: block !important;
}
.portalMenu .navbar_collapse {
    background: #1c509c;
    padding: 0 15px;
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    border-top: 1px solid #076195;
    display: none;
    p {
        border-bottom: 1px solid #076195;
        a {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        span {
            color: #fff;
        }
    }
}
@media only screen and (max-width: 730px) {
    .portalMenu {
        height: 56px;
    }
    div.menu {
        display: block;
        p {
            &:hover {
                background: transparent !important;
            }
        }
        a {
            padding: 2.521vw 3.563vw !important;
            font-size: 3.25vw !important;
        }
    }
    .menu_icon {
        display: block !important;
    }
    div.optionMenu {
        width: 100%;
        position: relative;
        display: block;
        top: 0;
        padding-top: 0;
        padding-bottom: 0;
        z-index: 111;

        li {
            width: 100%;
            border: none;
            padding: 1.98vw 5vw;
            margin: 0;
            &:hover a {
                text-decoration: underline;
            }
        }
        a {
            padding: 0 !important;
            width: 100%;
            margin: 0;
            border-bottom: 0;
            text-align: left;
            &:hover {
                border: none;
            }
        }
    }
}

/* 地图样式 */
.portalMap {
    width: 100%;
    height: 550px;
    position: relative;
}
.portalMap .map {
    width: 100%;
    height: 100%;
}
.map .leaflet-top .leaflet-left {
    right: 12px;
}
.mapBtn {
    width: 2.083vw;
    position: absolute;
    right: 1vw;
    top: 1vw;
    z-index: 10000;
}
.mapBtn button {
    padding: 0.52vw;
    /* width: 2.083vw; */
    /* height: 2.083vw; */
    /* font-size: 1.04vw; */
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border: none;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    border-radius: 0.21vw;
    &:hover {
        .tooltip {
            opacity: 1;
            z-index: 1111;
        }
    }
}
.full-screen {
    display: block;
}
.full-screen-hover {
    display: none;
}
.online_map:hover .full-screen {
    display: none;
}
.online_map:hover .full-screen-hover {
    display: block;
}
/* .full-screen {
        display: none;
    } */
.mapBtn button img {
    width: 1vw;
}
.mapBtn button:hover {
    color: #4096ff;
}
.tooltip {
    padding: 0.47vw;
    position: absolute;
    right: 3.13vw;
    bottom: 0;
    margin: auto;
    border-radius: 3px !important;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    width: max-content;
    font-size: 14px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
    pointer-events: none;
}
.arrow {
    position: absolute;
    right: 14px;
    width: 30px;
    height: 8px;
    top: 50%;
}
.arrow::before {
    position: absolute;
    bottom: 0;
    right: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 8px;
    transform: translateY(-50%) translateX(100%) rotate(90deg);
    background: rgba(0, 0, 0, 0.85);
    clip-path: path(
        "M 6.343145750507619 8 A 4 4 0 0 0 9.17157287525381 6.82842712474619 L 14.585786437626904 1.414213562373095 A 2 2 0 0 1 17.414213562373096 1.414213562373095 L 22.82842712474619 6.82842712474619 A 4 4 0 0 0 25.65685424949238 8 Z"
    );
    content: "";
}
.close {
    cursor: pointer;
}
.zoom_navigationStyle .enlarge {
    border-radius: 0.21vw 0.21vw 0 0;
    border-bottom: 0.05vw solid #d9d9d9;
}
.zoom_navigationStyle .narrow {
    border-radius: 0 0 0.21vw 0.21vw;
}

@media only screen and (max-width: 730px) {
    .mapBtn {
        width: auto !important;
        a {
            display: flex;
        }
        .tooltip {
            display: none;
        }
    }
    .mapBtn button {
        display: flex;
        width: auto !important;
        height: auto !important;
        padding: 2vw !important;
        img {
            width: 6vw !important;
        }
    }
    .sheet_control {
        font-size: 14px !important;
        .logo {
            font-size: 9vw !important;
        }
    }
    div.layerSwitch {
        padding: 1.6vw;
        right: 11.4vw;
    }
}
.portalMap_amplify {
    margin-bottom: 8px;
}
.portalMap_amplify:hover {
    border-color: #d9d9d9;
}
.sheet_control {
    display: flex;
    z-index: 1111;
    position: absolute;
    bottom: 15px;
    right: 0.938vw;
    white-space: nowrap;
    color: #000;
    font-size: 14px;
}
.sheet_control .logo {
    margin-right: 6px;
    width: 44px;
}
.sheet_control .sheetNumber {
    display: flex;
    align-items: center;
}

.layerSwitch {
    width: 270px;
    position: absolute;
    right: 3vw;
    top: 0;
    z-index: 1111;
    padding: 0.5vw;
    background: #fff;
    pointer-events: none;
    pointer-events: visiblePainted;
    pointer-events: auto;
    display: none;
}
.layerSwitch .select_layer {
    color: #000;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    text-align: center;
    align-items: center;
}
.layerSwitchHover {
    display: block;
}
.layer {
    pointer-events: visiblePainted;
    pointer-events: auto;
    .layerItem:nth-of-type(2) {
        margin: 0 8px;
    }
}
.layer .layerItem {
    width: 74px;
    display: inline-block;
    text-align: center;
}
.layer .layerItem span {
    width: 100%;
    height: 60px;
    display: inline-block;
}
.layer .layerItem img {
    width: 100%;
    cursor: pointer;
}
.layerSwitch .active img {
    border: 2px solid #4185d0;
}

/* 导航栏 */
.portalMain {
    width: 100%;
}
.portalCard {
    background: #f6f9ff;
    padding: 1.563vw;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media screen and (max-width: 730px) {
    .portalCard {
        padding: 12px !important;
    }
    .card {
        width: 29% !important;
        height: 28%;
        padding: 4vw 3vw !important;
    }
    .card:hover {
        transform: none !important;
        box-shadow: 0 2px 1.042vw 4px hsla(221, 9%, 66%, 0.12) !important;
    }
    .card div {
        flex-wrap: wrap;
    }
    .card div img {
        width: 9vw !important;
    }
    .card div p {
        width: 100%;
        font-size: 3vw !important;
        text-align: center;
        margin-top: 6px;
    }
    .card:nth-of-type(1) {
        margin-bottom: 12px;
    }
    .card:nth-of-type(2) {
        margin: 0 12px 12px;
    }
    .card:nth-of-type(3) {
        margin-bottom: 12px;
    }
    .card:nth-of-type(3) img {
        width: 11vw !important;
    }
    .card:nth-of-type(5) {
        margin: 0 12px;
        img {
            width: 10vw !important;
        }
    }
}

.card div:nth-of-type(1) img,
.card div:nth-of-type(3) img,
.card div:nth-of-type(6) img {
    width: 2.2vw;
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.4vw 1.6vw;
    background: #fff;
    margin: 0 0.833vw;
    border-radius: 0.208vw;
    width: 11%;
    box-shadow: 0 2px 1.042vw 4px hsla(221, 9%, 66%, 0.12);
    transition: all 0.8s;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card a {
    width: 100%;
}

.card:hover {
    box-shadow: 0 6px 1.042vw 4px hsla(221, 9%, 66%, 0.2);
    transform: translateY(-10px);
}
.card div {
    cursor: pointer;
    pointer-events: none;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.card div img {
    width: 2vw;
    background-repeat: no-repeat;
    background-size: 100%;
}
.card div p {
    font-size: 0.938vw;
    color: #444;
}

/* 地图服务 */
.portalMapServices {
    width: 100%;
    background-color: #fff;
    padding: 1.563vw 8vw;
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 730px) {
    .portalMapServices {
        padding: 8vw 0 !important;
    }
}
.portalMapServices .centent {
    width: 100%;
    text-align: center;
}
.title {
    margin-bottom: 1.563vw;
    text-align: center;
}
.title h1 {
    font-size: 1.667vw;
    font-weight: bold;
}

.title p {
    color: #777;
    font-weight: bold;
    font-size: 0.833vw;
    margin: 24px 0 6px 0;
}
.title span {
    display: inline-block;
    width: 3.646vw;
    height: 0.313vw;
    background: goldenrod;
}
.nd_slide {
    width: 100%;
    display: flex;
    justify-content: center;
}
.nd_slide li {
    width: 1.563vw;
    height: 4px;
    background: rgba(3, 11, 26, 0.1);
    margin-right: 0.417vw;
    cursor: pointer;
}
.carouselChart {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 1.563vw;
    transition-duration: 0ms;
    flex-wrap: wrap;
}

.carouselChart .center {
    width: 36.458vw;
    height: 27.083vw;
    position: relative;
}
.carouselChart .center .carouselItem0 {
    left: -15.625vw;
    box-shadow: none;
}
.carouselChart .center .carouselItem0 .mask_box {
    height: 60%;
    background: rgba(0, 0, 0, 0.6);
    transition: width 0.3s;
    transition: height 0.3s;
}
.carouselChart .center .carouselItem0 img,
.carouselChart .center .carouselItem0 .mask_box {
    width: 60%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.carouselChart .center .carouselItem1 {
    left: -7.813vw;
    box-shadow: none;
    z-index: 112;
}
.carouselChart .center .carouselItem1 .mask_box {
    height: 80%;
    transition: width 0.3s;
    transition: height 0.3s;
}
.carouselChart .center .carouselItem1 img,
.carouselChart .center .carouselItem1 .mask_box {
    width: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.carouselChart .center .carouselItem2 {
    left: 0px;
    z-index: 1111;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.01),
        0px 3px 9px 0px rgba(0, 0, 0, 0.02),
        0px 4px 10px 0px rgba(0, 0, 0, 0.03);
    transition: left 0.3s;
    .mask_box {
        opacity: 0 !important;
    }
}
.carouselChart .center .carouselItem2 img {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.carouselChart .center .carouselItem3 {
    left: 7.813vw;
    box-shadow: none;
    z-index: 112;
}
.carouselChart .center .carouselItem3 .mask_box {
    height: 80%;
    left: 20%;
    transition: width 0.3s;
    transition: height 0.3s;
}
.carouselChart .center .carouselItem3 img,
.carouselChart .center .carouselItem3 .mask_box {
    width: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.carouselChart .center .carouselItem4 {
    left: 15.625vw;
    box-shadow: none;
}
.carouselChart .center .carouselItem4 .mask_box {
    height: 60%;
    left: 40%;
    background: rgba(0, 0, 0, 0.6);
}
.carouselChart .center .carouselItem4 img,
.carouselChart .center .carouselItem4 .mask_box {
    width: 60%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1111;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 0.208vw;
    cursor: pointer;
}
.mask:hover {
    opacity: 1;
}
.mask .centent {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 5vw 0;
}

.mask p {
    width: 100%;
    color: #fff;
    font-size: 1.667vw;
}

.mask .experience {
    width: 11.458vw;
    border: 1px solid #1c80fc;
    color: #1c80fc;
    background: transparent;
    height: 2.188vw;
}
.mask_box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 113;
    top: 2px;
    left: 0;
    opacity: 1;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: none;
}
.switch {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50% !important;
    font-size: 16px;
    width: 2.2vw;
    height: 2.2vw;
    border: none;
    color: #fff;
    background: rgba(#c4dbfa, 0.5);
}
.switch:hover {
    background: rgba(blue, 0.2);
}
.switch:nth-of-type(1) {
    left: 1.8%;
}
.switch:nth-of-type(2) {
    right: 1.8%;
}
.contentStyle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    transition: all 0.3s;
    overflow: hidden;
}
.contentStyle img {
    box-shadow: 0px 0px 12px -4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.contentStyle:hover.mask {
    opacity: 1;
}
.option {
    padding-bottom: 1.563vw;
}
.optionBtnHover {
    background: #2681ff !important;
    color: #fff !important;
}
.option button {
    transition: none;
}
.button_wrapper {
    background: #fff;
    font-size: 0.833vw;
    margin: 0px 18px !important;
    border-radius: 4px !important;
    border: 0;
    line-height: 2.083vw;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 0 15px;
}
.button_wrapper:hover {
    color: #1677ff;
}
@media only screen and (max-width: 730px) {
    .title {
        h1 {
            font-size: 3vw !important;
        }
        span {
            width: 6.7vw !important;
            height: 0.7vw !important;
        }
    }
    .learnMore {
        button {
            height: auto !important;
            font-size: 2.5vw;
            width: auto !important;
            padding: 8px 20px;
            border-radius: 3px;
        }
    }
    .option {
        margin-bottom: 1vw;
        .button_wrapper {
            font-size: 12px !important;
            margin: 0px 0px !important;
            padding: 8px 20px;
            border-radius: 4px !important;
            border: 0;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
    .center {
        width: 54vw !important;
        height: 40vw !important;
        .carouselItem0 {
            left: -21vw !important;
        }
        .carouselItem1 {
            left: -11vw !important;
        }
        .carouselItem3 {
            left: 11vw !important;
        }
        .carouselItem4 {
            left: 21vw !important;
        }
    }
    .mask {
        .centent {
            p {
                font-size: 3.1vw !important;
            }
            button {
                width: auto !important;
                height: auto !important;
                border-radius: 0.21vw;
                font-size: 1.8vw;
            }
        }
    }
    .nd_slide {
        li {
            width: 4.563vw;
        }
    }
}

/* 开发资源 */
.developingResources {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f6f9ff;
    flex-wrap: wrap;
    padding: 1.563vw 4vw;
}
.developingResources .centent {
    width: 75%;
}
.developingResources .resource {
    background-color: #fff;
    border-radius: 4px;
    padding: 1.667vw;
    display: flex;
    box-shadow: 0 3px 20px 0 rgba(28, 91, 255, 0.06);
}
.leftApi {
    margin-right: 1.25vw;
}

.leftApi .button_wrapper.developThis {
    width: 100%;
    height: 3.4vw;
    border-radius: 4px;
    font-weight: bold;
    border: 2px solid #1677ff;
    color: #1677ff;
    margin: 0 !important;
}

.leftApi .active {
    background: linear-gradient(to bottom, #4867ff, #5998ff) !important;
    color: #fff !important;
}
.leftApi .active img {
    opacity: 0.6;
}
.leftApi .apiItemStyle {
    width: 18vw;
    height: 5.208vw;
    padding: 0 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.521vw;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #f5f6f8;
    img {
        width: 2.5vw;
    }
}
.leftApi .apiItemStyle:hover {
    background: #fff;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.05);
    color: #2c5eec;
    font-weight: bold;
}

.leftApi .apiItemStyle p {
    font-size: 0.938vw;
    font-weight: bold;
}
.leftApi .apiItemStyle span {
    font-size: 2.4vw;
    color: #f2f4ff;
}

.rightList {
    width: 100%;
    margin-top: -0.63vw;
    display: flex;
    flex-wrap: wrap;
}
.rightList .row {
    display: flex;
    justify-content: space-between;
    height: 50%;
}
.rightList .row .list:nth-of-type(2) {
    margin: 0 1.25vw;
}



    .rightList .list {
        flex: 0 0 33.33333%;
        font-size: 0.729vw;
        border-radius: 0.21vw;
        padding: 0.63vw;
    }
.appCentent .rightList .list {
    flex: 0 0 25%;
}
    .appCentent .rightList .list p {
        margin-top: 0.3vw;
    }
.rightList .list div {
    width: 100%;
    height: 11.25vw;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #f5f6f8;
}

.rightList .list img {
    width: 100%;
    /* cursor: pointer; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: all 0.3s;
}
.rightList .list :hover img {
    transform: scale(1.1);
}

.rightList .list p {
    text-align: center;
    margin-top: 1.3vw;
}

.learnMore {
    display: flex;
    justify-content: center;
    margin-top: 1.563vw;
}
.learnMore button {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
    height: 2.8vw;
    width: 13vw;
    background: #4581fb;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
        display: flex;
    }
}
.learnMore button:hover {
    color: #fff;
    background: #0062cc;
}

.portal_qrCode {
    height: max-content;
    background-color: #fff;
    position: fixed;
    right: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -11111;
    padding: 0.8vw 1.25vw;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: display 0.4s;
    display: flex;
    align-items: center;
    font-size: 0.72vw;
    color: #8c8c8c;
    opacity: 0;
}
.portal_qrCode img {
    width: 6.771vw;
}

@media only screen and (max-width: 730px) {
    .portal_qrCode {
        height: 27vw !important;
        font-size: 2.5vw !important;
        img {
            width: 15.72vw !important;
        }
    }
    div.developingResources {
        padding: 2.563vw 4vw !important;
        div.centent {
            width: 95% !important;
            div.resource {
                padding-bottom: 2.6vw;
                div.leftApi {
                    div.apiItemStyle {
                        height: 6.2vw;
                        p {
                            font-size: 1.6vw;
                            margin-bottom: 0 !important;
                        }
                        span {
                            font-size: 2.6vw;
                        }
                    }
                    button {
                        height: auto !important;
                        font-size: 1.6vw;
                        padding: 4px;
                        border: 1px solid #1677ff !important;
                    }
                }
                div.rightList {
                    div.list {
                        font-size: 1.6vw;
                    }
                    .list div {
                        height: 13.35vw;
                    }
                }
            }
        }
    }
}

/* 档案资源 */
.archiveResources_box {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1.563vw 4vw;
}
.archiveResources {
    width: 75%;
}
.img_box {
    display: flex;
}
.img_box .img_right .mask div {
    width: 100%;
    margin: 0;
}
.img_box .mask p {
    text-align: center;
    line-height: 2.2vw;
}
.img_box .img_right {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1.25vw;
}
.img_box .img_right .mask,
.img_box .img_left .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 98.6%;
    background: rgba(0, 0, 0, 0.6);
    /* opacity: 0; */
    transition: opacity 0.3s;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 1.25vw;
    border-radius: 4px;
}

.img_box .img_right .imgItem {
    flex: 0 0 50%;
    display: inline-block;
    position: relative;
    height: max-content;
}
.img_box .img_right .imgItem .mask:hover {
    opacity: 1;
}

.img_box .img_right .imgItem:nth-child(1) {
    padding: 0 0.63vw 0.8vw 0;
    .mask {
        width: calc(100% - 0.63vw);
        height: calc(100% - 1.05vw);
    }
}
.img_box .img_right .imgItem:nth-child(2) {
    padding: 0 0 0.8vw 0.63vw;
    .mask {
        width: calc(100% - 0.63vw);
        height: calc(100% - 1vw);
        left: 0.63vw;
    }
}
.img_box .img_right .imgItem:nth-child(3) {
    padding: 0 0.63vw 0 0;
    .mask {
        width: calc(100% - 0.63vw);
        height: calc(100% - 0.2vw);
    }
}
.img_box .img_right .imgItem:nth-child(4) {
    padding: 0 0 0 0.63vw;
    .mask {
        width: calc(100% - 0.63vw);
        left: 0.63vw;
    }
}
.archiveResources .img_box .img_right img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 3px 20px 0 rgba(28, 91, 255, 0.06);
}

.img_box .img_left {
    position: relative;
}
.img_box .img_left img {
    width: 23.8vw;
}
.img_box .img_left :hover {
    .mask {
        opacity: 1;
    }
}
.img_box .img_left .mask {
    height: 99% !important;
}

/* 服务中心 */

.serviceCenter_box {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f6f9ff;
    flex-wrap: wrap;
    padding: 1.563vw 4vw;
    background-color: #fff;
}
.serviceCenter_box .serviceCenter {
    width: 74%;
}

.serviceCenter .service {
    border-radius: 4px;
    display: flex;
    box-shadow: 0 3px 20px 0 rgba(28, 91, 255, 0.1);
}
.serviceCenter .service .serviceItem {
    background: #fff;
    padding: 1.5vw 2vw;
    border-right: 2px solid #f7f7f9;
    transition: all 0.8s;
}
.serviceCenter .service .serviceItem:hover {
    background: #e6effd;
}
.serviceCenter .service p {
    font-size: 1.3vw;
    text-align: center;
    margin: 3%;
}
.serviceCenter .service :nth-child(2) img {
    width: 105%;
    margin-left: -0.4vw;
    height: 75%;
}
.serviceCenter .service img {
    width: 100%;
    margin-top: 1.3vw;
}
.serviceCenter .service :last-child {
    border: 0;
}
@media only screen and (max-width: 730px) {
    .developingResources {
        padding: 2.563vw 4vw !important;
        .centent {
            width: 95% !important;
            .apiItemStyle {
                p {
                    margin-bottom: 0 !important;
                }
            }
        }
    }
    .serviceCenter_box {
        .serviceCenter {
            width: 95% !important;
        }
        .serviceItem {
            opacity: 1 !important;
            transform: none !important;
            p {
                font-size: 12px;
            }
        }
    }
}

/* 尾部导航 */
@media only screen and (max-width: 730px) {
    div.footer {
        width: 100% !important;
        padding-bottom: 90px !important;
        position: relative;
        div.relation {
            justify-content: center;
            margin: 4px 0 4px;
            div {
                text-align: center;
            }
            span {
                margin: 0 10px;
            }
        }
        .left {
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin-right: 0 !important;
            text-align: center;
        }
        .wrap {
            display: block;
            overflow: 0;
            height: 5px;
        }
        .information {
            span.undertaking {
                display: block;
                margin: 6px 0;
            }
            .motherboard {
                display: block;
            }
        }
        div.copyright {
            text-align: center;
            p {
                display: block !important;
            }
            div {
                display: inline-block;
                width: 12px;
            }
            .jing {
                margin-right: 12px !important;
                display: inline-block !important;
            }
        }
    }
}
.portalFooter {
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
}
.portalFooter .footer {
    width: 69%;
    padding: 0 0 15px;
    min-height: 100px;
}
.footer .left {
    margin-right: 1vw;
}
.footer .divider {
    width: 100%;
    height: 6px;
    background: #005492;
    margin-bottom: 15px;
}
.footer .relation {
    margin: 4px 0 8px;
    display: flex;
}
.footer .relation span {
    margin: 0 14px;
}
.footer .relation a {
    font-size: 14px;
}
.footer .information {
    display: flex;
    justify-content: center;
    color: #666;
    .undertaking {
        display: inline-block;
        margin: 0 18px;
    }
}
.footer .information a {
    color: #666;
}
    .footer .information a:hover {
        color: #337ab7;
        text-decoration:underline
    }
.footer .information .copyright {
    font-size: 14px;
    p {
        display: none;
    }
    a {
        color: #337ab7;
    }
}