@charset "euc-kr";
/* 사용하려면 태그, 클래스명 수정
bbs > view.php 에서 아래 텍스트 추가
$prev = "이전 글이 없습니다.";
$next = "다음 글이 없습니다.";
.no 클래스에 폰트색 변경
코멘트 푸른빛 색상 배경 변경
#f0f7ff71 < 검색 후 색상 변경 해주면 됨
image 게시판에 file.gif 원하는 파일로 변경
***** 반응형 가로 패딩 10px 로 적용해놓음h
*/
/* category */
.category-area{margin-bottom:.6rem; color:#333; font-size:1.4rem; line-height:3rem; letter-spacing:-0.065rem;}
.category-area a{padding:0 .5rem;}
.category-area b{color:#9e1b1f}
/* 페이징 */
.bbs-paging {margin:2rem auto 3rem;}
.bbs-paging .page_list {display:flex; justify-content:center; align-items:center;}
.bbs-paging a, .bbs-paging em {width:1.875rem; height:1.875rem; border:1px solid #ddd; margin:0 1px; vertical-align:middle; box-sizing:border-box; font-size:.75rem; line-height:1.75rem; text-align:center; color:#666;}
.bbs-paging img {width:100%; height:auto; vertical-align:top;}
.bbs-paging .page_list > a {border:0;}
.bbs-paging .page-num, .bbs-paging .current-num{display:inline-block; width:25px; height:25px; margin:0 1px; border:1px solid #ddd; color:#333; font-size:14px; line-height:23px; text-align:center; box-sizing:border-box;}
.bbs-paging .list {height:1.875rem; margin:0 1px; font-size:0; vertical-align:middle;}
.bbs-paging .list a, .bbs-paging .list b {display:inline-block; width:1.875rem; height:1.875rem; border:1px solid #ddd; margin:0 1px; vertical-align:middle; box-sizing:border-box; font-size:.75rem; line-height:1.75rem; text-align:center; color:#666;}
.bbs-paging .list b {background-color: #333; border-color:#333; color: #fff;}
/* 리스트 하단 검색 */
.bbs-list-sch{margin:2rem 0; text-align:center; overflow:hidden;}
.bbs-list-sch select,
.bbs-list-sch input,
.bbs-list-sch button{float:left; height:4rem; line-height:3.8rem; font-size:1.5rem; letter-spacing:-0.065rem; padding-left:0.7rem; color:#000; vertical-align:middle; box-sizing:border-box; border-color:#ccc;}
.bbs-list-sch select{width:30%;}
.bbs-list-sch input{width:calc(70% - 50px); border-width:1px 0;}
.bbs-list-sch button{width:50px; color:#fff; text-align:center; padding:0; background:#444;}
/* 리스트 */
.bbs-list{border-top:1px solid #000;}
.bbs-list li{position:relative; border-bottom:1px solid #e6e6e6; box-sizing:border-box; padding:1rem .625rem;}
.bbs-list li .chkbox{display:block; margin:0 0 .25rem;}
.bbs-list li .subject {display:block; font-size:1.125rem; font-weight:500; letter-spacing:-0.065rem; line-height:1.4rem; color:#000;}
.bbs-list li .subject img{width:auto; height:auto; max-height:1.125rem;}
.bbs-list li .user_area{display:block; font-size:1rem; letter-spacing:-0.065rem; line-height:1.4; color:#999; margin:0.4rem 0 0;}
.bbs-list li .user_area, .bbs-list li .user_area *{vertical-align:middle;}
.bbs-list li .user_area b{display:inline-block; font-weight:normal; margin-left:0.5rem;}
.bbs-list li .user_area b:first-child{margin-left:0; letter-spacing:-0.065rem;}
.bbs-list li .user_area b img{height:1rem;}
/* 인풋 */
.bbs-notice-txt{font-size:.9rem; color:#666; line-height:1.3; letter-spacing:-0.065em; text-align:right; padding-bottom:.675rem;}
.bbs-input-form li {padding:.2rem 0;}
.bbs-input-form li.border{border-top:1px solid #eee;}
.bbs-input-form li strong {display:block; font-size:1rem; font-weight:500; line-height:1.75rem; letter-spacing:-0.065rem; color:#333; margin:0 0 .45rem;}
.bbs-input-form li select, .bbs-input-form li input[type="text"], .bbs-input-form li input[type="password"]{display:block; width:100%; height:3rem; font-size:.95rem; font-weight:500; line-height:2.875rem; color:#3f3f3f; text-align:left; border:1px solid #ddd; padding:0 .25rem; box-sizing:border-box;}
.bbs-input-form li input:focus{border-color:#000;}
.bbs-input-form li .cmt{display:inline-block; font-size:1.3rem; color:#666; line-height:1.3; letter-spacing:-0.065em;}
.bbs-input-form li.file input[type="file"]{width:100%; height:3rem; font-size:1rem; padding:0 .25rem; margin:.3rem 0; color:#333; vertical-align:middle; box-sizing:border-box; border:1px solid #ddd;}
/* 제목 */
.bbs-input-form li.subject select{width:auto; max-width:100%;}
.bbs-input-form li.subject input{width:100%;}
/* 평점 */
.bbs-input-form li.star{margin:1rem 0;}
.bbs-input-form li.star strong{margin-top:0.3rem;}
.bbs-input-form li.star label{display:inline-block; margin:0.3rem 0;}
.bbs-input-form li.star input[type="radio"]{height:1.5rem; vertical-align:top; margin-right:0.5rem;}
.bbs-input-form li.star img{height:1.5rem; vertical-align:top;}
/* 글 */
.bbs-input-form li.user-contents{margin:1rem 0; padding:0;}
.bbs-input-form li.user-contents .chk{margin:0 0 0.5rem;}
.bbs-input-form li.user-contents .chk label{display:inline-block; font-size:1rem; line-height:1.5rem; vertical-align:top; margin-left:1rem;}
.bbs-input-form li.user-contents .chk label:first-child{margin-left:0;}
.bbs-input-form li.user-contents .chk input[type="checkbox"]{height:1.5rem; vertical-align:top; margin-right:0.5rem;}
.bbs-input-form li.user-contents textarea{width:100%; height:15rem; font-size:1rem; line-height:1.5rem; letter-spacing:-0.065rem; color:#333; padding:1rem; border:1px solid #ddd; word-break:break-all; box-sizing:border-box;}
/* 스팸 */
.bbs-input-form li.spam {font-size:.9rem; line-height:1.4rem; padding-left:0; overflow:hidden;}
.bbs-input-form li.spam strong{position:relative; display:block; margin:0 0 0.5rem;}
.bbs-input-form li.spam img {float:left; width:5rem; height:2.75rem; border-width:.75rem 0 !important; border-style:solid; border-color:#343d4f; box-sizing:border-box;}
.bbs-input-form li.spam input {float:left; width:calc(100% - 5.5rem); height:2.75rem; margin:0 0 0 .5rem;}
.bbs-input-form li.spam .comment{display:none;}
/* 상세 */
#wiz_get_table_width {width:auto !important;}
.bbs-view-top{line-height:1.5; padding:0 0 1rem; border-bottom:1px solid #eee;}
.bbs-view-top p{font-size:1.375rem; line-height:1.4; letter-spacing:-0.065rem; font-weight:700;}
.bbs-view-top span{display:block;}
.bbs-view-top .name{font-size:1rem; letter-spacing:-0.085rem; margin:.625rem 0 0;}
.bbs-view-top .name small{letter-spacing:0; font-weight:normal;}
.bbs-view-top .date{color:#999; font-size:.9rem; letter-spacing:0;}
.bbs-view-top .file{overflow:hidden; margin:.625rem -0.3rem 0 -0.3rem;}
.bbs-view-top .file a{float:left; font-size:.875rem; color:#888; padding:0.25rem .625rem 0.25rem 2.5rem; margin:0.3rem; line-height:2rem; border-radius:3px; background:url(./image/clip2.png) 1rem 50% no-repeat #f0f0f0; background-size:auto 1rem; word-break:keep-all;}
/**/
.bbs-view-body{margin:2rem 0; line-height:1.4; font-size:1rem; box-sizing:border-box; letter-spacing:-0.045rem;}
.bbs-view-body .wiz_target_resize, .bbs-view-body table{max-width:100% !important;}
.bbs-view-body table {border:0 none;}
.bbs-view-body table th, .bbs-view-tb table td{height:auto; padding:0; border:0 none; background:none;}
.bbs-view-body ol {list-style:decimal; list-style-position:inside;}
.bbs-view-body ul {list-style:disc; list-style-position:inside;}
.bbs-view-body b, .bbs-view-body strong {font-weight:700;}
.bbs-view-body strike, .bbs-view-body s {text-decoration:line-through;}
.bbs-view-body u {text-decoration:underline;}
.bbs-view-body i, .bbs-view-body em {font-style:italic;}
.bbs-view-body img {width:auto; max-width:100%; height:auto !important;}
/**/
.bbs-view-related{font-size:.9rem; letter-spacing:-0.065rem; line-height:1.4; padding:.625rem 0; border-width:1px 0; border-style:solid; border-color:#eee;}
.bbs-view-related p{position:relative; padding:0 0 0 6rem; height:2.1rem; line-height:2.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.bbs-view-related p:first-child{margin:0;}
.bbs-view-related span{position:absolute; left:0; top:0; color:#999;}
.bbs-view-related small{color:#bbb;}
.bbs-view-related a{}
/* 코멘트 리스트 */
.comm_body {border-top:1px solid #ddd; margin:1.25rem 0 0;}
.comm_row {border-bottom:1px solid #ddd; padding:1.5rem 1rem; background:#fafafa;}
.comm_row .comm_info {display:block; font-size:.875rem; line-height:1.5rem; font-weight:500; letter-spacing:-0.025rem; color:#555; margin:0 0 .625rem;}
.comm_row .comm_info strong {font-weight:700;}
.comm_row .comm_info strong:after {content:''; display:inline-block; width:1px; height:.7rem; background:#ccc; margin:-.125rem .625rem 0; vertical-align:middle;}
.comm_row .comm_info span {color:#999;}
.comm_row .comm_info .del_btn { float:right; height:1.5rem; line-height:1.375rem; border-width:1px; border-style:solid; border-color:#ddd #bbb #bbb #ddd; font-size:.8rem; letter-spacing:-0.025rem; color:#777; border-radius:.125rem; -webkit-border-radius:.125rem; -moz-border-radius:.125rem; -ms-border-radius:.125rem; -o-border-radius:.125rem; padding:0 7px; box-sizing:border-box; text-decoration:none; }
.comm_row .contents {font-family:'NotoSans',sans-serif; font-size:.9rem; line-height:1.125rem; letter-spacing:-0.045rem; color:#555; word-break:break-word;}
/* 코멘트 폼 */
.bbs-cmt-input {position:relative; font-size:1rem; letter-spacing:-0.065rem; border:1px solid #ccc;}
.bbs-cmt-input input[name="name"],
.bbs-cmt-input input[name="passwd"]{float:left; height:3rem; line-height:2.875rem; width:50%; letter-spacing:-0.065rem; padding:0 0 0 1rem; border-width:0 0 0 1px; border-style:solid; border-color:#e9e9e9; box-sizing:border-box;}
.bbs-cmt-input input[name="name"]{border-left:0 none;}
.bbs-cmt-input textarea{clear:both; width:100%; height:8rem; line-height:1.4; padding:.625rem; font-size:.9rem; letter-spacing:-0.055rem; border-width:1px 0 0; border-style:solid; border-color:#e9e9e9; box-sizing:border-box; vertical-align:top;}
.bbs-cmt-input button{position:absolute; right:-1px; bottom:-1px; width:5rem; height:2.25rem; line-height:2.25rem; text-align:center; background:#4c4c4c; font-size:.95rem; color:#fff; letter-spacing:-0.065rem;}
.bbs-cmt-input .spam{display:block; height:22px; padding:5px 0.5rem; border-top:1px solid #e9e9e9;}
.bbs-cmt-input .spam img{vertical-align:top;}
.bbs-cmt-input .spam input[name="vcode"]{vertical-align:top; height:22px;}
/* 버튼 */
.bbs-btn{margin:1.25rem 0; overflow:hidden; text-align:center;}
.bbs-btn .left{float:left; text-align:left;}
.bbs-btn .right{float:right; text-align:right;}
.bbs-btn a, .bbs-btn input, .bbs-btn img{display:inline-block; margin:2px; vertical-align:top;}
.bbs-btn a img{margin:0;}
.bbs-btn a:first-child, .bbs-btn input:first-child, .bbs-btn img:first-child{margin-left:0;}
.bbs-btn a:last-child, .bbs-btn input:last-child, .bbs-btn img:last-child{margin-right:0;}
.bbs-btn a, .bbs-btn button, .bbs-btn input {display:inline-block; width:4.5rem; height:1.875rem; line-height:1.75rem; border:1px solid #ddd; background:#fff; text-align:center; font-size:.8rem; color:#666; margin-left:.25rem; vertical-align:middle; -webkit-appearance:none; appearance:none; box-sizing:border-box; cursor:pointer; text-decoration:none;}
.bbs-btn input[type="submit"], .bbs-btn button[type="submit"] {background:#555; color:#fff; border-color:#444;}
/* passwd */
.bbs-passwd {text-align:center; margin:4rem 0; padding:4.5rem 0 0; background:url(./image/pass_ico.png) 50% 0 no-repeat; background-size:2.8125rem auto;}
.bbs-passwd p {font-size:1.125rem; font-weight:500; letter-spacing:-0.085rem; line-height:1.4; margin:0 0 1rem;}
.bbs-passwd .noti {font-size:1rem; color:#333; margin:-.625rem 0 1.25rem;}
.bbs-passwd input[type="password"]{width:80%; height:4rem; line-height:3.8rem; border:1px solid #ddd; text-align:center; font-size:1.5rem;}
.bbs-passwd .bbs-pw-btn{margin:0.5rem 0 0; text-align:center;}
.bbs-pw-btn a , .bbs-pw-btn button {display:inline-block; width:5rem; height:2rem; line-height:1.875rem; border:1px solid #ddd; background:#fff; text-align:center; font-size:.875rem; color:#666; margin-left:.25rem; vertical-align:middle; -webkit-appearance:none; appearance:none; box-sizing:border-box; cursor:pointer; text-decoration:none;}
.bbs-pw-btn .btnA{background:#555; color:#fff; border-color:#444;}
/* 상품 */
.bbs-input-prd-summary{margin-top:3rem; padding:2rem; margin-bottom:3rem; border:1px solid #ddd; box-sizing:border-box;}
.bbs-input-prd-summary .inner{position:relative; padding-bottom:6rem; box-sizing:border-box;}
.bbs-input-prd-summary .thum-cover{float:left; width:5rem; }
.bbs-input-prd-summary .thum-cover img{width:5rem; height:5rem;}
.bbs-input-prd-summary .info-cover{float:left; width:calc(100% - 5rem);}
.bbs-input-prd-summary .info-cover{padding-left:2rem; box-sizing:border-box;}
.bbs-input-prd-summary .info-cover .prd-name{margin-bottom:.5rem; color:#333; font-size:1.8rem; font-weight:600; line-height:1.3;}
.bbs-input-prd-summary .info-cover .prd-desc{color:#666; font-size:1.4rem; line-height:1.3;}
.bbs-input-prd-summary .lnk-prd{position:absolute; left:0; bottom:0; width:100%; border:1px solid #005eae; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; color:#005eae; font-size:1.5rem; font-weight:500; letter-spacing:-0.065rem; line-height:3.3rem; text-align:center; box-sizing:border-box;}