@charset "UTF-8";

/******************************************************
 * 폰트 및 전역 설정
 ******************************************************/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

html {
	scroll-behavior: smooth;
}

#digitalbadge_landing_wrap {
	font-family: 'pretendard', sans-serif !important;
	width: 100%;
	opacity: 0;
	animation: fadeIn 0.5s ease forwards;
}

/* 텍스트 선택 색상 */
::selection {
	background-color: #44A5FF;
	color: #fff;
}

::-moz-selection {
	background-color: #44A5FF;
	color: #fff;
}


/******************************************************
 * 애니메이션 정의
 ******************************************************/
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

@keyframes pulse {
	0%, 100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(0, 12px);
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, 10px);
		transform: translate(0, 10px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


/******************************************************
 * HERO 섹션 (#digitalbadge_landing_top)
 ******************************************************/
#digitalbadge_landing_top {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #2532B0 0%, #111111 100%);
	background-size: auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 980px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Rolling Background */
#digitalbadge_landing_top .rolling-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	background-image: url('../images/event/landingPage/landing_digitalbadge/landing_badge_top.svg');
	background-repeat: repeat-x;
	background-size: auto 30%;
	background-position: 0 80%;
	z-index: 0;
}

/* Rolling Background 그라데이션 오버레이 */
#digitalbadge_landing_top .rolling-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, 
		rgba(37, 50, 176, 0.3) 0%,
		rgba(17, 17, 17, 0.5) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* 콘텐츠 레이어 */
#digitalbadge_landing_top > *:not(.rolling-bg) {
	position: relative;
	z-index: 1;
}

/* 메인 타이틀 */
#digitalbadge_landing_top .main_title {
	margin-top: 260px;
	font-size: 64px;
	font-weight: 700;
	color: #fff;
}

/* 서브 타이틀 */
#digitalbadge_landing_top .sub_title {
	font-size: 26px;
	font-weight: 600;
	color: #fff;
	margin-top: 24px;
}

/* Learn More */
#digitalbadge_landing_top .learn_more {
	margin-top: 120px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	transition: transform 0.3s ease;
}

#digitalbadge_landing_top .learn_more .learn_more_icon {
	-webkit-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
}

#digitalbadge_landing_top > .learn_more > .learn_more_text {
	font-size: 16px;
	font-weight: 500;
	margin-top: 12px;
	color: #fff;
}


/******************************************************
 * INTRODUCTION 섹션 (#digitalbadge_landing_introduction)
 ******************************************************/
#digitalbadge_landing_introduction {
	width: 100%;
	background-color: #111;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 160px;
	align-items: center;
	padding: 120px 0 160px;
	box-sizing: border-box;
}

#digitalbadge_landing_introduction > .introduction_content {
	width: 100%;
	max-width: 994px;
}

/* Introduction 타이틀 */
.introduction_title {
	font-size: 30px;
	font-weight: 600;
}

.introduction_title > .point_color {
	color: #44A5FF;
}

/* Introduction 설명 */
.introduction_desc {
	margin-top: 60px;
}

.introduction_desc > .icon,
.introduction_desc > .sub_desc {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.introduction_desc > .icon {
	padding: 20px 0;
}

.introduction_desc > .sub_desc {
	font-size: 18px;
	font-weight: 600;
	color: #EDEDED;
	text-align: center;
}

/* Introduction 리스트 */
.introduction_desc_list {
	display: flex;
	gap: 60px;
}

.introduction_desc_list > li {
	width: 33.333%;
}

.introduction_desc_title {
	font-size: 24px;
	font-weight: 600;
	margin: 40px 0 12px;
}

.introduction_text {
	font-size: 18px;
	font-weight: 600;
	color: #ddd;
}

.introduction_desc_list .desc_list {
	font-size: 16px;
	font-weight: 500;
	color: #ddd;
	margin-top: 30px;
	word-break: keep-all;
}

/* 아이콘 회전 효과 */
.introduction_icon img,
.icon_img img {
	transition: transform 0.5s ease;
}

/* Circle Content (신뢰 구조) */
.circle_content_wrap {
	display: flex;
	position: relative;
	height: 278px;
}

.circle_content_wrap > div {
	width: 530px;
	border-radius: 158.5px;
	height: 278px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: absolute;
	transition: all 0.4s ease;
	cursor: pointer;
}

.circle_content_wrap > div:nth-of-type(1) {
	background-color: rgba(43, 57, 211, 0.5);
	left: 0;
}

.circle_content_wrap > div:nth-of-type(2) {
	background-color: rgba(28, 126, 255, 0.5);
	right: 0;
}

.circle_content:hover {
	transform: scale(1.05);
	box-shadow: 0 15px 40px rgba(68, 165, 255, 0.4);
}

.circle_content .introduction_text {
	font-size: 16px;
	color: #fff;
	font-weight: 500;
}

/* Icon Box (배지 카드) */
.icon_box {
	background: linear-gradient(129.51deg, rgba(255, 255, 255, 0) 4.8%, rgba(255, 255, 255, 0.09) 68.53%, rgba(255, 255, 255, 0) 95.2%);
	border-radius: 16px;
	position: relative;
	height: 224px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 40px;
	box-sizing: border-box;
	transition: transform  1.1s ease, box-shadow  0.3s ease;
	cursor: pointer;
	will-change: transform;
}

.icon_box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(124.5deg, rgba(255, 255, 255, 0.8) 9.27%, rgba(255, 255, 255, 0.6) 35.34%, rgba(255, 255, 255, 0.2) 66.29%, rgba(255, 255, 255, 0.6) 90.73%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

.icon_box:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(68, 165, 255, 0.3);
}

.icon_box:active {
	transform: translateY(-4px) scale(0.98);
}

.icon_box:hover .icon_img img {
	transform: rotate(360deg) scale(1.1);
}

.icon_box > .icon_title {
	font-size: 24px;
	font-weight: 600;
}


/******************************************************
 * HOW TO USE 섹션 (#digitalbadge_landing_howtouse)
 ******************************************************/
#digitalbadge_landing_howtouse {
	padding: 140px 0;
	display: flex;
	flex-direction: column;
	gap: 140px;
	align-items: center;
}

