section.apt-page {
	max-width:600px;
	margin:0 auto;
	padding-bottom: 56px;
	padding-top: 32px;

	*{
		box-sizing: border-box;
	}

	article.apt-intro{
		padding:0px 8px 10px 8px;
		z-index: 300;
		background-color: #fff;
		top: 0;
		margin:0 auto;
		left:0;
		max-width: 600px;
		right:0;
		.header-top {
			top:0;
			left:8px;
			right:8px;
			z-index: 20;
			position:fixed;
			height:32px;
			display:flex;
			color:#fff;
			border-radius: 0 0 6px 6px;
			background-color:#11B2FE;
			align-items: center;
			padding:0 10px;
			p {
				font-size:15px;
				flex:1;
			}
			button {
				padding:0;
				appearance: none;
				border:0;
				margin:0;
				background-color: transparent;
				min-width: 0;
				flex-shrink: 0;
				width:20px;
				&.btn-back {
					padding-right:7px;
				}
			}
		}


		.intro-wrap{
			position: relative;
			padding: 10px 0 0 0;

			.member-btn{
				position: absolute;
				right:2px;
				top:0;
				z-index: 100;
				background: url("/app/common/img/apt/user.png") no-repeat top center / cover;
				width: 29px;
				height: 30px;
			}

			.bg-img{
				height: 84px;
				background: url("/app/common/img/apt/intro_bg.png") no-repeat top center / contain;
				aspect-ratio: 1080 / 226;
				width: 100%;
				display: flex;
				align-items: flex-end;

			}
			.input-box{
				margin:-10px 0 0;
				/*margin-top: 100px;*/

				input{
					box-sizing: border-box;
					font-family: 'Cafe24Ohsquare';
					width: 100%;
					border-radius: 4px;
					height: 32px;
					border: 1px solid #695998;
					outline: none;
					padding: 0 6px;
					font-size: 13px;
					letter-spacing: -0.02em;
				}
			}
		}
	}

	article.apt-banner{
		margin-top: 0;

		.swiper-group-box{

			.swiper{
				height: auto;
				background: transparent;
				border:0;

				.swiper-wrapper{

					.swiper-slide{
						height: auto;
						padding: 0;
						margin:0;
					}
				}
			}
			.banner-wrap{
				display: flex;
				aspect-ratio: 496 / 101;
				width: 100%;

				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}



	}

	article.apt-list{
		padding: 16px 8px 32px;


		.list-wrap{

			ul{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 24px 16px;

				li{
					min-width:0;

					.item-wrap{
						display: block;

						.view-box{
							position: relative;

							.detail-box{
								position: absolute;
								top:0;
								right:0;
								bottom:0;
								left:0;
								z-index: 10;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: flex-end;
								padding: 8px;

								.label-box{
									color: #fff;
									font-weight: 800;
									font-size: 24px;
									line-height: 36px;
									margin-top: 8px;
								}

								.distance-box{
									position: absolute;
									top:65%;
									transform: translateY(-50%);
									border-radius:500px;
									display: inline-flex;
									padding: 6px 8px;
									align-items: center;
									justify-content: center;
									background-color: rgba(255, 192, 0, 0.83);
									text-decoration: none;


									.txt{
										font-family: 'Cafe24Ohsquare';
										font-size: 14px;
										color: #000;
										text-decoration: none;
										border:0;
									}

									.ic{
										margin-right: 8px;

										&.ic-place{
											background: url("/app/common/img/apt/place.png") no-repeat center / cover;
											width: 17px;
											height: 18px;
										}
									}
								}

							}

							.img-box{
								aspect-ratio: 1/1;
								position: relative;
								overflow: hidden;
								border-radius:8px;

								.mark-img{
									position: absolute;
									right:-16px;
									top:-8px;
								}

								img{
									width: 100%;
									height: 100%;
									object-fit: cover;
								}

							}
						}


						.info-box{
							padding-top: 8px;

							.subject-box{
								font-size: 16px;
								color: #666;
								line-height: 140%;
							}

							.con-box{
								font-size: 16px;
								line-height: 140%;
								font-weight: 700;
								color: #695998;
							}
						}

						.link-box{
							margin-top: 8px;
							display: flex;

							img{
								width: 100%;
							}
						}
					}
				}
			}
		}


	}


	article.apt-footer{

		position: fixed;
		bottom:0;
		left:0;
		right:0;
		max-width:600px;
		margin:0 auto;
		z-index: 200;
		background-color: #f2f2f2;
		.footer-wrap{
			padding: 12px 8px;
			display: flex;
			gap: 8px;

			.footer-btn{
				border-radius:4px;
				width: 100%;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 32px;
				color: #fff;
				font-weight: 500;
				font-family: 'Cafe24Ohsquare';
				text-decoration: none;
				font-size: 18px;

				&.type-green{
					background: #92d050;
				}

				&.type-gary{
					background-color: #a6a6a6;

				}
			}

		}

	}






}





article.msg-layer{
	position: fixed;
	z-index: 501;
	display: none;



	&:before{
		z-index: 400;
		position: fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		background-color: rgba(0, 0, 0, .4);
	}

	.layer-wrapper{
		box-sizing: border-box;
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		max-width:500px;
		margin:0 auto;
		width: calc(100% - 30px);
		z-index: 401;

		.layer-contents{
			border-radius:8px;
			padding: 40px 16px 20px;
			animation: showSweetAlert .3s;
			will-change: transform;
			background-color: #fff;
		}

		.img-view-list{

			.swiper{
				height: auto;
				background: transparent;
				border:0;
			}
			.swiper-slide{
				height: auto;
				padding: 0;
				border-radius:0;
				margin:0;
				border:0;
			}

			.item-wrap{
				max-height: 50vh;
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				img{
					max-width:100%;
					max-height: 100%;
					object-fit: contain;
				}
			}




		}

		.msg-form-box{

			.form-txt-box{
				color: #595959;
				font-size: 22px;
				font-weight: 500;
				line-height: 26px;
				padding-bottom: 20px;
				text-align: center;
			}

			.form-guide-box{
				padding-top: 10px;
				font-size: 14px;
				line-height: 20px;
				text-align: center;
				color: #595959;

			}
			.form-input-box{
				display: flex;
				justify-content: center;

				input{
					width: 100%;
					outline: none;
					flex:1;
					min-width:0;
					margin:0;
					height: 30px;
					border-radius:4px;
					background-color: #fff;
					border: 1px solid #333;
					font-size: 14px;
					padding: 0 8px;
				}

			}

		}

		.input-box{
			display: flex;


			textarea{
				font-family: 'Cafe24Ohsquare';

				outline: none;
				width: 100%;
				border: 1px solid #665d95;
				padding: 8px 32px 8px 8px;
				border-radius: 8px;
				color: #878789;
				font-size: 16px;
				line-height: 20px;
				font-weight: 500;
				position: relative;
				height: 100px;
			}
		}

		.preview-box{
			display: flex;
			justify-content: center;

			.img-box{
				display: flex;
				max-width:400px;
				max-height: 400px;
				/*aspect-ratio: 1/1;*/

				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		.msg-box{
			text-align: center;

			.view-box{
				display: inline-flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding-bottom: 8px;

				.ic{

					&.ic-success{
						background: url("/app/common/img/delivery/img_delivery_chk.png") no-repeat center / cover;
						aspect-ratio: 1/1;
						width: 52px;
					}
				}

				.view-txt{
					padding-top: 12px;
					font-size: 24px;
					font-weight: 500;
					color: #555;

				}
			}

			.msg-txt{
				font-size: 18px;
				line-height: 24px;
				color: #555;
				letter-spacing: -0.02em;

				&.fc-red{
					color: red;
				}

				.small-txt{
					font-size: 14px;
					line-height: 20px;

					&.fc-red{
						color: red;
					}
				}

			}
		}

		.msn-btn-list{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 10px;
			padding-top: 30px;

			.msg-btn{
				outline: none;
				border-radius:8px;
				height: 40px;
				width: 74px;
				font-size: 14px;
				font-weight: 500;
				border:0;


				&.type-cancel{
					background-color: #efefef;
					color: #555;
				}

				&.type-success{
					background-color: #7cd1f9;
					color: #fff;
				}

			}
		}
	}

}

@-webkit-keyframes showSweetAlert {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	1% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	45% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	80% {
		-webkit-transform: scale(.95);
		transform: scale(.95)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes showSweetAlert {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	1% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	45% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	80% {
		-webkit-transform: scale(.95);
		transform: scale(.95)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}





.swal-icon--error {
	border-color: #f27474;
	-webkit-animation: animateErrorIcon .5s;
	animation: animateErrorIcon .5s
}

.swal-icon--error__x-mark {
	position: relative;
	display: block;
	-webkit-animation: animateXMark .5s;
	animation: animateXMark .5s
}

.swal-icon--error__line {
	position: absolute;
	height: 5px;
	width: 47px;
	background-color: #f27474;
	display: block;
	top: 37px;
	border-radius: 2px
}

.swal-icon--error__line--left {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 17px
}

.swal-icon--error__line--right {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 16px
}

@-webkit-keyframes animateErrorIcon {
	0% {
		-webkit-transform: rotateX(100deg);
		transform: rotateX(100deg);
		opacity: 0
	}
	to {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		opacity: 1
	}
}

@keyframes animateErrorIcon {
	0% {
		-webkit-transform: rotateX(100deg);
		transform: rotateX(100deg);
		opacity: 0
	}
	to {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		opacity: 1
	}
}

@-webkit-keyframes animateXMark {
	0% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	50% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	80% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		margin-top: -6px
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		margin-top: 0;
		opacity: 1
	}
}

@keyframes animateXMark {
	0% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	50% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	80% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		margin-top: -6px
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		margin-top: 0;
		opacity: 1
	}
}

.swal-icon--warning {
	border-color: #f8bb86;
	-webkit-animation: pulseWarning .75s infinite alternate;
	animation: pulseWarning .75s infinite alternate
}

.swal-icon--warning__body {
	width: 5px;
	height: 47px;
	top: 10px;
	border-radius: 2px;
	margin-left: -2px
}

.swal-icon--warning__body, .swal-icon--warning__dot {
	position: absolute;
	left: 50%;
	background-color: #f8bb86
}

.swal-icon--warning__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -4px;
	bottom: -11px
}

@-webkit-keyframes pulseWarning {
	0% {
		border-color: #f8d486
	}
	to {
		border-color: #f8bb86
	}
}

@keyframes pulseWarning {
	0% {
		border-color: #f8d486
	}
	to {
		border-color: #f8bb86
	}
}

.swal-icon--success {
	border-color: #a5dc86
}

.swal-icon--success:after, .swal-icon--success:before {
	content: "";
	border-radius: 50%;
	position: absolute;
	width: 60px;
	height: 120px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.swal-icon--success:before {
	border-radius: 120px 0 0 120px;
	top: -7px;
	left: -33px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 60px 60px;
	transform-origin: 60px 60px
}

.swal-icon--success:after {
	border-radius: 0 120px 120px 0;
	top: -11px;
	left: 30px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 60px;
	transform-origin: 0 60px;
	-webkit-animation: rotatePlaceholder 4.25s ease-in;
	animation: rotatePlaceholder 4.25s ease-in
}

.swal-icon--success__ring {
	width: 80px;
	height: 80px;
	border: 4px solid hsla(98, 55%, 69%, .2);
	border-radius: 50%;
	box-sizing: content-box;
	position: absolute;
	left: -4px;
	top: -4px;
	z-index: 2
}

.swal-icon--success__hide-corners {
	width: 5px;
	height: 90px;
	background-color: #fff;
	padding: 1px;
	position: absolute;
	left: 28px;
	top: 8px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.swal-icon--success__line {
	height: 5px;
	background-color: #a5dc86;
	display: block;
	border-radius: 2px;
	position: absolute;
	z-index: 2
}

.swal-icon--success__line--tip {
	width: 25px;
	left: 14px;
	top: 46px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: animateSuccessTip .75s;
	animation: animateSuccessTip .75s
}

.swal-icon--success__line--long {
	width: 47px;
	right: 8px;
	top: 38px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: animateSuccessLong .75s;
	animation: animateSuccessLong .75s
}

@-webkit-keyframes rotatePlaceholder {
	0% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	5% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	12% {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
	to {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
}

@keyframes rotatePlaceholder {
	0% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	5% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	12% {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
	to {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
}

@-webkit-keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px
	}
	54% {
		width: 0;
		left: 1px;
		top: 19px
	}
	70% {
		width: 50px;
		left: -8px;
		top: 37px
	}
	84% {
		width: 17px;
		left: 21px;
		top: 48px
	}
	to {
		width: 25px;
		left: 14px;
		top: 45px
	}
}

@keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px
	}
	54% {
		width: 0;
		left: 1px;
		top: 19px
	}
	70% {
		width: 50px;
		left: -8px;
		top: 37px
	}
	84% {
		width: 17px;
		left: 21px;
		top: 48px
	}
	to {
		width: 25px;
		left: 14px;
		top: 45px
	}
}

@-webkit-keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px
	}
	65% {
		width: 0;
		right: 46px;
		top: 54px
	}
	84% {
		width: 55px;
		right: 0;
		top: 35px
	}
	to {
		width: 47px;
		right: 8px;
		top: 38px
	}
}

@keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px
	}
	65% {
		width: 0;
		right: 46px;
		top: 54px
	}
	84% {
		width: 55px;
		right: 0;
		top: 35px
	}
	to {
		width: 47px;
		right: 8px;
		top: 38px
	}
}

.swal-icon--info {
	border-color: #c9dae1
}

.swal-icon--info:before {
	width: 5px;
	height: 29px;
	bottom: 17px;
	border-radius: 2px;
	margin-left: -2px
}

.swal-icon--info:after, .swal-icon--info:before {
	content: "";
	position: absolute;
	left: 50%;
	background-color: #c9dae1
}

.swal-icon--info:after {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -3px;
	top: 19px
}

.swal-icon {
	width: 80px;
	height: 80px;
	border-width: 4px;
	border-style: solid;
	border-radius: 50%;
	padding: 0;
	position: relative;
	box-sizing: content-box;
	margin: 20px auto
}

.swal-icon:first-child {
	margin-top: 32px
}

.swal-icon--custom {
	width: auto;
	height: auto;
	max-width: 100%;
	border: none;
	border-radius: 0
}

.swal-icon img {
	max-width: 100%;
	max-height: 100%
}

.swal-title {
	color: rgba(0, 0, 0, .65);
	font-weight: 600;
	text-transform: none;
	position: relative;
	display: block;
	padding: 13px 16px;
	font-size: 27px;
	line-height: normal;
	text-align: center;
	margin-bottom: 0
}

.swal-title:first-child {
	margin-top: 26px
}

.swal-title:not(:first-child) {
	padding-bottom: 0
}

.swal-title:not(:last-child) {
	margin-bottom: 13px
}

.swal-text {
	font-size: 16px;
	position: relative;
	float: none;
	line-height: normal;
	vertical-align: top;
	text-align: left;
	display: inline-block;
	margin: 0;
	padding: 0 10px;
	font-weight: 400;
	color: rgba(0, 0, 0, .64);
	max-width: calc(100% - 20px);
	overflow-wrap: break-word;
	box-sizing: border-box
}

.swal-text:first-child {
	margin-top: 45px
}

.swal-text:last-child {
	margin-bottom: 45px
}

.swal-footer {
	text-align: right;
	padding-top: 13px;
	margin-top: 13px;
	padding: 13px 16px;
	border-radius: inherit;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.swal-button-container {
	margin: 5px;
	display: inline-block;
	position: relative
}

.swal-button {
	background-color: #7cd1f9;
	color: #fff;
	border: none;
	box-shadow: none;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 24px;
	margin: 0;
	cursor: pointer
}

.swal-button:not([disabled]):hover {
	background-color: #78cbf2
}

.swal-button:active {
	background-color: #70bce0
}

.swal-button:focus {
	outline: none;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, .29)
}

.swal-button[disabled] {
	opacity: .5;
	cursor: default
}

.swal-button::-moz-focus-inner {
	border: 0
}

.swal-button--cancel {
	color: #555;
	background-color: #efefef
}

.swal-button--cancel:not([disabled]):hover {
	background-color: #e8e8e8
}

.swal-button--cancel:active {
	background-color: #d7d7d7
}

.swal-button--cancel:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(116, 136, 150, .29)
}

