﻿.viewer-list-wrapper .pop_up{
	display: block;
	width: 278px;
	height: auto;
	position: fixed;
	right: 10px;
	z-index: 999;
	background-color: #000;
	opacity: 0.7;
	overflow: hidden;
    transition: all .2s ease-in;
    border-radius: 8px;
}.MOBILE .viewer-list-wrapper .pop_up{
    opacity: 0.8;
}

.MOBILE .viewer-list-wrapper .pop_up{
	width: 230px;
}
.PC .viewer-list-wrapper .pop_up_box .pop_01{
	bottom: 120px;
}

.PC .viewer-list-wrapper .pop_up_box .pop_02 {
	bottom: 140px;
}

.PC .viewer-list-wrapper .pop_up_box .pop_03 {
	bottom: 214px;
}

.MOBILE .viewer-list-wrapper .pop_up_box .pop_01{
	bottom: 120px;
}

.MOBILE .viewer-list-wrapper .pop_up_box .pop_02 {
	bottom: 140px;
}

.MOBILE .viewer-list-wrapper .pop_up_box .pop_03 {
	bottom: 240px;
}

.viewer-list-wrapper .pop_up .pop_content{
	color: #fff;
	padding: 8px;
	font-size: 14px;
	font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
	margin-right: 24px;
	text-align: left;
  line-height: 1.3;	
}


.viewer-list-wrapper .pop_up .close_btn {
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	right: 8px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	z-index: 999;
}

.viewer-list-wrapper .pop_up .close_btn a {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
}

.viewer-list-wrapper .pop_up .close_btn a::before,
.viewer-list-wrapper .pop_up .close_btn a::after {
	position: absolute;
	top: 0;
	left: 48%;
	width: 2px;
	height: 20px;
	background-color: #fff;
	content: "";
	-webkit-transform: rotate(-45deg);
}
.viewer-list-wrapper .pop_up .close_btn a::after {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.viewer-list-wrapper .pop_up .close_btn a::before {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

 #viewer-marquee-horizontal .pop_up {
    display: block;
    width: 278px;
    height: auto;
    position: fixed;
    right: 10px;
    z-index: 999;
    background-color: #000;
    opacity: 0.7;
    overflow: hidden;
    transition: all .2s ease-in;
    border-radius: 8px;
}
#viewer-marquee-horizontal  .pop_up .close_btn {
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    right: 8px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    z-index: 999;
} 
 #viewer-marquee-horizontal .pop_up .close_btn a {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
}
 
  .viewer-list-wrapper{
    position: relative;
    width: 298px;
    height: 35px;
    right: 10px;
  }
  #viewer-marquee-horizontal .pop_up_box{
    position: relative;
    height: 35px;
    margin-bottom:5px;
  }
  #viewer-marquee-horizontal .pop_up_box .pop_up{width: inherit; height: inherit;}
  #viewer-marquee-horizontal .pop_up{
    position: unset;
  }
  #viewer-marquee-horizontal .pop_up_box .pop_01 {
    bottom: 120px;
}
  #viewer-marquee-horizontal .pop_up .pop_content {
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-family: 微軟正黑體, "Microsoft JhengHei", Helvetica, Arial, sans-serif;
    margin-right: 24px;
    text-align: left;
    line-height: 1.3;
    padding: 8px;
}
  .slide {
    animation: slide 3s;
    -webkit-animation: slide 3s;
    /* -webkit-animation-name: slide;
    animation-name: slide;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in; */
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      visibility: hidden;
      right: -490px;
    }
    100% {
      opacity: 1;
      visibility: visible;
      right: 10px;
    }
  }
  @keyframes slide {
    0% {
      opacity: 0;
      visibility: hidden;
      right: -490px;
    }
    100% {
      opacity: 1;
      visibility: visible;
      right: 10px;
    }
  } 