/* body {
  font-size: 12px;
  color: #4c4c4c;
} */

.community-body {
  align-items: center;
}

/* div {
  display: block;
}

a {
  text-decoration: none;
} */

/* common */
.pd-10 {
  padding: 10px
}

.pd-left {
  padding-left: 10px
}

.bd-top {
  border-top: 1px solid #b1bfce;
}


.bd-b1 {
  border: 1px solid #b1bfce;
}

.write-box, .comment-box {
  position: relative;
  padding-bottom:0;
}

.story-box {
  padding-bottom: 40px;
}


#write-noti {
  padding: 10px;
  text-align: justify;
}

.community-container{
  width: 100%;
  text-align: left;
  margin-bottom: 100px;
}

.profile-img {
  border-radius: 50%;
  cursor: pointer;
}

.profile-image-comment-box {
  width: 40px;
  height: 40px;
  display:block;
  overflow:hidden;
  position:relative;
  /* padding: 5px; */
}

.profile-img-comment {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.content-box {
  clear: both;
  color: #333333;
  font-size: 14px;
  line-height: 22px;
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 30px;
}

.content-box-new{
  clear: both;
  color: #333333;
  font-size: 14px;
  line-height: 22px;
  width:100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 30px;
  height:180px;
}

.article-box, .write-box {
  border: 1px solid #b1bfce;
  position: relative;
}

/*
.article-box {
  min-height: 410px;
}*/

.write-box  {
  min-height: 300px;

}

.inner-comment-box {
  border-bottom: 1px solid #b1bfce;
  border-left: 1px solid #b1bfce;
  border-right: 1px solid #b1bfce;
  padding: 10px;
  position: relative;
  background-color: aliceblue;
}

.comment-write-box {
  border: 1px solid #b1bfce;
  border-top: 0;
  padding: 10px;
  position: relative;
}

.comment-context-box {
  padding-top:10px;
}



/* header {
  align-items: center;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  position: relative;
  margin: 0;
  padding: 0;
  display:flex;
  padding-right:50px;
} */

.hash_tag{
  border:1px solid #acacac;
  border-radius:30px;
  padding:3px;
}

.profile-image-box {
  width: 50px;
  height: 50px;
  display:block;
  overflow:hidden;
  position:relative;
  /* padding: 5px; */
}

/* span {
  vertical-align:baseline;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  display: inline-block;
} */

.profile-img {
  width: 100%;
  height: 100%;
}

.profile-text-box {
  margin-left: 12px;
}

.header-right {
  right: 20px;
  top:30px;
  height: 60px;
  position: absolute;
}
.header-state {
  right: 5px;
  top: 10px;
  height: 60px;
  position: absolute;
}

.state{
  border:1px solid #009ea1;
  background-color:white;
  width:80px;
  border-radius:8px !important;
  color:#009ea1;
  font-size:11px;
  text-align: center;
  
}

.state2{
  border:1px solid #f06560;
  background-color:white;
  width:80px;
  border-radius:8px !important;
  color:#f06560;
  font-size:11px;
  text-align: center;
}

.state3{
  border:1px solid #e5ae15;
  background-color:white;
  width:80px;
  border-radius:8px !important;
  color:#e5ae15;
  font-size:11px;
  text-align: center;
}

.header-right button {
  min-height: 18px;
  min-width: 40px;
  background: 0 0;
  border: 0px;
}

.more {
  height: 20px;
  width: 20px;
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  /* background-image: url("../images/btn_category_open.png"); */
  /* background-repeat: no-repeat; */
  /* background-size: 20px 20px; */
  /* vertical-align: super; */
  color:#4c4c4c;
  font-size: 20px;
}

.more-list {
  width: 80px;
  height: 50px;
  background-color: #009ea1;
  color:white;
  right: 20px;
  top: 60px;
  height: 60px;
  position: absolute;
  border-radius: 5px; 
}

.reply-icon {
  height: 20px;
  width: 20px;
  background-image: url("../images/reple-icon.jpg");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  vertical-align: bottom;
}

.column {
  display: inline-block;
  margin-right:16px;
}

.action-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: white;
  display: flex;
  padding-top:10px;
}


