@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: "PSL162";
  src: url("../fonts/PSL162.eot");
  src: url("../fonts/PSL162.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PSL162.woff") format("woff"),
    url("../fonts/PSL162.ttf") format("truetype"),
    url("../fonts/PSL162.svg#thaisans_neueregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: Tahoma, Geneva, sans-serif;
  background: url("../images/bg1.jpg") no-repeat center top fixed #fff;
}

h.a1 {
  font-size: 50px;
  color: #ffea00;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  font-family: "PSL162";
} /* topic 01 */
h.a2 {
  font-size: 40px;
  color: #ffea00;
  font-family: "PSL162";
} /* topic 02 */

a:link {
  text-decoration: none;
}
img {
  max-width: 100%;
  background-size: 100% auto;
}

.wrapper {
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.section1 {
  width: 916px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  display: block;
  background: #fff;
}
.pic-top {
  width: auto;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  display: block;
}
.content{ 
	width:auto; height:auto; overflow:hidden; 
	display:block; text-align:center; 
	background:url("../images/bg2.jpg") repeat center top ; 
	padding:20px; color:#FFF; font-size:20px;
}

.note {
  width: auto;
  height: auto;
  overflow: hidden;
  display: block;
  text-align: center;
  background: url("../images/bg3.jpg") no-repeat center top #fff;
  padding: 20px;
  color: #d10000;
  font-size: 20px;
}

.foot {
  width: auto;
  height: auto;
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background: #c11a76;
  padding: 30px;
}

.box-rank {
  width: 500px;
  height: auto;
  overflow: hidden;
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.sub-rank {
  width: auto;
  height: auto;
  overflow: hidden;
  display: block;
  margin: auto;
  margin-top: 5px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.sub-rank2 {
  width: auto;
  height: auto;
  overflow: hidden;
  display: block;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 16px;
  float: left;
  margin-left: 30px;
}
.rank1,
.rank2,
.rank3 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  display: block;
  border-radius: 100px;
  margin: auto;
  position: relative;
}
.rank1 span {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  background: url("../images/r1.png") no-repeat;
}
.rank2 span {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  background: url("../images/r2.png") no-repeat;
}
.rank3 span {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  background: url("../images/r3.png") no-repeat;
}

.frame1 {
  width: 177px;
  height: 177px;
  overflow: hidden;
  display: block;
  margin: auto;
  background: url("../images/r1.png") no-repeat center;
}
.frame2 {
  width: 177px;
  height: 177px;
  overflow: hidden;
  display: block;
  margin: auto;
  background: url("../images/r2.png") no-repeat center;
}
.frame3 {
  width: 177px;
  height: 177px;
  overflow: hidden;
  display: block;
  margin: auto;
  background: url("../images/r3.png") no-repeat center;
}

.bt-rank {
  width: 45%;
  height: auto;
  overflow: hidden;
  display: block;
  color: #000;
  background: #ff0;
  border-radius: 50px;
  margin: auto;
  box-shadow: 5px 5px 15px 1px rgba(50, 50, 50, 0.4);
}
.bt-rank:hover {
  opacity: 0.5;
}

/* table */
.box-table {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: block;
  margin: auto;
  padding-bottom: 20px;
  background: url("../images/bgt.png") no-repeat center bottom;
}

/* Rank Frame */
.table2 {
  width: 370px;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
}

.table3 {
  width: auto;
  border-collapse: inherit;
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
  border-radius: 1em;
  overflow: hidden;
  background: #1f0b52;
  border: 0px;
  text-align: center;

}

.pic-rank {
  width: 105px;
  height: 105px;
  overflow: hidden;
  display: block;
  border-radius: 100px;
  border: solid #fff 3px;
  margin: auto;
  margin-top: 35px;
}

table {
  width: 75%;
  border-collapse: collapse;
  font-size: 16px;
  margin-bottom: 20px;
  background: none;
  border: hidden;
  color: #000;
}

th,
td {
  text-align: center;
  padding: 8px;
  border: 0px solid #000;
}

th {
  background-color: #ed1e3c;
  color: white;
}

.rankbg1 {
  background-color: #990000;
}
.rankbg2 {
  background-color: #994c00;
}
.rankbg3 {
  background-color: #00994c;
}
.rankbg4 {
  background-color: #004c4c;
}
.rankbg5 {
  background-color: #404040;
}

/* End table */

@media screen and (max-width: 900px) {
  h.a1 {
    font-size: 34px;
  }
  h.a2 {
    font-size: 30px;
  }
  .section1 {
    width: auto;
  }
  .content {
    font-size: 16px;
  }
  .note {
    font-size: 16px;
  }
}

@media screen and (min-width: 370px) and (max-width: 500px) {
  table {
    width: 100%;
  }
  .box-table {
    width: auto;
  }
  .box-rank {
    width: 90%;
  }
  .sub-rank {
    width: auto;
    height: auto;
  }
  .sub-rank2 {
    width: 35%;
    height: auto;
    padding: 5px;
  }
  .rank1,
  .rank2,
  .rank3 {
    width: 100px;
    height: 100px;
  }
  .rank1 span {
    width: 100px;
    height: 100px;
    background: url("../images/r1-100.png") no-repeat;
  }
  .rank2 span {
    width: 100px;
    height: 100px;
    background: url("../images/r2-100.png") no-repeat;
  }
  .rank3 span {
    width: 100px;
    height: 100px;
    background: url("../images/r3-100.png") no-repeat;
  }
}

@media screen and (min-width: 320px) and (max-width: 360px) {
  table {
    width: 100%;
  }
  .box-table {
    width: 100%;
  }
  .box-rank {
    width: auto;
  }
  .sub-rank2 {
    width: 35%;
    height: auto;
    padding: 4px;
  }
  .rank1,
  .rank2,
  .rank3 {
    width: 100px;
    height: 100px;
  }
  .rank1 span {
    width: 100px;
    height: 100px;
    background: url("../images/r1-100.png") no-repeat;
  }
  .rank2 span {
    width: 100px;
    height: 100px;
    background: url("../images/r2-100.png") no-repeat;
  }
  .rank3 span {
    width: 100px;
    height: 100px;
    background: url("../images/r3-100.png") no-repeat;
  }
}