@charset "UTF-8";

/* 공통 */
.top_navi_new {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 10;
	height: 63px;
	background: #fff;
}

.event_container {
	position: relative;
	width: 100%;
	padding-top: 63px;
	color: #000;
	font-family: 'noto4';
	background: #b3fffc;
}

.event_container button {
	border: none;
	background: none;
	cursor: pointer;
}

.event_container li {
	float: none;
}

.event_container img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.event_container .screen_out {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.event_container .event_cont {
	position: relative;
}

.event_container .main_inner {
	position: relative;
	max-width: 750px;
	height: 100%;
	margin: 0 auto;
}

.event_container .content_wrap {
	position: relative;
	width: 100%;
	border-radius: 30px;
}

.event_container .button_wrap {
	display: flex;
	gap: 10px;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-56%);
	}
}

@keyframes pointerBounceDiagonal {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-10px, -10px);
	}
}

@keyframes floating {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes shakeHand {
	0%,
	100% {
		transform: rotate(3deg);
	}
	25% {
		transform: rotate(-3deg);
	}
	50% {
		transform: rotate(3deg);
	}
	75% {
		transform: rotate(-3deg);
	}
}

/* 헤더 */
.event_header {
	background: #00b4ae;
}

.event_header .header_title img {
	margin: 0 auto;
}

/* 컨텐츠 */
.event_intro {
	height: 1169px;
	padding: 51px 0 0;
	background: #36fff8;
	/* background: #7d32e6 url('/img/event/9044/pc/main/visual_bg.png') no-repeat center top / cover; */
}

.event_intro .main_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.event_intro .event_img {
	width: 762px;
}

.event_intro .btn_quiz_next {
	position: absolute;
	top: 570px;
	left: 56px;
	width: 612px;
	height: 98px;
}

.event_intro .btn_quiz_next::after {
	content: '';
	position: absolute;
	right: 10px;
	bottom: -19px;
	width: 57px;
	height: 65px;
	background: url('/img/event/8961/pc/btn_icon.png') no-repeat 0 0 / contain;
	animation: pointerBounceDiagonal 1s infinite;
}

.event_question {
	max-height: 100vh;
	padding: 70px 0 100px;
}

.event_question .content_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 450px;
	border: 5px solid #70dad6;
	border-radius: 30px;
	background: #fff;
}

.event_question .question_index {
	position: absolute;
	top: 30px;
	right: 30px;
}

.event_question .question_index span {
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #998ea8;
	font-size: 28px;
	font-family: 'noto4';
}

.event_question .q_item {
	display: none;
	line-height: 50px;
	letter-spacing: -0.05em;
	text-align: center;
	font-size: 36px;
	font-family: 'noto6';
}

.event_question .q_item.is_active {
	display: block;
}

.event_question .q_item em {
	color: #ff0048;
	font: inherit;
}

.event_question .button_wrap {
	margin-top: 20px;
}

.event_question .button_wrap button {
	width: 100%;
	height: 150px;
	border: 5px solid #70dad6;
	border-radius: 20px;
}

.event_question .button_wrap button.is_active {
	border-color: #008a84;
	background-color: #008a84;
}

.event_question .button_wrap .btn_right {
	background: #fff url('/_skin/sidae/images/board_new/professional_quiz/yes.png') no-repeat center / 125px auto;
}

.event_question .button_wrap .btn_right.is_active {
	background-image: url('/_skin/sidae/images/board_new/professional_quiz/yes_h.png');
}

.event_question .button_wrap .btn_wrong {
	background: #fff url('/_skin/sidae/images/board_new/professional_quiz/no.png') no-repeat center / 125px auto;
}

.event_question .button_wrap .btn_wrong.is_active {
	background-image: url('/_skin/sidae/images/board_new/professional_quiz/no_h.png');
}

.event_question .btn_next {
	margin-top: 70px;
}

.event_question .btn_next_2 {
	display: none;
}

.event_question .text_remain {
	margin-top: 20px;
	text-align: center;
	letter-spacing: -0.05em;
	color: #998ea8;
	font-size: 28px;
	font-family: 'noto4';
}

.event_result .result_wrap_1 {
	padding: 70px 0 100px;
	background: #b3fffc;
}

.event_result .result_wrap_2 {
	padding: 98px 0 223px;
	background: #e2fffe;
}

.event_result .calc_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 24px 0 30px;
	border-radius: 30px;
	background: #2e0468;
}

