.hidden{
    display: none;
}
.show {
    display: block;
}
/* สถานะเริ่มต้น: ซ่อน element */
.p-component {
   display: none; 
   
}
.p-component:hover {
  
}

/* สถานะที่ต้องการให้แสดงผล */
.p-component.show {
    
     display: block;
}
.hover-image-box {
    position: absolute;
    top: 120px;
    left: 25px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_1.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.hover-image-box:hover {
     background-image:url('toc_menu_1_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}

.menu-box-1 {
    position: absolute;
    top: 120px;
    left: 25px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_1.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-1:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_1_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}

.menu-box-2 {
    position: absolute;
    top: 185px;
    left: 25px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_2.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-2:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_2_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-3 {
    position: absolute;
    top: 230px;
    left: 45px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_3.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-3:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_3_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-4 {
    position: absolute;
    top: 275px;
    left: 25px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_4.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-4:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_4_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-5 {
    position: absolute;
    top: 320px;
    left: 45px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_5.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-5:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_5_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-6 {
    position: absolute;
    top: 365px;
    left: 25px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_6.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToRight;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-6:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_6_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}

.menu-box-7 {
    position: absolute;
    top: 124px;
    left: 250px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_7.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToLeft;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-7:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_7_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-8 {
    position: absolute;
    top: 173px;
    left: 240px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_8.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
     animation-name: moveToLeft;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-8:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_8_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-9 {
    position: absolute;
    top: 224px;
    left: 256px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_9.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
     animation-name: moveToLeft;
     animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-9:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_9_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-10 {
    position: absolute;
    top: 270px;
    left: 247px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_10.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToLeft;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-10:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_10_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-11 {
    position: absolute;
    top: 314px;
    left: 260px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_11.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
    animation-name: moveToLeft;
      animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-11:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_11_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}
.menu-box-12 {
    position: absolute;
    top: 356px;
    left: 252px;
    width: 220px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('toc_menu_12.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
    cursor: pointer;
     animation-name: moveToLeft;
       animation-duration: 1s;
    transition: background-image 0.5s ease-in-out; /* เพิ่ม animation ให้การเปลี่ยนรูปภาพดูนุ่มนวล */
}

/* Pseudo-class สำหรับเมื่อเมาส์ชี้ (hover) */
.menu-box-12:hover {
     animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
     background-image:url('toc_menu_12_hover.png'); /* รูปภาพที่ต้องการให้แสดงเมื่อ hover */
}


.cover-object01{
    position: absolute;
         top: 29px;
    left: 112px;
    width: 180px;
    height: 180px;
    background-image:url('cover-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.cover-object02{
    position: absolute;
    top: 428px;
    left: 248px;
    width: 120px;
    height: 120px;
    background-image:url('cover-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.cover-object03{
    position: absolute;
       top: 549px;
    left: 165px;
    width: 288px;
    height: 98px;
    background-image:url('cover-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.back-object01{
    position: absolute;
    top: 28px;
    left: 165px;
    width: 288px;
    height: 98px;
    background-image:url('back_object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (76) */
/* Page (76) */
.p-1-object01{
    position: absolute;
    top: 67px;
    left: 15px;
    width: 193px;
    height: 210px;
    background-image:url('p-1-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-2-object01{
    position: absolute;
     top: 66px;
    left: 41px;
    width: 58px;
    height: 78px;
    background-image:url('p-2-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-2-object02{
    position: absolute;
         top: 66px;
    left: 80px;
    width: 287px;
    height: 69px;
    background-image:url('p-2-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-2-object03{
    position: absolute;
    top: 138px;
    left: -32px;
    width: 306px;
    height: 209px;
    background-image:url('p-2-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-3-object01{
    position: absolute;
    top: 59px;
    left: 29px;
    width: 189px;
    height: 215px;
    background-image:url('p-3-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-4-object01{
    position: absolute;
    top: 59px;
    left: 29px;
    width: 189px;
    height: 215px;
    background-image:url('p-4-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-5-object01{
    position: absolute;
   top: 59px;
    left: 31px;
    width: 189px;
    height: 215px;
    background-image:url('p-5-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (6) */
.p-6-object01{
    position: absolute;
   top: 59px;
    left: 14px;
    width: 193px;
    height: 165px;
    background-image:url('p-6-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-6-object02{
    position: absolute;
   top: 160px;
    left: 302px;
    width: 173px;
    height: 188px;
    background-image:url('p-6-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-6-object03{
    position: absolute;
      top: 335px;
    left: 24px;
    width: 169px;
    height: 174px;
    background-image:url('p-6-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-6-object04{
    position: absolute;
      top: 447px;
    left: 290px;
    width: 188px;
    height: 168px;
    background-image:url('p-6-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
/* Page (7) */
.p-7-object01{
    position: absolute;
   top: 59px;
    left: 291px;
    width: 189px;
    height: 174px;
    background-image:url('p-7-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-7-object02{
    position: absolute;
   top: 211px;
    left: 15px;
    width: 193px;
    height: 169px;
    background-image:url('p-7-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-7-object03{
    position: absolute;
   top: 313px;
    left: 306px;
    width: 176px;
    height: 194px;
    background-image:url('p-7-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (8) */
.p-8-object01{
    position: absolute;
    top: 79px;
    left: 319px;
    width: 44px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-8-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-8-object02{
    position: absolute;
    top: 79px;
    left: 180px;
    width: 150px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-8-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-8-object03{
    position: absolute;
    top: 49px;
    left: 105px;
    width: 118px; /* กำหนดความกว้างของกล่อง */
    height: 40px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-8-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-8-object04{
    position: absolute;
    top: 50px;
    left: 105px;
    width: 80px; /* กำหนดความกว้างของกล่อง */
    height: 74px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-8-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-8-object05{
    position: absolute;
    top: 78px;
    left: 46px;
    width: 55px; /* กำหนดความกว้างของกล่อง */
    height: 55px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-8-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (18) */
.p-18-object01{
    position: absolute;
    top: 85px;
    left: 174px;
    width: 246px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-18-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-18-object02{
    position: absolute;
    top: 80px;
    left: 46px;
    width: 60px; /* กำหนดความกว้างของกล่อง */
    height: 60px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-18-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-18-object03{
    position: absolute;
    top: 97px;
    left: 115px;
    width: 44px; /* กำหนดความกว้างของกล่อง */
    height: 44px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-18-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-18-object04{
    position: absolute;
    top: 63px;
    left: 109px;
    width: 99px; /* กำหนดความกว้างของกล่อง */
    height: 34px; /* กำหนดความสูงของกล่อง */
    background-image:url('p-18-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (23) */
.p-23-object01{
    position: absolute;
    top: 73px;
    left: 184px;
    width: 205px;
    height: 69px;
    background-image:url('p-23-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-23-object02{
    position: absolute;
  top: 66px;
    left: 116px;
    width: 118px;
    height: 32px;
    background-image:url('p-23-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-23-object03{
    position: absolute;
   top: 96px;
    left: 103px;
    width: 95px;
    height: 44px;
    background-image:url('p-23-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-23-object04{
    position: absolute;
    top: 54px;
    left: 319px;
    width: 88px;
    height: 58px;
    background-image:url('p-23-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-23-object05{
    position: absolute;
    top: 84px;
    left: 47px;
    width: 60px;
    height: 60px;
    background-image:url('p-23-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (27) */
.p-27-object01{
    position: absolute;
     top: 66px;
    left: 167px;
    width: 205px;
    height: 69px;
    background-image:url('p-27-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-27-object02{
    position: absolute;
    top: 62px;
    left: 95px;
    width: 118px;
    height: 32px;
    background-image:url('p-27-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-27-object03{
    position: absolute;
    top: 81px;
    left: 97px;
    width: 69px;
    height: 53px;
    background-image:url('p-27-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
.p-27-object04{
    position: absolute;
    top: 74px;
    left: 31px;
    width: 60px;
    height: 60px;
    background-image:url('p-27-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-27-object05{
    position: absolute;
       top: 64px;
    left: 367px;
    width: 53px;
    height: 52px;
    background-image:url('p-27-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
/* Page (49) */
.p-49-object01{
    position: absolute;
       top: 59px;
    left: 234px;
    width: 221px;
    height: 70px;
    background-image:url('p-49-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-49-object02{
    position: absolute;
    top: 93px;
    left: 386px;
    width: 47px;
    height: 44px;
    background-image:url('p-49-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-49-object03{
    position:absolute;
    top: 81px;
    left: 159px;
    width: 108px;
    height: 50px;
    background-image:url('p-49-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-49-object04{
    position:absolute;
      top: 72px;
    left: 31px;
    width: 110px;
    height: 62px;
    background-image:url('p-49-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-49-object05{
    position:absolute;
    top: 68px;
    left: 111px;
    width: 99px;
    height: 18px;
    background-image:url('p-49-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (55) */
.p-55-object01{
    position: absolute;
   top: 67px;
    left: 216px;
    width: 189px;
    height: 69px;
    background-image:url('p-55-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-55-object02{
    position: absolute;
         top: 66px;
    left: 106px;
    width: 106px;
    height: 30px;
    background-image:url('p-55-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-55-object03{
    position:absolute;
         top: 81px;
    left: 139px;
    width: 76px;
    height: 56px;
    background-image:url('p-55-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-55-object04{
    position:absolute;
     top: 74px;
    left: 41px;
    width: 65px;
    height: 65px;
    background-image:url('p-55-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-55-object05{
    position:absolute;
       top: 64px;
    left: 324px;
    width: 83px;
    height: 48px;
    background-image:url('p-55-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (59) */
.p-59-object01{
    position: absolute;
    top: 66px;
    left: 195px;
    width: 232px;
    height: 69px;
    background-image:url('p-59-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-59-object02{
    position: absolute;
    top: 74px;
    left: 36px;
    width: 70px;
    height: 70px;
    background-image:url('p-59-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-59-object03{
    position:absolute;
    top: 72px;
    left: 135px;
    width: 68px;
    height: 69px;
    background-image:url('p-59-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-59-object04{
    position:absolute;
        top: 81px;
    left: 343px;
    width: 105px;
    height: 54px;
    background-image:url('p-59-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-59-object05{
    position:absolute;
     top: 63px;
    left: 103px;
    width: 96px;
    height: 29px;
    background-image:url('p-59-object05.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}


.p-60-object01{
    position:absolute;
       top: 326px;
    left: 39px;
    width: 405px;
    height: 215px;
    background-image:url('p-60-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
/* Page (63) */
.p-63-object01{
    position: absolute;
   top: 56px;
    left: 251px;
    width: 183px;
    height: 69px;
    background-image:url('p-63-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-63-object02{
    position: absolute;
    top: 76px;
    left: 167px;
    width: 111px;
    height: 59px;
    background-image:url('p-63-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-63-object03{
    position:absolute;
   top: 70px;
    left: 42px;
    width: 70px;
    height: 70px;
    background-image:url('p-63-object03.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-63-object04{
    position:absolute;
    top: 66px;
    left: 108px;
    width: 103px;
    height: 30px;
    background-image:url('p-63-object04.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (67) */
.p-67-object01{
    position: absolute;
    top: 66px;
    left: 41px;
    width: 58px;
    height: 78px;
    background-image:url('p-67-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-67-object02{
    position: absolute;
        top: 66px;
    left: 80px;
    width: 287px;
    height: 69px;
    background-image:url('p-67-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

/* Page (70) */
.p-70-object01{
    position: absolute;
     top: 66px;
    left: 41px;
    width: 58px;
    height: 78px;
    background-image:url('p-70-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-70-object02{
    position: absolute;
        top: 66px;
    left: 80px;
    width: 287px;
    height: 69px;
    background-image:url('p-70-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}
/* Page (76) */
.p-76-object01{
    position: absolute;
     top: 66px;
    left: 41px;
    width: 58px;
    height: 78px;
    background-image:url('p-76-object01.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}

.p-76-object02{
    position: absolute;
         top: 66px;
    left: 80px;
    width: 287px;
    height: 69px;
    background-image:url('p-76-object02.png'); /* รูปภาพพื้นหลังปกติ */
    background-size:contain; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมด */
    background-position: center; /* จัดตำแหน่งรูปภาพให้อยู่ตรงกลาง */
    background-repeat: no-repeat;
}


.jello-horizontal {
   animation-delay: 0.2s;
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}