/*! 混入文件 */
html {
    -webkit-font-smoothing: antialiased
}

blockquote,
body,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

header,
hgroup,
nav,
menu,
main,
section,
article,
summary,
details,
aside,
figure,
figcaption,
footer {
    display: block;
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

table,
th,
td {
    border: 1px solid #000
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-weight: 400
}

dl,
ol,
ul {
    list-style-type: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%
}

a {
    text-decoration: none;
    blr: expression(this.onFocus=this.blur());
    color: inherit
}

a:hover {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    outline: 0;
    outline: none;
    blr: expression(this.onFocus=this.blur())
}

a:focus,
a:hover,
a:active {
    outline: none;
    blr: expression(this.onFocus=this.blur())
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

textarea {
    resize: none;
    outline: none;
    font-family: Arial, Microsoft Yahei
}

img {
    vertical-align: middle;
    height: auto
}

@media(min-width: 1201px) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: -o-crisp-edges;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor
    }
}

button,
input[type=submit],
input[type=text],
input[type=button] {
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    outline: 0;
    blr: expression(this.onFocus=this.blur())
}

input {
    outline: 0;
    border-radius: 0
}

input::-webkit-input-safebox-button {
    display: none
}

body {
    color: #000;
    overflow-x: auto !important;
    font-family: Arial, Microsoft Yahei
}

body * {
    box-sizing: border-box
}

#web-ietip {
    width: 610px;
    height: 173px;
    padding: 83px 0 0 84px;
    overflow: hidden;
    background: url(../css/ietip/browser.png) no-repeat center center;
    margin: 200px auto 0
}

#web-ietip a {
    display: block;
    width: 65px;
    height: 80px;
    float: left
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    line-height: 0;
    font-size: 0
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.eps2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.img-hover {
    position: relative;
    overflow: hidden
}

.img-hover img {
    display: block;
    transform: scale(1.001);
    vertical-align: top;
    transition: all .5s ease 0s
}

.img-hover:hover img {
    transform: scale(1.07)
}

.pic-hover {
    overflow: hidden;
    position: relative
}

.pic-hover img {
    transition: transform 12s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(1)
}

.pic-hover:hover img {
    transform: scale(1.1)
}

html {
    font-size: 5.2083333333vw
}

