@charset "utf-8";
.cahon#section {  }
.cahon .cahon_wrap { position: absolute; top: 320px; left: 50%; transform: translateX(-50%); width: 869px; height: 510px; }
.cahon_wrap .bg_img { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 550px; }
.cahon_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.cahon .cahon_act { position: absolute; width: 431px; top: 18px; left: 190px; }
.cahon .re_key_act { position: absolute; top: -1px; left: 340px; left: 463px; width: 577px; display: none; }
.cahon .re_key_act.active { display: block; }
.cahon_key { width: 228px; display: inline-block; cursor: pointer; position: absolute; top: 300px; }
.cahon .cahon_key.top { top: -86px; height: 137px; }
.cahon .cahon_key.middle { top: 60px; height: 150px; }
.cahon .cahon_key.bottom { top: 229px; height: 210px; }
.cahon .cahon_key.top .surface { height: 100%; }
.cahon .cahon_key.middle .surface { height: 160px; }
.cahon .cahon_key.bottom .surface { height: 210px; }
.cahon .cahon_key.left { left: 200px; }
.cahon .cahon_key.right { right: 200px; }
.surface { background: rgba(245, 139, 139, 0.7); border-radius: 15px; width: 100%; display: none; }
.surface.on { display: block; }
.cahon .cahon_key.active .surface { background-color: rgb(255 20 20 / 50%); }
.cahon .note { color: #013467; font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 31px; text-align: center; padding-top: 28px; width: 90px; }
.cahon .note_top span { display: block; }
.cahon .note.note_bottom { color: #000; font-size: 30px; padding-top: 26px; }
.cahon .kb { color: #00B0F0; font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translate(-50%, -50%); display: none; top: 50%; z-index: 5; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; }
.cahon .kb.on { display: block; }
.tone_txt { position: absolute; color: #ffffff; font-size: 38px; top: 50%; transform: translateY(-50%); left: -210px; width: 160px; text-align: center; font-family: 'NanumSquareNeo-cBd'; pointer-events: none; }