@charset "utf-8";

	
/* floating_btn_box */	
.floating_btn_box {
  position: fixed;
  right: 4rem;
  bottom: 4rem;
  z-index: 999999999999999;
}

.floating_btn_box .contents-container {
  max-width: 100%;
}

.floating_btn_box .menu-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1.2rem);
}

.floating_btn_box .menu-list li+li {
  margin-top: 0.8rem;
}

.floating_btn_box .menu-list a,
.floating_btn_box .menu-list button {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 5.6rem;
  height: 5.6rem;
  color: var(--black);
  background: var(--white);
  border-radius: 10rem;
  box-shadow: 0 0.4rem 2rem 0 rgba(var(--black-rgb), 0.1);
  transition: width 0.3s, padding 0.3s, gap 0.3s 0.3s;
}

.floating_btn_box .menu-list a:hover {
  width: 100%;
  padding: 1.5rem 1.8rem;
  gap: 0.8rem;
}

.floating_btn_box .menu-list a:hover,
.floating_btn_box .menu-list button:hover {
  background: var(--primary);
}

.floating_btn_box .menu-list a:hover span {
  width: auto;
  opacity: 1;
  visibility: visible;
  transition: 0.2s;
}

.floating_btn_box .menu-list span {
  width: 0;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  font-weight: var(--fw-medium);
  color: var(--white);
}

.floating_btn_box .menu-list a i,
.floating_btn_box .menu-list button i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  transition: color 0.3s;
}

.floating_btn_box .menu-list a:hover i,
.floating_btn_box .menu-list button:hover i {
  color: var(--white);
}

@media (max-width: 992px) {
  .floating_btn_box {
    right: 1.6rem;
    bottom: 1.6rem;
  }

  .floating_btn_box .menu-list a,
  .floating_btn_box .menu-list button {
    width: 4rem;
    height: 4rem;
  }

  .floating_btn_box .menu-list a i,
  .floating_btn_box .menu-list button i {
    width: 1.6rem;
    height: 1.6rem;
  }

  .floating_btn_box .menu-list a:hover,
  .floating_btn_box .menu-list button:hover {
    gap: 0.4rem;
    padding: 0.8rem 1.2rem;
  }

  .floating_btn_box .menu-list a i::before,
  .floating_btn_box .menu-list button i::before {
    font-size: 1.6rem;
  }

  .floating_btn_box .menu-list li+li {
    margin-top: 0.4rem;
  }
}	
	
	
	
	
	
	