@media(max-width: 900px) {
    html {
        font-size: 46.875px
    }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

button,
label {
    cursor: pointer
}

body {
    font-size: .16rem
}

[data-eps="2"] {
    -webkit-line-clamp: 2
}

[data-eps="3"] {
    -webkit-line-clamp: 3
}

[data-eps="4"] {
    -webkit-line-clamp: 4
}

[data-eps="5"] {
    -webkit-line-clamp: 5
}

[data-eps="6"] {
    -webkit-line-clamp: 6
}

[data-eps="7"] {
    -webkit-line-clamp: 7
}

[data-eps="8"] {
    -webkit-line-clamp: 8
}

[data-eps="9"] {
    -webkit-line-clamp: 9
}

[data-eps="10"] {
    -webkit-line-clamp: 10
}

@media(max-width: 1584px) {
    body {
        font-size: 13.2px
    }
}

.s12 {
    font-size: calc(12*1rem/100)
}

@media(max-width: 1920px) {
    .s12 {
        font-size: 12px
    }
}

.s13 {
    font-size: calc(13*1rem/100)
}

@media(max-width: 1817px) {
    .s13 {
        font-size: 12.3px
    }
}

.s14 {
    font-size: calc(14*1rem/100)
}

@media(max-width: 1728px) {
    .s14 {
        font-size: 12.6px
    }
}

.s15 {
    font-size: calc(15*1rem/100)
}

@media(max-width: 1651px) {
    .s15 {
        font-size: 12.9px
    }
}

.s16 {
    font-size: calc(16*1rem/100)
}

@media(max-width: 1584px) {
    .s16 {
        font-size: 13.2px
    }
}

.s17 {
    font-size: calc(17*1rem/100)
}

@media(max-width: 1525px) {
    .s17 {
        font-size: 13.5px
    }
}

.s18 {
    font-size: calc(18*1rem/100)
}

@media(max-width: 1472px) {
    .s18 {
        font-size: 13.8px
    }
}

.s19 {
    font-size: calc(19*1rem/100)
}

@media(max-width: 1425px) {
    .s19 {
        font-size: 14.1px
    }
}

.s20 {
    font-size: calc(20*1rem/100)
}

@media(max-width: 1382px) {
    .s20 {
        font-size: 14.4px
    }
}

.s21 {
    font-size: calc(21*1rem/100)
}

@media(max-width: 1344px) {
    .s21 {
        font-size: 14.7px
    }
}

.s22 {
    font-size: calc(22*1rem/100)
}

@media(max-width: 1309px) {
    .s22 {
        font-size: 15px
    }
}

.s23 {
    font-size: calc(23*1rem/100)
}

@media(max-width: 1277px) {
    .s23 {
        font-size: 15.3px
    }
}

.s24 {
    font-size: calc(24*1rem/100)
}

@media(max-width: 1248px) {
    .s24 {
        font-size: 15.6px
    }
}

.s25 {
    font-size: calc(25*1rem/100)
}

@media(max-width: 1221px) {
    .s25 {
        font-size: 15.9px
    }
}

.s26 {
    font-size: calc(26*1rem/100)
}

@media(max-width: 1196px) {
    .s26 {
        font-size: 16.2px
    }
}

.s27 {
    font-size: calc(27*1rem/100)
}

@media(max-width: 1173px) {
    .s27 {
        font-size: 16.5px
    }
}

.s28 {
    font-size: calc(28*1rem/100)
}

@media(max-width: 1152px) {
    .s28 {
        font-size: 16.8px
    }
}

.s29 {
    font-size: calc(29*1rem/100)
}

@media(max-width: 1132px) {
    .s29 {
        font-size: 17.1px
    }
}

.s30 {
    font-size: calc(30*1rem/100)
}

@media(max-width: 1114px) {
    .s30 {
        font-size: 17.4px
    }
}

.s31 {
    font-size: calc(31*1rem/100)
}

@media(max-width: 1096px) {
    .s31 {
        font-size: 17.7px
    }
}

.s32 {
    font-size: calc(32*1rem/100)
}

@media(max-width: 1080px) {
    .s32 {
        font-size: 18px
    }
}

.s33 {
    font-size: calc(33*1rem/100)
}

@media(max-width: 1065px) {
    .s33 {
        font-size: 18.3px
    }
}

.s34 {
    font-size: calc(34*1rem/100)
}

@media(max-width: 1050px) {
    .s34 {
        font-size: 18.6px
    }
}

.s35 {
    font-size: calc(35*1rem/100)
}

@media(max-width: 1037px) {
    .s35 {
        font-size: 18.9px
    }
}

.s36 {
    font-size: calc(36*1rem/100)
}

@media(max-width: 1024px) {
    .s36 {
        font-size: 19.2px
    }
}

.s37 {
    font-size: calc(37*1rem/100)
}

@media(max-width: 1012px) {
    .s37 {
        font-size: 19.5px
    }
}

.s38 {
    font-size: calc(38*1rem/100)
}

@media(max-width: 1000px) {
    .s38 {
        font-size: 19.8px
    }
}

.s39 {
    font-size: calc(39*1rem/100)
}

@media(max-width: 990px) {
    .s39 {
        font-size: 20.1px
    }
}

.s40 {
    font-size: calc(40*1rem/100)
}

@media(max-width: 979px) {
    .s40 {
        font-size: 20.4px
    }
}

.s41 {
    font-size: calc(41*1rem/100)
}

@media(max-width: 969px) {
    .s41 {
        font-size: 20.7px
    }
}

.s42 {
    font-size: calc(42*1rem/100)
}

@media(max-width: 960px) {
    .s42 {
        font-size: 21px
    }
}

.s43 {
    font-size: calc(43*1rem/100)
}

@media(max-width: 951px) {
    .s43 {
        font-size: 21.3px
    }
}

.s44 {
    font-size: calc(44*1rem/100)
}

@media(max-width: 943px) {
    .s44 {
        font-size: 21.6px
    }
}

.s45 {
    font-size: calc(45*1rem/100)
}

@media(max-width: 934px) {
    .s45 {
        font-size: 21.9px
    }
}

.s46 {
    font-size: calc(46*1rem/100)
}

@media(max-width: 927px) {
    .s46 {
        font-size: 22.2px
    }
}

.s47 {
    font-size: calc(47*1rem/100)
}

@media(max-width: 919px) {
    .s47 {
        font-size: 22.5px
    }
}

.s48 {
    font-size: calc(48*1rem/100)
}

@media(max-width: 912px) {
    .s48 {
        font-size: 22.8px
    }
}

.s49 {
    font-size: calc(49*1rem/100)
}

@media(max-width: 905px) {
    .s49 {
        font-size: 23.1px
    }
}

.s50 {
    font-size: calc(50*1rem/100)
}

@media(max-width: 899px) {
    .s50 {
        font-size: 23.4px
    }
}

.s51 {
    font-size: calc(51*1rem/100)
}

@media(max-width: 892px) {
    .s51 {
        font-size: 23.7px
    }
}

.s52 {
    font-size: calc(52*1rem/100)
}

@media(max-width: 886px) {
    .s52 {
        font-size: 24px
    }
}

.s53 {
    font-size: calc(53*1rem/100)
}

@media(max-width: 880px) {
    .s53 {
        font-size: 24.3px
    }
}

.s54 {
    font-size: calc(54*1rem/100)
}

@media(max-width: 875px) {
    .s54 {
        font-size: 24.6px
    }
}

.s55 {
    font-size: calc(55*1rem/100)
}

@media(max-width: 869px) {
    .s55 {
        font-size: 24.9px
    }
}

.s56 {
    font-size: calc(56*1rem/100)
}

@media(max-width: 864px) {
    .s56 {
        font-size: 25.2px
    }
}

.s57 {
    font-size: calc(57*1rem/100)
}

@media(max-width: 859px) {
    .s57 {
        font-size: 25.5px
    }
}

.s58 {
    font-size: calc(58*1rem/100)
}

@media(max-width: 854px) {
    .s58 {
        font-size: 25.8px
    }
}

.s59 {
    font-size: calc(59*1rem/100)
}

@media(max-width: 849px) {
    .s59 {
        font-size: 26.1px
    }
}

.s60 {
    font-size: calc(60*1rem/100)
}

@media(max-width: 845px) {
    .s60 {
        font-size: 26.4px
    }
}

.s61 {
    font-size: calc(61*1rem/100)
}

@media(max-width: 840px) {
    .s61 {
        font-size: 26.7px
    }
}

.s62 {
    font-size: calc(62*1rem/100)
}

@media(max-width: 836px) {
    .s62 {
        font-size: 27px
    }
}

.s63 {
    font-size: calc(63*1rem/100)
}

@media(max-width: 832px) {
    .s63 {
        font-size: 27.3px
    }
}

.s64 {
    font-size: calc(64*1rem/100)
}

@media(max-width: 828px) {
    .s64 {
        font-size: 27.6px
    }
}

.s65 {
    font-size: calc(65*1rem/100)
}

@media(max-width: 824px) {
    .s65 {
        font-size: 27.9px
    }
}

.s66 {
    font-size: calc(66*1rem/100)
}

@media(max-width: 820px) {
    .s66 {
        font-size: 28.2px
    }
}

.s67 {
    font-size: calc(67*1rem/100)
}

@media(max-width: 817px) {
    .s67 {
        font-size: 28.5px
    }
}

.s68 {
    font-size: calc(68*1rem/100)
}

@media(max-width: 813px) {
    .s68 {
        font-size: 28.8px
    }
}

.s69 {
    font-size: calc(69*1rem/100)
}

@media(max-width: 810px) {
    .s69 {
        font-size: 29.1px
    }
}

.s70 {
    font-size: calc(70*1rem/100)
}

@media(max-width: 806px) {
    .s70 {
        font-size: 29.4px
    }
}

.s71 {
    font-size: calc(71*1rem/100)
}

@media(max-width: 803px) {
    .s71 {
        font-size: 29.7px
    }
}

.s72 {
    font-size: calc(72*1rem/100)
}

@media(max-width: 800px) {
    .s72 {
        font-size: 30px
    }
}

.s73 {
    font-size: calc(73*1rem/100)
}

@media(max-width: 797px) {
    .s73 {
        font-size: 30.3px
    }
}

.s74 {
    font-size: calc(74*1rem/100)
}

@media(max-width: 794px) {
    .s74 {
        font-size: 30.6px
    }
}

.s75 {
    font-size: calc(75*1rem/100)
}

@media(max-width: 791px) {
    .s75 {
        font-size: 30.9px
    }
}

.s76 {
    font-size: calc(76*1rem/100)
}

@media(max-width: 788px) {
    .s76 {
        font-size: 31.2px
    }
}

.s77 {
    font-size: calc(77*1rem/100)
}

@media(max-width: 785px) {
    .s77 {
        font-size: 31.5px
    }
}

.s78 {
    font-size: calc(78*1rem/100)
}

@media(max-width: 783px) {
    .s78 {
        font-size: 31.8px
    }
}

.s79 {
    font-size: calc(79*1rem/100)
}

@media(max-width: 780px) {
    .s79 {
        font-size: 32.1px
    }
}

.s80 {
    font-size: calc(80*1rem/100)
}

@media(max-width: 778px) {
    .s80 {
        font-size: 32.4px
    }
}

@media(max-width: 750px) {
    html {
        font-size: 13.3333333333vw
    }
}

@media(max-width: 750px) {
    .s12 {
        font-size: 0.22rem
    }

    .s13 {
        font-size: 0.23rem
    }

    .s14 {
        font-size: 0.24rem
    }

    .s15 {
        font-size: 0.25rem
    }

    .s16 {
        font-size: 0.26rem
    }

    .s17 {
        font-size: 0.27rem
    }

    .s18 {
        font-size: 0.28rem
    }

    .s19 {
        font-size: 0.29rem
    }

    .s20 {
        font-size: 0.3rem
    }

    .s21 {
        font-size: 0.31rem
    }

    .s22 {
        font-size: 0.32rem
    }

    .s23 {
        font-size: 0.33rem
    }

    .s24 {
        font-size: 0.34rem
    }

    .s25 {
        font-size: 0.35rem
    }

    .s26 {
        font-size: 0.36rem
    }

    .s27 {
        font-size: 0.37rem
    }

    .s28 {
        font-size: 0.38rem
    }

    .s29 {
        font-size: 0.39rem
    }

    .s30 {
        font-size: 0.4rem
    }

    .s31 {
        font-size: 0.41rem
    }

    .s32 {
        font-size: 0.42rem
    }

    .s33 {
        font-size: 0.43rem
    }

    .s34 {
        font-size: 0.44rem
    }

    .s35 {
        font-size: 0.45rem
    }

    .s36 {
        font-size: 0.46rem
    }

    .s37 {
        font-size: 0.47rem
    }

    .s38 {
        font-size: 0.48rem
    }

    .s39 {
        font-size: 0.48rem
    }

    .s40 {
        font-size: 0.48rem
    }

    .s41 {
        font-size: 0.48rem
    }

    .s42 {
        font-size: 0.48rem
    }

    .s43 {
        font-size: 0.48rem
    }

    .s44 {
        font-size: 0.48rem
    }

    .s45 {
        font-size: 0.48rem
    }

    .s46 {
        font-size: 0.48rem
    }

    .s47 {
        font-size: 0.48rem
    }

    .s48 {
        font-size: 0.48rem
    }

    .s49 {
        font-size: 0.48rem
    }

    .s50 {
        font-size: 0.48rem
    }

    .s51 {
        font-size: 0.48rem
    }

    .s52 {
        font-size: 0.48rem
    }

    .s53 {
        font-size: 0.48rem
    }

    .s54 {
        font-size: 0.48rem
    }

    .s55 {
        font-size: 0.48rem
    }

    .s56 {
        font-size: 0.48rem
    }

    .s57 {
        font-size: 0.48rem
    }

    .s58 {
        font-size: 0.48rem
    }

    .s59 {
        font-size: 0.48rem
    }

    .s60 {
        font-size: 0.48rem
    }

    .s61 {
        font-size: 0.48rem
    }

    .s62 {
        font-size: 0.48rem
    }

    .s63 {
        font-size: 0.48rem
    }

    .s64 {
        font-size: 0.48rem
    }

    .s65 {
        font-size: 0.48rem
    }

    .s66 {
        font-size: 0.48rem
    }

    .s67 {
        font-size: 0.48rem
    }

    .s68 {
        font-size: 0.48rem
    }

    .s69 {
        font-size: 0.48rem
    }

    .s70 {
        font-size: 0.48rem
    }

    .s71 {
        font-size: 0.48rem
    }

    .s72 {
        font-size: 0.48rem
    }

    .s73 {
        font-size: 0.48rem
    }

    .s74 {
        font-size: 0.48rem
    }

    .s75 {
        font-size: 0.48rem
    }

    .s76 {
        font-size: 0.48rem
    }

    .s77 {
        font-size: 0.48rem
    }

    .s78 {
        font-size: 0.48rem
    }

    .s79 {
        font-size: 0.48rem
    }

    .s80 {
        font-size: 0.48rem
    }
}

/*! 公用样式 start */
input,
button {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    margin: 0;
    padding: 0
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    max-width: 100%;
    max-height: 100%;
    transition: .3s
}

.icon-box.tr-x {
    transform: rotateY(180deg)
}

.icon-box.tr-y {
    transform: rotateX(180deg)
}

.icon-box.white {
    filter: grayscale(1) brightness(15)
}

.cn-wh,
.cn-w,
.cv-wh,
.cv-w {
    width: 100%
}

.cn-wh,
.cn-h,
.cv-wh,
.cv-h {
    height: 100%
}

.cn-wh,
.cn-w,
.cn-h {
    object-fit: contain
}

.cv-wh,
.cv-w,
.cv-h {
    object-fit: cover
}

.pic-box {
    max-width: 100%;
    max-height: 100%
}

.pic-box img {
    max-width: 100%;
    max-height: 100%
}

[data-eps] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 0;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    -webkit-box-orient: vertical;
    max-width: 100%
}

