@charset "utf-8";

/* import */
@import "/common/lib/style/webfont/Pretendard.css";
@import "/common/lib/style/webfont/Rationale.css";
@import "/common/lib/style/webfont/BebasNeue.css";

/* _site_setting.scss */
html {
	scroll-behavior: smooth;
}

body, html {
	padding: 0;
	margin: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard Variable",Pretendard,Roboto,"Noto Sans KR","Segoe UI","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
	
	/*기본 폰트색 배경색*/
	color: #fff;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, div, table, th, td, form, fieldset, legend, input, textarea, button, select, a {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

article, aside, dialog, footer, header, main, section, footer, nav {
	display: block;
}

ul, ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
	cursor:pointer;
}

a:active, a:focus, a:hover {
	text-decoration: none;
}

button {
	border: none;
	background: none;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
}

button:focus, button:active {
	outline: none;
}

button span {
	position: relative;
}

body {
	min-width: 320px;
}

.hide {
	display: none;
}

.blind {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	margin: -1px;
	padding: 0;
	clip: rect(0, 0, 0, 0);
	background: transparent;
}

.scroll-hidden {
	overflow: hidden;
}

[data-object-fit='cover'] {
	object-fit: cover;
}

[data-object-fit='contain'] {
	object-fit: contain;
}

img {
	max-width: 100%;
}

::selection {
	color: fff;
	background-color: #97815E;
}

@media screen and (min-width: 1180px) {
	.pc-none {
		display: none;
	}
}

@media screen and (max-width: 1179px) {
	.mo-none {
		display: none;
	}
}

/* 공용 */
.scroll-lock {
	overflow: hidden;
}

.rationale {
	font-family: "Rationale", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.bebasneue {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.scroll-bar::-webkit-scrollbar {
    width: 4px;
	height: 4px;
}

.scroll-bar::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(182, 143, 103, 0.60);
}

.scroll-bar::-webkit-scrollbar-track {
	border-radius: 10px;
	background: rgba(72, 72, 72, 0.80);
	width: calc(100% - 60px);
}

.scroll-bar::-webkit-scrollbar-button {
    width: 15px;
    height: 15px;
    opacity: 0;
}

.pen {
	pointer-events: none;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	padding: 12px 0;
	width: 100%;
	background: rgba(21, 21, 21, 0.20);
	box-sizing: border-box;
	backdrop-filter: blur(20px);
	transition: .2s;
}

.header.act {
	transform: translateY(-100%);
}

.header.menu-on {
	background-color: rgba(0, 0, 0, .9);
	backdrop-filter: blur(0px);
	z-index: 100;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.header {
		padding: 10px 32px 11px;
	}
}

@media screen and (max-width: 639px) {
	.header {
		padding: 10px 20px 11px;
	}
}

.header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1176px;
	height: 100%;
	margin: 0 auto;
}

.header h1 a {
	display: flex;
}

.header h1 a svg {
	width: 90px;
	height: 28px;
}

.logo-gold .dot { fill: #dec673;}
.logo-gold .lo-i { fill: #bea876; }
.logo-gold .lo-n { fill: #d7c293; }
.logo-gold .lo-v { fill: #d7c293; }
.logo-gold .lo-e { fill: #d7c293; }


.header nav {
	display: flex;
	gap: 15px;
}

@media screen and (max-width: 1179px) {
	.header nav {
		flex-direction: column;
		gap: 24px;
		position: fixed;
        top: 56px;
        left: 0;
        z-index: 5;
        overflow: hidden;
		padding: 50px 32px;
        width: 100%;
        height: 0;
        background-color: rgba(0, 0, 0, .9);
		box-sizing: border-box;
		transition: .2s;
		opacity: 0;
		pointer-events: none;
	}

	.header nav::after {
		content: "";
	}

	.header nav.menu-on {
		opacity: 1;
		pointer-events: all;
		height: calc(100svh - 56px);
	}
}

@media screen and (max-width: 639px) {
	.header nav {
		padding: 50px 20px;
	}
}

.header nav a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 20px;
	border-radius: 30px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	transition: all .15s;
}

@media screen and (max-width: 1179px) {
	.header nav a {
		padding: 0;
		font-size: 32px;
		line-height: normal;
	}
}

.header nav a:hover {
	background-color: #97815E;
}

@media screen and (max-width: 1179px) {
	.header nav a:hover {
		background-color: transparent;
	}
}

.header nav a[href="#event"] svg {
	display: none;
	width: 32px;
}

@media screen and (max-width: 1179px) {
	.header nav a[href="#event"] svg {
		display: block;
	}
}

.header nav p {
	display: none;
	position: absolute;
	bottom: 24px;
	left: 20px;
	width: calc(100% - 40px);
	color: #636363;
}

@media screen and (max-width: 1179px) {
	.header nav p {
		display: block;
	}
}

.header .share-login {
	display: flex;
	gap: 10px;
}

.header .share-login .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 2px solid transparent; 
	border-radius: 50px;
	color: #fff;
	transition: all .15s;
}

@media screen and (max-width: 1179px) {
	.header .share-login .btn {
		padding: 5px !important;
		border: 0 !important;
	}
}

@media screen and (max-width: 1179px) {
	.header .share-login .btn span {
		width: 1px;
		height: 1px;
		overflow: hidden;
		position: absolute;
		margin: -1px;
		padding: 0;
		clip: rect(0, 0, 0, 0);
		background: transparent;
	}
}

.header .share-login .btn.share {
	padding: 6px 15px;
	border: 2px solid rgba(255, 255, 255, 0.40);
}

.header .share-login .btn.share:hover {
	opacity: .6;
}

.header .share-login .btn.logincheck {
	padding: 6px;
}

.header .share-login .btn.logincheck.login {
	background-color: #232323;
}

.header .share-login .btn.mo-menu {
	display: none;
}

.header .share-login .btn.mo-menu .x-btn {
	display: none;
}

.header .share-login .btn.mo-menu.act .hamburger-menu {
	display: none;
}

.header .share-login .btn.mo-menu.act .x-btn {
	display: block;
}

@media screen and (max-width: 1179px) {
	.header .share-login .btn.mo-menu {
		display: flex;
	}
}

.right-navi {
	position: fixed;
	top: 50%;
	right: -25px;
	z-index: 50;
	transform: translate(0, -50%);
	transition: .2s;
	opacity: 0;
	filter: blur(5px);
}

@media screen and (max-width: 1179px) {
	.right-navi {
		display: none;
	}
}

.right-navi.act {
	right: 20px;
	opacity: 1;
	filter: blur(0px) drop-shadow(0px 0px 2px #1C2025) drop-shadow(0px 0px 2px #1C2025);
}

.right-navi .now {
    position: absolute;
    top: -26px;
    left: 16px;
	min-width: 200px;
	transform: rotate(-90deg);
    transform-origin: left center;
}

.right-navi nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.right-navi nav::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: calc(100% - 28px);
	background-color: #fff;
}

.right-navi nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 5;
	padding: 12px;
}

.right-navi nav a .dot {
	position: relative;
	width: 10px;
	height: 10px;
	background-color: #cecac3;
	border-radius: 50%;
}

.right-navi nav a.act .dot {
	background-color: #BA8E48;
}

.right-navi nav a .dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 17px;
	height: 17px;
	border: 1px solid #cac2ab;
	border-radius: 3px;
	transition: .25s;
	pointer-events: none;
	opacity: 0;
}

.right-navi nav a:hover .dot::after,
.right-navi nav a.act .dot::after {
	transform: translate(-50%, -50%) rotate(-45deg);
	opacity: 1;
}

.right-navi nav a .menu {
	position: absolute;
	right: 100%;
	padding: 2px 5px 2px 6px;
	border-radius: 3px;
	background: #FFF;
	color: #B68F67;
	text-align: right;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	word-break: keep-all;
	pointer-events: none;
	opacity: 0;
	transition: all .2s;
}

.right-navi nav a:hover .menu {
	right: calc(100% + 13px);
	opacity: 1;
}

.right-navi nav a .menu::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: -11px;
	transform: translate(0, -50%);
	width: 0;
	height: 0;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-left: 6px solid #fff;
	border-right: 6px solid transparent;
}

.right-navi nav a span {
	transform: rotate(-45deg);
}

.contents {
	margin-top: -1px;
	width: 100%;
	height: 100svh;
	background-color: #1C2025;
}

.contents:not(#main) {
	position: relative;
	z-index: 10;
	contain: paint;
}

.anniversary-video-bg {
	position: fixed;
    top: 0;
    left: 0;
	z-index: 0;
	width: 100%;
    height: 100svh;
    min-height: 945px;
	background-color: #1C2025;
}

.anniversary-video-bg::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100svh;
	background-color: rgba(0, 0, 0, .7);
	pointer-events: none;
}

.video-background {
	position: absolute;
	top: -102px;
	left: 0;
	right: 0;
	bottom: 0;
}

@media screen and (max-width: 1179px) {
	.video-background {
		top: -60px;
	}
}

