body,
html {
    min-height: 100%;
}

main {
    padding: 1em;
    display: flex;
    justify-items: center;
}

.keyboard {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1200 / 310;
    background: url() no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
}

.keyboard>button,
.keyboard5 .block1 button,
.keyboard5 .block2 button {
    position: absolute;
    cursor: pointer;
    background-color: pink;
    opacity: 0;
    overflow: hidden;
}

.keyboard1 {
    aspect-ratio: 1000 / 350;
    background-image: url(../img/main/keyboard1.png);
    width: 700px;
}

.keyboard1>button {
    width: 9.5%;
    height: 14%;
}

.keyboard2,
.keyboard76 {
    aspect-ratio: 550 / 390;
    background-image: url(../img/main/keyboard2.png);
    width: 450px;
}

.keyboard76 {
    background-image: url(../img/main/keyboard76.png);
}

.keyboard2>button,
.keyboard76>button {
    width: 15.5%;
    height: 14%;
}

.keyboard3,
.keyboard65 {
    width: 530px;
    height: 200px;
    background-image: url(../img/main/keyboard3.png);
}

.keyboard3>button,
.keyboard65>button {
    width: 65px;
    height: 35px;
}

.keyboard4 {
    width: 1017px;
    height: 173px;
    background-image: url(../img/main/keyboard4.png);
}

.keyboard4>button {
    height: 20px;
}

.keyboard5 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard5 .block1 {
    width: 544px;
    background-image: url(../img/main/keyboard5_1.png);
    background-size: 100% 100%;
    position: relative;
    aspect-ratio: 544 / 160;
    max-width: 100%;
}

.keyboard5 .block1 button {
    width: 15.5%;
    height: 21%;
}

.keyboard5 .block2 {
    width: 525px;
    position: relative;
    background-image: url(../img/main/keyboard5_2.png);
    background-size: 100% 100%;
    aspect-ratio: 525 / 137;
    max-width: 100%;
}

.keyboard5 .block2 button {
    width: 14%;
    height: 22%;
}

.keyboard6 {
    aspect-ratio: 1014 / 126;
    aspect-ratio: 515 / 264;
    width: 515px;
    background-image: url(../img/main/keyboard6.png);
}

.keyboard6>button {
    width: 5.5%;
    height: 16%;
    width: 11.5%;
    height: 8%;
}

.keyboard7 {
    width: 497px;
    height: 216px;
    background-image: url(../img/main/keyboard7.png);
}

.keyboard7>button {
    width: 15%;
    height: 15%;
}

.keyboard8 {
    width: 218px;
    height: 304px;
    background-image: url(../img/main/keyboard8.png);
}

.keyboard8>button {
    width: 22%;
    height: 17%;
}

.keyboard9 {
    width: 692px;
    height: 201px;
    background-image: url(../img/main/keyboard9.png);
}

.keyboard9>button {
    width: 11.5%;
    height: 22%;
}

.keyboard10,
.keyboard15 {
    width: 829px;
    height: 206px;
    background-image: url(../img/main/keyboard10.png);
}

.keyboard10>button,
.keyboard15>button {
    width: 6.5%;
    height: 15%;
}

.keyboard11 {
    width: 558px;
    height: 303px;
    background-image: url(../img/main/keyboard11.png);
}

.keyboard11>button {
    width: 10%;
    height: 10%;
}

.keyboard12 {
    width: 969px;
    height: 268px;
    background-image: url(../img/main/keyboard12.png);
}

.keyboard12>button {
    width: 5%;
    height: 19%;
}

.keyboard13 {
    width: calc(987px * 0.8);
    height: calc(331px * 0.8);
    background-image: url(../img/main/keyboard13.png);
}

.keyboard13>button {
    width: 8%;
    height: 14%;
}

.keyboard14 {
    width: calc(966px * 0.8);
    height: calc(326px * 0.8);
    background-image: url(../img/main/keyboard14.png);
}

