@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  style.css
 style info : 
=================================================================== */
@keyframes show_loading {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes show_loading {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

html {
  font-size: 62.5%;
  background: #181820; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden; }

body {
  color: #000000;
  font: 13px "Helvetica Neue" , Helvetica,'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"游ゴシック",YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'palt' 1;
  font-feature-settings: 'palt' 1;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #181820; }

#bg {
  width: 100%;
  height: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0b3638+0,081b2d+37,000000+100 */
  background: #0b3638;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #0b3638 0%, #081b2d 37%, #000000 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #0b3638 0%, #081b2d 37%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #0b3638 0%, #081b2d 37%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b3638', endColorstr='#000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

a {
  color: #000000;
  text-decoration: none; }

li {
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

h1 {
  font-family: 'Nova Round', cursive;
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-size: 3rem; }

#debug {
  position: fixed;
  top: 40%;
  right: 0px;
  background: #333;
  padding: 10px;
  display: none; }
  #debug p {
    color: #CC297A;
    font-weight: bold;
    font-size: 11px;
    font-size: 1.1rem;
    white-space: nowrap; }
    #debug p span {
      color: #EE446B;
      display: inline-block;
      text-align: center; }

header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px; }

#lists {
  position: absolute;
  left: 0px;
  top: 50px;
  display: none; }
  #lists ul {
    padding: 10px; }
    #lists ul li {
      color: #fff;
      font-size: 12px;
      font-size: 1.2rem; }
      #lists ul li.active {
        color: #EE446B; }

#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  top: 0px;
  left: 0px;
  z-index: 100; }
  #loading #loading_inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: table; }
  #loading p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff; }

/* Small Devices, Tablets */
/* PC */
@media all and (min-width: 864px) {
  #lists {
    display: block; }
  #modal_life .modal_content {
    width: 600px;
    left: 50%;
    margin-left: -300px; }
  #modal_life .img {
    width: 480px;
    height: 480px;
    padding-bottom: 0px;
    margin: auto; } }

@keyframes show_loading {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

#list_era {
  position: fixed;
  top: 20px;
  left: 10px;
  z-index: 1000; }
  #list_era ul li {
    color: #fff;
    line-height: 1.2; }
    #list_era ul li span {
      width: 2em;
      display: inline-block; }

#earth {
  position: absolute;
  width: 100%;
  height: 0%;
  padding-bottom: 100%;
  display: block;
  top: 0px;
  left: 0px; }
  #earth #earth_inner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0px;
    left: 0px; }
  #earth #cvs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    vertical-align: top;
    line-height: 1; }
  #earth #cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px; }

