.df_gallery_html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	.df_gallery_html body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
.df_gallery_open {
}
.df_gallery_hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
	visibility: hidden
}

.df_gallery {
	width: 100%;
	height: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99999999;
	overflow:hidden;
}
	.df_gallery_bg {
		width: 100%;
		height: 100%;
		background: #202020;
		transition-duration: inherit;
		transition-property: opacity;
		transition-timing-function: cubic-bezier(.47, 0, .74, .71);
		opacity: 0;
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
	}
		.df_gallery_open .df_gallery_bg {
			opacity: 0.96;
			transition-timing-function: cubic-bezier(.22, .61, .36, 1);
		}
	.df_gallery_box {
		background: transparent;
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
	}
		.df_gallery_num {
			width: 100%;
			height: 80px;
			z-index: 99999;
			opacity: 1;
			transition: opacity .25s, visibility 0s;
			background: linear-gradient(0deg, transparent 0, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.8));
			position: absolute;
			top: 0px;
			left: 0px;
			overflow:hidden;
			z-index:100040;
		}
			.df_gallery_num h3 {
				line-height: 50px;
				margin-right:10px;
				padding-left: 45px;
				font-size:16px;
				font-weight:100;
				color:#ffffff;
				background: url(/images/df_2021_03.png) no-repeat 5px 7px;
				float:left;
			}
			.df_gallery_num p {
				line-height: 50px;
				margin-right:20px;
				float:left;
			}
				.df_gallery_num p span {
					margin-right: 5px;
					font-size:14px;
					color: #5dbeff;
					float:left;
				}
				.df_gallery_num p i {
					margin-right: 5px;
					font-size:14px;
					font-style:normal;
					color: #999999;
					float:left;
				}
				.df_gallery_num p font {
					margin-right: 5px;
					color: #ffffff;
					float:left;
				}

		.DF_G_Show_toolbar .df_g_pic_toolbar {
			z-index:100050;
		}
		.DF_G_Show_toolbar .df_g_pic_toolbar {
			opacity: 1;
			visibility: visible;
			transition: opacity .25s, visibility 0s;
		}
		.df_g_pic_toolbar {
			direction: ltr;
			z-index: 99997;
			opacity: 0;
			visibility: hidden;
			transition: opacity .25s, visibility 0s linear .25s;
			box-sizing: border-box;
			position: absolute;
			top: 0px;
			right: 0px;
		}
			.df_pic_close {
				width: 45px;
				height: 45px;
				line-height: 45px;
				margin-right: 0px;
				margin-top: 0px;
				padding: 0px;
				border-radius: 0%;
				text-align: center;
				transition: 0.2s  ease;
				background: transparent;
				cursor: pointer;
				vertical-align: top;
				outline: none;
				display: inline-block;
				position: relative;
				border: 0;
			}
				.df_pic_close:before {
					width: 16px;
					height: 2px;
					content: "";
					background: #ffffff;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					position: absolute;
					top: calc(50% - 1px);
					left: calc(50% - 8px);
					display: inline-block;
				}
				.df_pic_close:after {
					width: 16px;
					height: 2px;
					content: "";
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
					background: #ffffff;
					position: absolute;
					top: calc(50% - 1px);
					left: calc(50% - 8px);
					display: inline-block;
				}
			.df_pic_close:active{
				background: rgba(255,0,0,0.7);g);
				transform: rotate(360deg);
			}
	#tl_g_hide_foot {
		width: 25px;
		height: 25px;
		line-height: 25px;
		cursor:pointer;
		background-color:#900;
		background:url(/images/df_2021_04.png) no-repeat  center center;
		transition: 0.2s  ease;
		position:absolute;
		bottom: 10px;
		right: 10px;
		z-index:100030;
		display: inline-block;
	}
	.tl_g_hide_up {
		-webkit-transform: rotate(180deg);
	}
	.DF_G_Show_title .df_pic_foot {
		opacity: 1;
		visibility: visible;
		transition: opacity .25s, visibility 0s;
	}
		.df_pic_foot {
			padding: 50px 20px 20px 20px;
			pointer-events: none;
			visibility: hidden;
			transition: opacity .25s, visibility 0s linear .25s;
			box-sizing: border-box;
			background: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.8));
			position: absolute;
			bottom: 0px;
			left: 0px;
			right: 0px;
			z-index: 100020;
		}
			.df_pic_foot h6 {
				line-height: 20px;
				color: #ffffff;
				font-size: 14px;
				font-weight:100;
				text-indent: 2em;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				-webkit-text-size-adjust: none;
			}
			.df_pic_foot h6 span {
				padding-left:5px;
				color: #5dbeff;
				font-size: 14px;
				font-weight:100;
			}
			.df_pic_foot h6 span em {
				padding-left:5px;
				color: #ff9900;
				font-size: 14px;
				font-weight:100;
			}
			.df_pic_foot h6 span font {
				margin-right: 5px;
				color: #cccccc;
				cursor:pointer;
			}
			.df_pic_foot h6 span font b {
				font-weight:100;
				color: #ffffff;
				cursor:pointer;
			}


	
		.DF_G_Show_nav .df_g_prev_next {
			opacity: 0.6;
		}
		.DF_G_Show_nav .df_g_prev_next[disabled] {
			opacity: 0.3;
		}
			.df_g_prev_next {
				width: 50px;
				height: 100px;
				margin-top: -50px;
				padding: 0px;
				border: 0px;
				outline: none;
				background: none;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				transition: opacity .25s;
				position: absolute;
				top: 50%;
				z-index: 100040;
				opacity: 0;
			}
				.df_g_prev_next:after {
					width: 40px;
					height: 40px;
					content: "";
					background-color: rgba(0,0,0,0.0);
					background-image: url(/images/df_2021_06.png);
					background-repeat: no-repeat;
					background-position: 50%;
					background-size: 14px 27px;
					position: absolute;
					top: 28px;
				}
				.df_g_next {
					right: 0px;
				}
				.df_g_prev {
					left: 0px;
					-webkit-transform: scaleX(-1);
					transform: scaleX(-1);
				}
				.df_g_prev:after, 
				.df_g_next:after {
					left: 0px;
				}