.event_result .calc_wrap p {
	line-height: 50px;
	letter-spacing: -0.05em;
	color: #fff;
	font-size: 32px;
	font-family: 'noto4';
}

.event_result .calc_wrap .result_percent {
	line-height: 1;
	letter-spacing: -0.05em;
	color: #ffdd41;
	font-size: 46px;
	font-family: 'noto6';
}

.event_result .result_item {
	display: none;
	margin-top: 20px;
}

.event_result .result_item.is_active {
	display: block;
}

.event_result .content_wrap {
	display: flex;
	flex-direction: column;
	height: 779px;
	padding: 120px 47px 80px;
	text-align: center;
	background: url('/_skin/sidae/images/board_new/professional_quiz/result_box.png') no-repeat center top / contain;
}

.event_result .content_wrap .item_title {
	margin-left: 23px;
}

.event_result .result_item_1 .content_wrap .item_title {
	width: 614px;
}

.event_result .result_item_2 .content_wrap .item_title {
	width: 611px;
}

.event_result .result_item_3 .content_wrap .item_title {
	width: 611px;
}

.event_result .result_item_4 .content_wrap .item_title {
	width: 635px;
}

.event_result .content_wrap .item_note {
	padding: 27px 0 24px 37px;
	border-radius: 20px;
	background: #eafcfb;
}

.event_result .content_wrap .note_title {
	display: block;
	height: 25px;
}

.event_result .content_wrap .note_title img {
	width: auto;
	height: 100%;
}

.event_result .content_wrap .note_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 16px 0 0 6px;
	text-align: left;
}

.event_result .content_wrap .note_list li {
	line-height: 1.2;
	letter-spacing: -0.045em;
	color: #303030;
	font-size: 20px;
}

.event_result .content_wrap .item_suggestion {
	margin: 22px 0 0;
}

.event_result .content_wrap .sugst_title {
	display: block;
	width: 174px;
	margin: 0 0 0 8px;
}

.event_result .content_wrap .sugst_list {
	display: flex;
	gap: 10px;
	margin: 12px 0 0 8px;
}

.event_result .content_wrap .sugst_list li {
	width: 100%;
	border-radius: 10px;
	background: #f7f7f7;
}

.event_result .content_wrap .sugst_list strong {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	line-height: 1.2;
	letter-spacing: -0.03em;
	border-radius: 10px;
	color: #fff;
	font-size: 21px;
	font-family: 'noto6';
	background: #008c87;
}

.event_result .content_wrap .sugst_list div {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}

.event_result .content_wrap .sugst_list p {
	line-height: 1.5;
	letter-spacing: -0.065em;
	color: #303030;
	font-size: 17px;
}

.event_result .content_wrap .sugst_table {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin: 16px 0 0 9px;
}

.event_result .content_wrap .sugst_table li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 207px;
	height: 59px;
	line-height: 1.2;
	border-radius: 7px;
	letter-spacing: -0.03em;
	color: #fff;
	font-size: 21px;
	font-family: 'noto6';
	background: #008c87;
}

.event_result .button_wrap {
	margin-top: 57px;
}

.event_result .button_wrap button,
.event_result .button_wrap a {
	position: relative;
}

.event_result .event_title {
	line-height: 1.3;
	letter-spacing: -0.045em;
	text-align: center;
	color: #000;
	font-size: 53px;
	font-family: 'noto7';
}

.event_result .event_title em {
	color: #7d32e6;
	font: inherit;
}

.event_result .product_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 30px 0;
	width: calc(100% + 10px);
	margin-top: 40px;
}

.event_result .product_list .list_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 370px;
	height: 330px;
	padding: 42px 0 0;
	border: 5px solid #7d32e6;
	border-radius: 20px;
	background: #fff;
}

.event_result .product_list .item_title {
	line-height: 1.4;
	letter-spacing: -0.025em;
	text-align: center;
	font-size: 34px;
	font-family: 'noto7';
}

.event_result .product_list .item_desc {
	line-height: 1.2;
	margin: 20px 0 0;
	letter-spacing: -0.045em;
	font-size: 21px;
	font-family: 'noto3';
}

.event_result .product_list .btn_go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 60px;
	margin: 38px 0 0;
	border-radius: 10px;
	letter-spacing: -0.045em;
	color: #fff;
	font-size: 22px;
	font-family: 'noto7';
	background: #7d32e6;
}

.event_result .product_noti {
	margin-top: 40px;
	padding: 28px 0 30px 20px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
}

