html {
	scroll-behavior: smooth;
}

.ripple-image {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 10;
	pointer-events: none
}

/*canvas{position:relative;top:-10px;left:-10px;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}*/
.index-banner {
	overflow: hidden;
	position: relative;
	height: 100vh
}

.index-banner .ban-swiper {
	height: 100%;
	position: relative;
	z-index: 20
}

.index-banner .swiper-slide .ban-img {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.index-banner .swiper-slide .ban-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	transition: 6s linear 2s;
	transform: scale(1.1, 1.1);
}

.index-banner .swiper-slide.swiper-slide-active .ban-img img {
	transition: 6s linear;
	transform: scale(1, 1);
}

.index-banner .swiper-slide .ban-img:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .26
}

.index-banner .swiper-slide .ban-txt {
	color: #fff;
	max-width: 560px;
	z-index: 2;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 60px;
	width: 100%
}

.index-banner .swiper-slide .ban-txt .ban-tit {
	white-space: pre-line;
	font-size: 59px;
	line-height: 67px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 30px;
	font-family: CamphorProForXiaoMi-Bold
}

.index-banner .swiper-slide .ban-txt .ban-desc {
	font-size: 19px;
	line-height: 27px;
	color: rgba(255, 255, 255, .9);
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Regular;
	opacity: .6
}

.index-banner .swiper-dots {
	position: absolute;
	z-index: 50;
	left: 60px;
	bottom: 80px
}

.index-banner .swiper-dots .swiper-pagination-bullet {
	font-size: 0;
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, .8);
	position: relative;
	margin: 0 12px
}

.index-banner .swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #fff
}

.index-banner .swiper-dots .swiper-pagination-bullet svg {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px
}

.index-banner .swiper-dots .swiper-pagination-bullet circle {
	fill: none;
	stroke: transparent;
	stroke-width: 2;
	stroke-dasharray: 130;
	stroke-dashoffset: 130
}

.index-banner .swiper-dots .swiper-pagination-bullet.swiper-pagination-bullet-active circle {
	stroke: rgba(255, 255, 255, .45);
	stroke-dashoffset: 0;
	-webkit-transition: stroke-dashoffset 5s linear;
	transition: stroke-dashoffset 5s linear;
	-moz-transition: stroke-dashoffset 5s linear;
	-ms-transition: stroke-dashoffset 5s linear;
	-o-transition: stroke-dashoffset 5s linear
}

.ban-mouse {
	position: absolute;
	width: 25px;
	height: 38px;
	bottom: 70px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	background-image: url(../../images/mouse.png);
	background-image: -webkit-image-set(url(../../images/mouse.png) 1x, url(../../images/mouse@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	z-index: 50
}

.ban-mouse i {
	width: 2px;
	height: 10px;
	background: #fff;
	opacity: 1;
	position: absolute;
	left: 50%;
	top: 0;
	animation: updown 1.5s linear infinite;
	-moz-animation: updown 1.5s linear infinite;
	-webkit-animation: updown 1.5s linear infinite;
	-o-animation: updown 1.5s linear infinite
}

@keyframes updown {
	0% {
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(-50%, 28px);
		-moz-transform: translate(-50%, 28px);
		-ms-transform: translate(-50%, 28px);
		-o-transform: translate(-50%, 28px);
		transform: translate(-50%, 28px);
		opacity: 0
	}
}

@-moz-keyframes updown {
	0% {
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(-50%, 28px);
		-moz-transform: translate(-50%, 28px);
		-ms-transform: translate(-50%, 28px);
		-o-transform: translate(-50%, 28px);
		transform: translate(-50%, 28px);
		opacity: 0
	}
}

@-webkit-keyframes updown {
	0% {
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(-50%, 28px);
		-moz-transform: translate(-50%, 28px);
		-ms-transform: translate(-50%, 28px);
		-o-transform: translate(-50%, 28px);
		transform: translate(-50%, 28px);
		opacity: 0
	}
}

@-o-keyframes updown {
	0% {
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(-50%, 28px);
		-moz-transform: translate(-50%, 28px);
		-ms-transform: translate(-50%, 28px);
		-o-transform: translate(-50%, 28px);
		transform: translate(-50%, 28px);
		opacity: 0
	}
}

.index-gallery {
	padding-top: 110px
}

.index-title {
	text-align: center
}

.index-title a {
	text-transform: capitalize;
	font-size: 60px;
	color: #fff;
	font-family: CamphorProForXiaoMi-SemiBold
}

.gallery-swiper {
	position: relative;
	overflow: hidden;
	padding: 50px 0;
}

.gallery-pic {
	padding-top: 50.9%;
	position: relative;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5)
}

.gallery-mask {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .35;
	z-index: 5;
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-ms-transition: all 1.5s;
	-o-transition: all 1.5s;
	transition: all 1.5s;
	pointer-events: none;
}

.gallery-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden
}

