/* text */

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

#designconcept {
   overflow: hidden;
   display: relative;
   margin-bottom:6%;
}

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




/* 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: 1366px) {
        #designconcept {
           margin-bottom:20%;
        }
}


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

}