#maincontent { width:80%; max-width:none; margin:0 auto; padding:0 0 30px 0; }

#topbnhome { width:100%; height:280px; padding:20px 0 5px 0; text-align:center; transition:height 1s; }

.sptitle { width:95%; margin:0 auto 0 auto; padding:15px 0 0 0; text-align:center; font-size:22pt; color:var(--textpink); }
.sptitle a { color:var(--linkpj); }
.sptitle a:hover { color:var(--linkpjactive); }
.sptitle i { white-space:nowrap; font-size:14pt; font-style:normal; }

.sptool { padding:0 0 5px 0; text-align:center; color:var(--text3); }
.sptool a { display:inline-block; padding:5px; white-space:nowrap; color:var(--text2); }
.sptool a:hover { color:var(--linkactive); }

.spmorebt { display:block; box-sizing:border-box; width:93%; margin:10px auto; padding:15px 0; border-radius:5px; background-color:var(--primary); text-align:center; font-size:16pt; color:var(--primarytext); }
.spmorebt:hover { filter:brightness(1.2); }

.sphtmode { padding:10px 0px; text-align:center; font-size:12pt; color:var(--text3); }
.sphtmode a { display:inline-block; padding:7px 10px; border-width:1px; border-style:solid; border-color:var(--bg3) var(--bg3) var(--bg3) var(--bg2); text-align:center; white-space:nowrap; color:var(--text3); }
.sphtmode a:first-child { border-color:var(--bg3); border-radius:15px 0 0 15px; }
.sphtmode a:last-child { border-radius:0 15px 15px 0; }
.sphtmode a:hover { border-color:var(--bg4); }
.sphtmode a.active { border-color:var(--bg4); background-color:var(--bg3); color:var(--text); }

.spht { padding:15px 0 0 0; border-collapse:collapse; text-align:center; }
.spht .xbox { display:inline-block; box-sizing:border-box; width:25%; padding:10px 0; vertical-align:top; text-align:left; }
.spht .xlink { display:block; box-sizing:border-box; width:100%; padding:20px 17px; font-size:14pt; color:var(--text); }
.spht .xlink:hover { background-color:var(--bg2); color:var(--texthl); }
.spht img.ximg { width:100%; aspect-ratio:16/9; border-style:none; margin:0 0 2px 0; }
.spht span.ximg { position:relative; display:inline-block; width:100%; height:2px; padding:56.25% 0 0 0; }
.spht span.ximg img { position:absolute; width:100%; aspect-ratio:16/9; left:0; top:0; border-style:none; }
.spht span.ximg .xlabel { position:absolute; left:auto; right:-3px; top:-2px; width:50px; height:50px; border-style:none; }
.spht .xtitle { display:inline-block; box-sizing:border-box; width:100%; max-height:80px; overflow:hidden; }
.spht .xicon { max-width:120px; height:10px; border-style:none; }
.spht .xadsense_infeed { padding:26px 17px 17px 17px; text-align:center; }

.spht2 { border-collapse:collapse; text-align:center; }
.spht2 .xbox { display:inline-block; box-sizing:border-box; width:20%; padding:10px 0; vertical-align:top; text-align:left; }
.spht2 .xlink { position:relative; display:block; box-sizing:border-box; width:100%; padding:10px 14px; font-size:14pt; }
.spht2 img.ximg { width:100%; border-style:none; margin:0 0 2px 0; }
.spht2 span.ximg { position:relative; display:inline-block; width:100%; height:2px; padding:56.25% 0 0 0; }
.spht2 span.ximg img { position:absolute; width:100%; left:0; top:0; border-style:none; }
.spht2 span.ximg .xlabel { position:absolute; left:auto; right:-3px; top:-2px; width:50px; height:50px; border-style:none; }
.spht2 .xtitle { display:inline-block; box-sizing:border-box; width:100%; max-height:80px; overflow:hidden; }
.spht2 .xlink:hover { background-color:var(--bg2); color:var(--texthl); }
.spht2 .xicon { max-width:120px; height:10px; border-style:none; }
.spht2 .xadsense_infeed { padding:15px 14px; text-align:center; }

