.cmt-area{border-bottom:solid 1px #b3b3b3;margin-bottom:10px;}

/* Used in iframe method only */
.bskr-input { font-size:12px; }
.pos-2 {position:relative; top:-2px}

/* BSKR comment */
#cmt-top {
	width: 100%;
	height:45px;
	overflow:hidden;
	margin-bottom: 0px;
    border-bottom:1px solid #dfdfdf; 
}
#cmt-top .left {float:left;line-height:35px;font-size:12px;}
#cmt-top .right {float:right;position:relative;top:2px;font-size:12px;}


/* BSKR clist */
#cmt-list {margin-bottom:10px;}
#cmt-list .head {margin:5px 0;}
#cmt-list .list {
	position: relative;
	padding: 0 0 0 0;
	/*padding: 15px;*/
	background-color: #ffffff;
	/*
	border-radius: 4px;
	*/
}
#cmt-list .list .item {width:100%;padding-left:15px;padding-right:15px;overflow:hidden;font-size:12px;}
#cmt-list .list .item {border-bottom:1px solid #dfdfdf; padding-top:10px;padding-bottom:15px;}
#cmt-list .list .item .avatar {width:50px; height:50px;}
#cmt-list .list .item .header {padding-top:5px;}
#cmt-list .list .item .header .info {float:left; color:#888;}
#cmt-list .list .item .header .info .name {font-weight:bold;}
#cmt-list .list .item .header .info .rdate2 {color: #F07090;}
#cmt-list .list .item .header .info .new {color:#FC6138; font-size:90%;}
#cmt-list .list .item .header .btns {float:right;}
#cmt-list .list .item .content {padding-top:10px;font-weight:normal;color:#666;}
#cmt-list .list .item .full-width {display:table; table-layout:fixed; width:100%;}
#cmt-list .list .item .hidden-content { margin-bottom: 10px; color: #F07090;}
#cmt-list .list .item .cmt-subject { margin-bottom: 5px;overflow:hidden;height:18px;font-weight:bold;color:#666;}
#cmt-list .list .none {padding-top:15px;text-align:center;font-size:12px;}

#cmt-list .cmt-reply-box {width:100%;height:30px;overflow:hidden;margin-top:20px;font-size:12px;}
#cmt-list .cmt-reply {padding:10px;margin-top:15px;border-top:#dfdfdf solid 1px; background:rgb(250, 250, 250); display:none;}
#cmt-list .cmt-reply .header {padding-top:5px;}
#cmt-list .cmt-reply .header .info {float:left; color:#888;}
#cmt-list .cmt-reply .header .info .name {font-weight:bold;}
#cmt-list .cmt-reply .header .info .rdate2 {color: #F07090;}
#cmt-list .cmt-reply .header .info .new {color:#FC6138; font-size:90%;}
#cmt-list .cmt-reply .header .btns {float:right;}
#cmt-list .cmt-reply .content {padding-top:10px;font-weight:normal;color:#666;}
#cmt-list .cmt-reply .full-width {display:table; table-layout:fixed; width:100%;}


#cmt-list .list .oline {margin-left:30px;}
#cmt-list .list .oline-first {padding-left:30px;}

#cmt-list .list .owrite {padding-left:30px; width:100%; display:none;}
#cmt-list .list .owrite .bottom {width:100%; display:table; margin-top:10px;}
#cmt-list .list .owrite .bottom .left {display:table-cell;}
#cmt-list .list .owrite .bottom .left label {font-weight:normal; color:#666666;}
#cmt-list .list .owrite .bottom .left label input[type="checkbox"] {position:relative; top:2px;}
#cmt-list .list .owrite .bottom .right {display:table-cell; text-align:right;}

@media (max-width: 768px) { 
	#cmt-list .list .item .header {padding-top:0;}
}

