html,body,.wrap{width:100%;min-width:1420px;height:100%;overflow: hidden;}
.cyou-top{display: none;}
.wrap{position: relative;}
.news_text,.roles_tab_btn,.intro,.dt_type{-webkit-box-flex: 1;-webkit-flex: 1; flex: 1;}
.part{background-repeat: no-repeat; background-position: center top; background-size: cover; box-sizing: border-box; overflow: hidden;}
.home{width: 100%;height: 100%;position: relative; overflow: hidden;}
.content{margin-bottom: 100px;}
.p1{background-image: url('../img/p1.jpg');}
.home_video{position: absolute;top: 50%;left: 50%;width: 1920px; height: 1080px; margin: -540px 0 0 -960px;}
.home_video video{display: block; width: 1920px; height: 1080px;}
.age{position: absolute;bottom: 42px;left: 60px;width: 69px;height: 89px;background: url('../img/age.png') no-repeat;}
.share{position: fixed;top: 150px;right:14px;background: #000;height: 66px;border-radius: 33px;z-index: 10;-webkit-transition: all .3s;-ms-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s;}
.share a{display: block; width: 50px; height: 50px; background: url('../img/share.jpg?v=1') no-repeat -999px; position: relative; margin: 0 6px; border-radius: 50%;-webkit-transition: all .2s;-ms-transition: all .2s;-moz-transition: all .2s;-o-transition: all .2s;transition: all .2s;}
.share .wx{background-position: 0 0;}
.share .qw{background-position: 0 -50px;}
.share .tap{background-position: 0 -100px;}
.share .dy{background-position: 0 -150px;}
.share .wb{background-position: 0 -200px;}
.share .sc{width: 160px; min-height: 160px; border-radius: 5px;pointer-events: none; background: #fff; position: absolute; top:60px;left: 50%; margin-left: -80px;display: none;}
.share .sc::after{content: "";position: absolute;top: -8px;left: 50%;margin-left: -8px;width: 0;height: 0;border-bottom: 8px solid #fff;border-right: 8px solid transparent; border-left: 8px solid transparent;}
.share a:hover{-webkit-transform: scale(1.1);transform: scale(1.1);}
.share a:hover .sc{display: block;}
.arrow{width: 150px;height: 125px; position: absolute; bottom: 20px;left: 50%; margin-left: -75px; background: url('../img/arrow.png') no-repeat center bottom;z-index: 10; -webkit-animation: arrowUpDown 1s infinite ease-in-out alternate;-moz-animation: arrowUpDown 1s infinite ease-in-out alternate;-o-animation: arrowUpDown 1s infinite ease-in-out alternate;animation: arrowUpDown 1s infinite ease-in-out alternate;}
@-webkit-keyframes arrowUpDown{
    from{-webkit-transform:translateY(0);transform:translateY(0);opacity:.2}
    to{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:.2}
}
@-moz-keyframes arrowUpDown{
    from{-moz-transform:translateY(0);transform:translateY(0);opacity:.2}
    to{-moz-transform:translateY(10px);transform:translateY(10px);opacity:.2}
}
@-o-keyframes arrowUpDown{
    from{-o-transform:translateY(0);transform:translateY(0);opacity:.2}
    to{-o-transform:translateY(10px);transform:translateY(10px);opacity:.2}
}
@keyframes arrowUpDown{
    from{transform:translateY(0);transform:translateY(0);opacity:1}
    to{transform:translateY(10px);transform:translateY(10px);opacity:.5}
}
.slogan{width: 890px;height:380px; position: absolute; left: 50%; bottom: 270px; margin-left:-445px; background: url('../img/slogan.png?v=3') no-repeat;}
.down{position: absolute;left: 50%; bottom: 150px; margin-left: -288px; width: 576px; height: 140px; background: url('../img/down0407.png') no-repeat;z-index:10;}
.btn_rebate,.btn_start,.btn_ios,.btn_and,.btn_wd{background: url('../img/down_btn.png') no-repeat;}
.btn_rebate{width: 140px; height: 43px; float: left; margin: 73px 0 0 38px; background-position: 0 -111px;}
.btn_rebate:hover{background-position: -150px -111px;}
.btn_start{width: 202px; height: 101px; float: left; margin: 16px 0 0 9px; background-position: 0 0;}
.btn_start:hover{background-position: -212px 0;}
.dwon_btn{float: left;margin: 16px 0 0 10px; width: 140px;}
.btn_ios,.btn_and,.btn_wd{display: block;width: 140px;height: 31px; margin-bottom: 4px;}
.btn_ios{background-position: 0 -245px;}
.btn_ios:hover{background-position: -149px -245px;}
.btn_and{background-position: 0 -204px;}
.btn_and:hover{background-position: -149px -204px;}
.btn_wd{background-position: 0 -164px;}
.btn_wd:hover{background-position: -149px -164px;}
.menu{height:608px; width: 120px; position: fixed; left: 66px; top: 50%; margin-top: -304px; background: url('../img/menu_line.png') no-repeat left center;z-index: 10;display: none;}
.menu_list{margin-left: 25px;/*height: 392px;margin-top: -196px;*/height: 320px;margin-top: -160px;position: absolute;left: 0;top: 50%;position: relative;}
.menu a{display: block; width: 90px; height: 32px; background: url('../img/menu.png') no-repeat; margin:0 0 40px; position: relative;}
.menu a::after{content: ''; width: 6px; height: 6px; background: #d1d1d1; position: absolute; left: -28px; top: 50%; margin-top: -3px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.menu .n1{background-position: 0 0;}
.menu .n2{background-position: 0 -32px;}
.menu .n3{background-position: 0 -64px;}
.menu .n4{background-position: 0 -192px;}
.menu .n5{background-position: 0 -128px;}
.menu .n6{background-position: 0 -160px;margin: 0;}
.menu a:hover,.menu a.active{background-position-x: -90px;}
.dian{position: absolute;display: block;left:-41px;top: 0;width: 32px;height: 32px; background-position: -568px 0;-webkit-transition: top .3s; -moz-transition: top .3s;-ms-transition: top .3s;-o-transition: top .3s; transition: top .3s;}
.p2{background-image: url('../img/p2.jpg');}
.news .title{background-position: 0 0;}
.news_pic{width: 648px; height:456px; background: #000; position: relative; overflow: hidden;}
.news_pic .tit{position: absolute;left: 0; bottom: 0; width: 100%; height: 50px; box-sizing: border-box; padding: 0 10px; font-size: 16px; line-height: 50px; background: rgba(0, 0, 0, .5);z-index: 1;color:#fff;}
.news_pic .swiper-pagination{ width: auto; right: 24px;left: inherit; padding: 2px 6px; background: rgba(0, 0, 0, .4); display: flex;}
.swiper-pagination-bullet{width: 20px; height: 20px; margin: 0 5px; opacity: 1; background: url('../img/pagination.png') no-repeat;}
.swiper-pagination-bullet-active{background-position: center bottom;}
.news_list{width: 616px; height: 454px; background: rgba(0, 0, 0, .66); border: 1px solid #2f4e41;}
.tab{height: 46px;margin: 0 24px;border-bottom: 1px solid #7ca398; font-size: 18px; line-height: 46px;}
.tab .item{float: left; width: 74px; text-align: center; color: #8bb8ac; margin-right: 22px; cursor: pointer; position: relative;}
.tab .active{color: #cbefb9;}
.tab .active::after{content: ''; position: absolute; bottom: -1px; left: 50%; width: 144px; height: 40px; margin-left: -72px; background: url('../img/tab_bg.png') no-repeat;}
.tab .more{float: right; color: #8bb8ac; padding-right: 28px; position: relative;}
.tab .more::after,.tab .more::before{content: ''; position: absolute; background: #8bb8ac; right: 11px; top: 50%; margin-top: -1px; width: 12px; height: 2px;}
.tab .more::after{height: 12px; width: 2px; margin-top: -6px; right: 16px;}
.tab .more:hover,.tab .item:hover{color: #b4daa2;}
.tab .more:hover::after,.tab .more:hover::before{background: #b4daa2;}
.news_cont{height: 402px; overflow: hidden;}
.news_cont .item{display: none;}
.news_cont .link{padding:5px 25px 6px; position: relative;display: block;}
.news_cont .link:hover{background-image: linear-gradient(left,#163e31,#162116); background-image: -webkit-linear-gradient(left,#163e31,#162116);}
.news_cont .link::after{content: ''; position: absolute; bottom: 0; width: 100%; height: 1px; left: 0; background: url('../img/line.png') no-repeat center;}
.news_cont .nt{color: #fff; font-size: 20px; height: 68px; line-height: 34px; overflow: hidden; margin-right: 20px;}
.news_cont p{font-size: 12px; color: #94bdb1;}

.p3{background-image: url('../img/p3.jpg');}
.roles .title{background-position: 0 -92px; margin-bottom: 60px;}
.roles_main{width: 1116px; height: 477px; background: url('../img/roles_bg.png') no-repeat center bottom;}
.roles_tab{height: 52px; border: 1px solid #819d70; text-align: center; background: #38503f; background-image: linear-gradient(top,#546e52,#263b33);background-image: -webkit-linear-gradient(top,#546e52,#263b33);}
.roles_tab_btn{line-height: 52px; font-size: 20px; color: #86a37e; cursor: pointer; position: relative;}
.roles_tab_btn::after{content: '';position: absolute;left: 50%;top: 0; margin-left: -146px; width: 292px; height: 52px; background: url('../img/roles_tab.png') no-repeat; opacity: .5;}
.roles_tab_btn:first-child{border-right: 1px solid #65905f;}
.roles_tab .active{background: #2a5f39; color: #cff8b9; background-image: linear-gradient(top,#448040,#184837);background-image: -webkit-linear-gradient(top,#448040,#184837);}
.roles_tab .active span,.level .cur span{background: linear-gradient(#aef288, #d6f9c3);background-clip: text; -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.roles_tab .active::after{opacity: 1;}
.roles_cont{margin: 32px; height: 358px;}
.level{justify-content: space-between;}
.level_btn{width: 296px; height: 52px; line-height: 46px; display: block; background-position: 0 -413px; text-align: center; font-size: 20px; color: #627551; cursor: pointer;}
.level .cur{background-position: -302px -413px;color: #cbf7b3;}
.roles_body{border: 1px solid #1c2413; background: rgba(0, 0, 0, .2); height: 262px; padding: 10px 15px; margin-top: 30px; display:-webkit-flex;display:-moz-flex;display:-o-flex;display:-ms-flexbox;display:-ms-flex;display:flex;}
.icon{width: 336px; height: 210px; margin: 30px 0; overflow-y: auto; padding-right: 5px;}
.icon::-webkit-scrollbar{width: 4px;}
.icon li{float: left; width: 60px; height: 60px; border: 1px solid #63724d; margin: 0 0 8px 4px; opacity: .57; cursor: pointer; background-repeat: no-repeat; background-size: contain;}
.icon .active{opacity: 1;}
.intro{position: relative;}

/* .intro::after{content: ''; position: absolute; left: 284px; bottom: 20px; height: 60px; width: 375px; background: -webkit-linear-gradient(top,transparent, #090f02); background: linear-gradient(top,transparent, #090f02); } */
.intro .img{float: left;width: 262px; height: 262px;}
.intro .desc{float: left; width: 360px; padding:10px 24px 0 0; margin: 20px 0 0 20px; height: 210px; overflow-y: auto; font-size: 16px; color: #5e714e; line-height: 1.6;}
.intro .desc::-webkit-scrollbar{width: 12px;}
.intro .desc::-webkit-scrollbar-thumb,.icon::-webkit-scrollbar-thumb{background: #1d3c24;}
.intro .name{margin-bottom:10px; text-align: right;}
.intro .name span{float: left; background: linear-gradient(#a7f17f, #d6f9c3);background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 20px;}
.intro .tag{display: inline-block; width: 70px; height: 30px; line-height: 26px; text-align: center; margin-left: 10px; color: #e5f29f; font-size: 12px; background-position:-470px -210px;}
.intro .skill img{display: inline-block; width: 36px; height: 36px; margin: 0 3px;}
.p4{background-image: url('../img/p4.jpg');}
.p4 .title{background-position: 0 -460px; margin-bottom: 20px;}
.reward{background-repeat: no-repeat; background-position: center; width: 1300px; height: 578px; overflow: hidden;}
.reward ul{padding: 395px 0 0 97px; height: 183px;}
.reward ul li{float: left; width: 194px; margin-right: 39px; position: relative; padding-top: 132px; color: #a4ad7d; cursor: pointer;}
.reward .text{position: absolute;bottom: 110px; left: 50%; margin-left: -81px; font-size: 14px; line-height: 1.6; display: none; color: #edf4cf; width: 140px; background: rgba(7, 13, 1, .8); text-align: center; padding: 10px; border: 1px solid #1f4829; border-radius: 6px;}
.reward li:hover .text{display: block;}
.reward li.reach{background: url('../img/reach.png') no-repeat center 20px;}
.reward .people{height: 42px; text-align: center;font:bold 16px / 42px '思源宋体'; background: linear-gradient(#4a4926, #b5c291);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;display:none;}
.p5{background-image: url('../img/p5.jpg');}
.story .title{background-position: 0 -184px; margin-bottom: 70px;}
.story_main{width: 1272px; margin:0 auto; height: 540px; position: relative;}
.story_main .swiper{width: 1272px; height: 473px;}
.story_main .swiper-slide{height: 232px; position: relative; overflow: hidden;}
.story_main .swiper-slide img{display: block; -webkit-transition: all .3s; transition: all .3s;}
.story_main .text{position: absolute;left: 0; bottom: 0; height: 50px; width: 100%; background: rgba(20, 30, 20, .6);}
.story_main .text p{line-height: 50px; padding: 0 55px 0 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px;}
.story_main .swiper-slide:hover p{background: linear-gradient(#78a168, #d6f9c3);background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.story_main .swiper-slide:hover img{transform: scale(1.1);}
.story_main .swiper-slide:hover .text::after{content: ''; position: absolute; top: 50%; right: 5px; width: 43px; height: 43px; margin-top: -22px; background: url('../img/jr.png') no-repeat;}
.p6{background-image: url('../img/p6.jpg');}
.feature{width: 1252px; margin: 0 auto; position: relative; padding-bottom: 60px;}
.feature .title{background-position: 0 -276px;}
.feature .swiper-slide{width:800px; min-height:440px; position: relative; border: 1px solid #86a37e;}
.feature .swiper-slide img{display: block; width: 100%;}
.feature .swiper-3d .swiper-slide-shadow-left,.feature .swiper-3d .swiper-slide-shadow-right{background: rgba(0, 0, 0, .6);}
.prev,.next{position: absolute; width: 50px; height: 70px; top: 325px; z-index: 10; cursor: pointer;}
.prev{left: 145px; background-position: -392px -280px;}
.next{right: 145px; background-position: -442px -280px;}

.foot{height: 320px;background-color: #0f0f14; background-image: linear-gradient(top,#181920,#020202); background-image: -webkit-linear-gradient(top,#181920,#020202);}
#cyou_bottom{float: none; display: none;}
.foot .cyou_bottom{display: block!important;}
.pop_order{width: 628px; height: 486px; margin: -243px 0 0 -314px; background: url('../img/order.png?v=1') no-repeat;}
.from{padding: 96px 37px 0;}
.from .item,.type span{margin-bottom: 12px; overflow: hidden; position: relative; line-height: 76px; height: 76px; position: relative; background: url('../img/order_item.png') no-repeat center top / 100% 83px; padding: 0 10px 7px 120px;}
.type{display:-webkit-flex;display:-moz-flex;display:-o-flex;display:-ms-flexbox;display:-ms-flex;display:flex;justify-content: space-between;}
.type span{position: relative; width: 122px; padding-left: 140px; font-size: 28px; cursor: pointer;}
.type span::after{content: ''; position: absolute; left: 36px; top: 16px; width:52px; height: 52px; background: url('../img/sprite.png') no-repeat -548px -211px;}
.type .cur::after{background-position:-548px -271px;}
.from .label{display: inline-block; position: absolute; left: 30px; top: 0; color: #397c6f; font-size: 20px;}
.from .input{height: 60px; margin-top: 8px; padding: 0 15px; background: #1e4a41; background-image: linear-gradient(top,#163d34,#25534a);background-image: -webkit-linear-gradient(top,#163d34,#25534a);}
.from input{width: 100%;border: 0;outline: 0;-webkit-appearance: none;appearance: none;background-color: transparent;color: #fff;height: 60px; line-height: 60px;font-size: 20px; display: block; font-family: '黑体';}
.from input::-webkit-input-placeholder{color: #abaeae;}
.from input::-moz-placeholder{color: #abaeae;}
.from input::placeholder{color: #abaeae;}
.verify_item .input{padding-right: 160px;}
.verify{position: absolute; top: 8px; right: 10px; width: 132px; height: 60px; line-height: 60px; text-align: center; color: #96b789; font-size: 16px; background-position:-468px -141px; font-family: '思源宋体'; cursor: pointer;}
.submit{display: block; width: 548px; height: 60px; background-position: 0 0;}
.submit:hover{background-position: 0 -70px;}
.yy_btn{display: block; position: absolute; bottom: 220px; left: 50%; margin-left: -143px; width: 286px; height: 59px; z-index:10; background: url('../img/yy_btn.png') no-repeat;-webkit-animation: scaleIn 2s linear infinite; animation: scaleIn 2s linear infinite;}
.yy_btn:hover{background-position: center bottom;}
@-webkit-keyframes scaleIn{0%,100%{-webkit-transform:scale(.96);transform:scale(.96)}50%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes scaleIn{0%,100%{-webkit-transform:scale(.96);transform:scale(.96)}50%{-webkit-transform:scale(1);transform:scale(1)}}