.fv {
  overflow: hidden; }
.fv:before {
  z-index: 5; }
.fv .animation-area {
  width: 1024px;
  height: 512px;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: visible; }
.fv .animation-area .line-area {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  top: 0;
  left: 0; }
.fv .animation-area .line-area .main-point {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 34%;
  left: 39.6%;
  opacity: 0;
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  box-shadow: 0px 0px 0px 1px white inset;
  -webkit-box-shadow: 0px 0px 0px 1px white inset; }
.fv .animation-area .line-area .main-point.start {
  animation: startEffect 1s ease 0s forwards;
  -webkit-animation: startEffect 1s ease 0s forwards; }
.fv .animation-area .line-area .wave-circle {
  width: 12px;
  height: 12px;
  border-radius: 3000px;
  -webkit-border-radius: 3000px;
  position: absolute;
  top: 36%;
  left: 40.5%;
  z-index: 6;
  opacity: 0;
  transform: scale(3);
  -webkit-transform: scale(3);
  box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.3) inset; }
.fv .animation-area .line-area .wave-circle.wave {
  animation: sonarEffect 2s ease 0s infinite;
  -webkit-animation: sonarEffect 2s ease 0s infinite; }
@keyframes sonarEffect {
  0% {
    opacity: 0; }
  30% {
    opacity: .8; }
  100% {
    opacity: 0;
    transform: scale(12);
    -webkit-transform: scale(12); } }
@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0; }
  30% {
    opacity: .8; }
  100% {
    opacity: 0;
    transform: scale(12);
    -webkit-transform: scale(12); } }
@keyframes startEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: scale(2);
    -webkit-transform: scale(2); } }
@-webkit-keyframes startEffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: scale(2);
    -webkit-transform: scale(2); } }
.fv .animation-area .line-area .line {
  height: 2px;
  background-color: #176E8E;
  width: 0;
  position: absolute;
  overflow: hidden;
  opacity: 0; }
.fv .animation-area .line-area .line:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-color: #E3FEFF;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out; }
.fv .animation-area .line-area .line1 {
  width: 17.9%;
  top: 26%;
  left: 42.9%;
  transform: rotate(-27deg);
  -webkit-transform: rotate(-27deg); }
.fv .animation-area .line-area .line2 {
  width: 26.4%;
  top: 38%;
  left: 44.25%;
  transform: rotate(2deg);
  -webkit-transform: rotate(2deg); }
.fv .animation-area .line-area .line3 {
  width: 7.1%;
  top: 49.5%;
  left: 35.7%;
  transform: rotate(107deg);
  -webkit-transform: rotate(107deg); }
.fv .animation-area .line-area .line4 {
  width: 12.3%;
  top: 38%;
  left: 25.8%;
  transform: rotate(177deg);
  -webkit-transform: rotate(177deg); }
.fv .animation-area .line-area .line5 {
  width: 6.1%;
  top: 28.8%;
  left: 33.5%;
  transform: rotate(222deg);
  -webkit-transform: rotate(222deg); }
.fv .animation-area .line-area .line6 {
  width: 24.3%;
  top: 17.6%;
  left: 35.3%;
  transform: rotate(175deg);
  -webkit-transform: rotate(175deg); }
.fv .animation-area .line-area .line7 {
  width: 10.2%;
  top: 27.5%;
  left: 62.8%;
  transform: rotate(46deg);
  -webkit-transform: rotate(46deg); }
.fv .animation-area .line-area .line8 {
  width: 32%;
  top: 50.8%;
  left: 39.6%;
  transform: rotate(163deg);
  -webkit-transform: rotate(163deg); }
.fv .animation-area .line-area .line9 {
  width: 12.7%;
  top: 50.8%;
  left: 23.9%;
  transform: rotate(219deg);
  -webkit-transform: rotate(219deg); }
.fv .animation-area .line-area .line10 {
  width: 7.7%;
  top: 29.7%;
  left: 23.9%;
  transform: rotate(138deg);
  -webkit-transform: rotate(138deg); }
.fv .animation-area .line-area .line11 {
  width: 9.5%;
  top: 46.7%;
  left: 11.7%;
  transform: rotate(148deg);
  -webkit-transform: rotate(148deg); }
