@charset "utf-8";

.rhythum#section {  }
.rhythum .rhythum_wrap { position: absolute; top: 252px; left: 50%; transform: translateX(-50%); width: 1871px; height: 706px; display: flex; margin: auto; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: space-between; }
.rhythum .rhythum_box { border-radius: 60px; width: 270px; height: 270px; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; margin: 0 auto 50px; cursor: pointer; position: relative; }
.rhythum .rhythum_box.active { animation: shake linear 0.35s; animation-iteration-count: infinite; background-image: linear-gradient(45deg, #44a5df, #d37cf7); }
.rhythum .rhythum_box.active .box_img_wrap { border: none; box-shadow: none; }
.rhythum .box_img_wrap { width: 250px; height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; border-radius: 50px; border: 4px solid #8c9eb3; background: #fff; overflow: hidden; box-shadow: 0px 5px 10px 0px #dddddd; }
.rhythum .box_img { width: 72%; display: block; margin: auto; }
.rhythum .box_txt { font-family: 'NanumSquareNeo-cBd'; font-size: 39px; position: absolute; width: 100%; text-align: center; bottom: -47px; }
@media (hover: hover) { .rhythum_box:hover { -webkit-transform: scale(1.01); -moz-transform: scale(1.01); transform: scale(1.01); } }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }
#rhythum_box2 .box_img { width: 50%; }
.rhythum .kb { font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translateX(-50%); display: none; top: 325px; }
.rhythum .kb.on { display: block; }
.rhythum .rhythum_box.active .box_img_wrap { background-color: #fffecd; }
.rhythum #rhythum_box1 .box_img { width: 199px; }
.rhythum #rhythum_box2 .box_img { width: 147px; }
.rhythum #rhythum_box4 .box_img { width: 147px; }
.rhythum #rhythum_box10 .box_img { width: 229px; transform: rotate(0deg); }
#rhythum_box3 .box_img_wrap .box_img { width: 155px; }
#rhythum_box8 .box_img { width: 63%; margin-top: 43px; }
#rhythum_box11 .box_img { width: 64%; }