@charset "utf-8";
body{ margin:0; padding:0; font-size:0.14rem; font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif;-webkit-text-size-adjust:none; overflow: hidden; background-color: #1e1e1e;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
img{ border:0;}
ol,ul{list-style:none;}
a{ font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif;text-decoration:none;outline:none; cursor:pointer;}
a:hover{ text-decoration:none;}
span{outline:none;}

/* loading */
.loading_box{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; z-index: 100;}
.loading_gif{ position: absolute; width: 4.8rem; height: 2.7rem; left: 50%; top: 50%; margin-left: -2.4rem; margin-top: -1.35rem; background: url(https://p5xvmg.perfectworld.com/webops/p5x/p5xkr_walk_960.gif); background-size: 100% auto;}

.wrap{ position:relative; width:25.6rem; overflow: hidden;}
/* head */
.section_head{ position:relative; width:25.6rem; height: 14.4rem; background: url(https://p5x.perfectworld.com/images/main2403/section_head_bg.jpg) center top no-repeat; background-size: 100% auto;}
.head_video{ display: none; position: relative; width: 100%; height: 100%;}
.head_video video{ width: 100%; height: 100%; object-fit: cover;}
.scroll_tip_box{ position: absolute; width: 25.6rem; height: 2.28rem; left: 0; top: 12.84rem; background: url(https://p5x.perfectworld.com/images/main2403/head_line.png); background-size: 100% auto;}
.scroll_tip{ position: absolute; width: 1.07rem; height: 0.7rem; left: 50%; margin-left: -0.54rem; top: 0.46rem;background: url(https://p5x.perfectworld.com/images/main2403/scroll_tip.png); background-size: 100% auto; animation: key_scroll 1s infinite alternate;-webkit-animation: key_scroll 1s infinite alternate;-ms-animation: key_scroll 1s infinite alternate;}
@keyframes key_scroll{
	0%{ transform: translate3d(0,0,0)}
	100%{ transform: translate3d(0,0.2rem,0)}
}
@-webkit-keyframes key_scroll{
	0%{ -webkit-transform: translate3d(0,0,0)}
	100%{ -webkit-transform: translate3d(0,0.2rem,0)}
}
@-ms-keyframes key_scroll{
	0%{ -ms-transform: translate3d(0,0,0)}
	100%{ -ms-transform: translate3d(0,0.2rem,0)}
}
.logo{ position: absolute; width: 2.41rem; right: 3rem; top: 0.63rem;}

.top_menu{ position: absolute; width: 2.9rem; height: 0.5rem; right: 0; top: 0.9rem;}
.menu_switch{ position: relative; float: left; width: 0.46rem; height: 0.46rem; margin-right: 0.08rem; transition: transform 0.4s;-webkit-transition: transform 0.4s; -ms-transition: transform 0.4s; cursor: pointer;}
.menu_login{ height: 0.5rem; background: url(https://p5x.perfectworld.com/images/main2403/icon_login.png); background-size: 100% auto;}
.menu_share{ background: url(https://p5x.perfectworld.com/images/main2403/icon_copy.png); background-size: 100% auto;}
.menu_sns{ background: url(https://p5x.perfectworld.com/images/main2403/icon_sns.png); background-size: 100% auto;}
.menu_music{ background: url(https://p5x.perfectworld.com/images/main2403/btn_music_on.png); background-size: 100% auto;}
.menu_music.off{ background: url(https://p5x.perfectworld.com/images/main2403/btn_music_off.png); background-size: 100% auto;}
.menu_switch:hover{ transform: scale(1.1); }
.menu_open{ display: none;  position: absolute; top: 0.3rem; left: 50%; transform: translate(-50%,0);}
.menu_cont{ position: relative; margin-top: 0.3rem; background: #212121; border-radius: 0.1rem; padding: 0.2rem 0.05rem; box-sizing: border-box; }
.menu_cont:after{ content: ""; position: absolute; top: -0.07rem; left: 50%; transform: translate(-50%,0) rotate(45deg); width: 0.15rem; height: 0.15rem; background: #212121; }
.menu_login_cont{ width: 1.60rem; font-size: 0.18rem; }
.menu_login_cont p{ margin-bottom: 0.1rem; text-align: center; color: #FFF; }
.sign_in,.sign_out{ display: block; width: 1rem; height: .3rem; margin: 0 auto; background: url(https://p5x.perfectworld.com/images/index240417/btn_login_pop.jpg); background-size: 100% auto; border-radius: 0.06rem; cursor: pointer;}
.sign_out{background: url(https://p5x.perfectworld.com/images/main2403/btn_logout_pop.png); background-size: 100% auto;}
.menu_share img{ display: none; position: absolute; height: .39rem; left: 50%; top: 0.5rem; transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); -ms-transform: translate3d(-50%,0,0);}
.menu_sns_cont{ width: 1.5rem; height: 1.5rem; padding: 0.2rem 0.15rem;}
.menu_sns_cont img{ float: left; width: 0.43rem; height: 0.44rem; margin: 0.05rem 0.08rem;}
.menu_switch:hover .menu_open{ display: block; }

.pv_box{ position: absolute; width: 2rem; height: 2rem; left: 50%; top: 5.4rem; margin-left: -1rem;}
.pv_box span{ display: none; position: absolute; width: 0.99rem; height: 0.99rem; left: 0.5rem; top: 0.5rem; background: url(https://p5x.perfectworld.com/images/main2403/btn_play.png); background-size: 100% auto; cursor: pointer;}
.pv_box:hover span{ display: block;}
.slogan{ position: absolute; width: 6.42rem; left: 50%; margin-left: -3.21rem; top: 8.1rem;}

.head_btn_wrap{ position: absolute; width: 6.1rem; height: 1.2rem; padding-right: 1.2rem; left: 50%; margin-left: -3.65rem; top: 10.39rem;}
.download_a,.btn_apk{ float: left; width: 1.75rem; height: 0.51rem; margin: 0 0.28rem 0.13rem 0;}
.btn_google{ background: url(https://p5x.perfectworld.com/images/index240418/btn_google.png); background-size: 100% auto;}
.btn_appstore{ background: url(https://p5x.perfectworld.com/images/index240418/btn_appstore.png); background-size: 100% auto;}
.btn_full{ position: relative; background: url(https://p5x.perfectworld.com/images/index240502/btn_full.png); background-size: 100% auto;}
.btn_full img{ display: none; position: absolute; width: 4.2rem; left: 50%; margin-left: -2.1rem; top: -0.42rem;}
.btn_full:hover img{ display: block;}

.btn_onestore{ background: url(https://p5x.perfectworld.com/images/index240502/btn_onestore.png); background-size: 100% auto;}
.btn_galaxystore{ background: url(https://p5x.perfectworld.com/images/index240502/btn_galaxystore.png); background-size: 100% auto;}
.btn_apk{ position: relative;}
.tag_apk{ position: absolute; width: 100%; height: 100%; background: url(https://p5x.perfectworld.com/images/index240418/btn_apk.png); background-size: 100% auto; left: 0; top: 0; z-index: 2;}
.apk_pop{ display: none; position: absolute; width: 1.77rem; height: 2.05rem; left: -0.01rem; bottom: 0.25rem; background: url(https://p5x.perfectworld.com/images/index240418/apk_pop_bg.png); background-size: 100% auto;}
.btn_apk:hover .apk_pop{ display: block;}
.apk_pop a{ display: block; width: 1.54rem; height: .45rem; margin: 0.11rem auto 0;}
.btn_apk_ld{ background: url(https://p5x.perfectworld.com/images/index240418/btn_apk_ld.png); background-size: 100% auto;}
.btn_apk_bs{ background: url(https://p5x.perfectworld.com/images/index240418/btn_apk_bs.png); background-size: 100% auto;}
.apk_pop a.btn_apk_nox{ width: 1.53rem; height: .46rem; background: url(https://p5x.perfectworld.com/images/index240418/btn_apk_nox.png); background-size: 100% auto;}

.btn_windows{ position: absolute; width: 1.19rem; height: 1.18rem; margin: 0; right: 0; top: 0; background: url(https://p5x.perfectworld.com/images/index240418/btn_pc.png); background-size: 100% auto;}
.windows_tip{ display: none; position: absolute; width: 4.25rem; left: -0.5rem; bottom: -0.4rem;}

.btn_ytb{ position: absolute; width: 2.51rem; height: 2.59rem; right: 1.34rem; top: 2.34rem; background: url(https://p5x.perfectworld.com/images/index240710/btn_ytb.png); background-size: 100% auto; }

.body_wrap{ width: 25.6rem; height: 58.79rem; background: url(https://p5x.perfectworld.com/images/main2403/body_bg.jpg); background-size: 100% auto;}
/* event */
.section_event{ position: relative; width: 25.6rem; height: 12.97rem;}
.event_title{ position: absolute; width: 3rem; height: 2.45rem; left: .54rem; top: 1.87rem; background: url(https://p5x.perfectworld.com/images/index240502/event_t.png); background-size: 100% auto;}
.event_cont_wrap{ position: absolute; width: 22.51rem; height: 8.49rem; right: 0; top: 3.6rem; background: url(https://p5x.perfectworld.com/images/index250619/event_cont_bg.png); background-size: 100% auto;}
.event_niao{ position: absolute; width: 5.39rem; height: 4.8rem; right: 1.88rem; top: -0.5rem; background: url(https://p5x.perfectworld.com/images/index240502/niao.png); background-size: 100% auto;}
.event_img{ position: absolute; width: 12.35rem; left: 2.44rem; top: 0.43rem;}
.event_text_box{ position: absolute; width: 5.75rem; height: 3.04rem; left: 15.68rem; top: 4.75rem;}
.event_text_title{ width: 5.04rem; height: 0.8rem; font-size: 0.46rem; font-weight: bold; line-height: 0.56rem; color: #252525; text-shadow: #fff 0.03rem 0 0, #fff 0 0.03rem 0, #fff -0.03rem 0 0, #fff 0 -0.03rem 0; background: url(https://p5x.perfectworld.com/images/index240502/event_text_title.png) center bottom no-repeat; background-size: 100% auto;}
.event_text_box ul{ margin-top: 0.3rem; font-size: 0.22rem; line-height: 0.32rem; color: #252525;}
.event_text_box li{ position: relative;}
.event_text_box li::after{ content: ""; position: absolute; top: 0.1rem; left: -0.2rem; width: .1rem; height: .13rem; background: url(https://p5x.perfectworld.com/images/index240808/arrow.png) no-repeat 0 0; background-size: 100% auto;}
/* role */
.section_role{ position: relative; width: 25.6rem; height: 10.25rem;}
.role_title{ position: absolute; width: 4.73rem; height: 1.96rem; top: 0.6rem; right: 0.52rem; background: url(https://p5x.perfectworld.com/images/main2403/role_title.png); background-size: 100% auto;}
.role_cont_wrap{ position: absolute; width: 25.6rem; height: 10.25rem; left: 0; top: 0; background: url(https://p5x.perfectworld.com/images/main2403/role_box_bg.png); background-size: 100% auto;}
.role_tab{ position: absolute; width: 2.41rem; left: 3.46rem; top: 2.28rem; z-index: 2;}
.role_tab li{ position: relative; width: 2.41rem; height: 2.52rem; margin-bottom: 0.16rem; cursor: pointer;}
.role_tab li div{ position: relative; width: 100%; height: 100%; z-index: 2;}
.role_tab1{background: url(https://p5x.perfectworld.com/images/main2403/role_tab1.png); background-size: 100% auto;}
.role_tab2{background: url(https://p5x.perfectworld.com/images/main2503/role_tab2.png); background-size: 100% auto;}
.role_tab3{background: url(https://p5x.perfectworld.com/images/main2403/role_tab3.png); background-size: 100% auto;}
.role_tab li span{ display: none; position: absolute; width: 3.07rem; height: 1.88rem; left: -0.56rem; bottom: 0; background: url(https://p5x.perfectworld.com/images/main2403/role_tab_on.png); background-size: 100% auto;}
.role_tab li.on span{ display: block;}
.role_cont{ display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.role_team1{ position: absolute; width: 17.23rem; height: 9.74rem; left: 5.81rem; bottom: 0; background: url(https://p5x.perfectworld.com/images/main2403/role_team1.png); background-size: 100% auto;}
.role_team2{ position: absolute; width: 19.21rem; height: 8.5rem; left: 2.82rem; bottom: 0; background: url(https://p5x.perfectworld.com/images/main2403/role_team2.png) no-repeat; background-size: 100% auto;}
.role_team3{ position: absolute; width: 18.9rem; height: 8.1rem; left: 4.62rem; bottom: 0; background: url(https://p5x.perfectworld.com/images/main2403/role_team3.png) no-repeat; background-size: 100% auto;}
.role_team1 a,.role_team2 a,.role_team3 a{ position: absolute; bottom: 0;}
.role_team1 .role_item1{ width: 6.35rem; height: 8.3rem; left: 0;}
.role_team1 .role_item2{ width: 5.4rem; height: 9.74rem; left: 6.6rem;}
.role_team1 .role_item3{ width: 5.1rem; height: 6.8rem; right: 0;}
.role_team2 .role_item1{ width: 3.95rem; height: 7.4rem; left: 3.55rem;}
.role_team2 .role_item2{ width: 7.6rem; height: 8.5rem; left: 7.73rem;}
.role_team2 .role_item3{ width: 3.32rem; height: 4.95rem; right: 0;}
.role_team3 .role_item1{ width: 5.44rem; height: 6.88rem; left:0;}
.role_team3 .role_item2{ width: 6.2rem; height: 8.16rem; left: 5.76rem;}
.role_team3 .role_item3{ width: 5.7rem; height: 6.67rem; right: 0;}
.role_more{ position: absolute; width: 2.2rem; height: 0.91rem; left: 19.52rem; top: 2.5rem; background: url(https://p5x.perfectworld.com/images/main2403/role_more.png); background-size: 100% auto;}
.role_more:hover{ background-position: 0 -0.91rem;}
/* about */
.section_about{ position: relative; width: 25.6rem; height: 12.02rem;}
.about_title{ position: absolute; width: 2.44rem; height: 1.96rem; top: 1.34rem; left: 0.5rem; background: url(https://p5x.perfectworld.com/images/main2403/about_title.png); background-size: 100% auto;}
.about_cont_wrap{ position: absolute; width: 22rem; height: 9.66rem; right: 0; top: 2.35rem; background: url(https://p5x.perfectworld.com/images/index240418/about_cont_bg.png); background-size: 100% auto;}
.swiper_about{ position: absolute; width: 22rem; height: 9.83rem; left: 0; top: -0.17rem;}
.swiper_about .swiper-slide{ position: relative; width: 100%; height: 100%;}
.swiper_about .swiper-slide img{ position: absolute; width: 13.04rem; height: 7.34rem; left: 1.1rem; top: 0; border: 0.17rem solid #ececec;}
.text_banquan{ position: absolute; width: 2.97rem; height: .22rem; left: 11.15rem; top: 7.2rem; background: url(https://p5x.perfectworld.com/images/main2403/text_banquan.png); background-size: 100% auto;}
.about_text_cont{ position: absolute; width: 5.9rem; height: 3.3rem; right: 1.5rem; top: 6.3rem; color: #fff; text-align: right;}
.about_text_cont h4{ font-size: 0.9rem; font-weight: bold; line-height: 1.2rem;}
.about_text_cont p{ padding-top: 0.1rem; font-size: 0.3rem; line-height: 0.48rem;}
.btn_prev,.btn_next{ position: absolute; width: .99rem; height: 1.21rem; cursor: pointer;}
.btn_prev{ background: url(https://p5x.perfectworld.com/images/main2403/btn_prev.png); background-size: 100% auto;}
.btn_next{ background: url(https://p5x.perfectworld.com/images/main2403/btn_next.png); background-size: 100% auto;}
.swiper_about .swiper-button-prev{ left: 0.1rem; top: 3.18rem;}
.swiper_about .swiper-button-next{ right: 6.66rem; top: 3.18rem;}
.swiper-button-next:after,.swiper-button-prev:after{ content: none;}
.swiper_about .swiper-pagination{ width: 13.7rem; height: 0.24rem; bottom: 1.1rem!important; text-align: right;}
.swiper_about .swiper-pagination .swiper-pagination-bullet{ width: 0.24rem; height: 0.24rem; margin: 0 0.12rem!important; opacity: 1; border-radius: 0; background: url(https://p5x.perfectworld.com/images/main2403/icon_about_page.png); background-size: 100% auto;}
.swiper_about .swiper-pagination .swiper-pagination-bullet-active{ background: url(https://p5x.perfectworld.com/images/main2403/icon_about_page_on.png); background-size: 100% auto;}
/* news */
.section_news{ position: relative; width: 25.6rem; height: 9.49rem;}
.news_title{ position: absolute; width: 1.96rem; height: 1.84rem; top: 0.68rem; right: 0.43rem; background: url(https://p5x.perfectworld.com/images/main2403/news_title.png); background-size: 100% auto;}
.news_cont_wrap{ position: absolute; width: 21.97rem; height: 8.1rem; left: 0; top: 1.39rem; background: url(https://p5x.perfectworld.com/images/main2403/news_box_bg.png); background-size: 100% auto;}
.news_text_box{ position: absolute; width: 12.36rem; height: 6.65rem; left: 2.59rem; top: 0.63rem;}
.news_tab{ width: 100%; height: 1.22rem; padding-left: 0.28rem; box-sizing: border-box;}
.news_tab li{ float: left; width: 2.15rem; height: 0.79rem; margin-right: 0.94rem; font-size: 0.42rem; font-weight: bold; line-height: 0.7rem; color: #fff; text-align: center; cursor: pointer; background: url(https://p5x.perfectworld.com/images/main2403/news_tab.png); background-size: 100% auto;}
.news_tab li.on{ background: url(https://p5x.perfectworld.com/images/main2403/news_tab_on.png); background-size: 100% auto;}
.news_cont{ display: none; position: relative; width: 12.38rem; height: 5.42rem;}
.news_cont ul{ width: 100%; height: 100%;}
.news_cont ul li{ float: left; width: 5.99rem; height: 5.42rem; margin: 0 0.09rem; background: url(https://p5x.perfectworld.com/images/main2403/news_item_bg.png); background-size: 100% auto;}
.news_view{ display: block; width: 5.98rem; height: 3.36rem;}
.news_detail_box{ width: 5.3rem; height: 1.52rem; margin: 0.2rem auto 0; overflow: hidden;}
.news_detail_box h3{ width: 100%; height: 0.54rem; font-size: 0.32rem; font-weight: bold; line-height: 0.54rem; color: #171717; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news_detail_box p{ height: 0.62rem; font-size: 0.20rem; line-height: 0.31rem; color: #8a8a8a; overflow: hidden;}
.news_item_time_box{ height: 0.26rem; margin-top: 0.06rem;}
.news_item_time_box span{ float: left; font-size: 0.20rem; line-height: 0.26rem; color: #737373;}
.news_item_time_box a{ float: right; width: .93rem; height: .2rem; margin-top: 0.03rem; background: url(https://p5x.perfectworld.com/images/main2403/news_more2.png); background-size: 100% auto;}
.news_more_list{ position: absolute; width: 1.26rem; height: .39rem; right: 0.34rem; top: -0.96rem; background: url(https://p5x.perfectworld.com/images/main2403/news_more1.png); background-size: 100% auto;}
.news_shequ{ position: absolute; width: 4.95rem; height: 6.57rem; left: 15.2rem; top: .72rem; background: url(https://p5x.perfectworld.com/images/main2403/news_shequ.png); background-size: 100% auto;}
/* media */
.section_media{ position: relative; width: 25.6rem; height: 14.04rem;}
.media_title{ position: absolute; width: 2.18rem; height: 1.94rem; top: 1.45rem; left: 0.51rem; background: url(https://p5x.perfectworld.com/images/main2403/media_title.png); background-size: 100% auto;}
.media_cont_wrap{ position: absolute; width: 13.8rem; height: 7.4rem; top: 3.34rem; left: 5.67rem;}
.media_tab{ display: flex; width: 100%; height: 0.79rem; justify-content: center;}
.media_tab li{ width: 2.15rem; height: 0.79rem; margin:0 0.28rem; font-size: 0.34rem; font-weight: bold; line-height: 0.7rem; color: #fff; text-align: center; cursor: pointer; background: url(https://p5x.perfectworld.com/images/main2403/news_tab.png); background-size: 100% auto;}
.media_tab li.on{ background: url(https://p5x.perfectworld.com/images/main2403/news_tab_on.png); background-size: 100% auto;}
.media_cont{ display: none; position: relative; width: 13.8rem; height: 6.55rem;}
.bot_text{ position: absolute; width: 2.4rem; height: 0.64rem; right: 0.55rem; bottom: 0; font-size: 0.18rem; line-height: 0.64rem; color: #b7b7b7; text-align: right;}
.tag_fbl,.years12{ position: absolute; width: 0.85rem; height: 0.99rem; right: 0.55rem; bottom: 0.6rem; background: url(https://p5x.perfectworld.com/images/index240418/tag_fbl.png); background-size: 100% auto;}
.years12{ height: 0.98rem; right: 1.55rem; background: url(https://p5x.perfectworld.com/images/index240418/years12.png); background-size: 100% auto;}
/* video */
.media_video{ position: absolute; width: 13.8rem; height: 5.12rem; left: 0; top: 0.52rem; overflow: hidden;}
.swiper_media{ position: absolute; width: 26.7rem; height: 100%; left: 50%; top: 0; margin-left: -13.35rem;}
.swiper_media .swiper-slide{ position: relative; width: 8.9rem;}

.media_view{ display: none; position: absolute;cursor: pointer;}
.media_view img{ width: 100%; height: 100%;}
.media_view span{ position: absolute; left: 50%; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0);background: url(https://p5x.perfectworld.com/images/main2403/btn_play.png); background-size: 100% auto;}
.swiper_media .swiper-slide-active .media_view{ display: block; width: 8.66rem; height: 4.87rem; border: 0.12rem solid #fff;}
.swiper_media .swiper-slide-active span{ position: absolute; width: 0.68rem; height: 0.68rem;}
.swiper_media .swiper-slide-prev .media_view,
.swiper_media .swiper-slide-next .media_view{ display: block; position: absolute; width: 2.13rem; height: 1.2rem; bottom: 0; border: 0.02rem solid #fff;}
.swiper_media .swiper-slide-prev .media_view{ right: 0.3rem;}
.swiper_media .swiper-slide-next .media_view{ left: 0.3rem;}
.swiper_media .swiper-slide-prev span,
.swiper_media .swiper-slide-next span{ width: 0.5rem; height: 0.5rem;}

#video_prev,#video_next,#gallery_prev,#gallery_next{ top: 1.9rem; z-index: 5;}
#video_prev,#gallery_prev{ left: 0;}
#video_next,#gallery_next{ right: 0;}
.media_more{ position: absolute; width: 1.26rem; height: .39rem; left: 10.04rem; top: 5.24rem; background: url(https://p5x.perfectworld.com/images/main2403/news_more1.png); background-size: 100% auto; z-index: 5;}
/* ost */
.media_ost{ position: absolute; width: 100%; height: 3.17rem; left: 0; top: 0.9rem;}
#swiper_ost{ width: 9.28rem; height: 3.17rem; margin: 0 auto;}
#swiper_ost .swiper-slide{ position: relative; width: 4.24rem; height: 3.17rem; margin: 0 0.2rem;}
.pan{ position: absolute; width: 2.69rem; height: 2.69rem; right: 0; top: 0.24rem; background-color: #000; border-radius: 2.69rem;}
.pan img{ position: absolute; width: 1.4rem; height: 1.4rem; left: 50%; top: 50%; margin-left: -0.7rem; margin-top: -0.7rem; border-radius: 1.4rem;}
.ost_view{ position: absolute; width: 3.16rem; height: 3.17rem; left: 0; top: 0; background: url(https://p5x.perfectworld.com/images/main2403/ost_view_bg.png); background-size: 100% auto;}
.ost_view img{ position: absolute; width: 2.72rem; height: 2.72rem; left: 0.22rem; top: 0.22rem;}
.ost_view .btn_pop_v{ position: absolute; width: 0.53rem; height: 0.52rem; left: 1.3rem; top: 50%; margin-top: -0.26rem; background: url(https://p5x.perfectworld.com/images/main2403/btn_play2.png); background-size: 100% auto; cursor: pointer;}
#ost_prev,#ost_next{ top: 1.9rem;}
#ost_prev{ left: 0;}
#ost_next{ right: 0;}
/* FEATURES */
.shape-focus{ position: relative; width: 7.92rem; height: 4.72rem; margin: 0.5rem auto 0;}
.shape-focus .slider-panel{ position: relative; width: 100%; height: 100%; }
.shape-focus .slider{ position: absolute; left: 0; top: 4.72rem; border: 0.15rem solid #FFF; padding: 0.15rem; width: 7.32rem; height: 4.12rem; background: #000; transform-origin: center center; visibility: hidden; z-index: 0; opacity: 0; transform: rotate(0deg) scale(.8); transition : left .2s ease-in, top .2s ease-in, transform .2s ease-in, opacity .2s ease-in; }
.shape-focus .slider-panel .slider.visible{ visibility: visible; }
.shape-focus .slider-panel .slider .content{ background: blueviolet; width: 100%; height: 100%; }
.shape-focus .slider-panel .slider .content img{ display: block; width: 100%; height: 100%; }
.shape-focus .next-btn,.shape-focus .prev-btn{ top: 2.33rem; }
.shape-focus .prev-btn{ left: -2.42rem;}
.shape-focus .next-btn{ right: -2.42rem; }
/* nav */
.btn_show_nav{ position: fixed; width: 0.82rem; height: 0.82rem; left: 0.6rem; top: 0.56rem; background: url(https://p5x.perfectworld.com/images/main2403/btn_show_nav.png); background-size: 100% auto; z-index: 10; cursor: pointer;}
.nav_bar{ position: fixed; width: 6.1rem; height: 100%; left: -6.1rem; top: 0; background: url(https://p5x.perfectworld.com/images/main2403/nav_bg.png) center top repeat-y; background-size: 100% auto; z-index: 20;}
.close_nav{ position: absolute; width: .55rem; height: .55rem; right: 0.5rem; top: .3rem; background: url(https://p5x.perfectworld.com/images/main2403/icon_close_nav.png); background-size: 100% auto; cursor: pointer;}
.nav_logo_box{ width: 3.74rem; height: 1.74rem; margin: 1.24rem auto 0; border-bottom: 0.01rem solid #404040;}
.nav_logo_box img{ display: block; width: 2.6rem; margin: 0 auto;} 
.nav_list{ width: 3.74rem; height: 6.24rem; margin: 0.55rem auto 0;}
.nav_list li{ position: relative; width: 100%; height: 1.04rem; cursor: pointer;}
.nav_list li p{ position: relative; font-size: 0.28rem; line-height: 1.04rem; color: #fff; text-align: center; z-index: 2;}
.nav_list li span{ display: none; position: absolute; width: 1.33rem; height: 0.9rem; left: 50%; margin-left: -0.66rem; top: 0.07rem; background: url(https://p5x.perfectworld.com/images/main2403/nav_on.png); background-size: 100% auto;}
.nav_list li.on span{ display: block;}
.nav_sns_cont{ display: flex; width: 3.74rem; height: 1.02rem; margin: 0.55rem auto 0; padding-top: 0.3rem; justify-content: center; border-top: 0.01rem solid #404040;}
.nav_sns_cont img{ display: block; width: 1.02rem; height: 1.02rem; margin: 0 0.1rem;}
/* page */
#page_box{ position: fixed; width: 0.49rem; height: 1.86rem; right: 0; top: 50%; margin-top: -0.93rem; z-index: 20;}
#page_box.bg1{ background: url(https://p5x.perfectworld.com/images/main2403/page_btn_bg1.png); background-size: 100% auto;}
#page_box.bg2{ background: url(https://p5x.perfectworld.com/images/main2403/page_btn_bg2.png); background-size: 100% auto;}
#page_box.bg3{ background: url(https://p5x.perfectworld.com/images/main2403/page_btn_bg3.png); background-size: 100% auto;}
.btn_prev_page,.btn_next_page{ position: absolute; width: 0.49rem; height: 0.64rem; left: 0; cursor: pointer; z-index: 2;}
.btn_prev_page{ display: none; top: 0;}
.btn_next_page{ bottom: 0;}
#page_num{ position: absolute; width: 1.43rem; height: 0.57rem; right: 0; top: 50%; margin-top: -0.28rem;}
#page_num.n1{ background: url(https://p5x.perfectworld.com/images/main2403/num01.png); background-size: 100% auto;}
#page_num.n2{ background: url(https://p5x.perfectworld.com/images/main2403/num02.png); background-size: 100% auto;}
#page_num.n3{ background: url(https://p5x.perfectworld.com/images/main2403/num03.png); background-size: 100% auto;}
#page_num.n4{ background: url(https://p5x.perfectworld.com/images/main2403/num04.png); background-size: 100% auto;}
#page_num.n5{ background: url(https://p5x.perfectworld.com/images/main2403/num05.png); background-size: 100% auto;}
#page_num.n6{ background: url(https://p5x.perfectworld.com/images/main2403/num06.png); background-size: 100% auto;}

.btn_gotop{ display: none; position: fixed; width: 1.44rem; height: 1.44rem; right: 1.1rem; bottom: 1.5rem; background: url(https://p5x.perfectworld.com/images/main2403/btn_gotop.png); background-size: 100% auto; z-index: 20; cursor: pointer;}
/* pop */
.pop_fixed{ display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.7); z-index: 100;}
/* pop_video */
.pop_video_cont,.pop_pic_cont{ position: absolute; width: 19.2rem; height: 10.8rem; left: 50%; top: 50%; margin-left: -9.68rem; margin-top: -5.48rem; background: #000; border: 0.08rem solid #bf1c01;}
.icon_close{ position: absolute; width: .76rem; height: .76rem; right: -0.88rem; top: -0.12rem; background: url(https://p5x.perfectworld.com/images/main2403/icon_close.png); background-size: 100% auto; cursor: pointer;}
.playerBox,.playerBox iframe{ width: 100%; height: 100%; overflow: hidden;}
#pop_big_pic{ display: block; width: 100%; height: 100%;}
/* pop_login */
.pop_login_cont{ position: absolute; width: 7rem; height: 7.9rem; left: 50%; top: 50%; margin-left: -3.5rem; margin-top: -3.95rem; background: url(https://p5x.perfectworld.com/images/index240417/pop_login_bg.png); background-size: 100% auto;}
.login_role{ position: absolute; width: 4.59rem; height: 5.96rem; bottom: 0; right: -2.65rem; background: url(https://p5x.perfectworld.com/images/index240417/login_role.png); background-size: 100% auto;}
.close_login{ position: absolute; width: .76rem; height: .76rem; right: -0.85rem; top: 0; background: url(https://p5x.perfectworld.com/images/index240417/icon_close.png); background-size: 100% auto; cursor: pointer;}
.login_title{ width: 2.27rem; height: 0.59rem; margin: 0.26rem 0 0 0.46rem; background: url(https://p5x.perfectworld.com/images/index240417/login_title.png); background-size: 100% auto;}
.pop_cont_wrap{ padding: 0.64rem 0 0 0.77rem;}
.pop_email_error{ height: 0.38rem; font-size: 0.16rem; line-height: 0.38rem; color: #dd0303; visibility: hidden; white-space: nowrap;}
.email_yy_input{ display: block; width: 3.78rem; height: 0.48rem; padding: 0 0.1rem; box-sizing: border-box; font-size: 0.16rem; line-height: 0.48rem; color: #000; background-color: #fff; border: 0.01rem solid #000000; border-radius: 0.04rem; outline: 0;}
.imgCodeBox,.email_code_box,.telInputBox{ position: relative; width: 3.78rem; height: 0.48rem; margin-top: 0.12rem; background-color: #fff; border: 0.01rem solid #000000; border-radius: 0.04rem; overflow: hidden;  }
.email_captchaCode,.email_code_input{ float: left; width: 2.38rem; height: 100%; font-size: 0.16rem; margin-left: 0.1rem; line-height: 0.48rem; color: #000; background: none; border: 0; outline: 0;}
.mail_getImg{ position: absolute; width: 1.2rem; height: 0.44rem; right: 0.03rem; top: 50%; margin-top: -0.22rem; cursor: pointer;}
.sendEmailCode{ position: absolute; top: 50%; right: 0.03rem; transform: translate(0,-50%); width: 1.06rem; height: 0.44rem; line-height: 0.44rem; text-align: center; border-radius: 0.04rem; background: #fd0101; font-size: 0.16rem; color: #fff; cursor: pointer; }
.popEmailSubmit{ width: 3.8rem; height: 1rem; margin-top: 0.38rem; background: url(https://p5x.perfectworld.com/images/main2403/btn_sub_email.png); background-size: 100% auto;}
.popEmailSubmit.on{ background: url(https://p5x.perfectworld.com/images/main2403/btn_sub_email_on.png); background-size: 100% auto; cursor: pointer;}
.third_yy_btn{ display: flex; width: 3.8rem; height: 0.53rem; margin-top: 0.6rem; justify-content: center;}
.third_yy_btn .btn{ width: 0.53rem; height: 0.53rem; margin: 0 0.18rem; cursor: pointer; overflow: hidden;}
.third_google_btn{ background: url(https://p5x.perfectworld.com/images/main2403/third_google_btn.png); background-size: 100% auto;}
.third_naver_btn{ background: url(https://p5x.perfectworld.com/images/main2403/third_naver_btn.png); background-size: 100% auto;}
.third_apple_btn{ background: url(https://p5x.perfectworld.com/images/main2403/third_apple_btn.png); background-size: 100% auto;}
.third_naver_btn img{ width: 100%; height: 100%; opacity: 0; }
.third_apple_btn div{ opacity: 0; }
.pop_third_clause{ width: 3.9rem; margin-top: 0.16rem;}
.pop_clause p{ margin-bottom: 0.1rem; font-size: 0.16rem; color: #FFF; }
.pop_clause a{ text-decoration: underline; color: #fff10f; }
.popCheckbox{ display: inline-block; vertical-align: middle; margin-right: 0.05rem; }
.pop_clause input{ vertical-align: top; }
/* pop_msg */
#pop_msg{ z-index: 200;}
.pop_msg_bg,.pop_conform_bg{ position: absolute; width: 7rem; height: 6.3rem; left: 50%; top: 50%; margin-left: -3.5rem; margin-top: -3.15rem; background: url(https://p5x.perfectworld.com/images/index240425/pop_msg_bg.png); background-size: 100% auto;}
#msg{ display: flex; width: 4.45rem; height: 1.48rem; margin: 2.08rem 0 0 0.87rem; font-size: .26rem; line-height: .44rem; color: #000; text-align: center; justify-content: center; align-items: center; overflow: hidden;}
.btn_close{ display: block; width: 3.8rem; height: 1rem; margin-left: 1.09rem; background: url(https://p5x.perfectworld.com/images/index240417/btn_close.png); background-size: 100% auto; cursor: pointer;}
#pop_msg .btn_close{ margin-top: 1.14rem;}