.howtouse_content {
	width: 100%;
	max-width: 994px;
}

.howtouse_content_title {
	font-size: 30px;
	font-weight: 600;
	color: #111;
	margin-bottom: 50px;
}

.howtouse_content_detail {
	width: 100%;
}

.howtouse_content_detail > .howtouse_content_list {
	display: flex;
	justify-content: space-between;
	gap: 60px;
	word-break: keep-all;
}

.howtouse_content_list > li {
	transition: transform 0.3s ease;
	padding: 20px;
	border-radius: 12px;
	width:33.333%;
}

.howtouse_content_list:not(.badge_issuance) > li:hover {
	transform: translateY(-5px);
	background-color: rgba(128, 128, 128, 0.05);
}

.howtouse_content_list > li > .title {
	font-size: 24px;
	font-weight: 600;
	color: #111;
	margin: 12px 0;
}

.howtouse_content_list > li > .desc {
	font-size: 18px;
	font-weight: 600;
	color: #555;
}

.howtouse_content_list > li > .desc > .sub_text {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #555;
}

/* 배지 발급 Flow */
.howtouse_content_detail > .howtouse_content_list.badge_issuance {
	display: block;
}

.howtouse_content_list.badge_issuance > li {
	width: 657px;
	height: 67px;
	border-radius: 62px;
	display: flex;
	padding: 0 24px;
	align-items: center;
	color: #333;
	font-size: 18px;
	font-weight: 600;
	box-sizing: border-box;
	transition: all 0.3s ease;
	cursor: default;
	will-change: transform;
}

.howtouse_content_list.badge_issuance > li:nth-of-type(1) {
	background-color: #E2EAFF;
}

.howtouse_content_list.badge_issuance > li:nth-of-type(2) {
	background-color: #A3BCFF;
	margin: 16px 0 16px 169px;
}

.howtouse_content_list.badge_issuance > li:nth-of-type(3) {
	background-color: #5383FF;
	color: #fff;
	margin-left: 337px;
}

.howtouse_content_list.badge_issuance > li:hover {
	transform: translateX(10px);
	box-shadow: 0 8px 20px rgba(83, 131, 255, 0.3);
}

.howtouse_content_list.badge_issuance > li:hover .list_num {
	animation: rotate 0.6s ease;
}

.howtouse_content_list.badge_issuance > li > .list_num {
	width: 31px;
	height: 31px;
	line-height: 31px;
	background-color: #333;
	color: #fff;
	border-radius: 40px;
	margin-right: 14px;
	text-align: center;
}

.howtouse_content_list.badge_issuance > li:nth-of-type(3) > .list_num {
	background-color: #fff;
	color: #333;
}

.howtouse_content_detail > .sub_text {
	font-size: 16px;
	font-weight: 500;
	color: #555;
	margin-top: 20px;
	text-align: right;
}


/******************************************************
 * CTA 섹션 (#digitalbadge_landing_bottom)
 ******************************************************/
#digitalbadge_landing_bottom {
	background: linear-gradient(0deg, #4873FF 0%, #161C59 100%);
	height: 557px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
}

/* 배경 이미지 */
.bottom-bg-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: url('../images/event/landingPage/landing_digitalbadge/landing_badge_bottom.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* 콘텐츠 레이어 */
#digitalbadge_landing_bottom .bottom_title,
#digitalbadge_landing_bottom .bottom_desc,
#digitalbadge_landing_bottom .bottom_btn {
	position: relative;
	z-index: 1;
}

