@media (max-width:992px){
    body,html{
        font-size:18px;
    }
}
@media (max-width:767px){
    body,html{
        font-size:16px;
    }
}
@media (max-width:414px){
    body,html{
        font-size:14px;
    }
}
@media (max-width:360px){
    body,html{
        font-size:10px;
    }
}
.dot-wrap{
	position: absolute;
	top: 0;
	left: 0;
	width:5rem;
	height:5rem;
	margin-left:-0.5rem;
	margin-top:-0.5rem;
}
.dot-container {
  position:relative;
  width:5rem;
  height:5rem;
  cursor: pointer;
}
.dot .icon-click{
	width: 2rem;
    height: 2rem;
    position: absolute;
    left: -0.35rem;
    top: .2rem;
    opacity: 1;
    -webkit-animation-name:'fadeIn';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 2s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 2s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes fadeIn {
   0% {
    opcity:0.6;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}
.dot:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:1rem;
  height:1rem; 
  background-color: rgba(255,255,255,0);
  border-radius: 50%;
}

.dot:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:0rem;
  height:0rem; 
  background-color: rgba(255,255,255,.5);
  border-radius: 50%;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 2s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 2s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
}
@keyframes ripple {
   0% {
    left:.5rem;
    top:.5rem;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-2rem;
    top:-2rem;
    opacity: 0;
    width:5rem;
    height:5rem;
  }
}
.js-dot{
	position: relative;
}
.hidden{
	display: none;
}
.fancybox-title{
	font-size: 16px!important;
	font-weight: bold;
	margin-bottom: 10px;
}
.only-pc{
	display: block;
}
.only-mobile{
	display: none;
}
@media (max-width: 767px) {
	.only-pc{
		display: none!important;
	}
	.only-mobile{
		display: block!important;
	}
}

.voice-icon {
	width: 2.4rem;
    height: 2.4rem;
    background: #5a798b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -0.64rem;
    top: -0.64rem;
    opacity: 1;
    -webkit-animation-name:'fadeIn';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 2s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 2s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
}

.wave {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.wave span {
	width: 0.25rem;
	height: 1rem;
	background: white;
	border-radius: 0.125rem;
	animation: bounce 0.8s ease-in-out infinite;
}

.wave span:nth-child(1) {
	animation-delay: 0s;
}

.wave span:nth-child(2) {
	animation-delay: 0.2s;
}

.wave span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 100% { height: 0.8rem; }
  50% { height: 1.2rem; }
}