﻿@charset "utf-8";
.module0018{
	width:73vw;
	width:var(--mainwidth);
	height: auto;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
}
.module0018_left{
	width:35%;
}
.module0018_entitle{
	width:100%;
	height: auto;
	font-size: 4.687rem;
	font-family: Arial;
	color: var(--OneColor);
	font-weight: bold;
	margin-top: 10vh;
}
.module0018_title{
	width:100%;
	height: auto;
	font-size: 1.625rem;
	color: var(--OneColor);
}

.module0018_list{
	width:100%;
	height: auto;
	background: var(--FontWhiColor);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.05);
	padding:5px 30px;
	margin-top: 10vh;
}
.module0018_box{
	width:100%;
	margin: 60px 0px;
	display: flex;
	justify-content: space-between;
}
.module0018_box_left{
	width:60px;
	height: 60px;
	border: 3px var(--OneColor) solid;
	border-radius: 50%;
	text-align: center;
}
.module0018_box_left img{
	height: 48px;
	margin-top: 3px;
	border-radius: 50%;
}
.module0018_box_right{
	width:calc(100% - 70px);
	height: auto;
}
.module0018_box_right_1{
	color: var(--OneColor);
	font-size: 1.625rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
}
.module0018_box_right_2{
	color: var(--FontTowColor);
	line-height: 1.5rem;
}

.module0018_right{
	width:62%;
	height: calc(73vw * 0.62 * 949 / 864);
	height: calc(var(--mainwidth) * 0.62 * 949 / 864);
	background: url(module0018.jpg) no-repeat center;
	background-size: contain;
	position: relative;
}
.module0018_right_box{
	display: inline-block;
	position: absolute;
}
.module0018_right_box_dian{
	position: relative;
	width:50px;
	height: 50px;
	background: transparent;
	border-radius: 50%;
	margin: 0px auto;
}
.module0018_right_box_dian:after{
	position: absolute;
	width:16px;
	height: 16px;
	background: var(--OneColor);
	border-radius: 50%;
	content: '';
	top: 17px;
	left: 17px;
}

.module0018_right_box_title{
	font-size:1.625rem;
	color: var(--OneColor);
	font-weight: bold;
	margin-top: 0rem;
}



@media screen and (max-width:1023px)and (min-width:300px){
	.module0018{
		width:96vw;
		justify-content:center;
		flex-direction: column;
	}
	.module0018_left{
		width:100%;
	}
	.module0018_entitle{
		text-align: center;
		font-size: 2rem;
		margin-top: 3vh;
		text-transform: uppercase;  
	}
	.module0018_title{
		text-align: center;
		font-size: 1.125rem;
	}

.module0018_list{
	padding:5px 15px;
	margin-top: 2vh;
}
.module0018_box{
	margin: 30px 0px;
}
.module0018_box_left{
	border: 2px var(--OneColor) solid;
}

.module0018_box_right{
	width:calc(100% - 75px);
	height: auto;
}
.module0018_box_right_1{
	font-size: 1.375rem;
}

.module0018_right{
	width:100%;
	height: calc(96vw * 949 / 864);
}
.module0018_right_box{
	display: inline-block;
	position: absolute;
}
.module0018_right_box_dian{
	width:30px;
	height: 30px;
}
.module0018_right_box_dian:after{
	position: absolute;
	width:10px;
	height: 10px;
	top: 10px;
	left: 10px;
}

.module0018_right_box_title{
	font-size:1.375rem;
}
}

#serve-img-area .point-area {
  text-align: center;
  position: relative;
  width: 50px;
  height: 50px; margin:auto;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
@media screen and (max-width:1023px)and (min-width:300px){
#serve-img-area .point-area {
  text-align: center;
  position: relative;
  width: 30px;
  height: 30px; margin:auto;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
}
#serve-img-area .point-area .point {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  margin: auto;
  -webkit-border-radius: 50%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 50%;
  -moz-background-clip: padding;
  border-radius: 50%;
  background-clip: padding-box;
  background: transparent;
}

