/*! Writen  by SCSS */
.vsp1000 {
  display: none; }
  @media screen and (max-width: 1000px) {
    .vsp1000 {
      display: block; } }

.main_slide {
  position: relative;
  background: #000; }
  .main_slide .slide_thum {
    position: absolute;
    z-index: 99;
    width: 100%;
    bottom: 20px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 10px; }
    @media screen and (max-width: 600px) {
      .main_slide .slide_thum {
        bottom: 40px;
        gap: 8px; } }
    .main_slide .slide_thum li {
      cursor: pointer;
      width: 15px;
      height: 15px;
      background: #fff;
      opacity: 0.5;
      transition: opacity 0.4s ease-in-out 0s;
      will-change: opacity; }
      @media screen and (max-width: 480px) {
        .main_slide .slide_thum li {
          width: 10px;
          height: 10px; } }
      .main_slide .slide_thum li.active {
        opacity: 1; }
  .main_slide .main_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .main_slide .main_box .img {
      position: relative; }
      .main_slide .main_box .img .cap {
        max-width: calc(1200%/19.2);
        text-align: right; }
        @media screen and (max-width: 600px) {
          .main_slide .main_box .img .cap {
            max-width: 100%;
            text-align: left; } }
        @media screen and (max-width: 1000px) {
          .main_slide .main_box .img .cap .vsp1000 {
            display: block; } }
        @media screen and (max-width: 600px) {
          .main_slide .main_box .img .cap br {
            display: none !important; } }
    .main_slide .main_box.main01 {
      position: relative;
      opacity: 0;
      transition: opacity 2s ease-in-out 0s;
      will-change: opacity; }
      .main_slide .main_box.main01 .copy {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 1;
        transition: opacity 0.1s ease-in-out 3s;
        will-change: opacity; }
      .main_slide .main_box.main01.active {
        opacity: 1; }
    .main_slide .main_box.main02 {
      opacity: 0;
      transition: opacity 2s ease-in-out 0s;
      will-change: opacity; }
      body.scene2 .main_slide .main_box.main02 {
        opacity: 1; }
      .main_slide .main_box.main02 .copy {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 1;
        transition: opacity 0.1s ease-in-out 3s;
        will-change: opacity; }
      .main_slide .main_box.main02.active {
        opacity: 1; }
    .main_slide .main_box .cap1 {
      top: 5px;
      bottom: auto;
      right: 5px;
      left: auto; }
      @media screen and (max-width: 480px) {
        .main_slide .main_box .cap1 {
          top: auto;
          bottom: 5px; } }
    @media screen and (max-width: 480px) {
      .main_slide .main_box .cap2 {
        text-align: left; } }
    @media screen and (max-width: 480px) {
      .main_slide .main_box .cap3 {
        top: calc(240%/4.64); } }

.main_cap {
  padding: 10px 20px 0; }

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