@charset "utf-8";
.ocarina#section { }
.ocarina .ocarina_wrap { position: absolute; top: 193px; left: 50%; transform: translateX(-50%); width: 869px; height: 510px; }
.ocarina_wrap .bg_img { position: absolute; left: 50%; transform: translateX(-50%); width: 79%; }
.ocarina_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.ocariling .sub_tit { display: block; font-size: 38px; text-align: left; line-height: 42px; }
.ocarina .titleArea h1 { padding: 15px 50px; margin-top: -4px; }
.ocarina .btn { margin-top: -16px; }
.ocarina_key { background: #fff; background-size: 100%; cursor: pointer; position: absolute; width: 100px; height: 100px; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0 0 21px 3px rgba(0,0,0,0.15); }
.ocarina_key.top { top: 0; left: 300px; }
.ocarina_key.bottom { top: 133px; }
#ocarina_key1 { left: 318px; }
#ocarina_key2 { left: 445px; }
#ocarina_key3 { left: 692px; }
#ocarina_key4 { left: 817px; }
#ocarina_key5 { left: 942px; }
#ocarina_key6 { left: 1192px; }
#ocarina_key7 { left: 1321px; }
#ocarina_key8 { left: 0; }
#ocarina_key9 { left: 126px; }
#ocarina_key10 { left: 252px; }
#ocarina_key11 { left: 378px; }
#ocarina_key12 { left: 504px; }
#ocarina_key13 { left: 630px; }
#ocarina_key14 { left: 756px; }
#ocarina_key15 { left: 882px; }
#ocarina_key16 { left: 1008px; }
#ocarina_key17 { left: 1134px; }
#ocarina_key18 { left: 1260px; }
#ocarina_key19 { left: 1386px; }
#ocarina_key20 { left: 1512px; }
.ocarina .note { color: #444; font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 29px; text-align: center; padding-top: 12px; width: 100px; }
.ocarina .note.note_bottom { color: #444; font-size: 42px; padding-top: 26px; }
.ocarina .note_top span { display: block; }
.ocarina .kb { font-family: 'NanumSquareNeo-dEb'; font-size: 45px; position: absolute; left: 50%; transform: translateX(-50%); display: none; }
.ocarina .ocarina_key.active { background-color: #fddcfd; border-color: #d71fd9; }
.ocarina .kb.on { display: block; }
.ocarina .kb_top { top: -75px; }
.ocarina .kb_bottom { bottom: -73px; }
.ocarina .key_wrap { width: 1619px; position: absolute; top: 553px; left: 50%; transform: translateX(-50%); height: 340px; }
.ocarina .btn_space { top: 149px; }
.ocarina .btn_space .kb { bottom: 90px; }