.gallery-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	-webkit-transition: -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: transform .7s cubic-bezier(.24, .06, .45, .95) 0s, -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s
}

.gallery-pic:hover .gallery-img img {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05)
}

.gallery-txt {
	font-family: CamphorProForXiaoMi-Bold;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 3;
	font-size: 50px;
	text-align: center;
	width: 100%;
	text-transform: capitalize;
	font-weight: 700;
	color: rgba(255, 255, 255, .2);
	-webkit-text-stroke: .6px #fff;
	text-stroke: .6px #fff;
	opacity: 0;
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-ms-transition: all 1.5s;
	-o-transition: all 1.5s;
	transition: all 1.5s
}

.gallery-pic:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgb(32 32 32 / 40%);
	z-index: 2;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.gallery-swiper-pic .gallery-item.swiper-slide-active.on .gallery-pic:after {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0)
}

.gallery-user {
	opacity: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 44px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 6;
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-ms-transition: all 1.5s;
	-o-transition: all 1.5s;
	transition: all 1.5s
}

.gallery-user-left {
	display: flex;
	align-items: center
}

.gallery-user-face {
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 15px
}

.gallery-user-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery-user-info span {
	font-size: 18px;
	color: #fff;
	font-family: CamphorProForXiaoMi-Bold
}

.gallery-user-info p {
	font-size: 14px;
	color: rgba(236, 245, 242, .8)
}

.gallery-prev {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 2.95%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	z-index: 20;
	cursor: pointer;
}

.gallery-plus {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 2.95%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	z-index: 20;
	cursor: pointer;
}

.gallery-next {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 2.95%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	z-index: 20;
	cursor: pointer;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;

}

.gallery-prev .arrow,
.gallery-next .arrow {
	width: 23px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 23px auto;
	background-size: 23px auto
}

.gallery-next:hover .h__c,
.gallery-prev:hover .h__c {
	transform: translate3d(0, -100%, 1px) translateY(0);
}

.gallery-prev .arrow {
	background-image: url(../../images/arrow-l.svg);
	opacity: .4;
}

.gallery-next .arrow {
	background-image: url(../../images/arrow-r.svg);
	opacity: .4;
}

.gallery-prev:hover {
	border: 1px solid transparent;
}

.gallery-next:hover {
	border: 1px solid transparent;
}

.gallery-prev:hover .arrow {
	background-image: url(../../images/arrow-l-b.svg);
	opacity: 1;
}

.gallery-next:hover .arrow {
	background-image: url(../../images/arrow-r-b.svg);
	opacity: 1;
}

.gallery-next.plus .arrow,
.gallery-prev.plus .arrow {
	background-image: url(../../images/index-plus.png);
	background-image: -webkit-image-set(url(../../images/index-plus.png) 1x, url(../../images/index-plus@2x.png) 2x);
}

.gallery-next.plus:hover .arrow,
.gallery-prev.plus:hover .arrow {
	background-image: url(../../images/index-plus-b.png);
	background-image: -webkit-image-set(url(../../images/index-plus-b.png) 1x, url(../../images/index-plus-b@2x.png) 2x);
}

.gallery-item.swiper-slide-active .gallery-user {
	opacity: 1
}

.gallery-item.swiper-slide-active .gallery-mask {
	opacity: .2
}

.gallery-item.swiper-slide-active .gallery-txt {
	opacity: 1
}

.gallery-item .gallery-mask.op1 {
	opacity: 1;
}

.gallery-swiper-warp {
	position: relative;
	margin-top: 20px;
	overflow: hidden;
	margin-bottom: 120px;
}

.gallery-swiper-pic {
	z-index: 10;
	position: relative;
}

.gallery-swiper-bg .swiper-slide-active {
	opacity: 0;
}