.fv .animation-area .line-area .line12 {
  width: 18.9%;
  top: 23.8%;
  left: 10.9%;
  transform: rotate(171deg);
  -webkit-transform: rotate(171deg); }
.fv .animation-area .line-area .line13 {
  width: 8.4%;
  top: 41%;
  left: 4.7%;
  transform: rotate(261deg);
  -webkit-transform: rotate(261deg); }
.fv .animation-area .line-area .line14 {
  width: 10%;
  top: 46.8%;
  left: 75.25%;
  transform: rotate(32deg);
  -webkit-transform: rotate(32deg); }
.fv .animation-area .line-area .line.active:before {
  left: 0; }
.fv .animation-area .line-area .line.visible {
  opacity: 1; }
.fv .animation-area .bg-map {
  width: 100%; }
.fv .animation-area .bg-circle {
  width: 100%;
  position: absolute;
  z-index: 3;
  opacity: 0.5;
  left: -95px;
  top: -325px; }
.fv .animation-area .balloon-area {
  position: absolute;
  width: 100%;
  height: 100%; }
.fv .animation-area .balloon {
  opacity: 0;
  width: 72px;
  height: 72px;
  position: absolute;
  z-index: 4;
  background-image: url(../img/animation-balloon.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out; }
.fv .animation-area .balloon .circle-progress {
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  z-index: 10;
  display: none; }
.fv .animation-area .balloon .circle-progress svg {
  width: 100%;
  height: 100%; }
.fv .animation-area .balloon .circle-progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg); }
.fv .animation-area .balloon .circle-progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 14;
  stroke-dasharray: 629;
  stroke: #176E8E;
  opacity: .9; }
@keyframes load {
  0% {
    stroke-dashoffset: 0; } }
.fv .animation-area .balloon .face-area {
  border: 3px solid #176E8E;
  background-color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 1000px;
  -webkit-border-radius: 1000px; }
.fv .animation-area .balloon .face-area .img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotate(12deg);
  -webkit-transform: rotate(12deg); }
.fv .animation-area .balloon .face-area .img-active {
  -webkit-transition: all .3s ease-out 2s;
  transition: all .3s ease-out 2s;
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotate(12deg);
  -webkit-transform: rotate(12deg); }
.fv .animation-area .balloon-area.visible .balloon {
  opacity: 1; }
.fv .animation-area .balloon-area.visible .balloon01 {
  top: 9%;
  right: 34%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0s; }
.fv .animation-area .balloon-area.visible .balloon02 {
  top: 32%;
  right: 23%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.1s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.1s; }
.fv .animation-area .balloon-area.visible .balloon03 {
  top: 48%;
  right: 9.5%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.2s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.2s; }
.fv .animation-area .balloon-area.visible .balloon04 {
  top: 55%;
  left: 34%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.3s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.3s; }
.fv .animation-area .balloon-area.visible .balloon05 {
  top: 32.5%;
  left: 19.5%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.4s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.4s; }
.fv .animation-area .balloon-area.visible .balloon06 {
  top: 48%;
  left: 6.5%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.5s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.5s; }
.fv .animation-area .balloon-area.visible .balloon07 {
  top: 20%;
  left: 4.5%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.6s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.6s; }
.fv .animation-area .balloon-area.visible .balloon08 {
  top: 13.5%;
  left: 29%;
  -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.7s;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.53, 1.01) 0.7s; }
.fv .animation-area .balloon.active {
  -webkit-transition: all 0.3s ease-out 2s !important;
  transition: all 0.3s ease-out 2s !important;
  background-image: url(../img/animation-balloon-active.png); }
.fv .animation-area .balloon.active .circle-progress {
  display: block; }
.fv .animation-area .balloon.active .circle-progress svg:nth-child(2) path {
  animation: load 2s ease; }
.fv .animation-area .balloon.active .face-area .img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotate(12deg);
  -webkit-transform: rotate(12deg); }
.fv .animation-area .balloon.active .face-area .img-active {
  opacity: 1;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg); }
.fv .animation-area .balloon01 {
  top: 9.5%;
  right: 33.5%; }
.fv .animation-area .balloon02 {
  top: 32.5%;
  right: 22.5%; }
