오킹 0

@import url(http://fonts.googleapis.com/earlyaccess/nan@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


html,p,div,table,body,a,ul,li,td{ font-family: NanumGothicBold; font-style: normal; font-weight: normal;}


/*헤더*/


html,body{


background:#DFEFEF;


}


header .row>div:nth-child(1)>a img { opacity: 0}


header #header-bar #header-top-notice strong.notice-badge {background: #5a6255; padding: 4px 8px; color: #fff; font-weight: bold;}




#board-info #board-info-profile-img {


height: auto;


position: absolute;


right: 10px;


top: 4px;


border-radius: 50%;


width: 7em;


animation: doongdoong 0.5s infinite linear


}




/*로고*/


header #header-bar>.row { padding-top: 0.3em; padding-bottom: 0.3em; border-top: 5px solid #5a6255; background: #fff; border-bottom: 2px solid #5a6255;border-right: 2px solid #5c6255;border-radius: 8px 8px 0 0;}


header .row>div:nth-child(1)>a {


display: block;


width: 200px;


height: 50px;


background: url(https://upload.tgd.kr/20180906/f5237217171fc1f1583ad51ccb3a22f2.png) no-repeat;


background-size: auto 50px;


position:relative;


top:14px;


animation: blink 4.5s linear 0s 2 alternate-reverse backwards;


}




/*검색*/


header #right-search-form{


position: relative;


top: 20px;


}


header #right-search-form:before{


color:rgba(10,59,84,0);


position: absolute;


top: 19px;


left: 415px;


z-index:999


}


header #right-search-form>input[type=text]{border: 3px solid #ffffff;}


header #right-search-form>#right-search-btn { color: #ffffff;}






/*사이드바*/


#main .menu-wrapper>.header{


background:#663399;


border-radius: 5px 5px 0 0;


box-shadow: inset 0px 0px 13px 2px rgba(173, 159, 159, 0.5);


}


#main .menu-wrapper{border-right:none; border-bottom:none}


#main .menu-wrapper>a>em { color: #663399; text-decoration: none; font-style: normal; width: 24px; text-align: center; display: inline-block; font-weight: bold;}


#main .menu-wrapper>a>i.fa.fa-square { width: 24px; display: inline-block; text-align: center; font-size: 0.1em; color: #663399; vertical-align: 0.2em;}


#main .menu-wrapper .spacer {


background: #663399;


}




/*info*/


#board-info h1>a{


animation:text-shadow 1.5s ease-in-out infinite;


font-weight: bold;


}


#board-info h1>a:hover{


animation-play-state: paused;


}


/*컨텐츠*/


#article-list>.article-list-row>.item>.list-header>span{background-color:#5a6255}


#article-list>.article-list-row.notice{animation: notic 3s linear 0s infinite alternate backwards;}


#article-list #article-list-category{border-top: 2px solid #5a6255; }


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background-color: #5a6255;


border-color: #5a6255;}


#article-list>.article-list-row>.item>.list-title>small.comment-count{color:#5a6255;


animation: re 3s linear 0s infinite alternate backwards;}


#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span{color:#5a6255}




/*게시판*/


#main #main-content>div.frame{


border-radius:8px;


border-top:5px solid;


animation: border 3s linear 0s infinite alternate backwards;


border-right:0px solid;


border-bottom:0px solid;


}






/*나누기*/


.container>span>a{color: #cccaca}


.container>span{color: #cccaca}




#article-reply-area > .header h5{color:#5a6255}


#article-reply-area #reply-real-area .reply > .reply-header > .reply-writer.logged, #article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged{color:#f14c4c}




/*드래그*/


::selection{color:#fff;background:#3E3E3E}




/* 애니메이션 */


@keyframes change-color {


0%{


background-color:#5a6255;


}


100%{


background-color:#5a6255;


}


}




@keyframes notic {


0%{


background-color:#ffecec;


}


50%{


background-color:#ecf2ff;


}


100%{


background-color:#fdffec;


}


}


@keyframes blink {


0%{


opacity: 1;


}


25%{


opacity: 0;


}


50%{


opacity: 1;


}


75%{


opacity: 0;


}


100%{


opacity: 1;


}


}


@keyframes ong{


0%{


color:#5a6255;


}


100%{


color:#8386ff;


}


}




/*라인반짝*/


@keyframes border{


0%{


border-color:#663399;


}


50%{


border-color:#5a6255;


}


100%{


border-color:#ffcf7c;


}


}




#board-info #viewers-area .fa-user:before{





}




#board-info #viewers-area #viewers:before{


content: "남산에서 ";


cursor: text;


}


#board-info #viewers-area #viewers:after {


content: "만명 존버 중";


cursor: text;


}










