@charset "euc-kr";
@import url("basic.css");
@import url("layout.css");

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}


.img-button { width: 200px; height: 200px; margin: 10px 65px 10px 65px; border:none; cursor : pointer;}
	.img-button::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
	.img-button2 {width: 200px; height: 200px; margin:10px 65px 10px 65px;border:none; cursor : pointer;}
	.img-button2::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
	.img-button3 { width: 200px; height: 200px; margin:10px 65px 10px 65px; border:none; cursor : pointer;}
	.img-button3::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
	.img-button4 {width: 200px; height: 200px; margin:10px 65px 10px 65px; border:none; cursor : pointer;}
	.img-button4::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
	.img-button5 { width: 200px; height: 200px; margin:10px 65px 10px 65px; border:none; cursor : pointer; }
	.img-button5::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
	.img-button6 { width: 200px; height: 200px; margin:10px 65px 10px 65px; border:none; cursor : pointer;}
	.img-button6::before{background: url('/image/menu10/test/1.gif') no-repeat; content: ""; display: block;margin: 0 auto 5px;width: 150px; height: 150px;}
/* ÄÁÅ×ÀÌ³Ê ¼³Á¤ */

.container2 {display:flex;justify-content:center; flex-direction: row;}
.inner-container2 {display:flex;flex-direction: column;width: 200px;text-align:center;margin-top:50px}

/* ÄÁÅ×ÀÌ³Ê ¼³Á¤ */


/* ÅøÆÁ ±âº» ½ºÅ¸ÀÏ ¼³Á¤ ½ÃÀÛ */

.tooltip {
  position: relative;
  display: block;
  width: 321px; height: 200px;  border:none; cursor : pointer;  margin: 5px; 
  display:table-cell;
  vertical-align:middle;
}
.tooltip::before {
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 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 black;
}

/* ¿ÞÂÊ ÅøÆÁ ³¡ */

/* ¿À¸¥ÂÊ ÅøÆÁ ½ÃÀÛ */

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

.tooltip .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent black transparent transparent;
}

/* ¿À¸¥ÂÊ ÅøÆÁ ³¡ */

/* À§ÂÊ ÅøÆÁ ½ÃÀÛ */

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

.tooltip .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

/* ¾Æ·¡ÂÊ ÅøÆÁ ½ÃÀÛ */

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


.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  visibility: hidden;
}

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


.tooltip .tooltip-bottom2::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
    visibility: hidden;
}

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


.tooltip .tooltip-bottom3::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
    visibility: hidden;
}

/* ÄÁÅ×ÀÌ³Ê ¼³Á¤ */


/* ÅøÆÁ ±âº» ½ºÅ¸ÀÏ ¼³Á¤ ½ÃÀÛ */