@charset "utf-8";
/*******CSS commont*************/
html { width: 100%; }
body {
  min-width: unset !important;
  width: 100%;
  overflow-x: hidden;
  background-color: #ffffff;
}

#wrapper {
  margin-top: 1.333333rem /* 20/15 */;
}

.container{
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

header { display: none; }
#_left { display: none; }
footer { display: none; }
.bdshare-slide-button-box { display: none !important; }

#location {
  display: none;
  border-top: 6px solid #3083eb;
  background: #f5f5f5;
  line-height: 3.2rem /* 48/15 */;
  color: #989898;
  font-size: 0.933333rem /* 14/15 */;
  border-bottom: 1px solid #e6e6e6;
}

#bar {
  margin: 0 0 3% 0;
}

#bar img {
  max-width: 100%;
  border-radius: 0.8rem /* 12/15 */;
  overflow: hidden;
}

#login_bar {
  margin: 3% 0;
}

#login_bar #bar_login {
  height: 4rem /* 60/15 */;
  border-radius: 0.533333rem /* 8/15 */;
  background: linear-gradient(270deg, #094ce8, #038af9 53%, #0043df);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -1px 10px 0 rgba(119, 137, 146, 0.1);
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2.666667rem /* 40/15 */;
}

#login_bar #bar_login #bar_login_s {
  max-width: 100%;
  display: flex;
  align-items: center;
}

#login_bar #bar_login .login_user_box {
  position: relative;
  width: 80px;
  height: 100%;
  cursor: pointer;
}

#login_bar #bar_login .login_user_box_s {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 70px;
  overflow: hidden;
}

#login_bar #bar_login img {
  position: relative;
}

#login_bar #bar_login span {
  font-size: .666667rem /* 10/15 */;
  color: #ffffff;
  margin: 0 .666667rem /* 10/15 */;
}

#login_bar #bar_login .login {
  display: block;
  width: 6.666667rem /* 100/15 */;
  height: 2.133333rem /* 32/15 */;
  line-height: 2.133333rem /* 32/15 */;
  background: linear-gradient(270deg, #ffecc4, #ffca81);
  border-radius: 1.8rem /* 27/15 */;
  color: #a95819;
  font-size: .666667rem /* 10/15 */;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  margin-right: .333333rem /* 5/15 */;
}

#main_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#_left {
  width: 100%;
  background-color: #f5f5f5;
  order: 0;
}

#_left dl dt {
  height: 60px;
  line-height: 4rem /* 60/15 */;
  padding: 0 1.333333rem /* 20/15 */;
  font-size: 1.2rem /* 18/15 */;
  background: #3083eb;
  color: #ffffff;
  text-align: center;
}
#_left dl dd {
  height: 3.333333rem /* 50/15 */;
  line-height: 3.333333rem /* 50/15 */;
  font-size: 1rem /* 15/15 */;
  border-bottom: 1px solid #efefef;
}
#_left dl dd a {
  display: block;
  padding: 0 1.333333rem /* 20/15 */;
}
#_left dl dd a.active {
  background-color: #ff8037;
  color: #ffffff;
}
#_left dl dd a.active .text-blue {
  color: #ffffff;
}

#_right {
  width: 100%;
  order: -1;
  margin-bottom: 0;
}

.mainInfo {
  font-size: .933333rem /* 14/15 */;
  line-height: 2;
}

#search_box {
  padding: 1% 2%;
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  color: #6c6b6b;
  font-size: .8rem /* 12/15 */;
}

#search_box dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  margin: 0.666667rem /* 10/15 */ 0;
}
#search_box dl dt {
  width: 100%;
  color: #3083eb;
  line-height: 2rem /* 30/15 */;
  margin-bottom: 0.666667rem /* 10/15 */;
}
#search_box dl dd {
  width: 100%;
  line-height: 2rem /* 30/15 */;
}

#search_box dl dd {
  display: flex;
  flex-wrap: wrap;
}
#search_box dl dd span {
  padding: 0 7px;
  margin-right: 0.666667rem /* 10/15 */;
  margin-bottom: 0.333333rem /* 5/15 */;
}
#search_box dl dd span.active {
  background-color: #3083eb;
  color: #ffffff;
}

