@charset "utf-8";
.message_section {
		position: relative;
		overflow: hidden
}
.message_section .message_dot_container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none;
		min-height: 680px;
}
.message_dot_wrap {
		width: 1440px;
		margin: 0 auto;
		position: relative;
		min-height: 680px;
}
@media(max-width: 1500px) {
		.message_dot_wrap {
				width: 100%;
		}
}
.message_dot_left {
		position: absolute;
		left: 0;
		top: 260px;
}
.message_dot_right {
		position: absolute;
		right: 50px;
		top: 40px;
		width: 400px;
}
@media(max-width: 1400px) {
		.message_dot_left, .message_dot_right {
				transform: scale(0.9)
		}
}
@media(max-width: 960px) {
		.message_dot_left, .message_dot_right {
				transform: scale(1)
		}
		.message_dot_left {
				left: -10vw;
				top: 30vw
		}
		.message_dot_right {
				right: -10vw;
				top: 10vw
		}
}
@media screen and (orientation: portrait) and (max-width: 767px) {
		.message_dot_left {
				left: 40vw;
				top: -40px;
		}
		.message_dot_right {
				right: -20vw;
				top: 90vw;
		}
}
.message_dot_left .dot, .message_dot_right .dot {
		position: absolute;
		transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
		opacity: 0;
		mix-blend-mode: multiply;
}
.message_dot_left .dot div {
		transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
		transform: rotate(360deg);
}
.message_dot_right .dot div {
		transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
		transform: rotate(-360deg);
}
.isActive .message_dot_left .dot, .isActive .message_dot_right .dot {
		opacity: 0.2;
		transform: translateX(0) translateY(0) !important
}
.l-1 {
		left: 5px;
		top: 13px
}
.l-1 div {
		background: linear-gradient(180deg, #ff6e00 0%, #ffa100 100%);
		width: 50px;
		height: 50px;
}
.l-2 {
		left: 143px;
		top: 20px;
}
.l-2 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 23px;
		height: 23px;
		transform: rotate(-360deg);
}
.l-3 {
		left: 195px;
		top: 0px;
}
.l-3 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 41px;
		height: 41px;
		transform: rotate(-150deg);
}
.l-4 {
		left: 272px;
		top: 30px;
}
.l-4 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 10px;
		height: 10px;
		transform: rotate(45deg)
}
.l-5 {
		left: 34px;
		top: 113px;
}
.l-5 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 35px;
		height: 35px;
		transform: rotate(360deg)
}
.l-6 {
		left: 0;
		top: 154px;
}
.l-6 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 20px;
		height: 20px;
		transform: rotate(-50deg);
}
.l-7 {
		left: 98px;
		top: 143px;
}
.l-7 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 14px;
		height: 14px;
		transform: rotate(50deg);
}
.l-8 {
		left: 106px;
		top: 81px;
}
.l-8 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 33px;
		height: 33px;
		transform: rotate(-45deg);
}
.l-9 {
		left: 139px;
		top: 84px;
}
.l-9 div {
		background: linear-gradient(180deg, #ff6e00 0%, #ffa100 100%);
		width: 18px;
		height: 18px;
		transform: rotate(50deg);
}
.l-10 {
		left: 150px;
		top: 211px;
}
.l-10 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(-125deg);
}
.l-11 {
		left: 186px;
		top: 120px;
}
.l-11 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 41px;
		height: 41px;
		transform: rotate(125deg);
}
.l-12 {
		left: 252px;
		top: 156px;
}
.l-12 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(120deg);
}
.l-13 {
		left: 350px;
		top: 100px;
}
.l-13 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(120deg);
}
.l-14 {
		left: 275px;
		top: 80px;
}
.l-14 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(-125deg);
}
.r-1 {
		left: 0;
		top: 156px;
}
.r-1 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 14px;
		height: 14px;
		transform: rotate(-125deg);
}
.r-2 {
		left: 75px;
		top: 77px;
}
.r-2 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(60deg);
}
.r-3 {
		left: 165px;
		top: 4px;
}
.r-3 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(-60deg);
}
.r-4 {
		left: 184px;
		top: 21px;
}
.r-4 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 8px;
		height: 8px;
		transform: rotate(-45deg)
}
.r-5 {
		left: 260px;
		top: 48px;
}
.r-5 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 19px;
		height: 19px;
		transform: rotate(-60deg)
}
.r-6 {
		left: 355px;
		top: 0;
}
.r-6 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 20px;
		height: 20px;
		transform: rotate(130deg);
}
.r-7 {
		left: 123px;
		top: 80px;
}
.r-7 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 41px;
		height: 41px;
		transform: rotate(80deg);
}
.r-8 {
		left: 206px;
		top: 130px;
}
.r-8 div {
		background: linear-gradient(180deg, #ff6e00 0%, #ffa100 100%);
		width: 18px;
		height: 18px;
		transform: rotate(60deg);
}
.r-9 {
		left: 219px;
		top: 110px;
}
.r-9 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 33px;
		height: 33px;
		transform: rotate(-100deg);
}
.r-10 {
		left: 347px;
		top: 36px;
}
.r-10 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 35px;
		height: 35px;
		transform: rotate(-45deg);
}
.r-11 {
		left: 79px;
		top: 161px;
}
.r-11 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 21px;
		height: 21px;
		transform: rotate(-45deg);
}
.r-12 {
		left: 102px;
		top: 221px;
}
.r-12 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 10px;
		height: 10px;
		transform: rotate(-10deg);
}
.r-13 {
		left: 132px;
		top: 199px;
}
.r-13 div {
		background: linear-gradient(180deg, #ffe500 0%, #ffa100 100%);
		width: 41px;
		height: 41px;
		transform: rotate(30deg);
}
.r-14 {
		left: 206px;
		top: 199px;
}
.r-14 div {
		background: linear-gradient(180deg, #ffd000 0%, #f2ff3e 100%);
		width: 14px;
		height: 14px;
		transform: rotate(30deg);
}
.r-15 {
		left: 300px;
		top: 152px;
}
.r-15 div {
		background: linear-gradient(180deg, #ff6e00 0%, #ffa100 100%);
		width: 29px;
		height: 29px;
		transform: rotate(-125deg);
}
.isActive .l-1 div {
		transform: rotate(-60deg) !important;
}
.isActive .l-2 div {
		transform: rotate(60deg) !important;
}
.isActive .l-3 div {
		transform: rotate(-150deg) !important;
}
.isActive .l-4 div {
		transform: rotate(45deg) !important;
}
.isActive .l-5 div {
		transform: rotate(360deg) !important;
}
.isActive .l-6 div {
		transform: rotate(-50deg) !important;
}
.isActive .l-7 div {
		transform: rotate(50deg) !important;
}
.isActive .l-8 div {
		transform: rotate(-45deg) !important;
}
.isActive .l-9 div {
		transform: rotate(50deg) !important;
}
.isActive .l-10 div {
		transform: rotate(-125deg) !important;
}
.isActive .l-11 div {
		transform: rotate(125deg) !important;
}
.isActive .l-12 div {
		transform: rotate(120deg) !important;
}
.isActive .l-13 div {
		transform: rotate(120deg) !important;
}
.isActive .l-14 div {
		transform: rotate(-125deg) !important;
}
.isActive .r-1 div {
		transform: rotate(-125deg) !important;
}
.isActive .r-2 div {
		transform: rotate(60deg) !important;
}
.isActive .r-3 div {
		transform: rotate(-60deg) !important;
}
.isActive .r-4 div {
		transform: rotate(-45deg)
}
.isActive .r-5 div {
		transform: rotate(-60deg)
}
.isActive .r-6 div {
		transform: rotate(130deg) !important;
}
.isActive .r-7 div {
		transform: rotate(80deg) !important;
}
.isActive .r-8 div {
		transform: rotate(60deg) !important;
}
.isActive .r-9 div {
		transform: rotate(-100deg) !important;
}
.isActive .r-10 div {
		transform: rotate(-45deg) !important;
}
.isActive .r-11 div {
		transform: rotate(-45deg) !important;
}
.isActive .r-12 div {
		transform: rotate(-10deg) !important;
}
.isActive .r-13 div {
		transform: rotate(30deg) !important;
}
.isActive .r-14 div {
		transform: rotate(30deg) !important;
}
.isActive .r-15 div {
		transform: rotate(-125deg) !important;
}