@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

/* @font-face {
	font-family: "HS-Regular";
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/HS-Regular.woff")
		format("woff");
	font-weight: normal;
	font-style: normal;
} */
/* 
@font-face {
	font-family: "GmarketSans";
	font-weight: 700;
	font-style: normal;
	src: url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot");
	src: url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix")
			format("embedded-opentype"),
		url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2")
			format("woff2"),
		url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff")
			format("woff"),
		url("https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf")
			format("truetype");
	font-display: swap;
} */

@font-face {
	font-family: "GmarketSans";
	src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
		format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "HS-Regular";
	src: url("../font/HSSanTokki2.ttf") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "HS-RegularR";
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/HS-Regular.woff")
		format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "WarhavenB";
	src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/WarhavenB.woff2")
		format("woff2");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "RIDIBatang";
	src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff")
		format("woff");
	font-weight: normal;
	font-style: normal;
}

:root {
	--mainBackground: #f6f6f6;
	--maxWidth: 768px;
	--font: "HS-Regular", sans-serif;
	--font2: "WarhavenB", sans-serif;
	--font3: "GmarketSans", sans-serif;
	--font4: "HS-RegularR", sans-serif;
	--main: #6136bb;
	--green: #36bb73;
	--black: #383838;
	--gray: #dbdbdb;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Noto Sans KR", sans-serif;
	/* user-select: none; */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

a {
	text-decoration: none;
	color: unset;
}

body {
	overflow: hidden;
	background-color: var(--mainBackground);
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: relative;
}

body.tarot {
	background: linear-gradient(
		180deg,
		rgba(95, 0, 163, 1) 0%,
		rgba(68, 1, 118, 1) 35%,
		rgba(58, 1, 100, 1) 70%,
		rgba(95, 0, 163, 1) 100%
	);
}

main {
	width: 100%;
	height: 100%;
	max-width: var(--maxWidth);
	margin: 0 auto;
	z-index: 10;
	position: relative;
	overflow: hidden;
}
/* 
main.pastlife {
	background: #172742;
} */

#container {
	width: 100%;
	height: calc(100% - 52px);
	/* padding: 16px; */
	overflow-x: hidden;
	overflow-y: scroll;
}

#tabMenu {
	height: 52px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1px solid #efefef;
}

.layout2 #tabMenu {
	background: #040e32;
	border-top: 1px solid #e1e1e1;
}

#logo {
	height: 45px;
	object-fit: contain;
}

#beta {
	font-family: var(--font);
	font-size: 24px;
	color: var(--black);
	margin-left: 5px;
}

.hide {
	display: none;
	opacity: 0;
	z-index: 0;
	user-select: none;
	pointer-events: none;
}

.hide2 {
	display: none !important;
	opacity: 0;
	z-index: 0;
	user-select: none;
	pointer-events: none;
}

#tabMenu .menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc(100% / 4);
	cursor: pointer;
}

#tabMenu .menu .tabImg {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

#tabMenu .menu .text {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #c2c2c2;
}

#tabMenu .menu .text.selected {
	color: var(--main);
}

.layout2 #tabMenu .menu .text.selected {
	color: #b481fb;
}

#banner {
	width: 100%;
	aspect-ratio: 4.1 / 1;
	overflow: hidden;
}

#banner .banner {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

#banner2 {
	width: 100%;
	aspect-ratio: 3.1 / 1;
	overflow: hidden;
}

#banner2 .banner {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#starBox {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin: 10px 0 30px;
}

#starBox.fixed {
	width: unset;
	position: absolute;
	top: 6px;
	right: 16px;
	margin: 0;
	background: #fff;
	/* overflow: hidden; */
	border-radius: 10px;
}

#starBox .flex {
	display: flex;
	align-items: center;
	/* box-shadow: 1px 1px 5px #00000026; */
	padding: 0 10px;
	height: 40px;
	border-radius: 10px;
}

#starBox .flex img {
	margin-right: 5px;
	height: 16px;
	width: 16px;
	object-fit: contain;
}

#starBox .flex span {
	font-size: 14px;
	font-weight: 700;
}

#starBox .flex span.green {
	color: var(--green);
	margin-right: 10px;
}

#starBox .flex span.purple {
	color: var(--main);
}

#chat.saju #starBox .flex span.green {
	color: #f9f9f9;
	margin-right: 10px;
}

#chat.saju #starBox .flex span.purple {
	color: #f9f9f9;
}

/* 메인 index */

.subContainer {
	width: 100%;
	/* margin-bottom: 30px; */
}

main.normal .subContainer {
	background: #fff;
}

.subContainer:last-child {
	margin-bottom: 0;
}

.subContainer .title {
	font-family: var(--font);
	font-size: 24px;
	font-weight: 400;
	color: var(--black);
	margin-bottom: 20px;
	position: relative;
	text-align: left;
}

.subContainer .title3 {
	font-family: var(--font);
	font-size: 18px;
	font-weight: 400;
	color: var(--black);
	margin-top: 6px;
	margin-bottom: 10px;
	position: relative;
	text-align: left;
}

.subContainer .content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.subContainer .content .choice {
	/* width: calc(25% - 5px); */
	width: calc(50% - 5px);
	background-color: #fff;
	box-shadow: 1px 1px 5px #00000026;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	margin-bottom: 10px;
	cursor: pointer;
}

.subContainer .content .choice.dummy {
	visibility: hidden;
	user-select: none;
	pointer-events: none;
	height: 1px;
}

.subContainer .content .choice .mate {
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.subContainer .content .choice .mate2 {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.subContainer .content .choice .text {
	padding: 0 15px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 92px;
}

.subContainer .content .choice .text2 {
	padding: 0 15px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 90px;
}

.subContainer .content .choice .text p:nth-child(1) {
	font-size: 16px;
	line-height: 23px;
	margin-bottom: 4px;
	font-weight: 700;
	color: var(--black);
}

.subContainer .content .choice .text p:nth-child(2) {
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	color: var(--black);
}

.subContainer .content .choice .text p:nth-child(2) span {
	color: lightslategrey;
}

.subContainer .content .choice .text2 p:nth-child(1) {
	font-size: 16px;
	line-height: 23px;
	margin-bottom: 4px;
	font-weight: 700;
	color: var(--black);
}

.subContainer .content .choice .text2 p:nth-child(2) {
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	color: var(--black);
}

.subContainer .content .todayTarot {
	background-color: #fff;
	box-shadow: 1px 1px 5px #00000026;
	height: 48px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	width: calc(50% - 5px);
}

.subContainer .content .todayTarot p {
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	margin-left: 8px;
}

.subContainer .content .todayTarot img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-left: -8px;
}

.subContainer .product {
	width: 100%;
	display: flex;
	height: 140px;
	cursor: pointer;
	box-shadow: 1px 1px 5px #00000026;
	border-radius: 10px;
	margin-bottom: 16px;
}

.subContainer .product .imgBox {
	width: 140px;
	height: 100%;
}

.subContainer .product .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px 0 0 10px;
}

.subContainer .product .textBox {
	padding: 10px 13px 4px;
	width: calc(100% - 140px);
}

.subContainer .product .textBox .title4 {
	font-size: 14px;
	font-weight: 700;
	color: #151515;
	margin-bottom: 10px;
}

.subContainer .product .textBox .type {
	font-size: 10px;
	color: #6136bb;
	margin-bottom: 7px;
}

.subContainer .product .textBox .counter {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
}

.subContainer .product .textBox .counter p {
	color: #121212;
	font-size: 10px;
	margin-right: 6px;
}

.subContainer .product .textBox .counter p:nth-last-child() {
	margin-right: 0;
}

.subContainer .product .textBox .counter img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	margin-right: 4px;
}

.subContainer .product .textBox .star {
	display: flex;
	align-items: center;
}

.subContainer .product .textBox .star p {
	font-size: 12px;
	vertical-align: middle;
	line-height: 12px;
	font-weight: 700;
	color: #121212;
}

.subContainer .product .textBox .star p.dcPercent {
	font-size: 14px;
	line-height: 14px;
	margin-right: 6px;
	color: #f85b66;
}

.subContainer .product .textBox .star img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	margin-right: 6px;
}

.subContainer .product .textBox .star .oriprice {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 1px;
	margin-left: 6px;
}

.subContainer .product .textBox .star .oriprice p {
	color: #a5a5a5;
}

.subContainer .product .textBox .star .oriprice .line {
	width: 100%;
	background: #a5a5a5;
	height: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.subContainer .product.past {
	height: auto;
	flex-direction: column;
}

.subContainer .product.past .imgBox {
	width: 100%;
	position: relative;
}

.subContainer .product.past .imgBox .band {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 35px;
	background: linear-gradient(90deg, #3a00648f 0%, #6136bb8f 99.41%);
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.subContainer .product.past .imgBox .band p {
	color: #fdfdfd;
	font-size: 15px;
	font-weight: 500;
}

.subContainer .product.past .imgBox .band.saju {
	background: linear-gradient(282.22deg, #554d4d8f 3.14%, #0707078f 90.33%);
}

.subContainer .product.past .imgBox img {
	border-radius: 10px 10px 0 0;
}

.subContainer .product.past .textBox {
	position: relative;
	width: 100%;
	padding-bottom: 14px;
}

.subContainer .product.past .textBox .counter {
	position: absolute;
	right: 5px;
	width: auto;
}

.subContainer .product.simple {
	height: auto;
	flex-direction: column;
	box-shadow: none;
}

.subContainer .product.simple .imgBox {
	width: 100%;
	position: relative;
}

.subContainer .product.simple .imgBox .band {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 35px;
	background: linear-gradient(90deg, #3a00648f 0%, #6136bb8f 99.41%);
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.subContainer .product.simple .imgBox .band p {
	color: #fdfdfd;
	font-size: 15px;
	font-weight: 500;
}

.subContainer .product.simple .imgBox .band.saju {
	background: linear-gradient(282.22deg, #554d4d8f 3.14%, #0707078f 90.33%);
}

.subContainer .product.simple .imgBox img {
	border-radius: 10px;
}

.subContainer .product.simple .textBox {
	position: relative;
	width: 100%;
	padding-bottom: 14px;
}

.subContainer .product.simple .textBox .title4 {
	font-size: 15px;
	font-weight: 500;
	color: #000;
}

.subContainer .product.simple .textBox .star p {
	font-size: 15px;
	font-weight: 600;
}

.subContainer .product.simple .textBox .star p.dcPercent {
	letter-spacing: -0.2px;
	font-weight: 700;
	font-size: 18px;
}

.subContainer .product.simple .textBox .counter {
	position: absolute;
	right: 5px;
	width: auto;
}

.subContainer .product.simple .textBox .counter p {
	color: #696969;
	font-size: 12px;
}

.subContainer .product.simple .textBox .star img {
	width: 18px;
	height: 18px;
}

.subContainer .product.mini {
	height: auto;
	flex-direction: column;
	box-shadow: none;
}

.subContainer .product.mini .imgBox {
	width: 100%;
	height: 120px;
	position: relative;
}

.subContainer .product.mini .imgBox .band {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 35px;
	background: linear-gradient(90deg, #3a00648f 0%, #6136bb8f 99.41%);
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.subContainer .product.mini .imgBox .band p {
	color: #fdfdfd;
	font-size: 15px;
	font-weight: 500;
}

.subContainer .product.mini .imgBox .band.saju {
	background: linear-gradient(282.22deg, #554d4d8f 3.14%, #0707078f 90.33%);
}

.subContainer .product.mini .imgBox img {
	border-radius: 10px;
	object-fit: cover;
}

.subContainer .product.mini .textBox {
	position: relative;
	width: 100%;
	padding: 10px 7px 14px;
}

.subContainer .product.mini .textBox .title4 {
	font-size: 15px;
	font-weight: 500;
	color: #000;
}

.subContainer .product.mini .textBox .star p {
	font-size: 15px;
	font-weight: 600;
}

.subContainer .product.mini .textBox .counter {
	position: absolute;
	right: 5px;
	width: auto;
}

.subContainer .product.mini .textBox .counter p {
	color: #696969;
	font-size: 12px;
}

.subContainer .product.mini .textBox .star img {
	width: 18px;
	height: 18px;
}

.subContainer .tabContainer {
	width: 100%;
	overflow-x: scroll;
	margin-bottom: 20px;
}

.subContainer .tabs {
	height: 100%;
	display: flex;
	transform: translate(0, 0);
	flex-wrap: wrap;
}

.subContainer .tabs .tab {
	width: 70px;
	height: 100%;
	margin-right: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	-webkit-user-drag: none;
	user-select: none;
}

.subContainer .tabs .tab:first-child() {
	margin-left: 16px;
}

.subContainer .tabs .tab:last-child() {
	margin-right: 16px;
}

.subContainer .tabs .tab img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}

.subContainer .tabs .tab p {
	font-size: 11px;
	font-weight: 500;
	color: 000;
	text-align: center;
	-webkit-user-drag: none;
}

.subContainer .tabs2 {
	height: 100%;
	display: flex;
	transform: translate(0, 0);
	flex-wrap: wrap;
	padding: 16px;
}

.subContainer .tabs2 .tab {
	height: 30px;
	margin-right: 10px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	cursor: pointer;
	-webkit-user-drag: none;
	user-select: none;
	padding: 7px 10px;
	border-radius: 10px;
	border: 1px solid #a5a5a5;
}

.subContainer .tabs2 .tab.selected {
	border: 1px solid #6136bb;
}

.subContainer .tabs2 .tab:first-child() {
	margin-left: 16px;
}

.subContainer .tabs2 .tab:last-child() {
	margin-right: 16px;
}

.subContainer .tabs2 .tab img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
	margin-right: 8px;
}

.subContainer .tabs2 .tab p {
	font-size: 14px;
	line-height: 14px;
	font-weight: 500;
	color: #a5a5a5;
	text-align: center;
	-webkit-user-drag: none;
}

.subContainer .tabs2 .tab.selected p {
	color: var(--black);
}

.dark .subContainer .tabs2 .tab.selected {
	border: 1px solid #f9f9f9;
}

.dark .subContainer .tabs2 .tab.selected p {
	color: #f9f9f9;
}

.index .topBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
}

.index .freeStar,
.index .paidStar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 10px;
	padding: 0 12px;
	width: 100%;
	height: 44px;
	border: 1px solid #24a760;
	font-size: 14px;
	font-weight: 700;
	position: relative;
}

.index .freeStar {
	background-color: #fdfdfd;
	color: var(--black);
	margin-bottom: 10px;
}

.index .freeStar .green {
	color: #24a760;
}

.index .paidStar {
	border-color: var(--main);
	background-color: var(--main);
	color: #fff;
	margin-bottom: 16px;
}

.index .currentStar {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px;
}

.index .currentStar .login {
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	color: #333;
}

.index .currentStar .box,
.index .freeStar .box,
.index .paidStar .box {
	display: flex;
	align-items: center;
}

.index .currentStar .box:nth-child(1) {
	margin-right: 10px;
}

.index .box .clock {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 5px;
}

.index .box .info,
.index .box .star {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}

.index .currentStar .box span {
	font-size: 16px;
	font-weight: 700;
	color: var(--black);
}

.index .box .info {
	cursor: pointer;
	margin-left: 5px;
}

.index .freeStar .detail {
	display: none;
	position: absolute;
	background-color: #000000b2;
	padding: 8px 16px;
	border-radius: 8px;
	bottom: -58px;
	z-index: 1;
	left: 3px;
}

.index .freeStar .detail.show {
	display: block;
}

.index .freeStar .detail p {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}

.index .freeStar .detail img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 8px;
}

.index .sunnymong {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 23px 10px 16px;
	min-height: 80px;
}

.index .sunnymong > img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.index .sunnymong .chatBox {
	height: 100%;
	min-height: 40px;
	width: calc(100% - 52px);
	border-radius: 10px 10px 10px 0;
	background: #efefef;
	padding: 10px;
}

.index .sunnymong .chatBox.click {
	position: relative;
}

.index .sunnymong .chatBox.click::after {
	content: "CLICK";
	font-size: 11px;
	color: #d61515;
	position: absolute;
	transform: translate(-50%, -50%) rotate(-45deg);
	top: 0;
	left: 0;
	animation: floating 1s alternate infinite;
}

.index .sunnymong .chatBox #chat {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--black);
}

.index .freeStarGuide {
	width: 100%;
	aspect-ratio: 3 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.index .freeStarGuide img {
	width: 100%;
	object-fit: contain;
	cursor: pointer;
}

.cateTabs {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fill, 70px);
	justify-content: space-between;
}

.cateTabs .tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	cursor: pointer;
	height: 90px;
	width: 70px;
}

.cateTabs .tab img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	margin: 20px 0;
}

.cateTabs .tab .circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #28206e;
}

.cateTabs .tab .circle img {
	margin: 0;
}

.cateTabs .tab p {
	color: #696969;
	font-weight: 500;
	font-size: 13px;
	text-align: center;
}

.index .subtitle {
	color: #000;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.2px;
	margin-bottom: 18px;
}

.best .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 15px 0 10px;
	height: 60px;
	width: 100%;
	border-bottom: 1px solid #373374;
}

.best .item:first-child {
	border-top: 1px solid #373374;
}

.best .item .box {
	display: flex;
	align-items: center;
}

.best .item .box .rank {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("/tarot/img/rankBox.png") no-repeat center / contain;
	margin-right: 15px;
	padding-left: 1px;
}

.best .item .box .rank p {
	color: #6136bb;
}

.best .item .box img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-right: 5px;
}

.best .item .box p {
	color: #000;
	font-size: 14px;
}

.best .item .box p.product_title {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	max-height: 40px;
	line-height: 20px;
	word-break: break-word;
	-webkit-box-orient: vertical;
	max-width: calc(100% - 60px);
	margin-right: 15px;
}

.index .mainTab {
	display: flex;
	align-items: center;
	margin-left: 18px;
	margin-bottom: 15px;
}

.index .mainTab .tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	width: 48px;
}

.index .mainTab .tab p {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: #c2c2c2;
	cursor: pointer;
}

.index .mainTab .tab.selected p {
	color: var(--main);
}

.index .grid {
	display: grid;
	justify-content: space-around;
	grid-gap: 5px;
	grid-template-columns: repeat(auto-fill, 48%);
}

@media (min-width: 560px) {
	.index .grid {
		grid-template-columns: repeat(auto-fill, 32%);
	}
}

@media (min-width: 720px) {
	.index .grid {
		grid-template-columns: repeat(auto-fill, 24%);
	}
}

.index .freeStarArea {
	width: 100%;
	padding: 18px 0 28px;
}

.index .freeStarArea img {
	cursor: pointer;
	width: 100%;
	object-fit: contain;
	border-radius: 10px;
}

#container.index {
	background: #fff;
}

#container.index .today {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 10px 4px;
}

#container.index .today .todayButton {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 5px 0px #00000026;
	cursor: pointer;
	border: 1px solid #b998fe;
	border-radius: 10px;
	width: calc(50% - 8px);
	height: 168px;
}

#container.index .today .todayButton .single {
	width: 30px;
	height: 30px;
	object-fit: contain;
	margin-bottom: 13px;
}

#container.index .today .todayButton .group {
	width: 25px;
	height: 25px;
	object-fit: contain;
	margin-bottom: 16px;
}

#container.index .today .todayButton .text1 {
	font-size: 13px;
	line-height: 22px;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.2px;
	margin-bottom: 5px;
	text-align: center;
}

#container.index .today .todayButton .text2 {
	font-size: 12px;
	color: #000;
	line-height: 20px;
	letter-spacing: -0.2px;
	text-align: center;
}

#container.index .subTab {
	display: flex;
	flex-wrap: wrap;
}

#container.index .subTab .option {
	padding: 8px 10px;
	font-size: 14px;
	line-height: 14px;
	color: #a5a5a5;
	border: 1px solid #a5a5a5;
	border-radius: 5px;
	margin: 0 18px 13px 0;
	cursor: pointer;
	font-weight: 500;
}

#container.index .subTab .option.selected {
	color: var(--main);
	border: 1px solid var(--main);
	font-weight: 600;
}

/* 레이아웃 2 */

.layout2 #container {
	background: linear-gradient(180deg, #090d38 -5.98%, #120452 94.38%);
}

#container.index #logo {
	width: 107px;
	background: url("/tarot/img/logo2.png") no-repeat center / contain;
}

.layout2 #container.index #logo {
	background: url("/tarot/img/logo5.png") no-repeat center / contain;
}

.index .box .star2 {
	object-fit: contain;
	margin-right: 5px;
	background: url("/tarot/img/starp4.png") no-repeat center / contain;
	width: 24px;
	height: 24px;
}

.layout2 .index .box .star2 {
	background: url("/tarot/img/starp4.png") no-repeat center / contain;
}

.layout2 .index .mainTab {
	margin-bottom: 24px;
}

.layout2 .index .mainTab .tab p {
	color: #ffffffb2;
	font-weight: 500;
}

.layout2 .index .mainTab .tab.selected p {
	color: #b998fe;
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-thickness: 2px;
}

.layout2 .index .subtitle {
	color: #fff;
}

.layout2 .cateTabs .tab p {
	color: #fdfdfd;
}

.layout2 .best .item .box p.product_title {
	color: #fdfdfd;
}

.layout2 .best .item .box p {
	color: #fdfdfd;
}

.layout2 .subContainer .product.simple .imgBox img {
	border-radius: 5px;
}

.layout2 .subContainer .product.simple .imgBox .band {
	border-top-left-radius: 5px;
}

.layout2 .subContainer .product.simple .textBox .title4 {
	color: #fff;
}

.layout2 .subContainer .product.simple .textBox .star p {
	color: #fff;
}

.layout2 .subContainer .product.simple .textBox .counter p {
	color: #fdfdfd;
}

.layout2 .subContainer .product.mini .textBox .title4 {
	color: #fff;
}

.layout2 .subContainer .product.mini .textBox .star p {
	color: #fff;
}

.layout2 .index .subtitle span {
	font-weight: 500;
	font-size: 14px;
}

.layout2 #container.index .today .todayButton {
	background: #28206e;
	border: none;
}

.layout2 #container.index .today .todayButton .text1 {
	color: #fff;
}

.layout2 #container.index .today .todayButton .text2 {
	color: #d6d6d6;
}

.layout2 .index .currentStar .login {
	color: #fdfdfd;
}

.mainReview,
.storyReview {
	position: relative;
}

.mainReview .reviewBox {
	height: 100%;
	border-radius: 5px;
}

.mainReview .reviewBox .up {
	height: 94px;
	padding: 25px 63px 25px 16px;
	position: relative;
	background: #e4d1ff;
	border-radius: 5px 5px 0 0;
}

.mainReview .reviewButton {
	width: 26px;
	height: 26px;
	object-fit: contain;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
}

