/* Chapter Four
############################ */

/* Ch4 Panel1 */
#ch4-1-bg {
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel1.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-1-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch4-1-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch4 Panel2 to 6 */
#ch4-3-trigger {
  position:absolute;
  top:25%;
  width:100%;
}
#ch4-4-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch4-5-trigger {
  position:absolute;
  top:75%;
  width:100%;
}
#ch4-3-bg,
#ch4-4-bg,
#ch4-5-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-2-bg {
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel2-bg.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-3-bg {
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch4-4-bg {
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel4.jpg) center no-repeat;
  background-size:contain;
}
#ch4-5-bg {
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel5.jpg) center no-repeat;
  background-size:contain;
}

#ch4-2-fg {  
  /*2000x1125*/
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: url(../images/Chapter4/part1/Chapter4_Part1_Panel2-FG.png) center bottom no-repeat;
  background-size:contain;
}

/* Ch4 Part2 Panel1 */
#ch4-21-bg {
  background: url(../images/Chapter4/part2/Chapter4_Part2_Panel1.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-21-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch4-21-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch4 Part2 Panel 2 to 5 */
#ch4-23-trigger {
  position:absolute;
  top:25%;
  width:100%;
}
#ch4-24-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch4-25-trigger {
  position:absolute;
  top:75%;
  width:100%;
}
#ch4-23-bg,
#ch4-24-bg,
#ch4-25-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-22-bg {
  background: url(../images/Chapter4/part2/Chapter4_Part2_Panel2.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-23-bg {
  background: url(../images/Chapter4/part2/Chapter4_Part2_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch4-24-bg {
  background: url(../images/Chapter4/part2/Chapter4_Part2_Panel4.jpg) center no-repeat;
  background-size:contain;
}
#ch4-25-bg {
  background: url(../images/Chapter4/part2/Chapter4_Part2_Panel5.jpg) center no-repeat;
  background-size:contain;
}

/* Ch4 Part3 Panel1 */
#ch4-31-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel1.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-31-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch4-31-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch4 Part3 Panel 2 to 4 */
#ch4-33-trigger {
  position:absolute;
  top:25%;
  width:100%;
}
#ch4-34-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch4-34-end-trigger {
  position: absolute;
  bottom: 0%;
  width: 100%;
}
#ch4-33-bg,
#ch4-34-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-32-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel2.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-33-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch4-34-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel4.jpg) center no-repeat;
  background-size:contain;
}

/* Ch4 Part3 Panel 5 to 6 */
#ch4-36-trigger {
  position:absolute;
  top:35%;
  width:100%;
}
#ch4-36-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-35-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel5.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-36-bg {
  background: url(../images/Chapter4/part3/Chapter4_Part3_Panel6.jpg) center no-repeat;
  background-size:contain;
}

/* Ch4 Part4 Panel1 */
#ch4-41-bg {
  background: url(../images/Chapter4/part4/Chapter4_Part4_Panel1.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-41-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch4-41-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch4 Part4 Panel 2 to 5 */
#ch4-43-trigger {
  position:absolute;
  top:25%;
  width:100%;
}
#ch4-44-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch4-45-trigger {
  position:absolute;
  top:75%;
  width:100%;
}
#ch4-43-bg,
#ch4-44-bg,
#ch4-45-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-42-bg {
  background: url(../images/Chapter4/part4/Chapter4_Part4_Panel2.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-43-bg {
  background: url(../images/Chapter4/part4/Chapter4_Part4_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch4-44-bg {
  background: url(../images/Chapter4/part4/Chapter4_Part4_Panel4.jpg) center no-repeat;
  background-size:contain;
}
#ch4-45-bg {
  background: url(../images/Chapter4/part4/Chapter4_Part4_Panel5.jpg) center no-repeat;
  background-size:contain;
}

/* Ch4 Part5 Panel 1 to 6 */
#ch4-50-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}
#ch4-52-trigger {
  position:absolute;
  top:17%;
  width:100%;
}
#ch4-53-trigger {
  position:absolute;
  top:32%;
  width:100%;
}
#ch4-54-trigger {
  position:absolute;
  top:46%;
  width:100%;
}
#ch4-55-trigger {
  position:absolute;
  top:61%;
  width:100%;
}
#ch4-56-trigger {
  position:absolute;
  top:75%;
  width:100%;
}
#ch4-52-bg,
#ch4-53-bg,
#ch4-54-bg,
#ch4-55-bg,
#ch4-56-bg {    
  position:absolute;
  top:0px;
  opacity:0;
}
#ch4-51-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel1.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-52-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel2.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch4-53-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel3.jpg) center no-repeat;
  background-size:contain;
}
#ch4-54-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel4.jpg) center no-repeat;
  background-size:contain;
}
#ch4-55-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel5.jpg) center no-repeat;
  background-size:contain;
}
#ch4-56-bg {
  background: url(../images/Chapter4/part5/Chapter4_Part5_Panel6.jpg) center no-repeat;
  background-size:contain;
}
#ch4-53-oink {
  /*302x212*/  
  position:absolute;
  top: 12%;
  right: 23%;
  width: 15.1%;
  height: 18.844%;
  background: url(../images/Chapter4/part5/oink2.png) center bottom no-repeat;
  background-size:contain;
}

/* Ch4 Part6 Panel1 */
#ch4-61-bg {
  background: url(../images/Common/TobeContinued_anim.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}