body { overscroll-behavior: none;}
.nickName{
  color: #fff;
  font-size: 2.6vmin;
}
#audioBox .clue{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#audioBox .clue p{
  text-align: center;
  background:rgba(255,255,255,1);
  opacity:0.5;
  border-radius:1vmin;
  margin:auto;
  font-size: 3.5vmin;
  color: #222222;
  padding: 1vmin 1.5vmin;
  margin: 2.5vmin 10vmin 0 10vmin;
}
.dialogue{
  height: 80vmin;
  width: 100%;
  background-color: #5260C2;
  position: static; 
  overflow-y: scroll;
  overscroll-behavior: none;
  transition: none;
  -webkit-overflow-scrolling:auto
}

/* 別人發起對話  角色A */
.other .womanPhoto{
  margin-right: 3.46vmin;
  width: 10.4vmin;
  height: 10.4vmin;
  border-radius: 50%;
}
.other .mobility_A {
  margin-left: 4.26vmin;
  margin-right: 4.26vmin;
  background-color:#ffffff;
  -webkit-border-radius: 1.5vmin;
  -moz-border-radius: 1.5vmin;
  border-radius: 1.5vmin;
  position: relative;
  width: 21.9vmin;
  height: 7.73vmin;
  line-height: 7.73vmin;
}
.other .voiceA {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1.5vmin 0 0 0;
}
.other .voiceA .mobility_A:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 99%;
  top: 2.6vmin;
  border-left: 2.66vmin solid #ffffff;
  border-top: 1.66vmin solid transparent;
  border-bottom: 1.66vmin solid transparent;
}
/* 別人發起對話   角色B */
.other .voiceB {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.other .manPhoto{
  margin-left: 3.46vmin;
  width: 10.4vmin;
  height: 10.4vmin;
  border-radius: 50%;
}
.other .voiceB .mobility_A:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 99%;
  top: 2.66vmin;
  border-right: 2.66vmin solid #ffffff;
  border-top: 1.6vmin solid transparent;
  border-bottom: 1.6vmin solid transparent;
}
.secondA, .secondB{
  font-size: 4.26vmin
}

.language{
  width: 71vmin;
  background: #4a56ae;
  border-radius: 1vmin;
  padding: 2vmin;
  margin: 1vmin;
}
.other .languageB{
  font-size: 3.5vmin;
  margin-left: 3.5vmin;
  margin-top: 1vmin;
}
.englishA, .textA, .englishB, .textB{

  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
}

.languageA{
  margin-right: 3.46vmin;
  font-size: 3.5vmin;
  margin-top: 1vmin;
}
.textA, .textB{
  font-size: 2.6vmin;
}
.other .voiceA .box {
  box-sizing: border-box;
  position: absolute;
  right: 4vmin;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.other .voiceA .wifi-symbol {
  width: 12.95vmin;
  height: 12.95vmin;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  position: relative;
}
.other .voiceA .wifi-circle {
  border: 0.5vmin solid #999999;
  border-radius: 50%;
  position: absolute;
}
.other .voiceA .first {
  background: #cccccc;
  top: 12vmin;
  left: 12vmin;
}
.other .voiceA .second {
  width: 3.2vmin;
  height: 3.2vmin;
  top: 10.66vmin;
  left: 10.66vmin;
}
.other .voiceA .third {
  width: 5.33vmin;
  height: 5.33vmin;
  top: 9.33vmin;
  left: 9.33vmin;
}
.other .voiceB .box {
  box-sizing: border-box;
  position: absolute;
  left: 4vmin;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.other .voiceB .wifi-symbol {
  width: 12.95vmin;
  height: 12.95vmin;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: relative;
}
.other .voiceB .wifi-circle {
  border: 0.5vmin solid #999999;
  border-radius: 50%;
  position: absolute;
}
.other .voiceB .first {
  background: #cccccc;
  top: 12vmin;
  left: 12vmin;
}
.other .voiceB .second {
  width: 3.2vmin;
  height: 3.2vmin;
  top: 10.66vmin;
  left: 10.66vmin;
}
.other .voiceB .third {
  width: 5.33vmin;
  height: 5.33vmin;
  top: 9.33vmin;
  left: 9.33vmin;
}
.aSecond {
  animation: fadeInOut 1s infinite 0.2s;
}
.aThird {
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}
#playbtns {
  position: absolute;
  top: 0!important;
  left: 0!important;
  width: 100%;
  height: 100%;
  z-index: 999;
  margin: 0 !important;
}
#playbtns div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: block;
  width: 25.6vmin;
  height: 25.6vmin;
  background-image: url("../ch-images/images/opusShare/btn_share_play.png");
  background-size: 100% 100%;
}
/* 自己 */
#mineA .voiceA {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 3vmin 0 0 0;
}
#mineA .mobility_A {
  margin-left: 4.26vmin;
  margin-right: 4.26vmin;
  background-color: #ffffff;
  -webkit-border-radius: 1.5vmin;
  -moz-border-radius: 1.5vmin;
  border-radius: 1.5vmin;
  position: relative;
  width: 21.9vmin;
  height: 7.73vmin;
  line-height: 7.73vmin;
}
#mineA .womanPhoto{
  margin-right: 3.46vmin;
  width: 10.4vmin;
  height: 10.4vmin;
  border-radius: 50%
}
#mineA .voiceA .mobility_A:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 99%;
  top: 2.6vmin;
  border-left: 2.66vmin solid #ffffff;
  border-top: 1.66vmin solid transparent;
  border-bottom: 1.66vmin solid transparent;
}

