html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.PC .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;
}

.mySwiper1 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 杞挱缁撴潫 */
.PC {
    width: 100%;
    height: 100vh;
}

.goHeader {
    position: fixed;
    bottom: 90px;
    right: 60px;
    z-index: 10;
    width: 85px;
    height: 40px;
}

#firstFigure {
    display: flex;
}

#firstFigure div {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    background-size: 100% 100%;
    transform: scale(1);
    transition: all 2s ease 0s;
}

#firstFigure div:hover {
    /* animation: amplification 2s forwards; */
    /* transition: all 2s ease-in-out ; */
    transform: scale(1.03);

}

@keyframes amplification {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.03);
    }
}

#firstFigure a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* #firstFigure .one {
    background-image: url(../images/01.png);
}

#firstFigure .two {
    background-image: url(../images/02.png);
}

#firstFigure .three {
    background-image: url(../images/03.png);
}

#firstFigure .four {
    background-image: url(../images/04.png);
} */

.solarTermCard {
    width: 16.67%;
    height: 100%;
    box-sizing: border-box;
    /* border:1px solid black; */
    transform-style: preserve-3d;

}

.solarTermCard>div {
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotateY(0deg);
    /* transform: rotateY(180deg); */
    transform-style: preserve-3d;
    transition: all 3s ease 0s;
}

/* .solarTermCard:hover>div {
    transform-style: preserve-3d;
    transform: rotateY(180deg);
} */

@keyframes rotating {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

.solarTermCard .front {
    /* background-color: rgb(255, 0, 0); */
    background-size: 100% 100%;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.solarTermCard .behind {
    /* background-color: rgb(0, 0, 0); */
    /* background-image: url(../images/03.png); */
    background-size: 100% 100%;
    z-index: 99;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* transform: rotateY(-180deg); */
    transform: translateZ(-1px) rotateY(-180deg);
}

.behind .icon {
    width: 70%;
    height: auto;
    margin: 0 auto;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.introduce {
    width: 85%;
    margin: 0 auto;
    min-height: 300px;
    background-color: rgba(0, 0, 0, 0.2);
    height: auto;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    margin-top: 10px;
    border-radius: 20px;
    text-align: center;
    box-sizing: border-box;
}

.introduce h3 {
    margin: 0;
}

.introduce a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 14px;
}

.introduce p {
    text-align: left;
}

.icon img {
    width: 100%;
    height: auto;
}

.manuscript {
    width: 80%;
    margin: 0 auto;
    margin-top: 2vh;
    position: absolute;
    /* top: 70vh;
    left: 50%;
    transform: translate(-50%,0%); */
}

.manuscript a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 14px;
}

.manuscript p {
    text-align: left;
}
.PC .solarTerm .moreBtn{
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translate(-50%,0%);
}
.moreBtn {
    padding: 8px 40px;
    border-radius: 45px;
    display: inline-block;
    margin: 0 auto;
    margin-top: 4vh;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}
.moreBtn a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}
.footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0%);
    text-align: center;
    width:auto;
    /* height: 50px; */
    /* padding: 15px 0; */
    color: white;
    /* background-color: rgba(0, 0, 0, 0.5); */
    z-index: 999;
}

.footer img {
    width: 64px;
    height: 64px;
    cursor: pointer;
    opacity: 0.8;
}

.sidebar {
    position: fixed;
    right: 0px;
    top: 80%;
    z-index: 999;
}

/* #back {
    width: 30px;
    height:auto;
   
} */

.mouseHand {
    cursor: pointer;
}

.sidebar>div {
    width: 30px;
    height: auto;
}

.sidebar img {
    width: 100%;
    height: auto;
}

#back a {
    text-decoration: none;
}

.swiper-pagination {
    bottom: 55px !important;
}

.swiper-pagination-bullet-active {
    background-color: white;
}

/* 绉诲姩绔� */
.MT {
    display: none;
}

.mySwiper2 .swiper-slide {
    width: 100%;
    padding-top: 2vh;
    box-sizing: border-box;
    background-size: 100% 100%;
}

