/*  reset  */
body,div,p,ul,li,table,tbody,tr,td,textarea,form,input,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,iframe,header,nav,section,article,footer,figure,figcaption,menu,iframe{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;display: block;}
em,i,s,b,th{font-style:inherit;font-weight:inherit;text-decoration:none;}
ol,ul{list-style:none;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
*,*:before,*:after{word-break: break-all;outline: none;box-sizing: border-box;-ms-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
input {user-select: auto;-ms-user-select: auto;-moz-user-select: auto;-webkit-user-select: auto;}
a{text-decoration: none;tap-highlight-color: transparent;-webkit-tap-highlight-color: transparent;}
body {font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;}

/* comm */
html,body {width: 100%;height: 100%;overflow: hidden;}
body {position: relative;background: #e8eae6;font-size: 12px;line-height: 1;}
.web {position: relative;width: 100%;height: 100%;overflow: hidden;}
.page {background: no-repeat center/cover;display: flex;overflow: hidden;}
.inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 1920px;height: 960px;background: no-repeat center/cover;}
.swiper-container {width: 100%;height: 100%;overflow: hidden;position: relative;}
.swiper-container,.swiper-wrapper,.swiper-pagination {z-index: auto !important;}
.swiper-notification {display: none !important;}
.swiper-slide {overflow: hidden;height: 100%;}
.hide {display:block;width:0;height:0;overflow:hidden;}

/* section1 */
.section1 {background-image: url(../img/bg1.jpg);}
.slogan{width: 100%;height: 100%;position: absolute;left: 0;top: 0;pointer-events: none;background: url(../img/slogan.png) no-repeat 50% 50%;text-indent: -999em;}
/*.bg_media {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
.bg_media video {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit: cover;display: block;}
.btn_video {position: absolute;left: 628px;bottom: 515px;width: 134px;height: 134px;pointer-events: all;background: url(../img/play_video.png) no-repeat;animation: starScale 0.5s linear infinite alternate;-webkit-animation: starScale 0.5s linear infinite alternate;display: none;}*/
@keyframes starScale {
	0% {transform: scale(1);-webkit-transform: scale(1);}
	100% {transform: scale(0.9);-webkit-transform: scale(0.9);}
}
@-webkit-keyframes starScale {
	0% {transform: scale(1);-webkit-transform: scale(1);}
	100% {transform: scale(0.9);-webkit-transform: scale(0.9);}
}
.slogan{width: 100%;height: 100%;position: absolute;left: 0;bottom: 0;pointer-events: none;background: url(../img/slogan.png) no-repeat 50% 50%;text-indent: -999em;}
.btn_order{display: block;width: 321px;height: 81px;background: url(../img/btn_order.png) no-repeat 50% 0/100% 100%;position: absolute;left: 50%;margin-left: -160.5px;top: 50%;margin-top: 318px;text-indent: -999em;}
.btn_order:hover{filter: brightness(1.1);}
.btn_order.btnzhih{background: url(../img/btn_orderzhih.png) no-repeat 50% 0/100% 100%;pointer-events: none;}
.btn_down{display: none;width: 321px;height: 81px;background: url(../img/btn_down.png) no-repeat 50% 0/100% 100%;position: absolute;left: 50%;margin-left: -160.5px;top: 50%;margin-top: 318px;text-indent: -999em;}
.btn_down:hover{filter: brightness(1.1);}
.pc_channel{display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;-webkit-justify-content: center;width: 750px;position: absolute;left: 50%;margin-left: -375px;top: 50%;margin-top: 318px;}
.pc_channel a{display: block;width: 321px;height: 81px;text-indent: -999em;margin: 0 20px;}
.pc_channel a:hover{filter: brightness(1.1);}
.btn_androiddown{background: url(../img/androidbtn_down.png) no-repeat;}
.btn_iosdown{background: url(../img/iosbtn_down.png) no-repeat;}
/* section2 */
.section2 {background-image: url(../img/bg2.jpg);}
.order_main{width: 1662px;height: 734px;background: url(../img/order_cont.png) no-repeat;box-sizing: border-box;padding: 106px 0 0 242px;position: absolute;left: 50%;margin-left: -860px;top: 50%;margin-top: -367px;}
.order_main:after{display: block;content: "";width: 1662px;height: 734px;background: url(../img/order_conticon.png) no-repeat;position: absolute;left: 0;top: 0;}
.order_pross{width: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: flex-start;-webkit-justify-content: flex-start;}
.order_pross li{width: 280px;position: relative;}
.order_pross li h3{width: 121px;height: 121px;margin: 0 auto;}
.order_pross li p{padding-top: 22px;font-size: 20px;color: #47413c;line-height: 22px;text-align: center;}
.order_pross li:nth-of-type(1) h3{background: url(../img/dj1.png) no-repeat;}
.order_pross li:nth-of-type(2) h3{background: url(../img/dj2.png) no-repeat;}
.order_pross li:nth-of-type(3) h3{background: url(../img/dj3.png) no-repeat;}
.order_pross li:nth-of-type(4) h3{background: url(../img/dj4.png) no-repeat;}
.order_pross li:nth-of-type(5) h3{background: url(../img/dj5.png) no-repeat;}
.order_pross li.on:nth-of-type(1) h3{background: url(../img/dj1_h.png) no-repeat;}
.order_pross li.on:nth-of-type(2) h3{background: url(../img/dj2_h.png) no-repeat;}
.order_pross li.on:nth-of-type(3) h3{background: url(../img/dj3_h.png) no-repeat;}
.order_pross li.on:nth-of-type(4) h3{background: url(../img/dj4_h.png) no-repeat;}
.order_pross li.on:nth-of-type(5) h3{background: url(../img/dj5_h.png) no-repeat;}
.order_pross li.on:before{display: block;content: "";width: 103px;height: 71px;background: url(../img/order_success.png) no-repeat;position: absolute;right: 10px;top: 65px;}
.order_prosspic{width: 1662px;height: 734px;position: absolute;left: 0;top: 0;}
.order_prosspic li{width: 1662px;height: 734px;position: absolute;left: 0;top: 0;}
.order_prosspic li:nth-of-type(1){background: url(../img/dj1pic.png) no-repeat;}
.order_prosspic li:nth-of-type(2){background: url(../img/dj2pic.png) no-repeat;}
.order_prosspic li:nth-of-type(3){background: url(../img/dj3pic.png) no-repeat;}
.order_prosspic li:nth-of-type(4){background: url(../img/dj4pic.png) no-repeat;}
.order_prosspic li:nth-of-type(5){background: url(../img/dj5pic.png) no-repeat;}
.order_prosspic li.on:nth-of-type(1){background: url(../img/dj1_hpic.png) no-repeat;}
.order_prosspic li.on:nth-of-type(2){background: url(../img/dj2_hpic.png) no-repeat;}
.order_prosspic li.on:nth-of-type(3){background: url(../img/dj3_hpic.png) no-repeat;}
.order_prosspic li.on:nth-of-type(4){background: url(../img/dj4_hpic.png) no-repeat;}
.order_prosspic li.on:nth-of-type(5){background: url(../img/dj5_hpic.png) no-repeat;}

/* section3 */
.section3 {background-image: url(../img/bg3.jpg);}
.character_tit{display: none;}
.character_nav{width: 112px;height: 646px;position: absolute;left: 260px;top: 50%;margin-top: -323px;box-sizing: border-box;padding: 64px 0;}
.character_nav:before{display: block;content: "";width: 2px;height: 568px;background: url(../img/avatar_line.png) no-repeat;position: absolute;left: 50%;margin-left: -1px;top: 50%;margin-top: -284px;}
.character_nav .swiper-wrapper{flex-direction: column;transition: transform 0.3s !important;-webkit-transition: transform 0.3s !important;transition-duration: 0.3s !important;-webkit-transition-duration: 0.3s !important;}
.character_nav .swiper-button-prev{display: block;width: 38px;height: 38px;background: url(../img/prev.png) no-repeat;position: absolute;left: 50%;margin: 0;right: auto;margin-left: -19px;top: 0;}
.character_nav .swiper-button-next{display: block;width: 38px;height: 38px;background: url(../img/next.png) no-repeat;position: absolute;left: 50%;margin: 0;right: auto;top:auto;margin-left: -19px;bottom: 0;}
.character_nav .swiper-button-prev:after,.character_nav .swiper-button-next:after{display: none;}
.character_nav .swiper-wrapper{flex-direction: column;}
.character_navSwiper{width: 100%;height: 100%;position: relative;box-sizing: border-box;padding: 14px 0;}
.character_nav .swiper-slide{display: block;width: 100%;overflow: visible;height: 100px;margin-bottom: 30px;}
.role_avatar{display: block;width: 98px;height: 98px;margin: 0 auto;position: relative;background: url(../img/character/avatar/avatar_no.png) no-repeat;box-sizing: border-box;padding: 5px;}
.role_avatar img{display: block;width: 100%;}
.role_avatar:after{display: block;content: "";width: 98px;height: 98px;background: url(../img/character/avatar/avatar_mask.png) no-repeat;position: absolute;left: 0;top: 0;}
.character_nav .swiper-slide-active .role_avatar{background: url(../img/character/avatar/avatar_on.png) no-repeat;box-sizing: border-box;padding: 7px 5px 6px 8px;}
.character_nav .swiper-slide-active .role_avatar:after{width: 112px;height: 112px;background: url(../img/character/avatar/avatar_onicon.png) no-repeat;position: absolute;left: 50%;top: 50%;margin: -56px 0 0 -56px;}

.character_main,.character_role,.character_roleSwiper,.character_roleSwiper .swiper-wrapper,.character_roleSwiper .swiper-slide{width: 100%;height: 100%;overflow: visible;position: relative;}
.character_roleSwiper .swiper-slide{opacity: 0 !important;}
.character_roleSwiper .swiper-slide-active{opacity: 1 !important;}
.role_img{width: 100%;height: 1672px;position: absolute;left: 0;top: 50%;margin-top: -836px;}
.character_info{width: 100%;height: 100%;position: relative;}
.character_name{width: 1920px;height: 960px;position: absolute;left: 0;top: 0;}
.character_skill{width: 468px;height: auto;position: absolute;right: 380px;top: 425px;}
.skill_tabbtns{width: 418px;height: 110px;margin: 0 auto;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;}
.skill_tabbtns a{display: block;width: 81px;height: 81px;background: url(../img/character/skill/skill_no.png) no-repeat;box-sizing: border-box;padding: 6px;position: relative;}
.skill_tabbtns a img{display: block;width: 100%;border-radius: 50%;}
.skill_tabbtns a:before{display: block;content: "";width: 70px;height: 70px;position: absolute;left: 50%;margin-left: -35px;top: 50%;margin-top: -35px;background: rgba(0,0,0,0.3);border-radius: 50%;}
.skill_tabbtns a.curr{background: url(../img/character/skill/avatar_on.png) no-repeat;}
.skill_tabbtns a.curr:before{width: 97px;height: 107px;background: url(../img/character/skill/skill_onicon.png) no-repeat;box-sizing: border-box;left: -8px;top: -8px;margin: 0;}
.skill_cont{width: 467px;background: url(../img/character_txtbg1.png) no-repeat 50% 0;box-sizing: border-box;padding-top: 10px;}
.skill_contbg{width: 467px;background: url(../img/character_txtbg3.png) no-repeat 50% 100%;box-sizing: border-box;padding-bottom: 10px;}
.skill_info{width: 467px;background: url(../img/character_txtbg2.png) repeat;display: none;box-sizing: border-box;padding: 0 26px;font-size: 16px;color: #484848;line-height: 26px;text-align: left;}
.skill_info:nth-of-type(1){display: block;}
.skill_info h3{width: 100%;height: 90px;position: relative;}
.skill_info h3 span{font-weight: bold;line-height: 44px;font-size: 28px;}
.skill_info h3 p{line-height: 22px;}
.skill_info span{color: #c47a00;}
.skill_info h3:before{display: block;content: "";width: 415px;height: 5px;background: url(../img/character_line.png) no-repeat;position: absolute;left: 4px;bottom: 5px;}
.skill_info li{padding-left: 25px;position: relative;}
.skill_info li:before{display: block;content: "";width: 8px;height: 8px;background: #c3b89f;transform: rotate(45deg);position: absolute;left: 2px;top: 12px;}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{pointer-events: all;opacity: 1;}

/* section4 */
.section4 {background-image: url(../img/bg4.jpg);}
.feature_tit{display: none;}
.feature_cont{width: 1314px;height: 762px;background: url(../img/feature_main.png) no-repeat;position: absolute;left: 50%;margin-left: -657px;top: 50%;margin-top: -381px;box-sizing: border-box;padding: 72px 96px 83px 140px;}
.feature_cont:after{display: block;content: "";width: 63px;height: 61px;background: url(../img/feature_mainicon.png) no-repeat;position: absolute;left: 1178px;top: 57px;z-index: 9;}
.feature_Swiper{width: 100%;height: 100%;position: relative;overflow: hidden;border-top-right-radius: 20px;}
.feature_Swiper .swiper-slide{display: block;width: 100%;height: 100%;}
.feature_Swiper img{display: block;width: 100%;}
.feature_point{width: 122px;height: 512px;position: absolute;left: 0;top: 147px;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;-webkit-justify-content: center;flex-direction:column;-webkit-flex-direction:column;align-content: center;-webkit-align-content: center;}
.feature_point a{display: block;width: 122px;height: 108px;margin: 10px 0;}
.feature_point a:nth-of-type(1){background: url(../img/feature_choose1.png) no-repeat;}
.feature_point a:nth-of-type(2){background: url(../img/feature_choose2.png) no-repeat;}
.feature_point a:nth-of-type(3){background: url(../img/feature_choose3.png) no-repeat;}
.feature_point a:nth-of-type(4){background: url(../img/feature_choose4.png) no-repeat;}
.feature_point a.curr:nth-of-type(1){background: url(../img/feature_choose1h.png) no-repeat;}
.feature_point a.curr:nth-of-type(2){background: url(../img/feature_choose2h.png) no-repeat;}
.feature_point a.curr:nth-of-type(3){background: url(../img/feature_choose3h.png) no-repeat;}
.feature_point a.curr:nth-of-type(4){background: url(../img/feature_choose4h.png) no-repeat;}
.feature_cont .swiper-pagination{display: block;width: 100%;height: 20px;position: absolute;left: 0;bottom: 55px;}
.feature_cont .swiper-pagination .swiper-pagination-bullet{width: 20px;height: 20px;background: url(../img/feature_point.png) no-repeat;margin: 0 20px;opacity: 1;}
.feature_cont .swiper-pagination .swiper-pagination-bullet-active{background: url(../img/feature_pointh.png) no-repeat;}

/* section5 */
.section5 {background-image: url(../img/bg5.jpg);}
.news_main{width: 1450px;height: 714px;position: absolute;left: 50%;margin-left: -725px;top: 50%;margin-top: -357px;}
.news_tit{width: 399px;height: 106px;background: url(../img/news_tit.png) no-repeat;margin: 0 auto;text-indent: -999em;}
.news_cont{width: 1450px;height: 629px;background: url(../img/news_main.png) no-repeat;margin-top: -20px;box-sizing: border-box;padding: 95px 120px 73px 106px;}
.news_box{display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;width: 100%;height: 100%;overflow: hidden;}
.news_banner{width: 727px;height: 100%;position: relative;}
.newsbanner{width: 727px;height: 416px;position: relative;overflow: hidden;}
.newsbanner .swiper-slide a{display: block;width: 100%;height: 100%;background: url(../img/news_bannerbg.png) no-repeat;box-sizing: border-box;padding: 8px;}
.newsbanner .swiper-slide a div{width: 100%;height: 100%;overflow: hidden;}
.newsbanner .swiper-slide img{display: block;width: 100%;}
.news_banner .swiper-pagination{width: 100%;height: 24px;position: absolute;left: 0;bottom: 10px;}
.news_banner .swiper-pagination .swiper-pagination-bullet{width: 24px;height: 24px;background: url(../img/feature_point.png) no-repeat;background-size: 100% 100%;margin: 0 15px;opacity: 1;}
.news_banner .swiper-pagination .swiper-pagination-bullet-active{background: url(../img/feature_pointh.png) no-repeat;background-size: 100% 100%;}
.news_modules{width: 470px;height: 100%;}
.news_nav{width: 100%;height: 63px;border-bottom: 2px solid #dbd5c6;font-size: 0;}
.news_nav a{display: inline-block;vertical-align: top;width: 88px;height: 63px;font-size: 20px;color: #383838;line-height: 63px;text-align: center;font-weight: bold;margin-right: 10px;position: relative;}
.news_nav a:nth-of-type(1){text-align: left;width: 64px;}
.news_nav a.on{color: #df7f02;}
.news_nav a:after{display: block;content: "/";position: absolute;right: 88px;top: 0;font-weight: normal;color: #bab6ae;}
.news_nav a:nth-of-type(1):after{display: none;}
.news_nav a:hover{color: #df7f02;font-weight: bold;}
.news_section{width: 100%;position: relative;}
.news_section .btn_more{display: block;width: 77px;height: 39px;position: absolute;right: 0;top: -52px;text-indent: -999em;background: url(../img/btn_more.png) no-repeat;}
.news_section .btn_more:hover{background: url(../img/btn_moreh.png) no-repeat;}
.news_list{width: 100%;padding-top: 23px;}
.news_list li{width: 100%;height: auto;font-size: 18px;line-height: 48px;}
.news_list li a{font-size: 18px;color: #383838;line-height: 66px;text-align: left;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;}
.news_list li a em{display: none;}
.news_list li a p{width: 400px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news_list li a span{color: #383838;}
.news_list li a:hover,.news_list li a:hover span{color: #df7f02;}
.news_list li:nth-of-type(1) a{width: 492px;height: 68px;background: url(../img/news_listbg.png) no-repeat;box-sizing: border-box;padding: 0 30px 0 70px;display: flex;align-items: center;justify-content: center;position: relative;}
.news_list li:nth-of-type(1) a:before{display: block;content: "";width: 44px;height: 44px;background: #edb87d;border: 1px solid #f5f3ef;transform: rotate(45deg);position: absolute;left: 0;top: 50%;margin-top: -22px;}
.news_list li:nth-of-type(1) a em{display: block;width: 44px;height: 44px;position: absolute;left: 0;top: 50%;margin-top: -22px;font-size: 18px;color: #FFFFFF;line-height: 44px;text-align: center;font-weight: bold;}
.news_list li:nth-of-type(1) a p{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;white-space:normal;line-height: 24px;}
.news_list li:nth-of-type(1) a span{display: none;}

/* section6 */
.section6 {background-image: url(../img/bg6.jpg);}
.follow_main{width: 100%;height: 600px;position: absolute;left: 0;top: 50%;margin-top: -300px;z-index: 3;}
.follow_tit{width: 399px;height: 105px;background: url(../img/follow_tit.png) no-repeat;margin: 0 auto;text-indent: -999em;}
.share_list{width: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;-webkit-justify-content: center;margin-top: 120px;}
.share_list li{width: 160px;margin: 0 20px;}
.share_list a{display: block;position: relative;transition: transform 0.3s;-webkit-transition: transform 0.3s;width: 100%;}
.share_list a:hover{transform: translateY(10px);-webkit-transform: translateY(10px);filter: brightness(1.05);}
.share_list a i img{display: block;width: 100%;}
.share_list a div{width: 153px;height: 160px;background: url(../img/code_bg.png) no-repeat 50% 0/100% 100%;position: absolute;left: 50%;margin-left: -77px;top: 212px;box-sizing: border-box;padding: 12px 6px 7px 6px;display: none;-webkit-animation:fadeIn 1s .1s ease both;-moz-animation:fadeIn 0.3s .1s ease both;}
.share_list a div img{display: block;width: 100%;}
.share_list a:hover div{display: block;}
.share_list a i p{display: none;}
.share_list a i span{display: block;width: 100%;height: 40px;font-size: 20px;color: #31444b;line-height: 50px;text-align: center;font-weight: bold;}

/* section7 */
.section7 {height: auto !important;}
.footer {width: 100%;height: 216px;background: url(../img/footer.png) no-repeat;font-size: 14px;color: #7c7d7f;line-height: 22px;text-align: left;position: relative;box-sizing: border-box;padding-top: 15px;}
.footer p{width: 1200px;margin: 0 auto;}
.footer p a{color:#7c7d7f;text-decoration: none;}
.footer p a:hover{color: #aeafb1;}
.footer p img{display: inline-block;vertical-align: middle;}
.footer p:nth-of-type(4) a{margin: 0 8px;}
.footer p:nth-of-type(4) a:nth-of-type(1){margin-left: 0;}
.footer p:last-child{padding-top: 10px;}
.footer p:last-child img{margin-right: 5px;}

.arrow {position: absolute;left: 0;right: 0;bottom: 0px;margin: auto;width: 88px;height: 54px;background: url(../img/arrow.png) no-repeat 50% 100%;display: block;z-index: 10;}
.arrow {animation: arrowAnim 0.6s linear infinite alternate;-webkit-animation: arrowAnim 0.6s linear infinite alternate;}
@keyframes arrowAnim {
	0% {transform: translateY(0);-webkit-transform: translateY(0);}
	100% {transform: translateY(-10px);-webkit-transform: translateY(-10px);}
}
@-webkit-keyframes arrowAnim {
	0% {transform: translateY(0);-webkit-transform: translateY(0);}
	100% {transform: translateY(-10px);-webkit-transform: translateY(-10px);}
}

.cover{position: absolute;left: 0;top: 0;width: 100%;height: 100%;pointer-events: none;z-index: 10;}
.logo{display: block;width: 212px;height: 112px;background: url(../img/logo.png) no-repeat;position: absolute;left: 47px;top: 17px;text-indent: -999em;pointer-events: all;}
/*.btn_bgm{display: block;width: 44px;height: 44px;position: relative;background: url(../img/btn_paused.png) no-repeat;border-radius: 50%;box-shadow: 0 0 10px rgba(162,182,255,0.38);box-sizing: border-box;padding: 12px 12px 10px;display: flex;justify-content: space-between;align-items: flex-end;pointer-events: all;}
.btn_bgm:hover{filter: brightness(1.2);}
.btn_bgm i{display: none;}
.btn_bgm.playing{background: url(../img/btn_play.png) no-repeat;}
.btn_bgm.playing i{display: block;width: 3px;background:linear-gradient(to bottom, #f1f1f1, #cec3a7);animation: up-and-down 1.3s ease infinite alternate;}
.btn_bgm.playing i:nth-of-type(1){height: 10px;left: 12px;}
.btn_bgm.playing i:nth-of-type(2){height: 18px;left: 18px;animation-delay: -3.7s;}
.btn_bgm.playing i:nth-of-type(3){height: 13px;left: 24px;animation-delay: -1s;}
.btn_bgm.playing i:nth-of-type(4){height: 6px;left: 30px;animation-delay: -2.4s;}
@keyframes up-and-down{10% {height: 30%;}30% {height: 100%;}60% {height: 50%;}80% {height: 75%}100% {height: 20%;}}*/
.nav_main{width: 210px;height: 588px;position: absolute;right: 0;top: 50%;margin-top: -350px;pointer-events: all;background: url(../img/navbg.png) no-repeat;box-sizing: border-box;padding: 186px 6px 0 0;}
.nav{width: 100%;height: 354px;pointer-events: all;}
.nav a{display: block;width: 151px;height: 50px;position: relative;margin: 0 auto 12px;text-indent: -999em;}
.nav a:before{display: block;content: "";width: 125px;height: 7px;background: url(../img/nav_line.png) no-repeat;position: absolute;bottom: -10px;left: 50%;margin-left: -62.5px;pointer-events: none;}
.nav a:last-child:before{display: none;}
.nav a:nth-of-type(1){background: url(../img/nav_1.png) no-repeat;}
.nav a:nth-of-type(2){background: url(../img/nav_2.png) no-repeat;}
.nav a:nth-of-type(3){background: url(../img/nav_3.png) no-repeat;}
.nav a:nth-of-type(4){background: url(../img/nav_4.png) no-repeat;}
.nav a:nth-of-type(5){background: url(../img/nav_5.png) no-repeat;}
.nav a:nth-of-type(6){background: url(../img/nav_6.png) no-repeat;}
.nav a.on:nth-of-type(1){background: url(../img/nav_1h.png) no-repeat;}
.nav a.on:nth-of-type(2){background: url(../img/nav_2h.png) no-repeat;}
.nav a.on:nth-of-type(3){background: url(../img/nav_3h.png) no-repeat;}
.nav a.on:nth-of-type(4){background: url(../img/nav_4h.png) no-repeat;}
.nav a.on:nth-of-type(5){background: url(../img/nav_5h.png) no-repeat;}
.nav a.on:nth-of-type(6){background: url(../img/nav_6h.png) no-repeat;}
.nav a:nth-of-type(1):hover{background: url(../img/nav_1h.png) no-repeat;}
.nav a:nth-of-type(2):hover{background: url(../img/nav_2h.png) no-repeat;}
.nav a:nth-of-type(3):hover{background: url(../img/nav_3h.png) no-repeat;}
.nav a:nth-of-type(4):hover{background: url(../img/nav_4h.png) no-repeat;}
.nav a:nth-of-type(5):hover{background: url(../img/nav_5h.png) no-repeat;}
.nav a:nth-of-type(6):hover{background: url(../img/nav_6h.png) no-repeat;}
.nav_hide{display: block;width: 46px;height: 46px;background: url(../img/nav_hide.png) no-repeat;position: absolute;bottom: -8px;left: 81px;text-indent: -999em;}
.nav_hide:hover{filter: brightness(1.1);}
.nav_show{display: block;width: 48px;height: 86px;background: url(../img/nav_show.png) no-repeat;position: absolute;top: 50%;margin-top: -43px;right: 0px;text-indent: -999em;pointer-events: all;display: none;}
.nav_show:hover{filter: brightness(1.1);}

.btn_agetag{display: block;width: 56px;height: 73px;background: url(../img/agetag.png) no-repeat;position: absolute;right: 23px;bottom: 20px;pointer-events: all;}
.btn_agetag:hover{filter: brightness(1.05);}
.tag_copyright{display: block;width: 537px;height: 21px;background: url(../img/copyright.png) no-repeat;position: absolute;right: 88px;bottom: 20px;}

/* pop */
.pop_bg,.pop {animation: fadeIN 0.3s both;-webkit-animation: fadeIN 0.3s both;}
.pop_bg.off,.pop.off {animation: fadeOUT 0.3s both;-webkit-animation: fadeOUT 0.3s both;}
@keyframes fadeIN {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes fadeIN {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeOUT {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes fadeOUT {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.pop_bg {z-index: 999;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);display: none;}
.pop_bg.on {display: block;}
.pop {z-index: 1000;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;display: none;}
.pop.on {display: block;}
.p_close {position: absolute;right: -74px;top: 26px;width: 68px;height: 62px;background: url(../img/pop_close.png) no-repeat 50% 0;}
/*播放视频*/
.pop_video{width: 1280px;height: 720px;border: 2px solid #363a39;}
.pop_video .p_close{right: -70px;top: -5px;}
/*适龄提示*/
.pop_age{width: 1220px;height: 646px;background: url(../img/pop_age.png) no-repeat 50% 0;box-sizing: border-box;padding: 140px 55px 0 48px;}
.age_scroll{width: 100%;height: 100%;}
.age_list{width: 100%;margin: 0 auto;font-size: 18px;color: #31444b;line-height: 42px;text-align: left;}
.age_list li{padding-left: 15px;position: relative;}
.age_list li em{position: absolute;left: 0;top: 0;}

.pop_order {width: 592px;height: 483px;background: url(../img/pop_order.png) no-repeat 50% 0;box-sizing: border-box;padding: 100px 10px 0 10px;}
.register_box{width: 100%;height: 84px;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;-webkit-justify-content: center;align-content: center;align-items: center;box-sizing: border-box;padding-left: 100px;}
.register_box a{margin: 0 0;position: relative;text-indent: -999em;}
.register_box a:nth-of-type(1){display: block;width: 180px;height: 66px;background: url(../img/btn_Android.png) no-repeat 50% 0;}
.register_box a:nth-of-type(2){display: block;width: 180px;height: 66px;background: url(../img/btn_ios.png) no-repeat 50% 0;}
.register_box a.on:nth-of-type(1){display: block;width: 180px;height: 66px;background: url(../img/btn_Androidchoose.png) no-repeat 50% 0;}
.register_box a.on:nth-of-type(2){display: block;width: 180px;height: 66px;background: url(../img/btn_ioschoose.png) no-repeat 50% 0;}
.register_box a:nth-of-type(1):hover{display: block;width: 180px;height: 66px;background: url(../img/btn_Androidchoose.png) no-repeat 50% 0;}
.register_box a:nth-of-type(2):hover{display: block;width: 180px;height: 66px;background: url(../img/btn_ioschoose.png) no-repeat 50% 0;}

.register_list{width: 465px;margin: 0 auto;}
.register_list li{width: 100%;height: 53px;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;margin-bottom: 30px;}
.register_list li label{display: block;width: 74px;font-size: 18px;color: #31444b;line-height: 53px;text-align: left;}
.register_list li .code_cont{width: 391px;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: space-between;-webkit-justify-content: space-between;}
.phone_input{display: block;width: 391px;height: 53px;background: url(../img/phone_input.png) no-repeat;box-sizing: border-box;padding: 0 15px;text-align: left;font-size: 18px;color: #ffffff;line-height: 53px;border: none;border-radius: 0px;}
.phone_input::-webkit-input-placeholder {color: #ffffff;}
.phone_input:-ms-input-placeholder {color: #ffffff;}
.phone_input::placeholder {color: #ffffff;}
.code_input{display: block;width: 271px;height: 53px;background: url(../img/code_input.png) no-repeat;;box-sizing: border-box;padding: 0 15px;text-align: left;font-size: 18px;color: #ffffff;line-height: 53px;border: none;border-radius: 0px;}
.code_input::-webkit-input-placeholder {color: #ffffff;}
.code_input:-ms-input-placeholder {color: #ffffff;}
.code_input::placeholder {color: #ffffff;}
.btn_sendcode{display: block;width: 103px;height: 53px;background: url(../img/code_send.png) no-repeat 50% 0;font-size: 16px;color: #ffffff;line-height: 53px;text-align: center;}
.btn_sendcode:hover{filter: brightness(1.05);}
.countdown{display: block;width: 103px;height: 53px;background: url(../img/code_sendzhih.png) no-repeat 50% 0/100% 100%;font-size: 16px;color: #FFFFFF;line-height: 53px;text-align: center;}
.countdown i{font-style: normal;}
.pop_btns{width: 100%;display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;-webkit-justify-content: center;padding-top: 15px;}
.btn_popsubmit{display: block;width: 193px;height: 62px;text-indent: -999em;background: url(../img/btn_poporder.png) no-repeat 50% 0;margin: 0 auto 0;}
.btn_popsubmit:hover{filter: brightness(1.05);}
.btn_popsubmit.btn_popsubmitzhih{background: url(../img/btn_poporderzhih.png) no-repeat 50% 0;}


.pop_success{width: 592px;height: 483px;background: url(../img/pop_success.png) no-repeat 50% 0;box-sizing: border-box;padding: 0;text-indent: -999em;}
.pop_successed{width: 592px;height: 483px;background: url(../img/pop_successed.png) no-repeat 50% 0;box-sizing: border-box;padding: 0;text-indent: -999em;}

.pop_comm{width: 592px;height: 483px;background: url(../img/pop_comm.png) no-repeat 50% 0;box-sizing: border-box;padding: 98px 7px 31px 10px;}
.pop_text{width: 100%;height: 90%;display: flex;align-items: center;justify-content: center;font-size: 24px;color: #372c2c;line-height: 34px;text-align: center;}