.gallery-swiper-bg {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.gallery-swiper-txt {
	/* pointer-events: none; */
	/* position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0; */
	z-index: 20;
}

/* .gallery-swiper-txt .gallery-pic {
	box-shadow: none;
}

.gallery-swiper-txt .gallery-pic .gallery-txt {
	pointer-events: auto;
}

.gallery-swiper-txt .gallery-pic:before,
.gallery-swiper-txt .gallery-pic:after {
	display: none;
}

.gallery-swiper-txt .gallery-user {
	display: none;
}

.gallery-swiper-txt .gallery-img {
	display: none;
} */

.index-courses {
	padding-bottom: 134px
}

.courses-list {
	margin: 80px auto 0;
	max-width: 1490px
}

.courses-item {
	display: flex;
}

.courses-pic {
	flex: 0 0 50%;
	width: 50%;
	display: block;
	position: relative
}

.courses-pic .global-play {
	opacity: 0
}

.courses-pic:hover .courses-img img {
	-webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.courses-img {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding-top: 56.25%;
	aspect-ratio: 16/9;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.courses-img img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	transition: all 1.5s;
}

.courses-img:After {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .55;
	z-index: 2;
	pointer-events: none
}

.courses-video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1
}

.courses-video video {
	display: block;
	width: 100%;
	height: 100%
}

.courses-pic-tit {
	font-family: CamphorProForXiaoMi-SemiBold;
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 40px;
	text-transform: capitalize;
	font-size: 25px;
	color: rgba(255, 255, 255, .6);
	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.courses-txt {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 45px 90px 45px 55px;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	-ms-transition: background-color .5s;
	-o-transition: background-color .5s;
	transition: background-color .5s
}

.courses-user {
	display: flex;
	align-items: center;
	margin-bottom: 40px
}

.courses-face {
	width: 58px;
	height: 58px;
	display: block;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18px
}

.courses-face img {
	display: block;
	width: 100%;
	height: 100%
}

.courses-name {
	font-size: 16px;
	color: #fff;
	opacity: .7;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Medium
}

.courses-tit {
	display: flex;
	align-items: center;
	font-size: 19px;
	color: #a4a4a4
}

.courses-tit span+span {
	position: relative;
	padding-left: 55px
}

.courses-tit span+span:after {
	content: '';
	width: 8px;
	height: 8px;
	background: #fff;
	opacity: .14;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 22px
}

.courses-tit:hover {
	color: #a4a4a4
}

.courses-desc {
	font-size: 17px;
	line-height: 23px;
	color: #6d6d6d;
	margin-top: 25px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical
}

.courses-txt-fav {
	height: 0;
	overflow: hidden;
	margin-top: 60px;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s
}

.courses-txt-fav .global-fav {
	opacity: 0;
	-webkit-transition: all .3s .5s;
	-moz-transition: all .3s .5s;
	-ms-transition: all .3s .5s;
	-o-transition: all .3s .5s;
	transition: all .3s .5s
}

.global-play {
	width: 61px;
	height: 61px;
	background-image: url(../../images/index-play.png);
	background-image: -webkit-image-set(url(../../images/index-play.png) 1x, url(../../images/index-play@2x.png) 2x);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 5;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.courses-item:hover .courses-txt,
.courses-item.on .courses-txt {
	background-color: #111
}

.courses-item:hover .courses-txt-fav,
.courses-item.on .courses-txt-fav {
	height: 42px
}

.courses-item:hover .courses-txt-fav .global-fav,
.courses-item.on .courses-txt-fav .global-fav {
	opacity: 1
}

.courses-item:hover .courses-pic-tit,
.courses-item.on .courses-pic-tit {
	font-family: CamphorProForXiaoMi-Bold;
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
	color: transparent
}

.courses-item:hover .global-play,
.courses-item.on .global-play {
	opacity: 1
}

.index-creator {
	padding: 80px 0 156px;
	background: url(../../images/creator-bg.jpg) no-repeat top left/100% 100%
}

.creator-warp {
	position: relative;
}

.creator-prev,
.creator-next {
	width: 60px;
	height: 60px;
}

.creator-prev {
	left: calc(50vw - 820px);
}

.creator-next {
	right: calc(50vw - 820px);
}

.creator-list {
	display: flex;
	width: 100%;
	justify-content: space-between;
	overflow: hidden;
	max-width: 1500px;
	margin: 70px auto 0;
}

.creator-item {
	flex: 0 0 225px;
	margin: 0 15px;
	height: 242px;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s
}

.creator-con {
	display: block;
	height: 100%;
	position: relative;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.creator-pic {
	width: 225px;
	max-height: 242px;
	height: 100%;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.creator-pic img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: 1
}

.creator-pic:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: .16;
	z-index: 2
}

.creator-pic:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 50%);
	z-index: 3;
	user-select: unset;
}

.creator-pic-name {
	font-family: CamphorProForXiaoMi-Medium;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	font-size: 19px;
	color: #fff;
	z-index: 4;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

.creator-txt {
	position: absolute;
	width: 210px;
	right: 0;
	top: 0;
	height: 100%;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	padding: 20px
}

.creator-txt .creator-name {
	font-size: 21px;
	color: #fff;
	font-family: CamphorProForXiaoMi-Bold
}

.creator-txt .creator-desc {
	line-height: 23px;
	color: #6d6d6d;
	font-size: 15px;
	margin-top: 20px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical
}

.creator-txt .creator-arrow {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	background-image: url(../../images/arrow-rt.svg);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 11px auto;
	background-size: 11px auto;
	position: absolute;
	left: 20px;
	bottom: 20px
}

/*.creator-item:hover{flex-grow:2}*/
/*.creator-item:hover .creator-con{display:flex;align-items:center;background:rgba(255,255,255,.06);padding:10px}*/
/*.creator-item:hover .creator-pic{width:230px;height:100%}*/
/*.creator-item:hover .creator-txt{opacity:1}*/
/*.creator-item:hover .creator-pic-name{opacity:0}*/

.creator-item.on {
	flex: 0 0 450px;
}

.creator-item.on .creator-con {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, .06);
	padding: 10px
}

.creator-item.on .creator-pic {
	width: 225px;
	height: 100%
}

.creator-item.on .creator-txt {
	opacity: 1
}

.creator-item.on .creator-pic-name {
	opacity: 0
}

.target {
	position: fixed;
	z-index: 100;
	right: 74px;
	bottom: 80px;
	white-space: pre-line;
	text-align: right;
	-webkit-transition: all .45s ease-in-out, -webkit-transform .45s ease-in-out;
	transition: all .45s ease-in-out, -webkit-transform .45s ease-in-out;
	transition: all .45s ease-in-out, transform .45s ease-in-out;
	transition: all .45s ease-in-out, transform .45s ease-in-out, -webkit-transform .45s ease-in-out;
	line-height: 1.4;
}

.target.small {
	bottom: 130px;
}

.target-s {
	font-family: CamphorProForXiaoMi-SemiBold;
	font-weight: 600;
	font-size: 40px;
	color: rgba(255, 255, 255, 1);
	text-transform: capitalize;
	-webkit-transition: all .45s ease-in-out, -webkit-transform .45s ease-in-out;
	transition: all .45s ease-in-out, -webkit-transform .45s ease-in-out;
	transition: all .45s ease-in-out, transform .45s ease-in-out;
	transition: all .45s ease-in-out, transform .45s ease-in-out, -webkit-transform .45s ease-in-out;
}

.target.small .target-s {
	font-size: 30px;
}

.target-s:hover {
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
}

.target-s.on {
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 1px #fff;
	text-stroke: 1px #fff;
}

.gallery-img canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*border-radius: 10px;*/
	/*transition   : border-radius 1s ease;*/
}

