




.demo-1 {
	--color-text: #fff;
	--color-bg: #171717;
	--color-link: #19caff;
	--color-link-hover: #19caff;
	--color-info: #19caff
}

.demo-1 .cursor-wrapper {
	position: fixed;
	opacity: 1;
	width: 100px;
	height: 100px;
	left: -50px;
	top: -50px;
	-webkit-transform: translate(-100%, -100%);
	-ms-transform: translate(-100%, -100%);
	transform: translate(-100%, -100%);
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 1600000;
	pointer-events: none
}

.demo-1 .cursor-wrapper.has-blend-mode {
	mix-blend-mode: exclusion
}

@supports (-ms-ime-align: auto) {
	.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__outer {
		border-color: black
	}

	.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__inner:before,.demo-1 .cursor-wrapper.has-blend-mode.is-outside .custom-cursor__inner:after {
		background: black
	}
}

.demo-1 .custom-cursor {
	position: relative;
	left: 0;
	top: 0
}
.demo-1 .custom-cursor img{
	position:absolute;
	width:50%;
	top:40%;
	left: 25%;
}

.demo-1 .custom-cursor__outer {
	width: 6px;
	height: 6px;
	
	background: #ffffff;
	border-radius: 50%;
	-webkit-transition-duration: 100ms;
    transition-duration: 100ms;
}

.demo-1 .custom-cursor__inner {
	position: relative;
	width: 100%;
	height: 100%;
	border: none;
	background: rgb(255,255,255,0.2);
	border-radius: 50%;
}

.demo-1 .custom-cursor__inner:before {
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%)
}

.demo-1 .custom-cursor__inner:after {
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) rotate(-90deg);
	-ms-transform: translateX(-50%) rotate(-90deg);
	transform: translateX(-50%) rotate(-90deg)
}

.demo-1 .custom-cursor__inner.is-closing:after {
	-webkit-transform: translateX(-50%) rotate(0deg);
	-ms-transform: translateX(-50%) rotate(0deg);
	transform: translateX(-50%) rotate(0deg)
}

@media (pointer: coarse) {
	.content--demo1,.content--demo2,.content--demo3,.content--demo4,.content--demo5 {
		display: none !important
	}
}

/*------------------------------------------------------
  鼠标十字
--------------------------------------------------------*/

.cursores {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 100;
	top: 0;
	left: 0;
	pointer-events: none
}

.cursores html.ie10 {
	display: none
}

.cursores.over span {
	background: rgba(0,134,255,0.5)
}

.cursores span {
	position: absolute;
	display: block;
	background: rgba(0,0,0,0.2);
	-webkit-transition: 0s liner;
	transition: 0s liner
}

.cursores span.lineX {
	width: 1px;
	height: 100%
}

.cursores span.lineY {
	width: 100%;
	height: 1px
}

@media only screen and (max-width: 768px) {
	.cursores {
		display: none
	}
}




/*# sourceMappingURL=styles.css.map */