/*---- Content ----*/
#main {width:100%; overflow:hidden; margin:100px 0; transform: skew(-0.03deg);}
#board, #comment {width:100%; max-width:1200px; border-top:1px solid #ccc; margin:auto;}
#board {margin-bottom:25px; background:white;}

/*-- 제목 부분 --*/
#board .title {width:100%; overflow:hidden; margin:auto;}
#board .title ul {width:calc(100% - 40px); padding:0 20px; margin:0;}
#board .title ul li {float:left; font-size::13px;}

#board .title ul:first-of-type {height:60px; line-height:60px; overflow: hidden;}
#board .title ul:first-of-type li:first-of-type {width:65px; font-weight: bold; z-index:10;}
#board .title ul:first-of-type li:first-of-type a {color:#f64949;}
#board .title ul:first-of-type li:first-of-type a:hover {color:#f56868;}
#board .title ul:first-of-type li:last-of-type {width:calc(100% - 130px); font-size:16px; text-align:center; font-weight:bold; display:block; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

#board .title ul:last-of-type {height:50px; line-height:50px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#f5f6f8;}
#board .title ul:last-of-type li:first-of-type {cursor: pointer; overflow:hidden;}
#board .title ul:last-of-type li:first-of-type button {box-sizing:border-box; margin-left:10px; cursor: pointer; font-size:10px; border:1px solid #ccc; border-radius:3px; background:white; padding:0px 13px; vertical-align: middle; line-height:10px; font-family: "nanumB"; height:24px;}
#board .title ul:last-of-type li:nth-of-type(n+2) {float:right; margin:0 5px; text-align:center;}

#board .title ul li span {font-size:12px;}

/*-- 내용 부분 --*/
#board .content {overflow:hidden; width:calc(100% - 40px); padding:20px; min-height:600px; border-bottom:1px solid #ccc;}

/* 하단 버튼 부분 --*/
#board .bottomBtn {width:100%; overflow: hidden; margin-top:10px; }
#board .bottomBtn button {float:right; padding:7.5px 17.5px; font-size:13px; border-radius: 5px; border:1px solid #ccc; font-family:"nanumL"; font-weight:bold;}
#board .bottomBtn button:nth-of-type(1) {background: #f64949; color:#eee; border:1px solid #f64949; margin-right:10px;}
#board .bottomBtn button:nth-of-type(2) {margin:0 5px;}

/*-- 댓글 부분 --*/
#comment {background:#f5f6f8; border-bottom:1px solid #ccc;}
#comment .inner_comment {width:calc(100% - 40px); padding:20px; margin:auto;}
#comment .inner_comment p {font-weight:bold; font-size:18px; margin:20px 0;}
#comment .inner_comment>div {padding:30px 0; border-bottom:1px dashed silver;}
#comment .inner_comment>div:last-of-type {border-bottom:0px;}
#comment .inner_comment dl dt {font-family:"nanumB"; font-size:15px; letter-spacing: 1px;}
#comment .inner_comment dl dd:nth-of-type(2) {font-size:15px; margin:15px 0;}
#comment .inner_comment dl dd:nth-of-type(3) {font-family:"nanumL";}

#comment .inner_comment dl dt button {float:right; border:none; background: none;}
#comment .inner_comment dl dt>div {float:right; width:90px;}
#comment .inner_comment div.commentBox {display:none; position: absolute; width:80px; height:81px; margin-top:17px; border-radius:5px; background:white; border:1px solid #ccc; box-shadow:0 0 15px rgba(0,0,0,0.1);} 
#comment .inner_comment div.commentBox>div {font-size:14px; font-weight:normal; width:100%; text-align: center; line-height: 40px; height:40px; cursor: pointer;}
#comment .inner_comment div.commentBox>div:first-of-type {border-bottom:1px solid #eee; border-radius:5px 5px 0 0;}
#comment .inner_comment div.commentBox>div:last-of-type {border-radius:0 0 5px 5px;}

#comment .inner_comment form.modifiyForm {display:none;}