[data-eps="1"] {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

[data-eps="2"] {
    -webkit-line-clamp: 2
}

[data-eps="3"] {
    -webkit-line-clamp: 3
}

[data-eps="4"] {
    -webkit-line-clamp: 4
}

[data-eps="5"] {
    -webkit-line-clamp: 5
}

[data-eps="6"] {
    -webkit-line-clamp: 6
}

[data-eps="7"] {
    -webkit-line-clamp: 7
}

[data-eps="8"] {
    -webkit-line-clamp: 8
}

[data-eps="9"] {
    -webkit-line-clamp: 9
}

[data-eps="10"] {
    -webkit-line-clamp: 10
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: .48rem;
    min-width: 1.6rem;
    color: #fff;
    border-radius: .3rem;
    background-color: #117cc0;
    padding: .15rem .45rem;
    white-space: nowrap
}

.icon-btn .icon-box {
    margin-left: .2rem
}

.icon-btn.fill {
    color: #fff;
    border: none;
    background-color: #117cc0
}

.icon-btn.fill .icon-box {
    filter: grayscale(1) brightness(15)
}

.wrap {
    padding-left: .6rem;
    padding-right: .6rem;
    max-width: 100%;
    overflow: hidden
}

.area {
    margin: 0 auto;
    width: 100%;
    max-width: 15rem
}
.pre-icon{margin-right: .1rem;}
.after-icon{margin-left: .1rem;}
.icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;height: 1em;
    flex-shrink: 0;
}

