.shuibei {
  background: url("/image/catalog/product/clean/uvpen/1.jpg") no-repeat;
  background-size: cover;
  background-position: bottom;
  height: 46.5vw;
  text-align: center;
}
.shuibei .shuibei-txt {
  padding-top: 6vw;
}
.shuibei .btn-tuwen:before {
  background: rgba(255, 255, 255, 0.2);
}
#product-product {
  padding-top: 50px;
}
@media only screen and (max-width: 1400px) {
  .shuibei {
    background-image: url("/image/catalog/product/clean/uvpen/1hd.jpg");
    height: 57vw;
  }
}
@media only screen and (max-width: 1024px) {
  .shuibei {
    background-image: url("/image/catalog/product/clean/uvpen/1h.jpg");
    height: 86vw;
  }
  .shuibei .shuibei-txt {
    padding-top: 10vw;
  }
}
@media only screen and (max-width: 735px) {
  .shuibei {
    background-image: url("/image/catalog/product/clean/uvpen/1m.jpg");
    height: 145vw;
  }
  .shuibei .shuibei-txt {
    padding-top: 22vw;
  }
}
@media only screen and (max-width: 468px) {
  .shuibei {
    height: 160vw;
  }
  .shuibei .shuibei-txt {
    padding-top: 25vw;
  }
}
.uvcicon {
  background-color: #fafafa;
}
.uvcicon .uvcicon-txt {
  padding: 10% 0;
}
.icon-img {
  background: url("/image/catalog/product/clean/uvpen/icon.png") no-repeat;
  background-size: cover;
  width: 101px;
  height: 101px;
  margin: 0 40px 20px;
}
.icon1 {
  background-position: 75% 0;
}
.icon2 {
  background-position: 100% 0;
}
.icon3 {
  background-position: 50% 0;
}
.icon4 {
  background-position: 0% 0;
}
.icon5 {
  background-position: 25% 0;
}
.huanhang {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .huanhang {
    display: block;
  }
  .uvcicon .height80 {
    height: 8vw;
  }
  .uvcicon .uvcicon-txt {
    padding: 12% 0 11%;
  }
}
@media only screen and (max-width: 735px) {
  .uvcicon .height80 {
    height: 6vw;
  }
  .uvcicon .uvcicon-txt {
    padding: 20% 0 ;
  }
  .icon-img {
    width: 11vw;
    height: 11vw;
    margin: 0 7vw 20px;
  }
}
.gaoxiao {
  background: url("/image/catalog/product/clean/uvpen/3.jpg") no-repeat;
  background-size: cover;
  height: 51.6vw;
}
.gaoxiao .section-content {
  width: 800px;
  max-width: 80%;
}
.gaoxiao .gaoxiao-txt {
  padding-top: 10%;
  text-align: center;
}
.gaoxiao.en .section-content {
  width: 1000px;
  max-width: 80%;
}
.gaoxiao.en .gaoxiao-txt {
  padding-top: 6%;
}
@media only screen and (max-width: 1400px) {
  .gaoxiao {
    background-image: url("/image/catalog/product/clean/uvpen/3hd.jpg");
    height: 74vw;
  }
}
@media only screen and (max-width: 1024px) {
  .gaoxiao {
    background-image: url("/image/catalog/product/clean/uvpen/3h.jpg");
    height: 86vw;
  }
}
@media only screen and (max-width: 735px) {
  .gaoxiao {
    background-image: url("/image/catalog/product/clean/uvpen/3m.jpg");
    background-position: bottom;
    height: 160vw;
  }
}
@media only screen and (max-width: 468px) {
  .gaoxiao {
    background-image: url("/image/catalog/product/clean/uvpen/3m.jpg");
    background-position: bottom;
    height: 187vw;
  }
  .gaoxiao .gaoxiao-txt {
    padding-top: 25%;
  }
  .icon-box .icon-item {
    margin-left: 6px;
    margin-right: 6px;
  }
}
.dunpai {
  background: url("/image/catalog/product/clean/uvpen/4.jpg") no-repeat;
  background-position: center top;
  height: 60vw;
  height: 1154px;
  position: relative;
}
.dunpai .dunpai-txt {
  padding-top: 10%;
  text-align: center;
}
.dunpai .section-content {
  width: 600px;
  max-width: 88%;
}
.dunpai .dunpai-img-box {
  position: absolute;
  bottom: 0%;
  width: 100%;
}
@media only screen and (max-width: 1024px) {
  .dunpai {
    background-image: url("/image/catalog/product/clean/uvpen/4h.jpg");
    background-position: bottom center;
    background-size: cover;
    height: calc(1000px + 45vw - 20vh);
  }
  .dunpai .dunpai-txt {
    padding-top: 15%;
  }
}
@media only screen and (max-width: 735px) {
  .dunpai {
    background-image: url("/image/catalog/product/clean/uvpen/4m.jpg");
    background-size: cover;
    height: 160vw;
  }
}
@media only screen and (max-width: 480px) {
  .dunpai {
    background-image: url("/image/catalog/product/clean/uvpen/4m.jpg");
    background-size: cover;
    height: 190vw;
  }
}
@media only screen and (max-width: 380px) {
  .dunpai {
    background-image: url("/image/catalog/product/clean/uvpen/4m.jpg");
    background-size: cover;
    height: 210vw;
  }
}
.anniu {
  background: #dfdfdf;
}
.anniu .section-content {
  width: 600px;
  max-width: 80%;
}
.anniu .anniu-txt {
  padding-top: 15%;
}
.uvc {
  background: url("/image/catalog/product/clean/uvpen/uv.png?20200318") no-repeat;
  position: absolute;
  width: 1140px;
  height: 674px;
  left: -802px;
  bottom: 0;
}
.anniu-img-box {
  position: relative;
  height: 674px;
}
.quan-box {
  position: absolute;
  left: 68.3%;
  top: 14%;
  width: 18%;
  padding-bottom: 18%;
  height: 0;
  transform-style: preserve-3d;
  perspective: 600px;
  display: none;
}
.dada {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  animation: dada 4.5s ease-out forwards infinite;
}
.dada:nth-child(2) {
  animation-delay: 1.5s;
}
.dada:nth-child(3) {
  animation-delay: 3s;
}
.quan {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  border-radius: 80%;
  box-shadow: inset 0 0 15px 4px #3cbbff;
  transform: rotateX(36deg) rotateY(22deg) rotateZ(-1deg);
}
.uvcbtn-box {
  position: absolute;
  left: 75%;
  top: 9%;
  white-space: nowrap;
  color: #37c4ff;
}
.uvcbtn-box2 {
  top: 50%;
}
.uvcbtn,
.uvcbtn-txt-box {
  display: inline-block;
  vertical-align: middle;
}
.uvcbtn-txt {
  display: inline-block;
  vertical-align: bottom;
}
.uvcbtn {
  width: 167px;
  height: 177px;
  position: relative;
  background: url("/image/catalog/product/clean/uvpen/5-1.png?20200318");
}
.uvcbtn-txt-box {
  padding-left: 30px;
}
.uvcbtn-txt-box .slide-num {
  font-size: 90px;
}
.uvcbtn2 {
  background-image: url("/image/catalog/product/clean/uvpen/5-2.png?20200318");
}
@keyframes dada {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(3.5);
    transform: scale(3.5);
    opacity: 0;
  }
}
.jiushi .slide-num.shuzi1:before {
  transform: translate(0em, -7.2em);
}
.jiushi .slide-num.shuzi2:before {
  transform: translate(0em, -80em);
}
.liushi .slide-num.shuzi1:before {
  transform: translate(0em, -4.8em);
}
.liushi .slide-num.shuzi2:before {
  transform: translate(0em, -80em);
}
.current .jiushi .slide-num.shuzi1:before {
  transform: translate(0em, -7.2em);
}
.current .jiushi .slide-num.shuzi2:before {
  transform: translate(0em, -80em);
}
.current .liushi .slide-num.shuzi1:before {
  transform: translate(0em, -4.8em);
}
.current .liushi .slide-num.shuzi2:before {
  transform: translate(0em, -80em);
}
.deng {
  position: absolute;
  width: 5.1%;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  padding-bottom: 5.1%;
  background: #fff;
  left: 78.9%;
  top: 58%;
  box-shadow: 0 0 3px #ddd, 0 0 10px #ddd, 0 0 3px #ddd;
}
.anniu.active .deng {
  -webkit-animation: shan 6s forwards;
  -ms-animation: shan 6s forwards;
  -moz-animation: shan 6s forwards;
  animation: shan 6s forwards;
}
.uvcbtn1 .deng {
  top: 45%;
}
@media only screen and (max-width: 1400px) {
  .uvcbtn-box {
    left: 70%;
  }
}
@media only screen and (max-width: 1024px) {
  .uvc {
    width: 98vw;
    height: 58.2vw;
    background-size: contain;
    left: -43vw;
  }
  .anniu-img-box {
    height: 79vw;
  }
  .uvcbtn-box {
    top: 0%;
    left: 0%;
  }
  .uvcbtn-box2 {
    left: 56%;
  }
  .uvcbtn-txt-box {
    padding-left: 10px;
  }
  .uvcbtn-txt {
    font-size: 18px;
  }
  .uvcbtn {
    background-size: contain;
    background-repeat: no-repeat;
    width: 15vw;
    height: 16vw;
  }
  .deng {
    top: 56.4%;
    left: 78%;
  }
  .uvcbtn1 .deng {
    top: 44.1%;
  }
}
@media only screen and (max-width: 735px) {
  .uvcbtn-txt-box .slide-num {
    font-size: 60px;
  }
  .uvcbtn-txt {
    font-size: 15px;
  }
  .uvcbtn-box {
    top: 0%;
    left: 27%;
  }
  .uvcbtn-box2 {
    top: 24%;
  }
  .uvcbtn {
    width: 24vw;
    height: 25.5vw;
  }
  .uvcbtn-txt-box {
    padding-left: 5px;
  }
  .uvc {
    left: -33vw;
  }
  .anniu-img-box {
    height: 117vw;
  }
}
@media only screen and (max-width: 468px) {
  .anniu .height50 {
    height: 20px;
  }
  .uvcbtn-box {
    left: 10%;
  }
  .uvcbtn-box2 {
    top: 28%;
  }
  .uvcbtn {
    width: 29vw;
    height: 31.4vw;
  }
  .anniu-img-box {
    height: 130vw;
  }
  .uvcbtn-txt-box .slide-num {
    font-size: 60px;
  }
  .uvcbtn-txt {
    font-size: 12px;
  }
}
@keyframes shan {
  0%,
  8.8%,
  16.7%,
  25.4%,
  33.3%,
  42.1%,
  49.9%,
  58.5%,
  67.5%,
  76.1%,
  85.1%,
  93.7% {
    opacity: 0;
  }
  8.9%,
  16.6%,
  25.5%,
  33.2%,
  42.2%,
  49.8%,
  58.6%,
  67.4%,
  76.2%,
  85%,
  93.8%,
  100% {
    opacity: 1;
  }
}
.zideng {
  position: relative;
  background-color: #151515;
}
.zideng .section-content {
  width: 100%;
  max-width: 90%;
  position: absolute;
  top: 0;
  left: 5%;
  padding: 0;
}
.zideng .zideng-txt {
  width: 600px;
  max-width: 100%;
  text-align: center;
  padding-top: calc(80px + 0.1vw);
  margin: 0 auto;
}
.zideng.en .zideng-txt {
  width: 850px;
}
.xiaoshi {
  position: absolute;
  bottom: 31vw;
  width: 100%;
  color: #37c4ff;
}
.xiaoshi .slide-num {
  font-size: 120px;
}
.zideng.active .shuzi1:before {
  -webkit-transform: translate(0em, -0.8em);
  transform: translate(0em, -0.8em);
}
.zideng.active .shuzi2:before {
  -webkit-transform: translate(0em, -4em);
  transform: translate(0em, -4em);
}
.zideng.active .shuzi3:before {
  -webkit-transform: translate(0em, -16em);
  transform: translate(0em, -16em);
}
.zideng.active .shuzi4:before {
  -webkit-transform: translate(0em, -32em);
  transform: translate(0em, -32em);
}
.zideng.active .shuzi5:before {
  -webkit-transform: translate(0em, -80em);
  transform: translate(0em, -80em);
}
.zideng.active .shuzi6:before {
  -webkit-transform: translate(0em, -80em);
  transform: translate(0em, -80em);
}
.zideng-img {
  background: url("/image/catalog/product/clean/uvpen/6.jpg") no-repeat;
  width: 100%;
  height: 52.1vw;
  background-size: cover;
  position: relative;
}
@media only screen and (max-width: 1900px) {
  .zideng {
    padding-top: calc((1920px - 100vw ) * 0.18);
  }
}
@media only screen and (max-width: 1024px) {
  .zideng.en {
    padding-top: calc((1920px - 100vw ) * 0.20);
  }
}
@media only screen and (max-width: 735px) {
  .zideng.en {
    padding-top: calc((1920px - 100vw ) * 0.23);
  }
  .zideng-img {
    background-image: url("/image/catalog/product/clean/uvpen/6m.jpg");
  }
}
@media only screen and (max-width: 468px) {
  .xiaoshi {
    bottom: 30vw;
  }
  .xiaoshi .slide-num {
    font-size: 90px;
  }
  .zideng.en {
    padding-top: calc((1920px - 100vw ) * 0.25);
  }
}
.dianchi {
  position: relative;
  background: url("/image/catalog/product/clean/uvpen/7.jpg") no-repeat;
  background-size: cover;
  height: 52vw;
}
.dianchi .media-img {
  width: 55%;
}
.dianchi .media-txt {
  position: relative;
  width: 45%;
}
.dianchi .media-txt {
  height: 52vw;
}
.dianchi .dianchi-txt {
  width: 755px;
  max-width: 90%;
}
.dianchi .dianchi-txt .txt {
  width: 90%;
}
.dianchi-img {
  background: url("/image/catalog/product/clean/uvpen/7.png?20200318") no-repeat;
  background-size: contain;
  background-position: bottom center;
  height: 45.2vw;
  width: 16.5vw;
  position: absolute;
  bottom: 0;
  right: 20%;
}
.haoan,
.xuhang {
  color: #37c4ff;
  display: inline-block;
}
.haoan .slide-num,
.xuhang .slide-num {
  font-size: 90px;
}
.haoan {
  margin-right: 100px;
}
.current.haoan .shuzi1:before,
.haoan .shuzi1:before {
  -webkit-transform: translate(0em, -1.6em);
  transform: translate(0em, -1.6em);
}
.current.haoan .shuzi2:before,
.haoan .shuzi2:before {
  -webkit-transform: translate(0em, -9.6em);
  transform: translate(0em, -9.6em);
}
.current.haoan .shuzi3:before,
.haoan .shuzi3:before {
  -webkit-transform: translate(0em, -16em);
  transform: translate(0em, -16em);
}
.current.haoan .shuzi4:before,
.haoan .shuzi4:before {
  -webkit-transform: translate(0em, -32em);
  transform: translate(0em, -32em);
}
.current.xuhang .shuzi1:before,
.xuhang .shuzi1:before {
  -webkit-transform: translate(0em, -0.8em);
  transform: translate(0em, -0.8em);
}
.current.xuhang .shuzi2:before,
.xuhang .shuzi2:before {
  -webkit-transform: translate(0em, -12em);
  transform: translate(0em, -12em);
}
.current.xuhang .shuzi3:before,
.xuhang .shuzi3:before {
  -webkit-transform: translate(0em, -16em);
  transform: translate(0em, -16em);
}
.yiduan {
  display: none;
}
@media only screen and (max-width: 1900px) {
  .dianchi-img {
    width: 16.8vw;
    height: 46.4vw;
  }
}
@media only screen and (max-width: 1200px) {
  .dianchi,
  .dianchi .media-txt {
    height: 700px;
  }
  .haoan {
    margin-right: 4vw;
  }
}
@media only screen and (max-width: 1024px) {
  .dianchi-img {
    width: 30.8vw;
    height: 63.4vw;
  }
  .dianchi .media-txt {
    width: 40%;
  }
  .dianchi .media-img {
    width: 60%;
  }
}
@media only screen and (max-width: 735px) {
  .media-box .pc-show {
    display: none;
  }
  .dianchi {
    background: #000;
  }
  .dianchi .media-img {
    width: 100%;
  }
  .dianchi .dianchi-txt {
    padding-top: 70px;
    padding-left: 5%;
  }
  .dianchi .dianchi-txt .txt {
    width: 100%;
  }
  .diannao .height80 {
    display: none;
  }
  .dianchi,
  .dianchi .media-txt {
    height: auto;
  }
  .yiduan {
    display: block;
  }
  .yiduan .media-txt {
    height: 80vw;
  }
  .yiduan .media-img {
    width: 60%;
  }
  .yiduan .haoan {
    margin-bottom: 30px;
  }
  .yiduan .dianchi-img {
    right: 10%;
  }
}
@media only screen and (max-width: 468px) {
  .haoan .slide-num,
  .xuhang .slide-num {
    font-size: 70px;
  }
}
@media only screen and (max-width: 320px) {
  .haoan .slide-num,
  .xuhang .slide-num {
    font-size: 60px;
  }
}
.fangshui .section-content {
  width: 1200px;
  max-width: 90%;
}
.fangshui .fangshui-txt {
  width: 900px;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 80px 0  5%;
}
.fangshui-img {
  background: url("/image/catalog/product/clean/uvpen/8.jpg") no-repeat;
  background-size: contain;
  width: 1202px;
  height: 656px;
  max-width: 80.5vw;
  max-height: 43.2vw;
  margin: 0 auto;
}
.size {
  background: #fafafa;
  padding: 1px 0;
}
.sizeimg {
  background: url("/image/catalog/product/clean/uvpen/size.png?20200318") no-repeat;
  background-size: contain;
  background-position: center;
  height: 32.7vw;
  min-height: 630px;
  margin: 50px 0;
}
@media only screen and (max-width: 735px) {
  .sizeimg {
    height: 65vw;
    min-height: 32vw;
  }
}
.pen {
  background-image: url("/image/catalog/product/clean/uvpen/pen_spec.jpg");
  width: 271px;
}
.all_upen {
  background-image: url("/image/catalog/product/clean/uvpen/spec/all.jpg");
  width: 740px;
  height: 658px;
  max-width: 100%;
  max-height: 70vw;
}
@media only screen and (max-width: 735px) {
  .all_upen {
    max-width: 91vw;
    max-height: 80vw;
    margin-left: calc(-5vw - 20px );
  }
}