.csr{position: relative;z-index: 3;}
.csr::after{position: absolute;width: 100%;content: '';height: 40%;background: url(/Content/uploads/20251138980/20250806131614e566e80a88874c10941f90997f3e7a1b.webp) center no-repeat;background-size: contain;top: 0;left: 0;z-index: -1;}
.csr>.l-wrap{max-width: 100%;padding: 0;}
.csr-title{font-size: 28px;font-weight: 500;color: #0b1b2b;line-height: 1.4;text-align: center;}
.csr .page-dev{display: flex;line-height: 1;margin: 15px 0 25px;justify-content: center;}
.csr .page1{padding: 30px 0 80px;}
.csr .page1 .l-wrap{display: flex;align-items: center;justify-content: space-between;}
.csr .page1 .csr-title{text-align: left;}
.csr .page1 .page1-left{flex: 1;padding-right: 55px;}
.csr .page1 .page1-right{width: 57%;background: #EFEFEA;border-radius: 10px 10px 0px 10px;overflow: hidden;}
.csr .page1 .csrSwiper1 .swiper-slide img{width: 100%;}
.csr .page1 .page-dev{justify-content: left;}
.csr .page1 .page1-text p{color: #555555;line-height: 30px;}
.csr .page1 .page1-btn{display: flex;position: absolute;bottom: 0;right: 0;z-index: 3;width: 110px;height: 59px;background: #FFFFFF;opacity: 0.9;justify-content: center;align-items: center;}
.csr .page1 .page1-btn>div{cursor: pointer;display: flex;padding: 0 5px;}
.csr .page1 .page1-btn>div em{font-size: 30px;width: 30px;line-height: 1;color: #B8B8B8;}
.csr .page1 .page1-btn>div:hover em{color: var(--color);}
.csr .page2{padding: 80px 0 0;}
.csr .page2-contant{margin-top: 80px;}
.csr .page2-box{display: flex;align-items: center;margin-bottom: 80px;}
.csr .page2-box:nth-last-child(1){margin-bottom: 0;}
.csr .page2-box:nth-of-type(2n){flex-direction: row-reverse;}
.csr .page2-left{width: 48%;position: relative;overflow: hidden;}
.csr .page2-left img{transition: all .3s ease-in-out;}
.csr .page2-left::after{position: absolute;content: '';width: 85%;height: 85%;border-radius: 20px;opacity: 0.8;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.csr .page2-box:nth-of-type(1) .page2-left::after{border: 10px solid #FFA2F1;}
.csr .page2-box:nth-of-type(2) .page2-left::after{border: 10px solid #875ED4;}
.csr .page2-box:nth-of-type(3) .page2-left::after{border: 10px solid #74CEE2;}
.csr .page2-box:nth-of-type(4) .page2-left::after{border: 10px solid #FFA2F1;}
.csr .page2-right{flex: 1;padding: 70px 80px;box-sizing: border-box;}
.csr .page2-box:nth-of-type(1) .page2-right{background: #FFA2F1;border-radius: 0px 20px 20px 0px;}
.csr .page2-box:nth-of-type(1) .page2-left{border-radius: 20px 20px 0px 20px;}
.csr .page2-box:nth-of-type(2) .page2-right{background: #875ED4;border-radius: 20px 0px 0px 20px;}
.csr .page2-box:nth-of-type(2) .page2-left{border-radius: 20px 20px 20px 0px;}
.csr .page2-box:nth-of-type(3) .page2-right{background: #74CEE2;border-radius: 0px 20px 20px 0px;}
.csr .page2-box:nth-of-type(3) .page2-left{border-radius: 20px 20px 0px 20px;}
.csr .page2-box:nth-of-type(4) .page2-right{background: #FFA2F1;border-radius: 20px 0px 0px 20px;}
.csr .page2-box:nth-of-type(4) .page2-left{border-radius: 20px 20px 20px 0px;}
.csr .page2-text .p1{font-size: 24px;color: #FFFFFF;margin-bottom: 25px;}
.csr .page2-text .p2{color: #FFFFFF;line-height: 26px;}
.csr .page2-btns{display: flex;margin-top: 30px;}
.csr .page2-btns a{background: #FF679A;border-radius: 27px;padding: 20px 50px;line-height: 1;color: #fff;}
.csr .page2-left:hover img{transform: scale(1.03);}
@media (max-width:1640px) {.csr .page2-right{padding: 50px 60px;}}
@media (max-width:1420px) {.csr .page1 {padding: 30px 0 50px;}
.csr .page2-right{padding: 50px 60px;}
.csr .page2-right {padding: 35px 50px;}
.csr .page2-text .p1{margin-bottom: 10px;}
.csr .page2-btns a{padding: 15px 40px;}
.csr .page2-contant{margin-top: 45px;}
.csr .page2 {padding: 50px 0 0;}}
@media (max-width:1366px) {.csr .page1 .page1-right{width: 50%;}
.csr .page1 .page1-left{padding-right: 30px;}
.csr .page-dev{margin: 10px 0 20px;}
.csr-title{font-size: 24px;}
.csr .page2-right {padding: 30px 35px;}}
@media (max-width:1024px) {.csr .page1 {padding: 0px 0 35px;}
.csr .page1 .l-wrap{flex-direction: column;}
.csr .page1 .page1-left {padding-right: 0;}
.csr .page1 .page1-right {width: 100%;margin-top: 25px;}
.csr .page2 {padding: 15px 0 0;}
.csr .page2-text .p1{font-size: 22px;}}
@media (max-width:768px) {.csr .page2-box{flex-direction: column;margin-bottom: 45px;}
.csr .page2-left{width: 100%;}
.csr .page2-box:nth-of-type(2n){flex-direction: column;}
.csr .page2-box .page2-right{border-radius: 0px 0px 20px 20px !important;}
.csr .page2-left{border-radius: 20px 20px 0px 0px !important;}}
@media (max-width:550px) {.csr .page2-right{padding: 20px;}
.csr .page2-text .p1{font-size: 18px;margin-bottom: 5px;}
.csr .page2-text .p2{font-size: 14px;}
.csr .page2-contant {margin-top: 20px;}
.csr .page2-box{margin-bottom: 30px;}
.csr-title {font-size: 20px;}  
.csr .page1 .page1-btn>div em{font-size: 20px;width: 20px;}
.csr .page1 .page1-btn{width: 85px;height: 45px;}
.csr .page2-left::after{width: 90%;height: 90%;}
.csr .page2-box:nth-of-type(1) .page2-left::after{border: 5px solid #FFA2F1;}
.csr .page2-box:nth-of-type(2) .page2-left::after{border: 5px solid #875ED4;}
.csr .page2-box:nth-of-type(3) .page2-left::after{border: 5px solid #74CEE2;}
.csr .page2-box:nth-of-type(4) .page2-left::after{border: 5px solid #FFA2F1;}}