body { font-family:Arial, "微软雅黑"!important;}


html,
body {
  height: 100%;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
 
}

h0 {
  margin: 0;
  line-height: 1;
}

h1 {
  margin: 0;
  line-height: 1;
}

h2 {
  margin: 0;
  line-height: 1;
}

h3 {
  margin: 0;
  line-height: 1;
}

h4 {
  margin: 0;
  line-height: 1;
}

h5 {
  margin: 0;
  line-height: 1;
}

h2 {
  font-weight: 400;
}

h5 {
  font-weight: 200;
}

body {
  background:none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
  color: inherit;
}

.wrapper {
  max-width: 1200px;
  width: 1200px; margin:0px auto;  
  overflow: hidden; padding-top:100px; height:500px; 
  
  
}
.wrapper:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.controler {
  float: left;
  height: 50vh;
  width: 425px;
  display: flex;
  align-items: center;
}
.controler ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.controler ul li {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.controler ul li > a {
  padding: 40px 0;
  position: relative;
  -webkit-animation: bounce-left 250ms ease forwards;
          animation: bounce-left 250ms ease forwards;
}
.controler ul li > a:hover {
  -webkit-animation: bounce-right 350ms ease forwards;
          animation: bounce-right 350ms ease forwards;
}
.controler ul li.active > a {
  -webkit-animation: bounce-right 350ms ease forwards;
          animation: bounce-right 350ms ease forwards;
}

.controler.right ul li > a {
  padding:40px 0;
  position: relative;
  -webkit-animation: bounce-right 250ms ease forwards;
          animation: bounce-right 250ms ease forwards;
}

.controler.right ul li > a:hover {
  -webkit-animation: bounce-left 350ms ease forwards;
          animation: bounce-left 350ms ease forwards;
}
.controler.right ul li.active > a {
  -webkit-animation: bounce-left 350ms ease forwards;
          animation: bounce-left 350ms ease forwards;
}


.controler ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  opacity: 1;
  width: 4px;
  height: 60%;
  background: #f15103;
  transform: translateX(-8px);
  transition: transform ease-out 350ms;
}


.controler ul li:after {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 60%;
  background: radial-gradient(15% 65% at -5% center, #05b6fb 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  transform-origin: 0 50%;
}
/*.controler ul li:hover:before, .controler ul li.active:before {
  transform: translateX(0px);
}*/
/*.controler ul li.active:after {
  -webkit-animation: flash 500ms ease forwards;
          animation: flash 500ms ease forwards;
}*/
.controler .option {
  display: block;
}

.controler.right .option  h3 { float:right; margin-left:20px; margin-right:50px;}
.controler.right .option { text-align:right;}
.controler .option h3{ width:80px; height:80px; background:#fff; border-radius:50%; float:left; margin-right:20px; text-align:center; margin-top:-10px;



}

.controler ul li:hover h3 img { transform:rotate(360deg);}


.controler .option h3 img { width:40px; height:40px; margin-top:20px; transition:all .4s; }
.controler .option h2 {
  margin-bottom: 2vh; color:#fff;
  font-size:20px;
}
.controler .option h5 {
  font-size: 1.05rem; color:#fff;
  opacity: 0.7;
}

.visual {
  float: left;
  height: 50vh;
  width: 350px;
  display: flex;
  align-items: center; position:relative;
}

.visual .tex{ width:350px; font-family:Arial, "微软雅黑"; text-align:center; font-size:35px; font-weight:900; color:#fff;  position:absolute; z-index:2;}
.visual .tex font { font-size:50px; font-weight:900;color:#fff; }

.rings {
  height: 350px;
  width: 350px;
  display: inline-block;
  position: relative;
  transform-origin: 50% 50%;
  transition: transform ease 250ms;
}
.rings[data-view=one] {
  transform: rotate(120deg);
}
.rings[data-view=two] {
  transform: rotate(240deg);
}
.rings[data-view=three] {
  transform: rotate(360deg);
}
.rings > div {
  width: 350px;
  height: 350px;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
}
.rings .inner-ring:before, .rings .inner-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .inner-ring:before {
  width: calc(90% - 2px);
  height: calc(90% - 2px);
  margin-top: calc(-45% - 1px);
  margin-left: calc(-45% - 1px);
   border: 2px dotted rgba(237, 109, 43, 0);
  -webkit-animation: clock 130s ease forwards infinite;
          animation: clock 130s ease forwards infinite;
  mix-blend-mode: multiply;
  
  background:url(../images/yuan.png) no-repeat center top; background-size:100% 100%;  
  
  
  
}
.rings .inner-ring:after {
  width: calc(80% - 2px);
  height: calc(80% - 2px);
  margin-top: calc(-40% - 1px);
  margin-left: calc(-40% - 1px);
  border: 1px dashed rgba(255, 255, 255, 0.8);
  -webkit-animation: counter 130s ease forwards infinite;
          animation: counter 130s ease forwards infinite;
}
.rings .middle-ring:before, .rings .middle-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .middle-ring:before {
  width: calc(90% - 16px);
  height: calc(90% - 16px);
  margin-top: calc(-45% - 8px);
  margin-left: calc(-45% - 8px);
  border: 16px dotted rgba(237, 109, 43, 0);
  transform: rotate(3deg);
  -webkit-animation: clock 70s ease forwards infinite;
          animation: clock 70s ease forwards infinite;
	background:url(../images/yuan1.png) no-repeat center top; background-size:100% 100%;  
		  
		  
}
.rings .middle-ring:after {
  width: calc(75% - 2px);
  height: calc(75% - 2px);
  margin-top: calc(-37.5% - 1px);
  margin-left: calc(-37.5% - 1px);
  border: 2px solid rgba(237, 109, 43, 0.2);
 

  
 
}
.rings .outer-ring:before, .rings .outer-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .outer-ring:before {
  width: calc(106% - 4px);
  height: calc(106% - 4px);
  margin-top: calc(-53% - 2px);
  margin-left: calc(-53% - 2px);
  border: 4px dotted rgba(237, 109, 43, 0.7);
  
  -webkit-animation: clock 50s ease forwards infinite;
          animation: clock 50s ease forwards infinite;
}
.rings .outer-ring:after {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  margin-top: calc(-50% - 1px);
  margin-left: calc(-50% - 1px);
  border: 2px solid rgba(211, 211, 211, 0.9);
}

@-webkit-keyframes bounce-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.3rem);
  }
  100% {
    transform: translateX(1rem);
  }
}

@keyframes bounce-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.3rem);
  }
  100% {
    transform: translateX(1rem);
  }
}
@-webkit-keyframes bounce-left {
  0% {
    transform: translateX(1rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce-left {
  0% {
    transform: translateX(1rem);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes flash {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes counter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes counter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}