@charset "utf-8";

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (min-width: 320px) and (max-width: 600px) {
.membertable th, .membertable td{
 display: block;
 float: left;
 text-align: left;
 width:100%;
}
 
.membertable th:before .membertable td:before{
 display: block;
 float: left;
 text-transform: uppercase;
 font-weight: bold;
}

.membertable tr:nth-child(even), table.format03 tr:nth-child(odd){
 background-color:#ddd;
}
}

@media (min-width: 320px) and (max-width: 850px) {
.membertable,.membertable04{
  border: 0;
}

.membertable02 th, .membertable04 th, .format03 td.thtitle, .format03 td.thlast{
  display: none;
}

.membertable04 tr{
  margin-bottom: 10px;
  display: block;
  border-bottom: 2px solid #ddd;
}

.membertable04 td, .membertable04 td.msg02 {
  display: block;
  text-align: right;
  border-bottom: 1px dotted #ccc;
}

.format03 td.title02{
 text-align:left;
 padding-left:3px;
}

table.format03 td{
 border-right:none;
 border-bottom:none;
}

.membertable td:last-child, .membertable02 td:last-child, .membertable04 td:last-child{
  border-bottom: 1px solid #bbb;
}

.membertable td:before, .membertable02 td:before, .membertable04 td:before{
  content: attr(data-label);
  float: left;
  text-transform: uppercase;
  font-weight: bold;
  color:#210883;
}

.membertable02 tr:nth-child(even){
 background-color:#ddd;
}

.sidebox{
 display:none;
 }
 .mainwrap{
 line-height:1.0;
 width:100%;
}
 
table.format02 th, table.format02 td{
 display: block;
 float: left;
 text-align: left;
 width:100%;
}

table.format02 tr:nth-child(even){
 background-color:#ddd;
}

.format03 td:before, .format03 td:before, .format03 td:before{
  content: attr(data-label);
  float: left;
  text-transform: uppercase;
  font-weight: bold;
  color:#210883;
}

.input4{
  width:75%;
}

.adbox img, .adbox img.last{
  width: 49%;
  padding:12px 2px 5px 2px;
  text-align:center;
}

}


@media (min-width: 480px) and (max-width: 767px) {
table.newstable{
 width:100%; 
}
 
.darkbox-cont .inner, .darkbox-cont02 .inner {
 box-sizing: border-box;
 padding:20px 10px 0 20px;
 height:250px;
 overflow:scroll;
}
.darkbox02, .darkbox03{
 display:inline-block;
 width:100%;
}

}

@media (min-width: 320px) and (max-width: 479px) {
.header{
 padding:5px 5px;
 width:100%;
}
.topnav{
 float:right;
 list-style:none;
 padding-top:2px;
 width:69%;
}

.logo img{
 display: block;
 max-width: 100%;
 height: auto;
}

.topnavbox a, .topnavbox a.last{
 color:#393939;
 font-size:0.75em;
 padding:0 0;
 text-decoration:none;
}	

.mainbox, .adbox, .newsbox, table.newstable{
 width:100%;
}

.adbox{
 text-align:center;
}
 
.adbox img, .adbox img.last{
 width:49%;
 padding:12px 5px 5px 5px;
}

footer .mapbox ul:nth-child(1){width:100%;}
footer .mapbox ul:nth-child(2){width:100%;}
footer .mapbox ul:nth-child(3){width:100%;}
footer .mapbox ul:nth-child(4){width:100%;}
footer .mapbox ul:nth-child(5){width:100%;}
footer .mapbox ul:nth-child(6){width:100%;}
footer .mapbox ul:nth-child(7){width:100%;}
footer .mapbox ul:nth-child(8){width:100%;}

/* 內頁區 */
.innermsg .add{
 min-width:80%;
}


.sidebox{
 display:none;
 }
 
.mainwrap{
 line-height:1.0;
 width:100%;
}


.input3{
 width:80%;
 border: 1px solid #bbb;
 height:150px;
 line-height:150px;
 box-sizing: border-box;
 padding-left: 3px;
 margin:0 0 10px 35px;
}

table.format02 th, table.format02 td, table.format03 th, table.format03 td, table.format04 th, table.format04 td {
 display: block;
 float: left;
 text-align: left;
 width:100%;
 }
 
.darkbox02, .darkbox03{
 display:inline-block;
 width:100%;
}
}

@media (min-width: 1200px) {
.adbox img{
 padding:12px 8px 0 0;
}

.adbox img.last{
 padding:12px 0 0 1px;
}

.darkbox-cont {
 position: relative;
 background-color: #fff;
 width:70%;
 left:45%;
 margin-left: -35%;
 position: fixed;
 top:20%;
 z-index: 1000;
 border:5px solid #140845;
 box-shadow: 0 0 10px rgb(0,0,0);
}

}