.clear {clear:both;}

/* list */
#bbslist * {box-sizing: border-box;}
#bbslist ul {
	width: 1000px;
}
#bbslist li {
	width: 24.2%;
    position: relative;
    background: #ffffff;
    float: left;
    margin: 0px 1% 1% 0px;
}
#bbslist li:nth-child(4n) {
	margin-right: 0;
}
#bbslist .img {
	width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
#bbslist .img img {
	width: 100%;
    transition: all 0.2s ease-in-out;
}
#bbslist .img img:hover {
	transform: scale( 1.2 );
}
#bbslist .subject {
	font-size: 16px;
    padding: 5px;
}
/* @list */


.btn a {
	color: #fff;
}
.btn {
	--btncolor: #000000;
	--background-color: #d8d8d8;
	--border-color: darken(#d8d8d8, 7.5%);
	color: var(--btncolor);
	font-family: "GmarketSans";
	background-color: var(--background-color);
	padding: 0.6rem 0.9rem;
	border: solid 1px var(--border-color);
	outline: none;
	position: relative;
	border-radius: 0.5rem;
	user-select: none;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.4), 0 -0.3rem 0.6rem rgba(0, 0, 0, 0.2) inset;
	transition: box-shadow 64ms ease-out;
	font-weight: 900;
	padding: 14px 28px 10px;
	font-size: 18px;
}
.btn:after {
  content: "";
  background-color: #ffffff;
  width: 75%;
  height: 12.5%;
  position: absolute;
  top: 0.15rem;
  left: 12.5%;
  border-radius: 50%;
  filter: blur(0.15rem);
  transition: opacity 64ms ease-out;
}
.btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0.4rem 1rem rgba(0, 0, 0, 0.3) inset;
}
.btn:active:after {
  opacity: 0;
}

.btn-info {
  --btncolor: #ffffff;
  --background-color: #0091ea;
  --border-color: #0079c4;
}
.btn-info:active {
  --btncolor: #ececec;
}
.btn-success {
  --btncolor: #ffffff;
  --background-color: #00c853;
  --border-color: #00a243;
}
.btn-success:active {
  --btncolor: #ececec;
}
.btn-warning {
  --btncolor: #3e2723;
  --background-color: #ffc400;
  --border-color: #d9a700;
}
.btn-warning:active {
  --btncolor: #261815;
}
.btn-error {
  --btncolor: #ffffff;
  --background-color: #d50000;
  --border-color: #af0000;
}
.btn-error:active {
  --btncolor: #ececec;
}
.btn-dark {
  --btncolor: #ffffff;
  --background-color: #303030;
  --border-color: #1d1d1d;
}
.btn-dark:active {
  --btncolor: #ececec;
}

/* input */
.input {border:#dfdfdf solid 1px;padding:2px 0 0 2px;margin:1px;height:16px;}
.input:hover {border:#cdcdcd solid 1px;background:#f9f9f9;}
.input:focus {border:#FF9D1D solid 2px;margin:0;background:#f9f9f9;}
/* @input */