#ui_timeline {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0px;
  background: #181820; }
  #ui_timeline #description {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 110px;
    left: 0px; }
    #ui_timeline #description p.description {
      display: inline-block;
      font-size: 12px;
      font-size: 1.2rem;
      color: #fff;
      font-weight: 700;
      position: relative; }
      #ui_timeline #description p.description span {
        position: relative;
        display: inline-block; }
      #ui_timeline #description p.description:before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        bottom: 0px;
        left: 0px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
        filter: alpha(opacity=60);
        -webkit-opacity: 0.6;
        -khtml-opacity: 0.6;
        -moz-opacity: 0.6;
        opacity: 0.6; }
  #ui_timeline #area_flick {
    width: 180px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -90px;
    background: #2b2b31;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block; }
    #ui_timeline #area_flick .icon_prev,
    #ui_timeline #area_flick .icon_next {
      width: 10px;
      height: 10px;
      position: absolute;
      display: block;
      border-top: 1px solid #b1b1b1;
      top: 50%;
      margin-top: -5px;
      text-indent: -10000px; }
    #ui_timeline #area_flick .icon_prev {
      -ms-transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
      border-right: 1px solid #b1b1b1;
      left: 50%;
      margin-left: -60px; }
    #ui_timeline #area_flick .icon_next {
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-right: 1px solid #b1b1b1;
      left: 50%;
      margin-left: 50px; }
    #ui_timeline #area_flick #btn_flick {
      width: 30px;
      height: 30px;
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      margin: -15px 0 0 -15px;
      text-indent: -100000px;
      -webkit-transition: transform 0.3s ease;
      -ms-transition: transform 0.3s ease;
      transition: transform 0.3s ease;
      z-index: 2; }
      #ui_timeline #area_flick #btn_flick span {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #fff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: transform 0.2s ease;
        -ms-transition: transform 0.2s ease;
        transition: transform 0.2s ease; }
      #ui_timeline #area_flick #btn_flick.notransition {
        -webkit-transition: transform 0s ease;
        -ms-transition: transform 0s ease;
        transition: transform 0s ease; }
      #ui_timeline #area_flick #btn_flick.active span {
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4); }
  #ui_timeline #timeline {
    position: absolute;
    top: 0px;
    left: 15px;
    width: calc(100% - 30px);
    height: 3px; }
    #ui_timeline #timeline .time_current {
      width: 8px;
      height: 8px;
      display: block;
      background: #fff;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: -3px;
      margin-left: -4px;
      -webkit-transition: left 0.2s linear;
      -ms-transition: left 0.2s linear;
      transition: left 0.2s linear; }
    #ui_timeline #timeline #timeline_inr {
      width: 100%;
      height: 3px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      overflow: hidden;
      position: absolute;
      top: 0px;
      left: 0px; }
    #ui_timeline #timeline ul {
      width: 100%;
      display: block;
      height: 3px;
      background: -moz-linear-gradient(left, #00bcd4 0%, #80deea 0.6522%, #00bcd4 1.0869%, #80deea 8.6956%, #00bcd4 11.0869%, #e1f5fe 12.1739%, #ffa000 14.1304%, #00bcd4 19.5652%, #e1f5fe 41.3043%, #ffa000 42.826%, #ffa000 86.9565%, #b71c1c 87.9565%, #e65100 89%, #e65100 100%);
      background: -webkit-linear-gradient(left, #00bcd4 0%, #80deea 0.6522%, #00bcd4 1.0869%, #80deea 8.6956%, #00bcd4 11.0869%, #e1f5fe 12.1739%, #ffa000 14.1304%, #00bcd4 19.5652%, #e1f5fe 41.3043%, #ffa000 42.826%, #ffa000 86.9565%, #b71c1c 87.9565%, #e65100 89%, #e65100 100%);
      background: linear-gradient(left, #00bcd4 0%, #80deea 0.6522%, #00bcd4 1.0869%, #80deea 8.6956%, #00bcd4 11.0869%, #e1f5fe 12.1739%, #ffa000 14.1304%, #00bcd4 19.5652%, #e1f5fe 41.3043%, #ffa000 42.826%, #ffa000 86.9565%, #b71c1c 87.9565%, #e65100 89%, #e65100 100%); }
      #ui_timeline #timeline ul li {
        height: 3px;
        text-indent: -100000px;
        position: absolute;
        top: 0px; }
  #ui_timeline #wrap_ui {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 35px; }
  #ui_timeline a#btn_nextera,
  #ui_timeline a#btn_prevera {
    position: absolute;
    color: #fff;
    top: -50px;
    width: 24px;
    height: 24px;
    display: block;
    text-indent: -10000px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    top: 3px; }
    #ui_timeline a#btn_nextera:after,
    #ui_timeline a#btn_prevera:after {
      content: "";
      display: block;
      width: 4.2px;
      height: 8px;
      position: absolute;
      top: 50%;
      left: 50%; }
    #ui_timeline a#btn_nextera.disable,
    #ui_timeline a#btn_prevera.disable {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=20);
      -webkit-opacity: 0.2;
      -khtml-opacity: 0.2;
      -moz-opacity: 0.2;
      opacity: 0.2;
      cursor: default;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  #ui_timeline a#btn_prevera {
    left: 36px; }
  #ui_timeline a#btn_nextera {
    right: 36px; }
  #ui_timeline a#btn_nextera:after {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMuMDUgOTQuOTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzLjA1IDk0Ljk1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTUuNjUsOTQuOTVjLTEuNCwwLTIuOS0wLjUtNC0xLjZjLTIuMi0yLjItMi4yLTUuNywwLTcuOWwzNy45LTM4TDEuNjUsOS41NWMtMi4yLTIuMi0yLjItNS43LDAtNy45YzIuMi0yLjIsNS43LTIuMiw3LjksMGw0MS45LDQxLjhjMS4xLDEuMSwxLjYsMi41LDEuNiw0cy0wLjYsMi45LTEuNiw0bC00MS45LDQxLjlDOC40NSw5NC40NSw3LjA1LDk0Ljk1LDUuNjUsOTQuOTVMNS42NSw5NC45NXoiLz48L3N2Zz4=");
    background-size: cover;
    background-repeat: no-repeat;
    margin: -4px 0 0 -1px; }
  #ui_timeline a#btn_prevera:after {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTMuMDUgOTQuOTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzLjA1IDk0Ljk1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTQ3LjQsMGMxLjQsMCwyLjksMC41LDQsMS42YzIuMiwyLjIsMi4yLDUuNywwLDcuOWwtMzcuOSwzOGwzNy45LDM3LjljMi4yLDIuMiwyLjIsNS43LDAsNy45Yy0yLjIsMi4yLTUuNywyLjItNy45LDBMMS42LDUxLjVDMC41LDUwLjQsMCw0OSwwLDQ3LjVzMC42LTIuOSwxLjYtNEw0My41LDEuNkM0NC42LDAuNSw0NiwwLDQ3LjQsMEw0Ny40LDB6Ii8+PC9zdmc+");
    background-size: cover;
    background-repeat: no-repeat;
    margin: -4px 0 0 -3px; }