.expand-mask {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, .5333333333);
    transition: .5s;
    opacity: 0;
    z-index: 51
}

.expand-mask.mask-show {
    width: 100%;
    opacity: 1
}

.hover-line {
    position: relative
}

.hover-line::after {
    content: "";
    position: absolute;
    bottom: -0.02rem;
    left: 0;
    width: 0;
    height: .02rem;
    background-color: #117cc0;
    transition: .3s
}

.hover-line:hover::after {
    width: 100%
}

.hover-shadow {
    cursor: pointer;
    transition: .3s
}

.hover-shadow:hover {
    box-shadow: .02rem .02rem .05rem rgba(0, 0, 0, 0.5333333333), -0.02rem -0.02rem .05rem rgba(0, 0, 0, .2) inset, .02rem .02rem .05rem hsla(0, 0%, 100%, 0.5333333333) inset
}

.hover-pic .pic-box {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden
}

.hover-pic .pic-box img {
    transition: .5s
}

.hover-pic:hover .pic-box img {
    transform: scale(1.05)
}

body {
    position: relative
}

.bold {
    font-weight: bold
}

/*! 公用样式 end */

/*! 混入文件 */
:root {
    --theme: 92, 141, 239;
    --active: 92, 141, 239;
    --bottom-bg: 13, 15, 27;
    --thumb-bg: 198, 198, 198
}

/*! #page-head start */
.page-head-wrap .hover-drop {
    position: relative
}

.page-head-wrap .hover-drop:hover .drop-list {
    transform: translateX(-50%) scaleY(1)
}

.page-head-wrap .drop-list {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100%;
    background-color: #fff;
    transform-origin: center top;
    transform: translateX(-50%) scaleY(0);
    box-shadow: .02rem .02rem .05rem 0 rgba(0, 0, 0, .1333333333);
    z-index: 10;
    transition: .3s
}

.page-head-wrap .drop-list .drop-item {
    position: relative
}

.page-head-wrap .drop-list .drop-item:hover .drop-entry {
    color: #fff;
    background-color: #117cc0
}

.page-head-wrap .drop-entry {
    display: flex;
    align-items: center;
    min-height: .4rem;
    padding: .05rem .15rem;
    line-height: 1.1;
    color: #222;
    white-space: nowrap;
    transition: .3s
}

.page-head-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 .4rem;
    border-bottom: .01rem solid hsla(0, 0%, 100%, .2);
    z-index: 999
}

.page-head-wrap .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1rem
}

.page-head-wrap .logo-box {
    display: flex;
    align-items: center;
    height: 100%
}

.page-head-wrap .logo {
    display: flex;
    height: .75rem
}

.page-head-wrap .lang {
    display: flex;
    align-items: center;
    color: #fff;
    margin-left: .2rem;
}
.page-head-wrap .lang-box{
    display: flex;
    align-items: center;
    color: #fff;
}

.page-head-wrap .lang-label {
    margin-left: .1rem
}

.page-head-wrap .drop-list {
    border-radius: .05rem;
    padding: .03rem
}

.page-head-wrap .drop-item,
.page-head-wrap .drop-entry {
    border-radius: inherit
}

/*! #page-head end */
/*! #bg start */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

/*! #bg end */
/*! #page-foot start */
.page-foot-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: auto
}

.page-foot-wrap .page-foot {
    display: flex;
    align-items: center;
    min-height: .6rem
}

.page-foot-wrap .copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: hsla(0, 0%, 100%, .7);
    line-height: 1.7142857143
}

.page-foot-wrap .power-by {
    margin-left: 4em
}

@media(max-width: 750px) {
    .page-foot-wrap {
        min-height: 1.2rem;
        padding: .15rem .6rem
    }

    .page-foot-wrap .copyright {
        flex-direction: column
    }

    .page-foot-wrap .power-by {
        margin-left: 0
    }
}

/*! #page-foot end */
/*! #card start */
@keyframes ani-slide {
    to {
        transform: none;
        opacity: 1
    }
}

[ani-slide-left] {
    transform: translateX(-50%);
    opacity: 0;
    animation: ani-slide .8s forwards
}

[ani-slide-right] {
    transform: translateX(50%);
    opacity: 0;
    animation: ani-slide .8s forwards
}

.card-wrap {
    padding-top: 1rem;
    padding-bottom: .6rem;
    min-height: 100vh;
    display: flex
}

.card-wrap .card-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: .6rem
}

.card-wrap .card-item {
    border-radius: .15rem;
    cursor: pointer;
    transition: .3s
}

.card-wrap .card-item {
    width: calc((100% - .2rem)/2)
}

.card-wrap .card-item:nth-child(n+2) {
    margin-left: .2rem
}

.card-wrap .card-item:nth-child(2n+1) {
    margin-left: 0
}

.card-wrap .card-item:nth-child(n+3) {
    margin-top: .2rem
}

.card-wrap .card-item:hover {
    transform: translateY(-0.05rem)
}

.card-wrap .card-item:hover .card-name {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3333333333)
}

.card-wrap .card-item.ready:hover {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2)
}

.card-wrap .card .card-item {
    width: auto
}

.card-wrap .card-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 5.2rem;
    height: 2.94rem;
    padding: .4rem .6rem .4rem .4rem;
    font-family: OPPOSans-B;
    border: 2px solid #fff;
    border-radius: .15rem;
    background: linear-gradient(to bottom, #ddeaf5, #fff)
}

.card-wrap .card-icon {
    width: 1.43rem;
    height: 1.55rem
}

.card-wrap .card-name {
    line-height: 1.3333333333;
    font-weight: bold;
    transition: .3s
}

.card-wrap .card-tips {
    color: #0052d9;
    line-height: 1.7142857143;
    margin-top: .18rem
}

