/*@import"https://unpkg.com/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css";*/
@import"./pretendardvariable-dynamic-subset.css";
@import"https://use.typekit.net/sbm6wii.css";

:root {
	--color-wave: #2a66da;
	--color-pop: #d04012;
	--color-webtoon: #00ad45;
	--color-media: #8b3cda;
	--color-variety: #df9e20;
	--chart-negative: #ffe0e0;
	--chart-positive: #d3e0e7;
	--chart-issue: #b870ff;
	--chart-contents: #f564aa;
	--chart-evaluation: #ff6b00;
	--primary: var(--color-wave);
	--gray100: #fff;
	--gray95: #f4f4f4;
	--gray90: #e2e2e2;
	--gray80: #d0d0d0;
	--gray70: #bdbdbd;
	--gray60: #a0a0a0;
	--gray50: #8e8e8e;
	--gray40: #646464;
	--gray30: #474747;
	--gray20: #272727;
	--gray10: #222222;
	--gray5: #1f1f1f;
	--gray0: #101010;
	--background: var(--gray95);
	--backdrop-color: rgba(255, 255, 255, 0.8);
	--placeholder: var(--gray70);
	--disabled: var(--gray90);
	--pcblur: 80px;
	--shadow-color: rgba(0, 0, 0, 0.15);
	--modal-shadow: 0px 0px 20px 0px var(--shadow-color, rgba(0, 0, 0, 0.15));
	--size-xxxs: 0.117647rem;
	--size-xxs: 0.235294rem;
	--size-xs: 0.35294rem;
	--size-s: 0.47058rem;
	--size-m: 0.58823rem;
	--size-m2: 0.70588rem;
	--size-l: 0.941176rem;
	--size-xl: 1.17647rem;
	--size-xxl: 1.411764rem;
	--size-xxxl: 1.647058rem;
	--size-xxxxl: 1.882352rem;
	--radius-s: var(--size-s);
	--radius-m: var(--size-m);
	--radius-l: var(--size-l);
	--radius-mob-m: var(--size-m2);
	--font-multilingual: "itc-avant-garde-gothic-pro", "Pretendard Variable", "Pretendard", "Noto Sans KR", sans-serif;
	--font-kr: "Pretendard Variable", "Pretendard", "Noto Sans KR", sans-serif;
	--font-en: "itc-avant-garde-gothic-pro", sans-serif
}

h1,
.h1 {
	font-size: 2.23rem;
	font-weight: 850;
	line-height: 1.15em;
	letter-spacing: .01em
}

h4,
.h4 {
	font-size: 1.41176rem;
	font-weight: 750;
	line-height: 1.5em;
	letter-spacing: .01em
}

h6,
.h6 {
	font-size: 1.0588rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em
}

p,
.p {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -0.01em
}

.p2 {
	font-size: .882352rem;
	font-weight: 450;
	line-height: 1.55em;
	letter-spacing: 0em
}

.caption {
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em
}

.caption2 {
	font-size: .647rem;
	line-height: 1.4em;
	font-weight: 400
}

* {
	margin: 0;
	padding: 0;
	font-family: var(--font-multilingual);
	position: relative;
	word-break: keep-all;
	box-sizing: border-box
}

html {
	font-size: 17px
}

body {
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--gray0)
}

input,
button {
	color: var(--gray0)
}

input::placeholder,
textarea::placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
	color: var(--placeholder)
}

svg,
img {
	display: inline-block
}

button {
	background: rgba(0, 0, 0, 0);
	box-shadow: none;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	display: inline-block;
	cursor: pointer
}

.icon-button {
	border-radius: 10rem;
	background: var(--primary);
	flex-shrink: 0;
	transition: transform .3s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.icon-button:hover {
	transform: scale(1.03)
}

.icon-button:disabled {
	background: var(--gray70)
}

.icon-button:hover {
	background: var(--gray100);
	box-shadow: var(--modal-shadow)
}

.icon-button:hover svg path {
	fill: var(--primary)
}

.icon-button svg {
	width: 100%;
	height: 100%
}

.icon-button svg path {
	fill: var(--gray100)
}

.icon-button.size-xxl {
	width: 7rem;
	height: 7rem;
	padding: var(--size-xxl)
}

.icon-button.size-xxl2 {
	width: 4rem;
	height: 4rem;
	padding: 1rem;
}

@media screen and (max-width: 1080px) {
	.icon-button.size-xxl {
		width: 3rem;
		height: 3rem;
		padding: var(--size-m2)
	}
}

.tag {
	background: var(--primary);
	color: var(--gray100);
	border-radius: 10rem;
	padding: var(--size-xs) var(--size-l);
	overflow: hidden;
	will-change: transform;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.tag:hover {
	transform: scale(1.01)
}

.tag span {
	z-index: 1
}

.tag.size-l {
	font-size: 1.41176rem;
	font-weight: 850;
	line-height: 1.5em;
	letter-spacing: .01em
}

@media screen and (max-width: 480px) {
	.tag.size-l {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.5em;
		letter-spacing: -0.01em
	}
}

.tag::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.tag:hover::after {
	opacity: 1
}

@media screen and (max-width: 1400px) {
	html {
		font-size: 16px
	}
}

@media screen and (min-width: 1921px) {
	html {
		font-size: .8vw
	}
}

@media screen and (min-width: 2048px) {
	html {
		font-size: 20px
	}
}

body[data-genre=pop],
body[data-genre=media],
body[data-genre=webtoon],
body[data-genre=variety] {
	background: var(--background)
}

body[data-type=text] {
	margin-bottom: 10rem
}

*::selection {
	background-color: var(--primary);
	color: var(--gray100)
}

#content {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.kwave-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none
}

.kwave-modal .modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: var(--backdrop-color, rgba(255, 255, 255, 0.8));
	backdrop-filter: blur(calc(var(--Size-PC_Blur, 80px) / 2));
	-webkit-backdrop-filter: blur(calc(var(--pcblur, 80px) / 2))
}

.kwave-modal .modal-close {
	position: absolute;
	right: var(--size-xxxl);
	top: var(--size-xxxl);
	cursor: pointer;
	pointer-events: all;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem
}

.kwave-modal .modal-close:hover {
	transform: scale(1.1)
}

.kwave-modal .modal-close svg {
	width: 100%;
	height: 100%
}

.kwave-modal .modal-close svg path {
	fill: var(--primary)
}

@media screen and (max-width: 1080px) {
	.kwave-modal .modal-close {
		top: var(--size-xl);
		right: var(--size-xl)
	}
}

.kwave-modal.active {
	pointer-events: all
}

.kwave-modal.active .modal-overlay {
	cursor: pointer
}

.loading-content {
	width: 300px
}

@media screen and (max-width: 480px) {
	.loading-content {
		width: 240px
	}
}

.tooltip-holder {
	display: inline-block;
	z-index: 10
}

.tooltip-holder .tooltip-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-xl);
	height: var(--size-xl);
	padding: var(--size-xxs);
	border-radius: 5rem;
	background: var(--gray60);
	cursor: pointer
}

.tooltip-holder .tooltip-trigger svg path {
	fill: var(--gray100)
}

.tooltip-holder .tooltip-trigger:hover~.tooltip-contents {
	opacity: 1
}

.tooltip-holder .tooltip-contents {
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: calc(100% + var(--size-xl));
	transform: translateY(-50%);
	display: flex;
	font-size: 1rem;
	font-weight: 550;
	line-height: 1.5em;
	letter-spacing: -0.01em;
	font-family: var(--font-kr);
	padding: var(--size-xs) var(--size-m2);
	background: rgba(160, 160, 160, .5);
	backdrop-filter: blur(var(--size-m));
	-webkit-backdrop-filter: blur(var(--size-m));
	color: var(--gray100);
	white-space: pre;
	border-radius: var(--radius-l);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1)
}

