@charset "utf-8";

/* .main-banner {display: none;} */
img{max-width: 100%;}

.activity-banner {height: 550px;box-sizing: border-box;background: #71b6c6 url(../images/banner250609/bg.jpg) no-repeat center/cover;text-align: center;position: relative;
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
	overflow: hidden;
}
.banner-bg{width: 1200px;margin: 0 auto; height: 100%;position:relative;}
.banner-bg .icon{position: absolute;left: 50%;top: 100%;opacity: 0;}
.banner-bg .l1{animation: bannerMove1 0.5s ease-in forwards;}
.banner-bg .l2{animation: bannerMove2 0.5s ease-in forwards;}
.banner-bg .l3{animation: bannerMove3 0.5s ease-in forwards;}
.banner-bg .r1{animation: bannerMove4 0.5s ease-in forwards;}
.banner-bg .r2{animation: bannerMove5 0.5s ease-in forwards;}
.banner-bg .r3{animation: bannerMove6 0.5s ease-in forwards;}
@keyframes bannerMove1 {
	0% {} 
	100% {left:-320px;top: 30px;opacity: 1;}
}
@keyframes bannerMove2 {
	0% {} 
	100% {left:-90px;top: 220px;opacity: 1;}
}
@keyframes bannerMove3 {
	0% {} 
	100% {left:-320px;top: 360px;opacity: 1;}
}
@keyframes bannerMove4 {
	0% {} 
	100% {left: 1145px;top: 40px;opacity: 1;}
}
@keyframes bannerMove5 {
	0% {} 
	100% {left: 1375px;top: 280px;opacity: 1;}
}
@keyframes bannerMove6 {
	0% {} 
	100% {left: 1125px;top: 380px;opacity: 1;}
}
.banner-bg .img1{transform: scale(0);opacity: 0; animation: bannerMove7 .5s 0.6s ease-in forwards;}
@keyframes bannerMove7 {
	0% {} 
	100% {opacity: 1;transform: scale(1);}
}
.banner-bg .btn{font-size: 23px;color: #fff;font-weight:bold;cursor: pointer;position:absolute;left:calc(50% - 170px) ;margin-bottom: 0; bottom: -100px;animation: bannerMove10 .5s 1.1s ease-in forwards;z-index: 999;background: #8376ff;border-radius: 28px;line-height: 56px;border-bottom: 6px solid #543bbb;padding: 0 30px;opacity: 0;}
.banner-bg .btn:hover{border-bottom-width: 1px;}
@keyframes bannerMove10 {
	0% {} 
	100% {bottom: 22px;opacity: 1;}
}



.banner-button {padding: 20px 0;background: #d8d7ff;}
.banner-button button {background-color: #8376ff;border-radius: 30px;width: 330px;line-height: 56px;border: none;outline: none;font-size: 23px;font-weight: bold;color: #fff;cursor: pointer;position: relative;bottom: 0;overflow: hidden;border-bottom: 6px solid #543bbb;}
.banner-button button span {display: inline-block;width: 100%;height: 100%; box-sizing: border-box;border-radius: 30px;}
.banner-button button img {vertical-align: text-bottom;}
.banner-button button:hover {border-bottom-width: 1px;margin-top: 5px;}

/* ````````````````````````````````````````````````````` */

.banner-content {width: 1200px;min-height: 394px;box-sizing: border-box;border: 8px solid #7f61ff;box-shadow: 0 0 1px 5px #fff; border-radius: 40px;background-color: #ffffff;overflow: hidden;margin: 0 auto; position: relative;}
.banner-title{ padding: 30px 0 20px;}
.banner-one {position:relative;height:100%;}
.rules-content{height: 310px;overflow-y: auto;text-align: left;padding: 0 70px;border-radius: 40px 40px 0 0;background: url("../images/banner250609/icon1.png") 20px 10px no-repeat, url("../images/banner250609/icon2.png") calc(100% - 80px) top no-repeat, url("../images/banner250609/icon3.png") calc(100% - 50px) bottom no-repeat #ffffff;}
.first-select-content{ min-height:390px;}
.rules-content::-webkit-scrollbar {width: 23px;height: 270px;cursor: pointer;}
.rules-content::-webkit-scrollbar-track-piece {background: #ded5ff;}
.rules-content::-webkit-scrollbar-thumb {background: #6548cf;}
.rules-content::-webkit-scrollbar-button {background: #baa2ff;width: 0;height: 0;}
.rules-content::-webkit-scrollbar-button:vertical:single-button:start {background: url("../images/banner250609/scrollbarTop.png") no-repeat center 80% #baa2ff;height: 40px;border-top-right-radius: 15px;}
.rules-content::-webkit-scrollbar-button:vertical:single-button:end {height: 30px;background: url("../images/banner250609/scrollbarBom.png") no-repeat center #baa2ff;}
.rules-content h3 {text-align: center;font-size: 23px;line-height: 25px;color: #000;font-weight: 600;padding-top: 20px;}
.rules-content h4 {font-size: 20px;line-height: 22px;font-weight: 600;color: #000;margin: 22px 0 10px;}
.rules-content p {font-size: 16px;padding-left: 10px;color: #4c4c4c;}

.banner-two{position: relative;}
.watch-video-step-x{display:flex; padding:40px 50px 50px;counter-reset:stepIndex;/* flex-wrap: wrap; */}
.watch-video-step-items{flex-basis:265px; margin:0 auto; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; justify-content:space-around; position:relative;background: #fff;border: 4px solid #543bbb;padding: 30px 0;border-radius: 30px;}
.watch-video-step-items{transition:transform .15s;}
.watch-video-step-items[href]:hover{text-decoration:none; transform:translateY(3px);}
.watch-video-step-items::before{content:counter(stepIndex);counter-increment:stepIndex; position:absolute; top:0; left:9%; transform:translateY(-50%); background-color:#fff; font-size:33px; font-weight:700; border-radius:50%; width:42px; line-height:38px; height:42px; border:4px solid; z-index:1;color: #648cff;}
.watch-video-step-items::after{content:''; position:absolute; top:50%;right: -30%; border-width:15px 20px; border-style:solid;border-color:transparent;border-left-color: #bcb5ff;}
.watch-video-step-items:last-of-type::after{display: none;}
.watch-video-step-items .popup {position:absolute; top:0; right:0; bottom:0; left:0; display: flex;justify-content: center;align-items: center;flex-direction: column;
	background: url("../images/banner250609/step-bg.png") no-repeat center/cover;
	background-size: 110%;
	border-radius: 25px;
	cursor:no-drop;
}
.watch-video-step-items .popup div {font-size: 25px;font-weight: bolder;color: #ffffff;width: 82%;line-height: 1.4;}
.watch-video-step-items .popup span {color: #ffffff; display: block;}

.banner-rules-button{position:absolute; bottom:10px; font-size:17px;color: #000000; border-bottom:1px dashed #070707; text-decoration:none;right: 30px;font-weight: 600;line-height: 19px;cursor: pointer;}

.watch-video-step-items .title1{font-size:27px; padding:15px 0 10px; color:#7b46de;font-weight: bold;padding: 0 50px;}
.watch-video-step-items .title2{font-weight:bold; font-size:19px; padding:10px 40px; color:#070707;}
.watch-video-step-items .title2 span{color: #7b46de;}
.watch-video-step-items .title2 strong{display: block;font-size: 25px;}
.watch-video-step-items .title3 {font-size: 20px;font-weight: bold;color: #070707;padding: 10px 20px 0;}
.watch-video-step-items .text1{font-size:25px; color:#1095e7;font-weight: bold;}
.watch-video-step-items .text2{font-size:20px; color:#000;font-weight: bold;line-height: 1.3;margin: 10px auto 15px;}
.watch-video-step-items .text2 span{color: #7b46de;}
.watch-video-step-items a.btn{display: inline-block;height: 40px;line-height: 40px;margin-bottom: 0; background-color: #7251ff;border-bottom: 3px solid #543bbb;color: #fff;font-size: 17px;font-weight: 600;border-radius: 20px;padding: 0 15px;}
.watch-video-step-items a.btn img{vertical-align: text-bottom;margin-right: 10px;}
.watch-video-step-items a.btn:hover{text-decoration: none;border-bottom-width: 1px;margin-top: 2px;}
.watch-video-step-items .code{border: 1px dashed #39bff9;color: #4ba8d1;font-size: 17px;font-weight: bold;padding: 0 5px;
	-moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -khtml-user-select: text;
    user-select: text;
}
.watch-video-step-items .share img:hover{box-shadow: 0 0 5px #55b1ea;border-radius: 28px;}
.watch-video-step-items .code-btn a{border: 2px solid currentColor;border-bottom-width: 5px;line-height: 32px;color: #7251ff;display: inline-block;border-radius: 19px;width: 205px; font-weight:bold;}
.watch-video-step-items .code-btn a:hover{border-bottom-width: 2px; margin-top: 3px;text-decoration: none;}
.watch-video-step-items .code-txt{color: #7b46de;font-weight: bold;}




@media (max-width: 979px) {
	img {max-width: 100%;}
	.banner-bg,.banner-content {width: 96%;}
	.watch-video-step-items{flex-basis: 31%;}

	.activity-banner{height: auto;}
	
	.rules-content{padding: 0 20px;}
	.banner-rules-button {position: static;display: block;text-align: center;margin: 10px 0;border-bottom: none;text-decoration: underline dotted;}

	.watch-video-step-items .popup{background-size: 120%;}
	.banner-title{ font-size: 1.2rem;line-height: 1.2;padding: 5px 20px;height: auto;display: block;margin: 0 auto;
		width: 80%;background: #63c7bb;border-radius: 10px;border: 5px solid #fff; position: relative;}


	.activity-banner {
		padding: 15px 10px 0;
	}
	.banner-bg{text-align: center;}
	.banner-bg .img1{left: 0; animation: none;opacity: 1;transform: scale(1);}
	@keyframes bannerMove8 {
		0% {} 
		100% {opacity: 1;transform: scale(1);left: 0;top: 130px;}
	}
	@keyframes bannerMove9 {
		0% {} 
		100% {opacity: 1;transform: scale(1);left: 90%;top: 100px;}
	}

}

@media (max-width: 767px) {
	
	.activity-banner {margin-bottom: 15px; min-height: auto;}
	.banner-content{top:0px;}
	.banner-content{position:relative;}

	.watch-video-step-items{flex-basis:85%; margin:15px auto;}
	.watch-video-step-x{flex-wrap: wrap; padding: 30px 0;}

	.watch-video-step-items .code-btn{padding-top: 10px;}
	@keyframes bannerMove10 {
		0% {} 
		100% {bottom: 0;opacity: 1;}
	}
}

@media (max-width: 479px) {

	.banner-button {width: auto;height: auto;padding: 10px 10px; box-sizing: border-box;}
	.rules-content{padding: 0 5px;}
	
	.banner-content-button {font-size: 21px;}


	.banner-button button {
		width: 300px;
		font-size: 19px;
	}
	.banner-rules-button{
		font-size: 15px;
	}

	.banner-base {width: 100%;}
	.base-bg {position: relative;}
	.animate-wrap .wrap1 {display: none;}
	.animate-wrap .wrap2 {display: none;}
	.animate-wrap .time {top: 0;}
	.animate-wrap .banner-button {top: 0;}
}



.banner-code-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 1px dashed #ababab;
    border-radius: 3px;
    gap: 10px;
    cursor: pointer;
    padding: 2px 10px;
}
.banner-code-flex img {
    filter: brightness(0);
}
.banner-code-flex .code-box {
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
}

#effect-copy.active {
    border-color: #7251ff;
}