* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 10vw;
}

body {
  min-width: 8.5333rem;
  max-width: 30rem;
  margin: 0 auto;
  max-height: 80rem;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (min-width: 1080px) {
  html {
    font-size: 37.5px !important;
  }
}

/*引入字体*/
/*@font-face {*/
/*    font-family: 'MSmartPRC';*/
/*    src: url('../fonts/MSmartPRC-Medium.OTF');*/

/*}*/

/*@font-face {*/
/*    font-family: 'fzSample';*/
/*    src: url('../fonts/方正清刻本悦宋简体.TTF');*/
/*}*/

/*@font-face {*/
/*    font-family: 'SourceHanSansCN';*/
/*    src: url('../fonts/SourceHanSansCN-Normal.otf');*/
/*    思源黑体*/
/*}*/
@font-face {
  font-family: 'MSmartPRC';
  src: url('../fonts/MSmartPRC-Medium-Roman.eot');
  src: url('../fonts/MSmartPRC-Medium-Roman.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MSmartPRC-Medium-Roman.woff2') format('woff2'),
      url('../fonts/MSmartPRC-Medium-Roman.woff') format('woff'),
      url('../fonts/MSmartPRC-Medium-Roman.ttf') format('truetype'),
      url('../fonts/MSmartPRC-Medium-Roman.svg#MSmartPRC-Medium-Roman') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'fzSample';
  src: url('../fonts/FZQKBYSJW--GB1-0.eot');
  src: url('../fonts/FZQKBYSJW--GB1-0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/FZQKBYSJW--GB1-0.woff2') format('woff2'),
      url('../fonts/../fonts/FZQKBYSJW--GB1-0.woff') format('woff'),
      url('../fonts/FZQKBYSJW--GB1-0.ttf') format('truetype'),
      url('../fonts/FZQKBYSJW--GB1-0.svg#FZQKBYSJW--GB1-0') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceHanSansCN';
  src: url('../fonts/SourceHanSansCN-Normal-Alphabetic.eot');
  src: url('../fonts/SourceHanSansCN-Normal-Alphabetic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/SourceHanSansCN-Normal-Alphabetic.woff2') format('woff2'),
      url('../fonts/SourceHanSansCN-Normal-Alphabetic.woff') format('woff'),
      url('../fonts/SourceHanSansCN-Normal-Alphabetic.ttf') format('truetype'),
      url('../fonts/SourceHanSansCN-Normal-Alphabetic.svg#SourceHanSansCN-Normal-Alphabetic') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




.canvas{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/* 首页start  */

/* 主页start*/
.home_page {
background: url(../images/home/home_bg.png) no-repeat;
background-size: 100% 100%;
}
.home_page footer {
display: flex;
flex-direction: column;
align-items: center;
}
.home_bg_list {
  position: relative;
  display: flex;
  height: 4.25rem;
  /* height: 4.25rem; */
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.1rem;
}
.halfcircle {
width: 90%;
}
.home_btn_list {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 2.3rem;
  left: 0.5rem;
}
/* 背景音乐播放按钮 */
.start_bg_music_btn {
display: none;
position: absolute;
width: 1rem;
height: 1rem;
top: 2.3rem;
right: 5%;
z-index: 10;
}
/* 背景音乐暂停按钮 */
.stop_bg_music_btn {
position: absolute;
width: 1rem;
height: 1rem;
right: 5%;
top: 2.3rem;
z-index: 10;
}
/* 主页中间部分 */
.home_main_content {
display: flex;
z-index: 9;
/* margin-top: 2.1rem; */
flex-direction: column;
align-items: center;
}
/* logo背景 */
.home_bg_logo{
position: absolute;
width: 7.8rem;
margin: .5rem auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* margin-left: 0.13rem; */
}
.logo_text{
width: 2rem;
}
/* width: 2rem;
margin-top: .25rem; */
.logo_line{
width: 100%;
margin-top: .45rem;
margin-left: .25rem;
}
/* 
margin-top: .20rem;
margin-left: .15rem; */

/* logo边框 */
.home_bg_frameH{
width: 6.42rem;
}

.home_bg_frameV{
width: 6.42rem;
height: 6rem;
}
/* 移动星星 */
.home_icon_star_1{
position: absolute;
width: 1.28rem;
}
/* 闪烁星星 start*/
.home_icon_star_2{
position: absolute;
width: .5rem;
}
.home_icon_star_3{
position: absolute;
width: .9rem;
}

.home_icon_star_4{
position: absolute;
width: .2rem;
}
.home_icon_star_5{
position: absolute;
width: .15rem;
}
.home_icon_star_6{
position: absolute;
width: .2rem;
}
.home_icon_star_7{
  position: absolute;
  width: .12rem;
}
.home_icon_star_8{
  position: absolute;
  width: .2rem;
}
.home_icon_star_9{
  position: absolute;
  width: .25rem;
}
.home_icon_star_10{
  position: absolute;
  width: .1rem;
}
.home_icon_star_11{
  position: absolute;
  width: .23rem;
}
.home_icon_star_12{
  position: absolute;
  width: .15rem;
}
.home_icon_star_13{
  position: absolute;
  width: .2rem;
}
.home_icon_star_14{
  position: absolute;
  width: .16rem;
}
.home_icon_star_15{
  position: absolute;
  width: .13rem;
}
.home_icon_star_16{
  position: absolute;
  width: .2em;
}
.home_icon_star_17{
  position: absolute;
  width: .15rem;
}
.home_icon_star_18{
  position: absolute;
  width: .1rem;
}
/* 闪烁星星 end*/
/* 进度条 */
.progress {
  position: relative;
  margin-top: 1.2rem;
  width: 5rem;
  height: 0.08rem;
  background: #D6DAED;
  vertical-align: middle;
}
/* 滑动球球 */
.slide {
position: absolute;
top: -0.27rem;
width: 0.6rem;
height: 0.6rem;
margin-left: -0.415rem;
z-index: 9;
}
/* 填充进度 */
.fill {
position: absolute;
top: 0;
height: 0.08rem;
background-color: white;
}
/* 隐藏显示时间 以便后续使用 */
.time {
display: none;
}
.play_btn {
position: relative;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.2rem;
}
.pause_btn {
position: relative;
display: none;
width: 1.5rem;
height: 1.5rem;
margin-top: 0.2rem;
}
/* 分享按钮 */
.share_btn {
width: 1rem;
height: 1rem;
margin: 2.85rem 0 2rem 0;
}
/* 列表页 */
.list_page {
display: none;
/* height: 100%; */
background: url(../images/list/list_bg.png) no-repeat;
background-size: 100% 100%;
}
.list_page header {
display: flex;
justify-content: center;
height: 8%;
}
.list_bg_2{
  width: 94%;
  margin: 0 auto;
}
.roleMsg {
margin: 0 auto;
width: 80%;
height: 100%;
}
.select_frame {
/* scrollbar-width: none; */
margin: 2px auto;
position: absolute;
}
.select_frame::-webkit-scrollbar {
display: none;
}
.select_card {
display: flex;
position: absolute;
width: 98%;
margin: 0 auto;
}
.select_role_class_0 {
position: absolute;
width: 20%;
/* height: 100%; */
top: -25%;
left: 0%;
/* background: url(../images/list/list_tabbar_zql_normat.png) no-repeat; */
/* background-size: 100% 100%; */
}
.select_0 {
position: absolute;
width: 20%;
/* height: 120%; */
top: -30%;
left: 0%;
/* background: url(../images/list/list_tabbar_zql_selected.png) no-repeat;
  background-size: 100% 100%; */
}
.select_role_class_1 {
position: absolute;
width: 20%;
/* height: 100%; */
top: -25%;
left: 20%;
}
.select_1 {
position: absolute;
width: 20%;
/* height: 120%; */
top: -30%;
left: 20%;
}
.select_role_class_2 {
position: absolute;
width: 20%;
top: -25%;
left: 40%;
}
.select_2 {
position: absolute;
width: 20%;
top: -30%;
left: 40%;
}
.select_role_class_3 {
position: absolute;
width: 20%;
top: -25%;
left: 60%;
}
.select_3 {
position: absolute;
width: 20%;
top: -30%;
left: 60%;
}
.select_role_class_4 {
position: absolute;
width: 20%;
top: -25%;
left: 80%;
}
.select_4 {
position: absolute;
width: 20%;
top: -30%;
left: 80%;
}
.list_main_content {
display: flex;
margin: 0 auto .5rem;
align-content: center;
justify-content: center;
align-items: center;
position: relative;
}
.roleDate {
float: left;
width: 30%;
height: 1.2rem;
/* line-height: 350%; */
display: flex;
align-content: center;
justify-content: center;
align-items: center;
/* font-size:  0.5rem;; */
/* font-family:'MSmartPRC'; */
}
.roleDate span{
  margin-top: 6px;
  font-size: .5rem;
}
.subTitle {
position: relative;
float: left;
height: 1.2rem;
/* line-height: 350%; */
width: 55%;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-align: right;
/* font-size: 0.3rem; */
/* font-family:'方正清刻本悦宋简体'; */
}
.subTitle span{
position: absolute;
font-size: .34rem;
/* margin-left: 15%; */
/* left: 50%; */
/* margin-left: -50%; */
/* top: 50%; */
/* margin-top: -15%; */
}

.role_refer_music {
position: relative;
float: left;
width: 1rem;
height: 1.2rem;
text-align: center;
line-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.list_btn_start {
width: 1rem;
}
.select_role {
margin: 0.25rem auto 0.3rem;
width: 96%;
height: 94.8%;
overflow-x: hidden;
overflow-y: auto;
color: #FFF;
display: flex;
flex-direction: column;
}
.select_role::-webkit-scrollbar {
display: none;
color: #FFF;
}
.roleContent {
  position: relative;
margin-top: 0.0533rem;
background: url(../images/list/list_bg_3.png) no-repeat;
background-size: 100% 100%;
height: 1.2rem;
}
.list_bg_home {
position: relative;
/* margin-bottom: 1.5rem; */
bottom: 0px;
width: 100%;
/* height: 100%; */
background-size: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.list_header {
pointer-events: none;
}
.halfcircle_list {
width: 90%;
}
.list_btn_home {
position: absolute;
width: 1rem;
height: 1rem;
background: url(../images/share/share_btn_back.png) no-repeat;
background-size: 100%;
}


/* 分享页start */

.pVerticalParent
{
position: absolute;
display: flex;
justify-content: center;
width: 100%;
/* height: 100%; */
background-color: rgba(0,0,0,0);
font-size: .4rem;
font-family: fzSample;
}

.currentSubTitle{
display: none;
position: absolute;
color: white;
font-size: .35rem;
font-family: SourceHanSansCN;
}

.point_line{
display: none;
position: absolute;
}

.verticaltext{
display: none;
position: absolute;
writing-mode: vertical-rl;
/* height: 400px; */
/* letter-spacing: .2rem; */
color: white;
background-color: rgba(0,0,0,0);
}

.share_img_content{
position: absolute;
width: 100%;
pointer-events: none;
}

.share_img_line{
  position: absolute;
}


.share_page {
width: 100%;
display: none;
position: relative;
height: 100%;
}
.share_back_btn {
z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
background: url(../images/share/share_btn_back.png) no-repeat;
background-size: cover;
}
.share_page_content {
position: relative;
width: 100%;
}
.share_page_content img {
width: 100%;
}

.share_menu{
z-index: 999;
}
.share_btn_moments {
z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
left: 16%;
background: url(../images/share//share_btn_moments.png) no-repeat;
background-size: cover;
}
.share_btn_weibo {

z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
left: 33%;
margin-left: -0.5rem;
background: url(../images/share//share_btn_weibo.png) no-repeat;
background-size: cover;
}
.check{

z-index: 99;
display: none;
}
/* 分享微信按钮 */
.share_btn_wechat {

z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
left: 44.5%;
margin-left: -0.5rem;
background: url(../images/share//share_btn_wechat.png) no-repeat;
background-size: cover;
}
/* 分享qq按钮 */
.share_btn_qq {

z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
left: 56%;
margin-left: -0.5rem;
background: url(../images/share//share_btn_qq.png) no-repeat;
background-size: cover;
}
.share_star{
position: absolute;
width: .6rem;
height: .6rem;
display: none;
left: 70%;
margin-left: -0.5rem;
background: url(../images/share//share_icon_star.png) no-repeat;
background-size: cover;
pointer-events: none;
}

/* 分享下载按钮 */
.share_btn_download {
z-index: 99;
position: absolute;
display: none;
width: 1rem;
height: 1rem;
right: 16%;
background: url(../images/share//share_btn_download.png) no-repeat;
background-size: cover;
}
.Tips {
width: 100%;
height: 100%;
/* background: url(../images/share/share_mask.png); */
position: absolute;
left: 0px;
top: 0px;
display: none;
z-index: 1000;
}
.tips_msg_bg{
position: absolute;
width:90%;
height: 6%;
left: 50%;
top: 55%;
margin-top: -5%;
margin-left: -45%;
background: url(../images/share/share_bg_text.png);
background-size: 100% 100% ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.arrow {
position: relative;
width: 80%;
height: 30%;
right: -30%;
}
.tips_msg1 {
width: 100%;
font-size: 0.35rem;
color: white;
text-align: center;
pointer-events: none;
}
.tips_msg2 {
width: 100%;
font-size: 0.35rem;
color: white;
text-align: center;
pointer-events: none;
}
.tips_download_mask {
width: 100%;
height: 100%;
background: url(../images/share/share_mask.png);
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 100;
justify-content: center;
text-align: center;
}
.tips_download_Parent
{
display: none;
position: absolute;
left: 50%;
font-size:.35rem;
z-index: 102;
width: 90%;
text-align: center;
justify-content: center;
align-items: center;
background: url(../images/share/share_bg_text.png);
background-size: 100% 100% ;
}
.tips_download{
color: #FFF;
}
.download_img{
position:absolute; 
width: 80%;
top:2%; 
left:50%;
margin-left:-40%; 
z-index:101;
}


/* 分享页end */


/* 展示分享图片页 */
#show_img {
  width: 100%;
}

.hide_img{
position: fixed;
left: -11111111111px;
top: 11111111111px;
}