body {
	margin: 0 !important;
}

.init-message {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  width: 100%;
  height: 100vh;
  background: #F3F5F7;
  font-size: 18px;
  font-weight: 700;
  text-align: center;

  & > .background {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 5;

    & > .logo {
      position: absolute;
      display: inline;
      top: 7.34vh;
      left: 6.25vw;
      width: 9.375vw;
      height: 3.3vh;
      cursor: pointer;
      z-index: 6;
    }

    & > .back01 {
      position: absolute;
      display: inline;
      top: 0;
      left: 9.9vw;
      width: 55vw;
      height: 83.2vh;
      z-index: 4;
    }

    & > .back02 {
      position: absolute;
      display: inline;
      top: 6.88vh;
      left: 28.33vw;
      width: 40.78vw;
      height: 59.81vh;
      z-index: 4;
    }
  }

  .init-header {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 4.375rem;

    .init-content {
      width: 7rem;
      height: 1.875rem;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .init-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30rem;
    height: auto;
    box-sizing: border-box;
    padding: 2rem 4.25rem;
    border-radius: 0.25rem;
    background: #ffffff;
    box-shadow:  0 0.3125rem 1.875rem rgba(0, 54, 99, 0.15);
    z-index: 30;

    .init-info {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 3rem;
      height: 3rem;
      margin-bottom: 1.25rem;
      border-radius: 50%;
      background:  #FFEBEB;
    }

    .init-info-success {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 3rem;
      height: 3rem;
      margin-bottom: 1.25rem;
      border-radius: 50%;
      background: #ffffff;

      & > .init-image {
        width: 48px;
        height: 48px;
      }
    }

    .init-title {
      margin-bottom: 0.75rem;
      color: #13253D;
	  font-family: RobotoBold;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.75rem;
    }

    .init-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 1.5rem;

      .init-text {
		&.invisible {
			display: none !important;
		}
		
        text-align: center;
        color:  #425166;
        font-size: 0.875rem;
        font-family: Roboto, sans-serif;
        font-weight: 400;
        line-height: 1.25rem;

        &:first-of-type {
          margin-right: 0.25rem;
        }
      }
    }
    
 
    .init-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 12rem;
      min-width: 4.125rem;
      height: 2.25rem;
      padding: 0 0.75rem;
      margin: 0;
      border: none;
      border-radius: 0.25rem;
      outline: none;
      background: #1BA8FF;
      color: #ffffff;;
      font-size: 0.875rem;
      font-weight: 400;
    }
  }

  .init-footer {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 3.875rem;
    z-index: 30;

    .init-resources {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 2.25rem;

      .init-resource {
        margin-left: 1.875rem;

        &:last-of-type {
          margin-right: 0;
        }

        .init-link {
          color: #425166;
          text-decoration: none;
          line-height: 1.25rem;
          font-size: 0.8125rem;
          font-weight: 400;
        }
      }
    }

    .init-copy {
      color:  #6A788A;
      line-height: 1.25rem;
      font-size: 0.75rem;
      font-weight: 400;
      padding-bottom: 0.5rem;
    }
  }
}

.init-message .init-modal .init-button:hover,
.init-message .init-modal .init-button:focus,
.init-message .init-modal .init-button:active {
  outline: none;
  background: #0093ED;
}

.init-message .init-footer .init-resources .init-resource .init-link:hover,
.init-message .init-footer .init-resources .init-resource .init-link:active {
  outline: none;
  border-bottom: 0.0625rem solid rgba(66, 81, 102, .5);
}



  @font-face {
    src: url('assets/Roboto/Roboto-Regular.ttf') format('truetype');
    font-family: "Roboto";
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    src: url('assets/Roboto/Roboto-Bold.ttf') format('truetype');
    font-family: "RobotoBold";
    font-weight: 500;
    font-style: normal;
  }