/*@font-face {*/
/*font-family: 'CenturyGothic';*/
/*src: url('CenturyGothic.eot');*/
/*src: local('CenturyGothic Regular'),*/
/*local('CenturyGothic'),*/
/*url('CenturyGothic.ttf') format('truetype'),*/
/*url('CenturyGothic.svg#CenturyGothic') format('svg');*/
/*}*/

body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{
  transition-duration: 4000ms;
}
html,body {
  scroll-behavior: smooth;
}
/* body {
  font-family: 'CenturyGothic';
} */
strong {font-weight: bold;}
ul {padding: 0;}
li {list-style-type: none;}
.product-detail-tile-wrap {
  position: relative;
}
.insted-h {
  height: 300px;
}
.insted-h4 {
  height: 400px;
}
.insted-mh {
  height: 100px;
}
.h-0 {
  height: 0 !important;
}
.text-c {
  text-align: center;
}
.c-white {
  color: #fff;
}
.c-white>h2 {color: #fff !important;}
.flex-center {
  display: flex;flex-direction: column;justify-content: center;
}
.scroll-range {
  height: 1200px;
}

.hide {
  opacity: 0 !important;
}
.web-hide {
  opacity: 0;
}
.unshow {
  display: none !important;
}
.mobile-show {
  display: none !important;
}
.mobile-hide {
  display: flex !important;
}
.opacity-5 {
  opacity: 0.5 !important;
}

.modal-content .modal-video {
  position: relative;
  width: 78vw;max-width: 1400px;
}
.black-mark {background-color: rgba(0,0,0,0.8) !important;}
button.close.rect {
  height: 2rem;width: 2rem;background-color: rgba(255,255,255,0.7);
  top: 15px;right:0;
}
button.close.rect span {
  line-height: 2rem;font-size: 18px;font-weight: bold;color: #000;
}
/*p1*/
.p1-out-cont {
  display: flex;flex-direction: column;justify-content: space-between;
}
.p1-title {
  /*margin: 70px 0 40px 0;*/
  padding: 30px 0 20px 0;flex-shrink: 0;
}
.p1-title img {
  width: 25vw;
}
.p1-header {
  display: flex;flex-direction: column;justify-content: center;text-align: center;
  padding: 30px 0 20px 0;flex-shrink: 0;
}
.p1-header>h1 {
  position: relative;
  font-weight: bold;font-family: 'CenturyGothic';margin: 0;
  /*font-size: 40px;*/
  font-size: 3vw;
  /*font-style: italic;*/
}
.p1-header>h1>span {display: inline-block;}
.p1-header>h1 strong {
  /*font-size: 50px;*/
  font-size: 3.6vw;
  font-style: normal;
}
.p1-header>div {
  color: #093a94;font-weight: bold;margin-top: 4px;letter-spacing: 1px;
  /*font-size: 25px;*/
  font-size: 1.7vw;line-height: 1.6vw;
}
.p1-header ul {
  display: flex;justify-content: center; margin-top: 5px;
}
.p1-header ul li {
  position: relative;color: #004d9f;font-weight: bold;
  font-size: 0.7vw;line-height: 0.7vw;
}
.p1-header ul>li:first-of-type {
  margin-right: 20px;
}
.p1-header ul li:before {
  content: '';position: absolute;top: 0;left: -8px;bottom: 0;margin: auto;
  height: 4px;width: 4px;border-radius: 4px;background-color: #004d9f;
}
.p1-cont {
  position: relative;
}
/*.p1-cont img {
  width: 46.71vw;
}*/
.p1-cont .p1-img-cont {
  display: flex;justify-content: center;
  width: 46.71vw;margin: 0 auto;
}
.p1-img-cont .left-img, .p1-img-cont .right-img {
  height: 100%;position: relative;
}
.left-img img, .right-img img {
  width: 100%;
}
.left-img picture, .right-img picture {
  transition: opacity 1s linear;
}
.right-img .camera-img {
  position: absolute;top: 0;left: 14.192%;
  height: 21.5vw;
}
.camera-img img {
  height: 100%;width: auto;
}
.p1-cont>svg {
  position: absolute;top: 2.552vw;right: 0;left: 0.52vw;margin: auto;
  fill: none;
  transition: all 0.8s;
  transition-delay: 3.5s;
  height: 18.96vw;
  width: 46.25vw;
}

.product-detail-tile-wrap .p1-cont>svg.aos-animate {
  opacity: 0;
}
.aos-animate .out-round {
  stroke-width:5;stroke:#231f20;
  animation: outLineMove 1.4s linear;
}
.aos-animate .mid-round {
  stroke-width:2;
  animation: midLineMove 2s linear;
  animation-delay: 1.4s;
}
.aos-animate .smal-round {
  stroke-width:1;
  stroke:transparent;
  animation: smalLineMove 2s linear;
  animation-delay: 1.4s;
}
.aos-animate .mini-round {
  stroke-width:1;
  stroke:transparent;
  animation: miniLineMove 2s linear;
  animation-delay: 1.4s;
}
.aos-animate .half-round {
  stroke-width:1;
  stroke:transparent;
  animation: halfLineMove 2s linear;
  animation-delay: 1.4s;
}
@keyframes outLineMove {
  0% {
    stroke-dasharray: 0, 1779;
  }
  100% {
    stroke-dasharray: 1779, 1779;
  }
}
@keyframes midLineMove {
  0% {
    stroke-dasharray: 0, 338;stroke:#231f20
  }
  75% {
    stroke-dasharray: 338, 338;stroke:#231f20
  }
  100% {
    stroke-dasharray: 338, 338;stroke:#231f20
  }
}
@keyframes smalLineMove {
  0% {
    stroke-dasharray: 0, 267;stroke:#231f20
  }
  75% {
    stroke-dasharray: 267, 267;stroke:#231f20
  }
  100% {
    stroke-dasharray: 267, 267;stroke:#231f20
  }
}
@keyframes miniLineMove {
  0% {
    stroke-dasharray: 0, 82;stroke:#231f20
  }
  75% {
    stroke-dasharray: 82, 82;stroke:#231f20
  }
  100% {
    stroke-dasharray: 82, 82;stroke:#231f20
  }
}
@keyframes halfLineMove {
  0% {
    stroke-dasharray: 0, 907;stroke:#231f20
  }
  75% {
    stroke-dasharray: 907, 907;stroke:#231f20
  }
  100% {
    stroke-dasharray: 907, 907;stroke:#231f20
  }
}
/*p2*/
.p2-img-cont {
  position: relative;line-height: 0;
}
.p2-img-cont>canvas {
  width: 100vw;height: 56.25vw;
}
.p2-img-cont picture img {
  width: 100%;
}
.p2-cvs-mask {
  position: absolute;left: 0;top: 0;
  width: 100%;display: none;
}
.play-cont {
  position: absolute;top: 0;right: 0;bottom: 0;left: 0;
  display: flex;justify-content: center;align-items: center;
  background-color: rgba(0,0,0,0.5);z-index: 1;
}
.play-cont:hover {
  cursor: pointer;
}
.play-cont>span {
  color: #fff;font-size: 32px;margin-right: 10px;
}
.play-cont>img {
  height: 40px;width: 40px;
}
.p2-web-video {
  width: 100.01%;
  object-fit: cover;
}
.p2-m-video {
  display: none;
}

/*p3*/
.p3-cont {
  position: relative;
}
.p3-body {
  position: absolute;top: 0;left: 0;width: 100%;overflow: hidden;
  background-color: #fff;z-index: 2;
}
#p3Cont.p3-body.fixed-cont {
  pointer-events: none;
}
.p3-text {
  position: relative;
  /*width: 57.3vw;*/
  width: 960px;
  margin: auto;padding-top: 2.604vw;
}
.p3-text p.p2text-linear {text-align: left;}
.p3-text h3 {font-weight: bold;font-size: 32px;}
.p3-text p {font-size: 18px;}
.p3-text .p3-text-mark {
  position: absolute;top: 0;right: 0;bottom: 0;left: 0;
  background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.9));
}
.p3-img {
  position: absolute;top: 250px;left: 0;width: 100%;bottom: 30px;overflow: hidden;
}
.p3-mobile {
  position: absolute;left: calc(50% - 12.71vw);top: -20%;transform: scale(0.4);
}
.p3-mobile>img:first-of-type {
  border-radius: 40px;
  width: 25.42vw;
}
.p3-mobile-right {
  left: 50%;
}
.p3-mobile-normal {
  top: 0;bottom: auto;transform: scale(1);
}
.p3-mobile .light {
  position: absolute;top: 2.5vw;left: 2.343vw;
  width: 1.98vw;height: 8.385vw;
  transition: all 1s;opacity: 0;
}
.p3-mobile .light-up {opacity: 1}
.camera-cont {
  position: absolute;right: calc(100% - 20px);top: 1.875vw;
  height: 8.522vw;width: 28.355vw;
}
.camera-cont img{
  height: 100%;width: 100%;
}
.fixed-cont {
  position: fixed !important;
  top: 0;right: 0;left: 0;
}
.pos-bottom {
  position: absolute;bottom: 0 !important;top: auto !important;
}

