/* 鎖定背景捲動 */
body.modal-open { overflow: hidden; }

/* 彈窗遮罩 */
#welpopup-overlay {
	display: none;
	position: fixed; z-index: 9999; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	
	justify-content: center;
	align-items: center;
	
	opacity: 0;
	transition: opacity 0.5s ease;
	cursor: pointer;
}

/* 彈窗主體 */
#welpopup-box {
	width: 85%; max-width: 400px;
	background:#fff;
	border-radius: 20px;
	
	text-align: center;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform: scale(0.9);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
	cursor: default; /* 恢復預設游標 */
}

#welpopup-overlay.show { opacity: 1; display: flex; }
#welpopup-overlay.show #welpopup-box { transform: scale(1); }



.welmsg-header{
	display:flex; flex-wrap:wrap;
	align-items: center; justify-content: center;
	background:var(--color-one);
	padding:1rem 1rem;
	margin-bottom:2rem;
}

.welmsg-sign{
	position:relative;
	width: 60px; height: 60px;
}

.welmsg-sign_1,
.welmsg-sign_2,
.welmsg-sign_3,
.welmsg-sign_4{
	position: absolute;
}
.welmsg-sign_1:before,
.welmsg-sign_2:before,
.welmsg-sign_3:before,
.welmsg-sign_4:before{
	position: absolute; top: 0; left: 0; content: "";
	width:100%; height:100%;
	background-color: #fff;

	-webkit-mask-position: center;
	mask-position: center;
	
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}


.welmsg-sign_1{
	top:10%; left:10%;
	width: 80%; height: 80%;
	
	animation: swing 4s ease-in-out infinite;
	
	-webkit-transform-origin: center bottom;
		-ms-transform-origin: center bottom;
			transform-origin: center bottom;
}
.welmsg-sign_1:before {
	/*初始-資訊*/
	-webkit-mask-image: url(public/images/msgpopup/msgpopup_type1.svg);
			mask-image: url(public/images/msgpopup/msgpopup_type1.svg);
}

.welmsg-sign_2{
	top:35px; left: 0;
	width: 14px; height: 14px;
	
	animation: SmallShow 5s ease-in-out infinite;
}
.welmsg-sign_3{
	top:0; left:15px;
	width: 10px; height: 10px;
	
	animation: SmallShow 2.5s ease-in-out infinite;
}
.welmsg-sign_4{
	bottom:0; right:0;
	width: 8px; height: 8px;
	
	animation: BigShow 3s ease-in-out infinite;
}
.welmsg-sign_2:before,
.welmsg-sign_3:before,
.welmsg-sign_4:before{
	-webkit-mask-image: url(public/images/msgpopup/msgpopup_type_dec1.svg);
			mask-image: url(public/images/msgpopup/msgpopup_type_dec1.svg);
}


/* [style set] welmsg_type_2：通知*/
.welmsg_type_2 .welmsg-header{
	background:linear-gradient(-45deg, #F59700, #f5d758); 
}
.welmsg_type_2 .welmsg-sign_1:before {
	-webkit-mask-image: url(public/images/msgpopup/msgpopup_type2.svg);
			mask-image: url(public/images/msgpopup/msgpopup_type2.svg);
}

/* [style set] welmsg_type_3：警告*/
.welmsg_type_3 .welmsg-header{
	background:linear-gradient(-45deg, #b02726, #f72b2b); 
}
.welmsg_type_3 .welmsg-sign_1:before {
	-webkit-mask-image: url(public/images/msgpopup/msgpopup_type3.svg);
			mask-image: url(public/images/msgpopup/msgpopup_type3.svg);
}


.welmsg-footer{
	margin-top:2rem;
}

.welpopup-close {
	background: var(--color-one);
	border: none;
	border-radius: 50px;
	color: white;
	font-size: 16px; font-weight: bold;
	
	cursor: pointer;
	padding: 12px 30px;
	/*margin-top:12px;*/
	transition: all 0.2s;
}

/* [style set] welmsg_type_2：通知*/
.welmsg_type_2 .welpopup-close{
	background:linear-gradient(-45deg, #F59700, #f5d758); 
}

/* [style set] welmsg_type_3：警告*/
.welmsg_type_3 .welpopup-close{
	background:linear-gradient(-45deg, #b02726, #f72b2b); 
}


.welpopup-close:hover {
	transform: translateY(-2px);
}

.welpopup-tips{
	font-size:12px;
	margin-top:6px;
}


@keyframes BigShow {
	0% {
		transform:scale(1);		
	}
	50% {
		transform:scale(1.6);		
	}
	100% {
		transform:scale(1);		
	}
}

@keyframes SmallShow {
	0% {
		transform:scale(1);		
	}
	50% {
		transform:scale(0.5);		
	}
	100% {
		transform:scale(1);		
	}
}

@keyframes swing {
  20% {
	-webkit-transform: rotate3d(0, 0, 1, 15deg);
			transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
	-webkit-transform: rotate3d(0, 0, 1, -10deg);
			transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
	-webkit-transform: rotate3d(0, 0, 1, 5deg);
			transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
	-webkit-transform: rotate3d(0, 0, 1, -5deg);
			transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
			transform: rotate3d(0, 0, 1, 0deg);
  }
}