.banner { position: relative; height:100%;}
.banner .bg { width: 100%;} 
.banner .banner-logo { width: 138px; height: 43px; position: absolute; top: 50px; left: 107px;}
.banner .back { font-size: 16px;color: #FFFFFF; line-height: 1; position: absolute; top: 63px; right: 109px;}
.banner .cont { position: absolute; top: 155px; left: 50%; transform: translate(-50%);}
.banner .cont .left { flex: 1;}
.banner .cont .left .tit { margin-top: 110px; font-size: 108px;color: #FFFFFF;line-height: 1; font-weight: bold; font-family: Source Han Sans CN;}
.banner .cont .left .etit { margin-top: -33px; font-size: 74px;color: #FFFFFF;line-height: 1; font-weight: bold; opacity: 0.1;}
.banner .cont .left .code-box { margin-top: 72px; display: inline-block; border: 2px solid #FFFFFF;}
.banner .cont .left .code-box div { align-items: center;}
.banner .cont .left .code-box img { width: 156px; height: 156px;}
.banner .cont .left .code-box p { padding: 0 68px 0 44px; font-size: 36px;color: #FFFFFF;line-height: 57px;}
.banner .cont .left .text { font-size: 16px;color: #FFFFFF;line-height: 57px;} 
.banner .cont .phone { width: 343px; height: 714px; margin-right: 1.3%; position: relative;}
.banner .cont .phone .video { width: 317px; height: 686px; background-color: #000000; border-radius: 30px; position: absolute; left: 13px; top: 14px; z-index: 1;}
.banner .cont .phone .mask { padding: 14px 13px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 4;}
.banner .cont .phone .mask::after { content: ''; width: 33.2%; height: 5px; background-color: #000000; border-radius: 3px;  position: absolute; bottom: 2.7%; left: 33.4%; z-index: 4;}
.banner .cont .phone .mask .img-head { width: 58%; height:auto; position: absolute; top: 1.8%; left: 50%; margin-left: -29%; z-index: 4;}
.banner .cont .phone .mask .img { width: 100%; height: 100%; border-radius: 30px;}
.banner .cont .phone .mask .icon {font-size: 56px; color: rgba(0, 0, 0, 0.2); position: absolute; left: calc(50% - 28px); top: 50%; z-index: 2;}


.intro2 { padding: 230px 0 0;}
@media screen and (max-width: 1720px) { 
  .banner .cont .left .tit { margin-top: 60px;}
  .banner .bg { height: 77.3%;} 
}
@media screen and (max-width: 1580px) { 
  .banner .cont .left .tit { margin-top: 60px; font-size: 90px;}
  .banner .cont .left .etit { font-size: 60px; margin-top: -30px;}
  .banner .cont .left .code-box { margin-top: 40px;}
  .banner .cont .left .code-box img { width: 140px; height: 140px;}
  .banner .cont .left .code-box p { font-size: 28px; line-height: 50px;}
  .intro2 { padding: 270px 0 0;}
  .banner .cont .phone { zoom: 0.8;}
}
@media screen and (max-width: 1440px) { 
  .banner .cont .left .tit { margin-top: 50px; font-size: 80px;}
  .banner .cont .left .etit { font-size: 50px; margin-top: -25px;}
  .banner .cont .left .code-box { margin-top: 30px;}
  .banner .cont .left .code-box img { width: 120px; height: 120px;}
  .banner .cont .left .code-box p { font-size: 24px; line-height: 40px;}
  .intro2 { padding: 350px 0 0;}
}
@media screen and (max-width: 1240px) { 
  .banner .cont .left .tit { margin-top: 60px;}
  .banner .cont .left .code-box { margin-top: 40px;}
  .intro2 { padding: 400px 0 0;}
}
@media screen and (max-width: 1023px) { 
  .banner .cont .left .tit { font-size: 70px;}
  .banner .cont .left .etit { font-size: 42px; margin-top: -21px;}
  .banner .cont .left .code-box img { width: 100px; height: 100px;}
  .banner .cont .left .code-box p { font-size: 20px;padding: 0 40px 0 30px;}
}




.title { font-size: 58px; color: #333333; line-height: 70px; text-align: center;}
.stitle { margin-top: 20px; font-size: 20px; color: #999999; line-height: 26px; text-align: center;}

.wrap-big{width:1440px;margin: 0 auto; }
@media screen and (max-width: 1440px) { .wrap-big{ width: 1220px; } }
@media screen and (max-width: 1219px) { .wrap-big{ width: 980px; } }
@media screen and (max-width: 1023px) { .wrap-big{ width: 90%;}}
@media screen and (max-width: 767px) { .wrap-big{ width: 96%;}}

.intro2 .cont { margin-top: 103px; position: relative; z-index: 1;}
.intro2 .cont .center { width: 700px; margin: 0 auto;}
.intro2 .cont .center .phone { width: 323px; height: 573px; overflow: hidden;} 
.intro2 .cont .center .phone .pimg { width: 100%; height: 100%; background-color: #FFFFFF; border-radius: 6%;position: relative;}
.intro2 .cont .center .phone .pimg .img1 { width: 100%; height: auto; position: relative;z-index: 2;}
.intro2 .cont .center .phone .pimg .img2 { width: 94%; height: 100%; position: absolute; left: 3%; top: 2%;z-index: 1;}
.intro2 .cont .center .phone .pimg img { width: 100%;}
.intro2 .left { position: absolute; top: 0; left: 0; z-index: 2;}
.intro2 .text { display: inline-block; min-width: 140px; padding: 10px 23px; font-size: 16px; line-height: 27px; color: #FFFFFF;background-color: rgba(26, 141, 255, 0.4); text-align: center;}
.intro2 .left .text1 { margin-top: 27px; margin-left: 103px;min-width: 131px;}
.intro2 .left .text2 { margin-top: 26px; margin-left: 271px; background-color: rgba(26, 141, 255, 0.6);}
.intro2 .left .text3 { margin-top: -9px; margin-left: 247px; width: 38px; min-width: 38px; height: 19px; background: #1A8DFF; opacity: 0.3;}
.intro2 .left .text4 { margin-top: 15px; margin-left: 151px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .left .text5 { margin-top: -9px; margin-left: 32px; width: 34px; min-width: 34px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .left .text6 { margin-top: 18px; margin-left: 81px;background-color: rgba(26, 141, 255, 0.4);}
.intro2 .left .text7 { margin-top: 25px; margin-left: 192px;background-color: rgba(26, 141, 255, 0.6);}
.intro2 .left .text8 { margin-top: -9px; margin-left: 171px;width: 38px; min-width: 38px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .left .text9 { margin-top: 16px; margin-left: 66px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .left .text10 { margin-top: 25px; margin-left: 266px;background-color: rgba(26, 141, 255, 0.4);}
.intro2 .right { position: absolute; top: 0; right: 0; z-index: 2; text-align: right;}
.intro2 .right .text1 { margin-top: 27px; margin-right: 204px;min-width: 131px;}
.intro2 .right .text2 { margin-top: 26px; margin-right: 96px; background-color: rgba(26, 141, 255, 0.6);}
.intro2 .right .text3 { margin-top: -9px; margin-right: 222px; width: 38px; min-width: 38px; height: 19px; background: #1A8DFF; opacity: 0.3;}
.intro2 .right .text4 { margin-top: 15px; margin-right: 165px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .right .text5 { margin-top: -9px; margin-right: 87px; width: 34px; min-width: 34px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .right .text6 { margin-top: 18px; margin-right: 224px;background-color: rgba(26, 141, 255, 0.4);}
.intro2 .right .text7 { margin-top: 25px; margin-right: 154px;background-color: rgba(26, 141, 255, 0.6);}
.intro2 .right .text8 { margin-top: -9px; margin-right: 146px;width: 38px; min-width: 38px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .right .text9 { margin-top: 16px; margin-right: 87px;background-color: rgba(26, 141, 255, 0.8);}
.intro2 .right .text10 { margin-top: 25px; margin-right: 265px;background-color: rgba(26, 141, 255, 0.4);}
@media screen and (max-width: 1440px) { 
  .intro2 .cont { zoom: 0.9;}
}
@media screen and (max-width: 1219px) {
  .intro2 .cont { zoom: 0.8;}
}
@media screen and (max-width: 1023px) { 
  .intro2 .cont { zoom: 0.6;}
}  

.intro3 { padding: 138px 0 140px; background-color: #EFF7FF;}
.intro3 .cont { margin-top: 94px;}
.intro3 .left { width: 270px; text-align: right;}
.intro3 .right { width: 270px;}
.intro3 .item { margin-bottom: 70px;}
.intro3 .item .name  { font-size: 20px;color: #333333; align-items: center;}
.intro3 .item .name .icon { font-size: 22px; color: #999999; margin-right: 13px;}
.intro3 .item .desc { font-size: 14px; color: #666666;line-height: 27px; margin-top: 10px;}
.intro3 .left .name { flex-direction: row-reverse; justify-content: right;}
.intro3 .left .name .icon { margin-left: 13px; margin-right: 0;}
.intro3 .right .name { justify-content: flex-start;}
.intro3 .center { flex: 1; margin: 0 72px;}
.intro3 .center .macbook { width: 100%; height: auto; background-image: url(../image/downapp/macbook.png); background-size: 100% 100%; position: relative; }
.intro3 .center .macbook .frame { width: 100%; }
.intro3 .center .macbook .img { padding: 4% 11% 9%;}
.intro3 .center .macbook .img img { width: 100%;}
.intro3 .center .macbook .phone { width: 122px; height: 255px; position: absolute; right: 5px;bottom: -30px;}
.intro3 .center .macbook .phone::after {content: ''; width: 122px; height: 7px; background-image: url(../image/downapp/shadow.png); background-size: 100% 100%; opacity: 0.8; position: absolute;bottom: -3px;}
.intro3 .center .macbook .phone .pimg { width: 100%; height: 100%; background-color: #FFFFFF; border-radius: 30px;}
.intro3 .center .macbook .phone .pimg .img1 { width: 100%; height: 100%; position: absolute; left: 0; top: 0;z-index: 2;}
.intro3 .center .macbook .phone .pimg .img2 { width: 94%; height: 94%; position: absolute; left: 3%; top: 2%;z-index: 1;}
.intro3 .center .macbook .phone .pimg img { width: 100%;}
.intro3 .center .name { margin-top: 30px; font-size: 20px;color: #333333;line-height: 1; text-align: center;}
@media screen and (max-width: 1219px) {
  .intro3 .center { flex: 1; margin: 0 30px;}
  .intro3 .center .macbook .phone { zoom: 0.6;}
} 
@media screen and (max-width: 1023px) {
  .intro3 .center { flex: 1; margin: 0 20px;}
  .intro3 .center .macbook .phone { zoom: 0.4;}
  .intro3 .center .name { font-size: 18px;}
  .intro3 .left { width: 25%;}
  .intro3 .right { width: 25%;}
}

.intro4 { padding: 134px 0 138px;}
.intro4 .list { margin-top: 98px;}
.intro4 .list .item { width: 25%; text-align: center;}
.intro4 .list .item .circle { display: inline-block; width: 90px; height: 90px; background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 50%; text-align: center;}
.intro4 .list .item .img-box {display: inline-block; margin: 4px; width: 80px; height: 80px; background: #EFF7FF; border-radius: 50%; display: flex; justify-content: center;align-items: center;}
.intro4 .list .item .img-box .img1 { display: block;}
.intro4 .list .item .img-box .img2 { display: none;} 
.intro4 .list .item .circle:hover .img-box { background-color: #487CFF;}
.intro4 .list .item .circle:hover .img-box .img1 { display: none;}
.intro4 .list .item .circle:hover .img-box .img2 { display: block;}
.intro4 .list .item p { margin-top: 46px; font-size: 20px;color: #333333;line-height: 1;}

@media screen and (max-width: 1219px) {
  .title { font-size: 50px;}
}
@media screen and (max-width: 980px) {
  .title { font-size: 38px;}
  .stitle { font-size: 18px;}
}

@media screen and (max-width: 778px) { 
  .title { font-size: 30px; line-height: 40px;}
  .stitle { font-size: 12px; margin-top: 10px;}
  .intro2 { padding: 130px 0 0;}
  .intro3 { padding: 80px 0;}
  .intro4 { padding: 80px 0;}
}






