@media screen and (max-width: 800px) {
    body {
        margin: auto;
        width: 100%;
        height: auto;
        font-size: 16px;
        /* color: #000; */
        line-height: 24px;
        /* background-color: #000; */
        min-height: 100%;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
}

@media screen and (min-width: 900px) {
    body {
        margin: auto;
        width: 20%;
        height: 78%;
        font-size: 16px;
        /* color: #000; */
        line-height: 24px;
        /* background-color: #000; */
        min-height: 100%;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    }
   
}

@font-face { 
    font-family:cursive; /*这里是说明调用来的字体名字*/ 
     src: url(‘cursive.TTF’); /*这里是字体文件路径*/ 
    }


.container {
    position: relative;
    text-align: center;
    height: 100vh;
}

/* 过渡元素平移动画 */
.couldL{
    display: none;
}
.couldR{
    display: none;
}

@keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes couldL {
    0% {
        transform: translate(-390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes couldR {
    0% {
        transform: translate(390px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}
/* 元素渐显效果*/
@keyframes opacity {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0.8;
    }
}

@-webkit-keyframes opacity {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0.8;
    }
}

@-moz-keyframes opacity {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0.8;
    }
}

/* #animat { */
    /* transform: scale(0.2); */
    /* animation-name: light;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    cursor: pointer
} */
/* 
@keyframes light {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.1;
    }
}

@-webkit-keyframes light {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.1;
    }
}

@-moz-keyframes light {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.1;
    }
} */

.img_btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    /* animation: bling; */
}
.img_btn2 {
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: 99; */
    /* animation: bling; */
}

img {
    width: 100%;
    height: inherit;
}

html {
    width: 100%;
    -webkit-text-size-adjust: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}