@charset "utf-8";

.recorder#section {  }
.recorder .recorder_wrap { position: absolute; top: 300px; left: 50%; transform: translateX(-50%); width: 1481px; height: 510px; }
.recorder_wrap .bg_img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; }
.recorder_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.recorder_mode_toggle { display: flex; align-items: center; margin-left: 30px; border-radius: 15px; overflow: visible; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; }
.recorder_mode_toggle .btnMode { margin: 0; padding: 12px 30px; font-size: 18px; font-weight: bold; cursor: pointer; border: none; background: #e0e0e0; color: #666; transition: all 0.3s ease; border-radius: 15px; min-width: 120px; text-align: center; position: relative; z-index: 1; }
.recorder_mode_toggle .btnMode:first-child { border-radius: 15px 0 0 15px; }
.recorder_mode_toggle .btnMode:last-child { border-radius: 0 15px 15px 0; }
.recorder_mode_toggle .btnMode:first-child.on { background: #FFD700; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateY(-1px); border-radius: 15px 15px 15px 15px; margin-right: -23px; padding-right: 40px; z-index: 2; }
.recorder_mode_toggle .btnMode:last-child.on { background: #FFD700; color: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transform: translateY(-1px); border-radius: 15px 15px 15px 15px; margin-left: -23px; padding-left: 40px; z-index: 2; }
.recorder_mode_toggle .btnMode:hover:not(.on) { background: #d0d0d0; color: #333; transform: translateY(-1px); }
.recorder_mode_toggle .btnMode p { margin: 0; padding: 0; position: static; transform: none; text-shadow: none; }
.recorder .re_key_active { position: absolute; width: 100%; top: -51px; left: 0; }
.recorder .re_key_act { position: absolute; top: -1px; left: 340px; left: 591px; width: 682px; display: none; height: 220px; }
.recorder .re_key_act.active { display: block; }
.re_key_act .keyon { border-radius: 50%; background-color: #42ade8; border: 1px solid #90e3ef; position: absolute; }
.re_key_act .keyon.keyon1.half { border-radius: 0 50px 50px 0; background-color: #42ade8; border: 1px solid #90e3ef; position: absolute; height: 34px; left: 16px; top: 228px; width: 20px; }
.re_key_act .keyon1 { width: 34px; height: 34px; top: 228px; left: 0px; }
.re_key_act .keyon2 { width: 47px; height: 47px; top: 107px; left: 45px; }
.re_key_act .keyon3 { width: 46px; height: 46px; top: 107px; left: 145px; }
.re_key_act .keyon4 { width: 46px; height: 46px; top: 108px; left: 245px; }
.re_key_act .keyon5 { width: 47px; height: 47px; top: 107px; left: 359px; }
.re_key_act .keyon6 { width: 46px; height: 46px; top: 108px; left: 456px; }
.re_key_act .keyon7 { width: 23px; height: 23px; top: 137px; left: 546px; }
.re_key_act .keyon8 { width: 15px; height: 15px; top: 118px; left: 551px; }
.re_key_act .keyon9 { width: 23px; height: 23px; top: 148px; left: 654px; }
.re_key_act .keyon10 { width: 15px; height: 15px; top: 130px; left: 663px; }
.recorder .titleArea h1 { margin-top: -5px; padding-top: 15px; padding-bottom: 14px; }
.recorder .sub_tit { display: inline-block; font-size: 38px; text-align: center; line-height: 42px; }
.recorder_mode_toggle .btnMode p.off { display: none; }
.recorder .titleArea { align-items: center; }
.recorder .titleArea h1 { margin-right: 0; }
.recorder_key { background-size: 100%; cursor: pointer; position: absolute; width: 100px; height: 100px; background: #fff; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); }
.recorder_key.top { top: 0; left: 300px; }
.recorder_key.bottom { top: 164px; }
#recorder_key1 { left: 66px; }
#recorder_key2 { left: 192px; }
#recorder_key3 { left: 444px; }
#recorder_key4 { left: 570px; }
#recorder_key5 { left: 696px; }
#recorder_key6 { left: 948px; }
#recorder_key7 { left: 1074px; }
#recorder_key8 { left: 1326px; }
#recorder_key9 { left: 0px; }
#recorder_key10 { left: 126px; }
#recorder_key11 { left: 252px; }
#recorder_key12 { left: 378px; }
#recorder_key13 { left: 504px; }
#recorder_key14 { left: 630px; }
#recorder_key15 { left: 756px; }
#recorder_key16 { left: 882px; }
#recorder_key17 { left: 1008px; }
#recorder_key18 { left: 1134px; }
#recorder_key19 { left: 1260px; }
#recorder_key20 { left: 1386px; }
#recorder_key21 { left: 66px; }
#recorder_key22 { left: 192px; }
#recorder_key23 { left: 444px; }
#recorder_key24 { left: 570px; }
#recorder_key25 { left: 696px; }
#recorder_key26 { left: 948px; }
#recorder_key27 { left: 1074px; }
#recorder_key28 { left: 1326px; }
#recorder_key29 { left: 0px; }
#recorder_key30 { left: 126px; }
#recorder_key31 { left: 252px; }
#recorder_key32 { left: 378px; }
#recorder_key33 { left: 504px; }
#recorder_key34 { left: 630px; }
#recorder_key35 { left: 756px; }
#recorder_key36 { left: 882px; }
#recorder_key37 { left: 1008px; }
#recorder_key38 { left: 1134px; }
#recorder_key39 { left: 1260px; }
#recorder_key40 { left: 1386px; }
.recorder .note { color: #444444; font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 29px; text-align: center; padding-top: 12px; width: 100px; }
.recorder .note_top span { display: block; }
.recorder .note.note_bottom { color: #444444; font-size: 42px; padding-top: 26px; }
.recorder .recorder_key.active { background-color: #fddcfd; border-color: #d71fd9; }
.recorder .kb { font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translateX(-50%); display: none; }
.recorder .kb.on { display: block; }
.recorder .kb_top { top: -75px; }
.recorder .kb_bottom { bottom: -73px; }
.recorder .key_wrap { width: 1500px; position: absolute; top: 349px; left: 50%; transform: translateX(-50%); height: 340px; }
.recorder .btn { vertical-align: -20px; }
.recorder .bg_txt { top: 60px; left: -63px; }
.check_txt { display: inline-block; cursor: pointer; }
.check_wrap { display: block; width: 471px; }
.check_box { display: inline-block; background-color: #fff; border: 2px solid #a1a1a1; width: 30px; height: 30px; border-radius: 8px; margin-right: 5px; vertical-align: middle; cursor: pointer; position: relative; }
.check_img { position: absolute; top: -11px; left: -9px; width: 52px; height: auto; max-width: none; }
#recorder_wrap2 { display: none; }
.btn.btn2 { background: #7da5e3; border: 1px solid #84a7c5; box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15), inset 0px 3px 2px -1px #add5ff; position: absolute; top: 180px; right: 40px; }
.btn.btn2 p { text-shadow: 1px 1px 13px #cdcdcd; }
.recorder.ver2 .recorder_wrap .bg_img { transform: rotate(90deg); position: absolute; top: 252px; left: -330px; width: 50%; }
.ver2.recorder .recorder_wrap { position: absolute; top: 300px; left: 50%; transform: translateX(-50%); width: 1781px; height: 650px; }
.ver2.recorder .key_wrap { width: 1500px; position: absolute; top: 154px; left: 55%; transform: translateX(-50%); height: 340px; }
.ver2.recorder .bg_txt { transform: rotate(0deg); top: -127px; left: 22px; font-size: 30px; }
.ver2.recorder .re_key_active { position: absolute; width: 100%; top: 405px; left: -682px; transform: rotate(90deg) scale(0.6); }
.ver2.recorder .re_key_act .keyon1 { top: 229px; left: -1px; }
.ver2.recorder .re_key_act .keyon1.half { top: 228px; left: 15px; }