/*
Theme Name:asd
Theme URI: asd
Version: 版本
Description: asd
Author: sad
Author URI: 
*/
    a,
    abbr,
    acronym,
    address,
    applet,
    article,
    aside,
    audio,
    b,
    big,
    blockquote,
    body,
    canvas,
    caption,
    center,
    cite,
    code,
    dd,
    del,
    details,
    dfn,
    div,
    dl,
    dt,
    em,
    embed,
    fieldset,
    figcaption,
    figure,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    hgroup,
    html,
    i,
    iframe,
    img,
    ins,
    kbd,
    label,
    legend,
    li,
    mark,
    menu,
    nav,
    object,
    ol,
    output,
    p,
    pre,
    q,
    ruby,
    s,
    samp,
    section,
    small,
    span,
    strike,
    strong,
    sub,
    summary,
    sup,
    table,
    tbody,
    td,
    tfoot,
    th,
    thead,
    time,
    tr,
    tt,
    u,
    ul,
    var,
    video {
        padding: 0;
        margin: 0;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
        border: 0;
        text-decoration: none;
        font-family: "NaniFont-Light", "sans-serif"
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block
    }
    
    body {
        line-height: 1
    }
    
    ol,
    ul {
        list-style: none
    }
    
    blockquote,
    q {
        quotes: none
    }
    
    blockquote:after,
    blockquote:before,
    q:after,
    q:before {
        content: "";
        content: none
    }
    
    table {
        border-spacing: 0;
        border-collapse: collapse
    }
    
    *,
     :after,
     :before {
        box-sizing: border-box
    }
    
    div,
    a,
    span,
    button {
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        font-family: "NaniFont-Light", sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 2;
        color: rgb(0, 0, 0);
        width: 100vw;
        height: 100vh;
    }
    
    header {
        width: 100%;
    }
    
    .header1 {
        justify-content: space-between;
        position: fixed;
        display: flex;
        width: 100%;
        z-index: 3;
        padding: 4vh 5vw 0 5vw;
    }

    
    .header__nav {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 2;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: hsla(0, 0%, 100%, .9);
    }
    
    #header__nav1 {
        animation: classin 0.4s ease forwards;
    }
    
    #header__nav2 {
        animation: classout 0.4s ease forwards;
    }
    
    .header__nav .header__list {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        font-size: 40px;
        line-height: 2.5;
    }
    
    .header__nav .header__list li a span {
        color: black;
    }
    
    .header__nav .header__list li:last-child {
        margin-top: 10px;
    }
    
    .header2 {
        width: 30px;
        height: 82px;
    }
    
    .header1 .header21 {
        width: 54px;
        height: 20px;
    }
    
    .header2 a {
        width: 100%;
        height: 100%;
        position: relative;
        display: block;
    }
    
    .header2 a span {
        position: absolute;
        display: block;
        line-height: 1;
        font-weight: 700;
        color: rgb(255, 255, 255);
        font-size: 30px;
    }
    
    .header2 a span#sp {
        animation: colorr 0.3s ease forwards;
    }
    
    .header2 a span#sp1 {
        animation: colorcloss 0.3s ease forwards;
    }
    
    .header2 a span:first-child {
        top: 0%;
    }
    
    .header2 a span:last-child {
        bottom: 0%;
    }
    
    #father {
        animation: father .25s ease forwards;
    }
    
    #firstchild {
        animation: first .25s ease forwards;
    }
    
    #lastchild {
        animation: last .25s ease forwards;
    }
    
    #father1 {
        animation: father1 .25s ease forwards;
    }
    
    #firstchild1 {
        animation: first1 .25s ease forwards;
    }
    
    #lastchild1 {
        animation: last1 .25s ease forwards;
    }
    
    .header3 {
        cursor: pointer;
        padding: 0;
        border: none;
        outline: none;
        appearance: none;
        width: 40px;
        height: 10px;
        position: relative;
        background-color: transparent
    }
    
    .header3 div {
        width: 100%;
        height: 100%;
    }
    
    #header31 {
        animation: hz .4s ease forwards;
    }
    
    #header32 {
        animation: hzgb .4s ease forwards;
    }
    
    @keyframes hz {
        to {
            width: 10px;
            height: 40px
        }
    }
    
    @keyframes hzgb {
        0% {
            width: 10px;
            height: 40px
        }
        100% {
            width: 40px;
            height: 10px
        }
    }
    
    #header {
        width: 57px;
        height: 30px;
    }
    @media (prefers-color-scheme: light) {
    .header3 div span {
        background:#fff;
        height: 1px;
        width: 100%;
        position: absolute;
        box-sizing: border-box;
    }
}
@media (prefers-color-scheme: dark) {
    .header3 div span {
        background:#1a6840;
        height: 1px;
        width: 100%;
        position: absolute;
        box-sizing: border-box;
    }
}

    
    #top1 {
        animation: topp 0.3s ease forwards;
    }
    
    #top2 {
        animation: topoff 0.3s ease
    }
    
    .header3 div span.top {
        top: 0;
        right: 0;
        transform-origin: right top 0;

    }
    
    .header3 div span.middle {
        top: 5px;
        right: 0;

    }
    
    #middle1 {
        animation: middlee 0.3s ease forwards;
    }
    
    #middle2 {
        animation: middleoff 0.3s ease
    }
    
    .header3 div span.bottom {
        top: 10px;
        right: 0;
        transform-origin: right top 0;
    }
    
    #bottom1 {

        animation: bottomm 0.3s ease forwards;
    }
    
    #bottom2 {
        animation: bottomoff 0.3s ease
    }
    
    main {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        overflow: auto;
    }
    
    .tops .top__hero img {
        height: 100vh;
        object-fit: cover;
        width: 100vw;
        opacity: 0;
        transition: all .3s ease;
    }
    
    .tops .top__hero source {
        object-fit: cover;
        height: 100vh;
        width: 100vw;
    }
    
    .tops .top__hero .lazyloaded {
        opacity: 1;
    }
    
    .top__date {
        position: fixed;
        bottom: 2.5vh;
        left: 7vw;
        font-size: 20px;
        line-height: 1;
        color: #fff;
    }
    
    .bar8 {
        position: fixed;
        bottom: 2.5vh;
        right: 7vw;
        width: 40px;
        height: 40px;
    }
    
    input,
    button {
        border: none;
        outline: none;
    }
    
    .bar8 input {
        padding: 0 30px 0 0px;
        border-bottom: 2px solid transparent;
        background: transparent;
        transition: .3s linear;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding-left: 13px;
        border-radius: 35%;
    }
    
    input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: rgb(0, 0, 0);
    }
    
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: rgb(0, 0, 0);
    }
    
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: rgb(0, 0, 0);
    }
    
    input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: rgb(0, 0, 0);
    }
    
    .bar8 form {
        height: 42px;
    }
    
    .bar8 button:before {
        content: "Go";
        font-family: sans-serif;
        font-size: 16px;
        color: #F9F0DA;
    }
    
    .bar8 button {
        background: #3975bd;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        cursor: pointer;
        position: absolute;
        border-radius: 35%;
        padding: 0;
    }
    
    .md-perspective body {
        background: #222;
        transform: rotateX(5deg);
        transform-origin: bottom;
    }
    
    .div1 {
        width: 300px;
        height: 180px;
        background: rgb(96, 160, 222);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding: 10px;
        border-radius: 10px;
        font-size: 1.15em;
        text-align: center;
        position: absolute;
        transform: translateX(-3000px);
        transition: all 0.7s ease;
    }
    
    #md-show {
        transform: translateX(0px);
        z-index: 101;
    }
    
    .header #md-closs1 {
        z-index: 99;
    }
    
    .div1 h3 {
        box-sizing: border-box;
        width: 100%;
        padding: 0.3em;
        height: 30%;
        margin: 0;
        text-align: center;
        font-size: 1.5em;
        line-height: 33px;
        font-weight: 300;
        opacity: 0.8;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px 3px 0 0;
    }
    
    .div1 p {
        margin: 0;
        padding: 10px 0;
        width: 100%;
        height: 49%;
        letter-spacing: 7px;
        line-height: 55px;
    }
    
    .div1 button {
        border: none;
        padding: 0.6em 1.2em;
        background: #3975bd;
        color: #fff;
        font-family:"NaniFont-Light", 'Lato', Calibri, Arial, sans-serif;
        letter-spacing: 2px;
        cursor: pointer;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
        font-size: 0.8em;
        height: 21%;
    }
    
    .neirong {
        position: fixed;
        padding: 11vh 0 7vh 0;
        width: 100vw;
        height: 100%;
    }
    
    .nr {
        height: 100%;
        overflow: hidden;
    }
    
    .nr .nrzhong {
        height: 100%;
        padding: 0 3vw;
    }
    
    .swiper {
        width: 100%;
        height: 100%;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;

    }
    .zuo>span {
        cursor: pointer;
        line-height: 1.75;
    }
    
    .zuo {
        position: absolute;
        bottom: 2.5vh;
        left: 5vw;
        line-height: 1.75;
        font-size: 10px;
        z-index: 10;
        transform: translateZ(0);
    }
    .zuo:hover{
        will-change: transform;
    }
    .zuo::after {
        content: '';
        width: 100%;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .you {
        width: 14px;
        height: 14px;
        position: absolute;
        bottom: 2.5vh;
        right: 5vw;
        z-index: 10;
    }
    
    .you>div {
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .you #zt {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .you #ks {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    #ks #ks1 {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    #zt #zt1 {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
    }

    .tu {
        width: 100%;
        height: 100%;
        position: relative;
    }
    img[src=""],
    img:not([src]) {
        opacity: 0;
    }
    
    .yincang {
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        padding: 10vh 3vw 0vh 3vw;
        opacity: 0;
        z-index: -1;
    }
    #yincangin{
        animation: yincangin 0.3 ease ;
    }
    #yincangout{
        animation: yincangout 0.3 ease;
    }
    .yincang .neibu {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .neibu .zuoce {
        height: 100%;
        width: 20%;
        flex-direction: column;
        position: relative;
    }
    figure{
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        margin-bottom: 10px;
    }
    .neibu .youce {
        width: 80%;
        overflow: auto;
    }
    
    .zuoce .zhuti {
        position: absolute;
        writing-mode: tb-rl;
        top: 0;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%);
    }
    
    .zuoce .riqi {
        position: absolute;
        writing-mode: tb-rl;
        left: 0;
        bottom: 60px;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%);
    }
    
    .swipersuo {
        width: 100%;
        height: 100%;
    }
    
    .swipersuo .swiper-wrapper {
        width: 100%;
        height: 100%;
    }
    
    .swipersuo .swiper-wrapper .swiper-slide {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .swipersuo .swiper-wrapper img {
        width: 33%;
        object-fit: cover;
        overflow: hidden;
        border: 1px solid #fff;
        cursor: pointer;
    }
    
    .xiezhen {
        width: 100vw;
        margin-top: 10vh;
       
    }
    .xiezhen .biaoti {
        text-align: center;
        font-size: 40px;
        margin-block-end: 50px;
    }
    @media screen and (max-width: 768px) {
        .xiezhen .biaoti {
            margin-block-end: 20px;
            font-size: 20px;
        }
    }

    
    .xznr {
        width: 100vw;
        padding: 0 20vw 0 20vw;
        display: flex;
        flex-flow: row wrap;
        overflow: auto;
    }
    @media screen and (max-width: 768px) {
        .xznr{
        padding: 0 7vw 0 7vw;
        }
    }
    .xznr>.card {
        width: 25%;
        padding: 0 10px;
        margin-bottom: 40px;
    }
    @media screen and (max-width: 768px) {
        .xznr>.card {
            width: 50%;
        }
    }
    .xznr>.card>a{
        display: block;
        width: 100%;
        height: 100%;
    }
    .swiperxz {
        width: 100%;
        height: 100%;
        position: relative;
        margin-bottom: 10px;
        display: block;
    }
    
    .swiperxz .swiper-wrapper .swiper-slide img {
        width: calc(100% - 30px);
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }
    
    .swiperxz .date {
        /* writing-mode: tb-rl;
        font-size: 15px;
        color: #969696;
        position: absolute;
        bottom: 20%;
        right: 10%; */
        position: absolute;
        right: 0;
        bottom: 0;
        width: 30px;
        font-size: 12px;
        color: #969696;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        writing-mode: tb-rl;
    }
    
    .card .name {
        line-height: 1.75;
        font-size: 15px;
        color: #000;
        font-weight: 700;
        text-align: left;
    }
    
    .text0 {
        font-size: 1em;
    }
    
    .wenzi {
        overflow: auto;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    
    .wenzi>div {
        width: 100%;
        height: 100%;
        position: absolute;
        padding: 20vh 10vw 0 10vw;
    }
    
    .text1 {
        text-align: center;
        font-size: 30px;
    }
    
    .text2 {
        margin-bottom: 30px;
    }
    
    .fen {
        margin-bottom: 30px;
    }
    
    @keyframes classin {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100%;
        }
    }
    
    @keyframes classout {
        0% {
            opacity: 100%;
        }
        100% {
            opacity: 0%;
        }
    }
    
    @keyframes colorr {
        to {
            color: black
        }
    }
    
    @keyframes colorcloss {
        to {
            color: #fff;
        }
    }
    
    @keyframes father {
        to {
            width: 30px;
            height: 82px
        }
    }
    
    @keyframes last {
        to {
            font-size: 30px;
            color: black
        }
    }
    
    @keyframes first {
        to {
            font-size: 30px;
            color: black
        }
    }
    
    @keyframes first1 {
        0% {
            font-size: 30px;
            color: black;
        }
        to {
            font-size: 20px;
        }
    }
    
    @keyframes father1 {
        0% {
            width: 30px;
            height: 82px
        }
        to {
            width: 54px;
            height: 20px
        }
    }
    
    @keyframes last1 {
        0% {
            font-size: 30px;
            color: black
        }
        to {
            font-size: 20px;
        }
    }
            @media (prefers-color-scheme: light) {
    @keyframes topp {
        to {
            width: 41px;
            transform: rotate(-76deg);
            background: #000;
        }
    }
}
    @media (prefers-color-scheme: dark) {
    @keyframes topp {
        to {
            width: 41px;
            transform: rotate(-76deg);
            background: #1a6840;
        }
    }
}
        @media (prefers-color-scheme: light) {
    @keyframes middlee {
        to {
            top: 20px;
            width: 10px;
            background: #000;
        }
    }
}
    @media (prefers-color-scheme: dark) {
    @keyframes middlee {
        to {
            top: 20px;
            width: 10px;
            background: #1a6840;
        }
    }
}
        @media (prefers-color-scheme: light) {
    @keyframes bottomm {
        to {
            top: 40px;
            width: 41px;
            transform: rotate(76deg);
            background: #000;
        }
    }
}
    @media (prefers-color-scheme: dark) {
    @keyframes bottomm {
        to {
            top: 40px;
            width: 41px;
            transform: rotate(76deg);
            background: #1a6840;
        }
    }
}

    
    /*1*/
    /*@keyframes topp {*/
    /*    to {*/
    /*        width: 41px;*/
    /*        transform: rotate(-76deg);*/
    /*        background: #000;*/
    /*    }*/
    /*}*/
    
    /*@keyframes middlee {*/
    /*    to {*/
    /*        top: 20px;*/
    /*        width: 10px;*/
    /*        background: #000;*/
    /*    }*/
    /*}*/
    
    /*@keyframes bottomm {*/
    /*    to {*/
    /*        top: 40px;*/
    /*        width: 41px;*/
    /*        transform: rotate(76deg);*/
    /*        background: #000;*/
    /*    }*/
    /*}*/
    
    @keyframes topoff {
        0% {
            width: 41px;
            transform: rotate(-76deg);
            background-color: #000
        }
        to {
            width: 40px;
            transform: rotate(0)
        }
    }
    
    @keyframes middleoff {
        0% {
            top: 20px;
            width: 10px;
            background-color: #000
        }
        to {
            top: 5px;
            width: 40px
        }
    }
    
    @keyframes bottomoff {
        0% {
            top: 40px;
            width: 41px;
            background-color: #000;
            transform: rotate(76deg)
        }
        to {
            top: 10px;
            width: 40px;
            transform: rotate(0)
        }
    }
        #zhengmian {
        width: 100vw;
        height: 100vh;
        object-fit: fill;
        z-index: 100;
        position: absolute;
        left: 0px;
        top: 0px;
      
         /*visibility: hidden; */
    }
    @keyframes yincangin{
        0%{
            opacity: 0;
        }
        to{
            z-index: 1;
            opacity: 1;
        }
    }
    @keyframes yincangout{
        0%{
            z-index: 1;
            opacity: 1;
        }
        to{
            z-index: -1;
            opacity: 0;
        }
    }
    .wen {
        position: absolute;
        top: 10vh;
        bottom: 7vh;
        padding: 0 7vw;
        overflow: scroll;
        width: 100%;;
    }
    
    .dia {
        justify-content: center;
        align-items: center;
        display: flex;
        height: 7vh;
        background-color: rgb(255, 255, 255);
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 0 5vw;
    }
    
    .zuoa a {
        color: #d24600;
    }
    
    .dia .zuoa>span {
        cursor: pointer;
        line-height: 1.75;
        color: #d24600;
    }
    
    .dia .zuoa {
        line-height: 1.75;
        font-size: 10px;
        position: relative;
        z-index: 1;
        transform: translateZ(0);
    }
    
    .zuoa::after {
        content: '';
        width: 100%;
        height: 3px;
        background-color: #d24600;
        position: absolute;
        left: 0;
        bottom: 0;
    }
        .swiperxzz {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .swiperxzz .swiper-wrapper .swiper-slide img {
        width: 80%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .swiperxzz .date {
        writing-mode: tb-rl;
        font-size: 15px;
        color: #969696;
        position: absolute;
        bottom: 20%;
        right: 10px;
    }
    
    .swiperxzz .name {
        position: absolute;
        bottom: 8%;
        left: 0;
        font-size: 17px;
        color: #000;
        font-weight: 700;
    }
       .xznrr {
        width: 100vw;
        padding: 0 5vw 0 5vw;
        display: flex;
       flex-flow: row wrap;
        overflow: auto;
        justify-content: flex-start;
    }


    .xznrr>a {
        width: 33%;
    }
        @media screen and (max-width: 768px) {
        .xznrr>a{
        width: 50%;
        }
    }
    .fan{
  visibility:hidden;
    }
        .wen p {
        text-indent: 2em;
        text-align: left;
    }
@media (prefers-color-scheme: light) {
        .wen .p1{
        text-indent: 2em;
        text-align: left;
        color: white;
    }
}
@media (prefers-color-scheme: dark) {
        .wen .p1 {
        text-indent: 2em;
        text-align: left;
        color: #000;
    }
}
    
    .dia span {
        font-size: 1.7em;
    }