.event_result .product_noti .noti_title {
	padding: 0 0 0 40px;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: rgba(0, 0, 0, 0.6);
	font-size: 24px;
	background: url('/_skin/sidae/images/board_new/professional_quiz/icon_notice.png') no-repeat 0 50% / 30px auto;
}

.event_result .product_noti .noti_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 15px 0 0 38px;
}

.event_result .product_noti .noti_list li {
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: rgba(0, 0, 0, 0.6);
	font-size: 18px;
	font-family: 'noto3';
}

.event_answer {
	padding: 130px 0 120px;
}

.event_answer .main_inner {
	max-width: none;
}

.event_answer .event_table {
	width: 1100px;
	margin: 0 auto;
	border: 1px solid #2e0468;
	border-top: 5px solid #2e0468;
	border-collapse: collapse;
}

.event_answer .event_table thead {
	background: #7d32e6;
}

.event_answer .event_table tr {
	border-top: 1px solid #ad9ec2;
}

.event_answer .event_table td + td,
.event_answer .event_table th + td,
.event_answer .event_table th + th {
	border-left: 1px solid #ad9ec2;
}

.event_answer .event_table thead th {
	padding: 6px 0 11px;
	letter-spacing: -0.03em;
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-family: 'noto5';
	font-weight: normal;
}

.event_answer .event_table tbody th {
	letter-spacing: -0.03em;
	text-align: center;
	font-size: 24px;
	font-family: 'noto6';
	background: #f8f8f8;
}

.event_answer .event_table tbody td {
	padding: 22px 28px 21px;
	letter-spacing: -0.04em;
	font-size: 24px;
	font-family: 'noto4';
	background: #fff;
}

.event_answer .event_table tbody td:last-of-type {
	text-align: center;
}

.event_answer .event_table tbody td p {
	line-height: 34px;
	letter-spacing: -0.07em;
	word-break: keep-all;
	font-size: 24px;
	font-family: 'noto4';
}

.event_answer .event_table tbody td em {
	color: #7d32e6;
	font: inherit;
}

.event_answer .event_table tbody td span {
	font-family: 'noto6';
}

.event_answer .btn_retry {
	display: block;
	width: 750px;
	margin: 70px auto 0;
}

/* 푸터 */
.event_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110px;
	background: rgba(0, 0, 0, 0.6);
	z-index: 100;
}

.event_footer .share_wrap {
	display: flex;
	justify-content: center;
	gap: 50px;
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 0;
	opacity: 0;
	transition: 0.3s ease-in-out;
	overflow: hidden;
}

.event_footer .share_wrap.is_active {
	width: 100%;
	opacity: 1;
}

.event_footer .share_wrap li {
	padding-bottom: 20px;
}

.event_footer .btn_wrap {
	display: flex;
}

.event_footer .btn_wrap button {
	width: 100%;
}

.event_footer .btn_wrap .btn_retry {
	display: none;
}

/* 모달 */
.event_modal {
	display: none;
	align-items: flex-end;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}

.event_modal.is_active {
	display: flex;
}

.event_modal .modal_content {
	width: 100%;
	padding: 71px 0 76px;
	background: #fff;
}

.event_modal .modal_content p {
	line-height: 50px;
	text-align: center;
	letter-spacing: -0.05em;
	font-size: 36px;
	font-family: 'noto6';
}

.event_modal .modal_content p em {
	color: #ff0048;
	font: inherit;
}

.event_modal .modal_content .btn_close {
	display: block;
	margin-top: 49px;
}

.event_modal .modal_content .btn_close::after {
	content: '';
	position: absolute;
	bottom: -6px;
	right: 20px;
	width: 57px;
	height: 65px;
	background: url('/img/event/8961/pc/btn_icon.png') no-repeat 0 0 / contain;
	animation: pointerBounceDiagonal 1s infinite;
}

/* 영역 노출 */
.event_cont {
	display: none;
}

.is_active_intro .event_header {
	display: none;
}

.is_active_question .event_footer,
.is_active_answer .event_footer {
	display: none;
}

.is_active_intro .event_intro,
.is_active_question .event_question,
.is_active_result .event_result,
.is_active_answer .event_answer {
	display: block;
}