@-webkit-keyframes showLife {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: none; }
  1% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: block; }
  100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    display: block; } }

@-moz-keyframes showLife {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: none; }
  1% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: block; }
  100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    display: block; } }

@keyframes showLife {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: none; }
  1% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    display: block; }
  100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    display: block; } }

#lifes {
  width: calc(100% - 60px);
  height: 60%;
  position: absolute;
  top: 40%;
  left: 30px;
  -webkit-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; }
  #lifes.disable {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=30);
    -webkit-opacity: 0.3;
    -khtml-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3; }
  #lifes #life_inner {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    padding-bottom: 180px; }
  #lifes ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    position: relative; }
    #lifes ul li {
      width: 0%;
      height: 0px;
      padding-bottom: 0%;
      margin-right: 0%;
      position: relative;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
      filter: alpha(opacity=0);
      -webkit-opacity: 0;
      -khtml-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      -webkit-transition: transform 0.4s ease 0s, opacity 0.2s ease 0s;
      -ms-transition: transform 0.4s ease 0s, opacity 0.2s ease 0s;
      transition: transform 0.4s ease 0s, opacity 0.2s ease 0s; }
      #lifes ul li.show {
        width: 19%;
        padding-bottom: 19%;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
        filter: alpha(opacity=100);
        -webkit-opacity: 1;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        margin-right: 3%;
        margin-left: 3%;
        margin-bottom: 6%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1); }
      #lifes ul li .life_inr {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px; }
      #lifes ul li a {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        overflow: hidden; }
        #lifes ul li a:before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          background: #000;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
          filter: alpha(opacity=60);
          -webkit-opacity: 0.6;
          -khtml-opacity: 0.6;
          -moz-opacity: 0.6;
          opacity: 0.6; }
        #lifes ul li a img {
          width: 40px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -20px 0 0 -20px; }

#era {
  position: absolute;
  top: 0px;
  display: block;
  width: 100%;
  z-index: 7;
  top: 50%;
  margin-top: -.5em;
  -webkit-transition: opacity 0.6s linear 0s, top 0.6s ease 0s;
  -ms-transition: opacity 0.6s linear 0s, top 0.6s ease 0s;
  transition: opacity 0.6s linear 0s, top 0.6s ease 0s; }
  #era .time {
    margin-bottom: 6px; }
    #era .time p {
      text-align: center;
      font-size: 30px;
      font-size: 3rem;
      line-height: 1;
      color: #fff; }
    #era .time p.current_time {
      display: none;
      text-align: center;
      white-space: nowrap; }
      #era .time p.current_time span {
        display: inline-block;
        width: 294px;
        margin: auto;
        text-align: justify; }
    #era .time p#current_year {
      display: block; }
      #era .time p#current_year span.y {
        font-family: 'Nova Round', cursive;
        letter-spacing: -0.015em; }
      #era .time p#current_year span.bce {
        font-weight: 700;
        margin-left: 4px; }
  #era h3 {
    font-size: 12px;
    font-size: 1.2rem;
    color: #fff; }
  #era p.current_time_timeline {
    width: 100%;
    position: absolute;
    top: 0px;
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-size: 3rem;
    line-height: 1; }
  #era .wrap_year {
    text-align: center;
    -webkit-transition: opacity 0.6s ease;
    -ms-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease; }
  #era p.year {
    height: 20px;
    background: #f6f6f6;
    text-align: center;
    padding: 0 6px;
    font-size: 10px;
    font-size: 1rem;
    line-height: 20px;
    color: #626262;
    display: inline-block;
    font-weight: 700;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; }
  #era.today .time p.current_time {
    display: block; }
  #era.today .time p#current_year {
    display: none; }
  #era.today p.year #current_era {
    display: block; }
  #era.today p.year .bce {
    display: none; }
  #era.today p.current_time_timeline {
    display: none; }
  #era .time p.current_time {
    display: none; }
  #era p.current_time_timeline {
    display: block; }
  #era .bce {
    font-size: 14px;
    font-size: 1.4rem; }
    #era .bce.disable {
      display: none; }