.sphttop { position:relative; box-sizing:border-box; width:98%; max-width:1500px; margin:0 auto; padding:20px 5px 5px 5px; text-align:center; font-size:12pt; }
.sphttop .xslide { width:calc(100% - 32px); overflow-x:hidden; text-align:left; white-space:nowrap; }
.sphttop .xlink { display:inline-block; box-sizing:border-box; width:16.66%; min-width:200px; padding:8px 10px; border:3px solid var(--bg); background-color:var(--bg2); vertical-align:top; text-align:left; white-space:normal; color:var(--text); }
.sphttop .xlink:hover { color:var(--texthl); }
.sphttop img.ximg { max-width:100%; border-style:none; }
.sphttop span.ximg { position:relative; display:inline-block; width:100%; height:2px; padding:56.25% 0 0 0; }
.sphttop span.ximg img { position:absolute; width:100%; left:0; top:0; border-style:none; }
.sphttop span.ximg .xlabel { position:absolute; left:auto; right:-3px; top:-2px; width:50px; height:50px; border-style:none; }
.sphttop .xtitle { display:inline-block; box-sizing:border-box; width:100%; height:64px; overflow:hidden; }
.sphttop .xicon { max-width:120px; height:10px; border-style:none; }
.sphttop .xmore { position:absolute; right:0; top:25%; display:inline-block; box-sizing:border-box; width:72px; height:72px; border:3px solid var(--bg); border-radius:50%; padding:10px; background-repeat:no-repeat; background-position:center center; background-size:72% 72%; background-color:var(--primary); vertical-align:middle; }
.sphttop .xmore:hover { transform:scale(1.1,1.1); animation:sphttop_ani1 0.8s; }
.sphttop .xnote { padding:5px 0 15px 0; text-align:center; color:var(--text4); }

@keyframes sphttop_ani1 {
	0% { transform:scale(1,1); border-color:var(--bg); }
	40% { transform:scale(1.4,1.4); border-color:var(--text); }
	100% { transform:scale(1.1,1.1); border-color:var(--bg); }
}

.sphtr { padding:25px 0 10px 0; text-align:center; font-size:14pt; }
.sphtr .xlink { display:inline-block;box-sizing:border-box; width:33%; margin:5px 0 0 0; padding:10px 5px 10px 20px; vertical-align:top; text-align:left; color:var(--text); }
.sphtr .xlink:hover { color:var(--linkactive); }
.sphtr .ximg { width:112px; height:63px; }
.sphtr .xtitle { display:inline-block; box-sizing:border-box; width:calc(100% - 112px); padding:0 0 0 5px; vertical-align:top; }

.sppr { padding:25px 0 10px 0; text-align:center; font-size:14pt; }
.sppr .xlink { display:inline-block;box-sizing:border-box; width:33%; margin:5px 0 0 0; padding:10px 5px 10px 20px; vertical-align:top; text-align:left; color:var(--text); }
.sppr .xlink:hover { color:var(--linkactive); }
.sppr .ximg { width:112px; height:63px; }
.sppr .xtitle { display:inline-block; box-sizing:border-box; width:calc(100% - 112px); padding:0 0 0 5px; vertical-align:top; }

.spvi { padding:20px 0 0 0; text-align:center; }
.spvi .xlink { position:relative; display:inline-block; box-sizing:border-box; width:16%; min-height:126px; padding:10px 15px; vertical-align:top; color:var(--text); }
.spvi .xlink:hover { color:var(--linkactive); }
.spvi .ximg { width:100%; max-width:240px; max-height:250px; margin:5px 0; border-style:none; }
.spvi .xlabel { position:absolute; left:164px; bottom:50px; border-style:none; }
.spvi .xplay { position:absolute; left:50%; top:50%; margin:0 0 0 -15px; opacity:0.5; border-radius:16px; }

.sppp { padding:20px 0 0 0; text-align:center; }
.sppp .xlink { display:inline-block; box-sizing:border-box; width:19.7%; padding:10px; vertical-align:top; color:var(--text2); }
.sppp .xlink:hover { color:var(--linkactive); }
.sppp .ximg { width:100%; }
.sppp .xtitle { display:inline-block; box-sizing:border-box; width:100%; max-height:60px; overflow:hidden; }

.spalbum { width:100%; overflow-x:auto; padding:20px 0 0 0; text-align:center; }
.spalbum .xvip { display:inline-block; box-sizing:border-box; width:100%; height:420px; }
.spalbum .xlink { display:inline-block; box-sizing:border-box; min-width:16%; padding:10px; vertical-align:middle; color:var(--text2); }
.spalbum .xlink b { color:var(--textpink); }
.spalbum .xlink .xh { display:inline-block; padding:0 0 4px 0; }
.spalbum .xlink img { width:160px; height:160px; }
.spalbum .xlink:hover img { box-shadow:0 0 12px var(--text2); }
.spalbum .xmore { padding:40px 10px; font-size:16pt; color:var(--text3); }
.spalbum .xmore:hover { color:var(--linkactive); }

