@import url(https://fonts.googleapis.com/css?family=Arsenal);
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
  

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

  #designconcept {
      position: relative;
  }

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

  

  

  .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);
      }
  }

  

  .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);
      }
  }

  

  .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: -40%;
      }
  }

  @media screen and (max-width: 960px) {      
      #designconcept .t1 {
          font-family:"Arsenal","Alegreya Sans","Titillium Web","sans-serif","微軟正黑體","Microsoft JhengHei";
          margin-top: 0px;
          z-index: 155;
          position: static;
          max-width: 80%;
          left: 0%;
          right: 0%;
          margin:0 auto;
      }
  }

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