.mainbox { padding-bottom:50px; }

h1 { margin:20px 0 15px 0; padding:0; text-align:center; }

.spadsensetop { width:970px; height:250px; }
@media (max-height:680px) { .spadsensetop { width:728px; height:90px; } }
@media (max-width:1000px) { .spadsensetop { width:728px; height:90px; } }
@media (max-width:800px) { .spadsensetop { width:640px; height:200px; } }
@media (max-width:700px) { .spadsensetop { width:320px; height:100px; } }

.spclip { padding:10px 0 0 0; text-align:center; }
.spclip .xtitle { padding:0 0 5px 0; font-size:14pt; }
.spclip .xtitle b { color:#080; }
.spclip iframe { width:100%; max-width:1000px; aspect-ratio:16/9; }
.spwait { width:100%; margin:10px 0 0 0; padding:20vh 0; background-color:#000; text-align:center; font-size:22pt; color:#090; }
.spwait i { font-size:14pt; font-style:normal; }

.spbt { display:inline-block; box-sizing:border-box; padding:10px 18px; border-radius:12px; border-width:1px; border-style:solid; border-color:#EEE #666 #666 #EEE; background:linear-gradient(0deg,#D0D4D9,#FFF); text-align:center; font-size:14pt; color:#22242f; cursor:pointer; }
.spbt:hover { box-shadow:0 0 10px rgba(255,255,255,0.6); border-color:#000; color:#18191d; }

.spboxes { text-align:center; }
.spboxes .xshowbt { display:inline-block; box-sizing:border-box; width:48%; margin:20px 2% 0 0; }

.spshbar { display:inline-block; box-sizing:border-box; width:50%; margin:20px 0 0 0; text-align:center; }
.spshbar .xlabel { display:inline-block; padding:0 7px 0 0; vertical-align:middle; font-size:12pt; }
.spshbar .xbt { display:inline-block; box-sizing:border-box; width:44px; height:44px; margin:0 1.5%; border-radius:50%; background-color:#457; background-repeat:no-repeat; background-position:center; background-size:55% 55%; vertical-align:middle; cursor:pointer; transition:transform 0.2s; }
.spshbar .xbt:hover { transform:scale(1.1); background-size:65% 65%; }
.spshbar .xbt.xfb { background-color:#0866FF; }
.spshbar .xbt.xfbm { background-color:#448aff; }
.spshbar .xbt.xline { background-size:60% 60%; background-color:#06C755; }
.spshbar .xbt.xline:hover { background-size:75% 75%; }
.spshbar .xbt.xx { background-color:#000; }

.splist { padding:25px 0 18px 0; text-align:center; font-size:14pt; }
.splist h3 { font-size:18pt; }
.splist .xlink { position:relative; display:inline-block; box-sizing:border-box; width:25%; padding:18px 15px; vertical-align:top; }
.splist .ximg { width:100%; border-style:none; }
.splist .xtitle { display:inline-block; width:100%; padding:4px 0 0 0; }

@media (max-width:900px) {
	.spboxes .xshowbt { display:block; width:98%; max-width:500px; margin:20px auto 0 auto; }
	.spshbar { display:block; width:100%; margin:20px 0 0 0; }
	.splist .xlink { width:33%; }
}
@media (max-width:500px) {
	.splist .xlink { width:100%; }
}