@charset "utf-8";

.gayageum#section { }
.gayageum .gayageum_wrap { position: absolute; top: 370px; left: 50%; transform: translateX(-50%); width: 100%; height: 510px; }
.gayageum_wrap .bg_img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1620px; max-width: 120%; }
.gayageum_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.gayageum .gayageum_key_active { position: absolute; width: 100%; top: 0; left: 0; }
.gayageum .gayageum_key_act { position: absolute; top: 24px; left: 988px; width: 827px; display: none; height: 150px; }
.gayageum .gayageum_key_act.active { display: block; }
.gayageumOn { background-color: #42ade8; border: 1px solid #90e3ef; border-radius: 50%; display: inline-block; position: absolute; width: 48px; height: 48px; }
.gayageumOn.half { border-radius: 100px 0 0 100px; width: 15px; height: 29px; top: -2px; left: 393px; }
.gayageumOn1 { top: 14px; left: -39px; }
.gayageumOn2 { top: 15px; left: 60.6px; }
.gayageumOn3 { top: 15px; left: 160px; }
.gayageumOn4 { top: 15px; left: 264px; }
.gayageumOn5 { top: 15px; left: 348px; }
.gayageumOn6 { top: 15px; left: 446px; }
.gayageum_key { background-size: 100%; cursor: pointer; position: relative; z-index: 10; width: 95px; height: 95px; background: #fff; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); display: inline-block; margin-right: 11px; }
.gayageum .note { color: #013467; font-family: 'KoPubBatangBold'; display: inline-block; font-size: 42px; text-align: center; padding-top: 21px; width: 100%; position: absolute; top: 98px; display: none; }
.gayageum .note.on { display: block; }
.gayageum .gayageum_key.active { background-color: #fddcfd; border-color: #d71fd9; }
.gayageum .kb { color: #1f9ed9; font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translateX(-50%); display: none; top: -80px; }
.gayageum .kb.on { display: block; }
.gayageum .kor_note { text-align: center; font-family: 'KoPubBatangBold'; font-size: 38px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gayageum .note.gayageum_bottom { position: absolute; top: 542px; left: 103px; width: 100%; }
.gayageum .key_box { display: flex; margin: auto; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; width: 100%; position: absolute; top: 340px; left: 0; }
.gayageum .note>img { width: 47px; display: block; margin: auto; }
.gayageum .line1 { border: 4px solid #22a4db; width: 676px; height: 40px; position: absolute; top: 0; left: 0; }
.gayageum .line2 { border: 4px solid #49418f; width: 675px; height: 40px; position: absolute; top: 0; left: 798px; }
.gayageum .line3 { border: 4px solid #1aa15d; width: 108px; height: 40px; position: absolute; top: 0; left: 1596px; }
.gayageum .b_line { border-top: none; }
.gayageum .b_line p { font-family: 'NotoM'; font-size: 32px; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background-color: #ffdcdc; padding: 0 10px; text-align: center; }
.gayageum .line1 p { width: 70px; }
.gayageum .line3.b_line p { font-size: 32px; width: 65px; padding: 0 2px; }
.gayageum #bg_txt1 { transform: rotate(0); top: -35px; left: 403px; }
.gayageum #bg_txt2 { transform: rotate(0); top: -35px; left: 1549px; }
.gayageum .btn_space { background-image: url(../images/common/btn_space2.png); background-size: 34px; top: -160px; right: 80px; }
.gayageum .btn_space .kb { font-size: 29px; top: -70px; }