.mainReview .up .product_title {
	color: #040e32;
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.mainReview .up .product_price {
	font-size: 13px;
	font-weight: 600;
	color: #040e32;
}

.mainReview .up .product_price img {
	width: 18px;
	height: 18px;
	position: relative;
	top: 3px;
}

.mainReview .reviewBox .down {
	background: #fff;
	height: 130px;
	padding: 24px 18px;
	width: 100%;
	border-radius: 0 0 5px 5px;
}

.mainReview .reviewBox .down .review {
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.mainReview .reviewBox .down .reviewer {
	color: #a5a5a5;
	font-size: 12px;
	margin-top: 13px;
}

.storyReview .up {
	background: #6a41bf;
	border-radius: 5px 5px 0 0;
	height: 52px;
	position: relative;
	padding: 16px;
	display: flex;
	align-items: center;
}

.storyReview .up .product_title {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.storyReview .up img {
	position: absolute;
	top: 13px;
	right: 20px;
	cursor: pointer;
	width: 26px;
	height: 26px;
}

.storyReview .down {
	height: 130px;
	border-radius: 0 0 5px 5px;
	background: #fff;
	padding: 24px 18px;
}

.storyReview .down .review {
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.storyReview .down .reviewer {
	font-weight: 400;
	font-size: 12px;
	color: #a5a5a5;
	margin-top: 13px;
}

.mainReview .swiper-pagination,
.storyReview .swiper-pagination {
	bottom: 15px !important;
}

.mainReview .swiper-pagination-bullet,
.storyReview .swiper-pagination-bullet {
	opacity: 1;
	background-color: #d9d9d9;
	transition: 0.3s ease-in-out;
	width: 5px;
	height: 5px;
	border-radius: 4px;
	margin: 0 2px !important;
}

.mainReview .swiper-pagination-bullet-active,
.storyReview .swiper-pagination-bullet-active {
	background-color: #0c0942;
	opacity: 1;
}

/* 메인 index 끝 */

/* 타로 설명 */

.tarotDetail {
	width: 100%;
	padding: 16px;
}

.tarotDetail .fullDetail {
	width: calc(100% + 32px);
	margin-left: -16px;
	margin-top: -16px;
}

main.saju .tarotDetail .fullDetail {
	margin-top: 0px;
}

.pastlife .tarotDetail {
	padding: 16px 0;
	background: #172742 !important;
}

.tarotDetail .bgBox {
	padding: 16px;
	width: 100%;
	position: relative;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tarotDetail .bgBox.new {
	padding-top: 20px;
	justify-content: flex-start;
	min-height: 360px;
}

.pastlife .tarotDetail .bgBox {
	background: #14233b !important;
}

.tarotDetail .title1 {
	font-size: 20px;
	font-weight: 700;
	color: #151515;
}

.tarotDetail .bgBox .title1 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 400;
	font-family: "RIDIBatang", sans-serif;
	text-shadow: 0 0 30px #8d444d33;
	padding-right: 70px;
	word-break: keep-all;
	color: #fdfdfd;
}

.tarotDetail .bgBox .title2 {
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 1px;
	/* font-family: var(--font2); */
	font-family: "RIDIBatang", sans-serif;
	color: #fdfdfd;
	text-shadow: 2px 2px 20px #00000080;
	padding-right: 22px;
	word-break: keep-all;
}

.pastlife .tarotDetail .bgBox .title1 {
	color: #fff;
	margin-bottom: 8px;
}

.tarotDetail .type {
	font-size: 14px;
	color: #6136bb;
	margin-bottom: 16px;
}

.tarotDetail .bgBox.new .type {
	color: #c2c2c2;
	font-size: 12px;
	line-height: 18px;
}

.tarotDetail .bgBox .type {
	margin-bottom: 0;
}

.tarotDetail .star {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.tarotDetail .star.two {
	position: absolute;
	right: 8px;
	top: 16px;
}

.tarotDetail .bgBox.new .star.two {
	left: 21px;
	bottom: 8px;
	top: unset;
}

.tarotDetail .star img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	margin-right: 8px;
}

.tarotDetail .star p {
	font-size: 14px;
	font-weight: 700;
	color: #121212;
}

.pastlife .tarotDetail .star p {
	color: #fff;
}

.tarotDetail .bgBox.new .star.two p {
	color: #fdfdfd;
}

.tarotDetail .star.two .free {
	font-size: 16px;
	color: #f85b66;
	background: #00000080;
	padding: 2px 6px 3px;
	border-radius: 5px;
}

.tarotDetail .bgBox .userCount {
	background: #ffffffb2;
	padding: 6px 15px;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	color: #000;
	border-radius: 13px;
	right: 13px;
	bottom: 25px;
	position: absolute;
}

.tarotDetail .bgBox .userCount span {
	color: #6a41bf;
}

.borderLine {
	border-top: 1px solid #f1f1f1;
	height: 1px;
	width: 100%;
}

.pastlife .borderLine {
	border-top: 1px solid #3b527e;
}

.counterBox {
	width: 100%;
	height: 92px;
	border-bottom: 1px solid #d6d6d6;
	display: flex;
	justify-content: space-around;
}

.pastlife .counterBox {
	border-bottom: none;
}

.counterBox div {
	width: 33%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.counterBox div img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-bottom: 4px;
}

.pastlife .counterBox div img {
	width: 22px;
	height: 22px;
}

.counterBox div p {
	font-size: 12px;
	color: #4d4d4d;
}

.pastlife .counterBox p {
	color: #fff;
}

.tarotDetail .content {
	font-size: 16px;
	white-space: pre-line;
}

.tarotDetail .graphText {
	position: relative;
}

.tarotDetail .graphText .big {
	font-size: 18px;
	font-weight: 700;
	color: #151515;
}

.tarotDetail .graphText .big span {
	color: #6136bb;
}

.tarotDetail .graphText .sub {
	font-size: 14px;
	margin-top: 2px;
	color: #6136bb;
	font-weight: 500;
}

.pastlife .tarotDetail .graphText .big {
	color: #fff;
}

.tarotDetail .graphText .small {
	font-size: 14px;
	color: #151515;
	font-weight: 500;
}

.tarotDetail .graphText .small span {
	color: #6136bb;
	font-weight: 600;
}

.tarotDetail .graphText #reviewType {
	position: absolute;
	top: 0;
	right: 0;
	width: 75px;
	height: 28px;
	border-radius: 14px;
	padding-left: 10px;
	outline: none;
	color: #696969;
	font-size: 13px;
	border: 1px solid #d6d6d6;
	appearance: none; /* html의 기본적인 디자인 없애기 */
	-webkit-appearance: none; /* Vendor Prefix */
	-moz-appearance: none; /* Vendor Prefix */
	background: url("/tarot/img/detail_arrowDown.png") no-repeat center right 5px /
		20px;
}

.pastlife .tarotDetail .graphText .small {
	color: #d8d1ff;
}

.tarotDetail .graph {
	display: flex;
	width: 100%;
	border-bottom: 2px solid #f1f1f1;
	height: 134px;
	justify-content: space-around;
	margin-top: 30px;
}

.tarotDetail .graph .bar {
	height: 100%;
	width: 18%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.tarotDetail .graph .bar .gauge {
	width: 50%;
	background-color: #ededed;
}

.tarotDetail .graph .bar .gauge.full {
	background-color: #6136bb;
}

.pastlife .tarotDetail .graph .bar .gauge {
	background-color: #526e97;
}

.pastlife .tarotDetail .graph .bar .gauge.full {
	background-color: #e4efff;
}

.tarotDetail .graphText2 {
	display: flex;
	width: 100%;
	height: 60px;
	justify-content: space-around;
}

.tarotDetail .graphText2 .text {
	width: 18%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.tarotDetail .graphText2 .text img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-bottom: 5px;
}

.tarotDetail .graphText2 .text p {
	font-size: 11px;
	color: #121212;
}

.pastlife .tarotDetail .graphText2 .text p {
	color: #fff;
}

/* 기본 형태 */
.tarotDetail .box {
	padding: 40px 0;
	border-bottom: 1px solid #6a41bf;
	position: relative;
}

.tarotDetail .box::after {
	content: "";
	position: absolute;
	bottom: -11px;
	background: url(/tarot/img/detail_box_star.png) center / 11px 11px;
	width: 11px;
	height: 11px;
	transform: translate(-50%, -50%);
	left: 50%;
}

.tarotDetail .box:last-child {
	border-bottom: none;
}

.tarotDetail .box:last-child::after {
	display: none;
}

.tarotDetail .detail_card {
	width: 70%;
	margin-left: 14%;
	margin-bottom: 20px;
	object-fit: contain;
}

.pastlife .tarotDetail .box {
	padding: 40px 16px;
	border-bottom: 1px solid #3b527e;
}

.tarotDetail .subtitle {
	font-size: 16px;
	letter-spacing: -1px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 18px;
	position: relative;
}

.tarotDetail #detailAccord,
.tarotDetail .detailAccord {
	overflow-y: hidden;
	height: 60px;
	padding: 20px 0px !important;
}

.tarotDetail #detailAccord .subtitle:first-child,
.tarotDetail .detailAccord .subtitle:first-child {
	text-align: center;
}

.tarotDetail .subtitle .toggle {
	color: #ffffff00;
	cursor: pointer;
	font-size: 0px;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	background: url(/tarot/img/detail_toggle2.png) no-repeat center / contain;
	position: relative;
	top: -15px;
	transform: rotate(180deg);
}

.tarotDetail #detailAccord.open,
.tarotDetail .detailAccord.open {
	height: auto;
}

.tarotDetail #detailAccord.open .toggle,
.tarotDetail .detailAccord.open .toggle {
	transform: rotate(0deg);
}

.tarotDetail .subtitle span {
	font-weight: 700;
	color: var(--main);
}

.tarotDetail .text {
	font-size: 14px;
	font-weight: 500;
	color: #696969;
}

.tarotDetail .detailAccord .text {
	margin-bottom: 18px;
}

.tarotDetail .text.last {
	margin-top: 10px;
}

.tarotDetail .check {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	font-weight: 500;
	color: #4d4d4d;
	margin-bottom: 12px;
}

.tarotDetail .detailAccord .check {
	font-size: 16px;
	font-weight: 600;
	color: #383838;
	padding-left: 0;
}

.tarotDetail .detailAccord .check::after {
	display: none;
}

.tarotDetail .box.detailAccord {
	border-bottom: none;
}

.tarotDetail .box.detailAccord::after {
	display: none;
}

main.saju .tarotDetail .box.detailAccord {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

.tarotDetail .check::after {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: url("/tarot/img/orb.png") center / 100% 100%;
	top: 2px;
	left: 0px;
}

.pastlife .tarotDetail .check::after {
	position: absolute;
	content: "";
	width: 16px;
	height: 16px;
	top: 2px;
	left: 0px;
	background: url("/tarot/img/check2.png") center / 100% 100%;
}

.tarotDetail .count {
	padding-left: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
	position: relative;
	margin-bottom: 16px;
	line-height: 1.8;
}

.tarotDetail .count::after {
	content: attr(data-count);
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
	position: absolute;
	top: 0px;
	left: 0;
}

.pastlife .tarotDetail .count::after {
	color: #fff;
}

.tarotDetail .count span {
	color: #4d4d4d;
	font-weight: 400;
	font-size: 15px;
}

.tarotDetail .benefit {
	width: 100%;
	/* height: 106px; */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.tarotDetail .card {
	font-size: 10px;
	font-weight: 500;
	color: var(--black);
	padding: 4px 8px;
	background-color: #f0e9ff;
	border-radius: 6px;
	margin-bottom: 8px;
	display: inline-block;
}

.pastlife .tarotDetail .card {
	color: #fff;
	background: #48669680;
}

.pastlife .tarotDetail .bonus {
	background: #dfebff;
	padding: 4px 8px;
	border-radius: 12px;
	color: #14233b;
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 10px;
}

.pastlife .tarotDetail .previewTextBox {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 12px;
}

.pastlife .tarotDetail .previewTextBox span {
	color: #383838;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 8px;
	background: #fff;
	margin-right: 8px;
}

.pastlife .tarotDetail .previewTextBox p {
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}

.pastlife .tarotDetail .pastPreview {
	width: 100%;
}

.pastlife .tarotDetail .pastPreview .sample {
	width: 100%;
}

.tarotDetail .box .benefit > div {
	margin: 0px 5px 50px 12px;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	border: 1px solid #d5caff;
	position: relative;
}

.tarotDetail .box .benefit > div:nth-last-child() {
	margin: 0px 5px;
}

.tarotDetail .box .benefit > div::after {
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: #4d4d4d;
	position: absolute;
	bottom: -10px;
	word-break: keep-all;
	transform: translateY(100%);
	width: 100%;
}

.pastlife .tarotDetail .box .benefit > div::after {
	color: #fff;
}

.tarotDetail .benefit .future {
	background: url("/tarot/img/future.png") no-repeat center / 20px 18px;
}

.tarotDetail .benefit .future::after {
	content: "미래 상황 예측";
}

.tarotDetail .benefit .love {
	background: url("/tarot/img/love.png") no-repeat center / 20px 18px;
}

.tarotDetail .benefit .love::after {
	content: "미래의 인연";
}

.tarotDetail .benefit .right {
	background: url("/tarot/img/right.png") no-repeat center / 20px 18px;
}

.tarotDetail .benefit .right::after {
	content: "올바른 행동지침";
}

.tarotDetail .benefit .hidden {
	background: url("/tarot/img/hidden.png") no-repeat center / 24px 12px;
}

.tarotDetail .benefit .hidden::after {
	content: "숨겨진 상황 분석";
}

.tarotDetail .benefit .past {
	background: url("/tarot/img/past.png") no-repeat center / 14px 18px;
}

.tarotDetail .benefit .past::after {
	content: "과거와의 연결";
}

.tarotDetail .benefit .energy {
	background: url("/tarot/img/energy.png") no-repeat center / 14px 18px;
}

.tarotDetail .benefit .energy::after {
	content: "에너지 재충전";
}

.tarotDetail .benefit .find {
	background: url("/tarot/img/find.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .find::after {
	content: "삶의 목적 찾기";
}

.tarotDetail .benefit .creativity {
	background: url("/tarot/img/creativity.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .creativity::after {
	content: "창의력과 영감";
}

.tarotDetail .benefit .door {
	background: url("/tarot/img/door.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .door::after {
	content: "기회의 문";
}

.tarotDetail .benefit .fun {
	background: url("/tarot/img/fun.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .fun::after {
	content: "흥미진진";
}

.tarotDetail .benefit .truth {
	background: url("/tarot/img/truth.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .truth::after {
	content: "관계의 진실";
}

.tarotDetail .benefit .growth {
	background: url("/tarot/img/growth.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .growth::after {
	content: "개인 성장";
}

.tarotDetail .benefit .love2 {
	background: url("/tarot/img/love2.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .love2::after {
	content: "새로운 사랑";
}

.tarotDetail .benefit .peace {
	background: url("/tarot/img/peace.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .peace::after {
	content: "내면의 평화";
}

.tarotDetail .benefit .relief {
	background: url("/tarot/img/relief.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .relief::after {
	content: "스트레스 해소";
}

.tarotDetail .benefit .turn {
	background: url("/tarot/img/turn.png") no-repeat center / 24px 24px;
}

.tarotDetail .benefit .turn::after {
	content: "인생의 전환점";
}

.tarotDetail .tellerTitle {
	font-size: 18px;
	font-weight: 600;
	color: #4d4d4d;
	letter-spacing: -0.2px;
	margin-bottom: 18px;
}

.tarotDetail .tellerTitle2 {
	font-size: 16px;
	font-weight: 500;
	color: #383838;
	margin-bottom: 16px;
}

.tarotDetail .tellerFull {
	width: calc(100% + 32px);
	margin-left: -16px;
	object-fit: contain;
	margin-top: 26px;
	margin-bottom: 36px;
}

.tarotDetail .tellerText {
	color: #696969;
	font-size: 14px;
	line-height: 21px;
	margin-bottom: 20px;
}

.tarotDetail .tellerText:last-child {
	margin-bottom: 0;
}

.subContainer {
	position: relative;
}

.subContainer.border {
	border-bottom: 1px solid #373374;
	padding-bottom: 25px;
	margin-bottom: 25px;
}

.subContainer .price {
	display: flex;
	align-items: center;
	position: absolute;
	right: 20px;
	top: 366px;
}

.subContainer .price img {
	margin-right: 8px;
	height: 20px;
	width: 20px;
}

.subContainer .price p {
	font-family: var(--font);
	color: #fff;
	font-size: 20px;
}

.reuniteTitleArea {
	width: 100%;
	height: 650px;
	background: #11112a url("/tarot/img/reuniteTitle1.svg") no-repeat center /
		100% 100%;
}

.reuniteTitleArea .background {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: url("/tarot/img/reuniteTitle2.svg") no-repeat center / 100% 100%;
}

.reuniteTitleArea .background .reuniteTitle {
	width: 295px;
	height: 130px;
}

.reuniteTitleArea .background .reuniteTitle P {
	font-size: 60px;
	line-height: 65px;
	font-family: var(--font);
	letter-spacing: 7px;
	color: #fff;
	text-shadow: 0 0 12px #feffb64d;
}

.reuniteTitleArea .background .reuniteTitle P:nth-child(1) {
	text-align: left;
}

.reuniteTitleArea .background .reuniteTitle P:nth-child(2) {
	text-align: right;
}

.reuniteTitleArea .background p.subtitle {
	font-size: 16px;
	text-align: center;
	color: #ece3ff;
	font-weight: 400;
	margin-top: 30px;
}

.reuniteTitleArea .background .benefit {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60px;
}

.reuniteTitleArea .background .benefit > div {
	margin: 0px 8px 60px;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	position: relative;
	border: none;
}

.reuniteTitleArea .background .benefit > div::after {
	word-break: keep-all;
	font-size: 14px;
	width: 40px;
	text-align: center;
	color: #fff;
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	bottom: -70px;
}

.reuniteTitleArea .background .benefit > div.heart {
	background: #d3b7ff26 url("/tarot/img/reunite_benefit_heart2.png") no-repeat
		center / 36px 36px;
}

.reuniteTitleArea .background .benefit > div.heart::after {
	content: "상대의 마음";
}

.reuniteTitleArea .background .benefit > div.possibility {
	background: #d3b7ff26 url("/tarot/img/reunite_benefit_possibility2.png")
		no-repeat center / 36px 36px;
}

.reuniteTitleArea .background .benefit > div.possibility::after {
	content: "재회 가능성";
}

.reuniteTitleArea .background .benefit > div.direction {
	background: #d3b7ff26 url("/tarot/img/reunite_benefit_direction2.png")
		no-repeat center / 36px 36px;
}

.reuniteTitleArea .background .benefit > div.direction::after {
	content: "접근 방법";
}

.reuniteTitleArea .background .benefit > div.tip {
	background: #d3b7ff26 url("/tarot/img/reunite_benefit_tip2.png") no-repeat
		center / 36px 36px;
}

.reuniteTitleArea .background .benefit > div.tip::after {
	content: "재회 조언	";
}

.reuniteContent {
	width: 100%;
	background: linear-gradient(#1d1736 0%, #291e40 50%, #140c40 100%);
}

.reuniteContent > .box {
	padding: 76px 22px 20px;
	border-bottom: none;
}

.reuniteContent .subtitle2 {
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
}

.reuniteContent .subtitle3 {
	font-size: 22px;
	line-height: 22px;
	color: #fff;
	text-align: center;
}

.reuniteContent .subtitle4 {
	margin-top: 15px;
	font-size: 38px;
	line-height: 38px;
	font-family: var(--font);
	color: #fff;
	text-align: center;
	letter-spacing: 3px;
}

.reuniteContent .subtitle5 {
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	text-align: center;
}

.reuniteContent p.check2 {
	padding: 10px 20px 10px 50px;
	border-radius: 40px;
	position: relative;
	background: #272054;
	color: #fff;
	font-size: 14px;
	line-height: 28px;
	margin-bottom: 14px;
}

.reuniteContent p.check2::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url("/tarot/img/reuniteCheck.png") no-repeat center / 100% 100%;
	position: absolute;
	top: 14px;
	left: 20px;
}

.reuniteContent .reportItem {
	width: 100%;
	margin-top: 40px;
}

.reuniteContent .reportItem .circle {
	border: 1px solid #7824f6;
	border-radius: 50%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	background-color: #272054cc;
	height: 150px;
	margin-top: -30px;
}

.reuniteContent .reportItem .circle::after {
	content: "+";
	font-size: 18px;
	transform: translateX(-50%);
	left: 50%;
	top: 0px;
	color: #e6d6ff;
	position: absolute;
}

.reuniteContent .reportItem .circle:first-child {
	margin-top: 0;
}

.reuniteContent .reportItem .circle:first-child::after {
	display: none;
}

.reuniteContent .reportItem .circle p {
	color: #fff;
}

.reuniteContent .reportItem .circle p:nth-child(1) {
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
}

.reuniteContent .reportItem .circle p:nth-child(2) {
	font-size: 14px;
	line-height: 23px;
}

.reuniteContent .checkList {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.reuniteContent .checkList p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #fff;
	border-radius: 20px;
	background-color: #3c3569;
	padding: 8px 16px;
	margin: 5px;
}

.reuniteContent .mbtiBox {
	width: 264px;
	height: 116px;
	margin: 30px auto 70px;
	display: flex;
	justify-content: space-between;
}

.reuniteContent .mbtiBox .mbti {
	width: 62px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.reuniteContent .mbtiBox .mbti p {
	width: 55px;
	height: 55px;
	font-size: 16px;
	line-height: 18px;
	color: #c2c2c2;
	text-align: center;
	background-color: #4e3c77;
	padding-top: 9px;
}

.reuniteContent .mbtiBox .mbti p:nth-child(1) {
	border-radius: 7px 7px 0 0;
}

.reuniteContent .mbtiBox .mbti p:nth-child(2) {
	border-radius: 0 0 7px 7px;
}

.reuniteContent .mbtiBox .mbti p span {
	font-size: 10px;
	color: #a5a5a5;
}

.reuniteContent .mbtiBox .mbti p.selected {
	width: 61px;
	height: 61px;
	background-color: #7824f6;
	color: #fff;
}

.reuniteContent .checkList2 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
}

.reuniteContent .checkList2 p {
	font-size: 11px;
	line-height: 17px;
	color: #dbdbd8;
	border: 1px solid #dbdbd8;
	border-radius: 20px;
	padding: 5px 10px;
	margin: 5px;
}

.reuniteContent .checkList2 p.selected {
	font-size: 14px;
	line-height: 21px;
	color: #fff;
	border: none;
	padding: 6px 12px;
	background: #7824f6;
}

.reuniteContent .subtitle6 {
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
}

.reuniteContent .subBox {
	border: 1px solid #7824f6;
	border-radius: 8px;
	background-color: #272054;
	box-shadow: 0 0 8px #e6d9ff1a;
	width: 262px;
	height: 160px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.reuniteContent .subBox p {
	color: #fff;
	text-align: center;
}

.reuniteContent .subBox p:nth-child(1) {
	font-family: var(--font);
	font-size: 16px;
}

.reuniteContent .subBox p:nth-child(2) {
	font-size: 15px;
	font-weight: 500;
	margin-top: 15px;
}

.reuniteContent .donut {
	width: 140px;
	height: 140px;
	margin: 0 auto 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 6px solid #7824f6;
	border-radius: 70px;
}

.reuniteContent .donut p {
	font-size: 42px;
	font-weight: 600;
	color: #dfcaff;
	padding-bottom: 10px;
}

.reuniteContent .donut p span {
	font-size: 20px;
}

.reuniteContent .sample1 {
	width: 272px;
	height: 130px;
	display: block;
	margin: 0 auto;
}

/* 재회리포트 */

.reunite {
	width: 100%;
	/* display: flex;
	flex-direction: column;
	align-items: center; */
	padding: 16px;
}

.reunite.profile {
	padding: 0;
}

.reunite #submitArea {
	padding: 20px 15px;
}

.reunite #submitArea .inputTitle {
	height: 70px;
	width: 260px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 30px;
}

.reunite #submitArea .inputTitle p {
	text-shadow: 0 0 8px #e6d6ff99;
	color: #fff;
	font-size: 32px;
	letter-spacing: 6px;
	font-family: var(--font);
}

.reunite #submitArea .inputTitle img:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 56px;
	object-fit: contain;
}

.reunite #submitArea .inputTitle img:nth-child(2) {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 47px;
	height: 48px;
	object-fit: contain;
}

.reunite #submitArea .inputArea {
	border-radius: 8px;
	background-color: #272054;
	border: 1px solid #8b83ad;
	margin: 0 auto;
	width: 90%;
	max-width: 340px;
	/* height: 200px; */
	padding: 20px 16px 16px;
}

.reunite #submitArea .inputArea .ex {
	text-align: center;
	color: #e4dcfe;
	font-size: 14px;
	font-weight: 500;
}

.reunite #submitArea .inputArea .current {
	font-size: 15px;
	color: #fff;
	margin-bottom: 15px;
	text-align: center;
	font-family: var(--font);
}

.reunite #submitArea .inputArea textarea {
	width: 100%;
	height: 64px;
	margin-top: 12px;
	background-color: #ffffff3d;
	resize: none;
	border-radius: 4px;
	padding: 8px;
	text-align: center;
	color: #fff;
}

.reunite #submitArea .submitButton {
	margin: 30px auto;
	width: 90%;
	max-width: 340px;
	border-radius: 12px;
	display: flex;
	height: 52px;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#ede8ffcc 0%, #885adbcc 100%);
}

.reunite #submitArea .submitButton p {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.reunite .reportTitle {
	font-size: 20px;
	font-weight: 500;
	color: #fff;
	line-height: 32px;
	text-align: center;
	margin-bottom: 30px;
}

.reunite .reportTitle span {
	color: #dfcaff;
}

.reunite .subBox {
	background-color: #241c4c;
	border-radius: 10px;
	padding: 28px 15px;
	margin-bottom: 15px;
}

.profile.reunite .subBox {
	background-color: unset;
}

.reunite .subBox .subtitle {
	position: relative;
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	padding-left: 28px;
	margin-bottom: 20px;
}

.reunite .subBox .subtitle::after {
	content: "";
	background: url("/tarot/img/subtitleDot.png") no-repeat center / 22px 22px;
	display: block;
	width: 22px;
	height: 22px;
	position: absolute;
	top: -1px;
	left: 1px;
}

.reunite .subBox .donutsBox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.reunite .subBox .donutsBox .box {
	width: calc(50% - 6px);
	height: 124px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.reunite .subBox .donutsBox .box > p {
	font-size: 14px;
	text-align: center;
	color: #fdfdfd;
}

.reunite .subBox .donutsBox .box .ring {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 6px solid #7824f6;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}

.reunite .subBox .donutsBox .box .ring > p {
	font-size: 26px;
	line-height: 26px;
	font-weight: 600;
	color: #dfcaff;
}

.reunite .subBox .donutsBox .box .ring > p span {
	font-size: 13px;
	font-weight: 600;
}

.reunite .subBox .heading {
	font-size: 12px;
	line-height: 12px;
	color: #252525;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 12px;
	display: inline-block;
	background: #ffffffcc;
	margin-bottom: 5px;
}

.reunite .subBox .content {
	font-size: 15px;
	line-height: 24px;
	margin-bottom: 18px;
	color: #fff;
}

.reunite .subBox .content:last-child {
	margin-bottom: 0;
}

.reunite .subBox .graphBox {
	width: 100%;
	display: flex;
}

.reunite .subBox .graphBox .headArea {
	width: 45px;
}

.reunite .subBox .graphBox .headArea > div {
	height: 36px;
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 64px;
}

.reunite .subBox .graphBox .headArea > div:first-child {
	margin-top: 45px;
}

.reunite .subBox .graphBox .headArea p {
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	word-break: keep-all;
}

.reunite .subBox .graphBox .graphArea {
	width: calc(100% - 45px);
}

.reunite .subBox .graphBox .graphArea .head {
	height: 24px;
	display: flex;
	border-bottom: 1px solid #9f9aae;
	align-items: center;
}

.reunite .subBox .graphBox .graphArea .head p {
	text-align: center;
	font-size: 10px;
	color: #e3deea;
}

.reunite .subBox .graphBox .graphArea .head p:nth-child(1),
.reunite .subBox .graphBox .graphArea .head p:nth-child(2),
.reunite .subBox .graphBox .graphArea .head p:nth-child(4),
.reunite .subBox .graphBox .graphArea .head p:nth-child(5) {
	width: calc(100% / 6);
	min-width: 43px;
}

.reunite .subBox .graphBox .graphArea .head p:nth-child(3) {
	width: calc(100% / 3);
	min-width: 70px;
}

.reunite .subBox .graphBox .graphArea .graph {
	position: relative;
	width: 100%;
	display: flex;
	border-radius: 0 0 10px 10px;
	overflow-x: hidden;
	padding-bottom: 12px;
}

.reunite .subBox .graphBox .graphArea .graph .background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
}

.reunite .subBox .graphBox .graphArea .graph .background div {
	height: 100%;
}

.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(1),
.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(2),
.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(4),
.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(5) {
	width: calc(100% / 6);
	min-width: 43px;
}

.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(3) {
	width: calc(100% / 3);
	min-width: 70px;
	background: #ffffff1f;
}

.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(1),
.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(5) {
	background: #ffffff0f;
}

.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(2),
.reunite .subBox .graphBox .graphArea .graph .background div:nth-child(4) {
	background: #ffffff17;
}

.reunite .subBox .graphBox .graphArea .graph .content {
	position: relative;
	z-index: 2;
	width: 100%;
}

.reunite .subBox .graphBox .graphArea .graph .content .box {
	width: 100%;
	padding-top: 20px;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .me {
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 16px;
	background: #7824f6;
	border-radius: 0 5px 5px 0;
	padding: 0 5px;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .me p {
	font-size: 10px;
	font-weight: 500;
	color: #fff;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .oppo {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 16px;
	background: #dfcaff;
	border-radius: 0 5px 5px 0;
	padding: 0 5px;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .oppo p {
	font-size: 10px;
	font-weight: 500;
	color: #383838;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .descript {
	padding: 0 7px;
	min-height: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.reunite .subBox .graphBox .graphArea .graph .content .box .descript p {
	font-size: 10px;
	line-height: 15px;
	color: #fff;
	width: 58px;
	word-break: keep-all;
}

.reunite
	.subBox
	.graphBox
	.graphArea
	.graph
	.content
	.box
	.descript
	p:nth-child(1) {
	text-align: left;
}

.reunite
	.subBox
	.graphBox
	.graphArea
	.graph
	.content
	.box
	.descript
	p:nth-child(2) {
	text-align: right;
}

/* 재회리포트 끝 */

/* 기본 형태 끝 */

.reviewBox {
	margin-top: 20px;
}

.reviewBox .commentList {
	width: 100%;
	padding: 30px 16px;
}

.reviewBox .soul {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.reviewBox .userComment {
	width: 100%;
	margin-bottom: 20px;
}

.reviewBox .normalReview .userComment {
	margin-bottom: 10px;
	padding: 16px;
	background: #fff;
	border: 1px solid #dbdbdb;
	position: relative;
	border-radius: 6px;
}

.reviewBox.saju .normalReview .userComment {
	background: #fff;
}

.reviewBox .normalReview.best {
	margin-top: 26px;
}

.reviewBox .normalReview.best .userComment {
	margin-bottom: 20px;
	padding: 20px 16px 16px;
	border: 1px solid #b481fb;
}

.reviewBox .normalReview.best .userComment::before {
	content: "BEST";
	background: #b481fb;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 24px;
	border-radius: 10px;
	position: absolute;
	top: -12px;
	left: 0;
	padding: 0 11px;
}

.reviewBox .normalReview.select {
	display: none;
}

.reviewBox .normalReview.select.show {
	display: block;
}

.reviewBox .userComment .detail {
	width: 100%;
	height: 22px;
	display: flex;
	align-items: center;
}

.reviewBox .userComment .detail .user {
	color: #383838;
	font-size: 12px;
	font-weight: 600;
}

.reviewBox .userComment .detail .soul {
	width: 22px;
	height: 22px;
	margin-right: 7px;
}

.reviewBox .userComment .text {
	font-size: 14px;
	font-weight: 500;
	color: #4d4d4d;
	margin-bottom: 6px;
}

.userComment .manager {
	padding: 4px 8px 4px 66px;
	position: relative;
	font-size: 14px;
}

.userComment .manager::after {
	content: "└ 관리자: ";
	font-weight: 600;
	font-size: 14px;
	left: 0px;
	position: absolute;
	top: 5px;
}

.userComment .manager2 {
	padding: 4px 8px 4px 20px;
	position: relative;
	font-size: 14px;
}

.userComment .manager2::after {
	content: "└ ";
	font-weight: 600;
	font-size: 14px;
	left: 0px;
	position: absolute;
	top: 5px;
}

.userComment .manager .bold,
.userComment .manager2 .bold {
	font-weight: 600;
}

.pastlife .reviewBox .userComment .detail .user {
	color: #fff;
}

.pastlife .reviewBox .userComment .detail .text {
	color: #fff;
}

.buttomButton {
	width: 100%;
	display: flex;
	padding: 0 16px;
	align-items: center;
	height: 76px;
	background-color: #fff;
}

.pastlife .buttomButton {
	background-color: #172742;
}

.buttomButton .start {
	width: calc(100% - 70px);
	margin-left: 10px;
	height: 56px;
	border-radius: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #6136bb;
}

.buttomButton .start.full {
	width: 100%;
	margin-left: 0px;
}

.buttomButton .start.disabled {
	pointer-events: none;
	user-select: none;
	background-color: #c2c2c2;
}

.buttomButton .start p {
	font-size: 15px;
	color: #fff;
	font-weight: 700;
}

.buttomButton .home {
	width: 56px;
	height: 56px;
	background: #eae0ff;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.buttomButton .home img {
	width: 30px;
	height: 30px;
}

.buttomButton2 {
	width: 100%;
	display: flex;
	padding: 0 16px;
	align-items: center;
	height: 76px;
	background-color: #272054;
	border-top: 1px solid #453b7b;
}

.buttomButton2 .start {
	width: calc(100% - 70px);
	margin-left: 10px;
	height: 56px;
	border-radius: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #ede8ffcc 0%, #885adbcc 100%);
}

.buttomButton2 .start p {
	font-size: 15px;
	color: #fff;
	font-weight: 700;
}

.buttomButton2 .home {
	width: 52px;
	height: 52px;
	background: #4e4088;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.buttomButton2 .home img {
	width: 20px;
	height: 20px;
}
/* 타로 설명 끝 */

/* 타로설명 전생 */

.pastlife .subHeader {
	background-color: #151515;
}

.pastlife .tarotDetail .subtitle {
	color: #fff;
	position: relative;
}

.pastlife .tarotDetail .subtitle img {
	position: absolute;
	top: 2px;
	right: 2px;
	cursor: pointer;
	width: 20px;
	height: 20px;
}

.pastlife .tarotDetail .subtitle span {
	color: #fff;
	font-size: 14px;
	font-weight: 400;
}

.pastlife .tarotDetail .text {
	color: #eee;
}

.pastlife .reviewBox .userComment .text {
	color: #4d4d4d;
}

.pastlife .reviewBox .userComment .detail .user {
	color: #4d4d4d;
}
.pastlife .tarotDetail .check {
	color: #eee;
}

.pastlife .tarotDetail .count {
	color: #fff;
}

.pastlife .tarotDetail .count span {
	color: #ddd;
}

.pastlife #score {
	padding: 0 16px;
}

.pastlife .tarotDetail .graphText .big {
	color: #383838;
}

.pastlife .reviewBox .userComment .detail .text {
	color: #eee;
}

.pastlife .pastBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 360px;
	padding: 40px 16px;
	margin: 0 auto;
}

.pastlife .pastBox .title {
	font-size: 36px;
	letter-spacing: -1px;
	color: #fff;
	margin-bottom: 0;
}

.pastlife .pastBox .subtitle {
	font-size: 22px;
	letter-spacing: -1px;
	color: #fff;
	margin-bottom: 0;
	font-weight: 400;
}

.pastlife .pastBox .tags {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}

.pastlife .pastBox .tags p {
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	background: #dfebff80;
	border-radius: 14px;
	padding: 3px 10px;
	margin-right: 5px;
}

.pastlife .pastBox .tags p:last-child() {
	margin-right: 0;
}

.pastlife .pastBox .board {
	display: flex;
	align-items: center;
	width: 100%;

	position: relative;
	margin-bottom: 22px;
}

.pastlife .pastBox .board:last-child {
	margin-bottom: 0;
}

.pastlife .pastBox .board.left {
	justify-content: flex-start;
}

.pastlife .pastBox .board.right {
	justify-content: flex-end;
}

.pastlife .pastBox .board p {
	max-width: calc(100% - 60px);
	background: #577ab166;
	font-weight: 500;
	font-size: 15px;
	color: #fff;
	padding: 12px;
	border-radius: 12px;
	text-align: center;
	word-break: keep-all;
}

.pastlife .pastBox .board img {
	width: 46px;
	height: 46px;
	object-fit: fill;
	position: relative;
	bottom: 0;
	transform: translateY(50%);
}

.pastlife .jobList {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}

.pastlife .jobList .subBox {
	display: flex;
	width: 100%;
	height: 50px;
	justify-content: center;
}

.pastlife .jobList .subBox:first-child {
	margin-bottom: 15px;
}

.pastlife .jobList .subBox .job {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid #dbdbdb;
	background: #ffffff33;
	margin: 0 9px;
}

.pastlife .jobList .subBox .job:last-child {
	margin-right: 0;
}

.pastlife .jobList .subBox .job:first-child {
	margin-left: 0;
}

.pastlife .jobList .subBox .job.fill {
	border: 1px solid #fff;
	background: linear-gradient(90deg, #dcc5ff, #6136bb);
}

.pastlife .jobList .subBox .job p {
	font-size: 16px;
	font-family: var(--font);
	color: #a5a5a5;
}

.pastlife .jobList .subBox .job p.small {
	font-size: 12px;
	font-weight: 700;
	font-family: "Noto Sans KR", sans-serif;
	color: #c2c2c2;
}

.pastlife .jobList .subBox .job img {
	width: 12px;
	height: 12px;
}

.pastlife .jobList .subBox .job.fill p {
	color: #fff;
	text-align: center;
	word-break: keep-all;
	font-size: 14px;
}

/* 타로설명 전생 끝 */

/* 카드 뽑기 */

main.flex {
	display: flex;
	align-items: center;
	/* justify-content: center; */
	flex-direction: column;
	overflow-y: scroll;
}

main.flex::-webkit-scrollbar,
main.flex::-webkit-scrollbar-thumb,
main.flex::-webkit-scrollbar-track {
	appearance: none;
	display: none;
}

main.flex > .title {
	font-size: 32px;
	font-family: var(--font);
	text-align: center;
	color: #fff;
	margin-top: 50px;
}

main.flex .cardPlace {
	width: 150px;
	height: 255px;
	border: 2px solid #d0a6ef;
	background-color: #a47bc2;
	margin-bottom: 65px;
	margin-top: 65px;
	position: relative;
	box-sizing: content-box;
	transition: 1s ease-in-out, background 0s;
}

@media (max-height: 700px) {
	main.flex .cardPlace {
		aspect-ratio: 10 / 17;
		width: 100px;
		height: unset;
		margin-top: 40px;
		margin-bottom: 40px;
	}
}

main.flex .cardPlace.open {
	/* border-color: none; */
	border: none;
	background-color: transparent;
	width: 150px !important;
	height: 255px !important;
	margin-bottom: -76px;
	margin-top: 20px;
	position: relative;
	z-index: 101;
}

main.flex .cardPlace .tarotCard {
	animation: 1s cardMove2 forwards ease-in-out;
	position: absolute;
	z-index: 100;
	transition: transform 1.4s ease-in-out;
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
}

main.flex .cardPlace.open .tarotCard {
	animation: unset !important;
	transform: rotateY(180deg);
	top: 0 !important;
	left: 0 !important;
	position: relative;
}

main.flex .cardPlace .tarotCard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	backface-visibility: hidden;
}

main.flex .cardPlace .tarotCard #todaysTarot {
	transform-origin: center;
	transform: rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 1px 1px 10px #00000046;
}

main.flex #cardSelect {
	width: 100%;
	height: 170px;
	/* overflow: hidden; */
	position: relative;
}

main.flex #cardSelect .tarotCard {
	position: relative;
	width: 100px;
	height: 170px;
	cursor: pointer;
}

main.flex #cardSelect .tarotCard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main.flex > .content {
	width: 100%;
	padding: 96px 24px 16px;
	border-radius: 20px 20px 0 0;
	background-color: #fff;
}

main.flex #soulCard {
	width: 70%;
	max-width: 200px;
	object-fit: contain;
	margin-top: 30px;
	margin-bottom: 30px;
}

main.flex > .content .title {
	color: #000;
	font-size: 32px;
	font-family: var(--font);
	text-align: center;
	margin-bottom: 16px;
}

main.flex > .content #content {
	color: #000;
	line-height: 1.5;
	white-space: pre-line;
}

main.flex > .content .todayDetail {
	width: 100%;
	max-width: 768px;
}

main.flex > .content .button {
	max-width: 500px;
	margin: 40px auto;
}

body.tarot .background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding-top: 200px;
	top: 100%;
	transition: all 1.4s ease-in-out;
}

body.tarot .background .whiteArea {
	border-radius: 20px 20px 0 0;
	width: 100%;
	height: 100%;
	background: #fff;
	max-width: var(--maxWidth);
	margin: 0 auto;
}

.resultButton {
	padding: 16px;
	max-width: 500px;
	margin: 0 auto;
}

@keyframes cardMove {
	0% {
		width: 100px;
		height: 170px;
	}
	100% {
		width: 150px;
		height: 255px;
		top: 0;
		left: 0;
	}
}

@keyframes cardMove2 {
	0% {
		/* width: 100px; */
		width: 100%;
	}
	100% {
		width: 100%;
		top: 0;
		left: 0;
	}
}

@keyframes fadeIn {
	100% {
		top: unset;
		bottom: unset;
		left: unset;
		right: unset;
	}
}

main.flex .cardPlace .tarotCard #tarotText {
	position: absolute;
	height: 250px;
	top: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(
		180deg,
		rgb(31 30 69 / 35%) 0%,
		rgb(46 39 58 / 58%) 30.5%,
		rgb(29 23 38 / 58%) 66.5%,
		rgb(8 8 35 / 35%) 100%
	);
	transition: opacity 1.5s 1s ease-in-out;
	opacity: 0;
	overflow-y: hidden;
	transform: rotateY(180deg);
}

main.flex .cardPlace.open.full {
	margin-top: -200px;
	width: 100% !important;
	height: 100vh !important;
	height: 100dvh !important;
	/* position: absolute; */
	top: 0;
	left: 0;
	margin-bottom: 0;
	overflow-y: scroll;
}

main.flex .cardPlace.open .tarotCard #tarotText {
	overflow-y: hidden;
	min-height: 100%;
}
main.flex .cardPlace.open.full .tarotCard #tarotText {
	opacity: 1;
}