.video-background .video {
	position: absolute;
	top: -102px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

@media screen and (max-width: 1179px) {
	.video-background .video {
		top: -60px;
	}
}

.video-background .video iframe {
	width: 200%;
	height: 104%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (max-width: 1179px) {
	.video-background .video iframe {
		min-width: 1600px;
	}
}

.contents-title {
	margin: 0 0 60px 0;
	color: #FFF;
	text-align: center;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 60px;
}

@media screen and (max-width: 1179px) {
	.contents-title {
		margin: 0 0 30px 0;
		font-size: 36px;
		line-height: 120%;
	}
}

.contents-title span {
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

footer {
	position: relative;
	z-index: 20;
	margin-top: -1px;
	padding: 65px 0;
	background: #000;
}

@media screen and (max-width: 1179px) {
	footer {
		padding: 46px 0;
	}
}

footer .inner {
	margin: 0 auto;
	max-width: 1180px;
}

@media screen and (max-width: 1179px) {
	footer .inner {
		padding: 0 32px;
	}
}

footer .footer-logo {
	margin: 0 0 64px 0;
}

@media screen and (max-width: 1179px) {
	footer .footer-logo {
		margin: 0 0 54px 0;
	}
}

footer .footer-logo svg {
	width: 176px;
}

@media screen and (max-width: 1179px) {
	footer .footer-logo svg {
		width: 100px;
	}
}

footer .footer-con h3 {
	margin: 0 0 12px 0;
}

footer .member {
	display: flex;
	gap: 84px;
	margin: 0 0 26px;
	font-size: 14px;
	font-weight: 300;
}

@media screen and (max-width: 1179px) {
	footer .member {
		flex-direction: column;
		gap: 20px;
	}
}

footer .copyright {
	color: #636363;
	font-size: 14px;
	font-weight: 300;
}

/* top */
.float-btn {
	position: fixed;
	right: 25px;
	z-index: 50;
}

.float-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
}

@media screen and (max-width: 1179px) {
	.float-btn a {
		width: 42px;
		height: 42px;
	}
}

.float-btn.top {
	bottom: 25px;
}

.float-btn.top a {
	background-color: #f4f4f4;
	border: 1px solid #B68F67;
}

.float-btn svg {
	width: 32px;
}

@media screen and (max-width: 1179px) {
	.float-btn svg {
		width: 24px;
	}
}

.float-btn.event {
	display: none;
	bottom: 80px;
}

@media screen and (max-width: 1179px) {
	.float-btn.event {
		display: block;
	}
}

.float-btn.event a {
	background-color: #97815E;
}

/* 축전/축사 팝업 */
.content_popup {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100dvh;
	background-color: rgba(0, 0, 0, .9);
}

.content_popup.act {
	display: flex;
}

.content_popup .content_box {
	position: relative;
}

.content_popup .content_box img {
    height: 100%;
    max-height: 90dvh;
}

.content_popup .content_box iframe.horizontal {
    width: 800px;
    height: 448px;
}

@media screen and (max-width: 1179px) {
    .content_popup .content_box iframe.horizontal {
        width: 500px;
        height: 350px;
    }
}

@media screen and (max-width: 639px) {
    .content_popup .content_box iframe.horizontal {
        width: 262px;
        height: auto;
    }
}

.content_popup .content_box iframe.vertical {
    width: 400px;
    height: 90dvh;
}

@media screen and (max-width: 1179px) {
    .content_popup .content_box iframe.vertical {
        height: 80dvh;
    }
}

@media screen and (max-width: 639px) {
    .content_popup .content_box iframe.vertical {
        width: 280px;
        height: 70dvh;
    }
}

.content_popup .x_btn {
	position: fixed;
	top: 28px;
	right: 28px;
}

@media screen and (max-width: 639px) {
	.content_popup .x_btn {
		top: 14px;
		right: 14px;
	}
}

.content_popup .x_btn svg {
	width: 43px;
}

@media screen and (max-width: 639px) {
	.content_popup .x_btn svg {
		width: 22px;
	}
}

.content_popup .popup-btn {
	display: flex;
	position: absolute;
	top: 50%;
	z-index: 5;
	padding: 10px;
	transform: translateY(-50%);
}

@media screen and (max-width: 639px) {
	.content_popup .popup-btn {
		background-color: rgba(0, 0, 0, .4);
	}
}

.content_popup .popup-btn.prev {
	left: 0px;
}

.content_popup .popup-btn.next {
	right: 0px;
}

.content_popup .popup-btn svg {
	width: 52px;
}

@media screen and (max-width: 639px) {
	.content_popup .popup-btn svg {
		width: 28px;
	}
}

.content_popup .content_wrap {
	display: flex;
	justify-content: center;
}

.content_popup .content_name {
	text-align: center;
	font-weight: 300;
}

.content_popup .content_name .company {
	margin: 5px 0 2px;
	font-size: 22px;
}

@media screen and (max-width: 1179px) {
	.content_popup .content_name .company {
		font-size: 16px;
	}
}

/* 레이아웃 - 메인 */
.contents#main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	background-color: transparent;
}

.contents#main .eng {
	/* letter-spacing = margin left */
	margin: 0 0 -6px 28.8px;
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 30px;
	letter-spacing: 28.8px;
	text-transform: uppercase;
	animation-duration: 1.5s;
	animation-delay: .75s;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#main .eng {
		margin: 0 0 16px 19.2px;
		font-size: 20px;
		letter-spacing: 19.2px;
	}
}

@media screen and (max-width: 639px) {
	.contents#main .eng {
		margin: 0 0 18px 12.48px;
		font-size: 13px;
		letter-spacing: 12.48px;
	}
}

.contents#main .kor {
	margin: 0 0 31px 0;
	font-size: 78px;
	font-style: normal;
	font-weight: 800;
	animation-duration: 1.5s;
	animation-delay: .65s;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#main .kor {
		text-align: center;
		font-size: 80px;
		line-height: 105%; /* 84px */
	}
}

@media screen and (max-width: 639px) {
	.contents#main .kor {
		text-align: center;
		font-size: 56px;
		line-height: 105%;
	}
}

.contents#main .period-text {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px 0;
	font-size: 18px;
	font-weight: 300;
	animation-delay: .65s;
}

.contents#main .period-text::before,
.contents#main .period-text::after {
	content: "";
	display: block;
	position: relative;
    top: -1px;
	width: 6px;
	height: 6px;
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	border-radius: 1px;
	transform: rotate(-45deg);
}

.contents#main .period {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0 0 105px 0;
}

.contents#main .period p {
	animation-delay: .75s;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#main .period {
		gap: 12px;
		margin: 0 0 75px 0;
	}
}

@media screen and (max-width: 639px) {
	.contents#main .period {
		gap: 12px;
		margin: 0 0 55px 0;
	}
}

.contents#main .period p {
	font-size: 18px;
	font-weight: 400;
}

.contents#main .period .line {
	width: 36px;
	height: 1px;
	background-color: #fff;
}

@media screen and (max-width: 1179px) {
	.contents#main .period .line {
		width: 36px;
	}
}

.contents#main .btn {
	display: flex;
	gap: 24px;
}

@media screen and (max-width: 1179px) {
	.contents#main .btn {
		flex-direction: column;
		gap: 10px;
	}
}

.contents#main .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 20px 30px;
	min-width: 230px;
	min-height: 72px;
	border-radius: 100px;
	box-sizing: border-box;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	transition: .2s;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#main .btn a {
		padding: 14px 20px;
		min-width: 180px;
		min-height: 54px;
		font-size: 16px;
	}
}

@media screen and (max-width: 639px) {
	.contents#main .btn a {
		padding: 14px 20px;
		min-width: 160px;
		min-height: 50px;
		font-size: 14px;
	}
}

.contents#main .btn a.history {
	border: 1px solid rgba(255, 255, 255, 0.30);
	background: rgba(255, 255, 255, 0.10);
}

.contents#main .btn a.history:hover {
	background: rgba(0, 0, 0, 0.30);
}

.contents#main .btn a.event {
	border-color: transparent;
	background: #97815E;
}

.contents#main .btn a.event:hover {
	background: #79674b;
}

.contents#main .btn a.event svg {
	width: 32px;
	transition: .25s;
}

.contents#main .btn a.event:hover svg {
	transform: translateY(-4px);
}

.contents#main .main-scroll {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 7%;
	left: 50%;
	transform: translate(-50%, 0) rotate(-90deg);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

@media screen and (max-height: 720px) {
	.contents#main .main-scroll {
		display: none;
	}
}

.contents#main .main-scroll .arrow {
	display: flex;
}

.contents#main .main-scroll svg { 
	transform: rotate(90deg);
}

.contents#main .main-scroll .arrow1 { 
	animation-delay: 0s;
}

.contents#main .main-scroll .arrow2 { 
	animation-delay: .15s;
}

.contents#main .main-scroll .arrow3 { 
	animation-delay: .3s;
}

.contents#main .main-scroll span {
	position: relative;
	top: -1px;
}

/* 레이아웃 - 인트로 */
.contents#intro {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 100svh 0 0 0;
	padding: 225px 0 205px;
	height: auto;
	text-align: center;
}

@media screen  and (max-width: 1179px) {
	.contents#intro {
		padding: 80px 0 60px;
	}
}

.contents#intro .line {
	position: relative;
	margin: 66px 0 83px 0;
	width: 1px;
	height: 248px;
	transition: all .25s;
	transition-delay: .4s;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .line {
		margin: 46px 0 42px 0;
		height: 172px;
	}
}

.contents#intro .line::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #fff;
	transition: .5s;
}

.contents#intro .line.act::before {
	height: 100%;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .line.act {
		height: 172px;
	}
}

.contents#intro .intro-20th {
	position: relative;
	width: 100%;
	transition: all .25s;
}

.contents#intro .intro-20th .bebasneue {
	font-size: 250px;
	font-style: normal;
	font-weight: 400;
	line-height: 90%;
	letter-spacing: -10px;
	transform: scale(.85);
	opacity: 0;
	transition: .5s;
}

.contents#intro .intro-20th.act .bebasneue {
	transform: scale(1);
	opacity: 1;
}

