#game {
    width: 100%;
    display: flex;

    justify-content: center;
}

#sudoku {
    width: 100%;
    max-width: 450px;
    border: 0px solid #81acdc;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: auto;
}

#wrapper {
    margin: 2em auto 0.5em auto;
    padding: 1em;
    width: 50%;
    min-width: 650px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0px 10px 15px rgb(236, 235, 235);
}

li {
    list-style-type: none;
}

button {
    border: none;
    cursor: pointer;
}

body {
    margin: 0;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    font-size: 1rem;
    line-height: 30px;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.btn-danger {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: #dc3545;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;

}

.btn-warning {
    width: 100px;
    height: 30px;
    color: #ffffff;
    background-color: #ffc107;

}

.btn-warning:hover {
    color: #ffffff;
    background-color: #ce9c04;

}

.btn-info {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: #74c2be;

}

.btn-info:hover {
    color: #fff;
    background-color: #53a09c;

}

.btn-success {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: #28a745;

}

.btn-success:hover {
    color: #fff;
    background-color: #218838;

}

.bt a img {
    vertical-align: middle;
}

.fenl {
    position: fixed;
    top: 84px;
    left: -20px;
}

.fenl ul {
    width: 100px;
    height: 530px;
}

.fenl ul img {
    width: 100%;
}

.fenl ul li:hover {
    background-color: #A2D7D4;

}

.fenl ul li img:hover {
    opacity: 0.9;

}

.fenl ul li a {
    display: block;
    width: 100px;
    height: 70px;
}

.fenl ul li a:hover {
    box-shadow: inset 0px 0px 20px 10px rgb(255, 255, 255);
}

.fenl ul li {
    width: 100px;
    height: 80px;
    margin-bottom: 10px;
    background-color: #f28d29;

}

.alert-info {
    margin-top: 40px;
    padding: 15px;
    color: #434d4c;
    font-size: 13px;
    background-color: #e6f7f8;
    border-color: #bee5eb
}

.around {
    display: flex;
    /* 启用 Flexbox 布局 */
    gap: 20px;
    margin-bottom: 30px;
}

a {
    text-decoration: none;
    /* 移除下划线 */
}

#jugao {
    margin-top: 1em;
}

h1 {
    color: #667879;
    text-align: center;
    margin-top: 100px;
}

.alert-info p {
    margin: 6px 0 0 0;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.dropdown-item {
    display: block;
    background-color: #0aa7bc;
}

.dropdown-item:hover {
    background-color: #0894a6;
}

.dropdown-item,
.look,
.chong {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;

}

.chong {
    background-color: #0cc24f;
}

.chong:hover {
    background-color: #0a9c3f;
}

.look {
    margin: 5px 0;
    background-color: #f5bc10;
}

.look:hover {
    background-color: #f4a40e;
}

*,
::after,
::before {
    box-sizing: border-box;
}

#controls {
    max-width: 200px;
    flex-grow: 1;
    margin: 0 1rem;
    display: grid;
    align-content: space-between;
    grid-template-areas:
        "button"
        "numbers"
        "actions";
}

#new-game {
    width: calc(100% - 20px);
    height: 70px;
    border-radius: 15px;
    margin: 10px;
    box-shadow: #777 0 2px 3px;
    background: #d4e5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: button;
    color: #4f739c;
    font-size: 32px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    transition: .1s box-shadow linear;
}

#numbers {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    font-size: 35px;
    grid-area: numbers;
    color: #4f739c;
}