.swal-button--danger {
	background-color: #e64942
}

.swal-button--danger:not([disabled]):hover {
	background-color: #df4740
}

.swal-button--danger:active {
	background-color: #cf423b
}

.swal-button--danger:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(165, 43, 43, .29)
}

.swal-content {
	padding: 0 20px;
	margin-top: 20px;
	font-size: medium
}

.swal-content:last-child {
	margin-bottom: 20px
}

.swal-content__input, .swal-content__textarea {
	-webkit-appearance: none;
	background-color: #fff;
	border: none;
	font-size: 14px;
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .14);
	padding: 10px 13px;
	border-radius: 2px;
	transition: border-color .2s
}

.swal-content__input:focus, .swal-content__textarea:focus {
	outline: none;
	border-color: #6db8ff
}

.swal-content__textarea {
	resize: vertical
}

.swal-button--loading {
	color: transparent
}

.swal-button--loading ~ .swal-button__loader {
	opacity: 1
}

.swal-button__loader {
	position: absolute;
	height: auto;
	width: 43px;
	z-index: 2;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	pointer-events: none;
	opacity: 0
}

.swal-button__loader div {
	display: inline-block;
	float: none;
	vertical-align: baseline;
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	margin: 2px;
	opacity: .4;
	border-radius: 7px;
	background-color: hsla(0, 0%, 100%, .9);
	transition: background .2s;
	-webkit-animation: swal-loading-anim 1s infinite;
	animation: swal-loading-anim 1s infinite
}