main.flex .cardPlace .header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 21px 0 16px;
	position: absolute;
	top: 0;
	left: 0;
}

main.flex .cardPlace .header img:nth-child(1) {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

main.flex .cardPlace .header img:nth-child(2) {
	width: 18px;
	height: 20px;
	object-fit: contain;
	cursor: pointer;
}

main.flex .cardPlace .body {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-y: scroll;
}

main.flex .cardPlace .body .logo {
	width: 117px;
	height: 47px;
	object-fit: contain;
	margin-bottom: 18px;
	margin-top: 56px;
}

main.flex .cardPlace .subTitle {
	font-family: var(--font4);
	font-size: 28px;
	text-align: center;
	color: #fdfdfd;
	margin-bottom: 17px;
}

main.flex .cardPlace .subTitle span {
	color: #ffd400;
	font-family: var(--font4);
}

main.flex .cardPlace .info {
	font-size: 14px;
	font-weight: 500;
	color: #ffffffb2;
	text-align: center;
	margin-bottom: 42px;
}

main.flex .cardPlace .cards {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 440px;
	margin: 10px auto;
}

main.flex .cardPlace .cards .card {
	aspect-ratio: 71 / 118;
	width: 30%;
	margin: 10px 4px 20px;
	height: unset;
	position: relative;
}

main.flex .cardPlace .cards .card img {
	width: 100%;
	height: 100%;
}

main.flex .cardPlace .cards .card p {
	text-align: center;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	font-family: var(--font);
}

main.flex .cardPlace .cards.two .card {
	width: 43%;
}

main.flex .cardPlace .cards.three .card {
	width: calc(99% / 3 - 10px);
}

main.flex .cardPlace .cards.four .card {
	width: 37%;
}

main.flex .cardPlace #cardName {
	font-family: var(--font2);
	font-size: 26px;
	line-height: 39px;
	color: #f5f5f5;
	margin-bottom: 10px;
	text-align: center;
}

main.flex .cardPlace #cardName2 {
	line-height: 30px;
	background-color: #ffffff4d;
	font-size: 14px;
	border-radius: 15px;
	padding: 0 13px;
	margin-top: 10px;
	text-align: center;
	margin-bottom: 45px;
	color: #fff;
}

main.flex .cardPlace #explain {
	padding: 20px 20px 60px;
	font-size: 15px;
	line-height: 26px;
	color: #fff;
	width: 100%;
}

main.flex .cardPlace #explain .title {
	font-size: 15px;
	margin-bottom: 7px;
	font-weight: 600;
}

main.flex .cardPlace #explain .result {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 25px;
}

main.flex .cardPlace .buttons {
	padding: 10px;
	margin-top: 40px;
}

main.flex .cardPlace .buttons > div {
	background: #6136bbdb;
	border-radius: 12px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	cursor: pointer;
}

main.flex .cardPlace .buttons > div:nth-child(2) {
	background: #ffffffdb;
	border: 1px solid #6136bb;
}

main.flex .cardPlace .buttons > div:nth-child(1) {
	margin-bottom: 14px;
}

main.flex .cardPlace .buttons > div p {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

main.flex .cardPlace .buttons > div:nth-child(2) p {
	color: #6136bb;
}

/* 카드 뽑기 끝 */

/* 그룹타로 */

.group {
	width: 100%;
}

.group.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.group .subtitle {
	color: #000;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 8px;
	position: relative;
}

.group .subtitle .textButton {
	position: absolute;
	top: 3px;
	right: 0px;
	color: #fdfdfd;
	font-weight: 500;
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.group .info {
	color: #878787;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 21px;
}

.group .info span {
	color: #ffd400;
}

.group .counter {
	color: #ffd400;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 5px;
	text-align: center;
}

.group .selectBox {
	display: block;
	width: 100%;
	height: 60px;
	outline: none;
	border: 1px solid #dbdbdb;
	padding: 0 22px;
	color: #383838;
	font-weight: 500;
	font-size: 15px;
	border-radius: 7px;
	appearance: none;
	background-image: url("/tarot/img/chevron-down.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
	background-size: 24px;
}

.group .heart {
	width: 100px;
	height: 100px;
	margin-bottom: 5px;
}

.group .welcome {
	font-size: 20px;
	font-weight: 600;
	color: #000;
	text-align: center;
	margin-bottom: 19px;
}

.group .info2 {
	font-size: 14px;
	font-weight: 500;
	color: #4d4d4d;
	text-align: center;
}

.buttonArea {
	width: 100%;
	padding: 10px 10px 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.buttonArea .link {
	margin-top: 20px;
	margin-bottom: 23px;
	color: #fdfdfd;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-align: center;
}

.buttonArea button {
	height: 50px;
	width: 100%;
	color: #fdfdfd;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
	background: #6136bb;
	outline: none;
	border: none;
}

.buttonArea button:disabled,
.buttonArea button.two:disabled {
	background: #efefef;
	color: #c2c2d2;
}

.buttonArea button.two {
	background: #b481fb;
}

.buttonArea #selectWarn {
	border: 1px solid #dcc5ff;
	line-height: 32px;
	width: 230px;
	text-align: center;
	position: relative;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	color: #000;
	border-radius: 6px;
	margin-bottom: 20px;
}

.buttonArea #selectWarn::after {
	content: "";
	background: #fff;
	width: 12px;
	height: 12px;
	border-bottom: 1px solid #dcc5ff;
	border-right: 1px solid #dcc5ff;
	position: absolute;
	transform: translateX(-50%) rotate(45deg);
	left: 50%;
	bottom: -7px;
}

.buttonArea #linkBox p:nth-child(1) {
	line-height: 32px;
	width: 158px;
	text-align: center;
	position: relative;
	background: #dcc5ff;
	font-size: 12px;
	font-weight: 500;
	color: #000;
	border-radius: 6px;
	margin-bottom: 20px;
}

.buttonArea #linkBox p:nth-child(1)::after {
	content: "";
	background: #dcc5ff;
	width: 12px;
	height: 12px;
	position: absolute;
	transform: translateX(-50%) rotate(45deg);
	left: 50%;
	bottom: -6px;
}

.buttonArea #linkBox p:nth-child(2) {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: #878787;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	margin-bottom: 18px;
}

.buttonArea #linkBox {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.buttonArea #linkBox2 {
	margin-bottom: 23px;
	color: #fdfdfd;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.group .cardsArea {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 440px;
	margin: 10px auto;
}

.group .cardsArea .card {
	aspect-ratio: 71 / 118;
	width: 30%;
	margin: 8px 4px;
	position: relative;
}

.group .cardsArea.two .card {
	width: 43%;
}

.group .cardsArea.three .card {
	width: calc(99% / 3 - 10px);
}

.group .cardsArea.four .card {
	width: 37%;
}

.group .cardsArea .card img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.group .cardsArea .card .name,
.cards .card .name {
	position: absolute;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #00000066;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.cards .card .card_picker {
	width: calc(100% - 12px);
	margin: 8px auto 0px;
	line-height: 18px;
	border-radius: 9px;
	font-size: 10px !important;
	background: #00000066;
	font-family: "Noto Sans KR", sans-serif !important;
}

.cards .card:nth-child(1) .card_picker {
	background: #6032a1;
}

.group .cardsArea .card .name p,
.cards .card .name p {
	font-size: 15px;
	font-weight: 500;
	color: #fdfdfd;
	text-align: center;
	line-height: 18px;
}

.group .cardsArea .card:hover .name,
.cards .card:hover .name {
	opacity: 1;
}

/* 그룹타로 끝 */

/* 로그인 */

.loginText1 {
	font-size: 24px;
	text-align: center;
	color: var(--black);
	font-family: var(--font);
}

.loginText2 {
	font-size: 48px;
	text-align: center;
	color: var(--main);
	font-family: var(--font);
}

.loginText3 {
	font-size: 15px;
	text-align: center;
	color: #fff;
	font-weight: 500;
	margin: 10px 0 20px;
}

.loginText4 {
	font-size: 15px;
	text-align: center;
	color: #f9f9f9;
	font-weight: 500;
	background: #6136bb80;
	line-height: 50px;
	border-radius: 25px;
	padding: 0 25px;
}

.loginText4 span {
	font-weight: 700;
	color: #24a760;
}

.loginImg {
	width: 170px;
	height: 176px;
	object-fit: contain;
	margin: 70px 0;
}

.loginButtons {
	width: 100%;
	max-width: 500px;
	padding: 0;
}

.loginButtons .button {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	border-radius: 10px;
	margin-bottom: 10px;
}

.loginButtons .button:nth-child() {
	margin-bottom: 0;
}

.loginButtons .button.google {
	color: #000;
	border: 1px solid var(--gray);
	background: #fff;
}

.loginButtons .button.naver {
	color: #fff;
	background: #2eb401;
}

.loginButtons .button.kakao {
	color: #381f1f;
	background: #f5e14b;
}

.loginButtons .button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 10px;
}

.loginBackground {
	background: url("/tarot/img/loginBackground.png") no-repeat center / cover,
		#00000080;
	width: 100%;
	height: 100%;
	position: relative;
	/* max-width: var(--maxWidth); */
}

.loginBackground::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
	background: #00000080;
}

.loginBackground .flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 20%;
}

.loginLogo {
	width: 212px;
	height: 84px;
	object-fit: contain;
}

.welcome.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.welcome.flex > img {
	width: 105px;
	height: 105px;
	object-fit: contain;
	margin-bottom: 7px;
}

.welcome.flex .text {
	color: #000;
	margin-bottom: 17px;
	text-align: center;
	font-weight: 600;
	font-size: 20px;
}

.welcome.flex .text2 {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #4d4d4d;
}

.welcome.flex .text3 {
	text-align: center;
	color: #4d4d4d;
	font-weight: 500;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	margin-bottom: 24px;
}

.welcome.flex .text4 {
	background: #6136bb;
	color: #fdfdfd;
	font-weight: 500;
	font-size: 15px;
	line-height: 48px;
	width: 300px;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
}

.welcome #recommBox {
	position: relative;
	width: 280px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 20px;
}

.welcome #recommBox #recomm_tel {
	width: 100%;
	height: 40px;
	outline: none;
	border: none;
	border-bottom: 1px solid #dbdbdb;
	color: #696969;
	padding-left: 8px;
	padding-right: 32px;
	font-size: 15px;
	font-weight: 500;
}

.welcome #recommBox .inputBox {
	position: relative;
	width: 170px;
}

.welcome #recommBox button {
	border: none;
	outline: none;
	background: none;
	position: absolute;
	font-weight: 500;
	width: 50px;
	height: 26px;
	bottom: 8px;
	right: 8px;
}

.welcome .couponBox {
	width: 300px;
	height: 225px;
	position: relative;
	background: url("/tarot/img/couponTicket.png") no-repeat center / 100% 100%;
	margin: -40px 0 -20px;
}

.welcome .couponBox .code {
	height: 26px;
	width: 136px;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	background: #fff;
	color: #000;
	position: absolute;
	bottom: 65px;
	left: 52px;
	line-height: 25px;
}

/* 로그인 끝 */

/* 채팅 */

.titleArea {
	display: flex;
	/* padding: 0 16px; */
	align-items: center;
	height: 56px;
}

.titleArea p {
	font-family: var(--font);
	font-size: 30px;
	color: #000;
}

.chatList {
	overflow-y: scroll;
	width: 100%;
	height: calc(100vh - 108px);
	height: calc(100dvh - 108px);
	padding-right: 6px;
}

.chatList .room {
	display: flex;
	height: 72px;
	width: 100%;
	padding: 0 4px;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px solid #373374;
}

.chatList .room .chatDetail {
	width: calc(100% - 50px);
}

.chatList .room .chatDetail .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chatList .room .chatDetail .header p:nth-child(1) {
	font-size: 16px;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 2px;
}

.chatList .room .chatDetail .header p:nth-child(2) {
	font-size: 12px;
	color: #a5a5a5;
}

.chatList .room .chatDetail .lastSentence {
	color: var(--black);
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.chatImg {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-right: 10px;
	border-radius: 15px;
}

.noChat {
	width: 100%;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.noChat p {
	font-size: 16px;
	font-weight: 500;
	color: #383838;
	text-align: center;
}

.noChat .addButtonBox {
	width: 50px;
	height: 50px;
	margin-bottom: 10px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #4d4d4d;
}

#chat li {
	list-style: none;
}

#chatInput #doTarot {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	height: 60px;
	width: 60px;
	position: absolute;
	top: -70px;
	right: 20px;
	background: #ffffffd6;
	z-index: -10;
	transition: opacity 0.4s ease-in-out;
	opacity: 0;
	outline-width: 1px;
	outline-offset: 0;
	outline-color: rgba(0, 130, 206, 0.75);
	outline-style: solid;
	animation: doTarot 2s ease infinite;
}

#chatInput #doTarot.show {
	z-index: 5;
	opacity: 1;
}

#chatInput #doTarot img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

@keyframes doTarot {
	0% {
		outline-width: 1px;
		outline-offset: 0;
		outline-color: rgba(0, 130, 206, 0);
	}

	10% {
		outline-color: rgba(0, 130, 206, 0.75);
	}

	/* The animation finishes at 50% */
	50% {
		outline-width: 7px;
		outline-offset: 4px;
		outline-color: rgba(0, 130, 206, 0);
	}

	100% {
		outline-width: 7px;
		outline-offset: 4px;
		outline-color: rgba(102, 102, 102, 0);
	}
}

.layout2 .titleArea p {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	font-family: "Noto Sans KR";
}

.layout2 .chatList .room .chatDetail .header p:nth-child(1) {
	color: #fdfdfd;
}

.layout2 .chatList .room .chatDetail .header p:nth-child(2) {
	color: #fdfdfd;
}

.layout2 .chatList .room .chatDetail .lastSentence {
	color: #ffffff99;
}

/* 채팅 끝 */

/* 채팅방 */

#chatContainer {
	position: relative;
	width: 100%;
	height: calc(100vh - 110px);
	height: calc(100dvh - 110px);
	/* transition: height 0.2s ease-in-out; */
}

#chatContainer.full {
	height: calc(100vh - 52px);
	height: calc(100dvh - 52px);
}

#chatContainer.background {
	background: fixed url("/tarot/img/chatBackground2.png") center / cover;
}

#chatContainer #timer {
	position: absolute;
	top: 10px;
	left: 12px;
	width: calc(100% - 24px);
	height: 50px;
	display: none;
	align-items: center;
	justify-content: space-between;
	box-shadow: 2px 2px 4px 0px #55555540;
	background: #fff;
	padding: 0px 18px;
	border-radius: 8px;
}

#chatContainer #timer.show {
	display: flex;
}

#chatContainer #timer .timeBox {
	display: flex;
	align-items: center;
}

#chatContainer #timer .timeText {
	color: #000;
	font-weight: 500;
	font-size: 14px;
}

#chatContainer #timer .timeText #time {
	font-weight: 700;
	color: var(--main);
}

#chatContainer #timer .timeText #time.red {
	color: #fb4242;
}

#chatContainer #timer .timeBox .clock {
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-right: 8px;
}

#chatContainer #timer .timeBox .type {
	display: none;
	padding: 4px 8px;
	font-size: 12px;
	color: #fff;
	font-weight: 600;
	background: #68cafe;
	border-radius: 12px;
	margin-left: 9px;
}

#chatContainer #timer .timeBox .type.show {
	display: block;
}

#chatContainer #timer .add {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

#chatArea {
	width: 100%;
	height: 100%;
	padding: 8px 14px 20px 16px;
	overflow-y: scroll;
}

#chatInput {
	position: relative;
	background: #fff;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* height: 54px; */
	padding: 7px 5px 11px 16px;
}

#chatInput input {
	outline: none;
	border: 1px solid #efefef;
	background: #f9f9f9;
	border-radius: 4px;
	width: calc(100% - 39px);
	height: 38px;
	padding: 6px 8px;
	z-index: 5;
	font-size: 15px;
}

#chatInput textarea {
	outline: none;
	border: 1px solid #efefef;
	background: #f9f9f9;
	border-radius: 4px;
	width: calc(100% - 39px);
	height: 38px;
	padding: 6px 8px;
	z-index: 5;
	font-size: 15px;
	resize: none;
}

#chatInput .send {
	padding: 10px 5px 1px 10px;
	z-index: 5;
}

#chatInput .send img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

#chatInput #cardOpen {
	position: absolute;
	display: flex;
	background-color: var(--main);
	width: calc(100% - 12px);
	padding: 0 16px;
	align-items: center;
	justify-content: space-between;
	left: 6px;
	height: 56px;
	border-radius: 10px;
	bottom: 0px;
	cursor: pointer;
}

#chatInput #cardOpen.two {
	top: -60px;
}

#chatInput #cardOpen .star {
	display: flex;
	align-items: center;
	justify-content: center;
}

#chatInput #cardOpen .star img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 6px;
}

#chatInput #cardOpen p {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

#chatArea .chat {
	display: flex;
	margin-top: 8px;
}

#chatArea .chat:nth-child(1) {
	margin-top: 0;
}

#chatArea .chat.ai {
	padding-right: 20px;
}

#chatArea .chat.user {
	justify-content: flex-end;
	padding-left: 24px;
}
/* 
#chatArea .chat.user .selection.click {
	position: relative;
}

#chatArea .chat.user .selection.click::after {
	content: "CLICK!";
	font-family: var(--font);
	font-size: 12px;
	color: var(--main);
	position: absolute;
	top: -12px;
	left: -20px;
	transform: rotate(-20deg);
} */

#chatArea .chat.user.option .detail {
	display: flex;
	/* flex-wrap: wrap; */
	flex-direction: column;
	justify-content: flex-end;
}

#chatArea .chat.user.option .selection {
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 182px;
	height: 42px;
	padding: 6px 8px;
	position: relative;
}

/* #chatArea .chat.user.option .selection::after {
	content: "CLICK";
	font-size: 11px;
	color: #d61515;
	position: absolute;
	transform: translate(-50%, -50%) rotate(-45deg);
	top: 0;
	left: 0;
	animation: floating 1s alternate infinite;
} */

#chatArea .chat.user .detail {
	display: flex;
	flex-direction: column;
	align-items: end;
}

@keyframes floating {
	0% {
		top: 0;
	}
	100% {
		top: -10px;
	}
}

#chatArea .chat.user.option .selection.short {
	width: 120px;
}

#chatArea .chat.user.option .selection.min {
	width: auto;
	padding: 6px 16px;
}

#chatArea .chat.user.option .selection .text {
	font-size: 14px;
	font-weight: 500;
}

#chatArea .chat.user.option .selection .icon {
	font-size: 16px;
}

#chatArea .chat.user.option .selection .star {
	display: flex;
	align-items: center;
}

#chatArea .chat.user.option .selection .star p {
	font-weight: 700;
	font-size: 14px;
	color: #6136bb;
	margin-left: 5px;
}

#chatArea .chat.user.option .selection .star img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

#chatArea .chat.user.option .selection.border {
	border: 1px solid var(--main);
}

#chatArea .chat .mate {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-right: 10px;
	border-radius: 40%;
}

#chatArea .chat .sender {
	font-size: 12px;
	font-weight: 500;
	color: var(--black);
	margin-bottom: 4px;
}

#chatContainer.background #chatArea .chat .sender {
	color: #eee;
}

#chatArea .chat .content {
	padding: 10px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 5px;
	min-height: 40px;
}

#chatArea .chat.ai .content {
	color: #fff;
	background-color: var(--main);
	border-radius: 0 10px 10px 10px;
	width: fit-content;
}

#chatArea .chat.user .content {
	color: #4d4d4d;
	background-color: #fff;
	border-radius: 10px 0 10px 10px;
	width: fit-content;
}

#chatArea .chat .content img {
	width: 150px;
}

#chatArea .chat.ai .content img.result {
	width: 100%;
	margin-bottom: 12px;
}

#chatArea .chat.ai .content .resultShort {
	margin-bottom: 16px;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: keep-all;
}

#chatArea .chat .content img.studyImg {
	width: 200px;
}

#chatArea .chat .content .manse {
	width: 236px;
}

#chatArea .chat .content .manse .manseTitle {
	width: 100%;
	height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("/tarot/img/manseTitle.png") no-repeat bottom / 100% 100%;
}

#chatArea .chat .content .manse .manseTitle > p {
	font-size: 17px;
	font-family: var(--font);
}

#chatArea .chat .content .manse .manseTable {
	width: 100%;
	border-bottom: 1px solid #fdfdfd;
}

#chatArea .chat .content .manse .manseTable .row {
	display: flex;
	width: 100%;
}

#chatArea .chat .content .manse .manseTable .row {
	border-bottom: 1px solid #ffffff25;
}

#chatArea .chat .content .manse .manseTable .row:last-child {
	border-bottom: none;
}

#chatArea .chat .content .manse .manseTable .row.t1 {
	height: 40px;
}

#chatArea .chat .content .manse .manseTable .row.t2 {
	height: 60px;
}

#chatArea .chat .content .manse .manseTable .row.t3 {
	height: 44px;
}

#chatArea .chat .content .manse .manseTable .row.t4 {
	height: 30px;
}

#chatArea .chat .content .manse .manseTable .row .manseBox {
	width: calc(100% / 5);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#chatArea .chat .content .manse .manseTable .row .manseBox .heading {
	font-size: 12px;
	font-weight: 700;
	color: #efefef;
	line-height: 100%;
}

#chatArea .chat .content .manse .manseTable .row .manseBox .normal {
	font-size: 12px;
	color: #efefef;
	margin-bottom: 4px;
	line-height: 100%;
	text-align: center;
}

#chatArea .chat .content .manse .manseTable .row .manseBox .normal:last-child {
	margin-bottom: 0;
}

#chatArea .chat .content .manse .manseTable .row .manseBox img {
	width: 50%;
	aspect-ratio: 1/1;
	border-right: 1px solid #383838;
	border-bottom: 1px solid #383838;
	margin-bottom: 4px;
}

#chatArea .chat .content .manse .manseTable .row .manseBox img:last-child {
	margin-bottom: 0;
}

#chatArea .chat .content .manse .elements {
	display: flex;
	justify-content: space-between;
	height: 24px;
	width: 100%;
	margin-top: 10px;
}

#chatArea .chat .content .manse .elements .eBox {
	height: 24px;
	width: calc((100% - 20px) / 5);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff16;
	padding-bottom: 2px;
}

#chatArea .chat .content .manse .elements .eBox p {
	font-size: 12px;
	color: #efefef;
}

#chatArea .chat .content .manse .elements .eBox p span {
	font-size: 12px;
	color: #efefef;
	font-weight: 700;
}

#chatArea .chat .content .manse .manseTitle2 {
	width: 100%;
	padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}

#chatArea .chat .content .manse .manseTitle2:nth-child(1) {
	margin-top: 0;
}

#chatArea .chat .content .manse .manseTitle2 > p:nth-child(1) {
	font-size: 17px;
	font-family: var(--font);
	color: #efefef;
}

#chatArea .chat .content .manse .manseTitle2 > p:nth-child(2) {
	color: #efefef;
	font-size: 12px;
	font-weight: 500;
}

#chatArea .chat .content .manse .luckTable {
	min-width: 100%;
	display: flex;
	overflow-x: scroll;
	border-top: 1px solid #fdfdfd;
	border-bottom: 1px solid #ffffff25;
	flex-direction: row-reverse;
}

#chatArea .chat .content .manse .luckTable .lBox {
	width: 36px;
	height: 124px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#chatArea .chat .content .manse .luckTable .lBox:nth-child(odd) {
}

#chatArea .chat .content .manse .luckTable .lBox:nth-child(even) {
	background: #ffffff25;
}

#chatArea .chat .content .manse .luckTable .lBox p {
	font-size: 12px;
	color: #efefef;
	margin-bottom: 4px;
	font-weight: 400;
}

#chatArea .chat .content .manse .luckTable .lBox p:last-child {
	margin-bottom: 0;
}

#chatArea .chat .content .manse .luckTable .lBox img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-right: 1px solid #383838;
	border-bottom: 1px solid #383838;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 4px;
}

#chatArea .chat .content .manse .luckBottom {
	width: 100%;
	height: 32px;
	background: url("/tarot/img/manseBottom.png") no-repeat center / 100% 100%;
}

#chatArea .chat .content .start {
	width: 100%;
	height: 40px;
	margin-top: 20px;
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fdfdfd;
	margin-bottom: 5px;
}

#chatArea .chat .content .start:last-child {
	margin-top: 5px;
}

#chatArea .chat .content .start p {
	color: var(--black);
	font-weight: 600;
	font-size: 14px;
}

#chatArea .chat .content .edit {
	text-align: center;
	text-decoration: underline;
	line-height: 18px;
	font-size: 12px;
	color: #f9f9f9;
	margin-top: 12px;
	margin-bottom: 5px;
}

#chatArea .chat .time {
	font-size: 10px;
	color: #a5a5a5;
}

#chatArea .chat.user .time {
	text-align: right;
}

#chatArea .chat.user .selection {
	padding: 15px 10px;
	border: 2px solid var(--main);
	box-shadow: 1px 1px 5px #6136bb60;
	color: #4d4d4d;
	border-radius: 10px;
	background-color: #fdfdfd;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 5px;
	position: relative;
}

#chatArea .chat.user .selection .next {
	width: 18px;
	height: 18px;
	object-fit: contain;
	margin-bottom: -4px;
	margin-left: 5px;
}

.pastlife #chatArea .chat.user .selection {
	border: 3px solid var(--main);
	box-shadow: 1px 2px 4px #fff;
}

/* #chatArea .chat.user .selection::after {
	content: "CLICK";
	font-size: 11px;
	font-weight: 500;
	color: #d61515;
	position: absolute;
	transform: translate(-50%, -50%) rotate(-45deg);
	top: 2px;
	left: -2px;
	animation: floating 1s alternate infinite;
} */

#chatArea .chat.ai .options {
}

#chatArea .chat.ai .options .selection {
	margin-bottom: 10px;
	border-radius: 10px;
	min-height: 64px;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4px 34px 4px 14px;
	min-width: 206px;
	cursor: pointer;
}

