*{margin: 0;padding: 0;border: 0;list-style: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
img{display: block;width: 100%;}
a{text-decoration: none;}
a,button,select{
    text-decoration: none;
    /*a标签点击图片有阴影处理*/
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
input{
    text-decoration: none;
    /*a标签点击图片有阴影处理*/
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
/* 两端对齐 */
.spaceBetween{display: flex;justify-content: space-between;flex-wrap: wrap;}
/* 文字垂直居中 */
.alignCenter{display: flex;align-items: center;}

body{width: 100%;font-family: "Arial";font-size: 1rem;-webkit-text-size-adjust: 100% !important; background: #000;}
body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/bg.webp) center 0 no-repeat; background-size: cover;}
.wrap{position: relative;width: 100%;background: #000; -webkit-text-size-adjust: 100% !important;-webkit-overflow-scrolling:touch;}
.bg{ width: 100%; position: relative; overflow: hidden;}
.logo{position: absolute;top: 15%;left: 3%;width: 16%;z-index: 2;}
.home{position: absolute;top: 15%;right: 0;width: 7%;z-index: 2; padding: 2% 3%;}

.nav_btnBox{position: -webkit-sticky; position: sticky; width: 90%; display: flex;flex-wrap: wrap; justify-content: space-around; top: 0;background-color: rgba(0,0,0,.4); z-index: 5; padding: 0.6rem 5% 0.1rem;}
.nav_btnBox a{display: block;width: 32.5%;margin-bottom: 0.5rem;}
.about{ position: absolute; right: 9%; bottom: 4%; font-size: 1rem; color: #ffffff; cursor: pointer;}

.intro{position: absolute;top: 72%;left:9%;width: 82%;z-index: 2;}
.ico{position: absolute;top: 63%;left: 41.5%;width: 17%;-webkit-transform: translateY(-50%);transform: translateY(-50%); z-index: 2;}
.part1_light{ width: 100%; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;}

.video_box{ width: 90%; height: 90%; position: absolute; left: 5%; top: 5%; overflow: hidden; z-index: 3;}
.video-wrap{ width: 100%; height: 100%; display: none;}
.msg-wrap{ position: fixed; top: 0; left: 0; background: #fff; border: 1px solid #000; z-index: -1; opacity: 0;}

#slideStore{position: absolute;top: 8%;left: 0; width: 100%;}
#slideStore .swiper-slide{ width: 100%;}

.lang_bg{ width: 90%; position: absolute; left: 5%; top: 10%;}
.lang_title{color: #5b6eae;margin-bottom: 1rem;}
.lang_select{padding: 0 3%;width: 100%;height: 2.8rem;font-size: 1rem; display: flex;justify-items: center;align-items: center;background-color: #20203b;color: #5b6eae;border-radius: 5px;border: none;box-sizing: border-box; }

footer{position: absolute;top: 15%;left: 10%;width: 80%;}
.fb,.ytb,.discord{position: absolute;height: 100%; width: 33.33%;top: 0;}
.fb{left: 0;}
.ytb{left: 33.33%;}
.discord{right: 0;}


/*底部信息*/
.bottom{width: 100%; position: absolute; left: 0; top: 35%; color: #ffffff;font-size: 0.8rem; text-align: center;}
.privacyBox{position: absolute;bottom: -3rem;left: 0;width: 100%;}
.privacy,.terms{width: 35%; height: 2.2rem; text-align: center; line-height: 1.5rem; color: #ffffff;}
.privacy{ float: left; margin-left: 15%;}
.terms{ float: right; margin-right: 15%;}


/*弹窗*/
.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000000; opacity: 0.7; z-index: 20; display: none;}
.pop{ width: 90%; height: 70vh; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #11121c; color: #ffffff; z-index: 21; text-align: center;}
.pop_txt{ width: 90%; height: 90%; margin: 9% auto 0 auto; font-size: 1rem; box-sizing: border-box; text-align: left; overflow: auto;}
.pop_close { width: 2rem; height: 2rem; position: absolute; top: 1%; right: 2%;}


/*横屏*/
@media screen and (min-aspect-ratio:13/8){
    .wrap{width: 750px;margin: 0 auto; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff;}
    .pop{ width: 36%;}
    .pop_txt{ margin: 6% auto 0 auto;}
}


/*羽毛*/
.feather{position: absolute;top:0;left: 0;width: 100%;height: 100%;z-index:2;transform: rotateY(180deg); overflow: hidden; pointer-events: none;}
.feather i{position: absolute;top:0;opacity: 0;}
.feather1,.feather7,.feather13,.feather19{left: 18%;width: 4rem;height: 2rem;background: url("../images/feather/feather1.png") no-repeat;animation: upDown 23s -3s infinite linear; background-size: 100% 100%;}
.feather2,.feather10,.feather14,.feather20{left: 28%;width: 5rem;height:3rem;background: url("../images/feather/feather2.png") no-repeat;animation: upDown 22s -4s infinite linear; background-size: 100% 100%;}
.feather3,.feather11,.feather15{left: 39%;width: 6rem;height: 3rem;background: url("../images/feather/feather3.png") no-repeat;animation:upDown 30s -7s infinite linear; background-size: 100% 100%;}
.feather4,.feather12,.feather16{left: 55%;width: 7rem;height: 3rem;background: url("../images/feather/feather4.png") no-repeat;animation:upDown 21s -2s infinite linear; background-size: 100% 100%;}
.feather5,.feather9,.feather17{right: 70%;width: 2rem;height: 7rem;background: url("../images/feather/feather5.png") no-repeat;animation:upDown 28s -6s infinite linear; background-size: 100% 100%;}
.feather6,.feather8,.feather18{left: 82%;width: 3rem;height: 4rem;background: url("../images/feather/feather6.png") no-repeat;animation:upDown 29s -5s infinite linear; background-size: 100% 100%;}
.feather7{left: 90%;-webkit-animation-delay:2s;animation-delay:2s;}
.feather8{right: 40%;-webkit-animation-delay:6s;animation-delay:6s;}
.feather9{left: 20%;-webkit-animation-delay:5s;animation-delay:5s;}
.feather10{left: 58%;-webkit-animation-delay:1s;animation-delay:1s;}
.feather11{right: 68%;-webkit-animation-delay:7s;animation-delay:7s;}
.feather12{left: 78%;-webkit-animation-delay:8s;animation-delay:8s;}
.feather13{left: 88%;-webkit-animation-delay:10s;animation-delay:10s;}
.feather14{right: 98%;-webkit-animation-delay:13s;animation-delay:13s;}
.feather15{left: 28%;-webkit-animation-delay:15s;animation-delay:15s;}
.feather16{left: 35%;-webkit-animation-delay:17s;animation-delay:17s;}
.feather17{left: 67%;-webkit-animation-delay:19s;animation-delay:19s;}
.feather18{right: 75%;-webkit-animation-delay:21s;animation-delay:21s;}
.feather19{left: 25%;-webkit-animation-delay:23s;animation-delay:23s;}
.feather20{right: 35%;-webkit-animation-delay:25s;animation-delay:25s;}


/*羽毛飘落动画*/
@-webkit-keyframes upDown {
    0%{ opacity: 1; -webkit-transform: translate(200%,-100%) rotate3d(0,0,0,0deg);}
    25% { -webkit-transform:translate(50%,502px) rotate3d(0,0,1,60deg);}
    50% { -webkit-transform:translate(-100%,1040px) rotate3d(0,0,0,0deg);}
    70%{ opacity: 1; -webkit-transform:translate(-220%,1356px) rotate3d(0,0,1,-48deg);}
    75% { -webkit-transform:translate(-250%,1470px) rotate3d(0,0,1,-60deg);}
    100%{ opacity: 0.1; -webkit-transform: translate(-400%,1780px) rotate3d(0,0,0,0deg);}
}
@-moz-keyframes upDown {
    0%{ opacity: 1; -moz-transform: translate(200%,-100%) rotate3d(0,0,0,0deg);}
    25% { -moz-transform:translate(50%,502px) rotate3d(0,0,1,60deg);}
    50% { -moz-transform:translate(-100%,1040px) rotate3d(0,0,0,0deg);}
    70%{ opacity: 1; -moz-transform:translate(-220%,1356px) rotate3d(0,0,1,-48deg);}
    75% { -moz-transform:translate(-250%,1470px) rotate3d(0,0,1,-60deg);}
    100%{ opacity: 0.1; -moz-transform: translate(-400%,1780px) rotate3d(0,0,0,0deg);}
}
@-ms-keyframes upDown {
    0%{ opacity: 1; -ms-transform: translate(200%,-100%) rotate3d(0,0,0,0deg);}
    25% { -ms-transform:translate(50%,502px) rotate3d(0,0,1,60deg);}
    50% { -ms-transform:translate(-100%,1040px) rotate3d(0,0,0,0deg);}
    70%{ opacity: 1; -ms-transform:translate(-220%,1356px) rotate3d(0,0,1,-48deg);}
    75% { -ms-transform:translate(-250%,1470px) rotate3d(0,0,1,-60deg);}
    100%{ opacity: 0.1; -ms-transform: translate(-400%,1780px) rotate3d(0,0,0,0deg);}
}
@-o-keyframes upDown {
    0%{ opacity: 1; -o-transform: translate(200%,-100%) rotate3d(0,0,0,0deg);}
    25% { -o-transform:translate(50%,502px) rotate3d(0,0,1,60deg);}
    50% { -o-transform:translate(-100%,1040px) rotate3d(0,0,0,0deg);}
    70%{ opacity: 1; -o-transform:translate(-220%,1356px) rotate3d(0,0,1,-48deg);}
    75% { -o-transform:translate(-250%,1470px) rotate3d(0,0,1,-60deg);}
    100%{ opacity: 0.1; -o-transform: translate(-400%,1780px) rotate3d(0,0,0,0deg);}
}
@keyframes upDown {
    0%{ opacity: 1; transform: translate(200%,-100%) rotate3d(0,0,0,0deg);}
    25% { transform:translate(50%,502px) rotate3d(0,0,1,60deg);}
    50% { transform:translate(-100%,1040px) rotate3d(0,0,0,0deg);}
    70%{ opacity: 1; transform:translate(-220%,1356px) rotate3d(0,0,1,-48deg);}
    75% { transform:translate(-250%,1470px) rotate3d(0,0,1,-60deg)}
    100%{ opacity: 0.1; transform: translate(-400%,1780px) rotate3d(0,0,0,0deg) ;}
}


@keyframes bounce-down { 70% {transform: translateX(-3px);} 80%{transform: translateX(0);} 90% {transform: translateX(3px);} 100% {transform: translateX(0);}}
@-moz-keyframes bounce-down { 70% {-moz-transform: translateX(-3px);} 80%{-moz-transform: translateX(0);} 90% {-moz-transform: translateX(3px);} 100% {-moz-transform: translateX(0);}}
@-webkit-keyframes bounce-down { 70% {-webkit-transform: translateX(-3px);} 80%{-webkit-transform: translateX(0);} 90% {-webkit-transform: translateX(3px);} 100% {-webkit-transform: translateX(0);}}
@-ms-keyframes bounce-down { 70% {-ms-transform: translateX(-3px);} 80%{-ms-transform: translateX(0);} 90% {-ms-transform: translateX(3px);} 100% {-ms-transform: translateX(0);}}
@-o-keyframes bounce-down { 70% {-o-transform: translateX(-3px);} 80%{-o-transform: translateX(0);} 90% {-o-transform: translateX(3px);} 100% {-o-transform: translateX(0);}}

@keyframes bounce-down2 { 70% {transform: translateX(3px);} 80%{transform: translateX(0);} 90% {transform: translateX(-3px);} 100% {transform: translateX(0);}}
@-moz-keyframes bounce-down2 { 70% {-moz-transform: translateX(3px);} 80%{-moz-transform: translateX(0);} 90% {-moz-transform: translateX(-3px);} 100% {-moz-transform: translateX(0);}}
@-webkit-keyframes bounce-down2 { 70% {-webkit-transform: translateX(3px);} 80%{-webkit-transform: translateX(0);} 90% {-webkit-transform: translateX(-3px);} 100% {-webkit-transform: translateX(0);}}
@-ms-keyframes bounce-down2 { 70% {-ms-transform: translateX(3px);} 80%{-ms-transform: translateX(0);} 90% {-ms-transform: translateX(-3px);} 100% {-ms-transform: translateX(0);}}
@-o-keyframes bounce-down2 { 70% {-o-transform: translateX(3px);} 80%{-o-transform: translateX(0);} 90% {-o-transform: translateX(-3px);} 100% {-o-transform: translateX(0);}}

@-moz-keyframes rotation { 0% { -moz-transform: rotate(90deg);} 20%,100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes rotation { 0% { -webkit-transform: rotate(90deg); } 20%,100% { -webkit-transform: rotate(0deg); } }
@-ms-keyframes rotation { 0% { -ms-transform:rotate(90deg); } 20%,100% { -ms-transform:rotate(0deg); } }
@-o-keyframes rotation { 0% { -o-transform:rotate(90deg); } 20%,100% { -o-transform:rotate(0deg); } }
@keyframes rotation { 0% { transform:rotate(90deg); } 20%,100% { transform:rotate(0deg); } }

@-webkit-keyframes float{0%{-webkit-transform:translate(0,-10px);}100%{-webkit-transform:translate(0,10px);}}
@-moz-keyframes float{0%{ -moz-transform:translate(0,-10px);}100%{ -moz-transform:translate(0,10px);}}
@-ms-keyframes float{0%{ -ms-transform:translate(0,-10px);}100%{ -ms-transform:translate(0,10px);}}
@-o-keyframes float{0%{ -o-transform:translate(0,-10px);}100%{ -o-transform:translate(0,10px);}}
@keyframes float{0%{ transform:translate(0,-10px)}100%{ transform:translate(0,10px)}}