/* index */
 .banner {
     height: 780px;
 }

 .page-wrapper {
     width: 100vw;
     overflow-x: hidden;
 }

 .navbar {
     position: absolute;
     top: 0;
     z-index: 1;
     left: 0;
     background: linear-gradient(180deg, #00AEE7 0%, rgba(0, 174, 231, 0.37) 100%);
 }

 .banner-img {
     width: 100%;
     height: 900px;
     object-fit: cover;
     position: absolute;
     top: -120px;
     left: 0;
 }

 .relation {
     display: flex;
     justify-content: space-around;
 }

 .relation div {
     cursor: pointer;
     position: relative;
 }

 .relation img {
     cursor: pointer;
     display: block;
 }

 .relation .ewm {
     width: 134px;
     height: 148px;
     position: absolute;
     top: -147px;
     left: -37px;
     display: none;

 }

 .relation .ewmText {
     font-size: 12px;
     color: #192D4C;
     position: absolute;
     bottom: 15px;
     left: 0;
     background: #fff;
     width: 134px;
 }

 .relation .WeChat:hover .ewm,
 .ewm:hover {
     display: block;
 }

 .relation .telNumber {
     width: 140px;
     height: 52px;
     position: absolute;
     top: -50px;
     left: -37px;
     display: none;
 }

 .relation .telNumber .telNumberText {
     font-size: 12px;
     color: #4D4D4D;
     position: absolute;
     bottom: 18px;
     left: 0;
     background: #fff;
     width: 100px;
     margin-left: 30px;
 }

 .relation .tel:hover .telNumber,
 .telNumber:hover {
     display: block;
 }

 .product {
     text-align: center;
     padding: 43px 0 68px;
 }

 .product .title {
     width: 461px;
     padding-bottom: 62px;
 }

 .product .lists {
     display: flex;
     justify-content: space-around;
     width: 90%;
     margin: 0 5%;
 }

 .product .indexs img {
     width: 124.4px;
     height: 107.2px;
 }

 .product .indexs .name {
     font-size: 16px;
     font-weight: 400;
     line-height: 21px;
     color: #333333;
     margin-top: 14px;
 }

 .case {
     padding: 32px 0;
     background: #1F2A53;
     text-align: center;
     margin-bottom: 39px;
 }

 .case .title {
     width: 250px;
     /* height: 56px; */
     padding-bottom: 42px;
 }

 .case .lists {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
 }

 .case li {
     /* width: 49%; */
     margin-bottom: 12px;
     position: relative;
     color: #fff;
     font-size: 18px;
     transition: transform 0.3s ease-in-out;
 }

 .case li:hover {
     transform: translateY(-10px);
 }

 .case li img {
     /* width: 100%; */
     height: 152px;
     margin-bottom: 24px;
 }

 .case .masking {
     height: 76px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
     border-radius: 8px;
     font-size: 14px;
     line-height: 76px;
     color: #FFFFFF;
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
 }

 .technology {
     width: 100vw;
     margin: 0 auto;
     background: #F6FBFF;
     padding-bottom: 35px;
     text-align: center;
     padding-top: 62px;
 }

 .technology .title {
     width: 653px;
     /* height: 56px; */
     padding: 48px 0 36px;
 }

 .technology .lists {
     display: flex;
     justify-content: space-around;
 }


 .technologyItem {
     width: 24%;
     background: rgba(255, 255, 255, 0.39);
     box-shadow: 0px 3px 16px rgba(51, 51, 51, 0.12);
     border-radius: 4px 4px 0px 0px;
     padding: 46px 16px;
     cursor: pointer;
     color: #3E3E3E;
     transition: transform 0.3s ease-in-out;
 }

 .technologyItem img:nth-child(1) {
     display: block;
 }

 .technologyItem img:nth-child(2) {
     display: none;
 }

 .technologyItem:hover {
     background: rgba(0, 142, 251, 0.7);
     color: #fff;
     transform: translateY(-13px);
 }

 .technologyItem:hover img:nth-child(1) {
     display: none;
 }

 .technologyItem:hover img:nth-child(2) {
     display: block;
 }

 .technologyItem img {
     width: 102px;
     height: 114px;
     margin: 0 auto;
 }

 .technologyItem .describe {
     font-size: 14px;
     line-height: 27px;
     padding-top: 40px;
     text-align: justify;
 }

 .technologyItem .technologyTitle {
     font-size: 18px;
     font-weight: bold;
     padding-top: 24px;
 }

 .operation {
     text-align: center;
     padding-bottom: 54px;
 }

 .operation .title {
     width: 638px;
     /* height: 56px; */
     padding: 48px 0 36px;
 }

 .operation .lists {
     display: flex;
     justify-content: space-between;
 }

 .operation .cont {
     text-align: justify;
     font-size: 20px;
     line-height: 30px;
     color: #707070;
     width: calc(100% - 620px);
 }

 .operation-img {
     width: 604px;
     height: 363px;
     border-radius: 8px;
 }

 /* swiper */

 /* swiper */
 #swiper {
     width: 100vw;
     height: auto;
     padding-top: calc(100vw * 90 / 192);
     margin-top: calc(-100vw * 90 / 192);
     position: relative;
 }

 #swiper img {
     width: 100vw;
 }

 .bed {
     width: 100vw;
     height: calc(100vw * 90 / 192);
 }

 #swiper ul {
     height: 100%;
     position: absolute;
     display: flex;
     flex-wrap: nowrap;
 }

 #swiper ul li {
     width: 100vw;
     height: 100%;
     overflow: hidden;
     position: relative;
 }

 #swiper ul li div {
     position: absolute;
     overflow: hidden;
 }

 #swiper .btn {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 24px;
     z-index: 1000;
 }

 #swiper .btn span {
     display: inline-block;
     _display: inline;
     _zoom: 1;
     width: 33px;
     height: 9px;
     _font-size: 0;
     margin-left: 5px;
     cursor: pointer;
     background: #fff;
     border-radius: 5px;
 }

 #swiper .btn span.on {
     background: #fff;
 }

 /* scroll */

 .scroll {
     width: 100%;
     overflow: hidden;
     box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%);
     padding: 30px 0;
     margin-bottom: 40px;
 }

 .scroll ul {
     white-space: nowrap;
 }

 .scroll ul li {
     display: inline-block;
     margin: 10px;
 }

 .scroll ul img {
     vertical-align: top;
     height: 303px;
     border-radius: 8px;
 }

 .titleImg {
     height: 56px;
     margin-bottom: 35px;
 }