@media screen and (max-height: 1200px), screen and (max-width: 805px) {
	/* 헤더 */
	.event_header .header_title img {
		max-width: 89vw;
		height: 13.6vh;
		padding: 2vh 0;
	}

	/* 컨텐츠 */
	.event_question {
		padding: 5.833vh 0 8.333vh;
	}

	.event_question .main_inner {
		width: 90vw;
	}

	.event_question .content_wrap {
		height: min(37.5vh, 60vw);
	}

	.event_question .question_index {
		top: min(2.5vh, 4vw);
		right: min(2.5vh, 4vw);
	}

	.event_question .question_index span {
		font-size: clamp(12px, 2.333vh, 28px);
	}

	.event_question .q_item {
		line-height: 1.5;
		font-size: clamp(12px, min(3vh, 4.8vw), 36px);
	}

	.event_question .button_wrap {
		margin-top: min(1.667vh, 2.667vw);
	}

	.event_question .button_wrap button {
		height: min(12.5vh, 20vw);
	}

	.event_question .button_wrap .btn_right,
	.event_question .button_wrap .btn_wrong {
		background-size: min(12.244vh, 16.667vw) auto;
	}

	.event_question .btn_next {
		margin-top: min(5.833vh, 9.333vw);
	}

	.event_question .text_remain {
		margin-top: 1.667vh;
		font-size: clamp(12px, 2.333vh, 28px);
	}

	.event_result .main_inner {
		width: 90vw;
	}
}

