html,
body {
  margin: 0;
  padding: 0;
}
.preload img {
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
/*div{
    opacity: 0.5;
}*/
.content {
  width: 300px;
  height: 250px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.bk {
  position: absolute;
  top: -15px;
  left: 0;
  width: 300px;
  height: 265px;
}
.balloon {
  position: absolute;
  top: 46px;
  left: 206px;
  width: 29px;
  height: 34px;
}
.people {
  position: absolute;
  width: 200px;
  height: 210px;
  bottom: 0px;
  right: 0px;
}
.logo1 {
  position: absolute;
  width: 106px;
  height: 17px;
  top: 28px;
  left: 20px;
  opacity: 0;
  visibility: hidden;
  background: url('frame1_text.png') no-repeat;
  background-size: 169px 126px;
}
.frame1_text1 {
  position: absolute;
  width: 170px;
  height: 31px;
  top: 55px;
  left: 63px;
  opacity: 0;
  visibility: hidden;
  background: url('frame1_text.png') no-repeat 0px -30px;
  background-size: 169px 126px;
}
.frame1_text2 {
  position: absolute;
  width: 180px;
  height: 25px;
  top: 89px;
  left: 63px;
  opacity: 0;
  visibility: hidden;
  background: url('frame1_text.png') no-repeat 0px -64px;
  background-size: 169px 126px;
}
.frame1_text3 {
  position: absolute;
  width: 200px;
  height: 31px;
  top: 120px;
  left: 63px;
  opacity: 0;
  visibility: hidden;
  background: url('frame1_text.png') no-repeat 0px -95px;
  background-size: 169px 126px;
}
.frame2 {
  width: 300px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #108ec8;
  opacity: 0;
  visibility: hidden;
}
.logo2 {
  position: absolute;
  width: 106px;
  height: 17px;
  top: 28px;
  left: 20px;
  opacity: 0;
  visibility: hidden;
  background: url('frame2_text.png') no-repeat;
  background-size: 210px 154px;
}
.frame2_text1 {
  position: absolute;
  width: 168px;
  height: 30px;
  top: 57px;
  left: 300px;
  background: url('frame2_text.png') no-repeat 0px -29px;
  background-size: 210px 154px;
}
.frame2_text2 {
  position: absolute;
  width: 84px;
  height: 30px;
  top: 89px;
  left: 300px;
  background: url('frame2_text.png') no-repeat 0px -61px;
  background-size: 210px 154px;
}
.frame2_text3 {
  position: absolute;
  width: 211px;
  height: 14px;
  top: 127px;
  left: 300px;
  background: url('frame2_text.png') no-repeat 0px -99px;
  background-size: 210px 154px;
}
.frame2_text4 {
  position: absolute;
  width: 159px;
  height: 14px;
  top: 142px;
  left: 300px;
  background: url('frame2_text.png') no-repeat 0px -114px;
  background-size: 210px 154px;
}
.frame2_text5 {
  position: absolute;
  width: 140px;
  height: 24px;
  top: 209px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  background: url('frame2_text.png') no-repeat 2px -131px;
  background-size: 210px 154px;
}
.cta_content {
  position: absolute;
  width: 88px;
  height: 45px;
  top: 186px;
  left: 23px;
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cta_content .cta {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('ctaBk.png') no-repeat;
  background-size: 88px 91px;
  -webkit-tap-highlight-color: transparent;
}
.cta_content .cta_hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background: url('ctaBk.png') no-repeat 0px -46px;
  background-size: 88px 91px;
  -webkit-tap-highlight-color: transparent;
}