html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  padding:0;
  margin:0;
  background-color:#eee;
}
div { 
  position:absolute;
}
#wrapper {
  position:relative;
  width:300px;
  height:250px;
  border:1px solid #333;
  overflow:hidden;
}
#slide1, #slide2 {
  width:100%;
  height:100%;
}
#slide1 { display:none; }
#slide2 { display:none; }

#banner {
  width:100%;
  height:100%;
}
#background {
  width:100%;
  height:100%;
  background:url('bg.jpg') top left no-repeat;
}
#natchar {
  left: 0px; right:   0px; margin-left:auto; margin-right: auto;
  top:  0px; bottom: 10px; margin-top: auto; margin-bottom:auto; 
  width:169px;
  height:110px;
  background:url('natchar.png') top left no-repeat;
}
#logo {
  top:15px;
  left:0; right:0; margin-left:auto; margin-right:auto;
  width:265px;
  height:47px;
  background:url('logo.png') top left no-repeat;
}
#pet {
  top:81px;
  left:142px;
  width:168px;
  height:169px;
  background:url('pet.png') top left no-repeat;
}

.textss {
  left:20px;
  width:115px;
  background-image:url('text.png');
  background-repeat:no-repeat;
}
#t_meet { top: 95px; height: 65px; background-position:   0px    0px; }
#t_why  { top: 95px; height: 47px; background-position:   0px  -67px; }
#t_when { top: 95px; height: 66px; background-position:   0px -119px; }

.tagss {
  left:160px;
  width:117px;
  background-image:url('tag.png');
  background-repeat:no-repeat;
}
#t_tag1 { top: 94px; height: 17px; background-position:   0px   0px; }
#t_tag2 { top: 111px; height: 16px; background-position:   0px -17px; }
#t_tag3 { top: 127px; height: 20px; background-position:   0px -33px; }
#t_tag4 { top: 147px; height: 14px; background-position:   0px -53px; }

#cta {
  top:172px;
  left:160px;
  width:118px;
  height:41px;
  background:url('cta.png') top left no-repeat;
}
#bag {
  top:85px;
  left:32px;
  width:104px;
  height:142px;
  background:url('bag.png') top left no-repeat;
}
#exit {
  width:100%;
  height:100%;
  cursor:pointer;
  z-index:99999;
}