@charset "UTF-8";
@font-face {
  font-family: 'supermarket';
  src: url("../fonts/supermarket.eot");
  src: local("☺"), url("../fonts/supermarket.woff") format("woff"), url("../fonts/supermarket.ttf") format("truetype"), url("../fonts/supermarket.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

* {
  font-family: supermarket;
  font-size: 18px;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  border: none;
  box-sizing: border-box !important;
  -webkit-user-select: none !important;
  /* Chrome all / Safari all */
  -moz-user-select: none !important;
  /* Firefox all */
  -ms-user-select: none !important;
  /* IE 10+ */
  user-select: none !important;
  /* Likely future */ }

*:focus {
  outline: none; }

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

body {
  background-color: #000000; }

/**/
.font-Impact {
  font-family: Impact; }

.txt_margin-top-10 {
  margin-top: 10%; }

.txt_margin-top-20 {
  margin-top: 20%; }

.txt_margin-top-30 {
  margin-top: 30%; }

.txt_margin-top-40 {
  margin-top: 40%; }

.text-color-white {
  color: #FFFFFF; }

.text-color-black {
  color: black; }

.text-color-dark-grey {
  color: #53585f; }

.text-size--75 {
  font-size: .75em !important; }

.text-size-1 {
  font-size: 1em !important; }

.text-size-11-5 {
  font-size: 1.15em !important; }

.text-size-12 {
  font-size: 1.2em !important; }

.text-size-12-5 {
  font-size: 1.25em !important; }

.text-size-15 {
  font-size: 1.5em !important; }

.text-size-17-5 {
  font-size: 1.75em !important; }

.text-size-2 {
  font-size: 2em !important; }

.text-size-25 {
  font-size: 2.5em !important; }

.text-size-15-mid {
  font-size: 1.5em;
  vertical-align: middle; }

.text-size-14px {
  font-size: 14px !important; }

.text-size-15px {
  font-size: 15px !important; }

.text-size-16px {
  font-size: 16px !important; }

.text-size-17px {
  font-size: 17px !important; }

.text-size-18px {
  font-size: 18px !important; }

.text-size-19px {
  font-size: 19px !important; }

.text-size-20px {
  font-size: 20px !important; }

.text-size-24px {
  font-size: 24px !important; }

.text-size-30px {
  font-size: 30px !important; }

.text-size-60px {
  font-size: 60px !important; }

._show {
  display: block; }

._hide {
  display: none; }

._float-left {
  float: left; }

._float-right {
  float: right; }

.text-align-left {
  text-align: left; }

.text-padding_TB-10 {
  padding-top: 10pt;
  padding-bottom: 10pt; }

.text-margin_B-15 {
  margin-bottom: 15pt; }

.text-bottom-10 {
  bottom: 10pt; }

.text-bottom-15 {
  bottom: 15pt; }

.mouse-pointer:hover {
  cursor: pointer; }

.circle {
  border-radius: 50%;
  width: 125px;
  height: auto;
  min-height: 125px;
  padding: 1pt;
  /* width and height can be anything, as long as they're equal */ }

.custom-fadeIn {
  -webkit-animation: fadeIn 1.5s infinite !important;
  animation: fadeIn 1.5s infinite !important; }

.img-middle {
  margin: auto;
  height: 90%;
  line-height: 100%; }
  .img-middle > img {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }

.img-middle-25 {
  margin: auto;
  height: 90%;
  line-height: 100%; }
  .img-middle-25 > img {
    position: relative;
    top: 25%;
    transform: translateY(-50%); }

.aspect-ratio {
  max-width: 100%;
  height: auto;
  object-fit: contain; }

/**/
.scenes,
.scene {
  position: relative;
  width: auto;
  height: 100%;
  display: block;
  margin: auto; }

.scene {
  background-color: #000000; }

.scene_auto {
  display: flex; }

._road {
  display: block;
  position: absolute;
  z-index: 9;
  right: 1.5%;
  border-radius: 5px; }

._bike {
  display: none;
  position: absolute;
  z-index: -1;
  width: 60px;
  right: 1.5%; }

._bike-stikybottom {
  display: block;
  z-index: 11;
  position: absolute;
  width: 60px;
  right: 1.5%; }

._common_scene {
  position: relative;
  width: 100%;
  min-height: 640px; }
  ._common_scene > ._point {
    position: absolute;
    width: 400px;
    z-index: 10;
    top: 3%;
    right: 1.5%; }
    ._common_scene > ._point:hover {
      cursor: pointer; }

.start-scene {
  z-index: 9990;
  height: 100vh !important; }
  .start-scene > ._top {
    position: relative;
    display: block;
    width: auto;
    height: 65%; 
    background: url(../img/start_scene_bg.png) no-repeat;
    background-size: cover;
    background-position: 70%;}
    .start-scene > ._top > img {
      display: none;
      width: 100%;
      margin: auto; }
    .start-scene > ._top > ._absul {
      position: absolute; }
  .start-scene > ._center {
    height: 28%;
    width: 100%;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
    padding-top: 18px; }
    .start-scene > ._center > a > img {
      width: 28%;
      display: inline-block;
      margin: 1%; }
  .start-scene > ._bottom {
    display: inline-flex;
    height: 7%;
    width: 100%;
    text-align: center;
    vertical-align: middle; }
    .start-scene > ._bottom > img {
      height: 50%;
      display: inline-block;
      margin: auto; }

.first-scene > ._top {
  display: block;
  width: auto;
  height: 45%;
  width: 100%;
  overflow: hidden; }

.first-scene > ._bottom {
  display: block;
  height: 55%;
  width: 100%; }
  .first-scene > ._bottom > ._product {
    display: block;
    text-align: center;
    margin-left: 23.5%;
    width: 75%;
    opacity: 1;
    height: 55%;
    position: relative; }
    .first-scene > ._bottom > ._product > div {
      margin: auto;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .first-scene > ._bottom > ._product > div > div.tooltipsss {
        display: block;
        float: left;
        border-radius: 10px;
        background-color: #FFFFFF;
        font-size: 24px;
        padding: 5pt;
        margin: 5pt;
        cursor: pointer; }
  .first-scene > ._bottom > ._content_bottom {
    background-color: #dcbd23;
    opacity: 1;
    height: 45%; }
    .first-scene > ._bottom > ._content_bottom > .-Yamalube-text {
      float: right;
      position: absolute;
      width: 43%;
      line-height: 1;
      top: 50%;
      transform: translateY(-50%);
      left: 22%; }

.end-scene {
  position: relative; }
  .end-scene > ._top {
    display: inline-block;
    width: auto;
    height: 90%;
    width: 100%; }
    .end-scene > ._top > ._header {
      display: inline-block;
      height: 8%;
      width: 100%;
      overflow: hidden; }
      .end-scene > ._top > ._header > h1 {
        margin-left: 5%;
        color: #FFFFFF;
        padding-top: 8pt; }
    .end-scene > ._top > ._second {
      display: inline-block;
      height: 46%;
      width: 100%;
      overflow: hidden; }
      .end-scene > ._top > ._second > ._second_box {
        position: relative;
        display: inline-block;
        width: 50%;
        height: 100%;
        color: #FFFFFF;
        text-align: center;
        vertical-align: middle; }
        .end-scene > ._top > ._second > ._second_box > ._ellipse {
          margin-top: 30%;
          margin-left: 5%;
          /*width:150px;
                    height:150px;*/
          text-align: center;
          vertical-align: middle; }
    .end-scene > ._top > ._banner {
      /* margin-top: 1.5%; */
      display: flex;
      height: 30%;
      width: 80%;
      text-align: center;
      margin: auto; }
      .end-scene > ._top > ._banner >a{
                width: 30%;
                display: inline-block;
                margin: 1%;
                height: auto;
            }
	
      .end-scene > ._top > ._banner > a > img{
                    width: 100%;
                    object-fit: contain;
            }
  .end-scene > ._bottom {
    display: block;
    height: 9.9%;
    width: 100%;
    line-height: 1;
    text-align: center; }
  .end-scene > ._point {
    position: absolute;
    width: 400px;
    bottom: 12%;
    z-index: 10;
    right: 1.5%; }

._navi {
  display: block;
  margin: auto;
  padding-top: 11%;
  padding-left: 2.5%;
  padding-right: 5%;
  width: 90%;
  height: 60%;
  opacity: 1; }
  ._navi > ._box_text {
    margin-bottom: 20px; }
  ._navi > ._box_nav {
    display: inline-block;
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 20px;
    padding: 5pt;
    margin: 5pt;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden; }

._content {
  display: block;
  width: 100%;
  height: 40%;
  font-size: 1em;
  margin-top: 14%;
  margin-left: 15pt;
  opacity: 1; }
  ._content > .-content ._img_content {
    margin-top: -20pt;
    height: 90%;
    width: 45%; }
  ._content > .-content ._body {
    color: #FFFFFF;
    position: absolute;
    top: 48.5%;
    left: 45%;
    width: 45%; }
  ._content > .-content ._img_header {
    height: auto;
    width: 70%; }
  ._content > .-content ._img_header_small {
    height: auto;
    width: 40%; }
  ._content > .-content ._img_header_full {
    height: auto;
    width: 100%; }

._content__show {
  position: relative;
  margin-top: -5%;
  height: 100%;
  width: 100%;
  margin-left: -5px; }
  ._content__show ._div_til_img {
    opacity: 0; }
  ._content__show ._div_line {
    opacity: 0; }
  ._content__show ._text_pattern {
    opacity: 0;
    padding-top: 20px !important;
    padding-bottom: 20px !important; }
  ._content__show ._body {
    opacity: 0; }

/*
*/
.tooltip_arrow {
  position: absolute;
  display: none;
  z-index: 9999; }

.tooltip_arrow_box {
  position: relative;
  background: #26c6da;
  border: 10px solid #FFFFF7;
  padding: 20px;
  border-radius: 10px;
  min-width: 300px;
  min-height: 250px;
  max-height: 300px;
  color: #FFFFF7; }

.tooltip_arrow_box:after, .tooltip_arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  overflow: hidden; }

.tooltip_arrow_box:after {
  border-color: rgba(38, 198, 218, 0);
  border-top-color: #26c6da;
  border-width: 30px;
  margin-left: -30px; }

.tooltip_arrow_box:before {
  border-color: rgba(255, 255, 247, 0);
  border-top-color: #FFFFF7;
  border-width: 44px;
  margin-left: -44px; }

.tooltip-arrow-L1 .tooltip_arrow_box:after, .tooltip-arrow-L1 .tooltip_arrow_box:before {
  left: 10% !important; }

.tooltip-arrow-L2 .tooltip_arrow_box:after, .tooltip-arrow-L2 .tooltip_arrow_box:before {
  left: 36% !important; }

.tooltip-arrow-L3 .tooltip_arrow_box:after, .tooltip-arrow-L3 .tooltip_arrow_box:before {
  left: 61% !important; }

.tooltip-arrow-L4 .tooltip_arrow_box:after, .tooltip-arrow-L4 .tooltip_arrow_box:before {
  left: 86% !important; }