@charset "utf-8";
/* CSS Document */
/**共用样式**/
/* body,html,div,ul,li,span,p,input,form,label,a,img,em,dl,dt,dd,textarea,h1,h2,h3,h4,h5,h6,table,th,td,tr,canvas{margin:0;padding:0;font-family:"微软雅黑";list-style:none;font-style:normal; font-weight: normal; word-break: break-all;word-wrap: break-word;} */
table, caption, tbody, tfoot, thead, tr, th, td { /*border-collapse: collapse;*/ border-spacing: 0; font-size: inherit; font-size: 100%; outline: 0; border: 0; vertical-align:middle; background: transparent; }
a img { border: none; }
a{ text-decoration: none; }
ul, ol, li { list-style: none; height: auto; }
body{margin: 0 auto;background:#ffffff;}
textarea { resize: none; }
input[type="text"]::-ms-clear{display:none;}
input[type="radio"],input[type="checkbox"]{cursor:pointer;vertical-align:middle;}
.lf{float:left;} .rf{float:right;}
.clear{*zoom:1}.clear:before,.clear:after{content:" ";display:table}.clear:after{clear:both}
.dn{display:none;}.db{display:block;}.dib{display:inline-block;}.di{display:inline;}
html, body {
    position: relative;
    height: 100%;
}
body{
	-webkit-touch-callout:none;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* .indexBox{ width: 100%; height: 100%;overflow-x: hidden; } */
.bannerBox{ width: 100%; min-width:120rem;height: 55rem; margin: 0 auto; }
.step2{ width: 100%; min-width:120rem;height:48.69rem; margin: 0 auto; background: linear-gradient( 180deg, rgba(34,92,183,0) 0%, rgba(34, 92, 183, 0.13) 100%);  display: flex; justify-content: space-between; }
.step2 .left{ width: 50%; padding: 8.75rem 0 0 25.5rem; box-sizing: border-box; }
.step2 .left .logo{ width: 9.56rem; height: 4rem; }
.step2 .left .title{ font-weight: 400;font-size: 1.5rem;color: #494848; line-height: 2.06rem; margin-top: 2rem; }
.step2 .left .remark{ font-weight: 400;font-size: 1rem;color: #494848;line-height: 2rem; margin-top: 3.13rem; }
.qrCodeBox{ display: flex; margin-top: 3.06rem;}
.qrCodeBox >div{ width: 7.75rem; margin-right: 1.31rem;}
.qrCodeBox >div >div{ width: 7.75rem; height: 7.75rem; background-color: #fff;  }
.qrCodeBox >div p{ text-align: center; font-weight: 400;font-size: 1rem;color: #494848;margin-top: 0.63rem; }
.step2 .right{ width: 50%; position: relative; }
.step2 .right .phone{ height: 37.37rem; position: absolute; left: 13.13rem; bottom: 1.5rem; z-index: 2; }
.step2 .right .bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 18.75rem; z-index: 1; }

.step3{  width: 100%; max-width:120rem;height:58.75rem; margin: 0 auto; }
.step3 .appList{ display: flex; justify-content: space-between; margin-top: 4.06rem; }
.step3 .appList >div{ width: 26.25rem; height: 34.96rem; border-radius: 1.25rem; box-sizing: border-box; overflow: hidden;
    background-size:cover !important;
    transition: all linear 1s;
}
.step3 .appList >div:hover{
    background-size: 110% 110% !important; /* 初始大小 */
  animation: gradient 5s infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.step3 .appList >div >div{ width: 19.38rem;height: 11.25rem;background: rgba(255, 252, 252, .73);margin: 20.56rem auto 0 auto; border-radius: 0.63rem;text-align: center; padding: 2.13rem 0; box-sizing: border-box; }
.step3 .appList >div >div .p1{ font-weight: bold;font-size: 1.5rem;color: #494848; }
.step3 .appList >div >div .p2{ font-weight: 400;font-size: 1rem;color: #494848;line-height: 1.75rem; margin-top: 1.44rem; }

.step4{  width: 100%; max-width:120rem;height:80.25rem; margin: 0 auto; position: relative; }
.step4 .sqfwBox{ display: flex; justify-content: space-between; margin-top: 4rem; }
.step4 .sqfwBox .left{ width: calc(100% - 29.94rem); display: flex; flex-wrap: wrap; }
.step4 .sqfwBox .left > div{ width: 33.33%; text-align: center; padding-top: 4.63rem; box-sizing: border-box;cursor: pointer;transition: all linear 0.3s; }
.step4 .sqfwBox .left > div:hover{
    -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  transition: all linear 0.3s; 
}
.step4 .sqfwBox .left > div img{ width: 5rem; height: 5rem; }
.step4 .sqfwBox .left > div .p1{ font-weight: bold;font-size: 1.5rem;color: #494848;line-height: 2.06rem; margin-top: 1.56rem; }
.step4 .sqfwBox .left > div .p2{ font-weight: 400;font-size: 1rem;color: #494848;line-height: 1.38rem; margin-top: 0.69rem; }
.step4 .sqfwBox .right{ width: 29.94rem; height: 60rem; } 

.sqfwServiceBox,.znjjServiceBox,.wyfwServiceBox{ width: 100%; height: 60rem; background: rgba(0,0,0,.8); position: absolute; bottom:2.55rem; display: none; opacity: 0; }
.sqfwServiceBox.show,.znjjServiceBox.show,.wyfwServiceBox.show{ display: inline-block;animation: fadeIn .5s ease-in forwards; }
.wyfwServiceBox{ top: -2.6rem; height: 57.1rem; bottom: inherit; z-index: 100; }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.step5{  width: 100%; max-width:120rem;height:80.25rem; margin: 0 auto; position: relative; }
.smartHome{ width: 90rem; height: 60rem; margin-top: 4rem; }
.smartHome > div{ width: 100%; height: 100%; display: flex; padding: 10.75rem 5rem; box-sizing: border-box; }
.smartHome > div > img{ width: 19.34rem; height: 38.45rem; }
.serviceList{ margin-left: 3.75rem; }
.serviceList > div{ margin-top: 6.31rem; text-align: center; cursor: pointer;transition: all linear 0.3s; }
.serviceList > div:hover{
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  transition: all linear 0.3s; 
}
.serviceList > div > img{ width: 5rem; height: 5rem; }
.serviceList > div .p1{ font-weight: bold;font-size: 1.5rem;color: #FFFFFF;line-height: 2.06rem; margin-top: 1.56rem; }
.serviceList > div .p2{ font-weight: 400;font-size: 1rem;color: #FFFFFF; line-height: 1.38rem; margin-top: 0.69rem; }

.step6{ width: 100%; max-width:120rem;margin: 0 auto; position: relative; }
.wyfw{ width: 90rem; height:10.69rem; margin-top:8.63rem; display: flex; justify-content: center;  }
.wyfw > div{ width: 25%; text-align: center;cursor: pointer; transition: all linear 0.3s; }
.wyfw > div:hover{ 
    -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -o-transform: scale(1.05);
  transition: all linear 0.3s; 
}
.wyfw > div img{ width: 5rem; height: 5rem; }
.wyfw > div .p1{ font-weight: bold;font-size: 1.5rem;color: #494848;line-height: 2.06rem; margin-top: 1.56rem; }
.wyfw > div .p2{ font-weight: 400;font-size: 1rem;color: #494848;line-height: 1.38rem; margin-top: 0.69rem; }

.p-b-4{ padding-bottom: 4rem !important; }

.content{ width: 100%; max-width: 90rem; margin: 0 auto; padding: 6.75rem 0; box-sizing: border-box; }
h3{ font-weight: bold;font-size: 2rem;color: #494848;line-height: 2.81rem;text-align: center; }
h5{ font-weight: 400;font-size: 1.5rem;color: #494848;line-height: 2.5rem; margin-top: 1.69rem;text-align: center; }

.bottomBox{  width: 100%; min-width:120rem; margin: 0 auto;  position: relative; }


.beian{ width: 100%; position: absolute; bottom: 0; display: flex;justify-content: center;z-index: 99;height: 28px;line-height: 28px;background: rgba(0,0,0,.3);color: #fff;font-size: 12px;}
.beian>a{margin: 0 10px;color: #fff;font-size: 12px; }

.swiper-container {
    width: 90rem;
    height: 100%;
}
.swiper-slide { width: calc(100% - 2rem); height: 100%; display: flex; justify-content: space-between; align-items: center; padding-left: 6rem; box-sizing: border-box; }
.swiper-slide >div{ width: 100%; height: 41.25rem; display: flex; }
.swiper-slide .left{ width: 43.05rem; height: 100%; display: flex; justify-content:flex-end; }
.swiper-slide .left.moreImg{ justify-content: space-between; }
.swiper-slide .left img{ height: 100%; }
.swiper-slide .right{ margin-left: 3.81rem; color: #ffffff; text-align: left; width: 24.63rem; position: relative; }
.swiper-slide .right .info{ width: 100%; position: absolute; top: 22.93rem; }
.swiper-slide .right h3{ color: #ffffff; text-align: left;font-weight: bold;font-size: 1.5rem;line-height: 2.06rem; }
.swiper-slide .right p{ margin-top: 2.5rem;  }
.swiper-slide .right .swiperBtn{ display: flex; width: 15.63rem; justify-content: space-between; position: absolute; bottom: 0; margin-top: 3.69rem; }
.swiper-slide .right .swiperBtn >div{ width: 7.5rem;height: 2.25rem;border: 0.06rem solid #FFFFFF; line-height: 2.25rem; box-sizing: border-box;text-align: center; opacity: .6; cursor: pointer; }
.swiper-slide .right .swiperBtn >div.diasble{ opacity: .2; cursor:not-allowed; }

.indexBox .swiper-container .swiper-pagination-bullet-active{ background: #fff !important; }
.indexBox .swiper-container .swiper-pagination-bullet{ width: 0.75rem; height: 0.75rem; margin: 1.06rem 0 !important; opacity: .6;background: rgba(255,255,255,0.1);border: 0.06rem solid #FFFFFF; }
.indexBox .swiper-container-vertical>.swiper-pagination-bullets{ bottom: 3.81rem; top: inherit; }

.indexBox img {
  display: inline-block;
}