#chatArea .chat.ai .options .selection.add {
	padding: 4px 14px 4px 62px;
}

#chatArea .chat.ai .options .selection.border {
	border: 1px solid var(--main);
}

#chatArea .chat.ai .options .selection .starBox {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	left: 14px;
}

#chatArea .chat.ai .options .selection .starBox > img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}
#chatArea .chat.ai .options .selection .starBox > p {
	margin-top: 1px;
}

#chatArea .chat.ai .options .selection:last-child {
	margin-bottom: 0px;
}

#chatArea .chat.ai .options .selection p {
	color: var(--black);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

#chatArea .chat.ai .options .selection p.small {
	font-size: 12px;
	color: #696969;
}

#chatArea .chat.ai .options .selection > img {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

#chatArea .chat.ai .options .selection p > img {
	width: 17px;
	top: 2px;
	position: relative;
}

#chatArea .chat.ai .options .selection.flex {
	width: 206px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	padding-right: 14px;
}

#chatArea .chat.ai .options .selection .flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#chatArea .chat.ai .options .selection .flex p {
	color: #383838;
	font-size: 14px;
	font-weight: 700;
}

#chatArea .chat.ai .options .selection .flex img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}

#chatArea .chat.ai .options .selection.page {
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	padding: 10px;
	cursor: unset;
}

#chatArea .chat.ai .options .selection.page > img {
	position: relative;
	top: unset;
	right: unset;
	transform: unset;
}

#chatArea .chat.ai .options .selection-group {
	display: none;
}

#chatArea .chat.ai .options .selection-group.show {
	display: block;
}

#chatArea .chat.ai.option {
	padding-left: 50px;
}

#chatArea .chat.ai.option .detail {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

#chatArea .chat.ai.option .detail .selection {
	background: #fdfdfd;
	height: 40px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 0 10px;
	margin: 0 10px 10px 0;
	width: fit-content;
	cursor: pointer;
}

#chatArea .chat.ai.option .detail .selection .text {
	font-size: 14px;
	font-weight: 500;
	color: #4d4d4d;
}

#chatArea .chat.ai.option .detail .selection .star {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

#chatArea .chat.ai.option .detail .selection .star img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

#chatArea .chat.ai.option .selection .star p {
	font-weight: 700;
	font-size: 14px;
	color: #6136bb;
	margin-left: 5px;
}

#chatArea .chat .info {
	color: #fff;
	font-size: 13px;
	padding: 5px 8px;
	background: linear-gradient(180deg, #491f1f 0%, #71006f 100%);
	border-radius: 8px;
	font-weight: 500;
}

.bot #chatArea {
	border-radius: 25px 25px 0 0;
	background: #f6f6f6;
	border: 1px solid #a5a5a5;
}

.bot #chatArea .chat .mate {
	display: none;
}

.bot #chatArea .chat .sender {
	display: none;
}

.bot #chatArea .chat.ai .content {
	background: #c8cee3;
	color: #383838;
}

.bot #chatArea .chat.ai .content.bot {
	background: #075687;
}

.bot #chatArea .chat.ai .content .term {
	max-height: 120px;
	overflow-y: scroll;
	font-size: 11px;
}

.bot #chatArea .chat .content .manse .manseTitle > p {
	color: #fdfdfd;
}

.bot .subHeader {
	justify-content: flex-start;
	padding-left: 16px;
	background: #b9c9ff;
	border-radius: 22px 22px 0 0;
	position: relative;
	height: 58px;
	box-shadow: none;
	border: 1px solid #6284f6;
	cursor: grab;
	user-select: none;
}

.bot .subHeader::after {
	position: absolute;
	width: 100%;
	height: 25px;
	content: "";
	bottom: -25px;
	background-color: #b9c9ff;
	left: -1px;
	border-left: 1px solid #6284f6;
	border-right: 1px solid #6284f6;
}

.bot .subHeader .teller {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin: 0 12px 0 15px;
	border-radius: 40%;
}

.bot .subHeader .bar {
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
	background: #fdfdfd;
	width: 48px;
	height: 6px;
}

#chat.bot .subHeader p {
	position: relative;
	top: unset;
	left: unset;
	transform: unset;
}

#chat.bot {
	height: calc(100dvh - 250px);
	border-radius: 25px 25px 0 0;
	border: 4px solid #6284f6;
	border-bottom: 0;
}

.infoBox {
	height: calc(100% - (100dvh - 275px));
	/* min-height: 20px; */
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--maxWidth);
	margin: 0 auto -25px;
}

#chat.bot.full {
	height: 100dvh;
}

.infoBox.full {
	height: 0;
	margin-bottom: 0;
}

.infoBox .textBox,
.infoBox .footer {
	border-radius: 20px 0 0 20px;
	padding: 10px 40px 10px 20px;
	position: relative;
	left: calc(100% - 20px);
	transition: left 0.4s ease-in-out;
}

.infoBox .textBox.show,
.infoBox .footer.show {
	left: calc(20px);
}

.infoBox .footer {
	background: #8a95ff;
}

.infoBox .textBox {
	background: #79e6cd;
}

.infoBox .textBox p,
.infoBox .footer p {
	color: #000;
	font-weight: 500;
	font-size: 12px;
}

.infoBox .content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 45px 18px 20px;
}

.infoBox .content .text1 {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	margin-bottom: 4px;
}

.infoBox .content .text2 {
	font-size: 14px;
	font-weight: 600;
	color: #000;
}

.infoBox .content img {
	position: absolute;
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
	object-fit: fill;
	object-position: center;
	top: 0;
	left: 0;
	z-index: -1;
}

#chat.bot #chatContainer {
	height: calc(100% - 114px);
}
#chat.bot #chatContainer.full {
	height: calc(100% - 58px);
}

.termModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #00000080;
	z-index: -20;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	max-height: 100dvh;
}

.termModal.show {
	z-index: 20;
	opacity: 1;
}

.termModal .container {
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	max-width: 350px;
}

.termModal .container .title {
	font-size: 18px;
	font-weight: 500;
	color: #111;
	margin-bottom: 6px;
}

.termModal .container .info {
	font-size: 14px;
	color: #333;
	margin-bottom: 16px;
}

.termModal .container .content {
	padding: 10px;
	border-radius: 10px;
	background: #f7f8fb;
}

.termModal .container .key {
	font-size: 15px;
	color: #111;
}

.termModal .container .value {
	font-size: 14px;
	color: #333;
	padding-left: 18px;
	position: relative;
	margin-bottom: 8px;
}

.termModal .container .value:before {
	content: "└";
	position: absolute;
	top: 0px;
	left: 2px;
	font-size: 12px;
}

.termModal .container .value:last-child {
	margin-bottom: 0;
}

.termModal .container .buttonPos {
	margin-top: 10px;
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
}

.termModal .container .buttonPos .subButton {
	width: calc(50% - 3px);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ddd;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.termModal .container .buttonPos .subButton .close {
	font-size: 16px;
	font-weight: 600;
	color: #00000080;
}

.termModal .container .buttonPos .subButton .agree {
	font-size: 16px;
	font-weight: 600;
}

.termModal .container .inputBox {
	display: flex;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}

.termModal .container .inputBox.date {
	justify-content: space-between;
}

.termModal .container .inputBox input[type="text"],
.termModal .container .inputBox input[type="number"] {
	outline: none;
	border: none;
	background: none;
	border-bottom: 1px solid #222;
	padding: 0 0 0 8px;
}

.termModal .container .inputBox input[type="number"] {
	padding: 0;
	text-align: center;
	width: calc(33% - 3px);
}

.termModal .container .inputBox input[type="radio"] {
	margin-right: 5px;
}

.termModal .container .inputBox label {
	display: flex;
	align-items: center;
	margin-right: 20px;
	margin-left: 10px;
}

.termModal .container .inputBox label p {
	font-size: 13px;
}

.termModal .container .key label {
	font-size: 13px;
}

.fortuneMain {
	position: fixed;
	top: 0;
	height: 100dvh;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	max-width: 480px;
	background-color: #fff;
	background-image: url(/tarot/img/fortunecareBg.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: scroll;
}

.fortuneMain.hide {
	display: none;
}

.fortuneMain .titleArea {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	margin-bottom: 28px;
	flex-direction: column;
}

.fortuneMain .titleArea .logo {
	width: 128px;
	height: 50px;
	object-fit: contain;
	margin-bottom: 24px;
	margin-top: 18px;
}

.fortuneMain .titleArea .text1 {
	font-size: 24px;
	font-weight: 700;
	text-shadow: 0px 1px 5px 0px #00000026;
	color: #353e8a;
	z-index: 2;
	line-height: 35px;
	margin-bottom: 4px;
}

.fortuneMain .titleArea .text2 {
	font-size: 15px;
	font-weight: 600;
	color: #7486ff;
	text-shadow: 2px 2px 10px 0px #f6f4f8;
	z-index: 2;
	line-height: 22px;
	margin-bottom: 13px;
}

.fortuneMain .titleArea .text3 {
	color: #222f9e;
	font-size: 12px;
	line-height: 17px;
	z-index: 2;
	text-align: center;
}

.fortuneMain .titleArea .wingL {
	position: absolute;
	width: 94px;
	height: 97px;
	object-fit: contain;
	top: 60px;
	left: 10px;
	z-index: 1;
}

.fortuneMain .titleArea .wingR {
	position: absolute;
	width: 94px;
	height: 97px;
	object-fit: contain;
	top: 60px;
	right: 10px;
	z-index: 1;
}

.fortuneMain .sajuArea {
	box-shadow: 0px 4px 10px 0px #82818140;
	padding: 36px 15px 30px 18px;
	width: 100%;
	background-color: #fff;
}

.fortuneMain .sajuArea .text1 {
	font-size: 15px;
	font-weight: 500;
	color: #000000;
	margin-bottom: 28px;
}

.fortuneMain .sajuArea .inputBox {
	display: flex;
	margin-bottom: 13px;
	width: 100%;
	height: 36px;
}

.fortuneMain .sajuArea .inputBox .key {
	font-size: 12px;
	font-weight: 500;
	color: #000000;
	line-height: 36px;
	width: 73px;
}

.fortuneMain .sajuArea .inputBox .value {
	width: calc(100% - 73px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fortuneMain .sajuArea .inputBox .value input {
	width: 100%;
	height: 100%;
	border: 1px solid #efefef;
	border-radius: 4px;
	padding: 0 12px;
}

.fortuneMain .sajuArea .inputBox .value input[type="radio"] {
	width: calc(50% - 4px);
}

.fortuneMain .sajuArea .inputBox .gender-label {
	font-size: 14px;
	color: #333;
	margin-right: 15px;
}

.fortuneMain .sajuArea .inputBox .radio-group {
	display: flex;
	gap: 10px;
}

.fortuneMain .sajuArea .inputBox .radio-container {
	position: relative;
	display: flex;
	width: calc(50% - 4px);
	justify-content: space-between;
}

.fortuneMain .sajuArea .inputBox .radio-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.fortuneMain .sajuArea .inputBox .radio-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	border: 1px solid #efefef;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	font-size: 14px;
	color: #666;
	transition: all 0.2s ease;
}

.fortuneMain .sajuArea .inputBox .radio-input:checked + .radio-button {
	background-color: #333;
	color: #fff;
	border-color: #333;
}

.fortuneMain .sajuArea .inputBox .radio-button:hover {
	border-color: #999;
}

.fortuneMain .sajuArea .inputBox .selectBox {
	position: relative;
	height: 36px;
	width: 100px;
}

.fortuneMain .sajuArea .inputBox .selectBox.full {
	width: 100%;
}

.fortuneMain .sajuArea .inputBox .selectBox select {
	padding: 0 12px 0 25px; /* Increased left padding to accommodate chevron */
	appearance: none; /* Removes default select arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	height: 36px;
	border: 1px solid #efefef;
	border-radius: 4px;
	padding: 0 12px;
	margin-right: 10px;
}

.fortuneMain .sajuArea .inputBox .selectBox::before {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

.fortuneMain .sajuArea .border {
	width: 100%;
	height: 1px;
	background-color: #efefef;
	margin: 13px 0;
}

.fortuneMain .sajuArea .agree {
	display: flex;
	align-items: center;
	width: 100%;
	height: 21px;
	position: relative;
	justify-content: space-between;
}

.fortuneMain .sajuArea .agree input[type="checkbox"] {
	display: none;
	appearance: none;
}

.fortuneMain .sajuArea .agree label {
	font-size: 12px;
	display: flex;
}

.fortuneMain .sajuArea .agree .check {
	border: 1px solid #a5a5a5;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	margin-right: 12px;
	display: inline-block;
}

.fortuneMain .sajuArea .agree #argee {
	display: none;
}

.fortuneMain .sajuArea .agree input:checked + .check {
	border: none;
	background-color: #000;
	background-image: url(/tarot/img/fortuneCheck.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px 8px;
}

.fortuneMain .sajuArea .agree .openTerm {
	width: 10px;
	height: 10px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: translateY(-25%) rotate(315deg);
	margin-right: 10px;
}

.fortuneMain .sajuArea .infoBox {
	padding: 16px;
	border: 1px solid #e0e9ef;
	background: #f9f9f9;
	border-radius: 5px;
	margin-bottom: 24px;
	height: auto;
}

.fortuneMain .sajuArea .infoBox p:nth-child(1) {
	font-size: 13px;
	font-weight: 700;
	color: #4d4d4d;
	line-height: 18px;
}

.fortuneMain .sajuArea .infoBox p:nth-child(2) {
	color: #4d4d4d;
	font-size: 12px;
	line-height: 18px;
	word-break: keep-all;
}

.fortuneMain .sajuArea .startBtn {
	width: 100%;
	border-radius: 5px;
	height: 52px;
	background: #353e8a;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 24px;
}

.fortuneMain footer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fortuneMain footer p {
	font-size: 10px;
	font-weight: 300;
	color: #000;
	line-height: 14px;
	text-align: center;
}

.fortuneMain .sajuArea .startBtn:disabled {
	background: #a5a5a5;
}

#toastModal {
	width: 100%;
	height: 100%;
	background: #00000080;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: none;
	transition: display 0.3s ease-in-out;
}

#toastModal.open {
	display: block;
}

#toastModal .closeArea {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#toastModal .closeArea .padding {
	padding: 5px;
}

#toastModal .closeArea .padding .line {
	width: 36px;
	height: 2px;
	background: #d3d4d4;
	border-radius: 1px;
}

#toastModal .closeArea .padding::hover .line {
	background: #ffd400;
}

#toastModal #toastTitle {
	margin: 20px 0 23px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

#toastModal .container {
	width: 100%;
	max-width: var(--maxWidth);
	max-height: 90%;
	border-radius: 16px 16px 0 0;
	padding: 8px 24px 0px;
	overflow-y: hidden;
	position: absolute;
	bottom: 0;
	background: #303030;
	transition: transform 0.3s ease-in-out;
	transform: translateY(100%) translateX(-50%);
	left: 50%;
}

/* #toastModal.open .container {
	transform: translateY(0%) translateX(-50%);
} */

#toastModal.open .container.show {
	transform: translateY(0%) translateX(-50%);
}

#toastModal #itemList {
	width: 100%;
	max-height: 290px;
	overflow-y: scroll;
	padding-bottom: 28px;
}

#toastModal #itemList .option {
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	border: 1px solid #efefef;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 10px;
	padding: 0 18px;
}

#toastModal #itemList .option:hover {
	border: 1px solid #ffd400;
}

#toastModal #itemList .option:last-child {
	margin-bottom: 0;
}

#toastModal #itemList .option .name {
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 3px;
}

#toastModal #itemList .option .detail {
	font-size: 15px;
	font-weight: 500;
	color: #c2c2c2;
}

@keyframes floating {
	0% {
		top: 2px;
	}
	100% {
		top: -2px;
	}
}

#chatArea .chat.user .refresh {
	display: flex;
	align-items: center;
	justify-content: end;
}

#chatArea .chat.user .refresh p {
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	padding: 4px;
	color: var(--main);
	cursor: pointer;
}

#chatArea .chat.user .refresh p img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}

#chatArea .chat .content span.jump {
	display: inline-flex;
	position: relative;
	height: 14px;
	width: 6px;
	margin-right: 4px;
	align-items: end;
}

#chatArea .chat .content span.jump::after {
	content: "";
	border-radius: 50%;
	width: 6px;
	height: 6px;
	position: absolute;
	background: var(--green);
}

#chatArea .chat .content span.jump.one::after {
	animation: chatWait 0.6s alternate infinite ease-in-out;
}

#chatArea .chat .content span.jump.two::after {
	animation: chatWait 0.6s 0.2s alternate infinite ease-in-out;
}

#chatArea .chat .content span.jump.three::after {
	animation: chatWait 0.6s 0.4s alternate infinite ease-in-out;
}

@keyframes chatWait {
	0% {
		bottom: 0px;
	}
	100% {
		bottom: 8px;
	}
}

#mainCardSelect,
#addCardSelect {
	z-index: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: linear-gradient(
		180deg,
		rgba(95, 0, 163, 1) 0%,
		rgba(68, 1, 118, 1) 35%,
		rgba(58, 1, 100, 1) 70%,
		rgba(95, 0, 163, 1) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#mainCardSelect #cardSelect,
#addCardSelect #addSelect {
	width: 100%;
	height: 150px;
	position: relative;
}

#mainCardSelect #cardSelect .swipeText,
#addCardSelect #addSelect .swipeText {
	margin-bottom: 20px;
	text-align: center;
	font-weight: 700;
	color: #fff;
}

#cardSelect .tarotLeft,
#cardSelect .tarotRight,
#addSelect .tarotLeft,
#addSelect .tarotRight {
	width: 71px;
	height: 11px;
	object-fit: contain;
	position: absolute;
	top: -23px;
}

#cardSelect .tarotLeft,
#addSelect .tarotLeft {
	left: 16px;
}

#cardSelect .tarotRight,
#addSelect .tarotRight {
	right: 16px;
}

#mainCardSelect #cardSelect .tarotCard,
#addCardSelect #addSelect .tarotCard {
	object-fit: contain;
	width: 80px;
}

@media (min-width: 600px) {
	#mainCardSelect #cardSelect .tarotCard,
	#addCardSelect #addSelect .tarotCard {
		width: 90px;
	}
}

@media (min-width: 700px) {
	#mainCardSelect #cardSelect .tarotCard,
	#addCardSelect #addSelect .tarotCard {
		width: 100px;
	}
}

@media (min-width: 1000px) {
	#mainCardSelect #cardSelect .tarotCard,
	#addCardSelect #addSelect .tarotCard {
		width: 120px;
	}
}

@media (min-width: 1200px) {
	#mainCardSelect #cardSelect .tarotCard,
	#addCardSelect #addSelect .tarotCard {
		width: 140px;
	}
}

@media (min-width: 1400px) {
	#mainCardSelect #cardSelect .tarotCard,
	#addCardSelect #addSelect .tarotCard {
		width: 160px;
	}
}

#mainCardSelect #cardSelect .tarotCard img,
#addCardSelect #addSelect .tarotCard img {
	width: 100%;
	cursor: pointer;
	object-fit: cover;
	backface-visibility: hidden;
}

#mainCardSelect p.title,
#addCardSelect p.title {
	font-family: GmarketSans;
	font-weight: 500;
	font-size: 22px;
	color: #fdfdfd;
	text-align: center;
	margin-bottom: 10px;
}

#mainCardSelect #cardPlace,
#addCardSelect #cardPlace2 {
	width: 100%;
	max-width: 500px;
	padding: 16px 0 36px;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
	position: relative;
}

#mainCardSelect #cardPlace.celtic {
	aspect-ratio: 1/1;
}

#mainCardSelect #cardPlace.magic {
	aspect-ratio: 1/1;
}

#mainCardSelect #cardPlace .cards,
#addCardSelect #cardPlace2 .cards {
	width: calc(33.33% - 20px);
	position: relative;
}

#mainCardSelect #cardPlace .cards .selectedCard,
#addCardSelect #cardPlace2 .cards .selectedCard {
	width: 100%;
	background: #6a4387;
	aspect-ratio: 10/17;
	margin-bottom: 24px;
}

#mainCardSelect #cardPlace .cards > p,
#addCardSelect #cardPlace2 .cards > p {
	color: #3a0064;
	background: #6a4387;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
}

#mainCardSelect #cardPlace.celtic .cards .selectedCard {
	margin-bottom: 0;
}
#mainCardSelect #cardPlace.celtic .cards,
#mainCardSelect #cardPlace.magic .cards {
	position: absolute;
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
}

#mainCardSelect #cardPlace .cards.selected {
	z-index: 3 !important;
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(1) {
	top: 50%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(2) {
	top: 50%;
	left: calc(37%);
	/* transform: translate(-50%, -50%) rotate(90deg); */
	transform: translate(-60%, -60%);
	transition: transform 0.3s 5s ease-in-out;
}

#mainCardSelect #cardPlace.celtic .cards.selected:nth-child(2) {
	transform: translate(-50%, -50%) rotate(90deg);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(3) {
	top: 80%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(4) {
	top: 50%;
	left: calc(12%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(5) {
	top: 20%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(6) {
	top: 50%;
	left: calc(62%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(7) {
	top: 80%;
	left: calc(70%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(8) {
	top: 80%;
	left: calc(88%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(9) {
	top: 50%;
	left: calc(88%);
}

#mainCardSelect #cardPlace.celtic .cards:nth-child(10) {
	top: 20%;
	left: calc(88%);
}

#mainCardSelect #cardPlace.celtic .cards .selectedCard,
#mainCardSelect #cardPlace.magic .cards .selectedCard {
	margin-bottom: 0;
}
#mainCardSelect #cardPlace.celtic .cards {
	position: absolute;
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
}

#mainCardSelect #cardPlace.heart {
	aspect-ratio: 1/1;
}

#mainCardSelect #cardPlace.heart .cards {
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
	position: absolute;
}
#mainCardSelect #cardPlace.heart .cards.selected {
	z-index: 3;
}

#mainCardSelect #cardPlace.heart .cards:nth-child(1) {
	top: 50%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(2) {
	top: 50%;
	left: calc(37%);
	/* transform: translate(-50%, -50%) rotate(90deg); */
	transform: translate(-60%, -60%);
	transition: transform 0.3s 5s ease-in-out;
}

#mainCardSelect #cardPlace.heart .cards.selected:nth-child(2) {
	transform: translate(-50%, -50%) rotate(90deg);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(3) {
	top: 80%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(4) {
	top: 50%;
	left: calc(12%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(5) {
	top: 20%;
	left: calc(37%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(6) {
	top: 50%;
	left: calc(62%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(7) {
	top: 78%;
	left: calc(70%);
}

#mainCardSelect #cardPlace.heart .cards:nth-child(8) {
	top: 80%;
	left: calc(88%);
}

#mainCardSelect #cardPlace.action {
	aspect-ratio: 1.5/1;
}

#mainCardSelect #cardPlace.action .cards {
	width: calc(20% - 14px);
	transform: translate(-50%, -50%);
	z-index: 2;
	position: absolute;
}
#mainCardSelect #cardPlace.action .cards.selected {
	z-index: 3;
}

#mainCardSelect #cardPlace.action .cards:nth-child(1) {
	top: 30%;
	left: calc(10%);
}

#mainCardSelect #cardPlace.action .cards:nth-child(2) {
	top: 50%;
	left: calc(30%);
}

#mainCardSelect #cardPlace.action .cards:nth-child(3) {
	top: 70%;
	left: calc(50%);
}

#mainCardSelect #cardPlace.action .cards:nth-child(4) {
	top: 50%;
	left: calc(70%);
}

#mainCardSelect #cardPlace.action .cards:nth-child(5) {
	top: 30%;
	left: calc(90%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(1) {
	top: 20%;
	left: calc(50%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(2) {
	top: 70%;
	left: calc(80%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(3) {
	top: 70%;
	left: calc(20%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(4) {
	top: 80%;
	left: calc(50%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(5) {
	top: 30%;
	left: calc(20%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(6) {
	top: 30%;
	left: calc(80%);
}

#mainCardSelect #cardPlace.magic .cards:nth-child(7) {
	top: 50%;
	left: calc(50%);
}

#mainCardSelect #cardPlace .cards.selected .selectedCard,
#addCardSelect #cardPlace2 .cards.selected .selectedCard {
	border: 2px solid #d0a6ef;
	background: #a47bc2;
}

#mainCardSelect #cardPlace .cards.selected .selectedCard.filled,
#addCardSelect #cardPlace2 .cards.selected .selectedCard.filled {
	border: none;
	background: transparent;
}

#mainCardSelect #cardPlace .cards.selected > p,
#addCardSelect #cardPlace2 .cards.selected > p {
	background: #fff;
	color: #3a0064;
}

#mainCardSelect #cardPlace .cards .tarotCard,
#addCardSelect #cardPlace2 .cards .tarotCard {
	animation: 1s cardMove2 forwards ease-in-out;
	position: absolute;
	z-index: 100;
	transition: transform 1.4s ease-in-out;
	transform-style: preserve-3d;
	width: 100%;
	aspect-ratio: 10 / 17;
}

#mainCardSelect #cardPlace .cards .tarotCard img,
#addCardSelect #cardPlace2 .cards .tarotCard img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	backface-visibility: hidden;
}

#mainCardSelect #cardPlace .mainTarot,
#addCardSelect #cardPlace2 .mainTarot {
	transform-origin: center;
	transform: rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 1px 1px 10px #00000046;
	transform-origin: center;
}

.button.white .starp {
	width: 20px;
	height: 20px;
	position: relative;
	top: 2px;
}

#tellerOption {
	display: none;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #00000066;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

#tellerOption.show {
	display: block;
}

#tellerOption .content {
	width: 100%;
	max-width: var(--maxWidth);
	max-height: 400px;
	overflow-y: scroll;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	transition: transform 0.4s ease-in-out;
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 40px 24px 30px;
}

#tellerOption .content.show {
	transform: translate(-50%, 0%);
}

#tellerOption .content .info {
	color: #fb4242;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 18px;
}

#tellerOption .content .option {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	margin-bottom: 6px;
	cursor: pointer;
}

#tellerOption .content .option p img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}

#tellerOption .content .option p:nth-child(1) {
	font-size: 16px;
	font-weight: 500;
	color: #000;
}

#tellerOption .content .option p:nth-child(2) {
	font-size: 14px;
	font-weight: 300;
	color: #f00;
}

#tellerOption .content .close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	background: #efefef;
	border-radius: 10px;
}

#tellerOption .content .close p {
	color: #000;
	font-weight: 500;
	font-size: 16px;
}

/* #tellerOption .content.show {
	transform: translateY(0%);
} */
/* 
#mainCardSelect {
	z-index: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	background: linear-gradient(
		180deg,
		rgba(95, 0, 163, 1) 0%,
		rgba(68, 1, 118, 1) 35%,
		rgba(58, 1, 100, 1) 70%,
		rgba(95, 0, 163, 1) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#mainCardSelect #cardSelect {
	width: 100%;
	height: 150px;
}

#mainCardSelect #cardSelect .tarotCard {
	object-fit: contain;
	width: 80px;
}

#mainCardSelect #cardSelect .tarotCard img {
	width: 100%;
	cursor: pointer;
	object-fit: cover;
	backface-visibility: hidden;
}

#mainCardSelect p.title {
	font-family: var(--font);
	font-size: 32px;
	color: #fdfdfd;
	text-align: center;
	margin-bottom: 10px;
}

#mainCardSelect #cardPlace {
	width: 100%;
	max-width: 500px;
	padding: 16px 0 30px;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
	position: relative;
}

#mainCardSelect #cardPlace.celtic {
	aspect-ratio: 1/1;
}

#mainCardSelect #cardPlace .cards {
	width: calc(33.33% - 20px);
	position: relative;
}

#mainCardSelect #cardPlace .cards .selectedCard {
	width: 100%;
	background: #6a4387;
	aspect-ratio: 10/17;
	margin-bottom: 24px;
}

#mainCardSelect #cardPlace .cards > p {
	color: #3a0064;
	background: #6a4387;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
}

#mainCardSelect #cardPlace .cards.selected .selectedCard {
	border: 2px solid #d0a6ef;
	background: #a47bc2;
}

#mainCardSelect #cardPlace .cards.selected .selectedCard.filled {
	border: none;
	background: transparent;
}

#mainCardSelect #cardPlace .cards.selected > p {
	background: #fff;
	color: #3a0064;
}

#mainCardSelect #cardPlace .cards .tarotCard {
	animation: 1s cardMove2 forwards ease-in-out;
	position: absolute;
	z-index: 100;
	transition: transform 1.4s ease-in-out;
	transform-style: preserve-3d;
	width: 100%;
	aspect-ratio: 10 / 17;
}

#mainCardSelect #cardPlace .cards .tarotCard img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	backface-visibility: hidden;
}

#mainCardSelect #cardPlace .mainTarot {
	transform-origin: center;
	transform: rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 1px 1px 10px #00000046;
	transform-origin: center;
} */

#reviewModal {
	display: none;
	align-items: center;
	justify-content: center;
	background: #00000099;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
}

#reviewModal.show {
	display: flex;
}

#reviewModal .reviewBox {
	width: 320px;
	padding: 24px;
	background: #fff;
	border-radius: 10px;
}

#reviewModal .reviewBox .head {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
}

#reviewModal .reviewBox .head p {
	font-size: 14px;
	font-weight: 500;
	color: #383838;
	text-align: center;
	word-break: keep-all;
}

#reviewModal .reviewBox .head img {
	width: 24px;
	height: 24px;
	position: absolute;
	cursor: pointer;
	object-fit: contain;
	top: -15px;
	right: -15px;
}

#reviewModal .reviewTypes {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 10px 0;
}

#reviewModal .reviewTypes .type {
	border-radius: 4px;
	padding: 4px;
	margin: 0px 5px 5px 0;
	border: 1px solid #383838;
	cursor: pointer;
}

#reviewModal .reviewTypes .type.selected {
	background: #ece3ff;
	border: 1px solid #ece3ff;
}

#reviewModal .reviewTypes .type p {
	font-size: 12px;
	font-weight: 500;
}

#reviewModal .badReason {
	margin-bottom: 10px;
	display: none;
}

#reviewModal .badReason .info {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin-bottom: 4px;
}

#reviewModal .badReason .options {
}

#reviewModal .badReason .options .text {
	font-size: 12px;
	padding: 2px 0px 2px 20px;
	color: #383838;
	position: relative;
	cursor: pointer;
}

#reviewModal .badReason .options .text::after {
	content: "○";
	font-size: 12px;
	color: #383838;
	position: absolute;
	top: 2px;
	left: 4px;
}

#reviewModal .badReason .options .text.selected {
}

