body{margin: 30px auto;} .box{ width: 60%; border-radius: 5%; background-color:bisque; margin:10% auto; } .popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: .6s; } .is-show { opacity: 1; visibility: visible; } .popup-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; height: 80%; padding: 5%; background-color: #fff; z-index: 2; } .close-btn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; z-index: 9999; } .close-btn i { font-size: 20px; color: #333; } .black-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1; cursor: pointer; } .hidden{ visibility: hidden; transition: .6s; opacity: 0; } /*======================*/ h1{text-align: center;} p{text-align: center; color: #333;} .box img{ width: 100%; } .popup h2{ color: #111; font-size: 3ex; text-align: center; } .moveObj{ position: absolute; width: 80px; } #niku1{top:50%;left:15%;} #niku2{top:70%;left:75%;} #sakana1{top:60%;left:45%;} #sakana2{top:70%;left:25%;} #ninnzinn1{top:50%;left:65%;} #ninnzinn2{top:80%;left:55%;} #ninnzinn3{top:75%;left:10%;} #gomibako{ width: 50%; transform: translate(50%,0); } video{ width: 80%; margin:0 10%; }