/* ----------------------------------------------
    frame
------------------------------------------------*/
nav
{
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 99;
    width: 100%;

    max-width: 980px;
    margin: auto;
    right: 0;
}

.nav-line
{
    height: 85px;
    /*! background: url(../images/mask-nav-line.png) no-repeat center -25px; */
}

.nav-white-bg
{
    height: 5rem;
    border-bottom: 1px solid #ddd38;
    transition: all .3s ease;
    /*! background-color: #ffffff6e; */
}
.nav-white-bg:hover
{

    background-color: #ffffff6e;
}
nav .menu-top
{
    display: flex;
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1630px;
    flex-wrap: nowrap;
    justify-content: space-between;
}



    nav .menu-top
    {
        padding-right: 0rem;
        padding-left: 0rem;
        /*! height: 100vh; */
        flex-direction: column;
    }

    .nav-line ,
    .nav-white-bg
    {
        height: 3.5rem;
        border-bottom: 1px solid #ddd38;
        transition: all .3s ease;
        background-color: #ffff0;
    }


/*-----------------------------------------------
    nav-mask
-----------------------------------------------*/

.nav-mask
{
    position: absolute;
    top: 0;
    z-index: 1;
    opacity: .98;
    opacity: 0;
    width: 100%;
    height: 0vh;
    background: url(../../images/mask.png) center top no-repeat;
    background-size: 4000%;
}

.fox-down
{
    animation: fox-down .6s steps(39) forwards;
}

.fox-back
{
    animation: fox-back .5s steps(39) forwards;
}

@keyframes fox-down
{
    from
    {
        opacity: .94;
        height: 100vh;
        background-position: 100% 0;
    }

    to
    {
        opacity: .95;
        height: 100vh;
        background-position: 0 0;
    }
}

@keyframes fox-back
{
    0%
    {
        opacity: .9;
        height: 100vh;
        background-position: 0 0;
    }

    99%
    {
        opacity: 1;
        height: 100vh;
        background-position: 100% 0;
    }

    100%
    {
        opacity: 0;
        height: 0vh;
        background-position: 100% 0;
    }
}


    .nav-mask
    {
        background-size: 15000%;
    }


/*-----------------------------------------------
    icon
-----------------------------------------------*/

.menu-icon
{
    position: absolute;
    top: 10px;
    z-index: 2;
    width: 100%;
    /*! height: 100%; */
    max-width: 450px;
    /*animation: downIn .5s cubic-bezier(.230, 1.000, .320, 1.000) 5s 1 both;*/
    animation: blured 2s ease-out 5s 1 both;
    left: 5px;
}

@keyframes blured {
    0% {
        opacity: 0;
        transform: translate3d(0%, -20%, 0) scale(.3);
        filter: blur(50px);
    }

    40% {
        opacity: 1;
        transform: translate3d(0%, 0%, 0) scaleY(1);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
    }
}

.menu-icon-m{
    animation: downIn 0s cubic-bezier(.230, 1.000, .320, 1.000) 0s 1 both;
}
.menu-icon a
{
    display: flex;
    cursor: default;
}

.menu-icon h1
{
    display: flex;
    margin: 30px 0 0 13px;
    width: 70%;
    flex-direction: column;
    font-size: 1.5rem;
    color: #fff;
    transition: all .3s ease;
    text-shadow: rgba(81, 196, 255, 0.2) 0 1px 1px, rgba(81, 196, 255,.2) 1px 0 1px, rgba(81, 196, 255,.2) -1px 0 1px, rgba(81, 196, 255,.2) 0 -1px 1px, rgba(81, 196, 255,.2) -1px -2px,
        rgba(81, 196, 255,.2) 1px 1px 2px, rgba(81, 196, 255,.2) 1px -1px 1px, rgba(81, 196, 255,.2) -1px 1px 1px, rgba(81, 196, 255,.2) 0 1px 2px, rgba(81, 196, 255,.2) 1px 0 1px, rgba(81, 196, 255,.2) -1px 0 1px, rgba(81, 196, 255,.2) 0 -1px 1px, rgba(81, 196, 255,.2) -1px -1px 1px,  rgba(81, 196, 255,.2) 1px 1px 1px, rgba(81, 196, 255,.2) 1px -1px 2px, rgba(81, 196, 255,.2) -1px 1px 1px;
}