#reviewModal .badReason .options .text.selected::after {
	content: "●";
}

#reviewModal .info2 {
	font-size: 12px;
	text-align: center;
	color: #4d4d4d;
	margin-top: 10px;
}

#reviewModal .inputArea {
	width: 100%;
	height: 100px;
	position: relative;
	margin-bottom: 15px;
}

#reviewModal .inputArea textarea {
	width: 100%;
	height: 100%;
	resize: none;
	padding: 10px;
	border-radius: 12px;
	border: none;
	background: #efefef;
	font-size: 12px;
}

#reviewModal .inputArea p {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #878787;
	font-size: 12px;
}

#reviewModal .reviewBox button {
	width: 100%;
	height: 40px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	outline: none;
}

/* 채팅방 테마 */

#chatContainer {
	background: url("/tarot/img/bg_default.png") no-repeat center / cover;
}

.saju #chatContainer {
	background: url("/tarot/img/bg_saju.png") no-repeat center / cover;
}

#chatContainer.lib {
	background: url("/tarot/img/bg_library.png") no-repeat center / cover;
}

#chatContainer #chatArea .chat.ai .content {
	background: linear-gradient(180deg, #45336b 0%, #441143 100%);
	border: 1px solid #6a4387;
	color: #fffbfb;
	font-weight: 600;
	line-height: 1.5;
}

.saju #chatContainer #chatArea .chat.ai .content {
	/* background: linear-gradient(180deg, #171739 0%, #131f73 100%); */
	/* border: 1px solid #221d69; */
	background: var(--main);
	border: none;
}

#chatContainer #chatArea .chat.user .content {
	border: 1px solid #fff3cb;
}

#chatContainer.star {
	background: url("/tarot/img/bg_star.png") no-repeat center / cover;
}

#chatContainer.star #chatArea .chat.ai .content {
	background: linear-gradient(180deg, #1a0743 0%, #6b1c6c 100%);
	border: 1px solid #823089;
	color: #fffbfb;
	font-weight: 600;
	line-height: 1.5;
}

#chatContainer.star #chatArea .chat.user .content {
	border: 1px solid #fff3cb;
	background: #ffe97e;
	font-weight: 700;
	line-height: 1.5;
}

#chatContainer #chatArea .chat .time,
#chatContainer #chatArea .chat .sender,
#chatContainer.star #chatArea .chat .time,
#chatContainer.star #chatArea .chat .sender {
	color: #fdfdfd;
}

#chatInput #cardOpen {
	background: #772c98;
}

.lib #chatInput #cardOpen {
	background: linear-gradient(180deg, #491f1f 0%, #71006f 100%);
}

.lib #chatContainer #chatArea .chat.ai .content {
	background: linear-gradient(180deg, #491f1f 0%, #71006f 100%);
}

#chatArea .chat .info {
	background: linear-gradient(180deg, #45336b 0%, #441143 100%);
}

.saju #chatArea .chat .info {
	background: var(--main);
}

.lib #chatArea .chat .info {
	background: linear-gradient(180deg, #491f1f 0%, #71006f 100%);
}
/* 채팅방 끝 */

/* 마이페이지 */

.titleArea.flex {
	justify-content: space-between;
}

.titleArea.flex img {
	height: 24px;
	width: 24px;
	object-fit: contain;
	cursor: pointer;
}

.mypage .soulCard {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 18px 0;
	position: relative;
}

.mypage .soulCard.two {
	flex-direction: row;
	justify-content: space-between;
}

.mypage .soulCard img {
	width: 135px;
	height: 135px;
	object-fit: contain;
	margin-bottom: 18px;
}

.mypage .soulCard.two img {
	width: 86px;
	height: 86px;
	margin-bottom: 0;
}

.mypage .soulCard.two .detail {
	margin-left: 14px;
	width: calc(100% - 100px);
}

.mypage .soulCard .nickname {
	font-size: 24px;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 15px;
}

.mypage .soulCard.two .detail .nickname {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 3px;
}

.mypage .soulCard.two .detail .small {
	font-size: 13px;
	font-weight: 500;
	color: #878787;
}

.mypage .soulCard.two .arrow {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 8px;
	position: absolute;
	top: 3px;
	right: 0;
	cursor: pointer;
}

.mypage .soulCard .create {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
	color: #fdfdfd;
	height: 40px;
	width: 150px;
	border-radius: 20px;
	background-color: var(--main);
	box-shadow: 1px 1px 5px #00000026;
}

.mypage .buttonSet {
	background-color: #fdfdfd;
	margin-bottom: 16px;
	box-shadow: 1px 1px 5px #00000026;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.mypage .buttonSet .button {
	background-color: #fdfdfd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	padding: 0 8px 0 16px;
	border-bottom: 1px solid #efefef;
	border-radius: 0;
}

.mypage .buttonSet .button p {
	color: var(--black);
	font-size: 14px;
	font-weight: 500;
	display: flex;
	line-height: 24px;
}

.mypage .buttonSet .button p .small {
	font-size: 11px;
	color: #b1b1b1;
}

.mypage .buttonSet .button img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 8px;
}

.mypage .buttonSet .button img:last-child() {
	margin-right: 0;
}

.mypage .buttonSet .button:last-child() {
	border-bottom: none;
}

.mypage .buttonSet:last-child() {
	margin-bottom: 0;
}

.mypage .myStar {
	box-shadow: 1px 1px 5px 0px #00000026;
	border-radius: 10px;
	background: #fff;
	width: 100%;
	height: 88px;
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 15px;
}

.mypage .myStar .star {
	width: calc(100% - 94px);
	height: 100%;
	display: flex;
}

.mypage .myStar .star > div {
	width: 50%;
	height: 100%;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mypage .myStar .star > div p {
	font-size: 16px;
	font-weight: 700;
	color: #383838;
}

.mypage .myStar .star > div img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.mypage .myStar .star .current {
	display: flex;
	align-items: center;
}

.mypage .myStar .star .current p {
	color: #383838;
	font-weight: 700;
	font-size: 16px;
	margin-left: 4px;
	padding-bottom: 2px;
}

.mypage .myStar .recharge {
	width: 94px;
	height: 88px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #dbdbdb;
}

.mypage .myStar .recharge p {
	font-weight: 500;
	font-size: 13px;
	color: #696969;
}

.mypage .subButton {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10px;
}

.mypage .subButton .button2 {
	box-shadow: 1px 1px 5px 0px #00000026;
	border-radius: 10px;
	background: #fff;
	width: calc(50% - 6px);
	height: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	cursor: pointer;
}

.mypage .subButton .button2 img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-bottom: 8px;
}

.mypage .subButton .button2 p {
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	color: #000;
}

.mypage .subButton {
	width: 100%;
}

.mypage .subButton2 .button2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 56px;
	width: 100%;
	padding: 0 10px;
	border-bottom: 1px solid #dbdbdb;
	cursor: pointer;
}

.mypage .subButton2 .button2 > div {
	display: flex;
	align-items: center;
}

.mypage .subButton2 .button2 img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

.mypage .subButton2 .button2 > div img {
	margin-right: 8px;
}

.mypage .subButton2 .button2 > div p {
	font-weight: 500;
	color: #383838;
	font-size: 14px;
}

.mypage .subButton2 .button2:last-child {
	border-bottom: none;
}

.layout2 .mypage .myStar {
	background: #28206e;
}

.layout2 .mypage .subButton .button2 {
	background: #28206e;
}

.layout2 .mypage .myStar .recharge {
	border-left: 1px solid #dbdbd880;
}

.layout2 .mypage .myStar .star > div p {
	font-weight: 600;
	color: #fff;
}

.layout2 .mypage .myStar .recharge p {
	color: #fdfdfd;
}

.layout2 .mypage .subButton .button2 p {
	font-weight: 600;
	color: #fdfdfd;
}

.layout2 .mypage .subButton2 .button2 > div p {
	color: #fdfdfd;
	font-weight: 700;
}

.layout2 .mypage .soulCard.two .detail .nickname {
	color: #fdfdfd;
}

.layout2 .mypage .soulCard.two .detail .small {
	color: #a5a5a5;
}

/* 마이페이지 끝 */

/* 영혼카드 */

.soulText {
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	margin-bottom: 12px;
}

.soulText span {
	font-size: 10px;
	color: #a5a5a5;
}

.soulDate {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.soulDate input {
	width: calc(33.33% - 3px);
	height: 36px;
	color: var(--black);
	outline: none;
	border: none;
	border-bottom: 1px solid #dbdbdb;
	transition: border-bottom 0.5s ease-in-out;
	font-size: 14px;
}

.soulDate input:focus {
	border-bottom: 1px solid var(--main);
}

/* 영혼카드 끝 */

/* 설정 */

.settingSoul {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	width: 100%;
	height: 218px;
	padding-top: 14px;
}

.settingSoul img {
	width: 138px;
	height: 138px;
	object-fit: cover;
	object-position: center;
}

.settingSoul p {
	font-size: 13px;
	color: #696969;
	text-align: center;
	margin-top: 11px;
}

.settingBox {
	background-color: #fff;
	border-bottom: 1px solid #efefef;
}

.settingBox .title {
	height: 50px;
	line-height: 50px;
	padding: 0 16px;
	color: #a5a5a5;
	font-size: 14px;
	text-align: left;
	font-weight: 700;
	font-family: "Noto Sans KR";
}

.settingBox .setting {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	padding: 0 16px;
}

.settingBox .setting .flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.settingBox .setting p {
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
}

.settingBox .setting img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.settingBox .setting .purple {
	color: var(--main);
}

.settingBox .setting .bold {
	font-weight: 700;
}

.settingBox .setting .gray {
	color: #c2c2c2;
}

.settingBox .inputPos {
	padding: 0 20px;
	display: flex;
	align-items: end;
	flex-direction: column;
}

.settingBox .inputPos.new {
	padding: 0;
	position: relative;
}

/* .settingBox .inputPos #name {
	outline: none;
	border: none;
	border-bottom: 1px solid #dbdbdb;
	height: 36px;
	width: 100%;
	font-size: 14px;
	color: var(--black);
} */

.settingBox .inputPos.new input {
	height: 40px;
	outline: none;
	border: none;
	border-bottom: 1px solid #dbdbdb;
	color: #696969;
	padding-left: 20px;
	font-size: 15px;
	font-weight: 500;
	width: 100%;
}

.settingBox .inputPos.new > p {
	position: absolute;
	top: 50%;
	/* transform: translateY(-50%); */
	font-size: 14px;
	font-weight: 500;
	color: #c2c2c2;
	right: 20px;
}

.settingBox .inputPos.new > p.wordCount {
	top: 25px;
}

.settingBox .inputPos.new > p span {
	color: #696969;
}

.settingBox .inputPos #name.verified {
	border-bottom-color: var(--main);
}

.settingBox .inputPos .randomButton {
	padding: 6px;
	margin-top: 6px;
}

.settingBox .reason {
	width: 100%;
	padding-left: 30px;
	padding-right: 10px;
}

.settingBox .reasonRadio {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.settingBox .reasonRadio input {
	margin-right: 10px;
}

.settingBox .reasonRadio p {
	font-size: 15px;
	font-weight: 500;
	color: #383838;
	word-break: keep-all;
}

.randomButton p {
	color: #4d4d4d;
	font-weight: 500;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.settingBox .inputPos .randomButton p {
	font-family: var(--font);
	color: var(--black);
	font-size: 18px;
	cursor: pointer;
}

.settingBox .buttonPos {
	padding: 0 20px;
	margin-top: 20px;
}

.settingProfile {
	width: 100%;
}

.settingProfile .setting {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 0 22px;
	border-bottom: 1px solid #dbdbdb;
	height: 56px;
	cursor: pointer;
}

.settingProfile .setting .key {
	color: #383838;
	font-weight: 600;
	font-size: 16px;
}

.settingProfile .setting .flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.settingProfile .setting .flex img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-left: 2px;
}

.settingProfile .setting .value {
	font-size: 16px;
	font-weight: 500;
	color: #383838;
	padding-right: 6px;
}
.settingProfile .setting .flex .value {
	color: #6136bb;
	font-weight: 600;
	padding-right: 0;
}

/* 설정 끝 */

/* 비밀 이야기 */

.story .imgBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	background-color: var(--main);
	height: 360px;
}

.story .imgBox .card {
	width: 222px;
	height: 220px;
	object-fit: contain;
	margin-bottom: 12px;
}

.story .imgBox .text {
	width: 194px;
	height: 90px;
	object-fit: contain;
}

.story .textBox {
	width: 100%;
	padding: 24px 16px;
}

.story .textBox .title2 {
	color: #000;
	font-size: 24px;
	font-weight: 700;
}

.story .textBox .content {
	white-space: pre-line;
	color: #000;
	font-size: 14px;
	font-weight: 400;
}

.story .textBox .content .bold {
	font-weight: 700;
}

.story .comment {
	padding: 0 16px 16px;
}

.story .comment .title {
	font-family: var(--font);
	font-size: 24px;
	color: #383838;
	text-align: left;
}

.story .comment .title .purple {
	font-family: var(--font);
	font-size: 24px;
	color: var(--main);
}

.story .comment .title .small {
	font-size: 14px;
	color: #c2c2c2;
	font-weight: 500;
	margin-left: 10px;
}

.story .inputBox {
	display: flex;
	height: 40px;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	padding: 0 16px;
}

.story .inputBox .input {
	width: calc(100% - 41px);
	height: 40px;
	border-radius: 10px;
	position: relative;
}

.story .inputBox .input input {
	outline: none;
	border-radius: 10px;
	border: 1px solid #dbdbdb;
	padding: 0 46px 0 16px;
	width: 100%;
	height: 100%;
}

.story .inputBox .input .commentButton {
	color: var(--main);
	font-size: 14px;
	font-weight: 700;
	padding: 5px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 11px;
}

.story .soul {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.story .commentList {
	width: 100%;
	padding: 30px 16px;
}

.story .userComment {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.story .userComment .detail {
	width: calc(100% - 41px);
}

.story .userComment .detail .user {
	color: #000;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}

.story .userComment .detail .text {
	font-size: 14px;
	color: #000;
}

/* 비밀 이야기 끝 */

/* 공지사항 / 이용약관 */

.notice {
	background-color: #fdfdfd;
	border-bottom: 1px solid #efefef;
	overflow: hidden;
}

.notice .titleBox {
	height: 72px;
	width: 100%;
	padding: 0 24px 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.notice .titleBox .title {
	width: calc(100% - 24px);
}

.notice .titleBox .title p:nth-child(1) {
	width: 90%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: var(--black);
	font-size: 16px;
	font-weight: 700;
}

.notice .titleBox .title p:nth-child(2) {
	font-size: 12px;
	line-height: 20px;
	color: #878787;
}

.notice .titleBox img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.notice.open .titleBox img {
	transform: rotate(180deg);
}

.notice .contentBox {
	height: 0;
	transition: height 0.5s ease-in-out;
}

.notice .contentBox p {
	padding: 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	white-space: pre-line;
}

.notice.open .contentBox {
	height: auto;
}

/* 공지사항 / 이용약관 끝 */

/* 별 충전 */

.starFixedBox {
	width: 100%;
}

.starFixedBox #starTab {
	width: 100%;
	display: flex;
}

.starFixedBox #starTab > div {
	width: 50%;
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2px solid #efefef;
	background-color: #fdfdfd;
	cursor: pointer;
}

.starFixedBox #starTab > div.selected {
	border-color: var(--main);
}

.starFixedBox #starTab > div > p {
	color: #000;
	font-size: 16px;
	font-weight: 500;
}

.starFixedBox .currentStar {
	height: 58px;
	width: 100%;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.starFixedBox .currentStar.border {
	padding: 0 25px;
	border: 1px solid #dbdbdb;
	background: #f9f9f9;
	height: 60px;
	width: calc(100% - 32px);
	margin: 22px 16px 20px;
	border-radius: 5px;
}

.starFixedBox .currentStar p {
	font-size: 16px;
	font-weight: 700;
	color: var(--black);
}

.starFixedBox .currentStar > div {
	display: flex;
	align-items: center;
	justify-content: center;
}

.starFixedBox .currentStar > div > img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 5px;
}

.star .starTitle {
	font-size: 20px;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 16px;
}

.star .starBox {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	width: 100%;
	padding: 16px;
	border-radius: 10px;
	background-color: #fdfdfd;
	box-shadow: 1px 1px 5px #00000026;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	min-height: 74px;
	margin-bottom: 10px;
	cursor: pointer;
}

.star .starBox.hot {
	border-color: #ff0000;
}

.star .starBox.best {
	border-color: #ffb800;
}

.star .starBox.purple {
	border-color: var(--main);
}

.star .starBox .info {
	display: flex;
	margin-bottom: 4px;
}

.star .starBox .info > div {
	height: 16px;
}

.star .starBox .info p {
	font-size: 10px;
	font-weight: 700;
}

.star .starBox .info .hot,
.star .starBox .info .sub,
.star .starBox .info .best {
	font-weight: 700;
	color: #fff;
	display: flex;
	padding: 0 10px;
	align-items: center;
	border-radius: 8px;
	margin-right: 5px;
}

.star .starBox .info .hot {
	background-color: #ff0000;
}

.star .starBox .info .best {
	background-color: #ffb800;
}

.star .starBox .info .sub {
	background-color: var(--main);
}

.star .starBox .info .bonus {
	display: flex;
	padding: 0 0;
	align-items: center;
	color: #696969;
}

.star .starBox .info .bonus span {
	color: var(--main);
}

.star .starBox .itemBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.star .starBox .itemBox .item {
	height: 30px;
	display: flex;
	align-items: center;
	color: var(--black);
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
}

.star .starBox .itemBox .item.ori {
	position: relative;
	color: #dbdbdb;
}

.star .starBox .itemBox .item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 8px;
}

.star .starBox .itemBox .price {
	height: 30px;
	background-color: var(--main);
	border-radius: 10px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: 500;
	color: #fdfdfd;
	display: flex;
	align-items: center;
}

.star .starBox .itemBox .price p {
	text-wrap: nowrap;
}

.star .starBox .itemBox .price.fixed {
	position: absolute;
	top: 12px;
	right: 12px;
}

.star .starBox .itemBox .priceBox {
	width: 120px;
}

.star .starBox .itemBox .priceBox .ori {
	position: relative;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
}

.star .starBox .itemBox .priceBox .ori img {
	width: 100%;
	position: absolute;
	top: 68%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.star .starBox .itemBox .priceBox .dis {
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: 700;
	color: #7b1cd0;
	text-align: center;
}

.star .starBox .itemBox .priceBox .buyButton {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	letter-spacing: -1px;
	color: #fff;
	font-weight: 500;
	border-radius: 20px;
	background: #3b3247;
	cursor: pointer;
	height: 34px;
	margin-top: 20px;
}

.star .starBox .itemBox .additional {
	color: var(--main);
	font-family: GmarketSans;
	font-size: 15px;
	font-weight: 700;
	line-height: 30px;
}

.star .starBox .itemBox .additional .black {
	color: #383838;
	font-family: GmarketSans;
}

.star .starBox .itemBox .item span {
	margin: 0 6px;
}

.star .starBox .itemBox .item .before {
	width: 180px;
	height: 11px;
	object-fit: contain;
	position: absolute;
	bottom: 4px;
	left: 0;
}

.star .starBox .itemBox .package {
	font-size: 16px;
	font-weight: 500;
}

.star .starBox .itemBox .package.two {
	min-height: 102px;
}

.star .starBox .itemBox .package.two .info {
	height: auto;
	margin-bottom: 8px;
}

.star .starBox .itemBox .package.two .hot,
.star .starBox .itemBox .package.two .best {
	background: #6637a4;
	height: 20px;
	border-radius: 10px;
}

.star .starBox.two.hot,
.star .starBox.two.best {
	border: 1px solid #8358bc;
}

.star .starBox .itemBox .package span {
	font-size: 12px;
	font-weight: 500;
}

.star .starTab {
	display: none;
	width: 100%;
}

.star .starTab.open {
	display: block;
}

.star .usage {
	width: 100%;
	height: 92px;
	border-bottom: 1px solid #efefef;
	background-color: #fdfdfd;
	padding: 0 16px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.star .usage .type {
	font-size: 12px;
	font-weight: 500;
	color: #c50c0c;
	margin-bottom: 5px;
}

.star .usage .type.plus {
	color: #1a65d7;
}

.star .usage .detail {
	font-size: 16px;
	font-weight: 700;
	color: #1d1b20;
	margin-bottom: 2px;
}

.star .usage .date {
	font-size: 12px;
	color: #878787;
}

.star .logs {
	padding: 15px 16px;
	border: 1px solid #dbdbdb;
	border-radius: 12px;
	background: #fdfdfd;
	position: relative;
	margin-bottom: 12px;
}

.star .logs .date {
	color: #878787;
	font-size: 13px;
	font-weight: 500;
}

.star .logs .starUsage {
	display: flex;
	align-items: center;
	height: 24px;
	margin-top: 7px;
}

.star .logs .starUsage p {
	font-size: 15px;
	color: #000;
	font-weight: 700;
	margin-right: 10px;
}

.star .logs .starUsage img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 7px;
}

.star .logs .question {
	font-size: 18px;
	font-weight: 800;
	color: #000;
	margin-bottom: 7px;
	margin-top: 7px;
}

.star .logs .question2 {
	font-weight: 600;
	font-size: 15px;
	color: #000;
	margin-bottom: 7px;
	margin-top: 7px;
}

.star .logs .question3 {
	font-weight: 600;
	font-size: 14px;
	color: #383838;
	margin-bottom: 7px;
	margin-top: 7px;
}

.star .logs .type {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 10px;
	right: 10px;
	border-radius: 10px;
	height: 30px;
	width: 60px;
}

.star .logs .type p {
	font-size: 13px;
	font-weight: 500;
	color: #fdfdfd;
}

.star .logs .type.plus {
	background: #2dd91a;
}

.star .logs .type.minus {
	background: #a5a5a5;
}

.star .logs .link {
	position: absolute;
	bottom: 24px;
	right: 18px;
	color: #878787;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.star .logs .mainImg {
	max-width: 73%;
	object-fit: cover;
	aspect-ratio: 21/9;
	border-radius: 5px;
}

.star .logs .linkButton {
	line-height: 54px;
	width: 100%;
	background: #6136bb;
	color: #fdfdfd;
	font-size: 15px;
	font-weight: 500;
	border-radius: 12px;
	text-align: center;
	margin-top: 14px;
	display: block;
}

.star .logs .border {
	width: 100%;
	height: 1px;
	background-color: #efefef;
}

.star .logs .type2 {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	margin-top: 14px;
}

.star .logs .type2 img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.star .logs .type2 p {
	margin-left: 2px;
	font-size: 14px;
	font-weight: 500;
	color: #383838;
}

.star .logs .type2 span {
	margin-left: 8px;
	font-size: 13px;
	color: #6136bb;
}

.star .logs .productReview {
	font-size: 14px;
	color: #4d4d4d;
	margin-bottom: 10px;
	padding-right: 40px;
}

.star .resultCount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.star .resultCount p {
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.star .resultCount p span {
	color: #6136bb;
}

#container.star {
	height: calc(100% - 162px);
}

#container.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#container.detail p.title {
	color: var(--main);
	font-size: 32px;
	font-family: var(--font);
	text-align: center;
}

#container.tarotDetail {
	height: calc(100vh - 128px);
	height: calc(100dvh - 128px);
	background: #fff;
}

.pastlife #container.tarotDetail {
	background: #14233b;
}

#container.full {
	height: 100%;
}

p.subInfo {
	font-size: 15px;
	word-break: keep-all;
	color: #383838;
	text-align: center;
	padding: 0 6%;
}

.imgBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.imgBox .present {
	width: 240px;
	height: 240px;
	object-fit: contain;
}

.imgBox .timeSale {
	width: 160px;
	height: 160px;
	object-fit: contain;
}

/* .imgBox p {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	font-size: 32px;
	font-family: var(--font);
	color: #111;
	opacity: 0.2;
} */

.triangle {
	position: relative;
	padding-bottom: 100px;
	margin-bottom: 20px;
}

.triangle .imgBox.left,
.triangle .imgBox.right {
	position: absolute;
	width: auto;
	bottom: 0;
	left: 50%;
}

.triangle .imgBox.left {
	transform: translateX(-90%);
}

.triangle .imgBox.right {
	transform: translateX(-10%);
}

.timerText {
	font-size: 20px;
	font-weight: 700;
	color: #878787;
	text-align: center;
	margin-bottom: 8px;
}

.timerText span {
	color: var(--main);
}

.timer {
	text-align: center;
}

#countDown {
	color: #4d4d4d;
	font-size: 48px;
	font-family: var(--font);
	margin-bottom: 8px;
}

main.gra_time {
	/* background: linear-gradient(#00000033 10%, #6136bb 49%, #da6fff7d 100%); */
	background: linear-gradient(#0f0023 0%, #6136bb 40%, #da6fff7d 100%);
}

.saleBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	max-width: 360px;
	margin: 0 auto;
	position: relative;
}

.saleBox .logo {
	object-fit: contain;
	width: 90px;
	height: 36px;
}

.saleBox .text1 {
	font-family: var(--font);
	color: #ffd400;
	font-size: 30px;
	text-align: center;
	margin-bottom: 4px;
	margin-top: 12px;
}

.saleBox .text2 {
	text-align: center;
	font-weight: 700;
	color: #fff;
	font-size: 90px;
	line-height: 100px;
	margin-bottom: 20px;
	font-family: var(--font3);
}

.saleBox .text3 {
	text-align: center;
	color: #ffd400;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 14px;
	font-family: var(--font);
}

.saleBox .countBox {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffd400;
	width: 128px;
	height: 42px;
	border-radius: 21px;
}

.saleBox .countBox #countDown {
	font-family: var(--font2);
	color: #000;
	font-size: 20px;
}

.saleBox .extend {
	font-size: 15px;
	line-height: 30px;
	color: #fff;
	cursor: pointer;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: 8px;
}

.saleBox div[class^="ani"] {
	position: absolute;
}

.saleBox .ani_dot {
	border-radius: 50%;
}

.saleBox .ani_dot[data-flash="1"] {
	background: #fff;
	width: 6px;
	height: 6px;
	animation: flashing 1.7s ease-in-out infinite alternate;
	top: 39px;
	right: 87px;
}
.saleBox .ani_dot[data-flash="2"] {
	background: #ffffff99;
	width: 4px;
	height: 4px;
	animation: flashing 3s ease-in-out infinite alternate;
	top: 68px;
	left: 98px;
}
.saleBox .ani_dot[data-flash="3"] {
	background: #ffffff99;
	width: 6px;
	height: 6px;
	animation: flashing 2.5s ease-in-out infinite alternate;
	top: 89px;
	right: 63px;
}
.saleBox .ani_dot[data-flash="4"] {
	background: #fff;
	width: 10px;
	height: 10px;
	animation: flashing 2.5s ease-in-out infinite alternate;
	top: 190px;
	left: 32px;
}
.saleBox .ani_dot[data-flash="5"] {
	background: #ffffff99;
	width: 5px;
	height: 5px;
	animation: flashing 1.8s ease-in-out infinite alternate;
	top: 217px;
	left: 52px;
}
.saleBox .ani_dot[data-flash="6"] {
	background: #fff;
	width: 5px;
	height: 5px;
	animation: flashing 1.7s ease-in-out infinite alternate;
	top: 45px;
	left: 107px;
}
.saleBox .ani_dot[data-flash="7"] {
	background: #ffffff99;
	width: 5px;
	height: 5px;
	animation: flashing 3s ease-in-out infinite alternate;
	top: 44px;
	right: 37px;
}
.saleBox .ani_dot[data-flash="8"] {
	background: #ffffff99;
	width: 5px;
	height: 5px;
	animation: flashing 2s ease-in-out infinite alternate;
	top: 99px;
	left: 66px;
}
.saleBox .ani_dot[data-flash="9"] {
	background: #fff;
	width: 5px;
	height: 5px;
	animation: flashing 2.5s ease-in-out infinite alternate;
	top: 106px;
	right: 25px;
}

@keyframes flashing {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.saleBox .ani_star {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.saleBox .ani_star .star {
	object-fit: contain;
}

.saleBox .ani_star[data-up="1"] {
	top: 126px;
	left: 63px;
	animation: upRising 4s linear infinite forwards;
}

.saleBox .ani_star[data-up="2"] {
	top: 145px;
	right: 48px;
	animation: upRising 5.5s linear infinite forwards;
}

.saleBox .ani_star[data-up="3"] {
	top: 285px;
	left: 65px;
	animation: upRising 3s linear infinite forwards;
}

.saleBox .ani_star[data-up="4"] {
	top: 319px;
	right: 72px;
	animation: upRising 3.5s linear infinite forwards;
}

@keyframes upRising {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(1);
	}
	50% {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px) scale(1.2);
	}
}

.saleBox .ani_star[data-up="1"] .star {
	width: 20px;
	height: 28px;
}
.saleBox .ani_star[data-up="2"] .star {
	width: 13px;
	height: 18px;
}
.saleBox .ani_star[data-up="3"] .star {
	width: 15px;
	height: 21px;
}
.saleBox .ani_star[data-up="4"] .star {
	width: 15px;
	height: 21px;
}

.saleBox .ani_star .tail {
	width: 1px;
	height: 35px;
	object-fit: contain;
}

/* .saleBox .ani_star[data-up="1"] .tail {
	margin-top: 8px;
}
.saleBox .ani_star[data-up="2"] .tail {
	margin-top: 8px;
}
.saleBox .ani_star[data-up="3"] .tail {
	margin-top: 7px;
}
.saleBox .ani_star[data-up="4"] .tail {
	margin-top: 4px;
} */

.saleBox .ani_clock {
	width: 49px;
	height: 54px;
	object-fit: contain;
	position: absolute;
	top: 200px;
	transform: translateX(105px);
	animation: clock 6s ease-in-out infinite alternate;
}

@keyframes clock {
	0% {
		transform: translateX(105px) rotate(-10deg);
	}
	100% {
		transform: translateX(105px) rotate(10deg);
	}
}

@keyframes present {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}

.statItemList {
	padding: 16px;
}

.statItemList .starItem {
	margin-top: 26px;
	border-radius: 12px;
	background: #fff;
	position: relative;
	/* overflow: hidden; */
	width: 100%;
	cursor: pointer;
}

.statItemList .starItem.border {
	border: 1px solid #878787;
	border-radius: 12px;
}

.statItemList .starItem.border2 {
	border: 1px solid #878787;
	border-radius: 12px;
}

.statItemList .starItem.best {
	border: 2px solid #e0115f;
}

