@charset "utf-8";
/*
    created 2018-11-8
    ms_s_eleven.html
*/
.s_eleven_banner {
  width: 100%;
  height: 13.386667rem;
}
.s_eleven_banner a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../images/banner.jpg) no-repeat center;
  background-size: 100%;
}
.s_eleven_nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.333333rem;
  z-index: 1000;
  display: none;
}
.s_eleven_nav .navbox {
  position: relative;
  height: 1.333333rem;
  line-height: 1.333333rem;
  background: -webkit-linear-gradient(left, #FFF6DF, #FFF0D5);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FFF6DF, #FFF0D5);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FFF6DF, #FFF0D5);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FFF6DF, #FFF0D5);
  /* 标准的语法 */
}
.s_eleven_nav .navbox ul li {
  float: left;
  width: 33.3333%;
  text-align: center;
  font-size: .32rem;
  color: #FF6666;
}
.s_eleven_nav .navbox ul li.active {
  color: #FFF;
  background: -webkit-linear-gradient(left, #CD3BFD, #7A56FF);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #CD3BFD, #7A56FF);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #CD3BFD, #7A56FF);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #CD3BFD, #7A56FF);
  /* 标准的语法 */
}
.coupon {
  background-color: #F0F2F5;
  padding: 0rem .426667rem;
}
.coupon .couponbox {
  background-color: #fff;
  padding: .426667rem .213333rem;
}
.coupon .couponbox > a {
  display: block;
  width: 8.72rem;
  height: 1.866667rem;
  margin-bottom: .133333rem;
}
.coupon .couponbox > a:nth-child(1) {
  background: url(../../images/coupon_10.png) no-repeat center;
  background-size: 100%;
}
.coupon .couponbox > a:nth-child(2) {
  background: url(../../images/coupon_50.png) no-repeat center;
  background-size: 100%;
}
.coupon .couponbox > a:nth-child(3) {
  background: url(../../images/coupon_150.png) no-repeat center;
  background-size: 100%;
}
.coupon .couponbox > a:nth-child(4) {
  background: url(../../images/coupon_500.png) no-repeat center;
  background-size: 100%;
}
.coupon .couponbox > a:nth-child(5) {
  margin-bottom: 0rem;
  background: url(../../images/coupon_1000.png) no-repeat center;
  background-size: 100%;
}
h2 {
  position: relative;
  display: inline-block;
  height: 1.706667rem;
  line-height: 1.706667rem;
  font-size: .64rem;
  font-weight: 700;
  color: #FF6666;
}
h2::before,
h2::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
  width: .533333rem;
  height: .52rem;
}
h2::before {
  left: -0.973333rem;
  background: url(../../images/title_left.png) no-repeat center;
  background-size: 100%;
}
h2::after {
  right: -0.973333rem;
  background: url(../../images/title_right.png) no-repeat center;
  background-size: 100%;
}
.hot {
  text-align: center;
  background-color: #F0F2F5;
  padding: 0rem .426667rem;
}
.hotbox {
  width: 100%;
  background-color: #fff;
  border: 1px solid #FF6666;
  margin-bottom: .32rem;
}
.hotbox.last_hotbox {
  margin-bottom: 0rem;
}
.hotbox .head {
  width: 100%;
  height: 1.546667rem;
  text-align: left;
  background: -webkit-linear-gradient(left, #FF8062, #FF6666);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF8062, #FF6666);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF8062, #FF6666);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FF8062, #FF6666);
  /* 标准的语法 */
  padding: .213333rem .32rem 0rem;
}
.hotbox .head div {
  line-height: .64rem;
  font-size: .426667rem;
  color: #FFFFFF;
}
.hotbox .head p {
  line-height: .506667rem;
  font-size: .293333rem;
  color: #FFFFFF;
}
.hotbox .body {
  height: 1.6rem;
  border-bottom: 1px solid #DBE1E8;
}
.hotbox .body ul li {
  float: left;
  width: 25%;
  line-height: 1.6rem;
  font-size: .426667rem;
  color: #FF6666;
}
.hotbox .body ul li span {
  display: inline-block;
  height: .32rem;
  line-height: .32rem;
  font-size: .266667rem;
  color: #5E6D81;
  padding: 0rem 3px;
  border: 1px solid #BDC5D3;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  vertical-align: top;
  margin: .626667rem 0rem 0rem .106667rem;
}
.hotbox .foot {
  width: 100%;
  height: 1.44rem;
  padding: 0rem 0rem 0rem .32rem;
}
.hotbox .foot .foot_left {
  float: left;
  height: 1.44rem;
  line-height: 1.44rem;
  font-size: .426667rem;
  color: #5E6D81;
}
.hotbox .foot .foot_left span {
  font-size: .853333rem;
  color: #4D535B;
}
.hotbox .foot .foot_left i {
  font-size: .506667rem;
  color: #9EA7B3;
  text-decoration: line-through;
  margin: 0rem .106667rem 0rem;
}
.hotbox .foot > a {
  float: right;
  width: 2rem;
  height: 1.44rem;
  line-height: 1.44rem;
  font-size: .32rem;
  color: #FFFFFF;
  text-align: center;
  background: -webkit-linear-gradient(left, #FF8062, #FF6666);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF8062, #FF6666);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF8062, #FF6666);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FF8062, #FF6666);
  /* 标准的语法 */
}
.more_link {
  display: inline-block;
  padding: .426667rem 0rem .133333rem;
}
.more_link div {
  width: .56rem;
  height: .32rem;
  background: url(../../images/more_arrow.png) no-repeat center;
  background-size: 100%;
  margin: 0 auto;
}
.more_link p {
  line-height: .48rem;
  font-size: .213333rem;
  color: #FF6666;
}
.server {
  text-align: center;
  background-color: #F0F2F5;
  padding: 0rem .426667rem;
}
.server.high_server {
  padding-bottom: .706667rem;
}
.server .serverbox {
  width: 100%;
  background-color: #fff;
  padding: 0rem .213333rem .426667rem;
  margin-bottom: .32rem;
}
.server .serverbox.last_serverbox {
  margin-bottom: 0rem;
}
.server .serverbox .title {
  line-height: 1.306667rem;
  font-size: .453333rem;
  color: 34px;
}
.server .serverbox .server_item {
  height: 2.4rem;
  border: 1px solid #FF6666;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: .213333rem;
}
.server .serverbox .server_item.last_server_item {
  margin-bottom: 0rem;
}
.server .serverbox .server_item .item_data {
  float: left;
  width: 5.44rem;
  height: 100%;
}
.server .serverbox .server_item .item_data ul li {
  float: left;
  width: 50%;
  line-height: 1.186667rem;
  font-size: .426667rem;
  color: #4D535B;
}
.server .serverbox .server_item .item_data ul li span {
  display: inline-block;
  height: .32rem;
  line-height: .32rem;
  font-size: .266667rem;
  color: #5E6D81;
  padding: 0rem 3px;
  border: 1px solid #BDC5D3;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  vertical-align: top;
  margin: .413333rem 0rem 0rem .106667rem;
}
.server .serverbox .server_item > a {
  float: right;
  width: 3.2rem;
  height: 100%;
  color: #FFFFFF;
  text-align: center;
  background: -webkit-linear-gradient(left, #FF8062, #FF6666);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF8062, #FF6666);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF8062, #FF6666);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FF8062, #FF6666);
  /* 标准的语法 */
  padding: .4rem 0rem 0rem 0rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.server .serverbox .server_item > a div:nth-child(1) {
  height: .506667rem;
  line-height: .506667rem;
  font-size: .293333rem;
}
.server .serverbox .server_item > a div:nth-child(1) span {
  font-size: .56rem;
  margin-right: .08rem;
}
.server .serverbox .server_item > a div:nth-child(3) {
  line-height: .906667rem;
  font-size: .426667rem;
}
.server .serverbox .server_item > a p {
  line-height: .506667rem;
  font-size: .293333rem;
  opacity: .5;
}
.explain {
  width: 100%;
  background-color: #F0F2F5;
  padding: 0rem .426667rem;
}
.explain .explainbox {
  width: 100%;
  color: #4D535B;
  background-color: #fff;
  padding: .106667rem .213333rem .64rem;
}
.explain .explainbox > .title {
  line-height: 1.306667rem;
  font-size: .453333rem;
  text-align: center;
}
.explain .explainbox .text {
  margin-bottom: .32rem;
}
.explain .explainbox .text.last_text {
  margin-bottom: 0rem;
}
.explain .explainbox .text div {
  line-height: .826667rem;
  font-size: .4rem;
}
.explain .explainbox .text p {
  line-height: .773333rem;
  font-size: .346667rem;
}
.shadow {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.shadow .playnow {
  position: absolute;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  padding: 0rem .426667rem;

  /*debug*/
  margin-left:0;
}
.shadow .playnow .video_control {
  width: 100%;
  height: 210px;
  -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.5);
}
.shadow .playnow .video_control video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.video_list {
  height: 1.733333rem;
  margin-top: .08rem;
  overflow: hidden;

  /*debug*/
  padding:0;
  background:rgba(0, 0, 0, 0.5);

}
.video_list .swiper-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 30px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-overflow-scrolling: touch;
}
.video_list .swiper-container .swiper-wrapper {
  width: 35.226667rem;
  overflow-x: auto;
}
.video_list .swiper-container .swiper-wrapper .swiper-slide {
  float: left;
  width: 3.466667rem !important;
  height: 1.733333rem;
  margin-right: 2px;
}
.video_list .swiper-container .swiper-wrapper .swiper-slide:last-child {
  margin-right: 0px;
}
.video_list .swiper-container .swiper-wrapper .swiper-slide .video_box {
  position: relative;
  width: 100%;
  height: 1.733333rem;
}
.video_list .swiper-container .swiper-wrapper .swiper-slide .video_box img {
  width: 100%;
  height: 100%;
}
.video_list .swiper-container .swiper-wrapper .swiper-slide .video_box div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: .426667rem;
  line-height: .426667rem;
  font-size: .266667rem;
  text-align: center;
  color: #FFFFFF;
  background-color: #000000;
}
.circle {
  height: 20px;
  width: 100%;
  text-align: center;
}
.circle > div {
  display: inline-block;
  width: 6px;
  height: 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: #47494c;
  vertical-align: top;
  margin-top: 7px;
}
.circle > div:nth-child(1) {
  background-color: #fff;
}

/* 618活动页css start */
.june_banner {
  position: relative;
  width: 100%;
  height: 7.866667rem;
  background: url(../../images/618/june_banner.jpg) no-repeat center;
  background-size: 100%;
}
.june_banner .play_video {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 1.466667rem;
  width: 7.733333rem;
  height: .986667rem;
  z-index: 10;
}
.june_coupon {
  position: relative;
  width: 100%;
  height: 11.2rem;
  background-color: #050516;
  padding: 0rem .426667rem .426667rem;
}
.june_coupon .conponbox {
  float: left;
  width: 100%;
  text-align: center;
  background-color: #FFDCB4;
  padding-top: .586667rem;
  margin-top: -0.666667rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
.june_coupon .conponbox h3 {
  position: relative;
  display: inline-block;
  height: 1.04rem;
  line-height: 1.04rem;
  font-size: .506667rem;
  font-weight: 700;
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF0214), to(#FE5115));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.june_coupon .conponbox h3::before,
.june_coupon .conponbox h3::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
  width: .533333rem;
  height: .52rem;
}
.june_coupon .conponbox h3::before {
  left: -0.973333rem;
  background: url(../../images/618/title_left.png) no-repeat center;
  background-size: 100%;
}
.june_coupon .conponbox h3::after {
  right: -0.973333rem;
  background: url(../../images/618/title_right.png) no-repeat center;
  background-size: 100%;
}
.june_coupon .conponbox > p {
  line-height: .853333rem;
  font-size: .32rem;
}
.june_coupon .conponbox > p a {
  color: #3366FF;
}
.june_coupon .conponbox > a {
  display: block;
  width: 100%;
  padding: .266667rem .426667rem .426667rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.june_coupon .conponbox > a div {
  height: 2rem;
  margin-bottom: .266667rem;
}
.june_coupon .conponbox > a div:nth-child(1) {
  background: url(../../images/618/june_coupon_1.png) no-repeat center;
  background-size: 100%;
}
.june_coupon .conponbox > a div:nth-child(2) {
  background: url(../../images/618/june_coupon_2.png) no-repeat center;
  background-size: 100%;
}
.june_coupon .conponbox > a div:nth-child(3) {
  background: url(../../images/618/june_coupon_3.png) no-repeat center;
  background-size: 100%;
  margin-bottom: 0rem;
}
.june_coupon .conponbox > div {
  width: 100%;
  height: 1.733333rem;
  line-height: 1.733333rem;
  font-size: .426667rem;
  color: #FFFFFF;
  background: -webkit-linear-gradient(left, #FF5310, #FF1021);
  background: -o-linear-gradient(right, #FF5310, #FF1021);
  background: -moz-linear-gradient(right, #FF5310, #FF1021);
  background: linear-gradient(to right, #FF5310, #FF1021);
}
.anchor_nav {
  position: fixed;
  left: 0rem;
  top: 0rem;
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  background-color: #323A45;
  display: none;
}
.anchor_nav ul {
  display: flex;
  justify-content: space-between;
}
.anchor_nav ul li {
  width: 33.3333%;
  text-align: center;
  height: 1.333333rem;
  font-size: .426667rem;
  color: #FFFFFF;
  border-bottom: .053333rem solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.anchor_nav ul li.active {
  color: #FF6666;
  border-bottom-color: #FF6666;
}
.june_modal {
  position: fixed;
  left: 0rem;
  top: 0rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: none;
}
.june_modal .cnterbox {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 9.146667rem;
}
.june_modal .cnterbox .head {
  height: 1.333333rem;
  line-height: 1.333333rem;
  text-align: center;
  font-size: .48rem;
  color: #2D3037;
  background-color: #F0F2F5;
  border: none;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  -o-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}
.june_modal .cnterbox .body {
  background-color: #fff;
  padding: .56rem .4rem .64rem;
}
.june_modal .cnterbox .body p {
  line-height: .64rem;
  font-size: .373333rem;
  color: #5E6D81;
}
.june_modal .cnterbox button {
  width: 100%;
  height: 1.333333rem;
  font-size: .426667rem;
  color: #FFFFFF;
  background-color: #FF6666;
}
.hotbox .head {
  width: 100%;
  height: 1.546667rem;
  text-align: left;
  background: -webkit-linear-gradient(left, #FE5115, #FF0214);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FE5115, #FF0214);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FE5115, #FF0214);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FE5115, #FF0214);
  /* 标准的语法 */
  padding: .213333rem .32rem 0rem;
}

.hotbox .foot > a {
  float: right;
  width: 2rem;
  height: 1.44rem;
  line-height: 1.44rem;
  font-size: .32rem;
  color: #FFFFFF;
  text-align: center;
  background: -webkit-linear-gradient(left, #FE5115, #FF0214);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FE5115, #FF0214);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FE5115, #FF0214);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #FE5115, #FF0214);
  /* 标准的语法 */
}
/* 618活动页css end */
