@charset "utf-8";
/* 잘난체 */
@font-face {
  font-family: JalNan;
  src: url("./font/ygotjalnanfont.woff");
  font-display: font-display;
}
body {
  overflow: hidden;
}
#wrap {
  position: relative;
  width: 1280px;
  height: 720px;
  padding: 66px 188px 60px;
  background: url(./background.png) 0 0/ contain no-repeat;
}
.buttonList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 29px;
}
.button {
  width: 280px;
  height: 182px;
  cursor: pointer;
  position: relative;
}
.button.hover {
  animation: zoomOn 0.2s linear forwards;
  -webkit-animation: zoomOn 0.2s linear forwards;
  -ms-animation: zoomOn 0.2s linear forwards;
}
.button a {
  width: 100%;
  height: 100%;
}
button > span {
  font-family: JalNan;
  font-size: 23px;
  position: absolute;
  width: 100%;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
}
button > span.padLeft {
  padding-left: 90px;
}
button > span.padLeft.pl_2 {
  padding-left: 110px;
}
@-webkit-keyframes zoomOn {
  0% {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
  }
  100% {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari */
    transform: scale(1.05);
  }
}
@keyframes zoomOn {
  0% {
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
  }
  100% {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari */
    transform: scale(1.05);
  }
}
.buttonList > li:nth-child(1) .button { background: url(./tool_1.png) center/ contain no-repeat;}
.buttonList > li:nth-child(2) .button { background: url(./tool_2.png) center/ contain no-repeat;}
.buttonList > li:nth-child(3) .button { background: url(./tool_3.png) center/ contain no-repeat;}
.buttonList > li:nth-child(4) .button { background: url(./tool_4.png) center/ contain no-repeat;}
.buttonList > li:nth-child(5) .button { background: url(./tool_5.png) center/ contain no-repeat;}
.buttonList > li:nth-child(6) .button { background: url(./tool_6.png) center/ contain no-repeat;}
.buttonList > li:nth-child(7) .button { background: url(./tool_7.png) center/ contain no-repeat;}
.buttonList > li:nth-child(8) .button { background: url(./tool_8.png) center/ contain no-repeat;}
.buttonList > li:nth-child(9) .button { background: url(./tool_9.png) center/ contain no-repeat;}