@include pc-layout {
  #load-view {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: $min-width; min-height: $min-height;

    /**
     * frame
     */
    .frame {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: $theme-pink;

      /*** direction ***/
      .direction {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;

        .left,
        .right {
          position: absolute;
          left: calc(50% - 57.5px);
          width: 115px; height: 35px;
          
          div {
            float: left;
            width: 0; height: 0;
            margin-top: 2.5px;
            margin-right: 20px;
            border-top: solid 15px transparent;
            border-bottom: solid 15px transparent;
            opacity: 0.1;
          }
          div:last-child { margin-right: 0; }
          &::after { content: ""; display: block; clear: both; }
        }
        .bottom,
        .top {
          position: absolute;
          top: calc(50% - 57.5px);
          width: 35px; height: 115px;

          div {
            width: 0; height: 0;
            margin-left: 2.5px;
            margin-bottom: 20px;
            border-left: solid 15px transparent;
            border-right: solid 15px transparent;
            opacity: 0.1;
          }
          div:last-child { margin-bottom: 0; }
          &::after { content: ""; display: block; clear: both; }
        }

        /** left **/
        .left {
          top: 6px;
          div { border-right: solid 25px #fff; }
          div:nth-child(1) { animation: load-view__dire-left-3 3s linear 0s infinite; }
          div:nth-child(2) { animation: load-view__dire-left-2 3s linear 0s infinite; }
          div:nth-child(3) { animation: load-view__dire-left-1 3s linear 0s infinite; }
        }
        
        /** right **/
        .right {
          bottom: 6px;
          div { border-left: solid 25px #fff; }
          div:nth-child(1) { animation: load-view__dire-right-1 3s linear 0s infinite; }
          div:nth-child(2) { animation: load-view__dire-right-2 3s linear 0s infinite; }
          div:nth-child(3) { animation: load-view__dire-right-3 3s linear 0s infinite; }
        }

        /** bottom **/
        .bottom {
          left: 6px;
          div { border-top: solid 25px #fff; }
          div:nth-child(1) { animation: load-view__dire-bottom-1 3s linear 0s infinite; }
          div:nth-child(2) { animation: load-view__dire-bottom-2 3s linear 0s infinite; }
          div:nth-child(3) { animation: load-view__dire-bottom-3 3s linear 0s infinite; }
        }
        /** top **/
        .top {
          right: 6px;
          div { border-bottom: solid 25px #fff; }
          div:nth-child(1) { animation: load-view__dire-top-3 3s linear 0s infinite; }
          div:nth-child(2) { animation: load-view__dire-top-2 3s linear 0s infinite; }
          div:nth-child(3) { animation: load-view__dire-top-1 3s linear 0s infinite; }
        }
      }

      /*** square ***/
      .square {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;

        div {
          position: absolute;
          width: 40px; height: 40px;
          border: dashed 3px #fff;
          box-sizing: border-box;
          border-radius: 5px;
        }
        div:nth-child(1) { top: 10px; left: 10px; }
        div:nth-child(2) { top: 10px; right: 10px; }
        div:nth-child(3) { bottom: 10px; left: 10px; }
        div:nth-child(4) { bottom: 10px; right: 10px; }
      }

      /*** line ***/
      .line {
        position: absolute;
        top: 47px; left: 47px;
        width: calc(100% - 94px);
        height: calc(100% - 94px);

        div { position: absolute; box-sizing: border-box; }
        div:nth-child(1),
        div:nth-child(2) {
          width: 100%; height: 1px; left: 0;
          border-top: dashed 3px #fff;
        }
        div:nth-child(3),
        div:nth-child(4) {
          width: 1px; height: 100%;
          border-left: dashed 3px #fff;
        }
        div:nth-child(1) { top: 0; }
        div:nth-child(2) { bottom: 0; }
        div:nth-child(3) { left: 0; }
        div:nth-child(4) { right: 0; }
      }

      /*** rect ***/
      .rect {
        position: absolute;
        top: 90px; left: 90px;
        width: calc(100% - 180px); height: calc(100% - 180px);
        z-index: 1;

        /** bar **/
        .bar {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 100%;
          overflow: hidden;

          div {
            position: absolute;

            &::after {
              position: absolute;
              top: 0; left: 0;
              width: 100%; height: 100%;
              background-color: #fff;
              content: "";
              display: block;
            }
          }
          div:nth-child(1),
          div:nth-child(3) { left: 0; width: 100%; height: 3px; }
          div:nth-child(2),
          div:nth-child(4) { top: 0; width: 3px; height: 100%; }
          div:nth-child(1) {
            top: 0;
            &::after { transform: translateX(100%); }
          }
          div:nth-child(2) {
            left: 0;
            &::after { transform: translateY(-100%); }
          }
          div:nth-child(3) {
            bottom: 0;
            &::after { transform: translateX(-100%); }
          }
          div:nth-child(4) {
            right: 0;
            &::after { transform: translateY(100%); }
          }
          
          // animation ----------------------------------------------------------------------
          div:nth-child(1) { &::after {
            animation: load-view__rect-bar1 3s linear 0s infinite;
          }}
          div:nth-child(2) { &::after {
            animation: load-view__rect-bar2 3s linear 0s infinite;
          }}
          div:nth-child(3) { &::after {
            animation: load-view__rect-bar3 3s linear 0s infinite;
          }}
          div:nth-child(4) { &::after {
            animation: load-view__rect-bar4 3s linear 0s infinite;
          }}
        }

        /** effect **/
        .effect {
          position: absolute;
          top: 0; left: 0;
          width: 100%; height: 100%;

          div:nth-child(4) {
            position: absolute;
            top: -23.5px; right: -23.5px;
            width: 50px; height: 50px;
            background-color: #fff;
            border-radius: 50%;
            animation: load-view__rect-effect4 3s linear 0s infinite;
          }

          div:nth-child(1),
          div:nth-child(2),
          div:nth-child(3) {
            position: absolute;
            width: 50px; height: 50px;
            border-radius: 50%;
            box-sizing: border-box;
            border: solid 20px #fff;
            opacity: 0;
          }
          div:nth-child(1) { top: -23.5px; left: -23.5px; }
          div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
          div:nth-child(3) { bottom: -23.5px; right: -23.5px; }

          // animation --------------------------------------------------------------------
          div:nth-child(1) { animation: load-view__rect-effect1 3s linear 0s infinite; }
          div:nth-child(2) { animation: load-view__rect-effect2 3s linear 0s infinite; }
          div:nth-child(3) { animation: load-view__rect-effect3 3s linear 0s infinite; }
        }
      }
      
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 60px; left: 60px;
        width: calc(100% - 120px); height: calc(100% - 120px);
        background-color: $theme-light-pink;
        border-radius: 8px;
      }
    }

    /**
     * display
     */
    .display {
      position: absolute;
      top: 125px; left: 125px;
      width: calc(100% - 250px); height: calc(100% - 250px);

      /*** bg ***/
      .bg {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;

        div {
          position: absolute;
          left: 0;
          border-radius: 20px;
          width: 100%; height: calc(50% - 1px);
          opacity: 0.7;

          &::before,
          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 45px; height: 45px;
            border-radius: 50%;
            background-color: $theme-light-pink;
          }
        }
        div:nth-child(1) {
          top: 0; background-color: $theme-light-purple;
          &::before { top: -7.5px; left: -7.5px; }
          &::after  { top: -7.5px; right: -7.5px; }
        }
        div:nth-child(2) {
          bottom: 0; background-color: $theme-pink;
          &::before { bottom: -7.5px; left: -7.5px; }
          &::after  { bottom: -7.5px; right: -7.5px; }
        }
      }

      /*** blocks ***/
      .blocks {
        position: absolute;
        top: calc(50% - 100px); left: calc(50% - 350px);
        width: 700px; height: 200px;

        .block {
          position: absolute;
          width: 110px; height: 110px;
          background-color: #fff;
          box-shadow: 0 0 10px #444;
          transform: rotate(45deg);
          opacity: 0;

          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 5px; left: 5px;
            width: 100px; height: 100px;
            box-sizing: border-box;
            border: dashed 2px $theme-pink;
          }
          div {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border-radius: 50%;
            border: solid 40px $theme-light-pink;
            box-sizing: border-box;
            opacity: 0;
          }
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            transform: rotate(-45deg);
            opacity: 0;
          }
        }
        .block:nth-child(1) {
          top: 0; left: 0;
          &::after { background-image: url(../images/load-view/charcters/char-1.png); }
        }
        .block:nth-child(2) {
          bottom: 0; left: 100px;
          &::after { background-image: url(../images/load-view/charcters/char-2.png); }
        }
        .block:nth-child(3) {
          top: 0; left: 200px;
          &::after { background-image: url(../images/load-view/charcters/char-3.png); }
        }
        .block:nth-child(4) {
          bottom: 0; left: 300px;
          &::after { background-image: url(../images/load-view/charcters/char-4.png); }
        }
        .block:nth-child(5) {
          top: 0; left: 400px;
          &::after { background-image: url(../images/load-view/charcters/char-5.png); }
        }
        .block:nth-child(6) {
          bottom: 0; left: 500px;
          &::after { background-image: url(../images/load-view/charcters/char-6.png); }
        }
        .block:nth-child(7) {
          top: 0; left: 600px;
          &::after { background-image: url(../images/load-view/charcters/char-7.png); }
        }

        // animation -------------------------------------------------------------------
        .block:nth-child(1) { animation: load-view__block1 0.5s ease 0.0s forwards; }
        .block:nth-child(2) { animation: load-view__block2 0.5s ease 0.1s forwards; }
        .block:nth-child(3) { animation: load-view__block1 0.5s ease 0.2s forwards; }
        .block:nth-child(4) { animation: load-view__block2 0.5s ease 0.3s forwards; }
        .block:nth-child(5) { animation: load-view__block1 0.5s ease 0.4s forwards; }
        .block:nth-child(6) { animation: load-view__block2 0.5s ease 0.5s forwards; }
        .block:nth-child(7) { animation: load-view__block1 0.5s ease 0.6s forwards; }
        
        .block[data-state="true"]:nth-child(1) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char1 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(2) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char2 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(3) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char3 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(4) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char4 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(5) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char5 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(6) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char6 0.8s ease 0s forwards; }
        }
        .block[data-state="true"]:nth-child(7) {
          div      { animation: load-view__block-effect 0.5s ease 0s forwards; }
          &::after { animation: load-view__char7 0.8s ease 0s forwards; }
        }
      }

      /*** progress-bar ***/
      #progress-bar {
        position: absolute;
        bottom: 20px; left: 100px;
        width: calc(100% - 200px); height: 30px;
        border: solid 3px #fff;
        box-sizing: border-box;
        border-radius: 20px;
        padding: 5px;

        div {
          width: 0%; height: 100%;
          border-radius: 10px;
          background-color: #fff;
          transition: all 0.5s ease 0s;
        }
      }
    }
  }

  #load-view[data-state="fin"] {
    
  }
}