.write-action-box {
  padding: 5px;
  position: absolute;
  bottom: 10px;
  left: 0;
}
.write-action-box-new{
  padding: 5px;
  bottom: 10px;
  left: 0;
}
.recommend-hashtag-box{
  padding: 5px 0px 1px 0px;
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 34px;
  line-height: 30px;
  width: 100%;
}

.recommend-hashtag-box-new{
  padding: 5px 0px 1px 0px;
  bottom: 0px;
  left: 0;
  line-height: 30px;
  width: 100%;
}

.attach-url-box {
  padding: 5px 0px 1px 0px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: #ededed;
  height: 34px;
  line-height: 30px;
  width: 100%;
}


.attach-url-box-new {
  padding: 5px 0px 1px 0px;
  bottom: 0px;
  left: 0;
  background-color: #ededed;
  height: 34px;
  line-height: 30px;
  width: 100%;
}

.attach-url-box_temp {
  padding: 5px 0px 1px 0px;
  bottom: 0px;
  left: 0;
  background-color: #ededed;
  height: 34px;
  line-height: 30px;
  width: 100%;
}

.attach-url-box span {
  padding: 0 3px;
  font-size: 12px;
}

.attach-url-box a {
  padding-left:10px;
  font-size: 12px;
  text-decoration: underline !important;
}

  #sns-input {
    border-radius: 5px;
    height: 25px;
    max-width: 280px;
    vertical-align: baseline;
    padding-left: 10px;
    font-size: 12px;
  }

  #hashtag{
    border-radius: 5px;
    height: 25px;
    vertical-align: baseline;
    font-size: 12px;
    width:95%;
  }


@media only screen and (max-width: 369px) {
  #sns-input {
    width: 52%;
  }
}

@media only screen and (min-width: 370px) {
  #sns-input {
    width: 59%;
  }
}

/* 메인화면 시작 */

/* 헤더 */

#filter-box {
  padding: 10px;
  text-align: center;
  display: none;
}

#filter-box-inner {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

#filter-box button {
  width: 20%;
  min-height: 40px;
  margin: 0 5px;
  background: 0;
  border: 1px solid gray;
  font-weight: bold;
  font-size:12px;
}

/* 메인화면 끝 */


/* 글 작성하기 */
.write-container, .comment-container {
  padding :10px;
}
.comment-container {
  padding-top: 0;
}

.write-submit, .write-end {
  color: white;
  background-color: #009ea1;
  min-width: 80px;
  min-height:30px;
  border: 0;
  border-radius: 5px;
}

.write-submit2{
  color: white;
  background-color: #009ea1;
  min-width: 80px;
  min-height:30px;
  border: 0;
  border-radius: 5px;
}

