@charset "UTF-8";

table {border-collapse: collapse;border: 1px solid #b3b3b3;width:100%;font-size:14px;}
table th {border: 1px solid #b3b3b3;text-align: left;background-color: #fdfbf2;color: #000;padding :4px 6px;}
table td {border: 1px solid #b3b3b3;padding:4px 6px;}
.width50 {width:50%;}
.center {text-align:center;}
.block1 {background-color:#efece4;font-size:24px;}
.block2 {width:150px;height:100px;line-height:50px;background-color:#efece4;font-size:24px;text-align:center;border:2px dotted #ccc;}
 .demo1, .demo2 ul li a {all: revert;}
.demo {height: 180px;}
.demo1 {height: 160px;}
.demo2 {height: 280px;}
.demo, .demo1, .demo2 {padding: 16px;border: 2px dashed #6c757d;border-radius: 6px;background-color: #fafafa;}
.demo a {background-color: #ffd8c2;}
.block-mode a {display: block;}
.demo1 ul, .demo2 ul {margin:16px 0;padding:0 0 0 20px;}
.demo1 ul li a {background-color:#ffd8c2;}
.block-mode1 ul li a {display: block;background-color:#ffd8c2;}
.demo2 ul li a {background-color:#ffd8c2;}
.block-mode2 ul li a {display: block;padding:10px 0;background-color:#ffd8c2;}
.demo a:hover, .demo1 a:hover, .demo2 a:hover {background-color:#fff;}
button {padding: 6px 12px;margin-right: 8px;border: 1px solid #999;background: #f2f2f2;color: #333;cursor: pointer;border-radius: 4px;}
button:hover {background: #e6e6e6;}
button.active {background: #444;color: #fff;border-color: #222;}
@media screen and (max-width:767px) {
button {padding: 3px 6px;margin-right: 2px;font-size: 14px;}
.demo, .demo1, .demo2 {font-size:14px;padding: 10px;}
}