* {
    margin: 0;
    padding: 0;
}
@font-face {

    /* font-properties */

    font-family: 'Snat';

    src:url("fonts/Bluetea.ttf"); /* IE9 */

}

body {
    overflow-x: hidden;
}

::selection {
    color: #000;
    background: white;
}

.video1 {
    width: 100vw;
    height: 100vh;
}

video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    max-width: 100vw;
    max-height: 90vh;
    z-index: 1;
    object-fit: cover;
}
.cover {
    position: absolute;
    /* background: url(images/WIKI.png) no-repeat center/cover; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 2;
}



/* .h5title {
    position: absolute;

    z-index: 3;
    font-size: 1vw;
    font-weight: 700;
    width: 10vw;
    top: 90vh;
    left: 45vw;
    text-align: center;
    color: white;
    transition: all 0.5s;
} */

/* .h5title.is-in {
    opacity: 0;
    pointer-events: none;
} */

@keyframes dxrhue {
    from {
        /* filter: hue-rotate(0deg); */
        color: rgb(153, 206, 129);
    }

    to {
        /* filter: hue-rotate(360deg); */
        color: rgb(135, 214, 213);
    }
}

.h5title:hover {
    animation: dxrhue 2s linear infinite;
    /* animation: scale 0.5s ease-out; */
}

/* .logo {
    position: absolute;
    z-index: 5;
    top: 28px;
    left: 50px;
    width: 78px;
    height: 43px;
    font-family: 'Snat';
    font-size: 24px;
    color: #000;
    text-decoration: none;
} */
.btn-menu {
    top: 10px;
    right: 10px;
    width: 120px;
    height: 80px;
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 60px;
    cursor: pointer;
    margin-top: 0.4vh;
    margin-right: 0.5vw;
    /* background-color: ; */
    border-radius: 15px;
    /* border: 5px solid #000; */
    overflow: hidden;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;

    /* background-color: rgb(160, 179, 222); */
}
.btn-menu:hover {
    box-shadow: 0px 8px 8px -3px rgba(0, 0, 0, 0.3);
}
.btn-menu .bar {
    width: 42px;
    height: 12px;
    /* width: 32px;
    height: 10px; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: block;
}

.exitl {
    width: 42px;
    height: 12px;
    position: relative;
    top: 12px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    display: block;
    transform: rotate(45deg);
    background: rgb(87 164 52);
}

.exitr {
    width: 42px;
    height: 12px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    display: block;
    transform: rotate(-45deg);
    background: rgb(87 164 52);
}

.exitmenu {
    margin-right: 90px;
    float: right;
    width: 42px;
    height: 42px;
    opacity: 0;
    pointer-events: none;
}

.exitmenu.is-in {
    opacity: 1;
    pointer-events: all;
}

.exitmenu:hover .exitl {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
}

.exitmenu:hover  .exitr {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
}

.btn-menu .bar:before {
    content: '';
    width: 100%;
    height: 2.5px;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    /* background-color: rgb(223, 189, 161); */
    transition: all .2s;
}
.btn-menu .bar:after {
    display: block;
    content: '';
    width: 52%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: black;
    /* background-color: rgb(223, 189, 161); */
    transition: all .2s;
}

/* .logo {
    height: 80px;
    width: 114px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50;
} */

/* .logo.is-in {
    color: white;
} */
menu.is-in {
    opacity: 1;
    pointer-events: visible;
    display: flex;
    top: 0;
    /* opacity: 0;
    pointer-events: none; */
    /* transform: translateY(0), rotate(0); */
    transform: translate(0, 0) rotate(0) scale(1);
}
.text {
    /* position: absolute; */
    /* padding: 20vw 20vw; */
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(9vh);
    transition: opacity .47s, transform .45s;
    margin: 0;
    padding: 0;
    /* font-size: 100%; */
    vertical-align: baseline;
    text-decoration: none;
    display: block;
    cursor: pointer;
    background: 0 0;
    -webkit-transition: all .6s;
    transition: all .6s;
    font-family: Snat;
    /* font-size: 200%; */
    font-weight: 400;
    line-height: 1.5;
}
.text.is-in {
    opacity: 1;
    pointer-events: visible;
    transform: translateY(0);
}

menu {
    display: flex;
    align-items: center;
    position: fixed;
    top: 100vh;
    left: 0;
    width: 200%;
    height: 200%;
    z-index: 90;
    /* opacity: 1;
    pointer-events: visible; */
    opacity: 0;
    pointer-events: none;
    /* transition: ; */
    /* 正常eio */
    transition: opacity .5s, transform 1.5s ease-in-out;
    /* 跳动效果  */
    /* transition: opacity .5s, transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    /* two choices */
    /* background-color: rgb(107, 170, 159); */
    background: linear-gradient(60deg, rgb(153, 206, 129),rgb(135, 214, 213));
    animation: dxrhuue 10s infinite;
}

@keyframes dxrhuue {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(60deg);
    }
}


