@charset "utf-8";
.banner{position: relative;}
.banner .swiper-slide{position: relative;height: 100vh;}
.banner .swiper-slide img{width: 100vw; aspect-ratio: 2.2 / 1; object-fit: cover; display: block;}
.banner .search{position: absolute; height: 58px; line-height: 58px; left: 50%; top: 50%; transform: translateX(-50%); z-index: 2; border-radius: 10px; background-color: rgba(255, 255, 255, .9); width: 40vw;}
.banner .search .select{background-color: white; position: relative; padding: 0 15px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .1); font-size: 18px; border-radius: 10px; width: 100px; flex-shrink: 0}
.banner .search .select ul{position: absolute;left: 0;top: 20px;right: 0;background-color: white;display: none;font-size: 16px;border-radius: 10px;z-index: -1;padding-top: 40px;}
.banner .search .select:hover ul{display: block;}
.banner .search .select li{padding:5px 10px 10px 15px; line-height: 1.5;}
.banner .search .iconfont{transform: rotate(90deg); color: #61646e}
.banner .search .input{width: 100%; background: none; border: 0 none; padding: 0 10px;}
.banner .search .button{background-color: var(--red); height: 58px; border-radius: 10px; display: flex; align-items: center; justify-content: center; width: 100px; flex-shrink: 0}
.banner .sub-title, .banner .title{text-align: center; position: absolute; z-index: 2; top: 20%; left: 0; right: 0; color: white;}
.banner .title{top: calc(20% + 70px);}
.banner .sub-title{font-family: 'Roboto-Bold'; font-size: 48px; font-style: italic;}
.banner .title{font-size: 48px; font-weight: 600}
.banner .swiper-pagination{position: absolute; z-index: 2; left: 0; right: 0; bottom: 50px; display: flex; align-items: center; justify-content: center;}
.banner .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; transition: all 300ms; border-radius: 99px; background-color: rgba(255, 255, 255, .5); margin: 0 10px;}
.banner .swiper-pagination .swiper-pagination-bullet-active{width: 40px;}
.banner .swiper-button-next, .banner .swiper-button-prev{position: absolute; z-index: 2; top: 40%; transform: translateY(-50%); cursor: pointer;}
.banner .swiper-button-next{right: 50px;}
.banner .swiper-button-prev{left: 50px;}
.banner .swiper-button-disabled{cursor: not-allowed; opacity: .5}

