.module-name-spe{ color: #fff;}
.module1 { position: relative;}
.module1 .banner{ position: relative; height:calc(100vh - 0.6em);}

.module1 .banner1{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.module1 .banner1 .content{ transition: all linear 0.5s; transform: translateY(1em); opacity: 0;transition-property:transform,opacity;}
.module1.active .banner1 .content{ transform: translateY(0); opacity: 1;}
.module1 .banner1 { background-color:#f4f4f4;  background-image: url(../images/x200_bg.jpg);}

.module1 .banner1 .content{ display: flex; justify-content: center; }
.module1 .text{ width: 5.32em; height: 4.57em; background:url(../images/x200/x200_text_bg.png) top center no-repeat; background-size: contain; padding-top: 1.62em; padding-left: 0.52em; box-sizing: border-box; }

.module1 .banner1 .figure img{ display: block; margin-left: 0.34em; padding-top: 1.42em; height: 5.49em;}
.module1 .banner1 h3 span{ display: block; font-weight: 700; font-size: 0.48em; color: #fff;}
.module1 .banner1 p {margin-top: 0.44em;}
.module1 .banner1 p span{  display: block; font-size: 0.24em;  color: #fff;}
.module1 .banner1 p i{ display: block; height: 0.19em;}
.module1 .btn-group{  position: absolute; left: 50%; bottom: 0.96em; margin-left: -3.04em;  width: 6.08em; }
.module1 .btn-group .product{display: flex; align-items: center; justify-content: space-between;}
.module1 .btn{ display: flex; align-items: center; justify-content: center; width: 2em; height: .5em; background: #c20212; border-radius: 5px;cursor: pointer;}
.module1 .btn span{font-size: 0.2em; color: #fff;font-weight: 700;cursor: pointer;}
.module1 .down{ background: #373737;}


/* .module1 .banner h3,.module1 .banner p,.module1 .banner .figure,.module1 .btn-group{ transform: translateY(1em); opacity: 0; transition: all linear 0.5s;}

.module1 .banner h3{ transition-delay: 0.5s;}
.module1 .banner p{ transition-delay: 1s;}
.module1 .banner .figure{ transition-delay: 1.5s;}
.module1 .btn-group{ transition-delay: 2s;}
.module1.active .banner h3,.module1.active .banner p,.module1.active .banner .figure,.module1.active .btn-group{ transform: translateY(0); opacity: 1;} */

.content-box{ width: 12.2em;}

.module2{ background:#2d2d2d;padding-bottom: 1.1em;}
.module2 .content {padding-top: 1.13em; margin-bottom: 1.45em; }
.module2 .content p{font-size: 0.24em; line-height: 1.916667; text-align: center; color: #fff;}

.module2 .figure{margin-left: -0.43em; margin-right: -1.5em; padding-bottom: 0.99em;}
.module2 .figure img{ display: block;}
.module2 .text{ display: flex; margin: 1.04em auto 0;  color: #080804; padding-top: 0.37em; background:url(../images/x200/module2_bg.png) top center no-repeat; background-size: 100% 4.22em; }
.module2 .text h4 {margin-bottom: 0.45em;}
.module2 .text h4 span{ display: block;font-weight: 700; font-size: 0.24em; }
.module2 .text >div p:not(:last-child){margin-bottom: 0.34em;}
.module2 .text >div p span{ display: block; font-size: 0.18em;}
.module2 .text .spe i{ display: block; padding-bottom: 0.611em; font-style: normal;}
.module2 .text div:nth-of-type(1){ width: 2.3em; padding-left: 0.13em;}
.module2 .text div:nth-of-type(2){ width: 2.38em;}
.module2 .text div:nth-of-type(3){ width: 2.73em;}
.module2 .text div:nth-of-type(4){ width: 2.66em;}
.module2 .text div:nth-of-type(5){ width: 1.56em;}
.module3{padding-top: 1.11em; background:url(../images/x200/module3_bg.jpg) top center no-repeat;background-size: 100% 6.43em;}

.module3 .content{ display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; margin:0.98em auto 1.26em; width: 11.1em; padding:0 0.1em 0.1em; background: #f3f4f4; box-sizing: border-box; box-shadow:0 4px 4px rgba(243,244,244,.39) ; }
.module3 .content > div{ position: relative; width: 5.45em; margin-top: 0.1em;}
.module3 .content > div:nth-of-type(2n){ width: 5.35em;}
.module3 .content .figure{ position: relative; overflow: hidden;}
/* .module3 .content .figure::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: 0.5;} */
.module3 .content .figure-name{ position: absolute; left: 0.4em; bottom: 0.3em; color: #fff;}
.module3 .content .figure-name p{ padding-bottom: 0.09em; }
.module3 .content .figure-name p > span{ display: block; font-size: 0.22em;}
.module3 .content .figure-name > span{ display: block; font-size: 0.12em;}

/* .module2,.module3{
  opacity: 0; transform: translateY(2em); transition: all linear 0.5s;
} */
.active{ opacity: 1; transform: translateY(0);}

.module2 .figure{ transform: translateY(1em); opacity: 0; transition: all linear 0.5s 0.5s; transition-property:transform,opacity;}
.module2 .text{transform: translateY(1em); opacity: 0; transition: all linear 0.5s 1s; transition-property:transform,opacity; width: 11.45em; color: #fff;}
.module2.active .text,.module2.active .figure{ opacity: 1; transform: translateY(0);}
.module3 .content .figure::before{transform: translateY(100%); transition: all linear 0.5s 0.5s;transition-property:transform; }
.module3 .content .figure-name{ transform: translateY(1em); transition: all linear 0.5s 1s; opacity: 0;transition-property:transform,opacity;}
/* .module3.active .content .figure::before{ transform: translateY(0);} */
.module3.active .content .figure-name{ opacity: 1; transform: translateY(0);}