@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
    font-family: 'Cafe24Dangdanghae';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.2/Cafe24Dangdanghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html, body {
	font-family: 'Pretendard', sans-serif;
}
@media screen and (max-width: 480px) {
	:root {
		font-size: 4vw;
	}
}
@media screen and (max-width: 320px) {
	:root {
		font-size: 3.4333vw;
	}
}

/* 헤더 초기화 */
#header {
	box-shadow: none !important;
	background-color: transparent !important;
	z-index: 101;
}

#gnb, .apply_area {
	display: none !important;
}

h1.logo {
	top: 1.25rem !important;
	left: 2.5rem !important;
	width: 15.625rem !important;
	height: 3.125rem !important;
	background-size: 100% auto !important;
	background-image: url("/skin/campaign/images/hopeStar/h_logo.png") !important;
}
.qic_banner {
	display: none !important;
}
.qic_banner ul {
	display: none;
}
.support_menu {
	display: none;
}

@media screen and (max-width: 800px) {
    h1.logo {
        left: 1rem !important;
        width: 10.1875rem !important;
        height: 2.0625rem !important;
    }
}
@media screen and (max-width: 480px) {
    #footer .footer_bottom .inner {
        padding-bottom: 5.3125rem;
    }
}
/* 초기화 끝 */

.inner {
	width: 100%;
	max-width: calc(1400px + 2rem);
	margin:0 auto;
	padding: 0 1rem;
}

#quick {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: fixed;
	top: 50%;
	right: 2.5rem;
	z-index: 9999;
}
#quick a {
	border-radius: 1rem;
	box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 1280px) {
	#quick {
		width: 7.5rem;
		right: 1rem;
	}
	
}
@media screen and (max-width: 480px) {
	#quick {
		display: none;
	}
	
}


.layerPop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1rem;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
}
.layerPop._on {
	display: flex;
}
.layerPop .layerBody {
	position: relative;
}
.layerPop .layerBody button {
	overflow: hidden;
	position: absolute;
	top: -4rem;
	right: -4rem;
	width: 4rem;
	height: 4rem;
	text-indent: -999999999px;
	border: none;
	outline: none;
	border-radius: 100%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='65' viewBox='0 0 64 65' fill='none'%3E%3Crect x='0.75' y='0.797607' width='62.5' height='62.5' rx='31.25' fill='white'/%3E%3Crect x='0.75' y='0.797607' width='62.5' height='62.5' rx='31.25' stroke='%23E4E4E4' stroke-width='1.5'/%3E%3Cpath d='M31.6262 23.0476L31.6262 41.0476' stroke='%23190C52' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M41 32.3965L23 32.3965' stroke='%23190C52' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	transform: rotate(45deg);
	cursor: pointer;
}
@media screen and (max-width: 800px) {
	.layerPop .layerBody button {
		top: -3.5rem;
		right: 0;
		width: 3rem;
		height: 3rem;
	}
}


.sec {
	padding: 7.5rem 0;
}

