.tooltip{position: relative;cursor: pointer;display:inline-block;_display:block;text-decoration: none;color: #222;outline: none;}
.tooltip span{
  visibility: hidden;
  position: absolute; 
  bottom: 25px;
  left: 60%;
  z-index: 999;
  width: 200px;
  margin-left: -120px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
.tooltip:hover{ /* IE6 fix */}
.tooltip:hover span{visibility: visible;}
.tooltip span:before,
.tooltip span:after{content: "";position: absolute;z-index: 1000;bottom: -7px;left: 10%;margin-left: -8px;border-top: 8px solid #ddd;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 0;}
.tooltip span:before{border-top-color: #ccc;  bottom: -8px;}

/* Yellow */
.yellow-tooltip span{border-color: #e1ca82;background-color: #ffeaa6;}
.yellow-tooltip span:after{border-top-color: #ffeaa6;}
.yellow-tooltip span:before{border-top-color: #e1ca82;}

/* Navy */
.navy-tooltip span{border-color: #fff;text-shadow: 0 1px 0 #000;border-color: #161a1f;background-color: #1e2227;}
.navy-tooltip span:after{border-top-color: #1e2227;}
.navy-tooltip span:before{border-top-color: #161a1f;}

/* green */
.green-tooltip span {border-color: #95c64e;background-color: #e4ffc0;}
.green-tooltip span:after{border-top-color: #e4ffc0;}
.green-tooltip span:before{border-top-color: #95c64e;}

/* Pink */
.pink-tooltip span{border-color: #ce4378;background-color: #ea4c88;}
.pink-tooltip span:after{border-top-color: #ea4c88;}
.pink-tooltip span:before{border-top-color: #ce4378;}


/* Blue */
.blue-tooltip span{border-color: #fff;border-color: #161a1f;background-color: #f9fcff;}
.blue-tooltip span:after{border-top-color: #f9fcff;}
.blue-tooltip span:before{border-top-color: #161a1f;}


/* Blue1 */
.blue1-tooltip span{border-color: #fff;border-color: #B7DBFF;background-color: #D5EAFF;}
.blue1-tooltip span:after{border-top-color: #f9fcff;}
.blue1-tooltip span:before{border-top-color: #161a1f;}


/* 툴팁 방향 설정 끝 */
.tooltip_N {position: relative;}
.tooltip_N .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;margin-left: -60px;opacity: 0;transition: opacity 1s;}
.tooltip_N:hover .tooltiptext {visibility: visible;opacity: 1;}
.tooltip_N .tooltip-btm{top: 150%;left: 50%;}
.tooltip_N .tooltip-btm::after {content: " ";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;}

.tooltip_N .tooltip-top{bottom: 150%;left: 50%;}
.tooltip_N .tooltip-top::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparent transparent;}
/* 툴팁 방향 설정 끝 */

/* 반응형 x 스크롤 해지 */
.tooltipBox_rightIn .tooltip span.toolMob{left:100px;}
@media all and (max-width: 1600px) {
	.tooltipBox_rightIn .tooltip span.toolMob{left:-115px;}
	.tooltipBox_rightIn .tooltip span:before,.tooltip span:after{left: 90%;border-top: 8px solid #ddd;}
	.tooltipBox_rightIn .blue-tooltip span:after{border-top-color: #f9fcff;}
	.tooltipBox_rightIn .blue-tooltip span:before{border-top-color: #161a1f;}
}