html,body,div,ul,ol,li,span,p,a,b,i,img,h1,h2,h3,input,select,textarea{margin: 0; padding: 0; border: 0}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
html,body{ width: 100%; font-family: "MS gothic";}

body.load_in *{ transition: none!important }

.nav_btn{ position: absolute; top: .7rem; right: .7rem; width: 1.5rem; height: 1.15rem; z-index: 7;}
.nav_btn i{ width: 1.5rem; height: .175rem; border-radius: .175rem; background-color: #fff; display: block; position: absolute; top: 50%; margin-top: -.0875rem; opacity: 1; transition: .5s }
.nav_btn:before{width: 1.5rem; height: .175rem; border-radius: .175rem; background-color: #fff; display: block; content: ""; position: absolute; top: 0; left: 0; transition: .5s;  transform-origin: 0% 50%}
.nav_btn:after{width: 1.5rem; height: .175rem; border-radius: .175rem; background-color: #fff; display: block; content: ""; position: absolute; bottom: 0; left: 0; transition: .5s;  transform-origin: 0% 50%}
.nav_btn.close i{ opacity: 0 }
.nav_btn.close:before{ background-color: #1d1715; transform: rotate(43deg);}
.nav_btn.close:after{ background-color: #1d1715; transform: rotate(-43deg);}
.nav_box{ width: 100%; height: 24rem; position: absolute; top: 0; left: 0; z-index: 6; background-color: rgba(255,255,255,.95); transform: translateY(-24rem); transition: 1s;}
.nav_box .nav{ width: 14rem; margin: 0 auto; padding-top: 1.5rem; }
.nav_box .nav a{ width: 100%; height: 3rem; line-height: 3rem; text-align: center; font-size: .75rem; color: #1d1715; display: block; background-image: url(/style/img/m/nav_line.png); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom;}
.nav_box.show{ transform: translateY(0); }

.nav_box .soc_box{ padding: 1rem 0; text-align: center; }
.nav_box .soc_box a{ display: inline-block;padding: 0 .3rem; width: 1.2rem; position: relative;}
.nav_box .soc_box a img{ width: 100%;}
.nav_box .soc_box a:first-child{ width: 1.4rem;}

.ny_body .nav_btn i{ background: #000;}
.ny_body .nav_btn:before{ background: #000; }
.ny_body .nav_btn:after{ background: #000; }

.header{ width: 100%; height: 26.25rem; position: relative; overflow: hidden; background-image: url(/style/img/m/m_01.jpg); background-size: 100% 100%; z-index: 1;}
.header .logo{ width: 6rem; display: block; position: absolute; top: 3.5rem; right: 1rem; z-index: 3;}
.header .video_btn{ width: 3rem; display: block; position: absolute; top: 11.5rem; right: 3.5rem; z-index: 3;}
.header .yuyue_btn{ width: 12.375rem; display: block; position: absolute; top: 19.75rem; left: 50%; margin-left: -6.175rem; z-index: 3; transition: .5s;}
.header .download_box{ width: 100%; text-align: center; position: absolute; top: 20rem; left: 0; z-index: 3;}
.header .download_box a{ width: 5.65rem; display: inline-block; margin: 0 .2rem; }
.header .slogan{ display: block; position: absolute; top: 22.7rem; width: 12rem; left: 50%; margin-left: -6rem; z-index: 3;}
.header img{ display: block; pointer-events: none; width: 100%;}

.part_1{ width: 100%; height: 49.5rem; background-image: url(/style/img/m/m_02.jpg); background-size: 100% 100%; position: relative; overflow: hidden;}
.part_1 .news_box{ width: 14.5rem; margin: 0 auto; padding-top: 4.4rem; }
.part_1 .news_box .focus{ width: 14.5rem; height: 8.15rem; position: relative; overflow: hidden; margin: 0 auto;}
.part_1 .news_box .focus img{ width: 14.5rem; height: 8.15rem; display: block; }
.part_1 .news_box .news_tab{ width: 100%; height: 1.5rem; overflow: hidden; text-align: center; margin-top: .3rem; font-size: 0;}
.part_1 .news_box .news_tab a{min-width: 2.8rem; height: 1.5rem; line-height: 1.8rem; padding: 0 .2rem; overflow: hidden; text-align: center; display: inline-block; letter-spacing: -.15rem; font-weight: bold; font-size: .7rem; color: #282828;}
.part_1 .news_box .news_tab a.cur{ background-image: url(img/news_tab.png); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.part_1 .news_box .news_list{ margin-top: .3rem; width: 100%; height: 6rem;}
.part_1 .news_box .news_list ul li{ height: 1.5rem; line-height: 1.5rem; position: relative; padding: 0 .5rem;}
.part_1 .news_box .news_list ul li:last-child{ border-bottom: 0 }
.part_1 .news_box .news_list ul li a{ display: block; width: 100%; height: 100%; color: #282828; transition: .5s}
.part_1 .news_box .news_list ul li h1{ width: 10rem; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; font-weight: normal;}
.part_1 .news_box .news_list ul li p{ font-size: .6rem; line-height: .8rem; max-height: 1.6rem; margin: .25rem 0; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: none }
.part_1 .news_box .news_list ul li span{ display: block; font-size: .6rem; float: right;}
.part_1 .news_box .news_more{ display: block; width: 12.85rem; margin: 1.3rem auto; transition: .5s}
.part_1 .news_box .news_more img{ width: 100%; }
.part_1 .twitter_box{ width: 14.75rem; position: absolute; top: 27.5rem; left: 50%; margin-left: -7.375rem;}
.part_1 .twitter_box .twitter_iframe{width: 100%; height: 17.5rem; overflow: auto; }

.part_2{ width: 100%; height: 21rem; background-image: url(/style/img/m/m_03.jpg); background-size: 100% 100%; position: relative; overflow: hidden; overflow: hidden;}
.part_2 .ts{ width: 100%; height: 100%; position: absolute; top: 3.5rem; left: 0 }
.part_2 .ts .ts_img{ width: 14.5rem; margin: 0 auto; display: block; opacity: 0; transform: translateX(20px); transition: .2s .5s}
.part_2 .ts .ts_txt{ width: 100%; display: block; margin: 0 auto; padding-top:.5rem; transform: translateX(20px); opacity: 0; transition:.2s .5s }
.part_2 .ts .slide.flex-active-slide .ts_img{ opacity: 1; transform: translateX(0px);  transition:.5s.5s}
.part_2 .ts .slide.flex-active-slide .ts_txt{ opacity: 1; transform: translateX(0px);  transition: .7s .5s}

.part_2 .ts .flex-control-paging { width:100%; display:inline-block; position:absolute; top:14.3rem; text-align:center; z-index: 2}
.part_2 .ts .flex-control-paging li { display:inline-block;margin:0 0.15rem;}
.part_2 .ts .flex-control-paging li a {width:.35rem; height:.35rem;border: 1px #6ea6b8 solid; display:block; background-repeat:no-repeat; background:#6ea6b8; border-radius:20px; text-indent:-9000px; cursor:pointer;}
.part_2 .ts .flex-control-paging li a.flex-active { background:#fff; border: 1px #6ea6b8 solid;}

.part_2 .ts .flex-direction-nav { width:100%; height: 5.25rem; z-index: 4; position: absolute; top: 50%; z-index: 4}
.part_2 .ts .flex-direction-nav li{ overflow: inherit!important }
.part_2 .ts .flex-direction-nav a {width:1.3rem; height:5.25rem; display:block; position:absolute; background-repeat:no-repeat; background-image:url(/style/img/m/ts_arrow.png); text-indent:-9000px; background-size: 200% 100%; transition:transform .5s; top: -8rem;}
.part_2 .ts .flex-direction-nav a.flex-prev {left:.5rem; background-position: left;}
.part_2 .ts .flex-direction-nav a.flex-next {right:.5rem; background-position: right;}

.part_3{ width: 100%; height: 26.5rem; background-image: url(/style/img/m/m_04.jpg); background-size: 100% 100%; position: relative; overflow: hidden;}
.part_3 img{ pointer-events: none; }
.part_3 .role_box{ width: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
.part_3 .role_box .role_info{ position: absolute; top: 4rem; left: 0; width: 100%; opacity: 0; transform: translateX(50px); transition: .5s; will-change:transform; z-index: 3}
.part_3 .role_box .role_img{ position: absolute; top: 1rem; left: 5rem; width: 21rem; z-index: 2;opacity: 0; transform: translateX(50px); transition: .5s .2s; will-change:transform;}
.part_3 .role_box .role_audio{ width: 1.4rem; height: 1.3rem; display: block; background-image: url(img/role/role_audio.png); background-size: 100% 100%; position: absolute; top: 8rem; left: 9.25rem; z-index: 4; opacity: 0; transform: translateX(50px); transition: .5s .1s; will-change:transform;}
.part_3 .role_box .role_audio i{ width: .35rem; height: .575rem; display: block; position: absolute; top: .35rem; left: .45rem; background-image: url(img/role/role_audio_i.png); background-size: 400% 100%; background-position: -.7rem 0; }
.part_3 .role_box .role_audio.playing i{ animation:Playing .8s steps(3) infinite; }
.part_3 .role_box.hide .role_info{ opacity: 0; transform: translateX(-50px); transition: .5s}
.part_3 .role_box.hide .role_img{ opacity: 0; transform: translateX(-50px); transition: .5s .2s }
.part_3 .role_box.hide .role_audio{ opacity: 0; transform: translateX(-50px); transition: .5s .1s }
.part_3 .role_box.show .role_info{ opacity: 1; transform: translateX(0); transition: .5s}
.part_3 .role_box.show .role_img{ opacity: 1; transform: translateX(0); transition: .5s .2s}
.part_3 .role_box.show .role_audio{ opacity: 1; transform: translateX(0); transition: .5s .1s }

@-webkit-keyframes Playing {
	from { background-position-x:0; }
	to { background-position-x:100%; }
}
@keyframes Playing {
	from { background-position-x:0; }
	to { background-position-x:100%; }
}
.part_3 .role_tab_box{ width: 100%; position: absolute; top: 21rem; left: 0; z-index: 5;}
.part_3 .role_tab_box .role_prev{ width: .875rem; height: 2rem; display: block; background-image: url(img/role/arrow.png); background-size: 200% 100%; position: absolute; top: 0; left: .5rem; z-index: 3; transition: .5s }
.part_3 .role_tab_box .role_prev:hover{ transform: translateX(-5px); }
.part_3 .role_tab_box .role_next:hover{ transform: translateX(5px); }
.part_3 .role_tab_box .role_next{ width: .875rem; height: 2rem; display: block; background-image: url(img/role/arrow.png); background-size: 200% 100%; background-position: right; position: absolute; top: 0; right: .5rem; transition: .5s }
.part_3 .role_tab_box .role_tab{ width: 15rem; margin: 0 auto; position: relative; z-index: 2; overflow: hidden;}
.part_3 .role_tab_box .role_tab ul{ width: 50rem; transition: .5s}
.part_3 .role_tab_box .role_tab ul li{ width: 4.75rem; height: 2rem; float: left; margin: 0 .125rem; background-image: url(img/role/tab_bg.png); background-size: 100% 200%; background-position: top; position: relative; overflow: hidden; cursor: pointer;}
.part_3 .role_tab_box .role_tab ul li .role_name{ z-index: 2; position: absolute; top: 0; left: 0; width: 100%;}
.part_3 .role_tab_box .role_tab ul li .role_cover{ position: absolute; bottom: 0; left: -.5rem; z-index: 1; width: 3.25rem; }
.part_3 .role_tab_box .role_tab ul li.cur{ background-position: bottom; }
.part_3 .role_tab_box .role_tab ul li:hover{ background-position: bottom; }

.part_4{ width: 100%; height: 21rem; background-image: url(/style/img/m/m_05.jpg); background-size: 100% 100%; position: relative;  overflow: hidden;}

.part_5{ width: 100%; height: 41.825rem; margin-bottom: 6rem; background-image: url(/style/img/m/m_06.jpg); background-size: 100% 100%; position: relative; overflow: hidden;}
.part_5 .ap_box{ width: 16rem; margin: 0 auto; padding-top: 4.25rem; overflow: hidden;}
.part_5 .ap_box ul{ width: 17rem; }
.part_5 .ap_box ul li{ width: 7.5rem; height: 4.75rem; float: left; margin:0 1rem .5rem 0; border: .01rem #bd9e92 solid; background-color: #000; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; }
/*.part_5 .ap_box ul li:before{ content: ""; display: block; width: 7.13rem; height: 4.36rem; border: .01rem #727173 solid; position: absolute; top: .1rem; left: .1rem; z-index: 3 }*/
.part_5 .ap_box ul li .ap_img{ width: 100%; height: 100%; display: block; transition: .5s;}
.part_5 .ap_box ul li .ap_title{ width: 100%; position: absolute; bottom: 0; left: 0; height: 1.5rem; line-height: 1.5rem; background-image: url(img/ap_title_mask.png); background-size: 100% 100%; }
.part_5 .ap_box ul li .ap_title:before{ width: .275rem; height: .325rem; content: ""; display: block; background-image: url(img/ap_ico_3.png); background-size: 100% 100%; position: absolute; top:.525rem; left: .4rem;}
.part_5 .ap_box ul li .ap_title span{ padding-left: 1rem; font-size: .5rem; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; width: 85%;}
.part_5 .ap_box ul li i{ width: .45rem; height: .525rem; display: block; background-image: url(img/ap_ico_1.png); background-size: 100% 100%; position: absolute; top: 50%; margin-top: -.5rem; left: 50%; margin-left: -.225rem; z-index: 4; }
.part_5 .ap_box ul li:first-child{ width: 16rem; height: 10rem; }
.part_5 .ap_box ul li:first-child:before{ width: 15.63rem; height: 9.6rem; }
.part_5 .ap_box ul li:first-child i:after{ width: 2.325rem; height: 2rem; display: block; transform-origin: 48% 39%;  content: ""; background-image: url(img/ap_ico_2.png); background-size: 100% 100%; position: absolute; top: 50%; margin-top: -.75rem; left: 50%; margin-left: -1.2rem; z-index: 6; transition: .6s}
.part_5 .ap_more{ width: 12.85rem; display: block; margin: 1rem auto; transition: .5s; }
.part_5 .ap_more img{ width: 100%; }

.part_5 .lingdang{ width: 5rem; height: 5rem; background-image: url(img/lingdang.png); background-size: 2000% 100%; position: absolute; top: 25.2rem; left: -1rem; animation:Playing 1.5s steps(19) infinite; }

.footer{ width: 100%; height: 25rem; background-image: url(img/m/footer_bg.png); background-size: 100% auto; background-position: top center; margin: -15rem auto; position: relative; z-index: 2; }
.footer .game_info{ display: block; margin: 0 auto; padding-top: 7rem; padding-left: 1.2rem; position: relative; width: 11.5rem;}
.footer .foot_info{ padding: 1rem 0 .5rem; width: 96%; margin: 1rem auto 0; border-top: 1px #000 solid; text-align: center; font-size: .6rem; color: #000; position: relative; line-height: 1rem;s}
.footer .foot_info a{ color: #000; padding: 0 .1rem; display: inline-block; white-space: nowrap;}
.footer .foot_info a:hover{ color: #81c4d7 }
.footer .foot_info a:first-child{ padding-left: 0 }
.footer .foot_info .share_box{ margin: 0 auto; text-align: center; padding-top: .5rem }
.footer .foot_info .share_box img{ display: inline-block; margin-top: -3px; vertical-align: middle; transition: .5s }
.footer .foot_info .share_box img:hover{ transform: translateY(-3px); }
.footer .back_top{ display: block; position: absolute; top: 8rem; right: 1rem; transition: .5s; width: 2rem;}
.footer .back_top img{ width: 100%; display: block;}

.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 8; background-color: rgba(0,0,0,.8); display: none}

.pop_video{ width:14.15rem; height:7.85rem; position:fixed; top:20%; left:50%; margin-left:-7.2rem; z-index:11; padding:0.125rem; background:#666; display:none;}
.pop_video .video_close{ width:0.75rem; height:0.75rem; position:absolute; top:-1.2rem; right:0; display:block; z-index:5}
.pop_video .video_close img{ transition:all ease .5s; width:100%;}
.pop_video .video_close:hover img{ transform:rotate(360deg);}
.pop_video iframe{ width:14.15rem; height:7.85rem;}

.ny_body .footer{ width: 100%; height: 25rem; background-image:none; background-size: 100% auto; background-position: top center; margin: -15rem auto; position: relative; z-index: 2; }

.ny_header{ width: 100%; height: 6.5rem; position: relative; background-image: url(img/m/ny_header.jpg); background-size: 100% 100%;}
.ny_header .logo{ display: block; margin: 0 auto; width: 5.5rem; pointer-events: none;}
.ny_wrapper{ width: 100%; margin: 0 auto 10rem; background-color: #fff; min-height: 10rem; position: relative;}
.ny_t{ display: block; margin: 0 auto; padding-top: 40px; width: 17.5rem}
.ny_news_tab{ width: 100%; height: 1.5rem; overflow: hidden; text-align: center;}
.ny_news_tab a{min-width: 3rem; height: 1.5rem; line-height: 1.8rem; padding: 0 .2rem; overflow: hidden; text-align: center; display: inline-block; letter-spacing: -.1rem; font-weight: bold; font-size: .75rem; color: #282828;}
.ny_news_tab a.cur{ background-image: url(img/news_tab.png); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.ny_news_list{ width: 100%; padding: 1rem 0; position: relative; z-index: 5 }
.ny_news_list ul li{ padding: .5rem 0; height: 4rem; position: relative; overflow: hidden; transition: .5s }
.ny_news_list ul li h1{ font-size: .7rem; color: #282828; width: 12rem; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; padding-left: 1rem; }
.ny_news_list ul li .news_intro{ width: 16.75rem; padding-top: .5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: .6rem; color: #282828; border-top: 1px #bce2ed solid; margin: .5rem auto; }
.ny_news_list ul li span{ position: absolute; top: .5rem; right: 1rem; font-size: .6rem; color: #282828; }
.ny_news_list ul li:after{ content: ""; display: block; width: 2.675rem; height: .7rem; background-image: url(img/news_arrow_1.png); background-size: 100% 100%; position: absolute; bottom: .5rem; right: 1rem; }

.ny_wrapper .news_back{ width: 2rem; display: block; position: absolute; top: .5rem; left: 1rem; transition: .5s }
.ny_wrapper .news_back img{ width: 100%; display: block; }

.ny_news_content{ padding: 1rem }
.ny_news_content .news_title{ text-align: center; border-bottom: 1px #f1f1f1 dashed; position: relative; padding-top: 2rem}
.ny_news_content .news_title h1{ font-size: .75rem; color: #282828; display: block; width: 17rem; display: block; margin: 0 auto; line-height: 1rem;}
.ny_news_content .news_title span{ font-size: .55rem; color: #282828; display: block; line-height: 1.5rem; }
.ny_news_content .news_title .news_back{ width: 2rem; display: block; position: absolute; top: 0; left: 0; transition: .5s }
.ny_news_content .news_title .news_back img{ width: 100%; display: block; }
.ny_news_content .content{ padding: 1rem 0; font-size: .6rem; color: #282828; line-height: 1rem; }
.ny_news_content .content *{ font-size: .6rem!important; line-height: 1rem!important; max-width: 100%; }
.ny_news_content .content img{ display: block; margin: 0 auto; height: auto!important; width: auto!important; }

@media only screen and (min-aspect-ratio: 1/1){
	.ny_news_content .news_title{ text-align: center; border-bottom: 1px #f1f1f1 dashed; position: relative; padding-top: 1rem}
	.ny_news_content .news_title h1{ font-size: .65rem; color: #282828; display: block; width: 17rem; display: block; margin: 0 auto; line-height: 1rem;}
	.ny_news_content .news_title span{ font-size: .35rem; color: #282828; display: block; line-height: 1rem; }

	.ny_news_content .content{ padding: 1rem 0; font-size: .45rem; color: #282828; line-height: .8rem; }
	.ny_news_content .content *{ font-size: .45rem!important; line-height: .8rem!important; max-width: 100%; }
	.ny_news_content .content img{ display: block; margin: 0 auto; }

}

.ny_wrapper .ap_box{ width: 16rem; margin: 0 auto; padding-top: 1.25rem; overflow: hidden;}
.ny_wrapper .ap_box ul{ width: 17rem; }
.ny_wrapper .ap_box ul li{ width: 7.5rem; height: 4.75rem; float: left; margin:0 1rem .5rem 0; border: .01rem #bd9e92 solid; background-color: #000; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; }
/*.ny_wrapper .ap_box ul li:before{ content: ""; display: block; width: 7.13rem; height: 4.36rem; border: .01rem #727173 solid; position: absolute; top: .1rem; left: .1rem; z-index: 3 }*/
.ny_wrapper .ap_box ul li .ap_img{ width: 100%; height: 100%; display: block; transition: .5s;}
.ny_wrapper .ap_box ul li .ap_title{ width: 100%; position: absolute; bottom: 0; left: 0; height: 1.5rem; line-height: 1.5rem; background-image: url(img/ap_title_mask.png); background-size: 100% 100%; }
.ny_wrapper .ap_box ul li .ap_title:before{ width: .275rem; height: .325rem; content: ""; display: block; background-image: url(img/ap_ico_3.png); background-size: 100% 100%; position: absolute; top:.525rem; left: .4rem;}
.ny_wrapper .ap_box ul li .ap_title span{ padding-left: 1rem; font-size: .5rem; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; width: 85%;}
.ny_wrapper .ap_box ul li i{ width: .45rem; height: .525rem; display: block; background-image: url(img/ap_ico_1.png); background-size: 100% 100%; position: absolute; top: 50%; margin-top: -.5rem; left: 50%; margin-left: -.225rem; z-index: 4; }

.m_hidden{ display: none }

.pagenum_Me{width:100%; height:0.5rem; margin:0 auto; padding: 0.45rem 0; font-size: 0.5rem; position: relative; z-index: 6;}
.pagenum_Me ul{ text-align:center; list-style:none}
.pagenum_Me ul li{position: relative; display:inline; padding: 0.1rem 0 0.075rem; margin: 0px 0.075rem; border: 1px solid #D6D6D6; color:#cdcdcd}
.pagenum_Me ul li a{padding:0 0.2rem;  text-decoration:none; color:#cdcdcd;}
.pagenum_Me ul li a:hover{text-decoration:underline}
.pagenum_Me .selected{position: relative; padding: 0.1rem 0 0.075rem; margin: 0px 0.075rem; font-weight: bold; border: 1px solid #1297DC; background: #74C7F3;}
.pagenum_Me .selected a{padding:0 0.2rem; text-decoration:none; color:#fff}

.fireworks{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10;  mix-blend-mode: screen;}
.fireworks video{ width: 100%; }