html,
body {
  background: #FFCCCC;
  background-image: url("../images/bg.png");
  background-repeat: repeat-y;
  background-position: center;
  -webkit-overflow-scrolling: touch;
  color: #000;
  height:100%;
  margin: 0;
  cursor: url("../images/pointer.png"), auto;
}

body {
  padding-top: 10px;
}

a {
  color: #000;
}

a,
a:hover,
a:active,
a:visited,
a:focus {
  text-decoration: none;
  cursor: pointer;
}

.main {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 20px 80px;
}

article {
  font: normal 18px/20px sans-serif;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  min-height: 220px;
}

article p {
  text-align: left;
  text-indent: 2em;
  font-size: 20px;
  line-height: 2;
}

header {
  margin: 0 auto;
  height: 200px;
  padding: 20px 10px;
  max-width: 950px;
  background: url("../images/title.png") no-repeat center center;
  background-size: auto 100%;
}

footer {
  background: #454545;
  font-size: 14px;
  padding: 20px 10px;
  text-align: center;
  color: #fff;
}

footer a {
  color: #fff;
}


.l {
  text-align: left;
  text-indent: 0;
}

.r {
  text-align: right;
}

@media(min-width: 950px) {
  article {
    padding: 40px 60px;
  }
}

.tip {
  margin: 20px auto;
}

.letter_list {
  text-align: left;
  list-style-type: circle;
}

.letter_list li {
  margin: 10px 10px;
}

.decrypt_password {
  margin: 20px;
}

.decrypt_password input {
  width: 150px;
  height: 30px;
  border: none;
  font-size: 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.6);
  padding-left: 10px;
}

.decrypt_password button {
  font-size: 12px;
  width: 50px;
  height: 30px;
  border-radius: 5px;
  border-style: none;
  background: rgba(255,255,255,0.6);
  margin-left: 10px;
  color: #000;
}

textarea {
  width: 100%;
  border: none;
  font-size: 14px;
  border-radius: 5px;
  background: rgba(255,255,255,0.6);
  padding-left: 10px;
  padding-top: 10px;
}