.ba-slider {
       position: relative;
       overflow: hidden;
       z-index: 200;
   }
   
   .ba-slider img {
       width: 100%;
       display: block;
   }
   
   .ba-slider video {
       width: 100%;
       display: block;
   }
   
   .resize {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 50%;
       overflow: hidden;
       z-index: 200;
   }
   
   .resize_0 {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 50%;
       overflow: hidden;
       animation: imgmove 3s ease-in-out;
       z-index: 200;
       /* transition: 2s; */
   }
   
   .resize_ani {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 50%;
       overflow: hidden;
       z-index: 200;
   }
   
   @keyframes imgmove {
       0% {
           width: 50%;
       }
       30% {
           width: 10%;
       }
       75% {
           width: 85%;
       }
       90% {
           width: 40%
       }
       97% {
           width: 51%
       }
       100% {
           width: 50%;
       }
   }
   
   @keyframes linemove {
       0% {
           left: 50%;
       }
       30% {
           left: 10%;
       }
       75% {
           left: 85%;
       }
       90% {
           left: 40%
       }
       97% {
           left: 51%
       }
       100% {
           left: 50%;
       }
   }
   
   .handle {
       /* Thin line seperator */
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 3px;
       margin-left: -2px;
       background: rgba(255, 255, 255, .1);
       cursor: ew-resize;
       z-index: 200;
   }
   
   .handle2 {
       /* Thin line seperator */
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 3px;
       margin-left: -2px;
       background: rgba(255, 255, 255, .1);
       cursor: ew-resize;
       z-index: 200;
   }
   
   .handle_0 {
       /* Thin line seperator */
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 3px;
       margin-left: -2px;
       background: rgba(255, 255, 255, .1);
       cursor: ew-resize;
       animation: linemove 3s ease-in-out;
       z-index: 200;
       /* transition: 2s; */
   }
   
   .handle_ani {
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 3px;
       margin-left: -2px;
       background: rgba(255, 255, 255, .1);
       cursor: ew-resize;
       z-index: 200;
   }
   
   .handle:after {
       /* Big orange knob  */
       position: absolute;
       top: 60%;
       width: 80px;
       height: 40px;
       margin: -40px 0 0 -40px;
       content: '﹤﹥';
       color: #efefef;
       font-weight: bold;
       font-size: 18px;
       text-align: center;
       line-height: 40px;
       background: rgba(150, 150, 150, 0.6);
       border: 0px solid #fff;
       border-radius: 80px;
       transition: all 0.3s ease;
       z-index: 200;
   }
   
   .handle2:after {
       /* Big orange knob  */
       position: absolute;
       top: 60%;
       width: 120px;
       height: 40px;
       margin: -40px 0 0 -55px;
       content: 'ON﹤﹥OFF';
       color: #efefef;
       font-weight: bold;
       font-size: 18px;
       text-align: center;
       line-height: 40px;
       background: rgba(150, 150, 150, 0.6);
       border: 0px solid #fff;
       border-radius: 80px;
       transition: all 0.3s ease;
       z-index: 200;
   }
   
   .draggable:after {
       position: absolute;
       content: '﹤﹥';
       width: 90px;
       height: 30px;
       margin: -45px 0 0 -45px;
       line-height: 24px;
       font-size: 15px;
       z-index: 200;
   }
   
   .text_bar {
       color: #fff;
       background: #ff6400;
       padding: 0.5% 2% 0.5% 2%;
       border-radius: 1px;
       letter-spacing: 2px;
       transition: 0.3s;
       background: linear-gradient(-219deg, #ffbb00 5%, #ff6400);
       z-index: 200;
   }
   
   .text_bar:hover {
       color: #fff;
       background: #ff6400;
       padding: 0.5% 22% 0.5% 2%;
       border-radius: 1px;
       letter-spacing: 2px;
       transition: 0.5s;
       background: linear-gradient(-219deg, #ffbb00 5%, #ff6400);
       z-index: 200;
   }
   /* aorus slider  */
   
   @keyframes Aorus_ani {
       0% {
           padding-top: 1%;
       }
       50% {
           padding-top: 2.5%;
       }
       100% {
           padding-top: 1%;
       }
   }
   
   @keyframes Aorus_ani2 {
       0% {
           padding-top: 2.5%;
       }
       50% {
           padding-top: 1%;
       }
       100% {
           padding-top: 2.5%;
       }
   }
   
   @keyframes Aorus_ani3 {
       0% {
           padding-top: 2%;
       }
       50% {
           padding-top: 1%;
       }
       100% {
           padding-top: 2%;
       }
   }
   
   .fire_ani {
       animation: Aorus_ani 5s ease-in-out infinite;
       position: absolute;
       top: 0;
       transition: 1s;
   }
   
   .fire_ani2 {
       animation: Aorus_ani2 5s ease-in-out infinite;
       position: absolute;
       top: 0;
       transition: 1s;
   }
   
   .fire_ani3 {
       animation: Aorus_ani3 4s ease-in-out infinite;
       position: absolute;
       top: 0;
       transition: 1s;
   }
   /*  follow us  */
   /*  follow_us  */
   
   .follow_us_title {
       margin: 0;
       margin-top: 3%;
   }
   
   .follow_box {
       border: 1px solid #fff;
       cursor: pointer;
       transition: .3s;
       margin: 0 0.5% 0 0.5%;
       padding: 1% 0 0.5% 0;
   }
   
   .follow_box i {
       transition: .3s;
       color: #fff;
       font-size: 36px;
   }
   
   .follow_box p {
       transition: .3s;
   }
   
   .follow_box:hover {
       transition: .3s;
       background-color: #222;
   }
   
   .follow_box:hover i {
       transition: .3s;
       transform: scale(1.1);
   }
   
   .follow_box:hover p {
       color: #ff6400;
       transition: .3s;
   }
   
   @media screen and (max-width: 768px) {
       .follow_box {
           margin: 2% 7% 0 7%;
       }
   }