@charset "utf-8";



/* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #f7f8f8; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }




@media only screen and (max-width: 480px) {



svg{
	width: 310px;
	height: 80px;
}



.top-main-inner{
	width: 310px;
	height: 80px;
	position: absolute;
	top:40%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-catch{
	width: 310px;
	height: 80px;
	margin: 0 0 0 0;
}


.top-menu{
	display: flex;
	justify-content: center;
	margin: 60px 0 0 0;
}

.top-menu-box01,.top-menu-box02,.top-menu-box03{
	width: 80px;
	height: 80px;
	margin: 0 12px 0 12px;
	background: transparent;
	position: relative;
	border-radius: 50%;
	opacity: 1;
  transition: 4s;
	animation-duration:0.5s;
}





.top-menu-box-bg01,.top-menu-box-bg02,.top-menu-box-bg03{
	width: 80px;
	height: 80px;
	display: block;
	border-radius: 50%;
	transition: 0.5s;
	background: #222;
}

.top-menu-box a{
	width: 80px;
	height: 80px;
	display: block;
	border-radius: 50%;
}

.menu-icon{
	width: 60px;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-menu-title01,.top-menu-title02,.top-menu-title03{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 40;
	font-size: 9px;
	font-weight: 600;
	display: block;
	color:#fff;
	transition: 0.9s;
}





}/*//end  min-width: 481px ///////////////////////*/











@media only screen and (min-width: 481px) {

svg{
	width: 620px;
	height: 160px;
}


.top-main-inner{
	width: 620px;
	height: 160px;
	position: absolute;
	top:40%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-catch{
	width: 620px;
	height: 160px;
	margin: 0 0 0 0;
}


.top-menu{
	display: flex;
	justify-content: center;
	margin: 60px 0 0 0;
}

.top-menu-box01,.top-menu-box02,.top-menu-box03{
	width: 150px;
	height: 150px;
	margin: 0 24px 0 24px;
	background: transparent;
	position: relative;
	border-radius: 50%;
	opacity: 1;
  transition: 4s;
	animation-duration:0.5s;
}

.hover{
	animation-name:Menuhover;
	animation-duration:0.3s;
	width: 150px;
	height: 150px;
	background: #222;
}

@keyframes Menuhover{
  from {
    opacity: 0;
  transform: scale(0.2,0.2);
  }

  to {
    opacity: 1;
  transform: scale(1.0,1.0);
  }
}



.top-menu-box-bg01,.top-menu-box-bg02,.top-menu-box-bg03{
	width: 150px;
	height: 150px;
	display: block;
	border-radius: 50%;
	transition: 0.5s;
}

.top-menu-box a{
	width: 150px;
	height: 150px;
	display: block;
	border-radius: 50%;
}

.menu-icon{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.top-menu-title01,.top-menu-title02,.top-menu-title03{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 40;
	font-size: 16px;
	font-weight: 600;
	display: none;
	color:#fff;
	transition: 0.9s;
}










}/*//end  min-width: 769px ///////////////////////*/





/***************************************************
 * Generated by SVG Artista on 8/3/2022, 8:11:37 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 170.61402893066406px;
  stroke-dasharray: 170.61402893066406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 234.55178833007812px;
  stroke-dasharray: 234.55178833007812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-3 {
  stroke-dashoffset: 225.69715881347656px;
  stroke-dasharray: 225.69715881347656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 233.153076171875px;
  stroke-dasharray: 233.153076171875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 240.88917541503906px;
  stroke-dasharray: 240.88917541503906px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 201.09243774414062px;
  stroke-dasharray: 201.09243774414062px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-7 {
  stroke-dashoffset: 227.88877868652344px;
  stroke-dasharray: 227.88877868652344px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-8 {
  stroke-dashoffset: 166.27059936523438px;
  stroke-dasharray: 166.27059936523438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-9 {
  stroke-dashoffset: 307.1958312988281px;
  stroke-dasharray: 307.1958312988281px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-10 {
  stroke-dashoffset: 269.606201171875px;
  stroke-dasharray: 269.606201171875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-11 {
  stroke-dashoffset: 227.9106903076172px;
  stroke-dasharray: 227.9106903076172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-12 {
  stroke-dashoffset: 166.25071716308594px;
  stroke-dasharray: 166.25071716308594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-13 {
  stroke-dashoffset: 159.76092529296875px;
  stroke-dasharray: 159.76092529296875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}