/* 前端刘昉杰 */


/* 引入字体 */
@charset "UTF-8";

@font-face {
  font-family: "com";
  src: url("../font/COMIC.woff") format("woff"),
       url("../font/COMIC.ttf") format("truetype"),
       url("../font/COMIC.eot") format("embedded-opentype"),
       url("../font/COMIC.svg") format("svg"),
       url("../font/COMIC.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "xumin";
  src: url("../font/COMIC.woff") format("woff"),
  url("../font/COMIC.ttf") format("truetype"),
  url("../font/COMIC.eot") format("embedded-opentype"),
  url("../font/COMIC.svg") format("svg"),
  url("../font/COMIC.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

*,*:before,*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

*{ margin:0; padding:0;}

body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);margin:0 auto;overflow:hidden;  max-width: 1920px; min-width: 1366px;position: relative;padding: 0 ;height: 100vh;  width: 100%;color: #1f1f1f;font-family: xumin; font-size:14px;  line-height:1;background: #fff;}

html.act{overflow: hidden;width: 100%;height: 100vh;}

ul,ul li,ol li,tr td,dl,dd{ list-style-type:none; margin:0; padding:0; }

input:focus{ outline:none; }
textarea:focus{ outline:none; }

.clearfix:after{content: " "; display: block; height:0; clear:both; visibility: hidden;}

.clearfix { *zoom:1; }

a{display: inline-block; text-decoration:none; cursor:pointer; -webkit-transition: all .3s cubic-bezier(.4,0,.2,1); -moz-transition: all .3s cubic-bezier(.4,0,.2,1); transition: all .3s cubic-bezier(.4,0,.2,1);color: #333;}

textarea,select{ outline:none;  color:#666; font-size:14px; width:100%;}

img{border:none;display: block;max-width: 100%;}

img[src=""]{opacity: 0;}

body::-webkit-scrollbar{ width:4px;height: 1px;}

body::-webkit-scrollbar-thumb{ background:#000;}

body::-webkit-scrollbar-track{ background:#fff;} 

.alltime,.alltime *{-webkit-transition: all .3s cubic-bezier(.4,0,.2,1); -moz-transition: all .3s cubic-bezier(.4,0,.2,1); transition: all .3s cubic-bezier(.4,0,.2,1);}

.alltime2,.alltime2 *{-webkit-transition: all .5s cubic-bezier(.4,0,.2,1); -moz-transition: all .5s cubic-bezier(.4,0,.2,1); transition: all .5s cubic-bezier(.4,0,.2,1);}

/* 左右抖动 */
@-webkit-keyframes rubberBand {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}65% {-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}75% {-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}
  
@keyframes rubberBand {0% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}30% {-webkit-transform: scale3d(1.25, 0.75, 1);transform: scale3d(1.25, 0.75, 1);}40% {-webkit-transform: scale3d(0.75, 1.25, 1);transform: scale3d(0.75, 1.25, 1);}50% {-webkit-transform: scale3d(1.15, 0.85, 1);transform: scale3d(1.15, 0.85, 1);}65% {-webkit-transform: scale3d(.95, 1.05, 1);transform: scale3d(.95, 1.05, 1);}75% {-webkit-transform: scale3d(1.05, .95, 1);transform: scale3d(1.05, .95, 1);}100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}

/*上下*/
@-webkit-keyframes shangxia {0% {transform:translateY(0);}100% {transform:translateY(-10px);}}

@keyframes  shangxia {0% {transform:translateY(0);}100% {transform:translateY(-10px);}}


video{pointer-events: none;}

.main {
  width: 100%;
  position: relative;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

/* 背景音乐按钮 */
#music {
  width: 2.5%;
  position: absolute;
  left: 5%;
  top: 5%;
  cursor: pointer;
}

/* 返回水晶 */
.back {
  display: block;
}
.crystal {
  width: 17%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.crystal1 {
  width: 12%;
  position: absolute;
  left: 10%;
  top: 30%;
  animation: crystal1 3s infinite;
}
@keyframes crystal1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes crystal1fx {
  0% {
    transform: rotate(0);
    /* transform: translate3d(0, 0, 0); */
  }
  100% {
    transform: rotate(180deg);
    /* transform: translate3d(100%, 50%, 0); */
  }
}
.crystal2 {
  width: 25%;
  position: absolute;
  left: 65%;
  top: 15%;
  animation: crystal2 5s infinite;
}
@keyframes crystal2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -30%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes crystal2fx {
  0% {
    /* transform: rotate(0); */
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* transform: rotate(45deg); */
    transform: translate3d(-100%, 50%, 0);
  }
}
.crystal3 {
  width: 18%;
  position: absolute;
  left: 15%;
  top: 70%;
  animation: crystal3 4s infinite;
}
@keyframes crystal3 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.crystal4 {
  width: 15%;
  position: absolute;
  left: 65%;
  top: 76%;
  animation: crystal4 3s infinite linear;
}
@keyframes crystal4 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0, 40%, 0);
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
  75% {
    transform: translate3d(0, -40%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* 返回水晶end */



.jin{ pointer-events: none;}