.tooltip-holder .tooltip-contents::before {
	content: "";
	width: 0px;
	height: 0px;
	border-top: .5em solid rgba(0, 0, 0, 0);
	border-bottom: .5em solid rgba(0, 0, 0, 0);
	border-right: .5em solid rgba(160, 160, 160, .5);
	display: block;
	position: absolute;
	left: -0.45em;
	top: 50%;
	transform: translateY(-50%)
}

@media screen and (max-width: 480px) {
	.tooltip-holder .tooltip-contents {
		white-space: normal;
		width: 50vw
	}
}

.search-condition-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-l);
	padding: var(--size-l) 0
}

.condition-filter-dates {
	background: var(--gray100);
	border-radius: 3rem;
	overflow: hidden
}

.condition-filter-dates>div {
	overflow-x: auto;
	padding: var(--size-xxxs) var(--size-xs);
	padding-left: var(--size-m2);
	display: flex;
	align-items: center;
	gap: var(--size-m);
	flex-wrap: nowrap;
	min-height: 2rem
}

.condition-filter-dates button {
	font-size: .82352rem;
	font-weight: 650;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--gray60);
	padding: 0 var(--size-xs);
	overflow: hidden;
	border-radius: var(--radius-s);
	flex-shrink: 0
}

.condition-filter-dates button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.condition-filter-dates button:hover::after {
	opacity: 1
}

.condition-filter-dates button.active {
	color: var(--primary)
}

.condition-filter-dates .icon-button {
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .25em;
	border-radius: 3rem
}

.condition-filter-dates .label {
	color: var(--gray60);
	font-size: .647rem;
	line-height: 1.4em;
	font-weight: 400
}

.condition-filter-label {
	display: flex;
	align-items: center;
	color: var(--gray60);
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em;
	gap: var(--size-m2)
}

input[type=checkbox].toggle {
	width: 3.2rem;
	height: 1.75rem;
	background: var(--gray100);
	border-radius: 10rem;
	border: none;
	display: flex;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

input[type=checkbox].toggle:hover {
	transform: scale(1.03)
}

input[type=checkbox].toggle::after {
	content: "";
	display: block;
	border-radius: 20rem;
	background: var(--primary);
	position: absolute;
	left: var(--size-xxs);
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1)
}

input[type=checkbox].toggle:checked {
	background: var(--primary)
}

input[type=checkbox].toggle:checked::after {
	background: var(--gray100);
	left: calc(100% - var(--size-xxs) - 1.25rem)
}

#top_menu {
	position: fixed;
	top: var(--size-l);
	right: var(--size-l);
	z-index: 101;
	display: flex;
	gap: var(--size-m)
}

#top_menu .top_menu_item {
	background: var(--primary);
	padding: .647058rem;
	width: 3.17647rem;
	height: 3.17647rem;
	border-radius: 8rem;
	cursor: pointer;
	color:#FFF;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

#top_menu .top_menu_item:hover {
	transform: scale(1.07)
}

#top_menu .top_menu_item a,
#top_menu .top_menu_item svg {
	display: block;
	width: 100%;
	height: 100%
}

#top_menu .top_menu_item:hover,
#top_menu .top_menu_item.active {
	box-shadow: var(--modal-shadow);
	background: var(--gray100);
}

#top_menu .top_menu_item:hover svg path,
#top_menu .top_menu_item:hover svg rect,
#top_menu .top_menu_item.active svg path,
#top_menu .top_menu_item.active svg rect {
	fill: var(--primary)
}
#top_menu .top_menu_item:hover p,
#top_menu .top_menu_item.active p {
	color: var(--primary) !important;
}
@media screen and (max-width: 1080px) {
	#top_menu .top_menu_item {
		width: 3rem;
		height: 3rem
	}

	#top_menu #gnb_download {
		display: none
	}
}

.modal-global_download .modal-contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--size-xxxl)
}

a[download] {
	background: var(--primary);
	color: var(--gray100);
	display: flex;
	align-items: center;
	gap: var(--size-l);
	padding: var(--size-s) var(--size-l);
	border-radius: 10rem
}

a[download],
a[download] span {
	font-size: 1.41176rem;
	font-weight: 750;
	line-height: 1.5em;
	letter-spacing: .01em
}

a[download]::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.7322998 11.8690796'%3E%3Cpath d='M11.7322998.625v9.2948608h-1.25V2.5604858h-1.1679688v1.1738281h-1.1745605v1.1738281h-1.1745605v1.1738281h-1.1745605v1.1738281h-1.1745605v1.1738892h-1.1745605v1.1737671h-1.020752v1.1328125h-1.020752v1.1328125H0v-1.3381958h1.020752v-1.1328125h1.020752v-1.1329346h1.1745605v-1.1737671h1.1745605v-1.1738281h1.1745605v-1.1738281h1.1745605v-1.1738281h1.1744385v-1.1738281h1.1746826v-1.1460571H1.7889404V0h9.3183594v.625h.625Z' fill='%23ffffff'/%3E%3C/svg%3E");
	display: block;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat
}

.modal-global_search .modal-contents {
	display: flex;
	flex-direction: column;
	gap: var(--size-xxxl)
}

.modal-global_search .modal-contents input[type=text],
.modal-global_search .modal-contents input[type=search] {
	height: 100%
}

.modal-global_search .modal-contents .global-input-container {
	align-items: center
}

.modal-global_search .modal-contents .global-input-container2 {
	align-items: center
}

.modal-global_search .modal-contents .recommand-container,
.modal-global_search .modal-contents .recommand-container>div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-l)
}

.modal-global_search .modal-contents h4 {
	color: var(--primary)
}

@media screen and (max-width: 1080px) {
	.modal-global_search {
		z-index: 100;
		align-items: flex-start
	}

	.modal-global_search .modal-overlay {
		background: rgba(255, 255, 255, .8) !important
	}

	.modal-global_search .modal-contents {
		top: calc(3rem + var(--size-l)*2 + var(--size-xs) + .41176rem);
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		padding: var(--size-xl)
	}

	.modal-global_search .modal-contents .recommand-container {
		flex-direction: column;
		width: 100%;
		padding: 0 var(--size-xxl);
		align-items: flex-start
	}

	.modal-global_search .modal-contents .recommand-container h4 {
		padding: 0 var(--size-l)
	}

	.modal-global_search .modal-contents .recommand-container>div {
		flex-wrap: wrap;
		justify-content: flex-start
	}
}

@media screen and (max-width: 480px) {
	.modal-global_search .modal-contents .recommand-container {
		padding: 0 var(--size-m)
	}

	.modal-global_search .modal-contents .recommand-container h4 {
		padding: 0 var(--size-m2)
	}

	.modal-global_search .modal-contents .recommand-container>div {
		gap: var(--size-m)
	}
}

.modal-global_genre .modal-contents {
	max-width: 460px;
	width: clamp(320px, 60vw, 460px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--size-xxl);
	color: var(--primary)
}

.modal-global_genre .modal-contents>div {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--size-xxxl);
	width: 100%
}

.modal-global_genre .modal-contents a {
	display: flex
}

.modal-global_genre .modal-contents a svg {
	width: 100%;
	height: 100%
}

.global-input-container {
	--width: 70vw;
	width: var(--width);
	min-height: calc(var(--width)*.164285);
	background-color: #fff;
	border-radius: 20rem;
	box-shadow: 1px 1px 20px #aaa;
	color: var(--primary);
	display: flex;
	align-items: stretch;
	gap: var(--size-l);
	padding: var(--size-xxxxl);
	padding-left: calc(var(--size-xxxxl)*2)
}

.global-input-container input {
	width: 100%;
	height: 100%;
	font-size: 2.23rem;
	font-weight: 500;
	line-height: 1.15em;
	letter-spacing: .01em;
	outline: none;
	border: none
}

@media screen and (max-width: 1400px) {
	.global-input-container {
		--width: 100%
	}
}

@media screen and (max-width: 1080px) {
	.global-input-container {
		min-height: 4rem;
		padding: var(--size-m2);
		padding-left: var(--size-xxxl)
	}

	.global-input-container input {
		font-size: 1rem;
		font-weight: 650;
		line-height: 1.5em;
		letter-spacing: -0.01em
	}
}

