.ysr_img_dialog {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.ysr_img_dialog .ysr_bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 0;
	opacity: 0;
}
.ysr_img_dialog .img_index {
	position: absolute;
	font-size: 20px;
	color: #fff;
	left: 10px;
	top: 10px;
	z-index: 20;
}
.ysr_img_dialog .img_list_item {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
}
.ysr_img_dialog .img_list_item .ysr_img_item {
	width: 100%;
	height: 100%;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: top;
	white-space: normal;
}
.ysr_img_dialog .load {
	position: relative;
}
.ysr_img_dialog .load:after {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 100px 100px;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='//www.w3.org/2000/svg' xmlns:xlink='//www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
	animation: round 2s ease-in-out infinite;
}
@keyframes round {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
.ysr_img_dialog .ysr_img_box {
	position: absolute;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	-webkit-backface-visibility: hidden;
}
.ysr_img_dialog .ysr_img_box img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	margin: 0 10px;
}
@media (max-width: 768px) {
	.ysr_img_dialog .ysr_img_box img {
		max-width: 100%;
		max-height: 100%;
	}
}
.ysr_img_dialog .right_img_btn,
.ysr_img_dialog .left_img_btn {
	display: block;
	font-size: 50px;
	color: #fff;
	cursor: pointer;
	border-radius: 5px;
	padding: 10px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	width: 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	z-index: 100;
	text-align: center;
	height: 50px;
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	-ms-border-radius: 999px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid #fff;
	font-size: 20px;
}
.ysr_img_dialog .right_img_btn i,
.ysr_img_dialog .left_img_btn i {
	color: #fff;
	font-size: inherit;
}
@media (min-width: 1024px) {
	.ysr_img_dialog .right_img_btn,
	.ysr_img_dialog .left_img_btn {
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}
	.ysr_img_dialog .right_img_btn:hover,
	.ysr_img_dialog .left_img_btn:hover {
		border-color: #ff8a00;
	}
}
@media (max-width: 768px) {
	.ysr_img_dialog .right_img_btn,
	.ysr_img_dialog .left_img_btn {
		display: none;
	}
}
.ysr_img_dialog .top_item {
	position: fixed;
	top: 30px;
	z-index: 110;
	color: #fff;
	right: 30px;
	font-size: 20px;
	cursor: pointer;
}
.ysr_img_dialog .top_item i {
	font-size: inherit;
}
.ysr_img_dialog .code_img {
	right: 100px;
}
@media (max-width: 768px) {
	.ysr_img_dialog .code_img {
		display: none;
	}
}
@media (min-width: 1024px) {
	.ysr_img_dialog .code_img {
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}
	.ysr_img_dialog .code_img:hover .code_img_box {
		display: block;
	}
}
.ysr_img_dialog .code_img .code_img_box {
	display: block;
	width: 150px;
	background: #fff;
	overflow: hidden;
	border-radius: 3px;
	position: absolute;
	top: 25px;
	left: 50%;
	display: none;
	margin-left: -75px;
}
.ysr_img_dialog .code_img .code_img_box span {
	display: block;
	text-align: center;
	font-size: 16px;
	color: #333;
	margin-bottom: 10px;
}
.ysr_img_dialog .code_img .code_img_box img {
	display: block;
	width: 100%;
}
.ysr_img_dialog .right_img_btn {
	right: 5px;
}
.ysr_img_dialog .left_img_btn {
	left: 5px;
}
.ysr_img_dialog .dialog_tool_bar {
	position: fixed;
	bottom: 0;
	z-index: 12;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 30px;
	padding-right: 30px;
}
@media (max-width: 768px) {
	.ysr_img_dialog .dialog_tool_bar {
		display: none;
	}
}
.ysr_img_dialog .dialog_tool_bar .btn {
	margin: 0 10px;
	float: right;
	cursor: pointer;
	padding: 5px 10px;
	text-align: center;
	min-width: 80px;
	position: relative;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 2px;
	border: 1px solid #fff;
	font-size: 14px;
	color: #fff;
	opacity: 0.8;
	white-space: nowrap;
}
.ysr_img_dialog .dialog_tool_bar .btn i {
	font-size: inherit;
	line-height: inherit;
	margin-left: 5px;
}
.ysr_img_dialog .dialog_tool_bar .btn .btn_select_list {
	width: 100%;
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	box-sizing: border-box;
	display: none;
}
.ysr_img_dialog .dialog_tool_bar .btn .btn_select_list div {
	padding: 3px 0;
	box-sizing: border-box;
}
.ysr_img_dialog .dialog_tool_bar .btn .btn_select_list div:hover {
	background: rgba(6, 6, 6, 0.3);
}

/*# sourceMappingURL=img_preview.css.map */