@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/*############################################################# 기본 #############################################################*/

#boardSkin { width:100%; font-size: 13px; color: #333333; font-family:'Nanum Gothic',monospace; - See more at:}
#boardSkin,
#boardSkin a { color:#333; font-weight:normal; text-decoration:none;}

#boardSkin input, #boardSkin textarea, #boardSkin button {outline:none; vertical-align:middle;}
/** #boardSkin input, #boardSkin input, #boardSkin textarea, #boardSkin button { -webkit-appearance:none; -moz-appearance:none; appearance:none; vertical-align:middle;} **/ 
/** #boardSkin input, #boardSkin input, #boardSkin textarea, #boardSkin button, #boardSkin select { -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;} **/ 
#boardSkin img { vertical-align:middle;}
#boardSkin select { background:#ffffff; border:1px solid #e0e0e0; padding:2px; vertical-align:middle; height:30px; font-size: 12px;}
#boardSkin .textForm { background:#ffffff; border:1px solid #e0e0e0; padding:3px; height:30px; font-size: 12px;}
#boardSkin textarea { background:#ffffff; border:1px solid #e0e0e0;  resize:none; font-size: 12px;}
#boardSkin .clr { clear:both;}
#boardSkin input[type='submit'] {width:50px; height:30px; color:#fff; background:#444444;}

/*############################################################# 검색 #############################################################*/

#boardSkin #searchBox { padding-bottom:20px; text-align:right; position:relative;}

/*############################################################# 카테고리 #############################################################*/

#boardSkin #categoryBox {border:0; border:1px solid #d3d3d3; text-align:left;}
#boardSkin #categoryBox ul {overflow:hidden; margin-right:-2px;}
#boardSkin #categoryBox ul li {float:left; width:25%;}
#boardSkin #categoryBox ul li a {display:block; margin-left:-1px; margin-bottom:-1px; border-left:1px solid #d3d3d3; border-bottom:1px solid #d3d3d3; text-align:center; font-size:12px; color:#000000; line-height:35px; text-decoration:none; font-weight:bold;}
#boardSkin #categoryBox ul li.select a {color:#fff; background:#000;}
#boardSkin #categoryBox ul li:nth-child(1),#boardSkin #categoryBox ul li:nth-child(2),#boardSkin #categoryBox ul li:nth-child(3) {width:33.33%;}

/*############################################################# 리스트 #############################################################*/

#boardList {overflow:hidden; margin-left:-10px; margin-top:20px;}
#boardList li {float:left; width:50%; padding-left:10px; margin-bottom:10px;}
#boardList .beforeAfter {position:relative; overflow:hidden; padding-bottom:52%;}
#boardList.loginBefore .beforeAfter:before {position:absolute; top:0; left:0; bottom:0; z-index:2; width:50%; text-decoration:none; text-align:center; background:rgba(0,0,0,0.7); content:'';}
#boardList.loginBefore .beforeAfter:after {position:absolute; top:50%; z-index:3; width:50%; margin-top:-8px; font-size:13px; color:#fff; text-align:center; content:'BEFORE';}
#boardList .beforeAfter img {position:absolute; top:0; left:50%; width:50%; height:100%;}
#boardList .beforeAfter img:first-child {left:0;}
#boardList .cont {height:55px; padding:8px 10px; font-size:12px; color:#201c22; background:#f6f6f6;}
#boardList .cont .title {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#boardList .cont .category {color:#bd59c1;}
#boardList .cont .info {overflow:hidden; padding-top:6px; font-size:11px; color:#201c22;}
#boardList .cont .date {float:left; padding-left:15px; background:url('../images/ico_calendar.png') no-repeat 0 center; background-size:12px auto;}
#boardList .cont .hit {float:right;}

/*############################################################# 버튼영역 #############################################################*/

#boardSkin .btnArea { text-align:center;}
#boardSkin .btnArea2 { text-align:right; padding-top:20px;}
#boardSkin .btnArea3 { text-align:center; padding-top:20px;}
#boardSkin .btnArea img {height:25px;}
#boardSkin .btnArea2 img {height:25px;}
#boardSkin .btnArea3 img {height:25px;}

.btn_t02 {display:inline-block; padding:0 12px; line-height:25px; border:1px solid #e4e4e4; background:#f9f9f9;}
/*############################################################# 페이징 #############################################################*/

#boardSkin .pageArea { text-align:center; padding:15px 0 10px;}
#boardSkin .pageArea .pagingList { text-align:center; display:inline-block; .display:inline; zoom:1;}
#boardSkin .pageArea .pagingList li { text-align:center; display: inline; float:left; padding:7px;}
#boardSkin .pageArea .paging { text-align:center; display:inline-block; .display:inline; zoom:1;}
#boardSkin .pageArea .paging li { text-align:center; display: inline; float:left;}
#boardSkin .pageArea .paging li, 
#boardSkin .pageArea .paging li a { font-size:13px; font-weight:bold;}
#boardSkin .pageArea .paging .over { color:#ed9072; font-weight:bold;}
#boardSkin .pageArea li img {height:30px;}


/*############################################################# 글보기 #############################################################*/

#boardSkin .subjectBox { font-size:14px; text-align:center; border-top:2px solid #555555; border-bottom:1px solid #d7d7d7; padding:15px 0; color:#333333; font-weight:bold; line-height:1.5;}

#boardSkin .infor { border-bottom:1px solid #dfdfdf; padding:8px 0;}
#boardSkin .infor ul { text-align:left;}
#boardSkin .infor ul li { width:50%; float:left; display:inline-block; .display:inline; zoom:1; text-align:left; color:#999999;}

#boardSkin .file { border-bottom:1px solid #dfdfdf; padding:8px 0;}
#boardSkin .file ul { text-align:left;}
#boardSkin .file li { color:#666; padding:5px 5px 5px 30px; background:url(../images/icon_file.gif) no-repeat 3px 12px;}
#boardSkin .file li a { color:#465daa; text-decoration:underline;}

#boardSkin .contents { padding:20px 0 40px 0; border-bottom:1px solid #dfdfdf; line-height:150%; }
#boardSkin .contents img {height:auto;}
#boardSkin .contents .imgWrap { margin-bottom:15px; text-align:center;}

#boardSkin .contents .counselQ { color:#000; font-weight:bold; padding-bottom:5px;}
#boardSkin .contents .counselA { color:#465daa; font-weight:bold; padding-bottom:5px;}
/*############################################################# 글쓰기 #############################################################*/

#boardSkin .agreeBox { width:100%; background:#f8f8f8; border:1px solid #dddddd; padding:20px;}
#boardSkin .agreeBox .agreeText { }
#boardSkin .agreeBox p { font-size:12px; text-align:center; padding-top:15px;}
#boardSkin .agreeBox table { width:100%; border-top:2px solid #000; background:#FFF;}
#boardSkin .agreeBox table th, 
#boardSkin .agreeBox table td { font-size:12px; border:1px solid #d4dadd; padding:10px; text-align:center;}
#boardSkin .agreeBox table th { color:#000; background:#ececec;}


#boardSkin #writeForm { border-top:2px solid #000000; margin-top:20px;}
#boardSkin #writeForm th,
#boardSkin #writeForm td { font-size:12px; border-bottom:1px solid #dfdfdf; padding:10px 0; text-align:left;}
#boardSkin #writeForm th { font-weight:normal; padding-left:15px;}
#boardSkin #writeForm td .tt { color:#999; letter-spacing:-1px; margin-left:10px;}
#boardSkin #writeForm span.red { color:#F00;}