@keyframes bounceInUp{


0%,60%,75%,90%,to{


animation-timing-function:cubic-bezier(.215,.61,.355,1)


}


0%{


opacity:0;transform:translate3d(0,3000px,0)


}


60%{


opacity:1;transform:translate3d(0,-20px,0)


}


75%{


transform:translate3d(0,10px,0)


}


90%{


transform:translate3d(0,-5px,0)


}


to{


transform:translateZ(0)


}


}




@keyframes doongdoong{


0% {


top: -10px


}




50% {


top: -2px


}




100% {


top:-10px


}


}




@keyframes text-shadow {


0% {


transform: translateY(0);


text-shadow:


0 0 0 #f7a6fb,


0 0 0 #94a1fe,


0 0 0 #fbc7cd,


0 0 0 #7d7c03;


}




20% {


transform: translateY(-0.5em);


text-shadow:


0 0.125em 0 #f7a6fb,


0 0.25em 0 #94a1fe,


0 -0.125em 0 #fbc7cd,


0 -0.25em 0 #7d7c03;


}




40% {


transform: translateY(0.25em);


text-shadow:


0 -0.0625em 0 #f7a6fb,


0 -0.125em 0 #94a1fe,


0 0.0625em 0 #fbc7cd,


0 0.125em 0 #7d7c03;


}





60% {


transform: translateY(-0.25em);


text-shadow:


0 0.03125em 0 #f7a6fb,


0 0.0625em 0 #94a1fe,


0 -0.03125em 0 #fbc7cd,


0 -0.0625em 0 #7d7c03;


}




80% {


transform: translateY(0);


text-shadow:


0 0 0 #f7a6fb,


0 0 0 #94a1fe,


0 0 0 #fbc7cd,


0 0 0 #7d7c03;


}


}




@keyframes move{


0%{


background-position:left


}


100%{


background-position:right


}


}


header .row>div:nth-child(1)>a {






display: block;






width: 145px;






height: 50px;






background: url(https://user-images.githubusercontent.com/44055669/46845014-7efd5700-ce14-11e8-87bc-b5d9621dd0ad.png) no-repeat;






background-size: auto 50px;






}








img[src="https://static-cdn.jtvnw.net/chat-badges/broadcaster.png"] {




content: url("https://user-images.githubusercontent.com/44055669/46847971-1917cc00-ce22-11e8-9ca0-7964821dbec5.png?raw=true");






}




img[src="https://static-cdn.jtvnw.net/chat-badges/mod.png"] {






content: url("https://user-images.githubusercontent.com/44055669/46899487-f2fc3580-cece-11e8-972b-de5928102c18.png?raw=true");






}




/* 추천게시물(별) 제거후 이미지 삽임 */










span.a-badge i.fa.fa-star {






color: rgba(0, 0, 0, 0);






width:15px;






height:21px;





top: 3px;






animation: test 0.1s linear infinite alternate;






background-repeat: no-repeat;




}




/* 별 애니메이션 */










@keyframes test{






from{transform:translate(0,5px);}






to{transform:translate(0,0px);}






}




/* 스트리머명 굵게 */










h1{






font-weight: 900;






color: #5a6255;






}




#board-info h1>a{


color: #5a6255;




}










.fa-star:before {






content: url("https://upload.tgd.kr/20181010/18515ea48242b0338d9d7b471bada776.png");






filter:drop-shadow(1px 1px 1px rgba(1,0,0,0));






position: relative;






top: 3px;





animation: test 0.1s linear infinite alternate;






}


/* 상단 배경화면 */




header .row {




background-repeat: no-repeat;




display: block;




height: 50px;




background-image: url(https://user-images.githubusercontent.com/44055669/48969758-956b1500-f046-11e8-98fd-6d06fffee115.png);




}






* {


-webkit-box-sizing: border-box;


-moz-box-sizing: border-box;


box-sizing: border-box;


border-radius: 5px;


}

/* 게시글 관련부분 */


#article-list>.article-list-row>.item>.list-title>.list-writer>span {


width: 120px !important;


}