#start {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px; }
  #start:before {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    background: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=60);
    -webkit-opacity: 0.6;
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
    content: ""; }
  #start .section_inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: table; }
  #start h1 {
    width: 100%;
    position: absolute;
    line-height: 1;
    top: 50%;
    margin-top: -.5em;
    -webkit-transition: font-size 0.6s ease 0s, top 0.6s ease 0s;
    -ms-transition: font-size 0.6s ease 0s, top 0.6s ease 0s;
    transition: font-size 0.6s ease 0s, top 0.6s ease 0s; }
    #start h1 span {
      color: #39b9f3;
      font-size: 60px;
      font-size: 6rem;
      line-height: 1;
      font-style: normal; }
  #start .content {
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 60px; }
  #start p {
    color: #fff; }
    #start p.mt1 {
      margin-top: 1em; }
  #start p.current_time {
    text-align: center;
    font-size: 30px;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1em; }
  #start .txts {
    width: 80%;
    margin: auto;
    margin-bottom: 40px; }
    #start .txts p {
      line-height: 2;
      font-size: 10px;
      font-size: 1rem; }
  #start .start_txts {
    overflow: hidden;
    display: none;
    margin-top: 56px; }
  #start a.btn_start {
    width: 200px;
    height: 60px;
    line-height: 60px;
    display: block;
    margin: auto;
    border: 1px solid #fff;
    color: #000;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    box-sizing: border-box; }
    #start a.btn_start .bg {
      width: 0%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: #fff;
      -webkit-transition: background 0.4s ease;
      -ms-transition: background 0.4s ease;
      transition: background 0.4s ease; }
    #start a.btn_start span {
      font-weight: bold;
      font-size: 16px;
      font-size: 1.6rem;
      position: relative; }
    #start a.btn_start.active {
      border-color: #39b9f3;
      color: #fff; }
      #start a.btn_start.active .bg {
        background: #39b9f3; }
      #start a.btn_start.active span {
        mix-blend-mode: normal !important;
        filter: none !important; }

#start .txts p {
  font-weight: 700; }

#start a.btn_start span {
  font-family: 'Nova Round', cursive; }

p.current_time_timeline,
p.current_time {
  font-family: 'Nova Round', cursive; }

@media all and (min-width: 375px) {
  #era .time {
    margin-bottom: 10px; }
  #start p.current_time {
    font-size: 36px;
    font-size: 3.6rem; }
  #start .txts {
    width: 82%; }
    #start .txts p {
      font-size: 12px;
      font-size: 1.2rem; } }

@media all and (min-width: 480px) {
  #earth {
    width: 480px;
    height: 480px;
    left: 50%;
    margin-left: -240px;
    top: 0%;
    margin-top: 0px; }
  #start .txts {
    text-align: center;
    width: 300px; }
  #lifes ul li {
    width: 100px;
    height: 100px;
    padding-bottom: 0%;
    margin-right: 20px;
    margin-bottom: 20px; }
    #lifes ul li:nth-child(4n) {
      margin-right: 20px; } }

/* Small Devices, Tablets */
/* PC */
@keyframes show_loading {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

body {
  -webkit-transition: opacity 0.6s ease;
  -ms-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease; }
  body.disable {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }

#earth {
  -webkit-transform: translate3d(0, 40%, 0);
  -ms-transform: translate3d(0, 40%, 0);
  transform: translate3d(0, 40%, 0); }
  #earth #earth_inner {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); }

