.slider { width: 100%; min-width: 1200px; height: 885px; float: left; position: relative; overflow: hidden; }    
 
 .sliderBar { width: 100%; height: 5px; float: left; margin-top: 25px; display: flex; justify-content: space-between; background-color: rgba(255, 255, 255, 0.5); }
  
  .slideProgress { flex-grow: 1; position: relative; border: 1px rgba(255, 255, 255, 0.5) solid; }
  .progressBackground { position: absolute; left: 0; top: 0; height: 3px; }
  .activeProgress .progressBackground { animation-name: progress; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } 
  .fullProgress .progressBackground { width: 100%; background-color: rgba(36, 170, 224, 1); }
  
 .sliderWindow { width: 100%; height: 100%; float: left; position: relative; margin-top: 30px; }
 
 .slide { width: 100%; height: 100%; float: left; position: absolute; top: 0; left: 0; z-index: 0; background-repeat: no-repeat; background-position: center bottom; opacity: 0; transition-property: opacity; transition-duration: 0.75s; transition-timing-function: ease-in-out; }
 .slide:before { display: none; content: ''; width: 100%; height: 115px; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0.5); }
 .slideRolling { transition-property: opacity, margin-left; }
 .activeSlide { }
  .slideContent { position: absolute; width: 100%; float: left; height: auto; left: 0; top: -30px; padding: 10px; text-align: center; background-color: #fff; font-size: 20px; font-weight: 400; }
  .slideContent P { margin-top: 0; margin-bottom: 10px; }
  .slideContent P:last-child { margin-bottom: 0; }
  .slideContent UL { list-style-type: none; display: flex; justify-content: center;}
  .slideContent LI { position: relative; padding-left: 30px; }
  .slideContent LI:before { content: ''; width: 15px; height: 15px; position: absolute; top: calc(50% - 7.5px); left: 0; background-color: #d3ee84; border-radius: 50%; }
  .slide A { float: left; display: flex; align-items: center; justify-content: center; padding: 20px 30px; font-size: 20px; font-weight: 700; border: 3px #595959 solid; transition-property: border, color; transition-duration: 0.25s; }
  .slide A:hover { color: #25aae1; border-color: #25aae1; }  
  .slide IMG { float: left; }

  .arrow { width: 18px; height: 33px; position: absolute; top: calc(50% - 17px); background-repeat: no-repeat; cursor: pointer; animation-name: blink; animation-duration: 2.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  .arrow:hover { transform: scale(1.1); opacity: 1; animation-play-state: paused; } 
   .arrowRight { background-image: url('/images/slider/slider-arrow-right.png'); }
   .arrowLeft { left: 150px; background-image: url('/images/slider/slider-arrow-left.png'); }
   .arrowDown { width: 70px; height: 70px; position: absolute; bottom: 50px; left: calc(50% - 35px); z-index: 10; background-repeat: no-repeat; background-image: url('/images/icon/icon-arrow-down.png'); animation-name: bounceArrowDown; animation-duration: .75s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; cursor: pointer; }
   .arrowDown:hover { animation-play-state: paused; }
   
  .circles { position: absolute; right: 30px; bottom: 135px; }
   .circle { width: 15px; height: 15px; float: left; margin-right: 5px; background-color: #d3ee84; border-radius: 50%; transition: background-color 0.25s; }
   .circle:last-child { margin-right: 0; }
   .circle:hover { background-color: #fff; cursor: pointer; }
   .activeCircle { background-color: #fff; }
                                                                                                                                                                                               
@keyframes progress 
{ 
  from { width: 0; background-color: rgba(36, 170, 224, 0.1);} 
  to { width: 100%; background-color: rgba(36, 170, 224, 1); }  
}

@keyframes blink 
{ 
  0%  { opacity: 0.6; transform: scale(1); }
  25% { opacity: 0.8; transform: scale(1.05); }
  50% { opacity: 1; transform: scale(1.1); }
  75% { opacity: 0.8; transform: scale(1.05); }
  100% { opacity: 0.6; transform: scale(1); } 
}

@keyframes bounceArrowDown 
{ 
  0%  { bottom: 50px; }
  50% { bottom: 45px; }
  100% { bottom: 50px; } 
}

@media only screen
and (min-width: 1201px)
{
}

@media only screen
and (max-width: 1200px)
{
  /*
  .arrow { top: -50px; }
   .arrowRight { left: 100%; } 
   .arrowLeft { left: 0; }
  */
}