.people-width {width:60%;}
.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.svgstyle {overflow:hidden;width:40%;}
.slider-thumb::before {
  position: absolute;
  content: ""; opacity: 0.9; 
  left: 30%;
  top: 20%;
  width: 100px;
  height: 100px;
   background: linear-gradient(0deg, rgba(238,219,247,1) 0%, rgba(204,235,249,1) 100%);
   border-radius: 100% 0% 13% 87% / 31% 30% 70% 69%;
  animation: sliderShape 5s linear infinite;
  display: block;
}
.client_container {overflow:hidden;}
.slider-thumb2::before {
  position: absolute;
  content: "";
  left: 5%;
  top: -2%;
  width: 80px;
  height: 80px;
   background: linear-gradient(0deg, rgba(227,223,189,1) 0%, rgba(133,223,230,1) 100%);
 opacity:0.9; 
   border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
  animation: sliderShape2 6s linear infinite;
  display: block;
}


.slider-thumb3::before {
  position: absolute;
  content: ""; opacity:0.9; 
  right: 30%;
  top: 50%;
  width: 120px;
  height: 110px;
   background: linear-gradient(0deg, rgba(218,244,224,1) 0%, rgba(238,200,222,1) 100%);
   border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
  animation: sliderShape3 7s linear infinite;
  display: block;
}


@keyframes sliderShape{
  0%,100%{
  border-radius: 100% 0% 13% 87% / 31% 30% 70% 69%

;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
    transform: translateX(42px); }
  34%{
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
	transform: translateY(22px);
	border-radius: 100% 100% 100% 100% / 100% 100% 60% 60% ;
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
       border-radius: 40% 30% 46% 54% / 30% 29% 71% 70%;

    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}



@keyframes sliderShape2{
  0%,100%{
  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
    transform: translateX(10px);  }
  34%{
      border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
	transform: translateY(80px);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
	transform: translateY(60px);

  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
		transform: translateY(90px);

  }
}


@keyframes sliderShape3{
  0%,100%{
  border-radius: 30% 70% 36% 44% / 30% 29% 71% 70%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
    transform: translateX(30px);  }
  34%{
      border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
	transform: translateY(30px);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
	transform: translateY(60px);

  }
  67%{
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
		transform: translateY(90px);

  }
}


.people-flex {width:10%;}
.people-img {height:15vh;margin:0 auto;}

.people1 {
animation-name: peoplea;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 5s;
animation-fill-mode: forwards;
}

.people2 {
  animation-name: peopleb;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  }


.people3{
      animation-name: peopleb;
      animation-duration: 5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      animation-delay: 1s;
      animation-fill-mode: forwards;
      }

 .people4 {
animation-name: peoplea;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 4s;
animation-fill-mode: forwards;
}

.people5 {
  animation-name: peopleb;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  }

  .people6 {
    animation-name: peoplea;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    }

    .people7 {
      animation-name: peopleb;
      animation-duration: 5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      animation-delay: 5s;
      animation-fill-mode: forwards;
      }

      .people8 {
        animation-name: peoplea;
        animation-duration: 5s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-delay: 5s;
        animation-fill-mode: forwards;
        }


        .people9 {
          animation-name: peopleb;
          animation-duration: 5s;
          animation-timing-function: ease;
          animation-iteration-count: infinite;
          animation-delay: 1s;
          animation-fill-mode: forwards;
          }


          .people10 {
            animation-name: peoplea;
            animation-duration: 5s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            }
@keyframes peoplea {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes peopleb {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.moveleftbottom {  
animation: leftbottom 6s ease infinite;}

@keyframes leftbottom{
  0%,100%{ transform: translate(0);}
  50% {transform: translate(42px, 18px);}
 }

img.shining { -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
	animation: shining22 3s ease infinite;}

@keyframes shining22{
  50% {transition: mask-position 2s ease,
       -webkit-mask-position 2s ease;
        -webkit-mask-position: 120%;
      mask-position: 120%;
    opacity: 1;}
 }


.carousel-cell {
  width: 28%;
  height: 250px;
  margin-right: 2%;
  color:#999;
  padding:1%;
  background: #D9FBFF;
}

.carousel-cell.is-selected {  background:#F6D2D6;

}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}


.imagegroup {
   display: flex;
   width: 95%;
  }

.imagegroup img{
  flex-shrink: 0;
  object-fit: cover;
  margin:2% 3%;
  width:12%;
}

.imagegroup {
   animation: travel 30s linear infinite;
  }

@keyframes travel {
   0%{
      transform: translate3d(0,0,0);
    }
   100% {
      transform: translate3d(-100%,0,0);
    }
 }

#line1 {
	animation: pulse 10s infinite;
}


@keyframes pulse {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 1; }
100% {opacity: 0;}
}