.kwave-modal.modal-global_calendar .global-input-container {
	display: flex;
	align-items: center;
	padding: var(--size-xl);
	padding-left: calc(var(--size-xxxxl)*2);
	gap: var(--size-xxxxl)
}

.kwave-modal.modal-global_calendar .global-input-container>div:first-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--size-l);
	width: 100%
}



.global-input-container2 {
	--width: 29vw;
	width: 800px;
	min-height: 100px;
	background-color: #fff;
	border-radius: 20rem;
	box-shadow: 1px 1px 20px #aaa;
	color: var(--primary);
	display: flex;
	align-items: stretch;
	gap: var(--size-l);
	padding: 1rem;/*var(--size-xxxxl)*/
	padding-left: calc(var(--size-xxxxl)*2)
}

.global-input-container2 input {
	width: 100%;
	height: 100%;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.15em;
	letter-spacing: .01em;
	outline: none;
	border: none
}

@media screen and (max-width: 1400px) {
	.global-input-container2 {
		--width: 100%
	}
}

@media screen and (max-width: 1080px) {
	.global-input-container2 {
		min-height: 4rem;
		padding: var(--size-m2);
		padding-left: var(--size-xxxl)
	}

	.global-input-container2 input {
		font-size: 1rem;
		font-weight: 650;
		line-height: 1.5em;
		letter-spacing: -0.01em
	}
}

.kwave-modal.modal-global_calendar .global-input-container2 {
	display: flex;
	align-items: center;
	padding: var(--size-xl);
	padding-left: calc(var(--size-xxxxl)*2);
	gap: var(--size-xxxxl)
}

.kwave-modal.modal-global_calendar .global-input-container2>div:first-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--size-l);
	width: 100%
}





.kwave-modal.modal-global_calendar input {
	background: var(--gray95);
	border-radius: var(--size-l);
	padding: var(--size-l);
	text-align: center;
	letter-spacing: .06em
}

#content_search_date_input_sel{
	background: var(--gray95);
	border-radius: var(--size-l);
	padding: var(--size-l);
	text-align: center;
	letter-spacing: .06em;
	
	width: 100%;
	height: 100%;
	font-size: 2.23rem;
	font-weight: 500;
	line-height: 1.15em;
	letter-spacing: .01em;
	outline: none;
	border: none
}

.content_search_date_input_hidden{
	display:none;
}

.kwave-modal.modal-global_calendar input:disabled {
	background: var(--disabled);
	color: var(--gray70)
}

.kwave-modal.modal-global_calendar .content_search_date_select {
	display: flex;
	gap: var(--size-m);
	justify-content: space-around;
	margin: 0 auto
}

@media screen and (max-width: 1080px) {
	.kwave-modal.modal-global_calendar {
		z-index: 100;
		align-items: flex-start
	}

	.kwave-modal.modal-global_calendar .modal-overlay {
		background: rgba(255, 255, 255, .8) !important
	}

	.kwave-modal.modal-global_calendar .modal-contents {
		top: calc(3rem + var(--size-l)*2 + var(--size-xs) + .41176rem);
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		padding: var(--size-xl)
	}

	.kwave-modal.modal-global_calendar .global-input-container {
		padding: var(--size-m2);
		padding-left: calc(var(--size-xxl));
		padding-right: calc(var(--size-l))
	}

	.kwave-modal.modal-global_calendar .global-input-container>div:first-child {
		gap: 0
	}

	.kwave-modal.modal-global_calendar .global-input-container input {
		padding: var(--size-l) var(--size-m)
	}

	.kwave-modal.modal-global_calendar .content_search_date_select {
		position: absolute;
		flex-wrap: wrap;
		top: calc(100% + var(--size-xl)*2);
		align-items: flex-start
	}
}

.modal-global_sitemap {
	--top-space: calc(var(--size-l) + (10.5vw*.5714285) + var(--size-l));
	justify-content: flex-start;
	align-items: flex-start
}

.modal-global_sitemap .modal-overlay {
	background: rgba(255, 255, 255, .7) !important
}

.modal-global_sitemap .sitemap-container>div:not(.mob-only) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 7.5rem 2rem
}

.modal-global_sitemap .sitemap-container>div:not(.mob-only)>div {
	display: flex;
	flex-direction: column;
	gap: var(--size-xs)
}

.modal-global_sitemap .modal-contents {
	top: var(--size-l);
	padding: var(--size-xxl);
	display: flex;
	overflow-y: auto;
	height: calc(100vh - var(--size-l))
}

.modal-global_sitemap .modal-contents .description-contents-container {
	list-style: none;
	padding-bottom: 5rem
}

.modal-global_sitemap .modal-contents .description-contents-container>li {
	margin-bottom: 2.675rem
}

.modal-global_sitemap .modal-contents .description-contents-container p {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.66em;
	letter-spacing: -0.01em;
	font-family: var(--font-kr)
}

.modal-global_sitemap .modal-contents .description-tag-container {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	gap: var(--size-m);
	padding-bottom: var(--size-xxxl)
}

.modal-global_sitemap .modal-contents .keyword-chip {
	font-size: .82352rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em;
	padding: var(--size-xxs) var(--size-m2);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.modal-global_sitemap .modal-contents .keyword-chip:not(.active) {
	background: var(--gray100)
}

.modal-global_sitemap .modal-contents h6 {
	opacity: .5;
	color: var(--primary);
	padding-bottom: var(--size-s)
}

.modal-global_sitemap .modal-contents h1 {
	font-size: 2.23rem;
	font-weight: 400;
	line-height: 1.15em;
	letter-spacing: .01em;
	color: var(--primary);
	padding-bottom: var(--size-s);
	display: flex;
	align-items: center;
	gap: var(--size-m)
}

.modal-global_sitemap .modal-contents a,
.modal-global_sitemap .modal-contents a:link,
.modal-global_sitemap .modal-contents a:visited {
	color: var(--gray0);
	font-size: 1.0588rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em
}

.modal-global_sitemap .modal-contents .mob-only {
	display: flex;
	justify-content: space-between;
	align-items: flex-end
}

.modal-global_sitemap .modal-contents .mob-only h1 {
	padding-bottom: 0
}

.modal-global_sitemap .modal-contents .mob-bottom_copyright {
	color: var(--primary)
}

.modal-global_sitemap .modal-contents .mob-bottom_copyright svg path {
	fill: var(--primary)
}

.modal-global_sitemap .modal-contents .mob-bottom_lang {
	color: var(--primary)
}

.modal-global_sitemap .modal-contents .mob-bottom_lang svg path {
	fill: var(--primary)
}

@media screen and (max-width: 1080px) {
	.modal-global_sitemap .modal-contents {
		--top-space: calc(var(--size-l) + (10.5vw*.5714285) + var(--size-l) * 2.5);
		flex-direction: column;
		padding-top: var(--top-space)
	}

	.modal-global_sitemap .modal-contents>div:not(.mob-only) {
		width: 100%;
		padding: 5rem 0;
		border-bottom: 2px solid var(--gray70)
	}

	.modal-global_sitemap .modal-contents>div:not(.mob-only).sitemap-container {
		padding-top: 0
	}

	.modal-global_sitemap .modal-contents>div:not(.mob-only).description-container {
		padding-bottom: 0;
		border-bottom: none
	}
}

@media screen and (max-width: 480px) {
	.modal-global_sitemap .modal-contents .sitemap-container>div:not(.mob-only) {
		grid-template-columns: repeat(1, 1fr);
		gap: 3rem 2rem
	}
}

@media screen and (min-width: 1081px) {
	.modal-global_sitemap .modal-contents>div:not(.mob-only) {
		padding: 0 2.5rem;
		padding-top: var(--top-space);
		width: 50%;
		border-right: 2px solid var(--gray70)
	}

	.modal-global_sitemap .modal-contents>div:not(.mob-only).sitemap-container {
		padding-left: 0;
		position: sticky;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		top: 0
	}

	.modal-global_sitemap .modal-contents>div:not(.mob-only).description-container {
		border-right: none
	}

	.modal-global_sitemap .modal-contents .mob-only {
		display: none
	}
}

.keyword-chip {
	padding: var(--size-s) var(--size-l);
	white-space: pre;
	font-weight: 700;
	border-radius: 20rem;
	overflow: hidden;
	cursor: pointer;
	color: var(--primary);
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.keyword-chip:hover {
	transform: scale(1.01)
}

.keyword-chip::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.keyword-chip:hover::after {
	opacity: 1
}

.keyword-chip.active,
.keyword-chip[class*=_on] {
	background: var(--primary);
	color: var(--gray100)
}

@media screen and (max-width: 1080px) {
	.keyword-chip.h4 {
		font-size: 1rem;
		font-weight: 650;
		line-height: 1.5em;
		letter-spacing: -0.01em;
		padding: var(--size-xxs) var(--size-m2)
	}
}

#content_main {
	width: 100%;
	height: 100%
}

.top-left-container {
	position: fixed;
	top: var(--size-l);
	left: var(--size-l);
	z-index: 100;
	display: flex;
	gap: var(--size-xxxxl)
}

body[data-genre] .top-left-container {
	z-index: 101
}

.top-content {
	color: var(--primary);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 1rem;
	max-width: 35vw;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

@media screen and (min-width: 931px) {
	.top-content h1 {
		white-space: pre
	}
}

@media screen and (max-width: 930px) {
	.top-content h1 {
		font-size: 2rem
	}
}

@media screen and (max-width: 1080px) {
	.top-content {
		display: none
	}
}

#logo_container {
	display: block;
	--width: 10.5vw;
	width: var(--width);
	height: calc(var(--width)*.5714285);
	overflow: hidden;
	min-width: 112px;
	min-height: 64px;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

#logo_container:hover {
	transform: scale(1.03)
}

#logo_container svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	width: 200% !important;
	height: 200% !important
}

