#npcall {
    width: 714px;
    height: 494px;
    background-image: url("../images/produce/npcpgkr/Characterall.jpg");
}

.star {
    position: relative;
    top: 270px;
    left: 26px;
    width: 150px;
    height: 130px;
    z-index: 3;
}

#npc1, #npc2, #npc3, #npc4, #npc5, #npc6, #npc7, #npc8,
#npc9, #npc10, #npc11, #npc12, #npc13, #npc14, #npc15, #npc16 {
    width: 714px;
    height: 512px;
}

#npc1 { background-image: url("../images/produce/npcpgkr/npc1.jpg"); }
#npc2 { background-image: url("../images/produce/npcpgkr/npc2.jpg"); }
#npc3 { background-image: url("../images/produce/npcpgkr/npc3.jpg"); }
#npc4 { background-image: url("../images/produce/npcpgkr/npc4.jpg"); }
#npc5 { background-image: url("../images/produce/npcpgkr/npc5.jpg"); }
#npc6 { background-image: url("../images/produce/npcpgkr/npc6.jpg"); }
#npc7 { background-image: url("../images/produce/npcpgkr/npc7.jpg"); }
#npc8 { background-image: url("../images/produce/npcpgkr/npc8.jpg"); }
#npc9 { background-image: url("../images/produce/npcpgkr/npc9.jpg"); }
#npc10 { background-image: url("../images/produce/npcpgkr/npc10.jpg"); }
#npc11 { background-image: url("../images/produce/npcpgkr/npc11.jpg"); }
#npc12 { background-image: url("../images/produce/npcpgkr/npc12.jpg"); }
#npc13 { background-image: url("../images/produce/npcpgkr/npc13.jpg"); }
#npc14 { background-image: url("../images/produce/npcpgkr/npc14.jpg"); }
#npc15 { background-image: url("../images/produce/npcpgkr/npc15.jpg"); }
#npc16 { background-image: url("../images/produce/npcpgkr/npc16.jpg"); background-repeat: no-repeat; }

.npcont { width: 70px; height: 170px; }

#npch1 { width: 70px; height: 300px; position: relative; top: 100px; left: 300px; }
#npch1:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 70px; height: 300px; background-repeat: no-repeat; }

#npch2 { width: 70px; height: 170px; position: relative; top: -170px; left: 140px; }
#npch2:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch3 { width: 70px; height: 300px; position: relative; top: -200px; left: 90px; }
#npch3:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 300px; background-repeat: no-repeat; }

#npch4 { width: 70px; height: 170px; position: relative; top: -450px; left: 470px; }
#npch4:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch5 { width: 70px; height: 300px; position: relative; top: -540px; left: 650px; }
#npch5:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 300px; background-repeat: no-repeat; }

#npch6 { width: 70px; height: 170px; position: relative; top: -770px; left: 590px; }
#npch6:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch7 { width: 70px; height: 140px; position: relative; top: -1000px; left: 290px; }
#npch7:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 144px; background-repeat: no-repeat; }

#npch8 { width: 70px; height: 200px; position: relative; top: -1000px; left: 230px; }
#npch8:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 200px; background-repeat: no-repeat; }

#npch9 { width: 70px; height: 130px; position: relative; top: -1350px; left: 560px; }
#npch9:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 130px; background-repeat: no-repeat; }

#npch10 { width: 70px; height: 300px; position: relative; top: -1410px; left: 420px; }
#npch10:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 300px; background-repeat: no-repeat; }

#npch11 { width: 70px; height: 170px; position: relative; top: -1650px; left: 220px; }
#npch11:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch12 { width: 70px; height: 300px; position: relative; top: -1640px; left: 540px; }
#npch12:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 300px; background-repeat: no-repeat; }

#npch13 { width: 70px; height: 170px; position: relative; top: -1980px; left: 360px; }
#npch13:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch14 { width: 70px; height: 200px; position: relative; top: -2120px; left: 140px; }
#npch14:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 200px; background-repeat: no-repeat; }

#npch15 { width: 70px; height: 170px; position: relative; top: -2320px; left: 500px; }
#npch15:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 174px; background-repeat: no-repeat; }

#npch16 { width: 70px; height: 130px; position: relative; top: -2490px; left: 50px; }
#npch16:hover { background-image: url("../images/produce/npcpgkr/baloom.png"); width: 74px; height: 134px; background-repeat: no-repeat; }

.go-top {
    width: 87px;
    height: 87px;
    position: fixed;
    bottom: 2em;
    right: 2em;
    text-decoration: none;
    color: white;
    background-image: url("../images/produce/npcpgkr/topoff.png");
    background-repeat: no-repeat;
    font-size: 12px;
    padding: 1em;
    display: none;
    z-index: 50;
}

.go-top:hover {
    background-image: url("../images/produce/npcpgkr/topon.png");
}