.contents#intro .intro-20th.act .bebasneue:last-of-type {
	transition-delay: .1s;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .intro-20th .bebasneue {
		font-size: 152px;
		letter-spacing: -6.102px;
	}
}

.contents#intro .intro-20th h2.rationale {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -80%);
	transform-origin: center center;
	margin: 0 0 0 10.6px;
	color: #AD8443;
	font-size: 20px;
	letter-spacing: 10.6px;
	opacity: 0;
	transition: all .5s;
	transition-delay: .2s;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .intro-20th h2.rationale {
		transform: translate(-50%, -90%);
		width: 100%;
		font-size: 13px;
		letter-spacing: 6.468px;
	}
}

.contents#intro .intro-20th.act h2.rationale {
	opacity: 1;
}

.contents#intro .intro-text {
	font-size: 52px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	opacity: 0;
	transition: .25s;
	transition-delay: .5s;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .intro-text {
		font-size: 22px;
	}
}

.contents#intro .intro-text.act {
	opacity: 1;
}

.contents#intro .intro-text p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 0 8px 0;
}

.contents#intro .intro-text .inven-logo {
	position: relative;
	top: -5px;
	width: 188px;
	height: 54px;
}

@media screen  and (max-width: 1179px) {
	.contents#intro .intro-text .inven-logo {
		top: -2px;
		width: 80px;
		height: 24px;
	}
}

.contents#intro .intro-text svg {
	overflow: visible;
}

.contents#intro .intro-text svg g {
	filter: drop-shadow(0px 0px 5px rgba(244, 243, 155, 0.56));
}

/* 인사말 */
.contents#greeting {
	display: flex;
}

@media screen and (max-width: 1179px) {
	.contents#greeting {
		height: auto;
	}
}

.contents#greeting::before,
.contents#greeting::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 30%;
    pointer-events: none;
}
.contents#greeting::before {
    top: 0;
    background: linear-gradient(180deg, rgba(28,32,37,1) 0%, rgba(28,32,37,0) 100%);
}

.contents#greeting::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(28,32,37,1) 0%, rgba(28,32,37,0) 100%);
}

.contents#greeting .inner {
	display: flex;
	align-items: center;
	gap: 94px;
	position: relative;
	z-index: 5;
	margin: 0 auto;
	max-width: 1114px;
}

@media screen and (max-width: 1239px) {
	.contents#greeting .inner {
		gap: 40px;
		max-width: 980px;
	}
}

@media screen and (max-width: 1179px) {
	.contents#greeting .inner {
		flex-direction: column;
		gap: 56px;
		padding: 70px 0 80px;
	}
}

.contents#greeting .logo-20th {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 444px;
	height: 544px;
}

@media screen and (max-width: 1179px) {
	.contents#greeting .logo-20th {
		width: auto;
		height: auto;
	}
}

@media screen and (max-width: 1179px) {
	.contents#greeting .logo-20th img {
		max-width: 169px;
	}
}

.contents#greeting .greeting-text {
	flex: 1 1 0;
}

@media screen and (max-width: 1179px) {
	.contents#greeting .greeting-text {
		max-width: 320px;
	}
}

.contents#greeting .greeting-text .rationale {
	margin: 0 0 35px 0;
	font-size: 20px;
	letter-spacing: 10.6px;
	text-transform: uppercase;
	opacity: 0;
	filter: blur(5px);
	transition: all .5s;
	transform: translateY(10px);
}

@media screen and (max-width: 1179px) {
	.contents#greeting .greeting-text .rationale {
		margin: 0 0 20px 0;
		font-size: 16px;
		letter-spacing: 8.48px;
	}
}

.contents#greeting .greeting-text.act .rationale {
	opacity: 0.7;
	filter: blur(0px);
	transform: translateY(0px);
}

.contents#greeting .greeting-text .detail p {
	margin: 0 0 25px 0;
	font-size: 16px;
	font-style: normal;
	font-weight: 200;
	line-height: 156%;
	transition: all .5s;
	transform: translateY(10px);
	filter: blur(5px);
	opacity: 0;
}

@media screen and (max-width: 1179px) {
	.contents#greeting .greeting-text .detail p {
		font-size: 12px;
	}
}

.contents#greeting .greeting-text.act .detail p {
	transform: translateY(0px);
	filter: blur(0px);
	opacity: 1;
}

.contents#greeting .greeting-text .detail p:last-of-type {
	margin: 0;
}

.contents#greeting .greeting-text.act .detail p.ceo {
	text-align: right;
}

/* 축사 */
.contents#message {
	display: flex;
	height: 300svh;
	box-sizing: border-box;
}

.contents#message .inner {
	position: sticky;
	top: 0;
	padding: 60px 0;
	width: 100%;
	height: 100svh;
	box-sizing: content-box;
}

@media screen and (max-width: 1179px) {
	.contents#message .inner {
		padding-top: 90px;
		box-sizing: border-box;
	}
}

@media screen and (min-height: 1179px) {
	.contents#message .inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
	}
}

.contents#message .message-list-wrap {
	position: relative;
    max-width: 1180px;
    height: 72svh;
    max-height: 660px;
    margin: 0 auto;
}

@media screen and (min-width: 640px) and (max-width: 1699px) {
	.contents#message .message-list-wrap {
		max-height: 532px;
	}
}

@media screen and (min-width: 400px) and (max-width: 639px) {
	.contents#message .message-list-wrap {
		max-height: 394px;
	}
}

@media screen and (max-width: 399px) {
	.contents#message .message-list-wrap {
		max-height: 314px;
	}
}

.contents#message .message-list {
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: 5;
	padding: 0 20%;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list {
		padding: 0 11%;
	}
	
}

@media screen and (max-width: 639px) {
	.contents#message .message-list {
		padding: 0 5%;
	}
	
}

.contents#message .message-list.top {
	top: 0;
	align-items: flex-start;
}

.contents#message .message-list.bottom {
	bottom: 0;
	align-items: flex-end;
}

.contents#message .message-list.bottom ul {
	justify-content: end;
}


.contents#message .message-list ul {
	display: flex;
	gap: 16px;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list ul {
		display: flex;
		gap: 8px;
	}
}

.contents#message .message-list ul li {
	position: relative;
	overflow: hidden;
	width: 250px;
	height: 320px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(78, 81, 100, 0.60) 0%, rgba(40, 46, 52, 0.60) 100%);
	flex: 0 0 auto;
	cursor: url("https://static.inven.co.kr/image_2011/webzine/special/20th/hoverd_point.png"), auto;
}

@media screen and (min-width: 640px) and (max-width: 1699px) {
	.contents#message .message-list ul li {
		width: 200px;
		height: 256px;
	}
}

@media screen and (min-width: 400px) and (max-width: 639px) {
	.contents#message .message-list ul li {
		width: 150px;
		height: 192px;
	}
}

@media screen and (max-width: 399px) {
	.contents#message .message-list ul li {
		width: 120px;
		height: 152px;
	}
}

.contents#message .message-list ul li::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 9.68%, #5A4729 100%);
	pointer-events: none;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list ul li::before {
		height: 40%;
	}
}

.contents#message .message-list ul li::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: rgba(143, 100, 56, .4);
	z-index: 1;
	opacity: 0;
	transition: all .25s;
}

.contents#message .message-list ul li:hover::after {
	opacity: 1;
}

.contents#message .message-list ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .25s;
}

.contents#message .message-list ul li:hover img {
	transform: scale(1.2);
}

.contents#message .message-list ul li .info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 5;
	width: calc(100% - 40px);
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list ul li .info {
		bottom: 12px;
		left: 12px;
		width: calc(100% - 24px);
	}
}

.contents#message .message-list ul li .info h2 {
	font-size: 18px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list ul li .info h2 {
		font-size: 12px;
	}
}


.contents#message .message-list ul li .info h3 {
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list ul li .info h3 {
		width: calc(100% - 24px);
		font-size: 11px;
	}
}

.contents#message .message-list .message-card {
	padding: 25px;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	cursor: default;
}

@media screen and (min-width: 640px) and (max-width: 1699px) {
	.contents#message .message-list .message-card {
		padding: 16px;
		font-size: 1.15vw;
	}
}

@media screen and (max-width: 639px) {
	.contents#message .message-list .message-card {
		padding: 16px;
		font-size: 12px;
	}
}

.contents#message .message-list .message-card::before,
.contents#message .message-list .message-card::after {
	display: none;
}

.contents#message .message-list .message-card svg {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

@media screen and (max-width: 1179px) {
	.contents#message .message-list .message-card svg {
		width: 48px;
		height: 48px;
	}
}

/* 20주년, 숫자로 보는 인벤 */

.contents#statistics {
	background-color: #000;
	height: 350svh;
}

@media screen and (max-width: 1179px) {
	.contents#statistics {
		padding: 80px 0 100px;
		height: auto;
	}
}

.contents#statistics .inner {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100svh;
	container-type: inline-size;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .inner {
		position: relative;
		height: auto;
	}
}

.contents#statistics .title-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
	line-height: 39px;
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .title-text {
		display: none;
	}
}

.contents#statistics .title-text p {
	margin: 0 0 25px 0;
}

.contents#statistics .title-text h2 {
	opacity: 0.6;
	font-size: 28px;
}

.contents#statistics .contents-title {
	display: none;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .contents-title {
		display: block;
	}
}

.contents#statistics .statistics-wrap {
	position: absolute;
    top: 50%;
    left: 50%;
	transition: all 1s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	opacity: 0;
	transform: scale(.5);
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap {
		display: flex;
		overflow-x: scroll;
		gap: 28px;
		position: relative;
		top: auto;
		left: auto;
		margin: 0 0 30px 0;
		padding: 30px;
		transform: scale(1);
		opacity: 1;
	}

	.contents#statistics .statistics-wrap:last-child {
		margin: 0;
	}
}