.fv .animation-area .balloon03 {
  top: 48.5%;
  right: 9%; }
.fv .animation-area .balloon04 {
  top: 55.5%;
  left: 34.5%; }
.fv .animation-area .balloon05 {
  top: 33%;
  left: 20%; }
.fv .animation-area .balloon06 {
  top: 48.5%;
  left: 7%; }
.fv .animation-area .balloon07 {
  top: 20.5%;
  left: 5%; }
.fv .animation-area .balloon08 {
  top: 14%;
  left: 29.5%; }
.fv .animation-area h2 {
  opacity: 0;
  font-size: 30px;
  color: #fff;
  position: absolute;
  left: 56%;
  bottom: 18.5%;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  line-height: 1.5;
  -webkit-transition: all 0.6s ease-out 2.6s;
  transition: all 0.6s ease-out 2.6s; }
.fv .animation-area h2.visible {
  opacity: 1;
  bottom: 19%; }
.fv .scroll {
  left: 51vw; }

@media only screen and (max-width: 768px) {
  .fv .animation-area {
    width: 1024px;
    height: 512px;
    	/*left: -61%;
        top: -4%;*/
    left: -83%;
    top: -20%;
    right: 0;
    bottom: 0;
    transform: scale(0.61);
    margin: auto;
    overflow: visible; }
  .fv .animation-area .bg-map {
    width: 100%;
    left: 0; }
  .fv .animation-area .bg-circle {
    width: 100%;
    position: absolute;
    z-index: 3;
    opacity: 0.5;
    left: -95px;
    top: -325px; }
  .fv .scroll {
    left: auto; }
  .fv h2 {
    opacity: 0;
    color: #fff;
    position: absolute;
    left: 56%;
    bottom: 29.5% !important;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    line-height: 1.5;
    -webkit-transition: all 0.6s ease-out 0s;
    transition: all 0.6s ease-out 0s;
    font-size: 8vw;
    left: 10%;
    bottom: 19%; }
  .fv h2.visible {
    opacity: 1;
    bottom: 30% !important; }

  /*.fv.scale1{
  	.animation-area{
  		-webkit-transition: all 1s ease-out;
  		transition: all 1s ease-out;
  		width: 1024px;
  	    height: 512px;
  	    right: auto;
  	    left: -68%;
  	    right: 0;
  	    transform: scale(0.7);
  	    bottom: 0;
  	    top: -18%;
  	    margin: auto;
  	    overflow: visible;
  	}
  }
  .fv.scale2{
  	.animation-area{
  		-webkit-transition: all 1s ease-out;
  		transition: all 1s ease-out;
  		width: 1024px;
  	    height: 512px;
  	    right: auto;
  	    left: -84%;
  	    right: 0;
  	    transform: scale(0.4);
  	    bottom: 0;
  	    top: -35%;
  	    margin: auto;
  	    overflow: visible;
  	}
  }*/ }
@media only screen and (min-width: 811px) and (max-width: 812px) {
  .fv {
    height: 100vw; }
  .fv .animation-area {
    left: -28%;
    top: -32%;
    transform: scale(0.58); }
  .fv h2 {
    font-size: 6vw; } }
@media only screen and (min-width: 666px) and (max-width: 667px) {
  .fv {
    height: 100vw; }
  .fv .animation-area {
    left: -28%;
    top: -32%;
    transform: scale(0.58); }
  .fv h2 {
    font-size: 6vw; } }
@media only screen and (max-width: 475px) {
  .fv .animation-area {
    left: -56%;
    transform: scale(0.72); } }
@media only screen and (max-width: 414px) {
  .fv .animation-area {
    left: -72%;
    transform: scale(0.65); } }
@media only screen and (max-width: 375px) {
  .fv .animation-area {
    left: -83%;
    transform: scale(0.61); } }
@media only screen and (max-width: 320px) {
  .fv .animation-area {
    left: -107.5%;
    transform: scale(0.5); } }
@media only screen and (min-width: 1600px) {
  .fv .animation-area {
    transform: scale(1.2); } }
@media only screen and (min-width: 1920px) {
  .fv .animation-area {
    transform: scale(1.5); } }
@media only screen and (min-width: 2560px) {
  .fv .animation-area {
    transform: scale(1.8); } }