.df_g_pic_stage {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
	direction: ltr;
	z-index: 100010;
	-webkit-transform: translateZ(0);
	
}
.df_gallery_slide {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: auto;
	outline: none;
	white-space: normal;
	box-sizing: border-box;
	text-align: center;
	-webkit-overflow-scrolling: touch;
	display: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99994;
}
	.df_gallery_slide:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		width: 0
	}
	.DF_G_IS_Slide .df_gallery_slide, 
	.df_g_slide_current, 
	.df_g_slide_next, 
	.df_g_slide_previous {
		display: block
	}
		.df_g_slide_image {
			overflow: visible
		}
		.df_g_slide_image:before {
			display: none
		}
		
		.df_g_slide_next {
			z-index: 99995
		}
.df_gallery_slide .df_gallery_pic_wrap {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;
	z-index: 99995;
	background: transparent;
	cursor: default;
	overflow: visible;
	-webkit-transform-origin: top left;
	transform-origin: top left;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.df_g_a_zoomOut .df_gallery_pic_wrap {
	cursor: zoom-out
}
.df_g_a_zoomIn .df_gallery_pic_wrap {
	cursor: zoom-in
}
.df_g_a_drag .df_gallery_pic_wrap {
	cursor: -webkit-grab;
	cursor: grab
}
.DF_G_IS_Dragging .df_gallery_pic_wrap {
	cursor: -webkit-grabbing;
	cursor: grabbing
}
.df_gallery_img {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	border: 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow:hidden;
	z-index: 0;
}
	.df_pic_down {
		width: 0px;
		height: 0px;
		border-radius: 0px;
		color: #666666;
		font-size: 12px;
		font-weight:100;
		cursor:pointer;
		position: absolute;
		top: 200px;
		right: 10px;
		z-index: 1;
	}


.df_gallery_error {
	width: 100%;
	margin: 0;
	padding: 40px;
	max-width: 380px;
	cursor: default;
	background: #ffffff;
}
	.df_gallery_error p {
		margin: 0;
		padding: 0;
		color: #444;
		font: 16px/20px Helvetica Neue, Helvetica, Arial, sans-serif
	}

	


.df_gallery_loading {
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	border: 6px solid hsla(0,0%,39%,.4);
	border-top: 6px solid hsla(0,0%,100%,.6);
	border-radius: 100%;
	-webkit-animation: a .8s infinite linear;
	animation: a .8s infinite linear;
	background: transparent;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99999;
}

@-webkit-keyframes a {
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg)
	}
}
@keyframes a {
	0% {
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(359deg);
		transform:rotate(359deg);
	}
}
.df_g_animated {
	transition-timing-function: cubic-bezier(0, 0, .25, 1)
}
.df_g_fx_slide.df_g_slide_previous {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	opacity: 0
}
.df_g_fx_slide.df_g_slide_next {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	opacity: 0
}
.df_g_fx_slide.df_g_slide_current {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	opacity: 1
}
.df_g_fx_fade.df_g_slide_next, .df_g_fx_fade.df_g_slide_previous {
	opacity: 0;
	transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}
.df_g_fx_fade.df_g_slide_current {
	opacity: 1
}
.df_g_fx_zoom-in-out.df_g_slide_previous {
	-webkit-transform: scale3d(1.5, 1.5, 1.5);
	transform: scale3d(1.5, 1.5, 1.5);
	opacity: 0
}
.df_g_fx_zoom-in-out.df_g_slide_next {
	-webkit-transform: scale3d(.5, .5, .5);
	transform: scale3d(.5, .5, .5);
	opacity: 0
}
.df_g_fx_zoom-in-out.df_g_slide_current {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	opacity: 1
}
.df_g_fx_rotate.df_g_slide_previous {
	-webkit-transform: rotate(-1turn);
	transform: rotate(-1turn);
	opacity: 0
}
.df_g_fx_rotate.df_g_slide_next {
	-webkit-transform: rotate(1turn);
	transform: rotate(1turn);
	opacity: 0

}
.df_g_fx_rotate.df_g_slide_current {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity: 1
}
.df_g_fx_circular.df_g_slide_previous {
	-webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
	transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
	opacity: 0
}
.df_g_fx_circular.df_g_slide_next {
	-webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
	transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
	opacity: 0
}
.df_g_fx_circular.df_g_slide_current {
	-webkit-transform: scaleX(1) translateZ(0);
	transform: scaleX(1) translateZ(0);
	opacity: 1
}
.df_g_fx_tube.df_g_slide_previous {
	-webkit-transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
	transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg)
}
.df_g_fx_tube.df_g_slide_next {
	-webkit-transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
	transform: translate3d(100%, 0, 0) scale(.1) skew(10deg)
}
.df_g_fx_tube.df_g_slide_current {
	-webkit-transform: translateZ(0) scale(1);
	transform: translateZ(0) scale(1)
}

	
.DF_G_IS_Modal {
	z-index:0;
	background:#ffffff;
}