#logo_container svg[width="168"] {
	width: 100% !important;
	height: 100% !important
}

#logo_container path {
	fill: var(--primary) !important
}

#bottom_lang {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	align-items: flex-end;
	gap: var(--size-m);
	position: fixed;
	bottom: var(--size-l);
	right: var(--size-l);
	z-index: 100
}

#bottom_lang h1 {
	font-weight: 500;
	color: var(--primary)
}

#bottom_lang svg {
	display: inline-block
}

#bottom_lang .genre-changer {
	margin-bottom: .15rem;
	display: block;
	cursor: pointer
}

#bottom_lang #genre_container {
	--width: 7.647rem;
	width: var(--width);
	height: calc(var(--width)*.73846);
	display: block;
	cursor: pointer !important;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

#bottom_lang #genre_container:hover {
	transform: scale(1.03)
}

#bottom_lang #genre_container svg {
	width: 150% !important;
	height: 150% !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	cursor: pointer !important
}

@media screen and (max-width: 1080px) {
	#bottom_lang {
		display: none
	}
}

#bottom_copyright {
	bottom: var(--size-l);
	left: var(--size-l);
	z-index: 100;
	position: fixed;
	font-family: var(--font-en);
	color: var(--primary);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-xxs);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

#bottom_copyright .copyright-container {
	--width: 8.3125vw;
	width: var(--width);
	height: calc(var(--width)*.368);
	max-width: 150px;
	max-height: 55.2px
}

#bottom_copyright .copyright-container a,
#bottom_copyright .copyright-container svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

#bottom_copyright .copyright-container svg path {
	fill: var(--primary)
}

@media screen and (max-width: 1080px) {
	#bottom_copyright {
		display: none
	}
}

.shape-container {
	position: fixed;
	top: 0;
	left: var(--size-xxl);
	right: var(--size-xxl);
	bottom: var(--size-xl)
}

.shape-container>a,
.shape-container svg {
	display: block
}

.shape-container>a,
.shape-container>a>* {
	position: absolute
}

.shape-container svg {
	width: 100%;
	height: 100%;
	display: block
}

.shape-container .shape {
	will-change: transform, z-index;
	width: 100%;
	height: 100%
}

.shape-container .shape svg path {
	fill: var(--primary)
}

.shape-container .genre {
	pointer-events: none
}

.shape-container>a .shape {
	transform-origin: inherit;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.shape-container>a:hover .shape,
.shape-container>a:hover .genre {
	z-index: 2
}

.shape-container>a .genre {
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.shape-container .shape svg path {
	fill: var(--primary);
	transition: fill .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.shape-container>a:not(:hover) .shape,
.shape-container>a:not(:hover) .genre {
	z-index: -1
}

.shape-container.active>a:not(:hover) .shape svg path {
	fill: var(--gray80);
	mix-blend-mode: lighten;
	-webkit-mix-blend-mode: lighten
}

.shape-container #shape_pop {
	width: 38.5625vw;
	left: 0;
	bottom: 16vh;
	bottom: 16dvh;
	top: 31.9vh;
	top: 31.9dvh;
	transform-origin: top left
}

.shape-container #shape_pop .genre {
	left: var(--size-xxxxl);
	bottom: var(--size-xxxxl);
	width: 41.977%;
	max-width: 310px;
	transform-origin: bottom left
}

.shape-container #shape_pop:hover .shape svg path {
	fill: var(--color-pop)
}

.shape-container #shape_pop:hover .shape {
	transform: scale(1.03)
}

.shape-container #shape_pop:hover .genre {
	transform: scale(1.1)
}

.shape-container #shape_webtoon {
	width: 37.5vw;
	left: 17.375vw;
	top: 54.6vh;
	top: 54.6dvh;
	bottom: 0;
	transform-origin: bottom right
}

.shape-container #shape_webtoon .genre {
	right: 13.833%;
	bottom: var(--size-xxxxl);
	width: 50.601%;
	max-width: 364px;
	transform-origin: bottom right
}

.shape-container #shape_webtoon:hover .shape svg path {
	fill: var(--color-webtoon)
}

.shape-container #shape_webtoon:hover .shape {
	transform: scale(1.03)
}

.shape-container #shape_webtoon:hover .genre {
	transform: scale(1.1)
}

.shape-container #shape_variety {
	width: 48.25vw;
	left: 44.25vw;
	bottom: 0;
	top: 42.4vh;
	top: 42.4dvh;
	transform-origin: bottom right
}

.shape-container #shape_variety .genre {
	right: 31.2176%;
	bottom: var(--size-xxxxl);
	width: 37.435%;
	max-width: 346px;
	transform-origin: bottom right
}

.shape-container #shape_variety:hover .shape svg path {
	fill: var(--color-variety)
}

.shape-container #shape_variety:hover .shape {
	transform: scale(1.03)
}

.shape-container #shape_variety:hover .genre {
	transform: scale(1.1)
}

.shape-container #shape_media {
	width: 44.25vw;
	top: 13.8vh;
	top: 13.8dvh;
	bottom: 27vh;
	bottom: 27dvh;
	right: 0;
	transform-origin: top right
}

.shape-container #shape_media .genre {
	left: 21.32768%;
	bottom: 17.2413%;
	width: 40.8658%;
	max-width: 347px;
	transform-origin: bottom right
}

.shape-container #shape_media:hover .shape svg path {
	fill: var(--color-media)
}

.shape-container #shape_media:hover .shape {
	transform: scale(1.03)
}

.shape-container #shape_media:hover .genre {
	transform: scale(1.1)
}