.swal-button__loader div:nth-child(3n+2) {
	-webkit-animation-delay: .15s;
	animation-delay: .15s
}

.swal-button__loader div:nth-child(3n+3) {
	-webkit-animation-delay: .3s;
	animation-delay: .3s
}

@-webkit-keyframes swal-loading-anim {
	0% {
		opacity: .4
	}
	20% {
		opacity: .4
	}
	50% {
		opacity: 1
	}
	to {
		opacity: .4
	}
}

@keyframes swal-loading-anim {
	0% {
		opacity: .4
	}
	20% {
		opacity: .4
	}
	50% {
		opacity: 1
	}
	to {
		opacity: .4
	}
}

.swal-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, .4);
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s
}

.swal-overlay:before {
	content: " ";
	display: inline-block;
	vertical-align: middle;
	height: 100%
}

.swal-overlay--show-modal {
	opacity: 1;
	pointer-events: auto
}

.swal-overlay--show-modal .swal-modal {
	opacity: 1;
	pointer-events: auto;
	box-sizing: border-box;
	-webkit-animation: showSweetAlert .3s;
	animation: showSweetAlert .3s;
	will-change: transform
}

.swal-modal {
	width: 478px;
	opacity: 0;
	pointer-events: none;
	background-color: #fff;
	text-align: center;
	border-radius: 5px;
	position: static;
	margin: 20px auto;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	z-index: 10001;
	transition: opacity .2s, -webkit-transform .3s;
	transition: transform .3s, opacity .2s;
	transition: transform .3s, opacity .2s, -webkit-transform .3s
}

@media (max-width: 500px) {
	.swal-modal {
		width: calc(100% - 20px)
	}
}
						
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		/*display: none;*/
		justify-content: center;
		align-items: center;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s linear;

		&.is-visible{
			transition: none;
			opacity: 1;
			visibility: visible;

		}

	}
	.popup-content {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.popup-content img {
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
	.popup-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		text-align: center;
	}
	.popup-banner img {
		width: 100%;
		cursor: pointer;
	}