/********************************************************************************
 * slide 5
 ********************************************************************************/
#slide5 {
  font-family: Tahoma;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#slide5 > div {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100em;
  height: 170.0em;
}

/********************************************************************************
 * blue background
 ********************************************************************************/
#slide5 > div > .background {
  position: absolute;
  display: block;
  left: 0;
  top: 152.3em;
  width: 100%;
  height: 17.7em;
  z-index: 0;
  background-color: #6699cc;
}

/********************************************************************************
 * logos
 ********************************************************************************/
#slide5 .text-logo {
  left: 20.0em;
  top: 4em;
  text-align: left;
  color: #666666;
  z-index: 100;
}

#slide5 .text-logo > span {
  font-size: 3em;
}

#slide5 .text-logo > span > span {
  font-size: 1.2em;
}

#slide5 .top-logo {
  left: 0;
  top: 0;
  width: 17.4em;
  height: 12.8em;
  background-image: url(../images/slide5/top-logo.png);
  z-index: 100;
}

#slide5 .top-text2 {
  left: 88.5em;
  top: 27.2em;
  width: 9.5em;
  z-index: 100;
}

#slide5 .top-text2 > a {
  font-size: 1.2em;
  text-decoration: underline;
}

/********************************************************************************
 * time-line
 ********************************************************************************/

#slide5 .time-line {
  top: 151.0em;
  left: -30em;
  width: 256em;
}

#slide5 .time-line div.line {
  top: 0;
  left: 0;
  width: 100%;
  height: 2.6em;
  white-space: nowrap;
  text-align: left;
}

#slide5 .time-line div.line > div.p1 {
  display: inline-block;
  width: .8em;
  height: 100%;
  background-image: url(../images/slide5/line1.png);
  background-position: 0 0;
  background-size: 2px 2.6em;
  background-repeat: no-repeat;
  opacity: .75;
}

#slide5 .time-line div.line > div.p2 {
  display: inline-block;
  width: .8em;
  height: 100%;
  background-image: url(../images/slide5/line2.png);
  background-position: 0 0;
  background-size: 2px 2.6em;
  background-repeat: no-repeat;
  opacity: .75;
}

#slide5 .time-line .year-num {
  top: 5em;
  width: 9.6em;
  height: 3.4em;
  margin-left: -4.8em;
  line-height: 3.4em;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #ffffff;
}

#slide5 .time-line .year-num > span {
  display: inline-block;
  font-size: 2.5em;
  vertical-align: middle;
}

#slide5 .time-line .circle {
  width: 6.4em;
  height: 6.4em;
  margin-left: -3.2em;
  margin-top: -3.2em;
  border: 2px solid #666666;
  border-radius: 3.2em;
  background-color: #ffffff;
}

#slide5 .time-line .circle-tail {
  opacity: .75;
  width: 2px;
  background-image: url(../images/slide5/dash-line.png);
  background-size: 2px 13px;
  background-position: 0 100%;
  background-repeat: repeat;
  /*border-left: 1px dashed #cccccc;*/
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#slide5 .time-line .circle .text {
  position: absolute;
  display: block;
  left: 4.2em;
  top: 4.8em;
  width: 20em;
  font-size: 1.2em;
  color: #6699cc;
  text-align: left;
  text-transform: uppercase;
}

#slide5 .time-line .circle .text > span {
  font-size: 1.2em;
}

#slide5 .time-line-cursor {
  top: 150.0em;
  width: 5.7em;
  height: 5.7em;
  background-image: url(../images/slide5/cursor.png);
  cursor: pointer;
}

#slide5 .time-line-cursor.img2 {
  background-image: url(../images/slide5/cursor2.png);
}

#slide5 .time-line-cursor.drop {
  -webkit-transition: margin-left .5s ease-in-out;
  -moz-transition: margin-left .5s ease-in-out;
  -ms-transition: margin-left .5s ease-in-out;
  -o-transition: margin-left .5s ease-in-out;
  transition: margin-left .5s ease-in-out;
}

/********************************************************************************
 * top part
 ********************************************************************************/
#slide5 .top-part .block1 {
  left: 2.2em;
  top: 13.9em;
  width: 15.2em;
  height: 28.9em;
  background-image: url(../images/slide5/block1.png);
  border: 3px solid #6699cc;
  border-radius: 1px;
}

/*#slide5 .top-part .block1-line {*/
  /*left: 7.1em;*/
  /*top: 17.3em;*/
  /*width: 27.9em;*/
  /*height: 4.5em;*/
  /*background-image: url(../images/slide5/block1-text.png);*/
