/** * 이 파일은 iModule 게시판모듈의 일부입니다. (https://www.imodules.io) * * 게시판 기본템플릿 - 스타일시트 * * @file /modules/board/templets/default/styles/style.css * @author Arzz (arzz@arzz.com) * @license MIT License * @version 3.0.0 * @modified 2019. 11. 27. */ div[data-module=board] div[data-role=toolbar] {margin-bottom:10px; text-align:right; font-size:0;} div[data-module=board] div[data-role=toolbar] > div[data-role=input] {width:160px; font-size:14px; float:left;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] {width:50%; max-width:600px; min-width:380px; display:inline-block; font-size:0; vertical-align:middle;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > div[data-role=input] {display:inline-block; width:calc(100% - 45px); max-width:200px; margin-top:0; vertical-align:middle; font-size:14px;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > div[data-role=input][data-type=select] {max-width:130px; margin-right:5px} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button {width:40px; height:40px; background:#b5b7c0; border:0px; cursor:pointer; vertical-align:middle; margin-left:5px;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button > i {font-size:14px; color:#fff;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > button:hover {background:#828595;} div[data-module=board] div[data-role=toolbar] > a {display:inline-block; height:40px; line-height:40px; padding:0px; box-sizing:border-box; vertical-align:middle; margin-left:5px; text-decoration:none; cursor:pointer; background:#2196f3; color:#fff; font-size:0;} div[data-module=board] div[data-role=toolbar] > a > i {width:40px; height:40px; line-height:40px; vertical-align:middle; text-align:center; font-size:14px;} div[data-module=board] div[data-role=toolbar] > a > span {height:40px; line-height:40px; display:inline-block; vertical-align:middle; padding-right:15px; font-size:14px;} div[data-module=board] div[data-role=toolbar] > a:hover {background:#1e88e5;} div[data-module=board] ul[data-role=table] > li.notice {background:#FFFDE7;} div[data-module=board] ul[data-role=table] > li > span.loopnum {width:65px; text-align:center;} div[data-module=board] ul[data-role=table] > li > span.loopnum > i.fa-caret-right {color:#f44336;} div[data-module=board] ul[data-role=table] > li.notice > span.loopnum {text-align:center; font-weight:bold; color:#F44336;} div[data-module=board] ul[data-role=table] > li > span.title {width:100%;} div[data-module=board] ul[data-role=table] > li > span.title > a {text-decoration:none; color:#222; display:inline-block; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;} div[data-module=board] ul[data-role=table] > li > span.title > a:hover {color:#0370a6;} div[data-module=board] ul[data-role=table] > li > span.title > a > span.category {color:#666;} div[data-module=board] ul[data-role=table] > li > span.title > a > i.xi {margin-right:3px;} div[data-module=board] ul[data-role=table] > li > span.title > a > i.xi-lock {color:#F44336;} div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment {display:inline-block; float:right; margin:2px 0px 0px 5px; color:#FF9800; font-size:12px; vertical-align:middle;} div[data-module=board] ul[data-role=table] > li > span.title > a > span.vote {background:#e91b23; display:inline-block; margin:0px 5px 0px 0px; height:18px; line-height:18px; padding:0px 5px; border-radius:3px; color:#fff; font-size:11px; vertical-align:middle;} div[data-module=board] ul[data-role=table] > li > span.title > a > span.vote > i {font-size:10px; vertical-align:middle; width:14px; height:18px; line-height:16px; float:left;} div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment:before {content:"[";} div[data-module=board] ul[data-role=table] > li > span.title > a > span.ment:after {content:"]";} div[data-module=board] ul[data-role=table] > li > span.title > a > i.fa-floppy-o {float:right; margin-left:5px; color:#F44336;} div[data-module=board] ul[data-role=table] > li > span.title > a > i.fa-picture-o {float:right; margin-left:5px; color:#2196F3;} div[data-module=board] ul[data-role=table] > li > span.name {width:140px; text-align:center;} div[data-module=board] ul[data-role=table] > li.tbody > span.name {text-align:left;} div[data-module=board] ul[data-role=table] > li.tbody > span.name > i[data-role=photo] {width:24px; height:24px; margin-right:5px;} div[data-module=board] ul[data-role=table] > li.tbody > span.name > span[data-role=name] {width:calc(100% - 30px); height:24px; line-height:24px;} div[data-module=board] ul[data-role=table] > li > span.reg_date {width:110px; text-align:center; padding:0px;} div[data-module=board] ul[data-role=table] > li > span.reg_date > i.xi {display:none;} div[data-module=board] ul[data-role=table] > li > span.hit {width:60px;} div[data-module=board] ul[data-role=table] > li > span.hit > i.xi {display:none;} div[data-module=board] ul[data-role=table] > li.tbody > span.hit {text-align:right;} div[data-module=board] div[data-role=searchbar] {margin-top:10px; font-size:0;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] {display:inline-block; width:300px; vertical-align:middle; font-size:0;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] > div[data-role=input] {width:calc(100% - 45px); vertical-align:middle; display:inline-block; font-size:1rem; margin-right:5px;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button {width:40px; height:40px; background:#b5b7c0; border:0px; cursor:pointer; vertical-align:middle;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button > i {font-size:14px; color:#fff;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] > button:hover {background:#828595;} div[data-module=board] div[data-role=searchbar] > a {display:inline-block; height:40px; line-height:40px; padding:0px; box-sizing:border-box; vertical-align:middle; margin-left:5px; text-decoration:none; cursor:pointer; background:#2196f3; color:#fff; font-size:0; float:right;} div[data-module=board] div[data-role=searchbar] > a > i {width:40px; height:40px; line-height:40px; vertical-align:middle; text-align:center; font-size:14px;} div[data-module=board] div[data-role=searchbar] > a > span {height:40px; line-height:40px; display:inline-block; vertical-align:middle; padding-right:15px; font-size:14px;} div[data-module=board] div[data-role=searchbar] > a:hover {background:#1e88e5;} div[data-module=board] div.pagination {margin-top:20px; text-align:center;} div[data-module=board] article[data-role=post] {border-bottom:2px solid #222;} div[data-module=board] article[data-role=post] > div.header {display:block; margin:0; height: 100%; max-width: 100%; padding:15px; background:#f4f4f4; border-top:2px solid #222; line-height:1.6; border-bottom:1px solid #e3e4e5; margin-bottom:20px; font-size:0;} div[data-module=board] article[data-role=post] > div.header > h5 {font-size:16px; line-height:1.6; padding:5px 0px 15px 0px; margin:0; border-bottom:1px solid #e3e4e5;} div[data-module=board] article[data-role=post] > div.header > i[data-role=photo] {width:48px; height:48px; margin-top:15px; margin-right:10px;} div[data-module=board] article[data-role=post] > div.header > ul {list-style:none; width:calc(100% - 58px); display:inline-block; margin-top:15px; font-size:0; vertical-align:middle;} div[data-module=board] article[data-role=post] > div.header > ul > li {font-size:14px; color:#666;} div[data-module=board] article[data-role=post] > div.header > ul > li > b {display:inline-block; width:65px;} div[data-module=board] article[data-role=post] > div.header > ul > li > i.xi {display:none; height:24px; line-height:24px; margin-right:8px; vertical-align:middle;} div[data-module=board] article[data-role=post] > div.header > ul > li.name {display:block; height:24px; line-height:24px; font-size:14px;} div[data-module=board] article[data-role=post] > div.header > ul > li.date {display:inline-block; width:70%; height:24px; line-height:24px; vertical-align:middle;} div[data-module=board] article[data-role=post] > div.header > ul > li.hit {display:inline-block; width:30%; height:24px; line-height:24px; vertical-align:middle; text-align:right;} div[data-module=board] article[data-role=post] > div.header > ul > li.hit > b {margin-right:10px;} div[data-module=board] article[data-role=post] > div.content {padding:0px 15px; margin-bottom:20px; font-size:14px;} div[data-module=board] article[data-role=post] > div[data-role=button] {text-align:right; padding-right:0; position:relative; margin-bottom:20px;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author {display:inline-block; width:160px; height:30px; padding:4px; background:#E3F2FD; vertical-align:middle; border:1px solid #BBDEFB; text-align:left;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > i[data-role=photo] {width:30px; height:30px; border:1px solid #ccc; background-size:cover; background-position:50% 50%; background-repeat:no-repeat; float:left; margin-right:8px;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > span[data-role=name] {display:block; width:calc(100% - 40px); height:18px; font-size:12px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > div.level {display:inline-block; width:calc(100% - 40px); height:12px; font-size:0;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > div.level > div.level {width:35px; height:12px; font-size:11px; display:inline-block; vertical-align:middle; line-height:12px; font-family:Roboto; color:#666;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > div.level > div.level > b {color:#0288D1;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > div.level > div.progress {width:calc(100% - 35px); height:10px; margin:1px 0px; background:#ccc; display:inline-block; vertical-align:middle; border-radius:5px;} div[data-module=board] article[data-role=post] > div[data-role=button] > div.author > div.level > div.progress > div.on {background:#4FC3F7; min-width:10px; height:10px; border-radius:5px;} div[data-module=board] article[data-role=post] > div[data-role=button] > button[data-action=action] {background:#b5b7c0; color:#fff; border:0; font-size:16px; width:40px; height:40px; margin-left:5px; margin-right:0; display:none;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] {list-style:none; display:inline-block; vertical-align:middle; white-space:nowrap;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li {display:inline-block; margin-left:5px;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button {display:inline-block; height:40px; line-height:38px; padding:0px 15px; box-sizing:border-box; border:1px solid rgba(0,0,0,0.1); color:#666; background:#fff; vertical-align:middle; text-decoration:none; cursor:pointer; font-size:14px;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button:hover {background:#f4f4f4; color:#333;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=delete] {background:#f44336; color:#fff;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=delete]:hover {background:#e53935; color:#fff;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=adopt] {background:#2196f3; color:#fff;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button[data-action=adopt]:hover {background:#1e88e5; color:#fff;} div[data-module=board] article[data-role=post] > div[data-module=attachment] {padding:20px 0px;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > h5 {font-size:14px; height:30px; line-height:30px; border-bottom:1px solid #e3e4e5; margin-bottom:5px;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > h5 > i {font-size:12px; width:20px; height:30px; float:left; line-height:30px;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul {list-style:none;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li {height:20px; padding:5px 0px;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > i.icon {width:20px; height:20px; margin-right:5px; float:left; vertical-align:middle; background-size:contain; background-position:0 50%; vertical-align:middle;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > a {display:inline-block; max-width:calc(100% - 25px); height:20px; line-height:20px; color:#333; text-decoration:none; font-size:14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;} div[data-module=board] article[data-role=post] > div[data-module=attachment] > ul > li > a > span.size {color:#999; font-size:12px; float:right; display:inline-block; vertical-align:middle; margin-left:5px; line-height:22px; height:20px;} div[data-module=board] div[data-role=ment] {background:#f4f4f4; margin-top:20px;} div[data-module=board] div[data-role=ment] > div[data-role=list] {background:url(../images/ment_line_bg.png);} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] {background:#f4f4f4; padding:16px; border-top:1px solid #e5e5e5; position:relative;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item]:first-child {border-top:0px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > i.xi-reply-all {font-size:12px; color:#F44336; position:absolute; top:22px; left:-10px; width:20px; text-align:center;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-depth="0"] > i.xi-reply-all {display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar {height:30px; font-size:0; text-align:right; position:relative;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > i[data-role=photo] {width:28px; height:28px; border:1px solid #ccc; margin-right:8px; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; display:inline-block; vertical-align:middle; float:left;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > span[data-role=name] {font-size:14px; height:28px; line-height:28px; display:inline-block; vertical-align:middle; float:left;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action] {width:30px; height:30px; background:#b5b7c0; color:#fff; border:0; font-size:16px; cursor:pointer; display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action] > i {width:30px; height:30px; line-height:30px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action]:hover {background:#828595;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] {list-style:none; position:relative; float:right; font-size:0;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li {display:inline-block;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button {background:#fff; padding:0px 8px 0px 0px; height:24px; line-height:24px; cursor:pointer; vertical-align:middle; border:0; font-size:12px; margin-left:2px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button > i {width:24px; height:24px; text-align:center; float:left;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=reply] {background:#b5b7c0; color:#fff;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=reply]:hover {background:#828595;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] > div.topbar > ul > li > button[data-action=reply] {background:#828595;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] > div.topbar > ul > li > button[data-action=reply] > i:before {content:"\e616";} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=modify] {background:#2196f3; color:#fff;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=modify]:hover {background:#1e88e5;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.topbar > ul > li > button[data-action=modify] {background:#1e88e5;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.topbar > ul > li > button[data-action=modify] > i:before {content:"\e616";} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.content > div[data-role=wysiwyg-content] {display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.content > div[data-module=attachment] {display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=reply] form {margin-top:10px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=delete] {background:#F44336; color:#fff;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button[data-action=delete]:hover {background:#E53935;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content {padding:10px 0px 10px 38px; position:relative; font-size:14px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > i.mi-lock {position:absolute; top:10px; left:20px; color:#F44336; height:22px; line-height:22px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE] {font-size:14px; text-align:center; width:100%; padding:10px 0px; line-height:1.6; background:#FFEBEE; color:#F44336;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE][data-password=TRUE] {cursor:pointer;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-secret=TRUE][data-password=TRUE]:hover {background:#FFCDD2;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] div[data-delete=TRUE] {font-size:14px; text-align:center; width:calc(100% + 30px); padding:10px 0px; line-height:1.6; background:#FFECB3; color:#FF8F00; margin:-15px -15px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] {padding:20px 0px 10px 0px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > h5 {font-size:14px; height:30px; line-height:30px; border-bottom:1px solid #e3e4e5; margin-bottom:5px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > h5 > i {font-size:12px; width:20px; height:30px; float:left; line-height:30px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul {list-style:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li {height:20px; padding:5px 0px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > i.icon {width:20px; height:20px; margin-right:5px; float:left; vertical-align:middle; background-size:contain; background-position:0 50%; vertical-align:middle;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > a {display:inline-block; max-width:calc(100% - 25px); height:20px; line-height:20px; color:#333; text-decoration:none; font-size:14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.content > div[data-module=attachment] > ul > li > a > span.size {color:#999; font-size:12px; float:right; display:inline-block; vertical-align:middle; margin-left:5px; line-height:22px; height:20px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.footbar {padding-left:38px; font-size:0;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.footbar > time {display:inline-block; height:20px; line-height:20px; font-size:12px; color:#666; display:inline-block; vertical-align:middle;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item][data-action=modify] > div.footbar {display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div.empty {height:100px; line-height:100px; text-align:center; background:#f4f4f4;} div[data-module=board] div[data-role=ment] form {background:#fff; padding-bottom:20px;} div[data-module=board] div[data-role=ment] div[data-role=item] form {padding:10px; border:1px solid #e5e5e5;} div[data-module=board] div[data-role=ment] div[data-role=pagination] {padding:10px 0px; display:block; text-align:center;} div[data-module=board] div[data-role=ment] div[data-role=pagination]:empty {display:none;} div[data-module=board] div[data-role=vote] {text-align:center; padding-right:0; position:relative; margin-bottom:20px;} div[data-module=board] div[data-role=vote] button {border:1px solid #e4e4e4; border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:0px 15px; background:#fff; cursor:pointer; font-size:0px; text-align:left; height:40px;} div[data-module=board] div[data-role=vote] button > i {display:inline-block; width:25px; height:38px; line-height:38px; font-size:14px; vertical-align:middle; text-align:left;} div[data-module=board] div[data-role=vote] button > b {display:inline-block; height:38px; line-height:38px; font-size:14px; vertical-align:middle;} div[data-module=board] div[data-role=vote] button[data-action=good] > b {color:#3b9ad8;} div[data-module=board] div[data-role=vote] button[data-action=bad] > b {color:#fbb65c;} div[data-module=board] div[data-role=vote] button:hover, div[data-module=board] div[data-role=vote] button.selected {background:#e91b23; color:#fff !important;} div[data-module=board] div[data-role=vote] button:hover b, div[data-module=board] div[data-role=vote] button.selected b {color:#fff !important;} div[data-module=board] div[data-role=vote] button[disabled] {opacity:0.5;} div[data-module=board] div[data-role=ment] div[data-role=vote] {text-align:left; margin-top:20px;} div[data-module=board] div[data-role=ment] div[data-role=vote] > button {height:30px; padding:0px 8px;} div[data-module=board] div[data-role=ment] div[data-role=vote] > button > i {height:30px; line-height:30px;} div[data-module=board] div[data-role=ment] div[data-role=vote] > button > b {height:30px; line-height:30px;} div[data-module=board] ul[data-role=form] div[data-role=input][data-name=prefix] {width:180px;} div[data-module=board] div[data-role=button] {margin-top:10px;} div[data-module=board] ul.buttons {list-style:none; padding-bottom:20px; display:table; width:100%; table-layout:fixed;} div[data-module=board] ul.buttons > li {display:table-cell; width:100%; vertical-align:middle;} div[data-module=board] ul.buttons > li:first-child {width:100px;} div[data-module=board] ul.buttons > li:first-child > div[data-role=button] {text-align:left; padding-left:0px;} div[data-module=board] ul.buttons > li:first-child > div[data-role=button] > button, div[data-module=board] ul.buttons > li:first-child > div[data-role=button] > a {margin-left:0px; margin-right:5px;} div[data-module=board] ul.buttons > li:last-child {width:100%;} div[data-module=board] ul.buttons > li:last-child > div[data-role=button] {text-align:right; padding-right:0px;} div[data-module=board] ul.buttons > li:last-child > div[data-role=button] > button, div[data-module=board] ul.buttons > li:last-child > div[data-role=button] > a {margin-left:5px; margin-right:0px;} @media (max-width:767px) { div[data-module=board] div[data-role=toolbar] {text-align:left;} div[data-module=board] div[data-role=toolbar] > div[data-role=input] {width:100%; display:block; margin-bottom:10px; float:none;} div[data-module=board] div[data-role=toolbar] > div[data-role=search] {width:calc(100% - 45px); max-width:100%; min-width:255px} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > div[data-role=input] {max-width:calc(100% - 45px)} div[data-module=board] div[data-role=toolbar] > div[data-role=search] > div[data-role=input][data-type=select] {width:calc(100% + 45px); max-width:calc(100% + 45px); margin-right:0; margin-bottom:5px} div[data-module=board] div[data-role=toolbar] > a {vertical-align:bottom} div[data-module=board] div[data-role=toolbar] > a > span {display:none;} div[data-module=board] ul[data-role=table] > li.thead > span {display:none;} div[data-module=board] ul[data-role=table] > li.tbody > span.loopnum {display:none;} div[data-module=board] ul[data-role=table] > li.tbody {font-size:0; display:block; padding:10px 0px;} div[data-module=board] ul[data-role=table] > li.tbody > span {display:inline-block; font-size:14px; box-sizing:border-box; vertical-align:middle; padding:0;} div[data-module=board] ul[data-role=table] > li.tbody > span.title {width:100%; padding:0px 5px 6px 5px; height:auto;} div[data-module=board] ul[data-role=table] > li.tbody > span.title > a {display:block; height:24px; line-height:24px;} div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment {background:#FFA726; min-width:24px; height:24px; line-height:24px; color:#fff; padding:0px 8px; border-radius:12px; margin:0px 0px 0px 5px; position:relative; box-sizing:border-box;} div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment:before {content:"";} div[data-module=board] ul[data-role=table] > li.tbody > span.title > a > span.ment:after {content:"";} div[data-module=board] ul[data-role=table] > li.tbody > span.name {width:calc(100% - 200px); padding:0px 0px 0px 5px; height:24px;} div[data-module=board] ul[data-role=table] > li.tbody > span.reg_date {width:120px; height:24px; line-height:24px; color:#666;} div[data-module=board] ul[data-role=table] > li.tbody > span.reg_date > i.xi {margin:0px 5px 0px 10px; display:inline-block;} div[data-module=board] ul[data-role=table] > li.tbody > span.hit {width:80px; height:24px; line-height:24px; color:#666; text-align:right;} div[data-module=board] ul[data-role=table] > li.tbody > span.hit > i.xi {display:inline-block; margin:0px 5px 0px 10px;} div[data-module=board] ul[data-role=table] > li.notice > span.loopnum {display:inline-block; height:30px; line-height:30px; vertical-align:middle;} div[data-module=board] ul[data-role=table] > li.notice > span.title {width:calc(100% - 65px); padding:0px 5px;} div[data-module=board] ul[data-role=table] > li.notice > span.title > a {height:30px; line-height:30px;} div[data-module=board] ul[data-role=table] > li.notice > span.title > a > span.ment {margin:3px 0px 3px 5px;} div[data-module=board] ul[data-role=table] > li.notice > span.name {display:none;} div[data-module=board] ul[data-role=table] > li.notice > span.reg_date {display:none;} div[data-module=board] ul[data-role=table] > li.notice > span.hit {display:none;} div[data-module=board] div[data-role=searchbar] > div[data-role=search] {width:calc(100% - 45px); max-width:100%;} div[data-module=board] div[data-role=searchbar] > a > span {display:none;} div[data-module=board] article[data-role=post] > div.header > ul > li > b {display:none;} div[data-module=board] article[data-role=post] > div.header > ul > li > i.xi {display:inline-block;} div[data-module=board] article[data-role=post] > div.content {padding:0px;} div[data-module=board] article[data-role=post] > div[data-role=button] > button[data-action=action] {display:inline-block;} div[data-module=board] article[data-role=post] > div[data-role=button] > button[data-action=action].opened > i:before {content:"\f0d8";} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] {position:absolute; top:40px; right:0px; z-index:10; background:#fff; border:1px solid #ccc; box-shadow:1px 1px 2px rgba(0,0,0,0.1); display:none;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action].opened {display:block;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li {display:block; text-align:left; font-size:0; margin-left:0; border-bottom:1px solid #ddd;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li:hover {background:#f4f4f4;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li:last-child {border-bottom:0;} div[data-module=board] article[data-role=post] > div[data-role=button] > ul[data-role=action] > li > button {width:100%; margin-left:0; margin-right:0; background:transparent !important; color:#222 !important; text-align:left; border:0; padding:0px 16px; display:block;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action] {display:inline-block;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] {position:absolute; top:30px; right:0; border:1px solid #e5e5e5; background:#fff; width:auto; z-index:10; display:none;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li {display:block; height:30px; border-bottom:1px solid #e5e5e5;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button {height:30px; line-height:30px; background:#fff !important; color:#666 !important;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li:last-child {border-bottom:0px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button:hover {background:#f4f4f4;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action] > li > button > i {width:30px; height:30px; line-height:30px;} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > button[data-action=action].opened > i:before {content:"\f0d8";} div[data-module=board] div[data-role=ment] > div[data-role=list] > div[data-role=item] > div.topbar > ul[data-role=action].opened {display:block;} div[data-module=board] ul[data-role=form] div[data-role=inputset].flex {display:block;} div[data-module=board] ul[data-role=form] div[data-role=inputset].flex > div {display:block; margin:5px 0px 0px 0px; border-left:0px;} div[data-module=board] ul[data-role=form] div[data-role=inputset].flex > div:first-child {margin-top:0px;} div[data-module=board] ul[data-role=form] div[data-role=input][data-name=prefix] {width:100%;} }