/* text */

  @font-face {
      font-family: 'AORUS';
      src: url('../images/AORUS-font.woff') format("woff");
  }

  #designconcept {
      position: relative;
      max-width: 1920px;
      margin:0 auto;      
  }

  #designconcept .t1 {
      font-family: 'Titillium Web', sans-serif, '微軟正黑體', Microsoft JhengHei;
      margin-top: -760px;
      z-index: 155;
      position: absolute;
      max-width: 680px;
      left: 60%;
      right: 10%;
      overflow: hidden;
      text-align: center;
  }


   #designconcept .tt2 {      
      top:3%;
      z-index: 155;
      position: absolute;
      left: 26%;      
      text-align: center;
      font-size:1.7em;
  }

  #designconcept .t1 h1{
      font-size:50px;
      
  }

  /* #designconcept .t2 {
      background-color:rgba(0,0,0,0.5);
      padding:10%;
  } */

  /* grab */

  .aorus_grab_move img {
      position: relative;
      opacity: 0;
      transition: 1s;
  }

  @keyframes aorus_grab {
      0% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      20% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      60% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.94, 0.94) translate(0, 0);
          -webkit-filter: blur(0px) brightness(0.4);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1.0);
      }
  }

  @keyframes aorus_grab_move {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(0.98, 0.98) translate(0, 0);
          -webkit-filter: contrast(1.15) brightness(0.8);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(1.01, 1.01) translate(0, 0);
          -webkit-filter: contrast(1) brightness(1.2);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(0.98, 0.98) translate(0, 0);
          -webkit-filter: contrast(1.15) brightness(0.8);
      }
  }

  /* wing */

  .aorus_wing_black img {
      opacity: 0;
      transition: 1s;
      position: relative;
      z-index: 151;
  }

  .aorus_wing_move img {
      position: relative;
      opacity: 1;
      transition: 1s;
  }

  .aorus_wing_left img {
      opacity: 0;
      transition: 1s;
      position: relative;
      z-index: 151;
  }

  .aorus_wing_left1 img {
      opacity: 0;
      transition: 1s;
      position: relative;
      z-index: 151;
  }

  .aorus_wing_light img {
      animation-delay: 3s;
      opacity: 0;
      transition: 1s;
      position: relative;
      z-index: 151;
  }

  @keyframes aorus_wing_left {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 0.5;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(3px) brightness(1.3);
      }
      70% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(2.2, 1.2) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
  }

  @keyframes aorus_wing_left1 {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 0.5;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(3px) brightness(1.3);
      }
      70% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1.4, 1.0) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
  }

  @keyframes aorus_wing_light {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      30% {
          top: 0px;
          left: 0;
          opacity: 0.1;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(1);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 0.7;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(2px) brightness(1.6);
      }
      75% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1.2, 1.0) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
  }

  @keyframes aorus_wing {
      0% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      20% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      60% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(0.94, 0.94) translate(0, 0);
          -webkit-filter: blur(0px) brightness(0.4);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1.0);
      }
  }

  @keyframes aorus_wing_black {
      0% {
          top: 0px;
          left: 0;
          opacity: 0.7;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(0px) brightness(1.0);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 0.6;
          transform: scale(0.94, 0.94) translate(0, 0);
          -webkit-filter: blur(0px) brightness(0.8);
      }
      80% {
          top: 0px;
          left: 0;
          opacity: 0.2;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(0.4);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(0.9, 0.9) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
  }

  @keyframes aorus_wing_move {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(0.98, 0.98) translate(0, 0);
          -webkit-filter: contrast(1.2) brightness(0.8);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 1;
          transform: scale(1.01, 1.01) translate(0, 0);
          -webkit-filter: contrast(1) brightness(1.2);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(0.98, 0.98) translate(0, 0);
          -webkit-filter: contrast(1.2) brightness(0.8);
      }
  }

  /* back */

  .aorus_back_left {
      transition: 3s;
      position: relative;
      z-index: 151;
  }

  .aorus_back_light {
      transition: 3s;
      position: relative;
      z-index: 151;
  }

  .aorus_back_light img {
      opacity: 0;
  }

  @keyframes aorus_back_left {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(0px) brightness(.0);
      }
      45% {
          top: 0px;
          left: 0;
          opacity: 0.4;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(10px) brightness(7);
      }
      85% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(3, 1.8) translate(0, 0);
          -webkit-filter: blur(20px) brightness(12);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(2.5, 1.4) translate(0, 0);
          -webkit-filter: blur(15px) brightness(15);
      }
  }

  @keyframes aorus_back_light {
      0% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.0);
      }
      18% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(.6);
      }
      40% {
          top: 0px;
          left: 0;
          opacity: 0.6;
          transform: scale(1.01, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(1.9);
      }
      85% {
          top: 0px;
          left: 0;
          opacity: 0.3;
          transform: scale(1, 1.02) translate(0, 0);
          -webkit-filter: blur(5px) brightness(1);
      }
      100% {
          top: 0px;
          left: 0;
          opacity: 0;
          transform: scale(1, 1) translate(0, 0);
          -webkit-filter: blur(5px) brightness(0.4);
      }
  }

  @media screen and (max-width: 1680px) {
      #designconcept .t1 {
          margin-top: -42%;
      }
  }


@media screen and (max-width: 1366px) {      
  #designconcept .tt2 {      
      font-size:1.2em;    
      
  }

}

  @media screen and (max-width: 960px) {      
      #designconcept .t1 {          
          margin-top: 0px;          
          position: static;
          max-width: 80%;          
          left: 0%;
          right: 0%;
          margin:0 auto;
          margin-bottom: 10%;
      }

      #designconcept .tt2 { 
        top:0%;
        padding-top:5%;      
        position: static;            
        text-align: center;
        left: 26%;            
        font-size:2em;
     }
  }


  @media screen and (max-width: 640px) {
      #designconcept .t2 {
          font-size: 15px;
      }
      #designconcept .t1 h1{
          font-size:40px;
      
       }

       #designconcept .tt2 {           
        font-size:1em;
     }

     


  }