.h350 {height:350px}

.view-head {font-size:1.25em; padding: 24px 14px; border-bottom:1px solid #171c25; border-top:1px solid #171c25; background: #f9f9f9;}

.view-head .subject {font-size:20px; font-weight:bold; float: left;}
.view-head .author {float: right;}
.view-head .author span {font-size: 0.875rem; color: #797979; display: block; margin-top: 4px;}
/*.view-head .info { display:flex; }*/
.view-head .info .btn { margin-left:auto; }
.view-head .info .btn a {font-weight:bold;}
.view-head .info .btn .blank { color:#d3d3d3; padding:0 3px; }
.view-head:after {content: ""; display: block; clear: both;}

.view-content {width: 100%; padding: 62px 14px; font-size: 1rem; line-height: 1.2; border-bottom: 1px solid #ddd; word-break: break-all;}
.view-content img {max-width:100%;}
.view-content .cardHeader {font-size: 0.875rem; margin: 10px 30px 0 0;}

.view-file-list{display: flex; padding:35px 0 0; font-size: 0.875rem;}
.view-file-list li:not(:last-child) {margin-bottom: 8px;}
.view-file-list li {display: flex; padding: 10px 25px; background: #f9f9f9; border:1px solid #ddd; border-radius: 50px;}
.view-file-list li p { display: flex; align-items: center; font-size: 20px; padding-right:10px; }

#boardViewBtnWrap {margin: 20px 0 80px; float: right;}
#boardViewBtnWrap > span {float: left;}
.view-top-wrap:after {content: ""; display: block; clear: both;}
#boardViewBtnWrap span {margin-left: 6px;}

.list-tap {margin:20px 0 60px;}
.list-tap > div { padding:18px 14px; border-top:1px solid #ddd; font-size: 1em;}
.list-tap > div:last-child { border-bottom:1px solid #ddd;}
.list-tap > div span, .list-tap > div a {font-size: .95em;}
.list-tap > div span {display:inline-block; margin-right: 20px; font-weight: 600;}
.list-tap > div span, .list-tap > div a {color: #333;}
.list-tap > div span > img {display: inline-block; margin: 0px 5px 4px 0; vertical-align: middle;}

.btn-wrap a.buttons {display: block; width: 200px; padding: 14px 20px; margin:0 auto 120px; border-radius: 4px; background: #a3a3a3; border-color: #a3a3a3; color: #fff; font-size: 18px;}
.btn-wrap .btn-write-btn {margin-left: auto;}

.btn-edit-btn a {display:block; background: #797979; border: 1px solid #797979; color: #fff;}
.btn-edit-btn a:hover {background: #fff; border: 1px solid #797979; color: #797979;}
.btn-del-btn a {display:block; background: #f96a6a; border: 1px solid #f96a6a; color: #fff;}
.btn-del-btn a:hover {background: #fff; border: 1px solid #f96a6a; color: #f96a6a;}

.ad-viewList {width: 100%; border-collapse: collapse; border-top: 1px solid #ddd; margin-top: 25px;}
.ad-viewList tr {border-bottom: 1px solid #ddd;}
.ad-viewList th {padding:15px 18px; width: 20%; font-size: 0.875rem; text-align: left; background: #f9f9f9;}
.ad-viewList td {padding:15px 18px; width: 80%; font-size: 0.875rem; text-align: left;}

.view-content .note-video-clip { max-width:100%; }




.view-custom-contents {
	display: flex;
	align-items: flex-start;
}

.view-custom-contents #left {
	flex-shrink: 0;
	width: calc(410 / 1280 * 100%);
	position: relative;
	overflow: hidden;
	border: 1px solid #dddddd;
	border-radius: 10px;
	-webkit-border-radius: 10px;
}

.view-custom-contents #left::after {
	content: '';
	display: block;
	padding-top: 85%;
	background: #fff;
}

.view-custom-contents #left img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.view-custom-contents #right {
	padding-left: 50px;
	margin-top: 30px;
}

.view-custom-contents #right ul {
	width: 100%;
}

.view-custom-contents #right ul > li {
	display: flex;
	align-items: flex-start;
}

.view-custom-contents #right ul > li+li {
	margin-top: 20px;
}

.view-custom-contents #right ul > li > b {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #019fde;
	letter-spacing: -0.025em;
	background: #fff;
	border: 1px solid #019fde;
	border-radius: 50px;
	padding: 9px 18px;
}

.view-custom-contents #right ul > li > p {
	margin-left: 20px;
	margin-top: 8px;
	font-size: 18px;
	letter-spacing: -0.025em;
	color: #000;
	line-height: 1.5;
	word-break: keep-all;
}

.view-custom-contents #right ul > li > .con {
	padding: 0;
	min-height: 300px;
	word-break: keep-all;
}

@media all and (max-width: 820px) {
	.view-custom-contents {
		flex-direction: column;
		padding-bottom: 70px;
	}

	.view-custom-contents #left {
		width: 100%;
		max-width: 400px;
	}

	.view-custom-contents #right {
		width: 100%;
		padding-left: 0;
		margin-top: 20px;
	}

	.view-custom-contents #right ul > li > b {
		font-size: 16px;
	}

	.view-custom-contents #right ul > li > p {
		margin-top: 5px;
		font-size: 16px;
	}
}

@media all and (max-width: 480px) {
	.view-custom-contents #right ul > li {
		flex-direction: column;
	}

	.view-custom-contents #right ul > li > b {
		font-size: 14px;
	}

	.view-custom-contents #right ul > li > p {
		margin-left: 0;
		margin-top: 10px;
		font-size: 14px;
	}
}





@media all and (max-width:767px){
	.view-head .subject, .view-head .author{float: none;}
	.view-content .cardHeader {margin-right: 12px;}
	.list-tap > div {display: flex; flex-direction: column;}
	.btn-wrap a.buttons {width: 150px;}
	.file-add-wrap .add-icon label {width: 130px;}
	.ad-viewList th {width: 35%;}
	.ad-viewList td {width: 65%;}
}