.menu-icon h1 span
{
    margin: -2px 0 0 -14px;
    padding: 11px 0 8px 3px;
    color: #fff;
    /*! border-bottom: 1px solid #000; */
    font-size: 1.2rem;
    letter-spacing: -0.01rem;

    background: url(../../images/line.png) 0 top / 71% no-repeat;

}

.menu-icon img
{
    margin: 1.5rem 0.5rem 1rem 1.5rem;
    width: 25%;
    width: 100px;
    transition: all .3s ease;
    height: 100px;
}



    .menu-icon h1
    {
        /*! margin: 10px -13px 0; */
        /*! transform: scale(.8); */
    }
    .menu-icon h1 span
    {
        /*! border-bottom: 0 solid #000; */
    }

    .menu-icon img
    {
        /*! margin: 1rem 0.5rem 0rem 1rem; */
    }

    .menu-icon img
    {
        /*! width: 30%; */
        /*! height: 50px; */
        /*! max-width: 180px; */
    }



/*-----------------------------------------------
    list
-----------------------------------------------*/

.menu-list
{
    position: absolute;
    top: -100vh;
    right: 0;
    left: 0;
    left: 0;
    margin: auto;
    z-index: 5;
    width: 100%;
    height: 100vh;
    /*! background: #11111163; */
    max-width: 320px;
    color: #000;
}

