@charset "utf-8";
.drum .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.drum .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.drum#section { padding-top: 0; }
.drum .titleArea { position: relative; z-index: 100; }
.drum .drum_wrap { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 110%; height: 553px; top: 309px; }
.drum_wrap .bg_img { position: absolute; bottom: -193px; left: 50%; transform: translateX(-50%); width: 70%; }
.drum_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.drum .drum_act { position: absolute; width: 431px; top: 18px; left: 190px; display: none; }
.drum .drum_act.active { display: block; }
.drum .re_key_act { position: absolute; top: -1px; left: 463px; width: 577px; display: none; }
.drum .re_key_act.active { display: block; }
.drum_key { cursor: pointer; position: absolute; transition: all 0.1s ease; border-radius: 50%; background: transparent; }
.drum_key:hover { background: rgba(255, 255, 255, 0.15); }
.drum_key.active { background: rgba(255, 80, 80, 0.5); animation: drumHit 0.2s ease-out forwards; }
@keyframes drumHit { 0% { transform: scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key1 { top: -70px; left: 546px; width: 358px; height: 157px; transform: rotate(9deg); }
#drum_key1.drum_key .kb { transform: rotate(-9deg) translateX(-50%); }
#drum_key1.drum_key .note { transform: rotate(-9deg); }
#drum_key1.drum_key .note.on { position: absolute; top: 47px; left: 122px; }
#drum_key1.active { animation: drumHit1 0.2s ease-out forwards; }
@keyframes drumHit1 { 0% { transform: rotate(9deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(9deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key2 { top: 59px; left: 852px; width: 239px; height: 155px; transform: rotate(0deg); }
#drum_key2.drum_key .kb { transform: rotate(0deg) translateX(-50%); }
#drum_key2.drum_key .note { transform: rotate(0deg); position: absolute; top: 43px; left: 60px; }
#drum_key2.active { animation: drumHit2 0.2s ease-out forwards; }
@keyframes drumHit2 { 0% { transform: rotate(0deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(0deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key3 { top: 47px; left: 1104px; width: 251px; height: 166px; transform: rotate(0deg); }
#drum_key3 .note.on { position: absolute; top: 66px; left: 63px; }
#drum_key3.active { animation: drumHit3 0.2s ease-out forwards; }
@keyframes drumHit3 { 0% { transform: rotate(0deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(0deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key4 { top: -97px; left: 1353px; width: 410px; height: 195px; transform: rotate(-9deg); }
#drum_key4.drum_key .kb { transform: rotate(8deg) translateX(-50%); }
#drum_key4.drum_key .note { transform: rotate(9deg); position: absolute; top: 67px; left: 138px; }
#drum_key4.active { animation: drumHit4 0.2s ease-out forwards; }
@keyframes drumHit4 { 0% { transform: rotate(-9deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(-9deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key5 { top: 239px; left: 347px; width: 334px; height: 163px; border-radius: 50%; transform: rotate(-3deg);}
#drum_key5.active { animation: drumHit5 0.2s ease-out forwards; }
@keyframes drumHit5 { 0% { transform: rotate(-3deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(-3deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key6 { top: 278px; left: 663px; width: 122px; height: 112px; border-radius: 50%; }
#drum_key6.active { animation: drumHit6 0.2s ease-out forwards; }
@keyframes drumHit6 { 0% { transform: scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key7 { top: 350px; left: 618px; width: 312px; height: 217px; z-index: 10; transform: rotate(-2deg); }
#drum_key7.drum_key .kb { transform: translateX(-90%) rotate(1deg); }
#drum_key7.drum_key .note { margin-left: 22px; transform: rotate(2deg) }
#drum_key7.drum_key .note.on { position: absolute; top: 82px; left: 67px; }
#drum_key7.active { animation: drumHit7 0.2s ease-out forwards; }
@keyframes drumHit7 { 0% { transform: rotate(-2deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(-2deg) scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key8 { top: 323px; left: 888px; width: 422px; height: 374px; border-radius: 50%; }
#drum_key8 .note.on { position: absolute; top: 160px; left: 143px; }
#drum_key8.active { animation: drumHit8 0.2s ease-out forwards; }
@keyframes drumHit8 { 0% { transform: scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: scale(1); background: rgba(255, 80, 80, 0); } }
#drum_key9 { top: 353px; left: 1271px; width: 355px; height: 190px; z-index: 10; transform: rotate(1deg); }
#drum_key9.drum_key .kb { transform: rotate(-1deg) translateX(0%); }
#drum_key9.drum_key .note { transform: rotate(-1deg); }
#drum_key9.active { animation: drumHit9 0.2s ease-out forwards; }
@keyframes drumHit9 { 0% { transform: rotate(1deg) scale(0.95); background: rgba(255, 80, 80, 0.5); } 100% { transform: rotate(1deg) scale(1); background: rgba(255, 80, 80, 0); } }
.drum .note { font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 29px; text-align: center; padding-top: 28px; display: none; font-weight: 700; }
.drum .note.on { display: block; }
#drum_key5 .note { padding-top: 0; position: absolute; top: 75px; left: 125px; width: 150px; text-align: left; z-index: 10; transform: rotate(4deg);}
#drum_key6 .note { padding-top: 0; font-size: 35px; position: absolute; top: 40px; left: 213px; text-align: left; width: 183px; line-height: 35px; }
.drum .kb { color: #3f52ff; font-family: "KoPubWorld Dotum Bold"; display: none; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; justify-content: center; line-height: 50px; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; font-size: 32px; transition: all 0.1s ease; }
.drum .kb.on { display: flex; }
.drum .kb:hover { background-color: #f0f0f0; transform: translateX(-50%) scale(1.02); }
.drum .btnName:hover, .drum .btnKb:hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
#drum_key9 .note { margin-left: -20px; margin-top: 71px; }
#drum_key1 .kb { bottom: 84px; left: 18%; }
#drum_key2 .kb { bottom: 88px; left: 50%; }
#drum_key3 .kb { bottom: 90px; left: 120px; }
#drum_key4 .kb { bottom: 109px; left: 72%; }
#drum_key5 .kb { bottom: 111px; left: 212px; transform: rotate(2deg) translateX(-50%); }
#drum_key6 .kb { bottom: 35px; left: 270px; }
#drum_key7 .kb { bottom: 117px; left: 57%; }
#drum_key8 .kb { bottom: 203px; width: 180px; border-radius: 25px; }
#drum_key9 .kb { bottom: 90px; left: 39%; }
.kb2 { position: absolute; font-size: 30px; margin-left: 7px; text-shadow: -2px -2px 0 #87CEEB, 2px -2px 0 #87CEEB, -2px 2px 0 #87CEEB, 2px 2px 0 #87CEEB, -2px 0 0 #87CEEB, 2px 0 0 #87CEEB, 0 -2px 0 #87CEEB, 0 2px 0 #87CEEB; width: 130px; display: none; color: #87CEEB; font-family: 'NanumSquareNeo-dEb'; }
.kb2.on { display: block; }
#drum_key5 .kb2 { top: 69px; left: -143px; }
#drum_key6 .kb2 { top: 62px; left: 127px; }