.contents#statistics .statistics-wrap.act {
	opacity: 1;
	transform: scale(1);
}

.contents#statistics .statistics-wrap .data {
	position: absolute;
	margin: auto;
	border-radius: 10px;
	background: rgba(33, 33, 33, 0.30);
	box-shadow: 0px 0px 60px 0px rgba(168, 158, 118, 0.60);
	opacity: 0;
	filter: blur(40px);
	transition: .5s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data {
		flex: 0 0 auto;
		position: relative;
		margin: auto 0;
		top: auto !important;
		left: auto !important;
		opacity: 1 !important;
		filter: blur(0) !important;
		box-shadow: 0px 0px 20px 0px rgba(168, 158, 118, 0.60)
	}
}

.contents#statistics .statistics-wrap .data.act {
	opacity: 1;
	filter: blur(0);
}

.contents#statistics .statistics-wrap .data .text {
	padding: 25px 25px 0 25px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data .text {
		padding: 16px 16px 0 16px;
	}
}

.contents#statistics .statistics-wrap .data h3 {
	margin: 0 0 4px 0;
	font-size: 20px;
	font-weight: 600;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data h3 {
		font-size: 16px;
	}
}

.contents#statistics .statistics-wrap .data p {
	color: #E8E8E8;
	font-size: 16px;
	font-weight: 400;
	line-height: 120%;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data p {
		color: #E8E8E8;
		font-size: 14px;
		font-weight: 400;
		line-height: 120%;
	}
}

.contents#statistics .statistics-wrap .data .icon {
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data .icon img {
		width: 100%;
	}
}

.contents#statistics .statistics-wrap .data.box1 {
	top: -370px;
    left: -560px;
	width: 350px;
	transition-delay: .1s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box1 {
		width: 248px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box1 {
		top: -40svh;
	}
}

.contents#statistics .statistics-wrap .data.box1 .icon {
	padding: 12px 0 20px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box1 .icon {
		padding: 10px 0 12px;
	}
}

.contents#statistics .statistics-wrap .data.box1 .icon img {
	max-width: 206px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box1 .icon img {
		max-width: 146px;
	}
}

.contents#statistics .statistics-wrap .data.box2 {
	top: -300px;
	left: 230px;
	width: 340px;
	transition-delay: .2s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box2 {
		width: 240px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box2 {
		top: -32svh;
	}
}

.contents#statistics .statistics-wrap .data.box2 .icon {
	padding: 15px 0 0 0;
}

.contents#statistics .statistics-wrap .data.box2 .icon img {
	max-width: 284px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box2 .icon img {
		max-width: 196px;
	}
}

.contents#statistics .statistics-wrap .data.box3 {
	top: 50px;
    top: 6svh;
    left: -545px;
	width: 300px;
	transition-delay: .3s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box3 {
		width: 212px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box3 {
		top: 6svh;
	}
}

.contents#statistics .statistics-wrap .data.box3 .icon {
	padding: 30px 0 20px 0;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box3 .icon {
		padding: 24px 0 15px;
	}
}

.contents#statistics .statistics-wrap .data.box3 .icon img {
	max-width: 125px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box3 .icon img {
		max-width: 86px;
	}
}

.contents#statistics .statistics-wrap .data.box4 {
	top: 80px;
    left: 175px;
	width: 333px;
	transition-delay: .4s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box4 {
		width: 220px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box4 {
		top: 9svh;
	}
}

.contents#statistics .statistics-wrap .data.box4 .icon {
	padding: 38px 0 28px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box4 .icon {
		padding: 25px 0 20px;
	}
}

.contents#statistics .statistics-wrap .data.box4 .icon img {
	max-width: 236px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box4 .icon img {
		max-width: 170px;
	}
}

.contents#statistics .statistics-wrap .data.box5 {
	top: -386px;
    left: -560px;
	width: 316px;
	transition-delay: .1s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box5 {
		width: 254px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box5 {
		top: -42svh;
	}
}

.contents#statistics .statistics-wrap .data.box5 .icon {
	padding: 25px 0 12px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box5 .icon {
		padding: 19px 0 10px;
	}
}

.contents#statistics .statistics-wrap .data.box5 .icon img {
	max-width: 210px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box5 .icon img {
		max-width: 168px;
	}
}

.contents#statistics .statistics-wrap .data.box6 {
	top: -160px;
	left: 230px;
	width: 340px;
	transition-delay: .2s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box6 {
		width: 274px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box6 {
		top: -17svh;
	}
}

.contents#statistics .statistics-wrap .data.box6 .icon {
	padding: 22px 0 0;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box6 .icon {
		padding: 19px 0 0;
	}
}

.contents#statistics .statistics-wrap .data.box6 .icon img {
	max-width: 282px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box6 .icon img {
		max-width: 222px;
	}
}

.contents#statistics .statistics-wrap .data.box7 {
	top: 110px;
    left: -485px;
	width: 334px;
	transition-delay: .3s;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box7 {
		width: 270px;
	}
}

@media screen and (max-height: 799px)  {
	.contents#statistics .statistics-wrap .data.box7 {
		top: 12svh;
	}
}

.contents#statistics .statistics-wrap .data.box7 .icon {
	padding: 44px 0 28px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box6 .icon {
		padding: 34px 0 20px;
	}
}


.contents#statistics .statistics-wrap .data.box7 .icon img {
	max-width: 256px;
}

@media screen and (max-width: 1179px) {
	.contents#statistics .statistics-wrap .data.box7 .icon img {
		max-width: 200px;
	}
}

/* 20년 동안 인벤이 걸어온 길 */
.contents#journey {
	padding: 120px 0 380px 0;
	height: auto;
	background-color: #141414;
}

@media screen and (max-width: 1179px) {
	.contents#journey {
		padding: 80px 0 60px 0;
	}
}

.contents#journey h2 {
	margin: 0 0 180px 0;
}

@media screen and (max-width: 1179px) {
	.contents#journey h2 {
		margin: 0;
	}
}

/* pc */
.contents#journey .pc-load {
	display: flex;
    justify-content: center;
	position: relative;
	z-index: 5;
	margin: 0 auto;
	max-width: 1170px;
}

@media screen and (max-width: 1179px) {
	.contents#journey .pc-load {
		display: none;
	}
}

.contents#journey .pc-load .point {
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	background-color: #EBE7D1;
	border-radius: 50%;
	box-shadow: 0px 0px 12px #685A18;
	offset-path: path('M5 5H996.5C1086.8 5 1160 78.2014 1160 168.5V168.5C1160 258.799 1086.8 332 996.5 332H871.25H582.5H408.313C303.759 332 219 416.759 219 521.313V521.313C219 625.868 303.759 710.627 408.313 710.627H689.5H806.813C889.207 710.627 956 777.42 956 859.813V859.813C956 942.207 889.207 1009 806.813 1009H248C147.484 1009 66 1090.48 66 1191V1191C66 1291.52 147.484 1373 248 1373H1005C1093.37 1373 1165 1444.63 1165 1533V1533C1165 1621.37 1093.37 1693 1005 1693H405.5C275.437 1693 170 1798.44 170 1928.5V1928.5C170 2058.56 275.437 2164 405.5 2164H1023');
	offset-rotate: 0deg;
}

.contents#journey .pc-load .point.p1 {
	width: 20px;
	height: 20px;
	offset-distance: 88px;
}

.contents#journey .pc-load .point.p2 {
	offset-distance: 293px;
}

.contents#journey .pc-load .point.p3 {
	offset-distance: 478px;
}

.contents#journey .pc-load .point.p4 {
	offset-distance: 694px;
}

.contents#journey .pc-load .point.p5 {
	offset-distance: 880px;
}

.contents#journey .pc-load .point.p6 {
	offset-distance: 1412px;
}

.contents#journey .pc-load .point.p7 {
	offset-distance: 1616px;
}

.contents#journey .pc-load .point.p8 {
	offset-distance: 1797px ;
}

.contents#journey .pc-load .point.p9 {
	offset-distance: 2030px;
}

.contents#journey .pc-load .point.p10 {
	offset-distance: 2354px;
}

.contents#journey .pc-load .point.p11 {
	offset-distance: 2528px;
}

.contents#journey .pc-load .point.p12 {
	offset-distance: 2790px;
}

.contents#journey .pc-load .point.p13 {
	offset-distance: 2971px;
}

.contents#journey .pc-load .point.p14 {
	offset-distance: 3400px;
}

.contents#journey .pc-load .point.p15 {
	offset-distance: 3663px;
}

.contents#journey .pc-load .point.p16 {
	offset-distance: 3850px;
}

.contents#journey .pc-load .point.p17 {
	offset-distance: 4045px;
}

.contents#journey .pc-load .point.p18 {
	offset-distance: 4725px;
}

.contents#journey .pc-load .point.p19 {
	offset-distance: 4955px;
}

.contents#journey .pc-load .point.p20 {
	offset-distance: 4981px;
}
.contents#journey .pc-load .point.p20 {
	offset-distance: 5180px;
}

.contents#journey .pc-load .point.p21 {
	offset-distance: 5400px;
}

.contents#journey .pc-load .point.p22 {
	offset-distance: 5923px;
}

.contents#journey .pc-load .point.p23 {
	offset-distance: 6135px;
}

.contents#journey .pc-load .point.p24 {
	offset-distance: 6342px;
}

.contents#journey .pc-load .point.p25 {
	offset-distance: 6550px;
}

