.mainbox { box-sizing:content-box; max-width:1100px; }
/* @media (min-width:1200px) { #mainbox1 { padding-left:15px; padding-right:330px; } } */

.spmsg { margin:30px 0 20px 0; text-align:center; font-size:16pt; color:var(--text2); }

.spnextmsg { margin:20px 0 30px 0; font-size:14pt; color:var(--text); }

.spcd { margin:10px 0; text-align:center; font-size:14pt; color:var(--textblue); }
.spcd a { color:var(--textblue); }
.spcd .xg { display:inline-block; box-sizing:border-box; width:30%; max-width:100px; padding:15px 0 0 0; vertical-align:top; }
.spcd .xn { display:inline-block; box-sizing:border-box; width:45%; max-width:40px; padding:5px 0; border-radius:7px; border:1px solid var(--bg2); background-color:var(--text); vertical-align:top; font-size:24pt; color:var(--bg); }
.spcd .xu { display:inline-block; box-sizing:border-box; width:100%; color:var(--text); }

#cform { box-sizing:border-box; width:100%; margin:15px 0 10px 0; text-align:center; }
#cform input { box-sizing:border-box; vertical-align:middle; }
#cform input[type=number] { width:calc(100% - 165px); height:50px; padding:5px 0 5px 40px; border-radius:10px; outline:none; border:1px solid var(--bg4); background-repeat: no-repeat; background-position:8px 12px; font-size:20pt; font-weight:bold; color:var(--text); }
#cform input[type=number]:focus { border-color:var(--text4); }
#cform input[type=number]::placeholder { font-size:16pt; color:var(--text4); }
#cform input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
#cform input[type=submit] { width:140px; height:50px; margin-left:10px; border-radius:10px; outline:none; border:1px solid var(--primary); background-color:var(--primary); font-size:14pt; color:var(--primarytext); }
#cform input[type=submit]:hover { border-color:var(--text); }
#cform .xscan { display:inline-block; box-sizing:border-box; height:54px; margin:5px 0 5px 5px; padding:5px 0 0 12px; border-left:1px solid var(--bg4); vertical-align:middle; font-size:14pt; color:var(--linkpj); }
#cform .xscan img { margin:0 3px 0 0; vertical-align:middle; }
#cform .xscan:hover { filter:brightness(115%); }

h1 { margin:0; padding:15px 0 0 0; text-align:center; font-size:28pt; }
h2 { margin:0; padding:15px 0 0 0; text-align:center; font-size:20pt; }

.sptitle { margin:15px 0 15px 0; text-align:center; font-size:14pt; }
.sptitle2 { margin:15px 0 30px 0; text-align:center; font-size:14pt; }

.splot { max-width:800px; margin:0 auto; padding:10px 0; text-align:center; }
.splot .xbox { display:inline-block; width:49%; vertical-align:top; }
.splot .xtitle { padding:35px 0 10px 0; text-align:center; font-size:18pt; color:var(--text2); }
.splot .xtitle5 { font-size:18pt; color:var(--textred); font-weight:bold; }
.splot .xres { font-size:18pt; font-family:sans-serif; color:var(--text); }
.splot .xres b { display:inline-block; box-sizing:border-box; width:20%; padding:10px 3px; }
.splot .xres i { color:var(--text4); }
.splot .xprize { padding:3px 0 5px 0; text-align:center; font-size:11pt; color:var(--text3); }
.splot .xs1 { display:inline-block; width:49%; vertical-align:top; }
.splot .xs1 .xtitle { padding-top:25px; }
.splot .xs1 .xres b { width:auto; max-width:none; font-size:60px; line-height:50px; font-weight:bold; color:var(--textred); }
.splot .xn1 .xres b { width:40%; max-width:200px; font-weight:bold; }
.splot .xb2 { display:inline-block; width:49%; vertical-align:top; }
.splot .xb2 .xtitle { padding-top:25px; }
.splot .xb2 .xres b { width:auto; font-size:60px; line-height:50px; font-weight:bold; }
.splot .xb3 { display:inline-block; width:49%; max-width:400px; vertical-align:top; }
.splot .xb3 .xres b { width:40%; max-width:100px; font-size:28pt; font-weight:bold; }
.splot .xline0 { padding:7px 0; background-color:var(--bg2); }
.splot .xline1 { padding:7px 0; }

