.layout_content {
    height: 100vh;
    width: 100%;
    /* background-color: red; */
    position: relative;
}
.tab_click.my-container:after{
    display: none;
}

.bjimg_box {
    width: 100%;
    height: 100%;
    position: relative;
}

.bjimg_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s;

}

.bjimg_box>.active {
    opacity: 1;
}

.layout_mb {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}

.blue_cor {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: quan 20s infinite linear;
    transform-origin: center;
}

.green_cor {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: quan 20s infinite linear;
    transform-origin: center;

}
.blue_cor path {
    animation: svg03 6s infinite linear;
}
.green_cor path {
    animation: svg04 6s infinite linear;
}


@keyframes svg03 {

    0%,
    100% {
        d: path("M301.360,1.713 C346.723,-4.469 401.778,9.293 450.529,28.157 C499.776,47.491 542.719,71.926 575.237,97.850 C641.671,151.022 663.781,207.673 675.137,301.843 C684.300,393.939 679.857,505.061 626.431,573.540 C600.348,608.375 562.835,633.322 517.632,648.390 C472.884,663.888 420.445,669.508 375.008,675.620 C279.897,683.837 232.626,694.191 166.669,641.469 C134.686,616.051 96.868,573.763 64.455,524.951 C32.285,476.368 5.519,421.261 1.231,375.490 C-4.678,328.187 12.511,294.756 36.278,263.100 C60.246,231.632 90.791,201.939 116.314,166.574 C169.367,97.742 206.208,9.891 301.360,1.713 Z");
    }

    50% {
        d: path("M305.360,10.713 C350.723,4.531 402.249,14.136 451.000,33.000 C500.247,52.333 577.483,78.076 610.000,104.000 C676.434,157.172 675.644,180.830 687.000,275.000 C696.163,367.096 708.426,497.521 655.000,566.000 C628.917,600.835 519.204,622.932 474.000,638.000 C429.252,653.499 390.438,652.889 345.000,659.000 C249.890,667.217 208.958,629.721 143.000,577.000 C111.017,551.581 78.413,508.812 46.000,460.000 C13.830,411.417 5.288,365.771 1.000,320.000 C-4.908,272.697 21.233,248.656 45.000,217.000 C68.967,185.532 89.478,104.366 115.000,69.000 C168.053,0.168 210.208,18.891 305.360,10.713 Z");
    }
}



@keyframes svg04 {

    0%,
    100% {
        d: path("M348.773,699.698 C446.860,701.967 494.289,616.360 556.152,551.987 C586.163,518.719 620.672,491.804 648.660,462.343 C676.466,432.666 697.751,400.443 696.996,351.476 C697.725,304.254 676.541,244.988 649.109,191.783 C621.455,138.316 587.553,90.909 557.728,61.381 C496.253,0.178 446.822,5.476 348.773,3.253 C301.688,4.423 247.508,4.310 200.079,15.144 C152.234,25.487 111.140,46.777 80.615,79.441 C18.411,143.413 1.471,256.400 0.551,351.476 C1.638,448.914 17.896,509.236 79.807,570.952 C110.122,601.057 151.251,630.804 199.387,656.044 C247.069,680.750 301.757,700.949 348.773,699.698 L348.773,699.698 Z");
    }

    50% {
        d: path("M381.773,676.698 C479.860,678.967 555.137,672.373 617.000,608.000 C647.012,574.732 669.012,557.461 697.000,528.000 C724.806,498.324 715.755,419.968 715.000,371.000 C715.729,323.778 738.432,264.205 711.000,211.000 C683.346,157.533 677.826,91.528 648.000,62.000 C586.525,0.797 561.048,3.223 463.000,1.000 C415.915,2.170 308.429,55.166 261.000,66.000 C213.154,76.343 120.525,41.336 90.000,74.000 C27.796,137.971 0.920,238.924 -0.000,334.000 C1.087,431.438 3.089,529.284 65.000,591.000 C95.315,621.104 173.864,615.760 222.000,641.000 C269.682,665.706 334.757,677.949 381.773,676.698 L381.773,676.698 Z");
    }
}

