@charset "UTF-8";
/**
* Filename :fortune_tarot.css
* Description :fortune_tarot event styles
**/
/* ================================== base styles & helper ================================== */
@font-face {
	font-family: 'NanumGothic';
	src :url('https://wwwrod.everland.com/font/NanumGothic/NanumGothic.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Aggravo';
	src: url('https://wwwrod.everland.com/font/Aggravo/SBAggroL.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Aggravo';
	src: url('https://wwwrod.everland.com/font/Aggravo/SBAggroM.woff') format('woff');
	font-weight: 500;
    font-display: swap;
}

@font-face {
	font-family: 'Aggravo';
	src: url('https://wwwrod.everland.com/font/Aggravo/SBAggroB.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}

/* base */
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, main, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; background: transparent; font-size: 100%; }
html, body { width: 100%; scroll-behavior: smooth; }
html { font-size: 10px;}
body { color: #333; font-family: 'Aggravo', sans-serif; font-weight: 300; letter-spacing: -.025em; text-align: center; }
ul, ol { list-style-type: none; }
a { box-sizing: border-box; color: #333; text-decoration: none; }
a:hover, a:active { text-decoration: none; }
button { margin: 0; padding: 0; box-sizing: border-box; border: 0 none; background-color: transparent; vertical-align: middle; color: #333; font-family: 'Aggravo'; font-weight: 300; cursor: pointer; outline: none; }
figcaption { display: none; }
img { width: 100%; vertical-align: top; }
em { position: relative; display: block; padding-left: .7rem; font-style: normal; }
em::before { content: '*'; position: absolute; top: .2rem; left: 0; }
.hidden { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); }

/* layout */
.wrapper { overflow: hidden; position: relative; width: 100%; max-width: 720px; margin: 0 auto; background: url('../img/bg.jpg') no-repeat top center; background-size: 100% auto; text-align: center; aspect-ratio: 360 / 1105; }
.wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0 auto; background: url('../img/obj-bg-frame.png') no-repeat top center; background-size: 100% auto; aspect-ratio: 360 / 1105; }

.main { position: relative; z-index: 2; margin-top: 5.7rem; }
.main .title > span { display: block; margin-bottom: .6rem; color: #fff; font-size: 1.5rem; font-weight: 300; line-height: 2rem; letter-spacing: -.38px; }
.main .title > span > strong { color: #ffcfae; font-weight: 300; }
.main .info { display: flex; justify-content: center; align-items: center; margin-top: 1.4rem; }
.main .info > ul li { display: flex; justify-content: flex-start; position: relative; padding-left: 1.5rem; color: #f9d5ff; font-size: 1.5rem; font-weight: 500; line-height: 2.3rem; letter-spacing: -.68px; text-align: left; text-shadow: 0 .2rem 0 #3b1b58; }
.main .info > ul li::before { content: '★'; position: absolute; top: 0; left: 0; font-size: 1.1rem; line-height: 2.1rem; transform: rotateZ(-5deg); }
.main .info > ul li .con { margin-left: 1rem; color: #fff; }
.main .info > ul li .con em { margin-top: -.5rem; font-size: 1.1rem; font-weight: 300; }
.main .info > ul li .con em > small { font-size: .8rem; }

.content { position: relative; z-index: 3; margin-top: 2.9rem; }
.content .details { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 28.4rem; margin: 0 auto; background: url('../img/bg-details.jpg') no-repeat center; background-size: 100% auto; aspect-ratio: 284 / 461; }
.content .details::before { content: ''; position: absolute; top: 2.3rem; right: calc(50% - 18rem - 5rem); width: 21.3rem; height: 15.4rem; background: url('../img/obj-details-lara.png') no-repeat center; background-size: 100% auto; animation: lara 1.2s ease-out 0s infinite alternate forwards; }
.content .details p { width: calc(100% - 4rem); margin: 0 auto; color: #3d005d; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; letter-spacing: -.63px; text-align: left; }
.content .details p + p { margin-top: .8rem; }
.content .details p > strong { color: #8c00d5; font-weight: 500; }
.content .details .box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 1.6rem; width: 25rem; height: 21.7rem; background-color: #fffbe0; }
.content .details .box h3 { margin-bottom: 1rem; color: #ff5a00; font-size: 1.6rem; font-weight: 500; line-height: 1.8rem; letter-spacing: -.81px; }
.content .details .box p { width: 100%; color: #4a4000; text-align: center; }
.content .details .box p + p { margin-top: .7rem; }
.content .details .box p > strong { color: #ff6600; }
.content .details .box p > strong.big { font-size: 1.7rem; line-height: 2rem; letter-spacing: -.77px; }
.content .details .box em { margin-top: .2rem; color: #c78734; font-size: 1.1rem; line-height: 1.8rem; letter-spacing: -.5px; }

.content .card-wrap { margin: 2.8rem auto 0; }
.content .card-wrap h2 > img { width: auto; height: 3.3rem; }
.content .card-wrap ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; width: 100%; max-width: 36rem; margin: 1.9rem auto 0; }
.content .card-wrap ul li > button { overflow: hidden; display: flex; justify-content: center; align-items: center; width: 8.8rem; border-radius: 1rem; background: url('../img/bg-card.png') no-repeat center; background-size: 100% auto; color: transparent; font-size: 1px; text-indent: -9999rem; box-shadow: 0 0 .7rem #d5b8ff, 0 0 1rem rgba(226, 181, 255, .3); aspect-ratio: 88 / 140; animation: card-updown .8s ease-out 1.8s infinite alternate forwards; }
.content .card-wrap ul li.item1 > button { animation-duration: 1.2s; animation-delay: -1s; }
.content .card-wrap ul li.item2 > button { animation-duration: 1s; animation-delay: -.8s; }
.content .card-wrap ul li.item3 > button { animation-duration: 1.2s; animation-delay: -.6s; }
.content .card-wrap ul li.item4 > button { animation-duration: 1s; animation-delay: -.4s; }
.content .card-wrap ul li.item5 > button { animation-duration: 1.2s; animation-delay: -.2s; }
.content .card-wrap ul li.item6 > button { animation-duration: 1s; animation-delay: 0s; }

/* popup */
.popup { overflow: hidden; visibility: hidden; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; max-width: 720px; height: 100%; margin: auto; background-color: rgba(0, 0, 0, .8); opacity: 0; transition: all .3s ease-out; }
.popup .content-wrap { position: relative; }
/* .popup .content-wrap::-webkit-scrollbar { display: none; } */
.popup.on { visibility: visible; z-index: 9; opacity: 1; }
/* popup - default */
.popup.default .content-wrap { width: 26rem; }
.popup.default .content-wrap::before { content: ''; position: absolute; top: -8rem; right: 0; left: 0; width: 100%; margin: 0 auto; background: url('../img/obj-popup-card.png') no-repeat center; background-size: 100% auto; aspect-ratio: 260 / 96; }
.popup.default .content-wrap .cont-box { padding: 3.5rem 0 2rem; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; background-color: #f2daff; color: #5a0060; font-size: 2.5rem; font-weight: 500; line-height: normal; letter-spacing: -1.13px; }
.popup.default .content-wrap .btn-wrap .btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 5rem; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; background-color: #8a0093; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -.4px; }
.popup.default .content-wrap .btn-wrap .btn::after { content: '>'; margin-left: 1rem; font-size: 1rem; letter-spacing: -.2px; }
/* popup - result */
.popup.result { background: transparent url('../img/bg-popup.jpg') no-repeat center top; background-size: 100% auto; }
.popup.result .obj { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; background-position: top center; background-size: 100% auto; color: transparent; text-indent: -9999rem; opacity: .2; }
.popup.result .obj.glitter1 { background-image: url('../img/obj-popup-glitter1.png'); animation: glitter .4s ease-in 0s infinite alternate forwards; }
.popup.result .obj.glitter2 { background-image: url('../img/obj-popup-glitter2.png'); animation: glitter .4s ease-in -.3s infinite alternate-reverse forwards; }
.popup.result .obj.glitter3 { background-image: url('../img/obj-popup-glitter3.png'); animation: glitter .6s ease-in-out 0s infinite alternate forwards; }
.popup.result .content-wrap { overflow-y: auto; width: 100%; max-width: 720px; max-height: 100dvh; padding: 1.2rem 0; }
.popup.result .content-wrap .cont-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 28rem; padding: 3.9rem 0 2.3rem; margin: 1.2rem auto 1.7rem; border-radius: 1.3rem; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; opacity: 0; transform: translateY(20rem) rotateY(0deg) scale(0); aspect-ratio: 280 / 430; box-shadow: 0 0 1.2rem .5rem rgba(255, 255, 255, 0.5); }
.popup.result .content-wrap .tit img { width: auto; height: 3.4rem; }
.popup.result .content-wrap .sub { margin-top: .6rem; font-size: 1.8rem; font-weight: 300; line-height: 2.3rem; letter-spacing: -.81px; }
.popup.result .content-wrap .img { width: 18rem; margin: 0 auto; }
.popup.result .content-wrap .con { overflow-y: auto; width: 23rem; height: 11.5rem; padding: 1.1rem 1.6rem; margin: 0 auto; background-color: #f3f3f3; color: #333; font-family: 'NanumGothic'; font-size: 1.2rem; line-height: 1.7rem; word-break: keep-all; }
.popup.result .content-wrap .btn-wrap { opacity: 0; }
.popup.result .content-wrap .btn-wrap > .btn { display: block; width: 27.5rem; margin: 0 auto; border: none; border-radius: 7.5rem; color: #fff; font-size: 2rem; font-weight: 700; line-height: 2.5rem; letter-spacing: -.9px; box-shadow: 0 0 1.2rem .5rem rgba(255, 255, 255, 0.5); }
.popup.result .content-wrap .btn-wrap > .btn + .btn { margin-top: 1rem; }
.popup.result .content-wrap .btn-wrap > .btn.close { width: 4rem; height: 4rem; border-radius: 50%; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 100% auto; color: transparent; text-indent: -9999rem; box-shadow: 0 0 1.2rem .5rem rgba(255, 255, 255, 0.5); }
.popup.result .content-wrap .btn-wrap > .btn.reservation { display: none; }
.popup.result .content-wrap .btn-wrap > .txt.fail { overflow: hidden; width: 27.7rem; margin: 0 auto; border-radius: 1rem; box-shadow: 0 0 1.2rem .5rem rgba(255, 255, 255, 0.5); }
.popup.result.on .content-wrap .cont-box { animation: card-open .6s ease-in .2s 1 forwards, card-rotate 1s ease-out .8s 1 forwards, card-updown .8s ease-out 1.8s infinite alternate forwards; }
.popup.result.on .content-wrap .btn-wrap { animation: card-con .4s ease-out 1.8s 1 forwards; }
.popup.result.item1 .content-wrap .cont-box { background-image: url('../img/bg-popup-item1.png'); }
.popup.result.item2 .content-wrap .cont-box { background-image: url('../img/bg-popup-item2.png'); }
.popup.result.item3 .content-wrap .cont-box { background-image: url('../img/bg-popup-item3.png'); }
.popup.result.item4 .content-wrap .cont-box { background-image: url('../img/bg-popup-item4.png'); }
.popup.result.item5 .content-wrap .cont-box { background-image: url('../img/bg-popup-item5.png'); }
.popup.result.item6 .content-wrap .cont-box { background-image: url('../img/bg-popup-item1.png'); }
.popup.result.item7 .content-wrap .cont-box { background-image: url('../img/bg-popup-item2.png'); }
.popup.result.item8 .content-wrap .cont-box { background-image: url('../img/bg-popup-item3.png'); }
.popup.result.item9 .content-wrap .cont-box { background-image: url('../img/bg-popup-item4.png'); }
.popup.result.item10 .content-wrap .cont-box { background-image: url('../img/bg-popup-item5.png'); }
.popup.result.item1 .content-wrap .cont-box .sub { color: #1a5600; }
.popup.result.item2 .content-wrap .cont-box .sub { color: #001c56; }
.popup.result.item3 .content-wrap .cont-box .sub { color: #560000; }
.popup.result.item4 .content-wrap .cont-box .sub { color: #562600; }
.popup.result.item5 .content-wrap .cont-box .sub { color: #2d0056; }
.popup.result.item6 .content-wrap .cont-box .sub { color: #1a5600; }
.popup.result.item7 .content-wrap .cont-box .sub { color: #001c56; }
.popup.result.item8 .content-wrap .cont-box .sub { color: #560000; }
.popup.result.item9 .content-wrap .cont-box .sub { color: #562600; }
.popup.result.item10 .content-wrap .cont-box .sub { color: #2d0056; }
.popup.result.item1 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item1.png'); }
.popup.result.item2 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item2.png'); }
.popup.result.item3 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item3.png'); }
.popup.result.item4 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item4.png'); }
.popup.result.item5 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item5.png'); }
.popup.result.item6 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item1.png'); }
.popup.result.item7 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item2.png'); }
.popup.result.item8 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item3.png'); }
.popup.result.item9 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item4.png'); }
.popup.result.item10 .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-item5.png'); }
.popup.result.gold-card .content-wrap .cont-box { justify-content: flex-end; background-image: url('../img/bg-popup-gold.png'); }
.popup.result.gold-card .content-wrap .tit,
.popup.result.gold-card .content-wrap .sub,
.popup.result.gold-card .content-wrap .img { display: none; }
.popup.result.gold-card .content-wrap .con { background-color: #fff; }
.popup.result.gold-card .content-wrap .btn-wrap > .btn.close { background-image: url('../img/btn-popup-close-gold.png'); }
.popup.result.gold-card .content-wrap .btn-wrap > .btn.reservation { display: block; }
.popup.result.gold-card .content-wrap .btn-wrap > .txt.fail { display: none; }

/* animation */
@keyframes glitter {
	0% { opacity: .2; }
	100% { opacity: 1; }
}
@keyframes lara {
	0% { transform: translateY(0); }
	100% { transform: translateY(.5rem); }
}
@keyframes card-open {
	0% { opacity: 0; transform: translateY(20rem) scale(0); }
	88% { opacity: 1; transform: translateY(0) scale(1.2); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-rotate {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(720deg); }
}
@keyframes card-con {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes card-updown {
	0% { transform: translateY(0); }
	100% { transform: translateY(.5rem); }
}

@media (max-width: 359px) {
	.wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }
	.main { margin-top: 0; }
}

@media (min-width: 480px) {
	.wrapper { padding-bottom: 5.2rem; aspect-ratio: auto; }
}

@media (min-width: 720px) {
	.wrapper { background-image: url('../img/bg-pc.jpg'); aspect-ratio: 360 / 1000; }
	.wrapper::after { background-image: url('../img/obj-bg-frame-pc.png'); aspect-ratio: 360 / 1000; }

	.main { margin-top: 102px; }
	.main .title > span { font-size: 27px; line-height: 36px; }
	.main .info > ul li { padding-left: 27px; font-size: 27px; line-height: 42px; text-shadow: 0 2px 0 #3b1b58; }
	.main .info > ul li::before { font-size: 20px; line-height: 38px; }

	.content { margin-top: 52px; }
	.content .details { width: 512px; }
	.content .details::before { top: 56px; }
	.content .details p { width: calc(100% - 82px); }
	.content .details .box { width: 440px; height: 356px; margin-top: 34px; }

	.content .card-wrap { margin-top: 50px; }
	.content .card-wrap ul { margin-top: 34px; }
	.content .card-wrap ul li > button { width: 158px; }
}

/* 반응형 */
@media(max-width:359px) {
	html { font-size: calc(4px + 1.66667vw); }
}

@media(min-width:360px)and (max-width:500px) {
	html { font-size: calc(-4.4px + 4vw); }
}

@media(min-width:390px) {
	html { font-size: 11px; }
}

@media(min-width:501px) {
	html { font-size: 12px; }
}

@media(min-width:720px)and (hover:hover)and (pointer:fine) {
	html { font-size: 16px; }
}