dwweb-h5/2018专题/1806全景图专题-H5/dist/scene3.e967b451.css

@charset "UTF-8";
@import url("photo-sphere-viewer.min.bf28a8e3.css");
body {
  font-family: arial,helvetica,sans-serif;
  font-size: 13px;
  font-size-adjust: none;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.4; }

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
  margin: 0;
  padding: 0; }

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

table {
  font-size: inherit; }

input, select {
  font-family: arial,helvetica,clean,sans-serif;
  font-size: 100%;
  font-size-adjust: none;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: normal; }

button {
  overflow: visible; }

th, em, strong, b, address, cite {
  font-style: normal;
  font-weight: normal; }

li {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none; }

img, fieldset {
  border: 0 none; }

ins {
  text-decoration: none; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%; }

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

#photosphere {
  width: 100%;
  height: 100%; }

·
.link {
  color: #333333;
  text-decoration: none; }

.btn {
  color: #ffffff; }

.pub-btn {
  color: #ffffff;
  line-height: 0.71964rem;
  border-radius: 0.41979rem;
  background-color: #ff6600;
  height: 0.71964rem;
  padding: 0 0.47976rem;
  position: absolute;
  font-size: 0.28786rem;
  cursor: pointer;
  transition: .2s all ease-in-out; }
  .pub-btn:hover {
    background-color: #e45d03; }

.watch-movie-btn {
  right: 0.17991rem;
  bottom: 0.17991rem; }

.wrapper {
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.3988rem; }

.wrapper img {
  width: 100%; }

.nav {
  position: fixed;
  top: 0.35982rem;
  left: 0.35982rem;
  z-index: 99; }
  .nav a {
    float: left;
    text-decoration: none;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    line-height: 0.83958rem;
    font-size: 0.21589rem;
    font-weight: bold;
    width: 2.15892rem;
    text-align: center;
    cursor: pointer;
    transition: .2s all ease-in-out; }
    .nav a.current {
      opacity: 1;
      background-color: #ff6600;
      color: #ffffff;
      text-shadow: 0px 0 1px #ffffff; }
    .nav a.disable {
      background: url("lock.7a624bd5.png") 0.11994rem center no-repeat;
      color: #4c4c4c;
      background-color: #070c10;
      background-size: 0.23988rem 0.23988rem;
      pointer-events: none; }
    .nav a:hover {
      opacity: 1; }

.pub-modal {
  position: fixed;
  z-index: 999;
  top: 1.43928rem;
  left: 0.35982rem;
  right: 0.35982rem;
  display: none;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8); }
  .pub-modal.fullscreen-modal {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto; }
  .pub-modal .top-bar {
    padding: 0 0.23988rem;
    height: 0.71964rem;
    line-height: 0.71964rem;
    font-weight: bold;
    color: #ff6600;
    border-bottom: 1px solid #ff6600;
    font-size: 0.28786rem; }
  .pub-modal .container {
    position: relative;
    padding: 0.35982rem;
    box-sizing: border-box; }
  .pub-modal .article-title {
    font-size: 0.33583rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 0.14393rem;
    text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000; }
  .pub-modal .article-text {
    color: #ffffff;
    font-size: 0.28786rem; }

.close-icon {
  float: right;
  width: 0.38381rem;
  height: 0.38381rem;
  margin-top: 0.14393rem;
  cursor: pointer;
  background: url("close-icon.b3fd75de.png");
  background-size: 100%; }

.suggest-modal .container .line {
  position: absolute;
  bottom: 0;
  left: 0.23988rem;
  right: 0.23988rem;
  border-bottom: 1px dotted #808080; }

.suggest-modal .container .poster {
  float: left;
  width: 7.12444rem; }

.suggest-modal .container .introduce {
  position: relative;
  margin-left: 7.43628rem;
  color: #ffffff; }
  .suggest-modal .container .introduce .article-text {
    line-height: 0.50375rem; }

.suggest-modal .tips {
  padding: 0.23988rem; }
  .suggest-modal .tips img {
    float: left;
    width: 1.43928rem;
    height: 1.43928rem;
    margin-left: 0.35982rem;
    border-radius: 50%; }
  .suggest-modal .tips .tips-wrap {
    margin-left: 2.27886rem; }
    .suggest-modal .tips .tips-wrap h3 {
      font-size: 0.35982rem;
      color: #b0e345;
      margin-bottom: 0.11994rem;
      text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
      font-weight: bold; }
    .suggest-modal .tips .tips-wrap p {
      font-size: 0.28786rem;
      color: #ffffff;
      line-height: 1.6; }

.big-modal .left-side {
  float: left;
  width: 7.07646rem; }
  .big-modal .left-side img {
    width: 100%; }
  .big-modal .left-side p {
    margin-top: 0.07196rem;
    color: #ffffff;
    font-size: 0.28786rem;
    line-height: 1.6; }

.big-modal .right-side {
  margin-left: 7.43628rem; }
  .big-modal .right-side .article-text {
    line-height: 1.6;
    margin-bottom: 0.29985rem; }
    .big-modal .right-side .article-text:last-of-type {
      margin-bottom: 0; }

.small-modal img {
  float: left;
  width: 7.10045rem; }

.small-modal .article-text {
  margin-left: 7.34033rem;
  line-height: 1.6; }

.snow-circle {
  width: 0.28786rem;
  opacity: .8;
  height: auto; }

#psv-marker-location-foot {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-deer {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-rabit {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-beer {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-lake {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-road {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-lynx {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-bird {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

#psv-marker-location-fox {
  border-radius: 50%;
  animation: jump 1.3s ease-in-out infinite; }

@keyframes jump {
  0% {
    margin-top: 0;
    opacity: .8;
    width: 35px;
    height: 35px; }
  50% {
    margin-top: -15px;
    opacity: 1;
    width: 40px;
    height: 40px; }
  100% {
    margin-top: 0;
    opacity: .8;
    width: 35px;
    height: 35px; } }

.psv-tooltip {
  cursor: pointer; }

.hide-video {
  opacity: 0;
  transform: translate(-3000px); }

.poster {
  cursor: pointer; }

.video-wrapper {
  position: fixed;
  z-index: 1999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4); }
  .video-wrapper video {
    width: 9.5952rem; }
  .video-wrapper .part-screen {
    position: relative; }
  .video-wrapper .close-icon {
    position: absolute;
    z-index: 999;
    top: -0.17991rem;
    right: -0.17991rem;
    margin-top: 0; }

.fullscreen-video {
  position: fixed;
  z-index: 1999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6); }
  .fullscreen-video video {
    width: 10.1949rem;
    height: auto; }

.close-full-video {
  position: absolute;
  z-index: 2000;
  top: 0.05997rem;
  right: 0.11994rem; }

.mod-full-picture {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .mod-full-picture .go-back {
    position: absolute;
    top: 0.35982rem;
    right: 0.35982rem;
    padding: 0 0.47976rem; }
  .mod-full-picture .bg-move {
    position: absolute;
    z-index: -1;
    top: -40px;
    right: -40px;
    left: -40px;
    bottom: -40px; }

#lookout-pic {
  background: url("lookout-pic.05ca05b8.jpg") center center no-repeat;
  background-size: cover; }

#lookout-snow-pic {
  background: url("P2-lookout.bddb85b2.jpg") center center no-repeat;
  background-size: cover; }

