@-webkit-keyframes arrow_down {
  0% {
    margin-top: 0; }
  5% {
    margin-top: 10px; }
  10% {
    margin-top: 0px; }
  15% {
    margin-top: 10px; }
  20% {
    margin-top: 0; }
  100% {
    margin-top: 0; } }
@-webkit-keyframes show_slide {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes topics_topbar {
  0% {
    opacity: 0;
    -webkit-transform-origin: -1000px 35px;
    -webkit-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-webkit-keyframes topics_rightbar {
  0% {
    opacity: 0;
    -webkit-transform-origin: 35px 900px;
    -webkit-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-webkit-keyframes topics_bottombar {
  0% {
    opacity: 0;
    -webkit-transform-origin: -1000px 35px;
    -webkit-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-webkit-keyframes online_store_topbar {
  0% {
    opacity: 0;
    -webkit-transform-origin: 2500px 35px;
    -webkit-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-webkit-keyframes online_store_leftbar {
  0% {
    opacity: 0;
    -webkit-transform-origin: 35px 1700px;
    -webkit-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-webkit-keyframes online_store_bottombar {
  0% {
    opacity: 0;
    -webkit-transform-origin: 2500px 35px;
    -webkit-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0deg); } }
@-moz-keyframes arrow_down {
  0% {
    margin-top: 0; }
  5% {
    margin-top: 10px; }
  10% {
    margin-top: 0px; }
  15% {
    margin-top: 10px; }
  20% {
    margin-top: 0; }
  100% {
    margin-top: 0; } }
@-moz-keyframes show_slide {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes topics_topbar {
  0% {
    opacity: 0;
    -moz-transform-origin: -1000px 35px;
    -moz-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@-moz-keyframes topics_rightbar {
  0% {
    opacity: 0;
    -moz-transform-origin: 35px 900px;
    -moz-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@-moz-keyframes topics_bottombar {
  0% {
    opacity: 0;
    -moz-transform-origin: -1000px 35px;
    -moz-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@-moz-keyframes online_store_topbar {
  0% {
    opacity: 0;
    -moz-transform-origin: 2500px 35px;
    -moz-transform: rotate(30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@-moz-keyframes online_store_leftbar {
  0% {
    opacity: 0;
    -moz-transform-origin: 35px 1700px;
    -moz-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@-moz-keyframes online_store_bottombar {
  0% {
    opacity: 0;
    -moz-transform-origin: 2500px 35px;
    -moz-transform: rotate(-30deg); }
  100% {
    opacity: 1;
    -moz-transform: rotate(0deg); } }
@keyframes arrow_down {
  0% {
    margin-top: 0; }
  5% {
    margin-top: 10px; }
  10% {
    margin-top: 0px; }
  15% {
    margin-top: 10px; }
  20% {
    margin-top: 0; }
  100% {
    margin-top: 0; } }
@keyframes show_slide {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes topics_topbar {
  0% {
    opacity: 0;
    transform-origin: -1000px 35px;
    transform: rotate(-30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
@keyframes topics_rightbar {
  0% {
    opacity: 0;
    transform-origin: 35px 900px;
    transform: rotate(30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
@keyframes topics_bottombar {
  0% {
    opacity: 0;
    transform-origin: -1000px 35px;
    transform: rotate(30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
@keyframes online_store_topbar {
  0% {
    opacity: 0;
    transform-origin: 2500px 35px;
    transform: rotate(30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
@keyframes online_store_leftbar {
  0% {
    opacity: 0;
    transform-origin: 35px 1700px;
    transform: rotate(-30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
@keyframes online_store_bottombar {
  0% {
    opacity: 0;
    transform-origin: 2500px 35px;
    transform: rotate(-30deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
div.video_container {
  position: fixed;
  overflow: hidden;
  width: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0; }
  div.video_container .top_movie {
    width: 100%;
    left: 0;
    top: 0; }
  @media screen and (max-width: 768px) {
    div.video_container {
      top: 80px; } }

.btn_sound {
  position: fixed;
  right: 15px;
  top: 70px;
  width: 38px; }

.video_over_area {
  z-index: 10; }
  .video_over_area .scroll_on_video {
    position: fixed;
    margin: auto;
    color: #EFEFEF;
    width: 420px;
    left: 0;
    right: 0;
    text-align: center; }
    .video_over_area .scroll_on_video a {
      color: #EFEFEF; }
      .video_over_area .scroll_on_video a:hover {
        text-decoration: none; }
    .video_over_area .scroll_on_video .down_arrow_base {
      margin: auto;
      position: absolute;
      width: 20px;
      height: 30px;
      left: 0;
      right: 0; }
      .video_over_area .scroll_on_video .down_arrow_base .down_arrow {
        width: 10px;
        margin-left: 5px;
        height: 20px;
        background-image: url("../imgs/down_arrow.svg");
        -webkit-animation: arrow_down 5s ease infinite;
        -moz-animation: arrow_down 5s ease infinite;
        animation: arrow_down 5s ease infinite; }
    .video_over_area .scroll_on_video .text_scroll {
      width: 65px;
      margin: auto;
      text-align: center;
      margin-top: 30px; }
  @media screen and (max-width: 768px) {
    .video_over_area {
      /*margin-top:80px;*/
      display: none; }
      .video_over_area .scroll_on_video {
        display: none; } }

.content {
  position: relative;
  background-color: white;
  z-index: 20; }
  @media screen and (max-width: 768px) {
    .content {
      margin-top: 80px !important; } }
  .content .container-fluid {
    overflow: visible; }
  .content .sp_text {
    display: none;
    /*
    @media screen and(max-width: 768px) {
      display:block;
      background-color: $color_dark;
      color : $color_light;
      margin : auto;
      padding: 10px;
      width:100%;
    }*/ }
  .content #slide {
    width: 100%;
    scroll-behavior: smooth; }
    .content #slide .slide_base {
      margin: auto;
      margin-top: 90px;
      width: 836px; }
      .content #slide .slide_base .slide_camera {
        background-image: url("../imgs/camera.png");
        position: relative;
        width: 100px;
        height: 243px;
        top: 296px; }
      .content #slide .slide_base .slide_canvas {
        position: relative;
        left: 30px;
        width: 716px;
        height: 509px;
        overflow: hidden; }
        .content #slide .slide_base .slide_canvas ul {
          list-style-type: none;
          padding: 0;
          position: relative;
          overflow: hidden;
          margin: 0;
          width: 100%;
          height: 100%; }
          .content #slide .slide_base .slide_canvas ul li {
            opacity: 0;
            position: relative;
            -webkit-transform: scale(1);
            -webkit-transition: opacity 2s linear, transform 10.5s linear;
            -moz-transform: scale(1);
            -moz-transition: opacity 2s linear, transform 10.5s linear;
            transform: scale(1);
            transition: opacity 2s linear, transform 10.5s linear; }
            .content #slide .slide_base .slide_canvas ul li:not(:first-child) {
              position: absolute;
              top: 0;
              left: 0; }
            .content #slide .slide_base .slide_canvas ul li.show {
              opacity: 1; }
            .content #slide .slide_base .slide_canvas ul li.zoom {
              -webkit-transform: scale(1.2);
              -moz-transform: scale(1.2);
              transform: scale(1.2); }
            .content #slide .slide_base .slide_canvas ul li div {
              margin-top: 54px;
              width: 716px;
              height: 402px; }
              .content #slide .slide_base .slide_canvas ul li div.large_height {
                margin-top: 0;
                height: 509px; }
            .content #slide .slide_base .slide_canvas ul li:hover {
              cursor: pointer; }
      @media screen and (max-width: 768px) {
        .content #slide .slide_base {
          width: 100%;
          margin-top: 0; }
          .content #slide .slide_base .slide_camera {
            display: none; }
          .content #slide .slide_base .slide_canvas {
            width: 100% !important;
            left: 0 !important; }
            .content #slide .slide_base .slide_canvas ul li div {
              width: 100%; }
              .content #slide .slide_base .slide_canvas ul li div img {
                width: 100%; } }
    .content #slide .top_image {
      width: 100%;
      left: 0;
      top: 0; }
      .content #slide .top_image .bx-wrapper {
        margin: 0;
        padding: 0;
        border: none; }
    @media screen and (max-width: 768px) {
      .content #slide {
        margin: 0; }
        .content #slide .col-sm-12 {
          padding: 0; }
          .content #slide .col-sm-12 .slide_base {
            display: none; } }
  .content .frame_bar {
    background-color: #E6E6E6;
    position: absolute;
    z-index: 3; }
  .content .btn_more {
    display: block;
    position: absolute;
    background-color: #363636;
    width: 200px;
    height: 57px;
    color: #EFEFEF;
    padding-top: 17px;
    padding-left: 27px;
    letter-spacing: 5px; }
    .content .btn_more .arrow_base {
      position: relative;
      width: 70px;
      height: 20px;
      float: right; }
      .content .btn_more .arrow_base .arrow_right {
        position: relative;
        padding-top: 10px;
        width: 20px;
        height: 20px;
        -webkit-animation: arrow_right_back 0.5s ease forwards;
        -moz-animation: arrow_right_back 0.5s ease forwards;
        animation: arrow_right_back 0.5s ease forwards; }
        .content .btn_more .arrow_base .arrow_right .arrow_shaft {
          position: relative;
          height: 1px;
          width: 100%;
          background-color: #EFEFEF; }
          .content .btn_more .arrow_base .arrow_right .arrow_shaft:before {
            content: "";
            position: absolute;
            width: 8px;
            height: 1px;
            right: 0;
            background-color: #EFEFEF;
            -webkit-transform-origin: 100% 50%;
            -webkit-transform: rotate(40deg);
            -moz-transform-origin: 100% 50%;
            -moz-transform: rotate(40deg);
            transform-origin: 100% 50%;
            transform: rotate(40deg); }
          .content .btn_more .arrow_base .arrow_right .arrow_shaft:after {
            content: "";
            position: absolute;
            width: 8px;
            height: 1px;
            right: 0;
            background-color: #EFEFEF;
            -webkit-transform-origin: 100% 50%;
            -webkit-transform: rotate(-40deg);
            -moz-transform-origin: 100% 50%;
            -moz-transform: rotate(-40deg);
            transform-origin: 100% 50%;
            transform: rotate(-40deg); }
    .content .btn_more:hover {
      text-decoration: none;
      border: 1px solid #363636;
      background-color: #EFEFEF;
      color: #363636; }
      .content .btn_more:hover .arrow_base .arrow_right {
        -webkit-animation: arrow_right 0.5s ease forwards;
        -moz-animation: arrow_right 0.5s ease forwards;
        animation: arrow_right 0.5s ease forwards; }
        .content .btn_more:hover .arrow_base .arrow_right .arrow_shaft {
          background-color: #363636; }
          .content .btn_more:hover .arrow_base .arrow_right .arrow_shaft:before {
            background-color: #363636; }
          .content .btn_more:hover .arrow_base .arrow_right .arrow_shaft:after {
            background-color: #363636; }
  .content #topics {
    margin-top: 60px;
    width: 100%;
    height: 750px; }
    .content #topics .col-sm-12 {
      padding: 0; }
    .content #topics h2 {
      position: absolute;
      top: 0px;
      left: 400px;
      width: 210px;
      color: #363636;
      margin: auto;
      font-size: 2.5rem !important;
      font-weight: bold;
      z-index: 10;
      letter-spacing: 0.2em; }
    .content #topics .top_bar {
      margin-top: 20px;
      width: 900px;
      height: 70px; }
      .content #topics .top_bar.topbar_anim {
        -webkit-animation: topics_topbar 2s linear forwards;
        -moz-animation: topics_topbar 2s linear forwards;
        animation: topics_topbar 2s linear forwards; }
    .content #topics .right_bar {
      margin-top: 20px;
      left: 830px;
      top: 70px;
      width: 70px;
      height: 555px; }
      .content #topics .right_bar.rightbar_anim {
        -webkit-animation: topics_rightbar 2s linear forwards;
        -moz-animation: topics_rightbar 2s linear forwards;
        animation: topics_rightbar 2s linear forwards; }
    .content #topics .bottom_bar {
      top: 640px;
      width: 900px;
      height: 70px;
      background-color: #e06733; }
      .content #topics .bottom_bar.bottombar_anim {
        -webkit-animation: topics_bottombar 2s linear forwards;
        -moz-animation: topics_bottombar 2s linear forwards;
        animation: topics_bottombar 2s linear forwards; }
    .content #topics .btn_more {
      z-index: 30;
      left: 635px;
      top: 675px; }
    .content #topics iframe {
      margin-top: 130px;
      margin-left: 30px;
      width: 770px;
      height: 450px;
      border: none;
      overflow: hidden; }
    @media screen and (max-width: 768px) {
      .content #topics {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        height: 820px; }
        .content #topics h2 {
          left: 0;
          right: 0; }
        .content #topics .top_bar {
          width: 100%;
          height: 35px; }
        .content #topics .right_bar {
          display: none; }
        .content #topics .bottom_bar {
          width: 100%;
          height: 35px;
          top: 710px; }
        .content #topics .btn_more {
          left: 0;
          right: 0;
          margin: auto;
          top: 675px; }
        .content #topics iframe {
          margin-left: 0;
          margin-top: 60px;
          width: 100%;
          height: 450px; } }
  .content #online_store {
    margin-top: 60px;
    margin-left: 100px;
    width: 900px; }
    .content #online_store .col-sm-12 {
      padding: 0; }
    .content #online_store h2 {
      position: absolute;
      top: 0px;
      left: 300px;
      width: 360px;
      color: #363636;
      margin: auto;
      font-size: 2.5rem !important;
      font-weight: bold;
      z-index: 10; }
    .content #online_store .top_bar {
      margin-top: 20px;
      width: 900px;
      height: 70px;
      background-color: #DCEEEE; }
      .content #online_store .top_bar.topbar_anim {
        -webkit-animation: online_store_topbar 2s linear forwards;
        -moz-animation: online_store_topbar 2s linear forwards;
        animation: online_store_topbar 2s linear forwards; }
    .content #online_store .left_bar {
      margin-top: 20px;
      left: 0;
      top: 70px;
      width: 70px;
      height: 790px;
      background-color: #eeeedc; }
      .content #online_store .left_bar.leftbar_anim {
        -webkit-animation: online_store_leftbar 2s linear forwards;
        -moz-animation: online_store_leftbar 2s linear forwards;
        animation: online_store_leftbar 2s linear forwards; }
    .content #online_store .bottom_bar {
      top: 770px;
      width: 900px;
      height: 70px;
      background-color: #25459a;
      z-index: 20; }
      .content #online_store .bottom_bar.bottombar_anim {
        -webkit-animation: online_store_bottombar 2s linear forwards;
        -moz-animation: online_store_bottombar 2s linear forwards;
        animation: online_store_bottombar 2s linear forwards; }
    .content #online_store .btn_more {
      z-index: 30;
      left: 655px;
      top: 805px; }
    .content #online_store iframe {
      margin-top: 130px;
      margin-left: 110px;
      width: 770px;
      height: 590px;
      border: none;
      overflow: hidden;
      vert-align: bottom; }
    @media screen and (max-width: 768px) {
      .content #online_store {
        margin: auto;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        height: 2800px; }
        .content #online_store h2 {
          left: 0;
          right: 0; }
        .content #online_store .top_bar {
          width: 100%;
          height: 35px; }
        .content #online_store .left_bar {
          display: none; }
        .content #online_store .bottom_bar {
          width: 100%;
          height: 35px;
          top: 2700px; }
        .content #online_store .btn_more {
          left: 0;
          right: 0;
          margin: auto;
          top: 2665px; }
        .content #online_store iframe {
          margin-left: 0;
          width: 100%;
          height: 2500px; } }
  .content #banners .bx-wrapper {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    max-width: none !important;
    background: transparent; }
    .content #banners .bx-wrapper .bx-viewport {
      width: 900px !important;
      margin: auto; }

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