@charset "utf-8";

.danso#section { }
.danso .danso_wrap { position: absolute; top: 370px; left: 50%; transform: translateX(-50%); width: 100%; height: 510px; }
.danso_wrap .bg_img { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 1525px; max-width: none; }
.danso_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.danso .danso_key_active { position: absolute; width: 100%; top: 0; left: 50%; transform: translateX(-50%); }
.danso .danso_key_act { position: absolute; top: 0px; left: 786px; width: 827px; display: none; height: 150px; }
.danso .danso_key_act.active { display: block; }
.dansoOn { background-color: #42ade8; border: 1px solid #90e3ef; border-radius: 50%; display: inline-block; position: absolute; width: 48px; height: 48px; }
.dansoOn1 { top: 150px; left: 5px; }
.dansoOn2 { top: 40.8px; left: 170px; }
.dansoOn3 { top: 39.2px; left: 334px; }
.dansoOn4 { top: 38px; left: 525.4px; }
.dansoOn5 { top: 65px; left: 579px; }
.danso_key { background: url(../images/common/note_bg_btn.png) no-repeat; background-size: 100%; display: inline-block; top: 0; left: 300px; cursor: pointer; position: absolute; width: 100px; height: 100px; background: #fff; border: 3px solid #dddedd; border-radius: 20px; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); }
#danso_key1 { left: 0px; }
#danso_key2 { left: 140px; }
#danso_key3 { left: 280px; }
#danso_key4 { left: 420px; }
#danso_key5 { left: 560px; }
#danso_key6 { left: 700px; }
#danso_key7 { left: 840px; }
#danso_key8 { left: 980px; }
#danso_key9 { left: 1120px; }
#danso_key10 { left: 1260px; }
#danso_key11 { left: 1400px; }
.danso .note { color: #013467; font-family: 'KoPubBatangBold'; display: inline-block; width: 90px; position: absolute; top: 125px; left: 7px; display: none; }
.danso .note.on { display: block; }
.danso .danso_key.active { background-color: #fddcfd; border-color: #d71fd9; }
.danso .kb { font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translateX(-50%); display: none; top: -83px; }
.danso .kb.on { display: block; }
.danso .kor_note { text-align: center; font-family: 'KoPubBatangBold'; font-size: 45px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.danso .key_box { position: absolute; top: 320px; left: 50%; transform: translateX(-50%); width: 1510px; height: 20px; }
.danso .note>img { width: 50px; display: block; margin: auto; }
.danso .note.daso_bottom { position: absolute; top: 528px; left: 258px; width: 100%; }
.danso .line1 { border: 4px solid #22a4db; width: 563px; height: 40px; position: absolute; top: 0; left: 0; }
.danso .line2 { border: 4px solid #49418f; width: 698px; height: 40px; position: absolute; top: 0; left: 700px; }
.danso .b_line { border-top: none; }
.danso .b_line p { font-family: 'NotoM'; font-size: 32px; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background-color: #e2f7ff; padding: 0 10px; text-align: center; }
.danso .line1 p { width: 300px; }
.danso .bg_txt { top: 54px; left: 130px; }
.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; }
.danso.ver2 .danso_wrap .bg_img { transform: rotate(90deg); top: 190px; width: 890px; left: -290px; }
.danso.ver2 .danso_key_act { transform: rotate(90deg); }
.ver2.danso .bg_txt { transform: rotate(0deg); top: -197px; left: 68px; }
.ver2.danso .danso_key_active { transform: rotate(0deg) scale(0.588); left: -929px; top: 341px; }
.ver2.danso .key_box { position: absolute; top: 120px; left: 54%; }
.ver2.danso .note.daso_bottom { position: absolute; top: 348px; left: 333px; width: 100%; }
.danso .btn_space { background-image: url(../images/common/btn_space2.png); background-size: 34px; top: 16px; }
.danso .btn_space .kb { top: -103px; }