@import "../default-skin.less";
@import "../../global/mixin.less";

// 幻灯组件
.c_slide {
	overflow:hidden; width:100%; position:relative;
	> .pic {
		> ul { width:400%; overflow:hidden; display:table; table-layout:fixed;}
		> ul > li { display:table-cell; vertical-align:top;} 
		> ul > li img { width:100%;}
	}
	> .fn {
		display:none;
		.prev,
		.next { position:absolute; top:0; bottom:0; left:0; margin:auto auto auto 0; cursor:default; width:3em; height:4.5em; background:rgba(0,0,0,0.3); text-align:center; line-height:4.5em; color:@bg;}
		.next { top:0; right:0; left:auto; bottom:0;}
		.prev:after,
		.next:after { font-size:150%; display:inline-block;}
		.prev:after { font-family:"ico"; content:"\e009";}
		.next:after { font-family:"ico"; content:"\e05a";}
	}
	> .page {
		position:absolute; z-index:19; bottom:0.25*@gap; text-align:center; width:100%;
		span { height:0.75em; width:0.75em; border-radius:80%; background:rgba(0,0,0,0.3); margin:0.125*@gap; display:inline-block; cursor:pointer;}
		span.on { background:rgba(0,0,0,1);}
	}
}



// 帧数设置
.c_slide-2 > .pic > ul { width:200%;}
.c_slide-3 > .pic > ul { width:300%;}
.c_slide-4 > .pic > ul { width:400%;}
.c_slide-5 > .pic > ul { width:500%;}
.c_slide-6 > .pic > ul { width:600%;}
.c_slide-7 > .pic > ul { width:700%;}
.c_slide-8 > .pic > ul { width:800%;}
.c_slide-9 > .pic > ul { width:900%;}
.c_slide-10 > .pic > ul { width:1000%;}



// 缩图
.c_slide {
	> .thumb {
		height:3em; margin-top:0.5*@gap; overflow:hidden; position:relative;
		.prev,
		.next { width:3em/1.667; height:3em/1.667; line-height:3em/1.667; text-align:center; cursor:pointer; color:@fg-light-8; font-size:166.67%; text-align:center;}
		.prev { float:left;}
		.next { float:right;}
		.prev:after { font-family:"ico"; content:"\e009";}
		.next:after { font-family:"ico"; content:"\e05a";}
		.list { position:absolute; left:3em; right:3em; white-space:nowrap; overflow:hidden; text-align:center;}
		ul li { border:1px solid @fg-light-8-5; overflow:hidden; display:inline-block; margin-left:0.25*@gap; position:relative; height:3em; width:3em; text-align:center; box-sizing:border-box;}
		ul li:first-child { margin-left:0;}
		ul li img { width:auto; height:3em; max-width:none; position:absolute; left:50%; top:0; transform:translateX(-50%);}
		ul li.on { border-color:@danger;}
	}
	> .thumb ~ .fn {
		.prev,
		.next { bottom:3+0.5*@gap;}
	}
}
.c_slide-size-4  { width:3*2+3*4+(4-1)*0.5*@gap;}
.c_slide-size-5  { width:3*2+3*5+(5-1)*0.5*@gap;}
.c_slide-size-6  { width:3*2+3*6+(6-1)*0.5*@gap;}
.c_slide-size-7  { width:3*2+3*7+(7-1)*0.5*@gap;}
.c_slide-size-8  { width:3*2+3*8+(8-1)*0.5*@gap;}
.c_slide-size-9  { width:3*2+3*9+(9-1)*0.5*@gap;}
.c_slide-size-10 { width:3*2+3*10+(10-1)*0.5*@gap;}