@media screen and (max-width:800px){
    body .solution-box-down-left{
        height: 100%;
    }
    body .btn-txt{
        font-size: 18px;
    }
    body .tabber .blob{
        display: none;
    }
    body .solution-box{
        height: 100%;
        width: 100%;
    }
    body .solution-box-down-left li{
        display: block;
        margin-top: 0px;
    }
    body .tabber{
        width: 77%;
        margin-top: 21px;
    }
    .solution-box .solution-box-down{
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        height: 100%;
        width: 100%;
    }
    .solution-box .solution-txt{
        font-size: 20px;
        margin-top: 14px;
        width: 100%;
    }
    .solution-box .solution-box-down-center{

        width: 100%;
        height: 317px;
        position: relative;
        left: 0;
        transform: translate(0);
        top: 0;
        margin-top: 15px;
    }
    .solution-box .more-btn{
        margin-left: 4%;
    }
    body .common-footer{
        margin-top: 0;
    }
}

body{
    /* width: 100%; */
}

.solution-box {
    /* width         : 100%; */
    display       : flex;
    flex-direction: column;
    align-items   : center;
    /* justify-content: center; */
    /* height: 100vh; */
    padding-top: 100px;
    background: url("../img/indexbj.png") no-repeat;
    background-position: bottom;

}

.solution-txt {
    width: 1238px;
    font-size:27px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color      : rgba(30, 30, 30, 1);
    text-align : center;
    margin-top: 100px;
}
.splitting .char {
    display: inline-block;
}
.animation .splitting .char {
    animation-name: bounceLetters;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    animation-delay: calc(0.25s + var(--char-index) * 0.1s);
}
@keyframes bounceLetters {
    0% {
        font-weight: 300;
        transform: scale(1, 1) translateY(0);
    }
    10% {
        transform: scale(1.1, 0.9) translateY(0);
    }
    30% {
        transform: scale(0.9, 1.1) translateY(-20px);
    }
    50% {
        font-weight: 500;
        transform: scale(1.05, 0.95) translateY(0);
    }
    57% {
        transform: scale(1, 1) translateY(-7px);
    }
    64% {
        transform: scale(1, 1) translateY(0);
    }
    100% {
        font-weight: 300;
        transform: scale(1, 1) translateY(0);
    }
}
.solution-box-down {
    width: 1238px;
    margin-top     : 112px;
    /* width          : 1101px; */
    display        : flex;
    justify-content: center;
}

.solution-box-down-left {
    width: 100%;
    position: relative;
    height: 476px;
}
.solution-box-down-left li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 48px;

}
.solution-box-down-left li:nth-child(1){
    margin-top: 0px;
}
.solution-box-down-center {
    width:600px;
    height:476px;

    position: absolute;

    left: 50%;
    transform: translate(-50%, -50%);
    top:39%;
}

.solution-box-down-center img {
    width        : 100%;
    height       : 100%;
    border-radius: 8px;
}

.solution-box-down-rig {
    /* margin-left: 5%; */
}


.solution-box-down-item {
    width:258px;
    height:45px;
    background:rgba(255,255,255,1);
    box-shadow:5px 5px 14px 2px rgba(203,203,203,0.38);
    border-radius:23px;


    position: relative;
    display: flex;


    line-height  : 0px;
    cursor       : pointer;
    align-items: center;
    /* align-items: stretch;
    justify-content: stretch;

    cursor: pointer;
    transform-style: preserve-3d;
    user-select: none; */

}
.solution-box-down-item:hover {
    background:linear-gradient(270deg,rgba(56,75,187,1),rgba(50,117,215,1));
}

/* .surface {
  border-radius: 40px;

  background-size: 100% 100%;

  padding: 20px 45px;

  pointer-events: none;
  will-change: background-size;
}
.tabber .blob {
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  position: absolute;
  z-index: -1;
  border-radius: 4rem;
  animation-duration: 0.5s;
  animation-direction: forwards;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

  filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"><defs><filter id=\"goo\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" /><feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\" result=\"goo\" /><feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\"/></filter></defs></svg>#goo");
}
.tabber .blob:before,
.tabber .blob:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  background-color: inherit;
  height: 100%;
  width: 25%;
  border-radius: 100%;
  transform: scale(1.15);

  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.tabber:hover>.blob {
  background: cornflowerblue;

}
.tabber .blob:before {
  left: 0;

}
.tabber .blob:after {
  right: 0;
}
@keyframes stretchy {
  0% {
    transform: translateX(0) scaleX(1);
  }
  50% {
    transform: translateX(0) scaleX(2);
  }
  100% {
    transform: translateX(100%) scaleX(1);
  }
}
@keyframes stretchyRev {
  0% {
    transform: translateX(100%) scaleX(1);
  }
  50% {
    transform: translateX(0) scaleX(2);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}
@keyframes pulse {
  0%,
  50% {
    transform: scaleX(1);
  }
  25%,
  75% {
    transform: scaleX(1.5);
  }
} */



.btn-dot {
    width : 10px;
    height: 10px;

    border-radius: 50%;
    margin-left: 26px;
    /* position: absolute;
    left: 55px;
    top: 26px; */

}

.btn-dot-one {
    background: rgba(91, 82, 235, 1);
}

.btn-dot-two {
    background: #1F648F;
}

.btn-dot-three {
    background: #F2D92F;
}

.btn-dot-four {
    background: #C1E728;
}

.btn-dot-five {
    background: #3B31DC;
}

.btn-dot-six {
    background: #33E1C4;
}

.btn-dot-seven {
    background: #23B5E8;
}

.btn-dot-eight {
    background: #14D56C;
}

.btn-txt {
    line-height: 18px;
    font-size:18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color      : rgba(30, 30, 30, 1);
    margin-left: 15px;
    /* width: 100%;
    height: 38px;
    left: 84px;
    user-select: none;
    
    position: absolute;
    user-select: none;
			
				cursor: pointer;
				will-change: transform;
				transform: translateZ(0px);
				transition: transform 125ms ease-in-out, filter 125ms ease-in-out; */
}


.more-btn {
    width        : 148px;
    height       : 36px;
    background   : linear-gradient(270deg, rgba(56, 75, 187, 1), rgba(50, 117, 215, 1));
    border-radius: 18px;
    font-size    : 11px;
    font-family  : Microsoft YaHei;
    font-weight  : 400;
    color        : rgba(255, 255, 255, 1);
    line-height  : 36px;
    text-align   : center;
    margin-left  : 70%;
    margin-top   : 60px;
}
.common-header{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}
.common-footer{
    width: 100%;
}