#era {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  transition-delay: 0.8s;
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s; }

.begining .wrap_year {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }

.start.begining #era {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1; }

.start.begining #earth {
  -webkit-transition: top 1s ease 0s, transform 1s ease 0s;
  -ms-transition: top 1s ease 0s, transform 1s ease 0s;
  transition: top 1s ease 0s, transform 1s ease 0s; }
  .start.begining #earth #earth_inner {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transition: top 1s ease 0s, transform 0.6s ease 0s;
    -ms-transition: top 1s ease 0s, transform 0.6s ease 0s;
    transition: top 1s ease 0s, transform 0.6s ease 0s; }

.start.begining #start h1 {
  font-size: 20px;
  font-size: 2rem;
  top: 54px; }
  .start.begining #start h1 span {
    font-size: 34px;
    font-size: 3.4rem; }

.start.begining.show #era {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  top: 25%;
  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s; }

.start.begining.show #earth {
  -webkit-transition: top 1s ease 0s, transform 1s ease 0s;
  -ms-transition: top 1s ease 0s, transform 1s ease 0s;
  transition: top 1s ease 0s, transform 1s ease 0s; }

.start.begining.show #earth {
  -webkit-transform: translate3d(0, 10%, 0);
  -ms-transform: translate3d(0, 10%, 0);
  transform: translate3d(0, 10%, 0); }
  .start.begining.show #earth #earth_inner {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition: top 1s ease 0s, transform 1s ease 0s;
    -ms-transition: top 1s ease 0s, transform 1s ease 0s;
    transition: top 1s ease 0s, transform 1s ease 0s; }

.start.begining.show #start p, .start.begining.show #start a.btn_start {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1; }

.start.show #earth {
  -webkit-transition: top 1s ease 0s, transform 2s linear 0s;
  -ms-transition: top 1s ease 0s, transform 2s linear 0s;
  transition: top 1s ease 0s, transform 2s linear 0s; }

.start.show #earth {
  -webkit-transform: translate3d(0, 0%, 0);
  -ms-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0); }
  .start.show #earth #earth_inner {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1); }
  .start.show #earth.nodelay {
    transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s; }
    .start.show #earth.nodelay #earth_inner {
      -webkit-transition: transform 0.6s ease;
      -ms-transition: transform 0.6s ease;
      transition: transform 0.6s ease; }

.start.show #start p, .start.show #start a.btn_start {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1; }

.start.show #era {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  top: 30%; }

.start.show.haslife #earth {
  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -webkit-transition: transform 0.6s ease;
  -ms-transition: transform 0.6s ease;
  transition: transform 0.6s ease;
  -webkit-transform: translate3d(0, -15%, 0);
  -ms-transform: translate3d(0, -15%, 0);
  transform: translate3d(0, -15%, 0); }

.start.show.haslife #era {
  top: 20%; }

.start.show.haslife.modal #era {
  top: 10px; }

.start.show.haslife.modal #earth {
  -webkit-transform: translate3d(0, 40%, 0);
  -ms-transform: translate3d(0, 40%, 0);
  transform: translate3d(0, 40%, 0); }
  .start.show.haslife.modal #earth #earth_inner {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); }

#earth_inner {
  -webkit-transition: transform 2s linear;
  -ms-transition: transform 2s linear;
  transition: transform 2s linear; }

#ui_timeline {
  -webkit-transition: transform 0.4s ease;
  -ms-transition: transform 0.4s ease;
  transition: transform 0.4s ease; }

#start {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }

.begining #detail {
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

.begining #ui_timeline {
  -webkit-transform: translate3d(0, 150px, 0);
  -ms-transform: translate3d(0, 150px, 0);
  transform: translate3d(0, 150px, 0); }

.begining #earth_inner {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1); }