#lookout-hunt-pic {
  background: url("P3-lookout.7287f90b.jpg") center center no-repeat;
  background-size: cover; }

#lake-pic .bg-move {
  background: url("P1-lake.99042115.jpg") center center no-repeat;
  background-size: cover; }

#road-pic .bg-move {
  background: url("P2-road.81c6be7a.jpg") center center no-repeat;
  background-size: cover; }

#p3-road-pic .bg-move {
  background: url("P3-road.f0075e0c.jpg") center center no-repeat;
  background-size: cover; }

.e-tips {
  position: absolute;
  width: 11.994rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: tips 1.2s ease-in-out infinite; }

@keyframes tips {
  0% {
    margin-top: 0; }
  50% {
    margin-top: 0.23988rem; }
  100% {
    margin-top: 0; } }

.loading-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999; }
  .loading-bg .loading-gif {
    position: absolute;
    top: 0.17991rem;
    left: 0.17991rem;
    width: 1.7991rem;
    height: 1.7991rem; }

.loading-bg-scene1 {
  background: url("P1-loading.217a0e9d.jpg") center center no-repeat;
  background-size: cover; }

.loading-bg-scene2 {
  background: url("P2-loading.95e3fd83.jpg") center center no-repeat;
  background-size: cover; }

.loading-bg-scene3 {
  background: url("P3-loading.e64cabe9.jpg") center center no-repeat;
  background-size: cover; }

.hunt-btn {
  display: inline-block;
  position: static;
  margin-top: 0.11994rem;
  box-shadow: none; }

.equit-tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: tips 1.2s ease-in-out infinite; }

