@charset "UTF-8";
.mainArea {
  max-width: 1280px;
  min-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
#content {
  width: 100%;
}

/*----------
topicPath
----------*/
.topicPath {
  padding-left: 5px;
  font-size: 1.2em;
}
.topicPath .step {
  margin: 0 5px 0 0;
  padding: 0 8px 0 0;
  display: inline;
  line-height: 1.4;
  font-size: 1em;
  background: url(/resource/images/shared/bg/arrow-topicpath-bg-02.gif) no-repeat right center;
}
.topicPath .cur {
  display: inline;
  line-height: 1.4;
  font-size: 1em;
}


/*----------
headArea
----------*/
.headArea {
  position: relative;
  margin-top: 30px;
}
.headArea .headTitle h1 {
  font-size: 25px;
  font-weight: normal;
  color: #172397;
}
.headArea .headTitle .leadText {
  font-size: 13px;
  margin-top: 30px;
}
.headArea .updateDate {
  position: absolute;
  right: 0;
  bottom: 0;
}
.headArea .updateDate p {
  font-size: 14px;
}


/*----------
rankingArea
----------*/
.rankingArea {
  margin: 30px 0 60px;
}
.rankingArea .rankingBoxWrap .rankingBox {
  width: 32.5%;
  margin-left: 1.25%;
  margin-bottom: 15px;
  float: left;
  border: 1px solid #cecece;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* max-width:1080 */
.rankingArea.w1080 .rankingBoxWrap .rankingBox {
  width: 49.5%;
  margin-left: 1%;
}
.rankingArea .rankingBoxWrap .rankingBox:first-child {
  margin-left: 0;
}
.rankingArea .rankingTitle {
  background: #e5f4ff;
  padding: 12px 15px;
  border-bottom: 1px solid #cecece;
}
.rankingArea .rankingTitle h2 {
  font-size: 18px;
  font-weight: normal;
}
.rankingArea .rankingProduct {
  position: relative;
  padding: 15px 15px 70px;
}
.rankingArea .rankingContent {
  display: table;
  width: 100%;
  margin-top: 30px;
  padding-top: 25px;
  box-sizing: border-box;
}
.rankingArea .rankingContent:first-child {
  margin-top: 0;
}
.rankingArea .rankingContent.flagOn {
  position: relative;
}
.rankingArea .rankingContent.flagOn .flag {
  display: inline-block;
  height: 25px;
  position: absolute;
  top: 0;
  left: 64px;
}
.rankingArea .rankingContent.flagOn .flag span {
  display: inline-block;
  position: relative;
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  color: #fff;
  margin-right: 20px;
  padding: 0 7px 0 14px;
  border: none;
  border-radius: 2px;
}
.rankingArea .rankingContent.flagOn .flag span.saleFlag {
  background: #f27979;
}
.rankingArea .rankingContent.flagOn .flag span.newFlag {
  background: #f57a00;
}
.rankingArea .rankingContent.flagOn .flag span:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  content: "";
  border-color: transparent transparent transparent;
  border-style: solid;
  border-width: 24px 10px 0 0;
  border-radius: 0 0 0 0;
}
.rankingArea .rankingContent.flagOn .flag span.saleFlag:before {
  border-color: #f7aeae transparent transparent;
}
.rankingArea .rankingContent.flagOn .flag span.newFlag:before {
  border-color: #fba818 transparent transparent;
}
.rankingArea .rankingContent.flagOn .flag span:after {
  position: absolute;
  top: -1px;
  left: 5px;
  width: 1px;
  height: 25px;
  content: "";
  background-color: #fff;
  transform: rotate(22deg);
}
.rankingArea .rankingIcon,
.rankingArea .rankingItemThumb,
.rankingArea .rankingInfo {
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
}
.rankingArea .rankingIcon {
  width: 44px;
}
.rankingArea .rankingItemThumb {
  width: 80px;
}
.rankingArea .rankingItemThumb a:hover img {
  opacity: 0.7;
}
.rankingArea .rankingInfo {
  padding-right: 0;
}
.rankingArea .rankingName {
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 1.5;
}
.rankingArea .rankingReview {
  font-size: 12px;
  margin-bottom: 10px;
  text-align: right;
}
.rankingArea .rankingReview .star {
  display: inline-block;
  width: 88px;
  height: 15px;
  background: url("/resource/images/shared/icn/star-icn.png");
  vertical-align: text-top;
  margin-right: 5px;
}
.rankingArea .rankingReview .star.star0_0{
  background-position: 100% 100%;
}
.rankingArea .rankingReview .star.star0_5{
  background-position: 80% 100%;
}
.rankingArea .rankingReview .star.star1_0{
  background-position: 80% 0%;
}
.rankingArea .rankingReview .star.star1_5{
  background-position: 60% 100%;
}
.rankingArea .rankingReview .star.star2_0{
  background-position: 60% 0%;
}
.rankingArea .rankingReview .star.star2_5{
  background-position: 40% 100%;
}
.rankingArea .rankingReview .star.star3_0{
  background-position: 40% 0%;
}
.rankingArea .rankingReview .star.star3_5{
  background-position: 20% 100%;
}
.rankingArea .rankingReview .star.star4_0{
  background-position: 20% 0%;
}
.rankingArea .rankingReview .star.star4_5{
  background-position: 0% 100%;
}
.rankingArea .rankingReview .star.star5_0{
  background-position: 0% 0%;
}
.rankingArea .rankingPrice {
  text-align: right;
}
.rankingArea .rankingPrice .mainPrice {
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  color: #da0a16;
  vertical-align: middle;
}
.rankingArea .rankingPrice .taxFree {
  display: inline-block;
  font-size: 13px;
  font-weight: normal;
  color: #333;
  vertical-align: middle;
}
.rankingArea .moreShow {
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-size: 12px;
}
.rankingArea .moreShow a {
  position: relative;
  padding-left: 10px;
}
.rankingArea .moreShow a:before {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  position: absolute;
  top: 3px;
  left: 0;
  background: url("/resource/images/shared/icn/nui-angle03.png") no-repeat;
}
.rankingArea .returnBtn {
  width: 62px;
}
.rankingArea .returnBtn a {
  display: block;
  height: 30px;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #fff;
  background: -webkit-linear-gradient(#fff, #f5f5f5);
  background: -o-linear-gradient(#fff, #f5f5f5);
  background: -moz-linear-gradient(#fff, #f5f5f5);
  background: linear-gradient(#fff, #f5f5f5);
  font-size: 12px;
  color: #333;
  padding: 7px 12px 6px 22px;
  border: 1px solid #cecece;
  border-radius: 4px;
  text-decoration: none;
}
.rankingArea .returnBtn a:before {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 11px;
  background: url("/resource/images/shared/icn/nui-angle02.png") no-repeat;
}
.rankingArea .returnBtn a:hover {
  background: #f5f5f5;
  background: -webkit-linear-gradient(#f5f5f5, #fff);
  background: -o-linear-gradient(#f5f5f5, #fff);
  background: -moz-linear-gradient(#f5f5f5, #fff);
  background: linear-gradient(#f5f5f5, #fff);
}