@media screen and (max-width: 1080px) {
	.shape-container {
		left: var(--size-m2);
		right: var(--size-m2)
	}

	.shape-container #shape_pop {
		top: calc(3rem + var(--size-l)*2 + var(--size-xs) + .41176rem);
		right: 6.625rem;
		bottom: 56.9vh;
		bottom: 56.9dvh;
		width: auto;
		z-index: 3;
		min-width: 196px
	}

	.shape-container #shape_pop .genre {
		left: var(--size-xxl);
		bottom: var(--size-xl)
	}

	.shape-container #shape_webtoon {
		width: auto;
		top: 29vh;
		top: 29dvh;
		bottom: 47.06vh;
		bottom: 47.06dvh;
		left: 6.5625rem;
		right: var(--size-m);
		min-width: 176px;
		z-index: 2
	}

	.shape-container #shape_webtoon .genre {
		bottom: var(--size-xl)
	}

	.shape-container #shape_variety {
		left: 0;
		right: 2.5rem;
		bottom: 24.06vh;
		bottom: 24.06dvh;
		top: 48.5vh;
		top: 48.5dvh;
		width: auto;
		min-width: 250px;
		z-index: 1
	}

	.shape-container #shape_variety .genre {
		bottom: var(--size-xl)
	}

	.shape-container #shape_media {
		width: auto;
		right: 0;
		left: 4.25rem;
		top: 70.42vh;
		top: 70.42dvh;
		bottom: 0;
		min-width: 222px
	}

	.shape-container #shape_media .genre {
		bottom: 10%
	}

	.shape-container .genre {
		width: min(51.18%, 23.94vh - 4rem) !important;
		width: min(51.18%, 23.94dvh - 4rem) !important
	}
}

.trend_top_menu {
	position: fixed;
	top: var(--size-xxl);
	left: calc(var(--size-l) + 10.5vw + var(--size-xxxxl));
	background: var(--gray100);
	border-radius: 20rem;
	padding: var(--size-s) var(--size-xxl);
	z-index: 100;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.trend_top_menu .trend_top_analyze_type {
	display: flex;
	align-items: center;
	gap: var(--size-xl)
}

.trend_top_menu .trend_top_category {
	font-size: 1.0588rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--primary);
	white-space: pre
}

.trend_top_menu .trend_top_caption {
	font-size: .82352rem;
	font-weight: 650;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--gray70);
	white-space: pre
}

.trend_top_menu a,
.trend_top_menu a:link,
.trend_top_menu a:visited {
	font-size: 1.0588rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--gray60);
	transition: .3s color cubic-bezier(0.38, 1.4, 0.2, 1)
}

.trend_top_menu a,
.trend_top_menu a span,
.trend_top_menu a:link,
.trend_top_menu a:link span,
.trend_top_menu a:visited,
.trend_top_menu a:visited span {
	white-space: pre
}

.trend_top_menu a .active,
.trend_top_menu a:link .active,
.trend_top_menu a:visited .active {
	color: var(--primary)
}

.trend_top_menu a:hover,
.trend_top_menu a:link:hover,
.trend_top_menu a:visited:hover {
	color: var(--gray50)
}

@media screen and (min-width: 1081px) {
	.trend_top_menu .trend_top_analyze_type {
		gap: var(--size-xxl)
	}
}

@media screen and (max-width: 1080px) {
	.trend_top_menu {
		display: none
	}
}

.trend_top_topic {
	--left-space: calc(var(--size-l) + 10.5vw + var(--size-xxxxl) + var(--size-xxl));
	--right-space: calc(var(--size-l) + var(--size-m) * 3 + 3.17647rem * 4);
	position: fixed;
	top: calc(var(--size-xxl) + var(--size-s) + 1.64114rem + var(--size-l));
	left: var(--left-space);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--size-xxl);
	z-index: 100;
	overflow-x: auto;
	max-width: calc(100vw - var(--right-space) - var(--left-space));
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.trend_top_topic .trend_top_topic_items,
.trend_top_topic span {
	font-family: var(--font-kr)
}

.trend_top_topic .trend_top_topic_items {
	text-transform: capitalize;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: pre;
	color: var(--gray60);
	font-size: 1.0588rem;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0em;
	cursor: pointer;
	transition: .3s color cubic-bezier(0.38, 1.4, 0.2, 1)
}

.trend_top_topic .trend_top_topic_items:hover {
	color: var(--gray50)
}

.trend_top_topic .trend_top_topic_items.active {
	color: var(--primary)
}

.trend_top_topic .trend_top_topic_cnt {
	font-size: .82352rem;
	font-weight: 550;
	line-height: 1.5em;
	letter-spacing: 0em;
	text-transform: uppercase
}

@media screen and (max-width: 1080px) {
	.trend_top_topic {
		--left-space: 0;
		max-width: 100vw;
		top: calc(64px + var(--size-xxl));
		padding: 0 var(--size-l)
	}
}

.trend_top_topic {
	-ms-overflow-style: none;
	scrollbar-width: none
}

.trend_top_topic::-webkit-scrollbar {
	display: none
}

.trend_view {
	--top-space: calc(var(--size-l) + (10.5vw*.5714285) + var(--size-l));
	position: fixed;
	top: var(--top-space);
	left: var(--size-l);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var(--size-m2);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.trend_view .view-container {
	display: flex;
	gap: var(--size-xxs);
	align-items: center
}

.trend_view .view-container button {
	display: flex;
	flex-direction: column;
	align-items: center
}

.trend_view .view-container button span {
	color: var(--gray70);
	font-size: .647rem;
	line-height: 1.4em;
	font-weight: 500
}

.trend_view .view-container button span svg path {
	fill: var(--gray70)
}

.trend_view .view-container button:not(.active) {
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.trend_view .view-container button:not(.active):hover {
	transform: scale(1.1)
}

.trend_view .view-container button.active span {
	color: var(--primary)
}

.trend_view .view-container button.active span svg path {
	fill: var(--primary)
}

.trend_view .view-container button span:first-child {
	width: 2.353rem;
	height: 2.353rem
}

.trend_view .view-container button span:first-child svg {
	width: 100%;
	height: 100%;
	display: inline-block
}

.trend_view .region-container {
	display: flex;
	flex-direction: column;
	padding-left: var(--size-xxs);
	gap: var(--size-xxs);
	align-items: flex-start
}

.trend_view .region-container button {
	border-radius: .2em;
	overflow: hidden;
	font-size: .82352rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--gray60);
	font-family: var(--font-kr);
	padding: 0 var(--size-xxs);
	text-transform: capitalize;
	letter-spacing: .04em
}

.trend_view .region-container button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.trend_view .region-container button:hover::after {
	opacity: 1
}

.trend_view .region-container button.active {
	color: var(--primary)
}

@media screen and (max-width: 1080px) {
	.trend_view {
		--top-space: calc(64px + var(--size-xxl) + 1.3rem + var(--size-l));
		left: var(--size-m2)
	}

	.trend_view .region-container {
		padding-left: 0
	}

	.trend_view.no-keyword {
		--top-space: calc(64px + var(--size-xxl))
	}
}

@media screen and (max-width: 1080px) {
	body[data-type=ontology] .trend_view {
		position: relative;
		top: unset;
		left: unset
	}
}

body[data-type=topic] .content_scroll {
	display: flex;
	flex-direction: column
}
/*
body[data-type=topic] .topic_acc {
	display: flex;
	align-items: flex-end;
	max-width: 1080px
}

body[data-type=topic] .trend_side_keyword {
	position: relative;
	bottom: unset;
	left: unset
}
*/
@media screen and (max-width: 1080px) {
	body[data-type=topic] .trend_side_keyword {
		padding: 0 var(--size-xxl);
		flex-direction: row;
		flex-wrap: wrap
	}

	body[data-type=topic] .trend_side_keyword>* {
		width: 20%
	}
}

@media screen and (max-width: 768px) {
	body[data-type=topic] .trend_side_keyword>* {
		width: 33.3%
	}
}

@media screen and (max-width: 480px) {
	body[data-type=topic] .trend_side_keyword>* {
		width: 50%
	}
}

@media screen and (min-width: 1081px) {
	body[data-type=topic] .topic_notice {
		order: 2
	}
}

.trend_side_keyword {
	--bottom-space: calc(var(--size-l) + 8.3125vw * .368 + 0.647rem + var(--size-xxs));
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-xxs);
	z-index: 100;
	bottom: calc(var(--bottom-space) + var(--size-xxl));
	left: var(--size-l);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.trend_side_keyword button {
	border-radius: .2em;
	overflow: hidden;
	margin-left: calc(var(--size-xxs)*-1)
}

.trend_side_keyword button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.trend_side_keyword button:hover::after {
	opacity: 1
}

.trend_side_keyword button,
.trend_side_keyword button span {
	font-family: var(--font-kr);
	font-size: .82352rem;
	font-weight: 650;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--gray40)
}