.keyboard14>button {
    width: 8%;
    height: 14%;
}

.keyboard16 {
    width: calc(1487px * 2 / 3);
    height: calc(2922px * 2 / 3);
    background-image: url(../img/main/keyboard16.png);
}

.keyboard16>button {
    width: 4%;
    height: 1.25%;
    font-size: 0px;
}

.keyboard17,
.keyboard20,
.keyboard87 {
    width: 642px;
    height: 327px;
    background-image: url(../img/main/keyboard17.png);
}

.keyboard17>button,
.keyboard20>button,
.keyboard87>button {
    width: 8%;
    height: 12%;
}

.keyboard18 {
    width: 624px;
    height: 343px;
    background-image: url(../img/main/keyboard18.png);
}

.keyboard18>button {
    width: 9%;
    height: 16%;
}

.keyboard19 {
    /* width: calc(472px);
    height: calc(185px); */
    width: 700px;
    aspect-ratio: 7/2;
    background-image: url(../img/main/keyboard19.png);
}

.keyboard19>button {
    /* width: 13%;
    height: 16%; */
    width: 10.5%;
    height: 18%;
}

.key01_box {
    width: 120px;
    height: 89px;
    border: 1px solid #00bffe;
    left: 68%;
    top: 10%;
    position: absolute;
}

.key01_box>.title {
    width: 100%;
    height: 45px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 5px;
}

