/************************** * * #L_ : LIST * #D_ : DOCUMENT * #C_ : COMMENT * * _hd : header * _bd : body * _ft : footer * **************************/ /* icon load */ @import url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css); /* initialization */ .bd *,.bd *:after,.bd *:before{padding:0; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust: none}.bd table {width:100%; border-collapse:collapse; line-height:1.4}.bd p,.bd h1,.bd h2,.bd h3,.bd h4,.bd h5,.bd h6,.bd ul,.bd ol,.bd li,.bd dl,.bd dt,.bd dd,.bd table,.bd th,.bd td,.bd form,.bd fieldset,.bd legend,.bd input,.bd textarea,.bd button,.bd select {margin:0; padding:0; -webkit-text-size-adjust:none}.bd input,.bd textarea,.bd select,.bd button, .bd table {background:transparent; font-size: 12px; border-collapse:collapse; -webkit-font-smoothing: antialiased}.bd a:focus, .bd input:focus, .bd select:focus, .bd button:focus, .bd textarea:focus {outline:none !important}.bd img, .bd fieldset,.bd button {border:none; outline:0}.bd ul,.bd ol {list-style: none; list-style-position: inside}.bd small {color:#ddd}.bd em,.bd address {font-style: normal}.bd a {text-decoration: none; color:#555} /* class */ .bd .cf:after,.bd .clear{clear:both}.bd .cf:after,.bd .cf:before{content:"";display:table}.bd .clear{display:block;position:relative}.bd .clear:after{content:"";display:block;clear:both}.bd .blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}.bd .fw_b{font-weight:700}.bd .fw_l{font-weight:400}.bd .or_txt{display:inline-block;overflow:hidden;word-break:break-all;text-overflow:ellipsis;white-space:nowrap}.bd .bdr_r{border-radius:3px}.bd .bdr_50{border-radius:50%}.bd .bdr_n{border:none}.bd .h_100{height:100%}.bd .w_100{width:100%}.bd .p_m_0{padding:0;margin:0}.bd .bxsd{-webkit-box-shadow:1px 3px 4px rgba(100,100,100,.1);-moz-box-shadow:1px 3px 4px rgba(100,100,100,.1);-o-box-shadow:1px 3px 4px rgba(100,100,100,.1);-ms-box-shadow:1px 3px 4px rgba(100,100,100,.1);box-shadow:1px 3px 4px rgba(100,100,100,.1)}.bd .trs{-webkit-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.bd .mrg_b{margin-bottom:4px!important}.bd .mrg_t{margin-top:4px!important}.bd .mrg_r{margin-right:4px!important}.bd .mrg_l{margin-left:4px!important}.bd .mrg_2b{margin-bottom:8px!important}.bd .mrg_2t{margin-top:8px!important}.bd .mrg_2r{margin-right:8px!important}.bd .mrg_2l{margin-left:8px!important}.bd .mrg_at{margin-left:auto;margin-right:auto}.bd .fl{float:left}.bd .fr{float:right}.bd .cs_p{cursor:pointer}.bd .t_c{text-align:center}.bd .t_r{text-align:right}.bd .p_fx{position:fixed}.bd .p_rt{position:relative}.bd .p_as{position:absolute}.bd .h_line{height:1px;width:100%;background:#f1f1f1}@media only screen and (max-width:479px){.bd .cs_p{cursor:default}} /* checkbox */ .bd input[type="checkbox"], .bd input[type="radio"] {display:none; visibility:hidden}.bd input[type="checkbox"] + label, .bd input[type="radio"] + label {cursor:default; font-size:12px; font-weight:700; color:#999; transition:border-color 0.3s ease-in-out, background-color 0.3s ease-in-out}.bd input[type="checkbox"] + label:before, .bd input[type="radio"] + label:before {display:inline-block; content:""; margin:-2px 4px 0; vertical-align:middle; width:14px; height:14px; background-color:rgba(0,0,0,0.1); border:none}.bd input[type="checkbox"]:checked + label:before, .bd input[type="radio"]:checked + label:before {background-color:#02b875; background-repeat:no-repeat; background-position:50% 50%; -webkit-background-size:10px auto; -moz-background-size:10px auto; -o-background-size:10px auto; background-size:10px auto; background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy4xNDMsMTQuOTM4IDAsNy43OTYgMi4wMjEsNS43NzYgNy4xNDMsMTAuODk4IDE3Ljk3OSwwLjA2MiAyMCwyLjA4MiAiLz4NCjwvc3ZnPg0K)} .bd label.locked {display:none} .bd label.unlocked > i {color:#999 !important} .bd label.locked > i {color:#02b875 !important} .bd label[class$=locked]:before, .bd label[class$=locked]:after {content:""; display:none !important} div.divider {height:2px; width:2px; background:#d5d5d5; margin:0 1px 3px; display:inline-block} .extraimages {vertical-align:-1px} /* button */ .bs_btn {display:inline-block; text-align:center} .bs_btn:focus {outline:none} .bs_btn:active {transform: scale(0.95); -ms-transform: scale(0.95); -moz-transform: scale(0.95); -webkit-transform: scale(0.95);} .bs_btn > i {color:#999; font-size:16px; vertical-align:-3px} .bd { font-family:sans-serif !important; padding:0; max-width:2000px; margin:0 auto; font-weight:normal; overflow-x:hidden; font-size: 12px; letter-spacing:-0.03em; background:transparent; line-height:1.5 } /* 비회원 정보 입력 폼 */ .nonmember > input {position: relative; background:#fafafa; border:none; border-top:1px solid #f1f1f1; padding:0 16px; display:inline-block; height:44px; line-height:44px; width:50%; font-size:12px} .nonmember > input:first-of-type {border-right:1px solid #f1f1f1} /* 등록된 글이나 검색 결과가 없을 때 출력 */ .no_doc {width:100%; height:120px; line-height:120px; text-align:center; color:#999; font-size:16px; font-weight:bold} .no_doc > i {vertical-align:-6px; margin-right:4px; font-size:22px} /* 섬네일 이미지 없을 때 */ .no_img {display:block; overflow:hidden; position:relative; margin:0 auto; background:#f1f1f1; font-size:13px; font-weight:bold; color:#aaa; text-align:center; white-space:nowrap} /* SECRET FORM */ .bd #secretForm {padding:8px 0} #secretForm input, #secretForm button {float:left; border:1px solid #f1f1f1; height:32px; padding:0 12px} #secretForm > input[type=password] {border-right:0} #secretForm > button > i {font-size:20px; color:#02b875} /* 권한 없는 페이지 */ .bd ._authority {padding:22vh 0; text-align:center} ._authority h2 {font-size:18px; color:#666; letter-spacing:-2px; margin-bottom:15px} ._authority > input.password, ._authority > a, ._authority > input[type=submit], ._authority button {font-size: 13px; color:#999; border:1px solid #999; padding:8px 12px} ._authority > a:hover, ._authority > input[type=submit]:hover, ._authority button:hover {border-color:#444; background:#444; color:#fff} /* 목록 */ #L_ {background:transparent} /* 목록 상단 */ #L_ ._hd ._title {padding:24px 16px; background:rgba(0,0,0,0.02)} #L_ ._hd ._title .main {font-size:16px; color:#575757} #L_ ._hd ._title .sub {font-size:11px; color:#b3b3b3} #L_ ._hd ._menu_pc {padding:0} #L_ ._hd ._menu_pc > a {font-size:11px; display:inline-block; padding:0 16px; height:30px; background:#fff; border:1px solid #e5e5e5; line-height:30px; margin-left:4px; color:#888} #L_ ._hd ._menu_pc > a.fl {margin-left:0; margin-right:4px} #L_ ._hd ._menu_pc > a > i {font-size:10px; color:#999; vertical-align:0; margin-left:4px} #L_ ._hd ._menu_pc > a:hover {color:#02b875; border:1px solid #02b875} #L_ ._hd ._menu_pc > a:hover > i {color:#02b875} #L_ ._hd ._search {display:none; margin-top:12px} #L_ ._hd ._search .keyword, #L_ ._hd ._search .option {height:44px; line-height:44px; padding:0 16px; border:1px solid #e5e5e5; background:#fff} #L_ ._hd ._search .keyword {border-left:0} #L_ ._hd ._search .option {border-right:0} /* 모바일 상단 메뉴 & 필터 */ #L_ ._hd ._menu_m {padding:0} #L_ ._hd ._menu_m > a {font-size:11px; color:#888; background:#fff; border:none; border-right:1px solid #f1f1f1; width:25%; height:44px; line-height:44px; margin-right:0 !important; margin-left:0} #L_ ._hd ._menu_m i {font-size:20px; vertical-align:-3px; margin-right:4px} #L_ ._hd ._menu_m b {margin-left:2px; color:#02b875; display:none} #L_ ._hd ._menu_m .trigger-filter.on b {display:inline} #L_ ._hd ._filter {display:none; font-size:12px; background:#02b875} #L_ ._hd ._filter.on {display:block} #L_ ._hd ._filter > div {padding:12px 16px} #L_ ._hd ._filter .category {border-top:1px solid rgba(255,255,255,0.2)} #L_ ._hd ._filter > div > span.fl {color:#fff; line-height:2.4} #L_ ._hd ._filter > div > div.fr {width:calc(100% - 36px); width:-webkit-calc(100% - 36px); word-break: break-all} #L_ ._hd ._filter a {margin-right:12px; color:rgba(255,255,255,0.6); line-height:2.4} #L_ ._hd ._filter a.on {color:#02b875; padding:2px 8px; background:#fff; border-radius:16px} #L_ ._hd ._filter a > span {font-size:10px} /* 목록 하단 */ #L_ ._ft ._pagination {max-width:80%; margin:24px auto} #L_ ._ft ._pagination > a, #L_ ._ft ._pagination > span, #L_ ._ft ._pagination > strong {min-width:36px; padding:0 4px; height:36px; line-height:36px; color:#999; text-decoration:none !important; display:inline-block; font-weight:bold; font-size:11px} #L_ ._ft ._pagination .this, #L_ ._ft ._pagination a:hover {background:#eaeaea; color:#282828; border-radius:32px} #L_ ._ft ._pagination a > i, #L_ ._ft ._pagination strong > i {vertical-align:-1px; font-size:13px} #L_ ._ft ._pagination strong > i {color:#bbb} #infscr-loading {margin:48px auto 12px; width:54px; height:54px; line-height:54px; border-radius:50%; border: 2px solid #02b875} #infscr-loading.ing {border-color:transparent} #infscr-loading > span {font-size:28px; font-weight:bold; color:#02b875} #infscr-loading .if-sp {position:absolute; top:15px; left:15px} /* 문서 */ #D_ {padding:0} #D_ ._wrapper {border:1px solid #e5e5e5; background:#fff} /* 문서 상단 */ #D_ ._hd {padding:0; background:#fff} #D_ ._hd small{color:#ccc} #D_ ._hd h2 {padding:24px 16px; line-height:1} #D_ ._hd h2 > span {display:block; margin-bottom:4px; color: #02b875; font-weight: bold; font-size: 12px} #D_ ._hd h2 > span > i {font-size:13px; vertical-align:-1px} #D_ ._hd h2 > a {color:#444; font-weight:500; font-size:18px; line-height:1.5} #D_ ._hd .btm_area a {margin-bottom:3px; line-height:1.4; font-weight:500; letter-spacing:0.2px; color:#555} #D_ ._hd .btm_area {padding:12px 16px; background:#fcfcfc} #D_ ._hd .btm_area > span {padding:0; font-size:12px; color:#b5b5b5} #D_ ._hd .btm_area span > b {color:#666} #D_ ._hd .btm_area > span > i {color:#cacaca; vertical-align:-2px; margin-right:2px} /* 문서 중단 */ #D_ ._bd {padding:16px} /* 문서 확장변수 */ #D_ ._bd .et_vars {font-size:12px; width:100%} #D_ ._bd .et_vars tr {border-bottom:12px solid #fff} #D_ ._bd .et_vars tr:last-child {border-bottom:24px solid #fff} #D_ ._bd .et_vars th,.et_vars td {text-align:left; word-break:break-all; word-wrap:break-word} #D_ ._bd .et_vars th {padding:0; white-space:nowrap; color:#555} #D_ ._bd .et_vars td {width:100%; padding:0 16px; color:#999} #D_ ._bd .et_vars tr.rd_file a{color:#999; font-size:12px} #D_ ._bd .et_vars tr.rd_file a:last-of-type span.comma {display:none} /* 문서 본문 */ #D_ ._bd .xe_content {font-size:13px; word-wrap:break-word} #D_ ._bd .xe_content > p {font-size:13px} /* 문서 태그 */ #D_ ._bd .rd_tag {margin-top:8px; height:auto} #D_ ._bd .rd_tag ul{float:left} #D_ ._bd .rd_tag li{display:inline-block; margin:8px 8px 0 0} #D_ ._bd .rd_tag li > a {font-size:13px; color:#2e4287; font-weight:bold} #D_ ._bd .rd_tag li > a > span {font-size:14px; vertical-align:-0.5px; margin-right:2px} #D_ ._bd .rd li:last-child .comma{display:none} /* 문서 하단 */ #D_ ._ft {width:100%; padding:0 16px 16px} #D_ ._ft .s-line {height:1px; background:#f1f1f1; margin-bottom:16px} #D_ ._ft > a.favorite > i {color:#f4446d} #D_ ._ft > a.favorite.update > i {color:#f4446d} #D_ ._ft > a.blame.update > i {color:#494949} #D_ ._ft > a {font-size:14px; margin-right:12px} #D_ ._ft > a.blame > span {margin-left:2px} #D_ ._ft > a > span {margin-left:-2px; font-size:15px} #D_ ._ft > a > i {font-size:24px; margin-right:2px; vertical-align:-4px} #D_ ._ft .bs_btn > i {color:#d5d5d5} #D_ ._ft .rd_more {margin-top:-2px; margin-left:8px} #D_ ._ft .rd_more > i {font-size:28px; color:#999; padding:0 4px; margin-right:-2px; vertical-align:initial} #D_ ._ft .rd_share {padding:0 4px} #rd_share img {width:24px; height:24px; float:left; margin:8px 0 0 8px; border-radius:50%} .dropdown-content.to_sns li > a {padding:0 4px 0 0} .dropdown-content.to_sns li > a > span {box-sizing:border-box; padding:0 8px; font-size:12px} /* 서명 */ #D_ ._signature {background:#fff; border:1px solid #e5e5e5; margin:12px 0; padding:24px 16px} #D_ ._signature > p {margin-bottom:16px; font-weight:bold; font-size:13px; color:#555; line-height:1} #D_ ._signature > img, ._signature > span {border-radius:50%; width:60px; height:60px; line-height:60px; margin-right:12px} #D_ ._signature > div {width:calc(100% - 72px); width:-webkit-calc(100% - 72px); background:#fafafa; padding:12px} /* 이전글 다음글 */ #D_ ._navigation {margin:12px 0; padding:0} #D_ ._navigation > a {display:inline-block; background:#fff; border:1px solid #e5e5e5; height:44px; line-height:44px; padding:0 16px; font-size:12px; cursor:pointer; color:#666} #D_ ._navigation > a > i {font-size:16px; color:#aaa; vertical-align:-1px} #D_ ._navigation > a {margin-left:4px} #D_ ._navigation .disabled, ._navigation .disabled > i {color:#ddd} /* 댓글 */ #C_ {padding:0; background:transparent} /* 댓글 상단 */ #C_ ._hd {width:100%; height:44px; line-height:44px; background:#fafafa; border:1px solid #e5e5e5; padding:0 16px; font-size:13px} #C_ ._hd span {color:#777; line-height:1} #C_ ._hd b {margin-left:4px; color:#02b875} #C_ ._hd ._pagination > a, #C_ ._hd ._pagination > strong {width:16px; height:16px; line-height:16px; text-align:right; font-size:11px; color:#ccc; float:left; margin-left:8px; margin-top:14px} #C_ ._hd ._pagination > strong {color:#02b875} #C_ ._notification {height:40px; line-height:40px; padding:0 16px; background:#02b875; color:#fff} #C_ ._notification.off {display:none} #C_ ._notification > i {font-size:19px; vertical-align:-3px; color:#fff} #C_ ._notification > i.ion-close {font-size:16px; color:rgba(255,255,255,0.6); right:0; margin-top:1px; padding:0 16px} /* 댓글 중단 */ #C_ ._bd {padding:0; background:#fff; border:1px solid #e5e5e5; border-top:none} #C_ ._bd ._comment {padding:12px 16px; border-bottom:1px solid #f1f1f1; -webkit-user-select: initial !important} #C_ ._bd ._comment:last-child {border-bottom:none} #C_ ._bd ._comment.re .ico_re {width:9px; margin-top:12px; margin-left:-16px} #C_ ._bd ._comment .user-image {width:40px; margin-right:12px} #C_ ._bd ._comment .user-image > span, #C_ ._bd ._comment .user-image > img {width:40px; height:40px; line-height:40px; border-radius:50%} #C_ ._bd ._comment .content {width:calc(100% - 52px); width:-webkit-calc(100% - 52px)} #C_ ._bd ._comment ._wrapper {} #C_ ._bd ._comment .content .user {padding:0} #C_ ._bd ._comment .content .user a {font-size:13px; color:#4b4b4b; font-weight:bold} #C_ ._bd ._comment .content .user span {font-size:13px; color:#666} #C_ ._bd ._comment .content .user span.date {color:#bbb} #C_ ._bd ._comment .content .secret > i {font-size:18px; vertical-align:top; color:#999; margin-left:8px} #C_ ._bd ._comment .content .vote {margin-top:-6px} #C_ ._bd ._comment .content .vote > button, #C_ ._bd ._comment .content .vote > a {font-size: 12px; margin-left: 6px; color:#aaa} #C_ ._bd ._comment .content .vote > a.favorite {color:#ff5e59} #C_ ._bd ._comment .content .vote > button > i {font-size:23px; vertical-align:-4px; margin-left:4px; color:#999} #C_ ._bd ._comment .content .files {padding:8px 12px 4px; background:#f7f7f7; display:none; margin:8px 0 4px} #C_ ._bd ._comment .content .files li {line-height:1; margin-bottom:4px} #C_ ._bd ._comment .content .files li:after {content:""; display:inline-block; width:3px; height:3px; vertical-align:2px; background:#bbb} #C_ ._bd ._comment .content .files li:last-child:after {content:""; display:none} #C_ ._bd ._comment .content .files a {font-size:12px; color:#999; font-weight:bold} #C_ ._bd ._comment .content .files a:hover {color:#2a4179} #C_ ._bd ._comment .content .xe_content {width:100%; font-size:13px; padding:8px 0 0} /* 댓글 하단 */ #C_ ._ft {background:#fff; padding:0; margin:12px 0} #C_ ._comment_form {width:100%; position:relative; margin:0; border:1px solid #e5e5e5} #C_ ._comment_form .textarea {display:block; width:100%; border:none; min-height:80px; font-size:14px; padding:16px; border-bottom:1px solid #f1f1f1} #C_ ._comment_form .textarea:focus, #C_ ._comment_form .textarea:hover {outline:0} #C_ ._comment_form .option {width:100%; height:44px; line-height:44px} #C_ ._comment_form .option > a {margin-left:12px} #C_ ._comment_form .option label[class*=locked] {float:left; height:44px; padding:0 12px} #C_ ._comment_form .option label[class*=locked] > i {font-size:28px; color:#777} #C_ ._comment_form .option .bs_btn {width:80px; height:44px; color:#02b875; margin:0; padding:0; font-size:12px; border:none; border-left:1px solid #f1f1f1} /* 대댓글 */ #C_ #re_cmt{display:none} #C_ #re_cmt .close {padding:12px 4px 0} #C_ #re_cmt .close > i {font-size:30px} /* preloader */ .sp{width:24px;height:24px;margin:0 auto}.sp.sp-slices{border-radius:50%;border:12px solid rgba(2,184,117,.25);border-top:12px solid rgba(2,184,117,.75);-webkit-animation:spSlices 1s infinite linear;animation:spSlices 1s infinite linear}@-webkit-keyframes spSlices{0%,100%{border:12px solid rgba(2,184,117,.25);border-top:12px solid rgba(2,184,117,.75)}25%{border:12px solid rgba(2,184,117,.25);border-right:12px solid rgba(2,184,117,.75)}50%{border:12px solid rgba(2,184,117,.25);border-bottom:12px solid rgba(2,184,117,.75)}75%{border:12px solid rgba(2,184,117,.25);border-left:12px solid rgba(2,184,117,.75)}}@keyframes spSlices{0%,100%{border:12px solid rgba(2,184,117,.25);border-top:12px solid rgba(2,184,117,.75)}25%{border:12px solid rgba(2,184,117,.25);border-right:12px solid rgba(2,184,117,.75)}50%{border:12px solid rgba(2,184,117,.25);border-bottom:12px solid rgba(2,184,117,.75)}75%{border:12px solid rgba(2,184,117,.25);border-left:12px solid rgba(2,184,117,.75)}} /* Toggle */ .tg_cnt2{display:none} .tg_blur2,.bd .blur{position:absolute;top:0;left:0;border:0;background:none;width:1px;height:1px;overflow:hidden} .bd .tg_close2,#install_ng2 .tg_close2{position:absolute;top:0;right:0;border:0;background:transparent;font-size:20px; color:#999} /* Dropdown */ .dropdown-content {border-radius:3px; border:1px solid #e5e5e5; background-color: rgba(255,255,255,0.98); display: none; min-width: 160px; max-height: 650px; overflow-y: auto; opacity: 0; position: absolute; z-index: 999; will-change: width, height} .dropdown-content li {clear: both; color: rgba(0, 0, 0, 0.87); cursor: pointer; min-height: 36px; width: 100%; text-align: left; text-transform: none} .dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected, .dropdown-content li.active.selected {background-color: #f7f7f7} .dropdown-content li.divider {min-height: 0; height: 1px} .dropdown-content li > a, .dropdown-content li > span, .dropdown-content li > label {font-size: 12px; font-weight:normal !important; color: #777; font-weight:bold; display: block; line-height: 36px; padding: 0 16px} .dropdown-content li > label:before {display:none !important} .etc_content {padding:24px 48px 48px; text-align:center; background:#fff} .bd h2.etc_info {margin-bottom:16px; color:#777} /* 문서 내 비디오 사이즈 반응형으로 조절 */ .xe_content > p.vid {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden} .xe_content > p.vid iframe,.xe_content > p.vid embed,.xe_content > p.vid object,.xe_content > p.vid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%} /* 모바일 댓글 스와이프 시 뜨는 창 */ .cmt-overlay-background {display:table; table-layout:fixed; visibility: hidden; position:fixed; z-index:400888; left:0; top:0; height:100%; width:100%; opacity:0} .cmt-overlay-background.on {opacity:1; visibility: visible} .cmt-option {display:table-cell; vertical-align:middle; text-align:center; font-size:13px; background-color:rgba(0,0,0,0.65)} .cmt-option > .container {-webkit-user-select: none; -webkit-user-drag: none; height:auto; background:#fff; margin:0 auto; width:70%} .cmt-option > .container > a {display:inline-block; width:100%; height:44px; line-height:44px; border-bottom:1px solid #f1f1f1} .cmt-option .quit {background:#f1f1f1; border-bottom:none !important} /* 추천 시 뜨는 창 */ .toast {background-color: rgba(0, 0, 0, 0.7); display: none; padding: 24px 0; min-width:180px; border-radius: 3px; position: fixed; top: 30%; z-index: 500000} .toast .checkmark:after {content: ''; display: block; width: 40px; height: 68px; border: solid #fff; margin:0 0 24px 72px; border-width: 0 15px 15px 0; transform: rotate(45deg)} .toast > div.msg {text-align:center; color: #fff; font-size: 14px; font-weight: 600} /* 목록A */ #L_ ._listA {margin:0; width:100%; border:1px solid #e5e5e5; font-size:12px} #L_ ._listA thead a, #L_ ._listA thead span {color:#72747c; font-size:11px} #L_ ._listA tr {height:44px; border-bottom:1px solid #f1f1f1; background:#fff} #L_ ._listA tr.notice {background:#f7f7ff} #L_ ._listA thead th {border-top:1px solid #e5e5e5; padding:0 8px; border-bottom:1px solid #e5e5e5; background:#fafaff; text-align:center} #L_ ._listA tbody tr.select i {color:#2c3d7e; font-size:16px} #L_ ._listA th.title {padding:0 8px} #L_ ._listA th:not(.title) {text-align:center; width:72px} #L_ ._listA tbody td {text-align:left; padding:0 8px} #L_ ._listA tbody td:not(.title) {text-align:center} #L_ ._listA tbody td.title > a > i {font-size:16px; vertical-align:-4px} #L_ ._listA td.title > span.cate {margin-right:6px; font-size:11px; vertical-align:0.5px; padding:2px 4px 3px; font-weight:bold; color:#888} #L_ ._listA a.tt_cm {font-weight:bold; margin-left:4px} #L_ ._listA td.title label {margin-left:4px} /* 목록B (모바일 기본값) */ .bd_lst {list-style:none; padding:0; border:1px solid #e5e5e5} .bd_lst .lst_nm {width:100%; font-size:14px; padding:12px 16px; border-bottom:1px solid #f1f1f1; background:#fff} .lst_nm:last-of-type {border-bottom:0} .lst_nm.ntc {background:#fafafa} .lst_nm .lst_wrap, .lst_nm .lst_reply_wrap {display:table; table-layout: fixed} .lst_wrap > .lst_r, .lst_reply_wrap > .reply {display:table-cell; vertical-align:middle; height:48px; line-height:1.4} .lst_nm .lst_tmb {width:48px; height:48px; margin-right:16px} .lst_tmb > span {width:100%; height:100%; line-height:48px} .lst_tmb i {font-size:20px; color:#ccc} .lst_tmb > img {width:100%; height:100%} .lst_nm .lst_wrap {width:calc(100% - 108px); width:-webkit-calc(100% - 108px)} .lst_r .tt > a {vertical-align:top} .lst_r .tt > svg {vertical-align:-2px} .lst_r .tt > a.title {font-weight:500; color:#282828; word-break:break-all; line-height:1.4; font-size:14px} .lst_r .tt > a.title > i {vertical-align:top; font-size:17px; margin-left:6px; color:#777} /* secret, notice icon */ .lst_r .tt > span.ntc {font-size:12px; font-weight:bold; color:#02b875; vertical-align:1px; margin-right:4px} .lst_r .category {margin-right:4px; color:#888; vertical-align:1px; font-size:12px} .lst_r .meta {font-size:12px} .lst_r .meta > span {color:#b3b3b3} .lst_r .meta > a {color:#666; font-weight:500} .lst_nm .lst_reply_wrap {width:28px} .lst_reply_wrap .reply > a {display:block; border-radius: 50%; color: #888; font-size: 11px; height: 28px; line-height: 27px; width: 28px; background: #f1f1f1; z-index: 11} .lst_nm.select .hx {background:rgba(0,0,0,.02)} .lst_nm .hx {display:inline-block; width:100%; height:100%; top:0; position:absolute; left:0; z-index:10} .lst_nm .hx:hover {background:rgba(0,0,0,.01)} .lst_nm .checkb {z-index:99; top:0; left:0} /* 카드A */ .card_wrap {margin:0; width:100%} .bd_card {overflow:hidden; margin:0 auto; padding:0} .bd_card > div.card_el {float:left; padding:0; border:1px solid #e5e5e5; margin:0 0 16px; background:#FFF} .bd_card .checkb {position:absolute; z-index:9999; top:0; left:0} .bd_card .card_el .checkb:before {content:""; background-color:rgba(255,255,255,0.7)} .bd_card > div.card_el > a.hx {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10} .bd_card .card_content {padding:0} .bd_card .tmb_wrp {width:100%} .bd_card .tmb_wrp > span {height:120px; line-height:120px} .bd_card .tmb_wrp > img {width:100%; display:block} .bd_card p {padding:8px 12px 0} .bd_card p > span {font-size:12px; color:#aaa; margin-right:8px} .bd_card p > span.cate {color:#7db3fd} .bd_card h3 {padding:0 12px; line-height:1} .bd_card h3 > a {font-size:14px; color:#555; line-height:1.4; letter-spacing:-1px; word-break: break-all} .bd_card .cnt {padding:4px 12px 8px; color:#888; line-height:1.4; font-size:12px} .bd_card .info{padding:8px 12px; font-size:13px} .bd_card .info > img, .bd_card .info > span {display:inline-block; vertical-align:middle; height:32px; line-height:32px} .bd_card .info > img {width:32px; height:32px; border-radius:50%; margin-right: 2px} .bd_card .info > span.no_img {width:32px; height:32px; line-height:32px; border-radius:50%} .bd_card .info > span {color:#aaa} .bd_card .info > span > i {margin-left:8px; margin-right:3px; color:#ddd; font-size:17px; vertical-align:-2px} .card_b div.card_el {border:none} .rt_area .favorite {z-index:99; bottom:0; right:0; padding:0 12px} .rt_area .favorite > i {color:#fff; font-size:24px} .card_b .tmb_wrp > span {height:200px; line-height:200px} .c_title > p > a {font-weight:700; color:#fff; font-size:15px} .card_ct_b p > span.cate {color:#cdebff; font-size:12px} .card_ct_b {display:block; position:absolute; bottom:0; left:0; z-index:2; width:100%; height:100%; opacity:0} .card_el:hover .card_ct_b {opacity:1; background:rgba(0,0,0,0.6)} .card_ct_b .info > img {width:24px; height:24px} .card_ct_b .info > span.no_img {width:24px; height:24px; line-height:24px; background:#eee; border-radius:50%} .card_ct_b .info {bottom:0; background:transparent; padding:4px 12px} .card_ct_b .info > span, .card_ct_b a {color:#fff} .gutter-sizer {width:2%} .card_el .favorite > span {display:none} .bd[data-content-width="w1"] .card_el {width:100%}; .bd[data-content-width="w1"] .gutter-sizer {width:0} .bd[data-content-width="w2"] .card_el {width:49%} .bd[data-content-width="w3"] .card_el {width:23.5%} .bd[data-content-width="w4"] .card_el {width:18.4%} .bd[data-content-width="w5"] .card_el {width:15%} .bd[data-content-width="w6"] .card_el {width:12.571428%} /* 타임라인 */ .bd_time {width:100%; margin:0 auto; font-size:14px} /* 글 작성부분 */ .bd_time #tWrite {background:#fff; margin-bottom:24px; border:1px solid #e5e5e5} #tWrite #t_tArea {height:160px; max-height:160px; padding:16px; overflow-y:auto} #tWrite #t_tArea:focus {outline:none} #t_tArea[contentEditable]:empty:not(:focus):before {content:attr(data-placedc); color:#ddd; font-size:24px} #t_tArea p > img {max-width:100%} .t_write .tags {border-top:1px solid #f1f1f1; height:auto; min-height:44px; padding:6px 12px; width: 100%} .tags .lang_tag {color:#999; font-size:12px} .tags li.tagAdd, .tags #tags-field {height:32px; line-height:32px; padding-left:4px; border:none; font-size:13px; background:transparent} .tags li.addedTag {margin:4px; padding:0 4px; height:24px; display: block; background:#eee} .addedTag > span {vertical-align:8px; font-size:13px; color:#686868; margin-right:12px} .tags .tagRemove {fill:#666; display:inline; cursor:pointer; height:12px; width:12px; margin:6px 0} .t_write_opt {height:44px; border-top:1px solid #f1f1f1} .t_write_opt > select {border:1px solid #f1f1f1; height:30px; line-height:30px; margin:7px 8px 0 0; max-width:100px; padding:0 8px; border-radius:15px} .t_write_opt > .opt_b {padding:0 4px 0 16px; height:44px; line-height:44px} .t_write_opt > .opt_b > label {padding:0} .t_write_opt .t_file_upload {padding:0 4px 0 16px; height:44px} .t_file_upload > i {color:#888; font-size:28px} .t_write_opt .sbm {height:30px; line-height:30px; margin:7px 16px 0 0; border-radius:15px; background:#02b875; color:#fff; font-size:12px; cursor:pointer; padding:0 24px; text-align:center} .sbm:focus {outline:none; background:#e5e5e5} /* 글 리스트 부분 */ .t_content {border:1px solid #e5e5e5; margin-bottom:24px; background:#fff} .t_content_hd {border-bottom:1px solid #f1f1f1; padding:16px; line-height:30px;} .t_content_hd > img {float:left; width:30px; height:30px; margin-right:8px; border-radius:50%} .t_content_hd > span {font-size:14px; color:#a5a5a5} .t_content_hd > span.no_img {width:30px; height:30px; line-height:30px; color:#bbb; font-size:12px; border-radius:50%; margin-right:8px} .t_content_hd > span.category:after {content:""; display:inline-block; width:2px; height:2px; margin-left:4px; vertical-align:2px; background:#ddd} .t_content_hd > span.fr {margin-left:8px; font-size:12px; color:#a5a5a5} .t_content_hd > a, .t_content_hd > b {color:#0d3c5f; font-weight:600; font-size:15px} .t_content_bd {padding:16px} .tArea[contentEditable]:empty:not(:focus):before {content:attr(data-placehd); color:#ccc} .t_cmt_ct {font-size:13px; padding:10px 16px 8px; background:#fafafa; border-top:1px solid #f1f1f1} .t_c_vote > i {vertical-align:-1px; font-size:14px; color:#ccc} .t_c_vote > span {color:#a5a5a5; margin-left:-2px} .t_cmt_ct > .cf {margin-bottom:4px} .t_cmt_ct .fr {line-height:1; margin-top:-1px} .t_cmt_ct .fr > a {margin-left:8px} .t_cmt_ct .fl > a {color:#0d3c5f; font-weight:600} .t_cmt_ct .fl > span:not(.nick) {color:#a9a9a9; font-size:11px; margin-left:4px} .t_cmt_ct .fl > span.nick {color:#aaa; font-weight:600} .t_cmt_ct .bs_btn {border:none} .t_cForm {border-top:1px solid #f1f1f1} .t_cForm > .tArea {width:calc(100% - 168px); width:-webkit-calc(100% - 168px); margin:0; max-height:48px; overflow:hidden; white-space:nowrap; height:48px; line-height:48px; padding:0 4px} .t_cForm > .tArea:focus {outline:none} .t_cForm > .bs_btn {width:48px; height:48px; line-height:48px; border:none; padding:0 16px} .t_cForm > .bs_btn > i {vertical-align:-2px; font-size:20px; color:#ccc} .t_cForm > .favorite {width:auto; max-width:72px} .t_cForm > .favorite > i {color:#ff3854 !important; vertical-align:-1px !important} .t_cForm > .favorite > span {font-size:13px; vertical-align:2px; color:#999} /* File Attach Editor */ #mUpload{display:none; margin-top:1px; border-top:1px solid #f1f1f1} #mUpload ul{list-style:none; min-height:32px; margin:0; padding:2%} #mUpload li{position:relative; float:left; width:8%; margin-right:2%; padding-top:8%; text-align:center} #mUpload li > div {display:block; position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:cover} #mUpload li > div > i {position:absolute; font-size:16px; top:2px; right:2px; color:#fff} #mUpload a {display:block; position:absolute; bottom:1px; left:1px; line-height:12px; border-radius: 50%; background-color: rgba(0,0,0,0.3); width:16px; height:16px} #mUpload a > i {font-size:12px; color:#fff} #mUpload .insert_file {left:auto; right:1px} #mUpload .type2:before{display: block; position: absolute; top: 0; width: 100%; height: 100%; font-weight: 700; font-size: 32px; background: #686868; color: #fff} #mUpload .music:before{content:"♪"; font-size:36px} #mUpload .media:before{content:"▶"} #mUpload .etc:before{content:"?"} #mUpload li small{position:absolute; left:0; margin-top:1px; font-size:11px; width: 100%; height: 20px; color: #aaa} #mUpload #loading{display:none} #mUpload .info{float:none; width:auto; height:auto; margin:0; padding:0} #mUpload .is_img>span,#mUpload .info div{display:none} #mUpload .is_img div{display:block;margin-top:4px} #mUpload .is_img div *{vertical-align:middle} #mUpload .is_img div .bd_btn{padding:4px 8px} #mUpload .is_img div .bd_btn span:last-child, #mUpload .is_img div .on span:nth-child(2){display:none} #mUpload .is_img div .on span:last-child{display:inline} #doctArea img {max-width:100%} .opt_b > label {display:inline-block; height:48px; padding:0 16px} .opt_b > label > i {margin-top:8px; font-size:28px; color:#777} #L_ ._bd .rd_tag {margin-top:8px; height:auto} #L_ ._bd .rd_tag ul{float:left} #L_ ._bd .rd_tag li{display:inline-block; margin:8px 8px 0 0} #L_ ._bd .rd_tag li > a {font-size:13px; color:#2e4287; font-weight:bold} #L_ ._bd .rd_tag li > a > span {font-size:14px; vertical-align:-0.5px; margin-right:2px} #L_ ._bd .rd li:last-child .comma{display:none} /* 모바일 */ @media screen and (max-width: 479px) { .bd {padding:0} .dt_hide {display:block} .dropdown-content li {cursor: default} .m_no {display:none !important} #cke_58 {display:none !important} /* 비회원 글쓰기 */ .nonmember > input {width:100%} .nonmember > input:first-of-type {border-right:0} #mUpload li{width:18%; margin-right:2%; padding-top:18%} /* 모바일 검색 */ #L_ ._hd ._search {border:none; border-top:1px solid #f1f1f1; width:100%; background:transparent; margin-top:0} #L_ ._hd ._search .option, #L_ ._hd ._search .keyword {border:none; display:inline-block} #L_ ._hd ._search .option {width:35%} #L_ ._hd ._search .keyword {width:65%} /* 페이지네이션 */ #L_ ._ft {margin:12px auto} #L_ ._ft ._pagination {margin:12px auto 0; max-width:100%} #L_ ._ft ._pagination > a, #L_ ._ft ._pagination > span, #L_ ._ft ._pagination > strong {min-width:28px; height:28px; line-height:28px} #D_ ._navigation > a {width:33.33333%; text-align:center; margin:0; padding:0; border:1px solid #e5e5e5; border-right:none} #D_ ._navigation > a:first-of-type {border-right:1px solid #e5e5e5} #D_ ._navigation > a:not(.lst) > i {position:absolute; font-size:16px; vertical-align:-5px} /* 댓글 영역 */ #C_ ._bd ._comment.re .ico_re {width:8px; margin-top:10px; margin-left:-16px} #C_ ._bd ._comment .user-image {width:36px} #C_ ._bd ._comment .user-image > span, #C_ ._bd ._comment .user-image > img {width:36px; height:36px; line-height:36px} #C_ ._bd ._comment .content {width:calc(100% - 48px); width:-webkit-calc(100% - 48px);} #C_ ._bd ._comment .content .vote {margin-top:1px} /* 폭 100% 일 때 좌우 보더값 지움 */ #D_ ._wrapper, #C_ ._hd, #C_ ._bd, #C_ ._comment_form, .bd_lst, .bd_card > div.card_el, .bd_time #tWrite, .bd_time .t_content .bd_wrt .wrt_wrap { border-right:none !important; border-left:none !important } .toast {top: 35%; font-size: 13px} }