#cmt-list .cwrite {padding: 20px 10px 10px; border:#dfdfdf solid 1px; background:rgb(250, 250, 250); margin-bottom:10px; display:none;font-size:12px;}
#cmt-list .cwrite.inner {padding:0; border:0; padding-top:10px; background:rgb(250, 250, 250); display:none;}
#cmt-list .cwrite .top {font-weight:bold;font-size:12px;}
#cmt-list .cwrite .top span {font-weight:normal; font-family:dotum;font-size:12px; color:#888; margin-left:5px;}
#cmt-list .cwrite .denied {font-weight:bold; padding-bottom:10px; color:#888; }
#cmt-list .cwrite .middle {margin: 5px 0 10px;}
#cmt-list .cwrite .middle .nomember {margin-top:10px; margin-bottom:10px;}
#cmt-list .cwrite .bottom {width:100%; display:table;font-size:12px;}
#cmt-list .cwrite .bottom .left {float:left;display:table-cell;}
#cmt-list .cwrite .bottom .left label {float:left;font-weight:normal; color:#666666;}
#cmt-list .cwrite .bottom .left label input[type="checkbox"] {position:relative; top:2px;}
#cmt-list .cwrite .bottom .right {float:right;display:table-cell;}

/* BSKR cwrite */
#cmt-write .cwrite {padding: 20px 10px 10px; border:#dfdfdf solid 1px; background:rgb(250, 250, 250); margin-bottom:10px; display:none;font-size:12px;}
#cmt-write .cwrite.inner {padding:0; border:0; padding-top:10px; background:rgb(250, 250, 250); display:none;}
#cmt-write .cwrite .top {font-weight:bold;font-size:12px;}
#cmt-write .cwrite .top span {font-weight:normal; font-family:dotum;font-size:12px; color:#888; margin-left:5px;}
#cmt-write .cwrite .denied {font-weight:bold; padding-bottom:10px; color:#888; }
#cmt-write .cwrite .middle {margin: 5px 0 10px;}
#cmt-write .cwrite .middle .nomember {margin-top:10px; margin-bottom:10px;}
#cmt-write .cwrite .bottom {width:100%; display:table;font-size:12px;}
#cmt-write .cwrite .bottom .left {float:left;display:table-cell;}
#cmt-write .cwrite .bottom .left label {float:left;font-weight:normal; color:#666666;}
#cmt-write .cwrite .bottom .left label input[type="checkbox"] {position:relative; top:2px;}
#cmt-write .cwrite .bottom .right {float:right;display:table-cell;}

/* BSKR cpage */
.pagebox01 {margin: 15px 0 0 0; text-align:center;}
.pagebox01 .selected,.pagebox .notselected:hover {padding:0 4px 0 4px;font-family:arial;font-weight:bold;color:#FF5B01;}
.pagebox01 .notselected {padding:0 4px 0 4px;text-decoration:none;font-family:arial;color:#222;font-weight:bold;}
.pagebox01 img {padding:0 4px 0 4px;margin-bottom:-2px;}

.rb-divider {float: left;color: #999;position:relative;top:5px;padding: 5px;}
.rb-floatleft  {float:left;}

.rb-width-60 {width:60px;}
.rb-width-100 {width:100px;}
.rb-width-300 {max-width:300px;}


/*animate*/

.bubble{
  animation: animateElement linear 1s;
  -webkit-animation: animateElement linear 1s; /* Chrome and Safari */
  animation-iteration-count: 1;
 }

@keyframes animateElement{
  0% {
    opacity:0;
    transform:  translate(0px,10px);
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px);
  }
}

.colorchange {
   animation: colorchange 1s; /* animation-name followed by duration in seconds*/
   /* you could also use milliseconds (ms) or something like 2.5s */
   -webkit-animation: colorchange 1s; /* Chrome and Safari */
  animation-iteration-count: 1;
}

@keyframes colorchange
{
 0%   {background: #98bf21;}
 100% {background: #fafafa;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
 0%   {background: #98bf21;}
 100% {background: #fafafa;}
}