div.box2 {
    background-color: black;
    color: white;
   width: auto;
   height: 100px;
   overflow: scroll;
}

   .bg-login-image{
    background-image: url("../playlocal/img/logo.png");
         background-repeat: no-repeat;
 background-size: auto;
           }
   
       .bg-register-image{
background-image: url("../playlocal/img/bg.jpg");
 background-size: auto;
-webkit-filter:contrast(2);
   }
   
           .img-profile rounded-circle{
background-image: url("../playlocal/img/logo.png");
 background-size: auto;

   }

           body { 
   
       
       font-family: LiSong Pro , "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
                       
       color: black;
   font-size: 14px

   }
         #div1 {
           border: 1px solid red;
           width: 200px;
           height: 100px;
       }
       
       
       .datalist {
 border: 1px solid #429fff; /* 表格边框 */
 font-family: Arial;
 border-collapse: collapse; /* 边框重叠 */
}
.datalist tr:hover {
 background-color: #c4e4ff; /* 动态变色,IE6下无效！*/
}
.datalist caption {
 padding-top: 3px;
 padding-bottom: 2px;
 font: bold 1.1em;
 background-color: #f0f7ff;
 border: 1px solid #429fff; /* 表格标题边框 */
}
.datalist th {
 border: 1px solid #429fff; /* 行、列名称边框 */
 background-color: #d2e8ff;
 font-weight: bold;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 10px;
 padding-right: 10px;
 text-align: center;
}
.datalist td {
 border: 1px solid #429fff; /* 单元格边框 */
 text-align: right;
 padding: 4px;
}
               .div-gradient
{
background: linear-gradient(45deg, rgba(233, 22, 24, 1)0%, rgba(235, 255, 255, 0.8)60%);
background: -moz-linear-gradient(45deg, rgba(233, 22, 24, 1)0%, rgba(235, 255, 255, 0.8)60%);
background: -webkit-linear-gradient(45deg, rgba(233, 22, 24, 1)0%, rgba(235, 255, 255, 0.8)60%);
background: -o-linear-gradient(45deg, rgba(233, 22, 24, 1)0%, rgba(235, 255, 255, 0.8)60%);
}
   
   .bg-img{
            filter: brightness(50%);
   background-image: url(../playlocal/img/bg2.jpg);	
        opacity: 0.9;
           z-index:1;
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
        filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
       }
       .drop{
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
   filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))	
           
       }
       a {
   text-decoration:none;
}
       
.myButton {

   font-family:Arial;
   font-size:13px;

   
}
.myButton:hover {
   background-color:#1e62d0;
}
.myButton:active {
   position:relative;
   top:0px;
}
       td{
cursor: pointer;
       }
   
   
   .trnity{
   background-image: url(../img/front-2.png);
      background-position: center center;
   background-size: auto 100%;}
   
   
   .tcenter {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           /* 上面三个属性将元素相对于视口垂直和水平居中，transform 属性将元素向左上角移动一半宽度和高度 */
       }
   
   
   
@media screen and (max-width: 480px) {
.wfit{
   margin-bottom: 1%;
   margin-top: 50%;
   float: none;
   text-align: center;
   
   }
#banner h1 {
   font-family: 'Open Sans', sans-serif, Arial, Helvetica;
   font-size: 40px;
   line-height: 60px;
   font-weight: 800;
   color: #111;
}	
   
}

/* 針對平板電腦樣式 */
@media screen and (min-width: 481px) and (max-width: 768px) {
#banner h1 {
   font-family: 'Open Sans', sans-serif, Arial, Helvetica;
   font-size: 40px;
   line-height: 60px;
   font-weight: 800;
   color: #111;
}	
}

/* 針對桌面電腦樣式 */
@media screen and (min-width: 768px) {
.wfit{
       margin-bottom: 1%;
       margin-top: 4%;
       float: none; 
       text-align: center;		
   }
#banner h1 {
   font-family: 'Open Sans', sans-serif, Arial, Helvetica;
   font-size: 40px;
   line-height: 60px;
   font-weight: 800;
   color: #111;
}		
   
}