.number {
    width: 100%;
    /* aspect-ratio: 5/3; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #81acdc;
    border-radius: 5px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transition: .1s box-shadow linear;
}

#actions {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    grid-area: actions;
    margin: 10px 0;
}

#actions>div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4e739c;
}

.cell-selected {
    background-color: #f3f9e2 !important;
}

.ps9 .iv_1 {
    color: blue;
    font-size: 36px !important;
}

.ps9 .iv_2 {
    color: blue;
    font-size: 24px !important;
}

.ps9 .iv_3 {
    color: blue;
    font-size: 22px !important;
}

.ps9 .iv_4 {
    color: blue;
    font-size: 16px !important;
}

.ps9 .iv_5 {
    color: blue;
    font-size: 14px !important;
}

.ps8 .iv_1 {
    color: blue;
    font-size: 36px !important;
}

.ps8 .iv_2 {
    color: blue;
    font-size: 24px !important;
}

.ps8 .iv_3 {
    color: blue;
    font-size: 22px !important;
}

.ps8 .iv_4 {
    color: blue;
    font-size: 16px !important;
}

.ps8 .iv_5 {
    color: blue;
    font-size: 14px !important;
}

.ps6 .iv_1 {
    color: blue;
    font-size: 46px !important;
}

.ps6 .iv_2 {
    color: blue;
    font-size: 24px !important;
}

.ps6 .iv_3 {
    color: blue;
    font-size: 22px !important;
}

.ps6 .iv_4 {
    color: blue;
    font-size: 16px !important;
}

.ps6 .iv_5 {
    color: blue;
    font-size: 14px !important;
}

.ps4 .iv_1 {
    color: blue;
    font-size: 60px !important;
}

.ps4 .iv_2 {
    color: blue;
    font-size: 34px !important;
}

.ps4 .iv_3 {
    color: blue;
    font-size: 26px !important;
}

.ps4 .iv_4 {
    color: blue;
    font-size: 16px !important;
}

.ps4 .iv_5 {
    color: blue;
    font-size: 14px !important;
}

.sgrid_cell {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(3, 1fr);
}

.sgrid_cell>div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    color: blue;
}

.hide {
    display: none !important;
}

.conflict_cell {
    background-color: red !important;
}


.pzm_f0_box {
    flex-direction: column;
    align-content: center;
    background-color: #fff;
    border: solid 2px #000;
    box-shadow: inset 1px 1px 0 #e3e4e5;
    width: 450px;
    height: 450px;
    /* margin: auto; */
    overflow: hidden;
}

.pzm_f0_box,
.tr {
    display: flex;
}

.pzm_f2_box,
.tr {
    display: flex;
}

.pzm_f4_box,
.tr {
    display: flex;
}

.tr {
    flex: 1;
    flex-direction: row;
}

.td {
    flex: 1;
    position: relative;
}


.border_0_,
.border_0_0,
.border__,
.border__0 {
    box-shadow: inset -1px -1px 0 #ccc;
}

.border_0_1,
.border__1 {
    box-shadow: inset 0 -2px 0 #000, inset -1px 0 0 #ccc;
}

.border_1_,
.border_1_0 {
    box-shadow: inset -2px 0 0 #000, inset 0 -1px 0 #ccc;
}

.border_1_1 {
    box-shadow: inset -2px -2px 0 #000;
}

/* killer jigsaw */
.kj_border_0_,
.kj_border_0_0,
.kj_border__,
.kj_border__0 {
    box-shadow: inset -1px -1px 0 #ccc;
}

.kj_border_0_1,
.kj_border__1 {
    box-shadow: inset 0 -2px 0 #ed5565, inset -1px 0 0 #ccc;
}

.kj_border_1_,
.kj_border_1_0 {
    box-shadow: inset -2px 0 0 #ed5565, inset 0 -1px 0 #ccc;
}

.kj_border_1_1 {
    box-shadow: inset -2px -2px 0 #ed5565;
}



.c_bg {
    background-color: #cdedf6;
}


.out_txt {
    writing-mode: vertical-lr;

}

.num-cell4 {
    font-family: "myFont";
    line-height: 110px;
    font-size: 60px;
    height: 110px;
    max-width: 110px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
    width: 97%;
    width: 97%;
}

.num-cell6 {
    font-family: "myFont";
    line-height: 74px;
    font-size: 46px;
    height: 74px;
    max-width: 74px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
    width: 97%;
    width: 97%;
}

.num-cell8 {
    font-family: "myFont";
    line-height: 54px;
    font-size: 38px;
    height: 54px;
    max-width: 54px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
}

.num-cell9 {
    font-family: "myFont";
    line-height: 48px;
    font-size: 36px;
    height: 48px;
    max-width: 48px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
}


/** killer **/
.k_cell-item-on_vh4 {
    background-color: #ffffcc;
    opacity: 0.9;
    word-break: keep-all;
}

.k_cell-item-on_vh6 {
    background-color: #ffffcc;
    opacity: 0.9;
    word-break: keep-all;
}

.k_cell-item-on_vh8 {
    background-color: #ffffcc;
    opacity: 0.9;
    word-break: keep-all;
}

.k_cell-item-on_vh9 {
    background-color: #ffffcc;
    opacity: 0.9;
    word-break: keep-all;
}

