.mainbox { width:80%; max-width:1200px; padding-bottom:50px; font-size:12pt; }

h1 { margin:0; padding:10px 0 0 0; font-size:32pt; }

.splist { padding:10px 0; }
.splist .xbox { padding:5px 0 15px 0; }
.splist .ximglink { display:inline-block; box-sizing:border-box; width:40%; padding:10px; vertical-align:top; }
.splist .ximglink img { width:100%; max-height:480px; }
.splist .ximglink .xnone { display:inline-block; width:100%; height:0; padding:56.25% 0 0 0; background-color:var(--bg3); }
.splist .xtext { display:inline-block; box-sizing:border-box; width:60%; padding:10px 5px; vertical-align:top; }
.splist .xtitle { display:block; padding:0 0 5px 0; font-size:20pt; }
.splist .xpics { display:inline-block; box-sizing:border-box; width:100%; padding:5px 5px 0 0; }
.splist .xpic { display:inline-block; box-sizing:border-box; width:33.3%; padding:0 10px 7px 0; }
.splist .xpic2 { display:inline-block; width:100%; height:0; padding:100% 0 0 0; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.splist .xdesc { padding:0 10px 10px 0; font-size:14pt; word-break:break-all; }
.splist .xmore { display:inline-block; padding:5px 10px; border-radius:5px; background-color:var(--bg2); vertical-align:top; }

.sptop { position:relative; box-sizing:border-box; width:98%; max-width:1500px; margin:0 auto; padding:25px 0 15px 0; text-align:center; font-size:12pt; }
.sptop .xslide { width:100%; overflow-x:hidden; text-align:left; white-space:nowrap; }
.sptop .xlink { position:relative; display:inline-block; box-sizing:border-box; width:16.66%; min-width:200px; padding:10px; vertical-align:top; text-align:left; white-space:normal; color:var(--text); }
.sptop .ximg { width:100%; border-style:none; }
.sptop span.ximg { display:inline-block; height:0; padding:56.25% 0 0 0; background-color:var(--bg3); }
.sptop .xtitle { display:inline-block; box-sizing:border-box; width:100%; height:64px; overflow:hidden; }
.sptop .xlink:hover { background-color:var(--bg2); color:var(--texthl); }
.sptop .xmore { position:absolute; right:-25px; top:5px; display:inline-block; box-sizing:border-box; width:72px; height:72px; border:3px solid #fff; border-radius:50%; padding:10px; background-color:#d119a6; vertical-align:middle; }
.sptop .xmore img { width:100%; border-radius:50%; border:none; }
.sptop .xmore:hover { transform:scale(1.1,1.1); background-color:#ff6cdd; animation:sptop_ani1 0.8s; }
.sptop .xnote { padding:5px 0 15px 0; text-align:center; color:var(--text3); }

@media (max-width:1200px)	{
	.mainbox { width:96%; }
	.sptop .xlink { width:25%; }
	.sptop .xmore { right:-10px; }
}
@media (max-width:950px)	{
	.sptop .xlink { width:33%; }
}
@media (max-width:600px)	{
	.splist .ximglink { width:100%; padding:5px 5px 0 5px; }
	.splist .xtext { width:100%; }
	.splist .xpic { padding:0 5px 10px 5px; }
}
@media (max-width:500px)	{
	.mainbox { width:100%; }
	.sptop .xmore { top:15px; width:56px; height:56px; }
	.sptop .xslide { overflow-x:scroll; }
	.sptop .xlink { width:70%; }
}
@media (max-width:400px)	{
	.splist .xdesc { font-size:13pt; }
}
@media (max-width:340px)	{
	.splist .xdesc { font-size:12pt; }
}