::-webkit-scrollbar {
  display: none;
}
.d {
  display: flex;
}
.d_c {
  display: flex;
  flex-direction: column;
}
.d_r {
  display: flex;
  flex-direction: row;
}
.sc {
  width: 100vw;
  height: 100vh;
}
.mx-sc {
  max-width: 950px;
  min-width: 200px;
  animation-name: b-t;
  animation-duration: 450ms;
}
.mx-sc-post {
  max-width: 450px;
  min-width: 200px;
  animation-name: b-t;
  animation-duration: 450ms;
}

.s-img-post {
  height: 500px;
}
.none-img {
  background-color: rgb(238, 238, 238);
}
.radius {
  border-radius: 10px;
}
.radius-top {
  border-radius: 15px 15px 0px 0px;
}
.radius-bottom {
  border-radius: 0px 0px 15px 15px;
}
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 16px;
}
.f-18 {
  font-size: 18px;
}
.f-30 {
  font-size: 30px;
}
.f-20 {
  font-size: 20px;
}
.f-24 {
  font-size: 24px;
}
.text-t {
  color: #f79b00;
}
.radius-30 {
  border-radius: 30px;
}
.bg-blur-s {
  box-shadow: rgb(191 191 191 / 30%) 4px -1px 90px,
    rgb(126 126 126 / 22%) 63px 42px 9px;
}
.bg-t_g {
  background-color: #eee;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-2-5 {
  flex: 2.5;
}
.flex-3 {
  flex: 3;
}
.flex-3-5 {
  flex: 3.5;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-5-5 {
  flex: 5.5;
}
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.s-img {
  width: 50px;
  height: 50px;
}
input {
  outline: none;
}
.mx-main {
  max-width: 1500px;
  min-width: 400px;
}
.box-s {
  box-shadow: #b7b7b7b5 0px 0px 33px 2px;
}
.bg-img-l_r {
  background-image: url(./img/bg-img.jpg);
  background-size: cover;
  transition: transform 0.5s ease;
}
.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  
  border-bottom: 1px solid #7e757d;
}

.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}
.cover {
  background-size: cover;
}
.story {
  width: 120px;
  height: 190px;
}
.op-0 {
  opacity: 0;
}

.overflow-x {
  overflow-x: scroll;
}
.n_out_line {
  outline: none;
  border: none;
}
.form-div {
  max-width: 553px;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);

  color: gray;
  background-color: transparent;
}
.btn_t {
  transition: 200ms ease;
}
.l-0 {
  left: 0;
}
.l-1 {
  left: 1.5rem;
}
.l-2 {
  left: 3rem;
}
.l-3 {
  left: 4.5rem;
}
.r-0 {
  right: 0;
}
.s-img-post {
  height: 200px;
  width: 200px;
}
.c_m_t-s {
  top: 3.5%;
  left: 3.5%;
}
.n_g {
  width: 25px;
  height: 25px;
}
.bg-white-c_op {
  background-color: rgb(255 255 255 / 64%);
}
.new-line {
  word-wrap: break-word;
}
img {
  object-fit: cover;
}
.t-0 {
  top: 0;
}
.trand-box {
  height: 130px;
  transition: transform 0.5s ease;
}
.post-animation-z {
  transition: transform 0.5s ease;
}
.p-c_m_t {
  bottom: 0;
  left: 0;
}
.m_n_t-c {
  top: 42px;
  right: 40px;
}
.m_n_l-c {
  top: 35px;
  left: 40px;
}
.p-c_l_m {
  width: 100%;
  bottom: 0;
  left: 0;
  position: relative;
}
.p-c_l_m:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.75;
  background-image: linear-gradient(0deg, #000000 30%, #00000000);
  transition: opacity 0.35s ease-in-out;
}
.radius-c_list{
    border-radius: 50px;
}
.btn_list_post{
    transition: background-color 300ms ease;
}
.s-img-c_list{
    width: 45px;
    height: 45px;
}
.border-d-c{
  border-top: 0.1mm solid white;
  
}
.l-c_list {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
}
.p-c_l_m:hover:before {
  opacity: 1;
}
.c-btn {
  border: 1px solid #dc3545;
}
.bg-blur {
  backdrop-filter: blur(2px);
}
.co-btn {
  border: 1px solid #007bff;
}
.b-gradient {
  background-image: linear-gradient(0deg, #471ae8, #55527c);
}
.l-h-c-w {
  transition: background-color 0.35s;
}
.l-h-c-w:hover {
  background-color: white;
}
.out_box {
  animation-name: animation-box-out;
  animation-duration: 500ms;
}
.c-h-g {
  transition: color 0.1s;
}
.c-h-g:hover {
  color: green;
}
.h-h-g {
  transition: color 0.1s;
}
.h-h-g:hover {
  color: rgb(255, 0, 55);
}
.co-h-g {
  transition: color 0.1s;
}
.co-h-g:hover {
  color: rgb(0, 102, 255);
}
.z-index-3 {
  z-index: 3;
}
.s-img-post-c{
  height: 370px;
}
@media only screen and (max-width: 941px) {
  .M1 {
    display: none !important;
  }
}
@media only screen and (max-width: 1200px) {
  .M3 {
    display: none !important;
  }
}