@charset "utf-8";
.danso .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.danso .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.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: #ffffff; border: 1px solid #000000; border-radius: 50%; display: inline-block; position: absolute; width: 25px; height: 31px; }
.dansoOn.active {
    background: #ffd700;
    border: 2px solid #000;
}
.dansoOn1 { top: -155px; left: 260px; }
.dansoOn2 { top: -64.6px; left: 327px; }
.dansoOn3 { top: -66.2px; left: 407px; }
.dansoOn4 { top: -66.2px; left: 490px; }
.dansoOn5 { top: -66.2px; left: 599px; }
.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: 4px 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: 847px; }
#danso_key7 { left: 990px; }
#danso_key8 { left: 1130px; }
#danso_key9 { left: 1270px; }
#danso_key10 { left: 1410px; }
#danso_key11 { left: 1550px; }
.danso .note { color: #013467; font-family: "KoPubWorld Dotum Bold", "Noto Serif KR", "Noto Sans KR" ; display: inline-block; width: 90px; position: absolute; top: 125px; left: 7px; display: none;  }
.danso .note.on { display: block;  }
.danso .danso_key:hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.danso .danso_key.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    box-shadow:
        0 0 20px rgba(212, 165, 116, 0.6),
        0 0 40px rgba(255, 200, 130, 0.4),
        inset 0 0 30px rgba(255, 235, 200, 0.5);
    transform: scale(0.95);
    transition: all 0.15s ease-out;
}
.danso .kb { font-family: "KoPubWorld Dotum Bold"; font-size: 32px; position: absolute; left: 50%; transform: translateX(-50%); display: none; top: 110px; border-radius: 50%; border: #3f52ff solid 2px; background-color: #ffffff; width: 50px; height: 50px; text-align: center; line-height: 56px; color: #3f52ff;}
.danso .kb.on { display: block; }
.danso .kor_note { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 38px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1; white-space: nowrap; }
.danso .kor_note img { width: 55px; height: auto; display: block; }
.danso .kor_bottom { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 27px; position: absolute; left: 50%; top: -45px; transform: translateX(-50%); color: #444; white-space: nowrap; }
.danso .kor_bottom .dot-marker { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #444; font-weight: bold; letter-spacing: 5px; margin-left: 0px; width: 50px; }
.danso.landscape { height: 100vh; overflow: hidden; }
.danso.landscape .danso_wrap { position: absolute; top: 55%; left: 14%; transform: translate(-50%, -50%) rotate(90deg) scale(1.8); transform-origin: center center; width: 80vh; height: 80vw; }
.danso.landscape .danso_wrap .bg_img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: none; height: auto; }
.danso.landscape .key_box { position: absolute; top: 320px; left: 50%; /*transform: translateX(-50%) rotate(-90deg) scale(0.556);*/ transform-origin: center center; width: 1510px; height: 20px; }
.danso.landscape .danso_key_active { position: absolute; width: 100%; top: 0; left: 50%; /*transform: translateX(-50%) rotate(180deg);*/ transform-origin: center center; }
.danso.landscape .danso_key_act { position: absolute; top: 71px; left: 1239px; }
.danso.landscape .bg_txt { position: absolute; top: 50%; left: -250px; /*transform: rotate(90deg);*/ }
.danso.landscape .daso_bottom { transform: rotate(-90deg); }
.danso.portrait .danso_wrap { position: absolute; transform: translateX(-50%); top: 370px; left: 50%; width: 100%; height: 510px; }
.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: "KoPubWorld Dotum Bold"; 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.portrait .btn2 .btn_txt1 { display: block; }
.danso.portrait .btn2 .btn_txt2 { display: none; }
.danso.landscape .btn2 .btn_txt1 { display: none; }
.danso.landscape .btn2 .btn_txt2 { display: block; }
.danso.ver2 .danso_wrap { position: absolute; top: 264px; left: 41%; transform: translateX(-50%); width: 1700px; height: 700px; }
.danso.ver2 .danso_wrap .bg_img { position: absolute; /*transform: rotate(270deg); */ top: 303px; width: 1025px; left: 909px; }
.danso.ver2 .danso_key_act { transform: rotate(180deg); }
.ver2.danso .bg_txt { position: absolute; /*transform: rotate(270deg);*/ top: 684px; left: 1028px; font-weight: 500; font-size: 28px;}
.ver2.danso .danso_key_active { position: absolute; transform: rotate(90deg); /*scale(0.588);*/ left: 378px; top: -659px; }
.ver2.danso .key_box { position: absolute; top: 422px; left: 55%; }
.ver2.danso .note.daso_bottom { position: absolute; top: -655px; left: 1230px; width: 100%; }
.danso .btn_space { background: #fff; background-image: url(../images/common/btn_space2.png); background-size: 34px; background-repeat: no-repeat; background-position: center; cursor: pointer; position: absolute; width: 100px; height: 100px; border: 3px solid #dddedd; border-radius: 50%; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); top: 0px; left: 1676px; }
.danso .btn_space .kb { top: -67px; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; position: absolute; left: 50%; transform: translateX(-50%); display: none; width: 138px; }
.danso .btn_space .kb.on { display: block; }
.danso .btn_space.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    box-shadow:
        0 0 20px rgba(212, 165, 116, 0.6),
        0 0 40px rgba(255, 200, 130, 0.4),
        inset 0 0 30px rgba(255, 235, 200, 0.5);
    transform: scale(0.95);
    transition: all 0.15s ease-out;
}

/* 설명 박스 */
.danso .instruction_box {
    position: absolute;
    top: 880px;
    left: 1160px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
    font-family: "KoPubWorld Dotum Bold";
    font-size: 20px;
    line-height: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}
.danso .instruction_box p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1px;
}
.danso .instruction_box .dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #000;
}
.danso .instruction_box .dot.filled {
    background: #ffd700;
}
.danso .instruction_box .dot.empty {
    background: #fff;
}