@charset "utf-8";

.clearfix {
   zoom: 1;
}

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

.marginauto {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
}

.linenowrap {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.center {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
}

.loader {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 100;
   background: #fff;
}

.loader__logo {
   background: #dddddd;
   position: absolute;
   z-index: 3;
   left: 50%;
   margin-left: -136px;
   top: 50%;
   margin-top: -23px;
   width: 272px;
   height: 47px;
   mask-image: url(../images/logo.png);
   -webkit-mask-image: url(../images/logo.png);
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   transition: 0.5s;
}

.loader__logo:before {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 48px;
   content: "";
   background-image: url(../images/ufplbyt.png);
   background-size: 200px 100px;
   background-repeat: repeat-x;
   animation: wave-animation 1s 0.4s infinite linear, loading-animation 6s 0.4s infinite linear;
   transition: 0.4s;
   opacity: 0;
   visibility: hidden;
}

.loader__logo i {
   position: absolute;
   left: 101px;
   top: 22px;
   display: block;
   width: 7px;
   height: 10px;
   background: #6cccdc;
   transform: rotate(-10deg);
   transition: 0.4s;
   opacity: 0;
}

.loader__logo i:last-child {
   left: 136px;
}

@keyframes wave-animation {
   0% {
      background-position: 0 bottom;
   }

   100% {
      background-position: 200px bottom;
   }
}

@keyframes loading-animation {
   0% {
      background-size: 200px 0px;
   }

   100% {
      background-size: 200px 80px;
   }
}

.loader__circle {
   position: absolute;
   left: 50%;
   margin-left: -45px;
   bottom: 46px;
   width: 86px;
   height: 86px;
   border-radius: 50%;
   border: 2px solid #dddddd;
}

.loader__circle:before,
.loader__circle:after {
   content: "";
   width: 86px;
   height: 86px;
   border-radius: 50%;
   border: 2px solid #6cccdc;
   position: absolute;
   left: -2px;
   top: -2px;
   opacity: 0;
}

.loader__numble {
   text-align: center;
   line-height: 86px;
   color: #232b3a;
   font-size: 15px;
   font-family: "Gilroy-Medium";
}

.loader__numble b {
   font-weight: normal;
}

@keyframes clipCircleLeft {
   0% {
      opacity: 1;
      clip: rect(90px 45px 90px 0px);
   }

   100% {
      opacity: 1;
      clip: rect(0px 45px 90px 0px);
   }
}

@keyframes clipCircleRight {
   0% {
      opacity: 1;
      clip: rect(0px 90px 0px 45px);
   }

   100% {
      opacity: 1;
      clip: rect(0px 90px 90px 45px);
   }
}

.loader.active .loader__logo {
   mask-image: url(../images/logo1.png);
   -webkit-mask-image: url(../images/logo1.png);
}

.loader.active .loader__logo i {
   opacity: 1;
}

.loader.active .loader__logo:before {
   opacity: 1;
   visibility: visible;
}

.loader.active .loader__circle:before {
   animation: clipCircleLeft 2.5s linear 2.5s 1 forwards;
}

.loader.active .loader__circle:after {
   animation: clipCircleRight 2.5s linear 0s 1 forwards;
}

.header {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 88;
   width: 100%;
   transition: 0.58s;
}

.header .header-bg {
   position: fixed;
   left: 0;
   top: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   display: none;
}

.header.scolls .header__navs {
   position: absolute;
   left: 168px;
   top: 14px;
}

.header.scolls .channel {
   position: absolute;
   right: 260px;
   top: 13px;
   width: auto;
}

.header.scolls .channel>span {
   display: flex;
   display: -webkit-flex;
   flex-direction: row-reverse;
   background: transparent;
   align-items: center;
   -webkit-align-items: center;
}

.header.scolls .channel>span i {
   position: relative;
   top: -1px;
   margin-right: 0;
   margin-left: 14px;
   vertical-align: middle;
}

.header.scolls .channel .channel__list {
   width: 200px;
   left: 50%;
   margin-left: -100px;
}

.header.scolls .navs__down {
   top: 70px;
}

.header:hover .header__top {
   background: #fff;
   border-bottom: 1px solid #ececec;
}

.header:hover .header__navs {
   background: #fff;
}

.header:hover .header__navs .navs>li>a {
   color: #666;
}

.header:hover .header__navs .navs>li>a:before {
   background: #6cccdc;
}

.header:hover .header__navs .navs>li>a i {
   color: #666;
}

.header:hover .channel>span {
   color: #666666;
}

.header:hover .channel>span i {
   position: relative;
   top: -1px;
   vertical-align: middle;
   background: url(../images/shoop1.png) center no-repeat;
   background-size: cover;
}

.header:hover .channel .channel__list {
   background: #fff;
}

.header:hover .channel .channel__list li a i,
.header:hover .channel .channel__list li a span {
   color: #666;
}

.header:hover .header__logo img.show {
   opacity: 0;
   visibility: hidden;
}

.header:hover .header__logo img.hide {
   opacity: 1;
   visibility: visible;
}

.header:hover .header__search a {
   color: #666666;
}

.header:hover .header__product b {
   color: #666666;
}

.header:hover .header__product span {
   color: #666666;
}

.header:hover .header__menu__btn span {
   color: #666666;
}

.header:hover .header__menu__btn b {
   background: url(../images/menu2.png) center no-repeat;
}

.header:hover .languge-defaul i,
.header:hover .languge-defaul span,
.header:hover .languge-defaul b {
   color: #666;
}

.header.headerColor .header__top,
.header.innerBg .header__top {
   background: #fff;
   border-bottom: 1px solid #ececec;
}

.header.headerColor .header__navs,
.header.innerBg .header__navs {
   position: absolute;
   left: 168px;
   width: auto;
   opacity: 0;
   visibility: hidden;
   background: transparent;
   top: 0;
}

.header.headerColor .header__navs .navs>li>a,
.header.innerBg .header__navs .navs>li>a {
   color: #666;
}

.header.headerColor .header__navs .navs>li>a:before,
.header.innerBg .header__navs .navs>li>a:before {
   background: #6cccdc;
}

.header.headerColor .header__navs .navs>li>a i,
.header.innerBg .header__navs .navs>li>a i {
   color: #666;
}

.header.headerColor .navs__down,
.header.innerBg .navs__down {
   top: 71px;
}

.header.headerColor .channel,
.header.innerBg .channel {
   position: absolute;
   right: 260px;
   top: 13px;
   width: auto;
}

.header.headerColor .channel>span,
.header.innerBg .channel>span {
   display: flex;
   display: -webkit-flex;
   flex-direction: row-reverse;
   background: transparent;
   color: #666666;
   width: auto;
   align-items: center;
   -webkit-align-items: center;
}

.header.headerColor .channel>span i,
.header.innerBg .channel>span i {
   position: relative;
   top: -1px;
   vertical-align: middle;
   margin-right: 0;
   margin-left: 14px;
   background: url(../images/shoop1.png) center no-repeat;
   background-size: cover;
}

.header.headerColor .channel .channel__list,
.header.innerBg .channel .channel__list {
   background: #fff;
   width: 200px;
   left: 50%;
   margin-left: -100px;
}

.header.headerColor .channel .channel__list li a i,
.header.innerBg .channel .channel__list li a i,
.header.headerColor .channel .channel__list li a span,
.header.innerBg .channel .channel__list li a span {
   color: #666;
}

.header.headerColor .header__logo img.show,
.header.innerBg .header__logo img.show {
   opacity: 0;
   visibility: hidden;
}

.header.headerColor .header__logo img.hide,
.header.innerBg .header__logo img.hide {
   opacity: 1;
   visibility: visible;
}

.header.headerColor .header__search a,
.header.innerBg .header__search a {
   color: #666666;
}

.header.headerColor .header__product b,
.header.innerBg .header__product b {
   color: #666666;
}

.header.headerColor .header__product span,
.header.innerBg .header__product span {
   color: #666666;
}

.header.headerColor .header__menu__btn span,
.header.innerBg .header__menu__btn span {
   color: #666666;
}

.header.headerColor .header__menu__btn b,
.header.innerBg .header__menu__btn b {
   background: url(../images/menu2.png) center no-repeat;
}

.header.headerColor .languge-defaul i,
.header.innerBg .languge-defaul i,
.header.headerColor .languge-defaul span,
.header.innerBg .languge-defaul span,
.header.headerColor .languge-defaul b,
.header.innerBg .languge-defaul b {
   color: #666;
}

.header__navs,
.channel {
   transition: 0.5s;
}

.header__top {
   position: relative;
   z-index: 5;
   padding: 0 30px;
   height: 70px;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   transition: 0.5s;
}

.header__search {
   float: left;
   margin-top: 26px;
}

.header__search a {
   display: block;
   line-height: 1;
   color: #fff;
   font-size: 18px;
}

.header__search a:hover {
   color: #6cccdc;
}

.header__product__wr {
   float: left;
   margin-left: 43px;
}

.header__product {
   padding: 26px 0;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   cursor: pointer;
}

.header__product:hover b,
.header__product:hover span {
   color: #6cccdc;
}

.header__product b {
   display: block;
   line-height: 1;
   color: #fff;
   font-weight: normal;
   font-size: 18px;
   transition: 0.35s;
}

.header__product span {
   display: block;
   margin-left: 12px;
   line-height: 18px;
   color: #fff;
   font-size: 14px;
   transition: 0.35s;
}

.header__sp {
   position: relative;
   z-index: 3;
}

.header__logo {
   position: relative;
   width: 192px;
   z-index: 2;
}

.header__logo img {
   display: block;
   width: 100%;
   height: auto;
   transition: 0.5s;
}

.header__logo img.hide {
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   visibility: hidden;
}

.header__menu__hidden {
   height: 100vh;
   position: relative;
}

.header__menu__right {
   display: flex;
   align-items: center;
}

.languga {
   margin-right: 30px;
   position: relative;
}

.languga:hover .languge-down {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: visible;
}

.languge-defaul {
   display: flex;
   align-items: center;
   height: 70px;
}

.languge-defaul i {
   display: inline-block;
   margin-right: 10px;
   color: #fff;
   font-size: 20px;
   font-style: normal;
}

.languge-defaul span {
   display: inline-block;
   color: #fff;
   font-size: 14px;
   margin-right: 10px;
}

.languge-defaul b {
   display: inline-block;
   color: #fff;
   font-size: 14px;
   transform: rotate(90deg);
   font-style: normal;
}

.languge-down {
   position: absolute;
   left: 50%;
   margin-left: -60px;
   top: 100%;
   margin-top: -10px;
   width: 120px;
   background: #fff;
   z-index: 10;
   opacity: 0;
   visibility: hidden;
   transform: translateY(30px);
   pointer-events: none;
   transition: 0.4s;
}

.languga-info {
   padding: 16px 0;
}

.languga-info p {
   margin-bottom: 10px;
   text-align: center;
}

.languga-info p:last-child {
   margin-bottom: 0;
}

.languga-info p a {
   display: inline-block;
   position: relative;
   z-index: 2;
   padding: 4px 2px;
   line-height: 1;
   color: #333333;
   font-size: 14px;
}

.languga-info p a:before {
   content: "";
   width: 0;
   height: 6px;
   background: #6cccdc;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.3s;
   z-index: -1;
}

.languga-info p a:hover,
.languga-info p a.active {
   color: #fff;
}

.languga-info p a:hover:before,
.languga-info p a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.languga-info p a:hover,
.languga-info p a.active {
   color: #333333;
}

.header__menu__btn {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   cursor: pointer;
}

.header__menu__btn span {
   display: block;
   margin-right: 14px;
   line-height: 18px;
   color: #ffffff;
   font-size: 14px;
}

.header__menu__btn b {
   display: block;
   width: 25px;
   height: 18px;
   background: url(../images/menu1.png) center no-repeat;
}

.header__navs {
   position: absolute;
   left: 0;
   padding-left: 30px;
   top: 71px;
   padding-top: 12px;
   width: 100%;
   transition: 0.4s;
}

.navs {
   position: relative;
}

.navs>li {
   float: left;
   margin-right: 30px;
   z-index: 2;
   padding-bottom: 10px;
}

.navs>li:hover a:before,
.navs>li.active a:before {
   width: 100%;
   right: auto;
   left: 0;
}

.navs>li:last-child {
   margin-right: 0;
}

.navs>li:first-child>a {
   padding-right: 0;
}

.navs>li:first-child i {
   display: none;
}

.navs>li>a {
   display: block;
   padding-right: 17px;
   position: relative;
   z-index: 2;
   line-height: 44px;
   color: #fff;
   font-size: 15px;
}

.navs>li>a:before {
   content: "";
   width: 0;
   height: 3px;
   background: #fff;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.45s;
   z-index: -1;
}

.navs>li>a:hover,
.navs>li>a.active {
   color: #fff;
}

.navs>li>a:hover:before,
.navs>li>a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.navs>li>a>i {
   display: block;
   position: absolute;
   right: 0;
   top: 50%;
   margin-top: -6px;
   line-height: 1;
   color: #fff;
   font-size: 12px;
   transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
}

.navs__down {
   position: fixed;
   left: 0;
   top: 133px;
   width: 100%;
   background: #fff;
   height: 0;
   overflow: hidden;
}

.navs__item {
   position: absolute;
   left: 0;
   top: 0;
   box-sizing: border-box;
   width: 100%;
   padding: 28px 30px 60px;
   display: none;
   overflow: hidden;
}

.navs__item:first-child {
   padding: 0;
}

.navs__list {
   float: left;
}

.navs__list li {
   float: left;
   margin-right: 30px;
   width: 270px;
}

.navs__list li:last-child {
   margin-right: 0;
}

.navs__list li:hover figure img {
   transform: scale(1.1);
}

.navs__list li figure {
   position: relative;
   display: block;
   padding-bottom: 55.5555%;
   height: 0;
   overflow: hidden;
   line-height: 1;
}

.navs__list li figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.navs__list li span {
   display: block;
   margin-top: 12px;
   line-height: 1;
   text-align: center;
   color: #333333;
   font-size: 16px;
}

.channel {
   right: 30px;
   top: 82px;
   position: absolute;
   width: 210px;
   height: 45px;
   padding-bottom: 1px;
   transition: 0.4s;
}

.channel>span {
   display: block;
   height: 45px;
   line-height: 45px;
   color: #fff;
   text-align: center;
   font-size: 14px;
   background: rgba(0, 0, 0, 0.2);
   cursor: pointer;
   overflow: hidden;
   margin-bottom: 1px;
}

.channel>span i {
   display: inline-block;
   position: relative;
   top: 2px;
   margin-right: 14px;
   width: 14px;
   height: 14px;
   background: url(../images/shoop.png) center no-repeat;
}

.channel__list {
   position: absolute;
   left: 0;
   top: 100%;
   padding: 18px 0 32px;
   width: 100%;
   z-index: 5;
   border-top: 1px solid transparent;
   background: rgba(0, 0, 0, 0.2);
   display: none;
}

.channel__list li {
   margin-bottom: 6px;
}

.channel__list li:last-child {
   margin-bottom: 0;
}

.channel__list li:first-child a i {
   margin-left: -6px;
   margin-right: 16px;
}

.channel__list li a {
   display: inline-block;
   margin-left: 30px;
   color: #fff;
   font-size: 14px;
}

.channel__list li a:hover i {
   transform: translateY(-2px);
}

.channel__list li a i {
   display: inline-block;
   margin-right: 10px;
   color: #fff;
   font-size: 14px;
   font-style: normal;
   width: 20px;
   text-align: left;
   transition: 0.3s;
}

.channel__list li a span {
   display: inline-block;
   color: #fff;
}

.navs__news {
   float: left;
   margin-left: 88px;
   padding-left: 73px;
   border-left: 1px solid #ebebeb;
   width: 335px;
   padding-bottom: 34px;
}

.navs__news a:hover span {
   color: #6cccdc;
}

.navs__news time {
   display: block;
   margin-bottom: 14px;
   line-height: 1;
   color: #333333;
   font-size: 18px;
}

.navs__news strong {
   display: block;
   line-height: 1.3;
   color: #333333;
   font-size: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.navs__news span {
   display: inline-block;
   color: #2c3441;
   font-size: 14px;
   line-height: 22px;
   transition: 0.38s;
}

.navs__news span i {
   display: inline-block;
   margin-top: 24px;
   margin-right: 6px;
   width: 22px;
   height: 22px;
   text-align: center;
   border-radius: 50%;
   background: #6cccdc;
   color: #2f3b48;
   font-size: 12px;
   font-weight: bold;
}

.header__pro__menu {
   position: fixed;
   width: 100%;
   left: 0;
   top: 71px;
   background: #fff;
   display: flex;
   display: -webkit-flex;
   height: 0;
   overflow: hidden;
}

.header__pro__item {
   position: relative;
   padding-top: 50px;
   flex: 1;
   -webkit-flex: 1;
   width: 33.3333%;
   padding: 50px 64px 63px;
}

.header__pro__item:last-child:before {
   display: none;
}

.header__pro__item:before {
   content: "";
   width: 1px;
   position: absolute;
   right: 0;
   top: 60px;
   bottom: 50px;
   background: #e5e5e5;
}

.header__pro__tt {
   margin-bottom: 30px;
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.header__pro__tt i {
   display: inline-block;
   margin-right: 10px;
   color: #333333;
   font-style: normal;
   font-size: 26px;
   line-height: 1.2;
}

.header__pro__tt span {
   display: inline-block;
   color: #333;
   font-size: 24px;
   line-height: 1.2;
}

.header__pro__list {
   display: flex;
   flex-wrap: wrap;
}

.header__pro__list li {
   float: left;
   margin-right: 5%;
   margin-bottom: 28px;
   width: 30%;
}

.header__pro__list li:nth-child(3n+3) {
   margin-right: 0;
}

.header__pro__list li:hover figure img {
   transform: translateY(-6px);
}

.header__pro__list li:hover span {
   color: #6cccdc;
}

.header__pro__list li figure {
   display: block;
   position: relative;
   height: 90px;
   background: #f6f6f6;
   overflow: hidden;
}

.header__pro__list li figure img {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   transition: 0.45s;
}

.header__pro__list li span {
   display: block;
   margin-top: 14px;
   line-height: 1;
   text-align: center;
   color: #333333;
   font-size: 16px;
   transition: 0.38s;
}

.header__menu {
   position: fixed;
   left: 0;
   top: -150%;
   z-index: 89;
   width: 100%;
   height: 100%;
}

.header__menu:before {
   position: fixed;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
   transition: 0.8s;
}

.header__menu.show:before {
   opacity: 1;
   visibility: visible;
}

.wrapper-main-menu .background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.wrapper-main-menu .background {
   background: #fff;
   pointer-events: none;
   will-change: transform;
}

.wrapper-main-menu .background .wave {
   display: block;
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: auto;
   fill: #fff;
   transform: translateY(-10px) rotate(180deg);
}

.start,
.end {
   display: none;
}

.header__menu__top {
   position: absolute;
   left: 30px;
   right: 30px;
   top: 34px;
}

.header__menu__top .header__l {
   display: block;
   float: left;
   width: 193px;
   height: auto;
}

.header__close {
   float: right;
   line-height: 1;
   cursor: pointer;
}

.header__close:hover span,
.header__close:hover i {
   color: #6cccdc;
}

.header__close:hover i {
   transform: rotate(180deg);
}

.header__close span {
   display: block;
   float: left;
   margin-right: 10px;
   line-height: 1;
   color: #666666;
   font-size: 14px;
   font-weight: bold;
   transition: 0.38s;
}

.header__close i {
   display: block;
   float: left;
   line-height: 1;
   color: #333333;
   font-size: 14px;
   font-style: normal;
   transition: 0.36s;
   font-weight: bold;
}

.menu__content {
   position: absolute;
   left: 50%;
   margin-left: -660px;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   width: 1320px;
   opacity: 0;
}

.menu__li {
   display: flex;
   display: -webkit-flex;
}

.menu__item {
   display: block;
   flex: 1;
   -webkit-flex: 1;
}

.menu__item:last-child {
   flex: inherit;
   -webkit-flex: inherit;
}

.menu__item dt {
   display: block;
   margin-bottom: 18px;
}

.menu__item dt a {
   display: inline-block;
   color: #333333;
   font-size: 24px;
   font-weight: bold;
}

.menu__item dd {
   display: block;
}

.menu__item dd p {
   margin-bottom: 3px;
}

.menu__item dd p a {
   display: inline-block;
   position: relative;
   z-index: 2;
   color: #999999;
   font-size: 18px;
}

.menu__item dd p a:hover {
   color: #333333;
   font-weight: bold;
}

.menu__item dd p a:hover:before {
   width: 100%;
}

.menu__item dd p a:before {
   position: absolute;
   left: 0;
   bottom: 5px;
   content: "";
   width: 0;
   height: 8px;
   background: #6cccdc;
   z-index: -1;
   transition: 0.38s;
}

.product__menu {
   position: relative;
}

.product__menu:first-child .product__menu__li {
   display: block;
}

.product__menu:hover .product__menu__btn span {
   color: #333333;
   font-weight: bold;
}

.product__menu:hover .product__menu__btn span:before {
   width: 100%;
}

.product__menu:hover .product__menu__btn i {
   color: #333;
}

.product__menu:hover .product__menu__btn i:before,
.product__menu:hover .product__menu__btn i:after {
   background: #333333;
}

.product__menu__btn {
   position: relative;
   cursor: pointer;
}

.product__menu__btn.active span {
   color: #333333;
   font-weight: bold;
}

.product__menu__btn.active span:before {
   width: 100%;
}

.product__menu__btn.active i {
   color: #333;
}

.product__menu__btn.active i:before,
.product__menu__btn.active i:after {
   background: #333333;
}

.product__menu__btn.active i:after {
   opacity: 0;
   visibility: hidden;
   transform: translateY(6px);
}

.product__menu__btn span {
   display: inline-block;
   position: relative;
   z-index: 2;
   padding: 0 1px;
   color: #999999;
   font-size: 18px;
   transition: 0.32s;
}

.product__menu__btn span:before {
   position: absolute;
   left: 0;
   bottom: 5px;
   z-index: -1;
   content: "";
   width: 0;
   height: 8px;
   background: #6cccdc;
   transition: 0.36s;
}

.product__menu__btn i {
   display: inline-block;
   position: relative;
   margin-right: 6px;
   width: 10px;
   height: 10px;
}

.product__menu__btn i:before {
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: -1px;
   content: "";
   width: 100%;
   height: 2px;
   background: #999999;
   transition: 0.32s;
}

.product__menu__btn i:after {
   position: absolute;
   left: 50%;
   margin-left: -1px;
   top: 0;
   content: "";
   width: 2px;
   height: 100%;
   background: #999999;
   transition: 0.32s;
}

.menu__item dd .product__menu__li {
   padding-left: 18px;
   padding-top: 3px;
   display: none;
}

.menu__item dd .product__menu__li p {
   margin-bottom: 0;
   line-height: 1.5;
}

.menu__search {
   margin-top: 10.9vw;
   display: flex;
   display: -webkit-flex;
}

.menu__search .text {
   padding: 0;
   margin: 0;
   border: none;
   padding-left: 21px;
   width: 420px;
   height: 54px;
   line-height: 54px;
   color: #999999;
   font-size: 14px;
   background: #f6f6f6;
   font-family: "微软雅黑";
}

.menu__search .sub {
   padding: 0;
   margin: 0;
   width: 135px;
   height: 54px;
   line-height: 54px;
   text-align: center;
   border: none;
   color: #fff;
   font-size: 16px;
   background: #2c3441;
   transition: 0.4s;
   cursor: pointer;
}

.menu__search .sub:hover {
   background: #6cccdc;
}

.menu__share {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   padding: 34px 0 35px;
   background: #f6f6f6;
   opacity: 0;
}

.menu__share__wr {
   margin: auto;
   width: 1320px;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.menu__shopping {
   display: flex;
   display: -webkit-flex;
}

.menu__shopp__i {
   margin-right: 52px;
}

.menu__shopp__i a {
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.menu__shopp__i a:hover b {
   border-color: #2c3441;
   color: #9e9e9e;
   background: #2c3441;
   transition: all 0.38s, background 0.38s 0.2s;
   line-height: 42px;
}

.menu__shopp__i a:hover b:before {
   opacity: 1;
   visibility: visible;
   transform: rotateY(0deg);
}

.menu__shopp__i a b {
   display: block;
   position: relative;
   z-index: 2;
   width: 46px;
   height: 46px;
   border: 1px solid #9e9e9e;
   border-radius: 50%;
   text-align: center;
   line-height: 46px;
   color: #2c3441;
   font-size: 24px;
   font-weight: normal;
   transition: 0.38s;
}

.menu__shopp__i a b:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #2c3441;
   transition: 0.4s;
   opacity: 0;
   visibility: hidden;
   transform: rotateY(180deg);
}

.menu__shopp__i a span {
   display: block;
   margin-left: 14px;
   color: #333333;
   font-size: 14px;
}

.allow__us {
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.allow__us span {
   display: block;
   margin-right: 30px;
   color: #2c3441;
   font-size: 14px;
}

.allow__us a {
   display: block;
   margin-right: 30px;
   color: #2c3441;
   font-size: 22px;
   width: 22px;
   height: 22px;
   line-height: 1;
}

.allow__us a:hover {
   transform: translateY(-4px);
}

.allow__us a:last-child {
   margin-right: 0;
}

.slide-wrapper {
   display: none;
}

.banner {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   background: #cccccc;
}

.banner:hover .scene-nav {
   opacity: 1;
}

.banner:hover .scene-nav.scene-nav--prev {
   left: 30px;
}

.banner:hover .scene-nav.scene-nav--next {
   right: 30px;
}

.banner canvas {
   display: block;
   position: absolute;
}

.scene-nav {
   position: absolute;
   top: 50%;
   margin-top: -20px;
   font-size: 40px;
   line-height: 1;
   color: #fff;
   z-index: 10;
   cursor: pointer;
   opacity: 0;
   transition: 0.45s;
}

.scene-nav.scene-nav--prev {
   left: -30px;
}

.scene-nav.scene-nav--next {
   right: -30px;
}

.slide-dit {
   position: absolute;
   left: 30px;
   bottom: 60px;
   z-index: 12;
   overflow: hidden;
}

.slide-dit span {
   display: block;
   float: left;
   margin-right: 35px;
   width: 12px;
   height: 16px;
   cursor: pointer;
   background: url(../images/water.png) center no-repeat;
   transition: 0.44s;
}

.slide-dit span:last-child {
   margin-right: 0;
}

.slide-dit span.active {
   animation: shake 1s forwards;
   background: url(../images/water1.png) center no-repeat;
}

@keyframes shake {

   from,
   to {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
   }

   25% {
      -webkit-transform: scale(0.9, 1.1);
      transform: scale(0.9, 1.1);
   }

   50% {
      -webkit-transform: scale(1.1, 0.9);
      transform: scale(1.1, 0.9);
   }

   75% {
      -webkit-transform: scale(0.95, 1.05);
      transform: scale(0.95, 1.05);
   }

   from,
   to {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
   }

   25% {
      -webkit-transform: scale(0.9, 1.1);
      transform: scale(0.9, 1.1);
   }

   50% {
      -webkit-transform: scale(1.1, 0.9);
      transform: scale(1.1, 0.9);
   }

   75% {
      -webkit-transform: scale(0.95, 1.05);
      transform: scale(0.95, 1.05);
   }
}

@-webkit-keyframes shake {

   from,
   to {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
   }

   25% {
      -webkit-transform: scale(0.9, 1.1);
      transform: scale(0.9, 1.1);
   }

   50% {
      -webkit-transform: scale(1.1, 0.9);
      transform: scale(1.1, 0.9);
   }

   75% {
      -webkit-transform: scale(0.95, 1.05);
      transform: scale(0.95, 1.05);
   }

   from,
   to {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
   }

   25% {
      -webkit-transform: scale(0.9, 1.1);
      transform: scale(0.9, 1.1);
   }

   50% {
      -webkit-transform: scale(1.1, 0.9);
      transform: scale(1.1, 0.9);
   }

   75% {
      -webkit-transform: scale(0.95, 1.05);
      transform: scale(0.95, 1.05);
   }
}

.banner__text {
   position: absolute;
   z-index: 10;
   left: 0;
   width: 100%;
   bottom: 140px;
}

.banner__text__item {
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   width: 100%;
   visibility: hidden;
   transition: 1.5s;
   transform: scale(0.8);
}

.banner__text__item.active {
   position: relative;
   opacity: 1;
   visibility: visible;
   transform: scale(1);
   transition: 1.5s 1s;
}

.banner__text__item h4 {
   display: block;
   text-align: center;
   line-height: 1.2;
   color: #fff;
   font-size: 50px;
}

.banner__li {
   margin-top: 54px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.banner__li li {
   text-align: center;
   margin-right: 56px;
}

.banner__li li:last-child {
   margin-right: 0;
}

.banner__li li b {
   display: block;
   margin-bottom: 24px;
   line-height: 1;
   color: #fff;
   font-size: 38px;
   font-weight: normal;
}

.banner__li li p {
   color: #fff;
   font-size: 15px;
   line-height: 1.5;
}

.scroll-more {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 36px;
   z-index: 15;
   text-align: center;
}

.scroll-more i {
   display: block;
   position: relative;
   width: 10px;
   height: 10px;
   border: 1px solid #fff;
   border-radius: 50%;
   margin: auto;
}

.scroll-more i:before {
   position: absolute;
   left: 50%;
   top: 100%;
   margin-top: 2px;
   content: "";
   width: 1px;
   height: 11px;
   background: #fff;
   transform-origin: center top;
   animation: move2 2s infinite;
}

.scroll-more span {
   display: block;
   margin-top: 24px;
   color: #fff;
   font-size: 12px;
   line-height: 1;
}

@keyframes move2 {
   0% {
      opacity: 1;
      transform: scaleY(1);
   }

   50% {
      transform: scaleY(0);
      opacity: 0.2;
   }
}

.consulting {
   position: absolute;
   right: 40px;
   bottom: 50px;
   z-index: 12;
}

.consulting a {
   display: block;
   position: relative;
   width: 60px;
   height: 60px;
   text-align: center;
   line-height: 60px;
   border-radius: 50%;
   color: #fff;
   font-size: 27px;
   background: #000000;
}

.consulting a i {
   display: block;
   position: absolute;
   left: 50%;
   margin-left: -34px;
   top: -18px;
   width: 68px;
   height: 20px;
   line-height: 20px;
   border-radius: 10px;
   color: #333333;
   font-size: 12px;
   font-style: normal;
   text-align: center;
   background-color: #fff;
}

.consulting a i:before {
   position: absolute;
   left: 50%;
   margin-left: -6px;
   bottom: -8px;
   content: "";
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
   border-top: 8px solid #fff;
}

.concerning {
   position: relative;
}

.concerning-swiper {
   position: relative;
   height: 100vh;
}

.no-height {
   height: 0 !important;
   overflow: hidden;
}

.concerning-zindex {
   z-index: 10;
   visibility: visible !important;
}

.concerning-slide.swiper-slide-prev {
   pointer-events: visible;
}

.concerning-slide.swiper-slide-prev .introhide {
   opacity: 0;
   visibility: hidden;
   transition: 0.8s 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.concerning-slide.swiper-slide-prev .introduct-imgs img {
   transform: scale(4.5);
   opacity: 0;
   visibility: hidden;
   transition: transform 1s 0s cubic-bezier(0.755, 0.05, 0.855, 0.06), all 1s 0s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.concerning-slide.swiper-slide-prev .water1 {
   opacity: 1;
}

.concerning-slide.swiper-slide-prev .introsvg {
   transform: scale(4.5);
   opacity: 0;
   visibility: hidden;
   transition: transform 1s 0s cubic-bezier(0.755, 0.05, 0.855, 0.06), all 1s 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.concerning-slide.swiper-slide-prev .introductinner-bg {
   transform: scale(1.4);
   transition: 1.8s 0.1s;
}

.concerning-slide.swiper-slide-prev .commons-text {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
   transition-delay: 1.2s;
}

.introhide {
   position: relative;
   width: 100%;
   height: 100%;
   background: #fff;
   transition: 0.8s 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.introducte {
   position: relative;
   z-index: 3;
   height: 100vh;
}

.introsvg {
   transition: 1s 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.introducte-bg {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
}

.introducte-bg svg {
   width: 100%;
   height: 100%;
}

.introducte-bg svg>rect {
   -webkit-mask: url(../fonts/style.css);
   transition: 1.8s 0s;
}

.commons-text {
   position: absolute;
   left: 0;
   bottom: 16.666%;
   text-align: center;
   width: 100%;
   opacity: 0;
   visibility: hidden;
   transform: scale(0.9);
   transition: 1s;
}

.commons-text p {
   margin-bottom: 37px;
   color: #ffffff;
   font-size: 16px;
   line-height: 1;
}

.commons-text strong {
   display: block;
   color: #fff;
   font-size: 44px;
   line-height: 1.4;
}

.commons-text span {
   position: relative;
   z-index: 2;
   margin-top: 35px;
   display: inline-block;
   color: #fff;
   font-size: 15px;
   line-height: 33px;
}

.commons-text span:hover i {
   background: #fff;
   text-indent: 3px;
}

.commons-text span i {
   display: inline-block;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   text-align: center;
   line-height: 32px;
   color: #2c3441;
   font-size: 16px;
   background: #6cccdc;
   border-radius: 50%;
   transition: 0.36s;
}

.water1 {
   opacity: 0;
   transition: transform 1s 0s cubic-bezier(0.755, 0.05, 0.855, 0.06), all 1s 0s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.introduct-imgs {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   width: 24%;
   height: auto;
}

.introduct-imgs img {
   display: block;
   width: 100%;
   height: auto;
   transition: transform 1s 0.1s, all 1s 0.2s;
}

.introducte__text {
   position: absolute;
   left: 4.687%;
   top: 18.3333%;
   width: 810px;
   z-index: 10;
}

.introducte__text h6 {
   display: block;
   margin-bottom: 38px;
   line-height: 1;
   color: #0d0d0d;
   font-size: 16px;
   font-weight: normal;
}

.introducte__text strong {
   display: block;
   color: #2c3441;
   font-size: 44px;
   line-height: 1.4;
}

.introducte__text strong.hide {
   display: none;
}

.introducte__text span {
   display: inline-block;
   margin-top: 35px;
   color: #2c3441;
   font-size: 15px;
   line-height: 32px;
   transition: 0.68s;
}

.introducte__text span:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
   background: #fff;
}

.introducte__text span:hover i {
   text-indent: 4px;
}

.introducte__text span i {
   display: inline-block;
   margin-right: 7px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   color: #2c3441;
   font-size: 18px;
   line-height: 32px;
   text-align: center;
   font-weight: bold;
   transition: 0.35s;
}

.introducte-data {
   position: absolute;
   left: 4.687%;
   bottom: 90px;
   display: flex;
   display: -webkit-flex;
   z-index: 10;
}

.introduct-item {
   margin-right: 57px;
}

.introduct-item span {
   margin-bottom: 6px;
   display: flex;
   display: -webkit-flex;
   color: #6cccdc;
   font-size: 44px;
   line-height: 1;
}

.introduct-item span b {
   display: inline-block;
   font-weight: normal;
}

.introduct-item span i {
   font-style: normal;
}

.introduct-item p {
   line-height: 1;
   color: #333333;
   font-size: 14px;
}

.scroll-more1 i {
   border-color: #999999;
}

.scroll-more1 i:before {
   background: #999;
}

.scroll-more1 span {
   color: #999;
}

.supplier {
   position: relative;
   height: 100vh;
   background-position: center;
   background-size: cover;
}

.supplier .commons-text {
   display: none;
}

.industry {
   position: relative;
   z-index: 3;
   overflow: hidden;
}

.industry-slide {
   position: relative;
   overflow: hidden;
}

.industry-slide a {
   display: block;
}

.industry-slide figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.industry-slide figure img {
   display: block;
   width: 100%;
   height: auto;
   position: relative;
}

.industry-slide .commons-text {
   bottom: auto;
   top: 58%;
   margin-top: -159px;
   opacity: 1;
   visibility: visible;
   transform: scale(1);
}

.industry-btn {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 15.37%;
   display: flex;
   display: -webkit-flex;
   z-index: 10;
}

.industry-btn-item {
   position: relative;
   padding-bottom: 28px;
   margin-right: 54px;
   cursor: pointer;
}

.industry-btn-item:last-child {
   margin-right: 0;
}

.industry-btn-item:hover .waters:before,
.industry-btn-item.active .waters:before {
   transform: rotateY(180deg);
   background: url(../images/water4.png) center no-repeat;
}

.industry-btn-item:hover .waters i,
.industry-btn-item.active .waters i {
   color: #242c39;
}

.industry-btn-item .waters {
   position: relative;
   z-index: 3;
   width: 66px;
   height: 85px;
}

.industry-btn-item .waters:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   background: url(../images/water3.png) center no-repeat;
   transition: 0.5s;
}

.industry-btn-item .waters i {
   display: block;
   padding-top: 34px;
   color: #fff;
   font-size: 28px;
   font-style: normal;
   text-align: center;
   line-height: 1;
   transition: 0.4s;
}

.industry-btn-item span {
   display: block;
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   line-height: 1;
   color: #fff;
   font-size: 14px;
   white-space: nowrap;
}

.home-product {
   position: relative;
   height: 100vh;
   overflow: hidden;
}

.home-product:before {
   position: absolute;
   left: 50%;
   margin-left: -100vw;
   top: 100%;
   margin-top: -8.4%;
   content: "";
   width: 200vw;
   height: 200vw;
   background: #f6f6f6;
   border-radius: 50%;
}

.product-btn {
   position: absolute;
   left: 50%;
   margin-left: -166px;
   top: 12%;
}

.product-btn a {
   display: block;
   position: relative;
   z-index: 3;
   margin-right: 22px;
   float: left;
   color: #333333;
   font-size: 24px;
   line-height: 1.5;
   font-weight: bold;
}

.product-btn a:before {
   content: "";
   width: 0;
   height: 12px;
   background: #6cccdc;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.product-btn a:hover,
.product-btn a.active {
   color: #fff;
}

.product-btn a:hover:before,
.product-btn a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.product-btn a:last-child {
   margin-right: 0;
}

.product-btn a:hover,
.product-btn a.active {
   color: #2c3441;
}

.product-tab {
   position: relative;
   z-index: 3;
   top: 24vh;
}

.product-tab:before {
   position: absolute;
   left: 50%;
   margin-left: -384px;
   top: 80px;
   content: "";
   width: 769px;
   height: 204px;
   background: url(../images/litter.png) center no-repeat;
}

.product-swiper {
   padding: 0 5%;
}

.product-item {
   display: none;
}

.product-item:first-child {
   display: block;
}

.pro-slide {
   overflow: hidden;
   width: 33.333%;
   text-align: center;
   transition: 0.5s;
   padding-top: 100px;
}

.pro-slide.swiper-slide-prev figure {
   transform: scale(0.8) rotate(-15deg);
}

.pro-slide.swiper-slide-duplicate-next figure {
   transform: scale(0.5) rotate(-30deg);
}

.pro-slide.swiper-slide-next figure {
   transform: scale(0.8) rotate(15deg);
}

.pro-slide.swiper-slide-duplicate-prev figure {
   transform: scale(0.5) rotate(30deg);
}

.pro-slide.swiper-slide-active {
   padding-top: 20px;
}

.pro-slide.swiper-slide-active .protext {
   opacity: 1;
   visibility: visible;
   transition-delay: 0.25s;
}

.pro-slide:hover figure img {
   transform: scale(1.05);
}

.pro-slide figure {
   display: block;
   height: 38.333vh;
   text-align: center;
   transform: scale(1) rotate(0deg);
}

.pro-slide figure img {
   margin: auto;
   display: block;
   width: auto;
   height: 100%;
   transition: 0.68s;
}

.protext {
   margin-top: 48px;
   text-align: center;
   opacity: 0;
   visibility: hidden;
   transition: 0.6s;
}

.protext strong {
   display: block;
   margin-bottom: 18px;
   line-height: 1.1;
   color: #2c3441;
   font-size: 24px;
   font-weight: normal;
}

.protext span {
   display: inline-block;
   color: #2c3441;
   font-size: 15px;
   line-height: 32px;
}

.protext span:hover i {
   text-indent: 4px;
}

.protext span i {
   display: inline-block;
   margin-right: 7px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   color: #2c3441;
   font-size: 18px;
   line-height: 32px;
   text-align: center;
   font-weight: bold;
   transition: 0.4s;
}

.product-prev {
   position: absolute;
   top: 62.9%;
   width: 58px;
   height: 58px;
   border: 1px solid #b5b5b5;
   text-align: center;
   line-height: 58px;
   color: #333d4c;
   cursor: pointer;
   font-size: 16px;
   z-index: 10;
   border-radius: 50%;
   transition: 0.56s;
}

.product-prev:hover {
   background: #6cccdc;
   border-color: #6cccdc;
   color: #fff;
}

.product-prev.prev {
   left: 4.68%;
   transform: rotate(-15deg);
}

.product-prev.next {
   right: 4.68%;
   transform: rotate(15deg);
}

.product-more {
   position: absolute;
   left: 4.6875%;
   top: 12%;
   z-index: 20;
}

.product-more .commons-text {
   position: static;
   opacity: 1;
   visibility: visible;
   transform: scale(1);
   text-align: left;
   bottom: auto;
}

.product-more .commons-text p {
   color: #333333;
   display: none;
}

.product-more .commons-text strong {
   font-size: 44px;
   color: #333333;
   line-height: 1.2;
   font-weight: bold;
}

.product-more .commons-text strong b {
   display: block;
   color: #7e8ba5;
   font-weight: bold;
}

.product-more .commons-text span {
   color: #2c3441;
   transition: 0.4s;
}

.product-more .commons-text span:hover {
   color: #6cccdc;
}

.product-more .commons-text span:hover i {
   background: #6cccdc;
}

.product-swiper {
   position: relative;
}

.product-swiper .swiper-pagination {
   position: relative;
   bottom: 0;
   margin-top: 50px;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet {
   position: relative;
   margin: 0;
   margin-right: 6px;
   width: 14px;
   height: 14px;
   opacity: 1;
   background: none;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet:last-child {
   margin-right: 0;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
   background: #6cccdc;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
   opacity: 1;
   visibility: visible;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet:before {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -3px;
   margin-top: -3px;
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #cccccc;
   transition: 0.4s;
}

.product-swiper .swiper-pagination .swiper-pagination-bullet:after {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border: 2px solid #6cccdc;
   box-sizing: border-box;
   border-radius: 50%;
   opacity: 0;
   visibility: hidden;
   transition: 0.4s;
}

.prodict-slide figure {
   position: relative;
   display: block;
   height: 300px;
   text-align: center;
}

.prodict-slide figure img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
}

.prodict-slide span {
   display: block;
   margin-top: 30px;
   color: #666666;
   font-size: 18px;
   text-align: center;
}

.paprev {
   position: absolute;
   top: 24%;
   width: 23px;
   height: 113px;
   z-index: 10;
   background: url(../images/wave1.png) center no-repeat;
   background-size: cover !important;
   transition: 0.45s;
   display: none !important;
}

.paprev:hover {
   background: url(../images/wave3.png) center no-repeat;
}

.paprev:hover i {
   color: #fff;
}

.paprev i {
   position: absolute;
   left: 2px;
   top: 50%;
   margin-top: -8px;
   display: block;
   font-size: 16px;
   color: #3d4450;
   line-height: 1;
   z-index: 3;
   font-style: normal;
}

.paprev.next {
   right: 0;
   background: url(../images/wave2.png) center no-repeat;
}

.paprev.next:hover {
   background: url(../images/wave4.png) center no-repeat;
}

.paprev.next i {
   left: auto;
   right: 2px;
}

.company-dynamic {
   position: relative;
   z-index: 3;
   height: 100vh;
}

.Circles {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none !important;
   z-index: 0;
}

.Circles-circle {
   display: block;
   position: absolute;
   will-change: transform;
   transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.Circles-circle:nth-child(1) {
   width: 33.7vw;
   height: 33.7vw;
   left: -16.8vw;
   top: -16.8vw;
   background: #fff;
   z-index: 2;
   border-radius: 50%;
}

.Circles-circle:nth-child(2) {
   width: 59.68vw;
   height: 59.58vw;
   left: -29.84vw;
   top: -29.84vw;
   transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1);
   background: #f6f6f6;
   border-radius: 50%;
}

.Circles-dot {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}

.Circles-dot:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 50%;
   transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;
   will-change: transform;
}

.dynamic-wrap {
   position: absolute;
   left: 4.42%;
   right: 9.16%;
   bottom: 11.111%;
}

.dynamic-wrap h4 {
   margin-bottom: 86px;
   color: #2c3441;
   font-size: 24px;
   line-height: 1.2;
}

.dynamic-slide {
   width: 454px;
}

.dynamic-slide a:hover span i {
   background: #6cccdc;
   text-indent: 4px;
}

.dynamic-slide time {
   display: block;
   margin-bottom: 30px;
   line-height: 1;
   color: #333333;
   font-size: 48px;
   font-weight: bold;
}

.dynamic-slide strong {
   display: block;
   font-size: 30px;
   margin-bottom: 34px;
   line-height: 1.4;
   color: #2c3441;
   font-weight: bold;
   min-height: 84px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.dynamic-slide p {
   font-size: 14px;
   color: #666666;
   min-height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.dynamic-slide span {
   display: inline-block;
   margin-top: 54px;
   color: #2c3441;
   font-size: 14px;
   line-height: 32px;
}

.dynamic-slide span i {
   display: inline-block;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   line-height: 32px;
   text-align: center;
   color: #2c3441;
   border-radius: 50%;
   background: #e1e1e1;
   transition: 0.4s;
}

.dynamic-btn {
   margin-top: 5.812vw;
   display: flex;
   display: -webkit-flex;
}

.dynamic-prev {
   display: flex;
   display: -webkit-flex;
}

.dynamic-prev span {
   display: block;
   margin-right: 13px;
   width: 58px;
   height: 58px;
   border: 1px solid #b5b5b5;
   text-align: center;
   line-height: 58px;
   border-radius: 50%;
   color: #0d1014;
   font-size: 16px;
   cursor: pointer;
   transition: 0.4s;
}

.dynamic-prev span:hover {
   background-color: #6cccdc;
   color: #fff;
   border-color: #6cccdc;
}

.dynamic-more a {
   display: block;
   width: 173px;
   height: 58px;
   line-height: 58px;
   border: 1px solid #b5b5b5;
   color: #242c39;
   font-size: 15px;
   border-radius: 30px;
   text-align: center;
   letter-spacing: 2px;
}

.dynamic-more a:hover {
   border-color: #6cccdc;
   background: #6cccdc;
   color: #fff;
}

.dynamic-more a:hover i {
   color: #fff;
}

.dynamic-more a i {
   display: inline-block;
   margin-right: 14px;
   color: #666666;
   font-style: normal;
   font-size: 18px;
   transition: 0.36s;
}

.customers {
   padding: 60px 30px 56px;
   background-color: #f0f0f0;
   border-bottom: 1px solid #dbdbdb;
}

.customers-title {
   float: left;
   padding-left: 62px;
   padding-top: 8px;
   text-align: right;
}

.customers-title strong {
   display: block;
   line-height: 1;
   color: #333333;
   font-size: 24px;
   letter-spacing: 2px;
}

.customers-btn {
   margin-top: 22px;
   text-align: right;
}

.customers-btn span {
   display: inline-block;
   margin-left: 5px;
   width: 28px;
   height: 28px;
   text-align: center;
   line-height: 28px;
   border: 1px solid #9b9b9b;
   border-radius: 50%;
   color: #222832;
   font-size: 16px;
   transition: 0.4s;
   cursor: pointer;
}

.customers-btn span:hover {
   border-color: #6cccdc;
   background: #6cccdc;
}

.customers-swiper {
   margin-left: 210px;
}

.customers-slide {
   width: 180px;
}

.customers-slide figure {
   display: block;
   line-height: 1;
}

.customers-slide figure:hover img {
   filter: grayscale(0);
   -webkit-filter: grayscale(0);
}

.customers-slide figure img {
   display: block;
   width: 100%;
   height: auto;
   filter: grayscale(1);
   -webkit-filter: grayscale(1);
   transition: 0.4s;
}

.section-footer {
   padding-top: 70px;
   position: relative;
   height: auto;
   background: #f0f0f0;
}

.footer-top {
   padding: 80px 70px 134px 90px;
   background: #f0f0f0;
}

.footer-left {
   float: left;
}

.footer-search {
   margin-bottom: 80px;
}

.footer-search span {
   display: block;
   color: #2c3441;
   font-size: 14px;
}

.searchs {
   margin-top: 10px;
   display: flex;
   display: -webkit-flex;
}

.searchs .text {
   box-sizing: border-box;
   padding-left: 16px;
   border: none;
   width: 360px;
   background: #fff;
   height: 50px;
   line-height: 50px;
   outline: none;
   color: #a5a5a5;
   font-size: 15px;
   font-family: "PingFang-SC-Regular";
}

.searchs .text::-webkit-input-placeholder {
   color: #a5a5a5;
}

.searchs .text:focus::-webkit-input-placeholder {
   opacity: 0;
}

.searchs .sub {
   width: 120px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   cursor: pointer;
   background: #2c3441;
   color: #fff;
   font-size: 30px;
   border: none;
   transition: 0.4s;
}

.searchs .sub:hover {
   background: #6cccdc;
}

.footer__menu {
   width: 62.23vw;
}

.footer__menu .menu__item dt a {
   font-size: 14px;
}

.footer__menu .menu__item dd p a {
   font-size: 14px;
   color: #333333;
}

.footer__menu .menu__item dd p a:hover {
   font-weight: normal;
}

.footer__menu .menu__item dd p a:before {
   height: 4px;
}

.footer__menu .product__menu__btn span {
   font-size: 14px;
}

.footer-right {
   float: right;
}

.allow-us {
   margin-bottom: 80px;
}

.allow-us span {
   display: block;
   line-height: 1;
   color: #2c3441;
   font-size: 14px;
   letter-spacing: 2px;
}

.allow-list {
   margin-top: 24px;
   display: flex;
   display: -webkit-flex;
}

.allow-list a {
   display: block;
   line-height: 1;
   color: #2c3441;
   font-size: 22px;
   margin-right: 28px;
}

.allow-list a:last-child {
   margin-right: 0;
}

.allow-list a:hover {
   color: #6cccdc;
}

.eq {
   display: flex;
   display: -webkit-flex;
}

.eq-item {
   text-align: center;
   margin-right: 18px;
}

.eq-item figure {
   display: block;
   width: 103px;
}

.eq-item figure img {
   width: 100%;
}

.eq-item span {
   display: block;
   margin-top: 10px;
   line-height: 1;
   color: #666666;
   font-size: 14px;
}

.footer-bottom {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
   padding: 32px 90px 38px;
   background: #dfdfdf;
}

.footer-copy p {
   color: #333333;
   font-size: 14px;
   line-height: 2;
}

.copy {
   display: flex;
   display: -webkit-flex;
}

.copy a {
   display: inline-block;
   color: #9a9a9a;
   font-size: 14px;
   line-height: 2;
}

.copy a:first-child {
   margin-right: 40px;
   color: #2c3441;
}

.copy a:hover {
   color: #6cccdc;
}

.links {
   position: relative;
}

.links:hover span i {
   transform: rotate(270deg);
}

.links:hover .links-li {
   opacity: 1;
   visibility: visible;
   pointer-events: visible;
   transform: translateY(0px);
}

.links span {
   display: block;
   padding: 16px 0 6px;
   border-bottom: 1px solid #777777;
   position: relative;
   color: #333333;
   font-size: 14px;
   width: 262px;
   cursor: pointer;
}

.links span i {
   display: block;
   position: absolute;
   right: 3px;
   bottom: 10px;
   line-height: 1;
   color: #343c48;
   font-style: normal;
   transform: rotate(90deg);
   transition: 0.35s;
}

.links-li {
   position: absolute;
   left: 0;
   bottom: 100%;
   width: 100%;
   background: #fff;
   padding: 10px 0;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translateY(-20px);
   transition: 0.5s;
}

.links-li:before {
   position: absolute;
   left: 50%;
   margin-left: -8px;
   bottom: -9px;
   content: "";
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-top: 9px solid #fff;
}

.links-li li {
   text-align: center;
}

.links-li li a {
   display: inline-block;
   color: #333;
   font-size: 14px;
   line-height: 40px;
}

.links-li li a:hover {
   color: #6cccdc;
}

.footer-scrolltop {
   display: none;
   overflow: hidden;
}

.footer-scrolltop a {
   display: block;
   float: left;
   margin-left: 10px;
   width: 50px;
   height: 50px;
   text-align: center;
   line-height: 50px;
   border-radius: 50%;
   background: #000;
   color: #fff;
   font-size: 24px;
}

.footer-scrolltop a:first-child {
   margin-left: 0;
}

.footer-scrolltop a:last-child {
   transform: rotate(90deg);
}

.home-swiper {
   position: relative;
   height: 100vh;
}

.contact_shape {
   z-index: 10;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   fill: rgba(0, 0, 0, 0);
}

.contact_shape:not(:root) {
   overflow: hidden;
}

.contact_shape .contact_shape_2,
.contact_shape .contact_shape_3,
.contact_shape .contact_shape_4 {
   display: none;
}

.contact_shape_1 {
   fill: #f6f6f6;
}

.home-slide {
   overflow: hidden;
}

.home-slide:last-child {
   overflow-y: auto;
}

.right-navigate {
   position: fixed;
   right: 30px;
   top: 50%;
   transform: translateY(50%);
   -webkit-transform: translateY(50%);
   margin-top: -75px;
   z-index: 20;
   right: -100px;
   opacity: 0;
   transition: 0.68s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.right-navigate.show {
   opacity: 1;
   right: 30px;
}

.right-navigate.Colors .navigate-li li.active i:before {
   background: none;
}

.right-navigate.Colors .navigate-li li i:before {
   background: #fff;
}

.right-navigate.Colors .navigate-li li span {
   color: #fff;
}

.right-navigate .consulting {
   position: absolute;
   bottom: -90px;
   right: -20px;
}

.right-navigate .consulting i {
   opacity: 0;
   visibility: hidden;
   margin-top: -15px;
   transition: 0.45s;
}

.right-navigate .consulting:hover i {
   opacity: 1;
   visibility: visible;
   margin-top: 0;
}

.navigate-li li {
   position: relative;
   margin-bottom: 16px;
   cursor: pointer;
}

.navigate-li li:hover i:before,
.navigate-li li.active i:before {
   left: 0;
   margin-left: 0;
   top: 0;
   margin-top: 0;
   width: 100%;
   height: 100%;
   border: 2px solid #6cccdc;
   background: transparent;
}

.navigate-li li:hover span,
.navigate-li li.active span {
   opacity: 1;
   visibility: visible;
   transform: translateX(0px);
}

.navigate-li li i {
   display: block;
   position: relative;
   width: 16px;
   height: 16px;
}

.navigate-li li i:before {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -4px;
   margin-top: -4px;
   content: "";
   width: 8px;
   height: 8px;
   box-sizing: border-box;
   background: #a5a5a5;
   border-radius: 50%;
   transition: 0.45s;
}

.navigate-li li span {
   display: block;
   position: absolute;
   right: 100%;
   top: 0;
   padding-right: 17px;
   line-height: 16px;
   color: #40475e;
   font-size: 14px;
   letter-spacing: 1px;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transform: translateX(-20px);
   transition: 0.4s;
}

.pbanner {
   position: relative;
   overflow: hidden;
}

.pbanner figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.pbanner figure img {
   display: block;
   position: relative;
}

.pbanner figure .aboutVideo {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 2;
   display: none;
}

.about-text {
   position: absolute;
   left: 50%;
   margin-left: -600px;
   bottom: 22.59%;
   text-align: center;
}

.about-text img {
   display: block;
   margin: auto;
   width: 36.875vw;
}

.about-text strong {
   display: block;
   margin-top: 58px;
   margin-bottom: 40px;
   color: #fff;
   font-size: 50px;
   line-height: 1.2;
}

.about-text span {
   display: inline-block;
   color: #fff;
   line-height: 32px;
   font-size: 15px;
   cursor: pointer;
}

.about-text span:hover i {
   transform: scale(1.2);
}

.about-text span i {
   display: inline-block;
   vertical-align: middle;
   margin-right: 7px;
   position: relative;
   top: -1px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   text-align: center;
   transition: 0.38s;
}

.about-text span i:before {
   position: absolute;
   top: 50%;
   margin-top: -5px;
   left: 13px;
   content: "";
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 7px solid #000;
}

.leval-menus {
   position: relative;
}

.leval-menu-flex {
   position: sticky;
   left: 0;
   top: 0;
   height: 80px;
   background: #f8f8f8;
   text-align: center;
   z-index: 40;
   border-bottom: 1px solid #eee
}

.leval-list {
   display: inline-flex;
   display: -webkit-inline-flex;
   align-items: center;
   -webkit-align-items: center;
   height: 100%;
}

.leval-list li {
   position: relative;
   z-index: 3;
   margin-right: 64px;
}

.leval-list li:before {
   content: "";
   width: 0;
   height: 9px;
   background: #e2c494;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.leval-list li:hover,
.leval-list li.active {
   color: #fff;
}

.leval-list li:hover:before,
.leval-list li.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.leval-list li:last-child {
   margin-right: 0;
}

.leval-list li.active a,
.leval-list li:hover a {
   color: #2c3441;
}

.leval-list li a {
   display: inline-block;
   position: relative;
   z-index: 3;
   color: #333333;
   font-size: 16px;
   padding: 0 2px;
}

.about-introduct {
   position: relative;
   z-index: 3;
   padding: 124px 0 428px;
   overflow: hidden;
}

.about-introduct .particle-network-animation {
   pointer-events: none;
}

.about-introduct .about-waters {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 0;
   pointer-events: none;
   content: "";
   width: 130%;
   height: 465px;
   background: url(../images/43.png) center bottom no-repeat;
   transition: 0.1s;
}

@keyframes bg_move {
   0% {
      left: 0;
   }

   100% {
      left: -30%;
   }
}

.about-introduct-wrap {
   margin: auto;
   width: 705px;
}

.commons-text1 {
   position: relative;
   bottom: 0;
   opacity: 1;
   visibility: visible;
   transform: scale(1);
}

.commons-text1 h6 {
   margin-bottom: 20px;
   color: #303743;
   font-size: 16px;
}

.commons-text1 strong {
   color: #242c39;
   line-height: 1.2;
}

.about-intro-text {
   position: relative;
   margin-top: 24px;
   padding-top: 82px;
   line-height: 200%
}

.about-intro-text:before {
   position: absolute;
   left: 50%;
   margin-left: -1px;
   top: 0;
   content: "";
   width: 2px;
   height: 48px;
   background: #d1d1d1;
}

.about-intro-text p {
   color: #666666;
   font-size: 16px;
   text-indent: 34px;
   text-align: center;
}

.about-btns {
   margin-top: 62px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.about-btn-item {
   margin-right: 26px;
}

.about-btn-item a {
   display: block;
   position: relative;
   z-index: 3;
   width: 120px;
   height: 120px;
   text-align: center;
   padding-top: 24px;
   box-sizing: border-box;
}

.about-btn-item a:hover,
.about-btn-item a:hover b {
   color: #e2c494
}

/* .about-btn-item a:hover:before {
   background-color: #6cccdc;
   transform: rotateY(180deg);
} */

/* .about-btn-item a:hover b,
.about-btn-item a:hover span {
   color: #fff;
} */

/* .about-btn-item a:hover b {
   transform: translateY(-4px);
} */

/* .about-btn-item a:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #f8f8f8;
   transition: 0.45s;
} */

.about-btn-item a b {
   display: block;
   margin-bottom: 10px;
   color: #333;
   font-size: 50px;
   line-height: 1;
   font-weight: normal;
   transition: 0.38s;
   position: relative;
   z-index: 5;
}


.about-btn-item a b::after {
   content: '';
   position: absolute;
   top: 20px;
   left: 0;
   right: 0;
   margin: 0 auto;
   height: 15px;
   width: 15px;
   background: rgba(226, 196, 148, .6);
   border-radius: 50%;
   z-index: 1;
}

.about-btn-item a:hover b::after {
   transition: 0.38s;
   top: 10px;
}

.about-btn-item a span {
   display: block;
   line-height: 1;
   font-size: 16px;
   transition: 0.38s;
}

.about-btn-item:last-child {
   margin-right: 0;
}

.mission {
   margin: auto;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   padding: 88px 0 190px;
   width: 1240px;
}

.commons-text2 {
   position: relative;
   bottom: 0;
   top: 0;
   opacity: 1;
   visibility: visible;
   transform: scale(1);
   text-align: left;
   width: auto;
}

.commons-text2 p {
   color: #242c39;
}

.commons-text2 strong {
   color: #242c39;
   line-height: 1.2;
}

.commons-text2 strong b {
   display: block;
   color: #7e8ba5;
}

.commons-text2 span {
   transition: 0.4s;
   color: #2c3441;
}

.commons-text2 span:hover {
   color: #6cccdc;
}

.commons-text2 span:hover i {
   background: #6cccdc;
}

.mission-right {
   position: relative;
   width: 652px;
   height: 652px;
}

.misiio-bg {
   position: relative;
   width: 100%;
   height: 100%;
}

.misiio-bg figure {
   display: block;
   width: 100%;
   height: 100%;
}

.misiio-bg figure img {
   position: absolute;
   right: -16.56%;
   top: -5.36%;
   height: 127.6%;
}

.misiio-bg .misiio-arl {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -36.5%;
   margin-top: -36.5%;
   display: block;
   width: 73%;
   height: auto;
}

.mission-item {
   position: absolute;
}

.mission-item a {
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.mission-item a:hover .mision-icon:before {
   transform: scale(1.1);
}

.mission-item a:hover .mision-icon i {
   transform: rotate(180deg);
}

.mission-item a span {
   display: block;
   margin: 0 10px;
   color: #273441;
   font-size: 14px;
   white-space: nowrap;
}

.mission-item1 {
   left: 79.38%;
   top: 17.17%;
}

@keyframes scalcMove {
   0% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.3);
      opacity: 0.2;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

.mision-icon {
   position: relative;
   z-index: 2;
   width: 69px;
   height: 69px;
   border-radius: 50%;
}

.mision-icon:before {
   position: absolute;
   left: 0;
   top: 0;
   content: "";
   width: 100%;
   height: 100%;
   background: rgba(108, 204, 220, 0.2);
   border-radius: 50%;
   z-index: -1;
   transition: 0.4s;
   animation: scalcMove 3s infinite;
}

.mision-icon i {
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -16px;
   margin-top: -16px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   transition: 0.4s;
}

.mision-icon i:before {
   position: absolute;
   left: 50%;
   margin-left: -7px;
   top: 50%;
   margin-top: -1px;
   content: "";
   width: 14px;
   height: 2px;
   border-radius: 1px;
   background: #242c39;
}

.mision-icon i:after {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -1px;
   margin-top: -7px;
   content: "";
   width: 2px;
   height: 14px;
   border-radius: 1px;
   background: #242c39;
}

.mission-item2 {
   top: 35.88%;
   right: 88.65%;
}

.mission-item2 a {
   flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
}

.honor-box {
   padding-top: 65px;
   padding-bottom: 44px;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   overflow: hidden;
}

.honor-box .honor-titles {
   padding-left: 74px;
   color: #fff;
   font-size: 16px;
   font-weight: normal;
}

.honor-swiper {
   padding-left: 12.29%;
   margin-top: 150px;
   height: 610px;
   cursor: grab;
}

.honor-slide {
   height: 100%;
   width: 2595px;
   background: url(../images/honor.png) 54px 62px no-repeat;
   margin-left: -100px;
}

.honor-slide:first-child {
   margin-left: 0;
}

.honor-item {
   position: absolute;
   cursor: pointer;
}

.honor-item:hover figure {
   transform: translateY(-10px);
}

.honor-item figure {
   display: block;
   width: 108px;
   height: 108px;
   border: 6px solid #fff;
   border-radius: 50%;
   transition: 0.45s;
}

.honor-item figure img {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
}

.honor-item time {
   display: block;
   margin-top: 18px;
   line-height: 1;
   color: #fff;
   font-size: 18px;
   text-align: center;
}

.honor-item1 {
   left: 0;
   top: 35.57%;
}

.honor-item2 {
   left: 17.18%;
   top: 29.5%;
}

.honor-item3 {
   left: 29.59%;
   top: 19.344%;
}

.honor-item3 figure {
   width: 188px;
   height: 188px;
}

.honor-item3 time {
   margin-top: 22px;
   font-size: 36px;
}

.honor-item4 {
   left: 43.853%;
   top: 47.377%;
}

.honor-item5 {
   left: 57.92%;
   top: 10px;
}

.honor-item6 {
   left: 53.95%;
   bottom: 0;
}

.honor-item7 {
   left: 64.74%;
   top: 51.475%;
}

.honor-item7 figure {
   width: 188px;
   height: 188px;
}

.honor-item7 time {
   margin-top: 22px;
   font-size: 36px;
}

.honor-item8 {
   left: 81.96%;
   top: 53.77%;
}


.honor-item9 {
   left: 0;
   top: 35.57%;
}

.honor-item10 {
   left: 17.18%;
   top: 29.5%;
}

.honor-item11 {
   left: 29.59%;
   top: 19.344%;
}

.honor-item11 figure {
   width: 188px;
   height: 188px;
}

.honor-item11 time {
   margin-top: 22px;
   font-size: 36px;
}

.honor-item12 {
   left: 43.853%;
   top: 47.377%;
}

.honor-item13 {
   left: 57.92%;
   top: 10px;
}

.honor-item14 {
   left: 53.95%;
   bottom: 0;
}

.honor-item15 {
   left: 64.74%;
   top: 51.475%;
}

.honor-item15 figure {
   width: 188px;
   height: 188px;
}

.honor-item15 time {
   margin-top: 22px;
   font-size: 36px;
}

.honor-item16 {
   left: 81.96%;
   top: 53.77%;
}

.honor-item17 {
   right: 0;
   top: 37.54%;
}

.honor-hand {
   margin-top: 36px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
   align-items: center;
   -webkit-align-items: center;
}

.honor-hand i {
   display: inline-block;
   color: #fff;
   font-size: 18px;
   line-height: 1;
}

.honor-hand span {
   display: block;
   margin: 0 22px;
   color: #fff;
   line-height: 1;
   font-size: 28px;
   animation: handMove 1s infinite;
}

@keyframes handMove {
   0% {
      opacity: 1;
      transform: translateX(4px);
   }

   100% {
      opacity: 0.2;
      transform: translateX(-4px);
   }
}

.member-box {
   position: relative;
   overflow: hidden;
}

.member-imgs {
   position: relative;
   width: 79%;
}

.member-imgs img {
   display: block;
   width: 100%;
   height: auto;
}

.about-left p {
   text-align: left;
}

.member-in {
   position: absolute;
   z-index: 5;
}

.member-in a {
   color: #4e545f;
   font-size: 15px;
   line-height: 1;
   display: block;
}

.member-in a:hover {
   color: #6cccdc;
}

.member-in1 {
   left: 57%;
   top: 59.28%;
}

.member-in2 {
   left: 47.85%;
   top: 69.05%;
}

.member-in3 {
   left: 49.7%;
   top: 81.68%;
}

.member-in4 {
   left: 44.49%;
   top: 89.1%;
}

.member-text {
   position: absolute;
   right: 50%;
   margin-right: -600px;
   top: 50%;
   margin-top: -167px;
   width: 400px;
}

.member-text strong {
   display: block;
   line-height: 1.2;
   color: #242c39;
   font-size: 44px;
}

.member-data {
   margin-top: 52px;
   margin-left: -44px;
   margin-right: -44px;
   display: flex;
   display: -webkit-flex;
}

.member-data-item {
   flex: 1;
   -webkit-box-flex: 1;
   text-align: center;
   padding: 7px 0 28px;
   border-right: 1px solid #f5f5f5;
}

.member-data-item:last-child {
   border-right: none;
}

.member-data-item strong {
   display: block;
   margin-bottom: 10px;
   line-height: 1;
   color: #6cccdc;
   font-size: 44px;
   font-weight: normal;
}

.member-data-item p {
   display: block;
   color: #2c3441;
   font-size: 14px;
   line-height: 1;
}

.checkmore {
   margin-top: 43px;
}

.checkmore a {
   display: inline-block;
   color: #2c3441;
   font-size: 15px;
   line-height: 32px;
}

.checkmore a:hover {
   color: #6cccdc;
}

.checkmore a:hover i {
   text-indent: 3px;
}

.checkmore a i {
   position: relative;
   top: -1px;
   display: inline-block;
   vertical-align: middle;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   text-align: center;
   line-height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   color: #2c3441;
   font-size: 18px;
   transition: 0.32s;
}

.staffs {
   padding-top: 98px;
   padding-bottom: 180px;
}

.staff-tt {
   display: block;
   margin-bottom: 52px;
   line-height: 1;
   text-align: center;
   color: #242c39;
   font-size: 30px;
}

.staff-text {
   position: relative;
}

.staff-text figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.staff-text figure img {
   display: block;
   width: 100%;
   height: auto;
}

.staff-text .mission-item {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
}

.staff-text .mission-item span {
   color: #fff;
}

.pop-honor {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 199;
   opacity: 0;
   visibility: hidden;
   transition: 1s;
   pointer-events: none;
}

.pop-honor.show {
   opacity: 1;
   visibility: visible;
   pointer-events: visible;
}

.pop-honor.show .honor-pop-content {
   transform: scale(1);
}

.pop-honor.show .honor-pop-content .honor-wr {
   opacity: 1;
   visibility: visible;
   margin-top: 0;
}

.pop-bg {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
}

.honor-pop-content {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 2;
   margin-left: -362px;
   margin-top: -362px;
   width: 724px;
   height: 724px;
   border-radius: 50%;
   transform: scale(0);
   transition: 1s;
}

.honor-pop-content:before {
   position: absolute;
   left: 0;
   top: 0;
   content: "";
   width: 100%;
   height: 100%;
   background: #fff;
   border-radius: 50%;
}

.closes {
   display: block;
   position: absolute;
   right: 27px;
   top: 96px;
   line-height: 1;
   color: #fff;
   cursor: pointer;
   font-size: 36px;
   transition: 0.4s;
}

.closes:hover {
   transform: rotate(180deg);
}

.honor-wr {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   width: 454px;
   max-width: 90%;
   opacity: 0;
   visibility: hidden;
   margin-top: 120px;
   transition: 0.78s;
}

.honor-wr time {
   display: block;
   margin-bottom: 65px;
   text-align: center;
   line-height: 1;
   color: #242c39;
   font-size: 48px;
}

.honor-wr p {
   position: relative;
   padding-left: 25px;
   color: #666666;
   font-size: 16px;
}

.honor-wr p:before {
   position: absolute;
   left: 0;
   top: 10px;
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #666666;
}

.inner-video {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 199;
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: 0.88s;
}

.inner-video.show {
   opacity: 1;
   visibility: visible;
   pointer-events: visible;
}

.inner-video.show .inner-video-wr {
   opacity: 1;
   visibility: visible;
   margin-top: 0;
}

.inner-video-wr {
   position: absolute;
   left: 50%;
   margin-left: -600px;
   top: 50%;
   padding-bottom: 605px;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   margin-top: 200px;
   opacity: 0;
   visibility: hidden;
   transition: 0.68s;
}

.inner-video-wr .aboutVideo {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

.inner-video-wr .closevideo {
   display: block;
   position: absolute;
   right: -30px;
   top: 0;
   line-height: 1;
   color: #fff;
   font-size: 30px;
   object-fit: cover;
   cursor: pointer;
   transition: 0.4s;
}

.inner-video-wr .closevideo:hover {
   transform: rotate(180deg);
}

.waterWdqp {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   pointer-events: none;
   overflow: hidden;
   z-index: 9;
   /* display: none; */
}

.waterWdqp dd {
   position: relative;
   -webkit-animation: sway 8s 0s ease-in-out infinite;
   animation: sway 8s 0s ease-in-out infinite;
}

.waterWdqp dd span {
   width: 153px;
   height: 145px;
   background: url(../images/bubble1.png) no-repeat center center;
   background-size: cover;
   position: absolute;
   animation-name: qipao;
   animation-duration: 60s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

.waterWdqp dd.dd1 span {
   -webkit-animation: rise 6.5s 0.3s linear infinite;
   animation: rise 6.5s 0.3s linear infinite;
   left: 10%;
   top: calc(100vh);
}

.waterWdqp dd.dd2 span {
   -webkit-animation: rise 18s linear infinite;
   animation: rise 18s linear infinite;
   height: 120px;
   left: 33.12%;
   top: calc(100vh);
   width: 142px;
   background: url(../images/bubble3.png) no-repeat center center;
}

.waterWdqp dd.dd3 span {
   -webkit-animation: rise 28s 0.45s linear infinite;
   animation: rise 28s 0.45s linear infinite;
   height: 164px;
   left: 62.18%;
   top: calc(100vh);
   width: 153px;
   background: url(../images/bubble4.png) no-repeat center center;
}

.waterWdqp dd.dd4 span {
   -webkit-animation: rise 12s linear infinite;
   animation: rise 12s linear infinite;
   height: 78px;
   left: 35.41%;
   top: calc(100vh);
   width: 78px;
   background: url(../images/bubble5.png) no-repeat center center;
}

.waterWdqp dd.dd5 span {
   -webkit-animation: rise 14s 0.5s linear infinite;
   animation: rise 14s 0.5s linear infinite;
   height: 38px;
   left: 46%;
   top: calc(100vh);
   width: 38px;
}

.waterWdqp dd.dd6 span {
   -webkit-animation: rise 9.5s 0.2s linear infinite;
   animation: rise 9.5s 0.2s linear infinite;
   height: 48px;
   left: 10%;
   top: calc(100vh);
   width: 48px;
}

.waterWdqp dd.dd7 span {
   -webkit-animation: rise 13.5s linear infinite;
   animation: rise 13.5s linear infinite;
   height: 14px;
   left: 65%;
   top: calc(100vh);
   width: 14px;
}

.waterWdqp dd.dd8 span {
   -webkit-animation: rise 17s linear infinite;
   animation: rise 17s linear infinite;
   height: 36px;
   left: 85%;
   top: calc(100vh);
   width: 36px;
}

.waterWdqp dd.dd10 span {
   -webkit-animation: rise 5.5s linear infinite;
   animation: rise 5.5s linear infinite;
   height: 16px;
   left: 71%;
   top: calc(100%);
   width: 16px;
}

.waterWdqp dd.dd11 span {
   -webkit-animation: rise 6.5s linear infinite;
   animation: rise 6.5s linear infinite;
   height: 42px;
   left: 20%;
   top: calc(100%);
   width: 42px;
}

@-webkit-keyframes rise {
   0% {
      top: 120vh;
   }

   70% {
      opacity: 1;
   }

   95% {
      opacity: 0;
   }

   100% {
      top: -150vh;
      opacity: 0.3;
   }
}

@keyframes rise {
   0% {
      top: 120vh;
   }

   70% {
      opacity: 1;
   }

   95% {
      opacity: 0;
   }

   100% {
      top: -150vh;
      opacity: 0.3;
   }
}

@-webkit-keyframes sway {
   20% {
      -webkit-transform: translate(-28px);
      transform: translate(-28px);
   }

   25% {
      -webkit-transform: translate(-30px);
      transform: translate(-30px);
   }

   70% {
      -webkit-transform: translate(28px);
      transform: translate(28px);
   }

   75% {
      -webkit-transform: translate(30px);
      transform: translate(30px);
   }
}

@keyframes sway {
   20% {
      -webkit-transform: translate(-28px);
      transform: translate(-28px);
   }

   25% {
      -webkit-transform: translate(-30px);
      transform: translate(-30px);
   }

   70% {
      -webkit-transform: translate(28px);
      transform: translate(28px);
   }

   75% {
      -webkit-transform: translate(30px);
      transform: translate(30px);
   }
}

.slidetop.article-block,
.list-animate.article-block>li,
.list-animate.article-block>div {
   opacity: 0;
   visibility: hidden;
   transform: translateY(80px);
   transition: 0.78s;
}

.slidetop.articleShow,
.list-animate.articleShow>li,
.list-animate.articleShow>div {
   opacity: 1;
   visibility: visible;
   transform: translateY(0px);
}

.slidetop.detay1.article-block,
.list-animate.article-block>li:nth-child(2),
.list-animate.article-block>div:nth-child(2) {
   transition-delay: 0.2s;
}

.slidetop.detay2.article-block,
.list-animate.article-block>li:nth-child(3),
.list-animate.article-block>div:nth-child(3) {
   transition-delay: 0.4s;
}

.slidetop.detay3.article-block,
.list-animate.article-block>li:nth-child(4),
.list-animate.article-block>div:nth-child(4) {
   transition-delay: 0.6s;
}

.slidetop.detay4.article-block,
.list-animate.article-block>li:nth-child(5),
.list-animate.article-block>div:nth-child(5) {
   transition-delay: 0.8s;
}

.slidetop.detay5.article-block,
.list-animate.article-block>li:nth-child(6),
.list-animate.article-block>div:nth-child(6) {
   transition-delay: 1s;
}

.slidetop.detay6.article-block,
.list-animate.article-block>li:nth-child(7),
.list-animate.article-block>div:nth-child(7) {
   transition-delay: 1.2s;
}

.slidetop.detay7.article-block,
.list-animate.article-block>li:nth-child(8),
.list-animate.article-block>div:nth-child(8) {
   transition-delay: 1.4s;
}

.slidetop.detay8.article-block,
.list-animate.article-block>li:nth-child(9),
.list-animate.article-block>div:nth-child(9) {
   transition-delay: 1.6s;
}

.slidetop.detay9.article-block,
.list-animate.article-block>li:nth-child(10),
.list-animate.article-block>div:nth-child(10) {
   transition-delay: 1.8s;
}

.mission-right.article-block .misiio-bg figure {
   transform: scale(0);
   transition: 0.8s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.honor-titles a {
   display: inline-block;
   margin: 0 20px 10px 0;
   position: relative;
   z-index: 11;
   font-size: 18px;
   color: #fff
}

.honor-titles a:hover {
   color: #fff
}

.honor-titles a::after {
   content: '';
   display: block;
   position: absolute;
   height: 9px;
   width: 0;
   bottom: 2px;
   right: 0;
   background: #e2c494;
   z-index: -1;
   transition: all 0.4s ease 0s;
}

.honor-titles a:hover::after,
.honor-titles a#current::after {
   width: 100%;
   right: auto;
   left: 0;
}

.mission-right.article-block .misiio-bg .misiio-arl {
   opacity: 0;
   transform: rotate(180deg);
   transition: 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mission-right.articleShow .misiio-bg figure {
   transform: scale(1);
}

.mission-right.articleShow .misiio-bg .misiio-arl {
   opacity: 1;
   transform: rotate(0deg);
}

.mission-box {
   overflow: hidden;
}

.mtop {
   height: 50px;
}

.inner-introduct {
   position: relative;
   z-index: 3;
   padding: 120px 0 145px;
}

.inner-introduct .about-introduct-wrap {
   width: 800px;
}

.inner-introduct:before {
   display: none;
}

.particle-network-animation {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}

.particle-network-animation canvas {
   width: 100%;
   height: 100%;
}

.introduct-inf0 {
   margin: 90px -60px 0 -25px;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.introduct-inf0-item {
   padding: 0 35px;
   padding-bottom: 8px;
   border-right: 1px solid #f5f5f5;
   text-align: center;
}

.introduct-inf0-item:first-child {
   padding-left: 0;
}

.introduct-inf0-item:last-child {
   border-right: none;
   padding-right: 0;
}

.introduct-inf0-item p {
   margin-bottom: 10px;
   color: #6cccdc;
   font-size: 14px;
   line-height: 1;
}

.introduct-inf0-item p b {
   margin-right: 6px;
   font-size: 44px;
   font-weight: normal;
}

.introduct-inf0-item span {
   display: block;
   line-height: 1.3;
   color: #2c3441;
   font-size: 14px;
}

.zy_bussiness {
   padding: 114px 0 148px;
}

.zy_bussiness .h_about_box ul {
   margin-top: 0;
}

.company-culture {
   position: relative;
   z-index: 2;
   padding: 114px 0 148px;
   border-top: 12px solid #f8f8f8;
   border-bottom: 12px solid #f8f8f8;
}

.company-culture-wr {
   margin: auto;
}

.company-list li {
   float: left;
   margin-right: 0.695%;
   position: relative;
   width: 32.87%;
}

.company-list li:nth-child(3n+3) {
   margin-right: 0;
}

.company-list li figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.company-list li figure img {
   display: block;
   width: 100%;
   height: auto;
   transition: 0.65s;
}

.company-list li:hover figure img {
   transform: scale(1.06);
}

.company-list li:hover .culture-fix:before {
   background: rgba(36, 44, 57, 0.7);
   transform: scale(0.917);
}

.company-list li:hover .culture-tops b:before {
   transform: rotateY(180deg);
}

.company-list li:hover .culture-hidden {
   margin-top: -135px;
}

.company-list li:hover .culture-info {
   opacity: 1;
   visibility: visible;
   pointer-events: visible;
}

.company-list li:hover .culture-info:before {
   height: 19px;
}

.culture-fix {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 3;
   width: 100%;
   height: 100%;
}

.culture-fix:before {
   position: absolute;
   left: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.5);
   content: "";
   width: 100%;
   height: 100%;
   z-index: -1;
   transition: 0.65s;
}

.culture-hidden {
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: -59px;
   width: 100%;
   text-align: center;
   transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.culture-tops b {
   display: block;
   position: relative;
   z-index: 2;
   margin: auto;
   width: 66px;
   height: 85px;
   color: #fff;
   font-weight: normal;
   font-size: 28px;
   padding-top: 38px;
   box-sizing: border-box;
   line-height: 1;
}

.culture-tops b:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   background: url(../images/water5.png) center top no-repeat;
   transition: 0.5s;
}

.culture-tops strong {
   display: block;
   margin-top: 16px;
   line-height: 1;
   text-align: center;
   color: #fff;
   font-size: 16px;
   font-weight: normal;
}

.culture-info {
   margin: auto;
   margin-top: 26px;
   text-align: center;
   width: 210px;
   max-width: 90%;
   position: relative;
   padding-top: 50px;
   opacity: 0;
   visibility: hidden;
   transition: 0.56s;
}

.culture-info:before {
   position: absolute;
   left: 50%;
   top: 0;
   content: "";
   width: 1px;
   height: 0;
   background: #fff;
   transition: 1s;
}

.culture-info p {
   color: #fff;
   font-size: 16px;
   text-align: center;
   line-height: 1.6;
}

.prize {
   padding: 94px 0 150px;
}

.prize-wrap {
   margin: auto;
   max-width: 90%;
   width: 1370px;
}

.prize-btn {
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.prize-btn li {
   position: relative;
   z-index: 3;
   padding: 0 2px;
   margin-right: 25px;
   cursor: pointer;
   color: #303743;
   font-size: 16px;
   line-height: 1.5;
}

.prize-btn li:before {
   content: "";
   width: 0;
   height: 7px;
   background: #6cccdc;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.prize-btn li:hover,
.prize-btn li.active {
   color: #fff;
}

.prize-btn li:hover:before,
.prize-btn li.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.prize-btn li:last-child {
   margin-right: 0;
}

.prize-btn li.active,
.prize-btn li:hover {
   color: #303743;
}

.prize-fix {
   margin-top: 54px;
   position: relative;
   padding: 0 104px;
}



.honor_zizhi .swiper-slide {
   position: relative;
   width: 148px;
   padding: 14px;
   background: #f8f8f8;
   cursor: pointer;
}

.honor_zizhi .swiper-slide span {
   display: block;
   margin-top: 12px;
   line-height: 1.2;
   text-align: center;
   color: #303743;
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.honor_zizhi .swiper-slide a img {
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   transition: 0.58s;
}

.honor_zizhi .swiper-slide:hover img {
   transform: scale(1.1);
}

.honor_zizhi .swiper-slide:hover .prize-mark {
   opacity: 1;
   visibility: visible;
}

.honor_zizhi .swiper-slide a {
   display: block;
   position: relative;
   text-align: center;
   overflow: hidden;
}

.prize-slide {
   position: relative;
   width: 198px;
   box-sizing: border-box;
   cursor: pointer;
}

.prize-slide:hover figure img {
   transform: scale(1.1);
}

.prize-slide:hover .prize-mark {
   opacity: 1;
   visibility: visible;
}

.prize-slide figure {
   position: relative;
   padding: 14px;
   background: #f8f8f8;
}

.prize-slide figure a {
   display: block;
   position: relative;
   padding-bottom: 143.9%;
   text-align: center;
   overflow: hidden;
}

.prize-slide figure a img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   transition: 0.58s;
}

.prize-slide span {
   display: block;
   margin-top: 12px;
   line-height: 1.2;
   text-align: center;
   color: #303743;
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.prize-mark {
   position: absolute;
   left: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   z-index: 3;
   opacity: 0;
   visibility: hidden;
   transition: 0.65s;
}

.prize-mark p {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 14px;
   line-height: 1;
}

.prize-mark p i {
   display: block;
   font-size: 28px;
   font-weight: normal;
   margin-bottom: 14px;
   font-style: normal;
}

.prize-prev {
   position: absolute;
   top: 50%;
   margin-top: -22px;
   width: 43px;
   height: 43px;
   border: 1px solid #b6b6b6;
   text-align: center;
   line-height: 43px;
   border-radius: 50%;
   cursor: pointer;
   font-size: 18px;
   color: #374051;
   z-index: 10;
   transition: 0.45s;
   background: none;
}

.prize-prev:hover {
   background: #e2c494;
   border-color: #e2c494;
   color: #fff;
}

.prize-prev.prev {
   left: 0;
}

.prize-prev.next {
   right: 0;
}

.patent-item {
   font-size: 0;
}

.patent-flex {
   display: inline-block;
   vertical-align: top;
   width: 230px;
   height: 100vh;
   box-sizing: border-box;
   border-right: 1px solid #ededed;
   position: sticky;
   left: 0;
   top: 0;
}

.patent-title {
   padding-left: 50px;
   padding-top: 160px;
}

.patent-title strong {
   position: relative;
   display: block;
   color: #242c39;
   font-size: 24px;
   line-height: 1.2;
}

.patent-title strong i {
   display: block;
   position: absolute;
   right: -19px;
   top: -6px;
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background: rgba(108, 204, 220, 0.2);
}

.patent-title strong i:before {
   position: absolute;
   left: 12px;
   top: 12px;
   content: "";
   width: 13px;
   height: 13px;
   background: #6cccdc;
   border-radius: 50%;
}

.patent-li {
   margin-top: 48px;
   padding-right: 18px;
}

.patent-li li {
   margin-bottom: 8px;
}

.patent-li li.active a {
   color: #333;
}

.patent-li li.active a:before {
   width: 100%;
   right: auto;
   left: 0;
}

.patent-li li a {
   position: relative;
   z-index: 3;
   display: inline-block;
   color: #999999;
   font-size: 16px;
   line-height: 1.5;
}

.patent-li li a:before {
   content: "";
   width: 0;
   height: 1px;
   background: #333333;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.patent-li li a:hover,
.patent-li li a.active {
   color: #fff;
}

.patent-li li a:hover:before,
.patent-li li a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.patent-li li a:hover,
.patent-li li a.active {
   color: #333;
}

.patent-content {
   display: inline-block;
   margin-left: calc((100% - 230px) - 75%);
   vertical-align: top;
   width: 75%;
   box-sizing: border-box;
}

.patent-items {
   padding-top: 140px;
   padding-bottom: 98px;
   border-bottom: 12px solid #f8f8f8;
}

.partent-intro {
   width: 978px;
   max-width: 90%;
   font-size: 16px;
   line-height: 1.8;
}

.partent-intro p {
   color: #666666;
   font-size: 16px;
}

.partent-intro img {
   max-width: 100%;
   height: auto;
   width: auto;
}

.patent-tt {
   display: block;
   margin-bottom: 24px;
   color: #242c39;
   font-size: 24px;
   line-height: 1.2;
}

.patent-info {
   position: relative;
   z-index: 3;
   margin-bottom: 116px;
}

.patent-info:last-child {
   margin-bottom: 0;
}

.courses-bg {
   position: absolute;
   right: 6.8%;
   top: -52px;
   z-index: -1;
   width: 72.7%;
}

.courses {
   position: relative;
   z-index: 3;
   margin-top: 54px;
   padding-top: 40px;
   padding-bottom: 48px;
}

.courses:before {
   content: "";
   width: 6px;
   position: absolute;
   left: 10px;
   top: 0;
   bottom: 0;
   background: #f8f8f8;
}

.courses i {
   display: block;
   position: absolute;
   left: -6px;
   top: -15px;
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background: rgba(108, 204, 220, 0.2);
}

.courses i:before {
   position: absolute;
   left: 12px;
   top: 12px;
   content: "";
   width: 13px;
   height: 13px;
   background: #6cccdc;
   border-radius: 50%;
}

.course-list {
   margin-left: 48px;
}

.course-list li {
   display: flex;
   display: -webkit-flex;
   margin-bottom: 30px;
}

.course-list li:last-child {
   margin-bottom: 0;
}

.course-list li time {
   display: block;
   position: relative;
   width: 82px;
   color: #999999;
   font-size: 18px;
}

.course-list li time:before {
   position: absolute;
   content: "";
   width: 18px;
   height: 1px;
   background: #cecece;
   left: -38px;
   top: 13px;
}

.course-list li p {
   flex: 1;
   -webkit-flex: 1;
   color: #242c39;
   font-size: 18px;
}

.research {
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   -moz-justify-content: space-between;
}

.research li {
   box-sizing: border-box;
   margin-bottom: 26px;
   padding: 40px 35px 35px;
   background: rgba(39, 92, 168, .1);
   border: 1px solid rgba(39, 92, 168, .1);
   width: 31.5%;
   margin-right: 1.83333%;
   transition: .4s
}

.research li:hover {
   background: none;
   border: 1px solid #eee
}

.research li time {
   display: block;
   margin-bottom: 15px;
   line-height: 1.2;
   color: #242c39;
   font-size: 16px;
   font-weight: bold;
}



.research li p {
   color: #666666;
   font-size: 16px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.mission-img {
   position: relative;
   z-index: 0;
   margin-top: -365px;
   margin-bottom: -270px;
   overflow: hidden;
   width: 100%;
}

.mission-img img {
   position: relative;
   left: -3%;
   width: 103%;
}

.separate {
   width: 980px;
   max-width: 90%;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
}

.separate-imgs {
   width: 46.5%;
}

.separate-imgs img {
   width: 100%;
   height: auto;
}

.separate-text {
   line-height: 1.8;
   width: 49.38%;
   color: #666666;
   font-size: 16px;
}

.patent-info .partentimg {
   max-width: 100%;
   width: auto;
   height: auto;
}

.evaluate {
   width: 980px;
   max-width: 90%;
   margin-top: -28px;
}

.evaluate-item {
   padding: 36px 0 30px;
   border-bottom: 1px dashed #d2d2d2;
}

.evaluate-item:last-child {
   border-bottom: none;
}

.evaluate-item strong {
   margin-bottom: 15px;
   display: block;
   color: #2673c0;
   font-size: 16px;
}

.evaluate-item p {
   color: #666666;
   font-size: 16px;
}

.pvc-item {
   position: relative;
   text-align: right;
   margin-bottom: 78px;
   display: flex;
   justify-content: space-between;
   flex-direction: row-reverse;
   align-items: center;
}

.pvc-item figure {
   display: inline-block;
   width: 66.6666%;
}

.pvc-item figure img {
   display: block;
   width: 100%;
   height: auto;
}

.pvc-text {
   position: relative;
   z-index: 3;
   margin-right: -16.666%;
   padding: 42px 58px 70px 0;
   width: 50.4%;
   background: #fff;
   box-sizing: border-box;
}

.pvc-text .partent-intro {
   text-align: left;
}

.pvc-text .partent-intro strong {
   display: block;
   margin-bottom: 38px;
   font-size: 24px;
}

.patent-item:last-of-type .patent-content .patent-items:last-child {
   border-bottom: none;
}

.base {
   padding: 120px 0 100px;
}

.commonline {
   margin: 25px auto 28px;
   width: 2px;
   height: 48px;
   background: #d1d1d1;
}

.base-imgs {
   position: relative;
}

.base-imgs img {
   width: 100%;
   height: auto;
}

.base-texts {
   width: 800px;
   margin: auto;
   margin-top: 52px;
   max-width: 100%;
}

.base-texts p {
   color: #666666;
   font-size: 16px;
}

.enterprises {
   padding: 76px 0 118px;
}

.enterprises-list {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
}

.enterprises-list li {
   padding: 56px 40px 45px;
   margin-bottom: 25px;
   width: 49%;
   box-sizing: border-box;
   background: #f8f8f8;
}

.enterprises-list li strong {
   display: block;
   margin-bottom: 20px;
   line-height: 1.2;
   color: #242c39;
   font-size: 24px;
}

.enterprises-list li p {
   color: #666666;
   font-size: 16px;
}

.enterprises-li {
   margin-top: 84px;
}

.area-enter {
   padding-bottom: 16px;
   padding-left: 40px;
   font-weight: normal;
   color: #999999;
   font-size: 16px;
   border-bottom: 1px solid #999999;
}

.enterprises-info {
   padding: 35px 40px 40px;
   border-bottom: 1px solid #999;
}

.enterprises-main strong {
   display: block;
   margin-bottom: 14px;
   color: #242c39;
   font-size: 24px;
   line-height: 1.2;
}

.enterprises-main p {
   color: #666666;
   font-size: 16px;
}

.enterprises-mins {
   padding-top: 8px;
}

.enterprises-mins .enterprises-main {
   margin-top: 20px;
   width: 50%;
   float: left;
}

.enterprises-mins .enterprises-main strong {
   font-size: 18px;
}

.staff-box {
   padding: 80px 41px 100px;
}

.staff-item.article-block figure {
   opacity: 0;
   transform: scale(0.8);
   transition: 0.68s cubic-bezier(0.77, 0, 0.175, 1);
}

.staff-item.article-block.articleShow figure {
   opacity: 1;
   transform: scale(1);
}

.staff-list .staff-item {
   width: 20%;
}

.staff-list .staff-item figure {
   display: block;
   position: relative;
   margin: 0 18px 36px;
   cursor: pointer;
   overflow: hidden;
}

.staff-list .staff-item figure:hover a img {
   transform: scale(1.1);
}

.staff-list .staff-item figure:hover .staff-down {
   opacity: 1;
   visibility: visible;
   bottom: 0;
}

.staff-list .staff-item figure a {
   display: block;
   overflow: hidden;
   line-height: 1;
   width: 100%;
   height: 100%;
}

.staff-list .staff-item figure a img {
   display: block;
   width: 100%;
   height: auto;
   transition: 0.56s;
}

.staff-down {
   position: absolute;
   left: 0;
   bottom: -82px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
   opacity: 0;
   visibility: hidden;
   transition: 0.5s;
}

.staff-down p {
   display: none;
}

.staff-down strong {
   display: block;
   padding-top: 48px;
   height: 33px;
   text-align: center;
   color: #fff;
   font-size: 16px;
   font-weight: normal;
   line-height: 1;
}

/* 
.pswp__ui--fit .pswp__top-bar {
   background: none !important;
   z-index: 20;
}

.pswp__counter,
.pswp--supports-fs .pswp__button--fs,
.pswp__button pswp__button--zoom {
   display: none !important;
}

.pswp__button--close {
   right: 28px;
   top: 29px;
   width: auto;
   height: auto;
   color: #fff;
   font-size: 32px !important;
   transition: 0.4s !important;
}

.pswp__button--close:hover {
   transform: rotate(180deg) !important;
}

.pswp__caption__center {
   padding-top: 32px;
   padding-bottom: 100px;
   width: 1020px;
   max-width: 90%;
   padding-left: 0;
   padding-right: 0;
}

.pswp__caption__center strong {
   display: block;
   margin-bottom: 26px;
   color: #fff;
   font-size: 16px;
   line-height: 1.2;
   font-weight: normal;
}

.pswp__caption__center p {
   color: #fff;
   font-size: 16px;
   line-height: 1.8;
   text-align: left;
} */

.staff-more {
   margin-top: 70px;
   text-align: center;
}

.staff-more span {
   display: block;
   margin-top: 18px;
   line-height: 1;
   color: #999999;
   font-size: 16px;
   transition: 0.38s;
}

.staff-more a:hover span {
   color: #6cccdc;
}

.staff-more a:hover .staff-ico i {
   background: #6cccdc;
}

.staff-ico {
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.staff-ico i {
   display: inline-block;
   margin-right: 8px;
   width: 7px;
   height: 7px;
   background: #cccccc;
   border-radius: 50%;
   transition: 0.38s;
}

.staff-ico i:last-child {
   margin-right: 0;
}

.ptext {
   position: absolute;
   left: 50%;
   margin-left: -600px;
   bottom: 170px;
   text-align: center;
   z-index: 10;
}

.ptext p {
   margin-bottom: 20px;
   color: #ffffff;
   font-size: 16px;
}

.ptext strong {
   display: block;
   line-height: 1.2;
   color: #fff;
   font-size: 44px;
}

.industry-fix {
   padding: 158px 0 0;
}

.industry-btns {
   display: flex;
   display: -webkit-flex;
   margin-bottom: 64px;
}

.industry-btns a {
   display: block;
   position: relative;
   z-index: 3;
   flex: 1;
   -webkit-flex: 1;
   padding: 0 12px;
   height: 80px;
   text-align: center;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   color: #333333;
   font-size: 24px;
   background: #f9f9f9;
   justify-content: center;
   -webkit-justify-content: center;
}

.industry-btns a:before {
   content: "";
   width: 100%;
   height: 0;
   background: #6cccdc;
   position: absolute;
   left: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.industry-btns a:hover,
.industry-btns a.active {
   color: #6cccdc;
}

.industry-btns a:hover:before,
.industry-btns a.active:before {
   height: 100%;
   bottom: auto;
   top: 0;
}

.industry-btns a:first-child {
   margin-right: 1px;
}

.industry-btns a:hover,
.industry-btns a.active {
   color: #2c3441;
}

.industry-li li {
   margin-bottom: 58px;
   display: flex;
   display: -webkit-flex;
}

.industry-li li:hover figure img {
   transform: scale(1.05);
}

.industry-li li:last-child {
   margin-bottom: 0;
}

.industry-imgs {
   width: 50%;
}

.industry-imgs figure {
   position: relative;
   display: block;
   padding-bottom: 60%;
   height: 0;
   overflow: hidden;
   line-height: 1;
}

.industry-imgs figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.industry-texts {
   padding: 44px 0 10px 5.3333%;
   width: 50%;
   box-sizing: border-box;
   border-bottom: 2px solid #abb0b4;
}

.industry-texts strong {
   display: block;
   margin-bottom: 30px;
   line-height: 1.2;
   color: #242c39;
   font-size: 30px;
   font-weight: normal;
}

.industry-texts p {
   color: #666666;
   font-size: 16px;
   line-height: 1.6;
}

.page-list {
   padding: 88px 0 75px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.page-list a {
   display: inline-block;
   margin-right: 7px;
   height: 44px;
   line-height: 44px;
   color: #666666;
   font-size: 14px;
   min-width: 44px;
   border-radius: 22px;
   padding: 0 14px;
   text-align: center;
   box-sizing: border-box;
}

.page-list a:last-child {
   margin-right: 0;
}

.page-list a:last-child,
.page-list a:first-child {
   background: #f9f9f9;
}

.page-list a:hover,
.page-list a.active {
   background: #2c3441;
   color: #fff;
}

.page-list span {
   margin-right: 7px;
   line-height: 40px;
   color: #666666;
   font-size: 14px;
}

.no-flexs {
   position: static;
}

.sulutes {
   padding: 80px 0;
}

.solute-list li {
   margin-bottom: 110px;
}

.solute-list li:last-child {
   margin-bottom: 0;
}

.solute-list li:nth-child(2n+2) a {
   flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
}

.solute-list li:nth-child(2n+2) a .solute-content {
   padding: 30px 7.69% 64px 30px;
}

.solute-list li a {
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.solute-list li a:hover figure img {
   transform: scale(1.06);
}

.solute-list li a:hover .solute-content:before {
   width: 100%;
   right: auto;
   left: 0;
}

.solute-list li a:hover .solute-content span i {
   text-indent: 3px;
}

.solute-imgs {
   width: 50%;
}

.solute-imgs figure {
   position: relative;
   display: block;
   padding-bottom: 52%;
   height: 0;
   overflow: hidden;
   line-height: 1;
}

.solute-imgs figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.solute-content {
   position: relative;
   z-index: 2;
   flex: 1;
   -webkit-flex: 1;
   box-sizing: border-box;
   padding: 30px 4.487% 64px;
   border-bottom: 1px solid #d5d7d9;
}

.solute-content:before {
   content: "";
   width: 0;
   height: 1px;
   background: #e2c494;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.65s;
   z-index: -1;
}

.solute-content:hover,
.solute-content.active {
   color: #fff;
}

.solute-content:hover:before,
.solute-content.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.solute-content:before {
   bottom: -1px;
}

.solute-content strong {
   display: block;
   margin-bottom: 35px;
   line-height: 1.2;
   color: #242c39;
   font-size: 44px;
}

.solute-content p {
   color: #666666;
   font-size: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.solute-content span {
   display: inline-block;
   margin-top: 75px;
   color: #2c3441;
   font-size: 15px;
   line-height: 32px;
}

.solute-content span i {
   display: inline-block;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #e2c494;
   color: #2c3441;
   font-size: 12px;
   text-align: center;
   transition: 0.32s;
}

.product-banner {
   position: relative;
   height: 100vh;
   overflow: hidden;
}

.product-inner {
   position: relative;
   height: 100vh;
}

.productinner-slide {
   overflow: hidden;
}

.productinner-slide figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.productinner-slide figure img {
   display: block;
   position: relative;
   width: 100%;
   height: auto;
}

.ptext a {
   display: inline-block;
   margin-top: 36px;
   color: #fff;
   font-size: 15px;
   line-height: 32px;
   cursor: pointer;
}

.ptext a:hover {
   color: #6cccdc;
}

.ptext a:hover i {
   text-indent: 3px;
}

.ptext a i {
   display: inline-block;
   margin-right: 6px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   text-align: center;
   line-height: 32px;
   background: #6cccdc;
   color: #2c3441;
   font-size: 16px;
   transition: 0.35s;
}

.series {
   padding: 42px 0 22px;
   background: #f6f6f6;
}

.series-list {
   margin-left: -16px;
   margin-right: -16px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
}

.series-list li {
   margin-right: 2.43333%;
   width: 12.2%;
   margin-bottom: 10px;
}

.series-list li:last-child {
   margin-right: 0;
}

.series-list li:hover figure:before,
.series-list li.active figure:before {
   height: 100%;
   bottom: auto;
   top: 0;
}

.series-list li figure {
   display: block;
   position: relative;
   z-index: 3;
   height: 90px;
   background: #fff;
   text-align: center;
}

.series-list li figure:before {
   content: "";
   width: 100%;
   height: 0;
   background: #6cccdc;
   position: absolute;
   left: 0;
   bottom: 0;
   transition: 0.5s;
   z-index: -1;
}

.series-list li figure:hover,
.series-list li figure.active {
   color: #6cccdc;
}

.series-list li figure:hover:before,
.series-list li figure.active:before {
   height: 100%;
   bottom: auto;
   top: 0;
}

.series-list li figure img {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 90%;
   max-height: 90px;
}

.series-list li span {
   display: block;
   margin-top: 12px;
   line-height: 1;
   color: #333333;
   font-size: 16px;
   text-align: center;
}

.series-allbtn {
   display: flex;
   display: -webkit-flex;
   padding: 30px 0 20px;
   border-bottom: 1px solid #ececec;
}

.series-allbtn span {
   display: block;
   margin-right: 30px;
   color: #2c3441;
   font-size: 16px;
   line-height: 1.6;
}

.series-allbtn a {
   display: inline-block;
   position: relative;
   z-index: 2;
   margin-right: 28px;
   color: #333333;
   font-size: 16px;
   padding: 0 2px;
   line-height: 1.6;
}

.series-allbtn a:before {
   content: "";
   width: 0;
   height: 9px;
   background: #6cccdc;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.series-allbtn a:hover,
.series-allbtn a.active {
   color: #fff;
}

.series-allbtn a:hover:before,
.series-allbtn a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.series-allbtn a:hover,
.series-allbtn a.active {
   color: #2c3441;
}

.series-allbtn a:last-child {
   margin-right: 0;
}

.product-list {
   padding-top: 40px;
}

.product-li li {
   position: relative;
   width: 31.66%;
   float: left;
   margin-right: 2.51%;
   margin-bottom: 60px;
}

.product-li li:nth-child(3n+3) {
   margin-right: 0;
}

.product-li li a:hover figure {
   background: #fff;
}

.product-li li a:hover figure:before {
   transform: scaleX(1);
}

.product-li li a:hover figure:after {
   transform: scaleY(1);
   transition-delay: 0.4s;
}

.product-li li a:hover figure i:before {
   transform: scaleX(1);
   transition-delay: 0.8s;
}

.product-li li a:hover figure i:after {
   transform: scaleY(1);
   transition-delay: 1.2s;
}

.product-li li a:hover figure img {
   transform: scale(1.05);
}

.product-li li figure {
   position: relative;
   width: 100%;
   height: 390px;
   background: #f6f6f6;
   overflow: hidden;
   transition: 0.58s;
}

.product-li li figure:before {
   position: absolute;
   left: 0;
   top: 0;
   background: #6cccdc;
   content: "";
   width: 100%;
   height: 2px;
   box-sizing: border-box;
   transition: 0.4s;
   transform-origin: left top;
   z-index: 2;
   transform: scaleX(0);
}

.product-li li figure:after {
   position: absolute;
   right: 0;
   top: 0;
   background: #6cccdc;
   content: "";
   width: 2px;
   height: 100%;
   box-sizing: border-box;
   transition: 0.4s;
   transform-origin: left top;
   transform: scaleY(0);
}

.product-li li figure i:before {
   position: absolute;
   right: 0;
   bottom: 0;
   background: #6cccdc;
   content: "";
   width: 100%;
   height: 2px;
   box-sizing: border-box;
   transition: 0.4s;
   transform-origin: right top;
   transform: scaleX(0);
}

.product-li li figure i:after {
   position: absolute;
   left: 0;
   bottom: 0;
   background: #6cccdc;
   content: "";
   width: 2px;
   height: 100%;
   box-sizing: border-box;
   transition: 0.4s;
   transform-origin: left bottom;
   transform: scaleY(0);
}

.product-li li figure img {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   max-width: 80%;
   max-height: 80%;
   margin: auto;
   transition: 0.5s;
}

.product-li li span {
   display: block;
   margin-top: 24px;
   text-align: center;
   line-height: 1;
   color: #333333;
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.service-text {
   position: absolute;
   left: 50%;
   margin-left: -600px;
   bottom: 80px;
}

.ptext1 {
   position: static;
   left: 0;
   margin-left: 0;
   bottom: 0;
}

.service-btn-list {
   display: flex;
   display: -webkit-flex;
   margin-top: 66px;
   justify-content: center;
   -webkit-justify-content: center;
}

.service-btn-list li {
   width: 150px;
   margin-right: 30px;
}

.service-btn-list li:last-child {
   margin-right: 0;
}

.service-btn-list li a {
   display: block;
   position: relative;
   padding-bottom: 100%;
   line-height: 0;
   z-index: 3;
   text-align: center;
}

.service-btn-list li a:hover:before {
   background: #6cccdc;
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
}

.service-btn-list li a:hover b,
.service-btn-list li a:hover span {
   color: #2c3441;
}

.service-btn-list li a:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.25);
   transition: 0.58s;
}

.service-btn-list li a b {
   display: block;
   margin-bottom: 13px;
   color: #fff;
   font-weight: normal;
   font-size: 36px;
   line-height: 1;
   transition: 0.4s;
}

.service-btn-list li a span {
   display: block;
   margin-top: 12px;
   line-height: 1;
   color: #fff;
   font-size: 16px;
   transition: 0.4s;
}

.service-wrs {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   width: 100%;
}

.posite-fix {
   padding-left: 90px;
   height: 62px;
   border-bottom: 1px solid #ececec;
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
}

.posite-fix a,
.posite-fix span,
.posite-fix b {
   display: inline-block;
   color: #242c39;
   font-size: 14px;
   margin: 0 6px;
   font-weight: normal;
}

.posite-fix span {
   margin-right: 8px;
}

.posite-fix b {
   margin: 0 4px;
}

.posite-fix a:hover {
   color: #e2c494;
}

.appointment {
   padding: 115px 0 120px;
}

.appoint-title {
   text-align: center;
   margin-bottom: 54px;
}

.appoint-title strong {
   display: block;
   margin-bottom: 12px;
   color: #000000;
   font-size: 30px;
   line-height: 1;
}

.appoint-title p {
   color: #666666;
   font-size: 16px;
}

.appoint-text {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.appoint-item {
   width: 47.5%;
   background: #f6f6f6;
}

.appoint-tel {
   text-align: center;
   padding-top: 82px;
   padding-bottom: 92px;
}

.appoint-tel b {
   display: block;
   margin: auto;
   width: 57px;
   height: 57px;
   text-align: center;
   line-height: 57px;
   border-radius: 50%;
   background: #6cccdc;
   font-size: 25px;
   color: #0e1b1d;
}

.appoint-tel strong {
   display: block;
   margin-top: 22px;
   margin-bottom: 16px;
   line-height: 1;
   color: #333333;
   font-size: 24px;
}

.appoint-tel p {
   color: #333333;
   font-size: 16px;
   line-height: 2.2;
}

.appoint-tel span {
   display: block;
   line-height: 1;
   color: #333333;
   font-size: 30px;
   font-weight: bold;
}

.account {
   padding-top: 80px;
   text-align: center;
}

.account img {
   display: block;
   margin: auto;
   width: 125px;
}

.account strong {
   display: block;
   margin-top: 28px;
   margin-bottom: 18px;
   text-align: center;
   line-height: 1;
   color: #2c3441;
   font-size: 24px;
}

.account p {
   color: #333333;
   font-size: 16px;
   line-height: 1;
}

.policy-top {
   padding: 116px 0 70px;
   border-bottom: 2px solid #f8f8f8;
}

.policy-wr {
   margin: auto;
   max-width: 90%;
   width: 940px;
}

.policy-introduct strong {
   display: block;
   margin-bottom: 30px;
   line-height: 1;
   text-align: center;
   color: #333333;
   font-size: 30px;
}

.policy-introduct p {
   color: #666666;
   font-size: 16px;
}

.policy-item {
   padding: 55px 0 80px;
   border-bottom: 2px solid #f8f8f8;
}

.policy-title {
   display: flex;
   display: -webkit-flex;
   align-items: center;
   -webkit-align-items: center;
   margin-bottom: 48px;
}

.policy-title b {
   display: block;
   width: 60px;
   height: 60px;
   text-align: center;
   line-height: 60px;
   border-radius: 50%;
   background: #6cccdc;
   color: #242c39;
   font-size: 28px;
   font-weight: normal;
}

.policy-title span {
   display: block;
   margin-left: 20px;
   color: #333333;
   font-size: 24px;
   font-weight: bold;
}

.erect p {
   color: #333333;
   font-size: 18px;
   font-weight: bold;
}

.erect img {
   max-width: 100%;
   width: auto !important;
   height: auto;
}

.erect span {
   display: block;
   color: #666666;
   font-size: 16px;
}

.repair {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.repair-item {
   padding-bottom: 22px;
   width: 29.78%;
   border-bottom: 1px solid #e3e3e3;
}

.repair-item figure {
   display: block;
   margin-bottom: 20px;
   line-height: 1;
}

.repair-item figure img {
   display: block;
   width: 100%;
   height: auto;
}

.repair-item p {
   color: #666666;
   font-size: 18px;
   text-align: center;
   line-height: 1.4;
}

.repair-item span {
   display: block;
   text-align: center;
   color: #999999;
   font-size: 14px;
   line-height: 1.4;
}

.remarks {
   margin-top: 42px;
}

.remarks p {
   color: #666666;
   font-size: 16px;
}

.remarks strong {
   display: block;
   color: #333333;
   font-size: 18px;
   font-weight: bold;
}

.cost {
   border-top: 1px solid #999;
}

.cost-item {
   display: flex;
   display: -webkit-flex;
   padding: 32px 0;
   border-bottom: 1px solid #999999;
}

.cost-item span {
   display: block;
   color: #333333;
   font-size: 18px;
   width: 204px;
   font-weight: bold;
}

.cost-text {
   flex: 1;
   -webkit-flex: 1;
}

.cost-text p {
   color: #666666;
   font-size: 16px;
   line-height: 2;
}

.informatie {
   margin-top: 40px;
}

.informatie li {
   float: left;
   position: relative;
   margin-bottom: 15px;
   width: 48.9%;
   padding: 38px 36px 32px;
   box-sizing: border-box;
   background: #f8f8f8;
   transition: 0.45s;
}

.informatie li:nth-child(2n+2) {
   float: right;
}

.informatie li:hover {
   background: #eff7fa;
}

.informatie li strong {
   display: block;
   margin-bottom: 11px;
   color: #2c3441;
   font-size: 18px;
   line-height: 1.2;
}

.informatie li time {
   display: block;
   line-height: 1;
   color: #999999;
   font-size: 14px;
}

.informatie li b {
   display: block;
   position: absolute;
   right: 52px;
   top: 40px;
   line-height: 1;
   color: #999999;
   font-weight: normal;
   font-size: 26px;
}

.outlets {
   position: relative;
}

.map {
   width: calc(100% - 480px);
   height: 48.22vw;
}

/* .infoBox {
   margin-bottom: 10px;
   box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);
} */

.infoBox>img {
   left: auto !important;
   right: 16px !important;
   margin-top: 13px !important;
   transition: 0.35s;
   z-index: 10;
}

.infoBox>img:hover {
   transform: rotate(180deg);
}

.prize-s {
   display: none !important;
}

.parino {
   display: none !important;
   margin-top: 50px;
}

.infoBoxContent {
   padding: 36px 42px 0;
}

.infoBoxContent i {
   position: absolute;
   left: 50%;
   width: 20px;
   text-align: center;
   margin-left: -9px;
   bottom: -32px;
   color: #2c3441;
   color: #242c39;
   font-size: 18px;
   line-height: 1;
   font-style: normal;
}

.infoBoxContent h3 {
   margin-bottom: 16px;
   color: #333333;
   font-size: 18px;
   line-height: 1.2;
   font-weight: normal;
   text-align: center;
   border-bottom: none;
}

.infoBoxContent p {
   color: #999999;
   font-size: 15px;
}

.outles-check {
   position: absolute;
   right: 0;
   top: 0;
   background: #fff;
   width: 480px;
   height: 100%;
}

.outles-select {
   padding: 45px 34px 36px;
   background: #f0f0f0;
}

.outles-select strong {
   display: block;
   margin-bottom: 24px;
   line-height: 1;
   color: #2c3441;
   font-size: 20px;
}

.select-list {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.selects {
   padding-left: 18px;
   width: 31.06%;
   height: 49px;
   line-height: 49px;
   color: #666666;
   font-size: 16px;
   background: #fff url(../images/arrow.png) 80% center no-repeat;
   border: none;
   outline: none;
   appearance: none;
   -webkit-appearance: none;
}

.outles-fix {
   position: absolute;
   left: 0;
   top: 174px;
   bottom: 0;
   width: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background: #fff;
   box-sizing: border-box;
   padding: 14px 34px 50px;
}

.outles-list li {
   position: relative;
   padding: 30px 0 24px 60px;
   border-bottom: 1px solid #e5e5e5;
   cursor: pointer;
}

.outles-list li:hover strong,
.outles-list li.active strong {
   color: #6cccdc;
}

.outles-list li i {
   display: block;
   position: absolute;
   left: 0;
   top: 18px;
   width: 42px;
   height: 50px;
   text-align: center;
   line-height: 48px;
   background: url(../images/map.png) center no-repeat;
   color: #242c39;
   font-size: 18px;
   font-style: normal;
   font-weight: bold;
}

.outles-list li strong {
   display: block;
   margin-bottom: 16px;
   color: #333333;
   font-size: 18px;
   line-height: 1;
   transition: 0.45s;
}

.outles-list li p {
   color: #666666;
   font-size: 16px;
}

.anchorBL {
   display: none !important;
}

.network {
   position: relative;
   z-index: 3;
   padding: 148px 0 220px;
}

.network .posite-fix {
   position: absolute;
   left: 0;
   top: 0;
   border-bottom: none;
}

.network-bg {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
}

.network-text {
   width: 370px;
   max-width: 90%;
   margin: auto;
}

.network-text strong {
   display: block;
   margin-bottom: 40px;
   color: #333333;
   font-size: 24px;
   line-height: 1;
   text-align: center;
}

.network-text .select-list .selects {
   width: 48.64%;
   background-position: 93% center;
}

.network-city {
   position: relative;
   z-index: 3;
   margin-top: -80px;
   padding-bottom: 90px;
}

.network-list li {
   display: flex;
   display: -webkit-flex;
   padding: 24px 0 24px;
   border-bottom: 1px solid #cccccc;
}

.network-list li:first-child {
   background: #6cccdc;
   border-bottom: none;
}

.network-list li:first-child span,
.network-list li:first-child p {
   font-weight: bold;
}

.network-list li:first-child p {
   color: #333333;
}

.network-list li span {
   display: block;
   padding-left: 56px;
   width: 236px;
   color: #333333;
   font-size: 18px;
   font-weight: bold;
}

.network-list li p {
   flex: 1;
   -webkit-flex: 1;
   color: #666666;
   font-size: 16px;
}

.news-info {
   padding: 300px 90px 200px;
   background-attachment: local;
   background-position: center;
   background-size: cover;
}

.news-info time {
   display: block;
   margin-bottom: 32px;
   line-height: 1;
   color: #fff;
   font-size: 18px;
}

.news-info time b {
   display: inline-block;
   margin-right: 10px;
   font-weight: normal;
   font-size: 60px;
}

.news-info a:hover span i {
   text-indent: 5px;
}

.news-info strong {
   display: block;
   margin-bottom: 34px;
   line-height: 1.2;
   color: #fff;
   font-size: 30px;
   width: 660px;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.news-info span {
   display: inline-block;
   color: #fff;
   font-size: 14px;
   line-height: 32px;
}

.news-info span i {
   display: inline-block;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   text-align: center;
   line-height: 32px;
   background: #6cccdc;
   font-size: 18px;
   color: #2c3441;
   font-weight: bold;
   transition: 0.38s;
}

.flex-sulte {
   position: fixed;
   z-index: 10;
}

.flex-sulte a i {
   opacity: 0;
   visibility: hidden;
   margin-top: -20px;
   transition: 0.4s;
}

.flex-sulte a:hover i {
   opacity: 1;
   visibility: visible;
   margin-top: 0;
}

.news-inner {
   margin: auto;
   padding: 80px 0;
}

.news-inner .page-list {
   margin-top: -56px;
}

.news-inner-list {
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
}

.news-inner-list li {
   float: left;
   position: relative;
   margin-bottom: 56px;
   margin-right: 2%;
   width: 32%;
   padding-bottom: 162px;
   overflow: hidden;
}

.news-inner-list li:nth-child(3n+3) {
   margin-right: 0;
}

.news-inner-list li figure {
   position: relative;
   display: block;
   padding-bottom: 60%;
   height: 0;
   overflow: hidden;
   line-height: 1;
   transition: 0.58s;
}

.news-inner-list li figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.news-inner-list li figure b {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -27px;
   margin-top: -27px;
   display: block;
   line-height: 1;
   font-size: 54px;
   font-weight: normal;
   transition: 0.4s;
   z-index: 3;
   color: #fff;
}

.news-inner-list li a:hover figure {
   transform: translateY(-100%);
   opacity: 0;
}

.news-inner-list li a:hover figure img {
   transform: scale(1.05);
}

.news-inner-list li a:hover .news-inner-text {
   padding-top: 54px;
   margin-top: 0;
   top: 0%;
}

.news-inner-list li a:hover .news-inner-text p {
   opacity: 1;
   visibility: visible;
}

.news-inner-text {
   position: absolute;
   left: 0;
   top: 100%;
   margin-top: -162px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: 35px 44px 43px;
   transition: 0.58s;
   background: #f9f9f9;
}

.news-inner-text time {
   display: block;
   margin-bottom: 14px;
   line-height: 1;
   color: #999999;
   font-size: 14px;
}

.news-inner-text strong {
   display: block;
   line-height: 1.4;
   color: #2c3441;
   font-size: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: 0.56s;
}

.news-inner-text p {
   margin-top: 35px;
   color: #666666;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   opacity: 0;
   visibility: hidden;
   transition: 0.68s;
}

.news-inner-text span {
   margin-top: 124px;
   display: inline-block;
   color: #2c3441;
   font-size: 14px;
   line-height: 32px;
   font-weight: bold;
}

.news-inner-text span i {
   display: inline-block;
   margin-right: 8px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   text-align: center;
   line-height: 32px;
   background: #e2c494;
   font-size: 12px;
   color: #2c3441;
   transition: 0.38s;
}

.news-video {
   position: relative;
   height: 700px;
   z-index: 3;
   overflow: hidden;
}

.news-video .aboutVideo {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   object-fit: cover;
}

.news-video .about-text strong {
   font-size: 30px;
}

.news-viode-list li .news-inner-text span {
   margin-top: 230px;
}

.news-viode-list li .news-inner-text i {
   position: relative;
   top: -1px;
   display: inline-block;
   vertical-align: middle;
}

.news-viode-list li .news-inner-text i:before {
   position: absolute;
   top: 50%;
   margin-top: -5px;
   left: 13px;
   content: "";
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 7px solid #000000;
}

.news-viode-list li {
   position: relative;
}

.news-viode-list li figure {
   z-index: 3;
}

.newsVidoe {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: none;
}

.news-view {
   padding: 0 0 105px;
   background: #f6f6f6;
}

.news-title {
   padding: 72px 0 30px;
   text-align: center;
}

.news-title strong {
   display: block;
   margin-bottom: 16px;
   line-height: 1.2;
   color: #242c39;
   font-size: 30px;
}

.news-title time {
   display: block;
   line-height: 1;
   color: #666666;
   font-size: 14px;
}

.view-content {
   padding: 50px 5.166%;
   line-height: 200%;
   background: #fff;
   color: #666666;
   font-size: 16px;
}

.view-content img {
   max-width: 100%;
   width: auto !important;
   height: auto !important;
}

.hot-news {
   padding: 98px 0 104px;
}

.hot-banner {
   position: relative;
   padding: 0 10.93%;
}

.hot-banner .prize-prev.prev {
   left: 5.2%;
}

.hot-banner .prize-prev.next {
   right: 5.2%;
}

.hot-slide figure {
   position: relative;
   display: block;
   padding-bottom: 60%;
   height: 0;
   overflow: hidden;
   line-height: 1;
}

.hot-slide figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.hot-slide:hover figure img {
   transform: scale(1.05);
}

.hot-slide:hover .hot-texts strong {
   color: #e2c494;
}

.hot-texts {
   padding: 36px 40px 40px;
   background: #f9f9f9;
}

.hot-texts time {
   display: block;
   margin-bottom: 15px;
   line-height: 1;
   color: #999999;
   font-size: 14px;
}

.hot-texts strong {
   display: block;
   line-height: 1.6;
   color: #333333;
   font-size: 20px;
   min-height: 64px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: 0.35s;
}

.contact-item {
   padding: 80px 0;
   border-bottom: 12px solid #f8f8f8;
}

.contact-item:last-of-type {
   border-bottom: none;
}

.contact-title {
   position: relative;
   padding-bottom: 17px;
   margin-bottom: 50px;
   color: #242c39;
   font-size: 30px;
   line-height: 1;
}

.contact-title:before {
   position: absolute;
   left: 0;
   bottom: 0;
   content: "";
   width: 59px;
   height: 3px;
   background: #6cccdc;
}

.contact-downs {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.contact-infos {
   width: 46.25%;
}

.contact-infos .contact-t {
   display: block;
   padding-bottom: 14px;
   line-height: 1;
   color: #242c39;
   font-size: 24px;
   border-bottom: 1px solid #999999;
}

.contact-shopping {
   margin-top: 25px;
}

.contact-shopping li {
   margin-bottom: 14px;
}

.contact-shopping li a {
   display: inline-flex;
   display: -webkit-inline-flex;
   align-items: center;
   -webkit-align-items: center;
}

.contact-shopping li a:hover b {
   color: #6cccdc;
   border-color: #6cccdc;
}

.contact-shopping li a:hover span {
   color: #6cccdc;
}

.contact-shopping li a b {
   display: block;
   width: 46px;
   height: 46px;
   line-height: 46px;
   color: #666666;
   border: 1px solid #cdcdcd;
   border-radius: 50%;
   font-size: 24px;
   text-align: center;
   font-weight: normal;
   transition: 0.38s;
}

.contact-shopping li a span {
   display: inline-block;
   margin-left: 12px;
   color: #666666;
   font-size: 16px;
   transition: 0.38s;
}

.contact-businee {
   margin-top: 23px;
   padding-left: 3px;
}

.contact-businee p {
   color: #666666;
   font-size: 16px;
   line-height: 2;
}

.contact-businee strong {
   display: block;
   color: #242c39;
   font-size: 18px;
}

.join-sub {
   margin-top: 42px;
}

.join-item {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.join-info {
   width: 47.2%;
   margin-bottom: 28px;
}

.join-info span {
   display: block;
   margin-bottom: 13px;
   line-height: 1;
   color: #666666;
   font-size: 16px;
}

.join-info .text {
   box-sizing: border-box;
   width: 100%;
   padding-left: 12px;
   height: 50px;
   line-height: 50px;
   color: #999999;
   font-size: 16px;
   background: #f0f0f0;
   outline: none;
   border: none;
   font-family: "PingFang-SC-Regular";
}

.join-info .sele {
   appearance: none;
   -webkit-appearance: none;
   background: #f0f0f0 url(../images/arrow.png) 92% center no-repeat;
}

.join-info .textarea {
   line-height: 1.5;
   height: 114px;
   padding-top: 10px;
   padding-bottom: 10px;
   resize: none;
}

.join-item1 .join-info {
   width: 100%;
}

.join-submit input {
   padding: 0;
   margin: 0;
   border: none;
   width: 126px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   background: #2c3441;
   color: #fff;
   font-size: 15px;
   font-family: "PingFang-SC-Regular";
   cursor: pointer;
   transition: 0.5s;
}

.join-submit input:hover {
   background: #e2c494;
}

.recuite {
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
}

.recuite-item {
   width: 47.2%;
}

.recuite-item .allow-us {
   margin-bottom: 46px;
}

.recuite-item .allow-us:last-child {
   margin-bottom: 0;
}

.recuite-item .allow-us>span {
   font-size: 16px;
   letter-spacing: 0px;
}

.recuite-item .eq {
   margin-top: 20px;
}

.recuite-li {
   display: flex;
   display: -webkit-flex;
   margin-top: 46px;
}

.recuite-li li {
   width: 88px;
   margin-right: 40px;
   transition: 0.45s;
}

.recuite-li li:hover {
   transform: translateY(-5px);
}

.recuite-li li img {
   display: block;
   width: 100%;
   height: auto;
}

.email {
   margin-top: 30px;
}

.email p {
   color: #666666;
   font-size: 16px;
}

.search-sub {
   position: absolute;
   left: 50%;
   margin-left: -375px;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   width: 750px;
}

.search-input {
   display: flex;
   display: -webkit-flex;
}

.search-input .text {
   box-sizing: border-box;
   flex: 1;
   -webkit-flex: 1;
   padding: 0;
   padding-left: 24px;
   height: 68px;
   line-height: 68px;
   color: #333333;
   font-size: 16px;
   background: #fff;
   border: none;
}

.search-input .text::-webkit-input-placeholder {
   color: #333333;
}

.search-input .text:focus::-webkit-input-placeholder {
   opacity: 0;
   visibility: hidden;
}

.search-s {
   position: relative;
   width: 150px;
   height: 68px;
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   -webkit-justify-content: center;
   align-items: center;
   -webkit-align-items: center;
   background: #2c3441;
   transition: 0.45s;
}

.search-s:hover {
   background: #6cccdc;
}

.search-s i {
   display: block;
   line-height: 1;
   color: #fff;
   font-size: 30px;
   font-style: normal;
   margin-right: 5px;
}

.search-s span {
   display: block;
   color: #fff;
   font-size: 16px;
}

.search-s input {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 3;
   width: 100%;
   height: 100%;
   border: none;
   cursor: pointer;
   opacity: 0;
}

.hot-work {
   display: flex;
   display: -webkit-flex;
   margin-top: 20px;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
}

.hot-work span {
   display: block;
   margin-right: 13px;
   color: #ffffff;
   font-size: 14px;
   line-height: 42px;
   margin-bottom: 10px;
}

.hot-work a {
   display: block;
   margin-bottom: 10px;
   margin-right: 6px;
   height: 42px;
   line-height: 42px;
   background: #fff;
   padding: 0 32px;
   border-radius: 21px;
   color: #2c3441;
   font-size: 14px;
}

.hot-work a:hover {
   background: #6cccdc;
}

.product-views {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 100px 4.583%;
   box-sizing: border-box;
   z-index: 1;
}

.product-ww .prize-prev {
   display: none !important;
}

.product-introduct {
   float: left;
   width: 26.94%;
}

.product-introduct-top {
   min-height: 450px
}

.product_content {
   line-height: 200%;
   margin-bottom: 30px;
}


.product-introduct-top strong {
   display: block;
   margin-bottom: 30px;
   line-height: 1.2;
   color: #242c39;
   font-size: 40px;
}

.product-introduct-top section {
   color: #666666;
   font-size: 16px;
   line-height: 2;
}

.product-shopping {
   margin-top: 8vw;
}

.product-shopping p {
   color: #666666;
   font-size: 14px;
}

.shopping-list {
   margin-top: 26px;
   display: flex;
   display: -webkit-flex;
}

.shopping-list li {
   margin-right: 14px;
}

.shopping-list li a {
   display: block;
   width: 46px;
   height: 46px;
   text-align: center;
   line-height: 46px;
   border: 1px solid #d0d0d0;
   border-radius: 50%;
   color: #999999;
   font-size: 24px;
}

.shopping-list li a:hover {
   color: #c40101;
}

.shopping-list li:last-child a:hover {
   color: #09bb07;
}

.proudct-max {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -16vw;
   margin-top: -16vw;
   width: 32vw;
   height: 32vw;
   background: #f6f6f6;
   border-radius: 50%;
}

.product-sli-item {
   float: left;
   height: 32vw;
   position: relative;
   width: 100%;
   text-align: center;
}

.product-sli-item.slick-current img {
   transform: scale(1);
   opacity: 1;
}

.product-sli-item b {
   display: block;
   position: absolute;
   left: 50%;
   margin-left: -27px;
   top: 50%;
   margin-top: -27px;
   z-index: 5;
   font-size: 54px;
   color: #333;
   line-height: 1;
   font-weight: normal;
   cursor: pointer;
   transition: 0.5s;
}

.product-sli-item b:hover {
   color: #6cccdc;
}

.product-sli-item .newsVidoe {
   border-radius: 50%;
}

.product-sli-item img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   max-width: 70%;
   max-height: 70%;
   margin: auto;
   opacity: 0;
   transform: scale(0.5);
   transition: 0.8s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-min {
   position: absolute;
   right: 5.625%;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   z-index: 10;
}

.product-min .probtn {
   display: block;
   margin: auto;
   width: 58px;
   height: 58px;
   border: 1px solid #b1b1b1;
   border-radius: 50%;
   text-align: center;
   line-height: 58px;
   color: #303948;
   font-size: 18px;
   cursor: pointer;
   transition: 0.45s;
}

.product-min .probtn.next {
   transform: rotate(180deg)
}

.product-min .probtn:hover {
   background: #e2c494;
   border-color: #e2c494;
   color: #fff;
}

.product-swiper-min {
   margin: 23px 0 19px;
}

.product-min-item {
   cursor: pointer;
   margin-bottom: 4px;
}

.product-min-item:hover figure:before,
.product-min-item.slick-current figure:before {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
}

.product-min-item figure {
   display: block;
   position: relative;
   width: 109px;
   height: 111px;
   background: #f6f6f6;
}

.product-min-item figure:before {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 3;
   content: "";
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   border: 1px solid #e2c494;
   opacity: 0;
   visibility: hidden;
   transition: 0.45s;
}

.product-min-item figure img {
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   margin: auto;
   max-width: 70%;
   max-height: 70%;
}

.product-detaul {
   padding: 100px 0 0;
}

.proitems li {
   margin-bottom: 52px;
   background: #fafafa;
   display: flex;
   display: -webkit-flex;
   justify-content: space-between;
   -webkit-justify-content: space-between;
   align-items: center;
   -webkit-align-items: center;
   flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
}

.proitems li:last-child {
   margin-bottom: 0;
}

.proitems li:nth-child(2n+2) {
   flex-direction: row;
   -webkit-flex-direction: row;
}

.proitems li:nth-child(2n+2) .product-vietext {
   margin-left: 0;
   margin-right: 6.5%;
}

.proitems li figure {
   display: block;
   width: 50%;
   line-height: 1;
}

.proitems li figure img {
   display: block;
   width: 100%;
   height: auto;
}

.product-vietext {
   width: 36.666%;
   margin-left: 6.5%;
}

.product-vietext strong {
   display: block;
   margin-bottom: 32px;
   line-height: 1.2;
   color: #2d313d;
   font-size: 28px;
}

.product-vietext p {
   color: #666666;
   font-size: 16px;
}

.parameter {
   padding-top: 95px;
}

.parameter img {
   max-width: 100% !important;
}

.parameter table {
   border-top: 2px solid #999999;
   width: 100% !important;
}

.parameter table tr td {
   border-bottom: 1px solid #999999;
   padding: 20px 12px;
}

.parameter table tr td:first-child {
   width: 158px;
   color: #333333;
   font-size: 16px;
   font-weight: bold;
}

.parameter table tr td:last-child {
   font-size: 16px;
   color: #333333;
}

.parameter-list {
   border-top: 2px solid #999999;
}

.parameter-list li {
   display: flex;
   display: -webkit-flex;
   padding: 20px 12px;
   border-bottom: 1px solid #999999;
}

.parameter-list li span {
   display: block;
   width: 158px;
   color: #333333;
   font-size: 16px;
   font-weight: bold;
}

.parameter-list li p {
   flex: 1;
   -webkit-flex: 1;
   font-size: 16px;
   color: #333333;
}

.guarantees {
   padding: 86px 0 150px;
}

.guarantee-list {
   border-top: 2px solid #999999;
}

.guarantee-list li {
   padding: 30px 26px;
   border-bottom: 1px solid #999999;
   display: flex;
   display: -webkit-flex;
   align-items: center
}

.guarantee-list li b {
   display: block;
   width: 66px;
   text-align: center;
   font-weight: normal;
   color: #2f3745;
   font-size: 50px;
   position: relative;
   z-index: 5;
}

.guarantee-list li b::after {
   content: '';
   width: 20px;
   height: 20px;
   display: block;
   position: absolute;
   bottom: 10px;
   left: 20px;
   background: rgba(226, 196, 148, .5);
   border-radius: 50%;
   z-index: -1;
}

.guarantee-text {
   margin-left: 63px;
   padding-top: 13px;
   flex: 1;
   -webkit-flex: 1;
}

.guarantee-text strong {
   display: block;
   margin-bottom: 15px;
   line-height: 1;
   color: #242c39;
   font-size: 18px;
}

.guarantee-text p {
   color: #666666;
   font-size: 16px;
   line-height: 1.6;
}

.solve {
   padding: 106px 0 120px;
   border-top: 12px solid #f6f6f6;
}

.solve-banner {
   margin-top: 56px;
   position: relative;
}

.solve-banner .prize-prev.prev {
   left: -92px;
}

.solve-banner .prize-prev.next {
   right: -92px;
}

.solve-slide:hover figure img {
   transform: scale(1.05);
}

.solve-slide figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.solve-slide figure img {
   display: block;
   width: 100%;
   height: auto;
   transition: 0.6s;
}

.solve-slide span {
   display: block;
   margin-top: 25px;
   text-align: center;
   color: #666666;
   font-size: 16px;
   line-height: 1;
}

.pros-slide {
   overflow: hidden;
}

.pros-slide figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.pros-slide figure img {
   display: block;
   width: 100%;
   height: auto;
}

.product-dit {
   display: flex;
   display: -webkit-flex;
   margin-top: 20px;
   justify-content: center;
   -webkit-justify-content: center;
   align-items: center;
   -webkit-align-items: center;
}

.product-p {
   position: relative;
   width: 25px;
   height: 25px;
   background: #e1e1e1;
   border-radius: 50%;
   text-align: center;
   line-height: 25px;
   cursor: pointer;
   color: #2b303a;
   font-size: 14px;
}

.product-p:hover {
   background: #6cccdc;
}

.numbles {
   margin: 0 23px;
   color: #333333;
   font-size: 16px;
}

.inner-search {
   padding-bottom: 460px;
   overflow: hidden;
   background-position: center;
   background-size: cover;
}

.inner-search .search-sub {
   top: auto;
   transform: translateY(0px);
   -webkit-transform: translateY(0px);
   bottom: 104px;
}

.search-result {
   padding: 66px 0 30px 4.687%;
}

.search-r-btn {
   display: inline-block;
   vertical-align: top;
   position: sticky;
   top: 100px;
   width: 14.06vw;
}

.search-r-btn p {
   padding-bottom: 12px;
   border-bottom: 1px solid #999999;
   color: #2c3441;
   font-size: 16px;
   line-height: 1;
}

.search-btnli {
   margin-top: 19px;
}

.search-btnli li {
   margin-bottom: 10px;
}

.search-btnli li.active a i {
   opacity: 1;
   visibility: visible;
   transform: translateX(0px);
}

.search-btnli li a {
   position: relative;
   display: inline-block;
   min-width: 102px;
   box-sizing: border-box;
   padding-right: 30px;
   color: #2c3441;
   font-size: 18px;
   line-height: 24px;
}

.search-btnli li a:hover i {
   opacity: 1;
   visibility: visible;
   transform: translateX(0px);
}

.search-btnli li a i {
   display: block;
   position: absolute;
   right: 0;
   top: 0;
   width: 24px;
   height: 24px;
   text-align: center;
   line-height: 24px;
   border-radius: 50%;
   background: #6cccdc;
   color: #3a5664;
   font-size: 16px;
   opacity: 0;
   visibility: hidden;
   transition: 0.4s;
   transform: translateX(14px);
}

.serch-result-list {
   margin-left: 12.5vw;
   display: inline-block;
   width: 53.125vw;
}

.result-li li {
   padding: 38px 0 44px;
   border-bottom: 1px solid #e1e1e1;
}

.result-li li:first-child {
   padding-top: 0;
}

.result-li li a:hover figure img {
   transform: scale(1.05);
}

.result-li li a strong {
   display: block;
   margin-bottom: 24px;
   line-height: 1.2;
   color: #333333;
   font-size: 24px;
}

.result-li li a strong b {
   color: #6cccdc;
}

.result-text {
   display: flex;
   display: -webkit-flex;
}

.result-text figure {
   display: block;
   margin-right: 26px;
   width: 200px;
   line-height: 1;
   overflow: hidden;
}

.result-text figure img {
   display: block;
   width: 100%;
   height: auto;
   transition: 0.5s;
}

.result-text p {
   flex: 1;
   -webkit-flex: 1;
   color: #666666;
   font-size: 16px;
}

.page-list-left {
   justify-content: flex-start;
   -webkit-justify-content: flex-start;
}

.industry-contact {
   display: flex;
   display: -webkit-flex;
   padding: 61px 10.75% 68px;
   background: #242c39;
}

.industry-contact-text p {
   color: #fff;
   font-size: 24px;
}

.contact-btns {
   margin-left: 170px;
   margin-top: 15px;
}

.contact-btns a {
   display: block;
   position: relative;
   z-index: 3;
   width: 173px;
   height: 46px;
   border: 2px solid #fff;
   text-align: center;
   line-height: 46px;
   color: #fff;
   font-size: 16px;
}

.contact-btns a:before {
   content: "";
   width: 0;
   height: 100%;
   background: #6cccdc;
   position: absolute;
   right: 0;
   bottom: 0;
   transition: 0.46s;
   z-index: -1;
}

.contact-btns a:hover,
.contact-btns a.active {
   color: #fff;
}

.contact-btns a:hover:before,
.contact-btns a.active:before {
   width: 100%;
   right: auto;
   left: 0;
}

.contact-btns a:hover {
   border-color: #6cccdc;
}

.hot-porudct {
   margin: auto;
   padding: 0;
   width: 1200px;
}

.hot-product-slide {
   position: relative;
   text-align: center;
   padding-top: 50px;
}

.hot-product-slide:hover figure img {
   transform: scale(1.05);
}

.hot-product-slide:hover span {
   color: #6cccdc;
}

.hot-product-slide figure {
   display: block;
   position: relative;
   height: 286px;
   text-align: center;
}

.hot-product-slide figure img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   transition: 0.68s;
}

.hot-product-slide span {
   display: block;
   margin-top: 70px;
   line-height: 1;
   color: #333333;
   font-size: 16px;
   transition: 0.38s;
}

.hot-porudct .prize-prev.prev {
   left: -90px;
}

.hot-porudct .prize-prev.next {
   right: -90px;
}

.purificate {
   padding: 88px 9.062% 122px;
}

.purificate-img {
   color: #666666;
   font-size: 16px;
}

.purificate-img img {
   max-width: 100%;
   width: auto;
   height: auto;
}

.purificate-video {
   position: relative;
   padding-bottom: 50.38%;
   line-height: 1;
   overflow: hidden;
   margin-top: 100px;
}

.purificate-video video {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.purvideobtn {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   text-align: center;
   z-index: 10;
   cursor: pointer;
}

.purvideobtn strong {
   display: block;
   color: #fff;
   font-size: 30px;
   font-weight: normal;
   line-height: 1;
}

.purvideobtn b {
   display: block;
   margin-top: 38px;
   line-height: 1;
   text-align: center;
   color: #fff;
   font-size: 56px;
   font-weight: normal;
}

.prouct-videos {
   padding-top: 100px;
}

@media screen and (min-width: 1023px) {

   .home-slide.swiper-slide-active .slidetop.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li,
   .home-slide.swiper-slide-active .list-animate.article-block>div {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
      transition-delay: 0.5s;
   }

   .home-slide.swiper-slide-active .slidetop.detay1.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(2),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(2) {
      transition-delay: 0.7s;
   }

   .home-slide.swiper-slide-active .slidetop.detay2.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(3),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(3) {
      transition-delay: 0.9s;
   }

   .home-slide.swiper-slide-active .slidetop.detay3.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(4),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(4) {
      transition-delay: 1.1s;
   }

   .home-slide.swiper-slide-active .slidetop.detay4.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(5),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(5) {
      transition-delay: 1.3s;
   }

   .home-slide.swiper-slide-active .slidetop.detay5.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(6),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(6) {
      transition-delay: 1.5s;
   }

   .home-slide.swiper-slide-active .slidetop.detay6.article-block,
   .home-slide.swiper-slide-active .list-animate.article-block>li:nth-child(7),
   .home-slide.swiper-slide-active .list-animate.article-block>div:nth-child(7) {
      transition-delay: 1.7s;
   }
}

.household {
   padding-top: 95px;
}

.household-dit {
   position: relative;
   line-height: 0;
}

.household-bg {
   position: relative;
   line-height: 1;
}

.household-bg img {
   display: block;
   width: 100%;
   height: auto;
}

.household-dit-list {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   z-index: 2;
}

.household-item {
   position: absolute;
   width: 30px;
   height: 30px;
   z-index: 3;
   cursor: pointer;
   margin-left: -15px;
   margin-top: -15px;
}

.household-item:nth-child(2n):before {
   transition-delay: 0.5s;
}

.household-item:before {
   position: absolute;
   left: 0;
   top: 0;
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #6cccdc;
   animation: scalesd 1.5s infinite;
}

.household-item:after {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -5px;
   margin-top: -5px;
   content: "";
   width: 10px;
   height: 10px;
   background: #fff;
   border-radius: 50%;
   z-index: 2;
}

.household-item1 {
   left: 29%;
   top: 33.84%;
}

.household-item2 {
   top: 32.861%;
   right: 21.3%;
}

.household-item3 {
   left: 19.01%;
   bottom: 13.08%;
}

.household-item4 {
   left: 22.968%;
   bottom: 31.51%;
}

.household-item5 {
   left: 31.927%;
   bottom: 33.9%;
}

.household-item6 {
   left: 41.097%;
   bottom: 13.47%;
}

.household-item7 {
   left: 53.489%;
   bottom: 20.98%;
}

@keyframes scalesd {
   0% {
      transform: scale(0.1);
      -webkit-transform: scale(0.1);
      opacity: 0.4;
   }

   25% {
      transform: scale(0.4);
      -webkit-transform: scale(0.4);
      opacity: 0.2;
   }

   50% {
      transform: scale(0.7);
      -webkit-transform: scale(0.7);
      opacity: 0.3;
   }

   75% {
      transform: scale(1);
      -webkit-transform: scale(1);
      opacity: 0.8;
   }

   100% {
      transform: scale(1.3);
      -webkit-transform: scale(1.3);
      opacity: 0.3;
   }
}

body.show {
   overflow: hidden;
}

body.show .household-pop {
   opacity: 1;
   visibility: visible;
   top: 50%;
   pointer-events: visible;
}

.household-pop {
   position: fixed;
   left: 50%;
   margin-left: -600px;
   top: 60%;
   transform: translateY(-50%);
   width: 1200px;
   background: #fff;
   padding: 44px 0 40px;
   z-index: 60;
   opacity: 0;
   visibility: hidden;
   transition: 0.86s;
   pointer-events: none;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.pop-close {
   display: block;
   position: absolute;
   right: 27px;
   top: 26px;
   line-height: 1;
   color: #666666;
   font-size: 24px;
   cursor: pointer;
   transition: 0.4s;
   z-index: 10;
}

.pop-close:hover {
   transform: rotate(180deg);
}

.household-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.household-imgs {
   width: 50%;
   height: 406px;
}

.household-imgs figure {
   display: block;
   position: relative;
   height: 100%;
}

.household-imgs figure img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
}

.household-content {
   margin-right: 30px;
   width: 44.5%;
}

.household-content strong {
   display: block;
   position: relative;
   padding-top: 18px;
   line-height: 1;
   color: #333333;
   font-size: 26px;
   font-weight: bold;
}

.household-content strong:before {
   position: absolute;
   left: 0;
   top: 0;
   content: "";
   width: 47px;
   height: 2px;
   background: #6cccdc;
}

.household-li {
   display: flex;
   display: -webkit-flex;
   margin-top: 44px;
   margin-bottom: 45px;
}

.household-li li {
   margin-right: 82px;
   text-align: center;
}

.household-li li:last-child {
   margin-right: 0;
}

.household-li li:hover b {
   transform: translateY(-6px);
}

.household-li li b {
   display: block;
   position: relative;
   margin: auto;
   width: 66px;
   height: 66px;
   border: 1px solid #9b9b9b;
   border-radius: 50%;
   transition: 0.3s;
}

.household-li li b img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
}

.household-li li span {
   display: block;
   margin-top: 12px;
   line-height: 1;
   text-align: center;
   color: #333333;
   font-size: 16px;
}

.household-more {
   display: flex;
   display: -webkit-flex;
}

.household-more a {
   display: block;
   position: relative;
   z-index: 3;
   margin-right: 18px;
   width: 135px;
   height: 42px;
   line-height: 42px;
   border: 1px solid #999999;
   text-align: center;
   font-size: 16px;
}

.household-more a:before {
   content: "";
   width: 100%;
   height: 0;
   background: #6cccdc;
   position: absolute;
   left: 0;
   bottom: 0;
   transition: 0.4s;
   z-index: -1;
}

.household-more a:hover,
.household-more a.active {
   color: #6cccdc;
}

.household-more a:hover:before,
.household-more a.active:before {
   height: 100%;
   bottom: auto;
   top: 0;
}

.household-more a:hover {
   border-color: #6cccdc;
   color: #fff;
}

.advantage {
   padding: 114px 0 50px;
}

.advantage-list {
   margin-top: 74px;
   display: flex;
   flex-wrap: wrap;
}

.advantage-list li {
   width: 29.16%;
   margin-right: 6.26%;
   margin-bottom: 57px;
}

.advantage-list li:nth-child(3n+3) {
   margin-right: 0;
}

.advantage-list li b {
   position: relative;
   display: block;
   margin: auto;
   width: 68px;
   height: 68px;
   line-height: 68px;
   border-radius: 50%;
   text-align: center;
   background: #6cccdc;
   color: #2f3745;
   font-size: 36px;
   font-weight: normal;
   transition: 0.4s;
}

.advantage-list li:hover b {
   transform: translateY(-6px);
}

.advantage-texts {
   box-sizing: border-box;
   margin-top: -26px;
   padding: 46px 36px 18px;
   height: 150px;
   background: #f8f8f8;
   border-radius: 20px;
}

.advantage-texts p {
   color: #333333;
   font-size: 16px;
}

.purificate1 {
   width: 100%;
   padding: 0;
}

.purificate1 .purificate-video {
   margin-top: 0;
   padding-bottom: 42%;
}

.flux {
   padding: 108px 9.375% 70px;
}

.flux-list {
   margin-top: 56px;
}

.flux-list li {
   margin-bottom: 110px;
}

.flux-list li:nth-child(2n+2) a {
   flex-direction: row-reverse;
}

.flux-list li:nth-child(2n+2) a .flux-text {
   padding-left: 30px;
   padding-right: 90px;
}

.flux-list li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.flux-list li a:hover figure img {
   transform: scale(1.04);
}

.flux-list li a:hover .flux-text span {
   color: #6cccdc;
}

.flux-list li a:hover .flux-text span i {
   text-indent: 4px;
}

.flux-imgs {
   width: 63.93%;
}

.flux-imgs figure {
   position: relative;
   display: block;
   padding-bottom: 52%;
   height: 0;
   overflow: hidden;
   line-height: 1;
}

.flux-imgs figure img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   transition: 0.58s;
}

.flux-text {
   box-sizing: border-box;
   padding-left: 70px;
   padding-bottom: 78px;
   border-bottom: 2px solid #6cccdc;
   width: 36.07%;
}

.flux-text strong {
   display: block;
   margin-bottom: 23px;
   color: #242c39;
   font-size: 44px;
   line-height: 1.2;
}

.flux-text p {
   color: #666666;
   font-size: 16px;
   height: 166px;
}

.flux-text span {
   display: block;
   color: #2c3441;
   font-size: 15px;
   line-height: 32px;
   transition: 0.4s;
}

.flux-text span i {
   display: inline-block;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6cccdc;
   margin-right: 8px;
   text-align: center;
   line-height: 32px;
   color: #2c3441;
   font-size: 16px;
   transition: 0.35s;
}

.household-dit-list.article-block>div {
   opacity: 0;
   transform: scale(0);
   transition: 0.85s;
}

.household-dit-list.articleShow>div {
   opacity: 1;
   transform: scale(1);
   transform: translateY(0px);
}

.household-dit-list.articleShow>div:nth-child(2n+2) {
   transition-delay: 0.4s;
}

.kitchen {
   padding: 88px 9.375% 0;
}

.kitchen-wrap {
   margin-top: 50px;
   overflow: hidden;
   background: #f9f9f9;
}

.kitchen-imgs {
   position: relative;
   float: left;
   width: 50%;
}

.kitchen-imgs figure {
   display: block;
   line-height: 1;
   overflow: hidden;
}

.kitchen-imgs figure img {
   display: block;
   width: 100%;
   height: auto;
}

.kitchen-dit {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
}

.kitchen-item1 {
   left: 50.25%;
   bottom: 15.5%;
}

.kitchen-item2 {
   left: 34.575%;
   bottom: 19.25%;
}

.kitchen-swiper {
   width: 50%;
   float: left;
   padding-bottom: 30px;
}

.kitchen-slide {
   padding-top: 5px;
   text-align: center;
}

.kitchen-slide figure {
   position: relative;
   display: block;
   height: 423px;
}

.kitchen-slide figure img {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   max-height: 80%;
}

.kitchen-slide strong {
   display: block;
   position: relative;
   padding-top: 18px;
   line-height: 1;
   color: #333333;
   font-size: 26px;
}

.kitchen-slide strong:before {
   position: absolute;
   left: 50%;
   margin-left: -23px;
   top: 0;
   content: "";
   width: 46px;
   height: 2px;
   background: #6cccdc;
}

.keycenter .household-li {
   margin-top: 60px;
   margin-bottom: 60px;
   justify-content: center;
}

.keycenter .household-li li {
   margin-right: 66px;
}

.keycenter .household-li li:last-child {
   margin-right: 0;
}

.keycenter .household-more {
   justify-content: center;
}

.keycenter .household-more a:last-child {
   margin-right: 0;
}

.household-video {
   position: fixed;
   left: 50%;
   top: 50%;
   margin-left: -600px;
   transform: translateY(-50%);
   width: 1200px;
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   top: 60%;
   transition: 0.88s;
   pointer-events: none;
}

.household-video .pop-close {
   color: #fff;
}

body.videoShow {
   overflow: hidden;
}

body.videoShow .household-video {
   opacity: 1;
   visibility: visible;
   top: 50%;
   pointer-events: visible;
}