.core-services{background: url(../imgs/index-red-bg.png) no-repeat left top; padding:8rem 0;}
.core-services .title .sub-t{font-family: 'Roboto_Condensed-Regular'; font-size: 30px; line-height: 1; margin-bottom: 15px; color: var(--red);}
.core-services .title .t{font-size: 2rem; font-weight: 600; line-height: 1}
.core-services .title p{margin-top: 15px; font-size: 20px;}
.core-services .swiper-wrap{margin-top: 4rem; height: 520px; position: relative;}
.core-services .swiper{position: absolute; left: 0; top: 0; width: calc(100% + 520px);}
.core-services .swiper-slide{height: 520px; border-radius: 5%; overflow: hidden; position: relative; background: linear-gradient(to bottom, #f6a9ac, #ffebea); padding: 1px;}
.core-services .swiper-slide .inner{background: #ffebea; border-radius: 5%; height: calc(100% - 2px); box-sizing: border-box; padding: 3rem 2rem 0 2rem;}
/*.core-services .swiper-slide:nth-child(4n){opacity: .2}*/
.core-services .slide1{background: linear-gradient(to bottom, #f6a9ac, #ffebea);}
.core-services .slide1 .inner{background: #ffebea;}
.core-services .slide2{background: linear-gradient(to bottom, #cbc7ff, #f7f2ff);}
.core-services .slide2 .inner{background: #f7f2ff;}
.core-services .slide3{background: linear-gradient(to bottom, #88cbff, #f1f9ff);}
.core-services .slide3 .inner{background: #f1f9ff;}
.core-services .swiper-slide .desc{height: 5em}
.core-services .swiper-slide .t{font-size: 1.5rem; margin-bottom: 20px;}
.core-services .swiper-slide img{position: absolute; right: 55px; bottom: 50px; transition: all 300ms;max-width: 150px;}
.core-services .swiper-slide:hover img{transform: translateY(-10px) rotate(15deg);}
.core-services .swiper-slide li{padding-left: 2rem; cursor: pointer; background: url(../imgs/dot1.png) no-repeat left center; margin-top: 1rem;}
.core-services .swiper-slide li:hover{background-image: url(../imgs/dot1-on.png);}
.core-services .slide1 li{background-image: url(../imgs/dot1.png);}
.core-services .slide1 li:hover{background-image: url(../imgs/dot1-on.png);}
.core-services .slide2 li{background-image: url(../imgs/dot2.png);}
.core-services .slide2 li:hover{background-image: url(../imgs/dot2-on.png);}
.core-services .slide3 li{background-image: url(../imgs/dot3.png);}
.core-services .slide3 li:hover{background-image: url(../imgs/dot3-on.png);}

.digital{background: url(../imgs/index-red-bg2.png) no-repeat center/cover; padding: 105px 0;}
.digital .container{position: relative;}
.digital .l{display: grid; grid-template-columns: repeat(3, 1fr); width: 60%; grid-gap: 20px}
.digital .item{background-color: rgba(255, 255, 255, .2); transition: all 300ms; cursor: pointer; border-radius: 5%; padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.digital .item .icon{background: url(../imgs/index-icon4.png); width: 63px; height: 58px;}
.digital .item:hover{background: white;}
.digital .item:hover .icon{background-image: url(../imgs/index-icon4-on.png)}
.digital .item:nth-child(1) .icon{background-image: url(../imgs/index-icon4.png);}
.digital .item:nth-child(1):hover .icon{background-image: url(../imgs/index-icon4-on.png)}
.digital .item:nth-child(2) .icon{background-image: url(../imgs/index-icon5.png);}
.digital .item:nth-child(2):hover .icon{background-image: url(../imgs/index-icon5-on.png)}
.digital .item:nth-child(3) .icon{background-image: url(../imgs/index-icon6.png);}
.digital .item:nth-child(3):hover .icon{background-image: url(../imgs/index-icon6-on.png)}
.digital .item:nth-child(4) .icon{background-image: url(../imgs/index-icon7.png);}
.digital .item:nth-child(4):hover .icon{background-image: url(../imgs/index-icon7-on.png)}
.digital .item:nth-child(5) .icon{background-image: url(../imgs/index-icon8.png);}
.digital .item:nth-child(5):hover .icon{background-image: url(../imgs/index-icon8-on.png)}
.digital .item .num{margin-top: 1rem;margin-bottom: 1rem;line-height: 1;font-size: 2rem;color: white;font-weight: 700;}
.digital .item:hover .num, .digital .item:hover .desc{color: #333;}
.digital .item .num em{font-style: normal; font-weight: normal; position: relative; top: -20px; margin-left: 8px; font-size: 18px}
.digital .item .desc{color: white;}
.digital .r{position: absolute; bottom: 0; right: 0; width: 45%; text-align: right; color: white;}
.digital .r b{font-size: 42px; margin-bottom: 15px; display: block; font-weight: bold;}

.cases{background: url(../imgs/index-bg3.png) no-repeat left top/cover; padding: 100px 0;}
.cases .title .sub-t{font-family: 'Roboto_Condensed-Regular'; font-size: 30px; line-height: 1; margin-bottom: 15px; color: var(--red);}
.cases .title .t{font-size: 2rem; font-weight: 600; line-height: 1}
.cases .title p{margin-top: 15px; font-size: 20px;}
.cases .swiper-wrap{margin-top: 5rem; height: 605px; position: relative;}
.cases .swiper{position: absolute; left: 0; top: 0; width: calc(100% + 520px);}
.cases .swiper-slide{overflow: hidden; position: relative; background: white;}
.cases .swiper-slide img{width: 100%; aspect-ratio: 1.52/1; display: block; transition: all 300ms; object-fit: cover;}
.cases .swiper-slide:hover img{transform: scale(1.1);}
.cases .swiper-slide .t{margin: 50px 40px 20px; font-size: 22px;}
.cases .swiper-slide .desc{margin: 0 40px;}
.cases .swiper-slide .times{margin: 30px 40px 50px;}
.cases .swiper-slide .times time{color: #666}
.cases .swiper-slide .times .iconfont{width: 30px; color: white !important; height: 30px; border-radius: 99px; background-color: var(--red); display: flex; align-items: center; justify-content: center;}
.cases .swiper-pagination{width: 60%; margin: 30px auto 0}
.cases .swiper-pagination-progressbar-fill{width: 100%; height: 5px; border-radius: 20px; background-color: var(--red); display: block; transform-origin: left center;}
.cases .prev-next div{width: 77px; transition: all 300ms; height: 77px; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 10px;}
.cases .prev-next div .iconfont{font-size: 30px;}
.cases .prev-next div:hover{transform: skew(-10deg);}
.cases .prev-next .prev-0{background: var(--red);font-size:1.2rem;width: 8rem;height: 3rem;display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 10px;}
.cases .prev-next .prev-0 .iconfont{background: var(--red); color: white;}
.cases .prev-next .prev-0 span{font-size:1.2rem;}
.cases .prev-next .prev-0:hover{transform: skew(-10deg);}

.cases .prev-next .prev{background: var(--red);}
.cases .prev-next .prev .iconfont{background: var(--red); color: white;}
.cases .prev-next .next{background: white;}
.cases .prev-next .swiper-button-disabled{cursor: not-allowed; opacity: .5}

.advantage{padding: 5rem 0;}
.advantage .title{margin-bottom:5rem;}
.advantage .title .sub-t{font-family: 'Roboto_Condensed-Regular'; font-size: 30px; line-height: 1; margin-bottom: 15px; color: var(--red);}
.advantage .title .t{font-size: 2rem; font-weight: 600; line-height: 1}
.advantage .title p{margin-top: 15px; font-size: 20px;}
.advantage .l{width: 40%;}
.advantage .swiper-wrap{position: relative;}
.advantage .swiper-slide{position: relative;}
.advantage .swiper-slide .img{width: 100%; aspect-ratio: .9143546441495778/1; border-radius: 0 2% 0 2%; overflow: hidden;}
.advantage .swiper-slide .img img{width: 100%; height: 100%; display: block; transition: all 300ms}
.advantage .swiper-slide .img:hover img{transform: scale(1.1);}
.advantage .swiper-slide .t{position: absolute; left: 1.5rem; bottom: 1.5rem; color: white; font-size: 1.4rem; color: white; z-index: 2}
.advantage .swiper-button-next, .advantage .swiper-button-prev{position: absolute; cursor: pointer; bottom: 0; z-index: 2; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center;}
.advantage .swiper-button-next .iconfont, .advantage .swiper-button-prev .iconfont{font-size: 30px;}
.advantage .swiper-button-prev{right: 0; color: white; background: var(--red); border-radius: 10px 0 0 0;}
.advantage .swiper-button-next{right: -3rem;background: #eff1f4; border-radius: 0 0 10px 0;}
.advantage .swiper-button-disabled{cursor: not-allowed; opacity: .5}
.advantage .r{width: 55%; flex-shrink: 0; flex-grow: 0}
.advantage .r .title{font-size: 2rem; font-weight: 600;}
.advantage .r .sub-title{font-size: 1.6rem; margin-top: 1rem; margin-bottom: 3rem;}
.advantage .r li{padding: 1rem 0; cursor: pointer;}
.advantage .r img{margin-right: 40px;}
.advantage .r .t{border-left: 3px solid #d7dbe4; padding: 0.5rem 0; padding-left: 1rem; line-height: 2}
.advantage .r .s{border-left: 3px solid #d7dbe4; padding-left: 1rem;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; line-height:1.8;}
.advantage .r .t{font-size: 1.4rem;}
.advantage .r li.on .t{border-left-color: var(--red);color: var(--red);font-weight: bold;}
.advantage .r li.on .s{border-left-color: var(--red);color: var(--red);-webkit-line-clamp: 6;}

@media (max-width: 1699px) {
  .advantage .r .sub-title{margin-bottom: 2rem;}
  .advantage .r li{padding-top: 1.6rem; }
  .advantage .r .t, .advantage .r .s{line-height: 1.5;}
  .advantage .r .sub-title{ font-size:1.6rem;}
}

@media (max-width: 1399px) {
  .core-services .swiper, .cases .swiper{width: calc(100% + 220px);}
  .core-services .swiper-slide img{width: 100px; height: 100px}
  .digital .item{padding: 20px 0}
  .cases .swiper-wrap{height: 545px}
  .advantage .swiper-button-prev, .advantage .swiper-button-next{width: 50px; height: 50px;}
  .advantage .swiper-button-next{right: -50px;}
  .advantage .r{width: 46%}
  .advantage .swiper-slide .t{font-size: 30px; left: 20px; bottom: 20px;}
  .advantage .r li{padding-top: 20px;}
}

@media (max-width: 1299px) {
  .banner .sub-title, .banner .title{font-size: 28px;}
}

@media (max-width: 1199px) {
}
@media (max-width: 991px) {
  .core-services, .digital, .cases{padding: 50px 0}
  .advantage{padding: 50px 15px;}
  .core-services .title .t, .cases .title .t{font-size: 30px;}
  .core-services .swiper-wrap, .cases .swiper-wrap{margin-top: 20px;}
  .core-services .swiper-slide{height: 390px}
  .core-services .swiper-wrap{height: 390px}
  .cases .swiper-wrap{height: 400px}
  .core-services .swiper-slide .inner{padding: 15px;}
  .core-services .swiper-slide .t{font-size: 18px; margin-bottom: 15px; text-align: center;}
  .core-services .swiper-slide li{margin-top: 10px; font-size: 14px;}
  .core-services .swiper-slide img{bottom: 10px;right: 10px;max-width: 80px;max-height: 80px;}
  .digital .container{display: block;}
  .digital .l{grid-template-columns: repeat(2, 1fr); width: 100%}
  .digital .item .num{margin-top: 15px; font-size: 28px}
  .digital .item .num em{font-size: 14px; top: -10px;}
  .digital .r{position: static; width: 100%; text-align: center; margin-top: 20px;}
  .digital .r b{display: block; font-weight: bold; font-size: 18px;}
  .cases .swiper-slide .t{margin: 20px 15px}
  .cases .swiper-slide .desc{margin: 0 15px}
  .cases .swiper-slide .times{margin: 15px}
  .advantage{display: block;}
  .advantage .l, .advantage .r{
    width: 100%;
  }
  .advantage .swiper-button-next, .advantage .swiper-button-prev{display: none}
  .advantage .r .title{font-size: 23px; margin-top: 20px;}
  .advantage .swiper-slide .t{font-size: 18px}
  .advantage .r .sub-title{font-size: 25px; margin-bottom: 10px;}
  .advantage .r img{margin-right: 15px;}
  .advantage .r .t, .advantage .r .s{padding-left: 15px;}
  .advantage .r li.on .t{font-size: 20px;}
}
@media (max-width: 767px) {
  .banner .swiper-slide {position: relative;height: 230px;}
  .bannerSwiper .swiper-wrapper{height: 230px;}
  .banner .sub-title, .banner .title{font-size: 18px;}
  .banner .title{top: calc(20% + 25px)}
  .banner .search{height: 40px; line-height: 40px; top: 60%;width: 80%;}
  .banner .search .select{width: 95px; font-size: 16px;}
  .banner .search .button{width: 50px; height: 40px;}
  .banner .swiper-pagination{bottom: 10px;}
  .banner .swiper-button-prev{left: 10px;}
  .banner .swiper-button-next{right: 10px;}
  .banner .swiper-button-prev img, .banner .swiper-button-next img{width: 30px;}
  .banner .swiper-slide img{aspect-ratio: 1.88 / 1;}
  .cases .swiper-slide img{width: 100%; aspect-ratio: unset; height: 250px;}
  .cases .swiper-wrap{height: 420px}
  .cases .prev-next{display: none}
  .core-services .swiper-slide .desc{height:7em;}
}
@media (max-width: 414px) {
}
@media (max-width: 400px) {
}
@media (max-width: 375px) {
}
@media (max-width: 320px) {
}