.pop {
    /* display: none; */
    /* transform: translateY(30vh), rotate(-30deg); */
    transform: translate(10vh, 200vh) rotate(-30deg) scale(1.7);
}
menu.poping {
    height: 100%;
    width: 100%;
}
.center {
    position: relative;
    width: 100%;
    display: block;
}
.flex {
    font-family: 'Snat';
    display: flex;
    padding: 0 0 0 15%;
    position: relative;
    z-index: 1;
    color: skyblue;
}

.flex a{
    padding: 0.5vw;
    position: relative;
    overflow: hidden;
    color: white;
    /* opacity: 0;
    pointer-events: none; */
}
.dxra {
    margin: 0;
    padding: 0;
    /* font-size: 100%; */
    vertical-align: baseline;
    text-decoration: none;
    display: block;
    cursor: pointer;
    background: 0 0;
    -webkit-transition: all .6s;
    transition: all .6s;
    font-family: Snat;
    /* font-size: 200%; */
    font-weight: 400;
    line-height: 1.5;
}

.subtext a{
    width: auto;
    height: auto;
    border-radius: 20px;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);
    text-align: center;
    vertical-align: middle;
    margin: 1vh;
}

.subtext a:hover {
    box-shadow: 0px 8px 8px -3px rgba(0, 0, 0, 0.3);
}

.flex .r {
    padding: 0 0 0 10%;
}

.letter {
    display: inline-block;
    font-size: 5vw;
    font-weight: 400;
    min-width: 1vw;
    min-height: 3.5vh;
    margin-top: 1.5vh;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* font-family: ; */
    color: white;
    /* background-color: red; */
    z-index: 100;
    /* vertical-align: bottom; */
}

.subletter {
    color: white;
}

.subsubtext:hover .subletter{
    color: rgb(23, 192, 107);
}

.subtext {
    position: fixed;
    width: 27vw;
    font-size: 2.2vw;
    left: 47vw;
    top: 100px;
    line-height: 7.54vw;
    display: none;
    opacity: 0;
}

/* .HumanPractices, .Parts {
    left: 67%;
    bottom: 5vh;
} */

.r .subtext {
    left: 67%;
    bottom: 5vh;
}

.HumanPractices {
    top: 21vh;
}

.suba {
    margin: 0;
    padding: 0;
}