.key01_box>.btns {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.key01_box>.btns>button {
    cursor: pointer;
    padding: 4px 5px;
    background-color: #1c69a8;
    border-radius: 3px;
    color: #fff;
    border: none;
    cursor: pointer;
}

.keyboard21 {
    width: calc(585px * 0.8);
    height: calc(356px * 0.8);
    background-image: url(../img/main/keyboard21.png);
}

.keyboard21>button {
    width: 13%;
    height: 19%;
}

.keyboard22 {
    width: calc(694px * 0.8);
    height: calc(249px * 0.8);
    background-image: url(../img/main/keyboard22.png);
}

.keyboard22>button {
    width: 8%;
    height: 19%;
}

.keyboard23 {
    width: calc(741px * 0.8);
    height: calc(323px * 0.8);
    background-image: url(../img/main/keyboard23.png);
}

.keyboard23>button {
    width: 11%;
    height: 16%;
}

.keyboard23>button.btn1 {
    width: 8%;
    height: 17%;
    border-radius: 20px;
}

.keyboard24 {
    width: calc(629px * 0.8);
    height: calc(279px * 0.8);
    background-image: url(../img/main/keyboard24.png);
}

.keyboard24>button {
    width: 13%;
    height: 16%;
}

.keyboard24>button.btn1 {
    width: 10%;
    height: 21%;
    border-radius: 20px;
}

.keyboard24>button.btn2 {
    opacity: 1;
    background-color: #3a6dcb;
    border-radius: 5px;
    color: #fff;
    border: none;
}

.keyboard25 {
    width: 600px;
    aspect-ratio: 76/42;
    background-image: url(../img/main/keyboard25.png);
}

.keyboard25>button {
    width: 11%;
    height: 17.5%;
}

.keyboard27 {
    width: calc(661px * 0.8);
    height: calc(200px * 0.8);
    background-image: url(../img/main/keyboard27.png);
}

.keyboard27>button {}

.keyboard27>button.btn1 {
    width: 16%;
    height: 20%;
}

.keyboard27>button.btn2 {
    width: 7%;
    height: 50%;
}

.keyboard27>button.btn3 {
    width: 10%;
    height: 65%;
}

.keyboard28 {
    width: calc(1094px * 0.8);
    height: calc(428px * 0.8);
    background-image: url(../img/main/keyboard28.png);
}

.keyboard28>button {
    width: 8%;
    height: 13%;
}

.keyboard29 {
    width: calc(628px * 0.8);
    height: calc(307px * 0.8);
    background-image: url(../img/main/keyboard29.png);
}

.keyboard29>button {
    width: 9%;
    height: 16%;
}

.keyboard30 {
    width: calc(637px);
    height: calc(283px);
    background-image: url(../img/main/keyboard30.png);
}

.keyboard30>button {
    width: 9%;
    height: 13%;
}

.keyboard31 {
    width: calc(548px);
    height: calc(313px);
    background-image: url(../img/main/keyboard31.png);
}

.keyboard31>button {
    width: 10%;
    height: 16%;
}

.keyboard32 {
    width: calc(1135px * 0.8);
    height: calc(409px * 0.8);
    background-image: url(../img/main/keyboard32.png);
}

.keyboard32>button {
    width: 14%;
    height: 15%;
}

.keyboard33 {
    width: calc(578px);
    height: calc(264px);
    background-image: url(../img/main/keyboard33.png);
}

.keyboard33>button {
    width: 7%;
    height: 15%;
}

.keyboard34 {
    width: calc(484px);
    height: calc(252px);
    background-image: url(../img/main/keyboard34.png);
}

.keyboard34>button {
    width: 15%;
    height: 21%;
}

.keyboard35 {
    width: calc(810px * 0.8);
    height: calc(289px * 0.8);
    background-image: url(../img/main/keyboard35.png);
}

.keyboard35>button {
    width: 8%;
    height: 22%;
}

.keyboard36 {
    width: calc(642px);
    height: calc(327px);
    background-image: url(../img/main/keyboard36.png);
}

.keyboard36>button {
    width: 10%;
    height: 14%;
}

.keyboard37 {
    aspect-ratio: 656 / 361;
    width: 450px;
    background-image: url(../img/main/keyboard37.png);
}

.keyboard37>button {
    width: 11%;
    height: 14%;
}

.keyboard38 {
    width: calc(519px);
    height: calc(264px);
    background-image: url(../img/main/keyboard38.png);
}

.keyboard38>button {
    width: 7%;
    height: 15%;
}

.keyboard39 {
    aspect-ratio: 787 / 331;
    background-image: url(../img/main/keyboard39.png);
    width: 620px;
}

.keyboard39>button {
    width: 10.5%;
    height: 15%;
}

.keyboard40 {
    aspect-ratio: 907/232;
    background-image: url(../img/main/keyboard40.png);
    width: 800px;
}

.keyboard40>button {
    width: 13.5%;
    height: 19%;
}

.keyboard41 {
    /* aspect-ratio: 642/327; */
    width: 642px;
    height: 327px;
    background-image: url(../img/main/keyboard41.png);
}

.keyboard41>button {
    width: 10%;
    height: 14%;
}

.keyboard42 {
    aspect-ratio: 1094 / 534;
    background-image: url(../img/main/keyboard42.png);
    width: 870px;
}

.keyboard42>button {
    width: 5%;
    height: 10%;
}

.keyboard43 {
    background-image: url(../img/main/keyboard43.png);
    width: 900px;
}

.keyboard43>button {
    width: 4.5%;
    height: 17%;
}

.keyboard44 {
    background-image: url(../img/main/keyboard44.png);
    width: 900px;
}

.keyboard44>button {
    width: 4.5%;
    height: 17%;
}

.keyboard45 {
    background-image: url(../img/main/keyboard45.png);
    width: 1100px;
}

.keyboard45>button {
    width: 6.2%;
    height: 12.8%;
}

.keyboard46,
.keyboard69 {
    background-image: url(../img/main/keyboard46.png);
    width: 1000px;
}

.keyboard46>button,
.keyboard69>button {
    width: 4.2%;
    height: 15.8%;
}

.keyboard47 {
    background-image: url(../img/main/keyboard47.png);
    width: 1000px;
}

.keyboard47>button {
    width: 7.5%;
    height: 16.8%;
}

.keyboard48 {
    background-image: url(../img/main/keyboard48.png);
    width: 1000px;
}

.keyboard48>button {
    width: 6.4%;
    height: 22.8%;
}

.keyboard49 {
    background-image: url(../img/main/keyboard49.png);
    width: 1000px;
}

.keyboard49>button {
    width: 7.5%;
    height: 17.8%;
}

.keyboard52 {
    aspect-ratio: 1200 / 574;
    background-image: url(../img/main/keyboard52.png);
    width: 1000px;
}

.keyboard52>button {
    width: 7.5%;
    height: 9.4%;
}

.keyboard53 {
    background-image: url(../img/main/keyboard53.png);
    width: 1100px;
}

.keyboard53>button {
    width: 7.5%;
    height: 17.8%;
}

.keyboard54 {
    background-image: url(../img/main/keyboard54.png);
}

.keyboard54>button {
    width: 5.5%;
    height: 14%;
}

.keyboard55 {
    background-image: url(../img/main/keyboard55.png);
    width: 1100px;
}

.keyboard55>button {
    width: 5.5%;
    height: 14%;
}

.keyboard56 {
    background-image: url(../img/main/keyboard56.png);
}

.keyboard56>button {
    width: 5.3%;
    height: 13.8%;
}

.keyboard57 {
    background-image: url(../img/main/keyboard57.png);
}

.keyboard57>button {
    width: 5.3%;
    height: 13.8%;
}

.keyboard58 {
    background-image: url(../img/main/keyboard58.png);
    width: 1100px;
}

.keyboard58>button {
    width: 5.3%;
    height: 13.8%;
}

.keyboard59 {
    aspect-ratio: 600/260;
    background-image: url(../img/main/keyboard59.png);
    width: 600px;
}

.keyboard59>button {
    width: 12%;
    height: 14.5%;
}

.keyboard60 {
    background-image: url(../img/main/keyboard60.png);
    width: 1100px;
}

.keyboard60>button {
    width: 6.5%;
    height: 13.2%;
}

.keyboard61 {
    background-image: url(../img/main/keyboard61.png);
}

.keyboard61>button {
    width: 3.8%;
    height: 13.2%;
}

.keyboard63 {
    background-image: url(../img/main/keyboard63.png);
    aspect-ratio: 1200/480;
    width: 900px;
}

.keyboard63>button {
    width: 5.5%;
    height: 13%;
}

.keyboard64 {
    background-image: url(../img/main/keyboard64.png);
    aspect-ratio: 1200/410;
    width: 900px;
}

.keyboard64>button {
    width: 5.2%;
    height: 15%;
}

.keyboard66,
.keyboard91,
.keyboard107 {
    background-image: url(../img/main/keyboard66.png);
    aspect-ratio: 1000/410;
    width: 750px;
}

.keyboard66>button,
.keyboard91>button,
.keyboard107>button {
    width: 8.2%;
    height: 18%;
}

.keyboard67 {
    background-image: url(../img/main/keyboard67.png);
    aspect-ratio: 1000/410;
    width: 750px;
}

.keyboard67>button {
    width: 8.2%;
    height: 9%;
}

.keyboard68 {
    background-image: url(../img/main/keyboard68.png);
    aspect-ratio: 894/586;
    width: 600px;
}

.keyboard68>button {
    width: 10%;
    height: 11%;
}

.keyboard70 {
    background-image: url(../img/main/keyboard70.png);
    aspect-ratio: 626/324;
    width: 450px;
}

.keyboard70>button {
    width: 13%;
    height: 20%;
}

.keyboard71 {
    background-image: url(../img/main/keyboard71.png);
    aspect-ratio: 626/324;
    width: 450px;
}

.keyboard71>button {
    width: 13%;
    height: 20%;
}

.keyboard72 {
    background-image: url(../img/main/keyboard72.png);
    aspect-ratio: 399/324;
    width: 300px;
}

.keyboard72>button {
    width: 25%;
    height: 13%;
}

.keyboard73 {
    background-image: url(../img/main/keyboard73.png);
    aspect-ratio: 626/424;
    width: 400px;
}

.keyboard73>button {
    width: 13%;
    height: 16%;
}

.keyboard74 {
    background-image: url(../img/main/keyboard74.png);
    aspect-ratio: 820/200;
    width: 700px;
}

.keyboard74>button {
    width: 11%;
    height: 25%;
}

.keyboard75 {
    background-image: url(../img/main/keyboard75.png);
    aspect-ratio: 826/424;
    width: 700px;
}

.keyboard75>button {
    width: 11%;
    height: 18%;
}

.keyboard77 {
    background-image: url(../img/main/keyboard77.png);
    aspect-ratio: 900/390;
    width: 700px;
}

.keyboard77>button {
    width: 10%;
    height: 14%;
}

.keyboard78 {
    background-image: url(../img/main/keyboard78.png);
    aspect-ratio: 635/400;
    width: 600px;
}

.keyboard78>button {
    width: 13%;
    height: 21%;
}

.keyboard79 {
    background-image: url(../img/main/keyboard79.png);
    aspect-ratio: 100/46;
    width: 700px;
}

.keyboard79>button {
    width: 10.3%;
    height: 13.5%;
}

.keyboard80 {
    background-image: url(../img/main/keyboard80.png);
    aspect-ratio: 89/54;
    width: 700px;
}

.keyboard80>button {
    width: 11.7%;
    height: 10%;
}

.keyboard81 {
    background-image: url(../img/main/keyboard81.png);
    aspect-ratio: 760/220;
    width: 500px;
}

.keyboard81>button {
    width: 11%;
    height: 34%;
}

.keyboard82 {
    background-image: url(../img/main/keyboard82.png);
    aspect-ratio: 70/44;
    width: 500px;
}

.keyboard82>button {
    width: 15.5%;
    height: 15%;
}

.keyboard83 {
    background-image: url(../img/main/keyboard83.png);
    aspect-ratio: 820/200;
    width: 700px;
}

.keyboard83>button {
    width: 11%;
    height: 25%;
}

.keyboard84 {
    background-image: url(../img/main/keyboard84.png);
    aspect-ratio: 1200/630;
    width: 900px;
}

.keyboard84>button {
    width: 5.42%;
    height: 7%;
}

.keyboard85 {
    background-image: url(../img/main/keyboard85.png);
    aspect-ratio: 950/570;
    width: 600px;
}

.keyboard85>button {
    width: 7%;
    height: 11%;
}

.keyboard87 {
    background-image: url(../img/main/keyboard87.png);
}

.keyboard88 {
    background-image: url(../img/main/keyboard88.png);
    aspect-ratio: 740/410;
    width: 600px;
}

.keyboard88>button {
    width: 8.5%;
    height: 9%;
}

.keyboard89 {
    background-image: url(../img/main/keyboard89.png);
    aspect-ratio: 1050/360;
    width: 800px;
}

.keyboard89>button {
    width: 10.5%;
    height: 19%;
}

.keyboard90 {
    background-image: url(../img/main/keyboard90.png);
    aspect-ratio: 1200/310;
    width: 1000px;
}

.keyboard90>button {
    width: 5.3%;
    height: 13.8%;
}

.keyboard93 {
    aspect-ratio: 1014 / 126;
    aspect-ratio: 515 / 264;
    width: 515px;
    background-image: url(../img/main/keyboard93.png);
}

.keyboard93>button {
    width: 5.5%;
    height: 16%;
    width: 11.5%;
    height: 8%;
}

.keyboard94 {
    aspect-ratio: 950 / 290;
    background-image: url(../img/main/keyboard94.png);
    width: 800px;
}

.keyboard94>button {
    width: 9.5%;
    height: 19.4%;
}

.keyboard95 {
    aspect-ratio: 960 / 300;
    background-image: url(../img/main/keyboard95.png);
    width: 800px;
}

.keyboard95>button {
    width: 9.4%;
    height: 19.2%;
}

.keyboard97 {
    aspect-ratio: 740 / 210;
    background-image: url(../img/main/keyboard97.png);
    width: 740px;
}

.keyboard97>button {
    width: 11.9%;
    height: 26.2%;
}

.keyboard98 {
    aspect-ratio: 1120 / 380;
    background-image: url(../img/main/keyboard98.png);
    width: 900px;
}

.keyboard98>button {
    width: 8%;
    height: 14.2%;
}

.keyboard100 {
    aspect-ratio: 950 / 540;
    background-image: url(../img/main/keyboard100.png);
    width: 880px;
}

.keyboard100>button {
    width: 9.4%;
    height: 10.2%;
}

.keyboard101 {
    aspect-ratio: 827 / 290;
    background-image: url(../img/main/keyboard101.png);
    width: 880px;
}

.keyboard101>button {
    width: 10.6%;
    height: 19.2%;
}

.keyboard102 {
    aspect-ratio: 560 / 220;
    background-image: url(../img/main/keyboard102.png);
    width: 560px;
}

.keyboard102>button {
    width: 15.8%;
    height: 25.2%;
}

.keyboard103 {
    aspect-ratio: 600 / 240;
    background-image: url(../img/main/keyboard103.png);
    width: 600px;
}

.keyboard103>button {
    width: 15%;
    height: 23.2%;
}

.keyboard104 {
    aspect-ratio: 950 / 290;
    background-image: url(../img/main/keyboard94.png);
    width: 800px;
}

.keyboard104>button {
    width: 9.5%;
    height: 19.4%;
}

.keyboard105 {
    aspect-ratio: 560 / 220;
    background-image: url(../img/main/keyboard105.png);
    width: 560px;
}

.keyboard105>button {
    width: 16%;
    height: 25.4%;
}

.keyboard106 {
    aspect-ratio: 950 / 540;
    background-image: url(../img/main/keyboard100.png);
    width: 880px;
}

.keyboard106>button {
    width: 9.4%;
    height: 10.2%;
}

.keyboard108 {
    aspect-ratio: 350 / 380;
    background-image: url(../img/main/keyboard108.png);
    width: 280px;
}

.keyboard108>button {
    width: 25.6%;
    height: 15%;
}

.keyboard109,
.keyboard113 {
    aspect-ratio: 1000 / 290;
    background-image: url(../img/main/keyboard109.png);
    width: 800px;
}

.keyboard109>button,
.keyboard113>button {
    width: 9%;
    height: 20%;
}

.keyboard110 {
    aspect-ratio: 1020 / 380;
    background-image: url(../img/main/keyboard110.png);
    width: 800px;
}

.keyboard110>button {
    width: 8.8%;
    height: 14%;
}

.keyboard111 {
    aspect-ratio: 540 / 440;
    background-image: url(../img/main/keyboard111.png);
    width: 450px;
}

.keyboard111>button {
    width: 16.6%;
    height: 12.6%;
}

.keyboard112 {
    aspect-ratio: 430 / 220;
    background-image: url(../img/main/keyboard112.png);
    width: 400px;
}

.keyboard112>button {
    width: 20.6%;
    height: 25.6%;
}

.photo {
    width: 100%;
}

.photo>button {
    border: 2px solid yellow;
    font-size: 0;
    opacity: 1;
    background-color: transparent;
}

.photo>button:hover {
    border: 3px solid orangered;
}

.keyboard59.photo {
    aspect-ratio: 1450 / 650;
    background-image: url(../img/main-photo/59-main.jpg);
}

.keyboard59.photo>button {
    width: 4.5%;
    height: 6.3%;
}

.keyboard93.photo {
    aspect-ratio: 3443 / 2233;
    background-image: url(../img/main-photo/93-main.jpg);
}

.keyboard93.photo>button {
    width: 4.7%;
    height: 3.3%;
}


/* 多键盘图纸 垂直分部 */

.vertical {
    flex-direction: column;
}