@charset "utf-8";
/* CSS Document */

@-webkit-keyframes first--top {
    50% {
        -webkit-transform: translate3d(0,13px,0);
        transform: translate3d(0,13px,0)
    }

    100% {
        -webkit-transform: translate3d(0,13px,0) rotate(45deg);
        transform: translate3d(0,13px,0) rotate(45deg)
    }
}

@keyframes first--top {
    50% {
        -webkit-transform: translate3d(0,13px,0);
        transform: translate3d(0,13px,0)
    }

    100% {
        -webkit-transform: translate3d(0,13px,0) rotate(45deg);
        transform: translate3d(0,13px,0) rotate(45deg)
    }
}

@-webkit-keyframes first--filling {
    50% {
        -webkit-transform: translateY(-50%) rotateZ(0deg);
        transform: translateY(-50%) rotateZ(0deg)
    }

    100% {
        -webkit-transform: translateY(-50%) rotateZ(45deg);
        transform: translateY(-50%) rotateZ(45deg)
    }
}

@keyframes first--filling {
    50% {
        -webkit-transform: translateY(-50%) rotateZ(0deg);
        transform: translateY(-50%) rotateZ(0deg)
    }

    100% {
        -webkit-transform: translateY(-50%) rotateZ(45deg);
        transform: translateY(-50%) rotateZ(45deg)
    }
}

@-webkit-keyframes first--bottom {
    50% {
        -webkit-transform: translate3d(0,-14px,0);
        transform: translate3d(0,-14px,0)
    }

    100% {
        -webkit-transform: translate3d(0,-14px,0) rotate(-45deg);
        transform: translate3d(0,-14px,0) rotate(-45deg)
    }
}

@keyframes first--bottom {
    50% {
        -webkit-transform: translate3d(0,-14px,0);
        transform: translate3d(0,-14px,0)
    }

    100% {
        -webkit-transform: translate3d(0,-14px,0) rotate(-45deg);
        transform: translate3d(0,-14px,0) rotate(-45deg)
    }
}

*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0
}
@media screen and (max-width: 768px) {
    .container {
        width:50%;
        height: 50%
    }
}

@media screen and (max-width: 360px) {
    .container {
        width:100%;
        height: 25%
    }
}
.yincang{
  top1:-100%;
  overflow:hidden;
  transition:all 0.4s;
  opacity:0;
}
.zhankai{
  overflow:hidden;
  transition:all 0.4s;
  opacity:1 !important;
}
.mianbaoxianshi{
opacity:1 !important;
}

.burger {position: absolute;cursor: pointer;padding: 10px;opacity: 1;right: 25px;top: 18px;opacity:0;}

.burger__inner {
    position: relative;
    height: 30px;
    width: 40px
}

.burger__inner__bun {
    width: 100%;
    height: 2px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    display: block;
    position: absolute;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.burger__inner__bun--top {
    top: 1px;
}

.burger__inner__bun--filling {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.burger__inner__bun--bottom {
    bottom: 0
}



.burger--first .burger__inner__bun {
    background-color: #bb8a48;
    -webkit-animation-timing-function: cubic-bezier(0.53,1.69,1,1.71);
    animation-timing-function: cubic-bezier(0.53,1.69,1,1.71);
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.burger--first.activating .burger__inner__bun--top {
    -webkit-animation-name: first--top;
    animation-name: first--top
}

.burger--first.activating .burger__inner__bun--filling {
    -webkit-animation-name: first--filling;
    animation-name: first--filling
}

.burger--first.activating .burger__inner__bun--bottom {
    -webkit-animation-name: first--bottom;
    animation-name: first--bottom
}

.burger--first.activated .burger__inner__bun--top {
    -webkit-transform: translate3d(0,13px,0) rotate(45deg);
    transform: translate3d(0,13px,0) rotate(45deg)
}

.burger--first.activated .burger__inner__bun--filling {
    -webkit-transform: translateY(-50%) rotateZ(45deg);
    transform: translateY(-50%) rotateZ(45deg)
}

.burger--first.activated .burger__inner__bun--bottom {
    -webkit-transform: translate3d(0,-14px,0) rotate(-45deg);
    transform: translate3d(0,-14px,0) rotate(-45deg)
}

.burger--first.going-idle .burger__inner__bun {
    animation-direction: reverse
}

.burger--first.going-idle .burger__inner__bun--top {
    -webkit-animation-name: first--top;
    animation-name: first--top
}

.burger--first.going-idle .burger__inner__bun--filling {
    -webkit-animation-name: first--filling;
    animation-name: first--filling
}

.burger--first.going-idle .burger__inner__bun--bottom {
    -webkit-animation-name: first--bottom;
    animation-name: first--bottom
}