/*
 * @Author: Satya 
 * @Date: 2020-06-28 10:38:32 
 * @Last Modified by: Satya
 * @Last Modified time: 2020-07-07 14:27:33
 * 视频列表页面
 */
/*body {
  width: 100vw;
  height: 100vh;
}

.header_container {
  background-color: #2f3337;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
}
.header_container > div {
  text-align: center;
  padding: 20px 0 20px 50px;
  color: aliceblue;
  height: 80px;
  max-height: 80px;
}
.nav_container > div > a {
  font-size: large;
  font-weight: 900;
  line-height: 3.6rem;
  color: aliceblue;
} */
.main_container {
  background-color: #f99e2b;
  padding-top: 100px;
}
.tab_btn {
  height: 60px;
  text-align: center;
}
.tab_btn > span {
  display: inline-block;
  line-height: 60px;
  margin: 0 50px;
  font-size: 2.7rem;
  font-weight: 700;
  cursor: pointer;
}
.tab_btn > span:hover {
  color: #f5f5f5;
  border-bottom: 3px solid #2f3337;
}
/* 已激活 */
.is_active {
  color: #f5f5f5;
  border-bottom: 3px solid #2f3337;
}

.show_video_container {
  /* margin-top: 100px; */
  margin-left: 8%;
  margin-top: 2%;
  background-color: rgba(0, 0, 0, 0);
}
.show_video_container > div {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
}

.img_div {
  width: 480px;
  height: 320px;
  /* display: block; */
  background-repeat: no-repeat;
  background-size: 100%;
  /* position: relative; */
  text-align: center;
}
.img_pc {
  background-image: url(../images/video_pc.png);
}
.img_phone {
  background-image: url(../images/video_phone.png);
}
.img_school {
  background-image: url(../images/video_school.png);
}

.img_div > span {
  line-height: 20rem;
  font-size: 4rem;
  font-weight: 700;
  display: inline-block;
  padding-top: 8%;
}

.footer_container {
  bottom: 0;
  z-index: 999;
  background-color: #2f3337;
  width: 100%;
  height: 280px;
}

/* 滾動條 */
.scrollbar {
  /* max-height: auto; */
  max-height: 84%;
  overflow-y: scroll;
  /* background-color: #F5F5F5; */
}

.scrollbar_inset_div {
  width: 100%;
  /* height: auto; */
  /* border: 1px solid #ccc; */
  /* box-shadow: inset 0px 0px 2px #d9d9d9; */
}

/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* 滑动条背景色 ,需显示则将其打开 */
  background-color: rgba(0, 0, 0, 0.12);
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
}