.contents#journey .pc-load .point.p26 {
	offset-distance: 6866px;
}

.contents#journey .pc-load .point.p27 {
	offset-distance: 7130px;
}

.contents#journey .pc-load .point.p28 {
	offset-distance: 7435px;
}

.contents#journey .pc-load .point.p29 {
	offset-distance: 7665px;
}

.contents#journey .pc-load .point.p30 {
	width: 20px;
	height: 20px;
	offset-distance: 100%;
}

.contents#journey .pc-load .point .text {
	position: absolute;
	bottom: 40px;
	left: 50%;
	min-width: 160px;
	transform: translate(-50%, 10px);
	text-align: center;
	transition: .35s;
	opacity: 0;
}

.contents#journey .pc-load .point.act .text {
	transform: translate(-50%, 0);
	opacity: 1;
}

.contents#journey .pc-load .point .text h3 {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -1.92px;
	opacity: 0.7;
	background: linear-gradient(180deg, #FFF 0%, #737373 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.contents#journey .pc-load .point .text h3.now {
	font-size: 48px;
}

.contents#journey .pc-load .point .text p {
	color: #FFF;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -0.084px;
}

.contents#journey .pc-load .point .text p:not(.day) {
	line-height: 16px;
}

.contents#journey .pc-load .point .box {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translate(-50%, 10px);
	width: 200px;
	height: 160px;
	border-radius: 6px;
	background: rgba(79, 79, 79, 0.20);
	transition: .35s;
	opacity: 0;
}

.contents#journey .pc-load .point.act .box {
	transform: translate(-50%, 0px);
	transition: .25s;
	opacity: 1;
}

.contents#journey .pc-load .point .box.s1 {
	width: 200px;
	height: 160px;
}

.contents#journey .pc-load .point .box.s2 {
	width: 154px;
	height: 120px;
}

.contents#journey .pc-load .point .box.s3 {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

/* 이미지 사이즈 */
.contents#journey .pc-load .point .open-inven {
	width: 77px;
}

.contents#journey .pc-load .point.p1 .box img {
	max-width: 117px;
}

.contents#journey .pc-load .point.p3 .box img {
	max-width: 92px;
}

.contents#journey .pc-load .point.p8 .box img {
	max-width: 97px;
}

.contents#journey .pc-load .point.p9 .box img {
	max-width: 105px;
}

.contents#journey .pc-load .point.p10 .box {
	align-items: end;
}

.contents#journey .pc-load .point.p10 .box img {
	max-width: 115px;
}

.contents#journey .pc-load .point.p11 .box img {
	max-width: 74px;
}

.contents#journey .pc-load .point.p12 .box img {
	max-width: 94px;
}

.contents#journey .pc-load .point.p13 .box img {
	max-width: 96px;
}

.contents#journey .pc-load .point.p15 .box img {
	max-width: 96px;
}

.contents#journey .pc-load .point.p16 .box img {
	max-width: 76px;
}

.contents#journey .pc-load .point.p17 .box img {
	max-width: 97px;
}

.contents#journey .pc-load .point.p18 .box img {
	max-width: 106px;
}

.contents#journey .pc-load .point.p19 .box img {
	max-width: 113px;
}

.contents#journey .pc-load .point.p20 .box img {
	max-width: 100px;
}

.contents#journey .pc-load .point.p21 .box {
	align-items: end;
}

.contents#journey .pc-load .point.p21 .box img {
	max-width: 115px;
}

.contents#journey .pc-load .point.p22 .box img {
	max-width: 92px;
}

.contents#journey .pc-load .point.p23 .box img {
	max-width: 92px;
}

.contents#journey .pc-load .point.p24 .box img {
	max-width: 90px;
}

.contents#journey .pc-load .point.p25 .box img {
	max-width: 88px;
}

.contents#journey .pc-load .point.p26 .box img {
	max-width: 96px;
}

.contents#journey .pc-load .point.p27 .box img {
	max-width: 98px;
}

.contents#journey .pc-load .point.p28 .box img {
	max-width: 96px;
}

.contents#journey .pc-load .point.p29 .box img {
	max-width: 96px;
}

.contents#journey .pc-load .point.p30 .box .motion-img {
	width: 113px;
	height: 129px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/load_img_30_sprite.png?v=241011a");
	background-repeat: no-repeat;
	background-size: 136px;
}

.contents#journey .pc-load .point.p30 .motion-img .ef {
	position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/load_img_30_sprite.png?v=241011a");
	background-repeat: no-repeat;
	background-size: 136px;
	pointer-events: none;
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(1) {
	top: -45px;
    left: -90px;
	width: 23px;
	height: 16px;
	background-position: -113px 0;
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(2) {
	right: -100px;
	width: 17px;
	height: 12px;
	background-position: -113px -17px;
	
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(3) {
	left: -120px;
	width: 7px;
	height: 7px;
	background-position: -113px -31px;
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(4) {
	right: -120px;
	width: 7px;
	height: 8px;
	background-position: -121px -17px;
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(5) {
	top: -100px;
	right: -100px;
	width: 7px;
	height: 6px;
	background-position: -113px -39px;
}

.contents#journey .pc-load .point.p30 .motion-img .ef:nth-child(6) {
	top: -70px;
	right: -70px;
	width: 13px;
	height: 10px;
	background-position: -113px -47px;
}

/* 텍스트 및 이미지 박스 위치 수정 */
.contents#journey .pc-load .point.p6 .text {
	text-align: right;
    transform: translateX(00px);
    right: 15px;
    left: auto;
}

.contents#journey .pc-load .point.p6 .box {
	top: 22px;
	left: -10px;
	transform: translateX(0);
}

.contents#journey .pc-load .point.p10 .text {
    bottom: 50%;
    left: 30px;
    transform: translateY(50%);
    text-align: left;
}

.contents#journey .pc-load .point.p10 .box {
    top: 50%;
    left: auto;
	right: 30px;
    transform: translateY(-50%);
}

.contents#journey .pc-load .point.p11 .text {
    bottom: 20px;
    left: 40px;
    transform: translateY(0%);
    text-align: left;
}

.contents#journey .pc-load .point.p11 .box {
    top: 50%;
    left: auto;
    right: 30px;
    transform: translateX(0%);
}

.contents#journey .pc-load .point.p14 .text {
	text-align: right;
    transform: translateX(0px);
    right: 20px;
    left: auto;
    bottom: 20px;
}

.contents#journey .pc-load .point.p14 .box {
    top: -4px;
    left: 11px;
    transform: translateX(0);
}

.contents#journey .pc-load .point.p26 .text {
    bottom: 50%;
    left: 40px;
    transform: translateY(50%);
    text-align: left;
}

.contents#journey .pc-load .point.p26 .box {
    top: 50%;
    left: auto;
	right: 40px;
    transform: translateY(-50%);
}

.contents#journey .pc-load .point.p27 .text {
    bottom: 20px;
    left: 40px;
    transform: translateY(0%);
    text-align: left;
}

.contents#journey .pc-load .point.p27 .box {
    top: 50%;
    left: auto;
    right: 30px;
    transform: translateX(0%);
}

/* mo */

.contents#journey .mo-load-wrap {
	display: none;
	padding: 24px 160px;
	overflow-x: scroll;
}

@media screen and (max-width: 1179px) {
	.contents#journey .mo-load-wrap {
		display: flex;
	}
}

.contents#journey .mo-load {
	position: relative;
	z-index: 5;
}

.contents#journey .mo-load .point {
	position: absolute;
	left: 0;
	top: 0;
	offset-path: path('M3 43.5L2.99998 517.5C2.99998 550.637 29.8629 577.5 63 577.5L123.935 577.5C157.073 577.5 183.935 550.637 183.935 517.5L183.935 63.5C183.935 30.3629 210.798 3.49995 243.935 3.49995L302.878 3.49995C336.015 3.49995 362.878 30.3629 362.878 63.4999L362.878 517.5C362.878 550.637 389.741 577.5 422.878 577.5L485 577.5C518.137 577.5 545 550.637 545 517.5L545 63.5C545 30.3629 571.863 3.49996 605 3.49996L663 3.49995C696.137 3.49995 723 30.3701 723 63.5072C723 232.57 723 348.43 723 517.493C723 550.63 749.863 577.5 783 577.5L842 577.5C875.137 577.5 902 550.637 902 517.5L902 63C902 29.8629 928.863 2.99998 962 2.99998L1383.33 2.99997C1416.47 2.99997 1443.33 29.8629 1443.33 63L1443.33 517.5C1443.33 550.637 1470.2 577.5 1503.33 577.5L1743.42 577.5C1776.55 577.5 1803.42 550.637 1803.42 517.5L1803.42 64C1803.42 30.8629 1830.28 4 1863.42 4L1965.45 4L2103 4C2136.14 4 2163 30.8629 2163 64L2163 537');
	offset-rotate: 0deg;
}
.contents#journey .mo-load .point h3 {
	margin: 0 auto 8px;
	padding: 6px 20px 7px;
	max-width: 76px;
	background: #B68F67;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
}

.contents#journey .mo-load .point .dot {
	margin: 0 auto 6px;
	width: 10px;
	height: 10px;
	background-color: #EBE7D1;
	border-radius: 50%;
	filter: drop-shadow(0px 0px 12px #685A18);
}

.contents#journey .mo-load .point .text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 9px 0;
	padding: 8px 16px;
	width: 304px;
	height: 80px;
	background: #2A2A2A;
	border-radius: 6px;
}

.contents#journey .mo-load .point .text p:not(.day) {
	line-height: 110%;
}

.contents#journey .mo-load .point .box img {
	width: 50px;
}

