.Primary img {width: 100%;}
.Primary .BannerWrap {width: 100%;margin-bottom: 15px;position: relative;}
.Primary .BannerWrap .BannerList {display: block;}
.Primary .BannerWrap .BannerList a {height: 100%;}
.Primary .BannerWrap .BannerList a:hover {text-decoration: none;}
.Primary .BannerWrap li {background: url(../images_new/bestseller/best-sellers-1500.jpg) no-repeat;background-size: 100%;width: 100%;height: auto;position: relative;padding: 30px 0;}
.Primary .BannerWrap li::after {content: "";display: block;width: 350px;height: 158px;background: url(../images_new/bestseller/medal.png) no-repeat;position: absolute;top: 50%;transform: translateY(-50%);right: 80px;background-size: 100%;right: 80px;}
.BannerLeft {width: calc(100% - 484px);margin-right: 50px;padding: 30px 0 30px 60px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}
.BannerLeft p {color: #ffec81;font-size: 28px;font-weight: bold;margin-bottom: 10px;}
.BannerLeft span {font-size: 22px;line-height: 34px;color: #ffffd6;}
.RuleWarp {position: absolute;right: 0;top: 15px;text-align: right;}
.RuleWarp::after {content: "";display: block;height: 25px;width: 100%;position: absolute;}
.RuleText {background: rgba(255, 196, 68, 0.7);border-radius: 10px;font-size: 18px;font-weight: bold;padding: 6px 20px;box-sizing: border-box;color: #ffffff;margin-right: 10px;cursor: pointer;}
.RuleDetail {background-color: #ffffff;text-align: left;width: 548px;border-radius: 10px;box-shadow: 5px 0 40px rgba(74, 74, 74, 0.28);position: absolute;right: 10px;z-index: 20;padding: 25px;box-sizing: border-box;top: 50px;color: #333333;display: none;}
.RuleDetail strong {display: block;}
.RuleDetail h2 {font-size: 20px;}
.RuleDetail p {font-size: 16px;line-height: 22px;margin: 15px 0 20px;}
.RuleDetail p:nth-last-of-type(1) {margin-bottom: 0;}
.RuleDetail::before {content: "";display: block;width: 24px;height: 15px;background: url(../images_new/bestseller/icon-arrow.png) no-repeat;position: absolute;top: -15px;right: 35px;background-size: 100%;}
.RuleDetail .Clone {display:none; width: 24px;height: 24px;background: url(../images_new/bestseller/icon-clone.png) no-repeat;position: absolute;right: 10px;top: 10px;cursor: pointer;}
@media screen and (max-width: 767px) {
    .Primary .BannerWrap li::after {display: none;}
    .BannerLeft {width: 100%;padding: 10px;text-align: center;}
    .BannerLeft p {font-size: 16px;}
    .BannerLeft span {font-size: 14px;line-height: 18px;}
    .RuleDetail {top: 32px;padding: 15px;width: 340px; right: 5px;}
    .RuleText {font-size: 13px;padding: 5px 12px;margin-right: 5px;}
    .RuleDetail::before {width: 15px;height: 9px;top: -9px;right: 22px;}
    .RuleDetail h2 {font-size: 18px;}
    .RuleDetail p {font-size: 14px;line-height: 20px;margin: 5px 0 10px;}
    .RuleDetail .Clone {display: block;}
}
@media screen and (min-width: 768px) and (max-width:1023px) {
    .Primary .BannerWrap li {padding: 10px 0;}
    .Primary .BannerWrap li::after {width: 170px;height: 72px;right: 20px;}
    .BannerLeft {width: calc(100% - 214px);padding: 20px 0 20px 20px;margin-right: 20px;}
    .BannerLeft p {font-size: 18px;}
    .BannerLeft span {font-size: 14px;line-height: 20px;}
    .RuleText {font-size: 14px;padding: 5px 12px;}
    .RuleWarp {bottom: 18px;}
    .RuleDetail {top: 32px;padding: 15px;width: 340px;}
    .RuleDetail::before {width: 15px;height: 9px;top: -9px;right: 22px;}
    .RuleDetail p {margin: 5px 0 10px;font-size: 14px;line-height: 20px;}
    .RuleDetail h2 {font-size: 18px;}
    .RuleDetail .Clone {display: block;}
}
@media screen and (min-width: 1024px) and (max-width:1279px) {
    .Primary .BannerWrap li {padding: 10px 0;}
    .Primary .BannerWrap li::after {width: 220px;height: 94px;right: 20px;}
    .BannerLeft {width: calc(100% - 264px);padding: 30px 0 30px 30px;margin-right: 20px;}
    .BannerLeft p {font-size: 20px;}
    .BannerLeft span {font-size: 16px;line-height: 22px;}
    .RuleText {font-size: 16px;padding: 5px 12px;}
    .RuleWarp {bottom: 22px;}
    .RuleDetail {top: 38px;padding: 20px;width: 460px;}
    .RuleDetail::before {width: 19px;height: 12px;top: -12px;right: 22px;}
    .RuleDetail p {margin: 10px 0 15px;font-size: 15px;line-height: 20px;}
    .RuleDetail h2 {font-size: 19px;}
    .RuleDetail .Clone {display: block;}
}
@media screen and (min-width: 1280px) and (max-width:1366px) {
    .Primary .BannerWrap li::after {width: 310px;height: 132px;}
    .BannerLeft {padding: 20px 0 20px 40px;margin-right: 30px;width: calc(100% - 424px);}
    .BannerLeft p {font-size: 22px;}
    .BannerLeft span {font-size: 18px;line-height: 24px;}
    .RuleText {font-size: 18px;padding: 6px 15px;}
    .RuleWarp {bottom: 25px;}
    .RuleDetail {top: 45px;}
    .RuleDetail::before {right: 30px;}
    .RuleDetail .Clone {display: block;}
}
@media only screen and (min-width: 1800px) {
    .Primary .BannerWrap li {padding: 0;}
    .Primary .BannerWrap li::after {width: 510px;height: 216px;}
    .BannerLeft {height: 300px;padding: 10px 0 10px 90px;width: calc(100% - 654px);}
    .BannerLeft p {font-size: 30px;}
    .BannerLeft span {font-size: 24px;}
    .RuleWarp {font-size: 22px;}
    .RuleDetail h2 {font-size: 22px;}
    .RuleText {font-size: 20px;}
}