/* 响应字体 */

@media screen and (min-width: 769px) {
    html {
        font-size: 88.8889px;
    }
}

@media screen and (min-width: 1440px) {
    html {
        font-size: 100px;
    }
}

@media screen and (min-width: 1680px) {
    html {
        font-size: 116.667px;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 133.333px;
    }
}

@media screen and (min-width: 2560px) {
    html {
        font-size: 177.778px;
    }
}

@media screen and (min-width: 3200px) {
    html {
        font-size: 222.222px;
    }
}

@media screen and (min-width: 3840px) {
    html {
        font-size: 266.667px;
    }
}


@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-50px, 0, 0);
        -ms-transform: translate3d(-50px, 0, 0);
        transform: translate3d(-50px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(50px, 0, 0);
        -ms-transform: translate3d(50px, 0, 0);
        transform: translate3d(50px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}