.contents#journey .mo-load .point .text:last-child {
	margin: 0;
}

.contents#journey .mo-load .point.p1 {
	offset-distance: 70px;
}

.contents#journey .mo-load .point.p2 {
	offset-distance: 268px;
}

.contents#journey .mo-load .point.p3 {
	offset-distance: 422px;
}

.contents#journey .mo-load .point.p4 {
	offset-distance: 1446px;
}

.contents#journey .mo-load .point.p5 {
	offset-distance: 1644px;
}

.contents#journey .mo-load .point.p6 {
	offset-distance: 1842px;
}

.contents#journey .mo-load .point.p7 {
	offset-distance: 3025px;
}

.contents#journey .mo-load .point.p8 {
	offset-distance: 3272px;
}

.contents#journey .mo-load .point.p8 .text {
	position: absolute;
    top: -445px;
    left: 245px;
}

.contents#journey .mo-load .point.p9 {
	offset-distance: 3896px;
}

.contents#journey .mo-load .point.p9 h3 {
	position: absolute;
	top: -14px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p9 .text.t1 {
    position: absolute;
	top: 28px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p9 .text.t2 {
    position: absolute;
	top: 116px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p10 {
	offset-distance: 3669px;
}

.contents#journey .mo-load .point.p10 h3 {
	position: absolute;
	top: -14px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p10 .text.t1 {
    position: absolute;
	top: 28px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p10 .text.t2 {
    position: absolute;
	top: 116px;
    left: calc(50% + 10px);
}

.contents#journey .mo-load .point.p11 {
	offset-distance: 4680px;
}

.contents#journey .mo-load .point.p12 {
	offset-distance: 4932px;
}

.contents#journey .mo-load .point.p13 {
	offset-distance: 5712px;
}

.contents#journey .mo-load .point.p14 {
	offset-distance: 6399px;
}

.contents#journey .mo-load .point.p15 {
	offset-distance: 6642px;
}

.contents#journey .mo-load .point.p16 {
	offset-distance: 100%;
}

/* INVEN의 히스토리를 살펴보세요 */
.contents#history {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 120px 0 230px;
	height: auto;
	background-color: #000;
}

@media screen and (max-width: 1179px) {
	.contents#history {
		padding: 80px 0 140px;
	}
}

.contents#history .inner {
	position: relative;
	z-index: 5;
	width: 100%;
}

.contents#history .history-bar {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow-x: scroll;
	gap: 20px;
	margin: 0 0 52px 0; 
	width: 100%;
	scroll-behavior: smooth;
}

@media screen and (max-width: 1023px) {
	.contents#history .history-bar {
		gap: 14px;
		margin: 0 0 28px 0;
	}
}

.contents#history .history-bar::-webkit-scrollbar {
	display: none;
}

.contents#history .history-bar .progress-bar {
	position: relative;
	margin: 0 auto;
	max-width: 1055px;
	width: 100%;
	line-height: 1.2;
}

@media screen and (max-width: 1023px) {
	.contents#history .history-bar .progress-bar {
		width: max-content;
	}
}

.contents#history .history-bar .progress-bar .gauge-wrap {
	position: relative;
	padding-top: 22px;
}

.contents#history .history-bar .progress-bar .gauge {
	position: absolute;
	top: 0;
	left:0;
	right:0;
	width:968px;
	height: 2px;
	margin:0 auto;
	background: rgba(153, 153, 153, .5);
}
@media screen and (max-width: 1023px) {
	.contents#history .history-bar .progress-bar .gauge {
		width:auto;
		left:38px;
		right:38px;
	}
}
.contents#history .history-bar .progress-bar .gauge::before {
	content: '';
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width:var(--progress-bar, 5px);
	max-width: 100%;
	background-color: rgb(182, 143, 103);
	transition: width 0.3s ease-in-out;
}

.contents#history .history-bar ul {
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}

@media screen and (max-width: 1023px) {
	.contents#history .history-bar ul {
		gap: 28px;
		width: max-content;
	}
}

.contents#history .history-bar ul li {
	font-size: 20px;
	font-weight: 600;
	opacity: 0.6;
	cursor: pointer;
	transition: all 0.3s;
}

@media screen and (max-width: 1023px) {
	.contents#history .history-bar ul li {
		font-size: 16px;
	}
}

.contents#history .history-bar ul li.on {
	color: #B68F67;
	opacity: 1;
}

.contents#history .book-wrap {
	max-width: 920px;
	width:calc(100% - 40px);
	position: relative;
	z-index: 0;
	margin: 0 auto;
}

.contents#history .book-wrap.cursor-left {
	cursor: url("data:image/svg+xml,%3Csvg width='61' height='60' viewBox='0 0 61 60' fill='none' fill-opacity='0.3' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='60' height='60' rx='30' fill='%23232122'/%3E%3Cg clip-path='url(%23clip0_2331_153)'%3E%3Cpath d='M32.5 25L27.5 30' stroke='%23E0E0E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27.5 30L32.5 35' stroke='%23E0E0E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2331_153'%3E%3Crect width='24' height='24' fill='white' transform='translate(21.5 18)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") 30 30, w-resize;
}
.contents#history .book-wrap.cursor-right {
	cursor: url("data:image/svg+xml,%3Csvg width='61' height='60' viewBox='0 0 61 60' fill='none' fill-opacity='0.3' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='60' height='60' rx='30' transform='matrix(-1 0 0 1 60.5 0)' fill='%23232122'/%3E%3Cg clip-path='url(%23clip0_2331_154)'%3E%3Cpath d='M28.5 25L33.5 30' stroke='%23E0E0E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33.5 30L28.5 35' stroke='%23E0E0E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2331_154'%3E%3Crect width='24' height='24' fill='white' transform='matrix(-1 0 0 1 39.5 18)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") 30 30, e-resize;
}

@media screen and (max-width: 660px) {
	.contents#history .book-wrap {
		max-width: none;
		overflow: hidden;
	}
}

.contents#history .history-book {
	padding: 0;
	width: 920px;
	background: #fff;
	border-radius: 12px;
	container-type: inline-size;
}
@media screen and (min-width: 661px) {
	.contents#history .history-book:not(.stf__parent) {
		width: 100%;
		height: calc(min(100vw - 40px, 920px) / 1.5862);
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}
}
.contents#history .history-book.swiper-wrapper {
	width: 100%;
}

.contents#history .history-book .page {
	border-radius: 12px 0 0 12px;
	padding: 17px 16px;
	background-color: #fff;
	container-type: inline-size;
}
@media screen and (min-width: 661px) {
	.contents#history .history-book:not(.stf__parent) .page {
		width: 50%;
	}
	.contents#history .history-book:not(.stf__parent) .img {
		aspect-ratio: 460 / 580;
	}
}
@container (max-width: 680px) {
	.contents#history .history-book:not(.swiper-wrapper) .page {
		padding: 12px 11px;
	}
	.contents#history .history-book:not(.swiper-wrapper) .img {
		padding-right: 3px;
	}
	.contents#history .history-book:not(.swiper-wrapper) .text {
		padding-left: 3px;
	}
}
@container (max-width: 378px) {
	.contents#history .history-book .page {
		padding: 12px 11px;
	}
}
.contents#history .history-book.swiper-wrapper .page {
	display: block;
	aspect-ratio: 460/580;
	width: 90%;
	max-width: 460px;
}
.contents#history .history-book.swiper-wrapper .swiper-slide {
	height: auto;
}
.contents#history .history-book.swiper-wrapper .swiper-slide .swiper {
	height: 100%;
}
.contents#history .history-book .page-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #181818;
	overflow: hidden;
	background: #F3F3F3;
}

.contents#history .history-book.swiper-wrapper .text .page-content {
	height: auto;
	min-height: 100%;
}
.contents#history .history-book .img {
	border-radius: 12px 0 0 12px;
	padding-right: 5px;
}
.contents#history .history-book .img .page-content {
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.contents#history .history-book .img img {
	width: 100%;
}

.contents#history .history-book .text {
	border-radius: 0 12px 12px 0;
	padding-left: 5px;
}
@media screen and (max-width: 660px) {
	.contents#history .history-book .text {
		border-radius: 12px 0 0 12px;
	}
	.contents#history .history-book.swiper-wrapper .text {
		border-radius: 0 12px 12px 0;
	}
}
.contents#history .history-book .text .game-text {
	padding: 36px 36px 0;
	margin-bottom: 20px;
}
@container (max-width: 440px) {
	.contents#history .history-book .text .game-text {
		padding: 26px 26px 0;
	}
	.contents#history .history-book .text .game-logo {
		margin-bottom: 0;
	}
}
@container (max-width: 340px) {
	.contents#history .history-book .text .game-text {
		padding: 16px 16px 0;
		margin-bottom: 10px;
	}
	.contents#history .history-book .text .game-logo img {
		height: 100px;
	}
}

.contents#history .history-book .text h3 {
	margin-bottom: 15px;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.272px;
	line-height: 1.2;
}
@container (max-width: 340px) {
	.contents#history .history-book .text h3 {
		font-size: 28px;
		margin-bottom: 10px;
	}
}
.contents#history .history-book .text h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.144px;
	line-height: 1.2;
}
@container (max-width: 340px) {
	.contents#history .history-book .text h4 {
		font-size: 15px;
		margin-bottom: 10px;
		letter-spacing: -0.025em;
	}
}

.contents#history .history-book .text p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.084px;
}

@container (max-width: 440px) {
	.contents#history .history-book .text p {
		line-height: 1.5;
	}
}
@container (max-width: 340px) {
	.contents#history .history-book .text p {
		line-height: 1.35;
		font-size: 13px;
		letter-spacing: -0.025em;
	}
}