#MTfirstFigure {
    display: block;
}

#MTfirstFigure img {
    width: 100%;
    display: block;
    height: 25vh;
}

.MT .mySwiper2 .boxImg {
    width: 50%;
    height: 33.3%;
    float: left;
    padding: 0vh 5%;
    box-sizing: border-box;
}

/* .MT .mySwiper2 .swiper-slide:nth-of-type(-n+2){
    padding: 2vh 5%;
} */
.MT .mySwiper2 .boxImg img {
    width: 100%;
    height: auto;

}

.MT .mySwiper2 .boxImg p {
    /* text-align: center; */
}

@media screen and (max-width: 700px) {
    .PC {
        display: none;
    }

    .MT {
        display: block;
        width: 100%;
        height: 100vh;
    }

    .posterPage {
        display: flex;
        /* justify-content: center; */
        padding-top: 5vh;
        align-items: center;
        flex-direction: column;
    }

    .posterPage .imgBox {
        width: 100%;
        height: auto;
        /* border: 1px solid black; */
    }

    /* . */
    .posterPage .suggestion {
        margin-top: 10svh;
        color: white;
        text-align: center;
        position: absolute;
        bottom: 5.5vh;
    }
    .imgBox .moreBtn{
        background-color:rgb(101, 179, 162);
        position:absolute;
        bottom:-50px;
        right: 50% !important;
        transform: translate(50%, 0%);
    }
    .footer img {
        width: 45px;
        height: 45px;
        cursor: pointer;
    }
    .footer {
        width: 100%;
    }
}

a {
    display: inline-block;
}

/* 娴锋姤椤� */
.posterPage {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.MT a {
    text-decoration: none;
    font-size: 14px;
}

.MT .spring a {
    color: #459b00;
}

.MT .summer a {
    color: #950073;
}

.MT .autumnr a {
    color: #b18500;
}

.MT .winter a {
    color: #005eae;
}

.posterPage .imgBox {
    width: 80%;
    height: auto;
    position: relative;
    /* border: 1px solid black; */
}

.posterPage .imgBox img {
    width: 100%;
    height: auto;
    /* border: 1px solid black; */
}
.imgBox a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 14px;
}
.imgBox .moreBtn{
    background-color:rgb(101, 179, 162);
    position:absolute;
    bottom:-50px;
    right: 0;
}
/* 鏄ュぉ */
.springOne .behind .moreBtn {
    background-color: #6aa001;
}

.springTwo .behind .moreBtn {
    background-color: #409717;
}

.springThree .behind .moreBtn {
    background-color: #59a12c;
}

.springFour .behind .moreBtn {
    background-color: #349338;
}

.springFive .behind .moreBtn {
    background-color: #028f59;
}

.springSix .behind .moreBtn {
    background-color: #1d7942;
}


/* .springOne .front {
    background-image: url(../images/spring_01A.png) !important;
}

.springOne .behind {
    background-image: url(../images/spring_01B.png);
}

.springTwo .front {
    background-image: url(../images/spring_02A.png);
}

.springTwo .behind {
    background-image: url(../images/spring_02B.png);
}

.springThree .front {
    background-image: url(../images/spring_03A.png);
}

.springThree .behind {
    background-image: url(../images/spring_03B.png);
}

.springFour .front {
    background-image: url(../images/spring_04A.png);
}

.springFour .behind {
    background-image: url(../images/spring_04B.png);
}

.springFive .front {
    background-image: url(../images/spring_05A.png);
}

.springFive .behind {
    background-image: url(../images/spring_05B.png);
}

.springSix .front {
    background-image: url(../images/spring_06A.png);
}

.springSix .behind {
    background-image: url(../images/spring_06B.png);
} */

/* 澶忓ぉ */
.summerOne .behind .moreBtn {
    background-color: #e497d5;
}

.summerTwo .behind .moreBtn {
    background-color: #c367ae;
}

.summerThree .behind .moreBtn {
    background-color: #a84892;
}

.summerFour .behind .moreBtn {
    background-color: #93337d;
}