.spquiz { padding:20px 0 0 0; text-align:center; }
.spquiz .xlink { display:inline-block; box-sizing:border-box; width:25%; padding:15px; vertical-align:top; text-align:left; color:var(--text); font-size:14pt; }
.spquiz .xlink:hover .ximg { box-shadow:0 0 7px var(--border); }
.spquiz .xlink .ximg { width :100%; margin:0 0 4px 0; border-style:none; }

.spchat { padding:20px 0 0 0; text-align:center; }
.spchat iframe { width:100%; height:775px; }

.splot { padding:20px 0 0 0; text-align:center; }
.splot .xs { display:inline-block; box-sizing:border-box; width:24.5%; padding:10px 5px; vertical-align:top; text-align:center; font-weight:bold; color:var(--textpink); }
.splot .xs b { display:inline-block; padding:5px 0 0 0; font-size:16pt; color:var(--text); }
.splot .xs1 b { font-size:20pt; }
.splot .xb2 b { font-size:20pt; }
.splot .xchk { padding:10px 0 0 0; }
.splot .xchk select ,
.splot .xchk input[type=text] ,
.splot .xchk input[type=submit] { box-sizing:border-box; max-width:150px; height:42px; vertical-align:top; text-align:center; font-size:16pt; }
.splot .xchk select { width:38%; }
.splot .xchk input[type=text] { width:30%; font-weight:bold; }

@media (max-width:1600px)	{
	#maincontent { width:98%; }
	}
@media (max-width:1400px)	{
	.sphttop .xlink { width:20%; }
	.spvi .xlink { width:20%; }
	.spvi .xv5 { display:none; }
	}
@media (max-width:1200px)	{
	.sphttop .xlink { width:25%; }
	.spht .xbox { width:33%; }
	.spht2 .xbox { width:25%; }
	.sppp .xlink { width:25%; }
	.spalbum .xlink img { width:140px; height:140px; }
	}
@media (max-width:1100px)	{
	.spquiz .xlink { width:33%; }
	.spvi .xlink { width:25%; }
	.spvi .xv4 { display:none; }
	}
@media (max-width:950px)	{
	.sphtr .ximg { width:96px; height:54px; }
	.sphtr .xtitle { width:calc(100% - 96px); }
	.sppr .ximg { width:96px; height:54px; }
	.sppr .xtitle { width:calc(100% - 96px); }
	.sphttop .xlink { width:33%; }
	.sppp .xlink { width:33%; }
	.spht2 .xbox { width:33%; }
	.spalbum .xlist{ width:100%; overflow-x:auto; white-space:nowrap; }
	.spalbum .xlink { white-space:normal; }
	}
@media (max-width:800px)	{
	.spht .xbox { width:50%; }
	.sphtr .xlink { width:50%; padding-left:10px; }
	.sppr .xlink { width:50%; padding-left:10px; }
	.spquiz .xlink { width:50%; }
	}
@media (max-width:700px) {
	.sppp .xlink { width:50%; }
	.spalbum .xvip { height:200px; }
	.spvi .xlink { width:50%; }
	.splot .xs { width:49%; }
	}
@media (max-width:500px)	{
	#maincontent { width:100%; }
	.sphttop .xmore { top:35%; width:50px; height:50px; }
	.sphttop .xslide { width:calc(100% - 21px); overflow-x:scroll; }
	.sphttop .xlink { width:70%; }
	.spht { font-size:14pt; }
	.spht .xbox { padding:15px 0; width:100%; }
	.spht .xadsense_infeed { width:100%; padding:25px 0; }
	.spht .xlink { padding:10px; }
	.spht .xlink:hover { background-color:transparent; }
	.sphtr .xlink { width:100%; padding:7px 0 7px 7px; }
	.spht2 .xbox { width:50%; }
	.spht2 .xlink { padding:10px; }
	.sppr .xlink { width:100%; padding:7px 0 7px 7px; }
	.sppp { font-size:14pt; }
	.sppp .xlink { width:100%; margin:5px 0; }
	.spvi { font-size:14pt; }
	.spvi .xlink { width:100%; margin:5px 0; }
	.spquiz .xlink { width:100%; }
	}
@media (max-width:400px)	{
	.sppr .xlink { width:100%; }
	.splot .xchk select ,
	.splot .xchk input[type=text] ,
	.splot .xchk input[type=submit] { font-size:14pt; }
	}

@media print { body { opacity:0; width:1px; height:1px; overflow:hidden; } }