#search {
  display: flex;
}

#search .input {
  width: auto;
  flex-grow: 0;
  outline: none;
  display: block;
  height: 2rem /* 30/15 */;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  color: #666666;
  padding: 0 10px;
}

#search .button {
  flex-shrink: 1;
  margin-left: 0.666667rem /* 10/15 */;
  outline: none;
  border-radius: 0 !important;
  display: block;
  background-color: #3083eb;
  color: #ffffff;
  width: 5.333333rem /* 80/15 */;
  height: 2rem /* 30/15 */;
  text-align: center;
  line-height: 2rem /* 30/15 */;
  font-size: 0.933333rem /* 14/15 */;
  cursor: pointer;
}

#search .button:hover {
  background-color: #009def;
}

#total_info {
  margin: 0.666667rem /* 10/15 */ 0 2rem /* 30/15 */;
  font-size: .8rem /* 12/15 */;
  padding: 0.666667rem /* 10/15 */;
  background: #fff1e5;
  border: 1px solid #ffd7ad;
  color: #6c6b6b;
  display: flex;
  justify-content: center;
  align-items: center;
}

#total_info i {
  color: #ff7034;
  font-size: 1.066667rem /* 16/15 */;
  margin-right: 0.533333rem /* 8/15 */;
}

.row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
  margin-bottom: calc(var(--bs-gutter-x) * 1);
}

.list li {
  width: 50%;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.list li a {
  background-color: #ffffff;
  border-radius: 0.333333rem /* 5/15 */;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 3px #cccccc;
}


.list li a .tags {
  position: absolute;
  top: .2rem /* 3/15 */;
  left: .2rem /* 3/15 */;
  z-index: 2;
  display: flex;
}


.list li a .contBox {
  padding: .333333rem /* 5/15 */;
}

.list li a .contBox .title {
  margin-bottom: 0.666667rem /* 10/15 */;
}

.list li a .contBox .price {
  margin-bottom: 0.666667rem /* 10/15 */;
}

.list li a .contBox .desc {
  font-size: 0.933333rem /* 14/15 */;
}

.page_box {
  margin-top: 2.666667rem /* 40/15 */;
}

#main_wrapper {
  margin-bottom: 0;
}

#videoinfo #video_play_box {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 2rem /* 30/15 */;
}

#video_play_box {
  position: relative;
}
#video_play_box::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 的比例，即 9/16 = 0.5625，这里表示高度是宽度的 56.25% */
}
.jw-controlbar {
  width: 100%;
}

#playercontainer {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #333333;
}

#video_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #242424;
  display: flex;
  justify-content: center;
  align-items: center;
}

#video_cover .title {
  border-bottom: 1px #333333 solid;
  width: 13.333333rem /* 200/15 */;
  margin: 0 auto 1.333333rem /* 20/15 */;
  padding: 0.666667rem /* 10/15 */;
  font-size: 2rem /* 30/15 */;
  font-weight: bold;
  color: #ffd179;
  text-align: center;
}
#video_cover .desc {
  color: #999999;
  font-size: 0.933333rem /* 14/15 */;
  margin-bottom: 1.333333rem /* 20/15 */;
  text-align: center;
}

#video_cover button {
  border-radius: 2.666667rem /* 40/15 */;
  background: linear-gradient(90deg, #ffdf89 0, #ffd179 100%);
  width: 18.666667rem /* 280/15 */;
  height: 2.666667rem /* 40/15 */;
  text-align: center;
  line-height: 2.666667rem /* 40/15 */;
  font-size: 0.933333rem /* 14/15 */;
  color: #63450c;
  font-weight: 700;
}

#videoinfo #video_list_box {
  box-sizing: border-box;
  width: 100%;
}

#videoinfo #video_list_box .box_s {
  background-color: #efefef;
}

