@charset "UTF-8";
/*CSS Document*/
@import url(/css/reset.css);
@import url(/css/fonts.css);
@import url(/css/ui.css);

/* 리스트 */
.sl-bbs-cat *{display: inline-block; font-size: 1.5rem; line-height: 2rem;  vertical-align: middle;}
.sl-bbs-cat b{color: #222; font-weight: 500;}
.sl-bbs-cat font{margin: 0 .7rem;}
.sl-bbs-list{width: 100%; margin-top: 1rem; border-top: 1px  solid #555; color: #222; letter-spacing: -0.065em;}
.sl-bbs-list thead th, 
.sl-bbs-list thead td{background: #fff; font-size: 1.6rem; font-weight: 500; }
.sl-bbs-list tbody th,
.sl-bbs-list tbody td{font-size: 1.5rem;}
.sl-bbs-list th,
.sl-bbs-list td{padding: 1.2rem 0; border-bottom: 1px solid #ddd; vertical-align: middle; line-height: 2.4rem;}
.sl-bbs-list .item-tit{padding-left: 1rem;}
.sl-bbs-list .m-tit{display: none}

/* 인풋  */
.sl-input-notice{color:#666; font-size:1.4rem; line-height: 1.2; text-align:right;}
.sl-input-notice span{vertical-align:top;}
.sl-input-tb{width: 100%; margin-top: 1rem; background: #fff; border-top:1px solid #555;}
.sl-input-tb th,
.sl-input-tb td{padding: 1.2rem 1.5rem; border-bottom: 1px solid #e9e9e9; color: #222; font-size: 1.5rem; letter-spacing: -0.065em; vertical-align: middle;}
.sl-input-tb th{padding-left: 0; padding-right: 0; background: #f7f7f7; font-weight: 500; text-align: center;}
.sl-input-tb img{vertical-align: middle;}
.sl-input-tb .star-row li{display: inline-block;}
.sl-input-tb .star-row input{margin: 0; vertical-align: middle;}
.sl-input-tb .star-row img{margin-left:.3rem; margin-right: .7rem;}
.sl-input-tb .contents-row td{padding: 2rem 1.5rem;}
.sl-input-tb .contents-row .chklist{padding-bottom: .8rem; font-size: 1.4rem; text-align: left;}
.sl-input-tb .chklist input, 
.sl-input-tb .chklist label{margin: 0; vertical-align: middle;}
.sl-input-tb .chklist label{margin-right: 1rem;}
.sl-input-tb .contents-row textarea{width:100%; height: 25rem; padding: 1rem; overflow-y: auto;}
.sl-input-tb input[type="text"],
.sl-input-tb input[type="password"],
.sl-input-tb select{height: 3rem; vertical-align: middle;}
.sl-input-tb input[type="text"],
.sl-input-tb input[type="password"]{width: 18rem;}
.sl-input-tb td .input--subject,
.sl-input-tb td input[type="file"]{width: 65%;}
.sl-input-tb .guide{padding-left: 1rem; font-size: 1.3rem; letter-spacing: -0.065em;}

/* 뷰 */
.sl-view-tb{width: 100%; background: #ebebeb; border-top:1px solid #111;}
.sl-view-tb th, .sl-view-tb td{padding: 1.2rem 1rem; border-bottom: 1px solid #ddd; color: #222; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.045em; vertical-align:middle;}
.sl-view-tb .tit-row th{background:#f9f9f9;font-weight:500; text-align:left;}
.sl-view-tb .info-row td,
.sl-view-tb .file-row td{font-size:1.4rem; letter-spacing: 0; }
.sl-view-tb .info-row span,
.sl-view-tb .file-row span{padding-right: .3rem; font-weight: 500; letter-spacing: -0.065em;}
.sl-view-tb .info-row li{display: inline-block; margin-right: .8rem; vertical-align: middle;}
.sl-view-tb .file-row a{margin-right:1rem;}
.sl-view-tb .contents-row > td{padding:2rem 1rem; line-height: 1.4;}

.sl-view-tb.summary-ver{margin-bottom: 1rem; border-top:0;}
.sl-view-tb.summary-ver th{padding-left:0; padding-right:0; background:#f9f9f9; text-align:center;}
.sl-view-tb.summary-ver td a{display:inline-block; max-width:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;}

/* view > contenst reset  */
.sl-view-tb table{border: 0 none;}
.sl-view-tb table th, .sl-view-tb table td{height: auto; padding: 0;  background: none; border: none;}
.sl-view-tb #wiz_get_table_width {width: 100% !important }
.sl-view-tb img {margin-bottom: 1rem; max-width: 100% !important } 

/* com_body.php */
.sl-comment-item{padding-bottom: 1.2rem; background: #fff;}
.sl-comment-item{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.sl-comment-item + .sl-comment-item{border-top: none;}
.sl-comment-item .user-row{padding: .6rem 1rem; background: #f7f7f7; color: #333; font-size: 1.3rem; box-sizing: border-box;}
.sl-comment-item .user-row .user{float: left; max-width: 52%; font-weight: 500; line-height: 2rem;}
.sl-comment-item .user-row .date{float: right; color: #666; line-height: 2rem;}
.sl-comment-item .user-row::after{content: ''; display: block; clear: both;}
.sl-comment-item .cont-row{padding: 1.2rem 1rem 0; box-sizing: border-box;}
.sl-comment-item .cont-row,
.sl-comment-item .cont-row *{color: #555; font-size: 1.3rem; line-height: 1.3;}
.sl-comment-item .del{display: block; padding-right: 1rem; text-align: right; box-sizing:border-box;}
.sl-comment-item .del a{display: inline-block; margin-top: .5rem;}

/* com_foot.php */
.sl-comment-input{margin-bottom: 1.5rem; background: #fff; border: 1px solid #ccc; box-sizing: border-box;}
.sl-comment-input .writer-row{padding: .5rem 1rem ; background: #f9f9f9; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.sl-comment-input .writer-row input[type="text"],
.sl-comment-input .writer-row input[type="password"]{height: 3rem; margin-right: .4rem; font-size: 1.4rem;}
.sl-comment-input textarea{width: 100%; height: 8rem; padding: 1.2rem 1rem; border: none; box-sizing: border-box; overflow-y: auto}
.sl-comment-input .confirm-row{border-top: 1px solid #ddd;}
.sl-comment-input .captcha-column{float: left; width: calc(100% - 6rem); padding-left: .6rem; padding-right: 1rem; line-height: 3rem; box-sizing: border-box;}
.sl-comment-input .captcha-column input,
.sl-comment-input .captcha-column img{display: inline-block; vertical-align: middle;}
.sl-comment-input .captcha-column input{height: 2.5rem;}
.sl-comment-input .captcha-column font,
.sl-comment-input .captcha-column span{display: none;}
.sl-comment-input .btn--submit{float: right; width: 6rem; height: 3.4rem; background: #555; color: #fff; font-size: 1.4rem; letter-spacing: -0.065em}
.sl-comment-input .confirm-row::after{content: ''; display: block; clear: both;}

/* passwd  */
.sl-user-confirm{width: 100%; max-width: 50rem; margin: 3rem auto 0; padding: 3rem 0; background: #fff; border: 1px solid #ccc; color: #333; font-size: 1.4rem; letter-spacing: -0.065em; text-align: center;}
.sl-user-confirm .input-row input{height: 3rem; margin-top: 1rem; max-width: 80%;}
.sl-user-confirm .btn-row {margin-top: 2rem; font-size: 0;}
.sl-user-confirm .btn-row a,
.sl-user-confirm .btn-row input,
.sl-user-confirm .btn-row img,
.sl-user-confirm .btn-row button{display: inline-block; margin: 0 .3rem; vertical-align: middle;}

@media screen and (max-width: 1024px){
  /* 리스트 */
  .sl-bbs-list thead th, 
  .sl-bbs-list thead td{font-size: 1.5rem;}
  .sl-bbs-list th,
  .sl-bbs-list td{line-height: 2.2rem;}
}

@media screen and (max-width: 767px){
  /* 카테고리, 리스트 */
  .sl-bbs-cat *{font-size: 1.4rem;}
  .sl-bbs-list{display: block;}
  .sl-bbs-list thead{display: none;}
  .sl-bbs-list tbody,
  .sl-bbs-list tr{display: block; width: 100%; text-align: left;}
  .sl-bbs-list tr{position: relative; padding: 1rem 0; border-bottom: 1px solid #ddd;}
  .sl-bbs-list th, 
  .sl-bbs-list td{display: inline-block; margin-right: .6rem; padding: 0; border-bottom: none;}
  .sl-bbs-list tbody th,
  .sl-bbs-list tbody td{font-size: 1.3rem;}
  .sl-bbs-list .item-chk{position: absolute; right: 1px; top: 1px; margin-right: 0;}
  .sl-bbs-list .item-chk *{margin: 0;}
  .sl-bbs-list .item-num{display: block; width: 100%; text-align: left;}
  .sl-bbs-list .item-tit{display: block; width: 100%; margin-bottom: .4rem; padding-left: 0; margin-right: 0; font-size: 1.4rem; font-weight: 500; text-align: left; letter-spacing: -0.065em;}
  .sl-bbs-list thead th, 
  .sl-bbs-list thead td{display: none;}
  .sl-bbs-list .m-tit{display: inline-block; padding-right: .2rem;}

  /* 인풋 */
  .sl-input-notice{font-size:1.3rem; text-align: left;}
  .sl-input-tb{display: block; padding: 1rem 0; border-bottom: 1px solid #ddd;}
  .sl-input-tb thead, 
  .sl-input-tb tbody,
  .sl-input-tb tr{display: block; width: 100%;}
  .sl-input-tb tr{padding: 0 1.2rem; box-sizing: border-box;}
  .sl-input-tb th, 
  .sl-input-tb td {display: block; width: 100%; padding: 0; border-bottom: none; font-size: 1.4rem; text-align: left;}
  .sl-input-tb th{padding-bottom: .7rem; background: none;}
  .sl-input-tb td{padding-bottom: 1rem;}
  .sl-input-tb .contents-row td{padding: 1.2rem 0;}
  .sl-input-tb .guide{display: none;}
  .sl-input-tb input[type="text"],
  .sl-input-tb input[type="password"]{width: 100%;}
  .sl-input-tb td input[type="file"]{width: 90%;}
  .sl-input-tb td .input--subject{margin-top: .3rem;}
  .sl-input-tb .captcha input[type="text"]{width: 18rem;}

   /*  뷰  */
  .sl-view-tb th, .sl-view-tb td{font-size: 1.4rem;}
  .sl-view-tb .info-row td,
  .sl-view-tb .file-row td{font-size: 1.3rem;}
  .sl-view-tb.summary-ver th{width:20%;}
  .sl-view-tb.summary-ver td{width:80%;}
  
  /* 코멘트 */
  .sl-comment-input .writer-row{padding: 0;}
  .sl-comment-input .writer-row input[type="text"],
  .sl-comment-input .writer-row input[type="password"]{float: left; width: 50%; margin-right: 0; background: #f9f9f9; border: none;}
  .sl-comment-input .writer-row input:first-of-type{border-right: 1px solid #ddd; }
  .sl-comment-input .writer-row::after{content: ''; display: block; clear: both;}
  .sl-comment-input textarea{padding: .8rem .6rem;}
  .sl-comment-input .captcha-column input{width: 12rem;}

}