@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  font-family: PingFang SC,miui,Hiragino Sans GB,Microsoft Yahei,sans-serif;
  font-size: 14px;
  line-height: 1.8;
  width: 100%;
  height: 100%;
  color: #203265;
  background-color: #f4faff;
  background-image: linear-gradient(135deg, #bad9f9 0%, #ffffff 20%, #dbe7ff 80%, #ffffff 100%);
  background-repeat: no-repeat;
  background-size: cover; }

.pc-container {
  min-width: 750px;
  margin: 25px auto; }

.m-container {
  margin: 25px; }

.box {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border: 4px solid #00a700;
  box-shadow: 0px 0px 10px 3px #18ac18;
  border-radius: 50%;
  background-color: #18ac18; }

/* 先创建好几根线 定位在中心位置 然后分别旋转 */
[class^="line"] {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  top: 50%;
  transform: translateY(-50%); }

.line2 {
  transform: rotate(30deg); }

.line3 {
  transform: rotate(60deg); }

.line4 {
  transform: rotate(90deg); }

.line5 {
  transform: rotate(120deg); }

.line6 {
  transform: rotate(150deg); }

/* 创建一个黑色遮罩层 定位在中心 压住中心的线模拟形成指针效果 */
.mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 95%;
  background-color: #18ac18;
  border-radius: 50%; }

/* 创建白色小圆点压住各个指针 层级调成最高 */
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 6; }

/* 创建时针 */
.hour {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 6px;
  height: 25%;
  background: #fff;
  transform-origin: bottom;
  /* 时针一周是12小时 12 * 60 * 60 */
  animation: rotate 12s linear infinite;
  border-radius: 3px; }

/* 创建分针 */
.min {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  width: 6px;
  border-radius: 3px;
  height: 35%;
  background: #fff;
  transform-origin: bottom;
  /* 分针针一圈转一个小时 一小时是60*60s */
  animation: rotate 1s linear infinite; }

/* 创建动画 一个动画足以,所有指针都是旋转一周,变化的只是旋转一周的时间 */
@keyframes rotate {
  to {
    /* 此处需要注意，如果直接写旋转，那么绝对定位配合transform: translate(-50%,-50%)的这个属性会被旋转层叠掉，所以必须再利用transform的连写属性重新书写。 */
    transform: translate(-50%, -100%) rotate(360deg); } }

.clock-img {
  background: url("../images/clock.png") no-repeat; }

.test-img {
  background: url("../images/test.png") no-repeat; }

.clock-img, .test-img {
  width: 200px;
  height: 200px;
  background-size: contain;
  margin: 20px auto; }

.step-box {
  margin: auto;
  padding: 50px 30px;
  max-width: 750px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(255, 255, 255, 0.3);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  text-align: center;
  transition: all 0.4s ease; }

.loading-text {
  font-size: 16px;
  margin: 10px 0 20px;
  text-align: center; }

.click-btn {
  line-height: 48px;
  background-color: #18ac18;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px; }

.m-app .clock-img, .m-app .test-img {
  width: 1rem;
  height: 1rem;
  background-size: contain;
  margin: 0.1rem auto; }

.m-app .loading-text {
  font-size: 0.16rem; }

.m-app .click-btn {
  line-height: 0.4rem;
  font-size: 0.14rem; }