#topSearchBox {}

#topTab {
  list-style: none;
  margin: -5px 0 -5px 0;
  padding: 0;
  height: 85px;

  border-top: 5px solid #ccc;
  border-radius: 30px 0 30px 30px;
}
#topTab ins {display: none;}

#topTab li {
  position: relative;
  float: left;
  width: 325px;
  height: 75px; 
  margin: -5px -5px 0 0; padding: 0;
  border: 5px solid #ccc;
  border-right: none;
  cursor: pointer;
}
#topTab li.tab_bus {
  width: 315px;
  border-right: 5px solid #ccc;
}

#topTab li.tab_,
#topTab li.tab_ span {border-radius: 24px 0 0 0;}

#topTab li span {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 85px;
  background-color: #fff;
  text-align: center;
}
#topTab li.active {
  border-color: #00552e;
  border-radius: 24px 0 0 0;
  border-right: 5px solid #00552e;
  z-index: 1;
}
#topTab li.tab_bus.active {margin-left: 5px;}
#topTab li.active span {
  border-radius: 24px 0 0 0;
}

#topTab li code {
  position: absolute;
  top: 10px;
  /*left: 130px;*/
  left: 50%;
  margin-left: -38px;
  display: block;
  width: 76px; height: 58px;
  background: url(../img/page2.png?7) 0 -60px;
  background-size: 600px 300px;
}
#topTab li.tab_bike code {background-position: -80px -60px;}
#topTab li.tab_bus code {background-position: -160px -60px;}

#topTab li.active code {background-position: 0 0;}
#topTab li.tab_bike.active code {background-position: -80px 0;}
#topTab li.tab_bus.active code {background-position: -160px 0;}

#topSearchCont {
  position: relative;
  border: 5px solid #00552e;
  border-radius: 0 0 30px 30px;
}

#topSearchCont h3 {
  padding-left: 12px;
  margin-bottom: 30px;
  height: 26px; line-height: 26px;
  color: #00552e;
  font-size: 18px;
  border-left: 8px solid #00552e;
}

#topSearchCont .map h3 {margin-bottom: 20px;}

#topSearchCont .frmBox {
  float: left;
}
#topSearchCont .frm {
  position: relative;
  margin: 40px 0 30px 40px;
  width: 530px; height: 57px;
  border: 5px solid #00552e;
  border-radius: 10px;
}
#topSearchCont .frm div {
  margin-right: 62px;
  height: 57px;
}
#topSearchCont .frm input {
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  width: 100%; height: 57px;
  padding: 0 12px;
  margin: 0;
  font-size: 20px;
  box-sizing: border-box;
}
#topSearchCont .frm button {
  position: absolute;
  top: -5px; right: -5px;
  width: 67px; height: 67px;
  padding: 0; margin: 0;
  background-color: #00552e;
  border-style: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
#topSearchCont .frm button:hover {
  background-color: #014928;
}
#topSearchCont .frm button ins {
  display: block;
  width: 30px; height: 30px;
  position: absolute;
  top: 19px; left: 19px;
  background: url(../img/page2.png?7) 0 -225px;
  background-size: 600px 300px;
}

#topSearchCont .frm .locBtn {
  position: absolute;
  top: 60px; left: 587px;
  display: inline-block;
  width: 298px; height: 48px;
  background-color: #00552e;
  border-radius: 24px;
  cursor: pointer;
}
#topSearchCont .frm .locBtn:hover {
  background-color: #014928;
}
#topSearchCont .frm .locBtn ins {
  display: block;
  width: 20px; height: 20px;
  position: absolute;
  top: 14px; left: 24px;
  background: url(../img/page2.png?7) -23px -150px;
  background-size: 400px 200px;
}
#topSearchCont .frm .locBtn em {
  /*display: none;*/
  display: block;
  height: 48px; line-height: 48px;
  padding-left: 20px;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

#topSearchCont .nameFrm {
  float: right;
  margin: 10px 40px 0 0;
}
#topSearchCont .nameFrm .ex {
  margin-top: 80px;
  font-size: 12px;
  text-align: center;
  color: #777;
}

#topSearchCont .nameFrm .frm {
  width: 290px; height: 40px;
  border: 4px solid #00552e;
  margin: 30px 0 0 0;
}
#topSearchCont .nameFrm .frm div {
  margin-right: 45px;
}
#topSearchCont .nameFrm .frm input {
  height: 40px;
  font-size: 16px;
}
#topSearchCont .nameFrm .frm button {
  top: -4px; right: -4px;
  width: 48px; height: 48px;
}
#topSearchCont .nameFrm .frm button ins {
  top: 12px; left: 12px;
  width: 24px; height: 24px;
  background-position: 0 -180px;
  background-size: 480px 240px;
}


