footer,
section {
    width: 100%
}

.yfglzx-box {
    margin: 0 auto;
    max-width: 1140px
}

body {
    background-color: #ccc
}

.my-pagination .swiper-pagination-bullet {
    background-color: #908c82;
    border-radius: 6px;
    height: 11px;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 11px
}

.my-pagination .swiper-pagination-bullet-active {
    background-color: #ffc20e;
    border-radius: 6px;
    height: 11px;
    width: 32px
}

.yfglzx-banner {
    height: 640px;
    position: relative;
    text-align: center;
    width: 100%
}

.yfglzx-banner picture img {
    height: 640px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: bottom;
    object-position: bottom;
    width: 100%
}

.yfglzx-banner .banner-box {
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 50%;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.yfglzx-banner .banner-box .picture-wrapper {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-right: 100px;
    margin-top: auto
}

.yfglzx-banner .banner-box .picture-wrapper picture {
    height: 560px
}

.yfglzx-banner .banner-box .picture-wrapper picture img {
    height: 560px;
    width: auto
}

.yfglzx-banner .banner-box .desc-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 690px
}

.yfglzx-banner .banner-box .desc-box .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 43px;
    margin-top: 40px
}

.yfglzx-banner .banner-box .desc-box .header .logo {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fffcfd;
    border-radius: 20px;
    -webkit-box-shadow: 8px 13px 27px 0 rgba(181, 71, 11, .34);
    box-shadow: 8px 13px 27px 0 rgba(181, 71, 11, .34);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 80px;
    justify-content: center;
    margin-right: 27px;
    padding: 10px;
    width: 80px
}

.yfglzx-banner .banner-box .desc-box .header .title .my-h1 {
    color: #372501;
    font-family: MicrosoftJhengHeiUIBold;
    font-size: 42px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 52px;
    margin-bottom: 15px
}

.yfglzx-banner .banner-box .desc-box .header .title .my-sub {
    color: #68501a;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 8px
}

.yfglzx-banner .banner-box .desc-box .main .desc {
    color: #000;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 35px
}

.yfglzx-banner .banner-box .desc-box .main .entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.yfglzx-banner .banner-box .desc-box .main .entry .qr_code {
    height: 150px;
    margin-right: 20px;
    width: 150px
}

.yfglzx-banner .banner-box .desc-box .main .entry .tips {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-pack: distribute;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: space-around
}

.yfglzx-banner .banner-box .desc-box .main .entry .tips .tip {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 10px;
    color: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 14px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 25px;
    padding: 10px
}

.yfglzx-banner .banner-box .desc-box .main .entry .tips .tip img {
    margin-right: 10px
}

.section-title {
    color: #333;
    font-family: MicrosoftJhengHeiUIBold;
    font-size: 30px;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0;
    padding-top: 45px;
    position: relative;
    z-index: 2
}

.section-title:after {
    background-color: #ffc20e;
    bottom: 6px;
    content: "";
    display: block;
    height: 32px;
    left: -15px;
    position: absolute;
    -webkit-transform: translateY(40%);
    transform: translateY(40%);
    width: 8px;
    z-index: -1
}

.swiper-container {
    width: 100%
}

.introduction {
    background-color: #fff
}

.introduction .introduction-box {
    position: relative
}

.introduction .my-swiper-next,
.introduction .my-swiper-prev {
    position: absolute;
    top: 50%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.introduction .my-swiper-next:after,
.introduction .my-swiper-prev:after {
    bottom: -5px;
    content: "";
    display: block;
    left: -5px;
    position: absolute;
    right: -5px;
    top: -5px
}

.introduction .my-swiper-next img.icon,
.introduction .my-swiper-prev img.icon {
    display: block
}

.introduction .my-swiper-next:hover img.icon,
.introduction .my-swiper-next img.icon-active,
.introduction .my-swiper-prev:hover img.icon,
.introduction .my-swiper-prev img.icon-active {
    display: none
}

.introduction .my-swiper-next:hover img.icon-active,
.introduction .my-swiper-prev:hover img.icon-active {
    display: block
}

.introduction .my-swiper-prev {
    left: 0;
    -webkit-transform: translateX(-120%);
    transform: translateX(-120%)
}

.introduction .my-swiper-next {
    right: 0;
    -webkit-transform: translateX(120%);
    transform: translateX(120%)
}

.introduction .header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    margin-top: 33px;
    text-align: center
}

