:root {
    --BaseRatio: 1;
    --Basic-Font-Size: calc(100px * var(--BaseRatio)); /*基准字体大小*/
    --Container-Width: calc(12.8rem * var(--BaseRatio)); /* 容器宽度 */
    --Part-Margin-Top: calc(0.6rem * var(--BaseRatio)); /* 每块之间的间距  */
    --Btn-Radius-Size: calc(0.05rem * var(--BaseRatio)); /* 按钮圆角尺寸 */
    --Part-Body-Margin-Top: calc(0.52rem * var(--BaseRatio)); /* 每块内容的上边距 */
}
html {
    font-size: var(--Basic-Font-Size);
    font-family: Arial;
}
body {
    background-color: #ecf7ff;
}
html,
body,
div,
span,
section,
header,
main,
footer,
p,
a,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
article,
aside,
video,
table,
tr,
td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    outline: none;
}
.container {
    width: var(--Container-Width);
}
.margin-center {
    margin-left: auto;
    margin-right: auto;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}
.block {
    display: block;
}
.c::after {
    content: "";
    display: block;
    clear: both;
}
.ellips {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc {
    display: block;
}
.m {
    display: none;
}
.navigation {
    margin-top: calc(0.28rem * var(--BaseRatio));
    font-size: 0.16rem;
    color: #3a82c0;
}
.navigation a {
    color: #3a82c0;
}
main {
    margin-top: calc(0.3rem * var(--BaseRatio));
    margin-bottom: calc(0.5rem * var(--BaseRatio));
    padding: calc(0.4rem * var(--BaseRatio)) calc(0.4rem * var(--BaseRatio));
    background-color: #fff;
    box-shadow: 0 0 0.15rem #d5eafc;
}
.item {
    display: flex;
    justify-content: space-between;
    padding: 0.24rem 0.27rem;
    background-color: #f3f3f3;
}
.item + .item {
    margin-top: 0.3rem;
}
.item img {
    margin-right: calc(0.5rem * var(--BaseRatio));
    display: block;
    width: calc(2.75rem * var(--BaseRatio));
    height: auto;
}
.item .msg {
    flex: 1;
}
.item .msg h5 {
    font-size: 0.24rem;
    line-height: 1.6em;
}
.item .msg h5 a {
    color: #000;
}
.item .msg p {
    margin-top: calc(0.18rem * var(--BaseRatio));
    color: #444444;
    font-size: 0.2rem;
    line-height: 1.6em;
}
.N_pageBox {
    margin: calc(0.4rem * var(--BaseRatio)) 0 0;
    display: flex;
    justify-content: center;
    column-gap: 0.28rem;
}
.N_pageBox a,
.N_pageBox span {
    padding: 0.08rem 0.15rem;
    font-size: 0.18rem;
    background-color: #bcdeff;
    border-radius: 0.05rem;
    color: #fff;
    line-height: 1em;
}
.N_pageBox a#firstp {
    padding-left: 0.05rem;
}
.N_pageBox a#lastp {
    padding-right: 0.05rem;
}
.N_pageBox span#active,
.N_pageBox a:hover {
    background-color: #1766c6;
}
.art-box {
    margin-top: calc(0.4rem * var(--BaseRatio));
    margin-bottom: calc(0.6rem * var(--BaseRatio));
}
.art-box h1 {
    font-size: 0.24rem;
    line-height: 1.6em;
    text-align: center;
}
.art-box .time {
    margin-top: calc(0.18rem * var(--BaseRatio));
    font-size: 0.16rem;
    color: #999999;
    text-align: center;
}
.art-box .time span {
    padding-left: calc(0.31rem * var(--BaseRatio));
    background: url(../img/OneStopService_home_15.png) calc(0.03rem * var(--BaseRatio)) center/calc(0.2rem * var(--BaseRatio)) calc(0.2rem * var(--BaseRatio)) no-repeat;
}
.art-box article {
    margin-top: calc(0.18rem * var(--BaseRatio));
    padding: calc(0.25rem * var(--BaseRatio)) calc(0.2rem * var(--BaseRatio));
    color: #333333;
    min-height: calc(6rem * var(--BaseRatio));
    font-size: 0.2rem;
    line-height: 1.6em;
    border-top: 1px solid #cccccc;
}
.art-box article::after {
    content: "";
    display: block;
    clear: both;
}
.art-box article > p,
.art-box article > div {
    margin-bottom: calc(0.15rem * var(--BaseRatio));
}
.art-box article img,
.art-box article video {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.art-box article table {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.guide-tabs {
    margin-top: calc(0.4rem * var(--BaseRatio));
    display: flex;
    font-size: 0.22rem;
    justify-content: space-between;
    background-color: #c9e1fa;
    position: sticky;
    top: 0;
    z-index: 99;
    font-family: "Times New Roman";
}
.guide-tabs a {
    color: #000;
    padding: 0 calc(0.3rem * var(--BaseRatio));
    height: calc(0.8rem * var(--BaseRatio));
    display: flex;
    align-items: center;
    justify-content: center;
}
.guide-tabs a.active {
    background: linear-gradient(to right, #0dccff, #4760ff);
    color: #fff;
}
.guide-wrapper {
    margin-top: calc(0.6rem * var(--BaseRatio));
    margin-bottom: calc(0.6rem * var(--BaseRatio));
    padding: calc(0.38rem * var(--BaseRatio)) calc(0.38rem * var(--BaseRatio)) calc(0.6rem * var(--BaseRatio));
    box-shadow: 0 0 0.15rem #d7e8fa;
    opacity: 0;
    transform: translateY(1rem);
    transition: 0.4s linear;
    background-color: #fff;
}
.guide-wrapper.load {
    opacity: 1;
    transform: translateY(0);
}
.guide-title {
    position: relative;
    font-family: Georgia;
    color: #3a82c0;
    font-size: 0.32rem;
    padding-left: 0.5rem;
    background: url(../img/OneStopService_home_16.png) 0 center/0.28rem 0.3rem no-repeat;
}
.guide-title a.download {
    width: calc(1.7rem * var(--BaseRatio));
    height: calc(0.36rem * var(--BaseRatio));
    padding-left: calc(0.6rem * var(--BaseRatio));
    color: #fff;
    background: url(../img/OneStopService_home_29.jpg.png) calc(0.28rem * var(--BaseRatio)) center  #73b0f2 no-repeat;
    font-size: 0.18rem;
    font-family: Arial;
    line-height: calc(0.36rem * var(--BaseRatio));
    border-radius: calc(0.18rem * var(--BaseRatio));
}
.guide-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.guide-wrapper .guide-table {
    margin-top: calc(0.32rem * var(--BaseRatio));
    width: 100%;
    font-size: 0.2rem;
    color: #666666;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid #3a82c0;
    border-right: 1px solid #3a82c0;
}
.guide-wrapper .guide-table.guide-table-2 {
    grid-template-columns: 4fr 6fr;
}
.guide-wrapper .guide-table.guide-table-3 {
    grid-template-columns: 4fr 3fr 2fr 1fr;
}
.guide-wrapper .guide-table.guide-table-5 {
    grid-template-columns: 3fr 3fr 4fr;
}
.guide-wrapper .guide-table.guide-table-location {
    grid-template-columns: 3fr 4fr 3fr;
}
.guide-wrapper .guide-table.guide-table-process {
    grid-template-columns: 1fr;
}
.guide-wrapper .guide-table div {
    padding: 0.32rem;
    border-top: 1px solid #3a82c0;
    border-left: 1px solid #3a82c0;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
    row-gap: 0.15rem;
    line-height: 1.4em;
}
.guide-wrapper .guide-table div.name {
    background-color: #eaf3ff;
    color: #3a82c0;
    font-weight: bold;
}
.guide-wrapper .guide-table div.skyblue {
    color: #3a82c0;
}
.guide-wrapper .guide-table div.margin-center {
    align-items: center;
}
.guide-wrapper .guide-list {
    margin-top: calc(0.3rem * var(--BaseRatio));
}
.guide-wrapper .guide-list li {
    position: relative;
    padding: calc(0.2rem * var(--BaseRatio)) calc(0.45rem * var(--BaseRatio));
    border-bottom: 1px dashed #888888;
    font-size: 0.2rem;
}
.guide-wrapper .guide-list li::before {
    content: "";
    position: absolute;
    left: calc(0.12rem * var(--BaseRatio));
    top: calc(0.25rem * var(--BaseRatio));
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    background-color: #888888;
}
.guide-wrapper .guide-list a {
    color: #666666;
}
.guide-wrapper .guide-list li:hover::before {
    background-color: #3a82c0;
}
.guide-wrapper .guide-list li:hover a {
    color: #3a82c0;
}
.guide-wrapper .guide-notes {
    padding: 0.32rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.18rem;
    color: #3a82c0;
    background-color: #eaf3ff;
    border: 1px solid #3a82c0;
    border-top: none;
}
.btn-switch {
    margin-left: calc(0.1rem * var(--BaseRatio));
    position: relative;
    cursor: pointer;
    font-size: 0.2rem;
    font-style: initial;
    color: #2474b9;
    border: 1px solid #3a82c0;
    cursor: pointer;
    padding: calc(0.05rem * var(--BaseRatio)) calc(0.35rem * var(--BaseRatio)) calc(0.05rem * var(--BaseRatio)) calc(0.15rem * var(--BaseRatio));
    border-radius: 0.05rem;
}
.btn-switch::after {
    content: "";
    position: absolute;
    right: calc(0.12rem * var(--BaseRatio));
    top: calc(0.12rem * var(--BaseRatio));
    width: 0;
    height: 0;
    border: 0.06rem solid transparent;
    border-top: 0.08rem solid #2474b9;
}
.switch-cites {
    padding: 0.48rem 0.35rem;
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0 0.15rem #3a82c0;
    border-radius: 0.1rem;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    font-size: 0.2rem;
    row-gap: 0.15rem;
}
.switch-cites span {
    padding: 0.05rem 0.18rem;
    cursor: pointer;
}
.switch-cites span:hover {
    background-color: #eaf3ff;
    border-radius: 0.05rem;
}
.city-gulide-line-wrapper{
    margin-top: calc(0.4rem * var(--BaseRatio));
    margin-bottom: calc(0.5rem * var(--BaseRatio));
    display: flex;
    justify-content: space-between;
}
.city-gulide-line-wrapper .left {
    width: calc(9.4rem * var(--BaseRatio));
}
.city-gulide-line-wrapper .tab {
    font-size: 0.24rem;
    display: flex;
    justify-content: space-between;
    color: #3a82c0;
    height: calc(0.8rem * var(--BaseRatio));
    background-color: #c9e1fa;
    font-family: "Times New Roman";
    position: sticky;
    top: 0;
    left: 0;
}
.city-gulide-line-wrapper .tab span {
    padding: 0 calc(0.5rem * var(--BaseRatio));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.city-gulide-line-wrapper .tab span.active {
    color: #fff;
    background: linear-gradient(to right, #0dccff, #4760ff);
}
.art-city-content {
    margin-top: calc(0.4rem * var(--BaseRatio));
    padding: calc(0.5rem * var(--BaseRatio)) calc(0.37rem * var(--BaseRatio));
    background: #fff;
    box-shadow: 0 0 0.15rem #d7e8fa;
    font-size: 0.2rem;
    line-height: 1.6em;
    color: #333333;
    min-height: calc(5rem * var(--BaseRatio));
}
.art-city-content > p,
.art-city-content > div {
    margin-bottom: calc(0.15rem * var(--BaseRatio));
}
.art-city-content img,
.art-city-content video {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.art-city-content h2 {
    margin-top: calc(0.3rem * var(--BaseRatio));
    font-size: 0.22rem;
    margin-bottom: calc(0.12rem * var(--BaseRatio));
}
.art-city-content h2:first-child {
    margin-top: 0;
}
.art-city-content h3 {
    font-size: 0.24rem;
    margin-bottom: calc(0.12rem * var(--BaseRatio));
}
.art-city-content .link {
    display: block;
    margin-bottom: calc(0.12rem * var(--BaseRatio));
    color: #333333;
    text-decoration: underline;
}
.city-gulide-line-wrapper .right {
    width: calc(2.92rem * var(--BaseRatio));
}
.city-gulide-line-wrapper .right-item {
    display: block;
    position: relative;
    margin-bottom: calc(0.32rem * var(--BaseRatio));
}
.city-gulide-line-wrapper .right-item .msg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: calc(0.05rem * var(--BaseRatio));
}
.city-gulide-line-wrapper .right-item .msg .name {
    font-size: 0.3rem;
    font-family: "Times New Roman";
    font-weight: bold;
    color: #fff;
    line-height: 1.6em;
}
.city-gulide-line-wrapper .right-item .msg img {
    width: calc(0.38rem * var(--BaseRatio));
}

@media (max-width: 1280px) {
    :root {
        --Basic-Font-Size: 13.333333333333334vw; /*基准字体大小*/
        --Container-Width: 6.95rem; /* 容器宽度 */
        --Part-Margin-Top: 0.6rem; /* 每块之间的间距  */
        --Btn-Radius-Size: 0.05rem; /* 按钮圆角尺寸 */
        --Part-Body-Margin-Top: 0.52rem; /* 每块内容的上边距 */
    }
    .pc {
        display: none !important;
    }
    .m {
        display: block !important;
    }
    .navigation {
        font-size: 0.24rem;
    }
    .list .item {
        flex-direction: column;
    }
    .list .item img {
        margin-right: 0;
        margin-bottom: 0.2rem;
        width: 100%;
    }
    .item .msg h5 {
        font-size: 0.28rem;
    }
    .item .msg p {
        font-size: 0.26rem;
    }
    .N_pageBox {
        column-gap: 0.15rem;
    }
    .N_pageBox a,
    .N_pageBox span {
        font-size: 0.2rem;
    }
    .art-box h1 {
        font-size: 0.36rem;
    }
    .art-box .time span{
        padding-left: 0.4rem;
        background-size: 0.24rem 0.24rem;
        font-size: 0.22rem;
    }
    .art-box article {
        font-size: 0.28rem;
    }
    .guide-tabs {
        flex-wrap: wrap;
        height: auto;
        row-gap: 0.2rem;
        font-size: 0.28rem;
    }
    .guide-tabs a {
        height: 1rem;
        text-align: center;
        width: 50%;
    }
    .guide-tabs a.active {
        transform: none;
    }
    .guide-wrapper .guide-table {
        grid-template-columns: 1fr 1fr;
        font-size: 0.26rem;
    }
    .guide-title a.download {
        background-size: 0.15rem 0.18rem;
    }
    .guide-wrapper .guide-table.guide-table-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .guide-wrapper .guide-table div {
        justify-content: flex-start;
        padding: 0.15rem;
        overflow: hidden;
    }
    .guide-wrapper .guide-table.guide-table-5 div,
    .guide-wrapper .guide-table.guide-table-3 div {
        justify-content: center;
    }
    .switch-cites {
        left: 0;
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.26rem;
    }
    .guide-wrapper .guide-list li {
        font-size: 0.28rem;
        padding: 0.3rem 0.45rem;
    }
    .guide-wrapper .guide-list li::before {
        left: 0.15rem;
        top: 0.38rem;
    }
    .city-gulide-line-wrapper {
        flex-direction: column;
    }
    .city-gulide-line-wrapper .left,
    .city-gulide-line-wrapper .right {
        width: 100%;
    }
    .city-gulide-line-wrapper .tab {
        flex-wrap: wrap;
        column-gap: 0;
        height: auto;
    }
    .city-gulide-line-wrapper .tab span {
        width: 50%;
        padding: 0;
        height: 1rem;
        text-align: center;
    }
    .art-city-content {
        font-size: 0.28rem;
    }
    .art-city-content h2 {
        font-size: 0.3rem;
    }
    .city-gulide-line-wrapper .right {
        margin-top: 0.6rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .city-gulide-line-wrapper .right>a {
        width: 3.3rem;
        height: auto;
    }
    .city-gulide-line-wrapper .right-item .msg .name {
        font-size: 0.32rem;
    }
    .city-gulide-line-wrapper .right-item .msg img {
        width: 0.4rem;
    }
    .city-gulide-line-wrapper .right-item {
        margin-bottom: 0.4rem;
    }
    .btn-switch {
        padding: 0.08rem 0.4rem 0.08rem 0.18rem;
    }
    .btn-switch::after {
        right: 0.15rem;
        top: 0.17rem;
    }
}