.contain {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
/* banner */
.banner-product {
  margin-top: 0;
  height: 33.75rem;
  padding: 8.75rem 0 0;
  background: url('../../static/img/pageimage/handquarterly/banner-bg.png')
    no-repeat center;
  background-size: 100% 100%;
  text-align: left;
}
.banner-product-title {
  margin-top: 0.875rem;
}
.banner-product-title img {
  width: 18.75rem;
  height: 6.375rem;
}
.banner-btn {
  background-color: transparent;
  border: 1px solid #ffffff;
  margin-top: 2.3125rem;
}
.banner-btn::after {
  color: #ffffff !important;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzFweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCAzMSA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBjbGFzcz0ic3ZnLWJ0bi1hcnJvdyIgc3Ryb2tlPSIjZmZmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzQyLjAwMDAwMCwgLTEwMDcuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY0NC4wMDAwMDAsIDk5MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05OCwyMiBMMTI3LjQzODAwMSwyMiBDMTI3Ljk5MDI4NiwyMiAxMjguNDM4MDAxLDIxLjU1MjI4NDcgMTI4LjQzODAwMSwyMSBDMTI4LjQzODAwMSwyMC43MjA1MDEzIDEyOC4zMjEwMywyMC40NTM3NTc4IDEyOC4xMTU0MzUsMjAuMjY0NDE2IEwxMjUuNjU2NjQzLDE4IEwxMjUuNjU2NjQzLDE4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==') !important;
}
/* swiper */
.service-container {
  padding: 4.375rem 0 5.625rem;
  background-color: #ffffff;
}
.service-bg {
  position: absolute;
  top: 11.875rem;
  width: 100%;
  height: 32.1875rem;
  background: url('../img/pageimage/handquarterly/service-bg1.png');
  background-size: 100% 100%;
}
.service-content {
  height: 33.75rem;
  width: 63.75rem;
  margin: 0 auto;
  margin-top: 3rem;
   -webkit-transform: perspective(450px)
}
.swiper-wrapper{
  transition: all 0.3s;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 22.5rem;
  height: 33.75rem;
  transition: all 0.3s;
}
.wrapperX2{
  transform:translate3d(-390px,0px,0px)!important;
}
.wrapperX10{
  transform:translate3d(-140px,0px,0px)!important;
}
.wrapperX1{
  transform:translate3d(-275px,0px,0px)!important;
}
.wrapperX0{
  transform:translate3d(-160px,0px,0px)!important;
}
.wrapperX3{
  transform:translate3d(-500px,0px,0px)!important;
}
.wrapperX4{
  transform:translate3d(-620px,0px,0px)!important;
}
/* .swiper-slide-active{
      box-shadow:.625rem .375rem 1.875rem rgba(10, 44, 115, 0.2);
      border-radius: .875rem .875rem .875rem .875rem;
}
.swiper-slide-active .slide-title{
  box-shadow: none;
  visibility: visible;
}
.swiper-slide-active .slide-img img{
  border-radius:0rem 0rem .875rem .875rem;
  box-shadow:none;
} */
.swiper-slide-active,.swiper-slide:hover{
      box-shadow:.625rem .375rem 1.875rem rgba(10, 44, 115, 0.2);
      border-radius: .875rem .875rem .875rem .875rem;
}
.swiper-slide-active .slide-title,.swiper-slide:hover .slide-title{
  box-shadow: none;
  visibility: visible;
}
.swiper-slide-active .slide-img img,.swiper-slide:hover .slide-img img{
  border-radius:0rem 0rem .875rem .875rem;
  box-shadow:none;
}
.slide-title {
  visibility: hidden;
  width: 22.5rem;
  height: 3.6875rem;
  background: rgba(255, 255, 255);
  box-shadow: 0rem .375rem 3.125rem rgba(10, 44, 115, 0.2);
  border-radius: .875rem .875rem 0rem 0rem;
  display: flex;
  justify-content: space-between;
}
.img-no {
  position: relative;
  width: 7.25rem;
  height: 2rem;
  margin: .875rem 0 .8125rem 1.6875rem;
  font-size: 2rem;
  font-weight: bold;
  color: rgba(9, 15, 33, 0.2);
}
.img-no::after {
  position: absolute;
  right: -1.5625rem;
  top: .6875rem;
  content: '';
  width: 1.125rem;
  height: 1.125rem;
  background: url('../img/pageimage/handquarterly/more.svg');
  background-size: 100% 100%;
}
.img-time {
  margin: 1.25rem 1.0625rem .8125rem;
  width: 5.625rem;
  height: 1.5rem;
  border: .0625rem solid #090f21;
  border-radius: .125rem;
  color: #090f21;
  line-height: 1.5rem;
}
.time-year {
    display: inline-block;
  font-size: .75rem;
  font-weight: 400;
  transform: scale(0.83);
  -webkit-transform: scale(0.83);
  -moz-transform: scale(0.83);
  -ms-transform: scale(0.83);
  -o-transform: scale(0.83);
}
.time-pageno {
  margin-left: .375rem;
  font-size: .75rem;
  font-weight: 500;
}
.slide-img{
  display: block;
  width: 22.5rem;
  height: 30rem;
  /* overflow: hidden; */
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: .625rem .375rem 1.875rem rgba(10, 44, 115, 0.2);
border-radius: .875rem;
transition: all 0.3s;
}
.function-swiper .swiper-button-prev,
.swiper-button-next {
  top: 50%;
  box-shadow: .3125rem .3125rem 1.875rem rgba(26, 39, 59, 0.16);
}
.function-swiper .swiper-button-prev {
  left: -8.125rem;
}
.function-swiper .swiper-button-next {
  right: -8.125rem;
}
/* 寰€鏈熷洖椤 */
.review-container{
  padding: 4.375rem 0 20.4375rem;
  background-color: #F5F7FA;
}
.review-bg{
position: absolute;
bottom: 0;
-webkit-transform: perspective(400px);
}
.review-bg1{
    position: absolute;
    left: 50%;
    top: -17.4375rem;
    transform: translateX(-50%);
    width: 31.5rem;
    height: 31.5rem;
    background: rgba(255,255,255);
    box-shadow: 0rem .375rem 2.5rem rgba(10,44,115,0.06);
    border-radius: 50%;
    opacity: 1;
}
.review-bg2{
    position: absolute;
    left: 50%;
    top: -25.875rem;
    transform: translateX(-50%);
    width: 48.375rem;
height: 48.375rem;
background: rgba(255,255,255);
box-shadow: 0rem .375rem 2.5rem rgba(10,44,115,0.06);
border-radius: 50%;
opacity: 0.58;
}
.review-bg3{
    position: absolute;
    left: 50%;
    top: -34.75rem;
    transform: translateX(-50%);
    width: 66.125rem;
height: 66.125rem;
border-radius: 50%;
background: rgba(255,255,255);
box-shadow: 0rem .375rem 3.75rem rgba(10,44,115,0.04);
opacity: 0.32;
}
.review-title{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12.3125rem;
}
.review-title img {
width: 7.5rem;
height: 2.5625rem;
}

.review-span {
    margin-top: .875rem;
font-size: 1.125rem;
font-weight: 400;
color: rgba(9,15,33,0.5);
}

.review-btn {
    margin-top: 1.25rem;
width: 16.25rem;
height: 3.125rem;
background: rgba(40,171,195);
box-shadow: 0rem .375rem 1.25rem rgba(10,44,115,0.14);
opacity: 1;
border-radius: 1.5625rem;
font-size: 1.125rem;
font-weight: 400;
line-height: 3.125rem;
color: #FFFFFF;
}
.review-content{
    width: 75rem;
    margin: 0 auto;
    margin-top: -0.75rem;
    -webkit-transform: perspective(450px)
}
.review-row1,.review-row2,.review-row3,.review-row4,.review-row4,.review-row5{
    width: 75rem;
display: flex;
justify-content: space-between;
}
.review-row5 .review-card:nth-child(4){
visibility: hidden;
}
.review-card{
    margin-left: auto;
    display: flex;
    margin-top: 3.75rem;
    width: 17.5rem;
    height: 22.625rem;
    overflow: hidden;
    flex-shrink: 0;
       border-radius: .875rem;
    transition: all 0.4s;
}
.review-card:hover{
  width:42.5rem;
  z-index:100 !important;
  box-shadow: 0rem .375rem 1.875rem rgba(10,44,115,0.14);
}
.review-card img{
width: 17.5rem;
height: 12.5rem;
}
.review-card-tit{
    text-align: left;
    font-size: 1.125rem;
font-weight: 500;
line-height: 1.625rem;
color: #090F21;
margin: 1.125rem 0 1.75rem 1.625rem;
}
.card-line{
    width: 17.5rem;
height: .0625rem;
background-color: #F5F7FA;
}
.card-time{
    display: flex;
}
.card-no{
    margin: 1.75rem 0 0 6.5625rem;
    font-size: .875rem;
font-weight: 400;
color: rgba(9,15,33,0.5);
}
.review-card .img-time{
    margin: 1rem 1.375rem 0rem .9375rem
}
.card-box{
      width: 17.5rem;
height: 22.625rem;
background: rgb(255, 255, 255);
  box-shadow: 0rem .375rem 1.25rem rgba(10,44,115,0.08);
    border-radius: .875rem;
}
.card-move{
    position: relative;
    margin-right: -5.8125rem;
    margin-left: -0.625rem;
    z-index: -1;
    width: 25.625rem;
    height: 22.625rem;
    background: rgba(255,255,255);
    border-radius:0 .875rem .875rem 0;
}
.card-move::before{
        position: absolute;
    left: 0;
    bottom: .5625rem;
    content: '';
    width: 2.5625rem;
    height: 6.8125rem;
    background: url('../img/pageimage/handquarterly/card-back.svg') no-repeat;
    background-position: -47px 0;
}

.review-card:first-child{
    margin-left:0!important;
}
.card-tags{
display: flex;
margin: 3.5625rem 0 1.5rem 3.9375rem;
}
.card-tag{
padding: 0 .625rem;
margin-right: .875rem;
height: 1.5rem;
border: .0625rem solid rgba(10, 15, 32, 0.3);
border-radius: .5rem;
font-size: .75rem;
font-weight: 400;
line-height: 1.5rem;
color: rgba(9,15,33,0.5);
}
.card-tag:hover{
  background-color: #4DB7DD;
  color: #FFFFFF;
  border: .0625rem solid transparent;
  transition: all 0.3s;
}
.card-para{
    margin: 0 0 2.5rem 3.9375rem;
    text-align: left;
    width: 18.9375rem;
    max-height: 9.375rem;
    font-size: .875rem;
font-weight: 400;
line-height: 1.5rem;
color: rgba(9,15,33,0.5);
}
.card-move .see-more{
    margin-left: 3.9375rem;
}