/* 三角形 */
/* CSS Reset */
body,
div,
span,
object,
iframe,
input,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
acronym,
address,
code,
del,
em,
font,
img,
ins,
strong,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
table,
tbody,
tfoot,
thead,
tr,
th,
td {
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

input,
select {
  vertical-align: middle;
}

input,
textarea,
select {
  font: 12px/1.5 "microsoft yahei", Arial, sans-serif;
}

fieldset,
img {
  border: 0;
}

address,
code,
th,
em {
  font-style: normal;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

/* bass css */
body {
  position: relative;
  margin: 0 auto;
  font: 14px/1.5 "microsoft yahei", Arial, sans-serif;
  color: #666;
  overflow: hidden;
}

.wrapper {
  margin: 0 auto;
  width: 1412px;
}

.clearfix:after {
  content: "";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

.clear {
  clear: both;
}

a {
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.center {
  text-align: center;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.transparent {
  opacity: 0;
}

.hide {
  display: none !important;
}

html,
body {
  height: 100%;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.media-con {
  position: absolute;
  right: 155px;
  top: 30px;
  font-size: 0;
}

.media-con .qr-con {
  display: none;
  position: absolute;
  top: 60px;
  height: 551px;
  width: 434px;
  z-index: 2;
  background: url(http://image.jayme.fans/www/static/img/transparent.png);
}

.media-con .qr-con p {
  margin: 33px auto 0;
  text-align: center;
  width: 300px;
  font-size: 20px;
  color: #ff176d;
}

.media-con .qr-con-wrapper {
  margin-top: 25px;
  height: 525px;
  padding-top: 1px;
  position: relative;
  background: #fff;
}

.media-con .qr-con-wrapper:before {
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom: 12px solid #fff;
  position: absolute;
  content: "";
  top: -12px;
}

.media-con .btn-con {
  height: 70px;
  width: 70px;
  margin-left: 70px;
  display: inline-block;
  position: relative;
}

.media-con .btn-con i {
  display: block;
  width: 100%;
  height: 100%;
  background: url(http://image.jayme.fans/www/static/img/spr_dl.png) no-repeat;
  cursor: pointer;
}

.media-con .wechat-con {
  margin-left: 0 !important;
}

.media-con .wechat-con:hover i {
  background-position: 0 -442px;
}

.media-con .wechat-con:hover .qr-wechat {
  display: block;
}

.media-con .wechat-con i {
  background-position: 0 -362px;
}

.media-con .wechat-con .qr-con {
  left: 0;
}

.media-con .wechat-con .qr-con-wrapper:before {
  left: 29px;
}

.media-con .weibo-con:hover i {
  background-position: 0 -278px;
}

.media-con .weibo-con:hover .qr-weibo {
  display: block;
}

.media-con .weibo-con i {
  background-position: 0 -199px;
}

.media-con .weibo-con .qr-con {
  left: -140px;
}

.media-con .weibo-con .qr-con .qr-con-wrapper:before {
  left: 169px;
}

.media-con .video-con:hover i {
  background-position: 0 -119px;
}

.media-con .video-con:active i {
  background-position: 0 -520px;
}

.media-con .video-con i {
  background-position: 0 -40px;
}

.media-con .qr-wrapper {
  margin-top: 80px;
}

.qr-wrapper {
  height: 273px;
  padding-top: 1px;
  width: 274px;
  background: url(http://image.jayme.fans/www/static/img/spr_dl.png) -96px 0;
  margin: 0 auto;
}

.qr-wrapper img {
  width: 224px;
  height: 222px;
  display: block;
  margin: 26px auto 0;
}

.download-con {
  position: absolute;
  left: 133px;
  bottom: 37px;
}

.download-con .logo {
  float: left;
  width: 339px;
  height: 64px;
}

.download-con .logo img {
  width: 100%;
  height: 100%;
}

.download-con .btn-download {
  display: block;
  height: 64px;
  width: 423px;
  background: url(http://image.jayme.fans/www/static/img/spr_dl.png) -96px -325px;
  color: #fff;
  font-size: 18px;
  line-height: 64px;
  text-align: center;
  font-weight: bold;
}

.download-con .download-wrapper {
  margin-left: 70px;
  float: left;
  position: relative;
  background: url(http://image.jayme.fans/www/static/img/transparent.png);
}

.download-con .download-wrapper:hover .btn-download {
  background-position: -96px -406px;
  color: #b70044;
}

.download-con .download-wrapper:hover .qr-download {
  display: block;
}

.download-con .qr-download {
  z-index: 2;
  display: none;
  position: absolute;
  bottom: 43px;
  left: -160px;
  height: 600px;
  width: 729px;
  background: url(http://image.jayme.fans/www/static/img/spr_dl.png) -753px 0 no-repeat;
}

.download-con .qr-download .qr-wrapper {
  margin-top: 80px;
}

.download-con .qr-download p {
  margin: 40px auto 0;
  text-align: center;
  width: 400px;
  font-size: 20px;
  color: #ff176d;
}

.video-popup {
  display: none;
  position: fixed;
  z-index: 12;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.video-popup.show {
  display: block;
}

.video-popup .close {
  position: absolute;
  height: 40px;
  width: 40px;
  background: url(http://image.jayme.fans/www/static/img/spr_dl.png);
  right: -20px;
  top: -20px;
}

.video-popup .video-main {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -318px 0 0 -567px;
  z-index: 12;
  width: 1133px;
  height: 637px;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}

.jvr-logo {
  width: 209px;
  height: 46px;
  position: absolute;
  font-size: 0;
  left: 133px;
  top: 52px;
  z-index: 3;
}

.jvr-logo .logo1 {
  width: 92px;
  height: 46px;
  display: inline-block;
  vertical-align: middle;
}

.jvr-logo .logo2 {
  width: 89px;
  height: 46px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.jvr-logo .logo2:hover .logo-popup {
  display: block;
}

.jvr-logo .logo-split {
  display: inline-block;
  height: 46px;
  width: 1px;
  background: #ff176d;
  margin: 0 13px;
  vertical-align: middle;
}

.jvr-logo .logo-popup {
  display: none;
  position: absolute;
  top: 61px;
  left: -118px;
  width: 602px;
  height: 772px;
  background: url(http://image.jayme.fans/www/static/img/logo-popup.png);
  padding: 50px 65px 0;
  background-size: 100% 100%;
  font-size: 24px;
}

.jvr-logo .logo-popup h4 {
  color: #333;
  margin-bottom: 30px;
}

.jvr-logo .logo-popup .emphasize {
  color: #ff176d;
}

.jvr-logo .logo-popup p {
  line-height: 1.7;
  margin-bottom: 1em;
  color: #333;
}

.copyright {
  opacity: 0.4;
  filter: alpha(opacity=40);
  position: absolute;
  right: 130px;
  bottom: 46px;
  color: #fff;
  font-size: 18px;
  text-align: right;
  z-index: 3;
}

.copyright a {
  color: #fff;
}

.audio-container {
  display: none;
}

.right-mask {
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 660px;
  background: #ff176d;
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -84px 0 0 -64px;
}

.loading i {
  width: 128px;
  height: 128px;
  background: url(http://image.jayme.fans/www/static/img/loading.gif);
  display: block;
  margin: 0 auto;
}

.loading p {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin-top: 10px;
}

.page {
  display: none;
}

@media screen and (max-width: 1700px) {
  .media-con .qr-con {
    width: 291px;
    height: 370px;
  }

  .media-con .qr-con p {
    font-size: 16px;
    width: 201px;
    margin-top: 23px;
  }

  .media-con .btn-con {
    margin-left: 47px;
  }

  .media-con .wechat-con .qr-con-wrapper:before {
    left: 32px;
  }

  .media-con .weibo-con .qr-con {
    left: -117px;
  }

  .media-con .weibo-con .qr-con .qr-con-wrapper:before {
    left: 151px;
  }

  .media-con .qr-con-wrapper {
    margin-top: 21px;
    height: 352px;
  }

  .media-con .qr-wrapper {
    margin-top: 54px;
  }

  .video-popup .video-main {
    width: 1019px;
    height: 573px;
    margin: -286px 0 0 -509px;
  }

  .download-con .qr-download {
    height: 387px;
    width: 486px;
    background-position: -1486px 0;
    left: -30px;
    bottom: 51px;
  }

  .download-con .qr-download .qr-wrapper {
    margin-top: 54px;
  }

  .download-con .qr-download p {
    margin-top: 27px;
    width: 268px;
    font-size: 16px;
  }

  .qr-wrapper {
    height: 182px;
    width: 182px;
    background-position: -381px 0;
  }

  .qr-wrapper img {
    width: 151px;
    height: 149px;
    margin-top: 16px;
  }

  .jvr-logo .logo-popup {
    width: 482px;
    height: 508px;
    padding: 40px 52px 0;
    background: url(http://image.jayme.fans/www/static/img/logo-popup-s.png);
    font-size: 18px;
  }
}

@media screen and (max-width: 1600px) {

  .media-con,
  .copyright {
    right: 55px;
  }

  .jvr-logo,
  .download-con {
    left: 55px;
  }

  .download-con .download-wrapper {
    margin-left: 30px;
  }

  .download-con .download-wrapper:hover .btn-download {
    background-position: -322px -491px;
  }

  .download-con .download-wrapper .btn-download {
    width: 210px;
    height: 64px;
    background-position: -99px -491px;
  }

  .download-con .download-wrapper .qr-download {
    left: -138px;
  }
}

.jvr-logo .logo-popup .popup-tmp {
  display: none;
}

.jvr-logo .logo-popup.tmp .popup-tmp {
  display: block;
}

.jvr-logo .logo-popup.tmp .popup-default {
  display: none;
}

.jvr-logo .logo-popup.tmp {
  height: 380px !important;
  background-size: 100% 100% !important;
}