@charset "UTF-8";
#wrapper { background: url(/wp-content/themes/mimt/assets/img/museum/line.png) repeat-y left bottom; }
#content .inner { overflow: hidden; position: relative; }
#floors { position: relative; width: 629px; height: 609px; border-right:1px solid #cf0f28; float: left; overflow: hidden; }
#floors .wrap { position: absolute; left: 0; top: -1218px; height: 1827px; }
#floors .floor {  position: absolute; left: 0; }
#floors .floor .targetNumber li { position: absolute; cursor: pointer; z-index: 3; width: 13px; height: 13px; overflow: hidden; }
#floors .floor .targetNumber li img { position: absolute; left: 0; top: 0;}
#floors .floor .targetNumber li.on img { top: -13px; }
#floors .floor .targetphoto li {
  width: 244px;
  height: 142px;
  position: absolute;
  background: url(/wp-content/themes/mimt/assets/img/common/arrow_down.png) no-repeat center bottom;
  padding: 0 0 6px;
  opacity: 0;
  z-index: 2;
  zoom: 1;
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: 50% 100%;
     -moz-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1);
  -webkit-transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1.4); 
     -moz-transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1.4); 
      -ms-transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1.4); 
       -o-transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1.4); 
          transition: all 300ms cubic-bezier(0.630, 0.005, 0.430, 1.4);
}
#floors .floor .targetphoto li.show {
  opacity : 1;
  z-index : 4;
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
#floors .floor .targetphoto li img {
  display: block; 
  border: 1px solid #ce102a;
}
/*
#floors .floor .targetphoto li:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 7px solid transparent;
  border-top-color: #ce102a;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  z-index: 5;
  zoom: 1;
}
*/

#floors #firstFloor { top: 1218px; }
#floors #firstFloor .targetNumber .num01 { left: 166px; top: 372px; }
#floors #firstFloor .targetphoto .num01 { left: 174px; top: 223px; margin: 0 0 0 -124px; }

#floors #secondFloor { top: 609px; }
#floors #secondFloor .targetNumber .num01 { left: 327px; top: 386px; }
#floors #secondFloor .targetNumber .num02 { left: 142px; top: 369px; }
#floors #secondFloor .targetNumber .num03 { left: 159px; top: 310px; }
#floors #secondFloor .targetphoto .num01 { left: 335px; top: 236px; margin: 0 0 0 -124px; }
#floors #secondFloor .targetphoto .num02 { left: 150px; top: 220px; margin: 0 0 0 -124px; }
#floors #secondFloor .targetphoto .num03 { left: 167px; top: 160px; margin: 0 0 0 -124px; }

#floors #thirdFloor { top:  0; }
#floors #thirdFloor .targetNumber .num01 { left: 138px; top: 369px; }
#floors #thirdFloor .targetNumber .num02 { left: 207px; top: 386px; }
#floors #thirdFloor .targetNumber .num03 { left: 344px; top: 489px; }
#floors #thirdFloor .targetphoto .num01 { left: 145px; top: 218px; margin: 0 0 0 -124px; }
#floors #thirdFloor .targetphoto .num02 { left: 215px; top: 236px; margin: 0 0 0 -124px; }
#floors #thirdFloor .targetphoto .num03 { left: 352px; top: 339px; margin: 0 0 0 -124px; }


#outsides { position: absolute; left: 275px; top: 129px; z-index: 1; }
#outsides div { padding: 0 0 0 15px; width:291px ; height: 110px; }
#outsides div img { position: absolute; left: 0; top: 0; display: none; }
#outsides .arrow { position: absolute; left: -16px; top: 55px; }

#sideBlock { float: right; margin: 20px 0; position: relative;height: 100%; }
#sideBlock #triggerNav { float: left; height: 375px; border-right: 1px solid #ce1029; position: relative; }
#sideBlock #triggerNav ul { padding: 0 20px; }
#sideBlock #triggerNav ul li { cursor: pointer; width: 33px; height: 33px; margin: 0 0 20px; overflow: hidden; position: relative; }
#sideBlock #triggerNav ul li img { position: absolute; left: 0; top: 0; }
#sideBlock #triggerNav ul li.cur img { top:-33px; }
#sideBlock #triggerNav .arrow { position: absolute; right: -1px; _right:1px; zoom: 1; top: 118px; }

#sideBlock #infoBlock { width: 267px; height: 375px; float: right; position: relative; overflow: hidden; }
#sideBlock #infoBlock .info { position: absolute; left: 0px; top: 0; width: 267px; height: 375px; background: #fff; display: none; }
#sideBlock #infoBlock #firstInfo { display: block; }
#sideBlock #infoBlock .info .scroll { width: 267px; height: 270px; overflow: hidden; }
#sideBlock #infoBlock .info ul { padding: 0 20px; }
#sideBlock #infoBlock .info ul li { position: relative; padding: 0 0 0 18px; _padding:0 0 0 18px; margin: 0 0 6px; }
#sideBlock #infoBlock .info ul li span { position: absolute; left: 0; top: 6px; }
#sideBlock #infoBlock .info .howTo {  }
#sideBlock #infoBlock .info .howTo li { cursor: pointer; color: #666; }
#sideBlock #infoBlock .info .howTo li span { width: 13px; height: 13px; overflow: hidden; }
#sideBlock #infoBlock .info .howTo li span img { position: absolute; left: 0; top: 0; }
#sideBlock #infoBlock .info .howTo li.on span img { top: -13px; }
#sideBlock #infoBlock .info .howTo li.on { color: #ce1029; }
#sideBlock #infoBlock .info .bottomTxt { position: absolute; bottom: 0; }
#sideBlock #infoBlock .info .bottomTxt li:last-child { margin: 0; }

#slides { position: absolute; top: 395px; left: 20px; bottom: 20px; }
#slides .slide { position: absolute; left: 0; top: 0; overflow: hidden; width: 301px; height: 174px; }
#slides .slide li { position: absolute; left: 0; top: 0; }
 
.en #content .inner { height: 659px; }
.en #sideBlock #triggerNav { float: left; height: 420px; border-right: 1px solid #ce1029; position: relative; }
.en #sideBlock #infoBlock { width: 267px; height: 420px; float: right; position: relative; overflow: hidden; }
.en #sideBlock #infoBlock .info { position: absolute; left: 0px; top: 0; width: 267px; height: 420px; background: #fff; display: none; }
.en #slides { position: absolute; top: 440px; left: 20px; bottom: 20px; }
/*
.en #floors #firstFloor { top: 1258px; }
.en #floors #secondFloor { top: 629px; }
.en #floors #thirdFloor { top:  0; }
*/

@keyframes show{
  0% {
    transform: scale(1.2);
  }
 
  50% {
    transform: scale(0.9);
  }
 
  75% {
    transform: scale(1.1);
  }
 
  100% {
    transform: scale(1);
  }
}
.show {
  animation: show 0.5s ease-in;
}