.summerFive .behind .moreBtn {
    background-color: #79186d;
}

.summerSix .behind .moreBtn {
    background-color: #560066;
}

/* .summerOne .front {
    background-image: url(../images/summer_01A.png);
}

.summerOne .behind {
    background-image: url(../images/summer_01B.png);
}

.summerTwo .front {
    background-image: url(../images/summer_02A.png);
}

.summerTwo .behind {
    background-image: url(../images/summer_02B.png);
}

.summerThree .front {
    background-image: url(../images/summer_03A.png);
}

.summerThree .behind {
    background-image: url(../images/summer_03B.png);
}

.summerFour .front {
    background-image: url(../images/summer_04A.png);
}

.summerFour .behind {
    background-image: url(../images/summer_04B.png);
}

.summerFive .front {
    background-image: url(../images/summer_05A.png);
}

.summerFive .behind {
    background-image: url(../images/summer_05B.png);
}

.summerSix .front {
    background-image: url(../images/summer_06A.png);
}

.summerSix .behind {
    background-image: url(../images/summer_06B.png);
} */

/* 绉嬪ぉ */
.autumnrOne .behind .moreBtn {
    background-color: #dba74a;
}

.autumnrTwo .behind .moreBtn {
    background-color: #cd9838;
}

.autumnrThree .behind .moreBtn {
    background-color: #a5792a;
}

.autumnrFour .behind .moreBtn {
    background-color: #996f25;
}

.autumnrFive .behind .moreBtn {
    background-color: #855f1c;
}

.autumnrSix .behind .moreBtn {
    background-color: #634003;
}

/* 
.autumnrOne .front {
    background-image: url(../images/autumn_01A.png);
}

.autumnrOne .behind {
    background-image: url(../images/autumn_01B.png);
}

.autumnrTwo .front {
    background-image: url(../images/autumn_02A.png);
}

.autumnrTwo .behind {
    background-image: url(../images/autumn_02B.png);
}

.autumnrThree .front {
    background-image: url(../images/autumn_03A.png);
}

.autumnrThree .behind {
    background-image: url(../images/autumn_03B.png);
}

.autumnrFour .front {
    background-image: url(../images/autumn_04A.png);
}

.autumnrFour .behind {
    background-image: url(../images/autumn_04B.png);
}

.autumnrFive .front {
    background-image: url(../images/autumn_05A.png);
}

.autumnrFive .behind {
    background-image: url(../images/autumn_05B.png);
}

.autumnrSix .front {
    background-image: url(../images/autumn_06A.png);
}

.autumnrSix .behind {
    background-image: url(../images/autumn_06B.png);
} */

/* 鍐ぉ */
.winterOne .behind .moreBtn {
    background-color: #7aaad2;
}

.winterTwo .behind .moreBtn {
    background-color: #2886b8;
}

.winterThree .behind .moreBtn {
    background-color: #005ca3;
}

.winterFour .behind .moreBtn {
    background-color: #0a7cdd;
}

.winterFive .behind .moreBtn {
    background-color: #0863b9;
}

.winterSix .behind .moreBtn {
    background-color: #004b92;
}

/* .winterOne .front {
    background-image: url(../images/winter_01A.png);
}

.winterOne .behind {
    background-image: url(../images/winter_01B.png);
}

.winterTwo .front {
    background-image: url(../images/winter_02A.png);
}

.winterTwo .behind {
    background-image: url(../images/winter_02B.png);
}

.winterThree .front {
    background-image: url(../images/winter_03A.png);
}

.winterThree .behind {
    background-image: url(../images/winter_03B.png);
}

.winterFour .front {
    background-image: url(../images/winter_04A.png);
}

.winterFour .behind {
    background-image: url(../images/winter_04B.png);
}

.winterFive .front {
    background-image: url(../images/winter_05A.png);
}

.winterFive .behind {
    background-image: url(../images/winter_05B.png);
}

.winterSix .front {
    background-image: url(../images/winter_06A.png);
}

.winterSix .behind {
    background-image: url(../images/winter_06B.png);
} */