.statItemList .starItem .tags {
	position: absolute;
	height: 32px;
	top: -16px;
	display: flex;
}

.statItemList .starItem .tags > div {
	height: 32px;
	padding: 0 11px;
	display: flex;
	font-size: 0;
	align-items: center;
	border-radius: 10px;
}

.statItemList .starItem .tags > div > p {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.statItemList .starItem .tags .best {
	background: #ffb800;
}

.statItemList .starItem .tags .hot {
	background: #6f61db;
}

.statItemList .starItem .tags .discount {
	/* background: #a464f5; */
	background: #e0115f;
}

.statItemList .starItem .tags .discount.red {
	background: #e0115f;
}

.statItemList .starItem .tags .onepl {
	background: #21d611;
}

.statItemList .starItem .main {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 18px;
	height: 104px;
}

.statItemList .starItem.border .main {
	height: 78px;
}

.statItemList .starItem.border .main .box:nth-child(2) {
	display: flex;
	align-items: center;
}

.statItemList .starItem .main .ori {
	text-align: right;
	font-size: 18px;
	font-weight: 600;
	color: #a5a5a5;
	text-decoration: line-through;
}

.statItemList .starItem.border .main .box:nth-child(2) .ori {
	font-size: 15px;
	font-weight: 500;
	color: #878787;
	margin-right: 7px;
}

.statItemList .starItem .main .now {
	text-align: right;
	color: #000;
	font-size: 18px;
	font-weight: 800;
}

.statItemList .starItem .main .star {
	display: flex;
	align-items: center;
	margin-top: 8px;
}

.statItemList .starItem .main .star img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 6px;
}

.statItemList .starItem .main .star p {
	font-size: 15px;
	font-weight: 700;
	color: #000;
}

.statItemList .starItem .main .star .space {
	font-size: 15px;
	font-weight: 700;
	margin: 0 6px;
}

.statItemList .starItem .main .increase {
	font-weight: 500;
	color: #a5a5a5;
	font-size: 14px;
	line-height: 21px;
}

.statItemList .starItem .bestBox {
	width: 100%;
	height: 48px;
	border-radius: 0 0 12px 12px;
	background: #dcc5ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.statItemList .starItem .bestBox p {
	color: #6136bb;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
}

.statItemList .starItem .main .increase span {
	color: #256fff;
}

main.gra_first {
	/* background: linear-gradient(#0f0023 0%, #6136bb 40%, #da6fff7d 100%); */
	background: linear-gradient(180deg, #f9cf00 0%, #e8eb4a 38%, #f9cf00 100%);
}

.saleBox .firstTitle {
	position: relative;
	margin-top: 25px;
	margin-bottom: 16px;
}

.saleBox .firstTitle p {
	font-family: var(--font3);
	font-weight: 700;
	font-size: 55px;
	line-height: 67px;
	text-align: center;
	background: linear-gradient(90deg, #3a0064 0%, #6136bb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.saleBox .firstTitle img {
	position: absolute;
	top: -10px;
	left: -13px;
	width: 73px;
	height: 73px;
	object-fit: contain;
	animation: present 6s ease-in-out infinite alternate;
}

.saleBox .event {
	display: flex;
	align-items: center;
	margin-bottom: 26px;
}

.saleBox .event p {
	color: #fff;
	padding: 8px 15px;
	border-radius: 10px;
	font-size: 20px;
	font-family: var(--font);
}

.saleBox .event p.red {
	background: #e0115f;
}

.saleBox .event p.green {
	background: #21d611;
}

.saleBox .event .space {
	margin: 0 7px;
	font-size: 20px;
	font-family: var(--font);
	color: #4a3a01;
}

.saleBox .text4 {
	text-align: center;
	background: linear-gradient(90deg, #3a0064 0%, #6136bb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 36px;
	font-family: var(--font3);
}

.saleBox .text5 {
	color: #383838;
	text-align: center;
	font-size: 15px;
	margin-top: 15px;
}

.saleBox .ani_blur {
	background: radial-gradient(circle at center, #fdfdfd, transparent 80%);
	border-radius: 50%;
}

.saleBox .ani_blur[data-flash="1"] {
	width: 14px;
	height: 14px;
	top: 16px;
	left: 36px;
	animation: flashing 1.5s linear infinite alternate;
}

.saleBox .ani_blur[data-flash="2"] {
	width: 17px;
	height: 16px;
	top: 40px;
	right: 83px;
	animation: flashing 2.5s linear infinite alternate;
}

.saleBox .ani_blur[data-flash="3"] {
	width: 16px;
	height: 14px;
	top: 72px;
	left: 73px;
	animation: flashing 3s linear infinite alternate;
}

.saleBox .ani_blur[data-flash="4"] {
	width: 14px;
	height: 14px;
	top: 88px;
	right: 46px;
	animation: flashing 2s linear infinite alternate;
}

.saleBox .ani_blur2 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.saleBox .ani_blur2 div:nth-child(1) {
	background: radial-gradient(circle at center, #fdfdfd, transparent 80%);
	border-radius: 50%;
}

.saleBox .ani_blur2 .tail {
	width: 1px;
	height: 35px;
	object-fit: contain;
	margin-top: 8px;
}

.saleBox .ani_blur2[data-flash="1"] {
	left: 24px;
	top: 85px;
	animation: upRising 3.5s linear infinite forwards;
}

.saleBox .ani_blur2[data-flash="1"] div:nth-child(1) {
	width: 21px;
	height: 21px;
}

.saleBox .ani_blur2[data-flash="2"] {
	top: 142px;
	right: 34px;
	animation: upRising 2.5s linear infinite forwards;
}

.saleBox .ani_blur2[data-flash="2"] div:nth-child(1) {
	width: 20px;
	height: 20px;
}

.buttonPos {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
}

.buttonPos.shadow {
	box-shadow: 0 -2px 8px #c2c2c226;
}

.buttonPos .extendButton {
	cursor: pointer;
	background-color: var(--main);
	height: 30px;
	width: 90px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.buttonPos .extendButton p {
	color: #fdfdfd;
	font-size: 12px;
	font-weight: 700;
}

.buttonPos .leavePage {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: 10px;
}

.buttonPos .saveProfile {
	width: calc(100%);
	height: 52px;
	border-radius: 12px;
	background: #6136bb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.buttonPos .saveProfile p {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
}

#resultS {
	width: 240px;
	height: 210px;
	object-fit: contain;
	margin: 28px 0 50px;
}

#resultF {
	width: 148px;
	height: 220px;
	object-fit: contain;
	margin: 28px 0 50px;
}

.title.stars {
	font-size: 24px;
	/* font-family: var(--font); */
	font-weight: 800;
	color: var(--main);
	text-align: center;
}

.giveup {
	color: #b1b1b1;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: block;
	margin: 10px auto 40px;
	text-align: center;
}

.nostar .starBox {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	width: 100%;
	padding: 0px 16px;
	border-radius: 10px;
	background-color: #fdfdfd;
	box-shadow: 1px 1px 5px #00000026;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	min-height: 56px;
	margin-bottom: 10px;
	cursor: pointer;
}

.nostar .starBox .itemBox {
	display: flex;
	align-items: center;
	width: 100%;
}

.nostar .starBox .itemBox p {
	color: #383838;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
}

.nostar .starBox .itemBox p span {
	color: #a5a5a5;
	font-size: 11px;
	font-weight: 500;
}

.nostar .starBox .itemBox .icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 8px;
}

.payinfoImg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	background: url("/tarot/img/payinfo.png") no-repeat 100% 100% / cover;
	height: 190px;
}

.payinfoImg > p {
	font-size: 20px;
	line-height: 30px;
	color: #fff;
	font-family: var(--font);
	text-align: center;
}

.payinfoImg > p.big {
	font-size: 30px;
}

.payinfoImg > p.small {
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 500;
	font-size: 15px;
	margin-top: 10px;
	line-height: 22px;
}

.statItemList .date {
	font-size: 14px;
	color: #878787;
}

.statItemList .date span {
	font-size: 15px;
	font-weight: 700;
	color: #000;
	margin-right: 11px;
}

.payinfoBorder {
	width: 100%;
	height: 6px;
	background: #efefef;
	margin: 10px 0;
}

.payinfoRecomm .subtitle {
	font-size: 15px;
	font-weight: 600;
	color: #000;
	padding: 10px 16px 20px;
}

.payinfoRecomm #recommList {
	height: 180px;
	padding-left: 16px;
}

.payinfoRecomm #recommList .recommItem {
	width: 100%;
	height: 100%;
	max-height: 140px;
	/* aspect-ratio: 4/2; */
	object-fit: cover;
	border-radius: 5px;
}

.payinfoRecomm {
}

.payinfoRecomm #recommList .counter {
	margin-top: 11px;
	display: flex;
	align-items: center;
	margin-top: 0;
}

.payinfoRecomm #recommList .counter img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 6px;
}

.payinfoRecomm #recommList .counter p {
	color: #000;
	font-weight: 500;
	font-size: 12px;
}

.payinfoRecomm #recommList .counter p span {
	color: #6a41bf;
}

/* 별 충전 끝 */

/* 공부방 */

.study .subContainer {
	padding: 16px;
	margin-bottom: 0;
	font-size: 0;
}

.study .subtitle {
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	margin-bottom: 10px;
}

.study .subtitle .compulsory {
	color: #ff0000;
	font-size: 11px;
	font-weight: 500;
	margin-left: 2px;
	position: relative;
	top: -3px;
}

.study .subtitle2 {
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	margin-bottom: 2px;
}

.study .subtitle .small {
	font-size: 10px;
	font-weight: 500;
	color: #a5a5a5;
}

.study #sample {
	border-radius: 10px;
	height: 153px;
	object-fit: contain;
}

.study #info {
	font-size: 12px;
	font-weight: 500;
	color: #a5a5a5;
	margin: 10px 0;
}

.study #upload {
	border-radius: 5px;
	width: 152px;
	height: 146px;
	background-color: #fdfdfd;
	border: 1px solid #dbdbdb;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.study #upload p {
	font-size: 16px;
	font-weight: 700;
	color: #878787;
}

.study #upload img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.study #file {
	display: none;
}

.study input[type="text"] {
	padding: 0 4px;
	outline: none;
	border: none;
	background-color: #fdfdfd;
	border-bottom: 1px solid #dbdbdb;
	width: 100%;
	height: 36px;
	font-size: 15px;
}

.study .preview {
	position: relative;
}

.study .preview .close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: none;
}

.study .preview.show .close {
	display: block;
}

.study .explain {
	outline: none;
	border-radius: 5px;
	border: 1px solid #dbdbdb;
	padding: 8px;
	resize: none;
	height: 80px;
	width: 100%;
	font-size: 14px;
}

.study .selectBox {
	width: 100%;
	border: 1px solid #dbdbdb;
	background-color: #fdfdfd;
	border-radius: 8px;
	margin-bottom: 20px;
}

.study #select {
	outline: none;
	border-radius: 8px;
	border: none;
	background-color: #fdfdfd;
	padding: 0px 16px;
	width: 100%;
	height: 40px;
	border-right: 16px solid transparent;
	font-size: 15px;
}

.mb10 {
	margin-bottom: 10px;
}

/* 공부방 끝 */

/* 결과공유 */

.share #result {
	width: 100%;
	height: 100%;
}

.share #result.saju {
	scroll-snap-type: y mandatory;
	overflow: auto;
}

.share .cardBox {
	width: 100%;
	height: 318px;
	display: flex;
	justify-content: center;
	position: relative;
	background: #ddd;
}

.share .cardBox .imgButton {
	width: 24px;
	height: 24px;
	cursor: pointer;
	object-fit: contain;
	position: absolute;
}

.share .cardBox .imgButton.back {
	top: 16px;
	left: 16px;
}

.share .cardBox .imgButton.share {
	top: 16px;
	right: 16px;
}

.share #dreamPic {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.share #cardSet {
	position: relative;
	width: 318px;
	height: 318px;
	background: url("/tarot/img/resultBackground.png") no-repeat center / 90% 90%;
}

.share #result .resultHeader {
	display: flex;
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
}

.share #result .resultHeader .imgButton,
.share #result .resultHeader .imgButton2 {
	cursor: pointer;
	object-fit: contain;
	width: 24px;
	height: 24px;
}

.share #result .resultHeader .imgButton2 {
	width: 18px;
	height: 20px;
}

.share #result .flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.share #result .flex.background {
	background-image: url("/tarot/img/resultMain.png");
}

.share #result .film {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background: linear-gradient(#0201513d 0%, #3e28667a 50%, #00000075 100%);
}

.share #result .film .cardTitle {
	font-family: var(--font2);
	font-weight: 700;
	color: #f5f5f5;
	font-size: 26px;
	letter-spacing: 2px;
	margin: 30px 0 80px;
	text-align: center;
}

.share #result .film .subtitle {
	background: #ffffff4d;
	border-radius: 20px;
	color: #fff;
	display: inline-block;
	padding: 4px 10px;
	font-family: var(--font2);
	font-weight: 400;
	font-size: 14px;
}

.share #result .film .contentBox {
	border-bottom: none;
	overflow-y: scroll;
	max-height: calc(100% - 175px);
}

.share #result .film .text {
	font-size: 16px;
	color: #fff;
}

.share #result .cardBox {
	background: none;
	flex-direction: column;
	align-items: center;
}

.share #result #cardSet {
	background: none;
}

.share #result .resultTitle {
	font-family: WarhavenB;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	word-break: keep-all;
	text-align: center;
	line-height: 32px;
	margin-bottom: 20px;
	width: 100%;
}

.share #result .info {
	font-size: 14px;
	font-weight: 500;
	color: #f5f5f5;
	margin-top: 6px;
	line-height: 21px;
	text-align: center;
	width: 100%;
}

.share #result .swiper-pagination-bullet {
	opacity: 0.5;
	background-color: #fff;
	transition: 0.3s ease-in-out;
}

.share #result .swiper-pagination-bullet-active {
	background-color: #fff;
	opacity: 1;
	width: 16px;
	border-radius: 4px;
}

.share #result .resultTeller {
	width: 100%;
	max-width: 320px;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 1px 1px 4px #ffffff6b;
	display: block;
	cursor: pointer;
	margin: 14px auto 0;
}

.share #cardSet .cards {
	width: calc(33% - 20px);
	position: relative;
	aspect-ratio: 10/17;
	background: #fff0ff;
	position: absolute;
	transform: translate(-50%, -50%);
	font-size: 0px;
}

.share #cardSet .cards img {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.share #cardSet.one .cards:nth-child(1) {
	top: 50%;
	left: 50%;
	width: 50%;
}

.share #cardSet.two .cards:nth-child(1) {
	top: 50%;
	left: 25%;
	width: 45%;
}

.share #cardSet.two .cards:nth-child(2) {
	top: 50%;
	left: 75%;
	width: 45%;
}

.share #cardSet.normal .cards:nth-child(1) {
	top: 50%;
	left: 20%;
}

.share #cardSet.normal .cards:nth-child(2) {
	top: 50%;
	left: 50%;
}

.share #cardSet.normal .cards:nth-child(3) {
	top: 50%;
	left: 80%;
}

.share #cardSet.celtic .cards .selectedCard {
	margin-bottom: 0;
}
.share #cardSet.celtic .cards,
.share #cardSet.magic .cards {
	position: absolute;
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
}

.share #cardSet .cards.selected {
	z-index: 3 !important;
}

.share #cardSet.celtic .cards:nth-child(1) {
	top: 50%;
	left: calc(37%);
}

.share #cardSet.celtic .cards:nth-child(2) {
	top: 50%;
	left: calc(37%);
	/* transform: translate(-50%, -50%) rotate(90deg); */
	transform: translate(-60%, -60%);
	transition: transform 0.3s 5s ease-in-out;
}

.share #cardSet.celtic .cards.selected:nth-child(2) {
	transform: translate(-50%, -50%) rotate(90deg);
}

.share #cardSet.celtic .cards:nth-child(3) {
	top: 80%;
	left: calc(37%);
}

.share #cardSet.celtic .cards:nth-child(4) {
	top: 50%;
	left: calc(12%);
}

.share #cardSet.celtic .cards:nth-child(5) {
	top: 20%;
	left: calc(37%);
}

.share #cardSet.celtic .cards:nth-child(6) {
	top: 50%;
	left: calc(62%);
}

.share #cardSet.celtic .cards:nth-child(7) {
	top: 80%;
	left: calc(70%);
}

.share #cardSet.celtic .cards:nth-child(8) {
	top: 80%;
	left: calc(88%);
}

.share #cardSet.celtic .cards:nth-child(9) {
	top: 50%;
	left: calc(88%);
}

.share #cardSet.celtic .cards:nth-child(10) {
	top: 20%;
	left: calc(88%);
}

.share #cardSet.celtic .cards .selectedCard,
.share #cardSet.magic .cards .selectedCard {
	margin-bottom: 0;
}
.share #cardSet.celtic .cards {
	position: absolute;
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
}

.share #cardSet.heart {
	aspect-ratio: 1/1;
}

.share #cardSet.heart .cards {
	width: calc(20% - 20px);
	transform: translate(-50%, -50%);
	z-index: 2;
	position: absolute;
}
.share #cardSet.heart .cards.selected {
	z-index: 3;
}

.share #cardSet.heart .cards:nth-child(1) {
	top: 50%;
	left: calc(37%);
}

.share #cardSet.heart .cards:nth-child(2) {
	top: 50%;
	left: calc(37%);
	/* transform: translate(-50%, -50%) rotate(90deg); */
	transform: translate(-60%, -60%);
	transition: transform 0.3s 5s ease-in-out;
}

.share #cardSet.heart .cards.selected:nth-child(2) {
	transform: translate(-50%, -50%) rotate(90deg);
}

.share #cardSet.heart .cards:nth-child(3) {
	top: 80%;
	left: calc(37%);
}

.share #cardSet.heart .cards:nth-child(4) {
	top: 50%;
	left: calc(12%);
}

.share #cardSet.heart .cards:nth-child(5) {
	top: 20%;
	left: calc(37%);
}

.share #cardSet.heart .cards:nth-child(6) {
	top: 50%;
	left: calc(62%);
}

.share #cardSet.heart .cards:nth-child(7) {
	top: 78%;
	left: calc(70%);
}

.share #cardSet.heart .cards:nth-child(8) {
	top: 80%;
	left: calc(88%);
}

.share #cardSet.action {
	aspect-ratio: 1.5/1;
}

.share #cardSet.action .cards {
	width: calc(20% - 14px);
	transform: translate(-50%, -50%);
	z-index: 2;
	position: absolute;
}
.share #cardSet.action .cards.selected {
	z-index: 3;
}

.share #cardSet.action .cards:nth-child(1) {
	top: 30%;
	left: calc(10%);
}

.share #cardSet.action .cards:nth-child(2) {
	top: 50%;
	left: calc(30%);
}

.share #cardSet.action .cards:nth-child(3) {
	top: 70%;
	left: calc(50%);
}

.share #cardSet.action .cards:nth-child(4) {
	top: 50%;
	left: calc(70%);
}

.share #cardSet.action .cards:nth-child(5) {
	top: 30%;
	left: calc(90%);
}

.share #cardSet.magic .cards:nth-child(1) {
	top: 20%;
	left: calc(50%);
}

.share #cardSet.magic .cards:nth-child(2) {
	top: 70%;
	left: calc(80%);
}

.share #cardSet.magic .cards:nth-child(3) {
	top: 70%;
	left: calc(20%);
}

.share #cardSet.magic .cards:nth-child(4) {
	top: 80%;
	left: calc(50%);
}

.share #cardSet.magic .cards:nth-child(5) {
	top: 30%;
	left: calc(20%);
}

.share #cardSet.magic .cards:nth-child(6) {
	top: 30%;
	left: calc(80%);
}

.share #cardSet.magic .cards:nth-child(7) {
	top: 50%;
	left: calc(50%);
}

.share .titleBox {
	padding: 20px;
	background: #6136bb;
}

.pastlife .share .titleBox {
	background: #577ab166;
}

.pastlife .share .tabList {
	display: flex;
	margin: 25px auto 5px;
	width: calc(100% - 44px);
	height: 50px;
}

.pastlife .share .tabList .tab {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #878787;
	cursor: pointer;
}

.pastlife .share .tabList .tab:nth-child(1) {
	border-radius: 12px 0 0 12px;
	border-right: none;
}

.pastlife .share .tabList .tab:nth-child(2) {
	border-radius: 0 12px 12px 0;
	border-left: none;
}

.pastlife .share .tabList .tab p {
	font-size: 15px;
	font-weight: 500;
	color: #c2c2c2;
}

.pastlife .share .tabList .tab.selected {
	background: #dfebff;
	border: none;
}

.pastlife .share .tabList .tab.selected p {
	color: #14233b;
}

.share .titleBox p {
	font-size: 18px;
	color: #fff;
	font-family: var(--font);
}

.share .tabContainer {
	display: none;
	width: 100%;
}

.share .tabContainer.selected {
	display: block;
}

.share .contentBox {
	padding: 40px 20px;
	border-bottom: 1px solid #e9dfff;
}

.share .contentBox .subtitle {
	font-size: 18px;
	font-family: var(--font);
	color: var(--black);
	margin-bottom: 20px;
}

.pastlife .share .contentBox .subtitle {
	color: #fff;
}

.pastlife .share .contentBox .storyTitle {
	display: flex;
	height: 174px;
	width: 260px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 0 auto;
}

.pastlife .share .contentBox .storyTitle p {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	letter-spacing: -1px;
	margin: 20px 0;
	text-align: center;
	line-height: 1.2;
}

.pastlife .share .contentBox .storyTitle p span {
	font-size: 16px;
	color: #fff;
	letter-spacing: -1px;
}

.pastlife .share .contentBox .storyTitle img {
	width: 100%;
}

.pastlife .share .pastStory {
	width: 100%;
}

.pastlife .share .pastStory .createStoryButton {
	border-radius: 12px;
	background-color: #dfebff;
	width: 220px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30px auto;
	cursor: pointer;
}

.pastlife .share .pastStory .createStoryButton p {
	color: #14233b;
	font-weight: 600;
	font-size: 18px;
}

.pastlife .share .pastStory #story {
	padding: 20px 16px 10px;
	color: #fefefe;
	font-size: 15px;
}

.share .contentBox .text {
	font-size: 16px;
	color: var(--black);
}

.pastlife .share .contentBox .text {
	color: #fff;
}

.pastlife .share .contentBox .storyButton {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	height: 50px;
	width: 180px;
	background: #dfebff;
	border-radius: 12px;
}

.pastlife .share .contentBox .storyButton p {
	font-size: 15px;
	font-weight: 600;
	color: #14233b;
}

.share .shareBox {
	display: flex;
	flex-direction: column;
	padding: 30px 16px;
}

.share .shareBox .subtitle {
	font-size: 16px;
	font-weight: 600;
	color: var(--black);
	text-align: center;
}

.share .shareBox .subtitle {
	color: #eee;
}

.share .shareBox .shareButtons {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}

.share .shareBox .shareButtons > div {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	background: #eae0ff;
}

.share .shareBox .shareButtons > div.normal {
	background: #eae0ff;
	margin: 0 30px;
}

.share .shareBox .shareButtons > div.normal img {
	width: 18px;
	height: 20px;
	object-fit: contain;
}

.share .shareBox .shareButtons > div.normal::after {
	content: "공유하기";
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #4d4d4d;
	position: absolute;
	bottom: -26px;
}

.share .shareBox .shareButtons > div.home {
	background: #eae0ff;
}

.share .shareBox .shareButtons > div.home img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.share .shareBox .shareButtons > div.home::after {
	content: "홈";
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #4d4d4d;
	position: absolute;
	bottom: -26px;
}

.share .shareBox .shareButtons > div.kakao {
	background: #ffe812;
	margin-right: 40px;
}

.share .shareBox .shareButtons > div.kakao img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.share .shareBox .shareButtons > div.kakao:after {
	content: "카카오톡";
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #4d4d4d;
	position: absolute;
	bottom: -26px;
}

.share .shareBox .shareButtons > div.link {
	background: #eae0ff;
}

.share .shareBox .shareButtons > div.link img {
	width: 22px;
	height: 20px;
	object-fit: contain;
}

.share .shareBox .shareButtons > div.link:after {
	content: "링크복사";
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #4d4d4d;
	position: absolute;
	bottom: -26px;
}

.pastlife .share .shareBox .shareButtons > div:after {
	color: #fff;
}

.share .shareBox .shareButtons.report > div.link::after,
.share .shareBox .shareButtons.report > div.normal::after,
.share .shareBox .shareButtons.report > div.home::after {
	color: #ddd;
}

.share .sajuContainer {
	width: 100%;
	transition: background 2s ease-in-out;
}

.share .sajuContainer .intro {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 350px;
	background: url("/tarot/img/sajuBackground1.png") no-repeat center / cover;
	/* scroll-snap-align: center; */
}

.share .sajuContainer .intro .background {
	width: 100%;
	height: 100%;
	background: url("/tarot/img/sajuBackground2.png") no-repeat center / cover;
}

.share .sajuContainer .intro .background .gra {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	background: linear-gradient(#151515cc 0%, #15151533 50%, #151515b2 100%);
	padding: 60px 16px 20px;
}

.share .sajuContainer .intro .background .gra .titleBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: none;
}

.share .sajuContainer .intro .background .gra .titleBox .title {
	font-family: var(--font2);
	font-size: 32px;
	line-height: 52px;
	margin-bottom: 10px;
	color: #fdfdfd;
	text-align: center;
	word-break: keep-all;
}

.share .sajuContainer .intro .background .gra .midText {
	color: #fdfdfd;
	text-align: center;
	font-size: 16px;
	word-break: keep-all;
}

.share .sajuContainer .intro .background .gra .sajuInfo {
	font-size: 18px;
	font-family: var(--font2);
	color: #fdfdfd;
	margin-bottom: 5px;
	text-align: center;
}

.share .sajuContainer .intro .background .gra .titleBox .info {
	font-weight: 500;
	color: #fdfdfd;
	font-size: 14px;
	font-family: "Noto Sans KR", sans-serif;
	text-align: center;
}

.share .sajuContainer .intro .background .gra .bottomText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.share .sajuContainer .intro .background .gra .bottomText .scrollUp {
	width: 12px;
	height: 10px;
	object-fit: contain;
}

.share .sajuContainer .intro .background .gra .bottomText p {
	font-size: 12px;
	font-weight: 400;
	color: #f5f5f5;
	margin-bottom: 5px;
}

.share .sajuContainer .nos {
	height: auto;
	width: 100%;
}

.share .sajuContainer .graBg {
	width: 100%;
	background: repeating-linear-gradient(
		rgba(21, 21, 21, 0.28) 0%,
		rgba(21, 21, 21, 0.08) 50%,
		rgba(21, 21, 21, 0.28) 100%
	);
}

.share .sajuContainer img.main {
	width: 100%;
	height: 218px;
	object-fit: cover;
}

.share .sajuContainer .introText {
	width: 100%;
	min-height: calc(100vh - 218px);
	min-height: calc(100dvh - 218px);
	position: relative;
	padding: 48px 0;
}

.share .sajuContainer .intro2 {
	font-size: 0;
}

.share .sajuContainer .pBox {
	padding: 21px 16px;
}

.share .sajuContainer .tBox {
	padding: 0px 4px;
}

.share .sajuContainer .bb {
	border-bottom: 1px solid #fff;
}

.share .sajuContainer .tBox .title {
	font-size: 20px;
	font-family: var(--font2);
	color: #fdfdfd;
	line-height: 32px;
	letter-spacing: 1px;
	word-break: keep-all;
	padding-bottom: 20px;
}

.share .sajuContainer .tBox .sajuInfo {
	font-size: 15px;
	font-weight: 500;
	color: #fdfdfd;
}

.share .sajuContainer .tBox .itemInfo {
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	color: #fdfdfd;
}

.share .sajuContainer .tBox .sajuTitle {
	font-family: var(--font2);
	color: #fdfdfd;
	font-size: 20px;
	margin-bottom: 18px;
}

.share .sajuContainer .tBox .sajuSubtitle {
	color: #fdfdfd;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
	padding-left: 33px;
	position: relative;
}

.share .sajuContainer .tBox .sajuSubtitle::after {
	content: "";
	position: absolute;
	background: url("/tarot/img/result_star.png") no-repeat center / 100% 100%;
	width: 24px;
	height: 24px;
	top: 1px;
	left: 0px;
}

.share .sajuContainer .tBox .sajuDetail {
	color: #fdfdfd;
	font-size: 16px;
	margin-bottom: 20px;
}

.share .sajuContainer .tBox .sajuDetail:last-child {
	margin-bottom: 30px;
}

.share .sajuContainer .introText .bottomText {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.share .sajuContainer .introText .bottomText p {
	margin-bottom: 5px;
	color: #f5f5f5;
	text-align: center;
	font-size: 12px;
}

.share .sajuContainer .introText .bottomText img {
	width: 12px;
	height: 10px;
	object-fit: contain;
}

.share .sajuExplain {
	width: 100%;
	/* height: 100vh;
	height: 100dvh; */
	background: url("/tarot/img/sajuResult.png") no-repeat center / cover;
	overflow-y: scroll;
	padding: 60px 16px 40px;
	/* scroll-snap-align: center; */
}

.share .sajuExplain .sajuBox {
	width: 100%;
	min-height: 180px;
	background-position: bottom;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 10px;
}

.share .sajuExplain .sajuBox .filter {
	background: #00000050;
	width: 100%;
	border-radius: 10px;
	padding: 12px;
	min-height: 180px;
	margin-bottom: 20px;
}

.share .sajuExplain .sajuBox .filter .sajuTitle {
	color: #8a6dff;
	font-family: var(--font2);
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 20px;
	position: relative;
}

.share .sajuExplain .sajuBox .filter .sajuTitle span {
	position: absolute;
	right: 0;
	color: #fdfdfd;
	font-size: 16px;
	font-weight: 500;
}

.share .sajuExplain .sajuBox .filter .sajuDetail {
	color: #fdfdfd;
	font-size: 16px;
	padding-bottom: 20px;
}

.share .sajuExplain .sajuBox .filter .sajuSubtitle {
	color: #8a6dff;
	font-family: var(--font2);
	font-size: 18px;
	margin-bottom: 10px;
}

#result.toast {
	position: absolute;
	top: 100%;
	z-index: 5;
	transition: top 0.5s ease-in-out;
}

#result.toast.open {
	top: 0;
	z-index: 5;
}

.share #result.toast .resultHeader .resultClose {
	padding: 5px;
	background: #00000080;
	position: relative;
	font-size: 0;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.share #result.toast .resultHeader .imgButton2 {
	width: 30px;
	height: 30px;
}

