.section .inner {  position: relative;  }
.sec01 {  background: linear-gradient(45deg,#3ca0dd 24.9%, #305f9f);  }
.sec01 .text {  padding: 10.86% 0 5.29% 7.86%;  }
.sec01 .l1 {  font-size: 0.21rem;  margin-bottom: 0.34rem;  }
.sec01 .l2 {  font-size: 0.72rem;  margin-bottom: 0.2rem;  color: #fff;  }
.sec01 .l3 {  font-size: 0.28rem;  color: #fff;  }
.sec01 .pic {  position: absolute;  left:39.86%;  top: 0;  margin-top: 4.57%;  width: 12.57%;  }
.sec01 svg {  width: 100%;  fill: #be256a;  }
.sec02 {  background: #fff;  }
.sec02 .text {  position: relative;  z-index: 1;  padding: 0.66rem 0 0.87rem 7.86%;  }
.sec02 .l1 {  line-height: 1.5; color: #000202; margin-bottom: 0.72rem;}
.sec02 .l2{  line-height: 1.8; color: #595959; font-size: 0.2rem;}
.sec02 .pic {
    position: absolute;  right: -15%;  top: 0;  margin-top: -22.5%;  width: 65.21%;
}
img{width: 100%;}
.sec02 .pic img {  width: 100%;  }
.sec3{
    background: url('../../img/product/exs800/2.jpg') no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    padding: 32% 0 7.5%;
}
.sec3 .mktitle{ font-size: 0.5rem; color: #000202; position: relative; text-align: right; margin-bottom: 0.82rem;}
.sec3 .mktitle:after{
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: #000202;
    position: absolute;
    top:-0.36rem;
    right: 0;
}
.sec3 .imglibox .imglist{
    width:calc((100% - 0.4rem) / 3);
    height: 2.846rem;
    border-radius: 0.16rem;
    position: relative;
    transition: transform 1.6s ease;
    overflow: hidden;
}
.sec3 .imglibox .imglist:hover{ transform: scale(1.02);}
.sec3 .imglibox .imglist .text{ position: absolute; left:0; top: 1.85rem; padding:0 0.5rem; box-sizing: border-box;}
.sec3 .cmp1{ font-size: 0.2rem; color: #ffffff; margin-bottom: 0.22rem;}
.sec3 .cmp2{ font-size: 0.14rem; color: rgba(255,255,255,0.8); line-height:1.5 }
.sec3 .box2 {
    background: url('../../img/product/exs800/6.jpg') no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    height: 3.9rem;
    border-radius: 0.16rem;
    margin-top: 0.2rem;
    padding-top: 0.8rem;
    box-sizing: border-box;
}

.sec3 .box2 .text{ width: 4.2rem; margin-left: 0.6rem; }
.sec3 .box2 .text .p2{ margin-bottom: 0.8rem; }
.sec3 .box2 .text .span1{ width: 2rem; }
.sec3 .box2 .text .li{margin-bottom: 0.16rem;}
.sec3 .box2 .text .li i{
    display: block;
    background: #3ca0dd;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    margin-right: 8px;
}
.sec4{ padding: 5.83% 0 5.56%; }
.sec4 .p1{ text-align: center; font-size: 0.44rem; color: #000202; margin-bottom: 0.52rem; }
.sec4 .p2{ text-align: center; font-size: 0.2rem; color: #595959; margin-bottom: 1.26rem; }
.sec4 .imgbox{ width: 9.74rem; margin: 0 auto; position: relative; }
.sec4 .cls-1 {  fill: #3ca0dd;  }
.sec4 .cls-2 {  fill: none;  stroke: #3ca0dd;  stroke-dasharray: 0 0 0 3;  stroke-linecap: round;  stroke-linejoin: round;  }
.sec4 .postitle .circle { animation: circleSan 1.6s ease-out infinite; }
.sec4 .postitle svg { width:14px; position: absolute; }
.sec4 .postitle{ position: absolute; font-size: 0.18rem; color: #595959; }
.sec4 .postitle1{left:10%; bottom: 0; }
.sec4 .postitle1 svg{ right:-0.2rem; bottom: 0; }

.sec4 .postitle2{left: 38%;bottom: -14%;}
.sec4 .postitle2 svg{ left:-0.2rem; bottom: 0; }
.sec4 .bref{ text-align: center; margin-top: 1.2rem; font-size: 0.16rem; color: rgba(89,89,89,0.6); }
@keyframes circleSan {
    0%{ opacity: 0.2 }
    50%{ opacity: 0.9 }
    100%{ opacity: 0.2 }
}
.sec5{
    background: url('../../img/product/exs800/8.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 5.73% 0 2%;
}
.sec5 .p1{ font-size: 0.44rem; color: #fff; margin-bottom: 0.5rem; text-align: right;}
.sec5 .p2{ font-size: 0.22rem; color: rgba(255,255,255,0.9); line-height: 2.4; text-align: right;}
.sec5 .bigimg{text-align: right; margin-top: 0.75rem; padding-bottom:51.92%; position: relative; }
.sec5 .bigimg img{ width: 86.45%; position: absolute; right:0;top:0; }

.sec6{
    color: #fff;
    background: linear-gradient(to right,#252729 55%,#305f9f);
    box-sizing: border-box;
    padding: 5.46% 0;
    padding-left: calc(100% - 86.45%);
    position: relative;
}
.sec6 .title{ font-size: 0.38rem; margin-right: 0.74rem; }
.sec6 .text{margin-bottom: 0.72rem;}
.sec6 .lis{ font-size: 0.2rem; width: 46.56%; }
.sec6 .lis p{ border-bottom: 1px dashed rgba(255,255,255,0.3); height: 0.58rem; line-height: 0.58rem; padding-left: 0.44rem; box-sizing: border-box; display: flex; align-items: center; position: relative; }
.sec6 .lis p:nth-child(1){border-top:1px solid #3ca0dd;}
.sec6 .lis p:last-child{border-bottom:1px solid #3ca0dd;}
.sec6 .lis p:before{
    content: '';
    display: block;
    background:#3ca0dd ;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    left:0.16rem;
}
.sec6 .bref{font-size: 0.14rem; color: rgba(255,255,255,0.8);}
.sec6 .animBj{ position: absolute; right:0; top:0; height: 100%; width:100%;  }
.sec6 .animBj .circle{ width:100%; height: 100%;  animation: circleBj 12s linear 0.1s infinite alternate; position: absolute; left:0; top:0;
    background:linear-gradient(-135deg, rgba(255,255,255,0) 10%, rgba(48,95,159,1) 20%,rgba(255,255,255,0) 30%);
    background-size:400% 400%;
    background-position: 0% 0%;
    opacity: 0.7;
}
@keyframes circleBj {
    0%{
        background-position: 118% 0%;
    }
    100%{
       background-position: 50% 0%;

    }
}

@media all and (max-width: 1480px) {
    .sec02 .l2,
    .sec4 .bref,
    .sec6 .bref,
    .sec4 .postitle{font-size: 13px;}
    .sec3 .cmp2{font-size: 12px;}
    .sec3 .cmp1{margin-bottom: 0.12rem;}
    .sec3 .imglibox .imglist .text{padding: 0 0.3rem;top: 1.5rem;}
    .sec3 .box2 .text .span1 { width: 2.4rem;  }

}

@media all and (max-width: 767px) {
    .sec01 .text {  padding: 8% 0 6.27% 12.93%;  }
    .sec01 .l1 {  font-size: 3.47vw;  margin-bottom: 5.01vw;  }
    .sec01 .l2 {  font-size: 9vw;  margin-bottom: 2.27vw;  }
    .sec01 .l3 {  font-size: 4vw;  }
    .sec01 .pic {  left: auto;  right: 12.8vw;  top: auto;  bottom: 6.27vw;  margin-top: 0;  width: 22vw;  }
    .sec02 {  padding: 14.07vw 0 14.53vw;  text-align: center;  }
    .sec02 .text {  padding: 0;  margin-bottom: 0;  }
    .sec02 .l1 {  margin-bottom: 0.62rem; }
    .sec02 .l2 {  font-size: 0.26rem;  margin-bottom: 0;line-height: 1.7;  }
    .sec02 .hd { padding: 0 0.6rem; }
    .sec02 .pic {  position: static;  width: auto;  margin-top: -0.2rem;  }
    .sec3 {
        background:#f2eeed url(../../img/product/exs800/sp_1.jpg) no-repeat;
        background-size: 100% auto;
        background-position: center top;
        padding: 6.68rem 0 1.7rem;
    }
    .sec3 .mktitle{ text-align: left;margin-bottom:0.62rem;  }
    .sec3 .mktitle:after{ left:0;right: auto;}
    .sec3 .imglibox{  display: block; }
    .sec3 .contbox{ padding: 0 0.4rem; box-sizing: border-box;}
    .sec3 .imglibox .imglist{ width: 100%; height: 2.56rem; margin-bottom: 0.3rem; }
    .sec3 .imglibox .imglist:hover{  transform: scale(1); }
    .sec3 .cmp1{ font-size:0.3rem; }
    .sec3 .cmp2{ font-size:0.24rem; }
    .sec3 .imglibox .imglist .text{ top:1.1rem;padding: 0 0.44rem; }
    .sec3 .text .p1{margin-bottom: 0.6rem;}
    .sec3 .text .p2{line-height: 1.7;}
    .sec3 .box2{
        background: url(../../img/product/exs800/sp_5.jpg) no-repeat;
        background-size: 100% auto;
        background-position: center top;
        padding: 0;
        position: relative;
        height: 2.56rem;
    }
    .sec3 .box2 .p1{ margin-bottom: 1.4rem; }
    .sec3 .box2 .text{width: 100%; margin-left: 0.44rem;padding: 1.07rem 0 0.76rem;  box-sizing: border-box;}
    .sec3 .box2 .text .span1{width: 3.4rem;}
    .sec3 .box2 .text .p2{margin-bottom: 0.4rem}
    .sec3 .box2 .text .li{margin-bottom: 0.24rem;}
    .sec3 .box2 .text .li i{font-size: 0.21rem;}
    .sec3 .jt{ fill:#146583; width: 0.2rem; height: 0.12rem; position: absolute; bottom: 0.3rem; left:0.44rem; transition:transform 0.3s ease;}
    .sec3 .sphide{ opacity: 0; visibility: hidden; transition:opacity 0.3s ease 0.2s,visibility 0.3s ease 0.2s; }
    .sec3 .btnImg.on .sphide{opacity: 1; visibility: visible;}
    .sec3 .btnImg.on .jt{transform:rotate(180deg);}
    .sec3 .imglibox .imglistb .text .p1{margin-bottom: 0.76rem;}
    .sec4 {  padding: 1.44rem 0 1.6rem;  }
    .sec4 .p1{font-size: 0.5rem;margin-bottom: 0.82rem;}
    .sec4 .p2{font-size: 0.26rem; line-height: 1.7; margin-bottom: 0;}
    .sec4 .imgbox {width: 93%;padding: 3rem 0 1.8rem;}
    .sec4 .postitle{ font-size: 0.28rem; }

    .sec4 .postitle1{ top: 2rem; bottom: auto; left: 23%; }
    .sec4 .postitle svg{ width: 0.14rem;}
    .sec4 .postitle1 svg{ top: 0; bottom: auto; right:auto; left:-0.4rem; transform: rotate(180deg); width: 0.14rem;}
    .sec4 .postitle2 {  bottom: 1.1rem; }
    .sec4 .bref{ margin-top: 0; font-size: 0.26rem; }
    .sec5 {
        padding:1.58rem 0 0.6rem;
        background: url(../../img/product/exs800/sp_7.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sec5 .p2{line-height: 1.8; font-size: 0.26rem;}
    .sec5 .inner{ padding: 0 0.4rem; box-sizing: border-box; }
    .sec5 .bigimg{ padding-bottom: 8rem; margin-top: 1.4rem; }
    .sec5 .bigimg img{width: calc(100% - 0.38rem);}
    .sec6{ padding: 1rem 0.38rem 1.2rem 0.38rem;}
    .sec6 .title{margin-bottom: 0.47rem; padding-left: 0.44rem; font-size: 0.44rem;}
    .sec6 .text{display: block; margin-bottom: 0.86rem;}
    .sec6 .lis{width:100%; font-size: 0.26rem;}
    .sec6 .lis p{ height: auto; line-height: 1.6; padding: 0.16rem 0 0.16rem 0.44rem; }
    .sec6 .lis p:before{top: 0.28rem;}
    .sec6 .bref{ font-size:0.26rem; line-height: 1.8; }
}