/* nav */
#nav{
  position: fixed;
  right: 3%;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 999999;
} 
#nav ul{
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}
#nav a{
  cursor: pointer;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  background-color: rgba(194, 194, 194, .5);
  border-radius: 50%;
  display: block;
}
#nav a.active{
  background-color: #d7ab56;
}

/* left_fix */
.left_fix{
  position: fixed;
  z-index: 99999;
  left: 5%;
  bottom: 5%;
}
.left_fix ul{
  gap: 15px 0;
}
.left_fix li{
  background-color: #f8df00;
  border-radius: 50px;
  padding: 22px 32px;
  gap: 0 .5vw;
}

/* bottom_fix */
.bottom_fix{
  position: fixed;
  bottom: 3%;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 99999;
  background-color: #6495ed; 
  border-radius: 10px;
  padding: 1vw 3.5vw;
}
.b_f_img{
  position: absolute;
  right: 4%;
  top: -30%;
  width: 3vw;
}
.b_f_img img{
  width: 100%;
}
 
/* top_btn */
.top_btn{
  position: fixed;
  right: 3%;
  z-index: 999999;
  bottom: 150px;
  background-color: #d7ab56;
  width: 65px;
  height: 65px;
  opacity: 0;
} 

/* mobile */
@media screen and (max-width: 767px){ 
  /* nav */
  #nav{
    display: none;
  }

  /* left_fix */
  .left_fix ul {
    gap: 10px 0;
  }
  .left_fix li{
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    width: 10vw;
    height: 10vw;
  }
  .left_fix .icons{
    width: 65%;
  }
  .left_fix .icons img{
    width: 100%;
  }
  .left_fix p{
    display: none;
  }

  /* bottom_fix */
  .b_f_img{
    display: none;
  }

  /* top_btn */
  .top_btn{
    width: 35px;
    height: 35px;
  }

}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px){
  /* nav */
  #nav{
    display: none;
  }

  /* left_fix */
  .left_fix li{
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    width: 7vw;
    height: 7vw;
  }
  .left_fix .icons{
    width: 65%;
  }
  .left_fix .icons img{
    width: 100%;
  }
  .left_fix p{
    display: none;
  }

  /* bottom_fix */
  .b_f_img{
    display: none;
  }

  /* top_btn */
  .top_btn{
    width: 45px;
    height: 45px;
  }
    
}