.sec-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	margin-bottom: 3.75rem;
}
.sec-title span {
	width: 100%;
	color: #190C52;
	font-family: "Cafe24Dangdanghae";
	font-size: 3rem;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	text-shadow: 2px 2px 4px #BABABA;
}
.sec-title:before,
.sec-title:after {
	content:'';
	width: 100%;
	height: 2.25rem;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.sec-title:before {
	background-position: 100% 50%;
}
.sec-title:after {
	background-position: 100% 50%;
	transform: rotate(180deg);
}
.sec-title.purple span {
	color: #190C52;
	text-shadow: 2px 2px 4px #A497D5;
}
.sec-title.purple:before,
.sec-title.purple:after {
	background-image: url("data:image/svg+xml,%3Csvg width='1033' height='37' viewBox='0 0 1033 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1015.94 36.0441C1014.93 30.5802 1015.54 26.1738 1012.06 21.8115C1007.96 18.5949 1004.08 18.3745 998.881 18.022C1004.08 17.6695 1007.96 17.4492 1012.06 14.2326C1015.54 9.87026 1014.93 5.46389 1015.94 0C1016.95 5.46389 1016.34 9.87026 1019.82 14.2326C1023.92 17.4492 1027.8 17.6695 1033 18.022C1027.84 18.3745 1023.92 18.5949 1019.82 21.8115C1016.34 26.1738 1016.95 30.5802 1015.94 36.0441Z' fill='%239478CA'/%3E%3Cpath d='M1012.59 18.0439C1012.59 17.6365 1013.92 17.3032 1016 17.0439H0V19.0439H1016C1013.92 18.7847 1012.59 18.4143 1012.59 18.0439Z' fill='%239478CA'/%3E%3C/svg%3E%0A");
}
.sec-title.orange span {
	color: #FF6A00;
	text-shadow: 2px 2px 4px #E8CCB3;
}
.sec-title.orange:before,
.sec-title.orange:after {
	background-image: url("data:image/svg+xml,%3Csvg width='1033' height='37' viewBox='0 0 1033 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1015.94 36.0441C1014.93 30.5802 1015.54 26.1738 1012.06 21.8115C1007.96 18.5949 1004.08 18.3745 998.881 18.022C1004.08 17.6695 1007.96 17.4492 1012.06 14.2326C1015.54 9.87026 1014.93 5.46389 1015.94 0C1016.95 5.46389 1016.34 9.87026 1019.82 14.2326C1023.92 17.4492 1027.8 17.6695 1033 18.022C1027.84 18.3745 1023.92 18.5949 1019.82 21.8115C1016.34 26.1738 1016.95 30.5802 1015.94 36.0441Z' fill='%23FF9D00'/%3E%3Cpath d='M1012.59 18.0439C1012.59 17.6365 1013.92 17.3032 1016 17.0439H0V19.0439H1016C1013.92 18.7847 1012.59 18.4143 1012.59 18.0439Z' fill='%23FF9D00'/%3E%3C/svg%3E%0A");
}
.sec-title.white span {
	color: #fff;
	text-shadow: 2px 2px 4px #fff;
}
.sec-title.white:before,
.sec-title.white:after {
	background-image: url("data:image/svg+xml,%3Csvg width='1033' height='37' viewBox='0 0 1033 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1015.94 36.0441C1014.93 30.5802 1015.54 26.1738 1012.06 21.8115C1007.96 18.5949 1004.08 18.3745 998.881 18.022C1004.08 17.6695 1007.96 17.4492 1012.06 14.2326C1015.54 9.87026 1014.93 5.46389 1015.94 0C1016.95 5.46389 1016.34 9.87026 1019.82 14.2326C1023.92 17.4492 1027.8 17.6695 1033 18.022C1027.84 18.3745 1023.92 18.5949 1019.82 21.8115C1016.34 26.1738 1016.95 30.5802 1015.94 36.0441Z' fill='%23D6C1F6'/%3E%3Cpath d='M1012.59 18.0439C1012.59 17.6365 1013.92 17.3032 1016 17.0439H0V19.0439H1016C1013.92 18.7847 1012.59 18.4143 1012.59 18.0439Z' fill='%23D6C1F6'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1024px) {
	.sec-title span {
		font-size: 2.25rem;
	}
}

@media screen and (max-width: 800px) {
	.sec {
		padding: 2.5rem 0;
	}
	.sec-title {
		flex-direction: column;
		gap: 0.75rem;
		margin-bottom: 2.5rem;
	}
	.sec-title:before, 
	.sec-title:after {
		height: 1.5rem;
	}
	.sec-title span {
		font-size: 1.75rem;
	}
}


/* sec1 */
.sec1 {
	overflow: hidden;
	position: relative;
	height: 100vh;
	box-sizing: border-box;
	background-image: url(/skin/campaign/images/hopeStar/sec1_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% center;
}
.sec1 .inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	gap: 2rem;
	z-index: 2;
}
.sec1 .sec-title {
	display: block;
	margin-top: 3.75rem;
}
.sec1 .sec-title:before, 
.sec1 .sec-title:after {
	display: none;
}
.sec1 .sec-title span {
	color: #fff;
	font-size: 3.5rem;
	text-align: left;
	text-shadow: none;
	line-height: 2;
}
.sec1 .sec-title img {
	vertical-align: bottom;
	transform: translateY(-1rem);
}
.sec1 .btnGroup {
	display: flex;
	gap: 1.25rem;
}
.sec1 .btnGroup a {
	background-size: 100% 100%;
}
.sec1 .btnGroup a:nth-child(1) {
	background-image: url(/skin/campaign/images/hopeStar/sec1_btn_1_hover.png);
}
.sec1 .btnGroup a:nth-child(2) {
	background-image: url(/skin/campaign/images/hopeStar/sec1_btn_2_hover.png);
}
.sec1 .btnGroup a img {
	transition: all 0.3s ease-in-out;
}
.sec1 .btnGroup a:hover img {
	opacity: 0;
}
@media screen and (max-width: 1480px) {
	.sec1 {
		background-position: right 40% center;
	}
	.sec1 .sec-title span {
		font-size: 3rem;
	}
	.sec1 .sec-title img {
		height: 5.625rem;
	}
}
@media screen and (max-width: 1260px) {
	.sec1 {
		background-position: right 30% center;
	}
}
@media screen and (max-width: 1024px) {
	.sec1 {
		background-image: url(/skin/campaign/images/hopeStar/sec1_bg_tb.png);
		background-position: center;
	}
	.sec1 .inner {
		align-items: center;
		justify-content: flex-start;
		gap: 4rem;
	}
	.sec1 .sec-title {
		margin-bottom: 0;
		margin-top: 0;
		text-align: center;
	}
	.sec1 .sec-title span {
		text-align: center;
	}
}
@media screen and (max-width: 800px) {
	.sec1 .inner {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.sec1 .sec-title {
		margin-top: 7.5rem;
	}
	.sec1 .sec-title span {
		font-size: 2.25rem;
		line-height: 1.5;
	}
	.sec1 .sec-title img {
		height: 3.5rem;
		vertical-align: text-bottom;
		transform: translateY(0);
	}
}
@media screen and (max-width: 480px) {
	.sec1 {
		height: auto;
		padding:0;
		z-index: 100;
	}
	.sec1 .btnGroup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		gap: 0;
		z-index: 9999;
	}
	.sec1 .btnGroup a {
		width: 50%;
		text-align: center;
		box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.20) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.40) inset;
		background-size: 100% auto;
	}
	.sec1 .btnGroup a:nth-child(1) {
		background-image: url(/skin/campaign/images/hopeStar/sec1_btn_1_m_hover.png);
	}
	.sec1 .btnGroup a:nth-child(2) {
		background-image: url(/skin/campaign/images/hopeStar/sec1_btn_2_m_hover.png);
	}
	.sec1 .btnGroup a img {
		width: 100%;
	}
}