@media(max-width: 750px) {
    .card-wrap {
        padding-bottom: 1.2rem
    }

    .card-wrap .card-list {
        flex-direction: column
    }

    .card-wrap .card-item {
        width: calc((100% - 0rem)/1)
    }

    .card-wrap .card-item:nth-child(n+2) {
        margin-left: .5rem
    }

    .card-wrap .card-item:nth-child(1n+1) {
        margin-left: 0
    }

    .card-wrap .card-item:nth-child(n+2) {
        margin-top: .5rem
    }
}

/*! #card end */
/*! #dialog start */
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5333333333);
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    z-index: 60
}

.dialog.dialog-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.dialog.dialog-show .dialog-inner {
    animation: dialog-show .5s forwards
}

@keyframes dialog-show {
    0% {
        transform: scale(0) translateY(100%)
    }

    30% {
        transform: scale(0.001, 0.001) translateY(0)
    }

    60% {
        transform: scale(0.001, 1) translateY(0)
    }

    100% {
        transform: scale(1, 1) translateY(0)
    }
}

.dialog-inner {
    position: relative;
    transition: .5s
}

.dialog-main {
    padding: .3rem;
    border-radius: .08rem;
    background-color: #fff
}

.dialog-cancel {
    position: absolute;
    top: .1rem;
    right: .1rem;
    width: 1em;
    height: 1em;
    color: #666;
    background-size: 100%;
    transition: .3s;
    cursor: pointer
}

.dialog-cancel::after {
    content: "✕";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    transition: .3s
}

.dialog-cancel:hover {
    transform: scale(1.1);
    color: #333;
    text-shadow: .02rem .02rem .05rem rgba(0, 0, 0, .1333333333)
}

.dialog .dialog-main {
    max-width: 95vw;
    max-height: 90vh;
    width: 12rem;
    height: 6.8rem;
    border-radius: .1rem;
    padding: .5rem .2rem .5rem .6rem
}

.dialog .dialog-pic {
    width: 100%;
    margin-top: .2rem;
    margin-bottom: .7rem;
    text-align: center;
    line-height: 1;
    border: 1px solid #000
}

.dialog .dialog-pic img {
    display: inline-block;
    height: auto;
    width: 749px;
    margin: 0 auto
}

.dialog .scroll-box::-webkit-scrollbar {
    background-color: #eee;
    border-radius: .025rem
}

.dialog .scroll-box::-webkit-scrollbar-thumb {
    background-color: #bbc0ca;
    border-radius: .025rem
}

.dialog .scroll-box {
    overflow-y: auto
}

.dialog .scroll-box::-webkit-scrollbar {
    width: .05rem
}

.dialog .scroll-box {
    height: 100%;
    padding-right: .35rem
}

.dialog .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2em;
    min-width: 1.8rem;
    padding: .1rem .3rem;
    border-radius: 1em;
    color: #fff;
    background-color: #117cc0;
    white-space: nowrap;
    transition: .3s
}

.dialog .btn .icon-box {
    margin-left: .12rem
}

.dialog .btn:hover {
    transform: translateY(-0.05rem);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2666666667)
}

.dialog .download-box {
    display: flex;
    justify-content: center;
    margin-top: .6rem
}

.dialog .result {
    position: relative;
    max-width: 794px;
    margin: 0 auto;
    transform-origin: left top
}

.dialog .watermark {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-size: 15%;
    pointer-events: none;
    opacity: .2
}

.dialog .res-logo {
    display: flex;
    align-items: center;
    min-height: .85rem;
    display: none
}

.dialog .res-logo.show {
    display: flex
}

.dialog .logo {
    width: 1.89rem
}

.dialog .logo {
    position: relative
}

.dialog .logo::before {
    content: "";
    display: block;
    padding-top: 44.9735449735%
}

.dialog .logo .fill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1
}

.dialog .logo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    line-height: 1.2
}

.dialog .logo-subtitle {
    margin-top: .1rem
}

.mod-head .mod-title {
    font-family: MiSans-Demibold;
    font-weight: bold;
    line-height: 1.6;
    margin-top: -0.09rem;
    margin-bottom: .21rem
}

.mod-head.has-line::after {
    content: "";
    display: block;
    width: .3rem;
    height: .04rem;
    background-color: #117cc0
}

.dialog-form {
    display: flex;
    flex-wrap: wrap;
    margin-top: .33rem;
    padding-bottom: .8rem;
    font-family: AlibabaPuHuiTi_3_55_Regular
}

.dialog-form .form-item {
    display: flex;
    flex-direction: column
}

.dialog-form .form-item {
    width: calc((100% - .4rem)/3)
}

.dialog-form .form-item:nth-child(n+2) {
    margin-left: .2rem
}

.dialog-form .form-item:nth-child(3n+1) {
    margin-left: 0
}

.dialog-form .form-item:nth-child(n+4) {
    margin-top: .23rem
}

.dialog-form .form-label {
    line-height: 3
}

.dialog-form .form-entry {
    position: relative;
    min-width: 3.46rem;
    height: 2em;
    border-radius: .05rem;
    background-color: #f6f8fd
}

.dialog-form .form-entry.active .drop-list {
    transform: translateX(-50%) scaleY(1)
}

.dialog-form .form-board {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .2rem;
    width: 100%;
    height: 100%
}

.dialog-form .form-el {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%
}

.dialog-form .form-ipt {
    width: 100%;
    height: 100%
}

.dialog-form .form-opt {
    flex-shrink: 0;
    padding-left: .2rem;
    user-select: none
}

.dialog-form .form-opt .icon-box {
    width: .5em;
    height: .5em
}

.dialog-form .form-unit {
    color: #999;
    line-height: 1.7142857143
}

.dialog-form .drop-list {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100%;
    max-height: 3rem;
    background-color: #fff;
    transform-origin: center top;
    transform: translateX(-50%) scaleY(0);
    box-shadow: .02rem .02rem .05rem 0 rgba(0, 0, 0, .1333333333)
}

.dialog-form .drop-list::-webkit-scrollbar {
    background-color: #eee;
    border-radius: .025rem
}

.dialog-form .drop-list::-webkit-scrollbar-thumb {
    background-color: #117cc0;
    border-radius: .025rem
}

.dialog-form .drop-list {
    overflow-y: auto
}

.dialog-form .drop-list::-webkit-scrollbar {
    width: .05rem
}

.dialog-form .drop-list {
    z-index: 10;
    transition: .3s
}

