/*  index
-------------------------------------------------
    - nav 
    - icon
    - menu list-  m menu - m menu-btn
    - social-link
    - music
    - top
    - download
    - run effect
-------------------------------------------------*

/* ----------------------------------------------
nav frame
------------------------------------------------*/
nav{position: fixed;top: 0;left: 0;z-index: 99;margin: auto; width: 100% ;height: 60px ; background: url(../images/nav-bg.png) 0 0 /cover no-repeat}
nav .menu-top{ display: flex;flex-wrap: nowrap;justify-content: space-between ;  top: 0; left: 0;right: 0;}

@media screen and (min-width:1921px) {
    nav{position: relative;max-width: 1920px;}
}
@media screen and (max-width:768px) {
    nav {height: 55px;}
    nav .menu-top {padding-right: 0rem;padding-left: 0rem;/*! height: 100vh; */flex-direction: column;}
}
/*-----------------------------------------------
icon
-----------------------------------------------*/
.menu-icon{z-index:100;width: 300px;height: 100px;padding: 10px 0 0 15px; }
.menu-icon a{ display: flex;}
.game-name {font-size: 1.2rem;font-weight:500;display: flex;flex-direction: column;margin: 0px 0px 0 10px;letter-spacing: 0.05rem; width: 250px;}
.game-name span {margin: 0px 0 0px 0;font-size: .8rem;color: #434242;letter-spacing: 0.1rem;}

.menu-icon img{width: 80px;height: 80px;}

@media screen and (max-width:768px) {
.menu-icon a{transform: scale(.85);margin-left: -20px;margin-top: -5px;}
}

/*-----------------------------------------------
menu list 
-----------------------------------------------*/
.menu-list{z-index: 100;height: 60px;top:0;left:0;padding: 0;margin:0;display: flex;justify-content: center;}
.menu-list ul{ margin-left: -200px;}
.menu-list li { display:inline-block; width:11rem; height:auto; text-align: center; color: #000; margin-left: -3px;top:5px ;  }
.menu-list li a{text-decoration:none;font-size: 13pt;color: #000;}
.menu-list li.active,.menu-list li.active a{color:#3e5694;}
.menu-list li.active a:hover,.menu-list li a:hover {color:#3e5694;transform: scale(1.1) translate(0%,0%);}
.menu-list li a,.menu-list li.active a{ padding: 9px 18px;display:block;}

.menu-list li a::before{ content:'';position: absolute;width:12px; height:12px;margin-top:9px;margin-left: -15px ; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
.menu-list li.active a::before{ background-color:#3e5694;}

/*-----------------------------------------------
menu list -m
-----------------------------------------------*/
@media screen and (max-width:768px) 
{
.menu-list {position: absolute;top: 0%;left: 0%;z-index: 2;width: 100%;height: 100vh;background-color: #ffffffd6;display: none;transform: scale(1) translate(0%, 0%);}
.menu-list ul {z-index: 1;width: 100%;height: 100vh;margin-left:10vw;margin-top: 30vh;flex-direction: column;align-items: center;justify-content: center;}
.menu-list ul li {width: 100%;max-width: 76%;background: transparent;margin: 0 2px;min-width: 100px;position: relative;}
.menu-list ul li a {border-top: 1px solid rgba(0, 0, 0, 0.2);color: #000;height: 14vw;}
.menu-list ul li a:hover {width: 100%;}

/*! open & close */
.menu-list-open {/*top: 0;*/height: 100vh;transition: all .3s ease;}
.menu-list-close {/*top: -100vh;*/height: 55px;transition: all .5s ease;}
}

/*-----------------------------------------------
    menu-btn - m menu
-----------------------------------------------*/
.menu-btn {display: none;}

@media screen and (max-width:768px) {
    .menu-btn {display: flex;position: absolute;top: 10px;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: 22px;height: 3px;border-radius: 5px;transition: all .5s ease-in-out;
                        background: #000;box-shadow: 0 2px 5px rgba(47, 106, 255, 0.2);}
    .menu-btn_burger::before,.menu-btn_burger::after {
        position: absolute;left: 0;width: 22px;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(-7px);}
    .menu-btn_burger::after {transform: translateY(7px);}

    /* 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);}
}

/*-----------------------------------------------
    social-link
-----------------------------------------------*/
.social-link {z-index: 100;width: 100px;height: 40px;margin-right: 1vh;}
.social-link ul {display: flex;max-width: 100%; margin-top: 5px;}
.social-link ul li {flex: 1;height: 100%;margin: 0 0%;transition: all .3s ease;}
/*---.social-link ul li a {display: block;height: 100%;text-align: center;line-height: 80px;}----*/
.social-link ul li:hover {transform: scale(1.3);transition: all .3s ease;}

.social-link ul li:nth-child(1) {background: url(../images/social-link.png) 50% 15% /70% no-repeat;}
.social-link ul li:nth-child(2) {background: url(../images/social-link.png) 50% 31% /70% no-repeat;}

@media screen and (max-width:768px) {
.social-link  {position: absolute;right: 5px;top: 55px;width: 70px;}
.social-link ul li{margin-left: -10px;}
}

/*-----------------------------------------------
    music
-----------------------------------------------*/
.music {display: block;position: absolute;width: 100px;height: 100px;right:90px;top: -20px;z-index: 102;cursor: pointer;overflow: hidden;transform: scale(.3);}
.on {width: 4000px;height: 100px;background: url(../images/music.png) -550px 0 no-repeat ;/*animation: musicOn 1.2s steps(40) forwards infinite;*/}
.Off {background-image: url(/images/music.png);}
.musicOn,.music :hover {animation: musicOn 1s steps(40) forwards infinite;}

@keyframes musicOn {
    0% {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(-4000px, 0, 0);}
}

@media screen and (max-width:768px) {
    .music {top: -20px;right: 5%;transform: scale(0.3);position: absolute;}
}

/*-----------------------------------------------
    top_logo w01 w02
-----------------------------------------------*/
.top .logo{position: absolute;left:-1%;top: 12vh;right: 0;transition: all .3s ease;}
.top .w01{position: absolute;top: 68vh;left: 1%;}
.top .w02{position: absolute;top: 50vh;right:8%;}

.section.active .logo{animation: blur_entry 2s cubic-bezier(.250, .460, .450, .940)  both;}
.section .w01{animation: blur_entry 2s cubic-bezier(.250, .460, .450, .940) .5s  both;}
.section .w02{animation: blur_entry 3s cubic-bezier(.250, .460, .450, .940)  both;}

@media screen and (min-width:1921px){
}
@media screen and (max-width:1680px){
.top .logo img{transform: scale(.9);}
.top .w01{transform: scale(.9);top: 65vh;left: 2%;}
}
@media screen and (max-width:1480px){
.top .logo {top:10vh;left: -80px;}
.top .logo img{transform: scale(.7);}
.top .w01 img{transform: scale(.8);margin-left: -40px;}
}
@media screen and (max-width:1280px){
.top .logo {top: 5vh;}  
.top .logo img{transform: scale(.7);}
.top .w01 img{transform: scale(.7);}
.top .w02 img{transform: scale(.8);top: 45vh;right:10%;}
}
@media screen and (max-width:768px){
}



/*-----------------------------------------------
    download
-----------------------------------------------*/
.download {position: absolute;z-index: 50;max-width: 580px;width: 100%;height: 50px;top: 83vh;left: 4%;}
.download>ul {display: flex;}
.download>ul>li {flex: 1;height: 100%;max-height: 50px;border-radius: 6px;margin: 0.5%;transform: scale(1);transition: all .3s ease;border: 1px solid #555;}
.download>ul>li :hover {transform: scale(1.05);}
.download>ul>li>a {display: block;height: 100%;text-align: center;line-height: 80px;transition: all .3s ease;border-radius: 5px;}

.and a {background: #000 url(../images/download.jpg) no-repeat 0% center /420%;}
.ios a {background: #000 url(../images/download.jpg) no-repeat 32% center /410%;}
.apk a {background: #000 url(../images/download.jpg) no-repeat 96% center /420%;}
.pc_ a {background: #000 url(../images/download.jpg) no-repeat 64.5% center /430%;}

.section.active .and {animation: blur_entry 0.8s cubic-bezier(.250, .460, .450, .940) 0.5s both;}
.section.active .ios {animation: blur_entry  0.8s cubic-bezier(.250, .460, .450, .940) 0.7s both;}
.section.active .pc_ {animation: blur_entry  0.8s cubic-bezier(.250, .460, .450, .940) 1s both;}

@keyframes blur_entry  {
    0% {opacity: 0; filter: blur(10px); transform: scale(1.4) translate3d(10%, 10%, 0);}
    100% {opacity: 1; filter: blur(0px);transform: scale(1) translate3d(0%, 0%, 0);}
}

@media screen and (min-width:1921px) {
    .download {top: 83vh;left: 5%;}
}
@media screen and (max-width:1480px) {
    .download {transform: scale(.9);top:85vh;left: 2%;}
}
@media screen and (max-width:1280px) {
    .download {transform: scale(.9);left: 5%;}
}

@media screen and (max-width:768px) {
    .download {width: 80%;height: 5vh;right: 0;left: 0;margin: auto;top: 96%;position: absolute;}
    .download>ul>li {max-height: 35px;}
}


/*-----------------------------------------------
    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 0.2s infinite both;}
.run-effect3:after{animation : run 3.5s ease 0.4s infinite both;}