.share #result.toast .resultHeader .imgButton3 {
	width: 18px;
	height: 20px;
}

/* 결과공유 끝 */

/* 사주 */

.sajuItem {
	width: 100%;
	height: 246px;
	padding: 17px 14px;
	background: #fff;
	margin-bottom: 18px;
	border-radius: 12px;
}

.sajuItem .detail {
	width: 100%;
	padding: 0 3px;
	position: relative;
}

.sajuItem .detail .name {
	font-weight: 600;
	font-size: 16px;
	color: var(--black);
	margin-bottom: 12px;
}

.sajuItem .detail .other {
	color: var(--black);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 3px;
	line-height: 24px;
	position: relative;
}

.sajuItem .detail .other span.content {
	color: #696969;
	font-size: 14px;
	font-weight: 500;
}

.sajuItem .detail .other span.lunar,
.sajuItem .detail .other span.yun,
.sajuItem .detail .other span.solar {
	display: inline-block;
	width: 40px;
	height: 22px;
	border-radius: 3px;
	position: relative;
	margin-left: 8px;
	top: 4px;
}

.sajuItem .detail .other span.solar {
	background: #ffdada;
}

.sajuItem .detail .other span.yun {
	background: #c5ffc8;
}

.sajuItem .detail .other span.lunar {
	background: #d4eefe;
}

.sajuItem .detail .other span.solar::after,
.sajuItem .detail .other span.yun::after,
.sajuItem .detail .other span.lunar::after {
	font-size: 13px;
	font-weight: 500;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 13px;
	word-break: keep-all;
}

.sajuItem .detail .other span.solar::after {
	color: #f96868;
	content: "양력";
}

.sajuItem .detail .other span.lunar::after {
	color: #21a8fb;
	content: "음력";
}

.sajuItem .detail .other span.yun::after {
	color: #03b877;
	content: "윤달";
}

.sajuItem .detail span.edit {
	display: inline-block;
	text-decoration: underline;
	font-size: 13px;
	font-weight: 500;
	color: #000;
	position: absolute;
	right: 0;
}

.sajuItem .sajuButton {
	width: 40px;
	height: 100%;
}

.sajuItem .detail .flex {
	display: flex;
}

.sajuItem .detail .close {
	width: 24px;
	height: 24px;
	object-fit: contain;
	top: 0;
	right: 0;
	cursor: pointer;
	position: absolute;
}

.sajuItem .manseButton {
	display: flex;
	border-radius: 12px;
	width: 100%;
	background: #6136bb;
	height: 48px;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
}

.sajuItem .manseButton p {
	font-weight: 500;
	font-size: 15px;
	color: #fdfdfd;
}

#manseModal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	background: #000000bf;
	display: none;
}

#manseModal #userDetail {
	width: 100%;
	height: 40px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

#manseModal #userDetail .close {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
	position: absolute;
}

#manseModal #userDetail .name,
#manseModal #userDetail .birthday {
	text-align: center;
	font-size: 16px;
	color: var(--black);
	font-weight: 500;
}

#manseModal #manseDetail {
	max-width: var(--maxWidth);
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 90%;
	overflow-y: scroll;
}

#manseModal #chatArea {
	padding: 16px;
}

#manseModal #chatArea .chat.ai .content {
	border-radius: 10px;
}

#manseModal #chatArea .chat .sender,
#manseModal #chatArea .chat .time,
#manseModal #chatArea .chat .mate {
	display: none;
}

#manseModal #chatArea .chat.ai {
	padding-right: 0;
}

.sajuAddButton {
	display: block;
	margin: 40px auto;
	width: 49px;
	height: 49px;
	object-fit: contain;
	cursor: pointer;
}

/* 사주 끝 */

/* 재회리포트 */

.reunite.profile .subtitle {
	color: var(--black);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
	padding-left: 0;
}

.reunite.profile .subtitle::after {
	display: none;
}

.reunite .subtitle span {
	font-size: 10px;
	color: #a5a5a5;
	font-weight: 500;
}

.reunite .subtitle2 {
	font-size: 14px;
	color: #4d4d4d;
}

.reunite .tabs {
	margin-top: 25px;
	width: 100%;
	height: 46px;
	display: flex;
}

.reunite .tabs .tab {
	display: flex;
	height: 100%;
	width: 50%;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 8px #c2c2c226;
	background-color: #fff;
}

.reunite .tabs .tab:nth-child(1) {
	border-radius: 8px 0 0 8px;
}

.reunite .tabs .tab:nth-child(2) {
	border-radius: 0 8px 8px 0;
}

.reunite .tabs .tab p {
	font-size: 15px;
	color: #696969;
}

.reunite .tabs .tab.selected {
	background: #4d4d4d;
}

.reunite .tabs .tab.selected p {
	font-weight: 600;
	color: #fff;
}

.reunite .tabContainers {
	width: 100%;
	margin-top: 20px;
}

.reunite .tabContainers .container {
	display: none;
}

.reunite .tabContainers .container.selected {
	display: block;
}

.reunite .tabContainers .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	box-shadow: 0 0 8px #c2c2c226;
	border-radius: 8px;
	margin-bottom: 12px;
	position: relative;
	padding: 0 40px 0 15px;
	height: 50px;
	cursor: pointer;
}

.reunite .tabContainers .item::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid #878787;
	border-right: 1px solid #878787;
	position: absolute;
	right: 21px;
	top: 21px;
	transform: rotate(45deg);
}

.reunite .tabContainers .item p {
	font-size: 14px;
	color: var(--black);
	/* text-align-last: center; */
}

.reunite .tabContainers .item input {
	text-align: right;
	border: none;
	outline: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--black);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	max-width: calc(100% - 90px);
}

.reunite .tabContainers .item input:empty {
	font-size: 14px;
	font-weight: 400;
	color: #878787;
}

main > .profile {
	width: 100%;
	max-width: var(--maxWidth);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 auto;
	transition: transform 0.3s ease-in-out;
	transform: translateX(-100%);
}

main > .profile.show {
	transform: translateX(0);
}

main > .profile .header {
	width: 100%;
	height: 52px;
	background: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 3px #00000010;
}

main > .profile .header .close {
	padding: 5px 5px 0 5px;
	height: 34px;
	width: 34px;
	top: 50%;
	transform: translateY(-50%);
	left: 11px;
	position: absolute;
	background: no-repeat url(/tarot/img/close.png) center / 24px 24px;
}

main > .profile .header p {
	color: #111;
	font-size: 16px;
	font-weight: 700;
}

main > .profile .container {
	padding: 5px 16px 30px 16px;
	background-color: #fdfdfd;
	height: calc(100% - 52px - 102px);
	overflow-y: scroll;
}

main > .profile .container .subBox {
	padding: 35px 0;
	border-bottom: 1px solid #efefef;
}

main > .profile .container .itemList {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 16px;
	position: relative;
}

main > .profile .container .itemList .item {
	display: inline-block;
	padding: 6px 12px;
	color: var(--black);
	font-size: 14px;
	margin: 0 10px 12px 0;
	border: 1px solid #dbdbdb;
	border-radius: 16px;
}

main > .profile .container .itemList input.checkbox {
	display: none;
}

main > .profile .container .itemList > input.number,
main > .profile .container .itemList > input.text {
	outline: none;
	border: none;
	height: 36px;
	width: 110px;
	border-bottom: 1px solid #dbdbdb;
	color: #a5a5a5;
	font-size: 14px;
}

main > .profile .container .itemList .inputText {
	line-height: 36px;
	margin-left: 5px;
	font-size: 14px;
	color: #383838;
}

main > .profile .container .itemList .item:has(input.checkbox:checked) {
	border-color: #cbbcea;
	background-color: #efe8ff;
	color: var(--main);
}

main > .profile .container .itemList .mbtiBox {
	width: calc(25% - 10px);
	margin-right: 13px;
	height: 140px;
}

main > .profile .container .itemList .mbtiBox:last-child {
	margin-right: 0px;
}

main > .profile .container .itemList .mbtiBox .box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 70px;
	width: 100%;
	border: 1px solid #dbdbdb;
}

main > .profile .container .itemList .mbtiBox .box:nth-child(1) {
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

main > .profile .container .itemList .mbtiBox .box:nth-child(2) {
	border-top: none;
	border-radius: 0 0 8px 8px;
}

main > .profile .container .itemList .mbtiBox .box p:nth-child(1) {
	font-size: 20px;
	font-weight: 500;
}

main > .profile .container .itemList .mbtiBox .box p:nth-child(2) {
	font-size: 12px;
	color: #a5a5a5;
}

main
	> .profile
	.container
	.itemList
	.mbtiBox
	.box:has(input.checkbox:checked)
	p:nth-child(1),
main
	> .profile
	.container
	.itemList
	.mbtiBox
	.box:has(input.checkbox:checked)
	p:nth-child(2) {
	color: var(--main);
}

main > .profile .container .itemList .mbtiBox .box:has(input.checkbox:checked) {
	border: 1px solid #cbbcea;
	background: #efe8ff;
}

main > .profile .container .itemList .float {
	display: flex;
	align-items: center;
	height: 20px;
	position: absolute;
	right: 0;
	top: -17px;
	transform: translateY(-100%);
}

main > .profile .container .itemList .float label {
	margin-left: 8px;
	color: var(--black);
	font-size: 12px;
	line-height: 20px;
}

.applyBox {
	width: 100%;
	height: 102px;
	padding: 20px 20px 30px;
	background-color: #fdfdfd;
}

.applyBox .apply {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(90deg, #6a2cd7, #32317d);
}

.applyBox .apply p {
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}

.reuniteContent .surveyList {
	padding-bottom: 40px;
}

.reuniteContent .surveyList > div {
	display: flex;
	height: 136px;
	width: 100%;
	max-width: 450px;
	margin: 0px auto 20px;
}

.reuniteContent .surveyList img {
	border-radius: 8px;
	width: 136px;
	height: 136px;
}

.reuniteContent .surveyList .textArea {
	width: calc(100% - 136px);
	height: 136px;
	padding: 15px 18px;
	display: flex;
	align-items: center;
}

.reuniteContent .surveyList .textArea p {
	color: #fff;
	font-size: 15px;
	line-height: 25px;
}

.reuniteContent .surveyList .textArea p span {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

/* 재회리포트 끝 */

/* 프로필 수정 */

.fateDetail .subtitle {
	font-size: 16px;
	font-weight: 600;
	color: var(--black);
	margin-bottom: 25px;
	position: relative;
}

.fateDetail .inputArea {
	margin-bottom: 40px;
}

.fateDetail .inputArea .heading {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--black);
	margin-bottom: 20px;
	position: relative;
}

.fateDetail .inputArea .heading span {
	font-size: 14px;
	font-weight: 400;
	color: #878787;
}

.fateDetail .inputArea .dnk {
	display: flex;
	align-items: center;
	height: 24px;
}

.fateDetail .inputArea .dnk input[type="checkbox"] {
	appearance: none;
	border-radius: 4px;
	border: 1px solid #dbdbdb;
	margin-right: 8px;
	height: 20px;
	width: 20px;
}

.fateDetail .inputArea .dnk input[type="checkbox"]:checked {
	background: url("/tarot/img/checkbox2.png") no-repeat center / 100% 100%;
}

.fateDetail .inputArea .dnk label {
	font-size: 12px;
	color: var(--black);
	padding-bottom: 2px;
}

.fateDetail .inputArea .box {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
}

.fateDetail .inputArea .box input {
	outline: none;
	border: none;
}

.fateDetail .inputArea .box input.text {
	height: 36px;
	font-size: 14px;
	color: var(--black);
	border-bottom: 1px solid #dbdbdb;
	width: 100%;
}

.fateDetail .inputArea .box input.place {
	width: 100%;
	height: 80px;
	border-radius: 12px;
	text-align: center;
	border: 1px solid #dbdbdb;
}

.fateDetail .inputArea .box .gender {
	box-shadow: 0 0 8px#C2C2C226;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	width: 50%;
	height: 46px;
}

.fateDetail .inputArea .box .gender p {
	color: #a5a5a5;
	font-size: 15px;
}

.fateDetail .inputArea .box .gender input[type="radio"] {
	display: none;
}

.fateDetail .inputArea .box .gender:nth-child(1) {
	border-radius: 8px 0 0 8px;
}

.fateDetail .inputArea .box .gender:nth-child(2) {
	border-radius: 0 8px 8px 0;
}

.fateDetail .inputArea .box .gender:has(input[type="radio"]:checked) {
	background-color: #4d4d4d;
}

.fateDetail .inputArea .box .gender:has(input[type="radio"]:checked) p {
	color: #fff;
}

.fateDetail .inputArea .box .dateType {
	appearance: none;
	border: 1px solid #dbdbdb;
	outline: none;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	margin-right: 8px;
}

.fateDetail .inputArea .box .dateTypeText {
	font-size: 12px;
	color: var(--black);
	margin-right: 20px;
	padding-bottom: 2px;
}

.fateDetail .inputArea .box .dateType:checked {
	background: url("/tarot/img/checkbox2.png") no-repeat center / 100% 100%;
	border: none;
}

.fateDetail .inputArea .box .birth {
	width: calc(33% - 8px);
	height: 80px;
	border-radius: 12px;
	text-align: center;
	color: var(--black);
	border: 1px solid #dbdbdb;
	font-size: 15px;
}

.fateDetail .inputArea .box select {
	outline: none;
	border: 1px solid #dbdbdb;
	border-radius: 12px;
	height: 80px;
	width: calc(50% - 6px);
	text-align: center;
	font-size: 15px;
	color: var(--black);
}

.fateDetail .inputArea .box select option {
	padding: 0 16px;
}

/* 프로필 수정 끝 */

/* 만세력 */
/* 
.manseTable {
	width: 100%;
	padding: 16px;
}

.manseTable .heading {
	height: 30px;
	width: 100%;
	display: flex;
}

.manseTable .heading .empty {
	width: 50px;
}

.manseTable .heading .text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: calc((100% - 50px) / 4);
}

.manseTable .content {
	display: flex;
	width: 100%;
	white-space: unset;
}

.manseTable .content .empty {
	width: 50px;
}

.manseTable .content .empty .box2 {
	height: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.manseTable .content .empty .box2.big {
	height: 80px;
}

.manseTable .content .detail {
	width: calc(100% - 50px);
	border: 1px solid #ccc;
	border-radius: 4px;
}

.manseTable .content .detail .row {
	display: flex;
	height: 30px;
}

.manseTable .content .detail .row .box2 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
	width: calc(100% / 4);
}

.manseTable .content .detail .row.big {
	height: 80px;
} */

/* 만세력 끝 */

/* 커뮤니티 */

main.community {
	background: #fff;
}

.community #searchBox {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 0 18px;
	height: 56px;
	border-bottom: 1px solid #d9d9d9;
}

.community #searchBox #search {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	height: 30px;
	border: none;
	outline: none;
	background: none;
	width: 100%;
}

.community #searchBox #cate {
	color: #6a41bf;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.2px;
	width: 100%;
}

.community #searchBox img {
	cursor: pointer;
	width: 24px;
	height: 24px;
}

.community #rank .notice {
	padding: 0 18px;
	display: flex;
	align-items: center;
	width: 100%;
	height: 54px;
	border-bottom: 1px solid #d9d9d9;
}

.community #rank .notice img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 9px;
}

.community #rank .notice p {
	color: #383838;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.1px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	max-height: 40px;
	line-height: 20px;
	word-break: break-word;
	-webkit-box-orient: vertical;
	cursor: pointer;
}

.community #rank .row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 65px 0 18px;
	width: 100%;
	height: 46px;
	border-bottom: 1px solid #d9d9d9;
	cursor: pointer;
}

.community #rank .row img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 9px;
}

.community #rank .row p {
	font-size: 13px;
	font-weight: 700;
	color: #6a41bf;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	max-height: 34px;
	line-height: 17px;
	word-break: break-word;
	-webkit-box-orient: vertical;
}

.community #rank .row .recomm {
	position: absolute;
	right: 18px;
	color: #a5a5a5;
	font-size: 11px;
}

.community #postArea {
	position: relative;
	min-height: calc(100dvh - 260px);
}

.community #postArea .row {
	width: 100%;
	padding: 14px 18px 12px;
	border-bottom: 1px solid #efefef;
	cursor: pointer;
}

.community #postArea .row h1,
.community #postArea .row h2,
.community #postArea .row h3,
.community #postArea .row h4,
.community #postArea .row h5,
.community #postArea .row h6,
.community #postArea .row p {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	font-size: 12px;
	font-weight: 500;
	max-height: 40px;
	line-height: 20px;
	word-break: break-word;
	-webkit-box-orient: vertical;
	color: #878787;
	margin-bottom: 3px;
}

.community #postArea .row img {
	width: 0;
	height: 0;
	display: none;
}

.community #postArea .row .postTitle {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	max-height: 40px;
	line-height: 20px;
	word-break: break-word;
	-webkit-box-orient: vertical;
	font-size: 13px;
	font-weight: 500;
	color: #383838;
	margin-bottom: 4px;
}

.community #postArea .row .postTitle span {
	margin-left: 4px;
	color: #fb5858;
}

.community #postArea .row .postShort {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	font-size: 12px;
	font-weight: 500;
	max-height: 40px;
	line-height: 20px;
	word-break: break-word;
	-webkit-box-orient: vertical;
	color: #878787;
	margin-bottom: 3px;
}

.community #postArea .row .postInfo {
	font-size: 10px;
	line-height: 17px;
	letter-spacing: -0.2px;
	color: #a5a5a5;
}

.community #postArea .row p:last-child {
	font-size: 10px;
	line-height: 17px;
	letter-spacing: -0.2px;
	color: #a5a5a5;
}
.community #postArea .row p:last-child span {
	margin-right: 9px;
}

.community #postArea .row .postInfo span {
	margin-right: 9px;
}

.community #newPost {
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	left: 100%;
	width: 88px;
	height: 38px;
	cursor: pointer;
	background: #6136bb;
	box-shadow: 0px 1px 5px 0px #00000026;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 5px;
	z-index: 10;
	transform: translate(-30px, -20px);
}

.community #newPost p {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.2px;
}

.community #newPost img {
	width: 24px;
	height: 24px;
	margin-right: 4px;
	object-fit: contain;
}

.community .header {
	display: flex;
	width: 100%;
	height: 52px;
	justify-content: center;
	align-items: center;
	position: relative;
	border-bottom: 1px solid #d6d6d6;
}

.community .header .left {
	position: absolute;
	left: 18px;
}

.community .header .right {
	position: absolute;
	right: 18px;
}

.community .header .hButton p {
	font-size: 15px;
	letter-spacing: -0.2px;
	color: #a5a5a5;
}

.community .header .hButton p.ready {
	color: #383838;
}

.community .header .hButton img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

.community .header .subtitle {
	color: #000;
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.2px;
}

.community #title {
	height: 60px;
	width: 100%;
	font-size: 15px;
	font-weight: 500;
	line-height: 26px;
	color: #383838;
	outline: none;
	border: none;
	border-bottom: 1px solid #efefef;
	padding: 17px 18px;
}

.community .textArea {
	width: 100%;
	font-size: 0;
}

.community .textArea #content {
	width: 100%;
	height: calc(100dvh - 112px);
	padding: 25px 18px;
	font-size: 14px;
	line-height: 24px;
	color: #383838;
	letter-spacing: -0.2px;
	resize: none;
	border: none;
	outline: none;
}

.community .postTitleArea {
	padding: 17px 18px 15px;
	border-bottom: 1px solid #efefef;
}

.community .postTitleArea p:nth-child(1) {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: #333;
	margin-bottom: 6px;
	line-height: 1.7;
}

.community .postTitleArea p:nth-child(2) {
	font-size: 12px;
	letter-spacing: -0.2px;
	font-weight: 500;
	color: #a5a5a5;
	line-height: 1.7;
}

.community .postTitleArea p:nth-child(3) {
	font-size: 12px;
	letter-spacing: -0.2px;
	color: #a5a5a5;
	line-height: 1.7;
}

.community .postTitleArea p:nth-child(3) span {
	margin-right: 10px;
}

.community .postTitleArea p:nth-child(3) span:last-child {
	margin-right: 0;
}

.community .postContentArea {
	width: 100%;
	padding: 18px;
}

.community .postContentArea img {
	max-width: 100%;
}

.community .postContentArea p {
	font-size: 14px;
	line-height: 1.7;
	color: #383838;
	white-space: pre-line;
}

.community .postContentArea a {
	color: #4237eb;
	font-weight: 600;
}

.community .postContentArea .likePos {
	margin-top: 34px;
	margin-bottom: 40px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.community .postContentArea .likePos .lButton {
	width: 106px;
	height: 40px;
	border: 1px solid #a5a5a5;
	transition: border 0.4s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
}

.community .postContentArea .likePos .lButton img {
	width: 13px;
	height: 12px;
	object-fit: contain;
	margin-right: 8px;
}

.community .postContentArea .likePos .lButton p {
	color: #909090;
	font-size: 12px;
	font-weight: 500;
}

.community .postContentArea .likePos .lButton.on {
	border: 3px solid #6136bb;
}

.community .noticeBox .postTitleArea {
	position: relative;
}

.community .noticeBox .postTitleArea img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
	transition: transform 0.4s ease-in-out;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.community .noticeBox.open .postTitleArea img {
	transform: translateY(-50%) rotate(180deg);
}

.community .noticeBox .postContentArea {
	height: 0;
	border-bottom: 1px solid #d6d6d6;
	padding: 0;
	overflow-y: hidden;
}

.community .noticeBox.open .postContentArea {
	height: auto;
	padding: 18px;
}

.community .commentInfo {
	width: 100%;
	height: 42px;
	border-bottom: 1px solid #d6d6d6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
}

.community .commentInfo p {
	font-size: 13px;
	font-weight: 500;
	color: #4d4d4d;
	letter-spacing: -0.2px;
}

.community .commentList {
	width: 100%;
}

.community .commentList .row {
	width: 100%;
	padding: 15px 18px 0;
	border-bottom: 1px solid #efefef;
	position: relative;
}

.community .commentList .row.del {
	display: flex;
	align-items: center;
	padding: 15px 18px 15px;
}

.community .commentList .row.empty p,
.community .commentList .row.del p {
	color: #a5a5a5;
	font-size: 13px;
	line-height: 17px;
	font-weight: 500;
}

.community .commentList .row.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 15px;
}

.community .commentList .row .writer {
	color: #383838;
	font-size: 13px;
	line-height: 1.7;
	font-weight: 500;
	letter-spacing: -0.2px;
	margin-bottom: 5px;
}

.community .commentList .row.depth1,
.community .commentList .row.depth2,
.community .commentList .row.depth3,
.community .commentList .row.depth4 {
	background-image: url("/tarot/img/commentDepth.png");
	background-size: 24px 24px;
	background-repeat: no-repeat;
}

.community .commentList .row.depth1 {
	background-position: left 18px top 15px;
	padding-left: 50px;
}

.community .commentList .row.depth2 {
	background-position: left 33px top 15px;
	padding-left: 65px;
}

.community .commentList .row.depth3 {
	background-position: left 48px top 15px;
	padding-left: 80px;
}

.community .commentList .row.depth4 {
	background-position: left 63px top 15px;
	padding-left: 95px;
}

.community .commentList .row .writer .date {
	font-weight: 400;
	color: #a5a5a5;
	margin-left: 8px;
}

.community .commentList .row .comment {
	color: #383838;
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 4px;
	letter-spacing: -0.2px;
}

.community .commentList .row.depth4 .comment {
	margin-bottom: 16px;
}

.community .commentList .row .reply {
	display: flex;
	cursor: pointer;
	font-weight: 400;
	color: #878787;
	letter-spacing: -0.2px;
	margin-bottom: 16px;
	font-size: 13px;
	line-height: 1.7;
	width: fit-content;
	user-select: none;
}

.community .commentList .row.depth4 .reply {
	display: none;
}

.community .commentList .row.depth4 .replyArea {
	display: none;
}

.community .commentList .row img {
	width: 24px;
	height: 24px;
	cursor: pointer;
	position: absolute;
	top: 14px;
	right: 18px;
}

.community .replyArea {
	font-size: 0;
}

.community .replyArea #replyInputArea {
	margin-bottom: 20px;
}

.community .newComment {
	padding: 16px 18px 60px;
	width: 100%;
	font-size: 0;
}

.community #replyInputArea #replyInput,
.community .newComment #newComment {
	resize: none;
	padding: 10px 15px;
	font-size: 13px;
	line-height: 1.7;
	color: #383838;
	border: 1px solid #c2c2c2;
	border-radius: 3px 3px 3px 3px;
	width: 100%;
	height: 44px;
	outline: none;
}

.community #replyInputArea #replyInput:not(:placeholder-shown),
.community .newComment #newComment:not(:placeholder-shown) {
	border-radius: 3px 3px 0 0;
	height: 90px;
}

.community #replyInputArea .newCommentButton,
.community .newComment .newCommentButton {
	border-left: 1px solid #c2c2c2;
	border-right: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;
	border-radius: 0 0 3px 3px;
	display: none;
	width: 100%;
	height: 40px;
	padding: 0 22px;
}

.community #replyInputArea .newCommentButton p,
.community .newComment .newCommentButton p {
	font-weight: 500;
	color: #383838;
	font-size: 13px;
	cursor: pointer;
}

.community
	#replyInputArea
	#replyInput:not(:placeholder-shown)
	~ .newCommentButton,
.community .newComment #newComment:not(:placeholder-shown) ~ .newCommentButton {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.community .scrollArea {
	width: 100%;
	height: calc(100% - 52px);
	overflow-y: scroll;
}

.layout2 .community #searchBox #cate {
	color: #fdfdfd;
}

.layout2 .community #postArea .row .postTitle {
	color: #fdfdfd;
}

.layout2 .community #postArea .row h1,
.layout2 .community #postArea .row h2,
.layout2 .community #postArea .row h3,
.layout2 .community #postArea .row h4,
.layout2 .community #postArea .row h5,
.layout2 .community #postArea .row h6,
.layout2 .community #postArea .row p {
	color: #ddd;
}

/* 커뮤니티 끝 */

/* 버튼 */

.button {
	width: 100%;
	height: 54px;
	border-radius: 10px;
	color: #fff;
	background-color: var(--main);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	box-shadow: 1px 1px 5px #00000026;
}

.button.white {
	background-color: #fff;
	color: #53008f;
}

.button.white2 {
	background-color: #fff;
	color: #53008f;
	border: 2px solid var(--main);
}

.button.disabled {
	pointer-events: none;
	user-select: none;
	background-color: #c2c2c2;
}

.button .icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 10px;
}

.newCheck {
	width: 20px;
	height: 20px;
	appearance: none;
	background: url("/tarot/img/checkOff.png") no-repeat center / 100% 100%;
}

.newCheck:checked {
	background: url("/tarot/img/checkOn.png") no-repeat center / 100% 100%;
}

/* 버튼 끝 */

/* 기타 */

.postForm {
	width: 100%;
}

.subHeader {
	width: 100%;
	height: 52px;
	background: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 1px 3px #00000010;
}

.subHeader.gray {
	box-shadow: none;
	background: #f9f9f9;
}

.subHeader #backButton {
	padding: 5px 5px 0 5px;
	height: 34px;
	width: 34px;
	top: 50%;
	transform: translateY(-50%);
	left: 11px;
	position: absolute;
	background: no-repeat url("/tarot/img/back.png") center / 24px 24px;
}

.pastlife .subHeader #backButton {
	background: no-repeat url("/tarot/img/back2.png") center / 24px 24px;
}

.subHeader #backButton img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
}

.subHeader p {
	color: #111;
	font-size: 16px;
	font-weight: 700;
}

.subHeader2 {
	width: 100%;
	height: 52px;
	background: #232323;
	position: relative;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	padding-left: 42px;
}

.subHeader2 #backButton {
	padding: 5px 5px 0 5px;
	height: 34px;
	width: 34px;
	top: 50%;
	transform: translateY(-50%);
	left: 11px;
	position: absolute;
	background: no-repeat url(/tarot/img/backw.png) center / 24px 24px;
}

.subHeader2 .addButton {
	width: 24px;
	height: 24px;
	object-fit: contain;
	cursor: pointer;
	position: absolute;
	top: 16px;
	right: 16px;
}

.subHeader2 p {
	font-size: 16px;
	font-weight: 700;
	color: #f9f9f9;
}

.pastlife .subHeader p {
	color: #fff;
}

#chat .subHeader p {
	position: absolute;
	top: 50%;
	left: 60px;
	transform: translateY(-50%);
}

main.sunny {
	display: flex;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

main.sunny .mainTitle3 {
	color: var(--black);
	font-family: var(--font);
	font-size: 24px;
}

main.sunny .mainTitle2 {
	color: var(--main);
	font-family: var(--font);
	font-size: 48px;
}

main.sunny .mainTitle3 {
	color: #dfdfdf;
	font-family: var(--font);
	font-size: 22px;
	text-align: center;
	margin-top: 10px;
}

main.sunny .logo {
	width: 220px;
}

main.sunny .card {
	width: 180px;
	margin: 20px 0;
	animation: shaking 10s infinite alternate ease-in-out;
}

main.sunny #enter {
	width: 260px;
	cursor: pointer;
}

@keyframes shaking {
	0% {
		transform: translateY(0px) rotate(-5deg);
	}
	100% {
		transform: translateY(-10px) rotate(5deg);
	}
}

.goldBorder {
	width: calc(100% - 80px);
	height: 1px;
	background: #ffd400;
	position: relative;
}

.goldBorder::after {
	width: 11px;
	height: 11px;
	position: absolute;
	background: url("/tarot/img/goldBorderStar.png") no-repeat center / 100% 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
}

.goldBorder > div {
	background: #ffd400;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.goldBorder > div:nth-child(1) {
	left: -22px;
}

.goldBorder > div::after {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ffd400;
	position: absolute;
	content: "";
}

.goldBorder > div:nth-child(1)::after {
	left: 11px;
}

.goldBorder > div:nth-child(2) {
	right: -22px;
}

.goldBorder > div:nth-child(2)::after {
	right: 11px;
}

.tarot .logo {
	width: 120px;
	height: 51px;
	object-fit: contain;
}

.tarot .switchText {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 0;
	height: 180px;
}

.tarot .switchText .subText {
	color: #ffffffb2;
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
}

.tarot .switchText .mainText1 {
	color: #fdfdfd;
	font-size: 24px;
	text-align: center;
	font-family: var(--font4);
}

.tarot .switchText .mainText2 {
	color: #fdfdfd;
	font-size: 32px;
	text-align: center;
	font-family: var(--font4);
}