.dialog-form .drop-list .drop-item {
    position: relative
}

.dialog-form .drop-list .drop-item:hover .drop-entry {
    color: #fff;
    background-color: #117cc0
}

.dialog-form .drop-entry {
    display: flex;
    align-items: center;
    min-height: .5rem;
    padding: .1rem .2rem;
    line-height: 1.5;
    color: #222;
    white-space: nowrap;
    transition: .3s
}

.dialog-form .btn-box {
    margin-top: auto
}

.dialog-form .btn-box.center {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: .6rem
}

.dialog-table {
    width: 100%;
    margin-top: .5rem
}

.dialog-table table,
.dialog-table tr,
.dialog-table td {
    border-color: #000
}

.dialog-table thead td {
    text-align: center;
    font-weight: bold
}

.dialog-table table {
    width: 99%;
    border-width: 2px
}

.dialog-table tbody tr:nth-child(odd) {
    background-color: #d9d9d9
}

.dialog-table td {
    height: .3rem;
    text-align: center;
    padding: .05rem .1rem
}

.dialog-table .tb-pic {
    max-width: 1.6rem
}

@media(max-width: 750px) {
    .dialog .dialog-main {
        height: 70vh
    }

    .dialog-form .form-item {
        width: calc((100% - 0rem)/1)
    }

    .dialog-form .form-item:nth-child(n+2) {
        margin-left: .2rem
    }

    .dialog-form .form-item:nth-child(1n+1) {
        margin-left: 0
    }

    .dialog-form .form-item:nth-child(n+2) {
        margin-top: .23rem
    }

    .dialog-form .btn-box {
        display: flex;
        justify-content: center;
        margin-top: .5rem
    }
}

/*! #dialog end */
.z-toast-box {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 10%;
    z-index: 100;
    pointer-events: none
}

.z-toast-box .z-toast {
    display: flex;
    align-items: center;
    transform: translateY(100%);
    color: #fff;
    background: rgba(0, 0, 0, .5333333333);
    padding: .1rem .2rem;
    border-radius: .08rem;
    width: auto;
    height: auto;
    transition: .5s;
    opacity: 0;
    pointer-events: auto
}

.z-toast-box .z-toast.success {
    color: #67c23a;
    background-color: #f0f9eb
}

.z-toast-box .z-toast.success::before {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3Nzk3NDQ2MTkyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MTQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNDY5LjMzMzMzMyA2NDBsMC4zODQgMC4zODRMNDY5LjMzMzMzMyA2NDB6IG0tMTA2LjI4MjY2NiAwbC0wLjM4NCAwLjM4NCAwLjM4NC0wLjM4NHogbTQ4LjUxMiAxMDYuNjY2NjY3YTg3LjQ2NjY2NyA4Ny40NjY2NjcgMCAwIDEtNjEuNjUzMzM0LTI0Ljg3NDY2N2wtMTc5LjUyLTE3My42MzJhNjcuNzk3MzMzIDY3Ljc5NzMzMyAwIDAgMSAwLTk4LjI0YzI4LjAzMi0yNy4xNTczMzMgNzMuNDkzMzMzLTI3LjE1NzMzMyAxMDEuNTg5MzM0IDBsMTM5LjU4NCAxMzQuOTk3MzMzIDMxOS4xNjgtMzA4LjU0NGMyOC4wMzItMjcuMTU3MzMzIDczLjQ5MzMzMy0yNy4xNTczMzMgMTAxLjU4OTMzMyAwYTY3LjkyNTMzMyA2Ny45MjUzMzMgMCAwIDEgMCA5OC4yNEw0NzIuOTgxMzMzIDcyMi4wNjkzMzNBODcuNTMwNjY3IDg3LjUzMDY2NyAwIDAgMSA0MTEuNTYyNjY3IDc0Ni42NjY2Njd6IiBmaWxsPSIjNjdjMjNhIiBwLWlkPSIyNjE1Ij48L3BhdGg+PC9zdmc+")
}

.z-toast-box .z-toast.error {
    color: #f56c6c;
    background-color: #fef0f0
}

.z-toast-box .z-toast.error::before {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3Nzk3NTc3NDk3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2NjUiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODc4LjA4IDczMS4yNzQ2NjdhMzIgMzIgMCAwIDEtNTQuODgtMzIuOTM4NjY3QTM2MC43ODkzMzMgMzYwLjc4OTMzMyAwIDAgMCA4NzQuNjY2NjY3IDUxMmMwLTIwMC4yOTg2NjctMTYyLjM2OC0zNjIuNjY2NjY3LTM2Mi42NjY2NjctMzYyLjY2NjY2N1MxNDkuMzMzMzMzIDMxMS43MDEzMzMgMTQ5LjMzMzMzMyA1MTJzMTYyLjM2OCAzNjIuNjY2NjY3IDM2Mi42NjY2NjcgMzYyLjY2NjY2N2EzNjAuNzg5MzMzIDM2MC43ODkzMzMgMCAwIDAgMTg2LjMxNDY2Ny01MS40NDUzMzQgMzIgMzIgMCAwIDEgMzIuOTI4IDU0Ljg4QTQyNC43Nzg2NjcgNDI0Ljc3ODY2NyAwIDAgMSA1MTIgOTM4LjY2NjY2N0MyNzYuMzYyNjY3IDkzOC42NjY2NjcgODUuMzMzMzMzIDc0Ny42MzczMzMgODUuMzMzMzMzIDUxMlMyNzYuMzYyNjY3IDg1LjMzMzMzMyA1MTIgODUuMzMzMzMzczQyNi42NjY2NjcgMTkxLjAyOTMzMyA0MjYuNjY2NjY3IDQyNi42NjY2NjdjMCA3OC4yOTMzMzMtMjEuMTUyIDE1My41NjgtNjAuNTg2NjY3IDIxOS4yNzQ2Njd6TTU1NS4yMzIgNTEybDg2LjQ3NDY2NyA4Ni40NzQ2NjdhMzAuNTcwNjY3IDMwLjU3MDY2NyAwIDEgMS00My4yMzIgNDMuMjMyTDUxMiA1NTUuMjMybC04Ni40NzQ2NjcgODYuNDc0NjY3YTMwLjU3MDY2NyAzMC41NzA2NjcgMCAxIDEtNDMuMjMyLTQzLjIzMkw0NjguNzY4IDUxMmwtODYuNDc0NjY3LTg2LjQ3NDY2N2EzMC41NzA2NjcgMzAuNTcwNjY3IDAgMSAxIDQzLjIzMi00My4yMzJMNTEyIDQ2OC43NjhsODYuNDc0NjY3LTg2LjQ3NDY2N2EzMC41NzA2NjcgMzAuNTcwNjY3IDAgMSAxIDQzLjIzMiA0My4yMzJMNTU1LjIzMiA1MTJ6IiBmaWxsPSIjZjU2YzZjIiBwLWlkPSIzNjY2Ij48L3BhdGg+PC9zdmc+")
}