.begining #start {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: opacity 0.6s ease;
  -ms-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease; }
  .begining #start a.btn_start,
  .begining #start p {
    -webkit-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    transition: opacity 1s linear;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  .begining #start .txts p:nth-child(1) {
    transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -webkit-transition-delay: 1s; }
  .begining #start .txts p:nth-child(2) {
    transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -webkit-transition-delay: 2s; }
  .begining #start .txts p:nth-child(3) {
    transition-delay: 3s;
    -moz-transition-delay: 3s;
    -o-transition-delay: 3s;
    -webkit-transition-delay: 3s; }
  .begining #start .txts p:nth-child(4) {
    transition-delay: 4s;
    -moz-transition-delay: 4s;
    -o-transition-delay: 4s;
    -webkit-transition-delay: 4s; }
  .begining #start .txts p:nth-child(5) {
    transition-delay: 5s;
    -moz-transition-delay: 5s;
    -o-transition-delay: 5s;
    -webkit-transition-delay: 5s; }
  .begining #start .txts p:nth-child(6) {
    transition-delay: 6s;
    -moz-transition-delay: 6s;
    -o-transition-delay: 6s;
    -webkit-transition-delay: 6s; }
  .begining #start .txts p:nth-child(7) {
    transition-delay: 7s;
    -moz-transition-delay: 7s;
    -o-transition-delay: 7s;
    -webkit-transition-delay: 7s; }
  .begining #start a.btn_start {
    transition-delay: 8s;
    -moz-transition-delay: 8s;
    -o-transition-delay: 8s;
    -webkit-transition-delay: 8s; }
    .begining #start a.btn_start span {
      mix-blend-mode: exclusion;
      filter: invert(100%); }

#detail {
  -webkit-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  transition: transform 0.5s ease; }

#life_detail ul {
  -webkit-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  transition: transform 0.5s ease; }
  #life_detail ul.notransition {
    -webkit-transition: transform 0s ease;
    -ms-transition: transform 0s ease;
    transition: transform 0s ease; }

a#btn_close_life {
  display: none; }

.modal a#btn_close_life {
  display: block; }

.modal #ui_timeline {
  -webkit-transform: translate3d(0, 150px, 0);
  -ms-transform: translate3d(0, 150px, 0);
  transform: translate3d(0, 150px, 0); }

.modal #detail {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.modal #lifes {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }

.modal #earth #cvs {
  filter: blur(2px); }

#ui_timeline {
  z-index: 20; }

#detail {
  z-index: 7; }

#start {
  z-index: 6; }

@media all and (min-width: 375px) {
  .start.begining.show #era {
    top: 33%; }
  .start.begining.show #start p, .start.begining.show #start a.btn_start {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; }
  .start.show #era {
    top: 30%; }
  .start.show #earth {
    -webkit-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); }
  .start.show.haslife #earth {
    -webkit-transform: translate3d(0, 0%, 0);
    -ms-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0); }
  .start.show.haslife #era {
    top: 25%; }
  .start.show.haslife.modal #era {
    top: 35px; }
  .start.show.haslife.modal #earth #earth_inner {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5); } }