.submit-box {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.submit-box-new{
  text-align: right;
  padding-bottom:10px;
  bottom: 10px;
  right: 10px;
}

.cancel-submit {
  color: white;
  background-color: #009ea1;
  min-width: 80px;
  min-height:30px;
  border: 0;
  border-radius: 5px;
}

.cancel-box {
  position: absolute;
  bottom: 10px;
  right: 95px;
}


.submit-photo-box {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.photo-icon {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon2 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon3 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon4 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon5 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon6 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}
.photo-icon7 {
  height: 27px;
  width: 37px;
  background-image: url("../images/photo-icon.jpg");
  background-repeat: no-repeat;
  background-size: 37px 27px;
  vertical-align: middle;
}

.write-line {
  padding-left: 0;
  width: 100%;
  position: absolute;
  left:0;
}
.write-line-new {
  padding-left: 0;
  width: 100%;
  /* position: absolute; */
  left:0;
}

.write-line_temp {
  padding-left: 0;
  width: 100%;
  left:0;
}

/* .b-80 {
  bottom: 80px;
}

.b-40 {
  bottom: 40px;
} */

.b-0 {
  bottom: 0px;
}

.line-gray-80 {
  border-bottom: 1px solid #b1bfce;
  width:95%;
  margin: 0 auto;
}

.line-gray-80-new {
  width:95%;
  margin: 0 auto;
}

.textarea-replace {
    position: relative;
    width: 90%;
    left: 50%;
    top: 10px;
    transform: translate(-50%, 0);
    padding: 5px 5px;
    min-height: 20px;
    font-size: 14px;
    color: #414141;
    /* border: 1px solid #d2d2d2; */
    border-radius: 5px;
    white-space: pre-line;
    /* max-height: 100px; 
    overflow-y: scroll;*/
    border-bottom:1px solid #eaeaea;
}

.textarea-replace3 {
  position: absolute;
  width: 90%;
  left: 50%;
  top: 10px;
  transform: translate(-50%, 0);
  padding: 5px 5px;
  min-height: 20px;
  font-size: 14px;
  color: #414141;
  /* border: 1px solid #d2d2d2; */
  border-radius: 5px;
  white-space: pre-line;
  max-height: 100px;
  overflow-y: scroll;
  border-bottom:1px solid #eaeaea;
}

.textarea-replace2 {
  position: relative;
  
  /* width: 90%; */
  padding-left: 10px;
  /* border-left: 1px solid #b1bfce;
  border-right: 1px solid #b1bfce; */
  
  min-height: 210px;
  /* left: 50%;
  top: 40px;
  transform: translate(-50%, 0);
  padding: 5px 5px;  
  border-radius: 5px;
  max-height: 100px;
   */
  font-size: 14px;
  color: #414141;
  /* border: 1px solid #d2d2d2; */
  
  white-space: pre-line;  
  overflow-y: scroll;

}
/* 
.textarea-replace2::placeholder{
    color:#CCC;    
}
.textarea-replace2::-webkit-input-placeholder{
    color:#CCC;    
}
.textarea-replace2::-ms-input-placeholder{
    color:#CCC;    
} */

.image-box {
    display: flex;
    /* height: 200px; */
    width: 100%;
    overflow: hidden;
    position: relative;
}


.more-button{
  z-index:10;
}

.more-list {
  display: none;
  z-index: 1;
}

.more-list ul li{
  padding: 5px;
  text-align: center;
}

.write-comment-input {
  width: 80%;
  border-radius: 5px !important;
  padding: 3px;
  border: 1px solid #ededed;
  height: 28px;
}


.comment-more {
  position: absolute;
  top: 10px;
  right: 10px;
}

#preview-img {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 0px;
  left: 10px;
}

.preview-box {
  position: absolute;
  bottom: 70px;
}



#load-posting-btn {
  position: relative;
  width:94%;
  height: 40px;
  background-color: #009ea1;
  color:white;
  text-align:center;
  margin: 0 auto;
  margin-top:20px;
  line-height: 40px;
  vertical-align: middle;
  margin-bottom: 20px;
  display: none;
}

.comment-write-input {
  border: 1px solid #009ea1;
  background-color: #009ea1;
  width: 50px;
  height: 35px;
  border-radius: 5px !important; 
  color: #fff;
  font-weight:bold;
}

.size_small {
  position: absolute;
  width: 280px;
  height: auto;
  left: 6px;
  bottom: 90px;
  padding-bottom: 5px;
  background-color: white;
}

#community-login-box {
  width:100%;
  padding: 20px 0;
}
#community-login-btn{
  width: 80%;
  max-width:400px;
  height: 50px;
  background-color: #009ea1;
  color: white;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  margin:0 auto;
  font-weight: bold;
}

#community-login-btn a{
  color: white;
  display: block;
  width: 100%;
  height: 100%;
}

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: #CCC;
}

.rotate90 {
    /* -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg); */
    transform: rotate(90deg);
  transform-origin:  27mm;
}

.content-image {
  width:100%;
  height:auto;
  /* max-height:200px; */
  bottom: 0px;
  left: 0px;
}

.share-icon {
  height: 20px;
  width: 20px;
  background-image: url("../images/share.JPG");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  vertical-align: middle;
}

#top_image {
  width: 100%;
  height: auto;
}