/* 浏览器样式初始化 */



/* 细节效果 */
.preloader{
  position: fixed;
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999991;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.preloader-image {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.exhibition-image::after {
  content: "";
  width: 150%;
  height: 200%;
  position: absolute;
  top: -100%;
  left: -180%;
  z-index: 11;
  -webkit-transition: all 3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: rotate(30deg) scale(1.2);
          transform: rotate(30deg) scale(1.2);
  background: -webkit-gradient(linear,
      left top, right top,
      color-stop(50%, rgba(255, 255, 255, 0)),
      to(rgba(255, 255, 255, 0.7)));
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.7) 100%);
}
.exhibition-image-box:hover .exhibition-image::after {
  top: 100%;
  left: 100%;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

/* 细节效果end */

.has-transition-800 {
	-webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000),opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
	will-change: transform, opacity;
	backface-visibility:hidden;
	-webkit-backface-visibility: hidden;
}

::-webkit-scrollbar {
	width:5px;
	height:5px
}
::-webkit-scrollbar-track {
	border-radius:0;
	background:rgba(255,255,255,0)
}
::-webkit-scrollbar-thumb {
	border-radius:5px;
	background:#29345d;
}
::-webkit-scrollbar-thumb:hover {
	border-radius:5px;
	background:#29345d;
}


.button-container{
    width: 176px;
    margin: 0 auto;
    margin-top: 30px;
    padding-top: 40px;
}

.button-su{
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  margin-bottom: 30px;
}

.su-button-circle{
  background-color: red;
  border-radius: 1000px;
  position: absolute;
  left:0;
  top:0;
  width: 0px;
  height: 0px;
  margin-left: 0px;
  margin-top: 0px;
  pointer-events: none;
  /*animation-timing-function: ease-in-out; */
}

.button-su-inner{
    display: inline-block;
    background: #F8B627;
    color: #F4F4F4;
    font-size: 16px;
    font-weight: normal;
    width: 132px;
    text-align: center;
    border-radius: 3px;
    transition: 400ms;
    text-decoration: none;
    padding: 22px;
    z-index: 100000;
}

.button-text-container{
   position:relative;
   z-index: 10000;
}

.explode-circle {
   animation: explode 1s forwards;

}

.desplode-circle{
   animation: desplode .5s forwards;
}

@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(21,30,73,0.8);
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-color: rgba(21,30,73,1);
  }
}

@keyframes desplode {
  0% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-color: rgba(21,30,73,0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(21,30,73,.8);
  }
}



.w1400{width: 1400px;margin: 0 auto;}
.icon{display: block;background-position: center center;background-size: 100% 100%;background-repeat: no-repeat;}



.banner{position: relative;height: 100vh;overflow: hidden;}
.banner .banner-container{height: 100vh;}
.banner .item{position: relative;background-size: cover;}
.banner .item canvas{width: 100% !important;height: 100% !important;}
.banner .item .item-img{display: block;width: 100%;height: auto;}
.banner .item .item-text{position: absolute;top: 25.38%;left: 13.54%;}
.banner .item-text p{font-weight: lighter;color: #fff;}
.banner .item-text .p1{position: relative;margin-bottom: 1.09em;font-size: 68px;}
.banner .item-text .p1::after{content: "";position: absolute;bottom: -0.82em;left: 0;width: 31px;height: 4px;background: #fff;}
.banner .item-text .p2{margin-bottom: 1.5em;font-size: 27px;}
.banner .item-text .button-su{margin: 0;text-align: left;border-color: #fff;}
.banner .item-text .button-su span{color: #fff !important;}
.banner .item-text .button-su:hover{border-color: #151e49;transition: all .7s;}

.banner .b-img{position: absolute;display: block;height: auto;}
.banner .b-product1{right: 48.9%;bottom: 20.5%;width: 6.3%;}
.banner .b-product2{left: 50.16%;bottom: 20.28%;width: 8.33%;}