.outer {
    font-family: "钉钉进步体 Regular";
    position: relative;
    left: 50%;
    transform: translate(-50%, 9%);
    width: 70%;
    height: 320px;
}
.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 1.5s;
}
img{
    width: 100%;
}
.image1 {
    z-index: 1;
}
.image2 {
    position: absolute;
    left: 5px;
    top: 95px;
    height: 123px;
    width: 250px;
    border-radius: 12px 12px 0 0;
    z-index: 2;
    border: #ddd 1px solid;
    overflow: hidden;
    transition: transform 1.3s, height 1.3s;
}
.image3 {
    z-index: 100;
    top: 92px;
}
.image1.move {
  transform: translateY(292px);
}
.image2.move {
  height: 365px;
  transform: translateY(-50px);
  transition: transform .9s, height 1.05s;
}
.image3.move {
  transform: translateY(292px);
}

.comments-main{
    background: #fff;
    border-radius: 0 0 12px 12px;
}
[data-theme="dark"] .comments-main {
    background: rgba(22, 22, 22, 0.8);
}
.title4{
    border-top: #ddd 1px solid;
    text-align: center;
    margin: -8px;
    padding-top: 10px;
}
.comments{
    text-align: center;
    border-bottom: #ddd 1px solid;
    padding-bottom: 20px;
    background-color: #eee;
    margin-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    border-top: #ddd 1px solid;
    padding-top: 20px;
}
[data-theme="dark"] .comments {
    background: #3f3b3b9e;
    border-bottom: #0b0a0a 1px solid;
    border-top: #0b0a0a 1px solid;
}
.bottomcontent{
    text-align: center;
    margin-top: 10px;
}
.bottomimg{
    width: 100%;
    margin: 5px auto 5px auto;
    display: block;
    pointer-events: none;
}
.bottomhr{
    font-size: 12px;
    text-align: center;
    color: #999;
    padding-bottom: 9px;
}