body{
  background:#fafafa;

}


/* Header  */
#header{
  background-color: #f0acb9 !important;
  width : 100%;
  position: absolute;
  left:0;
  top:0;
  z-index: 999;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#photo_description{
  background-color: #ffdae0 !important;
  padding: 30px;
  display: flex;
}

#header.on{
  position: fixed;
}

#peças{
  height: 40px;
  width: 200px;
  margin-left: 170px;
  border-radius: 20px;
  border: none;
  background-color: #f0acb9;
  color: #fff;
  
}

#header .inner{
  width: 975px;
  height: 77px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 1s;
}

#header.on .inner{
  height: 52px;
}

#header .inner .logo>a{
  color: transparent;
}

#header .inner .logo div{
  vertical-align: middle;
}

#hashtags{
  border-radius: 30px;
  border-color: #ffa666;
  background-color: #f2bb94;
  width: 130px;
  height: 42px;
}

#header .inner .logo .sprite_insta_icon{
  position: relative;
  margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon::after{
  content: "";
  width: 1px;
  height: 28px;
  background: #000;
  position: absolute;
  right: -15px;
  top:-4px;
  transition: all .5s;
}

#header.on .inner .logo .sprite_insta_icon::after{
  opacity: 0;
}

#header .inner .logo div:nth-child(2){
  transform: translateY(2px);
  transition: all .5s;
}
#header.on .inner .logo div:nth-child(2){
  opacity: 0;
}


#header .search_box{
  position: relative;
}

#search-field{
  width:185px;
  height: 28px;
  background: #ffdedeec;
  border: none;
  border-radius: 20px;
  padding: 3px 30px;
  color: #999;
  font-weight: 400;
  text-align: left;
}
#search-field::placeholder{
  font-size: 0;
}
/* #search-field:focus::placeholder{
  font-size: 24px;
} */

#header .search_box .fake_field{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  /* '검색'이라는 글자가 포인터로 인식되는 것을 막기 위함 */
  pointer-events: none;
}
#search-field:focus ~ .fake_field > span:nth-child(1){
  transform: translateX(-105px);
}

#search-field:focus ~ .fake_field > span:nth-child(2){
  display: none;
}

#header .right_icons{
  width: 132px;
  display: flex;
  justify-content: space-between;
}

/* hidden menu */
.hidden_menu{
  width: 600px;
  position: absolute;
  left: 50%;
  top:100px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 3px;
  display: none;
}

.hidden_menu .scroll_inner{
  height: 100px;
  width:auto;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.hidden_menu .scroll_inner .user{
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right:15px;
}

.hidden_menu .scroll_inner .user .id{
  font-size: 12px;
  color:#262626;
}

.hidden_menu .thumb_img{
  width:56px;
  height:56px;
  border-radius: 50%;
  overflow: hidden;

}

.hidden_menu .thumb_img img{
  width: 100%;
  height: 100%;
}


/* Main container */

#main_container{

  padding-top: 130px;
  display: flex;
  justify-content: center;
}

#main_container .inner{
  /* width: 935px; */
  position: relative;
}

.user_name{
  
  align-items: center;
  justify-content: center;
  display: flex;

}

.contents{
  max-width: 614px;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 3px;
  margin-bottom: 60px;
}

.contents .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.contents .top .user_container{
  display: flex;
}

.contents .top .profile_img{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.contents .top .profile_img img{
  width: 100%;
  height: 100%;
}

.contents .img_section{
  overflow: hidden;
}

.contents .img_section img{
  width: 100%;
}
/* bottom icons */
.contents .bottom_icons{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffdae0 !important;

}

.contents .bottom_icons .left_icons{
  display: flex;
}
.contents .bottom_icons .left_icons>div{
  margin-right: 10px;
  cursor: pointer;
}
.contents .bottom_icons .right_icons>div{
  cursor: pointer;
}


/* likes */
.contents .likes{
  padding: 5px 20px;
  color:#262626;
}

/* comment container */
.contents .comment_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
}

.contents .comment_container .comment{
  display: flex;
  font-size: 14px;

}

.nick_name_m_text{
  font-size: 14px;
  font-weight: bold;
}

.contents .comment_container .comment .nick_name{
  margin-right: 10px;
}

.contents .timer{
  font-size: 10px;
  letter-spacing: 0.2px;
  color: #999;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  padding: 10px 20px;
}

/* comment field */

.contents .comment_field{
  min-height: 56px;
  padding: 0 20px;
  position: relative;
}

.contents .comment_field input{
  width: 100%;
  height: 56px;
  border: none;
  outline: none;
  background: transparent;
}

.contents .comment_field input:focus ~ .upload_btn{
  pointer-events: initial;
  opacity: 1;
}

.contents .comment_field .upload_btn{
  color: #3897f0;
  position: absolute;
  right: 20px;
  top:50%;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: none;
  opacity: 0.6;
}

/* side box */
.side_box{
  width: 293px;
  position: absolute;
  right: 0;
  top:0;
}
.side_box.on{
  position: fixed;
  top:80px;
}

.side_box .profile_thumb{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.side_box .profile_thumb img{
  width: 100%;
  height: 100%;
}

.side_box .user_profile{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #262626;
}
.side_box .detail .id{
  margin-bottom: 5px;
}

.side_box .detail .ko_name{
  font-size: 12px;
  color: #999;
}

.side_box > article {
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 3px;
  margin-bottom: 20px;
  width: 291px;
  font-size: 14px;
  color: #262626;
  font-weight: bold;
  background: #fff;
}

.side_box > article > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  color: #999;
}

.side_box > article > header .more{
  font-size: 12px;
  color: #262626;
  cursor: pointer;
}

/* scroll inner */

.side_box .scroll_inner{
  height: 182px;
  overflow-x: hidden;
  overflow-y: auto;
}

.thumb_user{
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
.thumb_user .profile_thumb{
  width: 34px;
  height: 34px;
}

.thumb_user .time{
  font-size: 10px;
  letter-spacing: 0.2px;
  color: #999;
}


@media screen and (max-width:1000px){

  #header .inner{
    width:97.5%;
  }

  #main_container{
    padding-top:220px;
  }

  #main_container .inner{
    width:93.5%;
  }

  .contents_box{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .side_box{
    display: none;
  }
  .hidden_menu{
    display: block;
  }


}

@media screen and (max-width: 650px){
  #header .search_box{
    display: none;
  }
}