#topSearchCont ul.flags {
  margin: 0 0 0 40px; padding: 0;
  width: 568px;
  list-style: none;
}
#topSearchCont ul.flags li {
  position: relative;
  display: inline-block;
  margin: 0 30px 0 0;
  padding: 0 0 0 60px;
  width: 190px;
  height: 52px; line-height: 52px;
  border-bottom: 2px solid #ddd;
  font-size: 13px;
  font-weight: bold;
}
#topSearchCont ul.flags li code {
  position: absolute;
  top: 6px; left: 12px;
}
#topSearchCont ul.flags li em {
  position: absolute;
  top: 15px; right: 5px;
  display: block;
  width: 22px; height: 22px;
  background: url(../img/page2.png?7) 0 -190px;
  background-size: 600px 300px;
}
#topSearchCont ul.flags li.active em {
  background-position: -25px -190px;
}

#topSearchCont .map {
  float: right;
  margin: 20px 40px 0 0;
}
#topSearchCont .mapImage {
  display: block;
  width: 290px; height: 270px;
  /*background: url(../img/top_map.png);*/
}
#topSearchCont .mapImage img {
  width: 290px; height: 260px;
}

#busListLink {
  padding: 50px 30px 0 40px;
  font-size: 14px;
  font-weight: bold;
}
#busListLink a {
  padding-bottom: 4px;
  color: #00552e;
  border-bottom: 1px dotted #00552e;
}


.btmBlk {
  margin: 70px 0 40px 40px;
  width: 900px;
}
.btmBlk .box {
  position: relative;
  float: left;
  width: 250px;
  margin-right: 75px;
}
.btmBlk .box.myspark {
  float: right;
  margin: 0;
}

.historyList, .mysparkList {
  margin: 0; padding: 0;
  list-style: none;
  max-height: 200px;
  overflow: auto;
}

.historyList {}
.historyList li,
.mysparkList li {
  margin: 0; padding: 2px 0;
  height: 24px; line-height: 24px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
}
.historyList li code,
.mysparkList li code {
  display: inline-block;
  width: 24px; height: 24px;
  margin-right: 10px;
  background: url(../img/page2.png?7) -300px -170px;
  background-size: 600px 300px;
  vertical-align: top;
}

.mysparkList a {color: #00552e;}

.historyClearBtn,
.mysparkClearBtn {
  position: absolute;
  top: 25px; right: 0;
  cursor: pointer;
  font-size: 11px;
  line-height: 24px;
}

.historyClearBtn code,
.mysparkClearBtn code {
  display: inline-block;
  width: 24px; height: 24px;
  background: url(../img/page2.png?7) -330px -170px;
  background-size: 600px 300px;
  vertical-align: top;
  margin-left: 3px;
}

.historyList span,
.areaList span {
  cursor: pointer;
}

.flags li {
  cursor: pointer;
}

.areaList {
  list-style: none;
  margin: 0; padding: 0;
}
.areaList li {
  margin: 0 0 10px 0;
  height: 24px; line-height: 24px;
  float: left;
  width: 80px;
}
.areaList li span {
  padding-bottom: 5px;
  border-bottom: 2px solid #bbb;
  cursor: pointer;
}

.nodata {color: #999;}
.links {
  margin: 20px 0;
  font-size: 11px;
  text-align: center;
}

#topNews {
  position: relative;
  margin-top: 140px;
  border: 3px solid #00552e;
  padding: 15px;
}
#topNews h3 {
  position: absolute;
  top: -33px; left: -3px;
  background-color: #00552e;
  height: 30px; line-height: 32px;
  padding: 0 15px;
  font-size: 11px;
  color: #fff;
}
#topNews h3 code {
  position: absolute;
  bottom: 0; right: -30px;
  display: block;
  width: 0; height: 0;
  border-bottom: 30px solid #00552e;
  border-right: 30px solid #fff;
}

#topNews ul {
  margin: 0;
  line-height: 1.6;
  /*font-weight: bold;*/
}



#topNews .coco_p {
  position: absolute;
  top: -120px; right: 50px;
  width: 150px; height: 120px;
  background: url(../img/coco_p.png);

  -webkit-animation-name: cocoChan;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
}

#topBanner {
  margin: 30px 0;
  text-align: center;
}
#topBanner a {
  display: inline-block;
  width: 220px; height: 99px;
  /*background-color: #ddd;*/
  margin-right: 32px;
  background-size: 100% 100%;
}
#topBanner a.banner1 {
  background-image: url(../img/banner/1.png?1);
}
#topBanner a.banner2 {
  background-image: url(../img/banner/2.png);
}
#topBanner a.banner3 {
  background-image: url(../img/banner/3.png);
}
#topBanner a.banner4 {
  background-image: url(../img/banner/4.png);
}


#topBanner a.last {margin: 0;}


@-webkit-keyframes cocoChan {
0% {top: -120px;}
60% {top: -120px;}
70% {top: -136px;}
100% {top: -140px;}
}


#logoTMPC a {
  display: block;
  width: 500px; height: 62px;
  margin: 30px auto 30px;
  background: url(../img/logo_tmpc.png);
}