#videoinfo #video_list_box .box_s dl dt {
  line-height: 3.2rem /* 48/15 */;
  padding-left: 1rem /* 15/15 */;
  padding-right: 0.666667rem /* 10/15 */;
  height: 3.2rem /* 48/15 */;
  background: linear-gradient(
    180deg,
    rgba(30, 100, 241, 0.08) 1.98%,
    rgba(30, 98, 236, 0) 50.23%
  );
  background-color: #f5f7fa;
}
#videoinfo #video_list_box .box_s dl dd {
  border-bottom: 1px solid #fafafa;
  cursor: pointer;
  font-size: 0.933333rem /* 14/15 */;
  line-height: 3.2rem /* 48/15 */;
  padding-left: 1rem /* 15/15 */;
  padding-right: 0.666667rem /* 10/15 */;
  height: 3.2rem /* 48/15 */;
}
#videoinfo #video_list_box .box_s dl dd.active {
  background-color: #e8effd;
  color: #1e62ec;
}
@media (min-width: 375px) {
  #wrapper {
    padding: 0;
  }
  #login_bar #bar_login span { font-size: .8rem /* 12/15 */; }
  #login_bar #bar_login .login { font-size: .8rem /* 12/15 */; }
  #search_box { font-size: .933333rem /* 14/15 */; }
  #total_info { font-size: .933333rem /* 14/15 */; }
  .list li a .contBox {
    padding: .666667rem /* 10/15 */;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
  #wrapper {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  #wrapper {
    padding: 0;
  }
  
  #search_box dl {
    flex-wrap: nowrap;
    margin: 20px 0;
  }

  #search_box dl dt {
    width: auto;
    flex-shrink: 0;
    color: #3083eb;
    margin-bottom: .666667rem /* 10/15 */;
  }
  #search_box dl dd {
    width: auto;
    flex-grow: 1;
    margin-left: 17px;
    margin-bottom: 0;
  }
  #search_box dl dd span {
    font-size: 0.933333rem /* 14/15 */;
    margin-bottom: 0.666667rem /* 10/15 */;
    cursor: pointer;
  }

  #search .input {
    width: 14.666667rem /* 220/15 */;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .login_mobile_box {
    padding: 3.333333rem /* 50/15 */ !important;
  }

  #wrapper {
    padding: 25px 0 0 0;
  }
}

@media (min-width: 1200px) {

  header { display: block; }
  #wrapper { margin-top: 0; }
  footer { display: block; }
  .bdshare-slide-button-box { display: block !important; }

  #location {
    display: block;
  }
  .cu-tabbar-height { display: none; }
  #tabbar { display: none; }

  #bar {
    margin: 3% 0 3% 0;
  }

  .container {
    max-width: 1140px;
  }

  .mainInfo {
    font-size: 1.066667rem /* 16/15 */
  }

  .row {
    --bs-gutter-x: 1.5rem;
  }

  #wrapper {
    padding: 25px 25px 50px 0px;
  }
  #main_wrapper {
    margin-bottom: 3%;
  }

  #main_container {
    flex-wrap: nowrap;
  }

  #_left {
    display: block;
    width: 13.333333rem /* 200/15 */;
  }

  #_right {
    width: calc(100% - 16.666667rem /* 250/15 */);
    display: block;
    order: 0;
    margin-bottom: 0;
  }

  #videoinfo .video_box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }

  #videoinfo #video_play_box {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(100% - 18rem /* 270/15 */);
    margin-bottom: 2rem /* 30/15 */;
  }

  #videoinfo #video_list_box {
    width: 16rem /* 240/15 */;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .list li {
    width: 25%;
  }


  #login_bar #bar_login {
    height: 5.333333rem /* 80/15 */;
  }


  #login_bar #bar_login #bar_login_s {
    width: 48rem /* 720/15 */;
  }
  
  #login_bar #bar_login .login_user_box {
    width: 118px;
  }
  
  #login_bar #bar_login .login_user_box_s {
    width: 118px;
    height: 110px;
  }

  #login_bar #bar_login span {
    font-size: 1.333333rem /* 20/15 */;
  }

  #login_bar #bar_login .login {
    width: 110px;
    height: 2.133333rem /* 32/15 */;
    line-height: 2.133333rem /* 32/15 */;
    font-size: 0.933333rem /* 14/15 */;
    margin-right: 0;
  }
  

}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1601px) {
  .container {
    max-width: 1400px;
  }
  #wrapper {
    padding: 0 0px 60px 0px;
  }
}