.nav-extra-right{
  position: fixed;
  right: 40px;
  max-width: 80px;
  bottom: 3vh;
  z-index: 1001;
}
.nav-extra-right:hover .online-service-message {
  opacity:1;
}

.nav-extra-right .online-service-container {
  margin: 0;
  padding: 0;
}

.nav-extra-right .online-service-block {
  padding: 0;
  width: 100%;
  background: transparent;
}

.nav-extra-right .online-service-modal  {
  width: calc(100% - 70px);
  position: fixed;
  max-width: 600px;
  max-height: 550px;
  height: calc(100% - 200px);
  right:50px;
  bottom:174px;
  border-radius: 20px;
  background-color: #fff;
  -webkit-box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.5);
          box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.5);
  z-index:99;
  display:none;
  -webkit-animation:fadeIn 1s;
          animation:fadeIn 1s;
}



@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.nav-extra-right .online-service-modal.show{
  display: block;
}

.nav-extra-right .online-service-modal .online-service-modal-close{
  position: absolute;
  bottom:-77px;
  right:0px;
  width:80px;
  height:80px;
  border-radius: 50%;
  background-color: rgb(133, 133, 133, 0.9);
  -webkit-box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.5);
          box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.5);
}
.nav-extra-right .online-service-modal .online-service-modal-close::before{
  content:"";
  display: block;
  width: 50%;
  height: 5px;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
  top: 50%;
  -webkit-transform:translateY(-50%) rotate(45deg);
      -ms-transform:translateY(-50%) rotate(45deg);
          transform:translateY(-50%) rotate(45deg);
}
.nav-extra-right .online-service-modal .online-service-modal-close::after{
  content:"";
  display: block;
  width: 50%;
  height: 5px;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
  top: 50%;
  -webkit-transform:translateY(-50%) rotate(-45deg);
      -ms-transform:translateY(-50%) rotate(-45deg);
          transform:translateY(-50%) rotate(-45deg);

}

.online-service-block .online-service-pic {
  max-width: 80px;
  max-height: 80px;
  width: 100%;
  height: 100%;
  display:block;
}

.online-service-pic .online-service-pic-img {
  width: 80px;
  height: 80px;
	cursor: pointer;
}

.online-service-block{
  list-style-type:none
}


.footer .scroll-top-button {
  right: 110px;
}

.background-fixed{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 98;
  display: none;
}
.background-fixed.show{
  /*display: block; 遮罩移除*/
  display: none;
}

.nav-extra-right {
  bottom: 3vh;
}
.nav-extra-right .online-service-modal {
  max-height: initial;
  height: 90vh;
  right: 130px;
  bottom: 3vh;
}
.nav-extra-right .online-service-modal iframe{
height: 90vh;
border: 0px solid ;
border-radius: 20px;
}
.nav-extra-right .online-service-modal .online-service-modal-close{
bottom: 0;
right: -90px;
cursor: pointer;
}


/*橫版*/
@media screen and  (max-width: 812px){
  .lock{
      overflow: hidden;
      position: fixed;
      width: 100%;
  }
  .nav-extra-right {
    right:10px;
  }
  .nav-extra-right .online-service-modal  {
    right: 84px;
    height: 78vh;
    max-width: 550px;
  }
	.online-service-block .online-service-pic {
		max-width: 64px;
		max-height: 64px;
	}
	.online-service-pic .online-service-pic-img {
		width: 64px;
		height: 64px;
	}

  .nav-extra-right .online-service-modal .online-service-modal-close{
    width: 64px;
    height: 64px;
    right: -74px;
  }
}

/* 直版 */
@media screen and (max-width: 600px){
  .nav-extra-right {
    right:5px;
    bottom: 3vh;
  }
  .nav-extra-right .online-service-modal {
    width: calc(100% - 10px);
    height: calc(85vh - 64px);
    bottom: calc(3vh + 64px);
    right: 5px;
  }
  .nav-extra-right .online-service-modal .online-service-modal-close{
    bottom: -64px;
    right: 0;
  }
  .nav-extra-right:hover .online-service-message {
    opacity: 0;
  }
}


/*對話框*/
.online-service-message {
	position: absolute;
  top: 10%;
  left: -180px;
  box-sizing: border-box;
  font-family: sans-serif, 'Helvetica Neue', '微軟正黑體', 'Helvetica', 'Arial', 'PingFangTC-Light', 'STHeitiTC-Light', 'Microsoft JhengHei';
  font-size: 14px;
  line-height: 20px;
  letter-spacing:0px;
	background-color: #fff;
	color: rgb(56, 56, 56);
  text-align: center;
	border-radius: 10px;
	max-width: 173px;
  font-weight: normal;
	padding: 0.3em 0.5em;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	opacity:0;
	animation: messageAnimate 4s;
  animation-fill-mode:forwards;
  visibility: hidden;
}
/*訊息動畫*/
@keyframes messageAnimate{
	0%{
    visibility: visible;
	}
	5%{
		transform: translateX(6%) ;
	}
	15%{
		transform: translateX(-2%) scaleX(.95);
		opacity:1;
	}
	16%{
		transform: translateX(0%) scaleX(1);
	}
	98%{
		opacity:1;
	}
	100%{
		opacity:0;
    visibility: hidden;
	}
}
.online-service-message:before,.online-service-message:after{
	position:absolute;
	top: 35%;
	content:"";
	left:calc(100% + 1px);
	width: 0;
	height: 0;
	border-width:8px;
	border-style:solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: rgba(0, 0, 0, 0.5);
}
.online-service-message:after {
	left:100%;
	border-left-color: #fff;
}