body { max-width: 750px; margin: 0 auto; background: #fff; color: #1b8a95; }

input:focus, textarea:focus { outline: none; }
input { -webkit-appearance:none; }

textarea::-webkit-input-placeholder {
   color: #fff;
 }
 textarea::-moz-input-placeholder {
   color: #fff;
 }
 textarea::-ms-input-placeholder {
   color: #fff;
 }

.logo { width: 100%; padding-top: 30px; background-color: #fff; }
.logo img { display: block; width: 180px; margin: 0 auto; }

.canvas-img .logo { margin: 0; height: 122px; padding-top: 16px; box-sizing: border-box; }
.canvas-img .logo img { width: 140px;  }

.num-h1-box { margin: 30px 20px; height: 80px; }
.num-h2-box { margin-bottom: 15px; }
.num-h1 { text-align: center; font-size: 28px; line-height: 80px; margin: 0; color: #fff; font-weight: normal; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.num-h2 { text-align: center; font-size: 18px; line-height: 40px; margin: 0; color: #fff; font-weight: normal; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }

.tab .active { display: block; }

.img-bg { border-radius: 2px; background: url(../images/bg.jpg) center; }

.num-box { margin: 0 20px; padding: 20px 10px; border-radius: 2px; display: none; }
.num-box .num-list .list-part { width: 33.333333%; height: 65px; line-height: 65px; float: left; text-align: center; font-weight: bold; color: rgba(255, 255, 255, .6); text-shadow: 2px 2px 2px #538084, 0 0 0 #19191a, 2px 2px 2px #538084;}
.box-1 .list-part { font-size: 30px; }
.box-2 .list-part { font-size: 42px; }
.box-3 .list-part { font-size: 30px; }

.num-box .num-list .sele { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }
/* .num-box .num-list .list-part:active { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .8); } */
.num-box .num-list .null:active { color: rgba(255, 255, 255, .6); text-shadow: 2px 2px 2px #538084, 0 0 0 #19191a, 2px 2px 2px #538084;  }

.tab-btn { margin: 0 20px 15px 20px; }
.tab-btn input { display: block; float: left; width: 33.333333%; height: 36px; line-height: 36px; padding: 0; margin: 0; border: none; border-radius: 0; font-size: 16px; color: #1b8a95; background: rgba(255, 255, 255, .8); }
.tab-btn .button1 { border-radius: 2px 0 0 2px; }
.tab-btn .button3 { border-radius: 0 2px 2px 0; }
.tab-btn .selete { background: rgba(255, 255, 255, 0); color: #fff; }

.num-input { margin: 30px 20px 20px 20px; } 
.num-input textarea { width: 100%; height: 120px; border-radius: 2px; border: none; padding: 12px; box-sizing: border-box; font-size: 18px; background-color: rgba(255, 255, 255, 0); color: #fff; }
.num-input textarea:focus { outline: none; }


.num-xuanze { margin: 15px 20px 20px 20px; } 
.num-xuanze .xuanze-list { width: 100%; height: 65px; overflow: hidden; }
.num-xuanze .list-num { float: left; width: 16.666666%; line-height: 54px; text-align: center; color: #fff; font-size: 30px; text-shadow: 0 0 10px rgba(255, 255, 255, .8); font-weight: bold; }


.num-button { width: 100%; height: 50px; border-radius: 2px; border: none; font-size: 20px; color: #fff; }  
.num-button:focus { outline: none; }
.num-button:active { opacity: .9; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.num-button:hover { opacity: .9; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }

.num-btn { padding: 0 20px 20px 20px; background-color: #fff; }
.num-btn .num-button { margin-top: 10px; }
.num-btn .num-button-b { height: 70px; line-height: 70px; }

table { text-align: center; border-collapse: collapse; border: none; }
tbody { margin: 0 auto; }
table tr td { border:1px solid rgba(255, 255, 255, .2); display: inline-block; margin-left: -1px; width: 12.5%; box-sizing: border-box; margin-top: -1px; font-size: 24px; color: rgba(255, 255, 255, .5); } 
/* @media (max-width: 750px) { table tr td { height: 87.38px; line-height: 87.38px; } } */
@media (max-width: 414px) { table tr td { height: 45.38px; line-height: 45.38px; } }
@media (max-width: 411px) { table tr td { height: 45px; line-height: 45px; } }
@media (max-width: 375px) { table tr td { height: 40.5px; line-height: 40.5px; } }
@media (max-width: 360px) { table tr td { height: 38.63px; line-height: 38.63px; } }
@media (max-width: 320px) { table tr td { height: 33.63px; line-height: 33.63px; } }
table tr .on { color: #fff; text-shadow: 0 0 10px #fff; }
.num-h3 { font-size: 24px; font-weight: normal; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.canvas-img { width: 320px; box-sizing: border-box; position: fixed; top: 0; z-index: -1; display: none; text-align: center; overflow: hidden; }
.canvas-img table tr td { height: 33.63px; line-height: 33.63px; }
.canvas-img .num-h3 { margin-top: 0; margin-bottom: 20px; padding-top: 20px; }
.canvas-img .img-bg { padding-bottom: 14px; }

.poster { position:fixed; width: 100%; height: 100%; top: 0; text-align: center; box-sizing: border-box; z-index: 99999; background: rgba(255, 255, 255, 0.9); display: none; }
.poster-box { width: 82%; height: auto; left: 50%; top: 46%; position: absolute; transform: translate(-50%, -50%); }
.poster-box .poster-box-img img { width: 100%; height: auto; border-radius: 2px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, .2); }
.poster-box p { color: rgba(0, 0, 0, 0.8); text-align: center; margin-bottom: 20px; }
.poster-box i { font-size: 18px; font-style: normal; color: rgba(0, 0, 0, 0.6); line-height: 4; }