body {
  height: 100vh;
  background-color: #fff9dc;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

main {
  height: calc(100% - 60px);
}

a {
  text-decoration: none;
}
a:link {
  color: #000;
}
a:visited {
  color: #000;
}

.bar_background {
  width: 100%;
  height: 85px;
  background-color: #fff;
  margin-bottom: 20px;
  overflow: hidden;
  display:flex;
  align-items:center;
  float: left;
}

.title_bar {
  margin-left: 18px;
  width: 80%;
  min-width: 100%;
  display:flex;
  align-items:center;
}

/* fontsize 28px */
.title {
  min-height: 60px;
  max-width: 270px;
  padding: 0px 2px;
  font-size: 28px;
  text-align: center;
  float: left;
}
.title:hover {
  background-color: #DDD;
  border-radius: 10px;
}

.line {
  height: 68px;
  width: 5px;
  background-color: #7CA7BC;
  margin-top: 9px; 
  margin-bottom: 9px; 
  margin-right: 20px;
  float: left;
}

.tri {
  height: 0px;
  width: 0px;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent transparent #0163b0;
  margin: 0px 0px 0px 20px;
  float: left;
}

.back {
  width: 70px;
  height: auto;
  margin-left: 17px; 
  display: inline-block;
}
.back:hover {
  transform: scale(1.25);
}

.button_area {
  margin-left: 18%;
  width: 60%;
  max-width: 60%;
  max-height: 70%;
  padding-top: 0.5%;
  overflow: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/*0.2 height:200 width:280
width: 250px;
  height: 180px;*/
.button {
  width: 25%;
  height: auto;

  display: inline-block;
  margin: 0% 1.5% 3% 1.5%;
}
.img_button {
  width: 100%;
  height: auto;
}
.button:hover {
-webkit-filter: brightness(.5);
}

/* 縮圖hover加上一層暗面，用webkit-filter調亮度取代
0.1 height:143px width:200px
.mask_del {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 250px;
  margin-left: 20px;
  margin-right: 20px;
  background: rgba(101, 101, 101, 0.6);
  color: #ffffff;
  opacity: 0;
}
.mask_del:hover {
  opacity: 1;
}
*/

/* 0726：大小珊瑚、影片區(background)設成 float:left margin對齊 
.picture_left_test {
  width: 200px;
  height: auto;
  float: left;
  margin: 10% 1.5% 0% 1.5%;
}
.picture_right_test {
  width: 200px;
  height: auto;
  float: left;
  margin: 10% 1.5% 0% 1.5%;
}

*/
.picture_left {
  position: absolute;
  bottom: 2%;
  left: 3%;
  height: auto;
  width: 13%;
}

.picture_right {
  position: absolute;
  bottom: 0%;
  right: 1.5%;
  height: auto;
  width: 20%;
}

.harbor {
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  bottom: 0;
  position: absolute;
}

.small_title {
  color: gray;
  font-size: 17px;
}

.background {
  margin-left: 3%;
  display: inline-block;
  width: 60%;
  height: 60%;
  text-align: center;
  position: relative;
  bottom: 0px;
}

.video_area {
  background-color: #0163b0;
  width: 50%;
  height: 70%;
  min-width: 700px;
  min-height: 450px;
  border-radius: 30px;
  margin-left: 22%;
  display: flex;
  justify-content:center;
  align-items:center;
}

#player {
  width: 80%;
  height: 80%;
  min-width: 240px;
  min-height: 180px;
}

/* 網頁變形，底圖消失*/
@media screen and (max-height: 620px){
  .picture_left {
    display: none;
  }

  .picture_right {
    display: none;
  }
}

/* 後用flexbox，不需要
@media only screen and (min-width: 1350px){
  @media screen and (max-height: 620px){
    .picture_left {
      display: none;
    }
  
    .picture_right {
      display: none;
    }
  }
}
@media only screen and (max-width: 1460px){
  .button_area {
    margin-left: 25%;
  }
}
@media only screen and (max-width: 1350px){
  .video_area{
    margin-left: 20%;
  }
  .picture_left{
    width: 150px;
  }
  .picture_right{
    width: 250px;
  }
  @media only screen and (max-height: 560px){
    .picture_left{
      display: none;
    }
    .picture_right{
      display: none;
    }
  }
}
@media only screen and (max-width: 1240px){
  .picture_left{
    display: none;
  }
  .picture_right{
    display: none;
  }
}
*/
/*video_area*/
@media only screen and (max-width: 1155px){
  .video_area{
    margin-left: 18%;
  }
}
@media only screen and (max-width: 1050px){
  .video_area{
    margin-left: 15%;
  }
}
@media only screen and (max-width: 970px){
  #player{
    width: 75%;
    height: 75%;
  }
  .video_area{
    width: 60%;
    min-width: 600px;
    margin-left: 18%;  
  }
}
@media only screen and (max-width: 880px){
  #player{
    width: 70%;
    height: 70%;
  }
  .video_area{
    width: 50%;
    height: 60%;
    min-width: 550px;
    min-height: 350px;
    margin-left: 18%;  
  }
}
@media only screen and (max-width: 810px){
  .video_area{
    width: 50%;
    height: 60%;
    min-width: 550px;
    min-height: 350px;
    margin-left: 15%;  
  }
}
/*button_area，後用flexbox，不需要
@media only screen and (max-width: 1070px){
  .button_area{
    margin-left: 20%;
  }
}
@media only screen and (max-width: 980px){
  .button_area{
    margin-left: 23%;
  }
  .v_button{
    width: 200px;
    height: 143px;
  }
}
@media only screen and (max-width: 860px){
  .button_area{
    margin-left: 20%;
  }
}
@media only screen and (max-width: 810px){
  .button_area{
    margin-left: 30%;
  }
  .v_button{
    width: 250px;
    height: 180px;
  }
}
*/

/*變成手機了，所以不需要
@media only screen and (max-width: 680px) {
  .video_area {
    height: 20%;
    margin-left: 15%;
    min-width: 360px;
    min-height: 280px;
  }
  #player {
    width: 60%;
    height: 40%;
  }
}
@media only screen and (max-width: 750px), screen and (max-height: 650px) {
  .harbor {
    height: auto;
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }
}
*/

/* 手機橫屏 
  @media only screen and  (orientation: landscape) {
    .bar_background {
      height: 60px;
    }
    .back {
      margin-left: 17px; 
      display: inline-block;
      position: relative;
    }
    .title_bar {
      margin-left: 20px;
    }
    .line {
      height: 48px;
      width: 5px;
      background-color: #7CA7BC;
      margin-top: 9px; 
      margin-bottom: 9px; 
      margin-right: 20px;
      float: left;
    }
    .tri {
      border-style: solid;
      border-width: 10px;
      margin: 0px 0px 0px 15px;
    }
    .button_area {
      margin-left: 22%;
      width: 80%;
      max-width: 80%;
      max-height: 180px;
      overflow: auto;
    }
    .v_button {
      position: relative;
      width: 30%;
      height: auto;
      display: inline-block;
      margin: 0% 1.5% 3% 1.5%;
    }
    .video_area {
      width: 50%;
      height: 30%;
      min-width: 600px;
      min-height: 360px;
    }
    #player {
      width: 80%;
      height: 80%;
      min-width: 240px;
      min-height: 180px;
    }
  }
  */