.gallery-img canvas:first-child {
	z-index: 2;
}

.gallery-img canvas {
	/*margin-bottom: -5px;*/
}

.gallery-swiper-pic {
	display: flex;
	justify-content: center;
	padding: 50px 0;

}

.gallery-swiper-pic .gallery-item {
	flex: 0 0 64.95%
}

.gallery-swiper-pic .gallery-item+.gallery-item {
	margin-left: 125px;
}

.gallery-swiper-pic .gallery-pic .back-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.gallery-swiper-pic .gallery-pic .gallery-img {
	z-index: 2;
}

.gallery-swiper-pic .gallery-item .gallery-pic .gallery-img canvas {
	user-select: none;
	pointer-events: unset;
	-webkit-transition: -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: transform .7s cubic-bezier(.24, .06, .45, .95) 0s;
	transition: transform .7s cubic-bezier(.24, .06, .45, .95) 0s, -webkit-transform .7s cubic-bezier(.24, .06, .45, .95) 0s
}

.gallery-swiper-pic .gallery-item:hover .gallery-pic .gallery-img canvas {
	user-select: none;
	pointer-events: unset;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

.creator-plus {
	flex: 0 0 225px;
	width: 225px;
	height: 242px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 15px;
}

.creator-plus:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(14, 14, 14, 1);
	z-index: -2;
}

