/* 게시판  */
@charset "UTF-8";
#bbs{margin-bottom:30pt;}
#bbs .bbs_tab{}
	#bbs .bbs_tab ul{display:table;}
	#bbs .bbs_tab ul li{display:table-cell; width: 150px; max-width: 20%; border:1px solid #222; border-bottom:0; border-right:0;}
	#bbs .bbs_tab ul li:last-child{border-right:1px solid #222;}
	#bbs .bbs_tab ul li a{display:block; padding:15px; text-align:center; font-weight:400;}
	#bbs .bbs_tab ul li.active a{background:#222; color:#fff;}

/* 게시판 상단(타이틀 & 검색 */
	#bbs .list_top{
		margin-bottom:20px;
			display: -ms-flexbox;
			display: -webkit-flex;
		display: flex;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
		flex-direction: row;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
		flex-wrap: wrap;
			-webkit-justify-content: space-between;
			-ms-flex-pack: justify;
		justify-content: space-between;
			-webkit-align-content: flex-start;
			-ms-flex-line-pack: start;
		align-content: flex-start;
			-webkit-align-items: center;
			-ms-flex-align: center;
		align-items: center;
	}
	#bbs .list_top .bbs_name{font-size:200%; font-weight:500;}
	/* 게시판 검색 */
	#bbs .search_box{position:relative; text-align:right; right:0; font-size:small;}
	#bbs .search_box select{height:30pt; text-indent:5px; color:#666;}
	#bbs .search_box .search_input{display:inline-block; vertical-align:top; border:1px solid #ddd; height:30pt; padding:0; margin-left: 3px; border-radius: 5px;}
	#bbs .search_box .search_input input[type=search]{width: calc(100% - 30px); text-indent:5px; height:100%; background:rgba(255,255,255,0); border:0;}
	#bbs .search_box .search_input .btn_search{vertical-align:top; height:100%; font-size:0; width:30px; background:transparent;}
	#bbs .search_box .btn_search i{font-size:large; line-height:30pt; color:#999;}

#bbs .list, #bbs .view,
#bbs .write{width:100%; border-top:2px solid #222;}


#bbs > .list > ul > li .num{width: 80px;}
#bbs > .list > ul > li .date{width: 150px;}
#bbs > .list > ul > li .date_apply,
#bbs > .list > ul > li .date_pay{width: 150px;}
#bbs > .list > ul > li .date_apply2{width:200px;}
#bbs > .list > ul > li .subject{flex:1; text-align:left; padding-left:10px;}
#bbs > .list > ul > li .subject a{color:#222; font-weight:500; font-size:110%;}
#bbs > .list > ul > li.thead .subject{text-align:center;}
#bbs > .list > ul > li .name,
#bbs > .list > ul > li .name_user{width:120px;}
#bbs > .list > ul > li .reply{width:160px;}
#bbs > .list > ul > li .price{width:160px;}
#bbs > .list > ul > li .status{width:160px;}
#bbs > .list > ul > li .status span{font-weight:400; color:#fff; padding:5px 10px ; border-radius:5px;}
#bbs > .list > ul > li .status span.complete{background:#cc0000;}
#bbs > .list > ul > li .status span.waiting {background:#fff; color:#555; border:1px solid #ddd;}
#bbs > .list > ul > li .box_use{justify-content: flex-start;}

#bbs > .list > ul > li{
	width:100%; border-bottom:1px solid #ddd; min-height:50px; cursor:pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: stretch;
	text-align: center;
}
#bbs > .list > ul > li.thead{
	background:#f9fafb; font-size:100%; color:#222; font-weight:500; cursor: default; text-align:center;
}

#bbs ul.tbl{}
#bbs ul.tbl > li{text-align:left;}
#bbs ul.tbl > li > div{display: flex; justify-content: center; align-items: center;}
#bbs ul.tbl .thead{background:#f9fafb;	font-size:100%; color:#222; font-weight:500; cursor: default;}
#bbs ul.tbl .thead{background:#f9fafb;	font-size:100%; color:#222; font-weight:500; cursor: default;}
#bbs ul.tbl .subject{padding-left:0px !important;}
#bbs ul.order_tbl{}
#bbs ul.order_tbl li{cursor: default !important;}



/* 게시판 view */
#bbs > .view{}
#bbs > .view > dl{
	width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: stretch;
	}
