@charset "utf-8";

.drum#section { }
.drum .titleArea { position: relative; z-index: 100; }
.drum .drum_wrap { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 110%; height: 553px; }
.drum_wrap .bg_img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; }
.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: 340px; left: 463px; width: 577px; display: none; }
.drum .re_key_act.active { display: block; }
.drum_key { cursor: pointer; position: absolute; border-radius: 50%; }
.drum_key.active { background: rgba(245, 139, 139, 0.5); }
#drum_key1 { top: -339px; left: 449px; width: 443px; height: 312px; transform: rotate(2deg); }
#drum_key1.drum_key .kb { transform: rotate(-2deg) translateX(-50%); }
#drum_key1.drum_key .note { transform: rotate(-2deg); }
#drum_key2 { top: -20px; left: 790px; width: 246px; height: 157px; transform: rotate(-4deg); }
#drum_key2.drum_key .kb { transform: rotate(4deg) translateX(-50%); }
#drum_key2.drum_key .note { transform: rotate(4deg); }
#drum_key3 { top: -20px; left: 1061px; width: 245px; height: 156px; transform: rotate(0deg); }
#drum_key4 { top: -304px; left: 1198px; width: 509px; height: 366px; transform: rotate(-2deg); }
#drum_key4.drum_key .kb { transform: rotate(2deg) translateX(-50%); }
#drum_key4.drum_key .note { transform: rotate(2deg); }
#drum_key5 { background: url(../images/06drum/drum01.png) no-repeat; top: -8px; left: 335px; width: 328px; height: 126px; border-radius: 0; background-position: left bottom; background-size: contain; border: none; }
#drum_key5.active { background-image: url(../images/06drum/drum01_on.png); }
#drum_key6.active { background-image: url(../images/06drum/drum02_on.png); }
#drum_key6 { background: url(../images/06drum/drum02.png) no-repeat; top: 116px; left: 330px; width: 340px; height: 140px; border-radius: 0; background-position: left top; background-size: contain; border: none; }
#drum_key7 { top: 283px; left: 601px; width: 272px; height: 196px; z-index: 10; transform: rotate(-10deg); }
#drum_key7.drum_key .kb { transform: rotate(10deg) translateX(-90%); }
#drum_key7.drum_key .note { transform: rotate(10deg); margin-left: 22px; }
#drum_key8 { background: url(../images/06drum/drum03.png) no-repeat; top: 301px; left: 876px; width: 371px; height: 248px; border-radius: 0; background-position: left top; background-size: contain; }
#drum_key8.active { background-image: url(../images/06drum/drum03_on.png); }
#drum_key9 { top: 266px; left: 1230px; width: 324px; height: 228px; z-index: 10; transform: rotate(8deg); }
#drum_key9.drum_key .kb { transform: rotate(-8deg) translateX(0%); }
#drum_key9.drum_key .note { transform: rotate(-8deg); }
.drum .note { font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 41px; text-align: center; padding-top: 28px; display: none; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
.drum .note.on { display: block; }
#drum_key5 .note { padding-top: 0; position: absolute; top: 82px; left: 15px; width: 140px; text-align: left; z-index: 10; }
#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 { font-family: 'NanumSquareNeo-dEb'; font-size: 55px; position: absolute; left: 50%; transform: translateX(-50%); display: none; bottom: 10px; }
.drum .kb.on { display: block; }
#drum_key5 .kb { bottom: 26px; font-size: 60px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; left: 243px; width: 130px; }
#drum_key6 .kb { bottom: 35px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; left: 200px; width: 160px; }
#drum_key9 .note { margin-left: -35px; margin-top: 11px; }
#drum_key8 .kb { bottom: 40px; }
.kb2 { position: absolute; font-size: 30px; margin-left: 7px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; width: 130px; display: none; color: #00B0F0; font-family: 'NanumSquareNeo-dEb'; }
.kb2.on { display: block; }
#drum_key5 .kb2 { top: 52px; left: 222px; }
#drum_key6 .kb2 { top: 62px; left: 152px; }