/* Small Devices, Tablets */
/* PC */
/* Small Devices, Tablets */
/* PC */
@keyframes show_loading {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

#detail {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  -webkit-transform: translate3d(0, calc(100% - 180px), 0);
  -ms-transform: translate3d(0, calc(100% - 180px), 0);
  transform: translate3d(0, calc(100% - 180px), 0); }
  #detail #bg_detail {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px; }
  #detail a#btn_close_life {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: 10px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%; }
    #detail a#btn_close_life span {
      width: 16px;
      height: 1px;
      background: #000;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0px 0 0 -8px; }
    #detail a#btn_close_life span:nth-child(1) {
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    #detail a#btn_close_life span:nth-child(2) {
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
  #detail #life_detail {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 70px; }
    #detail #life_detail ul {
      position: relative;
      height: 0px;
      padding-bottom: 130%; }
      #detail #life_detail ul li {
        width: 78.66%;
        height: 100%;
        position: absolute;
        top: 0px;
        overflow: hidden; }
        #detail #life_detail ul li.active .img_life {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1); }
        #detail #life_detail ul li.active .info {
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
          filter: alpha(opacity=100);
          -webkit-opacity: 1;
          -khtml-opacity: 1;
          -moz-opacity: 1;
          opacity: 1; }
        #detail #life_detail ul li .img_life {
          position: relative;
          -webkit-transform: scale(0.9);
          -moz-transform: scale(0.9);
          -ms-transform: scale(0.9);
          -o-transform: scale(0.9);
          -webkit-transition: transform 0.6s ease;
          -ms-transition: transform 0.6s ease;
          transition: transform 0.6s ease; }
          #detail #life_detail ul li .img_life:before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
            filter: alpha(opacity=60);
            -webkit-opacity: 0.6;
            -khtml-opacity: 0.6;
            -moz-opacity: 0.6;
            opacity: 0.6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; }
        #detail #life_detail ul li figure {
          width: 100%;
          height: 0px;
          padding-bottom: 100%;
          position: relative;
          display: block;
          background-size: 50%;
          background-position: center;
          background-repeat: no-repeat; }
        #detail #life_detail ul li .info {
          text-align: center;
          padding: 12px 0 0px 0;
          -webkit-transition: opacity 0.6s ease;
          -ms-transition: opacity 0.6s ease;
          transition: opacity 0.6s ease;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=${freaking-ie})";
          filter: alpha(opacity=0);
          -webkit-opacity: 0;
          -khtml-opacity: 0;
          -moz-opacity: 0;
          opacity: 0; }
          #detail #life_detail ul li .info h4 {
            font-weight: bold;
            font-size: 14px;
            font-size: 1.4rem;
            color: #fff;
            margin-bottom: 4px;
            line-height: 1;
            text-transform: uppercase;
            font-family: 'Nova Round', cursive;
            font-style: italic; }
          #detail #life_detail ul li .info h5 {
            font-size: 10px;
            font-size: 1rem;
            color: #fff;
            margin-bottom: 10px; }
        #detail #life_detail ul li .dl {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          justify-content: center;
          align-items: center; }
          #detail #life_detail ul li .dl p a {
            display: block;
            text-align: center; }
            #detail #life_detail ul li .dl p a .icon {
              width: 32px;
              height: 32px;
              border: 1px solid #fff;
              position: relative;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
              display: inline-block; }
            #detail #life_detail ul li .dl p a .icon:after {
              content: "";
              display: block;
              position: absolute;
              top: 50%;
              left: 50%; }
            #detail #life_detail ul li .dl p a span {
              display: block; }
            #detail #life_detail ul li .dl p a .txt_dl {
              color: #fff;
              font-weight: bold;
              font-size: 10px;
              font-size: 1rem;
              -webkit-transform: scale(0.7);
              -moz-transform: scale(0.7);
              -ms-transform: scale(0.7);
              -o-transform: scale(0.7); }
          #detail #life_detail ul li .dl p:nth-child(1) {
            margin-right: 10px; }
            #detail #life_detail ul li .dl p:nth-child(1) a .icon:after {
              width: 18px;
              height: 11.5px;
              margin: -4.5px 0 0 -9px;
              background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzNC42OSAyMi42NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzQuNjkgMjIuNjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNC42NywwLjAzbC02LjkyLTAuMDJjMCwwLjI1LDAsMC41Ni0wLjAxLDAuNzZjMS4wOC0wLjAyLDIuMDgsMC41OCwyLjU3LDEuNTVsLTYuNjMsMTUuNWMtMC4zMy0wLjc3LTMuNDEtNy43MS0zLjc3LTguNmwzLjIxLTYuNzRjMC43Mi0xLjA0LDEuODktMS42OCwzLjE2LTEuNzNsLTAuMDEtMC43MWgtNi42NmMtMC4wMiwwLjE3LDAsMC41NS0wLjAyLDAuNzNjMS44OCwwLjA2LDIuNTUsMC40OCwyLjEsMS42MmMtMC43NSwxLjcxLTIuMyw0Ljk1LTIuNjEsNS41NGMtMC45NS0yLjAyLTEuNTYtMy41Ny0yLjYtNS43NWMtMC40NS0xLjAxLDAuNTQtMS40MSwxLjU5LTEuNDNWMC4wNGwtNy43Mi0wLjAzYzAuMDEsMC4zMywwLDAuNTIsMCwwLjc2YzEuMDcsMC4wMiwyLjQ3LDAuMTQsMy4wMiwxLjA5YzAuNzQsMS40NSwzLjIsNy4yMywzLjk1LDguNzhjLTAuOTUsMS44NC0zLjI2LDYuMi00LjA5LDcuODRjLTEuMTgtMi42Ni01LjU2LTEzLjE0LTYuOC0xNS44NEM1Ljk3LDEuNDksNy43NSwwLjgyLDguNzgsMC43N0w4Ljc5LDBIMC4wMWMwLjAxLDAuMjMsMC4wMSwwLjYxLDAuMDEsMC43OWMxLjQzLTAuMDIsMy41MSwyLjM1LDQuMSwzLjgyYzIuNTYsNi4wMiw1LjIxLDEyLjAxLDcuNzYsMTguMDNjMC4yNywwLjAyLDAuNTMsMC4wMiwwLjgsMGMxLjY3LTMuNDUsMy42Mi03LjA5LDUuMzgtMTAuNThsNC40NCwxMC41OWgwLjc0YzIuODEtNi41MSw3LjAzLTE2LjUxLDguNDEtMTkuNjdjMC40Mi0xLjMxLDEuNjQtMi4yMSwzLjAyLTIuMjJsMC4wMS0wLjdMMzQuNjcsMC4wM3oiLz48L3N2Zz4=");
              background-size: cover;
              background-repeat: no-repeat; }
          #detail #life_detail ul li .dl p:nth-child(2) a .icon:after {
            width: 15.5px;
            height: 14.5px;
            margin: -7px 0 0 -7.5px;
            display: block;
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4NiA3OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODYgNzg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0wLDM1djQwYzAsMS41NywxLjQzLDMsMywzaDgwYzEuNTcsMCwzLTEuNDMsMy0zVjM1YzAtMS41Ny0xLjQzLTMtMy0zSDY5LjA0QzY3LjQ2LDMxLjk4LDY2LDMzLjQxLDY2LDM1czEuNDYsMy4wMiwzLjA0LDNIODB2MzRINlYzOGgxMC45NmMxLjU5LDAuMDIsMy4wNC0xLjQxLDMuMDQtM3MtMS40Ni0zLjAyLTMuMDQtM0gzQzEuMzYsMzIuMDEsMCwzMy41NywwLDM1eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00Myw2NGMtMC43MS0wLjAzLTEuNTQtMC4zMi0yLjA2LTAuODFsLTE3LTE2Yy0wLjk3LTEuMDktMS4zOC0zLjE2LTAuMjUtNC4zOGMxLjExLTEuMiwzLjI2LTEuMTYsNC4zNywwLjAzTDQwLDU0LjA5VjNjMC0xLjY2LDEuMzQtMywzLTNjMS42NiwwLDMsMS4zNCwzLDN2NTEuMDlsMTEuOTQtMTEuMjVjMS4wMy0xLjAyLDMuMjUtMS4yMSw0LjM4LTAuMDNjMS4xMiwxLjE4LDAuNzYsMy4zNC0wLjI1LDQuMzhsLTE3LDE2QzQ0LjQ4LDYzLjczLDQzLjc5LDY0LDQzLDY0TDQzLDY0eiIvPjwvc3ZnPg==");
            background-size: cover;
            background-repeat: no-repeat; }