@media screen and (max-width: 805px) and (orientation: portrait) {
	.event_container .content_wrap {
		border-width: 0.667vw;
		border-radius: 4vw;
	}

	.event_container .button_wrap {
		gap: 1.333vw;
	}

	@keyframes pointerBounceDiagonal {
		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-1.333vw, -1.333vw);
		}
	}

	/* 컨텐츠 */
	.event_intro {
		height: 155.867vw;
		padding: 6.8vw 0 0;
	}

	.event_intro .event_img {
		width: 101.6vw;
	}

	.event_intro .sub_title {
		width: 71.801vw;
	}

	.event_intro .event_title {
		width: 92.05vw;
		margin-top: 6.667vw;
	}

	.event_intro .event_title .title_tag {
		top: 1.242vw;
		width: 26.46vw;
	}

	.event_intro .btn_quiz_next {
		top: 76vw;
		left: 7.467vw;
		width: 82vw;
		height: 13.067vw;
	}

	.event_intro .btn_quiz_next::after {
		right: 1.333vw;
		bottom: -2.533vw;
		width: 7.6vw;
		height: 8.667vw;
	}

	.event_question .button_wrap button {
		border-width: 0.667vw;
	}

	.event_result .result_wrap_1 {
		padding: 9.333vw 0 16vw;
	}

	.event_result .result_wrap_2 {
		padding: 11.751vw 0 26.739vw;
	}

	.event_result .calc_wrap {
		padding: 3.2vw 0 4vw;
		border-radius: 4vw;
	}

	.event_result .calc_wrap p {
		line-height: 6.667vw;
		font-size: 4.267vw;
	}

	.event_result .calc_wrap .result_percent {
		font-size: 6.133vw;
	}

	.event_result .result_item {
		margin-top: 2.667vw;
	}

	.event_result .content_wrap {
		height: 93.405vw;
		padding: 14.388vw 5.635vw 9.592vw;
	}

	.event_result .content_wrap .item_title {
		margin-left: 2.758vw;
	}

	.event_result .result_item_1 .content_wrap .item_title {
		width: 73.621vw;
	}

	.event_result .result_item_2 .content_wrap .item_title {
		width: 73.261vw;
	}

	.event_result .result_item_3 .content_wrap .item_title {
		width: 73.261vw;
	}

	.event_result .result_item_4 .content_wrap .item_title {
		width: 76.139vw;
	}

	.event_result .content_wrap .item_note {
		padding: 3.237vw 0 2.878vw 4.436vw;
		border-radius: 2.398vw;
	}

	.event_result .content_wrap .note_title {
		height: 2.998vw;
	}

	.event_result .content_wrap .note_list {
		gap: 0.959vw;
		margin: 1.918vw 0 0 0.719vw;
	}

	.event_result .content_wrap .note_list li {
		font-size: 2.398vw;
	}

	.event_result .content_wrap .item_suggestion {
		margin: 2.638vw 0 0;
	}

	.event_result .content_wrap .sugst_title {
		width: 20.863vw;
		margin: 0 0 0 0.959vw;
	}

	.event_result .content_wrap .sugst_list {
		gap: 1.199vw;
		margin: 1.439vw 0 0 0.959vw;
	}

	.event_result .content_wrap .sugst_list li {
		border-radius: 1.199vw;
	}

	.event_result .content_wrap .sugst_list strong {
		height: 5.396vw;
		border-radius: 1.199vw;
		font-size: 2.518vw;
	}

	.event_result .content_wrap .sugst_list div {
		min-height: 16.787vw;
	}

	.event_result .content_wrap .sugst_list p {
		font-size: 2.038vw;
	}

	.event_result .content_wrap .sugst_table {
		gap: 1.559vw;
		margin: 1.918vw 0 0 1.079vw;
	}

	.event_result .content_wrap .sugst_table li {
		width: 24.82vw;
		height: 7.074vw;
		border-radius: 0.839vw;
		font-size: 2.518vw;
	}

	.event_result .content_wrap .item_note {
		line-height: 5.333vw;
		font-size: clamp(12px, 3.733vw, 28px);
	}

	.event_result .content_wrap .item_marker {
		bottom: 12.547vw;
		left: 3.106vw;
		width: 19.379vw;
	}

	.event_result .content_wrap .item_title {
		font-size: clamp(12px, 4.267vw, 32px);
	}

	.event_result .button_wrap {
		margin-top: 5.333vw;
	}

	.event_result .event_title {
		font-size: 6.355vw;
	}

	.event_result .product_list {
		gap: 3.597vw 0;
		width: calc(100% + 1.199vw);
		margin-top: 4.796vw;
	}

	.event_result .product_list .list_item {
		width: 44.365vw;
		height: 39.568vw;
		padding: 5.036vw 0 0;
		border: 5px solid #7d32e6;
		border-radius: 2.398vw;
	}

	.event_result .product_list .item_title {
		font-size: 4.077vw;
	}

	.event_result .product_list .item_desc {
		margin: 2.398vw 0 0;
		font-size: 2.518vw;
	}

	.event_result .product_list .btn_go {
		width: 38.369vw;
		height: 7.194vw;
		margin: 4.556vw 0 0;
		border-radius: 1.199vw;
		font-size: 2.638vw;
	}

	.event_result .product_noti {
		margin-top: 4.796vw;
		padding: 3.357vw 0 3.597vw 2.398vw;
		border-radius: 1.199vw;
	}

	.event_result .product_noti .noti_title {
		padding: 0 0 0 4.796vw;
		font-size: 2.878vw;
		background-size: 3.597vw auto;
	}

	.event_result .product_noti .noti_list {
		gap: 0.959vw;
		margin: 1.799vw 0 0 4.556vw;
	}

	.event_result .product_noti .noti_list li {
		font-size: 2.158vw;
	}

	.event_answer {
		padding: 17.333vw 0 16vw;
	}

	.event_answer .event_table {
		width: 100%;
		border-width: 0.667vw;
	}

	.event_answer .event_table thead th {
		padding: 0.8vw 0 1.467vw;
		font-size: clamp(12px, 3.2vw, 24px);
	}

	.event_answer .event_table tbody th {
		font-size: clamp(12px, 3.2vw, 24px);
	}

	.event_answer .event_table tbody td {
		padding: 2.933vw 3.733vw 2.8vw;
		font-size: clamp(12px, 3.2vw, 24px);
	}

	.event_answer .event_table tbody td p {
		line-height: 4.533vw;
		font-size: clamp(12px, 3.2vw, 24px);
	}

	.event_answer .btn_retry {
		width: 100%;
		margin: 9.333vw auto 0;
	}

	/* 푸터 */
	.event_footer {
		height: 13.665vw;
	}

	.event_footer .share_wrap {
		gap: 6.211vw;
	}

	.event_footer .share_wrap li {
		width: 12.422vw;
		padding-bottom: 2.484vw;
	}

	/* 모달 */
	.event_modal .modal_content {
		padding: 9.467vw 0 10.133vw;
	}

	.event_modal .modal_content p {
		line-height: 6.667vw;
		font-size: clamp(12px, 4.8vw, 36px);
	}

	.event_modal .modal_content .btn_close {
		margin-top: 6.533vw;
	}

	.event_modal .modal_content .btn_close::after {
		bottom: -0.8vw;
		right: 2.667vw;
		width: 7.6vw;
		height: 8.667vw;
	}
}

@media screen and (max-width: 650px) {
	.event_result .result_wrap_1 .main_inner .calc_wrap span.result_percent {
		font-size: clamp(12px, 5.714vw, 46px) !important;
	}

	.event_question .main_inner .content_wrap .question_index span {
		font-size: clamp(12px, 2.333vh, 28px) !important;
	}
}