/*}*/

#slide5 .top-part .block1-line {
  left: 2.0em;
  top: 39.5em;
  width: 15.9em;
  height: 8.0em;
  background-image: url(../images/slide5/block1-text.png);
}

/*#slide5 .top-part .block1-text {*/
  /*left: 7.1em;*/
  /*top: 17.3em;*/
  /*width: 14em;*/
  /*height: 4em;*/
  /*text-align: left;*/
  /*letter-spacing: -.1em;*/
  /*text-transform: uppercase;*/
  /*color: #666666;*/
/*}*/

#slide5 .top-part .block1-text {
  left: 2.2em;
  top: 45.8em;
  width: 18em;
  height: 4em;
  text-align: left;
  letter-spacing: -.1em;
  text-transform: uppercase;
  color: #666666;
}

#slide5 .top-part .block1-text > span,
#slide5 .top-part .block2-text > span,
#slide5 .top-part .block3-text > span,
#slide5 .top-part .block4-text > span,
#slide5 .top-part .block5-text > span {
  font-size: 1.2em;
}

#slide5 .top-part .block2 {
  left: 2.4em;
  top: 62.9em;
  width: 13.0em;
  height: 19.2em;
  background-image: url(../images/slide5/block2.png);
  border: 3px solid #6699cc;
  border-radius: 1px;
}

#slide5 .top-part .block2-line {
  left: 13.9em;
  top: 65.9em;
  width: 22.2em;
  height: 5.9em;
  background-image: url(../images/slide5/block2-text.png);
}

#slide5 .top-part .block2-text {
  left: 17.8em;
  top: 64.9em;
  width: 23em;
  text-align: left;
  letter-spacing: -.1em;
  text-transform: uppercase;
  color: #666666;
}

#slide5 .top-part .block3 {
  left: 33.4em;
  top: 79.2em;
  width: 28.7em;
  height: 25.6em;
  background-image: url(../images/slide5/block3.png);
  border-radius: 1px;
}

#slide5 .top-part .block3 .image {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/slide5/block3.png);
}

#slide5 .top-part .block3 .circle1 {
  left: 1.8em;
  top: 0;
  width: 25em;
  height: 25em;
}

#slide5 .top-part .block3 .circle2 {
  left: 1.8em; /* 35 170 */
  top: 3.2em;
  width: 25em;
  height: 17em;
  overflow: hidden;
}

#slide5 .top-part .block3 .circle2 > svg {
  position: absolute;
  left: 0;
  top: -3.2em;
  width: 25em;
  height: 25em;
}

#slide5 .top-part .block3 .circle svg {
  -webkit-animation: roll_roll 15s normal infinite linear;
  -moz-animation: roll_roll 15s normal infinite linear;
  -ms-animation: roll_roll 15s normal infinite linear;
  -o-animation: roll_roll 15s normal infinite linear;
  animation: roll_roll 15s normal infinite linear;
}

#slide5 .top-part .block3-line {
  left: 1.6em;
  top: 87.6em;
  width: 31.8em;
  height: 12.1em;
  background-image: url(../images/slide5/block3-text.png);
}

#slide5 .top-part .block3-text {
  left: 4em;
  top: 89.2em;
  width: 28.7em;
  height: 9em;
  text-align: left;
  letter-spacing: -.1em;
  text-transform: uppercase;
  color: #666666;
}

#slide5 .top-part .block4-text > span > span,
#slide5 .top-part .block5-text > div > span > span {
  font-size: 1.4em;
}

#slide5 .top-part .block4-text {
  left: 44.4em;
  top: 66.7em;
  width: 54em;
  text-align: left;
  letter-spacing: -.1em;
  text-transform: uppercase;
  color: #666666;
  line-height: 2em;
}

#slide5 .top-part .block5-text {
  left: 63.6em;
  top: 75.8em;
  width: 36em;
  text-align: left;
  letter-spacing: -.1em;
  text-transform: uppercase;
  color: #666666;
}

#slide5 .top-part .block5-text > div {
  position: relative;
  width: 100%;
  padding-left: 3.4em;
  line-height: 2em;
  padding-bottom: 1em;
}

#slide5 .top-part .block5-text > div:before {
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.6em;
  height: 1.6em;
  background-color: #666666;
  content: "";
}