.z-toast-box .z-toast.warn {
    color: #e6a23c;
    background-color: #fdf6ec
}

.z-toast-box .z-toast.warn::before {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3Nzk3NjEyMzA5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTQ5LjI4IDU3OS41ODRjLTIuNTI4IDI3LjU4NC0yMC4wNjQgNDAuNDgtMzcuMzc2IDQwLjQ4LTEyLjg2NCAwIDAgMCAwIDAtMTYuNDQ4LTMuMTA0LTI5LjIxNi0xMC4xMTItMzQuODE2LTM4LjAxNmwtMjIuNjI0LTI2MC44YzAtMjYuMjA4IDMxLjg3Mi00OS40MDggNTguOTEyLTQ5LjQwOHM1Ni4xNiAyNC4yNTYgNTYuMTYgNTAuNDMyTDU0OS4yOCA1NzkuNTg0ek01MTIgNjU0LjE3NmMtMjcuMDQgMC00OC45OTIgMjEuOTItNDguOTkyIDQ4Ljk5MnMyMS45MiA0OS4wMjQgNDguOTkyIDQ5LjAyNCA0OC45OTItMjEuOTUyIDQ4Ljk5Mi00OS4wMjRjMC0yNy4wNC0yMS45Mi00OC45OTItNDguOTkyLTQ4Ljk5MnpNODk5LjgwOCA1MTJjMCAyMTQuMTc2LTE3My42IDM4Ny43NzYtMzg3Ljg0IDM4Ny43NzYtMjE0LjE0NCAwLTM4Ny43NzYtMTczLjYtMzg3Ljc3Ni0zODcuNzc2czE3My42MzItMzg3LjgwOCAzODcuNzc2LTM4Ny44MDhjMjE0LjIwOCAwIDM4Ny44NCAxNzMuNjMyIDM4Ny44NCAzODcuODA4ek04MjggNTEyYzAtMTc0LjUyOC0xNDEuNDcyLTMxNS45NjgtMzE2LTMxNS45NjhTMTk2LjAzMiAzMzcuNDcyIDE5Ni4wMzIgNTEyYzAgMTc0LjQ5NiAxNDEuNDQgMzE1Ljk2OCAzMTUuOTY4IDMxNS45NjhTODI4IDY4Ni40OTYgODI4IDUxMnoiIGZpbGw9IiNlNmEyM2MiIHAtaWQ9IjQ3MDEiPjwvcGF0aD48L3N2Zz4=")
}

.z-toast-box .z-toast.info {
    color: #909399;
    background-color: #f4f4f5
}

.z-toast-box .z-toast.info::before {
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3Nzk3NjkyMzU4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzNjc5IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTM0My43OTcyMzIgNDU1Ljk5NzkwNWM0MC44OTMyNzctNDUuMDM5OTEzIDc4LjIxNzA5MS03Ny4wODUyNiAxMTEuOTYxMjA4LTk2LjEyNjgzMiAzMy43NDQxMTctMTkuMDM5NTI1IDYyLjQ2OTctMjguNTYwODIzIDg2LjE5NDE0Ni0yOC41NjA4MjMgMTcuMDUxMTQ2IDAuODU4NTk1IDQyLjAwNzcxMS0xLjc1MTk4NCA0MC40OTAwNzUgMzEuOTM5OTQyIDAgMTEuODgxMTU1LTEzLjI3MjkxOCA2Mi4yNDc2MzItMzkuODE2NzA3IDE1MS4wOTg0MDgtNDMuMjg1ODgyIDE0NS4zNzA2ODgtNjQuOTI3Nzk5IDIzMy4wMDQ2OTUtNjQuOTI3Nzk5IDI2Mi44ODk3MzkgMCA1LjczNzk1MyAxLjQzMDY1MSAxMC41NDU2NzYgNC4yOTkxMTYgMTQuNDMyMzggMi44NTkyNTUgMy44OTc5NiA1LjkzMTM2NyA1LjgzNjE5NSA5LjIxNDI5MSA1LjgzNjE5NSAxMy4xMDA5OTQgMCAxMjQuNjg4Njc4LTUyLjgyMTUwNiAxMjQuNjg4Njc4LTUyLjgyMTUwNi01Ni4xMDY0NzcgNTIuODIxNTA2LTk3LjA0NjgyOCA4Ni42MDQ1MTEtMTIyLjg0NzY2MiAxMDEuMzQ2OTY3LTI1Ljc5Nzc2MyAxNC43NDE0MzMtNDYuODkyMTg2IDIyLjExMTYzOC02My4yNjQ4NDcgMjIuMTExNjM4LTE0LjMzNzIwOCAwLTI1LjcwMTU2OC00LjUxMDk1LTM0LjA4Nzk2NS0xMy41MTIzODMtOC4zOTg2NzctOS4wMDM0OC0xMi41OTIzODctMjEuNDk3NjI0LTEyLjU5MjM4Ny0zNy40NjkxMyAwLTUxLjE4MjA5MSAzMC43MTE5MTUtMTc2LjI4MjE1OCA5Mi4xMzM3LTM3NS4yOTA5OTEgMi44NTkyNTUtOS40MTQ4NjkgMTMuOTU2NTE5LTQxLjA3NzQ4MS02Ljc1NzIxNS0zNy40NjgxMDdDNDYwLjI4NzgxMSA0MDQuNDAzNDAyIDM0My43OTcyMzIgNDU1Ljk5NzkwNSAzNDMuNzk3MjMyIDQ1NS45OTc5MDV6TTU3OC42MDYxMDIgMTExLjc1MDM5N2MxNi40MTI1NzIgMCAyOS45MjA4NjIgNS40MzcwODcgNDAuNTI1ODkzIDE2LjI4OTc2OSAxMC41OTA3MDQgMTAuODYyOTE2IDE1Ljg4OTYzOCAyNC43NjgyNjggMTUuODg5NjM4IDQxLjcxNjA1NSAwIDIzLjMxNjEyNy04LjA4MDQxMyA0My44Mzg0OTQtMjQuMjMzMDUzIDYxLjU4MDQwNC0xNi4xNjY5NjcgMTcuNzU0MTkxLTM0LjMwNjk2MyAyNi42MTg0OTQtNTQuNDMxMjQ0IDI2LjYxODQ5NC0xNS44OTI3MDggMC0yOS4xMzc5OTUtNS41NjE5MzYtMzkuNzI4Njk5LTE2LjY4NjgzMS0xMC42MDUwMzEtMTEuMTIzODcyLTE1Ljg5MjcwOC0yNS42ODgyNjQtMTUuODkyNzA4LTQzLjcwMjM4NyAwLTIzLjgzODAzOCA3LjY3MjA5NS00NC4xMDA0NzMgMjMuMDQxODY4LTYwLjc4NzMwNEM1MzkuMTM3MzM1IDEyMC4wOTM4MTMgNTU3LjQxNDQ2MSAxMTEuNzUwMzk3IDU3OC42MDYxMDIgMTExLjc1MDM5N3oiIHAtaWQ9IjEzNjgwIiBmaWxsPSIjOTA5Mzk5Ij48L3BhdGg+PC9zdmc+")
}

