/* POPUP */
.popup {outline: 2px solid #01AAFF; border: 0; border-radius: 10px; background: #FFF; margin: auto; inset: 0; width: 100%; max-width: calc(100% - 34px); overflow-y: auto; position: fixed; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); z-index: 9999; transition: all .5s ease-in-out}
.popup[open] {display: block}
.popup::backdrop {display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9998; background: rgba(0, 0, 0, .4)}
.popup .contents {padding-inline: 20px; padding-block: 40px 15px}
.popup .contents > a:focus {outline: 2px solid #000; outline-offset: -2px; border-radius: 10px}
.popup .close {position: absolute; top: 4px; right: 6px; z-index: 1; width: 34px; height: 34px; background: url(../images/icon/x2.svg) no-repeat center center / 14px 14px; font-size: 0}
.popup .close:focus {outline: 0}
.popup .close:focus-visible {outline: 2px solid #000; border-radius: 2px}
.popup .title {font-size: 2.2rem; font-weight: 500; color: #01AAFF; margin-bottom: 23px}
.popup a {display: inline-block}
.popup.-v2 {overflow: unset; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px)}
.popup.-v2 .close {top: auto; bottom: calc(100% + 2px); right: 0; padding-inline: 10px; width: auto; color: #FFF; font-size: 1.3rem; font-weight: 600; background: none; display: flex; align-items: center; gap: 8px}
.popup.-v2 .close::after {content: ''; width: 12px; height: 12px; background: url(../images/icon/x2.svg) no-repeat 0 0 / cover; filter: brightness(0) invert(1)}
.popup.-v2 .contents {padding: 0; overflow-y: auto; border-radius: 10px; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px)}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	/* POPUP */
	.popup {max-width: 1200px}
	.popup .contents {padding-inline: 35px; padding-block: 43px 20px}
	.popup .title {font-size: 3rem; margin-bottom: 26px}
	.popup .close {top: 25px; right: 25px}
}