.introduction .header .title {
    color: #333;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 28px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 42px;
    margin-bottom: 18px
}

.introduction .header .title img {
    height: 28px;
    margin-right: 10px;
    margin-bottom: -5px;
}

.introduction .header .sub_title {
    color: #333;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 20px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 25px
}

.introduction .header ul {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-bottom: 18px
}

.introduction .header ul li {
    background-color: #f3f3f3;
    border-radius: 4px;
    color: #888;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 14px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    margin-right: 10px;
    padding: 6px 10px
}

.introduction .header ul li:last-child {
    margin-right: unset
}

.introduction .main {
    margin-bottom: 45px;
    position: relative
}

.introduction .main picture.bg img {
    width: 100%
}

.introduction .main .grid-box {
    display: grid;
    grid-template-columns: 34.36% 31.28% 34.36%;
    grid-template-rows: 33% 30% 37%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.introduction .main .grid-box li {
    padding: 34px 44px 26px 67px
}

.introduction .main .grid-box li .title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.introduction .main .grid-box li .title img {
    margin-right: 10px
}

.introduction .main .grid-box li .title span {
    color: #333;
    font-family: MicrosoftJhengHeiUIBold;
    font-size: 22px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0
}

.introduction .main .grid-box li p {
    color: #666;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 14px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0
}

.introduction .main.gird {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

.introduction .main.gird ul.list {
    margin-left: 30px;
    margin-top: 30px;
    padding: 20px
}

.introduction .main.gird ul.list li {
    border-left: 1px dashed #d2d2d2;
    padding-left: 33px;
    position: relative;
    white-space: nowrap
}

.introduction .main.gird ul.list li:last-child {
    border-left: none
}

.introduction .main.gird ul.list li:before {
    background-color: #ffc20e;
    border-radius: 50%;
    content: "";
    display: block;
    height: 13px;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 13px
}

.introduction .main.gird ul.list .box {
    position: relative;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.introduction .main.gird ul.list .box .title {
    color: #333;
    font-family: MicrosoftJhengHeiUIBold;
    font-size: 18px;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 46px;
    margin-right: 26px
}

.introduction .main.gird ul.list .box .desc {
    color: #666;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 46px
}

.introduction .main.gird picture {
    padding: 20px
}

.introduction .swiper-slide {
    margin-bottom: 45px
}

.introduction .swiper-pagination {
    bottom: 45px
}

.course {
    background-color: #f5f5f5
}

.course .course-box-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.course .course-box-content .desc-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.course .course-box-content .picture-wrapper {
    width: 600px
}

.course .course-box-content .picture-wrapper picture,
.course .course-box-content .picture-wrapper picture img {
    width: 100%
}

.course .detail .course-desc {
    color: #666;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 60px;
    margin-top: 38px
}

.course .detail ul.target-list {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px
}

.course .detail ul.target-list li {
    background-color: #ffc20e;
    border-radius: 39px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 113px;
    line-height: 1.2;
    padding: 16px 20px;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 113px
}

.course .detail ul.target-list li:hover {
    border-radius: 50px
}

.course .detail ul.target-list li div {
    color: #333;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0
}

.course .detail ul.course-list {
    grid-gap: 18px 10px;
    display: grid;
    gap: 18px 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 95px;
    width: 100%
}

.course .detail ul.course-list li {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    border-radius: 7px;
    color: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    padding: 13px 0
}

.platform {
    background-color: #fff
}

.platform .header {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 10px 30px 10px;
    color: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 15px;
    font-stretch: normal;
    font-weight: 400;
    height: 72px;
    justify-content: center;
    letter-spacing: 0;
    margin: 34px auto 0;
    padding: 25px 16px;
    width: 645px
}

.platform .header p {
    margin: unset
}

.platform .main {
    position: relative;
    width: 100%
}

.platform .main .picture-wrapper {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center
}

.platform .main ul.advantage-list {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.platform .main ul.advantage-list li {
    position: absolute;
    text-align: right;
    width: 287px
}

.platform .main ul.advantage-list li:nth-child(2n) {
    text-align: left
}

.platform .main ul.advantage-list li:first-child {
    left: 32px;
    top: 73px
}

.platform .main ul.advantage-list li:nth-child(2) {
    right: 25px;
    top: 73px
}

.platform .main ul.advantage-list li:nth-child(3) {
    left: -11px;
    top: 236px
}

.platform .main ul.advantage-list li:nth-child(4) {
    right: -11px;
    top: 236px
}

.platform .main ul.advantage-list li:nth-child(5) {
    left: 16px;
    top: 399px
}

.platform .main ul.advantage-list li:nth-child(6) {
    right: 19px;
    top: 399px
}

.platform .main ul.advantage-list .title {
    color: #333;
    font-family: MicrosoftJhengHeiUIBold;
    font-size: 16px;
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: 0
}

.platform .main ul.advantage-list .desc {
    color: #666;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 14px;
    font-stretch: normal;
    font-weight: 400;
    letter-spacing: 0
}

.customer {
    background-color: #ffc20e;
    overflow: hidden;
    position: relative
}

.customer .section-title:after {
    background-color: #dda605
}

.customer picture img {
    height: 680px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.customer .my-customer-box {
    left: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%)
    }

    50% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%)
    }

    to {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%)
    }
}

