main{
    background:#F1C588 url("/sm/mingshu/index/main.png") no-repeat center top 0/100% auto;
}
#banner{
    position:relative;
    padding-top:100%;
}
#banner .top{
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#banner .bottom{
    width:90%;
    display:block;
    margin:0 auto;
}
#banner .book{
    position:absolute;
    top:11%;
    left:50%;
    width:50%;
    transform:translateX(-50%);
}
#banner .title{
    position:absolute;
    top:-17.5%;
    left:-8%;
    width:120%;
    max-width:unset;
}
#book img:last-child{
    position:absolute;
    top:0%;
    left:0%;
    right:0%;
}
#item{
    position:absolute;
    top:11%;
    left:3%;
    right:3%;
    bottom:10%;
}
#item img{
    position:absolute;
    width:20%;
    opacity:0;
}
#item img:nth-child(1){
    top:0;
    left:0;
    animation:animationItem 12s linear 0s infinite;
}
#item img:nth-child(2){
    top:25%;
    left:0;
    animation:animationItem 12s linear 4s infinite;
}
#item img:nth-child(3){
    bottom:0;
    left:0;
    animation:animationItem 12s linear 8s infinite;
}
#item img:nth-child(4){
    top:0;
    right:0;
    animation:animationItem 12s linear 8s infinite;
}
#item img:nth-child(5){
    top:25%;
    right:0;
    animation:animationItem 12s linear 4s infinite;
}
#item img:nth-child(6){
    bottom:0;
    right:0;
    animation:animationItem 12s linear 0s infinite;
}
@keyframes animationItem{
    0%{
        opacity:0;
        transform:scale(0.8);
    }
    16.66%{
        opacity:1;
        transform:scale(1.1);
    }
    33.33%{
        opacity:0;
        transform:scale(0.8);
    }
    100%{
        opacity:0;
    }
}
#button{
    width:90%;
    margin:1rem auto 1rem;
    animation:animationButton 2s linear infinite;
}
#detail1{
    position:relative;
}
#detail1 .person{
    position:absolute;
    top:26%;
    left:11.5%;
    width:27.3%;
    padding-top:50%;
}
#detail1 .person img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
}
#detail1 .person img:nth-child(1){
    animation:animationDetail1 6s linear 0s infinite;
}
#detail1 .person img:nth-child(2){
    animation:animationDetail1 6s linear 2s infinite;
}
#detail1 .person img:nth-child(3){
    animation:animationDetail1 6s linear 4s infinite;
}
#detail1 .label{
    position:absolute;
    top:20%;
    left:50%;
    right:20%;
    bottom:26%;
}
#detail1 .label img{
    position:absolute;
}
#detail1 .label img:nth-child(1){
    top:0;
}
#detail1 .label img:nth-child(2){
    top:0;
    opacity:0;
    animation:animationDetail1 6s linear 0s infinite;
}
#detail1 .label img:nth-child(3){
    top:42%;
}
#detail1 .label img:nth-child(4){
    top:42%;
    opacity:0;
    animation:animationDetail1 6s linear 2s infinite;
}
#detail1 .label img:nth-child(5){
    bottom:0;
}
#detail1 .label img:nth-child(6){
    bottom:0;
    opacity:0;
    animation:animationDetail1 6s linear 4s infinite;
}
@keyframes animationDetail1{
    0%{
        opacity:1;
    }
    33.32%{
        opacity:1;
    }
    33.33%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
#detail2{
    position:relative;
    margin-top:1rem;
}
#detail2 > div{
    position:absolute;
    top:16.5%;
    height:16%;
    left:10.5%;
    right:10.5%;
    overflow:visible;
}
#detail2 .name img{
    position:absolute;
    width:30%;
    opacity:0;
}
#detail2 .name img:nth-child(1){
    left:-3%;
    bottom:-7%;
    animation:animationDetail2Name 6s linear 0s infinite;
}
#detail2 .name img:nth-child(2){
    top:-8%;
    left:22%;
    animation:animationDetail2Name 6s linear 2s infinite;
}
#detail2 .name img:nth-child(3){
    top:27%;
    right:-2%;
    animation:animationDetail2Name 6s linear 4s infinite;
}
@keyframes animationDetail2Name{
    0%{
        opacity:1;
        transform:scale(0.9);
    }
    8%{
        transform:scale(1.1);
    }
    16%{
        transform:scale(0.9);
    }
    24%{
        transform:scale(1.1);
    }
    33.32%{
        opacity:1;
        transform:scale(0.9);
    }
    33.33%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
#detail2 .info img{
    position:absolute;
    top:18%;
    left:20%;
    width:60%;
    opacity:0;
}
#detail2 .info img:nth-child(1){
    animation:animationDetail2Info 6s linear 0s infinite;
}
#detail2 .info img:nth-child(2){
    animation:animationDetail2Info 6s linear 2s infinite;
}
#detail2 .info img:nth-child(3){
    animation:animationDetail2Info 6s linear 4s infinite;
}
@keyframes animationDetail2Info{
    0%{
        opacity:1;
    }
    33.32%{
        opacity:1;
    }
    33.33%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
#detail3{
    position:relative;
    margin-top:1rem;
}
#detail3 .icon{
    position:absolute;
    top:15%;
    left:10%;
    right:10%;
    bottom:23%;
}
#detail3 .icon img{
    display:block;
    position:absolute;
    top:0;
    left:5%;
    width:22%;
}
#detail3 .icon img:nth-child(1){
    top:3.8%;
    animation:animationDetail3Icon 10s linear 0s infinite;
}
#detail3 .icon img:nth-child(2){
    top:24%;
    animation:animationDetail3Icon 10s linear 2s infinite;
}
#detail3 .icon img:nth-child(3){
    top:44.5%;
    animation:animationDetail3Icon 10s linear 4s infinite;
}
#detail3 .icon img:nth-child(4){
    top:65%;
    animation:animationDetail3Icon 10s linear 6s infinite;
}
#detail3 .icon img:nth-child(5){
    top:85%;
    animation:animationDetail3Icon 10s linear 8s infinite;
}
@keyframes animationDetail3Icon{
    0%{
        transform:scale(1);
    }
    10%{
        transform:scale(1.1);
    }
    20%{
        transform:scale(1);
    }
}
#detail4{
    position:relative;
    margin-top:1rem;
}
#detail4 > div{
    position:absolute;
    top:42%;
    left:10%;
    right:10%;
    bottom:27%;
    overflow:visible;
}
#detail4 .icon img{
    position:absolute;
    width:10%;
    left:45%;
}
#detail4 .icon img:nth-child(1){
    top:2%;
    animation:animationDetail4 10s linear 0s infinite;
}
#detail4 .icon img:nth-child(2){
    top:22%;
    animation:animationDetail4 10s linear 2s infinite;
}
#detail4 .icon img:nth-child(3){
    top:42%;
    animation:animationDetail4 10s linear 4s infinite;
}
#detail4 .icon img:nth-child(4){
    top:62%;
    animation:animationDetail4 10s linear 6s infinite;
}
#detail4 .icon img:nth-child(5){
    top:82%;
    animation:animationDetail4 10s linear 8s infinite;
}
#detail4 .item img{
    position:absolute;
    width:45%;
}
#detail4 .item img:nth-child(1){
    top:3%;
    right:0;
    animation:animationDetail4 10s linear 0s infinite;
}
#detail4 .item img:nth-child(2){
    top:23%;
    left:0;
    animation:animationDetail4 10s linear 2s infinite;
}
#detail4 .item img:nth-child(3){
    top:43%;
    left:0;
    animation:animationDetail4 10s linear 4s infinite;
}
#detail4 .item img:nth-child(4){
    top:63%;
    right:0;
    animation:animationDetail4 10s linear 6s infinite;
}
#detail4 .item img:nth-child(5){
    top:83%;
    left:0;
    animation:animationDetail4 10s linear 8s infinite;
}
@keyframes animationDetail4{
    0%{
        transform:scale(1);
    }
    10%{
        transform:scale(1.05);
    }
    20%{
        transform:scale(1);
    }
}
#detail5{
    position:relative;
    margin-top:1rem;
}
#detail5 .icon{
    position:absolute;
    top:60%;
    left:10%;
    right:10%;
    bottom:15%;
    overflow:visible;
}
#detail5 .icon img{
    position:absolute;
    width:20%;
    animation:animationDetail5Icon 3s linear 0s infinite;
}
#detail5 .icon img:nth-child(1){
    top:40%;
    left:0%;
}
#detail5 .icon img:nth-child(2){
    top:10%;
    left:25%;
}
#detail5 .icon img:nth-child(3){
    top:10%;
    right:25%;
}
#detail5 .icon img:nth-child(4){
    top:40%;
    right:0%;
}
@keyframes animationDetail5Icon{
    0%{
        transform:translateY(-20%);
    }
    50%{
        transform:translateY(20%);
    }
    100%{
        transform:translateY(-20%);
    }
}