@keyframes quan {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(359deg)
    }
}
.tab_center{
    width: 450px;
    position: absolute;
    left: 50%;
    top: 50%;
  
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* transition: 1.5s; */
    -webkit-transform: translate(-50%,-25%);
    -webkit-transform: translate(-50%,-25%);
    transform: translate(-50%,-25%);
  
   

}
.tab_center.active{
    opacity: 1;
    visibility: visible;
    transition:  .8s;
    -webkit-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform:  translate(-50%,-50%);
}
.tab_centericon{
    width: 50px;
    height: 50px;
}
.tab_centericon>img{
    width:100%;
    height:100%;
}
.tab_centertit{
    color: #FFF;
text-align: center;
font-family: Microsoft YaHei;
font-style: normal;
font-weight: 700;
line-height: 54px; /* 150% */
margin-top: 10px;
margin-bottom: 32px;
}
.tab_centerxq{
    margin-bottom: 32px;
    color: #FFF;
text-align: center;
font-family: Microsoft YaHei;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 162.5% */
-webkit-line-clamp: 3;/*设置了最大显示行数为2行，超出的内容将被隐藏。*/
display: -webkit-box;/*声明将元素以flex盒子布局方式显示*/
-webkit-box-orient: vertical;/*设置了盒子的主轴方向为垂直方向*/
overflow: hidden;/*声明当内容溢出容器时进行隐藏。*/
text-overflow: ellipsis;/*声明当文本溢出容器时使用省略号表示*/
}
.tab_centerbutoon{
    display: flex;
padding: 8px 30px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 40px;
border: 1px solid #FFF;
cursor: pointer;

}
.tab_centerbutoon span {
    padding-right: 26px;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    background-image: url(../images/more_jt.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right;
}
.tab_centerbutoon:hover{
    background-color: var(--dark--blue);
    border-color: var(--dark--blue);
}
.tab_clickever{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tab_click{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;

}
.tab_clickever span{
    color: #FFF;
text-align: center;
font-family: Microsoft YaHei;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 5px;

}
.tab_clickever.active img{
    transform: translateY(-10px);
    transition: .3s;
}
@media (max-width:1218px){

    .tab_click{
bottom: 30px;
    }
    .blue_cor,.green_cor{
        width: 480px;
        height: 480px;
    }
    .tab_center {
        width: 400px;
    }
    .tab_clickever img{
        width: 50px;
        height: 50px;
    }
    .tab_clickever span{
        font-size: 16px;
    }
    
}
.tabs_mabileclick{
    position: absolute;
    /* bottom: 30px; */
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    /* display: flex; */
    justify-content: space-between;
    cursor: pointer;
    display: none;
}
.about_next{
    background-image: url(../images/jt1.svg);
    width: 46px;
    height: 46px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    outline: 0;
    z-index: 9;
    cursor: pointer;
    margin-left: 16px;
    transition: .3s;


    
}
.about_next:hover{
    background-color: #00A3FF;
    background-image: url(../images/jt_hover.png);
    transition: .3s;
}
.about_prev:hover{
    background-color: #00A3FF;
    background-image: url(../images/jt1_hover.png);
   
    transition: .3s;
}
.about_prev{
    background-image: url(../images/jt.png);
    width: 46px;
    height: 46px;
    background-color: #fff;
    border: 1px solid #ccc;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    transition: .3s;
}
.tabs_mabileclick.my-container:after{
    display: none;
}
@media (max-width:968px){
    .tab_click{
        /* display: none; */
        overflow-x: auto;
    }
    .tabs_mabileclick{
        display: none;
    }
    /* .tabs_mabileclick{
        display: flex;
    } */
    .tab_clickever {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 30px;
    }
   
 
}
@media (max-width:767px){
    .tab_click{
        justify-content: space-between;
    }
}
@media (max-width:716px){
    .blue_cor, .green_cor {
        width: 400px;
        height: 400px;
    }
    .tab_center {
        width: 350px;
    }
 
}
@media (max-width:572px){
    .blue_cor, .green_cor {
        width: 350px;
        height: 350px;
    }
    .tab_center {
        width: 300px;
    }
    .tab_centerxq {
        margin-bottom: 15px;}
        .tab_centertit {
           
            margin-bottom: 15px;}
 
}
@media (max-width:416px){
    .blue_cor, .green_cor {
        width: 300px;
        height: 300px;
    }
    .tab_center {
        width: 246px;
    }
    .tab_centerbutoon {
        padding: 8px 15px;
    }
    .tab_centertit{
        margin: 0;
    }
 
 
}