@keyframes main_menu_exit {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes main_menu_exist {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.text:hover .letter{
    color: rgb(23, 192, 107);
    transform: translateY(-2vh);
}

@keyframes focused {
    0% {font-size: 2.2vw;}
    100% {font-size: 2.5vw;}
}

@keyframes unfocused {
    0% {font-size: 2.5vw;}
    100% {font-size: 2.2vw;}
}

/* .text:hover + .subtext{
    animation: main_menu_exist 0.5s linear 0.5s forwards;
    pointer-events: visible;
    display: block;
} */

/* .flex {
    background-color: skyblue;
} */
.btn-menu .circle {
    position: absolute;
    background-color: rgb(0, 0, 0);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: scale 0.5s ease-out;
}

@keyframes scale {
    to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}



/* 这以下是主页的正文内容。 */


.main_section {
    height: auto;
    /* opacity: 0; */
    pointer-events: none;
    height: 50vw;
    width: 100vw;
    transform: 10vh;
    transition: opacity 0.47s, transform 0.54s;
    font-family: "Poppins";
}
.main_section h3 {
    font-size: 2.9vw;
    font-weight: 600; 
    display: inline-block;
    color: rgb(0, 0, 0);
}

.maintext {
    display: inline-block;
    font-size: 1.6vw;
    line-height: 2.8vw;
    width: 35vw;
    font-weight: 400;
    text-align: center;
    color: rgb(0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transform: translateY(7vh);
    transition: opacity 0.9s, transform 1.7s;
}

.maintext.is-in {
    opacity: 1;
    transform: translateY(0);
}

.h3text {
    opacity: 0;
    transform: translateY(9vh);
    transition: opacity 0.3s, transform 0.7s;
}

.h3text.is-in {
    opacity: 1;
    transform: translateY(0);
}

.main_section .img1 {
    display: inline-block;
    height: 21vw;
    width: auto;
}

.mains1, .mains4 {
    background-color: rgb(123, 191, 134);
    width: 100vw;
}

.mains4 {
    padding-top: 5vh;
}

.mains1 img,
.mains4 img {
    float: left;
    position: relative;
    top: 15.7vw;
    left: 12vw;
}
.mains1 h3{
    float: right;
    position: relative;
    top: 8.5vw;
    right: 16vw;
}
.mains1 .maintext {
    float: right;
    position: relative;
    left: 20vw;
    top: 15vw;
}
/* .mains1.is-in {
    opacity: 1;
    pointer-events: visible;
    transform: translateY(0);
} */

.mains2, .mains5 {
    background-color: rgb(183, 213, 177);
    width: 100vw;
}
.mains2 img {
    float: right;
    right: 6vw;
    position: relative;
    top: 18.6vw;
}
.mains2 h3,
.mains5 h3 {
    float: left;
    position: relative;
    top: 10.7vw;
    left: 20vw;
}
.mains2 .maintext {
    float: left;
    position: relative;
    right: 5vw;
    top: 15vw;
}

.mains3 {
    background-color: rgb(39, 137, 78);
    width: 100vw;
}
.mains3 .maintext {
    width: 52vw;
    position: relative;
    left: 24vw;
    top: 7.5vw;
}

.mains4 h3 {
    position: relative;
    top: -24vw;
    left: 9vw;
}
.mains4 .maintext {
    position: relative;
    top: -17vw;
    left: 54vw;
}
.mains4 img {
    height: 24vw;
    position: relative;
    top: 12vw;
    left: 7vw;
}

.mains5 img {
    height: 24vw;
    float: right;
    position: relative;
    top: 16vw;
    right: 5vw;
}
.mains5 h3 {
    top: 4vw;
    left: 23vw;
}
.mains5 .maintext {
    width: 40vw;
    position: relative;
    text-align: center;
    left: 5vw;
    top: 13vh;
}

.mains6 {
    background-color: rgb(127, 177, 126);
    width: 100vw;
}
.mains6 * {
    position: relative;
}
.mains6 h3 {top: 6vh; left: 35vw;}
.mains6 .x {
    top: 15%;
    width: 70vw;
    left: -15vw;
}
.mains6 .y1, .mains6 .y2 {
    width: 18vw;
}
.y1 {left: 5vw; top: 9vw;}
.y2 {
    left: 1vw;
    top: 11vw;
}
.pic1 {
    display: inline-block;
    height: 19vw;
    width: auto;
    left: 18vw;
    top: 9.5vw;
}

.bad1 {
    width: 6vw;
    top: 4.5vw;
    right: 2.5vw;
    opacity: 0;
    transform: translate(-5vw, -3vw);
    transition: opacity 0.6s 1s, transform 1.7s 1.2s;
}

.bad1.is-in {
    opacity: 1;
    transform: translate(0, 0);
}

.bad2 {
    width: 6vw;
    top: 12.5vw;
    right: 7.5vw;
    opacity: 0;
    transform: translate(-3vw, 3vw);
    transition: opacity 0.6s 1s, transform 1.7s 1.2s;
}

.bad2.is-in {
    opacity: 1;
    transform: translate(0, 0);
}

.bad3 {
    width: 6.7vw;
    top: 13.5vw;
    right: 6.5vw;
    opacity: 0;
    transform: translate(1vw, 5vw);
    transition: opacity 0.6s 1s, transform 1.7s 1.2s;
}

.bad3.is-in {
    opacity: 1;
    transform: translate(0, 0);
}

.pic2 {
    left: 1vw;
    top: 11vw;
}

.mains7 {background-color: rgb(121, 158, 132); height: 25vw;}
.mains7 .maintext {
    width: 40vw;

    text-align: center;
    font-weight: 400;
    position: relative;
    left: 30vw;
    top: 5vw;
}

.mains8 {
    background-color: rgb(6, 113, 38); height: 10vw;
    width: 100vw;
}

.h3last {
    /* margin: auto; */
    text-align: center;
    line-height: 10vw;
    color: rgb(6, 70, 38);
    font-size: 2.6vw;
}

.lasttext {
    /* text-align: center; */
    line-height: 1.5vw;
    color: rgb(6, 70, 38);
    font-size: 1.2vw;
    margin-top: 2.5vw;
}

.ll {
    display: inline-block;
    position: absolute;
    left: 30vw;
}

.rr {
    display: inline-block;
    float: right;
    margin-right: 20vw;
}