.trend_side_keyword button span {
	display: flex;
	align-items: center;
	gap: var(--size-m);
	text-transform: capitalize;
	padding: 0 var(--size-xxs)
}

.trend_side_keyword button span::before {
	content: "";
	background: var(--gray70);
	width: 1em;
	height: 1em;
	display: inline-block
}

.trend_side_keyword button.active,
.trend_side_keyword button.active span {
	color: var(--primary)
}

.trend_side_keyword button[data-frequency="1"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.8))
}

.trend_side_keyword button[data-frequency="2"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.7))
}

.trend_side_keyword button[data-frequency="3"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.6))
}

.trend_side_keyword button[data-frequency="4"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.5))
}

.trend_side_keyword button[data-frequency="5"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.4))
}

.trend_side_keyword button[data-frequency="6"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.3))
}

.trend_side_keyword button[data-frequency="7"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.2))
}

.trend_side_keyword button[data-frequency="8"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(255, 255, 255, 0.15))
}

.trend_side_keyword button[data-frequency="9"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(255, 255, 255, 0.3))
}

.trend_side_keyword button[data-frequency="10"] span::before {
	background: color-mix(in srgb, var(--primary), rgba(255, 255, 255, 0.9))
}

.trend_side_keyword button[data-frequency=negative] span::before {
	background: var(--color-pop)
}

.trend_side_keyword button[data-frequency=positive] span::before {
	background: var(--color-webtoon)
}

.trend_side_keyword button[data-frequency=neutral] span::before {
	background: var(--color-variety)
}

.trend_side_keyword button[data-color=color0] span::before { background: #FB8762; }
.trend_side_keyword button[data-color=color1] span::before { background: #FBBD62; }
.trend_side_keyword button[data-color=color2] span::before { background: #FBEB62; }
.trend_side_keyword button[data-color=color3] span::before { background: #A5F06A; }
.trend_side_keyword button[data-color=color4] span::before { background: #69CF9E; }
.trend_side_keyword button[data-color=color5] span::before { background: #9BE8F9; }
.trend_side_keyword button[data-color=color6] span::before { background: #62BAFB; }
.trend_side_keyword button[data-color=color7] span::before { background: #62A8FB; }
.trend_side_keyword button[data-color=color8] span::before { background: #7B80E3; }
.trend_side_keyword button[data-color=color8] span::before { background: #7B69D0; }

.trend_side_keyword button[data-color=color51] span::before { background: #C170E7; }
.trend_side_keyword button[data-color=color52] span::before { background: #A584C5; }
.trend_side_keyword button[data-color=color53] span::before { background: #FBC2D7; }
.trend_side_keyword button[data-color=color54] span::before { background: #FBC3AB; }
.trend_side_keyword button[data-color=color55] span::before { background: #699C8A; }
.trend_side_keyword button[data-color=color56] span::before { background: #CF836A; }
.trend_side_keyword button[data-color=color57] span::before { background: #CF74B0; }


.trend_side_keyword button[data-color=red] span::before {
	background: #fb8762
}

.trend_side_keyword button[data-color=orange] span::before {
	background: #fbbd62
}

.trend_side_keyword button[data-color=yellow] span::before {
	background: #fbeb62
}

.trend_side_keyword button[data-color=lime] span::before {
	background: #a5f06a
}

.trend_side_keyword button[data-color=green] span::before {
	background: #69cf9e
}

.trend_side_keyword button[data-color=cyan] span::before {
	background: #9be8f9
}

.trend_side_keyword button[data-color=sky] span::before {
	background: #62bafb
}

.trend_side_keyword button[data-color=blue] span::before {
	background: #62a8fb
}

.trend_side_keyword button[data-color=purple] span::before {
	background: #7b80e3
}

.trend_side_keyword button[data-color=vi_blue] span::before {
	background: var(--color-wave)
}

.trend_side_keyword button[data-color=pink] span::before {
	background: var(--chart-contents)
}

.trend_side_keyword button[data-color=vi_orange] span::before {
	background: var(--chart-evaluation)
}

.trend_side_keyword button[data-color=lavender] span::before {
	background: var(--chart-issue)
}

.trend_side_keyword button[data-color=gray] span::before {
	background: var(--gray70)
}



@media screen and (max-width: 1080px) {
	.trend_side_keyword {
		left: var(--size-m2);
		bottom: var(--size-xxl)
	}
}

.globe-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%
}

.globe-wrapper canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

#globe-3d,
#globe-2d-overlay,
#globe-popup-overlay,
.globe-popup {
	display: block;
	position: absolute
}

#globe-2d-overlay,
#globe-popup-overlay {
	pointer-events: none
}

.globe-popup {
	z-index: 100;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0;
	color: #111;
	font-family: sans-serif;
	padding: var(--size-s) var(--size-l) var(--size-m2);
	padding-left: var(--size-m2);
	font-size: 15px;
	border-radius: var(--radius-l);
	filter: drop-shadow(0px 0px 3px #555555);
	pointer-events: all
}

.globe-popup,
.globe-popup * {
	font-family: var(--font-kr)
}

.globe-popup .globe-data-date {
	font-weight: 700
}

.globe-keyword-table {
	text-align: left;
	vertical-align: top;
	width: 100%
}

.globe-keyword-table th {
	font-weight: 500
}

.globe-keyword-table tr td {
	padding: var(--size-xxxs) 0
}

.globe-keyword-table tr:not(:nth-child(1)) td:first-child span {
	display: inline-block;
	border-radius: 2rem;
	padding: var(--size-xxxs) var(--size-m);
	font-weight: 650;
	text-transform: capitalize;
	white-space: pre
}

.globe-keyword-table tr:not(:nth-child(1)) td:not(:first-child) {
	padding: 0 var(--size-s)
}

.globe-keyword-table tr:not(:nth-child(1)) td:not(:first-child),
.globe-keyword-table tr:not(:nth-child(1)) td:not(:last-child) {
	padding-right: var(--size-m)
}

.globe-keyword-table tr:not(:nth-child(1)) td:last-child {
	padding-right: 0
}

.globe-keyword-table tr:not(:nth-child(1)) td:last-child {
	font-weight: 500
}

.globe-keyword-table tr:nth-child(2) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.8))
}

.globe-keyword-table tr:nth-child(3) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.7))
}

.globe-keyword-table tr:nth-child(4) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.6))
}

.globe-keyword-table tr:nth-child(5) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.5))
}

.globe-keyword-table tr:nth-child(6) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.4))
}

.globe-keyword-table tr:nth-child(7) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.3))
}

.globe-keyword-table tr:nth-child(8) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(0, 0, 0, 0.2))
}

.globe-keyword-table tr:nth-child(9) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(255, 255, 255, 0.15))
}

.globe-keyword-table tr:nth-child(10) td:first-child span {
	background: color-mix(in srgb, var(--primary), rgba(255, 255, 255, 0.3))
}

.globe-keyword-table td:first-child {
	background: var(--primary)
}

.canvas-2d {
	pointer-events: none;
	position: absolute;
	top: 0
}

.canvas-2d .label {
	pointer-events: all;
	cursor: pointer
}

.canvas-2d .label>div {
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1);
	letter-spacing: .01em;
	font-weight: 450;
	line-height: 1.5em;
	font-size: 1.176rem;
	padding: var(--size-xxs) var(--size-l) var(--size-xxs);
	background: var(--gray100);
	border-radius: 10rem;
	color: var(--primary);
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1)
}

.canvas-2d .label>div:hover {
	transform: scale(1.03)
}

.canvas-2d .label>div:hover {
	background: var(--primary);
	color: var(--gray100)
}

.canvas-2d .label.active>div {
	background: var(--primary);
	color: var(--gray100)
}

.canvas-2d .label.behind>div {
	opacity: 0
}