@keyframes shake {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%)
    }

    50% {
        -webkit-transform: translateY(30%);
        transform: translateY(30%)
    }

    to {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%)
    }
}

@-webkit-keyframes bigshake {
    0% {
        -webkit-transform: translateY(-15%);
        transform: translateY(-15%)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        -webkit-transform: translateY(-15%);
        transform: translateY(-15%)
    }
}

@keyframes bigshake {
    0% {
        -webkit-transform: translateY(-15%);
        transform: translateY(-15%)
    }

    50% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    to {
        -webkit-transform: translateY(-15%);
        transform: translateY(-15%)
    }
}

.customer ul.customer-list {
    margin-top: 67px;
    position: relative;
    width: 100%
}

.customer ul.customer-list li {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    background-color: #ffeaab;
    border: 4px solid hsla(0, 0%, 100%, .65);
    border-radius: 50%;
    -webkit-box-shadow: 6px 10px 24px 0 rgba(214, 161, 7, .38);
    box-shadow: 6px 10px 24px 0 rgba(214, 161, 7, .38);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0
}

.customer ul.customer-list li:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused
}

.customer ul.customer-list li:first-child {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    height: 197px;
    left: 122px;
    top: 0;
    width: 197px
}

.customer ul.customer-list li:nth-child(2) {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-name: bigshake;
    animation-name: bigshake;
    height: 129px;
    left: 369px;
    top: 40px;
    width: 129px
}

.customer ul.customer-list li:nth-child(3) {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    height: 105px;
    left: 563px;
    top: -55px;
    width: 105px
}

.customer ul.customer-list li:nth-child(4) {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-name: bigshake;
    animation-name: bigshake;
    height: 197px;
    left: 594px;
    top: 50px;
    width: 197px
}

.customer ul.customer-list li:nth-child(5) {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    height: 116px;
    left: 805px;
    top: -30px;
    width: 116px
}

.customer ul.customer-list li:nth-child(6) {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    height: 83px;
    left: 1040px;
    top: -2px;
    width: 83px
}

