* {
    margin: 0;
    padding: 0;
    transition-property: all;
    transition-duration: 0.3s;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    background-color: #112d4e;
}

.float_window {
    display: none;
    position: absolute;
    height: 14.455vw;
    width: 28.910vw;
    left: 38%;
    top: 30%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: 1.084vw solid #112d4e;
    border-radius: 1.446vw;
    background-color: #3f72af;
    padding-top: 2.530vw;
    z-index: 1002;
    overflow: auto;
    text-align: center;
    box-shadow: 0.000vw 0.000vw 72.275vw 72.275vw rgba(125, 181, 211, 0.335);
}

.float_window p {
    font-size: 3.252vw;
    font-weight: bold;
    color: #112d4e;
}

.float_window button {
    height: 5.782vw;
    width: 10.119vw;
    border-radius: 1.446vw;
    border: 0.000vw;
    background-color: #88a4d6;
    color: #112d4e;
    font-weight: 800;
    font-size: 1.662vw;
    margin-right: 1.446vw;
    box-shadow: 0.217vw 0.217vw 0.723vw rgb(16, 55, 73);
}

.fw_op {
    height: 5.782vw;
    width: 23.851vw;
    margin-left: 3.469vw;
    margin-top: 1.446vw;
}

.main {
    height: 52.761vw;
    width: 67.939vw;
    margin: 0 auto;
}

.bar {
    display: block;
    float: left;
    background-color: #88a4d6;
    height: 50.593vw;
    width: 5.782vw;
    margin-top: 2.168vw;
    border-radius: 1.446vw;
}

.whoround {
    height: 18.069vw;
    width: 4.337vw;
    margin-left: 1.446vw;
    border-radius: 1.446vw 0 0 1.446vw;
    border: 0;
    font-size: 2.530vw;
    font-weight: bold;
    color: #112d4e;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#who_A {
    background-color: #3f72af;
    margin-top: 3.614vw;
}

#who_B {
    margin-top: 7.228vw;
    background-color: rgba(255, 255, 255, 0);
}

.playboard {
    display: block;
    float: left;
    margin: 2.168vw;
    height: 50.593vw;
    width: 25.296vw;
    border-radius: 1.446vw;
    background-color: #3f72af;
}

.playboard button:active {
    transform: scale(0.95);
    box-shadow: 0.217vw 0.145vw 1.590vw 0.072vw rgba(0, 0, 0, 0.24);
}

.playboard button:hover {
    transform: scale(1.05);
}

.A {
    height: 23.851vw;
    width: 23.851vw;
    margin: 0 auto;
    margin-top: 0.723vw;
}

.B {
    height: 23.851vw;
    width: 23.851vw;
    margin: 0 auto;
    margin-top: 1.446vw;
}

.playboard li {
    display: block;
    float: left;
}

.playboard button {
    height: 7.228vw;
    width: 7.228vw;
    margin: 0.361vw;
    background-color: #88a4d6;
    border: 0.000vw;
    border-radius: 1.446vw;
    box-shadow: 0.361vw 0.361vw 1.446vw rgb(27, 92, 122);
    font-size: 2.891vw;
    font-weight: bolder;
    color: #112d4e;
}

.operate {
    display: block;
    float: left;
    height: 50.593vw;
    width: 32.524vw;
    background-color: #3f72af;
    border-radius: 1.446vw;
    margin-top: 2.168vw;
}

.pointboard {
    height: 20.237vw;
    width: 28.910vw;
    background-color: #88a4d6;
    color: #112d4e;
    margin: 0 auto;
    margin-top: 1.084vw;
    margin-bottom: 1.446vw;
    padding-top: 2.891vw;
    padding-left: 1.446vw;
    border-radius: 1.446vw;
    font-size: 3.614vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.point {
    margin-left: 0.723vw;
    font-size: 2.530vw;
}

.round {
    margin-left: 0.723vw;
    margin-bottom: 1.446vw;
}

.window {
    height: 2.891vw;
    width: 26.019vw;
    margin-top: 2.168vw;
    line-height: 2.891vw;
    background-color: #112d4e;
    font-size: 2.530vw;
    padding: 0.867vw;
    color: #88a4d6;
    border-radius: 1.446vw;
}

.touzi {
    height: 23.489vw;
    width: 30.356vw;
    background-color: #88a4d6;
    color: #112d4e;
    margin: 0 auto;
    border-radius: 1.446vw;
    margin-top: 1.446vw;
    font-weight: bold;
}

.touzi button {
    background-color: #112d4e;
}

#area {
    display: block;
    float: left;
    height: 14.455vw;
    width: 14.455vw;
    border-radius: 7.228vw;
    margin: 0 auto;
    background-color: #112d4e;
    margin: 0 1.446vw;
    margin-top: 4.481vw;
    box-shadow: 0.217vw 0.217vw 1.446vw rgb(16, 55, 73);
}

#operation {
    display: block;
    float: left;
    height: 11.564vw;
    width: 10.841vw;
    text-align: center;
    margin-top: 5.204vw;
}

#roll,
#restart {
    height: 5.782vw;
    width: 10.841vw;
    border-radius: 1.446vw;
    border: 0.000vw;
    color: #88a4d6;
    font-size: 2.168vw;
    margin-bottom: 1.446vw;
    box-shadow: 0.217vw 0.217vw 0.723vw rgb(16, 55, 73);
}

#roll:hover,
#restart:hover {
    transform: scale(1.05);
}

.touzi button:active {
    transform: scale(0.98);
    box-shadow: 0.217vw 0.145vw 1.590vw 0.072vw rgba(0, 0, 0, 0.24);
}

.right {
    float: left;
    height: 50.593vw;
    width: 36.138vw;
    background-color: #3f72af;
    margin: 2.168vw;
    border-radius: 1.446vw;
}