.homeButton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 85%;
	max-width: 500px;
	border-radius: 12px;
	background: #6136bb;
	margin: 0 auto;
}

.homeButton img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	margin-right: 6px;
}

.homeButton p {
	font-size: 14px;
	font-weight: 700;
	color: #fdfdfd;
}

/* 기타 끝 */

/* 풋터 */

footer {
	position: relative;
}

footer p {
	padding: 6px;
	color: #8d909f;
	font-size: 14px;
}

/* 풋터 끝 */

/* scrollbar */

::-webkit-scrollbar {
	width: 4px;
	height: 0px;
}

::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: var(--main);
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

.nos::-webkit-scrollbar {
	appearance: none;
	display: none;
}

.nos::-webkit-scrollbar-thumb {
	appearance: none;
	display: none;
}

.nos::-webkit-scrollbar-track {
	appearance: none;
	display: none;
}

/* scrollbar end */

/* loading */

#loading {
	width: 100vw;
	height: 100vh;
	z-index: 30;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	background: rgba(255, 255, 255, 0.85);
	justify-content: center;
	align-items: center;
}

#loading.show {
	display: flex;
}

#loading .box {
	width: 120px;
	height: 120px;
	display: flex;
	justify-content: center;
	position: relative;
	animation: loadingBox 3s linear infinite forwards;
}

#loading .box .dot {
	border-radius: 50%;
}

#loading .box .dot:nth-child(1) {
	position: absolute;
	top: 24px;
	width: 18px;
	height: 18px;
	animation: loadingDot2 3s linear infinite forwards;
}

#loading .box .dot:nth-child(2) {
	position: absolute;
	bottom: 24px;
	width: 36px;
	height: 36px;
	animation: loadingDot1 3s linear infinite forwards;
}

@keyframes loadingBox {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes loadingDot1 {
	0% {
		width: 36px;
		height: 36px;
		background: #1f39f0;
	}
	25% {
		width: 26px;
		height: 26px;
		background: #96a2f8;
	}
	50% {
		width: 18px;
		height: 18px;
		background: #a585e0;
	}
	75% {
		width: 26px;
		width: 26px;
		background: #9591ee;
	}
	100% {
		width: 36px;
		height: 36px;
		background: #1f39f0;
	}
}

@keyframes loadingDot2 {
	0% {
		width: 18px;
		height: 18px;
		background: #a585e0;
	}
	25% {
		width: 26px;
		height: 26px;
		background: #96a2f8;
	}
	50% {
		width: 36px;
		height: 36px;
		background: #1f39f0;
	}
	75% {
		width: 26px;
		width: 26px;
		background: #9591ee;
	}
	100% {
		width: 18px;
		height: 18px;
		background: #a585e0;
	}
}

/* loading end */

/* 반응형 */

@media (min-width: 767px) and (min-height: 730px) {
	/* main.flex {
		justify-content: center;
	} */
}

@media (max-width: 767px) {
	main.tarot {
		max-width: unset;
	}

	main.flex {
		padding-top: 20px;
		justify-content: flex-start;
	}
}

@media (max-width: 700px) {
	/* .subContainer .content .choice {
		width: calc(33% - 5px);
	} */

	.subContainer .content .choice .mate {
		height: 250px;
	}

	.subContainer .content .choice.dummy.four {
		display: none;
	}
}

@media (max-width: 530px) {
	.subContainer .content .choice {
		width: calc(50% - 5px);
	}

	.subContainer .content .choice .mate {
		height: 220px;
	}

	.subContainer .content .choice.dummy.one {
		display: none;
	}

	.subContainer .content .choice.dummy.two {
		display: none;
	}

	.subContainer .content .choice.dummy.three {
		display: none;
	}
}

@media (max-width: 430px) {
	.subContainer .content .choice .mate {
		height: 180px;
	}
}

/* 반응형 끝 */

/* animate button */

.buttonEnter {
	--top: rgba(100, 100, 100, 0.8);
	--bottom: rgba(100, 100, 100, 0.2);
	--side: rgba(100, 100, 100, 0.5);

	--1_top: rgba(216, 0, 60, 0.8);
	--1_bottom: rgba(216, 0, 60, 0.2);
	--1_side: rgba(216, 0, 60, 0.5);

	--2_top: rgba(0, 100, 190, 0.8);
	--2_bottom: rgba(0, 100, 190, 0.2);
	--2_side: rgba(0, 100, 190, 0.5);

	--3_top: rgba(0, 170, 100, 0.8);
	--3_bottom: rgba(0, 170, 100, 0.2);
	--3_side: rgba(0, 170, 100, 0.5);

	--4_top: rgba(255, 230, 20, 0.8);
	--4_bottom: rgba(255, 230, 20, 0.2);
	--4_side: rgba(255, 230, 20, 0.5);

	--5_top: rgba(155, 50, 255, 0.8);
	--5_bottom: rgba(155, 50, 255, 0.2);
	--5_side: rgba(155, 50, 255, 0.5);
}

.buttonEnter {
	display: flex;
	position: relative;
	width: 280px;
	height: 80px;
	text-decoration: none;
	perspective: 600px;
	background: linear-gradient(
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0) 70%,
		rgba(255, 255, 255, 0.1)
	);
	box-shadow: 0 0 32px rgba(0, 0, 0, 1);
	margin-bottom: 40px;
}
.buttonEnter::before,
.buttonEnter::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}
.buttonEnter::before {
	top: 0;
	transform-origin: top center;
	transform: rotateX(70deg);
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.3) 10%,
		rgba(255, 255, 255, 0) 60%
	);
}
.buttonEnter::after {
	bottom: 0;
	transform-origin: bottom center;
	transform: rotateX(-110deg);
	background: radial-gradient(
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.1)
	);
}
.buttonEnter__wrapper {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		rgba(255, 255, 255, 0.4) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0) 70%,
		rgba(255, 255, 255, 0.2)
	);
	transform: translate3d(0, 27px, 74px);
	perspective: 600px;
}
.buttonEnter__text {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--font);
	font-size: 48px;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, 0.2);
	transition: all ease-in-out 1s;
}
.buttonEnter__text::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 230px;
	height: 80px;
	background: linear-gradient(
		25deg,
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0)
	);
	clip-path: path("M230,0H0V80H146.96c0-35.33,33.95-65.83,83.04-80Z");
}
.buttonEnter__text::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 4px;
	left: 4px;
	width: 272px;
	height: 40px;
	background: linear-gradient(
		25deg,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0)
	);
	clip-path: path("M272,9.22V0H0V40H.32C48.19,22.59,151.14,10.26,272,9.22Z");
}
.buttonEnter__wrapper::before,
.buttonEnter__wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	width: 84px;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0) 70%,
		rgba(255, 255, 255, 0.2)
	);
	background: radial-gradient(
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0.1)
	);
}
.buttonEnter__wrapper::before {
	left: 0;
	transform-origin: left center;
	transform: rotateY(90deg) skewY(-20deg);
}
.buttonEnter__wrapper::after {
	right: 0;
	transform-origin: right center;
	transform: rotateY(-90deg) skewY(20deg);
}

.buttonEnter__box {
	position: absolute;
	top: 0;
	left: 8px;
	bottom: 0;
	margin: auto 0;
	width: 264px;
	height: 70px;
	transform: translate3d(0, 4px, 10px);
	perspective: 600px;
}
.inner {
	transition: all ease-in-out 1s;
}
.inner__back {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--bottom);
	perspective: 600px;
}
.inner__top {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transform-origin: top left;
	transform: rotateX(70deg);
	background: var(--top);
}
.inner__front {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transform-origin: top left;
	transform: translate3d(0, 24px, 68px);
	background: var(--top);
}
.inner__bottom {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	transform-origin: bottom left;
	transform: rotateX(-110deg);
	background: var(--bottom);
}
.inner__left {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 68px;
	height: 100%;
	transform-origin: center left;
	transform: rotateY(-90deg) skewY(20deg);
	background: rgba(255, 0, 0, 0);
	transition: all linear 0.01s;
}
.inner__right {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 68px;
	height: 100%;
	transform-origin: center left;
	transform: rotateY(-90deg) skewY(20deg);
	background: rgba(255, 0, 0, 0);
}
.buttonEnter:hover .inner__top,
.buttonEnter:hover .inner__front,
.buttonEnter:hover .inner__bottom,
.buttonEnter:hover .inner__back {
	width: 100%;
}
.buttonEnter:hover .inner__left {
	background: var(--side);
}
.buttonEnter:hover .inner__right {
	left: 100%;
	background: var(--side);
}
.buttonEnter:hover .buttonEnter__text {
	color: rgba(255, 255, 255, 1);
}
.plate {
	position: absolute;
	z-index: 10;
	top: 0;
	left: -20px;
	width: 320px;
	height: 120px;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.plate:nth-child(1) {
	animation-name: plate_1;
}
.plate:nth-child(2) {
	animation-name: plate_2;
}
.plate:nth-child(3) {
	animation-name: plate_3;
}
.plate:nth-child(4) {
	animation-name: plate_4;
}
.plate:nth-child(5) {
	animation-name: plate_5;
}
.buttonEnter:hover .plate {
	animation-play-state: paused;
}
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__top,
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__front {
	background: var(--1_top);
}
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__left,
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__right {
	background: var(--1_side);
}
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__back,
.plate:nth-child(1):hover ~ .buttonEnter__box .inner__bottom {
	background: var(--1_bottom);
}
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__top,
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__front {
	background: var(--2_top);
}
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__left,
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__right {
	background: var(--2_side);
}
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__back,
.plate:nth-child(2):hover ~ .buttonEnter__box .inner__bottom {
	background: var(--2_bottom);
}
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__top,
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__front {
	background: var(--3_top);
}
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__left,
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__right {
	background: var(--3_side);
}
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__back,
.plate:nth-child(3):hover ~ .buttonEnter__box .inner__bottom {
	background: var(--3_bottom);
}
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__top,
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__front {
	background: var(--4_top);
}
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__left,
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__right {
	background: var(--4_side);
}
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__back,
.plate:nth-child(4):hover ~ .buttonEnter__box .inner__bottom {
	background: var(--4_bottom);
}
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__top,
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__front {
	background: var(--5_top);
}
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__left,
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__right {
	background: var(--5_side);
}
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__back,
.plate:nth-child(5):hover ~ .buttonEnter__box .inner__bottom {
	background: var(--5_bottom);
}
@keyframes plate_1 {
	0% {
		transform: scale(1);
	}
	19.9% {
		transform: scale(1);
	}
	20% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes plate_2 {
	0% {
		transform: scale(0);
	}
	19.9% {
		transform: scale(0);
	}
	20% {
		transform: scale(1);
	}
	39.9% {
		transform: scale(1);
	}
	40% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes plate_3 {
	0% {
		transform: scale(0);
	}
	39.9% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
	59.9% {
		transform: scale(1);
	}
	60% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes plate_4 {
	0% {
		transform: scale(0);
	}
	59.9% {
		transform: scale(0);
	}
	60% {
		transform: scale(1);
	}
	79.9% {
		transform: scale(1);
	}
	80% {
		transform: scale(0);
	}
	100% {
		transform: scale(0);
	}
}
@keyframes plate_5 {
	0% {
		transform: scale(0);
	}
	79.9% {
		transform: scale(0);
	}
	80% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

/* animate button */

#swiper a.tarotCard {
	font-size: 0;
}

#swiper a {
	display: block;
	border: 1px solid var(--main);
	border-radius: 10px;
}
#swiper .preview {
	width: 100%;
	border-radius: 10px;
}

/* 사주 커스텀 */

#chat.saju .subHeader {
	background: #383838;
}

#chat.saju #starBox.fixed {
	background: #383838;
	z-index: 2;
}

#chat.saju #chatContainer {
	background: #232323;
}

#chat.saju .subHeader #backButton {
	background: no-repeat url(/tarot/img/backw.png) center / 24px 24px;
}

#chat.saju .subHeader p {
	color: #fdfdfd;
}

#chat.saju #chatInput {
	background: #383838;
}

#chat.saju #chatInput textarea {
	background: #878787;
	border: 1px solid #696969;
	color: #fdfdfd;
}

#chat.saju #chatInput textarea::placeholder {
	color: #ccc;
	opacity: 1;
}

#chat.saju #chatArea .chat .sender {
	color: #fdfdfd;
}

/* main.saju .subHeader {
	background: none;
	position: fixed;
	top: 0;
	z-index: 2;
	box-shadow: none;
	max-width: var(--maxWidth);
}

main#chat.saju .subHeader {
	position: relative;
}

main.saju .subHeader #backButton {
	background: no-repeat url(/tarot/img/backw.png) center / 24px 24px;
}

main.saju .subHeader p {
	color: #fdfdfd;
}

main.saju .tarotDetail .bgBox {
	min-height: 360px;
	padding-top: 30px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

main.saju #container.tarotDetail {
	height: calc(100vh - 76px);
	height: calc(100dvh - 76px);
	background: #fff;
}

main.saju .tarotDetail .bgBox .title1 {
	color: #fdfdfd;
	padding: 16px;
	text-align: center;
	font-size: 22px;
	font-family: var(--font2);
}

main.saju .starPos {
	width: 100%;
	max-width: var(--maxWidth);
	position: fixed;
	top: 36px;
	height: 28px;
	z-index: 1;
}

main.saju .starPos .star {
	background: #0000004d;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	height: 28px;
	padding: 0 6px 1px;
} */

/* .tarotDetail .star.top {
	top: 16px;
	bottom: unset;
}

main.saju .starPos .star p {
	color: #fdfdfd;
} */
/* 
main.saju .counterBox {
	width: unset;
	height: 20px;
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 16px;
	right: 16px;
	border-bottom: none;
}

main.saju .counterBox > div {
	flex-direction: row;
	height: 100%;
	margin-right: 10px;
}

main.saju .counterBox > div:last-child {
	margin-right: 0;
}

main.saju .counterBox > div img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-right: 4px;
}

main.saju .counterBox > div p {
	font-size: 12px;
	color: #f9f9f9;
	padding-bottom: 2px;
} */

main.saju .tarotDetail {
	padding: 0;
	background: #fff;
}

main.saju .tarotDetail .details {
	padding: 0 16px;
}

main.saju .tarotDetail .details .box {
	padding: 40px 0px;
	border-bottom: 1px solid #b88d92;
}

main.saju .tarotDetail .details .box:nth-child(4) {
	border-top: 1px solid #b88d92;
}

main.saju .tarotDetail .details .box::after {
	content: "";
	position: absolute;
	bottom: -16px;
	background: url(/tarot/img/detail_saju_box.png) center / 29px 16px;
	width: 29px;
	height: 16px;
	transform: translate(-50%, -50%);
	left: 50%;
}

main.saju .tarotDetail .details .box:nth-child(4)::before {
	content: "";
	position: absolute;
	top: 0px;
	background: url(/tarot/img/detail_saju_box.png) center / 29px 16px;
	width: 29px;
	height: 16px;
	transform: translate(-50%, -50%);
	left: 50%;
}

main.saju .tarotDetail .details .box#detailAccord,
main.saju .tarotDetail .details .box.detailAccord {
	border-bottom: none;
}

main.saju .tarotDetail .details .box#detailAccord::after,
main.saju .tarotDetail .details .box.detailAccord::after {
	display: none;
}

main.saju .tarotDetail .launchEvent {
	width: 100%;
	height: 26px;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

main.saju .tarotDetail .launchEvent p:nth-child(1) {
	color: #efefef;
	font-size: 14px;
	line-height: 14px;
	background: #383838;
	font-weight: 500;
	padding: 6px;
	border-radius: 4px;
	margin-right: 6px;
}

main.saju .tarotDetail .launchEvent p:nth-child(2) {
	color: #ff0000;
	font-size: 14px;
	line-height: 14px;
	background: #ff000029;
	font-weight: 500;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid #ff0000;
}

main.saju .tarotDetail .product_title {
	color: #fdfdfd;
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 10px;
}

main.saju .tarotDetail .priceBox {
	display: flex;
	align-items: center;
}

main.saju .tarotDetail .priceBox > img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-right: 4px;
}

main.saju .tarotDetail .priceBox p.priceBefore {
	font-size: 20px;
	line-height: 20px;
	font-weight: 500;
	color: #878787;
	text-decoration: line-through;
	margin-right: 4px;
}

main.saju .tarotDetail .priceBox p.priceAfter {
	font-size: 20px;
	line-height: 20px;
	font-weight: 500;
	color: #fdfdfd;
}

main.saju .border {
	width: 100%;
	height: 8px;
	background: #151515;
}

.tarotDetail .priceUp {
	background: #8a6dff29;
	padding: 4px 10px 4px 16px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 12px;
	color: #8a6dff;
	font-weight: 500;
	margin-top: 10px;
	display: inline-block;
	position: relative;
}

.tarotDetail .priceUp::after {
	position: absolute;
	left: -3px;
	top: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: url("/tarot/img/priceUp.png") no-repeat center / contain;
}

main.saju .tarotDetail .subtitle {
	font-size: 16px;
	font-weight: 600;
	color: #383838;
}

main.saju .tarotDetail .subtitle.center {
	/* text-align: center; */
}

main.saju .tarotDetail .subtitle.check {
	padding-left: 0px;
	margin-bottom: 10px;
}

main.saju .tarotDetail .subtitle.check::after {
	display: none;
}

/* main.saju .tarotDetail .subtitle.check::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url("/tarot/img/product/sajuCheck.png") no-repeat center / 10px
		7px;
} */

main.saju .tarotDetail .text {
	font-size: 14px;
	color: #696969;
	margin-bottom: 18px;
}

main .tarotDetail .listNum {
	font-size: 14px;
	color: #696969;
	margin-bottom: 10px;
	padding-left: 24px;
	position: relative;
}

main .tarotDetail .listNum:last-child {
	margin-bottom: 18px;
}

main .tarotDetail .listNum::after {
	content: attr(data-num);
	font-size: 14px;
	font-weight: 500;
	position: absolute;
	left: 4px;
	top: 0px;
}

main .tarotDetail .text:last-child {
	margin-bottom: 0;
}

main.saju .tarotDetail .text strong {
	margin-bottom: 10px;
}

main.saju .tarotDetail .box > img {
	width: 100%;
	object-fit: contain;
	margin-bottom: 10px;
}

main.saju .tarotDetail ul {
	margin-bottom: 10px;
}

main.saju .tarotDetail ul li {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.tarotDetail .analytics {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
}

.tarotDetail .analytics .item {
	width: calc(50% - 5px);
	background: #fff;
	border: 1px solid #b481fb;
	border-radius: 10px;
	padding: 44px 10px 14px;
	margin-bottom: 10px;
	position: relative;
}

.tarotDetail .analytics .item::after {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 20px;
	left: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tarotDetail .analytics .item.total::after {
	background-image: url("/tarot/img/product/item_total.png");
}

.tarotDetail .analytics .item.love::after {
	background-image: url("/tarot/img/product/item_love.png");
}

.tarotDetail .analytics .item.fin::after {
	background-image: url("/tarot/img/product/item_financial.png");
}

.tarotDetail .analytics .item.health::after {
	background-image: url("/tarot/img/product/item_health.png");
}

.tarotDetail .analytics .item.event::after {
	background-image: url("/tarot/img/product/item_event.png");
}

.tarotDetail .analytics .item.monthly::after {
	background-image: url("/tarot/img/product/item_monthly.png");
}

.tarotDetail .analytics .item .subtitle {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	color: #7c42af;
}

.tarotDetail .analytics .item .text {
	font-size: 12px;
	color: #878787;
	line-height: 20px;
	font-weight: 400;
}

main.saju .tarotDetail .benefit {
	display: flex;
	justify-content: center;
}

main.saju .tarotDetail .benefit > div {
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	margin: 0px 5px 60px;
	border: 1px solid #dbc5c8;
}

main.saju .tarotDetail .benefit > div::after {
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: #4d4d4d;
	position: absolute;
	bottom: -10px;
	word-break: keep-all;
	transform: translateY(100%);
	width: 100%;
	letter-spacing: -0.1px;
}

main.saju .tarotDetail .benefit > div.guide {
	background-image: url("/tarot/img/product/benefit_guide.png");
}

main.saju .tarotDetail .benefit > div.guide::after {
	content: "구체적인 가이드";
}

main.saju .tarotDetail .benefit > div.strategy {
	background-image: url("/tarot/img/product/benefit_strategy.png");
}

main.saju .tarotDetail .benefit > div.strategy::after {
	content: "맞춤형 전략";
	/* bottom: -18px; */
}

main.saju .tarotDetail .benefit > div.stability {
	background-image: url("/tarot/img/product/benefit_stability.png");
}

main.saju .tarotDetail .benefit > div.stability::after {
	content: "심리적 안정감";
}

main.saju .tarotDetail .benefit > div.knowledge {
	background-image: url("/tarot/img/product/benefit_knowledge.png");
}

main.saju .tarotDetail .benefit > div.knowledge::after {
	content: "기본적인 명리학 지식";
}

main.saju .tarotDetail .count {
	padding: 15px 12px 15px 36px;
	font-size: 15px;
	font-weight: 500;
	color: #696969;
	margin-bottom: 12px;
	line-height: 20px;
	border-radius: 10px;
	background: #ebe4e5;
}

main.saju .tarotDetail .count span {
	color: #878787;
	font-size: 12px;
	line-height: 20px;
}

main.saju .tarotDetail .count::after {
	font-size: 14px;
	font-family: var(--font3);
	top: 14px;
	left: 12px;
	color: #8c545b;
}

main.saju .tarotDetail .info {
	font-family: var(--font2);
	font-size: 18px;
	line-height: 27px;
	color: #696969;
	text-align: center;
	padding: 0 16px;
}

main.saju .tarotDetail .info span {
	color: #696969;
	font-family: var(--font2);
}

main.saju .tarotDetail .target {
	padding: 0 8px;
}

main.saju .tarotDetail .target p {
	margin-bottom: 10px;
	line-height: 21px;
	width: 100%;
	color: #4d4d4d;
	font-size: 14px;
	font-weight: 500;
	border-radius: 22px;
	padding-left: 28px;
	position: relative;
}

main.saju .tarotDetail .target p::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url(/tarot/img/detail_taegeuk.png) no-repeat center / contain;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
}

main.saju .tarotDetail .target p:last-child {
	margin-bottom: 0px;
}

/* main.saju .tarotDetail .target p:first-child {
	border: 1px solid #000;
	line-height: 42px;
} */

main.saju .tarotDetail.padding {
	padding: 16px;
	background-color: #f9f9f9;
}

/* main.saju .tarotDetail .graphText .small {
	color: #6136bb;
	font-weight: 500;
} */

main.saju .tarotDetail .graphText .big {
	font-size: 18px;
	font-weight: 600;
	color: #4d4d4d;
}

main.saju .tarotDetail .graphText .sub {
	color: #6136bb;
	font-weight: 500;
}

main.saju .tarotDetail .graphText2 .text p {
	color: #383838;
}

main.saju .buttomButton {
	background: #fff;
}

main.saju .reviewBox .userComment .text {
	color: #4d4d4d;
}

main.saju .reviewBox .userComment .detail .user {
	color: #383838;
}

/* 사주 커스텀 끝 */

/* 메인 커스텀 */

main.dark {
	background: #232323;
}

main.dark .subContainer .product {
	background: #383838;
}

main.dark .subContainer .title {
	color: #f9f9f9;
}

main.dark .subContainer .product .textBox .title4 {
	color: #f9f9f9;
}

main.dark .subContainer .product .textBox .star p {
	color: #f9f9f9;
}

main.dark .subContainer .product .textBox .counter p {
	color: #c9c9c9;
}

main.dark .index .currentStar .box span {
	color: #f9f9f9;
}
/* 메인 커스텀 끝 */

/* 기본 모달 */

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #00000080;
	z-index: 10;
}

.modal .main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
	overflow: hidden;
}

.modal .main .content {
	width: 278px;
	height: 360px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.modal .gra {
	background: linear-gradient(#000000d4 0%, #ffffff0a 100%);
	position: relative;
	width: 100%;
	height: 100%;
}

.modal .main .gra {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
}

.modal .main .starBox {
	height: 35px;
	width: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #3a0064 0%, #6136bb 100%);
	border-radius: 16px;
	margin-bottom: 16px;
	margin-top: 50px;
}

.modal .main .starBox img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

.modal .main .starBox p {
	font-size: 14px;
	font-weight: 700;
	color: #f9f9f9;
	margin-left: 5px;
	padding-bottom: 3px;
}

.modal .main .big {
	font-family: var(--font2);
	font-size: 23px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}

.modal .main .big span {
	color: #ffd400;
	font-family: var(--font2);
}

.modal .main .small {
	font-size: 13px;
	color: #fff;
	text-align: center;
	margin-top: 15px;
}

.modal .modalButton {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	background: linear-gradient(90deg, #3a0064 0%, #6136bb 100%);
	position: relative;
	top: -1px;
}

.modal .modalButton p {
	font-size: 16px;
	color: #fff;
	font-family: var(--font2);
}

#savePro {
	position: absolute;
	transform: translateX(-100%);
	top: 6px;
	left: -10px;
	font-size: 15px;
	font-weight: 500;
	display: none;
}

.modal#genderModal .main {
	width: 250px;
	height: 240px;
	border-radius: 10px;
	background: #eee;
	padding: 16px;
}

.modal#genderModal .main .info {
	font-size: 11px;
	color: #a5a5a5;
}

.modal#genderModal .main .flex {
	margin-top: 14px;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.modal#genderModal .main .flex .genderSelect {
	width: calc(50% - 5px);
	height: 150px;
	border: 1px solid #555;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.3);
}

.modal#genderModal .main .flex .genderSelect p {
	font-size: 14px;
	font-weight: 500;
	color: #00000099;
}

.modal#genderModal .main .flex .genderSelect:nth-child(1) {
	background: #cedaf5;
}

.modal#genderModal .main .flex .genderSelect:nth-child(2) {
	background: #ffd7d7;
}

/* 기본 모달 끝 */

/* 로그인 모달 */

#loginModal {
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #00000099;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
}

#loginModal.show {
	display: block;
}

#loginModal .content {
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	position: absolute;
	padding: 35px 16px 25px;
	bottom: 0;
	left: 50%;
	background: #fff;
	border-radius: 20px 20px 0 0;
	transform: translate(-50%, 100%);
	transition: transform 0.4s ease-in-out;
}

#loginModal .content.show {
	transform: translate(-50%, 0%);
}

#loginModal .content .close {
	width: 24px;
	height: 24px;
	object-fit: contain;
	position: absolute;
	cursor: pointer;
	top: 25px;
	right: 20px;
}

#loginModal .content .textArea {
	padding: 8px;
}

#loginModal .content .textArea .logo {
	width: 86px;
	object-fit: contain;
	margin-bottom: 17px;
}

#loginModal .content .textArea .text1 {
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 6px;
	color: #000;
}

#loginModal .content .textArea .text2 {
	color: #696969;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 24px;
}

#loginModal .content .textArea .balloon {
	width: 216px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	position: relative;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 5px;
}

#loginModal .content .textArea .balloon .square {
	width: 12px;
	height: 12px;
	border-bottom: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	background: #fff;
	position: absolute;
	transform: translate(-50%, -50%) rotate(45deg);
	bottom: -12px;
}

#loginModal .content .textArea .balloon p {
	color: #4d4d4d;
	font-size: 14px;
	font-weight: 500;
}

#loginModal .content .loginButtons {
	width: 100%;
}

#loginModal .content .loginButtons a {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

#loginModal .content .loginButtons a img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	margin-right: 10px;
}

#loginModal .content .loginButtons a p {
	font-size: 14px;
	font-weight: 700;
}

#loginModal .content .loginButtons a.naver {
	background-color: #2eb401;
}

#loginModal .content .loginButtons a.naver p {
	color: #ffffff;
}

#loginModal .content .loginButtons a.kakao {
	background-color: #f5e14b;
}

#loginModal .content .loginButtons a.kakao p {
	color: #381f1f;
}

/* 로그인 모달 끝 */

/* 글 옵션 모달 */

#detailOption2,
#detailOption {
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #00000099;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
}

#detailOption2.show,
#detailOption.show {
	display: block;
}

#detailOption2 .content,
#detailOption .content {
	width: 100%;
	max-width: 500px;
	min-width: 280px;
	position: absolute;
	padding: 35px 16px 25px;
	bottom: 0;
	left: 50%;
	background: #fff;
	border-radius: 20px 20px 0 0;
	transform: translate(-50%, 100%);
	transition: transform 0.4s ease-in-out;
}

#detailOption2 .content.show,
#detailOption .content.show {
	transform: translate(-50%, 0%);
}

#detailOption2 .content .close,
#detailOption .content .close {
	width: 24px;
	height: 24px;
	object-fit: contain;
	position: absolute;
	cursor: pointer;
	top: 25px;
	right: 20px;
}

#detailOption2 .content > p,
#detailOption .content > p {
	padding: 11px 5px;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	cursor: pointer;
}

#detailOption2 .content > p.red,
#detailOption .content > p.red {
	color: #ff3838;
}

#detailOption2 .content > p.main,
#detailOption .content > p.main {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: #000;
	padding: 0 5px;
	margin-bottom: 20px;
}

#detailOption2 .content > p.sub,
#detailOption .content > p.sub {
	font-size: 12px;
	line-height: 1.4;
	color: #000;
	padding: 0 5px;
	margin-bottom: 16px;
}

#detailOption2 .content > .close,
#detailOption .content > .close {
	width: 24px;
	height: 24px;
}

/* 글 옵션 모달 끝 */

/* 기본 토스트 모달 */

.toastModal {
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #00000099;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
}

.toastModal.show {
	display: block;
}

.toastModal .content {
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	position: absolute;
	padding: 35px 16px 25px;
	bottom: 0;
	left: 50%;
	background: #fff;
	border-radius: 20px 20px 0 0;
	transform: translate(-50%, 100%);
	transition: transform 0.4s ease-in-out;
}

.toastModal .content .flex {
	display: flex;
	flex-direction: column;
}

.toastModal .content.show {
	transform: translate(-50%, 0%);
}

.toastModal .content .close {
	width: 24px;
	height: 24px;
	object-fit: contain;
	position: absolute;
	cursor: pointer;
	top: 25px;
	right: 20px;
}

.toastModal .content .heading {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 20px;
}

.toastModal .content .input {
	margin-bottom: 20px;
	border: none;
	outline: none;
	border-bottom: 1px solid #333;
	margin-bottom: 20px;
	height: 40px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.toastModal .content .couponButton {
	outline: none;
	border: none;
	background: var(--main);
	color: #fff;
	height: 40px;
	font-size: 16px;
	font-weight: 500;
	border-radius: 6px;
}

/* 기본 토스트 모달 끝 */