.menu-list> ul
{
    margin: 15vh auto;
    z-index: 1;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-list >ul> li >a
{
    margin: auto;
    padding: 35px 0;
    line-height: 2;
    color: #020202;
    border-top: 1px solid #ccc;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: .05rem;
}

.menu-list ul li:nth-child(1) a
{
    border-top: 0 solid #fff;
}

.menu-list ul li a:hover
{
    width: 100%;
    color: #6db7e3;
    text-align: center;
}

/*! open & close */
.menu-list-open
{
    top: 0;
    transition: all .5s ease;
}

.menu-list-close
{
    top: -100vh;
    transition: all .8s ease;
}



    .menu-list
    {
        width: 45%;
        max-width: 320px;
    }




/*-----------------------------------------------
    menu-btn
-----------------------------------------------*/



    .menu-btn
    {
        display: flex;
        position: absolute;
        top: 12px;
        right: 10px;
        z-index: 99;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 0;
        transition: all .5s ease-in-out;
        background: transparent;
        align-items: center;
        justify-content: center;
    }

    .menu-btn_burger
    {
        position: relative;
        width: 25px;
        height: 3px;
        border-radius: 5px;
        transition: all .5s ease-in-out;
        background: #000;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    }

    .menu-btn_burger::before ,
    .menu-btn_burger::after
    {
        position: absolute;
        left: 0;
        width: 25px;
        height: 3px;
        border-radius: 5px;
        content: '';
        transition: all .5s ease-in-out;
        background: #000;
        box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    }

    .menu-btn_burger::before
    {
        transform: translateY(-9px);
    }

    .menu-btn_burger::after
    {
        transform: translateY(9px);
    }

    /* ANIMATION */
    .menu-btn.open .menu-btn_burger
    {
        transform: translateX(-20px);
        background: transparent;
        box-shadow: none;
    }

    .menu-btn.open .menu-btn_burger::before
    {
        transform: rotate(45deg) translate(15px, -15px);
    }

    .menu-btn.open .menu-btn_burger::after
    {
        transform: rotate(-45deg) translate(15px, 15px);
    }




/* ----------------------------------------------
    btn-nav
------------------------------------------------*/
.btn-nav
{
    position: absolute;
    top: 20px;
    right: -20px;
    margin: 0;
    z-index: 91;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border: 0;
    border-radius: 0;
}


.nav-stick
{
    position: absolute;
    top: 60%;
    right: 20%;
    margin: auto;
    width: 45%;
    height: 3px;
    border-radius: 20%;
    transition: all .3s ease;
    background: #000;
}

.btn-nav:hover > .nav-stick
{
    width: 50%;
    /*background: #334808;*/
}

.btn-nav:hover > .nav-stick:before
{
    width: 50%;
    /*background: #334808;*/
}

.btn-nav:hover > .nav-stick:after
{
    width: 80%;
    /*background: #334808;*/
}

.nav-stick:before ,
.nav-stick:after
{
    position: absolute;
    top: -9px;
    right: 0;
    margin: auto;
    width: 130%;
    height: 3px;
    /*border-radius: 20%;*/
    content: '';
    transition: all .3s ease;
    background: #000;
}

.nav-stick:after
{
    top: 9px;
    width: 160%;
}




    .btn-nav
    {
        position: absolute;
        top: 40px;
        right: 30px;
        width: 62px;
        height: 62px;
        cursor: pointer;
        /*! background: #000000bf; */
    }

    .nav-stick
    {
        top: 47%;
        right: 20%;
        width: 40%;
        height: 5px;
        background: #000;
    }

    .nav-stick:before ,
    .nav-stick:after
    {
        top: -15px;
        right: 0;
        margin: auto;
        width: 130%;
        height: 5px;
        content: '';
        background: #000;
    }

    .nav-stick:after
    {
        top: 15px;
        width: 160%;
    }




/* ----------------------------------------------
    twitter_
------------------------------------------------*/


.twitter_
{
    position: absolute;
    top: 20px;
    right: 2%;
    z-index: 91;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all .3s ease;
    background: url(../images/twitter.png) center center / 35px no-repeat;
}

.twitter_:hover
{
    transition: all .3s ease;
    background: url(../images/twitter.png) center 0 / 35px no-repeat;
}

.twitter_ a
{
    display: block;
    width: 100%;
    height: 100%;
}



    .twitter_
    {
        position: absolute;
        top: 14%;
        right: 44px;
        z-index: 91;
        width: 33px;
        height: 33px;
        cursor: pointer;
        transition: all .3s ease;
        background: url(../images/twitter.png) center center / 33px no-repeat;
    }

    .twitter_:hover
    {
        transition: all .3s ease;
        background: url(../images/twitter.png) center 0 / 33px no-repeat;
    }



/*-----------------------------------------------
    download
-----------------------------------------------*/

.download
{
    position: absolute;
    top: 69%;
    left: 0;
    margin: auto;
    z-index: 50;
    width: 19%;
    height: 65px;
    min-width: 300px;
}

.download ul
{
    display: flex;
    margin: auto;
    width: 100%;
}

.download ul li
{
    margin: 1%;
    height: 47px;
    border-radius: 5px;
    background-color: #000;

    flex: 1;
}

.download ul li a
{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    line-height: 80px;
    text-align: center;
}

/*.and{
    background: url(../images/download.jpg) no-repeat -2% center /380%;
}

.ios{
    background: url(../images/download.jpg) no-repeat 33% center /380%;
}
.apk{
    background: url(../images/download.jpg) no-repeat 67% center /380%;
}*/
.and
{
    background: url(../images/download.jpg) no-repeat -2% center /360%;
}

.ios
{
    background: url(../images/download.jpg) no-repeat 33% center /360%;
}

.apk
{
    background: url(../images/download.jpg) no-repeat 67% center /380%;
}



    .download
    {
        top: 76vh;
        right: 0;
        left: 0;
        margin: auto;
        min-width: 80%;
        text-align: center;
    }
    .download ul
    {
        width: 37%;
    }
    .download ul li
    {
        height: 36px;
    }


/*run跑光效果*/

@keyframes run
{
    0%
    {
        right: -200%;

        filter: brightness(1);
    }

    50%
    {
        right: 300%;

        filter: brightness(1.5);
    }

    100%
    {
        right: -200%;

        filter: brightness(1);
    }
}

.run
{
    animation: btn-open 1s ease-out 0s 1 both;
}

/*usage: add "run-effect" to class in Html */
.run-effect1 ,
.run-effect2 ,
.run-effect3
{
    position: relative;
    overflow: hidden;
}

.run-effect1:after ,
.run-effect2:after ,
.run-effect3:after
{
    position: absolute;
    top: -10%;
    right: -200%;
    z-index: 0;
    opacity: .2;
    width: 50%;
    height: 120%;
    color: #fff;
    content: '';
    transition: all 300ms;
    transform: skewX(40deg);
    animation: run 3.5s ease 0s infinite both;
    background: #fff;

    filter: brightness(.5);
}

.run-effect2:after
{
    animation: run 3.5s ease .2s infinite both;
}

.run-effect3:after
{
    animation: run 3.5s ease .4s infinite both;
}

/*-----------------------------------------------
    social-link
-----------------------------------------------*/


#social-link-m{
     bottom: 35%;
     position: absolute;
     margin: auto;
     left: 0;
     right: 0;
}

.social-link{
    position: absolute;
    z-index: 50;
    width: 450px;
    height: 81px;
    /*! bottom: 0px; */
    margin: auto;
    left: 0;
    right: 0;

    bottom: 6%;
}

.social-link ul{
    display: flex;
    max-width: 38%;
    /*! margin-left: 70px; */
    margin: auto;
}
.social-link ul li{
    flex: 1;
    height: 100%;
    border-radius: 6px;
    margin: 1%;
    /*background-color: #e8151582;*/
    text-indent: -300%;
    transition: all .3s ease;
}
.social-link ul li:hover{
flex: 1.5;
}

.social-link ul li:nth-child(1){    background: url(../../images/social-link.png) -3% 0 /440% no-repeat;}
.social-link ul li:nth-child(2){    background: url(../../images/social-link.png) 31% 0 /440% no-repeat;}
.social-link ul li:nth-child(3){    background: url(../../images/social-link.png) 67% 0 /440% no-repeat;}
.social-link ul li:nth-child(4){    background: url(../../images/social-link.png) 100% 0 /440% no-repeat;}


.social-link ul li a{
    display: block;

    height: 100%;
    text-align: center;
    line-height: 80px;
    /*! border: 1px solid #fff; */
}


@media screen and (max-width:1400px)
{
.social-link{

    /*! transform: scale(0.8); */
    /*! left: -2.5%; */
    /*! bottom: -1.2%; */
}
}


/*-----------------------------------------------
    nav-bottom
-----------------------------------------------*/

.nav-bottom{
    width: 500px;
    height: 25px;
    /*! background: red; */
    position: absolute;
    right: 0;
    top: 10%;
    /*! line-height: 30px; */
    left: 0;
    margin: auto;
}

.nav-bottom-menu{
     top: 70%;
     left: -25%;
}
.nav-bottom> ul{
    display: flex;
    padding: 0 0 0 10%;
}

.nav-bottom >ul> li{
    margin: 0 10px;
}
.nav-bottom  >ul> li:nth-child(1){
    border-right: 1px solid #999;
    padding: 0 20px 0 0;
}
.nav-bottom  >ul> li.sp_{
    border-right: 0px solid #999;
    padding: 0 0px 0 0;
}
.nav-bottom  >ul> li a{
    font-size: 1.35rem;
    font-weight: 400;
    transition: all .3s ease;
}



.nav-bottom  >ul> li a:hover{
    transition: all .3s ease;
    /*! letter-spacing: 0.05rem; */
    color: #33b3ff;
}