body{
   margin: 0px;
    
}
.download_picture_btn
{
   display: inline-block;
}
.download_picture
{
   background-color:#FFFFFF;
  padding-top:5px;
  padding-right: 5px;
  padding-bottom:5px;
  

}
.header .header_fixed_area{
   height: 70px;
   width: 100%;
   position: fixed;
   z-index:3;
   background-color: rgb(66, 154, 198);
}
.header_title{
   width: 300px;
   margin: 15px auto;
   text-align: center;
   font-size: 30px;
   font-family: SimHei,Microsoft YaHei;
}
.header .header_left_button img{
   height: 35px;
   width: 50px;
   margin-left: 30px;
   margin-top: 15px;
   float: left;
   cursor: pointer;
}
.header .header_right_burron img{
   height: 40px;
   width: 40px;
   margin-right: 30px;
   margin-top: -55px;
   float: right;
   cursor: pointer;
}
.user_log_in_bar{
   display: none;
   width: 100px;
   text-align: left;
}
.user_log_in_bar ul{
   list-style-type:none;
   background-color: rgb(222, 222, 222);
   position: absolute;
   z-index: 15;
   right: 50px;
   top:35px;
   border: 1px solid rgb(46, 46, 46);
   box-shadow: 0 3px 8px rgb(46, 46, 46);
   padding: 5px 5px 5px 50px;
}
.user_log_in_bar ul li a{
   text-decoration: none;
   color: black;
   float: left;
}
.user_log_out_bar{  /*登入後才會用到*/
   display: none;
}
.user_log_out_bar ul{  /*登入後才會用到*/
   list-style-type:none;
   position: fixed;
   z-index: 15;
   right: 50px;
   top:35px;
}
.user_log_out_bar ul li{
   margin-bottom: 5px;
   background-color: rgb(222, 222, 222);
   padding: 5px 13px;
}
.user_log_out_bar ul li:hover{
   background-color: rgb(228, 239, 240);
}
.user_log_out_bar ul li a{  /*登入後才會用到*/
   text-decoration: none;
   color: black;
}

.black_opacity_background{
   height: 100%;
   width: 100%;
   position: fixed;
   top: 0px;
   background: rgba(0,0,0,0.5);
   z-index: 3;
   display: none;
}


.cancel_cross_icon img{
   height: 30px;
   width: 30px;
}


.result_area{
   width: 40%;
   height: auto;
   position: absolute;
   top: 80px;
   left: 50%;
   z-index: -1;
   margin-left: -20%;
}
.reason span{
   word-break: break-all;/*文字超過自動換行*/
}

.name span{
   word-break: break-all;/*文字超過自動換行*/
}

.result_area input{
   width: 100%;
}
.result_area button{
   width: 30%;
   text-align: center;
   position: relative;
   left: 50%;
   margin-left: -15%;
}
.result_area textarea{
   width: 100%;
}
/*canvas{
   border: 1px solid black;
   width: 100%;
   height: auto;
}*/


#showTimeBox{
   text-align: center;
   //height: 50px; /*避免時間讀太久，導致一開始的掛圖偏掉*/
   /*推到渾天甲子故省略By 宇森*/
}


.appear{   /*讓js引入此class來使隱藏的東西跑出來*/
   display:block;
}
.disappear{
   display: none;  /*讓js引入此class來隱藏東西*/
}







@media screen and (max-width: 750px){
   .log_in_and_sign_up_list{  /*點擊登入後跳出的可輸入登入資訊頁面*/
      width: 450px;
      height: auto;
      background-color: rgb(151, 195, 203);
      padding: 15px 30px 30px 30px; /*邊框與內文四周間隔*/
      display: none;
      border: 1px solid black;
      box-shadow: 0 3px 8px rgb(46, 46, 46);
      margin-left: -225px;
      position: absolute;
      left: 50%;
      top: 10%;
      z-index: 5;
      border-radius: 5px;
   }
   .log_in_list table{
      width: 400px;
      position: relative;
      left: 50%;
      margin-left: -200px;
   }
   .log_in_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 18px;
   }
   .sign_up_list table{
      width: 450px;
      position: relative;
      left: 50%;
      margin-left: -225px;
   }
   .sign_up_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 18px;
   }
   table tr td input{
      font-size: 16px;
   }
   .cancel_cross_icon img{
      height: 20px;
      width: 20px;
   }
   .result_area{
      width: 50%;
      height: auto;
      position: absolute;
      left: 50%;
      margin-left: -25%;
   }
}
@media screen and (max-width: 600px){
   .reason{
      font-size: 14px;
   }
   .name{
      font-size: 14px;
   }
   .log_in_and_sign_up_list{  /*點擊登入後跳出的可輸入登入資訊頁面*/
      width: 300px;
      height: auto;
      background-color: rgb(151, 195, 203);
      padding: 15px 30px 30px 30px; /*邊框與內文四周間隔*/
      display: none;
      border: 1px solid black;
      box-shadow: 0 3px 8px rgb(46, 46, 46);
      margin-left: -150px;
      position: absolute;
      left: 50%;
      top: 10%;
      z-index: 5;
      border-radius: 5px;
   }
   .log_in_list table{
      width: 300px;
      position: relative;
      left: 50%;
      margin-left: -150px;
   }
   .log_in_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 16px;
   }
   .sign_up_list table{
      width: 350px;
      position: relative;
      left: 50%;
      margin-left: -175px;
   }
   .sign_up_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 16px;
   }
   table tr td input{
      font-size: 16px;
   }
   .cancel_cross_icon img{
      height: 20px;
      width: 20px;
   }

   .result_area{
      width: 70%;
      height: auto;
      position: absolute;
      left: 50%;
      margin-left: -35%;
   }

}


@media screen and (max-width: 450px){
   .header_title{  /*標題文字*/
      width: 180px;
      margin: 20px auto;
      text-align: center;
      font-size: 25px;
   }
   .header .header_left_button img{
      height: 21px;
      width: 30px;
      margin-left: 25px;
      margin-top: 20px;
      float: left;
      cursor: pointer;
   }
   .header .header_right_burron img{
      height: 25px;
      width: 25px;
      margin-right: 25px;
      margin-top: -50px;
      float: right;
      /*position: absolute;
      right: 10px;*/
   }
       .log_in_and_sign_up_list{  /*點擊登入後跳出的可輸入登入資訊頁面*/
      width: 300px;
      height: auto;
      background-color: rgb(151, 195, 203);
      padding: 15px 0px; /*邊框與內文四周間隔*/
      display: none;
      border: 1px solid black;
      box-shadow: 0 3px 8px rgb(46, 46, 46);
      margin-left: -150px;
      position: absolute;
      left: 50%;
      top: 10%;
      z-index: 5;
      border-radius: 5px;
   }
   .log_in_list table{
      width: 270px;
      padding-top: 20px;
   }
    .log_in_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 16px;
   }
   .sign_up_list table{
      width: 270px;
      padding-top: 20px;
      position: relative;
      left: 10%;
      margin-left: -15px;
   }
   .sign_up_list table tr td{
      padding: 5px 5px 5px 5px;
      font-size: 16px;
   }
    table tr td input{
      font-size: 16px;
   }
   .cancel_cross_icon img{
      height: 20px;
      width: 20px;
      position: absolute;
      left: 230px;
   }

   .result_area{
      width: 90%;
      height: auto;
      position: absolute;
      top: 80px;
      left: 50%;
      z-index: -1;
      margin-left: -45%;
   }