/* sec2 */
.sec2 {
	overflow: hidden;
	position: relative;
	height: 1120px;
	margin-top: -2px;
	padding-bottom: 4.375rem;
	box-sizing: border-box;
	background-image: url(/skin/campaign/images/hopeStar/sec2_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right 0;
}
.sec2 .inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.sec2 .sec-title {
	margin-top: 5rem;
}
.sec2 .sec-title:before,
.sec2 .sec-title:after {
	display: none;
}
.sec2 .sec-title span {
	color: #fff;
	font-size: 2.25rem;
	line-height: 1.44;
	text-align: left;
	text-shadow: 2px 2px 4px #666;
}
.sec2 .sec-text {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.6;
	text-shadow: 2px 2px 4px #666;
}
.sec2 .thumbWrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.875rem;
	margin-top: auto;
}
.sec2 .thumbItem {
	overflow: hidden;
	border-radius: 1.5rem;
	border: 0.25rem solid #694DA7;
	box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.10);
	background-color: #694DA7;
}
.sec2 .thumbItem img {
	width: 102%;
	object-fit: cover;
}
@media screen and (max-width: 1600px) {
	.sec2 {
		height: 1240px;
		background-image: url(/skin/campaign/images/hopeStar/sec2_bg_tb.png);
		background-size: 1600px auto;
	}
	.sec2 .sec-title {
		margin-top: 5rem;
	}
	.sec2 .sec-title span {
		font-size: 2rem;
	}
	.sec2 .sec-text {
		font-size: 1.375rem;
	}
}
@media screen and (max-width: 1280px) {
	.sec2 {
		height: 1180px;
	}
}
@media screen and (max-width: 800px) {
	.sec2 {
		height: auto;
		padding-bottom: 3.5rem;
		background-image: url(/skin/campaign/images/hopeStar/sec2_bg_m.png);
		background-size: cover;
		background-position: center bottom 20%;
	}
	.sec2 .sec-title {
		margin-top: 2rem;
	}
	.sec2 .sec-title span {
		font-size: 1.375rem;
	}
	.sec2 .sec-text {
		font-size: 1rem;
	}
	.sec2 .thumbWrap {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 35rem;
	}
	.sec2 .thumbItem {
		border-width: 2px;
		border-radius: 1rem;
	}
}
@media screen and (max-width: 600px) {
	.sec2 {
		background-position: center bottom;
	}
	.sec2 .sec-text {
		margin-bottom: 3rem;
	}
	.sec2 .thumbWrap {
		margin-top: 25rem;
	}
}