.spshimg { display:block; margin:30px 0 0 0; text-align:center; }
.spshimg .xbox { display:inline-block; box-sizing:border-box; width:49%; max-width:320px; padding:5px 2%; vertical-align:top; font-size:12pt; color:var(--text); }
.spshimg img { width:100%; border-radius:5px; }

.spsh { width:100%; max-width:1200px; margin:0 auto; padding:0 0 10px 0; text-align:center; white-space:nowrap; }
.spsh a { display:block; box-sizing:border-box; width:100%;  margin:15px 0 0 0; padding:10px; border-radius:5px; border-left:1px solid var(--bg2); background-color:#888; text-align:center; font-size:14pt; color:#fff; }
.spsh a:hover { filter:contrast(1.2); }
.spsh .xfb { background-color:#3c5a9a; }
.spsh .xtw { background-color:#04b7ed; }
.spsh .xln {background-color:#00c900; }

.spclip { padding:20px 0 0 0; text-align:center; }
.spclip .xtitle { padding:0 0 5px 0; font-size:14pt; }
.spclip .xtitle a { color:var(--text); }
.spclip .xtitle b { color:var(--textgreen); }
.spclip iframe { width:100%; max-width:640px; height:360px; }

#showform { margin:0; padding:10px 0; text-align:center; }
#showform .xlabel { display:inline-block; box-sizing:border-box; padding:0 7px 0 0; vertical-align:middle; font-size:14pt; }
#showform input ,
#showform select { box-sizing:border-box; height:40px; margin-top:8px; vertical-align:middle; font-size:14pt; }
#showform select[name=date] { width:calc(100% - 160px); max-width:200px; }
#showform input[type=submit] { font-weight:bold; }

.spwins { padding:20px 0 0 0; text-align:center; }
.spwins .xtitle { font-size:18pt; color:var(--textred); }
.spwins .xcount { display:inline-block; box-sizing:border-box; width:100%; max-width:640px; margin:5px 0; padding:5px 10px; border-radius:16px; background-color:var(--bgred); font-size:14pt; line-height:22px; color:var(--text); }
.spwins .xnote { font-size:13pt; color:var(--text3); }

.splist { padding:30px 0 0 0; font-size:11pt; }
.splist h3 { margin:0; padding:0 0 15px 0; text-align:center; font-size:12pt; }
.splist .xbody { text-align:center; }
.splist .xlink { display:block; box-sizing:border-box; width:100%; max-width:800px; margin:0 auto 10px auto; padding:10px; border-radius:10px; background-color:var(--bg2); text-align:center; white-space:nowrap; color:var(--text); }
.splist .xlink:hover { background-color:var(--bg3); }
.splist .xlink .xdate { display:inline-block; box-sizing:border-box; width:30%; vertical-align:middle; }
.splist .xlink .xd { display:inline-block; padding:0 6px 0 0; vertical-align:middle; text-align:right; font-size:28pt; line-height:40px; }
.splist .xlink .xmy { display:inline-block; vertical-align:middle; text-align:left; white-space:wrap; font-size:12pt; line-height:20px; }
.splist .xlink .xreses { display:inline-block; box-sizing:border-box; width:70%; vertical-align:middle; text-align:left; white-space:normal; }
.splist .xlink .xres { display:inline-block; padding:5px 10px; vertical-align:middle; text-align:center; white-space:nowrap; }
.splist .xlink .xres i { display:inline-block; padding:0 0 5px 0; font-style:normal; }
.splist .xlink .xres b { display:inline-block; padding:5px 10px; border-radius:5px; background-color:var(--bg0); vertical-align:middle; font-size:14pt; }
.splist .xlink2 { display:inline-block; box-sizing:border-box; width:150px; margin:0 0 5px 0; padding:10px 5px; border-radius:5px; text-align:left; color:var(--text2); }
.splist .xlink2:hover { background-color:var(--bg2); }
.splist .active { background-color:var(--bg3); color:var(--text); }

.spdn { margin:15px 0 0 0; padding:15px 5px; background-color:var(--primary); text-align:center; font-size:16pt; font-family:prompt,sans-serif; font-weight:bold; color:var(--primarytext); }
.spdn .x1 { font-size:24pt; }
.spdn .x2 { padding:5px 0 10px 0; }
.spdn .xqrimg { width:250px; height:250px; }

.spht { padding:25px 0 18px 0; text-align:center; font-size:14pt; }
.spht h3 { font-size:18pt; }
.spht .xlink { position:relative; display:inline-block; box-sizing:border-box; width:33%; padding:18px 15px; vertical-align:top; text-align:left; color:var(--text); }
.spht .xlink:hover { color:var(--linkactive); }
.spht .ximg { width:100%; aspect-ratio:16/9; margin:0 0 2px 0; border-style:none; }
.spht .xicon { height:10px; border-style:none; }
.spht .xlabel { position:absolute; right:14px; top:17px; width:50px; height:50px; border-style:none; }
.spht .xtitle { display:inline-block; width:100%; padding:4px 0 0 0; }
.spht .xmore { vertical-align:middle; text-align:center; }
.spht .xmore .xmorelabel { display:block; padding:15px 0; font-size:16pt; }

.spfbcm { padding:10px; }
.spfbcm .xtitle { font-size:18pt; color:var(--textblue); }
.spfbcm .xbody { max-width:800px; margin:10px auto 0 auto; }

.spappbar { position:fixed; display:block; left:0; bottom:0; box-sizing:border-box; width:100%; height:46px; overflow:hidden; background-color:var(--bg2); text-align:center; }
.spappbar .xicon { width:36px; height:36px; margin:5px 0 0 0; border:none; vertical-align:top; }
.spappbar .xtext { display:inline-block; margin:9px 0 0 5px; vertical-align:top; font-size:16pt; color:var(--textblue); }
.spappbar .xbt { display:inline-block; margin:8px 0 0 10%; padding:5px 10px; border-radius:5px; border:1px solid var(--text3); background-color:var(--bgblue); vertical-align:top; font-size:12pt; color:var(--text); }
.spappbar .xclosebt { float:right; display:block; width:36px; height:36px; text-align:center; font-size:20px; line-height:30px; color:var(--text3); }

.spprint { display:inline-block; margin:0 15px 12px 15px; padding:2px 6px; vertical-align:middle; border-radius:4px; border:1px solid #d4d4d4; background-color:#eee; color:#666; white-space:nowrap; }
.spprint:hover { border-color:#bbb; color:#000; }

#tophtbox { padding:20px; text-align:center; }

#sidesticky { position:absolute; right:4px; top:100px; width:300px; height:600px; background-color:var(--bg2); }
@media(max-width:1200px) { #sidesticky { display:none; } }

@media(max-width:900px){
	#showform { padding-left:10px; }
}
@media (max-width:800px) {
	.splot .xbox { width:100%; }
	.spht .xlink { width:50%; }
}
@media (max-width:700px) {
	.splot .xres b { width:19%; }
	.splist .xlink .xdate { display:block; width:100%; max-width:none; text-align:left; }
	.splist .xlink .xreses { display:block; width:100%; text-align:center; }
}
@media (max-width:500px) {
	h1 { font-size:26pt; font-weight:bold; }
	h2 { font-size:20pt; }
	#cform input[type=number]::placeholder { font-size:14pt; }
	.splot .xs1 { width:55%; }
	.splot .xb2 { width:45%; }
	.splot .xb3 .xres b { width:44%; font-size:26pt; }
	.splot .xres5 b { width:24%; }
	.spclip iframe { max-width:420px; height:236px; }
	#showform .xlabel { width:90px; text-align:right; }
	.spdn .x1 { font-size:22pt; }
	.spht .xlink { width:100%; }
}
@media (max-width:450px) {
	.splot .xres5 b { width:32%; }
}
@media (max-width:400px) {
	.splot .xs1 { width:58%; }
	.splot .xb2 { width:42%; }
	.splot .xs1 .xres b { font-size:50px; line-height:40px; }
	.splot .xb2 .xres b { font-size:50px; line-height:40px; }
}
@media (max-width:340px) {
}