@charset "utf-8";

#section.jang_gu { }

.jang_gu .jang_gu_wrap { position: absolute; top: 421px; left: 50%; transform: translateX(-50%); width: 1219px; }
.jang_gu_wrap .bg_img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 650px; }
#stick1 { position: absolute; width: 39px; top: -140px; left: 234px; transform: rotate(18deg); transform-origin: top; }
#stick2 { position: absolute; width: 52px; top: 200px; left: 920px; transform: rotate(11deg); transform-origin: bottom; }
.stick_wrap.jang_gu_key1 #stick1 { animation: stick1 linear 0.35s; }
.stick_wrap.jang_gu_key2 #stick1 { animation: stick1 linear 0.35s; }
.stick_wrap.jang_gu_key2 #stick2 { animation: stick2 linear 0.30s; }
.stick_wrap.jang_gu_key3 #stick2 { animation: stick2 linear 0.30s; }
.stick_wrap.jang_gu_key4 #stick2 { animation: stick3 linear 0.20s; }
.stick_wrap.jang_gu_key5 #stick2 { animation: stick4 linear 1.12s; }
@keyframes stick1 { 0% { transform: rotate(18deg); } 50% { transform: rotate(-3deg); } 100% { transform: rotate(18deg); } }
@keyframes stick2 { 0% { transform: rotate(11deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(11deg); } }
@keyframes stick3 { 0% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes stick4 { 0% { transform: rotate(11deg); } 12% { transform: rotate(-5deg); } 24% { transform: rotate(5deg); } 36% { transform: rotate(-5deg); } 48% { transform: rotate(5deg); } 60% { transform: rotate(-5deg); } 72% { transform: rotate(5deg); } 84% { transform: rotate(-5deg); } 100% { transform: rotate(11deg); } }
.jang_gu_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); }
.jang_gu_key.active { background-color: #fddcfd; border-color: #d71fd9; }
.jang_gu_key.active .note { background-color: #fddcfd; border-color: #d71fd9; }
.key_txt { font-family: 'NanumSquareNeo-dEb'; font-size: 38px; text-align: center; line-height: 99px; }
#jang_gu_key5 .key_txt { font-size: 27px; text-align: center; letter-spacing: -2px; }
#jang_gu_key1 { top: 200px; left: -140px; }
#jang_gu_key2 { top: -180px; left: 568px; }
#jang_gu_key3 { top: 213px; left: 1103px; }
#jang_gu_key4 { top: 213px; left: 1232px; }
#jang_gu_key5 { top: 213px; left: 1363px; }
.jang_gu_key .note { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; background-color: #fff; width: 100%; height: 100%; border: 4px solid #dddedd; border-radius: 20px; }
.jang_gu_key .note>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jang_gu_key .note.on { display: block !important; }
.jang_gu .btnNote .off { letter-spacing: -1px; }
.jang_gu .btnNote { padding: 6px 5px; }
.jang_gu .kb { font-family: 'NanumSquareNeo-dEb'; font-size: 48px; position: absolute; left: 50%; transform: translateX(-50%); display: none; bottom: -68px; }
.jang_gu .kb.on { display: block; }