.contents#history .history-book .game-logo {
	display: flex;
	justify-content: right;
	margin-bottom: 16px;
}

.contents#history .book-btn {
	margin-top: 15px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.contents#history .book-wrap .btn {
	position: absolute;
	top:0;
	bottom:0;
	display: flex;
	flex-flow: column;
	justify-content: center;
	pointer-events: none;
}

.contents#history .book-wrap .btn.left {
	left: 0;
}

.contents#history .book-wrap .btn.right {
	right: 0;
}

@media screen and (max-width: 1023px) {
	.contents#history .book-wrap .btn.left {
		left: 20px;
	}
	.contents#history .book-wrap .btn.right {
		right: 20px;
	}
}

.contents#history .book-wrap .btn button {
	opacity: 0;
	transition: opacity 0.3s;
}

.contents#history .book-wrap .btn:hover button,
.contents#history .book-wrap .btn.hover button {
	opacity: 0.3;
}

.contents#history .book-btn button,
.contents#history .book-wrap .btn button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 17px 15px;
	border-radius: 30px;
	background: #232122;
	box-sizing: border-box;
}

.contents#history .book-btn button.next svg,
.contents#history .book-wrap .btn button.next svg {
	transform: rotate(180deg);
}

@media screen and (max-width: 1023px) {
	.contents#history .book-btn button,
	.contents#history .book-wrap .btn button {
		width: 40px;
		height: 40px;
	}
}

/* 축하해주셔서 감사합니다! */
.contents#celebration {
	padding: 150px 0 100px 0;
	height: auto;
	background-color: #000;
}

.contents#celebration::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

@media screen and (max-width: 1179px) {
	.contents#celebration {
		padding: 80px 0 40px;
	}
}


.contents#celebration .celebration-list {
	position: relative;
	z-index: 5;
	margin: 0 auto;
	max-width: 1180px;
	column-count: 4;
    gap: 20px;
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#celebration .celebration-list {
		padding: 0 32px;
		gap: 10px;
	}
}

@media screen and (max-width: 639px) {
	.contents#celebration .celebration-list {
		column-count: 3;
		padding: 0 16px;
		gap: 10px;
	}
}

.contents#celebration .celebration-list li {
	position: relative;
	overflow: hidden;
	margin: 0 0 20px 0;
	border-radius: 10px;
    background: linear-gradient(180deg, rgba(78, 81, 100, 0.60) 0%, rgba(40, 46, 52, 0.60) 100%);
	break-inside: avoid;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all .25s;
}

@media screen and (max-width: 1179px) {
	.contents#celebration .celebration-list li {
		margin: 0 0 10px 0;
	}
}

.contents#celebration .celebration-list li:hover {
	border: 1px solid #B68F67;
}

.contents#celebration .celebration-list li::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 9.68%, rgba(0, 0, 0, 0.80) 100%);
	pointer-events: none;
}

.contents#celebration .celebration-list .img {
	display: flex;
}

.contents#celebration .celebration-list .img img {
	width: 100%;
	transition: all .25s;
}

.contents#celebration .celebration-list li:hover img {
	transform: scale(1.2);
}

.contents#celebration .celebration-list .info {
	position: absolute;
	bottom: 24px;
	left: 26px;
	z-index: 3;
	width: calc(100% - 52px);
}

@media screen and (min-width: 640px) and (max-width: 1179px) {
	.contents#celebration .celebration-list .info {
		bottom: 13px;
		left: 15px;
		width: calc(100% - 30px);
	}
}

@media screen and (max-width: 639px) {
	.contents#celebration .celebration-list .info{
		bottom: 8px;
		left: 10px;
		width: calc(100% - 20px);
	}
}

.contents#celebration .celebration-list .info h3 {
	font-size: 20px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1179px) {
	.contents#celebration .celebration-list .info h3  {
		font-size: 12px;
	}
}

.contents#celebration .celebration-list .info p {
	font-size: 16px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media screen and (max-width: 1179px) {
	.contents#celebration .celebration-list .info p  {
		font-size: 10px;
	}
}

/* 끝인사 */
.contents#and {
	height: 250svh;
	background-color: #000;
	text-align: center;
}

.contents#and .inner {
	position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100svh;
}

.contents#and .inner .text {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	z-index: 1;
	width: 100%;
    height: 100svh;
}

.contents#and .line {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translate(50%, 0);
	width: 1px;
	height: 30%;
	background-color: #fff;
}

.contents#and p {
	margin: 0 0 40px 0;
	font-size: 24px;
	font-weight: 400;
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 1179px) {
	.contents#and p  {
		font-size: 20px;
	}
}

.contents#and .closing {
	color: #FFF;
	font-size: 42px;
	font-weight: 600;
}

@media screen and (max-width: 1179px) {
	.contents#and .closing {
		font-size: 28px;
	}
}

@media screen and (max-width: 639px) {
	.contents#and .closing {
		font-size: 24px;
	}
}


/* 이벤트 */
.contents#event {
	position: relative;
	z-index: 5;
	padding: 195px 0 150px 0;
	height: auto;
	background-color: #000;
}

@media screen and (max-width: 1179px) {
	.contents#event {
		padding: 100px 0 70px 0;
	}
}

.contents#event .event-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 150px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section {
		margin: 0 0 50px 0;
	}
}

.contents#event .event-section:first-of-type {
	position: relative;
}

.contents#event .event-section:first-of-type > *:not(.bg03, .bg04, .bg05, .bg06, .bg07) {
	position: relative;
	z-index: 5;
}

.contents#event .event-title {
	position: relative;
	margin: 0 0 20px 0;
	padding: 4px 2px;
}

.contents#event .event-title::before,
.contents#event .event-title::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #DAE7FF 0%, #A98447 100%);
}

.contents#event .event-title::before {
	top: 0;
	left: 0;
}

.contents#event .event-title::after {
	bottom: 0;
	left: 0;
}

.contents#event .event-title h3 {
	display: flex;
	align-items: center;
	gap: 5px;
}

.contents#event .event-title h3 span {
	padding: 0 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 10px;
	background: linear-gradient(90deg, #DAE7FF 0%, #A98447 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-title h3 span {
		padding: 0 0 0 5.52px;
		font-size: 14px;
		letter-spacing: 5.52px;
	}
}

.contents#event .event-title h3::before,
.contents#event .event-title h3::after {
	content: "";
	display: block;
	position: relative;
    top: -1px;
	width: 6px;
	height: 6px;
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	border-radius: 1px;
	transform: rotate(-45deg);
}

.contents#event .event-name {
	margin: 0 0 22px 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 125%;
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-name {
		font-size: 32px;
	}
}

.contents#event .event-sub {
	margin: 0 0 22px 0;
	color: #7B9AFF;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-sub {
		margin: 0 0 16px 0;
		padding: 0 5%;
		font-size: 15px;
	}
}

.contents#event .event-text {
	margin: 0 0 32px 0;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-text {
		margin: 0 0 24px 0;
		padding: 0 5%;
		font-size: 14px;
	}
	
}

.contents#event .event-section .period {
	display: flex;
	gap: 42px;
	margin: 0 0 50px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section .period {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		margin: 0 0 40px 0;
	}
}

.contents#event .event-section .period .text {
	display: flex;
	align-items: center;
	gap: 24px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section .period .text {
		gap: 10px;
	}
}

.contents#event .event-section .period p {
	font-size: 16px;
	font-weight: 400;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section .period p {
		font-size: 14px !important;
	}
}

.contents#event .event-section .period.main-event {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0 0 78px 0;
	padding: 0 5%;
}

.contents#event .event-section .period.main-event p {
	font-size: 18px;
	text-align: center;
	word-break: keep-all;
}

.contents#event .event-section .period .line {
	width: 38px;
	height: 1px;
	background-color: #fff;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section .period .line {
		width: 16px;
	}
}

.contents#event .event-intro {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 20px;
	margin: 0 0 70px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-intro {
		flex-direction: column;
		gap: 40px;
	}
}

.contents#event .event-intro li {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	padding: 30px 42px;
	gap: 10px;
	width: 380px;
	height: 380px;
	border-radius: 15px;
	border: 1px solid #FFF;
	background: linear-gradient(180deg, #A8A899 0%, #676765 27.5%, #1A1E2B 100%);
	box-shadow: 0px 0px 20px 0px rgba(255, 251, 215, 0.25);
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-intro li {
		flex-direction: row;
		padding: 20px 16px;
		width: 100%;
		height: 180px;
		max-width: 328px;
		height: auto;
		box-shadow: 0 0 0 #000;
	}
}

.contents#event .event-intro h5 {
	display: inline-flex;
	position: absolute;
    top: -24px;
	padding: 9px 30px;
	border-radius: 80px;
	border: 1px solid #FFF;
	background: var(--text_gradation, linear-gradient(90deg, #DAE7FF 0%, #A98447 100%));
	backdrop-filter: blur(20px);
	color: #37250A;
	font-size: 18px;
	font-weight: 700;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-intro h5 {
		top: -18px;
		padding: 6px 20px;
		font-size: 14px;
	}
}

.contents#event .event-intro .img img {
	max-width: 332px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-intro .img img {
		max-width: 140px;
	}
}

.contents#event .event-intro p {
	font-size: 18px;
	font-weight: 500;
	line-height: 140%; 
}

@media screen and (max-width: 1179px) {
	.contents#event .event-intro p {
		font-size: 14px;
		text-align: left;
	}
	
}

.contents#event .event-img {
	position: relative;
	margin: 0 0 50px 0;
	padding: 0 0 25px 0;
	width: 100%;
	text-align: center;
}