.equit-success {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.1964rem;
  border-radius: 0.07196rem;
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 0.5997rem 0 0.23988rem; }
  .equit-success h3 {
    text-align: center;
    color: #fffefe;
    font-size: 0.38381rem;
    font-weight: bold;
    margin-bottom: 0.47976rem;
    text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000; }
  .equit-success .close-equit-btn {
    position: static;
    display: inline-block;
    box-shadow: none;
    padding: 0 0.71964rem; }

.start-equit-btn {
  right: 0.17991rem;
  bottom: 0.17991rem;
  box-shadow: none; }

.equit-modal {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .equit-modal .main {
    margin-top: 0.23988rem; }
  .equit-modal .img-box {
    float: left;
    width: 5.3973rem;
    text-align: center; }
    .equit-modal .img-box img {
      display: inline-block;
      height: auto; }
    .equit-modal .img-box .weapon-img {
      width: 4.30585rem; }
    .equit-modal .img-box .fodder-img {
      width: 2.24288rem; }
    .equit-modal .img-box .bag-b-img {
      width: 3.83808rem; }
    .equit-modal .img-box .aim-img {
      width: 4.36582rem; }
    .equit-modal .img-box .bag-b-hunt-img {
      width: 2.3988rem; }
  .equit-modal .info {
    margin-left: 5.63718rem;
    color: #ffffff;
    font-size: 0.28786rem; }
    .equit-modal .info .title {
      font-size: 0.33583rem;
      margin-bottom: 0.11994rem;
      color: #ffffff;
      font-weight: bold; }
    .equit-modal .info .text {
      line-height: 2; }

.equit-nav {
  display: flex; }
  .equit-nav .nav-item-wrap {
    flex: 1;
    height: 0.71964rem;
    line-height: 0.71964rem;
    text-align: center;
    cursor: pointer; }
    .equit-nav .nav-item-wrap.active {
      background: url("euqit-nav-bg.ea6b18b2.png") center center no-repeat;
      background-size: auto 0.71964rem; }
  .equit-nav .nav-item {
    display: inline-block;
    line-height: 0.38381rem;
    color: #fffefe;
    font-size: 0.35982rem;
    font-weight: bold; }
    .equit-nav .nav-item i {
      display: inline-block;
      width: 0.38381rem;
      height: 0.43178rem;
      vertical-align: bottom; }
    .equit-nav .nav-item .weapon-icon {
      background: url("weapon-icon.f9aad7af.png") center center no-repeat;
      background-size: 100%; }
    .equit-nav .nav-item .fodder-icon {
      background: url("fodder-icon.b04fbce3.png") center center no-repeat;
      background-size: 100%; }
    .equit-nav .nav-item .aim-icon {
      background: url("glass-icon.3dc9da25.png") center center no-repeat;
      background-size: 100%; }

.book-icon {
  position: fixed;
  z-index: 10;
  width: 1.87106rem;
  height: 0.5997rem;
  background: url("book-icon.b5312cb3.jpg") center center no-repeat;
  background-size: 100%;
  color: #ffffff;
  right: 0.23988rem;
  bottom: 0.23988rem;
  cursor: pointer; }

.fade-in {
  opacity: 0; }

.delay-200 {
  animation-delay: 200ms; }

.delay-400 {
  animation-delay: 400ms; }

.progress-modal {
  position: fixed;
  width: 5.997rem;
  height: 2.87856rem;
  box-sizing: border-box;
  padding-top: 0.47976rem;
  top: 1.1994rem;
  right: 0.23988rem;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #ff620c; }
  .progress-modal .tips {
    text-align: center;
    color: #ffffff;
    font-size: 0.28786rem;
    margin-bottom: 0.28786rem; }
  .progress-modal .progress {
    text-align: center;
    font-size: 0.23988rem;
    color: #ffffff; }

.reset-modal {
  display: none;
  z-index: 99;
  top: 50%;
  left: 50%;
  margin-top: -1.43928rem;
  margin-left: -2.9985rem; }
  .reset-modal .tips {
    font-weight: bold;
    font-size: 0.35982rem;
    text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000; }
  .reset-modal .btn-wrap {
    width: 3.5982rem;
    margin: 0.71964rem auto 0 auto; }
  .reset-modal .btn {
    display: inline-block;
    width: 1.1994rem;
    height: 0.5997rem;
    line-height: 0.5997rem;
    text-align: center;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 0.28786rem;
    cursor: pointer; }
    .reset-modal .btn:hover {
      background-color: #e45d03; }
  .reset-modal .yes-btn {
    float: left; }
  .reset-modal .no-btn {
    float: right; }

.book-success-modal {
  display: block;
  background-color: rgba(0, 0, 0, 0.9); }
  .book-success-modal .btn-wrap {
    text-align: center; }
  .book-success-modal .tips {
    font-size: 0.33583rem; }

.complete-modal {
  background-color: rgba(0, 0, 0, 0.6);
  width: 7.1964rem;
  height: auto;
  padding: 0.35982rem 0.23988rem;
  display: none;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  .complete-modal .tips {
    font-weight: bold;
    text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000; }
  .complete-modal .btn-wrap {
    width: 2.15892rem;
    margin: 0 auto; }
  .complete-modal .btn {
    display: inline-block;
    width: 1.43928rem;
    height: 0.71964rem;
    line-height: 0.71964rem;
    text-align: center;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 0.28786rem;
    cursor: pointer; }
    .complete-modal .btn:hover {
      background-color: #e45d03; }

.toolbar-box {
  position: fixed;
  z-index: 99;
  top: 0.35982rem;
  right: 0;
  width: 3.65817rem;
  text-align: center; }
  .toolbar-box .toolbar-icon {
    display: inline-block;
    margin: 0 0.11994rem;
    cursor: pointer;
    width: 0.71964rem;
    height: 0.71964rem;
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%; }
  .toolbar-box .snow-icon:after {
    content: '';
    position: absolute;
    width: 0.35982rem;
    height: 0.35982rem;
    top: 50%;
    left: 50%;
    margin-top: -0.17991rem;
    margin-left: -0.17991rem;
    background: url("snow-icon.7cdc2a40.png") top center no-repeat;
    background-size: 100%; }
  .toolbar-box .snow-icon.close {
    opacity: .6; }
  .toolbar-box .bgm-icon:after {
    content: '';
    position: absolute;
    width: 0.35982rem;
    height: 0.35982rem;
    top: 50%;
    left: 50%;
    margin-top: -0.15592rem;
    margin-left: -0.17991rem;
    background: url("bgm-icon.1c104210.png") top center no-repeat;
    background-size: 100%; }
  .toolbar-box .bgm-icon.pause:after {
    background: url("bgm-icon.1c104210.png") bottom center no-repeat;
    background-size: 100%; }
  .toolbar-box .comment-icon:after {
    content: '';
    position: absolute;
    width: 0.35982rem;
    height: 0.35982rem;
    top: 50%;
    left: 50%;
    margin-top: -0.15592rem;
    margin-left: -0.17991rem;
    background: url("comment-icon.dd2c03a0.png") center center no-repeat;
    background-size: 100%; }
  .toolbar-box .reset-icon:after {
    content: '';
    position: absolute;
    width: 0.35982rem;
    height: 0.35982rem;
    top: 50%;
    left: 50%;
    margin-top: -0.15592rem;
    margin-left: -0.17991rem;
    background: url("reset-btn.fe63d3db.png") center center no-repeat;
    background-size: 100%; }

.four-toolbar .toolbar-icon {
  margin: 0; }

.full-pic-modal {
  display: none;
  left: 0.35982rem;
  right: 0.35982rem;
  top: 1.43928rem;
  position: fixed;
  z-index: 999;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5); }
  .full-pic-modal .top-bar {
    padding: 0 0.23988rem;
    height: 0.71964rem;
    line-height: 0.71964rem;
    font-weight: bold;
    color: #ff6600;
    border-bottom: 1px solid #ff6600;
    font-size: 0.28786rem; }
  .full-pic-modal .container {
    position: relative;
    padding: 0.23988rem;
    box-sizing: border-box; }
  .full-pic-modal p {
    color: #ffffff;
    font-size: 0.28786rem;
    margin-bottom: 0.11994rem;
    line-height: 1.5; }
  .full-pic-modal .eyes-btn {
    margin-left: 0;
    margin-top: 0.17991rem; }

.eyes-btn {
  margin-top: 0.35982rem;
  margin-left: 0.35982rem;
  width: 1.7991rem;
  height: 0.71964rem;
  background: url("eyes-logo.c52ff856.png") no-repeat;
  background-size: 100%;
  cursor: pointer; }

.progress-modal-moblie {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0.35982rem;
  left: 7.07646rem;
  width: 5.27736rem;
  line-height: 0.83958rem;
  height: 0.83958rem;
  border-radius: 0.41979rem;
  font-size: 0.23988rem;
  box-sizing: border-box;
  padding: 0 0.23988rem;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6); }
  .progress-modal-moblie .progress {
    float: right; }

.across-modal {
  position: fixed;
  z-index: 1000;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8); }

.across-modal-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  width: 10.07496rem;
  height: 11.994rem;
  border-radius: 0.23988rem;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center; }
  .across-modal-pop .top-bar {
    height: 1.43928rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid #ff6600; }
  .across-modal-pop p {
    font-size: 0.81559rem;
    color: #ffffff; }
  .across-modal-pop .lock-icon {
    display: inline-block;
    width: 8.15592rem;
    height: 8.15592rem;
    background: url("orient-lock-pic.94c18e19.png") center center no-repeat;
    background-size: 100%; }
  .across-modal-pop .icon {
    text-align: center; }

.equit-full-video {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center; }
  .equit-full-video video {
    width: 100%;
    height: auto; }

.equit-bag {
  position: absolute;
  bottom: 0.11994rem;
  height: 1.54723rem;
  width: 1.07946rem; }

.bag-a {
  left: 0.47976rem;
  background: url("bag-a.46cecb91.png") center center no-repeat;
  background-size: 100%; }
  .bag-a.bag-a-active {
    background: url("bag-a-active.819ecd74.png") center center no-repeat;
    background-size: 100%; }

.bag-b {
  left: 4.31784rem;
  background: url("bag-b.af62e63b.png") center center no-repeat;
  background-size: 100%; }
  .bag-b.bag-b-active {
    background: url("bag-b-active.bc340b72.png") center center no-repeat;
    background-size: 100%; }
.comment-page {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: url("comment-bg.fe2b9b84.jpg") center center no-repeat;
  background-size: cover; }
  .comment-page .book-header {
    height: 1.1994rem;
    line-height: 1.1994rem;
    background: url("hunter-logo.80ed5834.png") 10px center no-repeat;
    background-size: 9.42729rem 0.75562rem;
    padding-left: 10.7946rem; }
  .comment-page .mod-btn {
    display: inline-block;
    width: 1.91904rem;
    line-height: 0.5997rem;
    height: 0.5997rem;
    word-spacing: 4px;
    text-align: center;
    color: #fffefe;
    font-size: 0.23988rem;
    background-color: #080807;
    margin-right: 0.55172rem;
    cursor: pointer; }
    .comment-page .mod-btn.active {
      background-color: #ff6600;
      color: #ffffff; }
  .comment-page .go-back-btn {
    float: right;
    width: 1.89505rem;
    line-height: 0.7916rem;
    font-size: 0.23988rem;
    background-color: #ff6600;
    color: #ffffff;
    border-radius: 0.3958rem;
    text-align: center;
    margin-top: 0.35982rem;
    margin-right: 0.23988rem;
    cursor: pointer; }
  .comment-page .page-comment {
    display: none; }
  .comment-page .page-book {
    overflow: auto; }
  .comment-page .fl {
    float: left; }
  .comment-page .fr {
    float: right; }
  .comment-page .book-modal {
    padding: 0.23988rem;
    margin: 0 0.35982rem;
    border-top: 2px solid #ff6600;
    background-color: rgba(0, 0, 0, 0.5); }
    .comment-page .book-modal img {
      width: 4.1979rem;
      height: auto; }
      .comment-page .book-modal img.fr {
        margin-left: 0.23988rem; }
      .comment-page .book-modal img.fl {
        margin-right: 0.23988rem; }
    .comment-page .book-modal .info {
      margin-right: 4.43778rem; }
    .comment-page .book-modal h3 {
      color: #ffffff;
      font-size: 0.35982rem;
      margin-bottom: 0.11994rem; }
    .comment-page .book-modal p {
      color: #ffffff;
      font-size: 0.28786rem;
      line-height: 1.6; }
  .comment-page .book-btn-bottom {
    display: block;
    width: 2.49475rem;
    margin: 0.5997rem auto;
    height: 0.83958rem;
    line-height: 0.83958rem;
    cursor: pointer;
    background-color: #ff6600;
    color: #ffffff;
    text-align: center;
    text-decoration: none; }
  .comment-page .poster-wrapper {
    text-align: center; }
    .comment-page .poster-wrapper img {
      display: inline-block;
      width: 3.26237rem;
      margin: 0 0.38381rem; }
  .comment-page video {
    width: 11.994rem; }
  .comment-page .page-comment {
    width: 1100px;
    margin: 0 auto; }
    .comment-page .page-comment iframe {
      height: 10.07496rem;
      overflow: auto; }