#modal {

  box-sizing: border-box;

}

#modal.open {

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.popout_table {

  width: 100%;

  height: 100%;

  padding: 5%;

  background-color: rgba(0, 0, 0, 0.8);;

  position: fixed;

  top: -999px;

  z-index: 999;

  transition: linear 1s ease;

}

.close_table {

  float: right;

}



/*捲軸*/

#scrollme::-webkit-scrollbar-track {

  background-color: #FFF;

  border-radius: 20px;

  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);

}

#scrollme::-webkit-scrollbar {

  height: 8px;

  width: 8px;

}

#scrollme::-webkit-scrollbar-thumb {

  background-color: #aaa;

  border-radius: 20px;

  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);

}



/*表格*/

.table-responsive {

  text-decoration: none;

  font-size: 14px;

  line-height: 16px;

  color: #FFF;

  overflow: auto;

  width: 95%;

  max-width: 1108px;

  margin: 0 auto;

  border-radius: 3px;

}

.table-responsive table {

  border-collapse: collapse;

  width: 100%;

  margin: 0 auto;

}

.table-responsive .table-all {

  width: 100%;

  background: linear-gradient(to right, #005dce, #00b9ef, #00b9ef);

  padding: 2px;

  border: 1px solid #00b9ef;

}

.table-responsive .table-1 {

  width: 20%;

}

.table-responsive .table-2 {

  width: 40%;

}

.table-responsive .table-3 {

  width: 40%;

}

.table-responsive tr, th, td {

  border: 0.5px solid #aaa; 

  padding: 10px;

  text-align: center;

}

.table-responsive tr img {

  max-width: 250px;

}

.table-responsive td.img_bg {

  background-color: #000;

}

.table-responsive tr p {

  color: #aaa;

  font-size: 12px;

  font-weight: 400;

  padding-top: 5px;

}

.table-responsive thead {

  color: #00b9ef;

  font-size: 16px;

  line-height: 18px;

  /*white-space: nowrap;*/

}

.table-responsive th.td-left, td.td-left {

  color: #00b9ef;

  font-weight: 700;

}



@media screen and (max-width:1200px) {}

@media screen and (max-width:900px) {}

@media screen and (max-width:768px) {}

@media screen and (max-width:580px) {}