.creator-plus .icon {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 23px auto;
	background-size: 23px auto;
	background-image: url(../../images/index-plus.png);
	background-image: -webkit-image-set(url(../../images/index-plus.png) 1x, url(../../images/index-plus@2x.png) 2x);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.creator-plus .icon:hover {
	border: 1px solid transparent;
}

.creator-plus .icon:hover .h__c {
	transform: translate3d(0, -100%, 1px) translateY(0);
}

.creator-plus .icon:hover {
	background-image: url(../../images/index-plus-b.png);
	background-image: -webkit-image-set(url(../../images/index-plus-b.png) 1x, url(../../images/index-plus-b@2x.png) 2x);
}

@media only screen and (max-width: 1500px) {
	.index-banner .swiper-slide .ban-txt .ban-tit {
		font-size: 40px;
		line-height: 1.1
	}

	.index-banner .swiper-slide .ban-txt .ban-desc {
		font-size: 14px
	}

	.target-s {
		font-size: 30px
	}

	.ban-mouse,
	.index-banner .swiper-dots,
	.target {
		bottom: 40px
	}

	.index-title a {
		font-size: 30px
	}

	.gallery-txt {
		font-size: 40px
	}

	.gallery-user-info span {
		font-size: 18px
	}

	.gallery-user-info p {
		font-size: 14px
	}

	.courses-list,
	.creator-list {
		max-width: 1200px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.creator-prev {
		left: 20px;
	}

	.creator-next {
		right: 20px;
	}

	.courses-txt {
		padding: 30px
	}

	.courses-user {
		margin-bottom: 20px
	}

	.courses-txt-fav {
		margin-top: 20px
	}

	.creator-pic {
		width: 200px;
	}

	.creator-item.on .creator-pic {
		width: 200px;
	}

	.creator-txt {
		width: 230px;
	}

	.creator-txt .creator-name {
		font-size: 18px;
	}

	.creator-pic-name {
		font-size: 18px;
	}

	.creator-txt .creator-desc {
		font-size: 12px;
		line-height: 1.5;
		margin-top: 5px
	}
}

@media only screen and (max-width: 1199px) {
	.target {
		display: none
	}

	.gallery-user {
		padding: 10px
	}

	.gallery-txt {
		font-size: 30px
	}

	.gallery-plus,
	.gallery-prev,
	.gallery-next {
		width: 50px;
		height: 50px
	}

	.courses-txt-fav {
		height: 42px
	}

	.courses-txt-fav .global-fav {
		opacity: 1
	}

	.courses-pic-tit {
		padding: 10px;
		font-size: 18px
	}

	.courses-tit {
		font-size: 12px
	}

	.courses-desc {
		font-size: 14px;
		line-height: 1.5;
		margin-top: 10px
	}

	.courses-txt {
		padding: 15px
	}

	.courses-user {
		margin-bottom: 10px
	}

	.creator-list {
		margin: 40px 0;
		display: block
	}

	/*.creator-item:hover{flex-grow:1}*/
	.creator-item {
		margin: 0
	}

	/*.creator-item:hover .creator-pic,.creator-pic{width:270px}*/
	.creator-con {
		padding: 10px;
		display: flex
	}

	.creator-txt {
		opacity: 1;
		position: static
	}

	.creator-txt {
		width: auto
	}

	.creator-pic-name {
		display: none
	}
}

@media only screen and (max-width: 959px) {

	.index-banner .swiper-slide .ban-txt {
		left: 20px
	}

	.gallery-user-face {
		width: 50px;
		height: 50px
	}

	.gallery-user-info span {
		font-size: 14px
	}

	.gallery-user-info p {
		font-size: 12px
	}

	.courses-item {
		display: block;
		margin-bottom: 30px
	}

	.courses-pic,
	.courses-txt {
		width: 100%
	}

	.index-courses {
		padding-bottom: 40px
	}

	.index-title a {
		font-size: 24px
	}

	.creator-txt .creator-name {
		font-size: 18px
	}

	.index-creator {
		padding: 40px 0 60px
	}

	.index-gallery {
		padding-top: 50px
	}

	.courses-list,
	.creator-warp {
		margin-top: 30px
	}

	.gallery-swiper {
		padding-bottom: 100px
	}

	.gallery-swiper-pic .gallery-item+.gallery-item {
		margin-left: 50px;
	}

	.gallery-swiper-pic .gallery-item {
		flex: 0 0 90%;
	}

	.gallery-prev {
		left: 2.95%;
	}
}

@media only screen and (max-width: 767px) {
	.gallery-swiper {
		padding-bottom: 50px
	}

	.index-banner .swiper-slide .ban-txt {
		left: 0;
		text-align: center;
		padding: 0 20px
	}

	.gallery-prev {
		display: none
	}

	.gallery-next {
		display: none
	}

	.gallery-plus {
		display: none
	}

	.gallery-txt {
		font-size: 18px
	}

	.gallery-user-face {
		width: 40px;
		height: 40px;
		margin-right: 10px
	}

	.creator-con {
		display: block
	}

	.creator-item:hover .creator-con {
		display: block
	}

	.creator-item {
		height: auto
	}

	.creator-item:hover .creator-pic,
	.creator-pic {
		height: auto;
		margin: 0 0 20px;
		width: 100%;
		max-width: none;
		max-height: none
	}

	.creator-pic img {
		position: static;
		width: 100%
	}

	.creator-txt .creator-arrow {
		position: static
	}

	.creator-txt {
		padding: 10px
	}
}





/*remake css*/
.index-intro {
	padding: 215px 0 164px;
}

.index-intro-con {
	max-width: 1490px;
	margin: 0 auto;
	padding: 0 60px;
}

.index-intro-con .title {
	font-size: 58px;
	line-height: 72px;
	font-family: CamphorProForXiaoMi-Heavy;
	font-weight: 800;
	color: rgba(255, 255, 255, 0);
	-webkit-text-stroke: 1px #FFFFFF;
	text-stroke: 1px #FFFFFF;
	margin-bottom: 56px;
	text-transform: capitalize;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

.index-intro-con .title:hover {
	color: #ffffff;
}

.index-intro-con .desc {
	max-width: 1235px;
	font-size: 22px;
	color: #ffffff;
	line-height: 38px;
	opacity: 0.7;
	/* text-transform: capitalize; */
	margin-bottom: 50px;
}

.index-intro-con .more {
	font-size: 25px;
	font-family: CamphorProForXiaoMi-Medium;
	font-weight: 500;
	position: relative;
	color: #FFFFFF;
	text-transform: capitalize;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	text-decoration: underline;
	display: inline-block;
}

.index-intro-con .more:hover {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}
.index-intro-con .back {
	font-size: 25px;
	font-family: CamphorProForXiaoMi-Medium;
	font-weight: 500;
	position: relative;
	color: #FFFFFF;
	text-transform: capitalize;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	text-decoration: underline;
	display: inline-block;
	display: none;
}

.index-intro-con .back:hover {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}
.index-courses .global-btn1 {
	margin-top: 100px;
	width: 465px;
}

.m-pop {
	/*opacity: 1;*/
	/*pointer-events: none;*/
}

.pop-mask {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 1;
}

.pop-intro-con {
	margin: 0 auto;
	max-width: 1414px;
	width: 100%;
	height: 100%;
	padding-bottom: 30px;
	padding-top: 50px;
}

.intro-logo {
	height: 80px;
	margin-bottom: 50px;
}

.intro-logo img {
	display: block;
	height: 100%;
}

.pop-intro-con .txt {
	font-size: 24px;
	color: #7a7a7a;
	line-height: 1.5;
	font-family: CamphorProForXiaoMi-Bold;
	max-height: calc(100% - 240px);
	overflow-y: auto;
}

.pop-intro-con .txt p+p {
	margin-top: 50px;
}

.pop-intro-con .back {
	position: absolute;
	bottom: 20px;
	left: 0;
	color: #ffffff;
	font-size: 25px;
	text-decoration: underline;
	text-transform: capitalize;
	font-family: CamphorProForXiaoMi-Bold;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.pop-intro-con .back:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}