SwitchHosts/css/main.css

html,
body {
  font-size: 12px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #4a90e2;
}

a:hover {
  color: #59adff;
}

#wrapper {
  margin: 0 auto;
  border-top: solid 2px #666;
}

#wrapper .lang-en {
  display: none;
}

#wrapper.lang-cn p.lang-cn {
  display: block;
}

#wrapper.lang-cn span.lang-cn {
  display: inline;
}

#wrapper.lang-cn .lang-en {
  display: none;
}

#wrapper.lang-en .lang-cn {
  display: none;
}

#wrapper.lang-en p.lang-en {
  display: block;
}

#wrapper.lang-en span.lang-en {
  display: inline;
}

#lang {
  width: 800px;
  margin: 0 auto;
}

#lang ul {
  float: right;
  margin: 0;
  padding: 2px 10px 4px 10px;
  background: #666;
  border-radius: 0 0 4px 4px;
  list-style: none;
}

#lang li {
  margin: 0;
  float: left;
  padding: 0 5px;
}

#lang li a {
  display: block;
  width: 24px;
  height: 24px;
  text-indent: -4em;
  overflow: hidden;
  background: transparent url("img/cn.png") no-repeat 50% 50%;
}

#lang li a#lang-en {
  background-image: url("img/us.png");
}

#head {
  text-align: center;
  padding: 72px 0 42px 0;
}

#head #logo img {
  width: 366px;
}

#head #intro {
  margin-top: 16px;
  color: #999;
}

#capture {
  height: 350px;
  overflow: hidden;
  text-align: center;
}

#capture img {
  width: 960px;
  /*border: solid 1px #979797;*/
}

#detail {
  background: #f5f5f5;
  box-shadow: inset 0 1px 2px 0 #9b9b9b;
  padding: 60px 0 96px 0;
}

#detail #download,
#detail #features {
  width: 800px;
  margin: 0 auto;
}

#detail #download {
  text-align: center;
}

#detail #btn-download {
  display: inline-block;
  width: 192px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: #4a90e2;
  color: #fff;
  font-size: 18px;
}

#detail #alternative-download {
  color: #c9c9c9;
  margin: 10px 0;
}

#detail #alternative-download a {
  color: #c9c9c9;
}

#detail #alternative-download a:hover {
  color: #4a90e2;
}

#features {
  padding-top: 120px;
}

#features h2 {
  font-size: 18px;
  margin: 0;
  padding: 0;
  line-height: 30px;
}

#features h2 span {
  font-weight: normal;
}

#features ul {
  list-style: none;
  height: 690px;
  overflow: hidden;
  width: 813px;
  padding: 0;
  margin: 32px 0 0 -6.5px;
}

#features ul li {
  float: left;
  padding: 0;
  width: 258px;
  height: 240px;
  margin: 0 6.5px;
  overflow: hidden;
  text-align: center;
}

#features ul li img {
  width: 258px;
  height: 130px;
}

#features ul li p {
  text-align: center;
}

#features ul li p.en {
  color: #c9c9c9;
}

#foot {
  padding: 42px 0;
  text-align: center;
}

#foot p.copyright {
  color: #c9c9c9;
}

#foot p.copyright a {
  color: #c9c9c9;
  font-weight: bold;
}

#foot p.copyright a:hover {
  color: #4a90e2;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  #lang ul li a {
    background-image: url("img/[email protected]");
    background-size: 24px 24px;
  }

  #lang ul li a#lang-en {
    background-image: url("img/[email protected]");
  }
}