#digitalbadge_landing_bottom .bottom_title {
	font-size: 30px;
	font-weight: 600;
}

#digitalbadge_landing_bottom .bottom_desc {
	font-size: 18px;
	font-weight: 600;
	margin: 30px 0 50px;
	text-align: center;
}

#digitalbadge_landing_bottom .bottom_btn > a {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 버튼 스타일 */
#digitalbadge_landing_bottom .bottom_btn > a.btn_white {
	height: 44px;
	color: #111;
	border-radius: 24px;
	padding: 0 22px;
	box-sizing: border-box;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.3s ease;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}

.btn_white::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(68, 165, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn_white:hover::before {
	width: 300px;
	height: 300px;
}

.btn_white:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn_white:focus {
	outline: 3px solid #44A5FF;
	outline-offset: 3px;
}

#digitalbadge_landing_bottom .bottom_btn > a > img {
	margin-left: 6px;
}

/* 링크 스타일 */
#digitalbadge_landing_bottom .bottom_btn > a.underline_link {
	text-decoration: underline;
	font-size: 15px;
	font-weight: 500;
	margin-top: 24px;
	transition: all 0.3s ease;
}

.underline_link:hover {
	color: #44A5FF;
	text-decoration-color: #44A5FF;
}

.underline_link:focus {
	outline: 3px solid #44A5FF;
	outline-offset: 3px;
}


/******************************************************
 * 반응형 (모바일)
 ******************************************************/
@media (max-width: 1024px) {
	/* HERO 섹션 */
	#digitalbadge_landing_top {
		height: 500px;
	}

	#digitalbadge_landing_top .main_title {
		font-size: 36px;
		margin-top:120px;
	}

	#digitalbadge_landing_top .sub_title {
		font-size: 18px;
	}

	#digitalbadge_landing_top .learn_more {
		margin-top: 60px;
	}

	/* INTRODUCTION 섹션 */
	#digitalbadge_landing_introduction {
		padding: 60px 20px;
		gap: 80px;
	}

	.introduction_title {
		font-size: 24px;
	}

	.introduction_title > .point_color {
		font-size: 24px;
	}

	.introduction_desc_list {
		gap: 30px;
		flex-wrap: wrap;
	}

	.introduction_desc_list > li {
		width: 100%;
	}

	.introduction_desc_list > li > div {
		text-align: center;
	}

	.introduction_desc_title {
		font-size: 24px;
		margin: 20px 0 5px;
	}

	.circle_content_wrap {
		flex-wrap: wrap;
		gap: 30px;
		height: auto;
	}

	.circle_content_wrap > div {
		width: 100%;
		height: auto;
		position: relative;
		padding: 25px;
	}

	.circle_content .introduction_text {
		font-size: 16px;
	}

	.introduction_desc > .sub_desc {
		font-size: 18px;
	}

	/* HOW TO USE 섹션 */
	#digitalbadge_landing_howtouse {
		padding: 80px 0;
		gap: 80px;
	}

	.howtouse_content_title {
		padding: 0 20px;
	}

	.howtouse_content_detail {
		padding: 0 20px;
		box-sizing: border-box;.howtouse_content_detail > .howtouse_content_list
	}

	.howtouse_content_detail > .howtouse_content_list {
		gap: 30px;
		flex-wrap: wrap;
	}

	.howtouse_content_detail > .howtouse_content_list > li {
		width: 100%;
		padding: 0 20px;
	}

	.howtouse_content_list > li > .icon {
		text-align: center;
	}

	.howtouse_content_list.badge_issuance > li {
		height: auto;
		font-size: 16px;
		text-align: left;
		height: 80px;
	}

	.howtouse_content_list.badge_issuance > li:nth-of-type(2),
	.howtouse_content_list.badge_issuance > li:nth-of-type(3) {
		margin-left: 0;
	}

	.howtouse_content_list.badge_issuance > li > .list_title {
		width: calc(100% - 45px);
	}

	.howtouse_content_detail > .sub_text {
		padding: 0 20px;
		text-align: left;
	}

	/* CTA 섹션 */
	#digitalbadge_landing_bottom {
		padding: 0 20px;
		box-sizing: border-box;
		height: 500px;
	}

	.bottom-bg-image {
		background-size: cover;
	}

	/* 호버 효과 비활성화 */
	.icon_box:hover,
	.circle_content:hover,
	.badge_issuance > li:hover,
	.howtouse_content_list:not(.badge_issuance) > li:hover {
		transform: none;
		box-shadow: none;
	}
	
	.icon_box:hover .icon_img img {
		transform: none;
	}
}