/* 툴팁 기본 스타일 설정 시작 */

.tooltip {
  position: relative;
  display: block;
  line-height: 1.5;
}

.tooltip::before {content:'';position: absolute;top:-2.5rem;right:0;display:block;width:18px;height:18px;mask:url('../images/common/ico_info_yl.svg');background-color:var(--gray_60);}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color:var(--blue_90);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding:10px 0;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* 툴팁 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 화살표 기본 스타일 설정 시작 */

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

/* 툴팁 화살표 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 방향 설정 시작 */

/* 왼쪽 툴팁 시작 */

.tooltip .tooltip-left {
  top: -5px;
  right: 105%;
}

.tooltip .tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent var(--blue_90);
}

/* 왼쪽 툴팁 끝 */

/* 오른쪽 툴팁 시작 */

.tooltip .tooltip-right {
  top: -5px;
  left: 105%;
}

.tooltip .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent var(--blue_90) transparent transparent;
}

/* 오른쪽 툴팁 끝 */

/* 위쪽 툴팁 시작 */

.tooltip .tooltip-top {
  width: 130px;
  bottom: 60px;
  left: 0;
  margin-left: -14px;
  line-height:1.5;
  font-weight: 500;
  font-size: 1.4rem;
}

.tooltip .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color:var(--blue_90) transparent transparent transparent;
}

/* 아래쪽 툴팁 시작 */

.tooltip .tooltip-bottom {
  width: 120px;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}


.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent var(--blue_90) transparent;
}

/* 아래쪽 툴팁 시작 */

/* 툴팁 방향 설정 끝 */