#app{width: 100%;height: auto;display: flex;flex-flow: column;align-items: center;}
#topBg{width: 100%;height: 40rem;display: flex;align-items: center;justify-content: center;}
#topBg .bgImg{width: 100%; height: 100%;vertical-align: middle;object-fit: cover;}
.menuBox{width: 100%;display: flex;flex-flow: column;align-items: center;padding-top: 6.25rem;}
.introduce{padding-bottom: 2.5rem;}
.introduce .introduceImgs{width: 63.75rem;height: auto;margin-top: 2.5rem;display: flex;align-items: center;justify-content: space-between;}
.introduce .introduceImgs .introduceImg{width: 18.75rem;}
.data{padding-bottom: 6.25rem;}
.data .dataItems{width: 60.375rem;height: auto;margin-top: 3.75rem;display: flex;align-items: center;justify-content: space-between;}
.data .dataItems .dataItem{display: flex;flex-flow: column;align-items: center;}
.data .dataItems .dataItem .dataItemImg{height: 4.5rem;}
.data .dataItems .dataItem .dataItemTxt{line-height: 1.75rem;margin-top: 1.25rem;color: #333333;font-size: 1.25rem;font-weight: 600;}

#advantage{width: 90rem;height: auto;position: relative;}
#advantage .advantageBg{width: 100%;vertical-align: middle;}
#advantage .advantage{width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding-left: 13.125rem;overflow: hidden;}
#advantage .advantage video{width: 34.4rem; outline: none !important; border: none !important;mix-blend-mode: normal;object-fit: cover;}
#advantage .advantage video:focus {outline:none !important;border: none !important; }

#advantage .advantage .advantageHandles{width: 35.625rem; height: 100%;padding: 5rem 0;display: flex;flex-flow: column;justify-content: space-between;position: absolute;top: 0;left: 41.25rem;z-index: 2;}
#advantage .advantage .advantageHandles .advantageHandle{width: 100%;height: 7.375rem;display: flex;align-items: center;padding-left: 3.125rem;cursor: pointer;}
#advantage .advantage .advantageHandles .advantageHandle.advantageActive{box-shadow: 0px 0.1875rem 1.25rem 0px rgba(241,227,227,0.9);border-radius: 1rem;overflow: hidden;}
#advantage .advantage .advantageHandles .advantageHandle .advantageIcon{width: 3.25rem;}
#advantage .advantage .advantageHandles .advantageHandle .advantageContent{margin-left: 1.875rem;}
#advantage .advantage .advantageHandles .advantageHandle .advantageContent .advantageContentTitle{line-height: 1.75rem;color: #333333;font-size: 1.25rem;font-weight: 600;}
#advantage .advantage .advantageHandles .advantageHandle.advantageActive .advantageContent .advantageContentTitle{color: #FF575F;}
#advantage .advantage .advantageHandles .advantageHandle .advantageContent .advantageContentTip{line-height: 1.5rem;color: #999999;font-size: 1.125rem;font-weight: 400;margin-top: 0.375rem;font-weight: 400;}

#outline{width: 90rem;height: auto;position: relative;}
#outline .outlineBg{width: 100%;vertical-align: middle;}
#outline .outline{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
#outline .outline .outlineBox{width: 63.75rem;margin: 4.625rem auto 0;display: flex;height: 25rem;justify-content: space-between;}
#outline .outline .outlineBox .outlineScroll{width: 13.75rem;height: 100%;overflow-y: scroll;background-color: #fff;border-radius: 1rem;display: flex;flex-flow: column;align-items: center;padding: 1.5625rem 0;}
#outline .outline .outlineBox .outlineScroll::-webkit-scrollbar{display: none;}
#outline .outline .outlineBox .outlineScroll .outlineScrollItem{width: 11.25rem;height: 3.125rem;border-radius: 0.625rem;line-height: 3.125rem;color: #333333;font-size: 1.125rem;cursor: pointer;padding-left: 1.875rem;margin-bottom: 0.625rem;display: flex; align-items: center; }
#outline .outline .outlineBox .outlineScroll .outlineScrollItem:last-child{margin-bottom: 0;}
#outline .outline .outlineBox .outlineScroll .outlineScrollItem:hover{color: #FF575F;box-shadow: 0px 0.1875rem 1.25rem 0px rgba(241,227,227,0.9);}
#outline .outline .outlineBox .outlineScroll .outlineScrollItem.outlineActive{box-shadow: 0px 0.1875rem 1.25rem 0px rgba(241,227,227,0.9);position: relative;color: #FF575F;font-weight: 600;}
#outline .outline .outlineBox .outlineScroll .outlineScrollItem.outlineActive::before{content: '';position: absolute;top: 50%;left: 0;width: 0.1875rem;height: 1rem;background-color: #FF575F;transform: translateY(-50%);}
#outline .outline .outlineBox .outlineDetail{width: 48.75rem;height: 100%;border-radius: 1rem;overflow: hidden;background-color: #f1f1f1;}
#outline .outline .outlineBox .outlineDetail .outlineDetailVideo{width: 100%;height: 100%;position: relative;}
#outline .outline .outlineBox .outlineDetail .outlineDetailSwiper{width: 100%;height: 100%;position: relative;}
.videoCover{width: 100%;height: 100%;position: relative;}
.videoBox{width: 100%;height: 100%; }
.videoBox video{object-fit: fill;}
.videoPlayIcon{position: absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);width: 6rem;height: 6rem; }
.outlineDetailImg{width: 100%;height: 100%;}
.outlineDetailMask{width: 13.75rem;height: 100%;position: absolute;top: 0;right: 0;border-radius: 1rem;backdrop-filter: blur(4px); background: linear-gradient( 90deg, rgba(0,0,0,0.35) 0%, rgba(255,255,255,0) 100%);z-index: 2;}
.outlineDetailMaskTip{line-height: 1.875rem;font-weight: 400;color: #fff;font-size: 1.125rem;position: absolute;left: 1.875rem;bottom: 5.875rem;}
.outlineDetailMaskHandle{width: 10rem;height: 2.75rem;border-radius: 0.5rem;border: 0.0625rem solid #fff;display: flex;align-items: center;justify-content: center;color: #FFFFFF;font-size: 1.125rem;font-weight: 600;position: absolute;left: 1.875rem;bottom: 1.875rem;cursor: pointer;}
.outlineDetailMaskHandle:hover{background: linear-gradient( 50deg, #FF5D69 0%, #FF3741 100%);border: none;}
.viewAll{width: 10rem;height: 2.75rem;background: linear-gradient( 50deg, #FF5D69 0%, #FF3741 100%);border-radius: 0.5rem;text-align: center;line-height: 2.75rem;color: #fff;font-size: 1.125rem;font-weight: 600;margin-top: 3.125rem;cursor: pointer;}
.playIcon{width: 1.125rem;height: 1.125rem;margin-left: 0.375rem;}

#caseBox{width: 100%;height: auto;display: flex;flex-flow: column;align-items: center;background: linear-gradient( 45deg, #FFFBFB 0%, #FFF8F8 100%);position: relative;}
#case{width: 90rem;height: auto;position: relative;}
#case .caseBg{width: 100%;vertical-align: middle;}
#case .case{width: 100%;height: auto;position: absolute;left: 0;top: 0; padding-top: 5.625rem;display: flex;flex-flow: column;align-items: center;overflow: hidden;}
#case .case .caseItems{width: 100%;height: auto;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;padding: 0 13.125rem;margin-bottom: 9.375rem;}
#case .case .caseItems .caseItem{width: 18.75rem;height: 19.5rem;border-radius: 1rem;overflow: hidden;background-color: #fff;margin-top: 3.75rem;cursor: pointer;opacity: 0.8;}
#case .case .caseItems .caseItem:hover{box-shadow: 0px 4px 24px 0px rgba(241,227,227,0.9);opacity: 1;}
#case .case .caseItems .caseItem .caseItemImg{width: 100%;height: 11.5rem;border-radius: 1rem;overflow: hidden;}
#case .case .caseItems .caseItem .caseInfo{width: 100%;padding: 0.625rem 1rem 0;}
#case .case .caseItems .caseItem .caseInfo .caseInfoDetail{line-height: 1.875rem;font-size: 1.125rem;color: #333333;font-weight: 400;}
#case .case .caseItems .caseItem .caseInfo .caseInfoLong{line-height: 1.75rem;color: #1A1A1A;font-size: 1.25rem;margin-top: 0.625rem;font-weight: 600;}
#case .case .caseItems .caseItem .caseInfo .caseInfoLong span{color: #FF575F;}
#case .case .caseItems .caseMore{width: 18.75rem;height: 19.5rem;display: flex;flex-flow: column;align-items: center;margin-top: 3.75rem;}
#case .case .caseItems .caseMore .caseMoreIcon{width: 100%;}
#case .case .caseItems .caseMore .caseMoreHandle{width: 10rem;height: 2.75rem;display: flex;align-items: center;justify-content: center;background: linear-gradient( 50deg, #FF5D69 0%, #FF3741 100%);border-radius: 0.5rem;margin-top: 1.625rem;font-size: 1.125rem;color: #fff;cursor: pointer;}
#case .case .scrollItems{width: 100%;height: 18.125rem;margin-top: 6.5rem;}
#case .case .scrollItems .scrollItem{height: 100%;margin-left: 1.25rem;margin-right: 1.25rem}

#news{width: 90rem;height: auto;position: relative;vertical-align: middle;}
#news .newsBg{width: 100%;vertical-align: middle;}
#news .news{position: absolute;width: 100%;height: 100%;left: 0;top: 0;padding-top: 7.5rem;display: flex;flex-flow: column;align-items: center;}
#news .news .newsDetail{width: 65.625rem;height: 30.875rem;margin-top: 5.125rem;}


.swiper {width: 100%;height: 100%;}


#bottomBox{width: 63.75rem;height: auto;display: flex;position: relative;padding: 7.5rem 0 8.375rem;}
#bottomBox .bottomInfo{margin-right: 6.25rem;}
#bottomBox .bottomInfo .bottomInfoTitle{line-height: 2.5rem;font-size: 2.125rem;color: #1A1A1A;font-weight: 600;margin-bottom: 1.6875rem;}
#bottomBox .bottomInfo .bottomInfoItem{width: 17.5rem; line-height: 1.875rem;font-size: 1.125rem;color: #333333;margin-bottom: 1.25rem;}
#bottomBox .bottomInfo .bottomInfoItem:last-child{margin-bottom: 0;}
#bottomBox .bottomInfo .bottomInfoContact .bIContactBox{margin-bottom: 3.625rem;}
#bottomBox .bottomInfo .bottomInfoContact .bIContactBox:last-child{margin-bottom: 0;}
.bIContactBoxTitle{line-height: 1.75rem;font-size: 1.25rem;color: #1A1A1A;font-weight: 500;}
.bIContactBoxInfo{display: flex;align-items: center;height: 1.5rem;margin-top: 1.25rem;}
.bIContactBoxInfoIcon{width: 1.5rem;height: 1.5rem;margin-right: 0.75rem;}
.bIContactBoxInfoTxt{line-height: 1.5rem;font-size: 1.125rem;color: #333333;}

#qrcodeList{display: flex;position: absolute;top: 22.375rem;right: 0;}
#qrcodeList .qrcodeItem{width: 10rem;height: 13rem;display: flex;flex-flow: column;align-items: center;justify-content: space-between;margin-left: 1.875rem;}
#qrcodeList .qrcodeItem .qrcodeItemImg{width: 10rem;height: 10rem;}
#qrcodeList .qrcodeItem .qrcodeItemTitle{line-height: 2.375rem;font-size: 1.5rem;color: #1A1A1A;font-weight: 500;}