/* sec3 */
.sec3 {
	overflow: hidden;
	margin-top: -1px;
	background-image: url(/skin/campaign/images/hopeStar/sec3_bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.sec3 .sec3-swiper {
	position: relative;
}
.sec3 .swiper-container {
	overflow: visible;
}
.sec3 .swiper-slide {
	display: flex;
	opacity: 0 !important;
}
.sec3 .swiper-slide-active {
	opacity: 1 !important;
}
.sec3 .swiper-slide .left,
.sec3 .swiper-slide .right {
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 57.14%
}
.sec3 .swiper-slide .left {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	aspect-ratio: 400/271;
	border-radius: 1.5rem;
	box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.10);
	transform: translateX(-30%);
	opacity: 0;
	transition: all 0.8s ease-in-out;
}
.sec3 .swiper-slide .right {
	margin-top: 6rem;
	margin-left: auto;
	padding: 4.5rem;
	border-radius: 1.5rem 1.5rem 5rem 1.5rem;
	background-color: #FFF;
	box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.10);
	transform: translateX(30%);
	opacity: 0;
	transition: all 0.8s ease-in-out;
}
.sec3 .swiper-slide-active .left {
	transform: translateX(0);
	opacity: 1;
}
.sec3 .swiper-slide-active .left img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}
.sec3 .swiper-slide-active .left img.hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.sec3 .swiper-slide-active .left:hover img.hover {
	opacity: 1;
}
.sec3 .swiper-slide-active .right {
	transform: translateX(0);
	opacity: 1;
}
.sec3 .swiper-slide .right h3 {
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.8px;
	line-height: 1.5;
	word-break: keep-all;
}
.sec3 .swiper-slide .right h3:before {
	content:'';
	display: block;
	width: 3rem;
	height: 2.5rem;
	margin-bottom: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='41' viewBox='0 0 48 41' fill='none'%3E%3Cpath d='M35.4571 38.6477C40.8194 38.6477 45.1714 34.1677 45.1714 28.6477C45.1714 23.1277 40.8194 18.6477 35.4571 18.6477C34.748 18.6477 34.0777 18.2677 33.7085 17.6477C33.3297 17.0277 33.3005 16.2477 33.6211 15.5877C34.8742 12.9977 36.5062 10.5977 38.4588 8.48771C40.2462 6.5577 40.4114 3.5677 38.8474 1.4477C30.6388 7.8577 25.7428 18.0077 25.7428 28.6077V28.6477C25.7428 34.1677 30.0948 38.6477 35.4571 38.6477Z' fill='%23190C52'/%3E%3Cpath d='M11.1715 38.6477C16.5337 38.6477 20.8857 34.1677 20.8857 28.6477C20.8857 23.1277 16.5337 18.6477 11.1715 18.6477C10.4623 18.6477 9.79203 18.2677 9.42289 17.6477C9.04403 17.0277 9.01489 16.2477 9.33546 15.5877C10.5886 12.9977 12.2206 10.5977 14.1732 8.48771C15.9606 6.5577 16.1257 3.5677 14.5617 1.4477C6.35317 7.8577 1.45717 18.0077 1.45717 28.6077V28.6477C1.45717 34.1677 5.80917 38.6477 11.1715 38.6477Z' fill='%23190C52'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}