#serve-img-area .point-area .point-10 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-10:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 225ms infinite;
  -moz-animation: ripple 4500ms ease-out 225ms infinite;
  -o-animation: ripple 4500ms ease-out 225ms infinite;
  animation: ripple 4500ms ease-out 225ms infinite;
}
#serve-img-area .point-area .point-20 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-20:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 450ms infinite;
  -moz-animation: ripple 4500ms ease-out 450ms infinite;
  -o-animation: ripple 4500ms ease-out 450ms infinite;
  animation: ripple 4500ms ease-out 450ms infinite;
}
#serve-img-area .point-area .point-30 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-30:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 675ms infinite;
  -moz-animation: ripple 4500ms ease-out 675ms infinite;
  -o-animation: ripple 4500ms ease-out 675ms infinite;
  animation: ripple 4500ms ease-out 675ms infinite;
}
#serve-img-area .point-area .point-40 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-40:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 900ms infinite;
  -moz-animation: ripple 4500ms ease-out 900ms infinite;
  -o-animation: ripple 4500ms ease-out 900ms infinite;
  animation: ripple 4500ms ease-out 900ms infinite;
}
#serve-img-area .point-area .point-50 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-50:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 1125ms infinite;
  -moz-animation: ripple 4500ms ease-out 1125ms infinite;
  -o-animation: ripple 4500ms ease-out 1125ms infinite;
  animation: ripple 4500ms ease-out 1125ms infinite;
}
#serve-img-area .point-area .point-60 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-60:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 1350ms infinite;
  -moz-animation: ripple 4500ms ease-out 1350ms infinite;
  -o-animation: ripple 4500ms ease-out 1350ms infinite;
  animation: ripple 4500ms ease-out 1350ms infinite;
}
#serve-img-area .point-area .point-70 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-70:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 1575ms infinite;
  -moz-animation: ripple 4500ms ease-out 1575ms infinite;
  -o-animation: ripple 4500ms ease-out 1575ms infinite;
  animation: ripple 4500ms ease-out 1575ms infinite;
}
#serve-img-area .point-area .point-80 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-80:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 1800ms infinite;
  -moz-animation: ripple 4500ms ease-out 1800ms infinite;
  -o-animation: ripple 4500ms ease-out 1800ms infinite;
  animation: ripple 4500ms ease-out 1800ms infinite;
}
#serve-img-area .point-area .point-90 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-90:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 2025ms infinite;
  -moz-animation: ripple 4500ms ease-out 2025ms infinite;
  -o-animation: ripple 4500ms ease-out 2025ms infinite;
  animation: ripple 4500ms ease-out 2025ms infinite;
}
#serve-img-area .point-area .point-100 {
  width: 100%;
  height: 100%;
}
#serve-img-area .point-area .point-100:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: ripple 4500ms ease-out 2250ms infinite;
  -moz-animation: ripple 4500ms ease-out 2250ms infinite;
  -o-animation: ripple 4500ms ease-out 2250ms infinite;
  animation: ripple 4500ms ease-out 2250ms infinite;
}




#serve-img-areaa.paused .point-area .point-10:after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}
#serve-img-areaa.paused .point-area .point-20:after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}
#serve-img-areaa.paused .point-area .point-30:after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}
#serve-img-areaa.paused .point-area .point-40:after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}
#serve-img-areaa.paused .point-area .point-50:after {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}



lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes ripple{ 0%{opacity:0;-webkit-transform:scale(0.5,0.5); } 5%{ opacity:1; }  100%{ opacity:0; -webkit-transform:scale(1)}}
@-moz-keyframes ripple{ 0%{opacity:0;-moz-transform:scale(0.5,0.5); } 5%{ opacity:1; }  100%{ opacity:0; -moz-transform:scale(1)}}
@-o-keyframes ripple{ 0%{opacity:0;-o-transform:scale(0.5,0.5); } 5%{ opacity:1; }  100%{ opacity:0; -o-transform:scale(1)}}
@keyframes ripple{ 0%{opacity:0;-webkit-transform:scale(0.5,0.5);-moz-transform:scale(0.5,0.5);-ms-transform:scale(0.5,0.5);transform:scale(0.5,0.5); } 5%{ opacity:1; }  100%{ opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}
[not-existing] {
  zoom: 1;
}