@media screen and (min-width: 1081px) {
	.canvas-2d .label>div {
		font-size: 1.41176rem
	}
}

@media screen and (max-width: 768px) {
	.canvas-2d .label>div {
		font-size: calc(.8vw + .7rem)
	}
}

@media screen and (max-width: 480px) {
	.canvas-2d .label>div {
		padding: var(--size-xxxs) var(--size-m2) var(--size-xxs)
	}
}

.globe-popup {
	background: var(--primary);
	color: var(--gray100);
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em
}

.notice,
.trend_earth_notice {
	padding-bottom: var(--size-l);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.notice p,
.trend_earth_notice p {
	color: var(--gray70);
	text-align: center;
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em
}

.trend_earth_notice {
	position: fixed;
	z-index: 100;
	bottom: var(--size-l);
	left: 50%;
	transform: translate(-50%, 0)
}

@media screen and (max-width: 768px) {
	.trend_earth_notice {
		bottom: unset;
		top: calc(64px + var(--size-xxl) + 1.3rem + var(--size-l));
		padding-bottom: 0;
		padding-top: var(--size-l)
	}
}

.content_scroll {
	--top-space: calc(var(--size-xxl) + var(--size-s) + 1.64114rem + var(--size-l));
	--left-space: calc(var(--size-l) + 10.5vw + var(--size-xxxxl) + var(--size-xxl));
	margin-top: calc(var(--top-space) + 1.0588rem + var(--size-xxl));
	margin-left: var(--left-space);
	margin-right: var(--left-space)
}

.content_scroll img {
	width: 100%;
	display: inline-block
}

.content_scroll>* {
	margin-bottom: 3.7647rem;
}

.content_scroll.no-keyword {
	margin-top: var(--top-space)
}

.content_scroll .topic_notice {
	margin-bottom: 0
}

@media screen and (max-width: 1080px) {
	.content_scroll {
		--top-space: calc(64px + var(--size-l));
		--left-space: var(--size-l)
	}

	.content_scroll.no-keyword {
		margin-top: calc(64px + var(--size-xxl) + 3.75rem)
	}
}

.content_text_top {
	max-width: max(40vw, 624px)
}

.content_text_top p {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.5em;
	letter-spacing: -0.01em;
	font-family: var(--font-kr)
}

.text-chart-container {
	margin-left: -1rem;
	margin-right: -4.5rem
}

@media screen and (max-width: 1080px) {
	.text-chart-container {
		margin-left: 0;
		margin-right: 0
	}
}

.content_text_summary_container {
	display: flex;
	justify-content: space-between;
	gap: var(--size-l) var(--size-xl);
	flex-wrap: wrap
}

.content_text_summary_container h6 {
	font-size: .882352rem;
	font-weight: 500;
	line-height: 1.55em;
	letter-spacing: 0em;
	width: 100%;
	padding: 0 var(--size-l)
}

.content_text_summary {
	width: calc(50% - var(--size-xl)/2);
	background: var(--gray100);
	padding: var(--size-m2) var(--size-l);
	border-radius: var(--radius-l);
	display: flex;
	gap: var(--size-l);
	align-items: flex-start;
	cursor: pointer;
	transition: .3s background cubic-bezier(0.38, 1.4, 0.2, 1)
}

.content_text_summary>p:first-child {
	width: 2.11em;
	flex-shrink: 0;
	flex-grow: 0
}

.content_text_summary_c {
	flex: 1;
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	word-break: break-all;
}

.content_text_summary>p {
	flex: 1;
	color: var(--gray50);
	font-size: .82352rem;
	font-weight: 400;
	line-height: 1.5em;
	letter-spacing: 0em
}

.content_text_summary:hover {
	background: var(--gray95)
}

@media screen and (max-width: 768px) {
	.content_text_summary {
		width: 100%
	}
}

.text_original_grid_wrapper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: var(--size-l);
	gap: var(--size-xl)
}

.text_original_grid_wrapper>div {
	width: 100%
}

@media screen and (max-width: 1400px) {
	.text_original_grid_wrapper {
		grid-template-columns: repeat(4, 1fr)
	}
}

@media screen and (max-width: 768px) {
	.text_original_grid_wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--size-m2)
	}
}

.text_original_navigation {
	z-index: 2;
	position: sticky;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	pointer-events: none;
	width: 100%;
	padding-bottom: 2rem
}

.text_original_navigation button {
	background-color: var(--primary);
	position: absolute;
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.8235rem;
	width: 2.8235rem;
	border-radius: 6rem;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1);
	overflow: hidden
}

.text_original_navigation button:hover {
	transform: scale(1.03)
}

.text_original_navigation button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.text_original_navigation button:hover::after {
	opacity: 1
}

.text_original_navigation button:nth-child(1) {
	left: var(--size-l)
}

.text_original_navigation button:nth-child(2) {
	right: var(--size-l)
}

.text_original_pagination {
	margin: 1rem auto 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--size-xl)
}

.text_original_pagination button {
	font-size: 1.176rem;
	font-weight: 400;
	line-height: 1.5em;
	letter-spacing: .01em;
	color: var(--gray40);
	padding: 0 var(--size-xs);
	border-radius: .5em;
	overflow: hidden
}

.text_original_pagination button::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.text_original_pagination button:hover::after {
	opacity: 1
}

.text_original_pagination button.active {
	color: var(--primary)
}

.text_original_pagination button:disabled {
	opacity: .3
}

.text_original_pagination button svg path {
	stroke: var(--gray40)
}

.text_original_pagination button.pagination-arrow {
	display: flex;
	align-items: center
}

@media screen and (max-width: 1080px) {
	.text_original_pagination {
		gap: var(--size-m2)
	}

	.text_original_pagination button {
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5em;
		letter-spacing: -0.01em
	}
}

.popup_original {
	padding: var(--size-l) var(--size-m2);
	border-radius: var(--radius-l);
	display: flex;
	flex-direction: column;
	gap: var(--size-xxxxl);
	background: var(--gray90);
	color: var(--gray40);
	overflow: hidden;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.popup_original.positive {
	background: var(--chart-positive)
}

.popup_original.negative {
	background: var(--chart-negative)
}

.popup_original .popup-contents-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--size-m2)
}

.popup_original .popup-contents-wrapper>div:nth-child(1) {
	display: flex;
	gap: var(--size-s)
}

.popup_original .popup-contents-wrapper>div:nth-child(1) p:first-child {
	color: var(--gray0);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -0.01em
}

.popup_original .popup-contents-wrapper>div:nth-child(1) p:last-child {
	color: var(--gray50);
	font-size: .647rem;
	line-height: 1.4em;
	font-weight: 400
}

.popup_original .popup-contents-wrapper .sns-holder {
	width: 2.3em;
	height: 2.3em;
	border-radius: var(--radius-s);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center
}

.popup_original .popup-contents-wrapper>div:nth-child(2) {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em;
	flex: 1
}

.popup_original .popup-info-wrapper {
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em;
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-xxxs) var(--size-l)
}

.popup_original .popup-info-wrapper>div:nth-child(odd) {
	flex-grow: 2;
	min-width: 50%
}

.popup_original .popup-info-wrapper>div:nth-child(even) {
	flex-grow: 1
}

.popup_original .popup-info-wrapper>div {
	display: flex;
	align-items: center;
	gap: var(--size-s)
}

.popup_original::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .05);
	opacity: 0;
	transition: .3s all cubic-bezier(0.38, 1.4, 0.2, 1);
	pointer-events: none
}

.popup_original:hover::after {
	opacity: 1
}

.popup_original:hover {
	transform: scale(1.03)
}

.topic_acc {
	display: inline-block
}

.contents-modal-trigger {
	position: fixed;
	left: 50%;
	bottom: var(--size-xxxxl);
	transform: translateX(-50%);
	background: var(--gray100);
	color: var(--primary);
	border-radius: 10rem;
	box-shadow: var(--modal-shadow);
	padding: var(--size-xs) var(--size-l);
	font-size: .82352rem;
	font-weight: 750;
	line-height: 1.5em;
	letter-spacing: 0em;
	min-width: 110px
}