#mineA .voiceA .box {
  box-sizing: border-box;
  position: absolute;
  right: 4vmin;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#mineA .voiceA .wifi-symbol {
  width: 12.95vmin;
  height: 12.95vmin;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  appearance: none;
  backface-visibility: hidden;
  transform: rotate(-45deg) translate3d(0, 0, 0);
}
#mineA .voiceA .wifi-circle {
  border: 0.5vmin solid #999999;
  border-radius: 50%;
  position: absolute;
}
#mineA .voiceA .first {
  background: #cccccc;
  top: 12vmin;
  left: 12vmin;
}
#mineA .voiceA .second {
  width: 3.2vmin;
  height: 3.2vmin;
  top: 10.66vmin;
  left: 10.66vmin;
}
#mineA .voiceA .third {
  width: 5.33vmin;
  height: 5.33vmin;
  top: 9.33vmin;
  left: 9.33vmin;
}


/* 自己  B */
#mineB .voiceB {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
#mineB .manPhoto{
  margin-left: 3.46vmin;
  width: 10.4vmin;
  height: 10.4vmin;
  border-radius: 50%;
}
#mineB .voiceB .mobility_A {
  margin-left: 4.26vmin;
  margin-right: 4.26vmin;
  background-color:#ffffff;
  -webkit-border-radius: 1.5vmin;
  -moz-border-radius: 1.5vmin;
  border-radius: 1.5vmin;
  position: relative;
  width: 21.9vmin;
  height: 7.73vmin;
  line-height: 7.73vmin;
}

#mineB .voiceB .mobility_A:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 99%;
  top: 2.66vmin;
  border-right: 2.66vmin solid #ffffff;
  border-top: 1.6vmin solid transparent;
  border-bottom: 1.6vmin solid transparent;
}

#mineB .voiceB .box {
  box-sizing: border-box;
  position: absolute;
  left: 4vmin;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
#mineB .voiceB .wifi-symbol {
  width: 12.95vmin;
  height: 12.95vmin;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  appearance: none;
  backface-visibility: hidden;
  transform: rotate(135deg) translate3d(0, 0, 0);

}
#mineB .voiceB .wifi-circle {
  border: 0.5vmin solid #999999;
  border-radius: 50%;
  position: absolute;
}
#mineB .voiceB .first {
  background: #cccccc;
  top: 12vmin;
  left: 12vmin;
}
#mineB .voiceB .second {
  width: 3.2vmin;
  height: 3.2vmin;
  top: 10.66vmin;
  left: 10.66vmin;
}
#mineB .voiceB .third {
  width: 5.33vmin;
  height: 5.33vmin;
  top: 9.33vmin;
  left: 9.33vmin;
}
#mineB .languageB{
  font-size: 3.5vmin;
  margin-left: 3.5vmin;
  margin-top: 1vmin;
}
.scene-box{
  width: 100%;
  margin: 10px 0;
}
.media-box{
  width: 25vmin;
  height: 15vmin;
  margin: 0 auto;
  position: relative;
} 
.media-box .meida-conent{
  border-radius: 1vmin;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #fff;
  object-fit: cover;
}
.scene-text{
  margin-top: 8px ;
  color: #FFFFFF;
  font-size: 2.5vmin;
  text-align: center;
}
.source-box{
  display: flex;
  width: 100%;
  margin-top: 2vmin;
  position: relative;
}
.scene-box-left{
  justify-content: flex-end;
}

.source-box .source-conent{
  border-radius: 1vmin;
  overflow: hidden;
  width: 14vmin;
  height: 14vmin;
  object-fit: cover;
  background-color: #fff;
  display: block;
}
.source-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 6vmin;
  height: 6vmin;
}
.language-wrap{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.popup-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
}
.popup-box .popup-conent{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: calc(100vw / 1.778);
  object-fit: contain;
  background: #000;
  z-index: 1000000;
}
.close-pop{
  position: absolute;
  left: 50%;
  bottom: 8vmin;
  transform: translateX(-50%);
  width: 7vmin;
  height: 7vmin;
  z-index: 10;
  z-index: 99999999;
}