/* ———— RESETS START ———— */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

main,
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
    display: block;
}

html {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
    font-family: "font", sans-serif;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: middle;
}

/* ———— RESETS END ———— */

/* 切换 */
html.is-changing .transition-main {
    transition: opacity 350ms ease-in-out;
}

html.is-animating .transition-main {
    opacity: 0;
}

/* 切换 */

/* ———— COMMON START ———— */
.aspect-ratio {
    position: relative
}

.aspect-ratio::before {
    content: "";
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0
}

.aspect-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.aspect-ratio.aspect-ratio-1\/1:before {
    padding-top: 100%
}

.aspect-ratio.aspect-ratio-16\/9:before {
    padding-top: 56.25%
}

.d-flex,
.flex-center,
.flex-column-center {
    display: -ms-flexbox;
    display: flex;
}

.flex-column,
.flex-column-center {
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-center,
.align-center,
.flex-column-center {
    -ms-flex-align: center;
    align-items: center;
}

.flex-center,
.flex-column-center,
.justify-content-center {
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-content-evenly {
    -ms-flex-pack: distribute;
    justify-content: space-evenly;
}

.justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.justify-content-between {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.align-start {
    -ms-flex-align: start;
    align-items: flex-start;
}

.align-end {
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
}

.align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* ———— COMMON END ———— */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 定义fadeIn动画 */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn 1s ease-in both;
    animation: fadeIn 1s ease-in both;
}

/* 外层容器 */
#main {
    scrollbar-width: none;
    /* Firefox隐藏滚动条 */
    -ms-overflow-style: none;
    /* Internet Explorer 10+隐藏滚动条 */
    width: 100%;
    height: 100vh;
    padding: 30px;
    overflow-y: hidden;
    background-image: url(../images/public/45.png);
    background-size: cover;

    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    will-change: scroll-position, paint;
}

#main.is-dragging {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* 内层边框 */
.wrapper-container {
    will-change: transform;
    width: -moz-max-content; /* Firefox */
    width: -webkit-max-content; /* Chrome, Safari, Opera */
    width: max-content; /* 标准语法 */
    min-width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    background: radial-gradient(circle at top left, transparent 25px, #E4E5D4 26px) top left,
        radial-gradient(circle at top right, transparent 25px, #E4E5D4 26px) top right,
        radial-gradient(circle at bottom right, transparent 25px, #E4E5D4 26px) bottom right,
        radial-gradient(circle at bottom left, transparent 25px, #E4E5D4 26px) bottom left;
    background-size: 60% 60%;
    background-repeat: no-repeat;

    opacity: 0; /* 初始状态设为透明，以便看到淡入效果 */
}

.wrapper-container::before,
.wrapper-container::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrapper-container::before {
    border: 1px solid #333;

    background: radial-gradient(circle at top left, transparent 21px, #333 23px, transparent 24px) top left,
        radial-gradient(circle at top right, transparent 21px, #333 23px, transparent 24px) top right,
        radial-gradient(circle at bottom right, transparent 21px, #333 23px, transparent 24px) bottom right,
        radial-gradient(circle at bottom left, transparent 21px, #333 23px, transparent 24px) bottom left;

    -webkit-clip-path: polygon(24px 0%,
            calc(100% - 24px) 0%,
            100% 24px,
            100% calc(100% - 24px),
            calc(100% - 24px) 100%,
            24px 100%,
            0% calc(100% - 24px),
            0% 24px);
    clip-path: polygon(24px 0%,
            calc(100% - 24px) 0%,
            100% 24px,
            100% calc(100% - 24px),
            calc(100% - 24px) 100%,
            24px 100%,
            0% calc(100% - 24px),
            0% 24px);
}

.wrapper-container::after {
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background: radial-gradient(circle at top left, transparent 18px, #E4E5D4 19px) top left,
        radial-gradient(circle at top right, transparent 18px, #E4E5D4 19px) top right,
        radial-gradient(circle at bottom right, transparent 18px, #E4E5D4 19px) bottom right,
        radial-gradient(circle at bottom left, transparent 18px, #E4E5D4 19px) bottom left;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(0 0 1px black);
    filter: drop-shadow(0 0 1px black);
}

/* 导航 */
.page-navigation-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.page-navigation,
.menu-btn-guide-wrap {
    position: fixed;
    bottom: 30px;
    right: calc(2.604167vw + 36px);
    pointer-events: auto;
}

.navigation-item {
    position: relative;
    z-index: 100;
    cursor: pointer;
    height: calc(2.083333vw + 32px);
}

.cursor-default {
    cursor: default;
}

.navigation-item+.navigation-item {
    margin-left: 1.5625vw;
}

.navigation-item img {
    height: 100%;
}

.second-navigation {
    position: absolute;
    left: 0;
    z-index: 100;
    bottom: calc(2.083333vw + 40px);

    width: 4.166667vw;
    padding: 1.302083vw 0;
    background-image: url(../images/public/29.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);

    -webkit-transition: transform .35s, opacity .2s, visibility .35s;
    -moz-transition: transform .35s, opacity .2s, visibility .35s;
    transition: transform .35s, opacity .2s, visibility .35s;
}

.show .second-navigation {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

.second-navigation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: .520833vw;
    left: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.second-navigation-item {
    padding: 0 .520833vw;
}

.second-navigation-item a:hover,
.second-navigation-item span {
    background-color: #E4E5D4;
}

.second-navigation-item a:hover {
    color: black;
}

.second-navigation::after,
.second-navigation-item a,
.second-navigation-item span {
    display: block;
    text-align: center;
    padding: .625vw 0;
    font-size: 1.041667vw;

    -webkit-transition: color, .2s, background .2s;
    -moz-transition: color, .2s, background .2s;
    transition: color, .2s, background .2s;
}

.second-navigation-item a {
    color: white;
}

.second-navigation-item~.second-navigation-item a,
.second-navigation-item~.second-navigation-item span {
    margin-top: 17px;
}

/* 内容盒子 */
.inner-item-content {
    height: 100%;
    padding: 2.083333vw;
}

/* 内部列表 */
.inner-list {
    padding: 15px;

    display: -ms-flexbox;
    display: flex;
}

.inner-list,
.inner-item {
    height: 100%;
}

.inner-list .inner-item {
    flex-shrink: 0;
}

.inner-list .inner-item+.inner-item {
    flex-grow: 1;
}

/* 页面标题 */
.font-sxls,
.page-title,
.language-article .current-quantity,
.language-article-content .article-title {
    font-family: "SuXinShiLiuKaiJianTi", "font", sans-serif;
}

.font-ssx,
.language-article .quantity {
    font-family: "HYSunShangXiangJ-2", "SuXinShiLiuKaiJianTi", "font", sans-serif;
}

.page-title {
    position: relative;
    width: 4.166667vw;
    color: #6F732B;
    font-size: 2.395833vw;
    margin-left: 2.083333vw;

    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

.page-title img {
    width: 100%;
}

.page-title.aspect-ratio::before {
    padding-top: 584.337349%;
}

.page-title>span {
    height: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    writing-mode: vertical-lr;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
}

/* 最里面的嵌套边框 */
.main-body {
    height: 100%;
    border: 1px solid #999999;
    position: relative;
    padding: 17px;
    z-index: 1;
}

.main-body::before {
    content: "";
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    border: 2px solid #666B19;
    pointer-events: none;
    z-index: -1;
}

.main-body>div,
.main-content>div {
    flex-shrink: 0;
}

.main-content {
    height: 100%;
    padding: 0 2.604167vw;
}

.seal-content-wrapper {
    height: 100%;
}

/* 知识点文章 */
.language-article-wrapper {
    padding-left: 2.604167vw;
}

.language-article:nth-child(1) .quantity span,
.language-article:nth-child(2) .quantity span {
    margin-top: -0.15em;
}

.mobile .language-article:nth-child(1) .quantity span,
.mobile .language-article:nth-child(2) .quantity span {
    margin-top: 0;
}

.language-article {
    position: relative;
    width: 40vw;
    height: 100%;
    background-color: #D6D7BC;
    padding: 4.166667vw 2.604167vw 2.604167vw;

    background-size: 45% auto, 20% auto;
    background-repeat: no-repeat;
    background-position: top right, 2.604167vw 86%;
}

.language-article+.language-article {
    margin-left: 2.604167vw;
}

.language-article .current-quantity {
    position: absolute;
    display: -ms-inline-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    writing-mode: vertical-lr;
    -webkit-box-orient: vertical;

    width: 4.166667vw;
    color: #6F732B;
    font-size: 2.395833vw;
    padding-bottom: .520833vw;

    /* background-image: url(../images/public/12.png); */
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.language-article .quantity {
    display: block;
    width: 100%;
    margin-top: 1.302083vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-article .quantity img {
    width: 100%;
}

.language-article .quantity span {
    position: absolute;
}

.language-article-content {
    height: 100%;
    padding-top: 8vw;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
}

.language-article-content .article-title {
    position: relative;
    margin-bottom: 2.083333vw;
    width: 5.208333vw;
}

.language-article-content img {
    max-width: 100%;
}

.language-article-content .article-title span {
    position: absolute;
    color: white;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .520833vw;
    font-size: 1.25vw;
    text-align: center;
}

.language-article.usage .language-article-content .article-title {
    width: 30%;
}

.usage .article-title>span {
    font-size: 1.5625vw;
    top: 0;
    left: 0;
    padding: .520833vw .625vw;
}

.language-article-content .two-font span,
.language-article-content .four-font span {
    font-size: 1.875vw;
}

.language-article-content .three-font span {
    font-size: 1.770833vw;
}

.language-article-content .two-font span {
    padding: 0px !important;
    height: auto;
}

.language-article-content .two-font span:nth-child(1) {
    left: 0.78125vw;
    top: 0.78125vw;
}

.language-article-content .two-font span:nth-child(2) {
    right: 0.78125vw;
    bottom: 0.78125vw;
}

.language-article-content .three-font span {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    writing-mode: vertical-lr;
    width: 100%;
    height: 100%;
    text-align: center;
}

.language-article-content .four-font span {
    text-align: center;
}

.language-article-content .eight-font span {
    text-align: center;
    font-size: 1.041667vw;
}

.language-article-content .article-content {
    width: 100%;
    text-indent: 2em;
    text-align: justify;
    font-size: 1.041667vw;
    line-height: 1.75;
}

.language-article-content .article-link {
    color: black;
    font-size: .885417vw;
    margin-top: auto;
}

.language-article-content .article-link>img {
    height: 25px;
    margin-left: 10px;
}

/* 指引 */
.guide-mask {
    opacity: 0;
    position: fixed;
    top: 0; left: 0; z-index: 999;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(.07rem);
    backdrop-filter: blur(.07rem);
}

.guide-mask .operation-method-guide {
    position: absolute;
    top: 50%; left: 50%; width: fit-content;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}

.guide-mask .operation-method-guide span {
    display: block;
    color: white;
    font-family: sans-serif;
    margin-top: 10px;
}

.guide-mask .operation-method-guide img {
    width: 100%; height: auto;
}

.guide-mask .operation-method-guide img.pc-operation {
    width: 60%;
    margin: 0 auto;
}

.guide-mask .menu-btn-operation-wrap {
    position: absolute;
    bottom: 0; left: 0;
    -webkit-transform: translate(-8%, 10%);
    transform: translate(-8%, 10%);
}

.guide-mask .menu-btn-operation-wrap > img {
    width: 120%;
}

.guide-mask .menu-btn-operation-list {
    position: absolute;
    color: white;
    top: 0; left: 50%;
    -webkit-transform: translate(-50%, -110%);
    -moz-transform: translate(-50%, -110%);
    transform: translate(-50%, -110%);
}

.guide-mask .menu-btn-operation-list li {
    font-size: 16px;
    line-height: 40px;
    white-space: nowrap;
    font-family: sans-serif;
}

.guide-mask .menu-btn-operation-list li img {
    width: 30px; height: 30px;
    margin-right: 10px;
}

.mobile .pc-operation,
.mobile-operation {
    display: none;
}

.pc-operation,
.mobile .mobile-operation {
    display: block;
}

/* 隐藏元素 */
.foreword .foreword-title,
.foreword .foreword-content,
.foreword .seal-list,
.mudcap-content,
.mudcap,
.mcgy-content-left,
.mcgy-content-right > div,
.mcgy-list,
.wrzy-content-left,
.wrzy-content-right > p,
.wrzy-list,
.seal-first-wrapper .seal-content,
.seal-first-wrapper .seal-list,
.seal-second-wrapper .seal-content,
.seal-second-wrapper .seal-second-list,
.seal-first-content-left,
.seal-first-content-right > p,
.seal-second-content-right > p,
.seal-third-content-right > p,
.seal-fourth-content-right > p,
.seal-first-content-right > ul,
.seal-second-content-right > ul,
.seal-third-content-right > ul,
.seal-fourth-content-right > ul {
    opacity: 0;
}

.mobile .foreword .foreword-title,
.mobile .foreword .foreword-content,
.mobile .foreword .seal-list,
.mobile .mudcap-content,
.mobile .mudcap,
.mobile .mcgy-content-left,
.mobile .mcgy-content-right > div,
.mobile .mcgy-list,
.mobile .wrzy-content-left,
.mobile .wrzy-content-right > p,
.mobile .wrzy-list,
.mobile .seal-first-wrapper .seal-content,
.mobile .seal-first-wrapper .seal-list,
.mobile .seal-second-wrapper .seal-content,
.mobile .seal-second-wrapper .seal-second-list,
.mobile .seal-first-content-left,
.mobile .seal-first-content-right > p,
.mobile .seal-second-content-right > p,
.mobile .seal-third-content-right > p,
.mobile .seal-fourth-content-right > p,
.mobile .seal-first-content-right > ul,
.mobile .seal-second-content-right > ul,
.mobile .seal-third-content-right > ul,
.mobile .seal-fourth-content-right > ul,
.mobile .seal-first-list-item,
.mobile .seal-second-list-item,
.mobile .seal-third-list-item,
.mobile .seal-fourth-list-item {
    opacity: 1;
}

@media (max-width: 1280px) {
    #main {
        padding: 20px;
    }

    .wrapper-container {
        background: radial-gradient(circle at top left, transparent 15px, #E4E5D4 16px) top left,
            radial-gradient(circle at top right, transparent 15px, #E4E5D4 16px) top right,
            radial-gradient(circle at bottom right, transparent 15px, #E4E5D4 16px) bottom right,
            radial-gradient(circle at bottom left, transparent 15px, #E4E5D4 16px) bottom left;
        background-size: 60% 60%;
        background-repeat: no-repeat;
    }

    .wrapper-container::before {
        background: radial-gradient(circle at top left, transparent 14px, #333 16px, transparent 17px) top left,
            radial-gradient(circle at top right, transparent 14px, #333 16px, transparent 17px) top right,
            radial-gradient(circle at bottom right, transparent 14px, #333 16px, transparent 17px) bottom right,
            radial-gradient(circle at bottom left, transparent 14px, #333 16px, transparent 17px) bottom left;

        -webkit-clip-path: polygon(17px 0%,
                calc(100% - 17px) 0%,
                100% 17px,
                100% calc(100% - 17px),
                calc(100% - 17px) 100%,
                17px 100%,
                0% calc(100% - 17px),
                0% 17px);
        clip-path: polygon(17px 0%,
                calc(100% - 17px) 0%,
                100% 17px,
                100% calc(100% - 17px),
                calc(100% - 17px) 100%,
                17px 100%,
                0% calc(100% - 17px),
                0% 17px);
    }

    .wrapper-container::after {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: radial-gradient(circle at top left, transparent 13px, #E4E5D4 14px) top left,
            radial-gradient(circle at top right, transparent 13px, #E4E5D4 14px) top right,
            radial-gradient(circle at bottom right, transparent 13px, #E4E5D4 14px) bottom right,
            radial-gradient(circle at bottom left, transparent 13px, #E4E5D4 14px) bottom left;
        background-size: 60% 60%;
        background-repeat: no-repeat;
        -webkit-filter: drop-shadow(0 0 1px black);
        filter: drop-shadow(0 0 1px black);
    }

    .navigation-item {
        height: calc(2.083333vw + 22px);
    }

    .language-article {
        background-color: #D6D7BC;
        padding: 2.604167vw 2.604167vw 2.604167vw;
    }

    .language-article-content {
        padding-top: 7vw;
    }
}

@media (orientation: landscape) and (max-height: 480px), (orientation: portrait) and (max-width: 480px) {
    /* 移动端 */
    .mobile #main {
        padding: 10px;
    }

    .mobile .wrapper-container {
        background: radial-gradient(circle at top left, transparent 12px, #E4E5D4 13px) top left,
            radial-gradient(circle at top right, transparent 12px, #E4E5D4 13px) top right,
            radial-gradient(circle at bottom right, transparent 12px, #E4E5D4 13px) bottom right,
            radial-gradient(circle at bottom left, transparent 12px, #E4E5D4 13px) bottom left;
        background-size: 60% 60%;
        background-repeat: no-repeat;
    }

    .mobile .wrapper-container::before {
        background: radial-gradient(circle at top left, transparent 10px, #333 11px, transparent 12px) top left,
            radial-gradient(circle at top right, transparent 10px, #333 11px, transparent 12px) top right,
            radial-gradient(circle at bottom right, transparent 10px, #333 11px, transparent 12px) bottom right,
            radial-gradient(circle at bottom left, transparent 10px, #333 11px, transparent 12px) bottom left;

        -webkit-clip-path: polygon(12px 0%,
                calc(100% - 12px) 0%,
                100% 12px,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                12px 100%,
                0% calc(100% - 12px),
                0% 12px);
        clip-path: polygon(12px 0%,
                calc(100% - 12px) 0%,
                100% 12px,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                12px 100%,
                0% calc(100% - 12px),
                0% 12px);
    }

    .mobile .wrapper-container::after {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: radial-gradient(circle at top left, transparent 10px, #E4E5D4 11px) top left,
            radial-gradient(circle at top right, transparent 10px, #E4E5D4 11px) top right,
            radial-gradient(circle at bottom right, transparent 10px, #E4E5D4 11px) bottom right,
            radial-gradient(circle at bottom left, transparent 10px, #E4E5D4 11px) bottom left;
        background-size: 60% 60%;
        background-repeat: no-repeat;
        -webkit-filter: drop-shadow(0 0 1px black);
        filter: drop-shadow(0 0 1px black);
    }

    .mobile .menu-btn-guide-wrap,
    .mobile .page-navigation {
        bottom: 10px;
        right: calc(2.604167vw + 24px);
    }

    .navigation-item,
    .mobile .navigation-item {
        width: auto;
        height: calc(2.83333vw + 16px);
    }

    .mobile .second-navigation {
        width: 46px;
        left: -5px;
        bottom: calc(2.083333vw + 20px);
    }

    .mobile .second-navigation-item a,
    .mobile .second-navigation-item span {
        padding: 5px 0;
        font-size: 14px;
    }

    .mobile .second-navigation-item~.second-navigation-item a,
    .mobile .second-navigation-item~.second-navigation-item span {
        margin-top: 10px;
    }

    .mobile .second-navigation::before {
        height: 10px;
    }

    .mobile-portrait .menu-btn-guide-wrap,
    .mobile-portrait .page-navigation {
        bottom: 10px;
        right: calc(2.604167vh + 24px);
    }

    .navigation-item,
    .mobile-portrait .navigation-item {
        height: calc(2.83333vh + 16px);
    }

    .navigation-item+.navigation-item,
    .mobile-portrait .navigation-item+.navigation-item {
        margin-left: 15px;
    }

    .mobile-portrait .second-navigation {
        bottom: calc(2.9vh + 20px);
        padding: 10px 0px;
    }

    .mobile .main-body {
        padding: 10px;
    }

    .mobile .main-body::before {
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        top: 8px;
        left: 8px;
        border-width: 1px;
    }

    .mobile .main-body>div,
    .mobile .main-content>div {
        padding: 0 30px;
    }

    .mobile .inner-list {
        padding: 10px;
    }

    .mobile .inner-item-content {
        -ms-flex-direction: row;
        flex-direction: row;

        padding: 10px 20px;
    }

    .mobile .page-title {
        width: 35px;
        font-size: 20px;
        margin-left: 20px;
    }

    .mobile .page-title>img {
        height: 205px;
    }

    /* 知识点 */
    .mobile .language-article {
        width: 350px;
        padding: 15px;
    }

    .mobile .language-article .current-quantity {
        width: 30px;
        font-size: 16px;
        padding-bottom: 3px;
        left: 5px;
        top: 5px;
    }

    .mobile-portrait .language-article .current-quantity {
        left: initial;
        top: initial;
    }

    .mobile .language-article .quantity {
        font-size: 18px;
        margin-top: 5px;
    }

    .mobile .language-article-content {
        padding-top: 45px;
    }

    .mobile-landscape .language-article-content {
        padding-top: 0px;
    }

    .mobile .language-article-content .article-content {
        font-size: 11px;
    }

    .mobile-landscape .language-article-content .article-content {
        line-height: 1.5;
    }

    .mobile .language-article-content .article-title {
        margin-bottom: 10px;
    }

    .mobile .usage .article-title {
        width: 103px;
    }

    .mobile .article-title {
        width: 47px;
    }

    .mobile .usage .article-title>span {
        padding: 0 10px;
    }

    .mobile .article-title span {
        font-size: 12px;
    }

    .mobile .usage .article-title>span {
        font-size: 15px;
    }

    .mobile .two-font span,
    .mobile .three-font span,
    .mobile .four-font span {
        font-size: 16px;
    }

    .mobile .two-font span:nth-child(1) {
        left: 7px;
        top: 7px;
    }

    .mobile .two-font span:nth-child(2) {
        right: 7px;
        bottom: 7px;
    }

    .mobile .language-article-content .article-link {
        font-size: 12px;
    }

    .mobile .article-link>img {
        height: 20px;
    }

    .mobile .language-article-wrapper {
        padding-left: 30px;
    }

    .mobile .seal-content-wrapper {
        -ms-flex-align: center;
        align-items: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile .guide-mask .operation-method-guide {
        width: 12%;
    }

    .mobile .guide-mask .menu-btn-operation-list li {
        font-size: 12px;
        line-height: 30px;
    }
}

@media (orientation: landscape) and (min-height: 760px), 
(orientation: portrait) and (min-width: 760px), 
(orientation: landscape) and (min-height: 481px) and (max-height: 759px), 
(orientation: portrait) and (min-width: 481px) and (max-width: 759px) {
    .mobile .guide-mask .operation-method-guide {
        width: 12%;
    }

    .mobile .guide-mask .menu-btn-operation-list li {
        font-size: 12px;
        line-height: 30px;
    }

    .mobile .language-article {
        width: 60vmax;
    }

    .mobile .language-article-content .article-content {
        font-size: 1.464129vmax;
    }

    .mobile .usage .article-title>span {
        font-size: 2.635432vmax;
    }

    .mobile .language-article-content .article-link {
        font-size: 1.464129vmax;
    }

    .mobile .language-article-content .article-title {
        width: 7.320644vmax;
    }

    .mobile .language-article-content .article-title span {
        font-size: 2.04978vmax;
    }

    .mobile .language-article-content .two-font span,
    .mobile .language-article-content .four-font span,
    .mobile .language-article-content .three-font span {
        font-size: 2.635432vmax;
    }
}

@media (orientation: landscape) and (min-height: 481px) and (max-height: 759px), 
(orientation: portrait) and (min-width: 481px) and (max-width: 759px) {
    .mobile .language-article-content .article-content,
    .mobile .language-article-content .article-link {
        font-size: 1.458333vmax;
    }

    .mobile .language-article-content {
        padding-top: 4vmax;
    }
}