.p2text-linear {
  color: rgb(18,181,211);
  text-align:center;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .p1-title-c {
    color: #093491;
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#2c1f86),color-stop(60%,#0b55ab),color-stop(80%,#0092dc),color-stop(90%,#0092dc),color-stop(100%,#2c1f86));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .p2text-linear {
    background: -webkit-gradient(linear,42% 50%,62% 20%,color-stop(0%,rgb(111,45,137)),color-stop(100%,rgb(18,181,211)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .title-c1 {
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#5e47e8),color-stop(100%,#926ee2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .title-c2 {
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#1d8efa),color-stop(100%,#26c9fb));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .title-c3 {
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#a2e4fa),color-stop(100%,#2de5f2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .p11title-c {
    background: -webkit-gradient(linear,35% 100%,65% 0%,color-stop(0%,#5ab382),color-stop(100%,#4daeff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .p11cont-c {
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#5ab382),color-stop(100%,#4daeff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/*p4*/
.btns-cont {
  display: flex;justify-content: center;
  margin-top: 3.125vw;margin-bottom: 1.823vw;
}
.btns-cont>li {
  line-height: 3.75vw;width: 14.3vw;
  font-size: 18px;font-weight: bold;text-align: center;
  border-radius: 15px;padding: 2px;box-sizing: border-box;cursor: pointer;
  background: #ccc;
}
.btns-cont>li>span {
  color: #fff;
}
.btns-cont>li:first-of-type.active {
  background: linear-gradient(to right top, #6f2d89 0%,#aa0a83 45%,#aa0a83 55%,#2a2386 100%);
}
.btns-cont>li:first-of-type {
  margin-right: 40px;
}
.btns-cont>li:last-of-type.active {
  background: linear-gradient(to right top, #005d90 0%,#12b5d3 45%,#12b5d3 55%,#005d90 100%);
}

.p4-cont {
  width: 100vw;max-width: 1920px;margin: auto;padding-top: 60px;
  left: 0;right: 0;background-color: inherit;
}
.p4-wide-cont {
  position: relative;
  /*transition: width 0.1s linear;*/
  width: 60%;overflow: hidden;margin: auto;
}
.p4-wide-incont {
  position: absolute;left: 50%;top: 50%;overflow: hidden;
  width: 100vw;height: 56.25vw;
  /*width: 88vw;height: 49.5vw;*/
  transform: translate3d(-50%, -50%, 0);
}
.p4-wide-incont>picture {
  transition: all 1.5s;
}
.p4-wide-incont img {
  width: 100%;transform: scale(1.4);
}
.p4-wide-incont .p4-article {
  position: absolute;top: 60px;left: 0;right: 0;width: 50vw;
}
.article-cont.p4-article {
  flex-direction: column;
}
/*#p4WebArticle.p4-article {
  transition: all 1s;
}*/

.p42-cont {
  padding-top: 20px;
}
.p42-cont .article-cont {
  /*width: 66vw;*/
  width: 960px;
  flex-direction: column;
  margin-left: 20vw;
}
.p42-img-cont {
  position: relative;max-width: 1700px;
  width: 60vw;height: 29vw;
  margin: auto;
}
.p42-img-cont img {
  position: absolute;top: 0;left: 0;
  width: 100%;
}
.p42-img-cont img.focus-tag {
  height: 5.5vw;width: auto;left: 39%;top: 30%;
}
.p42-img-cont img.shine {
  /*opacity: 1;*/
  animation: shine 0.6s 3;
}
@keyframes shine {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.p4-photoframe {
  position: relative;
  height: 26.667vw;width: 51.56vw;
  margin: auto;overflow: hidden;
}
.p4-photoframe>img {
  position: absolute;
  height: 100%;width: 100%;
  transition: opacity 0.5s;
}
.p4-photoframe input {
  position: absolute;bottom: 30px;left: 30%;
}
input[type="range"] {
  display: block;-webkit-appearance: none;
  background-color: rgba(255,255,255,0.7);
  width: 40%;height: 10px;
  border-radius: 5px;margin: 0 auto;outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;background-color: #fff;
  width: 30px;height: 30px;border-radius: 5px;
  border: 2px solid white;
  box-shadow: 2px 1px 3px #666;
  cursor: pointer;transition: 0.3s ease-in-out;
}

.article-cont {
  /*width: 60.52vw;*/
  /*width: 54.69vw;*/
  width: 960px;
  margin: auto;box-sizing: border-box;
  padding: 3vw 0 3.12vw;
  /*padding: 2.12vw 1.04vw 3.12vw;*/
}
.article-cont h2 {
  font-weight: bold;font-size: 32px;color: #000;
}
.article-cont p {
  font-size: 18px;
}
.p11-cont .article-cont h2,.p11-cont .article-cont p {
  color: #fff;
}
.article-fadein {
  opacity: 1;
  animation: fadein 0.8s;
}
@keyframes fadein {
  0% {
    /*opacity: 0.3;*/
    transform: scale(0.8);
  }
  100% {
    /*opacity: 1;*/
    transform: scale(1);
  }
}

/*p5*/
.p5-body {
  position: relative;
  /*width: 54.69vw;height: 32.55vw;*/
  height: 37vw;width: 60vw;
  min-width: 960px;
  min-height: 570px;
  margin: 1.125vw auto auto auto;
}
.p5-body .img-item {
  position: absolute;
  /*height: 30.68vw;width: 52.08vw;*/
  height: 35.3456vw;width: 60vw;
  min-width: 960px;
  min-height: 565.5px;
  left: 0;top: 0;
  border-radius: 25px;overflow: hidden;z-index: 2;
  transition: all 1s;
}
.img-item img {height: 100%;width: 100%;}
.p5-body .pos-tl20 {
  top: 1.04vw;left: 1.04vw;z-index: 1;
}
.p5-body .pos-tl40 {
  top: 2.08vw;left: 2.08vw;z-index: 0;
}
/*p6*/
/*.p6-header-cont {overflow: hidden; transition: height 1s ease-in-out;}*/
#p6WebHead {
  overflow: hidden;transition: height 1s ease-in-out;
}
.p6-header {
  display: flex;justify-content: center;padding-top: 2vw;
}
.p6-header.text-c {
  text-align: center;
}
.p6-header>li {
  position: relative;padding: 0 25px;
}
.p6-header>li strong {font-size: 32px;color: #000;}
.p6-header>li div {font-size: 18px;}
.p6-header>li:not(:last-of-type):after {
  content: '';height: 30px;width: 1px;
  position: absolute;top: 0;bottom: 0;right: 0;margin: auto;
  background-color: #333;
}
.p6-body {
  position: relative;
  margin: 3vw auto 0.56vw;
  width: 57.97vw;height: 26.041vw;
}
.p6-body>img {height: 100%;width: 100%;}
.p6-body-center {
  position: absolute;
  height: 30.21vw;width: 14.27vw;
  left: 0;right: 0;top: 0.5vw;bottom: 0;margin: auto;
}
.p6-body-center>img {
  position: absolute;top: 0;left: 0;
  height: 100%;
}
.light-cont {
  position: absolute;top: 0;left: 0;
  width: 100%;padding-right: 0.21vw;line-height: 0;
}
.light-cont>img {width: 100%;}
#p6Cont .article-cont {
  /*width: 70vw;*/
  /*margin-left: -8.5vw;*/
  padding-top: 60px;
}
/*p7*/
.p7-body {
  position: relative;
  width: 15.42vw;height: 32.396vw;
  margin:2.1vw auto 40px auto;
}
.p7-body>img {
  position: absolute;top: 0;left: 0;
  height: 100%;width: auto;
}
.p7-body>img.hand {
  width: 31.47vw;height: 27.0642vw;
  left: -2.4127vw;bottom: -3.5vw;top: auto;
}
.p7-finger {
  position: absolute;bottom: 1.3vw;
  width: 100%;height: 7.86vw;text-align: center;
}
.p7-finger>img {
  height: 100%;
}
/*p8*/
.p8-top {
  position: relative;
  height: 19.323vw;width: 100%;overflow: hidden;margin-top: 3.125vw;
}
.p8-img-cont {
  position: absolute;top: 0;left: 100%;height: 100%;width: 72.97vw;
  transform: translateX(-40%);
}
.p8-img-cont>img {
  position: absolute;top: 0;left: 0;
  height: 100%;
}
.p8-img-tgt {
  transform: translateX(-100%);
}
/*p9*/
.p9-cont {
  background-color: #000;
}
.p9-cont .img-cont {
  position: relative;height: 40.625vw;
  max-width: 100%;overflow: hidden;
}
.img-cont>img {
  position: absolute;top: 0;right: 0;left: 0;margin: auto;
  height: 100%;
}
.article-cont .c-fff {color: #fff;}
.blink {
  animation: blink 2s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.p9-center-cont {
  height: 280px;position: relative;
}
.p9-center {
  position: absolute;top: -6.25vw;right: 0;left: 0;margin: auto;
}
.p9-center .c-item {
  width: 20vw;margin: auto;color: #fff;
}
.c-item p {
  color: #999;margin-bottom: 10px;font-size: 18px;
}
.bar-title {
  margin-bottom: 8px;
}
.bar-title strong {
  font-size: 32px;margin-right: 2px;
}
.bar-title span {font-size: 18px;font-weight: bold;}
.progress-bar {
  position: relative;
  height: 8px;margin-bottom: 8px;
}
.bar-mask {
  position: absolute;right: 0;top: 0;height: 100%;width: 100%;
  background-color: #000;transition: width 2s ease-out;
}
.p9-center-cont.aos-animate .bar-mask {
  width: 0;
}
.bar-1 {
  width: 100%;background: linear-gradient(to right, rgb(94,71,228),rgb(140,105,217));
}
.bar-2 {
  width: 67%;background: linear-gradient(to right, rgb(96,94,104),rgb(176,174,183));
}
.bar-3 {
  width: 77%;background: linear-gradient(to right, rgb(28,140,248),rgb(38,200,251));
}
.bar-4 {
  width: 45%;background: linear-gradient(to right, rgb(96,94,104),rgb(176,174,183));
}
.bar-5 {
  width: 64%;background: linear-gradient(to right, rgb(162,236,254),rgb(44,226,238));
}
.bar-6 {
  width: 27%;background: linear-gradient(to right, rgb(96,94,104),rgb(176,174,183));
}
/*p10*/
#p10Cont li {width: 30VW; max-width: 350px;}
.pos-center {
  display: flex;flex-direction: column;justify-content: center;
}
.video-cont {
  position: relative;
  height: 30vw; width: 62.5vw;
  margin: auto;margin-top: 30px;
}
.video-cont video {
  width: 100%;
}
.video-cont>canvas {
  width: 100%;
}
.video-cont>div>img {
  position: absolute;top: 0;left: 0;
  width: 100%;
}
/*p11*/
.p11-cont {background-color: #000;}
.p11-cont .article-cont {
  padding-bottom: 0;
}
.btn-cont {text-align: center; padding-top: 20px;}
.btn-cont.mobile-hide {
  justify-content: center;
}
.more-btn {
  display: inline-block;margin-top: -40px;
  height: 36px; width: 150px;line-height: 34px;margin-bottom: 60px;color: #fff;font-size: 18px;
  border-radius: 18px;background: linear-gradient(to right top, #5ab382 10%, #3985c5 90%);
}
.float-img-cont {
  width: 60vw;display: flex;justify-content: space-between;
  margin: 20px auto auto auto;padding-bottom: 5.2vw;
}
.float-img-cont .img-cell {
  position: relative;
  height: 26.653vw;width: 11.25vw;
}
.img-cell>img {
  position: absolute;
  top: 0;left: 0;
  width: 100%;transition: top 1.5s;
}
.img-cell .top40 {
  top: 40px;
}
.img-cell .top-10 {
  top: -10px;
}

/**/
@media screen and (max-width: 1440px) {
  @media screen and (min-aspect-ratio: 1440/850) {
    .hide-136 {
      opacity: 0;
    }
    .flex-center-136 {
      display: flex;flex-direction: column;justify-content: center;
    }
    .abs-full {
      position: absolute;top: 0;right: 0;bottom: 0;left: 0;
      display: flex;flex-direction: column;justify-content: center;
      background-color: rgba(255,255,255,0.8);
    }
    .insted-h-136 {
      height: 400px;
    }
    .p6-body {
      margin-top: 0;
      /*width: 57.97vw;height: 26.041vw;*/
      width: 67.16vw;height: 30.17vw;
    }
    .p6-header-cont {
      margin-top: -50px;
      margin-bottom: 50px;
    }
    .p6-body-center {
      /*height: 30.21vw;width: 14.27vw;*/
      height: 35vw;width: 16.533vw;
    }
  }
}
/**/
@media screen and (max-width: 1366px) {
  .p1-title {padding: 20px 0;}
  .p3-text h3 {font-size: 30px;}
  .p3-text p {font-size: 18px;}
  .article-cont h2 {font-size: 30px;}
  .article-cont p {font-size: 18px;}
  .play-cont>span {font-size: 30px;}
  .play-cont>img {height: 34px;width: 34px;}
  .article-cont {width: 70vw;}
  /*#p6Cont .article-cont {width: 90vw;margin-left: -16vw;}*/

  .p42-cont .article-cont {
    padding: 0;
  }

  /*.p6-header-cont {height: 110px; }*/
  #p6WebHead{height: 110px; }
  .p6-header>li strong {font-size: 30px;}
  .p6-header>li div {font-size: 18px;}
  #p6Cont .article-cont {
    /*margin-left: -6vw;*/
    margin: auto;
  }

  .p9-center-cont {height: 280px;}
  .bar-title strong {font-size: 30px;}
  .bar-title span {font-size: 18px;}
  .c-item p {font-size: 18px;}

  @media screen and (min-aspect-ratio: 1366/768) {
    .hide-136 {
      opacity: 0;
    }
    .flex-center-136 {
      display: flex;flex-direction: column;justify-content: center;
    }
    .abs-full {
      position: absolute;top: 0;right: 0;bottom: 0;left: 0;
      display: flex;flex-direction: column;justify-content: center;
      background-color: rgba(255,255,255,0.8);
    }
    .insted-h-136 {
      height: 400px;
    }
    .p6-body {
      margin-top: 0;
      /*width: 57.97vw;height: 26.041vw;*/
      width: 67.16vw;height: 30.17vw;
    }
    .p6-header-cont {
      margin-top: -50px;
      margin-bottom: 50px;
    }
    .p6-body-center {
      /*height: 30.21vw;width: 14.27vw;*/
      height: 35vw;width: 16.533vw;
    }
  }
}
/*pad--start*/
@media screen and (max-width: 1199px) {
  .p1-title img {
    width: 30vw;
  }
  .scroll-range {
    height: 1000px;
  }
  /*  .p1-cont img {
    width: 55vw;
  }*/
  .p1-cont .p1-img-cont {
    width: 55vw;
  }
  .right-img .camera-img {
    height: 25.316vw;
  }
  .p1-cont>svg {
    height: 22.22vw;
    width: 100vw;
    left: 0.3vw;top: 3.2vw;
  }

  .play-cont>span {
    font-size: 16px;
  }
  .play-cont>img {
    height: 28px;width: 28px;
  }

  .p3-text {
    width: 70%;
  }
  .p3-text h3 {font-size: 20px;}
  .p3-text p {font-size: 16px;}
  .p3-img {
    top: 230px;bottom: 0;height: auto;
  }
  .p3-mobile {
    left: calc(50% - 137.4px);
    top: 0;
  }
  .p3-mobile>img:first-of-type{
    width: 274.8px;height: 608.4px;
  }
  .p3-mobile>img:last-of-type {
    width: 22.8px;height: 96.6px;top: 28.8px;left: 27px;
  }
  .camera-cont {
    width: 327px;height: 98.4px;top: 21.6px;
  }
  .camera-cont img {height: 100%;width: 100%;}
  .p3-mobile-right {
    left: 55%;
  }

  .btns-cont>li {
    width: 15vw;font-size: 16px;line-height: 40px;
  }
  .p4-photoframe {
    height: 31vw;
    width: 60vw;
  }
  .article-cont {
    width: 70vw;
  }
  .article-cont h2 {
    font-size: 20px;
  }
  .article-cont p {
    font-size: 16px;
  }
  .p42-cont .article-cont {
    max-width: 70vw;margin-left: 15vw;
    padding: 2.12vw 1.04vw 3.12vw;
  }
  .p42-cont .article-cont {
    padding: 0;
  }
  .p42-img-cont {
    width: 70vw;height: 34vw;
  }

  .p5-body {
    width: 65vw;height: 41vw;
    min-width: auto;min-height: auto;
  }
  .p5-body .img-item {
    height: 37.87vw;width: 65vw;
    min-width: auto;min-height: auto;
  }
  .p5-body .pos-tl20 {top: 15px;left: 15px;}
  .p5-body .pos-tl40 {top: 30px;left: 30px;}

  /*.p6-header-cont {height: auto; }*/
  #p6WebHead {height: auto; }
  .p6-body {
    width: 70vw;height: 31.4vw;margin-top: 40px;margin-bottom: 10px;
  }
  #p6Cont .article-cont {
    /*margin-left: -10vw;*/
    margin-left: auto;
  }
  .p6-body-center {
    height: 36vw;width: 17vw;
  }

  .p6-header>li div {font-size: 16px;}
  .p6-header>li div {font-size: 14px;white-space: nowrap;}

  .p7-body {
    width: 20vw;height: 42vw;
  }
  .p7-body>img.hand {
    width: 40.5vw;height: 34.842vw;
    left: -3.1vw;bottom: -4.524vw;
  }
  .p7-finger {
    bottom: 1.7vw;height: 10.24vw;
  }

  .p8-top {
    height: 25vw;
  }
  .p8-img-cont {
    width: 80vw;
  }

  .p9-center-cont {
    height: 240px;
  }
  .p9-cont .img-cont {
    height: 41vw;
  }
  .p9-center {
    top: -5vw;
  }
  .p9-center .c-item {
    width: 25vw;
  }
  .bar-title {
    margin-bottom: 6px;
  }
  .bar-title strong {font-size: 18px;}
  .bar-title span {font-size: 14px;}
  .progress-bar {
    height: 6px;margin-bottom: 6px;
  }

  .video-cont {
    width: 65vw;height: 31vw;
  }
  .video-cont video {
    width: 100%;
  }
  .p6-header {padding-top: 30px;}
  .p6-header>li strong {
    font-size: 18px;
  }
  #p10Cont li {
    width: 250px;
  }

  .float-img-cont {
    width: 60vw;
  }
  .float-img-cont .img-cell {
    width: 11vw;height: 27vw;
  }

  /*pad 竖屏*/
  @media screen and (orientation: portrait) {
    .p1-header>h1 {
      font-size: 6.5vw;
    }
    .p1-header>h1 strong {
      font-size: 8.5vw;
    }
    .p1-header>div {
      font-size: 4vw;line-height: 4vw;
    }
    .p1-header ul li {
      font-size: 1.8vw;line-height: 1.8vw;
    }
    .p1-title img {
      width: 55vw;
    }
    /*  .p1-cont img {
        width: 70vw;
      }*/
    .p1-cont .p1-img-cont {
      width: 70vw;
    }
    .right-img .camera-img {
      height: 32.22vw;
    }
    .p1-cont>svg {
      left: 0.38vw;top: 4.07vw;height: 28.28vw;
    }

    .p3-text h3 {font-size: 24px;}
    .p3-text p {font-size: 18px;}
    .p3-img {top: 270px;}

    .btns-cont>li {
      width: 20vw;
    }
    .p4-photoframe {
      width: 80vw;height: 41.33vw;
    }
    input[type="range"] {width: 50%;height: 8px;}
    input[type="range"]::-webkit-slider-thumb {
      height: 26px;width: 26px;
    }
    .p4-photoframe input{left: 25%;}
    .article-cont {
      width: 80vw;
    }
    #p6Cont .article-cont {
      width: 80vw;
      margin-left: auto;margin-right: auto;
    }

    .article-cont h2 {font-size: 24px;}
    .article-cont p {
      font-size: 18px;
    }
    .p42-cont .article-cont {
      max-width: 80vw;margin-left: 10vw;
    }
    .p42-img-cont {
      width: 80vw;
    }

    .p5-body {
      width: 85vw;height: 53.62vw;
      min-height: auto;min-width: auto;
    }
    .p5-body .img-item {
      width: 82vw;height: 47.77vw;
      min-width: auto;min-height: auto;
    }

    .p6-body {
      /*height: 40.37vw;*/
      width: 90vw;height: 44.37vw;
      margin-top: 50px;margin-bottom: 20px;
    }
    .p6-body-center {
      height: 46.286vw;width: 21.857vw;
    }

    .p7-body {
      width: 35vw;height: 73.5vw;
    }
    .p7-body>img.hand {
      height: 60.97vw;width: 70.9vw;
      left: -5.36vw;bottom: -7.92vw;
    }
    .p7-finger {
      bottom: 3.2vw;
      height: 17.92vw;
    }

    #p8Cont .p6-header>li {
      padding: 0 15px;
    }

    .p9-cont .img-cont {
      height: 55vw;
    }
    .p9-center {
      top: -8vw;
    }
    .p9-center .c-item {
      width: 32vw;
    }
    .bar-title strong {
      font-size: 20px;
    }
    .bar-title span {
      font-size: 14px;
    }
    .text-c {text-align: left;}

    .float-img-cont {
      width: 80vw;
    }
    .float-img-cont .img-cell {
      width: 15vw;height: 36.82vw;
    }
  }
}

/*mobile*/
@media screen and (max-width: 576px)  {
  .web-hide {opacity: 1;}
  .article-cont p {font-size: 16px;}
  .transY-100 {
    transform: translateY(-100%);
  }
  .flex-center {
    display: block;
  }
  .scroll-range {
    height: 800px;
  }

  .p1-header>h1 {
    font-size: 6.5vw;line-height: 8.5vw;
  }
  /*.p1-header>h1>span {line-height: 8.5vw;padding-top: 1.5vw;height: 10vw;}*/
  .p1-header>h1 strong {
    font-size: 8.5vw;line-height: 8.5vw;
  }
  .p1-header>div {
    font-size: 4vw;line-height: 4vw;
  }
  .p1-header ul li {
    font-size: 1.8vw;line-height: 1.8vw;
  }
  .p1-title img {
    width: 53vw;
  }
  /*.p1-cont img {
    width: 83vw;
  }*/
  .p1-cont .p1-img-cont {
    width: 100vw;
  }
  .right-img .camera-img {
    height: 71.778vw;
    left: 13.64vw;
  }
  .p1-cont>svg {
    height: 63.1232vw;
    top: 8.6547vw;
    left: 0.5vw;
  }

  /*.p2-img-cont {
    display: none;
  }
  .p2-m-video {
    display: block;padding-top: 20px;
  }*/
  /*.modal-content .modal-video {*/
    /*width: 100vw;margin-left: -15px;*/
  /*}*/
  .p2-cvs-mask {display: block;}

  .p3-text {
    width: 88%;padding-top: 20px;
  }
  .p3-img {
    top: 260px;
  }
  .camera-cont {
    height: 24.2vw;width: 63.6vw;top: 3.8vw;
  }
  .p3-mobile-right {
    left: 61.5%;
  }
  .p3-mobile>img:last-of-type {
    left: 25px;
  }
  .p3-text .p3-text-mark {
    background: linear-gradient(to bottom,rgba(255,255,255,0) 20%,rgba(255,255,255,0.7) 40%,rgba(255,255,255,1) 60%);
  }
  .article-cont {
    padding-top: 6vw;
  }
  #p5ContH .article-cont {
    padding-top: 1vw;
  }

  .btns-cont {
    margin-top: 6vw;margin-bottom: 4vw;
  }
  .btns-cont>li {
    width: 28%;font-size: 15px;padding: 1px;border-radius: 10px;line-height: 36px;
  }
  .p4-photoframe {
    width: 94vw;height: 48.61vw;
  }
  input[type="range"] {
    width: 60%;height: 6px;
  }
  .p4-photoframe input {
    left: 20%;bottom: 18px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 20px;height: 20px;border-radius: 5px;
  }
  .article-cont {
    width: 90vw;
  }
  #p6Cont .article-cont {
    /*width: 90vw;*/
    position: absolute;top: -5vw;left: 0;right: 0;bottom: -5vw;
    width: 70vw;color: #fff;margin: auto;background-color: rgba(0,0,0,0.3);border-radius: 50px;
    padding-left: 15px;padding-right: 15px;
  }
  #p6Cont .article-cont h2 {color: #fff;}

  .p4-cont {
    width: 100vw;
  }
  .p4-wide-cont {
    width: 100%;
  }
  .p4-wide-incont {
    position: static;transform:none;
    width: 100%;height: 110vw;
  }
  .p42-img-cont {
    width: 60vw;height: 126.77vw;
    margin-bottom: 10px;
  }
  .p42-cont .article-cont {
    width: 90vw;
  }
  .p42-img-cont img.focus-tag {
    top: 30%;left: 35%;
    height: 16vw;transform: rotate(90deg);
  }

  .p5-body {
    width: calc(83vw + 24px);height: calc(110vw + 30px);margin-top: 6vw;
  }
  .p5-body .img-item {
    /*width: 88vw;height: 51.27vw;border-radius: 10px;*/
    width: 83vw;height: 109.56vw;border-radius: 10px;
  }
  .p5-body .pos-tl20 {
    top: 12px;left: 12px;
  }
  .p5-body .pos-tl40 {
    top: 24px;left: 24px;
  }

  .p6-header>li {
    padding: 0 10px;
  }
  #p6Cont .p6-header>li {
    padding: 0 5px;
  }
  .p6-header>li strong {
    font-weight: bold;font-size: 16px;
  }
  .p6-header>li div {
    font-size: 12px;
  }
  .p6-header>li:not(:last-of-type):after {
    height: 20px;
  }
  .p6-body {
    /*height: 44.86vw;width: 100%;transform: scale(1.15); margin-top: 45px;*/
    height: 137vw;width: 100%; margin-top: 45px;
  }
  .p6-body-center {
    /*height: 52.1vw;width: 24.6vw;*/
    width: 70vw;height: 147.9vw;
  }
  .p6-mhead-cont {
    overflow: hidden;
    flex-direction: column;height: 120px;transition: height 1s ease-in-out;
  }
  .p6-list {padding-top: 20px;}
  .p6-list2 {
    padding-top: 0;margin-top: -1rem;
  }
  .p6-list li, .p6-list2 li {
    width: 130px;
  }
  .p6-list>li:not(:last-of-type):after,.p6-list2>li:not(:last-of-type):after {
    height: 43px;background-color: #999;
  }


  .p7-body {
    margin-top: 20px;
    /*height: 76vw;width: 36.4vw;*/
    height: 98.8vw;width: 47.32vw;
  }
  .p7-body>img.hand {
    /*height: 63.048vw;width: 73.31vw;
    left: -5.6vw;bottom: -8.1vw;*/
    height: 81.9624vw;width: 95.303vw;
    left: -7.28vw;bottom: -10.53vw;
  }
  .p7-finger {
    height: 26vw;bottom: 3.9vw;
  }

  .p8-img-cont {
    width: 90vw;
  }
  .mobile-show {
    display: flex !important;
  }
  .mobile-hide {
    display: none !important;
  }
  #p8Cont .p6-header>li:not(:last-of-type):after {
    background-color: #fff;
  }
  #p8Cont .p6-header.mobile-show {
    padding-top: 25px;margin-bottom: 0;
  }
  .text-c {
    text-align: left;
  }
  .p6-header.text-c {
    text-align: center;
  }

  .p9-cont .img-cont {
    height: 100vw;
  }
  .p9-top .img-cont>img {
    top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);
  }
  .p9-center {
    top: -15vw;
  }
  .p9-center .c-item {
    width: 65%;
  }
  .bar-title strong {
    font-size: 20px;
  }

  .video-cont {
    width: 100%;height: 48vw;
  }
  .article-cont {
    padding-bottom: 20px;
  }

  .more-btn {
    margin-bottom: 20px;
  }
  .float-img-cont {
    width: 100%;transform: scale(1.1);padding-bottom: 50px;
  }
  .float-img-cont .img-cell {
    width: 19vw;height: 45vw;
  }
  .btn-cont.mobile-show {
    justify-content: center;margin-top: 20px;
    padding-bottom: 40px;
  }
  .mobile-show .more-btn {
    border-radius: 8px;
  }
  .p11-cont .article-cont {
    padding-bottom: 30px;
  }
  .img-cell .top40 {
    top: 20px;
  }
}