/* 全局样式 */
*{

}
body{
    /*background: url(../img/WF3A4284.jpg) center no-repeat;*/
    background-size: cover;
    background-origin: border-box;
}
.section {
    text-align: center;
    position: relative;
    padding: 0 10px;
}

/* 标题样式 */
.page-title {
  margin: 20px 0;
}

/* 正文样式 */
.page-text {
    font-size: 24px;
    color: #333;
    transition: all 1s ease;
    margin: 5px 0;
}
.page-text-engines{
    margin: 5px 0;
    color: white;
    font-size: 14px;
}

/* 图片容器样式 */
.image-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}





.image-container img {
    height: 260px;
    border-radius: 10px;
    margin: 0 ;
    object-fit: cover;
    opacity: 0;
    margin: 0 10px;
    transition: all 1s ease;
}

img.image-1{
    transform: translateY(300px);
}
.active img.image-1{
    transform: translateY(0px);
    opacity: 1;
}
img.image-2{
    transform: translateY(260px);
}
.active img.image-2{
    transform: translateY(0px);
    opacity: 1;
}
img.image-2{
    margin-top: 60px;
}
img.image-2-3{
    margin-top: 60px;
}

img.image-2-3{
    transform: translateX(-100px);
}
.active img.image-2-3{
    transform: translateX(0px);
    opacity: 1;
}

img.image-2-4{
    transform: translateX(100px);
    margin-left: 30px;
}
.active img.image-2-4{
    transform: translateX(0px);
    opacity: 1;
}


img.image-3-1{
    transform:rotate(180deg);
}
.active img.image-3-1{
    transform:rotate(0);
    opacity: 1;
}

img.image-3-2{
    margin-top: 60px;
    transform:rotate(-180deg);
}
.active img.image-3-2{
    transform:rotate(0);
    opacity: 1;
}

img.image-4-1{
    margin-top: 60px;
    transform:rotate(-180deg);
}
.active img.image-4-1{
    transform:rotate(0);
    opacity: 1;
}



img.image-4-2{
    margin-top: 60px;
    transform:rotate(-180deg);
}
.active img.image-4-2{
    transform:rotate(0);
    opacity: 1;
}



img.image-5-1{
    margin-top: 60px;
    transform:scale(1.8);
}
.active img.image-5-1{
    transform:scale(1);
    opacity: 1;
}

img.image-5-2{
    margin-top: 60px;
    transform:scale(1.8);
}
.active img.image-5-2{
    transform:scale(1);
    opacity: 1;
}


img.image-6-1{
    margin-top: 100px;
    transform:skew(90deg);
}
.active img.image-6-1{
    transform:skew(0deg);
    opacity: 1;
}
img.image-6-2{
    margin-top: 100px;
    transform:skew(-90deg);
}
.active img.image-6-2{
    transform:skew(0deg);
    opacity: 1;
}


img.image-7-1{
    margin-top: 100px;
    transform: scale(1.6);
}
.active img.image-7-1{
    transform: scale(1);
    opacity: 1;
}
img.image-7-2{
    margin-top: 100px;
    transform: scale(1.6);
}
.active img.image-7-2{
    transform: scale(1);
    opacity: 1;
}



img.image-8-1{
    margin-top: 100px;
    transform:translateY(400px);
}
.active img.image-8-1{
    transform: translateY(0);
    opacity: 1;
}

img.image-8-2{
    margin-top: 100px;
    transform:translateY(-400px);
}
.active img.image-8-2{
    transform: translateY(0);
    opacity: 1;
}

.han{
   overflow: hidden;
    color: white;
}
.han p{
     margin: 0;
}