#article-list #article-list-category {


border-top: 2px solid #5a6255;


background: white;


}


#article-list #article-list-category>a {


background: white;


}


#article-list>.article-list-row>.item>.list-header>span {


background-color: #5a6255;


}


#article-list>.article-list-row>.item>.list-title>small.comment-count {


color: #5a6255;


}


#article-list>.article-list-row>.item>.list-title>.list-writer.logged>span {


color: #5a6255;


}


.pagination>.active>a,


.pagination>.active>a:focus,


.pagination>.active>a:hover,


.pagination>.active>span,


.pagination>.active>span:focus,


.pagination>.active>span:hover {


background-color: #519D9E;


border-color: #5a6255;


}


.pagination>li>a:focus,


.pagination>li>a:hover,


.pagination>li>span:focus,


.pagination>li>span:hover {


color: #5a6255;


}


.pagination>li>a,


.pagination>li>span {


color: #5a6255;


}


#article-content-wrapper>.header {


border-top: 2px solid #5a6255;


}


#article-reply-area #reply-real-area .reply>.reply-header>.reply-writer.logged,


#article-reply-area #reply-best-area .reply>.reply-header>.reply-writer.logged {


color: #5a6255;


}


#article-info>h2 {


font-weight: bold;


}


#article-info>h2>span.category {


color: #5a6255 !important;


}


#article-reply-area>.header h5 {


color: #5a6255;


}


#main .menu-wrapper>a {


padding: 0.5em 1.4em 0.5em 0.7em !important;


}


a {


color: #5a6255;


}


span.a-badge i.fa.fa-info-circle {


color: #5a6255;


}




/* footer */


#article-list>.article-list-row {


border-right: none;


}


#article-list #article-list-menu {


box-sizing: border-box;


width: unset;


margin: 20px;


}


#article-list #boardSearchForm {


padding-bottom: 20px;


height: unset;


}


.btn-primary {


background: #5a6255 !important;


}


#board-info h1 > a.badge.badge-live {

position: absolute;

top: 21px;

left: 280px;

line-height: 20px;

font-size: 20px;

width: 84px;

height: 30px;

}

/*글쓰기*/

#article-list #article-list-menu > .btn.write {

color: #fff;

text-align: center;

transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

background-color: #5a6255;

border-color: #5a6255;

box-shadow: 0 3px 0 #5a6255;

border-radius: 6px 6px 6px 6px;

}

/* 인기글, 페이지 넘버, 글쓰기*/

#article-list #article-list-menu > .btn.best {

color: #f0953a;

border-color: #f0953a;

border-radius: 6px 6px 6px 6px;

}

.pagination > li > a, .pagination > li > span {

border: none;

}

.pagination > .active > a {

background-color: #5a6255;

border-color: #5a6225;

border-radius: 20px;

}

.pagination > li > a {

color: #f50707;

}

/*작성취소*/

.btn-default {

color: #fff;

text-align: center;

transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

background-color: #67d721;

border-color: #67d721;

border-radius: 6px 6px 6px 6px;

}

.btn-default:hover {

background-color: #f334b2;

}

.btn-default:active {

top: 3px;

outline: none;

box-shadow: none;

} /*설문 추가*/

.btn-info {

color: #fff;

text-align: center;

transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;

background-color: #d6bb31;

border-color: #d6bb31;

box-shadow: 0 3px 0 #75661a;

border-radius: 6px 6px 6px 6px;

}

.btn-info:active {

top: 3px;

outline: none;

box-shadow: none;

}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {

border-radius: 6px 6px 6px 6px;

}

.btn-default:active {

top: 3px;

outline: none;

box-shadow: none;

}

.btn.square {

border-radius: 6px 6px 6px 6px;;

}


.fa-search:before {

color: #fff;

}

#article-reply-area #reply-best-area .reply > .reply-content, #article-reply-area #reply-real-area .reply > .reply-content {

border-right: 2px solid #32f5fb;

border-left: 2px solid #32f5fb;

border-bottom: 2px solid #32f5fb;

border-radius: 0 0 10px 10px;

}

#article-reply-area #reply-best-area .reply, #article-reply-area #reply-real-area .reply {

border: none;