@charset "utf-8";

/* board */
.board_top {position:relative; padding:0 0 40px;}
.board_top .total_txt {padding-top:10px;}
.board_top .total_txt strong {color:#ff6780;}
.board_top select {position:absolute; right:0; top:0;}

.board_cont p.info {text-align:right; font-size:14px; padding-bottom:10px;}

.board_bottom {position:relative;}

/* table common */
.tbl_wrap table {width:100%; table-layout:fixed; border-collapse:collapse; border-spacing:0; border:0;}
.tbl_wrap table thead {border-top:2px solid #333;}
.tbl_wrap table thead th {padding:10px 5px; background:#f9f9f9; text-align:center; font-weight:400;}
.tbl_wrap table tbody {border-bottom:1px solid #333;}
.tbl_wrap table tbody th,
.tbl_wrap table tbody td {padding:10px 5px; border-top:1px solid #ccc; text-align:center; word-break:break-all;}
.tbl_wrap img {vertical-align:middle;}

/* list */
.tbl_list {position:relative;}
.tbl_list table thead th.check {width:50px;}/*체크박스*/
.tbl_list table thead th.num {width:70px;}/*번호*/
.tbl_list table thead th.lock {width:20px;}/*비밀글*/
.tbl_list table thead th.subject {width:auto;}/*제목*/
.tbl_list table thead th.file {width:80px;}/*첨부파일*/
.tbl_list table thead th.name {width:100px;}/*작성자*/
.tbl_list table thead th.date {width:100px;}/*작성일*/
.tbl_list table thead th.hits {width:80px;}/*조회*/
.tbl_list table tbody td.subject {text-align:left; overflow:hidden;}
.tbl_list table tbody td.subject a {display:inline-block; max-width:calc(100% - 60px); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;}
.tbl_list table tbody td .ico {display:inline-block; width:15px; height:15px; vertical-align:middle;}
.tbl_list table tbody td .ico_lock {background:url('../images/board/ico_lock.png') no-repeat 50%; background-size:contain;}
.tbl_list table tbody td .ico_file {background:url('../images/board/ico_file.png') no-repeat 50%; background-size:contain;}
.tbl_list table tbody td .ico_notice {display:inline-block; width:44px; background:#ff6780; border-radius:5px; font-size:12px; text-align:center; vertical-align:middle; color:#fff;}
.tbl_list table tbody td .ico_reply {position:relative; display:inline-block; width:30px; margin:0 5px 0 25px; background:#ff6780; border-radius:5px; font-size:12px; text-align:center; vertical-align:middle; color:#fff;}
.tbl_list table tbody td .ico_reply:before {content:''; display:inline-block; position:absolute; left:-25px; top:0; width:21px; height:18px; background:url('../images/board/ico_reply_arr.png') no-repeat 50%; background-size:auto 12px;}

/* gallery list */
.gallery_list {position:relative; overflow:hidden;}
.gallery_list ul {width:102%; overflow:hidden;}
.gallery_list ul li {position:relative; float:left; display:inline-block; width:25%; padding-top:40px; padding-right:2%; box-sizing:border-box; letter-spacing:0;}
.gallery_list ul li:nth-child(-n+4) {padding-top:0;}
.gallery_list ul li:nth-child(4n+1) {clear:left;}
.gallery_list ul li a {display:block; position:relative; overflow:hidden;}
.gallery_list ul li a:hover {text-decoration:none;}
.gallery_list ul li a .thumb {position:relative; width:100%; height:0; padding-top:120%; overflow:hidden; background:url('../images/board/no_img.jpg') no-repeat 50%; background-size:cover;}
.gallery_list ul li a .thumb img {position:absolute; top:0; left:0; width:100%;}
.gallery_list ul li p.subject {padding-top:10px; font-weight:500;}
.gallery_list ul li p.name {padding-top:5px; font-size:14px;}
.gallery_list ul li p.price {padding-top:5px; font-size:14px; font-weight:700;}
.gallery_list ul li p.discount {padding-top:0; color:#ff6780;}
.gallery_list ul li .line-thr {text-decoration:line-through; text-decoration-color:#f00;}

/* view */
.tbl_view table tbody td .board_cont_area {padding:25px 20px; text-align:left;}

/* write */
.tbl_write {padding:20px 0; border-top:2px solid #333; border-bottom:1px solid #333;}
.tbl_write table tbody {border-bottom:0;}
.tbl_write table tbody th {width:100px; border:0;}
.tbl_write table tbody td {width:calc(100% - 100px); border:0; text-align:left;}
.tbl_write table tbody tr:first-child {}
.tbl_write table tbody td input {margin:0;}
.tbl_write table tbody td textarea {height:250px;}
.tbl_write table tbody td input[type="file"] {height:auto; padding:0; border:0;}

/* 강의목록 */
.tbl_class_list table thead th.num {width:70px;}/*번호*/
.tbl_class_list table thead th.subject {width:auto;}/*제목*/
.tbl_class_list table thead th.file {width:100px;}/*첨부파일*/
.tbl_class_list table thead th.runtime {width:100px;}/*런닝타임*/
.tbl_class_list table thead th.play {width:80px;}/*보기*/
.tbl_class_list table tbody td.file img {height:15px;}
.tbl_class_list table tbody td.play img {height:22px;}
.tbl_class_list table tbody td.subject {text-align:left;}

/* 나의강의실 목록*/
.tbl_myclass_list table thead th.period {width:220px;}/*수강기간*/
.tbl_myclass_list table thead th.status {width:100px;}/*수강상태*/
.tbl_myclass_list table thead th.learn {width:140px;}/*학습하기*/
.tbl_myclass_list table tbody .class_info {display:table; position:relative; height:96px;}
.tbl_myclass_list table tbody .class_info .thumb {position:absolute; left:0; top:0; width:80px; height:0; padding-top:96px; overflow:hidden; background:url('../images/board/no_img.jpg') no-repeat 50%; background-size:cover;}
.tbl_myclass_list table tbody .class_info .thumb img {position:absolute; top:0; left:0; width:100%;}
.tbl_myclass_list table tbody .class_info .title {display:table-cell; padding-left:90px; vertical-align:middle;}
.tbl_myclass_list table tbody .tit {display:none;}
.tbl_myclass_list table tbody .btn {width:100px; height:30px; line-height:30px; background:#999; border-radius:5px; color:#fff; font-size:14px;}
.tbl_myclass_list table tbody .btn_learn {background:#ff6780;}
.tbl_myclass_list table tbody .learning {color:#ff6780;}
.tbl_myclass_list table tbody .complet {color:#666;}

/* 회원정보 목록 */
.tbl_myinfo table tbody {border-top:2px solid #333;}
.tbl_myinfo table tbody th {width:120px; padding:15px; border-right:1px solid #ccc;}
.tbl_myinfo table tbody td {width:calc(100% - 120px); padding:15px; text-align:left;}

/* admin btn */
.admin_btn {padding-top:40px; overflow:hidden;}
.admin_btn .btn {width:100px; height:40px; line-height:40px; border:1px solid #333; box-sizing:border-box; vertical-align:top;}
.admin_btn .btn_write,
.admin_btn .btn_confirm {background:#ff6780; border-color:#ff6780; color:#fff;}

/* paging */
.paging {width:100%; padding:40px 0 0; vertical-align:top; text-align:center;}
.paging a {display:inline-block; margin:0 3px 5px 0; line-height:25px; font-size:14px; box-sizing:border-box; vertical-align:middle; background-size:auto 16px !important;}
.paging > a {width:25px; height:25px; padding:0 5px; text-indent:-9999em;}
.paging a:hover {text-decoration:underline;}
.paging a._first {background:url('../images/board/btn_first.png') no-repeat 50%;}
.paging a._prev {background:url('../images/board/btn_prev.png') no-repeat 50%;}
.paging a._next {background:url('../images/board/btn_next.png') no-repeat 50%;}
.paging a._last {background:url('../images/board/btn_last.png') no-repeat 50%;}
.paging ul {display:inline-block; vertical-align:middle; overflow:hidden; width:auto !important;}
.paging ul li {float:left; width:auto !important; margin:0 !important; padding:0 !important;}
.paging ul li a {width:25px; height:25px;}
.paging strong {display:inline-block; width:25px; height:25px; line-height:25px; margin:0 5px 5px 0; border-radius:3px; background:#333; color:#fff; font-weight:400;}
.paging img {vertical-align:middle;}

/* search */
.search {padding:40px 0 0; text-align:center;}
.search span {margin-right:10px; font-size:14px;}
.search select,
.search .search_input,
.search .btn_search {height:35px; line-height:35px; font-size:14px;}
.search .search_input {width:200px;}
.search .btn_search {width:80px; background:#333; border-color:#333; color:#fff;} 

@media screen and ( max-width:1024px ){
	
	.tbl_list table thead th {display:none;}
	.tbl_list table tbody tr:first-child {border-top:2px solid #333;}
	.tbl_list table tbody tr {position:relative; display:block; padding:15px 10px; border-top:1px solid #ccc; overflow:hidden;}
	.tbl_list table tbody td {float:left; display:block; margin-right:20px; padding:0px; border:0; text-align:left; font-size:14px;}
	.tbl_list table tbody td.num {color:#999;}
	.tbl_list table tbody td.subject {float:none; clear:left; margin-right:0; padding:10px 0; font-size:16px;}

	.gallery_list ul {width:102%;}
	.gallery_list ul li {width:33.3%; padding-right:2%; padding-top:30px;}
	.gallery_list ul li:nth-child(-n+4) {padding-top:30px;}
	.gallery_list ul li:nth-child(-n+3) {padding-top:0;}
	.gallery_list ul li:nth-child(4n+1) {clear:none;}
	.gallery_list ul li:nth-child(3n+1) {clear:left;}

	.tbl_view table tbody tr:nth-child(n+2) td {float:none; display:table-cell; margin-right:0;}

	.tbl_myclass_list table tbody .learn {float:none; position:absolute; right:10px; bottom:15px; margin:0;}
	.tbl_myclass_list table tbody .tit {display:inline-block; padding-right:5px;}

}

@media screen and ( max-width:768px ){
	
	.board_top {padding:0 0 30px;}
	.board_top .total_txt {font-size:14px;}

	.tbl_wrap table thead th,
	.tbl_wrap table tbody th,
	.tbl_wrap table tbody td {font-size:14px;}

	.gallery_list ul {width:103%;}
	.gallery_list ul li {width:50%; padding-right:3%;}
	.gallery_list ul li:nth-child(-n+3) {padding-top:30px;}
	.gallery_list ul li:nth-child(-n+2) {padding-top:0;}
	.gallery_list ul li:nth-child(3n+1) {clear:none;}
	.gallery_list ul li:nth-child(odd) {clear:left;}

	.tbl_view table tbody td .board_cont_area {padding:10px;}
	.tbl_view table tbody td .board_cont_area img {padding:10px 0;}

	.tbl_write table tbody th {width:80px;}
	.tbl_write table tbody td {width:calc(100% - 80px);}

	.tbl_myinfo table tbody th {width:100px; padding:10px 5px;}
	.tbl_myinfo table tbody td {width:calc(100% - 100px); padding:10px 5px;}

	.admin_btn {text-align:center;}
	.admin_btn > div {display:inline-block;}
	.admin_btn .floatL {float:none !important; margin-bottom:10px;}
	.admin_btn .floatR {float:none !important;}
	.admin_btn .btn {width:80px; height:35px; line-height:33px; font-size:14px;}

	.search span {display:none;}
	.search select {width:25%;}
	.search .search_input {width:55%;}
	.search .btn_search {width:17%;}

}
@media screen and (max-width:640px) {

	.tbl_myclass_list table tbody .learn {clear:left; position:relative; right:auto; bottom:auto; width:100%; padding-top:10px;}

}
@media screen and (max-width:480px) {

	.board_top {padding: 0 0 30px;}
	.board_top select {position:relative; right:auto; top:auto; margin-top:20px;}

}