.leccom004-lists { margin: -10px; text-align: left; letter-spacing: -5px; }
.leccom004-list { position: relative; box-sizing: border-box; }
.leccom004-card { display: inline-block; overflow: hidden; border-radius: 10px; margin: 10px 10px 30px 10px; padding: 0 0 60px 0; width: auto; min-height: 450px; background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, 0.15); letter-spacing: 0; text-align: left; vertical-align: top; }
.leccom004-card:hover { margin-top: 12px; margin-bottom: 28px; box-shadow: 0 0 2px 0 rgba( 0, 0, 0, 0.2); }

.leccom004-lecstates,
.leccom004-thumbs { margin-bottom: 15px; width: auto; height: auto; }
.leccom004-lecstates.leccom004-sample { line-height: 100%; font-size: 0.6em; text-decoration: none;  }
.leccom004-sample:before { content:"\f03d"; display: block; font-family: FontAwesome; font-size: 1em;  }
.leccom004-sample:hover { background-color: #333; color:#fff; cursor: pointer; }
.leccom004-thumb-link { display: block; text-decoration: none; color: #222222; font-size: 0.9em; }
.leccom004-thumb-img { border: 0;  width: 100%; height: 100%; }
.leccom004-thumb-noimg { display: flex; justify-content: center; align-items: center; color: #bbbbbb;  text-align: center; vertical-align: middle; background-color: #ebebeb; text-decoration: none; word-break: keep-all; word-wrap: break-word; }
.leccom004-thumb-noimg:hover { background-color: #dcdcdc; }
.leccom004-infos { box-sizing: border-box; padding: 25px 0 0 0; }
.leccom004-info { box-sizing:  content-box; padding: 0px 30px; }
.leccom004-lecdesc { margin-bottom: 10px; line-height: 100% }
.leccom004-icons { margin-bottom: 10px; min-height: 24px; font-size: 0; }
.leccom004-info-icon { padding-right:4px; }
.leccom004-lecnames { margin-bottom: 10px; min-height: 84px;}
.leccom004-lecname { color: #222222; font-size: 1em; font-weight: 500; text-decoration: none; line-height: 130%; word-break: keep-all; word-wrap: break-word; }

.leccom004-info-unit { display: inline-block; margin-bottom: 3px; padding: 0 5px; color : #ffffff; word-break: keep-all; word-wrap: break-word; font-size:0.7em; }
.leccom004-icon { vertical-align: middle; }

.leccom004-info-sbj { display: inline-block; margin-right: 0.5em; min-width: 3.4em; text-align: center;  border: 1px solid #ccc; font-size:0.6em; letter-spacing: -1px; }

.leccom004-price { vertical-align: middle; }
.leccom004-prc-val { vertical-align: middle; }
.leccom004-prc-normal { font-size: 0.9em; font-weight: bold; letter-spacing: -1px; }
.leccom004-prc-old { color: #939393; font-size: 0.75em; font-weight: 400; letter-spacing: -1px; text-decoration: line-through;  }
.leccom004-prc-arr:after { content: "\2192"; padding: 0 5px; color: #939393; text-decoration: none; }
.leccom004-book-val {font-size: 0.75em; }

.leccom004-btns { position: absolute; padding: 0; bottom: 0; width: 100%; }
.leccom004-btn { text-align: center; cursor: pointer; text-decoration: none; }
.leccom004-btn-link { display: block; width:100%; height: 42px; line-height: 42px; vertical-align: middle; color: #ffffff; font-size: 14px; }
.leccom004-btn-link:after { content: "\2023"; padding-left: 7px; }

/* 공통 영역 */
.leccom004-cols { box-sizing: border-box; display: table; width: 100%; border-collapse: collapse; }
.leccom004-col { display: table-cell; }

/* 수강 불가능 강좌 */
.leccom004-unava { filter: grayscale; -webkit-filter: grayscale(100%); }
.leccom004-unava:before { content:" "; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(255, 255, 255, 0.4); text-align: center; z-index: 11; }
.leccom004-lecstate,
.leccom004-sample { display: inline-block; border-radius: 23px; width: 46px; height: 46px; line-height: 46px; text-align: center; vertical-align: middle; background-color: #888888; font-size: 10px; color:#fff; }
.leccom004-ava .leccom004-lecstate:before { content: "신청가능"; }
.leccom004-unava .leccom004-lecstate:before { content: "신청불가"; }

/* 옵션 출력 or 히든 */
.leccom004-icon-off,
.leccom004-thumbs-off { display: none; }

* 목록 페이지 */
.leccom004-paging-container { width: 100%; margin: 10px 0; }
.leccom004-pagings { vertical-align: middle; text-align: center; margin-top: 10px; border-top: 1px dashed #ebebeb; padding: 20px 0; }
.leccom004-page { display: inline-block; font-size: 14px; }
.leccom004-page-icon:after { font-size: 1em; color: #b6b6b6; font-family:'FontAwesome'; }
.leccom004-page-backward:after { content:"\f0d9\f0d9"; }
.leccom004-page-prev:after { content:"\f0d9"; }
.leccom004-page-next:after { content:"\f0da"; }
.leccom004-page-forward:after { content:"\f0da\f0da"; }
.leccom004-page-icon { text-decoration: none; display: inline-block; text-align: center; color: #a5a5a5; padding: 0 3px; font-size: 0.85em; }
.leccom004-page-not { color: #dfdfdf; }
.leccom004-page-number { text-decoration: none; color: #a5a5a5; font-weight: normal; padding: 0 7px; }
.leccom004-page-current > a { font-weight: bold; text-decoration: underline; }