.k_cell_grid_4 {
    margin-top: 32rpx;
    flex-direction: column;
    align-content: center;
}

.k_cell_grid_6 {
    margin-top: 18rpx;
    flex-direction: column;
    align-content: center;
}

.k_cell_grid_8,
.k_cell_grid_9 {
    margin-top: 14px;
    flex-direction: column;
    align-content: center;
}

.k_cg_tr {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.k_cg_item4 {
    width: 50%;
    font-size: 38rpx;
    line-height: 54rpx;
    height: 68rpx;
    border: 0 solid transparent;
    text-align: center;
    color: blue
}

.k_cg_item6 {
    width: 33%;
    font-size: 38rpx;
    line-height: 46rpx;
    height: 46rpx;
    border: 0 solid transparent;
    text-align: center;
    color: blue
}

.k_cg_item8,
.k_cg_item9 {
    width: 33%;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    border: 0 solid transparent;
    text-align: center;
    color: blue
}

/*  max-height:48px; */
.ps9 input {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 36px;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.ps9 .s2 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.ps9 .s3 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 14px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.ps8 input {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 38px;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.ps8 .s2 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.ps8 .s3 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 12px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.ps6 input {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 46px;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.ps6 .s2 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 26px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.ps6 .s3 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.ps4 input {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 60px;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.ps4 .s2 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 40px !important;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.ps4 .s3 {
    width: 96%;
    height: 96%;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 30px !important;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.conflict {
    color: red !important;
}

.kps9 input {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 36px;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.kps9 .s2 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.kps9 .s3 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 14px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 48px;
}

.kps8 input {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 38px;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.kps8 .s2 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.kps8 .s3 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 12px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 54px;
}

.kps6 input {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 46px;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.kps6 .s2 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 26px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.kps6 .s3 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    font-size: 22px !important;
    overflow: hidden;
    background-color: transparent;
    max-height: 75px;
}

.kps4 input {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 60px;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.kps4 .s2 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 40px !important;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.kps4 .s3 {
    width: 96%;
    height: 96%;
    position: absolute;
    z-index: 20;
    border: solid 1px transparent;
    text-align: center;
    color: blue;
    overflow: hidden;
    background-color: transparent;
    line-height: 110px;
    font-size: 30px !important;
    height: 110px;
    max-width: 110px;
    text-align: center;
}

.conflict {
    color: red !important;
}

.ft_txt {
    font-size: 16px
}

.fb_txt {
    font-size: 16px
}

.fl_txt {
    font-size: 16px
}

.fr_txt {
    font-size: 16px;
}

/* killer 9x9 */

.cell_box_9 {
    position: relative;
    width: 100%;
    height: 100%
}

.box_sum_9 {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 6px;
    border-radius: 8px;
    font-weight: bold;
    font-family: "myFont";
    width: 16px;
    height: 15px;
    line-height: 15px;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
}

.box_1111_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0000_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1110_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1101_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1011_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0111_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_1100_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1001_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0011_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0101_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0110_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1010_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1000_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0100_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0010_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0001_9 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

/* killer 6x6 */
.cell_box_6 {
    position: relative;
    width: 100%;
    height: 100%
}

.box_sum_6 {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 6px;
    border-radius: 8px;
    font-weight: bold;
    font-family: "myFont";
    width: 30px;
    height: 30px;
    line-height: 24px;
    font-size: 24px;
    text-align: center;
    background-color: #fff;
}

.box_1111_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0000_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1110_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1101_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1011_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0111_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_1100_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1001_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0011_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0101_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0110_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1010_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1000_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0100_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0010_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0001_6 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

/* killer 4x4 */
.cell_box_4 {
    position: relative;
    width: 100%;
    height: 100%
}

.box_sum_4 {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 8px;
    border-radius: 8px;
    font-weight: bold;
    font-family: "myFont";
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    text-align: center;
    background-color: #fff;
}

.box_1111_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0000_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1110_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1101_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1011_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0111_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_1100_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1001_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}

.box_0011_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0101_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0110_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_1010_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_1000_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
}

.box_0100_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(90deg);
}

.box_0010_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(180deg);
}

.box_0001_4 {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 99%;
    height: 99%;

    background-position: center;
    background-size: cover;
    transform: rotate(-90deg);
}


.killer_flex_box {
    display: block;
    height: unset;
}

.killer_box {
    flex-direction: column;
    align-content: center;
    background-color: #fff;
    border: solid 2px #000;
    box-shadow: inset 1px 1px 0 #e3e4e5;
    width: 450px;
    height: 450px;
    margin: auto;
    overflow: hidden;
}

.killer_box,
.tr {
    display: flex;
}

.k_border_0__n,
.k_border_0__j,
.k_border_0_0_j,
.k_border_0_0_n,
.k_border___n,
.k_border___j,
.k_border__0_n,
.k_border__0_j {
    box-shadow: inset -2px -2px 0 #ccc;
}

.k_border_0_1_n,
.k_border__1_n {
    box-shadow: inset 0 -4px 0 #000, inset -2px 0 0 #ccc;
}

/* orangered */
.k_border_0_1_j,
.k_border__1_j {
    box-shadow: inset 0 -4px 0 #FF7573, inset -2px 0 0 #ccc;
}

.k_border_1__n,
.k_border_1_0_n {
    box-shadow: inset -4px 0 0 #000, inset 0 -2px 0 #ccc;
}

.k_border_1__j,
.k_border_1_0_j {
    box-shadow: inset -5px 0 0 #FF7573, inset 0 -2px 0 #ccc;
}

.k_border_1_1_n {
    box-shadow: inset -4px -4px 0 #000;
}

.k_border_1_1_j {
    box-shadow: inset -5px -5px 0 #FF7573;
}


.cs_h9 {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: -3px;
    height: 30px;
    width: 4px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

.cs_v9 {
    position: absolute;
    z-index: 1000;
    top: -3px;
    left: 10px;
    height: 4px;
    width: 30px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

/* consecutive-sudoku 娉ㄦ剰6x6鐨刪鏄痳ight */
.cs_h6 {
    position: absolute;
    z-index: 1000;
    top: 20px;
    right: -2px;
    height: 30px;
    width: 4px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

.cs_v6 {
    position: absolute;
    z-index: 1000;
    top: -3px;
    left: 20px;
    height: 4px;
    width: 30px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

.cs_h4 {
    position: absolute;
    z-index: 1000;
    top: 34px;
    left: -3px;
    height: 40px;
    width: 4px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

.cs_v4 {
    position: absolute;
    z-index: 1000;
    top: -3px;
    left: 34px;
    height: 4px;
    width: 40px;
    border-radius: 2px;
    border: solid 1px red;
    background-color: #f76707;
}

/* outside */
.fvl_outside9x9 {
    font-size: 24rpx;
}

.fvr_outside9x9 {
    font-size: 24rpx;
}

.fht_outside9x9 {
    font-size: 24rpx;
    line-height: 40rpx;
}

.fhb_outside9x9 {
    font-size: 24rpx;
}

/* vx-sudoku */
.vx_h {
    position: absolute;
    z-index: 1000;
    top: 20px;
    right: -6px;
    height: 12px;
    width: 12px;
}

.vx_v {
    position: absolute;
    z-index: 1000;
    bottom: -6px;
    left: 20px;
    height: 12px;
    width: 12px;
}

.vx_imgv {

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.vx_imgx {

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* kropki9x9 */
.kr_r9 {
    position: absolute;
    z-index: 1000;
    top: 20px;
    right: -5px;
    height: 10px;
    width: 10px;
}

.kr_t9 {
    position: absolute;
    z-index: 1000;
    top: -5px;
    left: 20px;
    height: 10px;
    width: 10px;
}

.kr_r6 {
    position: absolute;
    z-index: 1000;
    top: 30px;
    right: -5px;
    height: 10px;
    width: 10px;
}

.kr_t6 {
    position: absolute;
    z-index: 1000;
    top: -5px;
    left: 30px;
    height: 10px;
    width: 10px;
}

.kr_imgw {
    border: solid 1px black;
    background-color: #fff;
    border-radius: 50%;
}

.kr_imgb {
    border: solid 1px black;
    background-color: #000;
    border-radius: 50%;
}

/* gtt t1< t2> l3 > l4 < */
.gt_9_1 {
    position: absolute;
    z-index: 1000;
    top: -6px;
    left: 15px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_9_2 {
    position: absolute;
    z-index: 1000;
    top: -6px;
    left: 15px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_9_3 {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: -6px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_9_4 {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: -6px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* gtt t1< t2> l3 > l4 < */
.gt_6_1 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 25px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_6_2 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 25px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_6_3 {
    position: absolute;
    z-index: 1000;
    top: 25px;
    right: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gt_6_4 {
    position: absolute;
    z-index: 1000;
    top: 25px;
    right: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.cgt_9_1 {
    position: absolute;
    z-index: 1000;
    top: 18px;
    left: -6px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_9_2 {
    position: absolute;
    z-index: 1000;
    top: 18px;
    left: -6px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_9_3 {
    position: absolute;
    z-index: 1000;
    top: -6px;
    left: 18px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_9_6 {
    position: absolute;
    z-index: 1000;
    top: -6px;
    left: 18px;
    height: 10px;
    width: 10px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.cgt_6_1 {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_6_2 {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_6_3 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 25px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_6_6 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 25px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_4_1 {
    position: absolute;
    z-index: 1000;
    top: 38px;
    left: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_4_2 {
    position: absolute;
    z-index: 1000;
    top: 38px;
    left: -9px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_4_3 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 38px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cgt_4_6 {
    position: absolute;
    z-index: 1000;
    top: -9px;
    left: 38px;
    height: 15px;
    width: 15px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/** vsudoku **/
.vs_0 {
    color: #fff;
}

.vs_1 {
    position: absolute;
    z-index: 200;
    top: -6px;
    left: -6px;
    height: 20px;
    width: 20px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs_2 {
    position: absolute;
    z-index: 200;
    top: -6px;
    right: -6px;
    height: 20px;
    width: 20px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs_3 {
    position: absolute;
    z-index: 200;
    bottom: -6px;
    right: -6px;
    height: 20px;
    width: 20px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs_4 {
    position: absolute;
    z-index: 200;
    bottom: -6px;
    left: -6px;
    height: 20px;
    width: 20px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* evenodd9x9 */
.eo9_0 {
    width: 1px;
    height: 1px;
}

.eo9_1 {
    position: absolute;
    z-index: 1;
    background-color: transparent;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 7px;
    border: solid 1px #ccc;
}

.eo9_2 {
    position: absolute;
    z-index: 1;
    background-color: transparent;
    width: 34px;
    height: 34px;
    margin: 7px;
    border: solid 1px #ccc;
}

.eo6_0 {
    width: 1px;
    height: 1px;
}

.eo6_1 {
    position: absolute;
    z-index: 1;
    background-color: transparent;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 14px;
    border: solid 1px #ccc;
}

.eo6_2 {
    position: absolute;
    z-index: 1;
    background-color: transparent;
    width: 42px;
    height: 42px;
    margin: 14px;
    border: solid 1px #ccc;
}

.fht_lk {

    background-position: left bottom;
    background-repeat: no-repeat;
}

.fhb_lk {

    background-position: right 2px;
    background-repeat: no-repeat;
}

.fvl_lk {
    height: 50px;
    line-height: 48px;

    background-position: right bottom;
    background-repeat: no-repeat;
}

.fvr_lk {
    height: 50px;
    line-height: 48px;

    background-position: left top;
    background-repeat: no-repeat;
}

.fht_rossini {
    height: 20px;
}

.fhb_rossini {
    height: 20px;
}

.fvl_rossini,
.fvr_rossini {
    width: 20px;
}

.frame_fl_txt {
    line-height: 50px;
}

.frame_fr_txt {
    line-height: 50px;
}

@media screen and (max-width: 1024px) {

    .dingwei,
    .alert-info,
    .fenl {
        display: none;
    }


    #controls {
        margin-top: 15px;
        max-width: 100%;
    }

    h1 {
        height: 35px;
        line-height: 35px;
        font-weight: 300;
        margin-top: 0px;
        margin-bottom: 5px;
        font-size: 20px;
        color: #ffffff;
        background-color: #0abcc0;
    }

    .around {
        margin-bottom: 0;
    }

    .dropdown-menu {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5px;
    }

    .look {
        margin: 0 5px;
    }

    .pzm_f0_box {
        width: 100%;
        height: auto;
    }

    #game-header {
        margin-bottom: 10px !important;
    }

    #wrapper {
        margin: 0.3em auto 0.5em auto;
        width: 100%;
        min-width: 100%;
    }

    #btn-undo,
    #btn-save {
        margin-top: 5px;
    }

    #game {
        flex-wrap: wrap;
    }

}