
/* footer */
#footer { width: 100%; height: 3.35rem; background: #222a3e; bottom: 0; left: 0; z-index: 6; color: #FFFFFF; overflow: visible; }
.footer-screen-container { background: #222a3e; }
.footer-screen-container .footer-nav { display: flex; }
.footer-screen-container .footer-nav .nav-left { display: flex; flex: 1; min-width: 0; justify-content: space-between; padding-top: .88rem;  padding-right: .77rem; }
.footer-screen-container .footer-nav .nav-left .info { display: flex; flex-direction: column; font-size: .16rem; color: rgba(255, 255, 255, 0.4); }
.footer-screen-container .footer-nav .nav-left .info a { margin-bottom: .2rem; }
.footer-screen-container .footer-nav .nav-left .info span { font-size: .2rem; color: var(--color); font-family: 'DINProMedium'; }
.footer-screen-container .footer-nav .nav-left nav ul { display: flex; align-items: center; }
.footer-screen-container .footer-nav .nav-left nav ul li { font-size: .16rem; color: rgba(255,255,255,.4); }
.footer-screen-container .footer-nav .nav-left nav ul li.spacer { margin: 0 .46rem; }
.footer-screen-container .footer-nav .information { display: flex; padding-top: .88rem; padding-left: .34rem; padding-bottom: .5rem; border-left: 1px rgba(255, 255, 255, 0.4) solid; }
.footer-screen-container .footer-nav .information .item { display: flex; align-items: center; flex-direction: column; margin-left: .46rem; }
.footer-screen-container .footer-nav .information .item img { width: 1.01rem; height: 1.01rem; }
.footer-screen-container .footer-nav .information .item .label { margin-top: .15rem; font-size: .16rem; color: rgba(255, 255, 255, 0.4); }
.footer-screen-container .copy-right { padding: .1rem 0; border-top: 1px rgba(255, 255, 255, 0.4) solid; font-size: .14rem; color: rgba(255, 255, 255, 0.3); }
.footer-screen-container .copy-right .public { display: flex; align-items: center; justify-content: space-between; }
.footer-screen-container .copy-right .right .sitemap {margin-right: .2rem;}
.footer-screen-container .copy-right .public .right select { background: #222a3e; color: rgba(255, 255, 255, 0.3); border: none; }
.footer-screen-container a:hover { color: var(--color); }

@media screen and (max-width: 1366px) {
  #footer { height: 26vh; }
  .footer-screen-container .footer-nav .nav-left nav ul li.spacer { margin: 0 .2rem; }
}
@media screen and (max-width: 1024px) {
  #footer { height: 19vh; }
  .footer-screen-container .footer-nav .nav-left { padding-right: 0.2rem; }
  .footer-screen-container .footer-nav .nav-left .info { font-size: 14px; }
  .footer-screen-container .footer-nav .nav-left .info a { margin-bottom: 10px; }
  .footer-screen-container .footer-nav .nav-left nav ul li.spacer { margin: 0 .08rem; }
  .footer-screen-container .footer-nav .nav-left nav ul li { font-size: 14px; }
  .footer-screen-container .footer-nav .information { padding-left: 0; }
}
@media screen and (max-width: 860px) {
  .public { width: 90%; }
  #footer { height: 16.5vh; }
  .footer-screen-container .footer-nav .nav-left nav ul li { font-size: 12px; }
}

@media screen and (max-width: 768px) {
  #footer { height: auto; }
  
  .footer-screen-container .footer-nav { flex-direction: column; }
  .footer-screen-container .footer-nav .nav-left { flex-direction: column-reverse; }
  .footer-screen-container .footer-nav .nav-left .info { padding: .4rem .4rem; margin-top: .4rem; border: 1px rgba(255, 255, 255, 0.4) solid; border-radius: .3rem; }
  .footer-screen-container .footer-nav .nav-left .info a:last-child { margin-bottom: 0; }
  .footer-screen-container .footer-nav .nav-left nav ul { justify-content: space-between; }
  .footer-screen-container .footer-nav .nav-left nav ul li.spacer { display: none; }
  .footer-screen-container .footer-nav .nav-left .info span { font-size: inherit; }
  .footer-screen-container .footer-nav .information { width: 100%; border: none; margin-left: -.8rem; }
  .footer-screen-container .footer-nav .information .item { width: calc((100% - .8rem) / 2); margin-left: .8rem; }
  .footer-screen-container .footer-nav .information .item img { width: 3rem; height: 3rem; }
  .footer-screen-container .copy-right { padding: .2rem 0 1.38rem; }
  .footer-screen-container .copy-right .public { flex-direction: column; }
  .footer-screen-container .copy-right .left { font-size: .28rem; text-align: center; }
  .footer-screen-container .copy-right .left a { display: block; }
  .footer-screen-container .copy-right .right { margin-top: .1rem; font-size: .28rem; }
  .footer-screen-container .footer-nav .information .item .label {     margin-top: 0.3rem; font-size: .4rem; }
}