#bbs > .view > dl > hr{width:100%; border-top:1px solid #ddd;}
#bbs > .view > dl > dt,
#bbs > .view > dl > dd{display: flex; align-items: center;	min-height:50px; padding:10px 10px; word-break:keep-all;}
#bbs > .view > dl > dt{background: #f9fafb; width:25%; max-width:200px; min-width:130px;}
#bbs > .view > dl > dd{flex:1;}
#bbs > .view .subject{border-bottom:1px solid #222;}
#bbs > .view .subject dt{display:none;}
#bbs > .view .subject dd{font-size: 140%; font-weight:500; min-height: auto; padding: 13px 10px 15px; line-height: 1.6;}
#bbs > .view .info{border-bottom:1px solid #ddd;}
#bbs > .view .info dt{display:none;}
#bbs > .view .info dd{}
#bbs > .view .info dd span{width:100%;}
#bbs > .view .info .name{}
#bbs > .view .info .date{text-align:left; font-weight:300; color:#999;}
#bbs.notice > .view .info .name,
#bbs.qna > .view .info .name,
#bbs.best > .view .info .name{display:none;}
#bbs > .view .view_con{padding:20pt 10px; line-height:1.6; border-bottom:1px solid #ddd;}
#bbs > .view .view_con .add_file{background: #f9fafb; font-size: 90%; padding: 10px;}
#bbs > .view .view_con .add_file a{display:inline-block;}
#bbs > .view .view_con .add_file i{font-size: 110%; vertical-align: -4px; margin: 0 3px;}
#bbs > .view .answer{background: #f9f9f9; padding: 20px; margin-top: 20pt; border-radius: 5px;}
#bbs > .view .answer .t_answer{display:Block; font-size:100%; font-weight:500; margin-bottom:10pt;}
#bbs > .view .answer .t_answer span{display:inline-block; background:#222; color:#fff; padding:3px 10px;border-radius: 5px; }



#bbs .empty{justify-content:center !important; padding:30pt 0; cursor: default !important; width:100%; text-align:Center; border-bottom:1px solid #ddd;}
#bbs .s_title{border-bottom: 1px solid #ddd; padding-bottom: 15pt; margin-top: 50pt; font-size: 160%; font-weight: 500;}
#bbs .s_title:first-child{margin-top: 30pt;}


