
.p-main{width: 100%;}
.p-cont{width: 100%;position: relative;}
.p-left{position: absolute;top: 0;right: 0;width: 70.93%;height: 100%;}
.p-img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.p-img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.00);transition: all ease .5s;}
.p-right{position: relative;z-index: 1;width: 41.61%;display: flex;align-items: center;}
.p-box{padding: .3rem 1rem .3rem 1.4rem;}
.p-titles{width: 100%;margin-bottom: .25rem;color: #ffffff;font-weight: bold;line-height: 1.2;}
.p-subtitle{width: 100%;color: #ffffff;line-height: 1.4;}
.p-intro{width: 100%;padding-top: .2rem;color: #ffffff;line-height: 1.7;}
.p-intro *{line-height: inherit;}
.p-intro p{margin-top: .15rem;}

@media(min-width: 750px){
   .p-right{min-height: 7.6rem;background-image: url('/static/home/images/a23.png');background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;}
}
@media(max-width: 750px){
    .p-left{position: relative;width: 100%;height: auto;padding-top: calc(760/1362*100%);}
    .p-right{width: 100%;background-color: #0067ac;background-image: linear-gradient(90deg, #0067ac 0%, #68b92e 100%);}
    .p-box{padding: .5rem .3rem;}
}

.q-main{width: 100%; background-size: cover;background-position: center center;background-repeat: no-repeat;}
.q-inner{width: 100%;padding: .25rem 0 1.25rem;}
.q-cont{width: 100%;display: flex;flex-wrap: wrap;}
.q-left{flex: 1;padding: 0 1rem 0 1.4rem;}
.q-top{width: 100%;padding-bottom: .45rem;}
.q-titles{width: 100%;margin-bottom: .35rem;color: #222222;line-height: 1.27;}
.q-intro{width: 100%;color: #444444;line-height: 1.8;}
.q-bottom{width: 100%;}
.q-subtitle{width: 100%;margin-bottom: .15rem;color: #222222;line-height: 1.4;}
.q-linkbox{position: relative;width: 100%;padding: .35rem 0; display: flex;flex-wrap: wrap;background-color: #ffffff;border-radius: .2rem;}
.q-link{display: block;width: 50%;padding: .07rem .5rem;color: #222222;line-height: 1.6;}
.q-link:hover{color: #0067ac;}

.q-right{width: 9.1rem;}
.q-img{width: 100%;position: relative;overflow: hidden;padding-top: calc(520/910*100%);border-radius: .2rem 0px 0px .2rem;}
.q-img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.00);transition: all ease .5s;}

@media(min-width: 750px){
    .q-linkbox:after{content: '';position: absolute;top: 0;left: 50%;width: 1px;height: 100%;background-color: #e5edfb;}
}
@media(max-width: 750px){
    .q-left{flex: none;width: 100%;padding: 0 .3rem .5rem;}
    .q-link{width: 100%;padding: .07rem .3rem;}
    .q-right{width: 100%;}
    .q-img{border-radius: .2rem .2rem 0 0;}
}

.r-main{width: 100%;padding: 1.1rem .3rem .8rem;}
.r-inner{width: 100%;max-width: 16.4rem;margin: 0 auto;}
.r-titles{width: 100%;text-align: center;margin-bottom: .3rem;color: #222222;font-weight: bold;line-height: 1.27;}
.r-cont{width: 100%;display: flex;flex-wrap: wrap;font-size: 0;}
.r-item{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;cursor: pointer;position: relative;width: 32.13%;margin-right: 1.8%;margin-bottom: .3rem;background-color: #eff4fd;border-radius: .2rem;overflow: hidden;}
.r-item:after{transition: all  .3s;content: '';position: absolute;top: 50%;right: .4rem;transform: translate(0,-50%);width: .4rem;height: .4rem;border-radius: 50%;background-color: rgba(255,255,255,.6);background-image: url('/static/home/images/a17.png');background-size: .06rem auto;background-position: center center;background-repeat: no-repeat;}
.r-item:nth-child(3n){margin-right: 0;}
.r-lt{width: 1.9rem;}
.r-img{width: 100%;position: relative;overflow: hidden;padding-top: calc(190/190*100%);}
.r-img img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.00);transition: all ease .5s;}
.r-rt{width: calc(100% - 2.38rem);padding-right: 1rem;}
.r-name{width: 100%;color: #222222;line-height: 1.6;}
.r-item:hover .r-img img{transform: scale(1.05);}
.r-item:hover .r-name{color: #0067ac;}
.r-item:hover:after{right: 0.3rem;}

@media(max-width: 750px){
    .r-item{width: 100%;margin-right: 0;} 
}