#line1:before {
	content: "";
	animation: swap1 10s linear infinite;
	font-weight:600;
}


#line1:after {
    font-weight:600;
	content: "";
	animation: swap2 10s linear infinite;

}


@keyframes swap1 {
  0% { content:"貝姆專注於"; }
  100% { content:"致力於打造"; }
}

@keyframes swap2 {
  0% { content:"網站、行動及軟體"; }
  100% { content:"高品質網站及產品"; }
}

.height-rwd {height:100vh;}



.card
{
    background:#fae6e3;
  background-size: cover;
  border-radius:1.25rem;
  color:#fff;
  filter:drop-shadow(2px 2px 2px #333);
  font-weight:bold;
  height:75%;
  text-align:Center;border:2px solid #F7E5E3;
  padding-top:50%;
  position:Relative;transition:all 1s;
  width:80%;
  }

.showrwd {visibility:hidden;}
.showrwd::after {visibility:hidden;}
.card:hover .showrwd{visibility:visible; animation: fadeIn 1s;}

.card:hover::after .showrwd{animation: fadeOut 1s;}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.linkcircle{ visibility:hidden;color:#fff;}
.card:hover .linkcircle{visibility:visible;animation: fadeIn 3s;}

.card1:hover,.card2:hover,.card3:hover, .card4:hover {transform: scale(1.1);}

.card1 {background-image:url("../png/card1d.png");
transform: rotate(-15deg);z-index:18; }

.card2 { background-image:url("../png/card2d.png");transform: rotate(10deg);z-index:15;  }

.card3 {background-image:url("../png/card3d.png");transform: rotate(5deg);z-index:13;  }

.card4 {background-image:url("../png/card4d.png");transform: rotate(-10deg);z-index:16;  }


.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover  {
  background-color: grey;
  background-blend-mode: multiply;
  z-index:18;
  }
  
.what-do {margin:8%;min-height:180px;}

.to-do-item {width:90%;margin:0 auto;border-radius: 39% 52% 30% 70% / 60% 40% 60% 40%;  background-color: #f0d9d9;aspect-ratio: 1 / 1; align-content: center;display: flex;justify-content: center;align-items: center;box-shadow: 3px 3px 2px #999;
  mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
  mask-size: 800%;
  mask-position: 0;
}

.to-do-item:hover {
  transition: mask-position 1s ease;
  mask-position: 120%;
  opacity: 1;
}


@media(max-width: 767px)
{

  .people-flex {width:20%;}
.people-width {width:100%;}
  .people-img {opacity:0.5}
  .a1{min-height:500px !important;}
  .a2{width: 100%;display: block;}
  .a21{width: calc(100% - 32px);padding: 0px 16px 0px 16px;justify-content:flex-start;align-items:flex-start;position: absolute;left:0px;top: 0px;z-index: 2;}

  .a211{}
  .a211_1{font-size: 24px;}
  .a211_2{font-size: 14px;}
  .a211_3{padding: 30px 0px 0px 0px;}

  .a22{width:100%;padding: 0px 0px 0px 0px;justify-content: flex-end; position: absolute;right:0px;top:120px;}
  .a221{width:360px;}
  .pt-80a {margin-top:80px;}
  .height-rwd {height:50vh;}

  .imagegroup img{
    width:22%;
   }
}