@font-face {
            font-family: iconfont;
            src: url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.eot?t=1584846914425);
            src: url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.eot?t=1584846914425#iefix) format('embedded-opentype')
        }

        .iconfont {
            font-family: iconfont !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .icon-querenzhengque:before {
            content: "\e600"
        }

        .icon-tishi:before {
            content: "\e640"
        }

        .icon-cuowu:before {
            content: "\e602"
        }

        .icon-jinggao:before {
            content: "\e62b"
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-weight: 300
        }

        a {
            text-decoration: none
        }

        body {
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            background: #01a982;
            /* background: url('images/bg4.jpg') center top; */
        }

        .wrapper {
            position: absolute;
            left: 0;
            width: 100%;
            padding-bottom: 50px;
        }

        .bg-bubbles,
        .bg-bubbles {
            top: 0;
            z-index: 1
        }

        .bg-bubbles li {
            position: absolute;
            list-style: none;
            display: block;
            width: 40px;
            height: 40px;
            background-color: hsla(0, 0%, 100%, .15);
            bottom: -160px;
            /* animation: square 25s infinite; */
            transition-timing-function: linear
        }

        .bg-bubbles li:nth-child(1) {
            left: 10%
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            animation-delay: 2s;
            animation-duration: 17s
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            animation-delay: 4s
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-duration: 22s;
            background-color: hsla(0, 0%, 100%, .25)
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            animation-delay: 3s;
            background-color: hsla(0, 0%, 100%, .2)
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            animation-delay: 7s
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            animation-delay: 15s;
            animation-duration: 40s
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            animation-delay: 2s;
            animation-duration: 40s;
            background-color: hsla(0, 0%, 100%, .3)
        }

        .bg-bubbles li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            animation-delay: 11s
        }

        @keyframes square {
            0% {
                transform: translatey(0)
            }

            to {
                transform: translatey(-700px) rotate(600deg)
            }
        }

        @media (max-width:500px) {
            .container h1 {
                font-size: 60px
            }

            form button,
            form input {
                width: 500px
            }
        }

        .main {
            z-index: 999;
            position: relative;
            top: 40px;
        }

        .main h1 {
            font-size: 40px;
            text-align: center;
            color: #fff;
            margin-bottom: 30px;
            text-transform: uppercase
        }

        .content {
            margin: 0 auto;
            width: 28%;
            background: #fff;
            border-radius: 5px
        }

        p.footer {
            font-size: 16px;
            text-align: center;
            color: #fff;
            font-weight: 500;
            margin: 30px 0;
            margin-bottom: 30px;
        }

        p.footer a {
            color: #55acee
        }

        p.footer a:hover {
            color: #000;
            transition: .5s all;
            -webkit-transition: .5s all;
            -moz-transition: .5s all;
            -o-transition: .5s all;
            -ms-transition: .5s all
        }

        .content-top h2 {
            font-size: 22px;
            color: #fff;
            text-align: center;
            background-color: #01a982;
            padding: 12px 0;
            border-radius: 5px
        }

        .content-top p {
            text-align: center;
            font-size: 16px;
            color: #000;
            margin-top: 15px
        }

        .content-top ul li {
            display: block;
            font-size: 15px;
            line-height: 1.8em;
            padding: 1em 0 1em 1em;
            border-bottom: 1px solid #e2e0de
        }

        .content-top ul li a {
            font-weight: 400
        }

        .content-top ul li a i {
            color: #02a982;
            font-style: normal;
            display: block;
            margin: 2px 0
        }

        .content-top ul li span {
            display: block;
            color: #999
        }

        .content-top {
            padding: 1.5em
        }

        .content-top p a {
            color: #55acee;
            margin-left: 5px
        }

        @media (max-width:1366px) {
            .content {
                width: 31%
            }
        }

        @media (max-width:1280px) {
            .content {
                width: 32%
            }
        }

        @media (max-width:1080px) {
            .content {
                width: 38%
            }

            .main h1 {
                font-size: 36px
            }

            .content-top h2 {
                font-size: 20px;
                padding: 10px 0
            }

            .content-top p,
            .content-top ul li,
            p.footer {
                font-size: 14px
            }
        }

        @media (max-width:800px) {
            .main h1 {
                font-size: 34px
            }

            .content {
                width: 46%
            }
        }

        @media (max-width:768px) {
            .main {
                padding: 90px 0
            }

            .main h1 {
                margin-bottom: 55px
            }

            p.footer {
                margin-top: 75px
            }
        }

        @media (max-width:736px) {
            .main {
                padding: 20px 0
            }

            .main h1 {
                margin-bottom: 45px
            }

            .content {
                width: 53%
            }

            p.footer {
                margin-top: 50px
            }
        }


        @media (max-width:568px) {
            .content {
                width: 68%
            }

            .main {
                top: 20px;
            }

            .wrapper {
                padding-bottom: 0;
            }
        }

        @media (max-width:480px) {
            .content {
                width: 78%
            }

            .main h1 {
                font-size: 28px
            }

            p.footer {
                margin-top: 42px
            }
        }

        @media (max-width:414px) {
            .content-top h2 {
                font-size: 16px
            }

            .content {
                width: 85%
            }

            .main {}

            p.footer {
                line-height: 1.8em;
                margin: 42px auto 0;
                width: 85%
            }
        }

        @media (max-width:384px) {
            .main h1 {
                font-size: 27px
            }

            .content,
            p.footer {
                width: 90%
            }

            p.footer {
                margin: 32px auto 0
            }
        }

        @media (max-width:375px) {
            .main h1 {
                font-size: 26px;
                margin-bottom: 25px
            }

            .main {
                padding: 45px 0
            }

            .content,
            p.footer {
                width: 92%
            }

            .content-top h2 {
                padding: 8px 0
            }
        }

        @media (max-width:320px) {
            .main h1 {
                font-size: 24px;
                margin-bottom: 30px
            }

            .content-top ul li {
                padding: 1em 0 1em 1em;
                background-size: 13% !important
            }

            .content-top {
                padding: 1.2em
            }

            .content-top p,
            .content-top ul li,
            p.footer {
                font-size: 13px
            }

            .content,
            p.footer {
                width: 90%
            }
        }

        @media(max-width:580px) {

            .bg-bubbles,
            .wrapper {
                height: auto;
                position: absolute;
            }

            .go {
                margin-left: 60px !important;
            }

            body {
                background-color: #01a982;
            }
        }

        .sidebar {
            position: fixed;
            right: 0;
            top: 50%;
            margin-top: -80px;
            width: 55px;
            background: rgba(0, 0, 0, 0.3);
            padding: 12px 0 0 0;
            border-radius: 8px 0 0 8px;
            z-index: 999999;

        }

        .sidebar li {
            height: 50px;
            width: 160px;
            padding-left: 17px;
            border-radius: 8px 0 0 8px;

            -webkit-transition: all 0.5s;

            -moz-transition: all 0.5s;

            -o-transition: all 0.5s;

            transition: all 0.5s;

        }

        .sidebar li img {

            display: block;

        }

        .sidebar li:hover {

            margin-left: -105px;
            background: rgba(0, 0, 0, 0.6);

        }

        ul,
        li {
            list-style: none;
        }

        .link {
            display: flex;
            align-items: center;
            position: relative;
        }

        .go {
            position: absolute;
            right: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 5px 10px;
            border-radius: 10px;
            width: 100px;
            text-align: center;
            color: #666;
            background-color: #01a982;
        }

        .go:hover {
            background-color: #01a982;
            color: #fff !important;
        }

        .go a {
            display: block;
            color: #fff;
            width: 100%;
        }

        .go a:hover {
            color: #fff;
        }

        /* 背景例子向上方运动 */
        .animation-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .particle,
        .particle:after {
            background: transparent;
        }

        .particle:after {
            position: absolute;
            content: "";
            top: 1920px;
        }

        @-webkit-keyframes animParticle {
            from {
                -webkit-transform: translateY(0px);
                transform: translateY(0px);
            }

            to {
                -webkit-transform: translateY(-1920px);
                transform: translateY(-1920px);
            }
        }

        @keyframes animParticle {
            from {
                -webkit-transform: translateY(0px);
                transform: translateY(0px);
            }

            to {
                -webkit-transform: translateY(-1920px);
                transform: translateY(-1920px);
            }
        }