#comment .inner_comment ul {width:100%; overflow: hidden;}
#comment .inner_comment ul li:first-of-type {width:calc(100% - 22px); margin:10px 0;  height:75px; padding:10px; background:white; border:1px solid #ccc; border-radius:3px;}
#comment .inner_comment ul li:first-of-type textarea {border:none; resize: none; height:75px; width:calc(100% - 95px); font-family:"nanumR";}
#comment .inner_comment ul li:first-of-type input {float:right; border-radius:3px; height:75px; width:85px; border:none; background:#f64949; color:#eee; font-weight:bold; cursor:pointer;}
#comment .inner_comment ul li:nth-of-type(n+2) {float:left;}
#comment .inner_comment ul li:nth-of-type(2n) {font-weight:bold; line-height:32px}
#comment .inner_comment ul li:nth-of-type(3) input,
#comment .inner_comment ul li:nth-of-type(5) input {margin:0 30px 0 10px; height:30px; border:1px solid #ccc; border-radius:3px; padding:0 10px; width:150px;}
#comment .inner_comment ul li:last-of-type input.modifiy_cancel {box-sizing: content-box; cursor:pointer; height:30px; border-radius:5px; padding:0 10px; border:1px solid #ccc; background:white;}

#comment .inner_comment input::placeholder {font-size:12px;}

/*---- 반응형 ----*/
@media (max-width:1200px) {
	#board .title ul:last-of-type li:first-of-type {width:100%; height:50px; overflow:hidden; display:block; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
}


@media (max-width:700px) {
	#board .title ul:first-of-type li:last-of-type {width:calc(100% - 65px); font-size:16px;}

	#board .title ul:first-of-type li:first-of-type a {font-size:12px;}

	#board .title ul:last-of-type li {font-size:12px;}
	#board .title ul:last-of-type li:first-of-type {width:100%; height:50px; overflow:hidden; display:block; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
	#board .title ul:last-of-type li:nth-of-type(n+2) {margin-top:-10px;}

	#board .title ul:first-of-type {height:50px; line-height:50px;}
	#board .title ul:last-of-type {height:40px; line-height:40px;}


	#comment .inner_comment p {font-size:16px; margin:20px 0 0;}
	#comment .inner_comment dl dt {font-size:12px;}
	#comment .inner_comment dl dd {font-size:12px;}
	#comment .inner_comment ul li {font-size:12px; line-height:27px; text-align:center;}

	#comment .inner_comment textarea,
	#comment .inner_comment button,
	#comment .inner_comment input {font-size:12px;}

	#comment .inner_comment ul li:first-of-type {height:50px;}
	#comment .inner_comment ul li:first-of-type textarea {height:50px; width:calc(100% - 70px);}
	#comment .inner_comment ul li:first-of-type input {height:50px; width:60px;}

	#comment .inner_comment form.writeForm ul li:nth-of-type(3),
	#comment .inner_comment form.writeForm ul li:nth-of-type(5) {width:35%;}

	#comment .inner_comment form.writeForm ul li:nth-of-type(2) {width:10%;}
	#comment .inner_comment form.writeForm ul li:nth-of-type(4) {width:20%;}

	#comment .inner_comment form.writeForm ul li:nth-of-type(3) input,
	#comment .inner_comment form.writeForm ul li:nth-of-type(5) input {margin:0px; height:25px; width:calc(100% - 22px);}


	#comment .inner_comment form.modifiyForm ul li:nth-of-type(2) {width:28px;}
	#comment .inner_comment form.modifiyForm ul li:nth-of-type(4) {width:50px;}

	#comment .inner_comment form.modifiyForm ul li:nth-of-type(3) {width:calc(50% - 63px);}
	#comment .inner_comment form.modifiyForm ul li:nth-of-type(5) {width:calc(50% - 63px);}

	#comment .inner_comment form.modifiyForm ul li:nth-of-type(6) {width:48px;}

	#comment .inner_comment form.modifiyForm ul li:nth-of-type(6) input {position:relative; top:-2px; width:calc(100% - 6px); height:25px; padding:0px; line-height:25px; margin-left:4px;}

	#comment .inner_comment form.modifiyForm ul li:nth-of-type(3) input,
	#comment .inner_comment form.modifiyForm ul li:nth-of-type(5) input {margin:0px; height:25px; width:calc(100% - 22px);}
}

@media (max-width:600px) {
	#main {margin:50px 0;}

	#board .content {min-height:400px;}
	#comment .inner_comment dl dt button {float:right; border:none; background: none;}
	#comment .inner_comment dl dt>div {float:right; width:80px;}
	#comment .inner_comment div.commentBox {width:70px; height:71px;} 
	#comment .inner_comment div.commentBox>div {font-size:12px; line-height: 35px; height:35px;}
}