.z-toast-box .z-toast:nth-child(n+2) {
    margin-top: .1rem
}

.z-toast-box .z-toast::before {
    content: "";
    display: inline-block;
    margin-right: .05rem;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

/*! #product start */
.product {
    padding-top: 2rem;
    padding-bottom: 1.45rem
}

.product .product-inner {
    max-width: 14rem
}

.product .product-head {
    display: flex;
    justify-content: center
}

.product .product-title {
    position: relative;
    font-weight: bold;
    text-align: center;
    color: #fff
}

.product .product-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: .3rem;
    background: linear-gradient(to top, #67ffff, rgba(103, 255, 255, 0.1));
    transform: translateX(-50%);
    z-index: 1
}

.product .title {
    position: relative;
    text-shadow: 0 4px 0 rgba(17, 124, 192, .6);
    z-index: 5
}

.product .product-main {
    margin-top: .5rem
}

.product .product-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.3rem
}

.product .product-item {
    position: relative;
    width: 6.85rem;
    max-width: 100%;
    border: .1rem solid #117cc0;
    background-color: #117cc0;
    border-radius: .1rem;
    overflow: hidden;
    margin-left: .3rem;
    transition: .3s
}

.product .product-item:nth-child(n+3) {
    width: 4.46rem;
    margin-top: .3rem
}

.product .product-item:nth-child(n+3) .product-pic {
    position: relative;
    flex-shrink: 0
}

.product .product-item:nth-child(n+3) .product-pic::before {
    content: "";
    display: block;
    padding-top: 94.1704035874%
}

.product .product-item:nth-child(n+3) .product-pic .fill {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: .5s
}

.product .product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.product .product-pic {
    position: relative;
    flex-shrink: 0
}

.product .product-pic::before {
    content: "";
    display: block;
    padding-top: 61.3138686131%
}

.product .product-pic .fill {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: .5s
}

.product .corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10.5263157895%
}

.product .btn-box {
    position: absolute;
    bottom: .4rem;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    pointer-events: none;
    z-index: 5
}

.product .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    min-height: 2.7777777778em;
    padding: .1rem .3rem;
    color: #fff;
    background-color: #117cc0;
    box-shadow: inset 0rem -0.04rem .06rem 0rem #00558b, inset 0rem -0.04rem .06rem 0rem #00558b;
    border-radius: 2em;
    pointer-events: auto;
    cursor: pointer;
    transition: .3s
}

.product .btn:hover {
    transform: translateY(-5px);
    box-shadow: inset 0rem -0.04rem .06rem 0rem #00558b, inset 0rem -0.04rem .06rem 0rem #00558b
}

@media(max-width: 750px) {
    .product .product-item {
        width: 100% !important
    }

    .product .product-item:nth-child(n) {
        margin-top: .3rem
    }
}

/*! #product end */

/*! #guide start */
.guide .hover-drop {
    position: relative
}

.guide .hover-drop:hover .drop-list {
    transform: translateX(-50%) scaleY(1)
}

.guide .drop-list {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 100%;
    background-color: #fff;
    transform-origin: center top;
    transform: translateX(-50%) scaleY(0);
    box-shadow: .02rem .02rem .05rem 0 rgba(0, 0, 0, .1333333333);
    z-index: 10;
    transition: .3s
}

.guide .drop-list .drop-item {
    position: relative
}

.guide .drop-list .drop-item:hover .drop-entry {
    color: #fff;
    background-color: #117cc0
}

.guide .drop-entry {
    display: flex;
    align-items: center;
    min-height: .4rem;
    padding: .05rem .15rem;
    line-height: 1.1;
    color: #222;
    white-space: nowrap;
    transition: .3s
}

.guide {
    position: relative;
    width: 100%;
    height: 100vh;
    border: .1rem solid #707070;
    background-color: #ececec
}

.guide::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - .18rem);
    height: calc(100% - .18rem);
    border: .04rem solid #707070;
    transform: translate(-50%, -50%)
}

.guide .lang-box {
    position: absolute;
    top: .4rem;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 30
}
.guide .lang {
    display: flex;
    align-items: center;
    margin-left: .2rem;
}

.guide .lang-label {
    margin-left: .1rem
}

.guide .drop-list {
    border-radius: .05rem;
    padding: .03rem
}

.guide .drop-item,
.guide .drop-entry {
    border-radius: inherit
}

.guide .guide-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72.9166666667vw;
    margin: 0 auto;
    height: 100%;
    z-index: 5
}

.guide .logo {
    display: block;
    width: 100%;
    max-height: 95%
}

.guide .logo {
    position: relative;
    flex-shrink: 0
}

.guide .logo::before {
    content: "";
    display: block;
    padding-top: 51.1428571429%
}

.guide .logo .fill {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: .5s
}

.guide .guide-title {
    position: absolute;
    bottom: .4rem;
    right: 0;
    width: 100%;
    line-height: 1.5625;
    margin-top: .61rem;
    text-align: right;
    z-index: 30
}

@media(max-width: 750px) {
    .guide .guide-title {
        text-align: center
    }
}
/*! #guide end */

.dialog-table td {
    height: 0.4rem;
}