@media screen and (max-width: 639px) {
	.contents#event .event-img {
		padding: 0 5% 25px;
	}
}

.contents#event .event-img::before {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 78px;
	background-image: url("https://static.inven.co.kr/image_2011/webzine/special/20th/event_step_effect_01.png?v=240919a");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 984px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-img::before {
		background-size: 656px;
	}
}

@media screen and (max-width: 639px) {
	.contents#event .event-img::before {
		background-size: 492px;
	}
}

.contents#event .event-img img {
	position: relative;
	z-index: 5;
}

.contents#event .event-section.step1 .event-img > img {
	max-width: 566px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section.step1 .event-img > img {
		max-width: 360px;
	}
}

@media screen and (max-width: 639px) {
	.contents#event .event-section.step1 .event-img > img {
		max-width: 256px;
	}
	
}

.contents#event .event-section.step2 .event-img > img {
	max-width: 554px;
	filter: drop-shadow(0px 0px 22.4px rgba(255, 243, 231, 0.45));
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section.step2 .event-img > img {
		max-width: 354px;
	}
}

@media screen and (max-width: 639px) {
	.contents#event .event-section.step2 .event-img > img {
		max-width: 242px;
	}
}

.contents#event .event-section.step3 {
	margin: 0 0 30px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section.step3 {
		margin: 0;
	}
}

.contents#event .event-section.step3 .event-img > img {
	width: 516px;
	filter: drop-shadow(0px 0px 22px rgba(255, 243, 231, 0.95));
}

@media screen and (max-width: 1179px) {
	.contents#event .event-section.step3 .event-img > img {
		max-width: 334px;
		filter: drop-shadow(0px 0px 10px rgba(255, 243, 231, 0.95));
	}
}

@media screen and (max-width: 639px) {
	.contents#event .event-section.step3 .event-img > img{
		max-width: 258px;
	}
}


.contents#event .event-img .event-effect {
    position: absolute;
    top: 0;
    left: 50%;
	z-index: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

.contents#event .event-img .event-effect::before,
.contents#event .event-img .event-effect::after {
	content: "";
	display: block;
	position: absolute;
    left: 50%;
    bottom: 0;
	pointer-events: none;
}

.contents#event .event-img .event-effect::before {
	width: 890px;
	height: 445px;
	background: linear-gradient(180deg, rgba(216, 216, 205, 0.50) 0%, rgba(188, 144, 56, 0.50) 100%);
	border-radius: 445px 445px 0 0;
	animation-name: event-blur;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 6s;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-img .event-effect::before {
		width: 604px;
		height: 302px;
		border-radius: 302px 302px 0 0;
		filter: blur(50px);
	}
}

.contents#event .event-img .event-effect::after {
	width: 1075px;
	height: 564px;
	background-image: url('https://static.inven.co.kr/image_2011/webzine/special/20th/event_step_effect_03.png?v=240919a');
	background-repeat: no-repeat;
	background-size: 100%;
	transform: translateX(-50%) translateY(30%);
	animation-name: event-particle;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-img .event-effect::after {
		width: 600px;
		height: 315px;
	}
}

.contents#event .event-section.step2 .event-effect {
	transform: translateX(-50%) translateY(40%);
}

.contents#event .event-goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 17px;
	margin: 0 0 50px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods {
		padding: 0 5%;
	}
}

.contents#event .event-section.step1 .event-goods {
	max-width: 1180px;
}

.contents#event .event-section.step2 .event-goods {
	max-width: 1100px;
}

.contents#event .event-goods li {
	width: 180px;
	text-align: center;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods li {
		width: 96px;
	}
}

.contents#event .event-goods .item {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 0 14px 0;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background-color: rgba(86, 85, 75, 0.40);
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods .item {
		width: 96px;
		height: 96px;
	}
}

.contents#event .event-goods .item .img {
	display: flex;
}

.contents#event .event-goods .item .length {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 14px;
	bottom: 0;
	width: 40px;
	height: 40px;
	border-radius: 53px;
	background: #635240;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.096px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods .item .length {
		right: 0;
		width: 30px;
		height: 30px;
		font-size: 12px;
	}
}

.contents#event .event-goods h3 {
	font-size: 14px;
	word-break: keep-all;
}

.contents#event .event-goods [alt="event_samsung_odyssey"] {
	max-width: 121px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_samsung_odyssey"] {
		max-width: 70px;
	}
}

.contents#event .event-goods [alt="event_coupon_B"] {
	max-width: 122px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_coupon_B"] {
		max-width: 70px;
	}
}

.contents#event .event-goods [alt="event_coupon_S"] {
	max-width: 122px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_coupon_S"] {
		max-width: 70px;
	}
}

.contents#event .event-goods [alt="event_roccat_mouse"] {
	max-width: 131px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_roccat_mouse"] {
		max-width: 75px;
	}
}

.contents#event .event-goods [alt="event_56r60aa"] {
	max-width: 126px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_56r60aa"] {
		max-width: 72px;
	}
}

.contents#event .event-goods [alt="event_xbox_controller"] {
	max-width: 122px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_xbox_controller"] {
		max-width: 75px;
	}
}

.contents#event .event-goods [alt="event_aula_f87pro"] {
	max-width: 153px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_aula_f87pro"] {
		max-width: 80px;
	}
}

.contents#event .event-goods [alt="event_logitech_signature_k855"] {
	max-width: 133px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_logitech_signature_k855"] {
		max-width: 76px;
	}
}

.contents#event .event-goods [alt="event_ipad_pro"] {
	max-width: 109px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_ipad_pro"] {
		max-width: 62px;
	}
}

.contents#event .event-goods [alt="event_playstation5"] {
	max-width: 112px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_playstation5"] {
		max-width: 64px;
	}
}

.contents#event .event-goods [alt="event_legion_tab"] {
	max-width: 106px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_legion_tab"] {
		max-width: 62px;
	}
}

.contents#event .event-goods [alt="event_nintendo_switch_lite"] {
	max-width: 120px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_nintendo_switch_lite"] {
		max-width: 85px;
	}
}

.contents#event .event-goods [alt="event_msi_gh_50"] {
	max-width: 124px;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-goods [alt="event_msi_gh_50"] {
		max-width: 72px;
	}
}

.contents#event .event-btn {
	margin: 0 0 80px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-btn {
		margin: 0 0 50px 0;
	}
}

.contents#event .event-btn .btn {
	display: flex;
	padding: 23px 40px;
	justify-content: center;
	align-items: center;
	border-radius: 80px;
	background: #D7C293;
	backdrop-filter: blur(20px);
	color: #37250A;
	font-size: 18px;
	font-weight: 700;
	transition: all .2s;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-btn .btn {
		font-size: 16px;
	}
}


.contents#event .event-btn .btn:hover {
	border-radius: 80px;
	background: #97815E;
}

.contents#event .step3 .event-btn {
	margin: 0 0 24px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .event-note {
		padding: 0 5%;
	}
}

.contents#event .note-con {
	margin: 0 auto;
	padding: 40px;
	width: 100%;
	max-width: 1280px;
	border-radius: 20px;
	background: rgba(79, 79, 79, 0.40);
}

@media screen and (max-width: 1179px) {
	.contents#event .note-con {
		padding: 12px;
	}
}

.contents#event .note-con .note-title {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 40px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .note-con .note-title {
		margin: 0 0 10px 0;
	}
}

.contents#event .note-con .note-title svg {
	width: 22px;
}

@media screen and (max-width: 1179px) {
	.contents#event .note-con .note-title svg {
		width: 18px;
	}
}

.contents#event .note-con .note-title h2 {
	font-size: 20px;
	font-weight: 400;
}

@media screen and (max-width: 1179px) {
	.contents#event .note-con .note-title h2 {
		font-size: 14px;
	}
}

.contents#event .note-con ul li {
	display: flex;
	align-items: baseline;
	font-size: 16px;
	margin: 0 0 8px 0;
}

@media screen and (max-width: 1179px) {
	.contents#event .note-con ul li {
		font-size: 12px;
		line-height: 130%;
	}
}

.contents#event .note-con ul li:last-child {
	margin: 0;
}

.contents#event .note-con ul li::before {
	content: "";
	display: block;
	margin: 0 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #cfcfcf;
	transform: translateY(-3px);
}

.contents#event .note-con ul li p {
	flex: 1 1 0;
	color: #CFCFCF;
}

/* 도와주신 분들 */
.contents#partner {
	height: auto;
	padding: 120px 0 240px 0;
	background-color: #000;
}

@media screen and (max-width: 1179px) {
	.contents#partner {
		padding: 60px 0 90px 0;
	}
}

.contents#partner .patrner-con {
	position: relative;
	z-index: 5;
}

.contents#partner ul {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(126px, auto);
	gap: 20px;
	margin: 0 auto;
	max-width: 1180px;
}

@media screen and (max-width: 1179px) {
	.contents#partner ul {
		grid-template-columns: repeat(5, 1fr);
		grid-auto-rows: minmax(74px, auto);
		padding: 0 32px;
		gap: 8px;
	}
}

@media screen and (max-width: 639px) {
	.contents#partner ul {
		grid-template-columns: repeat(3, 1fr);
		padding: 0 16px;
	}
}

.contents#partner ul li {
	overflow: hidden;
	border: 2px solid #454545;
	transition: all .25s;
}

.contents#partner ul li:hover {
	border: 2px solid #B68F67;
}

.contents#partner ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5%;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.contents#partner ul li img {
	transition: all .25s;
}

.contents#partner ul li:hover img {
	transform: scale(1.15);
}