.customer ul.customer-list li img {
    width: 100%
}

.customer ul.comment-list {
    height: 240px;
    left: 0;
    margin-top: 419px;
    position: absolute;
    top: 0;
    width: 100%
}

.customer ul.comment-list li {
    background-color: hsla(0, 0%, 100%, .22);
    border: 1px solid #ecb207;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-family: MicrosoftJhengHeiUIRegular;
    font-size: 14px;
    font-stretch: normal;
    font-weight: 400;
    left: 0;
    letter-spacing: 0;
    min-height: 65px;
    padding: 13px 20px;
    position: absolute;
    top: 0;
    width: 460px
}

.customer ul.comment-list li.active {
    background-color: #f5e0a1;
    z-index: 99
}

.cooperation {
    background-color: #fff
}

.cooperation,
.cooperation .introduction-box {
    position: relative
}

.cooperation .my-swiper-next,
.cooperation .my-swiper-prev {
    position: absolute;
    top: 50%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cooperation .my-swiper-next:after,
.cooperation .my-swiper-prev:after {
    bottom: -5px;
    content: "";
    display: block;
    left: -5px;
    position: absolute;
    right: -5px;
    top: -5px
}

.cooperation .my-swiper-next img.icon,
.cooperation .my-swiper-prev img.icon {
    display: block
}

.cooperation .my-swiper-next:hover img.icon,
.cooperation .my-swiper-next img.icon-active,
.cooperation .my-swiper-prev:hover img.icon,
.cooperation .my-swiper-prev img.icon-active {
    display: none
}

.cooperation .my-swiper-next:hover img.icon-active,
.cooperation .my-swiper-prev:hover img.icon-active {
    display: block
}

.cooperation .my-swiper-prev {
    left: 0;
    -webkit-transform: translateX(-120%);
    transform: translateX(-120%)
}

.cooperation .my-swiper-next {
    right: 0;
    -webkit-transform: translateX(120%);
    transform: translateX(120%)
}

.cooperation ul.cooperation-list {
    grid-gap: 28px;
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin-bottom: 110px;
    margin-top: 49px;
    width: 100%
}

.cooperation ul.cooperation-list li {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s
}

.cooperation ul.cooperation-list li img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.cooperation ul.cooperation-list li:hover {
    border-color: #ffc20e;
    -webkit-box-shadow: 2px 3px 18px 0 rgba(188, 136, 31, .2);
    box-shadow: 2px 3px 18px 0 rgba(188, 136, 31, .2)
}

.cooperation .swiper-pagination {
    bottom: 50px
}

.wave {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fbf0bb;
    bottom: 0;
    height: 600px;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.wave:after,
.wave:before {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-color: #fff;
    content: "";
    left: 50%;
    min-height: 300vw;
    min-width: 300vw;
    position: absolute
}

.wave:before {
    border-radius: 45%;
    bottom: 15vh
}

.wave:after,
.wave:before {
    -webkit-animation-duration: 10s;
    animation-duration: 10s
}

.wave:after {
    border-radius: 47%;
    bottom: 12vh;
    opacity: .5
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: translate(-50%) rotate(0deg);
        transform: translate(-50%) rotate(0deg)
    }

    50% {
        -webkit-transform: translate(-50%, -2%) rotate(180deg);
        transform: translate(-50%, -2%) rotate(180deg)
    }

    to {
        -webkit-transform: translate(-50%) rotate(1turn);
        transform: translate(-50%) rotate(1turn)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: translate(-50%) rotate(0deg);
        transform: translate(-50%) rotate(0deg)
    }

    50% {
        -webkit-transform: translate(-50%, -2%) rotate(180deg);
        transform: translate(-50%, -2%) rotate(180deg)
    }

    to {
        -webkit-transform: translate(-50%) rotate(1turn);
        transform: translate(-50%) rotate(1turn)
    }
}

footer {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 170px;
    position: relative
}