@charset "utf-8";

#section.kalimba { }
.kalimba .kalimba_wrap { position: absolute; top: 162px; left: 50%; transform: translateX(-50%); width: 100%; height: 930px; overflow: hidden; }
.kalimba_wrap .bg_img { position: absolute; top: -201px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 0; opacity: 0.5; }
.kalimba_wrap .bg { position: absolute; top: -150px; left: 50%; transform: translateX(-50%); width: 100%; max-width: none; height: 920px; }
.kalimba .key_img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.kal_key { width: 73px; background-size: 100%; cursor: pointer; position: absolute; top: -80px; }
.kalimba .act2 { display: none; }
.kalimba .kal_key.active .act2 { display: block; }
.kalimba .kal_key.active .act1 { display: none; }
#kal_key1 { left: 170px; height: 545px; }
#kal_key2 { left: 264px; height: 596px; }
#kal_key3 { left: 358px; height: 644px; }
#kal_key4 { left: 452px; height: 690px; }
#kal_key5 { left: 546px; height: 735px; }
#kal_key6 { left: 640px; height: 781px; }
#kal_key7 { left: 734px; height: 822px; }
#kal_key8 { left: 828px; height: 873px; }
#kal_key9 { left: 922px; height: 910px; }
#kal_key10 { left: 1016px; height: 851px; }
#kal_key11 { left: 1110px; height: 811px; }
#kal_key12 { left: 1204px; height: 763px; }
#kal_key13 { height: 706px; left: 1298px; }
#kal_key14 { left: 1392px; height: 671px; }
#kal_key15 { left: 1486px; height: 625px; }
#kal_key16 { left: 1580px; height: 577px; }
#kal_key17 { left: 1674px; height: 530px; }
.kalimba .note { 
    position: absolute; 
    font-family: 'NanumSquareNeo-dEb'; 
    font-size: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    bottom: 90px; 
    display: none;
    background-color: #ffffff;
    border: 2px solid #333333;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1;
    width: 40px;
}
.kalimba .kb { 
    position: absolute; 
    font-family: 'NanumSquareNeo-dEb'; 
    font-size: 28px; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    bottom: -62px; 
    display: none;
    color: #3f52ff;
    background-color: #ffffff;
    border: 2px solid #3f52ff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.kalimba .kal_num { position: absolute; left: 50%; transform: translateX(-50%); bottom: 23px; display: none; }
.kalimba .note.on { display: block; }
.kalimba .kb.on { display: flex; }
.kalimba .kal_num.on { display: block; }