/*reset.css*/
@charset "utf-8";

/* CSS Document */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
ul, li, div, p, body, h1, h2, h3, h4, h5, h6, dl, dt, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: #fff; }
input { -webkit-appearance: none; outline: none }

/**{outline: none; webkit-focus-ring-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}*/
.hide { display: none; }
body, html { width: 100%; font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif; font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: center; background-color: #ebebeb }
body { opacity: 1; -webkit-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; background: #07132b;}
p, a, li { font-size: 0.16rem; color: #fff }
html { font-size: 312.5%; }
@media screen and (max-width:359px) and (orientation:portrait) {
   html { font-size: 266.67%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
   html { font-size: 300%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
   html { font-size: 320%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
   html { font-size: 333.33%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait) {
   html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait) {
   html { font-size: 360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait) {
   html { font-size: 400%; }
}
@media screen and (min-width:640px) and (orientation:portrait) {
   html { font-size: 533.33%; }
}
i, em { font-style: normal; }
#forhorview, #share { display: none; }
.dBlue { background-color: #07132b; }
.lBlue { background-color: #eff0f4; }
.g-doc { width: 100%;position: relative; z-index: 10;}
.m-list{ overflow: hidden;}
.m-list ul { padding: 0.1rem 0.2rem 0.3rem;overflow: hidden;text-align: center;font-size: 0.24rem;}
.m-list img { width: 100%; vertical-align: top;display: block; border: 0.04rem solid #000; }
.m-list li { margin-bottom: 0.2rem;display:inline-block;vertical-align: top;width: 2.2rem;}
.m-list .itemWrap { display: block;width: 1.7rem;margin: 0 auto;}
.m-list span { display: block; font-size: 0.26rem; text-align: center; line-height: 0.4rem; }
.m-list sub { font-size: 0.16rem; margin-left: 0.06rem; margin-left: 0.2rem; display: inline-block; line-height: 0.20rem; vertical-align: top; margin-top: 0.14rem; }
.u-btn-vote { width: 1.72rem; height: 0.47rem; text-align: center; display: block; margin: 0 auto; border: 1px solid #8b919b; border-radius: 0.08rem; font-size: 0.36rem; line-height: 0.47rem; cursor: pointer; }

@-webkit-keyframes flash{
  0%,50%,100%{
    opacity:0.9;filter:alpha(opacity=100)
  }
  25%,75%{
    opacity:0.1;filter:alpha(opacity=0)
  }
}
@keyframes flash{
  0%,50%,100%{
    opacity:0.9;filter:alpha(opacity=100)
  }
  25%,75%{
    opacity:0.1;filter:alpha(opacity=0)
  }
}
.flash{
  -webkit-animation:flash 4s 0s ease-in-out infinite both;
  animation:flash 4s 0s ease-in-out infinite both;
}
.disable .u-btn-vote{
  color: #545D6F;
  border-color: #545D6F;
}
.disable .s-sel { background-color: #24343A; color: #fff;}

.m-list .item-last { width: 4.4rem; text-align: center; padding-top: 1.06rem;vertical-align: top}
.u-btn-checkResult { display: inline-block; height: 0.94rem; font-size: 0.48rem; font-weight: bold; padding: 0 0.18rem; line-height: 0.94rem; border: 1px solid #8b919b; border-radius: 0.08rem; }
.m-wx-tip { position: fixed; width: 100%; top: 0; left: 0; -webkit-transform: translateY(-101%); transform: translateY(-101%); -webkit-transition: all ease-out  0.5s; transition: all ease-out  0.5s;  z-index: 100;}
.showMsg { -webkit-transform: translateY(0); }
.wxTipWrap { padding: 0.14rem 0 0 0.84rem; position: relative; height: 1.11rem; background: rgba(000, 000, 000, 0.8); color: #fff; }
.wxTipWrap p { font-size: 0.24rem; }
.wxTipWrap i { font-size: 0.18rem; }
.u-ico-wx { width: 0.38rem; height: 0.38rem; position: absolute; background: url(../img/ico_wx.png) no-repeat; background-size: 0.38rem; top: 0.14rem; left: 0.27rem; }
.wxTipWrap::after { content: ""; position: absolute; left: 50%; bottom: 0.07rem; height: 0.1rem; border-radius: 0.1rem; width: 0.68rem; background-color: #656565; -webkit-transform: translateX(-50%);  transform: translateX(-50%); }
.wxTipWrap span{
  content: '';
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  background: url(../img/icon13.png) no-repeat;
  background-size: 100%;
  top: 0;
  right: 50%;
  margin-right: -2rem;
  opacity: 0.9;
  display: none;
}
.addGroupTop { height: 5.56rem; position: relative; border-bottom: 0.02rem solid #000000; background-color: #fff; }
.addGroupTop p { position: absolute; width: 2.47rem; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
.addGroupTop img { width: 100%; vertical-align: top; margin-bottom: 0.2rem; }
.addGroupTop em { display: block; font-size: 0.38rem; line-height: 0.6rem; color: #000000; }
.addGroupTop span { display: inline-block; line-height: 0.5rem; color: #737373; font-size: 0.3rem; }
.addGroupBtm { padding: 1.33rem 0; text-align: center; background-color: #eff0f3;border-top: 1px solid #343434;}
.addGroupBtm strong { font-size: 0.46rem; color: #494949; font-weight: normal; display: block; text-align: center; line-height: 0.7rem; margin-bottom: 1rem; }
.u-btn-green { display: inline-block; width: 3.84rem; height: 0.8rem; background-color: #1dbc21; font-size: 0.32rem; text-align: center; line-height: 0.8rem; border-radius: 0.05rem; cursor: pointer; }
.wxWrap{ min-height: 6rem;}
.wxBox { position: relative; background-color: #ebebeb; }

.wxBox img { width: 100%; vertical-align: top; }
.wxTop img { width: 100%; vertical-align: top; }
.wxBtm img { width: 100%; vertical-align: bottom; }
.wxTop { position: fixed; left: 0; top: 0; width: 100%; z-index: 2; }
.wxBtm { position: fixed; left: 0; bottom: 0; width: 100%; }
.wxDia { padding-bottom: 0.91rem; }
.inviteF { padding-top: 0.18rem; text-align: center; }
.inviteF em { margin-bottom: 0.3rem; display: inline-block; height: 0.41rem; background-color: #cecece; border-radius: 0.1rem; color: #fff; padding: 0 0.15rem; font-size: 0.24rem; line-height: 0.41rem; }
.wxDia dl { width: 76%; margin-bottom: 0.37rem; position: relative; display: none; }
.wxDia dt { width: 0.96rem; height: 0.96rem; float: left; padding-left: 0.18rem; position: relative; }

/*.wxDia dt::after{ content:"";  position: absolute;  right: -0.01rem; top: 0.25rem;background: url(../img/ico_array.png) no-repeat; background-size: 0.15rem; width: 0.15rem; height: 0.22rem; z-index: 3;}*/
.wxDia dt::after { content: ""; position: absolute; right: -0.01rem; top: 0.25rem; background: url(../img/ico_array.png) no-repeat; background-size: 0.15rem; width: 0.15rem; height: 0.22rem; z-index: 3; }
.wxDia dt img { width: 0.74rem; }
.wxDia dd { overflow: hidden; background: #ffffff; border: 0.01rem solid #d6d6d6; border-radius: 0.15rem; padding: 0.18rem 0.24rem; line-height: 0.38rem; font-size: 0.28rem; position: relative; min-height: 0.38rem; }
.wxBox .wx-ico { width: 0.31rem; vertical-align: top; margin: 0 0.03rem; }
.short { width: 2.15rem; }
.audioBox { width: 1.04rem; }
.audio_sound { width: 0.2rem; height: 0.28rem; position: absolute; left: 0rem; top: 0.01rem; }
.audio_sound i { width: 0.2rem; height: 0.28rem; position: absolute; left: 0.22rem; top: 0.21rem; }
.audio_sound .bg_a_1 { background: url(../img/ico_audio_1.png) no-repeat; background-size: 0.2rem; }
.audio_sound .bg_a_2 { background: url(../img/ico_audio_2.png) no-repeat; background-size: 0.2rem; }
.audio_sound .bg_a_3 { background: url(../img/ico_audio_3.png) no-repeat; background-size: 0.2rem; }
.m-audioBox::after { content: "4''"; position: absolute; left: 2.85rem; top: 0.3rem; color: #b9b9b9; font-size: 0.26rem; }
.noheart::before { content: ""; width: 0.16rem; height: 0.16rem; border-radius: 0.16rem; background-color: #eb4d4b; position: absolute; left: 2.95rem; top: -0.01rem; }
.wxDia .hongbao dt::after { display: none; }
.hongbao dd { width: 4.5rem; margin: 0; padding: 0; background: transparent; border: none; left: -0.12rem; }
.m-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(000, 000, 000, 0.87); z-index: 10; }
.m-mask .u-hongbao { width: 6.18rem;height:8.44rem; position: absolute; left: 50%; top: 50%;margin-left:-3.09rem;margin-top: -4.14rem;}
.m-mask .u-hongbao img { width: 100%; }
.m-chbg { position: relative; overflow: hidden; }
.m-chbg img { width: 100%; vertical-align: top; }
.btnArea { position: absolute; top: 76%; width: 100%; left: 0; }
.btnArea p { text-align: center; margin-bottom: 0.2rem; }
.btnTop a { display: inline-block; width: 34%; margin: 0 4.5%; }
.btnBtm a { display: inline-block; width: 43%; }

#Jhongbao { display: none; }
.playing .bg_a_2 { -webkit-animation: cB 1s 0.2s ease-out infinite both; }
.playing .bg_a_3 { -webkit-animation: cC 1s 0.2s ease-out infinite both; }
@-webkit-keyframes cB {
   0% { opacity: 0; }
   33.3% { opacity: 0; }
   33.4% { opacity: 1; }
   66.6% { opacity: 1; }
   66.7% { opacity: 1; }
   99.9% { opacity: 1; }
}
@keyframes cB {
   0% { opacity: 0; }
   33.3% { opacity: 0; }
   33.4% { opacity: 1; }
   66.6% { opacity: 1; }
   66.7% { opacity: 1; }
   99.9% { opacity: 1; }
}
@-webkit-keyframes cC {
   0% { opacity: 0; }
   33.3% { opacity: 0; }
   33.4% { opacity: 0; }
   66.6% { opacity: 0; }
   66.7% { opacity: 1; }
   99.9% { opacity: 1; }
}
@keyframes cC {
   0% { opacity: 0; }
   33.3% { opacity: 0; }
   33.4% { opacity: 0; }
   66.6% { opacity: 0; }
   66.7% { opacity: 1; }
   99.9% { opacity: 1; }
}

#Jpart2 { position: relative; display: none; /* -webkit-transform: translateY(150%);*/ }
#Jpart3,#Jpart4 { position: relative; display: none; /* -webkit-transform: translateY(150%);*/ }
video { font-size: 100%; line-height: 0; vertical-align: baseline; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; }
.page4 { overflow: hidden; background-color: #000; }


#JvideoBox{ overflow: hidden; height: 100%; width: 100%;  position: absolute;  top: 0;  left: 0;   background-color: #000; z-index: -1;}
.videobox { position: fixed;z-index: -1;width:7.5rem;left: 50%;margin-left: -3.75rem;top:50%;height: 11.9rem;margin-top: -5.95rem;}
.page5 { background-position: 0px 0px; background-repeat: no-repeat; background-size: cover }
.video-box { width: 100%; background-color: #000; }

.wrap{ position: relative; height: 100%; width: 100%;}

.share-m {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.7);
    display: none;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 999
}

.share-m.show {
    opacity: 1
}

.box {
    display: -webkit-box;
    display: -moz-box;
    display: box
}

.share-guide {
    position: relative;
    margin: 0 auto;
    top: .4em;
    width: 7em;
    height: 1.5em;
    border-left: .04em solid #fff;
    border-right: .04em solid #fff;
    border-bottom: .04em solid #fff;
    padding-top: .36em
}

.share-guide p {
    font-size: .44em;
    text-align: center;
    color: #fff
}

.share-guide .arrow_line {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    width: 100%;
    -webkit-transform: translate(0,-.37em);
    -moz-transform: translate(0,-.37em);
    -ms-transform: translate(0,-.37em);
    -o-transform: translate(0,-.37em);
    transform: translate(0,-.37em)
}

.share-guide .arrow_line em,.share-guide .arrow_line span {
    display: block;
    font-size: 1em;
    height: .04em;
    background: #fff;
    margin-bottom: .18em
}

.share-guide .arrow_line em {
    -moz-box-flext: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin-right: .04em;
    width: 4.68em
}

.share-guide .arrow_line span {
    width: .3em;
    margin-left: .04em
}

.share-guide .arrow_line i {
    display: block;
    width: .4em;
    height: .4em;
    border-left: .05em solid #fff;
    -webkit-transform: scale(0.85) rotate(45deg);
    -moz-transform: scale(0.85) rotate(45deg);
    -ms-transform: scale(0.85) rotate(45deg);
    -o-transform: scale(0.85) rotate(45deg);
    transform: scale(0.85) rotate(45deg);
    border-top: .05em solid #fff;
    margin-top: -.2em
}

.mess-tips {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.6);
    display: none;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 99
}

.mess-tips.show {
    opacity: 1
}

.mess-tips p {
    font-size: .36em;
    text-align: center;
    padding-top: 1.5rem;
    color: #fff
}