@media screen and (min-width: 769px) {
	.contents-modal-trigger {
		display: none
	}
}

.contents-modal-trigger.main {
	bottom: unset;
	top: calc(3rem + var(--size-l)*2)
}

@media screen and (max-width: 1080px) {
	.contents-modal-trigger.main {
		display: block
	}
}

@media screen and (min-width: 1081px) {
	.contents-modal-trigger.main {
		display: none
	}
}

.contents-modal-trigger:hover {
	background: var(--primary);
	color: var(--gray100)
}

.modal-contents_main {
	width: 100%;
	padding: var(--size-xl);
	align-items: flex-start;
	z-index: 100
}

.modal-contents_main .modal-overlay {
	background: rgba(255, 255, 255, .8) !important
}

.modal-contents_main h1 {
	text-wrap-style: balance;
	padding-bottom: var(--size-m)
}

.modal-contents_main h1,
.modal-contents_main p {
	color: var(--primary)
}

.modal-contents_main p {
	font-family: var(--font-kr);
	font-weight: 600;
	line-height: 1.7em
}

.modal-contents_main .modal-contents {
	--top-space: calc(3rem + var(--size-l)*2 + var(--size-xs) + .41176rem);
	top: var(--top-space);
	bottom: var(--size-l);
	height: calc(100% - var(--top-space) - var(--size-xxxl));
	display: flex;
	flex-direction: column;
	pointer-events: none !important
}

.modal-contents_main .modal-contents>div:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end
}

.modal-contents_main .modal-close {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	left: unset;
	right: unset;
	background: var(--primary);
	color: var(--gray100);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -0.01em;
	padding: var(--size-xs) var(--size-xl);
	padding-right: var(--size-m2);
	border-radius: 3rem;
	height: auto;
	transition: transform .7s cubic-bezier(0.38, 1.4, 0.2, 1)
}

.modal-contents_main .modal-close:hover {
	transform: scale(1.02)
}

.modal-contents_main .modal-close span:last-child {
	width: var(--size-xxxxl);
	height: var(--size-xxxxl)
}

.modal-contents_main .modal-close span:last-child svg path {
	fill: var(--gray100)
}

@media screen and (min-width: 1081px) {
	.modal-contents_main {
		display: none !important
	}
}

.base-analyze-modal-container {
	align-items: initial;
	justify-content: flex-start;
	flex-direction: column;
	padding: 0 var(--size-l);
	overflow-y: auto
}

.base-analyze-modal-container .modal-overlay {
	position: fixed
}

@media screen and (min-width: 769px) {
	.base-analyze-modal-container .modal-overlay {
		display: none
	}
}

.base-analyze-modal-container .modal-close {
	position: relative;
	top: unset;
	right: unset;
	margin: 0 auto;
	background-color: var(--primary);
	border-radius: 10rem;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--size-m);
	margin-bottom: var(--size-l);
	margin-top: 8vh
}

.base-analyze-modal-container .modal-close svg {
	width: 100%;
	height: 100%
}

.base-analyze-modal-container .modal-close svg path {
	fill: var(--gray100)
}

.base-analyze-modal-container .modal-contents {
	width: 100%
}

.base-analyze-modal-container .modal-contents>div {
	min-height: 85vh;
	background: #fff;
	bottom: 0;
	border-top-left-radius: var(--radius-l);
	border-top-right-radius: var(--radius-l);
	padding: var(--size-xl) var(--size-l) var(--size-xxxl)
}

.base-analyze-modal-container .modal-contents .contents-data-wrapper {
	background: var(--gray95);
	padding: var(--size-m2) var(--size-m2) var(--size-l);
	border-radius: var(--radius-l);
	margin-bottom: var(--size-m2);
	font-size: .82352rem;
	font-weight: 450;
	line-height: 1.5em;
	letter-spacing: 0em
}

.base-analyze-modal-container .modal-contents p {
	font-weight: 500;
	font-family: var(--font-kr);
	line-height: 1.66em
}

.base-analyze-modal-container .trend_original_grid_wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--size-l)
}

@media screen and (max-width: 480px) {
	.base-analyze-modal-container .trend_original_grid_wrapper {
		grid-template-columns: repeat(1, 1fr)
	}
}

@media screen and (min-width: 769px) {
	.base-analyze-modal-container {
		align-items: flex-end
	}

	.base-analyze-modal-container .modal-contents {
		width: clamp(350px, 40%, 600px)
	}

	.base-analyze-modal-container .modal-close {
		margin-right: 0
	}
}

@media screen and (min-width: 2380px) {
	.base-analyze-modal-container .modal-contents {
		width: 700px
	}
}

.modal-contents_trend .modal-contents p {
	font-weight: 500;
	font-family: var(--font-kr);
	line-height: 1.66em
}

.modal-contents_trend .modal-contents>div>div:not(.continent-title) {
	margin-bottom: 2.6rem
}

.modal-contents_trend .modal-contents .continent-title {
	margin-bottom: var(--size-s)
}

.modal-contents_trend .modal-contents .continent-title p {
	font-weight: 700
}

.modal-contents_trend .modal-contents .globe-keyword-table,
.modal-contents_trend .modal-contents .globe-keyword-table * {
	font-family: var(--font-kr)
}

.modal-contents_trend .modal-contents .globe-keyword-table td:first-child {
	background: rgba(0, 0, 0, 0);
	width: 50%
}

.modal-contents_trend .modal-contents .globe-keyword-table td:first-child span {
	color: var(--gray100)
}

.modal-contents_trend .modal-contents .globe-keyword-table td:last-child {
	font-weight: 700
}

.modal-contents_trend .modal-contents .globe-keyword-table th {
	font-weight: 700;
	padding: 0 var(--size-xs) var(--size-xxxs)
}

.modal-contents_topic .modal-contents>div>div {
	margin-bottom: 4rem
}

.modal-contents_topic .keyword-title {
	display: flex;
	align-items: baseline;
	gap: 0 var(--size-m);
	flex-wrap: wrap;
	padding-bottom: var(--size-m)
}

.modal-contents_topic .keyword-title h2 {
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 750;
	line-height: 1.15em;
	letter-spacing: .01em
}

.modal-contents_topic .keyword-title p {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -0.01em
}

.modal-contents_topic .piechart-container {
	display: flex;
	gap: var(--size-xxl)
}

.modal-contents_topic .piechart-container .chart-wrapper {
	width: 40%
}

.modal-contents_topic .piechart-container .favor-wrapper {
	width: 60%;
	display: flex;
	gap: var(--size-xxl);
	flex-wrap: wrap
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice) {
	flex: 1
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice) p:first-child {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -0.01em;
	color: var(--gray0)
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice) p:not(:first-child) {
	text-transform: uppercase;
	font-family: var(--font-multilingual)
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice):nth-child(1) {
	color: var(--color-webtoon)
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice):nth-child(2) {
	color: var(--color-variety)
}

.modal-contents_topic .piechart-container .favor-wrapper>div:not(.notice):not(.trend_earth_notice):nth-child(3) {
	color: var(--color-pop)
}

.modal-contents_topic .piechart-container .favor-wrapper .notice,
.modal-contents_topic .piechart-container .favor-wrapper .trend_earth_notice {
	width: 100%
}

.modal-contents_topic .piechart-container .favor-wrapper .notice p,
.modal-contents_topic .piechart-container .favor-wrapper .trend_earth_notice p {
	text-align: left
}

.modal-contents_topic .trend_original_grid_wrapper {
	margin-top: 2rem
}

.modal-contents_topic .text_filter_title {
	display: flex;
	align-items: baseline;
	justify-content: space-between
}

.modal-contents_topic .text_filter_title .filter-text {
	font-size: .82352rem;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0em;
	color: var(--primary)
}

.modal-contents_topic h6 {
	padding-bottom: var(--size-s)
}


.topic_acc .ontology_summary {
	flex: 1;
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	word-break: break-all;
}