.sec3 .swiper-slide .right p {
	margin-top: 1rem;
	color: #2D2D2D;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2;
	word-break: keep-all;
}
.sec3 .swiper-slide .right span {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	width: 100%;
	margin-top: 1.875rem;
	font-size: 1.5rem;
	font-weight: 700;
}
.sec3 .swiper-slide .right span:after {
	content:'';
	width: 2px;
	height: 0.875rem;
	background-color: #D8D8D8;
	order: 2;
}
.sec3 .swiper-slide .right span b {
	order: 3;
	font-weight: 500;
}
.sec3 .swiper-slide .right span b small {
	color: #555;
	font-size: 18px;
}
.sec3 .swiper-control {
	display: flex;
	gap: 0.875rem;
	position: absolute;
	top: 0;
	right: 0;
}
.sec3 .swiper-control .swiper-pagination {
	position: static;
}
.sec3 .swiper-control .swiper-pagination-progressbar {
	width: 100%;
	height: 0.25rem;
	border-radius: 40px;
	background-color: #E4E4E4;
}
.sec3 .swiper-control .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	border-radius: 40px;
	background-color: #D6C1F6;
}
.sec3 .swiper-control .swiper-navigation {
	display: flex;
	gap: 1rem;
}
.sec3 .swiper-control .swiper-button-prev,
.sec3 .swiper-control .swiper-button-next {
	position: static;
	margin-top: 0;
	width: 4.5rem;
	height: 4.5rem;
	border: 1px solid #E4E4E4;
	border-radius: 100%;
	background-color: #FFF;
	box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.10);
	background-image: url("data:image/svg+xml,%3Csvg width='23' height='18' viewBox='0 0 23 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='12' height='3' rx='1.5' transform='matrix(0.707107 0.707107 0.707107 -0.707107 11.9986 2.12134)' fill='%23190C52'/%3E%3Crect x='11.5147' y='15.3492' width='12' height='3' rx='1.5' transform='rotate(-45 11.5147 15.3492)' fill='%23190C52'/%3E%3Crect x='-1.90735e-06' y='7.48535' width='20' height='3' rx='1.5' fill='%23190C52'/%3E%3C/svg%3E%0A");
	background-size: auto 1.125rem;
	background-position: center;
	background-repeat: no-repeat;
}
.sec3 .swiper-control .swiper-button-prev {
	transform: rotate(180deg);
}
.sec3 .swiper-control .swiper-button-prev:after,
.sec3 .swiper-control .swiper-button-next:after {
	display: none;
}
.sec3 .swiper-control .swiper-button-prev._on,
.sec3 .swiper-control .swiper-button-next._on {
	border-color: #694DA7;
	background-color: #694DA7;
	background-image: url("data:image/svg+xml,%3Csvg width='23' height='18' viewBox='0 0 23 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='12' height='3' rx='1.5' transform='matrix(0.707107 0.707107 0.707107 -0.707107 11.9986 2.12134)' fill='%23ffffff'/%3E%3Crect x='11.5147' y='15.3492' width='12' height='3' rx='1.5' transform='rotate(-45 11.5147 15.3492)' fill='%23ffffff'/%3E%3Crect x='-1.90735e-06' y='7.48535' width='20' height='3' rx='1.5' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1280px) {
	.sec3 .swiper-slide .right {
		padding: 3rem;
	}
}
@media screen and (max-width: 1024px) {
	.sec3 .swiper-slide .right {
		padding: 2rem;
	}
	.sec3 .swiper-slide .right h3 {
		font-size: 1.5rem;
	}
	.sec3 .swiper-slide .right p {
		font-size: 1rem;
	}
	.sec3 .swiper-slide .right span {
		font-size: 1.125rem;
	}
	.sec3 .swiper-slide .right span b small {
		font-size: 0.875rem;
	}
}
@media screen and (max-width: 800px) {
	.sec3 {
		background-image: linear-gradient(360deg, rgba(211, 200, 255, 0.00) 0%, rgba(211, 200, 255, 0.90) 59.55%);
	}
	.sec3 .swiper-slide {
		flex-direction: column;
	}
	.sec3 .swiper-slide .left,
	.sec3 .swiper-slide .right {
		max-width: 100%;
	}
	.sec3 .swiper-slide .left {
		position: static;

	}
	.sec3 .swiper-slide .right {
		margin-top: 1rem;
		padding: 1.25rem;
		border-radius: 1rem 1rem 3.75rem 1rem;
	}
	.sec3 .swiper-slide .right h3 {
		font-size: 1.25rem;
	}
	.sec3 .swiper-slide .right h3:before {
		width: 2.25rem;
		height: 2rem;
		margin-bottom: 1rem;
	}
	.sec3 .swiper-slide .right p {
		font-size: 1rem;
		line-height: 1.5;
	}
	.sec3 .swiper-slide .right span {
		justify-content: flex-start;
		margin-top: 1rem;
	}
	.sec3 .swiper-control {
		align-items: center;
		position: static;
		margin-top: 1.5rem;
	}
	.sec3 .swiper-control .swiper-navigation {
		gap: 0.625rem;
	}
	.sec3 .swiper-control .swiper-button-prev, 
	.sec3 .swiper-control .swiper-button-next {
		width: 3rem;
		height: 3rem;
		background-size: auto 0.75rem;
	}
}


/* sec4 */
.sec4 {
	overflow: hidden;
	position: relative;
	background: linear-gradient(180deg, #FFF7D4 64.28%, #FFF4B2 100%);
}
.sec4 .inner {
	display: flex;
	align-items: flex-start;
	gap: 0 8.125rem;
	position: relative;
	z-index: 2;
}
.sec4 .sec-title {
	margin-top: 5.6rem;
}
.sec4 .sec-title:before, 
.sec4 .sec-title:after {
	display: none;
}
.sec4 .sec-title span {
	text-align: left;
}

.sec4 .storeWrap {
	display: flex;
	gap: 2.5rem;
}
.sec4 .storeList {
	position: relative;
}
.sec4 .storeList > img {
	position: relative;
	z-index: 3;
}
.sec4 .storeList > div {
	margin-top: -1.875rem;
	padding: 0 1.25rem;
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: 100% 100%;
}
.sec4 .storeList:first-child > div {
	background-image: url(/skin/campaign/images/hopeStar/sec4_store_1.png);
}
.sec4 .storeList:last-child > div {
	background-image: url(/skin/campaign/images/hopeStar/sec4_store_2.png);
}
.sec4 .storeList .img {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	aspect-ratio: 1 / 0.6;
	border-radius: 0.5rem;
}
.sec4 .storeList .img img {
	object-fit: cover;
}
.sec4 .storeList .lb {
	display: inline-block;
	margin:1.875rem 0.75rem;
	padding:0.825rem 1.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 60px;
}
.sec4 .storeList:first-child .lb {
	color: #4D3004;
	background-color: #FFE386;
}
.sec4 .storeList:last-child .lb {
	color: #fff;
	background-color: #9478CA;
}
.sec4 .storeList button {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 4rem;
	height: 4rem;
	text-indent: -999999999px;
	border: none;
	outline: none;
	border-radius: 100%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='65' viewBox='0 0 64 65' fill='none'%3E%3Crect x='0.75' y='0.797607' width='62.5' height='62.5' rx='31.25' fill='white'/%3E%3Crect x='0.75' y='0.797607' width='62.5' height='62.5' rx='31.25' stroke='%23E4E4E4' stroke-width='1.5'/%3E%3Cpath d='M31.6262 23.0476L31.6262 41.0476' stroke='%23190C52' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M41 32.3965L23 32.3965' stroke='%23190C52' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	cursor: pointer;
}

.sec4 .obj-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.sec4 .obj-box .obj {
	position: absolute;
}
.sec4 .obj-box .obj.star-l {
	top: 0;
	left: 5%;
	width: 11.0625rem;
}
.sec4 .obj-box .obj.star-r {
	top: 0;
	right: 5%;
	width: 12.1875rem;
}
.sec4 .obj-box .obj.cloud-l {
	bottom: 0;
	left: 0;
	width: 28.875rem;
	animation: floatCloud 5s linear infinite alternate;
}
.sec4 .obj-box .obj.cloud-r {
	bottom: 0;
	right: 0;
	width: 41.375rem;
	animation: floatCloud 5s linear infinite alternate;
}
@keyframes floatCloud {
	0% { transform: translateY(0); }
	100% { transform: translateY(-6.25rem); }
  }

/* 각 별똥별의 위치와 애니메이션 딜레이 설정 */
.shootingStar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.shootingStar .star {
	position: absolute;
	width: 2px;
	height: 80px;
	background: linear-gradient(45deg, #FFD869, transparent);
	transform: rotate(45deg);
	opacity: 0;
	animation: shoot 2s ease-out infinite;
}
.shootingStar .star:nth-child(1) {
	top: -50px;
	left: 20%;
	animation-delay: 0s;
}
.shootingStar .star:nth-child(2) {
	top: -50px;
	left: 40%;
	animation-delay: 1s;
}
.shootingStar .star:nth-child(3) {
	top: -50px;
	left: 60%;
	animation-delay: 1.5s;
}
.shootingStar .star:nth-child(4) {
	top: -50px;
	left: 80%;
	animation-delay: 2.2s;
}

@keyframes shoot {
	0% {
	transform: translate(0, 0) rotate(45deg);
	opacity: 1;
	}
	100% {
	transform: translate(-400px, 400px) rotate(45deg);
	opacity: 0;
	}
}

@media screen and (max-width: 1280px) {
	.sec4 .inner {
		flex-direction: column;
		align-items: center;
	}
	.sec4 .sec-title {
		margin-top: 0;
	}
	.sec4 .sec-title span {
		text-align: center;
	}
	.sec4 .storeList > div {
		padding: 1.25rem 1.25rem 0;
	}
}
@media screen and (max-width: 800px) {
	.sec4 .storeList > div {
		padding: 1rem 1rem 0;
	}
	.sec4 .storeList .lb {
		margin: 1.5rem 0.5rem;
		font-size: 1rem;
	}
	.sec4 .storeList button {
		width: 3rem;
		height: 3rem;
	}
	.sec4 .obj-box .obj.star-l {
		width: 5.75rem;
	}
	.sec4 .obj-box .obj.star-r {
		width: 5.125rem;
	}
}
@media screen and (max-width: 600px) {
	.sec4 .storeWrap {
		flex-direction: column;
		align-items: center;
		gap: 2.5rem;
	}
	.sec4 .storeList {
		width: 100%;
	}
}


/* sec5 */
.sec5 {
	position: relative;
	background-image: url(/skin/campaign/images/hopeStar/sec5_bg.png);
	background-size: cover;
	background-position: center;
}
.sec5 .programWrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.5rem;
}
.sec5 .programList {
	overflow: hidden;
	position: relative;
	border-radius: 1.5rem;
	box-shadow: 2px 4px 12px 0px rgba(67, 58, 0, 0.35);
}
.sec5 .programList img {
	width: calc(100% + 1px);
	max-width: calc(100% + 1px);
}
.sec5 .programList:nth-child(2) {
	margin-top: 4.375rem;
}
.sec5 .programTxt {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding:1.875rem;
	color: #f8f8f8;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.80) 90%);
}
.sec5 .programTxt p {
	margin-top: auto;
	margin-bottom: 0.5rem;
	font-size: 1.75rem;
	font-weight: 700;
}
.sec5 .programTxt span {
	font-size: 1.25rem;
	line-height: 1.6;
	word-break: keep-all;
}

@media screen and (max-width: 1460px) {
	.sec5 .programWrap {
		flex-wrap: wrap;
		justify-content: center;
	}
	.sec5 .programList:nth-child(2) {
		margin-top: 0;
	}
}
@media screen and (max-width: 800px) {
	.sec5 .programTxt p {
		font-size: 1.375rem;
	}
	.sec5 .programTxt span {
		font-size: 1rem;
	}
}

/* sec6 */
.sec6 {
	position: relative;
	background-color: #50388F;
	background-image: url(/skin/campaign/images/hopeStar/sec6_bg.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.sec6 .sec-title.white span {
	text-shadow: none;
}
.sec6 .faq-item {
	overflow: hidden;
	border-radius: 1rem;
}
.sec6 .faq-item + .faq-item {
	margin-top: 1.25rem;
}
.sec6 .faq-item .question {
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
	padding: 1.75rem 2.5rem;
	font-family: 'Cafe24Dangdanghae';
	font-size: 1.5rem;
	word-break: keep-all;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	cursor: pointer;
}
.sec6 .faq-item .question:after {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: auto;
	background-image: url(/skin/campaign/images/hopeStar/ic_open.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	transform: rotate(0);
	content:'';
}
.sec6 .faq-item .question span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	color: #fff;
	border-radius: 100%;
	background-color: #3A2678;
}
.sec6 .faq-item._active {
	box-shadow: 0px 0px 20px 0px #8b77c2;
}
.sec6 .faq-item._active .question {
	color: #845ece;
}
.sec6 .faq-item._active .question:after {
	transform: rotate(180deg);
}
.sec6 .faq-item .answer {
	display: none;
	padding: 1.75rem 2.5rem;
	background-color: #F5EDFF;
}
.sec6 .faq-item .answer p {
	display: flex;
	gap: 1rem;
	position: relative;
	color: #121212;
	font-size: 1.25rem;
	line-height: 1.6;
	word-break: keep-all;
}
.sec6 .faq-item .answer p span {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	margin-top: -0.5rem;
	color: #190C52;
	font-family: 'Cafe24Dangdanghae';
	font-size: 1.5rem;
	border-radius: 100%;
	background-color: #FFC637;
}
.sec6 .btnGroup {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 3.75rem;
}
.sec6 .btnGroup a {
	background-size: 100% 100%;
}
.sec6 .btnGroup a {
	background-image: url(/skin/campaign/images/hopeStar/sec6_btn_hover.png);
}
.sec6 .btnGroup a img {
	transition: all 0.3s ease-in-out;
}
.sec6 .btnGroup a:hover img {
	opacity: 0;
}
@media screen and (max-width: 800px) {
	.sec6 .faq-item .question {
		padding: 1.5rem 1.25rem;
		font-size: 1.125rem;
	}
	.sec6 .faq-item .question span {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
	}
	.sec6 .faq-item .question:after {
		width: 1.25rem;
		height: 1.25rem;
	}
	.sec6 .faq-item .answer {
		padding: 1.5rem 1.25rem;
	}
	.sec6 .faq-item .answer p {
		font-size: 1rem;
	}
	.sec6 .faq-item .answer p span {
		width: 2.5rem;
		height: 2.5rem;
	}
	.sec6 .btnGroup {
		margin-top: 2.5rem;
	}
	.sec6 .btnGroup a {
		width: 11.25rem;
	}
}