@font-face {
          font-family: 'DIN Pro Medium';
          src: url('https://cdn.glitch.com/1e96397e-2ca4-4bf6-a962-d7ae8f45551a%2FDINPro-Medium.eot?v=1609869698406');
          src: url('https://cdn.glitch.com/1e96397e-2ca4-4bf6-a962-d7ae8f45551a%2FDINPro-Medium.eot?v=1609869698406') format('embedded-opentype'),
          url('https://cdn.glitch.com/1e96397e-2ca4-4bf6-a962-d7ae8f45551a%2FDINPro-Medium.woff?v=1609869697426') format('woff'),
          url('https://cdn.glitch.com/1e96397e-2ca4-4bf6-a962-d7ae8f45551a%2FDINPro-Medium.ttf?v=1609869698680') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  
@font-face {
font-family: 'DIN Pro Black';
src: url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Black.eot?v=1610213184832');
src: url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Black.eot?v=1610213184832') format('embedded-opentype'),
url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Black.woff?v=1610213182871') format('woff'),
url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Black.ttf?v=1610213184877') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DIN Pro Bold';
src: url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Bold.eot?v=1610212862646');
src: url('Dhttps://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Bold.eot?v=1610212862646?#iefix') format('embedded-opentype'),
url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Bold.woff?v=1610212861067') format('woff'),
url('https://cdn.glitch.com/2644f3b5-f9ea-48cf-8116-1e4b18fe7c47%2FDINPro-Bold.ttf?v=1610212862585') format('truetype');
font-weight: normal;
font-style: normal;
}
      body { 
            margin: 0;
            display: flex;
            flex-direction: column;
            font-family: 'DIN Pro Medium';
      }
      
      html, body, .main, .main-backdrop {
        height: 100%;
      }

  ar-button:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }

  ar-button:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }

  ar-button:focus-visible {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }
      .header {
        padding: 31px 0 36px 170px;
        color: #fff;
      }
      .main {
        position: relative;
        max-width: 100%;
        overflow: hidden;
      }

      .main > * {
        position: absolute;
        height: 100%;
        width: 100%;
        
      }
      .main-backdrop {
            width: 100%;
        background-size: cover;
      }

      .main-text {
        height: fit-content;
        font-style: normal;
        font-weight: 500;
        font-size: 54px;
        line-height: 62px;
        
        width: 886px;
        right: 200px;
        top: 334px;
        
        color: #fff;
      }
  .main-text-workarea {
    position: relative;
  }
      .logo {
        height: 63px;
      
      }

       .main-text-workarea .main-text-border,
      .main-text-workarea .main-text-border-2 {
            background-size: cover;
             position: absolute;
             bottom: calc(100% + 47px);
             left: -280px;
            width: 550px;
            height: 57px;
          }
      
      .main-text-workarea .main-text-border-2 {
             top: calc(100% + 70px);
             left: calc(100% - 90px);
          transform: rotate(180deg);
      }

  @media (min-width: 1024px) {
          .header {
             padding: 20px 0 20px 70px; 
          }
          .logo {
            height: 45px;
          }
          .qr{
              height: 200px;
              align-items: center;
            }
          .main-text-mobile{
            display: none;
          }
          .main-text-mobile2{
            display: none;
          }
          .main-text {
              right: 200px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 42px;
              line-height: 48px;
                width: 40%;
            text-align: center;
            align-items: center;
          }
    ar-button {
            display: none;
          }
          
      }


  @media (max-width: 1024px) and (min-width: 769px) {
          .header {
             padding: 19px 0 15px 15px; 
          }
          .logo {
            height: 26px;
          }
          ar-button{
            display: none;
          }
          .main-text-mobile{
            display: none;
          }
         .main-text-mobile2{
            display: none;
          }
          .main-text {
              right: 20px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 32px;
              line-height: 46px;
                width: 60%;
              text-align: center;
            align-items: center;
          }
          .main-text .main-text-workarea {
                padding: 0 68px;
          }
          
          .main-text-workarea .main-text-border,
          .main-text-workarea .main-text-border-2 {
              width: 500px;
              height: 25px;
          }
          
          .main-text-workarea .main-text-border {
             bottom: calc(100% + 16px);
             left: -100px;
          }
      
          .main-text-workarea .main-text-border-2 {
             top: calc(100% + 16px);
             right: 20px;
          }
          
      }


@media (max-width: 768px) {
          .header {
             padding: 19px 0 15px 15px; 
          }
          .logo {
            height: 26px;
          }
          .qr{
            display: none;
            }
          .main-text-desc{
            display: none;
          }
          .main-text-mobile{
            font-family: 'DIN Pro Bold';
          font-size: 15px;
          letter-spacing: 0.05em;
          }
            .main-text-mobile2{
              font-family: 'DIN Pro Bold';
          font-size: 35px;
              line-height: 1.5;
          }
          .main-text {
              height: 100%;
               width: 100%;
              right: 0;
              top: 0;
            
            padding: 160px 0 0 0;
            
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            
              text-align: center;
            
          }
          .main-text .main-text-workarea {
                padding: 0 68px;
            
            
          }
          .main-backdrop {
           background-color: black;
           background-size: cover;
          }
          
          .main-text-workarea .main-text-border,
          .main-text-workarea .main-text-border-2 {
              width: 500px;
              height: 25px;
          }
          
          .main-text-workarea .main-text-border {
            display:none; 
            bottom: calc(100% + 16px);
             left: 20px;
            
          }

          .main-text-workarea .main-text-border-2 {
            display:none; 
             top: calc(100% + 16px);
             right: 20px;
            
          }
          
      }

@media (max-height: 600px){
  .main-text{
    padding: 115px 0 0 0;
    
  }
  ar-button{
    height: 90px;
  }

}