/* 결제내역 */
	.box_use > ul{padding:10px 0;}
	.box_use > ul > li{display:block; margin:10px 0;}
	.box_use > ul > li span{display:inline-block;}
	.box_use .product_name{font-weight:600;}
	.box_use .product_name b{font-weight:600; color:#f15c22;}
	.box_use .progress{}
	.box_use .progress span{ font-weight:500; color:#fff; padding:3px 10px; border-radius:5px;}
	.box_use .progress span.ing{background:#a0cc00;}
	.box_use .progress span.end{background:#999;}
	.box_use .progress span.not{background:#fdb73c;}
	.box_use .date_use{}
	.box_use .price,
	.box_use .status{width: 160px;}
	.box_use .price b{font-weight:700;}
	.box_use .status span{font-weight:400; color:#fff; padding:3px 10px ; border-radius:5px;}
	.box_use .status span.complete{background:#cc0000;}
	.box_use .status span.waiting {background:#fff; color:#555; border:1px solid #ddd;}

	/* 이용자정보 */
	.pay_userinfo{}
		.pay_userinfo li{
			width: 100%;
			min-height: 50px;
			cursor: pointer;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: center;
			align-items: stretch;
			border-bottom: 1px solid rgb(221, 221, 221);
		}
		.pay_userinfo div{flex:1;}
		.pay_userinfo div:nth-child(1){min-width:60px;}
		.pay_userinfo div:nth-child(5),
		.pay_userinfo div:nth-child(6){min-width:100px;}
		.airfare{background:#f5f5f5; padding:10px; font-size:90%; margin-top:10px; line-height: 1.5;}
		.airfare .msg{color: #cc0000; margin-bottom: 5px;}
		.airfare strong{font-weight:500; letter-spacing:0.5px;}
	.order_cancel_msg{position: relative; margin-top: 10pt; font-size: 92%; color: #666; font-weight: 300; padding-left: 12pt;}
	.order_cancel_msg a{display:inline-block;}
	.order_cancel_msg a b{padding:0 3px; font-weight:400; color:#333;}
	.order_cancel_msg:before{position: absolute; top:1.5px; left:0; content:"\e888"; font-family: "Material Icons"; font-size: 110%; color: #999;}

/* 게시판 버튼 */
#bbs .btn_area{}
#bbs .btn_area:after{visibility:hidden; display:block; content:""; clear:both; height:0;}
#bbs .btn_area a{margin:0 3px;}
#bbs .btn_area a:first-child{margin-left:0;}
#bbs .btn_area a:last-child{margin-right:0;}

#bbs .btn_area .btn{
	height: 50px; line-height:50px; font-size: 110%; letter-spacing: 2px; border-radius: 5px; padding:0 20px;
	border:1px solid #333; color:#333; background:#fff; cursor: pointer; text-align: center;
}
#bbs .btn_area .btn:hover{background:rgba(51,51,51,0);}
#bbs .btn_area .btn.write{}
#bbs .btn_area .btn.fill{background:#333; color:#fff;}
#bbs .btn_area .line{width:100%; height:0px; border-top:1px solid #eee; margin:-20px 0 20px;}


/* 후기게시판 */
#bbs.review .list{}
	#bbs.review .list ul{
		display: flex;
		flex-wrap: wrap;
	}
	#bbs.review .list ul li{position: relative; width:100%; padding:20pt 0; border-bottom:1px solid #ddd; text-align:left;}
	#bbs.review .list ul li:last-child{margin-bottom:0; }
	#bbs.review .list ul li > a{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width:100%;
	}
	#bbs.review .list .thumb{
		position:relative; margin-right:30pt;

	}
	#bbs.review .list .thumb img{object-fit: cover; width:150px; height:150px;}
	#bbs.review .list .desc{flex:1; color: #222;}
	#bbs.review .list .desc .info{margin-bottom:10px;}
	#bbs.review .list .desc .info > span{display:inline-block; width:auto;}
	#bbs.review .list .desc .info .name{font-weight:600; font-size:110%; letter-spacing:0.5px;}
	#bbs.review .list .desc .info .date{color: #999; font-weight:300;}
	#bbs.review .list .desc .info .date:before{content:"|"; font-size: 90%; vertical-align: 1px; color: #ddd; margin: 0 7px 0 5px; font-weight:200;}
	#bbs.review .list .desc .info .modify{float:right;}
	#bbs.review .list .desc .info .modify button{
		background:#222; color:#fff; font-size:small; padding: 3px 6px; border-radius: 5px
	}
	#bbs.review .list .desc .summary{line-height:1.5;}
	#bbs.review .list .desc .summary br {content: ""; margin:0; display: block;}

#bbs.review > .view {}
	#bbs.review > .view > dl{border-bottom:1px solid #ddd;}
	#bbs.review > .view > dl > dt{display:none;}
	#bbs.review > .view > dl > dd{padding-left:0; padding-right:0;}
	#bbs.review > .view > .subject{display:none;}
	#bbs.review > .view > .info .name{font-size:110%; font-weight:600; letter-spacing:0.5px; padding-left:10px;}
	#bbs.review > .view > .info .date{text-align:right;}
	#bbs.review > .view .view_con .add_img{margin-top:10pt;}
	#bbs.review > .view .view_con .add_img img{display:block; padding:10pt 0; max-width:780px;}

/* 베스트 아이러너 */
#bbs.best{}
	#bbs.best .list ul{
		display: flex;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%; margin-top:-20px;
	}
	#bbs.best .list ul li{width: 30%; margin-top:50px; border-bottom:0;}
	#bbs.best .list ul li a{display:block; width:100%;}
	#bbs.best .list ul li .thumb{position: relative; width: 100%; overflow: hidden;}
	#bbs.best .list ul li .thumb:after {content: ""; display: block; padding-top: 100%;}
	#bbs.best .list ul li .thumb > div{ position:absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; text-align: center;}
	#bbs.best .list ul li .thumb > img{position:absolute; top: 0; left: 0; bottom: 0; right: 0; object-fit: cover; }
	#bbs.best .list ul li .info{margin:20px 0;}
	#bbs.best .list ul li .info .subject{padding-left: 0; font-size: 120%; font-weight: 500; color: #222;}
	#bbs.best .list ul li .info .date{width: 100%; text-align: left; padding-top: 10px; color: #999; font-weight: 300;}



/* 게시판 글쓰기 */
#bbs .write{}
#bbs .write > dl{
	width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: stretch;
	}
#bbs .write > dl > hr{width:100%; border-top:1px solid #ddd;}
#bbs .write > dl > dt,
#bbs .write > dl > dd{display: flex; align-items: center;	min-height:50px; padding:10px 20px; word-break:keep-all;}
#bbs .write > dl > dt{background: #f9fafb; width:25%; max-width:200px; min-width:130px;}
#bbs .write > dl > dd{flex:1;}
#bbs .write  .write_con{width:100%; border-bottom:1px solid #ddd;}
#bbs .write  .write_con textarea{border:0; overflow-y:scroll; height:300px; padding:20px;}
#bbs .write .add_file{flex-direction: column; align-items: flex-start;}
#bbs .write .add_file_input{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	width:100%; max-width:500px; margin-top:10pt;
}
#bbs .write .add_file_input:first-child{margin-top:0;}
#bbs .write .add_file_input .b_input{flex:1;}
#bbs .write .add_file_input .b_input input{font-size: small; color: #999;}
#bbs .write .add_file_input .b_upload{margin-left:10px;}
#bbs .write .add_file_input .b_upload a{
	display:block; width:100%; min-width: 95px; height:50px; line-height:50px;
	font-size:small; text-align:center;
	background:#fff; border:1px solid #666;
		-webkit-border-radius: 5px;
		-ms-border-radius: 5px;
	border-radius: 5px;
}
#bbs .write .add_file_input .b_del{width: 100%; margin-top:3px; }
#bbs .write .add_file_input .b_del a{display:inline-block; padding-right:10px; font-size: 90%;}
#bbs .write .add_file_input .b_del a i{font-size:100%; color: #999; margin-right: 3px; margin-top:1px;}

#bbs .write input[name='WRITER'],
#bbs .write input[name='WRITER_HP'],
#bbs .write input[name='WRITER_EMAIL']{max-width:300px;}

/* 페이징 */
.paging{margin-top:30pt;text-align:center; font-size:0;}
	.paging a{display:inline-block; font-size:13px; font-weight:300; width:30pt; height:30pt; line-height:30pt; border:1px solid #ddd; border-right:0; vertical-align:middle; color:#777;}
	.paging a:last-child{border-right:1px solid #ddd;}
	.paging a.aw{font-size:0;}
	.paging a.aw i{font-size:14px; line-height:32px;}
	.paging a.active{position:relative; color:#222; font-weight:500; border-bottom:1px solid #222;}
	.paging a.active:after{content:""; display:block; position:absolute; bottom:0; height:100%; border-bottom:1px solid #222; width:100%;}



@media only screen and (max-width: 880px) {
	#bbs{font-size:14px;}
	#bbs > .list > ul > li .num{display:none;}
	#bbs > .list > ul > li .date_apply,
	#bbs > .list > ul > li .date_pay{width:100px;}
	#bbs > .list > ul > li .date_apply2{width:160px;}
	#bbs > .list > ul > li .name,
	#bbs > .list > ul > li .name_user,
	#bbs > .list > ul > li .price,
	#bbs > .list > ul > li .status{width: 15%; min-width: 100px;}
	#bbs > .list > ul > li .status span{font-size:small;}

	#bbs.best .list ul li{width:31%;}

	#bbs.review .list ul li{ padding: 10pt 0;}
	#bbs.review .list .thumb{margin-right:20pt;}
	#bbs.review .list .thumb img{width:130px; height:130px;}
	#bbs.review .list .desc .info > span{min-width:auto;}

	#bbs.review > .view .view_con .add_img img{max-width:100%;}

	table th, table td{padding: 15px 10px;}
	.bbs{font-size:14px;}


}


@media only screen and (max-width: 600px) {
	#bbs > .list > ul > li{padding:10px 0;}
	#bbs > .list > ul > li > div{padding:5px 0;}
	#bbs > .list > ul > li.thead{display:none; }
	#bbs > .list > ul > li .date_pay{display:none;}
	#bbs > .list > ul > li .subject{justify-content: flex-start;}
	#bbs > .list > ul > li .subject{width: 100%; flex: auto;}
	#bbs > .list > ul > li .date{width: auto; padding-left: 10px;}
	#bbs > .list > ul.tbl > li .subject{flex:1;}
	#bbs > .list > ul.tbl > li > div{min-height:auto;}
	#bbs > .list > ul.tbl > li .date_apply2{width:100%; justify-content: flex-start; order: 1;}
	#bbs > .list > ul.tbl > li .date_apply2:before{content:"신청일"; color:#999; font-weight:300; margin-right:5px; font-size:small;}
	.order_tbl li .box_use{border:1px solid #000;}

	#bbs.best .list ul{margin-top:10px;}
	#bbs.best .list ul li{width:46%; margin-top: 0;}
	#bbs.best .list ul li .info .date{padding-left:0;}

	#bbs.review .list .thumb{margin-right:15pt;}
	#bbs.review .list .thumb img{width:120px; height:120px;}

	#bbs > .view > dl > dt, #bbs > .view > dl > dd{padding:10px 10px;}
	#bbs > .view > dl > dt{min-width:130px;}


	table th, table td{min-height:auto; padding:5px 10px;}

	#bbs .list_top .bbs_name{font-size:160%;}
	#bbs .search_box select,
	#bbs .search_box .search_input{height:24pt;}

	.pay_userinfo li{border-bottom:0;}
	.pay_userinfo > .thead{display:none !important;}
	.pay_userinfo > .tbody{padding:15px 10px;}
	.pay_userinfo div{
		min-width:50% !important; width:50% !important;
		min-height:50px; border-bottom:1px solid #ddd;
		justify-content: flex-start !important;
	}
	.pay_userinfo div:before{
		display: flex; align-items: center; width: 130px; max-width: 50%; height: 100%;
		background: #f9fafb; padding-left:10px; margin-right:10px;
	}

	.pay_userinfo div:nth-child(1):before{content:"이름";}
	.pay_userinfo div:nth-child(2):before{content:"성별";}
	.pay_userinfo div:nth-child(3):before{content:"학년";}
	.pay_userinfo div:nth-child(4):before{content:"신청개월";}
	.pay_userinfo div:nth-child(5):before{content:"발송시작일";}
	.pay_userinfo div:nth-child(6):before{content:"발송마감일";}


	/* 게시판 버튼 */
	#bbs .btn_area > div{
		float:none; width:100%;
		display:flex; justify-content: space-between;
	}
	#bbs .btn_area a{flex:1;}
	#bbs .btn_area .fl{margin-bottom:10px;}
	#bbs .write .add_file_input .b_upload a{height:40px; line-height:40px;}

}

@media only screen and (max-width: 480px) {
	#bbs .list_top{margin-bottom:10px;}
	#bbs .list_top > div{width:100%;}
	#bbs .list_top .bbs_name{display:none;}

	#bbs > .list > ul > li .name_user{ width: 50px; min-width: 50px;}
	#bbs.review .list ul li > a{align-items: flex-start;}
	#bbs.review .list .thumb{margin-right:10pt;}
	#bbs.review .list .thumb img{width:100px; height:100px;}

	#bbs .write > dl > dt{width:100%; max-width:100%; min-height:auto; background: transparent; margin-bottom: -10px; font-weight:600; padding-left:0; padding-right:0;}
	#bbs .write > dl > dd{padding-left:0; padding-right:1px;}
	#bbs .write > dl > dt.t_title{display:none;}

	.pay_userinfo div{min-width:100% !important; width:100% !important;}


}
@media only screen and (max-width: 400px) {
	#bbs > .list > ul > li .name{display:none;}
	#bbs > .view > dl > dt{min-width: 102px;}
	#bbs.best .list ul{margin-top:10px;}
	#bbs.best .list ul li{width:48%;}
	#bbs.review .list ul li > a{flex-direction: column;}
	#bbs.review .list .thumb{margin-right:0; margin-bottom:15pt;}
	#bbs.review .list .thumb img{width:100px; height:100px;}
	#bbs.review .list .desc{width:100%;}
	#bbs.review .list .desc .info .modify{float:nonr; position: absolute; top:20pt; right:0;}


	.order_tbl{}
	.order_tbl li{padding-top: 10px;}
	.order_tbl li > div{justify-content: flex-start !important; width:100% !important; padding-left:10px;}
	.order_tbl li .box_use {border-top:1px dashed #eee;}
	.order_tbl li .box_use > ul{padding:0;}
	.order_tbl li .box_use > ul > li{margin: 0px 0;}
	.order_tbl li div:before{font-weight:300; margin-right:5px; color:#888;}
	.order_tbl li .date_apply:before{content:"신청일 :";}
	.order_tbl li .name_user:before{content:"이용자명:";}


}