@media all and (min-width: 375px) {
  #detail a#btn_close_life {
    bottom: 20px; }
  #detail #life_detail {
    top: 120px; }
    #detail #life_detail ul {
      padding-bottom: 118%; }
      #detail #life_detail ul li {
        width: 78.66%; }
        #detail #life_detail ul li figure {
          padding-bottom: 100%; }
        #detail #life_detail ul li .info {
          padding: 16px 0 0px 0; }
          #detail #life_detail ul li .info h4 {
            font-size: 18px;
            font-size: 1.8rem;
            margin-bottom: 4px; }
          #detail #life_detail ul li .info h5 {
            font-size: 10px;
            font-size: 1rem;
            margin-bottom: 20px; }
        #detail #life_detail ul li .dl p a .icon {
          width: 38px;
          height: 38px; }
        #detail #life_detail ul li .dl p a .txt_dl {
          font-size: 10px;
          font-size: 1rem;
          -webkit-transform: scale(0.7);
          -moz-transform: scale(0.7);
          -ms-transform: scale(0.7);
          -o-transform: scale(0.7); } }

@media all and (min-width: 480px) {
  #earth {
    width: 480px;
    height: 480px;
    left: 50%;
    margin-left: -240px;
    top: 0%;
    margin-top: 0px; }
  #start .txts {
    text-align: center;
    width: 300px; }
  #lifes ul li {
    width: 100px;
    height: 100px;
    padding-bottom: 0%;
    margin-right: 20px;
    margin-bottom: 20px; }
    #lifes ul li:nth-child(4n) {
      margin-right: 20px; } }

/* Small Devices, Tablets */
/* PC */

/*# sourceMappingURL=style.css.map */