@media only screen and (max-width: 1000px) {
  #banner_top{display:none}
}

#banner{
  position: relative;
  width: 100%;
  background:#fff;
  margin: 0 0 25px;
  overflow:hidden;
  -webkit-transition: background 1s ease-in-out;
  -moz-transition: background 1s ease-in-out;
  -ms-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
}
#banner .in{overflow:hidden;position:relative}
#banner .slide{
  width:100%;/*default. then use js to change width*/
/*  float:left;*/position:absolute;top:0;
  /*
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;*/
}
#banner .slide_in{
    margin: auto;
}
#banner img{
  display: block;
  margin:auto;
}

/*
@keyframes o{
  0%   { opacity:1; }
  50%  { opacity:.85; }
  100% { opacity:1; }
}
*/
#banner .slide_in .imgtxt{position: absolute;top: 4%;width: 40%;opacity:0;
margin-left:-160px;}
#banner .slide_in .imgtxt.trans{
transition: all 2s ease-out;
}
/*
#banner .slide_in .imgtxt.trans2{
animation: o 5s infinite;
}
*/


@media only screen and (min-width:1000px) and (max-width: 1160px){
  #banner .slide_in .imgtxt{top:10.5%}
}
@media only screen and (max-width: 1024px){
#banner .slide_in .imgtxt{top:6%}
}
@media only screen and (max-width: 500px){
#banner .slide_in .imgtxt{width:40%}
}
@media only screen and (max-width: 350px){
#banner .slide_in .imgtxt{width:35%;top:3%}
}

#banner_nav,
#banner_nav li{list-style:none;margin:0;padding:0;}
#banner_nav{position: absolute;bottom:0;text-align: center;width:100%;
/*display:none;*//*because there is only ONE banner for now.*/
}
#banner_nav li{display:inline-block;margin:0 2px;width:14px;height:14px;border-radius:100%;background:#fff;}
#banner_nav li.cur{background:#205DB2;}
#banner_nav a{display:block;text-decoration:none}