#slide5 .top-part .big-image {
  left: 33.3em;
  top: 9.2em;
  width: 61.5em;
  height: 47.5em;
  background-image: url(../images/slide5/big-image.png);
  text-transform: uppercase;
  color: #666666;
}

#slide5 .top-part .big-image .top {
  position: relative;
  font-weight: bold;
  overflow: hidden;
  height: 5em;
  line-height: 5em;
}

#slide5 .top-part .big-image .bottom {
  position: relative;
  overflow: hidden;
}

#slide5 .top-part .big-image .top > span {
  position: relative;
  top: 6em;
}
#slide5 .top-part .big-image .bottom > span {
  position: relative;
  top: -5em;
}

#slide5 .top-part .big-image .top > span {
  display: inline-block;
  font-size: 4em;
  vertical-align: bottom;
  line-height: 1em;
}

#slide5 .top-part .big-image .top small {
  display: inline-block;
  font-size: .6em;
  line-height: 1em;
}

#slide5 .top-part .big-image .bottom span {
  font-size: 1.2em;
}

#slide5 .top-part .big-image .line {
  opacity: 0;
}

#slide5 .top-part .big-image .p1.text {
  left: -13.8em;
  top: 3.6em;
}
#slide5 .top-part .big-image .p2.text {
  left: -4.1em;
  top: 9.7em;
}
#slide5 .top-part .big-image .p3.text {
  left: -14.5em;
  top: 22.1em;
}
#slide5 .top-part .big-image .p4.text {
  left: -12.5em;
  top: 37.6em;
}
#slide5 .top-part .big-image .p5.text {
  left: 12.2em;
  top: 41.6em;
}
#slide5 .top-part .big-image .p6.text {
  left: 69.5em;
  top: 35.5em;
}

#slide5 .top-part .big-image .p1.line {
  left: -26.1em;
  top: 7.9em;
  width: 27.8em;
  height: 5.0em;
  background-image: url(../images/slide5/b-i-line1.png);
}
#slide5 .top-part .big-image .p2.line {
  left: -24.7em;
  top: 14.4em;
  width: 41.8em;
  height: 5.6em;
  background-image: url(../images/slide5/b-i-line2.png);
}
#slide5 .top-part .big-image .p3.line {
  left: -13.4em;
  top: 24.1em;
  width: 25.8em;
  height: 3.8em;
  background-image: url(../images/slide5/b-i-line3.png);
}
#slide5 .top-part .big-image .p4.line {
  left: -13.4em;
  top: 36.2em;
  width: 21.1em;
  height: 6.9em;
  background-image: url(../images/slide5/b-i-line4.png);
}
#slide5 .top-part .big-image .p5.line {
  left: 11.2em;
  top: 35.5em;
  width: 16.8em;
  height: 11.2em;
  background-image: url(../images/slide5/b-i-line5.png);
}
#slide5 .top-part .big-image .p6.line {
  left: 36.8em;
  top: 19em;
  width: 20em;
  height: 31.7em;
  background-image: url(../images/slide5/b-i-line6.png);
}

/********************************************************************************
 * animation
 ********************************************************************************/
#slide5 .tip-line,
#slide5 .tip-text {
  opacity: 0;
}

#slide5.anim1 .tip-line.block1-line,
#slide5.anim2 .tip-line.block2-line,
#slide5.anim3 .tip-line.block3-line,
#slide5.anim4 .tip-line.block4-line,
#slide5.anim5 .tip-line.block5-line {
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -ms-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#slide5.anim1 .tip-text.block1-text,
#slide5.anim2 .tip-text.block2-text,
#slide5.anim3 .tip-text.block3-text,
#slide5.anim4 .tip-text.block4-text,
#slide5.anim5 .tip-text.block5-text {
  opacity: 1;
  -webkit-transition: opacity .5s linear .5s;
  -moz-transition: opacity .5s linear .5s;
  -ms-transition: opacity .5s linear .5s;
  -o-transition: opacity .5s linear .5s;
  transition: opacity .5s linear .5s;
}

@-webkit-keyframes roll_roll {
  0% { -webkit-transform: rotate(-360deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes roll_roll {
  0% { -moz-transform: rotate(-360deg); }
  100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes roll_roll {
  0% { -moz-transform: rotate(-360deg); }
  100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes roll_roll {
  0% { -moz-transform: rotate(-360deg); }
  100% { -moz-transform: rotate(0deg); }
}

@keyframes roll_roll {
  0% { transform: rotate(-360deg); }
  100% { transform: rotate(0deg); }
}